/* ============================================================
   Preorder page — standalone styles (no Tailwind required).
   Loaded only on the preorder page via <link> in preorder.php.
   Design tokens mirror the main app palette exactly.
   ============================================================ */

:root {
  --po-bg:          oklch(0.985 0.012 85);
  --po-fg:          oklch(0.235 0.018 50);
  --po-card:        oklch(0.995 0.006 85);
  --po-muted:       oklch(0.48 0.022 60);
  --po-secondary:   oklch(0.945 0.022 80);
  --po-border:      oklch(0.9 0.018 80);
  --po-accent:      oklch(0.82 0.08 60);
  --po-primary:     oklch(0.42 0.045 50);
  --po-primary-fg:  oklch(0.985 0.012 85);
  --po-destructive: oklch(0.55 0.18 25);
  --po-radius:      1rem;
  --po-shadow-soft: 0 10px 30px -15px oklch(0.42 0.045 50 / 0.15);
  --po-shadow-warm: 0 30px 60px -30px oklch(0.42 0.045 50 / 0.18);
  --po-font-display:"Cormorant Garamond","Noto Serif JP",ui-serif,Georgia,serif;
  --po-font-body:   "Inter","Noto Sans JP",ui-sans-serif,system-ui,sans-serif;
}

/* ---------- Sticky fix: prevent html/body overflow-x:hidden from creating scroll containers ------
   overflow-x:hidden forces overflow-y to compute as 'auto', making html/body scroll containers
   which breaks position:sticky and captures wheel events.
   overflow-x:clip clips without creating a scroll container (CSS spec, no BFC).
   Safe to scope here because preorder.css only loads on this page.
   ------------------------------------------------------------------------------------------------ */
html, body { overflow-x: clip !important; }

/* ---------- Base ---------- */
.po-page {
  min-height: 100vh;
  overflow: visible !important;
  background: var(--po-bg);
  color: var(--po-fg);
  font-family: var(--po-font-body);
  -webkit-font-smoothing: antialiased;
}
.po-main      { padding: 5rem 1.25rem 7rem; overflow: visible !important; }
.po-container { max-width: 64rem; margin: 0 auto; overflow: visible !important; }
#preorder-form { overflow: visible !important; }
@media (min-width: 768px) { .po-main { padding: 6rem 1.5rem 5rem; } }

.po-display { font-family: var(--po-font-display); font-weight: 400; letter-spacing: -0.01em; }

.po-eyebrow {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--po-muted); margin: 0 0 0.75rem;
}
.po-title {
  font-family: var(--po-font-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05;
  margin: 0; text-wrap: balance;
}
.po-lede  { margin: 0.875rem 0 0; max-width: 32rem; color: var(--po-muted); line-height: 1.6; font-size: 0.9375rem; }
.po-muted { color: var(--po-muted); font-size: 0.875rem; }
.po-tiny  { font-size: 0.75rem; color: var(--po-muted); margin: 0; }
.po-hint  { font-size: 0.625rem; text-transform: none; letter-spacing: 0; opacity: 0.65; }
.po-center { text-align: center; }
.po-mt    { margin-top: 0.5rem; }
.po-mt-sm { margin-top: 0.25rem; }
.po-mt-lg { margin-top: 1.25rem; }

/* ---------- Product picker ---------- */
.po-picker-header {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.po-picker {
  display: flex;
  gap: 1.5rem; /* matches carousel JS GAP=24px */
}
.po-picker-error {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--po-destructive);
  margin-top: 0.85rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--po-destructive) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--po-destructive) 25%, transparent);
}
.po-picker-error::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--po-destructive);
}
.po-product { width: 100%; height: 100%; }

.po-product {
  background: var(--po-card);
  border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 12px);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex; flex-direction: column;
}
.po-product:hover { transform: translateY(-4px); box-shadow: var(--po-shadow-warm); }
.po-product.is-active {
  border-color: color-mix(in oklab, var(--po-accent) 50%, transparent);
  box-shadow: 0 0 0 2px var(--po-accent);
}

