/* ============================================================
   CACHAREL DIAMOND JEWELRY — Romania
   Light + colour-blocked, after the Lacoste Members Experience
   gallery; cherry intro and skew-tile wipes after charlesleclerc.
   ============================================================ */

:root{
  --paper:#F5F3EF;
  --paper2:#EDEAE4;
  --ink:#16121A;
  --ink2:#4A444F;
  --ink3:#8A838F;
  --line:rgba(22,18,26,.13);
  --line2:rgba(22,18,26,.26);

  --cherry:#6E0F20;
  --cherry-deep:#43060F;
  --cherry-hot:#A8172F;
  --gold:#B98C3F;

  --ui:1;
  --pad:clamp(18px,4.2vw,72px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-exp:cubic-bezier(.22,1,.36,1);

  /* Bodoni's hairlines vanish on paper — a whisper of shadow gives them weight */
  --sh-sm:0 1px 1px rgba(22,18,26,.14);
  --sh-lg:0 1px 1.5px rgba(22,18,26,.20),0 3px 12px rgba(22,18,26,.13);
  --sh-dk-sm:0 1px 2px rgba(20,2,7,.42);
  --sh-dk-lg:0 1px 2px rgba(20,2,7,.48),0 4px 18px rgba(20,2,7,.38);

  --bag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 8h12l-1 12H7L6 8Zm3 0V6a3 3 0 0 1 6 0v2' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");

  --f-d:'Bodoni Moda','Didot','Times New Roman',serif;
  --f-s:'Figtree',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
@media (max-width:1240px){:root{--ui:.94}}
@media (max-width:900px){:root{--ui:.86}}
@media (max-width:600px){:root{--ui:.8}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-s);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
  text-shadow:var(--sh-sm);
}
body.is-loading{overflow:hidden;height:100vh}
body.menu-open,body.det-open{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cherry);color:#fff}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--paper2)}
::-webkit-scrollbar-thumb{background:rgba(110,15,32,.45);border-radius:99px}

/* ---------- text shadow map ---------- */
.hero__title,.h2,.ck__done-h,.det__name,.tile__n,.quote__price,.hnum__v,
.det__price-v,.hdr__mark-main,.specs dd,.det__specs dd,.gal__create,.shapes__desc,
.menu__t,.lead,.hero__sub{text-shadow:var(--sh-lg)}
#menu,.ftr,#preloader,.pill--solid,.filt.is-on,.chip.is-on,.cur__label,
.shp.is-on span,.tile__ct{text-shadow:var(--sh-dk-sm)}
#menu .menu__t,.ftr__legal,.pl__name,.pl__pct{text-shadow:var(--sh-dk-lg)}
input,select,textarea,.ftr__mark span,.shapes__name{text-shadow:none}

/* ---------- type ---------- */
.micro{font-size:calc(9px*var(--ui) + 1.5px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin:0}
.eyebrow{font-size:calc(9px*var(--ui) + 1.5px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cherry);margin:0 0 calc(18px*var(--ui)) 0}
.h2{font-family:var(--f-d);font-weight:400;font-size:clamp(30px,4.6vw,66px);line-height:1.04;letter-spacing:-.018em;margin:0 0 .55em}
.lead{font-size:clamp(14px,1.05vw,17px);line-height:1.7;color:var(--ink2);max-width:44ch;margin:0 0 2em}
.foot-note{font-size:11px;line-height:1.55;color:var(--ink3);max-width:48ch;margin:13px 0 0}

/* ---------- pills ---------- */
.pill{
  --h:calc(40px*var(--ui) + 6px);
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--h);padding:0 calc(22px*var(--ui) + 10px);
  border:1px solid var(--line2);border-radius:99px;
  font-size:calc(9px*var(--ui) + 1.5px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-out),border-color .45s var(--e-out);
}
.pill::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:99px;background:var(--cherry);
  transform:translateY(101%);transition:transform .58s var(--e-exp)}
.pill:hover{color:#fff;border-color:var(--cherry)}
.pill:hover::after{transform:translateY(0)}
.pill--sm{--h:calc(31px*var(--ui) + 4px);padding:0 calc(15px*var(--ui) + 6px)}
.pill--lg{--h:calc(48px*var(--ui) + 8px);padding:0 calc(30px*var(--ui) + 10px)}
.pill--solid{color:#fff;border-color:var(--cherry)}
.pill--solid::after{transform:translateY(0)}
.pill--solid:hover::after{filter:brightness(1.18)}

.grain{
  position:fixed;inset:-25%;z-index:90;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,1%)}}

/* ============================================================
   INTRO — rotten-cherry, C.D.J cycling through cuts
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;transition:opacity .45s linear}
#preloader.is-done{opacity:0;pointer-events:none}
.pl__bg{position:absolute;inset:0;background:radial-gradient(78% 62% at 50% 44%,#8A1528 0%,#6E0F20 42%,#43060F 100%)}
.pl__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(20,2,7,.72) 100%)}
.pl__mark{
  position:relative;z-index:2;color:#F6EDE6;line-height:1;text-align:center;
  font-size:clamp(22px,4.55vw,67px);
  text-shadow:0 1px 2px rgba(20,2,7,.42),0 5px 28px rgba(20,2,7,.5);
  transition:opacity .045s linear;
  white-space:nowrap;max-width:88vw;
}
.pl__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(28px + 3vh);z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;color:rgba(246,237,230,.72)}
.pl__name{font-size:calc(8px*var(--ui) + 2px);font-weight:700;letter-spacing:.42em}
.pl__pct{font-size:calc(9px*var(--ui) + 2px);font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.pl__pct i{font-style:normal}
.pl__meter{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(246,237,230,.16);z-index:2}
.pl__meter span{display:block;height:100%;width:0;background:#F6EDE6;transition:width .32s var(--e-out)}

/* ---------- skew-tile wipe ---------- */
#tiles{position:fixed;top:50%;left:50%;z-index:150;pointer-events:none;
  width:130vw;height:190vh;transform:translate(-50%,-50%) skewX(-10deg);display:grid;grid-auto-flow:row}
