/* ==========================================================================
   Portafoglio Wallets — design system
   --------------------------------------------------------------------------
   Tokens mirror the reference template (ilbussetto.it): warm brown ink on an
   off-white ground, mint-green buttons, square corners, and uppercase headings
   tracked wide. Type is Instrument Sans, which is what the reference uses.
   ========================================================================== */

:root {
  /* Ink and ground */
  --pfw-ink: #5a4942;          /* warm brown — body text, headings, buttons  */
  --pfw-ink-soft: rgba(90, 73, 66, 0.62);
  --pfw-bg: #fafafa;
  --pfw-bg-alt: #f2efec;       /* alternating band                           */
  --pfw-border: #e2dfde;
  --pfw-white: #ffffff;

  /* Accents */
  --pfw-mint: #ddf8e8;         /* primary button fill                        */
  --pfw-mint-dark: #c6efd6;
  --pfw-sale: #f7004e;
  --pfw-badge: #5a4942;

  /* Type */
  --pfw-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pfw-tracking: 0.18em;      /* heading letter-spacing                     */

  /* Metrics */
  --pfw-radius: 0;
  --pfw-container: 1440px;
  --pfw-gutter: 1.25rem;
  --pfw-section-y: 3.5rem;
  --pfw-header-h: 104px;
}

@media (min-width: 1150px) {
  :root { --pfw-gutter: 2.5rem; --pfw-section-y: 5rem; }
}

/* --------------------------------------------------------------- resets -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pfw-bg);
  color: var(--pfw-ink);
  font-family: var(--pfw-font);
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* Headings are uppercase and widely tracked, as on the reference. The last
   letter's tracking is trimmed so centred headings sit optically centred. */
h1, h2, h3, h4, h5, h6, .pfw-h1, .pfw-h2, .pfw-h3, .pfw-h4, .pfw-h5, .pfw-h6 {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--pfw-tracking);
  line-height: 1.25;
}
.pfw-h1, h1 { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); line-height: 1.15; }
.pfw-h2, h2 { font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem); }
.pfw-h3, h3 { font-size: 1.125rem; }
.pfw-h4, h4 { font-size: 1rem; }
.pfw-h5, h5 { font-size: 0.875rem; }
.pfw-h6, h6 { font-size: 0.75rem; }

.pfw-smallcaps {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pfw-ink-soft);
}
.pfw-subdued { color: var(--pfw-ink-soft); }

/* Visually hidden, still read aloud. `.screen-reader-text` is WordPress's and
   WooCommerce's own class name — it must be defined here because this theme
   dequeues WooCommerce's stylesheet, which is what normally supplies it.
   Without it, labels like "Remove item" render as visible table headings. */
.pfw-sr,
.screen-reader-text,
.woocommerce .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Skip links and similar reveal themselves on focus. */
.screen-reader-text:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  width: auto; height: auto; padding: 0.75rem 1.25rem; margin: 0;
  clip: auto; clip-path: none;
  background: var(--pfw-ink); color: var(--pfw-bg); font-size: 0.8125rem;
}

/* Keyboard focus must stay visible: the theme removes default outlines on
   several controls, so it is restored explicitly rather than dropped. */
:focus-visible { outline: 2px solid var(--pfw-ink); outline-offset: 2px; }

/* ------------------------------------------------------------- layout ---- */
.pfw-container {
  width: 100%;
  max-width: var(--pfw-container);
  margin-inline: auto;
  padding-inline: var(--pfw-gutter);
}
.pfw-container--lg { max-width: 1680px; }
.pfw-section { padding-block: var(--pfw-section-y); }
.pfw-section--alt { background: var(--pfw-bg-alt); }
.pfw-section--bordered { border-top: 1px solid var(--pfw-border); }

.pfw-section-head {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* -------------------------------------------------------------- buttons -- */
.pfw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 2rem;
  border-radius: var(--pfw-radius);
  background: var(--pfw-mint);
  color: var(--pfw-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}
.pfw-btn:hover { background: var(--pfw-mint-dark); }
.pfw-btn--outline {
  background: transparent;
  border-color: var(--pfw-ink);
}
.pfw-btn--outline:hover { background: var(--pfw-ink); color: var(--pfw-bg); }
.pfw-btn--light {
  background: var(--pfw-white);
  border-color: var(--pfw-white);
}
.pfw-btn--light:hover { background: var(--pfw-ink); color: var(--pfw-white); }
.pfw-btn--block { width: 100%; }
.pfw-btn[disabled], .pfw-btn.is-disabled { opacity: 0.45; pointer-events: none; }

.pfw-link-underline {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ==========================================================================
   Demonstration notice
   --------------------------------------------------------------------------
   Ink ground so it reads as a system message rather than marketing, and it
   sits above the sticky header so it scrolls away once it has been seen.
   ========================================================================== */
.pfw-demo-bar {
  background: var(--pfw-ink);
  color: #fafafa;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.pfw-demo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-block: 0.5rem;
  text-align: center;
}
.pfw-demo-bar__tag {
  flex: 0 0 auto;
  border: 1px solid var(--pfw-mint);
  color: var(--pfw-mint);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.5625rem;
  padding: 0.1rem 0.45rem;
}
@media (max-width: 600px) {
  .pfw-demo-bar { font-size: 0.625rem; }
  .pfw-demo-bar__inner { gap: 0.4rem; padding-block: 0.45rem; }
  /* Label and sentence each take their own line rather than the sentence
     being clipped — an unreadable notice is no notice. */
  .pfw-demo-bar__inner > span { flex: 1 1 100%; min-width: 0; }
  .pfw-demo-bar__inner > .pfw-demo-bar__tag { flex: 0 0 auto; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.pfw-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--pfw-bg);
  border-bottom: 1px solid var(--pfw-border);
}
.pfw-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  min-height: 72px;
}
@media (min-width: 1150px) {
  .pfw-header__bar { min-height: var(--pfw-header-h); gap: 1rem; }
}

/* Grid items default to min-width:auto, which refuses to shrink below their
   content. Without this the wordmark pushes the header wider than the phone
   viewport and the whole page scrolls sideways. */
.pfw-header__bar > * { min-width: 0; }

/* The three-column bar cannot hold the controls either side of a ~200px
   wordmark on a narrow screen — the 1fr side columns split the leftover space
   evenly, so the three-icon right group is handed less than it needs and its
   icons run across the logo. (It never showed as page overflow, because the
   collision happens inside the viewport.) Below 600px the wordmark therefore
   drops to its own row and gets the full width, with the controls above it. */
@media (max-width: 599px) {
  .pfw-header__bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "left  spacer right"
      "logo  logo   logo";
    row-gap: 0.35rem;
    padding-block: 0.5rem;
    min-height: 0;
  }
  .pfw-header__left  { grid-area: left; }
  .pfw-header__right { grid-area: right; }
  .pfw-logo { grid-area: logo; padding-bottom: 0.15rem; }

  /* Two rows make the header tall, and it is sticky — on a 667px iPhone SE
     that was claiming 16% of the screen for the whole session. The strapline
     is decorative and barely legible at this size, so it goes, which brings
     the bar back to roughly the height of the single-row version. */
  .pfw-logo__tag { display: none; }
  .pfw-logo__name { font-size: 0.95rem; letter-spacing: 0.16em; }
}

.pfw-header__left, .pfw-header__right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 700px) {
  .pfw-header__left, .pfw-header__right { gap: 0.75rem; }
}
.pfw-header__right { justify-content: flex-end; }

