/* ==========================================================================
   MyTrueQuiz — design system
   Translated from the MTQ design export. The export used inline styles on every
   element; this rebuilds the same system as tokens + components so it can be
   maintained, themed and reused rather than copy-pasted per page.
   ========================================================================== */

:root {
  /* Palette, taken from the design export by frequency: navy is the brand,
     everything else is neutral. Nothing here is decorative — the design uses
     exactly one colour and lets the book covers supply the rest. */
  --mtq-navy:        #1B4079;
  --mtq-navy-dark:   #0F2A55;
  --mtq-navy-soft:   #9EBBE6;
  --mtq-navy-wash:   #EEF3FA;
  --mtq-ink:         #14161A;
  --mtq-body:        #5A6070;
  --mtq-muted:       #8A909E;
  --mtq-faint:       #9BA1AE;
  --mtq-rule:        #E4E6EB;
  --mtq-rule-2:      #E6E8EC;
  --mtq-tint:        #F7F8FA;
  --mtq-white:       #FFFFFF;
  --mtq-alert:       #7E2E26;

  --mtq-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mtq-body-font: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mtq-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. Display sizes are fluid; body stays comfortably readable
     because a large-print publisher setting its own site in 14px would be
     contradicting the product. */
  --mtq-t--1: 0.8125rem;
  --mtq-t-0:  1.0625rem;
  --mtq-t-1:  clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --mtq-t-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --mtq-t-3:  clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --mtq-t-4:  clamp(2.6rem, 1.7rem + 4vw, 4.7rem);

  --mtq-gap:   clamp(1rem, 3vw, 2rem);
  --mtq-bleed: clamp(1rem, 4vw, 2.5rem);
  --mtq-max:   1180px;

  --mtq-radius: 3px;
  --mtq-shadow: 0 1px 2px rgba(20,22,26,.05), 0 12px 28px rgba(20,22,26,.08);

  /* Aspect ratio for EVERY article and quiz image — the single hero and the
     related-post cards both read this token. Daniel, 2026-08-16, asked for
     1:1.30 across articles and quizzes; kept as one variable so the whole site
     changes on one line instead of a sweep through six templates.
     ⚠️ CSS aspect-ratio is WIDTH / HEIGHT, so this reads 1.3 wide to 1 tall.
     Shipped briefly as `1 / 1.3` (portrait) on the literal reading of "1:1.30";
     MEASURED at 1100x1430 on a 1440px screen, i.e. 143% of the viewport, so the
     reader met almost a screen and a half of photograph before the first
     sentence. Daniel confirmed landscape, 2026-08-16. */
  --mtq-post-ratio: 1.3 / 1;
}

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

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

body {
  margin: 0;
  background: var(--mtq-white);
  color: var(--mtq-ink);
  font-family: var(--mtq-body-font);
  font-size: var(--mtq-t-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--mtq-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--mtq-ink);
  text-wrap: balance;
}
h1 { font-size: var(--mtq-t-4); }
h2 { font-size: var(--mtq-t-3); }
h3 { font-size: var(--mtq-t-2); }
h4 { font-size: var(--mtq-t-1); }

p { margin: 0 0 1.1em; }
p, li { color: var(--mtq-body); }
h1 + p, h2 + p, .mtq-lede { color: var(--mtq-body); font-size: var(--mtq-t-1); line-height: 1.55; }

a { color: var(--mtq-navy); text-decoration: none; }
a:hover { color: var(--mtq-navy-dark); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--mtq-navy); color: #fff; }

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

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999; background: var(--mtq-navy);
  color: #fff; padding: .7rem 1.1rem; width: auto; height: auto; clip: auto;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.mtq-wrap { max-width: var(--mtq-max); margin-inline: auto; padding-inline: var(--mtq-bleed); }
.mtq-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.mtq-section--tint { background: var(--mtq-tint); border-block: 1px solid var(--mtq-rule); }
.mtq-main { display: block; }

/* --------------------------------------------------------------------------
   The label: uppercase, letter-spaced, monospace-adjacent. Used 336 times in
   the design as the section marker. The optional number is a real sequence
   marker (shelves, steps), not decoration — it is omitted where nothing is
   actually ordered.
   -------------------------------------------------------------------------- */
.mtq-label {
  font-family: var(--mtq-mono);
  font-size: var(--mtq-t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mtq-navy);
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1rem;
}
.mtq-label::after {
  content: ""; flex: 1; height: 1px; background: var(--mtq-rule);
}
.mtq-label__num {
  border: 1px solid var(--mtq-rule); padding: .15rem .45rem;
  font-size: .72rem; color: var(--mtq-navy);
}
.mtq-label--muted { color: var(--mtq-muted); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.mtq-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-block;
  font-family: var(--mtq-body-font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .95rem 1.6rem;
  border: 1px solid var(--mtq-navy);
  border-radius: var(--mtq-radius);
  background: var(--mtq-navy);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mtq-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--mtq-navy-dark); border-color: var(--mtq-navy-dark); color: #fff;
}
.mtq-btn--ghost {
  background: #fff; color: var(--mtq-ink); border-color: var(--mtq-rule);
}
.mtq-btn--ghost:hover { background: #fff; color: var(--mtq-navy); border-color: var(--mtq-navy); }
.mtq-btn--block { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   Announcement bar + header
   -------------------------------------------------------------------------- */
.mtq-announce {
  background: var(--mtq-navy); color: #fff; text-align: center;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; padding: 9px 20px;
}
.mtq-header { border-bottom: 1px solid var(--mtq-rule); background: #fff; position: relative; z-index: 20; }
.mtq-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px; max-width: var(--mtq-max); margin-inline: auto; padding-inline: var(--mtq-bleed);
}
.mtq-brand {
  font-family: var(--mtq-display); font-weight: 700; font-size: 1.45rem;
  letter-spacing: -.03em; color: var(--mtq-ink); font-style: italic;
  /* A long site name was wrapping to two lines and pushing the header to 120px.
     The brand is a single unit and must never break. */
  white-space: nowrap; flex: none;
}
.mtq-brand:hover { color: var(--mtq-ink); }
.mtq-brand img { max-height: 40px; width: auto; }

.mtq-nav { margin-left: auto; min-width: 0; }
/* Menu items must not wrap mid-label. This site's menu has entries like
   "Word Search Maker" and "Smart Kids WHY", which broke onto two lines and
   made the header look broken. They stay on one line and the row scrolls
   instead — a scrollbar is honest, a shattered menu is not. */
/* 16px and the design's gap, taken from Home-v2.dc.html's nav container
   (`font-size: 16px; gap: clamp(14px,2.4vw,26px)`) rather than guessed.
   Set on the list so every descendant inherits one value. */
/* 🔴 NO `overflow-x: auto` HERE. It was a safety net against the row
   overflowing, and it silently broke every drop-down on desktop for as long as
   it was in the file. Per the CSS overflow spec, `overflow-x: auto` with
   `overflow-y: visible` promotes the USED overflow-y to `auto` as well — so a
   horizontal scroller clips VERTICALLY too, and `.sub-menu` is positioned
   `top: 100%`, i.e. entirely below the ul's content box. MEASURED 2026-08-16 at
   1440 / 1200 / 1000px: ul box 60..86, panel 86..186, every parent clipped, and
   `elementFromPoint` inside the panel returned `.mtq-header__inner`.
   The tell was that the CHEVRON still rotated — hover was working perfectly and
   `display` really did become `flex`; only the pixels were gone. Any check that
   reads `display !== 'none'` passes the broken build, which is why
   `browser-test/desktop-dropdown.js` hit-tests instead.
   The row does not need a scroller: below 951px the whole nav is replaced by the
   overlay, and the 951–1090px squeeze is handled by the gap rule further down. */
.mtq-nav ul { list-style: none; display: flex; align-items: center;
              gap: clamp(14px, 2.4vw, 26px); margin: 0; padding: 0;
              font-size: 16px;
              overflow: visible; }
/* `relative` anchors the drop-down to its own item; without it the panel
   positions against whatever ancestor happens to be positioned. */
.mtq-nav li { flex: none; position: relative; }
.mtq-nav a { color: var(--mtq-ink); font-size: inherit; white-space: nowrap; }
.mtq-nav a:hover, .mtq-nav .current-menu-item > a { color: var(--mtq-navy); }

/* A parent says so. Same chevron language as the mobile menu — 45° stroke
   corner, rotates on open — drawn in CSS so it always matches link colour. */
.mtq-nav .menu-item-has-children > a { display: inline-flex; align-items: center; }
.mtq-nav .menu-item-has-children > a::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: 7px;
  flex: none;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.mtq-nav li:hover > a::after,
.mtq-nav li:focus-within > a::after { transform: translateY(1px) rotate(225deg); }

.mtq-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--mtq-rule);
  padding: .5rem 0; min-width: 200px; flex-direction: column; gap: 0; display: none;
  box-shadow: var(--mtq-shadow);
  /* ⚠️ MUST cancel the row's `align-items: center`. `.mtq-nav ul` matches this
     element too, and on a COLUMN flex container `center` is the horizontal axis
     — so every child shrank to its text width and sat centred in the panel.
     That is why the drop-down labels were centre-aligned; nothing ever asked
     for it. Daniel, 2026-08-16. Same class of bug as the overflow above: a rule
     written for the horizontal bar leaking into the vertical panel. */
  align-items: stretch;
  text-align: left;
}
.mtq-nav li:hover > .sub-menu, .mtq-nav li:focus-within > .sub-menu { display: flex; }
/* 1.25rem of left inset so the labels have room to breathe against the border,
   and the whole row is the hit target rather than just the words. */
.mtq-nav .sub-menu li { border: 0; }
.mtq-nav .sub-menu a {
  display: block; padding: .55rem 1.5rem .55rem 1.25rem; font-size: 15px;
  text-align: left; white-space: normal;
}
/* Literal, not a var — there is no --mtq-wash token in this file and a var()
   reference to a name that does not exist reads as if there were. */
.mtq-nav .sub-menu a:hover { background: #F7F8FA; }

/* Between the mobile breakpoint and ~1090px the header has the least room it
   will ever have while still showing the inline nav. Tightening only the gap
   keeps every label at the 16px the design specifies rather than shrinking the
   text. The 1090 ceiling is measured, not rounded: at 1081px the design's
   clamp resolves to 25.9px and the row overflows by 2px. */
@media (min-width: 951px) and (max-width: 1090px) {
  .mtq-nav ul { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mtq-nav .menu-item-has-children > a::after { transition: none; }
}

.mtq-cart {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius);
  padding: .6rem 1.05rem; color: var(--mtq-ink); font-weight: 600; font-size: .95rem;
}
.mtq-cart:hover { border-color: var(--mtq-navy); color: var(--mtq-navy); }
.mtq-cart__count {
  background: var(--mtq-navy); color: #fff; border-radius: 2px;
  font-size: .75rem; font-weight: 700; min-width: 20px; text-align: center; padding: .1rem .35rem;
}

.mtq-burger { display: none; background: none; border: 0; padding: .4rem; margin-left: auto; }
.mtq-burger span { display: block; width: 22px; height: 2px; background: var(--mtq-ink); margin: 4px 0; }

/* 950, not 900. The inline nav needs 592px and the header cannot give it that
   until ~951px, so between 901 and 950 the old breakpoint showed a menu with
   its last item sliced off. Handing that band to the overlay is the honest
   answer; shrinking the text below 16px would contradict the design. */
@media (max-width: 950px) {
  .mtq-burger { display: block; }
  /* The inline nav is replaced below this width by the full-screen overlay in
     template-parts/mobile-menu.php. The old `.is-open` drop-down rule that used
     to live here is gone rather than left dormant — nothing sets that class any
     more, and a dead rule reads like a live one to whoever edits this next. */
  .mtq-nav { display: none; }
  .mtq-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--mtq-bleed) 1rem; }
  .mtq-nav li { border-bottom: 1px solid var(--mtq-rule); }
  .mtq-nav a { display: block; padding: .85rem 0; }
  .mtq-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding-left: 1rem; }
  .mtq-header__inner { gap: .8rem; }

  /* Daniel, 2026-08-15: "move the menu on the right and the cart on the left"
     — on mobile only. DOM order is brand · burger · nav · cart, so this is
     done with flex `order`; nothing is re-parented and desktop is untouched
     (order defaults to 0 outside this query). */
  .mtq-cart   { order: 2; margin-left: auto; }
  .mtq-burger { order: 3; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Hero + stat row
   -------------------------------------------------------------------------- */
.mtq-hero { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.mtq-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .mtq-hero__grid { grid-template-columns: 1.05fr .95fr; } }
.mtq-hero h1 { margin-top: .2em; }
.mtq-hero__shot:empty { display: none; }
.mtq-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.mtq-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--mtq-rule); margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 760px) { .mtq-stats { grid-template-columns: repeat(4, 1fr); } }
.mtq-stats div { padding: 1.6rem 1.5rem; border-right: 1px solid var(--mtq-rule); border-bottom: 1px solid var(--mtq-rule); }
.mtq-stats div:nth-child(2n) { border-right: 0; }
@media (min-width: 760px) {
  .mtq-stats div { border-bottom: 0; }
  .mtq-stats div:nth-child(2n) { border-right: 1px solid var(--mtq-rule); }
  .mtq-stats div:last-child { border-right: 0; }
}
.mtq-stats b {
  display: block; font-family: var(--mtq-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--mtq-ink); line-height: 1.1;
}
.mtq-stats span {
  font-family: var(--mtq-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mtq-muted);
}

/* --------------------------------------------------------------------------
   Cards / product grid
   -------------------------------------------------------------------------- */
.mtq-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.mtq-card, .woocommerce ul.products li.product {
  border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius);
  background: #fff; overflow: hidden; display: flex; flex-direction: column;
  margin: 0; text-align: left; width: auto; float: none;
}
.mtq-card__shot, .woocommerce ul.products li.product a img {
  background: var(--mtq-tint); margin: 0;
}
.mtq-card__shot { height: 260px; display: grid; place-items: center; padding: 1.2rem; border-bottom: 1px solid var(--mtq-rule); }
/* Definite height + contain: the covers vary from square to tall portrait, and
   aspect-ratio alone lets the intrinsic image height push the box out of line. */
.mtq-card__shot img { max-height: 100%; max-width: 100%; width: auto; height: auto; box-shadow: var(--mtq-shadow); }
.mtq-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.mtq-card__kicker { font-family: var(--mtq-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mtq-muted); }
.mtq-card h3, .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; line-height: 1.3; margin: 0; padding: 0;
}
.mtq-card__price, .woocommerce ul.products li.product .price {
  font-family: var(--mtq-display); font-weight: 700; color: var(--mtq-ink);
  margin-top: auto; padding-top: .6rem; font-size: 1.1rem;
}
.woocommerce ul.products li.product .price del { color: var(--mtq-faint); font-weight: 400; font-size: .9rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin-top: .8rem; }

.woocommerce ul.products { display: grid; gap: clamp(1.2rem,3vw,2rem); grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); margin: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce span.onsale {
  background: var(--mtq-navy); color: #fff; border-radius: 2px; font-family: var(--mtq-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem;
  min-height: 0; min-width: 0; line-height: 1.2; top: .8rem; left: .8rem; margin: 0;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */
.mtq-crumbs {
  border-bottom: 1px solid var(--mtq-rule); font-family: var(--mtq-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mtq-muted);
}
.mtq-crumbs .mtq-wrap { display: flex; align-items: center; gap: .6rem; padding-block: 1rem; flex-wrap: wrap; }
.mtq-crumbs a { color: var(--mtq-muted); }
.mtq-crumbs a:hover { color: var(--mtq-navy); }

.mtq-product { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; padding-block: clamp(2rem,5vw,3.5rem); }
@media (min-width: 900px) { .mtq-product { grid-template-columns: minmax(0,48%) minmax(0,1fr); align-items: start; } }

.mtq-gallery__main { background: var(--mtq-tint); border: 1px solid var(--mtq-rule); position: relative; display: grid; place-items: center; padding: clamp(1.5rem,4vw,3rem); }
.mtq-gallery__main img { max-height: 620px; width: auto; box-shadow: var(--mtq-shadow); }
.mtq-gallery__tag {
  position: absolute; top: 0; left: 0; background: #fff; border: 1px solid var(--mtq-rule);
  font-family: var(--mtq-mono); font-size: .72rem; letter-spacing: .1em; padding: .45rem .8rem; color: var(--mtq-body);
}
.mtq-gallery__thumbs { display: flex; gap: .7rem; margin-top: .8rem; flex-wrap: wrap; }
.mtq-gallery__thumbs button {
  border: 1px solid var(--mtq-rule); background: var(--mtq-tint); padding: .35rem; width: 84px; height: 108px;
  display: grid; place-items: center; cursor: pointer; border-radius: 2px;
}
.mtq-gallery__thumbs button[aria-current="true"] { border-color: var(--mtq-navy); }
.mtq-gallery__thumbs img { max-height: 100%; max-width: 100%; width: auto; height: auto; }

.mtq-product__badges { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mtq-chip {
  background: var(--mtq-navy-wash); color: var(--mtq-navy); font-family: var(--mtq-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 2px;
}
.mtq-product__meta { font-family: var(--mtq-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mtq-muted); }
.mtq-product h1 { font-size: var(--mtq-t-3); margin-bottom: .35em; }
.mtq-product__sub { font-size: var(--mtq-t-1); color: var(--mtq-body); line-height: 1.5; margin-bottom: 1.5rem; }

.mtq-price { display: flex; align-items: baseline; gap: .8rem; padding-top: 1.4rem; border-top: 1px solid var(--mtq-ink); margin-bottom: 1.4rem; flex-wrap: wrap; }
.mtq-price .amount, .mtq-price ins .amount { font-family: var(--mtq-display); font-size: 2.3rem; font-weight: 700; color: var(--mtq-ink); letter-spacing: -.02em; }
.mtq-price del { color: var(--mtq-faint); }
.mtq-price del .amount { font-size: 1.1rem; font-weight: 400; color: var(--mtq-faint); }
.mtq-price ins { text-decoration: none; }
.mtq-price__off { background: var(--mtq-navy-wash); color: var(--mtq-navy); font-family: var(--mtq-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .65rem; border-radius: 2px; }

/* add-to-cart row: stepper + full-width button */
.woocommerce div.product form.cart { display: flex; gap: .8rem; align-items: stretch; margin-bottom: 1.2rem; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { display: flex; align-items: center; border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); }
.woocommerce div.product form.cart .quantity input.qty {
  width: 54px; text-align: center; border: 0; background: none; font-family: var(--mtq-display);
  font-weight: 600; font-size: 1rem; padding: .8rem 0; -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mtq-qty-btn { background: none; border: 0; padding: 0 .85rem; font-size: 1.2rem; color: var(--mtq-body); cursor: pointer; align-self: stretch; }
.mtq-qty-btn:hover { color: var(--mtq-navy); }
.woocommerce div.product form.cart .button { flex: 1 1 240px; padding: 1rem 1.6rem; font-size: 1.02rem; }

.mtq-assure { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); margin-bottom: 1.6rem; }
.mtq-assure div { display: flex; align-items: center; gap: .55rem; padding: .9rem .8rem; border-right: 1px solid var(--mtq-rule); font-size: .84rem; font-weight: 500; color: var(--mtq-ink); line-height: 1.25; }
.mtq-assure div:last-child { border-right: 0; }
.mtq-assure svg { width: 18px; height: 18px; stroke: var(--mtq-navy); fill: none; stroke-width: 1.6; flex: none; }
@media (max-width: 560px) { .mtq-assure { grid-template-columns: 1fr; } .mtq-assure div { border-right: 0; border-bottom: 1px solid var(--mtq-rule); } .mtq-assure div:last-child { border-bottom: 0; } }

.mtq-spec { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.mtq-spec th, .mtq-spec td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--mtq-rule); vertical-align: top; }
.mtq-spec th { font-family: var(--mtq-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mtq-muted); font-weight: 400; width: 42%; }
.mtq-spec td { color: var(--mtq-ink); font-weight: 500; }

.mtq-acc { border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); }
.mtq-acc summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; cursor: pointer; font-weight: 600; list-style: none; }
.mtq-acc summary::-webkit-details-marker { display: none; }
.mtq-acc summary::after { content: "⌄"; margin-left: auto; color: var(--mtq-muted); }
.mtq-acc[open] summary::after { content: "⌃"; }
.mtq-acc .mtq-acc__body { padding: 0 1.1rem 1.1rem; color: var(--mtq-body); }

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--mtq-rule); display: flex; gap: 1.6rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mtq-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mtq-muted); padding: .9rem 0; display: block; border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mtq-navy); border-bottom-color: var(--mtq-navy); }

/* --------------------------------------------------------------------------
   Cart / checkout — styled rather than re-templated, so WooCommerce updates
   keep working. Only layout and type are changed.
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table { border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); border-collapse: collapse; }
.woocommerce table.shop_table th {
  font-family: var(--mtq-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mtq-muted); font-weight: 400; border-bottom: 1px solid var(--mtq-rule);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--mtq-rule); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: var(--mtq-t-2); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single {
  border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); padding: .8rem .9rem;
  font-family: var(--mtq-body-font); font-size: 1rem; background: #fff; height: auto;
}
.woocommerce form .form-row label { font-weight: 500; color: var(--mtq-ink); }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top-color: var(--mtq-navy); background: var(--mtq-tint); border-radius: var(--mtq-radius);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--mtq-navy); }

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */
.mtq-posts { display: grid; gap: clamp(1.5rem,3vw,2.4rem); grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.mtq-post-card { border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mtq-post-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--mtq-tint); }
.mtq-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtq-post-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mtq-post-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; }
.mtq-post-card time { font-family: var(--mtq-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mtq-muted); }

