/* Savonia Gallery-Cart 2026-11-13: buy block at the bottom of the full-screen image viewer (js/savonia-galcart.js).
   .sv-lb__foot = the viewer's thumbnail strip (moved here) + .sv-lbb (PRP + price + "Adaugă în coș").
   >= 768px: one row, thumbnails left (centred in their space), buy block right. < 768px: thumbnails, then a buy row.
   The viewer is a flex column: the footer takes its own height, the image area shrinks, nothing covers the image.
   r2 (same day, Szabolcs): the button is the product page's main button (orange --sv-orange, cart icon, 50px, 17px bold,
   savonia-pp.css .sv-buy .btn-cart.sv-buy__btn) – one design. The price + button sit on a big pale Savonia leaf
   (white background, the leaf aligned bottom right; .sv-lb__deco clips only the leaf, so the button's message bubble can
   still rise above the bar). */
.sv-lb__foot { flex: 0 0 auto; border-top: 1px solid var(--sv-line, #ececec); background: #fff; }
.sv-lb.has-buy .sv-lb__thumbs { padding-bottom: 10px; }
.sv-lbb {
    position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom)); color: var(--sv-text, #2f2f2f); font-family: inherit;
}
.sv-lb__thumbs + .sv-lbb { border-top: 1px solid var(--sv-line, #ececec); }
.sv-lbb__price {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; margin: 0;
    line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums;
}
.sv-lbb__qty { color: var(--sv-muted, #6b6b6b); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.sv-lbb__prp { color: var(--sv-muted, #6b6b6b); font-size: 13px; line-height: 1.4; white-space: nowrap; }
.sv-lbb__prp s { text-decoration: line-through; }
.sv-lbb__val { color: var(--sv-text, #2f2f2f); font-size: 22px; font-weight: 700; white-space: nowrap; }
.sv-lbb__price.has-prp .sv-lbb__val { color: #ee3124; } /* the product page's sale red */

/* the buy block: white, a big pale leaf in its bottom right corner, the price and the button on top */
.sv-lb__deco { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sv-lb__deco .sv-lbb__leaf {
    position: absolute; right: -18px; bottom: -62px; display: block; width: 230px; height: 182px;
    fill: var(--sv-green, #a9cf45); opacity: .3; transform: rotate(-6deg);
}
.sv-lbb > .sv-lbb__price, .sv-lb .sv-lbb > .sv-lbb__btn { position: relative; z-index: 1; }
.sv-lb .sv-lbb__btn {
    -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; align-items: center;
    justify-content: center; min-width: 0; min-height: 50px; margin: 0; padding: 0 28px;
    border: 0; border-radius: 25px; background: var(--sv-orange, #dc8430); color: #fff; box-shadow: 0 4px 12px rgba(220, 132, 48, .28);
    font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
    white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color .2s, transform .1s;
}
.sv-lb .sv-lbb__btn:hover { background: var(--sv-orange-dark, #c06d1c); }
.sv-lb .sv-lbb__btn:active { transform: scale(.98); }
.sv-lb .sv-lbb__btn:focus { outline: none; }
.sv-lb .sv-lbb__btn:focus-visible { outline: 2px solid var(--sv-green-dark, #7fa12a); outline-offset: 3px; }
.sv-lb .sv-lbb__btn.is-busy { cursor: progress; }
.sv-lb .sv-lbb__btn.is-ok { background: var(--sv-green, #a9cf45); box-shadow: none; } /* like .btn-cart.is-added */
.sv-lbb__st { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .15s, transform .15s; }
.sv-lbb__busy, .sv-lbb__ok { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transform: translateY(4px); }
.sv-lbb__btn.is-busy .sv-lbb__idle, .sv-lbb__btn.is-ok .sv-lbb__idle { opacity: 0; transform: translateY(-4px); }
.sv-lbb__btn.is-busy .sv-lbb__busy, .sv-lbb__btn.is-ok .sv-lbb__ok { opacity: 1; transform: none; }
.sv-lbb__icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-lbb__ts { display: none; }
.sv-lbb__spin {
    display: block; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    animation: sv-lbb-spin .8s linear infinite;
}
@keyframes sv-lbb-spin { to { transform: rotate(360deg); } }
.sv-lbb__msg {
    position: absolute; right: 16px; bottom: 100%; max-width: calc(100% - 32px); margin: 0 0 8px; padding: 8px 12px;
    border: 1px solid #e3a5a0; border-radius: 8px; background: #fdf0ef; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    color: #b3261e; font-size: 14px; font-weight: 600; line-height: 1.45;
}
.sv-lbb__msg:empty { display: none; }

@media (min-width: 768px) {
    .sv-lb.has-buy .sv-lb__foot { display: flex; align-items: center; }
    .sv-lb.has-buy .sv-lb__foot .sv-lb__thumbs { flex: 1 1 auto; min-width: 0; padding-bottom: 16px; }
    .sv-lb.has-buy .sv-lbb { flex: 0 0 auto; align-self: stretch; margin-left: auto; padding: 12px 24px 12px 16px; border-top: 0; }
    .sv-lbb__val { font-size: 24px; }
}
@media (max-width: 767px) {
    .sv-lb.has-buy .sv-lb__thumbs { padding-bottom: 8px; }
    .sv-lbb { justify-content: space-between; padding-top: 8px; }
    .sv-lbb__price { align-items: flex-start; text-align: left; }
}
/* phones: the main button's 15px label (savonia-pp.css <= 479px); under 400px it has no cart icon either */
@media (max-width: 479px) { .sv-lb .sv-lbb__btn { padding: 0 22px; font-size: 15px; } }
@media (max-width: 399px) { .sv-lbb__icon { display: none; } }
/* very narrow phones: the short label ("Adaugă"), the button stays 50px high */
@media (max-width: 359px) {
    .sv-lbb { gap: 10px; padding-left: 12px; padding-right: 12px; }
    .sv-lbb__t { display: none; }
    .sv-lbb__ts { display: inline; }
    .sv-lb .sv-lbb__btn { padding: 0 16px; }
    .sv-lbb__val { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-lbb__st, .sv-lb .sv-lbb__btn { transition: none; }
    .sv-lbb__spin { animation-duration: 2s; }
}