/*
 * Product sections + accessories are one responsive composition.
 * Mobile: accessories first, sections below.
 * Desktop: true 50/50 cards.
 */
.bamz-details-accessories-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
}

.bamz-accessories {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    order: -1;
    margin: 0 !important;
    padding: 16px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}

.bamz-details-accessories-grid > [data-bamz-original-details] {
    box-sizing: border-box;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    order: 0;
}

/* Keep long accessory lists compact; summary and CTA remain visible below. */
.bamz-accessories > div > ol {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.bamz-accessories > h3 {
    margin-top: 0;
}

/* Remove number-input browser spinners; the UI already provides -/+ buttons. */
.bamz-accessories input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.bamz-accessories input[type="number"]::-webkit-inner-spin-button,
.bamz-accessories input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Selection state. The actual green comes from the theme Tailwind classes
 * (`bg-greenplat` / `hover:bg-darkgreenplat`) on the button. These fallbacks
 * keep the check readable even before/without a Tailwind rebuild. */
.bamz-accessories [data-accessory-toggle][aria-pressed="true"] {
    color: #fff !important;
}
.bamz-accessories [data-accessory-toggle][aria-pressed="false"] {
    background: #fff;
}

/* Make the selected state use the same Platstore green token when the theme
 * exposes it. Tailwind's generated bg-greenplat class remains the primary style. */
.bamz-accessories [data-accessory-toggle][aria-pressed="true"] {
    background-color: var(--color-greenplat, #22a447) !important;
    border-color: var(--color-greenplat, #22a447) !important;
}
.bamz-accessories [data-accessory-toggle][aria-pressed="true"]:hover {
    background-color: var(--color-darkgreenplat, #157a31) !important;
    border-color: var(--color-darkgreenplat, #157a31) !important;
}

@media (min-width: 1024px) {
    .bamz-details-accessories-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
    }

    .bamz-details-accessories-grid > [data-bamz-original-details] {
        order: 0;
        padding: 24px !important;
    }

    .bamz-details-accessories-grid > .bamz-accessories {
        order: 0;
        padding: 24px;
    }

    .bamz-accessories > div > ol {
        max-height: 430px;
    }
}

/* Mobile CTA clarity: hide the theme's fixed bottom cart bar while the normal
 * product CTA is still in view. It appears as soon as the normal CTA leaves
 * the viewport, so the customer always has an obvious cart action available. */
.product-info-sticky.bamz-sticky-suppressed {
    display: none !important;
}

/* Keep the accessory CTA visible and clearly part of the accessory card. */
.bamz-accessories .bamz-accessories-action {
    position: relative;
    z-index: 2;
}

/* Theme-colour selection state. The JS applies these exact Tailwind classes;
 * these fallback rules keep the state readable even before a CSS rebuild. */
.bamz-accessories [data-accessory-toggle][aria-pressed="true"] {
    color: #fff !important;
}

/* Mobile must show exactly what is being bought: line prices, selected items,
 * total and the accessory add-to-cart CTA are never hidden by breakpoint. */
.bamz-accessories [data-accessory-summary],
.bamz-accessories .bamz-accessories-action,
.bamz-accessories [data-accessory-submit] {
    display: flex;
}
.bamz-accessories [data-accessory-summary] {
    flex-direction: column;
}
.bamz-accessories [data-accessory-price-label] {
    display: inline-block !important;
    color: #0f172a !important;
}
.bamz-accessories [data-accessory-price-label] .pricingbox {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .25rem;
}

@media (max-width: 639px) {
    .bamz-accessories [data-accessory-price-label] {
        width: 100%;
        margin-left: 0 !important;
        margin-top: .25rem;
        font-size: .8125rem;
    }
}