/* TAZRIRT global header upgrade. Loads site-wide (it's the header).
   Real Astra class names verified against live rendered markup.
   NOTE: Astra injects its own dynamic <style> block LATER in <head> than
   this file, using --ast-global-color-0 (#046bd2, blue) for links, the
   search form border and some icon colors. Ties in specificity go to
   Astra's later block, so every property that collides with an Astra
   rule is marked !important below - confirmed by reading the actual
   rendered dynamic CSS, not guessed. */

:root {
  --tz-hdr-taupe: #8C7A66;
  --tz-hdr-taupe-text: #FBF8F4;
  --tz-hdr-warm-white: #FEFCFA;
  --tz-hdr-charcoal: #3A342C;
  --tz-hdr-accent: #98452F;
  --tz-hdr-border: #E7DFD3;
}

.ast-above-header-wrap { background: var(--tz-hdr-taupe) !important; }
.ast-above-header-wrap .ast-header-html p,
.ast-above-header-wrap .ast-builder-html-element p {
  color: var(--tz-hdr-taupe-text) !important;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  margin: 0;
  text-align: center;
}
.ast-above-header-wrap .site-above-header-wrap { min-height: 38px; display: flex; align-items: center; }
.tz-hdr-faq-link {
  color: var(--tz-hdr-taupe-text) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 16px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .ast-above-header-wrap .ast-header-html p { font-size: 12.5px; }
  .ast-above-header-wrap .site-above-header-wrap { min-height: 32px; }
}

.ast-main-header-wrap { background: var(--tz-hdr-warm-white); border-bottom: 1px solid var(--tz-hdr-border); }
.ast-main-header-wrap .site-primary-header-wrap,
.ast-below-header-wrap .site-below-header-wrap { max-width: 1360px; }
.ast-main-header-wrap .ast-primary-header-bar { min-height: 96px; }
.site-branding.ast-site-identity img,
.site-branding.ast-site-identity .custom-logo { max-height: 56px; width: auto; }
.site-branding.ast-site-identity .site-title a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--tz-hdr-charcoal) !important;
  letter-spacing: 0.5px;
}

