/*
Theme Name: Clubhouse Maps Dixon
Theme URI: https://clubhousemaps.com
Author: Clubhouse Maps
Author URI: https://clubhousemaps.com
Description: Stark gallery storefront theme for Clubhouse Maps — premium golf course prints. Built for WooCommerce.
Version: 0.3.56
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clubhouse-maps-dixon
*/

/* =========================================================
   Clubhouse Maps Dixon — Tom Dixon–Inspired Design System
   Stark black-and-white gallery, photography-forward,
   one warm metallic accent, General Sans grotesque.
   ========================================================= */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================
   Design Tokens — :root
   Sourced verbatim from brand/design-system-tomdixon.md
   ========================================================= */
:root {
  /* --- Colors --- */
  --tdx-black:          #000000;             /* structural bands, primary buttons */
  --tdx-ink:            #1a1a1a;             /* body text on light */
  --tdx-slate:          #2b333f;             /* secondary headings / shadow base */
  --tdx-muted:          #6f6f6f;             /* captions, meta, breadcrumb */
  --tdx-paper:          #ffffff;             /* page base */
  --tdx-paper-warm:     #f5f3ee;             /* alt section band */
  --tdx-tile:           #f2f2f2;             /* product image-tile background */
  --tdx-line:           rgba(0,0,0,0.10);    /* hairline borders / dividers */
  --tdx-accent:         #b8902e;             /* one warm metallic accent (CM gold) */
  --tdx-accent-ink:     #ffffff;             /* text on accent */
  --tdx-on-dark:        #ffffff;             /* text on black bands / hero */
  --tdx-on-dark-muted:  rgba(255,255,255,0.70); /* muted text on dark */

  /* --- Typography --- */
  --tdx-font: 'General Sans', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
              'Segoe UI', Helvetica, Arial, sans-serif;
  --tdx-weight-light:   300;
  --tdx-weight-regular: 400;
  --tdx-weight-medium:  500;  /* button/label weight */
  --tdx-weight-bold:    700;  /* display */

  /* --- Type scale (fluid) --- */
  --tdx-text-display: clamp(2.75rem, 5vw, 4rem);     /* hero & page titles */
  --tdx-text-h1:      clamp(2rem, 3.5vw, 2.5rem);    /* section titles */
  --tdx-text-h2:      clamp(1.5rem, 2.5vw, 2rem);    /* sub-sections */
  --tdx-text-h3:      1.5rem;                         /* card group / column heads */
  --tdx-text-body:    1rem;                           /* paragraphs */
  --tdx-text-sm:      0.875rem;                       /* meta, captions */
  --tdx-text-xs:      0.75rem;                        /* fine print / eyebrow */

  /* --- Spacing (4px base unit) --- */
  --tdx-space-1:  4px;
  --tdx-space-2:  8px;
  --tdx-space-3:  12px;
  --tdx-space-4:  16px;
  --tdx-space-5:  20px;
  --tdx-space-6:  24px;
  --tdx-space-8:  32px;
  --tdx-space-10: 40px;
  --tdx-space-16: 64px;
  --tdx-space-24: 96px;
  --tdx-space-32: 128px;

  /* --- Layout --- */
  --tdx-gutter:         clamp(16px, 4vw, 40px);   /* page side padding */
  --tdx-section-y:      clamp(64px, 9vw, 96px);   /* vertical section rhythm */
  --tdx-container:      1440px;                    /* centered max content width */
  --tdx-nav-h:          96px;                       /* fixed-nav height (desktop); drops to 64px at ≤700px below */
  --tdx-container-wide: 1760px;                    /* near-full-bleed galleries */
  --tdx-grid-gap:       clamp(16px, 2vw, 32px);

  /* --- Shape --- */
  --tdx-radius-pill:    9999px; /* buttons, search */
  --tdx-radius-card:    16px;   /* product image tiles */
  --tdx-radius-control: 8px;    /* filter pills, inputs */
  /* Operator rule: tags/badges use sharp corners, not the design-system pill */
  --tdx-radius-tag:     0;

  /* --- Shadows --- */
  --tdx-shadow-card: 0 2px 8px rgba(43,51,63,.08), 0 1px 2px rgba(43,51,63,.12);
  --tdx-shadow-pop:  0 20px 48px rgba(55,63,71,.16), 0 12px 24px rgba(55,63,71,.20);

  /* --- Motion --- */
  --tdx-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --tdx-t-fast: 200ms;
  --tdx-t-med:  400ms;
  --tdx-t-slow: 600ms;
}

/* =========================================================
   Dark Mood Variant
   Sourced verbatim from brand/design-system-tomdixon.md §WP integration
   Apply via <html data-mood="dark"> or body toggle
   ========================================================= */
[data-mood="dark"] {
  --tdx-paper:      #191817;
  --tdx-paper-warm: #232220;
  --tdx-tile:       #232220;
  --tdx-ink:        #f5f2ed;
  --tdx-muted:      #a89f91;
  --tdx-line:       rgba(255,255,255,.12);
}

/* =========================================================
   Base
   ========================================================= */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--tdx-font);
  font-weight: var(--tdx-weight-regular);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tdx-ink);
  background: var(--tdx-paper);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* =========================================================
   Type Scale
   ========================================================= */

/* Display — hero & page titles */
.tdx-display,
.entry-title.display {
  font: var(--tdx-weight-bold) var(--tdx-text-display)/1.02 var(--tdx-font);
  letter-spacing: -0.02em;
}

/* Heading scale */
h1 {
  font: var(--tdx-weight-bold) var(--tdx-text-h1)/1.08 var(--tdx-font);
  letter-spacing: -0.01em;
  color: var(--tdx-ink);
}

h2 {
  font: var(--tdx-weight-bold) var(--tdx-text-h2)/1.1 var(--tdx-font);
  color: var(--tdx-ink);
}

h3 {
  font: var(--tdx-weight-medium) var(--tdx-text-h3)/1.2 var(--tdx-font);
  color: var(--tdx-ink);
}

/* Body text variants */
.tdx-text-body { font: var(--tdx-weight-regular) var(--tdx-text-body)/1.55 var(--tdx-font); }
.tdx-text-sm   { font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font); }
.tdx-text-xs   { font: var(--tdx-weight-regular) var(--tdx-text-xs)/1.35 var(--tdx-font); }

/* =========================================================
   Layout Primitives
   ========================================================= */
.tdx-container {
  max-width: var(--tdx-container);
  margin-inline: auto;
  padding-inline: var(--tdx-gutter);
}

.tdx-container--wide {
  max-width: var(--tdx-container-wide);
  margin-inline: auto;
  padding-inline: var(--tdx-gutter);
}

.tdx-section {
  padding-block: var(--tdx-section-y);
}

/* =========================================================
   WordPress Accessibility
   Carried from theme/clubhouse-maps/style.css
   ========================================================= */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--tdx-paper-warm);
  clip: auto !important;
  clip-path: none;
  color: var(--tdx-ink);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* WordPress block alignment utilities */
.alignwide {
  max-width: calc(var(--tdx-container) + 200px);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* =========================================================
   Scroll Reveal
   Carried from theme/clubhouse-maps/style.css
   Triggered by IntersectionObserver in assets/js/dixon.js
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--tdx-ease), transform 0.7s var(--tdx-ease);
  transition-delay: calc(var(--delay, 0) * 120ms);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Component Library — §5 of design-system-tomdixon.md
   Tokens transcribed verbatim; see individual notes for
   operator overrides applied.
   ========================================================= */

/* --- Eyebrow label --- */
.tdx-eyebrow {
  font: 700 var(--tdx-text-xs)/1.2 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
}

/* --- Buttons — ONE system, gallery-grade gold-wipe interaction.
     Primary = solid; Ghost = outline; add --on-dark for dark backgrounds (hero).
     Signature hover: brand gold (or fill) wipes left->right + subtle lift.
     Note: --primary base is var(--tdx-black) = #000000 (Tom Dixon spec). --- */
.tdx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: 500 1rem/1 var(--tdx-font);
  padding: 14px 28px;
  border-radius: var(--tdx-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .4s cubic-bezier(.4,0,.2,1),
              color .3s ease,
              border-color .3s ease,
              transform .25s var(--tdx-ease),
              box-shadow .25s var(--tdx-ease);
}
.tdx-btn:hover { background-size: 100% 100%; transform: translateY(-2px); }