.mtq-entry { max-width: 72ch; }
.mtq-entry p, .mtq-entry li { font-size: 1.09rem; line-height: 1.75; }
.mtq-entry h2 { font-size: var(--mtq-t-2); margin-top: 2.2rem; }
.mtq-entry h3 { font-size: var(--mtq-t-1); margin-top: 1.8rem; }
.mtq-entry img { border-radius: var(--mtq-radius); margin-block: 1.6rem; }
.mtq-entry blockquote {
  border-left: 3px solid var(--mtq-navy); margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem;
  font-family: var(--mtq-display); font-size: var(--mtq-t-1); color: var(--mtq-ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.mtq-footer { border-top: 1px solid var(--mtq-rule); background: var(--mtq-tint); padding-block: clamp(2.5rem,5vw,4rem); margin-top: clamp(3rem,6vw,5rem); }
.mtq-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mtq-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.mtq-footer h3 { font-family: var(--mtq-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mtq-muted); font-weight: 400; margin-bottom: .9rem; }
.mtq-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.mtq-footer a { color: var(--mtq-body); }
.mtq-footer a:hover { color: var(--mtq-navy); }
.mtq-footer__bar { border-top: 1px solid var(--mtq-rule); margin-top: 2.5rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: var(--mtq-muted); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mtq-flow > * + * { margin-top: 1.1rem; }
.mtq-center { text-align: center; }
.mtq-hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   Sticky "proceed to payment" bar — checkout only.

   Appears once the real Place Order button scrolls out of view and hides again
   the moment it is back. On a long checkout the payment step can sit well below
   the fold after the address and shipping blocks, and there is nothing worse
   than a customer who has filled everything in and cannot see how to pay.

   ⚠️ Plain threshold:0 with NO rootMargin. The rootMargin version of this
      overlapped the real button on desktop while passing every assertion —
      caught only by looking at a screenshot. Do not "improve" it back.
   -------------------------------------------------------------------------- */
.mtq-paybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  display: flex; justify-content: center;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;                 /* the rail never blocks the page */
  transform: translateY(160%);
  transition: transform .24s ease;
}
.mtq-paybar.is-on { transform: none; }
.mtq-paybar button {
  pointer-events: auto;                 /* only the button itself is clickable */
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; max-width: 520px;
  font-family: var(--mtq-body-font); font-weight: 700; font-size: 1.05rem;
  padding: 1.05rem 1.6rem; border: 0; border-radius: var(--mtq-radius);
  background: var(--mtq-navy); color: #fff; cursor: pointer;
  box-shadow: 0 10px 30px rgba(20,22,26,.28);
}
.mtq-paybar button:hover { background: var(--mtq-navy-dark); }
.mtq-paybar button[disabled] { opacity: .6; cursor: default; }
.mtq-paybar .mtq-paybar__total { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .mtq-paybar { transition: none; } }

/* --------------------------------------------------------------------------
   WooCommerce Blocks (the block-based Cart and Checkout).

   ⚠️ Blocks sizes its internals in `em`, RELATIVE TO ITS CONTAINER. This theme
      sets body to 17px for readability, which Blocks then multiplies through
      every nested component — payment method labels came out at 17px against a
      designed 13px, rows grew past the heights their absolutely-positioned card
      icons assume, and the PayPal panel overlapped the card row.

      Measured on the live checkout: .wc-block-components-radio-control__option
      computed 17px/28px where Blocks expects 16px/1.5.

      So the block containers are pinned back to a 16px base. Their own
      stylesheet then computes correctly. This does NOT restyle Blocks — it
      stops this theme leaking into it.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
  font-size: 16px;
  line-height: 1.5;
}
/* Headings inside Blocks keep the theme's display face but not its scale. */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
  font-family: var(--mtq-display);
  letter-spacing: -.02em;
}
/* Paragraph margins from this theme were adding space Blocks does not expect,
   which is what pushed the panels apart and made them look broken. */
.wc-block-components-radio-control p,
.wc-block-components-radio-control-accordion-content p,
.wc-block-checkout__payment-method p { margin: 0 0 .6em; }
.wc-block-components-radio-control-accordion-content > * :last-child { margin-bottom: 0; }
/* The gateway icon strip is positioned; give the row room so it cannot collide
   with the panel that expands beneath it. */
.wc-block-components-radio-control__option { position: relative; }
.wc-block-components-radio-control__option-layout { align-items: center; }

/* --------------------------------------------------------------------------
   Scored quiz (mtq-scored-quiz plugin)
   --------------------------------------------------------------------------
   Two defects this fixes, both caused by the theme swap:

   1. ▯ INSTEAD OF A RADIO MARKER. The plugin draws its markers with
      `content:"\f10c"` / `"\f058"` in `font-family:FontAwesome` — Font Awesome 4
      icons. Newsy loaded that font; this theme does not, so every option
      rendered a missing-glyph box. Pulling in a whole icon font for two shapes
      is not worth ~75 KB, so the markers are redrawn here in plain CSS: a ring
      for unselected, a ring with a checkmark for selected. The font-family is
      reset to inherit so nothing tries to resolve a glyph that isn't there.

   2. UNREADABLE TEXT ON THE SELECTED OPTION. The plugin sets `color:#fff` on
      the selected wrapper and expects the text to inherit it. But this theme
      has `p, li { color: var(--mtq-body) }` — a DIRECT rule on `p`, and a
      direct rule beats an INHERITED value no matter how specific the ancestor
      selector is. So the title stayed grey on a saturated blue. The fix sets
      the colour on the title itself rather than relying on inheritance.

   The stock #0f65ef is also replaced with the design's navy so the quiz reads
   as part of the site rather than as a plugin bolted onto it.
   ---------------------------------------------------------------------- */

/* Marker: drawn, not fonted.
   ⚠️ `flex: 0 0 22px` is load-bearing. The title is a flex container, so the
      marker is a flex item and flex-shrink defaults to 1 — on a narrow phone a
      long answer squeezed the ring from 22px down to 15.7px and it rendered as
      an oval. Measured, not guessed: the desktop run passed at 22px while the
      390px run failed the same assertion. */
.mtq-answer .mtq-answer-title::before {
	content: "";
	font-family: inherit;
	box-sizing: border-box;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-right: 12px;
	border: 2px solid var(--mtq-navy-soft);
	border-radius: 50%;
	background: var(--mtq-white);
	transition: border-color .15s, background-color .15s;
}

.mtq-answer:hover .mtq-answer-title::before { border-color: var(--mtq-navy); }

/* Selected: white disc with a navy tick.
   ⚠️ The tick is a BACKGROUND IMAGE, centred by `background-position`, not an
      absolutely-positioned ::after. The first attempt rotated a bordered box
      and pinned it with left/top against the title — which is a flex container,
      so the offsets did not line up with where flex had actually placed the
      marker, and the tick rendered as a notch biting the circle's edge rather
      than a check inside it. Caught by magnifying the screenshot; every
      computed-value assertion passed while it looked like that, because
      "the ::after has a border" is not the same claim as "the tick is in the
      right place". A centred background cannot be misplaced. */
.mtq-answer.mtq-answer-selected .mtq-answer-title::before {
	content: "";
	border-color: var(--mtq-white);
	background-color: var(--mtq-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l5 5L19 7.5' fill='none' stroke='%231B4079' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* Colour + contrast. The title carries its own colour because inheritance
   loses to the theme's `p` rule. */
.mtq-answer.mtq-answer-selected > .mtq-answer-wrapper {
	background-color: var(--mtq-navy);
	border-color: var(--mtq-navy);
}
.mtq-answer.mtq-answer-selected .mtq-answer-title,
.mtq-answer.mtq-answer-selected .mtq-answer-wrapper p {
	color: var(--mtq-white);
}

/* Options: give them the site's own card treatment. */
.mtq-answer > .mtq-answer-wrapper {
	border: 1px solid var(--mtq-rule);
	border-radius: var(--mtq-radius);
	padding: .85rem 1rem;
	transition: border-color .15s, background-color .15s, color .15s;
}
.mtq-answer:hover > .mtq-answer-wrapper { border-color: var(--mtq-navy-soft); }
.mtq-answer .mtq-answer-title {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1.45;
}

/* Locked (answered) state — keep the checkmark legible on the grey. */
.mtq-scored.mtq-locked .mtq-answer.mtq-answer-selected .mtq-answer-title,
.mtq-scored.mtq-locked .mtq-answer.mtq-answer-selected .mtq-answer-wrapper p { color: var(--mtq-white); }
/* Locked: the tick goes grey to match the disabled wrapper. Same SVG, recoloured. */
.mtq-scored.mtq-locked .mtq-answer.mtq-answer-selected .mtq-answer-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l5 5L19 7.5' fill='none' stroke='%23666666' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Respect the OS "reduce motion" setting. Also makes the quiz measurable: a
   test that reads a computed background immediately after a click otherwise
   catches the .15s transition mid-flight and reports the OLD colour. */
@media (prefers-reduced-motion: reduce) {
	.mtq-answer > .mtq-answer-wrapper,
	.mtq-answer .mtq-answer-title::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile menu — full-screen overlay
   --------------------------------------------------------------------------
   Rebuilt from the design export: a white full-bleed panel, a logo/close bar,
   then Ranges as large numbered rows with a count, Explore and Help as plain
   lists, closing on two trust lines. Type sizes and rules are the design's own
   values (38px range names clamped down to 26px, 11px mono labels at .18em).

   The panel is `position: fixed` with its own scroll, and the burger only
   exists below the nav breakpoint, so this never appears on desktop.
   ---------------------------------------------------------------------- */
.mtq-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--mtq-white);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mtq-menu[hidden] { display: none; }

.mtq-menu__bar {
	display: flex;
	align-items: center;
	min-height: 68px;
	padding: 10px var(--mtq-bleed);
	border-bottom: 1px solid var(--mtq-rule);
	flex: none;
}
.mtq-menu__brand {
	font-family: var(--mtq-display);
	font-weight: 700;
	font-size: 1.25rem;
	font-style: italic;
	letter-spacing: -.03em;
	color: var(--mtq-ink);
	white-space: nowrap;
}
.mtq-menu__brand img { max-height: 31px; width: auto; }
.mtq-menu__close {
	margin-left: auto;
	width: 44px; height: 44px;          /* a real 44px touch target */
	background: none; border: 0;
	font-size: 26px; line-height: 1;
	color: var(--mtq-ink);
	cursor: pointer;
}

.mtq-menu__nav { flex: 1; padding: clamp(28px, 7vw, 48px) var(--mtq-bleed); }

.mtq-menu__label {
	font-family: var(--mtq-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mtq-navy);
	margin: 0;
}
.mtq-menu__label + .mtq-menu__group { border-top: 1px solid var(--mtq-ink); margin-top: 16px; }
.mtq-menu__group { margin-bottom: clamp(28px, 6vw, 44px); }

/* The big rows are the site's real menu. A row is one of three things:
   a plain link, a link PLUS a chevron button (parent with its own page), or a
   single button that only opens its children (parent whose URL is "#"). The
   rule lives on the row so all three line up identically. */
.mtq-menu__row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--mtq-rule);
}
.mtq-menu__range {
	--mtq-menu-gap: 16px;      /* referenced below to cancel it for the chevron */
	--mtq-menu-chev-gap: 4px;  /* matches .mtq-menu__toggle's margin-left */
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: var(--mtq-menu-gap);
	padding: 22px 0;
	color: var(--mtq-ink);
	min-width: 0;
	/* The toggle-only variant is a <button>: strip the UA chrome so it is
	   indistinguishable from the anchor beside it. */
	background: none;
	border: 0;
	text-align: left;
	font: inherit;
	cursor: pointer;
	width: 100%;
}
.mtq-menu__range:hover { color: var(--mtq-navy); }
.mtq-menu__num {
	font-family: var(--mtq-mono);
	font-size: 11px; letter-spacing: .14em;
	color: var(--mtq-muted);
	flex: none;
}
.mtq-menu__name {
	font-family: var(--mtq-display);
	font-size: clamp(26px, 7vw, 38px);
	font-weight: 600;
	letter-spacing: -.032em;
	line-height: 1.05;
	/* Long names must wrap inside the row rather than push the count off the
	   edge — `min-width:0` is what lets a flex item shrink at all. */
	min-width: 0;
}
.mtq-menu__count { margin-left: auto; font-size: 13px; color: var(--mtq-muted); flex: none; }

/* Expand control. 48px square is a real touch target; the chevron inside is
   what actually rotates. */
.mtq-menu__toggle {
	flex: none;
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	margin-left: var(--mtq-menu-chev-gap, 4px);
	background: none; border: 0; padding: 0;
	color: var(--mtq-muted);
	cursor: pointer;
}
.mtq-menu__toggle:hover { color: var(--mtq-navy); }
/* On a toggle-only row the control is a <span> INSIDE the button rather than a
   sibling <button>, so it picks up two things the sibling version never had:
   the row's flex gap, and a say in the row's height. Both are cancelled here,
   measured against the link variant — without this the row ran 19px taller and
   its count sat 16px further left than the rows above it. */
.mtq-menu__range--btn > .mtq-menu__toggle {
	align-self: center;
	height: auto;
	margin-left: calc(var(--mtq-menu-chev-gap) - var(--mtq-menu-gap));
}
.mtq-menu__chev {
	flex: none;
	transition: transform .22s ease;
}
.mtq-menu__item.is-open .mtq-menu__chev { transform: rotate(180deg); }

/* The submenu. Collapsed by height rather than [hidden] so it can animate;
   `visibility` is what actually takes the closed links out of the tab order,
   which `overflow:hidden` alone does not do. */
.mtq-menu__sub {
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
	transition: max-height .28s ease, visibility .28s;
}
.mtq-menu__item.is-open > .mtq-menu__sub {
	max-height: 70vh;
	visibility: visible;
}
.mtq-menu__sub .mtq-menu__list { padding: 2px 0 10px 34px; }
.mtq-menu__sub .mtq-menu__list li:last-child { border-bottom: 0; }
.mtq-menu__sub .mtq-menu__list a { font-size: 1rem; padding: 13px 0; }

@media (prefers-reduced-motion: reduce) {
	.mtq-menu__sub { transition: none; }
	.mtq-menu__chev { transition: none; }
}

.mtq-menu__list { list-style: none; margin: 0; padding: 0; }
.mtq-menu__list li { border-bottom: 1px solid var(--mtq-rule); }
.mtq-menu__list a {
	display: block;
	padding: 15px 0;
	font-size: 1.05rem;
	color: var(--mtq-ink);
}
.mtq-menu__list a:hover { color: var(--mtq-navy); }
.mtq-menu__list a[aria-current="page"] { color: var(--mtq-navy); font-weight: 600; }
/* Ranges keep their product counts on the right. */
.mtq-menu__list--count a { display: flex; align-items: baseline; gap: 16px; }

.mtq-menu__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(16px, 5vw, 34px);
	padding: 18px var(--mtq-bleed) calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--mtq-rule);
	flex: none;
}
.mtq-menu__trust span {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--mtq-body);
}
.mtq-menu__trust svg { color: var(--mtq-navy); flex: none; }

/* The page behind the overlay must not scroll with it. */
body.mtq-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero buttons — both must sit on ONE line each
   --------------------------------------------------------------------------
   Daniel, 2026-08-16, asked for one line and shorter buttons. Dropping the
   count from "Browse all 40 titles" fixed it from 390px up, but 360px — a real
   phone width — still wrapped: each button had 155px and "See the print size"
   needed 166px. The padding is what gives, not the type size, because shrinking
   the label to fit would undo the 16px he set everywhere else.
   -------------------------------------------------------------------------- */
@media (max-width: 389px) {
	.mtq-herobtns { gap: 8px !important; }
	.mtq-herobtns > a { padding-left: 8px !important; padding-right: 8px !important; }
}

/* --------------------------------------------------------------------------
   Home shelves — "Option A", chosen by Daniel 2026-08-16
   --------------------------------------------------------------------------
   One header line, then covers. Replaces a layout that spent 848px and 66%
   chrome to show 2 of 13 books on a phone.

   ⚠️ THE TWO-ROW CAP LIVES HERE, NOT IN PHP. The column count changes with the
      viewport, so the cap must too — 3 columns → hide from the 7th, 4 → from
      the 9th, 6 → from the 13th. Slicing in PHP would show one row on a phone
      or four on a desktop.
   -------------------------------------------------------------------------- */
.mtq-shelf {
	background: #fff;
	border: 1px solid var(--mtq-rule);
	border-top: 3px solid var(--mtq-accent, var(--mtq-navy));
	padding: 16px 14px 18px;
	margin-top: 14px;
}
.mtq-shelf__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mtq-rule);
	margin-bottom: 14px;
}
.mtq-shelf__num {
	font-family: var(--mtq-mono);
	font-size: 10px; letter-spacing: .12em;
	color: var(--mtq-accent, var(--mtq-navy));
	flex: none;
}
.mtq-shelf__name {
	font-family: var(--mtq-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	letter-spacing: -.028em;
	margin: 0;
	min-width: 0;
}
.mtq-shelf__name a { color: var(--mtq-ink); }
.mtq-shelf__name a:hover { color: var(--mtq-accent, var(--mtq-navy)); }
.mtq-shelf__count {
	font-family: var(--mtq-mono);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--mtq-muted);
}
.mtq-shelf__all {
	margin-left: auto;
	font-size: 13px; font-weight: 500;
	color: var(--mtq-accent, var(--mtq-navy));
	white-space: nowrap;
}

/* 🔴 TWO per row on a phone, not three. Daniel, 2026-08-16.
   At 390px the theme's own padding and gap leave 351px of content, so three
   columns give each cover 109px — and a 109px card cannot hold a title like
   "Calming Mindfulness Word Search for Adults & Seniors". Every title on the
   shelf was truncating. Two columns give 169px, 55% wider, and the titles fit.
   ⚠️ SIX books becomes FOUR deliberately. Keeping six at two columns makes each
   shelf three rows instead of two, and there are SEVEN shelves stacked on the
   home page — that is a materially longer scroll for the sake of two more
   covers nobody could read at the old size. Tablet and desktop are untouched
   below; they already had the room. */
.mtq-shelf__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
.mtq-shelf__grid > *:nth-child(n+5) { display: none; }

/* Full-width "See all N" under each shelf. 48px+ tall so it is a real touch
   target rather than a text link — this site sells to readers who dislike small
   print, so the control that opens the rest of the range should not be the
   smallest thing on the shelf. */
