/*
 * Qooboids front-end styles.
 *
 * 1. Fonts and tokens (from the design system tokens.css)
 * 2. Type classes
 * 3. Components (components/bundle.css)
 * 4. Site chrome (site.css: header, footer, page furniture, forms, notices)
 * 5. Theme additions: base, WordPress blocks, home sections, shop, product,
 *    404, WooCommerce Blocks (basket, checkout, account), motion and focus.
 *
 * Every value is a token except the motion curve and a few layout widths.
 * theme.json carries the palette, type scale and spacing for the editor.
 */

/* ---------- 1. Fonts and tokens ---------- */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root, [data-theme="light"] {
  --surface: #f3ece4;
  --surface-raised: #fffcf8;
  --surface-sunken: #e9dfd3;
  --ink: #16151e;
  --ink-muted: #55505c;
  --ink-subtle: #605a68;
  --line: #dcd2c6;
  --line-control: #857b6f;
  --brand: #5f4585;
  --on-brand: #ffffff;
  --brand-tint: #e9e1f3;
  --accent: var(--print-tangerine);
  --on-accent: #16151e;
  --accent-text: #a94a0d;
  --success-text: #0b6b70;
  --danger-text: #a83a28;
  --focus: #5f4585;
  --print-violet: #8142af;
  --print-pink: #f05d9e;
  --print-blue: #2b6bdd;
  --print-teal: #16afa2;
  --print-green: #4ead52;
  --print-yellow: #f2c43e;
  --print-tangerine: #f07835;
  --print-red: #cb334d;
  --print-black: #252831;
  --print-white: #eae8e1;
  --print-silver: #9ca5b1;
  --print-gold: #c79a46;
  --artwork-light: #ffffff;
  --artwork-dark: #322442;
  --shadow-soft: 0 8px 24px rgba(22,21,30,0.08);
  --shadow-press: 0 3px 0 #16151e;
}
/* The dark theme is opt-in per element (the footer). The page never switches on prefers-color-scheme. */
[data-theme="dark"] {
  --surface: #16151e;
  --surface-raised: #23212e;
  --surface-sunken: #100f16;
  --ink: #f3ece4;
  --ink-muted: #bdb5c9;
  --ink-subtle: #a39cb0;
  --line: #3a3646;
  --line-control: #7a7388;
  --brand: #b9a3dc;
  --on-brand: #16151e;
  --brand-tint: #2e2640;
  --accent: var(--print-tangerine);
  --on-accent: #16151e;
  --accent-text: #f29a5f;
  --success-text: #4dafa8;
  --danger-text: #ff8977;
  --focus: #f3ece4;
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-press: 0 3px 0 rgba(243,236,228,0.4);
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 100px;
  --border-hair: 1px; --border-control: 2px;
  --font-sans: "Poppins", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Type classes ---------- */

.display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; }
.display-lg { font-family: var(--font-sans); font-size: 56px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.display-md { font-family: var(--font-sans); font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
.h1 { font-family: var(--font-sans); font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 16px; line-height: 1.25; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 500; }
.overline { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.callout { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; }
.display-xl, .display-lg, .display-md, .h1, .h2, .h3 { margin: 0; }
.display-xl { font-size: clamp(44px, 8vw, 72px); }
.display-lg { font-size: clamp(36px, 6vw, 56px); }
.display-md { font-size: clamp(30px, 5vw, 40px); }

/* ---------- 3. Components ---------- */

/* Button */
.qb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.25; font-weight: 600;
  background: transparent; color: var(--ink); box-sizing: border-box;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease);
}
.qb-btn--lg { min-height: 56px; padding: 0 var(--space-6); }
.qb-btn--primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-press); }
.qb-btn--build { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-press); }
.qb-btn--secondary { background: transparent; color: var(--ink); }
.qb-btn--text { background: transparent; color: var(--accent-text); border-color: transparent; min-height: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.qb-btn:hover:not(:disabled) { transform: translateY(-1px); }
.qb-btn--primary:hover:not(:disabled) { color: var(--surface); }
.qb-btn--build:hover:not(:disabled) { color: var(--on-accent); }
.qb-btn--secondary:hover:not(:disabled) { background: var(--brand-tint); color: var(--ink); }
.qb-btn--text:hover:not(:disabled) { color: var(--ink); }
.qb-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.qb-btn:disabled, .qb-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-sunken); color: var(--ink-subtle); border-color: var(--line-control); box-shadow: none; }
.qb-btn__icon { display: inline-block; transition: transform 240ms var(--ease); }
.qb-btn:hover:not(:disabled) .qb-btn__icon { transform: translateX(3px); }
.qb-btn:focus-visible, .qb-swatch:focus-visible, .qb-viewer__view:focus-visible, .qb-field__input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
a.qb-btn { text-decoration: none; }

/* Tag */
.qb-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-hair) solid transparent; white-space: nowrap; }
.qb-tag--neutral { background: var(--surface-sunken); color: var(--ink); }
.qb-tag--brand { background: var(--brand-tint); color: var(--ink); }
.qb-tag--accent { background: var(--accent); color: var(--on-accent); }
.qb-tag--spec { background: transparent; color: var(--ink-subtle); border-color: var(--line-control); }

/* ColourSwatch / ColourPicker */
.qb-swatch { display: inline-flex; padding: 3px; border: var(--border-control) solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: transform 240ms var(--ease); }
.qb-swatch:hover:not(:disabled) { transform: translateY(-2px); }
.qb-swatch.is-selected, .qb-swatch[aria-checked="true"] { border-color: var(--ink); }
.qb-swatch__chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9px; box-shadow: inset 0 0 0 var(--border-hair) var(--line-control); }
.qb-picker { display: flex; flex-direction: column; gap: var(--space-3); }
.qb-picker__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); color: var(--ink); }
.qb-picker__name { color: var(--ink-subtle); }
.qb-picker__grid { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ChestTextField */
.qb-field { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.qb-field__row { display: flex; gap: var(--space-4); align-items: stretch; }
.qb-field__input { flex: 1 1 auto; min-width: 0; resize: none; padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; box-sizing: border-box; }
.qb-field__input.is-invalid { border-color: var(--danger-text); }
.qb-field__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.qb-field__hint { color: var(--ink-muted); }
.qb-field__error { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--danger-text); }
.qb-field__count { color: var(--ink-subtle); white-space: nowrap; }
.qb-plate { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 112px; padding: var(--space-3); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 var(--border-hair) var(--line-control), var(--shadow-soft); overflow: hidden; box-sizing: border-box; }
.qb-plate__line { font-family: var(--font-sans); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28); max-width: 100%; white-space: nowrap; }

