/* Chloe Nail Spa — Colour Library v56
   Clean premium shade library. No photo masks, so colour never bleeds onto skin/image. */
:root{
  --cl56-bg:#fbf7f1;
  --cl56-cream:#fffdf9;
  --cl56-panel:#fffaf4;
  --cl56-soft:#f1e4d7;
  --cl56-line:rgba(66,48,39,.14);
  --cl56-ink:#30241f;
  --cl56-muted:#806f65;
  --cl56-accent:#7e5f4f;
  --cl56-dark:#342722;
  --cl56-shadow:0 26px 70px rgba(66,48,39,.10);
}
html,body{overflow-x:hidden;background:var(--cl56-bg);}
.cl56-page{background:
  radial-gradient(circle at 8% 4%, rgba(218,187,165,.30), transparent 28rem),
  linear-gradient(180deg,#fbf4ed 0%,#fffaf4 42%,#fbf7f1 100%);
  color:var(--cl56-ink);
}
.cl56-hero{max-width:1120px;margin:0 auto;padding:clamp(6.4rem,10vw,9rem) 1.4rem 1.4rem;text-align:center;}
.cl56-eyebrow{display:block;margin-bottom:1rem;font-family:'Montserrat',sans-serif;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cl56-muted);}
.cl56-hero h1{margin:0 auto;font-family:'Bodoni Moda','Cormorant Garamond',serif;font-size:clamp(2.7rem,7.5vw,6.8rem);font-weight:400;line-height:.95;letter-spacing:.015em;max-width:860px;color:var(--cl56-ink);}
.cl56-hero h1 em{font-style:italic;color:#8f6958;}
.cl56-hero p{max-width:560px;margin:1.25rem auto 0;font-family:'Jost',sans-serif;font-size:clamp(1rem,2vw,1.18rem);line-height:1.75;color:var(--cl56-muted);}
.cl56-shell{max-width:1220px;margin:0 auto;padding:1rem 1.25rem 5.5rem;display:grid;grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr);gap:1.2rem;align-items:start;}
.cl56-preview,.cl56-palette{border:1px solid var(--cl56-line);background:rgba(255,253,249,.76);backdrop-filter:blur(18px);box-shadow:var(--cl56-shadow);border-radius:34px;overflow:hidden;}
.cl56-preview{position:sticky;top:92px;}
.cl56-preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.45rem 1.45rem 0;}
.cl56-kicker{font-family:'Montserrat',sans-serif;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cl56-muted);}
.cl56-preview-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);line-height:1;margin:.35rem 0 .25rem;font-weight:400;}
.cl56-preview-head p{margin:0;color:var(--cl56-muted);font-family:'Jost',sans-serif;font-size:.95rem;line-height:1.6;max-width:340px;}
.cl56-finish-badge{flex:0 0 auto;border:1px solid rgba(66,48,39,.16);border-radius:999px;padding:.62rem .9rem;background:rgba(255,255,255,.5);font-family:'Montserrat',sans-serif;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cl56-accent);}
.cl56-manicure-stage{margin:1.2rem 1.05rem 0;border-radius:30px;background:
  radial-gradient(circle at 50% 4%,rgba(255,255,255,.85),transparent 18rem),
  linear-gradient(145deg,#f5eadf,#fff9f3 52%,#eadbcd);
  min-height:360px;display:flex;align-items:center;justify-content:center;padding:2.2rem 1.2rem 2rem;position:relative;overflow:hidden;border:1px solid rgba(66,48,39,.08);
}
.cl56-manicure-stage:before{content:"";position:absolute;inset:10%;border:1px solid rgba(126,95,79,.08);border-radius:999px;transform:rotate(-9deg);}
.cl56-manicure-stage:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.38);filter:blur(1px);top:18%;left:50%;transform:translateX(-50%);}
.cl56-nail-set{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.58rem,1.7vw,1.05rem);width:100%;max-width:430px;}
.cl56-nail-wrap{border:0;background:transparent;padding:.15rem;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:.65rem;outline:none;}
.cl56-nail-wrap:focus-visible .cl56-nail{box-shadow:0 0 0 4px rgba(126,95,79,.18),0 18px 36px rgba(80,55,45,.14);}
.cl56-nail-wrap.is-selected .cl56-nail{box-shadow:0 0 0 2px rgba(48,36,31,.62),0 20px 42px rgba(80,55,45,.16);}
.cl56-nail{--nail-colour:#e7c4c7;width:clamp(52px,6vw,74px);height:clamp(138px,18vw,198px);background:var(--nail-colour);border-radius:50% 50% 44% 44% / 30% 30% 58% 58%;position:relative;box-shadow:inset 0 -20px 32px rgba(72,42,34,.10),inset 0 12px 24px rgba(255,255,255,.34),0 22px 46px rgba(80,55,45,.12);transition:background .22s ease, transform .22s ease, border-radius .22s ease, clip-path .22s ease, box-shadow .22s ease;overflow:hidden;}
.cl56-nail-wrap:hover .cl56-nail{transform:translateY(-4px);}
.cl56-nail:before{content:"";position:absolute;left:14%;top:8%;width:24%;height:44%;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.12));border-radius:999px;filter:blur(.2px);transform:rotate(12deg);}
.cl56-nail:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.34),transparent 32%,rgba(255,255,255,.12) 54%,transparent 70%);opacity:.85;}
.cl56-nail-wrap:nth-child(1),.cl56-nail-wrap:nth-child(5){transform:translateY(18px) rotate(-5deg);}
.cl56-nail-wrap:nth-child(2),.cl56-nail-wrap:nth-child(4){transform:translateY(6px) rotate(-2deg);}
.cl56-nail-wrap:nth-child(3){transform:translateY(0);}
.cl56-nail-label{font-family:'Montserrat',sans-serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(48,36,31,.52);}
.cl56-stage[data-shape="square"] .cl56-nail{border-radius:36px 36px 22px 22px / 22px 22px 22px 22px;}
.cl56-stage[data-shape="coffin"] .cl56-nail{clip-path:polygon(20% 0,80% 0,100% 38%,86% 100%,14% 100%,0 38%);border-radius:24px;}
.cl56-stage[data-shape="oval"] .cl56-nail{border-radius:50% 50% 46% 46% / 34% 34% 60% 60%;}
.cl56-stage[data-finish="matte"] .cl56-nail:after,.cl56-stage[data-finish="matte"] .cl56-nail:before{opacity:.22;}
.cl56-stage[data-finish="matte"] .cl56-nail{box-shadow:inset 0 -14px 26px rgba(72,42,34,.09),0 16px 34px rgba(80,55,45,.09);}
.cl56-stage[data-finish="jelly"] .cl56-nail{opacity:.78;box-shadow:inset 0 -24px 36px rgba(255,255,255,.22),inset 0 12px 28px rgba(255,255,255,.48),0 18px 38px rgba(80,55,45,.11);}
.cl56-stage[data-finish="chrome"] .cl56-nail:after{opacity:1;background:linear-gradient(110deg,rgba(255,255,255,.9),rgba(255,255,255,.08) 24%,rgba(255,255,255,.78) 39%,rgba(255,255,255,.08) 56%,rgba(255,255,255,.65) 74%,transparent);}
.cl56-selected-card{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;margin:1.1rem 1.45rem 0;padding:1rem;border:1px solid rgba(66,48,39,.11);border-radius:24px;background:rgba(255,255,255,.46);}
.cl56-selected-dot{width:54px;height:54px;border-radius:50%;background:#e7c4c7;box-shadow:inset 0 12px 20px rgba(255,255,255,.45),0 12px 28px rgba(80,55,45,.12);border:1px solid rgba(66,48,39,.10);}
.cl56-selected-card small{font-family:'Montserrat',sans-serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cl56-muted);}
.cl56-selected-card h3{margin:.15rem 0 0;font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:400;line-height:1;}
.cl56-selected-card p{margin:.28rem 0 0;font-family:'Jost',sans-serif;color:var(--cl56-muted);font-size:.92rem;line-height:1.45;}
.cl56-mode-bar,.cl56-shape-bar{display:flex;gap:.55rem;padding:1.05rem 1.45rem 0;flex-wrap:wrap;}
.cl56-shape-bar{padding-top:.65rem;padding-bottom:1.25rem;}
.cl56-mode-bar button,.cl56-shape-bar button,.cl56-filter-bar button,.cl56-finish-bar button{appearance:none;border:1px solid rgba(66,48,39,.14);background:rgba(255,255,255,.48);color:var(--cl56-ink);border-radius:999px;padding:.8rem 1rem;font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;}
.cl56-mode-bar button:hover,.cl56-shape-bar button:hover,.cl56-filter-bar button:hover,.cl56-finish-bar button:hover{transform:translateY(-1px);border-color:rgba(66,48,39,.28);}
.cl56-mode-bar button.active,.cl56-shape-bar button.active,.cl56-filter-bar button.active,.cl56-finish-bar button.active{background:var(--cl56-dark);color:#fff;border-color:var(--cl56-dark);}
.cl56-palette{padding:1.45rem;}
.cl56-palette-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;border-bottom:1px solid var(--cl56-line);padding-bottom:1.1rem;}
.cl56-palette-top h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:0;}
.cl56-palette-top p{margin:.55rem 0 0;color:var(--cl56-muted);font-family:'Jost',sans-serif;line-height:1.55;max-width:450px;}
.cl56-count{font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--cl56-muted);border:1px solid rgba(66,48,39,.12);border-radius:999px;padding:.64rem .85rem;white-space:nowrap;}
.cl56-filter-bar,.cl56-finish-bar{display:flex;gap:.55rem;overflow-x:auto;padding:1rem 0 .1rem;scrollbar-width:none;}
.cl56-filter-bar::-webkit-scrollbar,.cl56-finish-bar::-webkit-scrollbar{display:none;}
.cl56-panel-label{align-self:center;font-family:'Montserrat',sans-serif;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cl56-muted);margin-right:.2rem;white-space:nowrap;}
.cl56-swatch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem;max-height:590px;overflow:auto;padding-right:.25rem;}
.cl56-swatch{appearance:none;border:1px solid rgba(66,48,39,.11);background:rgba(255,255,255,.55);border-radius:22px;padding:.88rem .78rem;text-align:left;cursor:pointer;min-height:112px;display:flex;flex-direction:column;gap:.55rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;}
.cl56-swatch:hover,.cl56-swatch:focus-visible{transform:translateY(-2px);box-shadow:0 16px 36px rgba(66,48,39,.10);border-color:rgba(66,48,39,.24);outline:none;}
.cl56-swatch.active{background:#fff;border-color:rgba(48,36,31,.55);box-shadow:0 18px 38px rgba(66,48,39,.12);}
.cl56-swatch-dot{width:48px;height:48px;border-radius:18px;background:#e7c4c7;box-shadow:inset 0 11px 18px rgba(255,255,255,.42),0 10px 22px rgba(80,55,45,.10);border:1px solid rgba(66,48,39,.09);}
.cl56-swatch strong{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;line-height:1.05;color:var(--cl56-ink);}
.cl56-swatch small{font-family:'Montserrat',sans-serif;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cl56-muted);}
.cl56-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--cl56-line);}
.cl56-actions .btn-primary{background:var(--cl56-dark);color:#fff;border-radius:999px;padding:1rem 1.25rem;font-size:.68rem;letter-spacing:.18em;white-space:nowrap;}
.cl56-hint{margin:0;color:var(--cl56-muted);font-family:'Jost',sans-serif;font-size:.92rem;line-height:1.45;text-align:right;}
.cl56-note{max-width:920px;margin:-2.6rem auto 5rem;padding:0 1.25rem;text-align:center;color:var(--cl56-muted);font-family:'Jost',sans-serif;line-height:1.7;}
.cl56-note strong{font-family:'Montserrat',sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cl56-ink);display:block;margin-bottom:.35rem;}
@media (max-width:1050px){
  .cl56-shell{grid-template-columns:1fr;max-width:760px;}
  .cl56-preview{position:relative;top:auto;}
  .cl56-swatch-grid{max-height:none;}
}
@media (max-width:720px){
  .cl56-hero{padding:5.6rem 1.05rem 1rem;text-align:left;}
  .cl56-hero h1{font-size:clamp(2.8rem,16vw,4.4rem);}
  .cl56-hero p{margin-left:0;}
  .cl56-shell{padding:.5rem .8rem 4rem;gap:.9rem;}
  .cl56-preview,.cl56-palette{border-radius:26px;}
  .cl56-preview-head{padding:1.1rem 1.05rem 0;display:block;}
  .cl56-finish-badge{display:inline-flex;margin-top:.8rem;}
  .cl56-manicure-stage{min-height:270px;margin:.9rem .72rem 0;padding:1.7rem .55rem;}
  .cl56-nail-set{gap:.38rem;}
  .cl56-nail{width:43px;height:118px;}
  .cl56-nail-label{display:none;}
  .cl56-selected-card{margin:.82rem .88rem 0;padding:.82rem;border-radius:20px;}
  .cl56-selected-dot{width:44px;height:44px;}
  .cl56-selected-card h3{font-size:1.55rem;}
  .cl56-mode-bar,.cl56-shape-bar{padding-left:.88rem;padding-right:.88rem;gap:.44rem;}
  .cl56-mode-bar button,.cl56-shape-bar button,.cl56-filter-bar button,.cl56-finish-bar button{padding:.74rem .82rem;font-size:.57rem;letter-spacing:.14em;}
  .cl56-palette{padding:1rem .9rem;}
  .cl56-palette-top{display:block;}
  .cl56-count{display:inline-flex;margin-top:.8rem;}
  .cl56-filter-bar,.cl56-finish-bar{margin-left:-.15rem;margin-right:-.15rem;padding-bottom:.25rem;}
  .cl56-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;max-height:460px;overflow:auto;padding-right:.1rem;}
  .cl56-swatch{min-height:96px;border-radius:18px;padding:.72rem .62rem;gap:.45rem;}
  .cl56-swatch-dot{width:38px;height:38px;border-radius:14px;}
  .cl56-swatch strong{font-size:1.08rem;}
  .cl56-actions{display:block;}
  .cl56-actions .btn-primary{display:flex;justify-content:center;width:100%;}
  .cl56-hint{text-align:left;margin-top:.8rem;}
  .cl56-note{margin:-2.4rem auto 4rem;text-align:left;}
}