/* Page styles: home, collection pages and filters, product page, about, not found.
   Every value comes from docs/design-spec.md (Utz, measured)
   through the tokens in /tokens.css. Base components (components/base.css) are re-skinned
   here inside .pg so pages match Utz exactly; see the report for the base fixes that would
   make these overrides unnecessary.

   Breakpoints (Utz): 768 md, 1024 lg, 1280 xl, 1536 2xl. Hover effects only under
   (hover: hover) and (pointer: fine). Motion uses token durations (0 under reduced motion). */

:root {
  /* How far the sticky header covers the page top: the shell keeps --header-offset current
     (165 px desktop, 120 px pinned). Utz's toolbar sits 1 px under it. */
  --pg-sticky-top: max(0px, calc(var(--header-offset, 1px) - 1px));
  --pg-toolbar-h: 72px;
}

/* ---------- page frame ---------- */
.pg { padding-bottom: var(--space-10); }
.pg .icon { stroke-width: 1.5; }
.pg-wrap { width: 100%; max-width: calc(var(--max-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.pg-noscroll { overflow: hidden; }

/* ---------- type ---------- */
.pg-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.pg-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.pg-eyebrow { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
/* No single word left alone on a heading's or a paragraph's last line (polish sweep):
   headings balance their lines, running text avoids orphans. Card titles keep the plain
   2-line clamp. */
.pg :is(h1, h2, h3):not(.cc-card__title) { text-wrap: balance; }
.pg p { text-wrap: pretty; }
/* Short centred or column text (2-4 lines) reads best with even lines. */
.pg .pg-promo__text, .pg .pg-about__col p, .pg .pg-promo__title { text-wrap: balance; }
@media (min-width: 768px) { .pg-eyebrow { font-size: 15.9px; line-height: 24.9px; } }

/* ---------- sliding underline (design-spec A.2) ---------- */
.pg-ul {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right bottom;
  transition: background-size var(--dur-slow) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a:hover .pg-ul, a:focus-visible .pg-ul, label:hover .pg-ul { background-size: 100% 1px; background-position: left bottom; }
}

/* ---------- buttons (design-spec A.1) ----------
   Base .cc-pill does the measured geometry and the fill wipe (its ::before takes
   --pill-wipe). Pages add Utz's capitalized label, the 30 px line box and more colour
   variants. .pg-btn--primary / --outline are also used on plain <button>s (drawer Apply,
   Filter), which get their own wipe layer below. */
.cc-pill.pg-btn { height: var(--btn-h); line-height: var(--lh-btn); text-transform: capitalize; }
.cc-pill.pg-btn--outline { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); --pill-wipe: var(--color-button); }
/* Utz's btn--white has no border at all: with a transparent 1 px border the white background
   still showed in the border ring around the black wipe (which the pill's overflow clips to
   its padding box), so the edge goes and the padding takes its 1 px (r2 L3). */
.cc-pill.pg-btn--white { background: var(--color-surface); border: 0; padding-inline: calc(var(--btn-pad-x) + 1px); color: var(--color-text); --pill-wipe: var(--color-button); }
.cc-pill.pg-btn--on-royal { background: var(--color-button-on-royal); border-color: var(--color-button-on-royal); color: var(--color-button-on-royal-ink); --pill-wipe: var(--color-brand-red); }
.cc-pill.pg-btn--outline-light { background: transparent; border-color: var(--color-royal-ink); color: var(--color-royal-ink); --pill-wipe: var(--color-surface); }
@media (hover: hover) and (pointer: fine) {
  .cc-pill.pg-btn--outline:hover { color: var(--color-button-ink); border-color: var(--color-button); }
  /* Utz's btn--white has no border: the black wipe fills the pill edge to edge (#29). */
  .cc-pill.pg-btn--white:hover { color: var(--color-button-ink); }
  .cc-pill.pg-btn--on-royal:hover { color: var(--color-royal-ink); border-color: var(--color-brand-red); }
  .cc-pill.pg-btn--outline-light:hover { color: var(--color-royal); }
}
.pg :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* A11Y: the navy ring is invisible on the royal panels (1:1), so controls drawn on royal use
   a white ring (the footer's on-red token is the same white). On phones the hero's text and
   button sit on white below the art, so only its art and controls switch there. */
.pg-iwt, .pg-notfound__panel, .pg-hero__controls { --focus-ring: 2px solid var(--color-focus-on-red); }
@media (min-width: 768px) { .pg-hero__panel { --focus-ring: 2px solid var(--color-focus-on-red); } }

/* Round icon button (48 px; view-as, carousel arrows) with the same wipe. */
.pg-round-btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-grid; place-items: center; flex: none;
  width: var(--icon-btn); height: var(--icon-btn); border-radius: var(--radius-round);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  transition: color var(--dur-base) ease, opacity var(--dur-base) ease;
}
.pg-round-btn::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--color-button); transition: width var(--dur-btn) ease; }
.pg-round-btn.is-active { background: var(--color-button); border-color: var(--color-button); color: var(--color-button-ink); }
.pg-round-btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pg-round-btn:not(:disabled):hover { color: var(--color-button-ink); }
  .pg-round-btn:not(:disabled):hover::before { width: calc(100% + 1px); }
}

/* Floating arrow (38 px white circle, shadow), shown on hover of its frame. */
.pg-float-btn {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center;
  width: var(--swiper-nav-floating); height: var(--swiper-nav-floating); margin-top: calc(var(--swiper-nav-floating) / -2);
  border-radius: var(--radius-round); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}
/* Touch devices swipe; the floating arrows are not rendered at all (they also stuck out of the page by 3 px at 390). */
@media not ((hover: hover) and (pointer: fine)) { .pg-float-btn { display: none !important; } }
.pg-float-btn--prev { left: calc(var(--swiper-nav-floating) / -2); }
.pg-float-btn--next { right: calc(var(--swiper-nav-floating) / -2); }
.pg-float-btn:disabled { opacity: 0 !important; visibility: hidden !important; }
@media (hover: hover) and (pointer: fine) {
  .pg-brandrow__frame:hover .pg-float-btn, .pg-gallery__main:hover .pg-float-btn,
  .pg-float-btn:focus-visible { opacity: 1; visibility: visible; }
}

.pg-link-btn { font-size: var(--fs-base); font-weight: var(--fw-body); text-decoration: underline; text-underline-offset: 3px; color: var(--color-text); }

