/*
Theme Name:   Talia & Sage
Theme URI:    https://taliaandsage.com
Description:  Lightweight block theme for Talia & Sage — personal care & wellness tools. Tokens live in theme.json; this file is the single hand-written CSS layer for what theme.json cannot express (component layout, blend modes, motion, focus).
Author:       Talia & Sage
Version:      0.1.7
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  talia-sage
*/

/* ============================================================
   0 · COMPONENT CONSTANTS
   The only place in this file where a raw value may appear.
   Everything below references --wp--preset--* / --wp--custom--*
   (from theme.json) or a --ts-* constant defined here.
   ============================================================ */
:root {
  --ts-mast-pad-block: 18px;
  --ts-ann-gap: clamp(20px, 5vw, 64px);
  --ts-ann-pad-block: 10px;
  --ts-nav-gap: clamp(16px, 2.2vw, 32px);
  --ts-utils-gap: clamp(12px, 1.6vw, 22px);
  --ts-brand-gap: 5px;
  --ts-mark-w: 20px;
  --ts-word-w: clamp(132px, 15vw, 186px);
  --ts-mark-w-foot: 24px;
  --ts-word-w-foot: 190px;
  --ts-rail-gap: clamp(12px, 1.8vw, 26px);
  --ts-rail-min: 210px;
  --ts-tile-gap: clamp(10px, 1.4vw, 20px);
  --ts-tile-pad: clamp(20px, 2.4vw, 32px);
  --ts-foot-col-gap: clamp(24px, 4vw, 56px);
  --ts-foot-text: rgba(244, 239, 233, 0.68);
  --ts-legal-tracking: 0.07em;
  --ts-hover-scale: 1.05;
  --ts-t-fast: 0.25s;
  --ts-t-img: 0.6s;
  --ts-t-tile: 0.8s;
}

/* ============================================================
   1 · BASE
   ============================================================ */
img { max-width: 100%; height: auto; display: block; }

/* Global focus — 2px brass, 3px offset, everywhere. */
:focus-visible {
  outline: var(--wp--custom--focus--outline);
  outline-offset: var(--wp--custom--focus--offset);
}

/* Kicker utility — 10.5px / .26em / uppercase, used across sections. */
.ts-kicker {
  font-size: var(--wp--preset--font-size--kicker);
  font-weight: var(--wp--custom--kicker--weight);
  letter-spacing: var(--wp--custom--kicker--letter-spacing);
  text-transform: uppercase;
}

/* Buttons: theme.json styles the block; this adds the transition +
   the light (on-photo) variant used over hero/tile imagery. */
.wp-block-button__link {
  transition: background-color var(--ts-t-fast), color var(--ts-t-fast), border-color var(--ts-t-fast);
}
.is-style-ts-light .wp-block-button__link,
.ts-btn-light .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  border-color: currentColor;
  background: transparent;
}
.is-style-ts-light .wp-block-button__link:hover,
.ts-btn-light .wp-block-button__link:hover,
.is-style-ts-light .wp-block-button__link:focus-visible,
.ts-btn-light .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

/* WooCommerce "Sale!" badge — suppressed store-wide by design decision:
   every product carries a struck MRP permanently; a perpetual badge would
   read as a discount bazaar. Covers both block and classic markup. */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge,
.woocommerce span.onsale,
span.onsale {
  display: none !important;
}

/* ============================================================
   2 · ANNOUNCEMENT BAR
   ============================================================ */
.ts-ann {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--canvas);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ts-ann-gap);
  padding: var(--ts-ann-pad-block) var(--wp--preset--spacing--60);
}
.ts-ann p {
  margin: 0;
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: var(--wp--custom--announce--letter-spacing);
  text-transform: uppercase;
}
/* Mobile: first message only; all three from 900px. */
.ts-ann p:nth-child(n + 2) { display: none; }
@media (min-width: 900px) {
  .ts-ann p:nth-child(n + 2) { display: block; }
}

/* ============================================================
   3 · MASTHEAD — sticky; nav · centred lockup · utils
   ============================================================ */
/* Three fixed zones (.ts-mast__nav / __brand / __utils) are the ONLY grid
   children — WP can inject whatever wrappers it likes inside them without
   ever breaking the 1fr auto 1fr geometry. */
.ts-mast {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--wp--preset--color--canvas);
  border-bottom: 1px solid var(--wp--custom--hairline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--ts-mast-pad-block) var(--wp--preset--spacing--60);
}
.ts-mast__nav   { justify-self: start; }
.ts-mast__brand { justify-self: center; }
.ts-mast__utils { justify-self: end; }

