/* Culet Couture — site styles. Built on tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--cc-bone); color:var(--cc-ink);
  font-family:var(--cc-body); font-size:var(--cc-s-md); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--cc-display); font-weight:400; line-height:1.14;
  letter-spacing:-.01em; margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--cc-champagne-d); outline-offset:3px}

.wrap{max-width:var(--cc-maxw); margin:0 auto; padding:0 var(--cc-6)}
.narrow{max-width:720px}
.eyebrow{font-size:var(--cc-s-xs); letter-spacing:var(--cc-track-eyebrow);
  text-transform:uppercase; color:var(--cc-stone); margin:0 0 var(--cc-4)}
.rule{height:1px; background:var(--cc-blush); border:0; margin:0}
.muted{color:var(--cc-stone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--cc-ink);color:var(--cc-bone);
  padding:var(--cc-3) var(--cc-6);z-index:200}
.skip:focus{left:0}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:100; background:rgba(247,244,239,.94);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--cc-blush)}
.hdr__bar{display:flex; align-items:center; gap:var(--cc-6);
  height:74px; max-width:var(--cc-maxw); margin:0 auto; padding:0 var(--cc-6)}
.hdr__logo{display:flex; align-items:center; gap:var(--cc-3); flex:0 0 auto}
.hdr__logo img{width:34px; height:34px}
.hdr__name{font-family:var(--cc-display); font-size:var(--cc-s-lg);
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.nav{display:flex; gap:var(--cc-8); margin-left:auto; align-items:center}
.nav a{font-size:var(--cc-s-sm); letter-spacing:.06em; position:relative; padding:var(--cc-2) 0}
.nav a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cc-champagne-d); transform:scaleX(0); transform-origin:left;
  transition:transform var(--cc-base) var(--cc-ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr__cart{display:flex; align-items:center; gap:var(--cc-2); font-size:var(--cc-s-sm);
  letter-spacing:.06em; background:none; border:0; cursor:pointer; padding:var(--cc-2)}
.hdr__count{min-width:19px; height:19px; border-radius:999px; background:var(--cc-ink);
  color:var(--cc-bone); font-size:11px; line-height:19px; text-align:center; font-family:var(--cc-body)}
.hdr__count[hidden]{display:none}
.hdr__menu{display:none; background:none; border:0; cursor:pointer; padding:var(--cc-2);
  margin-left:auto}
.announce{background:var(--cc-ink); color:var(--cc-bone); text-align:center;
  font-size:var(--cc-s-xs); letter-spacing:var(--cc-track-eyebrow); text-transform:uppercase;
  padding:9px var(--cc-4)}

@media (max-width:900px){
  /* logo left, then bag and burger pinned right. nav drops out of flow. */
  .hdr__bar{gap:var(--cc-3); height:64px; padding:0 var(--cc-4)}
  .hdr__logo{order:1; margin-right:auto; min-width:0}
  .hdr__logo img{width:28px; height:28px}
  .hdr__name{font-size:var(--cc-s-md); letter-spacing:.14em}
  .hdr__cart{order:2; margin-left:0; flex:0 0 auto}
  .hdr__menu{display:block; order:3; margin-left:0; flex:0 0 auto}
  .nav{order:4; position:fixed; inset:64px 0 auto 0; background:var(--cc-bone);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:var(--cc-4) var(--cc-6) var(--cc-8); max-height:calc(100vh - 64px);
    overflow:auto; border-bottom:1px solid var(--cc-blush); margin:0; display:none}
  .nav[data-open]{display:flex}
  .nav a{padding:var(--cc-4) 0; width:100%; border-bottom:1px solid var(--cc-blush);
    font-size:var(--cc-s-lg); font-family:var(--cc-display); letter-spacing:.04em}
  .announce{font-size:10px; letter-spacing:.12em; padding:8px var(--cc-4)}
}
@media (max-width:380px){
  .hdr__name{font-size:var(--cc-s-sm); letter-spacing:.1em}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--cc-2);
  padding:15px var(--cc-8); border:1px solid var(--cc-ink); background:var(--cc-ink);
  color:var(--cc-bone); font-size:var(--cc-s-xs); letter-spacing:var(--cc-track-eyebrow);
  text-transform:uppercase; cursor:pointer; border-radius:var(--cc-radius);
  transition:background var(--cc-base) var(--cc-ease), color var(--cc-base) var(--cc-ease),
             border-color var(--cc-base) var(--cc-ease)}
.btn:hover{background:transparent; color:var(--cc-ink)}
.btn--ghost{background:transparent; color:var(--cc-ink)}
.btn--ghost:hover{background:var(--cc-ink); color:var(--cc-bone)}
.btn--light{background:var(--cc-bone); color:var(--cc-ink); border-color:var(--cc-bone)}
.btn--light:hover{background:transparent; color:var(--cc-bone)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(520px,74vh,760px); display:grid;
  place-items:center; background:var(--cc-ink); overflow:hidden; text-align:center}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; filter:saturate(.9)}
