/* DoneRight and Company — site.css
 *
 * Luxury urban diamond boutique: black and graphite canvas, restrained
 * champagne gold, editorial serif headlines, tiny tracked uppercase labels.
 *
 * House rules, taken from the brief and worth keeping:
 *  - corners are ANGULAR. No rounded dashboard cards anywhere.
 *  - gold is an accent, never a fill for large areas.
 *  - the image is the dominant element in a card; chrome stays thin.
 *  - no distracting motion, and everything respects prefers-reduced-motion.
 */

:root{
  --bg:#090A0B; --surface:#111315; --surface-2:#1B1B1C; --line:#3A3530;
  --gold:#CBA86A; --gold-light:#EBD5A9; --gold-dark:#8F6B33;
  /* the metal, sampled off the logo: deep amber through to a bright highlight */
  --g1:#F6E4B8; --g2:#DCBB7C; --g3:#C49A52; --g4:#A67C38; --g5:#D8B570;
  --trim:#EFDCAC;
  --text:#F6F2EB; --muted:#B1ACA6; --subtle:#87817C;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1440px; --header-h:94px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.7 var(--sans); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-.005em; margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,56px)}
.kicker{
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link so keyboard users are not dragged through the whole nav */
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--gold);color:#0B0B0B;padding:10px 18px;font-weight:700}
.skip:focus{left:10px;top:10px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; min-height:48px; border:1px solid transparent; cursor:pointer;
  font:600 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; transition:background .18s,color .18s,border-color .18s;
}
/* Real metal rather than a flat gradient: five stops give the bevel, the inset
   highlights give it a lit top edge and a shaded bottom, and the thin pale trim
   reads as the polished border on the logo lettering. */
.btn-gold{
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 20%,var(--g3) 52%,var(--g4) 84%,var(--g5) 100%);
  color:#120D04; border-color:var(--trim);
  text-shadow:0 1px 0 rgba(255,248,225,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.85),
    inset 0 -1px 0 rgba(60,38,8,.38),
    inset 0 0 0 1px rgba(255,245,215,.22),
    0 8px 22px rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.4);
}
.btn-gold:hover{
  background:linear-gradient(180deg,#FFF3D4 0%,var(--g1) 20%,var(--g2) 52%,var(--g3) 84%,var(--g1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,250,.95),
    inset 0 -1px 0 rgba(60,38,8,.3),
    inset 0 0 0 1px rgba(255,250,230,.3),
    0 10px 30px rgba(170,125,50,.3),
    0 0 0 1px rgba(239,220,172,.4);
}
.btn-gold:active{
  box-shadow:inset 0 2px 5px rgba(60,38,8,.45), inset 0 0 0 1px rgba(255,245,215,.2);
}
.btn-line{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  color:var(--text); border-color:#4A4337;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.07);
}
.btn-line:hover{
  border-color:var(--gold); color:var(--gold-light);
  background:linear-gradient(180deg,rgba(203,168,106,.12),rgba(203,168,106,.03));
  box-shadow:inset 0 1px 0 rgba(255,250,235,.14), 0 6px 20px rgba(0,0,0,.4);
}
.btn[disabled],.btn.is-off{opacity:.55; cursor:not-allowed}
.btn-wide{width:100%}

/* ----------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:120; background:rgba(9,10,11,.94);
  backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; gap:28px; height:var(--header-h)}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
/* The artwork is gold and white on black. `screen` drops the black entirely, so
   the lockup sits on the header without a visible box, and keeps working when
   the translucent header blurs whatever is scrolling underneath it. */
.brand img{height:68px; width:auto; mix-blend-mode:screen}

.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-i{position:relative; display:flex; align-items:center}
.nav-i > a{display:inline-flex; align-items:center; gap:5px}
.nav-i > a svg{opacity:.65; margin-top:1px}
/* the menu is hidden with visibility rather than display so it can fade, and so
   a keyboard tab into it still opens it via :focus-within */
/* The menu is a lit panel rather than a grey box: a gold hairline across the top
   edge where the light would catch, a soft inner glow, and a gold marker that
   slides in beside the hovered item. */
.menu{
  position:absolute; top:calc(100% + 2px); left:-18px; z-index:30; min-width:206px;
  display:flex; flex-direction:column; padding:10px 0;
  background:linear-gradient(180deg,#14161A 0%,#0C0E10 60%,#0A0B0D 100%);
  border:1px solid #2E2A24;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985);
  transform-origin:top center;
  transition:opacity .22s cubic-bezier(.2,.7,.3,1), transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
  box-shadow:
    inset 0 1px 0 rgba(239,220,172,.14),
    0 26px 60px rgba(0,0,0,.72),
    0 2px 8px rgba(0,0,0,.5);
}
/* the gold catch-light along the top */
.menu::before{
  content:""; position:absolute; left:14px; right:14px; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-light) 50%,var(--gold) 70%,transparent);
  opacity:.75;
}
.nav-i:hover .menu,.nav-i:focus-within .menu{opacity:1; visibility:visible; transform:translateY(0) scale(1)}

