/* =====================================================================
   VAD SHOP LAYER — product page, quick add, cart drawer, Get the look.
   Extends the landing's own system (--vl-* tokens, .vl-btn, .vl-link,
   .vl-card, .vl-rail, .vl-drawer, data-rv reveals). Nothing here restyles
   the landing; it only adds the surfaces the landing routes into.
   ===================================================================== */

/* Prototype only: the snapshot captured the store's third-party newsletter
   popup (Perfit) mid-open; on the real store the app controls it. */
.p-layer,.p-close-layer{display:none!important;pointer-events:none!important;}
/* it still opens (invisibly) on first interaction and scroll-locks the page */
body.p-popup-open{overflow-y:visible!important;overflow-x:clip!important;}

/* ---- view switching ---- */
body.vl-route-view #vl-landing{display:none!important;}
#vl-views{min-height:70vh;background:var(--vl-bg);color:var(--vl-ink);font-family:var(--vl-body);}
#vl-views[hidden]{display:none!important;}
.vl-view{animation:vlViewIn .6s var(--vl-ease) both;}
@keyframes vlViewIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.vl-view{animation:none;}}
html.vl-js #vl-views [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--vl-ease),transform .9s var(--vl-ease);transition-delay:var(--rd,0s);}
html.vl-js #vl-views [data-rv].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html.vl-js #vl-views [data-rv]{opacity:1!important;transform:none!important;transition:none!important;}}

/* ---- breadcrumbs ---- */
.vl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:18px var(--vl-gut) 0;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-crumbs a{color:var(--vl-mute);text-decoration:none!important;padding:8px 0;transition:color .2s ease;}
.vl-crumbs a:hover{color:var(--vl-red);}
.vl-crumbs span[aria-current]{color:var(--vl-ink);}
.vl-crumbs i{font-style:normal;opacity:.5;}

/* =====================================================================
   PRODUCT PAGE
   ===================================================================== */
.vl-pdp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:clamp(28px,4vw,72px);align-items:start;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:18px var(--vl-gut) clamp(56px,6vw,96px);}

/* Gallery — editorial 2-up grid; the packshot opens full width */
.vl-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,.9vw,14px);}
.vl-gal-item{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:2/3;overflow:hidden;background:var(--vl-paper);border-radius:var(--vl-radius);cursor:zoom-in;}
.vl-gal-item.is-pack{grid-column:1/-1;aspect-ratio:4/3;}
.vl-gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--vl-ease),opacity .5s ease;}
.vl-gal-item.is-pack img{object-fit:contain;inset:6%;width:88%;height:88%;mix-blend-mode:multiply;}
.vl-gal-item:hover img{transform:scale(1.025);}
.vl-gal-item:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;}
.vl-gal-n{position:absolute;left:14px;bottom:12px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.14em;color:var(--vl-mute);}
.vl-gal-swap{animation:vlSwap .55s var(--vl-ease);}
@keyframes vlSwap{from{opacity:.25;}to{opacity:1;}}
.vl-gal-count{display:none;}
/* 3 photos or fewer: one large column so the gallery carries the page as far as the buy column */
.vl-gal.is-few{grid-template-columns:minmax(0,1fr);}
.vl-gal.is-few .vl-gal-item{aspect-ratio:4/5;}
.vl-gal.is-few .vl-gal-item.is-pack{aspect-ratio:4/3;}

/* Buy column */
.vl-buy{position:sticky;top:calc(var(--vl-stick,var(--vl-header-h,110px)) + 20px);display:flex;flex-direction:column;gap:22px;}
.vl-buy-top{display:flex;justify-content:space-between;gap:12px;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-buy-name{font-size:clamp(24px,2.5vw,36px);line-height:1.05;letter-spacing:.03em;}
.vl-buy-lead{margin:10px 0 0;font:400 13.5px/1.55 var(--vl-body);color:var(--vl-mute);max-width:48ch;}
.vl-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;}
.vl-price b{font:600 24px/1 var(--vl-body);letter-spacing:-.01em;}
.vl-price s{font:400 14px/1 var(--vl-body);color:var(--vl-mute);}
.vl-price em{font-style:normal;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.08em;background:var(--vl-red);color:#fff;padding:6px 8px;border-radius:3px;}
.vl-price-fee{display:block;margin-top:8px;font:400 12.5px/1.4 var(--vl-body);color:var(--vl-mute);}
.vl-price-fee strong{color:var(--vl-ink);font-weight:600;}

.vl-opt{border:0;margin:0;padding:0;min-width:0;}
.vl-opt+.vl-opt{margin-top:22px;}
.vl-opt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.vl-opt-head legend,.vl-opt-label{float:left;padding:0;font:400 11.5px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);}
.vl-opt-head legend b,.vl-opt-label b{color:var(--vl-ink);font-weight:400;margin-left:6px;}
.vl-opt-head .vl-link{font-size:11px;padding-bottom:4px;}

/* colour swatches */
.vl-sw{display:flex;flex-wrap:wrap;gap:10px;clear:both;}
.vl-sw-b{position:relative;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;}
.vl-sw-b span{position:absolute;inset:5px;border-radius:50%;background:var(--c,#999);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);}
.vl-sw-b:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid transparent;transition:border-color .2s ease,transform .3s var(--vl-ease);}
.vl-sw-b:hover:before{border-color:var(--vl-line);}
.vl-sw-b[aria-checked="true"]:before{border-color:var(--vl-ink);}
.vl-sw-b.is-out span:after{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1.5px;background:#fff;transform:rotate(45deg);box-shadow:0 0 0 .5px rgba(0,0,0,.25);}
.vl-sw-b:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}

/* size selector */
.vl-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;clear:both;}
.vl-size{position:relative;height:50px;border:1px solid var(--vl-line);background:#fff;color:var(--vl-ink);font:500 12.5px/1 var(--vl-body);letter-spacing:.04em;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease;}
.vl-size:hover{border-color:var(--vl-ink);}
.vl-size[aria-checked="true"]{background:var(--vl-ink);border-color:var(--vl-ink);color:#fff;}
.vl-size.is-out{color:rgba(29,29,31,.35);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.035) 6px 7px),#fff;cursor:not-allowed;}
.vl-size.is-out:hover{border-color:var(--vl-line);}
.vl-size.is-low:after{content:'';position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--vl-red);}
.vl-size[aria-checked="true"].is-low:after{background:#fff;}
.vl-size:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
.vl-sizes.is-shake{animation:vlShake .42s ease;}
@keyframes vlShake{20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}
@media (prefers-reduced-motion:reduce){.vl-sizes.is-shake{animation:none;}}
.vl-size-note{min-height:18px;margin:10px 0 0;font:400 12.5px/1.4 var(--vl-body);color:var(--vl-mute);}
.vl-size-note.is-err{color:var(--vl-red);}
.vl-size-note.is-low{color:var(--vl-red);}

/* dispatch / pre-order note surfaced from the description */
.vl-notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--vl-bg-2);border-left:2px solid var(--vl-red);font:400 13px/1.5 var(--vl-body);}
.vl-notice svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--vl-red);}

