/* Laura Veils · lv-plus 1.0 (6 Nov 2026) — smoothness + delight add-on styles */

/* 3 · no alt-text flash; soft colour while the photo loads */
img{color:transparent}
.gallery-main,.product-photo{background-color:var(--ph,#f3f4f3)}
img.lvp-wait{opacity:0}
.lvp .gallery-main img,.lvp .product-photo img{transition:opacity .6s cubic-bezier(.32,.72,0,1)}

/* 4 · shade switch cross-fade */
html.lvp-vt .gallery-main img{view-transition-name:lvp-hero}
html.lvp-vt .product-detail h1{view-transition-name:lvp-title}
html.lvp-vt .detail-price{view-transition-name:lvp-price}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
::view-transition-old(lvp-hero),::view-transition-new(lvp-hero){animation-duration:.45s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-group(lvp-title),::view-transition-group(lvp-price){animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1.22,.36,1)}

/* 5 · throwable sheets */
dialog#overlay.lvp-drag{transition:none!important;animation:none!important;will-change:transform}
dialog#overlay.lvp-thrown,dialog#overlay.lvp-thrown.closing{animation:none!important;transition:none!important}

/* 6 · scroll reveals (below the fold only) */
.lvp-pre{opacity:0;translate:0 18px}
.lvp-in{transition:opacity .55s cubic-bezier(.32,.72,0,1),translate .7s cubic-bezier(.22,1.22,.36,1)}

/* 7 · sticky Add to bag only when the main button is off screen */
body .sticky-buy.lvp-managed{transform:translateY(calc(100% + 24px));transition:transform .45s cubic-bezier(.22,1.22,.36,1);visibility:hidden}
body .sticky-buy.lvp-managed.lvp-on{transform:none;visibility:visible}
body .sticky-buy.lvp-managed:not(.lvp-on){transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s}

/* 8 · long pages: skip work for shade tiles far below */
.colour-tile,.ss-grid .shade-card{content-visibility:auto;contain-intrinsic-size:auto 200px}

/* 2 · swipe back (in-app browsers and installed app) */
#app.lvp-swiping{position:relative;z-index:2;background:var(--bg,#fff);box-shadow:-1px 0 0 rgba(0,0,0,.08);will-change:transform}
.lvp-under{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:var(--bg,#fff);will-change:transform}
html.lvp-noanim #app *{animation-duration:1ms!important;transition-duration:1ms!important}

/* D2 · fold before the fly */
.lvp-fold{position:fixed;z-index:1000;overflow:hidden;pointer-events:none;transform-origin:50% 0;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lvp-fold img{width:100%;height:100%;object-fit:cover;display:block}
.lvp-fold::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.16) 50%,transparent 58%)}

/* D3 · gifts unlock */
.lvp-unlock{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));min-width:min(290px,calc(100vw - 32px));z-index:1001;display:flex;align-items:center;gap:12px;background:#17191a;color:#fff;border-radius:18px;padding:12px 16px 12px 12px;box-shadow:0 14px 40px rgba(0,0,0,.22);max-width:min(380px,calc(100vw - 32px));translate:-50% -16px;opacity:0;transition:translate .5s cubic-bezier(.22,1.22,.36,1),opacity .35s;pointer-events:none}
.lvp-unlock.lvp-on{translate:-50% 0;opacity:1}
[dir=rtl] .lvp-unlock{padding:12px 12px 12px 16px}
.lvp-ut{display:grid;gap:1px}.lvp-ut b{font-size:15px}.lvp-ut small{font-size:13px;opacity:.75}
.lvp-rib{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#4C6C55;font-weight:700;clip-path:inset(0 100% 0 0)}
.lvp-unlock.lvp-on .lvp-rib{animation:lvpUnroll .8s cubic-bezier(.32,.72,0,1) .15s forwards}
@keyframes lvpUnroll{to{clip-path:inset(0 0 0 0)}}
.lvp-env{flex:none;position:relative;width:44px;height:32px}
.lvp-env i{position:absolute;display:block}
.lvp-env .b{inset:0;border:1.5px solid #fff;border-radius:4px}
.lvp-env .l{left:0;right:0;top:0;height:20px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .6s cubic-bezier(.22,1.22,.36,1) .25s;z-index:2}
.lvp-env .p{left:6px;right:6px;top:5px;height:22px;background:#fff;color:#E4682C;border-radius:2px;font:700 10px/22px system-ui;text-align:center;font-style:normal;transition:translate .6s cubic-bezier(.22,1.22,.36,1) .55s;z-index:1}
.lvp-unlock.lvp-on .lvp-env .l{transform:rotateX(180deg)}
.lvp-unlock.lvp-on .lvp-env .p{translate:0 -14px}
.lvp-box{flex:none;position:relative;width:40px;height:36px}
.lvp-box i{position:absolute;display:block;background:#4C6C55;border-radius:4px}
.lvp-box .b{left:3px;right:3px;top:12px;bottom:0}
.lvp-box .t{left:0;right:0;top:4px;height:10px;filter:brightness(1.2);transform-origin:10% 100%;transition:transform .7s cubic-bezier(.22,1.22,.36,1) .2s}
.lvp-box .r{left:50%;width:6px;top:4px;bottom:0;translate:-50% 0;background:#fff;opacity:.85}
.lvp-unlock.lvp-on .lvp-box .t{transform:translate(-6px,-6px) rotate(-22deg)}

/* D4 · welcome back */
.lvp-wb{display:grid;gap:10px;margin-block:14px;opacity:0;translate:0 10px;transition:opacity .5s cubic-bezier(.32,.72,0,1),translate .6s cubic-bezier(.22,1.22,.36,1)}
.lvp-wb.lvp-on{opacity:1;translate:0 0}
.lvp-wb-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid #e8ebe9;border-radius:18px;padding:12px}
.lvp-wb-last{width:56px;height:74px;border-radius:12px;overflow:hidden;display:block}
.lvp-wb-last img,.lvp-wb-more img{width:100%;height:100%;object-fit:cover;display:block}
.lvp-wb-t{display:grid;gap:2px;min-width:0}.lvp-wb-t b{font-size:17px}.lvp-wb-t small{color:#6b716e;font-size:14px}
.lvp-wb-x{border:0;background:none;font-size:22px;line-height:1;color:#6b716e;width:34px;height:34px;border-radius:50%;cursor:pointer}
.lvp-wb-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lvp-wb-more a{display:grid;gap:4px;color:inherit;text-decoration:none;font-size:13px}
.lvp-wb-more img{aspect-ratio:3/4;height:auto;border-radius:12px}

/* D5 · packing on the thank-you page */
.lvp-pack{display:grid;justify-items:center;gap:14px;margin:6px auto 18px}
.lvp-pbox{position:relative;width:200px;height:132px;perspective:700px}
.lvp-pbox i{position:absolute;display:block}
.lvp-pbox .base{left:0;right:0;top:36px;bottom:0;border:1.5px solid #17191a;border-radius:8px;background:#fff}
.lvp-pbox .fold{position:absolute;bottom:12px;width:54px;height:42px;border-radius:6px;overflow:hidden;left:calc(50% - 27px + (var(--i) - (var(--n) - 1) / 2) * 60px);translate:0 -130px;opacity:0;transition:translate .7s cubic-bezier(.22,1.22,.36,1) calc(.3s + var(--i) * .26s),opacity .3s calc(.3s + var(--i) * .26s)}
.lvp-pbox .fold img{width:100%;height:220%;object-fit:cover;object-position:50% 35%}
.lvp-pbox .tl,.lvp-pbox .tr{top:36px;width:50%;height:64px;background:repeating-linear-gradient(100deg,#fff,#fff 6px,#f1f3f2 7px,#fff 12px);border:1px solid #e6e9e7;z-index:3;transition:transform .7s cubic-bezier(.32,.72,0,1) 1.5s}
.lvp-pbox .tl{left:0;transform-origin:0 0;transform:rotateY(-170deg)}
.lvp-pbox .tr{right:0;transform-origin:100% 0;transform:rotateY(170deg)}
.lvp-pack.lvp-on .fold{translate:0 0;opacity:1}
.lvp-pack.lvp-on .tl,.lvp-pack.lvp-on .tr{transform:rotateY(0)}
.lvp-hand{background:#fff;border:1px solid #e6e9e7;border-radius:6px;padding:10px 16px;max-width:300px;font:500 21px/1.2 "Snell Roundhand","Bradley Hand","Segoe Print","Noteworthy",cursive;color:#17191a;rotate:-2deg;box-shadow:0 8px 20px rgba(0,0,0,.08);opacity:0;translate:0 12px;transition:opacity .5s 2.1s,translate .6s cubic-bezier(.22,1.22,.36,1) 2.1s}
[lang=ar] .lvp-hand{font-family:inherit;font-size:18px;rotate:2deg}
.lvp-pack.lvp-on .lvp-hand{opacity:1;translate:0 0}

@media (prefers-reduced-motion: reduce){
  .lvp-pre{opacity:1;translate:none}
  .lvp-unlock,.lvp-wb,.lvp-pack *,.lvp-hand,body .sticky-buy.lvp-managed{transition-duration:1ms!important;transition-delay:0ms!important;animation:none!important}
}