/*
 * SonhoLab · Tema de tienda pública
 * Capa visual sobre el tema "default". Se carga al final del <head>, después de custom.css.
 * Solo presentación: no depende de ninguna lógica nueva.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
    --st-paper: #F7F5F0;
    --st-surface: #FFFFFF;
    --st-sunken: #F1EEE8;
    --st-line: #E7E3DA;
    --st-ink: #16181D;
    --st-ink-2: #5A6070;
    --st-pine: #0E5A47;
    --st-pine-hover: #0B4838;
    --st-pine-tint: #E6F0EC;
    --st-coral: #0B4838;
    --st-star: #1F7A62;

    --st-radius-sm: 10px;
    --st-radius: 14px;
    --st-radius-lg: 20px;
    --st-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px -12px rgba(22, 24, 29, .12);
    --st-shadow-hover: 0 2px 4px rgba(22, 24, 29, .04), 0 18px 36px -16px rgba(22, 24, 29, .22);
    --st-ease: cubic-bezier(.2, .7, .2, 1);

    --st-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --st-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Variables del tema base: se imponen sobre business_settings */
    --base: #0E5A47;
    --base-2: #0B4838;
    --web-primary: #0E5A47;
    --web-primary-10: #E6F0EC;
    --web-primary-20: #E6F0EC;
    --web-primary-40: #C9DDD5;
    --web-secondary: #0B4838;
    --primary-clr: #0E5A47;
    --font-family-sans-serif: "Inter", system-ui, sans-serif;
    --input-placeholder-color: #5A6070;
}

/* ------------------------------------------------------------------ */
/* 2. Base y tipografía                                                */
/* ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body,
body.toolbar-enabled {
    background: var(--st-paper) !important;
    color: var(--st-ink);
    font-family: var(--st-font-body) !important;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body :where(p, span, a, li, label, input, select, textarea, button, small, strong, del, div, td, th, h1, h2, h3, h4, h5, h6) {
    font-family: var(--st-font-body);
}

body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.feature-product-title,
.for-feature-title,
.categories-title,
.featured_deal_title,
.arrival-title,
.seller-list-title h5,
.st-section-title {
    font-family: var(--st-font-display) !important;
    color: var(--st-ink);
    letter-spacing: -0.02em;
}

a { color: var(--st-ink); transition: color .2s var(--st-ease); }
a:hover { color: var(--st-pine); text-decoration: none; }

.text-muted, .text-body { color: var(--st-ink-2) !important; }
.text-dark { color: var(--st-ink) !important; }
.text-primary, .web-text-primary, .text-base, .text-accent, .active-menu, .for-count-value, .count-value {
    color: var(--st-pine) !important;
}
.text-accent.text-dark { color: var(--st-ink) !important; }
.text-warning, .text-star, .tio-star.text-warning, .tio-star-half, .tio-star-outlined { color: var(--st-star) !important; }
.web--bg-primary, .bg-primary { background-color: var(--st-pine) !important; }

::selection { background: var(--st-pine-tint); color: var(--st-ink); }

/* Foco visible, siempre pino */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--st-pine) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(14, 90, 71, .18) !important;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--st-pine) !important;
    box-shadow: 0 0 0 3px rgba(14, 90, 71, .16) !important;
}

