/* ==========================================================================
   Red Mills Pet - landing page design system
   Palette sampled directly from the Canva wireframe deck.
   --------------------------------------------------------------------------
   #E1002B  primary red        #4D4B4B  heading grey
   #A6A8AB  mid grey           #F1F1F1  soft section grey
   #ECECEC  media placeholder  #FFFFFF  white
   #333F48  Go Native   #036355 Leader   #092D4E Winner   #0E004D Engage
   #006F85  Go Native badge teal
   ========================================================================== */

:root{
	/* Wireframe red replaces the older #e51937 UI red so buttons, the store
	   locator and every page CTA share one value. The logo artwork keeps its
	   own red. */
	--rmp-red:#E1002B;
	--rmp-red-dark:#B80023;
	--rmp-red-tint:#FDF0F2;
	--rmp-logo-red:#E51937;

	--rmp-ink:#4D4B4B;
	--rmp-body:#44464B;
	--rmp-muted:#6E7278;
	--rmp-grey:#A6A8AB;
	--rmp-soft:#F1F1F1;
	--rmp-ph:#ECECEC;
	--rmp-line:#E1E3E6;

	--rmp-gonative:#333F48; /* Slate Grey (was maroon until 28 Sep 2026) */
	--rmp-leader:#036355; /* darker green (was #569D37 until 28 Sep 2026) */
	--rmp-winner:#092D4E; /* Winner dog. Winner cat has its own orange below. */
	--rmp-winner-cat:#f79040; /* Winner cat. Ava, 2 Nov 2026: navy is for the dogs. */
	--rmp-engage:#0E004D;
	--rmp-teal:#006F85;

	/* HISTORY, superseded 28 Sep 2026 (see note on the line below):
	   Leader's wireframe green only reaches 3.1:1 against white, which fails
	   WCAG AA for button text, so solid buttons use this darkened variant
	   (5.4:1). Swap it back to var(--rmp-leader) if brand match matters more. */
	--rmp-leader-deep:#024B41; /* 28 Sep 2026: new #036355 passes AA on its own (7.2:1), so this is now only the hover shade, like the other -deep tints. Was #3F7528. */
	/* Darkened brand tints, used for the hover/fill state of the range CTAs. */
	--rmp-gonative-deep:#273037; /* slate darkened by the same ratio the old maroon deep used */
	--rmp-winner-deep:#061E35;--rmp-winner-cat-deep:#E07A24;--rmp-winner-cat-ink:#2B2D30;
	--rmp-engage-deep:#080033;
	/* Near-black for text sitting on mid-grey panels, where --rmp-ink only
	   reaches 3.8:1 and --rmp-red 2.2:1. Against #A6A9AD this gives 5.9:1. */
	--rmp-ink-deep:#2B2D30;

	--rmp-shell:1320px;
	--rmp-narrow:820px;
	--rmp-radius:8px;
	/* THE type scale: H1 32 / H2 26 / H3 22 / body and list items 16px.
	   Flat, not fluid - nothing grows on wide screens.
	   ----------------------------------------------------------------------
	   The numbers themselves live in the child theme's theme.json, as the
	   font-size presets, and these tokens just read them. That is deliberate,
	   and it is what stops the two halves of the site disagreeing:
	     - theme.json drives the editor's size picker, the editor canvas and
	       core's `has-*-font-size` classes (which carry !important and beat
	       any stylesheet rule);
	     - these tokens drive the ~20 hand-written prose and component rules
	       further down this file.
	   Both now come from one set of five numbers, so a size changed in
	   theme.json changes everywhere at once and a size picked in the editor
	   can only ever land on the scale. Change sizes in theme.json, NOT here.
	   The fallbacks are for safety only, e.g. if global styles fail to load;
	   keep them in step with theme.json.
	   Set 8 Sep 2026; wired to theme.json the same day. */
	/* 29 Sep 2026 (Ava): site-wide H1 28 / H2 24 / H3 20 / body 15px after the homepage trial (was 30 / 26 / 22 / 16). */
	--rmp-copy:var(--wp--preset--font-size--medium,.9375rem);
	--rmp-h1:var(--wp--preset--font-size--xx-large,1.75rem);
	--rmp-h2:var(--wp--preset--font-size--x-large,1.5rem);
	--rmp-h3:var(--wp--preset--font-size--large,1.25rem);
	/* One hero height for every interior landing page - plate, plain image,
	   photo banner and video banner all read from this pair, so they cannot
	   drift apart. Set to 540/400 on 8 Sep 2026 - a midpoint: 460/360 read as
	   too short, the full banner 620/440 as too long. The home page
	   is separate and sets its own in home.css. */
	--rmp-hero-h:540px;
	--rmp-hero-h-sm:400px;
	/* 8 Sep 2026: every interior hero stands at the same height, so the
	   variants are aliases of the base rather than their own numbers.
	   They are kept as separate tokens on purpose - give one a real value
	   here and that variant diverges again without touching any rule. */
	--rmp-hero-h-banner:var(--rmp-hero-h);
	--rmp-hero-h-banner-sm:var(--rmp-hero-h-sm);
	--rmp-hero-h-plate:var(--rmp-hero-h);
	--rmp-font:'Maven Pro','Helvetica Neue',Arial,sans-serif;

	/* 8px rhythm */
	--rmp-s1:8px;  --rmp-s2:16px; --rmp-s3:24px; --rmp-s4:32px;
	--rmp-s5:48px; --rmp-s6:64px; --rmp-s7:88px; --rmp-s8:120px;

	/* Section rhythm. ONE knob for the vertical gap between every section
	   on every landing page: sections carry no margins, so the gap between
	   two of them is always twice this figure (48 -> 96px).
	   Deliberately its own token rather than reusing --rmp-s7, which also
	   drives two margin-top rules that should not move with it.
	   Set by Ava 16 Sep 2026 after comparing 88 / 64 / 48px. */
	--rmp-sec-pad:48px;
}

/* --------------------------------------------------------------------------
   Full bleed shell (page-landing template)
   -------------------------------------------------------------------------- */
.rmp-main{max-width:none!important;padding-left:0!important;padding-right:0!important;
	margin-top:0!important;margin-bottom:0!important}
.rmp-main>.wp-block-post-content{max-width:none!important;padding:0!important}
.rmp-main .rmp-page>*{max-width:none}

/* The theme's footer template part is deliberately empty (the real footer is
   printed on wp_footer), but the block layout still gives it a 1.2rem top
   margin - a stray white bar between the last section and the footer. */
.rmp-main + footer.wp-block-template-part{display:none}

/* Body copy is 18px, set here so it INHERITS rather than being declared on
   `p`. A `.rmp-page p{font-size}` rule is class+element and silently outbids
   every single-class component rule (.rmp-lede, .rmp-hero__sub, .rmp-eyebrow,
   .rmp-fineprint...), flattening the whole page to one size. Inheriting means
   any component that states its own size still wins. */
.rmp-page{font-family:var(--rmp-font);color:var(--rmp-body);font-size:var(--rmp-copy);
	-webkit-font-smoothing:antialiased}
.rmp-page *,.rmp-page *:before,.rmp-page *:after{box-sizing:border-box}
.rmp-page img{max-width:100%;height:auto;display:block}

.rmp-wrap{max-width:var(--rmp-shell);margin:0 auto;padding:0 24px}
.rmp-wrap--narrow{max-width:var(--rmp-narrow)}

/* Landing-page default: direct section content receives the same horizontal
   gutter as .rmp-wrap, so a missed wrapper never runs edge-to-edge. */