/* add to bag */
.vl-atc{display:flex;gap:10px;}
.vl-atc-btn{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;height:56px;padding:0 22px;border:1px solid var(--vl-red);background:var(--vl-red);color:#fff;font:400 12px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;overflow:hidden;transition:background-color .25s ease,border-color .25s ease;}
.vl-atc-btn:hover{background:var(--vl-red-dark);border-color:var(--vl-red-dark);}
.vl-atc-btn:focus-visible{outline:2px solid var(--vl-ink);outline-offset:3px;}
.vl-atc-btn .vl-atc-price{font:600 13px/1 var(--vl-body);letter-spacing:0;}
.vl-atc-btn[data-state="adding"],.vl-atc-btn[data-state="done"]{pointer-events:none;}
.vl-atc-btn[data-state="adding"] .vl-atc-t,.vl-atc-btn[data-state="adding"] .vl-atc-price{opacity:0;}
.vl-atc-btn[data-state="adding"]:after{content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:1.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:vlSpin .7s linear infinite;}
.vl-atc-btn[data-state="done"]{background:var(--vl-ink);border-color:var(--vl-ink);}
.vl-atc-btn.is-disabled{background:#fff;color:var(--vl-mute);border-color:var(--vl-line);cursor:not-allowed;}
@keyframes vlSpin{to{transform:rotate(360deg);}}

/* perks */
.vl-perks{list-style:none;margin:0;padding:0;border-top:1px solid var(--vl-line);}
.vl-perks li{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--vl-line);font:400 13px/1.4 var(--vl-body);}
.vl-perks svg{flex:none;width:20px;height:20px;color:var(--vl-ink);}
.vl-perks b{display:block;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;}
.vl-perks span{color:var(--vl-mute);}

/* Tabla de detalles — accordion */
.vl-acc{border-top:1px solid var(--vl-ink);}
.vl-acc-i{border-bottom:1px solid var(--vl-line);}
.vl-acc-h{margin:0;}
.vl-acc-b{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0;border:0;background:none;color:var(--vl-ink);text-align:left;cursor:pointer;font:400 12px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;}
.vl-acc-b small{font:inherit;color:var(--vl-mute);width:22px;}
.vl-acc-b i{margin-left:auto;position:relative;width:12px;height:12px;}
.vl-acc-b i:before,.vl-acc-b i:after{content:'';position:absolute;left:0;top:50%;width:12px;height:1px;background:currentColor;transition:transform .35s var(--vl-ease);}
.vl-acc-b i:after{transform:rotate(90deg);}
.vl-acc-b[aria-expanded="true"] i:after{transform:rotate(0);}
.vl-acc-b:hover{color:var(--vl-red);}
.vl-acc-b:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
.vl-acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--vl-ease);}
.vl-acc-b[aria-expanded="true"]+.vl-acc-p,.vl-acc-h:has([aria-expanded="true"])+.vl-acc-p{grid-template-rows:1fr;}
.vl-acc-p>div{overflow:hidden;}
.vl-acc-in{padding:4px 0 22px 36px;font:400 13.5px/1.6 var(--vl-body);}
.vl-acc-in p{margin:0 0 10px;}
.vl-dl{display:grid;grid-template-columns:minmax(96px,32%) 1fr;margin:0;}
.vl-dl dt,.vl-dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--vl-line);}
.vl-dl dt{font:400 10.5px/1.7 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-dl dd{font:400 13.5px/1.45 var(--vl-body);}
.vl-dl dt:nth-last-child(2),.vl-dl dd:last-child{border-bottom:0;}
.vl-chart{display:block;width:100%;padding:0;border:1px solid var(--vl-line);background:#fff;border-radius:8px;overflow:hidden;cursor:zoom-in;}
.vl-chart img{display:block;width:100%;height:auto;}
.vl-chart-cap{display:flex;justify-content:space-between;margin-top:10px;font:400 11px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--vl-mute);}
.vl-fit{margin-top:14px;padding:12px 14px;background:var(--vl-bg-2);font-size:13px;}

/* sections below the fold */
.vl-more{padding:clamp(40px,5vw,80px) 0 var(--vl-sec);border-top:1px solid var(--vl-line);}
.vl-more+.vl-more{border-top:0;padding-top:0;}
.vl-more .vl-sec-head{padding:0 var(--vl-gut);display:flex;justify-content:space-between;align-items:end;gap:20px;text-align:left;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin-left:auto;margin-right:auto;}
.vl-more .vl-sec-head .vl-link{margin-top:0;}
.vl-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);}
.vl-eyebrow:before{content:'';width:22px;height:1px;background:var(--vl-red);}
.vl-more .vl-rail-track{gap:clamp(16px,1.8vw,28px);padding:12px max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2)) 6px;scroll-padding-inline:max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2));}
#vl-new .vl-rail-track{scroll-padding-inline:max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2));}
.vl-more .vl-rail-track .vl-card{flex:none;width:clamp(200px,20vw,290px);scroll-snap-align:start;}