/* Primary — solid black; gold wipes in, text flips to dark ink */
.tdx-btn--primary {
  background-color: var(--tdx-black);
  background-image: linear-gradient(var(--tdx-accent), var(--tdx-accent));
  color: #fff;
  border-color: var(--tdx-black);
}
.tdx-btn--primary:hover {
  color: var(--tdx-accent-ink);
  border-color: var(--tdx-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* Ghost (secondary) — outline; fills black on hover, text flips to white */
.tdx-btn--ghost {
  background-color: transparent;
  background-image: linear-gradient(var(--tdx-black), var(--tdx-black));
  color: var(--tdx-ink);
  border-color: var(--tdx-line);
}
.tdx-btn--ghost:hover {
  color: #fff;
  border-color: var(--tdx-black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* On-dark — hero buttons over the dark photo */
.tdx-btn--on-dark.tdx-btn--primary {
  background-color: var(--tdx-on-dark);
  background-image: linear-gradient(var(--tdx-accent), var(--tdx-accent));
  color: var(--tdx-black);
  border-color: var(--tdx-on-dark);
}
.tdx-btn--on-dark.tdx-btn--primary:hover {
  color: var(--tdx-accent-ink);
  border-color: var(--tdx-accent);
}
.tdx-btn--on-dark.tdx-btn--ghost {
  background-color: transparent;
  background-image: linear-gradient(var(--tdx-on-dark), var(--tdx-on-dark));
  color: var(--tdx-on-dark);
  border-color: rgba(255, 255, 255, .6);
}
.tdx-btn--on-dark.tdx-btn--ghost:hover {
  color: var(--tdx-black);
  border-color: var(--tdx-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .tdx-btn { transition: background-size .01ms, color .2s ease, border-color .2s ease; }
  .tdx-btn:hover { transform: none; }
}

.tdx-btn--accent {
  background: var(--tdx-accent);
  color: var(--tdx-accent-ink);
}

.tdx-btn--accent:hover {
  opacity: 0.9;
}

/* --- Full-bleed black band — signature structural beat --- */
.tdx-band-dark {
  background: var(--tdx-black);
  color: var(--tdx-on-dark);
}

.tdx-band-light {
  background: var(--tdx-paper-warm);
  color: var(--tdx-ink);
}

/* --- Hero — full viewport, content overlaid bottom-left (Tom Dixon approved, 2026-06-13) --- */
.tdx-hero{position:relative;overflow:hidden;height:100svh;color:var(--tdx-on-dark)}
.tdx-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%;transform-origin:center;animation:tdxHeroPush 16s cubic-bezier(.2,0,.2,1) forwards}
@keyframes tdxHeroPush{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes tdxHeroPushMobile{from{transform:scale(1.1)}to{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.tdx-hero__bg{animation:none;transform:none}}
.tdx-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 27%,rgba(0,0,0,0) 50%)}
.tdx-hero__content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px;padding-inline:16px;padding-block-end:48px;padding-block-start:90px}
.tdx-hero__title{margin:0;font-family:var(--tdx-font);font-weight:700;font-size:2rem;line-height:1.0;letter-spacing:normal;color:var(--tdx-on-dark)}
.tdx-hero__sub{margin:0;font-family:var(--tdx-font);font-weight:500;font-size:1rem;line-height:1.4;color:rgba(255,255,255,.92);max-width:556px}
.tdx-hero__cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
@media (max-width:767px){.tdx-hero__sub{max-width:100%}.tdx-hero__bg{animation:tdxHeroPushMobile 16s cubic-bezier(.2,0,.2,1) forwards;transform-origin:50% 100%}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.tdx-hero__bg{animation:none;transform:scale(1.2);transform-origin:50% 100%}}
@media (min-width:768px){.tdx-hero__content{padding-inline:40px}.tdx-hero__title{font-size:3rem}}
@media (min-width:1024px){.tdx-hero__content{gap:24px}.tdx-hero__cta-row{gap:24px}.tdx-hero__title{font-size:clamp(3rem,4.77vw,4.25rem)}}
/* --- Product card — image tile + name, minimal chrome --- */
.tdx-card__media { /* full base box — do not split augmentations into compound rules (sonnet sweep 2026-06-12) */
  position: relative;
  background: var(--tdx-tile);
  border-radius: var(--tdx-radius-card);
  aspect-ratio: 3/2;
  overflow: hidden;
  transition: box-shadow var(--tdx-t-med) var(--tdx-ease);
}

.tdx-card__name {
  font: 500 var(--tdx-text-body)/1.3 var(--tdx-font);
  margin-top: var(--tdx-space-3);
}

.tdx-card__price {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-muted);
  margin-top: var(--tdx-space-2);
}

/* --- Badge & Tag
     Note: both use var(--tdx-radius-tag) = 0 (sharp corners).
     The design system spec uses --tdx-radius-pill for badges,
     but the operator rule mandates sharp corners on tags/badges.
     --tdx-radius-tag intentionally overrides the design-system default.
     --- */
.tdx-badge {
  font: 500 var(--tdx-text-xs)/1 var(--tdx-font);
  padding: 6px 12px;
  border-radius: var(--tdx-radius-tag); /* sharp — operator rule */
  background: #fff;
  border: 1px solid var(--tdx-line);
}

.tdx-tag {
  display: inline-block;
  font: 500 var(--tdx-text-xs)/1 var(--tdx-font);
  padding: 4px 10px;
  border-radius: var(--tdx-radius-tag); /* sharp — operator rule */
  background: var(--tdx-paper-warm);
  border: 1px solid var(--tdx-line);
  color: var(--tdx-muted);
}

/* --- Product grid --- */
.tdx-grid {
  display: grid;
  gap: var(--tdx-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Fixed-column variants for explicit layouts */
.tdx-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.tdx-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Filter / sort bar --- */
.tdx-filterbar {
  display: flex;
  gap: var(--tdx-space-6);
  align-items: center;
  padding-block: var(--tdx-space-4);
  border-block: 1px solid var(--tdx-line);
  font: 500 var(--tdx-text-sm)/1 var(--tdx-font);
}

/* =========================================================
   Responsive Breakpoints
   mobile 480 / tablet 768 / laptop 1024
   Used as reference anchors by later template agents.
   ========================================================= */
@media (max-width: 1024px) {
  .tdx-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tdx-grid--2,
  .tdx-grid--3 {
    grid-template-columns: 1fr;
  }

  .tdx-filterbar {
    flex-wrap: wrap;
    gap: var(--tdx-space-3);
  }
}

@media (max-width: 480px) {
  .tdx-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   NAV — fixed, transparent→solid on scroll
   ========================================================= */

.tdx-nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  color: var(--tdx-on-dark);            /* white text over hero */
  transition: background .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1);
}

/* Solid state — applied by JS (.scrolled), server (interior pages), or hover */
.tdx-nav.scrolled,
.tdx-nav.tdx-nav--solid,
.tdx-nav:hover {
  background: var(--tdx-paper);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--tdx-line);
  color: var(--tdx-ink);
}

/* Dark mood solid nav */
[data-mood="dark"] .tdx-nav.scrolled,
[data-mood="dark"] .tdx-nav.tdx-nav--solid,
[data-mood="dark"] .tdx-nav:hover {
  background: rgba(25, 24, 23, 0.96);
  color: var(--tdx-on-dark);
}

/* Inner layout: wordmark | [spacer] | links | controls */
.tdx-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .tdx-nav__inner { padding-inline: 40px; } /* match .tdx-hero__content edge inset */
}

/* Wordmark */
.tdx-nav__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 1.3rem/1 var(--tdx-font);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tdx-nav__mark {
  /* !important required: WooCommerce page CSS force-resets img height with !important (seen on cart) */
  height: 40px !important;
  width: auto !important;
  display: block;
}

/* Primary menu links container */
.tdx-nav__links {
  display: flex;
  align-items: center;
  gap: var(--tdx-space-8);
  flex: 1;
}

/* WP auto-generated <ul> inside the links container */
.tdx-nav__links ul {
  display: flex;
  align-items: center;
  gap: var(--tdx-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Primary menu links hidden until destinations exist — PHP stays; flip display to restore */
#tdx-nav-links { display: none; }
.tdx-nav__hamburger { display: none; }

.tdx-nav__links a {
  position: relative;
  font: 500 1rem/1 var(--tdx-font);
  letter-spacing: .01em;
  opacity: 1;
  text-decoration: none;
  padding-block: 4px;
}

.tdx-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.tdx-nav__links a:hover::after {
  transform: scaleX(1);
}

/* Right-side icon controls */
.tdx-nav__controls {
  display: flex;
  align-items: center;
  gap: var(--tdx-space-4);
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* Shared icon button style */
.tdx-nav__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  border-radius: 50%;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-nav__icon-btn:hover {
  background: var(--tdx-line);
}

.tdx-nav__icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Mood toggle — show correct icon based on current mood */
/* Mood toggle lives at the end of the primary menu (header button parked 2026-06-12) */
.tdx-menu-mood {
  display: inline-flex;
  align-items: center;
}

.icon-sun { display: none; }
.icon-moon { display: block; }
[data-mood="dark"] .icon-sun  { display: block; }
[data-mood="dark"] .icon-moon { display: none; }

/* Cart — icon + "Cart" label + underline-draw (overrides the generic round icon-btn look) */
.tdx-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 1rem/1 var(--tdx-font);
  letter-spacing: .01em;
  text-decoration: none;
  padding-block: 4px;
}

.tdx-nav__cart svg {
  width: 20px;
  height: 20px;
}

/* Remove icon-btn hover circle for cart */
.tdx-nav__cart:hover {
  background: transparent;
}

/* Underline-draw on hover */
.tdx-nav__cart::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.tdx-nav__cart:hover::after {
  transform: scaleX(1);
}

/* Hide "Cart" label on phones — icon only */
@media (max-width: 700px) {
  .tdx-nav__cart-label { display: none; }
}

/* Cart icon wrapper — positioning context for the count badge so it sits on
   the icon corner, not over the "Cart" label */
.tdx-nav__cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Cart count badge — anchored to the icon's top-right corner */
.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  background: var(--tdx-accent);
  color: var(--tdx-accent-ink);
  font: 700 10px/16px var(--tdx-font);
  text-align: center;
  border-radius: 999px;
  pointer-events: none;
}

.cart-count:empty { display: none; }

/* Hamburger — 3 spans */
.tdx-nav__hamburger {
  display: none;           /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.tdx-nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tdx-t-fast) var(--tdx-ease),
              opacity var(--tdx-t-fast) var(--tdx-ease);
}

/* ─── Mobile nav (≤700px) ─── */
@media (max-width: 700px) {
  /* Taller desktop bar collapses; hamburger stays hidden (links hidden too — no destinations yet) */
  :root { --tdx-nav-h: 64px; } /* nav height token tracks the bar collapse */
  .tdx-nav__inner { height: 64px; }
  .tdx-nav__wordmark { font-size: 1.05rem; } /* .22em tracking + uppercase inherited from base */
  .tdx-nav__mark { height: 34px !important; }
  /* Keep hamburger hidden even at mobile (links are hidden; flip both to restore) */
  .tdx-nav__hamburger { display: none; }

  /* Preserve collapsed-menu markup scaffold for future restoration */
  .tdx-nav__links {
    position: absolute;
    top: 64px;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tdx-paper);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding-block: var(--tdx-space-4);
  }

  [data-mood="dark"] .tdx-nav__links {
    background: #191817;
  }

  .tdx-nav__links.open {
    display: flex;
  }

  .tdx-nav__links ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .tdx-nav__links li {
    border-bottom: 1px solid var(--tdx-line);
  }

  .tdx-nav__links a {
    display: block;
    padding: var(--tdx-space-4) var(--tdx-gutter);
    color: var(--tdx-ink);
    opacity: 1;
    /* full shorthand, not a partial font-size override of the base font shorthand (sonnet sweep 2026-06-12) */
    font: var(--tdx-weight-medium) var(--tdx-text-body)/1 var(--tdx-font);
  }

  [data-mood="dark"] .tdx-nav__links a {
    color: var(--tdx-on-dark);
  }

  /* Hamburger open animation — preserved for future restoration */
  #tdx-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  #tdx-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  #tdx-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.tdx-footer {
  padding-block: var(--tdx-space-16) var(--tdx-space-8);
}