.pfw-logo {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
  min-width: 0;
}
.pfw-logo__name {
  font-size: clamp(0.8rem, 0.55rem + 1.1vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
@media (min-width: 700px) {
  .pfw-logo__name { letter-spacing: 0.22em; }
}
.pfw-logo__tag {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--pfw-ink-soft);
}

.pfw-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
}
.pfw-iconbtn svg { width: 20px; height: 20px; }

.pfw-cart-count {
  position: absolute;
  top: 0.25rem;
  right: 0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--pfw-ink);
  color: var(--pfw-bg);
  font-size: 0.625rem;
  line-height: 1.05rem;
  text-align: center;
}
.pfw-cart-count:empty, .pfw-cart-count[data-count="0"] { display: none; }

/* ----------------------------------------------------------- navigation -- */
/* Starts at 1024px so a 12.9" iPad in portrait gets the real navigation
   rather than the phone drawer — the shop sidebar already appears at 1000px,
   so the drawer was the odd one out. The gap widens again at 1150px. */
.pfw-nav { display: none; }
@media (min-width: 1024px) {
  .pfw-nav { display: block; }
  /* The catalogue links live beside the wordmark now, so the hamburger is
     only for the drawer on smaller screens. */
  .pfw-iconbtn--menu { display: none; }
  .pfw-navbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.75rem;
    min-height: 44px;
  }
}

.pfw-nav__item { position: relative; }
.pfw-nav__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.pfw-nav__link:hover { color: var(--pfw-ink-soft); }

/* Dropdown. Opened on hover and on focus-within so it is reachable by keyboard. */
/* ----------------------------------------------------------- mega menu --- */
/* One panel spanning the window, holding every group at once. It is positioned
   against .pfw-header (sticky, so it is a containing block) rather than the
   list item, which is why the item opts out of `position: relative`. */
.pfw-nav__item--mega { position: static; }

.pfw-nav__link--trigger::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.pfw-nav__item--mega:hover .pfw-nav__link--trigger::after,
.pfw-nav__item--mega:focus-within .pfw-nav__link--trigger::after {
  transform: translateY(1px) rotate(-135deg);
}

.pfw-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pfw-bg);
  border-top: 1px solid var(--pfw-border);
  border-bottom: 1px solid var(--pfw-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 55;
}
.pfw-nav__item--mega:hover > .pfw-mega,
.pfw-nav__item--mega:focus-within > .pfw-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pfw-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 3rem;
  align-items: start;
  padding-block: 2.5rem 3rem;
}

.pfw-mega__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem;
}
.pfw-mega__col { display: grid; align-content: start; gap: 0.15rem; }

.pfw-mega__heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.9rem;
  color: var(--pfw-ink);
}
.pfw-mega__heading:hover { color: var(--pfw-ink-soft); }

.pfw-mega__link {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  color: var(--pfw-ink-soft);
  transition: color 0.15s ease;
}
.pfw-mega__link:hover { color: var(--pfw-ink); }
.pfw-mega__link--all { margin-top: 0.35rem; }

.pfw-mega__feature { display: grid; gap: 0.75rem; text-align: center; }
.pfw-mega__feature img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--pfw-bg-alt);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pfw-mega__feature:hover img { transform: scale(1.03); }
.pfw-mega__feature-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.pfw-mega__feature-sub {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pfw-ink-soft);
}

/* Below this the five columns need the whole width, so the promo card goes.
   This has to sit after the rules above: a media query adds no specificity, so
   a later `display: grid` would otherwise win and the card would drop beneath
   the columns at full width. */
@media (max-width: 1250px) {
  .pfw-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .pfw-mega__feature { display: none; }
}

/* ------------------------------------------------------- mobile drawer --- */
.pfw-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 22rem);
  background: var(--pfw-bg);
  z-index: 90;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 1.25rem;
}
.pfw-drawer.is-open { transform: none; }
.pfw-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pfw-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--pfw-border);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  list-style: none;
}
.pfw-drawer summary::-webkit-details-marker { display: none; }
.pfw-drawer details[open] summary { color: var(--pfw-ink-soft); }
.pfw-drawer details a { display: block; padding: 0.5rem 0 0.5rem 0.75rem; font-size: 0.8125rem; }
.pfw-drawer > a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--pfw-border);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pfw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 80;
}
.pfw-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Home — hero
   ========================================================================== */
.pfw-hero { position: relative; background: #000; }
/* width:100% is load-bearing. With only `aspect-ratio` and `min-height`, a box
   whose min-height exceeds width/ratio resolves its WIDTH from that height
   (420 x 2880/1328 = 911px), which pushed the page sideways on tablets. */
.pfw-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1328;
  min-height: 420px;
}
@media (max-width: 699px) {
  .pfw-hero__media { aspect-ratio: 750 / 1000; }
}
.pfw-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfw-hero__content {
  position: absolute;
  inset: auto auto 0 0;
  max-width: 520px;
  padding: var(--pfw-gutter);
  padding-bottom: clamp(1.5rem, 4vw, 3.5rem);
  color: #fafafa;
}
@media (min-width: 1150px) {
  .pfw-hero__content { padding-left: 2.5rem; }
}
.pfw-hero__title { color: inherit; }
.pfw-hero__cta { margin-top: 1.5rem; }

/* ------------------------------------------------------------- marquee --- */
.pfw-marquee {
  overflow: hidden;
  border-block: 1px solid var(--pfw-border);
  padding-block: 1.5rem;
  background: var(--pfw-bg);
}
.pfw-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: pfw-scroll 38s linear infinite;
}
.pfw-marquee__item {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-size: clamp(1.1rem, 0.8rem + 1.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: var(--pfw-tracking);
  white-space: nowrap;
}
.pfw-marquee__item img { width: clamp(44px, 5vw, 76px); height: auto; }
@keyframes pfw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pfw-marquee__track { animation: none; }
}

/* ------------------------------------------------- image with text over -- */
.pfw-feature { position: relative; }
/* width:100% for the same reason as .pfw-hero__media above. */
.pfw-feature__media { position: relative; width: 100%; aspect-ratio: 2000 / 700; min-height: 320px; }
@media (max-width: 699px) { .pfw-feature__media { aspect-ratio: 4 / 5; } }
.pfw-feature__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The lifestyle photography behind this section is light on the left, where
   the copy sits. Without a scrim the white type is unreadable. */
