:root {
  --magenta: #b5115c;
  --magenta-dark: #7e0d40;
  --gold: #a9822c;
  --gold-light: #d9b45c;
  --cream: #fdf7f0;
  --cream-dark: #f4e9dc;
  --ink: #2a1420;
  --ink-soft: #5c4552;
  --white: #ffffff;
  --border: #e6d7c8;
  --focus: #1d4ed8;
  --field-border: #8c6f7f; /* 4.5:1 on white, 3.7:1 on cream-dark, so inputs pass WCAG 1.4.11 */
  --danger: #a3123a;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(42, 20, 32, 0.08);
}

* { box-sizing: border-box; }

/* An element with the hidden attribute is never shown, whatever display
   rule its class carries (grid, flex, inline-block). */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--magenta-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button, input, select {
  font: inherit;
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  padding-left: calc(1.25rem + env(safe-area-inset-left));
  padding-right: calc(1.25rem + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--magenta-dark);
  text-decoration: none;
  font-size: 1.1rem;
}

.brand-logo img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
}

.main-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--magenta);
  color: var(--magenta-dark);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 42px;
  height: 38px;
  cursor: pointer;
  position: relative;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--ink);
}

.nav-toggle-bars { top: 18px; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

@media (max-width: 760px) {
  .nav-toggle { display: block; order: 1; }
  .brand-logo { order: 0; }
  .header-actions { order: 2; margin-left: auto; }

  .main-nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .main-nav.nav-open {
    max-height: 400px;
  }

  .main-nav a {
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--border);
  }
}

.lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-toggle button {
  background: var(--white);
  border: none;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 600;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--magenta);
  color: var(--white);
}

.bag-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
}

.bag-count {
  background: var(--magenta);
  color: var(--white);
  border-radius: 999px;
  padding: 0 0.45rem;
  font-size: 0.8rem;
  min-width: 1.4rem;
  text-align: center;
}

/* Hero */
.hero {
  position: relative;
  color: var(--white);
  padding: 3rem 1.25rem;
  text-align: center;
  overflow: hidden;
}

/* Parallax layer per Janille's request 2026-09-28 ("background rolls with
   the screen"). Taller than the hero box and JS-shifted on scroll (see
   app.js) so it moves slower than the page -- background-attachment:fixed
   would be simpler but is unreliable on iOS/mobile WebViews, which matters
   here since this ships inside a Capacitor app too. Oversized height plus
   negative top offset keeps it covering the box at any scroll position;
   respects prefers-reduced-motion by staying static (see app.js). */
.hero-bg {
  position: absolute;
  /* Fixed pixel overscan, not percentage -- percentage top/bottom on an
     absolutely positioned element only resolves against a containing
     block with an explicit height, and .hero's height is content-based
     ("auto"), so a percentage inset here silently collapses to nothing
     and the whole background vanishes. Learned that the hard way. 160px
     comfortably covers the max scroll-linked offset this element ever
     needs (0.35 * a hero roughly 300-450px tall). */
  top: -160px;
  bottom: -160px;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--magenta-dark), var(--magenta));
  will-change: transform;
  z-index: 0;
}

/* Explicitly excludes .hero-bg -- it's also a direct child of .hero, and
   without this exclusion this rule's equal-specificity, later-in-source
   position:relative silently overrides .hero-bg's position:absolute,
   collapsing it to zero height. Found that the hard way too. */
