/* ============================================================
   MISHWAR · v3 design system — "color is the hero"
   Approved prototype ported to Zid. Plain CSS, scoped under .m-scope
   so it never clashes with Tailwind/styles.css on other pages.
   Fonts: Baloo Bhaijaan 2 (display) + Tajawal (body).
   ============================================================ */
:root{
  --header-h:calc(max(12px, env(safe-area-inset-top)) + clamp(54px,12vw,66px) + 12px); /* tracks the fluid capsule (safe-area aware) so the drawer opens just below it */
  --m-navy:#0F2E66; --m-ink:#0c2348; --m-deep:#00539B; --m-blue:#0072CE;
  --m-paper:#fff; --m-mist:#F4F9FE; --m-mist2:#EAF3FC; --m-line:#E2EDF8; --m-muted:#5E7CA0; --m-silver:#A9C0DC;
  --m-accent:#0072CE;                /* live accent — JS swaps per section */
  --m-r:22px; --m-rl:30px; --m-ease:cubic-bezier(.16,1,.3,1);
  --m-disp:'Baloo Bhaijaan 2','Tajawal',sans-serif; --m-body:'Tajawal',sans-serif;
  --m-sh1:0 6px 22px rgba(15,46,102,.08); --m-sh2:0 22px 55px rgba(15,46,102,.16);
}
.m-scope{font-family:var(--m-body);color:var(--m-ink);line-height:1.7;-webkit-font-smoothing:antialiased}
.m-scope *{box-sizing:border-box}
.m-scope img{display:block;max-width:100%}
.m-wrap{max-width:1240px;margin:0 auto;padding:0 26px}
/* clear the floating capsule on inherited growth pages (cart/blog/faqs…) — home & custom m-scope pages handle their own clearance */
#main > section:first-child:has(> .theme-container){padding-top:90px}
.m-eyebrow{font-family:var(--m-disp);font-weight:700;font-size:13.5px;letter-spacing:1px;color:var(--m-accent);transition:color .55s var(--m-ease)}
.m-title{font-family:var(--m-disp);font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.1;color:var(--m-navy)}
.m-sub{color:var(--m-muted);font-size:17px;max-width:540px}
.m-reveal{opacity:0;transform:translateY(40px);transition:.85s var(--m-ease)}.m-reveal.in{opacity:1;transform:none}
/* "tissue pull" — native scroll-driven reveal where supported (60fps); IntersectionObserver remains the fallback */
@keyframes m-rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .m-reveal{animation:m-rise linear both;animation-timeline:view();animation-range:entry 5% cover 22%}
  }
}

