/* ==========================================================================
   VIKA — Basket (Basket/Index). Direction-neutral.
   Relies on vika.css, vika-inner.css, vika-bs.css
   ========================================================================== */
.bs-basket-container { width: min(100% - 2 * var(--sp-5), 1240px); margin-inline: auto; padding-block: var(--sp-7) var(--sp-9); position: relative; z-index: 1; }

.bs-basket-header { text-align: center; margin-block-end: var(--sp-7); }
.bs-basket-title { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 500; margin-block-end: var(--sp-3); background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright), var(--c-gold)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.bs-basket-subtitle { color: var(--fg-muted); font-size: 0.95rem; }

.bs-basket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
.bs-items-list { display: flex; flex-direction: column; gap: var(--sp-4); }

/* item card */
.bs-item-card { display: flex; gap: var(--sp-5); padding: var(--sp-4); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color var(--t-med), opacity var(--t-med), transform var(--t-med); }
.bs-item-card:hover { border-color: oklch(74% 0.09 85 / 0.4); }
.bs-item-image { flex: 0 0 120px; height: 120px; border: 1px solid var(--glass-border); background: var(--c-ink-soft); overflow: hidden; }
.bs-item-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bs-item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bs-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.bs-item-name { font-size: 1rem; font-weight: 500; line-height: 1.7; margin: 0; }
.bs-item-name a { transition: color var(--t-fast); }
.bs-item-name a:hover { color: var(--accent); }
.bs-item-remove { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--fg-muted); background: transparent; border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.bs-item-remove:hover { color: oklch(80% 0.13 25); border-color: oklch(65% 0.18 25 / 0.8); background: oklch(65% 0.18 25 / 0.1); }
.bs-item-remove:disabled { opacity: 0.5; pointer-events: none; }
.bs-item-sku { font-size: 0.76rem; color: var(--fg-faint); letter-spacing: 0.04em; }
.bs-item-attributes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bs-attribute-badge { display: inline-flex; gap: 6px; padding: 0.25rem 0.7rem; font-size: 0.76rem; background: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border); }
.bs-attribute-name { color: var(--fg-faint); }
.bs-attribute-value { color: var(--fg); }

.bs-item-footer { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: auto; padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--glass-border); }
.bs-item-price-section { display: flex; flex-direction: column; gap: var(--sp-1); }
.bs-price-wrapper { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); }
.bs-current-price { font-size: 1rem; font-weight: 500; color: var(--accent); }
.bs-old-price { font-size: 0.8rem; color: var(--fg-faint); text-decoration: line-through; }
.bs-item-total-price { font-size: 0.82rem; color: var(--fg-muted); }

.bs-quantity-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.bs-quantity-controls { display: flex; align-items: center; }
.bs-quantity-btn { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--fg); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast); }
.bs-quantity-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bs-quantity-btn:disabled { opacity: 0.4; cursor: wait; }
.bs-quantity-input { width: 56px; height: 38px; text-align: center; font-size: 0.92rem; color: var(--fg); background: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border); border-inline: 0; border-radius: 0; -moz-appearance: textfield; }
.bs-quantity-input::-webkit-outer-spin-button, .bs-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-quantity-input:focus { outline: none; }
.bs-stock-status { font-size: 0.72rem; }
.bs-in-stock { color: oklch(80% 0.12 150); }
.bs-out-of-stock { color: oklch(76% 0.14 25); }

.bs-continue-shopping { margin-block-start: var(--sp-6); }
.bs-continue-link { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0.7rem 1.4rem; font-size: 0.88rem; color: var(--fg-muted); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast), gap var(--t-med); }
.bs-continue-link svg { transform: scaleX(calc(-1 * var(--flip))); } /* arrow points to the reading-direction start */
.bs-continue-link:hover { border-color: var(--accent); color: var(--accent); gap: var(--sp-4); }

/* summary */
.bs-basket-sidebar { position: sticky; inset-block-start: 84px; }
.bs-summary-card { padding: var(--sp-6); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.35); }
.bs-summary-title { font-size: 1rem; font-weight: 500; color: var(--accent); padding-block-end: var(--sp-3); margin-block-end: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.bs-summary-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); font-size: 0.88rem; color: var(--fg-muted); }
.bs-summary-value { color: var(--fg); }
.bs-shipping-value { font-size: 0.8rem; color: var(--fg-faint); }
.bs-discount-row, .bs-discount-value { color: oklch(80% 0.12 150); }
.bs-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-block: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--glass-border); font-size: 0.9rem; }
.bs-total-amount { font-size: 1.15rem; font-weight: 500; color: var(--accent); }

.bs-summary-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.bs-checkout-btn { width: 100%; padding: 0.95rem; font-size: 0.95rem; font-weight: 500; cursor: pointer; color: var(--c-ink-deep); border: 0; background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright) 50%, var(--c-gold)); box-shadow: var(--shadow-gold); transition: transform var(--t-fast), box-shadow var(--t-med); }
.bs-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 0 50px oklch(74% 0.09 85 / 0.35); }
.bs-login-prompt { padding: var(--sp-4); text-align: center; background: oklch(74% 0.09 85 / 0.06); border: 1px solid oklch(74% 0.09 85 / 0.3); }
.bs-login-prompt p { margin-block-end: var(--sp-3); font-size: 0.82rem; color: var(--fg-muted); }
.bs-login-btn { display: block; padding: 0.65rem; font-size: 0.86rem; color: var(--fg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast); }
.bs-login-btn:hover { border-color: var(--accent); color: var(--accent); }
.bs-register-link { display: inline-block; margin-block-start: var(--sp-3); font-size: 0.82rem; color: var(--accent); }
.bs-register-link:hover { text-decoration: underline; }
.bs-clear-basket { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.65rem; font-size: 0.82rem; cursor: pointer; color: oklch(78% 0.13 25); background: transparent; border: 1px solid oklch(65% 0.18 25 / 0.4); transition: background var(--t-fast), border-color var(--t-fast); }
.bs-clear-basket:hover { background: oklch(65% 0.18 25 / 0.1); border-color: oklch(65% 0.18 25 / 0.8); }

/* empty */
.bs-empty-basket { text-align: center; padding: var(--sp-9) var(--sp-5); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.bs-empty-icon { display: grid; place-items: center; margin-block-end: var(--sp-5); color: var(--accent); opacity: 0.7; }
.bs-empty-title { font-size: 1.5rem; font-weight: 500; margin-block-end: var(--sp-3); }
.bs-empty-text { color: var(--fg-muted); margin-block-end: var(--sp-6); }
.bs-empty-shop-btn { display: inline-flex; padding: 0.85rem 2.2rem; font-weight: 500; color: var(--c-ink-deep); background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright) 50%, var(--c-gold)); box-shadow: var(--shadow-gold); transition: transform var(--t-fast), box-shadow var(--t-med); }
.bs-empty-shop-btn:hover { transform: translateY(-3px); box-shadow: 0 0 50px oklch(74% 0.09 85 / 0.35); }

@media (max-width: 991px) {
  .bs-basket-layout { grid-template-columns: 1fr; }
  .bs-basket-sidebar { position: static; }
}
@media (max-width: 575px) {
  .bs-item-card { flex-direction: column; }
  .bs-item-image { flex-basis: auto; width: 100%; height: 200px; }
  .bs-quantity-wrapper { align-items: flex-start; }
}