/* YemisiBoutique — VIEW styles.
   Design: master_of_works/design.md §2 (palette), §3 (type), §4 (layout).
   Decree 20260920-221313-8b9a89.

   Every colour below was sampled from her own logo and promotional card with
   GetPixel — not from a description of them, and not from the reference site.
   This is the ONLY stylesheet a VIEW page links besides motion.css. */

/* Self-hosted, OFL 1.1 (licence committed beside the file). Served from our
   own origin under font-src 'self'. Not a CDN, no third-party request leaves
   the customer's phone, no package manager, no new dependency. */
@font-face {
  font-family: 'Yemisi Serif';
  src: url('/static/fonts/serif-600.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;          /* Georgia paints first; the page is never blank */
}

:root {
  --green:      #1A4635;
  --green-deep: #083028;
  --orange:     #A94917;
  --gold:       #ECCE88;
  --gold-deep:  #BAA475;
  --teal:       #93D4CC;
  --ground:     #FAFBF6;
  --ink:        #040807;
  --line:       #E4DFD0;

  --font-heading: 'Yemisi Serif', Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --card-ratio: 0.754;        /* MEASURED from the reference gallery: 3042x4032 */
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--green); }
a:hover { color: var(--orange); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 60;
  background: var(--gold); color: var(--green-deep); padding: 10px 16px;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------- announcement bar */

.announce {
  background: var(--green-deep);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 9px 40px 9px 16px; position: relative;
}
.announce__text {
  margin: 0; font-size: 13px; letter-spacing: .05em; text-align: center;
  text-transform: uppercase;
}
.announce__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--gold-deep); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 4px 8px;
}
.announce__close:hover { color: var(--gold); }

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--green); color: var(--gold);
  border-bottom: 1px solid rgba(236, 206, 136, .22);
}
.nav__bar {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
}
.wordmark {
  font-family: var(--font-heading); font-size: 24px; letter-spacing: .14em;
  color: var(--gold); text-decoration: none; margin-right: auto;
}
.wordmark:hover { color: #fff; }
.wordmark--foot { display: block; margin-bottom: 8px; }

.nav__links { display: none; gap: 22px; align-items: center; }
.nav__links a, .nav__sub-toggle {
  color: var(--gold); text-decoration: none; font-size: 14px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  padding: 6px 0;
}
.nav__links a:hover, .nav__sub-toggle:hover { color: var(--teal); }

.nav__has-sub { position: relative; }
.nav__sub {
  position: absolute; left: -16px; top: 100%; min-width: 230px;
  margin: 0; padding: 10px 0; list-style: none;
  background: var(--green-deep); border: 1px solid rgba(236, 206, 136, .3);
  visibility: hidden; opacity: 0;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub { visibility: visible; opacity: 1; }
.nav__sub li a {
  display: block; padding: 9px 18px; font-size: 13px; letter-spacing: .07em;
}
.nav__sub li a:hover { background: rgba(147, 212, 204, .12); }

.nav__tools { display: flex; align-items: center; gap: 12px; }
.nav__icon {
  color: var(--gold); background: none; border: 0; cursor: pointer;
  font-size: 14px; letter-spacing: .08em; text-decoration: none;
  font-family: var(--font-body); padding: 6px;
}
.nav__icon:hover { color: var(--teal); }

.nav__burger {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.nav__burger-bar { display: block; width: 22px; height: 2px; background: var(--gold); }

.nav__search {
  display: none; max-width: var(--wrap); margin: 0 auto;
  padding: 0 16px 14px; gap: 8px;
}
.nav__search.is-open { display: flex; }
.nav__search input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--gold-deep);
  background: var(--ground); color: var(--ink); font-size: 15px;
}
.nav__search button {
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  padding: 11px 18px; letter-spacing: .08em; font-size: 13px; cursor: pointer;
  font-family: var(--font-body);
}
.nav__search button:hover { background: var(--gold); color: var(--green-deep); }

/* --------------------------------------------------------------- drawers */

.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 50; width: min(360px, 88vw);
  background: var(--green); color: var(--gold);
  display: flex; flex-direction: column; padding: 18px;
  visibility: hidden;
}
.drawer--left  { left: 0;  transform: translateX(-100%); }
.drawer--right { right: 0; transform: translateX(100%); }
.drawer.is-open { visibility: visible; transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__title { font-size: 13px; letter-spacing: .12em; }
.drawer__close {
  background: none; border: 0; color: var(--gold); font-size: 26px;
  line-height: 1; cursor: pointer;
}
.drawer__links { display: flex; flex-direction: column; margin-top: 18px; }
.drawer__links a {
  color: var(--gold); text-decoration: none; padding: 13px 0;
  border-bottom: 1px solid rgba(236, 206, 136, .16);
  letter-spacing: .08em; font-size: 14px; text-transform: uppercase;
}
.drawer__body { margin-top: 16px; flex: 1; font-size: 14px; }
.drawer__line { border-bottom: 1px solid rgba(236,206,136,.16); padding: 10px 0; }
.drawer__cta { margin-top: auto; }

/* ------------------------------------------------------------------ flash */

.flash {
  max-width: var(--wrap); margin: 16px auto 0; padding: 13px 18px;
  background: #FDF3E7; border-left: 4px solid var(--orange);
  color: var(--ink); font-size: 14px;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  aspect-ratio: 0.8333;                 /* ~5:6 on the phone, MEASURED from the reference */
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero__art {
  position: absolute; inset: 0;
  /* A generated mood texture: woven bands in her greens and golds, drawn in
     CSS. No garment is depicted — a pictured dress cannot be shipped. */
  background-color: var(--green);
  background-image:
    repeating-linear-gradient(115deg, rgba(236,206,136,.10) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-115deg, rgba(147,212,204,.07) 0 2px, transparent 2px 19px),
    radial-gradient(circle at 24% 18%, rgba(169,73,23,.32), transparent 52%),
    radial-gradient(circle at 78% 82%, rgba(8,48,40,.85), transparent 60%);
}
.hero__inner {
  position: relative; text-align: center; padding: 24px; max-width: 620px;
}
.hero__head {
  font-family: var(--font-heading); color: var(--gold);
  font-size: 32px; line-height: 1.12; letter-spacing: .02em;
  margin: 0 0 12px; font-weight: 700;
}
.hero__sub {
  color: var(--ground); font-size: 14px; letter-spacing: .04em; margin: 0 0 22px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 0 24px; height: 48px; cursor: pointer; border: 1px solid transparent;
}
.btn--primary { background: var(--green); color: var(--gold); }
.btn--primary:hover { background: var(--green-deep); color: var(--gold); }
.btn--secondary {
  background: var(--ground); color: var(--green); border-color: var(--green);
}
.btn--secondary:hover { background: var(--green); color: var(--gold); }
.btn--ghost {
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.btn--ghost:hover { background: var(--gold); color: var(--green-deep); }
.btn--full { width: 100%; height: 52px; }
.btn--small { height: 38px; padding: 0 14px; font-size: 12px; }
.paypal-mark { flex: none; }

/* ------------------------------------------------------------ grid + card */

.grid-section { max-width: var(--wrap); margin: 0 auto; padding: 44px 16px; }
.section-title {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; text-align: center;
  margin: 0 0 26px; color: var(--ink);
}
.section-title::after {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--gold-deep); margin: 14px auto 0;
}

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { text-decoration: none; color: var(--ink); display: block; }
.card__media {
  position: relative; aspect-ratio: var(--card-ratio);
  background: #EFEDE4; overflow: hidden;
}
.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__img--alt { opacity: 1; }
.card__name {
  font-size: 14px; font-weight: 500; margin: 12px 0 4px; line-height: 1.35;
}
.card__price { font-size: 14px; font-weight: 600; margin: 0; color: var(--green); }

.ribbon {
  position: absolute; top: 14px; right: -34px; width: 132px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-align: center;
  padding: 5px 0; transform: rotate(45deg);
}

/* ------------------------------------------------------------ empty shop */

.empty-shop { max-width: 620px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.empty-shop__line {
  font-family: var(--font-heading); font-size: 22px; color: var(--ink);
  margin: 0 0 22px;
}
.empty-shop__label {
  display: block; color: var(--gold-deep); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.empty-shop__form { display: flex; flex-direction: column; gap: 10px; }
.empty-shop__form input,
.capture__form input {
  padding: 13px 14px; border: 1px solid var(--gold-deep);
  background: #fff; font-size: 15px; font-family: var(--font-body);
}
.empty-line { text-align: center; color: var(--ink); padding: 40px 0; }

/* ------------------------------------------------------------- capture */

.capture {
  background: var(--green-deep); color: var(--gold);
  padding: 46px 20px; text-align: center;
}
.capture .section-title { color: var(--gold); }
.capture .section-title::after { background: var(--gold-deep); }
.capture__form {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.capture__note { font-size: 13px; color: var(--gold-deep); margin: 14px 0 0; }
.capture__text { margin: 0 0 16px; color: var(--ground); }

.modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 8, 7, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal__box {
  background: var(--ground); max-width: 420px; width: 100%; padding: 32px 26px;
  text-align: center; position: relative; border: 1px solid var(--gold-deep);
}
.modal__head {
  font-family: var(--font-heading); font-size: 21px; margin: 0 0 18px;
  color: var(--green-deep);
}
.modal__box input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--gold-deep);
  margin-bottom: 10px; font-size: 15px; font-family: var(--font-body);
}
.modal__close {
  position: absolute; top: 8px; right: 12px; background: none; border: 0;
  font-size: 24px; cursor: pointer; color: var(--ink);
}
.modal__no {
  background: none; border: 0; margin-top: 14px; cursor: pointer;
  font-size: 12px; letter-spacing: .1em; color: var(--ink);
  text-transform: uppercase; text-decoration: underline;
}

/* ---------------------------------------------------------------- banner */

.banner {
  background: var(--green); padding: 46px 16px; text-align: center;
}
.banner__title {
  font-family: var(--font-heading); color: var(--gold); margin: 0;
  font-size: 28px; letter-spacing: .06em; text-transform: uppercase;
}
.banner--about {
  background-image: linear-gradient(120deg, var(--green-deep), var(--green) 60%, #235a44);
}

.sortbar {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-bottom: 20px; font-size: 13px;
}
.sortbar select {
  padding: 9px 12px; border: 1px solid var(--gold-deep); background: #fff;
  font-family: var(--font-body); font-size: 14px;
}

/* --------------------------------------------------------------- product */

.product {
  max-width: var(--wrap); margin: 0 auto; padding: 28px 16px 56px;
  display: grid; gap: 28px;
}
.product__media { display: grid; gap: 10px; }
.product__img {
  /* height:auto is load-bearing. The <img> carries height="995" as a
     presentational hint, and aspect-ratio is ignored while the used height is
     not auto — MEASURED: the placeholder painted 610x990 instead of 610x809
     and the frame came out stretched. */
  width: 100%; height: auto; aspect-ratio: var(--card-ratio); object-fit: cover;
  background: #EFEDE4;
}
.product__title {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  margin: 0 0 10px; line-height: 1.2;
}
.product__price { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.product__price--tbc { color: var(--gold-deep); font-size: 17px; }
.product__ship { font-size: 13px; color: var(--gold-deep); margin: 0 0 22px; }
.product__label {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 7px;
}
.product__size { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.product__size label { width: 100%; }
.product__size select {
  flex: 1 1 200px; padding: 13px 12px; border: 1px solid var(--gold-deep);
  background: #fff; font-size: 15px; font-family: var(--font-body);
}
.product__sizelink { font-size: 13px; }
.product__buy input[type="number"],
.product__notify input[type="email"] {
  padding: 12px 14px; border: 1px solid var(--gold-deep); background: #fff;
  font-size: 15px; font-family: var(--font-body);
}
.product__notify input[type="email"] { width: 100%; margin-bottom: 12px; }
.product__soldout {
  background: #FDF3E7; border-left: 4px solid var(--orange);
  padding: 10px 14px; font-size: 14px; margin: 0 0 16px;
}
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 18px; }
.stepper__btn {
  width: 42px; height: 46px; border: 1px solid var(--gold-deep); background: #fff;
  cursor: pointer; font-size: 17px; font-family: var(--font-body);
}
.stepper__input {
  width: 70px; height: 46px; text-align: center; border: 1px solid var(--gold-deep);
  border-left: 0; border-right: 0; font-size: 15px; font-family: var(--font-body);
}
.product__desc { margin-top: 26px; font-size: 15px; line-height: 1.75; max-width: 62ch; }
.product__returns {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink);
}

/* ------------------------------------------------------------------ cart */

.page-title {
  font-family: var(--font-heading); font-size: 26px; letter-spacing: .05em;
  text-transform: uppercase; text-align: center; margin: 0 0 26px;
}
.cart { max-width: 860px; margin: 0 auto; padding: 36px 16px 60px; }

/* ---- THE BAG AND THE RECEIPT ON A PHONE ---------------------------------

   Most of her customers arrive from Instagram, so the money page is a phone
   page first. A five-column bag line -- photograph, name, size, a quantity
   form, the line total, remove -- cannot reach its columns' minimum widths
   inside 390px: MEASURED by yemisi/tools/layout_probe.py, the table asks for
   448px of a 390px screen, and the line total was cut off the right edge.

   So below 768px each line stands up as a card: photograph and name, the size
   under it, then the quantity control with the line total against the right
   edge. The table returns at 768px, where the same probe measures it clean.
   The receipt (.order__table) is the same four facts and takes the same shape.

   The ARIA roles in cart.html and order.html are insurance rather than
   load-bearing. MEASURED over CDP with Accessibility.getFullAXTree in the
   Chrome this build ships against: a stacked table whose header row is real
   `<th scope="col">` keeps table / rowgroup / row / cell WITH OR WITHOUT them.
   They stay because an iPhone is how most of her customers arrive, dropping
   table semantics under a display override is the documented hazard in other
   engines, and this box cannot test one. A role that matches the implicit role
   costs nothing. */

.cart__table, .order__table {
  display: block; width: 100%; border-collapse: collapse; font-size: 14px;
}
.cart__table thead, .order__table thead {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cart__table tbody, .order__table tbody { display: block; }
.cart__table tr, .order__table tr {
  display: grid; align-items: center; column-gap: 12px; row-gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "piece remove" "size size" "qty total";
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cart__table td, .order__table td { display: block; padding: 0; border: 0; }
.cart__piece, .order__piece { grid-area: piece; }
.cart__size, .order__size { grid-area: size; color: var(--gold-deep); }
.cart__qtycell, .order__qty { grid-area: qty; }
.cart__money, .order__money { grid-area: total; text-align: right; font-weight: 600; }
.cart__rm { grid-area: remove; text-align: right; }
/* The card's later lines sit under the name, clear of the photograph: 60px of
   thumbnail and the 12px gap beside it. The table selector is not decoration --
   `.cart__table td` sets `padding: 0` and would otherwise win on specificity. */
.cart__table .cart__size, .cart__table .cart__qtycell { padding-left: 72px; }
.order__qty::before { content: "Qty "; color: var(--gold-deep); }

.cart__table th, .order__table th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); border-bottom: 1px solid var(--line); padding: 0 8px 10px;
}
/* The flex box is a span INSIDE the cell, never the cell itself: `display:flex`
   on a <td> takes it out of the table's column sizing, and this column carries
   a 60px photograph next to a name that must be allowed to wrap. */
.cart__pieceinner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cart__pieceinner a { overflow-wrap: anywhere; }
.cart__thumb { width: 60px; height: 80px; object-fit: cover; background: #EFEDE4; flex: none; }
.cart__qty { display: flex; gap: 6px; align-items: center; }
.cart__qty .stepper__input { border: 1px solid var(--gold-deep); width: 60px; height: 38px; }
.cart__remove {
  background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--gold-deep);
}
.cart__remove:hover { color: var(--orange); }
.cart__totals { margin: 22px 0; font-size: 15px; }
.cart__totals p { display: flex; justify-content: space-between; margin: 7px 0; }
.cart__discount { color: var(--orange); }
.cart__grand {
  border-top: 1px solid var(--line); padding-top: 12px; font-size: 18px; font-weight: 600;
}
.cart__pay { display: flex; flex-direction: column; }
.cart__pay input[type="email"] {
  padding: 13px 14px; border: 1px solid var(--gold-deep); background: #fff;
  font-size: 15px; margin-bottom: 8px; font-family: var(--font-body);
}
.cart__hint { font-size: 13px; color: var(--orange); margin: 0 0 12px; }
.returns-excerpt {
  font-size: 13px; color: var(--ink); background: #F3F1E8;
  border-left: 3px solid var(--gold-deep); padding: 11px 13px; margin: 6px 0 18px;
}
.cart__rail { font-size: 13px; color: var(--gold-deep); margin: 8px 0 14px; text-align: center; }
.cart__note { font-size: 13px; color: var(--gold-deep); text-align: center; margin-top: 16px; }
.cart__empty {
  text-align: center; font-family: var(--font-heading); font-size: 20px;
  letter-spacing: .06em; margin: 40px 0 24px;
}
.cart .btn--primary { align-self: center; }

/* ----------------------------------------------------- order / notice / page */

.order, .notice, .page {
  max-width: 760px; margin: 0 auto; padding: 44px 16px 60px;
}
.order__message { text-align: center; font-size: 16px; margin: 0 0 22px; }
.order__ref { text-align: center; color: var(--gold-deep); font-size: 13px; }
/* Shape, header and cells are shared with the bag, above; this is the receipt's
   own spacing. */
.order__table { margin-top: 22px; }
.order__help { margin-top: 26px; font-size: 14px; text-align: center; }
.notice { text-align: center; }
.notice__line { font-size: 17px; margin: 0 0 8px; }
.notice__sub { color: var(--gold-deep); margin: 0 0 24px; }
.page__lead { font-size: 17px; line-height: 1.7; }
.page__body { font-size: 15px; line-height: 1.8; max-width: 62ch; }
.page__aside { margin-top: 30px; font-size: 13px; color: var(--gold-deep); }

.form { display: flex; flex-direction: column; max-width: 520px; margin-top: 24px; }
.form input, .form textarea {
  padding: 12px 14px; border: 1px solid var(--gold-deep); background: #fff;
  font-size: 15px; margin-bottom: 16px; font-family: var(--font-body);
}
.form .btn { align-self: flex-start; }

/* ------------------------------------------------- size chart (§4.12) */

.size-chart table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  font-family: var(--font-body); color: var(--ink);
}
.size-chart th {
  background: var(--green); color: var(--gold);
  font-family: var(--font-heading); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: .85rem 1rem;
}
.size-chart td { padding: .85rem 1rem; border-top: 1px solid var(--gold-deep); }
.size-chart tr:nth-child(even) td { background: rgba(147, 212, 204, .10); }
.size-chart p,
.size-chart ul { max-width: 62ch; line-height: 1.7; }
@media (max-width: 600px) { .size-chart table { display: block; overflow-x: auto; } }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--green); color: var(--gold); padding: 44px 16px 22px; }
.foot__cols {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 30px;
}
.foot__h {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 12px; font-weight: 600;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 8px; }
.foot__col a { color: var(--gold); text-decoration: none; font-size: 14px; }
.foot__col a:hover { color: var(--teal); text-decoration: underline; }
.foot__strap { font-size: 13px; color: var(--gold-deep); margin: 0; max-width: 34ch; }
.foot__news { display: flex; gap: 8px; margin-top: 12px; }
.foot__news input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--gold-deep);
  background: var(--green-deep); color: var(--gold); font-size: 14px;
  font-family: var(--font-body);
}
.foot__news input::placeholder { color: rgba(236, 206, 136, .55); }
.foot__news button {
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  padding: 0 16px; font-size: 12px; letter-spacing: .1em; cursor: pointer;
  font-family: var(--font-body);
}
.foot__news button:hover { background: var(--gold); color: var(--green-deep); }
.foot__base {
  max-width: var(--wrap); margin: 30px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(236, 206, 136, .2);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  font-size: 12px; color: var(--gold-deep);
}
.foot__base p { margin: 0; }
.foot__marks { display: flex; gap: 8px; }
.mark {
  border: 1px solid var(--gold-deep); padding: 3px 8px; font-size: 10px;
  letter-spacing: .08em; border-radius: 2px;
}
.mark--img { padding: 2px 6px; background: var(--ground); height: 22px; width: auto; }

