/* ===========================================================================
   PORT MARKET — SITE HEADER REDESIGN
   --------------------------------------------------------------------------
   Visual refinement for the existing Astra/WooCommerce header. NO HTML/DOM
   changes — pure CSS overlay that targets known theme classes. Designed
   to coexist with any theme update; if a class is renamed by the theme,
   only the affected rule fails — the rest still applies.

   Aesthetic: "Charcoal Premium" — deep warm-charcoal background, cream
   typography, gold accents, burgundy active states. Matches the rest of
   the Port Market brand (cream/gold/burgundy/Heebo).
   =========================================================================== */

:root {
  --pmh-bg:           #1A1614;          /* Warm charcoal, NOT pure black — softer */
  --pmh-bg-deeper:    #120F0D;          /* Even deeper — for sticky shadow blend */
  --pmh-text:         #F5EFE0;          /* Cream text on dark */
  --pmh-text-mute:    #B8A98F;          /* Muted cream — for separators/inactive */
  --pmh-gold:         #C9A84C;          /* Brighter gold for visibility on dark */
  --pmh-gold-soft:    #B08D3C;          /* Original gold (matches site tokens) */
  --pmh-burg:         #8B3A3A;          /* Slightly brighter burgundy on dark */
  --pmh-line:         rgba(201, 168, 76, 0.18);   /* Faint gold separator */
  --pmh-bar-h:        78px;             /* Default header height */
  --pmh-bar-h-scroll: 62px;             /* Shrunk-on-scroll height */
  --pmh-announce-h:   34px;             /* Top promo strip */
  --pmh-shadow:       0 4px 18px rgba(0, 0, 0, 0.22);
}

/* ---------------------------------------------------------------------------
   1. ANNOUNCEMENT BAR (above the main header)
   --------------------------------------------------------------------------- */

.ast-above-header,
.ast-above-header-bar,
[class*="ast-above-header"] {
  background: linear-gradient(135deg, var(--pmh-burg) 0%, #6E2A2A 50%, #5A2222 100%) !important;
  color: var(--pmh-text) !important;
  font-family: 'Heebo', 'Assistant', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  min-height: var(--pmh-announce-h);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
}

.ast-above-header a,
.ast-above-header-bar a {
  color: var(--pmh-gold) !important;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   2. MAIN HEADER BAR
   --------------------------------------------------------------------------- */

.site-header,
header#masthead {
  background: var(--pmh-bg) !important;
  color: var(--pmh-text) !important;
  font-family: 'Heebo', 'Assistant', sans-serif !important;
  border: none !important;
  box-shadow: var(--pmh-shadow);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Inner wrappers: explicitly NO shadow/border. Both elements stack to 100%
   height of the outer header, so any shadow on them duplicates at the same
   position and creates a harsh visible line. Only the outermost element
   carries the drop shadow. */
.ast-main-header-bar-wrap,
.main-header-bar {
  background: var(--pmh-bg) !important;
  color: var(--pmh-text) !important;
  font-family: 'Heebo', 'Assistant', sans-serif !important;
  border: none !important;
  box-shadow: none !important;
}

.main-header-bar {
  min-height: var(--pmh-bar-h) !important;
  padding: 0 !important;
  transition: min-height 0.3s ease;
}

/* Sticky behavior — toggled by pm-header.js when user scrolls past 40px.
   The class adds: deeper background, tighter height, stronger shadow. */
.pm-header-scrolled .site-header,
.pm-header-scrolled header#masthead {
  background: var(--pmh-bg-deeper) !important;
  box-shadow: 0 1px 0 var(--pmh-line),
              0 12px 32px rgba(0, 0, 0, 0.32) !important;
}
.pm-header-scrolled .main-header-bar {
  min-height: var(--pmh-bar-h-scroll) !important;
}

/* ---------------------------------------------------------------------------
   3. LOGO — clean luxury, enlarged, no fussy halo
   --------------------------------------------------------------------------- */

/* Clean, premium logo treatment for wide horizontal logos.
   The previous halo (::before circle backdrop) didn't suit the wide
   "port market" wordmark — circles look natural only around square marks.
   Better luxe pattern: subtle gold drop-shadow filter on the logo itself,
   creating a warm aura around the white text/icon without geometry that
   fights the logo shape. Used by Cartier, Hermès, etc. */

.site-branding,
.ast-site-identity {
  padding: 4px 10px;
  display: inline-flex !important;
  align-items: center;
}

.site-branding img,
.custom-logo,
.ast-builder-html-element img,
.site-logo-img img {
  max-height: 80px !important;            /* natural is 87px - just under for crispness */
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 2px 10px rgba(201, 168, 76, 0.20))
          drop-shadow(0 0 1px rgba(201, 168, 76, 0.15));
  transition: max-height 0.3s ease, opacity 0.2s ease, filter 0.3s ease;
}