/* Mobile: two rows — lockup centred on row 1, nav toggle left and
   utils right on row 2. */
@media (max-width: 880px) {
  .ts-mast {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--wp--preset--spacing--20);
  }
  .ts-mast__brand { grid-row: 1; grid-column: 1 / -1; }
  .ts-mast__nav   { grid-row: 2; grid-column: 1; }
  .ts-mast__utils { grid-row: 2; grid-column: 2; }
}
/* Icons-only utils under 480px */
@media (max-width: 480px) {
  .ts-util-label { display: none; }
}
.ts-util-account {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-brand-gap);
}

/* Primary nav (core/navigation) */
.ts-nav .wp-block-navigation__container { gap: var(--ts-nav-gap); }
.ts-nav .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: var(--wp--custom--nav--letter-spacing);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.ts-nav .wp-block-navigation-item__content:hover,
.ts-nav .wp-block-navigation-item__content:focus-visible {
  border-bottom-color: var(--wp--preset--color--ink);
  text-decoration: none;
}
/* Mobile overlay panel inherits the palette */
.ts-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--canvas);
  color: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--60);
}

/* Brand lockup — leaf above wordmark, centred, sage.
   Rendered via CSS mask so the SVG files stay cached and inherit
   currentColor exactly like inline fill="currentColor" would. */
.ts-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ts-brand-gap);
  color: var(--wp--preset--color--sage);
  text-decoration: none;
}
.ts-logo {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--ts-mask) center / contain no-repeat;
  mask: var(--ts-mask) center / contain no-repeat;
}
.ts-logo--mark {
  --ts-mask: url(assets/svg/leaf.svg);
  width: var(--ts-mark-w);
  aspect-ratio: 106 / 140;
}
.ts-logo--word {
  --ts-mask: url(assets/svg/wordmark.svg);
  width: var(--ts-word-w);
  aspect-ratio: 562 / 78;
}

/* Utils — right aligned, uppercase micro links */
.ts-utils {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ts-utils-gap);
}
.ts-utils a {
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: var(--wp--custom--utils--letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
}
.ts-utils a:hover,
.ts-utils a:focus-visible { text-decoration: underline; }

/* Mini-cart (Bag) — strip Woo chrome down to the type system */
.ts-utils .wc-block-mini-cart { font-size: var(--wp--preset--font-size--nav); }
.ts-utils .wc-block-mini-cart__button {
  padding: 0;
  background: transparent;
  color: inherit;
  letter-spacing: var(--wp--custom--utils--letter-spacing);
  text-transform: uppercase;
}

/* ============================================================
   4 · HERO — full-bleed image, scrim, overlay copy. No CLS:
   the section owns its height; the image is absolutely placed.
   ============================================================ */
.ts-hero {
  position: relative;
  min-height: var(--wp--custom--hero-min-height);
  display: grid;
  place-items: end start;
  background: var(--wp--preset--color--sand); /* paint before the image arrives */
  overflow: hidden;
}
.ts-hero .ts-hero-img,
.ts-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ts-hero .ts-scrim {
  position: absolute;
  inset: 0;
  background: var(--wp--custom--scrim);
}
.ts-hero-copy {
  position: relative;
  padding: var(--wp--preset--spacing--60);
  color: var(--wp--preset--color--paper);
  max-width: 640px;
}
.ts-hero-copy .ts-kicker {
  display: block;
  margin-bottom: var(--wp--preset--spacing--30);
  opacity: 0.85;
}
.ts-hero-copy h1 { margin: 0 0 var(--wp--preset--spacing--30); }
.ts-hero-copy p {
  max-width: 38ch;
  opacity: 0.9;
  margin: 0 0 var(--wp--preset--spacing--40);
}

/* ============================================================
   5 · SECTIONS
   ============================================================ */
.ts-sec {
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
}
.ts-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--50);
}
.ts-sec-head .ts-kicker {
  color: var(--wp--preset--color--sage);
  display: block;
  margin-bottom: var(--wp--preset--spacing--20);
}
.ts-link {
  font-size: var(--wp--preset--font-size--button);
  letter-spacing: var(--wp--custom--nav--letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  padding-bottom: 2px;
}

/* ============================================================
   6 · PRODUCT CARD
   Square paper frame, image at 82% with multiply blend (drops
   marketplace white backgrounds), subtle scale on hover.
   ============================================================ */
.ts-card { text-decoration: none; color: inherit; display: block; }
.ts-frame {
  position: relative;
  aspect-ratio: 1 / 1;               /* sized before the image loads — no CLS */
  background: var(--wp--preset--color--paper);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ts-frame img {
  width: var(--wp--custom--card--image-width);
  height: auto;
  mix-blend-mode: multiply;
  transition: transform var(--ts-t-img) var(--wp--custom--ease);
}
.ts-card:hover .ts-frame img,
.ts-card:focus-within .ts-frame img,
.wc-block-product:hover .ts-frame img,
.wc-block-product:focus-within .ts-frame img { transform: scale(var(--ts-hover-scale)); }

.ts-badge {
  position: absolute;
  top: var(--wp--preset--spacing--30);
  left: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--canvas);
  font-size: var(--wp--custom--card--badge-size);
  letter-spacing: var(--wp--custom--nav--letter-spacing);
  text-transform: uppercase;
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  z-index: 1;
}

.ts-meta { padding-top: var(--wp--preset--spacing--30); }
.ts-cat {
  font-size: var(--wp--custom--card--cat-size);
  letter-spacing: var(--wp--custom--card--cat-tracking);
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  display: block;
  margin-bottom: var(--ts-brand-gap);
}
.ts-card h3,
.ts-meta h3 { margin: 0; font-size: var(--wp--preset--font-size--card); }
.ts-desc {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--mute);
  margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
}
.ts-price {
  font-size: var(--wp--preset--font-size--small);
  display: flex;
  gap: var(--wp--preset--spacing--20);
  align-items: baseline;
  margin: 0;
}
.ts-price s,
.ts-price del {
  color: var(--wp--preset--color--mute);
  font-size: var(--wp--preset--font-size--small);
}
/* Rating slot — reserved, renders nothing today. When real reviews exist,
   populate .ts-rating and it slots under the price untouched. */