.po-product__img {
  aspect-ratio: 1 / 1;
  background: color-mix(in oklab, var(--po-secondary) 50%, transparent);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.po-product__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.po-product:hover .po-product__img img { transform: scale(1.06); }

.po-badge {
  position: absolute; top: 0.625rem; left: 0.625rem;
  background: color-mix(in oklab, var(--po-card) 95%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0.2rem 0.6rem; border-radius: 9999px;
  font-size: 0.5625rem; text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 500;
  box-shadow: var(--po-shadow-soft);
}

.po-product__body { padding: 0.875rem; display: flex; flex-direction: column; flex: 1; gap: 0.625rem; }
@media (min-width: 640px) { .po-product__body { padding: 1rem 1.125rem; } }

.po-product__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.po-product__row h3 {
  font-family: var(--po-font-display); font-weight: 400;
  font-size: 1rem; margin: 0; line-height: 1.25;
}
@media (min-width: 640px) { .po-product__row h3 { font-size: 1.125rem; } }
.po-product__row span { font-size: 0.8125rem; color: var(--po-muted); white-space: nowrap; flex-shrink: 0; }

.po-product__stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: auto;
}

.po-product__hint { font-size: 0.625rem; color: var(--po-muted); text-align: center; margin: 0; opacity: 0.7; }

/* ---------- Qty pill ---------- */
.po-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--po-border); border-radius: 9999px;
  padding: 0.2rem 0.375rem; gap: 0.125rem;
}
.po-qty button {
  width: 1.625rem; height: 1.625rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font-size: 1rem; line-height: 1;
  transition: background .15s ease;
}
@media (min-width: 640px) { .po-qty button { width: 1.75rem; height: 1.75rem; } }
.po-qty button:hover { background: var(--po-secondary); }
.po-qty input {
  width: 1.625rem; text-align: center; background: transparent;
  border: 0; font: inherit; font-size: 0.8125rem; color: inherit; outline: none;
  -moz-appearance: textfield;
}
.po-qty input::-webkit-outer-spin-button,
.po-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.po-line-total { font-size: 0.75rem; color: var(--po-primary); font-weight: 500; min-width: 2.5rem; text-align: right; }

/* ---------- Two-column layout ---------- */
.po-grid {
  margin-top: 3rem;
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  overflow: visible !important;
}
@media (min-width: 1024px) { .po-grid { grid-template-columns: 1fr 360px; gap: 2.5rem; } }
.po-stack { display: flex; flex-direction: column; gap: 1.25rem; overflow: visible !important; }

/* ---------- Section card ---------- */
.po-section {
  background: var(--po-card);
  border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 12px);
  padding: 1.375rem;
  box-shadow: var(--po-shadow-soft);
}
@media (min-width: 640px) { .po-section { padding: 1.75rem 2rem; } }
.po-section__head { display: flex; align-items: baseline; gap: 0.875rem; margin-bottom: 1.25rem; }
.po-section__num  { font-family: var(--po-font-display); font-size: 1.25rem; color: var(--po-accent); flex-shrink: 0; }
.po-section__title{ font-family: var(--po-font-display); font-weight: 400; font-size: 1.375rem; margin: 0; }
@media (min-width: 640px) { .po-section__title { font-size: 1.5rem; } }

/* ---------- Two-col inner ---------- */
.po-twocol { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .po-twocol { grid-template-columns: 1fr 1fr; } }

/* ---------- Inputs ---------- */
.po-label {
  display: block; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--po-muted); margin-bottom: 0.4rem;
}
.po-input {
  width: 100%; box-sizing: border-box;
  background: var(--po-bg); border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 4px);
  height: 3rem; padding: 0 1rem;
  font: inherit; color: inherit; outline: none;
  transition: border-color .2s ease;
  -webkit-appearance: none;
}
.po-input:focus { border-color: var(--po-accent); }
.po-input.is-error {
  border-color: var(--po-destructive);
  background: color-mix(in oklab, var(--po-destructive) 4%, var(--po-bg));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--po-destructive) 12%, transparent);
}
.po-input.is-error:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--po-destructive) 22%, transparent);
}
select.po-input { cursor: pointer; }
.po-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--po-bg); border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 4px);
  padding: 0.75rem 1rem; min-height: 5rem;
  font: inherit; color: inherit; outline: none; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.po-textarea:focus { border-color: var(--po-accent); }