/* Ensure the wrapper span doesn't constrain the enlarged image */
.site-logo-img,
.custom-logo-link {
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  width: auto !important;
}

.pm-header-scrolled .site-branding img,
.pm-header-scrolled .custom-logo {
  max-height: 60px !important;
  filter: drop-shadow(0 1px 6px rgba(201, 168, 76, 0.15));
}

.site-branding a:hover img,
.custom-logo:hover {
  opacity: 0.93;
  filter: drop-shadow(0 2px 12px rgba(201, 168, 76, 0.30))
          drop-shadow(0 0 2px rgba(201, 168, 76, 0.25));
}

/* ---------------------------------------------------------------------------
   4. PRIMARY NAVIGATION
   --------------------------------------------------------------------------- */

.main-header-menu,
.ast-builder-menu .menu,
nav.main-navigation ul,
.ast-builder-menu-1 .menu {
  font-family: 'Heebo', 'Assistant', sans-serif !important;
}

/* Top-level menu items */
.main-header-menu > .menu-item > a,
.ast-builder-menu .menu > li > a,
.ast-builder-menu-1 .menu > li > a,
nav.main-navigation > div > ul > li > a {
  color: var(--pmh-text) !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.4px !important;
  padding: 12px 16px !important;
  position: relative;
  text-transform: none;
  text-decoration: none !important;        /* kill any text-decoration */
  border: none !important;                  /* kill Astra's hover border */
  box-shadow: none !important;              /* kill Astra's hover shadow */
  background: transparent !important;
  transition: color 0.25s ease;
}

/* Belt-and-suspenders: kill any decorative pseudo on hover that Astra adds */
.main-header-menu > .menu-item > a::after,
.ast-builder-menu .menu > li > a::after,
.ast-builder-menu-1 .menu > li > a::after {
  display: none !important;
}

/* Animated gold underline on hover/focus */
.main-header-menu > .menu-item > a::before,
.ast-builder-menu .menu > li > a::before,
.ast-builder-menu-1 .menu > li > a::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background: var(--pmh-gold);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header-menu > .menu-item:hover > a,
.ast-builder-menu .menu > li:hover > a,
.ast-builder-menu-1 .menu > li:hover > a,
.main-header-menu > .menu-item > a:focus-visible,
.ast-builder-menu .menu > li > a:focus-visible {
  color: var(--pmh-gold) !important;
  background: transparent !important;
}

.main-header-menu > .menu-item:hover > a::before,
.ast-builder-menu .menu > li:hover > a::before,
.ast-builder-menu-1 .menu > li:hover > a::before {
  width: calc(100% - 32px);
}

/* Active page (current item) — persistent gold + underline */
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a,
.ast-builder-menu .menu > .current-menu-item > a,
.ast-builder-menu-1 .menu > .current-menu-item > a {
  color: var(--pmh-gold) !important;
}

.main-header-menu > .current-menu-item > a::before,
.ast-builder-menu .menu > .current-menu-item > a::before {
  width: calc(100% - 32px);
}

/* Dropdown caret (chevron) — subtle gold */
.menu-item-has-children > a::after,
.menu-item-has-children > a .ast-arrow-wrap svg {
  color: var(--pmh-text-mute) !important;
  fill: var(--pmh-text-mute) !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.menu-item-has-children:hover > a::after,
.menu-item-has-children:hover > a .ast-arrow-wrap svg {
  color: var(--pmh-gold) !important;
  fill: var(--pmh-gold) !important;
}

/* ---------------------------------------------------------------------------
   5. DROPDOWN SUBMENUS
   --------------------------------------------------------------------------- */

.sub-menu,
ul.sub-menu,
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--pm-line, #E8E0D2) !important;
  border-top: 3px solid var(--pmh-gold) !important;
  border-radius: 4px !important;
  padding: 6px 0 !important;
  min-width: 220px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
              0 4px 12px rgba(0, 0, 0, 0.06) !important;
  margin-top: 4px !important;
}

