/*
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.
Author:       COFACTOR / Nextopia
Template:     twentytwentyfive
Version:      3.1.1
Text Domain:  master-storefront
*/

/* COFACTOR · self-hosted variable fonts (latin subset).
   Paths resolve relative to the built theme's style.css. */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
  font-weight: 400 600;
  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: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow / label utility — mono, tracked, uppercase */
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  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: 16px !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(--p-stage-light-2);
  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: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.9rem 1rem 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 1rem 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.wc-block-product .wc-block-components-product-button,
ul.products li.product .button {
  padding: 0.6rem 1rem 1rem;
  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: 0.875rem;
  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: -0.02em;
}
.woocommerce-result-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  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 2rem 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--foreground);
}

/* breadcrumbs: mono eyebrow register */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  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(--p-stage-light-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
body.single-product .product_title {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
body.single-product .price,
body.single-product .wp-block-woocommerce-product-price {
  font-size: 1.25rem;
  color: var(--foreground);
}
body.single-product .woocommerce-product-details__short-description {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
}
/* product meta (SKU, categories) = data register */
body.single-product .product_meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
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: "JetBrains 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: 1.25rem;
  letter-spacing: -0.01em;
}

/* ---- 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(--p-stage-light-2);
  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: -0.01em;
}
/* 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 1rem;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
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(--p-neutral-0);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-3);
  padding: 0.25rem 0.5rem;
  min-height: 0;
  min-width: 0;
}