/* ---------- breadcrumb (design-spec §9.1) ---------- */
.pg-crumbs { padding: var(--space-3) 0; }
@media (min-width: 768px) { .pg-crumbs { padding: var(--space-4) 0 var(--space-5); } }
.pg-crumbs__list { display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden; list-style: none; margin: 0; padding: 0; font-size: var(--fs-base); line-height: var(--lh-base); }
.pg-crumbs__item { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.pg-crumbs__item:last-child { flex: 0 1 auto; min-width: 0; }
.pg-crumbs__item + .pg-crumbs__item::before { content: ""; width: 1px; height: 14px; margin: 0 var(--space-3); background: var(--color-progress-track); }
.pg-crumbs__link { color: var(--color-text); text-decoration: none; }
.pg-crumbs__current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- product card (design-spec §8.3) ----------
   Base .cc-card has Utz's title, badge spot and image backgrounds. Pages add the 20 px
   (12 px phone) gap above the title, the muted pack line, the grey skeleton until the
   picture loads, and Utz's hover (zoom 1.08 over .5 s, hover devices >= 768 only). */
.pg .cc-card.pg-card { gap: 0; }
.pg .pg-card .cc-card__media { transition: background-color var(--dur-slow) var(--ease); }
.pg .pg-card .cc-card__media.is-loading { background: var(--color-skeleton); }
.pg .pg-card .cc-card__img { transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.pg .pg-card .cc-card__media.is-loading .cc-card__img { opacity: 0; }
.pg .pg-card .cc-card__title { margin: 0; padding-top: var(--space-5); }
.pg .pg-card .cc-card__sub { margin-top: var(--space-1); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-body); color: var(--color-muted); }
@media (max-width: 767.98px) { .pg .pg-card .cc-card__title { padding-top: var(--space-3); } }
.pg .pg-card:hover .cc-card__img, .pg .pg-card:hover .cc-pack { transform: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .pg .pg-card:hover .cc-card__img, .pg .pg-card:hover .cc-pack { transform: scale(1.08); }
}
.pg .pg-card:hover .pg-ul, .pg .pg-card:focus-visible .pg-ul { background-size: 100% 1px; background-position: left bottom; }

/* Badge colours: New is Utz's green, Seasonal its yellow (base has the geometry). */
.pg .cc-badge.pg-badge--new { background: var(--color-badge-new); color: var(--color-badge-ink-light); }
.pg .cc-badge.pg-badge--season { background: var(--color-badge); color: var(--color-badge-ink); }

/* Skeleton cards */
.pg-skel__media { aspect-ratio: 1; border-radius: var(--radius-card); background: var(--color-skeleton); }
.pg-skel__line { height: 14px; margin-top: var(--space-5); border-radius: var(--radius-sm); background: var(--color-skeleton); }
.pg-skel__line--short { width: 50%; margin-top: var(--space-2); }

/* ---------- section head (design-spec §8.3) ---------- */
.pg-sechead { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); justify-content: space-between; padding-bottom: var(--space-6); }
@media (min-width: 768px) { .pg-sechead { align-items: flex-end; padding-bottom: var(--space-7); } }
.pg-sechead__text { max-width: 640px; }
.pg-sechead__desc { margin-top: var(--space-3); }
.pg-sechead__link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--fw-bold); text-decoration: none; color: var(--color-text); white-space: nowrap; }
.pg-sechead__link .pg-chev, .pg-page .pg-chev { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- carousel (design-spec §8.3) ---------- */
/* Phones (Utz): the section shows its first 6 products as a 2-column grid, no swiping. */
.pg-carousel__track {
  --pg-gap: var(--grid-gap-col-phone);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--pg-gap);
  list-style: none; margin: 0; padding: 0;
}
.pg-carousel__slide { min-width: 0; }
.pg-carousel__slide:nth-child(n + 7) { display: none; }
/* From 768: a swipe row. The track runs on to the viewport's right edge (into the gutter),
   so part of the next card shows, as on Utz; the cards keep the container's width (n per
   view) and the last one stops at the container edge (scroll padding = gutter). */
@media (min-width: 768px) {
  .pg-carousel__track {
    --pg-per: 3; --pg-gap: var(--card-gap);
    grid-template-columns: none; grid-auto-flow: column; column-gap: var(--pg-gap);
    grid-auto-columns: calc((100% - (var(--pg-per) - 1) * var(--pg-gap)) / var(--pg-per)); /* % of the content box: padding excluded */
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scroll-padding-right: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pg-carousel__track::-webkit-scrollbar { display: none; }
  .pg-carousel__slide { scroll-snap-align: start; }
  .pg-carousel__slide:nth-child(n + 7) { display: block; }
}
@media (min-width: 1280px) { .pg-carousel__track { --pg-per: 5; } }
.pg-carousel__track:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pg-carousel__controls { display: none; }
@media (min-width: 768px) {
  .pg-carousel__controls { display: flex; align-items: center; gap: var(--space-4); height: var(--swiper-nav); margin-top: var(--space-6); }
}
.pg-carousel.is-static .pg-carousel__controls { visibility: hidden; }
.pg-progress { position: relative; flex: 1; height: 2px; background: var(--color-progress-track); }
.pg-progress__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-text); transition: width var(--dur-base) ease; }
.pg-carousel__arrows { display: flex; gap: var(--space-3); }
.pg-carousel .pg-round-btn { border-color: var(--color-pager-track); }

/* ---------- HOME ---------- */
.pg-home { padding-bottom: 0; }

/* Brand tile row (design-spec §8.1): Utz's geometry. 130 px slides 20 px apart, an 80 px
   disc (60 on phones) and the name under it (15/24/500, 2 lines max). We have no logos: the
   disc is light grey with the brand's monogram in bold royal (base.js roundTile text), and
   the name is the visible label. Hover: the disc zooms 1.03 (.7 s) and a 12 px arrow fades in. */
.pg-brandrow { padding: var(--space-5) 0; overflow-x: clip; }
/* Utz's row has more room under the labels (its swiper's own bottom space): the section is
   204 px tall at 1440 and 194 px at 768-1279 with 2-line labels (r2 L4). */
@media (min-width: 768px) { .pg-brandrow { padding-bottom: 34px; } }
@media (min-width: 1280px) { .pg-brandrow { padding-bottom: 44px; } }
.pg-brandrow__frame { position: relative; }
.pg-brandrow__track {
  display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.pg-brandrow__track::-webkit-scrollbar { display: none; }
.pg-brandrow__item { flex: none; width: 130px; scroll-snap-align: start; }
.pg-brandrow .pg-tile { width: 100%; gap: 0; }
.pg-brandrow .pg-tile .cc-tile__ring {
  width: 80px; height: 80px; background: var(--color-surface-2); box-shadow: none;
  transition: transform .7s var(--ease);
}
.pg-brandrow .pg-tile .cc-tile__text {
  padding: 0; font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em; color: var(--color-royal);
}
.pg-brandrow .pg-tile .cc-tile__label {
  position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  padding-top: var(--space-3); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-body);
}
.pg-brandrow__arrow { position: absolute; right: 0; bottom: 6px; opacity: 0; transition: opacity var(--dur-base) ease; }
@media (hover: hover) and (pointer: fine) {
  .pg-brandrow .pg-tile .cc-tile__label { padding-inline: var(--space-4); }
  .pg-brandrow .pg-tile:hover .cc-tile__ring { transform: scale(1.03); box-shadow: none; }
  .pg-brandrow .pg-tile:hover .pg-brandrow__arrow { opacity: 1; }
}
@media (max-width: 767.98px) {
  .pg-brandrow__track { gap: var(--space-3); }
  .pg-brandrow__item { width: 90px; }
  .pg-brandrow .pg-tile .cc-tile__ring { width: 60px; height: 60px; }
  .pg-brandrow .pg-tile .cc-tile__text { font-size: var(--fs-xl); }
  .pg-brandrow .pg-tile .cc-tile__label { font-size: var(--fs-sm); line-height: 21.6px; }
}

