/**
 * Caterinc_AdvancedBundle
 *
 * Styled for the Caterinc/v2023 theme (caterinc.com.au).
 *
 * Notes that drove the choices below:
 *  - The theme does not set `html { font-size: 62.5% }`, so 1rem is the browser
 *    default 16px, not 10px. Everything here is therefore in px, which is also
 *    what the theme itself uses almost everywhere.
 *  - The theme ships no bundle CSS at all, so this file is the entire look of a
 *    bundle product page.
 *  - The theme has a global `button { background:#454749; color:#fff; padding:12px 20px }`
 *    rule, so every non-primary button in this module has to be reset first.
 *
 * Tokens are taken from the theme: Roboto/Inter, #BF002B brand, #FF003D price,
 * #051426 text, #75777A muted, 8px / 16px radii.
 */

.fieldset-bundle-options,
.block-bundle-summary.abp-summary {
    --abp-font: 'Roboto', Helvetica, Arial, sans-serif;
    --abp-font-ui: 'Inter', 'Roboto', Helvetica, Arial, sans-serif;

    --abp-brand: #bf002b;
    --abp-brand-dark: #92001f;
    --abp-price: #ff003d;
    --abp-tint: #ffedec;
    --abp-tint-border: #ffb3b2;

    --abp-text: #051426;
    --abp-heading: #191c1e;
    --abp-muted: #75777a;
    --abp-body: #454749;

    --abp-border: #e2e2e5;
    --abp-border-input: #d0d5dd;
    --abp-border-strong: #c5c6c9;
    --abp-bg-soft: #f7f7f8;

    --abp-radius: 8px;
    --abp-radius-lg: 16px;
    --abp-shadow-input: 0 1px 2px rgba(16, 24, 40, .05);

    font-family: var(--abp-font);
    color: var(--abp-text);
}

/* ------------------------------------------------------------------ */
/* Button reset - the theme styles every <button> as a dark pill       */
/* ------------------------------------------------------------------ */
.fieldset-bundle-options .abp-modal-close,
.fieldset-bundle-options .abp-gallery-nav,
.fieldset-bundle-options .abp-gallery-thumb,
.fieldset-bundle-options .abp-choice-card-btn,
.block-bundle-summary .abp-summary-remove {
    margin: 0;
    padding: 0;
    background-image: none;
    background-color: transparent;
    color: inherit;
    font: inherit;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    line-height: normal;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* Two-column layout: options left, summary right                     */
/*                                                                    */
/* The form is a flex row so the summary column is stretched to the   */
/* full height of the options column; the summary box inside it is   */
/* position: sticky and follows the page while the options scroll.   */
/* (Floats were used before: they collapse the form's height, which  */
/* is why neither core's sticky widget nor CSS sticky could work.)    */
/* ------------------------------------------------------------------ */
.bundle-options-container::after {
    content: "";
    display: block;
    clear: both;
}

.bundle-options-container .product-add-form {
    position: relative;
}

@media only screen and (min-width: 992px) {
    .bundle-options-container .product-add-form > form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Anything the theme adds to the form besides the two columns. */
    .bundle-options-container .product-add-form > form > * {
        flex: 0 0 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .bundle-options-container .product-add-form > form > .bundle-options-wrapper {
        flex: 0 0 62%;
        max-width: 62%;
        padding-right: 32px;
        box-sizing: border-box;
    }

    .bundle-options-container .product-add-form > form > .advance-summery-container.abp-summary-column {
        position: relative;
        flex: 0 0 38%;
        max-width: 38%;
        align-self: stretch;
        box-sizing: border-box;
    }

    .abp-summary-column .block-bundle-summary.abp-summary {
        position: -webkit-sticky;
        position: sticky;
        top: 24px;
    }

    /* JS fallback (advanced-bundle.js) when an ancestor breaks CSS sticky. */
    .abp-summary-column .block-bundle-summary.abp-summary.abp-sticky--fixed {
        position: fixed;
    }

    .abp-summary-column .block-bundle-summary.abp-summary.abp-sticky--bottom {
        position: absolute;
        top: auto;
        bottom: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Fieldset + legend                                                  */
/* ------------------------------------------------------------------ */
.fieldset-bundle-options > .legend.title {
    border: 0;
    margin: 0 0 20px;
    padding: 0;
    font-family: var(--abp-font-ui);
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: var(--abp-heading);
}

.fieldset-bundle-options > .legend.title + br {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Option section + accordion header                                  */
/* ------------------------------------------------------------------ */
.abp-option {
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius-lg);
    margin: 0 0 16px;
    background: #fff;
    overflow: hidden;
}

.abp-option-title.bundle-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 18px 24px;
    cursor: pointer;
    font-family: var(--abp-font-ui);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--abp-heading);
    user-select: none;
}

.abp-option-open > .abp-option-title.bundle-toggle {
    background: var(--abp-bg-soft);
}

.abp-option-title.bundle-toggle:focus {
    outline: 2px solid var(--abp-brand);
    outline-offset: -2px;
}

.abp-option.required > .abp-option-title .abp-option-label::after {
    content: " *";
    color: var(--abp-brand);
}

.abp-toggle-ico {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--abp-muted);
    border-bottom: 2px solid var(--abp-muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.abp-option-open > .abp-option-title .abp-toggle-ico {
    transform: rotate(-135deg);
    border-color: var(--abp-brand);
}

/* Rendered collapsed before JS boots, so there is no flash of open sections. */
.abp-control--collapsed {
    display: none;
}

.abp-control {
    border-top: 1px solid var(--abp-border);
    padding: 8px 24px 20px;
}

.abp-option:not(.abp-option-open) > .abp-control {
    border-top-color: transparent;
}

/* Per-option CMS block */
.abp-static-block {
    padding: 0 24px 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--abp-muted);
}

.abp-static-block:empty {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Item rows                                                          */
/* ------------------------------------------------------------------ */
.abp-list {
    display: block;
}

.abp-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
        "thumb choice"
        "thumb desc";
    align-items: start;
    gap: 6px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--abp-border);
}

/* Image on the right (admin configurable) */
.abp-option.abp-image-right .abp-item {
    grid-template-columns: 1fr 80px;
    grid-template-areas:
        "choice thumb"
        "desc   thumb";
}

.abp-item:last-child {
    border-bottom: 0;
}

.abp-item.abp-item--selected {
    background: var(--abp-tint);
    border-radius: var(--abp-radius);
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 -12px;
    border-bottom-color: transparent;
}

/* When an item has no thumbnail, let the text use the full width. */
.abp-item.abp-item--no-thumb,
.abp-option.abp-image-right .abp-item.abp-item--no-thumb {
    grid-template-columns: 1fr;
    grid-template-areas:
        "choice"
        "desc";
}

.abp-thumb {
    grid-area: thumb;
    width: 80px;
    height: 80px;
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius);
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abp-thumb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity .25s ease, transform .2s ease;
}