/* Look strip on the PDP: the look photo + its items, one click to the look */
.vl-pdp-look{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);align-items:center;max-width:var(--vl-max);margin:0 auto;padding:0 var(--vl-gut);}
.vl-pdp-look-pic{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--vl-radius);overflow:hidden;background:var(--vl-paper);}
.vl-pdp-look-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--vl-ease);}
.vl-pdp-look-pic:hover img{transform:scale(1.03);}
.vl-pdp-look-body .vl-display{font-size:clamp(22px,2.4vw,34px);margin-bottom:10px;}
.vl-pdp-look-body p{margin:0 0 22px;color:var(--vl-mute);font-size:13.5px;line-height:1.6;max-width:44ch;}
.vl-pdp-look-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);margin-bottom:26px;}

/* Quick add chip on every product card (sits over the photo; the card
   meta below it is a fixed 70px, see .vl-card-meta) */
.vl-card-wrap{position:relative;min-width:0;}
.vl-rail-track>.vl-card-wrap{flex:none;scroll-snap-align:start;}
.vl-qa{position:absolute;right:12px;bottom:82px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:0;height:40px;min-width:40px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--vl-ink);font:400 10.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 18px -10px rgba(0,0,0,.35);transition:background-color .25s ease,color .25s ease,opacity .3s ease,transform .45s var(--vl-ease);}
.vl-qa svg{width:16px;height:16px;flex:none;}
.vl-qa span{max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--vl-ease),margin-left .45s var(--vl-ease);}
.vl-qa:hover{background:var(--vl-ink);color:#fff;}
.vl-qa:hover span,.vl-qa:focus-visible span{max-width:120px;margin-left:8px;}
.vl-qa:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .vl-qa{opacity:0;transform:translateY(8px);}
  .vl-card-wrap:hover .vl-qa,.vl-qa:focus-visible{opacity:1;transform:none;}
}
.vl-qa.is-soldout{display:none;}

/* =====================================================================
   PANELS — quick add, cart, zoom. Built on the landing's .vl-drawer so
   every side panel slides, dims and closes the same way.
   ===================================================================== */
.vl-panel-bg{position:fixed;inset:0;z-index:10000;background:rgba(23,21,15,.45);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.vl-panel-bg.is-on{opacity:1;pointer-events:auto;}
.vl-side{position:fixed;top:0;right:0;bottom:0;z-index:10001;width:min(480px,100vw);display:flex;flex-direction:column;background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.18);transform:translateX(102%);transition:transform .5s var(--vl-ease);visibility:hidden;}
.vl-side.is-on{transform:none;visibility:visible;}
.vl-side-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--vl-line);}
.vl-side-head .vl-display{font-size:15px;}
.vl-side-head .vl-display small{font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;color:var(--vl-mute);margin-left:8px;}
.vl-side-body{flex:1;overflow-y:auto;overscroll-behavior:contain;}
.vl-side-foot{border-top:1px solid var(--vl-line);padding:18px 20px calc(18px + env(safe-area-inset-bottom));display:grid;gap:12px;background:#fff;}
@media (max-width:640px){
  .vl-side{top:auto;left:0;width:100%;max-height:88svh;border-radius:16px 16px 0 0;transform:translateY(102%);}
  .vl-side.is-on{transform:none;}
  .vl-side-head:before{content:'';position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(0,0,0,.15);}
  .vl-side-head{position:relative;padding-top:20px;}
}

/* quick add panel content */
.vl-qv{padding:20px;display:grid;gap:20px;}
.vl-qv-top{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;}
.vl-qv-pic{aspect-ratio:2/3;background:var(--vl-paper);border-radius:10px;overflow:hidden;position:relative;}
.vl-qv-pic img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;}
.vl-qv-name{font:500 14px/1.25 var(--vl-display);text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px;}
.vl-qv .vl-price b{font-size:18px;}
.vl-qv .vl-link{margin-top:14px;}
.vl-qv-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:14px 0 0;font-size:12.5px;line-height:1.4;}
.vl-qv-dl dt{font:400 10px/1.6 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-qv-dl dd{margin:0;}
.vl-qv-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--vl-ink);}
.vl-qv-note svg{flex:none;width:15px;height:15px;color:var(--vl-red);margin-top:1px;}

/* header bag count reacts to an add */
.js-cart-widget-amount.vl-bump{animation:vlBump .6s var(--vl-ease);}
/* scale, not transform: the landing pins the badge with transform:none!important */
@keyframes vlBump{0%{scale:1;}35%{scale:1.55;}100%{scale:1;}}

