/* =============================================================================
   PACK LEADER — SINGLE BRAND PAGE
   Figma: PL-Working 9:3267 (ORIJEN) and its three siblings.
   Loaded only on is_singular('brand'). Every value below is taken from the
   Figma nodes, not eyeballed; node ids are cited per block.

   The page reuses the site's existing geometry rather than inventing new:
   1370px band / 1273px inset card / 26px section radius are the same numbers
   consistency.js already asserts on Home, About and Team.
   ============================================================================= */

.pl-brand-page {
  --bp-band: 1370px;   /* full-width section    */
  --bp-inset: 1273px;  /* inset card measure    */
  --bp-gut: 35px;      /* page gutter           */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Transparent so the page's own background shows: the body is cream, and
     ACANA / Taste of the Wild set a brand tint on it (Elementor page
     settings → Style → Body), which a cream wrapper here would paint over. */
  background: transparent;
}
/* Descendant, not direct child: each section is now rendered by its own
   Elementor widget, so Elementor's own `.elementor-widget` / `.e-con-inner`
   wrapper divs sit between `.pl-brand-page` and each `<section>`. A `>`
   combinator would stop matching the moment that wrapper appears; a space
   combinator carries the identical (0,2,0) specificity every `!important`
   fight in this file was already tuned against, so nothing else here needed
   to change.
   Centering, however, DID need to change: `.pl-brand-page`'s own
   `align-items: center` only centers its DIRECT flex children, which are now
   Elementor's full-width wrapper divs, not these `<section>`s — so a
   constrained-width section with no margin of its own just sits flush left
   inside that full-width wrapper. `margin-inline: auto` on the section
   itself is what actually centers it now. */
/* The wrappers themselves must SPAN the container: under the root's
   `align-items: center` an Elementor widget wrapper shrink-wraps to its
   content, and a section whose width is `calc(100% - gutters)` then has no
   definite base to resolve that percentage against — the near-you band
   collapsed to its text's width (~715px) instead of the design's full 1370
   band exactly this way. */
.pl-brand-page .elementor-widget { width: 100%; }
.pl-brand-page section {
  width: min(var(--bp-band), calc(100% - var(--bp-gut) * 2));
  margin-left: auto;
  margin-right: auto;
}
/* Wider than the 1440 design (client, 2026-10): the brand page uses the whole screen like every other page.
   From 1025 up (2026-10-13 spacing review, was 1441 up): every value below is exactly its 1440 size at 1440, so the
   1440 page is unchanged, and on laptops the grids, intro card and product wells keep their share of the band
   instead of their 1440 pixel widths (the Why-choose grid ran almost to the band edges at 1280). */
@media (min-width: 1025px) {
  /* every section runs to the page gutters (Why-choose cards and the product grid included, 2026-10-08),
     and the intro card keeps its 1273 : 1370 proportion of the banner */
  .pl-brand-page section { width: calc(100% - var(--bp-gut) * 2); }
  .pl-brand-page .pl-bp-hero-wrap .pl-bp-intro { width: calc(100% * 1273 / 1370); }
  /* the Why-choose cards (1188 of the 1370 band) and the product grid + "View all" bar (1210) keep their
     share of the band rather than stopping at their 1440 pixel widths */
  .pl-brand-page .pl-bp-why__grid { width: calc(100% * 1188 / 1370); }
  .pl-brand-page .pl-bp-products__grid,
  .pl-brand-page .pl-bp-products .pl-bp-products__more { width: calc(100% * 1210 / 1370); }   /* outranks the later (0,2,0) button rule */
  /* card 1's copy box is 517 of the 536.5 the other cards' copy gets (Figma line breaks), not a fixed 517px */
  .pl-brand-page .pl-bp-why__grid > .pl-bp-card:first-child .pl-bp-card__body { max-width: calc(100% * 517 / 536.5); }
  /* the intro paragraph keeps its 1440 reading width inside the wider card: the 1273px card less the brand's own
     side inset (1211px for ORIJEN's 31px, 1195px for ACANA / Diamond Naturals' 39px — 2026-10-13: a flat 1195 put
     ORIJEN's two Figma lines on three) */
  .pl-brand-page .pl-bp-intro__text { max-width: calc( 1273px - 2 * var( --bp-intro-px, 31px ) ); margin-left: auto; margin-right: auto; }
  /* product image wells grow with their card (385 × 262 at 1440) and the pack shot with its well (254 of 262) */
  .pl-brand-page .pl-bp-prod__well { height: auto; aspect-ratio: 385.33 / 262; }
  .pl-brand-page .pl-bp-prod__well .pl-bp-prod__img { width: calc(100% * 254 / 385.33); height: auto; aspect-ratio: 1; }
}

