/* look-viewer.css — detail view, zoom, picks tray and studio quote sheet for
 * the /nail-art-ideas pages. Paired with /look-viewer.js; every class here is
 * created by that script, so pages without JS never show any of it. */

:root{
  --lv-ink:#0C0C0C; --lv-ivory:#F7F4EF; --lv-cream:#F4EEE4; --lv-champagne:#E8DDCF;
  --lv-gold:#C8A97E; --lv-gold-deep:#8a6f4b; --lv-muted:#6E655A; --lv-line:rgba(169,155,140,.28);
  --lv-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------- gallery cards */
.look__open{all:unset;display:block;width:100%;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.look__open:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:-4px;border-radius:14px}
.hset__img .look__open{height:100%}
.look__save{position:absolute;top:.6rem;right:.6rem;z-index:2;width:44px;height:44px;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(247,244,239,.55);
  background:rgba(12,12,12,.32);color:var(--lv-ivory);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--lv-ease),transform .4s var(--lv-ease),border-color .4s var(--lv-ease)}
.look__save:hover{background:rgba(12,12,12,.55)}
.look__save:active{transform:scale(.92)}
.look__save:focus-visible{outline:2px solid var(--lv-gold);outline-offset:2px}
.look__save svg{width:19px;height:19px}
.look__save[aria-pressed="true"]{background:var(--lv-ivory);border-color:var(--lv-ivory);color:#9c3b3b}
.look__save[aria-pressed="true"] svg path{fill:currentColor}
.hset__img{position:relative}
.look__save.is-pop{animation:lvPop .45s var(--lv-ease)}
@keyframes lvPop{40%{transform:scale(1.18)}}

/* ------------------------------------------------------------ the viewer */
.lv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--lv-ink);color:var(--lv-ivory);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 400px}
.lv:not([open]){display:none}
.lv::backdrop{background:rgba(12,12,12,.9)}
.lv[open]{animation:lvIn .35s var(--lv-ease)}
@keyframes lvIn{from{opacity:0}to{opacity:1}}

.lv__stage{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.lv__stage.is-zoomed{cursor:grab}
.lv__stage.is-dragging{cursor:grabbing}
.lv__img{position:absolute;max-width:none;transform-origin:50% 50%;will-change:transform;
  -webkit-user-drag:none;user-select:none;pointer-events:none;border-radius:4px;
  transition:opacity .3s var(--lv-ease)}
.lv__stage.is-loading .lv__img{opacity:.55}
.lv__spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(200,169,126,.25);border-top-color:var(--lv-gold);opacity:0;pointer-events:none;
  animation:lvSpin 1s linear infinite;transition:opacity .3s}
.lv__stage.is-loading .lv__spin{opacity:1}
@keyframes lvSpin{to{transform:rotate(360deg)}}

.lv__btn{width:46px;height:46px;border-radius:9999px;border:1px solid rgba(216,195,165,.32);
  background:rgba(12,12,12,.55);color:var(--lv-ivory);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color .35s var(--lv-ease),color .35s var(--lv-ease),opacity .35s var(--lv-ease),transform .35s var(--lv-ease)}
