/* Tafelton (concept #4, homeware store). Mobile first at 390. Tokens: 5 colours incl. neutrals; the kiln red is the
   buy action ONLY (add to bag, checkout, bag count). Type: Epilogue (2026-10-08, one family for display and UI). */
@font-face{font-family:"Epilogue";src:url(fonts/epilogue-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --sky:#C4CDDB;      /* the studio table: hero ground, matched to the photo */
  --paper:#EDEFF2;    /* page */
  --card:#F7F8FA;     /* product tiles, sheet */
  --ink:#1C2130;      /* text, ink glaze */
  --muted:#565C6B;
  --line:rgba(28,33,48,.14);
  --buy:#A63D1A;      /* kiln red: buy action only */
  --buy-d:#8C3214;
  --r:14px;
  --pad:16px;
  --f-d:"Epilogue", system-ui, sans-serif;
  --f-u:"Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--f-u);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{font-family:var(--f-d);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* top note + header */
.note{background:var(--ink);color:#E9ECF2;font-size:12px;text-align:center;padding:6px var(--pad);letter-spacing:.01em}
.hd{position:sticky;top:0;z-index:40;background:var(--sky)}
.hd__in{height:52px;display:flex;align-items:center;gap:8px;padding:0 6px}
.hd__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.hd__mark{font:600 24px/1 var(--f-d);letter-spacing:-.03em;text-decoration:none;margin-right:auto;padding-left:2px}
.hd__nav{display:none}
.hd__tools{display:flex;align-items:center}
.hd__bag{position:relative;width:44px;height:44px;display:grid;place-items:center}
.hd__count{position:absolute;right:3px;top:5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--buy);color:#fff;font:700 11px/19px var(--f-u);text-align:center;transform:scale(.0001);transition:transform .25s var(--ease)}
.hd__count.is-on{transform:scale(1)}
.hd__count.is-bump{animation:bump .42s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* hero */
.hero{background:var(--sky)}
.hero__text{padding:18px var(--pad) 16px}
.hero h1{font-size:42px;max-width:10ch}
.hero__sub{margin:12px 0 0;max-width:34ch;color:#2D3342;font-size:15px;line-height:1.45}
.scene{position:relative;aspect-ratio:2/3;overflow:hidden}
.scene picture,.scene__img{width:100%;height:100%;object-fit:cover}
.spot{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;z-index:2;touch-action:manipulation}
.spot i{position:relative;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.38),0 2px 8px rgba(20,24,36,.35);transition:transform .2s var(--ease),background .2s}
.spot i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);animation:ping 2.4s var(--ease) infinite;animation-delay:var(--d,0s)}
.spot:nth-of-type(2) i::after{--d:.4s}.spot:nth-of-type(3) i::after{--d:.8s}.spot:nth-of-type(4) i::after{--d:1.2s}.spot:nth-of-type(5) i::after{--d:1.6s}.spot:nth-of-type(6) i::after{--d:2s}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.3);opacity:0}}
.spot:active i{transform:scale(.85)}
.spot.is-on{z-index:65}
.spot.is-on i{background:var(--ink);box-shadow:0 0 0 4px #fff,0 2px 10px rgba(20,24,36,.4)}
.spot.is-on i::after{animation:none;opacity:0}
.scene__hint{position:absolute;left:var(--pad);bottom:14px;margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:#2D3342}
.scene__pulse{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4)}

/* tray: what is on the table */
.tray{background:var(--paper);padding:18px 0 8px;border-top:1px solid var(--line)}
.tray__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--pad) 12px}
.tray__title{margin:0;font:600 17px/1.2 var(--f-d);letter-spacing:-.01em}
.tray__all{font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px;margin:-12px 0}
.tray__list{display:flex;gap:10px;overflow-x:auto;padding:0 var(--pad) 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.tray__list::-webkit-scrollbar{display:none}
.tray__list li{flex:0 0 auto;scroll-snap-align:start}
.tray__list button{display:flex;gap:10px;align-items:center;width:186px;padding:6px;border-radius:var(--r);background:var(--card);border:1.5px solid transparent;text-align:left;font-size:13px;line-height:1.3;transition:border-color .2s}
.tray__list button.is-on{border-color:var(--ink)}
.tray__list img{width:52px;height:65px;object-fit:cover;border-radius:9px}
.tray__list b{font-weight:600}

/* section heads */
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--pad);margin-bottom:16px}
.sec__head h2{font-size:30px}
.sec__link{font-size:13px;white-space:nowrap;text-underline-offset:3px}