.sub-menu > li > a,
ul.sub-menu li a {
  color: #1C1C1A !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 10px 18px !important;
  letter-spacing: 0.2px;
  border-bottom: none !important;
  transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
}

.sub-menu > li > a:hover,
ul.sub-menu li a:hover,
.sub-menu > .current-menu-item > a {
  background: #F3EAD3 !important;
  color: #8C6E26 !important;
  padding-right: 22px !important;     /* RTL: shift INTO menu on hover */
  padding-left: 14px !important;
}

/* Submenu separator between groups */
.sub-menu > li:not(:last-child) {
  border-bottom: 1px solid rgba(232, 224, 210, 0.4);
}

/* ---------------------------------------------------------------------------
   6. CART ICON + BADGE
   --------------------------------------------------------------------------- */

.ast-cart-menu-wrap,
.ast-cart-icon-wrap,
.ast-site-header-cart,
.ast-site-header-cart a {
  color: var(--pmh-text) !important;
  position: relative;
  transition: color 0.2s ease;
}

.ast-cart-menu-wrap:hover,
.ast-site-header-cart a:hover {
  color: var(--pmh-gold) !important;
}

/* The cart count badge — burgundy circle */
.ast-cart-menu-wrap .count,
.ast-site-header-cart .count,
.cart-count,
.ast-woocommerce-cart-menu .count {
  background: var(--pmh-burg) !important;
  color: #fff !important;
  border: 2px solid var(--pmh-bg) !important;
  border-radius: 999px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(139, 58, 58, 0.4);
}

/* Sticky-scrolled state: re-blend the badge border with new BG */
.pm-header-scrolled .ast-cart-menu-wrap .count,
.pm-header-scrolled .ast-site-header-cart .count {
  border-color: var(--pmh-bg-deeper) !important;
}

/* ---------------------------------------------------------------------------
   7. SEARCH ICON / EXPAND
   --------------------------------------------------------------------------- */

.ast-search-icon,
.ast-search-menu-icon,
.astra-search-icon {
  color: var(--pmh-text) !important;
  transition: color 0.2s ease;
}

.ast-search-icon:hover,
.ast-search-menu-icon:hover {
  color: var(--pmh-gold) !important;
}

.ast-search-menu-icon .search-field,
.ast-search-menu-icon input[type="search"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--pmh-line) !important;
  color: var(--pmh-text) !important;
  border-radius: 4px !important;
  font-family: 'Heebo', sans-serif !important;
  padding: 8px 14px !important;
}

.ast-search-menu-icon input[type="search"]::placeholder {
  color: var(--pmh-text-mute) !important;
}

.ast-search-menu-icon input[type="search"]:focus {
  border-color: var(--pmh-gold) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------------
   8. MOBILE HEADER
   --------------------------------------------------------------------------- */

@media (max-width: 921px) {

  /* The mobile header reuses the same selectors but Astra adds .ast-header-break-point modifier */
  .site-header,
  header#masthead,
  .ast-mobile-header-wrap {
    background: var(--pmh-bg) !important;
  }

  .main-header-bar,
  .ast-mobile-header-wrap .main-header-bar {
    min-height: 64px !important;
    padding: 0 12px !important;
  }

  .site-branding img,
  .custom-logo {
    max-height: 42px !important;
  }

  /* Hamburger toggle */
  .ast-builder-menu-mobile-toggle,
  .menu-toggle,
  button.menu-toggle {
    color: var(--pmh-text) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
  }

  .ast-builder-menu-mobile-toggle:hover,
  .menu-toggle:hover {
    color: var(--pmh-gold) !important;
  }

  .ast-builder-menu-mobile-toggle svg,
  .menu-toggle svg,
  .ast-mobile-menu-buttons svg {
    fill: currentColor !important;
  }
}

/* ---------------------------------------------------------------------------
   9. MOBILE SLIDE-IN MENU (DRAWER) — based on real DOM structure
   --------------------------------------------------------------------------
   Critical selectors from live diagnostic (April 2026):
     • .ast-mobile-popup-inner  → THE real container with the visible bg
                                  (was set to rgb(250,250,250) by Astra)
     • .ast-mobile-popup-inner .sub-menu  → was #FFFFFF white by Astra
     • .ast-mobile-popup-inner .ast-menu-toggle → arrows in rgb(54,65,81)
   Previous CSS targeted .ast-mobile-popup-content / .ast-mobile-popup-wrap
   which exist but don't carry the visible background — that's why the
   styling didn't take effect. Fixed here. */

/* Overlay (the dim scrim behind the drawer) */
.ast-mobile-popup-overlay {
  background: rgba(10, 8, 7, 0.55) !important;     /* warm dark, not blue-gray */
  backdrop-filter: blur(2px);
}

/* Main drawer container — THE fix for the white background */
.ast-mobile-popup-inner {
  background: linear-gradient(180deg, #1A1614 0%, #100C0B 100%) !important;
  color: var(--pmh-text) !important;
  font-family: 'Heebo', 'Assistant', sans-serif !important;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.4) !important;
}

/* Drawer header (where the close X lives) */
.ast-mobile-popup-inner .ast-mobile-popup-header {
  border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important;
  padding: 14px 18px !important;
  background: transparent !important;
}

/* ─── Top-level menu items ─────────────────────────────────────────────── */
.ast-mobile-popup-inner .menu-item > a,
.ast-mobile-popup-inner .menu-item > .menu-link {
  color: var(--pmh-text) !important;
  background: transparent !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08) !important;
  transition: background 0.2s ease, color 0.2s ease, padding-right 0.25s ease;
}

