/* =========================================================
   DOLCI HANDS
   PRODUCTOS
   ========================================================= */

.products-section {

    width:
        min(
            100% - (
                var(--container-padding) * 2
            ),
            var(--container-width)
        );

    margin:
        0 auto;

    padding:
        var(--space-24) 0;

}


/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.products-intro {

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    align-items:
        end;

    gap:
        30px;

    margin-bottom:
        45px;

}


.products-intro > * {

    grid-column:
        1;

}


.products-intro .button {

    grid-column:
        2;

    grid-row:
        1 / span 3;

}


.products-intro .section-eyebrow {

    margin:
        0;

}


.products-intro h2 {

    margin:
        0;

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        var(--text-4xl);

    line-height:
        1;

    letter-spacing:
        -0.035em;

}


.products-intro h2 span {

    color:
        var(--color-accent);

}


.products-intro p {

    max-width:
        560px;

    margin:
        0;

    color:
        var(--color-text-soft);

}


/* =========================================================
   GRID
   ========================================================= */

.products-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        24px;

}


/* =========================================================
   TARJETA
   ========================================================= */

.product-card {

    overflow:
        hidden;

    border:
        1px solid
        var(--color-border-soft);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);

}


.product-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            184,
            111,
            91,
            0.25
        );

    box-shadow:
        var(--shadow-soft);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.product-image {

    width:
        100%;

    aspect-ratio:
        1 / 0.85;

    background:
        var(--dh-cream-warm);

    overflow:
        hidden;
}


.product-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.product-content {

    padding:
        24px;

}


.product-content h3 {

    margin:
        0;

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        var(--text-xl);

    line-height:
        1.2;

}


.product-description {

    min-height:
        48px;

    margin:
        10px 0 15px;

    color:
        var(--color-text-soft);

    font-size:
        var(--text-sm);

    line-height:
        1.55;

}


.product-price {

    display:
        block;

    color:
        var(--color-accent);

    font-size:
        var(--text-lg);

    font-weight:
        var(--font-weight-bold);

}


/* =========================================================
   ACCIONES
   ========================================================= */

.product-actions {

    margin-top:
        20px;

    display:
        flex;

    gap:
        8px;

}


.product-actions .button {

    min-width:
        0;

    flex:
        1;

    padding-inline:
        12px;

    font-size:
        var(--text-xs);

}


.product-cart-form {

    flex:
        1;

    display:
        flex;

}


.product-cart-form .button {

    width:
        100%;

}


/* =========================================================
   SIN PRODUCTOS
   ========================================================= */

.products-empty {

    grid-column:
        1 / -1;

    padding:
        70px 20px;

    text-align:
        center;

    border:
        1px dashed
        var(--color-border);

    border-radius:
        var(--radius-xl);

    color:
        var(--color-text-soft);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .products-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   PRODUCTOS — PRÓXIMAMENTE
   ========================================================= */

.product-card-coming-soon .product-image {

    position:
        relative;

}


.product-card-coming-soon .product-image img {

    filter:
        blur(7px);

    transform:
        scale(1.04);

    opacity:
        0.65;

}


.product-coming-soon {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    backdrop-filter:
        blur(2px);

}


.product-coming-soon span {

    padding:
        10px 18px;

    border:
        1px solid
        var(--color-border-soft);

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    color:
        var(--color-text);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


.product-card-coming-soon .product-actions .button {

    opacity:
        0.55;

    cursor:
        not-allowed;

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .products-section {

        padding:
            var(--space-20) 0;

    }


    .products-intro {

        display:
            block;

        margin-bottom:
            32px;

    }


    .products-intro h2 {

        margin-top:
            5px;

        font-size:
            var(--text-3xl);

    }


    .products-intro p {

        margin-top:
            12px;

    }


    .products-intro .button {

        margin-top:
            20px;

    }


    .products-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .product-content {

        padding:
            20px;

    }


    .product-description {

        min-height:
            auto;

    }


    .product-actions {

        flex-direction:
            column;

    }


    .product-actions .button {

        width:
            100%;

    }

}



/* =========================================================
   PRODUCTOS PRÓXIMAMENTE
   ========================================================= */

.product-card-coming-soon .product-description {

    filter:
        blur(5px);

    opacity:
        0.55;

    user-select:
        none;
}


.product-card-coming-soon .product-price {

    filter:
        blur(6px);

    opacity:
        0.45;

    user-select:
        none;
}


/* =========================================================
   DOLCI HANDS — ETIQUETA DE PROMOCIÓN EN PRODUCTOS
   INICIO
========================================================= */

.product-image {
    position: relative;
}

.product-promotion-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;
    padding: 7px 12px;

    background: #b96f61;
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    box-shadow:
        0 6px 16px rgba(70, 42, 34, 0.16);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.product-promotion-tag img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;

    object-fit: contain;
    flex: 0 0 50px;
}

.product-promotion-tag span {
    display: block;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .product-promotion-tag {
        top: 10px;
        left: 10px;

        min-height: 31px;
        padding: 6px 10px;

        gap: 6px;

        font-size: 11px;
    }

    .product-promotion-tag img {
        width: 25px !important;
        height: 25px !important;
        max-width: 25px !important;
        max-height: 25px !important;
        flex-basis: 25px;
    }

}


/* =========================================================
   DOLCI HANDS — PRECIO CON PROMOCIÓN
========================================================= */

.product-price-discount {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.product-price-original {
    color: #9a918d;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    font-size: 0.92em;
}

.product-price-current {
    color: #b96f61;
    font-weight: 800;
    font-size: 1.08em;
}