.abp-thumb-img.abp-img-loaded {
    opacity: 1;
}

.abp-thumb:hover {
    border-color: var(--abp-brand);
}

.abp-thumb:hover .abp-thumb-img.abp-img-loaded {
    transform: scale(1.06);
}

.abp-choice {
    grid-area: choice;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    /* Grid/flex children default to min-width:auto, which lets long equipment
       names push the page into horizontal scroll. */
    min-width: 0;
}

.abp-choice input[type="checkbox"],
.abp-choice input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--abp-brand);
    cursor: pointer;
    flex: 0 0 auto;
}

.abp-item-label {
    margin: 0;
    cursor: pointer;
    color: var(--abp-text);
    font-size: 14px;
    line-height: 20px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.abp-item-label .product-name {
    font-weight: 500;
}

.abp-product-link,
.abp-product-link:visited {
    color: inherit;
    text-decoration: none;
}

.abp-product-link:hover {
    color: var(--abp-brand);
    text-decoration: underline;
}

.fieldset-bundle-options .price-notice {
    color: var(--abp-muted);
    font-weight: 700;
}

.abp-item--selected .abp-item-label .product-name {
    color: var(--abp-brand);
}

/* Quick-view trigger (small magnifier next to the label) */
.abp-view-item {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--abp-border-strong);
    border-radius: 50%;
    text-decoration: none;
    flex: 0 0 auto;
    background: #fff;
}

.abp-view-item::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--abp-muted);
    border-radius: 50%;
}

.abp-view-item::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 13px;
    width: 5px;
    height: 1.5px;
    background: var(--abp-muted);
    transform: rotate(45deg);
}

.abp-view-item:hover {
    border-color: var(--abp-brand);
}

.abp-view-item:hover::before {
    border-color: var(--abp-brand);
}

