/* ==========================================================================
   NAIL DESIGN STUDIO — mobile first. Uses the site's tokens (colours, fonts,
   motion) from styles.css; only studio-specific values are defined here.
   ========================================================================== */
.studio{--studio-line:rgba(230,191,176,.24);--studio-soft:#d0b8b0;--studio-dim:#b89a92;--studio-tile:#ead8cb;--studio-focus:3px solid #ecc3ba;--studio-header:63px;
  background:var(--burgundy-dark);color:#f8eae3}
.studio .vh,.studio legend.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.studio button:focus-visible,.studio input:focus-visible+*{outline:var(--studio-focus);outline-offset:3px}

.studio__heading{margin-bottom:34px}
.studio h2{font:400 clamp(44px,11.5vw,70px)/1.16 var(--font-display);letter-spacing:-.055em;margin:20px 0 0}
.studio h2 em{font-weight:400;color:#dfb8ac}
.studio__heading p{font-size:15px;line-height:1.8;color:#d2bbb3;max-width:420px;margin:22px 0 0}

/* --- Preview ------------------------------------------------------------- */
.studio__preview{background:var(--burgundy-dark);z-index:5}
.studio-stage{--stage:#cdb4af;position:relative;overflow:hidden;isolation:isolate;height:min(65.6vw,42svh);min-height:190px;background:var(--stage);transition:background-color var(--dur-slow) var(--ease-out)}
.studio-stage__svg{display:block;width:100%;height:100%}
.studio-layer{transition:opacity var(--dur-base) var(--ease-out)}
.studio-layer.is-entering,.studio-layer.is-leaving{opacity:0}
.studio-stage__corner{position:absolute;color:#603d3e;font-size:9px;font-weight:700;letter-spacing:.17em;pointer-events:none}
.studio-stage__corner--top{top:14px;left:16px}
.studio-stage__corner--bottom{right:16px;bottom:13px}
.studio-stage__asterisk{position:absolute;left:15px;bottom:9px;color:#905c55;font-size:26px;pointer-events:none}
.studio__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 0 16px;border-bottom:1px solid var(--studio-line)}
.studio__summary{margin:0;min-width:0;font-size:12px;line-height:1.35;color:var(--studio-soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.studio__reset{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 10px;border:0;background:transparent;color:#f1d9d0;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:color var(--dur-fast)}
.studio__reset svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-base) var(--ease-soft)}
.studio__reset:hover{color:#fff}.studio__reset:hover svg{transform:rotate(-40deg)}.studio__reset:active svg{transform:rotate(-180deg)}
@media(min-height:600px){.studio__preview{position:sticky;top:var(--studio-header)}}

/* --- Picker -------------------------------------------------------------- */
.studio__picker-top,.studio__picker-bottom{display:none}
.studio__picker-body{padding:18px 16px 0}
@media(max-width:760px){.studio__eyebrow,.studio__description{display:none}.studio .studio__name{font-size:30px;margin:0}.studio__tabs-wrap{margin-top:10px}}
.studio__eyebrow{font-size:11px;letter-spacing:.18em;color:#d2a89e}
.studio__name{font:italic 400 clamp(34px,10vw,44px)/1.12 var(--font-display);letter-spacing:-.045em;margin:10px 0 8px}
.studio__description{margin:0;max-width:420px;font-size:14px;line-height:1.7;color:var(--studio-soft);min-height:48px}

.studio__tabs-wrap{margin:22px -16px 0;border-bottom:1px solid var(--studio-line);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.studio__tabs{display:flex;overflow-x:auto;padding:4px 40px 0 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.studio__tabs::-webkit-scrollbar{display:none}
.studio-tab{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 11px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--studio-dim);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-base)}
.studio-tab__index{font-size:9px;letter-spacing:.08em;opacity:.7}
.studio-tab:hover{color:#f1d9d0}
.studio-tab[aria-selected=true]{color:#fff5ef;border-bottom-color:#e6b9ad}
.studio .studio-tab:focus-visible{outline-offset:-4px}

.studio__panels{min-height:230px;padding-top:20px}
.studio-panel:not([hidden]){animation:studio-panel var(--dur-base) var(--ease-out)}
@keyframes studio-panel{from{opacity:0;transform:translateY(6px)}}
.studio-group{border:0;margin:0;padding:0;min-width:0}
.studio-group legend{padding:0;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d2a89e}
.studio-hint,.studio-selected{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--studio-dim);max-width:460px}
.studio-hint:empty{display:none}
.studio-selected{margin:0 0 16px;font-size:13px;color:var(--studio-soft)}.studio-selected strong{color:#fff5ef;font-weight:700}

/* Options with a rendered thumbnail */
.studio-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.studio-options--length{grid-template-columns:repeat(3,minmax(0,1fr))}
.studio-opt{position:relative;display:block;cursor:pointer}
/* Keyboard focus must never land underneath the sticky header + preview. */
.studio-opt,.studio-tab,.studio-preset{scroll-margin-top:calc(var(--studio-header) + min(65.6vw,42svh) + 70px)}
.studio-opt input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:inherit}
.studio-opt__body{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;padding:6px 6px 9px;border:1px solid var(--studio-line);transition:border-color var(--dur-base),background-color var(--dur-base),transform var(--dur-base) var(--ease-soft)}
.studio-opt__thumb{display:grid;place-items:end center;width:100%;height:78px;padding:7px 0 6px;background:var(--studio-tile)}
.studio-opt__thumb svg{display:block;height:65px;width:auto;max-width:100%;overflow:visible;filter:drop-shadow(2px 3px 3px rgba(60,25,30,.22))}
.studio-opt__label{font-size:11.5px;line-height:1.25;letter-spacing:.02em;text-align:center;color:var(--studio-soft);transition:color var(--dur-fast)}
.studio-opt:hover .studio-opt__body{border-color:rgba(230,191,176,.55)}
.studio-opt:active .studio-opt__body{transform:scale(var(--press-scale))}
.studio-opt input:checked+.studio-opt__body{border-color:#e6b9ad;background:rgba(230,191,176,.1);box-shadow:inset 0 0 0 1px #e6b9ad}
.studio-opt input:checked+.studio-opt__body .studio-opt__label{color:#fff5ef;font-weight:700}
/* Selected state never relies on colour alone: a check badge marks the active option. */
.studio-opt__body::after,.studio-preset::after{content:"";position:absolute;top:-1px;right:-1px;width:20px;height:20px;background:#e6b9ad url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23321e24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;opacity:0;transform:scale(.6);transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease-soft)}
.studio-opt input:checked+.studio-opt__body::after,.studio-preset[aria-pressed=true]::after{opacity:1;transform:none}
.studio-opt input:disabled{cursor:not-allowed}
.studio-opt input:disabled+.studio-opt__body{border-style:dashed;opacity:.42}
.studio-opt input:disabled+.studio-opt__body .studio-opt__label{text-decoration:line-through}

/* Colour library */
.studio-group--colors+.studio-group--colors{margin-top:18px}
.studio-group--colors legend{margin-bottom:6px}
.studio-swatches{display:grid;grid-template-columns:repeat(6,minmax(44px,52px));gap:2px;margin-left:-4px}
.studio-opt--color{aspect-ratio:1;min-height:44px}
.studio-swatch{position:absolute;inset:4px;border-radius:50%;border:1px solid transparent;padding:4px;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-soft)}
.studio-swatch::before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset -3px -4px 6px rgba(30,8,14,.22),inset 3px 3px 5px rgba(255,255,255,.2)}
.studio-swatch::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:12px;margin:-8px 0 0 -4px;border:solid var(--check);border-width:0 2.2px 2.2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease-soft)}
.studio-opt--color:hover .studio-swatch{transform:scale(1.08)}
.studio-opt--color input:checked+.studio-swatch{border-color:#f1cfc5}
.studio-opt--color input:checked+.studio-swatch::after{opacity:1;transform:rotate(45deg)}
.studio .studio-opt--color input:focus-visible+.studio-swatch{outline-offset:1px}

/* Presets (the four original moods) */
.studio-presets{display:grid;gap:8px}
.studio-preset{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:6px 30px 6px 6px;border:1px solid var(--studio-line);background:transparent;color:inherit;text-align:left;cursor:pointer;transition:border-color var(--dur-base),background-color var(--dur-base),transform var(--dur-base) var(--ease-soft)}
.studio-preset:hover{border-color:rgba(230,191,176,.55)}.studio-preset:active{transform:scale(var(--press-scale))}
.studio-preset[aria-pressed=true]{border-color:#e6b9ad;background:rgba(230,191,176,.1);box-shadow:inset 0 0 0 1px #e6b9ad}
.studio-preset__thumb{flex:none;display:grid;place-items:end center;width:52px;height:64px;padding:5px 0;background:var(--studio-tile)}
.studio-preset__thumb svg{display:block;height:54px;width:auto;overflow:visible;filter:drop-shadow(2px 3px 3px rgba(60,25,30,.22))}
.studio-preset__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.studio-preset__name{font:italic 400 21px/1.15 var(--font-display);letter-spacing:-.02em}
.studio-preset__desc{font-size:12px;line-height:1.4;color:var(--studio-dim)}

.studio__note{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--studio-line);max-width:520px;color:#b3938c;font-size:12px;line-height:1.6}
/* Without JavaScript the build's pre-rendered default design stays as a static preview; the empty controls give way to a note. */
.studio__noscript{display:none;margin:18px 0 0;color:var(--studio-soft);font-size:14px;line-height:1.7;max-width:460px}
html:not(.js) .studio__noscript,html:not(.js) .studio .studio__description{display:block}html:not(.js) .studio__description{min-height:0;margin-top:8px}
html:not(.js) .studio__tabs-wrap,html:not(.js) .studio__panels,html:not(.js) .studio__reset{display:none}
html:not(.js) .studio__bar{min-height:48px}
.studio .is-changing{animation:mood-text var(--dur-slow) var(--ease-soft) both}

/* --- Larger phones / tablets -------------------------------------------- */
@media(min-width:480px){.studio-presets{grid-template-columns:1fr 1fr}.studio-options{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}}
@media(min-width:761px){
  .studio{--studio-header:75px}
  .studio__heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:48px}
  .studio h2{font-size:clamp(48px,5.4vw,80px)}
  .studio__heading p{margin:0 0 11px;max-width:340px}
  .studio__app{width:min(100% - 56px,1376px);margin-inline:auto}
  .studio-stage{height:auto;aspect-ratio:640/420;max-height:46svh;width:100%}
  .studio-stage__corner{font-size:10px}.studio-stage__corner--top{top:26px;left:30px}.studio-stage__corner--bottom{right:30px;bottom:25px}.studio-stage__asterisk{font-size:46px;left:30px;bottom:18px}
  .studio__bar{padding-left:0}.studio__summary{font-size:13px}
  .studio__picker-body{padding:30px 0 0}
  .studio__tabs-wrap{margin-inline:0;-webkit-mask-image:none;mask-image:none}.studio__tabs{padding:0;flex-wrap:wrap}
  .studio-opt,.studio-tab,.studio-preset{scroll-margin-top:calc(var(--studio-header) + 46svh + 80px)}
}
/* --- Desktop: preview and picker side by side --------------------------- */
@media(min-width:1000px){
  .studio__app{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;align-items:start}
  .studio__preview{top:calc(var(--studio-header) + 24px)}
  .studio-stage{max-height:none}
  .studio__bar{border:1px solid var(--studio-line);border-top:0;padding:4px 10px 4px 22px}
  .studio__picker{border:1px solid var(--studio-line)}
  .studio__picker-top,.studio__picker-bottom{display:flex;justify-content:space-between;padding:26px 34px;font-size:11px;letter-spacing:.18em;font-weight:700;color:#cba99d}
  .studio__picker-top{border-bottom:1px solid var(--studio-line)}.studio__picker-bottom{border-top:1px solid var(--studio-line);margin-top:34px}
  .studio__picker-bottom span:last-child{font-size:18px;line-height:0}
  .studio__picker-body{padding:36px 34px 0}
  .studio__name{font-size:clamp(40px,3.6vw,58px)}
  .studio__description{font-size:15px}
  .studio__panels{min-height:330px}
  .studio-options{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.studio-opt__thumb{height:104px}.studio-opt__thumb svg{height:88px}.studio-opt__label{font-size:12px}
  .studio-tab{padding:0 8px;letter-spacing:.07em;font-size:11.5px}.studio__tabs{flex-wrap:nowrap}
  .studio-opt,.studio-tab,.studio-preset{scroll-margin-top:120px}
}
@media(min-width:1000px) and (max-width:1560px){.studio-tab__index{display:none}}
@media(min-width:1101px){.studio__app{width:min(100% - 88px,1376px)}.studio__picker-body{padding-inline:44px}.studio-tab{padding:0 11px}}