/* ── Design Tokens ── */
:root {
  --c-ink:    #1C1410;
  --c-ivory:  #FAF6EF;
  --c-gold:   #C9A35A;
  --c-copper: #B87C6A;
  --c-earth:  #6B4A3E;
  --c-blush:  #F4DCD0;
  --c-rose:   #D4A193;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Base ── */
*{box-sizing:border-box}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--c-rose);border-radius:9px}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--c-ivory);
  color:var(--c-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' 1;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;letter-spacing:-.015em}

/* Tactile grain */
html::after{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.05;pointer-events:none;z-index:9999
}

/* ── Skip link ── */
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--c-ink);color:var(--c-ivory);padding:.5rem 1rem;border-radius:0 0 .5rem .5rem;font-size:.875rem;z-index:999;transition:top .2s}
.skip-link:focus{top:0}

/* ── WCAG AA contrast fixes ── */
.text-earth\/40,.text-earth\/55,.text-earth\/60{color:rgba(107,74,62,.82)!important}
.text-earth\/70{color:rgba(107,74,62,.88)!important}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-9px) rotate(1.5deg)}
  70%{transform:translateY(-5px) rotate(-1deg)}
}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes heroOrbitRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmerGold{
  0%,100%{opacity:.18}
  50%{opacity:.32}
}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.015);opacity:1}
}

.fade-in{animation:fadeUp .7s var(--ease-out) both}
.float{animation:floatY 6s ease-in-out infinite}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)
}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.14s}
.delay-2{transition-delay:.28s}
.delay-3{transition-delay:.42s}

/* ── Navigation ── */
#site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:90;
  transition:background .4s,box-shadow .4s,border-color .4s
}
#site-header.scrolled{
  background:rgba(250,246,239,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(244,220,208,.65);
  box-shadow:0 1px 0 rgba(244,220,208,.5),0 16px 48px -16px rgba(28,20,16,.09)
}
.nav-link{
  position:relative;
  color:#7A5548;
  font-size:.71rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  transition:color .25s;
  padding-bottom:4px;
  text-decoration:none;
  font-weight:500
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0;height:1px;
  background:var(--c-gold);
  transition:width .38s var(--ease-out)
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:var(--c-ink)}

/* ── Sections ── */
.section{display:none}
.section.active{display:block}

/* ── Auth tabs ── */
.auth-tab{color:#8B7355;font-weight:500}
.auth-tab.selected{background:var(--c-ivory);color:var(--c-ink);box-shadow:0 1px 4px rgba(28,20,16,.12);font-weight:600}

/* ── Buttons ── */
.btn-dark{
  background:var(--c-ink);
  color:var(--c-ivory);
  transition:all .35s var(--ease-out);
  border-radius:3px!important;
  font-weight:500;
  letter-spacing:.12em
}
.btn-dark:hover{
  background:var(--c-copper);
  transform:translateY(-2px);
  box-shadow:0 10px 28px -6px rgba(184,124,106,.5)
}
.btn-outline{
  border:1.5px solid var(--c-ink);
  color:var(--c-ink);
  transition:all .35s var(--ease-out);
  border-radius:3px!important;
  font-weight:500
}
.btn-outline:hover{
  background:var(--c-ink);
  color:var(--c-ivory);
  transform:translateY(-2px)
}
.btn-outline:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{
  background:var(--c-copper);
  color:var(--c-ivory);
  transition:all .35s var(--ease-out);
  border-radius:3px!important
}
.btn-primary:hover{
  background:var(--c-earth);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -4px rgba(107,74,62,.4)
}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-gold{
  background:var(--c-gold);
  color:#fff;
  transition:all .35s var(--ease-out);
  border-radius:3px!important;
  font-weight:500
}
.btn-gold:hover{
  background:var(--c-copper);
  transform:translateY(-2px);
  box-shadow:0 10px 28px -6px rgba(201,163,90,.55)
}

/* ── Cards ── */
.product-card,.service-card{
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .35s;
  border-radius:12px!important
}
.modal-box{border-radius:1rem!important}
.product-card:hover,.service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 32px 64px -16px rgba(107,74,62,.2);
  border-color:rgba(184,124,106,.5)!important
}
.insp-card{
  transition:transform .45s var(--ease-out),box-shadow .45s;
  cursor:pointer;overflow:hidden;position:relative;
  border-radius:10px!important
}
.insp-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -12px rgba(28,20,16,.2)}
.insp-card .card-img{transition:transform .7s var(--ease-out)}
.insp-card:hover .card-img{transform:scale(1.06)}
.insp-card .hover-overlay{
  position:absolute;inset:0;
  background:rgba(28,20,16,.54);
  opacity:0;pointer-events:none;
  transition:opacity .4s;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;padding:2rem;z-index:2
}
@media(hover:hover) and (pointer:fine){
  .insp-card:hover .hover-overlay{opacity:1;pointer-events:auto}
}
.insp-card:focus-within{outline:2px solid var(--c-copper);outline-offset:3px}