/* ViewerFrame */
.qb-viewer { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.qb-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; background: var(--surface-sunken); border-radius: var(--radius-lg); overflow: hidden; }
.qb-viewer__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.qb-viewer__dim { position: absolute; left: var(--space-5); top: 12%; bottom: 12%; display: flex; flex-direction: row-reverse; align-items: stretch; gap: var(--space-2); color: var(--ink-subtle); }
.qb-viewer__dim-label { align-self: center; max-width: 72px; }
.qb-viewer__dim-line { position: relative; width: 9px; border-top: var(--border-hair) solid currentColor; border-bottom: var(--border-hair) solid currentColor; }
.qb-viewer__dim-line::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; border-left: var(--border-hair) solid currentColor; }
.qb-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.qb-viewer__views { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); }
.qb-viewer__view { min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-sans); }
.qb-viewer__view.is-selected { background: var(--ink); color: var(--surface); }
.qb-viewer__hint { color: var(--ink-subtle); }

/* ProductCard */
.qb-card { display: flex; flex-direction: column; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 240ms var(--ease), transform 240ms var(--ease); }
.qb-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.qb-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--surface-sunken); }
.qb-card__media img { display: block; height: 100%; width: 100%; object-fit: contain; }
.qb-card__link { display: flex; width: 100%; height: 100%; }
.qb-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.qb-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qb-card__title { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.3; font-weight: 600; }
.qb-card__name { color: inherit; text-decoration: none; }
.qb-card__name:hover { color: var(--brand); }
.qb-card__name:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.qb-card__desc { margin: 0; color: var(--ink-muted); }
.qb-card__dots { display: flex; gap: var(--space-2); }
.qb-card__dot { width: 16px; height: 16px; border-radius: 6px; box-shadow: inset 0 0 0 var(--border-hair) var(--line-control); }
.qb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }
.qb-card__price { color: var(--ink); font-weight: 600; }
.qb-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); border: var(--border-hair) solid var(--line); }

/* ConfiguratorPanel */
.qb-panel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.qb-panel__head { display: flex; flex-direction: column; gap: var(--space-1); }
.qb-panel__head .h2 { margin: 0; }
.qb-panel__eyebrow { margin: 0; color: var(--brand); }
.qb-panel__step { padding-top: var(--space-5); border-top: var(--border-hair) solid var(--line); }
.qb-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border-hair) solid var(--line); flex-wrap: wrap; }
.qb-panel__sum { display: flex; flex-direction: column; gap: var(--space-1); }
.qb-panel__sum .callout { color: var(--ink-subtle); }

/* ---------- 4. Site chrome ---------- */

.qs-page, body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); min-height: 100%; }
.qs-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.qs-section { padding-bottom: var(--space-9); }
.qs-lnk { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.qs-lnk:hover { color: var(--brand); }
.qs-sr, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qs-ico { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.qs-muted { color: var(--ink-muted); }
.qs-subtle { color: var(--ink-subtle); }
.qs-brand { color: var(--brand); }
.qs-render { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Header */
.sh { position: relative; z-index: 20; background: var(--surface); border-bottom: var(--border-hair) solid var(--line); font-family: var(--font-sans); color: var(--ink); }
.sh__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; min-height: 80px; }
.sh__brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.sh__word { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.sh__by { display: flex; align-items: center; gap: 6px; padding-top: 6px; color: var(--ink-subtle); }
.sh__by img { display: block; height: 20px; width: auto; }
.sh__right { display: flex; align-items: center; gap: 8px 28px; }
.sh__nav { display: flex; align-items: center; gap: 4px 28px; }
.sh__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: var(--border-control) solid transparent; box-sizing: border-box; }
.sh__link:hover { color: var(--brand); }
.sh__link.is-active, .sh__link[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.sh__tools { display: flex; align-items: center; gap: 8px; }
.sh__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; border: 0; background: transparent; cursor: pointer; }
.sh__icon:hover { background: var(--brand-tint); }
.sh__basket { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; box-sizing: border-box; }
.sh__basket:hover { background: var(--brand-tint); color: var(--ink); }
.sh__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; box-sizing: border-box; }
.sh__menu { display: none; }
.sh__menu .sh__menu-close { display: none; }
.sh__menu[aria-expanded="true"] .sh__menu-open { display: none; }
.sh__menu[aria-expanded="true"] .sh__menu-close { display: block; }
.sh__secure { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); }
@media (max-width: 1000px) {
  .sh__menu { display: inline-flex; }
  .sh__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; background: var(--surface); border-bottom: var(--border-hair) solid var(--line); box-shadow: var(--shadow-soft); }
  .sh__nav.is-open { display: flex; }
  .sh__link { min-height: 56px; font-size: 18px; border-bottom: var(--border-hair) solid var(--line); }
  .sh__link.is-active, .sh__link[aria-current="page"] { border-bottom-color: var(--line); }
  .sh__right { gap: 8px; }
}
@media (max-width: 520px) {
  .sh__bar { min-height: 64px; }
  .sh__word { font-size: 22px; }
  .sh__by { display: none; }
  .sh__basket { padding: 0 6px 0 12px; }
  .sh__basket-label { display: none; }
  .sh__secure-label { display: none; }
}

/* Footer (sits in the Midnight theme) */
.sf { background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
.sf__qoob { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 56px 0 48px; border-bottom: var(--border-hair) solid var(--line); }
.sf__intro { display: flex; flex-direction: column; gap: 16px; max-width: 580px; }
.sf__made { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf__made img { display: block; height: 26px; width: auto; }
.sf__intro p { margin: 0; color: var(--ink-muted); }
.sf__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sf__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 48px 0; }
@media (max-width: 760px) { .sf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf__col { display: flex; flex-direction: column; gap: 4px; }
.sf__col h2 { margin: 0 0 8px; color: var(--ink-subtle); }
.sf__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: none; font-size: 15px; font-family: var(--font-sans); cursor: pointer; text-align: left; }
.sf__link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.sf__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 0 40px; border-top: var(--border-hair) solid var(--line); color: var(--ink-subtle); }
.sf__base p { margin: 0; max-width: 620px; }
.sf__pay { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: var(--border-hair) solid var(--line-control); border-radius: var(--radius-pill); color: var(--ink); }
.sf .qb-btn--secondary { color: var(--ink); border-color: var(--ink); }
.sf a:focus-visible, .sf button:focus-visible { outline-color: var(--focus); }

/* Page furniture */
.qs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 24px 0 0; list-style: none; color: var(--ink-subtle); }
.qs-crumbs a { color: var(--ink-subtle); text-decoration: underline; text-underline-offset: 3px; }
.qs-crumbs a:hover { color: var(--brand); }
.qs-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-control); }

