/* 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%;
    /* The promo is sized from the width it gets (container queries below), not from the window: the same product box is wide on a
       category page and narrow in a carousel or a compact landscape box. */
    container-type: inline-size;
}

.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 {
    /* --srb-k scales the promo: by the width it gets (--srb-kw, container queries) and down to the compact size the page script asks for
       when the theme's box has a fixed height (--srb-kc). The smaller of the two wins. */
    --srb-k: min(var(--srb-kw, 1), var(--srb-kc, 1));
    display: inline-flex;
    align-items: center;
    /* Always one line: in a narrow box the parts get smaller (--srb-k) instead of wrapping onto a second line, which made the product box
       taller than the theme draws it. */
    flex-wrap: nowrap;
    /* "safe": a promo wider than its box overflows to the right only (centered, it also spilled out on the left, where the page script
       cannot measure it to make it smaller). */
    justify-content: safe center;
    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: calc(5px * var(--srb-k)) calc(10px * var(--srb-k));
    /* 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: calc(6px * var(--srb-k));
}

.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: calc(140px * var(--srb-k));
    height: calc(var(--srb-logo-h, 26px) * var(--srb-k));
}

/* 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) * var(--srb-k) - 2px);
    max-width: calc(140px * var(--srb-k));
    width: auto;
    display: block;
}

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

.smart-ribbon-bank-badge {
    font-size: calc(var(--srb-badge-size, 11px) * var(--srb-k));
    font-weight: 800;
    padding: calc(3px * var(--srb-k)) calc(6px * var(--srb-k));
    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;
}

/* Right under the price the promo belongs to it: the theme's space below the price (Emporium: 25px) and the promo's own top margin would
   add up to a gap that splits them. */
.product-details-page .prices:has(+ .smart-ribbon-bank-promos) {
    margin-bottom: 8px !important;
}

.product-details-page .prices + .smart-ribbon-bank-promos .smart-ribbon-bank-promo-container {
    margin-top: 0;
}

/* The same in the product boxes of grids and carousels: the theme's space below the price (on the price block or on the price itself)
   gives way to a small one, so the promo reads as part of the price. */
.product-item .prices:has(+ .smart-ribbon-bank-promos) {
    margin-bottom: 6px !important;
}

.product-item .prices:has(+ .smart-ribbon-bank-promos) > * {
    margin-bottom: 0 !important;
}

.product-item .prices + .smart-ribbon-bank-promos .smart-ribbon-bank-promo-container {
    margin-top: 0;
}

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

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

/* Sized by the width the promo gets (its parts at full size need about 190px). */
@container (max-width: 230px) {
    .smart-ribbon-bank-promo-container { --srb-kw: .85; }
}

@container (max-width: 180px) {
    .smart-ribbon-bank-promo-container { --srb-kw: .72; }
}

@container (max-width: 140px) {
    .smart-ribbon-bank-promo-container { --srb-kw: .6; }
}

/* Compact: the theme's product box has a fixed height (compact landscape boxes, two-row carousels) and the promo would not fit in it. The
   page script (SmartRibbonHead.cshtml) asks for it before it would let the box grow, which cuts the products below it off. */
.smart-ribbon-bank-promos.srb-compact {
    --srb-kc: .92;
}

/* A compact promo keeps a readable size: the width rule above may only take it a little lower (a promo that truly does not fit the width
   still shrinks, two steps less than a plain one). */
.smart-ribbon-bank-promos.srb-compact .smart-ribbon-bank-promo {
    --srb-k: min(var(--srb-kc, 1), calc(var(--srb-kw, 1) + .2));
}

/* In a compact box the promo lines up with the box's own text (the theme's alignment, not the one chosen for the promo) and sits right
   under the price: the theme's space below the price goes. */
.smart-ribbon-bank-promos.srb-compact .smart-ribbon-bank-promo-container {
    margin: 2px 0 0;
    text-align: inherit;
}

.product-item .prices:has(+ .smart-ribbon-bank-promos.srb-compact) > * {
    margin-bottom: 2px !important;
}

/* Still too tall: the product box's own padding above and below its details is trimmed. */
.product-item.srb-tight .details {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
}

/* 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; }