/* ================================================================
   WP WC VIC 1 — Estilos de tienda v3.1
   Selectores reforzados para superar el CSS de Divi.
   ================================================================ */

/* ── Variables (sobreescritas por PHP inline) ─────────────────── */
:root {
    --wcdpc-card-bg:           #ffffff;
    --wcdpc-card-border:       #e0e0e0;
    --wcdpc-card-border-w:     1px;
    --wcdpc-card-radius:       6px;
    --wcdpc-card-shadow:       0 2px 8px rgba(0,0,0,0.08);
    --wcdpc-card-shadow-hover: 0 8px 24px rgba(0,0,0,0.14);

    --wcdpc-badge-bg:          #e74c3c;
    --wcdpc-badge-color:       #ffffff;
    --wcdpc-badge-size:        12px;
    --wcdpc-badge-radius:      4px;

    --wcdpc-image-height:      200px;
    --wcdpc-image-padding:     6px;

    --wcdpc-title-color:       #111111;
    --wcdpc-title-size:        13px;
    --wcdpc-title-weight:      600;
    --wcdpc-title-transform:   uppercase;
    --wcdpc-title-lines:       2;

    --wcdpc-price-color:       #111111;
    --wcdpc-price-size:        16px;
    --wcdpc-price-old-color:   #aaaaaa;

    --wcdpc-btn-bg:            #111111;
    --wcdpc-btn-color:         #ffffff;
    --wcdpc-btn-bg-hover:      #333333;
    --wcdpc-btn-color-hover:   #ffffff;
    --wcdpc-btn-radius:        4px;
    --wcdpc-btn-size:          12px;

    --wcdpc-cols-desktop:      4;
    --wcdpc-cols-tablet:       3;
    --wcdpc-cols-mobile:       1;
}

