/* ==========================================================================
   Red Mills Pet — Homepage components
   --------------------------------------------------------------------------
   Layout patterns follow the structural conventions of a modern pet-food
   homepage (full-bleed hero, trust strip, range selector plinths, alternating
   colour bands with an accent rule, rating block, social wall, promo cards and
   an article carousel).

   Everything here is built on the tokens declared in pages.css, so the
   palette, 8px rhythm, radius and Maven Pro typography are inherited rather
   than restated. No colour is hard-coded except neutral shadows/scrims.

   Depends on: pages.css (tokens + .rmp-sec/.rmp-wrap/.rmp-cta/.rmp-ph)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dark "ink" band
   A fourth band colour so the page can alternate white / soft / red / ink
   instead of repeating red twice.
   -------------------------------------------------------------------------- */
.rmp-sec--ink{background:var(--rmp-ink);color:#fff;
	background-image:radial-gradient(circle at -10% 120%,rgba(255,255,255,.10),transparent 55%)}
.rmp-sec--ink .rmp-h1,.rmp-sec--ink .rmp-h2,.rmp-sec--ink .rmp-h3,
.rmp-sec--ink h1,.rmp-sec--ink h2,.rmp-sec--ink h3{color:#fff}
.rmp-sec--ink .rmp-eyebrow{color:#fff;opacity:.8}
.rmp-sec--ink .rmp-lede,.rmp-sec--ink p{color:rgba(255,255,255,.9)}
.rmp-sec--ink .rmp-cbtn{border-color:#fff;background:transparent;color:#fff}
.rmp-sec--ink .rmp-cbtn:hover{background:#fff;color:var(--rmp-ink)}
.rmp-sec--ink .rmp-cbtn:disabled{background:transparent;color:#fff}

/* --------------------------------------------------------------------------
   Accent rule
   Short thick rule that sits between a section heading and its eyebrow.
   -------------------------------------------------------------------------- */
.rmp-rule{width:64px;height:5px;border:0;border-radius:3px;
	margin:var(--rmp-s3) 0;background:var(--rmp-red)}
.rmp-sec--red .rmp-rule,.rmp-sec--ink .rmp-rule{background:#fff}
.rmp-center .rmp-rule,.rmp-head--center .rmp-rule{margin-inline:auto}
/* As a core Separator block (29 Sep 2026) - beat core's separator styles
   (border-top 2px, 100px width, opacity) so it looks the same. */
.rmp-page hr.wp-block-separator.rmp-rule,
.editor-styles-wrapper hr.wp-block-separator.rmp-rule{width:64px;height:5px;border:0;border-radius:3px;
	margin:var(--rmp-s3) 0;background:var(--rmp-red);opacity:1}
.rmp-page .rmp-sec--red hr.wp-block-separator.rmp-rule,.rmp-page .rmp-sec--ink hr.wp-block-separator.rmp-rule{background:#fff}
.rmp-page .rmp-center hr.wp-block-separator.rmp-rule,.rmp-page .rmp-head--center hr.wp-block-separator.rmp-rule{margin-inline:auto}

/* --------------------------------------------------------------------------
   Home hero
   Taller than an interior hero, and the copy is capped so the headline breaks
   over the artwork rather than across the full shell width.
   -------------------------------------------------------------------------- */
/* Type scale (H1 36 / H2 30 / body 18) now lives in pages.css and applies
   sitewide - the homepage-only trial block that used to sit here is gone. */
/* Same fixed height as every other page banner (Ava, 30 Sep 2026; was min(620px,78vh)). */
.rmp-hero--home .rmp-hero__inner{min-height:var(--rmp-hero-h)}
.rmp-hero--home .rmp-hero__inner>*{max-width:min(620px,100%)}
/* The 18px banner sub-headline is now the sitewide default in pages.css, so
   the homepage-only override that used to sit here is gone. */
/* The banner is 2560x1707 (3:2) shown in a much wider letterbox, so cover
   crops top and bottom. Default is 50% (dead centre); pulling the anchor down
   the frame slides the artwork UP, bringing the dog and packs into view.
   0% = top of the image, 100% = bottom. Tune this one number. */
/* Horizontal framing: the image is 3:2 in a much wider letterbox, so cover
   scales it to fill the WIDTH exactly - there is no spare width to slide
   sideways, and an x value in object-position does nothing. To move the dog
   right we make the image element wider than the banner and leave it anchored
   left, so the right-hand edge overflows out of view and the subject shifts
   across. 120% = a 20% zoom = roughly 150px of shift at desktop width.
   The y value is re-tuned to 60% to hold the same vertical framing, because
   zooming also crops more off the top and bottom.
   Reset to 100% on narrow screens, where there is no room to give away. */
.rmp-hero--home .rmp-hero__img{width:124%;max-width:none;
	object-position:center 55%}
@media (max-width:900px){
	.rmp-hero--home .rmp-hero__img{width:100%;object-position:center 62%}
}
/* The homepage banner carries a heavier overlay than the interior pages
   (80/56/12 vs 72/46/18) because it holds more copy over a busier photo.
   --rmp-scrim-k is the shared strength dial - see pages.css. */
.rmp-hero--home .rmp-hero__scrim{
	background:linear-gradient(90deg,
		rgba(20,22,28,calc(.80 * var(--rmp-scrim-k,1))) 0%,
		rgba(20,22,28,calc(.56 * var(--rmp-scrim-k,1))) 42%,
		rgba(20,22,28,calc(.12 * var(--rmp-scrim-k,1))) 100%)}
.rmp-hero--home .rmp-eyebrow{color:#fff;opacity:.95;display:flex;align-items:center;gap:10px}
.rmp-hero--home .rmp-eyebrow svg{width:16px;height:16px;flex:none}

/* --------------------------------------------------------------------------
   Range selector
   Two tinted plinths side by side. The pack line-up rises out of the top of
   each card (negative margin, so the cut-out artwork breaks the card edge
   rather than sitting inside a box), then the range shortcuts sit below in
   each range's own brand colour, a neutral "view all" pill under those, and
   a quiet life-stage text row last.

   The rise distance is one custom property so the artwork overhang and the
   space reserved above the card can never drift apart.
   -------------------------------------------------------------------------- */
/* Tighter vertical rhythm around the range selector, 27 Aug 2026.
   Halves (a) the space between the hero and the "Explore by range" eyebrow -
   .rmp-sec's top padding - and (b) the space between the heading block and the
   artwork - .rmp-head's bottom margin.

   Scoped with the #ranges ID on purpose: .rmp-sec and .rmp-head are
   design-system rules in pages.css shared by every section on all 11 landing
   pages, so halving the tokens there would re-space the whole site.

   16 Sep 2026: these calcs now read --rmp-sec-pad rather than a raw step
   token, so this section stays at half the universal rhythm if it is
   ever retuned again.

   The 900px value MUST be restated below. An ID (1,0,0) outranks the
   .rmp-sec{padding:var(--rmp-s6) 0} inside pages.css's own max-width:900px
   query, so without it phones would inherit the desktop figure - the usual
   trap when an ID overrides a responsive class rule. */
#ranges{padding-top:calc(var(--rmp-sec-pad) / 2)}     /* 48px -> 24px */
/* Brief (27 Aug): the white below the lede must read as the SAME size as the
   white above EXPLORE BY RANGE. It is deliberately not the same NUMBER,
   because neither gap is bounded by ink:

     gap above eyebrow = #ranges padding-top + 22px  (the eyebrow's
         half-leading, i.e. line-box top down to the cap height)
     gap below lede    = this margin           +  4px  (descender space
         inside the lede's last line box)

   Equal ink-to-ink therefore needs margin = padding-top + 18px. Expressing
   it as calc() off the same token keeps the two matched automatically if the
   section padding is ever retuned - do not hard-code 62px here.

   Measured by scanning rendered pixel rows (measure_white.py), not by
   getBoundingClientRect: element rects include leading and descender space,
   which is exactly the 18px discrepancy this calc corrects for.

   8 Sep 2026: Ava asked for more air between the lede and the artwork. The
   equal-ink calc above is kept as the baseline and --rmp-head-extra is added
   on top, so the two gaps are now deliberately unequal - set the extra to 0
   to go back to matched whitespace. */
#ranges{--rmp-head-extra:40px}
#ranges .rmp-head{
	margin-bottom:calc(var(--rmp-sec-pad) / 2 + 18px + var(--rmp-head-extra))}  /* 82px */
@media (max-width:900px){
	#ranges{padding-top:calc(var(--rmp-sec-pad) / 2); /* 48px -> 24px */
		--rmp-head-extra:28px}
	/* Restated for the same ID-specificity reason as the padding above. */
	#ranges .rmp-head{
		margin-bottom:calc(var(--rmp-sec-pad) / 2 + 18px + var(--rmp-head-extra))}  /* 70px */
}

.rmp-lifestage{display:grid;grid-template-columns:1fr 1fr;
	gap:clamp(24px,4vw,56px);align-items:stretch}
/* --rmp-rise = how far the artwork lifts out of the card, and therefore how
   much shorter the grey card gets. Target: the MIDPOINT of the visible animal
   + pack group sits on the card's top edge, i.e. half the group above the
   grey, half inside it.

   Both images were re-exported 2026-08-27 with the empty transparent band
   above the subject cropped off (both cut at the same y so they keep ONE
   aspect ratio and one rise still serves both). Frame is now 1252x611, and
   the subject midpoint sits at 48.7% (dog) / 50.6% (cat) - avg 49.6% - down
   the frame. Frame height = 0.488 x frame width, so:
       rise = 0.496 x 0.488 x imgW = 0.242 x imgW
   imgW = card width minus .rmp-lst__card's inline padding and
   .rmp-lst__media's padding-inline. The vw expressions below are that figure
   solved for viewport width; they track it within ~3px from 320px to 1920px.
   (Before the crop these were 0.42 x imgW - if you ever swap the untrimmed
   originals back in, that is the number to return to.)

   Two regimes, because .rmp-lifestage goes from two columns to one at 900px
   and the card - so the image - suddenly doubles in width. */
.rmp-lst{--rmp-rise:clamp(81px,9.22vw,121px);--rmp-pad:clamp(20px,2.6vw,32px);
	display:flex;padding-top:var(--rmp-rise)}
/* One card colour for both animals - change --rmp-card to restyle both. */
.rmp-lst__card{position:relative;flex:1;display:flex;flex-direction:column;
	/* Soft grey surface for the dog and cat range cards. */
	--rmp-card:#F1F1F1;
	border-radius:var(--rmp-radius);text-align:center;
	background:var(--rmp-card);
	padding:var(--rmp-pad) clamp(20px,3vw,40px) clamp(28px,4vw,44px)}

/* Pull the artwork up out of the card. */
.rmp-lst__media{margin-top:calc((var(--rmp-rise) + var(--rmp-pad)) * -1);
	margin-bottom:-12px;padding-inline:clamp(0px,1vw,16px)}
.rmp-lst__media .rmp-ph{aspect-ratio:16/10;min-height:0}
.rmp-lst__media img{display:block;width:100%;height:auto;margin-inline:auto}
/* The updated dog-range artwork has more transparent canvas around the packs.
   Scale it from its base so the products rise out of the card like the cat artwork. */
.rmp-lst--dog .rmp-lst__media{position:relative;z-index:1}
.rmp-lst--dog .rmp-lst__img,
.rmp-lst--cat .rmp-lst__img{transform:scale(1.30);transform-origin:center bottom}
.rmp-lst--cat .rmp-lst__media{position:relative;z-index:1;top:12px}

/* Placeholder variant for cut-outs: no grey fill, since the finished asset
   has a transparent background and must read as floating, not boxed. */
.rmp-ph--cutout{background:transparent;color:var(--rmp-ink-deep)}
.rmp-ph--cutout:before{border-color:rgba(0,0,0,.30)}

/* NOTE: the .rmp-page h1-h4 reset in pages.css sets margin:0 and, being
   class+element, outbids a bare .rmp-lst__title - so the gap below must be
   declared at .rmp-page scope or it silently does nothing.
   s3 (24px) - deliberately the same step as .rmp-lst__all's top margin, so
   the gap above the buttons matches the gap below them. */
.rmp-lst__title{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);font-weight:800;
	text-transform:uppercase;letter-spacing:.02em}
/* The page heading reset has higher specificity than the bare title class,
   so set the accessible dark title colour here. */
.rmp-page .rmp-lst__title{margin:0 0 var(--rmp-s3);color:var(--rmp-ink)}

.rmp-lst__btns{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rmp-lst--dog .rmp-lst__btns{grid-template-columns:repeat(4,1fr)}
.rmp-lst--cat .rmp-lst__btns{grid-template-columns:repeat(2,1fr)}

/* Range button. Colour arrives via --rmp-range so the modifiers are one
   line each and a rebrand is a single token change. */
.rmp-rbtn{display:flex;align-items:center;justify-content:center;
	height:100%;min-height:54px;padding:8px 10px;
	border-radius:var(--rmp-radius);background:var(--rmp-range);color:#fff;
	text-decoration:none;text-align:center;font-family:var(--rmp-font);
	font-size:.8125rem;font-weight:700;line-height:1.15;letter-spacing:.05em;
	text-transform:uppercase;
	transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.rmp-rbtn:hover{transform:translateY(-2px);filter:brightness(1.12);
	box-shadow:0 10px 20px rgba(20,22,28,.20)}
/* White, not --rmp-ink: the card IS --rmp-ink now, so the old outline was
   invisible against it. */
.rmp-rbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.rmp-rbtn--gonative{--rmp-range:var(--rmp-gonative)}
.rmp-rbtn--leader{--rmp-range:var(--rmp-leader)}
.rmp-rbtn--winner{--rmp-range:var(--rmp-winner)}
.rmp-rbtn--engage{--rmp-range:var(--rmp-engage)}

/* Plain text link under the coloured row. */
.rmp-lst__all{align-self:center;margin-top:var(--rmp-s3);
	color:var(--rmp-ink);font-size:.9375rem;font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;
	text-decoration:underline;text-underline-offset:5px;
	text-decoration-thickness:2px;transition:color .18s ease}
.rmp-lst__all:hover{color:var(--rmp-ink);text-decoration-thickness:3px}
.rmp-lst__all:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:3px}

/* --------------------------------------------------------------------------
   Rating / review
   Pack shot beside a star rating, the review itself and an attribution.
   -------------------------------------------------------------------------- */
.rmp-review{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rmp-review__media .rmp-ph{aspect-ratio:1/1;min-height:0}
.rmp-review__copy{min-width:0}
.rmp-stars{display:flex;gap:6px;margin:0 0 var(--rmp-s3);color:var(--rmp-red)}
.rmp-stars svg{width:26px;height:26px}
/* 22px flat, not the old fluid 22-32px - the quote no longer grows on wide
   screens, matching the fixed sitewide scale. */
.rmp-review__quote{margin:0 0 var(--rmp-s3);color:var(--rmp-ink);
	font-size:1.375rem;line-height:1.4;font-weight:400}
.rmp-review__by{margin:0;color:var(--rmp-muted);font-size:var(--rmp-copy)}
.rmp-review__by a{color:var(--rmp-red);font-weight:700;text-decoration:none}
.rmp-review__by a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   REVIEWS CAROUSEL
   A scroll-snap track, not a JS-positioned slider: with the script off it is
   still a usable horizontal scroller, and native scrolling keeps touch and
   trackpad behaviour correct. The arrows and dots are [hidden] in the markup
   and unhidden by the script, so nothing dead is shown without JS.
   -------------------------------------------------------------------------- */
.rmp-revs__viewport{overflow:hidden}
.rmp-revs__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
	scroll-behavior:smooth;margin:0;padding:0;list-style:none;
	scrollbar-width:none;-ms-overflow-style:none}
.rmp-revs__track::-webkit-scrollbar{display:none}
.rmp-revs__track:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:4px}
.rmp-revs__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;
	padding-inline:2px}

.rmp-revs__nav{display:flex;align-items:center;justify-content:center;
	gap:var(--rmp-s3);margin-top:var(--rmp-s5)}
.rmp-revs__btn{display:flex;align-items:center;justify-content:center;
	width:48px;height:48px;padding:0;border:2px solid var(--rmp-red);
	border-radius:50%;background:#fff;color:var(--rmp-red);cursor:pointer;
	transition:background .18s ease,color .18s ease,opacity .18s ease}
.rmp-revs__btn svg{width:22px;height:22px}
.rmp-revs__btn:hover:not(:disabled){background:var(--rmp-red);color:#fff}
.rmp-revs__btn:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:3px}
.rmp-revs__btn:disabled{opacity:.35;cursor:default}

.rmp-revs__dots{display:flex;align-items:center;gap:10px}
.rmp-revs__dot{width:11px;height:11px;padding:0;border:0;border-radius:50%;
	background:rgba(20,22,28,.25);cursor:pointer;
	transition:background .18s ease,transform .18s ease}
.rmp-revs__dot:hover{background:rgba(20,22,28,.45)}
.rmp-revs__dot[aria-current="true"]{background:var(--rmp-red);transform:scale(1.25)}
.rmp-revs__dot:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:3px}

/* A single review needs no controls. */
.rmp-revs--single .rmp-revs__nav{display:none}

@media (prefers-reduced-motion:reduce){
	.rmp-revs__track{scroll-behavior:auto}
	.rmp-revs__dot[aria-current="true"]{transform:none}
}

/* --------------------------------------------------------------------------
   Social wall
   -------------------------------------------------------------------------- */
.rmp-insta__head{max-width:720px;margin:0 auto 0;text-align:center}
/* @handle is an H2, so it takes the H2 size rather than its own display size. */
.rmp-insta__handle{font-size:var(--rmp-h2);font-weight:800}
/* Both gaps in this block need .rmp-page scope or they do nothing: the h1-h4
   reset (.rmp-page h2{margin:0}) zeroed the handle's margins, and
   .rmp-page p{margin:0 0 1.1em} overrode the eyebrow's. Result was ~14px above
   the handle and nothing below it. s2 on both sides, so they match. */
.rmp-page .rmp-insta__head .rmp-eyebrow{margin-bottom:var(--rmp-s2)}
.rmp-page .rmp-insta__handle{margin:0 0 var(--rmp-s2)}
.rmp-insta__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--rmp-s2)}
.rmp-insta__tile{display:block;border-radius:var(--rmp-radius);overflow:hidden;
	transition:transform .22s ease,box-shadow .22s ease}