.po-textarea.is-error {
  border-color: var(--po-destructive);
  background: color-mix(in oklab, var(--po-destructive) 4%, var(--po-bg));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--po-destructive) 12%, transparent);
}
.po-field-error {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.8125rem; line-height: 1.35;
  color: var(--po-destructive);
  margin: 0.4rem 0 0;
  font-weight: 500;
}
.po-field-error::before {
  content: ""; flex: 0 0 6px;
  width: 6px; height: 6px; margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--po-destructive);
}

/* ---------- Radio cards (fulfillment + payment) ---------- */
.po-pay { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 500px) { .po-pay { grid-template-columns: 1fr 1fr; } }

.po-payopt {
  position: relative; cursor: pointer;
  border: 1px solid var(--po-border); background: var(--po-card);
  border-radius: calc(var(--po-radius) + 4px);
  padding: 1rem 1.125rem; transition: background .2s ease, border-color .2s ease;
  display: block;
}
.po-payopt:hover { background: color-mix(in oklab, var(--po-secondary) 60%, transparent); }
.po-payopt:has(input:checked),
.po-payopt.is-active {
  border-color: color-mix(in oklab, var(--po-accent) 50%, transparent);
  background: color-mix(in oklab, var(--po-accent) 10%, transparent);
}
.po-payopt input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.po-payopt p:first-of-type { font-family: var(--po-font-display); font-size: 1.0625rem; margin: 0; }

/* ---------- Summary ---------- */
.po-summary {
  overflow: visible !important;
}
@media (min-width: 1024px) {
  .po-summary { align-self: stretch; }
}

.po-summary__card {
  background: color-mix(in oklab, var(--po-secondary) 55%, transparent);
  border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 12px);
  padding: 1.5rem;
  box-shadow: var(--po-shadow-soft);
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
@media (min-width: 1024px) {
  .po-summary__card {
    position: sticky;
    top: 267px;
  }
  :lang(ka) .po-summary__card {
    top: 240px;
  }
}
.po-summary__h { font-size: 1.5rem; margin: 0 0 1.25rem; }

.po-summary-lines { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; min-height: 2rem; overflow: visible !important; max-height: none !important; }
.po-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.po-row dt { color: var(--po-muted); margin: 0; }
.po-row dd { color: var(--po-fg); margin: 0; font-weight: 500; white-space: nowrap; }

.po-summary__divider { border: 0; border-top: 1px solid var(--po-border); margin: 1rem 0 0; }
.po-summary__fee { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; margin-top: 0.5rem; }
.po-summary__fee dt { color: var(--po-muted); margin: 0; }
.po-summary__fee dd { margin: 0; }
.po-summary__total {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--po-border);
  display: flex; align-items: baseline; justify-content: space-between;
}
.po-summary__total > span:first-child { font-size: 0.8125rem; color: var(--po-muted); }
.po-summary__amount { font-family: var(--po-font-display); font-weight: 400; font-size: 2rem; }