.qs-card { background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); box-sizing: border-box; }
.qs-well { background: var(--surface-sunken); border-radius: var(--radius-md); }
.qs-band { background: var(--surface-sunken); border-radius: var(--radius-lg); box-sizing: border-box; }
.qs-band--brand { background: var(--print-violet); color: #ffffff; }
.qs-band--brand .qs-band__muted { color: #f1e9f8; }

.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.qs-grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 640px) {
  .qs-grid, .qs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qs-grid .qb-card__body { padding: 12px; gap: 8px; }
  .qs-grid .qb-card__title { font-size: 16px; }
  .qs-grid .qb-card__desc { display: none; }
  .qs-grid .qb-card__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .qs-grid .qb-card__price { font-size: 16px; }
  .qs-grid .qb-btn { min-height: 44px; padding: 0 12px; }
}
.qs-grid .qb-card__foot { flex-wrap: wrap; }

/* Checkout steps */
.qs-steps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.qs-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-subtle); }
.qs-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--border-control) solid var(--line-control); font-family: var(--font-mono); font-size: 13px; box-sizing: border-box; color: var(--ink-subtle); }
.qs-steps li.is-done { color: var(--ink); }
.qs-steps li.is-done .qs-steps__n { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.qs-steps li.is-current { color: var(--ink); font-weight: 600; }
.qs-steps li.is-current .qs-steps__n { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }

/* Forms */
.qs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.qs-span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .qs-form-grid { grid-template-columns: minmax(0, 1fr); } }
.qs-input { min-height: 52px; box-sizing: border-box; width: 100%; }
select.qs-input { cursor: pointer; }
.qs-opt { color: var(--ink-subtle); font-weight: 400; }
.qs-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.qs-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }
.qs-option { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; box-sizing: border-box; }
.qs-option input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }
.qs-option.is-selected { border-color: var(--ink); background: var(--brand-tint); }
.qs-err { display: inline-flex; align-items: center; gap: 6px; color: var(--danger-text); }
.qs-input.is-invalid { border-color: var(--danger-text); }

/* Notices */
.qs-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-sm); border: var(--border-hair) solid var(--line); background: var(--surface-raised); color: var(--ink); }
.qs-notice p { margin: 0; }
.qs-notice--success .qs-ico { color: var(--success-text); }
.qs-notice--error { border: var(--border-control) solid var(--danger-text); }
.qs-notice--error .qs-ico { color: var(--danger-text); }
.qs-notice--info .qs-ico { color: var(--brand); }
.qs-notice--info { border-color: var(--brand); background: var(--brand-tint); }

/* Accordion and FAQs */
.qs-acc { border-top: var(--border-hair) solid var(--line); }
.qs-acc:last-child { border-bottom: var(--border-hair) solid var(--line); }
.qs-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--ink); }
.qs-acc > summary::-webkit-details-marker { display: none; }
.qs-acc > summary .qs-ico { transition: transform 240ms var(--ease); }
.qs-acc[open] > summary .qs-ico { transform: rotate(45deg); }
.qs-acc__body { padding: 0 0 24px; color: var(--ink-muted); max-width: 680px; }
.qs-acc__body p { margin: 0 0 12px; }

/* Quantity */
.qs-qty { display: inline-flex; align-items: center; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-pill); background: var(--surface-raised); }
.qs-qty button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--radius-pill); }
.qs-qty button:hover { background: var(--brand-tint); }
.qs-qty output { min-width: 28px; text-align: center; font-weight: 600; }

/* Filters */
.qs-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.qs-chip:hover { background: var(--brand-tint); }
.qs-chip.is-on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.qs-chip__dot { width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-control); }
.qs-filter { display: flex; flex-direction: column; gap: 4px; }
.qs-filter > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-weight: 600; font-size: 16px; }
.qs-filter > summary::-webkit-details-marker { display: none; }
.qs-filter[open] > summary .qs-ico { transform: rotate(180deg); }
.qs-fopt { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font-size: 15px; }
.qs-fopt input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; flex: none; }
.qs-fopt__dot { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-control); flex: none; }
.qs-fopt__n { margin-left: auto; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; }

/* Status pills */
.qs-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; border: var(--border-hair) solid var(--line-control); color: var(--ink); white-space: nowrap; }
.qs-status--live { background: var(--brand-tint); border-color: transparent; }
.qs-status--done { color: var(--success-text); border-color: var(--success-text); }

/* Tables */
.qs-table-box { overflow-x: auto; }
.qs-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.qs-table th { text-align: left; padding: 12px 16px; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; font-weight: 400; border-bottom: var(--border-hair) solid var(--line); }
.qs-table td { padding: 18px 16px; border-bottom: var(--border-hair) solid var(--line); vertical-align: middle; }

/* Drawer, cookie banner */
.qs-drawer { display: flex; flex-direction: column; gap: 24px; width: 420px; max-width: 100%; padding: 28px; background: var(--surface-raised); border-left: var(--border-hair) solid var(--line); box-shadow: var(--shadow-soft); box-sizing: border-box; }
.qs-scrim { background: rgba(22, 21, 30, 0.45); }

/* ---------- 5. Theme additions ---------- */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
body { margin: 0; }
img, video, svg, canvas { max-width: 100%; height: auto; }
img { display: block; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main, .wp-site-blocks > .qs-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.qs-part { display: block; }
main.qs-wrap { width: 100%; }
.qs-main-pad { padding-top: 24px; padding-bottom: 96px; }
.qs-column { max-width: 720px; }
.qs-main-pad .wp-block-post-content > * + * { margin-block-start: 16px; }
.qs-main-pad .wp-block-post-content h1 { margin: 24px 0 8px; }
.qs-main-pad .wp-block-post-content h2 { margin-top: 40px; }
.qs-main-pad .wp-block-post-content h3 { margin-top: 32px; }
.qs-main-pad .wp-block-post-content ul, .qs-main-pad .wp-block-post-content ol { padding-left: 24px; }
.qs-main-pad .wp-block-post-content img { border-radius: var(--radius-md); }
.qs-main-pad .wp-block-post-content .wp-block-image { margin: 24px 0; }
.qs-main-pad .wp-block-post-content table { width: 100%; border-collapse: collapse; }
.qs-main-pad .wp-block-post-content th, .qs-main-pad .wp-block-post-content td { padding: 12px 16px; border-bottom: var(--border-hair) solid var(--line); text-align: left; }
.qs-main-pad .wp-block-post-content th { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-subtle); }
.qs-main-pad .wp-block-post-content figure { margin: 0; }
.qs-main-pad .wp-block-post-content details.qs-acc { max-width: none; }
.qs-page-title { margin: 24px 0 8px; font-size: clamp(30px, 5vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
p { margin: 0 0 1em; }
a { color: var(--brand); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
::selection { background: var(--brand-tint); color: var(--ink); }
hr, .wp-block-separator { border: 0; border-top: var(--border-hair) solid var(--line); margin: 32px 0; }
code, kbd, samp { font-family: var(--font-mono); }
.has-mono-font-family { font-family: var(--font-mono); }
.wp-block-separator.is-style-wide { width: 100%; }

/* Core buttons (post content) look like qb-btn */
.wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-press); font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-1px); color: var(--surface); }
.wp-block-button__link:active, .wp-element-button:active { transform: translateY(3px); box-shadow: none; }
.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-qooboids-ghost .wp-block-button__link { background: transparent; color: var(--ink); box-shadow: none; }
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-qooboids-ghost .wp-block-button__link:hover { background: var(--brand-tint); color: var(--ink); }