.ast-header-search { flex: 1 1 auto; max-width: 820px; min-width: 200px; margin: 0 32px; position: relative; }\n.ast-main-header-wrap .site-header-primary-section-center { flex: 1 1 auto; }
.ast-header-search .ast-search-menu-icon.slide-search { position: static !important; width: 100%; }
.ast-header-search .ast-search-menu-icon .search-form,
.ast-desktop .ast-header-search .slide-search .search-form {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  background: #F4F0EA !important;
  border: 1px solid var(--tz-hdr-border) !important;
  height: 50px;
}
.ast-header-search .search-field,
.ast-header-search .slide-search .search-field {
  width: 100%;
  height: 50px;
  padding: 0 52px 0 22px;
  font-size: 16px;
  font-family: 'Lora', Georgia, serif;
  color: var(--tz-hdr-charcoal) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px;
}
.ast-header-search .search-field::placeholder { color: #8A8177; }
.ast-header-search .search-form:focus-within { outline: 2px solid var(--tz-hdr-accent); outline-offset: 2px; background: #fff !important; }
.ast-header-search .ast-search-submit {
  position: absolute !important;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none;
  cursor: pointer;
  color: var(--tz-hdr-charcoal) !important;
  transition: background 150ms ease;
}
.ast-header-search .ast-search-submit:hover,
.ast-header-search .ast-search-submit:focus-visible {
  background: rgba(152,69,47,0.08) !important;
  outline: 2px solid var(--tz-hdr-accent);
  outline-offset: 1px;
}
.ast-header-search .ast-search-submit svg,
.ast-header-search .ast-search-submit .ast-icon svg path { fill: currentColor !important; width: 18px; height: 18px; }
/* Real fix: the toggle icon-link is nested INSIDE .ast-search-menu-icon,
   not a direct child of .ast-header-search - the previous selector used
   '>' and never matched anything, which is why it kept showing. */
.ast-header-search .ast-search-icon { display: none !important; }

.ast-header-account-wrap,
.ast-site-header-cart .cart-container { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.ast-header-account-link,
.ast-header-account-link:link,
.ast-header-account-link:visited { color: var(--tz-hdr-charcoal) !important; }
.ast-header-account-link svg,
.ast-header-account-link svg path,
.ast-site-header-cart svg,
.ast-site-header-cart svg path,
.ast-site-header-cart .astra-icon-cart {
  width: 25px; height: 25px;
  color: var(--tz-hdr-charcoal) !important;
  fill: var(--tz-hdr-charcoal) !important;
  transition: color 150ms ease, transform 150ms ease;
}
.ast-header-account-link:hover svg, .ast-header-account-link:hover svg path,
.ast-site-header-cart:hover svg, .ast-site-header-cart:hover svg path {
  color: var(--tz-hdr-accent) !important; fill: var(--tz-hdr-accent) !important;
}
.ast-header-account-link:focus-visible,
.ast-site-header-cart a:focus-visible { outline: 2px solid var(--tz-hdr-accent); outline-offset: 3px; border-radius: 4px; }
.ast-site-header-cart .count {
  background: var(--tz-hdr-accent) !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 11px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 200ms ease;
}
.ast-site-header-cart.tz-cart-bump .count { transform: scale(1.25); }

.ast-main-header-wrap.tz-sticky-active { position: sticky; top: 0; z-index: 99; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.ast-below-header-wrap.tz-sticky-active { position: sticky; z-index: 98; }
body.admin-bar .ast-main-header-wrap.tz-sticky-active { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ast-main-header-wrap.tz-sticky-active { top: 46px; } }

@media (max-width: 767px) {
  .ast-main-header-wrap .ast-primary-header-bar { min-height: 64px; }
  .site-branding.ast-site-identity .site-title a { font-size: 20px; }
  .site-branding.ast-site-identity img,
  .site-branding.ast-site-identity .custom-logo { max-height: 40px; }
  .site-header-primary-section-left, .site-header-primary-section-right { flex: 0 0 auto; }
  .site-header-primary-section-center { flex: 1 1 auto; text-align: center; }
  .ast-below-header-wrap .ast-header-search { max-width: none; margin: 10px 16px; }
  .tz-hdr-faq-link { display: none; }
}

html { overflow-x: hidden; }

/* ===================== MOBILE MENU =====================
   Desktop nav  = Max Mega Menu on location "primary".
   Mobile nav   = Astra header builder on location "mobile_menu".
   Both are now fed by the SAME WordPress menu (TAZRIRT Primary Menu,
   term 68). Before, mobile_menu had no menu assigned, so Astra fell back
   to wp_page_menu (Cart / Checkout / FAQ / My account) - that was the
   desktop-vs-phone mismatch.

   Everything below only restyles Astra's own accordion markup:
     ul#ast-hf-mobile-menu > li.menu-item > a.menu-link
                                          + button.ast-menu-toggle
                                          + ul.sub-menu
   The ID selector outranks Astra's later dynamic block (class-only). */

#ast-hf-mobile-menu {
  display: block;
  background: var(--tz-hdr-warm-white);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#ast-hf-mobile-menu .menu-item { position: relative; display: block; width: 100%; }

/* The arrow Astra also prints INSIDE the link duplicates the toggle
   button on the right. One arrow per row is enough on a phone. */
#ast-hf-mobile-menu .dropdown-menu-toggle { display: none !important; }

/* --- Level 1: the eight top-level entries --- */
#ast-hf-mobile-menu > .menu-item > .menu-link {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 64px 0 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--tz-hdr-charcoal);
  border-bottom: 1px solid var(--tz-hdr-border);
}

/* --- Level 2: section headers (Tribe/Collection, Size, Color, Pattern,
       Home Decor, Leather Bags, Artisanal Clothing) --- */
#ast-hf-mobile-menu .sub-menu { background: #F7F3EC; }
#ast-hf-mobile-menu .sub-menu .menu-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 64px 0 36px;
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.3;
  color: var(--tz-hdr-charcoal);
  border-bottom: 1px solid rgba(58, 52, 44, 0.07);
}
#ast-hf-mobile-menu .sub-menu > .menu-item-has-children > .menu-link {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--tz-hdr-accent);
}

/* --- Level 3: the actual category links --- */
#ast-hf-mobile-menu .sub-menu .sub-menu { background: var(--tz-hdr-warm-white); }
#ast-hf-mobile-menu .sub-menu .sub-menu .menu-link {
  padding-left: 52px;
  font-size: 15px;
  min-height: 46px;
}

/* --- Toggle button: a real 56x54 thumb target, not a tiny chevron --- */
#ast-hf-mobile-menu .ast-menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--tz-hdr-charcoal);
}
#ast-hf-mobile-menu .sub-menu .ast-menu-toggle { height: 48px; }
#ast-hf-mobile-menu .ast-menu-toggle .ast-icon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  transition: transform 180ms ease;
}
#ast-hf-mobile-menu .ast-menu-toggle[aria-expanded="true"] .ast-icon svg { transform: rotate(180deg); }
#ast-hf-mobile-menu .ast-menu-toggle:focus-visible,
#ast-hf-mobile-menu .menu-link:focus-visible {
  outline: 2px solid var(--tz-hdr-accent);
  outline-offset: -2px;
}

/* Tap feedback - phones have no hover. */
#ast-hf-mobile-menu .menu-link:active,
#ast-hf-mobile-menu .ast-menu-toggle:active { background: rgba(152, 69, 47, 0.07); }

/* An open branch gets a hairline down its left edge so you always know
   which section you are standing in while scrolling a long list. */
#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle[aria-expanded="true"] ~ .sub-menu {
  box-shadow: inset 3px 0 0 var(--tz-hdr-accent);
}

/* Menu item 98 is the italic strapline of the desktop mega panel
   ("Choose your rug by collection, size..."). It is decoration, not a
   destination - it links to "#" - so it is dropped on phones. */
#ast-hf-mobile-menu .menu-item-98 { display: none; }