/* cart */
.vl-cart-empty{display:grid;place-items:center;text-align:center;gap:16px;padding:64px 28px;}
.vl-cart-empty .vl-display{font-size:18px;}
.vl-cart-empty p{margin:0;color:var(--vl-mute);font-size:13.5px;}
.vl-line{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:18px 20px;border-bottom:1px solid var(--vl-line);transition:background-color .8s ease;}
.vl-line.is-new{background:rgba(168,82,46,.07);}
.vl-line-pic{position:relative;display:block;aspect-ratio:2/3;background:var(--vl-paper);border-radius:8px;overflow:hidden;}
.vl-line-pic img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;}
.vl-line-top{display:flex;justify-content:space-between;gap:10px;}
.vl-line-name{font:600 11.5px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);text-decoration:none!important;}
.vl-line-name:hover{color:var(--vl-red);}
.vl-line-price{font:600 13px/1.35 var(--vl-body);white-space:nowrap;text-align:right;}
.vl-line-price s{display:block;font-weight:400;font-size:11.5px;color:var(--vl-mute);}
.vl-line-var{margin-top:6px;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute);}
.vl-line-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.vl-qty{display:inline-flex;align-items:center;border:1px solid var(--vl-line);height:36px;}
.vl-qty button{width:36px;height:34px;border:0;background:none;cursor:pointer;color:var(--vl-ink);font:400 16px/1 var(--vl-body);}
.vl-qty button:hover{color:var(--vl-red);}
.vl-qty button:disabled{color:rgba(0,0,0,.2);cursor:not-allowed;}
.vl-qty output{min-width:28px;text-align:center;font:500 13px/1 var(--vl-body);}
.vl-line-rm{border:0;background:none;padding:6px 0;cursor:pointer;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);text-decoration:underline;text-underline-offset:4px;}
.vl-line-rm:hover{color:var(--vl-red);}
.vl-sum{display:flex;justify-content:space-between;align-items:baseline;font:400 12px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;}
.vl-sum b{font:600 20px/1 var(--vl-body);letter-spacing:0;}
.vl-sum-note{margin:-4px 0 2px;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute);}
.vl-save{color:var(--vl-red);}
.vl-cart-foot .vl-btn{width:100%;height:52px;}
.vl-cart-foot .vl-link{justify-self:center;}
.vl-cart-upsell{padding:20px;border-bottom:1px solid var(--vl-line);background:var(--vl-bg-2);}
.vl-cart-upsell .vl-eyebrow{margin-bottom:12px;}
.vl-cart-upsell .vl-mini{background:#fff;padding:10px;border-radius:8px;border:0;margin-bottom:8px;}

/* toast (screen-reader live region doubles as the visual confirmation) */
.vl-toast{position:fixed;left:50%;bottom:24px;z-index:10002;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--vl-ink);color:#fff;padding:14px 20px;font:400 11.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;transition:opacity .3s ease,transform .45s var(--vl-ease);}
.vl-toast.is-on{opacity:1;transform:translate(-50%,0);}

/* zoom lightbox */
.vl-zoom{position:fixed;inset:0;z-index:10003;background:#fff;display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.vl-zoom.is-on{opacity:1;pointer-events:auto;}
.vl-zoom-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;color:var(--vl-mute);}
.vl-zoom-track{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;}
.vl-zoom-track::-webkit-scrollbar{display:none;}
.vl-zoom-slide{flex:none;box-sizing:border-box;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:0 clamp(12px,6vw,96px) 24px;}
.vl-zoom-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
.vl-zoom-nav{position:absolute;z-index:2;top:50%;width:48px;height:48px;margin-top:-24px;border:1px solid var(--vl-ink);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.vl-zoom-nav svg{width:22px;height:22px;}
.vl-zoom-nav.is-prev{left:20px;}.vl-zoom-nav.is-next{right:20px;}
.vl-zoom-nav:hover{background:var(--vl-ink);color:#fff;}
.vl-zoom-nav.is-off{opacity:.25;pointer-events:none;}
@media (max-width:767px){.vl-zoom-nav{display:none;}}

/* sticky add-to-bag bar (mobile, once the main button scrolls away) */
.vl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;align-items:center;gap:12px;padding:10px var(--vl-gut) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--vl-line);transform:translateY(110%);transition:transform .45s var(--vl-ease);}
.vl-sticky.is-on{transform:none;}
.vl-sticky-meta{flex:1;min-width:0;}
.vl-sticky-meta b{display:block;font:600 11px/1.3 var(--vl-body);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vl-sticky-meta span{font:400 12.5px/1.3 var(--vl-body);color:var(--vl-mute);}
.vl-sticky .vl-btn{height:46px;flex:none;}
@media (min-width:1000px){.vl-sticky{display:none;}}

/* close button shared by all panels */
.vl-x{width:42px;height:42px;flex:none;border:1px solid var(--vl-line);border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--vl-ink);transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.vl-x:hover{background:var(--vl-ink);color:#fff;border-color:var(--vl-ink);}
.vl-x svg{width:18px;height:18px;}
.vl-x:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}

/* landing look drawer: a way into the full look */
.vl-drawer .vl-look-cta{display:flex;width:100%;margin-top:18px;height:50px;}
.vl-look-items .vl-look-cta{display:none;}
.vl-drawer .vl-look-items .vl-look-cta,.vl-drawer [data-vl-drawer-items] .vl-look-cta{display:flex;}

/* =====================================================================
   GET THE LOOK
   ===================================================================== */
/* cinematic opening: full-bleed campaign photo, title set on it */
.vl-gtl-hero{position:relative;min-height:clamp(440px,68vh,680px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#111;color:var(--vl-onphoto);}
.vl-gtl-hero-bg{position:absolute;inset:-6% 0;z-index:0;will-change:transform;transform:scale(1.06);}
.vl-gtl-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:contrast(1.05) saturate(.92);}
@media (max-width:999px){.vl-gtl-hero-bg img{object-position:50% 38%;}}
.vl-gtl-hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 60%);}
.vl-gtl-hero>:not(.vl-gtl-hero-bg){position:relative;z-index:2;}
.vl-crumbs.is-onphoto{max-width:none;margin:0;color:var(--vl-onphoto-mute);}
.vl-crumbs.is-onphoto a{color:var(--vl-onphoto-mute);}
.vl-crumbs.is-onphoto a:hover{color:#fff;}
.vl-crumbs.is-onphoto span[aria-current]{color:#fff;}
.vl-gtl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:0 var(--vl-gut) clamp(28px,4vw,56px);}
.vl-gtl-hero .vl-eyebrow{color:var(--vl-onphoto-mute);}
.vl-gtl-hero .vl-display{font-size:clamp(44px,8vw,120px);line-height:.9;letter-spacing:.01em;color:#fff;}
.vl-gtl-hero .vl-display span{display:block;}
html.vl-js .vl-gtl-hero .vl-display span{overflow:hidden;}
html.vl-js .vl-gtl-hero .vl-display span>i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.1s var(--vl-ease) .15s;}
html.vl-js .vl-gtl-hero-in.is-in .vl-display span>i{transform:none;}
html.vl-js .vl-gtl-hero .vl-display span:nth-child(2)>i{transition-delay:.25s;}
@media (prefers-reduced-motion:reduce){html.vl-js .vl-gtl-hero .vl-display span>i{transform:none!important;transition:none!important;}}
.vl-gtl-hero p{margin:18px 0 0;max-width:46ch;color:var(--vl-onphoto-mute);font-size:14px;line-height:1.6;}
.vl-gtl-steps{list-style:none;margin:0;padding:18px 20px;display:grid;gap:12px;font:400 11px/1.4 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:#fff;counter-reset:st;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.vl-gtl-steps li{display:flex;gap:12px;align-items:center;counter-increment:st;}
.vl-gtl-steps li:before{content:counter(st,decimal-leading-zero);color:var(--vl-onphoto-mute);}

/* sticky look index */
.vl-gtl-index{position:sticky;top:var(--vl-stick,var(--vl-header-h,110px));transition:top .2s ease;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--vl-line);border-bottom:1px solid var(--vl-line);}
.vl-gtl-index-in{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:8px var(--vl-gut);}
.vl-gtl-index-in::-webkit-scrollbar{display:none;}
.vl-gtl-index a{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 4px;border-radius:999px;color:var(--vl-mute);text-decoration:none!important;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;transition:background-color .25s ease,color .25s ease;}
.vl-gtl-index a img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 15%;filter:grayscale(.6);transition:filter .3s ease;}
.vl-gtl-index a:hover{color:var(--vl-ink);}
.vl-gtl-index a.is-on{background:var(--vl-ink);color:#fff;}
.vl-gtl-index a.is-on img{filter:none;}
.vl-gtl-index a:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}

/* one look */
.vl-lk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,64px);align-items:start;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:clamp(28px,3vw,48px) var(--vl-gut);scroll-margin-top:calc(var(--vl-header-h,110px) + 60px);}
.vl-lk+.vl-lk{border-top:1px solid var(--vl-line);}
.vl-lk:nth-child(even) .vl-lk-media{order:2;}
.vl-lk-media{position:sticky;top:calc(var(--vl-stick,var(--vl-header-h,110px)) + 80px);display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:10px;}
.vl-lk-main{position:relative;height:clamp(360px,calc(100vh - var(--vl-stick,110px) - 150px),680px);border-radius:var(--vl-radius);overflow:hidden;background:var(--vl-paper);}
.vl-lk-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:opacity .5s ease,transform 1.6s var(--vl-ease);}
.vl-lk-main:hover img{transform:scale(1.02);}
.vl-lk-n{position:absolute;left:18px;top:16px;z-index:2;font:400 11px/1 var(--vl-tiny);letter-spacing:.16em;color:var(--vl-ink);background:rgba(255,255,255,.88);padding:9px 12px;border-radius:999px;backdrop-filter:blur(10px);}
.vl-lk-thumbs{display:grid;grid-template-columns:64px;grid-auto-rows:80px;align-content:start;gap:8px;}
.vl-lk-thumb{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--vl-paper);cursor:pointer;opacity:.55;transition:opacity .25s ease;}
.vl-lk-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.vl-lk-thumb:hover,.vl-lk-thumb[aria-pressed="true"]{opacity:1;}
.vl-lk-thumb[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--vl-ink);}
.vl-lk-thumb:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}

