/**
* VIP Artesanías — phase A shell (homepage-first).
* Tokens + layout polish on top of Classic / Bootstrap 4.
* Typography wired through `fonts.css` (self-hosted WOFF2) + `--vip-font-*`.
* `@import` is a fallback when `shop1.json` does not register `vip-fonts` (see `head.tpl`).
*/
@import url("fonts.css");
:root {
--vip-terra: #c45c41;
--vip-terra-dark: #a54a33;
/* Site canvas — plain white unless a block sets its own background. */
--vip-page-bg: #ffffff;
--vip-cream: var(--vip-page-bg);
--vip-charcoal: #1f1f1f;
--vip-text: #2b2b2b;
--vip-muted: rgba(43, 43, 43, 0.72);
--vip-header-tan: #D5A17D;
--vip-header-tan-dark: #b88d5f;
--vip-header-nav: #7a7a7a;
/* Canonical site-wide content width.
* `--vip-home-feature-width` is the single source of truth for wide home bands
* (curated / favorites / Group 16 content column). Hero, Novedades, brands
* titles, etc. use `--vip-figma-content-width` below.
* `--vip-shell-max` is kept in sync for header/footer max-width + padding. */
--vip-shell-max: 1440px;
--vip-shell-gutter: clamp(1rem, 2.25vw, 2.5rem);
--vip-home-feature-width: min(calc(100vw - clamp(1rem, 4vw, 4rem)), 1440px);
--vip-header-main-max: 1560px;
--vip-header-main-gutter: clamp(1.5rem, 3vw, 3.75rem);
/* Earlgo first for brand display; Raleway/Open Sans unchanged in `fonts.css`. */
--vip-font-display: "Earlgo", Raleway, "Helvetica Neue", Arial, sans-serif;
--vip-font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
--vip-font-figma: "Fira Sans", var(--vip-font-body);
/* Homepage / listing content column (hero, Novedades, section titles, …).
* Aug 2026 FO: hard px cap — the old `70.75vw` (~1357px @ 1920) always won
* over any larger px token, so “narrow the content” tweaks were invisible. */
--vip-figma-content-width: min(var(--vip-home-feature-width), 1240px);
--vip-figma-brown: #7e614a;
--vip-figma-tan: #d5a17d;
--vip-figma-gold: #e0d041;
--vip-figma-footer-bg: #f8f8f8;
--vip-figma-parrafo-size: 15px;
--vip-figma-parrafo-lh: 22.5px;
/* Figma overlay cards — wide 890×302, narrow 437×302 @ 1920 content ~1357px. */
--vip-figma-card-h: 302px;
--vip-figma-card-row-cqi: 22.25cqi;
/* Figma H2 on brand/category overlay cards — Fira Sans ExtraBold 25 / 25 (Open Sans hosted). */
--vip-figma-h2-size: 25px;
--vip-figma-h2-lh: 25px;
/* Group 10 uses the same canonical outer width as the other homepage panels.
* Its editorial grid scales inside that shared boundary. */
--vip-home-brand-panel-w: var(--vip-figma-content-width);
--vip-home-brand-inner-w: 100%;
--vip-home-brand-img-w: 700px;
--vip-home-brand-img-h: 450px;
--vip-home-brand-copy-w: 508px;
--vip-home-brand-panel-stroke: 3.5px;
--vip-home-cta-panel-w: 1690px;
--vip-home-cta-panel-h: 480px;
--vip-home-cta-scrim: rgba(213, 161, 125, 0.58);
--vip-home-cta-pad-x: 115px;
--vip-home-cta-logo-w: 201px;
--vip-home-cta-logo-gap: 72px;
/* Cream gap between Group 10 panel and Group 15 banner (~90px @ 1920). */
--vip-home-brand-cta-gap: 90px;
/* Figma Group 16 @ 1920 — full-bleed dark band + star texture (HOME.jpg).
* Background stays edge-to-edge; content column matches the tan category band
* above (`.vip-home-band__inner` → `--vip-figma-content-width`). */
--vip-home-magic-panel-w: var(--vip-figma-content-width);
--vip-home-magic-surface: #1d1d1d;
/* TRAMAMISTICA @ 2001px — small tiled stars + blur (Figma diffused sparkle, not sharp/auto). */
--vip-home-magic-stars-tile: 400px;
--vip-home-magic-stars-opacity: 0.4;
--vip-home-magic-stars-blur: 1.35px;
--vip-home-magic-cta-bg: #9a9a9a;
--vip-home-magic-cta-bg-hover: #adadad;
/* Image hover zoom — slow ease-out (mystic / editorial feel). */
--vip-image-zoom-duration: 0.8s;
--vip-image-zoom-easing: ease-out;
}
/* Classic / Bootstrap `.text-primary` is PrestaShop cyan (#2fb5d2) — VIP tan accent everywhere. */
.text-primary,
a.text-primary {
color: var(--vip-figma-tan) !important;
}
.text-primary:hover,
.text-primary:focus,
a.text-primary:hover,
a.text-primary:focus {
color: #c8926a !important;
}
/* Classic theme compatibility — neutralize every generic #24b9d7 UI fallback.
* Product/attribute color swatches and third-party payment brand marks are intentionally excluded. */
a {
color: var(--vip-figma-brown);
}
a:hover,
a:focus-visible {
color: var(--vip-figma-tan);
}
.btn-primary,
.bg-primary,
.card-primary,
.tag-primary,
#header .header-nav .cart-preview.active,
.group-span-filestyle .btn-default,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin {
color: #fff !important;
background-color: var(--vip-figma-tan) !important;
border-color: var(--vip-figma-tan) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
color: #fff !important;
background-color: #c8926a !important;
border-color: #c8926a !important;
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary:disabled:focus,
.btn-primary.disabled:focus {
background-color: var(--vip-figma-tan) !important;
border-color: var(--vip-figma-tan) !important;
}
.btn-outline-primary,
.btn-link,
.page-link,
.pagination .current a,
.tabs .nav-tabs .nav-link.active,
.dropdown-item:hover,
.dropdown-item:focus,
.product-miniature .highlighted-informations .quick-view:hover,
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover,
.block_newsletter form button[type="submit"] .search:hover,
.block_newsletter form input[type="text"]:focus + button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type="text"]:focus + button .search,
#header a:hover,
#header .top-menu a[data-depth="0"]:hover {
color: var(--vip-figma-tan) !important;
}
.btn-outline-primary {
border-color: var(--vip-figma-tan) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover,
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover,
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover,
.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover,
.facet-dropdown .select-list:hover {
color: #fff !important;
background-color: var(--vip-figma-tan) !important;
border-color: var(--vip-figma-tan) !important;
}
.card-outline-primary,
.card-outline-secondary {
border-color: var(--vip-figma-tan) !important;
}
.form-control:focus,
.input-group.focus,
.search-widget form input[type="text"]:focus,
.block_newsletter form input[type="text"]:focus,
.product-customization .product-message:focus {
outline-color: var(--vip-figma-tan) !important;
}
.block_newsletter form input[type="email"]:focus,
.facet-dropdown.open > .select-title,
.block-promo .promo-input + button,
body#checkout section.checkout-step .address-item.selected {
border-color: var(--vip-figma-tan) !important;
}
.custom-radio input[type="radio"]:checked + span,
.product-flags li.product-flag,
.block-social ul li:hover {
background-color: var(--vip-figma-tan) !important;
}
.product-price {
color: var(--vip-figma-brown);
}
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover,
#product-modal .modal-content .modal-body .product-images img:hover,
#subcategories ul li:hover .subcategory-image a {
border-color: var(--vip-figma-tan) !important;
}
.block-promo .promo-code-button.cancel-promo,
#blockcart-modal .product-name,
#header .header-nav .blockcart a:hover,
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover,
.account-list a:hover,
.footer-container li a:hover {
color: var(--vip-figma-tan) !important;
}
/* blockwishlist — global (modals in displayFooter + Vue lists page). */
.wishlist-add-to-new,
.wishlist-add-to-new.text-primary,
.wishlist-container-header .wishlist-add-to-new,
.wishlist-modal .wishlist-add-to-new,
.wishlist-modal .modal-footer .wishlist-add-to-new {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
cursor: pointer;
}
.wishlist-add-to-new .material-icons,
.wishlist-add-to-new.text-primary .material-icons {
color: inherit !important;
}
.wishlist-add-to-new:hover,
.wishlist-add-to-new:focus,
.wishlist-add-to-new.text-primary:hover,
.wishlist-add-to-new.text-primary:focus {
color: #c8926a !important;
opacity: 1;
}
html,
body {
font-family: var(--vip-font-body);
color: var(--vip-text);
background-color: var(--vip-page-bg);
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3 {
font-family: var(--vip-font-display);
}
/* VIP FO — no focus ring anywhere (header/footer are outside #wrapper; Classic sets a:focus outline). */
html {
-webkit-tap-highlight-color: transparent;
/* Full-bleed bands use 100vw / calc(50% - 50vw); 100vw includes the vertical
scrollbar gutter and otherwise creates a ~15px horizontal page scroll. */
overflow-x: clip;
}
body :is(
a,
button,
.btn,
[role="button"],
input,
select,
textarea,
.form-control,
.custom-select,
.page-link,
summary,
[tabindex]:not([tabindex="-1"])
):focus,
body :is(
a,
button,
.btn,
[role="button"],
input,
select,
textarea,
.form-control,
.custom-select,
.page-link,
summary,
[tabindex]:not([tabindex="-1"])
):focus-visible,
body :is(
a,
button,
.btn,
[role="button"],
input,
select,
textarea,
.form-control,
.custom-select,
.page-link,
summary,
[tabindex]:not([tabindex="-1"])
):active,
body .btn.focus,
body .btn:focus {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
body a,
body button,
body .btn,
body [role="button"],
body input,
body select,
body textarea,
body .form-control {
-webkit-tap-highlight-color: transparent;
}
body button::-moz-focus-inner,
body .btn::-moz-focus-inner {
border: 0;
}
/* Bootstrap 4 default glow on fields — suppressed; VIP forms re-add tan focus where needed. */
body .form-control:focus,
body .custom-select:focus {
outline: none !important;
box-shadow: none !important;
}
/* --- Header (designs/HOME.jpg) ------------------------------------------- */
#header {
background: #fff;
box-shadow: none;
position: sticky;
top: 0;
z-index: 1000;
}
#header .header-top.vip-header-shell {
background: #fff;
border-bottom: none;
padding: 0;
}
#header .vip-header-shell__inner {
width: 100%;
}
#header .header-nav {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
/* Announcement bar */
.vip-header-announcement {
background: var(--vip-header-tan);
color: #fff;
font-size: 0.74rem;
line-height: 1;
}
.vip-header-announcement__inner {
display: flex;
align-items: center;
width: 100%;
max-width: var(--vip-shell-max);
margin: 0 auto;
padding: 0.55rem 15px;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
box-sizing: border-box;
}
.vip-header-announcement__marquee {
width: 100%;
}
.vip-header-announcement__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 1.35rem;
margin: 0;
padding: 0;
list-style: none;
}
/* Clone shares .vip-header-announcement__list — must beat that display:flex
(same single-class specificity used to leave the marquee duplicate visible). */
.vip-header-announcement__list.vip-header-announcement__list--clone {
display: none;
}
.vip-header-announcement__item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
line-height: 1;
}
.vip-header-announcement__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.08rem;
line-height: 1;
width: 1em;
height: 1em;
/* Material Icons glyphs sit high in the em-box — nudge for optical center. */
transform: translateY(0.06em);
opacity: 0.95;
}
.vip-header-announcement__text {
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
}
/* Main row — nav | logo | search + account + cart */
.vip-header-main {
padding: 0.65rem 0 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vip-header-main__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: clamp(1.25rem, 3vw, 3.25rem);
width: 100%;
max-width: var(--vip-header-main-max);
margin: 0 auto;
padding-left: var(--vip-header-main-gutter);
padding-right: var(--vip-header-main-gutter);
}
.vip-header-main__nav {
grid-column: 1;
justify-self: start;
max-width: 100%;
padding-right: 0.5rem;
}
.vip-header-main__menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0 0.95rem;
margin: 0;
padding: 0;
list-style: none;
height: 2.6rem;
}
.vip-header-main__menu > li {
flex: 0 0 auto;
position: relative;
}
.vip-header-main__item--has-sub > a::after {
content: "";
display: inline-block;
width: 0.35rem;
height: 0.35rem;
margin-left: 0.35rem;
margin-bottom: 0.15rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
vertical-align: middle;
opacity: 0.7;
}
.vip-header-main__submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 40;
display: none;
min-width: 16.5rem;
margin: 0;
padding: 0.65rem 0;
list-style: none;
background: #fff;
border: 1px solid var(--vip-figma-tan, #d5a17d);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.vip-header-main__item--has-sub:hover > .vip-header-main__submenu,
.vip-header-main__item--has-sub:focus-within > .vip-header-main__submenu {
display: block;
}
.vip-header-main__submenu > .vip-header-main__subitem {
position: relative;
}
.vip-header-main__subitem--has-children > a {
padding-right: 1.75rem;
}
.vip-header-main__subitem--has-children > a::after {
content: "";
position: absolute;
top: 50%;
right: 0.85rem;
width: 0.35rem;
height: 0.35rem;
margin-top: -0.22rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
opacity: 0.7;
}
.vip-header-main__flyout {
position: absolute;
top: -0.65rem;
left: calc(100% - 2px);
z-index: 41;
display: none;
min-width: 14.5rem;
margin: 0;
padding: 0.65rem 0;
list-style: none;
background: #fff;
border: 1px solid var(--vip-figma-tan, #d5a17d);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.vip-header-main__subitem--has-children:hover > .vip-header-main__flyout,
.vip-header-main__subitem--has-children:focus-within > .vip-header-main__flyout {
display: block;
}
.vip-header-main__flyout a {
display: block;
padding: 0.45rem 1rem;
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 400;
color: var(--vip-header-nav, #7e614a);
text-decoration: none;
white-space: nowrap;
}
#header .vip-header-main__flyout a:hover,
#header .vip-header-main__flyout a:focus-visible {
background: rgba(213, 161, 125, 0.14);
color: var(--vip-figma-brown, #7e614a) !important;
}
.vip-header-main__submenu a {
display: block;
position: relative;
padding: 0.45rem 1rem;
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 400;
color: var(--vip-header-nav, #7e614a);
text-decoration: none;
white-space: nowrap;
}
#header .vip-header-main__submenu a:hover,
#header .vip-header-main__submenu a:focus-visible {
background: rgba(213, 161, 125, 0.14);
color: var(--vip-figma-brown, #7e614a) !important;
}
#header .vip-header-main__menu > li > a {
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 400;
color: var(--vip-header-nav);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease;
}
#header .vip-header-main__menu > li > a:hover {
color: var(--vip-header-tan-dark);
}
#header .vip-header-main__menu > li > a:focus,
#header .vip-header-main__menu > li > a:focus-visible,
#header .vip-header-main__menu > li > a:active,
#header .vip-header-main__tools a:focus,
#header .vip-header-main__tools a:focus-visible,
#header .vip-header-main__tools a:active,
#header .vip-header-user__link:focus,
#header .vip-header-user__link:focus-visible,
#header .vip-header-user__link:active,
#header .vip-header-cart__link:focus,
#header .vip-header-cart__link:focus-visible,
#header .vip-header-cart__link:active,
#header .vip-header-announcement a:focus,
#header .vip-header-announcement a:focus-visible,
#header .vip-header-announcement a:active {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
#header .vip-header-main__menu a.vip-header-main__menu-link--accent {
font-weight: 700;
color: var(--vip-header-tan);
}
.vip-header-main__brand {
grid-column: 2;
justify-self: center;
z-index: 2;
padding: 0 0.35rem;
}
.vip-header-main__heading {
margin: 0;
font-size: inherit;
font-weight: 400;
line-height: 1;
}
.vip-header-main__logo-link {
display: inline-block;
line-height: 0;
-webkit-tap-highlight-color: transparent;
}
#header .vip-header-main__logo-link:focus,
#header .vip-header-main__logo-link:focus-visible,
#header .vip-header-main__logo-link:active {
outline: none !important;
box-shadow: none !important;
}
#header .vip-header-mobile__logo a {
-webkit-tap-highlight-color: transparent;
}
#header .vip-header-mobile__logo a:focus,
#header .vip-header-mobile__logo a:focus-visible,
#header .vip-header-mobile__logo a:active {
outline: none !important;
box-shadow: none !important;
}
.vip-header-main__logo-img {
display: block;
width: auto;
max-width: min(255px, 30vw);
height: auto;
max-height: 42px;
}
.vip-header-main__tools {
grid-column: 3;
justify-self: end;
min-width: 0;
max-width: 100%;
overflow: visible;
}
.vip-header-main__search-slot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.55rem 0.85rem;
flex-wrap: nowrap;
width: auto;
max-width: 100%;
height: 2.6rem;
}
/* Hide classic main menu in displayTop — custom nav is in vip-header-main */
.vip-header-main__search-slot #_desktop_top_menu,
.vip-header-main__search-slot .top-menu {
display: none !important;
}
.vip-header-main__search-slot > * {
flex: 0 0 auto;
}
.vip-header-main__search-slot .vip-header-search {
order: 1;
}
.vip-header-main__search-slot .vip-header-user {
order: 2;
}
.vip-header-main__search-slot .vip-header-cart {
order: 3;
}
/* Search pill — reset Classic / search-widgets floats and widths */
#header .vip-header-main #search_widget,
#header .vip-header-main .search-widgets.vip-header-search {
align-self: center;
float: none !important;
position: relative !important;
width: 17.75rem !important;
max-width: 17.75rem;
min-width: 17.75rem;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 17.75rem;
box-shadow: none;
}
#header .vip-header-main .vip-header-search .search-widget,
#header .vip-header-main .vip-header-search form {
width: 100%;
margin: 0 !important;
}
#header .vip-header-main .vip-header-search__form {
display: flex;
align-items: center;
width: 100%;
height: 2.6rem;
margin: 0 !important;
border: 1px solid var(--vip-header-tan);
border-radius: 12px;
overflow: hidden;
background: #f7f7f7;
box-sizing: border-box;
box-shadow: none;
}
#header .vip-header-main .vip-header-search__input {
flex: 1 1 auto;
min-width: 0;
width: 1%;
height: 100%;
border: 0 !important;
box-shadow: none !important;
padding: 0 0.35rem 0 1.05rem;
font-family: var(--vip-font-body);
font-size: 1rem;
line-height: 1;
color: var(--vip-text);
background: transparent !important;
appearance: none;
}
#header .vip-header-main .vip-header-search__input::placeholder {
color: rgba(111, 111, 111, 0.85);
}
/* ps_searchbar appends the jQuery UI menu to ; override ui-widget's Arial. */
.ui-autocomplete.searchbar-autocomplete,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item .product {
font-family: var(--vip-font-body) !important;
}
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item .product {
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 600;
letter-spacing: 0;
color: var(--vip-figma-brown) !important;
}
#header .vip-header-main .vip-header-search__input:focus,
#header .vip-header-main .vip-header-search__input:focus-visible,
#header .vip-header-main .vip-header-search__submit:focus,
#header .vip-header-main .vip-header-search__submit:focus-visible,
#header .vip-header-main .vip-header-search__submit:active {
outline: none !important;
box-shadow: none !important;
}
#header .vip-header-main .vip-header-search__submit {
position: static !important;
flex: 0 0 2.75rem;
display: grid;
place-items: center;
align-self: stretch !important;
width: 2.75rem;
height: auto !important;
border: 0 !important;
background: transparent !important;
color: var(--vip-header-nav);
cursor: pointer;
padding: 0 !important;
margin: 0 !important;
line-height: 1;
transform: none !important;
}
#header .vip-header-main #_desktop_user_info,
#header .vip-header-main #_desktop_cart,
#header .vip-header-main .vip-header-user,
#header .vip-header-main .vip-header-cart,
#header .vip-header-user__dropdown,
#header .vip-header-cart__block,
#header .vip-header-cart__header {
display: flex;
align-items: center;
align-self: center;
margin: 0 !important;
}
#header .vip-header-main .vip-header-search__submit .material-icons {
display: block;
width: auto;
height: auto;
font-size: 1.45rem;
line-height: 1;
}
/* Classic parent theme overrides (bold black header links) */
#header .vip-header-main__tools a,
#header .vip-header-user__link,
#header .vip-header-cart__link {
color: var(--vip-header-tan);
}
/* Account + cart — icon above label */
.vip-header-user__link,
.vip-header-cart__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
height: 2.6rem;
text-decoration: none;
color: var(--vip-header-tan);
min-width: 3.35rem;
}
.vip-header-user__icon,
.vip-header-cart__icon {
font-size: 1.65rem;
line-height: 1;
display: block;
flex-shrink: 0;
}
.vip-header-cart__icon {
width: 1.65rem;
height: 1.65rem;
}
.vip-header-user__label,
.vip-header-cart__label {
font-family: var(--vip-font-body);
font-size: 0.72rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
white-space: nowrap;
}
.vip-header-cart {
position: relative;
}
.vip-header-cart__count {
position: absolute;
top: -2px;
right: 0.15rem;
min-width: 1rem;
height: 1rem;
padding: 0 0.2rem;
border-radius: 999px;
background: var(--vip-header-tan-dark);
color: #fff;
font-size: 0.62rem;
font-weight: 700;
line-height: 1rem;
text-align: center;
}
.vip-header-cart__block .cart-products-count,
.vip-header-cart .header {
display: none;
}
/* Preview-only dual navigation review */
html:not([data-vip-nav-variant="mariano"]) [data-vip-nav-panel="mariano"],
html[data-vip-nav-variant="mariano"] [data-vip-nav-panel="current"] {
display: none !important;
}
.vip-nav-preview-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 2.2rem;
padding: 0.32rem var(--vip-header-main-gutter);
border-bottom: 1px solid rgba(126, 97, 74, 0.12);
background: linear-gradient(90deg, #faf7f4 0%, #f3e9df 50%, #faf7f4 100%);
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 0.74rem;
line-height: 1;
}
.vip-nav-preview-switch__label {
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.vip-nav-preview-switch__choices {
display: inline-flex;
overflow: hidden;
border: 1px solid var(--vip-header-tan, #d5a17d);
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 8px rgba(70, 42, 24, 0.08);
}
.vip-nav-preview-switch__choice {
min-height: 1.45rem;
padding: 0.18rem 0.65rem;
border: 0;
border-right: 1px solid rgba(213, 161, 125, 0.45);
background: transparent;
color: var(--vip-figma-brown, #7e614a);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.vip-nav-preview-switch__choice:last-child {
border-right: 0;
}
.vip-nav-preview-switch__choice.is-active {
background: var(--vip-header-tan, #d5a17d);
color: #fff;
}
.vip-nav-preview-switch__choice:focus-visible {
outline: 2px solid var(--vip-figma-brown, #7e614a);
outline-offset: -2px;
}
.vip-mariano-nav {
position: relative;
z-index: 3;
width: 100%;
padding: 0.55rem 0;
background: #fff;
}
.vip-mariano-nav__menu {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: stretch;
gap: 0;
width: 100%;
max-width: var(--vip-header-main-max);
min-height: 3.1rem;
margin: 0 auto;
padding: 0 var(--vip-header-main-gutter);
list-style: none;
box-sizing: border-box;
}
.vip-mariano-nav__item {
position: static;
display: flex;
align-items: stretch;
justify-content: center;
min-width: 0;
overflow: visible;
border-right: 1px solid rgba(126, 97, 74, 0.18);
background: transparent;
transition: background-color 0.15s ease;
}
.vip-mariano-nav__item:nth-child(7n) {
border-right: 0;
}
.vip-mariano-nav__item:nth-child(-n + 7) {
border-bottom: 1px solid rgba(126, 97, 74, 0.15);
}
.vip-mariano-nav__item:hover,
.vip-mariano-nav__item:focus-within,
.vip-mariano-nav__item.is-open {
background: rgba(213, 161, 125, 0.1);
}
.vip-mariano-nav__trigger {
position: relative;
display: flex;
align-items: stretch;
justify-content: center;
width: 100%;
}
#header .vip-mariano-nav__primary {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 3.15rem;
padding: 0.62rem 0.55rem;
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.045em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header .vip-mariano-nav__trigger .vip-mariano-nav__primary {
padding-right: 1.45rem;
padding-left: 1.45rem;
}
#header .vip-mariano-nav__primary:hover,
#header .vip-mariano-nav__primary:focus-visible,
.vip-mariano-nav__item.is-open > .vip-mariano-nav__trigger .vip-mariano-nav__primary {
color: var(--vip-header-tan-dark, #b88d5f);
}
.vip-mariano-nav__toggle {
position: absolute;
top: 0;
right: 0.1rem;
bottom: 0;
display: grid;
place-items: center;
width: 1.25rem;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--vip-figma-brown, #7e614a);
cursor: pointer;
}
.vip-mariano-nav__toggle .material-icons {
font-size: 1rem;
transition: transform 0.15s ease;
}
.vip-mariano-nav__item.is-open .vip-mariano-nav__toggle .material-icons {
transform: rotate(180deg);
}
.vip-mariano-nav__panel {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 45;
display: none;
width: 100%;
border-top: 3px solid var(--vip-header-tan, #d5a17d);
background: #fff;
box-shadow: 0 16px 30px rgba(42, 28, 18, 0.12);
}
.vip-mariano-nav__panel::before {
content: "";
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 0.65rem;
}
.vip-mariano-nav__item--parent:hover > .vip-mariano-nav__panel,
.vip-mariano-nav__item--parent:focus-within > .vip-mariano-nav__panel,
.vip-mariano-nav__item--parent.is-open > .vip-mariano-nav__panel {
display: block;
}
.vip-mariano-nav__panel-inner {
width: 100%;
max-width: var(--vip-header-main-max);
margin: 0 auto;
padding: 1.5rem var(--vip-header-main-gutter) 1.75rem;
box-sizing: border-box;
}
#header .vip-mariano-nav__heading {
display: inline-block;
margin-bottom: 0.9rem;
color: var(--vip-header-tan-dark, #b88d5f);
font-family: var(--vip-font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
}
.vip-mariano-nav__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.vip-mariano-nav__grid li {
min-width: 0;
}
#header .vip-mariano-nav__grid a {
display: block;
min-height: 2.7rem;
padding: 0.68rem 0.85rem;
border: 1px solid rgba(184, 141, 95, 0.16);
border-radius: 6px;
background: #fbf8f5;
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
#header .vip-mariano-nav__grid a:hover,
#header .vip-mariano-nav__grid a:focus-visible {
border-color: rgba(184, 141, 95, 0.42);
background: rgba(213, 161, 125, 0.15);
color: var(--vip-header-tan-dark, #b88d5f);
}
#header .vip-mariano-nav__item--utility {
background: transparent;
}
#header .vip-mariano-nav__item--utility .vip-mariano-nav__primary {
color: var(--vip-header-tan-dark, #b88d5f);
}
#header .vip-mariano-nav__item--accent {
background: transparent;
}
#header .vip-mariano-nav__item--accent .vip-mariano-nav__primary {
color: var(--vip-header-tan-dark, #b88d5f);
}
#header .vip-mariano-nav__item--accent:hover,
#header .vip-mariano-nav__item--accent:focus-within {
background: rgba(213, 161, 125, 0.14);
}
/* Final navigation: current compact header + Mariano-style category mega menu. */
.vip-header-main {
position: relative;
}
.vip-header-main__menu > .vip-header-main__item--has-sub {
position: static;
}
.vip-header-main__submenu[data-vip-final-categories] {
top: 100%;
left: 50%;
z-index: 50;
grid-template-columns: repeat(7, minmax(0, 1fr));
width: min(
calc(100% - (2 * var(--vip-header-main-gutter))),
var(--vip-header-main-max)
);
min-width: 0;
margin: 0;
padding: 0;
overflow: visible;
border: 1px solid rgba(184, 141, 95, 0.72);
border-radius: 0 0 22px 22px;
background: var(--vip-header-tan, #d5a17d);
box-shadow: 0 18px 34px rgba(42, 28, 18, 0.14);
transform: translateX(-50%);
}
.vip-header-main__item--has-sub:hover
> .vip-header-main__submenu[data-vip-final-categories],
.vip-header-main__item--has-sub:focus-within
> .vip-header-main__submenu[data-vip-final-categories],
.vip-header-main__item--has-sub.is-open
> .vip-header-main__submenu[data-vip-final-categories] {
display: grid;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem {
position: static;
display: flex;
min-width: 0;
min-height: 4.2rem;
border-right: 1px solid rgba(255, 255, 255, 0.58);
border-bottom: 1px solid rgba(255, 255, 255, 0.58);
background: transparent;
transition: background-color 0.16s ease;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:nth-child(7n) {
border-right: 0;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:nth-child(n + 8) {
border-bottom: 0;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:nth-child(7n + 1):nth-child(n + 8),
#header
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:nth-child(7n + 1):nth-child(n + 8)
> a {
border-bottom-left-radius: 21px;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:last-child,
#header
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:last-child
> a {
border-bottom-right-radius: 21px;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:hover,
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem:focus-within,
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem.is-active {
background: rgba(126, 97, 74, 0.16);
}
#header
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem
> a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
padding: 0.72rem 1.35rem;
color: #fff;
font-family: var(--vip-font-body);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.025em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: normal;
}
#header
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem--has-children
> a {
padding-right: 1.75rem;
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem--has-children
> a::after {
right: 0.75rem;
border-color: #fff;
transform: rotate(45deg);
}
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem--utility,
.vip-header-main__submenu[data-vip-final-categories]
> .vip-header-main__subitem--accent {
background: rgba(126, 97, 74, 0.08);
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout {
display: none;
top: 100%;
right: 40px;
left: 40px;
z-index: 51;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem 0.65rem;
width: auto;
min-width: 0;
margin: 0;
padding: 1.15rem 1.35rem 1.4rem;
border: 1px solid rgba(184, 141, 95, 0.72);
border-top: 0;
border-radius: 0 0 8px 8px;
background: #fff;
box-shadow: 0 18px 34px rgba(42, 28, 18, 0.14);
}
.vip-vies-status {
width: 100%;
margin: 0.45rem 0 0;
font-size: 0.82rem;
line-height: 1.4;
}
.vip-vies-status--checking,
.vip-vies-status--not_applicable {
color: #6f6f6f;
}
.vip-vies-status--valid {
color: #28733d;
}
.vip-vies-status--invalid,
.vip-vies-status--invalid_format,
.vip-vies-status--country_mismatch,
.vip-vies-status--identity_mismatch,
.vip-vies-status--unavailable {
color: #9b3f31;
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__subitem--has-children.is-active
> .vip-header-main__flyout,
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__subitem--has-children:focus-within
> .vip-header-main__flyout {
display: grid;
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-heading {
grid-column: 1 / -1;
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-item--has-children {
position: relative;
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-nested {
display: none;
position: absolute;
top: calc(100% - 0.2rem);
left: 0;
z-index: 52;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.35rem 0.5rem;
min-width: min(22rem, 70vw);
margin: 0;
padding: 0.75rem 0.85rem;
list-style: none;
border: 1px solid rgba(184, 141, 95, 0.72);
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 28px rgba(42, 28, 18, 0.14);
}
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-item--has-children:hover
> .vip-header-main__flyout-nested,
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-item--has-children:focus-within
> .vip-header-main__flyout-nested {
display: grid;
}
#header
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout
a {
min-height: 0;
padding: 0.68rem 0.85rem;
border: 1px solid rgba(184, 141, 95, 0.16);
border-radius: 6px;
background: #fbf8f5;
color: var(--vip-figma-brown, #7e614a);
font-size: 0.875rem;
line-height: 1.25;
white-space: normal;
}
#header
.vip-header-main__submenu[data-vip-final-categories]
.vip-header-main__flyout-heading
a {
padding: 0;
border: 0;
background: transparent;
color: var(--vip-header-tan-dark, #b88d5f);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Mobile header chrome — structural shell only.
* Phone/tablet look & layout overrides live in assets/css/vip-design-mobile.css
* so mobile fixes do not retune desktop rules in this file. */
.vip-header-mobile {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vip-header-mobile__bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0;
}
.vip-header-mobile__menu-btn {
border: none;
background: transparent;
color: var(--vip-header-tan);
padding: 0.25rem;
line-height: 0;
}
.vip-header-mobile__logo {
text-align: center;
}
.vip-header-mobile__logo img {
max-height: 34px;
width: auto;
}
.vip-header-mobile__actions {
display: flex;
align-items: center;
gap: 0.35rem;
}
@media (max-width: 1199px) {
.vip-header-announcement__text {
font-size: 0.68rem;
}
#header .vip-header-main__menu > li > a {
font-size: 0.8rem;
}
.vip-header-main__menu {
gap: 0 0.65rem;
}
#header .vip-header-main #search_widget,
#header .vip-header-main .search-widgets.vip-header-search {
width: 14rem !important;
max-width: 14rem;
min-width: 14rem;
flex-basis: 14rem;
}
}
@media (max-width: 991px) {
.vip-header-announcement__list {
gap: 0.35rem 0.85rem;
}
}
/* --- Homepage ------------------------------------------------------------ */
#wrapper {
background: var(--vip-page-bg);
}
.page-home {
padding-top: 1.35rem;
padding-bottom: 0;
}
#index #wrapper > .container {
max-width: var(--vip-shell-max);
padding-left: 0;
padding-right: 0;
}
#index #wrapper > .container > .row {
margin-left: 0;
margin-right: 0;
}
#index #content-wrapper {
padding-left: 0;
padding-right: 0;
}
.vip-home-modules section {
margin-bottom: 2rem;
}
/* Hero */
/* Figma HOME hero (~1357×600 @ 1920) — block height = photo only; tan panel matches via absolute inset. */
.vip-hero {
--vip-hero-copy-w: max(360px, 34%);
position: relative;
margin-top: 0;
margin-right: calc((100% - var(--vip-figma-content-width)) / 2);
margin-bottom: 0.85rem;
margin-left: calc((100% - var(--vip-figma-content-width)) / 2);
width: var(--vip-figma-content-width);
max-width: none;
border-radius: 8px;
overflow: hidden;
box-shadow: none;
}
.vip-hero__copy {
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
width: var(--vip-hero-copy-w);
background: var(--vip-figma-tan);
color: #fff;
padding: 24px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 0;
}
@media (max-width: 767px) {
.vip-hero {
display: flex;
flex-direction: column;
border-radius: 0;
box-shadow: none;
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 100%;
overflow: visible;
}
.vip-hero__copy {
position: static;
width: 100%;
max-width: none;
min-width: 0;
}
.vip-hero__visual {
margin-left: 0;
width: 100%;
}
.vip-category-strip__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.9rem;
padding: 0 0.5rem;
}
.vip-hero__photo {
height: 100%;
object-fit: cover;
}
}
.vip-hero__copy-body {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 auto;
min-height: auto;
width: 100%;
}
.vip-hero__brand-mark {
flex: 0 0 auto;
width: 96px;
height: auto;
margin: 0 0 0.75rem;
border-radius: 10px;
}
.vip-hero__display {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 52px;
line-height: 50px;
max-width: 430px;
text-wrap: balance;
}
.vip-hero__lead {
margin: 0.75rem 0 0;
max-width: 430px;
color: #fff;
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 21px;
font-weight: 400;
}
.vip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.72rem 1.35rem;
border-radius: 999px;
font-family: var(--vip-font-body);
font-weight: 700;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vip-hero__copy .vip-btn--outline {
flex: 0 0 auto;
margin-top: 0.75rem;
}
.vip-btn--outline {
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 0;
color: #fff;
background: transparent;
align-self: flex-start;
padding: 0 20px;
min-width: 268px;
min-height: 56px;
font-size: 18px;
letter-spacing: 0.01em;
}
.vip-btn--outline:hover,
.vip-btn--outline:focus {
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
color: #fff;
text-decoration: none;
}
/* In-flow column: only the ![]()
sets .vip-hero height (no grid max() with copy). */
.vip-hero__visual {
margin-left: var(--vip-hero-copy-w);
width: calc(100% - var(--vip-hero-copy-w));
line-height: 0;
}
/*
* Must come AFTER the desktop .vip-hero__visual rule above — an earlier
* max-width:767 block cannot win the cascade (same specificity, later wins).
*/
@media (max-width: 767px) {
.vip-hero__visual {
margin-left: 0;
width: 100%;
}
}
.vip-hero__visual-inner--photo {
padding: 0;
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
min-height: clamp(220px, 42vw, 600px);
overflow: hidden;
background: #ebe3dc;
}
.vip-hero__slider {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.vip-hero__slider-track {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.vip-hero__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
visibility: hidden;
pointer-events: none;
z-index: 0;
transform: translate3d(100%, 0, 0);
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.vip-hero__slide.is-active {
visibility: visible;
pointer-events: auto;
z-index: 1;
transform: translate3d(0, 0, 0);
}
.vip-hero__slide.is-entering-from-left,
.vip-hero__slide.is-entering-from-right,
.vip-hero__slide.is-exiting-to-left,
.vip-hero__slide.is-exiting-to-right {
visibility: visible;
}
.vip-hero__slide.is-entering-from-left {
z-index: 2;
transform: translate3d(-100%, 0, 0);
transition: none;
}
.vip-hero__slide.is-entering-from-right {
z-index: 2;
transform: translate3d(100%, 0, 0);
transition: none;
}
.vip-hero__slide.is-exiting-to-left {
transform: translate3d(-100%, 0, 0);
}
.vip-hero__slide.is-exiting-to-right {
transform: translate3d(100%, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
.vip-hero__slide {
transition: none;
}
}
.vip-hero__slide-link {
display: block;
width: 100%;
height: 100%;
}
.vip-hero__slider-nav {
position: absolute;
z-index: 2;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 82%);
box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.15s ease, opacity 0.15s ease;
}
.vip-hero__slider-nav--prev {
left: clamp(0.65rem, 2vw, 1.5rem);
}
.vip-hero__slider-nav--next {
right: clamp(0.65rem, 2vw, 1.5rem);
}
.vip-hero__slider-nav:hover,
.vip-hero__slider-nav:focus-visible {
background: #fff;
opacity: 0.85;
}
.vip-hero__slider-nav:focus-visible {
outline: 2px solid var(--vip-figma-brown);
outline-offset: 2px;
}
.vip-hero__slider-nav img {
display: block;
width: 32px;
height: 32px;
}
.vip-hero__photo {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
}
/* Category strip */
.vip-category-strip {
margin-top: 0;
margin-right: calc((100% - var(--vip-figma-content-width)) / 2);
margin-bottom: 2.25rem;
margin-left: calc((100% - var(--vip-figma-content-width)) / 2);
width: var(--vip-figma-content-width);
max-width: none;
}
@media (max-width: 767px) {
.vip-category-strip {
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 100%;
}
}
.vip-category-strip__title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.vip-category-strip__list {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: clamp(0.85rem, 2vw, 1.55rem);
overflow: visible;
padding: 0;
margin: 0;
list-style: none;
scrollbar-width: thin;
}
.vip-category-strip__hit {
display: block;
text-decoration: none;
color: inherit;
}
.vip-category-strip__hit:hover .vip-category-strip__thumb,
.vip-category-strip__hit:focus .vip-category-strip__thumb {
transform: translateY(-2px);
box-shadow: none;
}
.vip-category-strip__hit:hover .vip-category-strip__thumb img,
.vip-category-strip__hit:focus .vip-category-strip__thumb img {
/* Drop-shadow follows glyph alpha — avoids a white rectangular halo on PNG/WebP tiles. */
filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.22));
}
.vip-category-strip__thumb {
width: 100%;
aspect-ratio: 1;
height: auto;
border-radius: 10px;
margin: 0 auto 0.7rem;
background: transparent;
border: none;
display: block;
box-shadow: none;
transition: transform 0.15s ease;
overflow: visible;
}
/* Designer tiles — fill the thumb; no box-shadow (white fringe + shadow = visible border). */
.vip-category-strip__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: filter 0.15s ease;
}
.vip-category-strip__label {
display: block;
font-family: var(--vip-font-display);
font-size: 20px;
line-height: 22.5px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
color: var(--vip-figma-tan);
max-width: none;
margin: 0 auto;
}
/* Homepage — stacked marketing (HOME.jpg comp) ---------------------------- */
.vip-home-section-title {
text-align: center;
margin: 0 0 1.25rem;
font-family: var(--vip-font-display);
font-weight: 600;
font-size: clamp(1.45rem, 2.6vw, 1.95rem);
color: var(--vip-charcoal);
}
.vip-home-section-title--light {
color: #fff;
}
.vip-home-novedades {
/* Match the hero block's width contract exactly so the grid edges line up
* with the hero edges. No inner padding — the centering math handles the
* side gutters identically to `.vip-hero`. */
width: var(--vip-figma-content-width);
max-width: none;
margin-top: 0;
margin-right: calc((100% - var(--vip-figma-content-width)) / 2);
margin-bottom: 3rem;
margin-left: calc((100% - var(--vip-figma-content-width)) / 2);
padding-left: 0;
padding-right: 0;
}
.vip-home-novedades {
/* Generous breathing room around the Novedades block; top intentionally
* larger than bottom to separate it cleanly from the dense category strip
* above and keep the rhythm tighter on the way down. */
margin-top: clamp(3.5rem, 6vw, 5.5rem);
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
#vip-home-novedades {
box-sizing: border-box;
padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
border: 2px solid var(--vip-figma-tan);
border-radius: 16px;
}
@media (max-width: 767px) {
.vip-home-novedades {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
}
.vip-home-section-title--novedades {
margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
font-family: var(--vip-font-display);
font-weight: 700;
font-size: 54px;
line-height: 54px;
color: #7e614a;
}
.vip-home-novedades__grid,
.vip-home-novedades__carousel {
width: 100%;
}
.vip-home-novedades__footer {
display: flex;
justify-content: center;
margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.vip-home-novedades__all {
min-width: 220px;
text-align: center;
}
.vip-home-product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.25rem, 2.2vw, 2rem) clamp(0.85rem, 1.6vw, 1.35rem);
margin: 0;
padding: 0;
list-style: none;
}
.vip-home-product-grid__item {
min-width: 0;
}
.vip-product-card {
display: flex;
flex-direction: column;
gap: 0.85rem;
height: 100%;
}
.vip-product-card__media {
position: relative;
display: grid;
grid-template: 1fr / 1fr;
}
.vip-product-card__media > .vip-product-card__thumb {
grid-area: 1 / 1;
min-width: 0;
}
.vip-product-card__thumb {
display: block;
overflow: hidden;
border-radius: 14px;
aspect-ratio: 4 / 5;
background: #fff;
}
.vip-product-card__thumb picture,
.vip-product-card__thumb img {
display: block;
width: 100%;
height: 100%;
}
.vip-product-card__thumb img {
object-fit: cover;
}
.vip-product-card__thumb-stack {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.vip-product-card__thumb-layer {
display: block;
width: 100%;
height: 100%;
}
.vip-product-card__thumb-layer--primary,
.vip-product-card__thumb-layer--alt {
transition: opacity 0.42s ease;
}
.vip-product-card__thumb-layer--alt {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
}
.vip-product-card__thumb-layer picture,
.vip-product-card__thumb-layer img {
display: block;
width: 100%;
height: 100%;
}
.vip-product-card__thumb-layer img {
object-fit: cover;
object-position: center;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
.vip-product-card__thumb--has-alt:hover .vip-product-card__thumb-layer--primary,
.vip-product-card__thumb--has-alt:focus-visible .vip-product-card__thumb-layer--primary {
opacity: 0;
}
.vip-product-card__thumb--has-alt:hover .vip-product-card__thumb-layer--alt,
.vip-product-card__thumb--has-alt:focus-visible .vip-product-card__thumb-layer--alt {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.vip-product-card__thumb-layer--primary,
.vip-product-card__thumb-layer--alt,
.vip-product-card__thumb-layer img {
transition: none;
}
}
.vip-product-card__badge {
grid-area: 1 / 1;
align-self: start;
justify-self: start;
margin: 0.65rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.35rem;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: #e8ddd4;
color: #7e614a;
font-family: var(--vip-font-body);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
}
.vip-product-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.35rem 0.75rem;
}
/* Wishlist belongs only on the proper product page, never on listing cards. */
.vip-product-card .wishlist-button,
.vip-product-card .wishlist-button-add {
display: none !important;
}
.vip-product-card__cart {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.vip-product-card__cart {
grid-area: 1 / 1;
align-self: end;
justify-self: center;
z-index: 3;
display: flex;
align-items: center;
gap: 0.35rem;
max-width: calc(100% - 1.3rem);
margin: 0.65rem;
opacity: 0;
pointer-events: none;
transform: translateY(0.4rem);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.vip-product-card:hover .vip-product-card__cart,
.vip-product-card:focus-within .vip-product-card__cart {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
.vip-product-card__qty {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.15rem 0.2rem;
border: 1px solid var(--vip-figma-tan, #d5a17d);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0.2rem 0.65rem rgba(46, 35, 35, 0.18);
}
.vip-product-card__qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.vip-product-card__qty-btn:hover,
.vip-product-card__qty-btn:focus-visible {
background: rgba(213, 161, 125, 0.18);
color: var(--vip-figma-brown, #7e614a);
}
.vip-product-card__qty-input {
width: 1.9rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
text-align: center;
appearance: textfield;
}
.vip-product-card__qty-input:focus {
outline: 1px solid var(--vip-figma-tan, #d5a17d);
outline-offset: 0;
border-radius: 0.25rem;
}
.vip-product-card__qty-input::-webkit-inner-spin-button,
.vip-product-card__qty-input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
.vip-product-card__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 2.25rem;
margin: 0;
padding: 0.45rem 0.85rem;
border: 1px solid var(--vip-figma-tan, #d5a17d);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0.2rem 0.65rem rgba(46, 35, 35, 0.18);
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-body);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
text-transform: none;
white-space: nowrap;
cursor: pointer;
}
.vip-product-card__add:hover,
.vip-product-card__add:focus-visible {
border-color: var(--vip-figma-tan, #d5a17d);
background: var(--vip-figma-tan, #d5a17d);
color: #fff;
}
.vip-product-card__add:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.vip-product-card__stock-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
margin: 0;
padding: 0.45rem 0.85rem;
border: 1px solid rgba(135, 135, 135, 0.65);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0.2rem 0.65rem rgba(46, 35, 35, 0.18);
color: #878787;
font-family: var(--vip-font-body);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.vip-product-card__add-icon {
display: block;
width: 0.95rem;
height: 0.95rem;
flex: 0 0 0.95rem;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237E614A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.vip-product-card__add:hover .vip-product-card__add-icon,
.vip-product-card__add:focus-visible .vip-product-card__add-icon {
filter: brightness(0) invert(1);
}
.vip-product-card__copy {
grid-column: 1;
flex: 1 1 auto;
min-width: 0;
}
.vip-product-card__category {
margin: 0 0 0.2rem;
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.2;
font-style: italic;
font-weight: 400;
color: #d5a17d;
text-transform: capitalize;
}
.vip-product-card__name {
margin: 0;
font-family: var(--vip-font-body);
font-size: 16px;
line-height: 1.25;
font-weight: 700;
color: #7e614a;
}
.vip-product-card__name a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: 700;
color: #7e614a;
text-decoration: none;
}
.vip-product-card__name a:hover,
.vip-product-card__name a:focus-visible {
color: #7e614a;
text-decoration: underline;
text-underline-offset: 0.12em;
}
/* Product card names — Classic miniature + wishlist (Open Sans Bold 16px #7E614A). */
.product-miniature .product-title,
.product-miniature .product-title a,
.wishlist-product-title,
.pack-product-name a {
font-family: var(--vip-font-body);
font-size: 16px;
line-height: 1.25;
font-weight: 700;
color: #7e614a;
text-decoration: none;
}
.product-miniature .product-title a:hover,
.product-miniature .product-title a:focus-visible,
.wishlist-product-title:hover,
.pack-product-name a:hover,
.pack-product-name a:focus-visible {
color: #7e614a;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.vip-product-card__pricing {
grid-column: 2;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
text-align: right;
white-space: nowrap;
}
.vip-product-card__price {
font-family: var(--vip-font-body);
font-size: 20px;
line-height: 1.25;
font-weight: 800;
color: #7e614a;
}
.vip-product-card__price .price,
.vip-product-card__price .product-price,
.vip-product-card__price span,
.vip-product-card__price * {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}
/* Product card prices — Classic miniature, wishlist, pack (Open Sans ExtraBold 20px #7E614A). */
.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping .product-price,
.product-miniature .product-price,
body#module-blockwishlist-view .wishlist-product-price,
body.page-customer-account .vip-wishlist .wishlist-product-price,
.wishlist-product-price,
.pack-product-price strong {
font-family: var(--vip-font-body);
font-size: 20px;
line-height: 1.25;
font-weight: 800;
color: #7e614a;
}
.product-miniature .product-price-and-shipping .price *,
.product-miniature .product-price-and-shipping .product-price * {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}
.vip-product-card__regular {
font-family: var(--vip-font-body);
font-size: 0.72rem;
line-height: 1.2;
font-weight: 400;
color: #b8937a;
text-decoration: line-through;
}
@media (max-width: 1199px) {
.vip-home-product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.vip-home-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.vip-home-product-grid {
gap: 1rem 0.75rem;
}
.vip-product-card__body {
flex-direction: column;
gap: 0.35rem;
}
.vip-product-card__pricing {
align-items: flex-start;
text-align: left;
}
}
.vip-home-texture-soft {
background: linear-gradient(145deg, #f7f4ef 0%, #f3e3d8 55%, #e8cfa8 120%);
}
.vip-home-curated__inner {
padding: clamp(2rem, 5vw, 3rem);
border-radius: 18px;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.06);
}
.vip-home-curated {
/* Same width contract as the hero block (see `.vip-hero`) so the visible
* card edges align with the Novedades / category strip edges above. */
width: var(--vip-home-feature-width);
max-width: none;
margin-top: 0;
margin-right: calc((100% - var(--vip-home-feature-width)) / 2);
margin-bottom: 3rem;
margin-left: calc((100% - var(--vip-home-feature-width)) / 2);
}
/* Featured brands ("Mejores marcas") title sits on cream above the design band.
* `.vip-home-brands-band` is the Figma gradient + texture (brands grid only).
* `.vip-home-band` wraps the 6 category tiles only; Lo más vendido sits on cream above it. */
.vip-home-section-title--brands {
width: var(--vip-figma-content-width);
max-width: none;
margin-top: clamp(2.5rem, 5vw, 4rem);
margin-right: calc((100% - var(--vip-figma-content-width)) / 2);
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
margin-left: calc((100% - var(--vip-figma-content-width)) / 2);
font-family: var(--vip-font-display);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.12;
color: #7e614a;
text-align: center;
text-wrap: balance;
}
/* Featured brands — full-bleed Figma export (`assets/img/home/brands-section-bg.svg`). */
.vip-home-brands-band {
position: relative;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: 0;
padding: clamp(2rem, 5vw, 3.5rem) 0;
overflow: hidden;
background-color: var(--vip-header-tan);
background-image: url("../img/home/brands-section-bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
.vip-home-brands-band__inner {
width: var(--vip-figma-content-width);
max-width: none;
margin-left: auto;
margin-right: auto;
}
.vip-home-brands-band .vip-home-brands {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
/* Continuous tan band — Lo más vendido + category tiles (`designs/HOME.jpg`).
* Same Figma topographic background as Mejores marcas — not TRAMAMISTICA sparkles. */
.vip-home-band {
position: relative;
margin-bottom: 0;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: clamp(2rem, 5vw, 3.5rem) 0;
overflow: hidden;
background-color: #d8a780;
background-image: url("../img/home/brands-section-bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
.vip-home-band__inner {
width: var(--vip-figma-content-width);
max-width: none;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
/* Sections inside the band drop the hero-contract sizing they get elsewhere — the
* `.vip-home-band__inner` already constrains width and gap handles spacing. */
.vip-home-band > .vip-home-band__inner > section {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
/* Mejores marcas — HOME.jpg mosaic: 3-col grid, wide≈890×302 / narrow≈437×302 (same as Group 14). */
.vip-home-brands__grid {
container-type: inline-size;
container-name: vip-brands;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: var(--vip-figma-card-h);
gap: 30px;
align-items: stretch;
}
/* Wide + narrow tiles share a row: same height, different width (matches `designs/HOME.jpg`).
* Per-tile `aspect-ratio` would make 2-column tiles ~2× taller than 1-column neighbours. */
@media (min-width: 992px) {
.vip-home-brands__grid .vip-brand-tile {
aspect-ratio: unset;
width: 100%;
height: 100%;
min-height: 100%;
}
}
/* Lo más vendido — full-bleed #fff band (HOME.jpg), square bordered block, not cream. */
.vip-home-bestsellers {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: clamp(2.5rem, 5vw, 4rem) 0;
background: #fff;
}
.vip-home-bestsellers__panel {
--vip-best-ink: #7e614a;
--vip-best-category: #d5a17d;
--vip-best-muted: #d5a17d;
--vip-best-strike: #d5a17d;
width: var(--vip-figma-content-width);
max-width: none;
margin: 0 auto;
padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
background: #fff;
border: 2px solid var(--vip-best-muted);
border-radius: 16px;
}
@media (max-width: 767px) {
.vip-home-bestsellers__panel {
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
}
/* Featured products must only render inside home-marketing (not displayHome tail). */
#vip-home-products [data-vip-bestsellers-carousel],
#vip-home-products [data-vip-product-carousel] {
display: none !important;
}
/* HOME.jpg — Lo más vendido heading: Earlgo display, brown (comp). */
.vip-home-bestsellers h2.vip-home-section-title--bestsellers,
.vip-home-bestsellers__panel .vip-home-section-title {
margin: 0 0 2rem;
font-family: var(--vip-font-display);
font-weight: 400;
font-size: 32px;
line-height: 1.1;
letter-spacing: 0.02em;
color: #7e614a;
text-align: center;
text-wrap: balance;
}
/* Carousel layout: left arrow — scrolling viewport — right arrow */
.vip-bestsellers-carousel {
--vip-bestsellers-gap: clamp(0.85rem, 1.6vw, 1.35rem);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1.25rem, 2.75vw, 2.25rem);
margin: 0;
}
.vip-bestsellers-carousel__viewport {
container-type: inline-size;
container-name: vip-bestsellers;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.vip-bestsellers-carousel__viewport::-webkit-scrollbar {
display: none;
}
.vip-bestsellers-carousel__viewport > .vip-bestsellers-carousel__list {
display: flex;
gap: var(--vip-bestsellers-gap);
margin: 0;
padding: 0;
width: max-content;
min-width: 100%;
list-style: none;
}
/* % flex-basis against `min-width: max-content` was sizing cards to ~½ the
* scroll track — use the viewport container width (4 / 2 / 1 visible). */
.vip-bestsellers-carousel__item {
flex: 0 0 calc((100cqi - 3 * var(--vip-bestsellers-gap)) / 4);
width: calc((100cqi - 3 * var(--vip-bestsellers-gap)) / 4);
min-width: 0;
scroll-snap-align: start;
}
.vip-bestsellers-carousel__item .vip-product-card {
width: 100%;
height: 100%;
gap: 0.5rem;
}
/* Novedades — 2 rows × 4 columns visible; scroll advances one column (2 products). */
.vip-bestsellers-carousel--rows-2 .vip-bestsellers-carousel__viewport > .vip-bestsellers-carousel__list {
display: grid;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
grid-auto-columns: calc((100cqi - 3 * var(--vip-bestsellers-gap)) / 4);
align-items: stretch;
width: max-content;
min-width: 100%;
column-gap: var(--vip-bestsellers-gap);
row-gap: var(--vip-bestsellers-gap);
}
.vip-bestsellers-carousel--rows-2 .vip-bestsellers-carousel__item {
flex: unset;
width: auto;
min-width: 0;
height: 100%;
}
/* Lo más vendido cards — layout: category, then [name ··· price] (HOME.jpg). */
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__thumb {
aspect-ratio: 1 / 1;
border-radius: 16px;
background: #fff;
}
.vip-home-bestsellers--primary .vip-product-card__thumb {
border-radius: 16px;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__thumb img {
object-fit: contain;
padding: 0.25rem;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__body {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.15rem;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__row--detail {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.35rem 0.5rem;
width: 100%;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__copy {
grid-column: 1;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__category {
margin: 0 0 0.2rem;
line-height: 1.15;
letter-spacing: 0.01em;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__name {
margin: 0;
font-size: 16px;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__name a {
color: var(--vip-best-ink, #7e614a);
font-weight: 700;
text-decoration: none;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__name a:hover,
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__name a:focus-visible {
color: var(--vip-best-ink, #7e614a);
text-decoration: underline;
text-underline-offset: 0.12em;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__pricing {
grid-column: 2;
flex: 0 0 auto;
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
gap: 0.1rem;
margin: 0;
padding: 0;
text-align: right;
white-space: nowrap;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__price {
font-size: 20px;
font-weight: 800;
color: #7e614a;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__price .price,
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__price .product-price,
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__price span,
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__price * {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__row--detail:not(:has(.vip-product-card__category)) .vip-product-card__pricing {
padding-top: 0;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__regular {
font-family: var(--vip-font-body);
font-size: 11px;
line-height: 1.15;
font-weight: 400;
font-style: italic;
color: var(--vip-best-category, #d5a17d);
text-decoration: line-through;
}
.vip-bestsellers-carousel .vip-product-card--bestsellers .vip-product-card__badge--sale {
top: 0;
left: 0;
}
.vip-bestsellers-carousel .js-product.product,
.vip-bestsellers-carousel .product-miniature {
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
/* Design export: 40×40 arrow SVG files (carousel-arrow-*.svg). Bootstrap squishes inline
* SVG via max-width:100% in narrow grid tracks — use ![]()
+ fixed 40px box. */
.vip-bestsellers-carousel__nav {
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: opacity 0.15s ease;
}
.vip-bestsellers-carousel__nav:hover:not(:disabled),
.vip-bestsellers-carousel__nav:focus:not(:disabled),
.vip-bestsellers-carousel__nav:focus-visible:not(:disabled),
.vip-bestsellers-carousel__nav:active:not(:disabled) {
background: transparent;
opacity: 0.75;
outline: none !important;
box-shadow: none !important;
}
.vip-bestsellers-carousel__nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.vip-bestsellers-carousel__arrow {
display: block;
width: 40px !important;
height: 40px !important;
min-width: 40px;
min-height: 40px;
max-width: none !important;
flex-shrink: 0;
object-fit: contain;
}
@container vip-bestsellers (max-width: 575px) {
.vip-bestsellers-carousel__item {
flex-basis: 100cqi;
width: 100cqi;
}
.vip-bestsellers-carousel--rows-2 .vip-bestsellers-carousel__viewport > .vip-bestsellers-carousel__list {
grid-auto-columns: 100cqi;
}
}
/* Category tiles sit directly on the tan band in the comp — no cream card wrapper. */
.vip-home-band .vip-home-curated--alt {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.vip-home-band .vip-home-curated--alt .vip-home-curated__inner {
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.vip-brand-tile {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
color: #fff;
text-decoration: none;
background: #2a221b;
isolation: isolate;
transition: box-shadow 0.2s ease;
}
.vip-brand-tile:hover,
.vip-brand-tile:focus-visible {
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}
.vip-brand-tile--wide { grid-column: span 2; }
.vip-brand-tile--narrow { grid-column: span 1; }
.vip-brand-tile__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-brand-tile:hover .vip-brand-tile__bg,
.vip-brand-tile:focus-visible .vip-brand-tile__bg {
transform: scale(1.04);
}
.vip-brand-tile__shade {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(120deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.42) 50%,
rgba(0, 0, 0, 0.15) 100%);
}
.vip-brand-tile__body {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
box-sizing: border-box;
padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1.25rem, 2.2vw, 1.85rem) clamp(1.25rem, 2.2vw, 1.85rem);
color: #fff;
text-decoration: none;
}
/* Figma text style H2 — 25 / 25, ExtraBold (800), white (brand name on card). */
.vip-brand-tile .vip-brand-tile__name {
margin: auto 0 0;
font-family: var(--vip-font-body);
font-weight: 800;
font-size: var(--vip-figma-h2-size);
line-height: var(--vip-figma-h2-lh);
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
}
/* Figma text style PARRAFO — 15 / 22.5, Regular (400), white solid (card body copy). */
.vip-brand-tile .vip-brand-tile__desc {
margin: 0;
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
color: #fff;
opacity: 1;
text-align: left;
text-wrap: pretty;
}
/* Figma Component 3 — 124×38, label 15/22.5 white on tan. */
.vip-brand-tile .vip-btn--pill-peach {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
flex-shrink: 0;
min-width: 124px;
min-height: 38px;
margin-top: 0.5rem;
padding: 0.45rem 1.65rem;
border-radius: 999px;
border: none;
background: #d5a17d;
color: #fff;
font-family: var(--vip-font-body);
font-weight: 400;
font-size: 15px;
line-height: 22.5px;
letter-spacing: 0;
text-decoration: none;
box-shadow: none;
transition: background 0.15s ease;
}
.vip-brand-tile .vip-btn--pill-peach::after {
content: ">";
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.vip-brand-tile:hover .vip-btn--pill-peach,
.vip-brand-tile:focus-visible .vip-btn--pill-peach {
background: #c8926a;
color: #fff;
}
@media (max-width: 991px) {
.vip-home-brands__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(12.5rem, 42cqi);
}
.vip-brand-tile--wide,
.vip-brand-tile--narrow {
grid-column: span 1;
}
.vip-home-brands__grid .vip-brand-tile {
aspect-ratio: unset;
width: 100%;
height: 100%;
min-height: 100%;
}
}
@media (max-width: 575px) {
.vip-home-brands__grid {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(13rem, 52cqi);
}
}
@media (max-width: 767px) {
.vip-home-section-title--brands {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
.vip-home-brands-band__inner,
.vip-home-band__inner {
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
}
@media (max-width: 767px) {
.vip-home-curated {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
}
.vip-curated-grid {
display: grid;
gap: clamp(0.55rem, 1.8vw, 0.95rem);
grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 992px) {
.vip-curated-grid:not(.vip-curated-grid--cats) .vip-curated-tile:nth-child(1),
.vip-curated-grid:not(.vip-curated-grid--cats) .vip-curated-tile:nth-child(2) {
grid-column: span 6;
}
.vip-curated-grid:not(.vip-curated-grid--cats) .vip-curated-tile:nth-child(n + 3) {
grid-column: span 4;
}
}
@media (max-width: 991px) {
.vip-curated-grid:not(.vip-curated-grid--cats) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vip-curated-grid:not(.vip-curated-grid--cats) .vip-curated-tile {
grid-column: span 3;
min-height: 180px;
}
}
@media (max-width: 575px) {
.vip-curated-grid:not(.vip-curated-grid--cats) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vip-curated-grid:not(.vip-curated-grid--cats) .vip-curated-tile {
grid-column: span 1;
}
}
/* Category band — Figma HOME Group 14 (file sXGo3dsS4r8lfnFBOjCyRJ).
* Cards: wide 890×302, narrow 437×302, gap 30px, radius 12px @ 1920px frame. */
.vip-curated-grid--cats {
container-type: inline-size;
container-name: vip-home-cats;
--vip-cats-gap: 30px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: var(--vip-cats-gap);
width: 100%;
max-width: 100%;
margin-inline: auto;
}
@media (min-width: 992px) {
.vip-curated-grid--cats {
grid-template-rows: repeat(3, var(--vip-figma-card-h));
}
.vip-curated-grid--cats .vip-curated-tile--wide {
grid-column: span 2;
}
.vip-curated-grid--cats .vip-curated-tile--narrow {
grid-column: span 1;
}
.vip-curated-grid--cats .vip-curated-tile--cat {
aspect-ratio: unset;
width: 100%;
height: 100%;
min-height: 100%;
}
}
@media (max-width: 991px) {
.vip-curated-grid--cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(6, minmax(12.5rem, 42cqi));
}
.vip-curated-grid--cats .vip-curated-tile--wide,
.vip-curated-grid--cats .vip-curated-tile--narrow {
grid-column: span 1 !important;
}
}
@media (max-width: 575px) {
.vip-curated-grid--cats {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(6, minmax(13rem, 52cqi));
}
}
.vip-curated-tile--cat {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
border-radius: 12px;
box-shadow: none;
isolation: isolate;
}
.vip-curated-tile__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-curated-tile--cat:hover .vip-curated-tile__bg,
.vip-curated-tile--cat:focus-visible .vip-curated-tile__bg {
transform: scale(1.045);
}
.vip-curated-tile--cat .vip-curated-tile__shade {
z-index: 2;
background: linear-gradient(
118deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.42) 42%,
rgba(0, 0, 0, 0.12) 100%
);
}
.vip-curated-tile--cat .vip-curated-tile__bg {
z-index: 1;
}
/* Figma Group 14 — copy anchored to card bottom (insets via padding). */
.vip-home-band .vip-curated-tile--cat .vip-curated-tile__body {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(0.5rem, 1.1cqi, 0.65rem);
height: 100%;
box-sizing: border-box;
padding: clamp(1rem, 2.3cqi, 1.9375rem) clamp(1rem, 2.3cqi, 1.9375rem) clamp(1rem, 2.7cqi, 2.3125rem)
clamp(1rem, 2.3cqi, 1.9375rem);
text-decoration: none;
}
.vip-home-band .vip-curated-tile--cat .vip-curated-tile__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(0.35rem, 0.75cqi, 0.65rem);
width: 100%;
max-width: 71.5%;
margin-top: auto;
}
.vip-home-band .vip-curated-tile--cat.vip-curated-tile--narrow .vip-curated-tile__content {
max-width: 85%;
}
/* Figma — Earlgo 37 / 36, extrabold (800). */
.vip-home-band .vip-curated-tile--cat .vip-curated-tile__title {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 37px;
line-height: 36px;
letter-spacing: 0;
color: #fff;
text-transform: none;
}
/* Figma PARRAFO — Fira Sans 15 / 22.5 on photo overlay cards (Group 14 bento). */
.vip-home-band .vip-curated-tile--cat .vip-curated-tile__desc {
margin: 0;
max-width: none;
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
color: #fff;
text-align: left;
text-wrap: pretty;
}
/* Figma Component 3 — 124×38, fill #d5a17d, label 15/22.5 white. */
.vip-home-band .vip-curated-tile--cat .vip-btn--explore-tan {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
flex-shrink: 0;
min-width: 124px;
min-height: 38px;
margin-top: clamp(0.15rem, 0.5cqi, 0.35rem);
padding: 0.45rem 1.65rem;
border: none;
border-radius: 999px;
background: #d5a17d;
color: #fff;
font-family: var(--vip-font-body);
font-weight: 400;
font-size: 15px;
line-height: 22.5px;
letter-spacing: 0;
text-decoration: none;
box-shadow: none;
transition: background 0.15s ease;
}
.vip-home-band .vip-curated-tile--cat .vip-btn--explore-tan::after {
content: ">";
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.vip-home-band .vip-curated-tile--cat:hover .vip-btn--explore-tan,
.vip-home-band .vip-curated-tile--cat:focus-visible .vip-btn--explore-tan {
background: #c8926a;
color: #fff;
}
.vip-curated-tile {
position: relative;
overflow: hidden;
border-radius: 14px;
min-height: 220px;
display: block;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
color: #fff;
text-decoration: none;
}
.vip-home-band .vip-curated-tile--cat {
min-height: 0;
box-shadow: none;
}
.vip-curated-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-curated-tile:hover img,
.vip-curated-tile:focus-visible img {
transform: scale(1.045);
}
.vip-curated-tile__shade {
pointer-events: none;
position: absolute;
inset: 0;
background: linear-gradient(165deg, rgba(20, 20, 20, 0.15) 0%, rgba(20, 20, 20, 0.55) 100%);
}
.vip-curated-tile__body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 0.75rem;
padding: clamp(1.1rem, 3vw, 1.6rem);
text-decoration: none;
}
.vip-curated-tile__title {
color: #fff;
font-family: var(--vip-font-display);
font-weight: 600;
font-size: clamp(1rem, 2.2vw, 1.2rem);
line-height: 1.2;
}
.vip-btn--pill-light {
border-radius: 999px;
padding: 0.45rem 1rem;
font-size: 0.82rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.94);
color: var(--vip-terra-dark);
border: none;
text-decoration: none;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.vip-btn--terra-solid {
border-radius: 999px;
padding: 0.55rem 1.35rem;
font-weight: 700;
background: var(--vip-terra);
color: #fff;
border: 2px solid var(--vip-terra);
text-decoration: none;
}
.vip-btn--terra-solid:hover {
filter: brightness(1.06);
color: #fff;
text-decoration: none;
}
/* ==========================================================================
Figma HOME Group 10 — “Descubre el universo” (pixel spec @ 1920)
Outer panel matches the canonical homepage content width.
========================================================================== */
.vip-home-brand {
width: var(--vip-figma-content-width);
max-width: none;
margin-left: calc((100% - var(--vip-figma-content-width)) / 2);
margin-right: calc((100% - var(--vip-figma-content-width)) / 2);
margin-bottom: clamp(48px, 4.7vw, var(--vip-home-brand-cta-gap));
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.vip-home-brand__card {
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
background: #fff;
border: var(--vip-home-brand-panel-stroke) solid var(--vip-figma-tan);
border-radius: 12px;
padding: 50px clamp(32px, 4vw, 64px);
box-shadow: none;
box-sizing: border-box;
}
.vip-home-brand__inner {
width: var(--vip-home-brand-inner-w);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.vip-home-brand__intro {
margin: 0 auto;
max-width: 1003px;
text-align: center;
}
.vip-home-brand__logo-mark {
display: block;
width: 144px;
height: 144px;
margin: 0 auto 43px;
object-fit: contain;
}
.vip-home-brand__title {
margin: 0 auto 23px;
max-width: 429px;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 48px;
line-height: 45px;
letter-spacing: 0;
color: var(--vip-figma-brown);
text-wrap: balance;
white-space: pre-line;
}
.vip-home-brand__lead {
margin: 0 auto 107px;
max-width: 1003px;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
letter-spacing: 0;
color: var(--vip-figma-brown);
text-align: center;
text-wrap: pretty;
}
/* Editorial rows — no `.vip-zigzag` (global flex would break flip rows). */
.vip-home-brand__row {
display: grid;
grid-template-columns: minmax(0, 1.12fr) clamp(40px, 5vw, 72px) minmax(0, 1fr);
align-items: start;
width: var(--vip-home-brand-inner-w);
max-width: 100%;
margin: 0;
}
.vip-home-brand__row--media-end {
grid-template-columns: minmax(0, 1fr) clamp(40px, 5vw, 72px) minmax(0, 1.12fr);
}
.vip-home-brand__media {
grid-column: 1;
grid-row: 1;
align-self: start;
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 12px;
}
.vip-home-brand__row--media-end .vip-home-brand__media {
grid-column: 3;
}
/* Match the 450px image height while keeping title/body/CTA in one compact,
* vertically centred stack; fixed row variables own the internal spacing. */
.vip-home-brand__copy {
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--vip-home-brand-img-h);
grid-column: 3;
grid-row: 1;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.vip-home-brand__row--media-end .vip-home-brand__copy {
grid-column: 1;
width: 100%;
padding-left: 51px;
}
.vip-home-brand__row--1 {
--vip-brand-title-gap: 34px;
--vip-brand-body-gap: 38px;
margin-bottom: 96px;
}
.vip-home-brand__row--2 {
--vip-brand-title-gap: 34px;
--vip-brand-body-gap: 38px;
margin-bottom: 137px;
}
.vip-home-brand__row--3 {
--vip-brand-title-gap: 34px;
--vip-brand-body-gap: 38px;
margin-bottom: 83px;
}
.vip-home-brand__row--4 {
--vip-brand-title-gap: 34px;
--vip-brand-body-gap: 38px;
margin-bottom: 108px;
}
.vip-home-brand__row--5 {
--vip-brand-title-gap: 34px;
--vip-brand-body-gap: 38px;
margin-bottom: 0;
}
.vip-home-brand__media img {
display: block;
width: 100%;
max-width: 100%;
height: 450px;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-home-brand__media:hover img,
.vip-home-brand__media:focus-within img {
transform: scale(1.045);
}
.vip-home-brand__heading {
margin: 0 0 var(--vip-brand-title-gap, 20px);
max-width: var(--vip-home-brand-copy-w);
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 45px;
line-height: 45px;
letter-spacing: 0;
color: var(--vip-figma-tan);
text-wrap: balance;
}
.vip-home-brand__row--5 .vip-home-brand__heading {
max-width: 572px;
}
.vip-home-brand__copy p {
margin: 0 0 var(--vip-brand-body-gap, 18px);
max-width: var(--vip-home-brand-copy-w);
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
letter-spacing: 0;
color: var(--vip-figma-brown);
text-wrap: pretty;
}
/* Figma Component 3 — 124×53, “Explorar >” */
.vip-home-brand__cta {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 124px;
height: 53px;
padding: 0;
border: none;
border-radius: 999px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-weight: 400;
font-size: 15px;
line-height: 22.5px;
letter-spacing: 0;
text-decoration: none;
}
.vip-home-brand__cta::after {
content: " >";
margin-left: 2px;
}
.vip-home-brand__cta:hover,
.vip-home-brand__cta:focus-visible {
background: #c8926a;
color: #fff;
}
@media (max-width: 1199px) {
.vip-home-brand__card {
width: 100%;
max-width: min(var(--vip-home-brand-panel-w), 100%);
padding: clamp(32px, 4vw, 50px) clamp(20px, 5vw, 161px) clamp(40px, 5vw, 50px) clamp(20px, 5vw, 156px);
}
.vip-home-brand__inner,
.vip-home-brand__row {
width: 100%;
}
.vip-home-brand__row {
grid-template-columns: minmax(0, 700fr) minmax(0, 101fr) minmax(0, 572fr);
}
.vip-home-brand__row--media-end {
grid-template-columns: minmax(0, 559fr) minmax(0, 91fr) minmax(0, 700fr) minmax(0, 23fr);
}
.vip-home-brand__row--media-end .vip-home-brand__copy {
width: auto;
padding-left: clamp(0px, 4vw, 51px);
}
.vip-home-brand__media img {
width: 100%;
height: auto;
aspect-ratio: 700 / 450;
}
}
@media (max-width: 991px) {
.vip-home-brand {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
.vip-home-brand__card {
width: 100%;
border-radius: 12px;
}
.vip-home-brand__row,
.vip-home-brand__row--media-end {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vip-home-brand__row--media-end .vip-home-brand__media {
order: 1;
}
.vip-home-brand__row--media-end .vip-home-brand__copy {
order: 2;
padding-left: 0;
width: 100%;
}
.vip-home-brand__media,
.vip-home-brand__copy {
width: 100%;
max-width: none;
}
.vip-home-brand__copy {
display: block;
min-height: 0;
justify-content: flex-start;
}
.vip-home-brand__row--1,
.vip-home-brand__row--2,
.vip-home-brand__row--3,
.vip-home-brand__row--4 {
margin-bottom: 4rem;
}
.vip-home-brand__title {
max-width: none;
font-size: clamp(32px, 6vw, 48px);
}
.vip-home-brand__heading {
font-size: clamp(28px, 5vw, 45px);
margin-bottom: 1rem;
}
.vip-home-brand__copy p {
margin-bottom: 1.25rem;
}
}
/* Generic zigzag (magic section, etc.) — flex fallback. */
.vip-zigzag {
display: flex;
flex-wrap: wrap;
gap: clamp(1.15rem, 2.4vw, 2rem);
align-items: center;
justify-content: space-between;
margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem);
}
.vip-zigzag--flip {
flex-direction: row-reverse;
}
.vip-zigzag__visual,
.vip-zigzag__copy {
flex: 1 1 280px;
min-width: 0;
}
.vip-zigzag__visual img {
border-radius: 14px;
width: 100%;
height: auto;
display: block;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
}
.vip-zigzag__copy h3 {
margin: 0 0 0.5rem;
font-family: var(--vip-font-display);
font-size: clamp(1.25rem, 2.6vw, 1.65rem);
}
.vip-zigzag__copy p {
margin: 0 0 1rem;
color: var(--vip-muted);
}
/* ==========================================================================
Figma HOME Group 15 — “Importación con alma” (1690×666 @ 1920, parallax)
========================================================================== */
.vip-home-cta {
position: relative;
margin: 0 calc(50% - 50vw) clamp(48px, 4.7vw, var(--vip-home-brand-cta-gap));
/* Do not set width: 100vw — with a vertical scrollbar that overflows the page. */
width: auto;
max-width: none;
height: clamp(360px, 34.7vw, var(--vip-home-cta-panel-h));
min-height: clamp(360px, 34.7vw, var(--vip-home-cta-panel-h));
overflow: hidden;
border-radius: 0;
box-sizing: border-box;
}
.vip-home-cta__parallax {
position: absolute;
left: 0;
right: 0;
top: -35%;
height: 170%;
z-index: 0;
overflow: hidden;
transform: translate3d(0, 0, 0);
will-change: transform;
}
/* Fill parallax layer edge-to-edge (no cream gaps under the scrim). */
.vip-home-cta__bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
transform: scale(1.14);
transform-origin: center center;
}
.vip-home-cta__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: var(--vip-home-cta-scrim);
pointer-events: none;
}
/* Full banner box — grid centres the logo+text block with equal space above/below. */
.vip-home-cta__inner {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
box-sizing: border-box;
padding-inline: clamp(1.25rem, 6vw, var(--vip-home-cta-pad-x));
color: #fff;
}
.vip-home-cta__content {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: clamp(1.25rem, 3.75vw, var(--vip-home-cta-logo-gap));
box-sizing: border-box;
width: min(var(--vip-home-cta-panel-w), 100%);
max-width: 100%;
margin: 0;
text-align: left;
}
/* Figma 89:1642 — white tile + mark baked into SVG (201×200). */
.vip-home-cta__mark {
flex: 0 0 auto;
display: block;
width: clamp(100px, 10.4vw, var(--vip-home-cta-logo-w));
height: auto;
}
.vip-home-cta__tagline {
display: flex;
flex-direction: column;
gap: 0.12em;
flex: 0 1 auto;
margin: 0;
width: max-content;
max-width: min(1180px, calc(100% - var(--vip-home-cta-logo-w) - var(--vip-home-cta-logo-gap)));
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(1.75rem, 2.8125vw, 54px);
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #fff;
}
.vip-home-cta__line {
display: block;
}
@media (min-width: 768px) {
.vip-home-cta__line {
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.vip-home-cta__parallax {
top: 0;
height: 100%;
transform: none;
will-change: auto;
}
.vip-home-cta__bg {
transform: none;
object-position: center center;
}
}
@media (max-width: 575px) {
.vip-home-cta__content {
flex-direction: column;
text-align: center;
gap: 1.25rem;
}
.vip-home-cta__mark {
width: clamp(88px, 22vw, 160px);
}
.vip-home-cta__tagline {
width: auto;
max-width: 100%;
}
}
/* ==========================================================================
Figma HOME Group 16 — “El rincón de la magia” (designs/HOME.jpg @ 1920)
Full-bleed dark + TRAMAMISTICA · content column = --vip-figma-content-width
(same as `.vip-home-band` category tiles above)
========================================================================== */
.vip-home-magic {
position: relative;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
/* Content inset only — starry surface remains full viewport width. */
padding-left: max(var(--vip-shell-gutter), calc(50vw - var(--vip-home-magic-panel-w) / 2));
padding-right: max(var(--vip-shell-gutter), calc(50vw - var(--vip-home-magic-panel-w) / 2));
padding-top: 50.4px;
padding-bottom: 135px;
box-sizing: border-box;
background-color: var(--vip-home-magic-surface);
overflow: hidden;
}
.vip-home-magic::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../img/textures/TRAMAMISTICA.webp");
background-repeat: repeat;
background-size: var(--vip-home-magic-stars-tile);
opacity: var(--vip-home-magic-stars-opacity);
filter: blur(var(--vip-home-magic-stars-blur));
pointer-events: none;
}
.vip-home-magic__shell {
position: relative;
z-index: 1;
width: var(--vip-home-magic-panel-w);
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
border-radius: 0;
overflow: visible;
background-color: transparent;
padding: 0;
}
.vip-home-magic__shell::before {
content: none;
}
@media (prefers-reduced-motion: reduce) {
.vip-home-magic::before {
filter: none;
}
}
.vip-home-magic__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.vip-home-magic__intro {
margin: 0 auto;
max-width: none;
text-align: center;
}
.vip-home-magic__logo-tile {
width: 144px;
height: 144px;
margin: 0 auto 43px;
border-radius: 18px;
overflow: hidden;
flex-shrink: 0;
}
.vip-home-magic__logo-mark {
display: block;
width: 144px;
height: 144px;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
object-fit: cover;
object-position: center;
}
.vip-home-magic__title {
margin: 0 auto 23px;
max-width: 429px;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 48px;
line-height: 45px;
letter-spacing: 0;
color: #fff;
text-wrap: balance;
}
.vip-home-magic__lead {
margin: 0 auto 107px;
max-width: none;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
letter-spacing: 0;
color: #fff;
text-align: center;
text-wrap: pretty;
}
.vip-home-magic__row {
display: grid;
/* Fluid columns so editorial rows share the same 1240 content column as the
* category tiles in `.vip-home-band` (fixed 700/572px overflowed that width). */
grid-template-columns: minmax(0, 700fr) minmax(0, 101fr) minmax(0, 572fr);
align-items: center;
width: 100%;
max-width: 100%;
margin: 0;
}
.vip-home-magic__row--media-end {
grid-template-columns: minmax(0, 559fr) minmax(0, 91fr) minmax(0, 700fr) minmax(0, 23fr);
}
.vip-home-magic__media {
grid-column: 1;
grid-row: 1;
align-self: center;
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 12px;
}
.vip-home-magic__row--media-end .vip-home-magic__media {
grid-column: 3;
}
.vip-home-magic__copy {
display: flex;
flex-direction: column;
justify-content: center;
align-self: stretch;
min-height: 100%;
grid-column: 3;
grid-row: 1;
width: auto;
max-width: 100%;
box-sizing: border-box;
}
.vip-home-magic__row--media-end .vip-home-magic__copy {
grid-column: 1;
width: auto;
padding-left: clamp(0px, 4vw, 51px);
}
.vip-home-magic__row--1 {
--vip-magic-title-gap: 42px;
--vip-magic-body-gap: 46px;
margin-bottom: 96px;
}
.vip-home-magic__row--2 {
--vip-magic-title-gap: 42px;
--vip-magic-body-gap: 46px;
margin-bottom: 137px;
}
.vip-home-magic__row--3 {
--vip-magic-title-gap: 42px;
--vip-magic-body-gap: 46px;
margin-bottom: 83px;
}
.vip-home-magic__row--4 {
--vip-magic-title-gap: 42px;
--vip-magic-body-gap: 46px;
margin-bottom: 108px;
}
.vip-home-magic__row--5 {
--vip-magic-title-gap: 42px;
--vip-magic-body-gap: 46px;
margin-bottom: 0;
}
.vip-home-magic__media img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 700 / 450;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-home-magic__media:hover img,
.vip-home-magic__media:focus-within img {
transform: scale(1.045);
}
.vip-home-magic__heading {
margin: 0 0 var(--vip-magic-title-gap, 20px);
max-width: var(--vip-home-brand-copy-w);
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 45px;
line-height: 45px;
letter-spacing: 0;
color: #fff;
text-wrap: balance;
}
.vip-home-magic__row--5 .vip-home-magic__heading {
max-width: 572px;
}
.vip-home-magic__copy p {
margin: 0 0 var(--vip-magic-body-gap, 18px);
max-width: var(--vip-home-brand-copy-w);
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
letter-spacing: 0;
color: #fff;
text-wrap: pretty;
}
.vip-home-magic__cta {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 124px;
height: 53px;
padding: 0;
border: none;
border-radius: 999px;
background: var(--vip-home-magic-cta-bg);
color: #fff;
font-family: var(--vip-font-body);
font-weight: 400;
font-size: 15px;
line-height: 22.5px;
letter-spacing: 0;
text-decoration: none;
}
.vip-home-magic__cta::after {
content: " >";
margin-left: 2px;
}
.vip-home-magic__cta:hover,
.vip-home-magic__cta:focus-visible {
background: var(--vip-home-magic-cta-bg-hover);
color: #fff;
}
@media (max-width: 1199px) {
.vip-home-magic__shell {
width: 100%;
max-width: min(var(--vip-home-magic-panel-w), 100%);
border-radius: 12px;
padding: clamp(32px, 4vw, 50.4px) clamp(20px, 5vw, 161px) clamp(48px, 8vw, 135px) clamp(20px, 5vw, 156px);
}
.vip-home-magic__inner,
.vip-home-magic__row {
width: 100%;
}
.vip-home-magic__row {
grid-template-columns: minmax(0, 700fr) minmax(0, 101fr) minmax(0, 572fr);
}
.vip-home-magic__row--media-end {
grid-template-columns: minmax(0, 559fr) minmax(0, 91fr) minmax(0, 700fr) minmax(0, 23fr);
}
.vip-home-magic__row--media-end .vip-home-magic__copy {
width: auto;
padding-left: clamp(0px, 4vw, 51px);
}
.vip-home-magic__media img {
width: 100%;
height: auto;
aspect-ratio: 700 / 450;
}
}
@media (max-width: 991px) {
.vip-home-magic {
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
.vip-home-magic__shell {
width: 100%;
}
.vip-home-magic__row,
.vip-home-magic__row--media-end {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vip-home-magic__row--media-end .vip-home-magic__media {
order: 1;
}
.vip-home-magic__row--media-end .vip-home-magic__copy {
order: 2;
padding-left: 0;
width: 100%;
}
.vip-home-magic__media,
.vip-home-magic__copy {
width: 100%;
max-width: none;
}
.vip-home-magic__copy {
display: block;
min-height: 0;
justify-content: flex-start;
}
.vip-home-magic__row--1,
.vip-home-magic__row--2,
.vip-home-magic__row--3,
.vip-home-magic__row--4 {
margin-bottom: 4rem;
}
.vip-home-magic__title {
max-width: none;
font-size: clamp(32px, 6vw, 48px);
}
.vip-home-magic__heading {
font-size: clamp(28px, 5vw, 45px);
margin-bottom: 1rem;
}
.vip-home-magic__copy p {
margin-bottom: 1.25rem;
}
}
.vip-btn--outline-inverse {
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.92);
color: #fff;
background: transparent;
padding: 0.5rem 1.25rem;
font-weight: 700;
text-decoration: none;
}
.vip-btn--outline-inverse:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
}
.vip-home-blog-placeholder {
/* Hero/Novedades width contract. */
width: var(--vip-home-feature-width);
max-width: none;
margin-top: 0;
margin-right: calc((100% - var(--vip-home-feature-width)) / 2);
margin-bottom: 3rem;
margin-left: calc((100% - var(--vip-home-feature-width)) / 2);
padding-left: 0;
padding-right: 0;
}
@media (max-width: 767px) {
.vip-home-blog-placeholder {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-left: var(--vip-shell-gutter);
padding-right: var(--vip-shell-gutter);
}
}
/* "Síguenos para conocer / todas nuestras novedades" — two-line display title
* over a large grey placeholder block (matches `designs/HOME.jpg`). */
.vip-home-section-title--blog {
font-family: var(--vip-font-display);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.12;
color: #7e614a;
text-align: center;
text-wrap: balance;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.vip-home-section-title--blog .vip-home-section-title__line {
display: block;
}
.vip-home-blog-placeholder__box {
border-radius: 14px;
background: var(--vip-page-bg);
border: 1px dashed rgba(213, 161, 125, 0.45);
color: rgba(43, 43, 43, 0.55);
text-align: center;
padding: clamp(3.5rem, 9vw, 6rem) clamp(1.5rem, 4vw, 3rem);
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(200px, 22vw, 320px);
}
.vip-home-blog-placeholder__copy {
margin: 0;
max-width: 32ch;
font-family: var(--vip-font-display);
font-weight: 700;
font-size: clamp(1.1rem, 2.4vw, 1.65rem);
line-height: 1.25;
letter-spacing: 0.06em;
text-transform: uppercase;
color: inherit;
text-wrap: balance;
}
/* --- Footer (comp) --------------------------------------------------------- */
:root {
--vip-footer-tan: #c89673;
--vip-footer-tan-dark: #a87852;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#footer.vip-footer-shell {
margin-top: 0;
padding: 0;
background: transparent;
}
/* Classic theme.css sets `#footer { padding-top: 2.5rem }` — that hits the
* outer `.js-footer` wrapper around vip-footer.tpl and unbalances the
* newsletter band. Keep the shell flush (!important beats theme.css order). */
#footer.js-footer {
margin: 0 !important;
padding: 0 !important;
background: transparent;
}
/* Classic `body#checkout #footer` is `{padding:.9375rem;background:#fff}`.
Checkout nests vip-footer.tpl (also `#footer`) inside the layout
`.js-footer`, so that rule paints a white 15px frame around every
full-bleed footer band (newsletter, columns, social). Beat the same
selector; do not leave the inner shell on the unscoped `#footer` rule. */
body#checkout #footer,
body#checkout #footer.vip-footer-shell,
body#checkout #footer.js-footer {
width: 100%;
max-width: none;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: inherit;
}
.vip-footer-newsletter {
margin-top: 2.5rem;
background: var(--vip-footer-tan);
color: #fff;
padding: clamp(2rem, 5vw, 2.75rem) 0;
text-align: center;
}
.vip-footer-newsletter > .container,
.vip-footer-main > .container,
.vip-footer-social > .container {
width: var(--vip-figma-content-width);
max-width: none;
}
.vip-footer-newsletter__title {
margin: 0 0 1.15rem;
font-family: var(--vip-font-display);
font-weight: 600;
font-size: clamp(1.35rem, 3vw, 1.75rem);
color: #fff;
}
.vip-footer-newsletter__form {
max-width: 640px;
margin: 0 auto;
}
.vip-footer-newsletter__field {
display: flex;
align-items: stretch;
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.vip-footer-newsletter__input {
flex: 1 1 auto;
border: none;
padding: 0.85rem 1rem;
font-size: 0.95rem;
min-width: 0;
}
.vip-footer-newsletter__input:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--vip-terra);
}
.vip-footer-newsletter__submit {
flex: 0 0 52px;
border: none;
background: var(--vip-charcoal);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
}
.vip-footer-newsletter__submit:hover {
background: #000;
}
.vip-footer-newsletter__legal {
margin: 0.85rem auto 0;
max-width: 52ch;
font-size: 0.78rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.92);
}
.vip-footer-newsletter .vip-footer-newsletter__legal-link,
.vip-footer-newsletter .vip-footer-newsletter__legal-link:hover,
.vip-footer-newsletter .vip-footer-newsletter__legal-link:focus-visible,
.vip-footer-newsletter .vip-footer-newsletter__legal-link:active {
color: #fff !important;
text-decoration: underline;
}
.vip-footer-main {
background: #fff;
color: var(--vip-text);
padding: clamp(2rem, 5vw, 3rem) 0;
}
.vip-footer-main__grid {
row-gap: 2rem;
align-items: flex-start;
}
.vip-footer-col__title {
margin: 0 0 0.85rem;
font-family: var(--vip-font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--vip-footer-tan);
text-transform: none;
}
.vip-footer-brand__logo {
max-width: min(280px, 100%);
height: auto;
margin-bottom: 0.65rem;
}
.vip-footer-brand__tagline {
margin: 0 0 0.75rem;
font-family: var(--vip-font-display);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vip-footer-tan);
line-height: 1.35;
}
.vip-footer-brand__about {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--vip-muted);
max-width: 36ch;
}
.vip-footer-links,
.vip-footer-contact {
list-style: none;
margin: 0;
padding: 0;
}
.vip-footer-links li + li,
.vip-footer-contact li + li {
margin-top: 0.45rem;
}
.vip-footer-links a {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
color: var(--vip-muted);
font-size: 0.88rem;
text-decoration: none;
}
.vip-footer-links a::before {
content: "›";
color: var(--vip-footer-tan);
font-weight: 700;
}
.vip-footer-links a:hover {
color: var(--vip-terra-dark);
}
.vip-footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
color: var(--vip-muted);
}
.vip-footer-contact a {
color: var(--vip-muted);
text-decoration: none;
}
.vip-footer-contact a:hover {
color: var(--vip-terra-dark);
}
.vip-footer-contact__icon {
font-size: 1.1rem;
color: var(--vip-footer-tan);
line-height: 1.35;
}
.vip-footer-col--contact .vip-payment-strip {
margin-top: 1.15rem;
}
.vip-footer-col--contact .vip-payment-strip__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.5rem 0.85rem;
}
.vip-footer-col--contact .vip-payment-strip__mark {
height: 26px;
max-width: 48px;
}
.vip-footer-social {
background: var(--vip-footer-tan-dark);
padding: 0.65rem 0;
}
.vip-footer-social__list {
display: flex;
justify-content: center;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.vip-footer-social__link {
color: #fff;
display: grid;
place-items: center;
opacity: 0.95;
}
.vip-footer-social__link:hover {
opacity: 1;
color: #fff;
}
/* CMS legal / content pages */
#cms #wrapper .container {
max-width: var(--vip-figma-content-width);
}
#cms .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-size: 12px;
line-height: 14.4px;
}
#cms .breadcrumb a {
color: #878787;
text-decoration: none;
}
#cms .breadcrumb li:last-child span {
color: var(--vip-figma-tan);
}
.vip-cms-page .page-header {
text-align: left;
margin: 0 0 1.25rem;
}
.vip-cms-page .page-header h1 {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 37px;
line-height: 36px;
color: var(--vip-figma-brown);
}
.vip-cms-page.page-content {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.vip-cms-page__inner {
max-width: none;
margin: 0;
padding: clamp(1.35rem, 2.5vw, 2.25rem);
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
}
.vip-cms-page .vip-cms-title {
display: none;
}
.vip-cms {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-text);
}
.vip-cms-lead {
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
margin: 0 0 1.5rem;
}
.vip-cms-heading {
font-family: var(--vip-font-display);
font-size: 20px;
line-height: 1.2;
font-weight: 800;
color: var(--vip-figma-brown);
margin: 1.5rem 0 0.75rem;
}
.vip-cms-subheading {
font-size: var(--vip-figma-parrafo-size);
font-weight: 700;
color: var(--vip-figma-brown);
margin: 1.15rem 0 0.45rem;
}
.vip-cms-divider {
border: 0;
border-top: 1px solid rgba(213, 161, 125, 0.35);
margin: 1.5rem 0;
}
.vip-cms-card {
background: var(--vip-cream);
border: 1px solid rgba(213, 161, 125, 0.25);
border-radius: 4px;
padding: 1.15rem 1.35rem;
margin: 1rem 0 1.5rem;
}
.vip-cms-facts {
list-style: none;
margin: 0;
padding: 0;
}
.vip-cms-facts li {
padding: 0.35rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.vip-cms-facts li:last-child {
border-bottom: none;
}
.vip-cms-note {
font-size: 12px;
line-height: 1.45;
color: #878787;
font-style: italic;
margin: 1.25rem 0 0;
}
.vip-cms p {
margin: 0 0 0.85rem;
}
.vip-cms p:last-child {
margin-bottom: 0;
}
.vip-cms ul,
.vip-cms ol {
margin: 0 0 1rem;
padding-left: 1.35rem;
list-style-position: outside;
}
.vip-cms ul {
list-style-type: disc;
}
.vip-cms ol {
list-style-type: decimal;
}
.vip-cms li {
display: list-item;
margin-bottom: 0.65rem;
}
.vip-cms li:last-child {
margin-bottom: 0;
}
.vip-cms li > p {
margin: 0;
display: inline;
}
.vip-cms blockquote {
margin: 0.5rem 0 1rem;
padding: 0.65rem 1rem;
border-left: 3px solid var(--vip-figma-tan);
background: var(--vip-page-bg);
font-size: var(--vip-figma-parrafo-size);
}
.vip-cms a {
color: var(--vip-figma-brown);
text-decoration: underline;
text-underline-offset: 2px;
}
.vip-cms a:hover {
color: var(--vip-figma-tan);
}
.vip-cms--legal .vip-cms-heading {
margin-top: 2rem;
}
/* --------------------------------------------------------------------------
* Figma inner pages — TIENDA, FICHA PRODUCTO, REGISTRO (file sXGo3dsS4r8lfnFBOjCyRJ)
* -------------------------------------------------------------------------- */
#category #wrapper .container,
#search #wrapper .container,
#manufacturer #wrapper .container,
#supplier #wrapper .container,
#new-products #wrapper .container,
#prices-drop #wrapper .container,
#best-sales #wrapper .container,
#category #wrapper .container,
#search #wrapper .container,
#manufacturer #wrapper .container,
#supplier #wrapper .container,
#new-products #wrapper .container,
#prices-drop #wrapper .container,
#best-sales #wrapper .container,
#product #wrapper .container,
#registration #wrapper .container,
#authentication #wrapper .container {
max-width: var(--vip-figma-content-width);
}
#category #main,
#search #main,
#manufacturer #main,
#supplier #main,
#new-products #main,
#prices-drop #main,
#best-sales #main {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-text);
}
#search h1,
#manufacturer h1,
#supplier h1 {
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
margin-bottom: 1.25rem;
}
body#search.vip-tienda-page .vip-tienda__search-title,
body#search.vip-tienda-page #js-product-list-header.vip-tienda__title {
color: var(--vip-figma-tan) !important;
}
/* --------------------------------------------------------------------------
* Figma TIENDA — catalog listing (layout-vip-tienda.tpl)
* -------------------------------------------------------------------------- */
.vip-tienda-page #wrapper {
background: var(--vip-page-bg);
}
.vip-tienda__container {
width: var(--vip-figma-content-width);
max-width: none;
}
.vip-tienda-page .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-size: 12px;
line-height: 1.4;
}
.vip-tienda-page .breadcrumb a {
color: #878787;
text-decoration: none;
}
.vip-tienda-page .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
.vip-tienda__intro {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.vip-tienda__title {
margin: 0 0 0.75rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
}
.vip-tienda__lead {
max-width: 52rem;
margin: 0 0 1.25rem;
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 22.5px;
color: #7E614A;
}
/* Nested BO paragraphs only — do not set color:inherit on p.vip-tienda__lead (the tpl uses that class on the itself). */
.vip-tienda__lead p {
margin: 0;
color: inherit;
}
/* Beat #category #main { font-size; color } — same element carries both selectors. */
#category.vip-tienda-page #vip-tienda-intro .vip-tienda__lead,
#prices-drop.vip-tienda-page #vip-tienda-intro .vip-tienda__lead {
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 22.5px;
color: #7E614A;
}
.vip-tienda__hero {
position: relative;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 1357 / 360;
max-height: min(42vw, 360px);
}
/* Bootstrap rows extend 15px beyond the container content box; match those edges
* so category heroes are centred over the complete sidebar + product listing. */
#category.vip-tienda-page .vip-tienda__hero {
width: calc(100% + 30px);
margin-right: -15px;
margin-left: -15px;
}
.vip-tienda__hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Shift crop down to show more of the foreground (incense/table base). */
object-position: center 88%;
}
.vip-tienda__hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Velado negro — separate layer so the texture can screen-blend with the photo. */
.vip-tienda__hero-scrim::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
}
.vip-tienda__hero-scrim::after {
content: "";
position: absolute;
inset: 0;
/* Palo Santo comp uses this topographic trama over the photo (not brands-section-bg.svg — that asset is tan-filled). */
background: url("../img/textures/trama2-vip-artesanias.png") center / cover no-repeat;
opacity: 0.68;
mix-blend-mode: screen;
}
.vip-tienda__hero-label {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
bottom: auto;
margin: 0;
transform: translate(-50%, -50%);
width: max-content;
max-width: calc(100% - 2.5rem);
text-align: center;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1;
text-transform: uppercase;
color: var(--vip-figma-tan);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
/* Subcategory shortcuts — same outer width as .vip-tienda__hero (Bootstrap ±15px bleed).
* Do NOT set max-width:100% here: it clamps width:calc(100% + 30px) back to the container
* and leaves a right-hand gap under the banner.
* Card widths are CSS (100cqi) so first paint matches the final layout — no JS resize flash. */
.vip-tienda__subcats {
--vip-subcats-gap: 16px;
--vip-subcats-visible: 6;
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0 0 28px;
padding: 0;
box-sizing: border-box;
}
#category.vip-tienda-page .vip-tienda__subcats,
#prices-drop.vip-tienda-page .vip-tienda__subcats {
width: calc(100% + 30px);
max-width: none;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 28px;
}
.vip-tienda__subcats-viewport {
container-type: inline-size;
container-name: vip-subcats;
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
scroll-snap-type: x mandatory;
/* Keep the first/last tan card edge inside the clip when scrollLeft rounds. */
scroll-padding-inline: 1px;
/* auto: programmatic scrollLeft on resize must not animate; JS uses behavior:'smooth' for arrows. */
scroll-behavior: auto;
scrollbar-width: none;
-ms-overflow-style: none;
box-sizing: border-box;
}
.vip-tienda__subcats-viewport::-webkit-scrollbar {
display: none;
}
.vip-tienda__subcats-list {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: var(--vip-subcats-gap);
margin: 0;
padding: 0;
width: max-content;
max-width: none;
list-style: none;
box-sizing: border-box;
}
/* % of the scrolling viewport (container), not the max-content list — same pattern as bestsellers. */
.vip-tienda__subcats-item {
--vip-subcats-card: calc(
(100cqi - (var(--vip-subcats-visible) - 1) * var(--vip-subcats-gap))
/ var(--vip-subcats-visible)
);
flex: 0 0 var(--vip-subcats-card);
width: var(--vip-subcats-card);
max-width: var(--vip-subcats-card);
min-width: 0;
margin: 0;
padding: 0;
scroll-snap-align: start;
scroll-snap-stop: normal;
box-sizing: border-box;
overflow: hidden;
}
.vip-tienda__subcats-link {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
/* Transparent border keeps layout; inset stroke stays visible when the
* infinite track clips ~0.4px of the leftmost card. */
border: 1px solid transparent;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--vip-figma-tan);
color: var(--vip-figma-brown);
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vip-tienda__subcats-link:hover,
.vip-tienda__subcats-link:focus-visible {
box-shadow:
inset 0 0 0 1px var(--vip-figma-brown),
0 6px 18px rgba(126, 97, 74, 0.16);
color: var(--vip-figma-brown);
text-decoration: none;
transform: translateY(-2px);
}
.vip-tienda__subcats-media {
display: block;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3eee8;
}
.vip-tienda__subcats-img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
}
.vip-tienda__subcats-media picture {
display: block;
width: 100%;
height: 100%;
}
.vip-tienda__subcats-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(213, 161, 125, 0.35), rgba(126, 97, 74, 0.12));
}
.vip-tienda__subcats-name {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
box-sizing: border-box;
padding: 12px;
font-family: var(--vip-font-figma);
font-size: 14px;
line-height: 1.3;
font-weight: 600;
text-align: center;
color: var(--vip-figma-brown);
}
.vip-tienda__subcats-nav {
position: absolute;
top: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px rgba(126, 97, 74, 0.22);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transform: translateY(-50%);
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.vip-tienda__subcats-nav--prev {
left: 10px;
}
.vip-tienda__subcats-nav--next {
right: 10px;
}
.vip-tienda__subcats-nav:hover:not(:disabled),
.vip-tienda__subcats-nav:focus:not(:disabled),
.vip-tienda__subcats-nav:focus-visible:not(:disabled) {
background: #fff;
opacity: 1;
outline: none !important;
box-shadow: 0 3px 14px rgba(126, 97, 74, 0.3);
}
.vip-tienda__subcats-nav:disabled {
opacity: 0.35;
cursor: default;
}
.vip-tienda__subcats-arrow {
display: block;
width: 28px;
height: 28px;
max-width: none;
}
@media (max-width: 1199px) {
.vip-tienda__subcats {
--vip-subcats-visible: 4;
}
}
@media (max-width: 767px) {
.vip-tienda__subcats {
--vip-subcats-visible: 2;
--vip-subcats-gap: 12px;
}
#category.vip-tienda-page .vip-tienda__subcats,
#prices-drop.vip-tienda-page .vip-tienda__subcats {
width: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 20px;
}
.vip-tienda__subcats-nav {
display: none;
}
}
.vip-tienda__layout {
align-items: flex-start;
gap: 30px 0;
}
.vip-tienda__sidebar {
padding-right: 0.5rem;
}
/* Sidebar panels — bordered boxes (Figma TIENDA filters comp). */
.vip-tienda__sidebar-panel {
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
background: #fff;
padding: 1.2rem 1.1rem;
margin-bottom: 1.15rem;
}
.vip-tienda__panel-title {
margin: 0 0 0.55rem;
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 15px;
line-height: 22.5px;
color: var(--vip-figma-tan);
}
/* Category tree */
.vip-tienda__tree-list {
margin: 0;
padding: 0;
list-style: none;
}
.vip-tienda__tree-list--sub {
margin: 0.15rem 0 0.35rem 0.85rem;
padding-left: 0.35rem;
border-left: 1px solid rgba(213, 161, 125, 0.25);
}
.vip-tienda__tree-item {
margin: 0;
padding: 0;
}
.vip-tienda__tree-row {
display: flex;
align-items: center;
gap: 0.35rem;
}
.vip-tienda__tree-link {
flex: 1 1 auto;
min-width: 0;
display: block;
padding: 0.22rem 0;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
color: #878787;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
}
.vip-tienda__tree-link::before {
content: ">";
display: inline-block;
margin-right: 0.4rem;
color: #c8c8c8;
font-size: 12px;
font-weight: 700;
transform: translateY(-1px);
}
.vip-tienda__tree-link:hover,
.vip-tienda__tree-link:focus-visible,
.vip-tienda__tree-link.is-active {
color: var(--vip-figma-tan);
}
.vip-tienda__tree-link.is-active::before,
.vip-tienda__tree-link:hover::before,
.vip-tienda__tree-link:focus-visible::before {
color: var(--vip-figma-tan);
}
.vip-tienda__tree-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
margin: 0;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.vip-tienda__tree-chevron {
display: block;
width: 0.45rem;
height: 0.45rem;
border-right: 1.5px solid #c8c8c8;
border-bottom: 1.5px solid #c8c8c8;
transform: rotate(45deg) translateY(-1px);
transition: transform 0.15s ease;
}
.vip-tienda__tree-toggle:not(.collapsed) .vip-tienda__tree-chevron {
transform: rotate(-135deg) translateY(1px);
}
.vip-tienda__tree-toggle:hover .vip-tienda__tree-chevron,
.vip-tienda__tree-toggle:focus-visible .vip-tienda__tree-chevron {
border-color: var(--vip-figma-tan);
}
/* Sidebar + facets — #left-column is OUTSIDE #main; scope on body.vip-tienda-page */
body.vip-tienda-page #left-column {
background: transparent;
border: none;
padding: 0 0.5rem 0 0;
}
body.vip-tienda-page #left-column #search_filters,
body.vip-tienda-page #left-column #search_filters.vip-tienda__facets,
body.vip-tienda-page #left-column .vip-tienda__sidebar-panel {
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
background: #fff;
padding: 1.2rem 1.1rem;
margin-bottom: 1.15rem;
box-shadow: none;
}
body.vip-tienda-page #left-column #search_filters > .text-uppercase.h6,
body.vip-tienda-page #left-column #search_filters > p.h6 {
display: none;
}
body.vip-tienda-page #left-column #search_filters .facet {
border: none;
padding: 0;
margin: 0 0 1.1rem;
background: transparent;
}
body.vip-tienda-page #left-column #search_filters .facet:last-child {
margin-bottom: 0;
}
body.vip-tienda-page #search_filters_suppliers {
display: none !important;
}
body.vip-tienda-page #search_filters_brands {
display: none !important;
}
body.vip-tienda-page #left-column .block-categories,
body.vip-tienda-page #left-column .block-categories a,
body.vip-tienda-page #left-column .vip-tienda__tree-link {
color: #878787;
text-transform: none !important;
letter-spacing: normal;
}
body.vip-tienda-page #left-column .vip-tienda__tree-link:hover,
body.vip-tienda-page #left-column .vip-tienda__tree-link:focus-visible,
body.vip-tienda-page #left-column .vip-tienda__tree-link.is-active {
color: var(--vip-figma-tan);
}
body.vip-tienda-page #left-column #search_filters .h6.facet-title,
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet-title {
margin: 0 0 0.55rem;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 700;
color: var(--vip-figma-tan);
text-transform: none;
}
body.vip-tienda-page #left-column #search_filters .facet-label {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.18rem 0;
}
body.vip-tienda-page #left-column #search_filters .custom-checkbox,
body.vip-tienda-page #left-column #search_filters .custom-radio,
body.vip-tienda-page #left-column #search_filters .vip-tienda__checkbox,
body.vip-tienda-page #left-column #search_filters .vip-tienda__radio {
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 14px;
width: 14px;
height: 14px;
margin: 0;
padding: 0;
}
body.vip-tienda-page #left-column #search_filters .custom-checkbox input[type="checkbox"],
body.vip-tienda-page #left-column #search_filters .custom-radio input[type="radio"] {
position: absolute;
inset: 0;
width: 14px;
height: 14px;
margin: 0;
opacity: 0;
}
body.vip-tienda-page #left-column #search_filters .custom-checkbox input[type="checkbox"] + span,
body.vip-tienda-page #left-column #search_filters .custom-radio input[type="radio"] + span {
display: block;
margin: 0;
}
body.vip-tienda-page #left-column #search_filters .facet-label a,
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet-link {
display: block;
margin: 0;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
color: #878787;
text-decoration: none;
}
body.vip-tienda-page #left-column #search_filters .facet-label a:hover,
body.vip-tienda-page #left-column #search_filters .facet-label.active a,
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet-link:hover,
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet-label.is-active .vip-tienda__facet-link {
color: var(--vip-figma-tan);
}
body.vip-tienda-page #left-column #search_filters .custom-checkbox input[type="checkbox"] + span,
body.vip-tienda-page #left-column #search_filters .custom-radio input[type="radio"] + span {
width: 14px;
height: 14px;
min-width: 14px;
border: 1px solid #c8c8c8;
border-radius: 2px;
background: #fff;
}
body.vip-tienda-page #left-column #search_filters ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Active facets — corporate treatment above the product grid. */
body.vip-tienda-page .vip-tienda #js-active-search-filters.active_filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.65rem;
margin: 1rem 0;
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
background: var(--vip-figma-tan);
font-family: var(--vip-font-body);
box-shadow: none;
}
body.vip-tienda-page .vip-tienda #js-active-search-filters .active-filter-title {
flex: 0 0 auto;
margin: 0;
color: #fff;
font-family: var(--vip-font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-transform: none;
}
body.vip-tienda-page .vip-tienda #js-active-search-filters ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
body.vip-tienda-page .vip-tienda #js-active-search-filters .filter-block {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin: 0;
padding: 0.4rem 0.65rem;
border: 1px solid #fff;
border-radius: 999px;
background: transparent;
color: #fff;
font-family: var(--vip-font-body);
font-size: 13px;
font-weight: 600;
line-height: 1.35;
box-shadow: none;
}
body.vip-tienda-page .vip-tienda #js-active-search-filters .filter-block .js-search-link,
body.vip-tienda-page .vip-tienda #js-active-search-filters .filter-block .close {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
color: #fff;
}
body.vip-tienda-page .vip-tienda #js-active-search-filters .filter-block .close {
font-size: 16px;
line-height: 1;
}
/* Empty catalog/search state — displaySearch reuses the header search markup,
* so reset Classic's detached input/button layout inside the content panel. */
.page-not-found .vip-empty-state__search {
width: min(100%, 430px);
margin: 1.4rem 0 0;
}
.page-not-found .vip-empty-state__search:empty {
display: none;
}
.page-not-found .vip-empty-state__search #search_widget,
.page-not-found .vip-empty-state__search .search-widgets.vip-header-search {
position: relative !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
box-shadow: none;
}
.page-not-found .vip-empty-state__search .vip-header-search__form {
display: flex;
align-items: stretch;
width: 100%;
height: 48px;
margin: 0 !important;
overflow: hidden;
border: 1px solid rgba(213, 161, 125, 0.72);
border-radius: 10px;
background: #fff;
box-shadow: none;
}
.page-not-found .vip-empty-state__search .vip-header-search__input {
flex: 1 1 auto;
width: 1%;
min-width: 0;
height: 100%;
margin: 0;
padding: 0 1rem;
border: 0 !important;
border-radius: 0;
outline: 0;
background: transparent !important;
box-shadow: none !important;
color: var(--vip-text);
font-family: var(--vip-font-body);
font-size: 15px;
appearance: none;
}
.page-not-found .vip-empty-state__search .vip-header-search__input::placeholder {
color: #9a9a9a;
}
.page-not-found .vip-empty-state__search .vip-header-search__submit {
position: static !important;
display: grid;
flex: 0 0 48px;
place-items: center;
width: 48px;
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0;
outline: 0;
background: var(--vip-figma-tan) !important;
color: #fff;
cursor: pointer;
transform: none !important;
}
.page-not-found .vip-empty-state__search .vip-header-search__submit:hover,
.page-not-found .vip-empty-state__search .vip-header-search__submit:focus-visible {
background: var(--vip-figma-brown) !important;
}
.page-not-found .vip-empty-state__search .vip-header-search__submit .material-icons {
display: block;
width: auto;
height: auto;
margin: 0;
font-size: 22px;
line-height: 1;
overflow: visible;
}
body.vip-tienda-page #left-column .block:not(.vip-tienda__sidebar-panel):not(.vip-tienda__categories),
body.vip-tienda-page #left-column .block-categories > .h6:not(.vip-tienda__panel-title),
body.vip-tienda-page #left-column .text-uppercase.h6:not(.vip-tienda__panel-title) {
display: none;
}
.vip-tienda__facets .facet {
border: none;
padding: 0;
margin: 0 0 1.1rem;
}
.vip-tienda__facets .facet:last-child {
margin-bottom: 0;
}
.vip-tienda__facet-title {
margin: 0 0 0.55rem;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
font-weight: 700;
color: var(--vip-figma-tan);
text-transform: none;
}
.vip-tienda__facet-title--link {
display: inline-block;
text-decoration: none;
}
.vip-tienda__facet-title--link:hover,
.vip-tienda__facet-title--link:focus-visible {
color: var(--vip-figma-brown);
}
.vip-tienda__facet-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin: 0 0 0.55rem;
padding: 0;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
}
.vip-tienda__facet-toggle .vip-tienda__facet-title {
margin: 0;
}
.vip-tienda__facet-chevron {
flex: 0 0 auto;
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid var(--vip-figma-tan);
border-bottom: 2px solid var(--vip-figma-tan);
transform: rotate(45deg) translateY(-1px);
transition: transform 0.15s ease;
}
.vip-tienda__facet-toggle[aria-expanded="true"] .vip-tienda__facet-chevron,
.vip-tienda__facet-mobile[aria-expanded="true"] .vip-tienda__facet-mobile-icon {
transform: rotate(-135deg) translateY(1px);
}
body.vip-tienda-page #left-column .vip-tienda__facet--collapsible .collapse:not(.in):not(.show) {
display: none;
}
body.vip-tienda-page #left-column .vip-tienda__facet--collapsible .collapse.in,
body.vip-tienda-page #left-column .vip-tienda__facet--collapsible .collapse.show {
display: block;
}
body.vip-tienda-page #left-column .vip-tienda__facet--manufacturer .vip-tienda__facet-list--manufacturer {
max-height: 220px;
overflow-y: auto;
padding-right: 0.15rem;
margin: 0;
}
body.vip-tienda-page #left-column .vip-tienda__facet--manufacturer .vip-tienda__facet-item[hidden] {
display: none !important;
}
.vip-tienda__brand-search {
display: block;
margin-bottom: 0.55rem;
}
.vip-tienda__brand-search-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 0.45rem 0.55rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 4px;
background: #fff;
font-family: var(--vip-font-body);
font-size: 14px;
line-height: 1.35;
color: #878787;
}
.vip-tienda__brand-search-input::placeholder {
color: #b8b8b8;
}
.vip-tienda__brand-search-input:focus {
outline: none;
border-color: var(--vip-figma-tan);
color: #5a5a5a;
}
.vip-tienda__brand-search-empty {
margin: 0 0 0.35rem;
font-family: var(--vip-font-body);
font-size: 13px;
line-height: 1.35;
color: #878787;
}
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet--manufacturer .vip-tienda__facet-link,
body.vip-tienda-page #left-column #search_filters .vip-tienda__facet--manufacturer .facet-label a {
text-transform: none !important;
letter-spacing: normal;
}
.vip-tienda__facets-clear {
margin-bottom: 0.85rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(213, 161, 125, 0.25);
}
.vip-tienda__clear-btn {
border: none;
background: transparent;
padding: 0;
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.3;
font-weight: 600;
color: #878787;
text-decoration: underline;
cursor: pointer;
}
.vip-tienda__clear-btn:hover,
.vip-tienda__clear-btn:focus-visible {
color: var(--vip-figma-tan);
}
.vip-tienda__facet-list {
margin: 0;
padding: 0;
list-style: none;
}
.vip-tienda__facet-item {
margin: 0;
padding: 0;
}
.vip-tienda__facet-label {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.18rem 0;
cursor: pointer;
}
.vip-tienda__facet-label .vip-tienda__checkbox,
.vip-tienda__facet-label .vip-tienda__radio {
flex: 0 0 14px;
width: 14px;
height: 14px;
margin: 0;
padding: 0;
top: 0;
}
.vip-tienda__facet-label .custom-checkbox input[type="checkbox"] + span,
.vip-tienda__facet-label .custom-radio input[type="radio"] + span {
display: block;
width: 14px;
height: 14px;
min-width: 14px;
margin: 0;
border: 1px solid #c8c8c8;
border-radius: 2px;
background: #fff;
}
.vip-tienda__facet-label .custom-checkbox input[type="checkbox"]:checked + span,
.vip-tienda__facet-label .custom-radio input[type="radio"]:checked + span {
border-color: var(--vip-figma-tan);
background: var(--vip-figma-tan);
}
.vip-tienda__facet-label .custom-checkbox .checkbox-checked {
font-size: 12px;
color: #fff;
}
.vip-tienda__facet-link {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
color: #878787;
text-decoration: none;
}
.vip-tienda__facet-link:hover,
.vip-tienda__facet-link:focus-visible,
.vip-tienda__facet-label.is-active .vip-tienda__facet-link {
color: var(--vip-figma-tan);
}
.vip-tienda__facet-link .magnitude {
color: inherit;
}
.vip-tienda__facet-dropdown {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
padding: 0.45rem 0.65rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 4px;
font-size: 14px;
color: #878787;
text-decoration: none;
}
/* Color swatch row */
.vip-tienda__color-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.vip-tienda__color-item {
margin: 0;
padding: 0;
}
.vip-tienda__color-label {
display: block;
margin: 0;
cursor: pointer;
}
.vip-tienda__color-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.vip-tienda__color-swatch {
display: block;
width: 22px;
height: 22px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 2px;
box-sizing: border-box;
background-size: cover;
background-position: center;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vip-tienda__color-swatch--fallback {
background: #f0f0f0;
}
.vip-tienda__color-label.is-active .vip-tienda__color-swatch,
.vip-tienda__color-input:checked + .vip-tienda__color-swatch {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--vip-figma-tan);
}
.vip-tienda__color-label:hover .vip-tienda__color-swatch,
.vip-tienda__color-label:focus-within .vip-tienda__color-swatch {
transform: scale(1.05);
}
/* Price / range slider (jQuery UI from ps_facetedsearch) */
.vip-tienda__slider {
margin: 0;
padding: 0;
list-style: none;
}
.vip-tienda__slider-label {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0 0 1rem;
padding: 0.3rem 0.75rem;
border: 1px solid rgba(213, 161, 125, 0.38);
border-radius: 999px;
background: rgba(213, 161, 125, 0.1);
font-family: var(--vip-font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--vip-figma-brown);
}
.vip-tienda__slider-track {
margin: 0 10px 0.85rem;
}
#search_filters.vip-tienda__facets .ui-widget.ui-widget-content {
border: none;
background: #eadfd7;
}
#search_filters.vip-tienda__facets .ui-slider-horizontal {
height: 6px;
border: none;
border-radius: 999px;
background: #eadfd7;
}
#search_filters.vip-tienda__facets .ui-slider-horizontal .ui-slider-range {
background: var(--vip-figma-tan);
border-radius: 999px;
}
#search_filters.vip-tienda__facets .ui-slider .ui-slider-handle {
top: 50%;
width: 20px;
height: 20px;
margin-top: 0;
margin-left: -10px;
border: 3px solid var(--vip-figma-tan);
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 7px rgba(92, 62, 43, 0.2);
cursor: grab;
transform: translateY(-50%);
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#search_filters.vip-tienda__facets .ui-slider .ui-slider-handle:hover {
border-color: var(--vip-figma-brown);
box-shadow: 0 3px 9px rgba(92, 62, 43, 0.28);
transform: translateY(-50%) scale(1.08);
}
#search_filters.vip-tienda__facets .ui-slider .ui-slider-handle:active {
cursor: grabbing;
}
#search_filters.vip-tienda__facets .ui-slider .ui-slider-handle:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(213, 161, 125, 0.28), 0 2px 7px rgba(92, 62, 43, 0.2);
}
.vip-tienda__suppliers .vip-tienda__facet-empty {
margin: 0;
font-size: 15px;
line-height: 22.5px;
color: #878787;
}
.vip-tienda__suppliers ul {
margin: 0;
padding: 0;
list-style: none;
}
.vip-tienda__suppliers .facet-label {
margin: 0;
padding: 0.18rem 0;
}
.vip-tienda__suppliers .facet-label a {
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 22.5px;
color: #878787;
text-decoration: none;
}
.vip-tienda__suppliers .facet-label a:hover,
.vip-tienda__suppliers .facet-label a:focus-visible {
color: var(--vip-figma-tan);
}
.vip-tienda__facet-mobile {
display: none;
}
.vip-tienda-page #left-column .block:not(.vip-tienda__sidebar-panel):not(.vip-tienda__categories),
.vip-tienda-page #left-column .block-categories > .h6:not(.vip-tienda__panel-title),
.vip-tienda-page #left-column .text-uppercase.h6:not(.vip-tienda__panel-title),
.vip-tienda-wrapper #left-column .block:not(.vip-tienda__sidebar-panel):not(.vip-tienda__categories) {
display: none;
}
.vip-tienda__toolbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem 1.25rem;
margin-bottom: 1.25rem;
padding: 0.85rem 0;
border-top: 1px solid rgba(126, 97, 74, 0.12);
border-bottom: 1px solid rgba(126, 97, 74, 0.15);
}
.vip-tienda__toolbar-start {
display: flex;
align-items: center;
gap: 0.5rem;
}
.vip-tienda__view-toggle {
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
.vip-tienda__view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.15rem;
border: none;
background: transparent;
color: #c8c8c8;
cursor: pointer;
line-height: 0;
transition: color 0.15s ease;
}
.vip-tienda__view-btn:hover,
.vip-tienda__view-btn:focus-visible {
color: var(--vip-figma-tan);
}
.vip-tienda__view-btn.is-active {
color: var(--vip-figma-brown);
}
.vip-tienda__count {
margin: 0;
font-size: 12px;
line-height: 1.4;
font-weight: 600;
color: #878787;
text-align: center;
}
.vip-tienda__count--figma {
justify-self: center;
}
.vip-tienda__toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.55rem;
margin-left: 0;
}
.vip-tienda__select-wrap {
position: relative;
margin: 0;
}
.vip-tienda__select {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
min-width: 7.5rem;
padding: 0.45rem 0.75rem;
border: none;
border-radius: 6px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.vip-tienda__select--compact {
min-width: 3.25rem;
justify-content: center;
}
.vip-tienda__select-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vip-tienda__select-chevron {
flex: 0 0 auto;
}
.vip-tienda__select-menu {
min-width: 100%;
margin-top: 0.25rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 6px;
padding: 0.25rem 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.vip-tienda__select-menu .dropdown-item {
font-size: 12px;
font-weight: 600;
color: #878787;
}
.vip-tienda__select-menu .dropdown-item.current,
.vip-tienda__select-menu .dropdown-item:hover,
.vip-tienda__select-menu .dropdown-item:focus-visible {
color: var(--vip-figma-brown);
background: rgba(213, 161, 125, 0.12);
}
.vip-tienda__toolbar .products-sort-order {
margin: 0;
}
.vip-tienda__toolbar .select-title {
border-radius: 8px;
border: 1px solid #d5a17d;
font-size: 12px;
font-weight: 600;
color: var(--vip-figma-brown);
}
/* Classic `#products .products { display:flex }` beats a single class — anchor grid here. */
#main.vip-tienda #products .products.vip-tienda__products,
.vip-tienda-page #products .products.vip-tienda__products,
.vip-tienda__products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.75rem) clamp(0.85rem, 1.5vw, 1.35rem);
margin: 0;
padding: 0;
}
#main.vip-tienda #products .products.vip-tienda__products > .vip-product-card,
.vip-tienda-page #products .products.vip-tienda__products > .vip-product-card {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
float: none;
}
/* Tienda cards — same portrait grid as homepage Novedades (Figma TIENDA comp). */
.vip-product-card--tienda .vip-product-card__thumb {
border-radius: 20px;
aspect-ratio: 4 / 5;
}
.vip-product-card--tienda .vip-product-card__thumb img {
object-fit: cover;
padding: 0;
}
/* Tienda list view — horizontal row (Figma TIENDA list toggle). */
.vip-tienda__products--list {
grid-template-columns: 1fr !important;
gap: 1.15rem !important;
}
.vip-tienda__products--list > .vip-product-card--tienda {
display: grid;
grid-template-columns: clamp(4.5rem, 10vw, 6.5rem) minmax(0, 1fr) auto;
align-items: center;
gap: 1rem 1.25rem;
padding: 0.35rem 0;
border-bottom: none;
}
.vip-tienda__products--list .vip-product-card__media {
grid-column: 1;
width: 100%;
}
.vip-tienda__products--list .vip-product-card__cart {
max-width: none;
margin: 0.35rem;
}
.vip-tienda__products--list .vip-product-card__qty {
min-height: 1.75rem;
padding: 0.1rem;
}
.vip-tienda__products--list .vip-product-card__qty-btn {
width: 1.3rem;
height: 1.3rem;
font-size: 0.8rem;
}
.vip-tienda__products--list .vip-product-card__qty-input {
width: 1.35rem;
height: 1.3rem;
font-size: 0.65rem;
}
.vip-tienda__products--list .vip-product-card__add,
.vip-tienda__products--list .vip-product-card__stock-status {
gap: 0.25rem;
min-height: 1.75rem;
padding: 0.3rem 0.45rem;
font-size: 0.65rem;
}
.vip-tienda__products--list .vip-product-card__add-label {
display: none;
}
.vip-tienda__products--list .vip-product-card__add-icon {
width: 0.8rem;
height: 0.8rem;
flex-basis: 0.8rem;
}
.vip-tienda__products--list .vip-product-card__body {
display: contents;
}
.vip-tienda__products--list .vip-product-card--tienda .vip-product-card__thumb {
aspect-ratio: 1 / 1;
border-radius: 12px;
}
.vip-tienda__products--list .vip-product-card__copy {
grid-column: 2;
min-width: 0;
}
.vip-tienda__products--list .vip-product-card__pricing {
grid-column: 3;
align-items: flex-end;
padding-right: 0.15rem;
}
@media (max-width: 575px) {
.vip-tienda__toolbar {
grid-template-columns: 1fr;
justify-items: stretch;
}
.vip-tienda__toolbar-start {
justify-content: flex-start;
}
.vip-tienda__count--figma {
justify-self: start;
text-align: left;
}
.vip-tienda__toolbar-actions {
justify-content: flex-start;
}
.vip-tienda__products--list {
gap: 1.35rem !important;
}
.vip-tienda__products--list > .vip-product-card--tienda {
grid-template-columns: clamp(4rem, 18vw, 5.5rem) minmax(0, 1fr);
grid-template-areas:
"media copy"
"media price";
row-gap: 0.5rem;
padding: 0.25rem 0;
}
.vip-tienda__products--list .vip-product-card__media {
grid-area: media;
}
.vip-tienda__products--list .vip-product-card__copy {
grid-area: copy;
}
.vip-tienda__products--list .vip-product-card__pricing {
grid-area: price;
align-items: flex-start;
text-align: left;
padding-left: calc(clamp(4rem, 18vw, 5.5rem) + 1rem);
}
}
.vip-product-card__badge--sale {
top: 0;
left: 0;
min-width: 0;
padding: 0.32rem 0.55rem 0.28rem 0.5rem;
border-radius: 8px 0 8px 0;
background: #ff0004;
color: #fff;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
font-weight: 700;
font-style: normal;
line-height: 1.1;
letter-spacing: 0;
}
.vip-product-card__badge--oos {
top: 0.5rem;
right: 0.5rem;
left: auto;
padding: 0.35rem 0.6rem;
border-radius: 6px;
background: rgba(29, 29, 29, 0.82);
color: #fff;
font-family: var(--vip-font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.vip-product-card__price-gate {
margin: 0;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
line-height: 1.25;
font-weight: 600;
font-style: italic;
color: var(--vip-figma-brown-grey, #6b5b52);
text-decoration: none;
white-space: nowrap;
}
.vip-product-card__price-gate:hover,
.vip-product-card__price-gate:focus-visible {
color: #7e614a;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.vip-product__purchase-gate {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
margin: 0.5rem 0 0;
}
.vip-product__purchase-gate-text {
margin: 0;
max-width: 32rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--vip-figma-brown, #7e614a);
}
.vip-tienda__fallback {
margin-top: 0.5rem;
}
.vip-tienda__fallback-title {
margin: 0 0 1.25rem;
font-family: var(--vip-font-display, "Earlgo", serif);
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
color: var(--vip-figma-brown, #8b5a3c);
}
/* SEO description below the product grid (Mariano-style; hero stays clean). */
.vip-tienda__seo {
margin: 2.5rem 0 0;
padding: 1.75rem 0;
border-top: 1px solid rgba(213, 161, 125, 0.35);
}
.vip-tienda__seo--additional {
margin-top: 1.25rem;
padding-top: 0;
border-top: 0;
}
.vip-tienda__seo-body {
max-width: 52rem;
}
.vip-tienda__seo-body p {
margin: 0 0 1rem;
font-family: var(--vip-font-figma);
font-size: var(--vip-figma-parrafo-size, 15px);
line-height: var(--vip-figma-parrafo-lh, 22.5px);
color: var(--vip-figma-brown);
}
.vip-tienda__seo-body p:last-child {
margin-bottom: 0;
}
/* Tienda pagination — tan pills, single-row nav (replaces Classic teal wrap). */
.vip-tienda-page #js-product-list .vip-tienda-pagination,
#main.vip-tienda #js-product-list .vip-tienda-pagination {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
padding: 0;
background: transparent;
border: none;
}
.vip-tienda-pagination__summary {
margin: 0;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
line-height: 1.4;
font-weight: 600;
color: #878787;
}
.vip-tienda-pagination__nav {
width: 100%;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 0 rgba(126, 97, 74, 0.04);
box-sizing: border-box;
}
.vip-tienda-pagination__list {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 0.3rem;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.vip-tienda-pagination__list::-webkit-scrollbar {
display: none;
}
.vip-tienda-pagination__item {
margin: 0;
padding: 0;
float: none;
}
.vip-tienda-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-width: 2.25rem;
min-height: 2.25rem;
padding: 0.3rem 0.55rem;
border: 1px solid transparent;
border-radius: 999px;
box-sizing: border-box;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
line-height: 1;
font-weight: 600;
color: var(--vip-figma-brown) !important;
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.vip-tienda-pagination__link:hover,
.vip-tienda-pagination__link:focus-visible {
color: var(--vip-figma-brown) !important;
background: rgba(213, 161, 125, 0.16);
border-color: rgba(213, 161, 125, 0.35);
text-decoration: none;
}
.vip-tienda-pagination__link.is-current {
color: #fff !important;
background: var(--vip-figma-tan);
border-color: var(--vip-figma-tan);
font-weight: 700;
pointer-events: none;
opacity: 1;
}
.vip-tienda-pagination__link.disabled,
.vip-tienda-pagination__link.is-disabled {
opacity: 0.35;
pointer-events: none;
}
.vip-tienda-pagination__link--prev,
.vip-tienda-pagination__link--next {
position: relative;
min-width: auto;
padding-inline: 0.8rem;
border-color: rgba(213, 161, 125, 0.5);
font-weight: 700;
}
.vip-tienda-pagination__link--prev:hover,
.vip-tienda-pagination__link--prev:focus-visible,
.vip-tienda-pagination__link--next:hover,
.vip-tienda-pagination__link--next:focus-visible {
border-color: var(--vip-figma-tan);
background: rgba(213, 161, 125, 0.12);
}
.vip-tienda-pagination__chevron {
font-size: 1.15em;
line-height: 1;
font-weight: 700;
}
.vip-tienda-pagination__spacer {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
min-height: 2.25rem;
padding: 0 0.15rem;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
font-weight: 600;
color: #878787;
letter-spacing: 0.08em;
}
/* Back to top — match VIP pill language on phone listing. */
.vip-tienda-page #js-product-list .up,
#main.vip-tienda #js-product-list .up {
margin-top: 0.85rem;
text-align: center;
}
.vip-tienda-page #js-product-list .up .btn-secondary,
#main.vip-tienda #js-product-list .up .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2.5rem;
padding: 0.45rem 1.15rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 999px;
background: #fff;
color: var(--vip-figma-brown);
font-family: var(--vip-font-body);
font-size: 0.8125rem;
font-weight: 600;
box-shadow: none;
}
.vip-tienda-page #js-product-list .up .btn-secondary:hover,
.vip-tienda-page #js-product-list .up .btn-secondary:focus-visible,
#main.vip-tienda #js-product-list .up .btn-secondary:hover,
#main.vip-tienda #js-product-list .up .btn-secondary:focus-visible {
background: rgba(213, 161, 125, 0.12);
border-color: var(--vip-figma-tan);
color: var(--vip-figma-brown);
}
.vip-tienda-page #js-product-list .up .btn-secondary .material-icons,
#main.vip-tienda #js-product-list .up .btn-secondary .material-icons {
font-size: 1.1rem;
line-height: 1;
color: inherit;
}
/* Kill Classic pagination chrome inside Tienda listing. */
.vip-tienda-page #js-product-list > .pagination:not(.vip-tienda-pagination),
#main.vip-tienda #js-product-list > .pagination:not(.vip-tienda-pagination) {
display: none;
}
@media (max-width: 575px) {
.vip-tienda-pagination__link--prev .vip-tienda-pagination__label,
.vip-tienda-pagination__link--next .vip-tienda-pagination__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.vip-tienda-pagination__link--prev,
.vip-tienda-pagination__link--next {
min-width: 2.25rem;
padding-inline: 0.55rem;
}
}
@media (min-width: 768px) {
.vip-tienda-page #js-product-list .vip-tienda-pagination,
#main.vip-tienda #js-product-list .vip-tienda-pagination {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
}
.vip-tienda-pagination__summary {
flex: 1 1 auto;
}
.vip-tienda-pagination__nav {
width: auto;
max-width: 100%;
}
.vip-tienda-pagination__list {
justify-content: flex-end;
}
}
@media (max-width: 1399px) {
#main.vip-tienda #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda-page #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda__products:not(.vip-tienda__products--list) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1199px) {
#main.vip-tienda #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda-page #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda__products:not(.vip-tienda__products--list) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.vip-tienda__hero {
aspect-ratio: 16 / 9;
max-height: none;
}
.vip-tienda__layout {
gap: 1.5rem 0;
}
.vip-tienda__facet-mobile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.45rem;
cursor: pointer;
}
.vip-tienda__facet-mobile .vip-tienda__facet-title {
margin: 0;
}
.vip-tienda__facet-mobile-icon {
width: 0.45rem;
height: 0.45rem;
border-right: 1.5px solid #c8c8c8;
border-bottom: 1.5px solid #c8c8c8;
transform: rotate(45deg);
transition: transform 0.15s ease;
}
.vip-tienda__facet-mobile[aria-expanded="true"] .vip-tienda__facet-mobile-icon {
transform: rotate(-135deg);
}
}
@media (max-width: 575px) {
#main.vip-tienda #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda-page #products .products.vip-tienda__products:not(.vip-tienda__products--list),
.vip-tienda__products:not(.vip-tienda__products--list) {
grid-template-columns: 1fr;
}
}
/* Tienda — mobile filter drawer (Figma TIENDA · sidebar off-canvas) */
.vip-tienda__filter-btn {
border-radius: 8px;
border: 1px solid var(--vip-figma-tan);
background: #fff;
font-size: 12px;
font-weight: 700;
color: var(--vip-figma-brown);
padding: 0.45rem 0.85rem;
}
.vip-tienda__filter-btn:hover,
.vip-tienda__filter-btn:focus-visible {
border-color: var(--vip-figma-brown);
color: var(--vip-figma-brown);
background: #fff;
}
.vip-tienda__filters-close {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid rgba(213, 161, 125, 0.25);
}
.vip-tienda__filters-ok {
border-radius: 8px;
border: 1px solid var(--vip-figma-tan);
font-size: 12px;
font-weight: 700;
color: var(--vip-figma-brown);
}
@media (max-width: 991px) {
body.vip-tienda-page #left-column {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: min(20rem, 88vw);
max-width: 20rem;
height: 100%;
margin: 0;
padding: 1rem 0.85rem 1.25rem;
overflow-y: auto;
background: var(--vip-cream);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
transform: translateX(-105%);
transition: transform 0.22s ease;
visibility: hidden;
}
body.vip-tienda-page.vip-tienda-filters-open #left-column {
transform: translateX(0);
visibility: visible;
}
body.vip-tienda-page.vip-tienda-filters-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 1035;
background: rgba(0, 0, 0, 0.35);
}
body.vip-tienda-page #left-column .vip-tienda__facet-title.hidden-sm-down {
display: block !important;
}
body.vip-tienda-page #left-column .facet .collapse:not(.in) {
display: none;
}
body.vip-tienda-page #left-column .facet .collapse.in {
display: block;
}
}
@media (min-width: 992px) {
body.vip-tienda-page #left-column {
position: static;
transform: none;
visibility: visible;
height: auto;
box-shadow: none;
overflow: visible;
}
.vip-tienda__filters-close {
display: none !important;
}
}
/* FICHA PRODUCTO — Figma `51:2971` · gallery layout: client §4.1 (large + thumbs) */
#product {
background: #fff;
}
#product #wrapper {
background: #fff;
}
#product #footer {
background: #fff;
}
#product #wrapper > .container {
padding-top: 0.5rem;
}
/* Classic product sheet resets (parent theme fights `.vip-product__main` grid). */
#product .product-container.vip-product__main {
display: grid !important;
grid-template-columns: minmax(0, 805fr) minmax(0, 552fr) !important;
gap: 0 !important;
align-items: start;
float: none !important;
width: 100% !important;
max-width: var(--vip-figma-content-width);
margin-inline: auto;
}
#product .product-information.vip-product__buybox,
#product .vip-product__gallery {
float: none !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
#product .images-container.vip-product__images {
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
#product .product-container .product-cover,
#product .product-container .images-container .product-cover {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
#product #content.page-content,
#product .page-content.card,
#product .page-content.card-block {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
#product .product-actions {
margin: 0;
}
#product .product-prices,
#product .vip-product__prices {
margin: 0;
padding: 0;
}
#product .product-price.h5 {
margin: 0;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
#product .product-quantity,
#product .product-add-to-cart .add,
#product .vip-product__purchase-row--primary > *,
#product .vip-product__purchase-stack > * {
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#product .vip-product__purchase-row--primary > .vip-product__qty,
#product .vip-product__purchase-row--primary > .vip-product__add,
#product .vip-product__purchase-row--primary > .add,
#product .vip-product__purchase-row--primary > .wishlist-button,
#product .vip-product__purchase-row--primary > .wishlist-button-add,
#product .vip-product__purchase-row--primary > [data-link-action="add-to-wishlist"],
#product .vip-product__purchase-row--primary > .compare-button,
#product .vip-product__purchase-row--primary > [data-link-action="add-to-compare"],
#product .vip-product__wishlist-slot > * {
width: auto !important;
}
#product .product-add-to-cart .product-quantity.vip-product__purchase-stack,
#product .product-add-to-cart .product-quantity.vip-product__purchase-row {
display: block !important;
width: 100%;
}
#product .vip-product__purchase-row--primary {
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
gap: 0.65rem;
width: 100%;
}
#product .vip-product__qty .bootstrap-touchspin,
#product .product-quantity .bootstrap-touchspin {
display: contents !important;
width: auto !important;
max-width: none !important;
border: none !important;
box-shadow: none !important;
}
#product .bootstrap-touchspin .input-group-btn,
#product .bootstrap-touchspin .input-group-addon,
#product .btn-touchspin,
#product .bootstrap-touchspin-up,
#product .bootstrap-touchspin-down {
display: none !important;
}
#product .vip-product__qty .bootstrap-touchspin-input,
#product .vip-product__qty input.form-control,
#product .vip-product__qty input#quantity_wanted {
background: var(--vip-figma-footer-bg) !important;
border: none !important;
box-shadow: none !important;
color: var(--vip-figma-tan) !important;
text-align: center !important;
}
#product .vip-product__availability:not(.ajax-error),
#product #product-availability:not(.ajax-error) {
display: none !important;
}
#product .vip-product__stock-notice {
margin: 0.75rem 0 0;
font-family: var(--vip-font-body);
font-size: 0.9375rem;
font-weight: 700;
color: var(--vip-figma-brown, #8b5a3c);
text-transform: uppercase;
letter-spacing: 0.03em;
}
#product .vip-product__notify-oos {
margin-top: 0.75rem;
}
#product .vip-product__notify-oos-title {
margin: 0 0 0.25rem;
font-family: var(--vip-font-display);
font-weight: 700;
font-size: 1rem;
color: var(--vip-figma-brown, #7e614a);
}
#product .vip-product__notify-oos-help {
margin: 0 0 0.6rem;
font-size: 0.875rem;
line-height: 1.4;
color: var(--vip-figma-brown-grey, #6b5b52);
}
#product .vip-product__notify-oos .js-mailalert,
#product .vip-product__notify-oos form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
#product .vip-product__notify-oos input[type="email"] {
flex: 1 1 12rem;
min-width: 0;
padding: 0.55rem 0.75rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 6px;
font-size: 0.9375rem;
}
#product .vip-product__notify-oos .btn,
#product .vip-product__notify-oos button {
min-height: 40px;
padding: 0.5rem 1rem;
border-radius: 20px;
background: var(--vip-figma-tan);
color: #fff;
border: 0;
font-weight: 700;
cursor: pointer;
}
#product .vip-product__prices-gate {
margin: 0.5rem 0 1rem;
}
#product .vip-product__prices-gate-msg {
margin: 0 0 0.75rem;
font-size: 0.9375rem;
line-height: 1.45;
color: var(--vip-figma-brown-grey, #6b5b52);
}
#product .product-add-to-cart .ajax-error {
display: block !important;
width: 100%;
margin: 0.75rem 0 0;
padding: 0.65rem 0.85rem;
border: 1px solid rgba(180, 60, 60, 0.25);
border-radius: 4px;
background: #fdecee;
color: #8b2e2e;
font-size: 0.875rem;
line-height: 1.4;
}
#product .vip-product__stock-notice {
display: block;
width: 100%;
margin: 0.75rem 0 0;
padding: 0.65rem 0.85rem;
border: 1px solid rgba(180, 60, 60, 0.25);
border-radius: 4px;
background: #fdecee;
color: #8b2e2e;
font-family: var(--vip-font-body);
font-size: 0.875rem;
line-height: 1.4;
}
#product .product-minimal-quantity {
margin: 0.5rem 0 0;
font-size: 0.8125rem;
color: var(--vip-figma-tan, #b8956a);
}
#product .vip-product__purchase-row.clearfix::before,
#product .vip-product__purchase-row.clearfix::after {
display: none;
}
#product .vip-product__buybox .nav-tabs,
#product .vip-product__accordion.tabs > .nav-tabs {
display: none !important;
}
#product .product-additional-info .social-sharing,
#product .product-additional-info .tabs .social-sharing,
#product #main .social-sharing {
display: none !important;
}
/* FICHA PRODUCTO comp — no mail alert or review CTA in buy box. */
#product .vip-product__buybox .js-mailalert,
#product .vip-product__buybox .product-additional-info,
#product .vip-product__buybox .product-comments-additional-info,
#product .vip-product__buybox .post-product-comment,
#product .vip-product__buybox .link-comment-post-product,
#product .vip-product__buybox .product-comment-additional-info,
#product .vip-product__payments ~ .js-mailalert,
#product .vip-product__payments ~ .product-additional-info,
#product .vip-product__payments ~ .product-comments-additional-info,
#product .vip-product__payments ~ [class*="mailalert"],
#product .vip-product__payments ~ [class*="product-comment"] {
display: none !important;
}
/* FICHA PRODUCTO comp — no product reviews block on product sheet. */
#product #product-comments-list-header,
#product #product-comments-list,
#product #product-comments-list-footer,
#product .product-comment-list-item,
#product .product-comments,
#product .product-comment-container,
#product .comments-note,
#product .post-product-comment,
#product .link-comment-post-product,
#product .product-comment-additional-info,
#product .product-comments-additional-info,
#product #empty-product-comment,
#product [id^="product-comment"] {
display: none !important;
}
#product .vip-product__buybox .btn-primary.vip-product__add-btn,
#product .vip-product__buybox .vip-product__add-btn {
background: var(--vip-figma-tan) !important;
border: none !important;
box-shadow: none !important;
color: #fff !important;
text-transform: none !important;
}
#product .vip-product__buybox .btn-primary.vip-product__add-btn:hover,
#product .vip-product__buybox .btn-primary.vip-product__add-btn:focus,
#product .vip-product__buybox .vip-product__add-btn:hover,
#product .vip-product__buybox .vip-product__add-btn:focus {
background: #c8926a !important;
color: #fff !important;
}
#product .vip-product__buybox .btn-primary.vip-product__add-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Breadcrumb moved into `.vip-product__breadcrumb` (Figma Nav). */
#product #wrapper > .container > nav.breadcrumb {
display: none;
}
#product .breadcrumb {
margin: 0;
padding: 0;
background: transparent;
}
#product .breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
font-size: 11px;
line-height: 22.5px;
}
/* Classic `#wrapper .breadcrumb li::after` already inserts "/"; do not duplicate with ::before. */
#product .breadcrumb li + li::before {
content: none;
}
#product .breadcrumb li::after {
margin: 0 0.35rem;
color: #2e2323;
}
#product .breadcrumb a {
color: #a9a9a9;
text-decoration: none;
}
#product .breadcrumb li:last-child span {
color: var(--vip-figma-tan);
}
.vip-product {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-text);
}
.vip-product__breadcrumb {
margin-bottom: 1.25rem;
}
.vip-product__main {
display: grid;
grid-template-columns: minmax(0, 805fr) minmax(0, 552fr);
gap: 0;
align-items: start;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.vip-product__buybox {
padding-top: 2.5rem;
}
.vip-product__gallery .page-content,
.vip-product__gallery #content {
padding: 0;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
}
.vip-product__images {
display: block;
}
/* Client §4.1 — large cover + smaller thumbs beside (replaces Figma 2×2 grid). */
.vip-product__gallery-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 5.75rem;
gap: 0.85rem;
align-items: stretch;
}
.vip-product__gallery-layout--solo {
grid-template-columns: minmax(0, 1fr);
}
.vip-product__gallery-main {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 12px;
background: #f8f8f8;
min-width: 0;
}
.vip-product__gallery-main .product-cover {
margin: 0;
height: 100%;
}
.vip-product__gallery-main .product-cover img,
.vip-product__gallery-main .js-qv-product-cover {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
object-fit: cover;
aspect-ratio: 805 / 959;
}
@media (hover: hover) and (pointer: fine) {
.vip-product__gallery-main .product-cover img,
.vip-product__gallery-main .js-qv-product-cover {
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.vip-product__gallery-main:hover .product-cover img,
.vip-product__gallery-main:hover .js-qv-product-cover {
transform: scale(1.03);
}
}
.vip-product__gallery-main .product-flags {
position: absolute;
top: 0.85rem;
left: 0.85rem;
right: 0.85rem;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.vip-product__gallery-main .product-flag {
display: inline-flex;
align-items: center;
min-height: 1.35rem;
padding: 0.15rem 0.55rem;
border-radius: 2px;
background: #e8ddd4;
color: #7e614a;
font-family: var(--vip-font-body);
font-size: 11px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vip-product__gallery-main .vip-product-flag--sale {
display: inline-flex;
align-items: center;
justify-content: center;
order: -1;
width: 42px;
min-width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
border-radius: 50%;
background: var(--vip-figma-tan) !important;
color: #fff;
font-size: 18px;
line-height: 1;
}
.vip-product__gallery-main .product-flag.out_of_stock,
.vip-product__gallery-main .product-flag.unavailable {
order: 10;
margin-left: auto;
text-align: right;
}
@media (max-width: 420px) {
.vip-product__gallery-main .product-flag:not(.vip-product-flag--sale) {
max-width: calc(100% - 52px);
white-space: normal;
}
}
.vip-product__gallery-thumbs {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
}
.vip-product__gallery-thumb {
position: relative;
flex: 0 0 auto;
margin: 0;
overflow: hidden;
border-radius: 8px;
background: #f8f8f8;
}
.vip-product__gallery-thumb .thumb,
.vip-product__gallery-thumb .js-thumb {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
object-fit: cover;
aspect-ratio: 1 / 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.vip-product__gallery-thumb .thumb,
.vip-product__gallery-thumb .js-thumb {
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.vip-product__gallery-thumb:hover .thumb,
.vip-product__gallery-thumb:hover .js-thumb {
transform: scale(1.06);
}
}
.vip-product__gallery-thumb .thumb.selected,
.vip-product__gallery-thumb .js-thumb-selected {
outline: 2px solid var(--vip-figma-tan);
outline-offset: -2px;
}
.vip-product__gallery-expand {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 4px;
background: rgba(255, 255, 255, 0.92);
color: var(--vip-figma-tan);
cursor: pointer;
}
.vip-product__gallery-expand-icon {
display: block;
width: 0.95rem;
height: 0.95rem;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D5A17D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}
.vip-product__gallery-main .layer,
.vip-product__gallery-thumb .layer {
display: none;
}
.vip-product__title {
margin: 0 0 0.85rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 38px;
line-height: 45.6px;
color: var(--vip-figma-brown, #7e614a);
}
.vip-product__short-desc,
.vip-product__short-desc p {
margin: 0 0 1.35rem;
max-width: none;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-style: italic;
font-weight: 400;
color: #878787;
}
#product .vip-product__short-desc ul,
#product .vip-product__short-desc ol {
margin: 0.2rem 0 1.1rem;
padding-left: 1.15em;
}
#product .vip-product__short-desc li {
margin: 0 0 0.35rem;
padding: 0;
display: list-item;
list-style: disc outside;
}
#product .vip-product__short-desc li > p,
#product .vip-product__short-desc li > div {
display: inline;
margin: 0;
}
#product .vip-product__short-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
#product .vip-product__short-desc-wrap.is-expanded .vip-product__short-desc {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
#product .vip-product__short-desc-toggle {
display: inline-block;
margin: -0.85rem 0 1.25rem;
padding: 0;
border: 0;
background: transparent;
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.3;
color: var(--vip-figma-tan, #d5a17d);
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
#product .vip-product__short-desc-toggle[hidden] {
display: none;
}
#product .vip-product__short-desc hr,
#product .vip-product__short-desc img {
display: none;
}
#product .vip-product__short-desc strong,
#product .vip-product__short-desc b {
font-weight: 400;
}
.vip-product .product-prices {
margin: 0;
}
.vip-product__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin: 0.25rem 0 1.15rem;
}
.vip-product__price-row .product-prices,
.vip-product__price-row .vip-product__prices {
flex: 0 1 auto;
margin-right: 0;
}
.vip-product__favorites {
flex: 0 0 auto;
margin: 0 0 0 auto;
padding: 0;
border: none;
background: transparent;
color: var(--vip-figma-tan);
font-family: var(--vip-font-display);
font-size: 28px;
line-height: 28px;
font-style: italic;
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
.vip-product__favorites:hover,
.vip-product__favorites:focus {
color: var(--vip-figma-brown);
}
#product .product-prices .tax-shipping-delivery-label,
#product .product-prices .product-unit-price,
#product .product-prices .product-without-taxes,
#product .product-prices .product-pack-price,
#product .product-prices .price-ecotax,
#product .product-prices .discount {
display: none;
}
#product .product-minimal-quantity:not(:empty),
#product #product-availability:not(:empty):not(.ajax-error) {
display: block;
}
.vip-product .product-price.h5 {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.vip-product .current-price,
.vip-product .current-price-value {
font-family: var(--vip-font-body);
font-weight: 800;
font-size: 28px;
line-height: 28px;
color: var(--vip-figma-tan);
}
.vip-product .regular-price {
font-size: 15px;
line-height: 22.5px;
color: #878787;
}
.vip-product .product-variants .control-label,
.vip-product .vip-product__purchase .control-label {
display: block;
margin: 0 0 0.35rem;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan);
}
.vip-product .product-variants {
margin-bottom: 1.15rem;
}
.vip-product__variant {
margin-bottom: 1rem;
}
.vip-product__variant-select {
width: auto;
min-width: 4.75rem;
max-width: 100%;
min-height: 40px;
padding: 0.45rem 2rem 0.45rem 0.75rem;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D5A17D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
appearance: none;
color: #878787;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
.vip-product .product-variants ul[id^="group_"],
.vip-product .product-variants .vip-product__variant-colors {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.vip-product .product-variants .input-container {
margin: 0;
float: none;
}
.vip-product .product-variants .input-container label {
position: relative;
display: inline-block;
margin: 0;
cursor: pointer;
}
.vip-product .product-variants .input-color + span.color,
.vip-product .product-variants .input-color + span.color.texture {
display: block;
width: 2rem;
height: 2rem;
margin: 0;
border: 1px solid rgba(213, 161, 125, 0.35);
border-radius: 4px;
box-shadow: none;
}
.vip-product .product-variants .input-color:checked + span.color,
.vip-product .product-variants .input-color:focus + span.color {
outline: 2px solid var(--vip-figma-tan);
outline-offset: 2px;
}
.vip-product .product-variants .input-color {
position: absolute;
opacity: 0;
}
.vip-product .product-variants .input-radio + .radio-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2rem;
padding: 0.25rem 0.65rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 4px;
background: #fff;
color: #878787;
font-size: var(--vip-figma-parrafo-size);
line-height: 1.2;
}
.vip-product .product-variants .input-radio {
position: absolute;
opacity: 0;
}
.vip-product .product-variants .input-radio:checked + .radio-label {
border-color: var(--vip-figma-tan);
color: var(--vip-figma-tan);
font-weight: 700;
}
.vip-product .product-variants .input-container label {
position: relative;
display: inline-block;
margin: 0;
cursor: pointer;
}
.vip-product__purchase-stack {
width: 100%;
}
.vip-product__purchase-row {
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
gap: 0.65rem;
margin-top: 0;
width: 100%;
}
.vip-product__wishlist-slot {
display: flex;
flex: 0 0 auto;
align-items: stretch;
}
.vip-product__wishlist-slot:empty {
display: none;
}
.vip-product__express-checkout {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(126, 97, 74, 0.12);
}
.vip-product__express-checkout--empty,
.vip-product__express-checkout[hidden] {
display: none !important;
margin: 0;
padding: 0;
border: 0;
}
.vip-product__hook-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
width: 100%;
}
.vip-product__express-checkout [data-pp-message],
.vip-product__express-checkout .pp-message {
margin: 0;
font-family: var(--vip-font-body);
font-size: 0.8125rem;
line-height: 1.45;
color: #878787;
}
.vip-product__express-checkout .paypal-buttons,
.vip-product__express-checkout [class*="paypal-button"],
.vip-product__express-checkout [class*="ppcp-button"],
.vip-product__express-checkout [id*="paypal-button"] {
width: 100% !important;
max-width: 100% !important;
}
.vip-product__qty {
display: inline-flex;
align-items: stretch;
flex: 0 0 auto;
width: 4.85rem;
min-width: 4.85rem;
min-height: 52px;
max-height: 52px;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: var(--vip-figma-footer-bg);
overflow: hidden;
}
#product .vip-product__qty,
#product .vip-product__qty-input,
#product .vip-product__qty-arrow {
background-color: var(--vip-figma-footer-bg) !important;
}
.vip-product__qty-input {
flex: 1 1 auto;
width: 2.75rem;
min-width: 0;
min-height: 52px;
padding: 0.35rem 0.25rem;
border: none;
border-radius: 0;
background: var(--vip-figma-footer-bg);
font-family: var(--vip-font-body);
font-size: 15px;
line-height: 18px;
font-weight: 400;
color: var(--vip-figma-tan);
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
#product .vip-product__qty-input {
color: var(--vip-figma-tan) !important;
-webkit-text-fill-color: var(--vip-figma-tan);
}
.vip-product__qty-arrows {
display: flex;
flex-direction: column;
flex: 0 0 1.45rem;
border-left: 1px solid #e8e8e8;
}
.vip-product__qty-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 50%;
width: 100%;
padding: 0;
border: none;
background: var(--vip-figma-footer-bg);
cursor: pointer;
}
.vip-product__qty-arrow:focus,
.vip-product__qty-arrow:focus-visible,
.vip-product__qty-arrow:active {
outline: none !important;
box-shadow: none !important;
}
.vip-product__qty-arrow + .vip-product__qty-arrow {
border-top: 1px solid #e8e8e8;
}
.vip-product__qty-arrow::before {
content: "";
display: block;
width: 5px;
height: 5px;
border: none;
border-left: 0;
border-right: 0;
border-top: 0;
border-bottom: 0;
}
.vip-product__qty-arrow[data-vip-qty-plus]::before {
border-left: 1.5px solid var(--vip-figma-tan);
border-top: 1.5px solid var(--vip-figma-tan);
transform: rotate(45deg);
margin-top: 2px;
}
.vip-product__qty-arrow[data-vip-qty-minus]::before {
border-right: 1.5px solid var(--vip-figma-tan);
border-bottom: 1.5px solid var(--vip-figma-tan);
transform: rotate(45deg);
margin-bottom: 2px;
}
.vip-product__qty-input::-webkit-outer-spin-button,
.vip-product__qty-input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.vip-product__add {
flex: 1 1 12rem;
min-width: 0;
order: 2;
}
.vip-product__add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
min-width: 0;
min-height: 52px;
padding: 0.65rem 1.25rem;
border: none;
border-radius: 4px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 400;
letter-spacing: 0;
text-transform: none !important;
white-space: nowrap;
}
.vip-product__add-btn-icon {
display: block;
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.vip-product__add-btn:hover,
.vip-product__add-btn:focus {
background: #c8926a;
color: #fff;
}
.vip-product__secondary-actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.65rem;
}
.vip-product__icon-btn,
.vip-product__secondary-actions .wishlist-button,
.vip-product__secondary-actions .wishlist-button-add,
.vip-product__secondary-actions [data-link-action="add-to-wishlist"],
.vip-product__wishlist-slot .wishlist-button,
.vip-product__wishlist-slot .wishlist-button-add,
.vip-product__wishlist-slot [data-link-action="add-to-wishlist"],
.vip-product__secondary-actions .compare-button,
.vip-product__secondary-actions [data-link-action="add-to-compare"],
.vip-product__wishlist-slot .compare-button,
.vip-product__wishlist-slot [data-link-action="add-to-compare"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 52px;
padding: 0;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: var(--vip-figma-footer-bg);
color: var(--vip-figma-tan);
cursor: pointer;
}
#product .vip-product__wishlist-slot .wishlist-button,
#product .vip-product__wishlist-slot .wishlist-button-add,
#product .vip-product__wishlist-slot [data-link-action="add-to-wishlist"],
#product .vip-product__purchase-row .wishlist-button,
#product .vip-product__purchase-row .wishlist-button-add,
#product .vip-product__purchase-row [data-link-action="add-to-wishlist"],
#product .vip-product__purchase-row .compare-button,
#product .vip-product__purchase-row [data-link-action="add-to-compare"] {
flex: 0 0 auto;
}
.vip-product__icon-btn-glyph {
display: block;
width: 1.15rem;
height: 1.15rem;
background: center / contain no-repeat;
}
.vip-product__icon-btn-glyph--heart {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D5A17D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}
.vip-product__secondary-actions .material-icons {
font-size: 1.35rem;
line-height: 1;
}
.vip-product__icon-btn-glyph--compare {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D5A17D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M4 20L21 3'/%3E%3Cpath d='M21 16v5h-5'/%3E%3Cpath d='M4 4l5 5'/%3E%3C/svg%3E");
}
#product .vip-product__secondary-actions .wishlist-button,
#product .vip-product__wishlist-slot .wishlist-button {
margin: 0;
}
#product .vip-product__secondary-actions .wishlist-button-add,
#product .vip-product__secondary-actions [data-link-action="add-to-wishlist"],
#product .vip-product__wishlist-slot .wishlist-button-add,
#product .vip-product__wishlist-slot [data-link-action="add-to-wishlist"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 52px;
margin: 0 !important;
padding: 0;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: var(--vip-figma-footer-bg);
box-shadow: none;
cursor: pointer;
}
#product .vip-product__secondary-actions .wishlist-button-add:hover,
#product .vip-product__secondary-actions .wishlist-button-add:focus,
#product .vip-product__wishlist-slot .wishlist-button-add:hover,
#product .vip-product__wishlist-slot .wishlist-button-add:focus {
opacity: 0.85;
}
@media (hover: hover) and (pointer: fine) {
#product .vip-product__wishlist-slot {
opacity: 1;
visibility: visible;
transform: none;
}
}
#product .vip-product__secondary-actions .wishlist-button-add .material-icons,
#product .vip-product__wishlist-slot .wishlist-button-add .material-icons {
font-size: 1.35rem;
line-height: 1;
color: var(--vip-figma-tan);
}
#product .vip-product__secondary-actions .compare-button,
#product .vip-product__secondary-actions [data-link-action="add-to-compare"],
#product .vip-product__wishlist-slot .compare-button,
#product .vip-product__wishlist-slot [data-link-action="add-to-compare"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 52px;
margin: 0;
padding: 0;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: var(--vip-figma-footer-bg);
color: var(--vip-figma-tan);
cursor: pointer;
}
.vip-product__payments {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
margin: 1.35rem 0 0;
padding: 1.1rem 0 0;
padding-left: 0;
border-top: 1px solid rgba(126, 97, 74, 0.12);
list-style: none;
}
.vip-product__payments-item {
display: block;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
/* SVG assets already include the white card + border (54×37). */
.vip-product__payments-item img {
display: block;
width: 54px;
height: 37px;
max-width: none;
object-fit: contain;
}
.vip-product__accordion {
margin-top: 1.75rem;
border-top: 1px solid rgba(126, 97, 74, 0.12);
}
.vip-product__accordion-item {
border-bottom: 1px solid rgba(126, 97, 74, 0.12);
}
.vip-product__accordion-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 20px;
line-height: 22.5px;
color: var(--vip-figma-tan);
cursor: pointer;
list-style: none;
}
.vip-product__accordion-head::-webkit-details-marker {
display: none;
}
.vip-product__accordion-head::after {
content: "";
width: 0.45rem;
height: 0.45rem;
border-right: 1.5px solid var(--vip-figma-tan);
border-bottom: 1.5px solid var(--vip-figma-tan);
transform: rotate(45deg);
transition: transform 0.15s ease;
}
.vip-product__accordion-item[open] .vip-product__accordion-head::after {
transform: rotate(-135deg);
}
.vip-product__accordion-panel {
padding: 0 0 1rem;
color: #878787;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-style: italic;
}
/* Accordion uses native , not Bootstrap tabs — never inherit .fade opacity. */
#product .vip-product__accordion-panel .js-product-details,
#product .vip-product__accordion-panel .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.vip-product__accordion-panel .product-description,
.vip-product__accordion-panel .product-description p,
.vip-product__accordion-panel .product-manufacturer-description,
.vip-product__accordion-panel .product-manufacturer-description p {
font-style: italic;
}
.vip-product__accordion-panel .product-description p {
margin-bottom: 0.75rem;
}
/* Product details — data sheet / specific references (Classic cells are not centered). */
#product .product-features > dl.data-sheet {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.5rem 0.625rem;
margin: 0;
}
#product .product-features > dl.data-sheet dt.name,
#product .product-features > dl.data-sheet dd.value {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 calc(50% - 0.625rem);
min-width: 0;
min-height: 2.5rem;
}
#product .vip-product__docs {
margin-top: 1.35rem;
padding-top: 1.15rem;
border-top: 1px solid rgba(126, 97, 74, 0.14);
}
#product .vip-product__docs-title {
margin: 0 0 0.85rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 18px;
line-height: 1.2;
color: var(--vip-figma-tan);
font-style: normal;
}
#product .vip-product__docs-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
#product .vip-product__docs-link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
color: #2e2323;
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
font-style: normal;
}
#product .vip-product__docs-link:hover,
#product .vip-product__docs-link:focus-visible {
border-color: var(--vip-figma-tan);
background: #fff;
transform: translateY(-1px);
outline: none;
}
#product .vip-product__docs-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 10px;
background: rgba(213, 161, 125, 0.16);
color: var(--vip-figma-tan);
}
#product .vip-product__docs-copy {
display: grid;
gap: 0.15rem;
min-width: 0;
}
#product .vip-product__docs-label {
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 15px;
line-height: 1.25;
color: #2e2323;
}
#product .vip-product__docs-desc,
#product .vip-product__docs-size {
font-size: 13px;
line-height: 1.35;
color: #878787;
}
#product .vip-product__docs-action {
flex-shrink: 0;
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vip-figma-tan);
}
#product .product-features > dl.data-sheet dt.name,
#product .product-features > dl.data-sheet dd.value {
margin: 0;
padding: 0.625rem 0.75rem;
background: #f6f6f6;
font-weight: 500;
text-transform: capitalize;
text-align: center;
word-break: break-word;
box-sizing: border-box;
}
#product .product-features > .h6 {
flex: 1 1 100%;
width: 100%;
margin: 0 0 0.65rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 1rem;
line-height: 1.35;
color: var(--vip-figma-brown-grey, #6b5b52);
font-style: italic;
text-transform: none;
}
#product .product-features > dl.data-sheet dt.name:nth-of-type(even),
#product .product-features > dl.data-sheet dd.value:nth-of-type(even) {
background: #f6f6f6;
}
/* Client §4.2 — long description under gallery/buybox, multi-column to shorten page. */
.vip-product__long-desc {
width: 100%;
max-width: var(--vip-figma-content-width);
margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
border-top: 1px solid rgba(126, 97, 74, 0.12);
}
.vip-product__long-desc-title {
margin: 0 0 1rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 20px;
line-height: 22.5px;
color: var(--vip-figma-tan);
}
.vip-product__long-desc-body,
.vip-product__long-desc-body.product-description {
margin: 0;
color: #878787;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-style: italic;
font-weight: 400;
column-count: 2;
column-gap: clamp(1.5rem, 3vw, 2.75rem);
column-fill: balance;
}
.vip-product__long-desc-body p {
margin: 0 0 0.85rem;
break-inside: avoid;
}
.vip-product__long-desc-body p:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.vip-product__long-desc-body,
.vip-product__long-desc-body.product-description {
column-count: 1;
}
}
#product #main.vip-product {
width: 100%;
max-width: none;
}
/* Related band — same white canvas as FICHA comp (page bg is #fff on #product). */
.vip-product__related {
width: 100%;
max-width: var(--vip-figma-content-width);
margin-top: clamp(1.75rem, 3.5vw, 3rem);
margin-inline: auto;
margin-bottom: 0;
padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.vip-product__related + .vip-product__related {
margin-top: 0;
padding-top: clamp(1.25rem, 2.5vw, 2rem);
border-top: 1px solid rgba(126, 97, 74, 0.08);
}
.vip-product__related-inner {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.vip-product__related-title {
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(1.75rem, 2.4vw, 37px);
line-height: 1.05;
color: var(--vip-figma-tan);
}
#product .vip-product__related .vip-product-related-carousel {
--vip-related-gap: clamp(0.85rem, 1.6vw, 1.35rem);
--vip-related-slide-width: 240px;
--vip-related-visible: 4;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1.25rem, 2.75vw, 2.25rem);
margin: 0;
width: 100%;
min-width: 0;
}
#product .vip-product-related-carousel__viewport {
width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
#product .vip-product-related-carousel__viewport::-webkit-scrollbar {
display: none;
}
#product .vip-product-related-carousel__viewport > .vip-product-related-carousel__list {
display: flex;
gap: var(--vip-related-gap);
margin: 0;
padding: 0;
width: max-content;
min-width: 100%;
list-style: none;
}
#product .vip-product-related-carousel__item {
flex: 0 0 var(--vip-related-slide-width);
width: var(--vip-related-slide-width);
max-width: var(--vip-related-slide-width);
min-width: 0;
box-sizing: border-box;
overflow: hidden;
scroll-snap-align: start;
}
#product .vip-product-related-carousel__item .vip-product-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100%;
gap: 0.5rem;
overflow: hidden;
box-sizing: border-box;
}
#product .vip-product-related-carousel__item .vip-product-card__name,
#product .vip-product-related-carousel__item .vip-product-card__name a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#product .vip-product-related-carousel .vip-product-card__thumb {
aspect-ratio: 1 / 1;
border-radius: 12px;
}
#product .vip-product-related-carousel .vip-product-card__thumb img {
object-fit: contain;
padding: 0.25rem;
}
#product .vip-product-related-carousel__nav {
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: opacity 0.15s ease;
}
#product .vip-product-related-carousel__nav:hover:not(:disabled),
#product .vip-product-related-carousel__nav:focus:not(:disabled),
#product .vip-product-related-carousel__nav:focus-visible:not(:disabled) {
background: transparent;
opacity: 0.75;
outline: none !important;
box-shadow: none !important;
}
#product .vip-product-related-carousel__nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
#product .vip-product-related-carousel__arrow {
display: block;
width: 40px !important;
height: 40px !important;
min-width: 40px;
min-height: 40px;
max-width: none !important;
flex-shrink: 0;
object-fit: contain;
}
#product .vip-product__related.product-accessories .products,
#product .vip-product__related .vip-home-product-grid {
display: grid !important;
float: none !important;
width: 100% !important;
}
#product .vip-product__related .product-miniature,
#product .vip-product__related .js-product,
#product .vip-product__related .vip-product-card {
float: none !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
#product .vip-product__related.product-accessories {
float: none;
width: 100%;
}
/* FICHA comp: native PS footer modules must not appear (see product.tpl — no displayFooterProduct hook). */
#product .featured-products,
#product #product-comments-list-header,
#product #empty-product-comment,
#product #product-comments-list,
#product #product-comments-list-footer {
display: none !important;
}
@media (max-width: 991px) {
#product .product-container.vip-product__main,
.vip-product__main {
grid-template-columns: minmax(0, 1fr) !important;
gap: 1.5rem !important;
}
.vip-product__buybox {
padding-top: 0;
}
.vip-product__title {
font-size: clamp(1.75rem, 5vw, 38px);
line-height: 1.15;
}
#product .vip-product-related-carousel {
gap: 1rem;
}
}
@media (max-width: 575px) {
.vip-product__gallery-layout {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.vip-product__gallery-thumbs {
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.15rem;
}
.vip-product__gallery-thumb {
flex: 0 0 4.75rem;
width: 4.75rem;
}
.vip-product__related {
padding-inline: var(--vip-shell-gutter);
}
.vip-product__related-title {
font-size: clamp(1.5rem, 6vw, 37px);
line-height: 1.2;
}
}
/* --------------------------------------------------------------------------
* Figma REGISTRO (`51:4630`) — account forms (#registration, #authentication)
* Spec: designs/FIGMA-registration-specs.md
* -------------------------------------------------------------------------- */
#registration #main,
#authentication #main {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-text);
}
#registration .breadcrumb,
#authentication .breadcrumb,
body.page-customer-account .breadcrumb
{
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-size: 12px;
line-height: 14.4px;
}
#registration .breadcrumb a,
#authentication .breadcrumb a,
body.page-customer-account .breadcrumb a
{
color: #878787;
text-decoration: none;
}
#registration .breadcrumb li:last-child span,
#authentication .breadcrumb li:last-child span,
body.page-customer-account .breadcrumb li:last-child span
{
color: var(--vip-figma-tan);
}
#registration #main .page-content,
#authentication #main .page-content,
body.page-customer-account #main .page-content
{
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.vip-account__header {
margin: 0 0 1.5rem;
}
.vip-account__title {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 37px;
line-height: 36px;
color: var(--vip-figma-brown);
text-align: left;
}
.vip-account__card {
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
padding: clamp(1.35rem, 2.5vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
}
.vip-account__signin {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin: 0 0 1.75rem;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
}
.vip-account__signin-icon {
display: block;
width: 15px;
height: 15px;
flex-shrink: 0;
margin-top: 0.2rem;
}
.vip-account__signin-link {
color: var(--vip-figma-tan);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.vip-account__signin-link:hover,
.vip-account__signin-link:focus {
color: var(--vip-figma-tan);
}
#registration .vip-account__fields,
body.page-customer-account .vip-account__fields
{
display: flex;
flex-direction: column;
gap: 1.35rem;
}
#registration .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal),
body.page-customer-account .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal)
{
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: start;
}
#authentication .vip-account__fields,
body.page-customer-account .vip-account__fields
{
display: flex;
flex-direction: column;
gap: 1.35rem;
}
#authentication .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal),
body.page-customer-account .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal)
{
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: start;
}
#authentication .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"],
body.page-customer-account .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"]
{
flex: none;
width: auto;
max-width: none;
padding: 0;
margin: 0;
}
#registration .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"],
body.page-customer-account .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"]
{
flex: none;
width: auto;
max-width: none;
padding: 0;
margin: 0;
}
#registration .vip-account__field,
#authentication .vip-account__field,
body.page-customer-account .vip-account__field
{
margin: 0;
align-items: flex-start;
}
#registration .vip-account__field .vip-account__label,
#authentication .vip-account__field .vip-account__label,
body.page-customer-account .vip-account__field .vip-account__label
{
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-weight: 400;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
text-align: left;
}
#registration .vip-account__field .form-control,
#registration .vip-account__field .vip-account__input,
#authentication .vip-account__field .form-control,
#authentication .vip-account__field .vip-account__input,
body.page-customer-account .vip-account__field .form-control,
body.page-customer-account .vip-account__field .vip-account__input
{
min-height: 44px;
border: none;
border-radius: 22px;
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
caret-color: #fff;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
padding: 0.55rem 1.15rem;
box-shadow: none;
}
#registration .vip-account__field .form-control:focus,
#registration .vip-account__field .vip-account__input:focus,
#authentication .vip-account__field .form-control:focus,
#authentication .vip-account__field .vip-account__input:focus,
body.page-customer-account .vip-account__field .form-control:focus,
body.page-customer-account .vip-account__field .vip-account__input:focus
{
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
box-shadow: 0 0 0 2px rgba(126, 97, 74, 0.35);
}
#registration .vip-account__field .form-control:-webkit-autofill,
#registration .vip-account__field .form-control:-webkit-autofill:hover,
#registration .vip-account__field .form-control:-webkit-autofill:focus,
#registration .vip-account__field .vip-account__input:-webkit-autofill,
#registration .vip-account__field .vip-account__input:-webkit-autofill:hover,
#registration .vip-account__field .vip-account__input:-webkit-autofill:focus,
#authentication .vip-account__field .form-control:-webkit-autofill,
#authentication .vip-account__field .form-control:-webkit-autofill:hover,
#authentication .vip-account__field .form-control:-webkit-autofill:focus,
#authentication .vip-account__field .vip-account__input:-webkit-autofill,
#authentication .vip-account__field .vip-account__input:-webkit-autofill:hover,
#authentication .vip-account__field .vip-account__input:-webkit-autofill:focus,
body.page-customer-account .vip-account__field .form-control:-webkit-autofill,
body.page-customer-account .vip-account__field .form-control:-webkit-autofill:hover,
body.page-customer-account .vip-account__field .form-control:-webkit-autofill:focus,
body.page-customer-account .vip-account__field .vip-account__input:-webkit-autofill,
body.page-customer-account .vip-account__field .vip-account__input:-webkit-autofill:hover,
body.page-customer-account .vip-account__field .vip-account__input:-webkit-autofill:focus
{
-webkit-text-fill-color: #fff;
caret-color: #fff;
box-shadow: 0 0 0 1000px var(--vip-figma-tan) inset;
transition: background-color 99999s ease-out 0s;
}
#registration .vip-account__field .form-control::placeholder,
#registration .vip-account__field .vip-account__input::placeholder,
#authentication .vip-account__field .form-control::placeholder,
#authentication .vip-account__field .vip-account__input::placeholder,
body.page-customer-account .vip-account__field .form-control::placeholder,
body.page-customer-account .vip-account__field .vip-account__input::placeholder
{
color: #fff;
opacity: 1;
}
#registration .vip-account__field select.form-control,
#authentication .vip-account__field select.form-control,
body.page-customer-account .vip-account__field select.form-control
{
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.25rem;
}
#registration .vip-account__field--birthday .js-parent-focus,
#authentication .vip-account__field--birthday .js-parent-focus,
body.page-customer-account .vip-account__field--birthday .js-parent-focus
{
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
#registration .vip-account__field--birthday select.form-control,
#authentication .vip-account__field--birthday select.form-control,
body.page-customer-account .vip-account__field--birthday select.form-control
{
flex: 1 1 5.5rem;
min-width: 0;
}
#registration .vip-account__field .vip-account__control > .form-control-comment,
#registration .vip-account__field .vip-account__control > .vip-account__hint,
#authentication .vip-account__field .vip-account__control > .form-control-comment,
#authentication .vip-account__field .vip-account__control > .vip-account__hint,
body.page-customer-account .vip-account__field .vip-account__control > .form-control-comment,
body.page-customer-account .vip-account__field .vip-account__control > .vip-account__hint
{
display: block;
margin-top: 0.35rem;
font-size: 12px;
line-height: 1.45;
font-style: italic;
font-weight: 400;
color: #878787;
}
#registration .vip-account__optional,
#authentication .vip-account__optional,
body.page-customer-account .vip-account__optional
{
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-size: 12px;
line-height: 22.5px;
color: #878787;
text-align: right;
}
#registration .vip-account__password-row,
#authentication .vip-account__password-row,
body.page-customer-account .vip-account__password-row
{
display: flex;
align-items: stretch;
gap: 0.5rem;
width: 100%;
}
#registration .vip-account__password-row .vip-account__input,
#authentication .vip-account__password-row .vip-account__input,
body.page-customer-account .vip-account__password-row .vip-account__input
{
flex: 1 1 auto;
width: auto;
min-width: 0;
}
#registration .vip-account__password-toggle,
#authentication .vip-account__password-toggle,
body.page-customer-account .vip-account__password-toggle
{
position: static;
transform: none;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 10px;
background: #fff;
color: #878787;
box-shadow: none;
font-size: 0;
line-height: 0;
pointer-events: auto;
overflow: hidden;
}
#registration .vip-account__password-toggle-label,
#authentication .vip-account__password-toggle-label,
body.page-customer-account .vip-account__password-toggle-label
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#registration .vip-account__password-toggle::before,
#authentication .vip-account__password-toggle::before,
body.page-customer-account .vip-account__password-toggle::before
{
content: "";
display: block;
width: 20px;
height: 20px;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
#registration .vip-account__password-row:has(.js-visible-password[type="text"]) .vip-account__password-toggle::before,
#authentication .vip-account__password-row:has(.js-visible-password[type="text"]) .vip-account__password-toggle::before,
body.page-customer-account .vip-account__password-row:has(.js-visible-password[type="text"]) .vip-account__password-toggle::before
{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3C/svg%3E");
}
#registration .vip-account__customer-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#registration .vip-account__customer-form select.form-control,
body.page-customer-account .vip-account__customer-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.page-customer-account .vip-account__customer-form select.form-control,
#authentication .vip-account__login-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#authentication .vip-account__login-form select.form-control,
body.page-customer-account .vip-account__login-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.page-customer-account .vip-account__login-form select.form-control
{
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
#registration .vip-account__optional,
body.page-customer-account .vip-account__optional
{
font-style: normal;
}
#registration .field-password-policy .password-strength-feedback,
#registration .vip-account__password-wrap .password-strength-feedback,
body.page-customer-account .field-password-policy .password-strength-feedback,
body.page-customer-account .vip-account__password-wrap .password-strength-feedback
{
display: none !important;
}
#registration .vip-account__field--checkbox,
#authentication .vip-account__field--checkbox,
#registration .vip-account__field--legal,
#authentication .vip-account__field--legal,
body.page-customer-account .vip-account__field--checkbox,
body.page-customer-account .vip-account__field--legal
{
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: center;
margin-top: 0;
}
#registration .vip-account__field--checkbox,
body.page-customer-account .vip-account__field--checkbox
{
margin-bottom: -0.9rem;
}
#registration .vip-account__field--legal,
body.page-customer-account .vip-account__field--legal
{
margin-bottom: 0;
}
#registration .vip-account__field--checkbox .vip-account__label,
#authentication .vip-account__field--checkbox .vip-account__label,
#registration .vip-account__field--legal .vip-account__label,
#authentication .vip-account__field--legal .vip-account__label,
body.page-customer-account .vip-account__field--checkbox .vip-account__label,
body.page-customer-account .vip-account__field--legal .vip-account__label
{
display: none;
}
#registration .vip-account__field--checkbox .vip-account__control,
#authentication .vip-account__field--checkbox .vip-account__control,
#registration .vip-account__field--legal .vip-account__control,
#authentication .vip-account__field--legal .vip-account__control,
body.page-customer-account .vip-account__field--checkbox .vip-account__control,
body.page-customer-account .vip-account__field--legal .vip-account__control
{
grid-column: 2;
flex: none;
width: auto;
max-width: none;
padding: 0;
}
#registration .vip-account__field--checkbox .custom-checkbox,
#authentication .vip-account__field--checkbox .custom-checkbox,
#registration .vip-account__field--legal .custom-checkbox,
#authentication .vip-account__field--legal .custom-checkbox,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox,
body.page-customer-account .vip-account__field--legal .custom-checkbox
{
display: block;
line-height: 1.4;
}
#registration .vip-account__field--checkbox .custom-checkbox label,
#authentication .vip-account__field--checkbox .custom-checkbox label,
#registration .vip-account__field--legal .custom-checkbox label,
#authentication .vip-account__field--legal .custom-checkbox label,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox label,
body.page-customer-account .vip-account__field--legal .custom-checkbox label
{
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-tan);
font-weight: 400;
}
#registration .vip-account__field--checkbox .custom-checkbox label,
#registration .vip-account__field--legal .custom-checkbox label,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox label,
body.page-customer-account .vip-account__field--legal .custom-checkbox label
{
font-size: 13px;
line-height: 1.4;
}
#registration .vip-account__field--legal .custom-checkbox label em,
body.page-customer-account .vip-account__field--legal .custom-checkbox label em
{
font-style: italic;
font-size: inherit;
line-height: inherit;
}
#registration .vip-account__field--legal .custom-checkbox label .checkbox-checked,
body.page-customer-account .vip-account__field--legal .custom-checkbox label .checkbox-checked
{
font-style: normal;
}
#registration .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span,
#authentication .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span,
#registration .vip-account__field--legal .custom-checkbox input[type=checkbox] + span,
#authentication .vip-account__field--legal .custom-checkbox input[type=checkbox] + span,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span,
body.page-customer-account .vip-account__field--legal .custom-checkbox input[type=checkbox] + span
{
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 15px;
height: 15px;
min-width: 15px;
margin-right: 0;
margin-top: 0;
vertical-align: middle;
overflow: hidden;
line-height: 1;
position: relative;
}
/* §3.1 — Recargo de Equivalencia (registration) */
#registration .vip-account__recargo-field,
#registration .vip-account__field--recargo
{
margin: 0 0 1.75rem;
padding: 1.15rem 1.25rem;
border: 2px solid var(--vip-figma-brown);
border-radius: 8px;
background: rgba(126, 97, 74, 0.08);
box-sizing: border-box;
}
/* Avoid double border when wrapper + field both carry recargo styles. */
#registration .vip-account__recargo-field .vip-account__field--recargo
{
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
}
#registration .vip-account__recargo-field .vip-account__label,
#registration .vip-account__field--recargo .vip-account__label
{
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 1.125rem;
line-height: 1.25;
color: var(--vip-figma-brown);
}
#registration .vip-account__field--recargo .radio-inline,
#registration .vip-account__recargo-field .radio-inline
{
margin-right: 1.5rem;
font-weight: 700;
color: var(--vip-figma-brown);
}
#registration .vip-account__recargo-field .radio-inline input[type="radio"],
#registration .vip-account__field--recargo .radio-inline input[type="radio"]
{
accent-color: var(--vip-figma-brown);
}
body.page-customer-account .vip-account__field--vat .vip-account__hint
{
display: block;
margin-top: 0.5rem;
color: var(--vip-figma-brown);
font-size: 13px;
line-height: 1.45;
opacity: 0.92;
}
body.page-customer-account .vip-order-buy-again
{
display: inline-block;
margin-top: 0.35rem;
padding: 0.45rem 1rem;
border-radius: 999px;
background: var(--vip-figma-brown, #7e614a);
border: none;
color: #fff !important;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
body.page-customer-account .vip-order-buy-again:hover
{
background: #6a5140;
color: #fff !important;
text-decoration: none;
}
body.page-customer-account .vip-order-buy-again-row
{
margin-top: 0.65rem;
}
#registration .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span,
#registration .vip-account__field--legal .custom-checkbox input[type=checkbox] + span,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span,
body.page-customer-account .vip-account__field--legal .custom-checkbox input[type=checkbox] + span
{
width: 14px;
height: 14px;
min-width: 14px;
}
#registration .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span .checkbox-checked,
#authentication .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span .checkbox-checked,
#registration .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked,
#authentication .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span .checkbox-checked,
body.page-customer-account .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked
{
display: none;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1;
color: #232323;
}
#registration .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span .checkbox-checked,
#registration .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox input[type=checkbox] + span .checkbox-checked,
body.page-customer-account .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked
{
font-size: 11px;
}
#registration .vip-account__field--checkbox .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked,
#authentication .vip-account__field--checkbox .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked,
#registration .vip-account__field--legal .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked,
#authentication .vip-account__field--legal .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked,
body.page-customer-account .vip-account__field--checkbox .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked,
body.page-customer-account .vip-account__field--legal .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#registration .vip-account__field--checkbox .vip-account__optional,
#authentication .vip-account__field--checkbox .vip-account__optional,
#registration .vip-account__field--legal .vip-account__optional,
#authentication .vip-account__field--legal .vip-account__optional,
body.page-customer-account .vip-account__field--checkbox .vip-account__optional,
body.page-customer-account .vip-account__field--legal .vip-account__optional
{
display: none;
}
#registration .vip-account__footer,
#authentication .vip-account__footer,
body.page-customer-account .vip-account__footer
{
margin-top: 2rem;
text-align: center;
}
#registration .vip-account__submit,
#authentication .vip-account__submit,
body.page-customer-account .vip-account__submit
{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(344px, 100%);
min-height: 44px;
padding: 0.65rem 2rem;
border: none;
border-radius: 22px;
background: var(--vip-figma-brown);
color: #fff;
font-family: var(--vip-font-body);
font-weight: 800;
font-size: 16px;
line-height: 19.2px;
text-transform: none;
letter-spacing: normal;
}
#registration .vip-account__submit:hover,
#registration .vip-account__submit:focus,
#authentication .vip-account__submit:hover,
#authentication .vip-account__submit:focus,
body.page-customer-account .vip-account__submit:hover,
body.page-customer-account .vip-account__submit:focus
{
background: var(--vip-figma-brown);
border-color: var(--vip-figma-brown);
color: #fff;
opacity: 0.92;
}
#registration .vip-account__submit:disabled,
#registration .vip-account__submit[aria-disabled="true"],
body.page-customer-account .vip-account__submit:disabled,
body.page-customer-account .vip-account__submit[aria-disabled="true"]
{
opacity: 0.45;
cursor: not-allowed;
}
#registration .vip-account__submit:disabled:hover,
#registration .vip-account__submit:disabled:focus,
#registration .vip-account__submit[aria-disabled="true"]:hover,
#registration .vip-account__submit[aria-disabled="true"]:focus,
body.page-customer-account .vip-account__submit:disabled:hover,
body.page-customer-account .vip-account__submit:disabled:focus,
body.page-customer-account .vip-account__submit[aria-disabled="true"]:hover,
body.page-customer-account .vip-account__submit[aria-disabled="true"]:focus
{
opacity: 0.45;
}
#authentication .vip-account__forgot,
body.page-customer-account .vip-account__forgot
{
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
margin: -0.35rem 0 0;
}
#authentication .vip-account__forgot a,
body.page-customer-account .vip-account__forgot a
{
grid-column: 2;
font-size: 13px;
line-height: 1.4;
}
#authentication .vip-account__card > *:not(.vip-account__signin):not(.vip-account__form),
body.page-customer-account .vip-account__card > *:not(.vip-account__signin):not(.vip-account__form)
{
margin-top: 1.25rem;
}
@media (max-width: 767.98px) {
#registration .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal),
#authentication .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) {
grid-template-columns: 1fr;
}
#registration .vip-account__field .vip-account__label,
#authentication .vip-account__field .vip-account__label {
display: block;
min-height: 0;
padding-top: 0;
margin-bottom: 0.35rem;
}
#registration .vip-account__optional,
#authentication .vip-account__optional {
display: block;
min-height: 0;
padding-top: 0.35rem;
text-align: left;
grid-column: 1;
}
#registration .vip-account__field--checkbox .vip-account__control,
#registration .vip-account__field--legal .vip-account__control,
#authentication .vip-account__field--checkbox .vip-account__control,
#authentication .vip-account__field--legal .vip-account__control {
grid-column: 1;
}
#authentication .vip-account__forgot {
grid-template-columns: 1fr;
}
#authentication .vip-account__forgot a {
grid-column: 1;
}
}
/* --------------------------------------------------------------------------
* Customer account area (Mi cuenta + subpages) — VIP dashboard + tokens
* -------------------------------------------------------------------------- */
body.page-customer-account #wrapper {
background: var(--vip-page-bg);
}
body.page-customer-account #wrapper > .container {
width: var(--vip-figma-content-width);
max-width: none;
}
body.page-customer-account .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.4;
}
body.page-customer-account .breadcrumb a {
color: #878787;
text-decoration: none;
}
body.page-customer-account .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
body.page-customer-account #main {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body.page-customer-account #main .page-content {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* Account hub + subpages — tan uppercase title (Tienda / categorías chrome). */
body.page-customer-account .vip-account__title {
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
text-wrap: balance;
}
body.page-customer-account .vip-account__lead {
margin: 0 0 1.25rem;
max-width: 42rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body.page-customer-account a.vip-invoice-download {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--vip-figma-tan);
font-weight: 600;
text-decoration: none;
}
body.page-customer-account a.vip-invoice-download .material-icons {
font-size: 1.25rem;
line-height: 1;
}
body.page-customer-account a.vip-invoice-download:hover,
body.page-customer-account a.vip-invoice-download:focus {
color: var(--vip-figma-brown);
text-decoration: underline;
}
body.page-customer-account .vip-invoice-pending {
color: rgba(126, 97, 74, 0.7);
font-size: 0.9em;
}
body.page-customer-account .vip-invoice-download-wrap {
margin-top: 0.55rem;
}
body.page-customer-account button[data-action="show-password"] {
display: none !important;
}
body.page-customer-account .password-requirements,
body.page-customer-account .password-strength-text,
body.page-customer-account .progress-container {
display: none !important;
}
#registration .vip-account__field--radio .vip-account__control,
#authentication .vip-account__field--radio .vip-account__control,
#identity .vip-account__field--radio .vip-account__control,
body.page-customer-account .vip-account__field--radio .vip-account__control {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
min-height: 44px;
}
/* Tratamiento — pill toggles (no Classic double-ring radios). */
#registration .vip-account__field--radio .radio-inline,
#authentication .vip-account__field--radio .radio-inline,
#identity .vip-account__field--radio .radio-inline,
body.page-customer-account .vip-account__field--radio .radio-inline {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4.5rem;
min-height: 38px;
margin: 0;
padding: 0.4rem 1.15rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 999px;
background: #fff;
cursor: pointer;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#registration .vip-account__field--radio .radio-inline:has(input:checked),
#authentication .vip-account__field--radio .radio-inline:has(input:checked),
#identity .vip-account__field--radio .radio-inline:has(input:checked),
body.page-customer-account .vip-account__field--radio .radio-inline:has(input:checked) {
background: var(--vip-figma-tan);
border-color: var(--vip-figma-tan);
color: #fff !important;
}
#registration .vip-account__field--radio .custom-radio,
#authentication .vip-account__field--radio .custom-radio,
#identity .vip-account__field--radio .custom-radio,
body.page-customer-account .vip-account__field--radio .custom-radio {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#registration .vip-account__field--radio .custom-radio input[type="radio"],
#authentication .vip-account__field--radio .custom-radio input[type="radio"],
#identity .vip-account__field--radio .custom-radio input[type="radio"],
body.page-customer-account .vip-account__field--radio .custom-radio input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
#registration .vip-account__field--radio .custom-radio input[type="radio"] + span,
#authentication .vip-account__field--radio .custom-radio input[type="radio"] + span,
#identity .vip-account__field--radio .custom-radio input[type="radio"] + span,
body.page-customer-account .vip-account__field--radio .custom-radio input[type="radio"] + span {
display: none !important;
}
#registration .vip-account__field--radio .radio-inline:has(input:focus-visible),
#authentication .vip-account__field--radio .radio-inline:has(input:focus-visible),
#identity .vip-account__field--radio .radio-inline:has(input:focus-visible),
body.page-customer-account .vip-account__field--radio .radio-inline:has(input:focus-visible) {
outline: 2px solid rgba(126, 97, 74, 0.35);
outline-offset: 2px;
}
body.page-customer-account .vip-account-addresses__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.85rem, 1.6vw, 1.15rem);
margin-bottom: 1.5rem;
}
body.page-customer-account .vip-account-address {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(1.1rem, 2vw, 1.35rem);
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 12px;
background: #fff;
}
body.page-customer-account .vip-account-address__alias {
margin: 0 0 0.65rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 1.05rem;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-account-address__formatted {
flex: 1 1 auto;
margin: 0 0 1rem;
font-style: normal;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-address-lines {
flex: 1 1 auto;
margin: 0 0 1rem;
}
body.page-customer-account .vip-address-lines__row {
display: grid;
grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
column-gap: 0.75rem;
row-gap: 0.15rem;
margin: 0 0 0.35rem;
}
body.page-customer-account .vip-address-lines__label {
margin: 0;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 400;
color: #878787;
}
body.page-customer-account .vip-address-lines__value {
margin: 0;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-account-address__footer {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
margin-top: auto;
padding-top: 0.85rem;
border-top: 1px solid rgba(213, 161, 125, 0.22);
}
body.page-customer-account .vip-account-address__action {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--vip-font-body);
font-size: 13px;
line-height: 1.35;
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
}
body.page-customer-account .vip-account-address__action:hover {
color: #c8926a !important;
text-decoration: underline;
}
body.page-customer-account .vip-account-addresses__add {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
}
body.page-customer-account .vip-account-addresses__add:hover {
color: #c8926a !important;
text-decoration: underline;
}
body.page-customer-account .order-actions a,
body.page-customer-account .view-order-details-link,
body.page-customer-account .reorder-link {
color: var(--vip-figma-tan) !important;
font-weight: 700;
text-decoration: none;
}
body.page-customer-account .order-actions a:hover,
body.page-customer-account .view-order-details-link:hover,
body.page-customer-account .reorder-link:hover {
color: #c8926a !important;
text-decoration: underline;
}
@media (max-width: 991px) {
body.page-customer-account .vip-account-addresses__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
body.page-customer-account .vip-account-addresses__grid {
grid-template-columns: minmax(0, 1fr);
}
}
body.page-customer-account .alert {
border-radius: 4px;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
body.page-customer-account .alert-success {
border-color: rgba(213, 161, 125, 0.55);
background: rgba(213, 161, 125, 0.14);
color: var(--vip-figma-brown);
}
body.page-customer-account .alert-warning,
body.page-customer-account .alert-danger,
body.page-customer-account .alert-info {
border-color: rgba(213, 161, 125, 0.45);
background: rgba(213, 161, 125, 0.1);
color: var(--vip-figma-brown);
}
/* blockwishlist — lists + product view (Mi cuenta + module page ids; kill Classic cyan .text-primary). */
body.page-customer-account .vip-wishlist .wishlist-container-header > h1,
body#module-blockwishlist-lists .vip-wishlist .wishlist-container-header > h1,
body#module-blockwishlist-view .vip-wishlist .wishlist-products-container-header > h1 {
display: none;
}
body.page-customer-account .vip-wishlist .wishlist-container-header,
body#module-blockwishlist-lists .vip-wishlist .wishlist-container-header {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0 0 1rem;
}
body.page-customer-account .vip-wishlist .wishlist-add-to-new,
body.page-customer-account .vip-wishlist .wishlist-add-to-new.text-primary,
body#module-blockwishlist-lists .wishlist-add-to-new,
body#module-blockwishlist-lists .wishlist-add-to-new.text-primary,
body#module-blockwishlist-lists .vip-wishlist .wishlist-add-to-new,
body#module-blockwishlist-lists .vip-wishlist .wishlist-add-to-new.text-primary {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
}
body.page-customer-account .vip-wishlist .wishlist-add-to-new .material-icons,
body#module-blockwishlist-lists .wishlist-add-to-new .material-icons,
body#module-blockwishlist-lists .vip-wishlist .wishlist-add-to-new .material-icons {
color: inherit !important;
}
body.page-customer-account .vip-wishlist .wishlist-add-to-new:hover,
body#module-blockwishlist-lists .wishlist-add-to-new:hover,
body#module-blockwishlist-lists .vip-wishlist .wishlist-add-to-new:hover {
color: #c8926a !important;
opacity: 1;
}
body.page-customer-account .vip-wishlist .wishlist-container .page-content.card,
body.page-customer-account .vip-wishlist .wishlist-products-container .page-content.card,
body#module-blockwishlist-lists .vip-wishlist .page-content.card,
body#module-blockwishlist-view .vip-wishlist .page-content.card {
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-customer-account .vip-wishlist .wishlist-list,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list {
margin: 0;
padding: 0;
list-style: none;
}
body.page-customer-account .vip-wishlist .wishlist-list-item,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item {
margin: 0 0 0.65rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
body.page-customer-account .vip-wishlist .wishlist-list-item-default,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-default {
border-color: var(--vip-figma-tan);
}
body.page-customer-account .vip-wishlist .wishlist-list-item-link,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-link {
display: block;
padding: 0.95rem 1.1rem;
color: var(--vip-figma-brown) !important;
text-decoration: none;
}
body.page-customer-account .vip-wishlist .wishlist-list-item-title,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-title {
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-wishlist .wishlist-list-item-title span,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-title span {
color: #878787;
font-weight: 400;
}
body.page-customer-account .vip-wishlist .wishlist-list-item-actions button,
body.page-customer-account .vip-wishlist .wishlist-list-item-actions a,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-actions button,
body#module-blockwishlist-lists .vip-wishlist .wishlist-list-item-actions a {
color: var(--vip-figma-tan) !important;
}
body.page-customer-account .vip-wishlist__back,
body#module-blockwishlist-view .vip-wishlist__back {
margin: 0 0 1rem;
}
body.page-customer-account .vip-wishlist .text-primary,
body#module-blockwishlist-lists .text-primary,
body#module-blockwishlist-lists .vip-wishlist .text-primary,
body#module-blockwishlist-view .vip-wishlist .text-primary {
color: var(--vip-figma-tan) !important;
}
body#module-blockwishlist-lists #main a:not(.wishlist-list-item-link):not(.vip-account__subnav-link),
body#module-blockwishlist-view #main a:not(.wishlist-list-item-link):not(.vip-account__subnav-link) {
color: var(--vip-figma-tan) !important;
}
body#module-blockwishlist-lists .page-footer a,
body#module-blockwishlist-lists .page-footer a .material-icons,
body#module-blockwishlist-view .page-footer a,
body#module-blockwishlist-view .page-footer a .material-icons,
body#module-blockwishlist-view .vip-account__subnav-link,
body#module-blockwishlist-view .vip-account__subnav-link .material-icons {
color: var(--vip-figma-brown) !important;
}
body#module-blockwishlist-lists .page-footer a:hover,
body#module-blockwishlist-lists .page-footer a:focus-visible,
body#module-blockwishlist-view .page-footer a:hover,
body#module-blockwishlist-view .page-footer a:focus-visible,
body#module-blockwishlist-view .vip-account__subnav-link:hover,
body#module-blockwishlist-view .vip-account__subnav-link:focus-visible {
color: var(--vip-figma-tan) !important;
}
body.page-customer-account .vip-wishlist .btn-primary,
body#module-blockwishlist-lists .vip-wishlist .btn-primary,
body#module-blockwishlist-view .vip-wishlist .btn-primary {
background: var(--vip-figma-brown) !important;
border-color: var(--vip-figma-brown) !important;
font-family: var(--vip-font-body);
font-weight: 800;
}
body.page-customer-account .vip-wishlist .btn-primary:hover,
body#module-blockwishlist-lists .vip-wishlist .btn-primary:hover,
body#module-blockwishlist-view .vip-wishlist .btn-primary:hover {
background: #6a523f !important;
border-color: #6a523f !important;
}
body.page-customer-account .vip-wishlist .btn-secondary,
body.page-customer-account .vip-wishlist .modal-cancel,
body#module-blockwishlist-lists .vip-wishlist .btn-secondary,
body#module-blockwishlist-lists .vip-wishlist .modal-cancel,
body#module-blockwishlist-view .vip-wishlist .btn-secondary,
body#module-blockwishlist-view .vip-wishlist .modal-cancel {
border-color: rgba(213, 161, 125, 0.55);
color: var(--vip-figma-brown) !important;
}
body#module-blockwishlist-lists .wishlist-list-empty,
body#module-blockwishlist-lists .wishlist-list-empty p,
body.page-customer-account .vip-wishlist .wishlist-list-empty,
body.page-customer-account .vip-wishlist .wishlist-list-empty p {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown) !important;
}
/* psgdpr — grey boxes sized to VIP card (no Bootstrap bleed, no float/margin overflow). */
body.page-customer-account .vip-account__card:has(.vip-account-gdpr),
body#module-psgdpr-gdpr .vip-account__card {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.page-customer-account .vip-account__card .container,
body.page-customer-account .vip-account__card .page_content,
body#module-psgdpr-gdpr .vip-account__card .container,
body#module-psgdpr-gdpr .vip-account__card .page_content {
width: 100%;
max-width: 100%;
min-width: 0;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
body.page-customer-account .vip-account-gdpr,
body#module-psgdpr-gdpr .vip-account-gdpr {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.page-customer-account .vip-account__card .row,
body.page-customer-account .vip-account-gdpr .row,
body#module-psgdpr-gdpr .vip-account__card .row,
body#module-psgdpr-gdpr .vip-account-gdpr .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.page-customer-account .vip-account__card [class*="col-"]:not(.psgdprinfo17):not(.vip-account-gdpr__box),
body.page-customer-account .vip-account-gdpr [class*="col-"]:not(.psgdprinfo17):not(.vip-account-gdpr__box),
body#module-psgdpr-gdpr .vip-account__card [class*="col-"]:not(.psgdprinfo17):not(.vip-account-gdpr__box),
body#module-psgdpr-gdpr .vip-account-gdpr [class*="col-"]:not(.psgdprinfo17):not(.vip-account-gdpr__box) {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.page-customer-account .vip-account-gdpr__box,
body.page-customer-account .vip-account-gdpr .psgdprinfo17,
body.page-customer-account .vip-account__card .psgdprinfo17,
body#module-psgdpr-gdpr .vip-account-gdpr__box,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprinfo17,
body#module-psgdpr-gdpr .vip-account__card .psgdprinfo17 {
display: flow-root;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin: 0 0 1.5rem !important;
padding-top: clamp(1.5rem, 2.5vw, 2rem) !important;
padding-bottom: clamp(1.5rem, 2.5vw, 2rem) !important;
padding-left: clamp(1.75rem, 3.5vw, 2.5rem) !important;
padding-right: clamp(1.75rem, 3.5vw, 2.5rem) !important;
box-sizing: border-box !important;
background: #f1f1f1;
border-radius: 4px;
float: none !important;
}
body.page-customer-account .vip-account-gdpr__box:last-child,
body.page-customer-account .vip-account-gdpr .psgdprinfo17:last-child,
body#module-psgdpr-gdpr .vip-account-gdpr__box:last-child,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprinfo17:last-child {
margin-bottom: 0 !important;
}
body.page-customer-account .vip-account-gdpr__title,
body.page-customer-account .vip-account-gdpr .psgdprinfo17 h2,
body#module-psgdpr-gdpr .vip-account-gdpr__title,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprinfo17 h2 {
margin: 0 0 0.75rem;
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 18px;
line-height: 1.35;
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-account-gdpr__text,
body.page-customer-account .vip-account-gdpr__box p,
body.page-customer-account .vip-account-gdpr .psgdprinfo17 p,
body#module-psgdpr-gdpr .vip-account-gdpr__text,
body#module-psgdpr-gdpr .vip-account-gdpr__box p,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprinfo17 p {
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
overflow-wrap: break-word;
}
body.page-customer-account .vip-account-gdpr__link,
body.page-customer-account .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn),
body.page-customer-account .vip-account-gdpr .psgdprinfo17 a:not(.btn):not(.vip-account-gdpr__btn),
body#module-psgdpr-gdpr .vip-account-gdpr__link,
body#module-psgdpr-gdpr .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn),
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprinfo17 a:not(.btn):not(.vip-account-gdpr__btn) {
color: var(--vip-figma-tan);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
body.page-customer-account .vip-account-gdpr__link:hover,
body.page-customer-account .vip-account-gdpr__link:focus,
body.page-customer-account .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn):hover,
body.page-customer-account .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn):focus,
body#module-psgdpr-gdpr .vip-account-gdpr__link:hover,
body#module-psgdpr-gdpr .vip-account-gdpr__link:focus,
body#module-psgdpr-gdpr .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn):hover,
body#module-psgdpr-gdpr .vip-account-gdpr__box a:not(.btn):not(.vip-account-gdpr__btn):focus {
color: var(--vip-figma-brown);
}
body.page-customer-account .vip-account-gdpr__btns,
body#module-psgdpr-gdpr .vip-account-gdpr__btns {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-end;
width: 100%;
max-width: 100%;
min-width: 0;
margin-top: 1.25rem;
clear: both;
}
body.page-customer-account .vip-account-gdpr__btn,
body.page-customer-account .vip-account-gdpr .psgdprgetdatabtn17,
body.page-customer-account .vip-account-gdpr #exportDataToCsv,
body.page-customer-account .vip-account-gdpr #exportDataToPdf,
body#module-psgdpr-gdpr .vip-account-gdpr__btn,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprgetdatabtn17,
body#module-psgdpr-gdpr .vip-account-gdpr #exportDataToCsv,
body#module-psgdpr-gdpr .vip-account-gdpr #exportDataToPdf {
display: inline-flex;
align-items: center;
justify-content: center;
float: none !important;
margin: 0 !important;
min-height: 44px;
padding: 0.55rem 1.35rem;
border: none !important;
border-radius: 22px;
background: var(--vip-figma-brown) !important;
color: #fff !important;
box-shadow: none !important;
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 14px;
line-height: 1.25;
text-transform: none;
letter-spacing: normal;
max-width: 100%;
min-width: 0;
white-space: normal !important;
text-align: center;
}
body.page-customer-account .vip-account-gdpr__btn:hover,
body.page-customer-account .vip-account-gdpr__btn:focus,
body.page-customer-account .vip-account-gdpr .psgdprgetdatabtn17:hover,
body.page-customer-account .vip-account-gdpr .psgdprgetdatabtn17:focus,
body#module-psgdpr-gdpr .vip-account-gdpr__btn:hover,
body#module-psgdpr-gdpr .vip-account-gdpr__btn:focus,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprgetdatabtn17:hover,
body#module-psgdpr-gdpr .vip-account-gdpr .psgdprgetdatabtn17:focus {
background: var(--vip-figma-brown) !important;
color: #fff !important;
opacity: 0.92;
}
.vip-account-dashboard__grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: clamp(0.85rem, 1.6vw, 1.15rem);
margin: 0;
flex-wrap: unset;
}
/* Grid row height — anchor + .link-item fill cell so icon/label center vertically. */
.vip-account-dashboard__grid > a {
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 10rem;
padding: 0;
text-decoration: none;
color: inherit;
}
/* Classic theme.css uses flex + #232323 on .page-my-account .links — neutralize on VIP hub. */
body#my-account.page-customer-account .vip-account-dashboard__grid > a,
body#my-account.page-customer-account .vip-account-dashboard__grid > a:hover,
body#my-account.page-customer-account .vip-account-dashboard__grid > a:focus-visible {
color: inherit !important;
}
body#my-account.page-customer-account .vip-account-dashboard__grid > a:hover i,
body#my-account.page-customer-account .vip-account-dashboard__grid > a:focus-visible i,
body#my-account.page-customer-account .vip-account-dashboard__grid > a:hover .material-icons,
body#my-account.page-customer-account .vip-account-dashboard__grid > a:focus-visible .material-icons {
color: var(--vip-figma-tan) !important;
}
.vip-account-dashboard__tile .link-item,
body#my-account.page-customer-account .vip-account-dashboard__grid > a .link-item {
display: flex !important;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
min-height: 10rem;
margin: 0;
padding: clamp(1.25rem, 2vw, 1.65rem) clamp(0.85rem, 1.5vw, 1.15rem);
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 12px;
background: #fff;
box-shadow: none;
text-align: center;
box-sizing: border-box;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.vip-account-dashboard__grid > a:hover .link-item,
.vip-account-dashboard__tile:hover .link-item {
border-color: var(--vip-figma-tan);
background: rgba(213, 161, 125, 0.1);
transform: translateY(-2px);
}
.vip-account-dashboard__grid > a:focus,
.vip-account-dashboard__grid > a:focus-visible,
.vip-account-dashboard__grid > a:active,
.vip-account-dashboard__tile:focus,
.vip-account-dashboard__tile:focus-visible,
.vip-account-dashboard__tile:active {
outline: none !important;
box-shadow: none !important;
}
.vip-account-dashboard__grid > a:focus .link-item,
.vip-account-dashboard__grid > a:focus-visible .link-item,
.vip-account-dashboard__grid > a:active .link-item,
.vip-account-dashboard__tile:focus .link-item,
.vip-account-dashboard__tile:focus-visible .link-item,
.vip-account-dashboard__tile:active .link-item {
outline: none !important;
box-shadow: none !important;
}
.vip-account-dashboard__grid > a .material-icons {
font-size: clamp(2.25rem, 4vw, 2.75rem);
line-height: 1;
color: var(--vip-figma-tan) !important;
}
.vip-account-dashboard__label,
.vip-account-dashboard__grid > a .link-item > span:not(.material-icons) {
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.35;
font-weight: 700;
color: var(--vip-figma-brown) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vip-account-dashboard__tile .link-item > .material-icons {
text-transform: none;
}
body.page-customer-account .vip-account-dashboard__grid > a:not(.vip-account-dashboard__tile) .material-icons,
body.page-customer-account .vip-account-dashboard__grid > a:not(.vip-account-dashboard__tile) .link-item i {
font-size: clamp(2.25rem, 4vw, 2.75rem);
line-height: 1;
color: var(--vip-figma-tan) !important;
}
body.page-customer-account .vip-account-dashboard__grid > a:not(.vip-account-dashboard__tile) .link-item > span:not(.material-icons):not(.vip-account-dashboard__label),
body.page-customer-account .vip-account-dashboard__grid > a:not(.vip-account-dashboard__tile) .link-item {
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.35;
font-weight: 700;
color: var(--vip-figma-brown) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Legacy hook markup: Bootstrap cols on , stray wishlist images. */
body.page-customer-account .vip-account-dashboard__grid > a[class*="col-"] {
position: static;
width: auto;
max-width: none;
padding: 0;
margin: 0;
}
body.page-customer-account .vip-account-dashboard__grid > a img {
display: none !important;
}
.vip-account__signout {
margin-top: clamp(2rem, 4vw, 2.75rem);
text-align: center;
}
.vip-account__signout-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.55rem 1.75rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 22px;
background: #fff;
color: var(--vip-figma-tan) !important;
font-family: var(--vip-font-body);
font-weight: 700;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vip-account__signout-link:hover {
background: rgba(213, 161, 125, 0.12);
border-color: var(--vip-figma-tan);
color: #c8926a !important;
}
.vip-account__signout-link:focus,
.vip-account__signout-link:focus-visible,
.vip-account__signout-link:active {
outline: none !important;
box-shadow: none !important;
}
.vip-account__subnav {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.75rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.vip-account__subnav-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
}
.vip-account__subnav-link .material-icons {
font-size: 1.15rem;
line-height: 1;
color: var(--vip-figma-tan) !important;
}
.vip-account__subnav-link:hover {
color: #c8926a !important;
text-decoration: underline;
text-underline-offset: 2px;
}
.vip-account__subnav-link:focus,
.vip-account__subnav-link:focus-visible,
.vip-account__subnav-link:active {
outline: none !important;
box-shadow: none !important;
}
body.page-customer-account .page-footer a:not(.vip-account__subnav-link) {
color: var(--vip-figma-tan) !important;
}
body.page-customer-account .table {
border-color: rgba(213, 161, 125, 0.45);
color: var(--vip-figma-brown);
}
body.page-customer-account .table thead th {
border-color: rgba(213, 161, 125, 0.45);
font-family: var(--vip-font-body);
font-weight: 700;
color: var(--vip-figma-brown);
background: rgba(213, 161, 125, 0.08);
}
body.page-customer-account .table td,
body.page-customer-account .table th {
border-color: rgba(213, 161, 125, 0.35);
}
body.page-customer-account .btn-primary,
body.page-customer-account .btn-secondary {
border-radius: 4px;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
body.page-customer-account .btn-primary {
border: none;
background: var(--vip-figma-tan);
color: #fff;
}
body.page-customer-account .btn-primary:hover,
body.page-customer-account .btn-primary:focus-visible {
background: #c8926a;
color: #fff;
}
body.page-customer-account .btn-secondary {
border: 1px solid rgba(213, 161, 125, 0.55);
background: #fff;
color: var(--vip-figma-brown);
}
body.page-customer-account h6,
body.page-customer-account p,
body.page-customer-account .page-content label {
color: var(--vip-figma-brown);
}
@media (max-width: 991px) {
.vip-account-dashboard__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.vip-account-dashboard__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* --------------------------------------------------------------------------
* Contact page — no Figma comp; aligned with CMS + account pages
* -------------------------------------------------------------------------- */
#contact #wrapper .container {
max-width: var(--vip-figma-content-width);
}
#contact #main {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-text);
}
#contact .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-size: 12px;
line-height: 14.4px;
}
#contact .breadcrumb a {
color: #878787;
text-decoration: none;
}
#contact .breadcrumb li:last-child span {
color: var(--vip-figma-tan);
}
#contact #main .page-content {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.vip-contact__header {
margin: 0 0 1.25rem;
}
.vip-contact__title {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 37px;
line-height: 36px;
color: var(--vip-figma-brown);
text-align: left;
}
.vip-contact__aside {
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
padding: clamp(1.1rem, 2vw, 1.5rem);
margin-bottom: 1.25rem;
}
.vip-contact-aside__title {
margin: 0 0 0.85rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 17px;
line-height: 1.25;
letter-spacing: 0.01em;
color: var(--vip-figma-brown);
}
.vip-contact-aside__list {
list-style: none;
margin: 0;
padding: 0;
}
.vip-contact-aside__item {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 13px;
line-height: 1.45;
color: #878787;
}
.vip-contact-aside__item--address {
align-items: flex-start;
}
.vip-contact-aside__item + .vip-contact-aside__item {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(213, 161, 125, 0.28);
}
.vip-contact-aside__icon {
flex-shrink: 0;
width: 1.85rem;
height: 1.85rem;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(213, 161, 125, 0.16);
color: var(--vip-figma-brown);
font-size: 1rem;
line-height: 1;
}
.vip-contact-aside__item--address .vip-contact-aside__icon {
margin-top: 0.1rem;
}
.vip-contact-aside__text {
flex: 1 1 auto;
min-width: 0;
}
.vip-contact-aside__text--stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.vip-contact-aside__line {
display: block;
}
.vip-contact-aside__line + .vip-contact-aside__line {
margin-top: 0.1rem;
}
.vip-contact-aside__line--primary {
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: var(--vip-text);
}
.vip-contact-aside__text a {
color: var(--vip-figma-brown);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
border-bottom: 1px solid rgba(126, 97, 74, 0.28);
transition: color 0.15s ease, border-color 0.15s ease;
}
.vip-contact-aside__text a:hover,
.vip-contact-aside__text a:focus {
color: var(--vip-figma-tan);
border-bottom-color: rgba(213, 161, 125, 0.65);
}
.vip-contact-aside__sep {
color: #878787;
font-weight: 400;
}
.vip-contact__card {
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
padding: clamp(1.35rem, 2.5vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
}
.vip-contact__form {
margin: 0;
}
.vip-contact__fields {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
.vip-contact__alert {
margin: 0 0 1.25rem;
border-radius: 4px;
border: 1px solid transparent;
padding: 0.85rem 1rem;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
.vip-contact__alert.alert-success {
background: rgba(247, 244, 239, 0.95);
border-color: rgba(213, 161, 125, 0.45);
color: var(--vip-figma-brown);
}
.vip-contact__alert.alert-danger {
background: #fff5f5;
border-color: rgba(198, 40, 40, 0.25);
color: #8b2e2e;
}
.vip-contact__alert-list {
margin: 0;
padding-left: 1.15rem;
}
.vip-contact__alert-list li {
margin-bottom: 0.35rem;
}
.vip-contact__alert-list li:last-child {
margin-bottom: 0;
}
#contact .vip-account__field {
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: start;
margin: 0;
}
#contact .vip-account__field > [class*="col-"] {
flex: none;
width: auto;
max-width: none;
padding: 0;
margin: 0;
}
#contact .vip-contact__field--message {
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr);
align-items: center;
}
#contact .vip-contact__field--message .vip-account__label {
min-height: 0;
align-self: center;
}
#contact .vip-account__field--legal {
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: center;
}
#contact .vip-account__field--legal .vip-account__control {
grid-column: 2;
width: auto;
max-width: none;
padding: 0;
}
#contact .vip-account__field--legal .custom-checkbox label {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-tan);
}
#contact .vip-account__field--legal .custom-checkbox input[type=checkbox] + span {
display: inline-block;
flex-shrink: 0;
width: 15px;
height: 15px;
margin-right: 0;
margin-top: 0;
vertical-align: middle;
}
#contact .vip-account__field--legal .custom-checkbox input[type=checkbox] + span .checkbox-checked {
display: none;
margin: 0;
font-size: 13px;
line-height: 1;
color: #232323;
}
#contact .vip-account__field--legal .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked {
display: block;
}
#contact .vip-account__label {
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-weight: 400;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
text-align: left;
}
#contact .vip-contact__field--message .vip-account__label {
min-height: 0;
}
#contact .vip-account__field .form-control,
#contact .vip-account__field .vip-account__input {
min-height: 44px;
border: none;
border-radius: 22px;
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
caret-color: #fff;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
padding: 0.55rem 1.15rem;
box-shadow: none;
}
#contact .vip-contact__textarea {
min-height: 9rem;
border-radius: 18px;
resize: vertical;
}
#contact .vip-account__field .form-control:focus,
#contact .vip-account__field .vip-account__input:focus {
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
box-shadow: 0 0 0 2px rgba(126, 97, 74, 0.35);
}
#contact .vip-account__field .form-control::placeholder,
#contact .vip-account__field .vip-account__input::placeholder {
color: #fff;
opacity: 1;
}
#contact .vip-account__field select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.25rem;
}
#contact .vip-contact__file-wrap {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding: 0.45rem 1rem;
background: var(--vip-cream);
border: 1px dashed rgba(213, 161, 125, 0.55);
border-radius: 18px;
}
#contact .vip-contact__file-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
#contact .vip-contact__file-ui {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin: 0;
pointer-events: none;
}
#contact .vip-contact__file-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0.35rem 0.85rem;
border-radius: 14px;
background: var(--vip-figma-brown);
color: #fff;
font-family: var(--vip-font-body);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
#contact .vip-contact__file-name {
min-width: 0;
font-size: 13px;
line-height: 1.35;
color: #878787;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#contact .vip-account__optional {
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-size: 12px;
line-height: 22.5px;
color: #878787;
text-align: right;
}
.vip-contact__footer {
margin-top: 2rem;
text-align: center;
}
.vip-contact__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#contact .vip-account__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(344px, 100%);
min-height: 44px;
padding: 0.65rem 2rem;
border: none;
border-radius: 22px;
background: var(--vip-figma-brown);
color: #fff;
font-family: var(--vip-font-body);
font-weight: 800;
font-size: 16px;
line-height: 19.2px;
}
#contact .vip-account__submit:hover,
#contact .vip-account__submit:focus {
background: var(--vip-figma-brown);
color: #fff;
opacity: 0.92;
}
@media (min-width: 768px) {
#contact #left-column {
padding-right: 1rem;
}
#contact #content-wrapper.left-column {
padding-left: 0.5rem;
}
}
@media (max-width: 767.98px) {
#contact .vip-account__field,
#contact .vip-contact__field--message {
grid-template-columns: 1fr;
align-items: start;
}
#contact .vip-account__label {
display: block;
min-height: 0;
padding-top: 0;
margin-bottom: 0.35rem;
}
#contact .vip-account__optional {
display: block;
min-height: 0;
padding-top: 0.35rem;
text-align: left;
grid-column: 1;
}
#contact .vip-account__field--legal .vip-account__control {
grid-column: 1;
}
}
/* --------------------------------------------------------------------------
* Shopping cart (#cart) — Figma TIENDA chrome + VIP tokens
* -------------------------------------------------------------------------- */
#cart #wrapper {
background: var(--vip-page-bg);
}
#cart #wrapper .container {
width: var(--vip-figma-content-width);
max-width: none;
}
#cart .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.4;
}
#cart .breadcrumb a {
color: #878787;
text-decoration: none;
}
#cart .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
#cart #main.vip-cart {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
#cart .vip-cart__grid {
align-items: flex-start;
gap: clamp(1.5rem, 3vw, 2.5rem) 0;
}
#cart .vip-cart__panel,
#cart .vip-cart__summary {
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
box-shadow: none;
}
#cart .vip-cart__panel .card-block,
#cart .vip-cart__summary .card-block {
padding: clamp(1.25rem, 2.5vw, 2rem);
}
#cart .vip-cart__title {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
}
#cart .vip-cart__separator {
margin: 0;
border: none;
border-top: 1px solid rgba(213, 161, 125, 0.45);
opacity: 1;
}
#cart .vip-cart__empty-msg,
#cart .cart-overview .no-items {
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
}
/* Beat Classic `a.label` (near-black) on checkout links — VIP tan only. */
#cart a.vip-cart__continue,
#cart .cart-grid-body > a.vip-cart__continue {
display: inline-flex;
align-items: center;
gap: 0.15rem;
margin-top: 1.25rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-tan) !important;
text-decoration: none;
white-space: nowrap;
}
#cart a.vip-cart__continue .material-icons,
#cart .cart-grid-body > a.vip-cart__continue .material-icons {
font-size: 1.15rem;
line-height: 1;
color: var(--vip-figma-tan) !important;
}
#cart a.vip-cart__continue:hover,
#cart a.vip-cart__continue:focus-visible,
#cart .cart-grid-body > a.vip-cart__continue:hover,
#cart .cart-grid-body > a.vip-cart__continue:focus-visible {
color: #c8926a !important;
text-decoration: underline;
text-underline-offset: 2px;
}
#cart a.vip-cart__continue:hover .material-icons,
#cart a.vip-cart__continue:focus-visible .material-icons {
color: #c8926a !important;
}
#cart .cart-summary-line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 1rem;
row-gap: 0.25rem;
margin: 0 0 0.65rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
#cart .cart-summary-line > div {
grid-column: 1 / -1;
}
#cart .cart-summary-line .label {
color: #878787;
font-weight: 400;
justify-self: start;
}
#cart .cart-summary-line .value {
color: var(--vip-figma-brown);
font-weight: 600;
float: none !important;
justify-self: end;
text-align: right;
white-space: nowrap;
}
#cart .cart-detailed-subtotals.card-block {
padding-bottom: 0.5rem;
}
/* Coupons + CTA sit in consecutive card-blocks — kill the double-padding gulf. */
#cart .vip-cart__summary .cart-detailed-actions.card-block {
padding-top: 0.65rem;
}
#cart .cart-summary-totals.card-block {
padding-top: 0;
}
#cart .cart-summary-totals .cart-summary-line:first-child {
margin-top: 0.5rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(213, 161, 125, 0.45);
}
#cart .cart-summary-line.cart-total {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(213, 161, 125, 0.45);
}
#cart .cart-summary-line.cart-total .label,
#cart .cart-summary-line.cart-total .value {
font-weight: 800;
color: var(--vip-figma-brown);
}
#cart .vip-cart__checkout,
#cart .cart-detailed-actions .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: var(--vip-cart-control-height, 2.75rem);
min-height: var(--vip-cart-control-height, 2.75rem);
margin-top: 0;
padding: 0 1.5rem;
border: none;
border-radius: 4px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: 1;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: none;
cursor: pointer;
transition: background 0.15s ease;
}
#cart .vip-cart__checkout:hover,
#cart .vip-cart__checkout:focus-visible,
#cart .cart-detailed-actions .btn-primary:hover:not(:disabled) {
background: #c8926a;
color: #fff;
}
#cart .vip-cart__checkout.disabled,
#cart .vip-cart__checkout:disabled,
#cart .cart-detailed-actions .btn-primary.disabled,
#cart .cart-detailed-actions .btn-primary:disabled {
background: var(--vip-figma-tan);
color: #fff;
opacity: 0.45;
cursor: not-allowed;
}
#cart .cart-items {
margin: 0;
padding: 0;
list-style: none;
}
#cart .cart-item + .cart-item {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(213, 161, 125, 0.35);
}
#cart .product-line-grid {
align-items: center;
}
#cart .product-line-info a.label {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-figma-brown);
text-decoration: none;
}
#cart .product-line-info a.label:hover,
#cart .product-line-info a.label:focus-visible {
color: var(--vip-figma-tan);
}
#cart .product-line-info.product-price .price,
#cart .product-line-info.product-price .current-price {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
font-weight: 700;
color: var(--vip-figma-brown);
}
#cart .product-line-grid-right .product-price strong {
font-weight: 800;
color: var(--vip-figma-brown);
}
#cart .js-cart-line-product-quantity {
max-width: 4.5rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
color: var(--vip-figma-tan);
text-align: center;
}
#cart .cart-line-product-actions .remove-from-cart {
color: #878787;
text-decoration: none;
}
#cart .cart-line-product-actions .remove-from-cart:hover,
#cart .cart-line-product-actions .remove-from-cart:focus-visible {
color: var(--vip-figma-tan);
}
#cart .block-promo .promo-code form,
#cart .block-promo .promo-code .form-control {
border-color: rgba(213, 161, 125, 0.55);
border-radius: 4px;
font-family: var(--vip-font-body);
}
#cart .vip-cart__summary {
--vip-cart-control-height: 2.75rem;
}
#cart .vip-cart__summary .cart-detailed-actions .text-sm-center {
text-align: left !important;
}
#cart .alert-warning {
border-color: rgba(213, 161, 125, 0.55);
background: rgba(213, 161, 125, 0.12);
color: var(--vip-figma-brown);
font-size: var(--vip-figma-parrafo-size);
}
.vip-minimum-purchase,
#cart .vip-minimum-purchase,
#checkout .vip-minimum-purchase,
body.page-order .vip-minimum-purchase,
#blockcart-modal .vip-minimum-purchase {
margin: 0 0 1rem;
border-color: rgba(213, 161, 125, 0.55);
background: rgba(213, 161, 125, 0.12);
color: var(--vip-figma-brown);
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
#blockcart-modal .vip-blockcart-modal__view-cart {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0.65rem 1.25rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
background: #fff;
color: var(--vip-figma-tan) !important;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
text-decoration: none;
}
#blockcart-modal .vip-blockcart-modal__view-cart:hover,
#blockcart-modal .vip-blockcart-modal__view-cart:focus-visible {
background: rgba(213, 161, 125, 0.12);
color: #c8926a !important;
text-decoration: underline;
text-underline-offset: 2px;
}
#blockcart-modal .vip-blockcart-modal__checkout.disabled,
#blockcart-modal .vip-blockcart-modal__checkout:disabled {
background: var(--vip-figma-tan);
color: #fff;
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 991px) {
#cart .vip-cart__aside {
margin-top: 0.5rem;
}
}
/* --------------------------------------------------------------------------
* Add-to-cart modal (ps_shoppingcart #blockcart-modal)
* Brand palette only: --vip-figma-brown, --vip-figma-tan, --vip-figma-footer-bg
* -------------------------------------------------------------------------- */
#blockcart-modal {
--vip-modal-ink: var(--vip-figma-brown);
--vip-modal-accent: var(--vip-figma-tan);
--vip-modal-muted: #878787;
--vip-modal-border: rgba(213, 161, 125, 0.55);
--vip-modal-hover: var(--vip-header-tan-dark);
}
#blockcart-modal .modal-content,
#blockcart-modal .vip-blockcart-modal__content {
border: 1px solid var(--vip-modal-border);
border-radius: 4px;
box-shadow: 0 16px 48px rgba(46, 35, 35, 0.14);
overflow: hidden;
}
#blockcart-modal .modal-dialog,
#blockcart-modal .vip-blockcart-modal__dialog {
max-width: min(920px, calc(100vw - 2rem));
margin: 1.75rem auto;
}
#blockcart-modal .modal-header,
#blockcart-modal .vip-blockcart-modal__header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 1.1rem 2.75rem 1rem;
border-bottom: 1px solid rgba(213, 161, 125, 0.35);
background: #fff;
}
#blockcart-modal .modal-title,
#blockcart-modal .vip-blockcart-modal__title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin: 0;
width: 100%;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
color: var(--vip-modal-accent);
text-align: center;
}
#blockcart-modal .vip-blockcart-modal__title .material-icons {
display: none;
}
#blockcart-modal .vip-blockcart-modal__title-icon {
display: inline-block;
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D5A17D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
#blockcart-modal .close,
#blockcart-modal .vip-blockcart-modal__close {
position: absolute;
top: 0.65rem;
right: 0.65rem;
margin: 0;
padding: 0.25rem;
opacity: 1;
color: var(--vip-modal-muted);
text-shadow: none;
}
#blockcart-modal .close:hover,
#blockcart-modal .close:focus,
#blockcart-modal .vip-blockcart-modal__close:hover,
#blockcart-modal .vip-blockcart-modal__close:focus {
color: var(--vip-modal-accent);
opacity: 1;
}
#blockcart-modal .modal-body,
#blockcart-modal .vip-blockcart-modal__body {
padding: clamp(1.25rem, 2.5vw, 1.75rem);
background: #fff;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-modal-ink);
}
#blockcart-modal .cart-content,
#blockcart-modal .cart-content p,
#blockcart-modal .cart-products-count,
#blockcart-modal .product-name,
#blockcart-modal .product-tax,
#blockcart-modal .vip-blockcart-modal__name {
color: var(--vip-modal-ink);
}
#blockcart-modal .divide-right,
#blockcart-modal .vip-blockcart-modal__product-col {
border-right: 1px solid rgba(213, 161, 125, 0.35);
}
#blockcart-modal .vip-blockcart-modal__image,
#blockcart-modal .product-image {
display: block;
width: 100%;
max-width: 140px;
height: auto;
margin: 0 auto;
border: 1px solid rgba(213, 161, 125, 0.25);
border-radius: 4px;
object-fit: contain;
background: #fff;
}
#blockcart-modal .product-name,
#blockcart-modal .vip-blockcart-modal__name {
margin: 0 0 0.5rem;
font-family: var(--vip-font-body);
font-size: 1rem;
line-height: 1.35;
font-weight: 700;
color: var(--vip-modal-ink);
}
#blockcart-modal .product-price,
#blockcart-modal .vip-blockcart-modal__price {
margin: 0 0 0.65rem;
font-family: var(--vip-font-body);
font-size: 1.125rem;
line-height: 1.3;
font-weight: 800;
color: var(--vip-modal-accent);
}
#blockcart-modal .vip-blockcart-modal__attr,
#blockcart-modal .product-quantity,
#blockcart-modal .vip-blockcart-modal__qty {
display: inline-block;
margin-top: 0.15rem;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-modal-muted);
}
#blockcart-modal .vip-blockcart-modal__attr strong,
#blockcart-modal .product-quantity strong,
#blockcart-modal .vip-blockcart-modal__qty strong {
color: var(--vip-modal-ink);
font-weight: 700;
}
#blockcart-modal .vip-blockcart-modal__line,
#blockcart-modal .cart-content > p:not(.cart-products-count) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 1rem;
row-gap: 0.25rem;
margin: 0 0 0.55rem;
}
#blockcart-modal .cart-products-count,
#blockcart-modal .vip-blockcart-modal__count {
display: block;
margin: 0 0 1rem;
font-weight: 700;
color: var(--vip-modal-ink) !important;
}
#blockcart-modal .vip-blockcart-modal__line .label,
#blockcart-modal .cart-content .label,
#blockcart-modal .cart-content > p:not(.cart-products-count) > span:first-child {
color: var(--vip-modal-muted);
font-weight: 400;
justify-self: start;
}
#blockcart-modal .vip-blockcart-modal__line .value,
#blockcart-modal .cart-content .value,
#blockcart-modal .cart-content > p:not(.cart-products-count) > span:last-child {
color: var(--vip-modal-ink);
font-weight: 600;
float: none !important;
justify-self: end;
text-align: right;
white-space: nowrap;
}
#blockcart-modal .vip-blockcart-modal__line--total,
#blockcart-modal .product-total {
margin-top: 0.85rem;
padding: 0.65rem 0;
border-top: none;
border-radius: 4px;
background: var(--vip-figma-footer-bg);
}
#blockcart-modal .vip-blockcart-modal__line--total .label,
#blockcart-modal .vip-blockcart-modal__line--total .value,
#blockcart-modal .product-total .label,
#blockcart-modal .product-total .value {
font-weight: 800;
color: var(--vip-modal-ink);
}
#blockcart-modal .cart-content-btn,
#blockcart-modal .vip-blockcart-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1.35rem;
}
#blockcart-modal .btn-secondary,
#blockcart-modal .vip-blockcart-modal__continue {
flex: 1 1 12rem;
min-height: 52px;
padding: 0.65rem 1.25rem;
border: 1px solid var(--vip-modal-border) !important;
border-radius: 4px;
background: #fff !important;
color: var(--vip-modal-ink) !important;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: none !important;
}
#blockcart-modal .btn-secondary:hover,
#blockcart-modal .btn-secondary:focus,
#blockcart-modal .vip-blockcart-modal__continue:hover,
#blockcart-modal .vip-blockcart-modal__continue:focus {
border-color: var(--vip-modal-accent) !important;
background: rgba(213, 161, 125, 0.08) !important;
color: var(--vip-modal-accent) !important;
}
#blockcart-modal .btn-primary,
#blockcart-modal .vip-blockcart-modal__checkout {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
flex: 1 1 12rem;
min-height: 52px;
padding: 0.65rem 1.25rem;
border: none !important;
border-radius: 4px;
background: var(--vip-modal-accent) !important;
color: #fff !important;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: none !important;
}
#blockcart-modal .btn-primary:hover,
#blockcart-modal .btn-primary:focus,
#blockcart-modal .vip-blockcart-modal__checkout:hover,
#blockcart-modal .vip-blockcart-modal__checkout:focus {
background: var(--vip-modal-hover) !important;
color: #fff !important;
}
#blockcart-modal .btn-primary .material-icons,
#blockcart-modal .vip-blockcart-modal__checkout .material-icons {
display: none;
}
#blockcart-modal .vip-blockcart-modal__checkout-icon {
display: inline-block;
width: 1rem;
height: 1rem;
flex-shrink: 0;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width: 767.98px) {
#blockcart-modal .divide-right,
#blockcart-modal .vip-blockcart-modal__product-col {
border-right: none;
border-bottom: 1px solid rgba(213, 161, 125, 0.35);
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
}
#blockcart-modal .vip-blockcart-modal__actions {
flex-direction: column;
}
#blockcart-modal .btn-secondary,
#blockcart-modal .btn-primary,
#blockcart-modal .vip-blockcart-modal__continue,
#blockcart-modal .vip-blockcart-modal__checkout {
width: 100%;
flex-basis: auto;
}
}
#footer {
background-color: var(--vip-page-bg);
}
/* --------------------------------------------------------------------------
* /categorias — category overview (bento mosaic; typography = Figma TIENDA)
* Page chrome: .vip-tienda__title / __lead; tiles: .vip-tienda__hero-label on photo.
* -------------------------------------------------------------------------- */
body.vip-categorias-page #wrapper,
body.vip-marcas-page #wrapper {
background: var(--vip-page-bg);
}
body.vip-categorias-page #wrapper .container,
body.vip-marcas-page #wrapper .container {
width: var(--vip-figma-content-width);
max-width: none;
}
body.vip-categorias-page .breadcrumb,
body.vip-marcas-page .breadcrumb {
margin: 0 0 1rem;
padding: 0;
background: transparent;
font-family: var(--vip-font-body);
font-size: 12px;
line-height: 1.4;
}
body.vip-categorias-page .breadcrumb a,
body.vip-marcas-page .breadcrumb a {
color: #878787;
text-decoration: none;
}
body.vip-categorias-page .breadcrumb li:last-child span,
body.vip-marcas-page .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
#module-viptienda-categorias #main,
body.vip-categorias-page #main,
body.vip-marcas-page #main {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body.vip-categorias-page #main .page-content.card,
body.vip-marcas-page #main .page-content.card {
background: transparent;
border: none;
box-shadow: none;
padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
body.vip-categorias-page #main .page-header,
body.vip-marcas-page #main .page-header {
max-width: var(--vip-figma-content-width);
margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
padding: 0;
border: none;
text-align: left;
}
/* Same as .vip-tienda__title (category pages e.g. /tienda/palo-santo). */
#module-viptienda-categorias #main .page-header h1,
body.vip-categorias-page #main .page-header h1,
body.vip-marcas-page #main .page-header h1 {
margin: 0 0 0.75rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
text-align: left;
text-wrap: balance;
}
.vip-categorias__mosaic {
max-width: var(--vip-figma-content-width);
margin: 0 auto;
}
.vip-categorias__stripes {
display: flex;
flex-direction: column;
gap: 10px;
}
.vip-categorias__lazy-wrap {
margin-top: 10px;
}
.vip-categorias__quad {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 992px) {
.vip-categorias__quad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(12rem, 1fr));
gap: 10px;
min-height: clamp(22rem, 36vw, 32rem);
}
.vip-categorias__quad--hero-left .vip-categorias__quad-hero {
grid-column: 1;
grid-row: 1 / span 2;
}
.vip-categorias__quad--hero-left .vip-categorias__quad-rail-top {
grid-column: 2;
grid-row: 1;
}
.vip-categorias__quad--hero-left .vip-categorias__quad-rail-bottom {
grid-column: 2;
grid-row: 2;
}
.vip-categorias__quad--hero-right .vip-categorias__quad-hero {
grid-column: 2;
grid-row: 1 / span 2;
}
.vip-categorias__quad--hero-right .vip-categorias__quad-rail-top {
grid-column: 1;
grid-row: 1;
}
.vip-categorias__quad--hero-right .vip-categorias__quad-rail-bottom {
grid-column: 1;
grid-row: 2;
}
}
.vip-categorias__quad-rail-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.vip-categorias__quad-fallback {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 575px) {
.vip-categorias__quad-fallback {
grid-template-columns: minmax(0, 1fr);
}
}
.vip-categorias__tile {
position: relative;
display: block;
overflow: hidden;
min-height: 12rem;
border-radius: 12px;
border: 1px solid rgba(126, 97, 74, 0.18);
background: #f4ebe8;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vip-categorias__tile:hover,
.vip-categorias__tile:focus-visible {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}
@media (min-width: 992px) {
.vip-categorias__quad-hero .vip-categorias__tile,
.vip-categorias__quad-rail-top .vip-categorias__tile,
.vip-categorias__quad-rail-bottom .vip-categorias__tile {
min-height: 100%;
height: 100%;
}
}
.vip-categorias__tile-media {
position: absolute;
inset: 0;
display: block;
}
.vip-categorias__tile-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--vip-image-zoom-duration) var(--vip-image-zoom-easing);
}
.vip-categorias__tile:hover .vip-categorias__tile-img,
.vip-categorias__tile:focus-visible .vip-categorias__tile-img {
transform: scale(1.04);
}
.vip-categorias__tile-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
}
.vip-categorias__tile-body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.5rem;
padding: clamp(1rem, 2.3cqi, 1.75rem);
box-sizing: border-box;
}
/* Same ink as .vip-tienda__hero-label on category hero banners. */
.vip-categorias__tile-name {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(1.15rem, 2.6vw, 1.75rem);
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
text-wrap: balance;
}
.vip-categorias__tile--hero .vip-categorias__tile-name {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.05;
}
/* PARRAFO on photo cards — Fira Sans 15 / 22.5 white (titles stay tan like .vip-tienda__hero-label). */
.vip-categorias__tile-desc {
margin: 0;
max-width: 36rem;
font-family: var(--vip-font-figma);
font-size: 15px;
line-height: 22.5px;
font-weight: 400;
color: #fff;
text-align: left;
text-wrap: pretty;
}
.vip-categorias__toolbar {
display: flex;
justify-content: center;
margin-top: clamp(2rem, 4vw, 2.75rem);
}
/* `.vip-btn--pill-peach` / `--explore-tan` are scoped on homepage tiles only — mirror here. */
#vip-categorias-load-more.vip-btn--explore-tan,
.vip-categorias__toolbar .vip-btn--explore-tan {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
min-width: 124px;
min-height: 38px;
padding: 0.45rem 1.65rem;
border: none;
border-radius: 999px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-weight: 400;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
letter-spacing: 0;
text-decoration: none;
box-shadow: none;
cursor: pointer;
transition: background 0.15s ease;
}
#vip-categorias-load-more.vip-btn--explore-tan:focus,
#vip-categorias-load-more.vip-btn--explore-tan:focus-visible,
#vip-categorias-load-more.vip-btn--explore-tan:active,
.vip-categorias__toolbar .vip-btn--explore-tan:focus,
.vip-categorias__toolbar .vip-btn--explore-tan:focus-visible,
.vip-categorias__toolbar .vip-btn--explore-tan:active {
outline: none !important;
box-shadow: none !important;
}
#vip-categorias-load-more.vip-btn--explore-tan:hover,
#vip-categorias-load-more.vip-btn--explore-tan:focus-visible,
.vip-categorias__toolbar .vip-btn--explore-tan:hover,
.vip-categorias__toolbar .vip-btn--explore-tan:focus-visible {
background: #c8926a;
color: #fff;
}
.vip-categorias__empty {
text-align: center;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
/* /marcas — full manufacturer catalogue using the homepage Mejores marcas cards. */
.vip-marcas__surface {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding: clamp(2rem, 5vw, 3.5rem) 0;
background-color: var(--vip-header-tan);
background-image: url("../img/home/brands-section-bg.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.vip-marcas__grid {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: var(--vip-figma-card-h);
gap: 30px;
width: var(--vip-figma-content-width);
margin: 0 auto;
}
.vip-marcas__grid .vip-marcas__tile {
width: 100%;
height: 100%;
min-height: 100%;
aspect-ratio: unset;
}
.vip-marcas__tile--logo .vip-brand-tile__bg,
.vip-home-brands__grid .vip-marcas__tile--logo .vip-brand-tile__bg {
box-sizing: border-box;
object-fit: contain;
padding: clamp(1rem, 3cqi, 2rem);
background: #f4ebe8;
}
.vip-marcas__tile--logo .vip-brand-tile__shade,
.vip-home-brands__grid .vip-marcas__tile--logo .vip-brand-tile__shade {
background: linear-gradient(
180deg,
rgba(42, 34, 27, 0.04) 0%,
rgba(42, 34, 27, 0.2) 45%,
rgba(42, 34, 27, 0.78) 100%
);
}
.vip-marcas__tile .vip-brand-tile__desc,
.vip-home-brands__grid .vip-marcas__tile .vip-brand-tile__desc {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.vip-marcas__empty {
text-align: center;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
@media (max-width: 991px) {
.vip-marcas__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(17rem, 42cqi);
gap: clamp(1rem, 3vw, 1.5rem);
}
.vip-marcas__grid .vip-brand-tile--wide,
.vip-marcas__grid .vip-brand-tile--narrow {
grid-column: span 1;
}
}
@media (max-width: 767px) {
.vip-marcas__grid {
width: 100%;
padding-right: var(--vip-shell-gutter);
padding-left: var(--vip-shell-gutter);
}
}
@media (max-width: 575px) {
.vip-marcas__grid {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(17rem, 72cqi);
}
}
/* --------------------------------------------------------------------------
* Checkout /pedido — VIP header + cart-style grid + account form fields
* -------------------------------------------------------------------------- */
#checkout .breadcrumb li:last-child span,
body.page-order .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
#checkout #main.vip-checkout,
body.page-order #main.vip-checkout {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
#checkout .vip-checkout__header,
body.page-order .vip-checkout__header {
margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
#checkout .vip-checkout__title,
body.page-order .vip-checkout__title {
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
}
#checkout .vip-checkout__grid,
body.page-order .vip-checkout__grid {
align-items: flex-start;
gap: clamp(1.5rem, 3vw, 2.5rem) 0;
}
#checkout .vip-checkout__panel,
#checkout .vip-cart__summary,
#checkout .vip-checkout__summary,
body.page-order .vip-checkout__panel,
body.page-order .vip-cart__summary,
body.page-order .vip-checkout__summary {
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
box-shadow: none;
}
#checkout .vip-checkout__panel,
body.page-order .vip-checkout__panel {
padding: clamp(1.25rem, 2.5vw, 2rem);
}
#checkout .vip-cart__summary .card-block,
#checkout .vip-checkout__summary .card-block,
body.page-order .vip-cart__summary .card-block,
body.page-order .vip-checkout__summary .card-block {
padding: clamp(1.25rem, 2.5vw, 2rem);
}
#checkout .vip-checkout__step + .vip-checkout__step,
body.page-order .vip-checkout__step + .vip-checkout__step {
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(213, 161, 125, 0.35);
}
#checkout .vip-checkout__step-title,
body.page-order .vip-checkout__step-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
margin: 0 0 1rem;
padding: 0;
border: none;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vip-figma-brown);
cursor: default;
}
#checkout .checkout-step.-reachable:not(.-complete) .vip-checkout__step-title,
body.page-order .checkout-step.-reachable:not(.-complete) .vip-checkout__step-title {
cursor: pointer;
}
#checkout .vip-checkout__step-badge,
body.page-order .vip-checkout__step-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(213, 161, 125, 0.2);
color: var(--vip-figma-tan);
font-family: var(--vip-font-body);
font-weight: 700;
font-size: 0.95rem;
line-height: 1;
}
#checkout .checkout-step.-current .vip-checkout__step-badge,
body.page-order .checkout-step.-current .vip-checkout__step-badge {
background: var(--vip-figma-tan);
color: #fff;
}
#checkout .checkout-step.-complete .vip-checkout__step-badge,
body.page-order .checkout-step.-complete .vip-checkout__step-badge {
background: var(--vip-figma-tan);
color: #fff;
}
#checkout .vip-checkout__step-badge-done,
body.page-order .vip-checkout__step-badge-done {
font-size: 1.15rem;
line-height: 1;
}
#checkout .checkout-step .step-title .done,
#checkout .checkout-step .step-title > .step-number,
body.page-order .checkout-step .step-title .done,
body.page-order .checkout-step .step-title > .step-number {
display: none;
}
#checkout .vip-checkout__step-label,
body.page-order .vip-checkout__step-label {
flex: 1 1 auto;
min-width: 0;
}
#checkout .vip-checkout__step-edit,
body.page-order .vip-checkout__step-edit {
margin-left: auto;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--vip-figma-tan) !important;
}
#checkout .checkout-step:not(.-complete) .vip-checkout__step-edit,
body.page-order .checkout-step:not(.-complete) .vip-checkout__step-edit {
display: none;
}
#checkout .vip-checkout__step-edit .material-icons,
body.page-order .vip-checkout__step-edit .material-icons {
font-size: 1rem;
vertical-align: middle;
color: var(--vip-figma-tan);
}
#checkout .checkout-step:not(.-current):not(.-reachable) .content,
body.page-order .checkout-step:not(.-current):not(.-reachable) .content {
display: none;
}
#checkout .vip-checkout__step-body,
body.page-order .vip-checkout__step-body {
padding: 0;
}
#checkout .vip-checkout__step-body > p,
#checkout .vip-checkout__step-body .identity,
body.page-order .vip-checkout__step-body > p,
body.page-order .vip-checkout__step-body .identity {
margin: 0 0 0.75rem;
color: #878787;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
#checkout .vip-checkout__step-body a,
body.page-order .vip-checkout__step-body a {
color: var(--vip-figma-tan);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
#checkout .vip-checkout__fields,
#checkout .vip-account__fields,
body.page-order .vip-checkout__fields,
body.page-order .vip-account__fields {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
#checkout .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal),
body.page-order .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) {
display: grid;
grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(4.5rem, 12%);
column-gap: clamp(1rem, 2vw, 1.75rem);
row-gap: 0.35rem;
align-items: start;
margin: 0;
}
#checkout .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"],
body.page-order .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) > [class*="col-"] {
flex: none;
width: auto;
max-width: none;
padding: 0;
margin: 0;
}
#checkout .vip-account__field .vip-account__label,
body.page-order .vip-account__field .vip-account__label {
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-weight: 400;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
text-align: left;
}
#checkout .vip-account__field .form-control,
#checkout .vip-account__field .vip-account__input,
body.page-order .vip-account__field .form-control,
body.page-order .vip-account__field .vip-account__input {
min-height: 44px;
border: none;
border-radius: 22px;
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
caret-color: #fff;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
padding: 0.55rem 1.15rem;
box-shadow: none;
}
#checkout .vip-account__field .form-control:focus,
#checkout .vip-account__field .vip-account__input:focus,
body.page-order .vip-account__field .form-control:focus,
body.page-order .vip-account__field .vip-account__input:focus {
background-color: var(--vip-figma-tan);
color: #fff;
-webkit-text-fill-color: #fff;
box-shadow: 0 0 0 2px rgba(126, 97, 74, 0.35);
}
#checkout .vip-account__field .form-control::placeholder,
#checkout .vip-account__field .vip-account__input::placeholder,
body.page-order .vip-account__field .form-control::placeholder,
body.page-order .vip-account__field .vip-account__input::placeholder {
color: #fff;
opacity: 1;
}
#checkout .vip-account__field select.form-control,
body.page-order .vip-account__field select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.25rem;
}
#checkout .vip-account__optional,
body.page-order .vip-account__optional {
display: flex;
align-items: center;
min-height: 44px;
padding-top: 0;
font-size: 12px;
line-height: 22.5px;
color: #878787;
text-align: right;
font-style: normal;
}
#checkout .vip-account__customer-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#checkout .vip-account__customer-form select.form-control,
body.page-order .vip-account__customer-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.page-order .vip-account__customer-form select.form-control {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
#checkout .vip-checkout__same-address,
body.page-order .vip-checkout__same-address {
display: block;
margin-top: 0.5rem;
}
#checkout .vip-checkout__same-address .vip-account__control,
body.page-order .vip-checkout__same-address .vip-account__control {
grid-column: 1 / -1;
}
#checkout .vip-checkout__actions,
#checkout .form-footer,
body.page-order .vip-checkout__actions,
body.page-order .form-footer {
margin-top: 1.25rem;
}
#checkout .vip-account__submit,
#checkout .btn-primary.continue,
#checkout .form-control-submit,
body.page-order .vip-account__submit,
body.page-order .btn-primary.continue,
body.page-order .form-control-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 9rem;
min-height: 52px;
padding: 0.65rem 1.5rem;
border: none;
border-radius: 4px;
background: var(--vip-figma-tan);
color: #fff;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: none;
}
#checkout .vip-account__submit:hover,
#checkout .vip-account__submit:focus-visible,
#checkout .btn-primary.continue:hover,
#checkout .btn-primary.continue:focus-visible,
body.page-order .vip-account__submit:hover,
body.page-order .vip-account__submit:focus-visible,
body.page-order .btn-primary.continue:hover,
body.page-order .btn-primary.continue:focus-visible {
background: #c8926a;
color: #fff;
}
#checkout .vip-checkout__link-cancel,
#checkout a.cancel-address,
body.page-order .vip-checkout__link-cancel,
body.page-order a.cancel-address {
display: inline-flex;
align-items: center;
min-height: 52px;
margin-right: 1rem;
color: #878787 !important;
font-weight: 400;
text-decoration: none;
}
#checkout .vip-checkout__link-cancel:hover,
#checkout a.cancel-address:hover,
body.page-order .vip-checkout__link-cancel:hover,
body.page-order a.cancel-address:hover {
color: var(--vip-figma-tan) !important;
text-decoration: underline;
}
#checkout .nav-inline .nav-link,
body.page-order .nav-inline .nav-link {
color: #878787;
font-weight: 400;
text-transform: none;
border: none;
border-radius: 0;
padding: 0.35rem 0;
}
#checkout .nav-inline .nav-link.active,
body.page-order .nav-inline .nav-link.active {
color: var(--vip-figma-brown);
font-weight: 700;
border-bottom: 2px solid var(--vip-figma-tan);
background: transparent;
}
#checkout .nav-inline .nav-separator,
body.page-order .nav-inline .nav-separator {
color: rgba(213, 161, 125, 0.55);
}
#checkout .payment-option,
body.page-order .payment-option {
display: flex;
align-items: center;
gap: 0.85rem;
}
#checkout .payment-option .custom-radio,
body.page-order .payment-option .custom-radio {
float: none;
position: relative;
top: 0;
margin: 0;
flex: 0 0 auto;
align-self: center;
}
#checkout .payment-option label,
body.page-order .payment-option label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
line-height: 1.3;
}
#checkout .payment-option label img,
body.page-order .payment-option label img {
display: inline-block;
max-height: 24px;
width: auto;
vertical-align: middle;
}
#checkout .address-item,
body.page-order .address-item,
body#order .vip-checkout-address {
margin-bottom: 1rem;
padding: 1rem 1.15rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 12px;
background: #fff;
}
#checkout .address-item.selected,
body.page-order .address-item.selected,
body#order .vip-checkout-address.selected {
border-color: var(--vip-figma-tan) !important;
box-shadow: 0 0 0 1px rgba(213, 161, 125, 0.25) !important;
}
#checkout .address-item hr,
body.page-order .address-item hr {
display: none;
}
#checkout .vip-checkout-addresses,
body.page-order .vip-checkout-addresses {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
#checkout .vip-checkout-address__select,
body.page-order .vip-checkout-address__select {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin: 0;
cursor: pointer;
}
#checkout .vip-checkout-address__content,
body.page-order .vip-checkout-address__content {
flex: 1 1 auto;
min-width: 0;
}
#checkout .vip-checkout-address__alias,
body.page-order .vip-checkout-address__alias {
display: block;
margin: 0 0 0.45rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: 1rem;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-brown);
}
#checkout .vip-checkout-address__formatted,
body.page-order .vip-checkout-address__formatted {
margin: 0;
font-style: normal;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: #878787;
}
#checkout .vip-address-lines,
body.page-order .vip-address-lines {
margin: 0;
}
#checkout .vip-address-lines__row,
body.page-order .vip-address-lines__row {
display: grid;
grid-template-columns: minmax(6.5rem, 42%) minmax(0, 1fr);
column-gap: 0.75rem;
row-gap: 0.15rem;
margin: 0 0 0.35rem;
}
#checkout .vip-address-lines__label,
body.page-order .vip-address-lines__label {
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 400;
color: #878787;
}
#checkout .vip-address-lines__value,
body.page-order .vip-address-lines__value {
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
font-weight: 400;
color: var(--vip-figma-brown);
}
#checkout .vip-address-lines--fallback,
body.page-order .vip-address-lines--fallback {
color: #878787;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
#checkout .vip-checkout-address__footer,
body.page-order .vip-checkout-address__footer {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(213, 161, 125, 0.22);
}
#checkout .vip-checkout-address__action,
body.page-order .vip-checkout-address__action {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--vip-figma-tan) !important;
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
text-decoration: none;
}
#checkout .vip-checkout-address__action:hover,
body.page-order .vip-checkout-address__action:hover {
color: #c8926a !important;
text-decoration: underline;
}
#checkout .vip-checkout-address__action .material-icons,
body.page-order .vip-checkout-address__action .material-icons {
font-size: 1.05rem;
color: inherit !important;
}
/* Checkout radios — kill Classic wrapper ring; one input-drawn circle only */
#checkout .custom-radio,
#checkout .vip-checkout-radio,
body.page-order .custom-radio,
body.page-order .vip-checkout-radio,
body#checkout section.checkout-step .custom-radio {
display: inline-flex;
flex-shrink: 0;
align-items: flex-start;
justify-content: center;
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 0.15rem;
margin-right: 0;
padding: 0;
vertical-align: top;
cursor: pointer;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#checkout .custom-radio input[type="radio"],
#checkout .vip-checkout-radio__input,
body.page-order .custom-radio input[type="radio"],
body#checkout section.checkout-step .custom-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: static;
display: block;
width: 18px !important;
height: 18px !important;
min-width: 18px;
margin: 0;
padding: 0;
border: 2px solid rgba(213, 161, 125, 0.55);
border-radius: 50%;
background: #fff;
background-image: none;
cursor: pointer;
opacity: 1 !important;
flex-shrink: 0;
float: none;
box-shadow: none;
}
#checkout .custom-radio input[type="radio"]:checked,
#checkout .vip-checkout-radio__input:checked,
body.page-order .custom-radio input[type="radio"]:checked,
body#checkout section.checkout-step .custom-radio input[type="radio"]:checked {
border-color: var(--vip-figma-tan);
background-color: #fff;
background-image: radial-gradient(
circle,
var(--vip-figma-tan) 0,
var(--vip-figma-tan) 4px,
transparent 4.5px
);
box-shadow: none;
}
#checkout .custom-radio input[type="radio"]:focus,
body.page-order .custom-radio input[type="radio"]:focus,
#checkout .custom-radio input[type="radio"]:focus-visible,
body.page-order .custom-radio input[type="radio"]:focus-visible,
body#checkout section.checkout-step .custom-radio input[type="radio"]:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(126, 97, 74, 0.35);
}
#checkout .custom-radio input[type="radio"]:checked:focus,
#checkout .custom-radio input[type="radio"]:checked:focus-visible,
body.page-order .custom-radio input[type="radio"]:checked:focus,
body.page-order .custom-radio input[type="radio"]:checked:focus-visible,
body#checkout section.checkout-step .custom-radio input[type="radio"]:checked:focus {
border-color: var(--vip-figma-tan);
background-color: #fff;
background-image: radial-gradient(
circle,
var(--vip-figma-tan) 0,
var(--vip-figma-tan) 4px,
transparent 4.5px
);
box-shadow: 0 0 0 2px rgba(126, 97, 74, 0.35);
}
#checkout .custom-radio input[type="radio"] + span,
body.page-order .custom-radio input[type="radio"] + span,
body#checkout section.checkout-step .custom-radio input[type="radio"] + span {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
position: absolute !important;
clip: rect(0, 0, 0, 0) !important;
}
#checkout .custom-checkbox input[type="checkbox"] + span,
body.page-order .custom-checkbox input[type="checkbox"] + span {
border-color: rgba(213, 161, 125, 0.55) !important;
}
#checkout .custom-checkbox input[type="checkbox"]:checked + span,
body.page-order .custom-checkbox input[type="checkbox"]:checked + span {
border-color: var(--vip-figma-tan) !important;
background: var(--vip-figma-tan) !important;
}
#checkout .custom-checkbox .checkbox-checked,
body.page-order .custom-checkbox .checkbox-checked {
color: #fff !important;
}
#checkout .address-footer a,
#checkout .add-address a,
body.page-order .address-footer a,
body.page-order .add-address a {
color: var(--vip-figma-tan) !important;
text-decoration: none;
}
#checkout .address-footer a:hover,
#checkout .add-address a:hover,
body.page-order .address-footer a:hover,
body.page-order .add-address a:hover {
text-decoration: underline;
}
#checkout .delivery-option,
#checkout .payment-option,
body.page-order .delivery-option,
body.page-order .payment-option {
margin-bottom: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 4px;
}
/* PrestaShop Checkout: one binary confirmation surface for PayPal/card wallets. */
#checkout .js-payment-binary,
body.page-order .js-payment-binary {
display: none;
}
#checkout .js-payment-binary .accept-cgv,
body.page-order .js-payment-binary .accept-cgv {
display: none;
}
#checkout .js-payment-binary.disabled,
body.page-order .js-payment-binary.disabled {
position: relative;
cursor: not-allowed;
opacity: 0.6;
}
#checkout .js-payment-binary.disabled::before,
body.page-order .js-payment-binary.disabled::before {
position: absolute;
inset: 0;
z-index: 2;
content: "";
}
#checkout .js-payment-binary.disabled .accept-cgv,
body.page-order .js-payment-binary.disabled .accept-cgv {
display: block;
}
#checkout .cart-summary-line,
body.page-order .cart-summary-line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 1rem;
row-gap: 0.25rem;
margin: 0 0 0.65rem;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
}
#checkout .cart-summary-line .label,
body.page-order .cart-summary-line .label {
color: #878787;
font-weight: 400;
justify-self: start;
}
#checkout .cart-summary-line .value,
body.page-order .cart-summary-line .value {
color: var(--vip-figma-brown);
font-weight: 600;
float: none !important;
justify-self: end;
text-align: right;
white-space: nowrap;
}
#checkout .cart-summary-line.cart-total,
body.page-order .cart-summary-line.cart-total {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(213, 161, 125, 0.45);
}
#checkout .cart-summary-line.cart-total .label,
#checkout .cart-summary-line.cart-total .value,
body.page-order .cart-summary-line.cart-total .label,
body.page-order .cart-summary-line.cart-total .value {
font-weight: 800;
color: var(--vip-figma-brown);
}
#checkout .alert-danger,
body.page-order .alert-danger {
border-color: rgba(180, 60, 60, 0.35);
background: rgba(180, 60, 60, 0.08);
color: var(--vip-figma-brown);
}
/* Checkout summary — no Classic cyan on toggles / links */
#checkout .js-show-details,
#checkout .vip-checkout__show-details,
#checkout #js-checkout-summary a:not(.btn),
#checkout .vip-checkout__summary a:not(.btn),
body.page-order .js-show-details,
body.page-order .vip-checkout__show-details,
body.page-order #js-checkout-summary a:not(.btn),
body.page-order .vip-checkout__summary a:not(.btn) {
color: var(--vip-figma-tan) !important;
font-weight: 700;
text-decoration: none;
}
#checkout .js-show-details:hover,
#checkout .js-show-details:focus-visible,
#checkout .vip-checkout__show-details:hover,
#checkout .vip-checkout__show-details:focus-visible,
#checkout #js-checkout-summary a:not(.btn):hover,
#checkout #js-checkout-summary a:not(.btn):focus-visible,
body.page-order .js-show-details:hover,
body.page-order .js-show-details:focus-visible,
body.page-order .vip-checkout__show-details:hover,
body.page-order .vip-checkout__show-details:focus-visible,
body.page-order #js-checkout-summary a:not(.btn):hover,
body.page-order #js-checkout-summary a:not(.btn):focus-visible {
color: #c8926a !important;
text-decoration: underline;
text-underline-offset: 2px;
}
#checkout .js-show-details .material-icons,
#checkout .vip-checkout__show-details .material-icons,
body.page-order .js-show-details .material-icons,
body.page-order .vip-checkout__show-details .material-icons {
color: var(--vip-figma-tan) !important;
font-size: 1.15rem;
line-height: 1;
vertical-align: middle;
}
#checkout .block-promo .promo-code button.btn-primary,
#checkout .cart-voucher .promo-code button.btn-primary,
#checkout .vip-cart-coupons__manual-row .vip-cart-coupons__apply,
body.page-order .block-promo .promo-code button.btn-primary,
body.page-order .cart-voucher .promo-code button.btn-primary,
body.page-order .vip-cart-coupons__manual-row .vip-cart-coupons__apply {
box-sizing: border-box;
height: var(--vip-cart-control-height, 2.75rem) !important;
min-height: var(--vip-cart-control-height, 2.75rem) !important;
max-height: var(--vip-cart-control-height, 2.75rem) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
background: var(--vip-figma-tan);
border: 1px solid var(--vip-figma-tan);
color: #fff;
}
#checkout #js-checkout-summary,
#checkout .vip-checkout__summary,
#checkout .vip-cart__summary,
body.page-order #js-checkout-summary,
body.page-order .vip-checkout__summary,
body.page-order .vip-cart__summary {
--vip-cart-control-height: 2.75rem;
}
@media (max-width: 991px) {
#checkout .vip-checkout__aside,
body.page-order .vip-checkout__aside {
margin-top: 0.5rem;
}
#checkout .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal),
body.page-order .vip-account__field:not(.vip-account__field--checkbox):not(.vip-account__field--legal) {
grid-template-columns: 1fr;
}
#checkout .vip-account__optional,
body.page-order .vip-account__optional {
justify-content: flex-start;
text-align: left;
}
}
/* --------------------------------------------------------------------------
* Order confirmation — VIP tan title + white card panels
* -------------------------------------------------------------------------- */
body#order-confirmation .breadcrumb li:last-child span,
body.page-order-confirmation .breadcrumb li:last-child span {
color: var(--vip-figma-brown);
}
body#order-confirmation #main.vip-order-confirmation,
body.page-order-confirmation #main.vip-order-confirmation {
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size);
line-height: var(--vip-figma-parrafo-lh);
color: var(--vip-figma-brown);
}
body#order-confirmation .vip-order-confirmation__header,
body.page-order-confirmation .vip-order-confirmation__header {
margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
body#order-confirmation .vip-order-confirmation__title,
body.page-order-confirmation .vip-order-confirmation__title {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 57px);
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
}
body#order-confirmation .vip-order-confirmation__title-icon,
body.page-order-confirmation .vip-order-confirmation__title-icon {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--vip-figma-tan);
}
body#order-confirmation .vip-order-confirmation__grid,
body.page-order-confirmation .vip-order-confirmation__grid {
align-items: flex-start;
gap: clamp(1.5rem, 3vw, 2.5rem) 0;
}
body#order-confirmation .vip-order-confirmation__panel,
body.page-order-confirmation .vip-order-confirmation__panel {
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
padding: clamp(1.25rem, 2.5vw, 2rem);
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
box-shadow: none;
}
body#order-confirmation .vip-order-confirmation__intro,
body.page-order-confirmation .vip-order-confirmation__intro {
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
body#order-confirmation .vip-order-confirmation__lead,
body.page-order-confirmation .vip-order-confirmation__lead {
margin: 0;
color: #878787;
}
body#order-confirmation .vip-order-confirmation__lead a,
body.page-order-confirmation .vip-order-confirmation__lead a {
color: var(--vip-figma-tan);
text-decoration: underline;
}
body#order-confirmation .vip-order-confirmation__details-title,
body.page-order-confirmation .vip-order-confirmation__details-title,
body#order-confirmation .vip-order-confirmation__table-title--item.card-title.h3,
body.page-order-confirmation .vip-order-confirmation__table-title--item.card-title.h3 {
margin: 0 0 1rem;
font-family: var(--vip-font-display);
font-weight: 800;
font-size: clamp(1.35rem, 2.5vw, 37px);
line-height: 1.1;
color: var(--vip-figma-brown);
}
body#order-confirmation .vip-order-confirmation__items,
body.page-order-confirmation .vip-order-confirmation__items {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0;
}
body#order-confirmation .vip-order-confirmation__table-head,
body.page-order-confirmation .vip-order-confirmation__table-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 7.75rem 6.25rem 8.75rem;
gap: 0.75rem 1rem;
align-items: end;
margin: 0 0 1.25rem;
}
body#order-confirmation .vip-order-confirmation__table-title.card-title.h3,
body.page-order-confirmation .vip-order-confirmation__table-title.card-title.h3 {
width: auto;
max-width: none;
margin: 0;
padding: 0;
overflow-wrap: normal;
word-break: normal;
}
body#order-confirmation .vip-order-confirmation__table-title--item.card-title.h3,
body.page-order-confirmation .vip-order-confirmation__table-title--item.card-title.h3 {
margin: 0;
}
body#order-confirmation .vip-order-confirmation__table-title--col.card-title.h3,
body.page-order-confirmation .vip-order-confirmation__table-title--col.card-title.h3 {
font-family: var(--vip-font-body);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
}
body#order-confirmation .vip-order-confirmation__details-list,
body.page-order-confirmation .vip-order-confirmation__details-list {
margin: 0;
padding: 0;
list-style: none;
}
body#order-confirmation .vip-order-confirmation__details-list li,
body.page-order-confirmation .vip-order-confirmation__details-list li {
margin: 0 0 0.75rem;
color: var(--vip-figma-brown);
}
body#order-confirmation .vip-order-confirmation__details-list li:last-child,
body.page-order-confirmation .vip-order-confirmation__details-list li:last-child {
margin-bottom: 0;
}
body#order-confirmation .order-confirmation-table .order-line,
body.page-order-confirmation .order-confirmation-table .order-line {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(213, 161, 125, 0.35);
}
body#order-confirmation .order-confirmation-table .order-line:last-child,
body.page-order-confirmation .order-confirmation-table .order-line:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
body#order-confirmation .order-line .label,
body.page-order-confirmation .order-line .label,
body#order-confirmation .order-line a.label,
body.page-order-confirmation .order-line a.label {
color: var(--vip-figma-brown);
font-weight: 400;
}
body#order-confirmation .order-confirmation-table .order-line-total,
body.page-order-confirmation .order-confirmation-table .order-line-total,
body#order-confirmation .order-confirmation-table .order-line-taxes,
body.page-order-confirmation .order-confirmation-table .order-line-taxes {
color: var(--vip-figma-brown);
}
body#order-confirmation .order-confirmation-table tfoot tr,
body.page-order-confirmation .order-confirmation-table tfoot tr {
border-top: 1px solid rgba(213, 161, 125, 0.45);
}
body#order-confirmation .order-confirmation-table tfoot td,
body.page-order-confirmation .order-confirmation-table tfoot td {
padding-top: 0.85rem;
color: var(--vip-figma-brown);
font-weight: 700;
}
body#order-confirmation .vip-order-confirmation__payment-return .definition-list,
body.page-order-confirmation .vip-order-confirmation__payment-return .definition-list {
margin: 0;
}
body#order-confirmation .vip-order-confirmation__payment-return a,
body.page-order-confirmation .vip-order-confirmation__payment-return a {
color: var(--vip-figma-tan);
font-weight: 700;
text-decoration: underline;
}
body#order-confirmation .vip-order-confirmation__payment-return a:hover,
body#order-confirmation .vip-order-confirmation__payment-return a:focus-visible,
body.page-order-confirmation .vip-order-confirmation__payment-return a:hover,
body.page-order-confirmation .vip-order-confirmation__payment-return a:focus-visible {
color: var(--vip-figma-brown);
}
@media (max-width: 991px) {
body#order-confirmation .vip-order-confirmation__aside,
body.page-order-confirmation .vip-order-confirmation__aside {
margin-top: 0.5rem;
}
}
/* =============================================================================
* Focus ring — last in file (wins over Classic theme.css `a:focus { outline: 5px… }`).
* ============================================================================= */
body a:focus,
body a:focus-visible,
body a:active {
outline: none !important;
outline-offset: 0 !important;
}
#footer a:focus,
#footer a:focus-visible,
#footer a:active,
#footer button:focus,
#footer button:focus-visible,
#footer button:active {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* Checkout radios — final cascade win over Classic theme.css */
body#order #checkout .custom-radio,
body.page-order #checkout .custom-radio,
body#order #main.vip-checkout .custom-radio,
body#checkout section.checkout-step .custom-radio {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body#order #checkout .custom-radio input[type="radio"],
body.page-order #checkout .custom-radio input[type="radio"],
body#order #main.vip-checkout .custom-radio input[type="radio"],
body#checkout section.checkout-step .custom-radio input[type="radio"],
body#order #checkout .vip-checkout-radio__input,
body.page-order #checkout .vip-checkout-radio__input {
appearance: none !important;
-webkit-appearance: none !important;
opacity: 1 !important;
position: static !important;
width: 18px !important;
height: 18px !important;
}
body#order #checkout .custom-radio input[type="radio"]:checked,
body.page-order #checkout .custom-radio input[type="radio"]:checked,
body#order #main.vip-checkout .custom-radio input[type="radio"]:checked,
body#checkout section.checkout-step .custom-radio input[type="radio"]:checked,
body#order #checkout .vip-checkout-radio__input:checked,
body.page-order #checkout .vip-checkout-radio__input:checked {
background-color: #fff !important;
background-image: radial-gradient(
circle,
var(--vip-figma-tan) 0,
var(--vip-figma-tan) 4px,
transparent 4.5px
) !important;
box-shadow: none !important;
}
body#order #checkout .custom-radio input[type="radio"] + span,
body.page-order #checkout .custom-radio input[type="radio"] + span,
body#order #main.vip-checkout .custom-radio input[type="radio"] + span,
body#checkout section.checkout-step .custom-radio input[type="radio"] + span {
display: none !important;
}
/* ==========================================================================
Compra rápida — vipquickorder module
========================================================================== */
body.module-vipquickorder-quickorder .vip-account__card,
.vip-quickorder {
box-sizing: border-box;
}
.vip-quickorder .vip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 44px;
padding: 0.65rem 1.5rem;
border-radius: 22px;
border: none;
cursor: pointer;
font-family: var(--vip-font-body);
font-weight: 800;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vip-quickorder .vip-btn--primary {
background: var(--vip-figma-brown);
color: #fff;
}
.vip-quickorder .vip-btn--primary:hover,
.vip-quickorder .vip-btn--primary:focus {
opacity: 0.92;
color: #fff;
}
.vip-quickorder .vip-btn--secondary {
background: #fff;
color: var(--vip-figma-brown);
border: 2px solid var(--vip-figma-tan);
}
.vip-quickorder .vip-btn--secondary:hover,
.vip-quickorder .vip-btn--secondary:focus {
background: rgba(213, 161, 125, 0.12);
color: var(--vip-figma-brown);
}
.vip-quickorder .vip-btn--ghost {
min-height: auto;
padding: 0.35rem 0.75rem;
background: transparent;
color: var(--vip-figma-tan);
border: 2px solid transparent;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.vip-quickorder .vip-btn--ghost:hover,
.vip-quickorder .vip-btn--ghost:focus {
color: var(--vip-figma-brown);
}
.vip-quickorder__toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.vip-quickorder__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.vip-quickorder__filter-label {
font-family: var(--vip-font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--vip-figma-tan);
}
.vip-quickorder__filter-select,
.vip-quickorder__ref-input,
.vip-quickorder__name-input,
.vip-quickorder__combo-select,
.vip-quickorder__qty-input,
.vip-quickorder__category-select {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 4px;
padding: 0.5rem 0.65rem;
font: inherit;
}
.vip-quickorder__filter-select {
min-width: min(280px, 100%);
}
.vip-quickorder__filter-reset {
flex-shrink: 0;
}
.vip-quickorder__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.vip-quickorder__total {
margin: 0;
font-weight: 600;
}
.vip-quickorder__table-wrap {
overflow-x: auto;
margin-bottom: 1.25rem;
}
.vip-quickorder__table {
width: 100%;
min-width: 880px;
border-collapse: collapse;
}
.vip-quickorder__table th,
.vip-quickorder__table td {
padding: 0.65rem 0.5rem;
vertical-align: middle;
border-bottom: 1px solid rgba(213, 161, 125, 0.35);
text-align: left;
}
.vip-quickorder__table th {
font-family: var(--vip-font-display);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--vip-figma-tan);
}
.vip-quickorder__cell {
position: relative;
}
.vip-quickorder__cell--ref,
.vip-quickorder__cell--name {
min-width: 160px;
}
.vip-quickorder__cell--image {
width: 88px;
}
.vip-quickorder__image-link {
display: block;
width: 72px;
height: 72px;
border-radius: 4px;
background: transparent;
}
.vip-quickorder__image {
display: block;
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 4px;
}
.vip-quickorder__row:not(.is-filled) .vip-quickorder__image {
display: none;
}
.vip-quickorder__cell--combo {
min-width: 140px;
}
.vip-quickorder__cell--qty {
width: auto;
min-width: 120px;
}
.vip-quickorder__qty-stepper {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.vip-quickorder__qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 50%;
background: #fff;
color: var(--vip-figma-brown);
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.vip-quickorder__qty-btn:hover:not(:disabled),
.vip-quickorder__qty-btn:focus-visible:not(:disabled) {
border-color: var(--vip-figma-tan);
background: rgba(213, 161, 125, 0.12);
}
.vip-quickorder__qty-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.vip-quickorder__qty-stepper .vip-quickorder__qty-input {
width: 3.25rem;
text-align: center;
}
.vip-quickorder__cell--price {
min-width: 90px;
white-space: nowrap;
}
.vip-quickorder__cell--actions {
width: 88px;
white-space: nowrap;
}
.vip-quickorder__row-cart,
.vip-quickorder__row-delete {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 1;
transition: opacity 0.15s ease, background 0.15s ease;
}
.vip-quickorder__row-cart {
width: 36px;
height: 36px;
margin-right: 0.25rem;
border: 2px solid var(--vip-figma-tan);
border-radius: 50%;
background: var(--vip-figma-tan);
color: #fff;
font-size: 1.125rem;
font-weight: 800;
padding: 0;
}
.vip-quickorder__row-cart .material-icons {
font-size: 1.15rem;
line-height: 1;
color: inherit;
}
.vip-quickorder__row-cart:hover:not(:disabled),
.vip-quickorder__row-cart:focus:not(:disabled) {
opacity: 0.9;
}
.vip-quickorder__row-cart:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.vip-quickorder__row-delete {
width: 32px;
height: 32px;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 50%;
background: #fff;
color: var(--vip-figma-brown);
font-size: 1.25rem;
padding: 0;
}
.vip-quickorder__row-delete:hover,
.vip-quickorder__row-delete:focus {
background: rgba(213, 161, 125, 0.12);
}
.vip-quickorder__row-error,
.vip-quickorder__global-error {
color: #b42318;
font-size: 0.875rem;
margin: 0.35rem 0 0;
}
.vip-quickorder__stock-hint {
margin: 0.35rem 0 0;
font-size: 0.8125rem;
color: var(--vip-muted);
}
.vip-quickorder__suggest {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
z-index: 2000;
background: #fff;
border: 1px solid rgba(213, 161, 125, 0.65);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(29, 29, 29, 0.14);
max-height: min(320px, 50vh);
overflow: hidden auto;
padding: 0.35rem 0;
}
.vip-quickorder__suggest--floating {
position: fixed;
left: auto;
right: auto;
top: auto;
padding: 0.35rem 0;
}
.vip-quickorder__suggest-list {
list-style: none;
margin: 0;
padding: 0;
}
.vip-quickorder__suggest-item {
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(213, 161, 125, 0.22);
}
.vip-quickorder__suggest-item:last-child {
border-bottom: none;
}
.vip-quickorder__suggest-btn {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0.55rem 0.85rem;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
transition: background 0.15s ease;
}
.vip-quickorder__suggest-btn:hover,
.vip-quickorder__suggest-btn:focus {
background: rgba(213, 161, 125, 0.14);
outline: none;
}
.vip-quickorder__suggest-btn:focus-visible {
box-shadow: inset 0 0 0 2px rgba(213, 161, 125, 0.55);
}
.vip-quickorder__suggest-img {
flex-shrink: 0;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px;
border: 1px solid rgba(213, 161, 125, 0.35);
background: #f8f8f8;
}
.vip-quickorder__suggest-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.vip-quickorder__suggest-ref {
display: block;
font-family: var(--vip-font-body);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--vip-figma-tan);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vip-quickorder__suggest-name {
display: block;
font-family: var(--vip-font-body);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.35;
color: var(--vip-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vip-quickorder__suggest-empty {
margin: 0;
padding: 0.85rem 1rem;
font-size: 0.875rem;
line-height: 1.4;
color: var(--vip-muted);
text-align: center;
}
.vip-quickorder__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-end;
}
.vip-quickorder__category-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.vip-quickorder__category-label {
font-size: 0.875rem;
color: var(--vip-muted);
}
.vip-quickorder__modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
}
.vip-quickorder__modal[hidden] {
display: none !important;
}
.vip-quickorder__modal-backdrop {
position: absolute;
inset: 0;
background: rgba(29, 29, 29, 0.45);
}
.vip-quickorder__modal-panel {
position: relative;
z-index: 1;
width: min(520px, calc(100vw - 2rem));
background: var(--vip-figma-brown);
border: 1px solid #fff;
border-radius: 8px;
padding: 1rem;
color: #fff;
font-family: var(--vip-font-body);
box-shadow: 0 18px 48px rgba(29, 29, 29, 0.28);
}
.vip-quickorder__modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.vip-quickorder__modal-header h2 {
margin: 0;
font-family: var(--vip-font-body);
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
color: #fff;
}
.vip-quickorder__modal-close {
border: 0;
background: transparent;
color: #fff;
font-family: var(--vip-font-body);
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
}
.vip-quickorder__modal-body .vip-quickorder__category-select {
border: 1px solid #fff;
background: var(--vip-figma-brown);
color: #fff;
font-family: var(--vip-font-body);
color-scheme: dark;
}
.vip-quickorder__modal-body .vip-quickorder__category-select:focus {
border-color: #fff;
outline: 2px solid rgba(255, 255, 255, 0.35);
outline-offset: 2px;
}
.vip-quickorder__modal-body .vip-quickorder__category-select option {
background: var(--vip-figma-brown);
color: #fff;
font-family: var(--vip-font-body);
}
.vip-quickorder__modal-footer {
margin-top: 0.75rem;
display: flex;
justify-content: flex-end;
}
.vip-quickorder__modal-apply.vip-btn {
border: 1px solid #fff;
background: transparent;
color: #fff;
font-family: var(--vip-font-body);
}
.vip-quickorder__modal-apply.vip-btn:hover,
.vip-quickorder__modal-apply.vip-btn:focus-visible {
border-color: #fff;
background: #fff;
color: var(--vip-figma-brown);
}
/* In-app confirm (replaces window.confirm). */
.vip-quickorder__confirm-panel {
position: relative;
z-index: 1;
width: min(420px, calc(100vw - 2rem));
padding: 1.25rem 1.35rem 1.15rem;
border: 1px solid rgba(213, 161, 125, 0.55);
border-radius: 12px;
background: #fff;
color: var(--vip-figma-brown);
font-family: var(--vip-font-body);
box-shadow: 0 18px 48px rgba(29, 29, 29, 0.28);
}
.vip-quickorder__confirm-title {
margin: 0 0 0.65rem;
font-family: var(--vip-font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--vip-figma-tan);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.vip-quickorder__confirm-message {
margin: 0 0 1.15rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--vip-text);
}
.vip-quickorder__confirm-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem;
}
.vip-quickorder__confirm-actions .vip-btn {
min-height: 44px;
min-width: 7.5rem;
}
@media (max-width: 767px) {
.vip-quickorder__table {
min-width: 720px;
}
}
/* Mobile search-first shell — visible only under 992px (vip-design-mobile.css). */
.vip-quickorder__mobile-search {
display: none;
}
.vip-quickorder__catalog {
margin-bottom: 1.25rem;
}
.vip-quickorder__catalog-hint {
margin: 0 0 0.65rem;
font-size: 0.9375rem;
color: var(--vip-figma-brown-grey, #6b5b52);
}
.vip-quickorder__catalog-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.5rem;
max-height: 280px;
overflow: auto;
padding: 0.5rem;
border: 1px solid rgba(213, 161, 125, 0.45);
border-radius: 8px;
background: #faf7f4;
}
.vip-quickorder__catalog-item {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.45rem 0.55rem;
border: 1px solid transparent;
border-radius: 6px;
background: #fff;
cursor: pointer;
text-align: left;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vip-quickorder__catalog-item:hover,
.vip-quickorder__catalog-item:focus {
border-color: var(--vip-figma-tan);
box-shadow: 0 2px 8px rgba(29, 29, 29, 0.08);
}
.vip-quickorder__catalog-img {
flex: 0 0 48px;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px;
}
.vip-quickorder__catalog-body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.vip-quickorder__catalog-ref {
font-size: 0.75rem;
font-weight: 700;
color: var(--vip-figma-tan);
}
.vip-quickorder__catalog-name {
font-size: 0.875rem;
line-height: 1.25;
color: var(--vip-figma-brown, #8b5a3c);
}
.vip-quickorder__catalog-empty,
.vip-quickorder__catalog-loading {
margin: 0;
padding: 0.75rem;
font-size: 0.9375rem;
color: var(--vip-figma-brown-grey, #6b5b52);
}
/* —— Checkout §4: breakdown, coupons, shipping notices —— */
.vip-checkout-breakdown {
margin-top: 0.5rem;
padding-top: 0.35rem;
border-top: 1px solid rgba(213, 161, 125, 0.35);
}
.vip-checkout-breakdown__line {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.35rem;
font-size: 0.9375rem;
}
.vip-checkout-breakdown__line--total {
margin-top: 0.5rem;
padding-top: 0.45rem;
border-top: 1px solid rgba(213, 161, 125, 0.55);
font-weight: 700;
font-size: 1rem;
}
.vip-cart-coupons {
margin-top: 0.85rem;
padding: 0;
}
.vip-cart-coupons__panel {
margin: 0;
}
.vip-cart-coupons__title {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0 0 0.4rem;
padding: 0;
cursor: pointer;
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.3;
color: var(--vip-figma-brown, #8b5a3c);
list-style: none;
}
.vip-cart-coupons__title::-webkit-details-marker {
display: none;
}
.vip-cart-coupons__list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.vip-cart-coupons__apply-form {
margin: 0;
}
.vip-cart-coupons__btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
padding: 0.45rem 0.75rem;
font-size: 0.8125rem;
line-height: 1.2;
background: var(--vip-figma-tan, #d5a17d);
border-color: var(--vip-figma-tan, #d5a17d);
}
.vip-cart-coupons__btn-value {
font-weight: 700;
opacity: 0.95;
}
.vip-cart-coupons__manual {
padding: 0;
margin: 0;
}
.vip-cart-coupons__manual-label {
display: block;
margin: 0 0 0.35rem;
padding: 0;
text-align: left;
font-size: 0.875rem;
line-height: 1.3;
color: var(--vip-figma-brown-grey, #6b5b52);
}
.vip-cart-coupons__manual-row {
display: flex;
align-items: stretch;
gap: 0.5rem;
width: 100%;
--vip-coupon-control-height: var(--vip-cart-control-height, 2.75rem);
}
.vip-cart-coupons__manual-row .promo-input,
.vip-cart-coupons__manual-row .btn,
.vip-cart-coupons__manual-row .btn.btn-primary,
.vip-cart-coupons__manual-row .vip-cart-coupons__apply {
box-sizing: border-box;
height: var(--vip-coupon-control-height) !important;
min-height: var(--vip-coupon-control-height) !important;
max-height: var(--vip-coupon-control-height) !important;
margin: 0;
font-family: var(--vip-font-body);
font-size: var(--vip-figma-parrafo-size, 0.9375rem);
line-height: 1 !important;
border-radius: 4px;
}
.vip-cart-coupons__manual-row .promo-input {
flex: 1 1 auto;
min-width: 0;
padding: 0 0.85rem !important;
border: 1px solid rgba(213, 161, 125, 0.55);
background: #fff;
color: var(--vip-figma-brown, #8b5a3c);
appearance: none;
}
.vip-cart-coupons__manual-row .promo-input:focus {
outline: none;
border-color: var(--vip-figma-tan, #d5a17d);
}
.vip-cart-coupons__manual-row .btn,
.vip-cart-coupons__manual-row .btn.btn-primary,
.vip-cart-coupons__manual-row .vip-cart-coupons__apply {
display: inline-flex !important;
align-items: center;
justify-content: center;
align-self: stretch;
flex: 0 0 auto;
padding: 0 1.15rem !important;
border: 1px solid var(--vip-figma-tan, #d5a17d) !important;
background: var(--vip-figma-tan, #d5a17d) !important;
color: #fff !important;
font-weight: 400;
white-space: nowrap;
box-shadow: none !important;
}
.vip-cart-coupons__manual-row .btn:hover,
.vip-cart-coupons__manual-row .btn:focus-visible,
.vip-cart-coupons__manual-row .btn.btn-primary:hover,
.vip-cart-coupons__manual-row .btn.btn-primary:focus-visible,
.vip-cart-coupons__manual-row .vip-cart-coupons__apply:hover,
.vip-cart-coupons__manual-row .vip-cart-coupons__apply:focus-visible {
background: #c8926a;
color: #fff;
border-color: #c8926a;
}
/* Icon-only empty error shell — never reserve space until JS shows a message. */
.vip-cart-coupons .promo-code .js-error {
display: none;
margin: 0.5rem 0 0;
padding: 0.5rem 0.75rem;
}
.vip-cart-coupons .promo-code .js-error[style*="display: block"],
.vip-cart-coupons .promo-code .js-error[style*="display:block"],
.vip-cart-coupons .promo-code .js-error.is-visible {
display: flex;
align-items: flex-start;
}
.vip-shipping-notices {
margin: 1rem 0 0.5rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: #faf7f4;
border: 1px solid rgba(213, 161, 125, 0.45);
}
.vip-shipping-notices__line {
margin: 0 0 0.45rem;
font-size: 0.875rem;
line-height: 1.45;
color: var(--vip-figma-brown-grey, #6b5b52);
}
.vip-shipping-notices__line:last-child {
margin-bottom: 0;
}
.vip-checkout-cod-note {
margin: 0 0 1rem;
padding: 0.65rem 0.85rem;
font-size: 0.875rem;
line-height: 1.45;
background: #fff8f0;
border-left: 3px solid var(--vip-figma-tan, #d5a17d);
color: var(--vip-figma-brown, #8b5a3c);
}
.vip-bank-transfer-intro {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--vip-figma-brown-grey, #6b5b52);
}
.vip-bank-transfer-intro__details {
margin: 0.75rem 0;
}
.vip-bank-transfer-intro__details dt {
font-weight: 700;
margin-top: 0.35rem;
}
.vip-bank-transfer-intro__details dd {
margin: 0.15rem 0 0;
}
.vip-bank-transfer-intro__hint {
margin: 0.75rem 0 0;
font-size: 0.875rem;
}
/* VIP maintenance / freeze page (PS_SHOP_ENABLE=0). */
body#maintenance #layout-error,
body.maintenance #layout-error {
min-height: 100vh;
margin: 0;
background: #f6efe6;
}
.vip-maintenance {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.25rem;
background: #f6efe6;
}
.vip-maintenance__card {
width: min(36rem, 100%);
padding: 2.75rem 2rem 2.5rem;
text-align: center;
background: #fff;
border: 2px solid var(--vip-figma-tan, #d5a17d);
border-radius: 16px;
}
.vip-maintenance__mark {
margin: 0 0 1.15rem;
}
.vip-maintenance__icon {
display: block;
width: 88px;
height: 88px;
margin: 0 auto;
}
.vip-maintenance__brand {
margin: 0 0 1.25rem;
color: var(--vip-figma-tan, #d5a17d);
font-family: var(--vip-font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.vip-maintenance__title {
margin: 0 0 0.85rem;
color: var(--vip-figma-brown, #7e614a);
font-family: var(--vip-font-display);
font-size: clamp(1.45rem, 4vw, 1.85rem);
font-weight: 700;
line-height: 1.25;
}
.vip-maintenance__lead,
.vip-maintenance__extra {
margin: 0;
color: var(--vip-figma-brown, #7e614a);
font-size: 1.05rem;
line-height: 1.5;
}
.vip-maintenance__extra {
margin-top: 1rem;
}
/* blockreassurance (cart/checkout): 1.7 dump emits an empty-title twin
for each icon (second language/shop row). Hide those so lock/truck/return
are not painted twice beside the titled row. */
.blockreassurance_product > div:has(> p.block-title:empty):not(:has(> span.block-title)) {
display: none;
}