.menu a{
  position:relative; padding:11px 20px 11px 24px; font-size:11.5px; letter-spacing:.14em;
  color:var(--muted); transition:color .18s, background .18s, padding-left .18s;
}
/* the marker that slides in */
.menu a::before{
  content:""; position:absolute; left:12px; top:50%; width:0; height:1px;
  background:var(--gold); transform:translateY(-50%); transition:width .22s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover{
  color:var(--gold-light); padding-left:30px;
  background:linear-gradient(90deg,rgba(203,168,106,.12),rgba(203,168,106,0) 70%);
}
.menu a:hover::before{width:8px}
.nav a{
  position:relative; text-decoration:none; color:var(--muted); padding:6px 0;
  font-size:11.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  transition:color .16s; white-space:nowrap;
}
.nav a:hover{color:var(--text)}
.nav a.on{color:var(--text)}
.nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold)}

.acts{display:flex; align-items:center; gap:6px; margin-left:auto}
.ico{
  display:grid; place-items:center; width:40px; height:40px; background:none; border:0;
  color:var(--muted); cursor:pointer; transition:color .16s;
}
.ico:hover{color:var(--gold)}
.bag{position:relative}
.bag-n{
  position:absolute; top:4px; right:3px; min-width:17px; height:17px; padding:0 4px;
  background:var(--gold); color:#0B0B0B; font:700 10px/17px var(--sans);
  text-align:center; letter-spacing:0;
}
.bag-n[hidden]{display:none}
.burger{display:none}

/* search drawer under the header */
.search{border-bottom:1px solid var(--line); background:var(--surface); display:none}
.search.is-on{display:block}
.search form{display:flex; gap:12px; padding-top:18px; padding-bottom:18px}
.search input{
  flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:13px 16px; font:400 15px var(--sans);
}
.search input::placeholder{color:var(--subtle)}

/* mobile nav panel */
.mnav{display:none; border-bottom:1px solid var(--line); background:var(--surface)}
.mnav.is-on{display:block}
.mnav a{
  display:block; padding:15px 0; text-decoration:none; color:var(--muted);
  border-bottom:1px solid #1C1E20; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.mnav a:last-child{border-bottom:0}

/* ------------------------------------------------------------------- hero */
/* column, so the trust strip sits at the foot of the hero instead of becoming
   a flex sibling of the copy and landing beside it */
.hero{position:relative; min-height:clamp(480px,64vh,680px); display:flex; flex-direction:column;
      justify-content:center; overflow:hidden; background:#000}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:72% 40%}
/* darken left and bottom so the type always has contrast to sit on */
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(6,7,8,.96) 0%,rgba(6,7,8,.86) 32%,rgba(6,7,8,.30) 62%,rgba(6,7,8,.12) 100%),
    linear-gradient(0deg,rgba(6,7,8,.92) 0%,rgba(6,7,8,0) 42%);
}
.hero-in{position:relative; z-index:2; width:100%; padding-top:72px; padding-bottom:40px}
.hero h1{font-size:clamp(40px,6.6vw,86px); line-height:1.02; letter-spacing:.015em; margin:0 0 20px;
         text-transform:uppercase; font-weight:500}