/* Newsletter row */
.tdx-footer__newsletter {
  padding-block: var(--tdx-space-16);
  text-align: center;
  max-width: 880px;   /* wide enough that the 32px-capped heading never wraps */
  margin-inline: auto;
}

.tdx-footer__eyebrow {
  color: var(--tdx-on-dark-muted);
  margin-bottom: var(--tdx-space-4);
}

.tdx-footer__newsletter-heading {
  font: var(--tdx-weight-bold) var(--tdx-text-h2)/1.1 var(--tdx-font);
  color: var(--tdx-on-dark);
  margin-bottom: var(--tdx-space-8);
}

.tdx-footer__form-row {
  display: flex;
  gap: var(--tdx-space-3);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 640px;     /* keep the email form compact even though the heading box is wider */
  margin-inline: auto;
}

.tdx-footer__input {
  flex: 1;
  min-width: 220px;
  height: 52px;
  padding-inline: var(--tdx-space-6);
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--tdx-radius-pill);
  color: var(--tdx-on-dark);
  font: var(--tdx-weight-regular) var(--tdx-text-body)/1 var(--tdx-font);
  transition: border-color var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-footer__input::placeholder {
  color: var(--tdx-on-dark-muted);
}

.tdx-footer__input:focus {
  outline: none;
  border-color: rgba(255,255,255,.6);
}

.tdx-footer__submit {
  color: var(--tdx-on-dark);
  border-color: rgba(255,255,255,.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.tdx-footer__submit:hover {
  border-color: var(--tdx-on-dark);
}

.tdx-footer__form-note {
  margin-top: var(--tdx-space-4);
  font-size: var(--tdx-text-xs);
  color: var(--tdx-on-dark-muted);
}

/* Rule */
.tdx-footer__rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-block: var(--tdx-space-10);
}

/* Footer body: link columns on the left, payment + copyright on the right */
.tdx-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--tdx-space-16);
  padding-block-end: var(--tdx-space-16);
}

/* Link columns — sized to content, sit to the left */
.tdx-footer__cols {
  display: flex;
  gap: var(--tdx-space-16);
}

.tdx-footer__col-heading {
  color: var(--tdx-on-dark-muted);
  margin-bottom: var(--tdx-space-6);
}

.tdx-footer__link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-4);
}

.tdx-footer__link-list a,
.tdx-footer__nav a {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-on-dark-muted);
  transition: color var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-footer__link-list a:hover,
.tdx-footer__nav a:hover {
  color: var(--tdx-on-dark);
}

/* WP-generated footer nav list */
.tdx-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-4);
}

/* Giant wordmark */
.tdx-footer__wordmark {
  font: var(--tdx-weight-bold) clamp(4rem, 10vw, 8rem)/0.9 var(--tdx-font);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.06);   /* near-invisible ghost — signature Tom Dixon detail */
  text-align: center;
  padding-block: var(--tdx-space-8);
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

/* Payment + copyright block — stacked, right-aligned beside the links */
.tdx-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--tdx-space-6);
  text-align: right;
}

.tdx-footer__payment {
  display: flex;
  align-items: center;
  gap: var(--tdx-space-3);
}

.tdx-footer__pay-icon {
  height: 26px;
  width: auto;
  display: block;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-footer__pay-icon:hover { opacity: 1; }

.tdx-footer__copy {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-on-dark-muted);
}

/* Footer responsive */
@media (max-width: 768px) {
  .tdx-footer__main {
    flex-direction: column;
    gap: var(--tdx-space-10);
  }
  /* Shop hugs the left, Legal hugs the right */
  .tdx-footer__cols {
    width: 100%;
    justify-content: space-between;
    gap: var(--tdx-space-6);
  }
  /* Payment icons + copyright centered below */
  .tdx-footer__bottom {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .tdx-footer__payment {
    justify-content: center;
  }
  .tdx-footer__newsletter {
    text-align: left;
  }
  .tdx-footer__form-row {
    justify-content: flex-start;
  }
}


/* =========================================================
   FRONT-PAGE SECTIONS
   ========================================================= */

/* --- Hero (rules consolidated into base hero block above) --- */
.tdx-hero--home{overflow:hidden}

/* --- Statement --- */
.tdx-statement__inner {
  text-align: center;
}

.tdx-statement__text {
  font: var(--tdx-weight-medium) clamp(1.125rem, 2vw, 1.375rem)/1.4 var(--tdx-font);
  letter-spacing: 0.01em;
  color: var(--tdx-muted);
}

/* --- Editorial Columns --- */
.tdx-editorial__header {
  text-align: center;
  margin-bottom: var(--tdx-space-10);
}

.tdx-editorial__header h2 {
  margin-top: var(--tdx-space-4);
  margin-bottom: var(--tdx-space-4);
}

.tdx-editorial__desc {
  color: var(--tdx-muted);
  max-width: 600px;
  margin-inline: auto;
}

.tdx-editorial__grid {
  /* inherits .tdx-grid--3 */
}

.tdx-editorial__card {
  display: block;
  color: var(--tdx-ink);
  text-decoration: none;
  transition: transform var(--tdx-t-med) var(--tdx-ease);
}

.tdx-editorial__card:hover {
  transform: translateY(-4px);
}

.tdx-editorial__card .tdx-card__media {
  overflow: hidden;
}

.tdx-editorial__card .tdx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tdx-t-slow) var(--tdx-ease);
}

