/* ============================================================================
   ASLAN — design system.  Modest fashion house: editorial, elegant, timeless.
   ============================================================================ */
:root {
    --pine:    #2E473B;   /* primary */
    --pine-d:  #1E3129;
    --pine-l:  #3C5A4B;
    --camel:   #C2A878;   /* accent / gold */
    --camel-d: #A98B5B;
    --stone:   #E7E0D6;
    --cream:   #F7F3EC;   /* page bg */
    --cream-2: #FBF8F2;
    --ink:     #201C18;   /* headings/text */
    --ink-2:   #4A443C;
    --muted:   #8A8178;
    --line:    #E4DDD2;
    --line-2:  #D8CFC1;
    --white:   #FFFFFF;
    --sale:    #9A3B2E;

    --r:       4px;
    --r-lg:    8px;
    --shadow:  0 20px 50px -30px rgba(32,28,24,.45);
    --shadow-sm:0 8px 24px -16px rgba(32,28,24,.35);
    --ease:    cubic-bezier(.22,1,.36,1);

    --f-head-en: 'Cormorant Garamond', Georgia, serif;
    --f-head-ar: 'Reem Kufi', 'Almarai', sans-serif;
    --f-body-en: 'Jost', system-ui, sans-serif;
    --f-body-ar: 'Almarai', system-ui, sans-serif;
    --f-head: var(--f-head-ar);
    --f-body: var(--f-body-ar);
}
.is-ltr { --f-head: var(--f-head-en); --f-body: var(--f-body-en); }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--f-body); color:var(--ink); background:var(--cream); line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--f-head); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--ink); }
.is-ltr h1, .is-ltr h2, .is-ltr h3 { font-weight:600; letter-spacing:.01em; }
p { margin:0 0 1rem; }
a { color:inherit; text-decoration:none; transition:color .2s var(--ease); }
img { max-width:100%; display:block; }
.container { width:min(1280px,92%); margin-inline:auto; }

/* overline / eyebrow */
.overline { display:inline-block; font-family:var(--f-body); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--camel-d); font-weight:600; }
.is-rtl .overline { letter-spacing:.12em; }
.eyebrow--center { display:block; text-align:center; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--f-body);
    font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; padding:1em 2em;
    border:1px solid transparent; border-radius:var(--r); cursor:pointer; transition:all .25s var(--ease); white-space:nowrap; }
