/* Aurora skin for the purchase path: cart, checkout, confirmation, pay-later (sales::pay), the public payment link
   (payments::pay-link) and parcel tracking (/urmarire). Loaded after the module stylesheets, so it restyles their
   markup and the markup injected by cart.js, checkout.js, locker-picker.js and coupon.js.
   The category standard of the big stores: white page, soft surfaces, 12px radius, warm orange only for the buying
   buttons, blue for selected options, links and steps, red for discounts. Tokens from tokens.css only. */

/* ==========================================================================
   1. Frame and shared pieces
   ========================================================================== */
.sl-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-7); box-sizing: border-box; color: var(--c-text); font-family: var(--font-body); }
.sl-wrap [hidden] { display: none !important; }
.sl-wrap .icon { width: 1.2em; height: 1.2em; stroke-width: 2; vertical-align: -.22em; flex: none; }
.sl-page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.sl-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); font-weight: var(--heading-weight); line-height: 1.15; letter-spacing: -.02em; color: var(--c-text); }
.sl-count { margin-left: .15em; color: var(--c-muted); font-size: .55em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.sl-back-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--c-link); font-weight: 700; }
.sl-muted { color: var(--c-muted); }
.sl-small { font-size: .875rem; }
.sl-center { text-align: center; }
.sl-text-danger { color: var(--c-danger); }
.sl-link { padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.sl-link:hover { color: var(--c-brand-hover); }
.sl-wrap .num { font-variant-numeric: tabular-nums; }

/* Cards: white with a light rule (forms, lines); summaries sit on the soft surface. */
.sl-card { min-width: 0; padding: var(--space-5); border: var(--rule); border-radius: var(--radius); background: var(--c-bg); box-shadow: none; }
.sl-card + .sl-card { margin-top: var(--space-4); }
.sl-card-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: 1.2rem; font-weight: var(--heading-weight); line-height: 1.25; letter-spacing: -.01em; color: var(--c-text); }
.sl-card-title > .icon { color: var(--c-brand); }
.sl-card-lead { margin: calc(-1 * var(--space-2)) 0 var(--space-4); color: var(--c-muted); font-size: .95rem; }

/* Buttons. sl-btn-primary is the buying button (orange); everything else stays quiet. */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.2rem; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s, color .15s, transform .1s; }
.sl-btn:hover { border-color: var(--c-text); background: var(--c-bg); color: var(--c-text); text-decoration: none; filter: none; }
.sl-btn:active { transform: translateY(1px); }
.sl-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.sl-btn-primary { border-color: var(--c-action); background: var(--c-action); color: var(--c-action-ink); }
.sl-btn-primary:hover { border-color: var(--c-action-hover); background: var(--c-action-hover); color: var(--c-action-ink); }
.sl-btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-action); }
.sl-btn-secondary { border-color: var(--c-border-strong); background: var(--c-bg); color: var(--c-text); }
.sl-btn-ghost { border-color: transparent; background: transparent; color: var(--c-link); }
.sl-btn-ghost:hover { border-color: transparent; background: var(--c-brand-soft); color: var(--c-link); }
.sl-btn-soft { border-color: transparent; background: var(--c-brand-soft); color: var(--c-brand); }
.sl-btn-soft:hover { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand); }
.sl-btn-sm { min-height: 44px; padding: .5rem .9rem; font-size: .93rem; }
.sl-btn-lg { min-height: 54px; padding: .85rem 1.5rem; font-size: 1.08rem; }
.sl-btn-block { width: 100%; }
.sl-btn.is-disabled, .sl-btn:disabled { opacity: .45; pointer-events: none; }
.sl-btn.is-busy { opacity: .75; pointer-events: none; cursor: progress; }