.abp-view-item:hover::after {
    background: var(--abp-brand);
}

/* Per-selection quantity - mirrors the theme's own qty field */
.abp-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.abp-qty-label {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--abp-muted);
}

.fieldset-bundle-options input.abp-qty.input-text {
    width: 75px;
    height: 40px;
    padding: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .15px;
    color: var(--abp-heading);
    background: #fff;
    border: 2px solid var(--abp-muted);
    border-radius: var(--abp-radius);
    box-sizing: border-box;
}

.fieldset-bundle-options input.abp-qty.input-text:focus {
    border-color: var(--abp-brand);
    outline: none;
}

/* Per-option quantity holder (radio / dropdown) */
.abp-qty-holder {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.abp-qty-holder .label {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--abp-muted);
}

.fieldset-bundle-options .abp-qty-holder input.input-text {
    width: 75px;
    height: 40px;
    padding: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--abp-heading);
    border: 2px solid var(--abp-muted);
    border-radius: var(--abp-radius);
    background: #fff;
    box-sizing: border-box;
}

.fieldset-bundle-options .abp-qty-holder input.qty-disabled {
    border-color: var(--abp-border-input);
    color: var(--abp-muted);
    background: var(--abp-bg-soft);
}

/* Per-selection short description */
.abp-desc {
    grid-area: desc;
    font-size: 13px;
    line-height: 20px;
    color: var(--abp-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.abp-desc p {
    margin: 0 0 6px;
}

.abp-desc p:last-child {
    margin-bottom: 0;
}

/* Admin-authored HTML can contain anything: never let it break the layout. */
.abp-desc img,
.abp-modal-desc img,
.abp-static-block img {
    max-width: 100%;
    height: auto;
}

.abp-desc table,
.abp-modal-desc table,
.abp-static-block table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.abp-modal-desc,
.abp-static-block {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Dropdown / multiselect                                             */
/* ------------------------------------------------------------------ */
.fieldset-bundle-options select.abp-select,
.fieldset-bundle-options select.abp-multiselect {
    max-width: 100%;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--abp-border-input);
    border-radius: var(--abp-radius);
    box-shadow: var(--abp-shadow-input);
    font-family: var(--abp-font);
    font-size: 14px;
    color: var(--abp-text);
    background-color: #fff;
    box-sizing: border-box;
}

.fieldset-bundle-options select.abp-select:focus,
.fieldset-bundle-options select.abp-multiselect:focus {
    border-color: var(--abp-brand);
    outline: none;
}

.abp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}

.abp-choice-card {
    flex: 0 0 auto;
}

.fieldset-bundle-options .abp-choice-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 128px;
    padding: 10px;
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius);
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    font-family: var(--abp-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--abp-text);
    box-sizing: border-box;
}

.fieldset-bundle-options .abp-choice-card-btn:hover {
    border-color: var(--abp-brand);
}

.abp-choice-card--selected .abp-choice-card-btn {
    border-color: var(--abp-brand);
    background-color: var(--abp-tint);
    color: var(--abp-brand);
}

.abp-choice-card-btn .abp-thumb-img {
    max-height: 80px;
}

.abp-choice-card-name {
    word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Quick-view modal                                                   */
/* ------------------------------------------------------------------ */
.abp-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 899;
    display: none;
}

.abp-modal-backdrop.abp-modal-backdrop--open {
    display: block;
}

/* Stop the page scrolling behind an open quick view - matters most on phones,
   where the sheet covers the viewport. Height/width are deliberately left
   alone so the scroll position survives closing the modal. */
body.abp-modal-active {
    overflow: hidden;
}