/* Core search form */
.wp-block-search__inside-wrapper { display: flex; gap: 8px; border: 0; padding: 0; }
.wp-block-search__input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 16px; background: var(--surface-raised); color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 16px; }
.wp-block-search__button { min-height: 52px; padding: 0 24px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-family: var(--font-sans); font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-press); }
.wp-block-search__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }

/* Blog bits (index, archive, single, search) */
.qs-posts { display: grid; gap: 24px; padding: 32px 0 0; }
.qs-posts .wp-block-post { padding: 24px; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.qs-posts .wp-block-post-title { margin: 0 0 8px; font-size: 24px; }
.qs-posts .wp-block-post-date { color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; }
.wp-block-query-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 32px 0; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { background: var(--ink); color: var(--surface); }
.wp-block-post-navigation-link { padding: 8px 0; }
.wp-block-post-terms a { color: var(--brand); }
.wp-block-comments { padding-top: 48px; }
.wp-block-post-comments-form input:not([type="submit"]), .wp-block-post-comments-form textarea { width: 100%; padding: 12px 16px; background: var(--surface-raised); color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 16px; }
.wp-block-post-comments-form input[type="submit"] { min-height: 48px; padding: 0 24px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-press); }

/* Home sections */
.hm-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 96px; }
.hm-hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hm-hero__copy p { margin: 0; }
.hm-hero__lead { max-width: 470px; color: var(--ink-muted); }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.hm-hero__figure { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hm-hero__stage { width: 100%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; }
.hm-hero__picker { width: 100%; max-width: 348px; }
.hm-eyebrow { margin: 0; color: var(--brand); }
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 40px; }
.hm-head__copy { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.hm-head__copy p { margin: 0; }
.hm-head__copy .body-lg { color: var(--ink-muted); }
.hm-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 32px; }
.hm-dots__row { display: flex; gap: 6px; }
.hm-dots__dot { display: block; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-control); }
.hm-dots p { margin: 0; color: var(--ink-muted); }
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.hm-tiles figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-tile { flex: none; width: auto; min-height: 168px; border-radius: 20px; transition: transform 240ms var(--ease); }
.hm-tile:hover { transform: translateY(-4px); }
.hm-tile .qb-plate__line { white-space: pre-line; text-shadow: none; }
.hm-tiles figcaption { color: var(--ink-subtle); }
.hm-more { padding-top: 32px; }
.hm-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.hm-steps li { display: flex; flex-direction: column; overflow: hidden; }
.hm-steps__img { height: 240px; background: var(--surface-sunken); }
.hm-steps__body { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.hm-steps__body .callout { color: var(--ink-subtle); }
.hm-steps__body p { margin: 0; color: var(--ink-muted); }
.hm-band { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: 48px 56px; }
.hm-band__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hm-band__copy p { margin: 0; }
.hm-band__copy .body-lg { max-width: 460px; color: var(--ink-muted); }
.hm-band__copy .callout { color: var(--ink-subtle); }
.hm-band__cta { padding-top: 8px; }
.hm-band__img { flex: 1.4 1 460px; min-width: 0; display: block; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.hm-band__img img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .hm-hero { padding-top: 32px; padding-bottom: 64px; gap: 32px; }
  .hm-band { padding: 32px 24px; }
  .qs-section { padding-bottom: 64px; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hm-tile { min-height: 140px; }
}

/* Shop */
.shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 0 32px; }
.shop-head__copy { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.shop-head__copy p { margin: 0; color: var(--ink-muted); }
.shop-lineup { border-radius: 32px; padding: 32px 24px 0; overflow: hidden; }
.shop-lineup img { width: 100%; height: auto; }
.shop-results { padding: 48px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.shop-build { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; background: var(--brand-tint); border: 1px solid var(--line); border-radius: 20px; min-height: 360px; }
.shop-build__copy { display: flex; flex-direction: column; gap: 12px; }
.shop-build__copy p { margin: 0; }
.shop-build__copy .body-sm { color: var(--ink-muted); }
.shop-build .qb-btn { align-self: flex-start; }

/* WooCommerce product collection grid as qb-cards */
.wc-block-product-template, ul.wc-block-product-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.wc-block-product-template.is-flex-container { display: grid; }
.wc-block-product-template > li, .wc-block-product-template .wc-block-product, .wc-block-product-template li.wc-block-product { width: auto; display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 240ms var(--ease), transform 240ms var(--ease); }
.wc-block-product-template > li:hover, .wc-block-product-template .wc-block-product:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.wc-block-product-template .wc-block-components-product-image, .wc-block-product-template .wp-block-woocommerce-product-image { margin: 0; aspect-ratio: 1 / 1; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; }
.wc-block-product-template .wc-block-components-product-image a { display: flex; width: 100%; height: 100%; }
.wc-block-product-template .wc-block-components-product-image img { width: 100%; height: 100%; object-fit: contain; }
.wc-block-product-template .wc-block-components-product-sale-badge { display: none; }
.wc-block-product-template .wp-block-post-title { margin: 0; padding: 24px 24px 0; font-size: 20px; line-height: 1.3; font-weight: 600; }
.wc-block-product-template .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.wc-block-product-template .wp-block-post-title a:hover { color: var(--brand); }
.wc-block-product-template .wc-block-components-product-price, .wc-block-product-template .wp-block-woocommerce-product-price { padding: 8px 24px 0; font-weight: 600; color: var(--ink); }
.wc-block-product-template .wp-block-read-more { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin: 16px 24px 24px; min-height: 48px; padding: 0 24px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; text-decoration: none; }
.wc-block-product-template .wp-block-read-more:hover { background: var(--brand-tint); }
.wc-block-product-template .wp-block-button, .wc-block-product-template .wc-block-components-product-button { margin: 16px 24px 24px; }
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link { min-height: 48px; }
.wp-block-woocommerce-product-collection .wp-block-query-no-results p { color: var(--ink-muted); }
.wc-block-grid__product-onsale, .wp-block-woocommerce-product-collection .onsale { display: none; }
@media (max-width: 640px) {
  .wc-block-product-template, ul.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wc-block-product-template .wp-block-post-title { padding: 12px 12px 0; font-size: 16px; }
  .wc-block-product-template .wc-block-components-product-price, .wc-block-product-template .wp-block-woocommerce-product-price { padding: 4px 12px 0; }
  .wc-block-product-template .wp-block-read-more { margin: 8px 12px 12px; min-height: 44px; padding: 0 12px; align-self: stretch; }
}

/* Single product */
.pd-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding: 24px 0 96px; }
.pd-gallery { flex: 7 1 520px; min-width: 0; }
.pd-buy { flex: 5 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pd-buy > * { margin: 0; }
.pd-buy .wp-block-post-title { margin: 0; font-size: clamp(30px, 5vw, 40px); line-height: 1.12; letter-spacing: -0.015em; }
.pd-buy .wp-block-woocommerce-product-price, .pd-buy .wc-block-components-product-price { font-size: 24px; font-weight: 600; }
.pd-buy .wp-block-post-excerpt p { margin: 0; color: var(--ink-muted); font-size: 18px; line-height: 1.55; }
.pd-buy .wp-block-post-excerpt__more-text { display: none; }
.pd-vat { color: var(--ink-subtle); }
.pd-gallery .woocommerce-product-gallery, .pd-gallery .wp-block-woocommerce-product-image-gallery { margin: 0; background: var(--surface-sunken); border-radius: var(--radius-lg); overflow: hidden; padding: 16px; }
.pd-gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.pd-gallery .woocommerce-product-gallery__image img, .pd-gallery .woocommerce-product-gallery img { width: 100%; height: auto; object-fit: contain; }
.pd-gallery .flex-control-thumbs { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pd-gallery .flex-control-thumbs li { flex: 0 0 72px; margin: 0; }
.pd-gallery .flex-control-thumbs img { border-radius: var(--radius-sm); border: var(--border-control) solid transparent; cursor: pointer; opacity: 0.7; }
.pd-gallery .flex-control-thumbs img.flex-active, .pd-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--ink); }
.pd-gallery .woocommerce-product-gallery__trigger { display: none; }
.pd-buy form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.pd-buy form.cart .quantity { display: inline-flex; align-items: center; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-pill); background: var(--surface-raised); }
.pd-buy form.cart .quantity .qty { width: 72px; min-height: 44px; border: 0; background: transparent; text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink); }
.pd-buy form.cart .quantity .qty:focus-visible { outline-offset: 0; border-radius: var(--radius-pill); }
.pd-buy form.cart .single_add_to_cart_button, .pd-buy .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button, .pd-buy .wc-block-components-button { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 32px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-press); font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.pd-buy form.cart .single_add_to_cart_button:hover { transform: translateY(-1px); }
.pd-buy form.cart .single_add_to_cart_button:active { transform: translateY(3px); box-shadow: none; }
.pd-buy .stock { margin: 0; color: var(--ink-muted); font-size: 14px; }
.pd-buy .stock.out-of-stock { color: var(--danger-text); }
.pd-make { align-self: flex-start; }
.pd-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pd-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.pd-desc { max-width: 720px; padding-bottom: 48px; }
.pd-desc p { color: var(--ink-muted); font-size: 18px; line-height: 1.55; }
.pd-spec { display: flex; flex-direction: column; gap: 16px; padding: 28px; max-width: 720px; }
.pd-spec h2 { margin: 0; }
.pd-spec dl { margin: 0; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 24px; }
.pd-spec dt { color: var(--ink-subtle); }
.pd-spec dd { margin: 0; }
.pd-more { padding: 96px 0; }
.pd-more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 32px; }
.pd-more__head h2 { margin: 0; }
.pd-breadcrumbs .woocommerce-breadcrumb, .woocommerce-breadcrumb.pd-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 24px 0 0; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
.pd-breadcrumbs .woocommerce-breadcrumb a, .woocommerce-breadcrumb.pd-breadcrumbs a { color: var(--ink-subtle); text-decoration: underline; text-underline-offset: 3px; }
.pd-breadcrumbs .woocommerce-breadcrumb a:hover, .woocommerce-breadcrumb.pd-breadcrumbs a:hover { color: var(--brand); }
@media (max-width: 640px) {
  .pd-layout { gap: 32px; padding-bottom: 64px; }
  .pd-more { padding: 48px 0; }
  .pd-spec dl { grid-template-columns: 1fr; }
}