.hero h1 span{display:block; color:var(--gold)}
.hero p{max-width:430px; color:var(--muted); font-size:15.5px; margin-bottom:30px}
.hero-btns{display:flex; gap:13px; flex-wrap:wrap}

.trust{position:relative; z-index:2; border-top:1px solid rgba(58,53,48,.6); margin-top:auto; width:100%}
.trust-in{display:flex; gap:46px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px}
.trust div{display:flex; align-items:center; gap:12px}
.trust svg{color:var(--gold); flex:none}
.trust b{display:block; font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase}
.trust small{display:block; font-size:11.5px; color:var(--subtle); letter-spacing:.04em; margin-top:2px}

/* --------------------------------------------------------------- sections */
.sec{padding:clamp(52px,7vw,88px) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px}
.sec-head h2{font-size:clamp(24px,2.9vw,34px); line-height:1.1; text-transform:uppercase;
             letter-spacing:.03em; font-weight:500}
.more{
  text-decoration:none; color:var(--gold); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; transition:gap .18s;
}
.more:hover{gap:14px}

/* ------------------------------------------------------------- categories */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.cat{position:relative; display:block; aspect-ratio:5/4; overflow:hidden; text-decoration:none; background:var(--surface-2)}
.cat img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.cat:hover img{transform:scale(1.06)}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,7,8,.92) 6%,rgba(6,7,8,.18) 54%,rgba(6,7,8,.04) 100%)}
.cat-l{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 15px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.cat-l b{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.cat-l svg{color:var(--gold); flex:none; transition:transform .2s}
.cat:hover .cat-l svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- showroom */
.show{display:grid; grid-template-columns:50fr 27fr 23fr; min-height:430px; background:var(--surface)}
.show-img{position:relative; overflow:hidden}
.show-img img{width:100%; height:100%; object-fit:cover}
.show-txt{padding:clamp(32px,3.6vw,54px); display:flex; flex-direction:column; justify-content:center}
.show-txt h2{font-size:clamp(26px,3vw,38px); line-height:1.08; margin-bottom:16px;
             text-transform:uppercase; letter-spacing:.03em; font-weight:500}
.show-txt p{color:var(--muted); font-size:15px}
.show-meta{margin:22px 0 26px; padding-top:20px; border-top:1px solid var(--line)}
.show-meta div{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted); margin-bottom:9px}
.show-meta div:last-child{margin-bottom:0}
.show-meta svg{color:var(--gold); flex:none; margin-top:3px}

/* ---------------------------------------------------------------- products */
.prods{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line)}
.card-img{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#0C0D0E}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.05)}
.wish{
  position:absolute; top:9px; right:9px; z-index:2; width:32px; height:32px; display:grid; place-items:center;
  background:rgba(9,10,11,.72); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:color .16s,border-color .16s;
}
.wish:hover,.wish.on{color:var(--gold); border-color:var(--gold)}
.card-b{padding:15px 15px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.card-b h3{font-size:16.5px; line-height:1.3}
.card-b h3 a{text-decoration:none}
.card-b h3 a:hover{color:var(--gold)}
.card-m{font-size:11.5px; color:var(--subtle); letter-spacing:.07em}
.price{font-family:var(--serif); font-size:20px; color:var(--gold-light); margin:7px 0 13px}
.price small{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--subtle); margin-top:3px}
.card .btn{margin-top:auto}

/* demo notice — deliberately visible, not hidden in a tooltip */
.demo{
  display:flex; gap:12px; align-items:flex-start; padding:14px 18px; margin:0 0 26px;
  background:rgba(203,168,106,.07); border-left:2px solid var(--gold);
  font-size:13px; line-height:1.6; color:var(--muted);
}
.demo svg{color:var(--gold); flex:none; margin-top:3px}
.demo b{color:var(--text); font-weight:600}

/* ----------------------------------------------------------------- custom */
.custom{display:grid; grid-template-columns:45fr 28fr 27fr; min-height:430px; background:var(--surface)}
.custom-txt{padding:clamp(32px,3.6vw,54px); display:flex; flex-direction:column; justify-content:center}
.custom-txt h2{font-size:clamp(26px,3vw,38px); line-height:1.08; margin-bottom:16px;
               text-transform:uppercase; letter-spacing:.03em; font-weight:500}
.custom-txt p{color:var(--muted); font-size:15px; margin-bottom:28px}
.steps{padding:clamp(32px,3.2vw,46px) clamp(26px,2.6vw,38px); display:flex; flex-direction:column; justify-content:center; gap:22px; background:var(--surface-2)}
.step{display:flex; gap:15px; align-items:flex-start}
.step i{
  flex:none; width:32px; height:32px; display:grid; place-items:center; font-style:normal;
  border:1px solid var(--gold-dark); color:var(--gold); font:600 11px var(--sans);
}
.step b{display:block; font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:4px}
.step span{display:block; font-size:13px; color:var(--subtle); line-height:1.6}

/* ------------------------------------------------------------------ forms */
.form{display:grid; gap:17px; max-width:620px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:17px}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--text);
  padding:13px 15px; font:400 15px var(--sans);
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold); outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--subtle)}
.fine{font-size:12.5px; color:var(--subtle); line-height:1.65}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.note{
  padding:16px 20px; border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; line-height:1.68; color:var(--muted);
}
.note.ok{border-color:var(--gold-dark); background:rgba(203,168,106,.08)}
.note b{color:var(--text)}

