/* ==========================================================================
   Ostara — furniture store template
   Free template by NikoCodes. One stylesheet for home, shop, product, cart.
   Sections: tokens · reset · type · header · hero · product grid · product
   page · cart · editorial · subscribe · footer · responsive
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  --cream:  #f7f4ee;
  --sand:   #ece5d9;
  --sand-2: #ddd2c0;
  --ink:    #1a1815;
  --body:   #3a352e;
  --mute:   #6b6459;
  --line:   #ded5c6;
  --line-2: rgba(26,24,21,.22);
  --clay:   #b8501f;
  --green:  #2f5a3a;

  --wrap:   1360px;
  --gut:    clamp(20px, 3.2vw, 52px);
  --head-h: 72px;

  --s:      "Instrument Serif", Georgia, "Times New Roman", serif;
  --t:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--t);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,dt{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:.7rem;left:.7rem;z-index:200;padding:.7rem 1.1rem;background:var(--ink);
      color:var(--cream);font-size:.85rem;transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}

.shell{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.cap{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.cap--clay{color:var(--clay)}

/* ── Type ────────────────────────────────────────────────────────────────── */
.d1{font-family:var(--s);font-size:clamp(40px,5.6vw,82px);line-height:1;letter-spacing:-.012em;font-weight:400}
.d2{font-family:var(--s);font-size:clamp(30px,3.5vw,50px);line-height:1.04;letter-spacing:-.01em;font-weight:400}
.d3{font-family:var(--s);font-size:clamp(23px,2.3vw,30px);line-height:1.15;font-weight:400}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:999px;background:var(--ink);color:var(--cream);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.btn:hover{background:#332e27}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn--outline:hover{background:rgba(26,24,21,.05)}
.btn--full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link-u{font-size:13.5px;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* ── Announcement ────────────────────────────────────────────────────────── */
.ann{background:var(--ink);color:#f2ece0;text-align:center;padding:11px 16px;
     font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}

/* ── Header ──────────────────────────────────────────────────────────────── */
.head{border-bottom:1px solid var(--line);background:var(--cream);position:sticky;top:0;z-index:50}
.head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
          height:var(--head-h);gap:20px}
.head__nav{display:flex;gap:26px;font-size:14px;color:var(--body)}
.head__nav a:hover{color:var(--ink)}
.wordmark{font-family:var(--s);font-size:clamp(26px,2.6vw,34px);letter-spacing:.14em;
          line-height:1;text-align:center;white-space:nowrap}
.head__tools{display:flex;gap:18px;justify-content:flex-end;align-items:center;font-size:13.5px;color:var(--body)}
.head__tools a:hover{color:var(--ink)}
.bag{position:relative;border:1px solid var(--line-2);border-radius:999px;padding:7px 15px;
     color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.bag:hover{background:rgba(26,24,21,.05)}
.bag b{font-variant-numeric:tabular-nums;font-weight:500;min-width:.7em;text-align:center}
.burger{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--line);
        border-radius:999px;color:var(--ink)}
.burger__bars{display:grid;gap:5px;width:16px}
.burger__bars i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] .burger__bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:80;background:var(--cream);padding:20px 0;
        display:flex;flex-direction:column;justify-content:space-between;
        opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.drawer[hidden]{display:none}
.drawer.is-open{opacity:1;transform:none}
.drawer__bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px}
.drawer__in{display:grid;gap:2px}
.drawer__in a{display:block;font-family:var(--s);font-size:clamp(30px,9vw,40px);line-height:1.3;
              padding-bottom:10px;border-bottom:1px solid var(--line)}
body.nav-open{overflow:hidden}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;
      overflow:hidden;background:var(--sand)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(18,16,13,.82) 0%,rgba(18,16,13,.5) 40%,rgba(18,16,13,.05) 78%),
  linear-gradient(0deg,rgba(18,16,13,.5) 0%,rgba(18,16,13,0) 48%)}
.hero__box{position:relative;z-index:2;color:#fdfaf4;max-width:640px;
           padding-block:clamp(48px,7vw,96px)}
