/* =============================================================
   DRW Public Styles — Sale Cards, Progress Bar, Volume Table
   ============================================================= */

/* ── Percentage badge ── */
.drw-sale-badge {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 10px;
    left: 10px;
    z-index: 10;
    min-width: 48px;
    padding: 5px 10px;
    border-radius: 999px;
    /* Colour driven by Configuración Global → Apariencia (theme.custom_colors.danger),
       emitted as --drw-color-danger by ShortcodeController; falls back to the
       original red when settings are unavailable. */
    background: var(--drw-color-danger, #e53935);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.32);
    pointer-events: none;
}

/* ── Wrapper — container source for @container queries ── */
.drw-sale-wrap {
    container-type: inline-size;
}

/* ── Grid ── */
.drw-sale-items-grid {
    --drw-sale-columns: 4;
    display: grid;
    grid-template-columns: repeat(var(--drw-sale-columns), minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

/* ── Card ── */
.drw-sale-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    isolation: isolate; /* scope z-index so badge never bleeds over fixed headers */
}

.drw-sale-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
    transform: translateY(-3px);
}

/* ── Link wrapper ── */
.drw-sale-item-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.drw-sale-item-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ── Image — 1:1 square ── */
.drw-sale-item-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
}

.drw-sale-item-media img,
.drw-sale-item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.30s ease;
}

.drw-sale-item:hover .drw-sale-item-media img,
.drw-sale-item:hover .drw-sale-item-image {
    transform: scale(1.05);
}

/* ── Body (category + title + price) ── */
.drw-sale-item-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 10px 6px;
    flex: 1;
    text-align: center;
}

/* ── Category label ── */
.drw-sale-item-cat {
    display: block;
    color: #6daa38;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
}

/* ── Product title ── */
.drw-sale-item-title {
    display: block;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Price ── */
.drw-sale-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.drw-sale-item-price del {
    color: #b0b0b0;
    font-size: 11px;
    font-weight: 400;
    opacity: 1;
}

.drw-sale-item-price ins {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* ── Footer ── */
.drw-sale-item-footer {
    padding: 6px 10px 12px;
}

/* ── Button — own class only, no WC .button conflict ── */
.drw-sale-item-btn {
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border-radius: 6px !important;
    border: none !important;
    outline: none !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease !important;
}

.drw-sale-item-btn:hover,
.drw-sale-item-btn:focus {
    background: #444444 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
}

.drw-sale-item-btn:active {
    background: #111111 !important;
    color: #ffffff !important;
}

/* ── Sort bar ── */
.drw-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}

.drw-results-count {
    font-size: 13px;
    color: #6b7280;
}

/* ── Controls group (category + sort + clear) ── */
.drw-sort-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.drw-clear-filters {
    display: none; /* shown via JS when a category filter is active */
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    background: #fff5f5;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.drw-clear-filters:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.drw-clear-filters:active {
    background: #fecaca;
}

.drw-cat-select,
.drw-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drw-cat-select {
    min-width: 180px;
}

.drw-sort-select {
    min-width: 220px;
}

.drw-cat-select:hover,
.drw-sort-select:hover {
    border-color: #9ca3af;
}

.drw-cat-select:focus,
.drw-sort-select:focus {
    border-color: #2a2a2a;
    box-shadow: 0 0 0 2px rgba(42, 42, 42, 0.12);
}

/* ── Loading state ── */
.drw-sale-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    width: 100%;
}

.drw-sale-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid #ececec;
    border-top-color: #2a2a2a;
    border-radius: 50%;
    animation: drw-spin 0.7s linear infinite;
}

.drw-sale-spinner-text {
    font-size: 13px;
    color: #6b7280;
}

@keyframes drw-spin {
    to { transform: rotate(360deg); }
}

/* ── Sentinel (scroll trigger) ── */
.drw-sale-sentinel {
    height: 1px;
    width: 100%;
}