/* 2026-10-14 navigation rebuild: Rugs mega menu card + item descriptions */
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card{background:#F3ECE2;padding:22px 22px 18px;border-radius:2px}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card p{margin:0 0 10px}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card__title{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:700;line-height:1.15;color:#2A2420}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card__text{font-size:13px;line-height:1.55;color:#4A3F36}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card a{font-size:13px;color:#2A2420;text-decoration:underline;text-underline-offset:3px}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card a.tz-mm-card__cta{font-weight:600;color:#7A3524;text-decoration:none}
#mega-menu-wrap-primary #mega-menu-primary .tz-mm-card a:hover{color:#7A3524}
#mega-menu-wrap-primary #mega-menu-primary .mega-menu-description{display:block;font-size:12px;line-height:1.4;color:#6B5E52;font-weight:400;margin-top:2px}
@media (min-width:769px){#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{width:min(1120px, calc(100vw - 48px)) !important;left:50% !important;transform:translateX(-50%);padding:32px 36px !important;box-sizing:border-box}}


/* ===================== MAIN NAV BAR (2026-10-25) =====================
   Below-header row that holds Max Mega Menu (location "primary").
   - Astra painted this row #eeeeee (its default) - now the warm cream of
     the mega panels, so header + bar + dropdown read as one surface.
   - The MMM theme asks for "IBM Plex Mono", which is never loaded, so the
     browser fell back to Times. Top-level links now use Lora (already
     loaded site-wide) in tracked small caps.
   - Thin accent underline on hover / open / current page.
   - Fine chevron instead of the solid dashicon triangle.
   - "Ready to Ship" gets a small olive dot = in stock, ships now.
   Rollback: tz-header.css.bak-20261025-navbar */

.ast-below-header-wrap .ast-below-header-bar,
.ast-header-break-point .ast-below-header-wrap .ast-below-header-bar {
  background-color: #F7F3EC !important;
  border-bottom: 1px solid var(--tz-hdr-border) !important;
}
.ast-below-header-wrap .ast-below-header-bar .site-below-header-wrap { min-height: 54px; }

@media (min-width: 769px) {
  #mega-menu-wrap-primary #mega-menu-primary { display: flex; align-items: center; justify-content: center; }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    position: relative;
    height: 54px;
    line-height: 54px;
    padding: 0 20px !important;
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--tz-hdr-charcoal);
    transition: color 160ms ease;
  }

  /* underline: drawn from the centre out, sits 14px above the bar edge */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 13px;
    height: 1.5px;
    background: var(--tz-hdr-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link::after { right: 34px; }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
    color: var(--tz-hdr-accent);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover::after,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::after {
    transform: scaleX(1);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
    outline: 2px solid var(--tz-hdr-accent);
    outline-offset: -6px;
  }

  /* chevron */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    margin-left: 8px;
    width: 8px;
    height: 100%;
    display: inline-flex;
    align-items: center;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    content: "" !important;
    font-family: inherit !important;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 200ms ease;
    vertical-align: middle;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
    transform: translateY(1px) rotate(-135deg);
  }

  /* Ready to Ship: divider (kept from 2026-10-14) + in-stock dot */
  #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1399 {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 0 !important;
    background: linear-gradient(rgba(42, 36, 32, 0.18), rgba(42, 36, 32, 0.18)) left center / 1px 22px no-repeat;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1399 > a.mega-menu-link {
    color: var(--tz-hdr-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1399 > a.mega-menu-link::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6B7F4E;
    box-shadow: 0 0 0 3px rgba(107, 127, 78, 0.18);
    flex: 0 0 auto;
  }

  /* the mega / flyout panels open flush under the bar */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout > ul.mega-sub-menu {
    border-top: 1px solid rgba(139, 58, 40, 0.35);
    box-shadow: 0 10px 24px rgba(41, 36, 32, 0.08);
    min-width: 240px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    box-shadow: 0 14px 30px rgba(41, 36, 32, 0.08);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    font-family: 'Lora', Georgia, serif;
    font-size: 14.5px;
    padding: 10px 20px;
    line-height: 1.35;
    height: auto;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link {
    font-weight: 600;
    border-bottom: 1px solid rgba(41, 36, 32, 0.08);
  }

  /* mega grid headings (Shop by Shape / Color / Pattern / Style) */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu li.mega-disable-link > a.mega-menu-link {
    font-family: 'Lora', Georgia, serif !important;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link::after,
  #mega-menu-wrap-primary #mega-menu-primary span.mega-indicator:after { transition: none !important; }
}
/* 2026-11-04: Berber Tent in the header (menu item 1703), a small tent mark in the accent colour. */
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1703 > a.mega-menu-link {
  color: var(--tz-hdr-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1703 > a.mega-menu-link::before {
  content: "";
  width: 16px;
  height: 13px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M8 0 0 6.2V13h6.2V8.4L8 6.6l1.8 1.8V13H16V6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M8 0 0 6.2V13h6.2V8.4L8 6.6l1.8 1.8V13H16V6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}