/*
Theme Name:   Master Storefront
Description:  Child of Twenty Twenty-Five. Token-driven storefront — brand identity lives in tokens.css primitives + theme.json; swap the primitive block to rebrand. Skincare vertical.
Author:       COFACTOR / Nextopia
Template:     twentytwentyfive
Version:      3.1.1
Text Domain:  master-storefront
*/

/* COFACTOR SUPPLY · self-hosted fonts (latin subset) — SKINCARE.
   Paths resolve relative to the built theme's style.css.

   TYPE LAW, ENCODED:
     · General Sans is the voice — everything that RUNS a view.
       Body, UI, controls, nav. Headings no longer live here.
     · Raleway is the display — every heading, at every step.
       The four display steps AND the whole title-* ladder, down to
       title-sm. The italic is still the wit (max one line per view).
     · Martian Mono is the evidence — every number that makes a claim.
       Deadpan.

   Supersedes Fraunces (2026-08-21), which held the display slot for one
   day, and Instrument Serif + Fragment Mono before it (2026-08-20). The
   face boundary moved with this swap: it used to sit at ~30px, between
   title-2xl and title-xl, because a chunky old-style became a texture
   below that. Raleway does not, so the boundary is now the semantic one
   — heading or not — rather than a size. See docs/TYPOGRAPHY.md.

   THE WEIGHT RANGE IS BAKED IN, ON PURPOSE. Raleway ships wght 100–900;
   the cut here is 400–700 because that is what the ladder calls for, and
   the italic is pinned to 400 because the wit has never needed a second
   weight. Martian Mono's width is pinned the same way (wdth 87.5): an
   evidence row is a row, not a banner. Regenerate with
   scripts/build-fonts.py if a pin ever changes. */

/* General Sans — the voice. Fontshare, 4 static cuts. */
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/general-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Raleway — the display. OFL, Matt McInerney / Pablo Impallari / Rodrigo
   Fuenzalida. Variable on wght, cut 400–700. No optical-size axis, so a
   product name and a hero are one drawing at two sizes; the tracking rungs
   in primitives.css are what compensate. */
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/raleway-latin-display.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/raleway-latin-display-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Martian Mono — the evidence. OFL, Evil Martians. wdth pinned 87.5. */
@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   Engine · baseline.

   NO THEME HEADER HERE, ON PURPOSE. WordPress reads Theme Name / Template /
   Version out of the first comment in style.css, and every one of those is a
   per-brand value. build.mjs generates the header from brand.json and
   prepends it, followed by the brand's fonts.css, then this file.

   Brand values come from tokens.css (semantic vars) — this file only wires
   them into WP/TT5 surfaces and carries the system's global laws.
--------------------------------------------------------------------------- */


/* TT5 paints .wp-block-post-content as well as body — set both or a seam shows */
body,
body .wp-block-post-content {
  background-color: var(--background);
  color: var(--foreground);
}

body {
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* EVERY heading element takes the display face, not just the utility classes.
   The title and display utility ladder covers markup this theme writes; a block-editor
   h2 or a WooCommerce template h1 is neither, and before 2026-08-21 those
   inherited the body face. Two rules, not one: tracking below is tuned for
   h1–h3 and would over-tighten an h4. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3 {
  letter-spacing: var(--p-tracking-n20);
  text-wrap: balance;
}

/* Law: data is mono, and mono is tabular — prices/specs never shift width */
.font-mono,
code, kbd, samp, pre,
.woocommerce-Price-amount {
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow / label utility — mono, tracked, uppercase */
.eyebrow {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-13);
  letter-spacing: var(--p-tracking-12);
  text-transform: uppercase;
  color: var(--ink-3);
}

::selection {
  background: var(--brand);
  color: var(--brand-foreground);
}

/* Kill the 300ms double-tap zoom delay on interactive controls */
button, a, summary, label,
[role="button"], [role="tab"] {
  touch-action: manipulation;
}

/* iOS Safari auto-zooms any focused control under 16px — pin the floor on phones */
@media (max-width: 767.98px) {
  input, select, textarea {
    font-size: var(--p-text-16) !important;
  }
}

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

/* ===========================================================================
   WOO CHROME — the surfaces every brand shares. All values from tokens.css
   semantic vars; never hardcode a brand color here.
   =========================================================================== */

/* ---- product grid cards (WC block product-template + classic ul.products) -- */
body.woocommerce-page .wc-block-product,
body.woocommerce-page ul.products li.product {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}
body.woocommerce-page .wc-block-product:hover,
body.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--elevation-pop);
  transform: translateY(-2px);
}

/* product image sits on a light stage, not raw white */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-post-featured-image,
ul.products li.product img.attachment-woocommerce_thumbnail {
  background: var(--surface);
  margin: 0;
}
.wc-block-product img,
ul.products li.product img {
  transition: transform 300ms var(--ease-out-quart);
}
.wc-block-product:hover img,
ul.products li.product:hover img {
  transform: scale(1.03);
}