.hero > *:not(.hero-bg) {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.hero p {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  opacity: 0.95;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn-gold {
  background: var(--gold-light);
  color: var(--ink);
}

.btn-gold:hover { background: var(--gold); }

.btn-primary {
  background: var(--magenta);
  color: var(--white);
}

.btn-primary:hover { background: var(--magenta-dark); }

.btn-outline {
  background: transparent;
  border: 2px solid var(--magenta);
  color: var(--magenta-dark);
}

.btn[disabled], .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Layout */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.section-title {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  color: var(--magenta-dark);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Tile grids (categories / brands) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.tile-media {
  aspect-ratio: 4 / 3;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

.tile-media.wide {
  /* Category pictures are 16:9 banners; cropping them to 4:3 would cut the
     wording on them. Text fallbacks share the shape so the grid stays even. */
  aspect-ratio: 16 / 9;
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-media.has-image {
  padding: 0;
}
/* Brand logos: shown whole on white (never cropped), padded; small originals
   keep their natural size instead of being stretched into a blur. */
.tile-media.logo {
  background: var(--white);
}
.tile-media.logo.has-image {
  padding: 0.9rem;
}
.tile-media.logo img {
  object-fit: contain;
}
.tile-media.logo img.logo-small {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.shop-search {
  margin-bottom: 1.25rem;
}
.hero-search {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: 1.25rem auto 0;
  position: relative;
}
.hero-search input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
}
/* The blue focus ring is invisible on the magenta hero; a white ring with a
   dark inner edge reads on the gradient and on the white input alike. */
.hero :focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--magenta-dark);
}
.shop-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.shop-search-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shop-search-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
}
.shop-search-row input::placeholder,
.hero-search input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.tile-body {
  padding: 1rem;
}

.tile-body h2,
.tile-body h3 {
  margin: 0 0 0.35rem;
  color: var(--magenta-dark);
}

.tile-body p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Product grid + filters */
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}

.filters-toggle { display: none; }

#filter-brand {
  max-height: 16rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

@media (max-width: 800px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters h2 { display: none; }
  .filters-toggle { display: block; width: 100%; }
  .filters-body { display: none; margin-top: 1rem; }
  .filters.open .filters-body { display: block; }
}

.filters {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.filters h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.filter-group {
  margin-bottom: 1.25rem;
}

.filter-group h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.filter-option label {
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-media {
  aspect-ratio: 1 / 1;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.75rem;
  position: relative;
}

.quick-view-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  background: rgba(42, 20, 32, 0.85);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.product-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.product-body h2,
.product-body h3 {
  margin: 0;
  font-size: 1rem;
}

.product-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}

.product-price {
  font-weight: 700;
  color: var(--magenta-dark);
  margin: 0.25rem 0;
}

.product-price.tbd {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.product-card .btn { margin-top: auto; width: 100%; text-align: center; }

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 20, 32, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 200;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 480px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.modal h2 {
  margin-top: 0;
  color: var(--magenta-dark);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  z-index: 300;
  max-width: 90vw;
  text-align: center;
}

.toast[hidden] { display: none; }

/* Notice banner (coming soon, etc) */
.notice {
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: var(--ink-soft);
}

/* Product photos, sale price and sold out label */
.product-media.has-photo {
  padding: 0;
  overflow: hidden;
}

.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stock-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  z-index: 1;
}

.product-price .was {
  text-decoration: line-through;
  color: var(--ink-soft);
  margin-right: 0.35rem;
}

/* Forms (checkout, account), bag and checkout layout */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-field {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-field > label,
.form-field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  background: var(--white);
}

.form-field [aria-invalid="true"] {
  border: 2px solid var(--danger);
}

.form-hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}

.form-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 0.35rem 0;
  cursor: pointer;
}

.form-check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--magenta);
}

.form-check a,
.checkout-done a:not(.btn) {
  color: var(--magenta-dark);
  text-decoration: underline;
}

.form-errors {
  background: #fdecef;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
}

.form-errors p { margin: 0 0 0.4rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors a { color: inherit; font-weight: 600; }
#checkout-reload-row { margin-top: 0.6rem; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 860px) {
  .checkout-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.checkout-summary h2,
#checkout-form h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  color: var(--magenta-dark);
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.cart-table th,
.cart-table td {
  padding: 0.6rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.cart-table th.num,
.cart-table td.num { text-align: right; white-space: nowrap; }

.cart-row-unavailable td:first-child { color: var(--ink-soft); }

.cart-unavailable {
  color: var(--danger);
  font-weight: 600;
  font-size: 0.9rem;
}

.qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.qty-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--field-border);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.qty-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.qty-value {
  min-width: 1.5rem;
  text-align: center;
  display: inline-block;
}

.checkout-subtotal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.1rem;
  margin: 0.25rem 0 0.5rem;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Bag table on phones: each row becomes a small card. The ARIA roles in the
   markup keep it a table for screen readers once display changes. */
@media (max-width: 560px) {
  .cart-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cart-table-stack,
  .cart-table-stack tbody,
  .cart-table-stack td { display: block; }
  .cart-table-stack tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
  }
  .cart-table-stack td { padding: 0; border: 0; }
  .cart-table-stack td:first-child { grid-column: 1 / -1; }
  .cart-table-stack td.cart-qty { grid-column: 1; text-align: left; }
  .cart-table-stack td.cart-line { grid-column: 2; font-weight: 600; }
  .cart-table-stack td.cart-remove { grid-column: 1 / -1; text-align: left; }
}

.checkout-done { max-width: 40rem; }
.checkout-done h2 { color: var(--magenta-dark); }
.checkout-code { font-size: 1.15rem; }

/* Legal and contact pages: one readable column, comfortable line length */
.policy {
  max-width: 46rem;
}

.policy h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
  color: var(--magenta-dark);
}

.policy p {
  margin: 0 0 1rem;
}

.policy ul,
.policy ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.policy li {
  margin-bottom: 0.5rem;
}

.policy a,
.policy-note a {
  color: var(--magenta-dark);
  text-decoration: underline;
}