.hero__scrim{position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(20,17,15,.35) 0%, rgba(20,17,15,.86) 78%)}
.hero__in{position:relative; padding:var(--cc-24) var(--cc-6); color:var(--cc-bone); max-width:760px}
.hero__in .eyebrow{color:var(--cc-champagne)}
.hero h1{font-size:clamp(2.6rem,6.4vw,var(--cc-s-5xl)); margin-bottom:var(--cc-6)}
.hero p{color:#D8D2C8; font-size:var(--cc-s-lg); margin:0 auto var(--cc-12); max-width:52ch}
.hero__cta{display:flex; gap:var(--cc-4); justify-content:center; flex-wrap:wrap}

/* ---------- sections ---------- */
.sec{padding:var(--cc-32) 0}
.sec--tight{padding:var(--cc-24) 0}
.sec--tint{background:var(--cc-blush)}
.sec--ink{background:var(--cc-ink); color:var(--cc-bone)}
.sec--ink .eyebrow{color:var(--cc-champagne)}
.sec--ink .muted{color:#B4ADA3}
.sec__head{text-align:center; max-width:620px; margin:0 auto var(--cc-16)}
.sec__head h2{font-size:clamp(2rem,4vw,var(--cc-s-3xl)); margin-bottom:var(--cc-4)}
.sec__head p{color:var(--cc-stone); margin:0}

/* ---------- product grid ---------- */
.grid{display:grid; gap:var(--cc-8) var(--cc-6);
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{display:block; position:relative}
.card__media{position:relative; aspect-ratio:1; background:var(--cc-white);
  overflow:hidden; border:1px solid var(--cc-blush); border-radius:var(--cc-radius)}
.card__media img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--cc-slow) var(--cc-ease), opacity var(--cc-base) var(--cc-ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__alt{position:absolute; inset:0; opacity:0}
.card:hover .card__alt{opacity:1}
.card__flag{position:absolute; top:var(--cc-3); left:var(--cc-3); z-index:2;
  background:var(--cc-bone); color:var(--cc-ink); font-size:10px;
  letter-spacing:var(--cc-track-eyebrow); text-transform:uppercase; padding:5px var(--cc-3)}
.card__body{padding-top:var(--cc-4)}
.card__name{font-family:var(--cc-display); font-size:var(--cc-s-lg); margin:0 0 var(--cc-1)}
.card__meta{font-size:var(--cc-s-xs); color:var(--cc-stone); letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 var(--cc-2)}
.card__price{font-size:var(--cc-s-sm); letter-spacing:.02em; margin:0}

/* ---------- product page ---------- */
.pdp{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:var(--cc-16); align-items:start; padding:var(--cc-12) 0 var(--cc-24)}
.gal__main{aspect-ratio:1; background:var(--cc-white); border:1px solid var(--cc-blush);
  border-radius:var(--cc-radius); overflow:hidden}
.gal__main img{width:100%; height:100%; object-fit:cover}
.gal__strip{display:flex; gap:var(--cc-2); margin-top:var(--cc-2); flex-wrap:wrap}
.gal__thumb{width:76px; height:76px; border:1px solid var(--cc-blush); background:var(--cc-white);
  padding:0; cursor:pointer; border-radius:var(--cc-radius); overflow:hidden}
.gal__thumb[aria-pressed="true"]{border-color:var(--cc-ink)}
.gal__thumb img{width:100%; height:100%; object-fit:cover}
.pdp__side{position:sticky; top:98px}
.pdp h1{font-size:clamp(1.9rem,3.4vw,var(--cc-s-2xl)); margin-bottom:var(--cc-3)}
.pdp__price{font-size:var(--cc-s-xl); font-family:var(--cc-display); margin:0 0 var(--cc-6)}
.pdp__desc{color:var(--cc-ink-80); margin:0 0 var(--cc-8)}
.field{margin-bottom:var(--cc-6)}
.field__label{display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--cc-s-xs); letter-spacing:var(--cc-track-eyebrow); text-transform:uppercase;
  color:var(--cc-stone); margin-bottom:var(--cc-3)}
.field__label b{font-weight:400; color:var(--cc-ink); letter-spacing:.04em; text-transform:none;
  font-size:var(--cc-s-sm)}
.swatches{display:flex; gap:var(--cc-3)}
.swatch{width:42px; height:42px; border-radius:999px; border:1px solid var(--cc-blush);
  cursor:pointer; padding:0; position:relative;
  transition:box-shadow var(--cc-fast) var(--cc-ease)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 1px var(--cc-bone) inset, 0 0 0 2px var(--cc-ink)}
select{width:100%; padding:13px var(--cc-4); border:1px solid var(--cc-blush);
  background:var(--cc-white); border-radius:var(--cc-radius); cursor:pointer;
  appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--cc-ink) 50%),
   linear-gradient(135deg,var(--cc-ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.specs{border-top:1px solid var(--cc-blush); margin-top:var(--cc-8)}
.specs div{display:flex; justify-content:space-between; gap:var(--cc-4);
  padding:var(--cc-3) 0; border-bottom:1px solid var(--cc-blush); font-size:var(--cc-s-sm)}
.specs dt{color:var(--cc-stone)}
.specs dd{margin:0; text-align:right}
.note{font-size:var(--cc-s-xs); color:var(--cc-stone); line-height:1.6; margin:var(--cc-4) 0 0}

/* ---------- assurances ---------- */
.assure{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--cc-8)}
.assure h3{font-size:var(--cc-s-lg); margin-bottom:var(--cc-2)}
.assure p{margin:0; color:var(--cc-stone); font-size:var(--cc-s-sm)}
.assure svg{width:26px; height:26px; margin-bottom:var(--cc-4); stroke:var(--cc-champagne-d);
  fill:none; stroke-width:1.1}

/* ---------- editorial split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--cc-16); align-items:center}
.split img{border-radius:var(--cc-radius)}
.split h2{font-size:clamp(1.8rem,3.4vw,var(--cc-s-2xl)); margin-bottom:var(--cc-4)}
.split p{color:var(--cc-stone); margin:0 0 var(--cc-4)}
.split--flip>*:first-child{order:2}

/* ---------- cart drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(20,17,15,.5); z-index:150; opacity:0;
  pointer-events:none; transition:opacity var(--cc-base) var(--cc-ease)}
.scrim[data-open]{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); z-index:160;
  background:var(--cc-bone); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--cc-base) var(--cc-ease);
  box-shadow:-14px 0 44px rgba(20,17,15,.14)}
.drawer[data-open]{transform:none}
.drawer__hd{display:flex; align-items:center; justify-content:space-between;
  padding:var(--cc-6); border-bottom:1px solid var(--cc-blush)}
.drawer__hd h2{font-size:var(--cc-s-lg)}
.drawer__x{background:none; border:0; cursor:pointer; font-size:22px; line-height:1; padding:var(--cc-2)}
.drawer__body{flex:1; overflow:auto; padding:var(--cc-6)}
.drawer__ft{padding:var(--cc-6); border-top:1px solid var(--cc-blush)}
.line{display:grid; grid-template-columns:76px 1fr; gap:var(--cc-4); padding-bottom:var(--cc-6);
  margin-bottom:var(--cc-6); border-bottom:1px solid var(--cc-blush)}
.line:last-child{border-bottom:0; margin-bottom:0}
.line img{width:76px; height:76px; object-fit:cover; border:1px solid var(--cc-blush)}
.line h3{font-family:var(--cc-body); font-size:var(--cc-s-sm); font-weight:500; margin:0 0 var(--cc-1)}
.line p{margin:0; font-size:var(--cc-s-xs); color:var(--cc-stone)}
.line__row{display:flex; justify-content:space-between; align-items:center; margin-top:var(--cc-2)}
.qty{display:flex; align-items:center; border:1px solid var(--cc-blush); background:var(--cc-white)}
.qty button{width:28px; height:28px; background:none; border:0; cursor:pointer; font-size:15px}
.qty span{min-width:26px; text-align:center; font-size:var(--cc-s-sm)}
.total{display:flex; justify-content:space-between; font-size:var(--cc-s-lg);
  font-family:var(--cc-display); margin-bottom:var(--cc-4)}

/* ---------- footer ---------- */
.ft{background:var(--cc-ink); color:#B4ADA3; padding:var(--cc-24) 0 var(--cc-8);
  font-size:var(--cc-s-sm)}
.ft__cols{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:var(--cc-12)}
.ft h4{font-size:var(--cc-s-xs); letter-spacing:var(--cc-track-eyebrow); text-transform:uppercase;
  color:var(--cc-bone); margin-bottom:var(--cc-4); font-family:var(--cc-body)}
.ft ul{list-style:none; margin:0; padding:0}
.ft li{margin-bottom:var(--cc-2)}
.ft a:hover{color:var(--cc-champagne)}
.ft__mark{display:flex; align-items:center; gap:var(--cc-3); margin-bottom:var(--cc-4)}
.ft__mark img{width:42px; height:42px}
.ft__mark span{font-family:var(--cc-display); color:var(--cc-bone); font-size:var(--cc-s-lg);
  letter-spacing:.2em; text-transform:uppercase}
.ft__btm{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--cc-4);
  border-top:1px solid #2C2724; margin-top:var(--cc-16); padding-top:var(--cc-6);
  font-size:var(--cc-s-xs)}

/* ---------- editorial / prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:var(--cc-s-2xl); margin:var(--cc-16) 0 var(--cc-4)}
.prose h3{font-size:var(--cc-s-lg); margin:var(--cc-8) 0 var(--cc-2)}
.prose p{margin:0 0 var(--cc-4); color:var(--cc-ink-80)}
.prose ul{color:var(--cc-ink-80); padding-left:1.1rem}
.prose li{margin-bottom:var(--cc-2)}
.pagehead{padding:var(--cc-16) 0 var(--cc-8); border-bottom:1px solid var(--cc-blush)}
.pagehead h1{font-size:clamp(2.1rem,4.6vw,var(--cc-s-3xl)); margin-bottom:var(--cc-3)}
.pagehead p{color:var(--cc-stone); margin:0; max-width:60ch}

/* ---------- filters ---------- */
.filters{display:flex; gap:var(--cc-2); flex-wrap:wrap; align-items:center;
  padding:var(--cc-8) 0; border-bottom:1px solid var(--cc-blush); margin-bottom:var(--cc-12)}
.chip{border:1px solid var(--cc-blush); background:transparent; padding:9px var(--cc-6);
  border-radius:999px; cursor:pointer; font-size:var(--cc-s-xs);
  letter-spacing:var(--cc-track-eyebrow); text-transform:uppercase;
  transition:all var(--cc-fast) var(--cc-ease)}
.chip[aria-pressed="true"]{background:var(--cc-ink); color:var(--cc-bone); border-color:var(--cc-ink)}
.filters__sort{margin-left:auto; width:auto; min-width:200px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px);
  transition:opacity var(--cc-slow) var(--cc-ease), transform var(--cc-slow) var(--cc-ease)}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none}}

