/* ---- Fonts ---------------------------------------------------------- */
@font-face{font-family:'Marcellus';src:url('/assets/fonts/marcellus-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PT Serif';src:url('/assets/fonts/pt-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PT Serif';src:url('/assets/fonts/pt-serif-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens --------------------------------------------------------- */
:root{
  --bg:#FAF8F4; --surface:#FFFFFF; --ink:#1F1D1A; --ink-soft:#5B554C;
  --brown:#6B5544; --blue:#8FA9BE; --line:#E4DED4; --danger:#8C3A2B;
  --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:3.25rem;
  --space:1rem; --space-lg:2.5rem; --space-xl:5rem;
  --radius:2px; --measure:62ch; --shell:1140px;
}

/* ---- Base ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'PT Serif',Georgia,serif;font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:.01em;margin:0 0 var(--space)}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
p{margin:0 0 var(--space)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brown);text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--space)}
.prose{max-width:var(--measure)}
.section{padding:var(--space-xl) 0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Header and navigation ------------------------------------------ */
.site-header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space);
  min-height:72px;flex-wrap:wrap}
.nav__brand{font-family:'Marcellus',Georgia,serif;font-size:var(--step-1);
  text-decoration:none;color:var(--ink);letter-spacing:.02em}
.nav nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.nav nav a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;letter-spacing:.04em;
  text-transform:lowercase}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.cart-badge{display:inline-block;min-width:1.5em;padding:0 .35em;margin-left:.15em;
  background:var(--brown);color:var(--surface);border-radius:999px;
  font-size:.78rem;line-height:1.5em;text-align:center}

/* ---- Home ----------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-xl);align-items:center;
  padding:var(--space-xl) 0}
.hero img{width:100%;border-radius:var(--radius)}
.hero__text h1{font-size:var(--step-4)}
.hero__text p{color:var(--ink-soft)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)}
.card{display:block;text-decoration:none;color:var(--ink)}
.card__media{overflow:hidden;border-radius:var(--radius);background:var(--surface);aspect-ratio:3/4}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.03)}
.card__title{font-family:'Marcellus',Georgia,serif;font-size:var(--step-1);margin:.85rem 0 .2rem}
.card__price{color:var(--ink-soft);margin:0}
.band{margin:var(--space-xl) 0}
.band img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius)}

/* ---- Product -------------------------------------------------------- */
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-xl);padding:var(--space-lg) 0}
.product__gallery img{width:100%;border-radius:var(--radius);background:var(--surface)}
.product__thumbs{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.product__thumbs img{width:80px;height:80px;object-fit:cover;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius)}
.product__thumbs img:hover{border-color:var(--ink)}
.product__detail h1{font-size:var(--step-2)}
.price{font-size:var(--step-1);color:var(--ink-soft);margin:0 0 var(--space-lg)}
.details{padding-left:1.1rem;color:var(--ink-soft)}
.details li{margin-bottom:.35rem}
.size-label{display:block;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.5rem}
.size-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 var(--space-lg);padding:0}
.size{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:.6rem 1rem;border-radius:var(--radius);cursor:pointer;font:inherit;font-size:.95rem}
.size:hover:not([disabled]){border-color:var(--ink)}
.size[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.size--out{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.size--out .size__note{display:block;font-size:.7rem;letter-spacing:.06em;text-decoration:none;
  text-transform:uppercase;color:var(--danger)}

/* ---- Buttons and notices -------------------------------------------- */
.btn{display:inline-block;font:inherit;border:1px solid var(--ink);background:none;color:var(--ink);
  padding:.8rem 1.6rem;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  letter-spacing:.03em}
.btn:hover:not([disabled]){background:var(--ink);color:var(--bg)}
.btn--primary{background:var(--brown);border-color:var(--brown);color:#fff}
.btn--primary:hover:not([disabled]){background:var(--ink);border-color:var(--ink)}
.btn--quiet{border:none;padding:.4rem .2rem;text-decoration:underline;color:var(--ink-soft)}
.btn--quiet:hover{background:none;color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.notice{padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin:0 0 var(--space)}
.notice--error{border-color:var(--danger);color:var(--danger)}

/* ---- Basket --------------------------------------------------------- */
.basket{list-style:none;margin:0 0 var(--space-lg);padding:0;max-width:760px}
.basket__line{display:grid;grid-template-columns:80px 1fr auto auto;gap:var(--space);
  align-items:center;padding:var(--space) 0;border-bottom:1px solid var(--line)}
.basket__line img{border-radius:var(--radius)}
.basket__line p{margin:0}
.basket__line p:last-of-type{color:var(--ink-soft);font-size:.92rem}
.basket__line label{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.basket__line input{width:4.5rem;padding:.45rem;font:inherit;margin-left:.5rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.basket__total{font-size:var(--step-1)}

/* ---- Footer --------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);margin-top:var(--space-xl);
  padding:var(--space-lg) 0;color:var(--ink-soft);font-size:.92rem}
.site-footer p{margin:0 0 .4rem}

/* ---- Small screens -------------------------------------------------- */
@media (max-width:760px){
  :root{--step-4:2.3rem;--step-3:1.8rem;--step-2:1.4rem;--space-xl:3rem;--space-lg:1.75rem}
  .nav{min-height:auto;padding:.75rem 0}
  .nav nav{gap:.9rem;width:100%}
  .hero{grid-template-columns:1fr;gap:var(--space-lg);padding:var(--space-lg) 0}
  .product{grid-template-columns:1fr;gap:var(--space-lg)}
  .basket__line{grid-template-columns:64px 1fr;row-gap:.6rem}
  .basket__line img{width:64px;height:auto}
  .band img{max-height:320px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}