/* ── Quitar badge nativo WooCommerce ──────────────────────────── */
li.wcdpc-card.product .onsale { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   NEUTRALIZAR margen/padding izquierdo de Divi
   ══════════════════════════════════════════════════════════════ */
.et_pb_shop .woocommerce,
.et_pb_shop .woocommerce-page,
.et_pb_shop .woocommerce ul.products,
.et_pb_shop .woocommerce-page ul.products {
    padding-left: 0 !important;
    margin-left:  0 !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID DESKTOP
   ══════════════════════════════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce-page ul.products,
.et_pb_shop .woocommerce ul.products,
.et_pb_shop .woocommerce-page ul.products,
.et_pb_shop ul.products,
body .woocommerce ul.products,
body .woocommerce-page ul.products {
    display:               grid !important;
    grid-template-columns: repeat(var(--wcdpc-cols-desktop), 1fr) !important;
    gap:                   18px !important;
    align-items:           stretch !important;
    padding:               0 !important;
    margin-left:           0 !important;
    margin-right:          0 !important;
}

.woocommerce ul.products li.wcdpc-card,
.woocommerce-page ul.products li.wcdpc-card,
.et_pb_shop ul.products li.wcdpc-card,
body .woocommerce ul.products li.wcdpc-card {
    width:  100% !important;
    margin: 0 !important;
    float:  none !important;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .et_pb_shop .woocommerce ul.products,
    .et_pb_shop ul.products,
    body .woocommerce ul.products {
        grid-template-columns: repeat(var(--wcdpc-cols-tablet), 1fr) !important;
    }
}

/* ── MÓVIL: 1 columna — selectores agresivos para Divi ─────────── */
@media only screen and (max-width: 767px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .et_pb_shop .woocommerce ul.products,
    .et_pb_shop .woocommerce-page ul.products,
    .et_pb_shop ul.products,
    body .woocommerce ul.products,
    body .woocommerce-page ul.products,
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    #page .woocommerce ul.products,
    .et_pb_module .woocommerce ul.products,
    .et_pb_module ul.products {
        display:               grid !important;
        grid-template-columns: 1fr !important;
        gap:                   14px !important;
        width:                 100% !important;
    }

    .woocommerce ul.products li.wcdpc-card,
    .woocommerce-page ul.products li.wcdpc-card,
    .et_pb_shop ul.products li.wcdpc-card,
    body .woocommerce ul.products li.wcdpc-card,
    .et_pb_module ul.products li.wcdpc-card {
        width:     100% !important;
        max-width: 100% !important;
        margin:    0 !important;
        float:     none !important;
        clear:     none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   TARJETA — flex column, precio al fondo
   ══════════════════════════════════════════════════════════════ */
li.wcdpc-card.product,
.et_pb_shop li.wcdpc-card.product {
    position:       relative !important;
    background:     var(--wcdpc-card-bg) !important;
    border:         var(--wcdpc-card-border-w) solid var(--wcdpc-card-border) !important;
    border-radius:  var(--wcdpc-card-radius) !important;
    box-shadow:     var(--wcdpc-card-shadow) !important;
    overflow:       visible !important;
    padding:        12px 12px 14px !important;
    display:        flex !important;
    flex-direction: column !important;
    box-sizing:     border-box !important;
    transition:     box-shadow .25s ease, transform .25s ease !important;
}

li.wcdpc-card.product:hover,
.et_pb_shop li.wcdpc-card.product:hover {
    box-shadow: var(--wcdpc-card-shadow-hover) !important;
    transform:  translateY(-3px) !important;
}

/* ── Imagen ───────────────────────────────────────────────────── */
li.wcdpc-card.product a:first-child,
.et_pb_shop li.wcdpc-card a:first-child { display: block !important; }

li.wcdpc-card.product img.attachment-woocommerce_thumbnail,
li.wcdpc-card.product img.wp-post-image,
.et_pb_shop li.wcdpc-card img.attachment-woocommerce_thumbnail {
    width:      100% !important;
    height:     var(--wcdpc-image-height) !important;
    object-fit: contain !important;
    display:    block !important;
    padding:    var(--wcdpc-image-padding) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* ── Badge ────────────────────────────────────────────────────── */
.wcdpc-badge {
    position:       absolute;
    top:            8px;
    right:          8px;
    left:           auto;
    background:     var(--wcdpc-badge-bg);
    color:          var(--wcdpc-badge-color);
    font-size:      var(--wcdpc-badge-size);
    font-weight:    700;
    line-height:    1;
    padding:        5px 7px;
    border-radius:  var(--wcdpc-badge-radius);
    z-index:        20;
    letter-spacing: .3px;
    pointer-events: none;
}
.wcdpc-badge--top-left { left: 8px; right: auto; }

/* ── Marca ────────────────────────────────────────────────────── */
.wcdpc-brand {
    min-height:  24px;
    margin:      6px 0 3px;
    display:     flex;
    align-items: center;
}
.wcdpc-brand img {
    max-width:  110px;
    max-height: 30px;
    object-fit: contain;
    display:    block;
}
.wcdpc-brand--text {
    font-size:      11px;
    font-weight:    700;
    color:          #555;
    text-transform: uppercase;
    letter-spacing: .5px;
    border:         1px solid #ccc;
    padding:        2px 8px;
    border-radius:  3px;
    display:        inline-flex;
    width:          auto;
}

/* ── Título — SIEMPRE 2 líneas con "…" ───────────────────────── */
li.wcdpc-card.product .woocommerce-loop-product__title,
.et_pb_shop li.wcdpc-card .woocommerce-loop-product__title {
    font-size:          var(--wcdpc-title-size) !important;
    font-weight:        var(--wcdpc-title-weight) !important;
    color:              var(--wcdpc-title-color) !important;
    text-transform:     var(--wcdpc-title-transform) !important;
    line-height:        1.35 !important;
    margin:             4px 0 0 !important;
    letter-spacing:     .2px !important;
    /* Clamp fijo 2 líneas */
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    text-overflow:      ellipsis !important;
    flex-grow:          0 !important;
    min-height:         calc(1.35em * 2) !important;
}

/* ── Spacer: empuja precio y botón al fondo ───────────────────── */
li.wcdpc-card.product .woocommerce-loop-product__title + *,
.et_pb_shop li.wcdpc-card .woocommerce-loop-product__title + * {
    margin-top: auto !important;
}

/* ── Precio al fondo ──────────────────────────────────────────── */
li.wcdpc-card.product .price,
.et_pb_shop li.wcdpc-card .price {
    display:       flex !important;
    flex-wrap:     wrap !important;
    align-items:   baseline !important;
    gap:           4px !important;
    margin-top:    auto !important;
    margin-bottom: 0 !important;
    padding-top:   10px !important;
}

.wcdpc-desde {
    width:          100%;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .8px;
    color:          #999;
    text-transform: uppercase;
    display:        block;
    margin-bottom:  1px;
    order:          -1;
}

/* Precio actual */
li.wcdpc-card.product .price ins,
li.wcdpc-card.product .price > .woocommerce-Price-amount,
.et_pb_shop li.wcdpc-card .price ins {
    color:           var(--wcdpc-price-color) !important;
    font-weight:     700 !important;
    font-size:       var(--wcdpc-price-size) !important;
    text-decoration: none !important;
}

/* Precio tachado */
li.wcdpc-card.product .price del,
.et_pb_shop li.wcdpc-card .price del {
    color:           var(--wcdpc-price-old-color) !important;
    font-size:       12px !important;
    font-weight:     400 !important;
    text-decoration: line-through !important;
}
li.wcdpc-card.product .price del .woocommerce-Price-amount {
    color: var(--wcdpc-price-old-color) !important;
}

/* ── Botón ────────────────────────────────────────────────────── */
li.wcdpc-card.product .button,
.et_pb_shop li.wcdpc-card .button {
    display:         block !important;
    width:           100% !important;
    margin-top:      10px !important;
    padding:         9px 0 !important;
    text-align:      center !important;
    font-size:       var(--wcdpc-btn-size) !important;
    font-weight:     600 !important;
    text-transform:  uppercase !important;
    letter-spacing:  .5px !important;
    border-radius:   var(--wcdpc-btn-radius) !important;
    background:      var(--wcdpc-btn-bg) !important;
    color:           var(--wcdpc-btn-color) !important;
    border:          none !important;
    box-shadow:      none !important;
    transition:      background .2s ease, color .2s ease !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    box-sizing:      border-box !important;
}
li.wcdpc-card.product .button:hover,
.et_pb_shop li.wcdpc-card .button:hover {
    background: var(--wcdpc-btn-bg-hover) !important;
    color:      var(--wcdpc-btn-color-hover) !important;
}

/* ══════════════════════════════════════════════════════════════
   MÓVIL — tarjeta grande y legible
   ══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) {

    li.wcdpc-card.product,
    .et_pb_shop li.wcdpc-card.product {
        padding: 12px 14px 16px !important;
    }

    li.wcdpc-card.product img.attachment-woocommerce_thumbnail,
    li.wcdpc-card.product img.wp-post-image,
    .et_pb_shop li.wcdpc-card img.attachment-woocommerce_thumbnail {
        height: 220px !important;
    }

    /* Título más grande, igual 2 líneas */
    li.wcdpc-card.product .woocommerce-loop-product__title,
    .et_pb_shop li.wcdpc-card .woocommerce-loop-product__title {
        font-size:          16px !important;
        -webkit-line-clamp: 2 !important;
        min-height:         calc(1.35em * 2) !important;
    }

    li.wcdpc-card.product .price ins,
    li.wcdpc-card.product .price > .woocommerce-Price-amount,
    .et_pb_shop li.wcdpc-card .price ins {
        font-size: 22px !important;
    }

    li.wcdpc-card.product .price del,
    .et_pb_shop li.wcdpc-card .price del {
        font-size: 15px !important;
    }

    .wcdpc-desde { font-size: 10px !important; }

    li.wcdpc-card.product .button,
    .et_pb_shop li.wcdpc-card .button {
        padding:   13px 0 !important;
        font-size: 15px !important;
    }
}