.abp-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
    width: calc(100% - 40px);
    max-width: 880px;
    /* dvh keeps the sheet inside the visible area on mobile, where browser
       chrome makes 100vh taller than the viewport; older browsers ignore it
       and keep the vh value above. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: var(--abp-radius-lg);
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, .35);
}

.abp-modal.abp-modal-open {
    display: block;
}

.abp-modal-inner {
    position: relative;
    padding: 40px 32px;
}

.fieldset-bundle-options .abp-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    font-size: 28px;
    line-height: 1;
    color: var(--abp-muted);
    cursor: pointer;
}

.fieldset-bundle-options .abp-modal-close:hover {
    color: var(--abp-brand);
}

.abp-modal-body {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.abp-modal-image {
    flex: 0 0 340px;
    max-width: 340px;
}

.abp-modal-content {
    flex: 1 1 300px;
    min-width: 240px;
}

.abp-modal-title {
    margin: 0 0 14px;
    font-family: var(--abp-font-ui);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--abp-heading);
}

.abp-modal-desc {
    color: var(--abp-body);
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

.abp-modal-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--abp-brand);
    font-weight: 600;
    font-size: 14px;
}

.abp-modal-link:hover {
    color: var(--abp-brand-dark);
    text-decoration: underline;
}

.abp-modal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.abp-added.itemAdded {
    display: none;
    color: var(--abp-brand);
    font-weight: 600;
    font-size: 14px;
}

.abp-modal-actions--added .abp-added.itemAdded {
    display: inline;
}

/* ------------------------------------------------------------------ */
/* Quick-view gallery                                                 */
/* ------------------------------------------------------------------ */
.abp-gallery {
    position: relative;
}

.abp-gallery-stage {
    position: relative;
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius);
    background: #fff;
    overflow: hidden;
}

.abp-gallery-slide {
    display: none;
    width: 100%;
    height: auto;
}

.abp-gallery-slide.abp-gallery-slide--active {
    display: block;
}

.fieldset-bundle-options .abp-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid var(--abp-border-input);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: var(--abp-shadow-input);
    cursor: pointer;
}

.fieldset-bundle-options .abp-gallery-nav::before {
    content: "";
    position: absolute;
    top: 13px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--abp-muted);
    border-right: 2px solid var(--abp-muted);
}

.fieldset-bundle-options .abp-gallery-prev {
    left: 8px;
}

.fieldset-bundle-options .abp-gallery-prev::before {
    transform: rotate(-135deg);
    left: 15px;
}

.fieldset-bundle-options .abp-gallery-next {
    right: 8px;
}

.fieldset-bundle-options .abp-gallery-next::before {
    transform: rotate(45deg);
    left: 11px;
}

.fieldset-bundle-options .abp-gallery-nav:hover {
    border-color: var(--abp-brand);
}

.fieldset-bundle-options .abp-gallery-nav:hover::before {
    border-color: var(--abp-brand);
}

.abp-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.fieldset-bundle-options .abp-gallery-thumb {
    width: 56px;
    height: 56px;
    padding: 3px;
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius);
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.fieldset-bundle-options .abp-gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fieldset-bundle-options .abp-gallery-thumb.abp-gallery-thumb--active {
    border-color: var(--abp-brand);
}

/* ------------------------------------------------------------------ */
/* Summary box (native block, enhanced)                               */
/* ------------------------------------------------------------------ */
.block-bundle-summary.abp-summary {
    background: #fff;
    border: 1px solid var(--abp-border);
    border-radius: var(--abp-radius-lg);
    padding: 24px;
    font-family: var(--abp-font);
    color: var(--abp-text);
    box-sizing: border-box;
}

.block-bundle-summary.abp-summary > .title strong,
.block-bundle-summary.abp-summary .subtitle {
    display: block;
    font-family: var(--abp-font-ui);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--abp-heading);
    margin-bottom: 14px;
}

.block-bundle-summary.abp-summary .bundle-info {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--abp-border);
    margin-bottom: 16px;
}

.block-bundle-summary.abp-summary .product.name {
    display: block;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--abp-heading);
    margin-bottom: 6px;
}

.block-bundle-summary.abp-summary .stock span {
    font-size: 13px;
    color: var(--abp-muted);
}

.block-bundle-summary.abp-summary .bundle.items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.block-bundle-summary.abp-summary .bundle.items > li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--abp-border);
}

.block-bundle-summary.abp-summary .bundle.items > li:last-child {
    border-bottom: 0;
}

.block-bundle-summary.abp-summary .bundle.items > li > .label {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--abp-muted);
    margin-bottom: 4px;
}

.block-bundle-summary.abp-summary .abp-summary-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 14px;
    line-height: 20px;
}

.block-bundle-summary.abp-summary .abp-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.block-bundle-summary.abp-summary .abp-summary-price {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--abp-price);
    white-space: nowrap;
}

.block-bundle-summary.abp-summary .abp-summary-remove-wrap {
    flex: 0 0 auto;
}

.block-bundle-summary .abp-summary-remove {
    color: var(--abp-muted);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.block-bundle-summary .abp-summary-remove:hover {
    color: var(--abp-brand);
}

.block-bundle-summary.abp-summary .abp-summary-price-row {
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--abp-border);
}

