/*
Theme Name: Salient Child
Theme URI: https://themenectar.com/salient/
Description: Tema hijo de Salient — personalizado para Destilerías Roniwesk.
Author: Roniwesk
Author URI: https://roniwesk.com
Template: salient
Version: 1.0.112
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: child-theme, salient
Text Domain: salient-child
*/
/* ============================================================
Tokens de marca (Roniwesk)
============================================================ */
:root {
--rw-bg: #faf7f2;
--rw-bg-cream: #f5efe6;
--rw-ink: #1a1a1a;
--rw-ink-soft: #444444;
--rw-muted: #777777;
--rw-line: #d9d2c5;
--rw-line-soft: #ebe6dd;
--rw-pink: #ff3d8b;
--rw-coral: #ff9f70;
--rw-link-soft: #e0a07a;
--rw-green: #c8e6b0;
--rw-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
--rw-font-display:"Inter", "Helvetica Neue", Arial, sans-serif;
--rw-radius-card: 20px;
--rw-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
--rw-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10);
--rw-container: 1240px;
--rw-gutter: clamp(20px, 4vw, 56px);
}
/* Tipografía global: Inter + base 18px (Salient fuerza 14/13/12) */
html {
font-size: 18px !important;
}
html, body {
font-family: var(--rw-font-sans) !important;
}
body {
font-size: 18px !important;
line-height: 1.5 !important;
}
/* Salient fuerza strong/b a weight 400 */
body strong,
body b,
body .bold {
font-weight: 700 !important;
}
body,
body .container-wrap,
body #ajax-content-wrap,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body li, body span:not([class*="icon"]):not([class*="fa-"]),
body button, body input, body textarea, body select, body label,
body .nectar-button, body .button, body .wp-block-button__link,
body #header-outer, body #slide-out-widget-area, body #footer-outer {
font-family: var(--rw-font-sans) !important;
}
/* Enlaces normales: sin subrayado */
body .container-wrap a,
body .container-wrap a:hover,
body .container-wrap a:focus,
body .container-wrap a:active,
body #ajax-content-wrap a,
body #ajax-content-wrap a:hover,
body #ajax-content-wrap a:focus,
body #footer-outer a,
body #footer-outer a:hover,
body #footer-outer a:focus,
body .wpb_text_column a,
body .wpb_text_column a:hover,
body .textwidget a,
body .textwidget a:hover {
text-decoration: none !important;
}
/* ============================================================
Fondo "nebulosa" global (clase rw-nebula en todo el frontend).
En body + fixed → se ve también a través del footer.
============================================================ */
body.rw-nebula {
background-color: var(--rw-bg) !important;
background-image:
radial-gradient(34% 30% at 60% 49%, rgba(255, 61, 139, 0.62) 0%, rgba(255, 61, 139, 0) 70%),
radial-gradient(36% 32% at 53% 47%, rgba(255, 138, 190, 0.55) 0%, rgba(255, 138, 190, 0) 68%),
radial-gradient(40% 36% at 8% 66%, rgba(255, 159, 112, 0.65) 0%, rgba(255, 159, 112, 0) 68%),
radial-gradient(36% 32% at 60% 11%, rgba(255, 122, 89, 0.58) 0%, rgba(255, 122, 89, 0) 70%),
radial-gradient(34% 30% at 77% 74%, rgba(255, 111, 175, 0.52) 0%, rgba(255, 111, 175, 0) 70%),
radial-gradient(42% 38% at 53% 44%, rgba(255, 180, 150, 0.48) 0%, rgba(255, 180, 150, 0) 65%) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
background-position: center center !important;
background-attachment: fixed !important;
}
body.rw-nebula #ajax-content-wrap {
position: relative;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
body.rw-nebula #ajax-content-wrap > .container-wrap,
body.rw-nebula .container-wrap,
body.rw-nebula .container.main-content,
body.rw-nebula .container.main-content > .row {
background-color: transparent !important;
}
/* Anular fondos blancos de filas Salient (inline + CSS vars) */
body.rw-nebula .wpb_row.has-row-bg-color {
--row-bg-color: transparent !important;
background-color: transparent !important;
}
body.rw-nebula .row-bg,
body.rw-nebula .row-bg.using-bg-color,
body.rw-nebula .wpb_row .row-bg-wrap .row-bg,
body.rw-nebula .wpb_row.has-row-bg-color .row-bg {
background-color: transparent !important;
}
/* Footer transparente (Salient fuerza #fff !important) */
html body.rw-nebula #footer-outer,
html body.rw-nebula #footer-outer[data-custom-color="true"],
html body.rw-nebula #footer-widgets,
html body.rw-nebula #footer-outer #footer-widgets,
html body.rw-nebula #footer-outer > .container,
html body.rw-nebula #footer-widgets > .container,
html body.rw-nebula #footer-widgets .row {
background: transparent !important;
background-color: transparent !important;
}
/* Copyright bar — negro, iconos izq / logo der */
#footer-outer #copyright[data-layout="rw-bar"] {
background-color: #000 !important;
border-top: 0 !important;
padding: 14px 0;
}
#footer-outer #copyright[data-layout="rw-bar"] .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
#footer-outer #copyright[data-layout="rw-bar"] .col {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__social {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__social a {
color: #fff !important;
opacity: 1;
transition: opacity 0.2s ease;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__social a:hover {
opacity: 0.65;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__logo-col {
margin-left: auto !important;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__logo {
display: inline-flex;
align-items: center;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__logo img {
height: 40px;
width: auto;
display: block;
/* icono negro sobre barra negra */
filter: brightness(0) invert(1);
}
@media (max-width: 690px) {
#footer-outer #copyright[data-layout="rw-bar"] .container {
flex-direction: column;
align-items: flex-start;
}
#footer-outer #copyright[data-layout="rw-bar"] .rw-copyright__logo-col {
margin-left: 0 !important;
}
}
/* ============================================================
Base que afecta solo a las páginas Roniwesk
(Salient pinta mucho CSS por encima, así que casi todo va con
.roniwesk-page como selector raíz)
============================================================ */
.roniwesk-page {
background: var(--rw-bg);
color: var(--rw-ink);
font-family: var(--rw-font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.roniwesk-page h1,
.roniwesk-page h2,
.roniwesk-page h3,
.roniwesk-page h4,
.roniwesk-page h5,
.roniwesk-page h6 {
font-family: var(--rw-font-display);
color: var(--rw-ink);
margin: 0;
letter-spacing: -0.01em;
}
.roniwesk-page p { margin: 0; }
.roniwesk-page a { color: inherit; text-decoration: none; }
.roniwesk-page img { max-width: 100%; height: auto; display: block; }
.rw-container {
max-width: var(--rw-container);
margin: 0 auto;
padding-left: var(--rw-gutter);
padding-right: var(--rw-gutter);
}
/* ============================================================
Header global Roniwesk
============================================================ */
.rw-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--rw-bg);
border-bottom: 1px solid var(--rw-line-soft);
}
.rw-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 84px;
}
.rw-header__logo {
display: inline-flex;
align-items: center;
gap: 12px;
}
.rw-header__logo img {
height: 56px;
width: auto;
}
.rw-header__center {
flex: 1;
display: flex;
justify-content: center;
gap: 22px;
}
.rw-header__icon-btn,
.rw-header__menu-btn {
appearance: none;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
color: var(--rw-ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.rw-header__icon-btn:hover,
.rw-header__menu-btn:hover { opacity: 0.6; }
.rw-header__icon-btn svg,
.rw-header__menu-btn svg { width: 22px; height: 22px; }
.rw-header__right {
display: inline-flex;
align-items: center;
gap: 18px;
}
.rw-header__menu-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--rw-line);
background: transparent;
margin-left: 8px;
}
/* Drawer del menú (oculto por defecto, se abre con JS) */
.rw-menu-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(420px, 90vw);
background: var(--rw-bg);
border-left: 1px solid var(--rw-line-soft);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 200;
padding: 100px 40px 40px;
overflow-y: auto;
}
.rw-menu-drawer.is-open { transform: translateX(0); }
.rw-menu-drawer__close {
position: absolute;
top: 28px; right: 28px;
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--rw-ink);
}
.rw-menu-drawer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.rw-menu-drawer a {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
}
.rw-menu-overlay {
position: fixed;
inset: 0;
background: rgba(26, 26, 26, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 150;
}
.rw-menu-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
Home header — logo Raw HTML (ancho completo)
============================================================ */
#home-header,
.home-header {
width: 100%;
}
#home-header .nectar-split-heading,
.home-header .nectar-split-heading {
display: block;
width: 100%;
max-width: none;
font-size: inherit !important;
line-height: 0;
}
#home-header .nectar-split-heading h1,
.home-header .nectar-split-heading h1 {
width: 100%;
margin: 0;
line-height: 0;
}
#home-header .nectar-split-heading h1 > span,
.home-header .nectar-split-heading h1 > span {
display: block;
width: 100%;
}
#home-header .nectar-split-heading .inner,
.home-header .nectar-split-heading .inner {
display: block;
width: 100%;
height: auto;
}
#home-header .nectar-split-heading .inner img,
.home-header .nectar-split-heading .inner img {
display: block;
width: 100% !important;
height: auto !important;
max-width: 100%;
}
/* ============================================================
Hero
============================================================ */
.rw-hero {
position: relative;
overflow: hidden;
padding: 60px 0 120px;
}
.rw-hero__bg {
position: absolute;
inset: 0;
background-color: var(--rw-bg);
background-image:
radial-gradient(ellipse 60% 55% at 65% 30%,
rgba(255, 61, 139, 0.85) 0%,
rgba(255, 95, 168, 0.55) 25%,
rgba(255, 196, 221, 0.25) 50%,
transparent 75%),
radial-gradient(ellipse 45% 40% at 25% 50%,
rgba(255, 159, 112, 0.65) 0%,
rgba(255, 200, 160, 0.35) 35%,
transparent 70%),
radial-gradient(ellipse 35% 35% at 88% 55%,
rgba(200, 230, 176, 0.45) 0%,
rgba(220, 240, 200, 0.20) 40%,
transparent 70%);
background-blend-mode: screen, screen, screen;
z-index: 0;
}
.rw-hero__content {
position: relative;
z-index: 1;
text-align: center;
}
.rw-hero__title {
font-size: clamp(56px, 14vw, 200px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.04em;
margin-bottom: 18px;
}
.rw-hero__subtitle {
font-size: clamp(13px, 1.4vw, 18px);
letter-spacing: 0.02em;
color: var(--rw-ink);
text-transform: none;
max-width: 760px;
margin: 0 auto 60px;
font-weight: 500;
}
/* Composición central: botella + texto circular */
.rw-hero__stage {
position: relative;
width: min(540px, 80vw);
aspect-ratio: 1 / 1;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rw-hero__bottle {
position: relative;
z-index: 2;
height: 85%;
width: auto;
object-fit: contain;
filter: drop-shadow(0 30px 40px rgba(26, 26, 26, 0.18));
}
.rw-hero__circle-text {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
animation: rw-spin 28s linear infinite;
}
.rw-hero__circle-text text {
font-family: var(--rw-font-sans);
font-size: 7px;
font-weight: 600;
letter-spacing: 0.32em;
fill: var(--rw-ink);
text-transform: uppercase;
}
@keyframes rw-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.rw-hero__circle-text { animation: none; }
}
/* ============================================================
Sección Nuestras Marcas
============================================================ */
.rw-brands {
background: var(--rw-bg);
padding: 100px 0 80px;
text-align: center;
}
.rw-brands__title {
font-size: clamp(36px, 6vw, 64px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 56px;
}
.rw-brands__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 4vw, 60px);
align-items: center;
justify-items: center;
max-width: 980px;
margin: 0 auto;
}
.rw-brands__logo {
max-height: 80px;
width: auto;
max-width: 100%;
opacity: 0.92;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.rw-brands__logo:hover {
opacity: 1;
transform: translateY(-2px);
}
@media (max-width: 720px) {
.rw-brands__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}
/* ============================================================
Galería lifestyle
============================================================ */
.rw-gallery {
padding: 30px 0 110px;
}
.rw-gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.6vw, 24px);
}
.rw-gallery__item {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 4px;
background: var(--rw-bg-cream);
}
.rw-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rw-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 720px) {
.rw-gallery__grid { grid-template-columns: 1fr; }
.rw-gallery__item { aspect-ratio: 4 / 3; }
}
/* ============================================================
Footer global Roniwesk
============================================================ */
.rw-footer {
background: var(--rw-bg);
padding: 60px 0 28px;
border-top: 1px solid var(--rw-line-soft);
color: var(--rw-ink);
}
.rw-footer__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: clamp(24px, 5vw, 80px);
padding-bottom: 40px;
border-bottom: 1px solid var(--rw-line-soft);
}
.rw-footer__title {
font-size: 16px;
font-weight: 700;
margin-bottom: 18px;
color: var(--rw-ink);
}
.rw-footer__col p,
.rw-footer__col li,
.rw-footer__col a {
font-size: 14px;
line-height: 1.7;
color: var(--rw-ink-soft);
}
.rw-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
}
.rw-footer__col a:hover { color: var(--rw-ink); text-decoration: none; }
.rw-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 22px;
}
.rw-footer__social {
display: inline-flex;
gap: 16px;
}
.rw-footer__social a {
color: var(--rw-ink);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.rw-footer__social a:hover { opacity: 0.55; }
.rw-footer__social svg { width: 18px; height: 18px; }
.rw-footer__mark img {
height: 36px;
width: auto;
}
@media (max-width: 820px) {
.rw-footer__cols { grid-template-columns: 1fr; }
.rw-footer__bottom { flex-direction: column; gap: 18px; }
}
/* ============================================================
Variantes específicas por home
============================================================ */
/* Home 2 — WPBakery-friendly: usa contenedores .wpb_wrapper.
Hacemos que los componentes Roniwesk también funcionen
correctamente cuando se insertan dentro de filas/columnas de
WPBakery, evitando que el row del builder ponga su padding propio.
*/
.roniwesk-page .wpb_row,
.roniwesk-page .vc_row {
margin-bottom: 0;
}
.roniwesk-page .wpb_text_column,
.roniwesk-page .wpb_text_column .wpb_wrapper { margin-bottom: 0; }
/* Home 3 — Híbrido: pequeño badge para diferenciar visualmente */
.rw-version-badge {
position: fixed;
bottom: 18px; left: 18px;
background: var(--rw-ink);
color: #fff;
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
z-index: 90;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
font-family: var(--rw-font-sans);
}
/* ============================================================
Clases heredadas del CSS anterior (productos & cartas)
Las dejamos por compatibilidad con la versión previa.
============================================================ */
.bg-hero-gradient-pink {
background-color: var(--rw-bg);
background-image: url("assets/images/hero-gradient-pink.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.bg-hero-gradient-pink--css {
background-color: var(--rw-bg);
background-image:
radial-gradient(ellipse 60% 55% at 65% 30%,
rgba(255, 61, 139, 0.85) 0%,
rgba(255, 95, 168, 0.55) 25%,
rgba(255, 196, 221, 0.25) 50%,
transparent 75%),
radial-gradient(ellipse 45% 40% at 25% 50%,
rgba(255, 159, 112, 0.65) 0%,
rgba(255, 200, 160, 0.35) 35%,
transparent 70%),
radial-gradient(ellipse 35% 35% at 88% 55%,
rgba(200, 230, 176, 0.45) 0%,
rgba(220, 240, 200, 0.20) 40%,
transparent 70%);
background-blend-mode: screen, screen, screen;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
padding: 40px 0;
}
.product-card {
position: relative;
display: block;
aspect-ratio: 3 / 4;
background-color: #ffffff;
border-radius: var(--rw-radius-card);
overflow: hidden;
box-shadow: var(--rw-shadow-card);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--rw-shadow-card-hover);
}
.product-card__image {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #ffffff;
display: block;
}
.product-card__caption {
position: absolute;
left: 24px;
right: 24px;
bottom: 20px;
font-family: inherit;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rw-ink);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.product-card__caption strong { font-weight: 700; }
.product-card__caption span { color: var(--rw-muted); font-weight: 400; }
/* ============================================================
Ajustes para que Salient no inyecte su header/footer encima
cuando usamos las plantillas Roniwesk
============================================================ */
body.roniwesk-template #header-outer,
body.roniwesk-template #top,
body.roniwesk-template #footer-outer,
body.roniwesk-template #footer-widgets,
body.roniwesk-template .ascend.featured_img,
body.roniwesk-template .page-header-no-bg { display: none !important; }
body.roniwesk-template #ajax-content-wrap,
body.roniwesk-template #ajax-content-wrap > .container-wrap,
body.roniwesk-template .container-wrap {
background: var(--rw-bg);
padding: 0 !important;
margin: 0 !important;
}
body.roniwesk-template .container-wrap > .container { max-width: none; padding: 0; }
body.roniwesk-template .container-wrap > .container > .row,
body.roniwesk-template .container-wrap > .container > .row > .col {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
/* ============================================================
WooCommerce — Chips de Volumen y Graduación
============================================================ */
.rw-product-chips {
list-style: none;
margin: 8px 0 12px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.rw-product-chips__chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background-color: #ffffff;
border: 1px solid var(--rw-line, #d9d2c5);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--rw-ink, #1a1a1a);
line-height: 1.4;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* En la ficha de producto individual, chips ligeramente más grandes
y alineados a la izquierda (no centrados como en el catálogo). */
.single-product .summary .rw-product-chips,
.single-product div.product .rw-product-chips {
justify-content: flex-start;
margin: 12px 0 20px;
}
.single-product .summary .rw-product-chips__chip {
font-size: 13px;
padding: 6px 14px;
}
/* Hover suave — solo aplica en catálogo donde la card es cliqueable. */
.woocommerce ul.products li.product:hover .rw-product-chips__chip {
border-color: var(--rw-ink-soft, #444);
}
/* ============================================================
WooCommerce — Ficha de producto (single product)
Título editorial + botón pill + tabs personalizadas
============================================================ */
/* --- Título editorial grande, estilo revista --------------- */
.single-product .product_title,
.single-product div.product .product_title {
font-family: var(--rw-font-sans);
font-weight: 700;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--rw-ink, #1a1a1a);
margin: 0 0 12px;
}
/* Precio grande y limpio, debajo del título */
.single-product .summary .price,
.single-product div.product p.price,
.single-product div.product span.price {
font-size: 28px;
font-weight: 500;
color: var(--rw-ink, #1a1a1a);
margin: 0 0 8px;
}
/* --- Botón "Añadir al carrito" pill negro ------------------- */
.single-product .cart .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
background-color: var(--rw-ink, #1a1a1a) !important;
color: #ffffff !important;
border: none !important;
border-radius: 999px !important;
padding: 16px 40px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.single-product .cart .single_add_to_cart_button:hover {
background-color: #000 !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* --- Tabs personalizadas de Roniwesk ------------------------ */
.single-product .woocommerce-tabs {
margin-top: 32px;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
padding: 0 !important;
margin: 0 0 24px !important;
border-bottom: 1px solid var(--rw-line, #d9d2c5) !important;
display: flex;
gap: 32px;
background: transparent !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs::after {
display: none !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after {
display: none !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
display: inline-block;
padding: 12px 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rw-muted, #777) !important;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
color: var(--rw-ink, #1a1a1a) !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li[aria-selected="true"] a {
color: var(--rw-ink, #1a1a1a) !important;
border-bottom-color: var(--rw-coral, #ff9f70);
}
.single-product .woocommerce-tabs .panel {
padding: 12px 0 24px !important;
background: transparent !important;
border: none !important;
}
/* ============================================================
Ficha técnica — barras horizontales dentro del summary
(columna derecha, entre la descripción y el botón)
============================================================ */
.rw-tech {
display: flex;
flex-direction: column;
gap: 14px;
margin: 8px 0 24px;
padding: 20px 0;
border-top: 1px solid var(--rw-line-soft, #ebe6dd);
border-bottom: 1px solid var(--rw-line-soft, #ebe6dd);
max-width: 480px;
}
.rw-tech__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rw-ink, #1a1a1a);
margin: 0 0 4px;
}
.rw-tech__bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.rw-tech__row {
display: grid;
grid-template-columns: 110px 1fr;
align-items: center;
gap: 16px;
}
.rw-tech__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--rw-ink-soft, #444);
}
.rw-tech__label svg {
stroke: var(--rw-coral, #ff9f70);
flex-shrink: 0;
width: 18px;
height: 18px;
}
.rw-tech__bar {
position: relative;
display: block;
height: 8px;
background-color: var(--rw-line-soft, #ebe6dd);
border-radius: 999px;
overflow: hidden;
}
.rw-tech__fill {
position: absolute;
inset: 0;
width: var(--pct, 0%);
background: linear-gradient(90deg,
var(--rw-coral, #ff9f70) 0%,
#ff7f50 100%);
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Responsive — barra más pegada al label en móvil */
@media (max-width: 780px) {
.rw-tech__row {
grid-template-columns: 100px 1fr;
gap: 12px;
}
}
/* ============================================================
Ficha de producto — Layout editorial (como mockup Roniwesk)
Coloca imagen grande con aurora coral a la izquierda y toda
la info (título editorial, precio, chips, descripción, botón,
tabs) a la derecha.
============================================================ */
/* Ficha producto: transparente para ver la nebulosa */
.single-product.woocommerce-page,
body.single-product .container-wrap {
background-color: transparent !important;
}
/* Ocultar elementos que no aparecen en el mockup ------------- */
.single-product .woocommerce-breadcrumb,
.single-product .nectar-breadcrumbs,
.single-product .nectar-page-header,
.single-product .product_meta,
.single-product .posted_in,
.single-product .sku_wrapper,
.single-product .tagged_as,
.single-product form.cart .quantity {
display: none !important;
}
/* Ocultar el mensaje "You may also like" / productos relacionados */
.single-product .related.products,
.single-product .upsells.products {
display: none !important;
}
/* Layout del bloque principal ------------------------------- */
.single-product div.product,
.single-product .nectar-prod-wrap {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
max-width: 1280px;
margin: 40px auto 60px;
padding: 0 40px;
}
/* Reset flotados / anchos por defecto de WooCommerce */
.single-product div.product > .woocommerce-product-gallery,
.single-product .nectar-prod-wrap > .woocommerce-product-gallery {
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
position: relative;
padding: 40px 0 !important;
}
.single-product div.product > .summary,
.single-product .nectar-prod-wrap > .summary {
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 20px 0 !important;
position: sticky;
top: 100px;
}
/* Fotos de producto sin el fondo gris del lazy-load de Salient */
ul.products li.product .product-wrap > a::before,
.single-product .product .product-slider .slide::before,
.single-product .product .default-woo-gallery .slide::before,
.single-product .product .product-thumbs .thumb-inner::before {
background-color: transparent !important;
}
/* Imagen del producto: cuadrado del color elegido (ACF rw_shop_card_bg) */
.single-product .woocommerce-product-gallery {
isolation: isolate;
}
.nectar_cascading_images .cascading-image .bg-color[data-has-bg-color="true"] {
display: none !important;
}
.woocommerce ul.products li.product .product-wrap > a:first-child {
overflow: visible !important;
}
.single-product .woocommerce-product-gallery::before,
.nectar_cascading_images .cascading-image[data-has-img="true"] .inner-wrap::after,
.woocommerce ul.products li.product .product-wrap > a:first-child::after {
content: "";
position: absolute;
left: 50%;
bottom: 2%;
z-index: 0;
width: 38%;
height: 22px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 72%);
transform: translateX(-50%);
pointer-events: none;
opacity: .55;
}
.woocommerce ul.products li.product .product-wrap > a:first-child::after {
bottom: -18px;
}
ul.products .nectar_cascading_images {
overflow: visible !important;
}
ul.products .nectar_cascading_images .img-wrap {
transform: translateY(-6%) !important;
}
ul.products .nectar_cascading_images .cascading-image[data-has-img="true"] .inner-wrap::after {
bottom: -8px;
}
ul.products .nectar_cascading_images .bg-layer {
transform: none !important;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a {
position: relative;
z-index: 1;
background: transparent !important;
width: 100% !important;
}
.single-product .woocommerce-product-gallery .flex-viewport {
width: 100% !important;
}
.single-product .woocommerce-product-gallery__wrapper img,
.single-product .woocommerce-product-gallery__image img {
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
display: block;
filter: none;
}
/* Placeholder cuando no hay imagen destacada */
.single-product .woocommerce-product-gallery--without-images::after {
content: "";
display: block;
aspect-ratio: 3 / 4;
max-width: 400px;
margin: 0 auto;
background: linear-gradient(180deg,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.4) 100%);
border-radius: 12px;
}
/* Notificaciones de WooCommerce en single */
.single-product .woocommerce-notices-wrapper {
max-width: 1280px;
margin: 20px auto 0;
padding: 0 40px;
}
/* Descripción corta editorial ------------------------------ */
.single-product .woocommerce-product-details__short-description {
font-size: 15px;
line-height: 1.65;
color: var(--rw-ink-soft, #444);
margin: 4px 0 24px;
max-width: 46ch;
}
.single-product .woocommerce-product-details__short-description p {
margin: 0 0 12px;
}
/* Form del carrito — sin marco, botón directo -------------- */
.single-product form.cart {
margin: 0 0 32px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.single-product form.cart .single_add_to_cart_button {
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.single-product form.cart .single_add_to_cart_button::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Tabs — separación superior y estilo integrado ------------- */
.single-product .woocommerce-tabs {
grid-column: 1 / -1;
margin: 0 !important;
padding: 0 !important;
}
/* Como .woocommerce-tabs está DENTRO de div.product, no fuera,
asegurar que la caja de la derecha se estira, pero las tabs
ocupan solo la columna derecha (como en el mockup).
Si prefieres que ocupen ancho completo, cambia la línea de
arriba a `grid-column: 1 / -1` (ya está así). */
/* Ajustes específicos si las tabs viven dentro de .summary */
.single-product .summary .woocommerce-tabs,
.single-product .summary + .woocommerce-tabs {
margin-top: 8px !important;
}
/* Responsive ------------------------------------------------ */
@media (max-width: 1024px) {
.single-product div.product,
.single-product .nectar-prod-wrap {
gap: 50px;
padding: 0 24px;
}
.single-product div.product > .summary,
.single-product .nectar-prod-wrap > .summary {
position: static;
}
}
@media (max-width: 780px) {
.single-product div.product,
.single-product .nectar-prod-wrap {
grid-template-columns: 1fr;
gap: 24px;
padding: 0 20px;
margin: 20px auto 40px;
}
.single-product .product_title {
font-size: 34px !important;
}
.single-product div.product > .woocommerce-product-gallery,
.single-product .nectar-prod-wrap > .woocommerce-product-gallery {
padding: 20px !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
gap: 20px;
overflow-x: auto;
white-space: nowrap;
}
}
/* =========================================================================
* Header · Limpieza
*
* No forzamos posicionamiento sobre los iconos (lupa · usuario · carrito):
* dejamos el layout nativo de Salient (logo a la izquierda; iconos y
* hamburguesa a la derecha).
*
* Sólo ocultamos el que Salient inyecta cuando la
* ubicación "top_nav" no tiene menú asignado — así no ocupa espacio
* innecesario en el header.
* ========================================================================= */
#header-outer[data-format="default"] #top nav > ul.sf-menu:not(.buttons) {
display: none !important;
}
/* Search / cuenta / carrito centrados — solo desktop */
@media only screen and (min-width: 1000px) {
/* Logo por encima del ul.buttons fixed */
body #header-outer #top .span_3 {
position: relative !important;
z-index: 99999 !important;
}
body #header-outer #top nav > ul.buttons.sf-menu {
position: fixed !important;
left: 50% !important;
top: 0 !important;
transform: translateX(-50%) !important;
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: var(--header-nav-height, 84px) !important;
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
z-index: 10020 !important;
pointer-events: auto;
}
body #header-outer #top nav > ul.buttons.sf-menu > li {
float: none !important;
}
body #header-outer #top nav > ul.buttons.sf-menu > li.slide-out-widget-area-toggle {
position: fixed !important;
right: 40px !important;
left: auto !important;
top: 0 !important;
height: var(--header-nav-height, 84px) !important;
display: flex !important;
align-items: center !important;
z-index: 10021 !important;
}
}
/* Logo header — más grande que el default Salient (30px) */
#header-outer[data-using-logo="1"] #logo img,
#header-outer #logo img.stnd,
#header-outer #logo img.starting-logo,
#header-outer #logo img.mobile-only-logo {
height: 52px !important;
max-height: 52px !important;
width: auto !important;
}
#header-outer[data-using-logo="1"] #logo {
position: relative;
}
@media only screen and (max-width: 999px) {
#header-outer[data-using-logo="1"] #logo img,
#header-outer #logo img.stnd,
#header-outer #logo img.starting-logo,
#header-outer #logo img.mobile-only-logo {
height: 40px !important;
max-height: 40px !important;
}
}
/* Menú off-canvas (fullscreen-split) — enlaces 36px */
#slide-out-widget-area .left-side .off-canvas-menu-container > ul.menu > li > a,
#slide-out-widget-area.fullscreen-split .off-canvas-menu-container > ul > li > a {
font-size: 36px !important;
line-height: 1.2 !important;
transition: color 0.2s ease, border-color 0.2s ease;
}
/* Texto + líneas: hover / focus / active / current → naranja suave */
body #slide-out-widget-area a:hover,
body #slide-out-widget-area a:focus,
body #slide-out-widget-area a:active,
body #slide-out-widget-area.fullscreen-split a:hover,
body #slide-out-widget-area.fullscreen-split a:focus,
body #slide-out-widget-area.fullscreen-split a:active,
body #slide-out-widget-area[class*="fullscreen"] .current-menu-item > a,
body #slide-out-widget-area.fullscreen-split .off-canvas-menu-container .current-menu-item > a,
body #slide-out-widget-area .off-canvas-menu-container .current-menu-item > a,
body #slide-out-widget-area .off-canvas-menu-container .current_page_item > a,
body #slide-out-widget-area .widget a:hover,
body #slide-out-widget-area .widget a:focus,
body #slide-out-widget-area .widget a:active,
body #slide-out-widget-area .textwidget a:hover,
body #slide-out-widget-area .textwidget a:focus,
body #slide-out-widget-area .textwidget a:active {
color: var(--rw-link-soft) !important;
}
/* Línea underline (::after) — naranja también en estado normal */
body #slide-out-widget-area.fullscreen-split .off-canvas-menu-container li > a:after,
body #slide-out-widget-area.fullscreen-split .inner .off-canvas-menu-container li > a:after,
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li > a:after,
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a:after {
border-color: var(--rw-link-soft) !important;
}
/* Gradiente-underline: solo ítems del menú (no widgets right-side) */
#slide-out-widget-area ul .menu-item .nectar-ext-menu-item .menu-title-text,
#slide-out-widget-area .nectar-ext-menu-item .menu-title-text {
background-image: linear-gradient(to right, var(--rw-link-soft) 0, var(--rw-link-soft) 100%) !important;
background-size: 100% 2px !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
}
/* Right-side OCM: sin underline (Sobre nosotros / legal / social) */
body #slide-out-widget-area .right-side a,
body #slide-out-widget-area .right-side a:hover,
body #slide-out-widget-area .right-side a:focus,
body #slide-out-widget-area.fullscreen-split .widget ul:not([class*="nectar_blog_posts"]) li > a:not(.tag-cloud-link):not(.nectar-button),
body #slide-out-widget-area.fullscreen-split .textwidget a:not(.nectar-button) {
text-decoration: none !important;
background-image: none !important;
background-size: 0 !important;
}
/* Footer: sin underline (Salient data-link-hover) */
#footer-outer[data-link-hover="underline"] #footer-widgets ul:not([class*="nectar_blog_posts"]) a:not(.tag-cloud-link):not(.nectar-button),
#footer-outer[data-link-hover="underline"] #footer-widgets .textwidget a:not(.nectar-button) {
background-image: none !important;
background-size: 0 !important;
}
#footer-outer #footer-widgets a:hover:not(.nectar-button),
#footer-outer #footer-widgets a:focus:not(.nectar-button),
#footer-outer #footer-widgets a:active:not(.nectar-button) {
color: var(--rw-link-soft) !important;
}
/* Home / nebulosa: forzar logo oscuro (Salient muestra el blanco si quita .dark-slide) */
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent #logo img.starting-logo:not(.dark-version),
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent:not(.dark-slide) #logo img.starting-logo:not(.dark-version),
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent.dark-slide #logo img.starting-logo:not(.dark-version),
html body.home #header-outer[data-transparent-header="true"].transparent > header #logo img.starting-logo:not(.dark-version),
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent #logo img.starting-logo:not(.dark-version),
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent:not(.dark-slide) #logo img.starting-logo:not(.dark-version),
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent.dark-slide #logo img.starting-logo:not(.dark-version),
html body.rw-nebula #header-outer[data-transparent-header="true"].transparent > header #logo img.starting-logo:not(.dark-version) {
opacity: 0 !important;
}
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent #logo img.starting-logo.dark-version,
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent:not(.dark-slide) #logo img.starting-logo.dark-version,
html body.home #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent.dark-slide #logo img.starting-logo.dark-version,
html body.home #header-outer[data-transparent-header="true"].transparent > header #logo img.starting-logo.dark-version,
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent #logo img.starting-logo.dark-version,
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent:not(.dark-slide) #logo img.starting-logo.dark-version,
html body.rw-nebula #header-outer[data-transparent-header="true"][data-permanent-transparent="1"].transparent.dark-slide #logo img.starting-logo.dark-version,
html body.rw-nebula #header-outer[data-transparent-header="true"].transparent > header #logo img.starting-logo.dark-version {
opacity: 1 !important;
}
body.home #header-outer.transparent #top nav ul #search-btn a .icon-salient-search,
body.home #header-outer.transparent #top nav ul #nectar-user-account a span,
body.home #header-outer.transparent #top nav ul #nectar-user-account a .icon-salient-m-user,
body.home #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart,
body.home #header-outer.transparent #top nav > ul > li > a,
body.home #header-outer.transparent .nectar-header-text-content,
body.rw-nebula #header-outer.transparent #top nav ul #search-btn a .icon-salient-search,
body.rw-nebula #header-outer.transparent #top nav ul #nectar-user-account a span,
body.rw-nebula #header-outer.transparent #top nav ul #nectar-user-account a .icon-salient-m-user,
body.rw-nebula #header-outer.transparent .cart-menu .cart-icon-wrap .icon-salient-cart,
body.rw-nebula #header-outer.transparent #top nav > ul > li > a,
body.rw-nebula #header-outer.transparent .nectar-header-text-content {
color: #000000 !important;
opacity: 1 !important;
}
/* .lines (centro) debe quedar transparent: la línea media real es .lines-button:after */
body.home #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines-button .lines,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines-button .lines,
body.rw-nebula #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines-button .lines,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines-button .lines {
background-color: transparent !important;
}
body.home #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines:before,
body.home #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines:after,
body.home #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle .lines-button:after,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines-button:after,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines:before,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines:after,
body.rw-nebula #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines:before,
body.rw-nebula #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle a .lines:after,
body.rw-nebula #header-outer.transparent > #top nav ul .slide-out-widget-area-toggle .lines-button:after,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines-button:after,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines:before,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle.mobile-icon .lines:after {
background-color: #000000 !important;
opacity: 1 !important;
}
/* Botón OCM con color custom (fondo negro): líneas blancas, no negras */
body.home #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] .lines-button:after,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines:before,
body.home #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines:after,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] .lines-button:after,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines:before,
body.rw-nebula #header-outer.transparent #top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines:after {
background-color: #ffffff !important;
opacity: 1 !important;
}
body.home #header-outer.transparent #top #mobile-cart-link i,
body.home #header-outer.transparent .mobile-search .icon-salient-search,
body.home #header-outer.transparent .mobile-user-account .icon-salient-m-user,
body.rw-nebula #header-outer.transparent #top #mobile-cart-link i,
body.rw-nebula #header-outer.transparent .mobile-search .icon-salient-search,
body.rw-nebula #header-outer.transparent .mobile-user-account .icon-salient-m-user {
color: #000000 !important;
}
/* Header transparente desde el inicio (sin flash blanco al cargar).
Material fija #header-space { background:#fff }. Spacer oculto en todas. */
html body #header-space,
html body.material #header-space,
html body:not(.nectar-no-flex-height) #header-space,
html body:not(.nectar-no-flex-height) #header-space[data-header-mobile-fixed="1"],
html body:not(.nectar-no-flex-height) #header-space[data-secondary-header-display="full"],
html body:not(.nectar-no-flex-height) #header-space[data-secondary-header-display="full"]:not([data-header-mobile-fixed="false"]) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
background: transparent !important;
background-color: transparent !important;
}
#header-outer,
#header-outer:not(.transparent),
#header-outer[data-permanent-transparent="1"],
#header-outer[data-transparent-header="true"],
#header-outer #top,
body.material #header-outer .bg-color-stripe,
body.material #header-outer:not(.transparent) .bg-color-stripe,
body.material #header-outer.small-nav .bg-color-stripe,
body.material #header-outer[data-permanent-transparent="1"] .bg-color-stripe {
background-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body.material #header-outer .bg-color-stripe,
body.material #header-outer[data-permanent-transparent="1"] .bg-color-stripe {
transform: scaleY(0) !important;
opacity: 0 !important;
display: none !important;
}
/* Home móvil: Material + dynamic-css pintan blanco detrás/encima del header al inicio */
body.home .ocm-effect-wrap,
body.home .ocm-effect-wrap-inner {
background-color: transparent !important;
background: transparent !important;
}
@media only screen and (max-width: 999px) {
html body.home #header-outer,
html body.home #header-outer.transparent,
html body.home #header-outer:not(.transparent),
html body.home.material #header-outer,
html body.home.mobile #header-outer,
html body.home #header-outer[data-permanent-transparent="1"],
html body.home #header-outer[data-transparent-header="true"],
html body.home #header-outer #top,
html body.home #header-outer .nectar-mobile-only.mobile-header {
background-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
html body #header-space,
html body.material #header-space,
html body:not(.nectar-no-flex-height) #header-space[data-secondary-header-display="full"]:not([data-header-mobile-fixed="false"]) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
background: transparent !important;
background-color: transparent !important;
}
}
/* =========================================================================
* Search overlay · Fix apertura en skin "material"
*
* En Salient (skin material), al pulsar la lupa el JS añade la clase
* `material-open` a `#search-outer`, pero no existe regla CSS que
* lo muestre (por defecto es `display:none`). Cubrimos ese hueco:
* · Cuando `#search-outer` recibe `.material-open` → se abre.
* · Le damos posicionamiento fijo, backdrop blanco (skin actual light)
* y transiciones suaves. Se cierra al pulsar la X (`#close`), fuera
* del input o con ESC (comportamiento manejado ya por Salient JS).
* ========================================================================= */
body.material #search-outer {
display: block;
position: fixed;
inset: 0;
z-index: 10000;
opacity: 0;
visibility: hidden;
pointer-events: none;
background-color: rgba(255, 255, 255, 0.98);
transition: opacity 0.35s cubic-bezier(0.2, 1, 0.3, 1), visibility 0s linear 0.35s;
}
body.material #search-outer.material-open {
opacity: 1;
visibility: visible;
pointer-events: all;
transition: opacity 0.35s cubic-bezier(0.2, 1, 0.3, 1), visibility 0s linear 0s;
}
/* Contenedor central del overlay */
body.material #search-outer #search {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0 40px;
}
body.material #search-outer #search input[type="text"] {
width: 100%;
background: transparent;
border: 0;
border-bottom: 2px solid var(--rw-ink, #1a1a1a);
color: var(--rw-ink, #1a1a1a);
font-size: 48px;
line-height: 1.1;
padding: 12px 0;
outline: none;
font-family: var(--rw-font-sans);
font-weight: 700;
}
body.material #search-outer #search input[type="text"]::placeholder {
color: rgba(0, 0, 0, 0.28);
}
body.material #search-outer #search .search-box__button {
display: none; /* ocultamos el submit; se envía con Enter */
}
body.material #search-outer #search span {
display: inline-block;
margin-top: 20px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
}
/* Botón de cerrar (X) arriba a la derecha.
Neutralizamos el pseudo-círculo que Salient (skin material) pinta
con `#close a:before` y lo sustituimos por una X limpia. */
body.material #search-outer #close {
position: absolute;
top: 30px;
right: 30px;
width: 40px;
height: 40px;
margin: 0;
}
body.material #search-outer #close a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
body.material #search-outer #close a:before,
body.material #search-outer #close a:after {
content: none !important;
display: none !important;
}
body.material #search-outer #close .close-wrap {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
animation: none !important;
}
body.material #search-outer #close .close-line {
background-color: var(--rw-ink, #1a1a1a) !important;
height: 2px !important;
width: 100% !important;
position: absolute;
top: 50% !important;
left: 0 !important;
animation: none !important;
}
body.material #search-outer #close .close-line1 {
transform: rotate(45deg) !important;
}
body.material #search-outer #close .close-line2 {
transform: rotate(-45deg) !important;
}
body.material #search-outer #close a:hover .close-line {
background-color: var(--rw-accent, #d9006e) !important;
}
/*FRAN — hero cards + sello (desktop) */
#hero-cards {
width: 80%;
max-width: 1200px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0;
overflow: visible;
}
@media only screen and (min-width: 1000px) {
#hero-cards .nectar-sticky-media-section__content-section {
max-height: 50vh !important;
min-height: 70%;
height: 100%;
width: unset !important;
max-width: 80%;
aspect-ratio: 5 / 4 !important;
margin: auto !important;
}
/* Fila del sello: misma caja que las cards */
#hero-cards .nectar-sticky-media-section__content__wrap > .wpb_row.inner_row:first-child,
#hero-cards .nectar-sticky-media-section__content__wrap > .wpb_row.inner_row:has(.hero-spinner) {
max-height: 50vh !important;
min-height: 70%;
height: 100% !important;
width: unset !important;
max-width: 80%;
aspect-ratio: 5 / 4 !important;
margin: auto !important;
position: relative !important;
pointer-events: none !important;
overflow: visible !important;
}
#hero-cards .hero-spinner {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
overflow: visible !important;
z-index: 40 !important;
}
#hero-cards .hero-spinner > .vc_column-inner,
#hero-cards .hero-spinner .wpb_wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
}
/* Sello 15vh en esquina superior izquierda de la card */
#hero-cards .hero-spinner .img-with-aniamtion-wrap,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.custom-width-175px.looped-animation-rotate,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.looped-animation-rotate.position_desktop_absolute,
#hero-cards .looped-animation-rotate {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 15vh !important;
height: 15vh !important;
max-width: 15vh !important;
margin: 0 !important;
padding: 0 !important;
transform: translate(-50%, 30%) !important;
z-index: 50 !important;
overflow: visible !important;
}
#hero-cards .hero-spinner .img-with-aniamtion-wrap .inner,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.looped-animation-rotate .inner,
#hero-cards .hero-spinner .img-with-aniamtion-wrap img {
display: block !important;
width: 15vh !important;
height: 15vh !important;
max-width: 15vh !important;
margin: 0 !important;
object-fit: contain;
}
}
.nectar-sticky-media-section__media.loaded {
border-radius: 20px !important;
overflow: hidden;
}
/*
* Títulos de página: fluido desktop → 220px @ 2560px.
* Scrolling text (EMPRESA FAMILIAR…): mitad → 110px @ 2560px.
* Móvil (≤999px): tamaños por defecto del tema.
*/
@media only screen and (min-width: 1000px) {
:root {
--rw-page-title-size: min(220px, calc(100vw * 220 / 2560));
--rw-scroll-text-size: min(110px, calc(100vw * 110 / 2560));
}
body .nectar-split-heading > h1,
body .nectar-split-heading[data-has-fit-text="true"] > h1,
body .woocommerce .woocommerce-products-header__title,
body .woocommerce-page h1.page-title,
body h1.page-title,
body h1.entry-title:not(.product_title),
body #page-header-bg h1,
body .nectar-box-roll .overlaid-content h1 {
font-size: var(--rw-page-title-size) !important;
line-height: 0.92 !important;
text-align: center !important;
width: 100% !important;
}
/* Fitty dejaba inline-block → al quitar el fit queda a la izquierda */
body .nectar-split-heading,
body .nectar-split-heading[data-has-fit-text="true"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
body .nectar-split-heading[data-has-fit-text="true"],
body .nectar-split-heading[data-has-fit-text="true"] > h1,
body .nectar-split-heading[data-has-fit-text="true"] > h1 span,
body .nectar-split-heading[data-has-fit-text="true"] > h1 .inner {
font-size: inherit !important;
}
body .nectar-split-heading[data-has-fit-text="true"] > h1 {
font-size: var(--rw-page-title-size) !important;
display: block !important;
text-align: center !important;
}
body .nectar-split-heading[data-has-fit-text="true"]:not(.fitty-fit) {
opacity: 1 !important;
}
/*
* Marquee / outline — mitad del título.
* Solo font-size (como Salient .font_size_116px). NO tocar width/height de SVG:
* nectar-text-outline.js mide getComputedStyle y regenera máscaras en resize.
*/
body .custom-scrolling-text .nectar-scrolling-text.font_size_116px .nectar-scrolling-text-inner *,
body .custom-scrolling-outline .nectar-scrolling-text.font_size_116px .nectar-scrolling-text-inner * {
font-size: var(--rw-scroll-text-size) !important;
line-height: 1em !important;
}
body .custom-scrolling-text .nectar-scrolling-text .custom.spin,
body .custom-scrolling-outline .nectar-scrolling-text .custom.spin {
font-size: calc(var(--rw-scroll-text-size) / 2) !important;
}
}
/* Home: el H1 es imagen — no forzar font-size */
@media only screen and (min-width: 1000px) {
body.home #home-header .nectar-split-heading > h1,
body.home #home-header .nectar-split-heading[data-has-fit-text="true"] > h1 {
font-size: inherit !important;
}
}
/* Móvil: cards cuadradas + sticky stack intacto + sello en esquina */
@media only screen and (max-width: 999px) {
body.home #home-header {
margin-top: 70px !important;
margin-bottom: 20px !important;
padding-bottom: 0 !important;
}
#hero-cards {
width: 100% !important;
max-width: 100% !important;
left: auto !important;
transform: none !important; /* transform en padre rompe el efecto */
margin: 50px auto 0 !important;
padding: 0 !important;
overflow: visible !important;
display: block !important;
--rw-hero-card-size: calc(min(72vw, 300px) - 10px);
}
#hero-cards > .row_col_wrap_12,
#hero-cards > .row_col_wrap_12 > .wpb_column,
#hero-cards > .row_col_wrap_12 > .wpb_column > .vc_column-inner,
#hero-cards > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Altura del stack: la deja Salient (section-count * 90vh) */
#hero-cards .type--layered-card-reveal.layered-card-reveal-effect--stack {
width: 100% !important;
margin: 0 auto !important;
overflow: visible !important; /* sello sobresale de la esquina */
}
#hero-cards .nectar-sticky-media-section__content__wrap {
/* no tocar position/display: el JS/CSS de Salient lo necesitan */
width: 100% !important;
margin: 0 auto !important;
}
/*
* Cards cuadradas centradas (top:50% = efecto sticky del stack).
* No sobreescribir transform: Salient anima --stack-offset.
*/
#hero-cards .type--layered-card-reveal.layered-card-reveal-effect--stack .nectar-sticky-media-section__content-section {
top: 50% !important;
left: 50% !important;
width: var(--rw-hero-card-size) !important;
max-width: var(--rw-hero-card-size) !important;
aspect-ratio: 1 / 1 !important;
max-height: none !important;
min-height: 0 !important;
height: auto !important;
}
#hero-cards .nectar-sticky-media-section__content-section__wrap,
#hero-cards .nectar-sticky-media-section__media,
#hero-cards .nectar-sticky-media-content__media-wrap,
#hero-cards .nectar-sticky-media-section__media.loaded {
border-radius: 20px !important;
overflow: hidden;
width: 100% !important;
height: 100% !important;
}
#hero-cards .nectar-sticky-media-section__media {
background-size: cover !important;
background-position: center !important;
}
/* Fila del sello: sin containing block propio → ancla al stack (como las cards) */
#hero-cards .nectar-sticky-media-section__content__wrap > .wpb_row.inner_row:first-child {
position: static !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
overflow: visible !important;
}
/* Misma ancla vertical que las cards (50%) para que acompañe el sticky */
#hero-cards .hero-spinner {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: var(--rw-hero-card-size) !important;
max-width: var(--rw-hero-card-size) !important;
height: var(--rw-hero-card-size) !important;
aspect-ratio: 1 / 1 !important;
transform: translate(-50%, -50%) !important;
z-index: 40 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#hero-cards .hero-spinner > .vc_column-inner,
#hero-cards .hero-spinner .wpb_wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
}
/* Sello en esquina superior izquierda de la card (como en desktop) */
#hero-cards .hero-spinner .img-with-aniamtion-wrap,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.custom-width-175px.looped-animation-rotate,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.looped-animation-rotate.position_desktop_absolute,
#hero-cards .looped-animation-rotate {
position: absolute !important;
top: calc(50vh - 60px) !important;
left: 20px !important;
right: auto !important;
bottom: auto !important;
width: 110px !important;
max-width: 110px !important;
margin: 0 !important;
padding: 0 !important;
/* Centro del círculo = esquina de la tarjeta */
transform: translate(-50%, -50%) !important;
z-index: 50 !important;
overflow: visible !important;
text-align: center !important;
}
#hero-cards .hero-spinner .img-with-aniamtion-wrap .inner,
#hero-cards .hero-spinner .img-with-aniamtion-wrap.looped-animation-rotate .inner {
display: block !important;
width: 110px !important;
max-width: 110px !important;
margin: 0 !important;
}
#hero-cards .hero-spinner .img-with-aniamtion-wrap img {
display: block !important;
width: 110px !important;
max-width: 110px !important;
height: auto !important;
}
}
.custom-text {
font-size: 2rem;
line-height: 2.5rem;
text-align: center;
}
/* Tagline home (TRADICIÓN, FAMILIA…) = mismo tamaño que .custom-text */
body.home .nectar-split-heading:has(> p),
body.home .nectar-split-heading[data-has-fit-text="true"]:has(> p) {
font-size: 2rem !important;
line-height: 2.5rem !important;
white-space: normal !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
opacity: 1 !important;
}
body.home .nectar-split-heading:has(> p) > p,
body.home .nectar-split-heading:has(> p) > p span,
body.home .nectar-split-heading:has(> p) > p .inner {
font-size: inherit !important;
line-height: inherit !important;
white-space: normal !important;
}
@media only screen and (max-width: 999px) {
.custom-text,
.custom-text p {
font-size: 1.05rem;
line-height: 1.55rem;
}
body.home .nectar-split-heading:has(> p),
body.home .nectar-split-heading[data-has-fit-text="true"]:has(> p) {
font-size: 1.05rem !important;
line-height: 1.55rem !important;
}
}
.nectar-category-grid.mouse-move-bound.active.el-in-view > div {
min-width: 25%;
margin: 20px 0;
}
.custom-scrolling-text h2 {
font-weight: 400;
}
.custom-scrolling-outline h2 {
font-weight: 300;
}
/*
* Marquee outline: solape 50% con la imagen siguiente.
* margin-bottom negativo en el row (más fiable que tocar el margin inline de la img).
*/
.custom-scrolling-outline {
position: relative;
z-index: 2;
margin-bottom: -55px !important; /* fallback ≈ mitad de 110px */
}
@media only screen and (min-width: 1000px) {
.custom-scrolling-outline {
margin-bottom: calc(min(110px, 100vw * 110 / 2560) / -2) !important;
}
}
@media only screen and (max-width: 999px) {
.custom-scrolling-outline {
margin-bottom: calc(13vw / -2) !important;
}
}
.custom-scrolling-outline + .wpb_row {
position: relative;
z-index: 1;
}
.custom-scrolling-outline + .wpb_row .img-with-aniamtion-wrap {
margin-top: 0 !important; /* anula style="margin-top:-50px" */
}
/* Historia: icono Roniwesk (custom-width-200px) más pequeño y centrado en móvil */
@media only screen and (max-width: 999px) {
body.page-id-2380 .img-with-aniamtion-wrap.custom-width-200px {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
body.page-id-2380 .img-with-aniamtion-wrap.custom-width-200px .inner,
body.page-id-2380 .img-with-aniamtion-wrap.custom-width-200px .hover-wrap,
body.page-id-2380 .img-with-aniamtion-wrap.custom-width-200px .hover-wrap-inner {
display: inline-block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 110px !important;
width: 110px !important;
}
body.page-id-2380 .img-with-aniamtion-wrap.custom-width-200px img {
max-width: 110px !important;
width: 110px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Historia: marquee outline (29px) = mismo tamaño que el de SVG (13vw) en móvil */
@media only screen and (max-width: 999px) {
body .custom-scrolling-text .nectar-scrolling-text.font_size_116px .nectar-scrolling-text-inner *,
body .custom-scrolling-text .nectar-scrolling-text.font_size_mobile_29px .nectar-scrolling-text-inner *,
body .custom-scrolling-outline .nectar-scrolling-text.font_size_116px .nectar-scrolling-text-inner *,
body .custom-scrolling-outline .nectar-scrolling-text.font_size_mobile_13vw .nectar-scrolling-text-inner * {
font-size: 13vw !important;
line-height: 1em !important;
}
body .custom-scrolling-text .nectar-scrolling-text .custom.spin,
body .custom-scrolling-outline .nectar-scrolling-text .custom.spin {
font-size: 6.5vw !important;
}
}
#home-header {
margin-top: 110px;
}
body.home .vc_column-inner:has(#home-header),
body.home .vc_column-inner:has(#home-header) > .wpb_wrapper {
border-bottom: 0 !important;
box-shadow: none !important;
}
@media only screen and (max-width: 999px) {
#home-header {
margin-top: 70px !important;
margin-bottom: 20px !important;
}
}
.home-brands .vc_custom_heading {
font-weight: light;
font-size: clamp( 24px, calc(24px + (120 - 24) * ((100vw - 300px) / (1700 - 300))), 120px);
}
.home-brands .clients.four-cols img {
width: auto;
max-height: 120px;
max-width: 150px;
}
@media only screen and (max-width: 999px) {
.home-brands .clients.four-cols img {
max-height: 56px;
max-width: 88px;
}
.home-brands {
margin-bottom: 48px !important;
padding-bottom: 28px !important;
}
/* Separación extra antes del slider horizontal de la home */
body.home .nectar-sticky-media-sections.type--horizontal-scrolling {
margin-top: 40px !important;
padding-top: 8px;
}
}
/* Spacer del header: oculto en todas (Salient lo fuerza con display:block!important). */
html body #header-space,
html body:not(.nectar-no-flex-height) #header-space,
html body:not(.nectar-no-flex-height) #header-space[data-header-mobile-fixed="1"],
html body:not(.nectar-no-flex-height) #header-space[data-secondary-header-display="full"],
html body:not(.nectar-no-flex-height) #header-space[data-secondary-header-display="full"]:not([data-header-mobile-fixed="false"]),
html body.material #header-space,
html body.home #header-space {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
background: transparent !important;
background-color: transparent !important;
}
/* Compensa #header-space oculto */
html body .container-wrap {
padding-top: 120px !important;
}
.rw-shop-product__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 4%;
}
.rw-shop-product__meta {
margin-top: auto;
}
/* ============================================================
WooCommerce — Tienda / catálogo (teaser estilo "ficha completa")
Cards editoriales: fondo crema, imagen en marco, título Inter,
chips, precio y botón pill negro. Coherente con la página de
producto individual.
============================================================ */
/* Tienda / archivos: sin fondo sólido (nebulosa global) */
body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat,
body.page-id-4 {
background: transparent;
}
/* Ocultar el aviso de "añadir un widget/fila" del builder en la tienda */
/* Cabecera custom de la tienda (contenido WPBakery de la página Tienda) */
body.page-id-4 .page-description,
body.post-type-archive-product .page-description,
body.tax-product_cat .page-description {
display: block !important;
margin: 0 0 clamp(32px, 5vw, 64px);
}
body.rw-shop-landing .page-description .wpb_row.has-row-bg-color,
body.rw-shop-landing .page-description .row-bg,
body.rw-shop-landing .page-description .row-bg.using-bg-color {
background-color: transparent !important;
}
/* Barra filtros/orden (reubicada tras page-description) */
body.rw-shop-landing .nectar-shop-header-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
width: 100%;
margin: 0 0 clamp(28px, 4vw, 48px);
padding: 0;
}
body.rw-shop-landing .nectar-shop-header-bottom .left-side,
body.rw-shop-landing .nectar-shop-header-bottom .right-side {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
body.rw-shop-landing .nectar-shop-header-bottom .woocommerce-result-count,
body.rw-shop-landing .nectar-shop-header-bottom .woocommerce-ordering {
margin: 0;
}
/* Ocultar panel de filtros Salient/YITH; el filtrado va por category grid */
body.rw-shop-landing #sidebar,
body.rw-shop-landing .nectar-shop-filters,
body.rw-shop-landing .nectar-shop-filter-trigger,
body.rw-shop-landing .rw-yith-filters--hidden {
display: none !important;
}
body.rw-shop-landing .post-area.col.span_9,
body.rw-shop-landing .post-area.col.span_9.col_last {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* Category grid como filtro AJAX */
body.rw-shop-landing .page-description .nectar-category-grid .nectar-category-grid-item.rw-cat-filter-active .cat-heading {
text-decoration: underline;
text-underline-offset: 0.2em;
}
body.rw-shop-landing .page-description .nectar-category-grid .nectar-category-grid-link {
cursor: pointer;
}
/* Cabecera de la tienda — título editorial */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .page-title,
body.page-id-4 h1.entry-title {
font-family: var(--rw-font-sans);
font-weight: 800;
letter-spacing: -0.01em;
}
/* Barra de resultados / ordenación */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 28px; }
/* --- Card (respeta el layout de columnas nativo de Salient) --- */
.woocommerce ul.products li.product:not(.rw-shop-landing-item),
.woocommerce-page ul.products li.product:not(.rw-shop-landing-item) {
box-sizing: border-box;
padding: 16px 16px 20px !important;
margin-bottom: 32px !important;
background: #ffffff;
border: 1px solid var(--rw-line-soft);
border-radius: var(--rw-radius-card);
box-shadow: var(--rw-shadow-card);
transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.35s ease;
overflow: hidden;
}
.woocommerce ul.products li.product:not(.rw-shop-landing-item):hover {
transform: translateY(-6px);
box-shadow: var(--rw-shadow-card-hover);
}
.woocommerce ul.products li.product .product-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
/* Imagen sin fondo, formato botella */
.woocommerce ul.products li.product .product-wrap > a:first-child {
display: block;
background: transparent;
border-radius: 14px;
padding: 22px;
overflow: hidden;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .product-wrap > a:first-child img {
width: 100%;
height: 240px;
object-fit: contain;
margin: 0 !important;
mix-blend-mode: multiply;
transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }
/* Metadatos centrados */
.woocommerce ul.products li.product .product-meta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1 1 auto;
padding: 18px 4px 0;
}
/* Título editorial */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--rw-font-sans) !important;
font-weight: 700 !important;
font-size: 20px !important;
line-height: 1.2 !important;
color: var(--rw-ink) !important;
padding: 0 !important;
margin: 0 0 10px !important;
letter-spacing: -0.01em;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--rw-ink-soft) !important; }
/* Precio */
.woocommerce ul.products li.product .price {
color: var(--rw-ink) !important;
font-size: 18px !important;
font-weight: 700 !important;
margin: 4px 0 16px !important;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
font-size: 11px;
font-weight: 400;
color: var(--rw-muted);
}
/* Empuja el botón al fondo de la card */
.woocommerce ul.products li.product .product-add-to-cart { margin-top: auto; width: 100%; }
/* Botón "Añadir al carrito" — pill negro, ancho completo */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 13px 20px !important;
background: var(--rw-ink) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-family: var(--rw-font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
line-height: 1.2 !important;
transition: background 0.25s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
background: var(--rw-accent, #d9006e) !important;
color: #fff !important;
transform: translateY(-1px);
}
.woocommerce ul.products li.product .button.add_to_cart_button.loading::after { top: 14px; }
.woocommerce ul.products li.product .added_to_cart { margin-top: 8px !important; background: transparent !important; color: var(--rw-ink) !important; border: 1px solid var(--rw-line) !important; }
/* Enlaces (imagen/título) sin subrayado del tema */
.woocommerce ul.products li.product a { text-decoration: none !important; box-shadow: none !important; }
/* Forzar el botón "Añadir al carrito" siempre visible (la skin material lo
oculta hasta el hover). */
.woocommerce ul.products li.product .product-add-to-cart,
.woocommerce .products[data-rm-m-hover="1"] .material.product .product-wrap .product-add-to-cart {
display: block !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
margin-top: 16px !important;
width: 100%;
}
/* Quitar el overlay de expansión de color del hover (bandas/artefactos
detrás de la imagen en la skin material). */
.woocommerce ul.products li.product .background-color-expand,
.woocommerce ul.products li.product .product-wrap .background-color-expand { display: none !important; }
/* Ocultar el botón "Quick View" de Salient en las cards */
.woocommerce ul.products li.product a.nectar_quick_view,
.woocommerce ul.products li.product .nectar_quick_view { display: none !important; }
/* Texto del botón "Añadir al carrito" siempre blanco (incluye icono/span) */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button * ,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover * {
color: #fff !important;
}
/* No ocultar el precio de la card en el hover (solo el precio del meta,
NO el del botón). */
.woocommerce ul.products li.product .product-meta > .price,
.woocommerce ul.products li.product:hover .product-meta > .price,
.woocommerce .products[data-rm-m-hover="1"] .material.product:hover .product-wrap .product-meta > .price {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
transform: none !important;
max-height: none !important;
}
/* Quitar el precio dentro del botón "Añadir al carrito" (skin material),
dejando solo el texto — también en hover. */
.woocommerce ul.products li.product .product-add-to-cart .price,
.woocommerce ul.products li.product .button.add_to_cart_button .price,
.woocommerce ul.products li.product:hover .product-add-to-cart .price,
.woocommerce .products[data-rm-m-hover="1"] .material.product:hover .product-wrap .product-add-to-cart .price {
display: none !important;
border-right: 0 !important;
padding-right: 0 !important;
}
/* ============================================================
/productos — layout landing (cascading image + CTA underline)
============================================================ */
/* Sin fondos blancos en el área de productos (deja ver el degradado) */
.rw-shop-landing .container-wrap,
.rw-shop-landing .container.main-content,
.rw-shop-landing .woocommerce,
.rw-shop-landing .woocommerce ul.products {
background: transparent !important;
box-shadow: none !important;
}
.rw-shop-landing .woocommerce ul.products.rw-shop-landing-list {
display: block !important;
margin: 0;
padding: 0;
}
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item,
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item:hover,
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item:focus-within {
width: 100% !important;
max-width: none !important;
float: none !important;
clear: both !important;
display: block !important;
margin: 0 0 clamp(48px, 8vw, 96px) !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
transition: none !important;
}
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item::before,
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item::after {
display: none !important;
content: none !important;
box-shadow: none !important;
}
/* Anular reglas Salient data-n-*-columns (mayor especificidad que woocommerce.css) */
@media only screen and (min-width: 1300px) {
.rw-shop-landing.woocommerce:not(.single-product) ul.products.rw-shop-landing-list li.product.rw-shop-landing-item {
width: 100% !important;
margin: 0 0 clamp(48px, 8vw, 96px) !important;
}
}
@media only screen and (max-width: 1300px) and (min-width: 1000px) {
.rw-shop-landing.woocommerce:not(.single-product) ul.products.rw-shop-landing-list li.product.rw-shop-landing-item {
width: 100% !important;
margin: 0 0 clamp(48px, 8vw, 96px) !important;
}
}
@media only screen and (max-width: 999px) and (min-width: 691px) {
.rw-shop-landing.woocommerce:not(.single-product) ul.products.rw-shop-landing-list li.product.rw-shop-landing-item {
width: 100% !important;
margin: 0 0 120px !important;
}
}
@media only screen and (max-width: 690px) {
.rw-shop-landing.woocommerce:not(.single-product) ul.products.rw-shop-landing-list li.product.rw-shop-landing-item {
width: 100% !important;
margin: 0 0 110px !important;
}
}
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item .rw-shop-product,
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item .rw-shop-product__content,
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item .rw-shop-product__row {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
.rw-shop-landing .woocommerce ul.products li.rw-shop-landing-item .rw-shop-product__media {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
}
/* Fila producto: columna imagen ≈ vc_col-sm-4 + padding-4-percent de la landing */
.rw-shop-landing .rw-shop-product__row {
display: grid;
grid-template-columns: minmax(240px, 33.333%) minmax(280px, 1fr);
gap: clamp(24px, 5vw, 64px);
align-items: center;
}
/* Contenedor media = columna landing (margin-top 6% + padding 4%) */
.rw-shop-landing .rw-shop-product__media,
.rw-shop-landing-list .rw-shop-product__media {
width: 100%;
max-width: 100%;
margin-top: 6%;
padding: 4%;
box-sizing: border-box;
overflow: visible;
}
.rw-shop-landing-list .rw-shop-product__media-link {
display: block;
width: 100%;
max-width: 310px;
color: inherit;
text-decoration: none;
}
/*
* Cascading: CSS/JS nativo Salient + ratio 4:5
* (aspect-4-5 lo genera Salient solo con shortcode WPBakery).
*/
.rw-shop-landing .rw-shop-product__media .nectar_cascading_images,
.rw-shop-landing-list .rw-shop-product__media .nectar_cascading_images {
width: 100%;
max-width: 310px;
margin: 0;
}
.rw-shop-landing .nectar_cascading_images.forced-aspect.aspect-4-5 .cascading-image:first-child .bg-layer,
.rw-shop-landing-list .nectar_cascading_images.forced-aspect.aspect-4-5 .cascading-image:first-child .bg-layer {
padding-bottom: calc((5 / 4) * 100%);
}
.rw-shop-landing .rw-shop-product__title,
.rw-shop-landing-list .rw-shop-product__title {
font-family: var(--rw-font-sans);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 16px;
max-width: 550px;
}
.rw-shop-landing .rw-shop-product__title a,
.rw-shop-landing-list .rw-shop-product__title a {
color: var(--rw-ink);
text-decoration: none;
font-weight: 900;
}
.rw-shop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.single-product .product_title {
text-transform: uppercase !important;
}
.rw-shop-landing .rw-shop-product__excerpt {
max-width: 550px;
margin-bottom: 18px;
color: var(--rw-ink-soft);
font-size: 1rem;
line-height: 1.65;
}
.rw-shop-landing .rw-shop-product__excerpt p {
margin: 0 0 12px;
}
.rw-shop-landing .rw-shop-product__content .rw-product-chips {
justify-content: flex-start;
margin: 0 0 18px;
}
.rw-shop-landing .rw-shop-product__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px 28px;
max-width: 550px;
margin-bottom: 0;
}
.rw-shop-landing .rw-shop-product__price {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--rw-ink);
line-height: 1.4;
}
.rw-shop-landing .rw-shop-product__price .woocommerce-price-suffix {
display: inline;
margin-left: 4px;
font-size: 0.82rem;
font-weight: 400;
color: var(--rw-muted);
}
.rw-shop-landing .rw-shop-product__cta-wrap {
margin: 0;
}
.rw-shop-landing .rw-shop-product__cta-wrap .link_wrap {
display: inline-block;
border: 0 !important;
border-bottom: 0 !important;
}
.rw-shop-landing .rw-shop-product__cta-wrap .link_wrap .link_text {
position: relative;
display: inline-block;
padding-right: 0;
}
.rw-shop-landing .rw-shop-product__cta-wrap .link_wrap .link_text::after {
display: block !important;
content: '' !important;
position: absolute;
left: 0;
width: 100%;
height: 0;
bottom: -4px;
background-color: #000 !important;
opacity: 1 !important;
transform: scaleX(1);
transform-origin: right;
transition: transform 0.45s cubic-bezier(0.15, 0.75, 0.5, 1);
animation: none !important;
}
.rw-shop-landing .rw-shop-product__cta-wrap .link_wrap:hover .link_text::after {
transform: scaleX(0);
transform-origin: right;
}
.rw-shop-landing .rw-shop-product__cta,
.rw-shop-landing .rw-shop-product__cta:hover,
.rw-shop-landing .rw-shop-product__cta:hover * {
display: inline-block;
padding: 0;
margin: 0;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #000 !important;
font-size: 1rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
line-height: 1.4;
opacity: 1;
}
.rw-shop-landing .rw-shop-product__cta.loading::after {
display: none;
}
@media (max-width: 999px) {
.rw-shop-landing .rw-shop-product__row {
grid-template-columns: 1fr;
}
.rw-shop-landing .rw-shop-product__media {
margin-top: 0;
}
}
.rw-shop-teasers {
width: 100%;
}
.rw-shop-teasers .products.rw-shop-landing-list {
list-style: none;
margin: 0;
padding: 0;
}
.rw-shop-teasers__more {
margin: clamp(24px, 4vw, 48px) 0 0;
max-width: 550px;
}
/* ============================================================
Resultados del buscador — cards al estilo de la tienda
(#search-results usa article.result en masonry)
============================================================ */
#search-results article.result {
box-sizing: border-box;
}
#search-results article.result .inner-wrap {
background: #ffffff;
border: 1px solid var(--rw-line-soft);
border-radius: var(--rw-radius-card);
box-shadow: var(--rw-shadow-card);
padding: 16px 16px 20px;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.35s ease;
}
#search-results article.result:hover .inner-wrap {
transform: translateY(-6px);
box-shadow: var(--rw-shadow-card-hover);
}
/* Imagen en marco crema, formato botella */
#search-results article.result .inner-wrap > a:first-child {
display: block;
background: var(--rw-bg-cream);
border-radius: 14px;
padding: 22px;
overflow: hidden;
text-decoration: none !important;
box-shadow: none !important;
}
#search-results article.result .inner-wrap > a:first-child img {
width: 100%;
height: 240px;
object-fit: contain;
margin: 0 !important;
display: block;
mix-blend-mode: multiply;
transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
#search-results article.result:hover .inner-wrap > a:first-child img { transform: scale(1.05); }
/* Título editorial */
#search-results article.result .title {
font-family: var(--rw-font-sans) !important;
font-weight: 700 !important;
font-size: 20px !important;
line-height: 1.2 !important;
text-align: center;
margin: 16px 0 0 !important;
padding: 0 !important;
letter-spacing: -0.01em;
}
#search-results article.result .title a {
color: var(--rw-ink) !important;
text-decoration: none !important;
box-shadow: none !important;
}
#search-results article.result .title a:hover { color: var(--rw-ink-soft) !important; }
/* Etiqueta de tipo ("Product", "Page"...) como chip discreto */
#search-results article.result .title span {
display: block;
font-family: var(--rw-font-sans) !important;
font-size: 10px !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rw-muted);
margin-top: 8px;
}
/* Título con líneas laterales (clase back-line en h4) */
h4.back-line,
.back-line {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h4.back-line::before,
h4.back-line::after,
.back-line::before,
.back-line::after {
content: '';
flex: 1 1 0;
min-width: 24px;
height: 1px;
background: currentColor;
}
/* ============================================================
* Página Contacto
* ============================================================ */
.rw-contacto {
width: 100%;
max-width: 1100px;
margin: 0 auto;
font-family: var(--rw-font-sans);
}
.rw-contacto__grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
.rw-contacto__label {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
}
.rw-contacto__company,
.rw-contacto__address,
.rw-contacto__meta {
margin: 0;
font-family: inherit;
font-size: 1em;
font-weight: 400;
line-height: 1.55;
}
.rw-contacto__info > *,
.rw-contacto__info p {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.rw-contacto__link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease, opacity 0.2s ease;
}
.rw-contacto__link:hover {
border-bottom-color: currentColor;
opacity: 0.85;
}
.rw-contacto__form .wpcf7 {
margin: 0;
}
.rw-contacto__form .wpcf7 form label {
display: block;
margin: 0 0 1.1rem;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.7;
}
.rw-contacto__form .wpcf7 form input[type="text"],
.rw-contacto__form .wpcf7 form input[type="email"],
.rw-contacto__form .wpcf7form input[type="tel"],
.rw-contacto__form .wpcf7 form textarea {
display: block;
width: 100%;
margin-top: 0.45rem;
padding: 0.85rem 0;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: var(--rw-font-sans);
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: inherit;
transition: border-color 0.2s ease;
}
.rw-contacto__form .wpcf7 form input[type="text"]:focus,
.rw-contacto__form .wpcf7 form input[type="email"]:focus,
.rw-contacto__form .wpcf7 form input[type="tel"]:focus,
.rw-contacto__form .wpcf7 form textarea:focus {
outline: none;
border-bottom-color: rgba(0, 0, 0, 0.55);
}
.rw-contacto__form .wpcf7 form textarea {
min-height: 140px;
resize: vertical;
}
.rw-contacto__form .wpcf7 form .wpcf7-submit,
.rw-contacto__form .wpcf7 form input[type="submit"] {
margin-top: 0.5rem;
padding: 0.9rem 2.25rem;
border: 1px solid currentColor;
border-radius: 0;
background: transparent;
color: inherit;
font-family: var(--rw-font-sans);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.rw-contacto__form .wpcf7 form .wpcf7-submit:hover,
.rw-contacto__form .wpcf7 form input[type="submit"]:hover {
background: #111;
color: #fff;
}
.rw-contacto__form .wpcf7-not-valid-tip,
.rw-contacto__form .wpcf7-response-output {
font-size: 0.9rem;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 999px) {
.rw-contacto__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/*
* Horizontal sticky → carrusel autoplay (home / historia).
* Full-bleed + 3 slides a --section-height (como Salient), sin trampa de scroll.
*/
.nectar-sticky-media-sections.type--horizontal-scrolling.rw-hscroll-autoplay {
--rw-hscroll-gap: var(--section-gap, 10px);
--rw-hscroll-visible: 3;
--rw-hscroll-slide: calc(
(100vw - (var(--rw-hscroll-gap) * (var(--rw-hscroll-visible) - 1))) / var(--rw-hscroll-visible)
);
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 48px !important;
padding: 0 !important;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content__wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
position: relative !important;
top: auto !important;
left: auto !important;
width: max-content !important;
max-width: none !important;
height: auto !important;
gap: var(--rw-hscroll-gap) !important;
will-change: transform;
touch-action: pan-y;
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.rw-hscroll-autoplay.rw-hscroll-dragging .nectar-sticky-media-section__content__wrap {
cursor: grabbing;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content__wrap img,
.rw-hscroll-autoplay .nectar-sticky-media-section__content__wrap a {
-webkit-user-drag: none;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content-section {
position: relative !important;
flex: 0 0 var(--rw-hscroll-slide) !important;
width: var(--rw-hscroll-slide) !important;
max-width: var(--rw-hscroll-slide) !important;
height: calc(var(--section-height, 100vh) - var(--wp-admin--admin-bar--height, 0px)) !important;
margin: 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content-section__wrap {
position: relative !important;
display: block !important;
height: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
border-radius: 20px;
transform: none !important;
}
.rw-hscroll-autoplay .nectar-sticky-media-content__media-wrap {
display: block !important;
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__media {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content-section-inner {
position: relative;
z-index: 2;
height: 100%;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__link {
z-index: 3;
}
@media only screen and (max-width: 999px) {
.nectar-sticky-media-sections.type--horizontal-scrolling.rw-hscroll-autoplay {
--rw-hscroll-gap: 8px;
--rw-hscroll-visible: 1.15;
padding: 0 4vw !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
.rw-hscroll-autoplay .nectar-sticky-media-section__content-section {
height: min(78vh, 640px) !important;
aspect-ratio: auto;
}
}
/*
* Fallback móvil si aún no hay clase rw-hscroll-autoplay:
* carrusel swipe (sin trampa de scroll vertical).
*/
@media only screen and (max-width: 999px) {
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) {
display: block !important;
height: auto !important;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding: 0 0 12px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__content__wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch;
width: max-content !important;
max-width: none !important;
position: relative !important;
top: auto !important;
gap: 12px;
padding: 0 4vw;
transform: none !important;
height: auto !important;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__content-section {
position: relative !important;
flex: 0 0 min(78vw, 320px) !important;
width: min(78vw, 320px) !important;
max-width: min(78vw, 320px) !important;
height: auto !important;
aspect-ratio: 4 / 5;
margin: 0 !important;
scroll-snap-align: center;
transform: none !important;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__content-section__wrap {
position: relative !important;
display: block !important;
height: 100% !important;
min-height: 100%;
overflow: hidden;
border-radius: 20px;
transform: none !important;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-content__media-wrap {
display: block !important;
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__media {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__content-section-inner {
position: relative;
z-index: 2;
height: 100%;
}
.nectar-sticky-media-sections.type--horizontal-scrolling:not(.rw-hscroll-autoplay) .nectar-sticky-media-section__link {
z-index: 3;
}
}