/* ============================================================
   MDETAILS — Design System
   Premium minimal · architectural · tactile
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  /* — Brand — */
  --graphite:#2C2C2C;
  --graphite-90:#3A3A3A;
  --bronze:#AE906F;
  --bronze-deep:#967A5B;
  --bronze-soft:#C4AC8E;

  /* — Warm neutrals — */
  --warm-white:#F6F2EC;     /* page base */
  --paper:#FBF9F5;          /* raised cards */
  --stone:#E9E3D9;
  --sand:#DED2C0;
  --bamboo:#CBB089;
  --clay:#C3B4A3;
  --soft-grey:#9C9690;

  /* — Functional — */
  --ink:#2C2C2C;
  --ink-2:#615C56;          /* secondary text */
  --ink-3:#8E8780;          /* muted */
  --line:rgba(44,44,44,.12);
  --line-strong:rgba(44,44,44,.22);
  --field:#FFFFFF;
  --ok:#5E7C63;             /* in-stock */
  --warn:#B8893F;           /* limited */

  /* — E-commerce states (calm, never loud) — */
  --price:#2C2C2C;          /* price text */
  --sale:#A35A43;           /* discount accent — muted terracotta */
  --sale-bg:rgba(163,90,67,.10);
  --st-in:#5E7C63;          /* in stock */
  --st-limited:#B8893F;     /* limited */
  --st-pre:#7E8AA0;         /* preorder — calm slate */
  --st-out:#A88B86;         /* out — soft clay */
  --st-req:#9C9690;         /* price on request */

  /* — Radius — */
  --r-xs:6px;
  --r:10px;
  --r-lg:14px;
  --r-pill:999px;

  /* — Shadow (used sparingly) — */
  --sh-card:0 1px 2px rgba(44,44,44,.04);
  --sh-hover:0 18px 40px -22px rgba(44,44,44,.30);
  --sh-pop:0 24px 60px -20px rgba(44,44,44,.28);

  /* — Type scale — */
  --f: 'Montserrat', system-ui, sans-serif;

  /* — Layout — */
  --maxw:1320px;
  --gut:clamp(20px,5vw,64px);
  --header-h:78px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;
  font-family:var(--f);
  background:var(--warm-white);
  color:var(--ink);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--bronze);color:#fff}

/* ---------- Typography ---------- */
.display{
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.018em;
  font-size:clamp(40px,6.4vw,86px);
  margin:0;
}
.h1{font-weight:300;line-height:1.06;letter-spacing:-.015em;font-size:clamp(32px,4.6vw,58px);margin:0}
.h2{font-weight:300;line-height:1.1;letter-spacing:-.012em;font-size:clamp(27px,3.4vw,42px);margin:0}
.h3{font-weight:400;line-height:1.18;letter-spacing:-.008em;font-size:clamp(21px,2.2vw,28px);margin:0}
.h4{font-weight:500;line-height:1.3;font-size:19px;margin:0}
.lede{font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--ink-2)}
.body{font-size:16px;line-height:1.65;color:var(--ink-2)}
.small{font-size:14px;line-height:1.55}
.eyebrow{
  font-weight:500;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze-deep);
}
.eyebrow.muted{color:var(--ink-3)}
.serif{font-family:var(--f)} /* placeholder hook */
.num{font-variant-numeric:tabular-nums}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,128px)}
.section-sm{padding-block:clamp(44px,6vw,80px)}
.row{display:flex;gap:16px}
.row.ac{align-items:center}
.row.jb{justify-content:space-between}
.col{display:flex;flex-direction:column}
.grow{flex:1}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--graphite); --fg:#fff; --bd:var(--graphite);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f);font-weight:500;font-size:14px;letter-spacing:.02em;
  padding:14px 26px;border-radius:var(--r);border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s;
  white-space:nowrap;line-height:1;
}
.btn:hover{background:var(--graphite-90);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ic,.btn svg{width:17px;height:17px;flex:none}
.btn-lg{padding:17px 32px;font-size:15px}
.btn-sm{padding:10px 16px;font-size:13px}
.btn-block{display:flex;width:100%}

.btn-bronze{--bg:var(--bronze);--bd:var(--bronze);--fg:#fff}
.btn-bronze:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}

.btn-outline{--bg:transparent;--fg:var(--graphite);--bd:var(--line-strong)}
.btn-outline:hover{background:transparent;border-color:var(--graphite);transform:translateY(-1px)}

.btn-bronze-outline{--bg:transparent;--fg:var(--bronze-deep);--bd:var(--bronze)}
.btn-bronze-outline:hover{background:var(--bronze);color:#fff;border-color:var(--bronze)}

.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:transparent;padding-inline:10px}
.btn-ghost:hover{background:rgba(44,44,44,.05)}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:14px;
  letter-spacing:.02em;color:var(--ink);cursor:pointer;
  border-bottom:1px solid var(--line-strong);padding-bottom:4px;transition:gap .3s,border-color .3s,color .3s;
}
.link-arrow:hover{gap:14px;border-color:var(--bronze);color:var(--bronze-deep)}
.link-arrow svg{width:16px;height:16px;transition:transform .3s}
.link-arrow:hover svg{transform:translateX(2px)}

