/* * MantraMani mobile drawer — PORTED, not rebuilt. * * Source of truth: the final Shopify theme pull, * D:\MANTRAMANI-GROWTH\_SHOPIFY-THEME-FINAL-2026-08-27ssets\mm-header.css * (live theme 156686876812, snapshotted 2026-08-27). Verified as the newest copy * on this machine: four separate archives hold a byte-identical mm-header.liquid * (sha fd413b31…), and no theme zip export exists anywhere on C: or D:. * * Every rule below is the theme's own. The ONE systematic change is the scope * prefix: the theme namespaces everything under `.mm-header`, which on WordPress * is the header PLUGIN's directory name and not a class anything renders. Rules * are re-scoped to `.mmd-root`, the wrapper this drawer prints itself into, so * nothing here can reach the WP header (`.mmh`) or be reached by it. * * The colour tokens come from the live section settings in * sections/header-group.json, not from guesses: * c_bg #ffffff · c_text #1c1917 · c_accent #c0603c · c_text_transparent #ffffff * * The burger is NOT the theme's — its rules are dropped and replaced at the * bottom, because on WordPress the button is injected into `.mmh__actions` and * so lives outside this wrapper, where a descendant selector cannot reach it. */ .mmd-root { /* Easings the panel transitions reference. Theme values, unchanged. */ --push: cubic-bezier(.3, 1, .3, 1); --smooth: cubic-bezier(.6, 0, .4, 1); /* Live section settings. */ --c-bg: #ffffff; --c-text: #1c1917; --c-accent: #c0603c; --c-text-tr: #ffffff; --mm-announce-speed: 18s; } /* Belt and braces: while the drawer is open, force the header to hold no transform at all (even mid-reveal-animation) so the fixed drawer/scrim always measure against the viewport. */ .mmd-root.mm-drawer-open { transform:none !important; transition:none !important; } .mmd-root .mm-ico { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; position:relative; transition:background .2s var(--smooth); } .mmd-root .mm-ico:hover { background:color-mix(in srgb, var(--c-text) 8%, transparent); } .mmd-root .mm-ico svg path {fill: #ffffffff !important;} .mmd-root .mm-ico:hover {background: rgba(184, 137, 43, 0.37) !important; /* Replace with your custom hover background color/opacity */} .mmd-root .mm-ico svg { width:21px;height:21px; } /* Mobile drawer (shared shell) */ .mmd-root .mm-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .3s var(--smooth), visibility .3s var(--smooth); z-index:110; } .mmd-root .mm-scrim.is-open { opacity:1; visibility:visible; } .mmd-root .mm-drawer { position:fixed; top:0; left:0; bottom:0; width:min(92vw,420px); background:var(--c-bg); color:var(--c-text); z-index:120; transform:translateX(-100%); transition:transform .45s var(--push); display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.3); } .mmd-root .mm-drawer.is-open { transform:translateX(0); } .mmd-root .mm-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid color-mix(in srgb, var(--c-text) 12%, transparent); position:relative; z-index:3; } .mmd-root .mm-drawer-head img { height:48px; width:auto; } /* Drawer search: button in the head reveals a collapsible field below it. z-index:3 lets the predictive dropdown paint over .mm-stack (which follows in DOM), and overflow:visible when open stops the panel clipping that dropdown. */ .mmd-root .mm-drawer-head-actions { display:flex; align-items:center; gap:8px; flex:none; } /* Style A: nested chevrons behind the drawer logo, mirroring the desktop header. Head is locked to 80px so the 155x80 viewBox scales 1:1 (no distortion), and padding-left:0 keeps the chevron flush to the drawer edge. */ /* Chevron scaled to 138x104. The 202px width was cut for a logo AND a wordmark stacked under it; the wordmark is gone, so ~120px of it was empty colour running off to the right of a 65px mark. At 138 the front face lands at 103/155 x 138 = 92px, which is exactly .mm-dbrand's width, so the dark face ends where the brand box does and the logo keeps ~13px of air either side of it. preserveAspectRatio="none", so this steepens the arrow rather than shrinking it. */ .mmd-root.mm-style-zoku .mm-drawer-head { height:104px; padding:0 18px 0 0; } .mmd-root.mm-style-zoku .mm-dchevrons { position:absolute; top:0; left:0; width:138px; height:104px; z-index:1; pointer-events:none; } .mmd-root.mm-style-zoku .mm-dbrand { position:relative; z-index:2; width:92px; height:104px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; } /* logo asset sits ~6 canvas-px high (7px top vs 19px bottom of 160) -> nudge down */ .mmd-root.mm-style-zoku .mm-dbrand img { position:static; transform:none; height:56px; width:auto; object-fit:contain; margin-top:2px; } .mmd-root.mm-style-zoku .mm-dbrand-name { font-family:Tropiline, Georgia, 'Times New Roman', serif; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#fbf3e2; white-space:nowrap; line-height:1; background:#241f1c; padding:2px 6px; border-radius:3px; } /* The drawer is light, but a custom rule forces .mmd-root .mm-ico svg path {fill:#ffffff} for the dark bar — that makes the drawer's search/close icons white-on-white. Re-tint them here (needs !important to beat that rule). */ .mmd-root .mm-drawer .mm-ico svg path, .mmd-root .mm-drawer .mm-ico svg circle, .mmd-root .mm-drawer .mm-ico svg line { fill:currentColor !important; } .mmd-root .mm-drawer .mm-ico { color:var(--c-text); background:color-mix(in srgb, var(--c-text) 7%, transparent); } .mmd-root .mm-drawer .mm-ico:hover { background:color-mix(in srgb, var(--c-text) 14%, transparent) !important; } .mmd-root.mm-style-zoku .mm-drawer .mm-ico { color:#1c1917; background:rgba(36, 31, 28,.08); } /* Head buttons: gold search, purple account, near-black close. Icons take currentColor via the fill override above, so `color` sets the glyph. These must stay AFTER the generic .mm-drawer .mm-ico rule — identical specificity, so source order decides. */ .mmd-root.mm-style-zoku .mm-drawer [data-mm-dsearch] { background:#fbf3e2; color:#1c1917; } .mmd-root.mm-style-zoku .mm-drawer [data-mm-dsearch]:hover { background:#fbf3e2 !important; filter:brightness(1.08); } .mmd-root.mm-style-zoku .mm-drawer [data-mm-account] { background:#c0603c; color:#ffffff; } .mmd-root.mm-style-zoku .mm-drawer [data-mm-account]:hover { background:#241f1c !important; } .mmd-root.mm-style-zoku .mm-drawer [data-mm-close] { background:#241f1c; color:#ffffff; } .mmd-root.mm-style-zoku .mm-drawer [data-mm-close]:hover { background:#241f1c !important; } .mmd-root .mm-drawer-search { position:relative; z-index:3; max-height:0; overflow:hidden; transition:max-height .3s var(--smooth); } .mmd-root .mm-drawer-search.is-open { max-height:84px; overflow:visible; } .mmd-root .mm-dsearch-inner { padding:12px 18px; } /* Field is a flex row: [input] [submit button OUTSIDE the input], button shaped like the head icon (36x36, 10px radius). Label + predictive results stay absolute so the flex row doesn't disturb them. */ .mmd-root .mm-drawer-search .field { position:relative; display:flex; align-items:center; gap:8px; } .mmd-root .mm-drawer-search .field__input { opacity:1!important; border:1px solid color-mix(in srgb, var(--c-text) 22%, transparent)!important; box-shadow:none!important; border-radius:40px; height:42px; flex:1 1 auto; min-width:0; width:auto; padding-left:16px; padding-right:16px!important; } .mmd-root .mm-drawer-search .field__label { left:16px!important; } /* padding:0 is essential — the theme's .field__button ships padding:2px 0 0 15px, which pushes the icon 7.5px right of centre no matter what justify-content says */ .mmd-root .mm-drawer-search .search__button { position:static!important; transform:none!important; flex:none; width:36px; height:36px; padding:0!important; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:var(--c-accent); color:#ffffff; cursor:pointer; } .mmd-root .mm-drawer-search .search__button svg { width:17px; height:17px; } .mmd-root .mm-drawer-search .predictive-search { z-index:60; } /* In-field submit: a real button, but solid green — gold stays unique to the head button */ /* chevron purple (the front chevron the logo sits on) */ .mmd-root.mm-style-zoku .mm-drawer-search .search__button { background:#241f1c; color:#ffffff; opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.18); } .mmd-root.mm-style-zoku .mm-drawer-search .search__button:hover { background:#241f1c !important; } .mmd-root.mm-style-zoku .mm-drawer-search .search__button:active { transform:scale(.94) !important; } /* icon-search.liquid hardcodes fill="#1c1917", so `color` alone can't tint it */ .mmd-root .mm-drawer-search .search__button svg path { fill:#ffffff !important; } .mmd-root .mm-drawer-body { flex:1; overflow-y:auto; padding:6px 0; } .mmd-root .mm-row { display:flex; align-items:center; gap:8px; width:100%; padding:14px 20px; font-size:15.5px; font-weight:600; text-align:left; } .mmd-root .mm-drawer-foot { margin-top:auto; padding:18px; display:flex; flex-direction:column; gap:10px; border-top:1px solid color-mix(in srgb, var(--c-text) 12%, transparent); } .mmd-root .mm-drawer-foot .mm-cta { margin-left:0; justify-content:center; } /* Persistent contact block, pinned under the foot. Shown on the first panel only: when a sub-panel opens the drawer gets .mm-panel.is-active, and :has() hides it. */ .mmd-root .mm-drawer-contact { flex:none; display:flex; flex-direction:column; gap:7px; padding:14px 18px 16px; background:color-mix(in srgb, var(--c-accent) 7%, var(--c-bg)); border-top:1px solid color-mix(in srgb, var(--c-text) 12%, transparent); } .mmd-root .mm-contact-row { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--c-text); text-decoration:none; } .mmd-root .mm-contact-row:hover { color:var(--c-accent); } .mmd-root .mm-contact-row span { min-width:0; overflow-wrap:anywhere; } .mmd-root .mm-contact-row svg { width:17px; height:17px; flex:none; } /* icon-phone/icon-mail hardcode fill="#1c1917", so force currentColor to tint them */ .mmd-root .mm-contact-row svg path { fill:currentColor !important; } .mmd-root .mm-contact-addr { margin:2px 0 0; display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.45; opacity:.72; } .mmd-root .mm-contact-addr svg { width:17px; height:17px; flex:none; margin-top:1px; } .mmd-root .mm-contact-addr svg path { fill:currentColor !important; } .mmd-root .mm-contact-addr span { min-width:0; } .mmd-root .mm-drawer:has(.mm-panel.is-active) .mm-drawer-contact { display:none; } /* contact block = solid dark chevron purple; text/icons flip to light for contrast */ .mmd-root.mm-style-zoku .mm-drawer-contact { background:#241f1c; border-top:0; padding-top:0; } .mmd-root.mm-style-zoku .mm-contact-row, .mmd-root.mm-style-zoku .mm-contact-addr { color:#ffffff; } .mmd-root.mm-style-zoku .mm-contact-addr { opacity:.8; } .mmd-root.mm-style-zoku .mm-contact-row:hover { color:#fbf3e2; } /* Accordion drawer variant (polybark / horne) */ .mmd-root .mm-acc { border-bottom:1px solid color-mix(in srgb, var(--c-text) 8%, transparent); } .mmd-root .mm-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:14px 20px; font-size:15.5px; font-weight:600; } .mmd-root .mm-acc > summary::-webkit-details-marker { display:none; } .mmd-root .mm-acc > summary .mm-chev { margin-left:auto; width:18px; height:18px; transition:transform .2s var(--smooth); } .mmd-root .mm-acc[open] > summary .mm-chev { transform:rotate(180deg); } .mmd-root .mm-sub { padding:2px 12px 12px 20px; } .mmd-root .mm-sub-all { display:block; padding:8px 0; font-size:13px; font-weight:600; opacity:.55; } .mmd-root .mm-subhead { display:flex; align-items:center; margin-top:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c-accent); } .mmd-root .mm-sub-link { display:block; padding:8px 0; font-size:14px; opacity:.85; } /* Slide-panel drawer variant (zoku / detour) — panels push in from the right, .5s cubic-bezier(.3,1,.3,1), like Zoku's inset animation */ .mmd-root .mm-stack { position:relative; flex:1; overflow:hidden; } .mmd-root .mm-panel { position:absolute; inset:0; background:var(--c-bg); transform:translateX(100%); transition:transform .5s var(--push); overflow-y:auto; padding:8px 0; } .mmd-root .mm-panel[data-root] { transform:translateX(0); } .mmd-root .mm-panel.is-active { transform:translateX(0); } .mmd-root .mm-panel.is-parked { transform:translateX(-28%); } .mmd-root .mm-row svg { width:18px; height:18px; flex:none; margin-left:auto; } .mmd-root .mm-back { display:flex; align-items:center; gap:8px; padding:14px 20px; font-weight:600; opacity:.7; } .mmd-root .mm-back svg { width:18px; height:18px; } .mmd-root .mm-panel-title { padding:4px 20px 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.5; } /* Every drawer page carries the same top-to-bottom gradient. background-attachment defaults to `scroll`, which on a scroll container pins the gradient to the panel box — it stays put instead of sliding away as the menu scrolls. */ .mmd-root.mm-style-zoku .mm-panel { background:linear-gradient(180deg, #ffffff 0%, #f6e7e0 52%, #f6e7e0 100%); } /* Page 1 only — sub-panels are siblings of [data-root], not descendants. */ .mmd-root.mm-style-zoku .mm-panel[data-root] .mm-row { font-size:17px; } /* Sub-panel chrome: circular back button, centred faded title, solid View all pinned to the foot. The panel splits into head / scrolling list / foot so View all stays one tap away even on the 13-link pages. Scoped to :not([data-root]) — page 1 has no head/foot and must keep scrolling as one column. */ .mmd-root .mm-panel:not([data-root]) { display:flex; flex-direction:column; overflow:hidden; padding:0; } .mmd-root .mm-plist { flex:1; overflow-y:auto; padding:4px 0 8px; } /* Pages 2 and 3 sit between the base .mm-row (15.5px) and page 1 (17px), so the top level still reads as the most important without the deeper pages feeling cramped. */ .mmd-root .mm-plist .mm-row { font-size:16.5px; } /* An equal-width spacer sits opposite the button so the title centres against the panel, not against the space left over beside the button. */ .mmd-root .mm-phead { flex:none; display:grid; grid-template-columns:34px 1fr 34px; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid color-mix(in srgb, var(--c-text) 10%, transparent); } .mmd-root .mm-phead .mm-panel-title { padding:0; margin:0; text-align:center; } /* Overrides the plain-text .mm-back above — same specificity, so this must stay later. */ .mmd-root .mm-back { width:34px; height:34px; padding:0; gap:0; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; opacity:1; cursor:pointer; } .mmd-root .mm-back svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* ---- Per-menu media inside a page-2 panel (banners + product grid) ---- Every box declares aspect-ratio and every img carries width/height, so images reserve their space before loading and CLS stays 0 — this drawer is on every page. */ .mmd-root .mm-mmedia { padding:10px 14px 4px; } .mmd-root .mm-mbanners { display:grid; gap:8px; } .mmd-root .mm-mbanners.is-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } .mmd-root .mm-mbanner { position:relative; display:block; border-radius:10px; overflow:hidden; background:transparent; } /* Full-width stacked banners: ratio is merchant-selectable — 16:9 landscape (default) or 9:16 portrait. The 3-up tiles layout stays square. */ .mmd-root .mm-mbanners:not(.is-tiles):not(.mm-ar-portrait) .mm-mbanner { aspect-ratio:16/9; } .mmd-root .mm-mbanners:not(.is-tiles).mm-ar-portrait .mm-mbanner { aspect-ratio:9/16; } .mmd-root .mm-mbanners.is-tiles .mm-mbanner { aspect-ratio:1/1; } /* contain = the whole image is always visible (no crop / zoom / clip). The box is transparent so it inherits the drawer colour — any spare space is seamless, never black bars. */ .mmd-root .mm-mbanner img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; } .mmd-root .mm-mbanner-t { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:10.5px; font-weight:700; color:#ffffff; line-height:1.2; background:linear-gradient(0deg, rgba(36, 31, 28,.88) 0%, transparent 100%); } /* Placeholder for an unset image — a visible, labelled slot rather than a dead box */ .mmd-root .mm-mph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:6px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--c-text) 55%, transparent); border:1px dashed color-mix(in srgb, var(--c-text) 25%, transparent); border-radius:10px; } /* spaces whichever block comes second, so the banners/products order setting works both ways */ .mmd-root .mm-mmedia > * + * { margin-top:8px; } .mmd-root .mm-pgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .mmd-root .mm-pcard { display:block; min-width:0; } .mmd-root .mm-pcard-img { position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:color-mix(in srgb, var(--c-text) 7%, transparent); } .mmd-root .mm-pcard-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .mmd-root .mm-pcard-t { margin-top:5px; font-size:10.5px; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mmd-root .mm-pcard-p { font-size:10.5px; font-weight:800; margin-top:1px; } .mmd-root.mm-style-zoku .mm-pcard-p { color:#1c1917; } .mmd-root.mm-style-zoku .mm-mbanner { background:transparent; } .mmd-root .mm-pfoot { flex:none; padding:10px 14px; border-top:1px solid color-mix(in srgb, var(--c-text) 10%, transparent); } .mmd-root .mm-viewall { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 12px; border-radius:10px; font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-align:center; } .mmd-root .mm-viewall svg { width:13px; height:13px; flex:none; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .mmd-root.mm-style-zoku .mm-back { background:#241f1c; color:#fbf3e2; } .mmd-root.mm-style-zoku .mm-back:active { background:#241f1c; } .mmd-root.mm-style-zoku .mm-viewall { background:#241f1c; color:#ffffff; } .mmd-root.mm-style-zoku .mm-viewall svg { stroke:#c0603c; } .mmd-root.mm-style-zoku .mm-viewall:active { background:#241f1c; } /* Quick links — part of page 1's menu: rendered at the end of the root panel, so it scrolls with the nav rows. Deliberately NOT pinned to the drawer and NOT merged with the contact block; the empty .mm-drawer-foot strip stays between them. It needs no sub-panel hide rule — it slides away with the root panel when a sub-menu opens. */ .mmd-root .mm-quick { margin-top:12px; padding:12px 20px 8px; } /* Announcement marquee — fills the reserved strip between the menu and the contact block. The track holds TWO identical copies of the message list and slides exactly -50%, so the loop is seamless with no JS and no jump. transform-only, so it never costs layout. The strip itself clips, so nothing bleeds into the menu. */ .mmd-root .mm-announce { flex:none; height:37px; overflow:hidden; display:flex; align-items:center; background:var(--c-bg); border-top:1px solid color-mix(in srgb, var(--c-text) 12%, transparent); } /* PERF: the drawer is rendered on every page but sits off-screen at translateX(-100%), so this marquee used to animate forever behind a closed drawer — burning compositor time and battery for something nobody could see, and holding a promoted layer via will-change. Both are now gated on .is-open: paused while closed, and will-change is applied only while it is genuinely animating (a permanent hint is worse than none). */ .mmd-root .mm-announce-track { display:flex; align-items:center; width:max-content; animation:mm-hdr-mq var(--mm-announce-speed, 18s) linear infinite; animation-play-state:paused; } .mmd-root .mm-drawer.is-open .mm-announce-track { animation-play-state:running; will-change:transform; } .mmd-root .mm-announce-msg { padding:0 10px; font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } .mmd-root .mm-announce-sep { font-weight:800; font-size:11px; color:#fbf3e2; } /* The empty .mm-drawer-foot strip existed to reserve this space — once the ticker is on, the ticker IS that strip. Turn the ticker off and the blank foot comes back. */ @media (max-width:1024px) { .mmd-root .mm-drawer:has(.mm-announce) .mm-drawer-foot{ display:none; } } .mmd-root .mm-quick-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; } .mmd-root .mm-quick-grid { display:block; } .mmd-root .mm-quick-link { display:flex; align-items:center; gap:11px; min-height:44px; padding:8px 0; font-size:14px; font-weight:600; line-height:1.25; } /* stroke/fill live on the so the icon markup stays attribute-free */ .mmd-root .mm-quick-link svg { width:18px; height:18px; flex:none; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .mmd-root.mm-style-zoku .mm-quick { background:#241f1c; } .mmd-root.mm-style-zoku .mm-quick-title { color:#fbf3e2; opacity:1; } .mmd-root.mm-style-zoku .mm-quick-link { color:#ffffff; border-bottom:1px solid rgba(255,255,255,.12); } .mmd-root.mm-style-zoku .mm-quick-link:last-child { border-bottom:0; } .mmd-root.mm-style-zoku .mm-quick-link svg { stroke:#c0603c; } .mmd-root.mm-style-zoku .mm-quick-link:active { background:rgba(255,255,255,.07); } .mmd-root.mm-style-zoku .mm-ico { background:rgba(255,255,255,.12); width:36px; height:36px; border-radius:10px; } .mmd-root.mm-style-zoku .mm-ico svg { width:18px; height:18px; } .mmd-root.mm-transparent:not(.mm-scrolled):not(.mm-mega-open) .mm-top, .mmd-root.mm-transparent:not(.mm-scrolled):not(.mm-mega-open) .mm-ico, .mmd-root.mm-transparent:not(.mm-scrolled):not(.mm-mega-open) .mm-wordmark, .mmd-root.mm-transparent:not(.mm-scrolled):not(.mm-mega-open) .mm-burger { color:var(--c-text-tr); } /* ── Per-icon colours ───────────────────────────────────────────────────────── The base sheet forces `.mmd-root .mm-ico svg path { fill:#ffffff !important } ` (0,2,1 + !important), so each override below needs BOTH higher specificity and its own !important — hence the extra .mm-actions in the selector (0,3,1). `fill` alone is not enough: some of these icons are drawn with stroke, so both properties are set and `stroke:currentColor` icons follow the colour too. */ .mmd-root .mm-actions .mm-ico { transition:background .2s var(--smooth), color .2s var(--smooth); } .mmd-root .mm-actions .mm-ico[data-mm-search] { color:#e8c877; } .mmd-root .mm-actions .mm-ico[data-mm-search] svg path { fill:#e8c877 !important; } .mmd-root .mm-actions .mm-ico[data-mm-search]:hover { background:rgba(232,200,119,.20) !important; } .mmd-root .mm-actions .mm-ico[aria-label="Account"] { color:#7fc29b; } .mmd-root .mm-actions .mm-ico[aria-label="Account"] svg path { fill:#7fc29b !important; } .mmd-root .mm-actions .mm-ico[aria-label="Account"]:hover { background:rgba(127,194,155,.20) !important; } .mmd-root .mm-actions .mm-ico[aria-label^="Cart"] { color:#f08a5d; } .mmd-root .mm-actions .mm-ico[aria-label^="Cart"] svg path { fill:#f08a5d !important; } .mmd-root .mm-actions .mm-ico[aria-label^="Cart"]:hover { background:rgba(240,138,93,.20) !important; } /* The jingle chip is stroke-drawn, not filled — colouring `fill` would black it out. */ .mmd-root .mm-actions .mm-ico.mm-jingle { color:#b3a3e0; } .mmd-root .mm-actions .mm-ico.mm-jingle svg { stroke:#b3a3e0 !important; } .mmd-root .mm-actions .mm-ico.mm-jingle svg path, .mmd-root .mm-actions .mm-ico.mm-jingle svg line { fill:none !important; stroke:#b3a3e0 !important; } .mmd-root .mm-actions .mm-ico.mm-jingle:hover { background:rgba(179,163,224,.20) !important; } .mmd-root .mm-actions .mm-ico.mm-jingle .mm-jingle-on i { background:#b3a3e0; } /* The drawer's footer button is full-width and centred, and lives in the mobile menu where the desktop grid does not apply — so it keeps the sub-text at every width. */ .mmd-root .mm-drawer-foot .mm-cta--stack { flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; line-height:1.25; padding-top:9px; padding-bottom:9px; } .mmd-root .mm-drawer-foot .mm-cta--stack .mm-cta-main { font-size:13px; font-weight:700; } .mmd-root .mm-drawer-foot .mm-cta--stack .mm-cta-sub { font-size:10px; font-weight:600; letter-spacing:.015em; opacity:.85; } /* ---------------------------------------------------------------- the burger * Not ported: on WordPress this button is injected into the existing header's * `.mmh__actions` row, so it sits outside `.mmd-root` and the theme's * `.mm-header .mm-burger` rule could never match it. Sized from `--mmh-row` so * it matches the search / account / cart icons it stands beside. * * Shown only at or below the width where the desktop mega menu hides itself * (`.mmh__links { display:none }` at 1100px in mm-header/assets/header.css). * Disagree with that number and the site either has two menus or none. */ .mmd-burger { display: none; } @media (max-width: 1100px) { .mmd-burger { display: inline-flex; align-items: center; justify-content: center; position: relative; width: var(--mmh-row, 44px); height: var(--mmh-row, 44px); flex: none; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mmd-burger svg { width: 24px; height: 24px; } } /* ------------------------------------------------- floating widgets, out of the way * The drawer is a new overlay that the older float widgets know nothing about, and * they outrank it: the Kundli cup sits at z-index 10030 and the scroll button at * 9998, against this drawer's 120. Raising the drawer instead would put it over the * cart drawer and the Oracle popup, so the widgets stand down while it is open. * * Keyed on the flag the drawer JS already sets, so nothing else has to learn * about it — slidein.js keeps its own `is-hidden` logic for the other two overlays. */ html.mm-drawer-open .mmsl-dock, html.mm-drawer-open .mm-wa-launcher, html.mm-drawer-open .mm-wa-panel, html.mm-drawer-open .mm-scroll-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ------------------------------------------------------------------ Head and bottom cluster, 2026-09-10. The wordmark is gone from the chevron area and the mark stands alone, so it gets the height the two of them shared. The close button is gone too — the scrim, Escape and a swipe left all close the drawer, and the burger itself toggles — replaced by search and the jingle. The AstroDirect CTA and the call/WhatsApp pair now sit below the address. That means UNDOING the upstream rule that hid .mm-drawer-foot whenever the ticker exists: the empty foot strip was only ever there to reserve the space the ticker later filled, and both of those blocks have real content now. ------------------------------------------------------------------ */ .mmd-root.mm-style-zoku .mm-dbrand img { height:66px; margin-top:0; } /* Four icons now, and they were reading as one undifferentiated block. Four 36px boxes plus three 12px gaps is 180px against roughly 240px of free row beside the 92px brand, so there is room to let them breathe. */ .mmd-root.mm-style-zoku .mm-drawer-head-actions { gap:12px; } /* The Kundli cup. A photographic asset rather than a line glyph, so it gets no tinting and no box background — the other three are monoline icons on a wash and the cup would look like a smudge inside one. Slightly larger than the 18px glyphs because it is artwork and reads smaller at the same size. */ .mmd-root .mm-drawer .mm-ico--cup { background:transparent; padding:0; } .mmd-root .mm-drawer .mm-ico--cup:hover { background:rgba(255,255,255,.10) !important; } .mmd-root .mm-drawer .mm-ico--cup img { width:auto; height:30px; object-fit:contain; display:block; } /* Undo the reserve-the-space rule — see the comment block above. Same media query as the rule it cancels, so it wins on source order. */ @media (max-width:1024px) { .mmd-root .mm-drawer:has(.mm-announce) .mm-drawer-foot { display:flex; } } /* The bottom cluster follows the contact block off-screen when a sub-panel opens, exactly as .mm-drawer-contact does — page 2 is a menu, not a place to be sold an astrologer. */ .mmd-root .mm-drawer:has(.mm-panel.is-active) .mm-drawer-foot, .mmd-root .mm-drawer:has(.mm-panel.is-active) .mmd-actions { display:none; } /* Now the FIRST row of the dark footer block, above the phone and e-mail rows rather than under the address. No top border: it meets the announcement ticker, and the change of ground colour is already the seam. */ .mmd-root .mm-drawer-foot { margin-top:0; flex:none; padding:14px 16px 12px; border-top:0; } .mmd-root .mm-drawer-foot .mm-cta { display:flex; width:100%; padding:14px; border-radius:12px; font-size:14px; font-weight:800; letter-spacing:.02em; } .mmd-root .mmd-actions { flex:none; display:flex; gap:10px; padding:0 16px 16px; } .mmd-root .mmd-actions a { flex:1; padding:11px; border-radius:10px; font-size:13px; font-weight:700; text-align:center; text-decoration:none; border:1px solid color-mix(in srgb, var(--c-text) 16%, transparent); color:var(--c-text); } /* zoku: the cluster shares the contact block's dark ground, so it reads as one footer rather than three stacked strips. */ .mmd-root.mm-style-zoku .mm-drawer-foot, .mmd-root.mm-style-zoku .mmd-actions { background:#241f1c; } .mmd-root.mm-style-zoku .mm-drawer-foot .mm-cta { background:#c0603c; color:#ffffff; } .mmd-root.mm-style-zoku .mm-drawer-foot .mm-cta:active { background:#a95233; } .mmd-root.mm-style-zoku .mmd-actions a { border-color:rgba(255,255,255,.24); color:#ffffff; } .mmd-root.mm-style-zoku .mmd-actions a:active { background:rgba(255,255,255,.10); } /* The jingle button. Bars only exist while it is playing. mm-header.js never touches a class for this — its sync() sets aria-pressed on every [data-mm-jingle] in the document, driven by the