/**
 * Storefront product parity page. Loaded only on product-parity view.
 */

.parity-spec-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .parity-spec-value {
        font-weight: 900;
        letter-spacing: 0.3px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-region-value {
        font-weight: 900;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-region-sub {
        opacity: 0.9;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-offers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 0.75rem;
    }
    /* Product page only: denser “More in this category” so 6 cards fit one desktop row */
    .parity-face-values .grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
    }
    @media (max-width: 359px) {
        .parity-face-values .grid {
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }
    }
    @media (min-width: 360px) and (max-width: 639px) {
        .parity-face-values .grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
        }
    }
    @media (min-width: 960px) {
        .parity-face-values .grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
    }
    .parity-offer-card {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 0.85rem 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: space-between;
        background: var(--bg);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    }
    .parity-offer-main {
        min-width: 0;
        flex: 1 1 260px;
    }
    .parity-offer-name {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-offer-side {
        min-width: 120px;
        text-align: end;
        flex-shrink: 0;
    }
    .parity-offer-price {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-offer-side .parity-offer-field-label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted, #64748b);
        margin-bottom: 0.2rem;
    }
    html[lang="ar"] .parity-offer-side .parity-offer-field-label {
        text-transform: none;
        letter-spacing: normal;
    }
    .parity-offer-side .parity-offer-price-main {
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--fg);
        line-height: 1.25;
    }
    .parity-offer-side .parity-offer-price-main .parity-offer-currency {
        font-size: 0.85rem;
        color: var(--muted);
        font-weight: 600;
    }
    .parity-offer-discount-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem 0.55rem;
        margin-top: 0.55rem;
    }
    .parity-offer-side .parity-offer-save-line {
        margin-top: 0.35rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: #059669;
    }
    .parity-purchase-card {
        margin: 1rem 0 2rem 0;
        padding: 1.25rem 1.35rem;
        background: var(--bg, #fff);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    }
    .parity-product-section-label {
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted, #64748b);
    }
    html[lang="ar"] .parity-product-section-label {
        text-transform: none;
        letter-spacing: normal;
    }
    .parity-purchase-card__heading {
        margin: 0 0 0.7rem 0;
    }
    .parity-other-offers__main-title {
        margin: 0 0 1rem 0;
    }
    .parity-offer-pool {
        margin: 0;
    }
    .parity-offer-pool + .parity-offer-pool {
        margin-top: 1.75rem;
        padding-top: 1.75rem;
        border-top: 1px solid var(--border, #e2e8f0);
    }
    .parity-offer-pool__title {
        font-size: 1.05rem;
        font-weight: 900;
        text-transform: uppercase;
        margin: 0 0 0.75rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: 0.02em;
        color: var(--fg);
    }
    html[lang="ar"] .parity-offer-pool__title {
        text-transform: none;
        letter-spacing: normal;
    }
    .parity-offer-pool__empty {
        margin: 0 0 0.85rem 0;
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
        font-size: 0.9rem;
        line-height: 1.45;
        color: var(--muted, #64748b);
        background: rgba(148, 163, 184, 0.12);
        border: 1px dashed var(--border, #e2e8f0);
    }
    .parity-purchase-card__price {
        margin: 0;
    }
    .parity-purchase-card__actions {
        margin-top: 1.15rem;
        padding-top: 1.15rem;
        border-top: 1px solid var(--border, #e2e8f0);
    }
    .parity-purchase-card__actions .btn {
        min-width: 10rem;
        padding: 0.55rem 1.15rem;
        font-weight: 600;
    }
    /* Product hero: G2A-style organization (media | details | buy) */
    .parity-product-layout {
        display: grid;
        gap: 1.25rem;
        align-items: start;
        margin: 0 0 1.25rem 0;
    }
    .parity-product-layout__media,
    .parity-product-layout__info,
    .parity-product-layout__buy {
        min-width: 0;
    }
    .parity-product-layout__media .product-hero {
        margin: 0;
    }
    .parity-product-layout__media .product-hero__img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        background: #f1f5f9;
    }
    .parity-product-layout__media .thumbs {
        margin-top: 0.65rem;
        display: flex;
        gap: 0.45rem;
        flex-wrap: wrap;
    }
    .parity-product-layout__media .thumbs img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--border);
        cursor: pointer;
    }
    .parity-product-layout__info-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin: 0 0 0.85rem 0;
    }
    .parity-product-layout__info-badges > * {
        max-width: 100%;
    }
    .parity-short-desc {
        margin-top: 1rem;
        min-width: 0;
    }
    .parity-short-desc__text {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.55;
        color: var(--fg, #0f172a);
        overflow-wrap: anywhere;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
    .parity-short-desc__more {
        display: inline-block;
        margin-top: 0.45rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--sf-btn-primary, #2563eb);
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .parity-short-desc__more:hover,
    .parity-short-desc__more:focus-visible {
        color: var(--sf-brand-hover, #1d4ed8);
    }
    .parity-product-layout__buy .parity-purchase-card {
        margin: 0;
    }
    .parity-product-layout__buy .parity-seller-card {
        margin: 0.85rem 0 0 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .parity-product-layout__buy .parity-purchase-card__actions .btn,
    .parity-product-layout__buy #addToCartButton {
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-align: center;
    }
    .parity-product-layout__buy .parity-purchase-card__actions .btn {
        min-width: 0;
    }
    .parity-product-layout__buy .sf-topup-fields {
        box-sizing: border-box;
        max-width: 100%;
    }
    .parity-product-layout__buy .sf-topup-field-input {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .parity-delivery-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 13px;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .parity-product-title {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.3;
    }
    @media (max-width: 767px) {
        .parity-product-title {
            font-size: 1.15rem;
        }
    }
    .parity-delivery-under-title {
        display: none;
        margin: 0 0 1rem 0;
    }
    .parity-delivery-in-info {
        display: inline-flex;
    }
    @media (max-width: 767px) {
        .parity-product-layout__media { order: 1; }
        .parity-product-layout__buy { order: 2; }
        .parity-product-layout__info { order: 3; }
        .parity-delivery-under-title {
            display: block;
        }
        .parity-delivery-in-info {
            display: none !important;
        }
    }
    @media (min-width: 768px) {
        .parity-product-layout {
            grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
            grid-template-areas:
                "media buy"
                "info buy";
        }
        .parity-product-layout__media { grid-area: media; }
        .parity-product-layout__info { grid-area: info; }
        .parity-product-layout__buy { grid-area: buy; position: sticky; top: 0.75rem; }
    }
    @media (min-width: 992px) {
        .parity-product-layout {
            grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr) minmax(280px, 0.95fr);
            grid-template-areas: "media info buy";
        }
    }
    @media (max-width: 640px) {
        .parity-spec-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .parity-spec-value,
        .parity-region-value,
        .parity-region-sub {
            font-size: 0.92rem;
            line-height: 1.3;
        }
        .parity-offers-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .parity-offer-card {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
        }
        /* Desktop uses flex-basis 260px on the row axis; in column layout that becomes min-height and leaves a huge gap. */
        .parity-offer-main {
            flex: 0 0 auto;
            width: 100%;
        }
        .parity-offer-side {
            min-width: 0;
            width: 100%;
            text-align: start;
        }
        .parity-offer-discount-row {
            justify-content: flex-start;
        }
        .parity-offer-side .btn {
            width: 100%;
            justify-content: center;
        }
        .parity-purchase-card {
            padding: 1rem 1.1rem;
            border-radius: 12px;
        }
        .parity-purchase-card__actions .btn {
            width: 100%;
            min-width: 0;
        }
        .parity-offer-pool + .parity-offer-pool {
            margin-top: 1.35rem;
            padding-top: 1.35rem;
        }
    }

.parity-product-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem;
}

dialog#cartWarning::backdrop,
dialog.parity-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.parity-tab-btn.active {
    border-color: var(--sf-btn-primary, #3b82f6) !important;
    color: var(--sf-btn-primary, #2563eb) !important;
    box-shadow: 0 1px 0 rgba(37, 99, 235, 0.12);
}

.parity-rating-tab.active {
    border-color: var(--sf-btn-primary, #3b82f6) !important;
    color: var(--sf-btn-primary, #2563eb) !important;
}

/* Add-to-cart busy / spinner (same-origin redirect feedback, esp. Chrome) */
@keyframes sf-add-to-cart-spin {
    to {
        transform: rotate(360deg);
    }
}

.sf-add-to-cart--busy {
    pointer-events: none;
    opacity: 0.88;
    position: relative;
    gap: 0.5rem;
}

.sf-add-to-cart--busy::before {
    content: '';
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-inline-end: 0.45rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.12em;
    animation: sf-add-to-cart-spin 0.65s linear infinite;
}