.pfw-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}
.pfw-feature__content {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: var(--pfw-gutter);
  max-width: 34rem;
  color: #fafafa;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1150px) { .pfw-feature__content { padding-left: 4rem; } }
.pfw-feature__eyebrow { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ----------------------------------------------------------- rich text --- */
.pfw-richtext {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.pfw-richtext__quote {
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
.pfw-richtext__mark { width: 40px; height: 40px; opacity: 0.8; }

/* ----------------------------------------------------------- media grid -- */
.pfw-mediagrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  grid-auto-rows: 180px;
}
@media (min-width: 700px)  { .pfw-mediagrid { grid-auto-rows: 290px; gap: 1.5rem; } }
@media (min-width: 1150px) { .pfw-mediagrid { gap: 1.875rem; } }

.pfw-mediagrid__item {
  position: relative;
  overflow: hidden;
  grid-column: span var(--col, 12);
  grid-row: span var(--row, 1);
}
@media (max-width: 699px) {
  /* Two up on phones, except the lead tile which stays full width. */
  .pfw-mediagrid__item { grid-column: span 6; }
  .pfw-mediagrid__item[style*="--col: 8"] { grid-column: span 12; }
}
.pfw-mediagrid__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pfw-mediagrid__item:hover img { transform: scale(1.06); }
/* Several of these tiles are light at the bottom, where the label sits. */
.pfw-mediagrid__item::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
.pfw-mediagrid__label {
  z-index: 1;
  position: absolute;
  inset: auto auto 0 0;
  padding: 1.25rem;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--pfw-tracking);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Product card
   ========================================================================== */
.pfw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}
@media (min-width: 700px)  { .pfw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1150px) { .pfw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pfw-card { position: relative; display: grid; gap: 1.25rem; }
/* The packshot sits directly on the page ground, as on the reference — no card
   surface behind it, and only enough padding to keep it off its neighbours. */
.pfw-card__figure {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: transparent;
}
.pfw-card__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2%;
}
/* Cards carry a single photograph — no hover cross-fade. The hover cue is the
   slight lift on the image instead, which cannot misrepresent the product. */
.pfw-card__figure img { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.pfw-card:hover .pfw-card__img--primary { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .pfw-card__figure img { transition: none; }
  .pfw-card:hover .pfw-card__img--primary { transform: none; }
}

.pfw-card__info { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.pfw-card__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
  max-width: 22ch;
}
.pfw-card__title:hover { color: var(--pfw-ink-soft); }

/* On a listing the price is set back, the way the reference does it — the name
   leads and the price supports it. The product page states it at full strength. */
.pfw-card__info .pfw-price { color: var(--pfw-ink-soft); }

.pfw-price { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; }
.pfw-price del { color: var(--pfw-ink-soft); text-decoration: line-through; }
.pfw-price ins { text-decoration: none; color: var(--pfw-sale); }

.pfw-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  background: var(--pfw-sale);
  color: #fff;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pfw-badge--line { background: var(--pfw-badge); left: auto; right: 0.75rem; }

/* Swatch chips under the card. These are real variation colours. */
.pfw-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.pfw-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(90, 73, 66, 0.25);
  display: inline-block;
}
.pfw-swatch--more { font-size: 0.625rem; color: var(--pfw-ink-soft); line-height: 0.85rem; }

/* ------------------------------------------------------------- carousel -- */
.pfw-carousel { position: relative; }
.pfw-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 0.5rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.pfw-carousel__track::-webkit-scrollbar { display: none; }
.pfw-carousel__track > * { scroll-snap-align: start; }
@media (min-width: 700px)  { .pfw-carousel__track { grid-auto-columns: calc(33.333% - 1rem); gap: 1.5rem; } }
@media (min-width: 1150px) { .pfw-carousel__track { grid-auto-columns: calc(25% - 1.125rem); } }

.pfw-carousel__btn {
  position: absolute;
  top: calc(50% - 4rem);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--pfw-white);
  border: 1px solid var(--pfw-border);
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.pfw-carousel__btn[hidden] { display: none; }
.pfw-carousel__btn--prev { left: -0.75rem; }
.pfw-carousel__btn--next { right: -0.75rem; }
.pfw-carousel__btn svg { width: 16px; height: 16px; }
@media (max-width: 699px) { .pfw-carousel__btn { display: none; } }

/* ==========================================================================
   Featured product (home)
   ========================================================================== */
.pfw-featured { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .pfw-featured { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}
/* Packshots sit on the page ground here too, matching the listing cards. */
.pfw-featured__media { position: relative; background: transparent; aspect-ratio: 1; }
.pfw-featured__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 6%;
}
/* The slide carries .pfw-featured too, so the active state has to restore grid
   rather than block — otherwise it overrides the two-column layout above. */
.pfw-featured__slide { display: none; }
.pfw-featured__slide.is-active { display: grid; }
.pfw-featured__dots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pfw-featured__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: rgba(90, 73, 66, 0.25);
}
.pfw-featured__dot.is-active { background: var(--pfw-ink); }
.pfw-featured__body { display: grid; gap: 1rem; justify-items: start; }
.pfw-featured__eyebrow { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pfw-ink-soft); }

/* ------------------------------------------------------- swatch picker --- */
.pfw-picker { display: grid; gap: 0.6rem; }
.pfw-picker__label { font-size: 0.75rem; }
.pfw-picker__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pfw-picker__chip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(90, 73, 66, 0.25);
  position: relative;
  transition: box-shadow 0.15s ease;
}
.pfw-picker__chip.is-active,
.pfw-picker__chip:hover {
  box-shadow: 0 0 0 1px var(--pfw-bg), 0 0 0 2px var(--pfw-ink);
}

/* ==========================================================================
   Newsletter / USP / footer
   ========================================================================== */
.pfw-newsletter { position: relative; }
/* The photograph is 2000x750. A fixed height with object-fit:cover cropped it
   to a slice, so from ~900px up the band takes the image's own proportions and
   the whole scene is visible. Below that the ratio would leave a band too
   short to hold the form, so it keeps a minimum height and crops instead.
   `width: 100%` guards the aspect-ratio/min-height trap noted elsewhere. */
.pfw-newsletter__media {
  position: relative;
  width: 100%;
  min-height: 420px;
}
@media (min-width: 1024px) {
  .pfw-newsletter__media {
    aspect-ratio: 2000 / 750;
    /* A floor, not a height: the ratio alone gives 332px at 900px wide, which
       is shorter than the sign-up form and clipped it. Above ~1100px the ratio
       wins and the photograph is shown whole. */
    min-height: 400px;
  }
}
.pfw-newsletter__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfw-newsletter__inner {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: inherit;
  gap: 1.15rem;
  text-align: center;
  padding: 4.5rem var(--pfw-gutter);
  color: #fafafa;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Grid and flex children default to min-width:auto and refuse to shrink below
   their content, which pushed the whole page sideways on narrow phones. */
.pfw-newsletter__inner > * { min-width: 0; max-width: 100%; }
.pfw-newsletter__inner h2 { overflow-wrap: break-word; }

.pfw-form { display: flex; gap: 0.5rem; width: min(100%, 26rem); }
.pfw-form input[type="email"] {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--pfw-border);
  border-radius: var(--pfw-radius);
  background: var(--pfw-white);
  color: var(--pfw-ink);
  font: inherit;
}
/* The submit label is long in Albanian; let it lose its generous side padding
   before it forces the row wider than the screen. */
.pfw-form .pfw-btn { flex: 0 1 auto; padding-inline: 1rem; white-space: nowrap; }
.pfw-form__note { font-size: 0.75rem; }

.pfw-usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  text-align: center;
}
@media (min-width: 900px) { .pfw-usp { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pfw-usp__item { display: grid; justify-items: center; gap: 0.5rem; }
.pfw-usp__item svg { width: 28px; height: 28px; }
.pfw-usp__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; }
.pfw-usp__text { font-size: 0.75rem; color: var(--pfw-ink-soft); max-width: 18rem; }

.pfw-footer {
  border-top: 1px solid var(--pfw-border);
  background: var(--pfw-white);
  padding-block: 3.5rem 2rem;
}
.pfw-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
@media (min-width: 900px) { .pfw-footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; } }
.pfw-footer__title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
}
.pfw-footer__list li { margin-bottom: 0.5rem; }
.pfw-footer__list a { font-size: 0.8125rem; color: var(--pfw-ink-soft); }
.pfw-footer__list a:hover { color: var(--pfw-ink); }
.pfw-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pfw-border);
  font-size: 0.75rem;
  color: var(--pfw-ink-soft);
}

/* ==========================================================================
   Shop / archive
   ========================================================================== */
.pfw-shop { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .pfw-shop { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; } }
/* Grid children will not shrink below their content without this, and a long
   category name then pushes the whole page sideways on a small phone. */
.pfw-shop > * { min-width: 0; }

