/* Benefit page - base layout (shared across all benefit types) */

.benefit-page {
    padding-top: 0;
}

.benefit-container {
    z-index: 2;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    gap: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 992px) {
    /* Top sets body{padding-top:185px} on mobile but header is only ~135px tall */
    body:has(#sales-landing .benefit-page) {
        padding-top: 135px;
    }
}

@media (max-width: 768px) {
    .benefit-page {
        padding: 0 16px;
        background: #fff;
    }

    /* Neutralize Egged/Couponia Bootstrap .container side padding + max-width on
       mobile only — .benefit-page provides its own 16px frame above, so the
       Bootstrap container would otherwise double-pad. On desktop the Bootstrap
       max-width must stay intact so breadcrumbs and content align with the
       constrained content column (was breaking on egged desktop). */
    .container:has(> .benefit-page) {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    .benefit-container {
        width: 100%;
    }

    .benefit-page .breadcumb h4 {
        line-height: 1.5;
        padding: 8px 0;
    }
}

/* Top template uses its own .breadcumb element — zero h4 browser margins */
.benefit-page .breadcumb {
    margin-bottom: 0;
}

.benefit-page .breadcumb h4 {
    margin: 0;
}

/* Schema offers div is an empty flex item — remove it from the flex flow */
#benefit_content > div[itemprop="offers"] {
    display: contents;
}

/* Couponia: gap-small is inside the wrapper, directly before .benefit-page */
.gap-small + .benefit-page {
    margin-top: -15px;
}

.gap-small + .benefit-page .benefit-container {
    gap: 10px;
}

/* Egged: gap-small is outside #container — pull container up by both margins (15 top + 15 bottom) */
#container:has(> .benefit-page) {
    margin-top: -30px;
}

#benefit_content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
}

/* Hero card with title, brand logo, gallery */
.product-hero-card {
    /* Desktop width cap for the hero image (single-pic and gallery share it).
       Aspect-ratio stays 950/540, so lowering this shrinks height too — tune
       here to make the hero physically smaller and keep the CTA above the fold. */
    --hero-max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Extra padding-bottom (32px vs 20px on other sides) reserves explicit room
       for the hero image's drop shadow inside the card, no matter what the
       parent overflow situation is. Keeps the shadow visible without needing
       overflow:visible gymnastics on the card. */
    padding: 20px 20px 32px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
}

@media (max-width: 768px) {
    .product-hero-card {
        width: 100%;
        padding: 16px 16px 28px;
    }
}

.product-hero-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

@media (max-width: 768px) {
    .product-hero-header {
        flex-direction: column-reverse;
        gap: 12px;
        align-items: center;
    }
}

.product-hero-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    color: #0B0427;
    text-align: right;
    margin: 0;
}

@media (max-width: 768px) {
    .product-hero-title {
        font-size: 20px;
        line-height: 1.3;
        text-align: center;
    }
}

.product-hero-logo {
    width: 144px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Fixed dimensions (not height:auto) define a consistent logo area on
       mobile — keeps tall/square source logos from blowing up the header
       vertically. object-fit: contain (inherited from base) shrinks square
       logos to ~42×42 centered inside the 132×42 box; wide logos fit the
       full 132px width. */
    .product-hero-logo {
        width: 132px;
        height: 42px;
    }
}

.product-hero-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Strip anchors to the active swiper slide or the single-image wrapper. */
.product-hero-single-wrap {
    position: relative;
}

.promotions-gallery .swiper-slide {
    position: relative;
}

/* Hide on non-active slides; Swiper adds .swiper-slide-active to the centered one. */
.promotions-gallery .swiper-slide .sale-strip {
    display: none;
}

.promotions-gallery .swiper-slide.swiper-slide-active .sale-strip,
.product-hero-single-wrap .sale-strip {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 35%;
    z-index: 2;
    pointer-events: none;
}