.vl-lk-body .vl-eyebrow{margin-bottom:10px;}
.vl-lk-title{font-size:clamp(22px,2.3vw,34px);line-height:1;letter-spacing:.02em;margin-bottom:10px;}
.vl-lk-sub{margin:0 0 16px;color:var(--vl-mute);font-size:13.5px;line-height:1.6;max-width:46ch;}
.vl-lk-items{border-top:1px solid var(--vl-ink);}
.vl-li{display:grid;grid-template-columns:24px 64px minmax(0,1fr);gap:10px 14px;padding:12px 0;border-bottom:1px solid var(--vl-line);transition:opacity .3s ease,background-color .5s ease;}
.vl-li.is-off .vl-li-pic,.vl-li.is-off .vl-li-main{opacity:.42;}
.vl-li.is-err{background:linear-gradient(90deg,rgba(168,82,46,.07),rgba(168,82,46,0));}
.vl-li-check{position:relative;width:22px;height:22px;margin-top:2px;border:1px solid var(--vl-ink);background:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .2s ease;}
.vl-li-check[aria-checked="true"]{background:var(--vl-ink);}
.vl-li-check svg{width:14px;height:14px;opacity:0;}
.vl-li-check[aria-checked="true"] svg{opacity:1;}
.vl-li-check:disabled{border-color:var(--vl-line);cursor:not-allowed;}
.vl-li-check:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
.vl-li-pic{position:relative;display:block;aspect-ratio:2/3;background:var(--vl-paper);border-radius:8px;overflow:hidden;transition:opacity .3s ease;}
.vl-li-pic img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;}
.vl-li-main{min-width:0;transition:opacity .3s ease;}
.vl-li-top{display:flex;justify-content:space-between;gap:12px;align-items:start;}
.vl-li-name{font:600 11.5px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);text-decoration:none!important;}
.vl-li-name:hover{color:var(--vl-red);}
.vl-li-price{text-align:right;white-space:nowrap;font:600 13px/1.3 var(--vl-body);}
.vl-li-price s{display:block;font-weight:400;font-size:11px;color:var(--vl-mute);}
.vl-li .vl-sw{margin:0;gap:4px;}
.vl-li .vl-opt{margin-top:8px;}
.vl-li .vl-opt+.vl-opt{margin-top:8px;}
.vl-li .vl-opt-head{margin-bottom:6px;}
.vl-li .vl-size-note{min-height:0;margin-top:4px;font-size:11.5px;}
.vl-li .vl-size-note:empty{display:none;}
.vl-li .vl-sw-b{width:26px;height:26px;}
.vl-li .vl-sw-b span{inset:3px;}
.vl-li .vl-sizes{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:5px;}
.vl-li .vl-size{height:32px;font-size:11.5px;}
.vl-li-msg{min-height:16px;margin:8px 0 0;font:400 12px/1.35 var(--vl-body);color:var(--vl-mute);}
.vl-li-msg.is-err{color:var(--vl-red);}
.vl-li-actions{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.vl-li-actions .vl-link{font-size:10.5px;padding-bottom:3px;}
.vl-li-add{border:0;background:none;padding:6px 0;cursor:pointer;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink);text-decoration:underline;text-underline-offset:4px;}
.vl-li-add:hover{color:var(--vl-red);}