/* ------------------------------------------------------------------ */
/* 3. Botones                                                          */
/* ------------------------------------------------------------------ */
.btn {
    border-radius: var(--st-radius-sm);
    font-family: var(--st-font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
    transition: background-color .2s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease), box-shadow .2s var(--st-ease);
}
.btn--primary,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn_buy_now,
.btn-outline-accent:hover,
.btn-outline-primary:hover,
.page-item.active .page-link,
.subscribe-button {
    background-color: var(--st-pine) !important;
    border-color: var(--st-pine) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn--primary:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-accent:hover,
.subscribe-button:hover {
    background-color: var(--st-pine-hover) !important;
    border-color: var(--st-pine-hover) !important;
    color: #fff !important;
}
.btn--primary, .btn-primary, .btn-secondary, .btn-accent, .btn-outline-accent, .btn-outline-primary {
    min-height: 44px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-outline-accent,
.btn-outline-primary {
    color: var(--st-pine) !important;
    border: 1px solid var(--st-pine) !important;
    background: transparent !important;
}
.btn-outline-accent:hover,
.btn-outline-primary:hover { color: #fff !important; }
.btn-dark, .btn--dark {
    background: var(--st-ink) !important;
    border-color: var(--st-ink) !important;
    color: #fff !important;
}
.page-link { color: var(--st-ink); border-color: var(--st-line); border-radius: 10px !important; margin: 0 3px; }
.page-item.active > .page-link { box-shadow: none; }

/* Formularios */
.form-control,
.custom-select {
    border-color: var(--st-line);
    border-radius: var(--st-radius-sm);
    color: var(--st-ink);
    min-height: 44px;
}
.form-control::placeholder { color: var(--st-ink-2); opacity: 1; }

/* ------------------------------------------------------------------ */
/* 4. Encabezado                                                       */
/* ------------------------------------------------------------------ */
header.__inline-10 { background: var(--st-surface); }

/* Barra superior discreta */
header .topbar {
    background: var(--st-paper) !important;
    border-bottom: 1px solid var(--st-line);
    min-height: 36px;
    padding: 0 !important;
}
header .topbar > .container { min-height: 36px; align-items: center; }
header .topbar,
header .topbar .topbar-link,
header .topbar .topbar-text,
header .topbar .topbar-text > a {
    color: var(--st-ink-2) !important;
    font-size: 13px !important;
    font-weight: 500;
}
header .topbar .topbar-link:hover { color: var(--st-ink) !important; }
header .topbar .fa-phone { font-size: 12px; margin-right: 4px; }
header .topbar img { width: 16px; border-radius: 2px; }

/* Fila principal: logo, buscador, íconos */
header .navbar-sticky,
header .navbar-sticky.bg-light,
header .mobile-head {
    background: var(--st-surface) !important;
    box-shadow: none !important;
}
header .navbar-sticky > .navbar:first-child { padding-top: 14px; padding-bottom: 14px; }
header .navbar-brand img.__inline-11 { height: 40px !important; max-width: 180px; object-fit: contain; }

header .search_form { position: relative; }
header .search-bar-input,
header .search_form .form-control {
    height: 48px !important;
    min-height: 48px;
    border-radius: 999px !important;
    border: 1px solid var(--st-line) !important;
    background: var(--st-paper) !important;
    color: var(--st-ink) !important;
    font-size: 15px !important;
    padding-left: 22px !important;
    padding-right: 64px !important;
    box-shadow: none !important;
    transition: border-color .2s var(--st-ease), background-color .2s var(--st-ease);
}
html[dir] header .search_form input.search-bar-input {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}
[dir="rtl"] header .search-bar-input { padding-right: 22px !important; padding-left: 64px !important; }
header .search-bar-input:hover { border-color: #D6D0C3 !important; }
header .search-bar-input:focus {
    background: var(--st-surface) !important;
    border-color: var(--st-pine) !important;
    box-shadow: 0 0 0 4px rgba(14, 90, 71, .12) !important;
}
header .search-bar-input::placeholder { color: var(--st-ink-2); }

@media (min-width: 768px) {
    [dir="ltr"] header .navbar form .search_button,
    [dir="rtl"] header .navbar form .search_button,
    header .search_button {
        position: absolute;
        top: 4px !important;
        right: 4px !important;
        left: auto;
        height: 40px;
        width: 52px;
        border-radius: 999px !important;
        background-color: var(--st-pine) !important;
        border: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color .2s var(--st-ease);
    }
    [dir="rtl"] header .navbar form .search_button { right: auto !important; left: 4px !important; }
    header .search_button:hover { background-color: var(--st-pine-hover) !important; }
    header .search_button .input-group-text {
        background: transparent !important;
        border: 0 !important;
        padding: 0;
        font-size: 18px !important;
        color: #fff;
    }
}

/* Íconos lineales */
header .navbar-tool-icon-box,
header .navbar-tool-icon-box.bg-secondary {
    background: transparent !important;
    color: var(--st-ink) !important;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color .2s var(--st-ease);
}
header .navbar-tool:hover .navbar-tool-icon-box,
header .navbar-tool-icon-box:hover { background: var(--st-paper) !important; }
header .navbar-tool-icon-box .navbar-tool-icon-box { width: auto; height: auto; background: transparent !important; }
header .navbar-tool-icon { color: var(--st-ink) !important; font-size: 20px !important; }
header .navbar-tool-icon-box svg path { fill: none; stroke: var(--st-ink); stroke-width: 1.3; }
header .navbar-tool-icon-box.dropdown-toggle::after { display: none; }
header .navbar-tool .navbar-tool-label,
.navbar-tool .navbar-tool-label {
    background-color: var(--st-pine) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    top: 2px;
    right: 0;
    box-shadow: 0 0 0 2px var(--st-surface);
}
header .navbar-tool-text,
header .navbar-tool-text small { color: var(--st-ink-2) !important; font-size: 12px; }
header .navbar-tool-text { color: var(--st-ink) !important; font-weight: 700; font-size: 14px; }
header #cart_items .dropdown-toggle::after { border-top-color: var(--st-ink-2); }

/* Barra de navegación: blanca, texto tinta, indicador pino */
header .navbar-stuck-menu,
.navbar-stuck-menu {
    background: var(--st-surface) !important;
    border-top: 1px solid var(--st-line);
    border-bottom: 1px solid var(--st-line);
}
.navbar-stuck-menu > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
header .navbar-stuck-menu .navbar-nav .nav-link,
header .navbar-stuck-menu .navbar-nav .nav-item > .dropdown > .btn,
header .navbar-stuck-menu .navbar-nav .nav-item .btn.dropdown-toggle {
    color: var(--st-ink) !important;
    font-family: var(--st-font-body);
    font-size: 14.5px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none !important;
    position: relative;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
header .navbar-stuck-menu .navbar-nav .nav-link:hover,
header .navbar-stuck-menu .navbar-nav .nav-item .btn.dropdown-toggle:hover { color: var(--st-pine) !important; }
/* El tema marca "activo" varios ítems en la portada; solo el primero (Inicio) lleva el indicador */
header .navbar-stuck-menu .navbar-nav .nav-item.active > .nav-link { color: var(--st-ink) !important; }
header .navbar-stuck-menu .navbar-nav > .nav-item.active:first-child > .nav-link { color: var(--st-pine) !important; font-weight: 600; }
@media (min-width: 768px) {
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) .nav-item > .nav-link::after,
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) .nav-item .btn.dropdown-toggle::before {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -1px;
        height: 2px;
        border-radius: 2px;
        background: var(--st-pine);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s var(--st-ease);
    }
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) .nav-item > .nav-link.dropdown-toggle::after {
        /* el caret de Bootstrap usa ::after; lo dejamos como caret */
        content: none;
    }
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) > .nav-item.active:first-child > .nav-link:not(.dropdown-toggle)::after,
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
    header .navbar-stuck-menu .navbar-nav:not(.mega-nav) .nav-item .btn.dropdown-toggle:hover::before {
        transform: scaleX(1);
    }
}

/* Botón "Categorías" */
header .__mega-nav { margin-right: 8px; }
header .__mega-nav .nav-item .nav-link,
header .mega-nav .nav-item .nav-link.category-menu-toggle-btn {
    background: var(--st-pine-tint) !important;
    color: var(--st-pine) !important;
    border-radius: 10px;
    min-height: 40px !important;
    margin: 6px 0;
    padding: 0 14px !important;
    font-weight: 600 !important;
    gap: 10px;
}
header .__mega-nav .nav-item .nav-link span,
.category-menu-toggle-btn-text { margin: 0 !important; }
header .__mega-nav .nav-link svg { width: 18px; height: 18px; }
header .__mega-nav { width: auto !important; }

/* Menús desplegables */
.dropdown-menu {
    border: 1px solid var(--st-line) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: var(--st-shadow-hover) !important;
    padding: 8px !important;
}
.dropdown-item {
    border-radius: 8px;
    color: var(--st-ink);
    font-size: 14px;
    padding: 9px 12px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--st-paper); color: var(--st-pine); }
