/*
 * تحسينات التحويل في صفحة المنتج فقط.
 * الأنماط مستقلة عن Tailwind حتى تعمل مباشرة في وضعي المطور والإنتاج.
 */

.catalog-product-view .cro-gallery-static-link {
    display: block;
    width: 100%;
    color: inherit;
    cursor: zoom-in;
    transition: opacity 160ms ease;
}

/* مصدر شريط الموبايل مربع، لكن المكوّن نفسه شريط أفقي. حجز النسبة
 * الصحيحة يمنع تمدده إلى مربع كامل بعد أول رسم للصفحة. */
@media (max-width: 767px) {
    .catalog-product-view .mgz-meercato-top-strip,
    .catalog-product-view .mgz-meercato-top-strip__link,
    .catalog-product-view .mgz-meercato-top-strip picture,
    .catalog-product-view .mgz-meercato-top-strip__image {
        height: 10.32448378vw;
        max-height: 70px;
    }

    .catalog-product-view .mgz-meercato-top-strip__image {
        object-fit: cover;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .catalog-product-view .mgz-meercato-top-strip,
    .catalog-product-view .mgz-meercato-top-strip__link,
    .catalog-product-view .mgz-meercato-top-strip picture,
    .catalog-product-view .mgz-meercato-top-strip__image {
        height: 9.40860215vw;
    }

    .catalog-product-view .mgz-meercato-top-strip__image {
        object-fit: cover;
    }
}

.catalog-product-view .cro-gallery-static-link:focus-visible {
    border-radius: 8px;
    outline: 3px solid rgba(238, 58, 84, 0.38);
    outline-offset: 4px;
}

.catalog-product-view .product-brand-slot {
    min-block-size: 24px;
}

.catalog-product-view .cro-brand-fallback {
    color: #01265c;
    font-family: 'Noto Sans Arabic', 'Almarai', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.catalog-product-view .cro-pdp-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 16px;
    padding: 0;
    list-style: none;
}

.catalog-product-view .cro-pdp-trust li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #e7edf4;
    border-radius: 9px;
    background: #f8fafc;
    color: #24364b;
    font-family: 'Noto Sans Arabic', 'Almarai', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.catalog-product-view .cro-pdp-trust__icon {
    display: inline-grid;
    flex: 0 0 18px;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e4f6ed;
    color: #087a45;
    font-size: 11px;
    font-weight: 800;
}

.catalog-product-view .cro-spec-strip {
    margin: 0 0 18px;
    padding: 13px 14px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fff;
}

.catalog-product-view .cro-spec-strip__heading {
    margin-bottom: 9px;
    color: #102a43;
    font-size: 13px;
    font-weight: 800;
}

.catalog-product-view .cro-spec-strip__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.catalog-product-view .cro-spec-strip__item {
    min-width: 0;
    padding: 0 10px;
    border-inline-end: 1px solid #edf0f4;
}

.catalog-product-view .cro-spec-strip__item:first-child {
    padding-inline-start: 0;
}

.catalog-product-view .cro-spec-strip__item:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
}

.catalog-product-view .cro-spec-strip dt {
    overflow: hidden;
    margin-bottom: 3px;
    color: #66788a;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-product-view .cro-spec-strip dd {
    overflow: hidden;
    margin: 0;
    color: #142b44;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-product-view .cro-spec-strip__link {
    display: inline-block;
    margin-top: 10px;
    color: #d92f48;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.catalog-product-view .cro-variant-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -10px 0 16px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #fff8e6;
    color: #72510a;
    font-size: 12px;
    line-height: 1.5;
}

.catalog-product-view .cro-variant-state__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4a11b;
}

.catalog-product-view .cro-variant-state[data-state='available'] {
    background: #eefaf4;
    color: #11683e;
}

.catalog-product-view .cro-variant-state[data-state='available'] .cro-variant-state__dot {
    background: #15965a;
}

.catalog-product-view .cro-variant-state[data-state='unavailable'] {
    background: #fff0f1;
    color: #9c2435;
}

.catalog-product-view .cro-variant-state[data-state='unavailable'] .cro-variant-state__dot {
    background: #d92f48;
}