/* ── Mini bracelet preview ── */
.look-preview{position:relative;width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#FDF0EA 0%,#F4DCD0 70%,#D4A193 100%)}
.look-ring{position:relative;width:60%;max-width:220px;aspect-ratio:1/1}
.look-ring svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.look-charm{position:absolute;width:18%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,2.2vw,1.4rem);background:radial-gradient(circle at 30% 30%,#fff,#F4DCD0 55%,#B87C6A);border:2px solid var(--c-copper);box-shadow:0 4px 10px rgba(184,124,106,.35);transform:translate(-50%,-50%)}

/* ── Charm visual ── */
.charm-visual{
  background:radial-gradient(circle at 32% 30%,#fff 0%,#F4DCD0 35%,#D4A193 65%,#B87C6A);
  box-shadow:0 6px 18px -4px rgba(184,124,106,.38),inset 0 1px 0 rgba(255,255,255,.6)
}
.charm-visual:hover{
  transform:scale(1.12);
  box-shadow:0 10px 28px -6px rgba(184,124,106,.55),inset 0 1px 0 rgba(255,255,255,.6)
}

/* ── Orbit centre "your story" ── */
.orbit-centre{
  animation:breathe 5s ease-in-out infinite
}

/* ── Hero "29" watermark numeral ── */
.hero-numeral{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(14rem,26vw,22rem);
  font-weight:300;
  line-height:1;
  color:rgba(201,163,90,.04);
  -webkit-text-stroke:1px rgba(201,163,90,.22);
  pointer-events:none;user-select:none;
  letter-spacing:-.06em;
  z-index:0;
  animation:shimmerGold 7s ease-in-out infinite
}

/* ── Hero atmospheric glow ── */
.hero-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(70px);
  z-index:0
}
.hero-glow-rose{
  width:420px;height:420px;
  top:50%;left:50%;
  transform:translate(-45%,-52%);
  background:radial-gradient(ellipse at center,rgba(212,161,147,.22) 0%,transparent 68%)
}
.hero-glow-gold{
  width:320px;height:280px;
  top:20%;left:60%;
  background:radial-gradient(ellipse at center,rgba(201,163,90,.12) 0%,transparent 65%)
}

/* ── Hero section background ── */
.hero-section-bg{
  background:
    radial-gradient(ellipse 80% 70% at 65% 45%,rgba(244,220,208,.35) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(201,163,90,.06) 0%,transparent 55%),
    var(--c-ivory)
}

/* ── Dark section ── */
.dark-section{background:var(--c-ink);color:var(--c-ivory)}
.dark-input{
  width:100%;
  background:rgba(250,246,239,.08);
  border:1px solid rgba(250,246,239,.18);
  border-radius:.5rem;
  padding:.8rem 1rem;
  font-size:.875rem;
  color:var(--c-ivory);
  transition:.25s;
  font-family:'DM Sans',sans-serif
}
.dark-input:focus{outline:none;border-color:var(--c-gold);background:rgba(250,246,239,.13)}
.dark-input::placeholder{color:rgba(250,246,239,.45)}
select.dark-input{background:var(--c-ink)}
select.dark-input option{background:var(--c-ink);color:var(--c-ivory)}

/* ── Builder modal ── */
.modal-bg{position:fixed;inset:0;background:rgba(28,20,16,.65);backdrop-filter:blur(8px);z-index:100;display:none}
.modal-bg.open{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px}
.modal-box{background:var(--c-ivory);border-radius:2rem;width:100%;max-width:960px;margin:auto;position:relative}
.input{width:100%;border:1px solid #F4DCD0;background:var(--c-ivory);border-radius:.5rem;padding:.7rem .9rem;font-size:.875rem;color:var(--c-ink)}
.input:focus{outline:none;border-color:var(--c-copper);background:#fff}
.pay-btn{transition:.2s;background:var(--c-ivory);border:1px solid #F4DCD0;border-radius:.75rem;padding:.6rem;font-size:.85rem}
.pay-btn:hover,.pay-btn.selected{border-color:var(--c-copper);background:#F4DCD0}
.cart-badge{animation:pop .4s}
.base-btn,.store-btn,.country-btn,.metal-btn{transition:.25s}
.base-btn:hover,.store-btn:hover,.country-btn:hover,.metal-btn:hover{border-color:var(--c-copper);background:#F4DCD0}
.base-btn.selected,.store-btn.selected,.country-btn.selected,.metal-btn.selected{border-color:var(--c-copper);background:#F4DCD0;box-shadow:0 0 0 2px rgba(184,124,106,.25)}

/* ── Step progress bar ── */
.step-bar-track{height:2px;background:#F4DCD0;border-radius:9px;overflow:hidden}
.step-bar-fill{height:2px;background:linear-gradient(90deg,var(--c-gold),var(--c-copper));border-radius:9px;transition:width .45s var(--ease-out)}

/* ── Charm design step ── */
.charm-design-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;min-height:560px}
.charm-design-layout>*{min-width:0}
@media(max-width:640px){.charm-design-layout{grid-template-columns:1fr;min-height:auto;gap:1.25rem}}
.charm-picker-panel{overflow-y:auto;max-height:400px;padding-right:4px}
@media(max-width:640px){.charm-picker-panel{max-height:none;overflow:visible}}
.charm-design-layout.bracelet-top{grid-template-columns:1fr;min-height:auto;gap:1rem}
.charm-design-layout.bracelet-top>div:first-child{order:2}
.charm-design-layout.bracelet-top .bracelet-panel{order:1;flex-direction:column;align-items:stretch;gap:.75rem;padding:1rem}
.charm-design-layout.bracelet-top .bracelet-ring-wrap{width:100%;max-width:100%;height:300px}
.charm-design-layout.bracelet-top .charm-picker-panel{max-height:260px;overflow-y:auto}
@media(max-width:640px){.charm-design-layout.bracelet-top .bracelet-ring-wrap{height:220px}
.charm-design-layout.bracelet-top .charm-picker-panel{max-height:260px}}
.charm-card{border:1.5px solid #F4DCD0;background:#fff;border-radius:.75rem;padding:.38rem .3rem;text-align:center;cursor:grab;transition:border-color .2s,background .2s,transform .15s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:none}
.charm-card:active{cursor:grabbing}
.charm-card:hover{border-color:#B87C6A;background:#FDF0EA;transform:translateY(-2px)}
.charm-card.in-cart{border-color:#B87C6A;background:#F4DCD0}
.charm-card.unavailable{opacity:.38;pointer-events:none}
.charm-card:not(.unavailable){cursor:grab}
.charm-card:not(.unavailable):active{cursor:grabbing}
.charm-card.dragging{opacity:.4;transform:scale(.95)}

/* ── Bracelet canvas (right panel) ── */
.bracelet-panel{background:#FBF6F0;border:1.5px solid #F4DCD0;border-radius:1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.25rem 1rem;gap:1rem}
.bracelet-ring-wrap{position:relative;width:400px;height:400px;flex-shrink:0;max-width:100%;aspect-ratio:1/1;background:rgba(251,246,240,.7);border-radius:1.25rem;border:1.5px solid rgba(244,220,208,.8);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overflow:hidden}
.zoom-ctrl-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(201,163,90,.45);background:rgba(253,240,236,.85);color:#8B7355;font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:.18s;flex-shrink:0}
.zoom-ctrl-btn:hover{background:#C9A35A;color:#fff;border-color:#C9A35A}
.zoom-ctrl-btn:disabled{opacity:.28;cursor:default;pointer-events:none}
@media(max-width:900px){.bracelet-ring-wrap{width:100%;height:auto}}
@media(max-width:640px){.bracelet-ring-wrap{width:min(88vw,340px);height:auto}}
.bracelet-slot{position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;transition:box-shadow .2s,transform .15s,border-color .2s,background .2s;cursor:pointer;touch-action:none}
.bracelet-slot.filled{cursor:grab;background:radial-gradient(circle at 30% 30%,#F4DCD0,#D4A193 60%,#B87C6A);border:2px solid #B87C6A;box-shadow:0 2px 8px rgba(184,124,106,.35)}
.bracelet-slot.filled:active{cursor:grabbing}
.bracelet-slot.filled:hover{transform:scale(1.12);box-shadow:0 4px 14px rgba(184,124,106,.45)}
.bracelet-slot.empty{background:rgba(255,255,255,.85);border:2px dashed #D4A193;color:#D4A193;font-size:1.1rem;font-weight:300}
.bracelet-slot.empty::before{content:"+";opacity:.55;transition:opacity .2s,transform .2s}
.bracelet-slot.empty:hover::before{opacity:1;transform:scale(1.15)}
.bracelet-slot.empty.drag-over{background:#F4DCD0;border-color:#B87C6A;transform:scale(1.15);box-shadow:0 0 0 3px rgba(201,163,90,.35)}
.bracelet-slot.empty.drag-over::before{opacity:0}
.bracelet-slot.filled.drag-over{box-shadow:0 0 0 3px #C9A35A,0 4px 14px rgba(184,124,106,.45);transform:scale(1.15)}
.bracelet-slot.dragging{opacity:.35;transform:scale(.9)!important}
.bracelet-slot:focus-visible{outline:2px solid #B87C6A;outline-offset:3px}
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,124,106,.4)}50%{box-shadow:0 0 0 8px rgba(184,124,106,0)}}
.bracelet-slot.empty.pulse{animation:slotPulse 1.6s ease-in-out 2}

/* ── Categories strip scroll gradient ── */
.strip-wrap{position:relative}
.strip-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(to left,#2A1F1A,transparent);pointer-events:none}

/* ── Global focus outline ── */
:focus-visible{outline:2px solid #C9A35A;outline-offset:2px;border-radius:3px}

/* ── Freeform charm token ── */
.charm-token{position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;cursor:grab;transform:translate(-50%,-50%);background:transparent;border:none;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;transition:left .22s ease,top .22s ease,opacity .18s ease,scale .32s cubic-bezier(.34,1.56,.64,1),transform .15s,rotate .2s;z-index:10}
.charm-token:hover{transform:translate(-50%,-50%) scale(1.08)}
.charm-token.selected{outline:2.5px solid #C9A35A;outline-offset:3px;z-index:15}
.charm-token:active,.charm-token.dragging{cursor:grabbing;opacity:0;transition:none!important}
@keyframes charm-land{0%{scale:1.28}55%{scale:.93}100%{scale:1}}
.charm-token.landing{animation:charm-land .38s cubic-bezier(.34,1.56,.64,1) forwards}
.bracelet-ring-wrap.drop-active{box-shadow:0 0 0 2.5px rgba(201,163,90,.7),0 0 0 5px rgba(201,163,90,.15)}
.bracelet-ring-wrap .drop-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(184,124,106,.5);pointer-events:none;border:2px dashed rgba(212,161,147,.55);border-radius:1.25rem}

/* ── Charm selection toolbar ── */
.charm-toolbar{position:absolute;display:flex;align-items:center;gap:3px;background:rgba(30,22,18,.88);border-radius:999px;padding:4px 7px;transform:translate(-50%,-100%);z-index:25;pointer-events:all;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.charm-toolbar::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(30,22,18,.88);border-bottom:0}
.charm-toolbar button{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s;flex-shrink:0}
.charm-toolbar button:hover{background:rgba(255,255,255,.18)}
.charm-toolbar .ct-sep{width:1px;height:16px;background:rgba(255,255,255,.2);flex-shrink:0;margin:0 2px}
.charm-toolbar .ct-del{color:#ff8a8a}

/* ── Style variant card ── */
.style-card{position:relative;transition:.25s;cursor:pointer}
.style-card:hover{border-color:#B87C6A !important;background:#F4DCD0 !important}
.style-card.selected{border-color:#B87C6A !important;background:#F4DCD0 !important;box-shadow:0 0 0 2px rgba(184,124,106,.25)}
.style-card-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:#C9A35A;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s;pointer-events:none}
.style-card.selected .style-card-check{opacity:1;transform:scale(1)}
.style-card-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.8}
.style-pill{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;padding:1px 6px;border-radius:99px}
.style-pill.gold{background:#FEF9C3;color:#92400E}
.style-pill.silver{background:#F1F5F9;color:#475569}
.metal-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;vertical-align:middle;flex-shrink:0}
.metal-dot.gold{background:#C9A35A}
.metal-dot.silver{background:#B0B8C1}
.style-selected-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#FBF6F0,#FDF0E8);border:1.5px solid #E8D5C4;border-radius:1rem;padding:.75rem 1rem;margin-bottom:1.25rem}
.style-selected-bar.hidden{display:none !important}
.style-selected-bar .ssb-no-img{width:44px;height:44px;border-radius:.5rem;background:#F4DCD0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}

/* ── Design link toast ── */
#design-toast{position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%) translateY(12px);background:#2A1F1A;color:#F4DCD0;font-size:.73rem;letter-spacing:.08em;padding:.55rem 1.1rem;border-radius:99px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;z-index:10100}
#design-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Canvas empty-state hint ── */
@keyframes emptyHintPulse{0%,100%{opacity:.65;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-3px)}}
.canvas-empty-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:rgba(251,246,240,.92);border:1px solid rgba(244,220,208,.95);border-radius:99px;padding:5px 13px;font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(107,74,62,.85);white-space:nowrap;pointer-events:none;z-index:5;animation:emptyHintPulse 2.4s ease-in-out infinite;box-shadow:0 2px 10px rgba(184,124,106,.12)}

/* ── Charm category tabs ── */
.charm-cat-tabs{display:flex;gap:5px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;scrollbar-width:none}
.charm-cat-tabs::-webkit-scrollbar{display:none}
.charm-cat-tab{flex-shrink:0;border:1.5px solid #F4DCD0;background:#fff;border-radius:99px;padding:3px 10px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#8B7355;cursor:pointer;transition:border-color .18s,background .18s,color .18s;white-space:nowrap;line-height:1.6}
.charm-cat-tab:hover{border-color:#B87C6A;background:#FDF0EA;color:#6B4A3E}
.charm-cat-tab.active{border-color:#B87C6A;background:#F4DCD0;color:#6B4A3E;font-weight:600}
.charm-search-wrap{margin-bottom:8px}
.charm-search-input{width:100%;border:1.5px solid #F4DCD0;border-radius:99px;padding:5px 12px 5px 30px;font-size:.7rem;color:#5A3E2B;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23B87C6A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;outline:none;transition:border-color .18s}
.charm-search-input::placeholder{color:#C4A882;letter-spacing:.04em}
.charm-search-input:focus{border-color:#B87C6A}
.charm-search-input::-webkit-search-cancel-button{cursor:pointer}

/* ── 3-column charm grid in bracelet-top layout (desktop) ── */
.charm-design-layout.bracelet-top .charm-picker-panel #charm-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.charm-design-layout.bracelet-top .charm-picker-panel #charm-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Zoom buttons: bump to 36px to improve touch target ── */
.zoom-ctrl-btn{width:36px;height:36px}

/* ── Mobile: show bracelet canvas above charm picker ── */
@media(max-width:640px){
  .charm-design-layout>div:first-child{order:2}
  .charm-design-layout .bracelet-panel{order:1}
  .charm-design-layout .bracelet-ring-wrap{height:260px}
  .charm-design-layout .charm-picker-panel{max-height:none;overflow:visible}
}

/* ══════════════════════════════════════════════
   MOBILE IMPROVEMENTS
══════════════════════════════════════════════ */

@media(max-width:640px){
  .modal-bg.open{padding:0;align-items:flex-start;overflow-y:auto}
  .modal-box{border-radius:0!important;min-height:100dvh;min-height:100vh;margin:0!important;width:100%!important}
  #modal-box{padding:1rem!important}
}

@media(max-width:640px){
  #cookie-banner{flex-direction:row!important;padding:.6rem 1rem!important;gap:.6rem;align-items:center}
  #cookie-banner p{font-size:.68rem;line-height:1.3}
  #cookie-banner .bg-gold{padding:.3rem .85rem!important;font-size:.66rem!important}
}

@media(max-width:640px){
  .bracelet-ring-wrap{
    aspect-ratio:auto!important;
    height:200px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
  }
}

.strip-wrap::after{background:linear-gradient(to left,#FBF6F0,transparent)}

@media(max-width:640px){
  section.relative.h-\[calc\(100vh-72px\)\]{min-height:auto;height:auto;padding-top:2rem;padding-bottom:3rem}
}

@media(max-width:640px){
  .b-back{padding:.5rem .25rem;font-size:.8rem}
  #modal-box .btn-primary,#modal-box .btn-outline{min-height:44px}
  .base-btn,.store-btn,.country-btn{padding:.75rem .5rem!important}
  .bracelet-panel{padding:.75rem .75rem!important;gap:.5rem!important}
}

@media(max-width:640px){
  #featured-looks .insp-card .p-6{padding:.5rem .4rem!important}
  #featured-looks .insp-card .serif.text-xl{font-size:.78rem!important;line-height:1.2}
  #featured-looks .insp-card .text-xs{display:none}
  #featured-looks .insp-card .w-9{display:none}
  #featured-looks .insp-card .rounded-3xl{border-radius:.75rem}
}

@media(max-width:320px){
  #base-grid{grid-template-columns:1fr!important}
}

/* ── Eyebrow label style (section overline) ── */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.6rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:500
}
.eyebrow::before,.eyebrow::after{
  content:'';display:block;
  height:1px;
  background:currentColor;
  opacity:.38;
  flex-shrink:0
}
.eyebrow::before{width:20px}
.eyebrow::after{display:none}
/* centered eyebrows get matching rule on both sides */
.eyebrow.justify-center::before{flex:1;max-width:32px}
.eyebrow.justify-center::after{display:block;flex:1;max-width:32px}

/* ── Trust badges (hero) ── */
.trust-badge{
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(107,74,62,.5);
  font-weight:500;
  white-space:nowrap
}
.trust-badge .charm-dot{
  color:rgba(201,163,90,.65);
  margin-right:.1em;
  font-size:.55rem
}

/* ── Brand collab strip ── */
.brand-collab-tag{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(107,74,62,.4);
  font-weight:500;
  white-space:nowrap;
  padding:.2rem 0;
  transition:color .25s
}
.brand-collab-tag:hover{color:rgba(107,74,62,.75)}

/* ── Testimonials ── */
.testimonial-card{
  background:linear-gradient(145deg,#fff 0%,#FDF8F4 100%);
  border:1px solid rgba(244,220,208,.9);
  border-radius:1.5rem;
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  overflow:hidden;
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out),border-color .35s
}
.testimonial-card::before{
  content:'\201C';
  position:absolute;top:-.5rem;right:1.25rem;
  font-family:'Cormorant Garamond',serif;
  font-size:7rem;
  font-weight:300;
  line-height:1;
  color:rgba(201,163,90,.09);
  pointer-events:none;
  user-select:none
}
.testimonial-card:hover{
  box-shadow:0 24px 56px -14px rgba(107,74,62,.18);
  transform:translateY(-5px);
  border-color:rgba(184,124,106,.35)
}
.testimonial-stars{
  font-size:.55rem;
  letter-spacing:.32em;
  color:var(--c-gold);
  line-height:1
}
.testimonial-quote{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(28,20,16,.78);
  font-style:italic;
  flex:1
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding-top:.875rem;
  border-top:1px solid rgba(244,220,208,.8)
}
.testimonial-avatar{
  width:2.25rem;height:2.25rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--c-blush),var(--c-rose));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;
  color:var(--c-earth);
  font-weight:600;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(184,124,106,.25)
}
.testimonial-name{
  font-size:.73rem;
  font-weight:600;
  color:var(--c-ink);
  letter-spacing:.05em
}
.testimonial-detail{
  font-size:.62rem;
  color:rgba(107,74,62,.55);
  letter-spacing:.07em;
  margin-top:.18rem
}

@media (max-height:820px){
  .hero-scroll-hint{display:none!important}
}

/* ════════════════════════════════════════════════════════
   HERO ENTRANCE & INTERACTIVE ANIMATIONS
════════════════════════════════════════════════════════ */

/* Staggered headline lines */
@keyframes heroLineIn{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
.hero-line{display:block;animation:heroLineIn .9s var(--ease-out) both}
.hero-line-1{animation-delay:.04s}
.hero-line-2{animation-delay:.22s}
.hero-line-3{animation-delay:.42s}

/* "Own It." rose pulse glow */
@keyframes ownItGlow{0%,100%{opacity:1}50%{opacity:.84;text-shadow:0 0 32px rgba(212,161,147,.55)}}
.hero-own-it{animation:ownItGlow 3.8s ease-in-out 1.6s infinite}

/* Hero content stagger */
.hero-sub-anim  {animation:fadeUp .95s var(--ease-out) .58s both}
.hero-cta-anim  {animation:fadeUp .9s  var(--ease-out) .76s both}
.hero-badge-anim{animation:fadeUp .75s var(--ease-out) .92s both}
.hero-stat-anim {animation:fadeUp .75s var(--ease-out) 1.05s both}

/* Sparkle particles */
@keyframes sparklePop{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  28% {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(40deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,-22px))) scale(.18) rotate(110deg)}
}
.sparkle-pt{
  position:absolute;width:8px;height:8px;pointer-events:none;z-index:2;
  animation:sparklePop var(--dur,1.4s) ease-out forwards
}
.sparkle-pt::before,.sparkle-pt::after{
  content:'';position:absolute;background:var(--c-gold);border-radius:1px
}
.sparkle-pt::before{width:100%;height:2px;top:3px;left:0}
.sparkle-pt::after {width:2px;height:100%;top:0;left:3px}

/* Brand marquee */
@keyframes marqueeRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-marquee-outer{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
  mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)
}
.brand-marquee-track{
  display:flex;align-items:center;gap:3rem;
  width:max-content;
  animation:marqueeRoll 24s linear infinite
}
.brand-marquee-track:hover{animation-play-state:paused}
.brand-marquee-sep{
  color:rgba(201,163,90,.4);font-size:.5rem;flex-shrink:0
}

/* Gold CTA shimmer */
@keyframes goldShine{from{background-position:-200% center}to{background-position:200% center}}
.btn-gold-anim{
  background-image:linear-gradient(90deg,#C9A35A 0%,#F0D07E 50%,#C9A35A 100%);
  background-size:200% auto;
  animation:goldShine 4s linear infinite;
  color:#fff
}

/* Orbit SVG ring slow counter-spin */
.hero-orbit-svg{
  animation:heroOrbitRotate 90s linear infinite reverse;
  transform-origin:220px 220px
}

/* Glow blob drift */
@keyframes glowDriftRose{
  0%,100%{transform:translate(-45%,-52%) scale(1)}
  40%    {transform:translate(-38%,-57%) scale(1.1)}
  70%    {transform:translate(-52%,-47%) scale(.92)}
}
@keyframes glowDriftGold{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(8%,-15%) scale(1.14)}
}
.hero-glow-rose{animation:glowDriftRose 14s ease-in-out infinite}
.hero-glow-gold{animation:glowDriftGold 18s ease-in-out 2.5s infinite}

/* Reduced motion — kill all hero extras */
@media(prefers-reduced-motion:reduce){
  .hero-line,.hero-sub-anim,.hero-cta-anim,.hero-badge-anim,.hero-stat-anim,
  .hero-own-it,.brand-marquee-track,.sparkle-pt,.btn-gold-anim,
  .hero-glow-rose,.hero-glow-gold,.hero-orbit-svg{animation:none!important}
  .hero-line{opacity:1;transform:none}
}