/* 404 */
.nf-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 72px; padding-top: 64px; }
.nf-hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.nf-hero__copy p { margin: 0; }
.nf-hero__copy .body-lg { color: var(--ink-muted); }
.nf-hero__copy .callout { color: var(--ink-subtle); }
.nf-hero__search { width: 100%; max-width: 480px; padding-top: 8px; }
.nf-hero__figure { flex: 0 1 380px; height: 440px; border-radius: 32px; overflow: hidden; position: relative; }
.nf-hero__figure .callout { position: absolute; left: 20px; bottom: 16px; color: var(--ink-subtle); }
.nf-links { padding: 72px 0 96px; }
.nf-links h2 { margin: 0 0 20px; }
.nf-links__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nf-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 20px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.nf-link:hover { background: var(--brand-tint); color: var(--ink); }
@media (max-width: 640px) { .nf-hero { padding-top: 32px; } .nf-hero__figure { height: 320px; flex-basis: 100%; } .nf-links { padding: 48px 0 64px; } }

/* Play page */
.play-well { padding: 16px; overflow: hidden; }
.play-well iframe, .play-well canvas { display: block; width: 100%; border: 0; border-radius: var(--radius-sm); }

/* ---------- WooCommerce Blocks: basket and checkout ---------- */

.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--font-sans); color: var(--ink); }
.wc-block-cart, .wc-block-checkout { padding-top: 16px; padding-bottom: 64px; }
.wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-cart__totals-title, .wc-block-components-totals-wrapper .wc-block-components-title { font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.wc-block-cart__totals-title, .wc-block-components-checkout-step__title { font-size: 20px; line-height: 1.3; }

/* Buttons */
.wc-block-components-button, .wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button, .wc-block-components-checkout-return-to-cart-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-press);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.wc-block-components-button:hover:not(:disabled), .wc-block-cart__submit-button:hover:not(:disabled) { transform: translateY(-1px); opacity: 1; background: var(--ink); color: var(--surface); }
.wc-block-components-button:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.wc-block-components-button:disabled, .wc-block-components-button[disabled] { background: var(--surface-sunken); color: var(--ink-subtle); border-color: var(--line-control); box-shadow: none; cursor: not-allowed; opacity: 1; }
.wc-block-components-button.outlined, .wc-block-components-button.is-secondary, .wc-block-components-totals-coupon__button, .wc-block-components-checkout-return-to-cart-button { background: transparent; color: var(--ink); box-shadow: none; }
.wc-block-components-button.outlined:hover, .wc-block-components-totals-coupon__button:hover:not(:disabled) { background: var(--brand-tint); color: var(--ink); }
.wc-block-components-button.is-link, .wc-block-components-button.is-link:hover { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; transform: none; }
.wc-block-components-button__text { font-weight: 600; }
.wc-block-cart__submit-button.wc-block-components-button, .wc-block-components-checkout-place-order-button.wc-block-components-button { width: 100%; min-height: 56px; }
.wc-block-components-checkout-return-to-cart-button { min-height: 44px; }
.wc-block-components-checkout-return-to-cart-button svg { display: none; }