.policy-updated {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

.policy-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* Footer -- pink per Janille's request 2026-09-28 (was the near-black --ink) */
.site-footer {
  background: var(--magenta-dark);
  color: var(--cream);
  padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
  margin-top: 3rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-inner a {
  color: var(--gold-light);
}

.footer-col h2,
.footer-col h4 {
  margin: 0 0 0.6rem;
  color: var(--gold-light);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li { margin-bottom: 0.4rem; }

.footer-bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.85rem;
  color: #cbb9c4;
}

/* 404 page: center the two headings inside the empty-state card */
.empty-state .section-title { justify-content: center; }


/* ---- Classes that replaced inline style="" attributes (needed so the
   Content-Security-Policy can drop 'unsafe-inline' from style-src). ---- */
.page-wrap.page-narrow { max-width: 420px; }
.acct-field { margin-bottom: 0.85rem; }
.acct-field.acct-field-last { margin-bottom: 1rem; }
.acct-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.acct-input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.w-full { width: 100%; }
.acct-error { color: var(--danger); margin-top: 0.6rem; }
.link-button { background: none; border: none; color: var(--magenta-dark); text-decoration: underline; cursor: pointer; margin-top: 0.6rem; padding: 0; }
.link-button.link-button-lg { margin-top: 0.85rem; }
.acct-or { text-align: center; color: var(--ink-soft); margin: 1rem 0; }
.policy-note.acct-note { margin-top: 1rem; margin-bottom: 0; }
.mt-section { margin-top: 2.5rem; }
.notice.mb-notice { margin-bottom: 1.5rem; }
.notice.mb-1 { margin-bottom: 1rem; }
.notice.mb-125 { margin-bottom: 1.25rem; }
.section-title.title-sm { font-size: 1.15rem; }
.tile.tile-static { cursor: default; }
.product-media.quick-media { aspect-ratio: 1 / 1; margin-bottom: 1rem; }

/* ---- Checkout rebuild ---- */
.preview-banner {
  background: var(--gold-light);          /* ink on gold-light is 8.72:1 */
  color: var(--ink);
  border: 2px dashed var(--magenta-dark);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-weight: 600;
}
.co-address { margin: 0 0 1rem; }
.co-static { margin: 0 0 1rem; }
.co-block {
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.co-block h2 { margin-top: 0; }
.co-block p { margin: 0 0 0.5rem; }
.co-totals-list { margin: 0; }
.co-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.co-row dt { font-weight: 400; flex: 0 0 auto; max-width: 45%; }
.co-row dd { margin: 0; text-align: right; min-width: 0; flex: 1 1 0; }
.co-row-total { font-size: 1.15rem; font-weight: 700; border-bottom: 0; }
.co-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--cream-dark);          /* ink on cream-dark is 14.38:1 */
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}
.co-secure { margin: 0 0 1rem; }
.co-cards-label { margin: 0 0 0.4rem; font-weight: 600; }
.co-cards-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; }
.card-chip {
  border: 1px solid var(--field-border);  /* 4.47:1 on white, passes 1.4.11 */
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}
.checkout-actions {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  margin-top: 1rem;
}
.checkout-actions .form-check { margin: 0 0 0.6rem; font-size: 0.9rem; }
.checkout-actions .btn { display: block; width: 100%; text-align: center; }
/* Below 860px the checkout is one plain column instead of a grid, and the bar
   is a sibling of the form inside it. A sticky box can only move inside its
   containing block: here that is the whole checkout body, which starts at the
   top of the first screen, so the bar is on screen from the first paint (inside
   the form, which starts below the fold, it would not be). */
@media (max-width: 859px) {
  .checkout-grid { display: block; }
  .checkout-grid > .checkout-summary { margin-bottom: 2rem; }
}
/* From 860px the bar sits under the form in the right hand column. */
@media (min-width: 860px) {
  .checkout-actions { grid-column: 2; margin-top: -1rem; }
}
@media (max-width: 859px) and (min-height: 480px) {
  .checkout-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;                          /* below the sticky header (100), modals (200) and toast (300) */
    margin-left: -1.25rem;                /* full width inside .page-wrap's 1.25rem side padding */
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-shadow: 0 -4px 12px rgba(42, 20, 32, 0.12);
  }
  /* A focused field is never hidden behind the bar (191px tall at 320px wide in
     Spanish). Scoped to the page that has the bar, not every page. */
  html:has(.checkout-actions) { scroll-padding-bottom: 13rem; }
}
/* The site header is sticky (160px tall on a phone, about 72px on a desktop), so
   a field that is scrolled into view by focus must stop below it. */
@media (max-width: 859px) {
  html:has(.checkout-actions) { scroll-padding-top: 10.5rem; }
}
@media (min-width: 860px) {
  html:has(.checkout-actions) { scroll-padding-top: 6rem; }
}
.co-cards-none { color: var(--ink-soft); font-size: 0.9rem; }
.co-agree-error { margin: 0 0 0.5rem; color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.co-field-error { margin: 0.3rem 0 0; color: var(--danger); font-weight: 600; font-size: 0.9rem; }
/* The thank you screen's Continue Shopping button must stay on the first screen of
   a 375 x 667 phone in both languages and in the longer "live" wording, so the
   spacing is tighter there. Measured: Spanish, off mode, was 7px too low. */
@media (max-width: 859px) {
  .checkout-done h2 { margin: 0.5rem 0; }
  .checkout-done .checkout-code { margin: 0.5rem 0; }
  .checkout-done p { margin: 0.6rem 0; }
}
.checkout-actions .form-check input[aria-invalid="true"] { outline: 3px solid var(--danger); outline-offset: 2px; }