.ast-mobile-popup-inner .menu-item > a:hover,
.ast-mobile-popup-inner .menu-item > a:focus,
.ast-mobile-popup-inner .current-menu-item > a,
.ast-mobile-popup-inner .current-menu-ancestor > a {
  background: rgba(201, 168, 76, 0.10) !important;
  color: var(--pmh-gold) !important;
  padding-right: 28px !important;       /* RTL: indent INTO menu on activate */
}

/* ─── SUBMENU — was the worst offender (white bg + cream text) ───────── */
.ast-mobile-popup-inner .sub-menu,
.ast-mobile-popup-inner ul.sub-menu {
  background: rgba(0, 0, 0, 0.30) !important;     /* darker overlay over gradient */
  border-top: 1px solid rgba(201, 168, 76, 0.06) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
  padding: 4px 0 !important;
}

.ast-mobile-popup-inner .sub-menu .menu-item > a,
.ast-mobile-popup-inner .sub-menu .menu-item > .menu-link {
  color: var(--pmh-text-mute) !important;          /* was rgb(184,169,143) — same family but readable on dark */
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 13px 38px !important;                    /* indented further (hierarchy) */
  border-bottom: 1px solid rgba(201, 168, 76, 0.05) !important;
  background: transparent !important;
}

.ast-mobile-popup-inner .sub-menu .menu-item:last-child > a {
  border-bottom: none !important;
}

.ast-mobile-popup-inner .sub-menu .menu-item > a:hover,
.ast-mobile-popup-inner .sub-menu .menu-item > a:focus,
.ast-mobile-popup-inner .sub-menu .current-menu-item > a {
  color: var(--pmh-gold) !important;
  background: rgba(201, 168, 76, 0.06) !important;
  padding-right: 44px !important;
}

/* ─── Toggle arrows (chevrons that expand sub-menus) ─────────────────── */
.ast-mobile-popup-inner .ast-menu-toggle,
.ast-mobile-popup-inner button.ast-menu-toggle {
  color: var(--pmh-text-mute) !important;          /* was rgb(54,65,81) Astra default */
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 8px 12px !important;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.3s ease;
}

.ast-mobile-popup-inner .ast-menu-toggle svg {
  fill: currentColor !important;
  transition: transform 0.3s ease;
}

.ast-mobile-popup-inner .ast-menu-toggle:hover,
.ast-mobile-popup-inner .menu-item:hover > .ast-menu-toggle {
  color: var(--pmh-gold) !important;
}

/* Open state: rotate the chevron 180° to point up */
.ast-mobile-popup-inner .ast-submenu-expanded > .ast-menu-toggle svg,
.ast-mobile-popup-inner [aria-expanded="true"].ast-menu-toggle svg,
.ast-mobile-popup-inner [aria-expanded="true"] > .ast-menu-toggle svg {
  transform: rotate(180deg);
}

