/* ==========================================================================
   Red Mills Pet - mega menu header
   ========================================================================== */

@font-face{font-family:'Maven Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/maven-pro-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Maven Pro';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/maven-pro-v20-latin-500.woff2') format('woff2');}
@font-face{font-family:'Maven Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/maven-pro-v20-latin-700.woff2') format('woff2');}

:root{
	--rmp-red:#e51937;
	--rmp-red-dark:#c1132c;
	--rmp-ink:#14161c;
	--rmp-muted:#5d6470;
	--rmp-line:#e6e8ec;
	--rmp-bg-soft:#f6f7f9;
	--rmp-shell:1320px;
	--rmp-bar-h:88px;
	--rmp-font:'Maven Pro','Helvetica Neue',Arial,sans-serif;
	--rmp-shadow:0 18px 40px -18px rgba(16,19,26,.28);
}

.rmp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rmp-anchor{display:block;height:0;overflow:hidden}

.rmp-skip{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--rmp-red);color:#fff;padding:.75rem 1.25rem;font:700 15px/1 var(--rmp-font);border-radius:0 0 6px 0}
.rmp-skip:focus{left:0}

/* ---------- shell ---------- */
.rmp-header{position:sticky;top:0;z-index:1000;font-family:var(--rmp-font);font-weight:400;background:#fff;
	transition:box-shadow .25s ease}
.rmp-header.is-stuck{box-shadow:0 6px 22px -12px rgba(16,19,26,.38)}
.rmp-header *,.rmp-header *:before,.rmp-header *:after{box-sizing:border-box}