/* --- shared buttons — same kit as the rest of the site (9:3291 / 9:3004) --- */
.pl-brand-page .pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pl-brand-page .pl-btn--solid {
  background: var(--pl-forest, #173434);
  border: 1px solid rgba( 255, 255, 255, 0.15 );
  color: #FFFFFF;
}
.pl-brand-page .pl-btn--solid:hover { background: var(--pl-green-hover, #2E8B62); border-color: var(--pl-green-hover, #2E8B62); }
.pl-brand-page .pl-btn--outline {
  background: transparent;
  border: 0.821px solid rgba( 23, 52, 52, 0.22 );
  border-radius: 9.853px;
  color: var(--pl-forest, #173434);
}
.pl-brand-page .pl-btn--outline:hover { background: #FFFFFF; }
.pl-brand-page .pl-btn--light {
  background: var(--pl-cream, #FFF9F0);
  border: 0.821px solid rgba( 23, 52, 52, 0.22 );
  border-radius: 9.853px;
  color: var(--pl-forest, #173434);
}
.pl-brand-page .pl-btn--light:hover { background: #FFFFFF; }
/* a button with no URL yet renders as plain text, never a dead link */
/* Buttons whose URL the client has not supplied yet still render at full
   strength — the design shows them solid, and a washed-out control reads as a
   bug rather than a pending link. They are <span>, so they are not clickable. */
.pl-brand-page .pl-btn.is-disabled { cursor: default; }

/* =========================================================================
   HERO — 9:3269
   Band 1370x415 @ r26 on var(--pl-forest, #173434), photo cover, scrim darkening to the RIGHT,
   riso soft-light 40%. The intro card sits 55px over the band's bottom edge.
   ========================================================================= */
.pl-bp-hero-wrap { position: relative; padding-top: 2px; }

.pl-bp-hero {
  position: relative;
  height: var( --bp-hero-h, 415px );
  border-radius: 26px;
  overflow: hidden;
  background: var(--pl-forest, #173434);
}
/* MUST stay `.pl-brand-page`-scoped (0,2,0). The theme/kit `.elementor img`
   block is (0,1,1) and was beating `height:100%`, so the photo fell back to its
   intrinsic aspect and object-fit never engaged AT ALL — measured 420px tall in
   the 415 band on ORIJEN and 606px on Taste of the Wild, where the band showed
   only the top 415px and the object-position below did nothing whatsoever. */
.pl-brand-page .pl-bp-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Each brand crops its hero shot differently — ACANA 9:3127 is placed
     bottom-left of the frame, Diamond Naturals 9:3658 flush right, ORIJEN
     9:3271 top-left — so the crop is per-brand data, not a constant. */
  object-position: var( --bp-hero-pos, center );
}
/* 9:3272 / 9:3128 / 9:3659 — the SAME rectangle copied onto all four artboards:
   a plain TWO-stop ramp, transparent to forest, rotated -90deg so it is
   transparent at the left. It is laid out from x-47.6 to x1370 across the 1370
   band, which is why it starts at alpha .034 rather than 0.
   An earlier pass invented a third stop at 0.72/52%; a linear ramp is 0.536
   there, so the middle of every hero was ~35% too dark and was burying the
   photography. Verified against the design export on ACANA and Diamond. */
.pl-bp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg, rgba( 23, 52, 52, 0.034 ) 0%, var(--pl-forest, #173434) 100% );
}
.pl-bp-hero .pl-texture::after,
.pl-bp-hero::after { opacity: .40; }   /* 9:3274 riso at 40% */

/* The copy block is anchored by its LEFT edge in every frame (ORIJEN 9:3273 and
   ACANA 9:3129 at x648, Diamond Naturals 9:3660 at x629 on the 1370 band), and
   its top and its logo-to-headline gap are per-brand too. A single
   `right: 7.7%` put all four at x686 — 38px right of ORIJEN and ACANA, 32px
   left of Diamond Naturals. */
.pl-bp-hero__inner {
  position: absolute;
  left: var( --bp-title-x, 47.303% );
  top: var( --bp-hero-top, 54px );
  width: var( --bp-title-w, 578px );
  max-width: calc( 100% - var( --bp-title-x, 47.303% ) - 20px );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var( --bp-hero-gap, 0px );
  z-index: 2;
}
.pl-bp-hero__logo {
  width: var( --bp-logo-w, 97px );
  height: auto;
  display: block;
}
.pl-brand-page .pl-bp-hero__title {
  margin: 0;
  font-size: 58px;
  font-weight: 600;
  /* Figma leaves this on `normal`: 9:3129 is 146px tall for two 58px lines and
     9:3660 is 219px for three, i.e. 73px a line = 1.259. At 1.12 Diamond
     Naturals' three-line headline came out 24px short and read cramped. */
  line-height: 1.259;
  letter-spacing: -1.16px;
  color: var(--pl-card, #FFF7F2);
}

/* intro card — 9:3287 */
.pl-bp-intro {
  position: relative;
  z-index: 3;
  width: min( var(--bp-inset), 100% );
  margin: -55px auto 0;
  /* Side padding is per-brand: ORIJEN 9:3288 insets its content 31px, ACANA
     9:3147 and Diamond Naturals 9:3686 inset 39px (1195 of the card's 1273). */
  padding: 36px var( --bp-intro-px, 31px );
  background: var(--pl-card, #FFF7F2);
  border: 1px solid rgba( 23, 52, 52, 0.15 );
  border-radius: 28px;
  box-shadow: 0 0 27.2px rgba( 23, 52, 52, 0.06 );
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.pl-bp-intro__text {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.259;   /* Figma `normal`: 9:3148 is 75px for three 20px lines */
  color: var(--pl-forest, #173434);
}
.pl-bp-intro__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- BRAND BANNER hero (2026-09: 29:8983 / 29:9037 / 29:9091 / 29:9147) ----
   The band is now each brand's own finished artwork — logo, headline and
   pack shots are IN the image — so there is no scrim, no riso, no live copy
   over it. The band keeps the artwork's exact proportion (1370 × its design
   height) at every width instead of a fixed height: a fixed height would
   cover-crop the baked-in text off both ends on anything narrower than
   1370. */
.pl-bp-hero-wrap--banner .pl-bp-hero {
  height: auto;
  aspect-ratio: var( --bp-hero-ar, 1370 / 415 );
}
.pl-bp-hero-wrap--banner .pl-bp-hero::after { content: none; }
/* Per slide: Crop focus, for artwork of another shape than the first slide's (centre by default). */
.pl-brand-page .pl-bp-hero-wrap--banner .pl-bp-hero__photo { object-position: var( --bp-slide-pos, center ); }

/* ---- Banner slider (2026-10-13 client: "brand header images needs to be a slider") ----
   The slides sit side by side in a scroll-snap track filling the band, so a swipe or a trackpad scroll moves
   them natively; pl-main.js adds autoplay and the arrows (no dots or pause button: client, 2026-10-13). A
   one-slide banner has the same track with nothing to scroll and no controls. */
.pl-bp-hero-wrap--banner .pl-bp-hero { container-type: inline-size; }   /* cqw below = % of the band's width */
.pl-bp-hero__track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;   /* no browser back-swipe at either end */
  scrollbar-width: none;
}
.pl-bp-hero__track::-webkit-scrollbar { display: none; }
.pl-bp-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pl-bp-hero__link { position: absolute; inset: 0; display: block; }

/* Arrows: mouse and trackpad screens, shown while the pointer is on the banner or one has keyboard focus;
   touch screens swipe. Centred on the part of the band above the intro card (it rides up --bp-intro-ov % of
   the width). (0,3,0) to beat the theme's button reset, hover and focus included. */
.pl-brand-page .pl-bp-hero .pl-bp-hero__arrow {
  position: absolute;
  z-index: 2;
  top: calc( ( 100% - var( --bp-intro-ov, 4.015 ) * 1cqw ) / 2 );
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba( 255, 247, 242, 0.92 );
  box-shadow: 0 2px 12px rgba( 23, 52, 52, 0.22 );
  color: var( --pl-forest, #173434 );
  cursor: pointer;
  opacity: 0;
  transform: translateY( -50% );
  transition: opacity .2s ease, background-color .2s ease;
}
.pl-brand-page .pl-bp-hero .pl-bp-hero__arrow--prev { left: 18px; }
.pl-brand-page .pl-bp-hero .pl-bp-hero__arrow--next { right: 18px; }
.pl-brand-page .pl-bp-hero:hover .pl-bp-hero__arrow,
.pl-brand-page .pl-bp-hero .pl-bp-hero__arrow:focus-visible { opacity: 1; }
.pl-brand-page .pl-bp-hero .pl-bp-hero__arrow:hover { background: #FFFFFF; color: var( --pl-forest, #173434 ); }
/* An icon chosen under the widget's Style › Slider arrows (PL: Brand hero) in place of the chevron: the chevron's
   20px box, in the arrow colour. */
.pl-bp-hero__arrow-icon { display: grid; place-items: center; width: 20px; height: 20px; line-height: 1; }
.pl-bp-hero__arrow-icon > svg { display: block; width: 100%; height: 100%; }
.pl-bp-hero__arrow-icon > i { font-size: 20px; }
@media ( hover: none ) {
  .pl-brand-page .pl-bp-hero .pl-bp-hero__arrow { display: none; }
}
/* The card rides up over the banner by a per-brand amount (55px ACANA / TOW,
   29px ORIJEN, 87px Diamond on the 1370 band). A % margin resolves against the
   band's own width, so the overlap shrinks in step with the artwork instead
   of burying its bottom third on a phone. */
.pl-bp-hero-wrap--banner .pl-bp-intro {
  margin-top: calc( var( --bp-intro-ov, 4.015 ) * -1% );
  text-align: center;
}
.pl-bp-hero-wrap--banner .pl-bp-intro__actions { justify-content: center; }
/* Per-brand accent on the intro buttons (ORIJEN red, TOW navy, Diamond
   green, ACANA olive) — set by the Hero widget's "Brand accent" control. */
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--solid {
  background: var( --bp-accent, var(--pl-forest, #173434) );
  border-color: var( --bp-accent, var(--pl-forest, #173434) );
}
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--solid:hover {
  background: color-mix( in srgb, var( --bp-accent, var(--pl-forest, #173434) ) 82%, #000 );
  border-color: color-mix( in srgb, var( --bp-accent, var(--pl-forest, #173434) ) 82%, #000 );
}
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--outline {
  color: var( --bp-accent, var(--pl-forest, #173434) );
  border-color: color-mix( in srgb, var( --bp-accent, var(--pl-forest, #173434) ) 30%, transparent );
}
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--outline:hover {
  background: color-mix( in srgb, var( --bp-accent, var(--pl-forest, #173434) ) 8%, #FFFFFF );
}

/* =========================================================================
   WHY CHOOSE — 9:3293
   ========================================================================= */
/* The 23px gutter every section boundary on this page uses — Figma ORIJEN:
   hero block 9:3268 ends at y659, the cards frame 9:3293 opens at y682. It was
   the only boundary missing it, so the heading sat 23px high. */
.pl-bp-why { margin-top: 23px; padding: 75px 0 99px; }   /* frame is 991 tall; cards end at +892 */
.pl-brand-page .pl-bp-why__heading {
  /* 9:3153 occupies y75-139 and the first card row starts at y201 */
  margin: 0 0 62px;
  text-align: center;
  font-size: 51px;
  font-weight: 600;
  letter-spacing: -1.02px;
  color: var(--pl-forest, #173434);
}
.pl-bp-why__grid {
  /* NOT the 1273 intro measure: the cards run x90.9-1278.9 on the 1370 band
     (9:3155/9:3169 on ACANA, 9:3694/9:3709 on Diamond Naturals) = 1188. */
  width: min( 1188px, 100% );
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
  gap: 14px 21px;         /* rows y201 and y554 on a 339 card; 584 + 21 = 605 pitch */
  /* Both cards in a row are the SAME height in Figma even when one carries two
     fewer lines of body (ACANA 9:3155/9:3169 both 339, Diamond Naturals
     9:3694/9:3709 both 323). At `start` each pair ended on a ragged edge. */
  align-items: stretch;
}
/* 2026-09 (29:8996 et al.): flat #F6F2EC, no riso — the textured #E5DCD1
   card is gone on all four boards. */
.pl-bp-card {
  position: relative;
  padding: 15px 15px 22px;
  background: #F6F2EC;
  border: 1px solid rgba( 23, 52, 52, 0.15 );
  border-radius: 26px;
  overflow: hidden;
}
.pl-bp-card__well {
  position: relative;
  z-index: 1;
  border-radius: 15px;
  overflow: hidden;
  background: var(--pl-cream, #FFF9F0);
  aspect-ratio: 554 / 165;
}
/* The BOTTOM row's wells are taller in every frame — 554x188 against the top
   row's 554x165 (ACANA 9:3163/9:3177, Diamond Naturals 9:3703/9:3717). */
.pl-bp-why__grid > .pl-bp-card:nth-child( n + 3 ) .pl-bp-card__well {
  aspect-ratio: 554 / 188;
}
/* Scoped (0,2,0) for the same reason as the hero photo: unscoped, `height:100%`
   lost to `.elementor img` and every card image rendered at its intrinsic
   aspect inside the well's overflow:hidden. Measured on ORIJEN: a 596x478 image
   in a 596x178 well (so only the top third showed, not Figma's crop) and, for
   the 800x143 "Biologically Appropriate" source, a 596x107 image that left a
   71px cream band across the bottom of the well. */
.pl-brand-page .pl-bp-card__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Every fill in the design is panned by hand inside its well, so the crop is
     per CARD, not a constant — e.g. ORIJEN 9:3305 shows x29-74% of the beach
     shot where a centred cover shows x24-77%, and 9:3319 sits at the FOOT of
     its source (y90%) rather than its middle. */
  object-position: var( --bp-card-pos, 50% 50% );
  display: block;
}
.pl-brand-page .pl-bp-card__title {
  position: relative;
  z-index: 1;
  margin: 19px 7.5px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba( 23, 52, 52, 0.9 );
}
.pl-bp-card__body {
  position: relative;
  z-index: 1;
  margin: 12px 7.5px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.259;   /* Figma `normal`: 9:3302 is 60px for three 16px lines */
  color: rgba( 23, 52, 52, 0.69 );
}

/* =========================================================================
   {BRAND} PRODUCTS — Figma 16:4103 (ORIJEN) / 16:4025 (ACANA)
   Replaces the old "Products available in South Africa" panel entirely: the
   two bordered species lists, the absolutely-placed range shot and the
   provinces watermark are all gone from the redesign.

   Section frame is 1372 wide; the grid is inset to 1210 (x81..1291 measured
   off the design export). Cards are 385.33 wide on a 27px column gutter
   (412.33 pitch) and a 56px row gutter (467 pitch, 411-tall cards).
   ========================================================================= */
.pl-bp-products {
  margin-top: 23px;      /* the same section gutter every boundary uses */
  padding: 39px 0 0;     /* 16:4104 heading sits at y39 in the section */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Same 51px as "Why choose X?" — one line is 64 tall. 29:11041: heading and
   pills are one group with a 19px gap; the group sits 56px above the grid. */
.pl-brand-page .pl-bp-products__heading {
  margin: 0 0 56px;
  text-align: center;
  font-size: 51px;
  font-weight: 600;
  letter-spacing: -1.02px;
  line-height: 1.25;
  color: var(--pl-forest, #173434);
}
/* The All / Dogs / Cats / Treats pills are the SAME component the /brands/
   directory already uses (pl-global.css .pl-filter-pill) — 44px tall, active
   filled var(--pl-forest, #173434), exactly 29:11044. Only the spacing is section-specific. */
.pl-bp-products__filter {
  margin: -37px 0 56px;  /* 19px under the heading, 56px over the grid */
  /* `safe center`, not `center`: this file loads after pl-global.css, so a
     plain `center` would win over the mobile slider's flex-start and push an
     overflowing row's FIRST chips off the unreachable left side of the scroll
     area. safe center degrades to start-aligned exactly when the row overflows. */
  justify-content: safe center;
}
/* A pill whose combination with the OTHER active filters matches nothing
   (faceted recount in pl-main.js) — disabled, visibly, instead of being a
   click that dead-ends into the empty state. */
button.pl-filter-pill.is-dead {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ---- refine toolbar: Key Ingredient <select> + text search ----
   Everything BEYOND the design's own pill row lives here, one visual register
   quieter than the pills so the design's hierarchy survives the additions.
   Both controls share the pill kit's geometry (44px, r43, the .22 forest
   hairline) so the row reads as one system with the pills above it. */
.pl-bp-products__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 0 34px;
  width: min( 1210px, 100% );
}
/* The toolbar is the one addition beyond the design, so it tucks into the
   pills' orbit (16px under them) and gives the design's 56px back to the grid
   only partially — pills + toolbar read as one control panel. */
.pl-filter-bar + .pl-bp-products__toolbar { margin: -40px 0 48px; }
/* No pills (single-category brand): the toolbar takes the pills' own seat. */
.pl-bp-products__heading + .pl-bp-products__toolbar { margin: -37px 0 56px; }
/* PL: Products options (2026-10-13). Brand buttons above the Pet type buttons: the second row sits 12px under the
   first (the first keeps its 56px foot, less 44). Heading switched off: the first row starts the section. No
   products + a message: the message. Placed off a brand page, a brand widget wraps itself in .pl-brand-page (for
   this file's scoping; pl_bp_render_standalone()) with no page gutters of its own — the column it sits in has them. */
.pl-bp-products__filter + .pl-bp-products__filter { margin-top: -44px; }
.pl-bp-products > .pl-bp-products__filter:first-child,
.pl-bp-products > .pl-bp-products__toolbar:first-child { margin-top: 0; }
.pl-bp-products__none { margin: 0; padding: 24px 0; text-align: center; color: var(--pl-forest, #173434); }
.pl-brand-page.pl-bp-standalone { --bp-gut: 0px; width: 100%; }
/* Both controls are double-class scoped (0,2,0): the theme's reset.css styles
   `input[type="search"], select` at (0,1,1) with `width:100%; border-radius:
   3px`, which silently beat a lone class here — the search shipped one build
   as a full-width square wireframe box exactly that way. */
.pl-bp-products__select-wrap { position: relative; display: inline-flex; }
.pl-bp-products .pl-bp-products__select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  width: auto;
  padding: 0 42px 0 18px;
  border: 1px solid rgba( 23, 52, 52, 0.22 );
  border-radius: 43px;
  background: var(--pl-cream, #FFF9F0);
  color: var(--pl-forest, #173434);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.pl-bp-products .pl-bp-products__select:hover { background: #FFFFFF; }
.pl-bp-products__select-wrap::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--pl-forest, #173434);
  border-bottom: 1.6px solid var(--pl-forest, #173434);
  transform: translateY( -70% ) rotate( 45deg );
  pointer-events: none;
}
.pl-bp-products .pl-bp-products__search {
  height: 44px;
  width: min( 300px, 100% );
  padding: 0 20px 0 42px;
  border: 1px solid rgba( 23, 52, 52, 0.22 );
  border-radius: 43px;
  background: #FFF9F0 url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23173434' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E" ) no-repeat 16px center;
  color: var(--pl-forest, #173434);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease;
}
.pl-bp-products .pl-bp-products__search::placeholder { color: rgba( 23, 52, 52, 0.5 ); }
.pl-bp-products .pl-bp-products__search:hover { background-color: #FFFFFF; }
.pl-bp-products .pl-bp-products__select:focus-visible,
.pl-bp-products .pl-bp-products__search:focus-visible {
  outline: 2px solid var(--pl-green-hover, #2E8B62);
  outline-offset: 2px;
  border-color: var(--pl-green-hover, #2E8B62);
}
/* The empty state's own way out — resets every mechanism at once, so a user
   three filters deep is never left reverse-engineering which one to undo. */
.pl-bp-products .pl-bp-products__clear {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--pl-forest, #173434);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pl-bp-products .pl-bp-products__clear:hover { color: var(--pl-green-hover, #2E8B62); }
/* "No products match this combination" — only reachable with two filter rows
   active at once; a single row can't produce zero (its own "All" is always a
   match). Same visual weight as the empty states used elsewhere on the site
   rather than a jarring red/error treatment — an empty filter result isn't a
   failure, just an outcome. */
.pl-bp-products__empty {
  width: min( 1210px, 100% );
  margin: 0 0 20px;
  padding: 40px 24px;
  border: 1px dashed rgba( 23, 52, 52, 0.2 );
  border-radius: 16px;
  background: #F4EEE6;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba( 23, 52, 52, 0.7 );
}
/* `stretch`, not `start`: 29:11048 stretches every card in a row to the
   tallest, and the description takes the slack (flex:1 below) — so the
   ingredient dividers of a row sit on one line however long each
   description runs. */
.pl-bp-products__grid {
  width: min( 1210px, 100% );
  display: grid;
  grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
  gap: 56px 27px;
  align-items: stretch;
}
/* Everything past the sixth card is hidden rather than removed, so the filter
   still counts it and "View all products" needs no request. */
.pl-bp-products__grid .pl-bp-prod.is-folded,
.pl-bp-products__grid .pl-bp-prod.is-filtered { display: none; }

/* ---- card — background is the page's own, so only the image well reads as
   a container. Each card is a 3-row SUBGRID of the product grid (well / text
   / ingredients): the row tracks are shared across a grid row, so every
   "First 5 Ingredients" divider in a row sits on one line and a two-line
   ingredient list hangs below it — exactly how the 2026-09 boards set it
   (Diamond row 1: a wrapped list beside two one-liners, dividers level). ---- */
.pl-bp-prod {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 14px;
}
.pl-bp-prod__well {
  position: relative;
  height: 262px;
  border-radius: 23px;
  overflow: hidden;
  background: rgba( 236, 228, 219, 0.43 );   /* composites to #F6F0E6 on cream */
  border: 1px solid rgba( 23, 52, 52, 0.15 );
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Scoped past the theme's `.elementor img { max-width:100% }` (0,1,1), the same
   trap that silently disabled object-fit on the hero and card art.
   CONTAIN, not the design's `cover`: the pack shots are square PNGs with
   transparent margins, so on those two are identical — but cover would crop a
   non-square shot, and a guillotined product bag is a defect the client would
   have to catch by eye. Contain fails safe. */
.pl-brand-page .pl-bp-prod__img {
  width: 254px;
  height: 254px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* Range badge, top-right of the well. The 2026-09 boards draw it as the
   range's own LOGO (29:11049 "image 1164" — 52x34 at right 12 / top 12);
   the text pill below is only the fallback for a badge term with no logo
   uploaded yet. */
.pl-bp-prod__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 43px;
  background: #103D3F;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.28px;
}
.pl-bp-prod__badge--logo {
  padding: 0;
  border-radius: 0;
  background: none;
}
/* Height-locked, width free: range logos differ in aspect (Classics is
   52x34, the Singles lock-up is squarer), so a shared height is what makes
   them read as one family across a row. */
.pl-brand-page .pl-bp-prod__badge-img {
  height: 34px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
}
.pl-bp-prod__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* "Dog | Adult" — 16:4107 I259:4440 */
.pl-bp-prod__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: -0.28px;
  color: rgba( 28, 56, 56, 0.75 );   /* Figma .6 = 3.7:1 on cream, less on the ACANA/TOW tints; .75 clears WCAG AA (QA 2026-10-08) */
}
.pl-bp-prod__sep {
  width: 1px;
  align-self: stretch;
  background: rgba( 28, 61, 61, 0.2 );   /* 29:11049 "Vector 3", #1C3D3D @ 20% */
}
.pl-brand-page .pl-bp-prod__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.259;
  letter-spacing: -0.4px;
  color: var(--pl-forest, #173434);
}
/* 29:11049 I…:10906 — 13/16 medium. */
.pl-brand-page .pl-bp-prod__desc {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: rgba( 23, 52, 52, 0.75 );
}
/* "First 5 Ingredients" block (I…:10907): a #1C3D3D @ 10% hairline, then
   the icon label, then the list — 10px apart, 14px under the text track. */
.pl-bp-prod__ings {
  align-self: start;
  padding-top: 10px;
  border-top: 1px solid rgba( 28, 61, 61, 0.1 );
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-bp-prod__ings.is-empty { padding: 0; border: 0; }
.pl-brand-page .pl-bp-prod__ings-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: -0.28px;
  color: rgba( 28, 56, 56, 0.75 );   /* Figma .6 = 3.7:1 on cream, less on the ACANA/TOW tints; .75 clears WCAG AA (QA 2026-10-08) */
}
.pl-bp-prod__ings-label::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url( '../img/icon-first5.svg' ) no-repeat center / contain;
}
/* An icon chosen under PL: Products › Card content › Ingredients icon: it takes the bowl's 14px place, in the
   heading's colour. */
.pl-bp-prod__ings-label.pl-bp-prod__ings-label--icon::before { content: none; display: none; }
.pl-bp-prod__ings-icon { flex: 0 0 14px; display: grid; place-items: center; width: 14px; height: 14px; line-height: 1; }
.pl-bp-prod__ings-icon > svg { display: block; width: 100%; height: 100%; }
.pl-bp-prod__ings-icon > i { font-size: 14px; }
/* Bold, dot-separated, wrapping (I…:10916: gap 6, 3px #778582 dots). The dot
   trails its item rather than leading the next, so a wrapped line ends on a
   dot and the next begins on a word — the way the boards set it. */
.pl-brand-page .pl-bp-prod__ings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pl-brand-page .pl-bp-prod__ings-list li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: -0.28px;
  color: rgba( 28, 56, 56, 0.75 );   /* Figma .6 = 3.7:1 on cream, less on the ACANA/TOW tints; .75 clears WCAG AA (QA 2026-10-08) */
}
.pl-brand-page .pl-bp-prod__ings-list li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #778582;
}

/* ---- "View all products" — 29:11029: 1210x60 @ r16, rgba(193,190,174,.27)
   which composites to #EEE9DE on the cream page ---- */
.pl-brand-page .pl-bp-products__more {
  width: min( 1210px, 100% );
  margin-top: 56px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 0;
  border-radius: 16px;
  background: #EEE9DE;
  color: var(--pl-forest, #173434);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;   /* Figma 29:11033 (QA 2026-10-08; was -0.32px) */
  cursor: pointer;
  transition: background-color .25s ease;
}
.pl-brand-page .pl-bp-products__more:hover { background: #E5DFD2; }
.pl-brand-page .pl-bp-products__more:focus-visible {
  outline: 2px solid var(--pl-green-hover, #2E8B62);
  outline-offset: 2px;
}
/* The plus, drawn rather than shipped as an icon file — it is two rules. */
.pl-bp-products__more-icon {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.pl-bp-products__more-icon::before,
.pl-bp-products__more-icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY( -50% );
}
.pl-bp-products__more-icon::after { transform: translateY( -50% ) rotate( 90deg ); }
/* Expanded: the plus becomes a minus. */
.pl-bp-products__more[aria-expanded="true"] .pl-bp-products__more-icon::after {
  transform: translateY( -50% ) rotate( 0deg );
}

/* =========================================================================
   FIND THE RIGHT FOOD NEAR YOU — 9:3404
   ========================================================================= */
.pl-bp-near {
  position: relative;
  /* 2026-09 frames put the band ~60px into a frame that starts 23px below the
     products section (ORIJEN 29:9073: +60, TOW +61, ACANA +47, Diamond +36 —
     one value, not four drifting ones). */
  margin-top: 83px;
  margin-bottom: 46px;
  height: var( --bp-near-h, 333px );   /* ACANA 375, the other three 333 */
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Scoped (0,2,0) — see the hero photo: unscoped, the theme's `.elementor img`
   beat height:100% and object-fit never engaged. */
.pl-brand-page .pl-bp-near__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var( --bp-near-pos, center );
}
/* 29:9024: ONE brand-coloured ramp from the left — solid, 66.5% at 52.7% of
   its run, clear at the end of its run. The run is 1122 of 1370 (82%) on
   three brands and the full band on Diamond, so the midpoint is derived from
   the reach instead of hard-coded. No flat black layer any more. */
.pl-bp-near__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient( rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ), rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ) ),   /* Diamond 29:9188: +20% black */
    linear-gradient(
      90deg,
      var( --bp-near-tint, var(--pl-forest, #173434) ) 0%,
      color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 66.5%, transparent ) calc( var( --bp-near-tint-w, 82% ) * 0.5266 ),
      transparent var( --bp-near-tint-w, 82% )
    );
}
.pl-bp-near__inner {
  position: relative;
  z-index: 1;
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
/* 29:9028: 17px apart, 31px under the copy block (the text's own 20px bottom
   margin + the inner gap). */
.pl-bp-near__actions { display: flex; flex-wrap: wrap; gap: 17px; }
/* "Get Advice" — the glass outline button, 29:11514: 8% white over the photo
   with a 22% white hairline and blur; hover is its Variant2, solid white. */
.pl-brand-page .pl-btn--glass {
  background: rgba( 255, 255, 255, 0.08 );
  border: 0.821px solid rgba( 255, 255, 255, 0.22 );
  border-radius: 9.853px;
  color: #FFFFFF;
  -webkit-backdrop-filter: blur( 11.7px );
  backdrop-filter: blur( 11.7px );
}
.pl-brand-page .pl-btn--glass:hover { background: #FFFFFF; color: #1E1E1E; }
.pl-brand-page .pl-bp-near__heading {
  margin: 0;
  font-size: 48px;
  line-height: 56px;
  font-weight: 600;
  color: var(--pl-cream, #FFF9F0);
  /* 29:9026 sets "Not sure what to feed your pet?" on ONE line in a 726.5px
     box; the old 718px cap (sized for the previous heading) wrapped "pet?". */
  max-width: 760px;
}
.pl-bp-near__text {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 26px;
  font-weight: 500;
  color: var(--pl-cream, #FFF9F0);
  max-width: 673px;
}

/* =========================================================================
   WANT TO STOCK — 9:3412
   ========================================================================= */
.pl-bp-stock {
  position: relative;
  margin-top: 23px;
  /* 116, not 64: Figma 9:3412 nests the copy in 9:3413 at y52.4, which then
     pads 64 — so the heading starts at y116 and the section runs 617 tall.
     At 64 the whole block sat 52px high and the section measured 542. */
  padding: 116px 21px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pl-brand-page .pl-bp-stock__heading {
  margin: 0 0 18px;
  font-size: 51px;
  font-weight: 600;
  /* Unlike the "Why choose X?" heading, this one carries NO tracking in the
     design — 9:3417 (ORIJEN) and 9:3647 (Taste of the Wild) are both plain
     51px/normal — and its frame is 64px tall, i.e. 1.25 leading. */
  letter-spacing: normal;
  line-height: 1.25;
  color: var(--pl-forest, #173434);
}
.pl-bp-stock__text {
  margin: 0 0 33px;
  /* Per brand: 9:3418 sets 523 on ORIJEN, 9:3648 sets 582 on Taste of the Wild
     — whose longer brand name needs it, and which broke to three lines at 524
     against the design's two. */
  max-width: var( --bp-stock-tw, 524px );
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  color: #606060;
}
/* Figma 9:3422 lays a 1013x154 transparent-to-#FFF9F0 ramp over the bottom of
   the box so it dissolves into the page instead of being guillotined by the
   footer. Without it the art ended on a hard horizontal edge. */
.pl-bp-stock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX( -50% );
  width: min( 1013px, 100% );
  height: 154px;
  background: linear-gradient( 180deg, rgba( 255, 249, 240, 0 ) 0%, var(--pl-cream, #FFF9F0) 100% );
  pointer-events: none;
  z-index: 1;
}
.pl-bp-stock__box {
  /* The source is a SQUARE png with the box sitting low in a lot of transparent
     padding. Figma crops it to a 773x278 window (node 9:3420: image at 277.66%
     height, offset -117.36%). Rendered full-height it put ~300px of empty space
     above the box. */
  display: block;
  width: min( 773px, 100% );
  aspect-ratio: 773 / 278;
  object-fit: cover;
  object-position: 50% 66%;
  height: auto;
  /* 9:3256 closes with 32px of padding before the art starts (its content ends
     at y254 in a 286 frame, and 9:3263 begins on that edge). */
  margin: 32px auto 0;
}
/* NOTE: there is exactly ONE wash rectangle in the design — 9:3422 above,
   1012.87x154.05 centred on the 1372 frame. A full-width ::before duplicate of
   it survived here from an earlier pass; stacked, the two ramps compounded to
   ~0.75 alpha where the design has 0.5, so the box art faded out roughly twice
   as fast as intended. Do not reinstate it. */

/* =========================================================================
   KEYBOARD FOCUS (WCAG 2.4.7)
   The controls were falling through to Chromium's default 1px blue ring —
   it does paint, but it is thinner than and inconsistent with the ring the
   rest of the site uses (pl-global.css §22.7: 2px var(--pl-green-hover, #2E8B62), 2px offset).
   var(--pl-green-hover, #2E8B62) measures 4.0:1 on the cream panels and 3.2:1 on the forest band,
   so it clears WCAG 1.4.11's 3:1 for a non-text indicator in both places.
   Additive only — no desktop value is changed.
   ========================================================================= */
.pl-brand-page a:focus-visible,
.pl-brand-page button:focus-visible,
.pl-brand-page .pl-btn:focus-visible {
  outline: 2px solid var(--pl-green-hover, #2E8B62);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =========================================================================
   RESPONSIVE
   No tablet/mobile frames were supplied for these pages, so the rules below
   are a proportional reduction of the desktop design rather than a spec.
   ========================================================================= */

/* --- <=1279: the product grid steps down a column -------------------------
   The desktop grid is three 385.33 tracks on a 1210 measure. Below 1280 the
   band is narrower than 1210 + gutters, so a third track would squeeze the
   cards under the 254px pack shot they have to hold. Two tracks keeps the
   card at its design width for longer; one track takes over on tablet.
   MY JUDGEMENT — Figma has no frame between 1440 and mobile for this section. */
@media ( max-width: 1279px ) {
  .pl-bp-products__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 1024px ) {
  .pl-brand-page { --bp-gut: 20px; }
  .pl-bp-hero { height: min( var( --bp-hero-h, 415px ), 360px ); }
  /* The hero copy is LEFT-anchored off --bp-title-x, and its max-width is
     derived from that same variable. So rather than override `left`/`max-width`
     (desktop values being tuned per brand), just move the VARIABLE at its point
     of use: the copy gets ~62% of the band at tablet instead of ~53%, which the
     headline needs once it is down at 34px. The old `right: 5%` / `max-width`
     overrides were inert under the left-anchored model and are dropped. */
  .pl-bp-hero__inner { --bp-title-x: 38%; top: 40px; }
  /* The desktop ramp is a Figma-verified linear transparent->forest sweep and
     it only covers the headline because at 1440 the copy starts at 47.3%. At
     tablet the copy starts at 38%, where that ramp is still only ~0.40 opaque:
     ORIJEN's bright sky measured 2.83:1 against the cream headline (needs 3).
     Bringing the ramp forward puts >=0.62 alpha under the copy's left edge and
     still leaves the left third of the photograph open. Desktop untouched. */
  .pl-bp-hero__scrim {
    background: linear-gradient( 90deg, rgba( 23, 52, 52, 0.06 ) 0%, rgba( 23, 52, 52, 0.62 ) 38%, var(--pl-forest, #173434) 100% );
  }
  .pl-brand-page .pl-bp-hero__title { font-size: clamp( 34px, 4.4vw, 58px ); }
  .pl-brand-page .pl-bp-why__heading,
  .pl-brand-page .pl-bp-products__heading,
  .pl-brand-page .pl-bp-stock__heading { font-size: clamp( 32px, 4.4vw, 51px ); }


  .pl-brand-page .pl-bp-products__heading { margin-bottom: 34px; }
  .pl-bp-products__filter { margin: -14px 0 26px; }
  .pl-filter-bar + .pl-bp-products__toolbar { margin: -12px 0 26px; }
  .pl-bp-products__filter + .pl-bp-products__filter { margin-top: -16px; }   /* 10px under the first row */
  .pl-bp-products__heading + .pl-bp-products__toolbar { margin: -14px 0 26px; }
  .pl-brand-page .pl-bp-products__more { margin-top: 34px; }

  .pl-bp-near { height: auto; padding: 44px 0; }
  .pl-bp-near__inner { padding: 0 28px; }
  /* Once the band is narrow the copy spans its full width, so the desktop's
     left-to-right scrim leaves the right-hand end of every line sitting on
     bare photo. Measured cream-on-photo at 390: 1.97:1 for the 18px body.
     Swapped for a top-to-bottom scrim, the same move the hero already makes
     at <=767. */
  .pl-bp-near__scrim {
    background:
      linear-gradient( rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ), rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ) ),
      linear-gradient( 180deg,
        color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 58%, transparent ) 0%,
        color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 92%, transparent ) 100% );
  }
  .pl-brand-page .pl-bp-near__heading { font-size: clamp( 30px, 4vw, 48px ); line-height: 1.18; }
  .pl-bp-near__text { font-size: 18px; line-height: 24px; }

  /* Touch target floor (WCAG 2.5.5). The buttons compute to 38px tall from the
     desktop padding; 44px is the minimum the rest of the site already uses in
     its own <=1024 blocks. Desktop values are untouched. */
  .pl-brand-page .pl-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}

@media ( max-width: 767px ) {
  .pl-brand-page { --bp-gut: 14px; }
  .pl-bp-hero { height: min( var( --bp-hero-h, 415px ), 300px ); border-radius: 18px; }
  /* 46px, not 22px: the intro card pulls up 28px over the hero's bottom edge,
     so a 22px inset put the card ON the last line of the headline. Measured on
     Diamond Naturals at 390 the third line was half covered. 46 - 28 leaves
     18px of clearance under the longest of the four headlines. */
  .pl-bp-hero__inner { inset: auto 18px 46px 18px; top: auto; width: auto; max-width: none; gap: 14px; }
  .pl-bp-hero__logo { width: 66px; }
  .pl-brand-page .pl-bp-hero__title { font-size: 30px; letter-spacing: -0.6px; }
  /* the scrim has to darken the whole frame once the copy sits over the photo */
  .pl-bp-hero__scrim { background: linear-gradient( 180deg, rgba( 23, 52, 52, 0.15 ) 0%, rgba( 23, 52, 52, 0.86 ) 100% ); }
  .pl-bp-intro { margin-top: -28px; padding: 22px 18px; border-radius: 20px; }
  .pl-bp-intro__text { font-size: 16px; }
  .pl-bp-why { padding-top: 46px; }
  .pl-brand-page .pl-bp-why__heading { margin-bottom: 26px; }
  .pl-bp-why__grid { grid-template-columns: minmax( 0, 1fr ); gap: 14px; }
  .pl-bp-card { border-radius: 18px; }
  .pl-brand-page .pl-bp-card__title { font-size: 18px; margin-top: 16px; }
  .pl-bp-card__body { font-size: 15px; }
  .pl-bp-products { padding-top: 26px; }
  /* Toolbar controls go full-width and stack: a 300px search next to a
     shrunken select is two cramped boxes at 390; stacked full-width controls
     are the native mobile idiom for both. */
  .pl-bp-products__toolbar { align-self: stretch; width: 100%; }
  .pl-bp-products__select-wrap,
  .pl-bp-products .pl-bp-products__select,
  .pl-bp-products .pl-bp-products__search { width: 100%; }
  /* Products become a horizontal swipe track, not a vertical stack: a
     one-column list of ~480px cards made even a 12-product catalogue several
     thousand pixels of scrolling. Same slider mechanics the filter bar above
     it already uses (snap, hidden scrollbar, edge fade), so the two read as
     one system. 76% card width leaves the next card peeking as the swipe
     affordance. The fold ("View all products") is a vertical-space device, so
     it is neutralised here — every card rides the track, images already lazy-
     load — and the expander button is hidden with it. */
  .pl-bp-products__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    scroll-snap-type: x proximity;
    scroll-padding-left: 18px;   /* a snapped card clears the 18px left-edge fade (is-fade-l) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient( to right, transparent, #000 14px, #000 calc( 100% - 14px ), transparent );
    mask-image: linear-gradient( to right, transparent, #000 14px, #000 calc( 100% - 14px ), transparent );
    padding: 2px 6px 8px;
  }
  .pl-bp-products__grid::-webkit-scrollbar { display: none; }
  .pl-bp-prod {
    flex: 0 0 76%;
    max-width: 300px;
    scroll-snap-align: start;
    display: flex;             /* a flex item of the swipe track, not a subgrid */
    flex-direction: column;
    gap: 14px;
  }
  .pl-bp-products__grid .pl-bp-prod.is-folded { display: flex; }
  .pl-bp-products__grid .pl-bp-prod.is-filtered { display: none; }
  .pl-brand-page .pl-bp-products__more { display: none; }
  /* The well is a fixed 262 at desktop for a 385-wide card. At 390 the card is
     ~360 wide, so holding 262 would letterbox the pack shot; the well tracks
     the card instead and the shot stays proportional. */
  .pl-bp-prod__well { height: auto; aspect-ratio: 385 / 262; }
  .pl-brand-page .pl-bp-prod__img { width: 66%; height: auto; aspect-ratio: 1; }

  .pl-bp-near { border-radius: 18px; }
  .pl-bp-near__inner { padding: 0 20px; }
  .pl-bp-stock { padding-top: 44px; }
  .pl-bp-stock__text { font-size: 16px; }
}

/* =========================================================================
   §QA-2 BRAND PAGES — QA FIXES 2026-09-30
   (ACANA 29:8980 / ORIJEN 29:9034 / TOW 29:9088 / Diamond 29:9144)
   Per-brand spacing (why → products, fold bar → photo band → footer, why
   row gap) and the photo band's text-side darkening are Elementor controls,
   set per page in build/apply-brand-pages-v2.php — not here.
   ========================================================================= */

/* ---- [hidden] means hidden. The display values above (inline-flex on the
   fold bar, grid on the grid) outrank the UA's [hidden] rule, so the fold bar
   stayed on screen while filtering / in the empty state. ---- */
.pl-brand-page .pl-bp-products__more[hidden],
.pl-bp-products .pl-bp-products__grid[hidden] { display: none; }

/* ---- Fold bar — 29:11029: translucent rgba(193,190,174,.27) over the page's
   own (brand-tinted) background, label rgba(23,52,52,.9), 22px plus drawn at
   15.2px with a 1.38 round stroke. Explicit :focus/:hover because the kit's
   `.elementor-kit-7 button:hover/:focus` (var(--pl-green-hover, #2E8B62) / var(--pl-cream, #FFF9F0)) otherwise paints
   every <button> here. Figma has no hover: a slight darken of its own fill. */
.pl-brand-page .pl-bp-products__more,
.pl-brand-page .pl-bp-products__more:focus {
  background: rgba( 193, 190, 174, 0.27 );
  color: rgba( 23, 52, 52, 0.9 );
}
.pl-brand-page .pl-bp-products__more:hover,
.pl-brand-page .pl-bp-products__more:focus-visible {
  background: rgba( 193, 190, 174, 0.45 );
  color: rgba( 23, 52, 52, 0.9 );
}
.pl-brand-page .pl-bp-products__more:focus-visible { border-radius: 16px; }
.pl-brand-page .pl-bp-products__more-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.pl-brand-page .pl-bp-products__more-icon::before,
.pl-brand-page .pl-bp-products__more-icon::after {
  left: 3.46px;
  right: 3.46px;
  height: 1.38px;
  border-radius: 1px;
  background: var(--pl-forest, #173434);
}

/* ---- Empty state's "clear everything": no kit fill, forest on #F4EEE6
   (12:1) in every state — the old green hover was 3.6:1, and the kit turned
   it green-on-green. ---- */
.pl-bp-products .pl-bp-products__clear:hover,
.pl-bp-products .pl-bp-products__clear:focus {
  background: none;
  color: var(--pl-forest, #173434);
  text-decoration-thickness: 2px;
}

/* ---- Filter pills — 29:11043: 16px/500, 12x23 around the label counting the
   1px stroke (so 11x22 of padding), 44 tall, 17 apart. ---- */
.pl-bp-products .pl-bp-products__filter { gap: 17px; }
.pl-bp-products button.pl-filter-pill {
  font-size: var( --pl-pill-fs, 16px ) !important;     /* PL: Products › Style › Buttons can set these */
  font-weight: var( --pl-pill-fw, 500 ) !important;
  line-height: 20px !important;
  padding: 11px 22px !important;
}
/* A disabled ("dead") pill never takes the hover/focus fill. */
.pl-bp-products button.pl-filter-pill.is-dead,
.pl-bp-products button.pl-filter-pill.is-dead:hover,
.pl-bp-products button.pl-filter-pill.is-dead:focus {
  background: transparent !important;
  color: var(--pl-forest, #173434) !important;
  border-color: var(--pl-forest, #173434) !important;
}
/* Focus alone is not selection: a keyboard-focused pill keeps its outline
   ring (pl-global.css) but not the active fill, or two pills read as on. */
.pl-bp-products button.pl-filter-pill:not(.is-active):focus:not(:hover) {
  background: transparent !important;
  color: var(--pl-forest, #173434) !important;
}

/* ---- "Buy Online" — 29:8992 et al.: text in the brand accent (ACANA: forest,
   via the Hero widget's "Outline button colour"), hairline = that colour at
   22%. ---- */
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--outline {
  color: var( --bp-accent-2, var( --bp-accent, var(--pl-forest, #173434) ) );
  border-color: color-mix( in srgb, var( --bp-accent-2, var( --bp-accent, var(--pl-forest, #173434) ) ) 22%, transparent );
}
.pl-brand-page .pl-bp-hero-wrap--banner .pl-btn--outline:hover {
  background: color-mix( in srgb, var( --bp-accent-2, var( --bp-accent, var(--pl-forest, #173434) ) ) 8%, #FFFFFF );
  /* the label deepens with the tint: ORIJEN red on its 8% hover tint was 4.26:1 (QA 2026-10-08) */
  color: color-mix( in srgb, var( --bp-accent-2, var( --bp-accent, var(--pl-forest, #173434) ) ) 85%, #000 );
}

/* ---- "Get Advice" glass — 29:11514: the optional solid colour (TOW navy)
   arrives as a variable so the hover (Variant2: white, #1E1E1E) still wins. */
.pl-brand-page .pl-btn--glass {
  background: var( --bp-glass-solid, rgba( 255, 255, 255, 0.08 ) );
  border-color: var( --bp-glass-solid, rgba( 255, 255, 255, 0.22 ) );
}
.pl-brand-page .pl-btn--glass:hover,
.pl-brand-page .pl-btn--glass:focus-visible {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #1E1E1E;
}

/* ---- Buttons: 36 tall like the rest of the site (14px line box + 10/10
   padding + hairline); the <=1024 block above keeps its 44px touch floor. */
@media ( min-width: 1025px ) {
  .pl-brand-page .pl-btn { line-height: 14px; }
}

/* ---- Photo band: the "Darkening behind the text" control — black under the
   copy column only, held to 58% of the band and gone by 76%, so the photo's
   subject on the right is untouched. Layers below it are the band's existing
   shade + brand tint, unchanged. ---- */
.pl-bp-near__scrim {
  background:
    linear-gradient( 90deg, rgba( 0, 0, 0, var( --bp-near-tshade, 0 ) ) 0%, rgba( 0, 0, 0, var( --bp-near-tshade, 0 ) ) 58%, rgba( 0, 0, 0, 0 ) 76% ),
    linear-gradient( rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ), rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ) ),
    linear-gradient(
      90deg,
      var( --bp-near-tint, var(--pl-forest, #173434) ) 0%,
      color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 66.5%, transparent ) calc( var( --bp-near-tint-w, 82% ) * 0.5266 ),
      transparent var( --bp-near-tint-w, 82% )
    );
}

/* ---- Why choose — 29:8993 et al.: heading line 64 (51px), body 16/20 set
   11 under its title, rows closed 25px under the text in row 1 and 19 in row
   2 (ACANA 320/339, TOW 339/357 …). Card 1's copy box is 517 wide on all
   four boards (the others 539), which sets its line breaks. */
.pl-brand-page .pl-bp-why__heading { line-height: 1.255; }
.pl-bp-why__grid .pl-bp-card__body { margin-top: 11px; line-height: 20px; }
.pl-bp-why__grid > .pl-bp-card { padding-bottom: 25px; }
.pl-bp-why__grid > .pl-bp-card:nth-child( n + 3 ) { padding-bottom: 19px; }
.pl-bp-why__grid > .pl-bp-card:first-child .pl-bp-card__body { max-width: 517px; }

/* ---- Intro card inset: 1273 of the 1370 band at 1440 (48.5px a side) —
   kept proportional below 1440 instead of spanning the full band. ---- */
.pl-bp-hero-wrap--banner .pl-bp-intro { width: min( var( --bp-inset ), 92.92% ); }

/* Visible-on-phones headline (Hero "Phones: banner headline" = text):
   visually hidden until the <=767 block below. */
.pl-bp-intro__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect( 0 0 0 0 );
  clip-path: inset( 50% );
  white-space: nowrap;
  border: 0;
}

/* ---- >=1025, fixed-height band: below 1440 the band is narrower than its
   1370 artwork, so the photo slides left under the copy (TOW: "your pet?" ran
   over the bag at 1280). The copy column shrinks with the band instead —
   80% of the inner width less 266px keeps it clear of a subject at the
   board's x820 under the 80% crop, and is >= the heading's 726px at 1440, so
   the board's one-line heading is unchanged there. */
@media ( min-width: 1025px ) {
  /* The column fills the band, so the % below is of the band's inner width
     (a content-sized flex item would make it circular). */
  .pl-bp-near__inner { flex: 1 1 auto; min-width: 0; }
  .pl-brand-page .pl-bp-near__heading {
    max-width: min( 760px, calc( 80% - 266px ) );
    font-size: clamp( 38px, 3.75vw, 48px );
    line-height: 1.17;
    text-wrap: balance;
  }
  .pl-bp-near__text { max-width: min( 673px, calc( 80% - 266px ) ); }
}

@media ( max-width: 1024px ) {
  /* Site gutters: 24 tablet (16 phone below). */
  .pl-brand-page { --bp-gut: 24px; }
  /* Text-side darkening: the copy spans the band here, so a flat layer. */
  .pl-bp-near__scrim {
    background:
      linear-gradient( rgba( 0, 0, 0, var( --bp-near-tshade, 0 ) ), rgba( 0, 0, 0, var( --bp-near-tshade, 0 ) ) ),
      linear-gradient( rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ), rgba( 0, 0, 0, var( --bp-near-shade, 0 ) ) ),
      linear-gradient( 180deg,
        color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 58%, transparent ) 0%,
        color-mix( in srgb, var( --bp-near-tint, var(--pl-forest, #173434) ) 92%, transparent ) 100% );
  }
}

@media ( max-width: 767px ) {
  .pl-brand-page { --bp-gut: 16px; }
  /* Phones keep the card at the band's full width: the inset would cost the
     intro copy a line or two at 360. */
  .pl-bp-hero-wrap--banner .pl-bp-intro { width: 100%; }

  /* Phone headline — "crop": a minimum height (Hero "Phones: banner height")
     taller than the artwork's shape, so `cover` draws the banner wider than
     the screen, panned onto the artwork's own headline. */
  /* An explicit width: with width:auto Chromium resolves the aspect-ratio
     from the min-height and the box grew 819px wide at 390. */
  .pl-bp-hero-wrap--mcrop .pl-bp-hero { width: 100%; min-height: var( --bp-hero-mh, 0px ); }
  .pl-brand-page .pl-bp-hero-wrap--mcrop .pl-bp-hero__photo { object-position: var( --bp-hero-mpos, 30% 50% ); }
}
/* Phone headline — "text": the H1 shows at the top of the intro card, on phones under 480px only (2026-10-13 client:
   "issue with headings?" — at 480–767 the 2026-10 wide banners are 145–230px tall and their drawn headline reads
   fine, so the text repeated it; below 480 the drawn taglines shrink to 6–9px). Above that it stays the visually
   hidden H1 screen readers and search engines use. */
@media ( max-width: 479px ) {
  .pl-brand-page .pl-bp-hero-wrap--mtext .pl-bp-intro__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 -9px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--pl-forest, #173434);
    text-wrap: balance;
  }
}
@media ( max-width: 767px ) {
  /* Pills fit a 328px row at 360 (four pills = 304) — 16px/500 kept, the
     side padding and gap tighten. */
  .pl-bp-products .pl-bp-products__filter { gap: 8px; }
  .pl-bp-products button.pl-filter-pill { padding: 11px 16px !important; }

  /* Edge fades only where there is more to scroll to — pl-main.js sets
     is-fade-l / is-fade-r from the live scroll position, so a row that fits
     (or the first card at scroll 0) is never faded. */
  .pl-bp-products .pl-bp-products__filter,
  .pl-bp-products .pl-bp-products__grid { -webkit-mask-image: none; mask-image: none; }
  .pl-bp-products .is-fade-l {
    -webkit-mask-image: linear-gradient( to right, transparent, #000 18px );
    mask-image: linear-gradient( to right, transparent, #000 18px );
  }
  .pl-bp-products .is-fade-r {
    -webkit-mask-image: linear-gradient( to left, transparent, #000 18px );
    mask-image: linear-gradient( to left, transparent, #000 18px );
  }
  .pl-bp-products .is-fade-l.is-fade-r {
    -webkit-mask-image: linear-gradient( to right, transparent, #000 18px, #000 calc( 100% - 18px ), transparent );
    mask-image: linear-gradient( to right, transparent, #000 18px, #000 calc( 100% - 18px ), transparent );
  }

  /* Slider cards are their own height (not stretched to the tallest of the
     whole set); pl-main.js sizes the track to the tallest card in view. */
  .pl-bp-products__grid {
    align-items: flex-start;
    overflow-y: hidden;
    transition: height .2s ease;
  }

  /* Body copy floor on phones: 15px (mobile review 2026-10-15; was 14/18 and ran to 14 lines). Desktop stays 13/16
     per 29:11049; the pet type / life stage line and the ingredients keep their size. */
  .pl-brand-page .pl-bp-prod__desc { font-size: 15px; line-height: 19px; }
}

/* Tablet headline (Hero "Tablets: show the headline as text"): at 768–1024 the
   whole banner shows, so a small drawn-in tagline (TOW, Diamond Naturals) is
   7–10px — the H1 shows at the top of the intro card instead. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
  .pl-brand-page .pl-bp-hero-wrap--ttext .pl-bp-intro__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 -6px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.6px;
    color: var(--pl-forest, #173434);
    text-align: center;
    text-wrap: balance;
  }
}

/* =========================================================================
   §BE RICH-TEXT BODY COPY (backend fix 2026-09-30)
   Hero intro, Why-choose card body and photo-band text are rich-text fields
   now (inc/brand-widgets.php → pl_bp_rich_text()). Plain text still renders
   as the one <p class> it always was, so nothing here touches it. Text with
   paragraphs of its own renders as <div class="… pl-bp-rich">: its <p>s sit
   flush like the single <p> did (the theme reset gives every p .9rem below),
   and a link keeps the copy's own colour, underlined, instead of the theme
   reset's #c36 — on the photo band that pink would be unreadable.
   ========================================================================= */
.pl-brand-page .pl-bp-rich > p { margin: 0; }
.pl-brand-page .pl-bp-rich > p + p { margin-top: .75em; }
.pl-brand-page .pl-bp-rich > ul,
.pl-brand-page .pl-bp-rich > ol { margin: .4em 0 0; padding-left: 1.25em; }
.pl-brand-page .pl-bp-intro__text a,
.pl-brand-page .pl-bp-card__body a,
.pl-brand-page .pl-bp-near__text a,
.pl-brand-page .pl-bp-intro__text a:hover,
.pl-brand-page .pl-bp-card__body a:hover,
.pl-brand-page .pl-bp-near__text a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- Type scale, layout half (client 2026-10-13: "fonts seem a bit large") -------------------------------
   The brand page's text sizes follow the site-wide type scale (inc/fluid-type.php, pl_fluid_type_plugin_rules()).
   "Not sure what to feed your pet?": the copy column is 80% of the band less a clearance for the photo's subject;
   between 1025 and 1440 the clearance shrinks with the screen too (266px at 1440 → 18vw), so the heading, scaled
   with the screen, stays on one line as in Figma. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .pl-fluid-type .pl-brand-page .pl-bp-near__heading { max-width: min( 760px, calc( 80% - 18vw ) ); }
  .pl-fluid-type .pl-bp-near__text { max-width: min( 673px, calc( 80% - 18vw ) ); }
  /* the band's height (Brand Near widget › Height, --bp-near-h) and the intro card's side inset (--bp-intro-px)
     in proportion too: inc/brand-widgets.php also prints each as vw (--bp-near-hv, --bp-intro-pv) */
  .pl-fluid-type .pl-bp-near { height: min( var( --bp-near-h, 333px ), var( --bp-near-hv, 23.125vw ) ); }
  /* (0.8 of proportional: the page's 35px gutters don't shrink, so the card is a little narrower than the scaled
     board — ORIJEN's two Figma lines broke onto three at 1280 by 7px) */
  .pl-fluid-type .pl-bp-intro { padding-left: min( var( --bp-intro-px, 31px ), calc( var( --bp-intro-pv, 2.1528vw ) * 0.8 ) ); padding-right: min( var( --bp-intro-px, 31px ), calc( var( --bp-intro-pv, 2.1528vw ) * 0.8 ) ); }
}
@media (min-width: 1600px) {
  /* big monitors: the near-you band grows with the rest of the page's vertical rhythm, to +10% at 1920 */
  .pl-fluid-type .pl-bp-near { height: clamp( var( --bp-near-h, 333px ), calc( var( --bp-near-h, 333px ) + ( 100vw - 1600px ) * var( --bp-near-hk, 0.1041 ) ), calc( var( --bp-near-h, 333px ) * 1.1 ) ); }
}

/* Phones: the site's 40px section rhythm (final phone check 2026-10-13: intro → Why 69, Why → products 75 against 40
   on every other page). The desktop 23px margins came along on phones and stacked on the phone padding. */
@media (max-width: 767px) {
  .pl-bp-why { margin-top: 0; padding-top: 40px; }
  .pl-bp-products { margin-top: 0; padding-top: 14px; }   /* + the Why widget's 26px Space below (Mobile) = 40 */
}

/* -- Phones: centred (client 2026-10-15: "most items on mobile need to be centered so it reads correctly") ----------
   Phones only; tablets and desktops are unchanged. The Why-choose cards (title and text under the image), the photo
   band's heading, text and buttons, and an intro card or headline on a "Photo, logo and headline" banner are centred
   like the rest of the page around them. The product cards' own details (pet type and life stage, description,
   ingredients) stay left: a list read line by line. The intro card under finished artwork, the headings, the filter
   buttons and "Want to stock" were centred already. Each widget's Style tab has an Alignment control (empty = this
   default) that overrides it per device. */
@media (max-width: 767px) {
  .pl-bp-card { text-align: center; }
  /* card 1's 517px reading width (Figma line breaks at 1440) would leave its centred text off-axis on wide phones */
  .pl-bp-why__grid > .pl-bp-card:first-child .pl-bp-card__body { max-width: none; }
  .pl-bp-near__inner { align-items: center; text-align: center; }
  .pl-bp-near__actions { justify-content: center; }
  .pl-bp-hero-wrap:not(.pl-bp-hero-wrap--banner) .pl-bp-hero__inner { align-items: center; text-align: center; }
  .pl-bp-hero-wrap:not(.pl-bp-hero-wrap--banner) .pl-bp-intro { text-align: center; }
  .pl-bp-hero-wrap:not(.pl-bp-hero-wrap--banner) .pl-bp-intro__actions { justify-content: center; }
}