.rmp-page .rmp-sec > .wp-block-heading,.rmp-page .rmp-sec > p{max-width:var(--rmp-shell);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
/* Centred intro pattern: explicit auto margins avoid block-editor layout rules
   pinning a measured paragraph to the left edge of its wrap. */
.rmp-sponsorship-intro .rmp-head,.rmp-sponsorship-intro .rmp-measure{margin-left:auto!important;margin-right:auto!important;text-align:center}
.rmp-sponsorship-intro .rmp-measure{max-width:68ch}
/* Form controls must not inherit the centred intro alignment. */
#sponsorship-form .ff-el-group,#sponsorship-form .ff-el-input--label,#sponsorship-form .ff-el-input--content{text-align:left!important}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
/* 16 Sep 2026: --tight used to be 64px against a default of 88px. The
   rhythm is now universal, so it resolves to the same value and is kept
   only so existing markup keeps validating - there is no need to strip
   the class from the pages, and no need to add it to new ones. */
.rmp-sec,
.rmp-sec--tight{padding:var(--rmp-sec-pad) 0}
.rmp-sec--soft{background:var(--rmp-soft)}
.rmp-sec--white{background:#fff}
.rmp-sec--red{background:var(--rmp-red);color:#fff;
	background-image:radial-gradient(circle at 110% -30%,rgba(255,255,255,.16),transparent 55%)}
.rmp-sec--red .rmp-h2,.rmp-sec--red .rmp-h3,.rmp-sec--red h2,.rmp-sec--red h3{color:#fff}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.rmp-page h1,.rmp-page h2,.rmp-page h3,.rmp-page h4{
	font-family:var(--rmp-font);color:var(--rmp-ink);margin:0;
	letter-spacing:.01em;text-wrap:balance}

/* Sitewide type scale, signed off 26 Aug 2026: H1 36px / H2 30px / body 18px.
   Fixed sizes, not fluid - they no longer grow on wide screens.
   Previous fluid values, if this ever needs reverting:
     .rmp-h1 clamp(2.25rem,1.4rem + 3.4vw,3.9rem)
     .rmp-h2 clamp(1.75rem,1.2rem + 2.1vw,2.75rem) */
.rmp-h1{font-size:var(--rmp-h1);font-weight:700;line-height:1.06;text-transform:uppercase}
.rmp-h2{font-size:var(--rmp-h2);font-weight:700;line-height:1.12;text-transform:uppercase}
.rmp-h3{font-size:var(--rmp-h3);font-weight:700;line-height:1.2}
.rmp-h4{font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}

.rmp-eyebrow{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.18em;
	text-transform:uppercase;color:var(--rmp-red);margin-bottom:var(--rmp-s2)}
.rmp-sec--red .rmp-eyebrow{color:#fff;opacity:.85}

.rmp-lede{font-size:var(--rmp-copy);line-height:1.65;color:var(--rmp-body)}
/* Opt-in override: holds a lede at a flat 18px instead of the 17-20px clamp.
   Same specificity as .rmp-lede, so it must stay AFTER it to win. Delete this
   rule and the class in the markup to put a lede back on the default scale. */
.rmp-lede--18{font-size:var(--rmp-copy)}
.rmp-sec--red .rmp-lede,.rmp-sec--red p{color:#fff}
.rmp-page p{margin:0 0 1.1em;line-height:1.7}
.rmp-page p:last-child{margin-bottom:0}

.rmp-center{text-align:center}
.rmp-measure{max-width:68ch;margin-inline:auto}

/* Section heading block */
.rmp-head{margin-bottom:var(--rmp-s5)}
.rmp-head--center{text-align:center}
.rmp-head--center .rmp-measure{margin-inline:auto}
.rmp-head p{margin-top:var(--rmp-s2)}

/* Red keyline under centred headings - replaces the wireframe's bare text */
.rmp-head--rule .rmp-h2:after{content:"";display:block;width:64px;height:4px;background:var(--rmp-red);
	margin:var(--rmp-s3) 0 0}
.rmp-head--center.rmp-head--rule .rmp-h2:after{margin-inline:auto}
.rmp-sec--red .rmp-head--rule .rmp-h2:after{background:#fff}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.rmp-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
	min-height:54px;padding:0 30px;border:2px solid transparent;border-radius:4px;cursor:pointer;
	font:700 .875rem/1 var(--rmp-font);letter-spacing:.09em;text-transform:uppercase;
	text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.rmp-cta:hover{transform:translateY(-2px)}
/* Focus ring. 2px is the thinnest ring WCAG 2.2 SC 2.4.11 accepts, and every
   colour used below clears 3:1 against the surface it sits on: --rmp-ink is
   8.1:1 on white, the range accents are 3.4:1 (Leader, the tightest) to
   18.7:1, and dark/red bands flip the ring to white. Do not drop below 2px
   and do not remove it - it is the only focus indicator keyboard users get. */
.rmp-cta:focus-visible{outline:2px solid var(--rmp-focus,var(--rmp-ink));outline-offset:2px}
.rmp-sec--red{--rmp-focus:#fff}
.rmp-range--gonative,.rmp-range--leader,.rmp-range--winner,.rmp-range--engage{--rmp-focus:var(--accent)}
.rmp-cta--red{background:var(--rmp-red);color:#fff}
.rmp-cta--red:hover{background:var(--rmp-red-dark);color:#fff}
.rmp-cta--ghost{background:transparent;color:var(--rmp-red);border-color:var(--rmp-red)}
.rmp-cta--ghost:hover{background:var(--rmp-red);color:#fff}
.rmp-cta--white{background:#fff;color:var(--rmp-red)}
.rmp-cta--white:hover,
.rmp-cta--white:focus-visible,
.rmp-cta--white:active{background:var(--rmp-red);color:#fff;border-color:var(--rmp-red)}
/* An ink focus ring vanishes on a red button on a dark band. */
.rmp-cta--white:focus-visible{outline-color:#fff}
/* "Buy now" on the product pages. Deliberately NOT .rmp-cta--red: that class
   is re-coloured to the range accent on the Leader/Winner/Engage PDPs (see
   leader-product.css et al), and this button has to stay RED MILLS red
   everywhere so the buying action reads the same on every product.
   --pending is the state before a link has been filled in: same button, but
   rendered as a <span> so there is nothing dead to click. */
.rmp-cta--buy{background:var(--rmp-red);color:#fff;border-color:transparent}
.rmp-cta--buy:hover{background:var(--rmp-red-dark);color:#fff}
.rmp-cta--pending{cursor:default}
.rmp-cta--pending:hover{transform:none;background:var(--rmp-red)}
.rmp-cta--lg{min-height:62px;padding:0 44px;font-size:1rem}
.rmp-cta--block{width:100%}
.rmp-ctas{display:flex;flex-wrap:wrap;gap:var(--rmp-s2)}
.rmp-ctas--center{justify-content:center}

/* --------------------------------------------------------------------------
   Media placeholders
   The wireframe used blank grey boxes. These are labelled so the content team
   can see exactly which asset belongs in each slot, and they collapse to a
   plain image once a real one is dropped in.
   -------------------------------------------------------------------------- */
.rmp-ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:10px;background:var(--rmp-ph);color:#8B8D91;text-align:center;padding:var(--rmp-s3);
	border-radius:var(--rmp-radius);min-height:260px;overflow:hidden}
.rmp-ph:before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(0,0,0,.11);
	border-radius:calc(var(--rmp-radius) - 2px);pointer-events:none}
.rmp-ph__icon{width:44px;height:44px;opacity:.5}
.rmp-ph__label{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;max-width:34ch;line-height:1.5}
.rmp-ph--square{aspect-ratio:1/1;min-height:0}
.rmp-ph--wide{aspect-ratio:16/9;min-height:0}
.rmp-ph--tall{aspect-ratio:3/4;min-height:0}
.rmp-ph--onred{background:rgba(255,255,255,.14);color:#fff}
.rmp-ph--onred:before{border-color:rgba(255,255,255,.4)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rmp-hero{position:relative;background:var(--rmp-ph);overflow:hidden}
.rmp-hero__media{position:absolute;inset:0}
.rmp-hero__media img,.rmp-hero__media video{width:100%;height:100%;object-fit:cover}
/* Banner image as a core Image block (8 Sep 2026) - editable in the editor.
   The figure has to fill the media well for the img rule above to have a box
   to cover, and the grey placeholder inside it drops its corner radius and
   min-height because here it is a full-bleed banner, not a card. */
.rmp-hero__media figure.wp-block-image{margin:0;width:100%;height:100%}
.rmp-hero__media figure.wp-block-image .rmp-ph{width:100%;height:100%;min-height:0;border-radius:0}
/* Banner overlay ("scrim"): the dark wash over the photo that keeps the white
   heading legible. It is a left-to-right gradient, not one flat percentage -
   heaviest behind the text on the left, almost clear on the right.

   --rmp-scrim-k is a strength dial: every stop is multiplied by it, so the
   shape of the fade is preserved and only its weight changes. 1 = as designed.
   It is deliberately NOT declared here, only read with a fallback, so the
   per-page value the "Banner overlay" field prints on <body> always wins
   without a specificity fight (see inc/page-banner.php). */
.rmp-hero__scrim{position:absolute;inset:0;
	background:linear-gradient(90deg,
		rgba(20,22,28,calc(.72 * var(--rmp-scrim-k,1))) 0%,
		rgba(20,22,28,calc(.46 * var(--rmp-scrim-k,1))) 48%,
		rgba(20,22,28,calc(.18 * var(--rmp-scrim-k,1))) 100%)}
.rmp-hero__inner{position:relative;max-width:var(--rmp-shell);margin:0 auto;padding:var(--rmp-s8) 24px;
	min-height:var(--rmp-hero-h);display:flex;flex-direction:column;justify-content:center}
.rmp-hero__inner>*{max-width:min(760px,100%)}
.rmp-hero .rmp-h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.3)}
/* 18px, the site body size - the same as the homepage banner. Was a fluid
   17-22px clamp, which made the interior banners read a size larger than the
   homepage and larger than the copy underneath them. */
/* Matched on position as well as on class: any paragraph dropped into a
   banner in the editor gets the banner treatment automatically, so nobody has
   to remember to add rmp-hero__sub by hand under Advanced. The class is kept
   for the shortcode-rendered banners and for existing content. */
.rmp-hero__sub,
.rmp-hero__inner>p:not(.rmp-eyebrow),
.rmp-hero__copy>p:not(.rmp-eyebrow){font-size:var(--rmp-copy);
	line-height:1.55;color:#fff;opacity:.95}
/* One gap for the whole banner stack: eyebrow / heading / paragraph /
   breadcrumb / buttons all sit on the same rhythm. Change it in one place.
   Needs .rmp-page scope on the sub: `.rmp-page p{margin:0 0 1.1em}` is
   class+element and outbids a bare .rmp-hero__sub, so a margin-top declared
   there is silently zeroed and the sub sits flush against the headline. */
.rmp-hero{--rmp-hero-gap:var(--rmp-s3)}
.rmp-hero .rmp-eyebrow{margin-bottom:var(--rmp-hero-gap)}
.rmp-page .rmp-hero__sub,
.rmp-page .rmp-hero__inner>p:not(.rmp-eyebrow),
.rmp-page .rmp-hero__copy>p:not(.rmp-eyebrow){margin-top:var(--rmp-hero-gap);margin-bottom:0}
.rmp-hero .rmp-crumbs--hero{margin-top:var(--rmp-hero-gap)}
.rmp-hero .rmp-ctas{margin-top:var(--rmp-hero-gap)}
.rmp-hero .rmp-h1{margin:0}

/* Hero on a plain grey plate (wireframe pages 21, 24, 26) */
.rmp-hero--plate{background:var(--rmp-ph)}
/* Copy is left aligned on every hero variant (8 Sep 2026) - the plate and
   banner variants used to centre theirs, which left the site with two
   different heading alignments depending on whether a page had a photo. */
.rmp-hero--plate .rmp-hero__inner{align-items:flex-start;text-align:left;
	min-height:var(--rmp-hero-h-plate)}
.rmp-hero--plate .rmp-h1{color:var(--rmp-ink);text-shadow:none}
.rmp-hero--plate .rmp-hero__sub,
.rmp-hero--plate .rmp-hero__inner>p:not(.rmp-eyebrow),
.rmp-hero--plate .rmp-hero__copy>p:not(.rmp-eyebrow){color:var(--rmp-body)}

/* Video hero: headline fades out on play (wireframe page 4 note) */
/* --banner is the photo/video treatment: copy left, over the media,
   so a photo or film gets room to read as a picture rather than a strip.
   Image and video share the height, so swapping one for the other never
   changes it. --video adds only playback. */
.rmp-hero--banner .rmp-hero__inner,
.rmp-hero--video .rmp-hero__inner{align-items:flex-start;text-align:left;
	min-height:var(--rmp-hero-h-banner)}
.rmp-hero__image,.rmp-hero__video{width:100%;height:100%;object-fit:cover}
.rmp-hero__video .rmp-hero__fallback{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
	.rmp-hero__video{display:none}
	.rmp-hero--video .rmp-hero__media{background:var(--rmp-ph) center/cover no-repeat}
}
.rmp-hero--video .rmp-hero__copy{transition:opacity .8s ease,transform .8s ease}
.rmp-hero--video.is-playing .rmp-hero__copy{opacity:0;transform:translateY(-12px);pointer-events:none}
.rmp-play{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;
	margin-top:var(--rmp-s4);border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.14);
	color:#fff;cursor:pointer;transition:background .2s ease,transform .2s ease}
.rmp-play:hover{background:var(--rmp-red);border-color:var(--rmp-red);transform:scale(1.06)}
.rmp-play svg{width:30px;height:30px;margin-left:4px}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
/* Styled to match the group site (redmills.com): small uppercase caps,
   widely letter-spaced, slash separators, no underlines - 8 Sep 2026. The
   position is unchanged, a full-width band directly under the hero.
   Sizes are in em where they hang off the type, so bumping the font-size
   below rescales the separators and gaps with it. */
.rmp-crumbs{background:var(--rmp-grey);color:#fff}
.rmp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.85em;list-style:none;margin:0;
	padding:16px 24px;max-width:var(--rmp-shell);margin-inline:auto;
	font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
/* No underline - the caps and spacing carry it, as on the group site.
   Kept at full white rather than the group site's slightly dimmed links:
   the band here is mid-grey (--rmp-grey), where even solid white is only
   about 2.4:1, so there is no contrast to spend on a tint. */
.rmp-crumbs a{color:#fff;text-decoration:none;transition:opacity .15s ease}
.rmp-crumbs a:hover,.rmp-crumbs a:focus-visible{color:#fff;text-decoration:underline;
	text-underline-offset:4px}
/* The slash is decoration, so it is generated rather than marked up, and the
   right margin closes the flex gap to a single visual space either side. */
.rmp-crumbs li+li:before{content:"/";margin-right:.85em;opacity:.55;font-weight:400;
	letter-spacing:0}
/* Current page: full white and heavier, the only non-link in the trail. */
.rmp-crumbs [aria-current]{font-weight:700;color:#fff}

/* --crumbs--hero: the group-site layout - the trail sits INSIDE the banner,
   directly under the H1, instead of in its own grey band below it. Being a
   child of .rmp-hero__inner it inherits the hero's left edge, so it lines up
   with the heading automatically at every breakpoint (8 Sep 2026). */
/* Spacing comes from --rmp-hero-gap with the rest of the banner stack. */
.rmp-crumbs--hero{background:none}
.rmp-crumbs--hero ol{padding:0;max-width:none;margin-inline:0}
/* Sits on photography, so it gets the same lift the H1 has. */
.rmp-crumbs--hero a,.rmp-crumbs--hero [aria-current]{text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* On the grey plate variant there is no photo to sit on and white would be
   2.4:1, so the trail switches to the dark ink used for the plate heading. */
.rmp-hero--plate .rmp-crumbs--hero{color:var(--rmp-ink)}
.rmp-hero--plate .rmp-crumbs--hero a,
.rmp-hero--plate .rmp-crumbs--hero [aria-current]{color:var(--rmp-ink);text-shadow:none}

/* --crumbs--plain: the banner trail's design and layout with no banner behind
   it - for pages that open on white, e.g. a single article (15 Sep 2026). Same
   caps, letter-spacing and slash separators as --hero, and the same left edge:
   the ol keeps the base rule's shell width and auto margins, so the trail lines
   up with the content below it. Only the grey band and white text are dropped,
   for near-black ink that clears AA on white. */
.rmp-crumbs--plain{background:none;color:var(--rmp-ink-deep)}
.rmp-crumbs--plain ol{padding:var(--rmp-s3) 24px 0}
.rmp-crumbs--plain a,
.rmp-crumbs--plain [aria-current]{color:var(--rmp-ink-deep)}
.rmp-crumbs--plain a:hover,
.rmp-crumbs--plain a:focus-visible{color:var(--rmp-ink-deep);text-decoration:underline;
	text-underline-offset:4px}
@media (max-width:639px){
	.rmp-crumbs--plain ol{padding:var(--rmp-s2) 20px 0}
}

/* --------------------------------------------------------------------------
   Split (text / media side by side)
   -------------------------------------------------------------------------- */
.rmp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.rmp-split--flip .rmp-split__media{order:-1}
/* Real photography in a split band gets the same rounded corners the grey
   placeholder had, so swapping a placeholder for an image changes nothing
   else about the layout. */
.rmp-split__img{width:100%;height:auto;border-radius:var(--rmp-radius)}
/* --band forces every split-band photo to one shape (the 1920x1174 house
   ratio) so consecutive bands read as a set whatever the source crop is.
   The image is cropped to fill, never squashed. */
.rmp-split__img--band{aspect-ratio:1920/1174;height:auto;object-fit:cover;
	object-position:center}
/* Media wells built from a core Image block (so Marketing can swap the picture
   in the editor). The block wraps the <img> in a <figure>, so the sizing and
   rounding that .rmp-split__img applies directly to an <img> has to be split
   between the two here. Empty core Images are replaced by the grey .rmp-ph
   placeholder (rmp_image_placeholder() in functions.php), which needs the
   band ratio so the layout does not jump when a photo is chosen. */
.rmp-split__media figure.wp-block-image{margin:0}
.rmp-split__media figure.wp-block-image img{display:block;width:100%;height:auto;
	border-radius:var(--rmp-radius)}
.rmp-split__media figure.wp-block-image .rmp-ph{aspect-ratio:1920/1174;min-height:0}
/* --shot pins a product range photo to the 1920x1174 house ratio, the same
   shape as .rmp-split__img--band and the grey placeholder, so a column of
   split bands reads as a set however the source images were cropped. Cropped
   to fill, never squashed. Added 8 Sep 2026: the six shots on
   /about/our-ranges/ were three different heights, because three of them had
   been resized by hand in the editor (one to 2400px) which left inline
   width/aspect-ratio styles on the <img> that outrank any stylesheet. Those
   inline styles are gone from the markup; keep them out. */
.rmp-split__media figure.wp-block-image.rmp-split__shot img{aspect-ratio:1920/1174;height:auto;object-fit:cover;object-position:center}
.rmp-split--wide-media{grid-template-columns:1.15fr 1fr}
.rmp-split__copy>*+*{margin-top:var(--rmp-s3)}
/* Body text is weight 300, so the browser's "bolder" lands on 400 and bold text barely shows: make it a real 700. */
.rmp-split__copy strong{font-weight:700}
/* A heading that reads as a bold body-size label (Register as a Stockist: "Like to become a stockist:"). */
.rmp-split__copy p:not(.rmp-eyebrow) a:not(.wp-block-button__link){color:var(--rmp-red)}
.rmp-split__copy .rmp-split__label{font-size:var(--rmp-copy);font-weight:700;line-height:inherit;text-transform:none;letter-spacing:normal}
/* Ranges page (/about/our-ranges/): match the H2 -> intro-paragraph gap to the
   eyebrow -> H2 gap, so the heading sits evenly between the two.
   NB the rhythm rule above never reaches these elements: `.rmp-split__copy>*+*`
   is (0,1,0) and loses to `.rmp-page h2{margin:0}` / `.rmp-page p{margin:0 0
   1.1em}` at (0,1,1). Hence the three-class selectors here. The eyebrow's gap
   was an accidental 14.3px (1.1em of 13px type); both are now --rmp-s2 (16px).
   Requested 28 Aug 2026. */
.page-id-12 .rmp-split__copy .rmp-eyebrow{margin-bottom:var(--rmp-s2)}
/* Our Ranges banner: the puppy photo is 3:2, so cover crops it to a thin strip.
   From 901px up show the whole photo (contain), centred, its side edges faded
   into a fill that matches the studio backdrop. Phones keep the cover crop. */
@media (min-width:901px){
	.page-id-12 .rmp-hero__media{background:linear-gradient(90deg,#c0b8c5,#dbd7de)}
	.page-id-12 .rmp-hero__media img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
		width:auto;max-width:none;height:125%;aspect-ratio:1411/943;object-fit:cover;
		-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
		mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
}
.page-id-12 .rmp-split__copy .rmp-h2+p{margin-top:var(--rmp-s2)}
/* Match the heading-to-copy spacing to the eyebrow-to-heading spacing. */
.rmp-story-heading + p{margin-top:var(--rmp-s3)}
.rmp-split+.rmp-split{margin-top:var(--rmp-s7)}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.rmp-grid{display:grid;gap:var(--rmp-s4)}
.rmp-grid--2{grid-template-columns:repeat(2,1fr)}
.rmp-grid--3{grid-template-columns:repeat(3,1fr)}
.rmp-grid--4{grid-template-columns:repeat(4,1fr)}
.rmp-grid--5{grid-template-columns:repeat(5,1fr)}

.rmp-card{background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);
	padding:var(--rmp-s4);display:flex;flex-direction:column;gap:var(--rmp-s2);height:100%;
	transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.rmp-card:hover{box-shadow:0 18px 40px -22px rgba(16,19,26,.35);transform:translateY(-3px)}
.rmp-card__title{font-size:1.1875rem;font-weight:700;color:var(--rmp-ink)}
/* A card whose title is the link - the certificate cards on Ingredients &
   Quality. The whole card is not clickable (each has its own description),
   so the title carries the colour and the underline. */
.rmp-card__title a{color:var(--rmp-red);text-decoration-thickness:1px;text-underline-offset:3px}
.rmp-card__title a:hover,.rmp-card__title a:focus-visible{color:var(--rmp-red-dark)}
.rmp-card__text{font-size:var(--rmp-copy);line-height:1.65;color:var(--rmp-muted)}
.rmp-card--plain{background:transparent;border:0;padding:0}
.rmp-card--plain:hover{transform:none;box-shadow:none}
/* A card with its own CTA row (the three section cards on /advice-tips/).
   The card is a flex column, so auto margin drops the buttons to the
   bottom and they line up across the row whatever length the blurbs are. */
.rmp-card .rmp-ctas{margin-top:auto}
/* Optional image (or grey .rmp-ph stand-in) inside a card.  The card is a
   flex column with its own gap, so the figure must not add margins. */
.rmp-card figure.wp-block-image{margin:0}
.rmp-card__shot img,.rmp-card__shot .rmp-ph{display:block;width:100%;border-radius:6px}
.rmp-card__shot .rmp-ph{aspect-ratio:16/9;min-height:0}
.rmp-card__shot img{aspect-ratio:16/9;object-fit:cover;height:auto}
/* Per-photo crop position for the division cards on /about/. These shots are
   440x388 in a 16/9 box, so cover throws away 36% of the height; where the
   subject sits decides which 64% to keep. Attachment-ID classes, so the page
   content needs no per-image class of its own.
     wp-image-1778  Equine-Image  horse sits low  -> pull the crop down
     wp-image-1779  Pet-Image     head is high in the frame -> pull the crop up
     wp-image-1780  Agri-Image    centred crop approved, so no rule for it */
.rmp-card__shot img.wp-image-1778{object-position:50% 85%}
.rmp-card__shot img.wp-image-1779{object-position:50% 15%}
/* Division cards on /about/ ("Three divisions, one standard", grid modifier
   .rmp-grid--divisions): the Connolly's RED MILLS logo (attachment 953, block class
   .rmp-card__logo) is the first item in each card, centred, above a centred title.
   Only the logo and the title are centred; the blurb and the Learn more link stay
   left-aligned. The card is a flex column, so the figure is a full-width row and the
   image is centred inside it. */
.rmp-grid--divisions .rmp-card__logo img{display:block;width:100%;max-width:170px;height:auto;margin:0 auto}
.rmp-grid--divisions .rmp-card__title{text-align:center}
/* Learn more links are red. On desktop the blurb reserves two lines so the photos
   (and links) line up across the three cards when one blurb is a single line. */
.rmp-grid--divisions .rmp-card > p:last-child a{color:var(--rmp-red)}
.rmp-grid--divisions .rmp-card > p:last-child a:hover,.rmp-grid--divisions .rmp-card > p:last-child a:focus-visible{color:var(--rmp-red-dark)}
@media (min-width:1045px){.rmp-grid--divisions .rmp-card__text{min-height:calc(2 * 1.65em)}}
/* TRIAL: light grey decorative icon in the top-right corner of each division card
   (horseshoe / paw prints / wheat ear), set by the card modifier class. SVG data URIs,
   fill #D9DBDE. Decorative only (aria-hidden by nature of being CSS). */
.rmp-grid--divisions .rmp-card{position:relative}
.rmp-grid--divisions .rmp-card::after{content:"";position:absolute;top:var(--rmp-s2);right:var(--rmp-s2);width:44px;height:44px;background:center/contain no-repeat;pointer-events:none}
.rmp-grid--divisions .rmp-card--equine::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 45'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='40' height='45' fill='%23fff'/%3E%3Cg fill='%23000'%3E%3Crect x='7.7' y='1.9' width='2.6' height='2.2' rx='.5'/%3E%3Crect x='29.7' y='1.9' width='2.6' height='2.2' rx='.5'/%3E%3Crect x='3' y='23.6' width='2.4' height='2.8' rx='.5'/%3E%3Crect x='34.6' y='23.6' width='2.4' height='2.8' rx='.5'/%3E%3Crect x='4.3' y='13.5' width='2.2' height='3' rx='.5' transform='rotate(20 5.4 15)'/%3E%3Crect x='33.5' y='13.5' width='2.2' height='3' rx='.5' transform='rotate(-20 34.6 15)'/%3E%3Crect x='6.4' y='33.1' width='2.4' height='2.8' rx='.5' transform='rotate(-45 7.6 34.5)'/%3E%3Crect x='31.2' y='33.1' width='2.4' height='2.8' rx='.5' transform='rotate(45 32.4 34.5)'/%3E%3Crect x='18.5' y='39.9' width='3' height='2.2' rx='.5'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' fill='%23D9DBDE' d='M4.5 0H13.5V6H12.2C11 12 7.5 17 7.5 25C7.5 33 13 37.5 20 37.5C27 37.5 32.5 33 32.5 25C32.5 17 29 12 27.8 6H26.5V0H35.5V6H33.8C37 14 39 20 39 26C39 38 31 44.5 20 44.5C9 44.5 1 38 1 26C1 20 3 14 6.2 6H4.5Z'/%3E%3C/svg%3E")}
.rmp-grid--divisions .rmp-card--pet::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23D9DBDE'%3E%3Cellipse cx='175' cy='108' rx='70' ry='108'/%3E%3Cellipse cx='338' cy='108' rx='70' ry='108'/%3E%3Cellipse cx='68' cy='245' rx='62' ry='88' transform='rotate(-12 68 245)'/%3E%3Cellipse cx='442' cy='245' rx='62' ry='88' transform='rotate(12 442 245)'/%3E%3Cpath d='M240 265C190 265 150 310 105 400C85 440 100 475 140 475C190 475 210 455 260 455C310 455 330 475 380 475C420 475 440 440 420 400C375 310 330 265 240 265Z'/%3E%3C/svg%3E")}
.rmp-grid--divisions .rmp-card--equine::after,.rmp-grid--divisions .rmp-card--pet::after{width:32px;height:32px;top:calc(var(--rmp-s2) + 2px);right:calc(var(--rmp-s2) + 2px)}
.rmp-grid--divisions .rmp-card--agri::after{width:36px;height:36px}
.rmp-grid--divisions .rmp-card--agri::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9DBDE'%3E%3Crect x='11.2' y='7' width='1.6' height='16' rx='.8'/%3E%3Cellipse cx='12' cy='4' rx='1.9' ry='3'/%3E%3Cg%3E%3Cellipse cx='8' cy='9' rx='1.7' ry='3' transform='rotate(-35 8 9)'/%3E%3Cellipse cx='16' cy='9' rx='1.7' ry='3' transform='rotate(35 16 9)'/%3E%3Cellipse cx='7.6' cy='14' rx='1.7' ry='3' transform='rotate(-35 7.6 14)'/%3E%3Cellipse cx='16.4' cy='14' rx='1.7' ry='3' transform='rotate(35 16.4 14)'/%3E%3Cellipse cx='8' cy='19' rx='1.7' ry='3' transform='rotate(-35 8 19)'/%3E%3Cellipse cx='16' cy='19' rx='1.7' ry='3' transform='rotate(35 16 19)'/%3E%3C/g%3E%3C/svg%3E")}

/* Range logo plates on Our Ranges: the range logos are reversed/white, so each sits on a plate in the range colour.
   Height is set per logo (attachment-ID class) so they look the same size. */
.rmp-split__media{position:relative}
/* Range logo on a plate in the range colour, inline with (left of) the eyebrow and heading. */
.rmp-split__copy .rmp-rangehead{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rmp-s3)}
.rmp-rangehead__text>*{margin-top:0}
.page-id-12 .rmp-split__copy .rmp-rangehead+p{margin-top:var(--rmp-s2)}
.rmp-split__copy figure.wp-block-image.rmp-rl--top{flex:none;width:fit-content;margin:0;
	padding:12px 18px;border-radius:var(--rmp-r-sm,8px);background:var(--accent,#333F48);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.rmp-split__copy figure.wp-block-image.rmp-rl--top img{display:block;width:auto;height:auto;max-width:none;aspect-ratio:auto;border-radius:0}
.rmp-rl--gonative{--accent:var(--rmp-gonative)}
.rmp-rl--leader{--accent:var(--rmp-leader)}
.rmp-rl--winner{--accent:var(--rmp-winner)}
.rmp-rl--engage{--accent:var(--rmp-engage)}
.rmp-rl img.wp-image-2398{height:84px!important}
/* Go Native dog 2560 is the official white plate, used as supplied: no coloured plate behind it. */
.rmp-rl img.wp-image-2560{height:108px!important}
.rmp-split__copy figure.wp-block-image.rmp-rl--top:has(img.wp-image-2560){padding:0;background:none;overflow:hidden;border-radius:0}
/* Go Native cat 2565 (dark brush plate) and Engage 2564 (dark artwork, white plate set here) likewise. */
.rmp-rl img.wp-image-2565{height:108px!important}
.rmp-rl img.wp-image-2564{height:92px!important;box-sizing:border-box;padding:15px 19px;background:#fff;object-fit:contain}
.rmp-split__copy figure.wp-block-image.rmp-rl--top:has(img.wp-image-2565, img.wp-image-2564){padding:0;background:none;overflow:hidden;border-radius:0}
.rmp-rl img.wp-image-2485{height:68px!important}
.rmp-rl img.wp-image-2399{height:44px!important}
.rmp-rl img.wp-image-2400{height:44px!important}
.rmp-rl img.wp-image-2401{height:40px!important}
.rmp-rl img.wp-image-2488{height:40px!important}
/* Winner cat: the supplied orange logo is shown as is (it has its own orange background), so no plate. */
.rmp-split__copy figure.wp-block-image.rmp-rl--top.rmp-rl--orange{padding:0;background:none;overflow:hidden}
.rmp-rl img.wp-image-2499{height:66px!important;border-radius:var(--rmp-r-sm,8px)}

/* Pillar cards on the red band (Nutrition / Care / Community) */
.rmp-pillar{display:flex;flex-direction:column;gap:var(--rmp-s3);text-align:center}
.rmp-pillar .rmp-ph{min-height:0;aspect-ratio:1/1}
.rmp-page .rmp-sec--red .rmp-pillar__title{font-size:1.375rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.rmp-pillar p{font-size:var(--rmp-copy);line-height:1.65;opacity:.94}

/* --------------------------------------------------------------------------
   Feature roundels (100% Irish / Free Run / Grain Free ...)
   -------------------------------------------------------------------------- */
.rmp-feats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--rmp-s3)}
.rmp-feats--six{grid-template-columns:repeat(6,1fr)}
.rmp-feat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--rmp-s2)}
.rmp-feat__disc{position:relative;width:104px;height:104px;border-radius:50%;background:var(--rmp-red);
	display:grid;place-items:center;color:#fff;transition:transform .22s ease}
.rmp-feat:hover .rmp-feat__disc{transform:translateY(-4px)}
.rmp-feat__disc svg{width:52px;height:52px}
.rmp-feat__disc .rmp-feat__icon-image{width:98px;height:98px;object-fit:contain;border-radius:50%}
/* "--plain": icon artwork on the page, with no red disc behind it (8 Sep 2026).
   For icon sets that carry their own colour on a transparent background. NOT
   the default, because the older line-art icons contain white detail that
   disappears without a dark disc behind it - check the artwork before adding
   this class to another set.
   The circular clip goes too: with no disc to hide it, it would crop the
   corners of square artwork. */
.rmp-feats--plain .rmp-feat__disc{background:none;color:inherit}
.rmp-feats--plain .rmp-feat__disc .rmp-feat__icon-image{border-radius:0}
.rmp-feat__title{font-size:.9375rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rmp-ink)}
.rmp-feat p{font-size:var(--rmp-copy);line-height:1.6;color:var(--rmp-muted);max-width:24ch}

/* --------------------------------------------------------------------------
   Range cards (Go Native / Leader / Winner / Engage)
   -------------------------------------------------------------------------- */
.rmp-ranges{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rmp-s3)}
.rmp-range{--accent:var(--rmp-red);
	background:#fff;border:1px solid var(--rmp-line);border-top:5px solid var(--accent);
	border-radius:var(--rmp-radius);padding:var(--rmp-s4);display:flex;flex-direction:column;
	transition:box-shadow .2s ease,transform .2s ease}
.rmp-range:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(16,19,26,.4)}
.rmp-range--gonative{--accent:var(--rmp-gonative)}
.rmp-range--leader{--accent:var(--rmp-leader)}
.rmp-range--winner{--accent:var(--rmp-winner)}
.rmp-range--engage{--accent:var(--rmp-engage)}

.rmp-range__pack{display:grid;place-items:center;min-height:230px;margin-bottom:var(--rmp-s3)}
.rmp-range__pack .rmp-ph{width:100%;min-height:230px}
.rmp-range__pack img{max-height:230px;width:auto}
/* The pack shot is a core Image block (8 Sep 2026), so Marketing can swap the
   picture in the editor rather than hand-editing HTML. Core wraps the <img> in
   a <figure> with its own margins; the existing .rmp-ph and img rules above
   already reach inside it, so all this needs to do is make the figure behave
   like the div it replaced. An empty Image block still renders as the labelled
   grey box - see rmp_image_placeholder() in functions.php. */
.rmp-range__pack figure.wp-block-image{margin:0;width:100%;display:grid;place-items:center}
/* Range logo centred at the top of each card, on a plate in the range colour (the logos are reversed/white).
   The orange Winner cat logo has its own background, so no plate. Heights are per logo (attachment ID). */
.rmp-range figure.wp-block-image.rmp-range__logo{align-self:center;width:fit-content;margin:0 0 var(--rmp-s3);padding:10px 14px;
	border-radius:var(--rmp-r-sm,8px);background:var(--accent)}
.rmp-range figure.wp-block-image.rmp-range__logo--orange{padding:0;background:none;overflow:hidden}
.rmp-range .rmp-range__logo img{display:block;width:auto;max-width:none;aspect-ratio:auto;border-radius:0;height:34px}
.rmp-range .rmp-range__logo img.wp-image-2398{height:60px}
.rmp-range .rmp-range__logo img.wp-image-2560{height:84px}
.rmp-range .rmp-range__logo img.wp-image-2565{height:84px}
.rmp-range .rmp-range__logo img.wp-image-2564{height:84px;box-sizing:border-box;padding:13px 16px;background:#fff;object-fit:contain}
.rmp-range .rmp-range__logo img.wp-image-2485{height:52px}
.rmp-range .rmp-range__logo img.wp-image-2401{height:30px}
.rmp-range .rmp-range__logo img.wp-image-2499{height:52px;border-radius:var(--rmp-r-sm,8px)}
/* Every logo row takes the same 84px (plate + gap) so names and lists line up across cards. */
.rmp-range figure.wp-block-image.rmp-range__logo{margin-bottom:30px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2398){margin-bottom:4px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2560, img.wp-image-2565, img.wp-image-2564){padding:0;background:none;overflow:hidden;border-radius:0;margin-bottom:0}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2485){margin-bottom:12px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2401){margin-bottom:34px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2499){margin-bottom:32px}
.rmp-range__name{font-size:1.5rem;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:.01em}
.rmp-range__strap{margin-top:6px;font-size:1rem;font-weight:700;color:var(--rmp-ink)}
.rmp-range__list{list-style:none;margin:var(--rmp-s3) 0 var(--rmp-s4);padding:0;display:grid;gap:12px}
.rmp-range__list li{display:flex;align-items:center;gap:12px;font-size:var(--rmp-copy);color:var(--rmp-body)}
.rmp-range__list li:before{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.rmp-range__cta{margin-top:auto;background:var(--accent);color:#fff;border-color:var(--accent)}
.rmp-range__cta:hover{background:var(--rmp-ink);border-color:var(--rmp-ink);color:#fff}

/* --------------------------------------------------------------------------
   Range dialog (the wireframe's "find out more" pop up)
   Native <dialog> - focus trap, Esc to close and backdrop come for free.
   -------------------------------------------------------------------------- */
.rmp-modal{--accent:var(--rmp-red);
	width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);
	border:0;border-radius:12px;padding:0;overflow:visible;background:#fff;color:var(--rmp-body);
	font-family:var(--rmp-font);box-shadow:0 40px 90px -30px rgba(16,19,26,.55)}
.rmp-modal::backdrop{background:rgba(20,22,28,.62);backdrop-filter:blur(2px)}
.rmp-modal__scroll{max-height:calc(100vh - 48px);overflow-y:auto;padding:clamp(24px,3vw,44px);border-radius:12px}
.rmp-modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
	border:0;background:var(--rmp-soft);color:var(--rmp-ink);cursor:pointer;display:grid;place-items:center;z-index:2}
.rmp-modal__close:hover{background:var(--rmp-red);color:#fff}
.rmp-modal__close svg{width:18px;height:18px}

.rmp-modal__top{display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.rmp-modal__pack{display:grid;gap:var(--rmp-s3);justify-items:center;text-align:center}
.rmp-modal__name{font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem);font-weight:700;text-transform:uppercase;color:var(--accent)}
.rmp-modal__pack .rmp-ph,
.rmp-modal__pack .rmp-modal__shot{width:100%;aspect-ratio:3/4;min-height:0;margin-bottom:-50px}
.rmp-modal__eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rmp-muted)}
.rmp-modal__title{margin-top:8px;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:700;color:var(--rmp-ink)}
.rmp-modal__intro{margin-top:var(--rmp-s2);font-size:var(--rmp-copy);line-height:1.65}

.rmp-modal__hl{margin-top:var(--rmp-s4);display:grid;grid-template-columns:1fr auto;gap:var(--rmp-s4);align-items:center}
.rmp-modal__hl-title{font-size:1rem;font-weight:700;color:var(--rmp-ink);margin-bottom:var(--rmp-s2)}
.rmp-badges{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
.rmp-badge{width:66px;height:66px;border-radius:50%;background:var(--accent);color:#fff;display:grid;
	place-items:center;text-align:center;font-size:.5rem;font-weight:700;letter-spacing:.04em;
	text-transform:uppercase;line-height:1.25;padding:6px}
.rmp-stat{background:var(--accent);color:#fff;border-radius:var(--rmp-radius);padding:var(--rmp-s3) var(--rmp-s4);
	text-align:center;min-width:170px}
.rmp-stat__num{display:block;font-size:2.25rem;font-weight:700;line-height:1}
.rmp-stat__label{display:block;margin-top:6px;font-size:.9375rem;font-weight:700;line-height:1.35}

/* Range modal layout, signed off 28 Aug 2026 (piloted on Go Native, then rolled
   out to all seven dialogs). Range name above the pack shot; Key highlights and
   the stat moved into the copy column under the intro; stat right-aligned.
   NB `.rmp-page p{margin:0 0 1.1em}` is (0,1,1) and beats a bare `.rmp-modal__*`
   class at (0,1,0): that is why the range name sat 63px clear of the pack shot
   and the intro sat flush against its heading. `.rmp-modal .x` is (0,2,0). */
.rmp-modal .rmp-modal__pack{gap:var(--rmp-s2)}
.rmp-modal .rmp-modal__name{margin-bottom:0}
/* Heading-to-copy gap matched to the eyebrow-to-heading gap (both 16px). */
.rmp-modal .rmp-modal__eyebrow{margin-bottom:var(--rmp-s2)}
.rmp-modal .rmp-modal__intro{margin-top:var(--rmp-s2)}
/* Badges get the full column width, so all four stay on one row and the stat
   drops underneath them instead of sitting alongside. */
.rmp-modal .rmp-modal__hl{grid-template-columns:1fr;justify-items:start;gap:var(--rmp-s3)}
.rmp-modal .rmp-badges{flex-wrap:nowrap}
/* ...but the stat sits right-aligned against the column edge. */
.rmp-modal .rmp-stat{justify-self:end}
/* Stat call-out sits directly under the badges, left-aligned and exactly as wide as the badge row (width:0 +
   min-width:100% stops a long label widening the row), as a compact number | label bar so all six pop-ups match. */
.rmp-modal .rmp-modal__hl{width:fit-content;max-width:100%;gap:var(--rmp-s3)}
.rmp-modal .rmp-modal__hl .rmp-stat{justify-self:stretch;width:0;min-width:100%;box-sizing:border-box;display:flex;align-items:center;
	gap:20px;text-align:left;padding:18px 24px}
.rmp-modal .rmp-modal__hl .rmp-stat p.rmp-stat__num{flex:0 0 96px;margin:0;font-size:2.25rem}
.rmp-modal .rmp-modal__hl .rmp-stat p.rmp-stat__label{flex:1;margin:0;font-size:.9375rem;line-height:1.35}

/* Icon badges (trial, Go Native dog): add `rmp-badges--icons` to the list and an icon class to each item.
   The item text becomes a small eyebrow above a round icon in the range colour. The icon is a CSS
   background on ::after (line SVG, white), so the text stays editable and no markup is added. */
.rmp-modal .rmp-badges--icons{gap:18px}
.rmp-modal .rmp-badges--icons .rmp-badge{width:auto;min-width:64px;white-space:nowrap;height:auto;padding:0;border-radius:0;background:none;color:var(--rmp-muted);
	display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;text-align:center;
	font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.25}
.rmp-modal .rmp-badges--icons .rmp-badge::after{content:"";flex:0 0 auto;width:64px;height:64px;border-radius:50%;
	background:var(--accent) var(--ic) center/60% no-repeat}
.rmp-badge--grainfree{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1.6 1.4 1.6 3.6 0 5-1.6-1.4-1.6-3.6 0-5zM12 11c-2.4.2-4-1-4.5-3.2 2.4-.2 4 1 4.5 3.2zM12 11c2.4.2 4-1 4.5-3.2-2.4-.2-4 1-4.5 3.2zM12 16c-2.4.2-4-1-4.5-3.2 2.4-.2 4 1 4.5 3.2zM12 16c2.4.2 4-1 4.5-3.2-2.4-.2-4 1-4.5 3.2zM12 7v15M3.5 20.5l17-17'/%3E%3C/svg%3E")}
.rmp-badge--protein{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5L13 5v14M8.5 19h9'/%3E%3C/svg%3E")}
.rmp-badge--leaf{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5C4.5 10 10 4.5 20 4.5 20.5 14.5 15 20 5 19.5zM5 19.5L14 10.5'/%3E%3C/svg%3E")}
.rmp-badge--shamrock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='h'%3E%3Cpath d='M12 11C9.6 9.6 8.4 8 8.4 6.5a2.1 2.1 0 0 1 3.6-1.5 2.1 2.1 0 0 1 3.6 1.5c0 1.5-1.2 3.1-3.6 4.5z'/%3E%3C/g%3E%3Cpath d='M12 11C9.6 9.6 8.4 8 8.4 6.5a2.1 2.1 0 0 1 3.6-1.5 2.1 2.1 0 0 1 3.6 1.5c0 1.5-1.2 3.1-3.6 4.5z' transform='rotate(120 12 11)'/%3E%3Cpath d='M12 11C9.6 9.6 8.4 8 8.4 6.5a2.1 2.1 0 0 1 3.6-1.5 2.1 2.1 0 0 1 3.6 1.5c0 1.5-1.2 3.1-3.6 4.5z' transform='rotate(240 12 11)'/%3E%3Cpath d='M12 12c0 3 .8 5.5 2.2 8'/%3E%3C/svg%3E")}
.rmp-badge--lifecycle{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 0-14.6-5.9M5.5 2.8v3.7h3.7M3.5 12a8.5 8.5 0 0 0 14.6 5.9M18.5 21.2v-3.7h-3.7'/%3E%3Cg stroke-width='1.2'%3E%3Cpath d='M12 11.6c-1.5 0-2.6 1.3-2.3 2.3.2.8 1 .9 2.3.9s2.1-.1 2.3-.9c.3-1 -.8-2.3-2.3-2.3z'/%3E%3Ccircle cx='9.4' cy='10.3' r='.7'/%3E%3Ccircle cx='11.3' cy='8.9' r='.7'/%3E%3Ccircle cx='13.2' cy='8.9' r='.7'/%3E%3Ccircle cx='15.1' cy='10.3' r='.7'/%3E%3C/g%3E%3C/svg%3E")}
.rmp-badge--expand{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l6.5-6.5M4 20v-5.5M4 20h5.5M20 4l-6.5 6.5M20 4v5.5M20 4h-5.5'/%3E%3C/svg%3E")}
.rmp-badge--bone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Ccircle cx='5.5' cy='9.4' r='2.2'/%3E%3Ccircle cx='5.5' cy='14.6' r='2.2'/%3E%3Ccircle cx='18.5' cy='9.4' r='2.2'/%3E%3Ccircle cx='18.5' cy='14.6' r='2.2'/%3E%3Cpath d='M7.5 10.8h9M7.5 13.2h9'/%3E%3C/g%3E%3C/svg%3E")}
.rmp-badge--sparkle{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 4l1.9 5.6L18 11.5l-5.6 1.9L10.5 19l-1.9-5.6L3 11.5l5.6-1.9zM19 15.5v4.5M16.8 17.8h4.4'/%3E%3C/svg%3E")}
.rmp-badge--tag{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.4 6.4a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E")}
.rmp-badge--stomach{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h5M14 3v4.5c0 2 1.5 2.7 3 3.7 2 1.4 3 3.2 3 5.3a4.8 4.8 0 0 1-8.6 2.9C9.9 17.600 8.500 16.500 7 15.500 5 14 4.500 12 5.500 9.800 6.500 7.600 9 7.500 9 5z'/%3E%3C/svg%3E")}
.rmp-badge--multi{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1 8)'%3E%3Cpath d='M7 8c-1.8 0-3 1.6-2.700 2.800.2 1 1.200 1.100 2.700 1.100s2.500-.1 2.700-1.100C10 9.600 8.800 8 7 8z'/%3E%3Ccircle cx='4' cy='6.200' r='.9'/%3E%3Ccircle cx='6' cy='4.600' r='.9'/%3E%3Ccircle cx='8.100' cy='4.600' r='.9'/%3E%3Ccircle cx='10.100' cy='6.200' r='.9'/%3E%3C/g%3E%3Cg transform='translate(9 0)'%3E%3Cpath d='M7 8c-1.8 0-3 1.6-2.700 2.800.2 1 1.200 1.100 2.700 1.100s2.500-.1 2.700-1.100C10 9.600 8.800 8 7 8z'/%3E%3Ccircle cx='4' cy='6.200' r='.9'/%3E%3Ccircle cx='6' cy='4.600' r='.9'/%3E%3Ccircle cx='8.100' cy='4.600' r='.9'/%3E%3Ccircle cx='10.100' cy='6.200' r='.9'/%3E%3C/g%3E%3C/svg%3E")}
.rmp-badge--bolt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/%3E%3C/svg%3E")}
.rmp-badge--muscle{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 13.1C4.1 11.3 8 10.8 10.5 14.1'/%3E%3Cpath d='M10.5 14.1C10.8 12.4 14.5 11.9 16.1 13.7C16.7 14.3 17 15.2 17.2 16.4'/%3E%3Cpath d='M5.1 20.2C6.4 20.2 7.5 19.9 8.2 19.7C9.8 20.9 12.9 21.7 16 20.9C17.6 20.4 18.6 20.2 20.2 19.9C21.2 19.7 21.5 17.8 21 15.2C20.5 12.6 18.6 10 17.6 7.4C17.3 6.1 17 5.4 16.3 4.8C15.5 4.1 14.5 3 13.9 2.7C13.2 2.5 11.9 3 10.8 4.3C10.3 4.8 10.4 5.9 10.9 6.4C11.6 7.2 12.4 8.1 13.7 8.2C14.5 8.2 15 7.7 14.9 7.3'/%3E%3Cpath d='M15 7.3C15.4 9 15.5 11.1 15.1 13.4'/%3E%3Cpath d='M10.3 17.5C11.9 18.1 13.7 18.8 15.2 18.7'/%3E%3C/svg%3E")}
.rmp-badge--heart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-4.5-8-10.5a4.5 4.5 0 0 1 8-2.5 4.5 4.5 0 0 1 8 2.5C20 15.5 12 20 12 20z'/%3E%3Cpath d='M6.5 12h3l1.5-3 2 6 1.5-3h3'/%3E%3C/svg%3E")}
.rmp-badge--feather{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C11 4 6 9 6 15v1l-2 4'/%3E%3Cpath d='M20 4c0 8-4 12-11 12'/%3E%3Cpath d='M8.5 14h6'/%3E%3C/svg%3E")}
.rmp-badge--scales{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14'/%3E%3Cpath d='M5 7l-3 7a3 3 0 0 0 6 0zM19 7l-3 7a3 3 0 0 0 6 0z'/%3E%3C/svg%3E")}
.rmp-badge--shield{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.500c0 4.500-3 8-7 9.500-4-1.500-7-5-7-9.500V6zM8.800 12l2.200 2.200 4.200-4.400'/%3E%3C/svg%3E")}
.rmp-badge--recover{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.500 12a7.500 7.500 0 1 0 2.200-5.300M4 4v4.500h4.500M12 9v6M9 12h6'/%3E%3C/svg%3E")}
.rmp-badge--drop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3C8 8 6 11 6 14.5a6 6 0 0 0 12 0C18 11 16 8 12 3zM9.5 15a2.6 2.6 0 0 0 2.2 2.4'/%3E%3C/svg%3E")}

/* Block-editor conversion, 28 Aug 2026. The dialogs used to be one hand-written
   Custom HTML block each; they are now core blocks so the content team can edit
   the copy, swap the pack shot and change the CTA without touching markup.
   Three things moved and need re-styling here:
     - the accent colour is a modifier class, not an inline custom property
     - the pack shot is a core Image block, not a `.rmp-ph` div
     - the stat is a group of two paragraphs, not a <p> with two spans        */
.rmp-modal--gonative{--accent:var(--rmp-gonative)}
.rmp-modal--leader{--accent:var(--rmp-leader)}
.rmp-modal--winner{--accent:var(--rmp-winner)}
.rmp-modal--engage{--accent:#0E004D}

/* An un-filled Image block falls back to the wireframe's labelled grey box -
   see rmp_image_placeholder() in functions.php. */
.rmp-modal__shot{margin:0;width:100%}
.rmp-modal__shot img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
.rmp-modal__shot .rmp-ph{width:100%;height:100%;min-height:0;border-radius:6px}

/* Range logo at the top of each pop-up, above the range name - same plate and per-logo heights as the
   cards (.rmp-range__logo). First child of .rmp-modal__pack. The orange Winner cat logo has its own
   background, so no plate. Deliberately NOT a .rmp-modal__shot: that class forces 3/4 and 100% sizing. */
.rmp-modal figure.wp-block-image.rmp-modal__logo{width:fit-content;max-width:100%;margin:0;padding:10px 14px;
	border-radius:var(--rmp-r-sm,8px);background:var(--accent);justify-self:center}
.rmp-modal figure.wp-block-image.rmp-modal__logo--orange{padding:0;background:none;overflow:hidden}
.rmp-modal .rmp-modal__logo img{display:block;width:auto;max-width:none;aspect-ratio:auto;border-radius:0;height:34px}
.rmp-modal .rmp-modal__logo img.wp-image-2398{height:60px}
.rmp-modal .rmp-modal__logo img.wp-image-2560{height:80px}
.rmp-modal .rmp-modal__logo img.wp-image-2565{height:80px}
.rmp-modal .rmp-modal__logo img.wp-image-2564{height:80px;box-sizing:border-box;padding:12px 15px;background:#fff;object-fit:contain}
.rmp-modal figure.wp-block-image.rmp-modal__logo:has(img.wp-image-2560, img.wp-image-2565, img.wp-image-2564){padding:0;background:none;overflow:hidden;border-radius:0}
.rmp-modal .rmp-modal__logo img.wp-image-2485{height:52px}
.rmp-modal .rmp-modal__logo img.wp-image-2401{height:30px}
.rmp-modal .rmp-modal__logo img.wp-image-2499{height:52px;border-radius:var(--rmp-r-sm,8px)}

/* Name-to-pack-shot gap: the pack shot PNGs carry different amounts of transparent space above the bag
   (Go Native dog 17%, others 8-12% of the height), so the same grid gap looked uneven. Each shot is pulled
   up by its own offset so the visible gap is 30px in every pop-up (270px-wide column: 360px tall box).
   A replacement pack shot needs its own rule here. Cleared in the 1100px block, where the name sits beside the shot. */
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-484){margin-top:-48px}
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-593){margin-top:-21px}
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-614){margin-top:-21px}
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-634){margin-top:-21px}
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-760){margin-top:-16px;margin-bottom:-34px}
.rmp-modal__pack figure.rmp-modal__shot:has(img.wp-image-752){margin-top:-27px}

/* Badges are a core List block; cancel the list chrome core adds. */
.rmp-modal .rmp-badges{margin:0;padding:0;list-style:none}
.rmp-modal .rmp-badges li{margin:0}

/* Stat: two paragraphs inside a group. `.rmp-page p{margin:0 0 1.1em}` is
   (0,1,1), so the reset needs (0,2,1) and the label's gap needs (0,3,1). */
.rmp-modal .rmp-stat p{margin:0}
.rmp-modal .rmp-stat p.rmp-stat__label{margin-top:6px}

/* Footer CTA is a core Button block using the shared `.rmp-ctas` shim, with the
   range's accent applied through the `rmp-modal` button style. */
.rmp-modal__foot.wp-block-buttons{justify-content:center}
.rmp-modal .rmp-ctas .is-style-rmp-modal .wp-block-button__link{background:var(--accent);color:#fff;border-color:transparent}
.rmp-modal .rmp-ctas .is-style-rmp-modal .wp-block-button__link:hover{background:var(--rmp-ink);color:#fff}

.rmp-modal__cols{margin-top:var(--rmp-s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--rmp-s3)}
.rmp-panel{background:var(--rmp-soft);border-radius:var(--rmp-radius);padding:var(--rmp-s4)}
.rmp-panel h4{font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rmp-ink);
	margin-bottom:var(--rmp-s2)}
.rmp-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rmp-panel li{display:flex;gap:10px;font-size:var(--rmp-copy);line-height:1.5}
.rmp-panel li:before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--accent)}
.rmp-modal__foot{margin-top:var(--rmp-s4);display:flex;justify-content:center}
.rmp-modal__foot .rmp-cta{background:var(--accent);color:#fff}
.rmp-modal__foot .rmp-cta:hover{background:var(--rmp-ink)}

/* --------------------------------------------------------------------------
   Carousel (team, testimonials, sponsorship gallery)
   CSS scroll-snap, so it works with keyboard and without JS.
   -------------------------------------------------------------------------- */
.rmp-carousel{position:relative}
.rmp-carousel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--rmp-s3);
	margin-bottom:var(--rmp-s5);flex-wrap:wrap}
.rmp-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--rmp-s3))/3);
	gap:var(--rmp-s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
	padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.rmp-carousel__track>*{scroll-snap-align:start}
/* No scrollbar: the prev/next buttons are the control. Swipe still works. */
.rmp-carousel__track::-webkit-scrollbar{height:0;width:0;display:none}
.rmp-carousel--2 .rmp-carousel__track{grid-auto-columns:calc((100% - var(--rmp-s3))/2)}
/* Cards across the band. The modifiers are desktop-only: below 1100px the
   responsive rules further down own the track width. */
@media (min-width:1101px){
	.rmp-carousel--4 .rmp-carousel__track{grid-auto-columns:calc((100% - 3*var(--rmp-s3))/4)}
	.rmp-carousel--5 .rmp-carousel__track{grid-auto-columns:calc((100% - 3*var(--rmp-s3))/4)}
}
@media (min-width:1400px){
	.rmp-carousel--5 .rmp-carousel__track{grid-auto-columns:calc((100% - 4*var(--rmp-s3))/5)}
}
.rmp-carousel__nav{display:flex;gap:10px}
.rmp-cbtn{width:52px;height:52px;border-radius:50%;border:2px solid var(--rmp-red);background:#fff;
	color:var(--rmp-red);cursor:pointer;display:grid;place-items:center;transition:all .18s ease}
.rmp-cbtn:hover{background:var(--rmp-red);color:#fff}
.rmp-cbtn:disabled{opacity:.35;cursor:default;background:#fff;color:var(--rmp-red)}
.rmp-cbtn svg{width:22px;height:22px}
.rmp-sec--red .rmp-cbtn{border-color:#fff;background:transparent;color:#fff}
.rmp-sec--red .rmp-cbtn:hover{background:#fff;color:var(--rmp-red)}

/* Team member */
.rmp-person{display:flex;flex-direction:column;gap:var(--rmp-s2)}
.rmp-person .rmp-ph{aspect-ratio:1/1;min-height:0}
.rmp-person__name{font-size:1.1875rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.rmp-person__role{font-size:.9375rem;font-weight:500;color:#fff;opacity:.9}

/* Testimonial */
.rmp-quote{background:#fff;border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);
	padding:var(--rmp-s4);display:flex;flex-direction:column;gap:var(--rmp-s2);height:100%}
.rmp-quote__name{font-size:1.125rem;font-weight:700;color:var(--rmp-ink)}
.rmp-quote__meta{font-size:.9375rem;color:var(--rmp-muted)}
.rmp-quote blockquote{margin:0;font-size:1rem;line-height:1.7}.rmp-quote blockquote,.rmp-quote blockquote p,.rmp-sec--red .rmp-quote p{color:var(--rmp-ink)}
.rmp-quote blockquote b{font-weight:700}
.rmp-quote__media{margin-top:auto;padding-top:var(--rmp-s2);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rmp-quote__media .rmp-ph{aspect-ratio:1/1;min-height:0;border-radius:6px}
/* Testimonial product shot tile (page 14), 30 Sep 2026 */
.rmp-quote__pack{display:block;aspect-ratio:1/1;border-radius:6px;background:var(--rmp-soft);overflow:hidden;transition:box-shadow .2s}
.rmp-quote__pack:hover,.rmp-quote__pack:focus-visible{box-shadow:0 0 0 2px var(--rmp-line)}
.rmp-quote__pack img.rmp-quote__packimg{display:block;width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box;transition:transform .2s}
.rmp-quote__pack:hover img.rmp-quote__packimg{transform:scale(1.04)}
/* Testimonial cards v2 (page 14, Ava 30 Sep 2026): range-colour top edge,
   stars, quote mark, initials badge, centred product panel. Accent comes from
   the .rmp-quote--<range> modifier. */
.rmp-quote{--q-accent:var(--rmp-red);position:relative;overflow:hidden;gap:16px;padding:28px 28px 24px;
	border:0;border-top:5px solid var(--q-accent);border-radius:12px;box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.rmp-quote--winner{--q-accent:var(--rmp-winner)}
.rmp-quote--leader{--q-accent:var(--rmp-leader)}
.rmp-quote--gonative{--q-accent:var(--rmp-gonative)}
.rmp-quote--engage{--q-accent:var(--rmp-engage)}
.rmp-quote:before{content:"\201C";position:absolute;top:2px;right:22px;font:700 110px/1 Georgia,"Times New Roman",serif;
	color:var(--q-accent);opacity:.12;pointer-events:none}
.rmp-quote__stars{display:block;color:#F5A623;font-size:1.125rem;letter-spacing:2px;line-height:1}
body .rmp-page .rmp-quote blockquote p{font-weight:500;line-height:1.6;color:var(--rmp-ink)}
.rmp-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rmp-line)}
.rmp-quote__av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
	background:var(--q-accent);color:#fff;font-size:.9375rem;font-weight:800;line-height:1}
.rmp-quote__who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
body .rmp-page .rmp-quote__meta{font-size:.8125rem;color:var(--rmp-muted)}
.rmp-quote__product{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 16px 14px;
	border-radius:10px;background:var(--rmp-soft);text-align:center;text-decoration:none;transition:box-shadow .2s}
.rmp-quote__product:hover,.rmp-quote__product:focus-visible{box-shadow:inset 0 0 0 2px var(--q-accent)}
.rmp-quote__product img.rmp-quote__packimg{display:block;width:150px;height:150px;object-fit:contain;transition:transform .2s}
.rmp-quote__product:hover img.rmp-quote__packimg{transform:scale(1.05)}
.rmp-quote__prodname{margin-top:4px;color:var(--q-accent);font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.rmp-quote__prodcta{color:var(--rmp-ink);font-size:.8125rem;font-weight:600}
.rmp-quote__product:hover .rmp-quote__prodcta{text-decoration:underline}
@media (max-width:600px){
	.rmp-quote{padding:22px 20px 20px}
	.rmp-quote__product img.rmp-quote__packimg{width:120px;height:120px}
}
/* Keep the quote copy clear of the decorative quote mark (Ava, 30 Sep 2026) */
.rmp-quote{padding-top:68px}
.rmp-quote:before{top:6px}
@media (max-width:600px){.rmp-quote{padding-top:60px}.rmp-quote:before{font-size:96px;top:4px;right:16px}}
.rmp-tag--gonative{color:var(--rmp-gonative)}
.rmp-tag--leader{color:var(--rmp-leader)}
.rmp-tag--winner{color:var(--rmp-winner)}
.rmp-tag--engage{color:var(--rmp-engage)}

/* Pull quote band */
.rmp-pull{background:var(--rmp-soft);padding:var(--rmp-s6) 0}
/* Quote mark and quote sit on one line, centred as a pair: a row that is
   centred rather than stretched, so the group stays together in the middle of
   the band. Was briefly stacked (mark above the quote). */
.rmp-pull__inner{max-width:var(--rmp-shell);margin:0 auto;padding:0 24px;display:flex;justify-content:center;align-items:flex-start;gap:var(--rmp-s1)}
/* Decorative quote mark tracks the H1 token so it stays in proportion to the
   quote text: 2.86x the quote size, the ratio the original design had (97px
   mark against 34px text). The old scale(1.35) transform is gone - a transform
   does not change the layout box, so the scaled glyph sat off-centre. Size is
   now set directly instead. */
.rmp-pull__mark{font-size:calc(var(--rmp-h1) * 2.86);line-height:.8;color:var(--rmp-red);font-weight:700;flex:0 0 auto}
/* Pull quote takes the H1 size. Was the H2 token, and before that
   clamp(1.375rem,1rem + 1.6vw,2.125rem) = 22>34px. */
.rmp-page .rmp-pull p{font-size:var(--rmp-h1);font-weight:700;line-height:1.3;color:var(--rmp-ink);margin:0;text-align:center;text-wrap:balance}
/* Hold the quote on a single line once there is room for it. The threshold is
   1240px, not 1120px, because the quote mark now shares the line and eats
   ~105px of it. Deliberately NOT applied below that - white-space:nowrap on a
   narrow screen does not shrink the text, it pushes it out of the band and
   gives the whole page a sideways scrollbar. Under that width it wraps,
   balanced across even lines. */
@media (min-width:1240px){
	.rmp-page .rmp-pull p{white-space:nowrap}
}
/* Phones: mark above the quote. Side by side there is not enough room left for
   the text to read as anything but a narrow column. */
@media (max-width:640px){
	.rmp-pull__inner{flex-direction:column;align-items:center}
}

/* Gallery slide */
.rmp-slide{display:flex;flex-direction:column;gap:var(--rmp-s2);text-align:center}
.rmp-slide .rmp-ph{aspect-ratio:4/3;min-height:0}
.rmp-slide__title{font-size:1.0625rem;font-weight:700;color:var(--rmp-ink)}
.rmp-slide__meta{font-size:.9375rem;color:var(--rmp-muted)}

/* Block-editor conversion of the sponsorship carousel, 22 Sep 2026. The slide
   photo is now a core Image block so Marketing can upload it with the normal
   media picker. Core wraps the <img> in a <figure>, and an un-filled Image
   block renders as the labelled grey box instead - see rmp_image_placeholder()
   in functions.php. Both states are pinned to the same 4/3 box, so choosing a
   photo never changes the height of the row. */
.rmp-slide figure.wp-block-image{margin:0;width:100%}
.rmp-slide__shot .rmp-ph{width:100%}
.rmp-slide__shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;
	object-fit:cover;object-position:center;border-radius:var(--rmp-radius)}
/* The caption is a plain wrapper: the title/meta gap is the paragraph margin,
   so it must NOT become a flex child of .rmp-slide or it would pick up the
   16px column gap on top of that margin. */
.rmp-slide__cap{text-align:center}
.rmp-slide__cap .rmp-slide__meta{margin-bottom:0}

/* --------------------------------------------------------------------------
   Filter bar (dog / cat food listing)
   -------------------------------------------------------------------------- */
.rmp-filter{background:var(--rmp-red);color:#fff;padding:var(--rmp-s4) 0}
.rmp-filter__inner{max-width:var(--rmp-shell);margin:0 auto;padding:0 24px}
.rmp-filter__title{font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:#fff;margin-bottom:var(--rmp-s3)}
.rmp-filter__row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:var(--rmp-s2);align-items:end}
.rmp-field{display:flex;flex-direction:column;gap:8px}
.rmp-field>label{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.rmp-select,.rmp-input,.rmp-textarea{width:100%;min-height:54px;border:2px solid transparent;border-radius:4px;
	background:#fff;color:var(--rmp-ink);font:700 1rem/1.3 var(--rmp-font);padding:12px 16px}
.rmp-select{appearance:none;padding-right:44px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='%234D4B4B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.rmp-select:focus,.rmp-input:focus,.rmp-textarea:focus{outline:none;border-color:var(--rmp-ink)}
.rmp-filter__reset{background:transparent;border:2px solid #fff;color:#fff}
.rmp-filter__reset:hover{background:#fff;color:var(--rmp-red)}
.rmp-filter__count{margin-top:var(--rmp-s3);font-size:.9375rem;font-weight:500;color:#fff;opacity:.92}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */
/* Card size, revised 1 Sep 2026. The grid was a hard repeat(3,1fr), which on a
   1320px shell made every pack shot 403x403 and the 45-product listing 9,494px
   tall. It is now density-based: as many ~230px columns as fit, so the desktop
   listing runs 4-up (294px cards) and steps down on its own instead of at two
   hand-picked breakpoints.
   The media box is also locked to a square. It used to take its height from the
   image, so a portrait 3:4 pack shot (the PDP crop) made that one card 537px
   tall against its neighbours' 403px and knocked the row out of line. */
.rmp-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:var(--rmp-s5) var(--rmp-s4)}
.rmp-product{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--rmp-s2)}
.rmp-product[hidden]{display:none}
.rmp-product__media{width:100%;display:grid;place-items:center;aspect-ratio:1/1;min-height:0;
	background:#fff;border-radius:var(--rmp-radius);transition:transform .2s ease}
.rmp-product:hover .rmp-product__media{transform:translateY(-4px)}
/* Pack shot is a link to the PDP - fill the tile so the whole image is clickable. */
.rmp-product__medialink{display:grid;place-items:center;width:100%;height:100%;min-height:0;
	border-radius:inherit;overflow:hidden;text-decoration:none;cursor:pointer}
.rmp-product__media img{max-width:100%;max-height:100%}
.rmp-product__media .rmp-ph{width:100%;height:100%;min-height:0}
.rmp-product__range{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rmp-product__name{font-size:1.0625rem;font-weight:500;line-height:1.45;color:var(--rmp-ink);max-width:26ch}
.rmp-product .rmp-cta{margin-top:auto;border-radius:999px;min-height:48px}
.rmp-empty{grid-column:1/-1;text-align:center;padding:var(--rmp-s6) 0;color:var(--rmp-muted);font-size:var(--rmp-copy)}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.rmp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rmp-s3)}
.rmp-statcard{border:2px solid var(--rmp-red);border-radius:var(--rmp-radius);background:#fff;
	padding:var(--rmp-s4) var(--rmp-s3);text-align:center;display:flex;flex-direction:column;
	align-items:center;gap:var(--rmp-s2)}
.rmp-statcard svg{width:76px;height:76px;color:var(--rmp-ink)}
.rmp-statcard__num{font-size:2.25rem;font-weight:700;line-height:1;color:var(--rmp-red)}
.rmp-statcard__label{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rmp-ink)}
/* The number and label are core paragraph blocks so they stay editable;
   the card is a flex column, so kill the default block margins. */
.rmp-statcard>p{margin:0}

/* --------------------------------------------------------------------------
   Charity / bulleted feature list
   -------------------------------------------------------------------------- */
.rmp-ticks{list-style:none;margin:var(--rmp-s3) 0 0;padding:0;display:grid;gap:12px}
.rmp-ticks li{display:flex;gap:12px;font-size:var(--rmp-copy);line-height:1.55}
.rmp-ticks li:before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:3px;border-radius:50%;
	background:var(--rmp-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.rmp-form{background:var(--rmp-soft);border-radius:var(--rmp-radius);padding:clamp(24px,4vw,56px)}
.rmp-form__intro{font-size:var(--rmp-copy);color:var(--rmp-ink);font-weight:500;margin-bottom:var(--rmp-s4)}
.rmp-fieldset{border:0;padding:0;margin:0 0 var(--rmp-s5)}
.rmp-fieldset>legend{font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--rmp-red);padding:0;margin-bottom:var(--rmp-s3);
	border-bottom:2px solid var(--rmp-red);padding-bottom:10px;width:100%}
.rmp-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--rmp-s3)}
.rmp-fields--3{grid-template-columns:repeat(3,1fr)}
.rmp-field--full{grid-column:1/-1}
.rmp-form .rmp-field>label{color:var(--rmp-ink);font-size:.9375rem;font-weight:700;letter-spacing:0;text-transform:none}
.rmp-form .rmp-input,.rmp-form .rmp-select,.rmp-form .rmp-textarea{border-color:#DCDEE1;font-weight:400}
.rmp-form .rmp-input:focus,.rmp-form .rmp-select:focus,.rmp-form .rmp-textarea:focus{border-color:var(--rmp-red)}
.rmp-textarea{min-height:132px;resize:vertical;line-height:1.6}
.rmp-req{color:var(--rmp-red);margin-left:2px}
.rmp-hint{font-size:.8125rem;color:var(--rmp-muted);line-height:1.5}
.rmp-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.rmp-choice{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #DCDEE1;border-radius:4px;
	padding:14px 16px;cursor:pointer;font-weight:700;color:var(--rmp-ink);transition:border-color .16s ease}
.rmp-choice:hover{border-color:var(--rmp-red)}
.rmp-choice input{width:20px;height:20px;accent-color:var(--rmp-red);cursor:pointer;margin:0}
.rmp-choice:has(input:checked){border-color:var(--rmp-red);background:var(--rmp-red-tint)}
.rmp-form__submit{display:flex;justify-content:center;margin-top:var(--rmp-s5)}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.rmp-band{text-align:center}
.rmp-band .rmp-lede{margin:var(--rmp-s3) auto 0;max-width:64ch}
.rmp-band .rmp-ctas{margin-top:var(--rmp-s4);justify-content:center}
/* A hand-added CTA row sitting under a content block mid-page needs the same
   breathing room the band variant gets; `.rmp-ctas` itself carries none. */
.rmp-ti+.rmp-ctas,.rmp-grid+.rmp-ctas,.rmp-timeline+.rmp-ctas,.rmp-stats+.rmp-ctas,.rmp-head+.rmp-ctas{margin-top:var(--rmp-s4)}

/* --------------------------------------------------------------------------
   Timeline (About > Our Ranges heritage)
   -------------------------------------------------------------------------- */
/* --tl-gap is the space between steps AND the length the connector has to
   bridge, so the two can never drift apart. */
.rmp-timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;
	--tl-gap:var(--rmp-s5);gap:var(--tl-gap)}
/* The connector is drawn per step, not as one rule down the whole list.
   It used to be a single `.rmp-timeline:before` inset top:12px/bottom:12px
   from the list box - but the list box ends below the last step's *text*, and
   the text is taller than the badge, so the line ran on past the final badge
   with nothing beneath it to reach.

   Each step now draws its own segment from its badge centre (top:24px, half of
   the 48px badge) down to the next badge centre, which is this step's bottom
   edge plus the row gap plus another 24px. The segment is suppressed on the
   last step, so the line always stops dead on the final badge no matter how
   many steps there are or how long their copy runs. The top of each segment is
   hidden behind the opaque badge above it.

   Scoped :not(--row) because the horizontal cards share the .rmp-tl classes
   and are deliberately unconnected. */
.rmp-timeline:not(.rmp-timeline--row):before{display:none}
.rmp-timeline:not(.rmp-timeline--row) .rmp-tl:before{content:"";position:absolute;
	left:23px;width:2px;top:24px;bottom:calc(-1 * (var(--tl-gap) + 24px));
	background:var(--rmp-line)}
.rmp-timeline:not(.rmp-timeline--row) .rmp-tl:last-child:before{display:none}
/* In the block editor the Group holds a block appender after the last step, so
   :last-child stops matching and the line would run past the final badge in
   the canvas only. :has lets us ask "no .rmp-tl after this one" instead. */
@supports selector(:has(~ *)){
	.rmp-timeline:not(.rmp-timeline--row) .rmp-tl:not(:has(~ .rmp-tl)):before{display:none}
}
.rmp-tl{display:grid;grid-template-columns:48px 1fr;gap:var(--rmp-s3);align-items:start;position:relative}
.rmp-tl__dot{width:48px;height:48px;border-radius:50%;background:var(--accent,var(--rmp-red));color:#fff;
	display:grid;place-items:center;font-size:.75rem;font-weight:700;z-index:1;flex:0 0 auto}
.rmp-tl--gonative{--accent:var(--rmp-gonative)}
.rmp-tl--leader{--accent:var(--rmp-leader)}
.rmp-tl--winner{--accent:var(--rmp-winner)}
.rmp-tl--engage{--accent:var(--rmp-engage)}
/* Winner cat (2 Nov 2026, Ava): Winner is two species and the cat half is
   orange (#f79040) where the dog half stays navy. The species variant is a
   second class beside the range class (--winner-cat next to --winner), so it
   has to come after the range rules above. White on #f79040 is only 2.3:1, so
   anything filled with the orange takes the dark ink instead. */
.rmp-rl--winner-cat{--accent:var(--rmp-winner-cat)}
.rmp-range--winner-cat{--accent:var(--rmp-winner-cat);--rmp-focus:var(--rmp-winner-cat-deep)}
.rmp-range--winner-cat .rmp-range__cta{color:var(--rmp-winner-cat-ink)}
.rmp-range--winner-cat .rmp-range__cta:hover{color:#fff}
.rmp-modal--winner-cat{--accent:var(--rmp-winner-cat)}
.rmp-modal--winner-cat .rmp-badge,.rmp-modal--winner-cat .rmp-stat{color:var(--rmp-winner-cat-ink)}
.rmp-modal--winner-cat .rmp-ctas .is-style-rmp-modal .wp-block-button__link,.rmp-modal--winner-cat .rmp-modal__foot .rmp-cta{color:var(--rmp-winner-cat-ink)}
.rmp-modal--winner-cat .rmp-ctas .is-style-rmp-modal .wp-block-button__link:hover,.rmp-modal--winner-cat .rmp-modal__foot .rmp-cta:hover{color:#fff}
.rmp-quote--winner-cat{--q-accent:var(--rmp-winner-cat)}
.rmp-quote--winner-cat .rmp-quote__av{color:var(--rmp-winner-cat-ink)}
.rmp-tag--winner-cat{color:var(--rmp-winner-cat)}
.rmp-tl__name{font-size:1.375rem;font-weight:700;text-transform:uppercase;color:var(--accent,var(--rmp-red))}
/* The step number is a core paragraph block so the text stays editable. */
p.rmp-tl__dot{margin:0}
.rmp-tl__body{padding-top:4px}
.rmp-tl__body p{margin-top:10px}

/* Horizontal variant: `.rmp-timeline--row` lays the steps out left to right,
   each on its own card with the numbered badge straddling the top edge.

   There is deliberately no connecting rule between the cards. The original
   single rule across the row was inset by left/right:calc(12.5% - 12px) - half
   a column of a FOUR-up grid - so once this section went to three across it
   overshot the outer badges by 54px each side. Marketing's call was to drop
   the line rather than correct it; the numbered badges carry the sequence on
   their own. Nothing now draws in the column gaps, so adding or removing a
   step needs no geometry redone.

   `.rmp-timeline` without --row is the vertical variant used on Our Labs &
   Manufacturing and shares the .rmp-tl classes, so every rule below is scoped
   to --row and that page is unaffected. */
.rmp-timeline--row{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--rmp-s4);
	row-gap:var(--rmp-s6);padding-top:var(--rmp-s3)}
.rmp-timeline--row:before{display:none}
/* Even padding all round, so the white space above the badge matches the space
   below the copy. The badge used to be pulled up out of the card with
   margin-top:-42px, from when the connector line ran along the top edge and
   the badge had to straddle it; with the line gone that only left a 6px sliver
   above the badge, so the pull-up and the 48px top padding that compensated
   for it have both gone. */
.rmp-timeline--row .rmp-tl{grid-template-columns:1fr;justify-items:center;text-align:center;
	gap:var(--rmp-s2);position:relative;background:#fff;border-radius:var(--rmp-radius);
	outline:1px solid var(--rmp-line);outline-offset:-1px;padding:var(--rmp-s3)}
.rmp-timeline--row .rmp-tl__dot{width:44px;height:44px;font-size:var(--rmp-copy)}
.rmp-timeline--row .rmp-tl__body{padding-top:0}
/* Titles stay on the type scale at H3, as before, but move from red to deep
   ink: the badge already carries the brand red, and two reds a few pixels
   apart fight each other.

   min-height is two lines of the title's own line-height, so paragraphs across
   a row start at the same height whether the title above them wraps or not.
   This replaces an earlier attempt at the same thing with `subgrid`, which is
   the wrong tool twice over: the body wrapper holds two children so both
   landed in one track and the title sat on top of its paragraph, and in a
   subgridded axis the gutters are taken from the parent grid, which would have
   swapped the card's 16px row-gap for the row's 64px one. */
.rmp-timeline--row .rmp-tl__name{font-size:var(--rmp-h3);color:var(--rmp-ink-deep);
	line-height:1.2;min-height:2.4em;margin:var(--rmp-s2) 0 var(--rmp-s1)}
/* Neutralise Twenty Twenty-Five's "Annotation" block style where it has been
   applied to a step title from the editor's block-style switcher. It is
   width:fit-content with a 1px currentColor border and a 16px radius, which is
   why it drew three outlines of three different widths. Scoped to
   .rmp-tl__name, so deliberate use of Annotation elsewhere is untouched and no
   class has to be stripped out of the page content. */
.rmp-timeline--row .rmp-tl__name.is-style-text-annotation{border:0;padding:0;width:auto;
	border-radius:0}
/* The section carries has-small-font-size (13px); an explicit size on the
   paragraph lifts the copy back to the body token. 34ch holds the measure to
   something readable when the column is wide. */
.rmp-timeline--row .rmp-tl__body p:not(.rmp-tl__name){font-size:var(--rmp-copy);
	line-height:1.6;color:var(--rmp-body);margin:0;max-width:34ch}
@media (max-width:900px){
	.rmp-timeline--row{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);row-gap:var(--rmp-s6)}
	.rmp-timeline--row .rmp-tl__body p:not(.rmp-tl__name){max-width:none}
}
@media (max-width:560px){
	/* One card per row: there is no neighbour left to line a paragraph up
	   with, so the reserved second title line would just be a gap. */
	.rmp-timeline--row{grid-template-columns:1fr}
	.rmp-timeline--row .rmp-tl__name{min-height:0}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
	.rmp-ranges,.rmp-grid--4,.rmp-stats{grid-template-columns:repeat(2,1fr)}
	.rmp-feats{grid-template-columns:repeat(3,1fr);row-gap:var(--rmp-s5)}
	.rmp-carousel__track{grid-auto-columns:calc((100% - var(--rmp-s3))/2)}
	.rmp-modal__top{grid-template-columns:1fr}
	.rmp-modal__pack{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center}
	.rmp-modal__pack .rmp-ph,
	.rmp-modal__pack .rmp-modal__shot{max-width:220px;margin-bottom:0}
	.rmp-modal__hl{grid-template-columns:1fr}
	/* The range name now sits ABOVE the pack shot in the markup (28 Aug 2026).
	   Under 1100px the pack becomes a single image|name row where "above" has
	   no meaning, so pin both back to their original cells and keep the narrow
	   layout exactly as it was. */
	.rmp-modal__pack .rmp-ph,
	.rmp-modal__pack .rmp-modal__shot{grid-area:2/1}
	.rmp-modal__pack .rmp-modal__name{grid-area:2/2}
	.rmp-modal__pack figure.rmp-modal__shot:has(img[class*="wp-image-"]){margin-top:0;margin-bottom:0}
	.rmp-modal .rmp-modal__pack figure.wp-block-image.rmp-modal__logo{grid-area:1/1/2/3;justify-self:start}
	/* A single centred CTA should not stretch full width the way a stacked
	   pair of page CTAs does - see the 640px rule in block-shim.css. */
	.rmp-modal__foot > .wp-block-button,
	.rmp-modal__foot .wp-block-button__link{width:auto}
}
@media (max-width:900px){
	/* .rmp-sec's padding is NOT restated here: the rhythm is one value at
	   every width now. Reinstate a smaller --rmp-sec-pad in this query if
	   phones ever need to be tighter than desktop. */
	/* .rmp-products is deliberately NOT in this list any more - it auto-fills,
	   so it drops to 3 then 2 columns on its own. Forcing 1fr here made every
	   card 720px wide on an iPad. */
	.rmp-split,.rmp-grid--2,.rmp-grid--3,.rmp-fields,.rmp-fields--3{grid-template-columns:1fr}
	.rmp-split--flip .rmp-split__media{order:0}
	.rmp-filter__row{grid-template-columns:1fr}
	.rmp-hero__inner{padding:32px 24px;min-height:var(--rmp-hero-h-sm)}
	/* One banner height sitewide (Ava, 30 Sep 2026): all banner variables point at 400px here. Text is centred, so 32px is only the minimum gap (was 88px, which let long copy on 320px phones grow a banner). */
	.rmp-hero--banner .rmp-hero__inner,
	.rmp-hero--video .rmp-hero__inner{min-height:var(--rmp-hero-h-banner-sm)}
	.rmp-modal__cols{grid-template-columns:1fr}
	.rmp-choices{grid-template-columns:repeat(2,1fr)}
	/* .rmp-pull__inner used to be switched to a column here - it is stacked and
	   centred at every width now, so the override is gone. */
}
@media (max-width:640px){
	.rmp-ranges,.rmp-grid--4,.rmp-stats,.rmp-feats{grid-template-columns:1fr}
	.rmp-carousel__track{grid-auto-columns:86%}
	.rmp-carousel__head{flex-direction:column;align-items:flex-start}
	.rmp-quote__media{grid-template-columns:1fr 1fr}
	.rmp-cta{width:100%}
	.rmp-ctas{flex-direction:column}
	.rmp-carousel__nav{flex-direction:row}
	.rmp-carousel__nav .rmp-cbtn{width:46px;height:46px}
}

@media (prefers-reduced-motion:reduce){
	.rmp-page *,.rmp-modal *{transition:none!important;animation:none!important}
	.rmp-carousel__track{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   Additions
   -------------------------------------------------------------------------- */

/* Anchored sections clear the sticky header */
.rmp-page [id]{scroll-margin-top:140px}

/* A placeholder used as the hero's background image fills the plate */
.rmp-hero__media .rmp-ph{height:100%;min-height:0;border-radius:0}
.rmp-hero__media .rmp-ph:before{inset:18px}

/* Philosophy pillars: outlined icon disc on the red band */
.rmp-pillar__icon{width:96px;height:96px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
	border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;
	transition:background .2s ease,transform .2s ease}
.rmp-pillar:hover .rmp-pillar__icon{background:rgba(255,255,255,.22);transform:translateY(-4px)}
.rmp-pillar__icon svg{width:48px;height:48px}

/* Three-up range grid (cat ranges) */
.rmp-ranges--3{grid-template-columns:repeat(3,1fr)}@media (min-width:1101px){.rmp-ranges--3:has(>.rmp-range:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc((200% - var(--rmp-s3))/3);margin-inline:auto}}

/* Ticks and stat cards sitting on the red band */
.rmp-sec--red .rmp-ticks li:before{background-color:#fff;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23E1002B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rmp-sec--red .rmp-statcard{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.rmp-sec--red .rmp-statcard__num,.rmp-sec--red .rmp-statcard__label{color:#fff}
.rmp-statcard__num--text{font-size:3rem;line-height:1}

/* Stats band with icons (`rmp-stats--icons`, About page): raised white cards, red top edge, round icon.
   The icon is a CSS mask-free background set per card by a modifier class (--rmp-ic), so the blocks stay editable. */
body .rmp-page .rmp-stats--icons{gap:24px}
body .rmp-page .rmp-stats--icons .rmp-statcard{background:#fff;border:0;border-top:5px solid var(--rmp-red);border-radius:14px;box-shadow:0 14px 34px rgba(20,22,26,.12);padding:28px 16px 32px;gap:10px}
body .rmp-page .rmp-stats--icons .rmp-statcard::before{content:"";flex:none;order:3;width:56px;height:56px;margin-top:8px;border-radius:50%;background:var(--rmp-ic) center/28px 28px no-repeat,rgba(225,0,43,.1)}
body .rmp-page .rmp-stats--icons .rmp-statcard__num{font-size:2.25rem;font-weight:800;line-height:1;letter-spacing:-.02em}
body .rmp-page .rmp-stats--icons .rmp-statcard__label{font-size:.8125rem;letter-spacing:.14em}
.rmp-statcard--year{--rmp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V4M12 9c-3 0-4-2-4-4 3 0 4 2 4 4zM12 9c3 0 4-2 4-4-3 0-4 2-4 4zM12 15c-3 0-4-2-4-4 3 0 4 2 4 4zM12 15c3 0 4-2 4-4-3 0-4 2-4 4zM12 21c-3 0-4-2-4-4 3 0 4 2 4 4zM12 21c3 0 4-2 4-4-3 0-4 2-4 4z'/%3E%3C/svg%3E")}
.rmp-statcard--gen{--rmp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M17 14c2.8 0 5 2 5 5'/%3E%3C/svg%3E")}
.rmp-statcard--world{--rmp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E")}
.rmp-statcard--div{--rmp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1002B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5zM3 12.5l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E")}
@media (max-width:640px){
	body .rmp-page .rmp-stats--icons .rmp-statcard__num{font-size:2rem}
}

/* Small print under a stats band */
.rmp-fineprint{margin-top:var(--rmp-s4);font-size:.8125rem;line-height:1.6;opacity:.82}

/* Build note inside a form - remove once the form handler is wired up */
.rmp-form__note{margin-top:var(--rmp-s4);padding:var(--rmp-s3);background:#fff;border-left:4px solid var(--rmp-red);
	border-radius:0 4px 4px 0;font-size:.875rem;line-height:1.6;color:var(--rmp-muted)}

/* Consent checkbox row */
.rmp-consent{margin-top:var(--rmp-s3)}
.rmp-consent .rmp-choice{font-weight:400}

/* Numbered process timeline */
.rmp-tl--num .rmp-tl__dot{font-size:1.125rem}

@media (max-width:1100px){
	.rmp-ranges--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
	.rmp-ranges--3{grid-template-columns:1fr}
	.rmp-pillar__icon{width:80px;height:80px}
	.rmp-pillar__icon svg{width:40px;height:40px}
}

/* --------------------------------------------------------------------------
   Go Native product detail pages
   -------------------------------------------------------------------------- */
.rmp-product-hero{background:#fff;padding:var(--rmp-s7) 0}
.rmp-product-hero__grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,112px);align-items:center;max-width:1080px;margin-inline:auto}
.rmp-product-hero__media{max-width:360px;width:100%;justify-self:center}
.rmp-product-hero__media .rmp-ph{background:var(--rmp-soft);border-radius:12px}
.rmp-product-kicker{font-size:.8125rem!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rmp-gonative);margin-bottom:var(--rmp-s2)!important}
.rmp-product-hero__copy .rmp-h1{color:var(--rmp-gonative)}
.rmp-product-hero__tagline{font-size:1.25rem;line-height:1.52;font-weight:700;color:var(--rmp-ink);margin-top:var(--rmp-s3)!important}
.rmp-product-hero__intro{font-size:var(--rmp-copy);line-height:1.65;color:var(--rmp-muted);margin-top:var(--rmp-s3)!important}
.rmp-product-hero__copy .rmp-ctas{margin-top:var(--rmp-s4)}
.rmp-product-nav{position:sticky;top:0;z-index:5;background:var(--rmp-gonative);box-shadow:0 3px 12px rgba(20,22,28,.16)}
.rmp-product-nav .rmp-wrap{min-height:56px;display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,48px);overflow-x:auto}
.rmp-product-nav a{color:#fff;text-decoration:none;white-space:nowrap;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:19px 0 16px;border-bottom:3px solid transparent}
.rmp-product-nav a:hover,.rmp-product-nav a:focus-visible{border-bottom-color:#fff}
.rmp-product-benefits{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rmp-s3);padding:0}
.rmp-product-benefits li{background:#fff;border-radius:var(--rmp-radius);padding:var(--rmp-s3);font-size:var(--rmp-copy);font-weight:700;line-height:1.5;color:var(--rmp-ink);box-shadow:0 8px 25px -22px rgba(16,19,26,.5)}
.rmp-product-benefits li:before{content:'✓';display:inline-grid;place-items:center;width:28px;height:28px;margin:0 10px 7px 0;border-radius:50%;background:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-product-suit{display:grid;grid-template-columns:1fr 1fr;gap:var(--rmp-s6);align-items:center;max-width:1080px;margin-inline:auto}
.rmp-product-suit ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.rmp-product-suit li{display:flex;gap:10px;font-size:var(--rmp-copy);line-height:1.45}
.rmp-product-suit li:before{content:'✓';font-weight:700}
.rmp-product-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--rmp-s4);max-width:980px;margin-inline:auto}
.rmp-product-info article{border:1px solid var(--rmp-line);border-top:5px solid var(--rmp-gonative);border-radius:var(--rmp-radius);padding:var(--rmp-s4);background:#fff}
.rmp-product-info h3{font-size:1.1875rem;color:var(--rmp-ink);margin-bottom:var(--rmp-s2)}
.rmp-product-info p{font-size:var(--rmp-copy);color:var(--rmp-muted)}
.rmp-feeding-placeholder{border:2px dashed var(--rmp-grey);border-radius:var(--rmp-radius);padding:var(--rmp-s5);text-align:center;background:#fff}
.rmp-feeding-placeholder span{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rmp-gonative);margin-bottom:var(--rmp-s2)}
.rmp-feeding-placeholder p{font-size:var(--rmp-copy);color:var(--rmp-muted)}
@media (max-width:900px){.rmp-product-hero__grid,.rmp-product-suit{grid-template-columns:1fr}.rmp-product-hero__copy{text-align:center}.rmp-product-hero__copy .rmp-ctas{justify-content:center}.rmp-product-benefits{grid-template-columns:1fr 1fr}.rmp-product-suit ul{max-width:620px}.rmp-product-nav{position:relative}}
@media (max-width:640px){.rmp-product-hero{padding:var(--rmp-s6) 0}.rmp-product-hero__media{max-width:260px}.rmp-product-benefits,.rmp-product-info,.rmp-product-suit ul{grid-template-columns:1fr}.rmp-product-nav .rmp-wrap{justify-content:flex-start}.rmp-product-nav a{font-size:.7rem}.rmp-feeding-placeholder{padding:var(--rmp-s4)}}

/* Foran-inspired product information layout: a calm, editorial product
   introduction followed by two clear benefit/use-case columns. */
/* Top padding was clamp(56px,8vw,112px) - 112px on a desktop, which
   left a conspicuous void between the breadcrumb and the pack shot and
   was the last thing on the site not on the universal rhythm. Now the
   same 48px as every section. The bottom is left on its own clamp
   because product-carousel.css overrides it to 32px anyway. */
.rmp-product-hero--foran{padding:var(--rmp-sec-pad) 0 clamp(48px,6vw,80px);background:#fff}
.rmp-product-hero--foran .rmp-product-hero__grid{max-width:1140px;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(48px,8vw,128px)}
.rmp-product-hero--foran .rmp-product-hero__media{max-width:330px}
.rmp-product-hero--foran .rmp-product-hero__media .rmp-ph{background:#fff;border:1px solid var(--rmp-line);box-shadow:0 20px 46px -32px rgba(28,23,26,.35)}
.rmp-product-hero--foran .rmp-product-hero__tagline{max-width:56ch;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.55}
.rmp-foran-highlights{border-top:1px solid var(--rmp-line);border-bottom:1px solid var(--rmp-line);background:#fff}
.rmp-foran-highlights__grid{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:auto}
.rmp-foran-highlight{padding:clamp(40px,5vw,72px) clamp(28px,5vw,72px)}
.rmp-foran-highlight+ .rmp-foran-highlight{border-left:1px solid var(--rmp-line)}
.rmp-foran-highlight .rmp-eyebrow{color:var(--rmp-gonative)}
.rmp-foran-highlight .rmp-h2{font-size:1.625rem;text-transform:none;letter-spacing:0;margin-bottom:var(--rmp-s4)}
.rmp-foran-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.rmp-foran-list li{position:relative;padding-left:28px;font-size:var(--rmp-copy);line-height:1.55;color:var(--rmp-body)}
.rmp-foran-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--rmp-gonative);font-weight:700}
.rmp-foran-highlight--ideal{background:#f7f4f4}
.rmp-product-page .rmp-product-info{gap:0;border:1px solid var(--rmp-line);border-radius:0;overflow:hidden}
.rmp-product-page .rmp-product-info article{border:0;border-top:4px solid var(--rmp-gonative);border-radius:0;box-shadow:none}
.rmp-product-page .rmp-product-info article+article{border-left:1px solid var(--rmp-line)}
.rmp-product-page .rmp-feeding-placeholder{border-color:var(--rmp-gonative);border-radius:0;background:#fff}
@media (max-width:900px){.rmp-product-hero--foran .rmp-product-hero__grid,.rmp-foran-highlights__grid{grid-template-columns:1fr}.rmp-foran-highlight+.rmp-foran-highlight{border-left:0;border-top:1px solid var(--rmp-line)}}
@media (max-width:640px){.rmp-product-hero--foran{background:#fff}.rmp-foran-highlight{padding:var(--rmp-s5) 24px}.rmp-product-page .rmp-product-info article+article{border-left:0;border-top:1px solid var(--rmp-line)}}

/* PDP key-content treatment, based on the approved Features & Benefits / Ideal
   For reference: compact grey heading bars and outlined Go Native purple dots. */
.rmp-product-hero--foran .rmp-product-hero__grid{align-items:start}
.rmp-pdp-key-content{margin-top:var(--rmp-s4);display:grid;gap:var(--rmp-s3)}
.rmp-pdp-key-content__title{margin:0 0 var(--rmp-s2);padding:10px 16px;background:#eee;color:#1f2022;font:700 1.125rem/1.3 var(--rmp-font);letter-spacing:0;text-transform:uppercase}
.rmp-pdp-key-content__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rmp-pdp-key-content__list li{position:relative;padding-left:26px;font-size:var(--rmp-copy);line-height:1.5;color:#1f2022}
.rmp-pdp-key-content__list li:before{content:'';position:absolute;left:0;top:.42em;width:11px;height:11px;border:2px solid var(--rmp-gonative);border-radius:50%}
.rmp-product-hero--foran .rmp-pdp-key-content + .rmp-ctas{margin-top:var(--rmp-s4)}
/* Pack sizes moved below Ideal For (pack_sizes_pos=after_ideal) would
   otherwise sit flush against the last bullet. */
.rmp-pdp-key-content + .rmp-hint--packsizes{margin-top:var(--rmp-s3)}
.rmp-hint--packsizes + .rmp-ctas{margin-top:var(--rmp-s4)}
@media (max-width:640px){.rmp-pdp-key-content__title{font-size:1rem}.rmp-pdp-key-content__list li{font-size:var(--rmp-copy)}}

/* Product title and tagline treatment across the Go Native PDPs. */
/* Product titles are H2s, so they take the H2 size even though they carry
   .rmp-h1 for the rest of its styling. text-wrap:wrap because long product
   names read badly with the balanced wrapping used on real page titles. */
.rmp-product-hero__copy .rmp-h1{font-size:var(--rmp-h2);text-wrap:wrap}
.rmp-product-page .rmp-product-hero__tagline{font-size:18px;font-weight:400}

/* Product data follows the clear, tabular information hierarchy used on the
   Foran product detail pages. Values remain visibly marked as placeholders. */
.rmp-pdp-data{max-width:920px;margin:0 auto}
.rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
.rmp-pdp-data__title{font-size:1.125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rmp-ink);margin:0 0 var(--rmp-s2)}
.rmp-pdp-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.45}
.rmp-pdp-table th,.rmp-pdp-table td{padding:14px 18px;border-bottom:1px solid var(--rmp-line);text-align:left;vertical-align:top}
.rmp-pdp-table th{background:#eee;color:#1f2022;font-weight:700}
.rmp-pdp-table td:last-child,.rmp-pdp-table th:last-child{text-align:right}
.rmp-pdp-table td{color:var(--rmp-body)}
.rmp-pdp-data__copy{font-size:var(--rmp-copy);line-height:1.7;color:var(--rmp-body)}
.rmp-pdp-data__note{margin-top:var(--rmp-s3);padding:16px 18px;border-left:4px solid var(--rmp-gonative);background:var(--rmp-soft);font-size:var(--rmp-copy);line-height:1.6;color:var(--rmp-body)}
.rmp-pdp-feeding{background:var(--rmp-soft)}
.rmp-pdp-feeding .rmp-pdp-data{max-width:760px}
@media (max-width:640px){.rmp-pdp-table{font-size:.875rem}.rmp-pdp-table th,.rmp-pdp-table td{padding:12px 10px}.rmp-pdp-table th:last-child,.rmp-pdp-table td:last-child{text-align:left}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}

/* Product information tabs */
.rmp-pdp-tabs{max-width:1180px;margin:0 auto}
.rmp-pdp-tabs__list{display:flex;justify-content:center;gap:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
.rmp-pdp-tabs__tab{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:transparent;color:#1f2022;padding:16px clamp(18px,3vw,42px);font:500 1rem/1.3 var(--rmp-font);white-space:nowrap;cursor:pointer}
.rmp-pdp-tabs__tab:hover{color:var(--rmp-gonative)}
.rmp-pdp-tabs__tab[aria-selected="true"]{background:var(--rmp-gonative);border-bottom-color:var(--rmp-gonative);color:#fff;font-weight:700}
.rmp-pdp-tabs__tab:focus-visible{outline:3px solid var(--rmp-gonative);outline-offset:-3px}
.rmp-pdp-tabs__panel{padding:clamp(34px,5vw,64px);border:1px solid #d9d9d9;border-top:0;border-radius:0 0 10px 10px;background:#fff}
.rmp-pdp-tabs__panel[hidden]{display:none}
.rmp-pdp-tabs__panel .rmp-pdp-data{max-width:none}
.rmp-pdp-tabs__panel .rmp-pdp-data__block+.rmp-pdp-data__block{margin-top:var(--rmp-s5)}
@media (max-width:640px){.rmp-pdp-tabs__list{justify-content:flex-start}.rmp-pdp-tabs__tab{padding:14px 20px;font-size:.875rem}.rmp-pdp-tabs__panel{padding:28px 18px}}


/* Office addresses panel (Customer Service, #our-offices). Two columns of
   .rmp-office on a light grey panel; each title carries a red left bar. */
.rmp-offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rmp-s5);background:#fff;padding:var(--rmp-s5) var(--rmp-s6)}
.rmp-offices>.rmp-office{margin:0}
.rmp-page .rmp-office__title{font-size:var(--rmp-h3);line-height:1.3;border-left:3px solid var(--rmp-red);padding-left:var(--rmp-s2);margin:0 0 var(--rmp-s2)}
.rmp-page .rmp-office p{margin:0;line-height:1.9}
.rmp-office a{color:var(--rmp-red);text-decoration:none}
.rmp-office a:hover,.rmp-office a:focus-visible{text-decoration:underline}
@media (max-width:781px){.rmp-offices{grid-template-columns:1fr;gap:var(--rmp-s4);padding:var(--rmp-s4) var(--rmp-s3)}}

/* Meet the pet experts (page 34) as core blocks: each person is a Group
   (article.rmp-person) holding an Image, H3, role and bio paragraph. */
.rmp-person>*{margin:0}
.rmp-person>.rmp-person__role{margin-bottom:.5rem}
.rmp-person__photo{margin:0}
.rmp-person__photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rmp-radius)}
.rmp-person__photo .rmp-ph{width:100%;background:rgba(255,255,255,.14);color:#fff}
.rmp-person__photo .rmp-ph:before{border-color:rgba(255,255,255,.4)}
.rmp-person h3.rmp-person__name{color:#fff}
/* White paw print above each team member's name (no portraits yet). A mask, so the colour is the background. */
.rmp-person::before{content:"";display:block;width:44px;height:44px;margin:0 auto;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='12' cy='30' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='16' rx='7' ry='10'/%3E%3Cellipse cx='42' cy='16' rx='7' ry='10'/%3E%3Cellipse cx='56' cy='30' rx='7' ry='9'/%3E%3Cpath d='M32 30c-9 0-18 10-18 19 0 6 5 9 10 8 3-1 5-2 8-2s5 1 8 2c5 1 10-2 10-8 0-9-9-19-18-19z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='12' cy='30' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='16' rx='7' ry='10'/%3E%3Cellipse cx='42' cy='16' rx='7' ry='10'/%3E%3Cellipse cx='56' cy='30' rx='7' ry='9'/%3E%3Cpath d='M32 30c-9 0-18 10-18 19 0 6 5 9 10 8 3-1 5-2 8-2s5 1 8 2c5 1 10-2 10-8 0-9-9-19-18-19z'/%3E%3C/svg%3E") center/contain no-repeat}
.rmp-person:has(>.rmp-person__photo)::before{display:none}

/* ------------------------------------------------------------------
   Consistent heading -> paragraph spacing (24px = --rmp-s3), site-wide.
   Reference: About page "Who are Connolly's RED MILLS?" (24 Sep 2026).
   Excludes tight name/subtitle pairs (person role, stockist place,
   range strapline). Cards whose group uses a flex gap get the difference.
   ------------------------------------------------------------------ */
main :is(h1,h2,h3,h4,h5,h6):has(+ p:not(:where(.rmp-person__role,.rmp-stkcard__place,.rmp-range__strap))){margin-bottom:0!important}
main :is(h1,h2,h3,h4,h5,h6) + p:not(:where(.rmp-person__role,.rmp-stkcard__place,.rmp-range__strap)){margin-top:var(--rmp-s3)!important}
main :is(.rmp-card,.rmp-apromo,.rmp-feat) > :is(h1,h2,h3,h4,h5,h6) + p{margin-top:calc(var(--rmp-s3) - var(--rmp-s2))!important}
main .rmp-pillar > :is(h1,h2,h3,h4,h5,h6) + p{margin-top:0!important}

/* Meet the team: smaller portraits (24 Sep 2026) */
.rmp-person__photo{width:100%;max-width:280px}
.rmp-person>.rmp-person__photo.aligncenter,.rmp-person:has(>.rmp-person__name.has-text-align-center)>.rmp-person__photo{margin-left:auto;margin-right:auto}

/* Sales reps directory (Contact the Reps, 24 Sep 2026): region heading + grid of rep cards */
.rmp-reps>.rmp-reps__region{margin:var(--rmp-s5) 0 var(--rmp-s3)!important;text-align:center;font-size:var(--rmp-h3,1.375rem);line-height:1.3}
.rmp-reps>.rmp-reps__region:first-child{margin-top:0!important}
.rmp-reps>.rmp-reps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center;gap:var(--rmp-s3);margin:0!important}
.rmp-rep{background:#fff;border-radius:var(--rmp-radius);border-top:4px solid var(--rmp-red);padding:var(--rmp-s4);margin:0!important;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.rmp-rep>*{margin:0}
.rmp-rep>.rmp-rep__name{font-size:1.1875rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
main .rmp-rep>:is(h1,h2,h3,h4,h5,h6)+p.rmp-rep__role{margin-top:.25rem!important}
.rmp-rep>.rmp-rep__role{font-weight:700;font-size:.9375rem}
.rmp-rep>.rmp-rep__details{margin-top:var(--rmp-s2)!important;line-height:1.9}
.rmp-rep a{color:var(--rmp-red);text-decoration:none;overflow-wrap:anywhere}
.rmp-rep a:hover,.rmp-rep a:focus-visible{text-decoration:underline}
@media (max-width:781px){.rmp-reps>.rmp-reps__grid{grid-template-columns:1fr}.rmp-rep{padding:var(--rmp-s3)}}


/* Stockist form (page 36): fields, labels and help text left-aligned inside the centred header; submit button stays centred. */
#stockist-form .fluentform,#stockist-form .ff-el-group,#stockist-form .ff-el-input--label,#stockist-form .ff-el-input--content,#stockist-form .ff-custom_html,#stockist-form .ff-el-form-check{text-align:left!important}
#stockist-form .ff_submit_btn_wrapper{text-align:center!important}
#stockist-form .rmp-head > .fluentform{margin-top:var(--rmp-s3)}

/* ==========================================================================
   Laptop side gutters - SITE-WIDE (29 Sep 2026, trialled on the homepage first)
   Between 1024px and ~1440px pages used to hit the fixed 24px gutter, so the
   header, banners and sections ran almost to the screen edge. The gutter now
   grows with the viewport (6vw, capped at 84px) and the shell widens by the
   same amount, so the CONTENT width is still capped at 1272px:
     1024 -> 61px   1280 -> 77px   1366 -> 82px   >=1400 -> 84px
   At 1440+ the result is identical to before (84px at 1440, 324px at 1920),
   and below 1024px (tablet/mobile) nothing changes. --rmp-gutter is also
   read by article-single.css (--rmp-art-head) with a 24px fallback.
   The body prefix is only there to out-rank each file's own 24px padding.
   ========================================================================== */
@media (min-width:1024px){
	body,body .rmp-header,body .rmp-page,body .rmp-footer{
		--rmp-gutter:clamp(24px,6vw,84px);
		--rmp-shell:calc(1272px + 2 * var(--rmp-gutter))}
	body .rmp-bar__inner,
	body .rmp-search__form,
	body .rmp-mega__inner,
	body .rmp-wrap,
	body .rmp-page .rmp-sec > .wp-block-heading,
	body .rmp-page .rmp-sec > p,
	body .rmp-hero__inner,
	body .rmp-crumbs ol,
	body .rmp-pull__inner,
	body .rmp-filter__inner,
	body .rmp-art__head,
	body .rmp-art__wrap,
	body .rmp-search-page,
	body .rmp-footer__inner{padding-left:var(--rmp-gutter);padding-right:var(--rmp-gutter)}
	/* Product pages use their own 1240px/28px wrap (pdp.css) - same idea,
	   content still capped at 1184px, so 1440+ is unchanged. */
	body .rmp-pdp .sal-wrap{max-width:calc(1184px + 2 * var(--rmp-gutter));
		padding-left:var(--rmp-gutter);padding-right:var(--rmp-gutter)}
	/* The banner breadcrumb sits INSIDE .rmp-hero__inner, which already has the
	   gutter - it must stay at 0 or it is indented twice (out of line with the H1). */
	body .rmp-crumbs--hero ol{padding-left:0;padding-right:0}
}
/* Laptop-only menu size: with the wider gutter the six top-level labels no
   longer fit beside the logo and Store Locator between 1024px and 1439px, so
   the labels step down there only (and use the 10px side padding mega-menu.css
   already uses at <=1200px). 1440+ keeps 14.5px / 14px padding; below 1024px
   the burger menu takes over, so no other screen size is affected. */
/* 29 Sep (Ava): labels bumped up 1-2px at every laptop width, and the Store
   Locator + search buttons made smaller (38px, from 44px) to pay for it.
   Sizes step up with the screen width (min-width ladder, so there are no
   fractional-width gaps between bands). Below 1260px the side padding drops
   to 8px and the 2px list gap to 0 to buy room. Minimum clearance between the
   labels and the logo / buttons is 28px at every width. */
@media (min-width:1024px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__list{column-gap:0}
	body .rmp-header .rmp-nav__link{font-size:12px;padding-left:8px;padding-right:8px}
	body .rmp-header .rmp-nav__link:after{left:8px;right:8px}
	/* Store Locator: 44px tall / 13.5px text / 16px sides at 1440+. */
	body .rmp-header .rmp-util--locator{height:38px;padding:0 14px;gap:6px;font-size:12.5px}
	body .rmp-header .rmp-util--locator .rmp-icon{width:14px;height:14px}
	body .rmp-header .rmp-util--search{width:38px;height:38px}
}
/* <=1200px mega-menu.css turns the Store Locator pill into an icon-only circle. */
@media (min-width:1024px) and (max-width:1200px){
	body .rmp-header .rmp-util--locator{width:38px;padding:0}
}
@media (min-width:1050px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__link{font-size:12.5px}
}
@media (min-width:1080px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__link{font-size:13px}
}
@media (min-width:1106px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__link{font-size:13.5px}
}
/* The icon-only locator leaves room for 14px up to 1200px; at 1201px the
   "Store Locator" label comes back, so the menu returns to 13.5px. */
@media (min-width:1120px) and (max-width:1200px){
	body .rmp-header .rmp-nav__link{font-size:14px}
}
@media (min-width:1260px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__list{column-gap:2px}
	body .rmp-header .rmp-nav__link{font-size:14px;padding-left:10px;padding-right:10px}
	body .rmp-header .rmp-nav__link:after{left:10px;right:10px}
}
@media (min-width:1321px) and (max-width:1439.98px){
	body .rmp-header .rmp-nav__link{font-size:14.5px}
}

/* ==========================================================================
   Landing-page rhythm = homepage rhythm (Ava, 30 Sep 2026)
   "The spacing between each component on the homepage is perfect - can the
   same be applied to all landing pages." Scoped to body.page:not(.home), so
   the homepage (home.css) and product / article pages are untouched.
   Homepage values copied here:
   - every band: 48px above and below its content -> 96px from one band's
     content to the next; 48px where two bands of the same colour meet
   - section head: eyebrow -> H2 12px; H2 -> intro 12px (a ruled H2 keeps
     24px to the red rule and 24px from it); head -> content 32px
   Heading -> body copy inside text blocks keeps the site-wide 24px (24 Sep).
   Rollback: delete this block (backup: pages.css.before-rhythm).
   ========================================================================== */
/* Eyebrows: no stray 16px above the first one in a head (from .rmp-head p,
   it made the band's top 64px), and 12px down to the heading. */
body.page:not(.home) .rmp-page .rmp-sec p.rmp-eyebrow:first-child{margin-top:0}
body.page:not(.home) .rmp-page .rmp-sec p.rmp-eyebrow:has(+ :is(h1,h2)){margin-bottom:12px}
body.page:not(.home) .rmp-page .rmp-sec p.rmp-eyebrow + :is(h1,h2){margin-top:0}
/* Section head: H2 -> intro 12px, unless the H2 carries the red rule. */
body.page:not(.home) main .rmp-page :is(.rmp-head:not(.rmp-head--rule),.rmp-carousel__head) :is(h1,h2) + p:not(:where(.rmp-person__role,.rmp-stkcard__place,.rmp-range__strap)){margin-top:12px!important}
/* Head -> content 32px (was 48px). A head that ends its band adds nothing. */
body.page:not(.home) .rmp-page .rmp-head,
body.page:not(.home) .rmp-page .rmp-carousel__head{margin-bottom:var(--rmp-s4)}
body.page:not(.home) .rmp-page :is(.rmp-sec,.rmp-sec > .rmp-wrap:last-child) > .rmp-head:last-child{margin-bottom:0}
/* Forms: a form inside a head sits 32px under it (sponsorship had 0, stockist
   24); Fluent Forms' 20px under the submit button no longer pads the band. */
body.page:not(.home) .rmp-page .rmp-head > .fluentform,
body.page:not(.home) #stockist-form .rmp-head > .fluentform{margin-top:var(--rmp-s4)}
body.page:not(.home) .rmp-page .rmp-sec .fluentform .ff_submit_btn_wrapper{margin-bottom:0}
/* Forms: a narrower column, centred, so there is room either side (the form fills the full 1400px page width otherwise). */
body.page:not(.home) .rmp-page .fluentform{max-width:800px;margin-left:auto;margin-right:auto}
/* Leader official logo 2595 (transparent, dark green/red): used as supplied, no coloured plate, on the white card / pop-up / light page. Replaces the white logo 2400 on the product ranges and Our Ranges pages. */
.rmp-range .rmp-range__logo img.wp-image-2595{height:72px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2595){padding:0;background:none;overflow:hidden;border-radius:0;margin-bottom:12px}
.rmp-modal .rmp-modal__logo img.wp-image-2595{height:68px}
.rmp-modal figure.wp-block-image.rmp-modal__logo:has(img.wp-image-2595){padding:0;background:none;overflow:hidden;border-radius:0}
.rmp-rl img.wp-image-2595{height:68px!important}
.rmp-split__copy figure.wp-block-image.rmp-rl--top:has(img.wp-image-2595){padding:0;background:none;box-shadow:none;overflow:hidden;border-radius:0}
/* Winner dog official logo 2600 (transparent, gold/red, cropped to the artwork): used as supplied, no coloured plate, same treatment as Leader 2595. Replaces the white logo 2401 on the product ranges and Our Ranges pages. */
.rmp-range .rmp-range__logo img.wp-image-2600{height:72px}
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2600){padding:0;background:none;overflow:hidden;border-radius:0;margin-bottom:12px}
.rmp-modal .rmp-modal__logo img.wp-image-2600{height:68px}
.rmp-modal figure.wp-block-image.rmp-modal__logo:has(img.wp-image-2600){padding:0;background:none;overflow:hidden;border-radius:0}
.rmp-rl img.wp-image-2600{height:68px!important}
.rmp-split__copy figure.wp-block-image.rmp-rl--top:has(img.wp-image-2600){padding:0;background:none;box-shadow:none;overflow:hidden;border-radius:0}
/* Dog logos (Go Native 2560, Leader 2595, Winner 2600, Engage 2564) on /products/our-product-ranges/: same visible artwork height on the cards (64px) and in the pop-ups (60px).
   The Go Native and Engage files carry empty margin / a white plate, so their <img> heights are larger (artwork is 65% of the Go Native file; Engage has 13px/12px padding).
   Each logo sits centred in a fixed-height box so every card's name and list line up (84px row on cards). */
.rmp-range figure.wp-block-image.rmp-range__logo:has(img.wp-image-2560, img.wp-image-2564, img.wp-image-2595, img.wp-image-2600){height:84px;margin-bottom:0;display:flex;align-items:center;justify-content:center;overflow:visible}
.rmp-range .rmp-range__logo img.wp-image-2560{height:98px;position:relative;top:-9px}
.rmp-range .rmp-range__logo img.wp-image-2564{height:90px}
.rmp-range .rmp-range__logo img.wp-image-2595,.rmp-range .rmp-range__logo img.wp-image-2600{height:64px}
.rmp-modal figure.wp-block-image.rmp-modal__logo:has(img.wp-image-2560, img.wp-image-2564, img.wp-image-2595, img.wp-image-2600){height:60px;display:flex;align-items:center;justify-content:center;overflow:visible}
.rmp-modal .rmp-modal__logo img.wp-image-2560{height:92px;position:relative;top:-9px}
.rmp-modal .rmp-modal__logo img.wp-image-2564{height:84px}
.rmp-modal .rmp-modal__logo img.wp-image-2595,.rmp-modal .rmp-modal__logo img.wp-image-2600{height:60px}
/* Carousels: the track's 8px bottom padding (room for card shadows inside the
   scroller) no longer adds to the band; <figure> slides lose their default
   bottom margin. */
body.page:not(.home) .rmp-page .rmp-carousel__track:last-child{margin-bottom:-8px}
body.page:not(.home) .rmp-page .rmp-carousel__track > figure{margin:0}
/* Pull-quote band: 48px like every band (was 64px). On phones the quote is
   stacked under the mark, so its bottom margin would pad the band. */
body.page:not(.home) .rmp-page .rmp-pull{padding:var(--rmp-sec-pad) 0}
@media (max-width:640px){
	body.page:not(.home) .rmp-page .rmp-pull blockquote{margin-bottom:0}
}
/* Product listings (desktop): the filter rail spanned a second, empty grid
   row (the compact results bar is hidden at this width), which put 32px of
   row gap under the products. */
@media (min-width:1024px){
	body.page:not(.home) .rmp-listing:has(> .rmp-listing__bar--compact) > .rmp-pfilter{grid-row:1}
}
/* Store locator: 48px top and bottom (was 48/88, and 32/64 on phones). */
body.page:not(.home) .rmp-stk{padding:var(--rmp-sec-pad) 0}
/* Two bands of the same colour in a row read as one, so the second drops its
   top padding: 48px between them, as on the homepage, not a 96px gap.
   White = white preset, or no background of its own (--white beats --soft);
   soft = soft preset, --soft without --white, or the pull-quote band. */
body.page:not(.home) .rmp-page > .rmp-sec:is(.has-rmp-white-background-color,:not(.has-background,[style*="background"],.rmp-sec--red,.rmp-sec--ink):is(.rmp-sec--white,:not(.rmp-sec--soft)))
	+ .rmp-sec:is(.has-rmp-white-background-color,:not(.has-background,[style*="background"],.rmp-sec--red,.rmp-sec--ink):is(.rmp-sec--white,:not(.rmp-sec--soft))),
body.page:not(.home) .rmp-page > :is(.rmp-sec,.rmp-pull):is(.has-rmp-soft-background-color,:not(.has-background,[style*="background"],.rmp-sec--red,.rmp-sec--ink,.rmp-sec--white):is(.rmp-sec--soft,.rmp-pull))
	+ :is(.rmp-sec,.rmp-pull):is(.has-rmp-soft-background-color,:not(.has-background,[style*="background"],.rmp-sec--red,.rmp-sec--ink,.rmp-sec--white):is(.rmp-sec--soft,.rmp-pull)){padding-top:0}
/* A section intro written as a head plus a separate lede paragraph (Online
   Stockists, International Markets): the lede sits 12px under the H2 as on
   the homepage, and whatever follows it 32px below. */
body.page:not(.home) .rmp-page .rmp-head:not(.rmp-head--rule):has(+ p.rmp-lede){margin-bottom:12px}
body.page:not(.home) .rmp-page .rmp-head:not(.rmp-head--rule) + p.rmp-lede:not(:last-child){margin-bottom:var(--rmp-s4)}
/* Numbered steps row (Ingredients & Quality): its 24px top padding was room
   for badges that used to straddle the card edge. They no longer do, so the
   cards start 32px under the head like any other content. */
body.page:not(.home) .rmp-page .rmp-head + .rmp-timeline--row{padding-top:0}
/* End of landing-page rhythm block (30 Sep 2026). */

/* Testimonial cards as core blocks (page 14, Ava 30 Sep 2026). Markup:
   group.rmp-quote > core/quote.rmp-quote__text + group.rmp-quote__by (badge
   injected by inc/testimonials.php) + group.rmp-quote__product (image + linked
   name, whole panel clickable via a stretched link). */
.rmp-quote .wp-block-quote{margin:0;padding:0;border:0;background:none;font-style:normal;quotes:none}
.rmp-quote .wp-block-quote>p{margin:0}
.rmp-quote .wp-block-quote cite{display:block;margin-top:8px;font-size:.8125rem;font-style:normal;color:var(--rmp-muted)}
.rmp-quote__by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rmp-line)}
.rmp-quote__who>p{margin:0}
.rmp-quote__product{position:relative;margin:0}
.rmp-quote__product .wp-block-image{margin:0}
.rmp-quote__product .wp-block-image img{display:block;width:150px;height:150px;object-fit:contain;transition:transform .2s}
.rmp-quote__product:hover .wp-block-image img{transform:scale(1.05)}
.rmp-quote__product>p.rmp-quote__prodname{margin:4px 0 0}
.rmp-quote__prodname a{color:inherit;text-decoration:none}
.rmp-quote__product:has(a:focus-visible){box-shadow:inset 0 0 0 2px var(--q-accent)}
.rmp-quote__prodname a:focus-visible{outline:none}
body:not(.editor-styles-wrapper) .rmp-quote__prodname a::after{content:"";position:absolute;inset:0;border-radius:10px}
.rmp-carousel__head>.rmp-head{margin-bottom:0}
@media (max-width:600px){.rmp-quote__product .wp-block-image img{width:120px;height:120px}}
/* Testimonial blocks: match the hand-coded card metrics (30 Sep 2026) */
body.page .rmp-page .rmp-carousel__head>.rmp-head{margin-bottom:0}
body .rmp-page .rmp-quote .rmp-quote__who>p{line-height:1.3}
body .rmp-page .rmp-quote p.rmp-quote__prodname{line-height:18px;color:var(--q-accent)}

/* Banner buttons on phones (Ava, 30 Sep 2026 - one banner size sitewide):
   the two banner buttons (homepage, Our Product Ranges) sit side by side at
   equal widths instead of stacking, which saves ~54px and lets those banners
   fit the same 400px as every other banner. If a future pair of labels is too
   long to share a row, flex-wrap drops the second button underneath rather
   than squashing the text (min-width:max-content). Other .rmp-ctas groups
   outside banners still stack on phones as before. */
@media (max-width:640px){
	body .rmp-hero .rmp-ctas{flex-direction:row;flex-wrap:wrap}
	body .rmp-hero .rmp-ctas>.wp-block-button{flex:1 1 0;min-width:max-content}
	body .rmp-hero .rmp-ctas .wp-block-button__link{width:100%;box-sizing:border-box}
}
/* Very small phones (under 360px, e.g. the 320px iPhone SE 1st gen): trim the
   banner buttons' side padding so the pair still fits side by side and the
   banner keeps its 400px height. */
@media (max-width:359px){
	body .rmp-page .rmp-hero .rmp-ctas>.wp-block-button>.wp-block-button__link{padding-left:16px;padding-right:16px}
}

/* ==========================================================================
   Desktop monitors only (Ava, 12 Oct 2026): less empty space at the sides.
   Up to 1599px NOTHING changes (laptops/tablets/phones keep the 29 Sep
   gutters above). From 1600px the content width keeps growing with the
   screen - side space held at 164px (exactly what 1600 already had, so no
   jump) - until it reaches 1400px wide (was capped at 1272px):
     1600 -> 164px each side (unchanged)   1728 -> 164px   1920 -> 260px (was 324)
     2560 -> 580px (was 644)
   Product pages keep their existing extra 40px each side over the shell.
   ========================================================================== */
@media (min-width:1600px){
	body,body .rmp-header,body .rmp-page,body .rmp-footer{
		--rmp-shell:calc(min(1400px, 100vw - 328px) + 2 * var(--rmp-gutter))}
	body .rmp-pdp .sal-wrap{max-width:calc(min(1400px, 100vw - 328px) - 88px + 2 * var(--rmp-gutter))}
}