.tdx-editorial__card:hover .tdx-card__media img {
  transform: scale(1.04);
}

.tdx-editorial__card-body {
  padding-top: var(--tdx-space-5);
}

.tdx-editorial__card-desc {
  margin-top: var(--tdx-space-3);
  font-size: var(--tdx-text-sm);
  color: var(--tdx-muted);
  line-height: 1.55;
}

/* --- Black Band / Quote --- */
.tdx-quote-band__inner {
  text-align: center;
  max-width: 1100px; /* widened from 800px so each Standard line holds unwrapped on desktop (operator 2026-06-12) */
  margin-inline: auto;
}

.tdx-quote-band__eyebrow {
  color: var(--tdx-on-dark-muted);
  margin-bottom: var(--tdx-space-6);
}

.tdx-quote-band__heading {
  font: var(--tdx-weight-bold) var(--tdx-text-h1)/1.1 var(--tdx-font);
  color: var(--tdx-on-dark);
  margin: 0 0 var(--tdx-space-6);
}

.tdx-quote-band__quote {
  font: var(--tdx-weight-light) clamp(1.25rem, 2.5vw, 1.75rem)/1.5 var(--tdx-font);
  color: var(--tdx-on-dark);
  letter-spacing: 0.005em;
}

/* Dark-on-light colors when the band is flipped to light */
.tdx-band-light .tdx-quote-band__eyebrow { color: var(--tdx-muted); }
.tdx-band-light .tdx-quote-band__heading { color: var(--tdx-ink); }
.tdx-band-light .tdx-quote-band__quote { color: var(--tdx-ink); }

.tdx-quote-band__line {
  display: block;
}

/* ~5px air between the three Standard lines; stays smaller than the 24px eyebrow→text gap (operator 2026-06-12) */
.tdx-quote-band__line + .tdx-quote-band__line {
  margin-top: 5px;
}

.tdx-quote-band__btns {
  margin-top: var(--tdx-space-16);
}

/* --- Product Carousel --- */
.tdx-carousel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tdx-space-6);
  margin-bottom: var(--tdx-space-10);
}

.tdx-carousel__header h2 {
  margin-top: var(--tdx-space-3);
}

.tdx-carousel__view-all {
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-muted);
  white-space: nowrap;
  transition: color var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-carousel__view-all:hover {
  color: var(--tdx-ink);
}

.tdx-carousel__grid {
  /* inherits .tdx-grid auto-fill */
}

.tdx-carousel__item {
  display: block;
  color: var(--tdx-ink);
  text-decoration: none;
}

.tdx-carousel__item .tdx-card__media {
  transition: box-shadow var(--tdx-t-med) var(--tdx-ease);
}

.tdx-carousel__item:hover .tdx-card__media {
  box-shadow: var(--tdx-shadow-pop);
}

/* Fill image within tile */
.tdx-card__media img,
.tdx-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tdx-carousel__meta {
  padding-top: var(--tdx-space-4);
}

/* Empty state */
.tdx-carousel__empty {
  text-align: center;
  padding-block: var(--tdx-space-16);
  border: 1px solid var(--tdx-line);
  border-radius: var(--tdx-radius-card);
}

.tdx-carousel__empty-msg {
  color: var(--tdx-muted);
  margin-bottom: var(--tdx-space-8);
}

/* --- Paired CTAs --- */
.tdx-cta-pair__inner {
  text-align: center;
}

.tdx-cta-pair__inner h2 {
  margin-top: var(--tdx-space-4);
  margin-bottom: var(--tdx-space-8);
}

.tdx-cta-pair__btns {
  display: flex;
  gap: var(--tdx-space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Icon Feature Row --- */
.tdx-features {
  border-top: 1px solid var(--tdx-line);
  border-bottom: 1px solid var(--tdx-line);
}

.tdx-features__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tdx-features__item {
  padding: var(--tdx-space-10) var(--tdx-space-6);
  text-align: center;
  border-inline-start: 1px solid var(--tdx-line);
}

.tdx-features__item:first-child {
  border-inline-start: none;
}

.tdx-features__icon {
  display: inline-flex;
  margin-bottom: var(--tdx-space-5);
}

.tdx-features__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--tdx-ink);
}

.tdx-features__label {
  font: var(--tdx-weight-medium) var(--tdx-text-body)/1.3 var(--tdx-font);
  color: var(--tdx-ink);
  margin-bottom: var(--tdx-space-2);
}

.tdx-features__desc {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-muted);
}

@media (max-width: 768px) {
  .tdx-features__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .tdx-features__item {
    border-top: 1px solid var(--tdx-line);
  }

  .tdx-features__item:nth-child(-n+2) {
    border-top: none;
  }

  .tdx-features__item:nth-child(odd) {
    border-inline-start: none;
  }
}

@media (max-width: 480px) {
  .tdx-features__list {
    grid-template-columns: 1fr;
  }

  .tdx-features__item {
    border-inline-start: none;
  }

  /* single-column: every item after the first needs its top separator back —
     beats the 768px :nth-child(-n+2) clear (codex sweep 2026-06-12) */
  .tdx-features__item:nth-child(n+2) {
    border-top: 1px solid var(--tdx-line);
  }
}


/* =========================================================
   PAGE / INDEX — interior pages
   ========================================================= */

.tdx-page-main {
  padding-top: calc(72px + var(--tdx-section-y));
  padding-bottom: var(--tdx-section-y);
}

.tdx-page-article__header {
  margin-bottom: var(--tdx-space-10);
  padding-bottom: var(--tdx-space-8);
  border-bottom: 1px solid var(--tdx-line);
}

.tdx-page-article__header .tdx-eyebrow {
  margin-bottom: var(--tdx-space-4);
}

.tdx-page-article__title {
  font: var(--tdx-weight-bold) var(--tdx-text-h1)/1.08 var(--tdx-font);
  letter-spacing: -0.01em;
}

.tdx-page-article__body {
  max-width: 72ch;
}

.tdx-page-article__body p {
  margin-bottom: var(--tdx-space-6);
  line-height: 1.7;
}

/* Archive / blog index */
.tdx-page-archive__header {
  margin-bottom: var(--tdx-space-10);
  padding-bottom: var(--tdx-space-8);
  border-bottom: 1px solid var(--tdx-line);
}

.tdx-page-archive__desc {
  margin-top: var(--tdx-space-4);
  color: var(--tdx-muted);
}

.tdx-index__grid {
  margin-bottom: var(--tdx-space-16);
}

.tdx-index__item {
  display: flex;
  flex-direction: column;
}

.tdx-index__thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--tdx-radius-card);
  margin-bottom: var(--tdx-space-5);
}

.tdx-index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tdx-index__body {
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-3);
  flex: 1;
}

