/* ══════════════════════════════════════════════════════
   WDC Custom CSS — migrado desde "CSS personalizado" del admin
   Fecha: 2026-03-09
   ══════════════════════════════════════════════════════ */

/* ── LABELS DE OFERTA ── */

.label-accent {
    background-color: #f7a0c1 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    border: none !important;
}

.label-accent .label-offer-percentage,
.label-accent .label-offer-percentage-text {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ── PRECIOS EN LISTADOS ── */

.item-price-container .js-price-display {
    font-weight: 700 !important;
}

.item-price-container .js-compare-price-display {
    font-weight: 400 !important;
}

.js-payment-discount-price-product.payment-discount-price-product {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ── REORDEN DE PRECIOS EN HOME ── */

.item-description a.item-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.item-description .item-price-container {
    display: contents;
}

.item-description .js-item-name {
    width: 100%;
    order: 1 !important;
}

.item-description .js-compare-price-display {
    order: 2 !important;
    margin-right: 8px;
}

.item-description .js-price-display {
    order: 2 !important;
}

.item-description .js-max-installments-container {
    width: 100%;
    order: 3 !important;
}

.item-description .js-payment-discount-price-product-container {
    width: 100%;
    order: 4 !important;
}

.item-description [class*="js-color-variant"] {
    order: 5 !important;
}

.item-description .item-actions {
    width: 100%;
    order: 6 !important;
}

/* ── CUOTAS ── */

.js-max-installments-container .product-installments {
    font-size: 1.3em !important;
}

/* ── TRANSFERENCIA ── */

.item-description .js-payment-discount-name-product {
    display: none !important;
}

.item-description .js-payment-discount-price-product-container::after {
    content: "transferencia";
    font-size: 1em !important;
}

.js-payment-discount-price-product-container span:not(.js-payment-discount-price-product) {
    color: #000 !important;
    font-weight: 400 !important;
    font-size: 1em !important;
}

.template-home .js-payment-discount-price-product-container,
.template-product .item-description .js-payment-discount-price-product-container {
    font-size: 1.2em !important;
}

.item-installments .product-installments {
    color: #f00181;
    margin-top: 5px;
}

/* ── HOME: AJUSTES DE SECCIONES ── */

.template-home .section-informative-banners {
    padding-top: 58px;
    padding-bottom: 72px;
    margin-top: -32px;
}

.template-home .section-featured-home {
    padding-left: 4px;
    padding-right: 4px;
}

/* ── BOTÓN GUÍA DE TALLES (mismo estilo que badge transferencia) ── */

.wdc-size-guide-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #fff0f6 !important;
    border: 1.5px solid #f7a0c1 !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    width: auto !important;
    margin-top: -18px !important;
    margin-bottom: 25px !important;
}

.wdc-size-guide-btn svg {
    color: #f7a0c1 !important;
}

/* ── PRODUCTO: BADGE TRANSFERENCIA (solo producto principal via #single-product) ── */

#single-product .js-payment-discount-price-product-container.payment-discount-price-product-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #fff0f6 !important;
    border: 1.5px solid #f7a0c1 !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    margin-top: 8px !important;
}

#single-product .js-payment-discount-price-product.payment-discount-price-product {
    color: #f7a0c1 !important;
    font-weight: 700 !important;
}

#single-product .js-payment-discount-price-product-container span:not(.js-payment-discount-price-product) {
    color: #000 !important;
    font-weight: 400 !important;
}

/* ── GUÍA DE TALLES: ANCHO EN DESKTOP ── */

@media (min-width: 769px) {
    .wdc-size-guide-btn {
        width: auto !important;
        max-width: fit-content !important;
    }
}

/* ── MOBILE: HOME + RELACIONADOS EN PRODUCTO ── */

