/**
 * OREM Digital Experience — PDP digital (wrapper + bloque de compra + sticky bar).
 * El contenido visual del template lo controla Elementor; aquí solo vive lo
 * que renderiza PHP: [orem_digital_buy], la sticky bar y limpieza del wrapper.
 */

/* El main del wrapper ocupa todo el ancho; los containers de Elementor
   controlan sus propios máximos. */
.orem-digital-pdp {
    width: 100%;
}

/* Ancla con margen para que el scroll no esconda el bloque bajo el header. */
#orem-comprar {
    scroll-margin-top: 90px;
}

html {
    scroll-behavior: smooth;
}

/* ------------------------------ bloque de compra ------------------------
   Paleta de marca (extraída de las landings Elementor de OREM):
   verde oscuro #325A3F (headings/CTA primario), lavanda #D5C5F3 (CTA
   secundario), crema #F8F3F0, ink #1D1D1F. El botón NO hereda el verde
   brillante default de Shoptimizer (#3BB54A + texto negro). */

.orem-digital-buy {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: 24px;
    padding: 40px 32px 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}

.orem-digital-buy .price {
    display: block;
    font-size: 38px;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    margin-bottom: 4px;
}

.orem-digital-buy .price del {
    font-size: 24px;
    font-weight: 400;
    opacity: .5;
    margin-right: 10px;
}

.orem-digital-buy__price-note {
    display: block;
    font-size: 13px;
    color: #5f5f5f;
    margin-bottom: 18px;
}

/* Digital se compra de a uno: fuera selector de cantidad. */
.orem-digital-buy .quantity {
    display: none !important;
}

.orem-digital-buy__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4a4a4a;
}

.orem-digital-buy__rating .star-rating {
    color: #E8A33D;
    margin: 0;
}

.orem-digital-buy__deadline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 16px;
    padding: 8px 16px;
    background: #FDF3E3;
    border: 1px solid #E8A33D;
    border-radius: 100px;
    font-size: 14px;
    color: #7A5417;
}

.orem-digital-buy__countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.orem-digital-buy__countdown:not(:empty)::before {
    content: "·";
    margin: 0 6px 0 2px;
    font-weight: 400;
}

.orem-digital-buy__bump {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    margin: 4px auto 10px;
    padding: 12px 16px;
    background: #FDF7F9;
    border: 1.5px dashed rgba(196, 102, 131, .5);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #1d1d1f;
}

.orem-digital-buy__bump input {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: #C46683;
    flex-shrink: 0;
}

.orem-digital-buy__bump-price {
    font-weight: 700;
    color: #C46683;
    white-space: nowrap;
}

.orem-digital-buy__payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.orem-digital-buy__payments span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b6b6b;
    border: 1px solid #e2ddd6;
    border-radius: 6px;
    padding: 4px 9px;
    background: #fff;
}

/* Tipografía del precio en pantallas chicas: sin wrap raro. */
@media (max-width: 480px) {
    .orem-digital-buy {
        padding: 28px 18px 24px;
    }

    .orem-digital-buy .price {
        font-size: 28px;
    }

    .orem-digital-buy .price del {
        font-size: 17px;
        margin-right: 6px;
    }
}

/* --------------------- bundle (Product Bundles) dentro de la card -------
   El form nativo de bundles lista los productos hijos; se ordena como filas
   limpias: thumb chico, título, precio y el selector de variación alineados. */

.orem-digital-buy--bundle {
    max-width: 640px;
}

.orem-digital-buy .bundled_products {
    text-align: left;
    margin: 6px 0 4px;
}

.orem-digital-buy .bundled_product,
.orem-digital-buy .bundled_product_summary {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #efe8df;
    margin: 0;
}

.orem-digital-buy .bundled_product:last-of-type {
    border-bottom: 0;
}

