.beautysociety-checkout-offers__grid {
    /* Masonry via CSS columns. Card width is locked at 384px by sizing the grid
     * container to fit exactly N × 384px + (N-1) × 11px gutter at each
     * breakpoint, then letting each card fill its column at width: 100%.
     *
     *   ≥ 1200px → 3 cols, container 1174px (3 × 384 + 2 × 11)
     *   ≥ 768px  → 2 cols, container  779px (2 × 384 + 1 × 11)
     *   <  768px → 1 col,  container  384px (single phone-width card) */
    max-width: 1174px;
    margin: 0 auto;
    column-count: 3;
    column-gap: 11px;
}

/* Compact layout for 1–4 offers: drop to 2 columns at desktop so the grid
 * never exceeds 2 rows. Smaller breakpoints already use 2/1 cols and override
 * this via the max-width media queries below (later in source order). */
.beautysociety-checkout-offers__grid--compact {
    max-width: 779px;
    column-count: 2;
}

@media (max-width: 1199px) {
    .beautysociety-checkout-offers__grid {
        max-width: 779px;
        column-count: 2;
    }
}

@media (max-width: 767px) {
    .beautysociety-checkout-offers__grid {
        max-width: 384px;
        column-count: 1;
    }
}

/* ── Card ── */

.beautysociety-checkout-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 11px 0;
    padding: 32px 28px;
    text-align: center;
    box-sizing: border-box;
    /* Critical: prevents a card from being split across two columns. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* Full-card overlay link for tiles that map to a specific product page. Sits
 * above the card content but below nothing else, so the entire tile (image,
 * text) acts as one click target while preserving native anchor behavior
 * (middle-click, open-in-new-tab, focus, etc.). */
.beautysociety-checkout-offer--clickable {
    cursor: pointer;
}

.beautysociety-checkout-offer__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    outline: none;
}

/* Image cards keep a tall, consistent footprint; text-only tiles size to content.
 * Asymmetric padding (72 top / 50 sides / 20 bottom) is THE single source of
 * spacing around the image — the well below carries no internal padding so the
 * image fills it exactly. */
.beautysociety-checkout-offer--with-image {
    min-height: 360px;
    padding: 72px 50px 72px 50px;
}

.beautysociety-checkout-offer--text-only {
    padding: 77px 70px;
}

/* ── Background color variants ──
 * The variant class is assigned at random per render by the directive (with a
 * no-adjacent-repeat guard), so the grid feels different on each load. Text
 * color is paired with each shade for legibility (cream on the darkest tan,
 * ink on the three lighter ones). */
.beautysociety-checkout-offer--variant-1 {
    background-color: #cfc4ba;
    color: #151514;
}

.beautysociety-checkout-offer--variant-2 {
    background-color: #e3d7cc;
    color: #151514;
}

.beautysociety-checkout-offer--variant-3 {
    background-color: #cfbaa8;
    color: #151514;
}

.beautysociety-checkout-offer--variant-4 {
    background-color: #b8987d;
    color: #FFFFFF;
}

/* ── Image well ──
 * The white frame around the product shot. No internal padding here — all the
 * spacing around the image comes from the tile's `--with-image` padding above.
 * The image fills the well exactly. */

.beautysociety-checkout-offer__image-well {
    margin: 0 auto 24px auto;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

/* Image is locked to 200px tall so every tile aligns across the grid.
 * `object-fit: cover` keeps the source aspect ratio (no distortion) and crops
 * to fill the element. */
.beautysociety-checkout-offer__image {
    width: 100%;
    height: 200px;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* ── Text ──
 * The single line of copy shown on every tile. Image tiles render it slightly
 * smaller (caption-like, beneath the product shot); text-only tiles render it
 * as the headline. */

.beautysociety-checkout-offer__text {
    margin: 0;
    font-family: 'FeatureDisplay-Light', Georgia, serif;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: inherit;
}

.beautysociety-checkout-offer--with-image .beautysociety-checkout-offer__text {
    font-size: 32px;
}

.beautysociety-checkout-offer--text-only .beautysociety-checkout-offer__text {
    font-size: 32px;
    line-height: 1.3;
}

/* ── Page heading ── */

.beautysociety-checkout-offers-title {
    width: 100%;
    text-align: center;
    margin-bottom: 59px;
    font-family: 'FeatureDisplay-Light', Georgia, serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    color: #151514;
    letter-spacing: 0.2px;
}

.et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    .et_pb_row {
        margin: 0px !important;
    }
}