/* Savonia_TopSales 2026-11-03: "Top vânzări" badge on the 100 best sellers (Kristi / Szabolcs).
   Under the campaign label (BLACK FRIDAY) or the "new" label, in its place when there is none.
   Colour: deep olive from the Savonia green family + a honey flame; differs from the campaign label (black on the cards,
   #e27c7c on the Porto home cards), the menu NEW (#0cc485) / HOT (#eb2771) and the orange cart button.
   The selectors carry their parent class: this file may load before or after savonia-rail.css / savonia-pp.css.
   Always span.sv-top, never a bare .sv-top: the header top bar is div.top-links.container.sv-top (savonia-menu.css);
   r1 (13:05) coloured that bar and was fixed in r2. */
span.sv-top {
    display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
    padding: 4px 9px 4px 7px; border-radius: 12px; background: #2f4f1d; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
span.sv-top svg { flex: none; width: 12px; height: 12px; fill: #f6c445; }

/* Savonia cards (category, search, product page rails, cart): the labels stack in the top-right corner */
.sv-card .sv-card__labels {
    position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    max-width: calc(100% - 24px); pointer-events: none;
}
.sv-card .sv-card__labels > .sv-card__label { position: static; }

/* product page gallery: top-left, under the label (same size as .sv-gal__label) */
.sv-gal .sv-gal__labels {
    position: absolute; top: 20px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    pointer-events: none;
}
.sv-gal .sv-gal__labels > .sv-gal__label { position: static; }
.sv-gal .sv-gal__labels > span.sv-top { gap: 5px; padding: 5px 11px 5px 9px; font-size: 12px; }
.sv-gal .sv-gal__labels > span.sv-top svg { width: 13px; height: 13px; }

/* Porto cards of the home rails (filterproducts/list.phtml): Porto labels are 26px high at top 10px / 40px (right 10px);
   the badge takes the next 30px step after however many labels precede it (the favourites heart is top-left) */
.product-image-area > .sv-top-label { position: absolute; top: 10px; right: 10px; z-index: 3; line-height: 1; pointer-events: none; }
.product-image-area > .product-label ~ .sv-top-label { top: 40px; }
.product-image-area > .product-label ~ .product-label ~ .sv-top-label { top: 70px; }
.product-image-area > .sv-top-label > span.sv-top { gap: 5px; padding: 7px 10px 7px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1; }