/* 2Cute Nails app: black, Apple-clean. SF Pro on iPhone, Inter elsewhere. White buttons, pink only for sales. */
:root{
  --bg:#000;--s1:#0d0d0e;--s2:#1c1c1e;--s3:#2c2c2e;--line:rgba(255,255,255,.09);
  --tx:#f5f5f7;--mute:#8e8e93;--tile:#f2f2f4;--pink:#ff6fa9;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  /* names the P.R page uses */
  --sf:var(--f);--ss:var(--f);--card:var(--s2);--fg:var(--tx);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.4 var(--f);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px calc(96px + var(--sab))}
.sf{font-family:var(--f);font-weight:700;letter-spacing:-.03em}

/* top bar */
.top{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);padding-top:var(--sat);border-bottom:1px solid transparent;transition:border-color .2s}
.top.lined{border-bottom-color:var(--line)}
.top-in{max-width:1100px;margin:0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:relative}
.ic{all:unset;cursor:pointer;position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.ic:active{background:var(--s2)}
.ic svg{width:23px;height:23px}
.mark{display:flex;flex-direction:column;align-items:center;line-height:1}
.mark b{font:800 21px/1 var(--f);letter-spacing:.06em}
.mark small{font:600 8px/1 var(--f);letter-spacing:.42em;color:var(--mute);margin-top:4px;padding-left:.42em}
.count{position:absolute;top:6px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#fff;color:#000;font:700 10.5px/17px var(--f);text-align:center;display:none}
.count.on{display:block}

/* bottom tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(0,0,0,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);padding-bottom:var(--sab)}
.tabs-in{max-width:560px;margin:0 auto;display:flex;height:54px}
.tab{all:unset;cursor:pointer;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mute);font:500 10.5px var(--f);position:relative}
.tab svg{width:24px;height:24px}
.tab.on{color:#fff}
.tab .count{top:2px;right:calc(50% - 22px)}

/* buttons (.w kept for the P.R page) */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border-radius:999px;background:#fff;color:#000;font:600 15.5px var(--f);letter-spacing:-.01em;white-space:nowrap;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.97);opacity:.85}
.btn.sm{height:38px;padding:0 18px;font-size:14px}
.btn.dk{background:var(--s2);color:#fff}
.btn.full{width:100%}
.btn[disabled]{opacity:.35;pointer-events:none}

/* type */
.eyebrow{font:600 11.5px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.h1{font:700 34px/1.06 var(--f);letter-spacing:-.03em;margin:0}
.hd{display:flex;align-items:flex-end;justify-content:space-between;margin:36px 0 14px}
.hd h2{font:700 22px/1.15 var(--f);letter-spacing:-.025em;margin:0}
.hd a{font:500 14.5px var(--f);color:var(--mute)}

/* hero: clean photo, words on black underneath */
.hero{margin:0 -16px;text-align:center}
.hero-img{position:relative;overflow:hidden;height:min(112vw,600px);background:#111;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.hero-img img,.hero-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-in{padding:0 22px;margin-top:-18px;position:relative}
.hero .h1{font-size:38px;margin:10px 0 10px}
.hero p{margin:0 auto 22px;color:#a1a1a6;font-size:16px;max-width:320px}
.hero-btns{display:flex;gap:10px;justify-content:center}
.hero-btns .btn{padding:0 22px}

/* videos: the cover image sits under the video until it plays */
video.auto{opacity:0;transition:opacity .3s}
video.auto.on{opacity:1}
.reels{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 42%;max-width:220px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111;scroll-snap-align:start;cursor:pointer}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));pointer-events:none}
.reel-tag{position:absolute;left:12px;right:12px;bottom:11px;z-index:1}
.reel-tag b{display:block;font:600 14px/1.2 var(--f)}
.reel-tag span{font:500 12.5px var(--f);color:#d1d1d6}
.pc-img.vid img,.pc-img.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.viewer{position:fixed;inset:0;z-index:95;background:#000;display:none}
.viewer.on{display:block}
.viewer video{width:100%;height:100%;object-fit:cover}
.vv-x{position:absolute;top:calc(8px + var(--sat));right:8px;background:rgba(0,0,0,.4)}
.vv-bar{position:absolute;left:0;right:0;bottom:0;padding:40px 18px calc(18px + var(--sab));display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}
.vv-bar div{flex:1}
.vv-bar b{display:block;font:700 18px var(--f)}
.vv-bar small{color:#d1d1d6;font-size:13.5px}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:720px){.cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cat{position:relative;aspect-ratio:1/1.08;border-radius:18px;background:var(--tile);overflow:hidden;display:block}
.cat b{position:absolute;top:11px;left:12px;z-index:1;color:#000;font:600 13.5px var(--f);letter-spacing:-.01em}
.cat img{position:absolute;left:8%;right:8%;bottom:6%;width:84%;height:68%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}

/* product tile */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rowx{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
.rowx::-webkit-scrollbar{display:none}
.rowx .pc{flex:0 0 44%;max-width:210px;scroll-snap-align:start}
.pc{cursor:pointer;min-width:0}
.pc-img{position:relative;aspect-ratio:1/1;border-radius:18px;background:var(--tile);overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pc-img.type{background:linear-gradient(150deg,#2c2c30 0%,#141416 58%,#3b1d2b 100%);display:flex;flex-direction:column;justify-content:flex-start;padding:46px 16px 16px}
.pc-img.type b{font:800 20px/1.04 var(--f);letter-spacing:-.03em;color:#fff}
.pc-img.type small{font:600 10px var(--f);letter-spacing:.16em;color:var(--pink);text-transform:uppercase;margin-bottom:8px}
.pc-off{position:absolute;top:10px;left:10px;background:var(--pink);color:#000;font:700 11px/1 var(--f);padding:6px 8px;border-radius:999px}
.pc-add{all:unset;cursor:pointer;position:absolute;right:9px;bottom:9px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .12s,background .2s}
.pc-add:active{transform:scale(.88)}
.pc-add svg{width:16px;height:16px}
.pc-img.type .pc-add{background:#fff}
.pc-nm{margin-top:10px;font:500 14px/1.3 var(--f);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-pr{margin-top:3px;font:600 14.5px var(--f)}
.pc-pr s{font-weight:400;color:var(--mute);margin-left:6px;font-size:13px}
.pc-pr.sale{color:var(--pink)}

/* offer banner */
.offer{position:relative;display:block;border-radius:22px;overflow:hidden;background:#111 center/cover no-repeat;aspect-ratio:4/5;max-height:560px;width:100%;cursor:pointer}
.offer:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 100%)}
.offer-in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px}
.offer .h1{font-size:32px;margin:6px 0 6px}
.offer p{margin:0 0 16px;color:#d1d1d6;font-size:14.5px}
.offer .eyebrow{color:var(--pink)}
@media(min-width:720px){.offer{aspect-ratio:16/8}}

/* trust */
.trust{margin:40px 0 0;border-top:1px solid var(--line)}
.trust div{display:flex;align-items:center;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line);font:500 14.5px var(--f)}
.trust svg{width:22px;height:22px;flex-shrink:0}
.trust small{display:block;color:var(--mute);font-weight:400;font-size:13px;margin-top:1px}
.foot{text-align:center;color:var(--mute);font-size:12px;padding:28px 0 6px}

/* page headers */
.ph{padding:14px 0 4px}
.ph .h1{font-size:34px}
.ph p{margin:6px 0 0;color:var(--mute);font-size:14.5px}
.back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:2px;color:var(--mute);font:500 15px var(--f);margin:10px 0 0 -4px}
.back svg{width:20px;height:20px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:16px -16px 18px;padding:0 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{all:unset;cursor:pointer;flex-shrink:0;background:var(--s2);border-radius:999px;padding:9px 15px;font:500 13.5px var(--f);color:#d1d1d6}
.chip.on{background:#fff;color:#000}
.empty{color:var(--mute);text-align:center;padding:50px 0;font-size:14.5px}

/* shop page: category cards */
.cards{display:grid;gap:12px;margin-top:18px}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.ccard{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#111 center/cover no-repeat}
.ccard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.ccard div{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
.ccard b{display:block;font:700 22px/1.1 var(--f);letter-spacing:-.025em}
.ccard small{display:block;color:#d1d1d6;font-size:13px;margin-top:3px}

/* search */
.sbox{display:flex;align-items:center;gap:10px;background:var(--s2);border-radius:12px;height:44px;padding:0 14px}
.sbox svg{width:18px;height:18px;flex-shrink:0}
.sbox input{all:unset;flex:1;font:400 16px var(--f);color:#fff}
.sbox input::placeholder{color:var(--mute)}

/* drawer (menu) */
.dim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.dim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:70;width:min(86vw,380px);background:var(--s1);transform:translateX(-102%);transition:transform .32s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;padding-top:var(--sat)}
.drawer.on{transform:none}
.dr-hd{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 20px;flex-shrink:0}
.dr-hd .mark{align-items:flex-start}
.dr-hd .mark small{padding-left:0}
.dr-body{flex:1;overflow-y:auto;padding:4px 20px calc(24px + var(--sab))}
.dr-sec{margin-top:24px}
.dr-sec .eyebrow{display:block;margin-bottom:4px}
.dr-link{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font:500 16.5px var(--f)}
.dr-link i{width:42px;height:42px;border-radius:12px;background:var(--tile) center/cover no-repeat;flex-shrink:0}
.dr-link span{flex:1}
.dr-deal{background:var(--pink)!important;display:flex;align-items:center;justify-content:center;color:#000;font:800 15px var(--f);font-style:normal}
.dr-link svg{width:16px;height:16px;color:var(--mute)}
.dr-small{display:block;padding:11px 0;font:400 15.5px var(--f);color:#d1d1d6;border-bottom:1px solid var(--line)}

/* sheets */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:94vh;background:var(--s1);border-radius:24px 24px 0 0;transform:translateY(102%);transition:transform .34s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;max-width:640px;margin:0 auto}
.sheet.on{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:var(--s3);margin:8px auto 0;flex-shrink:0}
.sheet .x{all:unset;cursor:pointer;position:absolute;top:18px;right:16px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}
.sheet .x svg{width:13px;height:13px}
.body{overflow-y:auto;padding:12px 20px calc(22px + var(--sab))}

/* product detail */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px;gap:10px;scroll-padding:0 20px;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal .pc-img{flex:0 0 100%;scroll-snap-align:center;border-radius:20px}
.dots{display:flex;justify-content:center;gap:6px;margin:12px 0 0;min-height:6px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--s3);transition:background .2s}
.dots i.on{background:#fff}
.pd h3{font:700 24px/1.15 var(--f);letter-spacing:-.025em;margin:16px 0 6px}
.pd .price{display:flex;align-items:center;gap:10px;font:600 20px var(--f)}
.pd .price s{color:var(--mute);font-weight:400;font-size:16px}
.pd .price .save{background:var(--pink);color:#000;font:700 11.5px var(--f);padding:5px 9px;border-radius:999px}
.pd .desc{color:#c7c7cc;font-size:14.5px;line-height:1.55;margin:16px 0 0}
.buy{display:flex;gap:10px;margin-top:20px}
.buy .btn{flex:1}
.qty{display:flex;align-items:center;background:var(--s2);border-radius:999px;height:48px;flex-shrink:0}
.qty button{all:unset;cursor:pointer;width:42px;height:48px;text-align:center;font:500 22px/48px var(--f)}
.qty span{min-width:22px;text-align:center;font:600 16px var(--f)}
.qty.sm{height:34px}
.qty.sm button{width:32px;height:34px;line-height:34px;font-size:18px}
.qty.sm span{font-size:14px;min-width:18px}
.pd-perks{margin-top:22px;border-top:1px solid var(--line)}
.pd-perks div{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:#d1d1d6}
.pd-perks svg{width:20px;height:20px;flex-shrink:0}

/* bag */
.bag-hd{font:700 26px var(--f);letter-spacing:-.03em;margin:8px 0 14px}
.bag-it{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.bag-it .pc-img{width:68px;height:68px;flex-shrink:0;border-radius:14px}
.bag-it .t{flex:1;min-width:0}
.bag-it .t b{display:block;font:500 14.5px/1.3 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-it .t small{display:block;color:var(--mute);font-size:13.5px;margin-top:2px}
.ship{margin:18px 0 0;font-size:13.5px;color:#d1d1d6}
.ship .bar{height:4px;border-radius:2px;background:var(--s3);margin-top:9px;overflow:hidden}
.ship .bar i{display:block;height:100%;background:#fff;border-radius:2px;transition:width .3s}
.tot{display:flex;justify-content:space-between;font:600 17px var(--f);margin:20px 0 14px}
.fine{color:var(--mute);font-size:12px;text-align:center;margin:12px 0 0}

/* toast + loading */
.toast{position:fixed;left:50%;bottom:calc(76px + var(--sab));z-index:90;transform:translate(-50%,16px);opacity:0;background:#fff;color:#000;font:600 14px var(--f);padding:11px 18px;border-radius:999px;pointer-events:none;transition:all .25s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.skel{background:linear-gradient(90deg,#141416 0%,#1f1f22 50%,#141416 100%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}