.block-bundle-summary.abp-summary .price-box {
    margin: 0;
}

.block-bundle-summary.abp-summary .price-box .price-as-configured {
    margin: 0;
}

.block-bundle-summary.abp-summary .price-box .price-label {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--abp-muted);
    margin-bottom: 2px;
}

.block-bundle-summary.abp-summary .price-box .price {
    font-family: var(--abp-font-ui);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--abp-price);
}

/* ------------------------------------------------------------------ */
/* Prices with the theme's GST handling                               */
/*                                                                    */
/* The theme hides .price-excluding-tax by default and toggles the    */
/* two wrappers with its cookie-driven "Ex GST / Inc GST" switch. It  */
/* only prints the " Inc GST" / " Ex GST" suffix inside its own       */
/* product form, so the suffix and the switch pill are repeated here  */
/* for the bundle price under the title and the configured price in   */
/* the summary.                                                       */
/* ------------------------------------------------------------------ */
.abp-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.abp-price-row .price-box {
    flex: 0 1 auto;
    margin: 0;
}

.abp-price-row .price-wrapper.price-including-tax::after,
.abp-summary-line .price-wrapper.price-including-tax::after {
    content: " Inc GST";
}

.abp-price-row .price-wrapper.price-excluding-tax::after,
.abp-summary-line .price-wrapper.price-excluding-tax::after {
    content: " Ex GST";
}

.abp-price-row .price-wrapper::after {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0.15px;
    color: var(--abp-text);
}

.abp-summary-line .price-wrapper::after {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--abp-muted);
}

/* The switch pill, same look as the theme's simple-product price row. */
.abp-gst-switch {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 8px 24px;
    box-sizing: border-box;
    border: 1px solid #8f9193;
    border-radius: 24px;
    white-space: nowrap;
}

.abp-gst-switch .gstgoolheed {
    display: inline-flex;
    align-items: center;
    margin: 0;
    line-height: 24px;
}

.abp-gst-switch .gstgoolheed .gst-switch {
    display: inline-flex;
    align-items: center;
}

.abp-gst-switch .gstgoolheed .switch {
    margin: 0 8px !important;
}

/* ------------------------------------------------------------------ */
/* SKU + price under the product title                                */
/* (bundle-header.phtml; mirrors the theme's simple-product markup)   */
/* ------------------------------------------------------------------ */
.abp-product-meta {
    margin: 0 0 24px;
    font-family: var(--abp-font);
}

.abp-product-meta .abp-sku-row {
    margin-bottom: 20px;
}

.abp-product-meta .abp-sku {
    display: inline-block;
    padding: 8px 12px;
    background: #F0F0F3;
    border-radius: 24px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #454749;
}

.abp-product-meta .abp-sku .stock {
    margin: 0;
}

.abp-product-meta .price-box .price-from,
.abp-product-meta .price-box .price-to {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: baseline;
}

.abp-product-meta .price-box .price-to {
    margin-right: 0;
}

.abp-product-meta .price-box .price-label {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--abp-muted);
    margin-bottom: 2px;
}

.abp-product-meta .price-box .price-container,
.abp-product-meta .price-box .minimal-price,
.abp-product-meta .price-box .price-final_price {
    margin: 0;
}

.abp-product-meta .price-box .price {
    font-family: var(--abp-font-ui);
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--abp-price);
}

.abp-product-meta .price-box .old-price .price {
    font-size: 20px;
    line-height: 28px;
    color: var(--abp-muted);
    text-decoration: line-through;
}

/*
 * "Best Price" trigger + modal, same look as the theme's own
 * (.product-info .product-info-main .block_white_radius .product-add-form
 * #best_price / #best_price_show) - repeated here for the same reason as the
 * add-to-cart/checkout buttons above: those rules are scoped to
 * `.product-add-form`, which never wraps this block on a bundle page.
 */
.abp-product-meta #best_price {
    cursor: pointer;
    padding: 8px;
    height: 48px;
    background: #FEF3F2;
    border-radius: 32px;
    display: inline-block;
    line-height: 33px;
    margin-top: 20px;
}

.abp-product-meta #best_price .best_text {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #B42318;
    font-weight: bold;
    padding: 4px 10px;
    height: 32px;
    display: inline-block;
    background: #FFFFFF;
    border-radius: 24px;
    vertical-align: middle;
}

.abp-product-meta #best_price img {
    vertical-align: middle;
}