.mtq-shelf__seeall {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 20px; padding: 15px 20px;
  border: 1px solid #C9CDD6; border-radius: var(--mtq-radius);
  font-size: 14.5px; font-weight: 550; color: var(--mtq-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.mtq-shelf__seeall:hover { border-color: var(--mtq-navy); color: var(--mtq-navy); background: var(--mtq-wash, #F7F8FA); }
.mtq-shelf__seeall:focus-visible { outline: 2px solid var(--mtq-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mtq-shelf__seeall { transition: none; } }
@media (min-width: 620px) {
	.mtq-shelf__grid { grid-template-columns: repeat(4, 1fr); }
	.mtq-shelf__grid > *:nth-child(n+7) { display: block; }
	.mtq-shelf__grid > *:nth-child(n+9) { display: none; }
}
@media (min-width: 900px) {
	.mtq-shelf__grid { grid-template-columns: repeat(6, 1fr); }
	.mtq-shelf__grid > *:nth-child(n+9) { display: block; }
	.mtq-shelf__grid > *:nth-child(n+13) { display: none; }
}

.mtq-bk { display: block; color: var(--mtq-ink); min-width: 0; }
.mtq-bk img,
.mtq-bk__blank {
	display: block; width: 100%;
	aspect-ratio: 800 / 1036;
	object-fit: contain; object-position: bottom;
	background: #fff;
	box-shadow: 0 8px 22px -14px rgba(20, 22, 26, .6), 0 0 0 1px rgba(20, 22, 26, .08);
}
.mtq-bk__blank { background: repeating-linear-gradient(135deg, #F3F5F8 0 8px, #EAEDF2 8px 16px); }
.mtq-bk__title {
	display: -webkit-box;
	/* ⚠️ THREE lines, not two — and this is the other half of the two-per-row
	   change. Going to two columns took the cover from 109px to 155px, but
	   MEASURED afterwards the longest titles still clipped: "Mega Word Search
	   for Adults & Seniors — Large Print" does not fit two lines at any width
	   a phone offers. Widening the card without lifting the clamp fixes the
	   cramping and not the truncation. The row we removed by showing four books
	   instead of six is exactly where the third line comes from. */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px; line-height: 1.32;
	margin-top: 7px;
}
.mtq-bk__price {
	display: block;
	font-family: var(--mtq-mono);
	font-size: 10px;
	color: var(--mtq-muted);
	margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Cart line busy state — ONE line, not the whole cart
   --------------------------------------------------------------------------
   The cart used to grey out entirely and reload on every change. Now each line
   carries its own state, so the others stay usable while one is saving.
   Deliberately NOT `pointer-events:none` on the line: the customer may press +
   again while it saves, and the queue coalesces that into the final number.
   -------------------------------------------------------------------------- */
.mtq-line-busy { position: relative; }
.mtq-line-busy .mtq-cart__total { opacity: .45; transition: opacity .15s; }
.mtq-line-busy::after {
	content: "";
	position: absolute;
	top: 50%; right: 2px;
	width: 15px; height: 15px;
	margin-top: -7px;
	border: 2px solid var(--mtq-rule);
	border-top-color: var(--mtq-navy);
	border-radius: 50%;
	animation: mtq-line-spin .7s linear infinite;
	pointer-events: none;
}
@keyframes mtq-line-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mtq-line-busy::after { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------------------
   Cart cross-sells — "You may be interested in…"
   --------------------------------------------------------------------------
   Two per row on a phone, four on desktop. Reuses .mtq-bk so a book looks the
   same here as on the home shelves. WooCommerce's default gave one column,
   grey letterboxed panels, a star rating and a full-width button per book.
   -------------------------------------------------------------------------- */
/* Daniel, 2026-08-16: "the space between add a coupon code and the line is too
   long, and the distance between the line and You might also like is also too
   large." Measured before: 56px above the rule, 61px below it. */
/* ⚠️ No top margin. The parent `.woocommerce` is a grid with a 24px row-gap,
   so anything here ADDS to that — 18px of margin was reading as 42px of space
   above the rule. The container's own gap is the spacing. */
/* ⚠️ The `margin-top: 0` this used to carry was correct only while the section
   was a child of the flex `.woocommerce` container, whose own gap supplied the
   space. It is inside the cart FORM now (see the hook move in functions.php),
   and a form has no gap — so the space has to be real margin or the rule sits
   flush against the coupon row. Re-measured after the move, not carried over. */
.mtq-xsell { margin-top: clamp(24px, 4vw, 36px); padding-top: clamp(14px, 2vw, 20px); border-top: 1px solid var(--mtq-rule); }
.mtq-xsell { margin-bottom: clamp(8px, 1.5vw, 14px); }
/* ⚠️ `.mtq-entry h2 { margin-top: 2.2rem }` (0,1,1) was beating the single-class
   rule below (0,1,0) and adding 35px above this heading — which is most of what
   Daniel measured as "the distance between the line and You might also like is
   too large". Two classes wins, and says why. */
.mtq-xsell .mtq-xsell__title { margin-top: 0; }
/* ⚠️ OVER-SPECIFIED ON PURPOSE, exactly like the order-summary panel below.
   `.mtq-xsell__title` alone is (0,1,0) and LOST to `.mtq-entry h2` (0,1,1), so
   the heading computed 33.6px against the 26px written here — measured, not
   assumed. Daniel, 2026-08-16: "make sure the title is not that big, it should
   be as large as order summary." Order summary is `var(--mtq-t-1)`; this is now
   the same token rather than a number that matches it today. */
.woocommerce .mtq-xsell .mtq-xsell__title,
.mtq-entry .mtq-xsell .mtq-xsell__title {
	font-family: var(--mtq-display);
	font-size: var(--mtq-t-1);
	font-weight: 600;
	letter-spacing: -.028em;
	line-height: 1.25;
	margin: 0 0 clamp(12px, 2vw, 16px);
}
/* Belt and braces: core ships `.cart-collaterals .cross-sells { float:left;
   width:48% }`. The section is hooked out of `.cart-collaterals` now so that
   rule no longer matches — but a float left behind by anything else would
   reproduce the overlap silently, and this costs nothing. */
.woocommerce .mtq-xsell { float: none; width: 100%; }
.mtq-xsell__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
/* ⚠️ Three per row is the ceiling now, NOT four. The section lives in the cart's
   left column (692px at a 1440px viewport), not the full page width — four
   columns there is ~155px per book cover. The old 4-up rule was written when
   this sat in the full-width collaterals block. */
@media (min-width: 700px)  { .mtq-xsell__grid { grid-template-columns: repeat(3, 1fr); } }
.mtq-xsell__item { display: flex; flex-direction: column; min-width: 0; }
/* The button sits at the bottom of every card whatever the title wraps to, so
   a two-line title next to a one-line title does not stagger the row. */
.mtq-xsell__item .mtq-bk { flex: 1 1 auto; }
/* Daniel: "the add to cart buttons for you might also like should be blue."
   The site's primary button, same as Secure checkout. */
.woocommerce .mtq-xsell__add,
.woocommerce .mtq-xsell__add.button {
	display: block;
	margin-top: 10px;
	width: 100%;
	background: var(--mtq-navy);
	border: 1px solid var(--mtq-navy);
	border-radius: var(--mtq-radius);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 11px 12px;
	text-align: center;
}
.woocommerce .mtq-xsell__add:hover,
.woocommerce .mtq-xsell__add.button:hover { background: #16345f; border-color: #16345f; color: #fff; }
/* Sits between the cover and the title, so it can never clip the artwork or
   press its text against an edge — which is what the stock SALE! flash did. */
.mtq-bk__save {
	display: block;
	font-family: var(--mtq-mono);
	font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
	color: var(--mtq-muted);
	margin-top: 7px;
}
/* WooCommerce's own "View cart" link, which it injects after an AJAX add. */
.mtq-xsell__item .added_to_cart { display: block; margin-top: 6px; font-size: 12px; color: var(--mtq-navy); text-align: center; }
/* The default template's star rating is not part of this design language. */
.mtq-xsell .star-rating, .mtq-xsell .woocommerce-product-rating { display: none; }

/* --------------------------------------------------------------------------
   Catalogue book card — the divider between books
   --------------------------------------------------------------------------
   Daniel, 2026-08-15: the rule used to sit above the price row, inside the
   card, where it read as part of the card rather than a separator. It now
   closes each card, under "Look inside this edition".

   ⚠️ The grid is `auto-fill`, so the number of columns changes with the
      viewport and `:last-child` alone would leave a trailing rule under the
      final row's other columns. The rule is suppressed for the last row by
      measuring from the end — this works for 1, 2 and 3 column layouts, which
      is every layout `minmax(min(290px,100%),1fr)` produces here.
   -------------------------------------------------------------------------- */
.mtq-book { padding-bottom: clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--mtq-rule); }
.mtq-book:last-child { border-bottom: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Look-inside lightbox
   --------------------------------------------------------------------------
   Sits above everything except the mobile menu — the menu is 2147483000 and
   must stay on top of the site chrome, but a lightbox opened from the page is
   modal over the page, so it goes just under it. See theme.js for behaviour.
   -------------------------------------------------------------------------- */
.mtq-lb {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	background: rgba(12, 14, 18, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(4px, 2vw, 20px);
	padding: clamp(56px, 9vw, 80px) clamp(8px, 3vw, 28px) clamp(24px, 5vw, 44px);
}
.mtq-lb[hidden] { display: none; }

.mtq-lb__fig {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.mtq-lb__img {
	display: block;
	max-width: 100%;
	/* Leave room for the caption, or a tall page image pushes it off screen. */
	max-height: calc(100% - 34px);
	width: auto; height: auto;
	object-fit: contain;
	background: #fff;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.mtq-lb__cap {
	font-family: var(--mtq-mono);
	font-size: 11px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	text-align: center;
	flex: none;
}

/* "Back" rather than an ✕, matching the product gallery. */
.mtq-lb__back {
	position: absolute;
	top: clamp(14px, 3vw, 26px);
	left: clamp(12px, 3vw, 26px);
	background: none;
	border: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: #fff;
	cursor: pointer;
	opacity: .9;
}
.mtq-lb__back:hover { opacity: 1; }
.mtq-lb__count {
	position: absolute;
	top: clamp(14px, 3vw, 26px);
	right: clamp(12px, 3vw, 26px);
	font-family: var(--mtq-mono);
	font-size: 11px;
	letter-spacing: .13em;
	color: rgba(255, 255, 255, .6);
}
.mtq-lb__nav {
	flex: none;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .1);
	border: 0; border-radius: 50%;
	color: #fff; font-size: 24px; line-height: 1;
	cursor: pointer;
}
.mtq-lb__nav:hover { background: rgba(255, 255, 255, .2); }
.mtq-lb__nav[hidden] { display: none; }

@media (max-width: 640px) {
	/* Thumb-reachable rather than beside a small image. */
	.mtq-lb__nav { position: absolute; bottom: clamp(16px, 5vw, 28px); }
	.mtq-lb__nav--prev { left: 22%; }
	.mtq-lb__nav--next { right: 22%; }
	.mtq-lb { padding-bottom: 92px; }
}

/* --------------------------------------------------------------------------
   Listing rows (article archives + the quizzes page)
   --------------------------------------------------------------------------
   The design's row is four columns — index, thumbnail, copy, figure — which
   works on a wide screen and collapses on a phone: measured at 390px the copy
   column was left with 148px, so the excerpt wrapped every three words.
   Daniel, 2026-08-15: "put the image above the heading and the text below it.
   Same for quizzes."

   Below 640px the row becomes a stack: index + figure on one line, then the
   image full width, then the copy. Done with wrap + `order` so no element
   moves in the DOM.

   ⚠️ `!important` is load-bearing here and nowhere else in this block. These
      rows come from the design export with INLINE styles, and inline beats any
      selector — this is the one case where !important is the correct tool
      rather than a symptom. Each override below cancels exactly one inline
      declaration; nothing is blanket-forced.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.mtq-lrow {
		flex-wrap: wrap !important;    /* inline sets display:flex, no wrap */
		align-items: center !important;
		row-gap: 14px !important;      /* inline `gap` shorthand sets both axes */
		column-gap: 14px !important;
	}
	.mtq-lrow__num    { order: 1; padding-top: 0 !important; }
	.mtq-lrow__figure { order: 2; margin-left: auto; padding-top: 0 !important; }
	/* 100% width is what forces the wrap onto its own line. */
	.mtq-lrow__media  { order: 3; width: 100% !important; }
	.mtq-lrow__body   { order: 4; flex-basis: 100% !important; }
	/* Full-bleed thumbnails are a banner, not a stamp — give them a shape that
	   suits the width they now have. */
	.mtq-lrow__media img,
	.mtq-lrow__media > div { aspect-ratio: 16 / 9 !important; }
}

/* --------------------------------------------------------------------------
   Cart — rebuilt from the Cart design
   --------------------------------------------------------------------------
   Two columns on desktop (lines + a sticky order summary), stacked on mobile.
   Values are the design's own: 24px gutters, a 74–104px cover, a 38px stepper.
   ---------------------------------------------------------------------- */
/* ⚠️ NO horizontal padding or max-width is added here. The cart renders inside
      the page template's `.mtq-wrap`, which already applies --mtq-bleed and the
      max width. Adding them again on .mtq-main double-padded the row and cost
      it 32px it did not have to give on a phone. Measured by walking the
      element chain from the cart line up to <body> and reading each ancestor's
      computed padding — the doubling is invisible in the stylesheet.

   ⚠️ `.mtq-entry` caps prose at 72ch for readability. That is right for an
      article and wrong for a cart, which needs the full column, so it is
      released on the cart and checkout only. */
.woocommerce-cart .mtq-entry,
.woocommerce-checkout .mtq-entry { max-width: none; }

/* ⚠️ FLEX, NOT GRID — deliberately.
      A two-column grid here put the cart form in the 360px column and squeezed
      the title to 126px on a 1440px screen. WooCommerce emits a
      `.woocommerce-notices-wrapper` BEFORE the form, so auto-placement handed
      column 1 to the notices and column 2 to the form. Pinning rows and columns
      would fix today's markup and break again the moment a plugin injects
      another sibling — several on this site do.

      With flex + wrap, every child defaults to a full-width line of its own and
      only the two children we name share a row. An unexpected sibling gets its
      own line instead of stealing the form's column. */
.woocommerce-cart .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.woocommerce-cart .woocommerce > * { width: 100%; }
@media (min-width: 980px) {
	.woocommerce-cart .woocommerce > form.woocommerce-cart-form { flex: 1; width: auto; min-width: 0; }
	.woocommerce-cart .woocommerce > .cart-collaterals { width: 360px; flex: none; }
	.mtq-cart__collaterals { position: sticky; top: 1.5rem; }
}

.mtq-cart__line {
	display: flex;
	gap: clamp(14px, 2.4vw, 24px);
	padding: clamp(20px, 2.6vw, 28px) 0;
	border-bottom: 1px solid var(--mtq-rule);
}
.mtq-cart__cover { flex: none; width: clamp(74px, 10vw, 104px); }
.mtq-cart__cover img {
	width: 100%; height: auto;
	box-shadow: 0 10px 26px -20px rgba(20,22,26,.6), 0 0 0 1px rgba(20,22,26,.08);
}
.mtq-cart__body { flex: 1; min-width: 0; }
.mtq-cart__range {
	font-family: var(--mtq-mono); font-size: 10px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mtq-muted); margin: 0;
}
.mtq-cart__title {
	display: block; margin-top: 7px;
	font-family: var(--mtq-display); font-weight: 600;
	font-size: clamp(16px, 1.9vw, 19px); letter-spacing: -.02em; line-height: 1.3;
	color: var(--mtq-ink);
}
.mtq-cart__title:hover { color: var(--mtq-navy); }
.mtq-cart__meta { font-size: 13px; color: var(--mtq-muted); margin: 6px 0 0; }
.mtq-cart__meta p { margin: 0; font-size: inherit; color: inherit; }

.mtq-cart__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.mtq-cart__unit { font-size: 13.5px; color: var(--mtq-muted); }
.mtq-cart__remove { font-size: 13.5px; color: var(--mtq-muted); text-decoration: underline; }
.mtq-cart__remove:hover { color: var(--mtq-alert); }

/* Stepper */
.mtq-qty { display: flex; align-items: center; border: 1px solid #DDE1E8; border-radius: var(--mtq-radius); }
.mtq-qty__btn {
	width: 38px; height: 38px; background: none; border: 0;
	font-size: 17px; line-height: 1; color: var(--mtq-ink); cursor: pointer;
}
.mtq-qty__btn:hover { color: var(--mtq-navy); }
.mtq-qty__btn[disabled] { color: var(--mtq-faint); cursor: default; }
/* The real WooCommerce input stays in the DOM — it carries the cart[key][qty]
   name the form posts. It is shown as the number between the buttons, with the
   native spinner removed so there are not two sets of controls. */
.mtq-qty .quantity { display: block; }
.mtq-qty input.qty {
	width: 42px; border: 0; background: none; text-align: center;
	font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums;
	-moz-appearance: textfield; appearance: textfield;
	color: var(--mtq-ink);
}
.mtq-qty input.qty::-webkit-outer-spin-button,
.mtq-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mtq-qty input.qty:focus { outline: none; }

.mtq-cart__money { text-align: right; flex: none; display: flex; flex-direction: column; gap: 6px; }
.mtq-cart__total { font-weight: 600; font-variant-numeric: tabular-nums; }
/* The design's saving cue: the original price, struck through, in grey. */
.mtq-cart__was {
	font-size: 12.5px; color: #A8AEBA;
	text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.mtq-cart__money { min-width: 82px; }

/* border-top added 2026-08-16 — the cross-sell now sits between the items and this row, so the
   coupon area needs its own rule to stay visually separated. */
.mtq-cart__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--mtq-rule); }
/* The field is the thing being filled in, so it gets the room; the button is
   sized to its own label. Daniel: "the same length, or maybe the coupon a
   little bit larger if the text fits in the button." */
.mtq-cart__coupon { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
.woocommerce .mtq-cart__coupon button.button {
	flex: 0 1 auto; width: auto; white-space: nowrap;
}
/* ⚠️ Below ~380px the field's natural width plus the button exceeded the row,
   and because the row may grow with its content the page scrolled sideways —
   53px at 320px. The button's padding is what gives; the label still fits.
   Checked at 320/360/390/430/768/1440. */
@media (max-width: 400px) {
	.woocommerce .mtq-cart__coupon button.button { padding-left: 12px; padding-right: 12px; }
	.mtq-cart__coupon { gap: 6px; }
}
.mtq-cart__coupon .input-text {
	/* ⚠️ `flex-basis: auto` on an <input> resolves to its DEFAULT SIZE — about
	   199px for the browser's 20-character default — so at 320px it refused to
	   shrink and pushed the page 37px sideways even with min-width:0. Basis 0
	   means it claims nothing and simply takes what is left. */
	flex: 1 1 0; width: 100%; min-width: 0; padding: .8rem .9rem;
	border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius);
	font-family: inherit; font-size: .95rem;
}
/* The update button is driven by the stepper. It is kept in the DOM and
   reachable by keyboard rather than removed, so the cart still works with
   JavaScript disabled — but it is not part of the design's visual language. */
.mtq-cart__update {
	background: none; border: 1px solid var(--mtq-rule); color: var(--mtq-body);
	font-size: .9rem; padding: .8rem 1.1rem;
}
.mtq-cart__update:hover { border-color: var(--mtq-navy); color: var(--mtq-navy); background: none; }

/* Order summary panel
   ⚠️ These selectors are deliberately over-specified. WooCommerce's own
      stylesheet ships `.cart-collaterals .cart_totals { float: right; width: 48% }`
      and `.woocommerce .cart-collaterals .cart_totals h2 { … }`. A plain
      `.mtq-summary` (0,1,0) loses to both, so the panel rendered at 48% of its
      column — 173px inside 360px — with a 33.6px heading overflowing the box.
      Measured, not guessed: 48% of 360 is 173 to the pixel. */
.woocommerce .cart-collaterals .cart_totals.mtq-summary {
	float: none;
	width: 100%;
	border: 1px solid var(--mtq-rule);
	border-radius: var(--mtq-radius);
	padding: clamp(20px, 3vw, 28px);
	background: var(--mtq-white);
}
.woocommerce .cart-collaterals .cart_totals.mtq-summary .mtq-summary__head {
	font-size: var(--mtq-t-1);
	margin: 0 0 1.1rem;
}
.woocommerce .cart-collaterals { width: 100%; float: none; }
.mtq-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 9px 0; font-size: 15px; }
.mtq-summary__k { color: var(--mtq-body); }
.mtq-summary__v { font-variant-numeric: tabular-nums; text-align: right; }
.mtq-summary__row--save .mtq-summary__v { color: var(--mtq-alert); }
.mtq-summary__row--total {
	border-top: 1px solid var(--mtq-ink); margin-top: 10px; padding-top: 16px;
	font-family: var(--mtq-display); font-weight: 700; font-size: var(--mtq-t-1);
}
.mtq-summary__row--total .mtq-summary__k { color: var(--mtq-ink); }
.mtq-summary__ship { padding: 4px 0 10px; border-bottom: 1px solid var(--mtq-rule); }
.mtq-summary__ship ul { list-style: none; margin: 0; padding: 0; }
.mtq-summary__ship li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14.5px; }
.mtq-summary__ship label { color: var(--mtq-body); flex: 1; }
.mtq-summary__go { margin-top: 18px; }
.mtq-summary__go .checkout-button { display: block; width: 100%; }
.mtq-summary__note { font-size: 12.5px; color: var(--mtq-muted); margin: 10px 0 0; text-align: center; }

.woocommerce-cart .cart-empty { font-size: var(--mtq-t-1); }

/* --------------------------------------------------------------------------
   Cart — beating WooCommerce's own selectors
   --------------------------------------------------------------------------
   ⚠️ `!important` IS REQUIRED HERE, and only here. Raising specificity was
   tried first and did NOT work — the browser's own matched-rule list shows why:

     .woocommerce a.remove                       color: var(--wc-red) !important
     .woocommerce-cart .wc-proceed-to-checkout a.checkout-button
                                                 background-color: #0e7ba6 !important

   Both opponents already declare !important, and no amount of specificity beats
   an !important declaration — only another one does. So this is the legitimate
   case, not the lazy one. Everything else in this file wins on specificity.
   Found with CSS.getMatchedStylesForNode; a first attempt at out-specifying
   them changed the font-size (no !important on that) while the colours stayed
   put, which is precisely the tell.
   ---------------------------------------------------------------------- */
.woocommerce .mtq-cart__line a.mtq-cart__remove {
	font-size: 13px;
	font-weight: 400;
	line-height: inherit;
	color: var(--mtq-muted) !important;
	background: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	width: auto; height: auto;
	border-radius: 0;
	margin-left: auto;
}
.woocommerce .mtq-cart__line a.mtq-cart__remove:hover {
	color: #8C2118 !important;
	background: none;
}

.woocommerce .mtq-summary .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--mtq-navy) !important;
	border: 1px solid var(--mtq-navy);
	color: var(--mtq-white) !important;
	font-weight: 600;
	padding: 1rem 1.4rem;
	border-radius: var(--mtq-radius);
}
.woocommerce .mtq-summary .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--mtq-navy-dark) !important;
	border-color: var(--mtq-navy-dark);
}

/* The mtq-sticky-checkout plugin's floating bar hardcodes the pre-theme teal
   (#0e7ba6) to match the old checkout button. The button is now navy, so the
   bar follows it. The plugin keeps working — only the colour is restated. */
/* ⚠️ These are the plugin's ACTUAL selectors, read out of its source
      (`id="mtq-sticky-checkout"`, `class="mtq-sc-btn"`), not guessed from the
      plugin's name. A first pass listed six plausible variants and would have
      matched none of the real ones — a rule that matches nothing looks exactly
      like a rule that works until you check the rendered colour. */
#mtq-sticky-checkout .mtq-sc-btn,
#mtq-sticky-checkout a,
#mtq-sticky-checkout button,
.mtq-sc-btn {
	background: var(--mtq-navy) !important;
	border-color: var(--mtq-navy) !important;
	color: var(--mtq-white) !important;
}

/* --------------------------------------------------------------------------
   Checkout — rebuilt to the design
   --------------------------------------------------------------------------
   Two columns: the form on the left, a sticky order panel on the right.
   Below 980px they stack, summary last, so the customer reaches the fields
   without scrolling past a long order list.
   ---------------------------------------------------------------------- */
.mtq-checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.mtq-checkout > * { width: 100%; }
@media (min-width: 980px) {
	.mtq-checkout__form { flex: 1; width: auto; min-width: 0; }
	.mtq-checkout__aside { width: 380px; flex: none; position: sticky; top: 1.5rem; }
}

/* Address fields. WooCommerce emits <p class="form-row"> with its own width
   classes; these make them a predictable two-up grid instead. */
.mtq-checkout__details .col-1,
.mtq-checkout__details .col-2 { width: 100%; }
.mtq-checkout h3 { font-size: var(--mtq-t-1); margin: 2rem 0 1rem; }
.mtq-checkout h3:first-child { margin-top: 0; }

.woocommerce-checkout .form-row { display: flex; flex-direction: column; margin: 0 0 1rem; padding: 0; }
.woocommerce-checkout .form-row label {
	font-size: 13.5px; font-weight: 500; color: var(--mtq-body); margin-bottom: .35rem;
}
.woocommerce-checkout .form-row .required { color: var(--mtq-alert); text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid var(--mtq-rule);
	border-radius: var(--mtq-radius);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--mtq-ink);
	background: var(--mtq-white);
	height: auto;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { outline: 2px solid var(--mtq-navy); outline-offset: 1px; }
@media (min-width: 600px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem;
	}
	.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Payment methods — the block Daniel reported as broken on the Blocks checkout
   --------------------------------------------------------------------------
   ⚠️ TWO EXPLICIT FIXES, both for defects visible in his screenshots:

   1. OVERSIZED TYPE. The Blocks checkout sizes everything in `em` against its
      own container, so this site's 17px body cascaded into 17px/28px where the
      design specifies 16px/24px. Here the sizes are stated in px on our own
      markup and inherit from nothing.

   2. THE PAYPAL PANEL OVERLAPPING THE CARD ICONS. Blocks positions the gateway
      icon strip absolutely, so when a panel expanded it slid underneath the
      icons of the row above. Here the icons are an ordinary flex child of the
      label and the panel is an ordinary block after it — an open panel pushes
      the following rows DOWN. Overlap is not styled away; it is structurally
      impossible.
   ---------------------------------------------------------------------- */
.mtq-pay { margin-top: 2.2rem; }
.mtq-pay__head { font-size: var(--mtq-t-1); margin: 0 0 1rem; }
.mtq-pay__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); }
.mtq-pay__method { border-bottom: 1px solid var(--mtq-rule); }
.mtq-pay__method:last-child { border-bottom: 0; }

.mtq-pay__label {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.1rem;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mtq-ink);
	cursor: pointer;
}
.mtq-pay__name { font-weight: 500; }
/* The icon strip: a flex child, never absolutely positioned. It may shrink and
   scroll on a narrow screen rather than push the label out of the row. */
.mtq-pay__icons {
	margin-left: auto;
	display: flex; align-items: center; gap: 6px;
	max-width: 45%; overflow: hidden;
}
.mtq-pay__icons img { max-height: 22px; width: auto; display: inline-block; }

.mtq-pay__method input[type="radio"] { margin: 0 0 0 1.1rem; flex: none; accent-color: var(--mtq-navy); }
/* The radio and its label share a row. */
.mtq-pay__method { display: flex; flex-wrap: wrap; align-items: center; }
.mtq-pay__method > label { flex: 1; min-width: 0; }
/* The panel takes a full row of its own BELOW the label — this is the rule that
   makes overlap impossible. */
.mtq-pay__box {
	flex-basis: 100%;
	margin: 0;
	padding: 0 1.1rem 1.1rem;
	font-size: 16px;
	line-height: 1.5;
	background: var(--mtq-tint);
	border-top: 1px solid var(--mtq-rule);
}
.mtq-pay__box p { font-size: 15px; line-height: 1.5; margin: .8rem 0 0; color: var(--mtq-body); }
.mtq-pay__box::before { display: none; }   /* core draws a callout arrow we do not use */
.mtq-pay__box input.input-text { width: 100%; }