.sl-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.sl-icon-btn:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.sl-icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.sl-alert { display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 var(--space-4); padding: .9rem 1rem; border: 0; border-radius: var(--radius-sm); background: var(--c-info-soft); color: var(--c-info); font-size: .97rem; line-height: 1.45; }
.sl-alert > .icon { width: 1.3rem; height: 1.3rem; margin-top: .05rem; }
.sl-alert-success { background: var(--c-success-soft); color: var(--c-success); }
.sl-alert-danger, .sl-alert-error { background: var(--c-danger-soft); color: var(--c-danger); }
.sl-alert-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.sl-alert-info { background: var(--c-info-soft); color: var(--c-info); }
.sl-badge { display: inline-flex; align-items: center; gap: .3em; padding: .25rem .55rem; border-radius: 6px; background: var(--c-surface-2); color: var(--c-text); font-size: .8rem; font-weight: 800; line-height: 1.1; }
.sl-badge-success { background: var(--c-success-soft); color: var(--c-success); }
.sl-badge-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.sl-badge-sale { background: var(--c-sale); color: #fff; }

/* Facts under the buying buttons (plain text with an icon, no badges) */
.sl-fact { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: var(--space-4) 0 0; color: var(--c-muted); font-size: .9rem; text-align: center; }
.sl-fact .icon { color: var(--c-success); }

/* ==========================================================================
   2. Form controls (inputs come from theme.css; only the extras live here)
   ========================================================================== */
.sl-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.sl-span-2 { grid-column: auto; }
@media (min-width: 600px) { .sl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-span-2 { grid-column: 1 / -1; } }
.sl-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; color: var(--c-text); font-size: .95rem; font-weight: 700; }
.sl-field > span:first-child { display: block; margin: 0; }
.sl-field-note { color: var(--c-muted); font-size: .85rem; font-weight: 400; }
.sl-field-hint { margin: var(--space-3) 0 0; color: var(--c-muted); font-size: .9rem; }
.sl-req { color: var(--c-danger); font-style: normal; }
.sl-optional { color: var(--c-muted); font-size: .85rem; font-weight: 400; }
.sl-input-row { display: flex; gap: var(--space-2); }
.sl-input-row input { flex: 1; min-width: 0; }
.sl-input-row .sl-btn { flex: none; min-height: 48px; }
.sl-wrap .sl-field.has-error input:not([type="checkbox"]):not([type="radio"]), .sl-wrap .sl-field.has-error select:not([multiple]), .sl-wrap .sl-field.has-error textarea:not([readonly]) { border-color: var(--c-danger); box-shadow: inset 0 0 0 1px var(--c-danger); }
.sl-wrap .sl-field.has-error input:not([type="checkbox"]):not([type="radio"]):focus { box-shadow: inset 0 0 0 1px var(--c-danger), 0 0 0 3px color-mix(in srgb, var(--c-danger) 25%, transparent); }
.sl-wrap .sl-field.has-error > span:first-child { color: var(--c-danger); }
.sl-error { display: flex; align-items: flex-start; gap: .4rem; margin-top: .15rem; color: var(--c-danger); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.sl-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.05rem; height: 1.05rem; margin-top: .05rem; border-radius: 50%; background: var(--c-danger); color: #fff; font-size: .7rem; font-weight: 800; }
.sl-quotes + .sl-error, .sl-methods + .sl-error, .sl-terms + .sl-error { margin-top: var(--space-2); }

.sl-check { display: flex; align-items: flex-start; gap: .7rem; margin: var(--space-4) 0 0; padding: .35rem 0; color: var(--c-text); font-size: .97rem; font-weight: 400; line-height: 1.45; cursor: pointer; flex-wrap: wrap; }
.sl-check > span { flex: 1; min-width: 0; padding-top: .1rem; }
.sl-check input[type="checkbox"] { flex: none; width: 1.3rem; height: 1.3rem; margin: .12rem 0 0; accent-color: var(--c-brand); cursor: pointer; }
.sl-check a { color: var(--c-link); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.sl-check.has-error > span { color: var(--c-danger); }
.sl-check.has-error input[type="checkbox"] { outline: 2px solid var(--c-danger); outline-offset: 2px; }
.sl-check > .sl-error { flex-basis: 100%; margin-left: calc(1.3rem + .7rem); }

/* Two-way choice (person / company, address / showroom) */
.sl-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.sl-segment-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.sl-segment-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl-segment-opt span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .6rem .75rem; border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-weight: 700; line-height: 1.25; text-align: center; transition: border-color .15s, background-color .15s, color .15s; }
.sl-segment-opt span .icon { color: var(--c-muted); }
.sl-segment-opt:hover span { border-color: var(--c-brand); }
.sl-segment-opt input:checked + span { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.sl-segment-opt input:checked + span .icon { color: var(--c-brand); }
.sl-segment-opt input:focus-visible + span { box-shadow: inset 0 0 0 1px var(--c-brand), var(--focus); }

/* ==========================================================================
   3. Selectable option cards: shipping quotes, payment methods, gateways
      (markup also rendered by cart.js and checkout.js)
   ========================================================================== */
.sl-quotes, .sl-methods { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; transition: opacity .2s var(--ease); }
.sl-estimate .sl-quotes:not(:empty) { margin-top: var(--space-4); }
.sl-quotes[aria-busy="true"], .sl-methods[aria-busy="true"] { opacity: .5; pointer-events: none; }
.sl-quote, .sl-method { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-height: 64px; margin: 0; padding: var(--space-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); }
.sl-quote:hover, .sl-method:hover { border-color: var(--c-brand); }
.sl-quote:has(input:checked), .sl-method:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-soft); box-shadow: inset 0 0 0 1px var(--c-brand); }
.sl-quote:has(input:focus-visible), .sl-method:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--c-brand), var(--focus); }
.sl-wrap .sl-quote > input[type="radio"], .sl-wrap .sl-method > input[type="radio"] { grid-column: 1; -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--c-border-strong); border-radius: 50%; background: var(--c-bg); cursor: pointer; transition: border-width .15s var(--ease), border-color .15s; }
.sl-wrap .sl-quote > input[type="radio"]:checked, .sl-wrap .sl-method > input[type="radio"]:checked { border: 7px solid var(--c-brand); }
.sl-wrap .sl-quote > input[type="radio"]:focus-visible, .sl-wrap .sl-method > input[type="radio"]:focus-visible { outline: none; box-shadow: none; }
.sl-quote-label { grid-column: 2; display: block; min-width: 0; color: var(--c-text); font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sl-quote-label small { display: block; margin-top: .2rem; color: var(--c-muted); font-size: .88rem; font-weight: 400; line-height: 1.4; }
.sl-quote-label small + small { margin-top: .1rem; color: var(--c-text); }
.sl-quote > strong, .sl-method > strong { grid-column: 3; justify-self: end; color: var(--c-text); font-size: 1.02rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl-method > strong.sl-small { color: var(--c-muted); font-size: .9rem; font-weight: 700; }
.sl-quotes-checkout.has-error .sl-quote, .sl-methods.has-error .sl-method { border-color: var(--c-danger); }
@media (max-width: 379px) {
  .sl-quote, .sl-method { gap: var(--space-1) var(--space-3); padding: var(--space-3); }
  .sl-quote > strong, .sl-method > strong { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   4. Totals (cart, checkout; confirmation reuses the classes)
   ========================================================================== */
.sl-totals { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.sl-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin: 0; font-size: 1rem; }
.sl-totals dt { min-width: 0; color: var(--c-text); font-weight: 400; }
.sl-totals dd { max-width: 60%; margin: 0; color: var(--c-text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sl-totals dd .sl-muted { display: block; color: var(--c-muted); font-size: .85rem; font-weight: 400; line-height: 1.35; }
.sl-totals-discount dt, .sl-totals-discount dd, .sl-totals-discount-total dt, .sl-totals-discount-total dd { color: var(--c-sale); }
.sl-totals-vat { font-size: .9rem !important; }
.sl-totals-vat dt, .sl-totals-vat dd { color: var(--c-muted); font-weight: 400; }
.sl-totals-grand { align-items: center !important; margin-top: var(--space-2) !important; padding-top: var(--space-4); border-top: 1px solid var(--c-border-strong); }
.sl-totals-grand dt { color: var(--c-text); font-size: 1.1rem; font-weight: 800; }
.sl-totals-grand dd { max-width: none; color: var(--c-text); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }

/* Summary card (cart + checkout) */
.sl-summary { padding: var(--space-5); border-radius: var(--radius); background: var(--c-surface); }
.sl-summary-title { margin: 0 0 var(--space-4); font-size: 1.3rem; font-weight: var(--heading-weight); letter-spacing: -.01em; }
.sl-summary .sl-btn { margin-top: 0; }
.sl-summary .sl-checkout-btn, .sl-summary .sl-place { margin-top: var(--space-5); }
.sl-sticky { position: static; }

/* ==========================================================================
   5. Cart
   ========================================================================== */
.sl-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sl-cart-main { min-width: 0; container: sl-cart / inline-size; }
.sl-cart-items { padding: 0 var(--space-5); }
.sl-lines-head { display: none; }
.sl-lines { list-style: none; margin: 0; padding: 0; }
/* very narrow column (small phones): thumb + name, code and unit price; quantity and total on the row below */
.sl-line { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 44px; grid-template-areas: "thumb info info remove" "thumb price price price" "qty qty total total"; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-4) 0; border-top: var(--rule); transition: opacity .2s var(--ease); }
.sl-line:first-child { border-top: 0; }
.sl-line.is-busy { opacity: .5; pointer-events: none; }
.sl-line > .sl-thumb { grid-area: thumb; }
.sl-line-info { grid-area: info; min-width: 0; }
.sl-line-price { grid-area: price; }
.sl-line-qty { grid-area: qty; align-self: center; }
.sl-line-total { grid-area: total; align-self: center; }
.sl-line-remove { grid-area: remove; justify-self: end; margin: -.5rem -.5rem 0 0; }
.sl-thumb { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: var(--radius); background: var(--c-surface); color: var(--c-border-strong); overflow: hidden; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-thumb .icon { width: 1.8rem; height: 1.8rem; }
.sl-product-name { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-text); font-size: 1.02rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sl-product-name:hover { color: var(--c-brand); text-decoration: none; }
.sl-line-sku { margin: .3rem 0 0; color: var(--c-muted); font-size: .88rem; }
.sl-line-flag { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 0; color: var(--c-danger); font-size: .9rem; font-weight: 700; }
.sl-line-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; color: var(--c-text); font-size: .95rem; }
.sl-line-price-label { color: var(--c-muted); }
.sl-line-unit { font-weight: 700; white-space: nowrap; }
.sl-line-unit.is-sale { color: var(--c-sale); }
.sl-line-was { display: inline-flex; align-items: center; gap: .4rem; color: var(--c-muted); font-size: .88rem; white-space: nowrap; }
.sl-unit { color: var(--c-muted); font-size: .85rem; font-weight: 400; }
.sl-line-total { justify-self: end; color: var(--c-text); font-size: 1.15rem; font-weight: 800; text-align: right; white-space: nowrap; }
.sl-line-total .sl-small { font-size: .82rem; font-weight: 400; }
/* phones and tablets: thumb + name and code on top; unit price, quantity and total on one row below */
@container sl-cart (min-width: 400px) {
  .sl-line { grid-template-columns: 80px minmax(0, 1fr) auto minmax(44px, auto); grid-template-areas: "thumb info info remove" "price price qty total"; gap: var(--space-3) var(--space-3); padding: var(--space-5) 0; }
  .sl-line > .sl-thumb { width: 80px; height: 80px; }
  .sl-line-price { flex-direction: column; align-items: flex-start; gap: 0; align-self: center; font-size: .93rem; line-height: 1.3; }
  .sl-line-price-label { font-size: .85rem; }
  .sl-line-total { justify-self: end; min-width: 44px; }
}
@container sl-cart (min-width: 480px) {
  .sl-line { grid-template-columns: 96px minmax(0, 1fr) auto minmax(44px, auto); column-gap: var(--space-4); }
  .sl-line > .sl-thumb { width: 96px; height: 96px; }
}
/* wide column: one row per product, aligned under a quiet header */
@container sl-cart (min-width: 760px) {
  .sl-lines-head, .sl-line { grid-template-columns: 96px minmax(0, 1fr) 132px 148px 128px 44px; column-gap: var(--space-4); }
  .sl-lines-head { display: grid; align-items: center; padding: var(--space-4) 0 var(--space-3); border-bottom: var(--rule); color: var(--c-muted); font-size: .9rem; font-weight: 600; }
  .sl-lines-head > span:first-child { grid-column: 1 / 3; }
  .sl-lines-head .num { text-align: right; }
  .sl-line { grid-template-areas: "thumb info price qty total remove"; align-items: center; }
  .sl-line > .sl-thumb, .sl-line-info { align-self: center; }
  .sl-line-total { justify-self: stretch; }
  .sl-line-price { flex-direction: column; align-items: flex-end; text-align: right; }
  .sl-line-price-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sl-line-qty { justify-self: center; }
  .sl-line-remove { margin: 0 -.25rem 0 0; align-self: center; }
  .sl-product-name { -webkit-line-clamp: 2; }
}
.sl-unavailable .sl-thumb, .sl-unavailable .sl-product-name, .sl-unavailable .sl-line-price, .sl-unavailable .sl-line-qty, .sl-unavailable .sl-line-total { opacity: .55; }

/* quantity stepper (44px targets) */
.sl-qty { display: inline-flex; align-items: stretch; height: 46px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-bg); overflow: hidden; }
.sl-qty:focus-within { border-color: var(--c-brand); box-shadow: var(--focus); }
.sl-qty-btn { display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: transparent; color: var(--c-text); cursor: pointer; transition: background-color .15s, color .15s; }
.sl-qty-btn:hover { background: var(--c-surface); color: var(--c-brand); }
.sl-qty-btn:focus-visible { outline: none; background: var(--c-brand-soft); color: var(--c-brand); }
.sl-qty-btn .icon { width: 1rem; height: 1rem; stroke-width: 2.6; }
.sl-wrap .sl-qty input.sl-qty-input[type][name] { width: 54px; min-height: 0; height: 100%; margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--c-text); font: inherit; font-size: 16px; font-weight: 800; text-align: center; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.sl-qty-input::-webkit-outer-spin-button, .sl-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sl-cart-actions { display: flex; justify-content: flex-end; padding: var(--space-3) 0; border-top: var(--rule); }
.sl-estimate-card { margin-top: var(--space-4); }

/* coupon: a disclosure under the checkout button */
.sl-coupon { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-border); }
.sl-coupon p { margin: var(--space-2) 0 0; }
.sl-coupon-box > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--c-link); font-weight: 700; cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.sl-coupon-box > summary::-webkit-details-marker { display: none; }
.sl-coupon-box > summary::marker { content: ""; }
.sl-coupon-box > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.sl-coupon-box > summary:hover { text-decoration: underline; text-underline-offset: .18em; }
.sl-coupon-caret { margin-left: auto; transition: transform .2s var(--ease); }
.sl-coupon-box[open] .sl-coupon-caret { transform: rotate(180deg); }
.sl-wrap .sl-inline-form { display: flex; flex-direction: row; gap: var(--space-2); margin-top: var(--space-2); }
.sl-inline-form input { flex: 1; min-width: 0; }
.sl-inline-form .sl-btn { flex: none; min-height: 48px; }
.sl-coupon-active { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); }
.sl-coupon-code { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; overflow-wrap: anywhere; }
.sl-coupon-code .icon { color: var(--c-sale); }
.sl-coupon-active .sl-link { min-height: 44px; font-size: .92rem; }
.sl-coupon .mkt-form-msg.ok { color: var(--c-success); }
.sl-coupon .mkt-form-msg.err { color: var(--c-danger); }
.sl-min-order { display: flex; align-items: flex-start; gap: .5rem; margin: var(--space-4) 0 0; padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--c-warning-soft); color: var(--c-warning); font-size: .93rem; font-weight: 600; }
.sl-continue { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--space-2); color: var(--c-link); font-weight: 700; }