#tiles .trow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
#tiles i{display:block;width:100%;height:100%;background:var(--cherry);transform:scaleY(0);transform-origin:top;will-change:transform}
#tiles.is-in i{transform:scaleY(1)}
#tiles.is-out i{transform:scaleY(0);transform-origin:bottom}

/* ---------- cursor ---------- */
#cursor{position:fixed;top:0;left:0;z-index:180;pointer-events:none}
.cur__dot{position:absolute;width:5px;height:5px;border-radius:99px;background:var(--cherry);transform:translate(-50%,-50%)}
.cur__ring{position:absolute;width:32px;height:32px;border-radius:99px;border:1px solid rgba(110,15,32,.5);
  transform:translate(-50%,-50%) scale(1);transition:transform .4s var(--e-out),opacity .3s,background-color .3s,border-color .3s}
.cur__label{position:absolute;transform:translate(-50%,-50%);font-size:8.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap}
body.cur-link .cur__ring{transform:translate(-50%,-50%) scale(1.5)}
body.cur-view .cur__ring{transform:translate(-50%,-50%) scale(2.5);background:var(--cherry);border-color:var(--cherry)}
body.cur-view .cur__dot{opacity:0}
body.cur-view .cur__label{opacity:1}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ============================================================
   HEADER + MENU
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:calc(14px + 1.1vh) var(--pad);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--e-exp),background-color .45s,border-color .45s,opacity .4s;
}
body.is-loading .hdr{opacity:0;transform:translateY(-12px)}
.hdr.is-stuck{background:rgba(245,243,239,.82);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.hdr.is-hidden{transform:translateY(-110%)}
body.menu-open .hdr,body.det-open .hdr{background:transparent;border-bottom-color:transparent}
/* header sits on the cherry menu — flip it light */
body.menu-open .hdr__link,body.menu-open .hdr__mark-main,body.menu-open .lang__i.is-on{color:#F6EDE6}
body.menu-open .hdr__mark-sub,body.menu-open .lang__i,body.menu-open .lang__sep{color:rgba(246,237,230,.55)}
body.menu-open .hdr .pill{color:#F6EDE6;border-color:rgba(246,237,230,.45)}
body.menu-open .hdr .pill::after{background:#F6EDE6}
body.menu-open .hdr .pill:hover{color:var(--cherry);border-color:#F6EDE6}
.hdr__l,.hdr__r{display:flex;align-items:center;gap:calc(14px*var(--ui) + 8px)}
.hdr__r{justify-content:flex-end}
.hdr__link{font-size:calc(9px*var(--ui) + 1.5px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);position:relative;padding:3px 0;transition:color .35s}
.hdr__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cherry);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-exp)}
.hdr__link:hover{color:var(--ink)}
.hdr__link:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__mark{display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center}
.hdr__mark-main{font-family:var(--f-d);font-size:calc(13px*var(--ui) + 4px);letter-spacing:.4em;text-indent:.4em}
.hdr__mark-sub{font-size:calc(6px*var(--ui) + 1.5px);font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--ink3);margin-top:5px}
.lang{font-size:calc(8px*var(--ui) + 1.5px);font-weight:700;letter-spacing:.14em;color:var(--ink3);padding:5px 2px}
.lang__i.is-on{color:var(--ink)}
.lang__sep{margin:0 3px;opacity:.45}
.burger{width:26px;height:16px;position:relative;flex:0 0 auto}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);transition:transform .5s var(--e-exp),opacity .3s,background-color .3s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:7px}.burger i:nth-child(3){top:14px}
body.menu-open .burger i{background:#F6EDE6}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#menu{position:fixed;inset:0;z-index:115;background:var(--cherry);color:#F6EDE6;
  opacity:0;visibility:hidden;transition:opacity .1s .5s,visibility .1s .5s}
body.menu-open #menu{opacity:1;visibility:visible;transition:opacity .1s,visibility .1s}
.menu__inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(86px + 4vh) var(--pad) calc(38px + 4vh)}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{overflow:hidden;padding-bottom:.1em}
.menu__list a{display:flex;align-items:baseline;gap:calc(14px*var(--ui) + 8px);padding:calc(3px*var(--ui)) 0;
  transform:translateY(105%);transition:transform .8s var(--e-exp)}
body.menu-open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.42s}.menu__list li:nth-child(2) a{transition-delay:.48s}
.menu__list li:nth-child(3) a{transition-delay:.54s}.menu__list li:nth-child(4) a{transition-delay:.60s}
.menu__list li:nth-child(5) a{transition-delay:.66s}.menu__list li:nth-child(6) a{transition-delay:.72s}
.menu__n{font-size:calc(8px*var(--ui) + 1.5px);font-weight:700;letter-spacing:.18em;color:rgba(246,237,230,.55)}
.menu__t{font-family:var(--f-d);font-size:clamp(30px,5.8vw,82px);line-height:1.04;letter-spacing:-.02em;transition:opacity .35s}
.menu__list a:hover .menu__t{opacity:.62}
.menu__aside{margin-top:auto;padding-top:calc(26px*var(--ui) + 12px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 48px;max-width:680px;opacity:0;transform:translateY(14px);transition:all .7s var(--e-out) .8s}
body.menu-open .menu__aside{opacity:1;transform:none}
#menu .micro{color:rgba(246,237,230,.6)}
.menu__addr,.menu__soc{font-size:13px;margin:8px 0 0;line-height:1.7}
.menu__soc a{margin-right:16px;opacity:.72;transition:opacity .3s}
.menu__soc a:hover{opacity:1}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;
  padding:calc(96px + 3vh) var(--pad) calc(70px + 4vh)}
.hero__tint{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 74% 44%,rgba(198,205,233,.60),transparent 66%),
  radial-gradient(52% 48% at 16% 78%,rgba(240,200,206,.52),transparent 70%)}
