/* Atlas — commerce layer.
   Extends the shared design system in styles.css (palette, type, buttons,
   cards, hero, material band, lightbox) with the pieces a shop needs and a
   brochure site does not: prices, product grids, cart, checkout, chat.
   Everything here uses the existing custom properties, so the two sites stay
   visually of a piece. */

:root {
  --success: #3f6b4a;
  --danger: #8c3a2e;
  --warning: #8a6a1f;
  --info: #3a5a6b;
}

/* ---------- Utility ---------- */
.stack > * + * { margin-top: 1rem; }
.row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header additions ---------- */
.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}
.header-search input {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(243, 239, 231, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  border-radius: 0;
}
.header-search input::placeholder { color: rgba(243, 239, 231, 0.55); }
.header-search input:focus {
  outline: none;
  border-color: var(--accent-2);
  background: rgba(255, 255, 255, 0.14);
}

.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(243, 239, 231, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.icon-link:hover { color: var(--paper); }

.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--accent-2);
  color: var(--espresso);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
}

.locale-switch { display: inline-flex; border: 1px solid rgba(243, 239, 231, 0.28); }
.locale-switch a {
  padding: 0.3rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(243, 239, 231, 0.7);
}
.locale-switch a[aria-current='true'] { background: var(--accent-2); color: var(--espresso); }

/* ---------- Price ---------- */
.price { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.price-now {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--espresso);
  letter-spacing: 0.01em;
}
.price-was {
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: line-through;
}
.price-badge {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger);
}
.price-lg .price-now { font-size: 1.7rem; }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2.5rem 1.75rem;
}

.product-card { display: flex; flex-direction: column; }
.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-card-media img {
  width: 100%;
  height: 100%;
  /* Product photography is supplied as a cut-out on transparency so the
     --surface-2 tile shows through, the same way the turntable frames did.
     That makes `cover` wrong here: cropping a square cut-out into the 4/5 tile
     slices the toe and heel off. Contain it and let the tile breathe. */
  object-fit: contain;
  padding: 7%;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Same reasoning for the product page's thumbnail strip. Scoped to the product
   layout so the brochure galleries in styles.css keep their edge-to-edge crop. */
.product-layout .gallery-trigger {
  display: grid;
  place-items: center;
  padding: 8%;
  box-sizing: border-box;
}

.product-layout .gallery-trigger img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The hero shell wears a stone texture built for the 360° turntable render.
   A flat tile suits flat photography better and matches the product grid, so
   while the viewer is disabled the hero uses the same surface as the cards.
   Drop this rule when the turntable comes back — see TODO(turntable). */
.viewer-shell.product-photo {
  background: var(--surface-2);
  /* Pad the frame, not the image. Padding on a replaced element interacts with
     `object-fit` and a percentage height whose parent has no definite height,
     which let the shoe reach and cross the edge. Fixing the frame's ratio and
     centring inside a padded box makes the inset exact at every width. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 9%;
  box-sizing: border-box;
}

.viewer-shell.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card:hover .product-card-media img { transform: scale(1.04); }

.product-card-flag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: var(--espresso);
  color: var(--paper);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.product-card-flag.sold-out { background: var(--stone); }

.product-card-body { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.product-card-brand {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-card-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text);
}

/* ---------- Listing layout ---------- */
.listing-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}

.facet-group { border-top: 1px solid var(--line-strong); padding: 1.25rem 0; }
.facet-group h3 {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.facet-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.facet-option input { accent-color: var(--accent); }
.facet-count { margin-left: auto; font-size: 0.78rem; color: var(--muted); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.result-count { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; }

select.control,
input.control,
textarea.control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
}
select.control:focus,
input.control:focus,
textarea.control:focus {
  outline: none;
  border-color: var(--accent);
}
select.control { width: auto; min-width: 190px; padding-right: 2rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field-hint { font-size: 0.8rem; color: var(--muted); }
.field-error { font-size: 0.8rem; color: var(--danger); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* ---------- Product detail ---------- */
.buy-panel { border-top: 1px solid var(--line-strong); padding-top: 1.6rem; }

.variant-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1.4rem; }
.variant-option {
  min-width: 3.4rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--text);
  cursor: pointer;
  transition: 0.2s ease;
}
.variant-option:hover { border-color: var(--espresso); }
.variant-option[aria-pressed='true'] {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--paper);
}
.variant-option:disabled {
  color: var(--stone);
  border-color: var(--line);
  cursor: not-allowed;
  text-decoration: line-through;
}

.stock-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }
.stock-note.low { color: var(--warning); }
.stock-note.out { color: var(--danger); }