.ts-rating {
  font-size: var(--wp--preset--font-size--kicker);
  color: var(--wp--preset--color--mute);
  margin-top: var(--wp--preset--spacing--20);
  letter-spacing: 0.04em;
}
.ts-rating:empty { display: none; }

/* ============================================================
   7 · PRODUCT RAIL — mobile scroll-snap, 4-up grid from 1100px
   ============================================================ */
.ts-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--ts-rail-min), 1fr);
  gap: var(--ts-rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--wp--preset--spacing--30);
  scrollbar-width: thin;
}
.ts-rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) {
  .ts-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

/* ============================================================
   8 · COLLECTION TILES
   ============================================================ */
.ts-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ts-tile-gap);
}
@media (max-width: 800px) { .ts-tiles { grid-template-columns: 1fr; } }
.ts-tile {
  position: relative;
  aspect-ratio: 4 / 5;               /* sized pre-image — no CLS */
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  display: grid;
  place-items: end start;
  text-decoration: none;
  color: var(--wp--preset--color--paper);
}
.ts-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ts-t-tile) var(--wp--custom--ease);
}
.ts-tile:hover img,
.ts-tile:focus-visible img { transform: scale(var(--ts-hover-scale)); }
.ts-tile .ts-veil {
  position: absolute;
  inset: 0;
  background: var(--wp--custom--tile-veil);
}
.ts-tile .ts-tile-copy { position: relative; padding: var(--ts-tile-pad); }
.ts-tile h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: var(--wp--preset--font-size--tile);
  margin: 0 0 var(--wp--preset--spacing--10);
}
.ts-tile p {
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.86;
  margin: 0 0 var(--wp--preset--spacing--20);
  max-width: 26ch;
}
.ts-tile .ts-count {
  font-size: var(--wp--custom--card--badge-size);
  letter-spacing: var(--wp--custom--card--cat-tracking);
  text-transform: uppercase;
  opacity: 0.7;
}

/* ============================================================
   9 · TRUST ROW — hairline-separated quad
   ============================================================ */
.ts-trust {
  border-top: 1px solid var(--wp--custom--hairline);
  border-bottom: 1px solid var(--wp--custom--hairline);
}
.ts-trust-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wp--custom--hairline);
}
@media (max-width: 760px) { .ts-trust-in { grid-template-columns: repeat(2, 1fr); } }
.ts-trust-in > div {
  background: var(--wp--preset--color--canvas);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  text-align: center;
}
.ts-trust-in b {
  display: block;
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 400;
  margin-bottom: var(--wp--preset--spacing--10);
}
.ts-trust-in span {
  font-size: var(--wp--preset--font-size--nav);
  color: var(--wp--preset--color--mute);
}

/* ============================================================
   10 · SPLIT EDITORIAL (How to use)
   ============================================================ */