.tdx-index__title a {
  color: var(--tdx-ink);
  text-decoration: none;
  transition: color var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-index__title a:hover {
  color: var(--tdx-accent);
}

.tdx-index__excerpt {
  color: var(--tdx-muted);
  font-size: var(--tdx-text-sm);
  line-height: 1.55;
}

.tdx-index__more {
  margin-top: auto;
  padding: 10px 20px;
  font-size: var(--tdx-text-sm);
  align-self: flex-start;
}

.tdx-index__empty {
  text-align: center;
  color: var(--tdx-muted);
  padding-block: var(--tdx-space-16);
}

.tdx-pagination {
  display: flex;
  justify-content: center;
  gap: var(--tdx-space-3);
  padding-block: var(--tdx-space-8);
}

.tdx-pagination .nav-links {
  display: flex;
  gap: var(--tdx-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.tdx-pagination a,
.tdx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--tdx-space-4);
  border-radius: var(--tdx-radius-control);
  border: 1px solid var(--tdx-line);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  transition: all var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-pagination a:hover {
  background: var(--tdx-ink);
  color: var(--tdx-on-dark);
  border-color: var(--tdx-ink);
}

.tdx-pagination .current {
  background: var(--tdx-ink);
  color: var(--tdx-on-dark);
  border-color: var(--tdx-ink);
}


/* =========================================================
   404 PAGE
   ========================================================= */

.tdx-404-main { /* full box here — was split with .tdx-page-main 146 lines up (sonnet sweep 2026-06-12) */
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-top: calc(72px + var(--tdx-section-y));
  padding-bottom: var(--tdx-section-y);
}

.tdx-404__inner {
  position: relative;
  text-align: center;
  padding-block: var(--tdx-space-16);
}

/* Oversized ghost number */
.tdx-404__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--tdx-weight-bold) clamp(12rem, 30vw, 24rem)/1 var(--tdx-font);
  color: var(--tdx-tile);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.tdx-404__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tdx-space-5);
  padding-block: var(--tdx-space-24);
}

.tdx-404__heading {
  font: var(--tdx-weight-bold) var(--tdx-text-h1)/1.08 var(--tdx-font);
}

.tdx-404__body {
  color: var(--tdx-muted);
  max-width: 50ch;
  line-height: 1.6;
}

.tdx-404__btns {
  display: flex;
  gap: var(--tdx-space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--tdx-space-4);
}


/* =========================================================
   WOOCOMMERCE — SHOP ARCHIVE
   ========================================================= */

/*
 * Top-level shop page wrapper.
 * The fixed nav is 72px; interior WC pages always need the offset.
 */
.tdx-shop-page {
  /* nav clearance moved to .wc-content-wrapper; this keeps the prior total offset */
  padding-top: calc(72px + var(--tdx-section-y) - var(--tdx-nav-h));
  padding-bottom: var(--tdx-section-y);
}

/* Archive header */
.tdx-shop-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-3);
  margin-bottom: var(--tdx-space-8);
}

.tdx-shop-page__header h1 {
  margin: 0;
}

/* Filter bar pills */
.tdx-shop-page__filterbar {
  margin-bottom: var(--tdx-space-10);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tdx-filterbar__pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: var(--tdx-radius-control);
  border: 1px solid var(--tdx-line);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-muted);
  white-space: nowrap;
  transition: border-color var(--tdx-t-fast) var(--tdx-ease),
              color var(--tdx-t-fast) var(--tdx-ease),
              background var(--tdx-t-fast) var(--tdx-ease);
  text-decoration: none;
}

.tdx-filterbar__pill:hover {
  border-color: var(--tdx-ink);
  color: var(--tdx-ink);
}

.tdx-filterbar__pill--active {
  background: var(--tdx-ink);
  border-color: var(--tdx-ink);
  color: var(--tdx-paper);
}

/* WooCommerce overrides its loop with a <ul> — match grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--tdx-grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
  }
}

/* Pagination as ghost-button pills */
.tdx-shop-page__pagination {
  margin-top: var(--tdx-space-16);
}

.tdx-shop-page__pagination .woocommerce-pagination {
  display: flex;
  justify-content: center;
}

.tdx-shop-page__pagination .page-numbers {
  display: inline-flex;
  gap: var(--tdx-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.tdx-shop-page__pagination .page-numbers a,
.tdx-shop-page__pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--tdx-space-3);
  border-radius: var(--tdx-radius-control);
  border: 1px solid var(--tdx-line);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-ink);
  text-decoration: none;
  transition: all var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-shop-page__pagination .page-numbers a:hover {
  border-color: var(--tdx-ink);
  background: var(--tdx-ink);
  color: var(--tdx-paper);
}

.tdx-shop-page__pagination .page-numbers .current {
  background: var(--tdx-ink);
  border-color: var(--tdx-ink);
  color: var(--tdx-paper);
}

.tdx-shop-page__empty {
  color: var(--tdx-muted);
  padding-block: var(--tdx-space-16);
  text-align: center;
}


/* =========================================================
   WOOCOMMERCE — PRODUCT CARD (grid)
   ========================================================= */

/* Reset default WC product_cat styles on li.product */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}

/* Whole-card link block */
.tdx-card__link {
  display: block;
  color: var(--tdx-ink);
  text-decoration: none;
}

.tdx-card__link:hover .tdx-card__media {
  box-shadow: var(--tdx-shadow-pop);
}

.tdx-card__link:hover .tdx-card__media img {
  transform: scale(1.03);
}

/* Media tile — relative so the badge can be absolutely positioned */
/* base box for .tdx-card__media lives at its definition (~line 351) — augmentations merged there (sonnet sweep 2026-06-12) */

.tdx-card .tdx-card__media img {
  transition: transform var(--tdx-t-slow) var(--tdx-ease);
}

/* Sale badge — sharp corners, top-right overlay */
.tdx-card__sale-badge {
  position: absolute;
  top: var(--tdx-space-3);
  right: var(--tdx-space-3);
  z-index: 1;
  background: var(--tdx-paper);
  border: 1px solid var(--tdx-line);
  border-radius: var(--tdx-radius-tag); /* 0 — operator sharp-corner rule */
  color: var(--tdx-ink);
  font: var(--tdx-weight-medium) var(--tdx-text-xs)/1 var(--tdx-font);
  padding: 5px 10px;
  pointer-events: none;
}

/* Price inside card — override WC default */
.tdx-card .tdx-card__price .woocommerce-Price-amount,
.tdx-card .woocommerce-Price-amount.amount {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-muted);
}

.tdx-card del .woocommerce-Price-amount {
  opacity: 0.5;
}


/* =========================================================
   WOOCOMMERCE — PDP (single product)
   ========================================================= */

/* PDP wrapper — top offset for fixed nav.
   NOTE: this element is ALSO WC's div.product, so this rule owns its full
   box (all margins + paddings). Do not add a separate
   `.woocommerce div.product` reset — its higher specificity silently
   zeroes the gutter here (caused the edge-to-edge mobile PDP, 2026-06-12). */
.tdx-pdp,
.woocommerce div.product.tdx-pdp {
  margin: 0 auto;
  /* nav clearance moved to .wc-content-wrapper; this keeps the prior total offset */
  padding-top: calc(72px + var(--tdx-section-y) - var(--tdx-nav-h));
  padding-bottom: var(--tdx-section-y);
  padding-inline: var(--tdx-gutter);
  max-width: var(--tdx-container);
}

/* Two-column layout: gallery ~55% / details ~45% */
.tdx-pdp__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--tdx-space-16);
  align-items: start;
}

@media (max-width: 1024px) {
  .tdx-pdp__layout {
    grid-template-columns: 1fr;
    gap: var(--tdx-space-10);
  }
}

/* WC injects its own wrappers; override any default floats/widths */
/* scoped under WC structure so it outranks `.woocommerce div.product div.images` (codex sweep 2026-06-12) */
.woocommerce div.product .tdx-pdp__gallery .woocommerce-product-gallery {
  float: none;
  width: 100%;
  margin: 0;
}

/* Gallery images — rounded corners + even 8px separation (main image and between thumbnails) */
.tdx-pdp__gallery .woocommerce-product-gallery__image img,
.tdx-pdp__gallery .woocommerce-product-gallery__wrapper img {
  border-radius: 12px;
}
.tdx-pdp__gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px !important;
}
.tdx-pdp__gallery .flex-control-thumbs li {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.tdx-pdp__gallery .flex-control-thumbs li img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

/* Details column */
.tdx-pdp__details {
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-6);
}

/* Eyebrow */
.tdx-pdp__eyebrow {
  display: block;
}

/* Title */
.tdx-pdp__title {
  font: var(--tdx-weight-bold) var(--tdx-text-h1)/1.08 var(--tdx-font);
  letter-spacing: -0.01em;
  color: var(--tdx-ink);
}

/* Price — subdued (not shouted) */
.tdx-pdp__price .woocommerce-Price-amount,
.tdx-pdp__price .price {
  font: var(--tdx-weight-regular) var(--tdx-text-body)/1.55 var(--tdx-font);
  color: var(--tdx-muted);
}

.tdx-pdp__price del .woocommerce-Price-amount {
  opacity: 0.5;
}

/* Top "Starting at" price — one cohesive italic phrase (normal body text),
   pushed down off the option fields so it groups with the description.
   `> .price` targets only the top price, not the selected-variation price. */