.vl-lk-foot{display:grid;gap:10px;margin-top:14px;}
.vl-lk-total{display:flex;justify-content:space-between;align-items:baseline;font:400 11.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-lk-total b{font:600 22px/1 var(--vl-body);letter-spacing:0;color:var(--vl-ink);}
.vl-lk-total s{font:400 13px/1 var(--vl-body);margin-right:10px;}
.vl-lk-err{min-height:18px;margin:0;font:400 12.5px/1.4 var(--vl-body);color:var(--vl-red);}
.vl-lk-err:empty{display:none;}
/* laptop screens: a whole look (photo, pieces, total, button) still fits one screen */
@media (min-width:1000px) and (max-height:860px){
  .vl-lk{padding-top:24px;padding-bottom:24px;}
  .vl-lk-sub{display:none;}
  .vl-lk-title{font-size:clamp(20px,1.9vw,28px);}
  .vl-li{padding:10px 0;}
}

.vl-gtl-end{text-align:center;padding:clamp(48px,6vw,96px) var(--vl-gut) var(--vl-sec);border-top:1px solid var(--vl-line);}
.vl-gtl-end .vl-display{font-size:clamp(22px,2.6vw,36px);margin-bottom:22px;}
.vl-gtl-end div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ---- responsive ---- */
@media (max-width:999px){
  .vl-pdp{grid-template-columns:minmax(0,1fr);padding-top:10px;gap:28px;}
  .vl-buy{position:static;}
  /* gallery becomes a full-bleed swipe track with a counter */
  .vl-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;margin:0 calc(var(--vl-gut) * -1);padding:0 var(--vl-gut);scrollbar-width:none;}
  .vl-gal::-webkit-scrollbar{display:none;}
  .vl-gal-item,.vl-gal-item.is-pack{flex:none;width:86%;aspect-ratio:2/3;scroll-snap-align:center;}
  .vl-gal-wrap{position:relative;}
  .vl-gal-count{display:block;position:absolute;right:calc(var(--vl-gut) + 8px);bottom:12px;z-index:2;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;background:rgba(255,255,255,.88);padding:8px 10px;border-radius:999px;}
  .vl-gal-n{display:none;}
  .vl-pdp-look{grid-template-columns:minmax(0,1fr);}
  .vl-lk{grid-template-columns:minmax(0,1fr);}
  .vl-lk:nth-child(even) .vl-lk-media{order:0;}
  .vl-lk-media{position:relative;top:0;grid-template-columns:minmax(0,1fr);}
  .vl-lk-main{height:auto;aspect-ratio:4/5;}
  .vl-lk-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;}
  .vl-lk-thumb{aspect-ratio:1;height:auto;}
  .vl-gtl-hero-in{grid-template-columns:minmax(0,1fr);}
  .vl-gtl-steps{display:none;}
}
@media (max-width:640px){
  .vl-li{grid-template-columns:22px 56px minmax(0,1fr);gap:10px;}
  .vl-more .vl-sec-head{flex-direction:column;align-items:flex-start;}
  .vl-pdp-look-items{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =====================================================================
   NAVIGATION — the whole menu on one screen (desktop columns / mobile
   chips). The theme's own list stays in the DOM, hidden, as the source.
   ===================================================================== */
.modal-nav-hamburger.vl-has-nav .nav-primary,.modal-nav-hamburger.vl-has-nav .hamburger-footer{display:none!important;}
/* width:100% — the theme lays .nav-body out as a flex row */
.vl-nav{width:100%;min-width:0;flex:1 1 auto;display:grid;grid-template-columns:minmax(150px,1fr) minmax(300px,1.7fr) minmax(150px,1fr) minmax(140px,.85fr) minmax(170px,210px);gap:clamp(24px,3vw,56px);align-items:start;max-width:var(--vl-max);margin:0 auto;}
.vl-nav-h{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding-bottom:14px;border-bottom:1px solid var(--vl-line);font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);}
.vl-nav-h small{font:inherit;color:var(--vl-red);}
.vl-nav-list{list-style:none;margin:0;padding:0;}
.vl-nav-a{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:6px 0;font:400 14px/1.3 var(--vl-body);color:var(--vl-ink)!important;text-decoration:none!important;transition:color .2s ease,transform .35s var(--vl-ease);}
.vl-nav-a:hover{color:var(--vl-red)!important;transform:translateX(3px);}
.vl-nav-a:focus-visible,.vl-nav-sub:focus-visible,.vl-nav-tile:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;}
.vl-nav-a em{font-style:normal;font-size:12px;color:var(--vl-mute);}
.vl-nav-subs{display:flex;flex-wrap:wrap;gap:0 12px;margin:-3px 0 5px;}
.vl-nav-sub{padding:3px 0;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute)!important;text-decoration:none!important;transition:color .2s ease;}
.vl-nav-sub:hover{color:var(--vl-red)!important;}
.vl-nav-2up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
.vl-nav-new{font:400 9.5px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;background:var(--vl-red);color:#fff;padding:4px 6px;border-radius:3px;align-self:center;}
.vl-nav-list.is-big .vl-nav-a{padding:8px 0;font:500 17px/1.2 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;}
.vl-nav-list.is-big .vl-nav-a em{flex-basis:100%;font:400 11px/1.2 var(--vl-tiny);letter-spacing:.1em;color:var(--vl-red);}
.vl-nav-a.vl-nav-all{margin-top:6px;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-red)!important;}
.vl-nav-account{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--vl-line);}
.vl-nav-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--vl-radius);overflow:hidden;text-decoration:none!important;background:#111;}
.vl-nav-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1s var(--vl-ease);}
.vl-nav-tile:hover img{transform:scale(1.05);}
.vl-nav-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7) 100%);}
.vl-nav-tile span{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff;font:500 18px/1.1 var(--vl-display);text-transform:uppercase;letter-spacing:.03em;}
.vl-nav-tile small{display:block;margin-bottom:6px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.14em;color:var(--vl-onphoto-mute);}
@media (min-width:900px){
  .modal-nav-hamburger.vl-has-nav .nav-body{padding:36px var(--vl-gut) 40px!important;}
}
/* between 900 and 1180 the photo tile gives its room to the lists */
@media (min-width:900px) and (max-width:1180px){
  .vl-nav{grid-template-columns:minmax(140px,1fr) minmax(280px,1.7fr) minmax(140px,1fr) minmax(130px,.85fr);}
  .vl-nav-tile{display:none;}
}
/* mobile: highlights first, garments as chips, cápsulas as one swipe row */
@media (max-width:899px){
  .modal-nav-hamburger.vl-has-nav .nav-body{padding:14px var(--vl-gut) 28px!important;}
  .vl-nav{display:flex;flex-direction:column;align-items:stretch;gap:20px;}
  .vl-nav-tile{order:-2;aspect-ratio:auto;height:118px;}
  .vl-nav-tile img{object-position:50% 30%;}
  .vl-nav-tile span{font-size:17px;left:14px;bottom:12px;}
  .vl-nav-c:nth-of-type(3){order:-1;}
  .vl-nav-h{margin-bottom:10px;padding-bottom:10px;}
  .vl-nav-h small{display:none;} /* sections are reordered here, so the 01-04 index would read out of order */
  .vl-nav-list.is-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .vl-nav-list.is-big li{min-width:0;}
  .vl-nav-list.is-big .vl-nav-a em{font-size:9.5px;}
  .vl-nav-list.is-big .vl-nav-a{display:flex;width:100%;min-height:52px;align-content:center;padding:10px 12px;border:1px solid var(--vl-line);font-size:13px;}
  .vl-nav-list.is-big .vl-nav-a:hover{transform:none;border-color:var(--vl-ink);}
  .vl-nav-c:nth-of-type(1) .vl-nav-list,.vl-nav-2up{display:flex;flex-wrap:wrap;gap:8px;}
  .vl-nav-2up{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--vl-gut) * -1);padding:0 var(--vl-gut);}
  .vl-nav-2up::-webkit-scrollbar{display:none;}
  .vl-nav-2up li{flex:none;}
  .vl-nav-c:nth-of-type(1) .vl-nav-a,.vl-nav-2up .vl-nav-a{align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--vl-line);border-radius:999px;font-size:13px;white-space:nowrap;}
  .vl-nav-c:nth-of-type(1) .vl-nav-a:hover,.vl-nav-2up .vl-nav-a:hover{transform:none;border-color:var(--vl-ink);}
  .vl-nav-2up .vl-nav-a em,.vl-nav-subs{display:none;}
  .vl-nav-a.vl-nav-all{border-color:transparent!important;padding:0 6px!important;}
  .vl-nav-c:nth-of-type(4) .vl-nav-list{display:flex;flex-wrap:wrap;gap:0 18px;}
  .vl-nav-c:nth-of-type(4) .vl-nav-a{font-size:13px;}
  .vl-nav-account{margin-top:8px;padding-top:10px;}
}
/* short phones: slimmer tile and rows so the menu still fits one screen */
@media (max-width:899px) and (max-height:720px){
  .vl-nav{gap:14px;}
  .vl-nav-tile{display:none;} /* Get the look is already in Destacado */
  .vl-nav-list.is-big .vl-nav-a{min-height:44px;padding:8px 12px;}
  .vl-nav-c:nth-of-type(1) .vl-nav-a,.vl-nav-2up .vl-nav-a{min-height:36px;}
}