/* Hero image — single-pic branch. 950/540 aspect (matches the source images
   the design team produces) is applied with aspect-ratio so both desktop and
   mobile resolve to the same shape; width is fluid up to the --hero-max-width cap. */
.product-hero-image {
    width: 100%;
    max-width: var(--hero-max-width, 640px);
    aspect-ratio: 950/540;
    object-fit: cover;
    border-radius: 8px;
    /* Subtle drop shadow — kept under ~16px effective extent (4px offset + 12px
       blur) so it always renders inside the card's 20px padding without needing
       any overflow:visible gymnastics on ancestors. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Main content card - shared by all type-specific cards */
.benefit-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .benefit-card {
        width: 100%;
        padding: 16px;
    }
}

/* Section helpers */
.section-divider {
    width: 100%;
    height: 1.5px;
    background: #E1E1E1;
    border: none;
    margin: 0;
}

/* Framing dividers for the light buy-boxes (E/G) — one at the top and one at
   the bottom of the right column on desktop, so the centered CTA/dates read as
   a deliberately framed block instead of floating in empty space. Brand color +
   drop shadow are layered on in _benefit_dynamic_styles.php. Desktop only — on
   mobile the split layout collapses and the "column" no longer exists. */
.buy-box-divider {
    width: 90%;
    height: 2px;
    background: #E1E1E1;
    border: none;
    border-radius: 2px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .buy-box-divider {
        display: none;
    }
}

.section-title {
    font-size: 29px;
    font-weight: 600;
    line-height: 34px;
    color: #000;
    text-align: right;
    margin: 0;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 22px;
        line-height: 28px;
    }
}

/* Product details section */
.product-details-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
}

.product-description {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #181818;
    text-align: right;
    width: 100%;
}

.product-description p {
    margin: 0;
}

@media (max-width: 768px) {
    .product-description {
        font-size: 16px;
    }
}

/* Expiry section (single badge) */
.expiry-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
    /* Sit tighter under the CTA than the card's 20px section gap. */
    margin-top: -10px;
}

.expiry-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, #FAFBFD 0%, #EDEFF4 100%);
    border-radius: 8px;
    width: 100%;
    min-height: 39px;
}

.expiry-text {
    font-size: 19px;
    font-weight: 600;
    line-height: 30px;
    color: #000;
    text-align: center;
}

@media (max-width: 768px) {
    .expiry-badge {
        padding: 12px 16px;
    }

    .expiry-text {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* Validity badges row (two badges side by side) */
.validity-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
    /* Sit tighter under the CTA than the card's 20px section gap. */
    margin-top: -10px;
}

.validity-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #FAFBFD 0%, #EDEFF4 100%);
    border-radius: 8px;
    flex: 1;
    min-height: 39px;
}

.validity-badge span {
    font-size: 17px;
    font-weight: 600;
    line-height: 28px;
    color: #000;
    text-align: center;
}

@media (max-width: 768px) {
    .validity-badge span {
        font-size: 14px;
    }
}

/* Shared bottom links row (rendered by _bottom_links.php) — centered, no chevron */
.benefit-bottom-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.benefit-bottom-link {
    font-size: 15px;
    font-weight: 500;
    color: #0B0427;
    text-decoration: underline;
}

.benefit-bottom-link:hover {
    font-weight: 600;
    text-decoration: underline;
}

.benefit-bottom-link-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #C4C4C4;
}

/* Bottom links row (3 link items separated by dots) */
.bottom-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.bottom-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #0B0427;
    text-decoration: none;
}

.bottom-link:hover {
    text-decoration: underline;
}

.bottom-link svg {
    transform: scaleX(-1); /* flip for RTL */
}

.link-separator {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C4C4C4;
}

/* Status banners (out of stock, eligibility used, in cart) — flat notice surface.
   Amber = "heads up / unavailable" (not alarmist red), kept restrained by confining
   the strong amber to a thin RTL-leading-edge accent bar over a soft fill. Shares
   the session card vocabulary: soft tint, single colored edge, 0 3px 10px shadow. */