.ts-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--wp--preset--color--sage);
  color: var(--wp--preset--color--paper);
}
@media (max-width: 860px) { .ts-split { grid-template-columns: 1fr; } }
.ts-split .ts-split-img {
  min-height: 340px;
  background: var(--wp--preset--color--sand);
  position: relative;
  overflow: hidden;
}
.ts-split .ts-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-split .ts-split-txt {
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
}
/* Brass on sage tops out at 2.67:1 — cream carries the split accent instead
   (brass stays the kicker accent on all light grounds). */
.ts-split .ts-kicker { color: var(--wp--preset--color--canvas); }
.ts-split p { opacity: 0.85; max-width: 42ch; margin: 0; }
.ts-split ol {
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.ts-split li {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) 0;
  border-top: 1px solid var(--wp--custom--hairline-on-ink);
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.92;
}
.ts-split li b {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-weight: 400;
  opacity: 0.78;   /* .55 measured 3.14:1 on sage; .78 ~ 5.2:1 */
  min-width: var(--wp--preset--spacing--40);
}

/* ============================================================
   11 · QUOTE
   ============================================================ */
.ts-quote {
  background: var(--wp--preset--color--sand);
  text-align: center;
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}
.ts-quote blockquote,
.ts-quote p {
  margin: 0 auto;
  max-width: 19ch;
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-style: italic;
  font-size: var(--wp--preset--font-size--quote);
  line-height: 1.22;
}

/* ============================================================
   12 · FOOTER — ink ground, 4 columns, legal line
   ============================================================ */
.ts-foot {
  background: var(--wp--preset--color--ink);
  color: var(--ts-foot-text);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.ts-foot-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: var(--ts-foot-col-gap);
}
@media (max-width: 820px) { .ts-foot-grid { grid-template-columns: 1fr 1fr; } }

/* Footer lockup — cream, left aligned, slightly larger */
.ts-foot .ts-brand {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--canvas);
}
.ts-foot .ts-logo--mark { width: var(--ts-mark-w-foot); }
.ts-foot .ts-logo--word { width: var(--ts-word-w-foot); max-width: 100%; }
.ts-foot .ts-blurb {
  font-size: var(--wp--preset--font-size--small);
  max-width: 30ch;
  margin: var(--wp--preset--spacing--30) 0 0;
}

.ts-foot h4 {
  font-size: var(--wp--custom--card--cat-size);
  letter-spacing: var(--wp--custom--button--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--preset--color--leaf);
  margin: 0 0 var(--wp--preset--spacing--30);
  font-weight: var(--wp--custom--kicker--weight);
}
.ts-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--20);
}
.ts-foot li a {
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  color: inherit;
}
.ts-foot li a:hover,
.ts-foot li a:focus-visible { color: var(--wp--preset--color--canvas); }

.ts-legal {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--custom--hairline-on-ink);
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: var(--ts-legal-tracking);
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
}
.ts-legal p { margin: 0; }

/* ============================================================
   13 · REDUCED MOTION — kill every transition/animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   14 · WOO BLOCK MAPPING — product-collection cards, price
   block, excerpt clamp. The card internals (.ts-frame/.ts-meta)
   are set as classNames on inner blocks in the templates.
   ============================================================ */
/* Rail/grid as the product-template <ul>; items reset to plain blocks */
ul.ts-rail, ul.ts-grid { list-style: none; margin: 0; padding-left: 0; }
.ts-rail li.wc-block-product,
.ts-grid li.wc-block-product { margin: 0; }

/* Product-image block inside the frame: kill its own spacing, blend on paper */
.ts-frame .wc-block-components-product-image,
.ts-frame .wp-block-woocommerce-product-image { margin: 0; width: 100%; display: grid; place-items: center; }
.ts-frame .wp-block-woocommerce-product-image a { display: grid; place-items: center; width: 100%; }
.ts-frame .wp-block-woocommerce-product-image img {
  width: var(--wp--custom--card--image-width);
  height: auto;
  mix-blend-mode: multiply;
  transition: transform var(--ts-t-img) var(--wp--custom--ease);
}

/* Title block inside card meta */
.ts-meta .wp-block-post-title {
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--card);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}
.ts-meta .wp-block-post-title a { text-decoration: none; }
.ts-meta .wp-block-post-title a:hover { text-decoration: underline; }

/* Category kicker via post-terms */
.ts-cat.wp-block-post-terms,
.ts-meta .wp-block-post-terms {
  font-size: var(--wp--custom--card--cat-size);
  letter-spacing: var(--wp--custom--card--cat-tracking);
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  display: block;
  margin-bottom: var(--ts-brand-gap);
}
.ts-meta .wp-block-post-terms a { text-decoration: none; color: inherit; }