.lv__btn:hover{border-color:var(--lv-gold);color:var(--lv-gold)}
.lv__btn:active{transform:scale(.95)}
.lv__btn:focus-visible{outline:2px solid var(--lv-gold);outline-offset:2px}
.lv__btn[disabled]{opacity:.3;pointer-events:none}
.lv__btn svg{width:20px;height:20px}
.lv__close{position:absolute;top:max(.9rem,env(safe-area-inset-top));right:calc(400px + .9rem);z-index:3}
.lv__nav{position:absolute;top:50%;margin-top:-23px;z-index:2}
.lv__nav--prev{left:1rem}
.lv__nav--next{right:1rem}
.lv__tools{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:.4rem;
  padding:.3rem;border-radius:9999px;background:rgba(12,12,12,.55);border:1px solid rgba(216,195,165,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lv__tools .lv__btn{width:38px;height:38px;border-color:transparent;background:transparent}
.lv__pct{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.12em;min-width:3.4rem;text-align:center;color:var(--lv-champagne)}
.lv__count{position:absolute;top:1.25rem;left:1.2rem;z-index:2;font-family:'Jost',sans-serif;font-weight:300;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(232,221,207,.75)}
.lv__hint{position:absolute;left:50%;top:1.15rem;transform:translateX(-50%);z-index:2;margin:0;
  font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lv-champagne);
  background:rgba(12,12,12,.55);padding:.5rem .95rem;border-radius:9999px;white-space:nowrap;
  pointer-events:none;transition:opacity .6s var(--lv-ease)}
.lv__hint.is-gone{opacity:0}

/* ---- side panel / bottom sheet ---- */
.lv__panel{position:relative;background:var(--lv-ivory);color:#171717;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,2.4vw,2rem) 2rem;display:flex;flex-direction:column;gap:1.1rem}
.lv__grip{display:none}
.lv__eyebrow{margin:0;font-family:'Jost',sans-serif;font-weight:400;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lv-gold-deep)}
.lv__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.lv__name{margin:.35rem 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2;color:#171717}
.lv__svc{display:inline-block;margin-top:.45rem;font-family:'Jost',sans-serif;font-weight:400;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#4b443c;border-bottom:1px solid var(--lv-gold)}
.lv__svc:hover{color:var(--lv-gold-deep)}
.lv__line{margin:0;font-family:'Cormorant Garamond',serif;font-size:1.08rem;line-height:1.6;color:#4b443c}
.lv__line:empty{display:none}
.lv__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.lv__tags li{font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lv-muted);
  border:1px solid var(--lv-line);border-radius:9999px;padding:.38rem .7rem}
.lv__note{margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.98rem;line-height:1.5;color:var(--lv-muted)}
.lv__save{flex:none;width:46px;height:46px;border-radius:9999px;border:1px solid var(--lv-line);background:transparent;color:#171717;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .35s var(--lv-ease)}
.lv__save:hover{border-color:var(--lv-gold)}
.lv__save:active{transform:scale(.92)}
.lv__save:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:2px}
.lv__save svg{width:20px;height:20px}
.lv__save[aria-pressed="true"]{color:#9c3b3b;border-color:rgba(156,59,59,.4)}
.lv__save[aria-pressed="true"] svg path{fill:currentColor}

/* ---- quote block (viewer and picks tray share it) ---- */
.qb{border-top:1px solid var(--lv-line);padding-top:1.2rem;display:flex;flex-direction:column;gap:.75rem}
.qb__title{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:1.12rem;color:#171717}
.qb__sub{margin:-.35rem 0 0;font-family:'Cormorant Garamond',serif;font-size:1rem;line-height:1.5;color:#4b443c}
.qb__label{font-family:'Jost',sans-serif;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--lv-muted)}
.qb__seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9999px;background:var(--lv-champagne);gap:3px}
.qb__seg button{all:unset;box-sizing:border-box;text-align:center;min-height:42px;border-radius:9999px;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#4b443c;
  transition:background .35s var(--lv-ease),color .35s var(--lv-ease)}
.qb__seg button[aria-checked="true"]{background:var(--lv-ivory);color:#171717;box-shadow:0 1px 2px rgba(24,16,9,.12)}
.qb__seg button:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:1px}
.qb__send{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.qb__go{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;border-radius:9999px;
  font-family:'Jost',sans-serif;font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:#171717;color:var(--lv-ivory);border:1px solid #171717;cursor:pointer;text-decoration:none;
  transition:background .35s var(--lv-ease),border-color .35s var(--lv-ease),transform .2s var(--lv-ease)}
.qb__go:hover{background:var(--lv-gold-deep);border-color:var(--lv-gold-deep)}
.qb__go--ig{background:transparent;color:#171717}
.qb__go--ig:hover{background:#171717;color:var(--lv-ivory);border-color:#171717}
.qb__go:active{transform:scale(.98)}
.qb__go:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:2px}
.qb__go svg{width:17px;height:17px;flex:none}
.qb__fine{margin:0;font-family:'Cormorant Garamond',serif;font-size:.95rem;line-height:1.5;color:var(--lv-muted)}
.qb__fine b{font-weight:500;color:#4b443c}
.qb__alt{all:unset;align-self:flex-start;cursor:pointer;font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lv-gold-deep);border-bottom:1px solid var(--lv-gold);padding:.55rem 0;min-height:24px}
.qb__alt:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:3px}
.qb__alts{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.qb[hidden],.qb__alt[hidden],.pk__empty[hidden]{display:none}
.qb__msg{margin:0}
.qb__msg summary{cursor:pointer;list-style:none;font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lv-muted);padding:.55rem 0}
.qb__msg summary::-webkit-details-marker{display:none}
.qb__msg pre{margin:.3rem 0 0;white-space:pre-wrap;word-break:break-word;font-family:'Cormorant Garamond',serif;font-size:1rem;line-height:1.5;color:#4b443c;
  background:var(--lv-cream);border:1px solid var(--lv-line);border-radius:10px;padding:.85rem 1rem}

/* toast — inside whichever dialog is open, so the top layer cannot hide it */
.lv-toast{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));transform:translate(-50%,1rem);z-index:5;
  background:#171717;color:var(--lv-ivory);font-family:'Jost',sans-serif;font-size:.74rem;letter-spacing:.08em;line-height:1.45;
  padding:.85rem 1.3rem;border-radius:18px;opacity:0;pointer-events:none;max-width:min(92vw,440px);text-align:center;
  box-shadow:0 18px 40px -18px rgba(12,12,12,.6);transition:opacity .3s var(--lv-ease),transform .3s var(--lv-ease)}
.lv-toast.on{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------------------------- picks bar */
.pkbar{position:fixed;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,140%);
  display:inline-flex;align-items:center;gap:.75rem;padding:.4rem 1.2rem .4rem .45rem;min-height:52px;border-radius:9999px;
  background:#171717;color:var(--lv-ivory);border:1px solid rgba(216,195,165,.25);cursor:pointer;
  font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 22px 44px -20px rgba(12,12,12,.7);transition:transform .55s var(--lv-ease),background .35s var(--lv-ease)}
.pkbar.on{transform:translate(-50%,0)}
.pkbar:hover{background:#2a2622}
.pkbar:active{transform:translate(-50%,0) scale(.98)}
.pkbar:focus-visible{outline:2px solid var(--lv-gold);outline-offset:3px}
.pkbar__thumbs{display:flex}
.pkbar__thumbs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #171717;background:#2a2622}
.pkbar__thumbs img + img{margin-left:-14px}
.pkbar__n{color:var(--lv-gold)}
@media(prefers-reduced-motion:reduce){.pkbar{transition:none}}

/* ---------------------------------------------------------- picks tray */
.pk{position:fixed;inset:0 0 0 auto;width:min(440px,100%);height:100%;max-height:none;margin:0;padding:0;border:0;
  background:var(--lv-ivory);color:#171717;overflow:hidden;display:flex;flex-direction:column}
.pk:not([open]){display:none}
.pk::backdrop{background:rgba(12,12,12,.45)}
.pk[open]{animation:pkIn .45s var(--lv-ease)}
@keyframes pkIn{from{transform:translateX(100%)}to{transform:none}}
.pk__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.4rem 1rem;border-bottom:1px solid var(--lv-line)}
.pk__title{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:1.4rem}
.pk__close{width:44px;height:44px;border-radius:9999px;border:1px solid var(--lv-line);background:transparent;color:#171717;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pk__close:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:2px}
.pk__close svg{width:18px;height:18px}
.pk__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem}
.pk__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pk__item{display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;align-items:center}
.pk__thumb{all:unset;cursor:zoom-in;width:64px;height:80px;border-radius:8px;overflow:hidden;background:var(--lv-champagne)}
.pk__thumb img{width:100%;height:100%;object-fit:cover}
.pk__thumb:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:2px}
.pk__name{font-family:'Marcellus',serif;font-size:1rem;line-height:1.25}
.pk__svc{display:block;margin-top:.2rem;font-family:'Jost',sans-serif;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lv-muted)}
.pk__rm{width:40px;height:40px;border-radius:9999px;border:0;background:transparent;color:var(--lv-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pk__rm:hover{color:#171717;background:var(--lv-champagne)}
.pk__rm:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:2px}
.pk__rm svg{width:16px;height:16px}
.pk__empty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;color:var(--lv-muted);margin:0}

/* ---------------------------------------------- shared-with-you strip */
.shared{padding:clamp(1.6rem,4vw,2.6rem) 0 0}
.shared__box{border:1px solid rgba(200,169,126,.45);border-radius:18px;background:var(--lv-cream);padding:clamp(1.2rem,3vw,2rem)}
.shared__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.8rem 1.5rem;margin-bottom:1.2rem}
.shared h2{margin:.7rem 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);color:#171717}
.shared p{margin:.4rem 0 0;font-size:1.05rem;line-height:1.6;color:#4b443c;max-width:58ch}
.shared__row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,18%,220px);gap:.8rem;overflow-x:auto;padding-bottom:.4rem;scroll-snap-type:x mandatory}
.shared__card{all:unset;cursor:zoom-in;scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem}
.shared__card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--lv-champagne);transition:transform .6s var(--lv-ease)}
.shared__card:hover img{transform:scale(1.02)}
.shared__card:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:3px;border-radius:12px}
.shared__name{font-family:'Marcellus',serif;font-size:.95rem;line-height:1.25;color:#171717}
.shared__svc{font-family:'Jost',sans-serif;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lv-muted)}
@media(max-width:640px){.shared__row{grid-auto-columns:44%}}