.po-cta {
  margin-top: 1.25rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--po-primary); color: var(--po-primary-fg);
  border: 0; border-radius: 9999px;
  padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 500; font-family: inherit;
  cursor: pointer; letter-spacing: 0.04em;
  transition: opacity .2s ease, transform .2s ease;
}
.po-cta:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.po-cta:active { transform: translateY(0); }
.po-cta:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ---------- Alerts ---------- */
.po-alert-error {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid color-mix(in oklab, var(--po-destructive) 35%, transparent);
  background: color-mix(in oklab, var(--po-destructive) 6%, var(--po-card));
  border-left: 4px solid var(--po-destructive);
  border-radius: calc(var(--po-radius) + 4px);
  color: var(--po-destructive);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--po-destructive) 10%, transparent);
  animation: po-alert-in .25s ease-out;
}
.po-alert-error__head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.po-alert-error__icon { flex: 0 0 20px; }
.po-alert-error__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.po-alert-error__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--po-destructive) 88%, var(--po-fg));
}
.po-alert-error__list li {
  position: relative;
  margin: 0.2rem 0;
}
.po-alert-error__list li::before {
  content: "";
  position: absolute;
  left: -0.95rem; top: 0.55rem;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--po-destructive);
}
@keyframes po-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Closed state ---------- */
.po-closed {
  margin-top: 2.5rem;
  background: var(--po-card); border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 12px);
  padding: 3rem 2rem; text-align: center;
  box-shadow: var(--po-shadow-soft);
}
.po-closed h2 { font-family: var(--po-font-display); font-weight: 400; font-size: 1.75rem; margin: 0 0 0.75rem; }

/* ---------- Mobile bar ---------- */
.po-mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in oklab, var(--po-card) 95%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--po-border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
  padding: 0.75rem 1.25rem;
  display: flex; align-items: center; gap: 0.875rem;
}
@media (min-width: 768px) { .po-mobile-bar { display: none; } }

.po-mobile-bar__total { flex: 1; min-width: 0; cursor: pointer; user-select: none; }
.po-mobile-bar__label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--po-muted); }
.po-mobile-bar__amount { font-weight: 600; font-size: 1.0625rem; display: flex; align-items: center; gap: 0.3rem; }
.po-mobile-bar__chevron { transition: transform 0.3s ease; color: var(--po-muted); }

.po-cta-sm {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--po-primary); color: var(--po-primary-fg);
  border: 0; border-radius: 9999px; flex-shrink: 0;
  padding: 0.75rem 1.25rem; font-size: 0.8125rem; font-weight: 500; font-family: inherit;
  cursor: pointer; letter-spacing: 0.04em;
  transition: opacity .2s ease;
}
.po-cta-sm:hover { opacity: 0.88; }
.po-cta-sm:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Drawer ---------- */
.po-drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) { .po-drawer-backdrop { display: none; } }

.po-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--po-card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
}
@media (min-width: 768px) { .po-drawer { display: none; } }

.po-drawer__handle-wrap { flex-shrink: 0; display: flex; justify-content: center; padding: 0.75rem 0 0.25rem; }
.po-drawer__handle { width: 2.5rem; height: 0.25rem; border-radius: 9999px; background: var(--po-border); }
.po-drawer__head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--po-border);
}
.po-drawer__head h3 { font-family: var(--po-font-display); font-size: 1.25rem; margin: 0; }
.po-drawer__close {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--po-secondary); border: 0; cursor: pointer;
  color: var(--po-muted); transition: opacity .2s ease;
}
.po-drawer__close:hover { opacity: 0.75; }
.po-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.po-drawer__lines { padding: 0 1.25rem; }
.po-drawer__lines > * + * { border-top: 1px solid var(--po-border); }
.po-drawer__line { padding: 0.875rem 0; display: flex; align-items: center; justify-content: space-between; }
.po-drawer__line-name { font-size: 0.875rem; font-weight: 500; }
.po-drawer__line-sub { font-size: 0.75rem; color: var(--po-muted); margin-top: 0.125rem; }
.po-drawer__line-price { font-size: 0.875rem; font-weight: 600; flex-shrink: 0; }
.po-drawer__pricing { padding: 1rem 1.25rem; border-top: 1px solid var(--po-border); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.po-drawer__foot {
  flex-shrink: 0; padding: 1rem 1.25rem 2.5rem;
  border-top: 1px solid var(--po-border); background: var(--po-card);
}
.po-drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.po-drawer__total span:first-child { font-size: 0.875rem; color: var(--po-muted); }
.po-drawer__total-amount { font-family: var(--po-font-display); font-size: 1.875rem; line-height: 1; }

/* ---------- Basket ---------- */
.po-basket {
  display: none;
  margin-top: 1.5rem;
  background: var(--po-card);
  border: 1px solid var(--po-border);
  border-radius: calc(var(--po-radius) + 12px);
  padding: 1.375rem;
  box-shadow: var(--po-shadow-soft);
}
@media (min-width: 640px) { .po-basket { padding: 1.75rem 2rem; } }
.po-basket.has-items { display: block; }

.po-basket__head { margin-bottom: 0.75rem; }

.po-basket__items { display: flex; flex-direction: column; }

.po-basket__item {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--po-border);
}
.po-basket__item:last-child { border-bottom: 0; padding-bottom: 0; }