.dropdown-divider { border-color: var(--st-line); margin: 4px 0; }

/* Mega menú de categorías */
.category-menu-wrap .category-menu,
.megamenu-wrap .category-menu {
    border: 1px solid var(--st-line) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: var(--st-shadow-hover) !important;
    background: var(--st-surface);
    padding: 8px 0;
}
.category-menu li a { color: var(--st-ink) !important; font-size: 14px; }
.category-menu li:hover > a { color: var(--st-pine) !important; background: var(--st-paper); }
.mega_menu { border-radius: var(--st-radius) !important; border: 1px solid var(--st-line); box-shadow: var(--st-shadow-hover) !important; }

/* Móvil */
@media (max-width: 767px) {
    header .navbar-sticky > .navbar:first-child { padding-top: 10px; padding-bottom: 10px; }
    header .navbar-toggler { border: 0; padding: 8px; min-width: 44px; min-height: 44px; }
    header .navbar-toggler-icon { filter: saturate(0) brightness(.2); }
    header .navbar-stuck-menu { border-top: 0; border-bottom: 0; }
    header .navbar-collapse { background: var(--st-surface) !important; }
    header .navbar-collapse .nav-link,
    header .navbar-collapse .dropdown-item { color: var(--st-ink) !important; font-size: 16px !important; min-height: 48px; display: flex; align-items: center; }
    header .mega-nav1, header .mega-nav1 .nav-link { color: var(--st-ink) !important; }
    header .mobile-logo-img { height: 34px; width: auto; object-fit: contain; }
    header .search_form { background: var(--st-surface); }
    header .search-bar-input { padding-right: 22px !important; }
    header .text-white.text-max-md-dark { color: var(--st-ink) !important; }
}