/* One-line description from the excerpt block */
.ts-desc.wp-block-post-excerpt,
.ts-meta .wp-block-post-excerpt {
  margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
}
.ts-meta .wp-block-post-excerpt__excerpt {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--mute);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ts-meta .wp-block-post-excerpt__more-text,
.ts-meta .wp-block-post-excerpt__more-link { display: none; }

/* Price block: sale renders <del>MRP</del> <ins>selling</ins>; a product
   with no sale price renders a single amount — no empty <del>, and both
   states are one line tall, so no layout shift between them. */
.ts-price .wc-block-components-product-price,
.ts-meta .wc-block-components-product-price {
  font-size: var(--wp--preset--font-size--small);
  display: flex;
  gap: var(--wp--preset--spacing--20);
  align-items: baseline;
}
.wc-block-components-product-price del,
.wc-block-components-product-price .wc-block-components-product-price__regular {
  color: var(--wp--preset--color--mute);
  text-decoration: line-through;
}
.wc-block-components-product-price ins,
.wc-block-components-product-price .wc-block-components-product-price__value {
  text-decoration: none;
  font-weight: 400;
}

/* ============================================================
   15 · SHOP ARCHIVE — grid + header
   ============================================================ */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ts-rail-gap);
  row-gap: var(--wp--preset--spacing--50);
}
@media (min-width: 800px)  { .ts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ts-grid { grid-template-columns: repeat(4, 1fr); } }

.ts-shop-head { margin-bottom: var(--wp--preset--spacing--50); }
.ts-shop-head .wp-block-query-title {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: var(--wp--preset--font-size--heading);
  font-weight: 400;
  margin: 0;
}
.ts-shop-head .wp-block-term-description {
  color: var(--wp--preset--color--mute);
  max-width: 46ch;
  margin-top: var(--wp--preset--spacing--20);
}

/* Woo pagination + results count quieted to the type system */
.wc-block-product-collection .wp-block-query-pagination,
.woocommerce-result-count, .woocommerce-ordering {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--mute);
}

/* ============================================================
   16 · SINGLE PRODUCT
   ============================================================ */
.ts-single .wp-block-woocommerce-product-image-gallery,
.ts-single .woocommerce-product-gallery {
  background: var(--wp--preset--color--paper);
}
.ts-single .wp-block-woocommerce-product-image-gallery img,
.ts-single .woocommerce-product-gallery img { mix-blend-mode: multiply; }
.ts-single .wp-block-post-title {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: var(--wp--preset--font-size--heading);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.ts-single .wc-block-components-product-price { font-size: var(--wp--preset--font-size--lead); }
.ts-single .wp-block-woocommerce-breadcrumbs {
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: var(--wp--custom--nav--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin-bottom: var(--wp--preset--spacing--40);
}
.ts-single .wp-block-woocommerce-breadcrumbs a { text-decoration: none; color: inherit; }
/* Quantity + add-to-cart aligned to the button system */
.ts-single .quantity .qty {
  border: 1px solid var(--wp--custom--hairline);
  background: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--30);
  font-family: inherit;
}

/* ============================================================
   17 · CART / CHECKOUT — minimal: let tokens carry it, align
   Woo's component buttons with the theme button system.
   ============================================================ */
.wc-block-components-button:not(.is-link) {
  border-radius: 0;
  font-size: var(--wp--preset--font-size--button);
  font-weight: var(--wp--custom--button--weight);
  letter-spacing: var(--wp--custom--button--letter-spacing);
  text-transform: uppercase;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--canvas);
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible {
  background: var(--wp--preset--color--sage);
  color: var(--wp--preset--color--paper);
}
.wc-block-components-panel, .wc-block-components-sidebar,
.wc-block-components-order-summary { background: var(--wp--preset--color--paper); }

/* ============================================================
   18 · FIXUPS (design pass 1)
   ============================================================ */
/* Woo auto-appends a customer-account icon into the saved nav menu on
   block themes — we carry our own Account util; never render Woo's. */
.ts-nav .wp-block-woocommerce-customer-account { display: none !important; }

/* How-to split: until the 5th photo exists the image pane is empty sand.
   On mobile that stacks as dead space above the text — hide it when empty.
   Desktop keeps it as the visual counterweight to the sage half. */
@media (max-width: 860px) {
  .ts-split .ts-split-img:empty { display: none; }
}