.pfw-facets { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.pfw-facets summary { gap: 0.5rem; }
.pfw-facets summary,
.pfw-facets a { overflow-wrap: anywhere; }
.pfw-facets details { border-bottom: 1px solid var(--pfw-border); padding-bottom: 0.75rem; }
.pfw-facets summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.5rem 0;
}
.pfw-facets summary::-webkit-details-marker { display: none; }
.pfw-facets ul { display: grid; gap: 0.35rem; padding-top: 0.5rem; }
.pfw-facets a { font-size: 0.8125rem; color: var(--pfw-ink-soft); }
.pfw-facets a:hover, .pfw-facets a.is-active { color: var(--pfw-ink); }
.pfw-facets .count { color: var(--pfw-ink-soft); font-size: 0.75rem; }

.pfw-shop__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pfw-border);
}
/* A <select> takes its intrinsic width from its widest option, which on a
   320px screen is wider than the viewport. Clamping it is enough — the full
   label is still readable once the dropdown opens. */
.pfw-shop__bar .woocommerce-ordering { min-width: 0; max-width: 100%; }
.pfw-shop__bar select {
  /* Drop the platform control so the field matches the rest of the theme,
     and draw the chevron as a background so it cannot be clipped. */
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.75rem;
  /* Sized for the labels people actually read, not for the longest option —
     that one is "sort by price: low to high" and it dominated the bar. The
     closed field ellipsises; the open list still shows every option in full. */
  width: 100%;
  max-width: 17rem;
  padding: 0 2.5rem 0 0.9rem;
  border: 1px solid var(--pfw-border);
  border-radius: 0;
  background-color: var(--pfw-white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4942' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 15px 15px;
  font: inherit;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pfw-ink);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease;
}
.pfw-shop__bar select:hover { border-color: var(--pfw-ink); }
/* The open list is drawn by the OS, so only its own type can be set. */
.pfw-shop__bar select option {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}
/* The result count sits opposite it and should read as quiet meta. */
.pfw-shop__bar .woocommerce-result-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--pfw-ink-soft);
}

.pfw-breadcrumb {
  font-size: 0.6875rem;
  color: var(--pfw-ink-soft);
  padding-block: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pfw-breadcrumb a:hover { color: var(--pfw-ink); }

/* paginate_links( type => list ) emits <ul class="page-numbers"> whose items
   also carry .page-numbers. Styling that class alone therefore boxed the list
   itself into a single 40px cell and stacked the pages down the page — so the
   list and its links are addressed separately here. */
.pfw-pagination { margin-top: 3.5rem; }
.pfw-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pfw-pagination ul.page-numbers > li { display: block; margin: 0; }

.pfw-pagination a.page-numbers,
.pfw-pagination span.page-numbers {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pfw-border);
  background: var(--pfw-white);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--pfw-ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pfw-pagination a.page-numbers:hover { border-color: var(--pfw-ink); }

.pfw-pagination span.page-numbers.current {
  background: var(--pfw-ink);
  border-color: var(--pfw-ink);
  color: var(--pfw-bg);
}
/* The ellipsis is a marker, not a control. */
.pfw-pagination span.page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: 1.5rem;
  padding: 0;
  color: var(--pfw-ink-soft);
}
.pfw-pagination a.prev,
.pfw-pagination a.next { font-size: 1rem; }

/* On a phone the full run wraps and strands the next-page arrow on its own
   line, so the cells and gaps tighten just enough to keep one row. */
@media (max-width: 480px) {
  .pfw-pagination ul.page-numbers { gap: 0.3rem; }
  .pfw-pagination a.page-numbers,
  .pfw-pagination span.page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
  }
  .pfw-pagination span.page-numbers.dots { min-width: 1rem; }
}

/* ==========================================================================
   Single product
   ========================================================================== */
.pfw-pdp { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pfw-pdp { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: start; } }

.pfw-pdp__gallery { display: grid; gap: 0.75rem; }
.pfw-pdp__main { position: relative; aspect-ratio: 1; background: transparent; }
.pfw-pdp__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.pfw-pdp__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pfw-pdp__thumb {
  width: 4.5rem; height: 4.5rem;
  border: 1px solid var(--pfw-border);
  background: var(--pfw-white);
  padding: 0;
}
.pfw-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pfw-pdp__thumb.is-active { border-color: var(--pfw-ink); }

.pfw-pdp__summary { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) { .pfw-pdp__summary { position: sticky; top: calc(var(--pfw-header-h) + 1rem); } }
.pfw-pdp__price { font-size: 1.125rem; }
.pfw-pdp__desc { font-size: 0.875rem; line-height: 1.7; }
.pfw-pdp__desc p { margin: 0 0 0.85rem; }
.pfw-pdp__desc ul { list-style: disc; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

.pfw-qty { display: inline-flex; border: 1px solid var(--pfw-border); background: var(--pfw-white); }
.pfw-qty button { width: 2.75rem; height: 3rem; display: grid; place-items: center; }
.pfw-qty input {
  width: 3rem; height: 3rem; text-align: center; border: 0; background: transparent;
  font: inherit; -moz-appearance: textfield;
}
.pfw-qty input::-webkit-outer-spin-button,
.pfw-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pfw-accordion { border-top: 1px solid var(--pfw-border); }
.pfw-accordion details { border-bottom: 1px solid var(--pfw-border); }
.pfw-accordion summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
}
.pfw-accordion summary::-webkit-details-marker { display: none; }
.pfw-accordion__body { padding-bottom: 1rem; font-size: 0.8125rem; color: var(--pfw-ink-soft); }


/* ==========================================================================
   WooCommerce — cart, checkout, account, notices
   --------------------------------------------------------------------------
   WooCommerce's own stylesheets are dequeued (see pfw_dequeue_block_styles),
   so everything these pages need is defined here rather than layered over it.
   ========================================================================== */
.pfw-page { padding-block: 2.5rem 4rem; }
.pfw-page__head { display: grid; justify-items: center; gap: 0.75rem; text-align: center; margin-bottom: 2.5rem; }

.pfw-prose { max-width: 46rem; margin-inline: auto; font-size: 0.9375rem; line-height: 1.75; }
.pfw-prose h2 { margin: 2rem 0 0.75rem; }
.pfw-prose h3 { margin: 1.5rem 0 0.5rem; }
.pfw-prose p { margin: 0 0 1rem; }
.pfw-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.pfw-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.875rem; }
.pfw-prose th, .pfw-prose td { border: 1px solid var(--pfw-border); padding: 0.6rem 0.75rem; text-align: left; }
.pfw-prose th { background: var(--pfw-bg-alt); font-weight: 400; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.1em; }

/* ------------------------------------------------------------- notices --- */
/* WooCommerce draws its own tick with a ::before, which sat on top of the
   message text once its stylesheet was removed. The list is reset here. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.15rem;
  margin: 0 0 0.75rem;
  background: var(--pfw-bg-alt);
  border-left: 2px solid var(--pfw-ink);
  font-size: 0.8125rem;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-error { border-left-color: var(--pfw-sale); color: var(--pfw-sale); }
.woocommerce-error li { list-style: none; }
.woocommerce-message > .button,
.woocommerce-info > .button { margin-left: auto; min-height: 2.25rem; padding: 0.4rem 1rem; }
.woocommerce-notices-wrapper:empty { display: none; }

/* ------------------------------------------------------------- buttons --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  background: var(--pfw-mint);
  color: var(--pfw-ink);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: var(--pfw-mint-dark); }

/* The primary action — proceed to checkout, place order — is ink, not mint. */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--pfw-ink);
  color: var(--pfw-bg);
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: #463832; color: #fff; }