/* Hero slideshow (design-spec §8.2) */
.pg-hero { padding-bottom: var(--space-8); }
.pg-hero__panel { position: relative; display: grid; border-radius: var(--radius-panel); overflow: hidden; }
/* Slides stack in one grid cell and slide sideways like Utz's Swiper (300 ms): each sits
   --pg-pos panels from the current one (home.js), so only one headline is ever on screen. */
.pg-hero__slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; visibility: hidden;
  transform: translateX(calc(var(--pg-pos, 1) * 100%));
  transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.pg-hero__slide.is-active { visibility: visible; transition: transform var(--dur-base) var(--ease), visibility 0s; }
.pg-hero__art { position: relative; background: var(--color-royal); border-radius: var(--radius-panel); aspect-ratio: 358 / 318; overflow: hidden; }
@media (max-width: 767.98px) { .pg-hero__art .pg-art { bottom: 56px; top: 4px; } }
.pg-hero__text { padding: var(--space-6) 15px var(--space-8); text-align: center; color: var(--color-text); }
.pg-hero__eyebrow { font-size: var(--fs-base); margin-bottom: var(--space-3); }
.pg-hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); text-wrap: balance; }
.pg-hero__sub { margin-top: var(--space-6); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
.pg-hero__body { margin-top: var(--space-3); }
.pg-hero__actions { margin-top: var(--space-7); }
.pg-hero__text .cc-pill.pg-btn--white { background: var(--color-button-secondary); }
/* Controls (spec 8.2): 48 px round arrows (.pg-round-btn: white, 1 px rgba(0,0,0,.2) border,
   black wipe), the dots, and a Pause / Play button (A11Y, WCAG 2.2.2; Utz has none). On
   phones they sit on the bottom of the art, smaller (38 px). */
.pg-hero__controls { position: absolute; left: 50%; transform: translateX(-50%); top: calc((100vw - 2 * var(--gutter)) * 318 / 358 - 50px); z-index: 2; display: flex; align-items: center; gap: var(--space-2); color: var(--color-royal-ink); }
.pg-hero .pg-round-btn { width: var(--swiper-nav-floating); height: var(--swiper-nav-floating); border-color: var(--color-pager-track); }
.pg-hero .pg-round-btn .icon { stroke-width: 1.5; }
.pg-hero__dots { display: flex; align-items: center; }
/* A11Y (2.5.8): each dot is a 24 px tall target at least 24 px wide; the drawn dot (10 px,
   the active one a 40 / 50 px pill filling with the timer) sits inside it. */
.pg-dot { position: relative; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; background: none; }
.pg-dot__track { position: relative; display: block; width: 10px; height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-royal-ink) 40%, transparent); overflow: hidden; transition: width var(--dur-base) var(--ease); }
.pg-dot.is-active .pg-dot__track { width: 40px; }
.pg-dot__fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--color-royal-ink); border-radius: inherit; }
.pg-dot:not(.is-active) .pg-dot__fill { width: 0; }
.pg-dot:focus-visible { outline-offset: 0; border-radius: var(--radius-pill); }
.pg-hero__panel.is-auto .pg-dot.is-active .pg-dot__fill { animation: pg-fill 6s linear forwards; }
.pg-hero__panel.is-paused .pg-dot.is-active .pg-dot__fill { animation-play-state: paused; }
@keyframes pg-fill { from { width: 0; } to { width: 100%; } }
@media (min-width: 768px) {
  .pg-hero__panel { background: var(--color-royal); aspect-ratio: 1340 / 596.7; }
  .pg-hero__slide { grid-template-columns: 1fr 1fr; padding: 44px; }
  .pg-hero__art { order: 2; aspect-ratio: auto; background: none; border-radius: 0; margin-bottom: var(--space-7); }
  .pg-hero__text { order: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--space-7) 0; text-align: left; color: var(--color-royal-ink); max-width: 626px; }
  .pg-hero__eyebrow { font-size: 15.9px; line-height: 24.9px; margin-bottom: var(--space-4); }
  .pg-hero__sub { margin-top: var(--space-7); }
  .pg-hero__text .cc-pill.pg-btn--white { background: var(--color-surface); }
  .pg-hero__controls { top: auto; bottom: 20px; }
  .pg-hero .pg-round-btn { width: var(--swiper-nav); height: var(--swiper-nav); }
  .pg-dot.is-active .pg-dot__track { width: 50px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* The panel is only 328 px tall: the controls go under the art, clear of the button. */
  .pg-hero__controls { left: 75%; }
  .pg-hero__art { margin-bottom: 76px; }
  .pg-hero__sub { margin-top: var(--space-4); }
  .pg-hero__body { display: none; }
  .pg-hero__actions { margin-top: var(--space-5); }
}
@media (min-width: 1024px) { .pg-hero__controls { bottom: 27px; } }


/* Icon artwork: white discs with the red ring, holding category icons. */
.pg-art { position: absolute; inset: 0; container-type: size; }
/* Disc sizes follow the shorter side of the art box (cqmin), positions its width and height. */
.pg-art__disc {
  position: absolute; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-round);
  background: var(--color-surface); box-shadow: inset 0 0 0 var(--tile-ring) var(--color-ring), var(--shadow-md);
  transform: translate(-50%, -50%);
}
.pg-art__disc .pg-caticon { width: 62%; height: 62%; }
.pg-art--1 .pg-art__disc--1 { left: 50%; top: 50%; width: 57.5cqmin; }
.pg-art--2 .pg-art__disc--1 { left: 38%; top: 46%; width: 50.0cqmin; }
.pg-art--2 .pg-art__disc--2 { left: 66%; top: 58%; width: 37.5cqmin; }
.pg-art--3 .pg-art__disc--1 { left: 50%; top: 42%; width: 50.0cqmin; }
.pg-art--3 .pg-art__disc--2 { left: 24%; top: 66%; width: 32.5cqmin; }
.pg-art--3 .pg-art__disc--3 { left: 76%; top: 66%; width: 32.5cqmin; }
.pg-art--4 .pg-art__disc--1 { left: 40%; top: 40%; width: 45.0cqmin; }
.pg-art--4 .pg-art__disc--2 { left: 72%; top: 34%; width: 30.0cqmin; }
.pg-art--4 .pg-art__disc--3 { left: 66%; top: 72%; width: 35.0cqmin; }
.pg-art--4 .pg-art__disc--4 { left: 26%; top: 74%; width: 25.0cqmin; }
.pg-art--5 .pg-art__disc--1 { left: 46%; top: 44%; width: 42.5cqmin; }
.pg-art--5 .pg-art__disc--2 { left: 78%; top: 30%; width: 27.5cqmin; }
.pg-art--5 .pg-art__disc--3 { left: 74%; top: 74%; width: 32.5cqmin; }
.pg-art--5 .pg-art__disc--4 { left: 20%; top: 26%; width: 22.5cqmin; }
.pg-art--5 .pg-art__disc--5 { left: 22%; top: 76%; width: 27.5cqmin; }
.pg-art--hero .pg-art__disc { box-shadow: inset 0 0 0 calc(var(--tile-ring) + 1px) var(--color-ring), var(--shadow-sm); }