/* ------------------------------------------------------------------ */
/* 5. Portada: hero editorial (cuando no hay banners)                  */
/* ------------------------------------------------------------------ */
.st-hero { padding: 40px 0 16px; }
.st-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
.st-hero__copy {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;
}
.st-hero__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: var(--st-pine-tint);
    color: var(--st-pine);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.st-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st-pine);
}
.st-hero__title {
    font-family: var(--st-font-display) !important;
    font-weight: 800;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--st-ink);
    margin: 0 0 16px;
    text-wrap: balance;
}
.st-hero__lead {
    color: var(--st-ink-2);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 28px;
}
.st-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-transform: none !important;
    letter-spacing: 0;
    text-decoration: none !important;
    transition: background-color .2s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-btn--primary { background: var(--st-pine); color: #fff !important; }
.st-btn--primary:hover { background: var(--st-pine-hover); color: #fff !important; }
.st-btn--ghost { background: transparent; color: var(--st-ink) !important; border: 1px solid var(--st-line); }
.st-btn--ghost:hover { border-color: var(--st-ink); color: var(--st-ink) !important; }
.st-btn i { font-size: 12px; }

.st-hero__bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    min-height: 380px;
}
.st-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--st-radius-lg);
    background: var(--st-sunken);
    isolation: isolate;
}
.st-tile:first-child { grid-row: span 2; }
.st-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--st-ease);
}
.st-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 24, 29, 0) 45%, rgba(22, 24, 29, .62) 100%);
    z-index: 1;
}
.st-tile__label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-family: var(--st-font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.st-tile__label i { font-size: 12px; opacity: .9; }
.st-tile:hover img { transform: scale(1.04); }
.st-tile:hover .st-tile__label { color: #fff; }

@media (max-width: 991px) {
    .st-hero { padding-top: 20px; }
    .st-hero__grid { grid-template-columns: 1fr; }
    .st-hero__copy { min-height: 0; }
    .st-hero__bento { min-height: 0; grid-template-rows: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 575px) {
    .st-hero { padding-top: 12px; }
    .st-hero__copy { padding: 26px 22px; border-radius: 16px; }
    .st-hero__actions .st-btn { flex: 1 1 auto; }
    .st-hero__bento { gap: 10px; aspect-ratio: 4 / 3.4; }
    .st-tile { border-radius: 14px; }
    .st-tile__label { font-size: 15px; left: 12px; right: 12px; bottom: 10px; }
}

/* Slider de banners (cuando existen): ancho completo, foto grande, texto sobre velo */
.st-hero--banners { padding: 24px 0 8px !important; }
.st-hero--banners .__top-slider-cate { display: none !important; }
.st-hero--banners .__top-slider-images { flex: 0 0 100% !important; max-width: 100% !important; }
.st-hero--banners .__top-slider-images > div { padding: 0 !important; }
.st-slide {
    position: relative;
    overflow: hidden;
    border-radius: var(--st-radius-lg);
    background: var(--st-sunken);
    isolation: isolate;
    color: #fff !important;
}
.hero-slider .__slide-img,
.st-slide .__slide-img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 1.2s var(--st-ease);
}
.st-slide:hover .__slide-img { transform: scale(1.02); }
.st-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 18, 22, .72) 0%, rgba(16, 18, 22, .45) 38%, rgba(16, 18, 22, 0) 68%);
    z-index: 1;
    pointer-events: none;
}
.st-slide__copy {
    position: absolute;
    z-index: 2;
    left: clamp(24px, 5vw, 64px);
    top: 50%;
    transform: translateY(-50%);
    max-width: min(480px, 46%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
[dir="rtl"] .st-slide__copy { left: auto; right: clamp(24px, 5vw, 64px); align-items: flex-end; text-align: right; }
[dir="rtl"] .st-slide::after { transform: scaleX(-1); }
.st-slide__title {
    font-family: var(--st-font-display);
    font-weight: 800;
    font-size: clamp(30px, 4.2vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    text-wrap: balance;
}
.st-slide__lead {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    max-width: 40ch;
}
.st-slide__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    background: #fff;
    color: var(--st-ink);
    font-weight: 600;
    font-size: 15px;
    transition: background-color .2s var(--st-ease);
}
.st-slide__cta i { font-size: 12px; }
.st-slide:hover .st-slide__cta { background: var(--st-pine-tint); color: var(--st-pine); }

.hero-slider.owl-theme .owl-nav { margin: 0; }
.hero-slider.owl-theme .owl-nav [class*="owl-"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
    background: rgba(255, 255, 255, .92) !important;
    border: 0 !important;
}
.hero-slider.owl-theme .owl-nav .owl-prev { left: 16px; }
.hero-slider.owl-theme .owl-nav .owl-next { right: 16px; }
.hero-slider.owl-theme .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    margin: 0 !important;
    z-index: 3;
}
.hero-slider.owl-theme .owl-dots .owl-dot span { background: rgba(255, 255, 255, .5) !important; width: 8px; height: 8px; margin: 4px; }
.hero-slider.owl-theme .owl-dots .owl-dot.active span { background: #fff !important; width: 22px; }

@media (max-width: 767px) {
    .st-hero--banners { padding-top: 12px !important; }
    .st-slide { border-radius: 16px; }
    .hero-slider .__slide-img,
    .st-slide .__slide-img { aspect-ratio: 4 / 4.4; }
    .st-slide::after { background: linear-gradient(180deg, rgba(16, 18, 22, 0) 30%, rgba(16, 18, 22, .78) 100%); }
    .st-slide__copy { top: auto; bottom: 22px; left: 20px; right: 20px; transform: none; max-width: none; gap: 10px; }
    .st-slide__title { font-size: 30px; }
    .st-slide__lead { font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .st-slide__cta { min-height: 44px; }
    .hero-slider.owl-theme .owl-nav { display: none; }
    .hero-slider.owl-theme .owl-dots { bottom: auto; top: 14px; text-align: right; padding-right: 12px; }
}

.__slide-img { border-radius: var(--st-radius-lg) !important; object-fit: cover; }
.st-hero .hero-slider.owl-theme .owl-dots .owl-dot span,
.st-hero .hero-slider.owl-theme .owl-dots .owl-dot:hover span { background: rgba(255, 255, 255, .55) !important; }
.st-hero .hero-slider.owl-theme .owl-dots .owl-dot.active span { background: #fff !important; }
.st-hero .hero-slider.owl-theme .owl-dots .owl-dot,
.st-hero .hero-slider.owl-theme .owl-dots .owl-dot.active { background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; }
.owl-theme .owl-dots .owl-dot { background: transparent !important; }
.owl-theme .owl-dots .owl-dot span { border-radius: 999px !important; transition: width .2s var(--st-ease), background-color .2s var(--st-ease); }

/* "Zona de vendedores" y "Ofertas" son botones: igualar línea base con los links */
header .navbar-stuck-menu .navbar-nav .nav-item > .dropdown > .btn { line-height: 1.2 !important; vertical-align: middle; }

/* Hueco vacío que el tema reserva cuando no hay descuento */
.product-single-hover .for-discount-value-null { display: none !important; }

/* Títulos que el tema sangra con padding propio */
.__inline-61 .seller-list-title,
.__inline-61 .seller-list-view-all,
.__inline-61 .category-product-view-title,
.__inline-61 .category-product-view-all { padding: 0 !important; margin: 0 !important; }
.__inline-61 .seller-card .card-body > .row { margin-left: 0 !important; margin-right: 0 !important; }
.__inline-61 .latest-product-margin { margin: 0 !important; }
.footer_banner_img, .__inline-63 { border-radius: var(--st-radius-lg) !important; }

/* ------------------------------------------------------------------ */
/* 6. Secciones y títulos                                              */
/* ------------------------------------------------------------------ */
.__inline-61 { background: var(--st-paper); padding-bottom: 24px; }
.__inline-61 > .container,
.__inline-61 > section,
.__inline-61 section.container { margin-top: 0; }

/* Quita las "cajas" blancas de cada sección: respirar sobre papel */
.__inline-61 .__inline-62,
.__inline-61 .card.__shadow,
.__inline-61 .__shadow-2,
.__inline-61 .__shadow-2 > .__p-20px,
.__inline-61 .__featured-deal-wrap,
.__inline-61 .seller-card .card,
.__inline-61 .bg--light:not(.deal_of_the_day) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.__inline-61 .__shadow-2 > .__p-20px { padding: 0 !important; }
.__inline-61 .card.__shadow > .card-body { padding: 0 !important; }

/* Ritmo vertical de la portada */
.__inline-61 > .container.py-4,
.__inline-61 > section.pb-4,
.__inline-61 > .container.pt-4,
.__inline-61 > section.container.pt-4,
.__inline-61 .new-arrival-section,
.__inline-61 > section.featured_deal,
.__inline-61 section.container.pb-4 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

/* Título de sección unificado: izquierda, 24–28px */
.__inline-61 .feature-product-title,
.__inline-61 .for-feature-title,
.__inline-61 .categories-title,
.__inline-61 .categories-title span,
.__inline-61 .arrival-title,
.__inline-61 .arrival-title > div,
.__inline-61 .seller-list-title h5,
.__inline-61 .featured_deal_title,
.__inline-61 .section-header .__text-22px,
.__inline-61 .section-header .__text-22px span,
.__inline-61 .__best-selling-title,
.__inline-61 .card-body > .row > div > span.font-bold {
    font-family: var(--st-font-display) !important;
    font-size: clamp(22px, 2.2vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    color: var(--st-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: 0 !important;
}
[dir="rtl"] .__inline-61 .feature-product-title { text-align: right !important; }
.__inline-61 .category-product-view-title .for-feature-title { text-transform: none !important; }

/* Encabezado de "Destacados": título + "Ver todo" en una línea */
.__inline-61 .__inline-62 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    row-gap: 18px;
    padding-top: 0 !important;
}
.__inline-61 .__inline-62 > .feature-product-title { grid-column: 1; }
.__inline-61 .__inline-62 > .text-end { grid-column: 2; padding: 0 !important; }
.__inline-61 .__inline-62 > .feature-product { grid-column: 1 / -1; }
/* El carrusel recorta, pero con margen para que la sombra del hover no se corte */
.__inline-61 .feature-product { padding: 0 !important; overflow: hidden; margin: -8px; }
.__inline-61 .feature-product .carousel-wrap { padding: 8px !important; }
.__inline-61 .__shadow-2 > .__p-20px { overflow: visible !important; }
.__inline-61 .carousel-wrap-2,
.__inline-61 .new_arrival_product,
.__inline-61 .brand-slider { overflow: hidden; margin: -8px; padding: 8px; }

/* Link "Ver todo" pino con flecha */
.view-all-text,
.__inline-61 .view-all-text {
    color: var(--st-pine) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 2px;
    white-space: nowrap;
}
.view-all-text:hover { color: var(--st-pine-hover) !important; }
.view-all-text i { font-size: 11px !important; margin: 0 !important; transition: transform .2s var(--st-ease); float: none !important; }
.view-all-text:hover i { transform: translateX(3px); }
.view-all-text * { color: inherit !important; }

.__inline-61 .section-header,
.__inline-61 .__featured-deal-wrap > .d-flex:first-child,
.__inline-61 .latest-product-margin > .d-flex:first-child,
.__inline-61 .__shadow-2 .__p-20px > .d-flex:first-child,
.__inline-61 .card-body > .d-flex.justify-content-between:first-child,
.__inline-61 .card-body > .row.justify-content-between:first-child {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------ */
/* 7. Tarjeta de producto                                              */
/* ------------------------------------------------------------------ */
.product-single-hover,
.product-single-hover.style--card,
.product-single-hover.shadow-none {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: 100%;
}
.product-single-hover > .overflow-hidden { overflow: visible !important; }
.product-single-hover:hover { box-shadow: none !important; }

.product-single-hover .inline_product {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--st-sunken);
    overflow: hidden;
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: block !important;
    position: relative;
    transition: box-shadow .2s var(--st-ease);
}
.product-single-hover:hover .inline_product { box-shadow: var(--st-shadow-hover); }
.product-single-hover .inline_product > .p-10px { padding: 0 !important; height: 100%; }
.product-single-hover .inline_product > .p-10px > a,
.product-single-hover .inline_product > a { display: block; width: 100%; height: 100%; }
.product-single-hover .inline_product img,
.product-single-hover.style--card .inline_product img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0 !important;
    background: var(--st-sunken);
    transition: transform .2s var(--st-ease) !important;
    transform: none;
}
.product-single-hover:hover .inline_product img { transform: scale(1.045) !important; }
.product-single-hover .inline_product > .d-flex:first-child { position: absolute; inset: 0 auto auto 0; z-index: 3; }

/* Vista rápida: botón discreto en esquina, sin velo de color */
.product-single-hover .quick-view,
.product-single-hover.style--card .inline_product .quick-view {
    inset: auto 12px 12px auto !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    display: block;
    z-index: 4;
}
.product-single-hover:hover .quick-view { background: transparent !important; }
.product-single-hover .quick-view .btn-circle {
    --size: 44px;
    background: rgba(255, 255, 255, .96);
    color: var(--st-ink);
    box-shadow: 0 4px 14px rgba(22, 24, 29, .14);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--st-ease), transform .2s var(--st-ease);
}
.product-single-hover:hover .quick-view .btn-circle,
.product-single-hover .quick-view .btn-circle:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .product-single-hover .quick-view .btn-circle { display: none; } }

.product-single-hover .single-product-details {
    padding: 12px 2px 4px !important;
    min-height: 0 !important;
    text-align: left !important;
    background: transparent !important;
}
[dir="rtl"] .product-single-hover .single-product-details { text-align: right !important; }
.product-single-hover .single-product-details .text-center { text-align: inherit !important; }
.product-single-hover .single-product-details a {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--st-ink) !important;
    -webkit-line-clamp: 2 !important;
    text-transform: none !important;
    white-space: normal;
}
.product-single-hover .single-product-details > div { margin: 0 !important; padding: 0 !important; }
.product-single-hover .single-product-details a:hover { color: var(--st-pine) !important; }
.product-single-hover .product-price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start !important;
    gap: 4px 8px !important;
    margin-top: 6px;
}
.product-single-hover .product-price .text-accent,
.product-single-hover .product-price > span {
    font-family: var(--st-font-body);
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--st-ink) !important;
    letter-spacing: -0.01em;
    order: 1;
}
.product-single-hover .product-price del { order: 2; }
del.category-single-product-price,
.category-single-product-price,
del.__color-9B9B9B,
.__color-9B9B9B {
    color: var(--st-ink-2) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}