@media (max-width: 768px) {
    .template-home .item-description,
    .template-product .item-description {
        width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    .template-home .js-offer-label-private.label-accent {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .template-home .item-link-quickshop {
        width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .template-home .item-description .js-compare-price-display,
    .template-product .item-description .js-compare-price-display {
        font-size: .8em !important;
    }

    .template-home .item-description .js-price-display,
    .template-product .item-description .js-price-display {
        font-size: .9em !important;
    }

    .template-home .item-description .product-installments,
    .template-product .item-description .product-installments {
        font-size: 0 !important;
    }

    .template-home .item-description .product-installments .js-installment-amount,
    .template-product .item-description .product-installments .js-installment-amount,
    .item-description .product-installments .js-installment-price {
        font-size: .7rem !important;
    }

    .template-home .item-description .product-installments .js-installment-amount::after,
    .template-product .item-description .product-installments .js-installment-amount::after {
        content: " x ";
        font-size: .7rem !important;
    }

    .template-home .item-description .product-installments .js-installment-price::after,
    .template-product .item-description .product-installments .js-installment-price::after {
        content: " sin interés";
        font-size: .7rem !important;
    }

    .template-home .item-description .js-payment-discount-price-product-container,
    .template-product .item-description .js-payment-discount-price-product-container {
        font-size: 1em !important;
    }

    .js-payment-discount-price-product-container span:not(.js-payment-discount-price-product) {
        font-size: 1em !important;
    }

    .template-home .js-payment-discount-price-product.payment-discount-price-product,
    .template-product .item-description .js-payment-discount-price-product.payment-discount-price-product {
        font-size: 1em !important;
    }
}

/* ── HOME: SECCIÓN TALLE WDC ── */

.wdc-size-section {
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.07);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 48px 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

.wdc-size-left {
    flex: 1;
}

.wdc-size-pretitle {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #f7a0c1;
    margin-bottom: 10px;
    font-weight: 600;
}

.wdc-size-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 14px;
    white-space: nowrap;
}

.wdc-size-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 320px;
}

.wdc-size-btn {
    display: inline-block;
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.wdc-size-btn:hover {
    background: #f7a0c1;
    color: #000000;
}

.wdc-size-divider {
    width: 1px;
    height: 160px;
    background: rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.wdc-size-right {
    flex: 1;
}

.wdc-size-filter-title {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
}

.wdc-size-filter-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 16px;
}

.wdc-size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid #000000;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.wdc-size-chip:hover {
    background: #000000;
    color: #ffffff;
}

.wdc-size-filter-note {
    font-size: 11px;
    color: #aaa;
    font-style: italic;
}

@media (max-width: 768px) {
    .wdc-size-section {
        flex-direction: column;
        padding: 32px 20px;
        gap: 24px;
        align-items: flex-start;
    }

    .wdc-size-left {
        width: 100%;
    }

    .wdc-size-title {
        font-size: 22px;
    }

    .wdc-size-desc {
        max-width: 100%;
        font-size: 12px;
    }

    .wdc-size-divider {
        width: 50px;
        height: 1px;
    }

    .wdc-size-right {
        width: 100%;
    }

    .wdc-size-filter-grid {
        gap: 6px;
    }

    .wdc-size-chip {
        width: 38px;
        height: 38px;
        font-size: 10px;
    }
}

/* ── BARRA DE NAVEGACIÓN PRODUCTOS ── */

.wdc-product-nav {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    width: 100%;
    position: relative;
    z-index: 100;
}

.wdc-product-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.wdc-product-nav__item {
    position: relative;
}

.wdc-product-nav__link {
    display: block;
    padding: 13px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.wdc-product-nav__link:hover {
    color: #f7a0c1;
    border-bottom-color: #f7a0c1;
}

.wdc-product-nav__link--new {
    color: #f7a0c1;
}

.wdc-product-nav__dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.wdc-product-nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-top: 2px solid #f7a0c1;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 200;
}

.wdc-product-nav__dropdown li a {
    display: block;
    padding: 9px 20px;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
}

.wdc-product-nav__dropdown li a:hover {
    background: #fff0f6;
    color: #f7a0c1;
}

.wdc-product-nav__item:hover .wdc-product-nav__dropdown {
    display: block;
}

@media (max-width: 1023px) {
    .wdc-product-nav {
        display: none;
    }
}

/* ── DESCRIPCIÓN DE PRODUCTO: IMÁGENES RESPONSIVE ── */

.product-description .img-mobile {
    display: block;
}

.product-description .img-desktop {
    display: none;
}

@media (min-width: 768px) {
    .product-description .img-mobile {
        display: none !important;
    }

    .product-description .img-desktop {
        display: block !important;
    }
}

/* ══════════════════════════════════════════════════════
   BOTONES DE VARIANTE NATIVOS DE TIENDANUBE
   ══════════════════════════════════════════════════════ */

/* Botón de variante (talle/color texto) — estilo pill */
.btn-variant:not(.btn-variant-color) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1.5px solid #888 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    color: #333 !important;
    background: #fff !important;
    margin: 0 4px 6px 0 !important;
    transition: all 0.15s;
    text-decoration: none !important;
}
.btn-variant:not(.btn-variant-color):hover {
    border-color: #111 !important;
    color: #111 !important;
}
.btn-variant:not(.btn-variant-color).selected {
    background: #f7a0c1 !important;
    border-color: #f7a0c1 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   WDC KIT — Enterizas para Armar (HUAPPS Compre Junto)
   ══════════════════════════════════════════════════════ */

#wdc-kit .huapps-kit-group {
    font-family: 'DM Sans', sans-serif;
}