/* Featured carousels */
.pg-feature { padding: 18px 0 var(--space-6); }
@media (min-width: 768px) { .pg-feature { padding: 22.5px 0 30px; } }
@media (min-width: 1280px) { .pg-feature { padding: var(--space-8) 0 30px; } }

/* Category grid (design-spec §8.4) */
.pg-catgrid { padding: var(--space-3) 0 6px; }
@media (min-width: 768px) { .pg-catgrid { padding: 15px 0 7.5px; } }
@media (min-width: 1280px) { .pg-catgrid { padding: var(--space-5) 0 10px; } }
.pg-catgrid__grid {
  --pg-cols: 3; display: grid; grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden;
}
@media (min-width: 1024px) { .pg-catgrid__grid { --pg-cols: 4; } }
@media (min-width: 1280px) { .pg-catgrid__grid { --pg-cols: 6; } }
/* Lines between cells: each cell draws its right and bottom rule; the frame's overflow
   hides the ones on the outer edge. */
.pg-catgrid__cell { margin: 0 -1px -1px 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* Blank cells that complete the last row (parts.js categoryGridList), per column count. */
@media (max-width: 1023.98px) { .pg-catgrid__cell--no3 { display: none; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .pg-catgrid__cell--no4 { display: none; } }
@media (min-width: 1280px) { .pg-catgrid__cell--no6 { display: none; } }
.pg-catgrid__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%;
  padding: var(--space-3); color: var(--color-text); text-decoration: none; text-align: center;
}
.pg-catgrid__disc { display: grid; place-items: center; width: 70px; height: 70px; border-radius: var(--radius-round); background: var(--color-surface-2); overflow: hidden; transition: transform .7s var(--ease); }
.pg-catgrid__disc .pg-caticon { width: 68%; height: 68%; }
.pg-catgrid__disc .pg-caticon--mark { width: 62%; height: auto; }
.pg-catgrid__label { position: relative; display: inline-flex; align-items: center; padding-top: var(--space-3); font-size: var(--fs-sm); line-height: 21.6px; }
.pg-catgrid__label .icon { position: absolute; right: 0; bottom: 6px; opacity: 0; transition: opacity var(--dur-base) ease; }
@media (min-width: 768px) {
  .pg-catgrid__tile { padding: var(--space-6) var(--space-3); min-height: 194px; }
  .pg-catgrid__disc { width: 110px; height: 110px; }
  .pg-catgrid__label { font-size: var(--fs-base); line-height: var(--lh-base); }
}
@media (hover: hover) and (pointer: fine) {
  .pg-catgrid__label { padding-inline: var(--space-4); }
  .pg-catgrid__tile:hover .pg-catgrid__disc { transform: scale(1.03); }
  .pg-catgrid__tile:hover .pg-catgrid__label .icon { opacity: 1; }
}

/* Brand marquee (design-spec §8.5) */
.pg-marquee { position: relative; overflow: hidden; padding: 18px 0; }
.pg-marquee.is-paused .pg-marquee__track { animation-play-state: paused; }
/* A11Y (2.2.2): a Pause / Play button at the right end; the names fade out under it. */
.pg-marquee__toggle { position: absolute; z-index: 1; right: var(--gutter); top: 50%; margin-top: calc(var(--swiper-nav-floating) / -2); width: var(--swiper-nav-floating); height: var(--swiper-nav-floating); border-color: var(--color-pager-track); }
.pg-marquee__toggle .icon { stroke-width: 1.5; }
.pg-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--gutter) + var(--swiper-nav-floating) + var(--space-8)); background: linear-gradient(to right, transparent, var(--color-surface) var(--space-8)); pointer-events: none; }
@media (min-width: 768px) { .pg-marquee { padding: 15px 0; } }
@media (min-width: 1280px) { .pg-marquee { padding: var(--space-5) 0; } }
.pg-marquee__track { display: flex; width: max-content; animation: pg-marquee var(--pg-marquee-dur, 60s) linear infinite; }
.pg-marquee:hover .pg-marquee__track, .pg-marquee:focus-within .pg-marquee__track { animation-play-state: paused; }
.pg-marquee__strip { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.pg-marquee__item { display: flex; align-items: center; }
.pg-marquee__name {
  padding-inline: 4.8px; font-size: var(--fs-h2); line-height: 1.3125; font-weight: var(--fw-bold); color: var(--color-blue);
  white-space: nowrap; text-decoration: none;
}
.pg-marquee__mark { width: 60px; height: 60px; margin-inline: 4.8px; display: grid; place-items: center; }
.pg-marquee__mark::before { content: ""; width: 14px; height: 14px; border-radius: var(--radius-round); background: var(--color-brand-red); }
@media (min-width: 768px) {
  .pg-marquee__name { padding-inline: var(--space-2); font-size: var(--fs-3xl); line-height: 42px; }
  .pg-marquee__mark { width: 72px; height: 72px; margin-inline: var(--space-2); }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .pg-marquee__name { font-size: var(--fs-h2); } }
@keyframes pg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pg-marquee { overflow-x: auto; scrollbar-width: none; }
  .pg-marquee__track { animation: none; }
  .pg-marquee__toggle, .pg-marquee::after { display: none; }
}

/* Image-with-text band (design-spec §8.6) */
.pg-iwt { margin-top: var(--space-6); padding: 36px 0; background: var(--color-royal); color: var(--color-royal-ink); }
@media (min-width: 768px) { .pg-iwt { padding: 45px 0; margin-top: 30px; } }
@media (min-width: 1280px) { .pg-iwt { padding: var(--space-10) 0; } }
.pg-iwt__inner { display: grid; gap: var(--space-7); }
/* --pg-seal-room: how far the seal reaches into the board from its right edge, plus 8-12 px,
   kept free of icon discs so the seal never butts a disc's ring (r2 L5). */