.rmp-insta__tile .rmp-ph{aspect-ratio:1/1;min-height:0}
.rmp-insta__tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(20,22,28,.16)}
.rmp-insta__tile:focus-visible{outline:3px solid var(--rmp-red);outline-offset:3px}

/* --------------------------------------------------------------------------
   Promo cards
   The whole card is one link, so the arrow is decorative only.
   -------------------------------------------------------------------------- */
/* 16 Sep 2026 (Ava): the pair was running the full 1272px content width,
   which made each card 616px wide and its 16/9 photo 347px tall - the
   component came to 1272x636. Capped so the cards read as a pair of
   cards rather than two half-page panels. Height follows the width
   because the photos are a fixed ratio. One knob:
   1080px = 520px cards, 960px = 460px cards, none = full width. */
.rmp-promos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);
	max-width:var(--rmp-promos-max,960px);margin-inline:auto}
.rmp-promo{display:flex;flex-direction:column;height:100%;overflow:hidden;
	background:#fff;border-radius:var(--rmp-radius);color:inherit;text-decoration:none;
	box-shadow:0 2px 4px rgba(20,22,28,.06),0 12px 32px rgba(20,22,28,.10);
	transition:transform .25s ease,box-shadow .25s ease}
.rmp-promo:hover{transform:translateY(-6px);
	box-shadow:0 4px 8px rgba(20,22,28,.08),0 20px 44px rgba(20,22,28,.16)}