.woocommerce div.product .tdx-pdp__price > .price {
  margin: 0 0 var(--tdx-space-8);
  font: italic var(--tdx-weight-regular) var(--tdx-text-body)/1.55 var(--tdx-font);
  color: var(--tdx-ink);
}
/* Make the amount blend into the phrase instead of looking like a separate field */
.woocommerce div.product .tdx-pdp__price > .price .woocommerce-Price-amount,
.woocommerce div.product .tdx-pdp__price > .price bdi {
  font: inherit;
  color: inherit;
}

/* Short description */
.tdx-pdp__short-desc {
  font: var(--tdx-weight-regular) var(--tdx-text-body)/1.7 var(--tdx-font);
  color: var(--tdx-ink);
}

.tdx-pdp__short-desc p:last-child {
  margin-bottom: 0;
}

/* Variation form — style native <select> elements toward pill look */
.woocommerce div.product .tdx-pdp__add-to-cart form.cart .variations {
  width: 100%;
  border-collapse: collapse;
  /* no bottom margin — the last select's margin provides the single, consistent
     row gap; stacking both produced an oversized gap above the price row.
     `form.cart` needed to outrank WC core's form.cart .variations { margin:1em }. */
  margin-bottom: 0;
}

.woocommerce div.product .tdx-pdp__add-to-cart .variations td,
.woocommerce div.product .tdx-pdp__add-to-cart .variations th {
  /* row gap lives on the cell padding (not the select's margin) so the label
     and the select share one content box and stay vertically centered together */
  padding: 0 0 var(--tdx-space-5);
  vertical-align: middle;
  text-align: left;
}

/* Shared 90px label column + bold label type. Used by Frame/Size (WC's th.label)
   and the custom Price/Quantity field rows (span.tdx-pdp__field-label) so every
   option label aligns at the same edge. */
.woocommerce div.product .tdx-pdp__add-to-cart .variations .label,
.tdx-pdp__field-label {
  box-sizing: border-box;
  width: 90px;
  flex: 0 0 90px;
  padding-right: var(--tdx-space-4);
  white-space: nowrap;
  font: var(--tdx-weight-bold) var(--tdx-text-sm)/1 var(--tdx-font);
  line-height: 40px;   /* match the 40px control height so labels center against the field */
  color: var(--tdx-ink);
}
.woocommerce div.product .tdx-pdp__add-to-cart .variations label {
  font: inherit;
  color: inherit;
}

.woocommerce div.product .tdx-pdp__add-to-cart .variations select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 40px;                               /* shared control height with the quantity field */
  padding: 0 36px 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.32);      /* more prominent than the faint hairline */
  border-radius: var(--tdx-radius-control);   /* 8px — pill-adjacent */
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-ink);
  background: var(--tdx-paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  cursor: pointer;
  transition: border-color var(--tdx-t-fast) var(--tdx-ease);
}

.woocommerce div.product .tdx-pdp__add-to-cart .variations select:focus {
  outline: none;
  border-color: var(--tdx-ink);
}

/* Structural wrapper resets — spacing comes from the field rows + select margins */
.woocommerce div.product .tdx-pdp__add-to-cart .single_variation_wrap,
.woocommerce div.product .tdx-pdp__add-to-cart .woocommerce-variation-add-to-cart {
  margin: 0;
}

/* Custom option-field rows (Price, Quantity): 90px label column + value,
   matching the Frame/Size table rows. Real markup — no pseudo labels. */
.tdx-pdp__field {
  display: flex;
  align-items: center;
  margin-bottom: var(--tdx-space-5);   /* 20px row rhythm, matches the selects */
}
.tdx-pdp__field--price {
  align-items: center;
}
.tdx-pdp__field-value {
  min-width: 0;
}

/* Price value — italic amount, or the muted italic "Select options" placeholder
   until a full selection is made. WC fills .single_variation via JS; the empty
   element is hidden so the placeholder sits beside the label. */
.tdx-pdp__field--price .single_variation:empty {
  display: none;
}
/* Calculated price + "FREE SHIPPING" tag — one baseline-aligned row.
   inline-flex with align-items:baseline gives the bold price and the small-caps
   tag a clean shared text baseline; gap handles the spacing. */
.tdx-pdp__field--price .woocommerce-variation-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tdx-space-2);
}
.tdx-pdp__field--price .woocommerce-variation-price .price,
.tdx-pdp__field--price .woocommerce-variation-price .woocommerce-Price-amount {
  font: var(--tdx-weight-bold) var(--tdx-text-body)/1 var(--tdx-font);
  color: var(--tdx-ink);
}
.tdx-pdp__freeship {
  font: var(--tdx-weight-bold) var(--tdx-text-sm)/1 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tdx-accent);
}
/* Placeholder before a full selection — italic, muted */
.tdx-pdp__price-placeholder {
  font: italic var(--tdx-weight-regular) var(--tdx-text-body)/1 var(--tdx-font);
  color: var(--tdx-muted);
}
.tdx-pdp__field--price .single_variation:not(:empty) ~ .tdx-pdp__price-placeholder {
  display: none;
}

/* Quantity input */
.woocommerce div.product .tdx-pdp__add-to-cart form.cart .quantity {
  float: none;
  margin: 0;
}
.woocommerce div.product .tdx-pdp__add-to-cart .quantity input[type="number"] {
  box-sizing: border-box;
  width: 88px;
  height: 40px;                       /* identical height to the select fields */
  padding: 0;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: var(--tdx-radius-control);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-ink);
  -moz-appearance: textfield;
  transition: border-color var(--tdx-t-fast) var(--tdx-ease);
}
.woocommerce div.product .tdx-pdp__add-to-cart .quantity input[type="number"]:focus {
  outline: none;
  border-color: var(--tdx-ink);
}
.woocommerce div.product .tdx-pdp__add-to-cart .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce div.product .tdx-pdp__add-to-cart .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Full-width black add-to-cart button */
.woocommerce div.product .tdx-pdp__add-to-cart .single_add_to_cart_button,
.woocommerce div.product .tdx-pdp__add-to-cart button[type="submit"].button {
  display: block;
  width: 100%;
  padding: 16px 28px;
  background: var(--tdx-black);
  color: var(--tdx-paper);
  border: none;
  border-radius: var(--tdx-radius-pill);
  font: var(--tdx-weight-medium) 1rem/1 var(--tdx-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
  text-align: center;
}

.woocommerce div.product .tdx-pdp__add-to-cart .single_add_to_cart_button:hover,
.woocommerce div.product .tdx-pdp__add-to-cart button[type="submit"].button:hover {
  background: var(--tdx-slate);
}

/* "Or use Express Checkout" title above the WooPay / Google Pay / Apple Pay
   buttons. The wrapper is injected by WooCommerce Payments via JS; dixon.js
   prepends the real (mixed-weight) title element into it. */
.tdx-pdp__add-to-cart .wcpay-express-checkout-wrapper {
  margin-top: var(--tdx-space-6);
}
.tdx-express-title {
  margin: 0 0 var(--tdx-space-4);
  font: var(--tdx-weight-regular) var(--tdx-text-xs)/1 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
  text-align: center;
}
.tdx-express-title strong {
  font-weight: var(--tdx-weight-bold);
}

/* Free shipping note */
.tdx-pdp__shipping-note {
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-muted);
}

/* Hairline divider */
.tdx-pdp__divider {
  border: none;
  border-top: 1px solid var(--tdx-line);
  margin: 0;
}

/* Product info block — Description (left) / Specs + Shipping (right),
   full width below the gallery + buy box. Stacks to one column on mobile. */
.tdx-pdp__info {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--tdx-space-16);
  align-items: start;
  margin-top: var(--tdx-space-16);
}

.tdx-pdp__info-side {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .tdx-pdp__info {
    grid-template-columns: 1fr;
    gap: 0;                       /* hairlines carry the separation when stacked */
    margin-top: var(--tdx-space-10);
  }
}

/* <details> accordion */
.tdx-pdp__accordion {
  border-bottom: 1px solid var(--tdx-line);
}

.tdx-pdp__accordion:first-of-type {
  border-top: 1px solid var(--tdx-line);
}

.tdx-pdp__accordion-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tdx-space-5) 0;
  /* consistent small all-caps eyebrow header (matches .tdx-eyebrow) */
  font: 700 var(--tdx-text-xs)/1.2 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
  cursor: pointer;
  user-select: none;
}