/* Forzar subgrupos abiertos e inline (no popup/overlay) */
#wdc-kit .js-huapps-buy-together-kit-content {
    display: block !important;
}
#wdc-kit .huapps-kit-sub-group {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
#wdc-kit .huapps-kit-sub-group-products,
#wdc-kit .js-huapps-kit-sub-group-products-group {
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    margin: 0 !important;
}
#wdc-kit .huapps-kit-group-item-variations,
#wdc-kit .huapps-product-item-variations,
#wdc-kit .huapps-product-item-variations-buttons,
#wdc-kit .js-huapps-buy-together-item-form {
    position: static !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar variaciones de color (marcadas por JS) */
#wdc-kit .wdc-hide-variation {
    display: none !important;
}
#wdc-kit .huapps-kit-group-item-border {
    position: static !important;
}

/* Ocultar labels/accordion nativos, checkbox "Quiero!", y label "Talle" — SOLO enteriza */
#wdc-kit.wdc-kit-enteriza .huapps-kit-sub-group-header,
#wdc-kit.wdc-kit-enteriza .huapps-kit-sub-group-label,
#wdc-kit.wdc-kit-enteriza .huapps-kit-sub-group-selected,
#wdc-kit.wdc-kit-enteriza .huapps-accordion-container,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-enabled-option,
#wdc-kit.wdc-kit-enteriza .huapps-buy-together-item-enabled-option-label,
#wdc-kit.wdc-kit-enteriza [class*="huapps-buy-together-item-enabled-option"],
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-media,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-name,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-prices,
#wdc-kit.wdc-kit-enteriza .huapps-product-item-variations-label {
    display: none !important;
}

/* Ocultar checkbox "Quiero!" en TODOS los kits */
#wdc-kit .huapps-kit-group-item-enabled-option,
#wdc-kit .huapps-buy-together-item-enabled-option-label,
#wdc-kit [class*="huapps-buy-together-item-enabled-option"] {
    display: none !important;
}

/* Reset del item border/row de HUAPPS — SOLO enteriza */
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-border,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-row,
#wdc-kit.wdc-kit-enteriza .huapps-kit-group-item-content,
#wdc-kit.wdc-kit-enteriza .js-huapps-buy-together-get-product {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Label custom que inyectamos con JS */
#wdc-kit .wdc-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #141414;
    margin-bottom: 10px;
    margin-top: 20px;
}

/* Chips de talle (clase real: .js-huapps-variant-button-cta) */
#wdc-kit .js-huapps-variant-button-cta,
#wdc-kit .btn.btn-default.btn-sm.js-huapps-variant-button-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid #888 !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
    color: #333 !important;
    background: #fff !important;
    margin: 0 4px 6px 0;
    transition: all 0.15s;
}
#wdc-kit .js-huapps-variant-button-cta:hover {
    border-color: #111 !important;
    color: #111 !important;
}
#wdc-kit .js-huapps-variant-button-cta.cta-huapps-active,
#wdc-kit .btn.btn-default.btn-sm.js-huapps-variant-button-cta.cta-huapps-active {
    background: #f7a0c1 !important;
    border-color: #f7a0c1 !important;
    color: #fff !important;
}

/* Grid de bombachas: 2 columnas */
#wdc-kit .wdc-bombi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

/* Card de cada bombacha */
#wdc-kit .wdc-bombi-card {
    border: 1.5px solid #ddd;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
}
#wdc-kit .wdc-bombi-card:hover {
    border-color: #f7a0c1;
}
#wdc-kit .wdc-bombi-card.selected {
    border-color: #f7a0c1;
    background: #fff0f6;
}

/* Imagen custom de la bombacha (nuestro <img> o <a><img>) */
#wdc-kit .wdc-bombi-card > img,
#wdc-kit .wdc-bombi-card > a > img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    background: #f5f5f5;
    margin-bottom: 8px;
    display: block;
}

/* Nombre y subtitulo de la bombacha */
#wdc-kit .wdc-bombi-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #333;
    margin-bottom: 2px;
}
#wdc-kit .wdc-bombi-sub {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
}

/* Chips de talle dentro de la bombacha (mas chicos) */
#wdc-kit .wdc-bombi-card .js-huapps-variant-button-cta {
    padding: 4px 9px;
    font-size: 11px;
    margin: 0 3px 4px 0;
}

