/* =============================================================
   LabelPal single voice — WooCommerce storefront layer.
   STARTED 2026-08-16 (build order step 3): the shared product card,
   applied to the storefront grid first.

   Reads brand-tokens.css variables only — no hardcoded colours
   except the --sv-* names this layer owns, mirroring the namespace
   landing.css established. Scope is deliberately tight: the
   product-collection grid and its card parts. Page chrome, the
   single-voice PDP templates and the teacher tool arrive in later
   slices; until then TT25's own surroundings remain.

   Selector truth: every class below was measured off the live
   category page (2026-08-16), not taken from documentation.
   ============================================================= */

:root {
  --sv-display: "Bricolage Grotesque", var(--lp-display);
  --sv-gold: #F4B942; /* Gold Star — reserved for the act of creating */

  /* Pin WordPress to light. brand-tokens.css declares
     `color-scheme: light dark` for the static site, but TT25 implements
     no dark palette — in a dark-preferring browser that leak washes out
     link/text UA colours on white (seen live 2026-08-16). Same call the
     landing made: crisp light now, a real dark pass later. This file
     loads after the tokens, so this wins. */
  color-scheme: light;
}

/* the grid needs air once cards carry borders */
.wp-block-woocommerce-product-collection .wc-block-product-template {
  gap: var(--lp-s-5, 20px);
}

/* --- the card ------------------------------------------------ */
.wp-block-woocommerce-product-collection .wc-block-product {
  background: var(--lp-surface);
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-radius);
  padding: 10px 10px 16px;
  transition: box-shadow var(--lp-dur-fast) var(--lp-ease-out),
              transform  var(--lp-dur-fast) var(--lp-ease-out);
}
.wp-block-woocommerce-product-collection .wc-block-product:hover {
  box-shadow: var(--lp-shadow-lift);
  transform: translateY(-2px);
}

/* image: soften into the card, quiet ground behind transparent art */
.wp-block-woocommerce-product-collection .wc-block-components-product-image {
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  background: var(--lp-surface-2);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
  object-fit: cover;
}

/* title in the display voice */
.wp-block-woocommerce-product-collection .wp-block-post-title {
  font-family: var(--sv-display);
  font-weight: 600;
  color: var(--lp-ink);
  font-size: 1.02rem;
  line-height: 1.25;
}
.wp-block-woocommerce-product-collection .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.wp-block-woocommerce-product-collection .wp-block-post-title a:hover {
  color: var(--lp-brand-deep);
}

/* price */
.wp-block-woocommerce-product-collection .wc-block-components-product-price {
  color: var(--lp-brand-deep);
  font-weight: 600;
}

/* add-to-basket: the .lp-btn idiom verbatim — ink ground, NEVER gold.
   Gold is rationed to the act of creating; a plain purchase is not it. */
.wp-block-woocommerce-product-collection .wc-block-components-product-button__button {
  font-size: 15px;
  line-height: 1.2;
  padding: 11px var(--lp-s-5, 20px);
  border: 1px solid transparent;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-ink);
  color: var(--lp-surface);
  transition: transform var(--lp-dur-fast) var(--lp-ease-out),
              filter    var(--lp-dur-fast) var(--lp-ease-out);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-button__button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-button__button:active {
  transform: translateY(0);
  filter: brightness(.96);
}

/* THE one earned gold in the grid: the customizer products' cards link
   into their designer instead of adding an undesigned product to the
   basket (markup swapped by label-pal-customizer's product-button
   filter). Opening the designer is the act of creating — the ration
   holds. Gold ground takes ink text: the landing's measured 5.36:1. */
.wc-block-product .lpc-design-cta-wrap {
  text-align: center;
  margin-bottom: 1rem;
}
.wc-block-product .lpc-design-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  padding: 11px var(--lp-s-5, 20px);
  border: 1px solid transparent;
  border-radius: var(--lp-radius-sm);
  background: var(--sv-gold);
  color: var(--lp-ink);
  text-decoration: none;
  transition: transform var(--lp-dur-fast) var(--lp-ease-out),
              filter    var(--lp-dur-fast) var(--lp-ease-out);
}
.wc-block-product .lpc-design-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.wc-block-product .lpc-design-cta:active {
  transform: translateY(0);
  filter: brightness(.97);
}

