.product-packages {
    margin: 16px 0 20px;
}

.product-packages .package-option,
.kit-options .package-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 10px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-weight: normal;
}

.product-packages .package-option.selected,
.kit-options .package-option.selected {
    border-color: #1e88e5;
    background: #eef6ff;
    box-shadow: 0 0 0 1px #1e88e5;
}

.product-packages .package-option.out-of-stock,
.kit-options .package-option.out-of-stock {
    cursor: not-allowed;
    opacity: .6;
}

.product-packages .package-option:focus-visible,
.kit-options .package-option:focus-visible {
    outline: 2px solid #1e88e5;
    outline-offset: 2px;
}

.product-packages .package-radio,
.kit-options .package-radio {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 1px solid #9aa4ae;
    border-radius: 50%;
    background: #fff;
}

.product-packages .package-option.selected .package-radio,
.kit-options .package-option.selected .package-radio {
    border-color: #1e88e5;
    box-shadow: inset 0 0 0 4px #1e88e5;
}


.product-packages .package-info,
.kit-options .package-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.product-packages .package-heading,
.kit-options .package-heading {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #092237;
}

.product-packages .package-name,
.kit-options .package-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #092237;
}

.product-packages .package-description,
.kit-options .package-description,
.product-packages .package-description p,
.kit-options .package-description p {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.product-packages .package-description p,
.kit-options .package-description p {
    margin: 0;
}

.product-packages .package-meta,
.kit-options .package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
    margin-top: 16px;
}

.product-packages .package-meta .package-sku,
.kit-options .package-meta .package-sku {
    color: #888 !important;
}

.product-packages .package-stock,
.kit-options .package-stock {
    color: #2e7d32 !important;
}

.product-packages .package-stock::before,
.kit-options .package-stock::before {
    content: "\2022";
    margin-right: 4px;
}

.product-packages .out-of-stock .package-stock,
.kit-options .out-of-stock .package-stock {
    color: #c62828 !important;
}

.product-packages .package-prices,
.kit-options .package-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    text-align: right;
}

.product-packages .package-prices span,
.kit-options .package-prices span {
    line-height: 1.4;
}

.product-packages .package-old-price,
.kit-options .package-old-price {
    font-size: 12px;
    color: #888;
    text-decoration: line-through;
}

.product-packages .package-price,
.kit-options .package-price {
    font-size: 18px;
    font-weight: 700;
    color: #092237;
}

.product-packages .package-save,
.kit-options .package-save {
    font-size: 11px;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.product-packages .package-badge,
.kit-options .package-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 11px;
    color: #fff;
    background: #0d2a4a;
    padding: 2px 8px;
    border-radius: 10px;
}

@media (max-width: 480px) {
    /* radio and text stay on one row, prices go below the text */
    .product-packages .package-option {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        column-gap: 12px;
    }

    .product-packages .package-prices,
    .kit-options .package-prices {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 10px;
    }
}

/* package and kit pages, side-by-side layout: the details column ends level with the gallery and scrolls on its own
   (slim bar); its height is the gallery's, set by script */
@media (min-width: 1200px) {
    .product-packages-details {
        max-height: var(--package-gallery-height, none);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c3cad3 transparent;
    }

    .product-packages-details::-webkit-scrollbar {
        width: 6px;
    }

    .product-packages-details::-webkit-scrollbar-thumb {
        background: #c3cad3;
        border-radius: 3px;
    }
}

/* package pages: the cards replace the attribute options (an assembly variant is a card's product of its own) */
.product-packages-page .product-essential .attributes {
    display: none !important;
}

/* package pages: the purchase block replaces the theme's price, quantity and buttons */
.product-packages-page .product-name > .add-to-cart,
.product-packages-page .product-name > .product-price-box,
.product-packages-page .product-name > .overview-buttons {
    display: none !important;
}

/* kit product pages: "Choose items" replaces the page's own quantity and Add to Cart (which buy the whole kit);
   Quick Enquiry and Add to Wishlist stay */
.kit-items-mode .product-name > .add-to-cart,
.kit-items-mode .product-name > .overview-buttons > .add-to-cart {
    display: none !important;
}

/* kit product pages: the "Buy all" option shows the kit's price, so the theme's price box is not repeated */
.kit-options-page .product-name > .product-price-box {
    display: none !important;
}

.kit-options {
    margin: 16px 0 20px;
}

.kit-options .kit-unavailable {
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #8a5a00 !important;
}

/* e.g. the "select at least one item" message until the button is pressed */
.kit-options [hidden] {
    display: none !important;
}

.kit-options .kit-option input[type="radio"] {
    display: none;
}