.hero__copy{position:relative;z-index:3;max-width:min(56ch,52vw)}
.hero__title{font-family:var(--f-d);font-weight:400;font-size:clamp(40px,7.2vw,116px);line-height:.98;
  letter-spacing:-.03em;margin:0 0 calc(16px*var(--ui) + 6px)}
.hero__title .ln{display:block}
.hero__title .ln--it{font-style:italic;color:var(--cherry)}
.hero__sub{font-size:clamp(13px,1.05vw,17px);color:var(--ink2);max-width:38ch;margin:0 0 calc(24px*var(--ui) + 10px)}
.hero__piece{position:absolute;top:52%;right:max(0px,calc(var(--pad) - 4vw));width:min(50vw,68vh);aspect-ratio:1;
  transform:translateY(-50%) translate3d(var(--px,0),var(--py,0),0) rotate(var(--rz,0deg));
  z-index:2;will-change:transform}
.hero__piece img{filter:drop-shadow(0 20px 34px rgba(40,24,34,.18))}
.hero__piece img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.hero__shadow{position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 58%,rgba(40,24,34,.15),transparent 68%);filter:blur(12px);pointer-events:none}
.hero__spec{position:absolute;left:var(--pad);bottom:calc(28px + 3vh);z-index:4}
.hero__cue{position:absolute;right:var(--pad);bottom:calc(28px + 3vh);z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hero__cue-line{display:block;width:1px;height:clamp(30px,5vh,58px);background:linear-gradient(to bottom,transparent,var(--cherry));position:relative;overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--ink);animation:cue 2.2s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}

/* ============================================================
   GALLERY — colour-blocked grid
   ============================================================ */
.gal{position:relative;z-index:2}
.gal__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:calc(24px + 1vh) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gal__filters,.gal__sort{display:flex;gap:calc(8px*var(--ui) + 4px);flex-wrap:wrap}
.filt,.sort{font-size:calc(8.5px*var(--ui) + 1.5px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);padding:7px 13px;border:1px solid transparent;border-radius:99px;transition:all .35s var(--e-out)}
.filt:hover,.sort:hover{color:var(--ink)}
.filt.is-on{color:#fff;background:var(--cherry);border-color:var(--cherry)}
.sort.is-on{color:var(--ink);border-color:var(--line2)}

.gal__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tile{
  position:relative;aspect-ratio:1/1.32;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tile__bg{position:absolute;inset:0;transition:filter .7s var(--e-out),transform 1.1s var(--e-exp)}
.tile:hover .tile__bg,.tile.is-hover .tile__bg{filter:brightness(1.045) saturate(1.06);transform:scale(1.03)}
.tile__frame{position:absolute;inset:22px;border:1px solid rgba(255,255,255,.85);opacity:0;
  transform:scale(1.035);transition:opacity .5s var(--e-out),transform .7s var(--e-exp);pointer-events:none}
.tile:hover .tile__frame,.tile.is-hover .tile__frame{opacity:1;transform:scale(1)}
.tile__wrap{position:relative;z-index:2;width:74%;aspect-ratio:1;will-change:transform;
  transition:transform .85s var(--e-exp)}
.tile[data-cat="necklace"] .tile__wrap{width:90%}
.tile[data-cat="bracelet"] .tile__wrap{width:94%}
.tile[data-cat="pendant"] .tile__wrap{width:84%}
.tile[data-cat="earrings"] .tile__wrap{width:78%}
.tile:hover .tile__wrap,.tile.is-hover .tile__wrap{transform:scale(1.075) translateY(-8px)}
.tile__wrap img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.tile__shadow{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 58%,rgba(40,24,34,.15),transparent 68%);filter:blur(12px);pointer-events:none}
.tile:hover .tile__shadow,.tile.is-hover .tile__shadow{opacity:.72}
.tile__sheen{position:absolute;top:0;left:-60%;width:42%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-14deg);
  transition:left .95s var(--e-exp)}
.tile:hover .tile__sheen,.tile.is-hover .tile__sheen{left:130%}
.tile__meta{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 22px 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  transform:translateY(8px);opacity:.86;transition:transform .6s var(--e-exp),opacity .4s}
.tile:hover .tile__meta,.tile.is-hover .tile__meta{transform:translateY(0);opacity:1}
.tile__n{font-family:var(--f-d);font-size:clamp(15px,1.35vw,21px);line-height:1.15;margin:0;color:var(--ink)}
.tile__s{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(22,18,26,.55);margin:4px 0 0}
.tile__p{font-size:12px;font-weight:700;letter-spacing:.05em;white-space:nowrap;color:var(--ink)}
.tile__ct{position:absolute;top:20px;left:22px;z-index:4;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.72);padding:5px 10px;border-radius:99px}
.gal__create{
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:calc(30px + 3vh) var(--pad) calc(40px + 4vh);
  font-family:var(--f-d);font-size:clamp(30px,5.4vw,86px);line-height:1;letter-spacing:-.02em;
  transition:color .45s}
.gal__create:hover{color:var(--cherry)}

/* ============================================================
   DETAIL OVERLAY
   ============================================================ */
#detail{position:fixed;inset:0;z-index:160;opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility .45s}
body.det-open #detail{opacity:1;visibility:visible}
.det__bg{position:absolute;inset:0;transition:background-color .7s var(--e-out)}
.det__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 42%,rgba(255,255,255,.4),transparent 70%)}
.det__stage{position:absolute;top:47%;left:50%;width:min(56vh,72vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:2}
.det__stage img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  opacity:0;transform:scale(.94) translateY(14px);transition:opacity .55s var(--e-out),transform .8s var(--e-exp)}
.det__stage img.is-in{opacity:1;transform:none}
.det__shadow{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 58%,rgba(40,24,34,.15),transparent 68%);filter:blur(12px);pointer-events:none}
.det__close{position:absolute;top:calc(20px + 1vh);right:var(--pad);z-index:6;width:40px;height:40px;
  border:1px solid var(--line2);border-radius:99px}
.det__close i{position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:var(--ink)}
.det__close i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.det__close i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.det__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:clamp(44px,5vw,74px);color:var(--ink);
  opacity:.55;transition:opacity .35s,transform .5s var(--e-exp)}