.product-single-hover .rating-show { text-align: left !important; justify-content: flex-start !important; margin-bottom: 2px; }
.product-single-hover .rating-show i { font-size: 13px; }
.badge-style, .badge-style2 { color: var(--st-ink-2) !important; font-size: 12px; }

/* Etiqueta de descuento coral en pastilla */
.for-discount-value,
.flash_deal_product .for-discount-value,
html[dir="ltr"] .for-discount-value,
html[dir="rtl"] .for-discount-value {
    background: var(--st-coral) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: .01em;
    top: 12px !important;
    inset-inline-start: 12px !important;
    box-shadow: none;
}
.for-discount-value span { font-size: 12px !important; }

/* Agotado */
.out_fo_stock {
    background: rgba(22, 24, 29, .82) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 5px 12px !important;
}

/* Rejillas de producto: aire entre tarjetas */
.__inline-61 .owl-carousel .owl-stage { padding-bottom: 6px; }
#featured_products_list .owl-item > div { padding: 0; }

/* Carruseles: flechas redondas, neutras */
.owl-theme .owl-nav [class*="owl-"] {
    width: 44px;
    height: 44px;
    border-radius: 999px !important;
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    color: var(--st-ink) !important;
    box-shadow: var(--st-shadow);
    display: inline-grid !important;
    place-items: center;
}
.owl-theme .owl-nav [class*="owl-"]:hover { border-color: var(--st-ink) !important; color: var(--st-ink) !important; }
.owl-theme .owl-dots .owl-dot span { background: var(--st-line) !important; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--st-pine) !important; }