.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce button.button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   Cart
   ========================================================================== */
/* Items left, a sticky summary right — rather than a full-width table with the
   totals stranded underneath it.
   The grid is placed on the shortcode's own wrapper and the three children are
   positioned explicitly, which avoids overriding WooCommerce's large cart.php
   just to add a div. */
@media (min-width: 1000px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 0 3.5rem;
    align-items: start;
  }
  /* All three are placed explicitly. Pinning only the totals to row 2 worked
     while an "added to cart" notice occupied row 1, but WooCommerce still
     renders the notices wrapper when it is empty — so on a plain cart visit
     the form auto-placed into row 1 and the totals dropped underneath it
     instead of sitting alongside. */
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; grid-row: 2; }
  .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 2; }
  /* WooCommerce floats the totals block at 48% by default. */
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.woocommerce table.shop_table thead th {
  padding: 0 0.75rem 0.85rem 0;
  border-bottom: 1px solid var(--pfw-ink);
  text-align: left;
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pfw-ink-soft);
}
.woocommerce table.shop_table td {
  padding: 1.35rem 0.75rem 1.35rem 0;
  border-bottom: 1px solid var(--pfw-border);
  vertical-align: middle;
}
.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table thead th:last-child { text-align: right; padding-right: 0; }

/* Remove control: a quiet cross that only colours on hover. */
.woocommerce table.shop_table td.product-remove { width: 2.5rem; padding-right: 0; }
.woocommerce a.remove {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: var(--pfw-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce a.remove:hover { background: var(--pfw-sale); color: #fff; }

.woocommerce table.shop_table td.product-thumbnail { width: 7rem; }
.woocommerce table.shop_table td.product-thumbnail img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: var(--pfw-white);
}
.woocommerce table.shop_table td.product-name a {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--pfw-ink-soft); }
.woocommerce table.shop_table td.product-price { color: var(--pfw-ink-soft); white-space: nowrap; }
.woocommerce table.shop_table td.product-subtotal { white-space: nowrap; font-size: 0.9375rem; }

/* Coupon and update share one quiet row beneath the items.
   This stays a table cell — `display:flex` on a <td> drops it out of the
   table's column model and collapses the row to content width — so the
   children are laid out inline instead. */
.woocommerce table.shop_table td.actions {
  padding: 1.5rem 0 0;
  border-bottom: 0;
  text-align: left;
  overflow: hidden;
}
.woocommerce .coupon {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  float: left;
}
.woocommerce table.shop_table td.actions > button[name="update_cart"],
.woocommerce table.shop_table td.actions > input[name="update_cart"] { float: right; }
.woocommerce .coupon label { display: none; }
.woocommerce #coupon_code {
  min-height: 3rem;
  width: 11rem;
  padding: 0 0.85rem;
  border: 1px solid var(--pfw-border);
  background: var(--pfw-white);
  font: inherit;
  font-size: 0.8125rem;
}
.woocommerce td.actions > button[name="update_cart"],
.woocommerce td.actions input[name="update_cart"] { margin-left: auto; }

/* ---------------------------------------------------------- cart totals -- */
.cart_totals {
  background: var(--pfw-bg-alt);
  padding: 1.75rem;
}
@media (min-width: 1000px) {
  .cart_totals { position: sticky; top: calc(var(--pfw-header-h) + 1.5rem); }
}
.cart_totals h2 {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--pfw-border);
}
.cart_totals table.shop_table { font-size: 0.875rem; }
.cart_totals table.shop_table th {
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--pfw-border);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pfw-ink-soft);
  text-align: left;
  vertical-align: top;
  width: 38%;
}
.cart_totals table.shop_table td {
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--pfw-border);
  text-align: right;
}
.cart_totals tr.order-total th,
.cart_totals tr.order-total td { border-bottom: 0; font-size: 1rem; }
.cart_totals tr.order-total td { font-weight: 500; }

/* Shipping choices read as a list, not as table cells. */
.woocommerce ul#shipping_method { display: grid; gap: 0.5rem; margin: 0; text-align: left; }
.woocommerce ul#shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.woocommerce ul#shipping_method li input { margin: 0; accent-color: var(--pfw-ink); }
.woocommerce ul#shipping_method label { cursor: pointer; }
.woocommerce .woocommerce-shipping-destination,
.woocommerce .shipping-calculator-button,
.woocommerce .woocommerce-shipping-methods + p { font-size: 0.75rem; color: var(--pfw-ink-soft); }
.woocommerce .wc-proceed-to-checkout { margin-top: 1.5rem; }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; }

/* Empty cart */
.cart-empty.woocommerce-info { justify-content: center; text-align: center; }
.return-to-shop { text-align: center; margin-top: 1.5rem; }

/* ==========================================================================
   Checkout
   ========================================================================== */
@media (min-width: 900px) {
  form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 3.5rem;
    align-items: start;
  }
  form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  form.checkout #order_review { grid-column: 2; grid-row: 2; }
  .woocommerce .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}

#order_review_heading { font-size: 0.6875rem; letter-spacing: 0.16em; margin-bottom: 1rem; }
#order_review { background: var(--pfw-bg-alt); padding: 1.75rem; }
#order_review table.shop_table th,
#order_review table.shop_table td { border-bottom: 1px solid var(--pfw-border); }
#order_review table.shop_table td { text-align: right; }
/* Only the figures are right-aligned; the line item itself reads left. */
#order_review table.shop_table td.product-name { text-align: left; padding-right: 1rem; }
#order_review table.shop_table td.product-name .product-quantity { color: var(--pfw-ink-soft); }
#order_review table.shop_table th { text-align: left; }
#order_review table.shop_table tfoot tr:last-child th,
#order_review table.shop_table tfoot tr:last-child td { border-bottom: 0; font-size: 1rem; }

.woocommerce form .form-row { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.woocommerce form .form-row label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pfw-ink-soft);
}
.woocommerce form .form-row .required { text-decoration: none; color: var(--pfw-sale); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--pfw-border);
  border-radius: 0;
  background: var(--pfw-white);
  font: inherit;
  font-size: 0.875rem;
  color: var(--pfw-ink);
}
.woocommerce form .form-row textarea { min-height: 7rem; }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--pfw-ink); outline-offset: -1px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--pfw-sale); }
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 { font-size: 0.6875rem; letter-spacing: 0.16em; margin-bottom: 1.25rem; }

/* Select2 is WooCommerce's country dropdown. */
.woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4; padding: 0; color: var(--pfw-ink);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%; transform: translateY(-50%);
}

#payment { background: transparent; padding: 0; margin-top: 1.5rem; }
#payment ul.payment_methods {
  list-style: none;
  padding: 0 0 1.25rem;
  margin: 0;
  display: grid;
  gap: 0.85rem;
  border-bottom: 1px solid var(--pfw-border);
}
/* WooCommerce emits the radio and its label as siblings, so the row is a
   two-column grid — otherwise the radio stacks above the label. */
#payment ul.payment_methods li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.6rem;
  align-items: center;
}
#payment ul.payment_methods label {
  font-size: 0.8125rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pfw-ink);
  margin: 0;
}
#payment input[type="radio"] { accent-color: var(--pfw-ink); margin: 0; }
#payment ul.payment_methods .payment_box { grid-column: 2; }
#payment .payment_box { font-size: 0.75rem; color: var(--pfw-ink-soft); margin: 0; padding: 0; }
#payment .payment_box p { margin: 0; }
#payment .form-row.place-order { margin: 1.25rem 0 0; }
#payment #place_order { width: 100%; }
.woocommerce-terms-and-conditions-wrapper { font-size: 0.75rem; color: var(--pfw-ink-soft); margin-bottom: 1rem; }
.woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; }
.woocommerce-terms-and-conditions-wrapper p { margin: 0 0 0.75rem; }
/* Consent text is a sentence, not a field label — it must not inherit the
   uppercase, letter-spaced treatment the form labels use. */
.woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
/* Checkbox consent text is a sentence, not a field label. The selector has to
   out-rank `.woocommerce form .form-row label`, which would otherwise impose
   the uppercase, letter-spaced field-label treatment on it. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox,
.woocommerce-terms-and-conditions-wrapper label,
.woocommerce-form-login__rememberme,
.woocommerce-privacy-policy-text {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--pfw-ink-soft);
}
/* Keep the required marker beside the sentence rather than pushed to the edge. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox .required { margin-left: -0.25rem; }
.woocommerce-privacy-policy-text { display: block; margin-bottom: 0.75rem; }
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-form-login__rememberme input[type="checkbox"] {
  accent-color: var(--pfw-ink);
  margin: 0.15rem 0 0;
  flex: none;
}

/* Order received */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 1.125rem;
  text-align: center;
  margin-bottom: 2rem;
}
.woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 1.5rem;
  margin: 0 0 2.5rem;
  background: var(--pfw-bg-alt);
  font-size: 0.8125rem;
}
@media (min-width: 700px) {
  .woocommerce-order ul.woocommerce-order-overview { grid-auto-flow: column; justify-content: space-between; }
}
.woocommerce-order ul.woocommerce-order-overview li { display: grid; gap: 0.25rem; }
.woocommerce-order ul.woocommerce-order-overview strong { font-weight: 400; font-size: 0.9375rem; }
.woocommerce-order h2, .woocommerce-column h2 { font-size: 0.6875rem; letter-spacing: 0.16em; margin: 2rem 0 1rem; }

/* Order details totals: labels left against the figures, rather than the
   centred column WooCommerce's default table markup produces. */
.woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 400;
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--pfw-border);
}
.woocommerce-table--order-details tfoot td {
  text-align: right;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--pfw-border);
}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; font-size: 1rem; }
@media (min-width: 700px) {
  .woocommerce-table--order-details tfoot th { width: 70%; }
}
.woocommerce-customer-details address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 1.25rem;
  background: var(--pfw-bg-alt);
}
@media (min-width: 700px) {
  .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem;
  }
}

/* ------------------------------------------------------------- account --- */
/* The two-column layout only applies once there is an account menu to put in
   the first column — signed out, the page is just the login form, and the grid
   would strand the heading in an empty sidebar. */
@media (min-width: 900px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 3rem;
  }
}
.woocommerce-MyAccount-navigation ul { display: grid; gap: 0.35rem; margin-bottom: 2rem; }
.woocommerce-MyAccount-navigation a { font-size: 0.8125rem; color: var(--pfw-ink-soft); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--pfw-ink); }

/* Signed out: a single centred login card. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.25rem;
}
.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 26rem;
  margin-inline: auto;
  border: 1px solid var(--pfw-border);
  padding: 1.75rem;
  background: var(--pfw-white);
}
.woocommerce-form-login .button,
.woocommerce-form-register .button { width: 100%; }
.woocommerce-LostPassword { text-align: center; font-size: 0.8125rem; margin-top: 1rem; }
.woocommerce-LostPassword a { text-decoration: underline; }

/* Phones: the item table becomes stacked rows.
   The table itself is switched to block flow as well — left as a table it keeps
   its min-content width and overflows the viewport on a 320px screen. */
@media (max-width: 767px) {
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table tbody { display: block; width: 100%; }
  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table tr.cart_item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: 0.3rem 0.85rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--pfw-border);
    align-items: center;
  }
  .woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 4.5rem; height: 4.5rem; }
  .woocommerce-cart-form table.shop_table tr:last-child { display: block; }
  .woocommerce-cart-form table.shop_table tr.cart_item td { border: 0; padding: 0; }
  .woocommerce-cart-form td.product-thumbnail { grid-row: 1 / span 3; width: auto; }
  .woocommerce-cart-form td.product-name { grid-column: 2; }
  .woocommerce-cart-form td.product-price { grid-column: 2; }
  .woocommerce-cart-form td.product-quantity { grid-column: 2; }
  .woocommerce-cart-form td.product-subtotal { grid-column: 3; grid-row: 1; text-align: right; }
  .woocommerce-cart-form td.product-remove { grid-column: 3; grid-row: 3; text-align: right; }
  .woocommerce table.shop_table td.actions { display: grid; gap: 0.75rem; }
  .woocommerce .coupon { float: none; display: grid; grid-template-columns: 1fr auto; }
  .woocommerce table.shop_table td.actions > button[name="update_cart"],
  .woocommerce table.shop_table td.actions > input[name="update_cart"] { float: none; width: 100%; }
  .woocommerce #coupon_code { width: auto; }
}

/* Utility */
.pfw-center { text-align: center; }
.pfw-mt-2 { margin-top: 2rem; }
.pfw-stack { display: grid; gap: 1rem; }

/* A read-only quantity (single-item products) renders without steppers. */
.pfw-qty--static input { width: 4rem; }

/* ==========================================================================
   Touch devices — iPhone and iPad
   --------------------------------------------------------------------------
   Everything here is driven by pointer capability rather than width, because
   an iPad in landscape is as wide as a laptop but is still operated by thumb.
   ========================================================================== */

/* iOS Safari zooms the whole page when a form field smaller than 16px takes
   focus, and does not zoom back out. It is the single most disruptive thing
   that can happen on a phone checkout, so every field is lifted to 16px on
   touch — the visual difference is slight, the behavioural one is not. */
@media (pointer: coarse) {
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce #coupon_code,
  .woocommerce .quantity input.qty,
  .pfw-qty input,
  .pfw-form input[type="email"],
  .pfw-shop__bar select,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"],
  select, textarea {
    font-size: 16px;
  }
}

@media (hover: none) {
  /* Without a pointer to leave, a :hover effect latches on after a tap and
     stays until something else is touched. */
  .pfw-card:hover .pfw-card__img--primary { transform: none; }
  .pfw-mediagrid__item:hover img { transform: none; }
  .pfw-card__title:hover,
  .pfw-nav__link:hover { color: inherit; }
  .woocommerce a.remove:hover { background: transparent; color: var(--pfw-ink-soft); }

  /* The nav panel opens on hover on a desktop; on touch the drawer is the
     navigation, so the panel must not appear on a stray tap. */
  .pfw-nav__item--mega:hover > .pfw-mega { opacity: 0; visibility: hidden; }
  .pfw-nav__item--mega:focus-within > .pfw-mega { opacity: 1; visibility: visible; }
}