/* empty cart */
.sl-empty { max-width: 640px; margin: var(--space-4) auto var(--space-6); padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); background: var(--c-surface); text-align: center; }
.sl-empty-icon { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto var(--space-5); border-radius: 50%; background: var(--c-bg); color: var(--c-brand); }
.sl-empty .sl-empty-icon .icon { width: 44px; height: 44px; stroke-width: 1.8; }
.sl-empty-title { margin: 0 0 var(--space-2); font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.sl-empty-text { max-width: 44ch; margin: 0 auto var(--space-5); color: var(--c-muted); font-size: 1.05rem; }
.sl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
@media (max-width: 479px) { .sl-empty { padding: var(--space-6) var(--space-4); } .sl-empty-actions .btn { width: 100%; } }

/* sticky total bar on phones and tablets */
.sl-mobilebar { display: none; }
@media (min-width: 960px) {
  .sl-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); }
  .sl-sticky { position: sticky; top: var(--space-5); }
  .sticky-header .sl-sticky { top: calc(var(--header-h) - 18px); }
}
@media (max-width: 959px) {
  .sl-mobilebar { position: sticky; bottom: 0; z-index: var(--z-sticky-bar); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) calc(-1 * var(--gutter)) calc(-1 * var(--space-7)); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: var(--rule); background: var(--c-bg); box-shadow: 0 -8px 20px -14px rgba(31, 35, 40, .35); }
  .sl-mobilebar-total { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .sl-mobilebar-total span { color: var(--c-muted); font-size: .85rem; }
  .sl-mobilebar-total strong { color: var(--c-text); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
  .sl-mobilebar .sl-btn { flex: none; min-height: 50px; }
}
@media (max-width: 599px) {
  .sl-cart-items { padding: 0 var(--space-4); }
}
@container sl-cart (max-width: 459px) {
  .sl-qty-btn { width: 40px; }
  .sl-wrap .sl-qty input.sl-qty-input[type][name] { width: 46px; }
}
@media (max-width: 359px) {
  .sl-wrap .sl-qty input.sl-qty-input[type][name] { width: 44px; }
  .sl-line-total { font-size: 1.05rem; }
  .sl-mobilebar { gap: var(--space-2); }
  .sl-mobilebar-total strong { font-size: 1.1rem; }
  .sl-mobilebar .sl-btn { padding-inline: .7rem; font-size: .9rem; }
  .sl-mobilebar .sl-btn .icon { display: none; }
}

/* ==========================================================================
   6. Order steps (checkout + confirmation)
   ========================================================================== */
.sl-progress { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; color: var(--c-muted); font-size: .95rem; font-weight: 700; }
.sl-progress li { display: flex; align-items: center; gap: var(--space-3); }
.sl-progress li > a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: inherit; }
.sl-progress li > a:hover { color: var(--c-brand); }
.sl-progress li + li::before { content: ""; width: clamp(20px, 5vw, 64px); height: 2px; border-radius: 2px; background: var(--c-border-strong); }
.sl-progress li:not(:has(> a)) { min-height: 44px; gap: .55rem; }
.sl-progress li + li:not(:has(> a)) { gap: var(--space-3); }
.sl-progress-no { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--c-border-strong); border-radius: 50%; background: var(--c-bg); color: var(--c-muted); font-size: .9rem; font-weight: 800; }
.sl-progress-no .icon { width: 15px; height: 15px; stroke-width: 3; vertical-align: 0; }
.sl-progress .is-done, .sl-progress .is-current { color: var(--c-text); }
.sl-progress .is-done .sl-progress-no { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-brand-ink); }
.sl-progress .is-done + li::before { background: var(--c-brand); }
.sl-progress .is-current .sl-progress-no { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-brand-ink); }
@media (max-width: 479px) {
  .sl-progress { font-size: .88rem; gap: var(--space-2); }
  .sl-progress li + li::before { width: 14px; }
  .sl-progress li:not(.is-current) > a, .sl-progress li:not(.is-current) { font-size: 0; }
  .sl-progress li:not(.is-current) .sl-progress-no { font-size: .85rem; }
}