/* ---------- Tags / badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);background:rgba(44,44,44,.06);color:var(--ink-2);
}
.badge.new{background:var(--graphite);color:#fff}
.badge.pop{background:rgba(174,144,111,.16);color:var(--bronze-deep)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.stock .dot{background:var(--st-in)}
.stock.limited .dot{background:var(--st-limited)}
.stock.pre .dot{background:var(--st-pre)}
.stock.out .dot{background:var(--st-out)}
.stock.req .dot{background:var(--st-req)}

/* price block + sale */
.price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price{color:var(--price);font-weight:500;font-variant-numeric:tabular-nums}
.price .unit{font-size:.72em;color:var(--ink-3);font-weight:400}
.price-old{font-size:.8em;color:var(--ink-3);text-decoration:line-through;font-weight:400}
.price-req{color:var(--ink-2);font-weight:500}
.sale-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 8px;border-radius:var(--r-xs);background:var(--sale-bg);color:var(--sale)}
.badge.sale{background:var(--sale-bg);color:var(--sale)}
.badge.pre{background:rgba(126,138,160,.14);color:var(--st-pre)}
.badge.out{background:rgba(168,139,134,.16);color:#8a6f6a}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:all .25s;
}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.active{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.chip .x{font-size:14px;opacity:.7;line-height:1}
.chip.active .x{opacity:.9}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink-2)}
.field .req{color:var(--bronze)}
.input,.select,textarea.input{
  font-family:var(--f);font-size:15px;color:var(--ink);
  background:var(--field);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:14px 16px;transition:border-color .25s,box-shadow .25s;width:100%;
}
.input::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,textarea.input:focus{
  outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(174,144,111,.14);
}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%232C2C2C' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
textarea.input{resize:vertical;min-height:96px;line-height:1.55}

/* radio / segmented */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--field)}
.seg button{border:0;background:transparent;padding:11px 18px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.2s}
.seg button+button{border-left:1px solid var(--line)}
.seg button.active{background:var(--graphite);color:#fff}

.checkline{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.checkline input{margin-top:2px;width:18px;height:18px;accent-color:var(--bronze);flex:none}

/* ---------- Icon button ---------- */
.iconbtn{
  width:42px;height:42px;border-radius:var(--r);border:1px solid transparent;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  position:relative;transition:background .25s,color .25s,border-color .25s;
}
.iconbtn:hover{background:rgba(44,44,44,.05)}
.iconbtn svg{width:21px;height:21px}
.iconbtn .count{
  position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--bronze);color:#fff;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ---------- Placeholder media (procedural texture goes inline) ---------- */
.ph{position:relative;overflow:hidden;background:var(--stone)}
.ph>svg,.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-label{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.ratio{position:relative;width:100%}
.ratio>*{position:absolute;inset:0;width:100%;height:100%}
.r-1\/1{aspect-ratio:1/1}
.r-4\/3{aspect-ratio:4/3}
.r-3\/4{aspect-ratio:3/4}
.r-3\/2{aspect-ratio:3/2}
.r-16\/9{aspect-ratio:16/9}
.r-2\/1{aspect-ratio:2/1}

/* ---------- Reveal on scroll (gated by .clock = visible-tab load) ---------- */
@media (prefers-reduced-motion:no-preference){
  .clock .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .clock .reveal.in{opacity:1;transform:none}
  .clock .reveal.d1{transition-delay:.08s}.clock .reveal.d2{transition-delay:.16s}.clock .reveal.d3{transition-delay:.24s}.clock .reveal.d4{transition-delay:.32s}
}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  pointer-events:auto;background:var(--graphite);color:#fff;border-radius:var(--r);
  padding:14px 18px;display:flex;align-items:center;gap:13px;min-width:280px;max-width:380px;
  box-shadow:var(--sh-pop);transform:translateY(12px);opacity:0;transition:.4s cubic-bezier(.2,.7,.2,1);
}
.toast.in{transform:none;opacity:1}
.toast .tk{width:24px;height:24px;border-radius:50%;background:var(--bronze);display:flex;align-items:center;justify-content:center;flex:none}
.toast .tk svg{width:13px;height:13px;color:#fff}
.toast .tt{font-size:13.5px;line-height:1.35}
.toast .tt b{font-weight:600}
.toast a{color:var(--bronze-soft);font-weight:600;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- Scrollbar (subtle) ---------- */
.scroll-x{overflow-x:auto;scrollbar-width:thin}
.scroll-x::-webkit-scrollbar{height:6px}
.scroll-x::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

.noscroll{overflow:hidden}
[hidden]{display:none!important}

/* ---------- Accessible focus ---------- */
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:3px}
.btn:focus-visible,.chip:focus-visible,.iconbtn:focus-visible{outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---------- Skeleton loading ---------- */
@keyframes md-shimmer{100%{transform:translateX(100%)}}
.skel{position:relative;overflow:hidden;background:var(--stone);border-radius:var(--r)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:md-shimmer 1.3s infinite}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
.skel-line{height:12px;border-radius:6px;margin:8px 0}
.skel-card{display:flex;flex-direction:column;gap:6px}
.skel-card .skel-media{aspect-ratio:1/1;border-radius:var(--r-lg)}
.skel-card .skel-line.w70{width:70%}.skel-card .skel-line.w40{width:40%}.skel-card .skel-line.w50{width:50%}

/* ---------- Generic states (empty / error / success) ---------- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:72px 20px;max-width:440px;margin:0 auto}
.state-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);color:var(--bronze-deep)}
.state-ic svg{width:28px;height:28px}
.state h3{font-weight:300;margin:0;font-size:clamp(22px,3vw,30px)}
.state p{margin:0;color:var(--ink-2);font-size:15px;max-width:34ch}
.state.error .state-ic{color:var(--sale);background:var(--sale-bg);border-color:transparent}
.state.success .state-ic{color:#fff;background:var(--st-in);border-color:transparent}
.state-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}