.hero__box .cap{color:rgba(253,250,244,.82)}
.hero__box h1{color:#fdfaf4;margin-top:18px}
.hero__box p{margin-top:18px;font-size:17px;max-width:44ch;color:rgba(253,250,244,.88)}
.hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn--ghost{background:transparent;color:#fdfaf4;border:1px solid rgba(253,250,244,.5)}
.btn--ghost:hover{background:rgba(253,250,244,.12)}

/* ── Facts strip ─────────────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:22px 0;
       border-bottom:1px solid var(--line);text-align:center}

/* ── Section head ────────────────────────────────────────────────────────── */
.sec{padding-block:clamp(44px,5.4vw,84px)}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
           margin-bottom:clamp(26px,3vw,40px)}

/* ── Product grid ────────────────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod{display:grid;align-content:start}
.prod__fig{position:relative;background:#efeae0;overflow:hidden;display:block}
.prod__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;
               transition:transform .8s var(--ease)}
.prod:hover .prod__fig img{transform:scale(1.04)}
/* The z-index matters only on hover: the photograph scales, and a transform
   promotes it into the positioned layer, where it would otherwise paint over
   this badge because it comes later in the document. */
.badge{position:absolute;left:12px;top:12px;z-index:2;
       background:var(--clay);color:#fff;font-size:10px;
       letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.badge--quiet{background:rgba(26,24,21,.82)}
/* The button is a sibling of the image link (so the click cannot fall through
   to the link), pulled back up over the image with a negative margin. It reads
   as a bar along the bottom edge of the photograph instead of a floating pill:
   square corners to match the card, full width so it lines up with the image,
   and dark enough to be legible on a pale or a dark photograph. The price is
   not repeated here — it is already in the row underneath. */
.quick{position:relative;z-index:2;margin:-46px 0 0;min-height:46px;
       display:flex;align-items:center;justify-content:space-between;gap:12px;
       padding:0 16px;text-align:left;color:var(--cream);
       background:rgba(20,18,15,.66);
       -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
       font-size:13px;font-weight:500;letter-spacing:.01em;
       transition:background-color .25s var(--ease)}
.quick__label{display:inline-flex;align-items:center;gap:9px}
.quick__label::before{content:"+";font-size:15px;line-height:1;opacity:.72}
.quick__go{opacity:.72;transition:transform .25s var(--ease)}
.quick:hover{background:var(--ink)}
.quick:hover .quick__go{transform:translateX(3px)}
.quick:focus-visible{outline:2px solid var(--cream);outline-offset:-4px}
.prod__meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:14px}
.prod__name{font-size:14.5px}
.prod__name a:hover{color:var(--clay)}
.price{font-size:14.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.prod__sub{font-size:12.5px;color:var(--mute);margin-top:3px}
.swatches{display:flex;gap:5px;margin-top:9px}
.swatches i{width:13px;height:13px;border-radius:50%;border:1px solid var(--line-2);display:block}

/* ── Editorial band ──────────────────────────────────────────────────────── */
.band{background:var(--sand);display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.band figure{overflow:hidden}
.band img{width:100%;height:100%;min-height:380px;object-fit:cover}
.band__txt{padding:clamp(36px,5vw,78px) clamp(26px,5vw,70px);display:flex;
           flex-direction:column;justify-content:center;gap:18px}
.band__txt p{color:var(--body);font-size:16px;max-width:42ch}

/* ── Services ────────────────────────────────────────────────────────────── */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);
       padding-top:32px;border-top:1px solid var(--line)}
.cols3 > div{display:grid;gap:10px;justify-items:start}
.cols3 svg{width:22px;height:22px;stroke:var(--clay);fill:none;stroke-width:1.4}
.cols3 b{font-size:15px;font-weight:500}
.cols3 p{color:var(--body);font-size:14px;max-width:32ch}

/* ── Subscribe ───────────────────────────────────────────────────────────── */
.news{background:var(--ink);color:#f2ece0;padding-block:clamp(42px,5vw,76px)}
.news__in{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.news h2{color:#f2ece0}
.news p{color:rgba(242,236,224,.68);font-size:15px;margin-top:12px;max-width:42ch}
.subform{display:grid;gap:12px}
.subrow{display:flex;gap:10px;border-bottom:1px solid rgba(242,236,224,.36);padding-bottom:12px}
.subrow input{flex:1;min-width:0;background:none;border:0;color:#f2ece0;font-size:15px;padding:8px 0}
.subrow input::placeholder{color:rgba(242,236,224,.45)}
.subrow input:focus{outline:2px solid #f2ece0;outline-offset:2px}
.subrow button{background:#f2ece0;color:var(--ink);border-radius:999px;padding:12px 24px;
               font-size:13px;font-weight:500}
.subrow button:hover{background:#fff}
.note{font-size:13.5px;color:rgba(242,236,224,.72);margin:0;min-height:1.2em}
.note[data-state="error"]{color:#ffb3a6}
.note--dark{color:var(--mute)}
.note--dark[data-state="error"]{color:#a3341f}
.note--dark[data-state="ok"]{color:var(--green)}

/* ── Page head (shop / product / cart) ───────────────────────────────────── */
.crumbs{font-size:12.5px;color:var(--mute);padding-top:22px}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin-inline:8px;color:var(--line-2)}
.pagehead{padding-block:clamp(20px,2.6vw,34px) 0}
.pagehead p{margin-top:12px;color:var(--body);max-width:56ch}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
         padding-block:20px;border-bottom:1px solid var(--line)}
.filters button{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
                border:1px solid var(--line);border-radius:999px;padding:7px 15px;
                transition:all .2s var(--ease)}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.filters .count{margin-left:auto;font-variant-numeric:tabular-nums}

/* ── Product detail ──────────────────────────────────────────────────────── */
/* align-items:start keeps the photograph column at its own height. Grid items
   stretch by default, so opening an accordion in the right column used to pull
   the left column down with it and leave a slide of bare background under the
   image. */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
     gap:clamp(26px,4vw,72px);align-items:start;
     padding-block:clamp(22px,3vw,40px) clamp(40px,5vw,72px)}
.pdp__media{background:#efeae0;overflow:hidden}
.pdp__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp__info{max-width:520px}
.pdp h1{font-family:var(--s);font-size:clamp(30px,3.4vw,46px);line-height:1.05;
        letter-spacing:-.012em;font-weight:400;margin-top:12px}
.pdp__price{font-size:22px;margin-top:14px;font-variant-numeric:tabular-nums}
.pdp__price s{color:var(--mute);font-size:16px;margin-left:10px}
.pdp__desc{margin-top:18px;color:var(--body);font-size:16px;max-width:46ch}
.opt{margin-top:26px}
.opt__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:11px}
.opt__head .cap{color:var(--ink)}
.opt__val{font-size:13.5px;color:var(--mute)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills button{font-size:13.5px;padding:10px 18px;border:1px solid var(--line-2);border-radius:999px;
              transition:all .2s var(--ease)}
.pills button:hover{border-color:var(--ink)}
.pills button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dots{display:flex;gap:10px}
.dots button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
             display:grid;place-items:center;transition:border-color .2s var(--ease)}
.dots button i{width:24px;height:24px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.12)}
.dots button:hover{border-color:var(--ink)}
.dots button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--cream) inset,0 0 0 3px var(--ink)}
.buy{display:flex;gap:12px;margin-top:28px;align-items:stretch}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px}
.qty button{width:44px;height:52px;font-size:17px;color:var(--body);display:grid;place-items:center}
.qty button:hover{color:var(--ink)}
.qty input{width:44px;height:52px;text-align:center;background:none;border:0;
           font-size:15px;font-variant-numeric:tabular-nums}
.buy .btn{flex:1}
.pdp__notes{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.pdp__notes p{font-size:13.5px;color:var(--mute);display:flex;gap:10px}
.pdp__notes p::before{content:"";flex:none;width:9px;height:1px;background:var(--clay);margin-top:.7em}
.acc{margin-top:26px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
             padding:16px 0;font-size:14.5px;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:18px;color:var(--mute)}
.acc details[open] summary::after{content:"–"}
.acc dl{display:grid;gap:8px;padding-bottom:18px}
.acc dl div{display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:14px}
.acc dt{color:var(--mute)}
.acc dd{color:var(--body)}
.acc p{font-size:14.5px;color:var(--body);padding-bottom:18px;max-width:50ch}

/* ── Cart ────────────────────────────────────────────────────────────────── */
.cart{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
      gap:clamp(26px,4vw,64px);padding-block:clamp(24px,3vw,40px) clamp(40px,5vw,72px)}
.lines{border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:104px 1fr auto;gap:18px;align-items:start;
      padding:20px 0;border-bottom:1px solid var(--line)}
.line__fig{background:#efeae0;overflow:hidden}
.line__fig img{width:100%;aspect-ratio:1;object-fit:cover}
.line__name{font-size:15.5px}
.line__name a:hover{color:var(--clay)}
.line__opt{font-size:13.5px;color:var(--mute);margin-top:5px}
.line__ctrls{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.line__end{text-align:right;display:grid;gap:12px;justify-items:end}
.line__sum{font-size:15.5px;font-variant-numeric:tabular-nums}
.rm{font-size:12.5px;color:var(--mute);border-bottom:1px solid transparent}
.rm:hover{color:var(--clay);border-bottom-color:var(--clay)}
.qty--sm button{width:36px;height:38px;font-size:15px}
.qty--sm input{width:36px;height:38px;font-size:14px}

.summary{background:var(--sand);padding:clamp(22px,2.6vw,32px);align-self:start;
         position:sticky;top:calc(var(--head-h) + 18px)}
.summary h2{font-family:var(--s);font-size:24px;font-weight:400}
.summary dl{margin-top:20px;display:grid;gap:12px}
.summary dl div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--body)}
.summary dl div.total{border-top:1px solid var(--line-2);padding-top:14px;margin-top:4px;
                      font-size:17px;color:var(--ink)}
.summary .btn{margin-top:22px}
.demo{margin-top:16px;border:1px dashed var(--line-2);padding:14px 16px;background:rgba(255,255,255,.5)}
.demo b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
        margin-bottom:6px}
.demo p{font-size:13px;color:var(--body);line-height:1.5}
.emptystate{border:1px solid var(--line);padding:clamp(28px,4vw,52px);text-align:center;
            display:grid;gap:14px;justify-items:center}
.emptystate p{color:var(--body);max-width:44ch}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:150;
       background:var(--ink);color:var(--cream);border-radius:999px;padding:13px 22px;
       font-size:14px;display:flex;gap:12px;align-items:center;
       transition:transform .4s var(--ease);max-width:calc(100vw - 40px)}
.toast.is-on{transform:translate(-50%,0)}
.toast a{border-bottom:1px solid rgba(247,244,238,.5)}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot{padding-block:clamp(38px,4.4vw,60px) 28px}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;
            padding-bottom:30px;border-bottom:1px solid var(--line)}