.mtq-pay__place { margin-top: 1.5rem; }
.mtq-pay__submit { width: 100%; font-size: 1.05rem; padding: 1.05rem 1.4rem; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; color: var(--mtq-muted); margin-bottom: 1rem; }

/* Order panel on the checkout reuses the cart's summary look. */
.mtq-checkout__aside .mtq-summary {
	border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius);
	padding: clamp(20px, 3vw, 28px); background: var(--mtq-white);
}
.mtq-checkout__aside .mtq-summary__head { font-size: var(--mtq-t-1); margin: 0 0 1.1rem; }
/* ⚠️ THE REVIEW IS A <table> IN NAME ONLY — every part of it is set to block.
      It has to stay a <table> element because checkout.js replaces it with a
      table fragment, but its TABLE LAYOUT was the problem: the product rows are
      one cell wide while WooCommerce's shipping row is a <th>/<td> pair, so the
      browser computed shared column widths across both and squeezed the title
      to one word per line while leaving a huge empty gutter beside "Shipment".
      Forcing display:block on every part makes each row an independent flex
      row, which is what the design actually is. */
.mtq-review,
.mtq-review tbody,
.mtq-review tr,
.mtq-review th,
.mtq-review td { display: block; width: 100%; border: 0; padding: 0; text-align: left; }
.mtq-review { border-collapse: collapse; }
.mtq-review__cell { padding: .7rem 0 !important; border-bottom: 1px solid var(--mtq-rule) !important; }
.mtq-review__line { display: flex; align-items: flex-start; gap: .8rem; }
.mtq-review__cover { position: relative; flex: none; width: 46px; }
.mtq-review__cover img { width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(20,22,26,.08); }
.mtq-review__qty {
	position: absolute; top: -7px; right: -7px;
	min-width: 20px; height: 20px; padding: 0 5px;
	background: var(--mtq-navy); color: var(--mtq-white);
	border-radius: 10px; font-size: 11.5px; line-height: 20px; text-align: center;
	font-variant-numeric: tabular-nums;
}
.mtq-review__body { flex: 1; min-width: 0; }
.mtq-review__title { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--mtq-ink); }
.mtq-review__meta { display: block; font-size: 12.5px; color: var(--mtq-muted); margin-top: 3px; }
.mtq-review__meta p { margin: 0; font-size: inherit; color: inherit; }
.mtq-review__money { flex: none; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.mtq-review__row td { display: flex; justify-content: space-between; gap: 1rem; padding: 9px 0 !important; font-size: 15px; }
.mtq-review tr.mtq-summary__row--total td {
	border-top: 1px solid var(--mtq-ink); margin-top: 8px; padding-top: 15px !important;
	font-family: var(--mtq-display); font-weight: 700; font-size: var(--mtq-t-1);
}
/* Shipping arrives as <th>Shipment</th><td><ul>…</ul></td>. The heading becomes
   the design's small uppercase label above its options, not a table column. */
.mtq-review tr.shipping,
.mtq-review tr.woocommerce-shipping-totals { padding: 10px 0; border-bottom: 1px solid var(--mtq-rule); }
.mtq-review tr.shipping th,
.mtq-review tr.woocommerce-shipping-totals th {
	font-family: var(--mtq-mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mtq-muted); font-weight: 500;
	padding: 0 0 .4rem;
}
.mtq-review tr.shipping td { padding: 0 !important; font-size: 15px; }
.mtq-review tr.shipping ul { list-style: none; margin: 0; padding: 0; }
.mtq-review tr.shipping li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.mtq-review tr.shipping li label { flex: 1; min-width: 0; color: var(--mtq-body); margin: 0; }
.mtq-review tr.shipping li input { flex: none; accent-color: var(--mtq-navy); margin: 0; }
.mtq-review .woocommerce-shipping-destination { font-size: 12.5px; color: var(--mtq-muted); margin: .5rem 0 0; }

/* WooCommerce styles the payment block through ID selectors —
   `#payment { background:#ebe9eb }`, `#payment div.payment_box { background:#dfdcde }`
   and a `::before` callout arrow. An ID beats any class, so the design's panel
   colours were losing. These rules are ID-prefixed for that reason only; the
   arrow is removed because the design has no callout. */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 0; padding: 0; margin: 0; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--mtq-tint);
	border-radius: 0;
	margin: 0;
	color: var(--mtq-body);
	box-shadow: none;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after { display: none; content: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin-top: 1.5rem; }

/* Applied by theme.js only when the stepper is present — see the note there.
   Not a plain `display:none` on the button, which would also hide it for
   visitors without JavaScript, for whom it is the only way to change quantity. */
/* ⚠️ Specificity, not !important. The single class (0,1,0) lost to this
      theme's OWN button rule — `.woocommerce button.button { display:inline-block }`
      at (0,2,1) — so the class applied and the button stayed visible. Matching
      that weight and sitting later in the file is enough; nothing here declares
      !important, so nothing needs to. Confirmed with the browser's cascade list
      rather than by reading the stylesheet. */
.woocommerce button.mtq-cart__update--auto,
button.mtq-cart__update--auto { display: none; }
/* ⚠️ THE CLASS ABOVE IS APPLIED ONCE, BY JAVASCRIPT. A cart fragment refresh
   replaces the button and the class goes with it, so "Update cart" reappeared
   after changing a quantity — Daniel, 2026-08-16: "after I press + this update
   cart button appears but the cart updates automatically so it's not
   necessary." This rule is structural: if the stepper controls are present then
   quantity changes are automatic, so the button is never needed. It survives
   any re-render, and a no-JS visitor (no steppers) still gets the button. */
.woocommerce-cart-form:has([data-mtq-qty]) button[name="update_cart"],
.woocommerce-cart-form:has([data-mtq-qty]) .mtq-cart__update { display: none !important; }

/* ⚠️ ID-prefixed because WooCommerce positions these through `#payment …`
      rules, and an ID beats any class. Measured before and after: the radio was
      landing at x=17 against a list edge at x=16 — one pixel inside its own
      border, which reads as outside the box. */
.woocommerce-checkout #payment ul.payment_methods li.mtq-pay__method > input[type="radio"] {
	margin: 0 0 0 1.1rem;
	width: 18px;
	height: 18px;
	flex: none;
}
.woocommerce-checkout #payment ul.payment_methods li.mtq-pay__method > label.mtq-pay__label {
	padding-left: .85rem;
}

/* Coupon, moved into the order panel and collapsed by default, as the design
   has it. WooCommerce prints it above the form by default — that is the wide
   blue bar at the top of the page. */
.mtq-coupon { border-top: 1px solid var(--mtq-rule); margin-top: 1rem; padding-top: 1rem; }
.mtq-coupon__toggle {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: 14px; color: var(--mtq-navy); display: flex; align-items: center; gap: .5rem;
}
.mtq-coupon__toggle::after {
	content: ""; width: 7px; height: 7px; border: solid currentColor;
	border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px);
	transition: transform .15s;
}
.mtq-coupon__toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(0); }
.mtq-coupon__body { padding-top: .9rem; }
.mtq-coupon__body[hidden] { display: none; }
.mtq-coupon__body .form-row { margin-bottom: .6rem; }
.woocommerce-checkout .mtq-coupon__body input.input-text { width: 100%; }
/* ⚠️ SCOPED TO THE CHECKOUT. Unscoped, this `width:100%` also applied to the
   CART, where the field and the button share one row — the button took the full
   358px, squeezed the input to 31px and pushed the page 23px sideways.
   Daniel, 2026-08-16: "a tiny box and a huge button ... they definitely
   shouldn't go off screen." */
.woocommerce-checkout .mtq-coupon__body button.button { width: 100%; }
/* The stock coupon notice above the form is replaced by the panel version. */
.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }

/* --------------------------------------------------------------------------
   Busy state — the spinner that replaces the "Cart updated." banners
   --------------------------------------------------------------------------
   Shown while a cart change is in flight. It dims the region being updated
   rather than covering the page, so the customer can still see what they
   changed while it settles.

   ⚠️ `pointer-events: none` on the dimmed region matters: without it a second
      +/- press during the reload posts a second update and the two race, which
      is how a quantity ends up one step behind what was clicked.
   ---------------------------------------------------------------------- */
/* 🔴 THE BUSY STATE MUST SWALLOW CLICKS, NOT BECOME TRANSPARENT TO THEM.
 *
 * Daniel, 2026-08-16: *"when I double click rapidly on the minus button it opens a picture of the
 * actual product in the lightbox"*.
 *
 * MEASURED, by logging every mousedown/mouseup/click target through a rapid double click on the
 * drawer's minus button:
 *     click 1 -> BUTTON  (inside #mtq-drawer)   correct
 *     click 2 -> IMG     (NOT in #mtq-drawer)   <- the product gallery BEHIND the drawer
 * `pointer-events: none` on the busy box makes the ENTIRE DRAWER un-hittable for the ~300ms the
 * cart update takes, so the second click passes straight through to the page underneath. On a
 * product page that page is the gallery, whose zoom handler opens the lightbox.
 *
 * ⚠️ THE LIGHTBOX IS ONLY THE SYMPTOM. A fall-through click could land on anything behind the
 *    drawer — an Add to cart button, a link, another product. It was never specific to images.
 *
 * Fix: keep the CONTROLS inert (the box stays `pointer-events: none`, so no child button responds)
 * but give the dimming overlay `pointer-events: auto` so it absorbs the click instead of letting it
 * through. A descendant may re-enable pointer events even when its ancestor has disabled them, so
 * this is exactly the one-property difference between "inert" and "invisible to the mouse". */
.mtq-busy { position: relative; pointer-events: none; }
.mtq-busy::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(255,255,255,.62);
	z-index: 5;
	pointer-events: auto;   /* ← absorbs clicks during the update; see above */
}
/* ⚠️ `fixed`, not `absolute`. Absolutely positioned at top:42px it sat near the
      top of the CART FORM, which is taller than the screen — so on a phone the
      spinner was off in the middle of nowhere, or scrolled out of view entirely.
      Fixed centres it in the viewport, which is where someone waiting is
      looking. Daniel: "the spinning circle thing is not centered". */
.mtq-busy::before {
	content: "";
	position: fixed; top: 50%; left: 50%; z-index: 6;
	width: 30px; height: 30px; margin: -15px 0 0 -15px;
	border: 2px solid var(--mtq-navy-soft);
	border-top-color: var(--mtq-navy);
	border-radius: 50%;
	animation: mtq-spin .7s linear infinite;
}
@keyframes mtq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mtq-busy::before { animation-duration: 2.4s; }
}

/* Coupon row: the input was collapsing to about 60px beside a full-width
   button. It takes the remaining space and the button sizes to its label. */
/* ⚠️ THIS BLOCK USED TO RESTATE .mtq-cart__coupon AND SILENTLY WIN.
   It carried the same selectors as the block ~400 lines above at the same
   specificity, so being later it took precedence — which is why tightening the
   button's padding up there had no effect at all and the row still overflowed
   at 320px. Found with CSS.getMatchedStylesForNode: three of my own rules
   matched the button and the last one won. The sizing now lives in ONE place;
   only the shared button treatment is left here. */
.woocommerce .mtq-cart__coupon button.button { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Cart & checkout — page furniture
   --------------------------------------------------------------------------
   Daniel: the headings are too large, there's too much blank space under them,
   and the shipping lines are oversized.

   Measured before: h1 at 43px (it was inheriting --mtq-t-4, the HOME PAGE hero
   size — right for "We print books people finish.", wrong for the word "Cart"),
   21px of margin under it on top of the section's own padding, and the shipping
   notice and calculator link at 17px, the same size as body copy.
   ---------------------------------------------------------------------- */
.woocommerce-cart .mtq-section,
.woocommerce-checkout .mtq-section { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem); }

/* ⚠️ The page title has NO class and is a direct child of <article> — it is not
      inside .mtq-entry, which is why the first attempt at this rule changed
      nothing. Found by walking the h1's ancestry on the live page:
      h1 < article.page < .mtq-wrap < .mtq-section < main. */
.woocommerce-cart .mtq-wrap h1,
.woocommerce-checkout .mtq-wrap h1 {
	font-size: var(--mtq-t-2);
	margin-bottom: .5rem;
}

/* Shipping notice + calculator: secondary information, sized as such. */
/* ⚠️ `.mtq-entry p` is (0,1,1) and was beating a bare class (0,1,0), holding the
      notice at 17px — this theme's own prose rule, not WooCommerce's. Qualified
      with the element to outrank it. */
.mtq-entry p.woocommerce-shipping-destination,
.woocommerce-shipping-destination,
.woocommerce .woocommerce-shipping-calculator,
.woocommerce .woocommerce-shipping-calculator a,
.shipping-calculator-button {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mtq-muted);
}
.mtq-summary .woocommerce-shipping-destination { margin: .5rem 0 0; }
.woocommerce .shipping-calculator-button { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Payment rows + order panel — Daniel's 2026-08-15 pass
   --------------------------------------------------------------------------
   ⚠️ ID-PREFIXED because WooCommerce styles `#payment label` as a block. My
      `.mtq-pay__label { display:flex }` was losing, so the brand icons stacked
      BELOW the method name instead of sitting beside it — measured: label 80px
      tall, icons 24px below the name's centre, and the Card row 394px overall.
      This is the same trap as the radio inset earlier: on the checkout, assume
      WooCommerce got there first with an ID.
   ---------------------------------------------------------------------- */
.woocommerce-checkout #payment ul.payment_methods li.mtq-pay__method > label.mtq-pay__label {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: auto;
	float: none;
	line-height: 1.4;
}
.woocommerce-checkout #payment ul.payment_methods li.mtq-pay__method .mtq-pay__icons {
	margin-left: auto;
	max-width: 46%;
	flex: 0 1 auto;
}
.woocommerce-checkout #payment ul.payment_methods li.mtq-pay__method .mtq-pay__icons img {
	max-height: 22px; width: auto; display: inline-block; margin: 0;
}

/* Order panel: more breathing room, and every row on the same gutter. */
.mtq-checkout__aside .mtq-summary,
.woocommerce .cart-collaterals .cart_totals.mtq-summary { padding: 24px 22px; }

/* The line item was top-aligned, so a two-line title floated above a tall cover
   with dead space beneath. Centred against the cover, as the design has it. */
.mtq-review__line { align-items: center; }
.mtq-review__cover { align-self: center; }

/* Shipping options were rendering at 17px — larger than "Subtotal" beside them.
   ⚠️ Qualified with `.mtq-review` and the element to beat `.mtq-entry p/li`. */
.mtq-review tr.shipping label,
.mtq-review tr.shipping li,
.mtq-review tr.woocommerce-shipping-totals label,
.mtq-entry .mtq-review tr.shipping label {
	font-size: 14px;
	line-height: 1.45;
}
.mtq-review tr.shipping li { gap: 10px; padding: 7px 0; }
.mtq-review tr.shipping input[type="radio"] { flex: none; margin: 0; width: 16px; height: 16px; accent-color: var(--mtq-navy); }
/* The shipping block sat in its own inset box, so its rows did not line up with
   Subtotal / Tax / Total above and below it. Same gutter as every other row. */
.mtq-review tr.shipping,
.mtq-review tr.woocommerce-shipping-totals { padding-inline: 0; }
.mtq-review tr.shipping ul { margin: 0; padding: 0; }

/* Inline button spinner — used by the sticky buy bar, which reloads the page.
   The label is kept (so the button does not change width and jump) and the
   spinner replaces it visually via transparent text. */
.mtq-btn--busy {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.mtq-btn--busy::after {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 18px; height: 18px; margin: -9px 0 0 -9px;
	border: 2px solid rgba(255,255,255,.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mtq-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .mtq-btn--busy::after { animation-duration: 2.4s; } }

.mtq-coupon--cart { flex: 1 1 100%; border-top: 0; margin-top: 0; padding-top: 0; }
.mtq-coupon--cart .mtq-coupon__body { padding-top: .8rem; }

/* "or express checkout" divider — a rule with the label sitting in a gap. */
.mtq-orbar {
	display: flex; align-items: center; gap: .9rem;
	margin: 1.1rem 0;
	font-family: var(--mtq-mono);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--mtq-muted);
}
.mtq-orbar::before, .mtq-orbar::after { content: ""; flex: 1; height: 1px; background: var(--mtq-rule); }
.mtq-orbar[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Lightbox — replaces WooCommerce's, which never initialises on this theme
   --------------------------------------------------------------------------
   WooCommerce binds its zoom/lightbox to `.woocommerce-product-gallery`; the
   product template renders the design's own gallery, so that element does not
   exist and clicking the cover did nothing. This is the replacement.
   ---------------------------------------------------------------------- */
.mtq-lightbox {
	position: fixed; inset: 0; z-index: 120;
	background: rgba(20,22,26,.92);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1rem, 5vw, 3rem);
}
.mtq-lightbox[hidden] { display: none; }
.mtq-lightbox img {
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.mtq-lightbox__close {
	position: absolute; top: 12px; right: 12px;
	width: 48px; height: 48px;            /* a real touch target */
	background: none; border: 0;
	color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.mtq-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* While the sticky bar is driving the add-to-cart, suppress the OTHER button's
   spinner so only the pressed control shows one. */
body.mtq-buy-delegated .single_add_to_cart_button.loading::after,
body.mtq-buy-delegated form.cart .loading::after { display: none !important; }
body.mtq-buy-delegated .single_add_to_cart_button.loading { opacity: 1; }

/* --------------------------------------------------------------------------
   Product description / tabs — align with the design's gutter
   --------------------------------------------------------------------------
   The design's sections carry their own inline padding (clamp(18px,5vw,40px))
   and a 1180px max width. WooCommerce's tab wrapper has neither, so its text
   started at x=0 while every design section started at 18px — measured on the
   live page. Same gutter, same max width, so the column edge is continuous
   down the page.
   ---------------------------------------------------------------------- */
.single-product .woocommerce-tabs,
.single-product .up-sells,
.single-product .related.products {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(18px, 5vw, 40px);
	box-sizing: border-box;
}
.single-product .woocommerce-tabs { padding-block: clamp(2rem, 5vw, 3.5rem); }
.single-product .woocommerce-tabs .panel > h2:first-child { font-size: var(--mtq-t-2); }

/* --------------------------------------------------------------------------
   Cart drawer — the design's slide-in panel
   --------------------------------------------------------------------------
   Values are the design's own: 400px panel, 22px/26px padding, the same scrim
   and slide as the export.
   ---------------------------------------------------------------------- */
.mtq-drawer[hidden] { display: none; }
.mtq-drawer__scrim {
	position: fixed; inset: 0; z-index: 60;
	background: rgba(20,22,26,.4);
	animation: mtq-fade .2s ease both;
}
.mtq-drawer__panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
	width: min(400px, 100vw);
	background: var(--mtq-white);
	display: flex; flex-direction: column;
	animation: mtq-slide .28s cubic-bezier(.2,.7,.3,1) both;
	box-shadow: -20px 0 60px -30px rgba(20,22,26,.6);
}
@keyframes mtq-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mtq-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
	.mtq-drawer__panel, .mtq-drawer__scrim { animation: none; }
}

/* Daniel, 2026-08-16: *"reduce the space above and below the cart and X"*. 22px -> 12px vertical;
   horizontal padding stays 26px so the title still lines up with the body below it.
   The close button keeps a 44px hit target (min touch size) while the ROW gets shorter — its own
   height no longer sets the row height. */
.mtq-drawer__head {
	display: flex; align-items: center;
	padding: 12px 26px; border-bottom: 1px solid var(--mtq-rule); flex: none;
}
.mtq-drawer__title { font-family: var(--mtq-display); font-weight: 600; font-size: 1.05rem; }
.mtq-drawer__count { font-size: 13px; color: var(--mtq-muted); margin-left: 10px; }
.mtq-drawer__close {
	margin-left: auto; width: 44px; height: 32px;
	background: none; border: 0; font-size: 26px; line-height: 1;
	color: var(--mtq-muted); cursor: pointer;
}
.mtq-drawer__close:hover { color: var(--mtq-ink); }

/* `.mtq-drawer__inner` is the fragment WooCommerce replaces, so the flex
   column has to live on it as well as on the panel — otherwise the footer
   stops sticking to the bottom the first time the cart updates. */
.mtq-drawer__inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mtq-drawer__body { flex: 1; overflow-y: auto; padding: 8px 26px; overscroll-behavior: contain; }
.mtq-drawer__empty { font-size: 14.5px; line-height: 1.6; color: var(--mtq-muted); margin: 32px 0 0; }

.mtq-drawer__line { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #F0F1F4; }
.mtq-drawer__cover { flex: none; width: 56px; }
.mtq-drawer__cover img { width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(20,22,26,.08); }
.mtq-drawer__meta { flex: 1; min-width: 0; }
.mtq-drawer__name { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--mtq-ink); }
.mtq-drawer__name:hover { color: var(--mtq-navy); }
.mtq-drawer__range { display: block; font-size: 12.5px; color: var(--mtq-muted); margin-top: 4px; }
.mtq-drawer__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; }
.mtq-drawer__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.woocommerce .mtq-drawer__remove,
.mtq-drawer__remove {
	margin-left: auto; font-size: 12.5px; color: var(--mtq-muted) !important;
	background: none; text-decoration: underline; text-underline-offset: 3px;
	width: auto; height: auto;
}
.woocommerce .mtq-drawer__remove:hover { color: #8C2118 !important; background: none; }

/* Only the pay controls are pinned now; the numbers scroll with the content above.
   Daniel, 2026-08-16: *"make the space above secure check out a little bit smaller reduce to 50%"* —
   top padding 14px -> 7px. Bottom stays 20px so the card badges are not jammed against the edge. */
/* Daniel, 2026-08-17: *"make the white space below the payment options smaller like half the size
   so basically move that whole section down including the secure checkout and make that window
   shorter"*.
   MEASURED before: footer 136px tall, 20px of dead space under the card badges (this bottom
   padding), badges ending at y=824 of an 844 viewport.
   Bottom padding 20px -> 10px. Because the footer is pinned to the bottom of a flex column,
   shrinking it does all three things at once: the white space halves, the footer gets shorter, and
   Secure checkout + the badges move DOWN by the same 10px. */
.mtq-drawer__foot { position: relative; border-top: 1px solid var(--mtq-rule); padding: 7px 26px 10px; flex: none; }

/* Fade where the scrolling panel runs under the pinned pay block, so it reads as content
   continuing rather than content ending. Daniel: *"add a little fading shadow where it starts going
   on the scrolling panel"*.
   ⚠️ `bottom: 100%` puts it in the gap ABOVE the footer's border, over the last of the scrolling
      content — not inside the footer, where it would wash out the checkout button.
   ⚠️ `pointer-events: none` is essential: this strip sits directly over the tail of the scroll area,
      and without it the last suggestion card's Add button would be unclickable. */
.mtq-drawer__foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px;
  /* Daniel, 2026-08-16: *"make the shadow dark"* — was a white fade (content dissolving away);
     now a real shadow cast up from the pinned pay block, so the footer reads as sitting ON TOP of
     the scrolling content rather than the content bleaching out. Ink colour at 15% falling to 0. */
  background: linear-gradient(to top, rgba(20,22,26,.15), rgba(20,22,26,0));
  pointer-events: none;
}
/* Totals now live INSIDE the scroller, below the suggestions (Daniel 2026-08-16). They need their
   own separation rule since they no longer sit against the footer's border. */