/* ------------------------------------------------------------------ */
/* 8. Tarjetas horizontales (novedades, más vendidos, mejor valorados) */
/* ------------------------------------------------------------------ */
.flash_deal_product {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s var(--st-ease), border-color .2s var(--st-ease);
    cursor: pointer;
    min-height: 0 !important;
    height: 100%;
}
.flash_deal_product:hover { box-shadow: var(--st-shadow-hover) !important; border-color: transparent !important; }
.flash_deal_product > .d-flex { align-items: center; }
.flash_deal_product .p-12px { padding: 10px !important; }
.flash-deals-background-image {
    background: var(--st-sunken) !important;
    border-radius: 12px !important;
    overflow: hidden;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
}
.flash-deals-background-image img,
.flash_deal_product .__img-125px {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .2s var(--st-ease);
}
.flash_deal_product:hover .flash-deals-background-image img { transform: scale(1.05); }
.flash_deal_product_details { margin-top: 0 !important; padding: 10px 14px 10px 4px !important; }
.flash-product-title {
    color: var(--st-ink) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-transform: none !important;
}
.flash-product-price { font-size: 16px !important; font-weight: 700 !important; color: var(--st-ink) !important; }
.flash_deal_product .for-discount-value { top: 8px !important; inset-inline-start: 8px !important; padding: 3px 8px !important; font-size: 11px !important; }

/* Más vendidos / Mejor valorados */
.__inline-61 .new-arrival-section .card.__shadow { background: transparent !important; }
.__best-selling {
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    padding: 10px;
    position: relative;
    transition: box-shadow .2s var(--st-ease), border-color .2s var(--st-ease);
}
.__best-selling:hover { box-shadow: var(--st-shadow-hover); border-color: transparent; }
.__best-selling > .d-flex.flex-wrap { flex-wrap: nowrap !important; align-items: center; gap: 14px; width: 100%; }
.best-selleing-image {
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--st-sunken);
}
.best-selleing-image img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
.best-selling-details { padding: 0 !important; width: auto !important; }
.widget-product-title, .widget-product-title .ptr {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--st-ink) !important;
    margin-bottom: 4px;
    font-family: var(--st-font-body) !important;
    letter-spacing: 0 !important;
}
.widget-product-meta { gap: 0 !important; }
.widget-product-meta del { margin-right: 8px; }
.widget-product-meta .text-accent { font-size: 16px; font-weight: 700; color: var(--st-ink) !important; }
.__inline-61 .size-30 { display: none; }
.__inline-61 .card-body > .row.justify-content-between > div > span.font-bold { padding: 0 !important; }