.rmp-promo:focus-visible{outline:3px solid var(--rmp-red);outline-offset:3px}
.rmp-promo__media .rmp-ph{aspect-ratio:16/9;min-height:0;border-radius:0}
.rmp-promo__media .rmp-ph:before{border-radius:0}
.rmp-promo__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.rmp-promo__body{display:flex;flex:1;flex-direction:column;gap:var(--rmp-s2);
	/* Upper bound trimmed 36 -> 28px to suit the narrower card. The 24px
	   floor is unchanged, so phones are untouched. */
	padding:clamp(24px,3vw,28px)}
.rmp-promo__kicker{font-size:.8125rem;font-weight:800;letter-spacing:.12em;
	text-transform:uppercase;color:var(--rmp-red)}
.rmp-promo__title{margin:0;color:var(--rmp-ink);font-weight:800;
	font-size:clamp(1.25rem,1.1rem + .5vw,1.625rem);line-height:1.25}
.rmp-promo__text{flex:1;margin:0;color:var(--rmp-body)}
.rmp-promo__more{display:inline-flex;align-items:center;gap:8px;
	color:var(--rmp-red);font-weight:800;font-size:.9375rem}
.rmp-promo__more svg{width:18px;height:18px;transition:transform .2s ease}
.rmp-promo:hover .rmp-promo__more svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Article card (used inside .rmp-carousel)
   -------------------------------------------------------------------------- */
.rmp-artcard{display:flex;flex-direction:column;gap:var(--rmp-s2);height:100%;
	color:inherit;text-decoration:none}
.rmp-artcard .rmp-ph{aspect-ratio:3/2;min-height:0}
/* Real card image, same box as the placeholder above it (15 Sep 2026: the
   strip is now generated from the articles by [rmp_advice_carousel]). */
.rmp-artcard__img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
	border-radius:var(--rmp-radius);background:var(--rmp-ph)}
.rmp-artcard__cat{font-size:.75rem;font-weight:800;letter-spacing:.12em;
	text-transform:uppercase;color:var(--rmp-red)}
.rmp-artcard__title{margin:0;color:var(--rmp-ink);font-size:1.125rem;
	font-weight:700;line-height:1.4;transition:color .18s ease}