.det__nav:hover{opacity:1}
.det__nav--prev{left:calc(var(--pad) * .5)}
.det__nav--prev:hover{transform:translateY(-50%) translateX(-6px)}
.det__nav--next{right:calc(var(--pad) * .5)}
.det__nav--next:hover{transform:translateY(-50%) translateX(6px)}
.det__specs{position:absolute;top:calc(84px + 2vh);left:var(--pad);z-index:5;display:grid;gap:10px;margin:0}
.det__specs div{display:flex;gap:10px;align-items:baseline}
.det__specs dt{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(22,18,26,.5);min-width:112px;margin:0}
.det__specs dd{font-family:var(--f-d);font-size:15px;margin:0}
.det__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(24px + 2vh);z-index:5;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.det__name{font-family:var(--f-d);font-weight:400;font-size:clamp(26px,4vw,58px);line-height:1;margin:0;letter-spacing:-.02em}
.det__sku{font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(22,18,26,.55);margin:8px 0 0}
.det__metals{display:flex;gap:9px;margin-top:16px}
.det__price{text-align:right;border-left:1px solid var(--line);padding-left:clamp(16px,2.4vw,34px)}
.det__price-v{display:block;font-family:var(--f-d);font-size:clamp(24px,3.2vw,44px);line-height:1.05}
.det__price-l{display:block;margin-top:6px;color:rgba(22,18,26,.5)}

/* metal swatches (shared) */
.sw{width:34px;height:34px;border-radius:99px;border:1px solid var(--line2);position:relative;
  transition:transform .35s var(--e-out),border-color .3s}
.sw span{position:absolute;inset:3px;border-radius:99px}
.sw:hover{transform:scale(1.09)}
.sw.is-on{border-color:var(--ink)}
.sw.is-on::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:99px;opacity:.4}

/* ============================================================
   SHAPES
   ============================================================ */
.shapes{position:relative;z-index:2;background:var(--paper2);border-top:1px solid var(--line);
  padding:clamp(70px,11vh,150px) var(--pad)}
.shapes__head{max-width:1500px;margin:0 auto clamp(30px,5vh,58px)}
.shapes__body{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(210px,.8fr) 1.2fr;gap:clamp(24px,4vw,72px);align-items:center}
.shapes__pick{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.shp{background:var(--paper2);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:background-color .45s var(--e-out)}
.shp svg{width:34%;color:var(--ink3);transition:color .4s var(--e-out),transform .6s var(--e-exp)}
.shp span{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);transition:color .4s}
.shp:hover{background:#fff}
.shp:hover svg{transform:scale(1.12)}
.shp.is-on{background:var(--cherry)}
.shp.is-on svg{color:#F6EDE6}
.shp.is-on span{color:rgba(246,237,230,.8)}
.shapes__view{position:relative;min-height:min(56vh,520px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.shapes__name{font-family:var(--f-d);font-size:clamp(46px,9vw,150px);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(22,18,26,.22);position:absolute;top:0;left:50%;transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;transition:opacity .35s;top:-2%;opacity:.75}
.shapes__piece{position:relative;width:min(62%,44vh);aspect-ratio:1;z-index:2}
.shapes__piece img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  opacity:0;transform:scale(.92) rotate(-4deg);transition:opacity .5s var(--e-out),transform .9s var(--e-exp)}
.shapes__piece img.is-in{opacity:1;transform:none}
.shapes__shadow{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 58%,rgba(40,24,34,.15),transparent 68%);filter:blur(12px);pointer-events:none}
.shapes__meta{text-align:center;margin-top:18px;z-index:2}
.shapes__desc{font-size:14px;line-height:1.7;color:var(--ink2);max-width:38ch;margin:0 auto 10px}

/* ============================================================
   CREATE
   ============================================================ */
.create{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:start;min-height:100svh;border-top:1px solid var(--line)}
.create__view{position:sticky;top:0;align-self:start;height:100svh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-right:1px solid var(--line);transition:background-color .8s var(--e-out)}
.create__view::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 56% at 50% 44%,rgba(255,255,255,.45),transparent 70%)}
.create__piece{position:relative;z-index:2;width:min(74%,60vh);aspect-ratio:1;will-change:transform}
.create__piece img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  opacity:0;transform:scale(.95);transition:opacity .45s var(--e-out),transform .7s var(--e-exp)}
.create__piece img.is-in{opacity:1;transform:none}
.create__shadow{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 58%,rgba(40,24,34,.15),transparent 68%);filter:blur(12px);pointer-events:none}
.create__hud{position:absolute;left:var(--pad);bottom:calc(24px + 2vh);z-index:4;display:flex;align-items:center;gap:12px}
.create__hud::before{content:"";width:24px;height:1px;background:var(--cherry)}
.create__hud .micro{color:var(--ink2)}
.create__panel{padding:clamp(84px,10vh,124px) var(--pad) clamp(36px,5vh,64px);display:flex;flex-direction:column;justify-content:flex-start}
.create__panel .h2{font-size:clamp(26px,3.2vw,50px);margin-bottom:calc(16px*var(--ui) + 6px)}
.create__panel .eyebrow{margin-bottom:calc(10px*var(--ui) + 4px)}
.ctrl{margin-bottom:calc(11px*var(--ui) + 6px)}
.ctrl__hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;gap:12px}
.ctrl__val{font-size:12.5px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.slider{position:relative;padding:13px 0 4px}
.slider__rail{position:absolute;left:0;right:0;top:19px;height:2px;background:rgba(22,18,26,.14)}
.slider__rail i{display:block;height:100%;width:20%;background:var(--cherry)}
.slider input[type=range]{position:relative;z-index:2;width:100%;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;height:22px;cursor:pointer}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:99px;background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 0 0 4px rgba(110,15,32,.14);transition:box-shadow .3s}
.slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(110,15,32,.18)}
.slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:99px;
  background:var(--paper);border:1px solid var(--ink);box-shadow:0 0 0 4px rgba(110,15,32,.14)}