/* ------------------------------------------------------------- phones */
@media(max-width:899px){
  .lv{grid-template-columns:1fr;grid-template-rows:1fr}
  .lv__stage{grid-area:1/1}
  .lv__close{right:.8rem;top:max(.8rem,env(safe-area-inset-top))}
  .lv__nav{display:none}
  .lv__tools{display:none}
  .lv__count{top:max(1.35rem,calc(env(safe-area-inset-top) + .55rem));left:1rem}
  .lv__hint{top:auto;bottom:calc(var(--lv-peek,220px) + .9rem)}
  /* the sheet: a peek that always shows the name and the send buttons,
     expanding over the photo for the details */
  .lv__panel{grid-area:1/1;align-self:end;z-index:4;max-height:calc(100% - 4.5rem);border-radius:20px 20px 0 0;
    padding:.5rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom));gap:.85rem;
    box-shadow:0 -18px 40px -24px rgba(12,12,12,.7);
    transform:translateY(calc(100% - var(--lv-peek,220px)));transition:transform .5s var(--lv-ease);overflow:hidden}
  .lv.is-sheet-open .lv__panel{transform:none;overflow-y:auto}
  .lv.is-zoomed .lv__panel{transform:translateY(100%)}
  .lv__grip{all:unset;box-sizing:border-box;width:100%;min-height:28px;cursor:pointer;display:flex;justify-content:center;align-items:center}
  .lv__grip:focus-visible{outline:2px solid var(--lv-gold-deep);outline-offset:-2px;border-radius:8px}
  .lv__grip::before{content:"";width:40px;height:4px;border-radius:4px;background:var(--lv-limestone,#D9D0C5)}
  .lv__name{font-size:1.25rem;margin-top:.15rem}
  .lv__svc{font-size:.64rem;margin-top:.35rem}
  .lv__eyebrow{display:none}
  .qb{border-top:0;padding-top:0;gap:.6rem}
  .qb__title,.qb__sub{display:none}
  .qb__go{min-height:48px}
  .lv__more{display:flex;flex-direction:column;gap:.85rem}
  .lv__more .qb__label{display:none}
  .pk{inset:auto 0 0 0;width:100%;height:auto;max-height:88dvh;border-radius:20px 20px 0 0}
  .pk[open]{animation:pkUp .45s var(--lv-ease)}
  .pk__body{padding-bottom:calc(1.6rem + env(safe-area-inset-bottom))}
}
@keyframes pkUp{from{transform:translateY(100%)}to{transform:none}}
@media(min-width:900px){.lv__more{display:contents}}
@media(hover:none){.lv__stage{cursor:default}}
@media(prefers-reduced-motion:reduce){
  .lv[open],.pk[open]{animation:none}
  .lv__panel,.lv__img{transition:none}
}