/* ---------- Cart & checkout ---------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cart-line-media {
  width: 96px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.cart-line-name { font-weight: 400; font-size: 1rem; margin-bottom: 0.2rem; }
.cart-line-variant { font-size: 0.82rem; color: var(--muted); }

.qty-control { display: inline-flex; border: 1px solid var(--line-strong); }
.qty-control button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.qty-control button:disabled { color: var(--stone); cursor: not-allowed; }
.qty-control span {
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  font-size: 0.9rem;
  border-inline: 1px solid var(--line-strong);
}

.summary-panel {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.6rem;
  position: sticky;
  top: 108px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.summary-row.discount { color: var(--success); }
.summary-row.total {
  border-top: 1px solid var(--line-strong);
  margin-top: 0.8rem;
  padding-top: 1rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--espresso);
}
/* Direct child only. As a descendant selector this also caught the coupon
   form's Apply button, whose `width: 100%` then demanded the whole row and
   squeezed the input down to a few characters, while `margin-top` knocked it
   out of alignment with the field beside it. */
.summary-panel > .btn { width: 100%; margin-top: 1.5rem; }

.coupon-form { display: flex; gap: 0.5rem; margin: 1.2rem 0; align-items: stretch; }
/* min-width: 0 overrides the flex default of `auto`, which would otherwise let
   the input's intrinsic size keep it from shrinking on narrow screens. */
.coupon-form input { flex: 1 1 auto; min-width: 0; }
.coupon-form .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Payment methods ---------- */
.method-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.6rem; }
.method-option {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.method-option:hover { border-color: var(--espresso); }
.method-option:has(input:checked) { border-color: var(--accent); background: rgba(118, 89, 46, 0.05); }
.method-option input { margin-top: 0.25rem; accent-color: var(--accent); }
.method-option strong { display: block; font-weight: 500; font-size: 0.95rem; }
.method-option span { font-size: 0.83rem; color: var(--muted); }
.method-option.disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Status pages ---------- */
.status-panel {
  max-width: 620px;
  margin: 4rem auto;
  text-align: center;
  border-top: 1px solid var(--line-strong);
  padding-top: 3rem;
}
.status-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.6rem;
}
.status-mark.ok { background: rgba(63, 107, 74, 0.14); color: var(--success); }
.status-mark.bad { background: rgba(140, 58, 46, 0.14); color: var(--danger); }
.status-mark.wait { background: rgba(138, 106, 31, 0.14); color: var(--warning); }

.status-pill {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-strong);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.status-pill.ok { border-color: var(--success); color: var(--success); }
.status-pill.bad { border-color: var(--danger); color: var(--danger); }
.status-pill.wait { border-color: var(--warning); color: var(--warning); }

