:root{
    --ezze:#E8511F; --ezze-deep:#C23E12;
    --ink:#17120F; --ink-2:#5A524B;
    --paper:#FFFFFF; --sand:#F4EDE4; --sand-2:#EBE1D4;
    --line:#E5DBCF;
    --disp:'Space Grotesk', system-ui, sans-serif;
    --body:'Inter', system-ui, sans-serif;
    --mw:1440px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  /* padding-inline, not the padding shorthand: a .wrap also carrying a layout
     class (.contactgrid, .store, .cartlayout …) declares its own top and
     bottom padding, and a shorthand here — which the mobile overrides below
     repeat — silently reset it to zero. That is what put the contact form
     against the divider and the map against the footer on a phone. */
  .wrap{max-width:var(--mw);margin:0 auto;padding-inline:28px}
  h1,h2,h3,h4{font-family:var(--disp);font-weight:500;margin:0;line-height:1.02;letter-spacing:-.015em}
  .eyebrow{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ezze)}
  .muted{color:var(--ink-2)}
  .ic{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:13.5px;
    letter-spacing:.02em;padding:14px 26px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.2s}
  .btn.btn-fill{background:var(--ezze);color:#fff}.btn.btn-fill:hover{background:var(--ezze-deep);color:#fff}
  .btn.btn-line{border-color:currentColor;background:transparent}.btn.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn.btn-light{background:#fff;color:var(--ink)}.btn.btn-light:hover{background:var(--sand-2);color:var(--ink)}
  /* Hover lift and shadow on top of each variant's colour shift, plus a
     pressed state so a click feels answered. Keyboard users get a visible
     focus ring, which the colour change alone never gave them. */
  .btn:hover{box-shadow:0 6px 18px rgba(23,18,15,.16);transform:translateY(-1px)}
  .btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(23,18,15,.14)}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
  .arrow{width:15px;height:15px}

  /* header */
  header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;height:78px;gap:30px;position:relative}
  .brand{cursor:pointer;display:flex;align-items:center}
  .brand img{height:34px;width:auto}
  .menu{display:flex;gap:30px;margin:0 auto;font-weight:600;font-size:14px}
  .menu a{cursor:pointer;position:relative;padding:4px 0}
  .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--ezze);transition:.22s}
  .menu a:hover::after{width:100%}
  .tools{display:flex;align-items:center;gap:22px;color:var(--ink)}
  /* Australian flag beside the logo. Icon only, and not a control. */
  .t-flag{display:inline-flex;align-items:center;cursor:default;flex:0 0 auto}
  .ic-flag{width:50px;height:25px;border-radius:3px;display:block;flex:0 0 auto}
  .tools span{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
  .cartn{background:var(--ink);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}
  .burger{display:none}
  @media(max-width:1024px){.menu{display:none}.burger{display:inline-flex}.tools .tlabel{display:none}}

  .page{display:none}.page.active{display:block;animation:fade .45s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* ===== HERO: full-bleed YT video ===== */
  .hero{position:relative;height:92vh;min-height:560px;overflow:hidden;background:#17120F}
  .herovid{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,#2a1c14 0%,#7a2e12 58%,#E8511F 130%)}
  .herovid iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);pointer-events:none;border:0;z-index:1;opacity:0;transition:opacity .8s ease}
  .herovid iframe.on{opacity:1}
  .heroposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#2a211c}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(23,18,15,.72) 0%,rgba(23,18,15,.4) 45%,rgba(23,18,15,.12) 100%)}
  .hero .wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center}
  .hero h1{color:#fff;font-size:clamp(46px,8vw,108px);font-weight:400;max-width:14ch}
  .hero h1 em{color:var(--ezze)}
  .hero .sub{color:rgba(255,255,255,.85);font-size:18px;max-width:440px;margin:22px 0 26px}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap}
  /* vertical category index on right */
  .heroindex{position:absolute;z-index:3;right:28px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:right}
  .heroindex a{cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;letter-spacing:.04em;padding:7px 0;display:flex;justify-content:flex-end;gap:12px;align-items:baseline;transition:.18s}
  .heroindex a b{font-family:var(--disp);font-weight:500;color:rgba(255,255,255,.4);font-size:12px}
  .heroindex a:hover{color:#fff}.heroindex a:hover b{color:var(--ezze)}
  @media(max-width:920px){.heroindex{display:none}}

  /* marquee */
  .marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .marquee div{display:inline-block;animation:scroll 26s linear infinite;font-size:13px;letter-spacing:.04em;font-weight:600}
  .marquee b{color:var(--ezze);margin:0 8px}
  .marquee span{margin:0 30px;opacity:.85}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* section base */
  .sec{padding:104px 0}
  .sec.s-sand{background:var(--sand)}
  .lead{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;max-width:18ch}

  /* ===== CATEGORY INDEX (signature, hover-swap) ===== */
  .indexrow{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:start}
  @media(max-width:920px){.indexrow{grid-template-columns:1fr;gap:0}}
  .indexlist{border-top:1px solid var(--line)}
  .ix{display:flex;align-items:baseline;gap:20px;padding:26px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:.25s}
  .ix .no{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink-2);width:34px}
  .ix h3{font-size:clamp(30px,4.4vw,52px);font-weight:400;flex:1;transition:.25s;color:var(--ink)}
  .ix .cnt{font-size:13px;color:var(--ink-2);font-weight:600}
  .ix:hover{padding-left:18px}
  .ix:hover h3{color:var(--ezze)}
  .indexvis{position:sticky;top:100px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--sand-2)}
  .indexvis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:.6s;transform:scale(1.04)}
  .indexvis img.show{opacity:1;transform:scale(1)}
  @media(max-width:920px){.indexvis{display:none}}

  /* ===== collections rail ===== */
  .collband{background:var(--ink);color:#fff}
  .collband .lead{color:#fff}
  .rail{display:flex;gap:30px;overflow-x:auto;padding:34px 24px 30px;scroll-snap-type:x mandatory;scroll-padding-left:24px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .collchip{flex:0 0 auto;scroll-snap-align:start;text-align:center;cursor:pointer;
    display:block;text-decoration:none;color:inherit}
  .collchip .ring{width:150px;height:150px;border-radius:50%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .3s,box-shadow .3s}
  .collchip .ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity}
  .collchip:hover .ring{transform:translateY(-6px);box-shadow:inset 0 0 0 3px var(--ezze)}
  .collchip:hover .ring img{transform:scale(1.07)}
  .collchip .ring img{transition:transform .4s ease}
  .collchip b{display:block;font-family:var(--disp);font-weight:500;font-size:18px;margin-top:18px}
  .collchip span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}

  /* ===== featured (asymmetric) ===== */
  .feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
  @media(max-width:920px){.feature{grid-template-columns:1fr}}
  .feature .fimg{position:relative;min-height:520px;overflow:hidden}
  .feature .fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .feature .ftext{background:var(--sand);padding:64px 60px;display:flex;flex-direction:column;justify-content:center}
  .feature .ftext h2{font-size:clamp(32px,4vw,56px);font-weight:400;margin:14px 0}
  .feature .ftext p{color:var(--ink-2);max-width:42ch;margin:0 0 26px}
  .feature .price{font-family:var(--disp);font-size:26px;margin-bottom:24px}

  /* ===== product rail ===== */
  .headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
  .prail{display:flex;gap:24px;overflow-x:auto;padding:14px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .prail::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 calc((100% - 96px)/5);scroll-snap-align:start}
  @media(max-width:1240px){.pcard{flex:0 0 calc((100% - 72px)/4)}}
  @media(max-width:1000px){.pcard{flex:0 0 calc((100% - 48px)/3)}}
  @media(max-width:680px){.pcard{flex:0 0 calc((100% - 24px)/2)}}
  @media(max-width:480px){.rail{gap:14px;padding:26px 16px 22px}.pcard{flex:0 0 calc((100% - 14px)/2)}}
  .pcard,.gcard{cursor:pointer;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .pcard:hover,.gcard:hover{transform:translateY(-4px);border-color:var(--ezze)}
  .pcard .ph,.gcard .ph{aspect-ratio:1/1;overflow:hidden;background:var(--sand);position:relative}
  .pcard .ph img,.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
  .pcard:hover .ph img,.gcard:hover .ph img{transform:scale(1.07)}
  .pcard .ph::after,.gcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(23,18,15,.10));opacity:0;transition:.3s}
  .pcard:hover .ph::after,.gcard:hover .ph::after{opacity:1}
  .pcard .badge,.gcard .badge{position:absolute;top:14px;left:14px;background:var(--ezze);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:3px;z-index:2}
  .pcard .badge.alt,.gcard .badge.alt{background:#fff;color:var(--ink)}
  .pcard .meta,.gcard .meta{padding:14px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
  .pcard .kick,.gcard .kick{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ezze);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard h4,.gcard h4{font-family:var(--disp);font-weight:500;font-size:16px;letter-spacing:-.01em;margin:1px 0 0;line-height:1.2;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;color:var(--ink)}
  .dots{display:flex;gap:6px;margin:4px 0 2px}
  .dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
  .dots .more{font-size:11px;color:var(--ink-2);font-weight:600;margin-left:2px;align-self:center}
  .prow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);min-width:0}
  .pcard .pr,.gcard .pr{font-family:var(--disp);font-size:18px;font-weight:500;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.2}
  .pcard .pr .now,.gcard .pr .now{white-space:nowrap}
  .pcard .pr .was,.gcard .pr .was{order:2;margin-right:0;font-size:12.5px;white-space:nowrap;font-family:var(--body);font-weight:600}
  .pcard .pr small,.gcard .pr small{font-size:12px;color:var(--ink-2);font-weight:600;font-family:var(--body)}
  .addbtn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:.2s;flex:0 0 auto}
  .addbtn svg{width:18px;height:18px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round}
  .addbtn:hover{background:var(--ezze);transform:rotate(90deg)}

  /* grid variant for category/related */
  .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding-top:6px}
  .relgrid{grid-template-columns:repeat(5,1fr);gap:20px}
  @media(max-width:1240px){.relgrid{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:1000px){.relgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){.relgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:900px){.relgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:1240px){.grid{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){.grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:14px}}
  .gcard{cursor:pointer}

  /* story */
  .story{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  @media(max-width:920px){.story{grid-template-columns:1fr;gap:40px}}
  .story .imgs{position:relative;height:480px}
  .story .imgs img{position:absolute;border-radius:3px;object-fit:cover}
  .story .imgs img:nth-child(1){width:66%;height:78%;top:0;left:0}
  .story .imgs img:nth-child(2){width:52%;height:58%;right:0;bottom:0;border:8px solid #fff}
  .story h2{font-size:clamp(30px,4vw,50px);font-weight:400;margin:14px 0 18px}
  .story p{color:var(--ink-2);margin:0 0 16px;max-width:46ch}

  /* big quote */
  .bigq{text-align:center;max-width:900px;margin:0 auto}
  .bigq .stars{color:var(--ezze);letter-spacing:5px;font-size:15px;margin-bottom:22px}
  .bigq blockquote{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.25;margin:0;letter-spacing:-.02em}
  .bigq .by{margin-top:26px;font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
  .bigq .by b{color:var(--ink)}

  /* footer */
  footer{background:var(--ink);color:#bdb4ab;padding:84px 0 30px}
  footer .frow{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:36px}
  @media(max-width:920px){footer .frow{grid-template-columns:1fr 1fr;gap:30px 24px}footer .frow>div:first-child{grid-column:1 / -1}}
  @media(max-width:560px){footer{padding:56px 0 26px}footer .frow{grid-template-columns:1fr;gap:30px}footer .news{flex-direction:column}footer .news input{width:100%}footer .news .btn{width:100%;justify-content:center}.fbottom{flex-direction:column;gap:8px}}
  footer .flogobox{display:inline-block;background:#fff;padding:9px 14px;border-radius:9px;margin-bottom:18px}
  footer img.flogo{height:30px;display:block}
  footer h5{color:#fff;font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px}
  footer a{display:block;padding:5px 0;font-size:14px;color:#bdb4ab}footer a:hover{color:#fff}
  /* Showroom block: address, hours and contact as one readable group. */
  footer .fstore-head{margin-top:30px}
  footer .fstore{font-style:normal;font-size:14px;line-height:1.6;display:grid;gap:8px}
  footer .fstore a{display:inline-block;padding:0}
  footer .fstore-hours{color:#a29a92}
  footer .news{display:flex;gap:8px;margin-top:12px}
  footer .news input{flex:1;padding:12px 14px;border-radius:2px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body)}
  .fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8a827a}

  /* ===== CATEGORY PAGE ===== */
  .pagehead{padding:54px 0 30px;border-bottom:1px solid var(--line)}
  .crumbs{font-size:12.5px;color:var(--ink-2);margin-bottom:18px;letter-spacing:.02em}
  .crumbs a{cursor:pointer}.crumbs a:hover{color:var(--ezze)}
  .pagehead h1{font-size:clamp(38px,6vw,72px);font-weight:400}
  .pagehead h1 em{color:var(--ezze)}
  .filterbar{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:16px 0}
  .filterbar .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .fchips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:2px;padding:8px 14px;cursor:pointer;transition:.16s;white-space:nowrap}
  .chip:hover,.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  /* Subcategory tabs under a category title. On a wide screen they wrap, so
     all of them are in view — Housewares has over twenty. On a phone they
     stay on one line and scroll, with a scrollbar to show there is more. */
  .subtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
  @media(max-width:760px){
    .subtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
    .subtabs::-webkit-scrollbar{height:4px}
    .subtabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  }
  .subtab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 15px;white-space:nowrap;transition:.16s}
  .subtab small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
  .subtab:hover{border-color:var(--ink)}
  .subtab.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .subtab.on small{color:rgba(255,255,255,.65)}
  /* Picture tiles for a category with many subcategories: one row that
     scrolls, with arrows on a wide screen and a swipe on a phone. */
  .subtiles{position:relative;margin-top:24px}
  .subtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
  .subtrack::-webkit-scrollbar{display:none}
  .subtile{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;color:var(--ink)}
  .stimg{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--sand);border:1px solid var(--line);margin-bottom:6px}
  .stimg img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  .subtile:hover .stimg img{transform:scale(1.06)}
  .subtile:hover .stname{color:var(--ezze)}
  .stname{font-size:13.5px;font-weight:600;line-height:1.3}
  .subtile small{font-size:12px;color:var(--ink-2)}
  .starrow{position:absolute;top:47px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(23,18,15,.12)}
  .starrow[hidden]{display:none}
  .starrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .starrow:hover{border-color:var(--ink)}
  .starrow.prev{left:-12px}
  .starrow.next{right:-12px}
  @media(max-width:760px){
    .subtile{flex-basis:96px}
    .stname{font-size:12.5px}
    .starrow{display:none}
    .starrow[hidden]{display:none}
  }
  /* The filter bar on a category page: one line, sort at the end. */
  .fbrow2.fbrow-solo{margin-top:0;padding-top:0;border-top:0}
  .fsort{margin-left:auto}
  .fbrow-solo .instock{margin-left:auto}
  .fbrow-solo .fsort{margin-left:0}
  .fdivide{width:1px;height:24px;background:var(--line)}
  .fswatch{display:flex;gap:9px}
  .fsw{width:26px;height:26px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.15s}
  .fsw:hover{transform:scale(1.15)}
  .sortsel{margin-left:auto;border:1px solid var(--line);border-radius:2px;padding:9px 14px;font-family:var(--body);font-size:13px;background:#fff}
  .catwrap{padding:36px 0 100px}
  .catcount{font-size:13px;color:var(--ink-2);margin-bottom:26px}

  /* ===== PRODUCT PAGE ===== */
  .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;padding:34px 0 60px}
  @media(max-width:920px){.pdp{grid-template-columns:1fr;gap:30px}.buybar{position:static!important}}
  .gallery{position:sticky;top:100px;align-self:start}
  .gmain{aspect-ratio:1/1;overflow:hidden;background:var(--sand);border-radius:3px}
  .gmain img{width:100%;height:100%;object-fit:cover}
  .gthumbs{display:flex;gap:12px;margin-top:14px}
  .gthumbs img{width:88px;height:88px;object-fit:cover;border-radius:3px;border:1.5px solid var(--line);cursor:pointer;transition:.15s}
  .gthumbs img.sel,.gthumbs img:hover{border-color:var(--ezze)}
  .info .kick{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ezze);font-weight:700}
  .info h1{font-size:clamp(30px,4vw,46px);font-weight:400;margin:14px 0 16px}
  .info .rate{font-size:13px;color:var(--ink-2)}.info .rate .s{color:var(--ezze);letter-spacing:1px;margin-right:8px}
  .info .pr{font-family:var(--disp);font-size:34px;margin:20px 0 8px}
  .stock{font-size:13px;color:#2e7d32;font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .stock::before{content:"";width:8px;height:8px;border-radius:50%;background:#3aaf4a}
  .spec{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
  .spec td{padding:12px 0;border-bottom:1px solid var(--line)}
  .spec td:first-child{color:var(--ink-2);width:40%}
  .vlabel{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:22px 0 12px}
  .vswatch{display:flex;flex-wrap:wrap;gap:11px}
  .vsw{width:34px;height:34px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.15s}
  .vsw:hover{transform:scale(1.12)}
  .buybar{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:18px 0;margin-top:28px;display:flex;gap:14px;align-items:center;z-index:30}
  .qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:2px}
  .qty button{border:0;background:#fff;width:44px;height:48px;font-size:18px;cursor:pointer}
  .qty span{width:42px;text-align:center;font-weight:600}
  /* Product highlights: short selling points, scanned before the description. */
  .pdhighlights{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
  .pdhighlights li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.45;color:var(--ink)}
  .pdhighlights svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;
    stroke:var(--ezze);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .rvempty{color:var(--ink-2);font-size:15px;margin:6px 0 0}
  .pdesc{padding:46px 0 0}
  /* Product detail panels: description, features, specs and delivery as
     collapsible sections instead of one long column. <details> handles the
     open/close itself, so this works with JavaScript off and is keyboard
     accessible without any extra markup. */
  .pdpanels{max-width:860px;border-top:1px solid var(--line)}
  .pdpanel{border-bottom:1px solid var(--line)}
  .pdpanel>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:22px 2px;cursor:pointer;list-style:none;font-family:var(--disp);
    font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--ink);transition:color .15s}
  .pdpanel>summary::-webkit-details-marker{display:none}
  .pdpanel>summary:hover{color:var(--ezze)}
  .pdpanel>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
  .pdpanel>summary svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:2;
    fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  .pdpanel[open]>summary svg{transform:rotate(180deg)}
  .pdpanel-in{padding:0 2px 26px}
  .pdfeatures{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .pdfeatures li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--ink)}
  .pdfeatures li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
    border-radius:50%;background:var(--ezze)}
  .pdfeatures a{color:var(--ezze);text-decoration:underline}
  .spectable{width:100%;border-collapse:collapse;font-size:15px}
  .spectable th,.spectable td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
  .spectable th{width:38%;font-weight:600;color:var(--ink-2)}
  .spectable td{color:var(--ink)}
  @media(prefers-reduced-motion:reduce){.pdpanel>summary svg{transition:none}}
  .pdintro{max-width:680px}
  .pdintro h2{font-size:clamp(28px,3.4vw,40px);font-weight:400;margin:12px 0 14px}
  .pdintro p{color:var(--ink-2);font-size:16px;margin:0}
  /* Imported product copy: arbitrary HTML from the catalogue, so style by tag. */
  /* Body copy, not a caption: full ink so a long description stays readable. */
  .pdbody{max-width:760px;color:var(--ink);font-size:16px;line-height:1.75;margin-top:14px}
  .pdbody p{margin:0 0 14px}
  .pdbody h2,.pdbody h3,.pdbody h4{color:var(--ink);font-weight:600;margin:26px 0 10px;line-height:1.3}
  .pdbody h2{font-size:22px}.pdbody h3{font-size:19px}.pdbody h4{font-size:17px}
  .pdbody ul,.pdbody ol{margin:0 0 16px;padding-left:22px}
  .pdbody li{margin:0 0 7px}
  .pdbody a{color:var(--ezze);text-decoration:underline}
  .pdbody img{max-width:100%;height:auto;border-radius:10px}
  .pdbody table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:15px;display:block;overflow-x:auto}
  .pdbody th,.pdbody td{border:1px solid var(--line);padding:9px 12px;text-align:left}
  .pdbody th{background:var(--sand);font-weight:600;color:var(--ink)}
  .highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0}
  @media(max-width:760px){.highlights{grid-template-columns:1fr 1fr}}
  .hl{background:var(--sand);border-radius:14px;padding:22px}
  .hlic{width:42px;height:42px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .hlic svg{width:21px;height:21px;stroke:var(--ezze);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .hl h4{font-family:var(--disp);font-weight:500;font-size:17px;margin:0 0 6px}
  .hl p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.45}
  .pdsplit{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:6px}
  @media(max-width:760px){.pdsplit{grid-template-columns:1fr;gap:26px}}
  .lifeshot2{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
  .lifeshot2 img{width:100%;height:100%;object-fit:cover}
  .included h3{font-family:var(--disp);font-weight:500;font-size:25px;margin:0 0 16px}
  .incl{list-style:none;padding:0;margin:0}
  .incl li{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid var(--line)}
  .incl li:first-child{padding-top:0}
  .incl li b{font-weight:600;font-size:15px}
  .incl li span{font-size:13px;color:var(--ink-2);margin-top:3px}

  @media(max-width:760px){
    .wrap{padding-inline:20px}
    .sec{padding:66px 0}
    .nav{gap:14px;height:66px}
    .brand img{height:30px}
    header.site{}
    .hero{height:84vh;min-height:520px}
    .feature .fimg{min-height:330px}
    .feature .ftext{padding:46px 26px}
    .story .imgs{height:330px}
    .filterbar{top:66px}
    .filterbar .wrap{gap:12px}
    .filterbar .sortsel{margin-left:0}
    .pagehead{padding:40px 0 24px}
    .gallery,.indexvis{position:static}
  }
  /* ===== mega menu ===== */
  .menu{display:flex;gap:2px;margin:0 auto;font-weight:600;font-size:14px}
  .mitem{position:static}
  .mitem>a{cursor:pointer;display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:4px;transition:.15s}
  .mitem>a:hover{color:var(--ezze)}
  /* Offers earns the accent: it is the one nav entry meant to catch the eye. */
  .mitem>a.mitem-offer{color:var(--ezze);font-weight:700}
  .mitem>a.mitem-offer:hover{color:var(--ezze-deep)}
  .mitem>a svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.4;fill:none;opacity:.45;transition:.2s}
  .has-mega:hover>a svg{transform:rotate(180deg);opacity:.8}
  .mega{position:absolute;left:50%;top:100%;background:#fff;border:1px solid var(--line);border-top:2px solid var(--ezze);
    box-shadow:0 30px 54px rgba(23,18,15,.16);padding:32px 40px;opacity:0;visibility:hidden;transform:translate(-50%,7px);transition:.18s;z-index:55;border-radius:0 0 14px 14px;max-width:calc(100vw - 40px)}
  .has-mega:hover .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
  /* Account dropdown (desktop hover / keyboard focus) — matches the mega panel */
  .t-acct{position:relative}
  .t-acct .acctmenu{position:absolute;top:100%;right:0;margin-top:6px;min-width:212px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--ezze);
    box-shadow:0 30px 54px rgba(23,18,15,.16);border-radius:0 0 14px 14px;padding:14px 0 8px;opacity:0;visibility:hidden;transform:translateY(7px);transition:.18s;z-index:70;text-align:left;cursor:default}
  .t-acct .acctmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .t-acct.signed:hover .acctmenu,.t-acct.signed:focus-within .acctmenu{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.15s}
  .acctmenu-head{padding:0 18px 10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .acctmenu-head b{display:block;font-size:13.5px;color:var(--ink)}
  .acctmenu-head span{display:block;font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
  .acctmenu a{display:block;padding:7px 18px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:.12s}
  .acctmenu a:hover{color:var(--ezze);background:var(--sand)}
  .acctmenu a.acctmenu-out{margin-top:6px;border-top:1px solid var(--line);padding-top:10px;color:var(--ink-2)}
  @media(hover:none){.t-acct .acctmenu{display:none}}
  .megagrid{display:flex;gap:34px;align-items:stretch}
  /* Sized by what's in it, up to three columns wide. A fixed width made every
     drop-down as wide as the biggest one, so Outdoor's four links sat in a
     panel wide enough for Housewares' twenty-one and ran off the screen. */
  /* flex:0 0 auto so the featured image alongside can't squeeze the columns
     narrow enough to wrap two short groups onto separate rows. */
  .megacols{display:flex;flex-wrap:wrap;gap:22px 30px;max-width:510px;flex:0 0 auto;align-content:flex-start}
  .mgroup{width:150px}
  .mgh{font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:5px;cursor:pointer;transition:.14s}
  .mgh:hover{color:var(--ezze)}
  .mgh .chev{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;opacity:.5;flex:0 0 auto}
  .mgroup-w2{width:330px}
  .mgroup-w3{width:510px}
  .mglinks{display:flex;flex-direction:column}
  /* A long subcategory list flows across its group's columns instead of
     running down one of them; column-count needs a block box, not flex. */
  .mglinks.mgflow{display:block;column-gap:30px}
  .mgroup-w2 .mgflow{column-count:2}
  .mgroup-w3 .mgflow{column-count:3}
  .mglinks.mgflow a{break-inside:avoid}
  .mglinks a{display:block;padding:5px 0;font-size:13px;color:var(--ink-2);cursor:pointer;transition:.12s}
  .mglinks a:hover{color:var(--ezze);transform:translateX(3px)}
  .mbrands{flex:0 0 210px;border-left:1px solid var(--line);padding-left:30px}
  .mbrands .collinks{column-count:2;column-gap:18px;width:auto}
  .mbrands .collinks a{padding:5px 0}
  .mcol{flex:0 0 auto}
  .mcol h6{font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;font-weight:700}
  .mcol .links{display:flex;flex-direction:column;min-width:172px}
  .linkgrid{column-count:3;column-gap:36px;width:456px}
  @media(max-width:1180px){.mfeat{display:none}}
  .mega a.ml{display:block;padding:7px 10px 7px 0;font-size:13.5px;color:var(--ink);transition:.12s;cursor:pointer;break-inside:avoid}
  .mega a.ml:hover{color:var(--ezze);transform:translateX(4px)}
  .collinks{column-count:2;column-gap:34px;width:280px}
  .collinks a{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 0;font-size:13px;cursor:pointer;transition:.12s;break-inside:avoid}
  .collinks a:hover{color:var(--ezze)}
  .collinks i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);flex:0 0 auto}
  .mfeat{flex:0 0 230px;align-self:flex-start;border-radius:12px;overflow:hidden;position:relative;display:block;cursor:pointer}
  /* Square box matches the square we ask for on upload, so nothing is cropped. */
  .mfeat img{aspect-ratio:1/1;height:auto;width:100%;object-fit:cover;object-position:center;display:block;transition:.5s}.mfeat:hover img{transform:scale(1.05)}
  .mfeat span{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(23,18,15,.82));color:#fff;display:flex;flex-direction:column;gap:3px}
  .mfeat b{font-family:var(--disp);font-weight:600;font-size:18px}
  .mfeat span small{font-size:12px;opacity:.85}

  /* ===== mobile drawer ===== */
  .scrim{position:fixed;inset:0;background:rgba(23,18,15,.55);opacity:0;visibility:hidden;transition:.3s;z-index:110}
  .scrim.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(88vw,400px);background:#fff;z-index:120;
    transform:translateX(105%);transition:transform .32s ease,visibility .32s ease;overflow-y:auto;visibility:hidden;box-shadow:none}
  .drawer.open{transform:none;visibility:visible;box-shadow:-24px 0 60px rgba(0,0,0,.22)}
  .drawerhead{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
  .drawerhead img{height:26px}
  .drawerhead button{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
  .drawer details{border-bottom:1px solid var(--line)}
  .drawer summary{list-style:none;cursor:pointer;padding:17px 22px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center}
  .drawer summary::-webkit-details-marker{display:none}
  .drawer summary::after{content:"+";font-size:21px;color:var(--ezze);font-weight:400}
  .drawer details[open] summary::after{content:"\2013"}
  .drawer .dlinks{padding:0 22px 16px;display:flex;flex-direction:column}
  .drawer .dlinks a{padding:8px 0;font-size:14px;color:var(--ink-2);cursor:pointer}
  .drawer .dlinks a:hover{color:var(--ezze)}
  .drawer .dlinks a.dgroup{color:var(--ink);font-weight:600;padding-top:14px}
  .drawer .dlinks a.dsub{padding-left:14px;font-size:13.5px}
  .drawer .dtop{display:block;padding:17px 22px;font-weight:600;font-size:15.5px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ezze)}

  /* ===== offer banner ===== */
  .offerwrap{padding:84px 0}
  /* One slider holding every offer: each slide carries its own picture and
     words, and only the visible one takes part in the layout. */
  /* Every slide sits in the same grid cell, so the banner is one height for
     all of them — the tallest slide's — rather than each being its own size
     or long wording being cut off. */
  /* A 3:1 strip — about 460px tall at full width. 16:9 was the shape of the
     pictures but stood 770px tall, nearly a whole screen. Pictures are cropped
     to 3:1 on upload to match, so a banner shows its picture whole. Content
     taller than the strip still pushes it out; the wording is never cut off. */
  /* One column, held to the banner's own width. Left to size itself the column
     took the widest thing in it — a line-clamped heading asks for its whole
     string on one line — so on a phone the slides grew past the banner and
     overflow:hidden sheared the right-hand side off every line. */
  .offer{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:400px;overflow:hidden;border-radius:20px;background:var(--ink)}
  /* An empty 5:2 item in the same cell as the slides: the cell takes the
     taller of the two, so the banner is the same shape as the pictures
     (1600 x 640) whenever the wording fits inside it, and grows instead of
     cutting a button off when it does not. Setting aspect-ratio on the
     banner itself would clip. */
  .offer::before{content:"";grid-area:1/1;width:100%;aspect-ratio:5/2;pointer-events:none}
  /* Slides move across rather than fading: the next one comes in from the
     right while the one leaving goes out to the left, and the other way
     round when stepping back. Only the two taking part are visible, so a
     waiting slide never sits over the banner catching clicks. */
  /* min-width:0 is what keeps the wording inside the banner. The headings are
     line-clamped with -webkit-box, and a -webkit-box asks for its whole string
     on one line as its minimum width; a grid or flex item won't shrink below
     that by default, so on a phone the slide grew past the banner and
     overflow:hidden sheared the right-hand side off every line. */
  .oslide{grid-area:1/1;min-width:0;position:relative;display:flex;align-items:center;visibility:hidden;transform:translateX(100%);transition:transform .5s cubic-bezier(.4,0,.2,1),visibility .5s}
  .oslide.on{visibility:visible;transform:translateX(0)}
  .oslide.out{visibility:visible;transform:translateX(-100%)}
  .offer.back .oslide{transform:translateX(-100%)}
  .offer.back .oslide.on{transform:translateX(0)}
  .offer.back .oslide.out{transform:translateX(100%)}
  .oslide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* Shade under the wording, heavy enough to hold white text over any
     picture. Lightening it made the headings hard to read. */
  .oslide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(23,18,15,.85) 0%,rgba(23,18,15,.55) 38%,rgba(23,18,15,.18) 66%,transparent 88%)}
  .offer .oc{position:relative;z-index:2;min-width:0;color:#fff;max-width:680px;padding:48px 56px}
  /* Controls */
  .oarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(23,18,15,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s}
  .oarrow svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .oarrow:hover{background:rgba(23,18,15,.6);border-color:#fff}
  /* Both arrows sit at the right, clear of the wording on the left. */
  .oarrow.prev{right:74px}
  .oarrow.next{right:18px}
  /* Indicators in one box, centred along the bottom. */
  .odots{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:4;display:flex;gap:9px;padding:9px 13px;border-radius:10px;background:rgba(23,18,15,.45)}
  .odot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:.18s}
  .odot.on{background:#fff}
  @media(prefers-reduced-motion:reduce){.oslide{transition:none}}
  /* The pictures sit inside the moving slide, so they travel with it. */
  .offer{isolation:isolate}
  /* A plain label, in the house eyebrow style — no pill, no tint. */
  .offer .tag{display:block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:16px}
  /* 52px at the heavier display weight, to carry the same as the headings in
     the sections above and below — 44px at book weight read as an
     afterthought beside them. 50 characters fill two lines at this size in
     this column, which is what admin allows; both the heading and the
     subtext are held to their line counts, so anything longer is cut rather
     than left to push the banner out of shape. */
  /* Three lines, not two: the 50 characters admin allows take three at 52px in
     this column, so a heading anywhere near the limit lost its last line. The
     banner has the room — three lines still sit inside the 5:2 shape, so it
     doesn't grow.
     The 3px of padding is for the descenders: at a line-height of 1.08 the
     line box is shorter than the letters, and the overflow:hidden that does
     the clamping was shaving the tails off g, p and y on the last line. */
  .offer h2{font-size:clamp(32px,3.8vw,52px);font-weight:500;color:#fff;line-height:1.08;padding-bottom:.12em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .offer h2 em{color:var(--ezze)}
  .offer p{color:rgba(255,255,255,.9);max-width:52ch;margin:18px 0 26px;font-size:16px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* On a phone the wording fills the width, so the arrows would sit on top of
     it: the dots and a swipe do the job instead. */
  /* On a phone 16:9 is too short for the wording, so it stands taller and the
     sides of the picture are trimmed instead. */
  /* The wording fills the width on a phone, so it gets a line more of room. */
  /* On a phone the column is about 287px, so the desktop floor of 32px left a
     heading of the 50 characters admin allows needing four lines against a
     clamp of three — the last line was simply cut. It steps down to 24px,
     where 50 characters fit in three, and rises back to 32px on a wider phone.
     The line-height also eases up a little: tight leading reads as cramped
     once three lines stack in a narrow column. */
  @media(max-width:760px){.offerwrap{padding:54px 0}.offer{min-height:380px}.offer::before{aspect-ratio:4/3}.offer h2{font-size:clamp(24px,6.4vw,32px);line-height:1.18}.offer p{font-size:15px;-webkit-line-clamp:3}.offer .oc{padding:34px 30px 64px}.oslide::after{background:linear-gradient(180deg,rgba(23,18,15,.5),rgba(23,18,15,.74))}.oarrow{display:none}.odots{bottom:18px}}

  /* deals pricing */
  .was{text-decoration:line-through;color:var(--ink-2);font-family:var(--body);font-size:13px;font-weight:600;margin-right:6px}
  /* A price with a struck-through one beside it is a sale price, so it carries
     the brand orange. Keyed off the "was" that precedes it in the markup, so
     a full-price product is never coloured as though it were reduced. */
  .was + .now{color:var(--ezze)}
  .badge.sale{background:var(--ezze)!important;color:#fff!important}

  /* ===== FAQ ===== */
  .faqlayout{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:start}
  @media(max-width:920px){.faqlayout{grid-template-columns:1fr;gap:36px}}
  .faqimg{position:sticky;top:100px;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
  .faqimg img{width:100%;height:100%;object-fit:cover}
  @media(max-width:920px){.faqimg{position:static;aspect-ratio:16/10;order:-1}}
  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:24px 4px;font-family:var(--disp);font-weight:500;font-size:clamp(18px,2.3vw,23px);display:flex;justify-content:space-between;gap:24px;align-items:center;letter-spacing:-.01em}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--ezze);font-size:26px;font-weight:300;flex:0 0 auto;transition:.2s}
  .faq details[open] summary::after{content:"\2013"}
  .faq p{padding:0 4px 26px;color:var(--ink-2);margin:0;max-width:74ch;font-size:15px}

  /* ===== payment row ===== */
  .payrow{display:flex;align-items:center;gap:18px;margin-top:48px;flex-wrap:wrap}
  .paylabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a827a;font-weight:700}
  .pays{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .paybadge{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;width:54px;height:32px;padding:5px 6px;box-sizing:border-box}
  .paybadge svg,.paybadge img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  .btn.is-busy{opacity:.75;pointer-events:none;position:relative}
  .payredirect{position:fixed;inset:0;z-index:300;background:rgba(23,18,15,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;animation:pmfade .25s ease}
  .payredirect-box{background:#fff;border-radius:16px;padding:34px 40px;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
  .payredirect-box b{font-size:16px}
  .payredirect-box span{font-size:13px;color:#6b625b}
  .payspin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ezze);animation:payspin .7s linear infinite;margin-bottom:8px}
  @keyframes payspin{to{transform:rotate(360deg)}}
  .pay{background:#fff;border-radius:5px;height:30px;padding:0 11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:-.01em;font-family:var(--body)}

  .railnav{display:flex;gap:8px}
  .railnav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.16s;color:var(--ink)}
  .railnav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .railnav button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .railright{display:flex;align-items:center;gap:14px}
  .collband .railnav button{border-color:rgba(255,255,255,.32);background:transparent;color:#fff}
  .collband .railnav button:hover{background:#fff;color:var(--ink);border-color:#fff}
  @media(max-width:680px){.railnav{display:none}}
  /* ===== testimonial slider ===== */
  .tslhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
  .tslview{overflow:hidden}
  .tsltrack{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
  .tslide{flex:0 0 100%;min-width:100%;text-align:center;padding:8px 6% 0}
  .tslide .stars{color:var(--ezze);letter-spacing:5px;font-size:15px;margin-bottom:20px}
  .tslide blockquote{font-family:var(--disp);font-weight:500;font-size:clamp(23px,3.3vw,38px);line-height:1.26;margin:0 auto;max-width:880px;letter-spacing:-.02em}
  .tslide .by{margin-top:24px;font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
  .tslide .by b{color:var(--ink)}
  .tsldots{display:flex;gap:8px;justify-content:center;margin-top:38px}
  .tsldots i{width:8px;height:8px;border-radius:999px;background:var(--line);cursor:pointer;transition:.25s}
  .tsldots i.on{background:var(--ezze);width:24px}

  /* ===== showroom ===== */
  .store{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
  @media(max-width:900px){.store{grid-template-columns:1fr;gap:32px}}
  .storeinfo h2{font-size:clamp(30px,4vw,50px);font-weight:500;margin:14px 0 14px}
  .storeinfo p{color:var(--ink-2);max-width:46ch;margin:0 0 22px}
  .storerow{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line)}
  .storerow .srk{flex:0 0 92px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;padding-top:3px}
  .storerow>div:last-child{font-size:15px;line-height:1.5}
  .storeinfo .btn{margin-top:22px}
  .storemap{border-radius:18px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);background:var(--sand-2)}
  .storemap iframe{width:100%;height:100%;border:0;display:block}
  @media(max-width:900px){.storemap{aspect-ratio:16/11}}

  /* ===== cart ===== */
  .cartlayout{display:grid;grid-template-columns:1fr 360px;gap:46px;padding:40px 0 96px;align-items:start}
  @media(max-width:900px){.cartlayout{grid-template-columns:1fr;gap:30px}}
  .citem{display:grid;grid-template-columns:92px 1fr auto auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
  .citem:first-child{padding-top:0}
  .cthumb{width:92px;height:92px;border-radius:10px;overflow:hidden;background:var(--sand)}
  .cthumb img{width:100%;height:100%;object-fit:cover}
  .cinfo .ckick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  .cinfo h4{font-family:var(--disp);font-weight:500;font-size:17px;margin:5px 0 4px}
  .cvar{font-size:12.5px;color:var(--ink-2);margin-bottom:8px}
  .clink{border:0;background:none;color:var(--ink-2);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0;font-family:var(--body)}
  .clink:hover{color:var(--ezze)}
  .cqty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px}
  .cqty button{border:0;background:none;width:34px;height:38px;font-size:16px;cursor:pointer}
  .cqty span{width:30px;text-align:center;font-weight:600;font-size:14px}
  .cprice{font-family:var(--disp);font-size:17px;min-width:92px;text-align:right}
  @media(max-width:560px){.citem{grid-template-columns:72px 1fr;grid-template-areas:'t i' 't q' 't p';gap:6px 14px}.cthumb{grid-area:t;width:72px;height:72px;align-self:start}.cinfo{grid-area:i}.cqty{grid-area:q;justify-self:start}.cprice{grid-area:p;text-align:left}}
  .cartaside,.coaside{background:var(--sand);border-radius:16px;padding:26px;position:sticky;top:100px}
  .cartaside h3,.coaside h3{font-family:var(--disp);font-weight:500;font-size:20px;margin:0 0 16px}
  .sline{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:8px 0;color:var(--ink-2)}
  .sline.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;color:var(--ink);font-weight:600;font-family:var(--disp)}
  .snote{font-size:12.5px;color:var(--ezze);background:rgba(232,81,31,.1);border-radius:8px;padding:9px 12px;margin:8px 0}
  .sgst{font-size:11.5px;color:var(--ink-2);margin-top:8px}
  .empty{text-align:center;padding:60px 10px;color:var(--ink-2);font-size:16px;line-height:1.9}

  /* ===== checkout ===== */
  .colayout{display:grid;grid-template-columns:1fr 380px;gap:50px;padding:36px 0 96px;align-items:start}
  @media(max-width:900px){.colayout{grid-template-columns:1fr;gap:30px}.coaside{order:-1}}
  .cofs{margin-bottom:36px}
  .cofs h3{font-family:var(--disp);font-weight:500;font-size:21px;margin:0 0 18px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fgrid label{display:flex;flex-direction:column;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);gap:6px;text-transform:uppercase}
  .fgrid label.full{grid-column:1 / -1}
  .fgrid .lab{display:block}
  .req{color:#d6361f;font-style:normal;font-weight:700;margin-left:3px}
  .paynote{font-size:13.5px;color:var(--ink-2);margin:0 0 20px;max-width:50ch;line-height:1.5}
  .fgrid input,.fgrid select{font-family:var(--body);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
  .fgrid input:focus,.fgrid select:focus{outline:none;border-color:var(--ezze)}
  .delopts{display:flex;flex-direction:column;gap:10px}
  .delopt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;cursor:pointer;transition:.15s}
  .delopt:has(input:checked){border-color:var(--ezze);background:rgba(232,81,31,.05)}
  .delopt input{accent-color:var(--ezze);width:18px;height:18px;flex:0 0 auto}
  .delopt>div{flex:1}.delopt b{display:block;font-size:14.5px}.delopt span{font-size:12.5px;color:var(--ink-2)}
  .delopt em{font-style:normal;font-weight:600;font-size:13px;white-space:nowrap}
  .securenote{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin-top:14px}
  .securenote svg{width:15px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:1.6}
  .coitems{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .coitem{display:flex;align-items:center;gap:12px}
  .coitem img{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#fff;flex:0 0 auto}
  .coitem>div{flex:1}.coi-n{font-size:13px;font-weight:600;line-height:1.3}.coi-q{font-size:12px;color:var(--ink-2)}
  .coi-p{font-size:13.5px;font-weight:600;font-family:var(--disp)}

  /* ===== confirmation ===== */
  .confwrap{max-width:620px;margin:0 auto;text-align:center;padding:84px 0 104px}
  .conftick{width:66px;height:66px;border-radius:50%;background:var(--ezze);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
  .conftick svg{width:30px;height:30px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .confwrap h1{font-size:clamp(30px,4.5vw,46px);font-weight:500;margin:12px 0}
  .confwrap p{color:var(--ink-2);font-size:16px}
  .confcard{background:var(--sand);border-radius:16px;padding:26px 28px;text-align:left;margin:32px 0}
  .confcard h3{font-family:var(--disp);font-weight:500;font-size:19px;margin:0 0 14px}
  .confcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* checkout stepper */
  .stepper{display:flex;margin-bottom:36px}
  .stp{flex:1;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-2);padding-bottom:16px;border-bottom:2px solid var(--line);transition:.2s}
  .stp .stpno{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto;transition:.2s}
  .stp.on{color:var(--ink);border-bottom-color:var(--ezze)}
  .stp.on .stpno,.stp.done .stpno{border-color:var(--ezze);background:var(--ezze);color:#fff}
  .stp.done{color:var(--ink);border-bottom-color:var(--ezze)}
  @media(max-width:560px){.stp{font-size:11px;gap:6px}.stp .stpno{width:22px;height:22px}}
  .costep h3{font-family:var(--disp);font-weight:500;font-size:22px;margin:0 0 20px}
  .costep h3:not(:first-of-type){margin-top:34px}
  .costepnav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
  /* review */
  .rvblk{display:grid;grid-template-columns:118px 1fr auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
  .rvblk:first-child{padding-top:0}
  .rvh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;padding-top:2px}
  .rvedit{border:0;background:none;color:var(--ezze);font-weight:600;font-size:12.5px;cursor:pointer;text-decoration:underline;font-family:var(--body)}
  .consentline{font-size:12.5px;color:var(--ink-2);margin:16px 0 0;line-height:1.55;text-align:center}
  .consentline a{color:var(--ezze);text-decoration:underline;font-weight:600}

  /* ===== auth ===== */
  .authwrap{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 116px)}
  @media(max-width:860px){.authwrap{grid-template-columns:1fr}.authvisual{display:none}}
  .authvisual{position:relative;overflow:hidden;background:#17120f}
  .authvisual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
  .authvisual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,15,.25),rgba(23,18,15,.82))}
  .authvtext{position:relative;z-index:2;color:#fff;padding:54px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
  .authvtext h2{font-size:clamp(28px,3vw,42px);font-weight:500;color:#fff;margin:14px 0 12px;max-width:14ch;letter-spacing:-.02em}
  .authvtext p{color:rgba(255,255,255,.85);max-width:38ch}
  .authpanel{display:flex;align-items:center;justify-content:center;padding:60px 28px}
  .authbox{width:100%;max-width:400px}
  .authbox h1{font-family:var(--disp);font-size:clamp(26px,3vw,34px);font-weight:500;margin:0 0 8px}
  .authsub{color:var(--ink-2);font-size:14px;margin:0 0 26px}
  .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-2)}
  .fld .lab{display:block}
  .fld input{font-family:var(--body);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
  .fld input:focus{outline:none;border-color:var(--ezze)}
  .pwwrap{position:relative;display:block}
  .pwwrap input{width:100%;padding-right:42px}
  .pwtoggle{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2)}
  .pwtoggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
  .pwtoggle:hover,.pwtoggle.on{color:var(--ezze)}
  .pwtoggle:focus-visible{outline:2px solid var(--ezze);outline-offset:-2px;border-radius:8px}
  .faqcat-title{font-family:var(--disp);font-weight:500;font-size:22px;margin:0 0 18px}
  .faqnav a{text-transform:none}
  /* Find a store (item 13): wide map, then a three-column row */
  /* Find a store: pick a location, see its map and details together.
     One store at a time, so two locations do not tile into a wall of cards. */
  .storepicker{display:flex;align-items:center;gap:14px;margin:8px 0 20px;flex-wrap:wrap}
  .storepicker label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);font-weight:700}
  .storepicker select{font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
    padding:11px 40px 11px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;
    cursor:pointer;min-width:260px;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
  .storepicker select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* Two by two: map beside the address, opening hours beside the delivery
     check. Everything the page has to say fits one screen, and the delivery
     check sits in the grid rather than as a full-width band of its own — as
     that band it ran into the footer on the same colour with no edge between. */
  .storesplit{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;
    align-items:stretch;padding-bottom:72px}
  .storemapcol{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:380px}
  .storemapcol iframe{width:100%;height:100%;border:0;display:block}
  .storedetailcol{display:contents}
  /* Only the chosen store is shown; the rest stay in the page for the switch. */
  .storepanel{display:none}
  .storepanel.on{display:contents}
  /* Booking note beside an address, and the row of buttons under it. */
  .apptnote{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:16px 0 0}
  .apptnote svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;stroke:var(--ezze);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .apptnote a{color:var(--ezze);font-weight:600;white-space:nowrap}
  .storebtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .hoursnote{font-size:12.5px;color:var(--ink-2);margin:-4px 0 12px}
  .storedetails,.storehours,.storesearch{background:var(--sand);border:1px solid var(--line);
    border-radius:16px;padding:26px;display:flex;flex-direction:column}
  .storedetails h2{font-size:clamp(20px,1.7vw,25px);margin:8px 0 4px}
  /* Label above value: the values are short, so a label column would leave
     most of the width empty. */
  .storedetails .storerow,.storesearch .storerow{display:block;padding:13px 0;
    border-top:1px solid var(--line)}
  .storedetails .storerow b,.storesearch .storerow b{display:block;font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
  .storedetails .storerow span,.storesearch .storerow span{font-size:14.5px;line-height:1.5}
  .storedetails .btn{margin-top:auto;align-self:flex-start}
  .storehours h3,.storesearch h3{display:flex;align-items:center;gap:10px;font-size:15px;margin:6px 0}
  .storehours .hourslist li{font-size:13px;padding:6px 0}
  .storesearch .psrow{display:flex;gap:10px;margin-top:12px}
  .storesearch .psrow input{flex:1;min-width:0}
  .storesearch .psnote{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 0}
  .storesearch .storerow{margin-top:auto}
  @media(max-width:860px){
    .storesplit{grid-template-columns:1fr;padding-bottom:56px}
    .storemapcol{min-height:280px}
    .storepicker select{width:100%;min-width:0}
  }
  .storemapwide{height:400px;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:8px}
  .storemapwide iframe{width:100%;height:100%;border:0;display:block}
  .storecols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:28px 0 96px;align-items:start}
  @media(max-width:900px){.storecols{grid-template-columns:1fr}.storemapwide{height:300px}}
  .hourslist{list-style:none;margin:14px 0 0;padding:0}
  .hourslist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .hourslist li:last-child{border-bottom:0}
  .hourslist li.today{font-weight:600;color:var(--ink)}
  .openflag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;vertical-align:middle}
  .openflag.open{background:#e7f5ec;color:#1e824c}
  .openflag.closed{background:var(--sand-2);color:var(--ink-2)}
  .field-error{display:block;color:#c0392b;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;line-height:1.3;margin-top:4px}
  .field-error[hidden]{display:none}
  .is-invalid,.fld .is-invalid,.fgrid .is-invalid{border-color:#c0392b!important}
  .fld .field-error,.fgrid .field-error{margin-top:6px}
  .fldhint{display:block;font-size:12px;color:var(--ink-2);text-transform:none;letter-spacing:0}
  .fldspacer{display:none}
  @media(min-width:641px){.fldspacer{display:block}}
  /* Address modal: scrolls internally, actions stay visible */
  #addrModal .modalbox{display:flex;flex-direction:column;max-height:90vh}
  #addrModal .modalscroll{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;padding-right:6px;margin-right:-6px}
  #addrModal .modalscroll .fgrid{margin-top:2px}
  #addrModal .modalacts{flex:0 0 auto;padding-top:16px;background:inherit}
  .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .authrow{display:flex;justify-content:space-between;align-items:center;margin:2px 0 22px;font-size:13px}
  .rem{display:flex;gap:8px;align-items:center;color:var(--ink-2);text-transform:none;font-weight:500;font-size:13px;cursor:pointer;margin:0}
  .rem input{accent-color:var(--ezze)}
  .authlink{color:var(--ezze);font-weight:600;cursor:pointer;text-decoration:none}
  .authlink:hover{text-decoration:underline}
  .authalt{text-align:center;margin-top:24px;font-size:14px;color:var(--ink-2)}

  /* ===== my account ===== */
  .acctlayout{display:grid;grid-template-columns:258px 1fr;gap:46px;padding:40px 0 96px;align-items:start}
  @media(max-width:860px){.acctlayout{grid-template-columns:1fr;gap:26px}.acctnav{position:static}}
  .acctnav{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px}
  .acctuser{display:flex;align-items:center;gap:12px;padding:0 0 18px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  .acctav{width:46px;height:46px;border-radius:50%;background:var(--ezze);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;font-family:var(--disp);flex:0 0 auto}
  .acctuser b{display:block;font-size:15px}.acctuser span{font-size:12.5px;color:var(--ink-2)}
  .acctlink{padding:11px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s}
  .acctlink:hover{background:var(--sand);color:var(--ink)}
  .acctlink.on{background:var(--ink);color:#fff}
  .acctlink.signout{color:#d6361f;margin-top:8px;border-top:1px solid var(--line);border-radius:0;padding-top:16px}
  .acctlink.signout:hover{background:none;color:#b02a16}
  .acctmain h2{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3vw,32px);margin:0 0 20px}
  .acsub{font-family:var(--disp);font-weight:500;font-size:18px;margin:32px 0 14px}
  .acctstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:600px){.acctstats{grid-template-columns:1fr 1fr}}
  .stat{background:var(--sand);border-radius:12px;padding:20px}
  .stat b{display:block;font-family:var(--disp);font-size:28px;font-weight:600}
  .stat span{font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
  .acchead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
  .acchead h2{margin:0}
  .orders{display:flex;flex-direction:column;gap:14px}
  .ordcard{border:1px solid var(--line);border-radius:14px;padding:20px 22px}
  .ordtop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .ordtop .oid{font-family:var(--disp);font-weight:600;font-size:17px}
  .ordtop .ometa{font-size:13px;color:var(--ink-2);margin-top:3px}
  .oright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .ordtotal{font-family:var(--disp);font-weight:600;font-size:17px}
  .oitems{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:13px;margin-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .ordview{color:var(--ezze);font-weight:600;cursor:pointer;text-decoration:underline;white-space:nowrap}
  .ordlinks{display:inline-flex;gap:16px}
  /* Order detail — shipping & tracking */
  .odtrack{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--sand)}
  .odtrack-head{display:flex;gap:14px;align-items:flex-start}
  .odtrack-head svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--ezze);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
  .odtrack-head h4{margin:0 0 4px;font-family:var(--disp);font-weight:500;font-size:17px}
  .odtrack-head p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
  .odtrack-rows{display:flex;gap:32px;flex-wrap:wrap;margin:16px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
  .odtrack-rows>div{display:flex;flex-direction:column;gap:3px}
  .odtrack-rows span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .odtrack-rows b{font-size:14px}
  .odtrack .btn{margin-top:16px}
  /* Order detail — review prompt */
  .odreview{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
  .odreview h4{margin:0 0 4px;font-family:var(--disp);font-weight:500;font-size:17px}
  .odreview p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2)}
  .odreview-items{display:flex;flex-direction:column;gap:8px}
  .odreview-item{border:1px solid var(--line);border-radius:10px;transition:border-color .15s;overflow:hidden}
  .odreview-item:hover{border-color:var(--ezze)}
  .odreview-open{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;padding:12px 14px;background:none;border:0;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer}
  .odreview-stars{color:var(--ezze);font-weight:600;white-space:nowrap}
  .odreview-form{padding:4px 14px 16px;border-top:1px solid var(--line)}
  .odreview-form .rvstarsel{margin:14px 0 6px}
  .odreview-field{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
  .odreview-field input,.odreview-field textarea{font-family:var(--body);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;width:100%;box-sizing:border-box}
  .odreview-field input:focus,.odreview-field textarea:focus{outline:none;border-color:var(--ezze)}
  .odreview-form .rvformacts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
  @media (max-width:640px){ .odtrack-rows{gap:18px} .odreview-item{flex-direction:column;align-items:flex-start;gap:6px} }
  /* ===== Journal (blog) ===== */
  .jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .jcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s,border-color .18s}
  .jcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,18,15,.09);border-color:var(--ink)}
  .jcard-img{aspect-ratio:16/9;background:var(--sand);overflow:hidden}
  .jcard-img img{width:100%;height:100%;object-fit:cover;display:block}
  .jcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
  .jcat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ezze)}
  .jcard-body h3{font-family:var(--disp);font-weight:500;font-size:19px;line-height:1.3;margin:0}
  .jcard-body p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
  .jmeta{margin-top:auto;font-size:12px;color:#8b8178}
  .jpager{margin:34px 0 10px;display:flex;justify-content:center}
  .jpager svg{width:16px;height:16px}
  /* Article — sidebar + content, matching the legal/FAQ pages.
     Sand page + white article card so the two columns read as distinct. */
  #journalPost{background:var(--sand)}
  #journalPost .pagehead{background:transparent;border-bottom:1px solid var(--line)}
  #journalPost .legalgrid{grid-template-columns:262px minmax(0,1fr);max-width:1160px;margin:0 auto;gap:40px}
  #journalPost .legalnav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 14px}
  #journalPost .legalnav a{font-size:13.5px;line-height:1.45;padding:9px 12px}
  #journalPost .legal{max-width:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 34px 34px}
  #journalPost .sec{background:#fff;border-top:1px solid var(--line)}
  @media (max-width:900px){
    #journalPost .legalgrid{grid-template-columns:1fr}
    #journalPost .legalnav{display:none}
    #journalPost .legal{padding:22px 20px 26px}
  }
  .legalnav .jnav-all{margin-top:10px;color:var(--ezze);font-weight:600}
  .jhero{margin:0 0 28px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--sand)}
  .jhero img{width:100%;height:100%;object-fit:cover;display:block}
  .jlede{font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .jbody{font-size:15.5px;line-height:1.8;color:var(--ink-2)}
  .jbody h2{font-family:var(--disp);font-weight:500;font-size:24px;line-height:1.25;margin:34px 0 12px;color:var(--ink)}
  .jbody h3{font-family:var(--disp);font-weight:500;font-size:20px;margin:26px 0 10px;color:var(--ink)}
  .jbody h4{font-size:16px;margin:22px 0 8px;color:var(--ink)}
  .jbody p{margin:0 0 16px}
  .jbody strong{color:var(--ink)}
  .jbody ul,.jbody ol{margin:8px 0 18px;padding-left:22px}
  .jbody li{margin-bottom:8px}
  .jbody a{color:var(--ezze);text-decoration:underline}
  .jbody img{max-width:100%;height:auto;border-radius:12px;margin:22px 0;display:block}
  .jbody figure{margin:22px 0}
  .jbody figcaption{font-size:12.5px;color:#8b8178;margin-top:8px}
  .jbody blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--ezze);background:var(--sand);border-radius:0 10px 10px 0;font-size:16px;color:var(--ink)}
  .jbody table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
  .jbody th,.jbody td{border:1px solid var(--line);padding:10px 12px;text-align:left}
  .jbody th{background:var(--sand);color:var(--ink);font-weight:600}
  .jauthor{display:flex;gap:16px;align-items:flex-start;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
  .jauthor img,.jauthor-initials{width:56px;height:56px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:flex;align-items:center;justify-content:center}
  .jauthor-initials{background:var(--ezze);color:#fff;font-weight:700;font-size:18px;letter-spacing:.02em}
  .jauthor b{display:block;font-size:15px}
  .jauthor-role{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ezze);font-weight:700;margin-top:2px}
  .jauthor p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
  .jshare{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px}
  .jshare span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
  .jshare a{color:var(--ink-2);text-decoration:none;font-weight:600}
  .jshare a:hover{color:var(--ezze)}
  @media (max-width:900px){ .jgrid{grid-template-columns:repeat(2,1fr);gap:20px} }
  @media (max-width:620px){ .jgrid{grid-template-columns:1fr} .jbody{font-size:15.5px} }
  .ordthumbs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
  .ordthumbs img{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
  .fsocials{display:flex;gap:14px;margin-top:20px}
  .fsocials a{color:#fff;opacity:.7;transition:opacity .15s}
  .fsocials a:hover{opacity:1}
  .fsocials svg{width:20px;height:20px;display:block}
  .ostatus{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
  .ostatus.delivered{background:#e7f5e9;color:#2e7d32}
  .ostatus.transit{background:rgba(232,81,31,.12);color:var(--ezze)}
  .ostatus.processing{background:var(--sand-2);color:var(--ink-2)}
  .addrs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:600px){.addrs{grid-template-columns:1fr}}
  .addrcard{border:1px solid var(--line);border-radius:14px;padding:20px 22px}
  .addrcard.def{border-color:var(--ezze)}
  .addrtag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
  .addrcard.def .addrtag{color:var(--ezze)}
  .addrcard h4{font-family:var(--body);font-weight:600;font-size:15px;margin:8px 0 6px}
  .addrcard p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5}
  .addracts{display:flex;gap:14px;margin-top:14px;font-size:13px}
  .addracts a{color:var(--ezze);font-weight:600;cursor:pointer;text-decoration:underline}
  .profform{max-width:560px}.profform .fgrid label{text-transform:uppercase}

  /* wishlist heart on cards */
  .wishbtn{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;box-shadow:0 2px 8px rgba(23,18,15,.1)}
  .wishbtn svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.7}
  .wishbtn:hover{background:#fff;transform:scale(1.08)}
  .wishbtn.on svg{fill:var(--ezze);stroke:var(--ezze)}
  .savebtn{flex:0 0 auto;width:50px;height:50px;border-radius:3px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s}
  .savebtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7}
  .savebtn:hover{border-color:var(--ink)}
  .savebtn.on{border-color:var(--ezze);background:rgba(232,81,31,.06)}
  .savebtn.on svg{fill:var(--ezze);stroke:var(--ezze)}

  /* search page */
  .searchhero{background:var(--sand);padding:54px 0 44px;border-bottom:1px solid var(--line)}
  .searchhero h1{font-family:var(--disp);font-weight:500;font-size:clamp(30px,4vw,48px);margin:0 0 22px}
  .searchbar{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 8px 6px 20px;max-width:680px;transition:.15s}
  .searchbar:focus-within{border-color:var(--ezze)}
  .searchbar svg{width:20px;height:20px;stroke:var(--ink-2);fill:none;stroke-width:1.7;flex:0 0 auto}
  .searchbar input{flex:1;border:0;outline:0;font-family:var(--body);font-size:16px;color:var(--ink);background:none;padding:12px 0}
  .searchclear{border:0;background:var(--sand-2);width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-2);flex:0 0 auto}
  .searchclear:hover{background:var(--line)}
  .searchsugg{margin-top:18px;font-size:13.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .searchsugg a{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;color:var(--ink);font-weight:600;transition:.15s}
  .searchsugg a:hover{border-color:var(--ezze);color:var(--ezze)}
  .searchwrap{padding:34px 0 96px}
  .searchcount{font-size:13.5px;color:var(--ink-2);margin-bottom:24px}
  .stateempty{text-align:center;padding:70px 10px;color:var(--ink-2);font-size:17px;line-height:1.7}
  .stateempty span{font-size:14px}

  /* order detail */
  .odhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .odhead h1{margin:0}
  .odmeta{font-size:13.5px;color:var(--ink-2);margin-top:12px}
  .odlayout{display:grid;grid-template-columns:1fr 340px;gap:46px;padding:36px 0 96px;align-items:start}
  @media(max-width:900px){.odlayout{grid-template-columns:1fr;gap:30px}.odside{position:static}}
  .odtimeline{display:flex;justify-content:space-between;background:var(--sand);border-radius:14px;padding:26px 18px;margin-bottom:34px;gap:4px}
  .tlstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative}
  .tlstep::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line)}
  .tlstep:first-child::before{display:none}
  .tlstep.done::before,.tlstep.now::before{background:var(--ezze)}
  .tldot{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--line);z-index:1}
  .tlstep.done .tldot{background:var(--ezze);border-color:var(--ezze)}
  .tlstep.now .tldot{border-color:var(--ezze);box-shadow:0 0 0 4px rgba(232,81,31,.2)}
  .tllabel{font-size:11.5px;font-weight:600;color:var(--ink-2);line-height:1.3}
  .tlstep.done .tllabel,.tlstep.now .tllabel{color:var(--ink)}
  @media(max-width:600px){.tllabel{font-size:9.5px}.odtimeline{padding:20px 8px}}
  .oditem{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
  .oditem:first-child{padding-top:0}
  .oditem img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--sand);flex:0 0 auto}
  .oditem .odinfo{flex:1 1 auto;min-width:0}
  .oditem .odinfo h4{margin:0 0 3px;font-size:14.5px;font-weight:600}
  .oditem .odvar,.oditem .odsku{font-size:12.5px;color:var(--ink-2)}
  .oditem .odqty{font-size:13px;color:var(--ink-2);white-space:nowrap}
  .oditem .odprice{font-weight:600;white-space:nowrap;margin-left:auto}
  @media(max-width:560px){.oditem{flex-wrap:wrap}.oditem .odqty{margin-left:88px}}
  .odinfo{flex:1}.odinfo .ckick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  .odinfo h4{font-family:var(--disp);font-weight:500;font-size:16px;margin:4px 0}
  .odinfo span{font-size:13px;color:var(--ink-2)}
  .odlineprice{font-family:var(--disp);font-weight:600;font-size:16px}
  .odside{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
  .odcard{border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:14px;line-height:1.6;color:var(--ink-2)}
  .odcard h4{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;font-weight:700}
  .odcard b{color:var(--ink);font-weight:600}
  .odtag{margin-top:12px;display:inline-block;font-size:12px;font-weight:600;color:var(--ezze);background:rgba(232,81,31,.1);padding:5px 12px;border-radius:999px}
  /* modal */
  .modal{position:fixed;inset:0;z-index:200;background:rgba(23,18,15,.55);display:flex;align-items:center;justify-content:center;padding:24px}
  .modal[hidden]{display:none}
  .modalbox{background:#fff;border-radius:16px;padding:30px;width:100%;max-width:460px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
  #addrModal .modalbox{max-width:600px}
  .modalbox h3{font-family:var(--disp);font-weight:500;font-size:22px;margin:0 0 20px}
  .modalacts{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}

  .fbrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .fbrow2{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);gap:22px}
  .fchips.small .chip{font-size:12px;padding:6px 12px}
  .fgroup2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .flabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  .fsw{width:26px;height:26px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.15s}
  .fsw:hover{transform:scale(1.12)}
  .fsw.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--ezze)}
  .instock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;margin-left:auto}
  .instock input{accent-color:var(--ezze);width:16px;height:16px}
  .filterbar .sortsel{margin-left:auto}
  .catbar2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;min-height:30px}
/* The count's own bottom margin would count towards centring and lift it
   above the filter pills beside it; the row provides the spacing. */
.catbar2 .catcount{margin-bottom:0}

/* Phone filter panel. Hidden on wider screens, where the filter bar shows as
   a bar. The panel rules use #shopFilters so they outrank the later
   .filterbar{position:static} phone rule. */
.mfilter,.fsheetbg,.fsheethead,.fsheetfoot,.fmonly{display:none}
@media(max-width:768px){
  .mfilter{display:block;padding:16px 0 0}
  .mfilter .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .mfilterbtn{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:10px 14px;cursor:pointer}
  .mfilterbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .mfcount{min-width:18px;height:18px;border-radius:9px;background:var(--ezze);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
  .mftotal{font-size:13px;color:var(--ink-2)}
  .catwrap{padding-top:16px}
  .catbar2{min-height:0;margin-bottom:16px}
  .catbar2 .catcount{display:none}
  .catbar2:not(:has(.actchip)){display:none}

  #shopFilters{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:300;max-height:85vh;overflow-y:auto;background:#fff;backdrop-filter:none;border:0;border-radius:16px 16px 0 0;padding:0;transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  #shopFilters.open{transform:none;visibility:visible}
  #shopFilters .wrap{gap:0;padding-inline:18px}
  .fsheethead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background:#fff;padding:16px 0 12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
  .fsheethead b{font-family:var(--disp);font-weight:500;font-size:18px}
  .fsheethead button{border:0;background:none;color:var(--ink);font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
  .fmonly{display:block}
  #shopFilters .fbrow{flex-direction:column;align-items:stretch;gap:10px}
  #shopFilters .sortsel{margin-left:0;width:100%}
  #shopFilters .fbrow2{flex-direction:column;align-items:stretch;gap:18px;margin-top:18px;padding-top:18px}
  #shopFilters .fgroup2{flex-direction:column;align-items:flex-start;gap:10px}
  #shopFilters .instock{margin-left:0}
  #shopFilters .fbrow-solo{margin-top:0;padding-top:0;border-top:0}
  #shopFilters .fsort{width:100%;align-items:stretch}
  .fsheetfoot{display:block;position:sticky;bottom:0;background:#fff;margin-top:20px;padding:14px 0 18px;border-top:1px solid var(--line)}
  .fsheetfoot .btn{width:100%;justify-content:center}
  .fsheetbg.on{display:block;position:fixed;inset:0;z-index:290;background:rgba(23,18,15,.45)}
  body.sheet-open{overflow:hidden}
}
  .activechips{display:flex;gap:8px;flex-wrap:wrap}
  .actchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;background:var(--ink);color:#fff;border-radius:999px;padding:6px 8px 6px 13px;cursor:pointer}
  .actchip b{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:400}
  .actchip:hover b{background:var(--ezze)}
  .pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:48px;flex-wrap:wrap}
  .pager button{min-width:42px;height:42px;padding:0 12px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;transition:.15s;color:var(--ink)}
  .pager button:hover:not(:disabled){border-color:var(--ink)}
  .pager button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .pager button:disabled{opacity:.4;cursor:default}
  .pager .pgdots{padding:0 4px;color:var(--ink-2)}

  .emptystate{padding:10px 0 30px}
  .emptybox{text-align:center;padding:54px 20px 38px;max-width:460px;margin:0 auto}
  .emptybox svg{width:50px;height:50px;stroke:var(--ink-2);fill:none;stroke-width:1.4;stroke-linecap:round;margin-bottom:18px;opacity:.65}
  .emptybox h3{font-family:var(--disp);font-weight:500;font-size:24px;margin:0 0 10px}
  .emptybox p{color:var(--ink-2);font-size:15px;margin:0 0 22px;line-height:1.5}
  .suggestwrap{margin-top:14px;border-top:1px solid var(--line);padding-top:44px}
  .suggesthead{font-size:clamp(22px,3vw,30px)!important;margin-bottom:28px}

  /* stage 2: stock states */
  .stockline{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin:6px 0 22px}
  .stockline .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .stockline.in{color:#2e7d32}.stockline.in .dot{background:#2e7d32}
  .stockline.low{color:var(--ezze)}.stockline.low .dot{background:var(--ezze)}
  .stockline.out{color:#c0392b}.stockline.out .dot{background:#c0392b}
  .stockline.back{color:#9a7b1f}.stockline.back .dot{background:#9a7b1f}
  /* variants */
  .vbox{margin:0 0 22px}
  .vlabel{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:0 0 11px}
  .vlabel b{color:var(--ink);margin-left:4px;text-transform:none;letter-spacing:0;font-weight:600}
  .vopts{display:flex;flex-wrap:wrap;gap:10px}
  .vfin{width:38px;height:38px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:.15s;position:relative}
  .vfin:hover{transform:scale(1.08)}
  .vfin.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2px var(--ezze)}
  .vfin.soldout{opacity:.4}
  .vfin.soldout::after{content:"";position:absolute;inset:46% 8% auto;height:2px;background:#c0392b;transform:rotate(-20deg)}
  .vsize{padding:10px 16px;border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;background:#fff}
  .vsize:hover{border-color:var(--ink)}
  .vsize.on{border-color:var(--ezze);background:rgba(232,81,31,.06);color:var(--ezze)}
  .vsize.soldout{opacity:.45;text-decoration:line-through;cursor:not-allowed}
  .pr .was{font-size:.62em;color:var(--ink-2);text-decoration:line-through;margin-right:10px;font-weight:400}
  .btn.disabled{opacity:.5;pointer-events:none}
  /* image zoom */
  .gmain{position:relative;overflow:hidden;cursor:zoom-in}
  .gmain img{transition:transform .12s ease-out;will-change:transform}
  .gmain.zoom img{transform:scale(2.1)}
  .zoomhint{position:absolute;bottom:12px;right:12px;background:rgba(23,18,15,.7);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;letter-spacing:.03em;pointer-events:none;transition:.2s}
  .gmain.zoom .zoomhint{opacity:0}
  @media(hover:none){.zoomhint{display:none}.gmain{cursor:default}}
  /* gallery arrows and counter, on the main image */
  .gnav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(23,18,15,.12);transition:border-color .15s,background .15s}
  .gnav svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .gnav:hover{background:#fff;border-color:var(--ink)}
  .gnav.prev{left:12px}
  .gnav.next{right:12px}
  .gcount{position:absolute;bottom:12px;left:12px;z-index:3;background:rgba(23,18,15,.7);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;letter-spacing:.03em;pointer-events:none}
  /* A long set of thumbnails scrolls in its row instead of spilling past the gallery. */
  .gthumbs{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .gthumbs img{flex:0 0 auto}
  .gallery{min-width:0}
  @media(max-width:760px){.gnav{width:36px;height:36px}.gnav svg{width:16px;height:16px}}
  /* postcode delivery estimate */
  .delcheck{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:8px}
  .delrow{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:12px}
  .delrow svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.5}
  .delform{display:flex;gap:10px}
  .delform input{flex:1;font-family:var(--body);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px}
  .delform input:focus{outline:none;border-color:var(--ezze)}
  .delresult{font-size:13px;margin-top:12px;line-height:1.5;color:var(--ink-2)}
  .delresult.show{padding-top:12px;border-top:1px solid var(--line)}
  .delresult b{color:var(--ink)}

  /* stage 3: ratings + reviews */
  .stars2{position:relative;display:inline-block;font-size:13px;line-height:1;font-family:Arial,sans-serif;white-space:nowrap}
  .stars2 .st-bg{color:var(--line);letter-spacing:2px}
  .stars2 .st-fg{color:var(--ezze);letter-spacing:2px;position:absolute;left:0;top:0;width:var(--p);overflow:hidden}
  .cardrate{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);margin:6px 0 0}
  .rate{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);margin:0 0 8px}
  .rate a{cursor:pointer}.rate a:hover{color:var(--ezze)}
  .rvsummary{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center;padding:6px 0 4px}
  @media(max-width:700px){.rvsummary{grid-template-columns:1fr;gap:26px}}
  .rvavg{text-align:center}
  .rvnum{font-family:var(--disp);font-size:54px;font-weight:600;line-height:1}
  .rvavg #rvStars{margin-top:8px}
  .rvcount{font-size:13px;color:var(--ink-2);margin-top:8px}
  .rvbars{display:flex;flex-direction:column;gap:9px}
  .rvbar{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
  .rvbar .lbl{width:34px;white-space:nowrap;font-weight:600}
  .rvbar .track{flex:1;height:8px;background:var(--sand-2);border-radius:999px;overflow:hidden}
  .rvbar .fill{height:100%;background:var(--ezze);border-radius:999px;transition:width .4s}
  .rvbar .num{width:34px;text-align:right}
  .rvform{background:var(--sand);border-radius:14px;padding:26px;margin:26px 0 4px}
  .rvform h3{font-family:var(--disp);font-weight:500;font-size:20px;margin:0 0 16px}
  .rvstarsel{display:flex;gap:6px;margin-bottom:18px}
  .rvstarsel i{font-size:30px;color:var(--line);cursor:pointer;font-style:normal;transition:.1s;line-height:1}
  .rvstarsel i.on{color:var(--ezze)}
  .rvform textarea{font-family:var(--body);font-size:14px;padding:12px 13px;border:1px solid var(--line);border-radius:9px;resize:vertical;color:var(--ink)}
  .rvform textarea:focus{outline:none;border-color:var(--ezze)}
  .rvformacts{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
  .rvlist{margin-top:14px}
  .rvitem{padding:22px 0;border-bottom:1px solid var(--line)}
  .rvhead{display:flex;align-items:center;gap:12px}
  .rvavatar{width:38px;height:38px;border-radius:50%;background:var(--sand-2);display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--disp);color:var(--ink);flex:0 0 auto}
  .rvwho b{font-size:14px}
  .rvverified{font-size:11px;color:#2e7d32;font-weight:700;margin-left:8px}
  .rvdate{font-size:12px;color:var(--ink-2);margin-left:auto;white-space:nowrap}
  .rvitem h5{font-family:var(--body);font-weight:700;font-size:14.5px;margin:10px 0 4px}
  .rvitem p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55}
  .rvwho>div{margin-top:3px}

  /* stage 4: mini-cart */
  .mcscrim{position:fixed;inset:0;background:rgba(23,18,15,.5);opacity:0;visibility:hidden;transition:.25s;z-index:300}
  .mcscrim.open{opacity:1;visibility:visible}
  .minicart{position:fixed;top:0;right:0;height:100%;width:400px;max-width:90vw;background:#fff;z-index:301;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.12)}
  .minicart.open{transform:translateX(0)}
  .mchead{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
  .mchead h3{font-family:var(--disp);font-weight:500;font-size:20px;margin:0}
  .mcx{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
  .mcx:hover{color:var(--ink)}
  .mcbody{flex:1;overflow-y:auto;padding:8px 24px}
  .mcitem{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
  .mcitem img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--sand);flex:0 0 auto}
  .mci-info{flex:1;min-width:0}
  .mci-info h4{font-family:var(--disp);font-weight:500;font-size:14.5px;margin:0 0 3px}
  .mci-var{font-size:12px;color:var(--ink-2)}
  .mci-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
  .mci-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px}
  .mci-qty button{border:0;background:none;width:26px;height:28px;cursor:pointer;font-size:14px}
  .mci-qty span{width:24px;text-align:center;font-size:13px;font-weight:600}
  .mci-price{font-family:var(--disp);font-weight:600;font-size:14px}
  .mcrm{border:0;background:none;color:var(--ink-2);font-size:12px;text-decoration:underline;cursor:pointer;padding:0;margin-top:6px}
  .mcrm:hover{color:var(--ezze)}
  .mcfoot{border-top:1px solid var(--line);padding:20px 24px}
  .mcsub{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:600;font-size:17px;margin-bottom:4px}
  .mcnote{font-size:12px;color:var(--ink-2);margin-bottom:14px}
  .mcempty{text-align:center;color:var(--ink-2);padding:60px 20px;font-size:15px;line-height:1.8}
  /* coupon */
  .cartcol{display:flex;flex-direction:column}
  .couponbox{margin-bottom:18px}
  .couponrow{display:flex;gap:8px}
  .couponrow input{flex:1;font-family:var(--body);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;text-transform:uppercase}
  .couponrow input:focus{outline:none;border-color:var(--ezze)}
  .couponmsg{font-size:12.5px;margin-top:8px}
  .couponmsg.ok{color:#2e7d32}.couponmsg.err{color:#c0392b}
  .sline.disc{color:#2e7d32}.sline.disc span:last-child{color:#2e7d32}
  .couponchip{display:inline-flex;align-items:center;gap:8px;background:rgba(46,125,50,.1);color:#2e7d32;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;margin-top:8px}
  .couponchip b{cursor:pointer;font-weight:400;font-size:14px}
  /* estimator */
  .estbox{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
  .esttoggle{border:0;background:none;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}
  .esttoggle::after{content:"▾";color:var(--ink-2)}
  .estform{display:flex;gap:8px;margin-top:12px}
  .estform input{flex:1;font-family:var(--body);font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
  .estform input:focus{outline:none;border-color:var(--ezze)}
  /* saved for later */
  .savedsec{margin-top:40px;border-top:1px solid var(--line);padding-top:30px}
  .savedsec h3{font-family:var(--disp);font-weight:500;font-size:20px;margin:0 0 18px}
  .saveditem{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
  .saveditem img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--sand)}
  .saveditem h4{font-family:var(--disp);font-weight:500;font-size:15px;margin:0 0 4px}
  .saveditem .sv-var{font-size:12px;color:var(--ink-2)}
  .saveditem .sv-acts{display:flex;gap:14px;margin-top:8px;font-size:13px}
  .saveditem .sv-acts a{color:var(--ezze);font-weight:600;cursor:pointer;text-decoration:underline}
  .saveditem .sv-price{font-family:var(--disp);font-weight:600;font-size:15px}
  .clink2{border:0;background:none;color:var(--ink-2);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0;font-family:var(--body);margin-left:14px}
  .clink2:hover{color:var(--ezze)}

  /* stage 5: checkout enhancements */
  .coaccount{border:1px solid var(--line);border-radius:11px;padding:14px 16px;font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .coaccount.guest{background:var(--sand)}
  .coaccount.signed{background:rgba(46,125,50,.07);border-color:rgba(46,125,50,.3)}
  .coaccount a{color:var(--ezze);font-weight:600;cursor:pointer;text-decoration:underline}
  .coaccount .tick{color:#2e7d32;font-weight:700}
  .savedaddr{margin-bottom:22px}
  .savedaddr label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
  .savedaddr select{font-family:var(--body);font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:12px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;width:100%}
  .savedaddr select:focus{outline:none;border-color:var(--ezze)}
  .addrsummary{margin:0 0 22px}
  .addrsummary-in{border:1px solid var(--line);border-radius:11px;padding:14px 16px;font-size:14px;line-height:1.55;background:var(--sand)}
  .saddr{border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;cursor:pointer;font-size:13px;line-height:1.5;min-width:200px;flex:1;transition:.15s;position:relative}
  .saddr:hover{border-color:var(--ink)}
  .saddr.on{border-color:var(--ezze);background:rgba(232,81,31,.05)}
  .saddr .stag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin-bottom:5px}
  .saddr.on .stag{color:var(--ezze)}
  .saddr.newaddr{display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-weight:600;min-width:150px;flex:0 0 auto}
  .lab2{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
  .lab2 .opt{text-transform:none;letter-spacing:0;color:var(--ink-2);font-weight:400}
  .conote{margin-top:28px;border-top:1px solid var(--line);padding-top:24px}
  .conote textarea,.giftbox textarea{width:100%;font-family:var(--body);font-size:14px;padding:12px 13px;border:1px solid var(--line);border-radius:9px;resize:vertical;color:var(--ink)}
  .conote textarea:focus,.giftbox textarea:focus{outline:none;border-color:var(--ezze)}
  .giftcheck,.billsame{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer;margin-top:16px}
  .giftcheck input,.billsame input{accent-color:var(--ezze);width:17px;height:17px}
  .billsame{margin:18px 0}
  .giftbox{margin-top:16px}
  .billh{font-family:var(--disp);font-weight:500;font-size:17px;margin:0 0 14px}

  /* stage 6: prefs + returns */
  .prefs{display:flex;flex-direction:column;gap:2px;max-width:560px}
  .prefrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
  .prefrow>div b{display:block;font-size:14.5px}
  .prefrow>div span{font-size:13px;color:var(--ink-2)}
  .switch{position:relative;width:46px;height:26px;flex:0 0 auto}
  .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
  .switch i{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s}
  .switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .switch input:checked ~ i{background:var(--ezze)}
  .switch input:checked ~ i::after{transform:translateX(20px)}
  .rmasub{color:var(--ink-2);font-size:13.5px;margin:-6px 0 16px}
  .rmaitems{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto}
  .rmaitem{display:flex;align-items:center;gap:12px;font-size:13.5px;padding:8px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
  .rmaitem input{accent-color:var(--ezze);width:17px;height:17px;flex:0 0 auto}
  .rmaitem img{width:40px;height:40px;border-radius:7px;object-fit:cover;background:var(--sand);flex:0 0 auto}
  .rmasel{width:100%;font-family:var(--body);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
  #returnModal textarea{width:100%;font-family:var(--body);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;resize:vertical}
  #returnModal textarea:focus,.rmasel:focus{outline:none;border-color:var(--ezze)}

  /* stage 7: collections landing + recently viewed */
  .pagesub{color:var(--ink-2);font-size:15px;margin:14px 0 0;max-width:54ch}
  .collgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 0 40px}
  @media(max-width:900px){.collgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.collgrid{grid-template-columns:1fr}}
  .colltile{border-radius:16px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:3/4;display:flex;align-items:flex-end;transition:transform .2s}
  .colltile:hover{transform:translateY(-4px)}
  .colltile .cover{position:absolute;inset:0}
  .colltile .cover img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.78}
  .colltile .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.6))}
  .colltile .ct-body{position:relative;z-index:2;padding:22px;color:#fff}
  .colltile h3{font-family:var(--disp);font-weight:500;font-size:22px;margin:0 0 4px;color:#fff}
  .colltile .ct-body span{font-size:12.5px;opacity:.88}
  .megalink{cursor:pointer}.megalink:hover{color:var(--ezze)}
  #homeRecentSec .grid,#recentSec .grid,#collGrid{margin-top:0}

  /* stage 8: content/legal pages */
  .legalgrid{display:grid;grid-template-columns:236px 1fr;gap:56px;align-items:start;padding:30px 0 90px}
  .legalnav{position:sticky;top:100px}
  .legalnav h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;font-weight:700}
  .legalnav a{display:block;padding:9px 14px;border-radius:9px;color:var(--ink-2);font-size:14px;cursor:pointer;transition:.15s;border:1px solid transparent}
  .legalnav a:hover{color:var(--ezze)}
  .legalnav a.active{background:var(--sand);color:var(--ink);font-weight:600;border-color:var(--line)}
  .legal:not(.wrap){max-width:820px}
  /* A page that is only copy: .legal used to override .wrap's width while its
     auto margins stayed, floating the text in the middle of the page away from
     the title above it. The wrap keeps its width; the copy keeps a readable
     measure from the same left edge. */
  .wrap.legal{padding-top:36px;padding-bottom:90px}
  .wrap.legal>*{max-width:820px}
  /* CMS page image sections: image and text side by side, swapping sides
     each row. Images keep their own shape rather than being cropped to one. */
  .pagesecs{display:flex;flex-direction:column;gap:88px;padding-top:56px;padding-bottom:96px}
  .pagesec{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .pagesec.flip .psimg{order:2}
  .pagesec.noimg{grid-template-columns:1fr}
  .psimg{border-radius:16px;overflow:hidden;background:var(--sand)}
  .psimg img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover}
  .pagesec .pstext{max-width:none}
  .pagesec .pstext p{font-size:16px}
  .pagesec .pstext>:first-child{margin-top:0}
  .pagesec .pstext>:last-child{margin-bottom:0}
  .pagesec .pstext h2{font-size:clamp(26px,3vw,36px);font-weight:400;margin:0 0 18px}
  .pagesec .pstext strong{color:var(--ink);font-family:var(--disp);font-weight:500;font-size:18px}
  @media(max-width:860px){
    .pagesecs{gap:48px;padding-top:32px;padding-bottom:64px}
    .pagesec{grid-template-columns:1fr;gap:24px}
    .pagesec.flip .psimg{order:0}
  }
  .aboutgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:72px;align-items:start;padding-top:36px;padding-bottom:90px}
  /* The copy fills its column up to the card; a touch larger so the wider
     line still reads comfortably. */
  .aboutgrid .legal{max-width:none}
  .aboutgrid .legal p{font-size:16px}
  .aboutgrid .legal h2:first-of-type{margin-top:30px}
  .aboutcard{position:sticky;top:100px;background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column}
  .aboutcard h3{font-family:var(--disp);font-weight:500;font-size:24px;margin:4px 0 12px}
  .aboutcard .storerow span a{color:var(--ezze)}
  .aboutcard .storerow .allhours{margin-left:8px;font-size:13px}
  .aboutcard .btn{margin-top:18px;align-self:flex-start}
  @media(max-width:860px){
    .aboutgrid{grid-template-columns:1fr;gap:28px}
    .aboutcard{position:static}
  }
  @media(max-width:820px){
    .legalgrid{grid-template-columns:1fr;gap:22px}
    .legalnav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
    .legalnav h4{display:none}
    .legalnav a{white-space:nowrap;flex:0 0 auto}
  }
  .legal .upd{font-size:13px;color:var(--ink-2);margin:0 0 26px}
  /* Admin's opening words above a built-in policy page. */
  .cmsintro{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .cmsintro>:last-child{margin-bottom:0}
  .legal h2{font-family:var(--disp);font-weight:500;font-size:22px;margin:34px 0 12px}
  .legal p,.legal li{font-size:15px;color:var(--ink-2);line-height:1.75}
  .legal p{margin:0 0 14px}
  .legal ul{padding-left:20px;margin:8px 0 16px}
  .legal li{margin-bottom:7px}
  .legal a{color:var(--ezze);text-decoration:underline;cursor:pointer}
  /* contact */
  .contactgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;padding:30px 0 90px;align-items:start}
  @media(max-width:860px){.contactgrid{grid-template-columns:1fr;gap:34px}}
  .contactform textarea{width:100%;font-family:var(--body);font-size:14px;padding:12px 13px;border:1px solid var(--line);border-radius:9px;resize:vertical;color:var(--ink)}
  .contactform textarea:focus{outline:none;border-color:var(--ezze)}
  .cinfo-block{margin-bottom:22px}
  .cinfo-block h4{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;font-weight:700}
  .cinfo-block p{font-size:15px;color:var(--ink);line-height:1.6;margin:0}
  .contactinfo .storemap{margin-top:6px;aspect-ratio:4/3}
  /* faq */
  .faqwrap{max-width:760px;margin:0 auto;padding:20px 0 90px}
  .faqitem{border-bottom:1px solid var(--line)}
  .faqq{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-weight:500;font-size:17px;font-family:var(--disp)}
  .faqq::after{content:"+";font-size:24px;color:var(--ezze);transition:.2s;flex:0 0 auto;line-height:1}
  .faqitem.open .faqq::after{content:"\2212"}
  .faqa{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-2);font-size:15px;line-height:1.7}
  .faqitem.open .faqa{max-height:320px;padding-bottom:20px}
  /* 404 */
  .nf{text-align:center;padding:90px 20px 120px;max-width:520px;margin:0 auto}
  .nfcode{font-family:var(--disp);font-weight:600;font-size:96px;line-height:1;color:var(--ezze)}
  .nf h1{font-size:clamp(28px,4vw,40px);font-weight:500;margin:8px 0 12px}
  .nf p{color:var(--ink-2);font-size:16px;margin:0 0 26px}
  .nfacts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  /* The 404 page's own suggestions: the padding above is already generous, so
     these sit closer than a normal section would. */
  .nfsuggest{padding-bottom:20px}
  .nfshop{padding-bottom:90px}
  .nflinks{display:flex;gap:10px;flex-wrap:wrap}
  /* cookie banner */
  .cookiebar{position:fixed;left:20px;right:20px;bottom:20px;max-width:760px;margin:0 auto;background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:20px;z-index:320;box-shadow:0 16px 50px rgba(0,0,0,.3);flex-wrap:wrap}
  .cookiebar[hidden]{display:none}
  .cookiebar p{font-size:13.5px;line-height:1.5;margin:0;flex:1;min-width:240px;color:rgba(255,255,255,.85)}
  .cookiebar a{color:#fff;text-decoration:underline;cursor:pointer}
  .ckacts{display:flex;gap:10px;flex-shrink:0}
  .cookiebar .btn-line{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
  .cookiebar .btn-line:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

  /* stage 9: promo bar, trust, newsletter, back-to-top */
  .promobar{background:var(--ink);color:#fff;font-size:13px;text-align:center;position:relative;overflow:hidden}
  .promo-track{padding:9px 46px;min-height:22px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}
  .promo-track .pm{white-space:nowrap;animation:pmfade .5s ease}
  .promo-track.marqmode{justify-content:flex-start}
  .promo-track .pm.marq{animation:pmmarq linear infinite}
  @keyframes pmmarq{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
  .promo-track a{color:#fff;text-decoration:underline;cursor:pointer;font-weight:700}
  .promo-ic{display:inline-flex;align-items:center;margin-right:6px;vertical-align:middle;position:relative;top:-1px}
  .promo-ic svg{display:block}
  .paymethods{display:flex;flex-direction:column;gap:10px;margin:14px 0 18px}
  .paymethod{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
  .paymethod:hover{border-color:var(--ink)}
  .paymethod:has(input:checked){border-color:var(--ezze);background:rgba(232,81,31,.04)}
  .paymethod input{margin-top:3px;accent-color:var(--ezze)}
  .paymethod-body{display:flex;flex-direction:column;gap:2px}
  .paymethod-body small{color:#6b625b;font-size:12.5px}
  .paymethod-ic{display:inline-flex;align-items:center;flex:0 0 auto}
  .paymethod-ic svg{display:block}
  .paymethod-body{flex:1 1 auto}
  .paymethod-logos{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
  .paymethod-logos img,.paymethod-logos svg{display:block;height:26px;width:auto;max-width:44px;object-fit:contain}
  @media (max-width:520px){ .paymethod-logos img,.paymethod-logos svg{height:22px} }
  .paymethod-group{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#8b8178;margin:14px 0 2px}
  .paymethod-group:first-child{margin-top:0}
  @media (max-width:768px){ .videoband.hide-mobile{display:none} }
  .videofull video{width:100%;height:100%;object-fit:cover;display:block}
  @keyframes pmfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .promo-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;line-height:1}
  .promo-x:hover{color:#fff}
  .promobar.hide{display:none}
  /* A page whose last block carries no layout class of its own — find a
     store, the journal index, brands — has no bottom padding at all, so
     its content sits against the divider above and the band below.
     [class="wrap"] matches only those bare ones, leaving .wrap.contactgrid
     and friends to their own spacing. */
  main.page > .wrap[class="wrap"]{padding-block:34px 80px}
  .trustband{background:var(--sand);border-top:1px solid var(--line)}
  .trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:44px 28px}
  @media(max-width:760px){.trustrow{grid-template-columns:1fr 1fr;gap:24px 16px}}
  @media(max-width:420px){.trustrow{grid-template-columns:1fr}}
  .trustitem{display:flex;align-items:flex-start;gap:13px}
  .trustitem svg{width:26px;height:26px;stroke:var(--ezze);fill:none;stroke-width:1.5;flex:0 0 auto;margin-top:2px}
  .trustitem b{display:block;font-size:14px}
  .trustitem span{font-size:12.5px;color:var(--ink-2)}
  .nlmsg{font-size:12.5px;margin-top:8px}
  .nlmsg.ok{color:#7CFFB2}.nlmsg.err{color:#ffb3a3}
  /* Newsletter opt-in on the register form: quieter than a field label, since
     it is an offer rather than something being asked for. */
  .nlopt{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:13px;line-height:1.5;color:var(--ink-2);cursor:pointer}
  .nlopt input{accent-color:var(--ezze);width:16px;height:16px;margin-top:1px;flex:0 0 auto}
  .prefnote{margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink-2)}
  /* Shown when no gateway can take payment, in place of the method list. */
  .paynone{padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--sand);font-size:14px;line-height:1.6;color:var(--ink)}
  .paynone a{color:var(--ezze);font-weight:600;text-decoration:underline}
  .totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:140;box-shadow:0 8px 24px rgba(0,0,0,.2)}
  .totop.show{opacity:1;visibility:visible;transform:none}
  .totop svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .totop:hover{background:var(--ezze)}

  /* Toast stack — bottom-right on desktop, bottom-centre on mobile, clear of the back-to-top button */
  .toaststack{position:fixed;right:22px;bottom:80px;z-index:210;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;max-width:340px}
  .toastitem{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.28);font-size:13.5px;transform:translateY(12px);opacity:0;transition:.28s ease}
  .toastitem.in{transform:none;opacity:1}
  .toastitem img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--sand);flex:0 0 auto}
  .toastitem .tbody{min-width:0;flex:1 1 auto}
  .toastitem .tname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
  .toastitem .tnote{color:rgba(255,255,255,.75);font-size:12.5px}
  .toastitem a.tlink{color:#fff;text-decoration:underline;font-weight:600;font-size:12.5px;white-space:nowrap}
  .toastitem .tclose{background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;flex:0 0 auto}
  .toastitem .tclose:hover{color:#fff}
  @media(max-width:640px){.toaststack{left:12px;right:12px;bottom:76px;align-items:stretch;max-width:none}}
  /* ============================================================
     COMPREHENSIVE MOBILE RESPONSIVE PASS
     ============================================================ */
  @media(max-width:768px){
    .wrap{padding-inline:16px}
    .sec{padding:48px 0}
    .pagehead{padding:28px 0 18px}
    .pagehead h1{font-size:clamp(28px,8vw,38px)}
    .pagesub{font-size:14px}
    .btn{font-size:13px;padding:11px 16px;gap:8px}
    .headrow{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
    .railright{width:100%;justify-content:space-between}
    .railright .btn{flex:0 0 auto}
    .filterbar{position:static}
    .filterbar .sortsel{margin-left:auto}
    .fbrow2{gap:14px}
    .costepnav{flex-direction:column-reverse;gap:10px;margin-top:22px}
    .costepnav .btn{width:100%;justify-content:center}
    .buybar{flex-wrap:wrap}
    #pdAdd{order:2;flex:1 1 100%}
    .qty{order:1}.savebtn{order:1}
    .pdp{gap:26px}
    .odtimeline{overflow-x:auto}
    .acctnav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:10px}
    .acctuser{flex-basis:100%;border-bottom:0;padding-bottom:6px;margin-bottom:0}
    .acctlink{padding:8px 12px;font-size:13px}
    .acctlink.signout{border-top:0;margin-top:0;padding-top:8px}
    .promo-track{font-size:12px;padding:9px 38px}
    .contactgrid,.store,.colayout,.cartlayout,.odlayout,.acctlayout{gap:26px}
    main.page > .wrap[class="wrap"]{padding-block:22px 52px}
  }
  @media(max-width:560px){
    .wrap{padding-inline:14px}
    .sec{padding:38px 0}
    .lead{font-size:24px;max-width:100%}
    .pagehead h1{font-size:30px}
    .stp{font-size:0;gap:0;justify-content:center}
    .stp .stpno{font-size:12px}
    .fgrid,.fgrid2{grid-template-columns:1fr}
    .cookiebar{flex-direction:column;align-items:stretch;gap:12px;left:12px;right:12px;bottom:12px;padding:16px 18px}
    .ckacts{display:flex}.ckacts .btn{flex:1;justify-content:center}
    .minicart{width:100%;max-width:100%}
    .modalbox{padding:24px 20px}
    .odside,.cartaside,.coaside{position:static}
    .colltile{aspect-ratio:4/5}
    .savedaddr{flex-direction:column}
    .saddr{min-width:0}
    .delform,.couponrow,.estform{flex-wrap:wrap}
    .rvsummary{gap:20px}
    .nfcode{font-size:76px}
  }
  /* ---- targeted responsive fixes ---- */
  .nav{justify-content:space-between}
  .trustitem>div{display:flex;flex-direction:column;gap:2px;line-height:1.3}
  .fbottom a{color:inherit;text-decoration:none;cursor:pointer}
  .fbottom a:hover{color:#fff;text-decoration:underline}
  @media(max-width:768px){
    /* checkout: sticky action bar at bottom (stays while scrolling the long form) */
    .costepnav{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 0;margin-top:20px;z-index:25;flex-direction:row;gap:10px;box-shadow:0 -6px 18px rgba(23,18,15,.06)}
    .costepnav .btn{width:auto}
    .costepnav .btn-fill{flex:1;justify-content:center}
    .costepnav .btn-line{flex:0 0 auto}
    /* trust band breathing room */
    .trustrow{padding:38px 18px;gap:30px 18px}
    /* order summary box spacing when stacked */
    .cartaside,.coaside{margin-top:6px}
  }
  @media(max-width:560px){
    .fbottom{align-items:center;text-align:center}
    .trustrow{grid-template-columns:1fr 1fr}
  }
  /* ---- ensure mobile header (menu collapses to burger) ---- */
  @media(max-width:1024px){
    .menu{display:none}
    .burger{display:inline-flex}
    .tools .tlabel{display:none}
  }
  /* declutter mobile header: keep logo + search + cart + burger; move account/wishlist to drawer */

  .dquick{display:flex;gap:8px;padding:16px 22px 6px}
  .dquick a{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--sand)}
  .dquick a:hover{border-color:var(--ezze);color:var(--ezze)}
  .dquick svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
  /* declutter mobile header at the burger breakpoint; account+wishlist go to drawer */
  @media(max-width:1024px){
    .tools .t-acct,.tools .t-wish,.tools .t-store{display:none!important}
    .brand{flex:0 0 auto}
    .brand img{height:34px;width:auto;max-width:none}
    .nav{gap:12px}
    .tools{gap:16px}
  }
  /* footer bottom links: one clean line with a proper separator */
  .flinks{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
  .flinks .sep{font-style:normal;color:rgba(255,255,255,.3)}
  /* category index: readable names, count never clipped on mobile */
  @media(max-width:820px){
    .ix{flex-wrap:wrap;gap:4px 14px;padding:20px 2px}
    .ix h3{font-size:28px;flex:1 1 auto;min-width:0}
    .ix .no{width:26px;font-size:13px}
    .ix .cnt{flex-basis:100%;margin-left:40px}
  }
  @media(max-width:480px){ .ix h3{font-size:24px} }  /* ===== split hero + key strip + brand video ===== */
  .herosplit{display:grid;grid-template-columns:1.5fr 1fr;height:clamp(540px,70vh,760px)}
  .hpanel{position:relative;overflow:hidden;display:flex;align-items:flex-end;cursor:pointer;color:#fff;background:linear-gradient(120deg,#3a2f28,#17120f)}
  .hpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .hpanel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.1) 56%,transparent),linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0) 52%)}
  .hpanel-in{position:relative;z-index:2;padding:clamp(28px,3.4vw,54px);max-width:660px}
  .hpanel-in .eyebrow{margin-bottom:10px}
  .hpanel-in h1{font-size:clamp(34px,4.2vw,62px);line-height:1.02;margin:4px 0 12px}
  .hpanel-in h2{font-size:clamp(26px,2.6vw,40px);line-height:1.05;margin:4px 0 12px}
  .hpanel-in .sub{color:rgba(255,255,255,.86);max-width:460px;margin-bottom:22px}
  /* The whole panel is the link, so its button takes no pointer events and
     can never match :hover itself. The panel drives the button's hover state
     instead — without this the buttons on the banner and promo row are the
     only ones on the site that never react. */
  .hpanel-in .btn{pointer-events:none}
  .hpanel:hover .btn{box-shadow:0 6px 18px rgba(0,0,0,.28);transform:translateY(-1px)}
  .hpanel:hover .btn.btn-fill{background:var(--ezze-deep)}
  .hpanel:hover .btn.btn-light{background:var(--sand-2)}
  @media(prefers-reduced-motion:reduce){.hpanel:hover .btn{transform:none}}
  /* Promo row beneath the banner: two equal panels, set apart from the hero
     so they read as their own offers rather than part of it. Shorter than the
     banner, so they support it rather than compete with it. */
  /* The band carries the spacing; .wrap inside it supplies the page width and
     its responsive side padding, so the row lines up with every other section.
     The two panels meet, as the banner's two halves do. */
  .promoband{padding-top:clamp(34px,4vw,64px)}
  .promosplit{display:grid;grid-template-columns:1fr 1fr;height:clamp(320px,44vh,400px);
    border-radius:14px;overflow:hidden}
  .promosplit .hpanel-promo{align-items:flex-end}
  .promosplit .hpanel-in{padding:clamp(28px,3vw,48px);max-width:none}
  .promosplit .hpanel-in h2{font-size:clamp(26px,2.6vw,40px);margin:6px 0 14px;line-height:1.08}
  .promosplit .hpanel-in .sub{margin-bottom:22px;font-size:16px;max-width:420px}
  /* A single active promo panel spans the row rather than leaving a gap. */
  .promosplit .hpanel-promo:only-child{grid-column:1 / -1}
  .herokeys{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:#fff}
  .herodots{display:none}
  .hkey{display:flex;align-items:center;gap:12px;padding:16px clamp(18px,1.9vw,30px);border-left:1px solid rgba(255,255,255,.09);font-size:13.5px;line-height:1.3}
  .hkey:first-child{border-left:0}
  .hkey b{color:#fff;font-weight:700}
  .hkey span{color:rgba(255,255,255,.82)}
  .hkey svg{width:22px;height:22px;stroke:var(--ezze);fill:none;stroke-width:1.6;flex:0 0 auto}
  .videoband{background:var(--sand);padding:54px 0 58px}
  .vbhead{margin-bottom:30px}
  .videofull{position:relative;width:100%;height:min(56.25vw,660px);overflow:hidden}
  .videofull iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;min-width:177.78vh;min-height:56.25vw;border:0;pointer-events:none}
  @media(max-width:900px){
    .herosplit{grid-template-columns:1fr;height:auto}
    .promosplit{grid-template-columns:1fr;height:auto}
    .promosplit .hpanel-promo{min-height:240px}
    .hpanel{min-height:380px}
    .herokeys{grid-template-columns:1fr 1fr}
    .hkey:nth-child(3){border-left:0}
  }
  @media(max-width:520px){
    .herokeys{grid-template-columns:1fr}
    .hkey{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
    .hkey:first-child{border-top:0}
    .hpanel{min-height:340px}
  }  /* ===== find a store page ===== */
  .storepage{display:grid;grid-template-columns:400px 1fr;gap:44px;align-items:start;padding:20px 0 90px}
  .storepane{display:flex;flex-direction:column;gap:20px}
  .storecard{background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:28px}
  .storecard h2{font-size:30px;margin:8px 0 18px}
  .storecard h3{font-size:22px;margin:8px 0 14px}
  .storecard .eyebrow{color:var(--ezze)}
  .storepage .storerow{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
  .storepage .storerow:first-of-type{border-top:0}
  .storepage .storerow b{font-weight:700;color:var(--ink-2);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
  .storecard .btn{margin-top:18px}
  .storecard a:not(.btn){color:var(--ezze);text-decoration:none}
  .storecard a:not(.btn):hover{text-decoration:underline}
  .psrow{display:flex;gap:10px;margin-bottom:12px}
  .psrow input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:9px;font-family:var(--body);font-size:14px;background:#fff}
  .psrow input:focus{outline:none;border-color:var(--ezze)}
  .psnote{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
  .storemapbig{position:relative;height:560px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
  .storemapbig iframe{width:100%;height:100%;border:0;display:block}
  @media(max-width:900px){
    .storepage{grid-template-columns:1fr;gap:26px}
    .storemapbig{height:360px;order:-1}
  }  /* ===== catalogue: four image tiles ===== */
  .cattiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .cattile{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;cursor:pointer;display:block;background:linear-gradient(150deg,#3a2f28,#17120f)}
  .cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;z-index:0}
  .cattile:hover img{transform:scale(1.06)}
  .cattile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(23,18,15,.76),rgba(23,18,15,.06) 56%,transparent)}
  .cattile-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;color:#fff}
  .cattile-in h3{font-size:clamp(19px,1.5vw,23px);margin:0 0 4px;line-height:1.15}
  .cattile-in .cnt2{font-size:12.5px;color:rgba(255,255,255,.82);display:block}
  .cattile-in .shoplink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:13.5px;color:#fff;transition:.22s}
  .cattile-in .shoplink svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
  .cattile:hover .shoplink{gap:11px;color:var(--ezze)}
  @media(max-width:900px){.cattiles{grid-template-columns:1fr 1fr;gap:14px}}
  @media(max-width:520px){.cattiles{grid-template-columns:1fr}.cattile{aspect-ratio:16/10}}  /* ===== mobile checkout: summary once at start + final summary at end ===== */
  .mob-only{display:none}
  .mosum{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:22px}
  .mosum-h{font-weight:700;font-size:14px;margin-bottom:12px}
  @media(max-width:900px){
    .mob-only{display:block}
    .coaside{display:none}
  }  /* ===== shop the collections (home) ===== */
  .collrow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .collcard{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;cursor:pointer;color:#fff;background:var(--cc, var(--sand-2));display:block}
  .collcard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 28% 14%,rgba(255,255,255,.24),transparent 56%)}
  .collcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.42),transparent 54%)}
  .collcard-n{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:13px 14px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:6px}
  .collcard-a{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;opacity:0;transform:translateX(-4px);transition:.2s;flex:0 0 auto}
  .collcard:hover .collcard-a{opacity:1;transform:none}
  @media(max-width:1100px){.collrow{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:700px){.collrow{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:460px){.collrow{grid-template-columns:1fr 1fr}}  /* ===== shop the collections (tile grid, category style) ===== */
  .colltiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .colltiles .cattile{aspect-ratio:4/5;background:var(--cc, var(--sand-2))}
  .colltiles .cattile::after{background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.1) 48%,transparent 72%)}
  .colltiles .cattile-in{padding:16px}
  .colltiles .cattile-in h3{font-size:clamp(16px,1.2vw,19px)}
  @media(max-width:1100px){.colltiles{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:700px){.colltiles{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:460px){.colltiles{grid-template-columns:1fr 1fr}}  /* ===== mobile refinements ===== */
  @media(max-width:768px){
    /* section headers: heading left, action button right (like desktop) */
    .headrow{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin-bottom:20px}
    .headrow>div:first-child{min-width:0}
    .railright{width:auto;gap:10px;flex:0 0 auto}
    .railnav{display:none}
    .headrow .lead{font-size:clamp(20px,5.6vw,28px)}
    .headrow .btn{flex:0 0 auto;white-space:nowrap}
    /* Hero key-points: one at a time, moving along by itself. Four of them
       side by side are unreadable on a phone, and a row that only scrolls
       when pushed is a row most people never see past the first item. */
    .herokeys{display:flex;overflow-x:auto;scrollbar-width:none;position:relative;
      scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
    .herokeys::-webkit-scrollbar{display:none}
    .herokeys .hkey{flex:0 0 100%;scroll-snap-align:center;justify-content:center;
      border-left:0;border-top:0;border-right:0;padding-block:18px}
    .herokeys .hkey:first-child{border-left:0}
    .herodots{display:flex;justify-content:center;gap:7px;background:var(--ink);padding:0 0 14px}
    .herodot{width:6px;height:6px;border-radius:50%;border:0;padding:0;
      background:rgba(255,255,255,.3);transition:.2s;cursor:pointer}
    .herodot.on{background:var(--ezze);width:18px;border-radius:3px}
    /* shop by category: horizontal scroll like the finish circles */
    .colltiles{display:flex;overflow-x:auto;gap:12px;padding:8px 2px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}
    .colltiles::-webkit-scrollbar{display:none}
    .colltiles .cattile{flex:0 0 42%;scroll-snap-align:start;aspect-ratio:3/4}
    /* brand video hidden on mobile (saves data / load) */
    .videoband{display:none}
  }  /* ===== out of stock cards + mobile price alignment ===== */
  .pcard.soldout .ph,.gcard.soldout .ph{opacity:.45}
  .pcard.soldout .meta,.gcard.soldout .meta{opacity:.62}
  .pcard.soldout:hover,.gcard.soldout:hover{transform:none;border-color:var(--line)}
  .oos-tag{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);background:var(--sand-2);border:1px solid var(--line);border-radius:20px;padding:7px 12px;white-space:nowrap;flex:0 0 auto}
  @media(max-width:768px){
    .pcard .prow,.gcard .prow{align-items:center;gap:6px;padding-top:9px}
    /* price scales with card width so long prices never clip */
    .pcard .pr,.gcard .pr{flex:1 1 auto;font-size:clamp(12px,3.5vw,15px)}
    .pcard .pr .was,.gcard .pr .was{font-size:clamp(9.5px,2.7vw,11.5px)}
    .pcard .meta,.gcard .meta{padding:11px 11px 12px;gap:4px}
    .addbtn{width:30px;height:30px;flex:0 0 30px}
    .addbtn svg{width:14px;height:14px}
    .oos-tag{font-size:9px;padding:5px 7px;letter-spacing:0}
  }
  .auflag{width:20px;height:10px;display:inline-block;vertical-align:-1px;margin-right:6px;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}