.rmp-artcard__meta{color:var(--rmp-muted);font-size:var(--rmp-copy)}
.rmp-artcard:hover .rmp-artcard__title{color:var(--rmp-red)}
.rmp-artcard:focus-visible{outline:3px solid var(--rmp-red);outline-offset:4px}
.rmp-sec--ink .rmp-artcard__cat{color:#fff;opacity:.75}
.rmp-sec--ink .rmp-artcard__title{color:#fff}
.rmp-sec--ink .rmp-artcard__meta{color:rgba(255,255,255,.7)}
.rmp-sec--ink .rmp-artcard:hover .rmp-artcard__title{color:#fff;text-decoration:underline}
.rmp-sec--ink .rmp-artcard:focus-visible{outline-color:#fff}

/* --------------------------------------------------------------------------
   Trust strip — small reassurance row under the hero
   -------------------------------------------------------------------------- */
.rmp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rmp-s3);
	align-items:center}
.rmp-trust__item{display:flex;align-items:center;gap:var(--rmp-s2);
	font-size:.9375rem;font-weight:700;color:var(--rmp-ink);line-height:1.35}
.rmp-trust__item svg{width:34px;height:34px;flex:none;color:var(--rmp-red)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
	.rmp-insta__grid{grid-template-columns:repeat(3,1fr)}
	.rmp-trust{grid-template-columns:repeat(2,1fr);gap:var(--rmp-s4)}
}
@media (max-width:900px){
	.rmp-lifestage,.rmp-review,.rmp-promos{grid-template-columns:1fr}
	/* Single column: the card is now the full shell width, so the image is
	   roughly twice as wide and the rise has to scale with it. Same
	   "half the visible subject" target as above - see the note at .rmp-lst.
	   The -14px offset is not cosmetic: .rmp-lst__card's inline padding is
	   clamp(20px,3vw,40px), which stops shrinking at its 20px floor below
	   ~667px viewport. That makes the image relatively WIDER on small
	   screens than a straight vw ratio predicts, so the rise needs the
	   offset or the overlap falls to ~42% on a phone. Measured 48-52%
	   from 390px to 900px. Rescaled 2026-08-27 by 0.576 for the trimmed
	   1252x611 artwork. */
	.rmp-lst{--rmp-rise:clamp(54px,calc(21.9vw - 8px),189px)}
	.rmp-review__media{max-width:360px;margin-inline:auto}
	.rmp-hero--home .rmp-hero__inner{min-height:var(--rmp-hero-h-sm)}
	/* On a phone the copy sits over the middle of the photo rather than the
	   left of it, so the fade turns vertical and runs the other way: light at
	   the top, heavy at the bottom. Same strength dial. */
	.rmp-hero--home .rmp-hero__scrim{
		background:linear-gradient(180deg,
			rgba(20,22,28,calc(.55 * var(--rmp-scrim-k,1))) 0%,
			rgba(20,22,28,calc(.78 * var(--rmp-scrim-k,1))) 100%)}
}
@media (max-width:640px){
	.rmp-lst__btns{grid-template-columns:repeat(2,1fr)}
	.rmp-lst__btns .rmp-cta{width:100%}
	.rmp-insta__grid{grid-template-columns:repeat(2,1fr)}
	.rmp-trust{grid-template-columns:1fr}
	.rmp-stars svg{width:22px;height:22px}
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.rmp-promo,.rmp-insta__tile,.rmp-promo__more svg,.rmp-artcard__title{transition:none}
	.rmp-promo:hover,.rmp-insta__tile:hover{transform:none}
	.rmp-promo:hover .rmp-promo__more svg{transform:none}
}

/* --------------------------------------------------------------------------
   EVERY RECIPE component - heading measure
   --------------------------------------------------------------------------
   pages.css:95 sets text-wrap:balance on every h1-h4 sitewide, which evens
   the two lines out to 63% / 63% of the column. Ava wants the heading to run
   to the same right edge as the paragraphs beneath it, so this one heading
   falls back to greedy wrapping: 83% / 43%.

   NOT changed globally on purpose - balance is the better default for the
   short, centred headings used on the other ten landing pages; it only reads
   as "too narrow" here because it sits directly above a full-measure column
   of body copy. Specificity: #promise .rmp-h2 (1,1,0) beats .rmp-page h2
   (0,1,1), which is what carries the balance declaration. */
#promise .rmp-h2{text-wrap:wrap}

/* ==========================================================================
   Home page v2 bands (28 Sep 2026)
   --------------------------------------------------------------------------
   Every new section carries .rmp-v2, so all of this is opt-in and none of it
   touches the older bands (#ranges, #promise, the red quality band, the old
   advice carousel and the old Instagram wall), which are left as they were.

   Paragraph rules are written as `.rmp-page .rmp-v2 p.x` because pages.css
   gives every paragraph `margin:0 0 1.1em` at (0,1,1) and `p:last-child` at
   (0,2,1); headings and images use `.rmp-v2 .x` / `.rmp-v2 .x img`.

   Sections, top to bottom:
     .rmp-trust2       trust strip under the hero
     .rmp-pets-sec     "For dogs / For cats" tiles with range chips
     .rmp-rcards-sec   four range cards + the cat strip
     .rmp-revs2-sec    reviews: photo + score card + three review cards
     .rmp-adv2-sec     advice: [rmp_advice_feature] (inc/advice-carousel.php)
     .rmp-duo-sec      Ask the experts + store-locator search
     .rmp-insta2-sec   Instagram mosaic (Smash Balloon feed, restyled)
     .rmp-news-sec     newsletter panel (not connected - see home.js)
   ========================================================================== */
.rmp-v2{--rmp-r:12px;--rmp-r-lg:16px}
.rmp-page .rmp-v2 p{margin:0}
.rmp-page .rmp-v2 :where(figure){margin:0} /* (0,2,0): component rules below can still set a margin */
.rmp-v2 .wp-block-buttons{margin:0}

/* ---- Hero tweaks (the hero itself is not .rmp-v2) ---------------------- */
.rmp-hero--home{--rmp-focus:#fff}
/* Hero eyebrow: no red line (Ava, 28 Sep - removed after trying it before, then after, the text). */
/* Smaller CTA buttons on the home page (Ava, 28 Sep). Base sizes are in block-shim.css (54px, --lg 62px). */
body.home .rmp-ctas .wp-block-button__link{min-height:44px;padding:0 22px}
body.home .rmp-ctas .rmp-ctabtn--lg .wp-block-button__link{min-height:48px;padding:0 28px;font-size:.875rem}
.rmp-hero .rmp-ctas .is-style-rmp-ghost .wp-block-button__link{color:#fff;border-color:#fff}
.rmp-hero .rmp-ctas .is-style-rmp-ghost .wp-block-button__link:hover{background:#fff;color:var(--rmp-ink-deep);border-color:#fff}

/* ---- Shared v2 bits ----------------------------------------------------- */
.rmp-page .rmp-v2 .rmp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0}
.rmp-v2 .rmp-eyebrow::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
.rmp-v2 .rmp-eyebrow a{color:inherit;text-decoration:none}
.rmp-v2 .rmp-eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
.rmp-v2 .rmp-shead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--rmp-s4);
	margin-bottom:var(--rmp-s5)}
.rmp-v2 .rmp-shead__title{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.rmp-page .rmp-v2 .rmp-shead p.rmp-lede{max-width:560px;color:var(--rmp-muted)}
.rmp-v2 .rmp-shead .rmp-ctas{flex:none}
.rmp-page .rmp-v2 p.rmp-shead__link{flex:none}
.rmp-v2 .rmp-shead__link a,
.rmp-v2 .rmp-rcard__more a,
.rmp-v2 .rmp-mini__more a{font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;
	color:var(--rmp-red);text-decoration:none;white-space:nowrap}
.rmp-v2 .rmp-shead__link a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){
	.rmp-v2 .rmp-shead{flex-direction:column;align-items:flex-start;gap:var(--rmp-s2)}
}
/* Centred section head: eyebrow, H2 and lede stacked and centred (Find the right food, 28 Sep). */
.rmp-v2 .rmp-shead.rmp-shead--center{flex-direction:column;align-items:center;gap:var(--rmp-s2);text-align:center}
.rmp-v2 .rmp-shead--center .rmp-shead__title{align-items:center}
.rmp-page .rmp-v2 .rmp-shead--center p.rmp-lede{max-width:640px;margin-inline:auto}

/* ---- Trust strip -------------------------------------------------------- */
/* Same 48px top/bottom as every .rmp-sec (Ava, 29 Sep 2026: equal spacing between all homepage sections; was 64/16). */
.rmp-trust2{padding:var(--rmp-s5) 0;background:#fff}
/* 3 items since 28 Sep (Family Business / Grain Free Options / Irish Ingredients): a centred row, not a grid. */
.rmp-v2 .rmp-trust2__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--rmp-s3) var(--rmp-s7)}
.rmp-v2 .rmp-trust2__item{display:flex;align-items:center;gap:14px;min-width:0}
.rmp-v2 .rmp-trust2__icon{flex:none;width:58px;height:58px}
.rmp-v2 .rmp-trust2__icon img{width:58px;height:58px;object-fit:contain}
.rmp-page .rmp-v2 p.rmp-trust2__num{flex:none;width:58px;height:58px;border-radius:50%;background:var(--rmp-ink-deep);
	color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9375rem;line-height:1}
.rmp-v2 .rmp-trust2__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rmp-page .rmp-v2 p.rmp-trust2__title{color:var(--rmp-ink-deep);font-size:.9375rem;font-weight:700;line-height:1.2;
	letter-spacing:.04em;text-transform:uppercase}
.rmp-page .rmp-v2 p.rmp-trust2__desc{color:var(--rmp-muted);font-size:.875rem;line-height:1.35}
/* 4 items since 29 Sep (+ Irish Owned): one row of icon-beside-label on desktop,
   4 stacked columns on tablet, 2 x 2 on small phones. */
@media (max-width:1100px){
	.rmp-v2 .rmp-trust2__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rmp-s3) var(--rmp-s2)}
	.rmp-v2 .rmp-trust2__item{flex-direction:column;align-items:center;gap:10px;text-align:center}
}
@media (max-width:640px){
	.rmp-page .rmp-v2 p.rmp-trust2__title{font-size:.8125rem}
}
@media (max-width:480px){
	.rmp-v2 .rmp-trust2__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- For dogs / For cats tiles ------------------------------------------ */
.rmp-v2 .rmp-pets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.rmp-v2 .rmp-pet{position:relative;display:flex;flex-direction:column;gap:var(--rmp-s2);padding:40px;
	border-radius:var(--rmp-r-lg);overflow:hidden;color:#fff;--rmp-focus:#fff}
/* Both tiles light grey (Ava, 12 Oct 2026 - trial). Charcoal option for both:
   #3a3f47 0%, #1f2226 60% (the dog tile's original). Cat was brown
   #5b4637/#2b221c before 28 Sep. */
.rmp-v2 .rmp-pet--dog{background:radial-gradient(120% 90% at 70% 100%,#7b7e84 0%,#55585d 60%)}
.rmp-v2 .rmp-pet--cat{background:radial-gradient(120% 90% at 70% 100%,#7b7e84 0%,#55585d 60%)}
.rmp-v2 .rmp-pet__top{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rmp-page .rmp-v2 p.rmp-pet__kicker{color:#fff;opacity:.85}
/* H2 since 29 Sep (Ava) - tag and size now match the other section H2s (26px/700); was an H3 at 32-44px/800. */
.rmp-page .rmp-v2 .rmp-pet__title{color:#fff;font-size:var(--rmp-h2);font-weight:700;line-height:1.1;margin:0;
	text-transform:uppercase}
/* The two PNGs carry wide transparent bands above and below the artwork
   (dog ~14%/13% of the height, cat ~19%/19%). Negative margins trim most of
   that so the pack line-up sits close to the title and the chips; the chips
   are lifted above the image so the transparent area can't swallow clicks. */
.rmp-v2 .rmp-pet__img{margin-top:auto}
.rmp-v2 .rmp-pet__img img{width:100%;height:auto}
.rmp-v2 .rmp-pet--dog .rmp-pet__img img{margin:-7% 0 -5%}
.rmp-v2 .rmp-pet--cat .rmp-pet__img img{margin:-10% 0 -8%}
.rmp-v2 .rmp-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
/* product-filter.css styles a global .rmp-chip (red-tint pill) - neutralise it on the
   button wrapper so only the inner link is the chip. */
.rmp-v2 .rmp-chip,.rmp-v2 .rmp-chip:hover{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:auto}
.rmp-v2 .rmp-chip .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
	border:0;border-radius:999px;background:rgba(255,255,255,.95);color:var(--rmp-ink-deep);
	font:800 .8125rem/1.1 var(--rmp-font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
	transition:background .18s ease,transform .18s ease}
.rmp-v2 .rmp-chip .wp-block-button__link::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;
	background:var(--rmp-range,currentColor)}
.rmp-v2 .rmp-chip .wp-block-button__link:hover{background:#fff;color:var(--rmp-ink-deep);transform:translateY(-2px)}
.rmp-v2 .rmp-chip .wp-block-button__link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rmp-v2 .rmp-chip--gonative{--rmp-range:var(--rmp-gonative)}
.rmp-v2 .rmp-chip--leader{--rmp-range:var(--rmp-leader)}
.rmp-v2 .rmp-chip--winner{--rmp-range:var(--rmp-winner)}
.rmp-v2 .rmp-chip--engage{--rmp-range:var(--rmp-engage)}
.rmp-v2 .rmp-chip--all .wp-block-button__link{background:var(--rmp-red);color:#fff}
.rmp-v2 .rmp-chip--all .wp-block-button__link:hover{background:var(--rmp-red-dark);color:#fff}
.rmp-v2 .rmp-chip--all .wp-block-button__link::before{display:none}
@media (max-width:900px){
	.rmp-v2 .rmp-pets{grid-template-columns:1fr;gap:var(--rmp-s3)}
}
@media (max-width:640px){
	.rmp-v2 .rmp-pet{padding:28px}
	.rmp-v2 .rmp-chip .wp-block-button__link{padding:9px 14px;font-size:.75rem}
}

/* ---- Range cards + cat strip -------------------------------------------- */
.rmp-v2 .rmp-rcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rmp-s3)}
.rmp-v2 .rmp-rcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--rmp-r-lg);
	overflow:hidden;box-shadow:0 1px 0 var(--rmp-line);transition:transform .2s ease,box-shadow .2s ease}
.rmp-v2 .rmp-rcard--gonative{--rmp-rc:var(--rmp-gonative);--rmp-rc-hi:#46545f}
.rmp-v2 .rmp-rcard--leader{--rmp-rc:var(--rmp-leader);--rmp-rc-hi:#07806e}
.rmp-v2 .rmp-rcard--winner{--rmp-rc:var(--rmp-winner);--rmp-rc-hi:#16456f}
.rmp-v2 .rmp-rcard--engage{--rmp-rc:var(--rmp-engage);--rmp-rc-hi:#241a70}
.rmp-v2 .rmp-rcard__top{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;
	overflow:hidden;background:linear-gradient(160deg,var(--rmp-rc-hi,#46545f),var(--rmp-rc,var(--rmp-gonative)))}
.rmp-v2 .rmp-rcard__top::after{content:"";position:absolute;left:18%;right:18%;bottom:14px;height:22px;border-radius:50%;
	background:rgba(0,0,0,.3);filter:blur(10px)}
.rmp-page .rmp-v2 p.rmp-rcard__tag{position:absolute;top:16px;left:16px;z-index:2;padding:6px 12px;border-radius:999px;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;
	font-size:.6875rem;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.rmp-v2 .rmp-rcard__img{position:relative;z-index:1;display:flex;justify-content:center}
.rmp-v2 .rmp-rcard__img img{height:270px;width:auto;max-width:none;margin-bottom:-10px;transition:transform .3s ease}
.rmp-v2 .rmp-rcard__body{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px}
.rmp-v2 .rmp-rcard__title{color:var(--rmp-ink-deep);font-size:1.5rem;font-weight:800;line-height:1.1;text-transform:uppercase}
.rmp-page .rmp-v2 p.rmp-rcard__text{color:var(--rmp-muted);font-size:.9375rem;line-height:1.55}
.rmp-v2 .rmp-rcard__meta{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.rmp-v2 .rmp-rcard__meta li{margin:0;padding:5px 10px;border-radius:6px;background:var(--rmp-soft);color:var(--rmp-ink-deep);
	font-size:.75rem;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.rmp-page .rmp-v2 p.rmp-rcard__more{margin-top:auto;padding-top:10px}
/* Stretched link: the whole card is clickable, but only one link is read out. */
.rmp-v2 .rmp-rcard__more a::after,
.rmp-v2 .rmp-mini__more a::after{content:"";position:absolute;inset:0;z-index:3}
.rmp-v2 .rmp-rcard__more a:focus-visible,
.rmp-v2 .rmp-mini__more a:focus-visible{outline:none}
.rmp-v2 .rmp-rcard:has(a:focus-visible),
.rmp-v2 .rmp-mini:has(a:focus-visible){outline:2px solid var(--rmp-ink);outline-offset:3px}
.rmp-v2 .rmp-rcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(16,19,26,.28)}
.rmp-v2 .rmp-rcard:hover .rmp-rcard__img img{transform:translateY(-6px) rotate(-2deg)}
.rmp-v2 .rmp-rcard:hover .rmp-rcard__more a,
.rmp-v2 .rmp-mini:hover .rmp-mini__more a{text-decoration:underline;text-underline-offset:4px}

.rmp-v2 .rmp-catstrip{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--rmp-s3);margin-top:var(--rmp-s3)}
.rmp-v2 .rmp-catstrip__intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;
	padding:32px 36px;border-radius:var(--rmp-r-lg);background:var(--rmp-ink-deep);color:#fff}
.rmp-page .rmp-v2 .rmp-catstrip__intro p.rmp-eyebrow{color:#fff;opacity:.85}
.rmp-v2 .rmp-catstrip__title{color:#fff;font-size:1.75rem;font-weight:800;line-height:1.1;text-transform:uppercase}
.rmp-page .rmp-v2 .rmp-catstrip__intro p:not(.rmp-eyebrow){color:rgba(255,255,255,.8);font-size:.9375rem}
.rmp-v2 .rmp-mini{position:relative;display:flex;align-items:center;gap:18px;padding:18px 24px 18px 10px;
	border-radius:var(--rmp-r-lg);background:#fff;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.rmp-v2 .rmp-mini:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(16,19,26,.28)}
.rmp-v2 .rmp-mini__img{flex:none}
.rmp-v2 .rmp-mini__img img{height:170px;width:auto;max-width:none}
.rmp-v2 .rmp-mini__body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.rmp-v2 .rmp-mini__title{color:var(--rmp-ink-deep);font-size:1.25rem;font-weight:800;line-height:1.15;text-transform:uppercase}
.rmp-page .rmp-v2 p.rmp-mini__text{color:var(--rmp-muted);font-size:.875rem;line-height:1.45;margin-bottom:6px}
@media (max-width:1100px){
	.rmp-v2 .rmp-rcards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.rmp-v2 .rmp-catstrip{grid-template-columns:1fr}
}
@media (max-width:640px){
	.rmp-v2 .rmp-rcards{grid-template-columns:1fr}
	.rmp-v2 .rmp-rcard__top{height:220px}
	.rmp-v2 .rmp-rcard__img img{height:200px}
	.rmp-v2 .rmp-catstrip__intro{padding:28px 24px}
	.rmp-v2 .rmp-mini__img img{height:140px}
}
/* The kept "Explore by range" band used to follow the hero directly, which is
   why home.css halves its top padding (see #ranges above). It now follows the
   range cards, so give it the normal section padding back. The range cards
   were removed on 29 Sep 2026 and it now follows the "For dogs / For cats"
   band (.rmp-pets-sec), so that pairing gets the full padding too. */
.rmp-pets-sec + #ranges,
.rmp-rcards-sec + #ranges{padding-top:var(--rmp-sec-pad)}
/* The older range band scales its dog/cat artwork to 130% (.rmp-lst__img), which on
   phones pushes ~23px past the viewport and causes sideways scroll. Only the PNGs'
   transparent side margins sit out there, so clipping the x-axis is visually lossless.
   clip (not hidden) keeps overflow-y visible for the image's negative-margin rise. */
#ranges{overflow-x:clip}

/* ---- Reviews ------------------------------------------------------------ */
.rmp-v2 .rmp-revs2__grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--rmp-s5);align-items:stretch}
.rmp-v2 .rmp-revs2__photo{position:relative;min-height:460px;border-radius:var(--rmp-r-lg);overflow:hidden;background:var(--rmp-soft)}
.rmp-v2 .rmp-revs2__img{position:absolute;inset:0}
.rmp-v2 .rmp-revs2__img img{width:100%;height:100%;object-fit:cover}
.rmp-v2 .rmp-revs2__score{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;gap:16px;
	padding:16px 20px;border-radius:var(--rmp-r);background:#fff;box-shadow:0 12px 30px -16px rgba(16,19,26,.45)}
.rmp-page .rmp-v2 p.rmp-revs2__num{color:var(--rmp-ink-deep);font-size:2.5rem;font-weight:800;line-height:1}
.rmp-v2 .rmp-revs2__scoretext{display:flex;flex-direction:column;gap:4px;min-width:0}
.rmp-page .rmp-v2 p.rmp-rev__stars{color:#F5A623;font-size:1.125rem;letter-spacing:2px;line-height:1}
.rmp-page .rmp-v2 p.rmp-revs2__note{color:var(--rmp-muted);font-size:.8125rem;line-height:1.35}
.rmp-v2 .rmp-revs2__track{align-items:stretch}
.rmp-v2 .rmp-rev{display:flex;flex-direction:column;gap:16px;min-width:0;padding:28px;
	border:1px solid var(--rmp-line);border-radius:var(--rmp-r-lg);background:var(--rmp-soft)} /* grey (Ava, 28 Sep); was cream #FBF8F3 / #EFE9DF */
.rmp-page .rmp-v2 p.rmp-rev__quote{color:var(--rmp-ink-deep);font-size:1.0625rem;font-weight:500;line-height:1.55}
.rmp-page .rmp-v2 p.rmp-rev__prod{color:var(--rmp-red-dark);font-size:.75rem;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase}
.rmp-v2 .rmp-rev__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #DADCDF}
.rmp-page .rmp-v2 p.rmp-rev__av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
	background:var(--rmp-red);color:#fff;font-size:.9375rem;font-weight:800;line-height:1}
.rmp-v2 .rmp-rev__whotext{display:flex;flex-direction:column;min-width:0}
.rmp-page .rmp-v2 p.rmp-rev__name{color:var(--rmp-ink-deep);font-size:.9375rem;font-weight:700;line-height:1.3}
.rmp-page .rmp-v2 p.rmp-rev__meta{color:var(--rmp-muted);font-size:.8125rem;line-height:1.3}
/* Arrows only when there is something to scroll to (3 cards fit at desktop). */
.rmp-revs2 .rmp-carousel__nav:has([data-rmp-prev]:disabled):has([data-rmp-next]:disabled){display:none}
@media (max-width:1100px){
	.rmp-v2 .rmp-revs2__grid{grid-template-columns:1fr;gap:var(--rmp-s4)}
	.rmp-v2 .rmp-revs2__photo{min-height:340px}
}

/* ---- Advice & tips ([rmp_advice_feature]) ------------------------------- */
.rmp-adv2__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--rmp-s3);
	margin-bottom:var(--rmp-s5)}
.rmp-adv2__heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rmp-adv2__tabs{display:flex;flex-wrap:wrap;gap:8px}
.rmp-adv2__tabs[hidden],
.rmp-adv2__panel[hidden]{display:none}
.rmp-adv2__tab{appearance:none;margin:0;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
	background:transparent;color:#fff;cursor:pointer;font:700 .8125rem/1.1 var(--rmp-font);letter-spacing:.08em;
	text-transform:uppercase;transition:background .18s ease,color .18s ease,border-color .18s ease}
.rmp-adv2__tab:hover{border-color:#fff}
.rmp-adv2__tab[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--rmp-ink)}
.rmp-adv2__tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rmp-adv2__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--rmp-s3)}
.rmp-adv2__feat{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:500px;
	border-radius:var(--rmp-r-lg);overflow:hidden;background:#1f2226;color:#fff;text-decoration:none}
.rmp-adv2 .rmp-adv2__featimg{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;max-width:none;
	object-fit:cover;transition:transform .5s ease}
.rmp-adv2__feat::after{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82))}
.rmp-adv2__body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px}
.rmp-adv2__kicker{display:inline-block;padding:5px 10px;border-radius:6px;background:var(--rmp-red);color:#fff;
	font-size:.75rem;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.rmp-adv2 .rmp-adv2__title{color:#fff;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);font-weight:700;line-height:1.2;
	letter-spacing:0;text-transform:none}
.rmp-adv2__meta{color:rgba(255,255,255,.75);font-size:.875rem}
.rmp-adv2__list{display:flex;flex-direction:column;gap:16px}
.rmp-adv2__item{flex:1;display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:12px;
	border:1px solid rgba(255,255,255,.1);border-radius:var(--rmp-r);background:rgba(255,255,255,.05);color:#fff;
	text-decoration:none;transition:background .18s ease,border-color .18s ease}
.rmp-adv2 .rmp-adv2__itemimg{display:block;width:180px;height:120px;max-width:none;object-fit:cover;border-radius:10px}
.rmp-adv2__itembody{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.rmp-adv2__item .rmp-adv2__kicker{padding:0;background:transparent;color:#fff} /* was pink #FF8A9F; white at Ava's request 29 Sep 2026 (red was too hard to read on the dark band) */
.rmp-adv2 .rmp-adv2__itemtitle{color:#fff;font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}
.rmp-adv2__ph{display:block;background:rgba(255,255,255,.08)}
.rmp-adv2__feat:hover .rmp-adv2__featimg{transform:scale(1.03)}
.rmp-adv2__feat:hover .rmp-adv2__title,
.rmp-adv2__item:hover .rmp-adv2__itemtitle{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.rmp-adv2__item:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.rmp-adv2__feat:focus-visible,
.rmp-adv2__item:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rmp-page .rmp-v2 p.rmp-adv2__foot{margin-top:var(--rmp-s4)}
.rmp-adv2__all{display:inline-flex;gap:8px;padding-bottom:4px;border-bottom:2px solid var(--rmp-red);color:#fff;
	font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.rmp-adv2__all:hover{border-color:#fff}
.rmp-adv2__all:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* The old advice carousel is kept underneath for now - a hairline stops the
   two ink bands merging into one. */
.rmp-adv2-sec + .rmp-sec--ink{border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:1100px){
	.rmp-adv2__grid{grid-template-columns:1fr}
	.rmp-adv2__feat{min-height:420px}
}
@media (max-width:640px){
	.rmp-adv2__feat{min-height:380px}
	.rmp-adv2__body{padding:24px}
	.rmp-adv2 .rmp-adv2__title{font-size:1.5rem}
	.rmp-adv2__item{grid-template-columns:110px minmax(0,1fr);gap:14px}
	.rmp-adv2 .rmp-adv2__itemimg{width:110px;height:90px}
	.rmp-adv2 .rmp-adv2__itemtitle{font-size:1rem}
}

/* ---- Ask the experts + Where to buy ------------------------------------- */
.rmp-v2 .rmp-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.rmp-v2 .rmp-duo__card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
	align-items:flex-start;gap:12px;min-height:280px;padding:36px 40px;border-radius:var(--rmp-r-lg);overflow:hidden; /* was 380px / 44px (Ava, 28 Sep) */
	background:var(--rmp-ink-deep);color:#fff;--rmp-focus:#fff}
.rmp-v2 .rmp-duo__bg{position:absolute;inset:0;z-index:-2}
.rmp-v2 .rmp-duo__bg img{width:100%;height:100%;object-fit:cover}
.rmp-v2 .rmp-duo__card::before{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(90deg,rgba(15,16,18,.85),rgba(15,16,18,.25))}
.rmp-page .rmp-v2 .rmp-duo__card p.rmp-eyebrow{color:#fff}
.rmp-v2 .rmp-duo__card .rmp-eyebrow::before{background:var(--rmp-red)}
/* H2 scale, same as .rmp-h2 (Ava, 28 Sep; was clamp up to 34px / 800) */
.rmp-v2 .rmp-duo__title{color:#fff;font-size:var(--rmp-h2);font-weight:700;line-height:1.12;
	text-transform:uppercase}
.rmp-page .rmp-v2 .rmp-duo__card p:not(.rmp-eyebrow){max-width:420px;margin-bottom:12px;color:rgba(255,255,255,.9)}
.rmp-v2 .rmp-duo__search{display:flex;align-items:center;width:100%;max-width:460px;margin:0;padding:6px;
	border-radius:999px;background:#fff}
.rmp-v2 .rmp-duo__search:focus-within{outline:2px solid #fff;outline-offset:3px}
.rmp-v2 .rmp-duo__search input{flex:1;min-width:0;height:44px;padding:0 18px;border:0;outline:0;background:transparent;
	color:var(--rmp-ink-deep);font:500 1rem var(--rmp-font)}
.rmp-v2 .rmp-duo__search input::placeholder,
.rmp-v2 .rmp-news__form input::placeholder{color:var(--rmp-muted);opacity:1}
.rmp-v2 .rmp-duo__search button{flex:none;height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--rmp-red);
	color:#fff;cursor:pointer;font:700 .875rem/1 var(--rmp-font);letter-spacing:.08em;text-transform:uppercase}
.rmp-v2 .rmp-duo__search button:hover{background:var(--rmp-red-dark)}
@media (max-width:1100px){
	.rmp-v2 .rmp-duo{grid-template-columns:1fr;gap:var(--rmp-s3)}
}
@media (max-width:640px){
	.rmp-v2 .rmp-duo__card{min-height:260px;padding:28px}
	.rmp-v2 .rmp-duo__search input{padding:0 12px}
	.rmp-v2 .rmp-duo__search button{padding:0 18px}
}

/* ---- Instagram mosaic ----------------------------------------------------
   Restyles the Smash Balloon feed into 1 large + 7 tiles. The plugin sets its
   own grid, gaps, heights and (on load) inline styles, hence !important.
   The feed returns 8 posts (its own setting), so tile 8 spans two columns to
   close the grid; tablet shows 5 tiles, phone 6. */
.rmp-insta2 #sb_instagram{width:100%!important;padding:0!important}
.rmp-insta2 #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
	gap:14px!important;width:100%!important;padding:0!important;float:none!important}
.rmp-insta2 #sb_instagram #sbi_images .sbi_item{position:relative;display:block!important;width:auto!important;
	height:auto!important;margin:0!important;padding:0!important;aspect-ratio:1;border-radius:var(--rmp-r);
	overflow:hidden;background:var(--rmp-soft)}
.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* 28 Sep: feed now returns 9 posts, so 1 large + 8 squares fill 2 rows of 6 exactly (no wide last tile). */
.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(n+10){display:none!important}
.rmp-insta2 #sb_instagram .sbi_photo_wrap,
.rmp-insta2 #sb_instagram .sbi_photo{position:absolute!important;inset:0!important;width:100%!important;
	height:100%!important;margin:0!important}
.rmp-insta2 #sb_instagram .sbi_photo img{position:absolute;inset:0;width:100%!important;height:100%!important;
	max-width:none;object-fit:cover}
.rmp-insta2 #sb_instagram .sbi_photo:focus-visible{outline:3px solid var(--rmp-red);outline-offset:-3px}
@media (max-width:1100px){
	.rmp-insta2 #sb_instagram #sbi_images{grid-template-columns:repeat(4,minmax(0,1fr))!important}
	.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(8){grid-column:auto;aspect-ratio:1}
	.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(n+6){display:none!important}
}
@media (max-width:640px){
	.rmp-insta2 #sb_instagram #sbi_images{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
	.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(6){display:block!important}
	.rmp-insta2 #sb_instagram #sbi_images .sbi_item:nth-child(n+7){display:none!important}
}

/* ---- Newsletter --------------------------------------------------------- */
.rmp-v2 .rmp-news{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	gap:40px;align-items:center;padding:36px 56px;border-radius:var(--rmp-r-lg);overflow:hidden; /* was 56px 64px (Ava, 28 Sep) */
	background:var(--rmp-red);color:#fff;--rmp-focus:#fff}
.rmp-v2 .rmp-news::before{content:"";position:absolute;inset:0;z-index:-1;
	background:radial-gradient(60% 120% at 100% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.rmp-v2 .rmp-news__copy{display:flex;flex-direction:column;gap:10px}
.rmp-v2 .rmp-news__title{color:#fff;font-size:var(--rmp-h2);font-weight:700;line-height:1.12; /* H2 scale (Ava, 28 Sep) */
	text-transform:uppercase}
.rmp-page .rmp-v2 .rmp-news p{color:rgba(255,255,255,.92)}
.rmp-v2 .rmp-news__formwrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.rmp-v2 .rmp-news__form{display:flex;align-items:center;margin:0;padding:6px;border-radius:999px;background:#fff}
.rmp-v2 .rmp-news__form:focus-within{outline:2px solid #fff;outline-offset:3px}
.rmp-v2 .rmp-news__form input{flex:1;min-width:0;height:48px;padding:0 20px;border:0;outline:0;background:transparent;
	color:var(--rmp-ink-deep);font:500 1rem var(--rmp-font)}
.rmp-v2 .rmp-news__form button{flex:none;height:48px;padding:0 26px;border:0;border-radius:999px;
	background:var(--rmp-ink-deep);color:#fff;cursor:pointer;font:700 .875rem/1 var(--rmp-font);letter-spacing:.08em;
	text-transform:uppercase}
.rmp-v2 .rmp-news__form button:hover{background:#000}
.rmp-page .rmp-v2 p.rmp-news__status{color:#fff;font-weight:700}
.rmp-page .rmp-v2 p.rmp-news__status:empty{display:none}
.rmp-page .rmp-v2 p.rmp-news__note{color:rgba(255,255,255,.85);font-size:.8125rem}
.rmp-v2 .rmp-news__note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (max-width:1100px){
	.rmp-v2 .rmp-news{grid-template-columns:1fr;gap:var(--rmp-s4)}
}
@media (max-width:640px){
	.rmp-v2 .rmp-news{padding:36px 24px}
	.rmp-v2 .rmp-news__form input{padding:0 14px}
	.rmp-v2 .rmp-news__form button{padding:0 18px}
}

@media (prefers-reduced-motion:reduce){
	.rmp-v2 .rmp-rcard,.rmp-v2 .rmp-mini,.rmp-v2 .rmp-rcard__img img,.rmp-v2 .rmp-chip .wp-block-button__link,
	.rmp-adv2 .rmp-adv2__featimg{transition:none}
	.rmp-v2 .rmp-rcard:hover,.rmp-v2 .rmp-mini:hover,.rmp-v2 .rmp-rcard:hover .rmp-rcard__img img,
	.rmp-v2 .rmp-chip .wp-block-button__link:hover,.rmp-adv2__feat:hover .rmp-adv2__featimg{transform:none}
}

/* ---- Equal section spacing (Ava, 29 Sep 2026) ---------------------------
   Every homepage section is 48px top + 48px bottom (so 96px between the
   content of neighbouring sections). These remove the two internal offsets
   that made some gaps bigger:
   - the Food Ranges synced pattern (#ranges) opens with an eyebrow that
     carries a 16px top margin;
   - the reviews scroller keeps 8px bottom padding for its focus ring/scrollbar. */
body.home .rmp-page .rmp-sec .rmp-head > p.rmp-eyebrow:first-child{margin-top:0}
@media (max-width:1100px){
	body.home .rmp-page .rmp-v2 .rmp-revs2__track{margin-bottom:-8px}
}

/* ---- Red text CTA with arrow (Ava, 29 Sep 2026: "VIEW ALL RANGES ->") -----
   Paragraph with class rmp-arrowlink holding one link; the arrow is added
   here so editors only type the words. Reusable in any section. */
.rmp-page p.rmp-arrowlink{margin:0}
.rmp-page .rmp-arrowlink a{display:inline-flex;align-items:center;gap:.4em;color:var(--rmp-red);
	font-size:1.0625rem;font-weight:700;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;
	text-decoration:none;white-space:nowrap;transition:color .18s ease}
.rmp-page .rmp-arrowlink a::after{content:"\2192";font-weight:400;font-size:1.25em;line-height:1;
	transition:transform .18s ease}
.rmp-page .rmp-arrowlink a:hover{color:var(--rmp-red-dark)}
.rmp-page .rmp-arrowlink a:hover::after{transform:translateX(4px)}
.rmp-page .rmp-arrowlink a:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.rmp-page .rmp-arrowlink a::after{transition:none}}

/* Section head right-hand column: lede with the CTA under it (Explore by range). */
.rmp-v2 .rmp-shead__aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rmp-s2);
	max-width:560px;min-width:0}

/* ---- Smaller type scale (Ava, 29 Sep 2026) --------------------------------
   H1 28 / H2 24 / H3 20 / body 15 was trialled here on the homepage and is now
   site-wide (theme.json presets + pages.css :root), so the homepage-only
   token override that lived here has been removed. */
/* Homepage one-offs brought onto the trial scale (Ava, 29 Sep 2026). Same
   width at every breakpoint, so the older mobile overrides are outbid too. */
body.home .rmp-page .rmp-lst__title{font-size:var(--rmp-h2);font-weight:700} /* Food Ranges dog/cat: 24px, H2 weight */
body.home .rmp-page .rmp-adv2 .rmp-adv2__title{font-size:var(--rmp-h2)}      /* Advice feature: 24px (standard H2, Ava 29 Sep; was a 28px one-off) */
body.home .rmp-page .rmp-adv2 .rmp-adv2__itemtitle{font-size:.9375rem}       /* Advice list: 15px */
body.home .rmp-page .rmp-v2 p.rmp-rev__quote{font-size:.9375rem}             /* Review quotes: 15px */
/* Every CTA - block buttons, range buttons, arrow links, newsletter button: 13px */
body.home .rmp-page .wp-block-button__link,
body.home .rmp-page .rmp-ctas .rmp-ctabtn--lg .wp-block-button__link,
body.home .rmp-page .rmp-v2 .rmp-chip .wp-block-button__link,
body.home .rmp-page .rmp-rbtn,
body.home .rmp-page .rmp-arrowlink a,
body.home .rmp-page .rmp-v2 .rmp-news__form button{font-size:.8125rem}

/* ---- Tweak round 4 (Ava, 29 Sep 2026) - more compact homepage -------------
   Rollback: delete this block (backup home.css.before-round4). */
/* Shorter CTA buttons: standard 44->38, large (hero) 48->42, range buttons
   54->44, pet chips 34->30, newsletter field + button 48->40. */
body.home .rmp-ctas .wp-block-button__link{min-height:38px}
body.home .rmp-ctas .rmp-ctabtn--lg .wp-block-button__link{min-height:42px}
body.home .rmp-page .rmp-v2 .rmp-chip .wp-block-button__link{padding-top:8px;padding-bottom:8px}
body.home .rmp-page .rmp-rbtn{min-height:44px}
body.home .rmp-page .rmp-v2 .rmp-news__form input,
body.home .rmp-page .rmp-v2 .rmp-news__form button{height:40px}
/* For dogs / For cats cards: pack line-up drawn at 80% width (centred) with
   the transparent-band trims scaled to match, and 32px padding (was 40). */
body.home .rmp-page .rmp-v2 .rmp-pet__img img{display:block;width:80%;margin-inline:auto}
body.home .rmp-page .rmp-v2 .rmp-pet--dog .rmp-pet__img img{margin-top:-5.6%;margin-bottom:-4%}
body.home .rmp-page .rmp-v2 .rmp-pet--cat .rmp-pet__img img{margin-top:-8%;margin-bottom:-6.4%}
@media (min-width:641px){body.home .rmp-page .rmp-v2 .rmp-pet{padding:32px}}
/* Reviews: row 460->400px on desktop; cards stretch to the photo height. */
@media (min-width:1101px){body.home .rmp-page .rmp-v2 .rmp-revs2__photo{min-height:400px}}
/* Ask the experts / Find stockists cards: 288->~260px. */
@media (min-width:641px){body.home .rmp-page .rmp-v2 .rmp-duo__card{min-height:240px;padding:28px 36px}}
/* Instagram sits between two white sections whose content is dark cards, so
   its own 48px top/bottom doubled the white gap (96px) vs the 48px seen next
   to every banded section. Zero it so the gaps either side read as 48px. */
body.home .rmp-page .rmp-insta2-sec{padding-top:0;padding-bottom:0}
/* Tighter section heads (Ava's screenshots, 29 Sep 2026), every .rmp-shead on
   the homepage (Explore, Instagram, ...):
   - H2 -> lede: 36px -> 12px (the column's flex gap only; the site-wide 24px
     heading->paragraph rule in pages.css is switched off here)
   - head -> content below: 48px -> 32px */
body.home main .rmp-v2 .rmp-shead__title > :is(h1,h2,h3) + p{margin-top:0!important}
body.home .rmp-page .rmp-v2 .rmp-shead{margin-bottom:var(--rmp-s4)}
/* Trust strip -> Explore: 96px -> 48px of white (strip keeps its 48px top). */
body.home .rmp-page .rmp-trust2{padding-bottom:0}

/* ---- Food finder (#food-finder, .rmp-finder-sec) - 29 Sep 2026 ------------
   Blue Buffalo "Find the perfect pet food" style: rounded photo left, H2 with
   a red rule, letter-spaced kicker, copy and two buttons right. All native
   blocks - image, text and buttons are editable in the block editor. */
.rmp-v2 .rmp-finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(32px,5vw,72px);align-items:center}
.rmp-v2 .rmp-finder__img{margin:0;aspect-ratio:3/2;border-radius:var(--rmp-r-lg);overflow:hidden;background:#fff}
.rmp-v2 .rmp-finder__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.rmp-v2 .rmp-finder__body{min-width:0}
/* Full-width red border under the H2 replaced (30 Sep 2026, Ava) by the standard
   short rule - a core Separator with class rmp-rule in the page content, same as
   the Our story / Ingredients sections. */
.rmp-page .rmp-v2 .rmp-finder__title{margin:0}
.rmp-page .rmp-v2 p.rmp-finder__kicker{margin:var(--rmp-s3) 0 0;color:var(--rmp-ink-deep);font-size:.8125rem;
	font-weight:700;letter-spacing:.2em;line-height:1.3;text-transform:uppercase}
.rmp-page .rmp-v2 p.rmp-finder__text{margin:12px 0 0;max-width:62ch;color:var(--rmp-body);line-height:1.7}
.rmp-v2 .rmp-finder__ctas{margin-top:var(--rmp-s4);gap:var(--rmp-s2)}
.rmp-v2 .rmp-finder__ctas .wp-block-button__link{min-width:180px}
@media (max-width:900px){
	.rmp-v2 .rmp-finder{grid-template-columns:1fr;gap:var(--rmp-s4)}
}

/* Laptop side gutters now live in pages.css (site-wide since 29 Sep 2026). */
/* The wider gutter leaves the 4-item trust strip ~25px short of one row at
   1200-1400px, so on laptops it spreads edge-to-edge with a smaller minimum
   gap instead of wrapping to 3 + 1. 1440+ keeps its centred 88px gaps. */
@media (min-width:1101px) and (max-width:1439.98px){
	body.home .rmp-v2 .rmp-trust2__list{flex-wrap:nowrap;justify-content:space-between;column-gap:var(--rmp-s3)}
}

/* ---- Homepage tweaks (Ava, 29 Sep 2026, round 4) --------------------------
   1. Trust strip: icons centred top-to-bottom in the grey band (was 48px top,
      0 bottom).
   2. Food finder: text left, image right on desktop (mobile keeps the image
      on top). Visual order only - block order in the editor is unchanged.
   3. Advice & tips: shorter overall (768px -> ~590px at 1440).
   4. Eyebrows: no red line before the text, anywhere. */
body.home .rmp-page .rmp-trust2{padding:var(--rmp-s4) 0}
body.home .rmp-v2 .rmp-trust2__list{align-items:center}

@media (min-width:901px){
	.rmp-v2 .rmp-finder__img{order:2}
}

.rmp-adv2__head{margin-bottom:var(--rmp-s4)}
.rmp-adv2__feat{min-height:340px}
.rmp-adv2__body{padding:28px}
.rmp-adv2__list{gap:12px}
.rmp-adv2__item{grid-template-columns:120px minmax(0,1fr);gap:16px;padding:10px}
.rmp-adv2 .rmp-adv2__itemimg{width:120px;height:80px}
@media (max-width:1100px){
	.rmp-adv2__feat{min-height:320px}
}
@media (max-width:640px){
	.rmp-adv2__feat{min-height:280px}
	.rmp-adv2__body{padding:22px}
	.rmp-adv2__item{grid-template-columns:96px minmax(0,1fr);gap:12px}
	.rmp-adv2 .rmp-adv2__itemimg{width:96px;height:72px}
}

.rmp-v2 .rmp-eyebrow::before,
.rmp-v2 .rmp-duo__card .rmp-eyebrow::before{content:none;display:none}

/* ---- Homepage tweaks round 5 (Ava, 29 Sep 2026) ---------------------------
   1. "Browse all advice" link 13px (the small-text size; was 15px).
   2. White space above Instagram. The Ask the experts / Where to buy cards
      are hidden above 782px, so Instagram sits straight under the dark
      advice band and its zero top padding left the eyebrow touching it.
      Below 783px the cards section is still there and supplies the gap.
   3. Advice & tips squeezed further (592px -> ~520px at 1440). */
body.home .rmp-page .rmp-adv2__all{font-size:.8125rem}
/* Only when Instagram follows the dark advice band directly (i.e. the duo
   cards section is removed); with the cards back it keeps its zero top. */
body.home .rmp-page .rmp-adv2-sec + .rmp-insta2-sec{padding-top:var(--rmp-s5)}
.rmp-adv2__head{margin-bottom:var(--rmp-s3)}
.rmp-adv2__feat{min-height:280px}
.rmp-adv2__body{padding:24px}
.rmp-adv2__list{gap:10px}
.rmp-adv2__item{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:8px}
.rmp-adv2 .rmp-adv2__itemimg{width:104px;height:68px}
.rmp-adv2__itembody{gap:4px}
.rmp-page .rmp-v2 p.rmp-adv2__foot{margin-top:var(--rmp-s3)}
@media (max-width:1100px){
	.rmp-adv2__feat{min-height:260px}
}
@media (max-width:640px){
	.rmp-adv2__feat{min-height:240px}
	.rmp-adv2__item{grid-template-columns:88px minmax(0,1fr);gap:12px}
	.rmp-adv2 .rmp-adv2__itemimg{width:88px;height:64px}
}

/* Trust strip labels under the hero (Family Business, Grain Free...) -
   #4D4B4B (Ava, 30 Sep 2026; was --rmp-ink-deep). */
body.home .rmp-page .rmp-v2 p.rmp-trust2__title,
body.home .rmp-page .rmp-v2 p.rmp-trust2__desc{color:#4D4B4B}

/* Tighter gap between the dog/cat range tiles and the food finder
   (Ava, 30 Sep 2026): was 48px + 48px = 96px, now 24px + 32px = 56px. */
body.home .rmp-page .rmp-sec.rmp-pets-sec{padding-bottom:24px}
body.home .rmp-page .rmp-sec.rmp-pets-sec + .rmp-finder-sec{padding-top:32px}

/* One banner size sitewide (Ava, 30 Sep 2026): every banner is 540px above
   900px and 400px at 900px and below. The homepage banner carries more copy
   than the others, so on tablets/phones it tightens the eyebrow/button gaps
   to 16px (headline -> intro stays 24px, the sitewide heading -> intro rule).
   Together with the 32px minimum banner padding and side-by-side banner
   buttons (both in pages.css) that lets it fit the same 400px down to 320px. */
@media (max-width:900px){
	.rmp-hero.rmp-hero--home{--rmp-hero-gap:16px}
}

/* "Explore by range" intro on one line on monitors (Ava, 12 Oct 2026). The
   560px cap wraps it to two lines; at 1600px+ there is room for its ~631px
   natural width, so the cap is lifted there only. Laptop and mobile unchanged. */
@media (min-width:1600px){
	body.home .rmp-page #explore .rmp-shead p.rmp-lede{max-width:none}
}

/* For dogs / For cats: cat line-up sits on the same baseline as the dog one
   (Ava, 12 Oct 2026). Side by side (901px+) the tiles share grid rows
   (subgrid), so the dog's two-row chips no longer push its image higher than
   the cat's; images sit at the bottom of the shared row and the cat trim
   (-7.4%) matches its transparent band to the dog's. Stacked layout unchanged.
   Rollback: delete this block. */
@media (min-width:901px){
	body.home .rmp-v2 .rmp-pets{grid-template-rows:auto 1fr auto}
	body.home .rmp-page .rmp-v2 .rmp-pet{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--rmp-s2)}
	body.home .rmp-v2 .rmp-pet__img{align-self:end;margin-top:0}
	body.home .rmp-page .rmp-v2 .rmp-pet--cat .rmp-pet__img img{margin-bottom:-7.4%}
}