.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;font-family:var(--m-disp);font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:999px;transition:.4s var(--m-ease);text-decoration:none}
.m-btn svg{width:17px;height:17px}
.m-btn-acc{background:linear-gradient(135deg,color-mix(in srgb,var(--m-accent) 78%,#3aa0ff),var(--m-accent));color:#fff;box-shadow:0 16px 34px color-mix(in srgb,var(--m-accent) 34%,transparent)}
.m-btn-acc:hover{transform:translateY(-3px)}
.m-btn-white{background:#fff;color:var(--m-deep);box-shadow:0 10px 28px rgba(0,0,0,.14)}.m-btn-white:hover{transform:translateY(-3px)}
.m-btn-blue{background:linear-gradient(135deg,var(--m-blue),var(--m-deep));color:#fff;box-shadow:0 16px 36px rgba(0,114,206,.3)}.m-btn-blue:hover{transform:translateY(-3px)}
.m-btn-ghostw{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}.m-btn-ghostw:hover{background:rgba(255,255,255,.28)}

/* ===== capsule header ===== */
.m-topbar{display:none}
.m-cap{position:fixed;top:max(12px,env(safe-area-inset-top));left:0;right:0;z-index:80;display:flex;justify-content:center;pointer-events:none}
.m-cap-in{pointer-events:auto;width:min(1180px,calc(100% - clamp(16px,5vw,32px)));display:flex;align-items:center;gap:clamp(8px,2.2vw,18px);height:clamp(54px,12vw,66px);padding:0 clamp(8px,3vw,12px) 0 clamp(12px,4vw,22px);background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 12px 40px rgba(12,35,72,.14);transition:height .4s var(--m-ease)}
.m-cap-in.is-shrunk{height:clamp(48px,10vw,58px)}
.m-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.m-brand .ar{font-family:var(--m-disp);font-weight:800;font-size:25px;color:var(--m-navy)}
.m-brand .arcm{height:7px;width:74px;margin-top:2px}
.m-wordmark{font-family:var(--m-disp);font-weight:800;font-size:25px;color:var(--m-navy);white-space:nowrap}
.m-npills{display:flex;gap:3px;margin-inline:auto}
.m-npills a{font-weight:700;font-size:clamp(13px,1.05vw,14.5px);color:var(--m-ink);padding:9px clamp(10px,1.4vw,15px);border-radius:999px;transition:.25s var(--m-ease);text-decoration:none}
.m-npills a:hover{background:color-mix(in srgb,var(--m-accent) 12%,#fff);color:var(--m-accent)}
.m-tools{display:flex;gap:7px}
.m-ic{width:clamp(38px,10vw,42px);height:clamp(38px,10vw,42px);border-radius:50%;background:#fff;border:1px solid #E6F0FA;display:grid;place-items:center;color:var(--m-navy);cursor:pointer;position:relative;transition:.25s var(--m-ease)}
.m-ic:hover{background:var(--m-accent);border-color:var(--m-accent);color:#fff}.m-ic svg{width:19px;height:19px}
.m-ic.hidden,.m-scope .hidden{display:none}
.m-lang{font-family:var(--m-disp);font-weight:800;font-size:13px;letter-spacing:.3px}
.m-cc{position:absolute;top:-3px;left:-3px;background:var(--m-accent);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0 4px;transition:background .55s var(--m-ease)}
/* header: mobile/tablet hamburger (shared drawer) styled like a capsule icon + desktop-only account */
.m-tools-acc{display:flex;gap:7px}
.m-cap-in [commandfor="mobile-drawer"]{border-radius:50%;background:#fff;border:1px solid #E6F0FA;color:var(--m-navy);flex:none}
.m-cap-in [commandfor="mobile-drawer"]:hover{background:var(--m-accent);border-color:var(--m-accent);color:#fff}
/* tablet+ (≥768): desktop nav, no hamburger. mobile (≤767): slim capsule (logo+cart) — categories/account live in the bottom nav, so the drawer trigger is hidden too. */
@media(max-width:767.98px){.m-tools-acc{display:none}.m-cap-in [commandfor="mobile-drawer"]{display:none}.m-cap-in{justify-content:space-between}}
@media(min-width:768px){.m-cap-in [commandfor="mobile-drawer"]{display:none}}

/* ===== marquee (under hero) — seamless two-group ticker (RTL-aware, no gaps) ===== */
.m-marquee{position:relative;background:var(--m-ink);overflow:hidden;display:flex;white-space:nowrap}
.m-marquee::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;z-index:2;background:linear-gradient(90deg,#6a3fa0,#2b4ea8,#0072CE,#2ba6e0,#2faa4e)}
.m-mqt{flex:0 0 auto;min-width:100%;display:flex;align-items:center;justify-content:space-around;padding:13px 0;animation:m-mq 32s linear infinite;will-change:transform}
.m-marquee:hover .m-mqt{animation-play-state:paused}
.m-mqt span{font-family:var(--m-disp);font-weight:700;font-size:14px;color:#cfe0f7;padding:0 22px;display:inline-flex;align-items:center;white-space:nowrap}
.m-mqt span::after{content:"●";color:#3a8fd6;font-size:8px;margin-inline-start:22px}
.m-mqt span b{color:#fff;margin:0 4px}
@keyframes m-mq{to{transform:translateX(-100%)}}
[dir="rtl"] .m-mqt{animation-name:m-mq-rtl}
@keyframes m-mq-rtl{to{transform:translateX(100%)}}

/* ===== hero ===== */
.m-hero{position:relative;height:90vh;min-height:560px;max-height:840px;overflow:hidden;background:linear-gradient(160deg,var(--m-blue) -10%,var(--m-deep) 55%,var(--m-navy))}
.m-hero video,.m-hero .m-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,59,115,.16),rgba(0,59,115,0) 38%,rgba(0,59,115,.5))}
.m-hero-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:30px}
.m-hero-in .m-eyebrow{color:#DCEEFF}
.m-hero h1{font-family:var(--m-disp);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1.05;color:#fff;max-width:720px;text-shadow:0 2px 40px rgba(0,40,80,.28);margin:12px 0 16px}
.m-hero p{font-size:20px;color:#EAF4FF;max-width:500px;margin-bottom:30px}
.m-hero-cta{display:flex;gap:13px;flex-wrap:wrap}
/* hero trust badges: «منذ 1989» seal + «الأكثر مبيعاً في السعودية» rank */
.m-hero-badges{display:flex;align-items:center;gap:13px;margin:0 0 20px;flex-wrap:wrap}
.m-seal89{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);line-height:1;flex:none;text-align:center}
.m-seal89 i{font-style:normal;font-size:9px;opacity:.85;letter-spacing:1px}
.m-seal89 b{font-family:var(--m-disp);font-weight:800;font-size:18px;letter-spacing:.5px;margin-top:2px}
.m-rank{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);border-radius:14px;padding:8px 15px;box-shadow:0 12px 28px rgba(0,40,80,.22)}
.m-rank .rk{display:flex;flex-direction:column;line-height:1.25}
.m-rank .rk b{font-family:var(--m-disp);font-weight:800;font-size:15px;color:var(--m-navy)}
.m-rank .rk small{font-size:11px;color:var(--m-muted)}
.m-hero-arc{position:absolute;bottom:-1px;left:0;width:100%;z-index:4;line-height:0}.m-hero-arc svg{width:100%;height:64px;display:block}
.m-scroll{position:absolute;bottom:56px;right:50%;transform:translateX(50%);z-index:3;color:#fff;font-size:12px;font-weight:600;opacity:.85;display:flex;flex-direction:column;align-items:center;gap:6px}
.m-scroll .mo{width:24px;height:38px;border:2px solid rgba(255,255,255,.7);border-radius:14px;position:relative}
.m-scroll .mo::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:7px;background:#fff;border-radius:2px;animation:m-sd 1.6s infinite}
@keyframes m-sd{0%{opacity:1;top:7px}100%{opacity:0;top:18px}}

/* ===== section frame ===== */
.m-sec{padding:64px 0;position:relative;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--m-accent) 4%,#fff));transition:background .55s var(--m-ease)}
.m-shead{max-width:640px;margin:0 0 30px}
.m-shead.ctr{margin:0 auto 32px;text-align:center}.m-shead.ctr .m-sub{margin:12px auto 0}
.m-smile{display:block;color:var(--m-accent);transition:color .55s var(--m-ease)}
/* live smile-arc: drawn on scroll (stroke-dashoffset set by JS), completes on add-to-cart */
.gsmile path{transition:stroke-dashoffset 1.1s var(--m-ease)}

/* ===== color navigator (shortcuts) ===== */
.m-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.m-sw{position:relative;border-radius:var(--m-r);padding:20px 14px 16px;cursor:pointer;overflow:hidden;border:1px solid var(--m-line);background:#fff;transition:.4s var(--m-ease);text-align:center;text-decoration:none;display:block}
.m-sw:hover{transform:translateY(-7px);box-shadow:var(--m-sh2);border-color:transparent}
.m-sw .cap-col{position:absolute;top:0;left:0;width:100%;height:6px;background:var(--c,#0072CE)}
.m-sw .swimg{height:78px;display:grid;place-items:center;margin:6px 0 10px}
.m-sw .swimg img{max-height:78px;width:auto;filter:drop-shadow(0 10px 14px rgba(15,46,102,.18))}
.m-sw .swname{font-family:var(--m-disp);font-weight:700;font-size:15px;color:var(--m-ink)}
.m-sw .swdot{width:9px;height:9px;border-radius:50%;background:var(--c,#0072CE);display:inline-block;margin-inline-start:6px}

/* ===== room sections (lifestyle + product cards) ===== */
.m-rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.m-rhead .m-sub{margin-top:10px}
.m-rgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:22px}
.m-life{position:relative;border-radius:var(--m-rl);overflow:hidden;min-height:360px;box-shadow:var(--m-sh1);transition:.5s var(--m-ease);text-decoration:none;display:block}
.m-life:hover{transform:translateY(-7px);box-shadow:var(--m-sh2)}
.m-life img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:1.1s var(--m-ease)}
.m-life:hover img{transform:scale(1.06)}
.m-life::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--m-accent) 90%,#000),color-mix(in srgb,var(--m-accent) 28%,transparent) 54%,transparent 80%);opacity:.9}
.m-life .lt{position:absolute;right:26px;bottom:26px;left:26px;z-index:2;color:#fff}
.m-life .lt .tag{font-family:var(--m-disp);font-weight:700;font-size:12.5px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:10px;backdrop-filter:blur(4px)}
.m-life .lt h3{font-family:var(--m-disp);font-weight:800;font-size:30px;line-height:1.1}
.m-life .lt p{font-size:14px;opacity:.95;margin-top:4px}
.m-life .enter{position:absolute;right:26px;top:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;color:#fff;font-family:var(--m-disp);font-weight:700;font-size:13px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.m-life .enter svg{width:16px;height:16px;transition:.3s var(--m-ease)}.m-life:hover .enter svg{transform:translateX(-5px)}

.m-pcard{background:#fff;border:1px solid var(--m-line);border-radius:var(--m-r);padding:16px;display:flex;flex-direction:column;position:relative;transition:.4s var(--m-ease);text-decoration:none}
.m-pcard:hover{transform:translateY(-7px);box-shadow:var(--m-sh2);border-color:transparent}
.m-pcard .save{position:absolute;top:14px;right:14px;z-index:3;background:#16a34a;color:#fff;font-family:var(--m-disp);font-weight:700;font-size:11.5px;padding:5px 11px;border-radius:999px}
/* "more rolls" offer badge (free-roll products) — distinct from the green sale badge */
.save.m-badge-free{background:linear-gradient(135deg,#FF8A3D,#F2641A)}
.m-pcard .pimg{position:relative;aspect-ratio:1/.9;display:grid;place-items:center;padding:6px}
.m-pcard .pimg img{max-height:160px;width:auto;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(15,46,102,.16));z-index:2;transition:.5s var(--m-ease)}
.m-pcard:hover .pimg img{transform:translateY(-5px) scale(1.03)}
.m-pcard .pimg .gsmile{position:absolute;bottom:8px;inset-inline:16%;width:68%;height:18px;z-index:1;color:var(--m-accent);opacity:.55;transition:color .55s var(--m-ease)}
.m-pcard .cat{font-family:var(--m-disp);font-size:11.5px;font-weight:800;color:var(--m-accent);margin-top:10px;transition:color .55s var(--m-ease)}
.m-pcard h3,.m-pcard h4{font-weight:700;font-size:14px;line-height:1.5;color:var(--m-ink);min-height:42px;margin-top:2px}
.m-pcard .prow{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.m-pcard .now{font-family:var(--m-disp);font-weight:800;font-size:19px;color:var(--m-navy)}.m-pcard .now small{font-size:12px;color:var(--m-muted);font-weight:700}
.m-pcard .was{font-size:13px;color:var(--m-muted);text-decoration:line-through;margin-inline-end:6px}
.m-qadd{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--m-accent) 78%,#3aa0ff),var(--m-accent));color:#fff;border:none;cursor:pointer;display:grid;place-items:center;flex:none;transition:.3s var(--m-ease);position:relative;z-index:3}.m-qadd:hover{transform:scale(1.1)}.m-qadd svg{width:20px;height:20px}
/* whole-card stretched link (add-to-cart button stays clickable above it) */
.m-pcard .cardlink,.m-ocard .cardlink{position:absolute;inset:0;z-index:1;border-radius:inherit}
/* per-product cashback line — pill with a "money-back" glyph (filled client-side, latin numerals) */
.m-cashline{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:8px;padding:5px 11px 5px 9px;border-radius:999px;background:#eafaf0;border:1px solid #c3edd0;font-family:var(--m-disp);font-weight:700;font-size:12.5px;color:#15803d;line-height:1.2}
.m-cashline::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v5h-5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center/contain no-repeat}
.m-cashline[hidden]{display:none}
/* cashback strip (home) + cart cashback line */
.m-cashstrip{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(12px,2.6vw,16px);background:linear-gradient(120deg,#e7f9ee,#f2fdf6 56%,#fff);border:1.5px solid #c3edd0;border-radius:var(--m-rl);padding:clamp(14px,3vw,18px) clamp(15px,3.4vw,22px);box-shadow:0 12px 32px rgba(22,163,74,.12)}
.m-cashstrip::after{content:"";position:absolute;inset-inline-end:-46px;top:-46px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.12),transparent 68%);pointer-events:none}
.m-cash-ic{position:relative;flex:none;width:clamp(42px,9vw,50px);height:clamp(42px,9vw,50px);border-radius:14px;background:linear-gradient(140deg,#22c55e,#15803d);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(22,163,74,.30)}
.m-cash-ic svg{width:24px;height:24px}
.m-cash-tx{position:relative;flex:1;min-width:0}
.m-cash-tx b{display:block;font-family:var(--m-disp);font-weight:800;font-size:clamp(16px,2.5vw,21px);color:var(--m-navy);line-height:1.25}
.m-cash-tx span{display:block;margin-top:2px;font-size:clamp(12.5px,2vw,14px);color:var(--m-muted)}
.m-cash-badge{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fff;border:1.5px solid #c3edd0;border-radius:15px;padding:7px 15px;box-shadow:0 6px 16px rgba(22,163,74,.16)}
.m-cash-badge[hidden]{display:none}
.m-cash-badge b{font-family:var(--m-disp);font-weight:800;font-size:clamp(20px,4vw,25px);color:#15803d;line-height:1}
.m-cash-badge i{font-family:var(--m-disp);font-weight:700;font-style:normal;font-size:10px;letter-spacing:.4px;color:#16a34a}
.m-cart-cashback{font-family:var(--m-disp);font-weight:700;font-size:14px;color:#16a34a;background:#eafaf0;border-radius:12px;padding:10px 14px;text-align:center}
.m-cart-cashback[hidden]{display:none}

/* ===== feature line (maxi / towels) ===== */
.m-feat{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--m-rl);overflow:hidden;box-shadow:var(--m-sh2);min-height:330px}
.m-feat .fcopy{padding:46px;display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--m-accent) 82%,#fff) -10%,var(--m-accent) 60%,color-mix(in srgb,var(--m-accent) 70%,#000));position:relative;overflow:hidden}
.m-feat .fcopy .motif{position:absolute;inset:0;opacity:.14;pointer-events:none}
.m-feat .fcopy h3{font-family:var(--m-disp);font-weight:800;font-size:32px;position:relative}
.m-feat .fcopy p{font-size:15px;opacity:.95;margin:10px 0 20px;max-width:380px;position:relative}
.m-feat .fpk{background:#fff;display:grid;place-items:center;position:relative;padding:30px}
.m-feat .fpk img{max-height:230px;width:auto;filter:drop-shadow(0 24px 26px rgba(15,46,102,.22));z-index:2}
.m-feat .fpk .gsmile{position:absolute;bottom:30px;inset-inline:20%;width:60%;height:24px;color:var(--m-accent);opacity:.5}
.m-chips{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.m-chip{background:#fff;border:1px solid #D8E8F7;color:var(--m-deep);border-radius:999px;padding:8px 14px;font-family:var(--m-disp);font-weight:700;font-size:12.5px}.m-chip b{color:var(--m-blue)}
.m-feat .m-chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff}

/* ===== bundles ===== */
.m-bundles{padding:84px 0;background:var(--m-mist)}
.m-bgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:stretch}
.m-bfeat{background:#fff;border:2px solid var(--m-navy);border-radius:var(--m-rl);padding:34px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 26px 60px rgba(15,46,102,.16);text-decoration:none}
.m-bfeat .ribbon{position:absolute;top:18px;left:-34px;transform:rotate(-45deg);background:linear-gradient(135deg,#FF8A3D,#F2641A);color:#fff;font-family:var(--m-disp);font-weight:700;font-size:12px;padding:6px 42px}
.m-bfeat .bminis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:170px;margin-bottom:16px;align-items:center}
.m-bfeat .bminis img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(15,46,102,.18))}
.m-bfeat .single{align-self:center;max-width:74%;max-height:200px;width:auto;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(15,46,102,.2));margin-bottom:8px}
.m-bfeat h3{font-family:var(--m-disp);font-weight:800;font-size:30px;color:var(--m-navy)}
.m-bfeat .bd{font-size:14.5px;color:var(--m-muted);margin:6px 0;max-width:430px}
.m-bcol{display:flex;flex-direction:column;gap:14px}
.m-bsmall{background:#fff;border:1px solid var(--m-line);border-radius:var(--m-r);padding:14px 16px;display:flex;align-items:center;gap:14px;transition:.4s var(--m-ease);flex:1;text-decoration:none}
.m-bsmall:hover{transform:translateY(-4px);box-shadow:var(--m-sh1);border-color:transparent}
.m-bsmall img{height:58px;width:auto;flex:none;filter:drop-shadow(0 6px 8px rgba(15,46,102,.16))}
.m-bsmall .bx{flex:1;min-width:0}
.m-bsmall h3{font-family:var(--m-disp);font-weight:800;font-size:16px;color:var(--m-navy)}
.m-priced{display:flex;align-items:baseline;gap:9px;margin-top:auto;flex-wrap:wrap}
.m-priced .now{font-family:var(--m-disp);font-weight:800;font-size:27px;color:var(--m-navy)}.m-priced .now small{font-size:12px;color:var(--m-muted);font-weight:700}
.m-bfeat .m-priced .now{font-size:40px}
.m-bsmall .m-priced{margin-top:3px}.m-bsmall .m-priced .now{font-size:20px}
.m-priced .was{font-size:14px;color:var(--m-muted);text-decoration:line-through}
.m-off{align-self:flex-start;background:#eafaf0;color:#16a34a;font-family:var(--m-disp);font-weight:700;font-size:12px;padding:3px 11px;border-radius:999px}
.m-bmini{width:42px;height:42px;border-radius:13px;background:var(--m-navy);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;flex:none;transition:.25s var(--m-ease)}.m-bmini:hover{transform:scale(1.08)}.m-bmini svg{width:19px;height:19px}

/* ===== offers band ===== */
.m-oband{background:linear-gradient(135deg,var(--m-navy),#06378a);border-radius:var(--m-rl);padding:44px;color:#fff;position:relative;overflow:hidden}
.m-oband .glow{position:absolute;inset:0;background:radial-gradient(80% 120% at 92% -10%,color-mix(in srgb,var(--m-accent) 55%,transparent),transparent 60%);transition:.55s var(--m-ease)}
.m-ohead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;position:relative;z-index:2;margin-bottom:26px}
.m-ohead h2{font-family:var(--m-disp);font-weight:800;font-size:clamp(26px,3vw,38px);color:#fff}
.m-ohead p{color:#bfd6f5;margin-top:4px}
.m-ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:2}
.m-ocard{background:#fff;border-radius:var(--m-r);padding:16px;display:flex;flex-direction:column;position:relative;transition:.4s var(--m-ease);text-decoration:none}
.m-ocard:hover{transform:translateY(-7px)}
.m-ocard .save{position:absolute;top:13px;right:13px;background:#16a34a;color:#fff;font-family:var(--m-disp);font-weight:700;font-size:12px;padding:5px 11px;border-radius:999px;z-index:2}
.m-ocard .pimg{aspect-ratio:1/1;display:grid;place-items:center;padding:6px}
.m-ocard .pimg img{max-height:128px;width:auto;filter:drop-shadow(0 14px 18px rgba(15,46,102,.18))}
.m-ocard .cat{font-family:var(--m-disp);font-size:11px;font-weight:800;color:var(--m-accent)}
.m-ocard h3,.m-ocard h4{font-weight:700;font-size:13.5px;line-height:1.5;color:var(--m-ink);flex:1;min-height:40px}
.m-ocard .prow{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.m-ocard .now{font-family:var(--m-disp);font-weight:800;font-size:18px;color:var(--m-navy)}.m-ocard .now small{font-size:11px;color:var(--m-muted);font-weight:700}

/* ===== about ===== */
.m-ab{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:var(--m-rl);overflow:hidden;box-shadow:var(--m-sh2)}
.m-ab .img{position:relative;min-height:440px}.m-ab .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-ab .copy{background:linear-gradient(160deg,#0a4f9e,var(--m-navy));color:#fff;padding:56px clamp(28px,4vw,58px);display:flex;flex-direction:column;justify-content:center}
.m-ab .copy h2{font-family:var(--m-disp);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.18;margin:12px 0 14px}
.m-ab .copy p{color:#E2EFFB;font-size:16px;margin-bottom:26px;max-width:440px}
.m-qrow{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.m-q{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:18px 10px;text-align:center}
.m-q svg{width:26px;height:26px;margin:0 auto 8px}.m-q b{font-family:var(--m-disp);font-weight:700;font-size:15px;display:block}.m-q span{font-size:11.5px;color:#CDE0F4}

/* ===== big-smile footer ===== */
.m-foot{background:linear-gradient(180deg,var(--m-navy),#06203f);color:#C0D8F0;position:relative}
.m-foot .smile{line-height:0}.m-foot .smile svg{width:100%;height:90px;display:block}
.m-foot-in{padding:0}
.m-ftop{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding:34px 0 38px}
.m-fb .ar{font-family:var(--m-disp);font-weight:800;font-size:30px;color:#fff}.m-fb .lat{font-size:10px;font-weight:700;letter-spacing:6px;color:#7FB6E6;margin-bottom:12px}.m-fb p{font-size:14px;color:#9FBEDD;max-width:280px}
.m-fcol h4{font-family:var(--m-disp);font-weight:700;font-size:15px;color:#fff;margin-bottom:13px}.m-fcol a{display:block;font-size:14px;color:#9FBEDD;padding:6px 0;text-decoration:none}.m-fcol a:hover{color:#fff}
.m-pays{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}.m-pay{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 11px;font-weight:700;font-size:11.5px;color:#DCEAF8}
.m-payi{height:30px;width:auto;max-width:58px;background:#fff;border-radius:7px;padding:4px 7px;object-fit:contain}
.m-ftrust{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding:18px 0}
.m-ftrust .m-pays{margin-top:0}
.m-ftrust-info{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;font-size:12.5px;color:#9FBEDD}
.m-ftrust-info b{color:#DCEAF8;font-weight:700;margin-inline-start:4px}
.m-maroof{color:#9FBEDD;text-decoration:none}.m-maroof:hover{color:#fff}
.m-fbot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:12.5px;color:#7F9CC0}

/* ===== PDP (product page) ===== */
.m-crumb{padding:14px 0;font-size:13px;color:var(--m-muted);display:flex;gap:8px;flex-wrap:wrap}.m-crumb a{text-decoration:none}.m-crumb a:hover{color:var(--m-accent)}.m-crumb .sp{opacity:.5}
.m-pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;padding-bottom:30px}
.m-gallery{position:sticky;top:104px}
.m-gmain{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--m-accent) 7%,#fff),var(--m-mist));border:1px solid var(--m-line);border-radius:var(--m-rl);aspect-ratio:1/1;display:grid;place-items:center;padding:34px;overflow:hidden}
.m-gmain .badge{position:absolute;top:18px;right:18px;background:#16a34a;color:#fff;font-family:var(--m-disp);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;z-index:3}
.m-gmain img{max-height:80%;width:auto;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(15,46,102,.22));z-index:2}
.m-gmain .gsmile{position:absolute;bottom:30px;inset-inline:20%;width:60%;height:26px;color:var(--m-accent);opacity:.45}
.m-thumbs{display:flex;gap:12px;margin-top:14px}
.m-thumb{flex:1;background:#fff;border:1.5px solid var(--m-line);border-radius:16px;aspect-ratio:1/1;display:grid;place-items:center;padding:10px;cursor:pointer;transition:.25s}
.m-thumb.on{border-color:var(--m-accent)}.m-thumb img{max-height:100%;width:auto;object-fit:contain}
.m-pinfo .m-eyebrow{margin-bottom:8px}
.m-pinfo h1{font-family:var(--m-disp);font-weight:800;font-size:clamp(28px,3.4vw,40px);color:var(--m-navy);line-height:1.18}
.m-stars{display:inline-flex;gap:2px;color:#f5b301;margin:8px 0}.m-stars svg{width:16px;height:16px}.m-stars small{color:var(--m-muted);margin-inline-start:6px}
.m-pblk{display:flex;align-items:baseline;gap:12px;margin:12px 0 6px;flex-wrap:wrap}
.m-pblk .now{font-family:var(--m-disp);font-weight:800;font-size:38px;color:var(--m-navy)}.m-pblk .now small{font-size:15px;color:var(--m-muted);font-weight:700}
.m-pblk .was{font-size:17px;color:var(--m-muted);text-decoration:line-through}
.m-desc{color:var(--m-muted);font-size:15px;margin:14px 0 22px;max-width:480px}
/* PDP — full product description, typeset as a readable prose card */
.m-pdetails{padding:34px 0 2px}
.m-pdetails-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--m-line);border-radius:var(--m-r);box-shadow:var(--m-sh1);padding:clamp(20px,4vw,34px)}
.m-pdetails-h{display:flex;align-items:center;gap:11px;margin:0 0 16px;font-family:var(--m-disp);font-weight:800;font-size:clamp(18px,3vw,23px);color:var(--m-navy)}
.m-pdetails-h .ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--m-accent) 12%,#fff);color:var(--m-accent)}
.m-pdetails-h .ic svg{width:20px;height:20px}
.m-prose{color:#2b3a57;font-size:clamp(14.5px,2.1vw,16px);line-height:1.85}
.m-prose>:first-child{margin-top:0}.m-prose>:last-child{margin-bottom:0}
.m-prose p{margin:0 0 14px}
.m-prose h1,.m-prose h2,.m-prose h3,.m-prose h4{font-family:var(--m-disp);color:var(--m-navy);font-weight:800;line-height:1.3;margin:22px 0 10px}
.m-prose h2{font-size:1.25em}.m-prose h3{font-size:1.13em}.m-prose h4{font-size:1.02em}
.m-prose ul,.m-prose ol{margin:0 0 16px;padding-inline-start:0;list-style:none}
.m-prose li{position:relative;padding-inline-start:26px;margin:0 0 9px}
.m-prose ul li::before{content:"";position:absolute;inset-inline-start:3px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--m-accent)}
.m-prose ol{counter-reset:m-li}
.m-prose ol li{counter-increment:m-li}
.m-prose ol li::before{content:counter(m-li);position:absolute;inset-inline-start:0;top:.02em;width:21px;height:21px;border-radius:50%;background:color-mix(in srgb,var(--m-accent) 14%,#fff);color:var(--m-accent);font-family:var(--m-disp);font-weight:800;font-size:11.5px;display:grid;place-items:center}
.m-prose strong,.m-prose b{color:var(--m-navy);font-weight:700}
.m-prose a{color:var(--m-accent);text-decoration:underline;text-underline-offset:2px}
.m-prose img{max-width:100%;height:auto;border-radius:12px;margin:12px 0}
.m-prose table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.95em}
.m-prose th,.m-prose td{border:1px solid var(--m-line);padding:9px 12px;text-align:start}
.m-prose th{background:var(--m-mist);font-weight:700;color:var(--m-navy)}
.m-prose hr{border:0;border-top:1px solid var(--m-line);margin:20px 0}
.m-opt-label{font-family:var(--m-disp);font-weight:700;font-size:14px;color:var(--m-navy);margin-bottom:9px}
.m-opts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.m-opt{border:1.5px solid var(--m-line);border-radius:14px;padding:11px 18px;cursor:pointer;font-family:var(--m-disp);font-weight:700;font-size:14px;color:var(--m-ink);transition:.2s;background:#fff;text-align:center;line-height:1.2}
.m-opt.on{border-color:var(--m-accent);background:color-mix(in srgb,var(--m-accent) 8%,#fff);color:var(--m-accent)}
.m-buybar{display:flex;gap:12px;align-items:stretch;margin-bottom:14px}
.m-qty{display:flex;align-items:center;border:1.5px solid var(--m-line);border-radius:999px;overflow:hidden}
.m-qty button{width:44px;height:52px;border:none;background:#fff;font-size:20px;color:var(--m-navy);cursor:pointer;font-family:var(--m-disp)}.m-qty button:hover{background:var(--m-mist)}
.m-qty input{width:42px;text-align:center;border:none;font-family:var(--m-disp);font-weight:800;font-size:17px;color:var(--m-navy)}
.m-buybar .m-btn-acc{flex:1}
.m-bnpl{display:flex;align-items:center;gap:9px;background:var(--m-mist);border:1px solid var(--m-line);border-radius:14px;padding:11px 15px;font-size:13px;color:var(--m-muted);margin-top:14px}.m-bnpl b{color:var(--m-navy);font-family:var(--m-disp)}.m-bnpl .pill{background:#fff;border:1px solid var(--m-line);border-radius:7px;padding:3px 8px;font-weight:700;font-size:11px;color:var(--m-navy)}
/* softness meter (brand signature on PDP) */
.m-meter{background:var(--m-mist);border:1px solid var(--m-line);border-radius:var(--m-r);padding:20px 22px;margin:18px 0}
.m-meter h4{font-family:var(--m-disp);font-weight:700;font-size:15px;margin-bottom:14px;color:var(--m-navy)}
.m-bar{display:flex;align-items:center;gap:12px;margin-bottom:11px}.m-bar span{width:64px;font-size:13.5px;font-weight:700;color:var(--m-deep)}
.m-bar .track{flex:1;height:9px;background:#DCEBFA;border-radius:99px;overflow:hidden}.m-bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--m-accent) 70%,#3aa0ff),var(--m-accent));width:0;transition:width 1.2s var(--m-ease)}
.m-bar em{width:34px;text-align:end;font-style:normal;font-family:var(--m-disp);font-weight:800;font-size:14px;color:var(--m-navy)}
.m-meter h4 .m-meter-cap{font-family:var(--m-body);font-weight:600;font-size:12px;color:var(--m-muted);margin-inline-start:8px}
.m-bnpl-w{margin:4px 0 6px}.m-bnpl-w:empty{display:none}
/* sticky add-to-cart (mobile PDP) */
.m-sticky-atc{position:fixed;bottom:0;inset-inline:0;z-index:70;display:none;align-items:center;gap:12px;background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(10px);border-top:1px solid var(--m-line);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(15,46,102,.12)}
.m-sticky-atc .now{font-family:var(--m-disp);font-weight:800;font-size:21px;color:var(--m-navy);white-space:nowrap}
.m-sticky-atc .m-btn-acc{flex:1}
@media(max-width:768px){.m-sticky-atc{display:flex}body[data-template="product_details"]{padding-bottom:76px}}

/* ===== mobile bottom nav (≤767px) — thumb-zone, smile-arc active indicator ===== */
.m-bnav{display:none}
.m-bn{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 9px;background:none;border:none;cursor:pointer;color:var(--m-muted);font-family:var(--m-body);font-weight:700;font-size:10.5px;text-decoration:none;transition:color .25s var(--m-ease)}
.m-bn .ic{width:23px;height:23px}
.m-bn span{line-height:1}
.m-bn.is-active{color:var(--m-accent)}
.m-bn-arc{position:absolute;bottom:2px;inset-inline:30%;width:40%;height:6px;color:var(--m-accent);opacity:0;transform:translateY(3px);transition:.3s var(--m-ease);pointer-events:none}
.m-bn.is-active .m-bn-arc{opacity:1;transform:none}
.m-bn-badge{position:absolute;top:1px;inset-inline-start:calc(50% + 7px);background:var(--m-accent);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:50%;display:grid;place-items:center;padding:0 4px;line-height:1}
.m-bn-badge[hidden]{display:none}
/* categories bottom-sheet */
.m-sheet{border:none;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;inset:0;background:transparent;overflow:visible}
.m-sheet:not([open]){display:none}
.m-sheet::backdrop{background:transparent}
.m-sheet-bd{position:fixed;inset:0;background:rgba(12,35,72,.42);transition:opacity .4s var(--m-ease)}
.m-sheet-bd[data-closed]{opacity:0}
.m-sheet-wrap{position:fixed;inset:0;display:flex;align-items:flex-end;outline:none}
.m-sheet-panel{width:100%;background:#fff;border-radius:24px 24px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -16px 48px rgba(15,46,102,.22);transition:transform .42s var(--m-ease)}
.m-sheet-panel[data-closed]{transform:translateY(100%)}
.m-sheet-grip{width:42px;height:5px;border-radius:999px;background:var(--m-line);margin:6px auto 14px}
.m-sheet-t{font-family:var(--m-disp);font-weight:800;font-size:19px;color:var(--m-navy);margin-bottom:14px}
.m-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-sheet-chip{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1.5px solid var(--m-line);border-radius:16px;font-family:var(--m-disp);font-weight:700;font-size:14.5px;color:var(--m-ink);text-decoration:none;background:#fff;transition:.2s var(--m-ease)}
.m-sheet-chip .dot{width:11px;height:11px;border-radius:50%;background:var(--c,#0072CE);flex:none}
.m-sheet-chip:active{border-color:var(--c,#0072CE);transform:scale(.98)}
.m-sheet-all{display:block;text-align:center;margin-top:14px;padding:13px;border-radius:14px;background:var(--m-navy);color:#fff;font-family:var(--m-disp);font-weight:700;font-size:14.5px;text-decoration:none}
@media(max-width:767.98px){
  .m-bnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:75;justify-content:space-around;background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--m-line);box-shadow:0 -8px 24px rgba(15,46,102,.10);padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  body[data-template="product_details"] .m-bnav{display:none}
}

/* ===== floating WhatsApp ===== */
.m-wa{position:fixed;z-index:74;inset-inline-end:18px;bottom:calc(20px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.42);transition:.3s var(--m-ease)}
.m-wa:hover{transform:translateY(-3px) scale(1.05)}
.m-wa svg{width:30px;height:30px}
@media(max-width:767.98px){.m-wa{width:50px;height:50px;bottom:calc(70px + env(safe-area-inset-bottom))}}

/* ===== add-to-cart toast (branded confirmation) + cart-badge bump ===== */
.m-toast{position:fixed;z-index:200;left:50%;top:calc(var(--header-h) + 6px);transform:translate(-50%,-14px);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);background:#fff;color:var(--m-navy);font-family:var(--m-disp);font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:14px;border:1px solid var(--m-line);box-shadow:0 16px 44px rgba(15,46,102,.24);opacity:0;pointer-events:none;transition:.35s var(--m-ease);white-space:nowrap}
.m-toast.show{opacity:1;transform:translate(-50%,0)}
.m-toast .ic{flex:none;width:24px;height:24px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center}
.m-toast .ic svg{width:15px;height:15px}
.m-toast.err .ic{background:#e0473a}
@keyframes m-bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.m-cc.bump,.m-bn-badge.bump{animation:m-bump .4s var(--m-ease)}
.m-assure{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--m-line);padding-top:18px;margin-top:14px}.m-assure .t{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--m-ink)}.m-assure .t svg{width:20px;height:20px;color:var(--m-accent);flex:none}

/* ===== category page ===== */
.m-cban{padding:104px 0 30px;background:linear-gradient(180deg,color-mix(in srgb,var(--m-accent) 9%,#fff),#fff);transition:background .5s var(--m-ease);position:relative;overflow:hidden}
.m-cban h1{font-family:var(--m-disp);font-weight:800;font-size:clamp(32px,4.6vw,52px);color:var(--m-navy);line-height:1.1}
.m-cban p{color:var(--m-muted);font-size:16px;margin-top:8px;max-width:560px}
.m-fchips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.m-fchip{border:1.5px solid var(--m-line);background:#fff;border-radius:999px;padding:9px 18px;cursor:pointer;font-family:var(--m-disp);font-weight:700;font-size:14px;color:var(--m-ink);transition:.25s;display:inline-flex;align-items:center;gap:8px}
.m-fchip .cd{width:9px;height:9px;border-radius:50%;background:var(--cc,#C4D6EA)}
.m-fchip:hover{border-color:var(--m-accent)}.m-fchip.on{background:var(--m-accent);border-color:var(--m-accent);color:#fff}.m-fchip.on .cd{background:#fff}
.m-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 18px;flex-wrap:wrap}
.m-toolbar .count{font-size:14px;color:var(--m-muted)}.m-toolbar .count b{color:var(--m-navy);font-family:var(--m-disp)}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:40px}
/* grid children must be allowed to shrink (cancel the implicit min-width:auto) so cards never force horizontal overflow on narrow/zoomed screens */
.m-grid>*,.m-ogrid>*{min-width:0}

/* ===== sticky colour category bar (mobile browsing) ===== */
.m-colorbar{display:none}
.m-cb-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px;scroll-snap-type:x proximity}
.m-cb-track::-webkit-scrollbar{display:none}
.m-cb-chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1.5px solid var(--m-line);border-radius:999px;background:#fff;font-family:var(--m-disp);font-weight:700;font-size:13px;color:var(--m-ink);text-decoration:none;white-space:nowrap;transition:.2s var(--m-ease)}
.m-cb-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,#0072CE);flex:none}
.m-cb-chip.on{background:var(--c,#0072CE);border-color:var(--c,#0072CE);color:#fff}
.m-cb-chip.on .dot{background:#fff}
@media(max-width:767.98px){.m-colorbar{display:block;position:sticky;top:var(--header-h);z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--m-line)}}

/* ===== responsive ===== */
@media(max-width:767.98px){
  .m-npills{display:none}
  .m-rgrid{grid-template-columns:1fr 1fr}.m-life{grid-column:1/-1;min-height:240px}
  .m-feat,.m-ab,.m-pdp{grid-template-columns:1fr}.m-gallery{position:static}.m-ab .img{min-height:300px}
  .m-bgrid{grid-template-columns:1fr}
  .m-ogrid,.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m-swatches{grid-template-columns:repeat(3,1fr)}
  .m-ftop{grid-template-columns:1fr 1fr}
}
/* hero: desktop shows the 16:9 asset, mobile shows the portrait 9:16 asset — both full-bleed cover */
.m-hero .m-show-mob{display:none}
@media(max-width:768px){
  .m-hero .m-hide-mob{display:none}
  .m-hero .m-show-mob{display:block}
  .m-oband{padding:24px 16px}.m-ohead{margin-bottom:18px}
}
@media(max-width:560px){
  .m-wrap{padding:0 16px}.m-hero h1{font-size:46px}
  .m-rgrid{grid-template-columns:1fr}.m-rgrid .m-life{order:3;min-height:170px}.m-ogrid,.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m-swatches{grid-template-columns:1fr 1fr}
  .m-qrow{grid-template-columns:1fr}.m-ftop{grid-template-columns:1fr}
}
/* very narrow / Display-Zoom iPhones (~320px): tighten cards so the 2-up grid stays comfortable */
@media(max-width:380px){
  .m-pcard{padding:12px}
  .m-pcard h3,.m-pcard h4{font-size:13px;min-height:38px}
  .m-pcard .now,.m-ocard .now{font-size:17px}
  .m-qadd{width:38px;height:38px;border-radius:12px}
  .m-cashline{font-size:11.5px;padding:4px 9px}
}
@media(prefers-reduced-motion:reduce){.m-scope *{animation:none!important;transition-duration:.001s!important}}