/* ------------------------------------------------------------------ */
/* 9. Categorías: tarjetas con imagen                                  */
/* ------------------------------------------------------------------ */
.__inline-61 .__cate-item { margin: 0 !important; padding: 0 !important; }
.__inline-61 .d-none.d-lg-block > .row.mt-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 20px;
    margin: 0 !important;
}
.__cate-item > a { width: 100%; }
.__cate-item .__img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 16px !important;
    background: var(--st-sunken) !important;
    border: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: none !important;
    transition: box-shadow .2s var(--st-ease);
}
.__cate-item .__img img,
.__cate-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .2s var(--st-ease) !important;
    transform: none;
}
.__cate-item:hover .__img { box-shadow: var(--st-shadow-hover) !important; }
.__cate-item:hover img { transform: scale(1.045) !important; }
.__cate-item p {
    color: var(--st-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 10px 0 0 !important;
    width: 100%;
    line-height: 1.35;
}
.__cate-item a:hover p { color: var(--st-pine) !important; }
.categories--slider .owl-item { padding: 0 4px; }

/* Página de todas las categorías */
.__inline-61 .category-page .card,
.categories-page .card { border-radius: 16px; }

/* ------------------------------------------------------------------ */
/* 10. Vendedores destacados                                           */
/* ------------------------------------------------------------------ */
.others-store-card {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: box-shadow .2s var(--st-ease), border-color .2s var(--st-ease);
}
.others-store-card:hover { box-shadow: var(--st-shadow-hover) !important; border-color: transparent !important; }
.others-store-card .other-store-banner { background: var(--st-sunken); }
.others-store-card .name-area .info h5 { font-family: var(--st-font-display) !important; font-weight: 700; color: var(--st-ink); font-size: 16px; }
.others-store-card .info-area { border-top: 1px solid var(--st-line) !important; background: transparent !important; }
.others-store-card .info-area .info-item { background: var(--st-paper) !important; border-radius: 10px !important; border: 0 !important; }
.others-store-card .info-area .info-item h6 { color: var(--st-ink) !important; font-weight: 700; }
.others-store-card .info-area .info-item span, .others-store-card small { color: var(--st-ink-2) !important; }
.others-store-card .other-store-logo { border: 3px solid var(--st-surface); background: var(--st-sunken); }

/* ------------------------------------------------------------------ */
/* 11. Oferta del día / producto recomendado                           */
/* ------------------------------------------------------------------ */
.deal_of_the_day {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: var(--st-radius-lg) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.deal_of_the_day h4,
.deal_of_the_day .web-text-primary {
    color: var(--st-coral) !important;
    font-family: var(--st-font-body) !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    font-weight: 700 !important;
}
.deal_of_the_day .d-flex.py-4 { padding: 20px 20px 4px !important; justify-content: flex-start !important; }
.recommended-product-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.recommended-product-card .__pt-20, .recommended-product-card .__m-20-r { padding: 12px 20px 0 !important; margin: 0 !important; }
.recommended-product-card img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    object-fit: cover;
    border-radius: 14px !important;
    background: var(--st-sunken);
}
.recommended-product-card .position-relative { width: 100%; }
.recommended-product-card h6 { font-family: var(--st-font-body) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.recommended-product-card .text-accent { font-size: 20px !important; font-weight: 700 !important; color: var(--st-ink) !important; }
.deal_of_the_day .btn--primary { width: calc(100% - 40px); margin: 0 20px 20px; text-transform: none !important; }

/* ------------------------------------------------------------------ */
/* 12. Marcas                                                          */
/* ------------------------------------------------------------------ */
.__brand-item {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 96px !important;
    display: grid !important;
    place-items: center;
    padding: 16px;
    transition: border-color .2s var(--st-ease);
}
.__brand-item:hover { border-color: var(--st-ink-2) !important; }
.__brand-item img { max-height: 56px; width: auto !important; object-fit: contain; border-radius: 0 !important; }

/* ------------------------------------------------------------------ */
/* 13. Confianza (envío, pago, devolución)                             */
/* ------------------------------------------------------------------ */
.__inline-61 .shipping-policy-web {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg) !important;
    box-shadow: none !important;
    padding: 28px 12px !important;
}
.shipping-method-system p { color: var(--st-ink) !important; font-weight: 600; font-size: 14px; margin-top: 8px !important; }
.shipping-method-system img { width: 44px !important; height: 44px !important; filter: grayscale(1) contrast(1.2); opacity: .8; }

/* ------------------------------------------------------------------ */
/* 14. Listado de productos (/products)                                */
/* ------------------------------------------------------------------ */
.__inner-toolbar, .search-page-header, .container > .__inline-35 {
    background: transparent !important;
    box-shadow: none !important;
}
body .card,
body .bg-white.__shadow,
body .__shadow {
    border-color: var(--st-line) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: none !important;
}
.card-header { background: var(--st-surface); border-bottom-color: var(--st-line); }
aside .card, .__inline-35 .card { border: 1px solid var(--st-line) !important; }

/* ------------------------------------------------------------------ */
/* 15. Ficha de producto                                               */
/* ------------------------------------------------------------------ */
.product-title, .__inline-24 .product-title, .details-name, .product-details-shipping-details h3 {
    font-family: var(--st-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--st-ink) !important;
}
.discounted_unit_price, .product-details-price, .__inline-24 .h3 .text-accent, .product_total_price, .price-range-with-discount {
    color: var(--st-ink) !important;
}
.btn.string-limit,
.btn.element-center.btn-gap-left,
.product-add-to-cart-button,
.action-add-to-cart-form,
.btn.__btn-primary {
    border-radius: var(--st-radius-sm) !important;
}
.cz-preview-item img, .product-preview-item img, .cz-image-zoom {
    border-radius: 16px !important;
    background: var(--st-sunken);
}
.cz-product-gallery .cz-preview,
.product-preview-thumb,
.cz-thumblist-item,
.product-preview-thumb img { border-radius: 12px !important; border-color: var(--st-line) !important; }
.nav-tabs { border-bottom-color: var(--st-line) !important; }
.nav-tabs .nav-link {
    border-radius: 999px !important;
    color: var(--st-ink-2) !important;
    font-weight: 600;
    border: 0 !important;
    background: transparent !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.nav-tabs .nav-link.active,
.product-details-tabs .nav-link.active,
.__inline-27 .nav-link.active {
    background: var(--st-pine-tint) !important;
    color: var(--st-pine) !important;
}
.nav-tabs .nav-link :is(h1, h2, h3, h4, h5, h6, span) { color: inherit !important; }

/* Filtro de precio del listado */
.action-search-products-by-price,
.__number-filter-btn a {
    background: var(--st-pine) !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid !important;
    place-items: center;
}
.product-price br { display: none; }
.product-price > *,
.product-single-hover .product-price del { margin: 0 !important; }
.form-control, .custom-select, select.form-control { border-color: var(--st-line) !important; }
.qty-count, .product-quantity input, .__inline-24 .input-group, .product-quantity {
    border-color: var(--st-line) !important;
    border-radius: 10px !important;
    color: var(--st-ink) !important;
}
.btn-number, .qty-count { color: var(--st-ink) !important; }

.__inline-23 h1.__inline-24 {
    font-size: clamp(26px, 2.6vw, 34px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 10px !important;
    text-transform: none !important;
}
.__inline-23 .text-accent .discounted-unit-price {
    color: var(--st-ink) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.__inline-23 .product-total-unit-price { color: var(--st-ink-2) !important; font-size: 17px !important; }
.__inline-23 .cz-product-gallery .cz-preview {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--st-sunken) !important;
}
.__inline-23 .product-preview-item img,
.__inline-23 .cz-image-zoom { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px !important; }
.__inline-23 .share--icons, .__inline-23 .sharethis-inline-share-buttons { filter: saturate(0); }
/* Comprar ahora: tinta; Agregar al carrito: pino */
.__inline-23 .product-buy-now-button,
.__inline-23 .__btn-grp .btn-secondary {
    background: var(--st-ink) !important;
    border-color: var(--st-ink) !important;
    color: #fff !important;
}
.__inline-23 .product-buy-now-button:hover { background: #2A2D35 !important; }
.__inline-23 .__btn-grp .btn { min-height: 48px; padding-left: 24px; padding-right: 24px; border-radius: 12px !important; }
.__inline-23 .product-action-add-wishlist {
    min-height: 48px;
    min-width: 48px;
    border-radius: 12px !important;
    border-color: var(--st-line) !important;
    background: var(--st-surface);
    color: var(--st-ink);
}
.__inline-23 .product-details-cart-qty,
.__inline-23 .product-quantity .input-group,
.__inline-23 .btn-number { color: var(--st-ink) !important; }
.__inline-23 .web-text-primary.btn-number { color: var(--st-ink) !important; }
.__inline-23 .text-accent:not(.d-flex) { color: var(--st-ink) !important; }

/* ------------------------------------------------------------------ */
/* 16. Pie de página: tinta oscura                                     */
/* ------------------------------------------------------------------ */
.__inline-9 { background: var(--st-paper); }
.__inline-9 .footer-slider-container { padding-top: 28px; }
.footer-slide-item > div,
.footer-slide-item {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.footer-slide-item { padding: 22px 16px !important; transition: box-shadow .2s var(--st-ease); }
.footer-slide-item > div { border: 0 !important; }
.footer-slide-item:hover { box-shadow: var(--st-shadow-hover) !important; }
.footer-slide-item p { color: var(--st-ink) !important; font-family: var(--st-font-display) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em; }
.footer-slide-item small { color: var(--st-ink-2) !important; font-size: 13px !important; letter-spacing: 0 !important; }
.footer-slide-item img.svg { filter: grayscale(1) brightness(.25); opacity: .85; }

.page-footer,
.page-footer .custom-light-primary-color-20,
.__inline-9 .custom-light-primary-color-20 {
    background: var(--st-ink) !important;
    color: #C9CCD3 !important;
}
.page-footer { margin-top: 12px; }
.page-footer .footer-header,
.page-footer h6 {
    color: #FFFFFF !important;
    font-family: var(--st-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}
.page-footer span.footer-header { text-transform: none; font-size: 14px !important; letter-spacing: 0 !important; }
.page-footer,
.page-footer .widget-list-link,
.__inline-9 .widget-list-link,
.page-footer .mobile-fs-12,
.page-footer .__text-14px,
.page-footer p,
.page-footer span {
    color: #C9CCD3 !important;
}
.page-footer .widget-list-link { font-size: 14.5px !important; padding: 5px 0; }
.page-footer .widget-list-link:hover,
.__inline-9 .widget-list-link:hover { color: #FFFFFF !important; }
.page-footer hr, .page-footer .address_under_line { border-color: rgba(255, 255, 255, .12) !important; }
.page-footer i.fa { color: #9EA3AE !important; }
.page-footer .subscribe-border,
.__inline-9 .subscribe-border {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 12px !important;
    color: #fff !important;
    height: 52px;
}
.page-footer .subscribe-border::placeholder { color: #9EA3AE !important; }
.page-footer .subscribe-button,
.__inline-9 .subscribe-button {
    background: #FFFFFF !important;
    color: var(--st-ink) !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    height: 40px;
    top: 6px !important;
    padding: 0 16px !important;
}
.page-footer .subscribe-button:hover { background: var(--st-pine-tint) !important; color: var(--st-pine) !important; }
.page-footer .footer-web-logo img { max-height: 44px; width: auto; object-fit: contain; }
.bg-white-overlay-50 { background: #0F1115 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
.bg-white-overlay-50 p, .bg-white-overlay-50 .__text-16px { color: #C9CCD3 !important; font-size: 14px !important; }
.page-footer .social-btn {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-grid !important;
    place-items: center;
    box-shadow: none !important;
    transition: background-color .2s var(--st-ease);
}
.page-footer .social-btn:hover { background: rgba(255, 255, 255, .18) !important; }
.page-footer .social-btn svg { fill: #fff; }

/* ------------------------------------------------------------------ */
/* 17. Movimiento reducido                                             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .product-single-hover:hover .inline_product img,
    .__cate-item:hover img,
    .st-tile:hover img { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* 18. Ajustes responsive                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body { font-size: 15px; }
    .__inline-61 > .container.py-4,
    .__inline-61 > section.pb-4,
    .__inline-61 > .container.pt-4,
    .__inline-61 .new-arrival-section,
    .__inline-61 section.container.pb-4 { padding-top: 18px !important; padding-bottom: 18px !important; }
    .__inline-61 .px-0.px-md-3 { padding-left: 16px !important; padding-right: 16px !important; }
    .product-single-hover .single-product-details a { font-size: 14px !important; }
    .product-single-hover .product-price > span { font-size: 16px !important; }
    .__cate-item p { font-size: 13px !important; }
    .page-footer .footer-padding-bottom { margin-bottom: 8px; }
}


/* ------------------------------------------------------------------ */
/* Paleta unica verde (Leandro, oct-2026): sin naranja, ambar, azul ni coral.      */
/* Solo el rojo #B42318 se permite, y solo para errores. Se apoya en                */
/* verde-tienda-base.css (generado) cargado justo antes de este archivo.            */
/* ------------------------------------------------------------------ */
.toast-success, .toast-info { background-color: var(--st-pine) !important; color: #fff !important; }
.toast-warning { background-color: var(--st-ink-2) !important; color: #fff !important; }
.toast-error { background-color: #B42318 !important; color: #fff !important; }
.text-black-50 { color: var(--st-ink-2) !important; }
.text-danger, .text-error { color: #B42318 !important; }
.badge-warning, .badge-soft-warning, .bg-warning { background-color: var(--st-pine-tint) !important; color: var(--st-ink-2) !important; }
.badge-danger, .bg-danger { background-color: #B42318 !important; color: #fff !important; }
.alert-warning, .alert-info, .alert-primary { background-color: var(--st-pine-tint) !important; border-color: #C9DDD5 !important; color: var(--st-ink) !important; }
.alert-danger { background-color: #FBEAE8 !important; border-color: #F2C3BE !important; color: #B42318 !important; }
.btn-outline-warning, .btn-outline-info { color: var(--st-pine) !important; border-color: var(--st-pine) !important; }
.btn-warning, .btn-info { background-color: var(--st-pine) !important; border-color: var(--st-pine) !important; color: #fff !important; }