/* ----------------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--line); background:#060708; padding:clamp(46px,5vw,66px) 0 0}
.ftr-grid{display:grid; grid-template-columns:1.5fr .8fr .8fr .8fr 1.3fr 1fr; gap:32px; padding-bottom:44px}
.ftr h4{font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--text); margin:0 0 16px; font-family:var(--sans)}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ftr a{color:var(--muted); text-decoration:none; font-size:13.5px; transition:color .16s}
.ftr a:hover{color:var(--gold)}
.ftr-logo{display:inline-block; margin-bottom:4px}
.ftr-logo img{width:170px; height:auto; mix-blend-mode:screen}
.ftr-brand p{color:var(--subtle); font-size:13.5px; max-width:290px; margin-top:16px}
.ftr-tag{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-top:14px}
.ftr-bar{border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--subtle)}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted)}
.socials a:hover{border-color:var(--gold); color:var(--gold)}

.news{display:flex; border:1px solid var(--line); background:var(--surface)}
.news input[type=email]{flex:1; min-width:0; background:none; border:0; color:var(--text); padding:11px 13px; font:400 13.5px var(--sans)}
.news input[type=email]::placeholder{color:var(--subtle)}
.news input[type=email]:focus{outline:none}
.news button{flex:none; width:44px; border:0; background:var(--gold); color:#0B0B0B; cursor:pointer; display:grid; place-items:center}
.news button:hover{background:var(--gold-light)}

/* ------------------------------------------------------------ cart drawer */
.scrim{position:fixed; inset:0; z-index:150; background:rgba(4,5,6,.66); opacity:0; pointer-events:none; transition:opacity .22s}
.scrim.is-on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:160; width:min(400px,100vw);
  background:#0B0C0D; border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.drawer.is-on{transform:translateX(0)}
/* display:flex above outranks the browser's [hidden]{display:none}, so say it
   explicitly — otherwise the off-screen drawer widens the page on a phone. */
