/* ==========================================================================
   OmniMentis – shop.css
   The checkout's own layer. Loaded after base.css by every page under
   shop/, in the same way familien.css is loaded by the home page.

   What base.css already provides and this file therefore does NOT repeat:
   the tokens (--ink, --mint, --teal, --sun, --coral, --cream, --h, --hand,
   --edge), the reset, the header and footer, .btn, .wrap, .stack, .eyebrow,
   .dot, .icon, the language switch and the back-to-top button.

   What is here is only what a shop needs and a content site does not: the
   step indicator, form fields, the order table, the product cover and the
   few page-specific blocks.
   ========================================================================== */

/* ---------- Shop-only tokens ---------- */
:root {
  /* The offset shadow already exists in base.css as literal values on .btn;
     the shop uses it on cards too, so it earns a name here rather than being
     retyped. */
  --lift: 4px 4px 0 var(--ink);
  --lift-lg: 6px 6px 0 var(--ink);
  --radius: 24px;
  --radius-sm: 14px;

  /* Derived inks. base.css writes these as literal rgba in a few places; the
     shop needs them often enough to name them. */
  --ink-12: rgba(15, 61, 71, 0.12);
  --ink-25: rgba(15, 61, 71, 0.25);
  --ink-35: rgba(15, 61, 71, 0.35);
  --ink-70: rgba(15, 61, 71, 0.7);
  --rust:   #c2410c;
}

/* ---------- Page frame ---------- */
.shop-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px var(--edge) 72px;
  display: grid;
  gap: 28px;
}
.shop-main--centred { justify-items: center; }
.shop-main--centred > * { width: 100%; max-width: 820px; }

.shop-band {
  padding: 72px var(--edge);
}
.shop-band--mint {
  background: var(--mint);
  border-bottom: 2px solid var(--ink);
}

.shop-title {
  margin: 0;
  font-family: var(--h);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.shop-sub { margin: 0; font-size: 16px; }

.hand-note {
  font-family: var(--hand);
  color: var(--teal);
  line-height: 1;
}

.req { color: var(--rust); }
.rule { height: 2px; background: var(--ink-12); }

/* ---------- Buttons: shop variants over base.css .btn ----------
   base.css .btn is cream with an ink border. The shop needs a primary in
   --sun for the one action per page that moves the purchase forward, and a
   disabled state for the consent gate. */
.btn--sun { background: var(--sun); }

.btn--wide { display: block; width: 100%; text-align: center; padding: 18px 24px; font-size: 19px; }

.btn--off {
  background: #e7e9e6;
  color: #4b5f63;
  border-color: #8a9a9c;
  box-shadow: none;
  cursor: not-allowed;
}
.btn--off:hover { transform: none; box-shadow: none; color: #4b5f63; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* ---------- Cards ---------- */
.card {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift-lg);
  padding: 32px;
  display: grid;
  gap: 24px;
  align-content: start;
}
.card--flat { box-shadow: none; }
.card--mint { background: var(--mint); }

.box {
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 22px 24px;
  display: grid;
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.note {
  background: var(--mint);
  border-radius: 18px;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  gap: 12px;
}
.note--sun {
  background: rgba(255, 201, 77, 0.35);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--aside { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.grid--aside-wide { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.grid--product { grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: start; }

/* ---------- Step indicator ----------
   Four steps, and the customer needs to know which one they are on and how
   many remain. Hidden below the breakpoint: on a phone the indicator costs
   more room than the reassurance is worth. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
}
.steps li { display: flex; align-items: center; gap: 8px; }
.steps .step--todo { color: var(--ink-70); }

.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink-35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.step-dot--now  { border-color: var(--ink); background: var(--sun); }
.step-dot--done { border-color: var(--ink); background: var(--ink); }

.step-line { width: 28px; height: 2px; background: var(--ink-25); }
.step-line--done { background: var(--ink); }

.secure-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
.field input,
.field select {
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  height: 50px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
  width: 100%;
}
.field input:focus,
.field select:focus { outline: 3px solid var(--sun); outline-offset: 1px; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field-grid--address { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* Consent checkboxes are 24px because they are legally load-bearing: the
   difference between read-and-ticked and mis-clicked is the difference
   between an enforceable waiver and none. */
.consent { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; line-height: 1.55; cursor: pointer; }
.consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex: none;
  cursor: pointer;
}

/* ---------- Order table ---------- */
.order-table { width: 100%; border-collapse: collapse; }
.order-table th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 12px;
}
.order-table td { padding: 18px 0; font-size: 17px; border-top: 2px solid var(--ink-12); }
.r { text-align: right; }

.totals { border-top: 2px solid var(--ink-12); padding-top: 18px; display: grid; gap: 10px; font-size: 16px; }
.totals-line { display: flex; justify-content: space-between; }
.totals-line--sum { align-items: baseline; border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 4px; }

/* ---------- Cover thumbnails (order summaries) ---------- */
.book-thumb { border-radius: 3px 10px 10px 3px; flex: none; object-fit: cover; border: 1px solid rgba(15,61,71,0.2); }
.book-thumb--sm { width: 48px; height: 68px; }
.book-thumb--md { width: 56px; height: 79px; }
.book-thumb--lg { width: 76px; height: 107px; }

/* ---------- Product page ---------- */
.price { font-family: var(--h); font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.price-note { font-size: 15px; font-weight: 500; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  font-size: 14px;
}
.spec-grid > div { padding: 14px 16px; border-right: 2px solid var(--ink); }
.spec-grid > div:last-child { border-right: 0; }
.spec-grid strong { display: block; }

.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; }
.checklist li { display: flex; gap: 12px; align-items: center; }

.breadcrumb { font-size: 14px; font-weight: 500; display: flex; gap: 8px; }

/* ---------- Download page ---------- */
.success-band {
  background: var(--mint);
  border-bottom: 2px solid var(--ink);
  padding: 56px var(--edge) 60px;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.success-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
  box-shadow: var(--lift);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-title {
  margin: 0;
  font-family: var(--h);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* The aside lines up with the card beside it, not with the heading above. */
.aside-offset { margin-top: 92px; }

/* ---------- Responsive: base.css breaks at 860px, so this does too ---------- */
@media (max-width: 859.98px) {
  .grid--2,
  .grid--aside,
  .grid--aside-wide,
  .grid--product,
  .field-grid,
  .field-grid--address { grid-template-columns: minmax(0, 1fr); }

  .steps, .secure-note { display: none; }

  .aside-offset { margin-top: 0; }

  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid > div:nth-child(2) { border-right: 0; }

  /* The unit-price column is the one a phone can lose without losing sense:
     quantity and line total still say what was bought and what it cost. */
  .order-table th:nth-child(2),
  .order-table td:nth-child(2) { display: none; }

  .row-between { flex-direction: column; align-items: flex-start; }
}

/* ---------- Product cover (replaces the drawn book mock-up) ---------- */
.product-cover {
  display: block;
  width: min(100%, 420px);
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 var(--ink);
}