/* Boton agregar — HUAPPS lo genera con clase propia */
#wdc-kit .js-huapps-buy-together-submit,
#wdc-kit [class*="huapps-kit-submit"],
#wdc-kit [class*="huapps-add"] {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 40px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    background: #f7a0c1 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
#wdc-kit .js-huapps-buy-together-submit:hover {
    background: #e88ab0 !important;
}

/* Ocultar botones + nativos de HUAPPS */
#wdc-kit .huapps-kit-product-add-button,
#wdc-kit [class*="huapps-kit-add"],
#wdc-kit button.huapps-btn {
    display: none !important;
}

/* Divisor entre top y bombachas */
#wdc-kit .wdc-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 16px 0;
}

/* Status de seleccion */
#wdc-kit .wdc-status {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 10px;
    min-height: 18px;
}

/* Imagen fija para kit simple (no la toca HUAPPS) */
#wdc-kit .wdc-fixed-img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* ══ COMPRA CONJUNTA — mismos estilos de botones ══ */

#wdc-kit-compra {
    width: 100%;
}

/* Chips de talle */
#wdc-kit-compra .js-huapps-variant-button-cta,
#wdc-kit-compra .btn.btn-default.btn-sm.js-huapps-variant-button-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid #888 !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
    color: #333 !important;
    background: #fff !important;
    margin: 0 4px 6px 0;
    transition: all 0.15s;
}
#wdc-kit-compra .js-huapps-variant-button-cta:hover {
    border-color: #111 !important;
    color: #111 !important;
}
#wdc-kit-compra .js-huapps-variant-button-cta.cta-huapps-active,
#wdc-kit-compra .btn.btn-default.btn-sm.js-huapps-variant-button-cta.cta-huapps-active {
    background: #f7a0c1 !important;
    border-color: #f7a0c1 !important;
    color: #fff !important;
}

/* Contenedor de botones de talle — ancho reducido para 3 por fila */
#wdc-kit-compra .huapps-product-item-variations-buttons {
    max-width: 180px;
    margin-left: 5px;
}

/* Label "Talle" con margen izquierdo */
#wdc-kit-compra .huapps-product-item-variations-label {
    margin-left: 5px;
}

/* Chips mas compactos en compra conjunta */
#wdc-kit-compra .js-huapps-variant-button-cta,
#wdc-kit-compra .btn.btn-default.btn-sm.js-huapps-variant-button-cta {
    padding: 0 6px;
    font-size: 10px;
    line-height: 1.8;
    border-radius: 12px;
    min-height: auto;
}

/* Ocultar checkbox "Quiero!" */
#wdc-kit-compra .huapps-buy-together-item-enabled-option,
#wdc-kit-compra .huapps-buy-together-item-enabled-option-label,
#wdc-kit-compra [class*="huapps-buy-together-item-enabled-option"] {
    display: none !important;
}

/* Ocultar variantes con una sola opcion */
#wdc-kit-compra .wdc-hide-variation {
    display: none !important;
}

/* ── WDC KIT — Mobile ── */
@media (max-width: 767px) {
    #wdc-kit .wdc-bombi-grid {
        gap: 8px;
    }
    #wdc-kit .wdc-bombi-card {
        padding: 8px;
    }
    #wdc-kit .wdc-bombi-card > img {
        border-radius: 6px;
        margin-bottom: 6px;
    }
    #wdc-kit .wdc-bombi-name {
        font-size: 11px;
    }
    #wdc-kit .wdc-bombi-sub {
        font-size: 10px;
        margin-bottom: 6px;
    }
    #wdc-kit .wdc-bombi-card .js-huapps-variant-button-cta,
    #wdc-kit .wdc-bombi-card .btn.btn-default.btn-sm.js-huapps-variant-button-cta {
        padding: 0 5px;
        font-size: 9px;
        margin: 0 2px 3px 0;
        min-height: auto;
        line-height: 1.8;
        border-radius: 10px;
    }
    #wdc-kit .js-huapps-variant-button-cta,
    #wdc-kit .btn.btn-default.btn-sm.js-huapps-variant-button-cta {
        padding: 0 6px;
        font-size: 10px;
        margin: 0 3px 4px 0;
        min-height: auto;
        line-height: 1.8;
        border-radius: 12px;
    }
    #wdc-kit .wdc-section-label {
        font-size: 10px;
    }
    #wdc-kit .wdc-divider {
        margin: 8px 0;
    }
    #wdc-kit .js-huapps-kit-sub-group:first-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
