/* PStyle — Shop styles (loaded on the Shop Home page, product archive/single,
   product_collection taxonomy, and the Smart Apron page).
   main.css (global) is already loaded; only shop-specific rules live here.
   Scope: 3 pillars (Signature Collection / Smart Apron / Curated Essentials),
   catalog grid, product cards with restrained hover, collection filter bar,
   single-product two-column, Smart Apron atmospheric sub-brand sections.
   No cart / checkout — editorial, not e-commerce-y. Responsive 375 → 1440.
   All raw values come from tokens.css via var(--…). */

/* ============================================================ Shop home: hero */
/* padding-bottom was 0 while the hero and the pillars were both white; the
   pillars moved to the muted surface (2026-08-12), so the white hero band needs
   a closing edge of its own. See projects.css for the same reasoning. */
.ps-shop-hero {
  padding-bottom: var(--sp-5);
}

.ps-shop-hero__head {
  max-width: var(--container-narrow);
}

.ps-shop-hero__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-shop-hero__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================ Shop home: pillars
   Three editorial pillars. The middle (Smart Apron) is inverted to anthracite so
   the sub-brand reads as a distinct world even in the pillar grid.
   The SECTION ground is .ps-surface--muted (page-shop.php); the .ps-pillar cards
   keep their own white ground (and --dark keeps anthracite) — white cards on the
   muted band is the intended separation, so those declarations stay. */
.ps-shop-pillars {
  padding-top: var(--sp-6);
}

.ps-shop-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.ps-pillar {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease);
}

/* A dark island inside a light section. It paints the anthracite ground, so it
   also has to re-scope the tokens the way .ps-surface--dark does — otherwise the
   card inherits --ink (#111) from the muted section around it and any text added
   straight to the card, rather than inside .ps-pillar__link, renders at 1.13:1.
   Today every child sets its own colour so nothing is broken, which is exactly
   why this is worth pinning down now rather than after someone adds a line. */
.ps-pillar--dark {
  --ink: var(--white);
  --muted: var(--muted-invert);
  --line: var(--line-invert);
  --line-strong: var(--line-strong-invert);
  --warm-grey: var(--surface-elevated-dark);
  background: var(--anthracite);
  border-color: transparent;
  color: var(--white);
}

.ps-pillar__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  color: var(--ink);
}

.ps-pillar--dark .ps-pillar__link {
  color: var(--white);
}

.ps-pillar:hover,
.ps-pillar:focus-within {
  border-color: var(--accent);
}

.ps-pillar--dark:hover,
.ps-pillar--dark:focus-within {
  border-color: var(--white);
}

.ps-pillar__index {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  color: var(--accent);
}

.ps-pillar--dark .ps-pillar__index {
  color: var(--white);
}

.ps-pillar__body {
  display: block;
  flex: 1 1 auto;
}

.ps-pillar__name {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.08;
}

.ps-pillar__desc {
  display: block;
  margin-bottom: var(--sp-5);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--muted);
}

.ps-pillar--dark .ps-pillar__desc {
  color: var(--muted-invert);
}

.ps-pillar__cta {
  color: var(--ink);
}

.ps-pillar--dark .ps-pillar__cta {
  color: var(--white);
}

.ps-pillar:hover .ps-pillar__cta,
.ps-pillar:focus-within .ps-pillar__cta {
  color: var(--accent);
}

.ps-pillar--dark:hover .ps-pillar__cta,
.ps-pillar--dark:focus-within .ps-pillar__cta {
  color: var(--white);
}

/* Gentle stagger across the three pillars. */
.ps-pillar.ps-reveal:nth-child(2) { transition-delay: 0.08s; }
.ps-pillar.ps-reveal:nth-child(3) { transition-delay: 0.16s; }

/* ============================================================ Shop home: note + all-CTA
   .ps-shop-note is the Shop page's one dark band (.ps-surface--dark ps-on-dark in
   page-shop.php). Its prose text inherits the surface colour (var(--white)) and
   any link inside picks up --accent-on-dark from the Surfaces block, so no
   per-section inversion rules are needed here. */
.ps-shop-note .ps-prose {
  font-size: var(--step-1);
  line-height: 1.7;
}

.ps-shop-allcta {
  border-top: 1px solid var(--line);
}

.ps-shop-allcta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}

.ps-shop-allcta__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  color: var(--ink);
}

/* ============================================================ Archive / tax intro */
/* Muted since 2026-08-12 — needs a closing edge, as the projects archive. */
.ps-shop-intro {
  padding-bottom: var(--sp-5);
}

.ps-shop-intro__head {
  max-width: var(--container-narrow);
}

.ps-shop-intro__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-shop-intro__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
}

.ps-shop-intro__subbrand {
  margin: var(--sp-3) 0 0;
}