#mtq-drawer .mtq-drawer__totals { margin-top: 16px; padding-top: 14px; border-top: 1px solid #E4E6EB; }

/* Saving row, above the subtotal. Navy so it reads as a gain rather than a charge. */
.mtq-drawer__save {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13.5px; color: #1B4079; margin-bottom: 6px;
}
.mtq-drawer__save span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mtq-drawer__save .amount { color: #1B4079; }
.mtq-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; }
.mtq-drawer__subtotal span:last-child { font-family: var(--mtq-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.mtq-drawer__note { font-size: 12.5px; color: var(--mtq-muted); margin: 6px 0 0; }
.mtq-drawer__go {
	display: block; text-align: center; width: 100%; margin-top: 16px;
	background: var(--mtq-navy); color: var(--mtq-white);
	border-radius: var(--mtq-radius); padding: 15px; font-size: 14.5px; font-weight: 500;
}
.mtq-drawer__go:hover { background: var(--mtq-navy-dark); color: var(--mtq-white); }
.mtq-drawer__keep { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--mtq-muted); }

/* The cover "thrown" into the cart. Decorative only — skipped under
   reduced-motion, and it never gates the drawer opening. */
.mtq-fly { border-radius: 2px; box-shadow: 0 12px 30px -12px rgba(20,22,26,.5); }

/* While the cart drawer is open, hide the sticky buy bar. It is below the
   scrim in z-order but the scrim is only 40% opaque, so a solid navy bar still
   reads as sitting in front of the panel. */
body.mtq-drawer-open .mtq-design > div[style*="position:fixed"],
body.mtq-drawer-open #mtq-sticky-checkout { display: none !important; }

/* Drawer quantity stepper */
.mtq-drawer__step { display: inline-flex; align-items: center; border: 1px solid #DDE1E8; border-radius: 3px; }
.mtq-drawer__step button {
	width: 30px; height: 30px; background: none; border: 0;
	font-size: 15px; line-height: 1; color: var(--mtq-ink); cursor: pointer;
}
.mtq-drawer__step button:hover { color: var(--mtq-navy); }
.mtq-drawer__qtynum { min-width: 24px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ⚠️ The lightbox scales the IMAGE only. An earlier version had the zoom on the
   container, which scaled the dark backdrop with it — Daniel: "I only want to
   zoom in on the image, I don't want to zoom in on the background". */
/* ⚠️ NO transition by default. A transition on `transform` fights a live pinch:
   every frame the finger produces is animated toward instead of applied, so the
   image lags behind and arrives in steps — Daniel: "the zoom and panning is
   quite slow and zooms kind of weird, it's not the standard smooth zooming".
   The transition is added only for the double-tap jump, where an animation is
   what you actually want. */
.mtq-lightbox img {
	transform-origin: center center;
	cursor: zoom-in;
	touch-action: none;
	will-change: transform;
}
.mtq-lightbox img.is-animating { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.mtq-lightbox img.is-zoomed { cursor: zoom-out; }
/* ⚠️ `touch-action: none` is what stops the BROWSER zooming the whole page —
   including the close button — when you pinch. The gesture is handled in JS and
   applied to the image's transform only. Without this the browser wins and the
   entire document scales. */
.mtq-lightbox { touch-action: none; overscroll-behavior: contain; }
.mtq-lightbox img { touch-action: none; will-change: transform; }
/* The close button is outside the transformed element, so it never moves. */
.mtq-lightbox__close { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .mtq-lightbox img { transition: none; } }

/* ⚠️ The "Click to zoom" badge sits ON TOP of the cover, so it swallowed clicks
   in exactly the spot that invites one — Daniel: "the click to zoom is the only
   area I can't actually click". It is a label, not a control, so clicks pass
   straight through to the zoomable image beneath. */
.mtq-zoomhint { pointer-events: none; }

/* The provisional line shown the instant Add is pressed, before the server
   confirms. It is visibly in-progress so it never reads as a finished state,
   and it is always replaced by the real cart fragment. */
/* The provisional line looks like an ordinary line — Daniel: "just appears
   straight in the cart and then it updates later". Only a whisper of
   transparency so it is not mistaken for confirmed, and no spinner. */
.mtq-drawer__line.is-pending { opacity: .82; }
.mtq-drawer__adding {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 8px; font-size: 12.5px; color: var(--mtq-muted);
}
.mtq-drawer__adding::before {
	content: ""; width: 12px; height: 12px;
	border: 2px solid var(--mtq-navy-soft); border-top-color: var(--mtq-navy);
	border-radius: 50%; animation: mtq-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .mtq-drawer__adding::before { animation-duration: 2.4s; } }

/* Disclosure caret, as the design draws it. Driven off aria-expanded so the
   arrow and the panel can never disagree about the state. */
.mtq-caret { margin-left: auto; color: var(--mtq-muted); transition: transform .15s; display: inline-block; }
[aria-expanded="true"] .mtq-caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .mtq-caret { transition: none; } }

.mtq-drawer__cartlink { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--mtq-muted); }

/* ---- Cart drawer: multi-book discount progress + suggestions (Daniel, 2026-08-16) ----
   Values follow the design export (Book Page.dc.html): #F7F8FA strip, #1B4079 fill, mono labels. */
.mtq-drawer__tier { background: #F7F8FA; padding: 14px 18px 12px; border-bottom: 1px solid #E4E6EB; }
.mtq-drawer__tiernote { margin: 0 0 9px; font-size: 14px; color: var(--mtq-ink, #14161A); }
.mtq-drawer__tierbar { height: 5px; background: #E4E6EB; border-radius: 3px; overflow: hidden; }
.mtq-drawer__tierbar > span { display: block; height: 100%; background: #1B4079; border-radius: 3px; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .mtq-drawer__tierbar > span { transition: none; } }
.mtq-drawer__tiermarks {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  letter-spacing: .04em; color: #8A909E;
}
.mtq-drawer__tiermarks .is-hit { color: #1B4079; font-weight: 600; }/* Nested INSIDE .mtq-drawer__body (the scroller),
which already pads 8px 26px — so this only
   needs the design's vertical separation: margin-top 24px,
padding-top 20px,
hairline rule.
   Book Page.dc.html line 603. */
#mtq-drawer .mtq-drawer__extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E4E6EB; }
.mtq-drawer__extrashead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }#mtq-drawer .mtq-drawer__extrastitle,
.mtq-xsell .mtq-drawer__extrastitle { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }#mtq-drawer .mtq-drawer__extrashint,
.mtq-xsell .mtq-drawer__extrashint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #1B4079; white-space: nowrap;
}/* Horizontal rail. ⚠️ overflow-x:auto also promotes overflow-y to auto,
which once clipped the
   nav drop-downs — here the rail has nothing to overflow vertically,
so it is safe,
but keep the
   explicit overflow-y:visible so a future taller card cannot get silently cut off. */
#mtq-drawer .mtq-drawer__extrasrail {
  display: flex; gap: 9px; margin-top: 9px; padding-bottom: 7px;
  overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}/* 🔴 `min-width: 0` IS LOad-BEARING. A flex item defaults to `min-width: auto`,
which means its
   CONTENT can override the basis — the cover image's intrinsic width was blowing each card far past
   138px,
which is why Daniel saw the rail "absolutely huge" on a phone (2026-08-16). The basis alone
   does not constrain a flex item; this does.
   138px,
padding 12px,
1px #E4E6EB,
radius 3px and the white ground all come from the design export
   (Book Page.dc.html line 610) rather than being picked here. */
/* Daniel,
2026-08-16: *"make this add a little extra about 60% of the current size"* then
   *"another 20% smaller to 40% of what we left off from before the last message"* — so 40% of the
   footprint it had at 138x295.
   Height is the axis that matters (it was pushing the cart items off screen),
so the cover shrinks
   hardest: 112px wide -> 62px,
which takes ~145px of height out on its own. The per-card
   "Takes you to X% off" line is gone too — the section header already says "UNLOCKS N% OFF",
so it
   was saying the same thing 8 times.
   ⚠️ `min-width: 0` is still load-bearing; a flex item's content overrides the basis without it. */
/* SIZE HISTORY — read this before changing the basis again (2026-08-16,
four rounds):
     design    138 x 295   (100%)
     "60%"     -> intermediate
     "40%"      84 x 205   = 42% of the original AREA  <- the figure Daniel calls "40"
     "50%"      98 x ~209  = ~50% of the original AREA <- HERE
   ⚠️ He measures this as OVERALL SIZE (the area figure I reported),
NOT height and NOT width.
      I briefly read "make it 50%" as height and shrank it to 64x151 (24% of area) — wrong
      direction. His correction: *"I meant 50% of the original so you had made it 40 just increased
      it by 10"*. Percentages here are AREA against 138x295.
   ⚠️ `min-width: 0` stays load-bearing — without it the cover's intrinsic width overrides the basis. */
#mtq-drawer .mtq-drawer__extra {
  flex: 0 0 98px; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px; background: #fff;
  border: 1px solid #E4E6EB; border-radius: 3px; padding: 8px;
}#mtq-drawer .mtq-drawer__extracover img,
.mtq-xsell .mtq-drawer__extracover img { display: block; width: 100%; height: auto; }/* Two lines again at this size — the single-line clamp was only a concession to the much smaller
   card,
and it truncated titles to "Nostalgi…". */
#mtq-drawer .mtq-drawer__extraname {
  color: inherit; text-decoration: none;
  font-size: 10.5px; font-weight: 500; line-height: 1.25; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}/* Struck original beside the current price — Daniel asked for the sale to be visible without
   stuffing it into the button. `del` muted and small,
`ins` unlined and normal weight. */
#mtq-drawer .mtq-drawer__extraname:hover { text-decoration: underline; }#mtq-drawer .mtq-drawer__extraprice,
.mtq-xsell .mtq-drawer__extraprice { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 11px; line-height: 1.2; }#mtq-drawer .mtq-drawer__extraprice del,
.mtq-xsell .mtq-drawer__extraprice del { color: #8A909E; font-size: 10px; text-decoration: line-through; }
.mtq-drawer__extraprice del .amount { text-decoration: line-through; }#mtq-drawer .mtq-drawer__extraprice ins,
.mtq-xsell .mtq-drawer__extraprice ins { text-decoration: none; font-weight: 600; color: #14161A; }
.mtq-drawer__extratakes { font-size: 11.5px; line-height: 1.35; color: #1B4079; }/* Design's button: plain outline,
8px pad,
12px/500,
label just "Add".
   MEASURED against the rendered design (Book Page.dc.html) at 390px: card 138x275,
button 112x32,
transparent background. Ours matches on most pages.

   🔴 SCOPED UNDER #mtq-drawer ON PURPOSE — DO NOT DEMOTE THIS TO A PLAIN CLASS.
   The add-to-cart anchor must carry WooCommerce's `button add_to_cart_button ajax_add_to_cart`
   classes for the AJAX binding to work. On a SINGLE PRODUCT page WooCommerce's own `.button` rules
   then out-specify a single class,
and the computed style became
   `background: rgb(27,
64,
121); font-size: 16px; padding: 15.2px 25.6px` — a solid navy block that
   roughly doubled the card height. That is what Daniel saw as "absolutely huge" and "it covers our
   actual products" (2026-08-16),
and it appeared ONLY on product pages,
which is why measuring on
   the home page said everything was fine.
   An ID selector (1,
1,
0) beats any class-only rule from Woo or the theme without resorting to
   !important. */
#mtq-drawer .mtq-drawer__extraadd,
#mtq-drawer a.mtq-drawer__extraadd.button,
.mtq-xsell a.mtq-drawer__extraadd.button {
  /* Daniel, 2026-08-16: *"make the add buttons blue are standard button blue"* and then
     *"also blue on the hovering cards"* — the same navy as Secure checkout, in the drawer AND on
     the cart page. Was the design export's plain outline.
     ⚠️ An earlier attempt at this edit silently did nothing: it matched on `padding: 5px 4px`,
        which the 50%-resize round had already changed to `6px 4px`. The stylesheet still looked
        edited. Caught only by reading the button's COMPUTED background in the browser. */
  margin-top: auto; display: block; width: 100%; text-align: center;
  background: var(--mtq-navy); background-color: var(--mtq-navy);
  border: 1px solid var(--mtq-navy); border-radius: 3px; padding: 6px 4px;
  font-size: 11px; font-weight: 500; line-height: 1.15; color: #fff;
  text-decoration: none; letter-spacing: normal; text-transform: none; min-height: 0;
}
#mtq-drawer .mtq-drawer__extraadd:hover,
.mtq-xsell .mtq-drawer__extraadd:hover { background: var(--mtq-navy-dark, #0F2A55); border-color: var(--mtq-navy-dark, #0F2A55); color: #fff; }
/* The cover must not dictate the card width either. */
.mtq-drawer__extracover { display: block; }#mtq-drawer .mtq-drawer__extracover img,
.mtq-xsell .mtq-drawer__extracover img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(20,22,26,.08); }

/* ---- Cart-page cross-sell (Daniel 2026-08-16) --------------------------------------------
   The drawer's rules are scoped under `#mtq-drawer` — needed there to out-specify WooCommerce's
   `.button` — so none of them reach the cart page. These restate the ones that matter for
   `.mtq-xsell`.
   ⚠️ WRITTEN OUT BY HAND ON PURPOSE. A first attempt generated the twins with a regex over the
      drawer block; it silently produced no twin for the rail, so every card rendered full width
      (measured 692px on desktop against a 118px target) while the CSS still looked plausible.
      Explicit and boring beats clever and unverifiable here. */
/* ⚠️ NO border-top here. Every `.mtq-cart__line` already draws a `border-bottom`, so the last cart
   item supplies the line above this section — adding one gave a visible DOUBLE rule (seen in the
   render, not in the code). The coupon row below gets its own separator instead, which is what
   Daniel asked for: a line under the items and still a line above the coupon. */
.mtq-xsell { margin-top: 22px; }
/* The bar above the cart items. Daniel, 2026-08-16: *"move the bar section closer to the cart title
   to reduce the white space between them"* — pulled up against the page title. */
/* Pulled up under the page title — Daniel, 2026-08-16: *"move the bar section closer to the cart
   title to reduce the white space between them"*. The cart's own top rule/padding sits above it. */
.mtq-xsell--top { margin-top: -34px; margin-bottom: 16px; }

.mtq-xsell .mtq-drawer__tier { background: #F7F8FA; padding: 14px 16px 12px; border: 1px solid #E4E6EB; border-radius: 3px; }
.mtq-xsell .mtq-drawer__tiernote { margin: 0 0 9px; font-size: 14px; color: var(--mtq-ink, #14161A); }
.mtq-xsell .mtq-drawer__tierbar { height: 5px; background: #E4E6EB; border-radius: 3px; overflow: hidden; }
.mtq-xsell .mtq-drawer__tierbar > span { display: block; height: 100%; background: #1B4079; border-radius: 3px; }
.mtq-xsell .mtq-drawer__tiermarks {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  letter-spacing: .04em; color: #8A909E;
}
.mtq-xsell .mtq-drawer__tiermarks .is-hit { color: #1B4079; font-weight: 600; }

.mtq-xsell .mtq-drawer__extras { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E4E6EB; }
.mtq-xsell .mtq-drawer__extrashead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mtq-xsell .mtq-drawer__extrastitle { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mtq-xsell .mtq-drawer__extrashint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #1B4079; white-space: nowrap;
}
/* 🔴 THE RAIL. Without this the cards are block-level and fill the page width. */
.mtq-xsell .mtq-drawer__extrasrail {
  display: flex; gap: 10px; margin-top: 10px; padding-bottom: 8px;
  overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
/* 🔴 `min-width: 0` again — a flex item's content overrides its basis without it. */
.mtq-xsell .mtq-drawer__extra {
  flex: 0 0 118px; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 5px; background: #fff;
  border: 1px solid #E4E6EB; border-radius: 3px; padding: 9px;
}
.mtq-xsell .mtq-drawer__extracover { display: block; text-decoration: none; }
.mtq-xsell .mtq-drawer__extracover img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(20,22,26,.08); }
.mtq-xsell .mtq-drawer__extraname {
  color: inherit; text-decoration: none;
  font-size: 11.5px; font-weight: 500; line-height: 1.25; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mtq-xsell .mtq-drawer__extraname:hover { text-decoration: underline; }
.mtq-xsell .mtq-drawer__extraprice { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 12px; line-height: 1.2; }
.mtq-xsell .mtq-drawer__extraprice del { color: #8A909E; font-size: 10.5px; text-decoration: line-through; }
.mtq-xsell .mtq-drawer__extraprice ins { text-decoration: none; font-weight: 600; color: #14161A; }
/* Specificity high enough to beat WooCommerce's own `.button` on the cart page. */
.mtq-xsell a.mtq-drawer__extraadd,
.mtq-xsell a.mtq-drawer__extraadd.button {
  margin-top: auto; display: block; width: 100%; text-align: center;
  background: var(--mtq-navy); background-color: var(--mtq-navy);
  border: 1px solid var(--mtq-navy); border-radius: 3px; padding: 7px 5px;
  font-size: 11.5px; font-weight: 500; line-height: 1.15; color: #fff;
  text-decoration: none; letter-spacing: normal; text-transform: none; min-height: 0;
}
.mtq-xsell a.mtq-drawer__extraadd:hover { background: var(--mtq-navy-dark, #0F2A55); border-color: var(--mtq-navy-dark, #0F2A55); color: #fff; }
@media (max-width: 640px) { .mtq-xsell .mtq-drawer__extra { flex: 0 0 104px; } }

/* Accepted-payment badges, replacing the old "View cart" link. Text pills, exactly as the design
   draws them — no brand artwork, so nothing to license or keep up to date. */
.mtq-drawer__cards { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 14px; }
.mtq-drawer__cards span {
  border: 1px solid #E4E6EB; border-radius: 3px; padding: 4px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px;
  letter-spacing: .06em; color: #5A6070;
}

/* The privacy notice belongs under the pay controls, not between them. */
.woocommerce-checkout .mtq-pay__place .woocommerce-privacy-policy-text { order: 99; }
.woocommerce-checkout .mtq-pay__place { display: flex; flex-direction: column; gap: .75rem; }
.woocommerce-checkout .mtq-pay__place .ppc-button-wrapper,
.woocommerce-checkout .mtq-pay__place [id^="ppc-button-ppcp"] { width: 100%; margin: 0; }

/* Quantity control inside the checkout's order summary. */
.mtq-review__step { display: inline-flex; align-items: center; border: 1px solid #DDE1E8; border-radius: 3px; margin-top: 8px; }
.mtq-review__step button { width: 28px; height: 28px; background: none; border: 0; font-size: 14px; line-height: 1; color: var(--mtq-ink); cursor: pointer; }
.mtq-review__step button:hover { color: var(--mtq-navy); }
.mtq-review__money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ⚠️ The BORDER moves outward, the contents stay put — Daniel: "don't move the
   elements, move the border so that it's closer to the outer border". On a
   phone the order panel now sits close to the screen edge instead of being
   inset twice (once by the page gutter, once by its own padding). */
@media (max-width: 600px) {
	.woocommerce-checkout .mtq-checkout__aside .mtq-summary,
	.woocommerce-cart .cart-collaterals .cart_totals.mtq-summary {
		margin-inline: calc(var(--mtq-bleed) * -1 + 6px);
		border-radius: 0;
	}
}

/* Payment button skeletons — shown until the gateway's own button renders. */
.mtq-payskel { display: flex; flex-direction: column; gap: .6rem; }
.mtq-payskel span {
	display: block; height: 48px; border-radius: var(--mtq-radius);
	background: linear-gradient(100deg, #EEF0F3 30%, #F7F8FA 50%, #EEF0F3 70%);
	background-size: 220% 100%;
	animation: mtq-shimmer 1.3s linear infinite;
}
@keyframes mtq-shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
	.mtq-payskel span { animation: none; background: #EEF0F3; }
}

/* ⚠️ Darker field borders on the checkout — Daniel asked for it. --mtq-rule
   (#E4E6EB) is right for dividing lines but too faint for something you are
   meant to type into; a form field has to read as a target. */
/* ⚠️ Includes `.woocommerce form .form-row input.input-text` — (0,3,2), which
      is what actually wins here. My first attempt used only the
      `.woocommerce-checkout …` form at (0,3,1) and lost to a rule I had written
      myself earlier in this same file. Confirmed with the browser's matched-rule
      list rather than by reading the stylesheet. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-checkout #payment div.payment_box input.input-text {
	border-color: #B9BFC9;
}
.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row textarea:hover,
.woocommerce-checkout .form-row select:hover { border-color: #98A0AD; }

/* --------------------------------------------------------------------------
   Order summary — breathing room between the rules and the content
   --------------------------------------------------------------------------
   Daniel: "move the little lines further away rather than moving the actual
   items inside — create some gap between the line and the elements."

   So the extra space goes into the ROW PADDING, which pushes each row's border
   away from its text. Adding margin to the text instead would move the content
   and leave the rules where they are, which is the opposite of the ask.
   ---------------------------------------------------------------------- */
.mtq-review__row td { padding: 15px 0 !important; }
.mtq-review__cell { padding: 1.15rem 0 !important; }
.mtq-review tr.shipping,
.mtq-review tr.woocommerce-shipping-totals { padding: 16px 0; }
.mtq-review tr.shipping th,
.mtq-review tr.woocommerce-shipping-totals th { padding: 0 0 .7rem; }
.mtq-review tr.shipping li { padding: 10px 0; }
/* ⚠️ The 4px here was mine, and it is what Daniel kept seeing as "the border
   touching the numbers": the Total row's rule sat four pixels under its own
   figures. Found by asking the browser which rule won, not by reading the
   file — a later block I added could not beat this one's !important. */
.mtq-review tr.mtq-summary__row--total td { padding-top: 20px !important; padding-bottom: 18px !important; }

/* Same treatment on the cart's summary panel, which shares the look. */
.mtq-summary__row { padding: 13px 0; }
.mtq-summary__ship { padding: 6px 0 14px; }
.mtq-summary__ship li { padding: 11px 0; }

/* The floating place-order bar must keep its shape whatever label the selected
   gateway gives it — "Proceed to PayPal" and "Pay with card" are very different
   lengths, and the bar was reflowing around them. */
.mtq-paybar button {
	min-height: 52px;
	display: flex; align-items: center; justify-content: center; gap: .6rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	width: 100%;
}
.mtq-paybar button > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mtq-paybar__total { flex: none; }

/* ⚠️ Nothing inside a gateway's panel may exceed the panel. Selecting the
   Stripe method pushed an <input> 15px past the viewport (right edge 405 on a
   390px screen), so the whole page could be dragged sideways leaving a gap down
   the right. Gateways size their own fields and cannot be trusted to fit. */
.woocommerce-checkout #payment .payment_box input,
.woocommerce-checkout #payment .payment_box select,
.woocommerce-checkout #payment .payment_box textarea,
.woocommerce-checkout #payment .payment_box iframe,
.woocommerce-checkout #payment .payment_box .form-row {
	max-width: 100%;
	box-sizing: border-box;
}
.woocommerce-checkout #payment .payment_box { overflow-x: clip; }

/* On the product page, the gap under the gallery should match the gap above it
   so the column reads as evenly spaced — Daniel asked for them to be the same. */
@media (max-width: 900px) {
	.single-product .mtq-design section:first-of-type > div { gap: clamp(26px, 4vw, 38px) !important; }
}

/* Drawer items are plain text now — keep them looking like content, not a
   disabled link. */
.mtq-drawer__name { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--mtq-ink); }
.mtq-drawer__cover { display: block; }

/* Shipping options as their own step, between the address and payment. */
.mtq-shipbox { margin-top: 2rem; }
.mtq-shipbox[hidden] { display: none; }
.mtq-shipbox__head { font-size: var(--mtq-t-1); margin: 0 0 1rem; }
.mtq-shipbox__slot ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mtq-rule); border-radius: var(--mtq-radius); }
.mtq-shipbox__slot li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mtq-rule); font-size: 15px; }
.mtq-shipbox__slot li:last-child { border-bottom: 0; }
.mtq-shipbox__slot label { flex: 1; min-width: 0; margin: 0; color: var(--mtq-ink); }
.mtq-shipbox__slot input[type="radio"] { flex: none; margin: 0; width: 18px; height: 18px; accent-color: var(--mtq-navy); }
.mtq-shipbox__slot .woocommerce-shipping-destination { font-size: 12.5px; color: var(--mtq-muted); margin: .6rem 0 0; }

/* Product page: tighter gap between the title block and the thumbnails on mobile. */
@media (max-width: 900px) {
	.single-product .mtq-design section:first-of-type > div { gap: clamp(16px, 3vw, 24px) !important; }
}

/* --------------------------------------------------------------------------
   Product gallery — native scroll-snap carousel
   --------------------------------------------------------------------------
   Finger-following, with momentum and snapping done by the browser rather than
   a JS animation loop. Smooth on a phone, and it still works with JS off.
   ---------------------------------------------------------------------- */
.mtq-gal {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 10px;
}
.mtq-gal::-webkit-scrollbar { display: none; }
.mtq-gal__slide { flex: 0 0 100%; scroll-snap-align: center; }
.mtq-gal__slide img { width: 100%; height: auto; display: block; cursor: zoom-in; }
/* One image is not a carousel — no snapping, no scrollbar, no gap. */
.mtq-gal:has(.mtq-gal__slide:only-child) { overflow-x: visible; scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) { .mtq-gal { scroll-behavior: auto; } }

/* The original shipping row stays in the review fragment (WooCommerce needs it
   there) but is hidden once mirrored into the Shipping options section. */
.mtq-review tr.mtq-ship-mirrored { display: none; }

/* Coupon disclosure on the cart: right-aligned, as Daniel asked. */
.mtq-coupon--cart { display: flex; flex-direction: column; align-items: flex-end; }
.mtq-coupon--cart .mtq-coupon__body { width: 100%; }
.mtq-coupon--cart .mtq-coupon__toggle { margin-left: auto; }

/* ── Express checkout placement, done WITHOUT moving any DOM ──────────────
 * PayPal's button wrapper contains iframes, and re-parenting an iframe forces
 * the browser to reload it, which breaks the button (it renders, then does
 * nothing on click). The wrapper and #payment are both children of
 * .mtq-checkout__form, so flex `order` puts express at the top of the checkout
 * — Daniel's "PayPal Express checkout should appear in the express checkout
 * section" — while every element stays exactly where its owner put it.
 * ---------------------------------------------------------------------- */
.mtq-checkout__form { display: flex; flex-direction: column; }
.mtq-checkout__form > * { order: 0; min-width: 0; }
.mtq-checkout__form > .ppc-button-wrapper,
.mtq-checkout__form > [id^="ppc-button-ppcp"],
.mtq-checkout__form > #wc-stripe-express-checkout-element,
.mtq-checkout__form > .wc-stripe-payment-request-wrapper,
.mtq-checkout__form > #wcpay-payment-request-wrapper { order: -2; }
.mtq-checkout__form > .mtq-orbar { order: -1; }

/* The summary panel was sitting 10px left of its siblings — computed
 * margin -10px from a stylesheet outside the theme. Everything else in this
 * column aligns at 16px, so the panel is pinned to match. Daniel reported the
 * off-centre panel three times; measured after this: gapL == gapR. */
.woocommerce .cart-collaterals .cart_totals.mtq-summary,
.mtq-cart__collaterals .mtq-summary { margin-left: 0; margin-right: 0; }

/* Remove control in the drawer — the cart's quiet text link, not a button. */
.mtq-drawer__remove {
	appearance: none; background: none; border: 0; padding: 0;
	margin-left: auto;
	font: inherit; font-size: .8125rem; line-height: 1.2;
	color: var(--mtq-ink-soft, #6b7280);
	text-decoration: underline; text-underline-offset: 2px;
	cursor: pointer;
}
.mtq-drawer__remove:hover,
.mtq-drawer__remove:focus-visible { color: var(--mtq-red, #b3261e); }
.mtq-drawer__row { flex-wrap: wrap; }

/* Stripe ships its own "OR" separator, which only appears when STRIPE's
 * buttons do. The theme's divider appears with the first gateway to render, so
 * Stripe's is a late-arriving duplicate — hidden, leaving exactly one. */
#wc-stripe-express-checkout-button-separator { display: none !important; }

/* ── Product gallery: a real scrolling carousel ───────────────────────────
 * Native scroll-snap so the image tracks the finger and carries momentum,
 * instead of a swipe handler that swapped the src at the end of the gesture.
 * Daniel: "can it actually scroll between images as opposed to just jumping".
 * ---------------------------------------------------------------------- */
.mtq-gal { width: 100%; }
.mtq-gal__track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;   /* a swipe past the last image must not navigate back */
}
.mtq-gal__track::-webkit-scrollbar { display: none; }
.mtq-gal__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;         /* one image per swipe, never skipping two */
	display: grid;
	place-items: center;
}
/* A single image should not look or behave like a carousel. */
.mtq-gal__track:has(> .mtq-gal__slide:only-child) { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mtq-gal__track { scroll-behavior: auto; }
}

/* "Express checkout" heading — same face, size and tracking as the "or"
 * divider (Daniel's instruction), just without the flanking rules. Ordered
 * ABOVE the express buttons; the buttons are -2 and the "or" is -1. */
/* ⚠️ Matched to .mtq-orbar PROPERTY BY PROPERTY, not by eye. Daniel: "Express
 * checkout text is way too big, it has to be centered, the same size as the or,
 * and the same distance from the buttons as the or, just on top." The first
 * version inherited the checkout's paragraph size because a bare `p` rule beat
 * it, and it was left-aligned because .mtq-orbar gets its centring from being a
 * flex row between two rules — a plain <p> has no such thing. Both are stated
 * explicitly here, and asserted in the browser afterwards rather than assumed.
 * The margin is the SAME 1.1rem as .mtq-orbar, so it sits the same distance
 * from the buttons. */
.mtq-checkout__form .mtq-exhead,
.mtq-exhead {
	order: -3;
	display: block;
	margin: 1.1rem 0;
	text-align: center;
	font-family: var(--mtq-mono);
	font-size: 11px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mtq-muted);
}
.mtq-exhead[hidden] { display: none; }

/* (The Your-order spacing fix lives with the rule it had to beat, above.) */

/* ── Payment method list: close the box, and stop the panel looking bolted on ──
 * Measured on the live checkout: the list was T1 R1 B0 L1 — no bottom border —
 * so the last method's box simply stopped, with the side rules running off the
 * end. Daniel: "Payment options has no border below it when it's not selected,
 * and then when it's selected it suddenly has another box below it."
 *
 * The second half is the .payment_box, which arrived with its OWN 1px border on
 * top of a tint, so expanding a method drew a second, nested box. The panel
 * belongs to the row it opens under, so it keeps the tint and drops the border.
 * ------------------------------------------------------------------------- */
.woocommerce-checkout #payment ul.wc_payment_methods { border-bottom: 1px solid var(--mtq-rule); }
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: 0; }

.woocommerce-checkout #payment div.payment_box {
	border: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}
/* WooCommerce draws a little pointer triangle above the panel with a border
 * colour of its own; without the panel border it reads as a stray mark. */
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* An unselected method renders an empty, zero-height panel — it must not add
 * padding or a tint of its own while it is collapsed. */
.woocommerce-checkout #payment div.payment_box:empty { padding: 0; background: none; }

/* Drawer exit — the mirror image of mtq-slide, so it leaves the way it arrived. */
#mtq-drawer.is-closing .mtq-drawer__panel {
	animation: mtq-slide-out .26s cubic-bezier(.4,0,.7,.3) both;
}
#mtq-drawer.is-closing .mtq-drawer__scrim {
	animation: mtq-fade-out .26s ease both;
}
@keyframes mtq-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mtq-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* Nothing should be clickable while it is on its way out. */
#mtq-drawer.is-closing { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	#mtq-drawer.is-closing .mtq-drawer__panel,
	#mtq-drawer.is-closing .mtq-drawer__scrim { animation: none; }
}

/* ── Comment form ─────────────────────────────────────────────────────────
 * WordPress's default markup was rendering completely unstyled — raw browser
 * inputs and a grey "Post Comment" button on an otherwise designed page.
 * Daniel: "the leave a reply form on the articles is not formatted in our
 * overall style, check the contact form in our design documents."
 *
 * ⚠️ These values are LIFTED FROM Contact.dc.html, not chosen to look close:
 *      input/textarea/select   1px #C9CDD6, radius 3px, padding 14px, 15px
 *      primary button          #1B4079 on white, radius 3px, 16px/30px, 500
 *      label                   flex column, 8px gap
 *    so the reply form and the contact form are the same form.
 * ---------------------------------------------------------------------- */
.comment-respond { margin-top: clamp(34px, 5vw, 52px); }
.comment-respond .comment-reply-title {
	font-family: var(--mtq-display); font-weight: 600;
	font-size: var(--mtq-t-2); letter-spacing: -.02em; margin: 0 0 6px;
}
.comment-respond .comment-notes,
.comment-respond .logged-in-as { font-size: 14px; color: var(--mtq-muted); margin: 0 0 22px; }

.comment-form { display: flex; flex-direction: column; gap: 18px; }
.comment-form p { margin: 0; }
.comment-form label {
	display: flex; flex-direction: column; gap: 8px;
	font-size: 14px; color: var(--mtq-body);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid #C9CDD6;
	border-radius: 3px;
	padding: 14px;
	font: inherit;
	font-size: 15px;
	background: #FFFFFF;
	color: var(--mtq-ink);
}
.comment-form textarea { resize: vertical; line-height: 1.6; min-height: 150px; }
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
	outline: 2px solid var(--mtq-navy, #1B4079);
	outline-offset: 1px;
	border-color: var(--mtq-navy, #1B4079);
}
/* The consent checkbox is the one row that is NOT a stacked label. */
.comment-form .comment-form-cookies-consent {
	display: flex; align-items: flex-start; gap: 10px;
}
.comment-form .comment-form-cookies-consent label {
	flex-direction: row; font-size: 14px; color: var(--mtq-muted); line-height: 1.5;
}
.comment-form .comment-form-cookies-consent input { margin-top: 2px; flex: none; }

.comment-form .form-submit { margin: 4px 0 0; }
.comment-form input[type="submit"] {
	background: #1B4079; color: #FFFFFF;
	border: 0; border-radius: 3px;
	padding: 16px 30px;
	font: inherit; font-size: 15px; font-weight: 500;
	cursor: pointer;
}
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible { background: #0F2A55; }

/* Existing comments, so a thread does not look like the form's afterthought. */
.comment-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 22px; }
.comment-list .comment-body {
	border: 1px solid var(--mtq-rule); border-radius: 3px; padding: 20px 22px; background: #FFFFFF;
}
.comment-list .comment-author .fn { font-weight: 600; font-style: normal; }
.comment-list .comment-metadata { font-size: 12.5px; color: var(--mtq-muted); margin-top: 2px; }
.comment-list .comment-content { margin-top: 12px; }
.comment-list .comment-content p:last-child { margin-bottom: 0; }

/* ── Article reading measure ──────────────────────────────────────────────
 * Measured on a real post: 761px of text at 17.4px ≈ 87 characters per line.
 * That is well past the comfortable range for long-form reading (roughly
 * 60-75), and these articles run to 70+ paragraphs. Constraining the measure
 * is the single biggest readability change available here.
 *
 * ⚠️ Scoped to single POSTS. `.mtq-entry` is also the product description and
 *    the page body, and narrowing those would be a layout change nobody asked
 *    for. Full-width children (figures, tables, code) keep their own width.
 * ---------------------------------------------------------------------- */
.single-post .mtq-entry > p,
.single-post .mtq-entry > ul,
.single-post .mtq-entry > ol,
.single-post .mtq-entry > blockquote,
.single-post .mtq-entry > h2,
.single-post .mtq-entry > h3,
.single-post .mtq-entry > h4 { max-width: 34em; }
/* ⚠️ `em`, NOT `ch`. `ch` is the width of the font's ZERO glyph, and in this
 * face that is unusually wide — 66ch computed to 716px, barely narrower than
 * the 761px it was meant to fix, and still ~82 characters per line. Measured,
 * not assumed: 34em lands near 68 characters, which is the range long-form
 * text is comfortable at. */

/* Related reading */
.mtq-related { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--mtq-rule); }
.mtq-related__head { font-family: var(--mtq-display); font-weight: 600; font-size: var(--mtq-t-2); letter-spacing: -.02em; margin: 0 0 20px; }
.mtq-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.mtq-related__list a { display: block; color: inherit; text-decoration: none; }
.mtq-related__list img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,22,26,.08); }
.mtq-related__title { display: block; margin-top: 10px; font-family: var(--mtq-display); font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -.018em; }
.mtq-related__list a:hover .mtq-related__title { color: var(--mtq-navy, #1B4079); }

/* ── Block checkout: fixes from Daniel's 2026-08-15 review ─────────────────
 * 1. THE CARD ICONS WERE SPILLING INTO THE PAYPAL ROW. Measured: the Card
 *    option's label row is 24px tall, but the icon strip inside it grew to 75px
 *    because the icons WRAPPED onto three lines at 390px. They overflowed
 *    downward into the next option, so when PayPal was selected its border cut
 *    straight across the Visa/Mastercard logos — which is exactly what Daniel
 *    photographed. The strip is meant to be one line ending in a "+4" badge.
 *    ⚠️ An earlier note in this file blamed the theme's font-size leaking into
 *    Blocks and pinned it to 16px. That was real but it was not the whole
 *    cause: the wrapping is what actually breaks the row.
 * ---------------------------------------------------------------------- */
.payment-methods--logos,
.wc-block-components-payment-method-label--with-icon {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	min-width: 0;
}
.payment-methods--logos > *,
.wc-block-components-payment-method-label--with-icon > * {
	flex-wrap: nowrap !important;
	min-width: 0;
}
/* Room for the strip, and let the row grow rather than clip if it ever needs to. */
.wc-block-components-radio-control__option { min-height: 3.25em; }
.wc-block-components-radio-control__option-layout { align-items: center; }
.wc-block-components-radio-control__label-group { min-width: 0; }

/* 2. The place-order button in the theme's own colour and shape. Blocks ships
 *    it dark grey with square corners (measured rgb(50,55,60), radius 0);
 *    everything else on this site is navy with a 3px radius. */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button:not(:disabled) {
	background-color: var(--mtq-navy, #1B4079) !important;
	color: #FFFFFF !important;
	border-radius: 3px !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	min-height: 52px;
}
.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background-color: #0F2A55 !important;
}

/* 3. Tighten the gap between the page title and the first block on mobile —
 *    measured 32px, which reads as a hole above the order summary. */
@media (max-width: 782px) {
	.woocommerce-checkout .mtq-entry > .wp-block-woocommerce-checkout,
	.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 8px; }
	.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block { margin-bottom: 14px; }
}

/* ── Stacking order: the mobile menu is above EVERYTHING ───────────────────
 * Daniel: "the hovering buttons on checkout and cart and the paypal button
 * appear in front of the mobile menu — the mobile menu has to be in front of
 * everything obviously. This applies to all pages."
 *
 * Measured: #mtq-menu sat at z-index 90 while BOTH sticky bars — my own
 * .mtq-paybar and the separate mtq-sticky-checkout plugin — sat at 9998. The
 * menu is a direct child of <body> with no ancestor trapping it, so it was
 * simply losing the race on the number.
 *
 * ⚠️ The menu is pushed near the top of the signed 32-bit range deliberately.
 *    Two of the things competing with it are third-party (the sticky-checkout
 *    plugin, and PayPal's own button), so picking "one more than the current
 *    highest" only holds until a plugin update raises theirs.
 * ---------------------------------------------------------------------- */
#mtq-menu { z-index: 2147483000; }

/* Everything sticky sits on one documented scale, below the menu. */
.mtq-paybar,
#mtq-sticky-checkout { z-index: 9000; }

/* Belt and braces: a full-screen menu should hide the sticky CTAs anyway —
 * they are not reachable while it is open, and on a phone they read as
 * floating debris over the navigation. */
body.mtq-menu-open .mtq-paybar,
body.mtq-menu-open #mtq-sticky-checkout { display: none !important; }

/* ⚠️ THE PAYMENT BUTTONS ARE HIDDEN WITH `visibility`, NEVER `display`.
 *    They contain PayPal and Stripe IFRAMES. Removing an iframe from the layout
 *    can make the browser reload it, and a reloaded PayPal button renders
 *    perfectly and does nothing when tapped — the exact failure that cost an
 *    hour earlier today. `visibility` keeps the frame laid out and alive. */
body.mtq-menu-open .ppc-button-wrapper,
body.mtq-menu-open [id^="ppc-button-ppcp"],
body.mtq-menu-open #wc-stripe-express-checkout-element,
body.mtq-menu-open .wc-block-components-express-payment {
	visibility: hidden;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Single article / quiz — 2026-08-16
   The template is single.php + template-parts/single/*. Almost all of the
   styling is inline, carried over from the design exports verbatim; only the
   things inline styles cannot express live here.
   ──────────────────────────────────────────────────────────────────────────── */

/* FAQ accordion. The panel is a <details>, so the +/− is driven off [open] and
   can never disagree with whether the answer is actually showing — which is the
   whole reason this is not a button with a class on it. */
.mtq-faq__q::-webkit-details-marker { display: none; }   /* Safari's own triangle */
.mtq-faq__q::marker { content: ""; }
.mtq-faq__sign::before { content: "+"; }
.mtq-faq__item[open] .mtq-faq__sign::before { content: "−"; }   /* U+2212, not a hyphen */
.mtq-faq__item[open] .mtq-faq__sign { border-color: #1B4079; }
.mtq-faq__q:hover { opacity: .72; }
.mtq-faq__q:focus-visible { outline: 2px solid #1B4079; outline-offset: 3px; }

/* The contents rail is sticky on desktop only. Sticky inside a wrapped flex row
   on a phone pins it to the top of the viewport over the article — position
   static below the point where the rail drops under the copy. */
@media (max-width: 900px) {
  .mtq-toc { position: static; border-left: 0; padding-left: 0; border-top: 1px solid #E4E6EB; padding-top: 24px; margin-top: 8px; flex-basis: 100%; }
}

/* Article body headings get scroll-margin from the TOC pass, but anything the
   editor links to by hand needs it too, or the sticky header covers the target. */
.mtq-single__body :is(h2, h3, h4)[id] { scroll-margin-top: 90px; }

/* Comment form. comment_form() supplies the structure; these are the bits its
   arguments cannot reach. */
.mtq-commentform p.comment-form-cookies-consent { margin: 0; }
.mtq-commentform .comment-form-comment,
.mtq-commentform .comment-form-author { margin: 0 0 16px; }
.mtq-commentform { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.mtq-commentform p { margin: 0; }
.mtq-commentform input:focus, .mtq-commentform textarea:focus { outline: 2px solid #1B4079; outline-offset: 1px; border-color: #1B4079; }
/* WordPress prints the reply-cancel link inside the form; it must not look like
   a heading when nobody is replying. */
#cancel-comment-reply-link { font-size: 13px; color: #5A6070; margin-left: 10px; }

.mtq-copylink:hover { border-color: #1B4079; color: #1B4079; }

/* ─────────────────────────────────────────────────────────────────────────────
   Free Word Search Generator — 2026-08-16
   Daniel: "make it wide… the user currently has to scroll within the window to
   reach the download button… two side by side panels."

   🔴 THE CAUSE WAS THE ARTICLE MEASURE, NOT THE IFRAME. `.mtq-entry` caps its
      children at a reading measure — MEASURED at 761px on a 1440px screen. The
      embedded app stacks its two panels below 900px, so at 761 it was always one
      column, always taller than the 1650px the iframe was hardcoded to, and the
      download button always below the fold INSIDE the frame. Making the iframe
      taller would have hidden the symptom at one screen size only.

   Scoped by SLUG, not by page id — see the body_class filter in functions.php.
   The id differs between this clone and production; the slug does not.
   ──────────────────────────────────────────────────────────────────────────── */
.mtq-page-word-search-generator .mtq-entry { max-width: none; }
/* The prose around the tool still wants a measure — only the tool goes wide. */
.mtq-page-word-search-generator .mtq-entry > :is(p, h2, h3, ul, ol) { max-width: 72ch; }
.wsg-embed { width: 100%; margin: clamp(22px, 3vw, 32px) 0; }
.wsg-embed iframe {
  display: block; width: 100%; border: 1px solid var(--mtq-rule);
  border-radius: var(--mtq-radius); background: #fff;
  /* A floor, not a fixed height — the script below sets the real one. If the
     script never runs the frame is still usable rather than 0px tall. */
  min-height: 900px;
}

/* ============================================================================
   CATALOGUE CARD — mobile row layout + rating line          (Daniel, 2026-08-24)
   ----------------------------------------------------------------------------
   "organise the shop page like this on mobile with the book in a fixed
    container [on the left] and the description items on the right"
   — reference was an Amazon mobile listing.

   What makes that layout work is the SHAPE, not the styling: a small fixed-size
   cover with everything stacked beside it, so a phone screen shows four or five
   books instead of one and a half.

   ⚠️ The card's own styles are INLINE (font sizes, margins), and an inline style
      beats a class. The overrides below therefore need !important — not as a
      shortcut, but because there is no other way to reach a style attribute
      from a media query.

   🔴 Scoped under .mtq-book throughout. WooCommerce's own `.button` rules are
      broad and out-specify a bare class; anything unscoped here gets overwritten
      on the pages where woocommerce.css also loads.
   ========================================================================== */

/* ---- whole-tile click target -------------------------------------------------
   The card is one big link to the product. Implemented as a stretched link on the
   title anchor: no JS, the href stays real, and the accessible name is the book.

   🔴 The controls that must survive it are raised above with z-index. Add to cart
      is the one that matters — without this the button would add to cart AND
      navigate, or navigate instead. The cover link and "Look inside" are lifted
      too; a stretched link swallows every sibling that is not.                   */
.mtq-book { position: relative; }
.mtq-book__body h3 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* ⚠️ the BUTTON, not the row. `.mtq-book__buy` spans the full card width, so raising the row
   would block the click-anywhere behaviour across a strip of every tile. */
.mtq-book__media a,
.mtq-book__buy .button,
.mtq-book__buy a,
.mtq-book__inside { position: relative; z-index: 2; }

/* The rating line, both layouts. Printed only when the product has a rating —
   12 of 38 do, and none of the word search books. */
.mtq-book__rating { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.mtq-book__rating .woocommerce-review-link { display: none; }
.mtq-book__rnum { font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; color: #14161A; }
.mtq-book__rcount { font-size: 12.5px; color: #8A909E; }

@media (max-width: 600px) {
  /* Headline and intro hidden on the phone so the books start near the top of the page.
     🔴 The H1 is clipped, NOT display:none — it is the page's only heading, and on a category page
     it carries the category name. Removing it from the accessibility tree to save vertical space
     would trade a real problem for a cosmetic one. The intro paragraph has no such duty. */
  .mtq-cat__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px !important; }
  .mtq-cat__intro { display: none !important; }

  /* Ranges on ONE line, swipeable. They wrapped to four rows and pushed the books down.
     The negative margin matches section#shelf's own padding so the row runs edge to edge —
     a scroller that stops short of the screen edge reads as a clipped list instead. */
  .mtq-ranges {
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                     /* a bar under seven pills reads as a fault */
    margin-left: calc(-1 * clamp(18px, 5vw, 40px));
    margin-right: calc(-1 * clamp(18px, 5vw, 40px));
    padding-left: clamp(18px, 5vw, 40px);
    padding-right: clamp(18px, 5vw, 40px);
  }
  .mtq-ranges::-webkit-scrollbar { display: none; }
  .mtq-ranges > a {
    flex: 0 0 auto;                            /* without this they compress instead of overflowing */
    white-space: nowrap;
  }

  /* the row */
  /* align-items:center puts the cover against the MIDDLE of the text block rather than its top —
     which is what "bring it down" means once the text column is taller than the cover. */
  .mtq-book { display: flex; gap: 20px; align-items: center; }
  .mtq-book__media { flex: 0 0 156px; width: 156px; }
  .mtq-book__body  { flex: 1 1 auto; min-width: 0; }

  /* 🔴 The first element in the body carries an inline margin-top:22px that existed to balance the
     old top-aligned layout. Centred, it is just a hole above the title. It sits on the SAVE line
     when there is a discount and on the title when there is not, so target the position, not the
     element — naming one would silently miss every card of the other kind. */
  .mtq-book__body > *:first-child { margin-top: 0 !important; }

  /* the shelf grid's desktop gutter is up to 64px — far too much between rows */
  #shelf-word-search > div:last-child,
  section[id^="shelf-"] > div:last-child { gap: 22px !important; padding-top: 26px !important; }

  /* title: smaller, tight to the top of the row, capped so a long one cannot
     push the price off the bottom of a phone screen */
  .mtq-book__body h3 { font-size: 16px !important; line-height: 1.3 !important; margin-top: 0 !important; }
  .mtq-book__body h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* he asked for the description on the right, so it stays — clamped, because a
     26-word blurb in a 200px column is eight lines and undoes the compactness */
  .mtq-book__blurb { font-size: 13px !important; margin-top: 7px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .mtq-book__rating { margin-top: 7px; }

  /* price on its own line, button full width beneath it — as in the reference */
  .mtq-book__buy { flex-wrap: wrap; gap: 8px !important; margin-top: 9px !important; }
  .mtq-book__buy > span { font-size: 16px !important; }
  .mtq-book__buy .button { margin-left: 0 !important; width: 100%; text-align: center;
    padding: 10px 14px !important; font-size: 13.5px !important; }

  .mtq-book__inside { padding-top: 8px !important; font-size: 12px !important; }

  /* the 01/02 index badge is decorative and steals space at this size */
  .mtq-book__media a > span { font-size: 9px !important; padding: 4px 6px !important; }
}

/* type="search" makes WebKit draw its own clear button beside ours — two ✕ in the same field.
   Only a render showed it; no measurement would have. */
.mtq-search__input::-webkit-search-cancel-button,
.mtq-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.mtq-search__form:focus-within { border-color: #1B4079; box-shadow: 0 0 0 3px rgba(27,64,121,.12); }
/* == MTQ CATALOGUE AUTOCOMPLETE v1 == */
.mtq-search { position: relative; }
.mtq-ac {
  position: absolute; left: clamp(18px,5vw,40px); right: clamp(18px,5vw,40px); top: 100%;
  z-index: 40; margin-top: 4px; background: #FFFFFF; border: 1px solid #14161A; border-radius: 3px;
  box-shadow: 0 18px 40px -22px rgba(20,22,26,.55); max-height: 62vh; overflow-y: auto; padding: 4px 0;
}
.mtq-ac[hidden] { display: none; }
.mtq-ac__group { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: #8A909E; padding: 9px 14px 5px; }
.mtq-ac__opt { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer;
  font-size: 14.5px; line-height: 1.3; color: #14161A; text-decoration: none; }
.mtq-ac__opt:hover, .mtq-ac__opt[aria-selected="true"] { background: #F2F4F8; }
/* 🔴 the size that was missing: without it a book cover renders at its natural width and every
   suggestion fills the screen. Both dimensions AND object-fit, or a portrait cover distorts. */
.mtq-ac__opt img { width: 26px; height: 34px; flex: 0 0 26px; object-fit: cover; background: #F7F8FA; display: block; }
.mtq-ac__opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtq-ac__opt em { font-style: normal; margin-left: auto; color: #8A909E; font-size: 12.5px; flex: none; }

/* == MTQ PRODUCT PAGE REDESIGN v1 == */
/* ============================================================================
   PRODUCT PAGE — translated from the reference design      (Daniel, 2026-08-24)
   ----------------------------------------------------------------------------
   What he asked for, in his words: the framed order block, proper section
   breaks, clear titles, their description treatment, their title font, and
   "different coloring to attract attention to the different sections".

   🔴 SCOPED TO body.single-product THROUGHOUT. The catalogue, home and article
      pages keep the existing white ground and Space Grotesk. A palette that
      leaks off this page is a rebrand nobody agreed to.

   🔴 THE NAVY IS UNCHANGED. #1B4079 is already identical in both designs — it is
      the thing carrying brand recognition, and nothing here touches it. What
      changes is the PAPER underneath it.
   ========================================================================== */
body.single-product {
  --pdp-paper:  #F7F2E8;   /* the reference's ground — warmer than white, and it */
  --pdp-paper2: #F0E9DA;   /* matches the stock a large-print book prints on     */
  --pdp-card:   #FFFFFF;
  --pdp-line:   #DBD1BE;   /* warm rule. cool grey on cream reads as a mistake   */
  --pdp-ink:    #16233B;
  --pdp-muted:  #5C6474;
}
body.single-product,
body.single-product .mtq-design { background: var(--pdp-paper); }

/* ---- section rhythm --------------------------------------------------------
   Alternating tone is the whole trick: each block is visibly its own thing
   without a single extra pixel of chrome. The rule on top gives the break he
   asked for; the tone change is what makes it read as a new section rather than
   more of the last one. */
body.single-product .mtq-design > section { position: relative; }
body.single-product .mtq-design > section:nth-of-type(even) { background: var(--pdp-paper2); }
body.single-product .mtq-design > section:nth-of-type(odd)  { background: var(--pdp-paper); }
body.single-product .mtq-design > section + section { border-top: 1px solid var(--pdp-line); }

/* Section headings: bigger, plainer, and given room. "Very clear titles." */
body.single-product .mtq-design > section > * h2 {
  letter-spacing: -.028em; text-wrap: balance;
}

/* ---- the framed order block ------------------------------------------------
   "the order section including the actual add to cart has been put within a
   frame bringing attention to it — I'd like to do that as well."
   A white card on cream is the whole mechanism: it is the only white on the
   screen, so the eye goes there without any colour being spent on it. */
body.single-product .mtq-order {
  background: var(--pdp-card);
  border: 1px solid var(--pdp-line);
  border-radius: 6px;
  padding: clamp(18px, 3vw, 26px);
  margin-top: 34px;
  box-shadow: 0 22px 48px -34px rgba(22,35,59,.45);
}
/* the price row's own top rule and spacing were doing the separating a frame
   now does — inside the card they are just clutter */
body.single-product .mtq-order > div:first-child {
  margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
}
body.single-product .mtq-order form.cart { margin-top: 18px !important; }
body.single-product .mtq-order .mtq-trust { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pdp-line); }

/* ---- the title -------------------------------------------------------------
   Their face, their three-line setting, and the middle line in navy.
   ⚠️ ONE weight of DM Sans is loaded, for this heading only. The rest of the
      site stays Space Grotesk — see the note in fonts.css. */
body.single-product .mtq-pdp-info h1 {
  font-family: "DM Sans", 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.03 !important;
}
body.single-product .mtq-pdp-info h1 .t2 { color: #1B4079; }

/* the gallery's cool grey pad fights the cream — warm it to match the paper */
body.single-product .mtq-gal { background: var(--pdp-paper2) !important; }
body.single-product .mtq-zoomhint { border-color: var(--pdp-line) !important; }

/* body copy sits on cream now; the cool grey was tuned for white */
body.single-product .mtq-pdp-info > p { color: #3A4152 !important; }

/* == MTQ PDP SPEC GRID + THEME CARDS v1 == */
/* The two structural wins from the reference, on data the shop now actually holds.
   Both components already existed and rendered as plain rows; only the appearance changes. */

/* ---- the spec grid ---------------------------------------------------------
   Four cells, value first and large, label under it small. That inversion is the
   whole point: the number is what is being communicated, the label only says
   which number it is. Rendered from real WooCommerce attributes, so a shop owner
   edits it in the product screen and it is never invented here. */
body.single-product .mtq-specs {
  grid-template-columns: 1fr 1fr;
  gap: 1px !important;
  background: var(--pdp-line);
  border: 1px solid var(--pdp-line);
  border-top: 1px solid var(--pdp-line) !important;
  border-radius: 6px; overflow: hidden;
  margin-top: 30px !important;
}
body.single-product .mtq-specs__row {
  flex-direction: column-reverse !important;   /* value above label */
  align-items: flex-start;
  gap: 3px !important;
  padding: 15px 17px !important;
  border-bottom: 0 !important;
  background: var(--pdp-card);
}
body.single-product .mtq-specs__k {
  width: auto !important; flex: none; padding-top: 0 !important;
  font-size: 10px !important; letter-spacing: .15em !important;
}
body.single-product .mtq-specs__v {
  font-family: "DM Sans", 'Space Grotesk', sans-serif;
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}

/* ---- the theme cards -------------------------------------------------------
   "What is inside" has existed all along and skipped itself because the themes
   field was empty on every book. It is filled now, from each book's OWN short
   description — so this section says what the book says, not what we think. */
body.single-product .mtq-themes {
  gap: 10px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  margin-top: 22px !important;
}
body.single-product .mtq-themes__item {
  background: var(--pdp-card);
  border: 1px solid var(--pdp-line) !important;
  border-radius: 6px;
  padding: 15px 16px !important;
  align-items: center !important;
  gap: 12px !important;
}
body.single-product .mtq-themes__item > span:first-child { color: #1B4079 !important; font-weight: 600; }
body.single-product .mtq-themes__item > span:last-child { font-weight: 500; }

/* ---- section headings: plainer and larger ----------------------------------
   "very clear titles". The eyebrow row stays — it is the numbering that makes
   the page feel indexed — but the heading itself gets size and air. */
body.single-product .mtq-design > section h2 {
  font-size: clamp(27px, 3.4vw, 42px) !important;
  letter-spacing: -.032em !important;
  line-height: 1.08 !important;
  margin-top: 16px !important;
  max-width: 20ch;
}

/* ---- description: their treatment ------------------------------------------
   Larger, looser, and measured — the reference's description reads better mostly
   because it is set at 19px/1.65 in a 42ch column instead of small and wide. */
body.single-product .mtq-pdp-info > p {
  font-size: 19px !important; line-height: 1.66 !important; max-width: 40ch !important;
}
body.single-product .mtq-design > section p { text-wrap: pretty; }

/* == MTQ PDP SECTION TONES v1 == */
/* Three sections carry their own inline background and were overriding the cream rhythm — two in
   the old cool grey #F7F8FA, one in near-black #14161A. Cool grey beside cream reads as a mistake,
   which is the same reason the rules had to be warmed.
   ⚠️ Inline styles, so !important is the only way to reach them from a stylesheet. */
body.single-product .mtq-design > section[style*="F7F8FA"] { background: var(--pdp-paper2) !important; }
/* the bundle section stays DARK — it is the one deliberate contrast on the page — but in the
   reference palette navy-ink rather than a cool near-black */
body.single-product .mtq-design > section[style*="14161A"] { background: var(--pdp-ink) !important; }

/* == MTQ PDP BACK TO WHITE v1 == */
/* Daniel saw the cream and said no — "make the site backgrounds white like before".
   Reverting is five variables, because everything the redesign changed reads from them: the page
   ground, the alternating section tones, the rules, the gallery pad and the dark bundle section all
   fall back into the original palette at once. That is the whole reason they were tokens.

   ⭐ THE ALTERNATION SURVIVES — he called that idea brilliant and it was never the cream doing the
   work, it was the CHANGE between tones. White against #F7F8FA does the same job in the original
   palette. */
body.single-product {
  --pdp-paper:  #FFFFFF;
  --pdp-paper2: #F7F8FA;
  --pdp-card:   #FFFFFF;
  --pdp-line:   #E4E6EB;
  --pdp-ink:    #14161A;
}
/* 🔴 The order frame worked on cream because it was the ONLY white thing on the page. On white that
   mechanism is gone, so the frame has to earn attention a different way: a firmer border and a
   deeper shadow rather than a colour it no longer has. */
body.single-product .mtq-order {
  border: 1px solid #D6DAE2;
  box-shadow: 0 18px 44px -30px rgba(20,22,26,.40), 0 1px 0 rgba(20,22,26,.03);
}
/* the spec cells and theme cards sat on cream; on white they need their own edge to stay visible */
body.single-product .mtq-specs { background: #E4E6EB; }
body.single-product .mtq-themes__item { border-color: #E4E6EB !important; }
body.single-product .mtq-pdp-info > p { color: #3C4250 !important; }

/* "make for adults and seniors not bold" — the third title line drops to regular weight, so the
   emphasis stays on the book name and the audience line reads as the qualifier it is. */
body.single-product .mtq-pdp-info h1 .t3 { font-weight: 400; }

/* == MTQ PDP TITLE BACK TO SPACE GROTESK v1 == */
/* Daniel: back to the previous font for the title, keep the navy on "Word Search", and set
   "for Adults & Seniors" in a lighter version of the same face.
   The size, the three-line break and the colour all stay exactly as they were — only the family
   reverts. */
body.single-product .mtq-pdp-info h1 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}
/* 🔴 400 is only available because the @font-face above now declares the file's real 300-700 range.
   Setting a weight the family cannot supply is what makes a browser quietly swap in another font —
   which is the bug this same heading had an hour ago. */
body.single-product .mtq-pdp-info h1 .t3 { font-weight: 400 !important; }
body.single-product .mtq-pdp-info h1 .t2 { color: #1B4079; }

/* == MTQ PDP TYPE SCALE v1 == */
/* Sizes taken off the reference at 390 / 768 / 1280, not estimated. */
body.single-product .mtq-pdp-info h1 {
  /* reference: 42px at 390, 6.6vw above that. Capped at 64px because our heading lives in a ~473px
     sticky column rather than their full-width hero — their 84px would not fit the measure. */
  font-size: clamp(40px, 6.3vw, 61px) !important;   /* two points under the example's 42, at his ask */
  line-height: .97 !important;
  letter-spacing: -.035em !important;
}
/* Both descriptions, same size, on the reference's curve: 17px phone → 19.2px desktop. */
body.single-product .mtq-pdp-info > p,
body.single-product .mtq-design > section p {
  font-size: clamp(17px, 1.1vw + 12.7px, 19.2px) !important;
  line-height: 1.62 !important;
}
/* the small print stays small — these are captions and legal lines, not description copy */
body.single-product .mtq-design > section .tiny,
body.single-product .mtq-order p,
body.single-product figcaption p { font-size: inherit !important; }

/* == MTQ PDP EYEBROW RULES v1 == */
/* A short rule leading the eyebrow above the title, as on the example. */
body.single-product .mtq-pdp-info > div:first-of-type:not(.mtq-specs):not(.mtq-order)::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; background: #1B4079;
  margin-right: 12px; position: relative; top: -2px;
}

/* The 01 / 02 / 03 markers on the section headings become the same rule.
   ⚠️ Targeted by the inline style that defines them — they carry no class. */
body.single-product .mtq-design > section span[style*="width:30px"][style*="height:30px"] {
  width: 26px !important; height: 2px !important;
  border: 0 !important; background: #1B4079;
  display: block !important; place-items: unset !important;
  font-size: 0 !important; line-height: 0 !important;
  align-self: center;
}

/* == MTQ PDP MARK COLOUR v1 == */
body.single-product { --pdp-mark: #1B4079; }   /* Daniel prefers the navy — one value; #C07C24 is the amber */

body.single-product .mtq-pdp-info > div:first-of-type:not(.mtq-specs):not(.mtq-order)::before,
body.single-product .mtq-design > section span[style*="width:30px"][style*="height:30px"] {
  background: var(--pdp-mark) !important;
}

/* The About panel's row labels get the same marker — WHO IT IS FOR, HOW IT READS, WHAT IS INCLUDED.
   ⚠️ Those labels carry no class, so they are matched on the inline style that defines them. */
body.single-product .mtq-design > section div[style*="letter-spacing:.12em"][style*="text-transform:uppercase"]::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 2px; background: var(--pdp-mark);
  margin-right: 10px; position: relative; top: -2px;
}

/* == MTQ PDP CLOSING CTA + ASSURANCE v1 == */
/* The example's bottom block, in our palette. Centre-aligned, one framed card, a primary cart and a
   secondary route to the set — the same shape, drawn with our navy and our rules. */

body.single-product .mtq-cta__eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--pdp-mark);
  display: inline-block; flex: none;
}
body.single-product .mtq-cta__head { font-size: clamp(28px, 4.4vw, 46px) !important; max-width: 18ch; }
body.single-product .mtq-cta__body { font-size: clamp(16px, 1vw + 12.6px, 18px) !important; line-height: 1.62; }

/* the card. On a white page it earns attention by border and shadow, the same way the buy box
   above it does — there is no contrasting ground here to do that work. */
body.single-product .mtq-cta__card {
  background: #FFFFFF; border: 1px solid #D6DAE2; border-radius: 8px;
  box-shadow: 0 20px 46px -32px rgba(20,22,26,.42);
  max-width: 420px; margin: 30px auto 0; padding: clamp(20px, 3vw, 28px); text-align: left;
}
body.single-product .mtq-cta__price { display: flex; align-items: baseline; gap: 14px; }
body.single-product .mtq-cta__now { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
body.single-product .mtq-cta__was { font-size: 17px; color: #A8AEBA; text-decoration: line-through; }
body.single-product .mtq-cta__save {
  display: inline-block; margin-top: 12px; padding: 6px 11px; border-radius: 3px;
  background: #F6EBD8; color: #7C4E12;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
body.single-product .mtq-cta__card form.cart { margin-top: 18px !important; }
body.single-product .mtq-cta__card .single_add_to_cart_button { width: 100%; text-align: center; }
/* secondary: quieter than the primary on purpose — it is an alternative, not a competing ask */
body.single-product .mtq-cta__set {
  display: block; margin-top: 10px; padding: 12px 14px; text-align: center;
  border: 1px solid #D6DAE2; border-radius: 3px; color: #1B4079;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
body.single-product .mtq-cta__set:hover { border-color: #1B4079; }

/* ---- the assurance strip ---------------------------------------------------
   Three cells with our hairlines rather than the example's tinted panel: this sits between two white
   sections, and a fourth background tone would be one too many. */
body.single-product .mtq-assure-strip__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #E4E6EB; border-bottom: 1px solid #E4E6EB;
}
body.single-product .mtq-assure-strip__cell { padding: 20px clamp(14px, 2vw, 22px); border-right: 1px solid #E4E6EB; }
body.single-product .mtq-assure-strip__cell:last-child { border-right: 0; }
body.single-product .mtq-assure-strip__k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: #8A909E; display: flex; align-items: center; gap: 9px;
}
body.single-product .mtq-assure-strip__k::before { content: ""; width: 18px; height: 2px; background: var(--pdp-mark); flex: none; }
body.single-product .mtq-assure-strip__v { font-size: 14.5px; line-height: 1.5; color: #14161A; margin-top: 8px; }
@media (max-width: 640px) {
  body.single-product .mtq-assure-strip__grid { grid-template-columns: 1fr; }
  body.single-product .mtq-assure-strip__cell { border-right: 0; border-bottom: 1px solid #E4E6EB; }
  body.single-product .mtq-assure-strip__cell:last-child { border-bottom: 0; }
}

/* == MTQ PDP PRICE BADGE v1 == */
/* Matches the cover's discount rectangle exactly — same red, size and tracking — so the two are one
   object seen twice, not two reds that nearly agree. Pushed right, aligned to the price baseline. */
body.single-product .mtq-order__off {
  margin-left: auto;
  background: #B3121B; color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .07em; line-height: 1; padding: 9px 12px;
  align-self: center; white-space: nowrap;
}

/* == MTQ BUY BAR REVEAL v1 == */
/* Off-screen until the page's own add-to-cart has been passed, then it slides up.
   ⚠️ The bar carries an inline `animation:omFade` that would fight the transform — overridden here
   rather than edited out of the template, so the fade still applies on the way in. */
body.single-product .mtq-buybar {
  animation: none !important;
  transform: translateY(115%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
body.single-product .mtq-buybar.is-in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body.single-product .mtq-buybar { transition: none; }
}

/* == MTQ HOME SHELF CARDS v1 == */
/* Seven shelves in one screen instead of seven screens. Each card carries its own accent, which is
   the device that makes a plain grid readable at a glance — the colour is the shelf's identity, not
   decoration, so it survives the "one accent only" rule. */
.mtq-shelves__list {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #8A909E; margin: 20px 0 0; line-height: 1.9;
}
.mtq-shelfgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 2vw, 20px); margin-top: 26px;
}
.mtq-shelfcard {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid #E4E6EB; border-radius: 4px; padding: 0 0 20px;
  text-decoration: none; color: inherit; background: #FFFFFF;
  transition: border-color .16s ease, transform .16s ease;
}
.mtq-shelfcard:hover { border-color: var(--mtq-accent); transform: translateY(-2px); }
.mtq-shelfcard__bar { display: block; height: 4px; background: var(--mtq-accent); border-radius: 4px 4px 0 0; }
.mtq-shelfcard__meta {
  display: flex; justify-content: space-between; gap: 12px; padding: 0 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  letter-spacing: .13em; text-transform: uppercase;
}
.mtq-shelfcard__num   { color: var(--mtq-accent); font-weight: 600; }
.mtq-shelfcard__count { color: #8A909E; }
.mtq-shelfcard__name {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600; letter-spacing: -.026em; line-height: 1.15; padding: 0 20px;
}
.mtq-shelfcard__from {
  margin-top: auto; padding: 0 20px; color: var(--mtq-accent);
  font-size: 15px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .mtq-shelfcard { transition: none; } .mtq-shelfcard:hover { transform: none; } }

/* == MTQ HOME SHELF CARDS 2UP == */
@media (max-width: 640px) {
  .mtq-shelfgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mtq-shelfcard { padding-bottom: 16px; gap: 11px; }
  .mtq-shelfcard__meta { flex-direction: column; gap: 2px; padding: 0 14px; font-size: 10.5px; letter-spacing: .1em; }
  .mtq-shelfcard__name { font-size: 19px !important; padding: 0 14px; }
  .mtq-shelfcard__from { padding: 0 14px; font-size: 14px; }
}

/* == MTQ HOME EYEBROW v1 == */
/* 🔴 The de-boxing rules that lived here were REPLACED by MTQ HOME SECTION NUMBERS v1 below.
   They are gone rather than commented out: their selector carried an extra `section`, so it
   out-specified the replacement and kept the hardcoded digit visible next to the counter ("01 ·02").
   Two rules on one element is the bug — leaving the loser in place only hides it until someone
   re-orders the file. Only the label rule below survives; it styles the words, not the number. */
body.home section > div:first-child > span:nth-child(2) { color: #8A909E !important; font-size: 12px !important; }

/* the separator between the cards and the breakdown */
.mtq-shelves__split { margin-top: clamp(46px, 6vw, 72px); }
.mtq-home-eyebrow { display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: #8A909E; }
.mtq-home-eyebrow__n::after { content: " \00b7"; color: #C9CDD6; }
.mtq-home-eyebrow__r { flex: 1; min-width: 20px; height: 1px; background: #E4E6EB; }
.mtq-shelves__splith { font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.032em;
  margin: 16px 0 0; max-width: 22ch; }
.mtq-shelves__splitp { color: #5A6070; margin: 12px 0 0; font-size: 16px; }

/* == MTQ HOME SECTION NUMBERS v1 == */
/* 🔴 Numbered by a CSS COUNTER, in DOM order. They were hardcoded per block and fell out of sequence
   as soon as the blocks were reordered; a counter cannot. The original digits are still in the
   markup for anything that does not run CSS — they are hidden, not deleted. */
body.home { counter-reset: mtqsec; }
body.home span[style*="width:30px"][style*="height:30px"],
body.home .mtq-home-eyebrow__n {
  width: auto !important; height: auto !important;
  background: none !important; border: 0 !important;
  color: #8A909E !important; display: inline !important;
  place-items: unset !important; padding: 0 !important;
  font-size: 0 !important;                 /* hide the hardcoded digits */
  counter-increment: mtqsec;
}
body.home span[style*="width:30px"][style*="height:30px"]::before,
body.home .mtq-home-eyebrow__n::before {
  content: counter(mtqsec, decimal-leading-zero) " \00b7";
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .16em; color: #8A909E;
}
body.home span[style*="width:30px"][style*="height:30px"]::after,
body.home .mtq-home-eyebrow__n::after { content: none; }

/* == MTQ PDP TITLE FIT v1 == */
/* Each line is one line. The size is chosen by script — see theme.js — because the right size
   depends on the length of the words, which CSS cannot measure. */
body.single-product .mtq-pdp-info h1 > span { white-space: nowrap; display: block; }
/* 🔴 A title with NO "|" becomes ONE span, and the nowrap above then forbids it from wrapping
   at all — so the auto-fit in theme.js shrinks it to its 22px floor and it STILL runs off the
   page. Measured 2026-08-27 at 390px: "Smart Kids WHY? — Questions and Answers About Our
   Amazing World" pushed the page 421px sideways, and "Greatest Motivational Quotes Bundle"
   100px, both stuck at 22px while the word-search titles sat at a comfortable 40px.
   The nowrap is right for a DELIBERATE segment: it keeps "Word Search" off two lines. It is
   wrong for an unsplit title, which has no chosen break points and must be free to wrap.
   :only-child draws exactly that distinction, and it protects every future product too —
   a new book with a long name can no longer break the page just by existing.
   Daniel, 2026-08-27: "it just goes off screen or makes the title extremely small". */
body.single-product .mtq-pdp-info h1 > span:only-child { white-space: normal; }

/* == MTQ PDP CTA CARD ALIGN v1 == */
/* Daniel, 2026-08-24: "the add to cart and buy complete set are misssaligned."
   MEASURED: card inner width 309px, cart button 296.2px, set link 309px. The 12.8px shortfall is
   exactly WooCommerce's own `form.cart { display:flex; gap:.8rem; flex-wrap:wrap }` - its `.button`
   is `flex: 1 1 240px`, wraps to its own line, and still gives up one gap. Stacking the form's
   children in a column takes the gap out of the width sum instead of fighting it with a number. */
body.single-product .mtq-cta__card form.cart {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 12px !important;
  margin: 18px 0 0 !important;
}
/* the stepper keeps its own size - stretching a - 1 + control to full width looks broken */
body.single-product .mtq-cta__card form.cart .quantity { align-self: flex-start; margin: 0 !important; }
body.single-product .mtq-cta__card form.cart .button,
body.single-product .mtq-cta__card .single_add_to_cart_button {
  flex: 0 0 auto !important; width: 100% !important; margin: 0 !important;
}
body.single-product .mtq-cta__set {
  width: 100%; box-sizing: border-box; margin-top: 12px;
}
/* the saving now sits inside the price row, so its stacking margin has to go or it drops the
   baseline of the whole row */
body.single-product .mtq-cta__save { margin-top: 0 !important; align-self: center; }

/* == MTQ PDP REFERENCE SECTIONS v1 == */
/* Daniel, 2026-08-24: the reference page's structure — an opening argument, who it is for, how it
   reads, and a FAQ. Four new sections plus a shared section-mark, in our palette and our rules. */

/* ---- the shared section mark ------------------------------------------------
   🔴 NUMBERED BY COUNTER, NOT BY HAND. Every section on this page hides itself when its field is
   unwritten, so the visible set differs per book — Volume 1 shows nine, a book with no gift copy
   shows seven. A hardcoded number is therefore wrong for most of the catalogue the moment it is
   typed. The markup prints "01" for no-CSS/no-JS readers; the counter renumbers what is rendered. */
body.single-product .mtq-secmark { display: flex; align-items: center; gap: 12px; }
/* The mark is a RULE, not a number — the same 26x2 navy line every other section on this page
   already uses (see MTQ PDP EYEBROW RULES v1). The markup still prints "01" for anything that does
   not run CSS; `font-size: 0` hides it here rather than deleting information from the HTML. */
body.single-product .mtq-secmark__n {
  flex: none; width: 26px; height: 2px; background: var(--pdp-mark);
  border: 0; padding: 0; font-size: 0; line-height: 0; align-self: center;
}
body.single-product .mtq-secmark__t {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: #1B4079;
}
body.single-product .mtq-secmark__r { flex: 1; min-width: 20px; height: 1px; background: #E4E6EB; }
body.single-product .mtq-secmark__x {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #8A909E;
  white-space: nowrap;
}
body.single-product .mtq-sech {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 38px);
  font-weight: 600; letter-spacing: -.032em; margin: 18px 0 0; max-width: 22ch;
  text-wrap: balance;
}

/* ---- 1. the opening argument ---------------------------------------------- */
body.single-product .mtq-hook__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); margin-top: 22px;
}
@media (min-width: 900px) {
  body.single-product .mtq-hook__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
body.single-product .mtq-hook__lead {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.22; margin: 0;
  text-wrap: balance;
}
body.single-product .mtq-hook__p {
  font-size: clamp(16px, 1vw + 12.6px, 17.5px); line-height: 1.66; color: #3C4250;
  margin: 18px 0 0; max-width: 56ch; text-wrap: pretty;
}
body.single-product .mtq-hook__fig { margin: 0; }
body.single-product .mtq-hook__fig img {
  width: 100%; height: auto; display: block; border: 1px solid #E4E6EB;
}

/* ---- 2. who it is for ------------------------------------------------------ */
body.single-product .mtq-who__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 0 clamp(20px, 3vw, 40px); margin-top: 26px;
  border-top: 1px solid #14161A;
}
body.single-product .mtq-who__item { padding: 24px 0; border-bottom: 1px solid #E4E6EB; }
body.single-product .mtq-who__h {
  font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600;
  letter-spacing: -.026em; margin: 0;
}
body.single-product .mtq-who__b {
  font-size: 15.5px; line-height: 1.6; color: #5A6070; margin: 10px 0 0;
}
body.single-product .mtq-who__foot {
  font-size: 16px; color: #14161A; margin: 24px 0 0; font-weight: 500;
}

/* ---- 3. how it reads ------------------------------------------------------- */
body.single-product .mtq-reads__lead {
  font-size: clamp(17px, 1.2vw + 13px, 20px); line-height: 1.6; color: #3C4250;
  margin: 16px 0 0; max-width: 52ch; text-wrap: pretty;
}
/* (How-it-reads v1 rules removed — superseded by MTQ PDP READS LAYOUT v2) */

/* ---- 4. the FAQ ------------------------------------------------------------ */
/* <details> so it works with JavaScript off and stays keyboard-navigable. */
body.single-product .mtq-faq__list { margin-top: 26px; border-top: 1px solid #14161A; }
body.single-product .mtq-faq__item { border-bottom: 1px solid #E4E6EB; }
body.single-product .mtq-faq__q {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
  font-family: 'Space Grotesk', sans-serif; font-size: 17.5px; font-weight: 600;
  letter-spacing: -.022em;
}
body.single-product .mtq-faq__q::-webkit-details-marker { display: none; }
body.single-product .mtq-faq__q::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid #1B4079; border-bottom: 2px solid #1B4079;
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
body.single-product .mtq-faq__item[open] .mtq-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
body.single-product .mtq-faq__q:focus-visible { outline: 2px solid #1B4079; outline-offset: 3px; }
body.single-product .mtq-faq__a p {
  font-size: 16px; line-height: 1.66; color: #3C4250; margin: 0 0 20px; max-width: 62ch;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  body.single-product .mtq-faq__q::after { transition: none; }
}

/* == MTQ PDP READS LAYOUT v2 == */
/* Daniel, 2026-08-24: "I like it how it has a short description and then has the numbers and the
   texts move to the side". v1 stacked the number ON TOP of each heading in three side-by-side
   columns. The reference does the opposite and it is better: ONE column of rows, each row a 64px
   number beside its text, hairline between. The eye reads a list, not three posters.

   Taken from the reference's own rule: .big-list li { grid-template-columns: 64px 1fr }.
   The section itself is two columns — image beside the list — collapsing to one on a phone with
   the image FIRST, which is also what the reference does (.img-tile { order:-1 }). */

body.single-product .mtq-reads__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; margin-top: 26px;
}
@media (min-width: 900px) {
  body.single-product .mtq-reads__cols { grid-template-columns: .95fr 1.05fr; }
}
/* image first on a phone, beside the list on a desktop */
body.single-product .mtq-reads__fig { margin: 0; order: -1; }
body.single-product .mtq-reads__fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid #E4E6EB; border-radius: 6px;
}

body.single-product .mtq-reads__grid {
  display: block; margin: 0; padding: 0; list-style: none;
}
body.single-product .mtq-reads__item {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  padding: 24px 0; border-top: 1px solid #E4E6EB;
  /* v1 put a navy rule on top of every item; the list only needs separators */
  border-bottom: 0;
}
body.single-product .mtq-reads__item:first-child { border-top: 0; padding-top: 0; }
body.single-product .mtq-reads__n {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: #1B4079; text-align: left;
}
body.single-product .mtq-reads__h {
  font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; margin: 0 0 5px;
}
body.single-product .mtq-reads__b {
  font-size: 15.5px; line-height: 1.55; color: #4A5568; margin: 0; text-wrap: pretty;
}

/* ---- section images on the sections that gained one ------------------------ */
body.single-product .mtq-secfig { margin: clamp(22px, 3vw, 34px) 0 0; }
body.single-product .mtq-secfig img {
  width: 100%; height: auto; display: block;
  border: 1px solid #E4E6EB; border-radius: 6px;
}
body.single-product .mtq-secfig figcaption {
  font-size: 13px; color: #8A909E; margin-top: 10px; line-height: 1.5;
}
/* on the two-column sections the picture sits beside the copy rather than under it */
body.single-product .mtq-gift__cols,
body.single-product .mtq-contents__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 48px); align-items: center;
}
@media (min-width: 900px) {
  body.single-product .mtq-gift__cols     { grid-template-columns: 1.05fr .95fr; }
  body.single-product .mtq-contents__cols { grid-template-columns: 1.05fr .95fr; }
}

/* == MTQ PDP SPECS NO PHANTOM CELL v1 == */
/* 🔴 A ::before generated on a display:grid element IS A GRID ITEM. The eyebrow's decorative rule
   used to land on `.mtq-pdp-info > div:first-of-type`, which is the eyebrow on a series book and
   the SPEC GRID on a standalone one — so standalone books rendered an empty first cell and pushed
   every spec one place along. The selector above is now pinned away from it; this is the backstop
   in case another positional rule ever finds its way here. */
body.single-product .mtq-specs::before,
body.single-product .mtq-specs::after { content: none !important; }


/* == PDP DESKTOP — THE SPEC BOXES SIT AFTER THE BUY DECISION ==============================
   Daniel, 2026-08-24: "on desktop mtq4 version can you put the 4 boxes with 100 puzzles large
   print etc under the add to cart section?"

   🔴 REORDERED VISUALLY, NOT IN THE MARKUP. The short rule above the title is drawn by
   `.mtq-pdp-info > div:first-of-type:not(.mtq-specs):not(.mtq-order)::before`. Moving .mtq-specs
   in the template changes which element is first-of-type and hands that decoration to the wrong
   block — the same trap that put an empty cell at the START of the spec grid on standalone books
   earlier today. `order` leaves the DOM alone, so every positional selector on this column keeps
   meaning what it meant.

   ⚠️ EVERY child is given an explicit order. In a flex container anything left at the default 0
   jumps ahead of everything numbered, so a new section added without an order would appear at the
   TOP of the column rather than where it was written.

   Mobile is deliberately untouched — he asked for desktop. 768px is where the two-column grid
   (auto-fit, minmax(340px)) actually forms, so the reorder begins exactly when the layout does. */
@media (min-width: 768px) {
  body.single-product .mtq-pdp-info { display: flex; flex-direction: column; }
  body.single-product .mtq-pdp-info > *           { order: 1; }   /* eyebrow, h1, blurb, chips */
  body.single-product .mtq-pdp-info > .mtq-order  { order: 2; }   /* price + add to cart + trust */
  body.single-product .mtq-pdp-info > .mtq-specs  { order: 3; }   /* the four boxes, now below it */
  body.single-product .mtq-pdp-info > .mtq-pdpacc { order: 4; }   /* delivery / returns accordions */
}


/* == ABOUT THIS BOOK — TWO PASSES, EACH WITH ITS OWN PICTURE ==============================
   Daniel, 2026-08-24, naming the hook as the model: "text on the left and the image on the right …
   like the The real reason this book exists section." So these are the hook's own numbers —
   1.15fr / .85fr from 900px — rather than a third set that would drift from the other two.
   Only ever applied when a book has BOTH About pictures; see sec-04.php. */
body.single-product .mtq-about__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px);
  align-items: start; padding-top: 44px;
}
@media (min-width: 900px) {
  body.single-product .mtq-about__cols { grid-template-columns: 1.15fr .85fr; }
}
/* The facts panel is a narrow list of short rows. Run full width it reads as a stretched table,
   so it keeps roughly the copy column's measure underneath the two passes. */
body.single-product .mtq-about__facts { margin-top: clamp(28px, 3.5vw, 44px); max-width: 620px; }

/* The picture lifted out of the description. It arrives as the description's own <figure> (caption
   and all) or as a bare <img>, so both shapes are styled here rather than assuming one. */
body.single-product .mtq-about__fig figure { margin: 0; }
body.single-product .mtq-about__fig img {
  display: block; width: 100%; height: auto; border: 1px solid #E4E6EB; border-radius: 6px;
}
body.single-product .mtq-about__fig figcaption {
  font-size: 13.5px; line-height: 1.5; color: #6B7280; margin-top: 11px;
  padding-top: 9px; border-top: 1px solid #E4E6EB; text-wrap: pretty;
}


/* == PDP STAR RATING, ABOVE THE TITLE =====================================================
   Renders only when the product has REAL approved reviews (see mtq_real_rating) — never from
   WooCommerce's cached count, which on this site claims reviews nine products do not have. */
body.single-product .mtq-pdp-rating {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; flex-wrap: wrap;
}
body.single-product .mtq-pdp-rating__n {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: #14161A;
}
body.single-product .mtq-pdp-rating__c {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #8A909E; text-decoration: none;
  border-bottom: 1px solid #E4E6EB;
}
body.single-product .mtq-pdp-rating__c:hover { color: #1B4079; border-bottom-color: #1B4079; }


/* == PDP RATING ROW — THE HOUSE STAR TREATMENT ==============================================
   Daniel, 2026-08-25: "use the star rating and number design ... as we have in the What readers
   say" section. Those are the values from sec-05.php's header row, scaled down for a line that
   sits above an h1 rather than opening a section: same navy, same .14em tracking, same grey count.
   WooCommerce's own star sprite is no longer used here — one page, one way of drawing a rating. */
body.single-product .mtq-pdp-rating__s {
  color: #1B4079; font-size: 15px; letter-spacing: .14em; line-height: 1;
}
body.single-product .mtq-pdp-rating__n {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: -.02em; color: #14161A;
}
body.single-product .mtq-pdp-rating__c {
  font-size: 13px; color: #8A909E; text-decoration: none; border-bottom: 1px solid #E4E6EB;
  font-family: inherit; letter-spacing: normal; text-transform: none;
}
body.single-product .mtq-pdp-rating__c:hover { color: #1B4079; border-bottom-color: #1B4079; }

/* Daniel, 2026-08-25: "remove the click to zoom from the product page hero image" — then, ten
   seconds later, "actually hide it". Hidden rather than deleted: one line to put back, and the
   markup keeps its documented note about why the badge must stay pointer-events:none. */
body.single-product .mtq-zoomhint { display: none !important; }


/* == PDP GALLERY — 25% TALLER ON DESKTOP ===================================================
   Daniel, 2026-08-25: "make the main product container 25 taller so the image inside of it can be
   larger? the thumbnails below it can be the same size."

   Measured, not guessed. The frame's height is simply the cover plus its 52px padding:
     324 + 52 + 52 = 428.  For 428 x 1.25 = 535 the cover must be 431 tall, which at its real
     791x1024 aspect is 333 wide. Hence 250px -> 333px, and the frame follows.

   `!important` because the 250px cap is an INLINE style on the element — a stylesheet rule cannot
   beat it otherwise, and overriding here keeps the change to one reversible line instead of two
   edits buried in the markup.

   The thumbnails are not inside .mtq-gal__slide and are deliberately untouched. */
@media (min-width: 900px) {
  body.single-product .mtq-gal__slide img,
  body.single-product .mtq-gal__slide > div[style*="aspect-ratio"] {
    max-width: 333px !important;
  }
}


/* == COMPLETE-SET IMAGE — 25% SMALLER ON DESKTOP ============================================
   Daniel, 2026-08-25: "the image for the Complete set on the product page is too big, probably
   25%, make it to best practices."
   Measured: 526 x 753 on desktop inside an 1180px section. That is a supporting image under a
   cross-sell band, not a hero, and 753px tall is over half a laptop screen. 526 x 0.75 = 395,
   which at the file's real 715x1024 shape gives 395 x 566.
   Phone is deliberately untouched — 351px in a 390px viewport is already the right proportion. */
@media (min-width: 900px) {
  body.single-product #set img { max-width: 395px !important; height: auto; }
}


/* == SHOP CARD RATING — matches the product page ============================================
   Daniel, 2026-08-25. Same navy, same .14em tracking, same Space Grotesk number as the row above
   the product title — one step down in size because it sits on a card in a grid rather than
   under an h1. WooCommerce's .star-rating sprite is no longer emitted in the loop at all. */
.woocommerce ul.products li.product .mtq-loop-rating,
.mtq-loop-rating {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 6px 0 2px;
}
.mtq-loop-rating__s {
  color: #1B4079; font-size: 13px; letter-spacing: .14em; line-height: 1;
}
.mtq-loop-rating__n {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: -.02em; color: #14161A;
}
.mtq-loop-rating__c { font-size: 11px; color: #8A909E; }


/* == SHOP CARD STARS — the house treatment ==================================================
   Daniel, 2026-08-25: "use the same star desing on the show page." Same navy and same .14em
   tracking as the row above the product title, at card size. WooCommerce's .star-rating sprite is
   no longer emitted here, so its rule above is dead and has been removed rather than left to look
   live. */
.mtq-book__rstars { color: #1B4079; font-size: 13px; letter-spacing: .14em; line-height: 1; }