:root {
  --background: #f4f4f1;
  --surface: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #d8d8d2;
  --danger: #a31d1d;
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--background);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--background); }
body.modal-open { overflow: hidden; }
a { color: inherit; }
.site-header { padding: var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); }
.brand { font-weight: 700; letter-spacing: 0.08em; text-decoration: none; }
.page-shell { width: min(1180px, 100%); margin: 0 auto; padding: var(--space-3); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: var(--space-3); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--border); padding: clamp(1.25rem, 3vw, 2.5rem); }
.narrow-panel { max-width: 680px; margin: 3rem auto; }
.stack > * { margin-block: 0; }
.stack > * + * { margin-top: var(--space-3); }
.eyebrow { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; }
h1, h2 { line-height: 1.05; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: 1.35rem; }
h3 { margin: 0; font-size: 1rem; }
.checkout-form { display: grid; gap: var(--space-4); }
.form-section { display: grid; gap: var(--space-3); padding: 0; margin: 0; border: 0; }
legend { font-weight: 700; margin-bottom: var(--space-3); }
label { display: grid; gap: var(--space-1); }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; color: inherit; background: #fff; font: inherit; }
input:focus, textarea:focus, select:focus { outline: 2px solid #111; outline-offset: 1px; }
.field-error { color: var(--danger); }
.field-success { color: #276234; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.delivery-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.abroad-delivery-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delivery-method { display: flex; gap: var(--space-2); align-items: flex-start; border: 1px solid var(--border); padding: var(--space-2); cursor: pointer; }
.delivery-method:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.delivery-method input { width: auto; margin: 0.2rem 0 0; accent-color: var(--text); }
.delivery-method span { display: grid; gap: 0.25rem; }
.delivery-method small { color: var(--muted); line-height: 1.35; }
.delivery-button { width: 100%; }
.delivery-selection { display: grid; gap: 0.3rem; margin-bottom: var(--space-2); border: 1px solid var(--border); padding: var(--space-2); }
.delivery-selection-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.delivery-selection > span:last-child { color: var(--muted); font-size: 0.9rem; }
.courier-fields { display: grid; gap: var(--space-3); }
[data-delivery-panel][hidden],
[data-abroad-panel][hidden],
[data-pickup-selection][hidden] { display: none; }
.address-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.autocomplete { position: relative; display: grid; gap: var(--space-1); }
.autocomplete-results { position: absolute; z-index: 20; top: 100%; right: 0; left: 0; max-height: 16rem; overflow-y: auto; padding: 0; margin: 0.25rem 0 0; border: 1px solid var(--text); background: var(--surface); list-style: none; box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%); }
.autocomplete-results li { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--border); cursor: pointer; line-height: 1.35; }
.autocomplete-results li:last-child { border-bottom: 0; }
.autocomplete-results li:hover, .autocomplete-results li[aria-selected="true"] { color: #fff; background: var(--text); }
.autocomplete-status { min-height: 1em; color: var(--muted); }
.widget-modal[hidden] { display: none; }
.widget-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: var(--space-3); }
.widget-modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 58%); }
.widget-modal-dialog { position: relative; display: grid; grid-template-rows: auto 1fr; width: min(1100px, 100%); height: min(760px, calc(100vh - 2rem)); background: var(--surface); }
.widget-modal-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); }
.widget-modal-header h2 { margin: 0; }
.widget-modal-close { width: 2.75rem; height: 2.75rem; border: 0; color: var(--text); background: transparent; font: inherit; font-size: 1.8rem; cursor: pointer; }
.widget-modal iframe { width: 100%; height: 100%; border: 0; background: var(--background); }
.notice, .support-copy { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; min-height: 3.25rem; border: 1px solid #111; padding: 0.85rem 1.25rem; font: inherit; text-decoration: none; cursor: pointer; }
.primary-button { color: #fff; background: #111; }
.primary-button:disabled { opacity: 0.6; cursor: wait; }
.secondary-button { color: #111; background: #fff; }
.text-button { border: 0; padding: 0; color: var(--muted); background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }
.text-button:disabled { opacity: 0.6; cursor: wait; }
.order-lines { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.order-line { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.order-line img { object-fit: cover; background: var(--background); }
.order-line div { display: grid; gap: 0.25rem; }
.order-line span { color: var(--muted); font-size: 0.9rem; }
.discount-code { display: grid; gap: var(--space-2); }
.discount-code-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.discount-code-entry .secondary-button { min-height: auto; }
.discount-code-applied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); border: 1px solid var(--border); padding: var(--space-2); }
.discount-code-applied > span { display: grid; gap: 0.2rem; }
.discount-code-applied small { color: var(--muted); }
.totals, .status-list { display: grid; gap: var(--space-2); margin: 0; }
.totals div, .status-list div { display: flex; justify-content: space-between; gap: var(--space-3); }
.totals dd, .status-list dd { margin: 0; text-align: right; }
.grand-total { padding-top: var(--space-2); border-top: 1px solid var(--border); font-weight: 700; }

@media (max-width: 800px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-layout > aside { grid-row: 1; }
  .page-shell { padding: var(--space-2); }
  .delivery-methods, .address-row { grid-template-columns: 1fr; }
  .discount-code-entry { grid-template-columns: 1fr; }
  .widget-modal { padding: 0; }
  .widget-modal-dialog { width: 100%; height: 100%; }
}