/* Moment Makers — Header polish (site-wide). Purely visual: spacing, hover states, submenu
 * cards — the actual Astra/WooCommerce menu, cart and account links are untouched. */
:root{--mx-red:#880000;--mx-ink:#1c1b1f;--mx-mute:#6d6a70;--mx-line:#eee7e1}

.main-header-bar{border-bottom:1px solid var(--mx-line)!important;box-shadow:0 2px 10px -6px rgba(0,0,0,.08)}
.main-header-menu > .menu-item > a{font:600 14.5px Inter,sans-serif!important;color:var(--mx-ink)!important;position:relative;transition:color .2s}
.main-header-menu > .menu-item > a:hover{color:var(--mx-red)!important}
.main-header-menu > .menu-item > a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--mx-red);transform:scaleX(0);transition:transform .2s;transform-origin:left}
.main-header-menu > .menu-item:hover > a::after{transform:scaleX(1)}

/* dropdown submenus as clean cards */
.main-header-menu .sub-menu{border-radius:16px!important;border:1px solid var(--mx-line)!important;box-shadow:0 20px 40px -18px rgba(0,0,0,.25)!important;padding:8px!important;overflow:hidden}
.main-header-menu .sub-menu .menu-item > a{border-radius:10px!important;padding:9px 14px!important;font:500 13.5px Inter,sans-serif!important;color:var(--mx-ink)!important}
.main-header-menu .sub-menu .menu-item > a:hover{background:#fbf3f1!important;color:var(--mx-red)!important}

/* cart + account icons */
.ast-site-header-cart .count,
.ast-site-header-cart-data,
.ast-header-cart-total-price{color:var(--mx-red)!important}
.ast-header-cart-btn,.astra-account-icon,.ast-site-header-cart a{transition:transform .15s}
.ast-header-cart-btn:hover,.astra-account-icon:hover{transform:translateY(-1px)}

/* ---- Audit fixes (v1.7.0) ---- */
/* scroll-to-top was theme-default blue; on phones it hid behind the bottom nav */
#ast-scroll-top{background-color:#880000!important;color:#fff!important;border-radius:10px!important}
#ast-scroll-top:hover{background-color:#650000!important}
@media (max-width:768px){#ast-scroll-top{display:none!important}}

/* ---- Dropdown fix (CGT 4.9.50) ----
   The sticky search/Gift Finder bar and the header both had z-index 99; the bar comes later in the
   page so it painted OVER the "Gifts By Occasion / Relations" mega-menu. Keep the header (and its
   dropdown) above the bar. */
#masthead,.site-header{z-index:1000!important}
.mmx-subbar{z-index:990!important}
.cgt-mega-panel{z-index:10000!important}

/* ---------- Sticky header (home + shop/category) — see header-layout.js ---------- */
#masthead.hsw-sticky{position:sticky!important;top:var(--hsw-admin,0px);z-index:1000!important;background:#fff;box-shadow:0 8px 20px -16px rgba(0,0,0,.35)}
#masthead.hsw-sticky .mmx-subbar{position:static!important;top:auto!important;box-shadow:none!important;backdrop-filter:none!important;background:#fff!important}
/* Home, PC: search + Gift Finder + icons in row 1 */
#masthead .hsw-row1{display:flex;align-items:center;gap:14px;flex:1;justify-content:flex-end;min-width:0}
#masthead .hsw-row1 .mmx-search{flex:1 1 auto;max-width:560px;margin:0!important}
body #masthead .hsw-row1 .mmx-finder,body #masthead .hsw-row1 .mmx-finder:hover,body #masthead .hsw-row1 .mmx-finder:focus{flex:0 0 auto;margin:0!important;height:46px;border-radius:14px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#f59e0b,#ec4899,#8b5cf6,#10b981) border-box!important;color:#1c1b1f!important;border:1.5px solid transparent!important}
body #masthead .hsw-row1 .mmx-finder svg{stroke:#880000!important;flex:0 0 20px}
#masthead .hsw-icons{list-style:none;margin:0 0 0 4px;padding:0;display:flex;align-items:center;gap:6px}
#masthead .hsw-icons > li{list-style:none;margin:0;display:flex;align-items:center}
#masthead .hsw-track a{display:flex!important;align-items:center;justify-content:center;width:36px;height:36px;color:#1c1b1f!important;font-size:0!important;text-decoration:none!important}
#masthead .hsw-track a svg{width:22px;height:22px;stroke:currentColor}
#masthead .hsw-track a:hover{color:#880000!important}
body.hsw-swapped #masthead .site-header-primary-section-right{flex:1 1 auto!important;min-width:0}
/* Home, PC: menu in row 2, centred */
.mmx-subbar.hsw-nav .mmx-wrap{display:flex;align-items:center;justify-content:center;height:auto!important;min-height:52px}
.mmx-subbar.hsw-nav .ast-builder-menu-1,.mmx-subbar.hsw-nav .ast-builder-menu-1>*,.mmx-subbar.hsw-nav .main-header-bar-navigation,.mmx-subbar.hsw-nav .main-navigation{width:100%!important;display:flex!important;justify-content:center!important;margin:0!important}
.mmx-subbar.hsw-nav .main-header-menu{display:flex!important;flex-wrap:nowrap;gap:4px;margin:0 auto!important;justify-content:center}
.mmx-subbar.hsw-nav .main-header-menu>li>a{padding:14px 16px!important;line-height:1.2!important;font-weight:600!important}
.mmx-subbar.hsw-nav{padding:0!important;border-top:1px solid #f1ebe6}
/* Category/shop: the filter bar sits right under the sticky header (was hidden under it / the admin bar) */
body.hsw-has-sticky .cx-bar{top:calc(var(--hsw-h,0px) + 8px)!important}

/* duplicate magnifier next to the full search bar — CGT sets its display inline, so move it off-screen instead */
#masthead .hsw-icons .cgt-search-trigger{position:absolute!important;left:-9999px!important;top:auto!important;opacity:0!important;pointer-events:none!important}
/* The logo file (0-MM-logo.png) has ~16% empty transparent space on its left. That blank strip made
   the logo — and so the whole header — look pushed to the right of the content below it on every
   page, PC and mobile. Shift the image left by exactly that blank strip (translate % = own width). */
#masthead .site-branding img,#masthead .custom-logo-link img,#masthead .site-logo-img img{transform:translateX(-16%)}

/* ===== 8 Oct (3): hamburger was white-on-white on phones ===== */
@media (max-width:921px){
  #masthead .menu-toggle,#masthead .main-header-menu-toggle,#masthead .ast-mobile-menu-trigger-minimal{color:#880000!important;background:transparent!important;border-color:transparent!important;opacity:1!important;visibility:visible!important}
  #masthead .menu-toggle svg,#masthead .menu-toggle .ast-mobile-svg{fill:#880000!important;color:#880000!important;width:26px!important;height:26px!important}
  #masthead .menu-toggle .ast-close-svg{display:none!important}
  #masthead .menu-toggle[aria-expanded="true"] .ast-menu-svg{display:none!important}
  #masthead .menu-toggle[aria-expanded="true"] .ast-close-svg{display:block!important}
  #masthead .menu-toggle .ast-menu-svg{display:block!important}
  #masthead .menu-toggle[aria-expanded="true"]{background:#880000!important;color:#fff!important}
  #masthead .menu-toggle[aria-expanded="true"] svg,#masthead .menu-toggle[aria-expanded="true"] .ast-mobile-svg{fill:#fff!important;color:#fff!important}
}

/* ===== 8 Oct (4): one WhatsApp button everywhere — real logo, right side ===== */
html body .mmx-wa,html body.single-product .mmx-wa{left:auto!important;right:14px!important;display:flex!important;align-items:center;justify-content:center;gap:0!important;padding:0!important;width:52px!important;height:52px!important;border-radius:50%!important;background:#25D366!important;box-shadow:0 10px 24px -8px rgba(37,211,102,.75),0 2px 6px rgba(0,0,0,.18)!important}
html body .mmx-wa svg,html body.single-product .mmx-wa svg{width:30px!important;height:30px!important;fill:#fff!important}
html body .mmx-wa span{display:none!important}
@media (min-width:922px){html body .mmx-wa,html body.single-product .mmx-wa{right:22px!important;bottom:24px!important;width:58px!important;height:58px!important}html body .mmx-wa svg{width:33px!important;height:33px!important}}
@media (max-width:921px){
  #masthead.hsw-sticky{transition:transform .25s ease}
  #masthead.hsw-sticky.hsw-hide{transform:translateY(-110%)}
  html.hsw-hidden{--hsw-h:0px!important}
  .cx-bar{transition:top .25s ease}
}