/* Inputs */
.wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="tel"], .wc-block-components-text-input input[type="url"], .wc-block-components-text-input input[type="number"],
.wc-block-components-textarea, .wc-block-components-select .components-custom-select-control__button, .wc-block-components-select__select, .wc-block-components-combobox .components-combobox-control__input, .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-totals-coupon__input input {
  min-height: 52px; padding: 18px 16px 6px; background: var(--surface-raised); color: var(--ink);
  border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5; box-shadow: none;
}
.wc-block-components-text-input input:focus, .wc-block-components-textarea:focus, .wc-block-components-combobox input:focus, .wc-block-components-totals-coupon__input input:focus { border-color: var(--ink); box-shadow: none; outline: 3px solid var(--focus); outline-offset: 3px; }
.wc-block-components-text-input label, .wc-block-components-combobox label, .wc-block-components-select label, .wc-block-components-totals-coupon__input label { font-family: var(--font-sans); color: var(--ink-subtle); }
.wc-block-components-text-input.is-active label, .wc-block-components-combobox.is-active label { color: var(--ink-subtle); }
.wc-block-components-text-input.has-error input, .wc-block-components-combobox.has-error input { border-color: var(--danger-text); }
.wc-block-components-validation-error p, .wc-block-components-validation-error { color: var(--danger-text); font-family: var(--font-sans); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { width: 22px; height: 22px; border: var(--border-control) solid var(--line-control); border-radius: 6px; accent-color: var(--brand); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.wc-block-components-checkbox__mark { fill: var(--on-brand); }
.wc-block-components-checkbox label { color: var(--ink); }
.wc-block-components-radio-control__option { padding-left: 2.5em; color: var(--ink); }
.wc-block-components-radio-control__input { width: 22px; height: 22px; border: var(--border-control) solid var(--line-control); }
.wc-block-components-radio-control__input:checked { border-color: var(--brand); }
.wc-block-components-radio-control__input:checked::before { background: var(--brand); }
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--radius-sm); background: var(--brand-tint); }
.wc-block-components-radio-control-accordion-option, .wc-block-components-shipping-rates-control__package { border-color: var(--line); }

/* Cart items table */
.wc-block-cart-items { border: 0; }
.wc-block-cart-items .wc-block-cart-items__header { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-subtle); text-transform: none; letter-spacing: 0.02em; }
.wc-block-cart-items .wc-block-cart-items__header th { border-bottom: var(--border-hair) solid var(--line); }
.wc-block-cart-items .wc-block-cart-item__row { border-bottom: var(--border-hair) solid var(--line); }
.wc-block-cart-item__image { width: 120px; }
.wc-block-cart-item__image img { background: var(--surface-sunken); border-radius: var(--radius-sm); object-fit: contain; }
.wc-block-components-product-name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 18px; }
.wc-block-components-product-name:hover { color: var(--brand); }
.wc-block-components-product-details { margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--ink-subtle); }
.wc-block-components-product-details__name { font-weight: 400; color: var(--ink-subtle); }
.wc-block-components-product-details__value { color: var(--ink); }
.wc-block-components-product-metadata__description p { color: var(--ink-muted); }
.wc-block-components-product-price, .wc-block-cart-item__total .wc-block-components-product-price { font-weight: 600; color: var(--ink); }
.wc-block-components-product-badge { background: var(--surface-sunken); color: var(--ink); border: 0; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; text-transform: none; letter-spacing: 0; }
.wc-block-components-quantity-selector { border: var(--border-control) solid var(--line-control); border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: none; }
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-family: var(--font-sans); font-weight: 600; color: var(--ink); border: 0; background: transparent; min-height: 40px; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: var(--ink); opacity: 1; min-width: 40px; border-radius: var(--radius-pill); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background: var(--brand-tint); box-shadow: none; }
.wc-block-cart-item__remove-link { font-family: var(--font-sans); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wc-block-cart-item__remove-link:hover { color: var(--danger-text); }

/* Sidebar: order summary as a qs-card */
.wc-block-cart__sidebar .wc-block-components-sidebar, .wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-checkout-totals-block {
  background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); padding: 24px;
}
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-totals-block { background: transparent; border: 0; padding: 0; }
.is-large.wc-block-cart .wc-block-cart__totals-title, .wc-block-cart__totals-title { padding: 0 0 16px; border: 0; text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 600; }
.wc-block-components-totals-wrapper { border-top: var(--border-hair) solid var(--line); padding: 16px 0; }
.wc-block-components-totals-wrapper:first-child { border-top: 0; padding-top: 0; }
.wc-block-components-totals-wrapper::after { display: none; }
.wc-block-components-totals-item { color: var(--ink); }
.wc-block-components-totals-item__label { color: var(--ink-muted); font-weight: 400; }
.wc-block-components-totals-item__value { color: var(--ink); font-weight: 600; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; font-weight: 600; color: var(--ink); }
.wc-block-components-totals-item__description { color: var(--ink-subtle); font-size: 13px; font-family: var(--font-mono); }
.wc-block-components-order-summary .wc-block-components-order-summary-item { border-bottom: var(--border-hair) solid var(--line); }
.wc-block-components-order-summary-item__image img { background: var(--surface-sunken); border-radius: var(--radius-sm); border: 0; object-fit: contain; }
.wc-block-components-order-summary-item__quantity { background: var(--ink); color: var(--surface); border: 0; box-shadow: none; font-weight: 600; }
.wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: 16px; }
.wc-block-components-panel__button { font-family: var(--font-sans); font-weight: 600; color: var(--ink); cursor: pointer; }
.wc-block-components-panel__button:hover { color: var(--brand); }
.wc-block-components-chip { background: var(--brand-tint); color: var(--ink); border: 0; border-radius: var(--radius-pill); font-family: var(--font-sans); }
.wc-block-components-chip__remove { color: var(--ink); }
.wc-block-components-shipping-calculator-address__button, .wc-block-components-totals-shipping__change-address__link { color: var(--brand); font-family: var(--font-sans); }
.wc-block-components-shipping-rates-control__package-title, .wc-block-components-totals-shipping .wc-block-components-totals-item__label { color: var(--ink); }

/* Coupon panel: prominent, open by default (main.js clicks it open) */
.wc-block-components-totals-coupon { margin-top: 8px; padding: 16px; border: var(--border-control) dashed var(--brand); border-radius: var(--radius-sm); background: var(--surface); }
.wc-block-components-totals-coupon .wc-block-components-panel__button { width: 100%; text-align: left; padding: 0; font-size: 16px; }
.wc-block-components-totals-coupon .wc-block-components-panel__content { padding-top: 12px; }
.wc-block-components-totals-coupon__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.wc-block-components-totals-coupon__input { flex: 1 1 180px; margin: 0; }
.wc-block-components-totals-coupon__input input { width: 100%; text-transform: uppercase; }
.wc-block-components-totals-coupon__button { flex: 0 0 auto; margin: 0; min-height: 52px; }
.qb-promo-note { margin: 8px 0 12px; }
.qb-promo-note p { margin: 0; font-size: 14px; line-height: 1.45; }
.qb-promo-note strong { font-weight: 600; }