.tdx-pdp__accordion-summary::-webkit-details-marker {
  display: none;
}

/* Chevron via CSS — no extra icon needed */
.tdx-pdp__accordion-summary::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--tdx-t-fast) var(--tdx-ease);
  flex-shrink: 0;
}

.tdx-pdp__accordion[open] > .tdx-pdp__accordion-summary::after {
  transform: rotate(180deg);
}

/* Desktop (two-column view): no collapse control — sections are static headings.
   The collapse/accordion behavior is kept only when stacked (≤1024px). */
@media (min-width: 1025px) {
  .tdx-pdp__accordion-summary {
    pointer-events: none;   /* heading no longer toggles */
    cursor: default;
  }
  .tdx-pdp__accordion-summary::after {
    display: none;          /* hide the chevron */
  }
}

.tdx-pdp__accordion-body {
  padding-bottom: var(--tdx-space-6);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.6 var(--tdx-font);
  color: var(--tdx-muted);
}

.tdx-pdp__accordion-body p:last-child {
  margin-bottom: 0;
}

/* Accordion body — editorial rhythm for long copy (description, shipping) */
.tdx-pdp__accordion-body h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 28px 0 8px;
}
.tdx-pdp__accordion-body > :first-child {
  margin-top: 0;
}
.tdx-pdp__accordion-body p,
.tdx-pdp__accordion-body li {
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
}
.tdx-pdp__accordion-body p {
  margin: 0 0 14px;
}
.tdx-pdp__accordion-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.tdx-pdp__accordion-body li {
  margin-bottom: 6px;
}

/* Attribute table inside accordion */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: var(--tdx-space-2) 0;
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-muted);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tdx-line);
}

.woocommerce-product-attributes th {
  font-weight: var(--tdx-weight-medium);
  color: var(--tdx-ink);
  padding-right: var(--tdx-space-8);
  width: 40%;
}

/* After-product section (related/upsells) */
.tdx-pdp__after {
  padding-top: var(--tdx-section-y);
}

.tdx-pdp__after .related,
.tdx-pdp__after .upsells { /* WC emits .upsells, not .up-sells (codex sweep 2026-06-12) */
  margin-bottom: var(--tdx-space-16);
}

.tdx-pdp__after h2 {
  margin-bottom: var(--tdx-space-10);
}

.tdx-pdp__after ul.products {
  /* inherits the shop grid styles above */
}


/* =========================================================
   WOOCOMMERCE — CART  (CSS only; no template override)
   Scoped under the page.php content wrapper (.tdx-page-article__body) — cart/checkout render via page.php, not the WC content wrapper
   ========================================================= */

.woocommerce-cart .tdx-page-article__body,
.woocommerce-cart .tdx-page-article__body > * {
  font-family: var(--tdx-font);
}

/* Cart table */
.woocommerce-cart .tdx-page-article__body .shop_table {
  width: 100%;
  border-collapse: collapse;
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
}

.woocommerce-cart .tdx-page-article__body .shop_table th,
.woocommerce-cart .tdx-page-article__body .shop_table td {
  padding: var(--tdx-space-5) var(--tdx-space-4);
  border-bottom: 1px solid var(--tdx-line);
  vertical-align: middle;
  text-align: left;
}

.woocommerce-cart .tdx-page-article__body .shop_table thead th {
  font: var(--tdx-weight-bold) var(--tdx-text-xs)/1.2 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
  background: var(--tdx-tile);
  border-bottom: 1px solid var(--tdx-line);
}

/* Quantity input in cart */
.woocommerce-cart .tdx-page-article__body .qty {
  width: 64px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--tdx-line);
  border-radius: var(--tdx-radius-control);
  font: var(--tdx-weight-medium) var(--tdx-text-body)/1 var(--tdx-font);
  color: var(--tdx-ink);
  background: var(--tdx-paper);
  -moz-appearance: textfield;
}

.woocommerce-cart .tdx-page-article__body .qty::-webkit-inner-spin-button,
.woocommerce-cart .tdx-page-article__body .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Cart totals box */
.woocommerce-cart .tdx-page-article__body .cart_totals {
  background: var(--tdx-tile);
  padding: var(--tdx-space-8);
  margin-top: var(--tdx-space-8);
}

.woocommerce-cart .tdx-page-article__body .cart_totals h2 {
  font: var(--tdx-weight-bold) var(--tdx-text-xs)/1.2 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
  margin-bottom: var(--tdx-space-6);
}

/* Cart/checkout/order buttons — match .tdx-btn--primary */
.woocommerce-cart .tdx-page-article__body a.button,
.woocommerce-cart .tdx-page-article__body button.button,
.woocommerce-cart .tdx-page-article__body input[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--tdx-black);
  color: var(--tdx-paper);
  border: none;
  border-radius: var(--tdx-radius-pill);
  font: var(--tdx-weight-medium) 1rem/1 var(--tdx-font);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
}

.woocommerce-cart .tdx-page-article__body a.button:hover,
.woocommerce-cart .tdx-page-article__body button.button:hover,
.woocommerce-cart .tdx-page-article__body input[type="submit"].button:hover {
  background: var(--tdx-slate);
  color: var(--tdx-paper);
}

/* Totals: right-aligned card under the table; proceed button fills it */
.woocommerce-cart .tdx-page-article__body .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce-cart .tdx-page-article__body .cart_totals { max-width: 420px; width: 100%; }
.woocommerce-cart .tdx-page-article__body .wc-proceed-to-checkout { margin-top: var(--tdx-space-6); }
.woocommerce-cart .tdx-page-article__body .wc-proceed-to-checkout .button { width: 100%; }
/* Coupon input matches the qty/control styling */
.woocommerce-cart .tdx-page-article__body .coupon input[type="text"] { height: 44px; padding: 0 16px; border: 1px solid var(--tdx-line); border-radius: var(--tdx-radius-control); font: var(--tdx-weight-regular) var(--tdx-text-sm)/1 var(--tdx-font); color: var(--tdx-ink); background: var(--tdx-paper); margin-right: var(--tdx-space-3); }


/* =========================================================
   WOOCOMMERCE — CHECKOUT  (CSS only; no template override)
   Scoped under the page.php content wrapper (.tdx-page-article__body) — cart/checkout render via page.php, not the WC content wrapper
   ========================================================= */

/* Form fields */
.woocommerce-checkout .tdx-page-article__body .form-row input[type="text"],
.woocommerce-checkout .tdx-page-article__body .form-row input[type="email"],
.woocommerce-checkout .tdx-page-article__body .form-row input[type="tel"],
.woocommerce-checkout .tdx-page-article__body .form-row input[type="number"],
.woocommerce-checkout .tdx-page-article__body .form-row input[type="password"],
.woocommerce-checkout .tdx-page-article__body .form-row textarea,
.woocommerce-checkout .tdx-page-article__body .form-row select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--tdx-line);
  border-radius: var(--tdx-radius-control);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-ink);
  background: var(--tdx-tile);
  transition: border-color var(--tdx-t-fast) var(--tdx-ease);
  appearance: none;
  -webkit-appearance: none;
}

.woocommerce-checkout .tdx-page-article__body .form-row input:focus,
.woocommerce-checkout .tdx-page-article__body .form-row textarea:focus,
.woocommerce-checkout .tdx-page-article__body .form-row select:focus {
  outline: none;
  border-color: var(--tdx-accent);
}

.woocommerce-checkout .tdx-page-article__body .form-row label {
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  color: var(--tdx-ink);
  margin-bottom: var(--tdx-space-2);
  display: block;
}

/* Order review / payment box */
.woocommerce-checkout .tdx-page-article__body #order_review,
.woocommerce-checkout .tdx-page-article__body #payment {
  background: var(--tdx-tile);
  padding: var(--tdx-space-8);
}

.woocommerce-checkout .tdx-page-article__body #order_review .shop_table th,
.woocommerce-checkout .tdx-page-article__body #order_review .shop_table td {
  padding: var(--tdx-space-4);
  border-bottom: 1px solid var(--tdx-line);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
}

.woocommerce-checkout .tdx-page-article__body #order_review .shop_table thead th {
  font: var(--tdx-weight-bold) var(--tdx-text-xs)/1.2 var(--tdx-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tdx-muted);
}

