/* Savonia Tier-Price-Bar 2026-11-04: "Cumpără mai multe" bar above the benefit cards (savonia/productpage/tierbar.phtml).
   Loaded only on product pages that have a tier price. Tokens: --sv-* (savonia-rail.css / savonia-base). */
.sv-tier { margin: 28px 0 0; }
.sv-tier__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 12px; }
.sv-tier .sv-tier__title {
    margin: 0; padding: 0; border: 0; color: var(--sv-text, #2f2f2f); font-size: 20px; font-weight: 700; line-height: 1.3;
    letter-spacing: 0; text-transform: none;
}
.sv-tier__count { color: var(--sv-muted, #6b6b6b); font-size: 14px; }
.sv-tier__note { flex: 0 0 100%; margin: 0; color: var(--sv-muted, #6b6b6b); font-size: 13px; line-height: 1.45; }
.sv-tier__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv-tier .sv-tier__row {
    /* r5: fixed columns, so the prices and buttons of every row are in one line (each row is its own grid) */
    display: grid; grid-template-columns: minmax(0, 1fr) 230px 160px 220px;
    grid-template-areas: "prod calc sum btn" "on on on on";
    align-items: center; gap: 0 28px; margin: 0; padding: 14px 18px;
    background: #fff; border-top: 4px solid var(--sv-green, #a9cf45); border-radius: var(--sv-radius, 10px); box-shadow: var(--sv-shadow, 0 2px 12px rgba(0, 0, 0, .07));
    transition: box-shadow .2s;
}
.sv-tier__prod { grid-area: prod; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sv-tier__img {
    flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--sv-line, #ececec); border-radius: 8px;
    background: #fff; object-fit: contain;
}
.sv-tier__id { min-width: 0; }
.sv-tier__badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sv-green-soft, #f3f8e6);
    color: #4a6214; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.sv-tier .sv-tier__name {
    display: -webkit-box; overflow: hidden; margin: 4px 0 0; color: var(--sv-text, #2f2f2f); font-size: 14px; line-height: 1.35;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.sv-tier .sv-tier__calc { grid-area: calc; margin: 0; color: var(--sv-muted, #6b6b6b); font-size: 15px; line-height: 1.4; white-space: normal; }
.sv-tier__calc strong { color: var(--sv-text, #2f2f2f); font-weight: 700; }
.sv-tier__x { padding: 0 2px; color: var(--sv-muted, #6b6b6b); }
.sv-tier__nb { white-space: nowrap; }
.sv-tier__sum { grid-area: sum; display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; }
.sv-tier__sep { color: var(--sv-muted, #6b6b6b); font-size: 13px; white-space: nowrap; }
.sv-tier__total { margin: 1px 0; color: #ee3124; font-size: 22px; font-weight: 700; white-space: nowrap; }
.sv-tier__save { color: #ee3124; font-size: 13px; font-weight: 700; white-space: nowrap; } /* r4: red like the price (Szabolcs) */
.sv-tier .sv-tier__btn {
    grid-area: btn; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; margin: 0; padding: 0 24px; border: 0; border-radius: 24px;
    background: var(--sv-orange, #dc8430); color: #fff; box-shadow: 0 4px 12px rgba(220, 132, 48, .24);
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: none; white-space: nowrap;
    cursor: pointer; transition: background-color .2s, transform .1s;
}
/* r5: the button fills its fixed column (same width in every row); phones: full width below */
.sv-tier .sv-tier__btn { width: 100%; padding: 0 16px; }
.sv-tier .sv-tier__btn:hover { background: var(--sv-orange-dark, #c06d1c); }
.sv-tier .sv-tier__btn:active { transform: scale(.98); }
.sv-tier .sv-tier__btn:focus-visible { outline: 3px solid var(--sv-green-dark, #7fa12a); outline-offset: 2px; }
.sv-tier__btn svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-tier .sv-tier__btn.is-busy { opacity: .75; cursor: progress; }
.sv-tier .sv-tier__btn.is-added { background: var(--sv-green-dark, #7fa12a); box-shadow: none; }
/* the row whose price the main qty field already gets */
.sv-tier .sv-tier__on {
    grid-area: on; display: none; align-items: center; gap: 6px; margin: 10px 0 0;
    color: #4a6214; font-size: 13px; font-weight: 700; line-height: 1.4;
}
.sv-tier__on svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-tier .sv-tier__row.is-active { box-shadow: 0 0 0 2px var(--sv-green, #a9cf45), var(--sv-shadow, 0 2px 12px rgba(0, 0, 0, .07)); }
.sv-tier .sv-tier__row.is-active .sv-tier__on { display: flex; }

/* r2 2026-11-05 (Szabolcs): large screens – more white space left and right, the information closer together */
@media (min-width: 1200px) {
    .sv-tier .sv-tier__row { padding: 14px 50px; }
}
/* tablet: [product / calc] [sum] [button] */
@media (max-width: 991px) {
    .sv-tier .sv-tier__row { grid-template-columns: minmax(0, 1fr) 160px 210px; grid-template-areas: "prod sum btn" "calc sum btn" "on on on"; gap: 0 20px; }
    .sv-tier .sv-tier__calc { margin: 6px 0 0 68px; font-size: 14px; }
}
/* phones: a card – product, then [calc | sum], then a full-width button */
@media (max-width: 767px) {
    .sv-tier { margin-top: 22px; }
    .sv-tier .sv-tier__title { font-size: 18px; }
    .sv-tier .sv-tier__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod prod" "calc sum" "btn btn" "on on"; gap: 0 12px; padding: 14px; }
    .sv-tier .sv-tier__calc { align-self: end; margin: 12px 0 0; white-space: normal; }
    .sv-tier__sum { margin-top: 12px; }
    .sv-tier__total { font-size: 20px; }
    .sv-tier .sv-tier__btn { width: 100%; margin-top: 12px; }
}
@media (max-width: 359px) {
    .sv-tier .sv-tier__row { grid-template-areas: "prod prod" "calc calc" "sum sum" "btn btn" "on on"; }
    .sv-tier__sum { align-items: flex-start; text-align: left; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-tier .sv-tier__row, .sv-tier .sv-tier__btn { transition: none; }
    .sv-tier .sv-tier__btn:active { transform: none; }
}