/* Checkout steps */
.wc-block-checkout__form { font-family: var(--font-sans); }
.wc-block-components-checkout-step { padding-left: 0; }
.wc-block-components-checkout-step::before { display: none; }
.wc-block-components-checkout-step__heading { margin: 0 0 8px; }
.wc-block-components-checkout-step__description { color: var(--ink-muted); }
.wc-block-components-checkout-step__container::after { display: none; }
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before { display: none; }
.wc-block-checkout__order-notes .wc-block-components-checkbox label { color: var(--ink); }
.wc-block-components-address-card { border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.wc-block-components-address-card__edit { color: var(--brand); }
.wc-block-components-payment-method-label { font-family: var(--font-sans); }
.wc-block-components-checkout-policies, .wc-block-checkout__terms { color: var(--ink-muted); font-size: 14px; }
.wc-block-checkout__terms a, .wc-block-components-checkout-policies a { color: var(--brand); }
.wc-block-checkout__actions_row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.wc-block-components-express-payment-continue-rule { color: var(--ink-subtle); }
.wc-block-components-express-payment-continue-rule::before, .wc-block-components-express-payment-continue-rule::after { border-color: var(--line); }
.wc-block-checkout__login-prompt, .wc-block-components-checkout-form__login-prompt { color: var(--ink-muted); }
.wc-block-checkout__login-prompt a, .wc-block-components-checkout-form__login-prompt a { color: var(--brand); }

/* Notices (Blocks) */
.wc-block-components-notice-banner, .wc-block-store-notice, .woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-sm);
  border: var(--border-hair) solid var(--line); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); margin: 0 0 24px; list-style: none;
}
.wc-block-components-notice-banner.is-success, .woocommerce-message { border-color: var(--line); }
.wc-block-components-notice-banner.is-success > svg { fill: var(--success-text); background: transparent; }
.wc-block-components-notice-banner.is-error, .woocommerce-error { border: var(--border-control) solid var(--danger-text); }
.wc-block-components-notice-banner.is-error > svg { fill: var(--danger-text); background: transparent; }
.wc-block-components-notice-banner.is-info, .woocommerce-info { border-color: var(--line); }
.wc-block-components-notice-banner.is-info > svg { fill: var(--brand); background: transparent; }
.wc-block-components-notice-banner.is-warning > svg { fill: var(--accent-text); background: transparent; }
.wc-block-components-notice-banner__content { color: var(--ink); }
.wc-block-components-notice-banner__content .wc-forward, .woocommerce-message .button { margin-left: auto; min-height: 40px; padding: 0 16px; border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }

/* Empty basket */
.wp-block-woocommerce-empty-cart-block { padding: 48px 0; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title, .wp-block-woocommerce-empty-cart-block h2 { font-size: clamp(30px, 5vw, 40px); font-weight: 600; letter-spacing: -0.015em; }
.wp-block-woocommerce-empty-cart-block .wp-block-button__link { background: var(--ink); color: var(--surface); }
.wp-block-woocommerce-empty-cart-block .wc-block-grid { display: none; }

/* Layout widths for cart and checkout */
.wc-block-cart.is-large .wc-block-cart__main, .wc-block-checkout.is-large .wc-block-checkout__main { padding-right: 0; }
.wc-block-cart.is-large .wc-block-cart__sidebar, .wc-block-checkout.is-large .wc-block-checkout__sidebar { padding-left: 32px; }
.wc-block-cart.is-large .wc-block-cart__sidebar { width: 36%; }
.wc-block-checkout.is-large .wc-block-checkout__sidebar { width: 36%; }
.wc-block-cart.is-large .wc-block-cart__main { width: 64%; }
.wc-block-checkout.is-large .wc-block-checkout__main { width: 64%; }
.wc-block-components-main { font-family: var(--font-sans); }

/* Order received (thank you page, Blocks or classic) */
.wp-block-woocommerce-order-confirmation-status, .woocommerce-order { font-family: var(--font-sans); }
.wp-block-woocommerce-order-confirmation-status h1, .wp-block-woocommerce-order-confirmation-status h2, .woocommerce-thankyou-order-received { font-size: clamp(30px, 5vw, 40px); font-weight: 600; letter-spacing: -0.015em; }
.wc-block-order-confirmation-summary, .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; padding: 0; list-style: none; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.wc-block-order-confirmation-summary-list, .woocommerce-order-overview li { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-right: var(--border-hair) solid var(--line); }
.wc-block-order-confirmation-summary-list-item__key, .woocommerce-order-overview li { font-family: var(--font-mono); font-size: 13px; color: var(--ink-subtle); }
.wc-block-order-confirmation-summary-list-item__value, .woocommerce-order-overview li strong { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.wc-block-order-confirmation-totals table, .woocommerce-table--order-details { width: 100%; border-collapse: collapse; border: 0; }
.wc-block-order-confirmation-totals th, .wc-block-order-confirmation-totals td, .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 14px 16px; border: 0; border-bottom: var(--border-hair) solid var(--line); text-align: left; }
.wc-block-order-confirmation-totals thead th, .woocommerce-table--order-details thead th { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-subtle); }
.wc-block-order-confirmation-totals tfoot th, .woocommerce-table--order-details tfoot th { font-weight: 600; }
.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address, .woocommerce-customer-details address { padding: 20px 24px; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); font-style: normal; }
.wc-block-order-confirmation-downloads-wrapper { display: none; }

/* ---------- WooCommerce: My account ---------- */

.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; font-family: var(--font-sans); }
.woocommerce-MyAccount-navigation { flex: 1 1 220px; max-width: 280px; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); padding: 12px; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--brand-tint); color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: var(--surface); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads { display: none; }
.woocommerce-MyAccount-content { flex: 999 1 480px; min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { color: var(--ink-muted); }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { margin: 32px 0 12px; }
.woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-orders-table, .woocommerce-table, .shop_table { width: 100%; border-collapse: collapse; border: 0; }
.woocommerce-orders-table th, .shop_table th { text-align: left; padding: 12px 16px; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; font-weight: 400; border-bottom: var(--border-hair) solid var(--line); }
.woocommerce-orders-table td, .shop_table td { padding: 18px 16px; border-bottom: var(--border-hair) solid var(--line); vertical-align: middle; }
.woocommerce-orders-table .woocommerce-button, .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content button[type="submit"], .woocommerce-button, .woocommerce .button, .woocommerce-form-login .button, .woocommerce-form-register .button, .woocommerce-ResetPassword .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: var(--border-control) solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; margin: 0 8px 8px 0;
}
.woocommerce-MyAccount-content button[type="submit"], .woocommerce-form-login .button, .woocommerce-form-register .button, .woocommerce-ResetPassword .button, .woocommerce-button--pay, .woocommerce-Button--save { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-press); min-height: 48px; padding: 0 24px; }
.woocommerce-button:hover, .woocommerce .button:hover { background: var(--brand-tint); color: var(--ink); }
.woocommerce-MyAccount-content button[type="submit"]:hover, .woocommerce-form-login .button:hover, .woocommerce-form-register .button:hover, .woocommerce-ResetPassword .button:hover { background: var(--ink); color: var(--surface); transform: translateY(-1px); }
.woocommerce-orders-table__cell-order-status { font-weight: 500; }
.woocommerce-pagination { display: flex; gap: 12px; padding: 24px 0; }
.woocommerce-Address, .woocommerce-Addresses .col-1, .woocommerce-Addresses .col-2 { padding: 20px 24px; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0 0 8px; font-size: 20px; }
.woocommerce-Address address { font-style: normal; color: var(--ink-muted); }
.woocommerce-customer-details address { font-style: normal; }