/* ── Empty state ── */
.drw-sale-items-empty {
    padding: 24px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    text-align: center;
    font-size: 14px;
}

/* ── Responsive — grid via @container (uses .drw-sale-wrap as the container) ── */
@container (max-width: 767px) {
    .drw-sale-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .drw-sale-item-title {
        font-size: 10px;
    }
}

/* ── Responsive — grid via @media (fallback for browsers without @container) ── */
@media (max-width: 767px) {
    .drw-sale-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .drw-sale-item-title {
        font-size: 10px;
    }

    .drw-sale-item-body {
        padding: 8px 8px 4px;
        gap: 2px;
    }

    .drw-sale-item-footer {
        padding: 5px 8px 10px;
    }

    .drw-sale-item-btn {
        padding: 9px 10px !important;
        font-size: 11px !important;
    }
}

/* ── Responsive — sort bar on mobile ── */
@media (max-width: 639px) {
    .drw-sort-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .drw-sort-controls {
        width: 100%;
        flex-direction: column;
    }

    .drw-cat-select,
    .drw-sort-select {
        width: 100%;
        min-width: 0;
    }

    .drw-clear-filters {
        width: 100%;
        justify-content: center;
    }
}

/* ── Catalog / Shop page — badge positioning context ── */
/* WooCommerce's product thumbnail link needs position:relative so the badge
   (position:absolute) anchors to the image, not to a distant ancestor. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link,
.products li.product .woocommerce-loop-product__link {
    position: relative;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .drw-sale-item,
    .drw-sale-item-media img,
    .drw-sale-item-image,
    .drw-sale-item-btn,
    .drw-sale-spinner {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .drw-cat-select,
    .drw-sort-select {
        transition: none !important;
    }
}

/* ===== DRW Progress Bar ===== */
.drw-progress-wrap { margin: 1rem 0; }
.drw-progress-bar-outer { width: 100%; background: #e0e0e0; border-radius: 4px; height: 12px; overflow: hidden; margin-bottom: 0.5rem; }
.drw-progress-bar-inner { height: 100%; background: #4caf50; border-radius: 4px; transform-origin: left center; transition: transform 0.4s ease; }
.drw-progress-label { margin: 0; font-size: 0.9em; color: #555; }
.drw-progress-complete .drw-progress-label { color: #2e7d32; font-weight: 600; }

/* ===== DRW Classic Mini-cart Promos ===== */
/* Opt-in per promo (wp_drw_promos.show_in_minicart, default OFF — see
   PromoBadgeHelper::collect()): only promos the merchant explicitly flagged
   reach this markup at all, so every badge rendered here was deliberately
   turned on, never an incidental side-effect of "any active promo".
   Redesigned for more visual presence while staying minimal: a pill shape
   with a small icon chip (ring = "on its way", check = "applied") instead of
   a plain coloured dot, so the state reads without relying on colour alone.
   Reuses the DRW Progress Bar accent language above — the #4caf50 / #2e7d32
   success pairing, #555 muted copy — so the mini-cart badge reads as the same
   system rather than a new one. `font: inherit` keeps the active theme's
   mini-cart typography; every selector is prefixed `.drw-minicart-promo*` and
   none use `!important`, so this layers on top of the theme without
   overriding its own cart styles. */
.drw-minicart-promos {
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0.75em 0;
}
.drw-minicart-promo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 6px 14px 6px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    /* Idle-promo colours come from Configuración Global → Apariencia
       (theme.custom_colors.badge_disabled_*), emitted as CSS variables by
       ShortcodeController; the hex fallbacks are the original values. */
    background: var(--drw-badge-disabled-bg, #fafafa);
    color: var(--drw-badge-disabled-text, #555);
    font-size: 0.9em;
    line-height: 1.3;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Progressive enhancement, JS-free: fires when a fresh promos node lands in
   the DOM (each AJAX fragment refresh replaces the whole node), so the badge
   eases in instead of popping. Unsupported browsers just see it appear
   instantly — same as before this redesign, never a regression. */
@starting-style {
    .drw-minicart-promo {
        opacity: 0;
        transform: translateY(2px) scale(0.96);
    }
}
.drw-minicart-promo__mark {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    box-sizing: border-box;
    /* Idle/progress state: an open ring — "on its way", not yet unlocked. */
    border: 2px solid var(--drw-badge-disabled-text, #9e9e9e);
    opacity: 0.55;
}
.drw-minicart-promo__text {
    flex: 1 1 auto;
    min-width: 0;
}
.drw-minicart-promo.is-applied {
    /* Unlocked/applied promo → the merchant's "enabled badge" colours
       (theme.custom_colors.badge_enabled_* + success accent), plus a soft
       shadow tinted to the same green so the win state carries more weight
       than the idle/progress one. */
    border-color: var(--drw-color-success, #4caf50);
    background: var(--drw-badge-enabled-bg, #f1f8f2);
    color: var(--drw-badge-enabled-text, #2e7d32);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(76, 175, 80, 0.18);
}
.drw-minicart-promo.is-applied .drw-minicart-promo__mark {
    /* Applied state: a solid check mark instead of the idle ring — filled
       with the same colour already used for the badge text
       (--drw-badge-enabled-text) rather than the raw success accent, so a
       white check drawn on top always has enough contrast regardless of
       which accent colour the merchant picked in Apariencia. */
    border: none;
    background: var(--drw-badge-enabled-text, #2e7d32);
    opacity: 1;
}
.drw-minicart-promo.is-applied .drw-minicart-promo__mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .drw-minicart-promo {
        transition: opacity 180ms ease;
        transform: none;
    }
    @starting-style {
        .drw-minicart-promo {
            transform: none;
        }
    }
}

/* ===== DRW Mini-Cart BLOCKS Promos (bloque woocommerce/mini-cart) ===== */
/* Deliberadamente en selectores separados de .drw-minicart-promo* (mini-cart
   CLÁSICO, arriba) aunque el lenguaje visual es intencionalmente el mismo —
   forma de píldora, el mismo par de verdes de éxito, el mismo chip de icono
   (anillo = "en camino", check = "aplicado") — para que ambas superficies se
   lean como un solo sistema sin que el JS de una toque nunca el DOM de la
   otra. Inyectado por assets/js/drw-minicart-blocks.js vía MutationObserver;
   el selector exacto del drawer que ese script usa
   ('.wc-block-mini-cart__drawer') está verificado en un sitio real (ver el
   comentario de cabecera de ese archivo). */
.drw-minicart-blocks-promos {
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 0.75em;
}
.drw-minicart-blocks-promo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 6px 14px 6px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    /* Same theme variables as the classic mini-cart above, so both surfaces
       track Configuración Global → Apariencia identically. */
    background: var(--drw-badge-disabled-bg, #fafafa);
    color: var(--drw-badge-disabled-text, #555);
    font-size: 0.9em;
    line-height: 1.3;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.drw-minicart-blocks-promo[data-drw-entering] {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
}
.drw-minicart-blocks-promo__mark {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    box-sizing: border-box;
    border: 2px solid var(--drw-badge-disabled-text, #9e9e9e);
    opacity: 0.55;
}
.drw-minicart-blocks-promo__text {
    flex: 1 1 auto;
    min-width: 0;
}
.drw-minicart-blocks-promo.is-applied {
    border-color: var(--drw-color-success, #4caf50);
    background: var(--drw-badge-enabled-bg, #f1f8f2);
    color: var(--drw-badge-enabled-text, #2e7d32);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(76, 175, 80, 0.18);
}
.drw-minicart-blocks-promo.is-applied .drw-minicart-blocks-promo__mark {
    border: none;
    background: var(--drw-badge-enabled-text, #2e7d32);
    opacity: 1;
}
.drw-minicart-blocks-promo.is-applied .drw-minicart-blocks-promo__mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .drw-minicart-blocks-promo {
        transition: opacity 180ms ease;
    }
    .drw-minicart-blocks-promo[data-drw-entering] {
        transform: none;
    }
}

/* ===== DRW Featured Promos ([drw_featured_promos]) ===== */
/* Reuses the .drw-sale-item card language above — #ffffff surface, #ececec
   hairline border, 8px radius, the 0 1px 4px / 0 8px 24px shadow pair, the same
   0.22s hover lift, #1a1a1a titles and #6b7280 muted copy — so both shortcodes
   read as one system on the same page. The per-card type accent rides on a local
   --drw-featured-color custom property (same approach as the grid's
   --drw-sale-columns and the admin's --drw-tile-color / --drw-badge-bg). */
.drw-featured-promos {
    container-type: inline-size;
}

.drw-featured-promos-grid {
    --drw-featured-columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--drw-featured-columns), minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

/* ── Card ── */
.drw-featured-promo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .drw-featured-promo:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
        transform: translateY(-3px);
    }
}

/* ── Head (type icon + name + type label) ── */
.drw-featured-promo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.drw-featured-promo-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #f4f4f4; /* fallback for no color-mix support */
    background: color-mix(in srgb, var(--drw-featured-color, #5b7b41) 14%, #ffffff);
    color: var(--drw-featured-color, #5b7b41);
}

.drw-featured-promo-icon .dashicons {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
}

.drw-featured-promo-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.drw-featured-promo-name {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.drw-featured-promo-type {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* ── Value badge — mirrors the admin .drw-value-badge color-mix pill ── */
.drw-featured-promo-value {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f4f4; /* fallback for no color-mix support */
    background: color-mix(in srgb, var(--drw-featured-color, #5b7b41) 12%, #ffffff);
    color: var(--drw-featured-color, #5b7b41);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.drw-featured-promo-value .woocommerce-Price-amount {
    color: inherit;
}

.drw-featured-promo-minus {
    margin-right: 1px;
}

/* ── Footer (copy button or "Automática") ── */
.drw-featured-promo-footer {
    margin-top: auto;
}

.drw-featured-promo-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px dashed #cfcfcf;
    border-radius: 6px;
    background: #fafafa;
    color: #2a2a2a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: transform 160ms ease-out, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .drw-featured-promo-copy:hover {
        background: #f0f0f0;
        border-color: #b8b8b8;
    }
}

.drw-featured-promo-copy:active {
    transform: scale(0.97);
}

.drw-featured-promo-copy:focus-visible {
    outline: 2px solid #2a2a2a;
    outline-offset: 2px;
}

.drw-featured-promo-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.drw-featured-promo-copy .dashicons {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    font-size: 15px;
    line-height: 15px;
    color: #8b8b8b;
}

/* Copied confirmation — reuses the #4caf50 / #2e7d32 success pair used by the
   progress bar and mini-cart promos so success reads the same across surfaces. */
.drw-featured-promo-copy.is-copied {
    border-style: solid;
    /* "¡Copiado!" success state shares the merchant's storefront badge colours
       (Configuración Global → Apariencia) with the mini-cart, so success reads
       the same across surfaces. Fallbacks keep the original green. */
    border-color: var(--drw-color-success, #4caf50);
    background: var(--drw-badge-enabled-bg, #f1f8f2);
    color: var(--drw-badge-enabled-text, #2e7d32);
}

.drw-featured-promo-copy.is-copied .dashicons {
    color: var(--drw-badge-enabled-text, #2e7d32);
}

.drw-featured-promo-auto {
    display: inline-block;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
}

/* ── Empty state — matches .drw-sale-items-empty ── */
.drw-featured-promos-empty {
    padding: 24px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    text-align: center;
    font-size: 14px;
}

/* ── Responsive — @container (uses .drw-featured-promos as the container) ── */
@container (max-width: 767px) {
    .drw-featured-promos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
}

@container (max-width: 479px) {
    .drw-featured-promos-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Responsive — @media fallback for browsers without @container ── */
@media (max-width: 767px) {
    .drw-featured-promos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
}

@media (max-width: 479px) {
    .drw-featured-promos-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .drw-featured-promo,
    .drw-featured-promo-copy {
        transition: none !important;
        transform: none !important;
    }
}

/* ===== DRW Volume Pricing Table ===== */
.drw-volume-pricing { margin: 1.5rem 0; }
.drw-volume-title { margin-bottom: 0.5rem; font-size: 1rem; }
.drw-volume-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.drw-volume-table th, .drw-volume-table td { padding: 0.5rem 0.75rem; border: 1px solid #ddd; text-align: left; }
.drw-volume-table thead th { background: #f5f5f5; font-weight: 600; }
.drw-volume-table tbody tr:nth-child(even) { background: #fafafa; }

/* =============================================================
   DRW Popup — captura de email con cupón de bienvenida
   (assets/js/drw-popup.js). Reproduce el lenguaje visual del
   overlay/modal admin (.drw-overlay/.drw-modal/.drw-modal-close en
   admin-promos.css: fondo oscuro con blur, tarjeta blanca, animación de
   entrada scale+opacity) en reglas propias, prefijadas .drw-popup-*, para
   no acoplar el storefront a clases pensadas para el admin de WordPress.
   Layout de dos columnas (imagen | formulario) al estilo de la referencia
   de Seed: badge de descuento sobre la imagen, cierre superpuesto, texto
   legal debajo del botón.
   Deliberadamente SIN font-family propio (a diferencia de admin-promos.css,
   que fija su propia pila tipográfica): el popup vive en el storefront del
   comerciante y debe heredar la tipografía del tema activo, igual que el
   resto de este archivo (.drw-featured-promo-name, .drw-sale-item-title,
   etc. tampoco fijan font-family) — así se siente nativo de la tienda en
   vez de una superposición ajena.
   ============================================================= */

.drw-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(22, 39, 29, 0.5);
    backdrop-filter: blur(2px);
    animation: drwPopupOverlayIn 0.18s ease;
}

@keyframes drwPopupOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drw-popup-modal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    width: min(880px, 96vw);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(22, 39, 29, 0.28);
    animation: drwPopupModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drwPopupModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .drw-popup-overlay,
    .drw-popup-modal {
        animation: none;
    }
}

/* ── Cierre — superpuesto a ambas columnas, siempre visible sobre la
   imagen (fondo translúcido claro) o el panel blanco. ── */
.drw-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* padding:0 is load-bearing, not cosmetic: without it the storefront
       theme's default <button> padding (confirmed live on Storefront:
       ~10px/23px) is the only padding rule that applies, eating the
       entire 32px box and leaving the flex-centered 16px X icon zero
       width to lay out in. Every custom button below sets its own
       padding for the same reason. */
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #16271d;
    cursor: pointer;
    transition: transform 160ms ease-out, background 0.15s ease;
}

.drw-popup-close svg {
    flex-shrink: 0;
}

.drw-popup-close:hover {
    background: #ffffff;
}

.drw-popup-close:active {
    transform: scale(0.92);
}

.drw-popup-close:focus-visible {
    outline: 2px solid var(--drw-color-primary, #2a2a2a);
    outline-offset: 2px;
}

/* ── Columna de imagen ── */
.drw-popup-media {
    position: relative;
    min-height: 220px;
    background: #f2f1ec;
}

.drw-popup-media--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degradado con los colores de marca del comerciante (Configuración
       Global → Apariencia); sirve de ilustración cuando no hay imagen
       subida todavía, en vez de dejar la columna vacía. */
    background: linear-gradient(
        150deg,
        var(--drw-color-primary, #5b7b41),
        var(--drw-color-secondary, #33502a)
    );
    color: rgba(255, 255, 255, 0.55);
}

.drw-popup-media-art svg {
    display: block;
}

.drw-popup-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.drw-popup-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--drw-color-danger, #e53935);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.32);
}

/* ── Columna de formulario ── */
.drw-popup-panel {
    display: flex;
    min-width: 0;
}

.drw-popup-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 40px 36px;
    margin: auto 0;
}

.drw-popup-headline {
    margin: 0;
    color: #1a1a1a;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
}

.drw-popup-body {
    margin: 0;
    color: #55554f;
    font-size: 14.5px;
    line-height: 1.55;
}

.drw-popup-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.drw-popup-field {
    display: flex;
    flex-direction: column;
}

.drw-popup-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.drw-popup-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drw-popup-input::placeholder {
    color: #9ca3af;
}

.drw-popup-input:focus {
    border-color: var(--drw-color-primary, #2a2a2a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--drw-color-primary, #2a2a2a) 18%, transparent);
}

/* Honeypot — invisible para una persona real (nunca `display:none` puro:
   algunos lectores de bots ignoran ese caso y a la vez algunos filtros de
   accesibilidad marcan como sospechoso un campo totalmente oculto; esta
   combinación lo saca del flujo visual y del tabulador sin depender solo de
   una propiedad). */
.drw-popup-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
}

.drw-popup-error {
    margin: 0;
    min-height: 0;
    color: var(--drw-color-danger, #dc2626);
    font-size: 12.5px;
    line-height: 1.4;
    display: none;
}

.drw-popup-error.is-visible {
    display: block;
}

.drw-popup-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: var(--drw-color-primary, #2a2a2a);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease-out, background 0.15s ease, opacity 0.15s ease;
}

.drw-popup-submit:hover {
    background: color-mix(in srgb, var(--drw-color-primary, #2a2a2a) 85%, #000000);
}

.drw-popup-submit:active {
    transform: scale(0.97);
}

.drw-popup-submit:disabled {
    cursor: default;
    opacity: 0.72;
}

.drw-popup-submit:focus-visible {
    outline: 2px solid var(--drw-color-primary, #2a2a2a);
    outline-offset: 2px;
}

.drw-popup-disclaimer {
    margin: 4px 0 0;
    color: #9ca3af;
    font-size: 11.5px;
    line-height: 1.5;
}

/* ── Panel de revelado (tras un envío correcto) ── */
.drw-popup-reveal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--drw-color-success, #10b981) 14%, #ffffff);
    color: var(--drw-color-success, #10b981);
}

.drw-popup-code-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px dashed #cfcfcf;
    border-radius: 10px;
    background: #fafafa;
}

.drw-popup-code-text {
    font-family: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drw-popup-copy-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #2a2a2a;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease-out, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.drw-popup-copy-btn:hover {
    background: #f0f0f0;
    border-color: #b8b8b8;
}

.drw-popup-copy-btn:active {
    transform: scale(0.96);
}

.drw-popup-copy-btn.is-copied {
    border-color: var(--drw-color-success, #10b981);
    background: color-mix(in srgb, var(--drw-color-success, #10b981) 12%, #ffffff);
    color: var(--drw-color-success, #10b981);
}

.drw-popup-done {
    margin-top: 4px;
    background: #f4f4f4;
    color: #1a1a1a;
}

.drw-popup-done:hover {
    background: #e9e9e9;
}

/* ── Responsive — apilado en móvil, imagen recortada arriba ── */
@media (max-width: 680px) {
    .drw-popup-modal {
        grid-template-columns: 1fr;
        width: min(420px, 96vw);
    }

    .drw-popup-media {
        min-height: 150px;
        max-height: 150px;
    }

    .drw-popup-panel-inner {
        padding: 30px 22px 26px;
    }

    .drw-popup-headline {
        font-size: 21px;
    }
}

@media (max-width: 380px) {
    .drw-popup-panel-inner {
        padding: 26px 18px 22px;
    }
}