.catalog-product-view .cro-variant-state__reset {
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .catalog-product-view .sticky-addtocart-bar {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        padding: 10px 16px;
    }

    /* 118px = 44 + 28 + 44 + 2px of field borders. The old 98px track could not
       hold its own children, so the two buttons absorbed the overflow and
       rendered 16px wide — far below a usable touch target. */
    .catalog-product-view .sticky-addtocart-container {
        display: grid;
        grid-template-columns: minmax(76px, 0.75fr) 118px minmax(145px, 1.5fr);
        gap: 10px;
        max-width: 680px;
    }

    .catalog-product-view .sticky-addtocart-container--without-price {
        grid-template-columns: 118px minmax(145px, 1fr);
    }

    .catalog-product-view .sticky-addtocart-container--without-qty {
        grid-template-columns: minmax(76px, 0.75fr) minmax(145px, 1.5fr);
    }

    .catalog-product-view .sticky-addtocart-container--without-price.sticky-addtocart-container--without-qty {
        grid-template-columns: minmax(145px, 1fr);
    }

    /* 44px minimum touch target (WCAG 2.5.5 / iOS HIG). flex-basis is pinned so
       no narrower track can shrink the buttons again. */
    .catalog-product-view .sticky-qty-selector .qty-btn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
    }

    .catalog-product-view .sticky-qty-selector .qty-input {
        flex: 0 0 28px;
        width: 28px;
        min-width: 0;
    }

    .catalog-product-view .sticky-product-price {
        min-width: 0;
    }

    .catalog-product-view .sticky-product-price__label {
        display: block;
        color: #6b7785;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
    }

    .catalog-product-view .sticky-product-price__value {
        display: block;
        overflow: hidden;
        color: #01265c;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-product-view .sticky-product-price__value .price {
        font: inherit;
    }

    .catalog-product-view .sticky-addtocart-btn {
        min-width: 0;
        padding-inline: 14px;
        font-family: 'Noto Sans Arabic', 'Almarai', sans-serif;
    }

    .catalog-product-view .sticky-addtocart-btn svg {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }

    .catalog-product-view .sticky-addtocart-status {
        min-height: 0;
        margin: 5px auto 0;
        color: #9c2435;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
    }

    .catalog-product-view .sticky-addtocart-status:empty {
        display: none;
    }
}

@media (max-width: 520px) {
    .catalog-product-view .cro-pdp-trust {
        grid-template-columns: 1fr;
    }

    .catalog-product-view .cro-pdp-trust li {
        min-height: 0;
    }

    .catalog-product-view .cro-spec-strip__list {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .catalog-product-view .cro-spec-strip__item,
    .catalog-product-view .cro-spec-strip__item:first-child,
    .catalog-product-view .cro-spec-strip__item:last-child {
        display: grid;
        grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
        gap: 10px;
        padding: 6px 0;
        border: 0;
        border-bottom: 1px solid #edf0f4;
    }

    .catalog-product-view .cro-spec-strip__item:last-child {
        border-bottom: 0;
    }

    .catalog-product-view .cro-spec-strip dt,
    .catalog-product-view .cro-spec-strip dd {
        margin: 0;
    }

    /* The qty track must fit two 44px targets plus the field. An 82px track made
       the buttons absorb the whole overflow and render 16px wide. The price
       track takes minmax(0, ...) so it ellipsises instead of stealing that space. */
    .catalog-product-view .sticky-addtocart-container {
        grid-template-columns: minmax(0, 0.85fr) 118px minmax(128px, 1.15fr);
        gap: 8px;
    }

    .catalog-product-view .sticky-addtocart-container--without-price {
        grid-template-columns: 118px minmax(132px, 1fr);
    }

    .catalog-product-view .sticky-addtocart-container--without-qty {
        grid-template-columns: minmax(0, 0.85fr) minmax(132px, 1.15fr);
    }

    .catalog-product-view .sticky-addtocart-container--without-price.sticky-addtocart-container--without-qty {
        grid-template-columns: minmax(132px, 1fr);
    }

    .catalog-product-view .sticky-qty-selector {
        width: 118px;
    }

    .catalog-product-view .sticky-addtocart-btn {
        gap: 4px;
        padding-inline: 8px;
        font-size: 14px;
    }

    .catalog-product-view .sticky-addtocart-btn svg {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 370px) {
    /* Drop the price rather than the stepper: the buy-box qty field is
       desktop-only, so hiding this stepper left no way to change quantity at
       all on narrow Android devices. The price is still above the fold. */
    .catalog-product-view .sticky-addtocart-container,
    .catalog-product-view .sticky-addtocart-container--without-price {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .catalog-product-view .sticky-addtocart-container--without-qty,
    .catalog-product-view .sticky-addtocart-container--without-price.sticky-addtocart-container--without-qty {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-product-view .sticky-product-price {
        display: none;
    }
}