/* card text block: padding + hierarchy */
.wc-block-product .wp-block-post-title,
ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--p-text-15);
  font-weight: 600;
  letter-spacing: var(--p-tracking-n10);
  padding: 0.9rem var(--p-space-4) 0;
  margin: 0;
}
.wc-block-product .wp-block-post-title a {
  text-decoration: none;
  color: var(--foreground);
}
.wc-block-product .wc-block-components-product-price,
ul.products li.product .price {
  padding: 0.15rem var(--p-space-4) 0;
  font-size: var(--p-text-13);
  color: var(--ink-2);
}
.wc-block-product .wc-block-components-product-button,
ul.products li.product .button {
  padding: 0.6rem var(--p-space-4) var(--p-space-4);
  margin: 0;
}

/* ---- buttons: one system, brand fill, radius-md, glow on hover ------------ */
body.woocommerce .button,
body.woocommerce-page .button,
.wc-block-components-button,
.wc-block-components-product-button .wp-block-button__link,
.single_add_to_cart_button,
button[name="apply_coupon"],
.wp-element-button {
  background: var(--brand);
  color: var(--brand-foreground);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--p-text-14);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
}
body.woocommerce .button:hover,
.wc-block-components-button:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.single_add_to_cart_button:hover,
.wp-element-button:hover {
  background: var(--brand-hover);
  color: var(--brand-foreground);
  box-shadow: var(--shadow-brand);
}

/* ---- shop header row: title + result count + sorting ---------------------- */
body.woocommerce-shop h1.wp-block-query-title,
body.post-type-archive-product h1 {
  font-size: 2.1rem;
  letter-spacing: var(--p-tracking-n20);
}
.woocommerce-result-count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-13);
  letter-spacing: var(--p-tracking-4);
  color: var(--ink-3);
}
.woocommerce-ordering select,
.wc-block-sort-select__select {
  background: var(--control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.45rem var(--p-space-8) 0.45rem var(--p-space-3);
  font-family: inherit;
  font-size: var(--p-text-14);
  color: var(--foreground);
}

/* breadcrumbs: mono eyebrow register */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-12);
  letter-spacing: var(--p-tracking-8);
  text-transform: uppercase;
  color: var(--ink-3);
}
.woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
  color: var(--ink-3);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover,
.wp-block-woocommerce-breadcrumbs a:hover {
  color: var(--brand);
}

/* ---- PDP ------------------------------------------------------------------ */
body.single-product .woocommerce-product-gallery,
body.single-product .wp-block-woocommerce-product-image-gallery {
  background: var(--surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
body.single-product .product_title {
  font-size: 2rem;
  letter-spacing: var(--p-tracking-n20);
}
body.single-product .price,
body.single-product .wp-block-woocommerce-product-price {
  font-size: var(--p-text-20);
  color: var(--foreground);
}
body.single-product .woocommerce-product-details__short-description {
  color: var(--ink-2);
  font-size: var(--p-text-16);
  line-height: 1.6;
  max-width: 46ch;
}
/* product meta (SKU, categories) = data register */
body.single-product .product_meta {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-12);
  letter-spacing: var(--p-tracking-6);
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--border);
  padding-top: var(--p-space-4);
}
body.single-product .product_meta a { color: var(--ink-2); text-decoration: none; }
/* quantity input */
body.single-product .quantity .qty,
.wc-block-components-quantity-selector {
  background: var(--control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
/* tabs → quiet underline pattern */
body.single-product .wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border);
}
body.single-product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
}
body.single-product .woocommerce-tabs ul.tabs li a {
  color: var(--ink-3);
  font-weight: 500;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--foreground);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* related products heading */
body.single-product section.related > h2,
body.single-product .related.products > h2 {
  font-size: var(--p-text-20);
  letter-spacing: var(--p-tracking-n10);
}

/* ---- cart + checkout blocks ----------------------------------------------- */
.wc-block-cart .wc-block-cart-items,
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  border-color: var(--border);
}
.wc-block-cart-item__image img {
  background: var(--surface);
  border-radius: var(--radius-md);
}
.wc-block-components-product-name {
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 600;
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--foreground);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.wc-block-components-checkout-step__heading .wc-block-components-title {
  letter-spacing: var(--p-tracking-n10);
}
/* free-shipping / notice banners onto brand-muted, not default blue */
.wc-block-components-notice-banner.is-info {
  background: var(--brand-muted);
  border-color: var(--brand);
  color: var(--foreground);
}

/* ---- account pages -------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.7rem var(--p-space-4);
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--p-text-15);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--foreground);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--brand);
}

/* ---- store notices -------------------------------------------------------- */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--brand);
  background: var(--brand-muted);
  color: var(--foreground);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand); }
.woocommerce-error {
  border-top-color: var(--destructive);
}

/* ---- sale badge: mono chip, not a bubble ---------------------------------- */
.wc-block-components-product-sale-badge,
span.onsale {
  background: var(--ink-band);
  color: var(--brand-foreground);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-11);
  letter-spacing: var(--p-tracking-8);
  text-transform: uppercase;
  border-radius: var(--radius-3);
  padding: var(--p-space-1) var(--p-space-2);
  min-height: 0;
  min-width: 0;
}