/* Vete al Diablo — approved v2-refined design (landing + header/footer skin). Generated by prototype/build-theme.mjs from reference-v2-refined.ORIGINAL.html. */ /* ===================================================================== VAD LANDING V2 — white primary, rust-orange accent, grid-first. Root: #vl-landing. Everything prefixed vl- to avoid theme collisions. Section order (per client review, matches the approved Figma flow): hero (video, buttons only) -> The Perfect Fit grid -> categories (full-bleed horizontal carousel) -> Get the look (2 x 4) -> Ofertas rail -> Sale banner -> footer (newsletter kept to one line) Removed: maximalist hero title, marquee strip, manifesto, intro curtain, grain overlay, custom cursor, giant newsletter block. Also removed: the categories rail's scroll-pin (sticky + tall spacer that hijacked vertical scroll to drive it) — client review flagged it as the page "stopping" at that section; it's now a plain overflow-x scroller with snap, same interaction model as the mobile fallback. ===================================================================== */ :root{ /* Neutral system: pure white ground, one cool grey for surfaces, near-black ink. No warm paper tones competing with the white. */ --vl-bg:#ffffff; --vl-bg-2:#f5f5f7; --vl-ink:#1d1d1f; /* Darkened from #6e6e73 (5.1:1 on white) to #55555b (~7.4:1) — secondary copy (footer text, card fees/compare-prices, section notes, nav labels) reads noticeably crisper at the same weight/size. */ --vl-mute:#55555b; /* .08 read as barely-there hairlines; .14 keeps them subtle but actually visible as structure (nav rows, footer columns, rail dividers). */ --vl-line:rgba(0,0,0,.14); /* Accent sampled from the approved Figma ad bar (#a35332 family). */ --vl-red:#a8522e; --vl-red-dark:#8f4325; --vl-paper:#f5f5f7; --vl-onphoto:#ffffff; /* .72 -> .8: the hero/panel sub-copy sits directly on photos with only a gradient assist; a touch more opacity keeps it legible on brighter crops. */ --vl-onphoto-mute:rgba(255,255,255,.8); --vl-gut:clamp(20px,4vw,72px); --vl-max:1440px; --vl-sec:clamp(72px,8vw,128px); --vl-radius:12px; /* Titles use the store's own font (already embedded by the theme), which is also the wide sans in the client's Figma. Body stays Helvetica/Arial. */ --vl-display:'Lexend Exa',Arial,Helvetica,sans-serif; --vl-body:Arial,Helvetica,'Helvetica Neue',sans-serif; --vl-tiny:Impact,Haettenschweiler,'Franklin Gothic Bold','Arial Narrow Bold',sans-serif; --vl-ease:cubic-bezier(.16,1,.3,1); --vl-icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E"); /* measured at runtime (adbar height varies with its content); this is only the pre-JS/no-JS fallback for the desktop mega-menu's docking */ --vl-header-h:110px; } /* Horizontal clip goes on only. With it on , a third-party popup's body{overflow:hidden} stops propagating to the viewport, the body turns into a scroll container, and the theme's own position:sticky elements (e.g. the category filters bar) silently break. `clip` on body creates no scroll container and still propagates to the viewport. */ html{overflow-x:visible!important;} body{overflow-x:clip!important;max-width:none!important;} body.vl-skin{background:var(--vl-bg)!important;color:var(--vl-ink);font-family:var(--vl-body);padding-bottom:0!important;} body.vl-skin ::selection{background:var(--vl-red);color:#fff;} /* ---- Motion layer (the "Framer feel") ---- Reveals are gated on html.vl-js, which the script only sets when IntersectionObserver exists and reduced-motion is off. Anything already in the viewport is revealed on the first frame, and a 1.8s fallback reveals everything above the fold regardless — so nothing can sit invisible waiting on scroll timing. */ html.vl-js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--vl-ease),transform 1s var(--vl-ease);transition-delay:var(--rd,0s);will-change:opacity,transform;} html.vl-js [data-rv].is-in{opacity:1;transform:none;} /* inside a horizontal rail, reveal with opacity only — the 28px rise would extend the rail's scroll width and create an inner scroller */ html.vl-js .vl-rail-track [data-rv]{transform:none;} html.vl-js .vl-sec-head .vl-display{display:block;overflow:hidden;} html.vl-js .vl-sec-head .vl-display>span{display:block;transform:translateY(110%);transition:transform .9s var(--vl-ease) .05s;} html.vl-js .vl-sec-head.is-in .vl-display>span{transform:none;} .vl-mag{transition:transform .5s var(--vl-ease),background-color .25s ease,color .25s ease,border-color .25s ease;} @media (prefers-reduced-motion:reduce){ html.vl-js [data-rv]{opacity:1!important;transform:none!important;transition:none!important;} html.vl-js .vl-sec-head .vl-display>span{transform:none!important;} /* WCAG 2.3.3 — the ad-bar marquee and hero scroll cue are the only continuously-auto-moving content left; both are purely decorative, so freeze them rather than gate them behind a pause control */ .vl-adbar-mq{animation:none!important;} .vl-hero-scroll i:after{animation:none!important;} } /* ---- Header: white, turns to frosted glass once you scroll ---- */ .head-main{background:#fff!important;border-bottom:1px solid var(--vl-line)!important;transition:background-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease!important;} .head-main.vl-solid{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--vl-line),0 10px 30px -18px rgba(23,21,15,.25);} .head-main .logo-img{filter:none;} .head-main .utilities-icon,.head-main .utilities-item svg,.head-main .header-utility svg,.head-main .cart-icon,.head-main .cart-icon path,.head-main .svg-icon-text{fill:var(--vl-ink)!important;color:var(--vl-ink)!important;} /* Icon buttons — a soft circular hover chip instead of the stock bare-icon click target, echoing the hero's mute-button treatment */ .head-main .utilities-item,.head-main .cart-summary>a{display:inline-flex!important;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;transition:background-color .2s ease;} .head-main .utilities-item:hover,.head-main .cart-summary>a:hover{background:var(--vl-bg-2);} .head-main .utilities-icon{width:26px;height:26px;} /* Genuine icon rework — custom stroke-drawn menu/search/cart glyphs replacing the stock filled shapes. The rule above (.header-utility svg) forces fill on every header icon at higher specificity than a plain .vl-icon-* class would carry, so these overrides are written through .header-utility too, purely to out-rank it — not for its own sake. */ .head-main .header-utility .vl-icon-search,.head-main .header-utility .vl-icon-cart,.head-main .header-utility .vl-menu-bars,.head-main .header-utility .vl-menu-x{fill:none!important;stroke:currentColor!important;color:var(--vl-ink)!important;width:26px;height:26px;} .head-main .utilities-item:hover .vl-icon-search,.head-main .cart-summary>a:hover .vl-icon-cart,.head-main .utilities-item:hover .vl-menu-icon svg{color:var(--vl-red)!important;} .vl-menu-icon{position:relative;display:inline-flex;width:26px;height:26px;} .vl-menu-icon svg{position:absolute;inset:0;transition:opacity .2s ease,transform .3s var(--vl-ease);} .vl-menu-x{opacity:0;transform:rotate(-40deg) scale(.7);} /* the trigger and the panel are separate elements elsewhere in the DOM, so :has() is what lets the header icon react to the panel's own state */ body:has(#nav-hamburger.modal-show) .vl-menu-bars{opacity:0;transform:rotate(40deg) scale(.7);} body:has(#nav-hamburger.modal-show) .vl-menu-x{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.vl-menu-icon svg{transition:opacity .15s ease!important;}} /* Base theme centers the badge INSIDE the icon (top:58%;left:50%; translate(-50%,-50%), !important) — that was tuned for the old solid filled bag glyph; floating a number inside our new outline icon reads as broken. Re-pin it as a normal corner counter chip instead. Needs to out-rank that base rule's specificity+!important, hence the long chain. */ .head-main .cart-summary .js-cart-widget-amount.badge{ position:absolute!important;top:-3px!important;left:auto!important;right:-5px!important;transform:none!important; display:flex!important;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%; background:var(--vl-red)!important;color:#fff!important; font:600 9px/1 var(--vl-body)!important;letter-spacing:0; box-shadow:0 0 0 2px #fff; } /* Ad bar: accent strip whose messages scroll continuously (the theme's click-through swiper is hidden and replaced by a marquee at runtime). */ .section-adbar{background:var(--vl-red)!important;border-bottom:0!important;padding:0!important;min-height:0!important;overflow:hidden;} .section-adbar .js-swiper-adbar{display:none!important;} .vl-adbar-mq{display:flex;width:max-content;padding:10px 0;will-change:transform;animation:vlMq 64s linear infinite;} .vl-adbar-mq span{font-family:var(--vl-tiny);font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:0 40px;white-space:nowrap;display:flex;align-items:center;gap:40px;} .vl-adbar-mq span:after{content:'✦';font-size:.85em;opacity:.7;} .section-adbar:hover .vl-adbar-mq{animation-play-state:paused;} @keyframes vlMq{to{transform:translateX(-50%);}} /* ---- Modal close control — shared skin for every js-modal (hamburger, search, cart, cross-sell) so "Cerrar" reads the same everywhere instead of the theme's default link-blue text ---- */ .js-modal .modal-header{border-bottom:1px solid var(--vl-line)!important;} .js-modal .js-modal-close.btn-link{display:inline-flex!important;align-items:center;gap:9px;color:var(--vl-ink)!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;transition:color .2s ease;} .js-modal .js-modal-close.btn-link:hover{color:var(--vl-red)!important;} /* Genuine close icon, not just recolored text — drawn with a CSS mask so no markup changes are needed on any of the modals sharing this class */ .js-modal .js-modal-close.btn-link:before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:var(--vl-icon-x) center/contain no-repeat;mask:var(--vl-icon-x) center/contain no-repeat;} /* ===================================================================== NAV — hamburger mega-menu. Stock theme markup/behavior (accordion panels, back/close buttons), fully reskinned: white ground, the same display/tiny type pair as the rest of the site, red accent on hover and on the active link instead of the default blue-link look. ===================================================================== */ .modal-nav-hamburger{background:var(--vl-bg)!important;} .modal-nav-hamburger .modal-header{padding:20px var(--vl-gut)!important;} .modal-nav-hamburger .nav-body{padding:8px var(--vl-gut) 40px!important;} .modal-nav-hamburger .nav-list{list-style:none;margin:0;padding:0;} /* Top-level items get an 01/02/03 index — the same numbering language as the category tiles (.vl-panel-n) and section heads, so the nav reads as part of the same system instead of a generic bootstrap menu. Scoped to direct children only: nested .nav-item rows inside a drilled-in .nav-list-panel submenu are NOT counted or numbered. */ .modal-nav-hamburger .nav-primary>.nav-list{counter-reset:vlnav;} .modal-nav-hamburger .nav-primary>.nav-list>.nav-item{counter-increment:vlnav;} .modal-nav-hamburger .nav-item{border-bottom:1px solid var(--vl-line);} .modal-nav-hamburger .nav-list-link{display:flex!important;align-items:center;gap:14px;padding:13px 2px!important;font:500 15px/1.2 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink)!important;transition:color .2s ease,padding-left .25s var(--vl-ease);} /* nested drill-in submenu rows (e.g. the 11 links under "Cápsulas & Drops") are secondary to the top-level list — tighter rows here are most of where the "scroll forever" length was actually coming from */ .modal-nav-hamburger .nav-list-panel .nav-list-link{padding:10px 2px!important;font:400 14px/1.3 var(--vl-body)!important;letter-spacing:0;text-transform:none;} /* Direct-child combinator on purpose: a plain descendant selector here would also match every nested link inside a drilled-in .nav-list-panel submenu and stamp them all with the SAME top-level number. Only the top-level row's own link gets the index. */ .modal-nav-hamburger .nav-primary>.nav-list>.nav-item>.nav-list-link:before{content:counter(vlnav,decimal-leading-zero);flex:none;font:400 11px/1 var(--vl-tiny);letter-spacing:.06em;color:var(--vl-mute);} /* the synthesised "General" column (flat links wrapped together — see the mega-menu script) is itself one counted top-level item, so it gets the next number in the same sequence, e.g. "01 Productos … 04 General" */ .modal-nav-hamburger .vl-nav-col-links:before{content:counter(vlnav,decimal-leading-zero) ' General';display:flex;align-items:center;gap:14px;padding:18px 2px;font:500 16px/1.2 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;color:var(--vl-mute);border-bottom:1px solid var(--vl-line);} .modal-nav-hamburger .nav-list-link:hover,.modal-nav-hamburger .nav-list-link:focus-visible{color:var(--vl-red)!important;padding-left:8px!important;} .modal-nav-hamburger .nav-list-link.selected{color:var(--vl-red)!important;} .modal-nav-hamburger .nav-list-arrow{margin-left:auto;} .modal-nav-hamburger .nav-list-arrow svg{width:18px;height:18px;color:var(--vl-ink);fill:none!important;stroke:currentColor!important;transition:transform .25s var(--vl-ease),color .2s ease;} .modal-nav-hamburger .nav-list-link:hover .nav-list-arrow svg{transform:translateX(3px);color:var(--vl-red);} /* submenu ("Productos", "Capsulas & Drops", ...) panels reuse the same header/back-button chrome as the top level, so drilling in never feels like a different, unstyled surface */ .modal-nav-hamburger .nav-list-panel{background:var(--vl-bg)!important;} .modal-nav-hamburger .nav-list-panel .modal-header{display:flex;align-items:center;justify-content:space-between;} .modal-nav-hamburger .js-toggle-menu-back{display:flex!important;align-items:center;gap:10px;color:var(--vl-ink)!important;text-decoration:none!important;} .modal-nav-hamburger .js-toggle-menu-back svg{width:18px;height:18px;color:var(--vl-ink);fill:none!important;stroke:currentColor!important;} .modal-nav-hamburger .js-toggle-menu-back div:last-child{font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;} .modal-nav-hamburger .nav-list-panel .nav-list-link.font-weight-bold{color:var(--vl-red)!important;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.1em;text-transform:uppercase;} /* account links footer */ .modal-nav-hamburger .hamburger-footer{border-top:1px solid var(--vl-line)!important;padding:20px var(--vl-gut)!important;background:var(--vl-bg-2)!important;} .modal-nav-hamburger .nav-secondary{display:flex;align-items:center;} .modal-nav-hamburger .nav-secondary a{color:var(--vl-ink)!important;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important;transition:color .2s ease;} .modal-nav-hamburger .nav-secondary a:hover{color:var(--vl-red)!important;} .modal-nav-hamburger .nav-secondary svg{width:22px;height:22px;color:var(--vl-ink);fill:currentColor!important;} /* ===================================================================== NAV — desktop mega-menu. >=900px only; below that the same markup stays the reskinned mobile drawer/accordion from above. Reflows the existing drill-down accordion into simultaneous columns (CSS can't invent the "General" grouping column for the flat links, so a small JS pass wraps those once — see the "Desktop mega-menu" script block) and gives it a glassy, frosted-frame surface instead of a solid panel. ===================================================================== */ /* Below 900px, the "General" wrapper the mega-menu script adds around the flat links must stay invisible as a grouping box — display:contents unwraps it so those links render exactly where they'd have been in the plain accordion, keeping the mobile experience untouched. */ .modal-nav-hamburger .vl-nav-col-links{display:contents;} /* Compact 2-up grid for the "General" catch-all (Inicio, New In, Sale...) instead of one full-width row each — those are short single words/ phrases, and stacking 8-10 of them one-per-row was most of the "why is this so long" scroll on the mobile drawer. */ .modal-nav-hamburger .vl-nav-col-list{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;list-style:none;margin:0;padding:2px 0 12px;} .modal-nav-hamburger .vl-nav-col-list .nav-item{border-bottom:0;} .modal-nav-hamburger .vl-nav-col-list .nav-list-link{padding:8px 2px!important;} @media (min-width:900px){ .modal-nav-hamburger{ left:0!important;right:0!important;top:var(--vl-header-h,110px)!important; width:100%!important;max-width:100%!important;height:auto!important; max-height:calc(100svh - var(--vl-header-h,110px)); transform:translateY(-10px)!important;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--vl-ease),transform .35s var(--vl-ease),visibility 0s linear .35s!important; background:rgba(255,255,255,.78)!important; backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5); border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 40px 70px -35px rgba(20,18,14,.35); overflow-y:auto; } .modal-nav-hamburger.modal-show{ opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important; transition:opacity .3s var(--vl-ease),transform .35s var(--vl-ease)!important; } @media (prefers-reduced-motion:reduce){.modal-nav-hamburger{transition:opacity .15s linear,visibility 0s linear .15s!important;}} /* the top "Cerrar" bar and every nested drill-in back/close header — nothing to drill into anymore, so nothing to back out of or re-close */ .modal-nav-hamburger .modal-header{display:none!important;} .modal-nav-hamburger .nav-body{padding:40px var(--vl-gut) 48px!important;} .modal-nav-hamburger .hamburger-footer{display:none;} /* account links stay in the mobile drawer only */ .modal-nav-hamburger .nav-primary>.nav-list{display:flex!important;gap:clamp(28px,3.6vw,64px);align-items:flex-start;list-style:none;margin:0;padding:0;} .modal-nav-hamburger .nav-primary>.nav-list>.nav-item{border-bottom:0!important;flex:none;} .modal-nav-hamburger .vl-nav-col{min-width:148px;} .modal-nav-hamburger .vl-nav-col-links,.modal-nav-hamburger .vl-nav-col-list{display:block!important;} /* undo the mobile display:contents passthrough */ .modal-nav-hamburger .vl-nav-col-list{list-style:none;margin:0;padding:0;} /* column heading — the trigger link itself; no longer clickable, since there's nothing to toggle when every column is already open. Stays display:flex (inherited) so the index number and label still line up using the same gap as every other nav row. */ .modal-nav-hamburger .item-with-subitems>.nav-list-link{pointer-events:none;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.14em;color:var(--vl-mute)!important;padding:0 0 16px!important;margin-bottom:6px;border-bottom:1px solid var(--vl-line);} .modal-nav-hamburger .item-with-subitems>.nav-list-link .nav-list-arrow{display:none;} /* the "General" column heading keeps its number+label from the universal rule above; just match the other columns' smaller desktop heading type instead of the big mobile row size */ .modal-nav-hamburger .vl-nav-col-links:before{font:400 12px/1 var(--vl-tiny);padding:0 0 16px;margin-bottom:6px;} /* the drill-in submenu, forced to render inline as the column body instead of the full-screen slide-over panel it is on mobile */ .modal-nav-hamburger .nav-list-panel{display:block!important;position:static!important;transform:none!important;width:auto!important;height:auto!important;background:transparent!important;inset:auto!important;} .modal-nav-hamburger .nav-list-panel .nav-item,.modal-nav-hamburger .vl-nav-col-list .nav-item{border-bottom:0!important;} .modal-nav-hamburger .nav-list-panel .nav-list-link,.modal-nav-hamburger .vl-nav-col-links .nav-list-link{display:block!important;padding:8px 0!important;font:400 13px/1.3 var(--vl-body)!important;letter-spacing:.01em;text-transform:none;} .modal-nav-hamburger .nav-list-panel .nav-list-link:before,.modal-nav-hamburger .vl-nav-col-links .nav-list-link:before{display:none;} .modal-nav-hamburger .nav-list-panel .nav-list-link.font-weight-bold{margin-top:4px;padding-top:12px!important;border-top:1px solid var(--vl-line);color:var(--vl-red)!important;} /* feature tiles — same editorial language as the categories rail */ .modal-nav-hamburger .vl-nav-feat{display:flex;gap:16px;margin-left:auto;flex:none;} } .vl-nav-feat-tile{position:relative;display:block;width:150px;height:200px;border-radius:var(--vl-radius);overflow:hidden;text-decoration:none!important;flex:none;} .vl-nav-feat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:transform .6s var(--vl-ease),filter .4s ease;} .vl-nav-feat-tile:hover img{transform:scale(1.05);filter:grayscale(0);} .vl-nav-feat-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.65) 100%);} .vl-nav-feat-tile span{position:absolute;left:12px;bottom:12px;z-index:2;color:#fff;font:500 13px/1.1 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;} @media (max-width:899px){.vl-nav-feat{display:none;}} /* mobile keeps the plain accordion; no room for tiles */ /* ---- Search modal — same input treatment as the newsletter form ---- */ .modal-nav-search{background:var(--vl-bg)!important;} .modal-nav-search h3{font:500 clamp(20px,2.5vw,30px)/1.15 var(--vl-display)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--vl-ink);margin-bottom:20px;} .modal-nav-search .form-group{position:relative;} .modal-nav-search .search-input{background:#fff!important;border:0!important;border-bottom:1px solid var(--vl-ink)!important;border-radius:0!important;color:var(--vl-ink)!important;height:52px!important;padding:0 40px 0 0!important;font:400 15px/1 var(--vl-body)!important;box-shadow:none!important;} .modal-nav-search .search-input:focus{border-bottom-color:var(--vl-red)!important;} .modal-nav-search .search-input::placeholder{color:var(--vl-mute);} .modal-nav-search .search-input-submit{background:transparent!important;border:0!important;color:var(--vl-ink)!important;right:0!important;} .modal-nav-search .search-input-submit svg{width:24px;height:24px;fill:none!important;stroke:var(--vl-ink)!important;} .modal-nav-search .search-input-submit:hover svg{stroke:var(--vl-red)!important;} /* ---- Primitives ---- */ .vl-wrap{padding-left:var(--vl-gut);padding-right:var(--vl-gut);} .vl-in{max-width:var(--vl-max);margin:0 auto;} .vl-tiny{font-family:var(--vl-tiny);font-weight:400;letter-spacing:.12em;text-transform:uppercase;} .vl-display{font-family:var(--vl-display);font-weight:500;text-transform:uppercase;line-height:1.1;letter-spacing:.02em;margin:0;} .vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border:1px solid var(--vl-ink);border-radius:0;color:var(--vl-ink);background:transparent;font:400 11.5px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease;} .vl-btn:hover{background:var(--vl-ink);color:#fff;} .vl-btn.is-solid{background:var(--vl-red);border-color:var(--vl-red);color:#fff;} .vl-btn.is-solid:hover{background:var(--vl-red-dark);border-color:var(--vl-red-dark);color:#fff;} .vl-link{color:var(--vl-ink);text-decoration:none!important;font:400 12px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid var(--vl-ink);transition:color .2s ease,border-color .2s ease;} .vl-link:hover{color:var(--vl-red);border-color:var(--vl-red);} /* Keyboard focus — the theme only restores the native outline once body.is-using-mouse is off, so these custom shapes need their own ring instead of relying on a default outline that may sit oddly on a borderless link or a full-bleed photo panel. */ .vl-btn:focus-visible,.vl-link:focus-visible,.vl-rail-nav:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;} .vl-card:focus-visible{outline:none;} .vl-card:focus-visible .vl-card-media{outline:2px solid var(--vl-red);outline-offset:3px;} .vl-panel:focus-visible{outline:2px solid var(--vl-onphoto);outline-offset:-4px;} /* the track itself is tabbable so keyboard users can arrow/page-scroll it natively, not just jump panel-to-panel via the prev/next buttons */ .vl-rail-track:focus-visible{outline:2px solid var(--vl-red);outline-offset:-3px;} .vl-sec-head{text-align:center;margin-bottom:clamp(36px,4.5vw,64px);} .vl-sec-head .vl-display{font-size:clamp(20px,2.2vw,30px);} .vl-sec-head .vl-link{margin-top:18px;} .vl-sec-foot{text-align:center;margin-top:clamp(36px,4.5vw,64px);} /* ===================================================================== HERO — video banner, buttons only, no headline ===================================================================== */ #vl-hero{position:relative;height:clamp(420px,52vw,620px);overflow:hidden;background:#111;} .vl-hero-media{position:absolute;inset:-8% 0;overflow:hidden;will-change:transform;} .vl-hero-poster,.vl-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 25%;} /* settle-in zoom lives on the poster/video, not the wrapper, so the scroll parallax transform on the wrapper never fights the 2s transition */ html.vl-js .vl-hero-poster,html.vl-js .vl-hero-video{transform:scale(1.08);transition:transform 2.2s cubic-bezier(.2,.8,.2,1),opacity 1s ease;} html.vl-js.vl-loaded .vl-hero-poster,html.vl-js.vl-loaded .vl-hero-video{transform:scale(1);} .vl-hero-body{will-change:transform,opacity;} .vl-hero-video{opacity:0;transition:opacity 1s ease;} .vl-hero-video.vl-on{opacity:1;} .vl-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 55%);} .vl-hero-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--vl-gut) clamp(22px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;} .vl-hero-tag{display:inline-flex;align-items:center;gap:10px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-onphoto);border:1px solid rgba(247,245,241,.45);padding:8px 11px;margin-bottom:16px;backdrop-filter:blur(6px);} .vl-hero-tag:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--vl-red);box-shadow:0 0 0 0 rgba(168,82,46,.6);animation:vlPulse 2.2s ease-out infinite;} @keyframes vlPulse{to{box-shadow:0 0 0 9px rgba(168,82,46,0);}} .vl-hero-h{font-size:clamp(30px,4.4vw,60px);color:var(--vl-onphoto);letter-spacing:.06em;line-height:1;margin:0 0 12px;} html.vl-js .vl-hero-h{display:block;} html.vl-js .vl-hero-h .vl-w{display:inline-block;overflow:hidden;vertical-align:bottom;} html.vl-js .vl-hero-h .vl-w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--vl-ease);} html.vl-js .vl-hero-h.is-in .vl-w>span{transform:none;} html.vl-js .vl-hero-h .vl-w:nth-child(2)>span{transition-delay:.08s;} .vl-hero-sub{margin:0 0 20px;max-width:44ch;font:400 13.5px/1.5 var(--vl-body);color:var(--vl-onphoto-mute);} .vl-hero-cta{display:flex;gap:10px;flex-wrap:wrap;} .vl-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:22px;} .vl-hero-mute{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:var(--vl-onphoto);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s ease,border-color .25s ease;} .vl-hero-mute:hover{background:var(--vl-onphoto);color:var(--vl-ink);border-color:var(--vl-onphoto);} .vl-hero-mute svg{width:22px;height:22px;} .vl-hero-mute .on{display:none;} .vl-hero-mute.is-on .on{display:block;} .vl-hero-mute.is-on .off{display:none;} .vl-hero-scroll{display:flex;align-items:center;gap:12px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.2em;text-transform:uppercase;color:var(--vl-onphoto-mute);} .vl-hero-scroll i{width:1px;height:44px;background:rgba(247,245,241,.25);position:relative;overflow:hidden;} .vl-hero-scroll i:after{content:'';position:absolute;left:0;top:0;width:100%;height:50%;background:var(--vl-onphoto);animation:vlScroll 1.8s var(--vl-ease) infinite;} @keyframes vlScroll{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}} .vl-hero-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(247,245,241,.15);z-index:3;} .vl-hero-prog i{display:block;height:100%;width:0;background:var(--vl-red);} .vl-hero-cta .vl-btn{border-color:var(--vl-onphoto);color:var(--vl-onphoto);} .vl-hero-cta .vl-btn:hover{background:var(--vl-onphoto);color:var(--vl-ink);} .vl-hero-cta .vl-btn.is-solid{border-color:var(--vl-red);color:#fff;} .vl-hero-cta .vl-btn.is-solid:hover{background:var(--vl-red-dark);border-color:var(--vl-red-dark);color:#fff;} .vl-hero-note{font-family:var(--vl-tiny);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-onphoto-mute);white-space:nowrap;} @media (max-width:700px){ #vl-hero{height:clamp(420px,110vw,560px);} .vl-hero-poster,.vl-hero-video{object-position:24% 15%;} .vl-hero-side{position:absolute;right:var(--vl-gut);top:-60px;} .vl-hero-scroll{display:none;} .vl-hero-h{font-size:clamp(28px,9vw,40px);} .vl-hero-sub{display:none;} } /* ===================================================================== PRODUCT CARDS — rounded, paper background, approved Figma treatment ===================================================================== */ .vl-card{display:block;position:relative;color:var(--vl-ink);text-decoration:none!important;} .vl-card-media{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--vl-paper);border-radius:var(--vl-radius);transition:transform .7s var(--vl-ease),box-shadow .7s var(--vl-ease);} .vl-card:hover .vl-card-media{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(0,0,0,.28);} /* garments float inside the card with air around them, never touching edges */ /* The product shots come with their own white background; multiply blends that white into the grey card so the garment sits on the surface instead of inside a white rectangle. */ .vl-card-img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .35s ease,transform 1s var(--vl-ease);} .vl-card:hover .vl-card-img{transform:scale(1.03);} /* Cross-fade: with multiply blending, both photos showing at once would superimpose, so the front shot fades out as the back shot fades in. */ .vl-card-img-b{opacity:0;} .vl-card:hover .vl-card-img-b{opacity:1;} .vl-card:hover .vl-card-img-a{opacity:0;} .vl-card-tag{position:absolute;top:12px;left:12px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.08em;background:var(--vl-red);color:#fff;padding:6px 8px;border-radius:3px;z-index:2;} .vl-card-meta{display:block;padding:14px 2px 0;height:70px;} .vl-card-name{display:block;font:500 11px/1.3 var(--vl-body);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--vl-ink);} .vl-card-price{display:flex;align-items:baseline;gap:8px;margin-top:5px;font:400 13px/1.2 var(--vl-body);} .vl-card-price b{font-weight:600;} .vl-card-price s{color:var(--vl-mute);font-size:11.5px;} .vl-card-fee{display:block;margin-top:5px;font:400 11px/1.2 var(--vl-body);color:var(--vl-mute);} /* ===================================================================== THE PERFECT FIT — 4 columns + one lifestyle tile spanning 2x2 ===================================================================== */ #vl-drop{padding:clamp(56px,6.5vw,104px) var(--vl-gut) var(--vl-sec);} .vl-drop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.2vw,48px) clamp(16px,1.8vw,28px);align-items:start;} .vl-drop-feat{grid-column:3/span 2;grid-row:2/span 2;display:block;position:relative;border-radius:var(--vl-radius);overflow:hidden;background:var(--vl-paper);align-self:stretch;min-height:100%;} .vl-drop-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;transition:transform 1s var(--vl-ease);} .vl-drop-feat:hover img{transform:scale(1.04);} .vl-drop-feat span{position:absolute;left:20px;bottom:20px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-ink);background:rgba(255,255,255,.88);padding:11px 14px;border-radius:999px;backdrop-filter:blur(10px);transition:background-color .25s ease,color .25s ease;} .vl-drop-feat:hover span{background:var(--vl-ink);color:#fff;} @media (max-width:900px){ .vl-drop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;} .vl-drop-feat{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3;min-height:0;} } /* ===================================================================== CATEGORIES — full-bleed horizontal carousel, built on the shared .vl-rail component (see RAIL below the Ofertas section) for drag-scroll + a progress/arrows foot bar, same as Ofertas. No sticky pin, no vertical-scroll hijack (that killed forward scroll for a long dead zone and read as the page freezing). Hover: photo comes to full colour, name dims. ===================================================================== */ #vl-caps{position:relative;background:#000;padding-bottom:8px;} #vl-caps .vl-rail-view{height:100svh;min-height:520px;} #vl-caps .vl-rail-track{height:100%;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} .vl-panel{position:relative;flex:none;scroll-snap-align:start;width:calc(100vw / 3);height:100%;overflow:hidden;background:#111;color:var(--vl-onphoto);text-decoration:none!important;display:block;} .vl-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:filter .6s ease;} .vl-panel:hover img{filter:grayscale(0);} .vl-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%);} .vl-panel+.vl-panel{box-shadow:inset 1px 0 0 rgba(255,255,255,.14);} .vl-panel-n{position:absolute;top:22px;left:clamp(16px,2vw,32px);z-index:2;font:400 11px/1 var(--vl-tiny);letter-spacing:.16em;color:rgba(247,245,241,.86);} /* Sits well above the theme's fixed cookie banner (~70px) */ .vl-panel-t{position:absolute;left:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);bottom:clamp(88px,13vh,132px);z-index:2;color:var(--vl-onphoto);} .vl-panel-t b{display:block;font:500 clamp(18px,1.9vw,28px)/1.1 var(--vl-display);letter-spacing:.04em;text-transform:uppercase;transition:transform .6s var(--vl-ease);} .vl-panel-t small{display:flex;align-items:center;gap:10px;margin-top:10px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.86);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s var(--vl-ease);} .vl-panel-t small:before{content:'';width:22px;height:1px;background:var(--vl-red);} .vl-panel:hover .vl-panel-t b{transform:translateY(-4px);} .vl-panel:hover .vl-panel-t small{opacity:1;transform:none;} .vl-panel.is-cta{background:var(--vl-red);} .vl-panel.is-cta:after{display:none;} .vl-panel.is-cta .vl-panel-t b{color:#fff;} .vl-panel.is-cta .vl-panel-t small{color:rgba(255,255,255,.8);opacity:1;transform:none;} .vl-panel.is-cta .vl-panel-t small:before{background:#fff;} .vl-panel.is-cta svg{position:absolute;top:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);width:36px;height:36px;color:#fff;transition:transform .5s var(--vl-ease);} .vl-panel.is-cta:hover svg{transform:translate(5px,-5px);} @media (max-width:900px),(pointer:coarse){ #vl-caps .vl-rail-view{height:min(70svh,520px);min-height:0;} .vl-panel{width:min(78vw,360px);height:100%;} .vl-panel-n{top:18px;} .vl-panel-t{bottom:20px;} .vl-panel-t small{opacity:1;transform:none;} } /* ===================================================================== GET THE LOOK — 2 rows of 4 looks; a look opens a drawer with its items ===================================================================== */ #vl-look{padding:var(--vl-sec) var(--vl-gut);} .vl-look-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px);} .vl-look{position:relative;display:block;width:100%;padding:0;border:0;background:var(--vl-paper);border-radius:var(--vl-radius);overflow:hidden;aspect-ratio:2/3;cursor:pointer;color:#fff;text-align:left;font:inherit;transition:transform .7s var(--vl-ease),box-shadow .7s var(--vl-ease);} .vl-look:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(23,21,15,.4);} .vl-look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform 1s var(--vl-ease);} .vl-look:hover img{transform:scale(1.04);} .vl-look-hint{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-ink);background:rgba(255,255,255,.88);padding:11px 14px;border-radius:999px;backdrop-filter:blur(10px);transition:background-color .25s ease,color .25s ease;} .vl-look-hint i{display:inline-flex;width:12px;height:12px;align-items:center;justify-content:center;font-style:normal;font-family:var(--vl-body);font-size:15px;line-height:1;} .vl-look:hover .vl-look-hint{background:var(--vl-ink);color:#fff;} .vl-look:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;} .vl-look-items{display:none;} @media (max-width:900px){.vl-look-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} /* Drawer */ .vl-drawer-bg{position:fixed;inset:0;background:rgba(23,21,15,.45);z-index:10000;opacity:0;pointer-events:none;transition:opacity .3s ease;} .vl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#fff;z-index:10001;transform:translateX(102%);transition:transform .45s var(--vl-ease);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.18);} body.vl-drawer-open .vl-drawer{transform:none;} body.vl-drawer-open .vl-drawer-bg{opacity:1;pointer-events:auto;} .vl-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--vl-line);} .vl-drawer-head .vl-display{font-size:15px;} .vl-drawer-x{width:42px;height:42px;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);} .vl-drawer-x:hover{background:var(--vl-ink);color:#fff;border-color:var(--vl-ink);} .vl-drawer-x svg{width:18px;height:18px;} .vl-drawer-body{overflow-y:auto;flex:1;} .vl-drawer-pic{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 15%;background:var(--vl-paper);} .vl-drawer-list{padding:8px 20px 28px;} .vl-drawer-list .vl-tiny{display:block;font-size:11px;color:var(--vl-mute);padding:14px 0 6px;} .vl-mini{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--vl-line);color:var(--vl-ink);text-decoration:none!important;} .vl-mini:last-child{border-bottom:0;} .vl-mini img{width:72px;aspect-ratio:2/3;object-fit:contain;background:var(--vl-paper);border-radius:6px;mix-blend-mode:multiply;} .vl-mini b{display:block;font:700 11px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;} .vl-mini small{display:block;margin-top:4px;font:400 12px/1.2 var(--vl-body);} .vl-mini small s{color:var(--vl-mute);margin-left:6px;font-size:11px;} .vl-mini em{font-style:normal;font:400 11px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--vl-red);white-space:nowrap;} .vl-mini:hover b{color:var(--vl-red);} /* ===================================================================== RAIL — reusable horizontal-scroll component: drag-to-scroll track + a foot bar with a progress line, counter and prev/next arrows. Used by Categories (dark, full-bleed tiles) and Ofertas (light, product cards). Anything sitewide that needs "scroll sideways through N things" should reuse this instead of building a one-off rail. ===================================================================== */ .vl-rail-wrap{position:relative;} /* overflow-y must be explicit: with only overflow-x set, a hover lift/ shadow on the children made the browser add a tiny vertical scroller. */ .vl-rail-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;} .vl-rail-track::-webkit-scrollbar{display:none;} .vl-rail-track.is-drag{cursor:grabbing;scroll-snap-type:none;} /* Navigation lives in a bar under the rail: progress line + arrows, so nothing sits on top of the tile/product photos. */ .vl-rail-foot{display:flex;align-items:center;gap:22px;padding:28px max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2)) 0;} .vl-rail-bar{flex:1;height:1px;background:var(--vl-line);position:relative;overflow:hidden;} .vl-rail-bar i{position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--vl-ink);transition:transform .3s var(--vl-ease),width .3s var(--vl-ease);} .vl-rail-count{font:400 12px/1 var(--vl-tiny);letter-spacing:.12em;color:var(--vl-mute);min-width:64px;text-align:right;} .vl-rail-count b{color:var(--vl-ink);font-weight:400;} .vl-rail-nav{width:44px;height:44px;border:1px solid var(--vl-ink);background:#fff;color:var(--vl-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s ease,color .25s ease,opacity .25s ease;} .vl-rail-nav:hover{background:var(--vl-ink);color:#fff;} .vl-rail-nav.is-off{opacity:.3;pointer-events:none;} .vl-rail-nav svg{width:22px;height:22px;} @media (max-width:767px){.vl-rail-nav,.vl-rail-count{display:none;}} /* Dark variant — for a rail sitting on a black/photo background (Categories) */ .vl-rail-wrap.is-dark .vl-rail-bar{background:rgba(255,255,255,.18);} .vl-rail-wrap.is-dark .vl-rail-bar i{background:var(--vl-onphoto);} .vl-rail-wrap.is-dark .vl-rail-count{color:var(--vl-onphoto-mute);} .vl-rail-wrap.is-dark .vl-rail-count b{color:var(--vl-onphoto);} .vl-rail-wrap.is-dark .vl-rail-nav{border-color:rgba(255,255,255,.4);background:transparent;color:var(--vl-onphoto);} .vl-rail-wrap.is-dark .vl-rail-nav:hover{background:var(--vl-onphoto);color:var(--vl-ink);} /* ===================================================================== OFERTAS RAIL — .vl-rail with product cards ===================================================================== */ #vl-new{padding:0 0 var(--vl-sec);} #vl-new .vl-sec-head{padding:0 var(--vl-gut);} #vl-new .vl-rail-track{gap:clamp(16px,1.8vw,28px);padding:12px max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2)) 6px;} #vl-new .vl-rail-track .vl-card{flex:none;width:clamp(200px,20vw,300px);scroll-snap-align:start;} /* ===================================================================== SALE — compact banner, last thing before the footer ===================================================================== */ #vl-sale{position:relative;height:clamp(340px,38vw,480px);display:grid;place-items:center;overflow:hidden;text-align:center;padding:0 var(--vl-gut);background:#1c1a17;} .vl-sale-bg{position:absolute;inset:-14% 0;z-index:0;will-change:transform;} .vl-sale-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:contrast(1.05) saturate(.85) brightness(.55);} .vl-sale-in{position:relative;z-index:2;} .vl-sale-k{font-family:var(--vl-tiny);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--vl-onphoto-mute);} .vl-sale-h{font-size:clamp(28px,4.2vw,54px);margin:12px 0 0;color:var(--vl-onphoto);letter-spacing:.02em;} .vl-sale-h em{font-style:normal;color:var(--vl-red);filter:saturate(1.3) brightness(1.25);} .vl-sale-p{font:400 12px/1.6 var(--vl-tiny);letter-spacing:.08em;text-transform:uppercase;color:var(--vl-onphoto-mute);margin:12px 0 20px;} @media (max-width:700px){#vl-sale{height:clamp(220px,64vw,300px);}} /* ===================================================================== FOOTER — theme's native footer restyled; newsletter kept to one line ===================================================================== */ .js-footer{background:var(--vl-bg-2)!important;color:var(--vl-ink)!important;border-top:1px solid var(--vl-line);margin-top:0!important;padding-top:0!important;} .js-footer .container-fluid,.footer-legal .container-fluid{padding-left:max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2))!important;padding-right:max(var(--vl-gut),calc((100vw - var(--vl-max)) / 2))!important;} .js-footer,.js-footer a,.js-footer h4,.js-footer h5,.js-footer p,.js-footer li,.js-footer .h6{color:var(--vl-ink)!important;font-family:var(--vl-body)!important;} .js-footer a{text-decoration:none!important;transition:color .2s ease;} .js-footer a:hover{color:var(--vl-red)!important;} /* Brand row injected at the top of the footer */ .vl-foot-brand{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end;padding:clamp(40px,5vw,72px) 0 clamp(28px,3.4vw,44px);border-bottom:1px solid var(--vl-line);margin-bottom:clamp(28px,3.4vw,44px);} .vl-foot-brand img{display:block;width:min(360px,60vw);height:auto;filter:none!important;opacity:1!important;} .vl-foot-brand p{margin:18px 0 0;max-width:38ch;font:400 13.5px/1.6 var(--vl-body);color:var(--vl-mute)!important;} .vl-foot-links{display:flex;gap:26px;justify-content:flex-end;flex-wrap:wrap;} .vl-foot-links .vl-link{font-size:11.5px;} /* Column titles + lists */ .js-footer .font-small.opacity-md-50{opacity:1!important;font-family:var(--vl-tiny)!important;font-size:11.5px!important;font-weight:400!important;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute)!important;margin-bottom:14px!important;position:relative;} /* small accent tick, echoes .vl-eyebrow used elsewhere so the column headers read as part of the same system rather than plain bootstrap labels */ .js-footer .font-small.opacity-md-50:before{content:'';display:inline-block;width:14px;height:1px;background:var(--vl-red);margin-right:10px;vertical-align:middle;} .js-footer .footer-menu-link,.js-footer .contact-link,.js-footer .contact-info li{font-size:13.5px!important;line-height:2!important;color:var(--vl-ink)!important;} .js-footer .contact-info li{max-width:32ch;} .js-footer .footer-menu-link,.js-footer .contact-link{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .25s ease,color .2s ease;} .js-footer .footer-menu-link:hover,.js-footer .contact-link:hover{background-size:100% 1px;} /* Mobile accordion rows — same divider language as the nav-hamburger's .nav-item rows, so collapsing sections read as one system */ @media (max-width:767px){ .js-footer .js-accordion-container{border-top:1px solid var(--vl-line);} .js-footer .js-accordion-toggle-mobile{transition:color .2s ease;} .js-footer .js-accordion-toggle-mobile:hover .font-small.opacity-md-50{color:var(--vl-ink)!important;} } /* Newsletter: the one-liner the client asked for */ .js-footer .newsletter .font-small.opacity-md-50{color:var(--vl-ink)!important;font-family:var(--vl-display)!important;font-size:14px!important;letter-spacing:.06em;} .js-footer .newsletter-form{display:flex;gap:0;align-items:stretch;max-width:520px;} .js-footer .newsletter-form .form-group{flex:1;margin:0!important;} .js-footer .newsletter .form-control{background:#fff!important;border:1px solid var(--vl-line)!important;border-right:0!important;color:var(--vl-ink)!important;border-radius:0!important;height:48px!important;padding:0 16px!important;font:400 13.5px/1 var(--vl-body)!important;box-shadow:none!important;} .js-footer .newsletter .form-control:focus{border-color:var(--vl-ink)!important;} .js-footer .newsletter .btn-append{position:static!important;height:48px!important;width:auto!important;min-width:0!important;padding:0 22px!important;background:var(--vl-ink)!important;border:1px solid var(--vl-ink)!important;color:#fff!important;border-radius:0!important;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;text-indent:0!important;opacity:1!important;} .js-footer .newsletter .btn-append:hover{background:var(--vl-red)!important;border-color:var(--vl-red)!important;} .js-footer .newsletter-btn,.js-footer .js-news-send{display:none!important;} .js-footer svg{fill:var(--vl-ink)!important;} .js-footer .row>[class*="col"]{margin-bottom:24px;} /* Legal bar */ .footer-legal{background:var(--vl-bg-2)!important;border-top:1px solid var(--vl-line)!important;padding:18px 0!important;} .footer-legal .container-fluid{padding-left:var(--vl-gut)!important;padding-right:var(--vl-gut)!important;} .footer-legal,.footer-legal a,.footer-legal div,.footer-legal span{color:var(--vl-mute)!important;font-family:var(--vl-body)!important;font-size:11.5px!important;letter-spacing:0;text-transform:none;line-height:1.6!important;} .footer-legal img{filter:grayscale(1);opacity:.6;} /* The Tiendanube attribution is required by the platform, not editorial content — mute it to legal-bar weight instead of it standing out as the one full-ink mark in a row of grey text */ .powered-by-logo{opacity:.55;transition:opacity .2s ease;} .powered-by-logo:hover{opacity:1;} .js-notification-cookie-banner{background:#fff!important;color:var(--vl-ink)!important;border-top:1px solid var(--vl-line);font-family:var(--vl-body);font-size:13px;padding:16px 0;} .js-notification-cookie-banner strong{font-weight:600;} /* stock .btn-secondary — replace with the .vl-btn look instead of the theme's default filled button so it doesn't clash on first load */ .js-notification-cookie-banner .btn{height:auto!important;min-height:0!important;padding:10px 18px!important;margin:0!important;border:1px solid var(--vl-ink)!important;border-radius:0!important;background:transparent!important;color:var(--vl-ink)!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;text-shadow:none!important;box-shadow:none!important;transition:background-color .25s ease,color .25s ease;} .js-notification-cookie-banner .btn:hover{background:var(--vl-ink)!important;color:#fff!important;} /* Stock Tiendanube WhatsApp widget — not enabled on this store today, but restyled on-brand so it doesn't land as a stray green bubble if it ever is */ .btn-whatsapp{background-color:var(--vl-ink)!important;box-shadow:0 6px 20px -8px rgba(0,0,0,.4)!important;} .btn-whatsapp:hover{background-color:var(--vl-red)!important;} /* Rules the approved v2-refined design added to the admin custom CSS (Personalizar > Edición avanzada de CSS). They live here so they only load with the new design; the admin CSS stays as it is today. */ .item-image,.product-item-image-container{background-color:#f0f0f2!important;border-radius:0!important;overflow:hidden!important;border:none!important} .item-image img,.product-item-image{border-radius:0!important;object-fit:contain!important} .textbanner-image-background,.textbanner-image img,.asymmetric-products-background img,.banner-round,.banner-group-round,[class*="banner-round"],.home-video{border-radius:0!important;object-fit:cover!important} .section-banners-home .textbanner-image{height:440px!important;padding-top:0!important;border-radius:0px!important;position:relative!important} .section-banners-home .textbanner-text{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:100%!important;text-align:center!important;color:#ffffff!important;font-size:24px!important;font-weight:500!important;letter-spacing:0.5px!important} .container,.container-fluid{padding-left:24px!important;padding-right:24px!important;max-width:1760px!important;margin-left:auto!important;margin-right:auto!important} @media (min-width:768px){.container,.container-fluid{padding-left:48px!important;padding-right:48px!important;}} @media (min-width:1200px){.container,.container-fluid{padding-left:80px!important;padding-right:80px!important;}} .section-categories-home,.section-banners-home,.section-featured-home,.section-featured-products-home,.section-new-products-home,.section-informative-banners,.section-welcome-home{margin-top:0!important;margin-bottom:48px!important} @media (min-width:768px){.section-categories-home,.section-banners-home,.section-featured-home,.section-featured-products-home,.section-new-products-home,.section-informative-banners,.section-welcome-home{margin-bottom:80px!important}} .item-description{padding:18px 10px!important} .col-grid{padding-left:16px!important;padding-right:16px!important} .row-grid{margin-left:-16px!important;margin-right:-16px!important} .item-image{max-height:560px!important} .section-banners-home .textbanner-image{height:400px!important} .section-video-home.ml-3,.section-newsletter-home.ml-3{margin-left:0!important;} .section-newsletter-home,.section-newsletter-home *,.section-newsletter-home:before,.section-newsletter-home:after,.section-video-home,.section-video-home *,.section-video-home:before,.section-video-home:after{border-radius:0!important;} a:focus-visible,button:focus-visible,input:focus-visible,.vad-cat-nav:focus-visible{outline:2px solid #b84e20!important;outline-offset:2px!important;} .head-main .container-fluid{padding-left:16px!important;padding-right:16px!important;} @media (min-width:768px){.head-main .container-fluid{padding-left:24px!important;padding-right:24px!important;}} @media (min-width:1200px){.head-main .container-fluid{padding-left:32px!important;padding-right:32px!important;}} .item-image img{transition:transform .5s ease!important;} .item-product:hover .item-image img{transform:translateX(-50%) scale(1.045)!important;} .btn,.btn-primary,.btn-secondary,.btn-add-to-cart,input[type=submit]{border-radius:0!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease!important;} .item-link{transition:opacity .2s ease;} .vad-cat-slide-link{transition:background-color .3s ease;} .vad-cat-slide-link:hover{background-color:rgba(0,0,0,0.12);} /* ===================================================================== FOOTER — snipplets/vl/footer.tpl. Dark ink ground so the page closes on the same note as the sale banner above it: newsletter band, link columns, a full-width wordmark, then the legal line. ===================================================================== */ .vl-foot{--vl-foot-ink:#121212;--vl-foot-line:rgba(255,255,255,.12);--vl-foot-mute:rgba(255,255,255,.58);background:var(--vl-foot-ink);color:#fff;font-family:var(--vl-body);overflow:hidden;} .vl-foot a{color:inherit;text-decoration:none;} .vl-foot-in{max-width:calc(var(--vl-max) + var(--vl-gut) * 2);margin:0 auto;padding-left:var(--vl-gut);padding-right:var(--vl-gut);box-sizing:border-box;} .vl-foot-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .vl-foot-k{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:400 11px/1 var(--vl-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--vl-foot-mute);} .vl-foot-k:before{content:'';width:18px;height:1px;background:var(--vl-red);} /* newsletter band */ .vl-foot-news{border-bottom:1px solid var(--vl-foot-line);} .vl-foot-news-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(48px,6vw,88px);} .vl-foot-news-h{margin:0;font:400 clamp(32px,4.4vw,68px)/1.02 var(--vl-display);letter-spacing:.01em;text-transform:uppercase;color:#fff;} .vl-foot-field{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.5);transition:border-color .3s ease;} .vl-foot-field:focus-within{border-color:#fff;} .vl-foot-field input{flex:1;min-width:0;height:60px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font:400 18px/1 var(--vl-body);outline:none;box-shadow:none;} .vl-foot-field input::placeholder{color:rgba(255,255,255,.45);} .vl-foot-field button{display:inline-flex;align-items:center;gap:10px;padding:0 0 0 18px;border:0;background:none;color:#fff;cursor:pointer;font:400 12px/1 var(--vl-tiny);letter-spacing:.16em;text-transform:uppercase;transition:color .25s ease;} .vl-foot-field button svg{width:20px;height:20px;transition:transform .4s var(--vl-ease);} .vl-foot-field button:hover{color:var(--vl-red);} .vl-foot-field button:hover svg{transform:translateX(4px);} .vl-foot-field button:focus-visible,.vl-foot a:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;} .vl-foot-msg{margin:14px 0 0;font:400 13px/1.5 var(--vl-body);color:var(--vl-foot-mute);} .vl-foot-msg.is-ok{color:#fff;} .vl-foot-msg.is-err{color:#ff9a70;} /* link columns */ .vl-foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:clamp(28px,4vw,72px);padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,72px);} .vl-foot-tag{max-width:34ch;margin:0 0 28px;font:400 15px/1.6 var(--vl-body);color:rgba(255,255,255,.78);} .vl-foot-social{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;} .vl-foot-social a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--vl-foot-line);border-radius:999px;font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease,border-color .25s ease;} .vl-foot-social a svg{width:14px;height:14px;} .vl-foot-social a:hover{background:#fff;color:var(--vl-foot-ink);border-color:#fff;} .vl-foot-col ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;} .vl-foot-col li a,.vl-foot-col li span{position:relative;font:400 15px/1.45 var(--vl-body);color:rgba(255,255,255,.82);transition:color .2s ease;} .vl-foot-col li a:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--vl-ease);} .vl-foot-col li a:hover{color:#fff;} .vl-foot-col li a:hover:after{transform:scaleX(1);} .vl-foot-contact li a,.vl-foot-contact li span{display:grid;gap:4px;} .vl-foot-contact small{font:400 10px/1 var(--vl-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--vl-foot-mute);} .vl-foot-contact li a:after{display:none;} .vl-foot-contact li a:hover{color:var(--vl-red);} /* wordmark */ .vl-foot-mark{padding-top:8px;padding-bottom:clamp(28px,3vw,48px);} /* the logo component brings the header's logo classes; let it span the footer instead */ .vl-foot-mark > *,.vl-foot-mark a,.vl-foot-mark .logo-img-container{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;text-align:left;} .vl-foot-mark img{display:block;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;filter:invert(1);opacity:.94;} .vl-foot-mark .vl-foot-mark-text{display:block;font:400 clamp(40px,11vw,180px)/.9 var(--vl-display);letter-spacing:-.01em;text-transform:uppercase;color:#fff;} /* payments, shipping, seals */ .vl-foot-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:28px;} .vl-foot-pay{display:flex;flex-wrap:wrap;gap:6px;} .vl-foot-pay img{width:44px;height:28px;object-fit:contain;padding:3px 5px;background:#fff;border-radius:4px;} .vl-foot-seals{display:flex;flex-wrap:wrap;align-items:center;gap:12px;} .vl-foot-seals img{max-height:48px;width:auto;} /* legal line */ .vl-foot-legal{border-top:1px solid var(--vl-foot-line);} .vl-foot-legal-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding-top:22px;padding-bottom:22px;} .vl-foot-legal-text{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font:400 12px/1.6 var(--vl-body);color:var(--vl-foot-mute);} .vl-foot-legal-text a{color:rgba(255,255,255,.82);text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)!important;} .vl-foot-legal-text a:hover{color:#fff;text-decoration-color:#fff!important;} .vl-foot-claim{display:inline;} .vl-foot-sep{margin:0 6px;opacity:.5;} .vl-foot-powered svg,.vl-foot-powered img{filter:invert(1) brightness(1.6);opacity:.6;transition:opacity .2s ease;} .vl-foot-powered a:hover svg,.vl-foot-powered a:hover img{opacity:1;} @media (max-width:999px){ .vl-foot-news-in{grid-template-columns:minmax(0,1fr);align-items:start;} .vl-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;} .vl-foot-brand-col{grid-column:1 / -1;} } @media (max-width:560px){ .vl-foot-grid{grid-template-columns:minmax(0,1fr);gap:36px;} .vl-foot-field input{height:54px;font-size:16px;} .vl-foot-field button span{display:none;} .vl-foot-legal-in{flex-direction:column;align-items:flex-start;} } /* ===================================================================== OVERLAYS — the store's stock popups, drawers and notifications in the v2-refined look: newsletter popup, cart drawer, added-to-cart notice and modal, search, quick shop, cross-selling, cookie banner, alerts, WhatsApp. Stock markup (snipplets/modal.tpl and friends) is untouched; everything is scoped to body.vl-skin so the public theme never sees it. Appended to vl-skin.css by prototype/build-theme.mjs, so it loads BEFORE vl-shop.css (which carries vl-platform.css): selectors start with body.vl-skin to outrank vl-platform's `.vl-skin #modal-cart ...` rules. ===================================================================== */ body.vl-skin{ --vl-ov-pad:24px; --vl-ov-shadow:0 24px 70px -24px rgba(0,0,0,.35); --vl-icon-arrow: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%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --vl-icon-arrow-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8522e' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --vl-icon-arrow-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --vl-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --vl-icon-check-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --vl-icon-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } @media (max-width:767px){body.vl-skin{--vl-ov-pad:20px;}} /* --------------------------------------------------------------------- 1. Generic modal chrome (every js-modal except the hamburger, which vl-skin.css already owns) --------------------------------------------------------------------- */ body.vl-skin .js-modal{background:var(--vl-bg);color:var(--vl-ink);fill:var(--vl-ink);font-family:var(--vl-body);transition-timing-function:var(--vl-ease);} body.vl-skin .js-modal:not(.modal-nav-hamburger){border-radius:0;} /* stock scrollbars are a heavy black bar on a dark track */ body.vl-skin .js-modal::-webkit-scrollbar-track,body.vl-skin .js-modal .modal-scrollable-area::-webkit-scrollbar-track,body.vl-skin .js-modal .modal-scrollable::-webkit-scrollbar-track{background:transparent;} body.vl-skin .js-modal::-webkit-scrollbar-thumb,body.vl-skin .js-modal .modal-scrollable-area::-webkit-scrollbar-thumb,body.vl-skin .js-modal .modal-scrollable::-webkit-scrollbar-thumb,body.vl-skin .js-modal .modal-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:0;} body.vl-skin .js-modal::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4);} /* header: title left, close right, one hairline under it. The whole bar is a js-modal-close target in the stock markup — keep that, drop the fade. */ body.vl-skin .js-modal:not(.modal-nav-hamburger)>.modal-header:not(.modal-floating-close), body.vl-skin .js-modal:not(.modal-nav-hamburger)>form>.modal-header, body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-scrollable-area>.modal-header{display:block;margin:0;width:100%;padding:14px var(--vl-ov-pad);border-bottom:1px solid var(--vl-line)!important;font:500 15px/1.25 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);opacity:1;} body.vl-skin .js-modal .modal-header:hover,body.vl-skin .js-modal .modal-header:focus{opacity:1;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header>.row{align-items:center;flex-wrap:nowrap;margin:0;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header>.row>.col,body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header>.row>.col-auto{padding:0;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header>.row>.col{min-width:0;padding-right:16px;} body.vl-skin .js-modal .modal-header h3,body.vl-skin .js-modal .modal-header .h4{margin:0!important;font:500 15px/1.25 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);} /* close control: vl-skin gives it the Impact label + x mask; make it a real 40px tap target and keep it on one line */ body.vl-skin .js-modal .js-modal-close.btn-link{min-height:40px;padding:0 2px!important;margin:0 -2px 0 0!important;white-space:nowrap;font-size:11px!important;line-height:1!important;float:none!important;} body.vl-skin .js-modal .modal-header.text-right{text-align:right;} body.vl-skin .js-modal .js-modal-close.btn-link:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;} /* inline "keep shopping" links reuse js-modal-close: not a close button visually, so no x icon — the .vl-link underline instead */ body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-body .js-modal-close.btn-link:before{display:none;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-body .js-modal-close.btn-link{min-height:0;display:inline-flex!important;padding:0 0 5px!important;margin:0!important;border-bottom:1px solid currentColor;font-size:12px!important;letter-spacing:.1em;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-body{padding:20px var(--vl-ov-pad);} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-footer{margin:0;padding:16px var(--vl-ov-pad);border-top:1px solid var(--vl-line);} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-footer:not(:has(*)){display:none!important;} /* vl-skin.css pads every .container/.container-fluid 24-80px with !important for page layout; inside a panel that just pushes content off-grid */ body.vl-skin .js-modal:not(.modal-nav-hamburger) .container,body.vl-skin .js-modal:not(.modal-nav-hamburger) .container-fluid, body.vl-skin .js-notification-cookie-banner .container-fluid{padding-left:0!important;padding-right:0!important;max-width:none!important;} /* overlay: the same dim as our side panels (.vl-panel-bg) */ body.vl-skin .modal-overlay{background:rgba(23,21,15,.45);} /* floating panels get a real edge instead of the stock grey sheet */ body.vl-skin .modal-docked-md:not(.modal-nav-hamburger),body.vl-skin .modal-centered-md,body.vl-skin .modal-bottom-sheet{box-shadow:var(--vl-ov-shadow);} body.vl-skin .modal-shadow{box-shadow:var(--vl-ov-shadow);} @media (min-width:768px){ body.vl-skin .js-modal.modal-right-md,body.vl-skin .js-modal.modal-docked-md-right,body.vl-skin .js-modal.modal-centered-md,body.vl-skin .js-modal.modal-bottom.modal-centered-md{border-radius:0;} body.vl-skin .js-modal.modal-right-md{box-shadow:-20px 0 60px rgba(0,0,0,.18);} } /* phones: bottom sheets get the same 16px top corners as .vl-side */ @media (max-width:767px){ body.vl-skin .js-modal.modal-bottom-sheet:not(.js-fullscreen-modal){border-radius:16px 16px 0 0;overflow:hidden;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header,body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header h3,body.vl-skin .js-modal:not(.modal-nav-hamburger) .modal-header .col{font-size:13.5px!important;letter-spacing:.02em!important;} } /* --------------------------------------------------------------------- 2. Buttons, links, inputs, selects and alerts inside overlays --------------------------------------------------------------------- */ body.vl-skin .js-modal .btn,body.vl-skin .js-notification .btn,body.vl-skin .js-alert-added-to-cart .btn{border-radius:0!important;text-shadow:none;box-shadow:none;} body.vl-skin .js-modal .btn:hover,body.vl-skin .js-modal .btn:focus{opacity:1;} /* primary = ink, rust on hover (the stock custom CSS forces rust with !important) */ body.vl-skin .js-modal .btn-primary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px!important;border:1px solid var(--vl-ink)!important;background:var(--vl-ink)!important;color:#fff!important;fill:#fff;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.14em!important;text-transform:uppercase;transition:background-color .25s ease,border-color .25s ease!important;} body.vl-skin .js-modal .btn-primary:hover,body.vl-skin .js-modal .btn-primary:focus-visible{background:var(--vl-red)!important;border-color:var(--vl-red)!important;color:#fff!important;} body.vl-skin .js-modal .btn-primary.btn-big{min-height:52px;} /* stock anchors carry .d-block (display:block!important), which would drop the centring */ body.vl-skin .js-modal a.btn-primary,body.vl-skin .js-modal button.btn-primary{display:inline-flex!important;} body.vl-skin .js-modal a.btn-primary.d-block,body.vl-skin .js-modal a.btn-primary.btn-block,body.vl-skin .js-modal button.btn-primary.btn-block{display:flex!important;} body.vl-skin .js-modal .btn-primary:focus-visible,body.vl-skin .js-modal .btn-secondary:focus-visible{outline:2px solid var(--vl-ink);outline-offset:3px;} body.vl-skin .js-modal .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px!important;border:1px solid var(--vl-ink)!important;background:transparent!important;color:var(--vl-ink)!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease!important;} body.vl-skin .js-modal .btn-secondary:hover{background:var(--vl-ink)!important;color:#fff!important;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .btn-link:not(.js-modal-close){color:var(--vl-ink);fill:var(--vl-ink);font-family:var(--vl-body);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s ease;} body.vl-skin .js-modal:not(.modal-nav-hamburger) .btn-link:not(.js-modal-close):hover{color:var(--vl-red);fill:var(--vl-red);opacity:1;} body.vl-skin .js-modal .form-label{float:none;display:block;width:auto;margin:0 0 10px;font:400 11px/1.2 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin .js-modal .form-control:not(.search-input):not(.js-cart-quantity-input):not(.js-quantity-input), body.vl-skin .js-modal .form-select{height:48px;padding:0 14px;border:1px solid var(--vl-line);border-radius:0!important;background-color:#fff;color:var(--vl-ink);font:400 14px/1.2 var(--vl-body);box-shadow:none;transition:border-color .2s ease;} body.vl-skin .js-modal .form-control:not(.search-input):hover,body.vl-skin .js-modal .form-select:hover{border-color:rgba(0,0,0,.4);} body.vl-skin .js-modal .form-control:not(.search-input):focus,body.vl-skin .js-modal .form-select:focus{border-color:var(--vl-ink);} body.vl-skin .js-modal .form-control::placeholder{color:var(--vl-mute);opacity:1;} body.vl-skin .js-modal .form-select{padding-right:40px;cursor:pointer;} body.vl-skin .js-modal .form-select-icon{right:14px;bottom:auto;top:50%;transform:translateY(-50%);background:transparent;fill:var(--vl-ink);line-height:0;} body.vl-skin .js-modal .form-group .form-label+.form-select+.form-select-icon{top:auto;bottom:24px;transform:translateY(50%);} body.vl-skin .js-modal .form-select-icon svg{width:12px;height:12px;} @media (max-width:767px){ /* 16px keeps iOS from zooming into the field */ body.vl-skin .js-modal .form-control:not(.js-cart-quantity-input):not(.js-quantity-input),body.vl-skin .js-modal .form-select{font-size:16px;} } body.vl-skin .js-modal .alert{position:relative;margin:0 0 16px;padding:12px 14px;border:0;border-left:2px solid var(--vl-ink);border-radius:0;background:var(--vl-bg-2);color:var(--vl-ink);font:400 12.5px/1.5 var(--vl-body);text-align:left;} body.vl-skin .js-modal .alert:before{content:none;display:none;} body.vl-skin .js-modal .alert-danger,body.vl-skin .js-modal .alert-error{border-left-color:var(--vl-red);background:rgba(168,82,46,.07);} body.vl-skin .js-modal .alert-warning{border-left-color:var(--vl-red-dark);} body.vl-skin .js-modal .alert-info{border-left-color:var(--vl-line);} body.vl-skin .js-modal .alert .btn-link{font-size:inherit;} body.vl-skin .js-modal .text-accent,body.vl-skin .js-modal .text-primary{color:var(--vl-red)!important;} body.vl-skin .js-modal .price-compare{opacity:1;color:var(--vl-mute);} /* --------------------------------------------------------------------- 3. Newsletter popup (snipplets/home/home-popup.tpl, #home-modal) Editorial card: kicker + Lexend headline, underline email field with an "Enviar ->" submit, like the footer's .vl-foot-field. --------------------------------------------------------------------- */ body.vl-skin #home-modal{padding-top:0;background:var(--vl-bg);} @media (min-width:768px){ body.vl-skin #home-modal.modal-docked-md-right{width:400px;right:24px;border:1px solid var(--vl-line);} body.vl-skin #home-modal.modal-docked-md-right.modal-show{bottom:24px;} } body.vl-skin #home-modal>.modal-header{padding:12px 16px 0 var(--vl-ov-pad)!important;border-bottom:0!important;} body.vl-skin #home-modal>.modal-header h3:empty{display:none;} body.vl-skin #home-modal>.modal-header h3:not(:empty){font-size:20px!important;line-height:1.12!important;letter-spacing:.01em!important;padding:12px 0 14px;} body.vl-skin #home-modal .modal-body{padding:8px var(--vl-ov-pad) 26px;} /* no admin title set (the h3 renders empty): show the footer's own copy so the card is never just a bare field. An admin title replaces it automatically. */ body.vl-skin #home-modal:has(.modal-header h3:empty) .modal-body:before{content:'Newsletter';display:block;margin:-4px 0 14px;padding-left:30px;background:linear-gradient(var(--vl-red),var(--vl-red)) left center/18px 1px no-repeat;font:400 11px/1 var(--vl-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin #home-modal:has(.modal-header h3:empty) .modal-body:after{content:'Enterate primero de cada drop.';display:block;order:-1;} body.vl-skin #home-modal:has(.modal-header h3:empty) .modal-body{display:flex;flex-direction:column;} body.vl-skin #home-modal:has(.modal-header h3:empty) .modal-body:before{order:-2;} body.vl-skin #home-modal:has(.modal-header h3:empty) .modal-body:after{margin:0 0 6px;font:400 clamp(22px,2.1vw,26px)/1.08 var(--vl-display);letter-spacing:.01em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #home-modal .modal-body>p{margin:0 0 4px!important;font:400 14px/1.5 var(--vl-body);color:var(--vl-mute);} body.vl-skin #home-modal .modal-img-full{display:block;width:calc(100% + var(--vl-ov-pad) * 2);max-width:none;height:220px;max-height:none;margin:0 calc(var(--vl-ov-pad) * -1) 20px!important;object-fit:cover;order:-3;} body.vl-skin #home-modal .modal-header+.modal-body .modal-img-full{margin-top:-8px!important;} body.vl-skin #home-modal .newsletter{margin-top:14px;} body.vl-skin #home-modal .newsletter-form{display:flex;align-items:stretch;border-bottom:1px solid var(--vl-ink);transition:border-color .3s ease;} body.vl-skin #home-modal .newsletter-form:focus-within{border-bottom-color:var(--vl-red);} body.vl-skin #home-modal .newsletter-form .form-group{flex:1;min-width:0;margin:0;} body.vl-skin #home-modal .newsletter-form .form-control{height:56px!important;padding:0 8px 0 0!important;border:0!important;background:transparent!important;color:var(--vl-ink);font:400 16px/1 var(--vl-body)!important;} body.vl-skin #home-modal .newsletter-form .form-control:focus{outline:none;} body.vl-skin #home-modal .newsletter-form .form-control:focus-visible{outline:none;box-shadow:none;} /* the real submit is a text-indented input under a "+" icon; show its own value ("Enviar") with an arrow and drop the icon */ body.vl-skin #home-modal .js-news-popup-submit.btn-append{position:static;flex:none;width:auto;height:auto;min-height:48px;padding:0 30px 0 16px!important;border:0!important;border-radius:0!important;background:transparent var(--vl-icon-arrow) right center/20px no-repeat!important;color:var(--vl-ink)!important;text-indent:0;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .25s ease,background-position .4s var(--vl-ease)!important;} body.vl-skin #home-modal .js-news-popup-submit.btn-append:hover{color:var(--vl-red)!important;background-image:var(--vl-icon-arrow-red)!important;background-position:calc(100% + 4px) center!important;} body.vl-skin #home-modal .js-news-popup-submit.btn-append:focus-visible{outline:2px solid var(--vl-red);outline-offset:2px;} body.vl-skin #home-modal .js-news-send{display:none!important;} body.vl-skin #home-modal .newsletter-form .js-news-spinner.btn-append{position:absolute;top:0;right:0;width:48px;height:100%;border:0;background:#fff;display:flex;align-items:center;justify-content:center;text-indent:0;} body.vl-skin #home-modal .newsletter-form .js-news-spinner[style*="none"]{display:none!important;} body.vl-skin #home-modal .newsletter-form .newsletter-btn-spinner{position:static;width:16px;height:16px;padding:0;transform:none;fill:var(--vl-ink);text-indent:0;} body.vl-skin #home-modal .js-news-form>.alert{margin:14px 0 0!important;} body.vl-skin #home-modal .js-news-popup-success{border-left-color:var(--vl-ink);} /* "Sin spam" note under the field, only while no admin text is set */ body.vl-skin #home-modal:has(.modal-header h3:empty) .newsletter:after{content:'Drops, restocks y novedades. Sin spam.';display:block;margin-top:12px;font:400 12.5px/1.5 var(--vl-body);color:var(--vl-mute);} body.vl-skin #home-modal .btn-primary{display:inline-flex;margin-top:8px;} @media (max-width:767px){ body.vl-skin #home-modal.modal-bottom-sheet{border-radius:16px 16px 0 0;} body.vl-skin #home-modal .modal-body{padding-bottom:calc(24px + env(safe-area-inset-bottom));} } /* --------------------------------------------------------------------- 4. Cart drawer (#modal-cart) — reads like the quick-add .vl-side panel --------------------------------------------------------------------- */ @media (min-width:768px){ body.vl-skin #modal-cart.modal-docked-md{width:min(480px,100vw);} } body.vl-skin #modal-cart{background:var(--vl-bg);} body.vl-skin #modal-cart .modal-header,body.vl-skin #modal-cart .modal-header .col{padding-top:0;padding-bottom:0;font:500 15px/1.25 var(--vl-display)!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--vl-ink);} body.vl-skin #modal-cart>form>.modal-header{padding:14px var(--vl-ov-pad)!important;} /* vl-platform's `.modal-header *` resets the close label's case and tracking */ body.vl-skin #modal-cart .modal-header .js-modal-close.btn-link{font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase!important;} body.vl-skin #modal-cart .modal-body{padding:0 var(--vl-ov-pad) calc(24px + env(safe-area-inset-bottom));} /* line items */ body.vl-skin #modal-cart .cart-item{position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;margin:0;padding:18px 0;border-bottom:1px solid var(--vl-line);} body.vl-skin #modal-cart .cart-item-image-col{flex:none;width:88px;height:auto;padding:0;} body.vl-skin #modal-cart .cart-item-image-col a{display:block;background:var(--vl-bg-2);} body.vl-skin #modal-cart .cart-item-image{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;border-radius:0!important;background:var(--vl-bg-2);mix-blend-mode:multiply;} body.vl-skin #modal-cart .cart-item>.col{flex:1;min-width:0;padding:0 0 0 16px;} body.vl-skin #modal-cart .cart-item-name{padding-right:36px;} body.vl-skin #modal-cart .cart-item-name>div{margin-bottom:12px!important;} body.vl-skin #modal-cart .cart-item-name a{display:block;font:600 11.5px/1.35 var(--vl-body)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink)!important;text-decoration:none;transition:color .2s ease;} body.vl-skin #modal-cart .cart-item-name a:hover{color:var(--vl-red)!important;} body.vl-skin #modal-cart .cart-item-name small{display:block;margin-top:6px;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute);} body.vl-skin #modal-cart .cart-item-name .text-accent{font:400 10.5px/1.3 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;} body.vl-skin #modal-cart .cart-item-name .text-accent:empty{display:none;} body.vl-skin #modal-cart .cart-item-name>div>div:empty{display:none;} /* square stepper, same as .vl-qty */ body.vl-skin #modal-cart .form-quantity,body.vl-skin .js-modal .form-quantity{display:inline-flex;align-items:center;width:auto;height:38px;padding:0!important;border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff;} body.vl-skin .js-modal .form-quantity:hover{border-color:rgba(0,0,0,.4)!important;} body.vl-skin .js-modal .form-quantity>.row,body.vl-skin .js-modal .form-quantity>.form-row{flex-wrap:nowrap;height:100%;margin:0!important;} body.vl-skin .js-modal .form-quantity .form-quantity-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;padding:0!important;margin:0;background:none!important;border:0!important;color:var(--vl-ink);fill:var(--vl-ink);cursor:pointer;transition:color .2s ease,fill .2s ease;} body.vl-skin .js-modal .form-quantity .form-quantity-icon:hover{fill:var(--vl-red);color:var(--vl-red);} body.vl-skin .js-modal .form-quantity .form-quantity-icon svg{width:11px;height:11px;} body.vl-skin .js-modal .form-quantity .form-control-container{flex:0 0 auto;width:30px;max-width:none;padding:0!important;} body.vl-skin .js-modal .form-quantity .form-control{width:100%;height:36px;padding:0!important;border:0!important;background:transparent!important;text-align:center;font:500 13px/1 var(--vl-body)!important;color:var(--vl-ink);-moz-appearance:textfield;} body.vl-skin .js-modal .form-quantity .form-control::-webkit-inner-spin-button,body.vl-skin .js-modal .form-quantity .form-control::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} body.vl-skin #modal-cart .cart-item-quantity{float:left;} body.vl-skin #modal-cart .cart-item-spinner{top:50%;transform:translateY(-50%);fill:var(--vl-ink);} body.vl-skin #modal-cart .cart-item-subtotal{float:right;margin:0;text-align:right;font:600 13px/1.35 var(--vl-body);color:var(--vl-ink);} body.vl-skin #modal-cart .cart-item-subtotal .text-accent{font:600 11.5px/1.35 var(--vl-body)!important;} body.vl-skin #modal-cart .cart-item-subtotal .price-compare{margin-left:4px;font:400 11.5px/1.35 var(--vl-body);} body.vl-skin #modal-cart .cart-item-subtotal .js-cart-item-subtotal{display:block;margin-top:2px!important;font:600 13px/1.35 var(--vl-body);} body.vl-skin #modal-cart .cart-item-delete{position:absolute;top:10px;right:-10px;padding:0;} body.vl-skin #modal-cart .cart-item-delete .btn-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--vl-ink);fill:var(--vl-ink);text-decoration:none;} body.vl-skin #modal-cart .cart-item-delete .btn-link:hover{fill:var(--vl-red);color:var(--vl-red);} body.vl-skin #modal-cart .cart-item-delete svg{width:12px;height:12px;font-size:12px;} /* empty cart */ body.vl-skin #modal-cart .js-empty-ajax-cart .alert-info{display:block;margin:40px 0 0;padding:56px 12px 0;border:0;background:none;text-align:center;font:400 13.5px/1.5 var(--vl-body);color:var(--vl-mute);} body.vl-skin #modal-cart .js-empty-ajax-cart .alert-info:before{content:'Tu bolsa está vacía';display:block;width:auto;height:auto;margin:0 0 12px;font:500 18px/1.15 var(--vl-display);letter-spacing:.02em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #modal-cart #error-ajax-stock .alert{margin:16px 0 0;} /* free-shipping progress: ink copy, rust bar (stock is blue) */ body.vl-skin #modal-cart .js-ship-free-rest,body.vl-skin .js-modal .progress-bar{margin:18px 0 0!important;padding:0 0 18px!important;gap:10px;border-bottom:1px solid var(--vl-line);background:none;} body.vl-skin .js-modal .progress-bar-title,body.vl-skin .js-modal .ship-free-rest-message{color:var(--vl-ink)!important;font:400 12.5px/1.45 var(--vl-body);} body.vl-skin .js-modal .ship-free-rest-message .js-ship-free-dif{font-weight:600;color:var(--vl-red);} body.vl-skin .js-modal .ship-free-rest-message .bar-progress-success{font:400 11px/1.4 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-red);} body.vl-skin .js-modal .progress-bar-subtitle{color:var(--vl-mute);} body.vl-skin .js-modal .bar-progress{height:3px;border-radius:0;background:var(--vl-bg-2);} body.vl-skin .js-modal .bar-progress-active{height:3px;border-radius:0;background:var(--vl-red);} /* summary rows: label left, amount right, inside the drawer padding (the stock pl-md-0/pr-md-0 on a negative-margin .row pushed "Envío" past both edges) */ body.vl-skin #modal-cart [data-store="cart-subtotal"], body.vl-skin #modal-cart .price-without-taxes-cart-container, body.vl-skin #modal-cart #shipping-cost-container, body.vl-skin #modal-cart .js-shipping-discount-row, body.vl-skin #modal-cart .js-total-promotions-detail-row, body.vl-skin #modal-cart .js-cart-total-container>.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-left:0!important;margin-right:0!important;} body.vl-skin #modal-cart [data-store="cart-subtotal"][style*="none"], body.vl-skin #modal-cart .price-without-taxes-cart-container[style*="none"], body.vl-skin #modal-cart #shipping-cost-container[style*="none"], body.vl-skin #modal-cart .js-shipping-discount-row[style*="none"]{display:none!important;} body.vl-skin #modal-cart [data-store="cart-subtotal"]>span, body.vl-skin #modal-cart .price-without-taxes-cart-container>span, body.vl-skin #modal-cart #shipping-cost-container>span, body.vl-skin #modal-cart .js-shipping-discount-row>span, body.vl-skin #modal-cart .js-total-promotions-detail-row>span, body.vl-skin #modal-cart .js-cart-total-container>.row>span{flex:0 1 auto;max-width:none;width:auto;padding:0!important;} body.vl-skin #modal-cart .js-cart-total-container>.row>.col-12{flex:1 0 100%;} body.vl-skin #modal-cart [data-store="cart-subtotal"]{margin:18px 0 6px!important;font:400 12px/1.3 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #modal-cart [data-store="cart-subtotal"] small{font:inherit;color:var(--vl-mute);} body.vl-skin #modal-cart [data-store="cart-subtotal"] .js-ajax-cart-total{font:600 16px/1 var(--vl-body);letter-spacing:0;} body.vl-skin #modal-cart .price-without-taxes-cart-container{opacity:1;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute);} body.vl-skin #modal-cart .js-total-promotions{font:400 12.5px/1.5 var(--vl-body);} body.vl-skin #modal-cart .js-total-promotions-detail-row{margin-top:6px;} /* shipping calculator */ body.vl-skin #modal-cart .cart-fulfillment-info{margin:0 0 4px!important;} body.vl-skin #modal-cart .cart-fulfillment-info>.divider{margin:18px 0 0!important;border-color:var(--vl-line);} body.vl-skin #modal-cart [data-store="shipping-calculator"]{margin:18px 0 0!important;} body.vl-skin #modal-cart .shipping-calculator-form .form-group{margin-bottom:0!important;} body.vl-skin #modal-cart .shipping-calculator-form .form-group>.row{margin:0;} body.vl-skin #modal-cart .shipping-calculator-form .form-group>.row>.col-12{padding:0;} body.vl-skin #modal-cart .shipping-calculator-form .js-shipping-input{padding-right:60px!important;} body.vl-skin #modal-cart .js-calculate-shipping.btn-append{top:0;right:0;width:48px;height:48px;margin:0!important;padding:0!important;border:0!important;border-left:1px solid var(--vl-line)!important;background:transparent!important;color:var(--vl-ink);fill:var(--vl-ink);text-indent:0;transition:background-color .25s ease,fill .25s ease!important;} body.vl-skin #modal-cart .js-calculate-shipping.btn-append:hover{background:var(--vl-ink)!important;fill:#fff;color:#fff;} body.vl-skin #modal-cart .js-calculate-shipping .btn-icon{width:12px;height:14px;font-size:14px;} body.vl-skin #modal-cart .shipping-calculator-form>.btn-link,body.vl-skin #modal-cart .shipping-calculator-form a.btn-link{margin:12px 0 4px!important;font-size:12px!important;color:var(--vl-mute);} body.vl-skin #modal-cart .shipping-calculator-head.with-form{height:124px;} body.vl-skin #modal-cart .shipping-calculator-head.with-error{height:204px;} body.vl-skin #modal-cart .shipping-calculator-head.with-zip{height:56px;} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode .font-small{font:400 12.5px/1.4 var(--vl-body);color:var(--vl-mute);} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode strong{color:var(--vl-ink);} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode{text-align:left;} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode .row{margin:0;flex-wrap:nowrap;justify-content:space-between;gap:12px;} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode .row>[class*="col"]{padding:0;} body.vl-skin #modal-cart .js-shipping-calculator-with-zipcode .container{padding:0;} body.vl-skin #modal-cart .placeholder-color,body.vl-skin #modal-cart .placeholder-shine{background-color:var(--vl-bg-2);} /* shipping options: bordered rows, ink when chosen */ body.vl-skin .js-modal .radio-button-content{margin-bottom:8px;padding:14px 14px 14px 16px;border:1px solid var(--vl-line);border-radius:0!important;background:#fff;transition:border-color .2s ease;} body.vl-skin .js-modal .radio-button:hover .radio-button-content{border-color:rgba(0,0,0,.4);} body.vl-skin .js-modal .radio-button input[type="radio"]:checked+.radio-button-content,body.vl-skin .js-modal .radio-button.selected .radio-button-content{border-color:var(--vl-ink);} body.vl-skin .js-modal .radio-button-icons-container{top:16px;} body.vl-skin .js-modal .radio-button-icon.unchecked{background:#fff;border:1px solid rgba(0,0,0,.45);} body.vl-skin .js-modal .radio-button-icon.checked{background:var(--vl-ink);} body.vl-skin .js-modal .radio-button-label{font:400 12.5px/1.45 var(--vl-body);color:var(--vl-ink);} body.vl-skin .js-modal .radio-button-label .font-weight-bold{font-weight:600;} body.vl-skin .js-modal .shipping-option-name{font-weight:600;} body.vl-skin #modal-cart #shipping-cost-container{margin:14px 0 0!important;font:400 12.5px/1.4 var(--vl-body);color:var(--vl-ink);} body.vl-skin #modal-cart #shipping-cost-container .opacity-40{opacity:1;color:var(--vl-mute);} body.vl-skin #modal-cart .js-shipping-discount-row{font:400 12.5px/1.4 var(--vl-body);} /* total */ body.vl-skin #modal-cart .js-cart-total-container{float:none!important;width:100%;margin:18px 0 18px!important;padding:18px 0 0!important;border-top:1px solid var(--vl-line);} body.vl-skin #modal-cart .js-cart-total-container>.row{font:400 13px/1 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #modal-cart .js-cart-total-container .js-cart-total{font:600 22px/1 var(--vl-body)!important;letter-spacing:0;} body.vl-skin #modal-cart .cart-installments{margin-top:8px!important;font:400 12px/1.4 var(--vl-body)!important;letter-spacing:0;text-transform:none;color:var(--vl-mute);} body.vl-skin #modal-cart .cart-installments span{font:inherit;} body.vl-skin #modal-cart .cart-installments .cart-installments-money,body.vl-skin #modal-cart .cart-installments .cart-installments-amount{color:var(--vl-ink);font-weight:600;} /* checkout + the payment buttons Tiendanube injects next to it (Nube Pay): same height, width and square corners; their own brand colour stays */ body.vl-skin #modal-cart input[name="go_to_checkout"]{width:100%;min-height:54px;font-size:12px!important;} body.vl-skin #modal-cart .js-ajax-cart-submit{margin-bottom:10px!important;display:grid;gap:10px;} body.vl-skin #modal-cart .js-ajax-cart-submit>:not(input),body.vl-skin #modal-cart .js-nubesdk-slot{width:100%;} body.vl-skin #modal-cart .js-ajax-cart-submit button,body.vl-skin #modal-cart .js-ajax-cart-submit a, body.vl-skin #modal-cart [data-nubesdk-slot*="go_to_checkout"] button,body.vl-skin #modal-cart [data-nubesdk-slot*="go_to_checkout"] a{min-height:54px;border-radius:0!important;} body.vl-skin #modal-cart [data-nubesdk-slot*="go_to_checkout"]:not(:empty){margin-top:10px;} body.vl-skin #modal-cart .js-visible-on-cart-filled>.text-center{margin:6px 0 0!important;} body.vl-skin #modal-cart .js-ajax-cart-minimum,body.vl-skin #modal-cart .js-checkout-enabled-validation-messages .alert{margin:0 0 12px!important;} @media (max-width:767px){ body.vl-skin #modal-cart .form-quantity{height:42px;} body.vl-skin #modal-cart .form-quantity .form-quantity-icon{width:42px;height:40px;} body.vl-skin #modal-cart .form-quantity .form-control{height:40px;} body.vl-skin #modal-cart .cart-item-image-col{width:80px;} body.vl-skin #modal-cart .shipping-calculator-form a.btn-link,body.vl-skin #modal-cart .modal-body .js-modal-close.btn-link{display:inline-flex!important;align-items:center;min-height:40px;} body.vl-skin #modal-cart .modal-body .js-modal-close.btn-link{padding:0!important;border-bottom:0;text-decoration:underline;text-underline-offset:5px;} body.vl-skin #modal-cart .js-shipping-calculator-change-zipcode{min-height:40px;} body.vl-skin #modal-cart .shipping-calculator-head.with-form{height:136px;} body.vl-skin #modal-cart .shipping-calculator-head.with-error{height:216px;} } /* --------------------------------------------------------------------- 5. Added to cart: floating notice (notification-cart.tpl) and the recommendations modal (#related-products-notification) --------------------------------------------------------------------- */ body.vl-skin .js-alert-added-to-cart .notification-cart{margin:10px;padding:14px 8px 14px 18px;border:1px solid var(--vl-line);border-radius:0;background:#fff;color:var(--vl-ink);fill:var(--vl-ink);box-shadow:var(--vl-ov-shadow);text-align:left;} body.vl-skin .js-alert-added-to-cart .notification-cart>.row{flex-wrap:nowrap;align-items:center;margin:0;} body.vl-skin .js-alert-added-to-cart .notification-cart>.row>[class*="col"]{padding:0;} body.vl-skin .js-alert-added-to-cart [data-store="cart-notification-item"]{display:flex;align-items:center;gap:12px;font:400 12px/1.3 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin .js-alert-added-to-cart [data-store="cart-notification-item"]:before{content:'';flex:none;width:28px;height:28px;background:var(--vl-red) var(--vl-icon-check-white) center/16px no-repeat;} body.vl-skin .js-alert-added-to-cart .js-cart-notification-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer;color:var(--vl-ink);fill:var(--vl-ink);transition:fill .2s ease;} body.vl-skin .js-alert-added-to-cart .js-cart-notification-close:hover{fill:var(--vl-red);} body.vl-skin .js-alert-added-to-cart .js-cart-notification-close svg{width:14px;height:14px;} @media (min-width:768px){ body.vl-skin .js-alert-added-to-cart.notification-cart-container.notification-fixed{max-width:360px;right:var(--vl-gut,20px);} body.vl-skin .js-alert-added-to-cart .notification-cart{margin:10px 0 0;} } @media (max-width:767px){ body.vl-skin .js-alert-added-to-cart .notification-cart{margin:0;border-width:1px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom));} } body.vl-skin #related-products-notification .modal-header .col:before{content:'';display:inline-block;vertical-align:-4px;width:20px;height:20px;margin-right:10px;background:var(--vl-red) var(--vl-icon-check-white) center/13px no-repeat;} body.vl-skin #related-products-notification .modal-body{padding:20px var(--vl-ov-pad) 24px!important;} body.vl-skin #related-products-notification .modal-body>.row{align-items:flex-start;margin:0;gap:16px 24px;} @media (min-width:768px){body.vl-skin #related-products-notification .modal-body>.row{flex-wrap:nowrap;}} body.vl-skin #related-products-notification .modal-body>.row>[class*="col"]{padding:0;margin-bottom:0!important;} @media (min-width:768px){body.vl-skin #related-products-notification .modal-body>.row>.col-md-auto{flex:0 0 250px;max-width:250px;}} body.vl-skin #related-products-notification .js-cart-notification-item{flex-wrap:nowrap;align-items:flex-start;} body.vl-skin #related-products-notification .notification-img{position:relative;flex:none;width:72px;height:auto;aspect-ratio:2/3;padding:0!important;background:var(--vl-bg-2);} body.vl-skin #related-products-notification .notification-img img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;transform:none;top:4%;mix-blend-mode:multiply;} body.vl-skin #related-products-notification .js-cart-notification-item>.col{padding-left:14px!important;font:400 12px/1.45 var(--vl-body);color:var(--vl-mute);} body.vl-skin #related-products-notification .js-cart-notification-item-name{display:block;margin-bottom:4px;font:600 11.5px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #related-products-notification .js-cart-notification-item>.col>div{margin:0 0 4px!important;} body.vl-skin #related-products-notification .js-cart-notification-item-price{font-weight:600;color:var(--vl-ink);} body.vl-skin #related-products-notification .col-md-auto .row.h5{display:flex;flex-wrap:nowrap;gap:10px;justify-content:space-between;align-items:baseline;margin:0 0 12px;font:400 12px/1.3 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink)!important;} body.vl-skin #related-products-notification .col-md-auto .row.h5>*{padding:0;flex:0 1 auto;white-space:nowrap;} body.vl-skin #related-products-notification .col-md-auto .row.h5 strong{font-weight:400;} body.vl-skin #related-products-notification .col-md-auto .row.h5 .js-cart-total{font:600 16px/1 var(--vl-body);letter-spacing:0;color:var(--vl-ink)!important;} /* the store's custom CSS pins every .js-cart-widget-amount as the header badge */ body.vl-skin #related-products-notification .js-cart-widget-amount{position:static!important;transform:none!important;display:inline!important;color:inherit!important;font:inherit!important;letter-spacing:inherit!important;} body.vl-skin #related-products-notification .js-related-products-notification-container{margin-top:22px;padding-top:20px;border-top:1px solid var(--vl-line);} body.vl-skin #related-products-notification .js-related-products-notification-container .h5,body.vl-skin #related-products-notification .js-related-products-notification-container h5{display:flex;align-items:center;gap:12px;margin:0 0 16px!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin #related-products-notification .js-related-products-notification-container .h5:before,body.vl-skin #related-products-notification .js-related-products-notification-container h5:before{content:'';width:18px;height:1px;background:var(--vl-red);} body.vl-skin #related-products-notification .related-products-notification-container{margin-right:0;} body.vl-skin #related-products-notification .item-image{background:var(--vl-bg-2);} body.vl-skin #related-products-notification .item-image img{mix-blend-mode:multiply;} body.vl-skin #related-products-notification .item-name{font:600 11px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #related-products-notification .item-price{font:600 12.5px/1.3 var(--vl-body);color:var(--vl-ink);} body.vl-skin #related-products-notification .item-description{padding-left:0!important;padding-right:0!important;} /* --------------------------------------------------------------------- 6. Search modal (#nav-search) — the stock palette for this modal is a dark sheet, so the suggestions came out near-white on white --------------------------------------------------------------------- */ body.vl-skin .modal-nav-search{color:var(--vl-ink);fill:var(--vl-ink);} body.vl-skin .modal-nav-search>.modal-header{padding:12px var(--vl-gut)!important;} body.vl-skin .modal-nav-search .modal-body{padding:clamp(28px,5vw,64px) var(--vl-gut) 40px!important;} body.vl-skin .modal-nav-search h3{margin-bottom:24px!important;} body.vl-skin .modal-nav-search a,body.vl-skin .modal-nav-search .btn-link{color:var(--vl-ink);fill:var(--vl-ink);} body.vl-skin .modal-nav-search .search-input{font-size:18px!important;} body.vl-skin .modal-nav-search .search-input-submit{display:flex;align-items:center;justify-content:center;width:44px;height:52px;padding:0;top:0;} body.vl-skin .modal-nav-search .search-input-submit svg{width:20px!important;height:20px!important;fill:var(--vl-ink)!important;stroke:none!important;} body.vl-skin .modal-nav-search .search-input-submit:hover svg{fill:var(--vl-red)!important;} body.vl-skin .modal-nav-search .search-suggest{position:static;width:100%;max-height:none;margin:8px 0 0;padding:0;border:0;background:transparent;overflow:visible;} body.vl-skin .modal-nav-search .search-suggest-list{margin:0;padding:0;} body.vl-skin .modal-nav-search .search-suggest-item{padding:0!important;border-bottom:1px solid var(--vl-line);} body.vl-skin .modal-nav-search .search-suggest-link{flex-wrap:nowrap;margin:0;padding:12px 0;color:var(--vl-ink)!important;text-decoration:none;transition:background-color .2s ease;} body.vl-skin .modal-nav-search .search-suggest-link:hover{background:var(--vl-bg-2);} body.vl-skin .modal-nav-search .search-suggest-image-container{flex:none;width:64px;padding:0!important;background:var(--vl-bg-2);} body.vl-skin .modal-nav-search .search-suggest-image{display:block;width:100%;max-width:none!important;aspect-ratio:2/3;object-fit:contain;mix-blend-mode:multiply;} body.vl-skin .modal-nav-search .search-suggest-text{padding-left:16px;} body.vl-skin .modal-nav-search .search-suggest-name{margin:0 0 6px;font:500 12px/1.35 var(--vl-body)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin .modal-nav-search .search-suggest-name strong{font-weight:700;color:var(--vl-red);} body.vl-skin .modal-nav-search .search-suggest-price{margin:0;font:600 13px/1.3 var(--vl-body)!important;color:var(--vl-ink);} body.vl-skin .modal-nav-search .search-suggest-list>.text-center{margin:24px 0 8px!important;} body.vl-skin .modal-nav-search .js-search-suggest-all-link{display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid var(--vl-ink);font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important;color:var(--vl-ink)!important;} body.vl-skin .modal-nav-search .js-search-suggest-all-link:hover{color:var(--vl-red)!important;border-color:var(--vl-red);} @media (max-width:767px){ body.vl-skin .modal-nav-search .js-search-suggest-all-link{min-height:40px;padding-bottom:0;border-bottom:0;text-decoration:underline!important;text-underline-offset:5px;} } /* header search dropdown (desktop "search big" layout) */ body.vl-skin .head-main .search-suggest{border:1px solid var(--vl-line);border-radius:0;background:#fff;box-shadow:var(--vl-ov-shadow);} body.vl-skin .head-main .search-suggest a,body.vl-skin .head-main .search-suggest .btn-link{color:var(--vl-ink);fill:var(--vl-ink);} /* --------------------------------------------------------------------- 7. Quick shop (#quickshop-modal, grids with settings.quick_shop) and the cross-selling offer (#js-cross-selling-modal) --------------------------------------------------------------------- */ body.vl-skin .modal-quickshop .modal-floating-close{position:sticky;top:0;z-index:2;float:right;width:auto;margin:12px 12px -52px 0;padding:0 10px!important;background:rgba(255,255,255,.92);border:0!important;border-radius:0;opacity:1;} body.vl-skin .modal-quickshop .modal-body{padding:0!important;} body.vl-skin .modal-quickshop .js-quickshop-container>.row{margin:0;} body.vl-skin .modal-quickshop .js-quickshop-container>.row>[class*="col"]{padding:0;margin:0!important;} body.vl-skin .modal-quickshop .quickshop-image-container{background:var(--vl-bg-2);} body.vl-skin .modal-quickshop .quickshop-image{mix-blend-mode:multiply;object-fit:contain;} body.vl-skin .modal-quickshop .js-item-variants{padding:28px var(--vl-ov-pad) 24px!important;} body.vl-skin .modal-quickshop .js-item-name{margin:0 96px 12px 0!important;padding:0!important;font:500 18px/1.2 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin .modal-quickshop .item-price-container{margin-bottom:22px!important;} body.vl-skin .modal-quickshop .js-price-display{font:600 18px/1.2 var(--vl-body)!important;color:var(--vl-ink);} body.vl-skin .modal-quickshop .js-compare-price-display{font:400 14px/1.2 var(--vl-body)!important;color:var(--vl-mute);opacity:1;} body.vl-skin .modal-quickshop .js-product-variants{margin:0;} body.vl-skin .modal-quickshop .js-product-variants-group{padding:0;margin-bottom:16px!important;} body.vl-skin .modal-quickshop .js-product-variants-group+.js-product-variants-group.col-6{padding-right:8px;} /* bullet variants look like .vl-size / swatches */ body.vl-skin .js-modal .btn-variant{position:relative;min-width:52px;min-height:44px;margin:0 6px 6px 0;padding:0 10px!important;border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff!important;color:var(--vl-ink)!important;font:500 12.5px/1 var(--vl-body)!important;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease,color .2s ease!important;} body.vl-skin .js-modal .btn-variant:hover{border-color:var(--vl-ink)!important;} body.vl-skin .js-modal .btn-variant.selected{background:var(--vl-ink)!important;border-color:var(--vl-ink)!important;color:#fff!important;} body.vl-skin .js-modal .btn-variant .btn-variant-content{margin:0;min-height:0;line-height:1;border-radius:0;} body.vl-skin .js-modal .btn-variant-color{min-width:44px;width:44px;padding:0!important;} body.vl-skin .js-modal .btn-variant-color .btn-variant-content{width:28px;height:28px;min-width:0;border:1px solid rgba(0,0,0,.12)!important;} body.vl-skin .js-modal .btn-variant-color.selected{background:#fff!important;box-shadow:inset 0 0 0 1px var(--vl-ink);} body.vl-skin .js-modal .btn-variant-no-stock{color:rgba(29,29,31,.35)!important;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.035) 6px 7px),#fff!important;} body.vl-skin .js-modal .btn-variant-no-stock:after{background:linear-gradient(to top left,transparent calc(50% - .5px),rgba(0,0,0,.25),transparent calc(50% + .5px));} body.vl-skin .modal-quickshop .form-row:not(.js-product-variants){margin:0;flex-wrap:nowrap;gap:8px;} body.vl-skin .modal-quickshop .form-row>.col-4,body.vl-skin .modal-quickshop .form-row>.col-8{padding:0;} body.vl-skin .modal-quickshop .form-row>.col-4{flex:0 0 auto;max-width:none;width:auto;} body.vl-skin .modal-quickshop .form-row>.col-8{flex:1;max-width:none;} body.vl-skin .modal-quickshop .form-quantity{height:56px;margin:0!important;} body.vl-skin .modal-quickshop .form-quantity .form-quantity-icon{height:54px;width:40px;} body.vl-skin .modal-quickshop .form-quantity .form-control{height:54px;} /* add to cart = rust, like .vl-atc-btn */ body.vl-skin .js-modal .btn-add-to-cart,body.vl-skin #js-cross-selling-modal .btn-primary{min-height:56px;margin:0!important;border-color:var(--vl-red)!important;background:var(--vl-red)!important;color:#fff!important;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.14em!important;text-transform:uppercase;} body.vl-skin .js-modal .btn-add-to-cart:hover,body.vl-skin #js-cross-selling-modal .btn-primary:hover{background:var(--vl-red-dark)!important;border-color:var(--vl-red-dark)!important;} body.vl-skin .js-modal .btn-add-to-cart.nostock,body.vl-skin .js-modal .btn-add-to-cart[disabled]{background:#fff!important;border-color:var(--vl-line)!important;color:var(--vl-mute)!important;} @media (max-width:767px){ body.vl-skin .modal-quickshop .modal-floating-close{margin:8px 8px -48px 0;} body.vl-skin .modal-quickshop .quickshop-image-container{max-height:52svh;overflow:hidden;} } body.vl-skin #js-cross-selling-modal{margin:0!important;padding:0!important;} body.vl-skin #js-cross-selling-modal>.modal-header{margin:0!important;padding:14px var(--vl-ov-pad)!important;} body.vl-skin #js-cross-selling-modal .modal-header .js-modal-close.btn-link{margin-right:-2px!important;} body.vl-skin #js-cross-selling-modal .modal-body{padding:0!important;max-height:calc(100vh - 70px);} body.vl-skin #js-cross-selling-modal .js-cross-selling-modal-body .position-relative{background:var(--vl-bg-2);} body.vl-skin #js-cross-selling-modal .js-cross-selling-modal-body img{mix-blend-mode:multiply;} body.vl-skin #js-cross-selling-modal .label-accent,body.vl-skin .js-modal .label-accent{border-radius:0!important;padding:6px 8px!important;background:var(--vl-red)!important;color:#fff!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.1em;} body.vl-skin #js-cross-selling-modal .font-big{font:500 15px/1.25 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin #js-cross-selling-modal .price-container{font:600 16px/1.3 var(--vl-body);} body.vl-skin #js-cross-selling-modal .price-container .price-compare{font-size:13px;font-weight:400;} body.vl-skin #js-cross-selling-modal .price-container .text-primary{color:var(--vl-ink)!important;} body.vl-skin #js-cross-selling-modal .px-4{padding-left:var(--vl-ov-pad)!important;padding-right:var(--vl-ov-pad)!important;} body.vl-skin #js-cross-selling-modal .form-group.px-2{padding:0!important;} /* installments / generic tabbed modals */ body.vl-skin .js-modal .tab-group{border-bottom:1px solid var(--vl-line);} body.vl-skin .js-modal .tab-link{font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin .js-modal .tab.active .tab-link,body.vl-skin .js-modal .tab-link.active{color:var(--vl-ink);} @media (max-width:767px){body.vl-skin .js-modal .tab-link{display:inline-flex;align-items:center;min-height:40px;}} /* --------------------------------------------------------------------- 8. Cookie banner (refines the vl-skin.css rule) and WhatsApp button --------------------------------------------------------------------- */ body.vl-skin .js-notification-cookie-banner{padding:14px var(--vl-gut)!important;border-top:1px solid var(--vl-line);border-bottom:0;box-shadow:0 -12px 40px -24px rgba(0,0,0,.3);font:400 12.5px/1.5 var(--vl-body)!important;text-align:left;} body.vl-skin .js-notification-cookie-banner .container-fluid>.row{flex-wrap:nowrap;gap:16px;margin:0;} body.vl-skin .js-notification-cookie-banner .container-fluid>.row>[class*="col"]{padding:0;} body.vl-skin .js-notification-cookie-banner .btn{min-height:40px!important;padding:0 20px!important;border-color:var(--vl-ink)!important;background:var(--vl-ink)!important;color:#fff!important;display:inline-flex!important;align-items:center;} body.vl-skin .js-notification-cookie-banner .btn:hover{background:var(--vl-red)!important;border-color:var(--vl-red)!important;} body.vl-skin .js-notification-cookie-banner .btn:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;} body.vl-skin .btn-whatsapp{right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;transition:background-color .25s ease,transform .4s var(--vl-ease);} body.vl-skin .btn-whatsapp:hover{transform:translateY(-2px);} body.vl-skin .btn-whatsapp svg{width:52px;height:52px;padding:14px;fill:#fff;} body.vl-skin .btn-whatsapp:focus-visible{outline:2px solid var(--vl-red);outline-offset:3px;} /* ===================================================================== ACCOUNT PAGES — the stock Tiendanube account templates (login, register, reset, newpass, info, orders, order, addresses, address, subscription-address) in the v2-refined look. CSS only: the markup is the theme's own (templates/account/*, snipplets/forms/*, snipplets/page-header.tpl, snipplets/card.tpl). Scope: every rule starts with body.vl-skin plus the account template class the layout prints (template-account-*), so the public site and every other template are untouched. Inside the page, rules stay under .page-header / .account-page (and the cancel-order modal), so the header search and the footer never pick up these form styles. Three scopes are used below: body.vl-skin[class*="template-account-"] every account page body.vl-skin:is(login, register, ...) narrow single-form pages body.vl-skin:is(orders, order, addresses) wide list/detail pages !important is only used where a stock rule already carries it: the admin custom CSS (.btn-primary colors), the bootstrap utilities in the markup (.pt-4, .mb-4, .float-right, .d-block, .font-small ...) and the skin's own .container-fluid padding. ===================================================================== */ /* ---- page header: breadcrumb as the eyebrow (rust dash), big title ---- */ body.vl-skin[class*="template-account-"] .page-header{margin:0!important;padding:clamp(28px,4vw,64px) 0 clamp(24px,2.8vw,40px)!important;background:none;} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0 0 14px;font:400 11px/1.4 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs:before{content:'';flex:none;width:22px;height:1px;background:var(--vl-red);} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs .crumb{opacity:1;padding:13px 0;color:var(--vl-mute);text-decoration:none;transition:color .2s ease;} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs a.crumb:hover{color:var(--vl-red);} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs .crumb.active{color:var(--vl-ink);} body.vl-skin[class*="template-account-"] .page-header .breadcrumbs .separator{margin:0;opacity:.5;} body.vl-skin[class*="template-account-"] .page-header h1{margin:0!important;font:500 clamp(28px,7.2vw,40px)/1.02 var(--vl-display)!important;letter-spacing:.01em;text-transform:uppercase;color:var(--vl-ink);overflow-wrap:break-word;} /* ---- page body ---- */ body.vl-skin[class*="template-account-"] .account-page{margin:0!important;padding:0 0 clamp(64px,8vw,128px);color:var(--vl-ink);font-family:var(--vl-body);} body.vl-skin[class*="template-account-"] .account-page p{font-size:14px;line-height:1.6;} /* ===================================================================== FORMS — labels, inputs, selects, password toggle, errors ===================================================================== */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .form-group{margin:0 0 22px;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .form-label{display:block;margin:0 0 10px;font:400 11.5px/12px var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} /* text fields and selects: square, hairline, 16px type (no iOS zoom). The theme adds .form-control-ios on iPhones (133% width scaled to 75%) — it is undone here, the 16px type already prevents the zoom it works around */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.form-control,.form-select,select){display:block;width:100%;height:52px;margin:0;padding:0 16px;border:1px solid var(--vl-line);border-radius:0!important;background:#fff;color:var(--vl-ink);font:400 16px/1.25 var(--vl-body)!important;box-shadow:none;transform:none;-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) textarea.form-control{height:auto;min-height:128px;padding:14px 16px;resize:vertical;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.form-control,.form-select,select):hover{border-color:rgba(0,0,0,.4);} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.form-control,.form-select,select):focus{border-color:var(--vl-red);box-shadow:inset 0 0 0 1px var(--vl-red);outline:none!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .form-control::placeholder{color:#8a8a8f;opacity:1;} /* error states: native validation (required fields after a submit attempt) and the server-side messages the templates print under a field */ /* (separate rules: a browser without :user-invalid or :has() drops only its own rule) */ body.vl-skin[class*="template-account-"] .account-page .form-control:user-invalid{border-color:var(--vl-red);background:rgba(168,82,46,.04);} body.vl-skin[class*="template-account-"] .account-page .form-group:has(.notification-danger,.alert-danger) :is(.form-control,.form-select){border-color:var(--vl-red);background:rgba(168,82,46,.04);} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.form-control,.form-select):disabled, body.vl-skin[class*="template-account-"] .account-page .form-control-disabled .form-control{background:var(--vl-bg-2);color:var(--vl-mute);cursor:not-allowed;} /* select chevron */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .form-select{padding-right:44px;cursor:pointer;} body.vl-skin[class*="template-account-"] .account-page .form-group .form-select-icon{position:absolute;right:16px;bottom:17px;top:auto;display:flex;background:transparent;pointer-events:none;} body.vl-skin[class*="template-account-"] .account-page .form-group .form-select-icon svg{width:14px;height:14px;fill:var(--vl-ink);} /* password show/hide — sits inside the field's right edge (label 12px + 10px gap above the 52px field) */ body.vl-skin[class*="template-account-"] .account-page .js-password-input{padding-right:56px;} body.vl-skin[class*="template-account-"] .account-page .form-toggle-eye{position:absolute;top:23px;right:1px;display:flex;align-items:center;justify-content:center;width:50px;height:50px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--vl-mute);opacity:1;cursor:pointer;transition:color .2s ease;} /* the admin CSS paints every .svg-icon-text rust (fill and color, !important) */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) svg.svg-icon-text{color:inherit!important;fill:currentColor!important;} body.vl-skin[class*="template-account-"] .account-page .form-toggle-eye svg{width:18px;height:18px;} body.vl-skin[class*="template-account-"] .account-page .form-toggle-eye:hover, body.vl-skin[class*="template-account-"] .account-page .form-toggle-eye.password-view{color:var(--vl-ink);opacity:1;} /* field-level server errors (snipplets/forms/form-input.tpl alert block) */ body.vl-skin[class*="template-account-"] .account-page .notification-danger{display:flex;align-items:flex-start;gap:10px;width:100%;margin:10px 0 0!important;padding:0!important;border:0!important;background:none!important;color:var(--vl-red-dark)!important;font:400 12.5px/1.45 var(--vl-body)!important;text-align:left;} body.vl-skin[class*="template-account-"] .account-page .notification-danger:before{content:'';flex:none;width:12px;height:1px;margin-top:.72em;background:currentColor;} /* checkboxes / radios (newsletter opt-ins or app-injected fields) */ body.vl-skin[class*="template-account-"] .account-page :is(input[type="checkbox"],input[type="radio"]){width:18px;height:18px;accent-color:var(--vl-ink);vertical-align:-3px;margin-right:8px;} body.vl-skin[class*="template-account-"] .account-page .checkbox-container .checkbox-icon{border-radius:0;border-color:var(--vl-ink);} /* reCAPTCHA / Turnstile keep their own widgets, just spaced like a field (the gap only appears once the widget has rendered into its container) */ body.vl-skin[class*="template-account-"] .account-page .g-recaptcha>*{margin:4px 0 22px;} body.vl-skin[class*="template-account-"] .account-page .cf-turnstile{margin:0 0 20px;} /* ===================================================================== BUTTONS AND LINKS ===================================================================== */ /* primary: ink, rust on hover — same as the cart drawer's checkout button */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;height:auto;padding:0 26px!important;border:1px solid var(--vl-ink)!important;border-radius:0!important;background:var(--vl-ink)!important;color:#fff!important;font:400 12px/1.2 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;text-align:center;text-decoration:none!important;box-shadow:none!important;opacity:1;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.btn-primary.btn-block,.btn-primary.d-block){display:flex!important;width:100%;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-primary:is(:hover,:focus-visible){background:var(--vl-red)!important;border-color:var(--vl-red)!important;color:#fff!important;opacity:1;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-primary:is(:disabled,.disabled), body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-primary:is(:disabled,.disabled):hover{background:var(--vl-bg-2)!important;border-color:var(--vl-line)!important;color:var(--vl-mute)!important;opacity:1;cursor:not-allowed;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-primary svg{fill:currentColor!important;width:14px;height:14px;} body.vl-skin[class*="template-account-"] .account-page form .btn-primary{margin-top:6px;} /* secondary / default: outline, fills ink on hover (the cancel-order and arrepentimiento controls use .btn-secondary; they stay fully visible) */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.btn-secondary,.btn-default){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;height:auto;padding:0 22px!important;border:1px solid var(--vl-ink)!important;border-radius:0!important;background:transparent!important;color:var(--vl-ink)!important;font:400 11.5px/1.2 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;text-align:center;text-decoration:none!important;box-shadow:none!important;opacity:1;cursor:pointer;transition:background-color .25s ease,color .25s ease!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.btn-secondary,.btn-default).d-block{display:flex!important;width:100%;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.btn-secondary,.btn-default):is(:hover,:focus-visible){background:var(--vl-ink)!important;color:#fff!important;opacity:1;} body.vl-skin[class*="template-account-"] .account-page .btn-medium{min-height:48px;} /* links: underlined ink, rust on hover */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-link{padding:0;border:0;background:none;color:var(--vl-ink);font-family:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(29,29,31,.45);opacity:1;cursor:pointer;transition:color .2s ease,text-decoration-color .2s ease;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .btn-link:hover{color:var(--vl-red);text-decoration-color:var(--vl-red);opacity:1;} /* standalone action links (Editar, ¿Olvidaste tu contraseña?, Crear cuenta, Ver detalle ...): the Impact label look, 40px tap height */ body.vl-skin[class*="template-account-"] .account-page :is(.form-group .btn-link,p.text-center .btn-link,.btn-link.font-small,.btn-link.float-right,.card-body .btn-link){display:inline-flex;align-items:center;min-height:40px;font:400 11.5px/1.2 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;text-decoration-color:currentColor;} /* "¿Olvidaste tu contraseña?" — right under the password field */ body.vl-skin[class*="template-account-"] .account-page .form-group>.text-center{margin:8px 0 0!important;text-align:right!important;} body.vl-skin[class*="template-account-"] .account-page .form-group>.text-center .btn-link{float:none!important;margin:0!important;} /* ===================================================================== ALERTS — the .vl-notice language: grey ground, 2px accent rule ===================================================================== */ body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert{position:relative;margin:0 0 20px;padding:14px 16px 14px 18px!important;border:0!important;border-left:2px solid var(--vl-ink)!important;border-radius:0!important;background:var(--vl-bg-2)!important;color:var(--vl-ink)!important;font:400 13.5px/1.55 var(--vl-body)!important;text-align:left;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert:before{display:none!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert p{margin:0!important;font-size:inherit;line-height:inherit;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert :is(h5,.h5,.font-weight-bold){display:block;margin:0 0 6px!important;font:500 13px/1.3 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert svg{width:26px;height:26px;fill:var(--vl-red)!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) :is(.alert-danger,.alert-error){border-left-color:var(--vl-red)!important;background:rgba(168,82,46,.07)!important;color:var(--vl-red-dark)!important;} body.vl-skin[class*="template-account-"] :is(.account-page,.modal-centered-small) .alert-warning{border-left-color:var(--vl-red)!important;} body.vl-skin[class*="template-account-"] .account-page form .alert{margin:0 0 20px;} body.vl-skin[class*="template-account-"] .account-page .text-center.font-small{text-align:left!important;font-size:13px!important;margin:-8px 0 20px!important;} /* ===================================================================== NARROW PAGES — login, register, reset, newpass, info, address forms: one centered 480px column, title aligned with the form ===================================================================== */ body.vl-skin:is(.template-account-login,.template-account-register,.template-account-reset,.template-account-newpass,.template-account-info,.template-account-address,.template-account-subscription-address) .page-header .container-fluid>*{max-width:480px;margin-left:auto!important;margin-right:auto!important;} body.vl-skin:is(.template-account-login,.template-account-register,.template-account-reset,.template-account-newpass,.template-account-info,.template-account-address,.template-account-subscription-address) .account-page>.container-fluid>.row{justify-content:center;margin-left:0;margin-right:0;} body.vl-skin:is(.template-account-login,.template-account-register,.template-account-reset,.template-account-newpass,.template-account-info,.template-account-address,.template-account-subscription-address) .account-page>.container-fluid>.row>[class*="col-"]{flex:0 0 100%;width:100%;max-width:480px;padding-left:0;padding-right:0;} /* intro line ("Comprá más rápido...", "Vamos a enviarte un email...") */ body.vl-skin:is(.template-account-register,.template-account-reset) .account-page>.container-fluid>.row>[class*="col-"]>p.mb-4{margin:0 0 28px!important;max-width:44ch;color:var(--vl-mute);font-size:14.5px;line-height:1.6;} /* the switch line under the form ("¿No tenés cuenta aún? Crear cuenta") */ body.vl-skin:is(.template-account-login,.template-account-register,.template-account-info) .account-page>.container-fluid>.row>[class*="col-"]>p.mt-3{margin:32px 0 0!important;padding-top:20px;border-top:1px solid var(--vl-line);color:var(--vl-mute);font:400 14px/1.5 var(--vl-body);text-align:center;} body.vl-skin:is(.template-account-login,.template-account-register,.template-account-info) .account-page>.container-fluid>.row>[class*="col-"]>p.mt-3 .btn-link{margin-left:6px!important;color:var(--vl-ink);vertical-align:middle;} body.vl-skin:is(.template-account-login,.template-account-register,.template-account-info) .account-page>.container-fluid>.row>[class*="col-"]>p.mt-3 .btn-link:hover{color:var(--vl-red);} body.vl-skin.template-account-register .account-page>.container-fluid>.row>[class*="col-"]>p.mt-3.text-left{text-align:left;} /* newpass: expired-link state */ body.vl-skin.template-account-newpass .account-page .mb-1.font-weight-bold{font:500 15px/1.3 var(--vl-display);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px!important;} /* subscription address: the component's own 8/4 field rows keep their gutters */ body.vl-skin.template-account-subscription-address .account-page form .row{margin-left:-8px;margin-right:-8px;} body.vl-skin.template-account-subscription-address .account-page form .row>.form-group{padding-left:8px;padding-right:8px;} /* ===================================================================== WIDE PAGES — orders (Mi cuenta), order detail, addresses ===================================================================== */ body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .page-header h1{font-size:clamp(34px,5.6vw,84px)!important;line-height:.95!important;} @media (min-width:1200px){ body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) :is(.page-header,.account-page)>.container-fluid{max-width:1360px!important;} } /* the skin pads every .container-fluid (24/48/80px, !important); the order cards nest one inside their body, which must stay flush */ body.vl-skin[class*="template-account-"] .account-page .card .container-fluid{padding-left:0!important;padding-right:0!important;max-width:none!important;} /* section heads: display type over an ink rule, action link on the right */ body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .account-page :is(h5,.h5){display:block!important;margin:0 0 4px!important;padding:0 0 12px;border-bottom:1px solid var(--vl-ink);font:500 13px/1.3 var(--vl-display)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .account-page div:has(>h5+.btn-link){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px!important;border-bottom:1px solid var(--vl-ink);} body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .account-page div:has(>h5+.btn-link)>h5{margin:0!important;padding:0;border:0;} body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .account-page div:has(>h5+.btn-link)>.btn-link{float:none!important;margin:0!important;} /* ---- orders: account panel (left) ---- */ body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-4>div{margin:0 0 12px!important;padding:22px 24px 20px!important;background:var(--vl-bg-2);} body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-4 p{margin:0;font-size:14px!important;line-height:1.7;color:var(--vl-mute);} body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-4 p>strong:first-child{display:block;margin-bottom:2px;font:600 15px/1.4 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-4 p span strong{font-weight:600;color:var(--vl-ink);} body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-4 p span.my-2{margin:0 0 4px!important;font-size:14px!important;color:var(--vl-ink);} @media (min-width:768px){ body.vl-skin.template-account-orders .account-page>.container-fluid>.row>.col-md-8{padding-left:clamp(24px,3vw,48px)!important;} } /* ---- orders: order cards ---- */ body.vl-skin[class*="template-account-"] .account-page [data-store="account-orders"]>[class*="col-"]{display:flex;flex-direction:column;margin-bottom:20px;} body.vl-skin[class*="template-account-"] .account-page .card{float:none;flex:1 1 auto;display:flex;flex-direction:column;width:100%;height:auto!important;margin:0;padding:0!important;border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff;overflow:hidden;cursor:auto;transition:border-color .25s ease;} body.vl-skin[class*="template-account-"] .account-page .card:hover{border-color:rgba(0,0,0,.32)!important;} /* every order opens expanded (status, total and the cancel/arrepentimiento controls always in view), so the collapse chevron has nothing to do */ body.vl-skin[class*="template-account-"] .account-page .card-collapse-toggle{display:none!important;} body.vl-skin[class*="template-account-"] .account-page .card-header{padding:14px 20px!important;border-bottom:1px solid var(--vl-line);background:none;} body.vl-skin[class*="template-account-"] .account-page .card-header .row{align-items:center;flex-wrap:nowrap;} body.vl-skin[class*="template-account-"] .account-page .card-header .btn-link{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;} body.vl-skin[class*="template-account-"] .account-page .card-header .btn-link strong{font:500 13px/1.3 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;} body.vl-skin[class*="template-account-"] .account-page .card-header .btn-link:hover strong{color:var(--vl-red);} body.vl-skin[class*="template-account-"] .account-page .card-header small{font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;color:var(--vl-mute);cursor:auto;} body.vl-skin[class*="template-account-"] .account-page .card-body{flex:1 1 auto;padding:20px!important;} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px!important;font:400 13px/1.3 var(--vl-body)!important;color:var(--vl-mute);} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small svg{flex:none;width:15px;height:15px;margin:0!important;fill:var(--vl-mute)!important;} /* status pills: payment carries its status as a class, shipping does not */ body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small>span>strong, body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small:not(.mb-2)>strong, body.vl-skin[class*="template-account-"] .account-page .label{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--vl-line);border-radius:999px;background:#fff;color:var(--vl-ink);font:400 10.5px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small>.paid>strong{background:var(--vl-ink);border-color:var(--vl-ink);color:#fff;} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small>.authorized>strong{border-color:var(--vl-ink);} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small>.pending>strong, body.vl-skin[class*="template-account-"] .account-page .label-outline-success{border-color:var(--vl-red);background:rgba(168,82,46,.07);color:var(--vl-red-dark);} body.vl-skin[class*="template-account-"] .account-page .card-body p.font-small>:is(.voided,.refunded,.abandoned)>strong{background:var(--vl-bg-2);color:var(--vl-mute);} /* total */ body.vl-skin[class*="template-account-"] .account-page .card-body h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:18px 0 2px!important;padding-top:14px;border-top:1px solid var(--vl-line);font:600 20px/1.2 var(--vl-body)!important;letter-spacing:-.01em;color:var(--vl-ink);} body.vl-skin[class*="template-account-"] .account-page .card-body h4 strong{font:400 11px/1 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} /* first item photo + "N productos" */ body.vl-skin[class*="template-account-"] .account-page .card-img-square-container{overflow:hidden;border-radius:8px;background:var(--vl-paper);} body.vl-skin[class*="template-account-"] .account-page .card-img-pill{right:8px;bottom:8px;z-index:2;padding:6px 8px;border-radius:3px;background:var(--vl-ink);color:#fff;font:400 10px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;} /* actions: track / pay, then cancel */ body.vl-skin[class*="template-account-"] .account-page .card-footer{display:grid;gap:8px;padding:0 20px 20px!important;border:0;background:none;} body.vl-skin[class*="template-account-"] .account-page .card-footer .mt-2{margin-top:0!important;} /* no orders yet */ body.vl-skin.template-account-orders .account-page [data-store="account-orders"]>.col.text-center{display:grid;justify-items:center;gap:6px;margin:0 var(--gutter,15px);padding:56px 24px;border:1px solid var(--vl-line);} body.vl-skin.template-account-orders .account-page [data-store="account-orders"]>.col.text-center svg{width:30px;height:30px;fill:var(--vl-red)!important;} body.vl-skin.template-account-orders .account-page [data-store="account-orders"]>.col.text-center p{margin:8px 0 14px;font:500 16px/1.3 var(--vl-display);text-transform:uppercase;letter-spacing:.03em;} body.vl-skin.template-account-orders .account-page [data-store="account-orders"]>.col.text-center .btn-primary{width:auto;min-width:240px;} body.vl-skin.template-account-orders .account-page [data-store="account-orders"]>.col-12.h5{margin-bottom:18px!important;} /* ---- order detail ---- */ @media (min-width:768px){ body.vl-skin.template-account-order .account-page>.container-fluid>.row>.col-md-8{padding-left:clamp(24px,3vw,48px);} } body.vl-skin.template-account-order .account-page>.container-fluid>.alert{margin-bottom:clamp(24px,3vw,40px)!important;} body.vl-skin.template-account-order .account-page .col-md-4>.mb-4{margin-bottom:20px!important;} body.vl-skin.template-account-order .account-page .col-md-4>.mb-4>h4{margin:0 0 6px;font:400 11px/1.3 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} /* detail rows: label left, value right, hairline between */ body.vl-skin.template-account-order .account-page .col-md-4 p.font-small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0!important;padding:13px 0;border-bottom:1px solid var(--vl-line);font:400 13.5px/1.4 var(--vl-body)!important;color:var(--vl-mute);} body.vl-skin.template-account-order .account-page .col-md-4 p.font-small svg{flex:none;width:15px;height:15px;margin:0!important;fill:var(--vl-mute)!important;} body.vl-skin.template-account-order .account-page .col-md-4 p.font-small>strong{margin-left:auto;text-align:right;font-weight:600;color:var(--vl-ink);} body.vl-skin.template-account-order .account-page .col-md-4 p.font-small:has(>span.d-block)>strong{margin-left:0;font-weight:400;color:var(--vl-mute);} body.vl-skin.template-account-order .account-page .col-md-4 p.font-small>span.d-block{flex:1 0 100%;margin:2px 0 0!important;padding-left:25px!important;color:var(--vl-ink);line-height:1.55;} /* estado, pago and envío read as pills (their

positions in order.tpl) */ body.vl-skin.template-account-order .account-page .col-md-4>.mb-4>p.font-small:is(:nth-of-type(2),:nth-of-type(3),:nth-of-type(5))>strong{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--vl-line);border-radius:999px;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;} body.vl-skin.template-account-order .account-page .col-md-4 .btn-secondary{width:100%;margin:4px 0 0!important;} /* products table */ body.vl-skin.template-account-order .account-page .col-md-8>.d-md-block{border-bottom:1px solid var(--vl-ink);} body.vl-skin.template-account-order .account-page .col-md-8>.d-md-block p{margin:0;padding:0 0 12px;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-account-order .account-page .col-md-8>h5+.d-md-block{margin-top:14px;} body.vl-skin.template-account-order .account-page .order-item{padding:16px 0;border-top:0;border-bottom:1px solid var(--vl-line);} body.vl-skin.template-account-order .account-page .order-item p{margin:0;font:400 13.5px/1.45 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-account-order .account-page .order-item .col-8 p, body.vl-skin.template-account-order .account-page .order-item .col-md-9 p{font:600 12px/1.4 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;} body.vl-skin.template-account-order .account-page .order-item .col-8 p span{margin-left:6px;font-weight:400;color:var(--vl-mute);} body.vl-skin.template-account-order .account-page .order-item>.row>div:last-child p{font-weight:600;} /* totals: label left (Impact), amount right */ body.vl-skin.template-account-order .account-page .order-detail>p.mt-3{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0!important;padding:12px 0;border-bottom:1px solid var(--vl-line);font:400 14px/1.4 var(--vl-body);text-align:right;} body.vl-skin.template-account-order .account-page .order-detail>p.mt-3>strong{font:400 11px/1.4 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);text-align:left;} body.vl-skin.template-account-order .account-page .order-detail>h3{margin:0 0 20px;padding:18px 0 0;border-top:1px solid var(--vl-ink);font:600 clamp(20px,2vw,26px)/1.2 var(--vl-body)!important;letter-spacing:-.01em;text-align:right;color:var(--vl-ink);} body.vl-skin.template-account-order .account-page .order-detail>p.mt-3+h3{border-top-color:var(--vl-ink);} body.vl-skin.template-account-order .account-page .order-detail>.btn-primary{margin-left:auto;padding-left:26px!important;padding-right:26px!important;} /* ---- addresses ---- */ body.vl-skin.template-account-addresses .account-page>.container-fluid>.row>[class*="col-"]{margin-bottom:32px!important;} body.vl-skin.template-account-addresses .account-page h5{margin-bottom:0!important;} body.vl-skin.template-account-addresses .account-page h6{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0!important;padding-top:10px;font:500 13px/1.3 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin.template-account-addresses .account-page h6 .btn-link{float:none!important;margin:0!important;font-weight:400!important;text-transform:uppercase;} body.vl-skin.template-account-addresses .account-page h6+p{margin:2px 0 0!important;padding-bottom:16px;border-bottom:1px solid var(--vl-line);font-size:14px!important;line-height:1.6;color:var(--vl-mute);} /* "Agregar una nueva dirección" is the page's main action: outline button */ body.vl-skin.template-account-addresses .account-page a.btn-link[href*="new"]{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:20px;padding:0 20px;border:1px solid var(--vl-ink);text-decoration:none;transition:background-color .25s ease,color .25s ease;} body.vl-skin.template-account-addresses .account-page a.btn-link[href*="new"]:before{content:'+';font:400 16px/1 var(--vl-body);} body.vl-skin.template-account-addresses .account-page a.btn-link[href*="new"]:hover{background:var(--vl-ink);color:#fff;} /* ---- cancel-order / subscription modals (platform components) ---- */ body.vl-skin[class*="template-account-"] .modal-centered-small{border-radius:0!important;color:var(--vl-ink);font-family:var(--vl-body);} body.vl-skin[class*="template-account-"] .modal-centered-small :is(.h4,h4){margin:0;font:500 16px/1.25 var(--vl-display)!important;letter-spacing:.03em;text-transform:uppercase;} body.vl-skin[class*="template-account-"] .modal-centered-small p{font-size:14px;line-height:1.6;} body.vl-skin[class*="template-account-"] .modal-centered-small .btn-link{font:400 11.5px/1.2 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;min-height:40px;} /* ---- phones ---- */ @media (max-width:767px){ body.vl-skin[class*="template-account-"] .page-header .breadcrumbs{margin-bottom:8px;} body.vl-skin:is(.template-account-orders,.template-account-order,.template-account-addresses) .account-page>.container-fluid>.row>.col-md-8{margin-top:12px;} body.vl-skin.template-account-order .account-page .order-detail>.btn-primary{max-width:none;flex:1 1 100%;} } /* ===================================================================== VAD STOCK PAGES — the Tiendanube templates the redesign does not replace (institutional pages, contact, search, full cart page, 404, store-closed page, blog), reskinned so they read as siblings of the redesigned category page (vl-shop.css: .vl-cat-head, .vl-crumbs, .vl-card, .vl-cat-empty) instead of the stock Cali look. CSS only, stock markup untouched. Every rule is scoped to body.vl-skin plus the template class the layout puts on , so the public theme (no .vl-skin) and the redesigned home/product/category templates are never affected. build-theme.mjs appends this file to the generated vl-skin.css. Stock and admin CSS (Personalizar > Edición avanzada de CSS) set many of these properties with !important; the !important flags below are only there to out-rank those, never to fight other vl-* rules. ===================================================================== */ /* ---- 1. Layout: one content box, same as .vl-cat-head / .vl-cat-grid ---- */ body.vl-skin:is(.template-page,.template-contact,.template-search,.template-404) .page-header>.container-fluid, body.vl-skin.template-page .user-content>.container, body.vl-skin.template-contact .contact-page>.container-fluid, body.vl-skin.template-search .page-header~.container-fluid, body.vl-skin.template-search .category-controls>.container-fluid, body.vl-skin.template-search .category-body>.container-fluid, body.vl-skin.template-cart #shoppingCartPage>.container-fluid, body.vl-skin.template-404 #page-error>.container-fluid, body.vl-skin.template-password .section-password>.container, body.vl-skin:is(.template-blog,.template-blog-post) .container:has(>.page-header){ width:100%; max-width:calc(var(--vl-max) + var(--vl-gut) * 2)!important; margin-left:auto!important;margin-right:auto!important; padding-left:var(--vl-gut)!important;padding-right:var(--vl-gut)!important; } body.vl-skin.template-blog-post .container-narrow:has(>.page-header){max-width:calc(760px + var(--vl-gut) * 2)!important;} /* ---- 2. Page header: breadcrumbs in Impact, eyebrow + big display title ---- */ body.vl-skin{--vl-kicker:none;} body.vl-skin.template-page{--vl-kicker:'Información';} body.vl-skin.template-contact{--vl-kicker:'Atención al cliente';} body.vl-skin.template-search{--vl-kicker:'Búsqueda';} body.vl-skin.template-cart{--vl-kicker:'Tu compra';} body.vl-skin.template-404{--vl-kicker:'Página no encontrada';} body.vl-skin.template-password{--vl-kicker:'Acceso privado';} body.vl-skin:is(.template-blog,.template-blog-post){--vl-kicker:'Blog';} body.vl-skin.template-blog .page-header h1{--vl-kicker:'Novedades';} body.vl-skin:is(.template-page,.template-contact,.template-search,.template-cart,.template-404,.template-blog,.template-blog-post) .page-header{margin:0!important;padding:0!important;background:transparent!important;} body.vl-skin:is(.template-page,.template-contact,.template-search,.template-cart,.template-404,.template-blog,.template-blog-post) .page-header h1{ margin:0;padding:clamp(28px,4vw,60px) 0 clamp(20px,2.4vw,32px); font:500 clamp(32px,5vw,76px)/.98 var(--vl-display);letter-spacing:.01em;text-transform:uppercase;color:var(--vl-ink); overflow-wrap:break-word; } body.vl-skin:is(.template-page,.template-contact,.template-search,.template-cart,.template-404,.template-blog,.template-blog-post) .page-header h1 span{margin-left:.3em!important;} /* eyebrow (.vl-eyebrow): rust dash + Impact label, text per template above */ body.vl-skin:is(.template-page,.template-contact,.template-search,.template-cart,.template-404,.template-blog,.template-blog-post) .page-header h1::before, body.vl-skin.template-password .section-password h2::before, body.vl-skin.template-contact .contact-info::before, body.vl-skin.template-contact #contact-form::before{ content:var(--vl-kicker);display:block;width:max-content;max-width:100%;margin-bottom:16px;padding-left:32px; background:linear-gradient(var(--vl-red),var(--vl-red)) left center/22px 1px no-repeat; font:400 11px/1.4 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute); } /* hairline under the title where content follows directly */ body.vl-skin:is(.template-page,.template-contact,.template-blog,.template-blog-post) .page-header h1{border-bottom:1px solid var(--vl-line);margin-bottom:clamp(28px,4vw,56px);} /* breadcrumbs (.vl-crumbs) */ body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;padding:10px 0 0; font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute); } body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs .crumb{display:inline-flex;align-items:center;min-height:40px;font:inherit;letter-spacing:inherit;color:var(--vl-mute);text-decoration:none!important;transition:color .2s ease;} body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs a.crumb:hover{color:var(--vl-red);} body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs .crumb.active{color:var(--vl-ink);} body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs .separator{margin:0;opacity:.5;} body.vl-skin:is(.template-contact,.template-cart,.template-blog,.template-blog-post) .page-header .breadcrumbs+h1{padding-top:clamp(14px,2.2vw,32px);} /* ---- 3. Shared pieces: solid button, alerts, text links ---- */ body.vl-skin:is(.template-contact,.template-cart,.template-404,.template-password,.template-search,.template-page) :is(.contact-page,.section-password,#shoppingCartPage,#page-error,.category-body,.user-content) .btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;height:auto;padding:0 28px; border:1px solid var(--vl-red)!important;border-radius:0!important;background:var(--vl-red)!important;color:#fff!important; font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.14em!important;text-transform:uppercase!important; text-shadow:none;box-shadow:none;cursor:pointer; transition:background-color .25s ease,border-color .25s ease!important; } body.vl-skin:is(.template-contact,.template-cart,.template-404,.template-password,.template-search,.template-page) :is(.contact-page,.section-password,#shoppingCartPage,#page-error,.category-body,.user-content) .btn-primary:hover{background:var(--vl-red-dark)!important;border-color:var(--vl-red-dark)!important;} body.vl-skin:is(.template-contact,.template-cart,.template-password) :is(.contact-page,.section-password,#shoppingCartPage) .btn-primary.btn-block{display:flex;width:100%;} body.vl-skin:is(.template-contact,.template-cart,.template-404,.template-password,.template-search) :is(.contact-page,.section-password,#shoppingCartPage,#page-error,.category-body) .alert{ margin-bottom:18px;padding:14px 16px;border:0;border-left:2px solid var(--vl-ink);border-radius:0; background:var(--vl-bg-2);color:var(--vl-ink);font:400 13.5px/1.5 var(--vl-body); } body.vl-skin:is(.template-contact,.template-cart,.template-404,.template-password,.template-search) :is(.contact-page,.section-password,#shoppingCartPage,#page-error,.category-body) :is(.alert-danger,.alert-warning){border-left-color:var(--vl-red);} /* .vl-link look for the stock text links */ body.vl-skin.template-cart #shoppingCartPage .btn-link:not(.cart-item-delete .btn-link), body.vl-skin.template-contact .contact-page .col-md-3>div .btn-link, body.vl-skin.template-password .section-password .btn-link{ display:inline-flex;align-items:center;min-height:40px;padding:0; font:400 11.5px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--vl-ink)!important; text-decoration:underline!important;text-decoration-color:var(--vl-ink);text-underline-offset:5px;transition:color .2s ease; } body.vl-skin.template-cart #shoppingCartPage .btn-link:not(.cart-item-delete .btn-link):hover, body.vl-skin.template-contact .contact-page .col-md-3>div .btn-link:hover, body.vl-skin.template-password .section-password .btn-link:hover{color:var(--vl-red)!important;text-decoration-color:var(--vl-red);} /* stock password field renders an empty "forgot" link (no label is passed) */ body.vl-skin.template-password .section-password a.btn-link:empty{display:none;} /* ---- 4. Forms (contact, store password): square fields, Impact labels ---- */ body.vl-skin:is(.template-contact,.template-password) :is(.contact-page,.section-password) .form-group{position:relative;margin-bottom:22px;text-align:left;} body.vl-skin:is(.template-contact,.template-password,.template-cart) :is(.contact-page,.section-password,#shoppingCartPage) .form-label{ display:block;float:none;margin:0 0 10px;font:400 11.5px/1.2 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute); } body.vl-skin:is(.template-contact,.template-password) :is(.contact-page,.section-password) .form-control{ display:block;width:100%;height:52px;padding:0 16px; border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff;color:var(--vl-ink); font:400 16px/1.4 var(--vl-body);box-shadow:none;transition:border-color .2s ease; } body.vl-skin:is(.template-contact,.template-password) :is(.contact-page,.section-password) .form-control:hover{border-color:rgba(0,0,0,.34)!important;} body.vl-skin:is(.template-contact,.template-password) :is(.contact-page,.section-password) .form-control:focus{border-color:var(--vl-ink)!important;} body.vl-skin.template-contact .contact-page textarea.form-control{height:auto;min-height:168px;padding:14px 16px;line-height:1.6;resize:vertical;} body.vl-skin:is(.template-contact,.template-password) :is(.contact-page,.section-password) .btn-primary{margin-top:6px;} /* ---- 5. Institutional pages + blog post: long-form reading ---- */ body.vl-skin.template-page .user-content{padding:0 0 var(--vl-sec)!important;} body.vl-skin.template-page .user-content .row{display:block;margin:0;} body.vl-skin.template-page .user-content .row>[class*="col"]{width:auto;max-width:68ch;padding:0;flex:none;} body.vl-skin.template-blog-post .blog-post-page{padding-bottom:var(--vl-sec);} body.vl-skin.template-blog-post .blog-post-page>*{max-width:68ch;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page){font:400 15px/1.7 var(--vl-body);color:var(--vl-ink);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(p,div,li,td,th,span){font-family:inherit;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) [style*="font-family"]{font-family:inherit!important;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) p{margin:0 0 1.15em;line-height:1.7;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(h1,h2){margin:2.2em 0 .8em;font:500 clamp(18px,1.9vw,24px)/1.2 var(--vl-display);letter-spacing:.02em;text-transform:uppercase;color:var(--vl-ink);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) h3{margin:1.9em 0 .7em;font:500 15px/1.3 var(--vl-display);letter-spacing:.03em;text-transform:uppercase;color:var(--vl-ink);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(h4,h5,h6){display:flex;align-items:center;gap:10px;margin:1.9em 0 .8em;font:400 11.5px/1.3 var(--vl-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(h4,h5,h6)::before{content:'';flex:none;width:22px;height:1px;background:var(--vl-red);} :is(body.vl-skin.template-page .user-content .row>[class*="col"],body.vl-skin.template-blog-post .blog-post-page)>:first-child{margin-top:0;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(strong,b){font-weight:700;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) a{color:var(--vl-ink);text-decoration:underline;text-decoration-color:var(--vl-red);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) a:hover{color:var(--vl-red);} /* the merchant's red emphasis (#e03e2d from the editor palette) -> brand rust */ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is([style*="#e03e2d" i],[style*="rgb(224, 62, 45)"],[style*="#ff0000" i],[style*="rgb(255, 0, 0)"],[style*="color: red"],[style*="color:red"]){color:var(--vl-red)!important;} /* lists: numbered rows like the nav index (01/02/03), bullets as rust dashes */ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(ul,ol){margin:0 0 1.6em;padding:0;list-style:none;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ol{counter-reset:vl-ol;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ol>li{counter-increment:vl-ol;position:relative;margin:0;padding:15px 0 15px 48px;border-top:1px solid var(--vl-line);line-height:1.65;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ol>li:last-child{border-bottom:1px solid var(--vl-line);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ol>li::before{content:counter(vl-ol,decimal-leading-zero);position:absolute;left:0;top:19px;font:400 12px/1 var(--vl-tiny);letter-spacing:.08em;color:var(--vl-red);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ul>li{position:relative;margin:0 0 .65em;padding-left:28px;line-height:1.65;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) ul>li::before{content:'';position:absolute;left:0;top:.82em;width:14px;height:1px;background:var(--vl-red);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) li :is(ul,ol){margin:.7em 0 0;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) li ol>li{padding-top:6px;padding-bottom:6px;border:0;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) li ol>li::before{top:10px;} /* tables (size charts): hairline rows, Impact header row, swipeable on phones */ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) table{width:100%!important;max-width:100%;height:auto!important;margin:1.8em 0 2.2em;border:0;border-collapse:collapse;font:400 13.5px/1.4 var(--vl-body);font-variant-numeric:tabular-nums;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(th,td){height:auto!important;padding:13px 16px 13px 0;border:0;border-bottom:1px solid var(--vl-line);background:transparent!important;text-align:left;vertical-align:top;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) td:first-child{font-weight:600;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(thead :is(th,td),table:not(:has(thead)) tr:first-child>*){font:400 11px/1.3 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);border-bottom:1px solid var(--vl-ink);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) tbody tr:hover>td{background:var(--vl-bg-2)!important;} @media (max-width:767px){ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;} /* single-body tables (the editor's default) still span the column, and scroll only when wider */ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) table>tbody:only-child{display:table;width:100%;} } /* media: full width, 12px radius */ :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) img{display:block;float:none!important;width:100%;max-width:100%;height:auto!important;margin:1.8em 0;border-radius:var(--vl-radius);background:var(--vl-bg-2);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) :is(iframe,video){display:block;width:100%!important;max-width:100%;height:auto!important;aspect-ratio:16/9;margin:1.8em 0;border:0;border-radius:var(--vl-radius);} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) blockquote{margin:1.8em 0;padding:16px 20px;border-left:2px solid var(--vl-red);background:var(--vl-bg-2);font-size:14px;} :is(body.vl-skin.template-page .user-content,body.vl-skin.template-blog-post .blog-post-page) hr{margin:2.4em 0;border:0;border-top:1px solid var(--vl-line);} body.vl-skin.template-blog-post .blog-post-page .font-small{font:400 11px/1.4 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} /* ---- 6. Contact ---- */ body.vl-skin.template-contact .contact-page{padding-bottom:var(--vl-sec);} body.vl-skin.template-contact .contact-page>.container-fluid>.row{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;margin:0;} body.vl-skin.template-contact .contact-page>.container-fluid>.row>[class*="col"]{width:auto;max-width:none;padding:0;flex:none;} body.vl-skin.template-contact .contact-page>.container-fluid>.row>.col-md-5:only-child{max-width:640px;} @media (min-width:768px){ body.vl-skin.template-contact .contact-page>.container-fluid>.row:has(>.col-md-3){grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,8vw,140px);} } @media (min-width:1200px){ body.vl-skin.template-contact .contact-page>.container-fluid>.row:has(>.col-md-3){grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(0,1fr);} } body.vl-skin.template-contact .contact-page .col-md-3>p{max-width:40ch;margin:0 0 28px;font:400 15px/1.7 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-contact .contact-page .col-md-3 h5{margin:32px 0 12px!important;font:400 11.5px/1.3 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-contact .contact-page .col-md-3 .divider{display:none;} /* contact channels, labelled like the footer's contact column */ body.vl-skin.template-contact .contact-info{--vl-kicker:'Datos de contacto';margin:0;padding:0;list-style:none;} body.vl-skin.template-contact .contact-info li{display:block;margin:0;padding:16px 0;border-bottom:1px solid var(--vl-line);font:400 16px/1.5 var(--vl-body);color:var(--vl-ink);overflow-wrap:anywhere;} body.vl-skin.template-contact .contact-info li:first-child{border-top:1px solid var(--vl-ink);} body.vl-skin.template-contact .contact-info li a{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:40px;padding:0;font:inherit;color:var(--vl-ink)!important;text-decoration:none!important;transition:color .2s ease;} body.vl-skin.template-contact .contact-info li a:hover{color:var(--vl-red)!important;} body.vl-skin.template-contact .contact-info li a::before, body.vl-skin.template-contact .contact-info li:not(:has(a))::before{display:block;font:400 10.5px/1 var(--vl-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-contact .contact-info li:not(:has(a))::before{content:'Showroom';margin-bottom:7px;} body.vl-skin.template-contact .contact-info a[href*="wa.me"]::before{content:'WhatsApp';} body.vl-skin.template-contact .contact-info a[href^="tel:"]::before{content:'Teléfono';} body.vl-skin.template-contact .contact-info :is(a[href^="mailto:"],a[href*="email-protection"])::before{content:'Email';} body.vl-skin.template-contact #contact-form{--vl-kicker:'Envianos un mensaje';} body.vl-skin.template-contact #contact-form::before{margin-bottom:24px;} body.vl-skin.template-contact .contact-page .mb-4 img{width:72px;height:auto;aspect-ratio:2/3;object-fit:contain;background:var(--vl-paper);border-radius:8px;mix-blend-mode:multiply;} body.vl-skin.template-contact .contact-page .mb-4 p{margin:0;font:400 13.5px/1.5 var(--vl-body);color:var(--vl-mute);} body.vl-skin.template-contact .contact-page .mb-4 p a{color:var(--vl-ink);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px;} body.vl-skin.template-contact .contact-page iframe{display:block;width:100%;max-width:100%;border:0;border-radius:var(--vl-radius);} /* ---- 7. Search results: toolbar like .vl-cat-bar, stock cards as .vl-card ---- */ body.vl-skin.template-search .page-header~.container-fluid h2{margin:0 0 14px!important;font:400 11px/1.4 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-search .page-header~.container-fluid h2 span, body.vl-skin.template-search .category-controls h2 span{margin-left:.4em!important;color:var(--vl-ink);} /* solid, not frosted like .vl-cat-bar: the sort/filter sheets are position:fixed children of this bar, and a backdrop-filter would become their containing block */ body.vl-skin.template-search .category-controls{margin:0!important;padding:8px 0!important;background:#fff!important;border-top:1px solid var(--vl-line);border-bottom:1px solid var(--vl-line);} body.vl-skin.template-search .category-controls-row{align-items:center!important;min-height:44px;} body.vl-skin.template-search .category-controls h2{margin:0!important;font:400 11px/1.4 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-search .category-controls .col.d-md-none{font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} /* Ordenar / Filtrar as the category toolbar's square select */ body.vl-skin.template-search .category-controls .js-modal-open.btn-link{ display:inline-flex;align-items:center;height:40px;padding:0 34px 0 14px; 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 10px center/14px no-repeat; font:400 11px/1 var(--vl-tiny);letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink)!important;text-decoration:none!important; transition:border-color .2s ease; } body.vl-skin.template-search .category-controls .js-modal-open.btn-link:hover{border-color:var(--vl-ink);} /* sort / filter sheets */ body.vl-skin.template-search .category-controls .modal-body .list-unstyled{margin:0;} body.vl-skin.template-search .category-controls .modal-body .list-unstyled>li{border-bottom:1px solid var(--vl-line);} body.vl-skin.template-search .category-controls .modal-body .radio-button{display:flex;align-items:center;width:100%;min-height:48px;margin:0;padding:0;color:var(--vl-ink);text-decoration:none!important;} body.vl-skin.template-search .category-controls .modal-body .radio-button-content{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 0!important;border:0!important;border-radius:0!important;background:none!important;} body.vl-skin.template-search .category-controls .modal-body .radio-button-label{font:400 14px/1.3 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-search .category-controls .modal-body .radio-button.selected .radio-button-label{color:var(--vl-red);} /* filters (sidebar / sheet) and applied-filter chips */ body.vl-skin.template-search :is(.category-body,.category-controls,.page-header~.container-fluid) :is(.h6,.font-large){font:400 11.5px/1.3 var(--vl-tiny)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-search :is(.category-body,.category-controls,.page-header~.container-fluid) .checkbox-container{font:400 13.5px/1.4 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-search :is(.category-body,.category-controls,.page-header~.container-fluid) .checkbox-icon{border-radius:0!important;border-color:var(--vl-ink)!important;} body.vl-skin.template-search :is(.category-controls,.page-header~.container-fluid) .chip{display:inline-flex;align-items:center;gap:8px;height:36px;margin:0 6px 6px 0;padding:0 14px;border:1px solid var(--vl-ink);border-radius:999px;background:#fff;color:var(--vl-ink);font:400 12.5px/1 var(--vl-body);text-decoration:none!important;} body.vl-skin.template-search :is(.category-controls,.page-header~.container-fluid) .js-remove-all-filters{font:400 11px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--vl-ink)!important;text-decoration:underline!important;text-underline-offset:4px;} /* body: no empty filter column, grid starts at the content edge */ body.vl-skin.template-search .category-body{margin-top:0!important;padding-bottom:var(--vl-sec);} body.vl-skin.template-search .category-body>.container-fluid>.row{margin:0;flex-wrap:nowrap;gap:clamp(24px,3vw,56px);} body.vl-skin.template-search .category-body>.container-fluid>.row>.col-md-2:not(:has(*)){display:none!important;} body.vl-skin.template-search .category-body>.container-fluid>.row>[class*="col"]{padding-left:0!important;padding-right:0!important;} body.vl-skin.template-search .category-body>.container-fluid>.row>.col-md-2{flex:0 0 200px;max-width:200px;} body.vl-skin.template-search .category-body [data-store="search-grid"]{min-width:0;padding-top:clamp(20px,2.4vw,36px)!important;} body.vl-skin.template-search .category-body [data-component="filter.message"]{margin:0!important;padding:8px 0 0!important;font:400 15px/1.6 var(--vl-body)!important;color:var(--vl-mute);} /* product grid (search results, 404 suggestions) */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .row-grid{margin-left:0!important;margin-right:0!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .row-grid:has(>.js-item-product){ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px; } @media (min-width:768px){ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .row-grid:has(>.js-item-product){grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.2vw,48px) clamp(16px,1.8vw,28px);} } @media (min-width:1000px){ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .row-grid:has(>.js-item-product){grid-template-columns:repeat(4,minmax(0,1fr));} body.vl-skin.template-search .category-body>.container-fluid>.row:has(>.col-md-2 *) .row-grid:has(>.js-item-product){grid-template-columns:repeat(3,minmax(0,1fr));} } /* card */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product{width:auto!important;max-width:none!important;flex:none!important;margin:0!important;padding:0!important;min-width:0;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item{position:relative;margin:0;background:transparent;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-image{ position:relative;max-height:none!important;overflow:hidden!important;border:0!important; background:var(--vl-paper)!important;border-radius:var(--vl-radius)!important; transition:transform .7s var(--vl-ease),box-shadow .7s var(--vl-ease); } body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product:hover .item-image{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(0,0,0,.28);} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .js-item-image-padding{padding-bottom:150%!important;} /* The stock card cannot tell packshots from campaign photos (the category page does, from its packshot list), and the store shoots both at 2:3. Filling the 2:3 box keeps packshots floating on their own margin (multiply blends their white into the grey) and stops photos showing as a smaller inner box. */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-image img{ position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important; width:100%!important;height:100%!important;max-width:none!important;max-height:none!important; object-fit:cover!important;mix-blend-mode:multiply;border-radius:0!important;transform:none!important; transition:opacity .35s ease,transform 1s var(--vl-ease)!important; } body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product:hover .item-image img{transform:scale(1.03)!important;} /* sold out: stays listed but reads unavailable (front image only) */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product:has(.js-stock-label:not([style*="none"])) .item-image-featured{filter:grayscale(1);opacity:.55;} /* tags (.vl-card-tag): top-left stack, Impact, rust sale / ink sold out */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .labels{ position:absolute!important;top:12px!important;left:12px!important;right:12px!important;bottom:auto!important; display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:9;pointer-events:none; } body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .labels .label{ position:static!important;width:auto;height:auto;margin:0!important;padding:6px 8px!important;border:0;border-radius:3px!important; background:#fff!important;color:var(--vl-ink)!important; font:400 10.5px/1 var(--vl-tiny)!important;letter-spacing:.08em!important;text-transform:uppercase; } body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .labels .label-accent{background:var(--vl-red)!important;color:#fff!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .labels .label-default{background:var(--vl-ink)!important;color:#fff!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .labels .label-offer-percentage{padding:0!important;border-radius:0!important;background:none!important;color:inherit!important;font:inherit!important;} /* meta (.vl-card-meta / -name / -price / -fee) */ body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-description{padding:14px 2px 0!important;text-align:left;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-link{display:block;color:var(--vl-ink)!important;text-decoration:none!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-name{ display:block!important;margin:0!important; font:500 11px/1.3 var(--vl-body)!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:var(--vl-ink)!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset; } body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-price-container{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:5px 0 0!important;font:400 13px/1.2 var(--vl-body);} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-price{font-weight:600;color:var(--vl-ink);} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .price-compare{margin:0!important;opacity:1;color:var(--vl-mute);font-size:11.5px;text-decoration:line-through;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-installments{margin:5px 0 0!important;font:400 11px/1.3 var(--vl-body);color:var(--vl-mute)!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-installments *{font:inherit!important;color:inherit!important;} body.vl-skin:is(.template-search,.template-404) :is(.category-body,#page-error) .js-item-product .item-actions .btn{min-height:40px;border-radius:0!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;} /* pagination (.vl-cat-pages + .vl-rail-nav arrows) and "load more" */ body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4{ gap:14px;margin:clamp(40px,5vw,72px) 0 0!important; font:400 12px/1 var(--vl-tiny);letter-spacing:.12em;color:var(--vl-mute); } body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4:not(:has(*)){margin:0!important;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4>[class*="col"]{padding:0;flex:none;font:inherit;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 span{margin:0 3px;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 span:first-child{color:var(--vl-ink);} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--vl-ink);background:#fff;color:var(--vl-ink);transition:background-color .25s ease,color .25s ease;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 a svg{width:14px;height:14px;color:inherit!important;fill:currentColor!important;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 a:hover{background:var(--vl-ink);color:#fff;} body.vl-skin:is(.template-search,.template-blog) .row.justify-content-center.align-items-center.my-4 a.disabled{opacity:.3;pointer-events:none;} body.vl-skin.template-search .category-body .js-load-more.btn-primary{min-height:44px;padding:0 22px;border:1px solid var(--vl-ink)!important;background:transparent!important;color:var(--vl-ink)!important;font-size:11.5px!important;} body.vl-skin.template-search .category-body .js-load-more.btn-primary:hover{background:var(--vl-ink)!important;color:#fff!important;} /* ---- 8. Cart page ---- */ body.vl-skin.template-cart #shoppingCartPage{padding-bottom:var(--vl-sec);} body.vl-skin.template-cart #shoppingCartPage>.container-fluid{margin-bottom:0!important;} body.vl-skin.template-cart #shoppingCartPage form[data-store="cart-form"]{margin-top:clamp(8px,1.5vw,20px);} /* empty (.vl-cart-empty / .vl-cat-empty) */ body.vl-skin.template-cart #shoppingCartPage form>.alert-info{ margin:0;padding:clamp(56px,8vw,112px) 0;border:0;border-top:1px solid var(--vl-line);border-radius:0;background:none; text-align:center;font:500 clamp(20px,2.6vw,32px)/1.15 var(--vl-display);letter-spacing:.02em;text-transform:uppercase;color:var(--vl-ink); } body.vl-skin.template-cart #shoppingCartPage form>.alert-info svg,body.vl-skin.template-cart #shoppingCartPage form>.alert-info::before{display:none;} body.vl-skin.template-cart #shoppingCartPage form>.alert-info::after{content:'Sumá prendas desde cualquier producto o armá un look completo.';display:block;max-width:44ch;margin:16px auto 0;font:400 14px/1.6 var(--vl-body);letter-spacing:0;text-transform:none;color:var(--vl-mute);} /* column heads */ body.vl-skin.template-cart #shoppingCartPage .cart-row.subtitle{margin:0!important;padding:0 0 14px;border-bottom:1px solid var(--vl-ink);font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--vl-mute);} /* line items (.vl-line) */ body.vl-skin.template-cart #shoppingCartPage .cart-item{margin:0!important;padding:22px 0;border-bottom:1px solid var(--vl-line);} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col-3{flex:0 0 88px;max-width:88px;padding:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col-3 a{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--vl-paper);border-radius:8px;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col-3 img{position:absolute;top:6%;left:6%;width:88%;height:88%;max-width:none;object-fit:contain;mix-blend-mode:multiply;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col{padding-left:16px;padding-right:8px;min-width:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col>.row{margin:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item [data-component="line-item.name"]{padding:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item [data-component="line-item.name"]>a{display:inline-flex;align-items:center;min-height:40px;margin:-8px 0;padding:0;font:600 11.5px/1.35 var(--vl-body);letter-spacing:.04em;text-transform:uppercase;color:var(--vl-ink)!important;text-decoration:none!important;transition:color .2s ease;} body.vl-skin.template-cart #shoppingCartPage .cart-item [data-component="line-item.name"]>a:hover{color:var(--vl-red)!important;} body.vl-skin.template-cart #shoppingCartPage .cart-item [data-component="line-item.name"] small{display:block;margin-top:4px;font:400 12px/1.4 var(--vl-body);color:var(--vl-mute);} body.vl-skin.template-cart #shoppingCartPage .cart-item .text-accent{font:400 10.5px/1 var(--vl-tiny)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--vl-red)!important;} body.vl-skin.template-cart #shoppingCartPage .cart-item .cart-item-subtotal-short{font:400 13px/1.3 var(--vl-body);color:var(--vl-mute);} body.vl-skin.template-cart #shoppingCartPage .cart-item .js-cart-item-subtotal{font:600 13px/1.3 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-cart #shoppingCartPage .cart-item .price-compare{margin-left:6px;opacity:1!important;color:var(--vl-mute);font-size:11.5px;} /* quantity (.vl-qty) — 44px tall so every control is a comfortable tap */ body.vl-skin.template-cart #shoppingCartPage .form-quantity{display:inline-flex!important;align-items:stretch;width:auto!important;height:44px;margin:0!important;padding:0!important;float:none!important;border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff;} body.vl-skin.template-cart #shoppingCartPage .form-quantity>.row{flex-wrap:nowrap;align-items:stretch!important;height:100%;margin:0;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-quantity-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-quantity-icon svg{width:11px;height:11px;fill:var(--vl-ink)!important;transition:fill .2s ease;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-quantity-icon:hover svg{fill:var(--vl-red)!important;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-control-container{display:flex;flex:none;width:36px;padding:0!important;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-control{width:36px;height:42px;padding:0;border:0!important;background:transparent;text-align:center;font:500 13px/1 var(--vl-body);color:var(--vl-ink);-moz-appearance:textfield;appearance:textfield;} body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-control::-webkit-inner-spin-button, body.vl-skin.template-cart #shoppingCartPage .form-quantity .form-control::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} /* remove (.vl-x) */ body.vl-skin.template-cart #shoppingCartPage .cart-item-delete{padding:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item-delete .btn-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--vl-line);border-radius:50%!important;background:#fff;color:var(--vl-ink);transition:background-color .2s ease,color .2s ease,border-color .2s ease;} body.vl-skin.template-cart #shoppingCartPage .cart-item-delete .btn-link svg{width:11px;height:11px;fill:currentColor!important;} body.vl-skin.template-cart #shoppingCartPage .cart-item-delete .btn-link:hover{background:var(--vl-ink);border-color:var(--vl-ink);color:#fff;} @media (max-width:767px){ body.vl-skin.template-cart #shoppingCartPage .cart-item .cart-item-quantity.col-7{text-align:left!important;padding-left:0;} body.vl-skin.template-cart #shoppingCartPage .cart-item{align-items:flex-start;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col-3{flex-basis:76px;max-width:76px;} body.vl-skin.template-cart #shoppingCartPage .cart-item [data-component="line-item.name"]{margin-bottom:12px!important;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col>.row>.col-10{flex:0 0 100%;max-width:100%;padding:0 48px 0 0;} /* stock pins the remove button to the row's top-right corner on phones */ body.vl-skin.template-cart #shoppingCartPage .cart-item-delete{top:18px!important;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col>.row>div:last-child{align-self:center;margin-top:0!important;} } @media (min-width:768px){ /* column heads line up with the line-item columns below */ body.vl-skin.template-cart #shoppingCartPage .cart-row.subtitle .row{margin:0;} body.vl-skin.template-cart #shoppingCartPage .cart-row.subtitle .col-md-1{flex:0 0 88px;max-width:88px;padding:0;white-space:nowrap;} body.vl-skin.template-cart #shoppingCartPage .cart-row.subtitle .col-md-10{flex:1 1 0;max-width:none;padding-left:16px;padding-right:56px;} body.vl-skin.template-cart #shoppingCartPage .cart-item>.col{flex:1 1 0;max-width:none;} body.vl-skin.template-cart #shoppingCartPage .cart-item-delete{flex:0 0 48px;max-width:48px;text-align:right!important;} } /* shipping calculator + totals side by side under the list */ body.vl-skin.template-cart #shoppingCartPage form>.row.justify-content-between{margin:clamp(32px,4vw,56px) 0 0;gap:8px 40px;} body.vl-skin.template-cart #shoppingCartPage #cart-sticky-summary{margin-top:0!important;} body.vl-skin.template-cart #shoppingCartPage form>.row.justify-content-between>.col-md-3{flex:1 1 100%;max-width:100%;padding:0;} @media (min-width:768px){ body.vl-skin.template-cart #shoppingCartPage form>.row.justify-content-between{flex-wrap:nowrap;} body.vl-skin.template-cart #shoppingCartPage form>.row.justify-content-between>.col-md-3{flex:0 1 400px;max-width:400px;} body.vl-skin.template-cart #shoppingCartPage #cart-sticky-summary{top:calc(var(--vl-stick,var(--vl-header-h,110px)) + 20px);} } body.vl-skin.template-cart #shoppingCartPage [data-store="shipping-calculator"]{margin-top:0!important;} body.vl-skin.template-cart #shoppingCartPage .shipping-calculator-head.with-form{height:122px;} body.vl-skin.template-cart #shoppingCartPage [data-store="shipping-calculator"] .position-relative.row{margin:0;} body.vl-skin.template-cart #shoppingCartPage [data-store="shipping-calculator"] .position-relative.row>.col-12{padding:0;} body.vl-skin.template-cart #shoppingCartPage .shipping-calculator-head.with-zip{height:64px;} body.vl-skin.template-cart #shoppingCartPage .shipping-calculator-head.with-error{height:210px;} body.vl-skin.template-cart #shoppingCartPage .shipping-calculator-form .form-group{margin-bottom:0!important;} body.vl-skin.template-cart #shoppingCartPage .js-shipping-input{height:48px;padding:0 60px 0 16px;border:1px solid var(--vl-line)!important;border-radius:0!important;background:#fff;font:400 16px/1 var(--vl-body);color:var(--vl-ink);box-shadow:none;} body.vl-skin.template-cart #shoppingCartPage .js-shipping-input:focus{border-color:var(--vl-ink)!important;} body.vl-skin.template-cart #shoppingCartPage .js-calculate-shipping.btn-append{top:0!important;right:0!important;margin:0!important;height:48px!important;width:48px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:0!important;background:var(--vl-ink)!important;color:#fff!important;} body.vl-skin.template-cart #shoppingCartPage .js-calculate-shipping.btn-append svg{fill:#fff!important;width:16px;height:16px;} body.vl-skin.template-cart #shoppingCartPage .js-calculate-shipping.btn-append:hover{background:var(--vl-red)!important;} body.vl-skin.template-cart #shoppingCartPage [data-store="shipping-calculator"] a.btn-link{margin:4px 0 0!important;font-size:11px;} body.vl-skin.template-cart #shoppingCartPage [data-store="shipping-calculator"] .font-small{font:400 13px/1.4 var(--vl-body);} body.vl-skin.template-cart #shoppingCartPage .js-shipping-calculator-change-zipcode{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--vl-ink)!important;border-radius:0!important;background:transparent!important;color:var(--vl-ink)!important;font:400 11px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;} body.vl-skin.template-cart #shoppingCartPage .js-shipping-calculator-change-zipcode:hover{background:var(--vl-ink)!important;color:#fff!important;} body.vl-skin.template-cart #shoppingCartPage .js-shipping-calculator-response .radio-button{padding:14px 0;border-bottom:1px solid var(--vl-line);font:400 13.5px/1.4 var(--vl-body);} /* free-shipping progress (.vl-rail-bar language: hairline track, rust fill) */ body.vl-skin.template-cart #shoppingCartPage .progress-bar{margin:0 0 28px!important;padding:0!important;background:none;} body.vl-skin.template-cart #shoppingCartPage .progress-bar-title,body.vl-skin.template-cart #shoppingCartPage .ship-free-rest-text{margin-bottom:10px;font:400 12.5px/1.45 var(--vl-body);color:var(--vl-ink);} body.vl-skin.template-cart #shoppingCartPage .bar-progress{height:2px;border-radius:0;background:var(--vl-line);overflow:hidden;} body.vl-skin.template-cart #shoppingCartPage .bar-progress-active{height:100%;border-radius:0;background:var(--vl-red)!important;} /* totals (.vl-sum) */ body.vl-skin.template-cart #cart-sticky-summary .row{margin-left:0;margin-right:0;} body.vl-skin.template-cart #cart-sticky-summary .row>[class*="col"]{padding-left:0!important;padding-right:0!important;} body.vl-skin.template-cart #cart-sticky-summary :is([data-store="cart-subtotal"],#shipping-cost-container,.js-total-promotions-detail-row,.js-shipping-discount-row){align-items:baseline;margin:0 0 12px!important;font:400 11.5px/1.3 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mute);} body.vl-skin.template-cart #cart-sticky-summary .js-cart-subtotal{font:600 15px/1 var(--vl-body);letter-spacing:0;color:var(--vl-ink);} body.vl-skin.template-cart #cart-sticky-summary #shipping-cost-container>span+span{font:400 13px/1.3 var(--vl-body);letter-spacing:0;text-transform:none;opacity:1!important;color:var(--vl-mute);} body.vl-skin.template-cart #cart-sticky-summary .js-total-promotions{color:var(--vl-red)!important;} body.vl-skin.template-cart #cart-sticky-summary .divider{margin:6px 0 18px;border-bottom:1px solid var(--vl-ink);} body.vl-skin.template-cart #cart-sticky-summary [data-store="cart-total"]{margin-bottom:22px!important;} body.vl-skin.template-cart #cart-sticky-summary [data-store="cart-total"] .h2{align-items:baseline;margin:0;font:400 12px/1 var(--vl-tiny)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin.template-cart #cart-sticky-summary [data-store="cart-total"] .js-cart-total{font:600 24px/1 var(--vl-body)!important;letter-spacing:-.01em;text-transform:none;} body.vl-skin.template-cart #cart-sticky-summary [data-store="cart-total"] .col-12{margin-top:8px;font:400 12.5px/1.4 var(--vl-body);letter-spacing:0;text-transform:none;color:var(--vl-mute);} body.vl-skin.template-cart #cart-sticky-summary [data-store="cart-total"] .col-12 *{font:inherit!important;} body.vl-skin.template-cart #cart-sticky-summary .row.px-3{padding-left:0!important;padding-right:0!important;} body.vl-skin.template-cart #cart-sticky-summary #go-to-checkout{width:100%!important;margin:0 0 12px!important;} body.vl-skin.template-cart #cart-sticky-summary .text-center{display:flex;justify-content:center;} /* ---- 9. 404 ---- */ body.vl-skin.template-404 .page-header{text-align:center;} body.vl-skin.template-404 .page-header h1{padding:clamp(56px,9vw,128px) 0 20px;font-size:clamp(40px,8.4vw,132px);line-height:.92;} body.vl-skin.template-404 .page-header h1::before{margin:0 auto 22px;} body.vl-skin.template-404 #page-error{padding-bottom:var(--vl-sec);} body.vl-skin.template-404 #page-error>.container-fluid>p:first-child{max-width:44ch;margin:0 auto!important;text-align:center;font:400 15px/1.6 var(--vl-body);color:var(--vl-mute);} body.vl-skin.template-404 #page-error>.container-fluid>br{display:none;} /* the CTA row a template change adds (see report): reuses .vl-btn */ body.vl-skin:is(.template-404,.template-cart) :is(#page-error,#shoppingCartPage) .vl-page-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;} body.vl-skin.template-cart #shoppingCartPage form>.alert-info:has(+.vl-page-cta){padding-bottom:0;} body.vl-skin.template-cart #shoppingCartPage form>.alert-info+.vl-page-cta{margin:28px 0 0;padding-bottom:clamp(56px,8vw,112px);} body.vl-skin.template-404 #page-error .section-products-related{margin-top:clamp(56px,7vw,104px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--vl-line);} body.vl-skin.template-404 #page-error .section-products-related>h3{margin:0 0 clamp(28px,3.5vw,52px)!important;text-align:center;font:500 clamp(18px,2.2vw,30px)/1.15 var(--vl-display);letter-spacing:.02em;text-transform:uppercase;color:var(--vl-ink);} /* ---- 10. Store closed (password) ---- */ body.vl-skin.template-password .section-password{padding:clamp(56px,9vw,140px) 0 var(--vl-sec)!important;} body.vl-skin.template-password .section-password .row{margin:0;justify-content:center;} body.vl-skin.template-password .section-password .col-md-6{width:100%;max-width:760px;flex:none;padding:0;} body.vl-skin.template-password .section-password h2{margin:0 0 40px!important;font:500 clamp(26px,3.2vw,44px)/1.04 var(--vl-display);letter-spacing:.01em;text-transform:uppercase;color:var(--vl-ink);overflow-wrap:break-word;} body.vl-skin.template-password .section-password h2::before{margin:0 auto 20px;} body.vl-skin.template-password .section-password .form{max-width:440px;margin:0 auto;} /* eye toggle sits inside the field: label is 14px + 10px gap above it */ body.vl-skin.template-password .section-password .form-label{line-height:14px;} body.vl-skin.template-password .section-password .form-toggle-eye{position:absolute;top:24px;right:0;bottom:auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;background:none;} body.vl-skin.template-password .section-password .form-toggle-eye svg{width:18px;height:18px;fill:var(--vl-mute)!important;} body.vl-skin.template-password .section-password .js-password-input{padding-right:56px;} body.vl-skin.template-password .section-password .form-group>.mt-4:not(:has(a:not(:empty))){display:none;} body.vl-skin.template-password .section-password .alert{margin:12px 0 0;text-align:left;} body.vl-skin.template-password .section-password .btn-primary{display:flex;width:100%;} /* ---- 11. Blog index ---- */ body.vl-skin.template-blog .blog-page{padding-bottom:var(--vl-sec);} body.vl-skin.template-blog .blog-page>.row{row-gap:clamp(28px,3.2vw,48px);} body.vl-skin.template-blog .blog-page .item{padding-bottom:0!important;} body.vl-skin.template-blog .blog-page .item img{border-radius:var(--vl-radius);} body.vl-skin.template-blog .blog-page .item :is(h2,h3,h4,.h5,.h4,.h3){margin:14px 0 10px!important;font:500 16px/1.2 var(--vl-display)!important;letter-spacing:.02em;text-transform:uppercase;color:var(--vl-ink);} body.vl-skin.template-blog .blog-page .item :is(h2,h3,h4,.h5,.h4,.h3) a{color:inherit;text-decoration:none;} body.vl-skin.template-blog .blog-page .item p{font:400 13.5px/1.6 var(--vl-body);color:var(--vl-mute);} body.vl-skin.template-blog .blog-page .item .btn-link{display:inline-flex;align-items:center;min-height:40px;font:400 11.5px/1 var(--vl-tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--vl-ink)!important;text-decoration:underline!important;text-underline-offset:5px;} body.vl-skin.template-blog .blog-page .item .btn-link:hover{color:var(--vl-red)!important;}