@media (pointer: coarse) {
  /* --- tap targets -------------------------------------------------------
     Apple asks for ~44px. Where enlarging the control would coarsen the
     design, the hit area is extended with a transparent overlay instead, so
     the swatch and the dot stay the size they are drawn. */

  .pfw-iconbtn { min-width: 2.75rem; min-height: 2.75rem; }

  /* The overlay has to stop short of its neighbour, so the row gap is what
     actually decides the target: a 28px chip needs 16px of gap to reach 44. */
  .pfw-picker__chip { position: relative; }
  .pfw-picker__chip::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
  }
  .pfw-picker__row { gap: 1rem; }

  /* Dots are far too small to extend by overlay — 8px of visual with 14px of
     gap leaves nothing to grow into. On touch the button becomes the target
     and the dot is drawn inside it. */
  .pfw-featured__dots { gap: 0; padding-block: 0.25rem; }
  .pfw-featured__dot {
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border-radius: 0;
    display: grid;
    place-items: center;
  }
  .pfw-featured__dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(90, 73, 66, 0.25);
    transition: background 0.15s ease;
  }
  .pfw-featured__dot.is-active { background: transparent; }
  .pfw-featured__dot.is-active::before { background: var(--pfw-ink); }

  /* Short text controls that sit alone rather than in a list of links. */
  .pfw-link-underline { padding-block: 0.65rem; }
  .pfw-featured__eyebrow { display: inline-block; padding-block: 0.55rem; }
  .pfw-logo { padding-block: 0.35rem; }

  /* Pagination cells: 36px was chosen to keep one row on a phone, which is
     under the guidance. 40px still fits from 360px up. */
  .pfw-pagination a.page-numbers,
  .pfw-pagination span.page-numbers { min-width: 2.5rem; height: 2.5rem; }

  /* Drawer rows and accordion summaries read as list items, so they get
     height rather than an overlay. */
  .pfw-drawer > a,
  .pfw-drawer summary { padding-block: 0.95rem; }
  .pfw-drawer details a { padding-block: 0.7rem; }
  .pfw-facets summary { padding-block: 0.7rem; }
  .pfw-accordion summary { padding-block: 1.1rem; }

  /* Radio and checkbox controls on cart and checkout. */
  .woocommerce ul#shipping_method li,
  #payment ul.payment_methods label { min-height: 2.5rem; align-items: center; }
  #payment input[type="radio"],
  .woocommerce ul#shipping_method li input[type="radio"],
  .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
  }

  /* The remove-from-cart cross is small and destructive — give it room. */
  .woocommerce a.remove { width: 2.5rem; height: 2.5rem; }

  /* Momentum scrolling for the product rails. */
  .pfw-carousel__track { -webkit-overflow-scrolling: touch; }
  /* The arrows are pointer affordances; swiping replaces them. */
  .pfw-carousel__btn { display: none; }
}

/* --- notch and home indicator ---------------------------------------------
   Landscape on a notched iPhone puts the safe area at the sides, where the
   container gutter sits. */
@supports (padding: max(0px)) {
  .pfw-container {
    padding-left: max(var(--pfw-gutter), env(safe-area-inset-left));
    padding-right: max(var(--pfw-gutter), env(safe-area-inset-right));
  }
  .pfw-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* --- iPad -----------------------------------------------------------------
   The navigation breakpoint itself is set where the navbar is defined, above;
   here it only relaxes once there is room for it. */
@media (min-width: 1150px) {
  .pfw-navbar { gap: 2rem; }
}

/* Tablet portrait: three across is right for a 744–834px iPad, but the cards
   were inheriting the phone's tighter gutter. */
@media (min-width: 700px) and (max-width: 1023px) {
  .pfw-grid { gap: 2.25rem 1.5rem; }
}

/* iPhone landscape is only ~390px tall — a hero sized for a desktop viewport
   fills the whole screen and hides that there is a page beneath it. */
@media (max-height: 460px) and (orientation: landscape) {
  .pfw-hero__media { min-height: 0; height: 78vh; }
  .pfw-feature__media { min-height: 0; height: 80vh; }
}

/* ==========================================================================
   Collection page — hero, toolbar, filter drawer
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.pfw-collection-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 620;
  min-height: 280px;
  background: var(--pfw-bg-alt);
  overflow: hidden;
}
@media (max-width: 699px) { .pfw-collection-hero { aspect-ratio: 3 / 2; } }
.pfw-collection-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The artwork is bright and varies per category, so the copy gets a scrim
   rather than relying on the photograph being dark in the right corner. */
.pfw-collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 70%);
}
.pfw-collection-hero__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
  color: #fafafa;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
.pfw-collection-hero__crumbs {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pfw-collection-hero__crumbs a:hover { text-decoration: underline; }
.pfw-collection-hero__title {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  color: inherit;
}
.pfw-collection-hero__tagline {
  margin: 0;
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
  max-width: 34rem;
}

/* --- toolbar ------------------------------------------------------------- */
.pfw-toolbar {
  border-bottom: 1px solid var(--pfw-border);
  background: var(--pfw-bg);
}
.pfw-toolbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding-inline: var(--pfw-gutter);
}
.pfw-toolbar__count {
  margin: 0;
  text-align: center;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pfw-ink-soft);
}
.pfw-toolbar__filter {
  justify-self: end;
  position: relative;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pfw-ink-soft);
  padding: 0.75rem 0;
  transition: color 0.15s ease;
}
.pfw-toolbar__filter:hover { color: var(--pfw-ink); }
/* A dot rather than a count: the number of active filters is not the point,
   whether any are is. */
.pfw-toolbar__filter.is-filtered::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  right: -0.5rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--pfw-sale);
}

/* Density switcher: each glyph is literally the number of columns it sets. */
.pfw-density { display: flex; align-items: center; gap: 0.15rem; }
.pfw-density__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.pfw-density__btn:hover { opacity: 0.75; }
.pfw-density__btn.is-active { opacity: 1; }
.pfw-density__glyph { display: flex; gap: 2px; align-items: stretch; height: 14px; }
.pfw-density__glyph i { display: block; width: 4px; background: currentColor; }
.pfw-density__glyph[data-cols="3"] i { width: 3px; }
.pfw-density__glyph[data-cols="4"] i { width: 2px; }
@media (max-width: 699px) {
  /* Four columns of product photography is unreadable on a phone. */
  .pfw-density__btn[data-density="4"] { display: none; }
}

/* --- grid ---------------------------------------------------------------- */
.pfw-page--collection { padding-block: 2.5rem 4rem; }
.pfw-grid--collection {
  grid-template-columns: repeat(var(--pfw-cols, 3), minmax(0, 1fr));
  gap: 3rem 1.75rem;
}
@media (max-width: 999px) {
  /* Below the sidebar breakpoint the chosen density is capped so cards stay
     large enough to read. */
  .pfw-grid--collection { grid-template-columns: repeat(min(var(--pfw-cols, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .pfw-grid--collection { grid-template-columns: repeat(min(var(--pfw-cols, 2), 2), minmax(0, 1fr)); gap: 2rem 1rem; }
}

.pfw-empty { text-align: center; padding-block: 4rem; display: grid; gap: 1.25rem; justify-items: center; }

/* --- filter drawer ------------------------------------------------------- */
.pfw-filters {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 25rem);
  background: var(--pfw-bg);
  z-index: 95;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -1px 0 0 var(--pfw-border);
}
.pfw-filters.is-open { transform: none; }
.pfw-filters__form { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.pfw-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pfw-gutter);
  border-bottom: 1px solid var(--pfw-border);
  flex: none;
}
.pfw-filters__title { font-size: 0.75rem; letter-spacing: 0.18em; }

.pfw-filters__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--pfw-gutter);
}

.pfw-filters__group { border-bottom: 1px solid var(--pfw-border); padding-block: 0.35rem 1.1rem; }
.pfw-filters__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding-block: 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pfw-filters__group summary::-webkit-details-marker { display: none; }
.pfw-filters__group[open] summary svg { transform: rotate(180deg); }
.pfw-filters__group summary svg { transition: transform 0.2s ease; }

/* Colour swatches */
.pfw-filters__swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.25rem; }
.pfw-filters__swatch { position: relative; cursor: pointer; line-height: 0; }
.pfw-filters__swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pfw-filters__swatch > span:first-of-type {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgba(90, 73, 66, 0.22);
  transition: box-shadow 0.15s ease;
}
.pfw-filters__swatch.is-on > span:first-of-type,
.pfw-filters__swatch input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--pfw-bg), 0 0 0 3px var(--pfw-ink);
}