/* Collection filter — plain text links, no framework. */
.ps-shop-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-shop-filter__link {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
}

.ps-shop-filter__link:hover,
.ps-shop-filter__link:focus-visible {
  color: var(--accent);
}

.ps-shop-filter__link.is-current {
  color: var(--ink);
}

/* ============================================================ Catalog grid
   Ground comes from .ps-surface--white on the <section> (archive-product.php and
   taxonomy-product_collection.php). No background declaration here: this file
   loads after main.css, so restating it would beat the surface utility. */
.ps-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-4);
}

/* ============================================================ Product card
   Mirrors the project card family; restrained media hover (scale + slight
   opacity), accent only on the collection label + Enquire link. */
.ps-product-card {
  min-width: 0;
}

.ps-product-card__link {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.ps-product-card__link:hover,
.ps-product-card__link:focus-visible {
  color: var(--ink);
}

.ps-product-card__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--warm-grey);
}

.ps-product-card__media .ps-media,
.ps-product-card__media .ps-ph {
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.ps-product-card__link:hover .ps-media,
.ps-product-card__link:hover .ps-ph,
.ps-product-card__link:focus-visible .ps-media,
.ps-product-card__link:focus-visible .ps-ph {
  transform: scale(1.04);
  opacity: 0.92;
}

.ps-product-card__body {
  display: block;
}

.ps-product-card__collection {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--accent);
}

.ps-product-card__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
  color: var(--ink);
}

.ps-product-card__desc {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--muted);
}

.ps-product-card__enquire {
  color: var(--ink);
}

.ps-product-card__link:hover .ps-product-card__enquire,
.ps-product-card__link:focus-visible .ps-product-card__enquire {
  color: var(--accent);
}

/* Stagger down the rows (repeating every 3 columns). */
.ps-product-card.ps-reveal:nth-child(3n + 2) { transition-delay: 0.07s; }
.ps-product-card.ps-reveal:nth-child(3n + 3) { transition-delay: 0.14s; }

/* ============================================================ Single product */
.ps-product-single {
  padding-top: var(--sp-6);
}

.ps-product-single__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.ps-product-single__media {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-3));
  overflow: hidden;
  background: var(--warm-grey);
}

.ps-product-single__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.ps-product-single__thumb {
  margin: 0;
  overflow: hidden;
  background: var(--warm-grey);
}

.ps-product-single__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-product-single__info {
  padding-top: var(--sp-2);
}

.ps-product-single__collection {
  margin: 0 0 var(--sp-2);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--accent);
}

.ps-product-single__collection a {
  color: var(--accent);
}

.ps-product-single__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-product-single__lead {
  margin: 0 0 var(--sp-4);
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
}

.ps-product-single__desc {
  margin-bottom: var(--sp-4);
  font-size: var(--step-0);
  line-height: 1.7;
}

/* Spec (Material) — hairline definition row. */
.ps-product-single__spec {
  margin: 0 0 var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-product-single__spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em var(--sp-3);
  align-items: baseline;
}

.ps-product-single__spec-label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

.ps-product-single__spec-value {
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink);
}

/* Enquiry block — the only commercial action (no price, no cart). */
.ps-product-single__enquire {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-product-single__enquire-note {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
}

.ps-product-single__cta {
  margin-bottom: var(--sp-3);
}

.ps-product-single__enquire-hint {
  margin: 0;
  max-width: 44ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

/* More from this collection. Ground: .ps-surface--muted in single-product.php —
   the grey pause between the white product detail and the white prev/next nav. */
.ps-product-more {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.ps-product-more__head {
  margin-bottom: var(--sp-5);
}

.ps-product-more__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.08;
}

.ps-shop-grid--more {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
}

/* Load-bearing: these cards sit on the muted .ps-product-more section, where the
   default --warm-grey card media ground would merge into the section. */
.ps-shop-grid--more .ps-product-card__media {
  background: var(--white);
}

/* Prev / next product. */
.ps-product-nav {
  border-top: 1px solid var(--line);
}

.ps-product-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}

.ps-product-nav__side--next {
  text-align: right;
}

.ps-product-nav__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35em;
  color: var(--ink);
}

.ps-product-nav__side--next .ps-product-nav__link {
  align-items: flex-end;
}

.ps-product-nav__dir {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

.ps-product-nav__ttl {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--w-reg);
  line-height: 1.15;
}

.ps-product-nav__link:hover .ps-product-nav__ttl,
.ps-product-nav__link:focus-visible .ps-product-nav__ttl {
  color: var(--accent);
}

/* ============================================================ Smart Apron page
   Atmospheric sub-brand world — a full anthracite canvas a step apart from the
   rest of the shop. The whole page carries .ps-on-dark for inverted controls. */
.ps-smart {
  background: var(--anthracite);
  color: var(--white);
}

