/* ═══════════════════════════════════════════════════════════════
SUTIL FRAGANCIA — Homepage v3.2.18
Design: Notino MX – Home B (grid utilitario, price-led)
Brand: Noir var(--sf-text) · Marfil var(--sf-bg) · Dorado var(--sf-accent)
Piedra var(--sf-secondary) · Ceniza var(--sf-muted)
Fonts: Cormorant Garamond (serif) · DM Sans (sans)
═══════════════════════════════════════════════════════════════ */
/* ── Base resets ── */
.sf-homepage * { box-sizing: border-box; }
.sf-homepage a { text-decoration: none; color: inherit; }
.sf-homepage img { display: block; max-width: 100%; height: auto; }
.sf-homepage h1, .sf-homepage h2, .sf-homepage h3 { margin: 0; font-weight: 500; }
.sf-homepage p { margin: 0; }
.sf-hp-divider { height: 0.5px; background: var(--sf-secondary); margin: 0; }
/* ── Astra overrides ── */
body.sf-homepage-active .main-header-bar { padding-top: 8px !important; padding-bottom: 8px !important; min-height: unset !important; }
.sf-hp-sec__title,
.sf-hp-hero__h,
.sf-hp-hero__sub,
.sf-hp-banner__label,
.sf-hp-brand__name,
.sf-hp-prod-card__body h3,
.sf-hp-faq__item summary,
.sf-hp-editorial__title,
.sf-hp-samples__title { text-transform: none !important; }
/* ── Section spacing ── */
/* v3.2.23 — Container escalable + padding vertical por breakpoint */
.sf-hp-sec { padding: 32px 0; }
.sf-hp-sec__inner {
padding: 0 16px;
max-width: var(--sf-container-max, 1440px);
margin: 0 auto;
}
@media (min-width: 768px) {
.sf-hp-sec__inner { padding: 0 32px; }
}
@media (min-width: 921px) {
.sf-hp-sec { padding: 56px 0; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
:root { --sf-container-max: 1280px; }
}
@media (min-width: 1600px) and (max-width: 1919px) {
:root { --sf-container-max: 1520px; }
}
@media (min-width: 1920px) {
:root { --sf-container-max: 1680px; }
}
/* v3.2.23 — Section bg alternating (ritmo visual)
Aplicado a las secciones "alternas" para crear ritmo pastel/piedra */
.sf-hp-sec--alt,
.sf-hp-new-arrivals,
.sf-hp-samples { background: var(--sf-secondary); }
/* Bestsellers + flash deals quedan con bg default marfil (sf-bg) para alternar */
.sf-hp-best,
.sf-hp-flash-deals { background: var(--sf-bg); }
/* ── Section headers (v3.2.21 — grid 2-col: stack izquierdo + see-all derecho) ── */
.sf-hp-sec__head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 4px 12px;
margin-bottom: 20px;
}
.sf-hp-sec__eyebrow {
display: block;
grid-column: 1;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
margin-bottom: 6px; /* v3.2.23 — aire entre eyebrow y title */
}
.sf-hp-sec__title {
grid-column: 1;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
font-weight: 500;
color: var(--sf-text);
line-height: 1.1;
letter-spacing: -0.01em;
}
.sf-hp-sec__title--inline { display: inline; }
.sf-hp-sec__see-all {
grid-column: 2;
grid-row: 2;
align-self: end;
font-size: 13px;
color: var(--sf-text);
font-family: 'DM Sans', -apple-system, sans-serif;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
padding-bottom: 4px;
}
.sf-hp-sec__see-all:hover { opacity: 0.7; }
@media (min-width: 921px) {
.sf-hp-sec__title,
.sf-testimonios__title { font-size: 36px; line-height: 1; } /* v3.2.22 — también aplica a testimonios */
.sf-hp-sec__head { margin-bottom: 28px; }
}
/* ── Standalone section title (used by existing functions) ── */
.sf-hp-sec__inner > .sf-hp-sec__title:first-child,
.sf-hp-sec__inner > h2.sf-hp-sec__title {
margin-bottom: 16px;
}
/* ══════════════════════════════════════
SHIPPING BAR
══════════════════════════════════════ */
.sf-shipping-bar {
background: var(--sf-bg);
padding: 7px 16px 4px;
border-bottom: 0.5px solid var(--sf-secondary);
}
.sf-shipping-bar__text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--sf-text);
margin-bottom: 5px;
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-shipping-bar__text strong { font-weight: 500; }
.sf-shipping-bar__amt { font-size: 11px; font-weight: 500; color: var(--sf-accent); }
.sf-shipping-bar__track {
height: 4px;
background: var(--sf-secondary);
border-radius: 99px;
overflow: hidden;
margin-bottom: 4px;
}
.sf-shipping-bar__fill {
height: 100%;
background: var(--sf-accent);
border-radius: 99px;
transition: width 0.4s ease;
}
/* ══════════════════════════════════════
CATEGORY CHIPS (mobile sticky nav)
══════════════════════════════════════ */
.sf-hp-chips {
position: sticky;
top: 0;
z-index: 9;
background: var(--sf-bg);
border-bottom: 0.5px solid var(--sf-secondary);
padding: 0;
}
.sf-hp-chips__track {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 8px 16px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sf-hp-chips__track::-webkit-scrollbar { display: none; }
.sf-hp-chip {
flex-shrink: 0;
scroll-snap-align: start;
background: var(--sf-bg);
color: var(--sf-text);
font-size: 12px;
font-weight: 500;
padding: 5px 14px;
border-radius: 99px;
border: 0.5px solid var(--sf-secondary);
font-family: 'DM Sans', -apple-system, sans-serif;
white-space: nowrap;
transition: background 0.2s, border-color 0.2s;
}
.sf-hp-chip:hover { border-color: var(--sf-accent); background: var(--sf-secondary); }
@media (min-width: 921px) {
.sf-hp-chips { display: none; }
}
/* ══════════════════════════════════════
HERO CAROUSEL
══════════════════════════════════════ */
.sf-hp-hero { background: var(--sf-text); padding: 0; }
.sf-hero-carousel { display: block; position: relative; overflow: hidden; width: 100%; }
/* v3.2.21 — Hero desktop split (2.3fr/1fr) */
.sf-hp-hero-grid { display: block; }
.sf-hp-hero-grid__main { display: block; }
.sf-hp-hero-grid__side { display: none; }
@media (min-width: 921px) {
.sf-hp-hero-grid {
display: grid;
grid-template-columns: 2.3fr 1fr;
gap: 12px;
}
.sf-hp-hero-grid__side {
display: block;
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--sf-text);
}
}
.sf-hp-hero-side {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
color: var(--sf-bg);
display: block;
overflow: hidden;
}
.sf-hp-hero-side__overlay {
position: absolute; inset: 0;
z-index: 0;
}
.sf-hp-hero-side__content {
position: relative;
z-index: 1;
padding: 28px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.sf-hp-hero-side__eyebrow {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sf-accent);
display: block;
margin-bottom: 10px;
}
.sf-hp-hero-side__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 34px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--sf-bg);
margin: 0;
}
.sf-hp-hero-side__bottom {
margin-top: auto;
}
.sf-hp-hero-side__desc {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
line-height: 1.5;
color: rgba(247,243,236,0.85);
margin-bottom: 14px;
max-width: 240px;
}
.sf-hp-hero-side__cta {
display: inline-block;
background: var(--sf-bg);
color: var(--sf-text);
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
padding: 10px 18px;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s;
}
.sf-hp-hero-side__cta:hover { opacity: 0.85; }
/* v3.2.22 — Hero modo "sólo imagen" (sin texto, toda la imagen clickeable) */
.sf-hero-slide--image-only .sf-hero-slide__inner { display: none; }
.sf-hero-slide__link-overlay {
position: absolute;
inset: 0;
z-index: 3;
display: block;
text-decoration: none;
}
/* v3.2.21 — Hero slide badge-above-title */
.sf-hero-slide__badge {
display: inline-block;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 12px;
align-self: flex-start;
}
.sf-hero-slide__badge--sale {
/* v3.2.30: usa los campos dedicados de paleta para ofertas (sale_color + sale_contrast) */
background: var(--sf-sale, #CC3A2F);
color: var(--sf-sale-contrast, #FFFFFF);
}
.sf-hero-slide__badge--hl {
background: var(--sf-accent);
color: var(--sf-accent-contrast, var(--sf-text));
}
.sf-hero-slide__badge--soft {
background: rgba(247,243,236,0.92);
color: var(--sf-text);
border: 0.5px solid var(--sf-secondary);
}
@media (min-width: 921px) {
.sf-hero-slide__badge { font-size: 11px; padding: 5px 12px; margin-bottom: 14px; }
}
.sf-hero-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px 16px 20px;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 0;
}
/* v3.2.22 — active slide stays absolute to fill container; aspect-ratio on parent controls height */
.sf-hero-slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
/* v3.2.23 — Vertical alignment variants (el setting sf_hero_slide_N_text_valign ya emite estas clases
pero antes no hac\u00edan nada porque justify-content quedaba siempre en flex-end) */
.sf-hero-slide--valign-top { justify-content: flex-start; }
.sf-hero-slide--valign-center { justify-content: center; }
.sf-hero-slide--valign-bottom { justify-content: flex-end; }
/* v3.2.72 — Cuando la alineación vertical es "bottom", CTA debe terminar JUSTO
arriba de los dots (no empujado al medio). Dots: bottom 14px desktop / 10 mobile,
alto ~20px. Padding mínimo para que queden pegaditos pero no se superpongan. */
.sf-hero-slide--valign-bottom .sf-hero-slide__inner {
padding-bottom: 38px !important;
}
@media (max-width: 920px) {
.sf-hero-slide--valign-bottom .sf-hero-slide__inner {
padding-bottom: 30px !important;
}
}
/* v3.2.72 FIX CRÍTICO — el overlay cubría al content con z-index:1 sin pointer-events:none.
Por eso los clicks al CTA no llegaban al (el overlay se los comía). Fix: overlay
sin pointer-events (permite pasar clicks), y __inner con z-index explícito superior. */
html body .sf-hero-slide__overlay {
pointer-events: none !important;
}
html body .sf-hero-slide__inner {
position: relative !important;
z-index: 2 !important;
}
.sf-hero-slide__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
z-index: 0;
}
.sf-hero-slide__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.sf-hero-slide__overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.sf-hero-slide__body {
position: relative;
z-index: 2;
}
.sf-hp-hero__body { position: relative; z-index: 1; }
.sf-hp-hero__h {
font-size: 28px;
font-weight: 500;
color: var(--sf-bg);
line-height: 1.15;
margin-bottom: 8px;
font-family: 'Cormorant Garamond', Georgia, serif;
}
.sf-hp-hero__h--compact { font-size: 22px; }
.sf-hp-hero__h--large { font-size: 36px; }
.sf-hp-hero__sub {
font-size: 13px;
color: rgba(247,243,236,0.8);
line-height: 1.5;
margin-bottom: 16px;
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-hp-hero__sub--compact { font-size: 12px; }
.sf-hp-hero__sub--large { font-size: 15px; }
.sf-hp-hero__actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.sf-hp-hero__cta {
display: inline-block;
background: var(--sf-accent);
color: var(--sf-text);
font-size: 13px;
font-weight: 500;
padding: 10px 24px;
border-radius: 2px;
font-family: 'DM Sans', -apple-system, sans-serif;
transition: opacity 0.2s;
flex-shrink: 0;
text-transform: none !important;
letter-spacing: 0 !important;
}
.sf-hp-hero__cta:hover { opacity: 0.88; }
.sf-hp-hero__sp {
display: flex;
align-items: center;
gap: 5px;
}
.sf-hp-hero__stars { color: var(--sf-stars); font-size: 11px; }
.sf-hp-hero__sp span:last-child {
font-size: 11px;
color: rgba(247,243,236,0.7);
font-family: 'DM Sans', -apple-system, sans-serif;
}
/* v3.2.29: Hero carousel dots — estaban renderizadas por PHP (.sf-hero-carousel__dots)
pero sin CSS, por eso no aparecían ni en desktop ni en mobile. */
.sf-hero-carousel__dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.18);
border-radius: 999px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.sf-hero-carousel__dot {
width: 8px;
height: 8px;
min-width: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.sf-hero-carousel__dot:hover { background: rgba(255, 255, 255, 0.85); }
.sf-hero-carousel__dot--active {
background: var(--sf-bg, #FFFFFF) !important;
transform: scale(1.18);
}
/* Mobile: dots un poco más grandes para target táctil */
@media (max-width: 920px) {
.sf-hero-carousel__dots { bottom: 10px; gap: 6px; padding: 5px 9px; }
.sf-hero-carousel__dot { width: 7px; height: 7px; min-width: 7px; }
}
/* Hero carousel controls */
.sf-hero-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
}
.sf-hero-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(247,243,236,0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s;
}
.sf-hero-dot.is-active { background: var(--sf-bg); }
.sf-hero-arrows { display: none; }
@media (min-width: 921px) {
.sf-hero-arrows {
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
justify-content: space-between;
padding: 0 16px;
z-index: 10;
pointer-events: none;
}
.sf-hero-arrow {
pointer-events: auto;
background: rgba(247,243,236,0.2);
border: 0.5px solid rgba(247,243,236,0.3);
color: var(--sf-bg);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: background 0.2s;
}
.sf-hero-arrow:hover { background: rgba(247,243,236,0.35); }
.sf-hp-hero__h { font-size: 52px; }
.sf-hp-hero__sub { font-size: 16px; }
.sf-hp-hero__cta { font-size: 14px; padding: 12px 32px; }
}
/* Hero timer */
.sf-hp-timer {
background: rgba(184,146,74,.12);
border: 0.5px solid var(--sf-accent);
border-radius: 2px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.sf-hp-timer__label { font-size: 11px; color: rgba(247,243,236,0.7); font-family: 'DM Sans', -apple-system, sans-serif; }
.sf-hp-timer__val {
font-size: 20px;
font-weight: 500;
color: var(--sf-accent);
letter-spacing: 0.06em;
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1;
}
.sf-hp-timer__label-wrap { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sf-hp-timer__offer {
font-size: 11px;
color: rgba(247,243,236,0.7);
text-align: right;
flex: 1;
line-height: 1.4;
font-family: 'DM Sans', -apple-system, sans-serif;
}
/* Fallback legacy hero (no image configured) */
.sf-hp-hero--fallback { background: var(--sf-text); padding: 32px 20px 28px; }
.sf-hp-hero--fallback .sf-hp-hero__h { font-size: 28px; margin-bottom: 10px; }
.sf-hp-hero--fallback .sf-hp-hero__sub { font-size: 14px; margin-bottom: 16px; }
@media (min-width: 921px) {
.sf-hp-hero--fallback { padding: 56px 64px 48px; }
.sf-hp-hero--fallback .sf-hp-hero__h { font-size: 48px; }
.sf-hp-hero--fallback .sf-hp-hero__sub { font-size: 16px; }
}
/* ══════════════════════════════════════
TRUST ROW (USPs)
══════════════════════════════════════ */
.sf-hp-usps {
display: flex;
padding: 14px 16px;
gap: 8px;
border-bottom: 0.5px solid var(--sf-secondary);
background: var(--sf-bg);
}
.sf-hp-usps::-webkit-scrollbar { display: none; }
.sf-hp-usp {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.sf-hp-usp__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sf-usp-icon-color, var(--sf-accent));
flex-shrink: 0;
}
.sf-hp-usp__icon svg { width: 20px; height: 20px; display: block; }
.sf-hp-usp__body {
display: flex;
flex-direction: column;
gap: 2px;
}
.sf-hp-usp__txt {
font-size: 12px;
font-weight: 500;
color: var(--sf-text);
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1.25;
}
/* v3.2.21 — subtítulo USP */
.sf-hp-usp__subtitle {
font-size: 11px;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1.25;
}
/* v3.2.21 — variante bordered: fila horizontal con separadores verticales */
.sf-hp-usps--bordered {
display: flex;
flex-direction: column;
padding: 0;
background: var(--sf-card-bg, var(--sf-bg));
border-top: 0.5px solid var(--sf-secondary);
border-bottom: 0.5px solid var(--sf-secondary);
gap: 0;
}
.sf-hp-usps--bordered .sf-hp-usp {
padding: 14px 16px;
border-top: 0.5px solid var(--sf-secondary);
gap: 12px;
}
.sf-hp-usps--bordered .sf-hp-usp:first-child { border-top: none; }
@media (min-width: 768px) {
.sf-hp-usps--bordered {
flex-direction: row;
padding: 0;
}
.sf-hp-usps--bordered .sf-hp-usp {
flex: 1;
border-top: none;
border-left: 0.5px solid var(--sf-secondary);
padding: 18px 20px;
}
.sf-hp-usps--bordered .sf-hp-usp:first-child { border-left: none; }
}
/* Variante card (default) — cada USP en su tarjeta */
.sf-hp-usps--card {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 14px 16px;
}
.sf-hp-usps--card .sf-hp-usp {
background: var(--sf-card-bg, var(--sf-bg));
border: 0.5px solid var(--sf-secondary);
border-radius: 2px;
padding: 10px 12px;
min-height: 48px;
}
@media (min-width: 768px) {
.sf-hp-usps--card {
grid-template-columns: repeat(4, 1fr);
max-width: 1100px;
margin: 0 auto;
gap: 12px;
}
}
/* Variante plain (sin fondo) */
.sf-hp-usps--plain {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 20px;
}
@media (min-width: 921px) {
.sf-hp-usps--plain {
justify-content: center;
gap: 40px;
overflow-x: visible;
}
}
/* Variante inline (todos en un row compacto) */
.sf-hp-usps--inline {
justify-content: space-between;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 16px;
}
.sf-hp-usps--inline .sf-hp-usp {
white-space: nowrap;
}
@media (min-width: 921px) {
.sf-hp-usps--inline {
justify-content: center;
gap: 40px;
overflow-x: visible;
}
}
@media (min-width: 921px) {
.sf-hp-usp__txt { font-size: 13px; }
.sf-hp-usp__icon svg { width: 22px; height: 22px; }
}
/* ══════════════════════════════════════
CATEGORY TILES (banners)
══════════════════════════════════════ */
.sf-hp-banners { background: var(--sf-bg); }
.sf-hp-banners__main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.sf-hp-banners__extra {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* v3.2.25 — Category tiles: imagen fills 100%, sin bg ni border; label overlay default */
.sf-hp-banner {
display: flex;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
text-decoration: none;
transition: opacity 0.2s;
background: transparent;
border: none;
position: relative;
}
.sf-hp-banner:hover { opacity: 0.92; }
.sf-hp-banner__img {
position: relative;
aspect-ratio: 4 / 5;
display: block;
width: 100%;
height: 100%;
background: transparent;
flex-shrink: 0;
/* v3.2.25 — forzar cover siempre para que la imagen ocupe el 100% del contenedor */
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.sf-hp-banner__caption {
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.sf-hp-banner__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
font-weight: 500;
color: var(--sf-text);
line-height: 1.15;
margin: 0;
letter-spacing: -0.01em;
}
.sf-hp-banner__meta {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-muted);
line-height: 1.3;
}
.sf-hp-banner__badge {
position: absolute;
top: 8px;
right: 8px;
background: var(--sf-bg);
color: var(--sf-text);
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 99px;
display: flex;
align-items: center;
gap: 4px;
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-hp-banner__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sf-stock-out, #C0392B);
display: inline-block;
flex-shrink: 0;
}
/* Legacy helper — backwards compat en caso de que algún sitio siga usando label */
.sf-hp-banner__label { display: none; }
/* v3.2.26 — Banners label positions (fallback :not() frágil eliminado, PHP siempre emite una clase válida)
'hidden': oculta caption entero
'below': caption debajo de imagen (layout flex-column)
'overlay' (DEFAULT): caption ENCIMA de la imagen con gradient bottom */
.sf-hp-banners--labels-hidden .sf-hp-banner__caption { display: none; }
/* Overlay — label ENCIMA de la imagen */
.sf-hp-banners--labels-overlay .sf-hp-banner {
position: relative;
}
.sf-hp-banners--labels-overlay .sf-hp-banner__img {
/* imagen ocupa todo el card */
aspect-ratio: 4 / 5;
}
.sf-hp-banners--labels-overlay .sf-hp-banner__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 16px 14px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
/* v3.2.26 — color configurable (default blanco #FFFFFF via palette-system var) */
color: var(--sf-banners-text, #FFFFFF);
}
.sf-hp-banners--labels-overlay .sf-hp-banner__title {
color: var(--sf-banners-text, #FFFFFF);
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.sf-hp-banners--labels-overlay .sf-hp-banner__meta {
color: var(--sf-banners-text, #FFFFFF);
opacity: 0.85;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Layout 'below' (legacy, opt-in): caption debajo de la imagen */
.sf-hp-banners--labels-below .sf-hp-banner {
background: var(--sf-card-bg, #FFFFFF);
border: 0.5px solid var(--sf-secondary);
}
@media (min-width: 921px) {
/* v3.2.25 — Desktop: 4-col uniforme (antes 2fr/1fr/1fr × 2 rows con first span causaba celdas vacías) */
.sf-hp-banners__main {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sf-hp-banners__extra {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sf-hp-banner__title { font-size: 22px; }
.sf-hp-banner__caption { padding: 28px 20px 18px; }
}
/* ══════════════════════════════════════
PRODUCT CARDS (shared by all product grids)
══════════════════════════════════════ */
.sf-hp-best__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sf-hp-prod-card {
display: block;
border-radius: 2px;
overflow: hidden;
border: 0.5px solid var(--sf-secondary);
background: var(--sf-card-bg, var(--sf-bg)) !important;
text-decoration: none;
transition: opacity 0.2s;
}
.sf-hp-prod-card:hover { opacity: 0.92; }
.sf-hp-prod-card__img-wrap {
display: block;
aspect-ratio: var(--sf-prod-card-aspect, 3 / 4);
background: var(--sf-card-img-bg, var(--sf-card-bg, var(--sf-bg)));
position: relative;
overflow: hidden;
/* v3.2.23 — padding default bajado a 0 para que el frasco respire (antes 8px apretaba la imagen) */
padding: var(--sf-img-padding, 0px);
box-sizing: border-box;
}
.sf-hp-prod-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: var(--sf-img-fit-catalog, var(--sf-img-fit, contain));
object-position: center;
}
.sf-hp-prod-card__badge {
position: absolute;
top: 6px;
left: 6px;
background: var(--sf-text);
color: var(--sf-bg);
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: 2px;
font-family: 'DM Sans', -apple-system, sans-serif;
}
/* v3.2.67: revertido el override rojo del badge sobre la imagen (v3.2.66 Bug 10
se equivocó de target). El badge de la imagen queda con el negro del palette
(--sf-savings-bg via palette-system.php). El rojo SÍ va en .sf-hp-prod-card__save
(porcentaje "−58%" junto al precio dentro del bloque __price). Ver regla abajo. */
.sf-hp-prod-card__save {
background: var(--sf-sale, #CC3A2F) !important;
color: var(--sf-sale-contrast, #FFFFFF) !important;
padding: 2px 6px !important;
border-radius: 3px !important;
font-size: 11px !important;
font-weight: 600 !important;
margin-left: 6px !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1.2 !important;
}
.sf-hp-prod-card__badge--status {
left: auto;
right: 6px;
background: var(--sf-accent);
color: var(--sf-text);
}
.sf-hp-prod-card__body {
padding: 10px 10px 14px;
background: var(--sf-card-bg, var(--sf-bg)) !important;
}
.sf-hp-prod-card__brand {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sf-muted);
margin-bottom: 3px;
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-hp-prod-card__body h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
font-weight: 500;
line-height: 1.15;
margin-bottom: 4px;
color: var(--sf-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-hp-prod-card__rating {
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 5px;
}
.sf-hp-prod-card__stars { color: var(--sf-stars); font-size: 11px; }
.sf-hp-prod-card__count {
font-size: 11px;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-hp-prod-card__price {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--sf-text);
line-height: 1;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.sf-hp-prod-card__price del {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-muted);
margin-right: 2px;
text-decoration: line-through;
font-weight: 400;
}
.sf-hp-prod-card__price ins { text-decoration: none; font-weight: 500; }
/* v3.2.21 — variant line + save percent inline */
.sf-hp-prod-card__variant {
display: block;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
color: var(--sf-muted);
letter-spacing: 0.03em;
margin: -2px 0 6px;
line-height: 1.2;
}
.sf-hp-prod-card__save {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--sf-savings-text, #a83b2a); /* v3.2.29: paleta */
letter-spacing: 0.02em;
margin-left: 2px;
}
.sf-hp-prod-card__price .screen-reader-text,
.sf-hp-prod-card__price [class*="screen-reader"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* "Ver todos" button below grid */
.sf-hp-see-all {
display: block;
text-align: center;
margin-top: 16px;
font-size: 12px;
font-weight: 500;
color: var(--sf-text);
border: 0.5px solid var(--sf-secondary);
border-radius: 2px;
padding: 11px 0;
font-family: 'DM Sans', -apple-system, sans-serif;
transition: border-color 0.2s, background 0.2s;
text-decoration: none;
}
.sf-hp-see-all:hover { border-color: var(--sf-text); }
@media (min-width: 921px) {
/* v3.2.24 — grid cols dinámicos: usa --sf-grid-cols si el PHP lo emitió (count real de productos),
fallback a 5 si no existe. Así bestsellers/new/flash se ven siempre llenos sin celdas vacías. */
.sf-hp-best__grid { grid-template-columns: repeat(var(--sf-grid-cols, 5), 1fr); gap: 12px; }
.sf-hp-prod-card__body h3 { font-size: 20px; }
.sf-hp-prod-card__price { font-size: 24px; }
}
/* ══════════════════════════════════════
BESTSELLERS
══════════════════════════════════════ */
.sf-hp-best { background: var(--sf-bg); }
/* ══════════════════════════════════════
NUEVOS LANZAMIENTOS
══════════════════════════════════════ */
.sf-hp-new-arrivals { background: var(--sf-secondary); }
/* ══════════════════════════════════════
EDITORIAL BANNER
══════════════════════════════════════ */
.sf-hp-editorial {
position: relative;
background: var(--sf-text);
overflow: hidden;
min-height: 280px;
display: flex;
flex-direction: column;
}
.sf-hp-editorial__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.sf-hp-editorial__overlay {
position: absolute;
inset: 0;
}
.sf-hp-editorial__content {
position: relative;
z-index: 2;
padding: 40px 24px 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 280px;
}
.sf-hp-editorial__eyebrow {
display: block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
/* v3.2.73 — antes hardcoded a --sf-accent (ignoraba la config del customizer).
Ahora: usa el color custom del eyebrow si está, si no hereda el text_color
de la sección (--sf-editorial-text), y como último fallback el accent. */
color: var(--sf-editorial-eyebrow-color, var(--sf-editorial-text, var(--sf-accent)));
font-family: 'DM Sans', -apple-system, sans-serif;
margin-bottom: 8px;
}
/* v3.2.26 — colores heredan de la var --sf-editorial-text emitida inline en la sección */
.sf-hp-editorial__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 32px;
font-weight: 500;
color: var(--sf-editorial-text, var(--sf-bg));
line-height: 1.1;
margin-bottom: 10px;
}
.sf-hp-editorial__desc {
font-size: 14px;
color: var(--sf-editorial-text, var(--sf-bg));
opacity: 0.85;
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1.55;
margin-bottom: 20px;
max-width: 40ch;
}
.sf-hp-editorial__ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sf-hp-editorial__cta {
display: inline-block;
font-size: 13px;
font-weight: 500;
padding: 10px 24px;
border-radius: 2px;
font-family: 'DM Sans', -apple-system, sans-serif;
transition: opacity 0.2s;
}
.sf-hp-editorial__cta--primary {
background: var(--sf-accent);
color: var(--sf-text);
}
.sf-hp-editorial__cta--ghost {
background: transparent;
color: var(--sf-editorial-text, var(--sf-bg));
border: 0.5px solid currentColor;
opacity: 0.9;
}
.sf-hp-editorial__cta:hover { opacity: 0.85; }
@media (min-width: 921px) {
/* v3.2.21 — Split 2fr/3fr (content dark left + imagen right) */
.sf-hp-editorial--split {
display: grid;
grid-template-columns: 2fr 3fr;
min-height: 460px;
overflow: hidden;
border-radius: 2px;
flex-direction: unset;
}
.sf-hp-editorial--split .sf-hp-editorial__content {
position: relative;
z-index: 2;
min-height: 460px;
width: auto;
padding: 56px 48px;
background: var(--sf-text);
justify-content: space-between;
display: flex;
flex-direction: column;
}
.sf-hp-editorial--split .sf-hp-editorial__img {
position: relative;
inset: auto;
min-height: 460px;
}
.sf-hp-editorial__title { font-size: 52px; letter-spacing: -0.02em; }
.sf-hp-editorial__desc { font-size: 15px; max-width: 320px; }
.sf-hp-editorial__ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
.sf-hp-editorial--split .sf-hp-editorial__cta--primary {
background: var(--sf-bg);
color: var(--sf-text);
}
}
@media (min-width: 1200px) {
.sf-hp-editorial__title { font-size: 64px; line-height: 0.95; }
}
/* ══════════════════════════════════════
FLASH DEALS (ofertas relámpago)
══════════════════════════════════════ */
.sf-hp-flash-deals { background: var(--sf-bg); }
.sf-hp-flash-deals__grid {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 921px) {
/* v3.2.24 — también dinámico (override del --sf-grid-cols por count real) */
.sf-hp-flash-deals__grid { grid-template-columns: repeat(var(--sf-grid-cols, 4), 1fr) !important; }
}
/* ══════════════════════════════════════
BRANDS
══════════════════════════════════════ */
.sf-hp-brands { background: var(--sf-secondary); }
.sf-hp-brands__row {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 4px 0 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.sf-hp-brands__row::-webkit-scrollbar { display: none; }
.sf-hp-brand {
flex-shrink: 0;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
}
.sf-hp-brand__circle {
width: 72px;
height: 72px;
border-radius: 50%;
border: 0.5px solid var(--sf-secondary);
/* v3.2.26 — fondo configurable (default #FFFFFF) */
background: var(--sf-brand-logo-bg, var(--sf-bg));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: border-color 0.2s;
}
.sf-hp-brand:hover .sf-hp-brand__circle { border-color: var(--sf-accent); }
.sf-hp-brand__circle img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
}
.sf-hp-brand__circle span {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--sf-text);
text-align: center;
padding: 0 4px;
}
.sf-hp-brand__name {
font-size: 11px;
color: var(--sf-muted);
text-align: center;
font-family: 'DM Sans', -apple-system, sans-serif;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* v3.2.20 — toggle global para ocultar nombres */
.sf-hp-brands--no-labels .sf-hp-brand__name { display: none; }
/* v3.2.21 — Brands tiles layout (desktop 6-col grid) */
.sf-hp-brand__tile-head { display: none; }
@media (min-width: 921px) {
/* v3.2.22 — Section bg marfil, tiles con bg contrastado (secondary = piedra) */
.sf-hp-brands--tiles { background: var(--sf-bg); }
.sf-hp-brands--tiles .sf-hp-brands__row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
overflow: visible;
padding: 0;
background: var(--sf-secondary);
border: 0.5px solid var(--sf-secondary);
}
.sf-hp-brands--tiles .sf-hp-brand {
background: var(--sf-bg);
padding: 20px 16px;
flex-direction: column;
align-items: stretch;
gap: 10px;
flex-shrink: 1;
transition: background 0.2s;
}
.sf-hp-brands--tiles .sf-hp-brand:hover {
background: var(--sf-secondary);
}
.sf-hp-brands--tiles .sf-hp-brand__tile-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.sf-hp-brands--tiles .sf-hp-brand__monogram {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--sf-text);
}
.sf-hp-brands--tiles .sf-hp-brand__label-official {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sf-muted);
}
.sf-hp-brands--tiles .sf-hp-brand__circle {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 0;
border: none;
/* v3.2.26 — también usa el fondo configurable, fallback a secondary */
background: var(--sf-brand-logo-bg, var(--sf-secondary));
}
.sf-hp-brands--tiles .sf-hp-brand:hover .sf-hp-brand__circle {
border: none;
}
.sf-hp-brands--tiles .sf-hp-brand__circle img {
padding: 10px;
}
.sf-hp-brands--tiles .sf-hp-brand__name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 14px;
font-weight: 500;
color: var(--sf-text);
text-align: left;
max-width: none;
line-height: 1.1;
}
}
/* ══════════════════════════════════════
MUESTRAS
══════════════════════════════════════ */
/* v3.2.21 — Samples con background secondary + layout 1fr/2fr desktop */
.sf-hp-samples {
background: var(--sf-secondary);
padding: 28px 16px;
border-radius: 2px;
}
.sf-hp-samples .sf-hp-sec__inner {
padding: 0;
}
.sf-hp-samples__layout {
display: flex;
flex-direction: column;
gap: 24px;
}
.sf-hp-samples__editorial {
display: flex;
flex-direction: column;
gap: 10px;
}
.sf-hp-samples__image {
margin-bottom: 14px;
aspect-ratio: 4 / 5;
border-radius: 2px;
overflow: hidden;
background: var(--sf-card-img-bg, var(--sf-bg));
}
.sf-hp-samples__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.sf-hp-samples__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
font-weight: 500;
color: var(--sf-text);
line-height: 1.1;
}
.sf-hp-samples__copy {
font-size: 14px;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1.6;
max-width: 42ch;
}
.sf-hp-samples__cta {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: var(--sf-text);
border: 0.5px solid var(--sf-text);
border-radius: 2px;
padding: 10px 24px;
font-family: 'DM Sans', -apple-system, sans-serif;
transition: background 0.2s, color 0.2s;
align-self: flex-start;
}
.sf-hp-samples__cta:hover { background: var(--sf-text); color: var(--sf-bg); }
.sf-hp-samples__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (min-width: 921px) {
.sf-hp-samples {
padding: 40px;
}
.sf-hp-samples__layout {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
gap: 40px;
}
.sf-hp-samples__editorial { max-width: 360px; justify-content: center; padding: 0; }
.sf-hp-samples__title { font-size: 44px; letter-spacing: -0.02em; line-height: 0.95; }
/* v3.2.24 — también dinámico */
.sf-hp-samples__grid { grid-template-columns: repeat(var(--sf-grid-cols, 4), 1fr); gap: 12px; }
}
/* ══════════════════════════════════════
TESTIMONIOS / UGC CARDS — v3.2.23 Robols-style
Section: dark noir bg → cards marfil "pop"
Card: photo full-bleed top 4:5 + author stacked + fecha + stars 20px + mini-card sin CTA
══════════════════════════════════════ */
/* v3.2.67 — Quitar la inversión bg negro/texto blanco que se usaba antes. El user
reportó: "fondo negro detrás de las reseñas, texto y botón no son visibles".
Ahora: bg transparente (hereda del body), texto en palette normal, botón con
borde oscuro sobre bg claro. */
.sf-hp-testimonios { background: transparent; color: var(--sf-text); }
.sf-hp-testimonios .sf-hp-sec__inner { padding-top: 16px; padding-bottom: 16px; }
.sf-hp-testimonios .sf-hp-sec__eyebrow { color: var(--sf-muted); }
.sf-hp-testimonios .sf-testimonios__title,
.sf-hp-testimonios .sf-hp-sec__title { color: var(--sf-text); }
.sf-hp-ugc .sf-ugc-block { margin-top: 0; }
.sf-testimonios--home .sf-testimonios__head,
.sf-testimonios--home .sf-hp-sec__head { margin-bottom: 24px; }
.sf-testimonios__grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
align-items: start !important; /* v3.2.23 — cards de altura natural (masonry feel) */
}
.sf-testimonios__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
text-transform: none !important;
}
/* v3.2.67 — Botón "Ver más opiniones" visible sobre bg claro. Antes era white-on-dark
con border near-white; ahora dark-on-light con border oscuro. */
.sf-testimonios__more {
display: block;
width: fit-content;
min-width: 240px;
margin: 24px auto 0;
padding: 12px 24px;
background: transparent;
border: 1px solid var(--sf-text, #1C1A17);
border-radius: 2px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sf-text, #1C1A17);
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sf-testimonios__more:hover {
background: var(--sf-text, #1C1A17);
color: var(--sf-bg, #FFFFFF);
}
/* Card B — Robols-inspired */
.sf-testi-card--b {
background: var(--sf-bg) !important;
border-radius: 8px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
border: none !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
margin: 0 !important;
padding: 0 !important;
color: var(--sf-text);
}
.sf-testi-card__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 5; /* v3.2.23 — 4:5 portrait como Robols (antes 1:1) */
overflow: hidden;
background: var(--sf-secondary);
flex-shrink: 0;
}
.sf-testi-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.sf-testi-card__initials-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--sf-text);
}
.sf-testi-card__initials {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 32px;
font-weight: 500;
color: var(--sf-bg);
}
.sf-testi-card--b .sf-testi-card__body {
padding: 16px !important;
background: var(--sf-bg) !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
flex: 1 !important;
color: var(--sf-text) !important;
}
/* v3.2.23 — Author row: name + ✓ badge azul + "Verificada" */
.sf-testi-card__author-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sf-testi-card__name {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--sf-text);
line-height: 1.2;
}
.sf-testi-card__verified-badge {
display: inline-flex;
align-items: center;
line-height: 1;
flex-shrink: 0;
}
.sf-testi-card__verified-label {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-muted);
font-weight: 500;
}
.sf-testi-card__meta-row {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-muted);
line-height: 1.3;
}
.sf-testi-card__sep { color: var(--sf-muted); opacity: 0.6; }
.sf-testi-card__stars-row { line-height: 1; margin-top: 2px; }
.sf-testi-stars { color: var(--sf-stars); font-size: 18px; letter-spacing: 1px; }
.sf-testi-star--full { color: var(--sf-stars); }
.sf-testi-star--empty { color: var(--sf-secondary); }
.sf-testi-card__quote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 15px;
font-weight: 400;
color: var(--sf-text);
line-height: 1.45;
margin: 4px 0 0;
}
/* Product mini-card — Robols: solo thumb + name, sin botón, card entera clickeable */
.sf-testi-card__product {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0 0;
margin-top: 8px;
border-top: 1px solid rgba(28,26,23,0.08);
text-decoration: none;
transition: opacity 0.2s;
color: inherit;
}
.sf-testi-card__product:hover { opacity: 0.75; }
.sf-testi-card__product-thumb {
width: 52px;
height: 52px;
object-fit: var(--sf-img-fit-catalog, var(--sf-img-fit, contain));
background: var(--sf-secondary);
border-radius: 4px;
flex-shrink: 0;
}
.sf-testi-card__product-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.sf-testi-card__product-brand {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-testi-card__product-name {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
line-height: 1.25;
}
/* Style A card (product pages) — keep compact */
.sf-testi-card--a {
display: flex;
gap: 10px;
padding: 12px;
background: var(--sf-card-bg, var(--sf-bg));
border: 0.5px solid var(--sf-secondary);
border-radius: 2px;
}
.sf-testi-card--a .sf-testi-card__photo {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.sf-testi-card--a .sf-testi-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sf-text);
color: var(--sf-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
font-family: 'DM Sans', -apple-system, sans-serif;
}
.sf-testi-card--a .sf-testi-card__body { flex: 1; min-width: 0; }
.sf-testi-card--a .sf-testi-card__text {
font-size: 13px;
color: var(--sf-text);
font-family: 'DM Sans', -apple-system, sans-serif;
line-height: 1.5;
}
.sf-testi-card--a .sf-testi-card__meta {
font-size: 11px;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
margin-top: 4px;
}
@media (min-width: 921px) {
.sf-testimonios__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
/* v3.2.23 — desktop mantiene 4:5 pero un pelo m\u00e1s alto se ve mejor; stars m\u00e1s grandes */
.sf-testi-stars { font-size: 20px; }
.sf-testi-card__quote { font-size: 17px; }
.sf-testi-card__name { font-size: 18px; }
.sf-testi-card--b .sf-testi-card__body { padding: 20px !important; gap: 10px !important; }
}
/* ══════════════════════════════════════
FAQ
══════════════════════════════════════ */
.sf-hp-faq { background: var(--sf-bg); }
.sf-hp-faq__list { border-top: 0.5px solid var(--sf-secondary); }
.sf-hp-faq__item { border-bottom: 0.5px solid var(--sf-secondary); }
.sf-hp-faq__item summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--sf-text);
font-family: 'DM Sans', -apple-system, sans-serif;
list-style: none;
gap: 12px;
}
.sf-hp-faq__item summary::-webkit-details-marker { display: none; }
.sf-hp-faq__item summary::after {
content: '+';
font-size: 18px;
font-weight: 400;
flex-shrink: 0;
color: var(--sf-accent);
}
.sf-hp-faq__item[open] summary::after { content: '−'; }
.sf-hp-faq__ans {
padding: 0 0 14px;
font-size: 13px;
color: var(--sf-muted);
line-height: 1.6;
font-family: 'DM Sans', -apple-system, sans-serif;
}
/* ══════════════════════════════════════
INSTAGRAM
══════════════════════════════════════ */
.sf-hp-ig { background: var(--sf-bg); }
.sf-hp-ig__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.sf-hp-ig__item {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
border-radius: 2px;
}
.sf-hp-ig__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.sf-hp-ig__item:hover img { transform: scale(1.04); }
/* ══════════════════════════════════════
WA FLOATING BUTTON
══════════════════════════════════════ */
.sf-wa-fab {
position: fixed;
bottom: 20px;
right: 16px;
z-index: 9999;
width: 52px;
height: 52px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(37,211,102,0.35);
transition: transform 0.2s;
}
.sf-wa-fab:hover { transform: scale(1.06); }
.sf-wa-fab svg { width: 28px; height: 28px; fill: #fff; }
/* ══════════════════════════════════════
BRANDED FOOTER
══════════════════════════════════════ */
.sf-hp-footer { background: var(--sf-text); color: var(--sf-bg); padding: 40px 16px 24px; }
.sf-hp-footer a { color: inherit; text-decoration: none; }
.sf-hp-footer__logo { margin-bottom: 16px; }
.sf-hp-footer__logo img { max-height: 36px; }
.sf-hp-footer__claim {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
font-weight: 400;
color: rgba(247,243,236,0.7);
margin-bottom: 24px;
line-height: 1.4;
}
.sf-hp-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.sf-hp-footer__col-title {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sf-accent);
font-family: 'DM Sans', -apple-system, sans-serif;
margin-bottom: 10px;
}
.sf-hp-footer__links { display: flex; flex-direction: column; gap: 8px; }
.sf-hp-footer__links a {
font-size: 13px;
color: rgba(247,243,236,0.7);
font-family: 'DM Sans', -apple-system, sans-serif;
transition: color 0.2s;
}
.sf-hp-footer__links a:hover { color: var(--sf-bg); }
.sf-hp-footer__social { display: flex; gap: 14px; margin-bottom: 24px; }
.sf-hp-footer__social a {
width: 36px;
height: 36px;
border: 0.5px solid rgba(247,243,236,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: rgba(247,243,236,0.7);
transition: border-color 0.2s, color 0.2s;
}
.sf-hp-footer__social a:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-hp-footer__bottom {
border-top: 0.5px solid rgba(247,243,236,0.15);
padding-top: 16px;
font-size: 11px;
color: rgba(247,243,236,0.4);
font-family: 'DM Sans', -apple-system, sans-serif;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.sf-hp-footer__payments { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-hp-footer__payment-badge {
font-size: 10px;
background: rgba(247,243,236,0.1);
padding: 3px 8px;
border-radius: 2px;
color: rgba(247,243,236,0.6);
font-family: 'DM Sans', -apple-system, sans-serif;
}
/* ══════════════════════════════════════
NEWSLETTER / POPUP
══════════════════════════════════════ */
.sf-popup-overlay {
position: fixed;
inset: 0;
background: rgba(28,26,23,0.55);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.sf-popup {
background: var(--sf-bg);
border-radius: 2px;
padding: 32px 24px 28px;
max-width: 420px;
width: 100%;
position: relative;
}
.sf-popup__close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
cursor: pointer;
color: var(--sf-muted);
font-size: 20px;
padding: 4px;
line-height: 1;
}
.sf-popup__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 26px;
font-weight: 500;
color: var(--sf-text);
margin-bottom: 8px;
}
.sf-popup__sub {
font-size: 13px;
color: var(--sf-muted);
font-family: 'DM Sans', -apple-system, sans-serif;
margin-bottom: 20px;
line-height: 1.5;
}
.sf-popup__form { display: flex; gap: 8px; flex-direction: column; }
.sf-popup__input {
width: 100%;
padding: 10px 14px;
border: 0.5px solid var(--sf-secondary);
border-radius: 2px;
font-size: 14px;
font-family: 'DM Sans', -apple-system, sans-serif;
background: var(--sf-bg);
color: var(--sf-text);
}
.sf-popup__input:focus { outline: none; border-color: var(--sf-accent); }
.sf-popup__btn {
background: var(--sf-accent);
color: var(--sf-text);
font-size: 13px;
font-weight: 500;
padding: 11px 24px;
border: none;
border-radius: 2px;
font-family: 'DM Sans', -apple-system, sans-serif;
cursor: pointer;
transition: opacity 0.2s;
}
.sf-popup__btn:hover { opacity: 0.88; }
/* ═══════════════════════════════════════════════════════════════
MOBILE MENU v3.1.0 — Custom header + drawer
Noir var(--sf-text) · Marfil var(--sf-bg) · Dorado var(--sf-accent)
Piedra var(--sf-secondary) · Ceniza var(--sf-muted)
═══════════════════════════════════════════════════════════════ */
.sf-mobile-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--sf-header-height, 56px);
padding: 0 16px;
background: var(--sf-bg);
border-bottom: 0.5px solid var(--sf-secondary);
box-sizing: border-box;
}
.sf-mobile-header__btn {
background: none;
border: 0;
padding: 8px;
margin: 0;
cursor: pointer;
color: var(--sf-text);
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
}
.sf-mobile-header__btn:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 4px; }
.sf-mobile-header__hamburger {
flex-direction: column;
gap: 4px;
width: 32px;
height: 32px;
}
.sf-mobile-header__bar {
display: block;
width: 18px;
height: 1.5px;
background: var(--sf-text);
}
.sf-mobile-header__logo {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 500;
color: var(--sf-text);
letter-spacing: 0.08em;
text-decoration: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.sf-mobile-header__mono { display: inline-block; }
.sf-mobile-header__actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.sf-mobile-header__cart {
position: relative;
color: var(--sf-text);
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.sf-mobile-header__cart:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 4px; }
.sf-mobile-header__cart-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 99px;
/* v3.2.75 — user reportó: "no aparece el número del contador del carrito".
Causa: --sf-accent + --sf-text podían ser ambos oscuros según la paleta activa,
texto invisible sobre bg oscuro. Fix: colores con contraste garantizado
(rojo/blanco, convención universal para badges de carrito). */
background: var(--sf-sale, #CC3A2F) !important;
color: var(--sf-sale-contrast, #FFFFFF) !important;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ── DRAWER ── */
.sf-drawer {
position: fixed;
inset: var(--sf-header-height, 56px) 0 0 0;
z-index: 9999;
visibility: hidden;
pointer-events: none;
}
.sf-drawer.is-open {
visibility: visible;
pointer-events: auto;
}
.sf-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(28, 26, 23, var(--sf-mm-overlay-alpha, 0.45));
opacity: 0;
transition: opacity 300ms ease;
}
.sf-drawer.is-open .sf-drawer__overlay { opacity: 1; }
.sf-drawer__panel {
position: absolute;
top: 0;
bottom: 0;
width: var(--sf-mm-width, 83%);
max-width: 420px;
background: var(--sf-bg);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
}
.sf-drawer--left .sf-drawer__panel { left: 0; transform: translateX(-100%); }
.sf-drawer--right .sf-drawer__panel { right: 0; transform: translateX(100%); }
.sf-drawer.is-open .sf-drawer__panel { transform: translateX(0); }
.sf-drawer__panel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
.sf-drawer__panel, .sf-drawer__overlay { transition: none; }
}
/* ── Drawer header ── */
.sf-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 0.5px solid var(--sf-secondary);
flex-shrink: 0;
}
.sf-drawer__logo { display: flex; align-items: baseline; gap: 8px; }
.sf-drawer__logo-mono {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--sf-text);
letter-spacing: 0.08em;
}
.sf-drawer__logo-word {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 13px;
font-style: italic;
color: var(--sf-muted);
}
.sf-drawer__close {
background: none;
border: 0;
padding: 8px;
margin: -8px;
cursor: pointer;
color: var(--sf-text);
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
}
.sf-drawer__close:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 4px; }
/* ── Search ── */
.sf-drawer__search {
position: relative;
padding: 14px 20px;
border-bottom: 0.5px solid var(--sf-secondary);
flex-shrink: 0;
}
.sf-drawer__search-icon {
position: absolute;
top: 50%;
left: 32px;
transform: translateY(-50%);
pointer-events: none;
}
.sf-drawer__search input[type="search"] {
width: 100%;
background: var(--sf-bg);
border: 0.5px solid var(--sf-secondary);
border-radius: 8px;
padding: 10px 12px 10px 34px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.sf-drawer__search input[type="search"]::placeholder { color: var(--sf-muted); }
.sf-drawer__search input[type="search"]:focus { outline: 2px solid var(--sf-accent); outline-offset: 0; border-color: var(--sf-accent); }
.sf-drawer__search-submit {
position: absolute;
inset: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
pointer-events: none;
width: 0;
height: 0;
opacity: 0;
}
/* ── Categories ── */
.sf-drawer__nav { border-bottom: 0.5px solid var(--sf-secondary); flex-shrink: 0; padding: 6px 0; }
.sf-drawer__cat {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 20px;
background: none;
border: 0;
text-align: left;
cursor: pointer;
text-decoration: none;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--sf-text);
-webkit-appearance: none;
appearance: none;
transition: background 0.15s;
}
.sf-drawer__cat:hover { background: rgba(232, 227, 217, 0.5); }
.sf-drawer__cat:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
.sf-drawer__cat--highlight .sf-drawer__cat-label,
.sf-drawer__cat--highlight .sf-drawer__cat-chev { color: var(--sf-accent); }
.sf-drawer__cat-label { flex: 1; }
.sf-drawer__cat-chev { transition: transform 200ms ease; color: var(--sf-text); flex-shrink: 0; }
.sf-drawer__cat[aria-expanded="true"] { background: var(--sf-secondary); }
.sf-drawer__cat[aria-expanded="true"] .sf-drawer__cat-chev { transform: rotate(90deg); }
/* Subs */
.sf-drawer__subs {
background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3))));
overflow: hidden;
max-height: 0;
transition: max-height 250ms ease-out;
}
.sf-drawer__subs.is-open {
max-height: 500px;
transition: max-height 300ms ease-in;
}
.sf-drawer__subs[hidden] { display: block; }
.sf-drawer__sub {
display: block;
padding: 10px 20px 10px 36px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
text-decoration: none;
transition: background 0.15s;
}
.sf-drawer__sub:hover { background: var(--sf-secondary); }
.sf-drawer__sub--parent { color: var(--sf-accent); font-weight: 500; font-size: 12px; padding-top: 12px; }
/* ── Brands ── */
.sf-drawer__brands {
padding: 16px 0 14px;
border-bottom: 0.5px solid var(--sf-secondary);
flex-shrink: 0;
}
.sf-drawer__brands-title {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--sf-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 20px 12px;
}
.sf-drawer__brands-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 0 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sf-drawer__brands-row::-webkit-scrollbar { display: none; }
.sf-drawer__brand {
flex: 0 0 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
scroll-snap-align: start;
}
.sf-drawer__brand-circle {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--sf-bg);
border: 0.5px solid var(--sf-secondary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 11px;
font-weight: 500;
color: var(--sf-text);
text-align: center;
padding: 4px;
box-sizing: border-box;
line-height: 1.1;
}
.sf-drawer__brand-circle img { width: 100%; height: 100%; object-fit: cover; }
.sf-drawer__brand-name {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
color: var(--sf-text);
text-align: center;
}
/* ── Secondary links ── */
.sf-drawer__links { padding: 6px 0; }
.sf-drawer__link {
display: block;
padding: 12px 20px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
text-decoration: none;
transition: background 0.15s;
}
.sf-drawer__link:hover { background: rgba(232, 227, 217, 0.5); }
/* ── USPs ── */
.sf-drawer__usps {
padding: 16px 20px;
border-bottom: 0.5px solid var(--sf-secondary);
background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3))));
flex-shrink: 0;
}
.sf-drawer__usp {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-text);
}
.sf-drawer__usp svg { flex-shrink: 0; }
/* ── CTA WhatsApp ── */
.sf-drawer__cta { padding: 16px 20px; flex-shrink: 0; }
.sf-drawer__cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--sf-accent);
color: var(--sf-text);
padding: 14px 16px;
border-radius: 8px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.2s;
text-align: center;
}
.sf-drawer__cta-btn:hover { opacity: 0.88; }
.sf-drawer__cta-btn:focus-visible { outline: 2px solid var(--sf-text); outline-offset: 2px; }
/* ── Body scroll lock when drawer open ── */
body.sf-drawer-open { overflow: hidden; position: relative; }
/* ── Mobile header v3.1.1: logo position variants + logo image support ── */
.sf-mobile-header--logo-center .sf-mobile-header__logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.sf-mobile-header--logo-left .sf-mobile-header__logo {
position: static;
transform: none;
margin-left: 8px;
flex: 1;
}
.sf-mobile-header__logo { display: flex; align-items: center; text-decoration: none; }
.sf-mobile-header__logo .sf-mm-logo-img {
display: block;
max-height: 32px;
width: auto;
height: auto;
}
.sf-drawer__logo .sf-mm-logo-img {
display: block;
max-height: 36px;
width: auto;
height: auto;
}
.sf-drawer__logo { min-height: 36px; }
/* ── Ivory Search overrides inside drawer (v3.1.2) ── */
.sf-drawer__search--ivory {
padding: 14px 20px;
border-bottom: 0.5px solid var(--sf-secondary);
flex-shrink: 0;
}
.sf-drawer__search--ivory form.is-search-form,
.sf-drawer__search--ivory .is-search-form {
position: relative;
margin: 0;
padding: 0;
width: 100%;
background: transparent;
box-shadow: none;
border: 0;
}
.sf-drawer__search--ivory .is-form-style,
.sf-drawer__search--ivory .search-field,
.sf-drawer__search--ivory input[type="search"],
.sf-drawer__search--ivory input[type="text"] {
width: 100% !important;
background: var(--sf-bg) !important;
border: 0.5px solid var(--sf-secondary) !important;
border-radius: 8px !important;
padding: 10px 40px 10px 34px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 13px !important;
color: var(--sf-text) !important;
height: auto !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
margin: 0 !important;
}
.sf-drawer__search--ivory input[type="search"]::placeholder,
.sf-drawer__search--ivory input[type="text"]::placeholder { color: var(--sf-muted) !important; }
.sf-drawer__search--ivory input[type="search"]:focus,
.sf-drawer__search--ivory input[type="text"]:focus {
outline: 2px solid var(--sf-accent) !important;
outline-offset: 0 !important;
border-color: var(--sf-accent) !important;
}
.sf-drawer__search--ivory .search-submit,
.sf-drawer__search--ivory input[type="submit"],
.sf-drawer__search--ivory button[type="submit"] {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: 0 !important;
padding: 6px !important;
margin: 0 !important;
color: var(--sf-muted) !important;
cursor: pointer !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
box-shadow: none !important;
font-size: 0 !important;
}
.sf-drawer__search--ivory .search-submit::before,
.sf-drawer__search--ivory button[type="submit"]::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7167' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Hide Ivory's label / title if it renders one */
.sf-drawer__search--ivory label,
.sf-drawer__search--ivory .is-search-title,
.sf-drawer__search--ivory h3 { display: none !important; }
/* Ajax live results dropdown (if Ivory has it enabled) */
.sf-drawer__search--ivory .is-ajax-search-items,
.sf-drawer__search--ivory .is-ajax-search-result {
background: var(--sf-bg) !important;
border: 0.5px solid var(--sf-secondary) !important;
border-radius: 8px !important;
margin-top: 4px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
box-shadow: 0 2px 8px rgba(28,26,23,0.08) !important;
max-height: 50vh !important;
overflow-y: auto !important;
}
.sf-drawer__search--ivory .is-ajax-search-item {
padding: 10px 12px !important;
font-size: 13px !important;
color: var(--sf-text) !important;
border-bottom: 0.5px solid var(--sf-secondary) !important;
text-decoration: none !important;
}
.sf-drawer__search--ivory .is-ajax-search-item:hover,
.sf-drawer__search--ivory .is-ajax-search-item:focus { background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3)))) !important; }
.sf-drawer__search--ivory .is-ajax-search-item:last-child { border-bottom: 0 !important; }
/* ── Custom AJAX search results in drawer (v3.1.3) ── */
.sf-drawer__search--custom { position: relative; }
.sf-drawer__search-form {
position: relative;
padding: 14px 20px;
border-bottom: 0.5px solid var(--sf-secondary);
}
.sf-drawer__search--custom .sf-drawer__search-icon {
position: absolute;
top: 50%;
left: 32px;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
}
.sf-drawer__search--custom input[type="search"] {
width: 100%;
background: var(--sf-bg);
border: 0.5px solid var(--sf-secondary);
border-radius: 8px;
padding: 10px 12px 10px 34px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s;
}
.sf-drawer__search--custom input[type="search"]::placeholder { color: var(--sf-muted); }
.sf-drawer__search--custom input[type="search"]:focus {
outline: 2px solid var(--sf-accent);
outline-offset: 0;
border-color: var(--sf-accent);
}
.sf-drawer__search-loading {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23B8924A' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' stroke-dasharray='42' stroke-dashoffset='14'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
}
/* Results dropdown */
.sf-drawer__search-results {
background: var(--sf-bg);
border: 0.5px solid var(--sf-secondary);
border-top: 0;
border-radius: 0 0 8px 8px;
margin: -1px 20px 0;
max-height: 55vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 4px 12px rgba(28,26,23,0.08);
}
.sf-drawer__search-results[hidden] { display: none; }
.sf-drawer__search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
border-bottom: 0.5px solid var(--sf-secondary);
transition: background 0.12s;
}
.sf-drawer__search-item:last-child { border-bottom: 0; }
.sf-drawer__search-item:hover,
.sf-drawer__search-item--active { background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3)))); }
.sf-drawer__search-item:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
.sf-drawer__search-thumb {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: var(--sf-img-fit-catalog, var(--sf-img-fit, contain));
background: var(--sf-card-img-bg, var(--sf-bg));
flex-shrink: 0;
}
.sf-drawer__search-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sf-drawer__search-brand {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
color: var(--sf-accent);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.sf-drawer__search-name {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--sf-text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sf-drawer__search-price {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-text);
line-height: 1;
}
.sf-drawer__search-price del { color: var(--sf-muted); font-size: 11px; }
.sf-drawer__search-price ins { text-decoration: none; font-weight: 500; }
/* Empty state */
.sf-drawer__search-empty {
padding: 20px 14px;
text-align: center;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-muted);
line-height: 1.5;
}
.sf-drawer__search-empty strong { color: var(--sf-text); font-weight: 500; }
/* ═══════════════════════════════════════════════════════════════
SHARED SEARCH STYLES v3.1.4
Used by both drawer search and expandable header search
═══════════════════════════════════════════════════════════════ */
/* Loading spinner on input */
.sf-search-loading {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23B8924A' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' stroke-dasharray='42' stroke-dashoffset='14'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
}
/* Result item — shared */
.sf-search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
border-bottom: 0.5px solid var(--sf-secondary);
transition: background 0.12s;
}
.sf-search-item:last-child { border-bottom: 0; }
.sf-search-item:hover,
.sf-search-item--active { background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3)))); }
.sf-search-item:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
.sf-search-thumb {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: var(--sf-img-fit-catalog, var(--sf-img-fit, contain));
background: var(--sf-card-img-bg, var(--sf-bg));
flex-shrink: 0;
}
.sf-search-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sf-search-brand {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
color: var(--sf-accent);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.sf-search-name {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--sf-text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sf-search-name mark {
background: rgba(184, 146, 74, 0.22);
color: var(--sf-text);
padding: 0 1px;
border-radius: 2px;
}
.sf-search-price {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 12px;
color: var(--sf-text);
line-height: 1;
}
.sf-search-price del { color: var(--sf-muted); font-size: 11px; }
.sf-search-price ins { text-decoration: none; font-weight: 500; }
/* Empty state */
.sf-search-empty {
padding: 20px 14px;
text-align: center;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-muted);
line-height: 1.5;
}
.sf-search-empty strong { color: var(--sf-text); font-weight: 500; }
/* Sections: recent + popular suggestions */
.sf-search-section {
border-bottom: 0.5px solid var(--sf-secondary);
padding: 8px 0;
}
.sf-search-section:last-child { border-bottom: 0; }
.sf-search-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 14px;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
color: var(--sf-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sf-search-clear {
background: none;
border: 0;
color: var(--sf-accent);
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
padding: 2px 4px;
-webkit-appearance: none;
appearance: none;
}
.sf-search-clear:hover { text-decoration: underline; }
.sf-search-suggestion {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 14px;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-text);
-webkit-appearance: none;
appearance: none;
transition: background 0.12s;
}
.sf-search-suggestion:hover,
.sf-search-suggestion.sf-search-item--active { background: var(--sf-card-img-bg, var(--sf-bg, var(--sf-card-img-bg, var(--sf-bg, #F3EDE3)))); }
.sf-search-suggestion svg { flex-shrink: 0; }
.sf-search-suggestion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════════
HEADER SEARCH (expandable) v3.1.4
═══════════════════════════════════════════════════════════════ */
.sf-header-search {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10001;
background: var(--sf-bg);
border-bottom: 0.5px solid var(--sf-secondary);
transform: translateY(-100%);
visibility: hidden;
transition: transform 250ms ease, visibility 0s linear 250ms;
}
.sf-header-search.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 250ms ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.sf-header-search { transition: none; }
}
.sf-header-search__form {
position: relative;
display: flex;
align-items: center;
height: 56px;
padding: 0 16px 0 44px;
}
.sf-header-search__icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.sf-header-search__form input[type="search"] {
flex: 1;
background: transparent;
border: 0;
padding: 0 40px 0 0;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 15px;
color: var(--sf-text);
height: 56px;
line-height: 56px;
outline: none;
-webkit-appearance: none;
appearance: none;
min-width: 0;
}
.sf-header-search__form input[type="search"]::placeholder { color: var(--sf-muted); }
.sf-header-search__form input[type="search"]::-webkit-search-cancel-button { display: none; }
.sf-header-search__close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: 0;
padding: 8px;
cursor: pointer;
color: var(--sf-text);
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
}
.sf-header-search__close:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 4px; }
.sf-header-search__results {
background: var(--sf-bg);
max-height: calc(100vh - 56px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: 0.5px solid var(--sf-secondary);
}
.sf-header-search__results[hidden] { display: none; }
/* ═══════════════════════════════════════════════════════════════
v3.1.5 — HARDENING FIXES
1. Price HTML reset inside .sf-search-price
2. Header search forced styles to beat Astra
3. Close button reset
═══════════════════════════════════════════════════════════════ */
/* ── Fix 1: WooCommerce price_html rendering inside search results ── */
.sf-search-price {
display: flex !important;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sf-search-price .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.sf-search-price del {
color: var(--sf-muted) !important;
font-size: 11px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
display: inline-block;
line-height: 1;
}
.sf-search-price ins {
text-decoration: none !important;
color: var(--sf-text) !important;
font-weight: 600 !important;
font-size: 13px !important;
background: transparent !important;
display: inline-block;
line-height: 1;
}
.sf-search-price .woocommerce-Price-amount,
.sf-search-price bdi,
.sf-search-price .woocommerce-Price-currencySymbol {
font-family: 'DM Sans', -apple-system, sans-serif !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
text-decoration: inherit !important;
display: inline;
line-height: 1;
}
/* ── Fix 2: Header search — forced styles to beat Astra ── */
#sf-header-search {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
z-index: 2147483647 !important;
background: var(--sf-bg) !important;
border-bottom: 0.5px solid var(--sf-secondary) !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-100%);
visibility: hidden;
transition: transform 250ms ease, visibility 0s linear 250ms;
box-shadow: 0 4px 20px rgba(28, 26, 23, 0.08);
}
#sf-header-search.is-open {
transform: translateY(0) !important;
visibility: visible !important;
transition: transform 250ms ease, visibility 0s linear 0s !important;
}
#sf-header-search .sf-header-search__form {
position: relative !important;
display: flex !important;
align-items: center !important;
height: 56px !important;
padding: 0 50px 0 44px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#sf-header-search .sf-header-search__icon {
position: absolute !important;
left: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
}
#sf-header-search input[type="search"],
#sf-header-search .sf-header-search__form input[type="search"] {
flex: 1 !important;
width: 100% !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 15px !important;
color: var(--sf-text) !important;
height: 56px !important;
line-height: 56px !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#sf-header-search input[type="search"]::placeholder {
color: var(--sf-muted) !important;
opacity: 1 !important;
}
#sf-header-search input[type="search"]::-webkit-search-cancel-button,
#sf-header-search input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none !important;
display: none !important;
}
/* Close button — nuclear reset to beat Astra's button styles */
#sf-header-search .sf-header-search__close,
button#sf-header-search-close {
all: unset !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
color: var(--sf-text) !important;
box-shadow: none !important;
font-size: 0 !important;
line-height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#sf-header-search .sf-header-search__close svg {
width: 16px !important;
height: 16px !important;
stroke: var(--sf-text) !important;
pointer-events: none;
}
#sf-header-search .sf-header-search__close:hover {
background: rgba(28, 26, 23, 0.06) !important;
}
/* Results dropdown */
#sf-header-search .sf-header-search__results {
background: var(--sf-bg) !important;
max-height: calc(100vh - 56px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-top: 0.5px solid var(--sf-secondary) !important;
margin: 0 !important;
padding: 0 !important;
}
#sf-header-search .sf-header-search__results[hidden] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.1.7 — iOS DEFENSES for header + drawer interactive elements
- touch-action: manipulation → disables 300ms double-tap zoom delay
- -webkit-tap-highlight-color: transparent → removes black tap circle
- font-size: 16px on inputs → prevents Safari iOS auto-zoom on focus
═══════════════════════════════════════════════════════════════ */
/* Header buttons */
.sf-mobile-header__btn,
.sf-mobile-header__hamburger,
.sf-mobile-header__cart,
.sf-mobile-header__search-btn,
.sf-mobile-header__logo {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
/* Drawer interactive elements */
.sf-drawer button,
.sf-drawer a,
.sf-drawer__close,
.sf-drawer__cat,
.sf-drawer__cat-toggle,
.sf-drawer__sub-link,
.sf-drawer__brand,
.sf-drawer__link,
.sf-drawer__wa-cta {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Header search interactive elements */
#sf-header-search button,
#sf-header-search a,
.sf-header-search__close,
.sf-header-search__form {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
/* Search inputs — font-size 16px minimum prevents iOS Safari auto-zoom on focus */
#sf-header-search input[type="search"],
.sf-drawer__search input[type="search"],
.sf-drawer__search-form input[type="search"] {
font-size: 16px !important;
}
/* Search results items */
.sf-search-item,
.sf-search-suggestion,
.sf-search-clear {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* ═══════════════════════════════════════════════════════════════
v3.1.8 — HAMBURGER + HEADER BUTTONS FIX
- Override Astra's :focus styles that apply black circle bg
- Subtle feedback on hover/active without intrusive visuals
═══════════════════════════════════════════════════════════════ */
.sf-mobile-header__hamburger,
.sf-mobile-header__search-btn,
.sf-mobile-header__btn,
.sf-mobile-header__hamburger:focus,
.sf-mobile-header__search-btn:focus,
.sf-mobile-header__btn:focus,
.sf-mobile-header__hamburger:active,
.sf-mobile-header__search-btn:active,
.sf-mobile-header__btn:active,
.sf-mobile-header__hamburger:hover,
.sf-mobile-header__search-btn:hover,
.sf-mobile-header__btn:hover,
.sf-mobile-header__hamburger:focus-visible,
.sf-mobile-header__search-btn:focus-visible,
.sf-mobile-header__btn:focus-visible {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
color: var(--sf-text) !important;
}
/* Subtle feedback only on touch/active, never sticking after release */
.sf-mobile-header__hamburger:active,
.sf-mobile-header__search-btn:active,
.sf-mobile-header__btn:active {
background-color: rgba(28, 26, 23, 0.08) !important;
border-radius: 6px !important;
}
/* Make sure hamburger bars are always visible */
.sf-mobile-header__hamburger .sf-mobile-header__bar {
background-color: var(--sf-text) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Cart icon: same defensive treatment */
.sf-mobile-header__cart,
.sf-mobile-header__cart:focus,
.sf-mobile-header__cart:active,
.sf-mobile-header__cart:hover,
.sf-mobile-header__cart:focus-visible {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.sf-mobile-header__cart:active {
background-color: rgba(28, 26, 23, 0.08) !important;
border-radius: 6px !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.1.9 — Micro-claims + Footer expandido
═══════════════════════════════════════════════════════════════ */
/* Footer expandido */
.sf-hp-footer {
background: var(--sf-text);
color: var(--sf-bg);
padding: 40px 20px 20px;
margin-top: 40px;
}
.sf-hp-footer__top {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 1100px;
margin: 0 auto 24px;
}
.sf-hp-footer__brand {
text-align: center;
}
.sf-hp-footer__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
/* v3.2.25 — Logo image opcional (reemplaza monograma+wordmark si existe).
El footer tiene bg oscuro, subir logo en blanco/light. */
.sf-hp-footer__logo-img {
max-height: 48px;
width: auto;
display: block;
}
.sf-hp-footer__monogram {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
font-weight: 500;
color: var(--sf-bg);
line-height: 1;
}
.sf-hp-footer__wordmark {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 20px;
color: var(--sf-bg);
letter-spacing: 0.02em;
}
.sf-hp-footer__claim {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-secondary);
margin: 0 0 16px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.sf-hp-footer__social {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 16px;
}
.sf-hp-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(247, 243, 236, 0.1);
color: var(--sf-bg);
transition: background 0.2s;
text-decoration: none;
}
.sf-hp-footer__social-link:hover {
background: rgba(184, 146, 74, 0.4);
color: var(--sf-bg);
}
.sf-hp-footer__social-link svg {
width: 18px;
height: 18px;
}
.sf-hp-footer__cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 16px;
padding: 0;
}
.sf-hp-footer__col {
min-width: 0;
}
.sf-hp-footer__col-title {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--sf-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 10px;
}
.sf-hp-footer__col-links {
list-style: none;
margin: 0;
padding: 0;
}
.sf-hp-footer__col-links li {
margin-bottom: 6px;
}
.sf-hp-footer__col-links a {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--sf-secondary);
text-decoration: none;
transition: color 0.2s;
}
.sf-hp-footer__col-links a:hover {
color: var(--sf-accent);
}
.sf-hp-footer__bottom {
border-top: 1px solid rgba(247, 243, 236, 0.1);
padding-top: 16px;
margin-top: 16px;
text-align: center;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
color: var(--sf-muted);
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.sf-hp-footer__bottom a {
color: var(--sf-secondary);
text-decoration: none;
margin-right: 12px;
}
.sf-hp-footer__bottom a:hover {
color: var(--sf-accent);
}
.sf-hp-footer__copy {
display: block;
margin-top: 8px;
}
@media (min-width: 768px) {
.sf-hp-footer {
padding: 56px 40px 24px;
}
.sf-hp-footer__top {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
}
.sf-hp-footer__brand {
text-align: left;
flex: 0 0 280px;
}
.sf-hp-footer__logo,
.sf-hp-footer__social {
justify-content: flex-start;
}
.sf-hp-footer__claim {
margin-left: 0;
margin-right: 0;
}
.sf-hp-footer__cols {
flex: 1;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.sf-hp-footer__bottom {
text-align: left;
}
.sf-hp-footer__copy {
display: inline;
margin-top: 0;
margin-left: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════
v3.1.10 — Pulido visual Fase B
1. Pills del tab a misma altura
2. Cards de producto con fondo marfil
3. Precio nuevo más prominente que tachado
4. WhatsApp flotante en color brand
5. CTA "Ver todo el catálogo" en dorado outline
6. Nombres de producto en Cormorant
7. Tab de categorías sin scroll horizontal desbordado en mobile
═══════════════════════════════════════════════════════════════ */
/* 2. Cards de producto — respeta --sf-card-bg configurable (v3.2.26 fix del hardcode var(--sf-bg)) */
.sf-hp-prod-card,
.sf-hp-best__grid .sf-hp-prod-card {
background: var(--sf-card-bg, var(--sf-bg)) !important;
border: 0.5px solid var(--sf-secondary);
border-radius: 10px;
overflow: hidden;
}
.sf-hp-prod-card__img-wrap,
.sf-hp-prod-card__img-wrap img {
background: var(--sf-card-img-bg, var(--sf-card-bg, var(--sf-bg))) !important;
}
/* 3. Precio: nuevo más prominente que tachado */
.sf-hp-prod-card__price {
display: flex !important;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.sf-hp-prod-card__price del,
.sf-hp-prod-card__price del .woocommerce-Price-amount,
.sf-hp-prod-card__price del bdi {
color: var(--sf-muted) !important;
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
order: 2;
}
.sf-hp-prod-card__price ins,
.sf-hp-prod-card__price ins .woocommerce-Price-amount,
.sf-hp-prod-card__price ins bdi {
color: var(--sf-text) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: none !important;
background: transparent !important;
order: 1;
}
.sf-hp-prod-card__price .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
}
/* 6. Nombres de producto en Cormorant */
.sf-hp-prod-card__body h3,
.sf-hp-prod-card h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--sf-text) !important;
letter-spacing: 0.005em !important;
margin: 6px 0 4px !important;
}
@media (min-width: 768px) {
.sf-hp-prod-card__body h3 {
font-size: 17px !important;
}
}
/* 5. CTA "Ver todo el catálogo" — dorado outline */
.sf-hp-see-all,
a.sf-hp-see-all {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 28px !important;
background: transparent !important;
border: 1.5px solid var(--sf-accent) !important;
border-radius: 999px !important;
color: var(--sf-accent) !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
transition: all 0.2s ease;
margin-top: 20px;
}
.sf-hp-see-all:hover {
background: var(--sf-accent) !important;
color: var(--sf-text) !important;
}
/* 4. WhatsApp flotante — integrado al brand (anillo dorado) */
.sf-hp-wa-float {
background: #25D366 !important;
border: 3px solid var(--sf-accent) !important;
box-shadow: 0 4px 16px rgba(28, 26, 23, 0.18), 0 0 0 2px rgba(184, 146, 74, 0.15) !important;
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sf-hp-wa-float:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(28, 26, 23, 0.25), 0 0 0 3px rgba(184, 146, 74, 0.25) !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.1.11 — WooCommerce catalog cards aligned with homepage
═══════════════════════════════════════════════════════════════ */
/* Card container */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: var(--sf-bg) !important;
border: 0.5px solid var(--sf-secondary) !important;
border-radius: 10px !important;
overflow: hidden !important;
padding: 0 0 14px !important;
margin-bottom: 16px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
position: relative;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(28, 26, 23, 0.08);
}
/* Image wrap */
.woocommerce ul.products li.product a img {
background: var(--sf-bg) !important;
margin: 0 !important;
padding: 12px !important;
box-sizing: border-box;
}
/* Position context for badges */
.woocommerce ul.products li.product .sf-cat-card__badge {
position: absolute;
z-index: 2;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 5px 9px;
border-radius: 4px;
line-height: 1;
text-transform: none;
pointer-events: none;
}
.sf-cat-card__badge--savings {
top: 10px;
left: 10px;
background: var(--sf-text);
color: var(--sf-bg);
}
.sf-cat-card__badge--best {
top: 10px;
right: 10px;
background: var(--sf-accent);
color: var(--sf-text);
}
/* Brand label above title */
.sf-cat-card__brand {
display: block;
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--sf-accent);
text-transform: uppercase;
line-height: 1;
margin: 4px 14px 4px;
text-align: left;
}
/* Product title in Cormorant */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--sf-text) !important;
margin: 2px 14px 6px !important;
padding: 0 !important;
text-align: left !important;
text-transform: none !important;
}
@media (min-width: 768px) {
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
font-size: 17px !important;
}
}
/* Rating */
.sf-cat-card__rating {
display: flex;
align-items: center;
gap: 6px;
margin: 0 14px 6px;
}
.sf-cat-card__stars {
color: var(--sf-accent);
font-size: 13px;
letter-spacing: 0.5px;
line-height: 1;
}
.sf-cat-card__count {
font-family: 'DM Sans', -apple-system, sans-serif;
font-size: 11px;
color: var(--sf-muted);
line-height: 1;
}
/* Price */
.woocommerce ul.products li.product .price {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 14px !important;
padding: 0 !important;
color: var(--sf-text) !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del bdi {
color: var(--sf-muted) !important;
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
order: 2 !important;
opacity: 1 !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount,
.woocommerce ul.products li.product .price > bdi {
color: var(--sf-text) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: none !important;
background: transparent !important;
order: 1 !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
}
.woocommerce ul.products li.product .price .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
}
/* Hide add-to-cart buttons in shop loop (defensive — also removed via PHP) */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.button {
display: none !important;
}
/* Make the whole card clickable feel — the title and image are already tags */
.woocommerce ul.products li.product a {
text-decoration: none !important;
}
/* Hide the WC sale "¡Oferta!" default flash (we have our own savings badge) */
.woocommerce ul.products li.product .onsale {
display: none !important;
}
/* Sticky filter button on mobile (nice-to-have) */
@media (max-width: 768px) {
.astra-shop-filter-button.ast-flyout-filter {
position: sticky;
top: 60px;
z-index: 5;
background: var(--sf-bg);
padding: 8px 12px !important;
border-radius: 999px;
border: 0.5px solid var(--sf-secondary);
box-shadow: 0 2px 8px rgba(28, 26, 23, 0.06);
}
}
/* Category title (Caballero, Dama, etc) — make sure Cormorant applies */
.woocommerce-products-header__title.page-title,
.woocommerce-page .page-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
color: var(--sf-text) !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.2.11 — DESKTOP HEADER (sticky, palette-aware)
Solo visible en pantallas >= breakpoint (921px default).
Media query scope viene inline desde sf-dh-vars en wp_head.
═══════════════════════════════════════════════════════════════ */
.sf-desktop-header {
position: relative;
z-index: 9998;
background: var(--sf-bg);
color: var(--sf-text);
height: var(--sf-dh-height, 70px);
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
font-family: "DM Sans", -apple-system, Helvetica, Arial, sans-serif;
}
.sf-desktop-header--sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9998;
}
.sf-desktop-header--border {
border-bottom: 0.5px solid var(--sf-secondary);
}
.sf-desktop-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1516px;
margin: 0 auto;
padding: 0 32px;
gap: 24px;
box-sizing: border-box;
}
.sf-desktop-header__logo {
flex: 0 0 auto;
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.sf-desktop-header__logo-img {
height: var(--sf-dh-logo-height, 40px) !important;
width: auto !important;
max-width: 240px;
object-fit: contain;
display: block;
}
.sf-desktop-header__logo-mono {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 600;
font-size: 30px;
letter-spacing: 0.04em;
color: var(--sf-text);
line-height: 1;
}
.sf-desktop-header__nav {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.sf-desktop-header__nav-list {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.sf-desktop-header__nav-item {
margin: 0;
padding: 0;
}
.sf-desktop-header__nav-link {
display: inline-block;
padding: 8px 0;
font-size: 14px;
font-weight: 500;
color: var(--sf-text);
text-decoration: none;
letter-spacing: 0.02em;
position: relative;
transition: color 0.2s ease;
}
.sf-desktop-header__nav-link:hover,
.sf-desktop-header__nav-link:focus-visible {
color: var(--sf-accent);
outline: none;
}
.sf-desktop-header__nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 1px;
background: var(--sf-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.sf-desktop-header__nav-link:hover::after,
.sf-desktop-header__nav-link:focus-visible::after {
transform: scaleX(1);
}
.sf-desktop-header__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
.sf-desktop-header__btn {
background: none;
border: 0;
padding: 8px;
margin: 0;
cursor: pointer;
color: var(--sf-text);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 6px;
position: relative;
transition: color 0.2s ease, background 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.sf-desktop-header__btn:hover,
.sf-desktop-header__btn:focus-visible {
color: var(--sf-accent);
outline: none;
background: var(--sf-secondary);
}
.sf-desktop-header__cart {
position: relative;
}
.sf-desktop-header__cart-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
/* v3.2.75 — rojo/blanco con contraste garantizado (convención universal e-commerce) */
background: var(--sf-sale, #CC3A2F) !important;
color: var(--sf-sale-contrast, #FFFFFF) !important;
font-size: 10px;
font-weight: 700;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════════════════
v3.2.52 — GLOBAL: headers + drawers bg sólido en TODA la web
(homepage.css carga en todas las páginas, a diferencia de pdp-notino.css)
═══════════════════════════════════════════════════════════════ */
/* Mobile header custom del theme */
html body .sf-mobile-header,
html body .sf-mobile-header--logo-center,
html body .sf-mobile-header--logo-left {
background-color: #FFFFFF !important;
background: #FFFFFF !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
/* Desktop header custom del theme */
html body .sf-desktop-header,
html body .sf-desktop-header__inner,
html body .sf-desktop-header__nav,
html body .sf-desktop-header__actions,
html body .sf-desktop-header__logo,
html body header.sf-desktop-header {
background-color: #FFFFFF !important;
background: #FFFFFF !important;
}
html body .sf-desktop-header {
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
/* Drawer mobile (menú hamburguesa desplegable) */
html body .sf-drawer,
html body .sf-drawer__panel,
html body .sf-drawer__inner,
html body .sf-drawer__content,
html body .sf-drawer__body,
html body .sf-drawer__header,
html body .sf-drawer__footer {
background-color: #FFFFFF !important;
color: #000000 !important;
}
html body .sf-drawer__panel *,
html body .sf-drawer__inner * {
color: inherit;
}
/* Todos los anchors en el drawer con color legible */
html body .sf-drawer a,
html body .sf-drawer__panel a,
html body .sf-drawer__inner a,
html body .sf-drawer__content a {
color: #000 !important;
}
/* Headers Astra — forzar bg en caso que algún estilo inline los haga transparentes */
html body .site-header,
html body #masthead,
html body header.site-header,
html body .ast-primary-header-bar,
html body .main-header-bar,
html body .main-header-bar-wrap {
background-color: #FFFFFF !important;
}
/* Astra dropdown/submenu para navegación */
html body .main-navigation ul.ast-desktop-header-content ul,
html body .main-header-menu.submenu-with-border.stack-on-mobile,
html body #ast-desktop-header ul,
html body .ast-hf-mobile-menu,
html body .ast-mobile-header-content {
background-color: #FFFFFF !important;
color: #000 !important;
}
/* v3.2.53 — Hamburger bars visibles (3 líneas del ícono menú) */
html body .sf-mobile-header__bar {
background-color: #000000 !important;
background: #000000 !important;
width: 22px !important;
height: 2px !important;
display: block !important;
border-radius: 2px !important;
}
html body .sf-mobile-header__hamburger,
html body #sf-mm-open-btn {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
padding: 6px 8px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
/* Close button del drawer (X) también visible */
html body .sf-drawer__close,
html body #sf-drawer__close,
html body .sf-drawer__close-btn {
color: #000 !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
font-size: 22px !important;
padding: 8px 12px !important;
}
/* ═══════════════════════════════════════════════════════════════
v3.2.54 — Hamburger bars visibles (specificity 0,0,2,2) + Footer mínimo
═══════════════════════════════════════════════════════════════ */
/* Vence rule .sf-mobile-header__hamburger .sf-mobile-header__bar { var(--sf-text) !important }
que resuelve a transparent cuando --sf-text está vacío. */
html body .sf-mobile-header__hamburger .sf-mobile-header__bar,
html body .sf-mobile-header .sf-mobile-header__bar {
background-color: #000000 !important;
background: #000000 !important;
width: 22px !important;
height: 2px !important;
display: block !important;
border-radius: 2px !important;
}
/* v3.2.57 — REMOVIDO el :root con valores hardcoded.
Problema: el customizer emite `` en wp_head
con los valores de la paleta activa (o Personalizada). homepage.css se enqueuea DESPUÉS
en el , así que este :root con hex literales ganaba la cascada y sobreescribía la
paleta del customizer. Resultado: elegir "Personalizada" no hacía nada visible.
El fallback ya no hace falta porque palette-system.php siempre emite los valores (tiene
defaults si falta el theme_mod). */
/* v3.2.55: el footer custom del theme (.sf-hp-footer) ya existe y tiene contenido.
No forzamos bg ni pseudo ::after en .site-footer para evitar duplicación con el custom. */
/* v3.2.55 — Footer custom del theme (.sf-hp-footer) con bg sólido oscuro */
html body .sf-hp-footer {
background-color: #1C1A17 !important;
color: #FFFFFF !important;
padding: 40px 20px !important;
margin-top: 60px !important;
}
html body .sf-hp-footer *,
html body .sf-hp-footer a,
html body .sf-hp-footer p,
html body .sf-hp-footer h1,
html body .sf-hp-footer h2,
html body .sf-hp-footer h3,
html body .sf-hp-footer h4,
html body .sf-hp-footer h5,
html body .sf-hp-footer li,
html body .sf-hp-footer span {
color: inherit !important;
}
html body .sf-hp-footer a {
color: rgba(255,255,255,0.85) !important;
text-decoration: none !important;
}
html body .sf-hp-footer a:hover {
color: #FFFFFF !important;
}
html body .sf-hp-footer__top,
html body .sf-hp-footer__bottom,
html body .sf-hp-footer__brand,
html body .sf-hp-footer__logo {
background-color: transparent !important;
}
/* Imagen del logo si es PNG negro, invert para que se vea en bg oscuro */
html body .sf-hp-footer__logo-img {
filter: brightness(0) invert(1) !important;
max-height: 40px !important;
width: auto !important;
}
/* v3.2.55 — Ocultar shipping bar "Te faltan $XX" cuando cart vacío */
body.sf-cart-empty #sf-shipping-bar,
body.sf-cart-empty .sf-shipping-bar {
display: none !important;
}
/* v3.2.55 — Hero swipe fix: ocultar CTAs "detrás" del slide activo en mobile carousel */
html body .sf-hero-carousel__slide:not(.is-active) .sf-hp-hero__cta,
html body .sf-hero-carousel__slide:not(.is-active) .sf-hp-hero__actions,
html body .sf-hero-carousel__slide:not(.is-active) .sf-hero-slide__cta {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Hero arrows desktop (v3.2.55) — agregar flechas nav prev/next */
@media (min-width: 921px) {
html body .sf-hero-carousel__arrow,
html body .sf-hero-carousel__arrow--prev,
html body .sf-hero-carousel__arrow--next {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
border: 1px solid rgba(0,0,0,0.1) !important;
color: #000 !important;
font-size: 18px !important;
cursor: pointer !important;
z-index: 15 !important;
opacity: 0.85 !important;
transition: opacity 0.2s, transform 0.2s !important;
padding: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
html body .sf-hero-carousel__arrow:hover {
opacity: 1 !important;
transform: translateY(-50%) scale(1.08) !important;
}
html body .sf-hero-carousel__arrow--prev {
left: 20px !important;
}
html body .sf-hero-carousel__arrow--next {
right: 20px !important;
left: auto !important;
}
}
/* Hide arrows en mobile (swipe bastante) */
@media (max-width: 920px) {
html body .sf-hero-carousel__arrow {
display: none !important;
}
}
/* v3.2.56 — Category chips mobile con borde visible (parezcan pastillas) */
@media (max-width: 920px) {
html body .sf-hp-chip,
html body .sf-hp-chips__track .sf-hp-chip,
html body a.sf-hp-chip {
display: inline-flex !important;
align-items: center !important;
padding: 8px 16px !important;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 999px !important;
background-color: #FFFFFF !important;
color: #000 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
transition: border-color 0.15s, background 0.15s !important;
}
html body .sf-hp-chip:hover,
html body .sf-hp-chip:active,
html body .sf-hp-chip.is-active {
border-color: #000 !important;
background-color: #000 !important;
color: #FFF !important;
}
html body .sf-hp-chips,
html body .sf-hp-chips__track {
gap: 8px !important;
padding: 12px 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html body .sf-hp-chips__track::-webkit-scrollbar {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
v3.2.63 — Ocultar cabecera en checkout (y otros elementos no esenciales)
User reportó: "la cabecera sigue sin ocultarse en el checkout". Causa:
(i) pdp-notino.css tenía reglas de sf-checkout-minimal pero solo carga en PDP,
(ii) los selectores no incluían el header custom del theme (.sf-desktop-header /
.sf-mobile-header), solo los de Astra/WC/FunnelKit.
Fix: mover las reglas a homepage.css (carga global) y añadir los selectores
del header custom. Cubre URLs /checkout/, /checkout-2/, /finalizar-compra/
y cualquier página con body.sf-checkout-minimal.
═══════════════════════════════════════════════════════════════════════════════ */
html body.sf-checkout-minimal .sf-desktop-header,
html body.sf-checkout-minimal .sf-mobile-header,
html body.sf-checkout-minimal .sf-drawer,
html body.sf-checkout-minimal #sf-shipping-bar,
html body.sf-checkout-minimal .sf-hp-shipping-bar,
html body.sf-checkout-minimal #masthead,
html body.sf-checkout-minimal .site-header,
html body.sf-checkout-minimal header.site-header,
html body.sf-checkout-minimal .ast-above-header,
html body.sf-checkout-minimal .ast-primary-header-bar,
html body.sf-checkout-minimal .main-header-bar,
html body.sf-checkout-minimal .main-header-bar-wrap,
html body.sf-checkout-minimal .ast-below-header,
html body.sf-checkout-minimal .ast-sticky-header,
html body.sf-checkout-minimal .ast-mobile-header-wrap,
html body.sf-checkout-minimal .wffn-oc-header,
html body.sf-checkout-minimal .wfacp-header,
html body.sf-checkout-minimal .sf-hp-footer,
html body.sf-checkout-minimal .site-footer,
html body.sf-checkout-minimal #colophon {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Body padding-top del header fixed ya no es necesario cuando el header está oculto */
html body.sf-checkout-minimal {
padding-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
v3.2.66 — Fixes varios homepage
═══════════════════════════════════════════════════════════════════════════════ */
/* Bug 7 — Instagram iframe ocupaba 1116px desktop / 633px mobile. Cap a 600px/500px
con overflow hidden para que el user no pierda 1.5 viewports solo en IG feed. */
html body .sf-hp-ig .sb_instagram_section,
html body .sf-hp-ig iframe,
html body .sf-hp-ig [class*="sbi_"],
html body .sf-hp-ig__feed {
max-height: 600px !important;
overflow: hidden !important;
}
@media (max-width: 920px) {
html body .sf-hp-ig .sb_instagram_section,
html body .sf-hp-ig iframe,
html body .sf-hp-ig [class*="sbi_"],
html body .sf-hp-ig__feed {
max-height: 460px !important;
}
}
/* Bug 8 safety net — whitespace trailing en precio no colapsa solo si viene como
Non-Breaking Spaces ( ). Forzar collapse de whitespace y cortar trailing. */
html body .sf-hp-prod-card__price {
white-space: normal !important;
word-spacing: 0 !important;
}
html body .sf-hp-prod-card__price::after {
content: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
v3.2.67 — Colores configurables para botones sobre banners/imágenes.
Las reglas usan var(--sf-x-cta-bg, var(--sf-accent)). Si el admin configura el
color en customizer, funciones.php emite los CSS vars en :root y se usan.
Si no, los botones siguen con el color de acento de la paleta.
═══════════════════════════════════════════════════════════════════════════════ */
/* Hero CTA (todos los slides) — el inline style de v3.2.69 per-slide gana por
specificity si está configurado. Si no, cae al global del customizer, y si no,
al acento de la paleta. */
html body .sf-hp-hero__cta,
html body .sf-hero-slide__cta {
background: var(--sf-hero-cta-bg, var(--sf-accent, #B8924A)) !important;
color: var(--sf-hero-cta-text, var(--sf-accent-contrast, #1C1A17)) !important;
}
/* v3.2.69 — Hero slide content soporta gap (para separación configurable) */
html body .sf-hero-slide__content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* v3.2.74 — Font-size custom desktop/mobile independiente per-slide.
El render inyecta inline: `--sf-eb-size-d: 14px; --sf-eb-size-m: 11px`
Este CSS consume las vars: desktop usa -d, mobile usa -m (fallback a -d si vacío).
Si no hay vars definidas, `var()` resuelve a valor "initial" → el preset CSS
existente aplica normal (no se rompe comportamiento default). */
html body .sf-hero-slide__eyebrow {
font-size: var(--sf-eb-size-d, inherit);
}
html body .sf-hero-slide__headline {
font-size: var(--sf-hd-size-d, inherit);
}
html body .sf-hero-slide__sub {
font-size: var(--sf-sub-size-d, inherit);
}
@media (max-width: 920px) {
html body .sf-hero-slide__eyebrow {
font-size: var(--sf-eb-size-m, var(--sf-eb-size-d, inherit));
}
html body .sf-hero-slide__headline {
font-size: var(--sf-hd-size-m, var(--sf-hd-size-d, inherit));
}
html body .sf-hero-slide__sub {
font-size: var(--sf-sub-size-m, var(--sf-sub-size-d, inherit));
}
}
html body .sf-hero-slide--align-center .sf-hero-slide__content { align-items: center !important; text-align: center !important; }
html body .sf-hero-slide--align-right .sf-hero-slide__content { align-items: flex-end !important; text-align: right !important; }
/* v3.2.69 — Banner modifiers: align, vpos, title size */
html body .sf-hp-banner__caption {
display: flex !important;
flex-direction: column !important;
}
html body .sf-hp-banner--align-left .sf-hp-banner__caption { align-items: flex-start !important; text-align: left !important; }
html body .sf-hp-banner--align-center .sf-hp-banner__caption { align-items: center !important; text-align: center !important; }
html body .sf-hp-banner--align-right .sf-hp-banner__caption { align-items: flex-end !important; text-align: right !important; }
html body .sf-hp-banner--vpos-top .sf-hp-banner__caption { justify-content: flex-start !important; }
html body .sf-hp-banner--vpos-center .sf-hp-banner__caption { justify-content: center !important; }
html body .sf-hp-banner--vpos-bottom .sf-hp-banner__caption { justify-content: flex-end !important; }
/* Si el banner usa vpos, el caption debe estirarse sobre el img */
html body .sf-hp-banner--vpos-top .sf-hp-banner__caption,
html body .sf-hp-banner--vpos-center .sf-hp-banner__caption,
html body .sf-hp-banner--vpos-bottom .sf-hp-banner__caption {
position: absolute !important;
inset: 0 !important;
}
html body .sf-hp-banner--title-sm .sf-hp-banner__title { font-size: 16px !important; }
html body .sf-hp-banner--title-md .sf-hp-banner__title { font-size: 20px !important; }
html body .sf-hp-banner--title-lg .sf-hp-banner__title { font-size: 28px !important; }
html body .sf-hp-banner--title-xl .sf-hp-banner__title { font-size: 36px !important; }
/* v3.2.69 — Chips de categoría mobile MUCHO más compactos.
Antes: padding generoso, gap 8-12px, chip ~43px alto. Ahora: 28px alto, gap 6,
padding apretado, font más chica. */
@media (max-width: 920px) {
html body .sf-hp-chips {
padding: 6px 0 !important;
margin: 0 !important;
}
html body .sf-hp-chips__track {
gap: 6px !important;
padding: 4px 12px !important;
}
html body .sf-hp-chip {
padding: 5px 12px !important;
font-size: 12px !important;
min-height: 28px !important;
line-height: 1.2 !important;
border-radius: 999px !important;
}
}
/* Editorial banner — CTA primario */
html body .sf-hp-editorial__cta--primary {
background: var(--sf-ed-cta-primary-bg, var(--sf-accent, #B8924A)) !important;
color: var(--sf-ed-cta-primary-text, var(--sf-accent-contrast, #1C1A17)) !important;
}
/* Editorial banner — CTA secundario (ghost / outline) */
html body .sf-hp-editorial__cta--ghost {
background: var(--sf-ed-cta-ghost-bg, transparent) !important;
color: var(--sf-ed-cta-ghost-text, var(--sf-editorial-text, #FFFFFF)) !important;
/* Si admin configura bg, el ghost deja de tener borde (se vuelve botón sólido) */
}
/* Banners de categoría — cualquier CTA / link con clase __cta o dentro de banner */
html body .sf-hp-banner__cta,
html body .sf-hp-banner .sf-hp-btn,
html body .sf-hp-banner a.button {
background: var(--sf-banner-cta-bg, var(--sf-accent, #B8924A)) !important;
color: var(--sf-banner-cta-text, var(--sf-accent-contrast, #1C1A17)) !important;
}
/* Popup CTA */
html body .sf-hp-popup__cta,
html body .sf-hp-popup__btn,
html body #sf-hp-popup-claim,
html body .sf-popup__btn {
background: var(--sf-popup-cta-bg, var(--sf-accent, #B8924A)) !important;
color: var(--sf-popup-cta-text, var(--sf-accent-contrast, #1C1A17)) !important;
}
/* Bug 9 — Back to top button (FAB bottom-right). Aparece después de 400px de scroll
via JS. Posición: bottom:20 right:20, círculo 44px, color palette.
En mobile se posiciona más arriba (80px) para no tapar sticky CTA del PDP ni el
shipping bar inferior. */
html body #sf-back-to-top {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
background: var(--sf-text, #1C1A17) !important;
color: var(--sf-bg, #FFFFFF) !important;
border: 0 !important;
cursor: pointer !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
z-index: 9990 !important;
opacity: 0 !important;
transition: opacity 0.25s ease, transform 0.2s ease !important;
padding: 0 !important;
}
html body #sf-back-to-top.is-visible {
display: flex !important;
opacity: 0.9 !important;
}
html body #sf-back-to-top:hover,
html body #sf-back-to-top:focus {
opacity: 1 !important;
transform: translateY(-2px) !important;
outline: none !important;
}
@media (max-width: 920px) {
html body #sf-back-to-top {
bottom: 86px !important; /* respiro arriba del sticky CTA / WA */
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
v3.2.65 — Fix mínimo: botón "Filtrar" de Astra se oculta detrás del header mobile.
Causa doble:
(1) El botón tiene `position: sticky; top: 60px; z-index: 5` pero el header fixed
tiene z-index: 10000 → cuando el sticky intenta pegarse dentro de los 60px
superiores, queda detrás del header.
(2) El parent (`.ast-shop-toolbar-aside-wrap`) mide lo mismo que el botón (43px),
entonces el sticky no tiene zona de scroll → el botón scrollea normal y
desaparece arriba del viewport.
Fix: subir z-index arriba del header y bajar el `top` por debajo del header (56px
+ 14px de respiro = 70px). Además `overflow: visible` en los ancestors para
que el sticky pueda "asomarse" fuera del wrapper.
═══════════════════════════════════════════════════════════════════════════════ */
html body .astra-shop-filter-button,
html body .ast-flyout-filter {
top: 70px !important; /* header mobile 56 + 14 respiro */
z-index: 10001 !important; /* arriba del header 10000 */
}
html body .ast-shop-toolbar-container,
html body .ast-shop-toolbar-aside-wrap {
overflow: visible !important;
}
/* Desktop: el header desktop también es fixed 70px → offset un poco mayor */
@media (min-width: 921px) {
html body .astra-shop-filter-button,
html body .ast-flyout-filter {
top: 84px !important; /* header desktop 70 + 14 respiro */
}
}