.pg-iwt__media { --pg-seal-room: 58px; position: relative; padding-inline: 22px; }
.pg-iwt__board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); place-items: center;
  aspect-ratio: 754 / 427; padding: 6% var(--pg-seal-room) 6% 6%; border-radius: var(--radius-panel); background: var(--color-info-bg);
}
.pg-iwt__disc { display: grid; place-items: center; width: 84%; aspect-ratio: 1; border-radius: var(--radius-round); background: var(--color-surface); box-shadow: inset 0 0 0 var(--tile-ring) var(--color-ring); }
.pg-iwt__disc .pg-caticon { width: 64%; height: 64%; }
.pg-iwt__seal {
  position: absolute; right: 0; top: 8%; display: grid; place-items: center; width: 72px; aspect-ratio: 1;
  border-radius: var(--radius-round); background: var(--color-royal); box-shadow: inset 0 0 0 4px var(--color-royal), inset 0 0 0 6px var(--color-royal-ink);
}
.pg-iwt__seal img { width: 56%; height: auto; }
.pg-iwt__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.pg-iwt__body { margin-top: var(--space-5); display: grid; gap: var(--space-6); }
.pg-iwt__actions { margin-top: var(--space-7); }
@media (min-width: 768px) {
  .pg-iwt__inner { grid-template-columns: minmax(0, 60fr) minmax(0, 32.5fr); gap: var(--space-8) 100px; align-items: center; }
  /* Utz: the media box is 804 px at 1440 with 50 px on its left only, so the picture is
     754 x 427; the seal hangs over the picture's right edge, clear of the icon discs (r2 L5). */
  .pg-iwt__media { --pg-seal-room: 80px; padding-inline: 50px 0; }
  .pg-iwt__seal { right: -24px; top: 12%; width: 96px; }
}
@media (min-width: 1280px) {
  .pg-iwt__media { --pg-seal-room: 72px; }
  .pg-iwt__disc { width: 74%; }
  .pg-iwt__seal { right: -60px; width: 120px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) { .pg-iwt__inner { column-gap: var(--space-8); } }

/* ---------- COLLECTION ---------- */
/* Banner (design-spec §9.2) */
/* The halves carry their own colours; the frame is transparent so the rounded corners
   anti-alias against the page, not against royal (no dark halo on the lavender half, #24). */
.pg-banner { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-panel); overflow: hidden; background: transparent; }
.pg-banner__text {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: var(--space-6) var(--space-5); color: var(--color-royal-ink); background: var(--color-royal);
}
.pg-banner__eyebrow { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.pg-banner__title { font-size: var(--fs-hd1); line-height: var(--lh-hd1); font-weight: var(--fw-bold); overflow: hidden; overflow-wrap: anywhere; }
.pg-banner__title.is-long { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-banner--wide .pg-banner__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-banner__lead { margin-top: var(--space-4); max-width: 520px; }
.pg-banner__note { margin-top: var(--space-3); font-size: var(--fs-base); line-height: var(--lh-base); }
.pg-banner__note strong { font-weight: var(--fw-bold); }
.pg-banner__art { position: relative; height: 220px; background: var(--color-info-bg); overflow: hidden; }
.pg-banner__art .pg-art--single .pg-art__disc--big { left: 50%; top: 50%; width: auto; height: 76%; }
.pg-banner__sticker {
  position: absolute; left: 10%; top: 14%; padding: 4px 14px; border-radius: var(--radius-badge); transform: rotate(-8deg);
  background: var(--color-badge-new); color: var(--color-badge-ink-light); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 1.4;
}
@media (min-width: 768px) {
  .pg-banner { grid-template-columns: 1fr 1fr; height: 300px; }
  .pg-banner__text { padding: var(--space-8) var(--space-8); }
  .pg-banner__art { height: auto; }
  .pg-banner__art .pg-art--single .pg-art__disc--big { height: 72%; }
}
@media (min-width: 1024px) { .pg-banner__text { padding-inline: 100px; } }
.pg-banner--wide { margin-top: 0; }
/* Utz's "Shop All" banner (collection-all-top-*): same 300 px panel, 32 px lower (42 at >= 1280). */
@media (min-width: 768px) { .pg-banner--wide { height: 300px; margin-top: var(--space-7); } .pg-banner--about { height: auto; min-height: 300px; } }
@media (min-width: 1280px) { .pg-banner--wide { margin-top: 42px; } }

/* Brand / flavor word art */
.pg-wordart { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-6); text-align: center; }
.pg-wordart__word { font-size: 44px; line-height: 1.05; font-weight: var(--fw-bold); color: var(--color-royal); overflow-wrap: anywhere; max-width: 100%; }
.pg-wordart__word.is-long { font-size: 32px; }
.pg-wordart--flavor .pg-wordart__word { color: var(--color-primary); }
.pg-wordart__icons { display: flex; gap: var(--space-3); }
.pg-wordart__disc { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-round); background: var(--color-surface); box-shadow: inset 0 0 0 var(--tile-ring) var(--color-ring); }
.pg-wordart__disc .pg-caticon { width: 62%; height: 62%; }
@media (min-width: 1024px) {
  .pg-wordart__word { font-size: 64px; }
  .pg-wordart__word.is-long { font-size: 44px; }
  .pg-wordart__disc { width: 72px; height: 72px; }
}