.benefit-status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 9px 18px;
    background: #FDF7EC;
    border: 1px solid #F2E6CE;
    border-right: 4px solid #E0A52E;
    border-radius: 10px;
    color: #7A4E0A;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(11, 4, 39, 0.1);
}

/* When several banners stack, sit them tight instead of the card's 20px gap. */
.benefit-status-banner + .benefit-status-banner {
    margin-top: -12px;
}

/* In-cart variant keeps the green identity (positive state) with the same flat
   surface + accent bar so both status types share the visual vocabulary. */
.benefit-status-banner.in-cart {
    background: #EAF7EE;
    border: 1px solid #CBE8D4;
    border-right: 4px solid #3FA864;
    color: #14532D;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.benefit-status-banner.in-cart .dark-button {
    display: inline-block;
    padding: 8px 16px;
    background: #2020B3;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

@media (max-width: 768px) {
    .benefit-status-banner {
        min-height: 40px;
        font-size: 15px;
    }
}

/* Generic benefit-link button (used by A/D simple branches) — mirrors .submit-button from login.css */
.benefit-link {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    border: 2px solid #fff;
    background: #2020B3;
    box-shadow: 0 2.286px 7.429px 0 rgba(0, 0, 0, 0.16);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 34.286px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.benefit-link:visited {
    color: #fff;
}

.benefit-link:hover {
    opacity: 0.9;
    color: #fff;
}

/* Button text configured without a link: keep the button styling but make it
   inert — no hover, no cursor change, no click. */
.benefit-link--static {
    pointer-events: none;
}

@media (max-width: 768px) {
    .benefit-link {
        font-size: 15px;
        line-height: 1.4;
    }
}

/* ===========================================================================
   Two-column desktop layout (migrated types). The top row splits into a
   gallery card and a buy-box card so price + CTA are visible without scrolling;
   a full-width details card follows below. Mobile keeps the single-column
   stack, so the whole grid lives behind the desktop media query.
   =========================================================================== */

/* Header band (title + logo) — a sibling of the two cards. Mirrors the legacy
   .product-hero-header: row on desktop (title at the RTL start, logo at the
   end), logo-over-title on mobile so the pre-split mobile order is preserved. */
.benefit-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

@media (max-width: 768px) {
    .benefit-header {
        flex-direction: column-reverse;
        gap: 12px;
        align-items: center;
    }
}

/* Hero group — wraps header + gallery. On mobile it's the hero card (one white
   surface, like the legacy layout); on desktop it dissolves (display:contents)
   so the header and gallery become direct grid items of the top card. */
.benefit-hero-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 28px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
}

@media (min-width: 769px) {
    .benefit-hero-group {
        display: contents;
    }
}

/* Gallery — just centers the image; the surrounding card (hero group on mobile,
   top card on desktop) provides the surface, padding and shadow. */
.benefit-gallery-card {
    --hero-max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Wrapper around header + gallery card + buy-box card: single-column stack by
   default, two-column grid on desktop. */
.benefit-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* On mobile the wrapper is purely structural — the inner cards are the visible
   surfaces. Strip all card chrome that .shadow or template CSS may add. */
@media (max-width: 768px) {
    .benefit-top.is-split {
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}

@media (min-width: 769px) {
    /* The wrapper itself is the single card (it carries .shadow); the gallery
       and buy-box become flat regions inside it (flatten rule below). */
    .benefit-top.is-split {
        display: grid;
        /* 45% buy-box / 55% hero. In RTL the first column/area is the rightmost,
           so col 1 (45fr) is the buy-box on the right and col 2 (55fr) is the
           gallery on the left. */
        grid-template-columns: 45fr 55fr;
        grid-template-areas:
            "header  header"
            "buybox  gallery";
        gap: 20px 28px;
        align-items: start;
        background: #fff;
        border-radius: 8px;
        padding: 24px;
    }

    .benefit-top.is-split .benefit-header {
        grid-area: header;
    }

    /* The buy-box (with the expiry dates as its last rows) usually makes the
       right column taller, so center the gallery in its cell — leftover space
       splits evenly above and below the image. */
    .benefit-top.is-split .benefit-gallery-card {
        grid-area: gallery;
        align-self: center;
        /* Raise the image cap so it fills the wider hero column. A finite value
           (not `none`) is required — an unbounded max-width breaks Swiper's slide
           sizing and the gallery renders blank. 620px ≥ the 55% column width. */
        --hero-max-width: 620px;
    }

    .benefit-top.is-split .buy-box-card {
        grid-area: buybox;
    }

    /* Flatten the inner cards — the wrapper is the only card surface now. The
       inner cards carry the .shadow class (needed on mobile), and that utility
       sets its box-shadow with !important, so the override must match it. */
    .benefit-top.is-split .benefit-gallery-card,
    .benefit-top.is-split .buy-box-card {
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    /* In the half-width buy-box, stack the price group and points box (like the
       mobile layout) instead of squeezing them side by side. */
    .benefit-top.is-split .buy-box-card .pricing-group,
    .benefit-top.is-split .buy-box-card .points-card {
        flex: 1 1 100%;
    }

    /* ---- Buy-box scale-down -----------------------------------------------
       The buy-box sits in the narrow 40% column, so step its prices, labels,
       buttons, dates and points box down to keep them in proportion. */
    .benefit-top.is-split .buy-box-card .pricing-value {
        font-size: 24px;
    }

    .benefit-top.is-split .buy-box-card .pricing-label {
        font-size: 12px;
    }

    .benefit-top.is-split .buy-box-card .pricing-savings {
        font-size: 10px;
        padding: 2px 8px;
    }

    .benefit-top.is-split .buy-box-card .points-range,
    .benefit-top.is-split .buy-box-card .points-badge {
        font-size: 12px;
    }

    .benefit-top.is-split .buy-box-card .purchase-button,
    .benefit-top.is-split .buy-box-card .gift-button {
        height: 40px;
        padding: 8px 16px;
        font-size: 15px;
    }

    /* Wide purchase CTA — let the actions row span the buy-box and the purchase
       button grow to fill it (beside the qty stepper / gift button). */
    .benefit-top.is-split .buy-box-card .purchase-actions {
        flex: 1 1 100%;
    }

    .benefit-top.is-split .buy-box-card .purchase-button {
        flex: 1;
        min-width: 110px;
    }

    .benefit-top.is-split .buy-box-card .gift-button i {
        font-size: 15px;
    }

    .benefit-top.is-split .buy-box-card .quantity-selector {
        height: 36px;
    }

    .benefit-top.is-split .buy-box-card .quantity-value {
        font-size: 15px;
        min-width: 36px;
    }

    .benefit-top.is-split .buy-box-card .purchase-notes p {
        font-size: 13px;
        line-height: 1.35;
    }

    .benefit-top.is-split .buy-box-card .benefit-status-banner {
        font-size: 14px;
        min-height: 36px;
    }

    .benefit-top.is-split .buy-box-card .validity-badge span {
        font-size: 14px;
    }

    /* Points box — tighten padding, gap, slider and badge so it stays compact. */
    .benefit-top.is-split .buy-box-card .points-card {
        padding: 8px 12px;
        gap: 4px;
    }

    .benefit-top.is-split .buy-box-card .points-slider {
        height: 5px;
    }

    .benefit-top.is-split .buy-box-card .points-slider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }

    .benefit-top.is-split .buy-box-card .points-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
    }

    .benefit-top.is-split .buy-box-card .points-badge {
        padding: 3px 10px;
    }

    /* Light buy-boxes (E coupon, G gift) hold just a CTA (+ value/dates) beside a
       tall hero. Center the column, give the lone CTA real height, and stack the
       date badges full-width so the column reads as a deliberate block rather
       than a thin action stranded in white. C/F keep their top-aligned layout. */
    .benefit-top.is-split .buy-box-card--light {
        align-self: stretch;
    }

    /* Space the framing dividers evenly within the stretched column: auto top &
       bottom margins on BOTH dividers create four equal vertical gaps, so each
       line floats mid-way between the column edge and the centered CTA/dates
       rather than hugging the very top/bottom. */
    .benefit-top.is-split .buy-box-card--light .buy-box-divider {
        margin-top: auto;
        margin-bottom: auto;
    }

    .benefit-top.is-split .buy-box-card--light .purchase-button {
        height: 64px;
        font-size: 18px;
    }

    /* E's two date badges sit half-and-half by default; stack them one per line
       to fill the column (G's single expiry badge is already full-width). */
    .benefit-top.is-split .buy-box-card--light .validity-badges {
        flex-direction: column;
        align-items: stretch;
    }
}

/* On mobile the wrapper is a transparent stack — the inner cards keep their own
   .shadow, so the wrapper's would just float around the group. Drop it. */
@media (max-width: 768px) {
    .benefit-top.is-split.shadow {
        box-shadow: none;
    }
}

/* Details card — hide a leading divider when the card opens straight into
   tochen/links (each section block leads with its own divider). */
.benefit-details-card > hr.section-divider:first-child {
    display: none;
}

/* Options (Type F) — variant + shipping pickers. Full-width card on desktop,
   moved inline into the buy-box on mobile (JS). Whichever slot isn't holding
   them collapses so it leaves no phantom gap. */
.benefit-options-slot-desktop:empty,
.benefit-options-slot-mobile:empty {
    display: none;
}

/* Desktop: the standalone options card opens with the (hidden) alert, so hide
   the first section's own leading divider to avoid a stray top line. On mobile
   the options sit inside the buy-box, where that divider usefully separates them
   from the pricing above — so keep it there. */
@media (min-width: 769px) {
    .benefit-options > .form-alert + hr.section-divider {
        display: none;
    }
}

/* No divider between the variant picker and shipping — their headings already
   separate them (the hairline read as a stray partial line). Space them instead. */
.benefit-options .customization-section + .delivery-section {
    margin-top: 24px;
}

/* ===========================================================================
   Centered content-width column (Types A & D). These are informational offers,
   not transactions — no buy-box to anchor a second column. So the whole content
   sits in one centered column at a comfortable width: the hero is centered with
   side breathing room, and title/description/grid/expiry/links flow down. The
   child deal grid sits inside the column (3-across, via its own 3-col rule).
   No-op on mobile (the screen is already narrower).
   =========================================================================== */
#benefit_content.is-centered {
    max-width: 840px;
    /* #benefit_content is a flex item of .benefit-container (a flex column);
       auto cross-margins alone make it shrink to content, so set width:100% to
       fill up to the cap, then center. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Hero sits centered and a touch smaller than the column, so it has breathing
   room on the sides. */
#benefit_content.is-centered .product-hero-card {
    --hero-max-width: 560px;
}

/* Gallery peek (A/D): by default the swiper container is capped at the hero
   width and clips the side previews at 560px, leaving white gaps to the card
   edge. Here we let the container fill the card so the peek slides read all the
   way to the edge, while pinning the active slide to the hero width — the extra
   room becomes peek, not a bigger image. Desktop only; mobile galleries stay
   full-width edge-to-edge. */
@media (min-width: 769px) {
    #benefit_content.is-centered .promotions-gallery-container {
        max-width: none;
    }

    #benefit_content.is-centered .promotions-gallery .swiper-slide {
        max-width: var(--hero-max-width, 560px);
    }
}

/* Child deal grid: fixed-width cards, centered and wrapping, so the layout adapts
   to the child count — 1 child = one centered card, 2 = two centered, etc., with
   no stretched cards or empty slots. (1-col on mobile via the grid's own rule.) */
@media (min-width: 769px) {
    #benefit_content.is-centered .voucher-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    #benefit_content.is-centered .voucher-card {
        flex: 0 1 250px;
        min-width: 0;
    }
}