/* categories: asymmetric shelf */
.cats{padding:44px 0 8px}
.cats__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 var(--pad)}
.cat a{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;aspect-ratio:4/5;background:var(--card)}
.cat--big{grid-row:span 2}
.cat--big a{aspect-ratio:auto;height:100%}
.cat--wide{grid-column:span 2}
.cat--wide a{aspect-ratio:2/1}
.cat--wide img{object-position:50% 70%}
.cat img{width:100%;height:100%;object-fit:cover}
.cat__t{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 11px;background:linear-gradient(to top,rgba(20,24,36,.62),rgba(20,24,36,0));color:#fff;font:600 17px/1.1 var(--f-d);letter-spacing:-.01em;display:flex;flex-direction:column;gap:3px}
.cat__t small{font:400 12px/1 var(--f-u);letter-spacing:0;opacity:.85}

/* product grid */
.new{padding:44px 0 12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;padding:0 var(--pad)}
.pc{display:flex;flex-direction:column}
.pc__img{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:4/5}
.pc__img img{width:100%;height:100%;object-fit:cover}
.pc__tag{position:absolute;left:8px;top:8px;font-size:11px;background:rgba(247,248,250,.92);padding:3px 7px;border-radius:6px}
.pc__meta{display:flex;align-items:flex-start;gap:6px;padding-top:9px}
.pc__txt{flex:1;min-width:0}
.pc__name{margin:0;font-size:14px;line-height:1.3}
.pc__price{margin:2px 0 0;font-weight:600;font-size:14px}
.pc__sw{display:flex;gap:5px;margin-top:7px}
.pc__sw i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pc__add{flex:0 0 auto;width:40px;height:40px;margin:-2px -4px 0 0;border-radius:50%;background:var(--buy);color:#fff;display:grid;place-items:center;transition:background .15s,transform .15s}
.pc__add svg{width:18px;height:18px;stroke-width:2}
.pc__add:hover{background:var(--buy-d)}.pc__add:active{transform:scale(.9)}
.pc__add.is-done{background:var(--ink)}

/* set */
.set{margin:40px var(--pad) 0;background:var(--card);border-radius:calc(var(--r) + 4px);overflow:hidden}
.set__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.set__body{padding:20px 18px 22px}
.set h2{font-size:30px;max-width:12ch}
.set__body>p{margin:10px 0 0;color:var(--muted)}
.set__tiles{display:flex;gap:8px;margin-top:16px}
.set__tiles button,.tiles button{min-height:44px;display:flex;align-items:center;gap:8px;padding:0 14px 0 10px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:14px;transition:border-color .15s}
.set__tiles button[aria-checked=true],.tiles button[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.set__tiles i,.tiles i{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.set__price{margin:18px 0 12px;font-size:15px;color:var(--muted)}
.set__price b{font:600 26px/1 var(--f-d);color:var(--ink);letter-spacing:-.01em}
.set__price span{margin-left:6px;font-size:13px}
.set .btn{display:inline-flex;width:auto;padding:0 28px}   /* 2026-10-07 fix (Max): content-sized, not section-wide */

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:.4em;width:100%;min-height:52px;border-radius:12px;font-weight:600;font-size:16px;transition:background .15s,transform .12s}
.btn--buy{background:var(--buy);color:#fff}
.btn--buy:hover{background:var(--buy-d)}.btn--buy:active{transform:scale(.98)}
.btn--buy.is-done{background:var(--ink)}

/* story */
.story{padding:56px 0 8px;display:grid;gap:18px}
.story__img{margin:0 var(--pad);border-radius:var(--r);overflow:hidden}
.story__img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.story__body{padding:0 var(--pad)}
.story h2{font-size:34px;max-width:11ch}
.story__body>p{margin:12px 0 0;color:#363C4B}
.story__facts{margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid var(--line);padding-top:14px}
.story__facts dt{font:600 20px/1.1 var(--f-d);letter-spacing:-.01em}
.story__facts dd{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.35}
.story__kiln{margin:0 var(--pad);border-radius:var(--r);overflow:hidden}
.story__kiln img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* service */
.svc{margin:44px 0 0;background:var(--sky)}
.svc ul{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:26px var(--pad)}
.svc b{display:block;font-weight:600;font-size:14px}
.svc span{display:block;font-size:13px;color:#3A4152;margin-top:2px;line-height:1.35}

/* reviews */
.rev{padding:48px var(--pad) 40px}
.rev h2{font-size:30px}
.rev__label{margin:8px 0 18px;font-size:12px;color:var(--muted)}
.rev__list{display:grid;gap:12px}
.rev__list li{background:var(--card);border-radius:var(--r);padding:16px}
.rev blockquote{margin:0;font:500 17px/1.4 var(--f-d);letter-spacing:0}
.rev cite{display:block;margin-top:10px;font:400 12px/1.3 var(--f-u);font-style:normal;color:var(--muted)}

/* footer */
.ft{background:var(--ink);color:#D7DCE6;padding:36px var(--pad) 40px}
.ft__mark{margin:0 0 20px;font:600 44px/1 var(--f-d);letter-spacing:-.03em;color:#fff}
.ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft__cols a{display:inline-block;padding:5px 0;text-decoration:none;font-size:14px}
.ft__addr{margin:24px 0 0;font-size:13px}
.ft__legal{margin:10px 0 0;font-size:12px;color:#9AA2B3}

/* sheet */
.veil{position:fixed;inset:0;background:rgba(20,24,36,.28);z-index:60;opacity:0;transition:opacity .3s}
.veil.is-on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-radius:20px 20px 0 0;padding:10px var(--pad) calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:112px 1fr;gap:4px 14px;transform:translateY(calc(100% + 48px));transition:transform .38s var(--ease),visibility 0s linear .38s;box-shadow:0 -10px 40px rgba(20,24,36,.18);max-height:90svh;overflow:auto}
.sheet{visibility:hidden}
.sheet.is-open{transform:none;visibility:visible;transition:transform .38s var(--ease)}
.sheet__grip{grid-column:1/-1;justify-self:center;width:38px;height:4px;border-radius:2px;background:rgba(28,33,48,.2);margin-bottom:8px}
.sheet__x{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.sheet__media{grid-column:1;grid-row:2;border-radius:12px;overflow:hidden;background:#fff;align-self:start}
.sheet__media img{width:112px;height:140px;object-fit:cover}
.sheet__body{display:contents}
.sheet__info{grid-column:2;grid-row:2;align-self:start;padding-right:30px}
.sheet__cat{margin:2px 0 4px;font-size:12px;color:var(--muted)}
.sheet__name{font-size:26px}
.sheet__price{margin:8px 0 0;font-weight:600;font-size:18px}
.sheet__desc{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.4}
.sheet__opt{grid-column:1/-1;margin-top:14px}
.sheet__lbl{margin:0 0 8px;font-size:13px;color:var(--muted)}
.sheet__lbl b{color:var(--ink);font-weight:600}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tiles--glaze button{padding:0 14px 0 6px}
.tiles--glaze img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.tiles--qty button{padding:0 14px;flex-direction:column;justify-content:center;gap:0;line-height:1.15;min-width:84px}
.tiles--qty small{font-size:11px;color:var(--muted)}
.sheet .btn{grid-column:1/-1;margin-top:16px}
.sheet__trust{grid-column:1/-1;margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)}

/* bag drawer */
.bag{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(420px,92vw);background:var(--paper);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .38s var(--ease),visibility 0s linear .38s;box-shadow:-10px 0 40px rgba(20,24,36,.2)}
.bag{visibility:hidden}
.bag.is-open{transform:none;visibility:visible;transition:transform .38s var(--ease)}
.bag__head{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad) 8px;position:relative}
.bag__head h2{font-size:26px}
.bag__head h2 span{font:400 15px var(--f-u);color:var(--muted);letter-spacing:0}
.bag__head .sheet__x{position:static}
.bag__ship{padding:0 var(--pad) 12px;border-bottom:1px solid var(--line)}
.bag__ship p{margin:0 0 8px;font-size:13px}
.bag__bar{height:6px;border-radius:3px;background:rgba(28,33,48,.1);overflow:hidden}
.bag__bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s var(--ease)}
.bag__list{flex:1;overflow:auto;padding:4px var(--pad)}
.bag__list li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bag__list img{width:64px;height:80px;object-fit:cover;border-radius:9px;background:var(--card)}
.bag__list p{margin:0;font-size:14px;line-height:1.3}
.bag__list small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.bag__list b{font-weight:600;font-size:14px}
.bag__rm{display:block;margin-top:4px;font-size:12px;color:var(--muted);text-decoration:underline;min-height:28px}
.bag__empty{padding:24px var(--pad);margin:0;color:var(--muted)}
.bag__empty[hidden]{display:none}
.bag__foot{padding:12px var(--pad) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.bag__row{display:flex;justify-content:space-between;margin:0 0 4px;font-size:14px}
.bag__row--s{color:var(--muted)}
.bag__row--t{margin:8px 0 12px;font-size:16px}
.bag__fine{margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:20px;z-index:90;margin:0;padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;transform:translate(-50%,140%);opacity:0;transition:transform .3s var(--ease),opacity .3s;pointer-events:none;white-space:nowrap}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* tablet / desktop: support, not the main target this pass */
@media (min-width:700px){
  :root{--pad:28px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .cats__grid{grid-template-columns:repeat(3,1fr)}
  .cat--big{grid-row:auto}.cat--wide{grid-column:auto}
  .cat--big a,.cat--wide a{aspect-ratio:4/5;height:auto}
  .svc ul{grid-template-columns:repeat(4,1fr)}
  .rev__list{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  :root{--pad:clamp(28px, 3vw, 64px)}
  .hd__in{height:64px;padding:0 calc(var(--pad) - 12px)}
  .hd__menu{display:none}
  .hd__mark{font-size:28px;margin-right:0}
  .hd__nav{display:flex;gap:26px;margin:0 auto;font-size:14px}
  .hd__nav a{text-decoration:none}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:min(calc(100vh - 92px), 1040px)}
  .hero__text{padding:0 var(--pad) 28px}
  .hero h1{font-size:clamp(56px, 4.8vw, 108px)}
  .hero__sub{max-width:40ch}
  .hero__sub{font-size:18px}
  /* 2026-10-07 fix (Max): the photo was flush against the window's top, right and bottom edges, so the table read over-cropped;
     it now sits inset as a framed 2:3 photo, whole composition visible above the fold */
  .scene{grid-column:2;grid-row:1;align-self:center;height:min(calc(100vh - 92px - 48px), 990px);min-height:520px;width:auto;margin:24px var(--pad) 24px 0;border-radius:18px}
  .tray{background:transparent;border:0;padding:0}
  .tray__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;max-width:640px;padding-bottom:0}
  .tray__list button{width:100%}
  .tray__head{max-width:640px;box-sizing:content-box}
  .tray__list button{background:rgba(247,248,250,.7)}
  .grid{grid-template-columns:repeat(4,1fr);gap:32px 18px}
  .cats__grid{grid-template-columns:repeat(6,1fr);gap:12px}
  .sec__head h2{font-size:clamp(34px, 2.6vw, 52px)}
  .set{display:grid;grid-template-columns:1.2fr 1fr;margin:64px var(--pad) 0}
  .set__img img{height:100%;aspect-ratio:auto}
  .set__body{padding:44px;align-self:center}
  .set h2{font-size:clamp(34px, 2.6vw, 50px)}
  .story{grid-template-columns:1fr 1fr 1fr;align-items:end;padding-top:80px}
  .story__img{margin:0 0 0 var(--pad)}
  .story__img img{aspect-ratio:4/5}
  .story__kiln{margin:0 var(--pad) 0 0}
  .story h2{font-size:clamp(36px, 2.8vw, 54px)}
  /* desktop: the sheet docks beside the photo (in the text column), so the tapped piece stays visible */
  .sheet{left:auto;right:calc(clamp(520px, 100vh - 140px, 990px) * 2 / 3 + var(--pad) + 24px);bottom:24px;width:440px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 2026-10-08 (Max): final shopping invitation + footer; wide screens keep content measured */
.end{display:grid;margin:8px var(--pad) 48px;background:var(--sky);border-radius:18px;overflow:hidden}
.end__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.end__body{padding:26px 20px 28px}
.end h2{font-size:34px;max-width:12ch}
.end__body>p{margin:12px 0 0;color:#2D3342;max-width:40ch}
.end__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px!important}
.end__go{display:inline-flex;width:auto;padding:0 28px;text-decoration:none}
.end__lk{font-weight:600;text-underline-offset:4px}
.ft{padding:40px var(--pad) 36px}
.ft__in{display:grid;gap:28px}
.ft__mark{margin:0}
.ft__addr{margin:10px 0 0;font-size:14px;max-width:30ch}
.ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.ft__cols h3{font:600 13px/1.2 var(--f-u);letter-spacing:0;color:#fff;margin:0 0 8px}
.ft__cols ul{list-style:none;margin:0;padding:0;font-size:14px}
.ft__cols li{padding:4px 0}
.ft__legal{margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:960px){
  .end{grid-template-columns:1.1fr 1fr;margin-top:24px}
  .end__img img{height:100%;aspect-ratio:auto;min-height:420px}
  .end__body{align-self:center;padding:48px}
  .end h2{font-size:clamp(36px, 2.8vw, 54px)}
  .ft__in{grid-template-columns:minmax(0,1.1fr) minmax(0,3fr);column-gap:48px}
  .ft__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft__legal{grid-column:1 / -1}
}
@media (min-width:1840px){
  main>section:not(.hero):not(.svc),.ft__in{max-width:1760px;margin-inline:auto}
  .set,.end{margin-inline:auto;max-width:calc(1760px - 2 * var(--pad))}
  .svc ul{max-width:1760px;margin-inline:auto}
}

/* 2026-10-08 cloud pass (Max: "feel like a well set up e-store"): standard shop order under the hero = promises strip,
   shelves, filterable product grid, set, story, reviews, questions, newsletter + payment footer. Hero and dots unchanged. */
.hero{display:flex;flex-direction:column}
.hero__col{display:contents}
.hero__text{order:1}.scene{order:2}.tray{order:3}
section[id],.ft{scroll-margin-top:64px}
h2{text-wrap:balance}

/* promises strip */
.svc{margin:0;background:var(--card);border-bottom:1px solid var(--line)}
.svc ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:20px var(--pad)}
.svc li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start}
.svc svg{grid-row:span 2;width:22px;height:22px;margin-top:1px;color:var(--ink)}
.svc b{font-size:13.5px}
.svc span{font-size:12.5px;color:var(--muted)}

/* shelves: equal tiles, name under the photo */
.cats{padding:40px 0 8px}
.cats__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
.cat a{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.cat img{aspect-ratio:1/1;height:auto;border-radius:var(--r);background:var(--card)}
.cat__t{position:static;background:none;color:var(--ink);padding:8px 2px 0;font:600 14px/1.2 var(--f-u);letter-spacing:0;gap:2px}
.cat__t small{font-size:12px;color:var(--muted);opacity:1}
.cat a:hover img{filter:brightness(.96)}
.sec__count{margin:0;font-size:13px;color:var(--muted);white-space:nowrap}

/* filter chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad) 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* product cards: the whole photo opens the piece, + sits inside the photo */
.pc__img .pc__open{position:absolute;inset:0;z-index:1}
.pc__tag{z-index:2}
.pc__add{position:absolute;right:8px;bottom:8px;z-index:2;margin:0;width:42px;height:42px;box-shadow:0 2px 8px rgba(20,24,36,.22)}
.pc__txt{padding-top:10px}
.pc__img img{transition:transform .5s var(--ease)}
.pc:hover .pc__img img{transform:scale(1.03)}
.more{margin:26px 0 0;text-align:center}
.more[hidden]{display:none}
.more__btn{min-height:48px;padding:0 26px;border-radius:12px;border:1.5px solid var(--ink);font-weight:600;font-size:15px}
.more__btn:hover{background:var(--ink);color:#fff}

/* story: photo + text */
.story__kiln{display:none}

/* reviews */
.rev{padding-bottom:16px}

/* questions */
.faq{padding:40px var(--pad) 48px}
.faq h2{font-size:30px;margin-bottom:16px}
.faq__list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-weight:600;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq details p{margin:0 0 16px;color:#363C4B;max-width:62ch}

/* footer: newsletter + payment methods */
.news{display:grid;gap:14px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
.news__h{margin:0;font:600 22px/1.15 var(--f-d);letter-spacing:-.02em;color:#fff}
.news p{margin:6px 0 0;font-size:14px;color:#B9C0CE}
.news__row{display:flex;gap:8px}
.news input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px}
.news input::placeholder{color:#9AA2B3}
.news input:focus{outline:2px solid #fff;outline-offset:1px}
.news button{min-height:48px;padding:0 20px;border-radius:12px;background:#fff;color:var(--ink);font-weight:600}
.ft__pay{display:flex;flex-wrap:wrap;gap:8px}
.ft__pay li{font-size:12px;font-weight:600;color:#D7DCE6;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:5px 9px}

/* phone menu */
.menu{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(360px,88vw);background:var(--paper);padding:10px var(--pad) 24px;overflow:auto;transform:translateX(-102%);visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s;box-shadow:10px 0 40px rgba(20,24,36,.2)}
.menu.is-open{transform:none;visibility:visible;transition:transform .38s var(--ease)}
.menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.menu__head .hd__mark{margin:0}
.menu__head .sheet__x{position:static}
.menu__cats a{display:block;padding:12px 0;font:600 22px/1.2 var(--f-d);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line)}
.menu__more{margin-top:22px}
.menu__more a{display:block;padding:9px 0;font-size:15px;text-decoration:none;color:#363C4B}

/* search */
.search{position:sticky;top:52px;z-index:39;background:var(--paper);border-bottom:1px solid var(--line);display:none;box-shadow:0 12px 30px rgba(20,24,36,.12)}
.search.is-open{display:block}
.search__in{display:flex;align-items:center;gap:10px;padding:12px var(--pad)}
.search__field{flex:1;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line)}
.search__field input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none}
.search__field:focus-within{border-color:var(--ink)}
.search__x{font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.search__res{padding:0 var(--pad) 12px;max-height:60vh;overflow:auto}
.search__res button{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 0;text-align:left;border-bottom:1px solid var(--line)}
.search__res img{width:44px;height:55px;object-fit:cover;border-radius:8px}
.search__res span{font-size:14px;line-height:1.3}
.search__res small{display:block;font-size:12px;color:var(--muted)}
.search__res b{font-size:14px;font-weight:600}
.search__none{padding:10px 0;color:var(--muted);font-size:14px}

@media (min-width:700px){
  .svc ul{grid-template-columns:repeat(4,1fr)}
  .cats__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .news{grid-template-columns:1fr minmax(320px,440px);align-items:center}
}
@media (min-width:960px){
  .hero{display:grid}
  .hero__col{display:flex;flex-direction:column;justify-content:center;grid-column:1;grid-row:1;padding:24px 0}
  .search{top:64px}
  .search__in,.search__res{max-width:720px;margin-inline:auto}
  .svc ul{padding:22px var(--pad)}
  .cats{padding-top:64px}
  .new{padding-top:64px}
  .chips{flex-wrap:wrap;overflow:visible}
  .story{grid-template-columns:1fr 1fr;align-items:center;gap:56px;padding-top:88px}
  .story__img{margin:0 0 0 var(--pad)}
  .story__body{padding:0 var(--pad) 0 0;max-width:620px}
  .rev{padding-top:80px}
  .faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding-top:64px;padding-bottom:72px}
  .faq h2{font-size:clamp(34px, 2.6vw, 52px)}
  .rev h2{font-size:clamp(34px, 2.6vw, 52px)}
  .ft__in{row-gap:32px}
  .news{grid-column:1 / -1}
  .ft__pay{grid-column:1 / -1}
}
@media (min-width:960px){
  .story__img img{aspect-ratio:4/3}
  .set h2,.story h2{max-width:16ch}
  .end__img{position:relative;min-height:460px}
  .end__img img{position:absolute;inset:0;width:100%;height:100%;min-height:0}
}

/* 2026-10-08 (Max): new hero photos from the same shoot, every piece whole. Phone: square shot (Pexels 8903303);
   desktop: wide shot (Pexels 8903655) next to a narrower text column. The product sheet docks over the text column. */
.scene{aspect-ratio:1/1}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(380px,1fr) minmax(0,1.9fr);min-height:0;align-items:center}
  .scene{grid-column:2;grid-row:1;aspect-ratio:2/1;height:auto;min-height:0;width:auto;margin:28px var(--pad) 28px 0}
  .spot{left:var(--dx);top:var(--dy)}
  .hero h1{font-size:clamp(52px, 4.4vw, 100px)}
  .hero__sub{font-size:17px}
  .tray__list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
  .tray__head{max-width:520px;flex-wrap:wrap}
  .sheet{right:auto;left:var(--pad)}
}

/* 2026-10-09 (Max): a standard shop: collection pages (collection.html?c=) and product pages (product.html?p=);
   cards, shelf tiles, search results and the sheet all link to the product or collection page. */
.pc__img .pc__open{display:block}
.pc__img .pc__open img{width:100%;height:100%;object-fit:cover}
.pc__name{display:block;font-size:14px;line-height:1.3;text-decoration:none}
.pc__name:hover{text-decoration:underline;text-underline-offset:3px}
.hd__nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.menu__cats a[aria-current=page]{color:var(--buy-d)}
.search__res a{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.search__res img{width:44px;height:55px;object-fit:cover;border-radius:8px}
.search__all a{display:block;padding:12px 0;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.sheet__more{grid-column:1/-1;justify-self:center;margin-top:6px;font-size:14px;font-weight:600;text-underline-offset:3px;min-height:40px;display:flex;align-items:center}
.bag__list a{text-decoration:none}

/* breadcrumb */
.crumbs{padding:14px var(--pad) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 8px;color:rgba(28,33,48,.3)}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

/* collection page */
.col__head{padding:18px var(--pad) 18px}
.col__head h1{font-size:40px}
.col__head p{margin:10px 0 0;color:#363C4B;max-width:52ch}
.col__side{display:none}
.col__chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad) 14px;scrollbar-width:none}
.col__chips::-webkit-scrollbar{display:none}
.col__chips a{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:14px;text-decoration:none;white-space:nowrap}
.col__chips small,.col__side small{font-size:12px;color:var(--muted)}
.col__chips a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.col__chips a[aria-current] small{color:#C9CED9}
.col__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:0 var(--pad) 16px}
.col__bar p{margin:0;font-size:13px;color:var(--muted)}
.sort{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.sort span{font-size:13px;color:var(--muted);margin-right:2px}
.sort button{flex:0 0 auto;min-height:36px;padding:0 11px;border-radius:9px;font-size:13px;border:1.5px solid transparent;white-space:nowrap}
.sort button[aria-pressed=true]{border-color:var(--ink);font-weight:600}
.col .grid{padding-bottom:48px}
.col .svc{border-top:1px solid var(--line)}

/* product page */
.pdp__top{display:grid;gap:18px;padding:12px 0 0}
.pdp__gal{position:relative;min-width:0}
.pdp__main{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0}
.pdp__main::-webkit-scrollbar{display:none}
.pdp__main li{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5;background:var(--card)}
.pdp__main img{width:100%;height:100%;object-fit:cover}
.pdp__dots{position:absolute;left:0;right:0;bottom:12px;margin:0;display:flex;justify-content:center;gap:6px;pointer-events:none}
.pdp__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(20,24,36,.15)}
.pdp__dots i.is-on{background:#fff;transform:scale(1.25)}
.pdp__thumbs{display:none}
.pdp__info{padding:0 var(--pad)}
.pdp__cat{margin:0 0 6px;font-size:13px;color:var(--muted)}
.pdp__info h1{font-size:34px;letter-spacing:-.03em}
.pdp__price{margin:10px 0 0;font-size:13px;color:var(--muted)}
.pdp__price b{font:600 24px/1 var(--f-d);color:var(--ink);letter-spacing:-.01em;margin-right:4px}
.pdp__desc{margin:14px 0 0;color:#363C4B;max-width:46ch}
.pdp__info .sheet__opt{margin-top:20px}
.pdp__info .sheet__opt[hidden]{display:none}
.pdp__buy{display:flex;gap:10px;margin-top:22px}
.pdp__buy .btn{flex:1}
.step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;min-height:52px}
.step button{width:42px;height:50px;font-size:20px;line-height:1}
.step button:disabled{opacity:.3;cursor:default}
.step output{min-width:22px;text-align:center;font-weight:600}
.pdp__usp{margin:16px 0 0;display:grid;gap:6px;font-size:13px;color:#363C4B}
.pdp__usp li{display:flex;gap:8px;align-items:center}
.pdp__usp li::before{content:"";width:12px;height:7px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:translateY(-2px) rotate(-45deg);flex:0 0 auto}
.pdp__acc{margin-top:22px;border-top:1px solid var(--line)}
.pdp__acc details{border-bottom:1px solid var(--line)}
.pdp__acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:600;font-size:15px}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:"";width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.pdp__acc details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.pdp__acc p{margin:0 0 16px;color:#363C4B;font-size:14px}
.pdp__facts{margin:0 0 14px;display:grid;gap:8px;font-size:14px}
.pdp__facts span{display:block;font-size:12px;color:var(--muted)}
.rel{padding:48px 0 56px}
.pdp__sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--card);box-shadow:0 -8px 24px rgba(20,24,36,.12);transform:translateY(110%);transition:transform .3s var(--ease)}
.pdp__sticky.is-on{transform:none}
.pdp__sticky p{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.3}
.pdp__sticky span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp__sticky .btn{width:auto;min-height:46px;padding:0 20px}

@media (min-width:700px){
  .col .grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  .crumbs{padding-top:22px}
  .col__head{padding:22px var(--pad) 30px}
  .col__head h1{font-size:clamp(44px, 3.6vw, 72px)}
  .col__body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding:0 var(--pad)}
  .col__side{display:block;position:sticky;top:84px;align-self:start}
  .col__sideh{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
  .col__side a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:15px}
  .col__side a[aria-current]{font-weight:600}
  .col__side a:hover{text-decoration:underline;text-underline-offset:3px}
  .col__chips{display:none}
  .col__bar,.col .grid{padding-left:0;padding-right:0}
  .col .grid{grid-template-columns:repeat(3,1fr);gap:32px 18px}
  .pdp__top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;padding:20px var(--pad) 0;align-items:start}
  .pdp__gal{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;position:sticky;top:84px}
  .pdp__main{grid-column:2;grid-row:1;border-radius:var(--r);overflow:hidden}
  .pdp__dots{display:none}
  .pdp__thumbs{display:flex;flex-direction:column;gap:10px;grid-column:1;grid-row:1}
  .pdp__thumbs button{display:block;border-radius:10px;overflow:hidden;border:1.5px solid transparent;padding:2px}
  .pdp__thumbs button[aria-current=true]{border-color:var(--ink)}
  .pdp__thumbs img{width:76px;height:95px;object-fit:cover;border-radius:7px}
  .pdp__info{padding:8px 0 0;max-width:560px}
  .pdp__info h1{font-size:clamp(38px, 3vw, 56px)}
  .pdp__sticky{display:none}
  .rel{padding:88px 0 80px}
}
@media (min-width:1280px){
  .col .grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1840px){
  main.col,main.pdp{max-width:1760px;margin-inline:auto}
}