/* ==========================================================================
   7. Checkout
   ========================================================================== */
.sl-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sl-checkout-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sl-checkout-main > .sl-card { margin: 0; }
.sl-step { padding: var(--space-5) var(--space-5) var(--space-6); }
.sl-step-title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); font-size: 1.3rem; font-weight: var(--heading-weight); line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: calc(var(--header-h) + 16px); }
.sl-step-title:focus { outline: none; }
.sl-step-no { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-brand); color: var(--c-brand-ink); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.sl-subhead { display: flex; align-items: center; gap: .5rem; margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-5); border-top: var(--rule); font-size: 1.05rem; font-weight: 800; }
.sl-subhead .icon { color: var(--c-brand); }
.sl-company, .sl-billing-address { margin: 0; }
.sl-account-opt .sl-field { margin-top: var(--space-3); }
.sl-pickup-info { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); line-height: 1.5; }
.sl-pickup-info .icon { margin-top: .1rem; color: var(--c-brand); width: 1.35rem; height: 1.35rem; }
.sl-pickup-info small { color: var(--c-muted); font-size: .9rem; }
.sl-notes { margin: 0; }
.sl-wrap .sl-notes textarea { min-height: 96px; }
.sl-wrap [id^="co-"], .sl-wrap .sl-step { scroll-margin-top: calc(var(--header-h) + 24px); }