/* JS hides these once it boots; without JS they are the working control. */
.js-on .no-js-only { display: none; }

/* ---------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hero { aspect-ratio: 16 / 9; }
  .hero__head { font-size: 44px; }
  .hero__sub { font-size: 16px; }
  .section-title { font-size: 30px; }
  .banner__title { font-size: 34px; }
  .product { grid-template-columns: 55fr 45fr; gap: 40px; padding-top: 40px; }
  .product__title { font-size: 30px; }
  .product__price { font-size: 23px; }
  .card__name, .card__price { font-size: 16px; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__base { flex-direction: row; justify-content: space-between; }
  .empty-shop__form, .capture__form { flex-direction: row; }
  .empty-shop__form input, .capture__form input { flex: 1; }
  /* The bag and the receipt are tables again: there is room for the columns
     here, and the probe measures 768 and 1440 clean. */
  .cart__table, .order__table { display: table; }
  .cart__table thead, .order__table thead {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto;
  }
  .cart__table tbody, .order__table tbody { display: table-row-group; }
  .cart__table tr, .order__table tr {
    display: table-row; padding: 0; border-bottom: 0;
  }
  .cart__table td, .order__table td {
    display: table-cell; vertical-align: middle;
    border-bottom: 1px solid var(--line);
  }
  .cart__table td { padding: 14px 8px; }
  .order__table td { padding: 12px 8px; }
  /* The card's 72px indent goes with the card; same specificity, later wins. */
  .cart__table .cart__size, .cart__table .cart__qtycell { padding-left: 8px; }
  .cart__size, .order__size { color: inherit; }
  .cart__money, .order__money { text-align: left; font-weight: inherit; }
  .cart__rm { text-align: left; }
  .order__qty::before { content: none; }
  .cart__pay { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .cart__pay label, .cart__pay input[type="email"],
  .cart__pay .cart__hint, .cart__pay .returns-excerpt { grid-column: 1 / -1; }
  .cart__rail { grid-column: 1 / 2; order: 3; }
  #pay-card { grid-column: 1 / 2; order: 1; }
  #pay-paypal { grid-column: 2 / 3; order: 2; }
}

@media (min-width: 1200px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .grid { gap: 24px; }
  .grid-section { padding: 60px 24px; }
  .hero__head { font-size: 56px; }
  .hero__sub { font-size: 18px; }
  .section-title { font-size: 36px; }
  .foot__cols { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .product { padding: 48px 24px 72px; }
}