/* Toolbar (design-spec §9.3) */
.pg-results { margin-top: 29px; }
.pg-toolbar-wrap { position: sticky; top: var(--pg-sticky-top); z-index: calc(var(--z-sticky) + 1); background: var(--color-surface); margin-bottom: var(--space-3); }
.pg-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; }
.pg-toolbar__left { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-4); }
.pg-toolbar__right { display: flex; align-items: center; gap: var(--space-7); }
.pg-count { font-size: var(--fs-base); line-height: var(--lh-base); }
.pg-filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-h); padding: 0 var(--space-4); border: 1px solid; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: var(--lh-btn); position: relative; isolation: isolate; overflow: hidden; transition: color var(--dur-base) ease, border-color var(--dur-base) ease; }
.pg-filter-btn::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--color-button); transition: width var(--dur-btn) ease; }
.pg-filter-btn.pg-btn--outline { background: var(--color-button-secondary); border-color: var(--color-button-secondary); padding-inline: var(--space-5); }
@media (hover: hover) and (pointer: fine) {
  .pg-filter-btn:hover { color: var(--color-button-ink); border-color: var(--color-button); }
  .pg-filter-btn:hover::before { width: calc(100% + 1px); }
}
.pg-toolbar__sort { display: none; }
.pg-sort { display: flex; align-items: center; gap: var(--space-2); }
.pg-sort__label { font-weight: var(--fw-semibold); white-space: nowrap; }
.pg-select-wrap { position: relative; display: inline-flex; flex: 1; }
.pg-select {
  /* A11Y (1.4.11): the field's edge needs 3:1; Utz's #E5E5E5 is 1.26:1, so it takes the
     checkbox outline colour (rgba(0,0,0,.6), 5.7:1). */
  width: 190px; height: var(--field-h); padding: 0 36px 0 20px; border: 1px solid var(--color-checkbox-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font-size: var(--fs-base); font-weight: var(--fw-body);
  appearance: none; cursor: pointer; transition: box-shadow var(--dur-base) ease;
}
.pg-select:focus { outline: 0; box-shadow: var(--shadow-field-focus); }
.pg-select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pg .pg-select-wrap .icon, .pg-drawer .pg-select-wrap .icon { position: absolute; right: 16px; top: 50%; margin-top: -6px; pointer-events: none; stroke-width: 3; }
.pg-viewas { display: flex; align-items: center; gap: var(--space-2); }
.pg-viewas__label { display: none; font-weight: var(--fw-semibold); }
@media (min-width: 768px) {
  .pg-toolbar { display: flex; align-items: center; justify-content: space-between; }
  .pg-toolbar__left { flex-direction: row; align-items: center; gap: var(--space-6); }
  .pg-viewas__label { display: inline; }
}
@media (min-width: 1024px) { .pg-toolbar__sort { display: block; } }
@media (min-width: 1280px) {
  .pg-filter-btn.pg-btn--outline { background: var(--color-surface); border-color: var(--color-checkbox-border); padding-inline: var(--space-4); }
  .pg-filter-btn__n { display: none; }
}
.pg-filter-btn .icon { stroke-width: 1.5; }

/* Layout: sidebar + content (design-spec §9.4, §9.7) */
.pg-layout { display: block; }
.pg-sidebar { display: none; }
@media (min-width: 1280px) {
  .pg-layout.has-sidebar { display: grid; grid-template-columns: 274px minmax(0, 1fr); align-items: start; }
  .pg-layout.has-sidebar .pg-sidebar {
    display: block; position: sticky; top: calc(var(--pg-sticky-top) + var(--pg-toolbar-h)); padding-right: 30px; z-index: var(--z-sticky);
  }
  /* No scrollbar inside the column (#34): a column taller than the window scrolls with the
     page instead of sticking (collection.js sets is-tall). */
  .pg-layout.has-sidebar .pg-sidebar.is-tall { position: relative; top: auto; }
}

/* Filter accordions (shared by sidebar and drawer). The + / − is drawn in CSS so the
   vertical bar can rotate into the minus like Utz (design-spec §9.4). */
.pg-filters .cc-acc { border-bottom: 1px solid var(--color-border); }
.pg-filters .cc-acc:last-child { border-bottom: 0; }
.pg-filters .cc-acc__summary { min-height: 0; padding: var(--space-6) 0; font-size: var(--fs-md); line-height: 26px; font-weight: var(--fw-bold); }
.pg-sidebar .pg-filters .cc-acc:first-child .cc-acc__summary { padding-top: 0; }
:is(.pg, .pg-drawer) .cc-acc__sign { position: relative; width: 16px; height: 16px; }
/* Utz's plus is a 24-unit glyph drawn at 16 px with a 1.5 stroke: about 14 x 1.5 px on screen, solid black. */
:is(.pg, .pg-drawer) .cc-acc__sign .icon { display: none; }
:is(.pg, .pg-drawer) .cc-acc__sign::before, :is(.pg, .pg-drawer) .cc-acc__sign::after {
  content: ""; position: absolute; left: 1px; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: currentColor;
}
:is(.pg, .pg-drawer) .cc-acc__sign::after { transform: rotate(90deg); transition: transform var(--dur-slow) var(--ease); }
:is(.pg, .pg-drawer) .cc-acc[open] > .cc-acc__summary .cc-acc__sign::after { transform: rotate(360deg); }
.pg-filters .cc-acc__body { margin-top: calc(-1 * var(--space-3)); padding: 0 0 var(--space-6); }
:is(.pg, .pg-drawer) .cc-acc[open] > .cc-acc__body { animation: pg-fade-up var(--dur-fast) ease; }
@keyframes pg-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pg-filters__body { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.pg-filters__body .cc-checks { width: 100%; gap: var(--space-3); }

/* Checkbox rows (design-spec §9.5) */
.pg-filters .cc-checks__label { min-height: 24px; gap: var(--space-2); font-size: var(--fs-base); line-height: var(--lh-base); }
.pg-filters .cc-checks__text { flex: 1; min-width: 0; }
.pg-filters .cc-checks__count { color: var(--color-text); }
.pg-filters .cc-checks__box {
  position: relative; width: var(--checkbox-size); height: var(--checkbox-size); flex: none; margin: 0; appearance: none; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-checkbox-border); border-radius: var(--radius-checkbox);
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-fast) ease;
}
.pg-filters .cc-checks__box:hover, .pg-filters .cc-checks__box:focus { border-color: var(--color-text); }
.pg-filters .cc-checks__box:focus { box-shadow: var(--shadow-checkbox-focus); outline: 0; }
.pg-filters .cc-checks__box:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.pg-filters .cc-checks__box:checked { background: var(--color-button); border-color: var(--color-button); }
.pg-filters .cc-checks__box:checked::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 12px;
  border: solid var(--color-button-ink); border-width: 0 2px 2px 0; transform: translate(-50%, -63%) rotate(43deg);
}
@media (hover: hover) and (pointer: fine) {
  .pg-filters .cc-checks__label:hover .cc-checks__text { background-size: 100% 1px; background-position: left bottom; }
}
.pg-filters .cc-checks__text {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: right bottom;
  transition: background-size var(--dur-slow) var(--ease); flex: 0 1 auto; margin-right: auto;
}

/* Active chips (design-spec §9.6) */
.pg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.pg-chip {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 38px; padding: 3px var(--space-3); border: 1px solid var(--color-field); border-radius: var(--radius-pill);
  background: var(--color-field); color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-btn); font-weight: var(--fw-body); text-decoration: none;
  transition: color var(--dur-base) ease;
}
.pg-chip::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--color-button); transition: width var(--dur-btn) ease; }
.pg-chip .icon { stroke-width: 2; }
@media (hover: hover) and (pointer: fine) {
  .pg-chip:hover { color: var(--color-button-ink); border-color: var(--color-button); }
  .pg-chip:hover::before { width: calc(100% + 1px); }
}
.pg-clear { margin-left: var(--space-3); color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-body); }

/* Product grid (design-spec §9.7) */
.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap-col-phone); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-row-tablet) var(--card-gap); } }
@media (min-width: 1280px) { .pg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap) var(--card-gap); } }
.pg-grid__cell { min-width: 0; }

/* In-grid promo tile (design-spec §9.8) */
.pg-promo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 100%;
  padding: var(--space-5); border-radius: var(--radius-panel); background: var(--color-royal); color: var(--color-royal-ink);
  text-align: center; text-decoration: none;
}
.pg-promo__title { font-size: var(--fs-h6); line-height: 26px; font-weight: var(--fw-bold); text-wrap: balance; }
.pg-promo__text { margin-top: var(--space-4); }
/* A long link ("Shop Protein & Nutrition Bars") wraps as text, the arrow after its last word. */
.pg-promo__link { display: block; margin-top: var(--space-5); font-weight: var(--fw-bold); text-wrap: balance; }
.pg-promo__link .icon { display: inline-block; margin-left: var(--space-2); vertical-align: -2px; }
.pg-promo .pg-ul { background-size: 100% 1px; }
@media (min-width: 768px) {
  .pg-promo { padding: var(--space-7); }
  .pg-promo__title { font-size: var(--fs-xl); line-height: 35.75px; }
  .pg-promo__text { margin-top: var(--space-3); }
}
@media (hover: hover) and (pointer: fine) { .pg-promo:hover .pg-promo__link .icon { transform: translateX(3px); } .pg-promo__link .icon { transition: transform var(--dur-base) var(--ease); } }

/* List view (design-spec §9.9; plan: "small icon/photo, name, brand, pack, category"):
   a compact row, a 96 px picture (72 on phones), everything centred on one line. */
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.pg-list > li:first-child { border-top: 1px solid var(--color-border); }
.pg .cc-card.pg-row { flex-direction: row; align-items: center; gap: var(--space-4); }
.pg .pg-row .cc-card__media { flex: none; width: 72px; border-radius: var(--radius-md); }
.pg-row__info { display: grid; gap: var(--space-1); min-width: 0; flex: 1; align-items: center; }
.pg .pg-row .cc-card__title { padding-top: 0; }
.pg-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.pg-row__head .cc-badge { position: static; }
/* Phones: the facts run on as "Brand · Pack · Category". Every fact carries its dot in a
   20 px box before it, and the list is shifted 20 px left and clipped there, so the fact
   that starts a line has its dot cut off (no line ever starts with "·"; r2 L7). */