.ps-smart-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 3rem + 10vw, 12rem);
  border-bottom: 1px solid var(--line-invert);
}

.ps-smart-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
}

.ps-smart-hero__eyebrow {
  color: var(--muted-invert);
}

.ps-smart-hero__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-5);
  font-weight: var(--w-reg);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--white);
}

.ps-smart-hero__lead {
  max-width: 54ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  font-style: italic;
  line-height: 1.35;
  color: var(--muted-invert);
}

/* A soft accent glow, low and off to one side — subtle, never a large fill. */
.ps-smart-hero__glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(24, 66, 182, 0.28), rgba(24, 66, 182, 0) 62%);
  pointer-events: none;
  z-index: 0;
}

.ps-smart-note .ps-prose {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--muted-invert);
}

.ps-smart-note .ps-prose a {
  color: var(--white);
}

/* Section heads (shared by traits + range). */
.ps-smart-section__head {
  max-width: var(--container-narrow);
  margin-bottom: var(--sp-5);
}

.ps-smart-section__head .ps-eyebrow {
  color: var(--muted-invert);
}

.ps-smart-section__heading {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.06;
  color: var(--white);
}

/* Differentiators. */
.ps-smart-traits {
  border-top: 1px solid var(--line-invert);
}

.ps-smart-traits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.ps-smart-trait {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-invert);
}

.ps-smart-trait__no {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  color: var(--accent-tint);
}

.ps-smart-trait__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.15;
  color: var(--white);
}

.ps-smart-trait__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--muted-invert);
}

.ps-smart-trait.ps-reveal:nth-child(2) { transition-delay: 0.08s; }
.ps-smart-trait.ps-reveal:nth-child(3) { transition-delay: 0.16s; }

/* Product range row (dark cards). */
.ps-smart-range {
  border-top: 1px solid var(--line-invert);
}

.ps-smart-range__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-5);
}

.ps-smart-product {
  min-width: 0;
}

.ps-smart-product__link {
  display: flex;
  flex-direction: column;
  color: var(--white);
}

.ps-smart-product__link:hover,
.ps-smart-product__link:focus-visible {
  color: var(--white);
}

.ps-smart-product__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--surface-recessed-dark);
}

.ps-smart-product__media .ps-media,
.ps-smart-product__media .ps-ph {
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.ps-smart-product__link:hover .ps-media,
.ps-smart-product__link:hover .ps-ph,
.ps-smart-product__link:focus-visible .ps-media,
.ps-smart-product__link:focus-visible .ps-ph {
  transform: scale(1.04);
  opacity: 0.9;
}

.ps-smart-product__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
  color: var(--white);
}

.ps-smart-product__desc {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--muted-invert);
}

.ps-smart-product__more {
  color: var(--white);
}

.ps-smart-product__link:hover .ps-smart-product__more,
.ps-smart-product__link:focus-visible .ps-smart-product__more {
  color: var(--accent-tint);
}

.ps-smart-range__all {
  margin: var(--sp-6) 0 0;
}

.ps-smart-range__all .ps-textlink {
  color: var(--white);
}

.ps-smart-range__all .ps-textlink:hover,
.ps-smart-range__all .ps-textlink:focus-visible {
  color: var(--accent-tint);
}

/* Smart Apron closing CTA. */
.ps-smart-cta {
  border-top: 1px solid var(--line-invert);
  text-align: center;
}

.ps-smart-cta__inner {
  margin-inline: auto;
}

.ps-smart-cta__eyebrow {
  color: var(--muted-invert);
}

.ps-smart-cta__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  color: var(--white);
}

/* ============================================================ Responsive */
@media (max-width: 980px) {
  .ps-shop-pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .ps-shop-grid,
  .ps-shop-grid--more {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }

  .ps-smart-traits__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Two-column product detail collapses to one; media stops sticking. */
  .ps-product-single__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .ps-product-single__media {
    position: static;
    top: auto;
  }
}

@media (max-width: 560px) {
  .ps-shop-grid,
  .ps-shop-grid--more {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ps-smart-range__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ps-shop-allcta__inner {
    align-items: flex-start;
  }

  .ps-product-nav__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .ps-product-nav__side--next {
    text-align: left;
  }

  .ps-product-nav__side--next .ps-product-nav__link {
    align-items: flex-start;
  }
}

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-product-card__link:hover .ps-media,
  .ps-product-card__link:hover .ps-ph,
  .ps-product-card__link:focus-visible .ps-media,
  .ps-product-card__link:focus-visible .ps-ph,
  .ps-smart-product__link:hover .ps-media,
  .ps-smart-product__link:hover .ps-ph,
  .ps-smart-product__link:focus-visible .ps-media,
  .ps-smart-product__link:focus-visible .ps-ph {
    transform: none;
    opacity: 1;
  }
}