.slider input[type=range]::-moz-range-track{background:transparent}
.slider__ticks{display:flex;justify-content:space-between;margin-top:5px;
  font-size:9px;font-weight:600;letter-spacing:.12em;color:var(--ink3)}
.chip{border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:9.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);transition:all .35s var(--e-out)}
.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip.is-on{color:#fff;background:var(--cherry);border-color:var(--cherry)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.th{width:52px;height:52px;border:1px solid var(--line);border-radius:3px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .4s var(--e-out)}
.th img{width:100%;height:100%;object-fit:contain;padding:5px}
.th:hover{transform:translateY(-3px)}
.th.is-on{border-color:var(--cherry);box-shadow:inset 0 0 0 1px var(--cherry)}
.swatches{display:flex;gap:11px}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 20px;margin:calc(9px*var(--ui) + 4px) 0;
  border-top:1px solid var(--line);padding-top:calc(11px*var(--ui) + 6px)}
.specs div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.specs dt{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0}
.specs dd{font-family:var(--f-d);font-size:15px;margin:0}
.quote{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:calc(13px*var(--ui) + 8px)}
.quote__price{display:block;font-family:var(--f-d);font-size:clamp(26px,3vw,44px);line-height:1.1;margin:5px 0 2px}
.quote__price i{font-style:normal}

/* ============================================================
   HOUSE / BOOK / FOOTER
   ============================================================ */
.house{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;
  padding:clamp(76px,12vh,160px) var(--pad);border-top:1px solid var(--line);background:var(--paper2)}
.house__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.hnum{background:var(--paper);padding:clamp(20px,3.2vh,40px) clamp(18px,2vw,30px)}
.hnum__v{font-family:var(--f-d);font-size:clamp(26px,3.4vw,54px);line-height:1;margin:0 0 10px;font-variant-numeric:tabular-nums}
.hnum__v small{font-size:.48em;color:var(--cherry);margin-left:2px}
.hnum__l{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0;line-height:1.6}
.hnum__s{font-size:9px;letter-spacing:.1em;color:var(--ink3);margin:8px 0 0}

.fld{display:flex;flex-direction:column;gap:8px}
.fld--full{grid-column:1/-1}
.fld input,.fld select,.fld textarea{background:transparent;border:0;border-bottom:1px solid var(--line2);
  padding:10px 0;font-size:15px;outline:none;border-radius:0;transition:border-color .4s}
.fld select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 11px) 18px,calc(100% - 6px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.fld textarea{resize:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cherry)}

.ftr{position:relative;z-index:2;background:var(--cherry);color:#F6EDE6;overflow:hidden}
.ftr .micro{color:rgba(246,237,230,.6)}
.ftr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:clamp(42px,7vh,88px) var(--pad) clamp(28px,4vh,48px)}
.ftr__txt{font-size:13px;line-height:1.9;margin:10px 0 0}
.ftr__txt a{opacity:.75;transition:opacity .3s}
.ftr__txt a:hover{opacity:1}
.ftr__mark{padding:0 var(--pad);line-height:.78;overflow:hidden}
.ftr__mark span{display:block;font-family:var(--f-d);font-size:clamp(76px,33vw,470px);letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px rgba(246,237,230,.34);white-space:nowrap}
.ftr__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(22px,4vh,42px) var(--pad);border-top:1px solid rgba(246,237,230,.2);margin-top:clamp(22px,4vh,42px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e-out),transform .95s var(--e-exp)}
.reveal.is-in{opacity:1;transform:none}
.wl{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .06em .26em;margin:0 -.06em -.26em}
.wl > i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .95s var(--e-exp)}
[data-split].is-in .wl > i{transform:translateY(0)}


/* ============================================================
   ATELIER EXTRAS — band preview, patterns, engraving
   ============================================================ */
.is-hidden{display:none !important}
.create__band{
  position:absolute;left:var(--pad);right:var(--pad);bottom:calc(56px + 2vh);z-index:3;
  height:clamp(58px,8.5vh,92px);border-radius:7px;overflow:hidden;
  box-shadow:0 12px 34px rgba(40,24,34,.20),0 1px 0 rgba(255,255,255,.6) inset;
}
.create__band svg{width:100%;height:100%;display:block}
.pats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pat{
  border:1px solid var(--line);border-radius:5px;overflow:hidden;text-align:left;background:#fff;
  transition:border-color .3s,transform .35s var(--e-out),box-shadow .3s;
}
.pat:hover{transform:translateY(-2px)}
.pat.is-on{border-color:var(--cherry);box-shadow:inset 0 0 0 1px var(--cherry)}
.pat__sw{display:block;height:26px;overflow:hidden}
.pat__sw svg{width:100%;height:100%;display:block}
.pat__n{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 7px 0;color:var(--ink)}
.pat__d{display:block;font-size:8.5px;letter-spacing:.06em;color:var(--ink3);padding:1px 7px 6px}
.pat.is-on .pat__d{color:var(--cherry)}
.chips--sm .chip{padding:7px 11px;font-size:9px}
.engrave{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);padding:9px 0;
  font-family:var(--f-d);font-size:19px;letter-spacing:.14em;outline:none;border-radius:0;
  transition:border-color .35s;
}
.engrave:focus{border-color:var(--cherry)}
.ctrl__hd b{font-family:var(--f-d);font-weight:400;font-size:11px;color:var(--cherry);margin-right:5px;letter-spacing:0}

/* ============================================================
   SERVICE
   ============================================================ */
.service{position:relative;z-index:2;padding:clamp(70px,11vh,150px) var(--pad);border-top:1px solid var(--line)}
.service__head{max-width:1500px;margin:0 auto clamp(28px,4.5vh,54px)}
.service__grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sv{background:var(--paper);padding:clamp(22px,3.2vh,40px) clamp(18px,2vw,32px)}
/* keep the cell opaque while it reveals, or the grid's divider colour
   shows through as a grey slab before the text arrives */