.pg-row__facts {
  display: flex; flex-wrap: wrap; margin: 0 0 0 calc(-1 * var(--space-5)); clip-path: inset(0 0 0 var(--space-5));
  color: var(--color-muted); font-size: var(--fs-sm); line-height: var(--lh-base);
}
.pg-row__facts div, .pg-row__facts dt, .pg-row__facts dd { margin: 0; }
.pg-row__facts div { display: inline-flex; align-items: baseline; min-width: 0; }
.pg-row__facts div::before { content: "·"; flex: none; width: var(--space-5); text-align: center; }
.pg-row__facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 768px) {
  .pg .pg-row .cc-card__media { width: 96px; }
  .pg .cc-card.pg-row { gap: var(--space-6); }
  .pg-row__info { grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr); gap: var(--space-6); }
  .pg-row__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; clip-path: none; font-size: var(--fs-base); color: var(--color-text); }
  .pg-row__facts div { display: block; }
  .pg-row__facts div::before { content: none; }
  .pg-row__facts dt { position: static; width: auto; height: auto; clip: auto; font-weight: var(--fw-semibold); color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.4; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .pg .pg-row:hover .cc-card__img, .pg .pg-row:hover .cc-pack { transform: scale(1.08); } }

/* Pagination (design-spec §9.10) */
.pg-pagination { display: flex; justify-content: center; margin-top: var(--space-8); }
.pg-pagination__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.pg-page {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; border-radius: var(--radius-pill);
  color: var(--color-text); text-decoration: none; font-size: var(--fs-base); font-weight: var(--fw-body);
  transition: background-color var(--dur-base) ease;
}
.pg-page[aria-current="page"] { background: var(--color-field); }
.pg-page--gap { min-width: 24px; }
.pg-page--next, .pg-page--prev { display: inline-flex; gap: 6px; padding-left: var(--space-3); }
.pg-page--prev { padding: 0 var(--space-3) 0 0; }
@media (hover: hover) and (pointer: fine) { .pg-page:not(.pg-page--gap):not([aria-current]):hover { background: var(--color-field); } .pg-page--next:hover, .pg-page--prev:hover { background: none !important; text-decoration: underline; } }
.pg-showing { margin-top: var(--space-3); text-align: center; color: var(--color-muted); }
/* Phones: Previous / Next shrink to their chevrons (the links keep their names), so the row
   ‹ 1 … 5 … 10 › fits a 320 px screen. */
@media (max-width: 479.98px) {
  .pg-page__word { display: none; }
  .pg-page--next, .pg-page--prev { min-width: 40px; padding: 0; justify-content: center; }
}

/* Empty state */
.pg-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-4); text-align: center; border-radius: var(--radius-panel); background: var(--color-surface-2); }
.pg-empty__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pg-empty__text { max-width: 480px; }
.pg-empty__fix { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }
.pg-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }

/* ---------- filter drawer (design-spec §10) ---------- */
.pg-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.pg-drawer__dim { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; transition: opacity var(--dur-overlay) var(--ease-drawer); }
.pg-drawer__panel {
  position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 100%; max-width: 500px;
  background: var(--color-surface); transform: translateX(-100%); transition: transform var(--dur-drawer) var(--ease-drawer);
  font-family: var(--font-body);
}
.pg-drawer.is-open .pg-drawer__dim { opacity: 1; }
.pg-drawer.is-open .pg-drawer__panel { transform: none; }
.pg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.pg-drawer__title { font-size: var(--fs-md); line-height: 26px; font-weight: var(--fw-bold); }
.pg-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; color: var(--color-text); }
.pg-drawer__close .icon { stroke-width: 1.5; transition: transform var(--dur-base) ease; }
@media (hover: hover) and (pointer: fine) { .pg-drawer__close:hover .icon { transform: rotate(180deg); } }
.pg-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-5) 0; }
.pg-drawer__sort { padding-bottom: var(--space-6); margin-bottom: 0; border-bottom: 1px solid var(--color-border); }
.pg-drawer__sort .pg-sort { gap: var(--space-3); }
.pg-drawer__sort .pg-sort__label { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.pg-drawer__sort .pg-select { width: 100%; }
.pg-drawer__body { display: flex; flex-direction: column; padding-bottom: 0; }
.pg-drawer__foot { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--space-5)); padding: var(--space-5); background: var(--color-surface); }
.pg-drawer__apply.cc-pill { display: flex; width: 100%; }
.pg-drawer :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pg-drawer .icon { stroke-width: 1.5; }
@media (min-width: 768px) {
  .pg-drawer__head { padding: var(--space-4) 30px; }
}

/* ---------- PRODUCT (design-spec §11) ---------- */
@media (min-width: 1280px) { .pg-product__inset { padding-inline: 50px; } }
.pg-product__main { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .pg-product__main { grid-template-columns: minmax(0, 1.422fr) minmax(0, 1fr); gap: 30px; align-items: start; }
  .pg-product__media { position: sticky; top: calc(var(--pg-sticky-top) + var(--space-5)); }
  .pg-pinfo { padding-left: var(--space-5); }
}

/* Gallery */
.pg-gallery { display: flex; flex-direction: column-reverse; gap: var(--space-3); }
.pg-gallery__main { position: relative; }
.pg-gallery__track {
  display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--radius-panel); overscroll-behavior-x: contain;
}
.pg-gallery__track::-webkit-scrollbar { display: none; }
.pg-gallery__slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; display: grid; place-items: center; border-radius: var(--radius-panel); overflow: hidden; }
.pg-gallery__slide.is-label { position: relative; background: var(--color-surface-2); }
.pg-gallery__img { width: 100%; height: 100%; object-fit: contain; }
.pg-gallery__thumbs { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.pg-thumb { position: relative; flex: none; width: calc((100% - 3 * var(--space-3)) / 4); aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; }
.pg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pg-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--color-text); opacity: 0; transition: opacity var(--dur-fast) ease; }
.pg-thumb.is-active::after { opacity: 1; }
.pg-gallery .pg-float-btn { display: none; }
@media (min-width: 768px) {
  .pg-gallery { display: block; position: relative; padding-left: 82px; }
  .pg-gallery__thumbs { position: absolute; left: 0; top: 0; bottom: 0; flex-direction: column; gap: var(--space-2); width: 70px; overflow-y: auto; scrollbar-width: none; }
  .pg-thumb { width: 100%; }
  .pg-gallery .pg-float-btn { display: grid; }
  .pg-gallery .pg-float-btn--prev { left: var(--space-4); }
  .pg-gallery .pg-float-btn--next { right: var(--space-4); }
}
@media (min-width: 1024px) {
  .pg-gallery { padding-left: 96px; }
  .pg-gallery__thumbs { width: 84px; }
}
/* One picture (or the label of a product without photos): the same 710 / 500 grid and
   614 px square as a photo page (#5), with the one picture shown as the selected thumbnail.
   On phones a lone thumbnail says nothing, so it is left out. */
