/* ==========================================================================
   Step Offer page — Christmas Bundles design (Offers_Display::display_step_products)
   ========================================================================== */

.step-offer {
    --so-black: #0a0a0b;
    --so-cream: #f4f1ec;
    --so-grey-card: #f4f5f7;
    --so-locked-card: #f8f9fa;
    --so-grey: #8c8c8c;
    --so-green: #1fb256;
    --so-line: #b9b9b9;
    --so-theme: #5b2d67;
    --so-pattern: url("images/pattern-purple.png");
    --so-product-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

    max-width: 1195px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: var(--so-black);
}

.step-offer--yellow { --so-theme: #f2b800; --so-pattern: url("images/pattern-yellow.png"); }
.step-offer--green  { --so-theme: #5f6b2d; --so-pattern: none; }
.step-offer--orange { --so-theme: #e9471f; --so-pattern: none; }

/* The theme's index.php prints a title/thumbnail box after the content on offers */
.single-offers .site-main .post-box { display: none; }

/* Tighter gap between the breadcrumb bar and the patterned band (this file only loads on step offers) */
.single-offers .site-header { margin-bottom: 10px; }

/* Full-bleed patterned band directly under the breadcrumb */
.step-offer__banner {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 88px;
    background-color: var(--so-theme);
    background-image: var(--so-pattern);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 100%;
}

/* ---------------------------------------------------------------- Header */

.step-offer__header {
    text-align: center;
    padding: 34px 16px 0;
}

.step-offer__heading {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--so-black);
}

.step-offer__heading-top,
.step-offer__heading-main {
    display: block;
}

.step-offer__heading-highlight {
    color: var(--so-theme);
}

.step-offer__intro {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.step-offer__intro p {
    margin: 0;
}

/* ---------------------------------------------------------------- Steps grid */

.step-offer__steps {
    list-style: none;
    margin: 42px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 28px;
    row-gap: 56px;
}

.step-offer__step {
    flex: 0 0 calc((100% - 56px) / 3);
    max-width: calc((100% - 56px) / 3);
    margin: 0;
    display: flex;
    flex-direction: column;
}

.step-offer__step-header {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px 33px;
    cursor: default;
    text-align: left;
    color: var(--so-black);
}

.step-offer__step-header:focus-visible {
    outline: 2px solid var(--so-black);
    outline-offset: 2px;
}

.step-offer__step-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--so-black);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-offer__step-num {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.step-offer__step-check {
    display: none;
    width: 26px;
    height: 26px;
}

.step-offer__step-text {
    display: flex;
    flex-direction: column;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 1.15;
    text-transform: uppercase;
}

.step-offer__step-title {
    font-weight: 700;
}

.step-offer__step-subtitle {
    font-weight: 400;
}

.step-offer__step-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* "Change" — completed steps can be reopened to pick a different item */
.step-offer__step-change {
    display: none;
    align-self: center;
    margin-left: auto; /* push to the end of the step header */
    padding-left: 12px;
    padding-right: 16px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--so-black);
}

.step-offer__step.is-complete .step-offer__step-change { display: inline; }
.step-offer__step.is-complete .step-offer__step-header { cursor: pointer; }
.step-offer__step.is-complete .step-offer__step-header:hover .step-offer__step-change { text-decoration-thickness: 2px; }

.step-offer__step.is-complete.is-editing ul.products li.product { background: var(--so-cream); }

/* States */
.step-offer__step.is-complete .step-offer__step-icon { background: var(--so-green); }
.step-offer__step.is-complete .step-offer__step-num { display: none; }
.step-offer__step.is-complete .step-offer__step-check { display: block; }

.step-offer__step.is-locked .step-offer__step-icon { background: #9a9a9a; }
.step-offer__step.is-locked .step-offer__step-text { color: #9a9a9a; }

/* ---------------------------------------------------------------- Product card
   The cards are WooCommerce's own loop items (content-product.php + the offer
   variation form), restyled here to the Christmas Bundles design. */

.step-offer .step-offer__products,
.step-offer .step-offer__products ul.products {
    width: 100%;
    margin: 0;
    padding: 0;
}

.step-offer .step-offer__products ul.products {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    grid-template-columns: none !important;
    list-style: none;
}

.step-offer .step-offer__products ul.products::before,
.step-offer .step-offer__products ul.products::after { display: none; }

.step-offer .step-offer__products { flex: 1 1 auto; display: flex; }
.step-offer .step-offer__products ul.products { flex: 1 1 auto; }

.step-offer ul.products li.product {
    position: relative;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 23px 30px 38px !important;
    background: var(--so-locked-card);
    font-family: var(--so-product-font);
    transition: background-color .25s ease;
}

.step-offer__step.is-active ul.products li.product   { background: var(--so-cream); }
.step-offer__step.is-complete:not(.is-editing) ul.products li.product { background: var(--so-grey-card); }

.step-offer__step.is-locked ul.products li.product { pointer-events: none; }
.step-offer__step.is-locked ul.products li.product > * { opacity: .42; }

/* Image + title + price (theme link block) */
.step-offer li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: var(--so-black);
    text-decoration: none;
}

.step-offer li.product .archive-img-wrap {
    position: relative;
    width: 100%;
    height: 325px;
    margin: 0 0 26px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.step-offer li.product .archive-img-wrap img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 1 !important;
    transform: none !important;
}

/* Only the first product image — hide hover / secondary images */
.step-offer li.product .archive-img-wrap img + img { display: none !important; }

.step-offer li.product .img-info {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: none !important;
    padding: 0 !important;
    width: 100%;
}

.step-offer li.product .img-info h4 {
    margin: 0 auto !important;
    max-width: 290px;
    font-family: var(--so-product-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--so-black);
}

.step-offer li.product .img-info .price {
    display: block;
    margin: 6px 0 0;
    font-family: var(--so-product-font);
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.2;
    color: var(--so-black);
}

.step-offer li.product .img-info .price * { font-family: inherit !important; font-weight: inherit; font-size: inherit !important; }
.step-offer li.product .img-info .price del { opacity: .5; font-size: .8em; margin-right: 6px; }
.step-offer li.product .img-info .price ins { text-decoration: none; background: none; }

/* Duplicate title + loop extras not in the design */
.step-offer li.product .woocommerce-loop-product__title,
.step-offer li.product .woosq-btn,
.step-offer li.product .product-taxonomies,
.step-offer li.product .product__performance-in-loop,
.step-offer li.product .compare-item,
.step-offer li.product .onsale,
.step-offer li.product .variations .product-weight,
.step-offer li.product .variations select,
.step-offer li.product .variations .reset_variations,
.step-offer li.product .reset_variations_alert,
.step-offer li.product .single_variation,
.step-offer li.product .quantity {
    display: none !important;
}

/* Offer variation form */
.step-offer li.product form.cart {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 291px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

.step-offer li.product table.variations,
.step-offer li.product table.variations tbody {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
}

.step-offer li.product table.variations tr {
    display: none;
    background: none !important;
}

.step-offer li.product table.variations td,
.step-offer li.product table.variations th {
    display: block;
    padding: 0;
    border: 0;
    background: none !important;
    text-align: center;
}

.step-offer li.product table.variations th.label { display: none; }

/* Colour row: swatches always visible */
.step-offer li.product table.variations tr[class*="colour"],
.step-offer li.product table.variations tr[class*="color"] {
    display: block !important; /* something sets table-row, which shrinks the row and left-aligns the swatches */
    width: 100%;
    margin-top: 20px;
}

.step-offer li.product .variation-radios {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
}

.step-offer li.product .variation-radios input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.step-offer li.product .variation-radios label.colour {
    position: relative;
    box-sizing: border-box;
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #fff !important;
    box-shadow: 0 0 0 1.5px #4a4a4a;
    cursor: pointer;
    font-size: 0;
}

.step-offer li.product .variation-radios label.colour span { display: none; }
.step-offer li.product .variation-radios label.colour::before,
.step-offer li.product .variation-radios label.colour::after { display: none !important; }

.step-offer li.product .variation-radios label.colour.active,
.step-offer li.product .variation-radios label.colour[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--so-black);
}

/* Badge (output by Offers_Display::render_step_badge) */
.step-offer li.product .step-card__badge {
    display: inline-block;
    margin-top: 20px;
    min-width: 80px;
    padding: 7px 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

/* The offer form's own add-to-cart / size rows are not used — the WC Archive Quick Add
   section below handles colour + size selection and adding to the bag. */
.step-offer li.product table.variations tr:not([class*="colour"]):not([class*="color"]),
.step-offer li.product form.cart .single_variation_wrap,
.step-offer li.product form.cart:not(.variations_form) {
    display: none !important;
}

/* Quick Add (WC Archive Quick Add plugin) */
.step-offer li.product .quick-add-main-section {
    width: 100%;
    max-width: 291px;
    margin-top: auto !important;
    padding-top: 32px;
}

.step-offer li.product .quick-add-show-container {
    padding: 0 !important;
    opacity: 1 !important;
}

.step-offer li.product .btn-quick-add-show {
    width: 100% !important;
    min-height: 37px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important;
    border-radius: 0 !important;
    background: var(--so-black) !important;
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .2s ease;
}

.step-offer li.product .btn-quick-add-show:hover { background: #333 !important; }

.step-offer li.product .quick-add-main-section .cart-add-icon {
    width: 17px !important;
    height: 21px !important;
    margin-right: 10px !important;
}

/* Colour / size panel: keep it inside the card */
.step-offer li.product .quick-add-container {
    font-family: Montserrat, sans-serif;
}

.step-offer li.product .quick-add-container .btn-quick-add-cart {
    min-height: 37px;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif;
    font-size: 12px !important;
    text-transform: uppercase;
}

/* Locked / complete states */
.step-offer__step.is-locked li.product .btn-quick-add-show { background: #6b6b6b !important; }

.step-offer__step.is-complete:not(.is-editing) li.product .btn-quick-add-show,
.step-offer li.product.is-added .btn-quick-add-show {
    background: var(--so-green) !important;
    pointer-events: none;
}

.step-offer__step.is-complete:not(.is-editing) li.product .quick-add-container,
.step-offer li.product.is-added .quick-add-container {
    display: none !important;
}

.step-offer__step.is-complete:not(.is-editing) li.product .quick-add-show-container,
.step-offer li.product.is-added .quick-add-show-container {
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.step-offer__step.is-complete li.product form.variations_form {
    opacity: 1 !important;
}

/* ---------------------------------------------------------------- Popup */

body.step-offer-modal-open { overflow: hidden; }

.step-offer-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .2s ease;
}

.step-offer-modal[hidden] { display: none; }
.step-offer-modal.is-visible { opacity: 1; }

.step-offer-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(40, 40, 40, .62);
}

.step-offer-modal__dialog {
    position: relative;
    width: 796px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 82px 40px 50px;
    background: var(--so-cream);
    color: var(--so-black);
    text-align: center;
    transform: translateY(12px);
    transition: transform .2s ease;
    outline: none;
}

.step-offer-modal.is-visible .step-offer-modal__dialog { transform: none; }

.step-offer-modal__heading {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    text-transform: uppercase;
}

.step-offer-modal__subheading {
    margin: 4px 0 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 33px;
    line-height: 1.1;
    text-transform: uppercase;
}

.step-offer-modal__amount {
    margin: 4px 0 0;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 222px;
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.step-offer-modal__amount span { display: block; }

.step-offer-modal__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 452px;
    max-width: 100%;
    min-height: 52px;
    margin: 30px auto 0;
    padding: 8px 16px;
    background: var(--so-black);
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s ease;
}

.step-offer-modal__checkout:hover { background: #333; }
.step-offer-modal__checkout .step-offer-bag-icon { width: 24px; height: 30px; }

.step-offer-modal__continue {
    all: unset;
    display: inline-block;
    margin-top: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--so-black) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.step-offer-modal__continue:hover { text-decoration: underline !important; }

.step-offer-modal__checkout:focus-visible,
.step-offer-modal__continue:focus-visible { outline: 2px solid var(--so-black); outline-offset: 3px; }

/* ---------------------------------------------------------------- Tablet */

@media (max-width: 1100px) {
    .step-offer__step {
        flex-basis: calc((100% - 28px) / 2);
        max-width: calc((100% - 28px) / 2);
    }
}

/* ---------------------------------------------------------------- Mobile: accordion */

@media (max-width: 767px) {
    .single-offers .site-header { margin-bottom: 0; }
    .single-offers .yoast-breadcrumb-wrapper { text-align: center; }

    .step-offer { padding-bottom: 24px; }

    .step-offer__banner { height: 18px; }

    .step-offer__header { padding: 22px 0 0; }

    .step-offer__heading { font-size: 22px; line-height: 1.18; }

    .step-offer__intro { margin-top: 10px; font-size: 13px; }

    .step-offer__steps {
        display: block;
        margin-top: 26px;
    }

    .step-offer__step {
        max-width: none;
        display: block;
    }

    .step-offer__step-header {
        position: relative;
        width: 100%;
        padding: 0 16px 14px 20px;
        gap: 14px;
        cursor: pointer;
    }

    .step-offer__step[data-state="locked"] .step-offer__step-header { cursor: default; }

    /* Divider under each closed step (inset to the text, as in the design) */
    .step-offer__step-header::after {
        content: "";
        position: absolute;
        left: 72px;
        right: 26px;
        bottom: 0;
        border-bottom: 1px solid var(--so-line);
    }

    .step-offer__step + .step-offer__step .step-offer__step-header { padding-top: 14px; }
    .step-offer__step:last-child .step-offer__step-header::after,
    .step-offer__step.is-open .step-offer__step-header::after { display: none; }

    .step-offer__step-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .step-offer__step-num { font-size: 14px; }
    .step-offer__step-check { width: 22px; height: 22px; }

    .step-offer__step-text { font-size: 13px; }
    .step-offer__step-change { padding-right: 10px; } /* lines up with the divider end */

    .step-offer__step.is-locked .step-offer__step-icon { background: var(--so-black); }
    .step-offer__step.is-locked .step-offer__step-text { color: var(--so-black); }

    .step-offer__step-panel { display: none; }
    .step-offer__step.is-open .step-offer__step-panel { display: flex; }

    .step-offer ul.products li.product { padding: 18px 26px 30px !important; }

    .step-offer__step.is-locked ul.products li.product > * { opacity: 1; }
    .step-offer__step.is-locked ul.products li.product { background: var(--so-cream); }

    .step-offer li.product .archive-img-wrap { height: 300px; margin-bottom: 20px; }

    .step-offer li.product .img-info h4 { font-size: 21px; }
    .step-offer li.product .img-info .price { font-size: 21px !important; }

    /* The quick add hides the swatch form when opened; keep the swatches visible here
       (on mobile the panel sits below them rather than over them). */
    .step-offer li.product form.variations_form { opacity: 1 !important; pointer-events: auto !important; }

    .step-offer li.product .quick-add-main-section { max-width: 100%; padding-top: 26px; }
    .step-offer li.product .quick-add-container { margin-top: 10px; }
    /* The quick add plugin shrinks its dropdowns to 10px on mobile: too small to read in the
       options list, and iOS zooms the page in on focus for anything under 16px. */
    .step-offer li.product .quick-add-container .quick-add-field select {
        font-size: 16px !important;
        min-height: 44px;
        background-size: 18px !important;
        background-position: right 10px center !important;
    }

    .step-offer-modal__dialog {
        width: 100%;
        padding: 56px 24px 46px;
    }

    .step-offer-modal__heading { font-size: 21px; }
    .step-offer-modal__subheading { font-size: 15px; margin-top: 2px; }
    .step-offer-modal__amount { font-size: 104px; margin-top: 6px; }
    .step-offer-modal__checkout { width: 100%; min-height: 36px; margin-top: 30px; font-size: 13px; gap: 10px; }
    .step-offer-modal__checkout .step-offer-bag-icon { width: 18px; height: 22px; }
    .step-offer-modal__continue { font-size: 13px; margin-top: 16px; }
}