.sv.reveal{opacity:1;transform:none}
.sv.reveal > *{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--e-out),transform .95s var(--e-exp)}
.sv.reveal > *:nth-child(2){transition-delay:.06s}
.sv.reveal > *:nth-child(3){transition-delay:.12s}
.sv.reveal.is-in > *{opacity:1;transform:none}
.sv__n{font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--cherry)}
.sv__t{font-family:var(--f-d);font-weight:400;font-size:clamp(19px,1.9vw,26px);line-height:1.15;margin:12px 0 8px}
.sv__d{font-size:13px;line-height:1.7;color:var(--ink2);margin:0;max-width:34ch}

/* ============================================================
   DETAIL — buy block
   ============================================================ */
.det__buy{display:flex;align-items:flex-end;gap:clamp(16px,2.4vw,34px)}
.det__acts{display:flex;gap:9px;flex-wrap:wrap}

/* ============================================================
   CART BUTTON + DRAWER
   ============================================================ */
.cartbtn{gap:.55em}
.cartbtn__n{
  font-style:normal;min-width:19px;height:19px;padding:0 5px;border-radius:99px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--cherry);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:0;transition:background-color .3s,transform .35s var(--e-out)
}
.cartbtn__n.is-zero{background:var(--line2);color:var(--ink2)}
.pill:hover .cartbtn__n{background:#fff;color:var(--cherry)}
.cartbtn.is-pop{animation:pop .5s var(--e-exp)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.menu__btn{display:flex;align-items:baseline;gap:calc(14px*var(--ui) + 8px);padding:calc(3px*var(--ui)) 0;
  transform:translateY(105%);transition:transform .8s var(--e-exp) .78s;text-align:left}
body.menu-open .menu__btn{transform:translateY(0)}
.menu__btn .menu__t{transition:opacity .35s}
.menu__btn:hover .menu__t{opacity:.62}

#cart{position:fixed;inset:0;z-index:165;visibility:hidden;transition:visibility .5s}
body.cart-open #cart{visibility:visible}
.cart__scrim{position:absolute;inset:0;background:rgba(22,18,26,.44);opacity:0;transition:opacity .45s var(--e-out)}
body.cart-open .cart__scrim{opacity:1}
.cart__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(452px,100%);background:var(--paper);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(22,18,26,.18);
  transform:translateX(100%);transition:transform .6s var(--e-exp);
}
body.cart-open .cart__panel{transform:none}
.cart__hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,3vh,30px) clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}
.cart__title{font-family:var(--f-d);font-weight:400;font-size:clamp(22px,2.4vw,30px);margin:0}
.cart__x,.ck__x{width:38px;height:38px;border:1px solid var(--line2);border-radius:99px;position:relative;flex:0 0 auto}
.cart__x i,.ck__x i{position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink)}
.cart__x i:nth-child(1),.ck__x i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.cart__x i:nth-child(2),.ck__x i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.cart__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(14px,2vh,20px) clamp(20px,3vw,32px)}
.cart__empty{text-align:center;padding:clamp(40px,10vh,80px) 0;display:flex;flex-direction:column;align-items:center;gap:20px}
.cart__empty-t{font-family:var(--f-d);font-size:20px;margin:0;color:var(--ink2)}
.ci{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci__im{border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ci__im img{width:86%;height:86%;object-fit:contain}
.ci__n{font-family:var(--f-d);font-weight:400;font-size:17px;line-height:1.2;margin:0}
.ci__n em{font-style:normal;font-family:var(--f-s);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cherry);border:1px solid var(--cherry);border-radius:99px;padding:2px 6px;vertical-align:2px}
.ci__s{font-size:11px;letter-spacing:.04em;color:var(--ink2);margin:5px 0 0}
.ci__e{font-family:var(--f-d);font-size:13px;color:var(--ink);margin:4px 0 0}
.ci__r{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.ci__p{font-size:13px;font-weight:700}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:99px;overflow:hidden}
.qty button{width:30px;height:30px;font-size:15px;line-height:1;color:var(--ink2);transition:background-color .25s,color .25s}
.qty button:hover{background:var(--cherry);color:#fff}
.qty span{min-width:24px;text-align:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.ci__x{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  margin-top:9px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.ci__x:hover{color:var(--cherry);border-bottom-color:var(--cherry)}
.cart__ft{border-top:1px solid var(--line);padding:clamp(16px,2.4vh,24px) clamp(20px,3vw,32px) clamp(20px,3vh,30px)}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.cart__sum span{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.cart__sum b{font-family:var(--f-d);font-weight:400;font-size:26px}
.cart__sum--sm b{font-size:13px;font-family:var(--f-s);color:var(--ink2)}
.cart__go{width:100%;margin-top:10px}
.cart__note{font-size:10.5px;line-height:1.6;color:var(--ink3);margin:12px 0 0}

/* ============================================================
   CHECKOUT
   ============================================================ */
#checkout{position:fixed;inset:0;z-index:170;background:var(--paper);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility .45s}
body.ck-open #checkout{opacity:1;visibility:visible}
.ck__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:0 0 auto;
  padding:clamp(14px,2.2vh,22px) var(--pad);border-bottom:1px solid var(--line)}
.ck__brand{font-family:var(--f-d);font-size:15px;letter-spacing:.4em;text-indent:.4em}
.ck__steps{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);list-style:none;margin:0;padding:0}
.ck__steps li{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);transition:color .4s}
.ck__steps i{width:22px;height:22px;border-radius:99px;border:1px solid var(--line2);display:flex;
  align-items:center;justify-content:center;font-style:normal;font-size:10px;transition:all .4s var(--e-out)}
.ck__steps .is-on{color:var(--ink)}
.ck__steps .is-on i{background:var(--cherry);border-color:var(--cherry);color:#fff}
.ck__steps .is-done i{background:var(--ink);border-color:var(--ink);color:#fff}
.ck__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,72px);
  padding:clamp(26px,4.5vh,56px) var(--pad) clamp(40px,6vh,80px);align-items:start}
.ck__h{font-family:var(--f-d);font-weight:400;font-size:clamp(20px,2.3vw,30px);margin:0 0 16px}
.ck__h + .ck__form,.ck__h + .ck__opts{margin-bottom:clamp(20px,3.4vh,38px)}
.ck__form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-bottom:clamp(18px,3vh,32px)}
.ck__form.is-hidden{display:none}
.ck__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:clamp(18px,3vh,32px)}
.ck__opts--col{grid-template-columns:1fr}
.opt{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);border-radius:6px;
  padding:15px 16px;transition:border-color .3s,background-color .3s}