/* error summary printed after a server rejection */
.sl-errsum { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent); border-radius: var(--radius); background: var(--c-danger-soft); color: var(--c-text); }
.sl-errsum:focus { outline: none; }
.sl-errsum-title { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 var(--space-2); color: var(--c-danger); font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.sl-errsum-title .icon { margin-top: .1rem; }
.sl-errsum ul { margin: 0; padding-left: calc(1.2em + .5rem); }
.sl-errsum li { margin: .2rem 0; }
.sl-errsum a { color: var(--c-danger); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
body:has(.sl-errsum) .flash-wrap { display: none; }

/* checkout summary: mini product lines, totals, place order */
.sl-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sl-summary-head .sl-summary-title { margin-bottom: 0; }
.sl-summary-edit { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.sl-summary-count { margin: 0 0 var(--space-2); color: var(--c-muted); font-size: .92rem; }
.sl-summary-items { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-bottom: 1px solid var(--c-border-strong); }
.sl-summary-items.is-scroll { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
.sl-summary-items.is-scroll:focus-visible { box-shadow: var(--focus); border-radius: var(--radius-sm); }
.sl-summary-items li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--c-border); font-size: .95rem; }
.sl-summary-items li:first-child { border-top: 0; }
.sl-thumb.sl-thumb-sm { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--c-bg); }
.sl-thumb-sm .icon { width: 1.3rem; height: 1.3rem; }
.sl-summary-name { flex: 1; min-width: 0; color: var(--c-text); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-summary-name small { display: block; margin-top: .15rem; color: var(--c-muted); font-size: .85rem; font-weight: 400; }
.sl-summary-items strong { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl-place-note { margin: var(--space-3) 0 0; color: var(--c-muted); font-size: .88rem; line-height: 1.45; text-align: center; }
.sl-secure, .sl-trust { display: none; }

@media (min-width: 1000px) {
  .sl-checkout-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6); }
  .sl-checkout-side { position: sticky; top: var(--space-5); }
  .sticky-header .sl-checkout-side { top: calc(var(--header-h) - 18px); }
  .sl-checkout-side .sl-sticky { position: static; }
}
@media (max-width: 599px) {
  .sl-card, .sl-summary, .sl-step { padding: var(--space-4); }
  .sl-step-title { margin-bottom: var(--space-4); font-size: 1.15rem; }
  .sl-step-no { width: 30px; height: 30px; font-size: .92rem; }
  .sl-input-row { flex-wrap: wrap; }
  .sl-input-row .sl-btn { width: 100%; }
  .sl-errsum { padding: var(--space-4); }
}
@media (max-width: 379px) {
  .sl-segment { grid-template-columns: minmax(0, 1fr); }
  .sl-btn-lg { padding-inline: 1rem; font-size: 1rem; }
  .sl-totals-grand dd { font-size: 1.45rem; }
}

/* locker picker (Shipping locker-picker.js) inside the delivery step */
[data-locker-picker] { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.sl-wrap .locker-select, .locker-select { width: 100%; min-height: 48px; }
.locker-map-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.2rem; border: 1px solid var(--c-brand); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-brand); font: inherit; font-weight: 700; cursor: pointer; }
.locker-map-btn:hover { background: var(--c-brand-soft); color: var(--c-brand); }
.locker-chosen:not(:empty) { padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--c-brand-soft); color: var(--c-text); font-size: .95rem; font-weight: 600; }
.locker-loading, .locker-empty { display: block; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-muted); font-size: .95rem; }
.locker-empty { background: var(--c-warning-soft); color: var(--c-warning); }