@media (max-width:900px){
  .pdp{grid-template-columns:1fr; gap:var(--cc-8)}
  .pdp__side{position:static}
  .split,.ft__cols{grid-template-columns:1fr; gap:var(--cc-8)}
  .split--flip>*:first-child{order:0}
  .sec{padding:var(--cc-16) 0}
  .sec--tight{padding:var(--cc-12) 0}
}

/* ---------- one of a kind: feature block ---------- */
.ooak-feature{display:grid; gap:var(--cc-16)}
.feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--cc-12); align-items:center;
  padding-bottom:var(--cc-16); border-bottom:1px solid var(--cc-blush)}
.ooak-feature .feature:last-child{border-bottom:0; padding-bottom:0}
.feature__media{aspect-ratio:1; background:var(--cc-white);
  border:1px solid var(--cc-blush); border-radius:var(--cc-radius); overflow:hidden}
.feature__media img{width:100%; height:100%; object-fit:cover}
.feature__body h2{font-size:clamp(1.6rem,3vw,var(--cc-s-2xl)); margin-bottom:var(--cc-4)}
.feature__body>p{color:var(--cc-ink-80); margin:0 0 var(--cc-6)}
.feature .specs div{padding:var(--cc-2) 0}
.feature .specs dt{color:var(--cc-ink); font-size:var(--cc-s-sm)}
@media (max-width:900px){
  .feature{grid-template-columns:1fr; gap:var(--cc-6)}
}

/* ---------- letterbox photography ----------
   Real bracelet shots are ~2.9:1. Cropping them square hides most of the piece,
   so show them whole on a white field instead. */
.card__media img.is-wide,
.gal__main img.is-wide,
.feature__media img.is-wide{
  object-fit:contain; background:var(--cc-white); padding:var(--cc-4);
}
.gal__thumb img.is-wide{ object-fit:contain; background:var(--cc-white); padding:3px }
.line img.is-wide{ object-fit:contain; background:var(--cc-white) }

/* ---------- breadcrumbs ---------- */
.crumbs{padding:var(--cc-6) 0 0; font-size:var(--cc-s-xs);
  letter-spacing:.06em; color:var(--cc-stone)}
.crumbs a{color:var(--cc-stone)}
.crumbs a:hover{color:var(--cc-ink); text-decoration:underline}
.crumbs__sep{opacity:.5; margin:0 var(--cc-1)}
.crumbs [aria-current]{color:var(--cc-ink)}

/* footer legal links */
.ft__legal{display:flex; gap:var(--cc-2); align-items:center; flex-wrap:wrap}
.ft__legal a{text-decoration:none}
.ft__legal a:hover{color:var(--cc-champagne); text-decoration:underline}
.ft__legal span{opacity:.45}