.notice {
  padding: 0.9rem 1.15rem;
  border-left: 3px solid var(--accent);
  background: rgba(118, 89, 46, 0.06);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.notice.error { border-left-color: var(--danger); background: rgba(140, 58, 46, 0.07); }
.notice.success { border-left-color: var(--success); background: rgba(63, 107, 74, 0.07); }

/* ---------- Order timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.4rem 1.75rem;
  border-left: 1px solid var(--line-strong);
  font-size: 0.92rem;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 0.42rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stone);
}
.timeline li.done::before { background: var(--accent); }
.timeline time { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
  text-align: left;
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.data-table td {
  padding: 0.95rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
.data-table tbody tr:hover { background: rgba(118, 89, 46, 0.03); }

/* ---------- Chat widget ---------- */
.chat-launcher {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.3rem;
  background: var(--espresso);
  color: var(--paper);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.chat-panel {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 901;
  width: min(380px, calc(100vw - 3rem));
  height: min(560px, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: var(--espresso);
  color: var(--paper);
}
.chat-head strong { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.chat-head button { background: none; border: 0; color: var(--paper); font-size: 1.2rem; cursor: pointer; line-height: 1; }

.chat-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.chat-bubble {
  max-width: 82%;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: var(--radius);
  white-space: pre-wrap;
}
.chat-bubble.them { align-self: flex-start; background: var(--surface); color: var(--text); }
.chat-bubble.me { align-self: flex-end; background: var(--espresso); color: var(--paper); }
.chat-bubble.system {
  align-self: center;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  max-width: 100%;
}

.chat-compose { display: flex; gap: 0.5rem; padding: 0.85rem; border-top: 1px solid var(--line); }
.chat-compose input { flex: 1; }
.chat-disclaimer {
  padding: 0 0.85rem 0.75rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination a,
.pagination span {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--espresso); }
.pagination [aria-current='page'] { background: var(--espresso); border-color: var(--espresso); color: var(--paper); }

/* ---------- Footer ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-grid h3 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-grid a { font-size: 0.88rem; color: var(--ink-soft); }
.footer-grid a:hover { color: var(--espresso); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-nav {
  background: var(--espresso);
  padding: 1.5rem 0;
  color: var(--paper);
}
.admin-nav .brand { padding: 0 1.4rem 1.5rem; color: var(--paper); }
.admin-nav a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(243, 239, 231, 0.72);
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--paper); }
.admin-nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
  box-shadow: inset 3px 0 0 var(--accent-2);
}
.admin-main { padding: 2.5rem 3rem; background: var(--paper); }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line-strong); margin-bottom: 2.5rem; }
.stat-grid article { background: var(--paper); padding: 1.5rem 1.3rem; }
.stat-grid strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--espresso);
  margin-bottom: 0.4rem;
}
.stat-grid span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .listing-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary-panel { position: static; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-main { padding: 1.5rem; }
}

@media (max-width: 860px) {
  .header-search { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line-media { width: 72px; }
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border: 0; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}


/* ---------- Campaign artwork ----------
   The supplied creatives carry their headline, feature callouts and delivery
   badge baked into the pixels. The shared .media-showcase crops with
   `object-fit: cover`, which would slice that type off at the edges, so these
   panels contain the artwork instead and let the tile show around it. */
.media-showcase.campaign,
.campaign-media {
  min-height: 0;
  padding: 0;
  margin: 0;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.media-showcase.campaign img,
.campaign-media img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

/* The portrait creative is only 646px wide at source; stretching it across a
   wide column would show the upscale. */
.campaign-media { max-width: 460px; }

@media (max-width: 900px) {
  .campaign-media { max-width: none; }
}

/* The hero creative takes half the *page*, not half the content column.
   `.container` caps at --max-width (1240px), so 50% of it is only about a
   third of a 1920px viewport — the creative can never reach half while it
   stays inside. This row therefore breaks out of the container and sizes the
   image column in `vw` directly.

   The left column keeps the container's own inset, so the copy still lines up
   with the header and the sections below; only the image runs to the edge.
   Scoped to the hero — the campaign panel further down keeps the shared
   1.05/0.95 split, which suits its smaller portrait artwork. */
.hero .hero-split {
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) 58vw;
}

/* A modest, bounded inset rather than the container's own.

   The container inset is `(100vw - 1240px) / 2`, which grows without limit:
   full screen at ~2000px it pushed the copy in by nearly 380px and left a
   band of empty page down the left edge. Capping it at 7rem keeps the copy
   clear of the viewport edge without the dead column. The copy no longer
   lines up with the header logo on wide screens — that is the deliberate
   trade for the reclaimed space. */
.hero .hero-split > :first-child {
  padding-left: var(--page-inset);
}

/* The poster meets the header, with no band of background between them.

   `.hero` carries `padding: 7rem 0 4.5rem` upstream, so at the top of the page
   112px of the cream background sat between the sticky header and the creative.
   Scrolled all the way up, the artwork should touch the leather bar and stop.

   Only above the stacking breakpoint. Below it the copy comes first in the
   source order, so dropping the top padding would press the eyebrow against the
   header rather than the artwork — the opposite of the intent.

   The bottom padding stays: it is what separates the hero from the trust row.
   The left column is unaffected because the row is `align-items: center` and
   the creative is the taller item, so the copy stays centred against it. */
/* One inset for the whole page.

   The hero copy sits at a capped 5vw; every section under it used `.container`,
   which is `min(1240px, 100% - 3rem)` centred. On a 2000px screen that starts
   380px in against the hero's ~100px, and the mismatch grows with the viewport —
   the wider the window, the more the page below the hero looked indented from
   the page above it.

   A shared token so the two cannot drift apart again. */
:root {
  --page-inset: clamp(1.5rem, 5vw, 7rem);
}

@media (min-width: 1366px) {
  .hero { padding-top: 0; }

  /* Left edge on the token, right edge mirrored, no centring. Applied by
     opting a container in rather than changing `.container` itself, because
     that class also lays out the cart, checkout and admin, where a centred
     measure is the right answer.

     Below this breakpoint the rule does not apply at all: `.container` is
     already `100% - 3rem` there, so it is effectively full width and there is
     nothing to correct. */
  .container.page-wide {
    width: auto;
    max-width: none;
    margin: 0;
    padding-inline: var(--page-inset);
  }

  /* Explicit four across, not `auto-fill`.

     The shared grid is `repeat(auto-fill, minmax(240px, 1fr))`, which in a
     ~1800px container lays down six tracks. The featured row holds exactly
     four products, so two tracks would sit empty and the row would trail off
     into whitespace on the right — trading the old left gap for a new one. */
  .page-wide .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Stack before the copy gets too narrow for the headline: at 58vw the text
   column is down to ~410px by 1280px wide, and "Bangladeshi" alone is about
   425px at the display size. */
@media (max-width: 1365px) {
  .hero .hero-split {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 1.5rem;
  }

  .hero .hero-split > :first-child { padding-left: 0; }

  /* Stacked, a full-width square creative would be taller than the viewport. */
  .hero .hero-split .media-showcase.campaign {
    max-width: 620px;
    margin-inline: auto;
  }
}

/* ---------- Campaign band ----------
   The portrait creative stands the full height of the viewport, so at one point
   in the scroll it touches the top and the bottom of the window. That needs the
   band to lose its section padding and the row to break out of the container,
   the same way the hero does — otherwise the section padding alone guarantees a
   gap at both ends.

   The image is sized by height and takes its width from the aspect ratio, so
   the column is exactly as wide as the artwork and the copy gets everything
   else. Below 1024px this all reverts: the creative goes back to a centred
   460px and the section keeps its normal rhythm, because a viewport-height
   image on a phone is a wall to scroll past rather than a feature.

   Note the source artwork is 646x800. It renders 1:1 on an 800px-tall window
   and is upscaled above that — about 1.35x at 1080px tall. Re-export from a
   higher-resolution original via scripts/import-marketing-images.ts if that
   softness shows. */
@media (min-width: 1024px) {
  .section.campaign-band {
    padding: 0;
  }

  .section.campaign-band > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100vh;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    /* Left edge on the shared page inset — so the poster starts exactly where
       the hero copy and the product grid above it do, rather than at the old
       centred-container margin. Horizontal only: the vertical padding stays at
       zero so the artwork still meets the top and bottom of the window. */
    padding-left: var(--page-inset);
  }

  /* Copy sits on the right here, so the bounded inset goes on that side. */
  .section.campaign-band > .container > :last-child {
    padding-right: clamp(1.5rem, 5vw, 7rem);
  }

  /* Sized by width *or* height, whichever gives the larger poster.

     Height alone was the old rule (`height: 100vh; width: auto`), and it made
     the artwork's width a function of the window's height: the 646x800 creative
     is 0.8075 wide per unit tall, so a 2000x980 window rendered it 790px — 40%
     of the page — while a taller 1600x1200 window gave 970px, 60%. The poster
     shrank on the widest screens, which is the opposite of what a full-bleed
     campaign band is for.

     `max()` takes whichever wins:
       58vw     — a fixed share of the page, so a wide window gets a wide poster
       80.75vh  — the width at which the artwork exactly fills the window height
                  (100vh x 646/800), preserving the original full-bleed look on
                  tall windows

     Height follows the aspect ratio in both cases, so nothing is cropped. That
     matters here: the headline, feature callouts and delivery badge are baked
     into the pixels, and `object-fit: cover` in a box wider than 0.8075 would
     slice them off. On a wide, short window the poster is now taller than the
     viewport and scrolls, which is the deliberate trade for the width. */
  .section.campaign-band .campaign-media {
    max-width: none;
    width: max(58vw, 80.75vh);
    height: auto;
    border-radius: 0;
  }

  .section.campaign-band .campaign-media img {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
  }
}