.foot h2{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
         color:var(--mute);margin-bottom:14px}
.foot li{padding:5px 0;font-size:14px;color:var(--body)}
.foot li a:hover{color:var(--clay)}
.foot__wm{font-family:var(--s);font-size:28px;letter-spacing:.12em;margin-bottom:12px}
.foot__blurb{font-size:14px;color:var(--mute);max-width:30ch}
.foot__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;
           font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .head__nav{display:none}
  .burger{display:grid}
  .head__in{grid-template-columns:auto 1fr auto}
  .wordmark{justify-self:center}
  .band{grid-template-columns:1fr}
  .band img{min-height:0;aspect-ratio:16/10}
  .news__in{grid-template-columns:1fr;gap:26px}
  .pdp{grid-template-columns:1fr;gap:34px}
  .pdp__info{max-width:none}
  .cart{grid-template-columns:1fr;gap:34px}
  .summary{position:static}
}

@media (max-width:900px){
  .pgrid,.pgrid--3{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .hero{min-height:0}
  .hero img{position:static;height:auto;aspect-ratio:4/3;order:2}
  .hero{display:grid;grid-template-columns:1fr}
  .hero__scrim{display:none}
  .hero__box{color:var(--ink);padding-block:clamp(30px,5vw,46px)}
  .hero__box .cap{color:var(--clay)}
  .hero__box h1{color:var(--ink)}
  .hero__box p{color:var(--body)}
  .btn--ghost{color:var(--ink);border-color:var(--line-2)}
  .btn--ghost:hover{background:rgba(26,24,21,.05)}
}

@media (max-width:620px){
  :root{--head-h:62px}
  .head__tools a:not(.bag){display:none}
  .pgrid,.pgrid--3{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:10px;text-align:left}
  .cols3{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:24px}
  .line{grid-template-columns:78px 1fr;gap:14px}
  .line__end{grid-column:2;justify-items:start;text-align:left;margin-top:6px}
  .subrow{flex-direction:column;border-bottom:0;padding-bottom:0}
  .subrow{border-bottom:1px solid rgba(242,236,224,.36)}
  .subrow button{padding:13px}
  .buy{flex-wrap:wrap}
  .buy .btn{flex:1 1 100%}
  /* Full-width stepper: the minus and plus belong at the two ends with the
     quantity between them, rather than all three bunched against the left. */
  .qty{flex:1;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .prod:hover .prod__fig img{transform:none}
}