/* ==========================================================================
   8. Confirmation
   ========================================================================== */
.sl-confirm { max-width: min(var(--container), 1180px); }
.sl-thanks { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--space-5); padding: var(--space-7) var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--c-surface); text-align: center; }
.sl-thanks-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--c-success); color: #fff; }
.sl-wrap .sl-thanks-icon .icon { width: 36px; height: 36px; stroke-width: 3; vertical-align: 0; }
.sl-thanks-body { display: flex; flex-direction: column; align-items: center; max-width: 620px; }
.sl-thanks .sl-title { margin: 0 0 var(--space-3); }
.sl-thanks-number { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .2rem .6rem; margin: 0 0 var(--space-2); font-size: 1.1rem; }
.sl-order-number { color: var(--c-text); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: .01em; line-height: 1.15; overflow-wrap: anywhere; }
.sl-thanks-text { margin: 0; color: var(--c-muted); font-size: 1.02rem; overflow-wrap: anywhere; }
.sl-thanks-text strong { color: var(--c-text); }
.sl-thanks-pay { margin-top: var(--space-5); }

.sl-confirm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sl-confirm-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sl-confirm-main > .sl-card { margin: 0; }
.sl-next-steps { counter-reset: sl-next; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sl-next-steps li { counter-increment: sl-next; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); }
.sl-next-steps li::before { content: counter(sl-next); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand); font-weight: 800; font-size: .95rem; }
.sl-next-steps strong { display: block; padding-top: .2rem; color: var(--c-text); font-size: 1.02rem; line-height: 1.3; }
.sl-next-steps span { display: block; margin-top: .15rem; color: var(--c-muted); font-size: .95rem; line-height: 1.45; }

/* bank transfer details */
.sl-deflist { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--space-4); }
.sl-deflist > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-top: var(--rule); }
.sl-deflist > div:first-child { border-top: 0; padding-top: 0; }
.sl-deflist dt { color: var(--c-muted); }
.sl-deflist dd { margin: 0; color: var(--c-text); font-weight: 700; overflow-wrap: anywhere; }
.sl-deflist-amount { font-size: 1.4rem; font-weight: 800 !important; }
.sl-iban { letter-spacing: .04em; }
.sl-instructions-body { color: var(--c-text); line-height: 1.6; overflow-wrap: anywhere; }
.sl-instructions-body p { margin: 0 0 .6em; }
.sl-instructions-body p:last-child { margin-bottom: 0; }
.sl-instructions-body .btn { margin-top: var(--space-2); border-color: var(--c-border-strong); }
.sl-instructions-body table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .95rem; }
.sl-instructions-body td, .sl-instructions-body th { padding: .45rem .5rem; border-bottom: var(--rule); text-align: left; vertical-align: top; }
.sl-bank .sl-instructions-body { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--c-surface); font-size: .95rem; }
@media (max-width: 479px) { .sl-deflist > div { grid-template-columns: minmax(0, 1fr); } }