.orem-digital-buy .bundled_product_images {
    width: 64px;
    flex: 0 0 64px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

.orem-digital-buy .bundled_product_images img {
    display: block;
    width: 100%;
    height: auto;
}

.orem-digital-buy .details {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.orem-digital-buy .bundled_product_title,
.orem-digital-buy .bundled_product_title_inner {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 2px;
    line-height: 1.3;
}

.orem-digital-buy .bundled_product_price {
    font-size: 14px;
    margin: 0 0 6px;
}

.orem-digital-buy .bundled_product_price del {
    opacity: .55;
    margin-right: 6px;
}

.orem-digital-buy .details table.variations {
    margin: 4px 0 0;
}

.orem-digital-buy .details table.variations td,
.orem-digital-buy .details table.variations th {
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.4;
}

.orem-digital-buy .details table.variations label {
    font-size: 13px;
    font-weight: 600;
    color: #5f5f5f;
    margin: 0;
}

.orem-digital-buy .details select {
    width: 100%;
    max-width: 260px;
    padding: 8px 12px;
    border: 1px solid #ddd3c7;
    border-radius: 10px;
    font-size: 14px;
    background-color: #fff;
}

.orem-digital-buy .bundled_product .stock {
    font-size: 12px;
    margin: 4px 0 0;
}

/* La card ya muestra el precio total arriba — sin duplicar el total de PB. */
.orem-digital-buy .bundle_price {
    display: none;
}

.orem-digital-buy .bundled_product .quantity {
    display: none !important;
}

.orem-digital-buy form.cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* El color del CTA lo hereda cada landing (--orem-digital-cta la setea el JS
   leyendo el primer botón de la landing: vino en Pausa & Decide, verde en
   Vision Board). Fallback: verde de marca. */
.orem-digital-pdp .orem-digital-buy form.cart .single_add_to_cart_button,
.orem-digital-buy .single_add_to_cart_button {
    width: 100%;
    max-width: 440px;
    min-height: 58px;
    font-size: 19px;
    font-weight: 700 !important;
    letter-spacing: .01em;
    padding: 17px 32px;
    border-radius: 100px;
    background-color: var(--orem-digital-cta, #C46683) !important;
    color: var(--orem-digital-cta-text, #fff) !important;
    border: none;
    transition: filter .18s ease, transform .12s ease;
}

.orem-digital-pdp .orem-digital-buy form.cart .single_add_to_cart_button:hover,
.orem-digital-buy .single_add_to_cart_button:hover {
    filter: brightness(.88);
    color: var(--orem-digital-cta-text, #fff) !important;
    transform: translateY(-1px);
}

.orem-digital-buy__trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 0;
    font-size: 13px;
    color: #4a4a4a;
}

.orem-digital-buy__trust li {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.orem-digital-buy__trust li::before {
    content: "✓";
    margin-right: 6px;
    color: #325A3F;
    font-weight: 700;
}

/* ------------------------------ sticky CTA pill -------------------------
   Mismo patrón que el sticky ATC móvil del sitio (CommerceKit): píldora
   "Lo quiero · MXN $590 →" que convive con el globo de WhatsApp. */

.orem-digital-sticky {
    position: fixed;
    left: 12px;
    right: 76px; /* hueco para el globo de WhatsApp (~56px + margen) */
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 22px;
    background: var(--orem-digital-cta, #C46683);
    color: var(--orem-digital-cta-text, #fff) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    border-radius: 100px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    transform: translateY(180%);
    transition: transform .25s ease, filter .18s ease;
    white-space: nowrap;
}

.orem-digital-sticky.is-visible {
    transform: translateY(0);
}

.orem-digital-sticky:hover {
    filter: brightness(.9);
}

.orem-digital-sticky__sep {
    opacity: .7;
}

.orem-digital-sticky__price,
.orem-digital-sticky__price .woocommerce-Price-amount {
    color: inherit !important;
    font-weight: 700;
}

.orem-digital-sticky__arrow {
    margin-left: 2px;
}

@media (min-width: 769px) {
    /* Desktop: píldora compacta abajo-derecha, a la izquierda del WhatsApp. */
    .orem-digital-sticky {
        left: auto;
        right: 96px;
        bottom: 24px;
        font-size: 16px;
        padding: 16px 28px;
    }
}

/* El sticky ATC de CommerceKit no debe duplicarse con el nuestro. */
.orem-digital-pdp-page #cgkit-mobile-commercekit-sticky-atc,
.orem-digital-pdp-page .commercekit-sticky-add-to-cart {
    display: none !important;
}