/* =====================================================================
   CATEGORY
   ===================================================================== */
.vl-cat-head{max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:0 var(--vl-gut);}
.vl-cat-head .vl-crumbs{padding-left:0;padding-right:0;}
.vl-cat-title{padding:clamp(24px,3.5vw,52px) 0 clamp(18px,2vw,28px);}
.vl-cat-title .vl-display{font-size:clamp(34px,5.6vw,84px);line-height:.95;letter-spacing:.01em;}
.vl-cat-sub{margin:14px 0 0;font:400 12px/1.4 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-red);}
.vl-cat-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:22px;margin:0 calc(var(--vl-gut) * -1);padding-left:var(--vl-gut);padding-right:var(--vl-gut);}
.vl-cat-chips::-webkit-scrollbar{display:none;}
.vl-cat-chips a{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--vl-line);border-radius:999px;color:var(--vl-ink);text-decoration:none!important;font:400 13px/1 var(--vl-body);transition:border-color .2s ease,background-color .2s ease,color .2s ease;}
.vl-cat-chips a small{font:400 10.5px/1 var(--vl-tiny);letter-spacing:.08em;color:var(--vl-mute);}
.vl-cat-chips a:hover{border-color:var(--vl-ink);}
.vl-cat-chips a[aria-current]{background:var(--vl-ink);border-color:var(--vl-ink);color:#fff;}
.vl-cat-chips a[aria-current] small{color:rgba(255,255,255,.7);}
.vl-cat-chips a:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}

/* toolbar docks under the header while browsing */
.vl-cat-bar{position:sticky;top:var(--vl-stick,var(--vl-header-h,110px));z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--vl-line);border-bottom:1px solid var(--vl-line);}
.vl-cat-bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:10px var(--vl-gut);}
.vl-cat-filters{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;}
.vl-cat-filters::-webkit-scrollbar{display:none;}
.vl-cat-lab{flex:none;margin-right:6px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);}
.vl-chip{flex:none;height:36px;min-width:40px;padding:0 12px;border:1px solid var(--vl-line);background:#fff;color:var(--vl-ink);font:500 12px/1 var(--vl-body);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease;}
.vl-chip:hover{border-color:var(--vl-ink);}
.vl-chip[aria-pressed="true"]{background:var(--vl-ink);border-color:var(--vl-ink);color:#fff;}
.vl-chip.is-toggle{margin-left:10px;border-radius:999px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;padding:0 14px;}
.vl-chip:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
.vl-cat-sort{flex:none;display:flex;align-items:center;}
.vl-cat-sort select{height:36px;padding:0 30px 0 10px;border:1px solid var(--vl-line);border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 8px center/14px no-repeat;-webkit-appearance:none;appearance:none;font:400 12.5px/1 var(--vl-body);color:var(--vl-ink);cursor:pointer;}
.vl-cat-sort select:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;}
.vl-cat-count{max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:16px var(--vl-gut) 0;min-height:16px;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.2vw,48px) clamp(16px,1.8vw,28px);max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding:clamp(20px,2.4vw,36px) var(--vl-gut) 0;}
.vl-cat-more{display:grid;justify-items:center;gap:14px;padding:clamp(40px,5vw,72px) var(--vl-gut) var(--vl-sec);}
.vl-cat-more[hidden]{display:none;}
.vl-cat-prog{width:min(240px,60vw);height:1px;background:var(--vl-line);position:relative;overflow:hidden;}
.vl-cat-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--vl-ink);transition:width .5s var(--vl-ease);}
.vl-cat-more p{margin:0;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}
.vl-cat-more .vl-btn[hidden]{display:none;}
.vl-cat-none{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--vl-mute);font-size:14px;}
.vl-cat-none .vl-link{margin-left:10px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;}
.vl-cat-empty{max-width:640px;margin:0 auto;padding:clamp(40px,6vw,96px) var(--vl-gut);text-align:center;border-top:1px solid var(--vl-line);}
.vl-cat-empty .vl-display{font-size:clamp(28px,4vw,52px);margin-bottom:16px;}
.vl-cat-empty p:not(.vl-display){margin:0 0 26px;color:var(--vl-mute);font-size:14px;line-height:1.6;}
.vl-cat-empty div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* products without a white packshot: the photo fills the card instead of floating on grey */
.vl-card.is-photo .vl-card-img,.vl-card .vl-card-img.is-full,.is-photo>img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;mix-blend-mode:normal!important;}
/* sold-out cards stay visible (the store lists them) but read as unavailable.
   Only the front image fades: the hover image must stay hidden until hover. */
