:root {
    /* Identidad de Marca Dabra Socks — Paleta Luminosa Cero Negro */
    --color-primary-rgb: 156 100 166;      /* Malva / Orquídea institucional #9c64a6 */
    --color-on-primary-rgb: 255 255 255;   /* Blanco sobre primario */
    --color-surface-rgb: 255 255 255;      /* Blanco puro */
    --color-background-rgb: 255 255 255;

    /* Tipografía y Textos en Ciruela Cálido y Malva Grisáceo (Cero Negro) */
    --color-on-surface-rgb: 74 52 77;      /* Ciruela profundo cálido #4a344d */
    --color-on-background-rgb: 74 52 77;   /* Ciruela profundo cálido #4a344d */
    --color-secondary-rgb: 118 98 122;     /* Malva grisáceo suave #76627a */
    --color-on-surface-variant-rgb: 118 98 122;

    /* Superficies y Contenedores en Tintes Lavanda Suaves */
    --color-surface-container-lowest-rgb: 255 255 255;
    --color-surface-container-low-rgb: 250 247 251;     /* #faf7fb */
    --color-surface-container-rgb: 243 236 245;         /* #f3ecf5 */
    --color-surface-container-high-rgb: 235 224 238;    /* #ebe0ee */
    --color-surface-container-highest-rgb: 226 212 230; /* #e2d4e6 */
    --color-outline-rgb: 186 164 191;                   /* #baa4bf */
    --color-outline-variant-rgb: 226 212 230;           /* #e2d4e6 */

    /* Colores Secundarios y Acentos de Marca Dabra */
    --color-dabra-lilac-rgb: 206 172 209;  /* Lila Pastel Institucional #ceacd1 */
    --color-dabra-plum-rgb: 74 52 77;      /* Ciruela Cálido #4a344d */
    --color-dabra-accent-rgb: 190 117 209; /* Orquídea Vibrante #be75d1 */

    /* Tokens de Header (Barra Superior Malva e Íconos en Ciruela/Malva) */
    --color-header-bar-bg-rgb: 156 100 166; /* Barra superior Malva #9c64a6 */
    --color-header-bar-text-rgb: 255 255 255;
    --color-header-icon-rgb: 74 52 77;
    --color-header-icon-hover-rgb: 156 100 166;

    /* Geometría y Radios de Bordes */
    --radius-badge: 9999px;
    --radius-btn: 9999px;
    --radius-default: 0.75rem; /* 12px */
    --radius-lg: 1rem;         /* 16px */
    --radius-xl: 1.5rem;       /* 24px */
}

/* Grillas de productos en portada (WooCommerce shortcodes) */
.gs-product-grid-wrapper ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .gs-product-grid-wrapper ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .gs-product-grid-wrapper ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }
}
.gs-product-grid-wrapper ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

/* Geometría Responsiva y Estética Luminosa del Hero Lookbook */
.sw-hero__media,
.dabra-hero__media {
    aspect-ratio: 3/4;
    max-height: 92svh;
}
@media (min-width: 768px) {
    .sw-hero__media,
    .dabra-hero__media {
        aspect-ratio: auto;
        height: 380px;
        max-height: 380px;
        min-height: 340px;
    }
}

