/* Boutique tab: catalogue, product sheet, cart, orders. Dashboard styles at the end. */
.shop { position:relative; text-align:left; }
.shop-lead { font-size:13px; line-height:1.6; color:#c9bfd8; margin:0 0 16px; }
.shop-empty { padding:24px; text-align:center; color:#c9bfd8; font-size:14px; }
.shop-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:16px; }
.shop-card { display:block; width:100%; padding:0; border:1px solid #3f3252; border-radius:16px; overflow:hidden; background:#1c1630; color:inherit; text-align:left; transition:transform .2s, border-color .2s; }
.shop-card:active { transform:scale(.97); }
.shop-card:hover { border-color:var(--accent, #ff64aa); }
.shop-card img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:#2e2c32; }
.shop-card-body { display:block; padding:10px 12px 12px; }
.shop-card-body strong { display:block; font-size:14px; color:#fff; }
.shop-card-body span { display:block; font-size:11px; color:#a79bb7; line-height:1.4; margin:2px 0 6px; }
.shop-card-body b { display:inline-block; font-size:13px; color:#ff8fc8; }
.shop-orders-link { margin-bottom:14px; }
.shop-back { margin-bottom:12px; }
.shop-hero { position:relative; margin:0 -8px 16px; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent, #ff64aa) 35%, #1c1630), #110f24 75%); }
.shop-hero img { display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; }
.shop-sheet h1 { font-size:28px; margin:8px 0 4px; letter-spacing:-1px; }
.shop-tagline { color:#c9bfd8; font-size:14px; margin:0 0 10px; }
.shop-price { font-size:22px; font-weight:800; color:#ff8fc8; margin:0 0 18px; }
.shop-field { margin-bottom:18px; }
.shop-field .field-label { display:block; margin-bottom:8px; }
.shop-sizes { display:flex; flex-wrap:wrap; gap:8px; }
.shop-size { min-width:52px; min-height:44px; padding:0 14px; border:1px solid #645171; border-radius:12px; background:#211a34; color:#efe7ff; font-weight:700; transition:background .2s, border-color .2s, transform .2s; }
.shop-size.on { background:#d5005d; border-color:#ec287e; color:#fff; }
.shop-sizes.shake { animation:shop-shake .4s; }
@keyframes shop-shake { 25% { transform:translateX(-5px); } 50% { transform:translateX(5px); } 75% { transform:translateX(-3px); } }
.shop-stepper { display:inline-flex; align-items:center; gap:2px; border:1px solid #645171; border-radius:12px; background:#211a34; overflow:hidden; }
.shop-stepper button { width:42px; min-height:42px; border:0; background:transparent; color:#efe7ff; display:grid; place-items:center; }
.shop-stepper button .icon { width:18px; height:18px; }
.shop-stepper b { min-width:28px; text-align:center; font-size:15px; }
.shop-add { margin-top:6px; }
.shop-add[aria-disabled="true"] { opacity:.6; }
.cart-bar { position:fixed; left:0; right:0; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:6; margin:0 auto; max-width:560px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#1c1630f2; border-top:1px solid #3f3252; border-bottom:1px solid #3f3252; color:#e9e2f3; font-size:13px; animation:im-reveal .35s; }
.cart-bar .primary { width:auto; min-height:42px; padding:8px 14px; font-size:13px; box-shadow:none; }
.cart-lines { list-style:none; margin:0 0 16px; padding:0; }
.cart-lines li { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #3f3252; }
.cart-lines img { width:54px; height:72px; object-fit:cover; border-radius:10px; background:#2e2c32; flex-shrink:0; }
.cart-lines li > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cart-lines strong { font-size:14px; color:#fff; }
.cart-lines span { font-size:12px; color:#a79bb7; }
.cart-lines .shop-stepper { margin-top:4px; align-self:flex-start; }
.cart-remove { width:40px; min-height:40px; border:0; border-radius:10px; background:transparent; color:#a79bb7; display:grid; place-items:center; }
.cart-remove:hover { color:#ffadae; background:#2b1a33; }
/* Order confirmation: animated check, progress track, cards revealed one after the other. */
.shop-done { text-align:center; }
.shop-done > * { animation:im-reveal .55s cubic-bezier(.2,.7,.2,1) both; }
.shop-done > *:nth-child(2) { animation-delay:.25s; } .shop-done > *:nth-child(3) { animation-delay:.4s; } .shop-done > *:nth-child(4) { animation-delay:.55s; } .shop-done > *:nth-child(5) { animation-delay:.7s; } .shop-done > *:nth-child(6) { animation-delay:.85s; } .shop-done > *:nth-child(7) { animation-delay:.95s; }
.done-hero { position:relative; padding:6px 0 4px; }
.done-hero h1 { font-size:30px; letter-spacing:-1.2px; margin:8px 0 14px; }
.done-check { width:86px; height:86px; margin:0 auto 16px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(145deg,#452361,#261d3f); border:1px solid #77518f; color:#8ee8b5; box-shadow:0 10px 30px #9b1c7014, 0 0 0 0 #6fdc9d55; animation:done-pop .7s cubic-bezier(.3,1.6,.5,1) both, done-ring 1.6s .6s ease-out; }
.done-check .icon { width:44px; height:44px; stroke-width:1.8; }
.done-check .draw { stroke-dasharray:30; stroke-dashoffset:30; animation:tk-draw .6s .45s ease-out forwards; }
@keyframes done-pop { from { transform:scale(.4); opacity:0; } }
@keyframes done-ring { from { box-shadow:0 10px 30px #9b1c7014, 0 0 0 0 #6fdc9d66; } to { box-shadow:0 10px 30px #9b1c7014, 0 0 0 26px #6fdc9d00; } }
.done-number { display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:10px 22px; border-radius:16px; border:1px dashed #ff64aa88; background:#2b1a33; }
.done-number span { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#c9b9ed; }
.done-number strong { font-size:22px; letter-spacing:1px; color:#ff8fc8; font-variant-numeric:tabular-nums; }
.done-track { --progress:0%; position:relative; list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:22px 0 16px; padding:0; }
.done-track:before, .done-track:after { content:''; position:absolute; top:22px; left:calc(100% / 6); right:calc(100% / 6); height:3px; border-radius:3px; background:#2b2645; }
.done-track:after { right:auto; width:calc((100% - 100% / 3) * var(--progress) / 100%); background:linear-gradient(90deg,#6fdc9d,#ff4fa0); transition:width 1s .8s cubic-bezier(.2,.7,.2,1); }
.done-track li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; color:#8d84a6; }
.done-track i { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#1c1630; border:2px solid #3f3252; color:#8d84a6; transition:background .4s, border-color .4s, color .4s; }
.done-track i .icon { width:20px; height:20px; }
.done-track strong { font-size:12px; color:#c9bfd8; }
.done-track span { font-size:10px; line-height:1.3; color:#8d84a6; }
.done-track li.done i { background:#1c3a2c; border-color:#6fdc9d; color:#8ee8b5; }
.done-track li.done strong { color:#fff; }
.done-track li.now i { animation:done-pulse 1.6s 1s ease-in-out infinite; }
@keyframes done-pulse { 50% { box-shadow:0 0 0 8px #6fdc9d22; } }
.done-card { text-align:left; background:#1c1630; border:1px solid #3f3252; border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.done-card h2 { display:flex; align-items:center; gap:9px; font-size:14px; margin:0 0 10px; color:#fff; }
.done-card h2 .icon { width:18px; height:18px; color:#ff8fc8; flex-shrink:0; }
.done-card p { font-size:13px; line-height:1.55; color:#c9bfd8; margin:0; }
.done-card p strong { color:#fff; }
.done-line { display:flex; gap:8px; align-items:flex-start; margin-top:10px !important; padding-top:10px; border-top:1px solid #33294a; }
.done-line .icon { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:#9ec5ff; }
.done-items { list-style:none; margin:0; padding:0; }
.done-items li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #33294a; }
.done-items img { width:44px; height:58px; border-radius:8px; object-fit:cover; background:#2e2c32; flex-shrink:0; }
.done-items li > div { flex:1; min-width:0; }
.done-items strong { display:block; font-size:13px; color:#fff; }
.done-items span { font-size:11px; color:#a79bb7; }
.done-items b { font-size:13px; color:#ff8fc8; white-space:nowrap; }
.done-total { display:flex; justify-content:space-between; align-items:center; padding-top:10px; font-size:13px; color:#c9bfd8; }
.done-total strong { font-size:18px; color:#fff; }
.done-pay { background:linear-gradient(135deg,#2b1a33,#1c1630); border-color:#6b3a66; }
.shop-done .primary, .shop-done .secondary { margin-top:10px; }
.shop-done .primary { display:flex; align-items:center; justify-content:center; gap:8px; }
@media(prefers-reduced-motion:reduce) { .shop-done > *, .done-check, .done-check .draw, .done-track li.now i { animation:none !important; } .done-check .draw { stroke-dashoffset:0; } }
.order-list { list-style:none; margin:0 0 14px; padding:0; }
.order-list li { margin-bottom:10px; }
.order-open { display:block; width:100%; text-align:left; background:#1c1630; border:1px solid #3f3252; border-radius:14px; padding:14px; color:inherit; transition:border-color .2s, transform .2s; }
.order-open:hover { border-color:#ff64aa; }
.order-open:active { transform:scale(.985); }
.order-cta { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#ff8fc8; }
.order-cta .icon { width:14px; height:14px; transform:rotate(180deg); }
.shop-done-status .done-check { color:#ff8fc8; animation:done-pop .7s cubic-bezier(.3,1.6,.5,1) both; }
.shop-done-status .shop-back { display:flex; width:max-content; margin:0 auto 12px 0; }
.order-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.order-head strong { font-size:15px; color:#fff; }
.order-meta { display:block; font-size:12px; color:#a79bb7; line-height:1.5; margin-bottom:6px; }
.order-list b { display:block; color:#ff8fc8; margin-bottom:6px; }
.order-list .wa-link { margin:0; }
.order-status { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:4px 9px; border-radius:20px; background:#2b2645; color:#c9b9ed; white-space:nowrap; }
.order-status.s-acheminee { background:#1f2f4d; color:#9ec5ff; }
.order-status.s-payee { background:#1c3a2c; color:#8ee8b5; }

.shop-try { margin-top:10px; }
/* Cart: delivery address, account: orders */
.section-title { display:flex; align-items:center; gap:9px; font-size:15px; margin:4px 0 10px; color:#fff; text-align:left; }
.section-title .icon { width:18px; height:18px; color:#ff8fc8; }
.delivery-form { text-align:left; margin-bottom:14px; }
.delivery-form .field { margin-bottom:12px; }
.delivery-select { appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b9ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
.delivery-text { font:inherit; resize:vertical; min-height:88px; line-height:1.45; }
.delivery-form .message { margin:0 0 10px; }
.my-orders { text-align:left; margin-bottom:18px; }
/* Try-on overlay */
body.tryon-open { overflow:hidden; }
.tryon { position:fixed; inset:0; z-index:60; overflow:auto; background:#0b0917f5; color:#f7f5ff; padding:max(18px, env(safe-area-inset-top)) 18px 40px; animation:im-fade .3s; }
.tryon-close { position:absolute; right:12px; top:max(10px, env(safe-area-inset-top)); width:42px; height:42px; border:1px solid #3f3252; border-radius:50%; background:#1c1630; color:#fff; display:grid; place-items:center; z-index:2; }
.tryon-body { max-width:440px; margin:34px auto 0; text-align:center; }
.tryon-body h1 { font-size:28px; letter-spacing:-1px; margin:10px 0 12px; }
.tryon-lead { font-size:14px; line-height:1.6; color:#c9bfd8; margin:0 0 14px; }
.tryon-body .primary, .tryon-body .secondary, .tryon-pick { margin-top:10px; }
.tryon-pick { display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.tryon-frame { position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:#1c1630; border:1px solid #3f3252; }
/* Live camera keeps a 3:4 frame; photos (preview and result) keep their own proportions, never squashed or cropped. */
.tryon-frame video { width:100%; height:100%; object-fit:cover; display:block; }
.tryon-frame:has(img) { aspect-ratio:auto; }
.tryon-frame img { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; background:#0b0917; }
.tryon-frame video.mirror { transform:scaleX(-1); }
.tryon-tools { display:flex; gap:8px; align-items:center; margin-top:10px; }
.tryon-tools select { flex:1; min-height:44px; padding:6px 10px; border:1px solid #645171; border-radius:12px; background:#211a34; color:#efe7ff; }
.tryon-tools .tryon-flip { width:48px; min-height:44px; margin:0; padding:0; flex-shrink:0; }
.tryon-error { color:#ffadae; font-size:13px; line-height:1.5; margin:10px 0 0; }
.tryon-veil { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#0b0917b8; font-size:12px; color:#c9bfd8; }
.tryon-veil strong { font-size:16px; color:#fff; }
.tryon-veil .spinner { width:34px; height:34px; }
.tryon-result { box-shadow:0 20px 60px #ff2d8f33; }
.tryon-confetti { position:absolute; inset:0; pointer-events:none; }
.tryon-actions { display:flex; gap:10px; margin-top:12px; }
.tryon-actions .primary, .tryon-actions .secondary { flex:1; margin:0; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
/* Live video try-on (test): full-screen fitting room, AI video only, a shutter to take a photo of it */
.shop-try-live { border-style:dashed; }
.live-tryon { padding:0; background:#000; overflow:hidden; }
/* Restore the input proportions after the model resizes its return to landscape. */
.live-tryon .live-out { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:fill; object-position:center; background:#000; }
.live-top { position:absolute; left:0; right:0; top:0; display:flex; align-items:flex-start; justify-content:space-between; padding:max(14px, env(safe-area-inset-top)) 14px 0; background:linear-gradient(#0b0917cc, transparent); z-index:4; pointer-events:auto; }
.live-brand { padding:8px 12px; border-radius:12px; background:#0b0917b0; color:#fff; }
.live-brand span { display:block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#ff8fc8; }
.live-brand strong { display:block; font-size:13px; margin-top:2px; }
.live-tryon .tryon-close { position:static; }
/* The veil only dims the picture: it stays under the header and the controls so every button remains tappable. */
.live-tryon .live-veil { position:absolute; inset:0; z-index:1; pointer-events:none; }
.live-veil[hidden] { display:none; }
.live-bottom { position:absolute; left:0; right:0; bottom:0; z-index:4; pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 16px max(40px, calc(env(safe-area-inset-bottom) + 28px)); background:linear-gradient(transparent, #0b0917d9); }
.live-badge { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px; background:#0b0917cc; color:#fff; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#e0243f; animation:call-breathe 1.2s ease-in-out infinite; }
.live-controls { display:flex; justify-content:center; align-items:center; gap:26px; }
/* Main bar: last photo on the left, shutter in the middle, cross on the right, like a camera app. */
.live-controls.live-main { display:grid; grid-template-columns:1fr auto 1fr; gap:0; width:100%; max-width:340px; }
.live-controls.live-main > * { justify-self:center; }
.live-shutter { width:74px; height:74px; border-radius:50%; border:4px solid #fff; background:transparent; padding:4px; display:grid; }
.live-shutter span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:transform .12s; }
.live-shutter:active span { transform:scale(.85); }
.live-thumb { width:52px; height:52px; border-radius:12px; border:2px solid #fff; padding:0; background:#1c1630; overflow:hidden; }
.live-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.live-thumb[hidden] { display:none; }
.live-thumb.pop { animation:live-pop .35s ease-out; }
@keyframes live-pop { from { transform:scale(.4); opacity:0; } 60% { transform:scale(1.12); } to { transform:scale(1); opacity:1; } }
.live-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }
.live-flash.on { animation:live-flash .45s ease-out; }
@keyframes live-flash { from { opacity:.95; } to { opacity:0; } }
/* The photo, shown over the live video at the same size, with the save and share actions. */
.live-shot { position:absolute; inset:0; z-index:6; background:#000; }
.live-shot[hidden] { display:none; }
.live-shot-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.live-round { display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:transparent; color:#fff; font-size:11px; padding:0; text-decoration:none; }
.live-round .icon { width:24px; height:24px; }
.live-round > svg { box-sizing:content-box; padding:16px; border-radius:50%; background:#ffffff2a; border:1px solid #ffffff33; }
.live-note { font-size:11px; color:#c9bfd8; text-align:center; margin:0; max-width:340px; line-height:1.4; }