/* ---------- Mobile bottom navigation ---------- */ .cgt-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #E7E1DC; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); z-index: 9998; padding: 6px 0 max(6px, env(safe-area-inset-bottom)); } .cgt-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none !important; color: #6B6660; font-size: 10px; font-weight: 600; padding: 4px 0; } .cgt-nav-item svg { width: 21px; height: 21px; } .cgt-nav-item.active, .cgt-nav-item:hover { color: #880000; } .cgt-nav-icon-wrap { position: relative; display: inline-flex; } .cgt-cart-count { position: absolute; top: -5px; right: -8px; background: #880000; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @media (max-width: 900px) { .cgt-mobile-nav { display: flex; } /* Leave room so the fixed bar never covers the last bit of the page. */ body { padding-bottom: 68px; } .cgt-desktop-search-item { display: none; } } /* ---------- Desktop search icon in the primary menu ---------- */ .cgt-desktop-search-item .cgt-search-trigger svg { width: 19px; height: 19px; vertical-align: middle; } /* ---------- Search overlay (both desktop and mobile) ---------- */ .cgt-search-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.55); z-index: 99999; align-items: flex-start; justify-content: center; padding-top: 14vh; } .cgt-search-overlay.cgt-open { display: flex; } .cgt-search-box { background: #fff; border-radius: 14px; padding: 26px; width: 92%; max-width: 560px; position: relative; } .cgt-search-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6B6660; } .cgt-search-box form { display: flex; gap: 8px; margin: 0; } .cgt-search-box input[type="search"] { flex: 1; padding: 12px 14px; border: 1px solid #DDD6C8; border-radius: 8px; font-size: 15px; } .cgt-search-submit { background: #880000; color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-weight: 600; cursor: pointer; } .cgt-search-submit:hover { background: #6B0000; } /* ---------- Search + Cart + Account icon group — one row, in both the desktop menu and the mobile off-canvas menu (Astra reuses the same menu location for both). ---------- */ .cgt-header-icon-group { display: flex !important; align-items: center; gap: 18px; list-style: none; } .cgt-header-icon-group a, .cgt-header-icon-group button { background: none; border: none; padding: 0; margin: 0; display: flex; align-items: center; position: relative; color: #880000; cursor: pointer; } .cgt-header-icon-group svg { width: 20px; height: 20px; } .cgt-header-icon-group .cgt-cart-count { position: absolute; top: -6px; right: -8px; background: #880000; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @media (max-width: 900px) { /* Not needed on mobile anymore — Search/Cart already live in the bottom nav, and Account gets its own icon next to the hamburger instead (see .cgt-mobile-account-icon). */ .cgt-header-icon-group { display: none !important; } /* Make sure the off-canvas menu can actually scroll if its content is taller than the screen — some Astra versions need this spelled out explicitly on the drawer/content. */ .ast-mobile-popup-drawer, .ast-mobile-popup-content, .ast-mobile-popup-inner, #ast-hf-mobile-menu, .main-header-bar-navigation { overflow-y: auto !important; max-height: 100vh !important; -webkit-overflow-scrolling: touch; } } /* ---------- Mobile-only Account icon, placed right after the hamburger toggle ---------- */ .cgt-mobile-account-icon { display: inline-flex; align-items: center; justify-content: center; color: #880000; margin-left: 10px; } .cgt-mobile-account-icon svg { width: 22px; height: 22px; } @media (min-width: 901px) { .cgt-mobile-account-icon { display: none; } } /* ---------- Hamburger toggle: white lines by default (covers both text-color and background-color based hamburger icon implementations) ---------- */ .ast-mobile-menu-trigger-minimal, [class*="mobile-menu-trigger"], [class*="mobile-menu-buttons"] { color: #880000 !important; background-color: transparent !important; /* the button/container itself must stay see-through */ } /* Only genuinely empty spans are real bar/line elements — a span WITH children is a wrapper, and painting that white creates a solid box that swallows the (also white) bars inside it. */ .ast-mobile-menu-trigger-minimal span:empty, [class*="mobile-menu-trigger"] span:empty, [class*="mobile-menu-buttons"] span:empty { background-color: #880000 !important; } .ast-mobile-menu-trigger-minimal span:not(:empty), [class*="mobile-menu-trigger"] span:not(:empty), [class*="mobile-menu-buttons"] span:not(:empty) { background-color: transparent !important; color: #880000 !important; } /* Some Astra versions draw the hamburger bars purely with CSS pseudo-elements — JS can never reach those (they're not real DOM nodes), so this has to be covered here specifically. */ .ast-mobile-menu-trigger-minimal span:empty::before, .ast-mobile-menu-trigger-minimal span:empty::after, [class*="mobile-menu-trigger"] span:empty::before, [class*="mobile-menu-trigger"] span:empty::after, [class*="mobile-menu-buttons"] span:empty::before, [class*="mobile-menu-buttons"] span:empty::after { background-color: #880000 !important; color: #880000 !important; } /* ================= 4.9.118 — Search sheet (with Gift Finder) ================= */ html.cgt-search-lock,html.cgt-search-lock body{overflow:hidden!important} #cgt-search-overlay.cgt-search-overlay{z-index:9990;background:#fff;padding:0 0 76px;align-items:stretch;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch} #cgt-search-overlay .cgt-search-box{width:100%;max-width:640px;border-radius:0;padding:0;background:#fff;box-shadow:none;min-height:100%} #cgt-search-overlay .cgt-sb-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 16px 12px;background:#fff;border-bottom:1px solid #f1e9e3} #cgt-search-overlay .cgt-sb-form{flex:1;display:flex;align-items:center;gap:0;position:relative;margin:0;min-width:0} #cgt-search-overlay .cgt-sb-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#880000;pointer-events:none} #cgt-search-overlay .cgt-sb-ico svg{width:20px;height:20px;display:block} #cgt-search-overlay input[type="search"]{flex:1;min-width:0;height:48px;padding:0 54px 0 44px;border:1.5px solid #e7ddd5;border-radius:999px;background:#faf6f2;font:500 15px Inter,sans-serif;color:#1c1b1f;outline:0;-webkit-appearance:none;appearance:none} #cgt-search-overlay input[type="search"]:focus{border-color:#880000;background:#fff;box-shadow:0 0 0 4px rgba(136,0,0,.08)} #cgt-search-overlay .cgt-search-submit{position:absolute;right:5px;top:5px;width:38px;height:38px;padding:0;border-radius:50%;background:#880000;color:#fff;display:grid;place-items:center} #cgt-search-overlay .cgt-search-submit svg{width:18px;height:18px} #cgt-search-overlay .cgt-search-close{position:static;flex:0 0 auto;font:600 14px Inter,sans-serif;color:#880000;background:none;padding:8px 2px;line-height:1} #cgt-search-overlay .cgt-sb-body{padding:6px 16px 40px} #cgt-search-overlay .cgt-sb-sec{margin-top:20px} #cgt-search-overlay .cgt-sb-sec h4{margin:0 0 10px;font:700 15px Inter,sans-serif;color:#1c1b1f;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} #cgt-search-overlay .cgt-sb-sec h4 small{font:400 12px Inter,sans-serif;color:#6d6a70} #cgt-search-overlay .cgt-sb-chips{display:flex;flex-wrap:wrap;gap:8px} #cgt-search-overlay .cgt-sb-chips a,#cgt-search-overlay .cgt-sb-chips button{padding:9px 14px;border-radius:999px;border:1.5px solid #e7ddd5;background:#fff;color:#1c1b1f;font:500 13.5px Inter,sans-serif;text-decoration:none;cursor:pointer;line-height:1.1;min-height:0;box-shadow:none} #cgt-search-overlay .cgt-sb-chips button.on{background:#880000;border-color:#880000;color:#fff} #cgt-search-overlay .cgt-gf{padding:16px 14px 18px;border-radius:20px;background:linear-gradient(#fffaf6,#fffaf6) padding-box,linear-gradient(120deg,#f59e0b,#ec4899,#8b5cf6,#10b981) border-box;border:1.5px solid transparent} #cgt-search-overlay .cgt-gf label{display:block;margin:14px 0 8px;font:600 11px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6d6a70} #cgt-search-overlay .cgt-gf-go{display:block;margin-top:18px;height:50px;line-height:50px;text-align:center;border-radius:14px;background:#880000;color:#fff!important;font:700 15px Inter,sans-serif;text-decoration:none!important} /* ================= 4.9.118 — Phone menu: side drawer ================= */ @media (max-width:921px){ body.ast-main-header-nav-open #masthead{z-index:100001!important} body.ast-main-header-nav-open:before{content:"";position:fixed;inset:0;background:rgba(28,10,12,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100000} body.ast-main-header-nav-open .cgt-mobile-nav,body.ast-main-header-nav-open .mmx-wa{display:none!important} body.ast-main-header-nav-open #masthead .menu-toggle{visibility:hidden} body.ast-main-header-nav-open #masthead .ast-mobile-header-content{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:min(86vw,330px)!important;height:100%!important;max-height:none!important;margin:0!important;padding:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;background:#fff!important;border:0!important;z-index:5;box-shadow:24px 0 60px -20px rgba(0,0,0,.5);animation:cgtDrawer .26s ease} @keyframes cgtDrawer{from{transform:translateX(-100%)}to{transform:none}} .cgt-dr-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 34px;background:#fff;border-bottom:1px solid #f1e9e3} .cgt-dr-head img{height:44px;width:auto;transform:translateX(-16%);display:block} .cgt-dr-x{width:38px;height:38px;border-radius:50%!important;border:0!important;background:#f6ece8!important;color:#880000!important;font:400 26px/1 Inter,sans-serif!important;padding:0!important;display:grid;place-items:center} #masthead .ast-mobile-header-content .main-header-menu{display:block!important;margin:0!important;padding:4px 0!important;background:#fff!important;border:0!important} #masthead .ast-mobile-header-content .main-header-menu>.menu-item{display:block!important;border:0!important;border-bottom:1px solid #f5eee8!important;background:#fff!important} #masthead .ast-mobile-header-content .main-header-menu>.menu-item>.menu-link{display:flex!important;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:16px 22px!important;font:600 16px/1.3 Inter,sans-serif!important;color:#1c1b1f!important;background:transparent!important} #masthead .ast-mobile-header-content .main-header-menu>.current-menu-item>.menu-link{color:#880000!important;background:#fbf3f1!important;box-shadow:inset 3px 0 0 #880000} #masthead .ast-mobile-header-content .cgt-mega-arrow{display:inline-grid;place-items:center;width:26px;height:26px;margin:0;border-radius:50%;background:#f6ece8;color:#880000;font-size:11px} #masthead .ast-mobile-header-content .cgt-has-mega.cgt-mega-open>.menu-link{color:#880000!important} #masthead .ast-mobile-header-content .cgt-mega-panel{position:static!important;transform:none!important;width:100%!important;padding:4px 14px 16px!important;margin:0!important;background:#fbf7f3!important;border:0!important;border-radius:0!important;box-shadow:none!important} #masthead .ast-mobile-header-content .cgt-mega-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important} #masthead .ast-mobile-header-content .cgt-mega-item{display:block!important;width:auto!important;text-align:center;padding:0!important;border-radius:14px;background:#fff;border:1px solid #eee3dc;overflow:hidden;text-decoration:none!important} #masthead .ast-mobile-header-content .cgt-mega-item-img{display:block!important;width:100%!important;height:74px!important;border-radius:0!important;background-size:cover!important;background-position:center!important;margin:0!important} #masthead .ast-mobile-header-content .cgt-mega-item-label{display:block;padding:8px 6px 9px;font:600 12.5px/1.25 Inter,sans-serif!important;color:#1c1b1f!important} #masthead .ast-mobile-header-content .cgt-header-icon-group,#masthead .ast-mobile-header-content .main-header-menu>li:has(>a[href*="my-account"]){display:none!important} .cgt-dr-foot{padding:18px 16px 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px} .cgt-dr-foot a{display:block;text-align:center;padding:13px 8px;border-radius:14px;border:1.5px solid #eadbd3;background:#fff;color:#1c1b1f!important;font:600 13.5px Inter,sans-serif;text-decoration:none!important} .cgt-dr-foot a.wa{grid-column:1/-1;background:#25D366;border-color:#25D366;color:#fff!important} .cgt-dr-foot p{grid-column:1/-1;margin:2px 0 0;text-align:center;font:400 11.5px Inter,sans-serif;color:#8a8590} } @media (min-width:922px){.cgt-dr-head,.cgt-dr-foot{display:none!important}} /* theme paints every