/* Account forms: sign in, register, lost password, edit account, addresses, checkout classic */
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-EditAccountForm, .woocommerce-address-fields, .woocommerce-form-track-order {
  max-width: 480px; padding: 28px; background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); margin: 0 0 24px;
}
.woocommerce-account .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; width: 100%; }
.woocommerce-account .u-columns .col-1, .woocommerce-account .u-columns .col-2 { width: auto; float: none; }
.woocommerce-account .u-columns h2 { margin: 0 0 16px; font-size: 24px; }
.woocommerce-form-row, .form-row, .woocommerce-form__label { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; }
.woocommerce-form-row label, .form-row label { font-size: 14px; font-weight: 500; color: var(--ink); }
.woocommerce-form-row label .required, .form-row label .required { color: var(--danger-text); text-decoration: none; }
.woocommerce-form-row label .optional, .form-row label .optional { color: var(--ink-subtle); font-weight: 400; }
.woocommerce-Input, .input-text, .woocommerce-form-row input[type="text"], .woocommerce-form-row input[type="email"], .woocommerce-form-row input[type="password"], .woocommerce-form-row input[type="tel"], .form-row input.input-text, .form-row select, .form-row textarea, .woocommerce-form-row select {
  width: 100%; min-height: 52px; padding: 12px 16px; background: var(--surface-raised); color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
}
.woocommerce-form-row .password-input, .form-row .password-input { display: block; position: relative; width: 100%; }
.woocommerce-form-row .show-password-input, .form-row .show-password-input { top: 16px; right: 16px; }
.woocommerce-form-login__rememberme, .woocommerce-form__label-for-checkbox { display: flex; flex-direction: row; align-items: center; gap: 12px; cursor: pointer; margin: 0 0 16px; }
.woocommerce-form__input-checkbox { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); }
.woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-form-register .woocommerce-form-register__submit { width: 100%; margin: 0; }
.woocommerce-LostPassword, .lost_password { margin: 16px 0 0; font-size: 14px; }
.woocommerce-LostPassword a, .lost_password a { color: var(--brand); }
.woocommerce-privacy-policy-text { color: var(--ink-muted); font-size: 14px; }
.woocommerce-privacy-policy-text a { color: var(--brand); }
.woocommerce-password-strength, .woocommerce-password-hint { font-size: 13px; color: var(--ink-muted); }
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { color: var(--danger-text); }
.woocommerce-password-strength.good, .woocommerce-password-strength.strong { color: var(--success-text); }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend { font-weight: 600; margin: 0 0 12px; padding: 0; }

/* Order detail in account */
.woocommerce-order-details, .woocommerce-customer-details { margin: 24px 0; }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: 20px; margin: 0 0 12px; }
.woocommerce-table--order-details .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; color: var(--ink-subtle); }
.woocommerce-table--order-details .wc-item-meta p { display: inline; margin: 0; }

/* ---------- Motion and accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .qb-btn:hover:not(:disabled), .qb-swatch:hover:not(:disabled), .qb-card:hover, .hm-tile:hover, .wc-block-product-template .wc-block-product:hover, .wp-block-button__link:hover, .wc-block-components-button:hover:not(:disabled), .pd-buy form.cart .single_add_to_cart_button:hover { transform: none; }
  .qb-btn:hover:not(:disabled) .qb-btn__icon { transform: none; }
}

@media (max-width: 360px) {
  .qs-wrap { padding: 0 16px; }
  .hm-hero__actions .qb-btn, .shop-head .qb-btn { white-space: normal; text-align: center; }
}

/* Basket table on narrow phones: the line-total column does not fit beside
   the quantity control, so it is hidden there; the unit price stays under the
   product name and the totals card carries the sums. */
@media (max-width: 520px) {
	.wc-block-cart .wc-block-cart-items { table-layout: fixed; width: 100%; }
	.wc-block-cart .wc-block-cart-item__total,
	.wc-block-cart .wc-block-cart-items__header-total { display: none; }
	.wc-block-cart .wc-block-cart-item__image { width: 72px; }
}

/* ---------- Phone pass ---------- */

/* Shop cards: the whole figure, never cropped (WooCommerce sets cover). */
.wc-block-product-template .wc-block-components-product-image img,
.wc-block-product-template .wp-block-woocommerce-product-image img { object-fit: contain !important; padding: 8px; box-sizing: border-box; }

/* Footer buttons wrap on the narrowest phones instead of overflowing. */
.sf__actions .qb-btn, .sf .qb-btn { white-space: normal; text-align: center; min-width: 0; max-width: 100%; }

/* Product page: one Qooboid per add; the quantity is changed in the basket. */
.pd-buy form.cart .quantity { display: none; }
.pd-buy form.cart .single_add_to_cart_button { width: 100%; }

/* FAQ details blocks in page content, styled like the design's accordion. */
.wp-block-post-content details.wp-block-details { border-top: var(--border-hair) solid var(--line); margin: 0; padding: 0; }
.wp-block-post-content details.wp-block-details:last-of-type { border-bottom: var(--border-hair) solid var(--line); }
.wp-block-post-content details.wp-block-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--ink); }
.wp-block-post-content details.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-post-content details.wp-block-details > summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: var(--border-control) solid var(--line-control); font-family: var(--font-mono); font-size: 16px; color: var(--ink-subtle); transition: transform 240ms var(--ease); }
.wp-block-post-content details.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-post-content details.wp-block-details > :not(summary) { color: var(--ink-muted); max-width: 680px; }
.wp-block-post-content details.wp-block-details > p:last-child { margin-bottom: 20px; }
.wp-block-post-content details.wp-block-details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Checkout and basket sidebar on phones: no card padding around WooCommerce's own panels. */
@media (max-width: 700px) {
	.wc-block-checkout__sidebar, .wc-block-cart__sidebar { padding: 0; }
	.wc-block-checkout__sidebar .wc-block-components-sidebar, .wc-block-cart__sidebar .wc-block-components-sidebar { padding: 8px 16px; }
	.qs-shop-page__title { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-post-content details.wp-block-details > summary::after { transition: none; }
}

/* Checkout and basket on phones: no dead space under the last block. */
@media (max-width: 700px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout { padding-bottom: 0; margin-bottom: 0; }
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
	.wp-block-woocommerce-cart .wc-block-cart__sidebar,
	.wp-block-woocommerce-checkout .wc-block-checkout__main,
	.wp-block-woocommerce-cart .wc-block-cart__main { margin-bottom: 0; padding-bottom: 0; }
	.qs-shop-page .entry-content { margin-bottom: 0; }
}