/*
 * Meercato CRO improvements — PDP only.
 * Progressive enhancement styles intentionally avoid new Tailwind utilities.
 */

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

/* The mobile top-strip source is square, but the component is a banner.
 * Reserve the same banner ratio used by the homepage critical CSS so it
 * cannot expand to a full viewport-width square after the first paint. */
@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: 'Public Sans', 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.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-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.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.4;
}

.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(94px + 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). This selector is a grid
       (unlike the RTL theme's flex one), so the tracks — not flex-basis — are
       what must be pinned; its own 98px width has to be widened to match. */
    .catalog-product-view .sticky-qty-selector {
        flex: 0 0 118px;
        width: 118px;
        grid-template-columns: 44px 28px 44px;
    }

    .catalog-product-view .sticky-qty-selector .qty-btn {
        width: 44px;
        min-width: 44px;
    }

    .catalog-product-view .sticky-qty-selector .qty-input {
        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.2;
    }

    .catalog-product-view .sticky-product-price__value {
        display: block;
        overflow: hidden;
        color: #01265c;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
        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;
    }

    .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.25;
        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;
    }
}