/* SmartRibbons & Bank Promos CSS - Ultra High Performance (Zero CLS) */

.product-item .picture,
.product-details-page .gallery .picture {
    position: relative !important;
}

/* Base Corner Badge */
.smart-ribbon-badge {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    font-family: inherit;
    font-weight: 700;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    user-select: none;
}

/* Positions */
.smart-ribbon-pos-top-left {
    top: 8px;
    left: 8px;
}

.smart-ribbon-pos-top-right {
    top: 8px;
    right: 8px;
}

.smart-ribbon-pos-bottom-left {
    bottom: 8px;
    left: 8px;
}

.smart-ribbon-pos-bottom-right {
    bottom: 8px;
    right: 8px;
}

/* Style: Modern Pill */
.smart-ribbon-style-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Style: Minimal Tag */
.smart-ribbon-style-minimal {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Style: Circular Burst */
.smart-ribbon-style-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 11px;
    padding: 2px;
    line-height: 1.1;
}

/* Style: Diagonal Corner Ribbon */
.smart-ribbon-diagonal-wrapper {
    position: absolute;
    top: 0;
    width: 85px;
    height: 85px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

.smart-ribbon-diagonal-wrapper.smart-ribbon-pos-top-left {
    top: 0;
    left: 0;
}

.smart-ribbon-diagonal-wrapper.smart-ribbon-pos-top-right {
    top: 0;
    right: 0;
}

.smart-ribbon-diagonal-text {
    position: absolute;
    display: block;
    width: 120px;
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.smart-ribbon-pos-top-left .smart-ribbon-diagonal-text {
    left: -32px;
    top: 16px;
    transform: rotate(-45deg);
}

.smart-ribbon-pos-top-right .smart-ribbon-diagonal-text {
    right: -32px;
    top: 16px;
    transform: rotate(45deg);
}

.smart-ribbon-diagonal-wrapper.smart-ribbon-pos-bottom-left {
    top: auto;
    bottom: 0;
    left: 0;
}

.smart-ribbon-diagonal-wrapper.smart-ribbon-pos-bottom-right {
    top: auto;
    bottom: 0;
    right: 0;
}

.smart-ribbon-pos-bottom-left .smart-ribbon-diagonal-text {
    left: -32px;
    bottom: 16px;
    transform: rotate(45deg);
}

.smart-ribbon-pos-bottom-right .smart-ribbon-diagonal-text {
    right: -32px;
    bottom: 16px;
    transform: rotate(-45deg);
}

/* ---------- Corner ribbon "under the price" (a plain horizontal label, not the bank promo box) ---------- */
.smart-ribbon-under-price-wrap {
    display: block;
    width: 100%;
    margin: 6px 0;
}

.smart-ribbon-under-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    user-select: none;
}

/* ============================================================== */
/* Horizontal Bank Promotional Banner (Under Price)              */
/* ============================================================== */
/* Colors and sizes are custom properties set inline on .smart-ribbon-bank-promo by the server (BankPromoStyles.Variables), each read
   with the value the promo always had as default - a promo without an advanced style looks exactly as before. The accent falls back to
   --srb-theme, the color the page script read from the theme's own price, when the promo follows the theme. */

.smart-ribbon-bank-promos {
    display: block;
    width: 100%;
}

.smart-ribbon-bank-promo-container {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 6px 0 10px 0;
    /* Follows the theme's own alignment (centered or left aligned product boxes); the alignment choice of a promo overrides it. */
    text-align: inherit;
}

.smart-ribbon-bank-promo {
    display: inline-flex;
    align-items: center;
    /* In a narrow box (a two-column grid on a phone) the parts wrap onto a second line instead of pushing the box wider than its card. */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    min-width: 0;
    border-width: var(--srb-bw, 1.5px);
    border-style: solid;
    border-color: var(--srb-border, var(--srb-theme, #005696));
    border-radius: var(--srb-radius, 6px);
    padding: 5px 10px;
    /* Fits its content (logo, price, badge), never wider than the box it sits in. */
    width: auto;
    max-width: 100%;
    background-color: var(--srb-bg, #ffffff);
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    gap: 6px;
}

.smart-ribbon-bank-promo:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.smart-ribbon-bank-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 140px;
    height: var(--srb-logo-h, 26px);
}

/* The logo is drawn at the box's logo height (not just capped to it), so every bank has the same height at every size, whatever the
   file's own size; the width follows the logo's proportions up to a maximum. */
.smart-ribbon-bank-logo img,
.smart-ribbon-bank-logo svg {
    height: calc(var(--srb-logo-h, 26px) - 2px);
    max-width: 140px;
    width: auto;
    display: block;
}

.smart-ribbon-bank-price {
    font-size: var(--srb-price-size, 15px);
    font-weight: 800;
    margin: 0 6px;
    white-space: nowrap;
    line-height: 1;
    color: var(--srb-price, var(--srb-border, var(--srb-theme, #005696)));
}

.smart-ribbon-bank-badge {
    font-size: var(--srb-badge-size, 11px);
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    background-color: var(--srb-badge-bg, var(--srb-theme, #ffc107));
    color: var(--srb-badge-fg, #ffffff);
}

/* Product Details Page Adjustments */
.product-details-page .smart-ribbon-bank-promo-container {
    text-align: left;
    margin: 10px 0 15px 0;
}

.product-details-page .smart-ribbon-bank-promo {
    padding: 7px 12px;
}

.product-details-page .smart-ribbon-bank-price {
    font-size: var(--srb-price-size, 17px);
}

.product-details-page .smart-ribbon-bank-badge {
    font-size: var(--srb-badge-size, 12px);
    padding: 4px 8px;
}

/* Alignment (set from the advanced appearance). After the page-specific rules above so it wins in both places. */
.smart-ribbon-bank-promo-container.srb-align-left { text-align: left; }
.smart-ribbon-bank-promo-container.srb-align-center { text-align: center; }
.smart-ribbon-bank-promo-container.srb-align-right { text-align: right; }



/* The ribbon's own image: same box as the badge (position classes, offsets, z-index, no pointer events - all inherited from
   .smart-ribbon-badge), minus the drawn look. It keeps its own size, never wider than 45% of the picture. */
.smart-ribbon-badge.smart-ribbon-image {
    display: block;
    width: max-content;
    max-width: 45%;
    padding: 0;
    background: none;
    box-shadow: none;
    line-height: 0;
}

/* The image sits inside .picture once it is placed, where many themes restyle every image (Allure: position:absolute, inset:0,
   width:100%). Those rules would take it out of the flow and collapse the box, so what matters here is spelled out. */
.smart-ribbon-badge.smart-ribbon-image img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.smart-ribbon-under-price-image {
    display: inline-block;
    max-width: 100%;
    max-height: 40px;
    height: auto;
}

/* ---------- Sizes: how big a ribbon is drawn in the grids and on the product page ----------
   The class comes from the ribbon's own choice for where it is drawn; Normal adds none (it is how a ribbon always looked). */

/* A drawn label (pill, tag, circle, diagonal sash) is scaled from the corner it is anchored to, so it keeps its 8px offset. */
.smart-ribbon-badge.smart-ribbon-size-1:not(.smart-ribbon-image), .smart-ribbon-diagonal-wrapper.smart-ribbon-size-1 { transform: scale(.75); }
.smart-ribbon-badge.smart-ribbon-size-2:not(.smart-ribbon-image), .smart-ribbon-diagonal-wrapper.smart-ribbon-size-2 { transform: scale(.9); }
.smart-ribbon-badge.smart-ribbon-size-4:not(.smart-ribbon-image), .smart-ribbon-diagonal-wrapper.smart-ribbon-size-4 { transform: scale(1.3); }
.smart-ribbon-badge.smart-ribbon-size-5:not(.smart-ribbon-image), .smart-ribbon-diagonal-wrapper.smart-ribbon-size-5 { transform: scale(1.6); }

.smart-ribbon-badge.smart-ribbon-pos-top-left, .smart-ribbon-diagonal-wrapper.smart-ribbon-pos-top-left { transform-origin: 0 0; }
.smart-ribbon-badge.smart-ribbon-pos-top-right, .smart-ribbon-diagonal-wrapper.smart-ribbon-pos-top-right { transform-origin: 100% 0; }
.smart-ribbon-badge.smart-ribbon-pos-bottom-left, .smart-ribbon-diagonal-wrapper.smart-ribbon-pos-bottom-left { transform-origin: 0 100%; }
.smart-ribbon-badge.smart-ribbon-pos-bottom-right, .smart-ribbon-diagonal-wrapper.smart-ribbon-pos-bottom-right { transform-origin: 100% 100%; }

/* Under the price the label is in the flow, so it is zoomed (a transform would not move what comes after it). */
.smart-ribbon-under-price-wrap.smart-ribbon-size-1 .smart-ribbon-under-price { zoom: .75; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-2 .smart-ribbon-under-price { zoom: .9; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-4 .smart-ribbon-under-price { zoom: 1.3; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-5 .smart-ribbon-under-price { zoom: 1.6; }

/* An own image takes a share of the picture's width (Normal = its own size, up to 45%, as before). */
.smart-ribbon-badge.smart-ribbon-image.smart-ribbon-size-1 { width: 15%; max-width: none; }
.smart-ribbon-badge.smart-ribbon-image.smart-ribbon-size-2 { width: 25%; max-width: none; }
.smart-ribbon-badge.smart-ribbon-image.smart-ribbon-size-4 { width: 55%; max-width: none; }
.smart-ribbon-badge.smart-ribbon-image.smart-ribbon-size-5 { width: 70%; max-width: none; }
.smart-ribbon-image[class*="smart-ribbon-size-"] img { width: 100% !important; }

/* Under the price an own image is sized by its height. */
.smart-ribbon-under-price-wrap.smart-ribbon-size-1 .smart-ribbon-under-price-image { max-height: 24px; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-2 .smart-ribbon-under-price-image { max-height: 32px; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-4 .smart-ribbon-under-price-image { max-height: 52px; }
.smart-ribbon-under-price-wrap.smart-ribbon-size-5 .smart-ribbon-under-price-image { max-height: 64px; }

/* Product boxes on a phone are about 150px wide: the logo, the price and the badge are drawn smaller there (a fraction of the chosen size, so
   small / normal / large keep their proportions). The product page keeps the full size. */
@media (max-width: 480px) {
    .product-item .smart-ribbon-bank-promo {
        padding: 4px 6px;
        gap: 4px;
    }

    .product-item .smart-ribbon-bank-logo {
        height: calc(var(--srb-logo-h, 26px) * 0.75);
    }

    .product-item .smart-ribbon-bank-logo img,
    .product-item .smart-ribbon-bank-logo svg {
        height: calc(var(--srb-logo-h, 26px) * 0.75 - 2px);
        max-width: 100px;
    }

    .product-item .smart-ribbon-bank-price {
        font-size: calc(var(--srb-price-size, 15px) * 0.85);
    }

    .product-item .smart-ribbon-bank-badge {
        font-size: calc(var(--srb-badge-size, 11px) * 0.85);
        padding: 2px 5px;
    }
}