/* ordered products */
.sl-order-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-bottom: 1px solid var(--c-border-strong); }
.sl-order-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: var(--rule); }
.sl-order-lines .sl-thumb-sm { background: var(--c-surface); }
.sl-order-lines li:first-child { border-top: 0; padding-top: 0; }
.sl-order-line-name { min-width: 0; color: var(--c-text); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sl-order-line-name small { display: block; color: var(--c-muted); font-size: .88rem; font-weight: 400; }
.sl-order-line-qty { color: var(--c-muted); font-size: .93rem; white-space: nowrap; }
.sl-order-lines strong { font-weight: 800; white-space: nowrap; }
@media (max-width: 599px) {
  .sl-order-lines li { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .sl-order-lines .sl-thumb-sm { grid-row: span 2; align-self: start; }
  .sl-order-line-name { grid-column: 2 / -1; }
}

/* side: status, payment, addresses, actions */
.sl-info-card { padding: var(--space-5); }
.sl-info-row + .sl-info-row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--rule); }
.sl-info-label { margin: 0 0 var(--space-1); color: var(--c-text); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.sl-info-row p { margin: 0; color: var(--c-text); font-size: .97rem; line-height: 1.55; overflow-wrap: anywhere; }
.sl-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.sl-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sl-confirm-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.sl-help { display: flex; align-items: flex-start; gap: .5rem; margin: var(--space-4) 0 0; color: var(--c-muted); font-size: .93rem; line-height: 1.45; }
.sl-help .icon { margin-top: .1rem; color: var(--c-brand); }
@media (min-width: 600px) and (max-width: 959px) {
  .sl-info-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .sl-info-row + .sl-info-row { margin: 0; padding: 0; border: 0; }
  .sl-confirm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) { .sl-confirm-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); } }
@media (max-width: 599px) { .sl-thanks { padding: var(--space-6) var(--space-4) var(--space-5); } }

/* ==========================================================================
   9. Centred panels: pay later (sales::pay), payment link (payments::pay-link), tracking
   ========================================================================== */
.sl-pay { max-width: 640px; }
.sl-pay > .sl-title { margin-bottom: var(--space-5); text-align: center; }
.sl-pay-card { max-width: none; padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--c-surface); }
.sl-pay-amount { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-size: 1rem; }
.sl-pay-amount strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.sl-pay .sl-card-title { margin-top: var(--space-2); }
.sl-pay form.sl-methods .sl-btn { margin-top: var(--space-3); }
.sl-pay .sl-gateway-form { margin: var(--space-4) 0; }
.sl-pay .sl-instructions { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius); background: var(--c-bg); line-height: 1.6; }
.sl-pay-card > .sl-small:last-child { margin: var(--space-5) 0 0; text-align: center; }
.sl-pay-card > .sl-small:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
.sl-pay-card > .sl-text-danger { margin: 0; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--c-danger-soft); }
@media (max-width: 599px) { .sl-pay-card { padding: var(--space-4); } .sl-pay-amount { padding: var(--space-3) var(--space-4); } .sl-pay-amount strong { font-size: 1.45rem; } }

.pay-page { background: var(--c-bg); }
.pay-wrap { max-width: 600px; margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8); box-sizing: border-box; color: var(--c-text); font-family: var(--font-body); }
.pay-card { padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: none; }
.pay-head { display: flex; flex-direction: column; gap: .3rem; padding-bottom: var(--space-2); text-align: center; }
.pay-head h1 { margin: 0; color: var(--c-text); font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem); font-weight: var(--heading-weight); line-height: 1.2; letter-spacing: -.015em; }
.pay-sub { margin: 0; color: var(--c-muted); font-size: 1rem; }
.pay-summary { margin: var(--space-4) 0 var(--space-5); padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius); background: var(--c-bg); }
.pay-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; padding: var(--space-3) 0; border-bottom: var(--rule); }
.pay-summary > div:last-child { border-bottom: 0; }
.pay-summary dt { margin: 0; color: var(--c-muted); }
.pay-summary dd { margin: 0; color: var(--c-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-summary .pay-due { align-items: center; }
.pay-summary .pay-due dt { color: var(--c-text); font-weight: 800; }
.pay-summary .pay-due dd { color: var(--c-text); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.pay-text { margin: 0 0 var(--space-3); color: var(--c-text); line-height: 1.55; }
.pay-muted { color: var(--c-muted); font-size: .92rem; }
.pay-form { margin: var(--space-4) 0; }
.pay-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 56px; padding: .9rem 1.25rem; border: 0; border-radius: var(--radius-sm); background: var(--c-action); color: var(--c-action-ink); font: inherit; font-size: 1.1rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background-color .15s var(--ease), transform .1s; }
.pay-btn:hover { background: var(--c-action-hover); color: var(--c-action-ink); text-decoration: none; }
.pay-btn:active { transform: translateY(1px); }
.pay-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-action); }
.pay-alert { margin: var(--space-3) 0; padding: .9rem 1rem; border: 0; border-radius: var(--radius-sm); font-size: .97rem; line-height: 1.45; }
.pay-alert-ok { background: var(--c-success-soft); color: var(--c-success); }
.pay-alert-bad { background: var(--c-danger-soft); color: var(--c-danger); }
.pay-alert-info { background: var(--c-info-soft); color: var(--c-info); }
.pay-back { margin: var(--space-5) 0 0; text-align: center; }
.pay-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-link); font-weight: 700; }
@media (max-width: 599px) { .pay-wrap { padding: var(--space-5) var(--gutter) var(--space-7); } .pay-card { padding: var(--space-5) var(--space-4); } .pay-summary { padding-inline: var(--space-4); } .pay-summary .pay-due dd { font-size: 1.45rem; } }