.drawer[hidden],.scrim[hidden]{display:none}
.drawer-h{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.drawer-h h2{font-size:20px}
.drawer-b{flex:1; overflow-y:auto; padding:6px 22px}
.drawer-f{border-top:1px solid var(--line); padding:20px 22px; display:grid; gap:13px}
.sub{display:flex; justify-content:space-between; align-items:baseline; font-size:14px}
.sub b{font-family:var(--serif); font-size:24px; color:var(--gold-light)}
.view{text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.view:hover{color:var(--gold)}

.line{display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid #191B1D}
.line:last-child{border-bottom:0}
.line-img{width:72px; height:72px; object-fit:cover; background:var(--surface-2)}
.line h3{font-size:14.5px; line-height:1.35; margin-bottom:3px}
.line small{display:block; font-size:11.5px; color:var(--subtle)}
.line-p{font-size:14px; color:var(--gold-light); margin-top:6px}
.qty{display:flex; align-items:center; gap:2px; margin-top:9px; width:max-content; border:1px solid var(--line)}
.qty button{width:28px; height:28px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:15px; line-height:1}
.qty button:hover{color:var(--gold)}
.qty span{min-width:26px; text-align:center; font-size:13px}
.del{background:none; border:0; color:var(--subtle); cursor:pointer; padding:4px; align-self:flex-start}
.del:hover{color:#E0726A}
.empty{padding:60px 0; text-align:center; color:var(--subtle); font-size:14px}

/* page hero used by the inner pages */
.phero{padding:clamp(48px,6vw,76px) 0 clamp(30px,3.6vw,46px); border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(30px,4.2vw,52px); line-height:1.06; margin-bottom:14px;
          text-transform:uppercase; letter-spacing:.03em; font-weight:500}
.phero p{color:var(--muted); max-width:620px; font-size:16px}

/* product detail */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,62px); align-items:start}
.pdp-img{background:var(--surface-2); aspect-ratio:1/1; overflow:hidden}
.pdp-img img{width:100%; height:100%; object-fit:cover}
.pdp h1{font-size:clamp(28px,3.6vw,42px); line-height:1.1; margin-bottom:10px}
.pdp .price{font-size:28px; margin:16px 0 22px}
.opt{margin-bottom:20px}
.opt b{display:block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.opt-row{display:flex; gap:8px; flex-wrap:wrap}
.opt-row input{position:absolute; opacity:0; pointer-events:none}
.opt-row label{
  padding:10px 17px; border:1px solid var(--line); font-size:13px; cursor:pointer; transition:border-color .16s,color .16s;
}
.opt-row input:checked + label{border-color:var(--gold); color:var(--gold)}
.opt-row label:hover{border-color:var(--gold-dark)}
.spec{border-top:1px solid var(--line); margin-top:26px; padding-top:22px; display:grid; gap:11px}
.spec div{display:flex; justify-content:space-between; gap:18px; font-size:13.5px}
.spec dt{color:var(--subtle)}

/* diamonds grid */
.shapes{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.shape{padding:24px 22px; background:var(--surface); border:1px solid var(--line)}
.shape b{display:block; font-family:var(--serif); font-size:21px; margin-bottom:8px}
.shape p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.65}

.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px)}
.col h3{font-size:21px; margin-bottom:10px}
.col p{color:var(--muted); font-size:14.5px; margin:0}

/* ------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .prods{grid-template-columns:repeat(3,1fr)}
  .shapes{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr; row-gap:34px}
}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:grid}
  .acts{margin-left:auto}
  .show{grid-template-columns:1fr 1fr}
  .show-img.third{display:none}
  .custom{grid-template-columns:1fr 1fr}
  .custom-img{grid-row:1}
  .cols{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hero{min-height:0; padding-bottom:0}
  .hero-img img{object-position:76% 34%}
  .hero-in{padding:58px 0 0}
  .trust-in{gap:26px}
  .show,.custom{grid-template-columns:1fr}
  .show-img{min-height:230px}
  .custom-img{min-height:230px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:repeat(2,1fr)}
  .sec-head{flex-direction:column; align-items:flex-start; gap:12px}
  .row2{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  :root{--header-h:82px}
  .brand img{height:58px}
}
@media (max-width:560px){
  :root{--header-h:72px}
  .hdr-in{gap:10px}
  .brand img{height:50px}
  .acts .ico{width:36px; height:36px}
  .acts a.ico{display:none}            /* account lives in the menu on a phone */
}
@media (max-width:480px){
  .shapes{grid-template-columns:1fr}
  .drawer{width:100vw}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .trust-in{flex-direction:column; gap:16px}
  .ftr-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-btns .btn{width:auto; flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .cat img,.card-img img{transition:none}
}