.vl-card.is-soldout .vl-card-img{filter:grayscale(1);}
.vl-card.is-soldout .vl-card-img-a{opacity:.55;}
.vl-card.is-soldout:hover .vl-card-img-a{opacity:0;}
.vl-card-tag.is-out{background:var(--vl-ink);}
.vl-cat .vl-sec-foot,.vl-cat .vl-more{border-top:0;}
@media (max-width:900px){
  .vl-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;}
    .vl-cat-bar-in{gap:10px;}
  .vl-cat-sort .vl-cat-lab,.vl-cat-filters .vl-cat-lab{display:none;}
}
/* phones: the filter row scrolls sideways — lead with "Solo disponibles"
   (it was pushed off-screen behind the sizes) and fade the right edge so the
   row reads as swipeable */
@media (max-width:640px){
  .vl-chip.is-toggle{order:-1;margin-left:0;margin-right:4px;}
  .vl-cat-filters{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);}
  /* two rows: next to the sort menu the chips only had room for one size */
  .vl-cat-bar-in{flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:8px;}
  .vl-cat-filters{flex:1 1 100%;}
  .vl-cat-sort{flex:1 1 100%;}
  .vl-cat-sort select{width:100%;height:34px;}
}

/* =====================================================================
   Platform-only pieces of the shop layer (the prototype does not need them):
   the store's own cart drawer in the v2-refined look, and category pages
   split across the store's pagination.
   ===================================================================== */

/* category: store pagination under the grid */
.vl-cat-pages{display:flex;align-items:center;justify-content:center;gap:18px;margin:40px auto 0;font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);}

/* cart drawer (#modal-cart): same surface as the quick-add panel */
.vl-skin #modal-cart{font-family:var(--vl-body);color:var(--vl-ink);}
.vl-skin #modal-cart .modal-header{border-bottom:1px solid var(--vl-line);padding:22px 24px;}
.vl-skin #modal-cart .modal-header,.vl-skin #modal-cart .modal-header *{font-family:var(--vl-display);font-weight:700;letter-spacing:-.01em;text-transform:none;}
.vl-skin #modal-cart .cart-item{border-bottom:1px solid var(--vl-line);padding:18px 0;}
.vl-skin #modal-cart .cart-item-image,.vl-skin #modal-cart .cart-item img{border-radius:0!important;background:var(--vl-bg-2);}
.vl-skin #modal-cart .cart-item-name,.vl-skin #modal-cart .cart-item-name a{font-weight:600;color:var(--vl-ink);}
.vl-skin #modal-cart .btn-primary,.vl-skin #modal-cart .btn-primary:hover{background:var(--vl-ink)!important;border-color:var(--vl-ink)!important;color:#fff!important;border-radius:0!important;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;min-height:52px;}
.vl-skin #modal-cart .btn-primary:hover{background:var(--vl-red)!important;border-color:var(--vl-red)!important;}
.vl-skin #modal-cart .btn-link{color:var(--vl-ink);text-decoration:underline;text-underline-offset:4px;}
.vl-skin #modal-cart .form-control,.vl-skin #modal-cart .form-quantity{border-radius:0!important;}
.vl-skin #modal-cart .alert-info{background:var(--vl-bg-2);border:0;border-radius:0;color:var(--vl-ink);}

/* phones: the wordmark at 80% of its header column crowds the search icon
   (its tap area overlapped the logo by ~7px at 390px); keep a clear gap */
@media (max-width:420px){
  .vl-skin .head-main .logo-img{max-width:112px!important;}
}

/* the product and category views replace the stock markup, so drop the
   stock page's own top spacing */
.vl-skin #vl-views.is-platform{display:block;}

/* hero: a YouTube link from the settings panel, cropped to fill the hero like
   the MP4 (16:9 players scaled to cover the box). vl-shop.js fades a player in
   (.is-on) only while it plays; the still under it is the video's own
   thumbnail, framed the same way so the crossfade lines up. */
.vl-hero-yt{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none;}
.vl-hero-yt iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity 1s ease;}
.vl-hero-yt iframe.is-on{opacity:1;}
#vl-hero.is-yt .vl-hero-poster{object-position:50% 50%;}
/* while YouTube loads (vl-shop.js sets .is-loading): a slow push-in on the
   still, a sweep on the progress line and a "Cargando video" label, so the
   wait reads as loading rather than a frozen video */
#vl-hero.is-yt .vl-hero-poster{transform:none;transition:opacity 1s ease;animation:vl-hero-push 18s ease-out forwards;}
@keyframes vl-hero-push{from{scale:1;}to{scale:1.08;}}
#vl-hero.is-loading .vl-hero-prog{overflow:hidden;}
#vl-hero.is-loading .vl-hero-prog i{width:28%!important;animation:vl-hero-sweep 1.3s ease-in-out infinite;}
@keyframes vl-hero-sweep{from{transform:translateX(-100%);}to{transform:translateX(360%);}}
.vl-hero-load{display:flex;align-items:center;gap:10px;height:32px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--vl-onphoto);font:400 10.5px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;}
#vl-hero.is-loading .vl-hero-load{opacity:1;transform:none;}
.vl-hero-load i{flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(247,245,241,.35);border-top-color:var(--vl-onphoto);animation:vl-hero-spin .9s linear infinite;}
@keyframes vl-hero-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  #vl-hero.is-yt .vl-hero-poster,.vl-hero-load i,#vl-hero.is-loading .vl-hero-prog i{animation:none;}
}