/* tracking (/urmarire) */
.sl-track { max-width: 760px; }
.sl-panel { display: flex; flex-direction: column; align-items: center; padding: var(--space-7) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--c-surface); text-align: center; }
.sl-panel-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--c-bg); color: var(--c-brand); }
.sl-wrap .sl-panel-icon .icon { width: 34px; height: 34px; vertical-align: 0; }
.sl-panel .sl-title { margin-bottom: var(--space-2); }
.sl-panel-text { max-width: 46ch; margin: 0 0 var(--space-5); color: var(--c-muted); font-size: 1.05rem; }
.sl-track-form { display: flex; gap: var(--space-2); width: 100%; max-width: 560px; }
.sl-track-form input { flex: 1; min-width: 0; }
.sl-wrap .sl-track-form input[name="awb"] { min-height: 54px; font-size: 1.05rem; font-weight: 600; }
.sl-track-form .btn { flex: none; min-height: 54px; }
.sl-track-tip { margin: var(--space-4) 0 0; color: var(--c-muted); font-size: .93rem; }
.sl-track-alert { margin-top: var(--space-5); }
.sl-track-card { margin-top: var(--space-5); padding: var(--space-6); }
.sl-track-awb { margin: 0 0 var(--space-1); color: var(--c-muted); font-size: .97rem; overflow-wrap: anywhere; }
.sl-track-awb strong { color: var(--c-text); }
.sl-track-state { margin: 0; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.sl-track-state.is-success { color: var(--c-success); }
.sl-track-state.is-danger { color: var(--c-danger); }
.sl-track-sub { margin: var(--space-1) 0 0; color: var(--c-muted); }
.sl-track-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-6) 0 var(--space-5); padding: 0; list-style: none; }
.sl-track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--c-muted); font-size: .9rem; font-weight: 700; text-align: center; }
.sl-track-steps li + li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; margin-right: 18px; margin-left: 18px; border-radius: 2px; background: var(--c-border); }
.sl-track-steps li.is-done::before { background: var(--c-brand); }
.sl-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--c-border-strong); border-radius: 50%; background: var(--c-bg); color: var(--c-brand-ink); box-sizing: border-box; }
.sl-wrap .sl-track-dot .icon { width: 16px; height: 16px; stroke-width: 3; vertical-align: 0; }
.sl-track-steps li.is-done { color: var(--c-text); }
.sl-track-steps li.is-done .sl-track-dot { border-color: var(--c-brand); background: var(--c-brand); }
.sl-track-steps.is-failed .sl-track-dot { border-color: var(--c-danger); }
.sl-track-card .sl-alert { margin: 0 0 var(--space-5); }
.sl-track-history-title { margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-5); border-top: var(--rule); font-size: 1.1rem; }
.sl-timeline { margin: 0; padding: 0; list-style: none; }
.sl-timeline li { position: relative; padding: 0 0 var(--space-5) var(--space-6); }
.sl-timeline li:last-child { padding-bottom: 0; }
.sl-timeline li::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--c-border); }
.sl-timeline li:last-child::before { display: none; }
.sl-timeline-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 2px solid var(--c-border-strong); border-radius: 50%; background: var(--c-bg); box-sizing: border-box; }
.sl-timeline li.is-latest .sl-timeline-dot { border-color: var(--c-brand); background: var(--c-brand); }
.sl-timeline-body strong { display: block; color: var(--c-text); font-weight: 700; line-height: 1.4; }
.sl-timeline li:not(.is-latest) .sl-timeline-body strong { font-weight: 600; }
.sl-timeline-body small { display: block; margin-top: .15rem; color: var(--c-muted); font-size: .9rem; }
.sl-track-empty { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-muted); }
.sl-track-foot { margin: var(--space-5) 0 0; color: var(--c-muted); font-size: .9rem; }
.sl-track-foot a { font-weight: 700; }
@media (max-width: 599px) {
  .sl-panel { padding: var(--space-6) var(--space-4) var(--space-5); }
  .sl-track-form { flex-direction: column; }
  .sl-track-form .btn { width: 100%; }
  .sl-track-card { padding: var(--space-4); }
  .sl-track-steps li { font-size: .78rem; }
}

/* Anularea comenzii de către client, până la procesare */
.z-cancel p{margin:0 0 10px;font-size:14px;line-height:1.5}
.z-cancel-check{display:flex;gap:8px;align-items:flex-start;margin:4px 0 12px;font-size:14px;font-weight:600}
.z-cancel-check input{margin-top:3px;flex:none;accent-color:var(--z-green,#09493a)}