.abp-product-meta #best_price_show .modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.abp-product-meta #best_price_show button.close {
    color: #000 !important;
    background-color: transparent !important;
    text-shadow: 0 1px 0 #fff;
    opacity: .3;
    height: 30px;
    width: 30px;
    font-size: 28px;
    position: absolute;
    top: 8px;
    right: 16px;
    cursor: pointer;
}

.abp-product-meta #best_price_show .modal-body {
    padding: 30px 50px;
    text-align: left;
}

.abp-product-meta #best_price_show .modal-body h3 {
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
}

.abp-product-meta #best_price_show .modal-body li {
    line-height: 26px;
    display: list-item;
}

.abp-product-meta #best_price_show .modal-body ul {
    list-style: square;
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/*
 * Coupon-discount callout, same look/behaviour as the theme's own
 * ".extra-coupon-discount" (scoped here as .abp-extra-coupon-discount so it
 * cannot collide with the theme's inline copy that still ships on simple
 * product pages).
 */
.abp-extra-coupon-discount {
    position: relative;
}

.abp-extra-coupon-discount .discount-text-popup-list {
    text-align: center;
    margin-top: 20px;
    margin-bottom: -10px;
}

.abp-extra-coupon-discount .discount-text-popup-list img {
    margin-bottom: 3px;
}

.abp-extra-coupon-discount .discount-text-popup-list a.tooltip_main {
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

.abp-extra-coupon-discount .discount-text-popup-list a.tooltip_main:hover {
    text-decoration: none;
}

.abp-extra-coupon-discount .tooltiptext_box {
    right: 40px;
    bottom: 35px;
    width: 198px;
    background-color: white;
    color: black;
    box-shadow: 0 0 3px rgba(17, 24, 32, .499);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    cursor: copy;
}

.abp-extra-coupon-discount .tooltiptext_box .in_box {
    position: relative;
    padding: 9px;
}

.abp-extra-coupon-discount .in_box .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 112%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.abp-extra-coupon-discount .in_box .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.abp-extra-coupon-discount .in_box:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*
 * Same look as the theme's own simple-product buttons
 * (.product-info .product-info-main .block_white_radius .product-add-form
 * button#product-addtocart-button / #product-checkout-button) - repeated
 * here because those rules are scoped to `.product-add-form`, which for a
 * bundle page is the options form, not this summary box.
 */
.block-bundle-summary.abp-summary .box-tocart button#product-addtocart-button {
    background: #fff;
    border: 1px solid #857372;
    border-radius: 100px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.15px;
    color: #BF002B;
    width: 100%;
    height: 56px;
    margin-top: 32px;
}

.block-bundle-summary.abp-summary .box-tocart button#product-checkout-button {
    background: #BF002B;
    border: 1px solid #857372;
    border-radius: 100px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.15px;
    color: #FFFFFF;
    width: 100%;
    height: 56px;
    margin: 32px 0 0;
}

.block-bundle-summary.abp-summary .box-tocart button#product-addtocart-button .icon,
.block-bundle-summary.abp-summary .box-tocart button#product-checkout-button .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    margin-top: -5px;
}

/* ================================================================== */
/* Responsive ladder                                                  */
/* Breakpoints follow the theme's own: 555 / 777 / 992 / 1200.        */
/* ================================================================== */

/* --- Wide desktop ------------------------------------------------- */
@media only screen and (min-width: 1200px) {
    .bundle-options-container .product-add-form > form > .bundle-options-wrapper {
        flex-basis: 64%;
        max-width: 64%;
        padding-right: 40px;
    }

    .bundle-options-container .product-add-form > form > .advance-summery-container.abp-summary-column {
        flex-basis: 36%;
        max-width: 36%;
    }
}