.pg-thumb--only { pointer-events: none; background: var(--color-surface-2); }
.pg-thumb--only .cc-pack { position: absolute; inset: 0; }
@media (max-width: 767.98px) { .pg-gallery.is-single { gap: 0; } .pg-gallery.is-single .pg-gallery__thumbs { display: none; } }

/* Info column */
.pg-pinfo__badge { display: inline-flex; margin-bottom: var(--space-5); }
@media (min-width: 768px) { .pg-pinfo__badge { margin-bottom: var(--space-6); } }
.pg-pinfo__title { font-size: var(--fs-2xl); line-height: 33.6px; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
@media (min-width: 1024px) { .pg-pinfo__title { font-size: var(--fs-4xl); line-height: 48px; } }
.pg-pinfo__brand { margin-top: var(--space-3); font-size: var(--fs-base); }
.pg-pinfo__brand a { font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-fast) ease; }
.pg-pinfo__brand a:hover { text-decoration-thickness: 2px; }
.pg-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: var(--space-6) 0; list-style: none; padding: 0; }
.pg-checks__item { display: flex; align-items: center; gap: 10px; line-height: 18px; }
.pg-checks__ring { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border: 1px solid var(--color-check); border-radius: var(--radius-round); color: var(--color-check); }
.pg-checks__ring .icon { width: 10px; height: 10px; stroke-width: 2.5; }
.pg-options { display: flex; flex-direction: column; margin-top: var(--space-6); }
.pg-options__legend { margin-bottom: var(--space-3); line-height: var(--lh-base); }
.pg-options__name { font-weight: var(--fw-semibold); }
.pg-options__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-optpill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text);
  font-size: var(--fs-base); font-weight: var(--fw-body); text-decoration: none; transition: all var(--dur-fast) ease;
}
.pg-optpill.is-selected { background: var(--color-button); color: var(--color-button-ink); }
@media (hover: hover) and (pointer: fine) { .pg-optpill:hover { background: var(--color-button); color: var(--color-button-ink); } }
.pg-packline { margin-top: var(--space-6); }
.pg-options.pg-flavorline { display: block; margin-bottom: 0; }
.pg-flavorline__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .pg-flavorline__link:hover { text-decoration-thickness: 2px; } }
.pg-rte p + p { margin-top: var(--space-3); }
.pg-pinfo__desc { margin: var(--space-6) 0; }
.pg-facts { margin-top: var(--space-6); }
.pg .pg-facts__acc { border-top: 1px solid var(--color-border); border-bottom: 0; }
.pg .pg-facts__acc:last-child { border-bottom: 1px solid var(--color-border); }
.pg .pg-facts__acc .cc-acc__summary { min-height: 0; padding: var(--space-4) 0; font-size: 20px; line-height: 32px; font-weight: var(--fw-semibold); }
.pg .pg-facts__acc .cc-acc__body { padding: 0 0 var(--space-5); }
.pg-related { margin-top: var(--space-8); }
@media (min-width: 1024px) { .pg-related .pg-h2 { font-size: var(--fs-3xl); } }

/* ---------- ABOUT ---------- */
.pg-about__intro { display: grid; gap: var(--space-7); margin-top: var(--space-9); }
.pg-about__lede { max-width: 720px; }
.pg-about__p { margin-top: var(--space-3); }

.pg-about__serve { margin-top: var(--space-10); }
/* In-page targets (#who-we-serve, #company-details) stop clear of the sticky header. */
.pg-about__serve, .pg-about__details { scroll-margin-top: calc(var(--header-offset, 120px) + var(--space-5)); }
.pg-about__cols { display: grid; gap: var(--space-7); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pg-about__cols { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.pg-about__col { display: grid; justify-items: start; gap: var(--space-2); }
.pg-about__disc { display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: var(--space-3); border-radius: var(--radius-round); background: var(--color-surface); box-shadow: inset 0 0 0 var(--tile-ring) var(--color-ring); }
.pg-about__disc .pg-caticon { width: 80%; height: 80%; }
.pg-about__h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.pg-about__details { margin-top: var(--space-10); padding: var(--space-7) var(--space-5); border-radius: var(--radius-panel); background: var(--color-surface-2); }
@media (min-width: 768px) { .pg-about__details { padding: var(--space-8) var(--space-8); } }
.pg-about__dl { display: grid; gap: var(--space-6); margin: var(--space-6) 0 0; }
@media (min-width: 768px) { .pg-about__dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } }
.pg-about__fact dt { font-weight: var(--fw-bold); font-size: var(--fs-md); margin-bottom: var(--space-2); }
.pg-about__fact dd { margin: 0; }
.pg-about__fact a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- NOT FOUND ---------- */
.pg-notfound__panel { display: grid; border-radius: var(--radius-panel); overflow: hidden; background: transparent; color: var(--color-royal-ink); }
.pg-notfound__text { padding: var(--space-8) var(--space-5); background: var(--color-royal); }
.pg-notfound__body { margin-top: var(--space-4); max-width: 480px; }
.pg-notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.pg-notfound__art { position: relative; height: 240px; background: var(--color-info-bg); }
@media (min-width: 768px) {
  .pg-notfound__panel { grid-template-columns: 1fr 1fr; min-height: 400px; }
  .pg-notfound__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-8); }
  .pg-notfound__art { height: auto; }
}
@media (min-width: 1024px) { .pg-notfound__text { padding-inline: 100px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-hero__slide, .pg-dot__track, .pg-progress__fill, .pg .pg-card .cc-card__img, .pg .pg-card .cc-pack { transition: none; }
  .pg-hero__panel .pg-dot__fill { animation: none !important; }
  :is(.pg, .pg-drawer) .cc-acc[open] > .cc-acc__body { animation: none; }
}

/* Brand banner: product photos, or the name inside a big ringed disc. */
/* Sizes follow the shorter of the art box's height and width (container units), so the
   collage never runs off a narrow box (768: the orange bag was cut off, #31). */
.pg-photoart { position: absolute; inset: 0; container-type: size; }
.pg-photoart__img { position: absolute; top: 50%; width: auto; height: min(86cqh, 62cqw); object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(var(--shadow-sm)); }
.pg-photoart--1 .pg-photoart__img--1 { left: 50%; }
.pg-photoart--2 .pg-photoart__img--1 { left: 38%; height: min(86cqh, 50cqw); }
.pg-photoart--2 .pg-photoart__img--2 { left: 64%; top: 56%; height: min(72cqh, 42cqw); }
.pg-photoart--3 .pg-photoart__img--1 { left: 50%; z-index: 2; height: min(86cqh, 48cqw); }
.pg-photoart--3 .pg-photoart__img--2 { left: 24%; top: 58%; height: min(64cqh, 40cqw); }
.pg-photoart--3 .pg-photoart__img--3 { left: 76%; top: 58%; height: min(64cqh, 40cqw); }
.pg-art__disc--word { padding: 0; container-type: inline-size; }
/* The brand's wordmark, fitted to the disc like its tile (base.js fitInto sets --cc-fit). */
.pg-art__word {
  font-size: calc(var(--cc-fit, 14) * 1cqi); line-height: 1.02; letter-spacing: -0.015em;
  font-weight: var(--fw-bold); color: var(--color-royal); text-align: center;
}