/* ---------- main bar ---------- */
.rmp-bar{border-bottom:1px solid var(--rmp-line);background:#fff;position:relative;z-index:2}
.rmp-bar__inner{max-width:var(--rmp-shell);margin:0 auto;padding:0 24px;height:var(--rmp-bar-h);
	display:flex;align-items:center;gap:28px}

.rmp-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* Wordmark is ~2.6:1, so it is sized shorter than the old stacked mark. */
.rmp-logo img{display:block;height:46px;width:auto}

/* ---------- nav ---------- */
.rmp-nav{flex:1 1 auto;min-width:0}
.rmp-nav__list{display:flex;align-items:center;justify-content:center;gap:2px;margin:0;padding:0;list-style:none}
.rmp-nav__item{position:static;margin:0;padding:0}
.rmp-nav__link{display:inline-flex;align-items:center;gap:6px;padding:0 14px;height:var(--rmp-bar-h);
	color:var(--rmp-ink);text-decoration:none;font-size:14.5px;font-weight:500;letter-spacing:-.1px;
	text-transform:uppercase;white-space:nowrap;position:relative;background:none;border:0;cursor:pointer;
	font-family:var(--rmp-font)}
.rmp-nav__link:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:4px;background:var(--rmp-red);
	transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.rmp-nav__link:hover,.rmp-nav__link:focus-visible{color:var(--rmp-red)}
.rmp-nav__item.is-open>.rmp-nav__link,
.rmp-nav__item.is-current>.rmp-nav__link{color:var(--rmp-red)}
.rmp-nav__item.is-open>.rmp-nav__link:after,
.rmp-nav__item.is-current>.rmp-nav__link:after,
.rmp-nav__link:hover:after{transform:scaleX(1)}
.rmp-icon{width:16px;height:16px;flex:0 0 auto}
.rmp-icon--chevron{transition:transform .22s ease;opacity:.75}
.rmp-nav__item.is-open .rmp-icon--chevron{transform:rotate(180deg)}
.rmp-icon--arrow{width:18px;height:18px;transition:transform .2s ease}

/* ---------- utilities ---------- */
.rmp-utils{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.rmp-util{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;
	border:1.5px solid var(--rmp-line);background:#fff;color:var(--rmp-ink);text-decoration:none;
	font:700 13.5px/1 var(--rmp-font);letter-spacing:.03em;cursor:pointer;transition:all .18s ease}
.rmp-util:hover{border-color:var(--rmp-red);color:var(--rmp-red)}
.rmp-util--locator{background:var(--rmp-red);border-color:var(--rmp-red);color:#fff}
.rmp-util--locator:hover{background:var(--rmp-red-dark);border-color:var(--rmp-red-dark);color:#fff}
.rmp-util--search{width:44px;padding:0;justify-content:center}

.rmp-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--rmp-line);
	background:#fff;border-radius:999px;cursor:pointer}
.rmp-burger__bars{display:block;width:19px}
.rmp-burger__bars i{display:block;height:2px;background:var(--rmp-ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.rmp-burger__bars i+i{margin-top:4px}
.rmp-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.rmp-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.rmp-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- search ---------- */
.rmp-search{border-bottom:1px solid var(--rmp-line);background:var(--rmp-bg-soft);position:relative;z-index:2}
.rmp-search__form{max-width:var(--rmp-shell);margin:0 auto;padding:18px 24px;display:flex;gap:12px}
.rmp-search__field{flex:1 1 auto;height:52px;border:1.5px solid var(--rmp-line);border-radius:4px;padding:0 18px;
	font:400 16px/1 var(--rmp-font);background:#fff;color:var(--rmp-ink)}
.rmp-search__field:focus{outline:none;border-color:var(--rmp-red)}

/* ---------- buttons ---------- */
.rmp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border:0;
	border-radius:4px;font:700 14px/1 var(--rmp-font);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
	transition:transform .18s ease,background .18s ease,color .18s ease}
.rmp-btn--red{background:var(--rmp-red);color:#fff}
.rmp-btn--red:hover{background:var(--rmp-red-dark);color:#fff}
.rmp-btn--light{background:#fff;color:var(--rmp-red)}
.rmp-btn--light:hover{background:var(--rmp-ink);color:#fff}
.rmp-btn:hover .rmp-icon--arrow{transform:translateX(3px)}

/* ---------- mega panel ---------- */
.rmp-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--rmp-line);
	box-shadow:var(--rmp-shadow);opacity:0;visibility:hidden;transform:translateY(-8px);
	transition:opacity .2s ease,transform .22s ease,visibility .22s;z-index:1}
.rmp-mega[hidden]{display:block}                 /* animate instead of display:none */
.rmp-nav__item.is-open>.rmp-mega{opacity:1;visibility:visible;transform:translateY(0)}
.rmp-mega__inner{max-width:var(--rmp-shell);margin:0 auto;padding:44px 24px 48px;
	display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.5fr) minmax(280px,.95fr);gap:48px;align-items:start}

.rmp-mega__title{margin:0 0 12px;font:700 30px/1.15 var(--rmp-font);color:var(--rmp-ink);letter-spacing:-.01em}
.rmp-mega__strap{margin:0;font:400 15.5px/1.6 var(--rmp-font);color:var(--rmp-muted);max-width:30ch}

/* decorative red accent closing the intro block */
.rmp-mega__intro:after{content:"";display:block;width:100%;max-width:280px;height:3px;
	margin-top:22px;border-radius:3px;background:var(--rmp-red)}

.rmp-mega__links{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.rmp-mega__links li{break-inside:avoid;margin:0 0 4px}
.rmp-mega__links a{display:block;padding:11px 14px 11px 16px;border-radius:6px;text-decoration:none;
	border-left:3px solid transparent;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.rmp-mega__links a:hover,.rmp-mega__links a:focus-visible{background:var(--rmp-bg-soft);border-left-color:var(--rmp-red);transform:translateX(2px)}
.rmp-mega__link-label{display:block;font:700 16px/1.35 var(--rmp-font);color:var(--rmp-ink)}
.rmp-mega__links a:hover .rmp-mega__link-label{color:var(--rmp-red)}
.rmp-mega__link-desc{display:block;margin-top:3px;font:400 13.5px/1.5 var(--rmp-font);color:var(--rmp-muted)}

.rmp-mega__promo{background:var(--rmp-red);color:#fff;border-radius:8px;padding:30px 28px 32px;
	background-image:radial-gradient(circle at 118% -20%,rgba(255,255,255,.22),transparent 58%)}
.rmp-mega__promo-eyebrow{display:inline-block;font:700 11.5px/1 var(--rmp-font);letter-spacing:.16em;text-transform:uppercase;
	opacity:.9;margin-bottom:14px}
.rmp-mega__promo-title{margin:0 0 10px;font:700 22px/1.25 var(--rmp-font);color:#fff}
.rmp-mega__promo-text{margin:0 0 22px;font:400 15px/1.6 var(--rmp-font);opacity:.92}

/* ---------- scrim ---------- */
.rmp-scrim{position:fixed;inset:var(--rmp-bar-h) 0 0;background:rgba(16,19,26,.42);opacity:0;
	transition:opacity .2s ease;pointer-events:none;z-index:-1}
.rmp-scrim[hidden]{display:block}
.rmp-header.is-open .rmp-scrim{opacity:1;pointer-events:auto}

/* ---------- mobile drawer ---------- */
/* Hangs below the header bar (not over it), so the logo and the burger-turned-X stay visible. */
.rmp-drawer{display:none;position:absolute;top:100%;right:0;height:calc(100vh - var(--rmp-bar-h));height:calc(100dvh - var(--rmp-bar-h));width:min(420px,100%);background:#fff;z-index:1100;
	overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
	padding:12px 20px 40px;box-shadow:-20px 0 40px -24px rgba(16,19,26,.5)}
.rmp-header.is-drawer{border-bottom:1px solid var(--rmp-line)}
.rmp-header.is-drawer .rmp-burger{border-color:var(--rmp-ink)}
.rmp-drawer[hidden]{display:none}
.rmp-header.is-drawer .rmp-drawer{display:block}
.rmp-header.is-drawer .rmp-drawer.is-in{transform:translateX(0)}
.rmp-drawer__list{list-style:none;margin:0;padding:0}
.rmp-drawer__item{border-bottom:1px solid var(--rmp-line)}
.rmp-drawer__row{display:flex;align-items:center;justify-content:space-between}
.rmp-drawer__link{flex:1 1 auto;display:block;padding:17px 4px;color:var(--rmp-ink);text-decoration:none;
	font:500 15.5px/1 var(--rmp-font);letter-spacing:-.1px;text-transform:uppercase}
/* Parent rows with no landing page stay buttons (they only open the accordion). */
.rmp-drawer__link--btn{width:100%;text-align:left;background:none;border:0;appearance:none;cursor:pointer}
.rmp-drawer__link--btn[aria-expanded="true"]{color:var(--rmp-red)}
.rmp-drawer__toggle{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:0;background:none;
	color:var(--rmp-muted);cursor:pointer}
.rmp-drawer__toggle[aria-expanded="true"] .rmp-icon--chevron{transform:rotate(180deg);color:var(--rmp-red)}
.rmp-drawer__sub{list-style:none;margin:0;padding:0 0 12px}
.rmp-drawer__sub[hidden]{display:none}
.rmp-drawer__sub a{display:block;padding:11px 4px 11px 16px;border-left:2px solid var(--rmp-line);
	color:var(--rmp-muted);text-decoration:none;font:500 15px/1.4 var(--rmp-font)}
.rmp-drawer__sub a:hover{color:var(--rmp-red);border-left-color:var(--rmp-red)}
.rmp-drawer__cta{width:100%;margin-top:26px}

/* ---------- responsive ---------- */
@media (max-width:1200px){
	.rmp-nav__link{padding:0 10px}
	.rmp-nav__link:after{left:10px;right:10px}
	.rmp-util--locator span{display:none}
	.rmp-util--locator{width:44px;padding:0;justify-content:center}
	.rmp-mega__inner{grid-template-columns:minmax(200px,1fr) minmax(0,1.4fr) minmax(240px,.9fr);gap:32px}
}
@media (max-width:1023px){
	:root{--rmp-bar-h:72px}
	.rmp-nav{display:none}
	.rmp-burger{display:inline-flex}
	.rmp-logo img{height:46px}
	.rmp-search__form{padding:14px 20px}
	.rmp-bar__inner{padding:0 20px;gap:12px}
}
@media (max-width:520px){
	.rmp-btn{height:46px;padding:0 20px}
	.rmp-drawer{padding-top:8px}
}

@media (prefers-reduced-motion:reduce){
	.rmp-header *{transition:none!important}
}

/* Keep the block theme content clear of the sticky header when jumping to anchors */
:target{scroll-margin-top:calc(var(--rmp-bar-h) + 40px)}

/* ---------- Smaller dropdown type scale (Ava, 29 Sep 2026) ----------
   All screen sizes (the dropdowns only show at 1024px+; the mobile drawer is
   separate). Original sizes in the rules above: title 30, strap 15.5, link
   label 16, link desc 13.5, promo title 22, promo text 15, button 14px/50px.
   Delete this block to go back. Promo eyebrow (11.5px) deliberately unchanged. */
.rmp-mega .rmp-mega__title{font-size:22px}
.rmp-mega .rmp-mega__strap{font-size:14px}
.rmp-mega .rmp-mega__link-label{font-size:14px}
.rmp-mega .rmp-mega__link-desc{font-size:12.5px}
.rmp-mega .rmp-mega__promo-title{font-size:18px}
.rmp-mega .rmp-mega__promo-text{font-size:13.5px}
.rmp-mega .rmp-btn{height:40px;padding:0 22px;font-size:13px}