/* --- Tablet and below: one column, summary underneath ------------- */
@media only screen and (max-width: 991px) {
    .bundle-options-container .bundle-options-wrapper,
    .bundle-options-container .advance-summery-container.abp-summary-column {
        float: none;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .bundle-options-container .advance-summery-container.abp-summary-column {
        margin-top: 24px;
    }

    /* Single column: the summary simply sits under the options. */
    .abp-summary-column .block-bundle-summary {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }

    .abp-product-meta .abp-price-row {
        gap: 12px 16px;
    }
}

/* --- Small tablet / large phone ----------------------------------- */
@media only screen and (max-width: 777px) {
    .fieldset-bundle-options > .legend.title {
        font-size: 19px;
        line-height: 26px;
        margin-bottom: 16px;
    }

    .abp-option {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .abp-option-title.bundle-toggle {
        padding: 16px;
        font-size: 15px;
        line-height: 22px;
    }

    .abp-control {
        padding: 8px 16px 16px;
    }

    .abp-static-block {
        padding: 0 16px 12px;
    }

    .abp-item,
    .abp-option.abp-image-right .abp-item {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "thumb choice"
            "thumb desc";
        gap: 6px 12px;
        padding: 14px 0;
    }

    .abp-thumb {
        width: 64px;
        height: 64px;
    }

    .abp-item.abp-item--selected {
        padding-left: 8px;
        padding-right: 8px;
        margin: 0 -8px;
    }

    .abp-qty-wrap {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    /* A horizontal rail beats a tall stack of cards on a phone. */
    .abp-choices {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
    }

    .abp-choice-card {
        scroll-snap-align: start;
    }

    .abp-modal-inner {
        padding: 32px 20px;
    }

    .abp-modal-body {
        flex-direction: column;
        gap: 20px;
    }

    .abp-modal-image {
        flex-basis: auto;
        max-width: 100%;
    }

    .abp-modal-content {
        flex-basis: auto;
        min-width: 0;
    }

    .block-bundle-summary.abp-summary {
        padding: 20px 16px;
    }
}

/* --- Phone: the quick view becomes a full-height sheet ------------ */
@media only screen and (max-width: 555px) {
    .abp-modal {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--abp-radius-lg) var(--abp-radius-lg) 0 0;
    }

    .abp-modal-inner {
        padding: 24px 16px 20px;
    }

    .fieldset-bundle-options .abp-modal-close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .abp-modal-title {
        font-size: 18px;
        line-height: 26px;
        padding-right: 40px;
    }

    .abp-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fieldset-bundle-options .abp-modal-actions .action.primary {
        width: 100%;
    }

    .abp-added.itemAdded {
        text-align: center;
    }

    .fieldset-bundle-options .abp-choice-card-btn {
        width: 116px;
    }

    .fieldset-bundle-options .abp-gallery-thumb {
        width: 48px;
        height: 48px;
    }

}

/* --- Very small phones -------------------------------------------- */
@media only screen and (max-width: 400px) {
    .abp-item,
    .abp-option.abp-image-right .abp-item {
        grid-template-columns: 52px 1fr;
        gap: 4px 10px;
    }

    .abp-thumb {
        width: 52px;
        height: 52px;
    }

    .abp-option-title.bundle-toggle {
        padding: 14px 12px;
        font-size: 14px;
    }

    .abp-control {
        padding: 6px 12px 14px;
    }

    /* The thumbnail already opens the quick view - drop the extra icon. */
    .abp-item .abp-view-item {
        display: none;
    }

    .abp-item.abp-item--no-thumb .abp-view-item {
        display: inline-block;
    }
}

/* --- Landscape phones: keep the sheet usable ---------------------- */
@media only screen and (max-width: 991px) and (max-height: 560px) and (orientation: landscape) {
    .abp-modal {
        top: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 0;
    }

    .abp-modal-body {
        flex-direction: row;
    }

    .abp-modal-image {
        flex: 0 0 40%;
        max-width: 40%;
    }
}

/* --- Touch devices: bigger hit targets ---------------------------- */
@media (hover: none) and (pointer: coarse) {
    .abp-view-item {
        width: 32px;
        height: 32px;
    }

    .abp-view-item::before {
        top: 10px;
        left: 10px;
    }

    .abp-view-item::after {
        top: 17px;
        left: 17px;
    }

    .fieldset-bundle-options .abp-gallery-nav {
        width: 44px;
        height: 44px;
    }

    .fieldset-bundle-options .abp-gallery-nav::before {
        top: 17px;
    }

    .fieldset-bundle-options .abp-gallery-prev::before {
        left: 19px;
    }

    .fieldset-bundle-options .abp-gallery-next::before {
        left: 15px;
    }

    .abp-thumb {
        cursor: pointer;
    }

    .abp-thumb:hover .abp-thumb-img.abp-img-loaded {
        transform: none;
    }
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .abp-toggle-ico,
    .abp-thumb-img {
        transition: none;
    }

    .abp-thumb:hover .abp-thumb-img.abp-img-loaded {
        transform: none;
    }
}