.opt:hover{border-color:var(--line2)}
.opt.is-on{border-color:var(--cherry);box-shadow:inset 0 0 0 1px var(--cherry)}
.opt__dot{width:15px;height:15px;border-radius:99px;border:1px solid var(--line2);flex:0 0 auto;position:relative;transition:border-color .3s}
.opt.is-on .opt__dot{border-color:var(--cherry)}
.opt.is-on .opt__dot::after{content:"";position:absolute;inset:3px;border-radius:99px;background:var(--cherry)}
.opt__t{font-size:12.5px;font-weight:600;flex:1}
.opt__p{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.opt--col{flex-wrap:wrap}
.opt__d{flex-basis:100%;font-size:11.5px;line-height:1.6;color:var(--ink2);padding-left:26px;margin-top:3px}
.ck__card{font-size:11.5px;line-height:1.6;color:var(--ink3);margin:0 0 clamp(20px,3.4vh,38px);
  border-left:2px solid var(--cherry);padding-left:12px}
.ck__rev{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;margin-bottom:22px}
.ck__rev p{margin:5px 0 0;font-size:13.5px;word-break:break-word}
.ck__terms{display:flex;align-items:flex-start;gap:11px;margin-bottom:18px;cursor:pointer}
.ck__terms input{width:18px;height:18px;flex:0 0 auto;accent-color:#6E0F20;margin-top:1px}
.ck__terms span{font-size:12.5px;line-height:1.6;color:var(--ink2)}
.ck__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ck__err{color:var(--cherry);font-size:12px;font-weight:600;margin:0 0 14px}
input.is-bad,textarea.is-bad{border-bottom-color:var(--cherry) !important}
.ck__side{border:1px solid var(--line);border-radius:6px;padding:clamp(18px,2.6vh,26px);position:sticky;top:0;background:#fff}
.ck__side-h{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px}
.ck__lines{display:grid;gap:14px;margin-bottom:18px;max-height:38vh;overflow-y:auto}
.ckl{display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center}
.ckl__im{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ckl__im img{width:84%;height:84%;object-fit:contain}
.ckl__im i{position:absolute;top:-1px;right:-1px;background:var(--ink);color:#fff;font-style:normal;
  font-size:9px;font-weight:700;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:0 0 0 5px}
.ckl__n{font-family:var(--f-d);font-size:14px;margin:0;line-height:1.2}
.ckl__s{font-size:10px;color:var(--ink3);margin:3px 0 0;line-height:1.4}
.ckl__p{font-size:12px;font-weight:700;white-space:nowrap}
.ck__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.ck__sum span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.ck__sum b{font-size:14px;font-weight:700}
.ck__sum--tot b{font-family:var(--f-d);font-weight:400;font-size:24px}
.ck__sum--sm b{font-size:12px;font-weight:500;color:var(--ink2)}
.ck__vat{font-size:10px;line-height:1.6;color:var(--ink3);margin:14px 0 0}
.ck__done{max-width:46ch}
.ck__done-h{font-family:var(--f-d);font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.04;margin:0 0 18px}
.ck__ref{font-family:var(--f-d);font-size:clamp(22px,2.6vw,34px);letter-spacing:.16em;color:var(--cherry);margin:0 0 20px}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:26px;z-index:195;transform:translate(-50%,18px);
  background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:99px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-shadow:none;
  opacity:0;pointer-events:none;box-shadow:0 12px 34px rgba(22,18,26,.28);
  transition:opacity .35s var(--e-out),transform .5s var(--e-exp);max-width:88vw;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}


/* ============================================================
   OVERFLOW GUARDS
   grid/flex children default to min-width:auto, so one wide child
   (the pattern rail, a long product name) can push a whole column
   past the viewport. Pin the ones that carry scrollers or long text.
   ============================================================ */
.create__view,.create__panel,.ck__main,.ck__side,.hdr__l,.hdr__r,
.det__id,.det__buy,.ci__c,.gal__filters,.gal__sort,.shapes__view,
.house__copy,.book__l{min-width:0}
.pats,.thumbs,.chips,.swatches{min-width:0;max-width:100%}
.tile__meta > div,.ckl > div,.ci__r{min-width:0}
.tile__n,.ckl__n,.ci__n{overflow-wrap:anywhere}
.create__panel{overflow:hidden}
html{overflow-x:hidden;overflow-x:clip}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  .gal__grid{grid-template-columns:repeat(3,1fr)}
  .service__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .create{display:block}
  /* stacked, the sticky column needs to sit above the panel that scrolls under it */
  .create__view{height:58svh;position:sticky;top:0;z-index:4;
    border-right:0;border-bottom:1px solid var(--line)}
  .create__panel{padding:clamp(40px,6vh,64px) var(--pad) clamp(44px,6vh,72px)}
  .house{grid-template-columns:1fr}
  .shapes__body{grid-template-columns:1fr}
  .hero{align-items:end}
  .hero__copy{max-width:none}
  .hero__piece{top:31%;right:auto;left:50%;width:min(60vw,42vh);
    transform:translate(-50%,-50%) translate3d(var(--px,0),var(--py,0),0) rotate(var(--rz,0deg))}
  .ck__body{grid-template-columns:1fr}
  .ck__side{position:static;order:-1}
  .ck__lines{max-height:none}
}
@media (max-width:860px){
  .hdr__l .hdr__link,.hdr__r .hdr__link{display:none}
  .hdr{padding:calc(11px + 1vh) var(--pad)}
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .tile__frame{inset:12px}
  .tile__meta{padding:0 14px 14px}
  .tile__ct{top:12px;left:14px}
  .det__specs{display:none}
  .det__nav{width:34px}
  .ftr__grid{grid-template-columns:1fr;gap:22px}
  .menu__aside{grid-template-columns:1fr}
  .hero__spec{display:none}
  .service__grid{grid-template-columns:1fr}
  .pats{grid-template-columns:repeat(3,1fr)}
  .ck__form,.ck__opts,.ck__rev{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:620px){
  :root{--pad:clamp(16px,5vw,26px)}

  .hdr{grid-template-columns:auto 1fr auto;gap:10px}
  .hdr__mark{align-items:center}
  .hdr__mark-main{font-size:15px;letter-spacing:.3em;text-indent:.3em}
  .hdr__mark-sub{font-size:6.5px;letter-spacing:.24em}
  .lang{display:none}
  .cartbtn{--h:36px;padding:0 12px}
  .cartbtn__t{display:none}
  .cartbtn__n{background:transparent;color:inherit;min-width:0;padding:0;font-size:11px}
  .cartbtn::before{content:"";width:15px;height:15px;margin-right:6px;flex:0 0 auto;background:currentColor;
    -webkit-mask:var(--bag) center/contain no-repeat;mask:var(--bag) center/contain no-repeat}

  .hero{min-height:100svh;padding:calc(84px + 2vh) var(--pad) calc(56px + 3vh);align-items:end}
  .hero__piece{top:30%;width:min(74vw,40vh)}
  .hero__title{font-size:clamp(38px,12vw,58px);line-height:1}
  .hero__sub{font-size:14px;max-width:32ch;margin-bottom:22px}
  .hero__cue{display:none}

  .gal__bar{padding:16px var(--pad);gap:12px}
  .gal__filters,.gal__sort{gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap;max-width:100%}
  .gal__filters::-webkit-scrollbar,.gal__sort::-webkit-scrollbar{display:none}
  .filt,.sort{padding:9px 13px;white-space:nowrap;flex:0 0 auto}
  .gal__grid{grid-template-columns:1fr}
  .tile{aspect-ratio:1/1.1}
  .tile__wrap{width:70%}
  .tile[data-cat="necklace"] .tile__wrap{width:82%}
  .tile[data-cat="bracelet"] .tile__wrap{width:88%}
  .gal__create{padding:34px var(--pad) 44px;justify-content:flex-start;font-size:clamp(30px,10vw,46px)}

  .det__stage{top:41%;width:min(74vw,42vh)}
  .det__close{top:12px;right:var(--pad);width:36px;height:36px}
  .det__nav{width:28px;opacity:.7}
  .det__nav--prev{left:6px}
  .det__nav--next{right:6px}
  .det__foot{flex-direction:column;align-items:stretch;gap:14px;bottom:calc(14px + 1vh)}
  .det__name{font-size:clamp(24px,8vw,34px)}
  .det__metals{margin-top:11px}
  .det__buy{flex-direction:column;align-items:stretch;gap:12px}
  .det__price{border-left:0;padding-left:0;text-align:left;display:flex;align-items:baseline;gap:10px}
  .det__price-v{font-size:26px}
  .det__price-l{margin:0}
  .det__acts{gap:8px}
  .det__acts .pill{flex:1;min-width:0}

  .shapes__pick{grid-template-columns:repeat(3,1fr)}
  .shp svg{width:30%}
  .shapes__view{min-height:auto;margin-top:26px}
  .shapes__name{font-size:clamp(38px,13vw,62px);top:-4%}
  .shapes__piece{width:min(70vw,40vh)}

  .create__view{height:54svh;min-height:0}
  .create__piece{width:min(62%,34vh)}
  .create__band{left:var(--pad);right:var(--pad);bottom:calc(46px + 1vh);height:56px}
  .create__hud{bottom:calc(14px + 1vh)}
  .pats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .pats::-webkit-scrollbar{display:none}
  .pat{flex:0 0 116px;scroll-snap-align:start}
  .th{width:56px;height:56px}
  .sw{width:38px;height:38px}
  .chip{padding:10px 14px}
  .quote{flex-direction:column;align-items:stretch;gap:14px}
  .quote .pill{width:100%}
  .specs{grid-template-columns:1fr}

  .cart__panel{width:100%}
  .ci{grid-template-columns:70px 1fr;gap:12px}
  .ck__bar{padding:11px var(--pad);gap:10px}
  .ck__brand{font-size:12px;letter-spacing:.26em;text-indent:.26em}
  .ck__steps{gap:8px}
  .ck__steps li span{display:none}
  .ck__steps i{width:26px;height:26px;font-size:11px}
  .ck__body{padding:22px var(--pad) 40px;gap:26px}
  .ck__side{padding:16px}
  .ck__acts{flex-direction:column-reverse;align-items:stretch}
  .ck__acts .pill{width:100%}
  .fld input,.fld select,.fld textarea,.engrave{font-size:16px}

  .menu__t{font-size:clamp(29px,9.5vw,46px)}
  .menu__inner{padding:calc(78px + 3vh) var(--pad) calc(28px + 3vh)}
  .ftr__mark span{font-size:clamp(56px,30vw,150px)}
  .ftr__legal{flex-direction:column;gap:8px}
  .toast{bottom:18px;font-size:10px;padding:11px 18px}
}
@media (max-width:400px){
  .pats{gap:6px}
  .pat{flex-basis:104px}
  .shapes__pick{grid-template-columns:repeat(2,1fr)}
}

/* touch: no hover lift, bigger targets */
@media (hover:none){
  .tile:hover .tile__wrap{transform:none}
  .tile:hover .tile__bg{filter:none;transform:none}
  .tile .tile__frame{opacity:0}
  .pill,.chip,.filt,.sort,.opt{-webkit-tap-highlight-color:rgba(110,15,32,.12)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .grain{display:none}
}