/* Checkout buttons */
.woocommerce-checkout .tdx-page-article__body a.button,
.woocommerce-checkout .tdx-page-article__body button.button,
.woocommerce-checkout .tdx-page-article__body input[type="submit"].button,
.woocommerce-checkout .tdx-page-article__body #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  background: var(--tdx-black);
  color: var(--tdx-paper);
  border: none;
  border-radius: var(--tdx-radius-pill);
  font: var(--tdx-weight-medium) 1rem/1 var(--tdx-font);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
}

.woocommerce-checkout .tdx-page-article__body a.button:hover,
.woocommerce-checkout .tdx-page-article__body button.button:hover,
.woocommerce-checkout .tdx-page-article__body #place_order:hover {
  background: var(--tdx-slate);
  color: var(--tdx-paper);
}


/* =========================================================
   WOOCOMMERCE — THANK YOU  (CSS only; no template override)
   Scoped under the page.php content wrapper (.tdx-page-article__body) — cart/checkout render via page.php, not the WC content wrapper
   ========================================================= */

.woocommerce-order-received .tdx-page-article__body .woocommerce-thankyou-order-details {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tdx-space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdx-space-6);
}

.woocommerce-order-received .tdx-page-article__body .woocommerce-thankyou-order-details li {
  display: flex;
  flex-direction: column;
  gap: var(--tdx-space-1);
}

.woocommerce-order-received .tdx-page-article__body .woocommerce-thankyou-order-details strong {
  font: var(--tdx-weight-medium) var(--tdx-text-body)/1.3 var(--tdx-font);
  color: var(--tdx-ink);
}

/* Order details table on thank-you */
.woocommerce-order-received .tdx-page-article__body .woocommerce-table--order-details th,
.woocommerce-order-received .tdx-page-article__body .woocommerce-table--order-details td {
  padding: var(--tdx-space-4);
  border-bottom: 1px solid var(--tdx-line);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
}


/* =========================================================
   WOOCOMMERCE — NOTICES (all WC pages)
   .woocommerce-message / .woocommerce-info / .woocommerce-error
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--tdx-space-4) var(--tdx-space-6);
  margin-bottom: var(--tdx-space-6);
  border: 1px solid var(--tdx-line);
  border-left-width: 4px;
  background: var(--tdx-tile);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-ink);
  list-style: none;
  border-radius: var(--tdx-radius-control);
}

/* WC absolutely-positions a status icon where our tightened padding puts text —
   the colored border-left already carries the status (codex sweep 2026-06-12) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message {
  border-left-color: var(--tdx-accent);
}

.woocommerce-info {
  border-left-color: var(--tdx-muted);
}

.woocommerce-error {
  border-left-color: #c0392b;
}

.woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Notice buttons (e.g. "View cart") */
.woocommerce-message a.button,
.woocommerce-info a.button {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--tdx-black);
  color: var(--tdx-paper);
  border: none;
  border-radius: var(--tdx-radius-pill);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  text-decoration: none;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
  float: right;
  margin-left: var(--tdx-space-4);
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--tdx-slate);
}

/* WC shop/single-product content wrapper owns the fixed-nav clearance ONCE,
   on the shared parent of both the notices and the product/loop. Inner
   containers (.tdx-pdp/.tdx-shop-page) keep only their section spacing. */
.wc-content-wrapper { padding-top: var(--tdx-nav-h); }

/* Notices inherit the page container width (the wrapper itself is bare for
   width; align notices to content without touching .tdx-pdp's own box). */
.wc-content-wrapper > .woocommerce-notices-wrapper {
  max-width: var(--tdx-container);
  margin-inline: auto;
  padding-inline: var(--tdx-gutter);
}

/* When a notice is present it already provides the below-nav spacing, so the
   product/loop drops most of its own top padding and sits a normal gap below
   the notice (avoids a double gap). Only applies when a notice exists, so the
   no-notice top offset is unchanged. Selector out-specifies .woocommerce
   div.product.tdx-pdp (0,3,1) via div.product.tdx-pdp. */
.wc-content-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) div.product.tdx-pdp,
.wc-content-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) .tdx-shop-page {
  padding-top: var(--tdx-space-6);
}



/* =========================================================
   Interior pages (legal / policy) — readability fixes (2026-06-14)
   1. Drop the 72ch cap — no narrow reading column on a wide page.
   2. Static heading sizes — no clamp()/viewport scaling on legal pages.
   3. Contain list bullets inside the text column — fixes left-margin bleed (esp. mobile).
   Appended as an override; can be folded into the .tdx-page-article block later.
   ========================================================= */
.tdx-page-article__body { max-width: none; }
.tdx-page-article__title { font-size: 2.25rem; }

.tdx-page-article__body h2 {
  font-size: 1.5rem;
  margin-top: var(--tdx-space-10);
  margin-bottom: var(--tdx-space-4);
}
.tdx-page-article__body h3 {
  font-size: 1.2rem;
  margin-top: var(--tdx-space-8);
  margin-bottom: var(--tdx-space-4);
}

.tdx-page-article__body ul,
.tdx-page-article__body ol {
  padding-left: 1.5em;
  margin-bottom: var(--tdx-space-6);
}
.tdx-page-article__body ul { list-style: disc; }
.tdx-page-article__body ol { list-style: decimal; }
.tdx-page-article__body li {
  margin-bottom: 0.4rem;
  line-height: 1.7;
}


/* =========================================================
   AJAX ADD-TO-CART — Floating toast (2026-06-14)
   No-JS fallback remains the server-side in-flow .woocommerce-*
   notice block above; this toast is the enhanced, no-reload path.
   ========================================================= */
.tdx-toast {
  position: fixed;
  top: calc(var(--tdx-nav-h) + var(--tdx-space-5));
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: var(--tdx-container);
  padding-inline: var(--tdx-gutter);
  z-index: 1100;
  pointer-events: none; /* only the inner card is interactive */
}

.tdx-toast[hidden] {
  display: none;
}

/* Inner card — reuses the notice look (tile bg, hairline, accent left rule) */
.tdx-toast__card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--tdx-space-4);
  flex-wrap: wrap;
  background: var(--tdx-tile);
  border: 1px solid var(--tdx-line);
  border-left: 4px solid var(--tdx-accent);
  border-radius: var(--tdx-radius-control);
  padding: var(--tdx-space-4) var(--tdx-space-6);
  box-shadow: var(--tdx-shadow-pop);
  font: var(--tdx-weight-regular) var(--tdx-text-sm)/1.4 var(--tdx-font);
  color: var(--tdx-ink);
  opacity: 1;
}

/* Error variant — red left rule (mirrors .woocommerce-error) */
.tdx-toast--error .tdx-toast__card {
  border-left-color: #c0392b;
}

/* Info variant — neutral/muted left rule for variation guidance nudges.
   Distinct from success-gold (--tdx-accent) and error-red. */
.tdx-toast--info .tdx-toast__card {
  border-left-color: var(--tdx-muted);
}

.tdx-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
}

/* View cart link */
.tdx-toast__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--tdx-black);
  color: var(--tdx-paper);
  border: none;
  border-radius: var(--tdx-radius-pill);
  font: var(--tdx-weight-medium) var(--tdx-text-sm)/1 var(--tdx-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-toast__link:hover,
.tdx-toast__link:focus {
  background: var(--tdx-slate);
  color: var(--tdx-paper);
}

/* Dismiss button */
.tdx-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--tdx-radius-pill);
  color: var(--tdx-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--tdx-t-fast) var(--tdx-ease),
              background var(--tdx-t-fast) var(--tdx-ease);
}

.tdx-toast__close:hover,
.tdx-toast__close:focus {
  color: var(--tdx-ink);
  background: var(--tdx-line);
}

/* Entrance/exit — opacity always; transform only when motion is welcome */
.tdx-toast .tdx-toast__card {
  transition: opacity var(--tdx-t-med) var(--tdx-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .tdx-toast .tdx-toast__card {
    transition: opacity var(--tdx-t-med) var(--tdx-ease),
                transform var(--tdx-t-med) var(--tdx-ease);
  }
  /* Pre-show / hiding state slides up slightly */
  .tdx-toast.tdx-toast--enter .tdx-toast__card {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Hiding state — fades regardless of motion preference */
.tdx-toast.tdx-toast--enter .tdx-toast__card {
  opacity: 0;
}

/* Mobile: full width minus gutters (max-width + padding-inline already do this) */
@media (max-width: 700px) {
  .tdx-toast {
    top: calc(var(--tdx-nav-h) + var(--tdx-space-4));
  }
  .tdx-toast__card {
    padding: var(--tdx-space-4);
  }
}