.dabra-hero__fallback {
    background: linear-gradient(125deg, #f8f2fa 0%, #eddcf0 48%, #ceacd1 100%);
    border-bottom: 1px solid rgba(156, 100, 166, 0.16);
}

.dabra-hero__emblem {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    height: 240px;
    opacity: 0.22;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
@media (min-width: 768px) {
    .dabra-hero__emblem {
        right: 4rem;
        width: 310px;
        height: 310px;
        opacity: 0.85;
        filter: drop-shadow(0 12px 24px rgba(156, 100, 166, 0.2));
    }
}

.dabra-hero__content {
    display: flex;
    align-items: center;
    top: 0;
    bottom: 0;
    padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
    .dabra-hero__content {
        padding: 2.5rem 4rem;
    }
}
@media (min-width: 1024px) {
    .dabra-hero__content {
        padding: 3rem 5rem;
    }
}

/* Geometría y Fondos Luminosos de Portales Duales */
.sw-hero-split,
.dabra-hero-split {
    min-height: 400px;
}
@media (min-width: 768px) {
    .sw-hero-split,
    .dabra-hero-split {
        height: 460px;
        min-height: 420px;
        max-height: 460px;
    }
}

.dabra-portal--primary {
    background: linear-gradient(135deg, #b87ec2 0%, #9c64a6 100%);
}
.dabra-portal--secondary {
    background: linear-gradient(135deg, #f5ecf8 0%, #dfc0e3 55%, #ceacd1 100%);
    border: 1px solid rgba(156, 100, 166, 0.2);
}

/* Geometría del Spotlight Editorial */
.sw-spotlight-img,
.dabra-spotlight-img {
    min-height: 380px;
}
@media (min-width: 768px) {
    .sw-spotlight-img,
    .dabra-spotlight-img {
        min-height: 520px;
    }
}

/* ==========================================================================
   TARJETAS DE PRODUCTO (WooCommerce Loop)
   ========================================================================== */

/* 1. Ocultar botones de compra exclusivamente en la portada (Home) */
.home .sw-featured-products .woocommerce-loop-btn-wrapper,
.home .gs-featured-products .woocommerce-loop-btn-wrapper,
.home .woocommerce-loop-btn-wrapper {
    display: none !important;
}

/* 2. Fuera de la portada (/tienda), botones de loop redondeados en píldora */
.woocommerce-loop-btn-wrapper .button {
    border-radius: var(--radius-btn, 9999px) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ==========================================================================
   ARMONIZACIÓN DEL CHECKOUT Y CARRITO (Cero Negro — Ciruela & Malva)
   ========================================================================== */
.woocommerce-checkout .text-primary,
.single-product .text-primary,
.woocommerce-account .text-primary,
.woocommerce-cart .text-primary,
.woocommerce-order .text-primary,
.widget_shopping_cart .text-primary {
    color: rgb(var(--color-on-surface-rgb)) !important;
}
.woocommerce-checkout .border-primary,
.woocommerce-order .border-primary {
    border-color: rgb(var(--color-primary-rgb)) !important;
}
.woocommerce-checkout .bg-primary:not(#place_order),
.woocommerce-order .bg-primary:not(#place_order) {
    background-color: rgb(var(--color-primary-rgb)) !important;
    color: #ffffff !important;
}

/* Mantener el Primario de Marca en el CTA final de pago */
.woocommerce-checkout button#place_order {
    background-color: rgb(var(--color-primary-rgb)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(var(--color-primary-rgb), 0.3) !important;
    opacity: 1 !important;
}
.woocommerce-checkout button#place_order:hover {
    opacity: 0.9 !important;
}

/* ==========================================================================
   UI DEL MOTOR DE DESCUENTOS POR VOLUMEN HPOS (Dabra Socks)
   ========================================================================== */

/* 1. Tarjeta de Catálogo y Buscador: Badge de precio unitario promocional */
.dabra-vol-catalog-badge {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
}
.dabra-vol-catalog-badge .vol-unit-price {
    font-weight: 700;
    color: rgb(var(--color-primary-rgb));
}
.dabra-vol-catalog-badge .vol-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: rgba(var(--color-dabra-lilac-rgb), 0.35);
    color: rgb(var(--color-primary-rgb));
    padding: 1px 6px;
    border-radius: var(--radius-badge, 9999px);
}

/* 2. Ficha de Producto (PDP): Caja de Niveles de Descuento */
.dabra-vol-pdp-box {
    margin-top: 1.25rem;
    padding: 1rem;
    background-color: #faf7fb;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18);
    border-radius: var(--radius-lg, 1rem);
}
.dabra-vol-pdp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.dabra-vol-pdp-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-on-surface-rgb));
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.dabra-vol-pdp-badge {
    font-size: 10px;
    font-weight: 700;
    color: rgb(var(--color-primary-rgb));
    background: rgba(var(--color-primary-rgb), 0.12);
    padding: 2px 8px;
    border-radius: var(--radius-badge, 9999px);
}
.dabra-vol-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .dabra-vol-tier-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.dabra-vol-tier-card {
    background: #ffffff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.14);
    border-radius: var(--radius-default, 0.75rem);
    padding: 0.625rem;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dabra-vol-tier-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.45);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.1);
}
.dabra-vol-tier-qty {
    font-size: 11px;
    font-weight: 600;
    color: rgb(var(--color-secondary-rgb));
}
.dabra-vol-tier-pct {
    font-size: 0.9375rem;
    font-weight: 800;
    color: rgb(var(--color-primary-rgb));
    margin: 2px 0;
}
.dabra-vol-tier-unit {
    font-size: 10px;
    color: rgb(var(--color-secondary-rgb));
}

/* 3. Barras Semánticas de Progreso (<progress>) en Mini-Cart y Carrito */
.dabra-vol-progress-container {
    padding: 0.75rem 1rem;
    background: #faf7fb;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.14);
}
.dabra-vol-progress-msg {
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--color-on-surface-rgb));
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}
.dabra-vol-progress-bar {
    width: 100%;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    background-color: rgba(var(--color-primary-rgb), 0.12);
}
.dabra-vol-progress-bar::-webkit-progress-bar {
    background-color: rgba(var(--color-primary-rgb), 0.12);
    border-radius: 9999px;
}
.dabra-vol-progress-bar::-webkit-progress-value {
    background: linear-gradient(90deg, rgb(var(--color-dabra-lilac-rgb)), rgb(var(--color-primary-rgb)));
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.dabra-vol-progress-bar::-moz-progress-bar {
    background: linear-gradient(90deg, rgb(var(--color-dabra-lilac-rgb)), rgb(var(--color-primary-rgb)));
    border-radius: 9999px;
}

/* 4. Banner Stepper de la Página de Carrito */
.dabra-vol-cart-banner {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18);
    border-radius: var(--radius-lg, 1rem);
}
.dabra-vol-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    padding-bottom: 2px;
}
.dabra-vol-step {
    flex: 1;
    min-width: 70px;
    text-align: center;
    padding: 0.5rem 0.25rem;
    background: #faf7fb;
    border-radius: var(--radius-default, 0.75rem);
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
    font-size: 11px;
}
.dabra-vol-step.is-active {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-primary-rgb));
    font-weight: 700;
}
.dabra-vol-step.is-completed {
    background: rgba(var(--color-dabra-lilac-rgb), 0.25);
    color: rgb(var(--color-on-surface-rgb));
}

/* 5. Fila de Ahorro en Totales del Carrito */
.dabra-vol-savings-row th,
.dabra-vol-savings-row td {
    color: rgb(var(--color-primary-rgb)) !important;
    font-weight: 700 !important;
}