/* --- single product page (PDP) -------------------------------
   Scope: body.single-product (Woo body class, present in block
   themes too). The related-products strip at the bottom of a PDP
   renders through the same product-collection block, so the card
   rules above already dress it — nothing extra needed there. */

.single-product h1.wp-block-post-title {
  font-family: var(--sv-display);
  font-weight: 700;
  color: var(--lp-ink);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
}

/* the main price, unmistakably the price. The template marks the main
   price has-large-font-size and related-card prices has-small — the
   size bump rides that hook; the colour applies to both (the related
   cards already resolve brand-deep via the grid rules, same value). */
.single-product .wp-block-woocommerce-product-price {
  color: var(--lp-brand-deep);
  font-weight: 600;
}
.single-product .wp-block-woocommerce-product-price.has-large-font-size {
  font-size: 1.5rem;
}

/* native add-to-basket: the .lp-btn idiom (ink, never gold) */
.single-product .single_add_to_cart_button {
  font-size: 15px;
  line-height: 1.2;
  padding: 11px var(--lp-s-5, 20px);
  border: 1px solid transparent;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-ink);
  color: var(--lp-surface);
  transition: transform var(--lp-dur-fast) var(--lp-ease-out),
              filter    var(--lp-dur-fast) var(--lp-ease-out);
}
.single-product .single_add_to_cart_button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.single-product .single_add_to_cart_button:active {
  transform: translateY(0);
  filter: brightness(.96);
}

/* quantity stepper beside it */
.single-product .wc-block-components-quantity-selector {
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-radius-sm);
}
.single-product .wc-block-components-quantity-selector__button {
  color: var(--lp-ink);
}

/* breadcrumbs: quiet, ink-3, brand-deep on hover */
.single-product .wp-block-woocommerce-breadcrumbs,
.single-product .woocommerce-breadcrumb {
  color: var(--lp-ink-3);
}
.single-product .wp-block-woocommerce-breadcrumbs a,
.single-product .woocommerce-breadcrumb a {
  color: var(--lp-ink-3);
  text-decoration: none;
}
.single-product .wp-block-woocommerce-breadcrumbs a:hover,
.single-product .woocommerce-breadcrumb a:hover {
  color: var(--lp-brand-deep);
  text-decoration: underline;
}

/* description/reviews tabs: hairline rules, ink for the active voice */
.single-product .woocommerce-tabs ul.tabs li a {
  color: var(--lp-ink-2);
  font-weight: 600;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--lp-ink);
}

/* --- header nav: the ONE gold item -------------------------- */
/* "Start designing" carries className lp-nav-gold on the navigation
   link (menu post 4). Gold marks the act of creating — nothing else
   in the header earns it. */
.wp-block-navigation-item.lp-nav-gold a,
li.lp-nav-gold > a {
  background: var(--sv-gold);
  color: var(--lp-ink) !important;
  font-weight: 600;
  padding: 8px 14px !important;
  border-radius: var(--lp-radius-pill);
  text-decoration: none;
}
.wp-block-navigation-item.lp-nav-gold a:hover,
li.lp-nav-gold > a:hover {
  filter: brightness(1.05);
}

/* motion access fallback, same policy as the tokens file */
@media (prefers-reduced-motion: reduce) {
  .wp-block-woocommerce-product-collection .wc-block-product,
  .wp-block-woocommerce-product-collection .wc-block-components-product-button__button,
  .wc-block-product .lpc-design-cta,
  .single-product .single_add_to_cart_button {
    transition: none;
  }
  .wp-block-woocommerce-product-collection .wc-block-product:hover {
    transform: none;
  }
}