/* When sub-menu is expanded, highlight the parent item */
.ast-mobile-popup-inner .ast-submenu-expanded > a,
.ast-mobile-popup-inner .menu-item-has-children:has(.ast-submenu-expanded) > a {
  color: var(--pmh-gold) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}

/* ─── Close button (X) ────────────────────────────────────────────────── */
.ast-mobile-popup-inner .menu-toggle-close,
button#menu-toggle-close,
.ast-mobile-popup-close {
  color: var(--pmh-text) !important;
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  padding: 10px !important;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.3s ease;
}

.ast-mobile-popup-inner .menu-toggle-close svg,
button#menu-toggle-close svg {
  fill: currentColor !important;
  width: 22px;
  height: 22px;
}

.ast-mobile-popup-inner .menu-toggle-close:hover,
button#menu-toggle-close:hover {
  color: var(--pmh-gold) !important;
  transform: rotate(90deg);                        /* X spins on hover — premium touch */
}

/* ─── Social icons (if present in drawer footer) ──────────────────────── */
.ast-mobile-popup-inner .ast-builder-social-element {
  color: var(--pmh-text-mute) !important;
  border: 1px solid rgba(201, 168, 76, 0.15) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  margin: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.ast-mobile-popup-inner .ast-builder-social-element:hover {
  color: var(--pmh-gold) !important;
  border-color: var(--pmh-gold) !important;
  background: rgba(201, 168, 76, 0.08) !important;
}

.ast-mobile-popup-inner .ast-header-social-1-wrap {
  padding: 16px 20px !important;
  border-top: 1px solid rgba(201, 168, 76, 0.10) !important;
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   10. ACCESSIBILITY & QUALITY-OF-LIFE
   --------------------------------------------------------------------------- */

/* Keyboard focus rings — visible but elegant */
.site-header a:focus-visible,
.ast-builder-menu a:focus-visible,
.ast-mobile-popup-content a:focus-visible {
  outline: 2px solid var(--pmh-gold) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Crisp logo rendering */
.custom-logo,
.site-branding img {
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;
}

/* Reserve scrollbar space so sticky header doesn't shift width on overflow */
html {
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------------------
   11. HOMEPAGE TRANSPARENT HEADER
   --------------------------------------------------------------------------- */

/* Top of homepage — header is positioned absolutely so the hero image
   below extends behind it. No background, no shadow. The PHP body_class
   filter adds `pm-home-transparent` only on is_front_page().
   z-index:99 keeps it above the hero but below modals/dropdowns. */
body.pm-home-transparent .site-header,
body.pm-home-transparent header#masthead {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
  background: transparent !important;
  box-shadow: none !important;
}

body.pm-home-transparent .ast-main-header-bar-wrap,
body.pm-home-transparent .main-header-bar,
body.pm-home-transparent .ast-primary-header-bar {
  background: transparent !important;
  box-shadow: none !important;
}

/* Scrolled state on homepage — switch back to fixed-position solid charcoal.
   Specificity here is (0,3,2): html.cls + body.cls + el-class — higher than
   the static rules above (0,2,1), so this wins regardless of source order.
   Switching from absolute(at top:0) to fixed(at top:0) at scrollY=0 is
   visually identical, so no jump occurs at the transition. */
html.pm-header-scrolled body.pm-home-transparent .site-header,
html.pm-header-scrolled body.pm-home-transparent header#masthead {
  position: fixed !important;
  background: var(--pmh-bg-deeper) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

html.pm-header-scrolled body.pm-home-transparent .ast-main-header-bar-wrap,
html.pm-header-scrolled body.pm-home-transparent .main-header-bar,
html.pm-header-scrolled body.pm-home-transparent .ast-primary-header-bar {
  background: var(--pmh-bg-deeper) !important;
}

/* Mobile homepage: keep transparent behavior consistent.
   On mobile the hero image is shorter, so the absolute header overlays
   roughly the top 60-70px. Same scroll-triggers handle the solid state. */
@media (max-width: 921px) {
  body.pm-home-transparent .ast-mobile-header-wrap {
    background: transparent !important;
  }
  html.pm-header-scrolled body.pm-home-transparent .ast-mobile-header-wrap {
    background: var(--pmh-bg-deeper) !important;
  }
}

/* ---------------------------------------------------------------------------
   12. MOBILE DRAWER REFINEMENTS (v2.5)
   --------------------------------------------------------------------------
   Final polish based on real-device testing on Hebrew RTL site:
   • Flip drawer left → right (RTL convention; user's thumb is on the right)
   • Eliminate the harsh gold separator that appears when sub-menus expand
     (parent's border-bottom + submenu's border-top stacked into a thick line)
   • Premium social-icon footer: larger circles, gold-tinted, hover lift
   --------------------------------------------------------------------------- */

@media (max-width: 921px) {

  /* ─── 1. Flip drawer to RIGHT side (RTL convention) ──────────────────── */
  /* Astra's customizer sets ast-mobile-popup-left, which uses flex
     justify-content:flex-start to push the inner panel to the screen's
     left edge. Override to flex-end so it sits on the right.
     margin auto + right:0 fallback covers older Astra versions that use
     non-flex positioning. */
  .ast-mobile-popup-drawer.ast-mobile-popup-left,
  #ast-mobile-popup.ast-mobile-popup-left {
    justify-content: flex-end !important;
  }

  .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner,
  #ast-mobile-popup.ast-mobile-popup-left .ast-mobile-popup-inner {
    margin-left: auto !important;
    margin-right: 0 !important;
    left: auto !important;
    right: 0 !important;
    /* shadow now falls on the LEFT edge of the panel (toward the page) */
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.42) !important;
  }

  /* ─── 2. Eliminate the harsh gold line on sub-menu expansion ─────────── */
  /* Strip ALL borders from sub-menu containers; rely on item-level borders
     (lighter rgba) for separation. */
  .ast-mobile-popup-inner .sub-menu,
  .ast-mobile-popup-inner ul.sub-menu {
    border: none !important;
  }

  /* When a parent item's sub-menu is open, hide the parent's bottom border
     so the transition into the sub-menu is seamless. Three variants cover
     Astra v3, v4, and accessibility-toggle markup. */
  .ast-mobile-popup-inner .ast-submenu-expanded > a,
  .ast-mobile-popup-inner [aria-expanded="true"],
  .ast-mobile-popup-inner [aria-expanded="true"] > a {
    border-bottom-color: transparent !important;
  }

  /* Make item-level separators inside sub-menu even more subtle */
  .ast-mobile-popup-inner .sub-menu .menu-item > a {
    border-bottom: 1px solid rgba(201, 168, 76, 0.04) !important;
  }
  .ast-mobile-popup-inner .sub-menu .menu-item:last-child > a {
    border-bottom: none !important;
  }

  /* ─── 3. Premium social icons footer ─────────────────────────────────── */
  .ast-mobile-popup-inner .ast-header-social-1-wrap,
  .ast-mobile-popup-inner .ast-header-social-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 28px 20px 24px !important;
    border-top: 1px solid rgba(201, 168, 76, 0.12) !important;
    margin-top: auto !important;
  }

  .ast-mobile-popup-inner .header-social-inner-wrap,
  .ast-mobile-popup-inner .element-social-inner-wrap {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    width: auto !important;
  }

  .ast-mobile-popup-inner .ast-builder-social-element {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(201, 168, 76, 0.32) !important;
    background: rgba(201, 168, 76, 0.06) !important;
    color: var(--pmh-gold) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                color 0.3s ease !important;
  }

  .ast-mobile-popup-inner .ast-builder-social-element svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    transition: transform 0.3s ease;
  }

  .ast-mobile-popup-inner .ast-builder-social-element:hover,
  .ast-mobile-popup-inner .ast-builder-social-element:focus-visible {
    background: rgba(201, 168, 76, 0.20) !important;
    border-color: var(--pmh-gold) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(201, 168, 76, 0.30),
                0 0 0 1px rgba(201, 168, 76, 0.45);
  }

  .ast-mobile-popup-inner .ast-builder-social-element:hover svg {
    transform: scale(1.1);
  }

  .ast-mobile-popup-inner .ast-builder-social-element:active {
    transform: translateY(-1px);
    transition-duration: 0.1s !important;
  }
}