.is-rtl .btn { letter-spacing:.02em; text-transform:none; font-size:.95rem; }
.btn-sm { padding:.7em 1.3em; font-size:.74rem; }
.is-rtl .btn-sm { font-size:.88rem; }
.btn-primary { background:var(--pine); color:#fff; }
.btn-primary:hover { background:var(--pine-d); }
.btn-gold { background:var(--camel); color:var(--pine-d); }
.btn-gold:hover { background:var(--camel-d); color:#fff; }
.btn-outline { border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover { background:var(--ink); color:#fff; }
.btn-light { background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-light:hover { border-color:var(--ink); }
.btn-block { width:100%; }

.link-u { position:relative; font-weight:600; color:var(--ink); }
.link-u::after { content:''; position:absolute; inset-inline-start:0; bottom:-3px; width:0; height:1px; background:var(--camel-d); transition:width .25s var(--ease); }
.link-u:hover::after { width:100%; }

/* ── Announcement + header ────────────────────────────────────────────────── */
.announce { background:var(--pine-d); color:var(--cream); text-align:center; font-size:.78rem; letter-spacing:.08em; padding:.6rem 1rem; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(247,243,236,.9); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); }
.header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:78px; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.5rem; justify-self:center; }
.brand-logo { display:block; width:auto; height:60px; }
.brand-logo--light { height:84px; }
.brand-logo--stacked { height:170px; }

.main-nav { display:flex; align-items:center; gap:1.8rem; }
.main-nav a { font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--ink); position:relative; padding:.4em 0; }
.is-rtl .main-nav a { letter-spacing:0; text-transform:none; font-size:.98rem; }
.main-nav a::after { content:''; position:absolute; inset-inline-start:0; bottom:0; width:0; height:1px; background:var(--camel-d); transition:width .25s var(--ease); }
.main-nav a:hover::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:1.1rem; justify-self:end; }
.icon-link { position:relative; color:var(--ink); font-size:1.08rem; display:inline-flex; align-items:center; gap:.4rem; }
.icon-link:hover { color:var(--pine); }
.icon-link .lbl { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.is-rtl .icon-link .lbl { letter-spacing:0; text-transform:none; font-size:.9rem; }
.cart-badge { position:absolute; top:-8px; inset-inline-end:-10px; background:var(--camel); color:var(--pine-d); font-size:.66rem; font-weight:700; min-width:17px; height:17px; border-radius:99px; display:grid; place-items:center; padding:0 4px; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:4px; }
.nav-toggle span { width:22px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-nav { display:none; flex-direction:column; padding:0 4% 1rem; }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:.9rem .2rem; border-bottom:1px solid var(--line); font-size:.95rem; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position:relative; min-height:clamp(440px,72vh,720px); display:flex; align-items:center;
    background:linear-gradient(120deg, var(--pine) 0%, var(--pine-d) 100%); color:var(--cream); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 30%, rgba(194,168,120,.22), transparent 55%); }
.hero-inner { position:relative; z-index:2; max-width:640px; padding-block:3rem; }
.hero .overline { color:var(--camel); }
.hero h1 { color:#fff; font-size:clamp(2.6rem,6vw,5rem); line-height:1.05; margin:1rem 0 1.2rem; font-weight:500; }
.hero p { color:rgba(247,243,236,.82); font-size:1.15rem; max-width:46ch; margin-bottom:2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-figure { position:absolute; inset-inline-end:0; top:0; bottom:0; width:42%; opacity:.9;
    background:linear-gradient(160deg, rgba(231,224,214,.14), rgba(194,168,120,.1)); border-inline-start:1px solid rgba(255,255,255,.08); display:none; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding:clamp(3.5rem,7vw,6rem) 0; }
.section-head { text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2 { font-size:clamp(1.9rem,4vw,3rem); margin-top:.5rem; font-weight:500; }
.section-head p { color:var(--muted); }
.bg-stone { background:var(--stone); }
.bg-pine { background:var(--pine); color:var(--cream); }
.bg-pine h2 { color:#fff; }

/* ── Product cards ────────────────────────────────────────────────────────── */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem 1.4rem; }
.pcard { position:relative; background:transparent; }
.pcard__media { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--stone); border-radius:var(--r); display:block; }
.pcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .4s; }
.pcard__media img.alt { position:absolute; inset:0; opacity:0; }
.pcard:hover .pcard__media img.main { opacity:0; }
.pcard:hover .pcard__media img.alt { opacity:1; }
.pcard:hover .pcard__media img { transform:scale(1.04); }
.pcard__tag { position:absolute; top:12px; inset-inline-start:12px; background:var(--pine-d); color:#fff; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:.35em .8em; border-radius:2px; }
.pcard__tag.sale { background:var(--sale); }
.pcard__tag.new { background:var(--camel); color:var(--pine-d); }
.pcard__fav { position:absolute; top:10px; inset-inline-end:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); display:grid; place-items:center; opacity:0; transition:opacity .25s; }
.pcard:hover .pcard__fav { opacity:1; }
.pcard__body { padding:.9rem .2rem 0; text-align:center; }
.pcard__cat { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.is-rtl .pcard__cat { letter-spacing:0; }
.pcard__name { font-family:var(--f-head); font-size:1.25rem; margin:.25rem 0 .35rem; }
.pcard__name a:hover { color:var(--pine); }
.pcard__price { font-size:1rem; color:var(--ink); font-weight:600; }
.pcard__price .old { color:var(--muted); text-decoration:line-through; margin-inline-start:.5rem; font-weight:400; }
.pcard__price .now { color:var(--sale); }
.pcard__swatches { display:flex; gap:5px; justify-content:center; margin-top:.5rem; }
.pcard__swatches i { width:13px; height:13px; border-radius:50%; border:1px solid var(--line-2); display:inline-block; }

/* ── Category tiles ───────────────────────────────────────────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.cat-tile { position:relative; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; display:flex; align-items:flex-end; justify-content:center;
    background:linear-gradient(160deg,var(--pine-l),var(--pine)); color:#fff; padding:1.6rem; text-align:center; }
.cat-tile:nth-child(2){ background:linear-gradient(160deg,var(--camel),var(--camel-d)); }
.cat-tile:nth-child(3){ background:linear-gradient(160deg,#6B6453,#4A443C); }
.cat-tile:hover .cat-tile__name { letter-spacing:.2em; }
.cat-tile__name { font-family:var(--f-head); font-size:1.5rem; color:#fff; transition:letter-spacing .4s var(--ease); }
.is-rtl .cat-tile:hover .cat-tile__name { letter-spacing:.06em; }

/* collection banners */
.coll-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.coll-card { position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
    padding:1.8rem; color:#fff; background:linear-gradient(to top, rgba(30,49,41,.82), rgba(30,49,41,.15)); }
.coll-card::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,var(--stone),var(--camel)); z-index:-1; }
.coll-card:nth-child(2)::before { background:linear-gradient(160deg,var(--pine-l),var(--ink)); }
.coll-card:nth-child(3)::before { background:linear-gradient(160deg,var(--camel),#7A6A4A); }
.coll-card h3 { color:#fff; font-size:1.6rem; }
.coll-card p { color:rgba(255,255,255,.85); font-size:.92rem; }

/* ── Value props ──────────────────────────────────────────────────────────── */
.value-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.value-row .v i { font-size:1.5rem; color:var(--camel-d); }
.value-row .v h4 { font-size:1.15rem; margin:.8rem 0 .3rem; }
.value-row .v p { color:var(--muted); font-size:.92rem; margin:0; }

/* ── Shop layout ──────────────────────────────────────────────────────────── */
.shop-layout { display:grid; grid-template-columns:240px 1fr; gap:2.5rem; align-items:start; }
.filters { position:sticky; top:100px; }
.filters h4 { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:.7rem; margin:1.4rem 0 .8rem; }
.is-rtl .filters h4 { letter-spacing:0; }
.filters a, .filters label { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; color:var(--ink-2); font-size:.92rem; cursor:pointer; }
.filters a.active { color:var(--pine); font-weight:700; }
.filters a:hover { color:var(--pine); }
.fil-swatch { width:15px; height:15px; border-radius:50%; border:1px solid var(--line-2); }
.fil-colors, .fil-sizes { display:flex; flex-wrap:wrap; gap:.5rem; }
.fil-sizes a { border:1px solid var(--line-2); border-radius:3px; padding:.25rem .7rem; font-size:.84rem; }
.fil-sizes a.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:.8rem; }
.shop-toolbar .count { color:var(--muted); font-size:.9rem; }
.sort-select { border:1px solid var(--line-2); border-radius:var(--r); padding:.55em 1em; font-family:inherit; background:#fff; color:var(--ink); }
.filter-toggle { display:none; }

/* ── Product detail ───────────────────────────────────────────────────────── */
.pdp { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start; }
.gallery { display:grid; grid-template-columns:72px 1fr; gap:1rem; }
.gallery__thumbs { display:flex; flex-direction:column; gap:.6rem; }
.gallery__thumbs img { width:72px; height:90px; object-fit:cover; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; opacity:.6; transition:opacity .2s; }
.gallery__thumbs img.active, .gallery__thumbs img:hover { opacity:1; border-color:var(--ink); }
.gallery__main { aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--stone); }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.pdp-info { position:sticky; top:100px; }
.pdp-info .cat { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.is-rtl .pdp-info .cat { letter-spacing:0; }
.pdp-info h1 { font-size:clamp(1.9rem,3.5vw,2.8rem); margin:.4rem 0 .3rem; font-weight:500; }
.pdp-info .subtitle { color:var(--ink-2); font-size:1.05rem; }
.pdp-price { font-size:1.5rem; font-weight:600; margin:1.2rem 0; color:var(--ink); }
.pdp-price .old { color:var(--muted); text-decoration:line-through; margin-inline-start:.6rem; font-size:1.1rem; font-weight:400; }
.pdp-price .now { color:var(--sale); }
.opt-group { margin:1.4rem 0; }
.opt-group .lbl { display:flex; justify-content:space-between; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:.7rem; }
.is-rtl .opt-group .lbl { letter-spacing:0; }
.opt-group .lbl a { color:var(--camel-d); text-transform:none; letter-spacing:0; }
.swatches { display:flex; gap:.6rem; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--line-2); cursor:pointer; position:relative; }
.swatch.active { border-color:#fff; box-shadow:0 0 0 2px var(--ink); }
.sizes { display:flex; gap:.5rem; flex-wrap:wrap; }
.size-opt { min-width:48px; text-align:center; border:1px solid var(--line-2); border-radius:var(--r); padding:.6em .9em; cursor:pointer; font-size:.9rem; background:#fff; transition:all .2s; }
.size-opt:hover { border-color:var(--ink); }
.size-opt.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.size-opt.disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.qty-row { display:flex; align-items:center; gap:1rem; margin:1.4rem 0; }
.qty-box { display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r); }
.qty-box button { width:40px; height:44px; background:none; border:0; font-size:1.1rem; cursor:pointer; color:var(--ink); }
.qty-box input { width:44px; text-align:center; border:0; font-family:inherit; font-size:1rem; background:none; }
.stock-line { font-size:.86rem; color:var(--muted); margin-bottom:1rem; }
.stock-line.low { color:var(--sale); }
.pdp-accordion { border-top:1px solid var(--line); margin-top:1.8rem; }
.pdp-accordion details { border-bottom:1px solid var(--line); }
.pdp-accordion summary { padding:1rem 0; cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
.pdp-accordion summary::-webkit-details-marker { display:none; }
.pdp-accordion summary::after { content:'+'; color:var(--camel-d); }
.pdp-accordion details[open] summary::after { content:'–'; }
.pdp-accordion .acc-body { padding-bottom:1rem; color:var(--ink-2); }

/* ── Cart ─────────────────────────────────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1.6fr .9fr; gap:2.5rem; align-items:start; }
.cart-item { display:grid; grid-template-columns:96px 1fr auto; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-item img { width:96px; height:120px; object-fit:cover; border-radius:var(--r); background:var(--stone); }
.cart-item h3 { font-size:1.15rem; margin:0 0 .3rem; }
.cart-item .meta { color:var(--muted); font-size:.88rem; }
.cart-summary { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; position:sticky; top:100px; }
.cart-summary .row { display:flex; justify-content:space-between; padding:.6rem 0; }
.cart-summary .total { border-top:1px solid var(--line); margin-top:.6rem; padding-top:1rem; font-size:1.3rem; font-weight:600; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.6rem); }
.field { margin-bottom:1.2rem; }
.field label { display:block; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.45rem; font-weight:600; }
.is-rtl .field label { letter-spacing:0; text-transform:none; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line-2); border-radius:var(--r); padding:.8em 1em; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--cream-2); transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--pine); background:#fff; }
.field textarea { min-height:120px; resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.alert { padding:1rem 1.2rem; border-radius:var(--r); margin-bottom:1.4rem; font-weight:500; }
.alert-success { background:#E9F1EA; color:#2E5A3F; border:1px solid #C6DDCB; }

/* ── Page hero (inner) ────────────────────────────────────────────────────── */
.page-hero { text-align:center; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem); }
.page-hero h1 { font-size:clamp(2rem,4.5vw,3.2rem); font-weight:500; }
.page-hero p { color:var(--muted); max-width:52ch; margin:0 auto; }
.breadcrumb { display:flex; gap:.5rem; justify-content:center; color:var(--muted); font-size:.82rem; margin-bottom:1rem; }
.breadcrumb a:hover { color:var(--pine); }

/* ── Newsletter band ──────────────────────────────────────────────────────── */
.nl-band { text-align:center; }
.nl-form { display:flex; gap:.6rem; max-width:440px; margin:1.6rem auto 0; }
.nl-form input { flex:1; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; border-radius:var(--r); padding:.9em 1.2em; font-family:inherit; }
.nl-form input::placeholder { color:rgba(255,255,255,.6); }
.bg-pine .nl-ok { background:rgba(255,255,255,.14); color:#fff; padding:.7rem 1.2rem; border-radius:var(--r); display:inline-block; margin-bottom:1rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background:var(--pine-d); color:rgba(247,243,236,.72); margin-top:4rem; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; padding:3.5rem 0 2.5rem; }
.footer-col h4 { color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem; }
.is-rtl .footer-col h4 { letter-spacing:0; }
.footer-col a { display:block; padding:.3rem 0; color:rgba(247,243,236,.72); font-size:.92rem; }
.footer-col a:hover { color:var(--camel); }
.footer-brand p { margin-top:1rem; max-width:32ch; font-size:.92rem; }
.social { display:flex; gap:.6rem; margin-top:1.2rem; }
.social a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; color:#fff; }
.social a:hover { background:var(--camel); border-color:var(--camel); color:var(--pine-d); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:1.3rem 0; font-size:.82rem; }
.footer-bottom .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.footer-bottom a { color:var(--camel); }

.wa-float { position:fixed; bottom:22px; inset-inline-end:22px; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:1.5rem; box-shadow:0 10px 26px -8px rgba(37,211,102,.6); z-index:90; }
.wa-float:hover { transform:scale(1.08); color:#fff; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:992px){
    .pdp{grid-template-columns:1fr; gap:2rem} .pdp-info{position:static}
    .cart-layout{grid-template-columns:1fr} .cart-summary{position:static}
    .footer-top{grid-template-columns:1fr 1fr}
    .shop-layout{grid-template-columns:1fr}
    .filters{position:fixed; inset-block:0; inset-inline-start:-320px; width:300px; background:var(--cream); z-index:1200; padding:1.5rem; overflow:auto; transition:inset-inline-start .3s var(--ease); box-shadow:var(--shadow)}
    .filters.open{inset-inline-start:0}
    .filter-toggle{display:inline-flex}
}
@media (max-width:768px){
    .main-nav{display:none} .nav-toggle{display:flex}
    .header-inner{grid-template-columns:auto 1fr auto} .brand{justify-self:start}
    .site-header .brand-logo{height:50px}
    .icon-link .lbl{display:none}
    .hero-figure{display:none}
    .value-row{grid-template-columns:repeat(2,1fr); gap:2rem}
    .cat-grid,.coll-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
    .product-grid{grid-template-columns:repeat(2,1fr); gap:1.2rem .9rem}
    .field-row{grid-template-columns:1fr} .nl-form{flex-direction:column}
    .cart-item{grid-template-columns:72px 1fr} .cart-item img{width:72px;height:90px}
    .gallery{grid-template-columns:1fr} .gallery__thumbs{flex-direction:row; order:2}
    .footer-top{grid-template-columns:1fr}
}