.mobile-commerce-link { display: none; }
[data-count] { display: inline-flex; justify-content: center; min-width: var(--size-18px); color: var(--green-dark); font-weight: 700; }
.purchase-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-10px); margin-top: var(--gap); }
.purchase-actions [data-buy] { grid-column: 1 / -1; }
.purchase-actions .btn { min-height: var(--size-56px); }
.commerce-page { padding-top: var(--size-48px); padding-bottom: var(--size-48px); word-break: keep-all; }
.commerce-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); margin-bottom: var(--size-40px); }
.commerce-heading h1 { font-size: var(--size-32px); margin: var(--size-12px) 0; }
.commerce-heading .muted { font-size: var(--size-14px); line-height: 1.8; }
.commerce-steps { display: flex; gap: var(--gap); padding: 0; list-style: none; color: var(--muted); font-size: var(--size-12px); white-space: nowrap; }
.commerce-steps [aria-current] { color: var(--green-dark); font-weight: 700; }
.commerce-notice { background: var(--pale); padding: var(--size-18px) var(--gap); border-radius: var(--size-12px); font-size: var(--size-13px); line-height: 1.8; margin-bottom: var(--size-32px); }
.commerce-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--size-320px); gap: var(--size-32px); align-items: start; }
.commerce-layout[hidden], .commerce-panel[hidden], .commerce-complete[hidden], .basket-empty[hidden] { display: none; }
.basket-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: var(--size-64px); border-bottom: var(--size-2px) solid var(--ink); font-size: var(--size-14px); }
.basket-toolbar label, .check-line { display: flex; align-items: center; gap: var(--size-10px); line-height: 1.8; min-height: var(--size-44px); }
.commerce-page input[type=checkbox], .commerce-page input[type=radio] { accent-color: var(--green-dark); width: var(--size-18px); height: var(--size-18px); flex-shrink: 0; }
.plain-action { font-size: var(--size-13px); min-height: var(--size-44px); text-decoration: underline; text-underline-offset: var(--size-4px); }
.basket-row { display: grid; grid-template-columns: var(--size-44px) var(--size-96px) minmax(0,1fr) var(--size-150px) var(--size-110px) var(--size-44px); gap: var(--size-12px); align-items: center; padding: var(--gap) 0; border-bottom: var(--size-1px) solid var(--line); }
.item-select { align-self: start; display: grid; place-items: center; width: var(--size-44px); height: var(--size-44px); cursor: pointer; }
.basket-image { background: var(--pale); border-radius: var(--size-12px); overflow: hidden; }
.basket-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.basket-description h3 { font-size: var(--size-15px); line-height: 1.5; margin-bottom: var(--size-8px); }
.basket-description p, .basket-description small { display: block; font-size: var(--size-12px); line-height: 1.8; color: var(--muted); }
.basket-quantity small { display: block; text-align: center; color: var(--muted); font-size: var(--size-11px); margin-top: var(--size-6px); }
.commerce-stepper { display: flex; border: var(--size-1px) solid var(--line); border-radius: var(--size-8px); overflow: hidden; }
.commerce-stepper button { width: var(--size-44px); min-height: var(--size-44px); flex-shrink: 0; }
.commerce-stepper input { min-width: 0; width: 100%; border: 0; text-align: center; background: var(--white); font: inherit; font-size: var(--size-14px); appearance: textfield; }
.commerce-stepper input::-webkit-inner-spin-button { appearance: none; }
.basket-price { font-size: var(--size-15px); text-align: right; white-space: nowrap; }
.row-remove { align-self: start; font-size: var(--gap); min-height: var(--size-44px); min-width: var(--size-44px); }
.commerce-page button:disabled { opacity: .4; cursor: not-allowed; }
.commerce-summary { position: sticky; top: var(--anchor-offset); padding: var(--gap); background: var(--pale); border-radius: var(--radius); }
.commerce-summary h2 { font-size: var(--size-22px); margin: var(--size-12px) 0 var(--gap); }
.commerce-summary dl { display: grid; gap: var(--size-16px); font-size: var(--size-13px); }
.commerce-summary dl div, #completed-summary div { display: flex; justify-content: space-between; gap: var(--size-16px); }
.commerce-summary dt { color: var(--muted); }
.commerce-summary dd { margin: 0; }
.commerce-grand { border-top: var(--size-1px) solid var(--line); padding-top: var(--gap); margin-top: var(--gap); display: flex; flex-direction: column; gap: var(--size-12px); font-size: var(--size-14px); }
.commerce-grand strong { font-size: var(--size-28px); }
.estimate-note, .storage-note { font-size: var(--size-12px); line-height: 1.8; color: var(--muted); margin: var(--size-16px) 0; }
.storage-note { margin-bottom: 0; }
.wide { width: 100%; margin-top: var(--size-12px); }
.basket-empty { text-align: center; padding: var(--size-64px) var(--gap); }
.basket-empty svg { color: var(--muted); margin-bottom: var(--gap); }
.basket-empty h2 { font-size: var(--size-22px); }
.basket-empty p { color: var(--muted); font-size: var(--size-14px); line-height: 1.8; margin: var(--size-16px) 0 var(--gap); }
.commerce-help { background: var(--pale); border-radius: var(--size-12px); padding: var(--gap); margin-top: var(--size-32px); }
.commerce-help h3 { font-size: var(--size-15px); }
.commerce-help p { margin: var(--size-12px) 0; font-size: var(--size-13px); color: var(--muted); line-height: 1.8; }
.commerce-help a { font-size: var(--size-12px); text-decoration: underline; }
.commerce-panel { margin: 0 0 var(--gap); padding: var(--size-32px); border: var(--size-1px) solid var(--line); border-radius: var(--radius); min-width: 0; }
form.commerce-panel { margin-top: var(--size-32px); }
.commerce-panel h2, .commerce-panel legend { font-size: var(--radius); font-weight: 700; }
.commerce-panel legend { padding: 0 var(--size-8px); }
.commerce-panel > .muted { font-size: var(--size-13px); line-height: 1.8; margin-top: var(--size-12px); }
.panel-heading { display: flex; justify-content: space-between; gap: var(--size-12px); align-items: center; }
.panel-heading a { font-size: var(--size-12px); color: var(--muted); }
.commerce-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap); margin-top: var(--gap); }
.commerce-fields .field-full { grid-column: 1 / -1; }
.commerce-panel label:not(.check-line), .payment-options label { display: block; font-size: var(--size-14px); line-height: 1.6; }
.commerce-panel label span { font-size: var(--size-12px); color: var(--muted); }
.commerce-panel input:not([type=checkbox]):not([type=radio]), .commerce-panel textarea { width: 100%; min-width: 0; min-height: var(--size-48px); border: var(--size-1px) solid var(--line); background: var(--white); border-radius: var(--size-8px); padding: var(--size-12px); font: inherit; font-size: var(--size-16px); margin-top: var(--size-8px); }
.commerce-panel textarea { resize: vertical; }
.commerce-panel .check-line { margin-top: var(--gap); font-size: var(--size-13px); }
.commerce-panel .check-line:first-child { margin-top: 0; }
.payment-options { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--size-12px); }
.payment-options label { padding: var(--size-16px) var(--size-12px); border: var(--size-1px) solid var(--line); border-radius: var(--size-8px); display: flex; gap: var(--size-8px); align-items: center; }
.payment-options label:has(:checked) { border-color: var(--green-dark); background: var(--color-ebf5f0); }
#checkout-items .basket-row { grid-template-columns: var(--size-80px) minmax(0,1fr) auto; }
#checkout-items .basket-description { grid-column: auto; }
#checkout-items .basket-row:last-child { border-bottom: 0; padding-bottom: 0; }
#checkout-items .basket-price { grid-column: 2 / -1; }
.readonly-qty { font-size: var(--size-13px); color: var(--muted); }
.commerce-status { color: var(--green-dark); font-size: var(--size-13px); margin-top: var(--gap); }
.commerce-complete { text-align: center; padding: var(--size-48px) var(--gap); border: var(--size-1px) solid var(--line); border-radius: var(--radius); margin-top: var(--gap); }
.commerce-complete h2 { font-size: var(--size-28px); margin: var(--size-16px) 0; }
.commerce-complete p { line-height: 1.8; }
.complete-mark { width: var(--size-64px); height: var(--size-64px); display: grid; place-items: center; background: var(--green); border-radius: 50%; font-size: var(--size-28px); margin: 0 auto var(--gap); }
#completed-summary { max-width: var(--size-420px); margin: var(--size-32px) auto; display: grid; gap: var(--size-16px); font-size: var(--size-14px); }
.complete-actions, .added-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-12px); }
.added-content > p { line-height: 1.8; margin: var(--size-16px) 0; }
.added-actions .btn { flex: 1; padding-inline: var(--size-12px); white-space: nowrap; }
@media (max-width: 1000px) {
  .commerce-layout { grid-template-columns: minmax(0,1fr); }
  .commerce-summary { position: static; }
  .commerce-heading { align-items: flex-start; flex-direction: column; }
  .mobile-commerce-link { display: inline-flex; gap: var(--size-4px); }
  .header-links [data-count] { display: inline; }
}
@media (max-width: 768px) {
  .nav > * { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .commerce-page { padding-top: var(--size-32px); }
  .commerce-heading h1 { font-size: var(--size-28px); }
  .commerce-heading { margin-bottom: var(--gap); }
  .commerce-steps { gap: var(--size-16px); font-size: var(--size-11px); }
  .commerce-notice { padding: var(--size-16px); }
  .commerce-layout { gap: var(--gap); }
  .basket-row { grid-template-columns: var(--size-44px) var(--size-80px) minmax(0,1fr) var(--size-44px); gap: var(--size-8px); }
  .basket-description { grid-column: 3; }
  .basket-quantity { grid-column: 1 / 3; grid-row: 2; width: var(--size-150px); }
  .basket-price { grid-column: 3 / 5; grid-row: 2; justify-self: end; align-self: start; padding-top: var(--size-12px); }
  .row-remove { grid-column: 4; grid-row: 1; }
  .basket-description h3 { font-size: var(--size-14px); }
  .commerce-panel { padding: var(--radius); }
  .commerce-fields { grid-template-columns: minmax(0,1fr); gap: var(--size-16px); }
  .payment-options { grid-template-columns: minmax(0,1fr); }
  .commerce-summary { padding: var(--gap); }
  .commerce-complete h2 { font-size: var(--gap); }
  .complete-actions { flex-direction: column; }
  .commerce-mobile-order { gap: var(--size-8px); }
  .commerce-mobile-order .btn { flex: 1; padding-inline: var(--size-8px); }
  .purchase-actions .btn { min-height: var(--size-48px); }
  .basket-empty { padding: var(--size-48px) var(--size-16px); }
}
@media print {
  .header, .skip, .footer-reveal, #inquiry, #toast, .commerce-steps, .basket-toolbar, .row-remove, .item-select, #quote-form, #quote-complete, .commerce-summary button, .commerce-status { display: none !important; }
  .commerce-layout { display: block; }
  .commerce-summary { position: static; margin-top: var(--gap); break-inside: avoid; }
  .basket-row { break-inside: avoid; grid-template-columns: var(--size-80px) minmax(0,1fr) var(--size-116px) var(--size-110px); }
  .basket-row:has(input[data-select]:not(:checked)) { display: none; }
  .commerce-stepper button { visibility: hidden; }
  .commerce-page { width: 100%; padding: 0; }
}