/* ---------------------------------------------------------------------------
   13. v2.6 FINAL POLISH — based on real-device diagnostic
   --------------------------------------------------------------------------
   Diagnostic findings (Apr 2026):
   • html gets `.ast-off-canvas-active` when drawer opens (Astra adds this) —
     used as the hook for hiding the floating cart instead of a custom class.
   • `-webkit-tap-highlight-color: rgba(51,181,229,0.4)` is Android Chrome's
     default — visible as a blue rect on tap. Override with transparent.
   • drawer rect: left=43px right=431px (viewport=431px) — so `right:0` is
     correct, but during the open animation Astra applies a transform that
     comes from the LEFT edge. Override the transform-origin / start state.
   --------------------------------------------------------------------------- */

@media (max-width: 921px) {

  /* ─── 1. Kill blue tap-highlight EVERYWHERE in drawer ────────────────── */
  .ast-mobile-popup-drawer,
  .ast-mobile-popup-drawer *,
  .ast-mobile-popup-inner,
  .ast-mobile-popup-inner * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Also kill the focus outline (was rgb(245,239,224) — visible cream box).
     We keep focus-visible for keyboard users below — only mouse/touch focus
     is suppressed here. */
  .ast-mobile-popup-inner a:focus,
  .ast-mobile-popup-inner button:focus,
  .ast-mobile-popup-inner *:focus {
    outline: none !important;
  }
  /* But re-enable for keyboard navigation (a11y) */
  .ast-mobile-popup-inner a:focus-visible,
  .ast-mobile-popup-inner button:focus-visible {
    outline: 2px solid var(--pmh-gold) !important;
    outline-offset: -2px;
  }

  /* ─── 2. Hide floating cart while drawer is open ─────────────────────── */
  /* Astra adds .ast-off-canvas-active on <html> when drawer opens.
     Hide any floating/fixed cart (the dark blue circle with "5") so it
     doesn't peek through. Covers multiple plugin patterns since the
     diagnostic showed 12 cart-classed elements. */
  html.ast-off-canvas-active .ast-cart-menu-wrap,
  html.ast-off-canvas-active .ast-site-header-cart,
  html.ast-off-canvas-active [class*="floating-cart"],
  html.ast-off-canvas-active [class*="cart-side"],
  html.ast-off-canvas-active [class*="mini-cart-floating"],
  html.ast-off-canvas-active .pm-floating-cart,
  html.ast-off-canvas-active .xoo-wsc-container,
  html.ast-off-canvas-active .xoo-wsc-bki {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }

  /* ─── 3. Drawer slides in from RIGHT (not left) ──────────────────────── */
  /* Diagnostic showed drawer ends at right:0 but animates from the left.
     Force the closed/initial transform to start from the right edge. */
  .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner {
    transform: translateX(100%) !important;          /* off-screen RIGHT */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .ast-mobile-popup-drawer.ast-mobile-popup-left.show .ast-mobile-popup-inner,
  .ast-mobile-popup-drawer.ast-mobile-popup-left.active .ast-mobile-popup-inner {
    transform: translateX(0) !important;             /* slides into view */
  }
}

/* ---------------------------------------------------------------------------
   14. HEADER HIDE-ON-SCROLL-DOWN (homepage only)
   --------------------------------------------------------------------------
   Adds smooth hide-on-scroll-down / show-on-scroll-up behavior. Only
   active on homepage where the visual works with the transparent header.
   The `.pm-header-hidden` class is toggled by pm-header.js. */

body.pm-home-transparent.pm-header-hidden .site-header,
body.pm-home-transparent.pm-header-hidden header#masthead {
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.pm-home-transparent .site-header,
body.pm-home-transparent header#masthead {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              box-shadow 0.3s ease !important;
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   15. SAVE BADGE — fix mobile clipping
   --------------------------------------------------------------------------
   Mobile diagnostic: badge gets cut at the right edge of the price card.
   The badge is appended into WooCommerce's .price (flex container).
   Switch to inline-flex and remove the auto-margin push on mobile. */

@media (max-width: 921px) {
  .pm-save-badge {
    font-size: 11.5px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    margin-right: 6px !important;             /* small gap, not auto-push */
    margin-left: 0 !important;
    flex-shrink: 0;                            /* never compress */
    align-self: center;                        /* vertically center to price */
    line-height: 1.2 !important;
  }

  /* If the .price flex doesn't fit, allow wrap so badge drops cleanly
     to a new line under the prices instead of overflowing the card. */
  .summary .price,
  .entry-summary .price {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
  }
}