/* Stock toggle */
.pfw-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 0.8125rem; }
.pfw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pfw-switch__track {
  width: 2.35rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--pfw-border);
  position: relative;
  transition: background 0.2s ease;
  flex: none;
}
.pfw-switch__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--pfw-white);
  transition: transform 0.2s ease;
}
.pfw-switch input:checked + .pfw-switch__track { background: var(--pfw-ink); }
.pfw-switch input:checked + .pfw-switch__track .pfw-switch__thumb { transform: translateX(1.05rem); }
.pfw-switch input:focus-visible + .pfw-switch__track { outline: 2px solid var(--pfw-ink); outline-offset: 2px; }

/* Price range: two thumbs over one track. */
.pfw-range { position: relative; height: 1.75rem; margin-top: 0.75rem; }
.pfw-range__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pfw-border);
  transform: translateY(-50%);
}
.pfw-range__fill { position: absolute; top: 0; bottom: 0; background: var(--pfw-ink); }
.pfw-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.pfw-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--pfw-bg);
  border: 2px solid var(--pfw-ink);
  cursor: grab;
}
.pfw-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--pfw-bg);
  border: 2px solid var(--pfw-ink);
  cursor: grab;
}
.pfw-range__fields {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.pfw-range__fields label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--pfw-border);
  background: var(--pfw-white);
  padding: 0 0.6rem;
  min-height: 2.75rem;
}
.pfw-range__cur { font-size: 0.8125rem; color: var(--pfw-ink-soft); }
.pfw-range__fields input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  padding: 0;
  -moz-appearance: textfield;
}
.pfw-range__fields input::-webkit-outer-spin-button,
.pfw-range__fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pfw-range__to { font-size: 0.75rem; color: var(--pfw-ink-soft); }

/* Checkbox and link lists */
.pfw-filters__list { display: grid; gap: 0.15rem; padding-top: 0.25rem; }
.pfw-filters__list label,
.pfw-filters__list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--pfw-ink-soft);
  transition: color 0.15s ease;
}
.pfw-filters__list label:hover,
.pfw-filters__list a:hover { color: var(--pfw-ink); }
.pfw-filters__list input[type="checkbox"] { accent-color: var(--pfw-ink); width: 1rem; height: 1rem; flex: none; }
.pfw-filters__list label > span:first-of-type,
.pfw-filters__list a > span:first-of-type { flex: 1 1 auto; }
.pfw-filters__count { font-size: 0.75rem; opacity: 0.7; }

.pfw-filters__foot {
  flex: none;
  display: grid;
  gap: 0.75rem;
  padding: 1rem var(--pfw-gutter) calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pfw-border);
  background: var(--pfw-bg);
}
.pfw-filters__clear {
  justify-self: center;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pfw-ink-soft);
  text-decoration: underline;
  padding: 0.4rem;
}
.pfw-filters__clear:hover { color: var(--pfw-ink); }

/* The collection CSS above declares its own field sizes, which landed after
   the touch block and so won out. Restated here, last, for the price inputs:
   under 16px iOS Safari zooms the page on focus and does not zoom back.
   (Range sliders are exempt — they are not text entry and never trigger it.) */
@media (pointer: coarse) {
  .pfw-range__fields input,
  .pfw-filters__form input[type="number"],
  .pfw-filters__form input[type="text"],
  .pfw-filters__form select {
    font-size: 16px;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */
/* `width: 100%` is load-bearing wherever `aspect-ratio` meets `min-height`:
   without it the box resolves its WIDTH from that height and overflows the
   viewport on a phone. Same trap as .pfw-hero__media and .pfw-collection-hero. */
.pfw-about-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 900;
  min-height: 340px;
  max-height: 78vh;
  background: var(--pfw-bg-alt);
  overflow: hidden;
}
@media (max-width: 699px) { .pfw-about-hero { aspect-ratio: 4 / 5; } }
.pfw-about-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The workshop photography is pale, so the centred type needs a scrim. */
.pfw-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
}
.pfw-about-hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: var(--pfw-gutter);
  text-align: center;
  color: #fafafa;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.pfw-about-hero__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.pfw-about-hero__title {
  color: inherit;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
}

.pfw-about-intro { text-align: center; }
.pfw-about-intro .pfw-container { display: grid; justify-items: center; gap: 1.25rem; }
.pfw-about-intro__lead {
  margin: 0;
  max-width: 44rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.25rem);
  color: var(--pfw-ink-soft);
}

/* Alternating image / text bands. The image runs to the page edge on the
   outside and meets the copy in the middle, as on the reference. */
/* An implicit `auto` track sizes to its content's max-content width, and the
   media's aspect-ratio gives it an intrinsic 480px — so the single-column band
   grew past a 320px screen even with width:100% on the child (which then
   resolved against that same 480px track). minmax(0, 1fr) bounds the track to
   the container and breaks the circularity. */
.pfw-about-band { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .pfw-about-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  /* The markup always puts the photograph first; only the visual order swaps,
     so the reading order stays image-then-copy in both bands. */
  .pfw-about-band--reverse .pfw-about-band__media { order: 2; }
}
/* width:100% for the same reason as .pfw-about-hero above — min-height plus
   aspect-ratio would otherwise size this 320x(3/2) = 480px wide on a 320px
   screen and push the whole page sideways. */
.pfw-about-band__media { position: relative; width: 100%; min-height: 320px; aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .pfw-about-band__media { aspect-ratio: auto; min-height: 34rem; } }
.pfw-about-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfw-about-band__text {
  display: grid;
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem) var(--pfw-gutter);
}
.pfw-about-band__inner { max-width: 32rem; margin-inline: auto; }
.pfw-about-band__inner p { margin: 0 0 1.1rem; font-size: 0.9375rem; line-height: 1.8; }
.pfw-about-band__inner p:last-child { margin-bottom: 0; }
.pfw-about-band__inner h3 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  margin: 2rem 0 0.9rem;
}
.pfw-about-band__inner strong { font-weight: 500; }
.pfw-about-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* The colour group carries a count when it is collapsed with a filter applied,
   so a closed group never hides an active choice. The chevron is pushed to the
   far edge so the label and its badge stay together. */
.pfw-filters__group summary svg { margin-left: auto; flex: none; }
.pfw-filters__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--pfw-ink);
  color: var(--pfw-bg);
  font-size: 0.625rem;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Filter drawer on touch
   The drawer was built after the touch block further up, so its own controls
   never picked up the tap-target rules there. Swatches are 29.6px drawn and
   list rows ~38px — both under the 44px guidance, and both are the controls a
   shopper actually uses on a phone.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* The swatch keeps its drawn size; the hit area is extended around it, with
     enough row gap that neighbours do not claim the space. */
  .pfw-filters__swatches { gap: 0.85rem; }
  .pfw-filters__swatch { position: relative; }
  .pfw-filters__swatch::after {
    content: "";
    position: absolute;
    inset: -0.45rem;
  }

  /* Checkbox and link rows get height rather than an overlay — they read as
     list items, so a taller row is the honest fix. */
  .pfw-filters__list label,
  .pfw-filters__list a { padding: 0.8rem 0; }
  .pfw-filters__list input[type="checkbox"],
  .pfw-filters__list input[type="radio"] { width: 1.15rem; height: 1.15rem; }

  .pfw-filters__group summary { padding-block: 1.15rem; }
  .pfw-filters__clear { padding: 0.8rem; }
}