.po-basket__thumb {
  width: 3.25rem; height: 3.25rem; flex-shrink: 0;
  border-radius: calc(var(--po-radius) - 2px);
  overflow: hidden;
  background: color-mix(in oklab, var(--po-secondary) 60%, transparent);
  object-fit: cover; display: block;
}
.po-basket__thumb--empty {
  display: flex; align-items: center; justify-content: center;
}

.po-basket__info { flex: 1; min-width: 0; }
.po-basket__name {
  font-size: 0.875rem; font-weight: 500; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.po-basket__unit { font-size: 0.75rem; color: var(--po-muted); margin: 0.125rem 0 0; }

.po-basket__qty-wrap {
  display: inline-flex; align-items: center;
  border: 1px solid var(--po-border); border-radius: 9999px;
  padding: 0.15rem 0.3rem; gap: 0.1rem; flex-shrink: 0;
}
.po-basket__qty-btn {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font-size: 1rem; line-height: 1; transition: background .15s ease;
}
.po-basket__qty-btn:hover { background: var(--po-secondary); }
.po-basket__qty-val {
  width: 1.5rem; text-align: center; font-size: 0.8125rem;
}

.po-basket__sub {
  font-size: 0.875rem; font-weight: 600;
  color: var(--po-primary); flex-shrink: 0; min-width: 3.5rem; text-align: right;
}

.po-basket__remove {
  width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--po-border);
  cursor: pointer; color: var(--po-muted);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.po-basket__remove:hover {
  background: color-mix(in oklab, var(--po-destructive) 10%, transparent);
  border-color: var(--po-destructive);
  color: var(--po-destructive);
}

/* ---------- Basket — mobile card layout (max 639 px) ---------- */
@media (max-width: 639px) {
  .po-basket {
    padding: 1rem;
    border-radius: calc(var(--po-radius) + 6px);
  }

  .po-basket__items {
    gap: 0.625rem;
  }

  /* Each item becomes a self-contained card */
  .po-basket__item {
    display: grid;
    grid-template-areas:
      "thumb info   info   remove"
      "thumb qty    sub    .     ";
    grid-template-columns: 72px 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 0.875rem;
    row-gap: 0.375rem;
    align-items: center;
    padding: 0.875rem;
    border-bottom: none;
    background: color-mix(in oklab, var(--po-secondary) 60%, transparent);
    border: 1px solid var(--po-border);
    border-radius: 14px;
  }

  .po-basket__item:last-child {
    padding-bottom: 0.875rem;
  }

  /* Thumb — square, rounded-xl, elevated */
  .po-basket__thumb {
    grid-area: thumb;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
    object-fit: cover;
    align-self: center;
  }

  /* Name + unit price */
  .po-basket__info {
    grid-area: info;
    align-self: center;
    min-width: 0;
  }

  .po-basket__name {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .po-basket__unit {
    font-size: 0.6875rem;
    margin-top: 0.1875rem;
  }

  /* Quantity pill — larger tap targets */
  .po-basket__qty-wrap {
    grid-area: qty;
    padding: 0.2rem 0.35rem;
    align-self: center;
  }

  .po-basket__qty-btn {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.125rem;
  }

  .po-basket__qty-val {
    width: 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  /* Line subtotal */
  .po-basket__sub {
    grid-area: sub;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: right;
    min-width: auto;
    align-self: center;
  }

  /* Remove — compact, top-right */
  .po-basket__remove {
    grid-area: remove;
    align-self: start;
    margin-top: 0.125rem;
    width: 1.625rem;
    height: 1.625rem;
  }
}