.kit-options .kit-items {
    margin: 4px 0 10px;
    padding: 6px 16px 14px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
}

.kit-options .kit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f3;
    font-weight: normal;
    cursor: pointer;
}

.kit-options .kit-item.out-of-stock {
    cursor: not-allowed;
    opacity: .6;
}

.kit-options .kit-item-picture {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.kit-options .kit-item-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.kit-options .kit-item-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #092237;
}

.kit-options .kit-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
}

/* keep the theme's generic span styles off the item lines */
.kit-options .kit-item-meta span {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.kit-options .kit-item.out-of-stock .package-stock {
    color: #c62828 !important;
}

.kit-options .kit-item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    text-align: right;
}

/* the price the other way under the main one, e.g. "$8,619.25 Incl GST" (like the product page) */
.kit-options .package-other-tax-price {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #555 !important;
}

.kit-options .kit-item-price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #092237;
}

.kit-options .kit-items-add {
    width: 100%;
    margin-top: 12px;
}

/* "Choose items": the theme's Quick Enquiry (full width) and Add to Wishlist under the button, like the package cards */
.kit-options .kit-items-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.kit-options .kit-items-actions:empty {
    display: none;
}

.kit-options .kit-items-actions #btnEnquireNow,
.kit-options .kit-items-actions #btnEnquireNow button {
    width: 100%;
    margin: 0;
}

/* same shape as "Add selected items to cart" */
.kit-options .kit-items-actions #btnEnquireNow button {
    min-height: 44px;
    border-radius: 6px !important;
}

/* "Buy all": the page's own Add to Cart row, clear of the kit block */
.kit-options-page .product-name > .overview-buttons {
    margin-top: 0;
}

.kit-items-mode .product-name > .overview-buttons {
    display: none !important;
}

/* room for the last buttons' borders at the end of the scrolling details column */
.product-packages-details {
    padding-bottom: 16px;
}

.kit-options .kit-items-message {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #c62828;
}

.product-packages .package-purchase,
.kit-options .package-purchase {
    margin-top: 24px;
}

.product-packages .package-total,
.kit-options .package-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.product-packages .package-total-price,
.kit-options .package-total-price {
    font-size: 30px;
    font-weight: 700;
    color: #0d2a4a;
}

.product-packages .package-total-suffix,
.kit-options .package-total-suffix {
    font-size: 13px;
    color: #555;
}

/* package pages: the selected card's price the other way under the main one (e.g. "$78.20 Incl GST") */
.product-packages .package-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.product-packages .package-purchase .package-other-tax-price {
    font-size: 14px;
    color: #555;
}

.product-packages .package-buy,
.kit-options .package-buy {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.product-packages .package-qty,
.kit-options .package-qty {
    display: flex;
    align-items: center;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #f5f7f9;
}

.product-packages .package-qty button,
.kit-options .package-qty button {
    width: 36px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.product-packages .package-qty-input,
.kit-options .package-qty-input {
    width: 44px;
    height: 44px;
    border: 0;
    text-align: center;
    background: #fff;
}

.product-packages .package-add-to-cart,
.kit-options .package-add-to-cart {
    flex: 1 1 auto;
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    background: #0d2a4a;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.product-packages .package-save-later,
.kit-options .package-save-later {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #555;
}

.product-packages .package-info-box,
.kit-options .package-info-box {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 20px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
}

.product-packages .package-info-box li,
.kit-options .package-info-box li {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-size: 14px;
}

.product-packages .package-info-box li:last-child,
.kit-options .package-info-box li:last-child {
    margin-bottom: 0;
}

.product-packages .package-info-box span,
.kit-options .package-info-box span {
    color: #555;
}

@media (max-width: 480px) {
    .product-packages .package-total-price,
    .kit-options .package-total-price {
        font-size: 26px;
    }
}

/* keep the theme's generic span styles off the cards and the button */
.product-packages .package-add-to-cart span {
    color: inherit !important;
    font: inherit !important;
}

.product-packages .package-meta span,
.kit-options .package-meta span {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.product-packages .package-add-to-cart:disabled,
.kit-options .package-add-to-cart:disabled,
.product-packages .package-save-later.disabled,
.kit-options .package-save-later.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* the theme's Quick Enquiry button, moved under Add to Cart */
.product-packages .package-enquiry {
    margin-top: 10px;
}

.product-packages .package-enquiry #btnEnquireNow,
.kit-options .package-enquiry #btnEnquireNow,
.product-packages .package-enquiry #btnEnquireNow button,
.kit-options .package-enquiry #btnEnquireNow button {
    width: 100%;
    margin: 0;
}