/**
 * Mega menu — Discount Pet Food
 *
 * One markup tree, two presentations:
 *   >= 1025px  horizontal bar with full-width dropdown panels
 *   <  1025px  slide-in drawer with accordion drill-down
 */

.dpf-mega {
	--dpf-rule: #e2e8e4;
	--dpf-cols: 4;
	/* Matches the header's own --content-width (row 6f5e704) so the bar and
	   panel line up with the logo and cart above. */
	--dpf-content: 1400px;
	/* Fluid so all nine items stay on one line from 1025px upwards. */
	--dpf-trigger-pad: clamp(9px, 1.15vw, 20px);

	position: relative;
	/* White bar: the masthead above is dark, so contrast lives here and the
	   bar reads continuously into the panels it opens. */
	background: #fff;
	border-bottom: 1px solid var(--dpf-rule);
	font-size: 15px;
	line-height: 1.4;
}

.dpf-mega *,
.dpf-mega *::before,
.dpf-mega *::after {
	box-sizing: border-box;
}

/* Wrapped in :where() so this reset carries zero specificity. A plain
   `.dpf-mega ul` selector (0,1,1) would outrank single-class component
   rules like `.dpf-mega__bar` (0,1,0) and silently eat their margins. */
:where(.dpf-mega ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- top bar */

.dpf-mega__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--dpf-bar-justify, space-between);
	margin: 0 auto;
	padding: 0;
	/* Reproduce the boxed bands' content box (shell width, minus their
	   gutter) rather than padding the band itself — padding the band would
	   stop the mega panel bleeding to the viewport edge. */
	max-width: min( var(--dpf-content), calc(100% - 2 * var(--dpf-pad)) );
}

/* Desktop only: these pull the first and last labels out to the shell edge
   so they line up with the logo. In the mobile drawer the bar is a vertical
   stack, where the same rule just hangs the first and last rows off the
   left and right edges. */
@media (min-width: 1025px) {
	.dpf-mega__bar > .dpf-mega__top:first-child > .dpf-mega__top-trigger {
		margin-left: calc(-1 * var(--dpf-trigger-pad));
	}

	.dpf-mega__bar > .dpf-mega__top:last-child > .dpf-mega__top-trigger {
		margin-right: calc(-1 * var(--dpf-trigger-pad));
	}
}

/* Deliberately not a positioning context: panels are full-bleed and resolve
   against .dpf-mega, so they can't run off the edge on the last few items. */
.dpf-mega__top {
	position: static;
}

.dpf-mega__top-trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 15px var(--dpf-trigger-pad);
	white-space: nowrap;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--dpf-green);
	font: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dpf-mega__top-trigger:hover,
.dpf-mega__top-trigger:focus,
.dpf-mega__top-trigger:focus-visible {
	border-bottom-color: var(--dpf-yellow);
	color: var(--dpf-green-mid);
}

.dpf-mega__top-trigger:focus:not(:focus-visible) {
	outline: 0;
}

/* Visible keyboard focus — the previous menu had none. */
.dpf-mega :focus-visible {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: -3px;
}

.dpf-mega__top--has-panel .dpf-mega__top-trigger[aria-expanded="true"] {
	border-bottom-color: var(--dpf-green);
	color: var(--dpf-green);
	font-weight: 700;
}

.dpf-mega__chevron {
	width: 10px;
	height: 6px;
	flex: none;
	transition: transform 0.18s ease;
}

.dpf-mega__top-trigger[aria-expanded="true"] .dpf-mega__chevron {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------ mega panels */

/* Full-bleed panel: spans the whole bar, so position never depends on which
   trigger opened it. */
.dpf-mega__panel {
	position: absolute;
	z-index: 400;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 20px 44px -16px rgba(0, 40, 24, 0.34);
	border-top: 1px solid var(--dpf-rule);
	/* Scroll the panel, never the multi-column box: a height limit on a
	   `columns` element spills content into extra columns sideways. */
	/* Roughly the header's own height, so a tall panel scrolls
	   instead of running past the viewport. */
	max-height: calc(100vh - 220px);
	overflow-y: auto;
}

.dpf-mega__panel[hidden] {
	display: none;
}

/* Grid rather than CSS columns: groups can never be split across a column
   boundary, and short panels (Fish has 3 links) don't stretch to fill. */
.dpf-mega__panel-inner {
	margin: 0 auto;
	padding: 30px 0 34px;
	/* Same content box as the bar above it, so panel copy lines up with the
	   top-level labels and the logo. */
	max-width: min( var(--dpf-content), calc(100% - 2 * var(--dpf-pad)) );
}

.dpf-mega__list--1 {
	display: grid;
	grid-template-columns: repeat(var(--dpf-cols), minmax(0, 1fr));
	gap: 26px 34px;
	align-items: start;
}

/* Narrower desktops get fewer, wider columns before anything crowds. */
@media (max-width: 1280px) {
	.dpf-mega__list--1 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dpf-mega__list--1 > .dpf-mega__item {
	min-width: 0;
}

/* An outsized group takes two grid columns and flows its own children down
   two internal columns, roughly halving its height. That stops it dictating
   the row height and stranding the categories that follow it. */
.dpf-mega__list--1 > .dpf-mega__item--wide {
	grid-column: span 2;
}

.dpf-mega__item--wide > .dpf-mega__list--2 {
	column-count: 2;
	column-gap: 34px;
}

.dpf-mega__item--wide > .dpf-mega__list--2 > .dpf-mega__item {
	break-inside: avoid;
}

/* A grouping label ("By Brand") heads both columns rather than floating
   into the middle of one. */
.dpf-mega__item--wide > .dpf-mega__list--2 > .dpf-mega__item--label {
	column-span: all;
}

/* The "All <section>" link leads the panel and reads as the primary action. */
.dpf-mega__list--1 > .dpf-mega__item:first-child {
	grid-column: 1 / -1;
	margin-bottom: 2px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--dpf-rule);
}

.dpf-mega__list--1 > .dpf-mega__item:first-child > .dpf-mega__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	color: var(--dpf-green);
	font-size: 15px;
	letter-spacing: 0;
}

.dpf-mega__list--1 > .dpf-mega__item:first-child > .dpf-mega__link::after {
	content: "→";
	font-size: 16px;
	transition: transform 0.18s ease;
}

.dpf-mega__list--1 > .dpf-mega__item:first-child > .dpf-mega__link:hover::after {
	transform: translateX(3px);
}

.dpf-mega__list--1 > .dpf-mega__item > .dpf-mega__link,
.dpf-mega__list--1 > .dpf-mega__item > .dpf-mega__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	color: var(--dpf-green);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0;
	text-decoration: none;
	border-bottom: 2px solid var(--dpf-yellow);
}

/* Product count: a second layer of information in a menu that has no
   imagery available to it. */
.dpf-mega__count {
	flex: none;
	color: var(--dpf-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
}

.dpf-mega__list--1 > .dpf-mega__item:first-child .dpf-mega__count {
	display: none;
}

.dpf-mega__list--1 > .dpf-mega__item > .dpf-mega__link:hover {
	color: var(--dpf-green-mid);
}

.dpf-mega__list--2 .dpf-mega__link {
	display: block;
	padding: 4px 0;
	color: var(--dpf-ink);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.14s ease, transform 0.14s ease;
}

.dpf-mega__list--2 .dpf-mega__link:hover,
.dpf-mega__list--2 .dpf-mega__link:focus,
.dpf-mega__list--2 .dpf-mega__link:focus-visible {
	color: var(--dpf-green-mid);
	transform: translateX(3px);
}

/* Level-2 disclosure is a mobile-only affordance; the mega panel shows
   every level at once. */
.dpf-mega__sub-toggle {
	display: none;
}

/* A label is a grouping heading with no destination. */
.dpf-mega__item--label > .dpf-mega__label {
	display: block;
	color: var(--dpf-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	padding: 6px 0 2px;
}

/* ------------------------------------------------------- drawer (mobile) */

.dpf-mega__drawer-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	background: var(--dpf-green);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.dpf-mega__burger,
.dpf-mega__burger::before,
.dpf-mega__burger::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.dpf-mega__burger {
	position: relative;
}

.dpf-mega__burger::before,
.dpf-mega__burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.dpf-mega__burger::before { top: -6px; }
.dpf-mega__burger::after  { top: 6px; }

.dpf-mega__burger,
.dpf-mega__burger::before,
.dpf-mega__burger::after {
	transition: transform 0.18s ease, top 0.18s ease, background-color 0.18s ease;
}

@media (max-width: 1024px) {
	.dpf-mega {
		background: none;
		border-bottom: 0;
	}

	.dpf-mega__drawer-toggle {
		display: flex;
	}

	.dpf-mega__bar {
		display: block;
		padding: 0;
		max-width: none;
		background: #fff;
	}

	/* Collapsed by default; JS toggles [data-dpf-open]. */
	.dpf-mega__bar:not([data-dpf-open]) {
		display: none;
	}

	.dpf-mega__top {
		border-bottom: 1px solid var(--dpf-rule);
	}

	.dpf-mega__top-trigger {
		justify-content: space-between;
		width: 100%;
		padding: 15px 16px;
		white-space: normal;
		color: var(--dpf-ink);
		font-size: 16px;
	}

	.dpf-mega__top-trigger:hover,
	.dpf-mega__top-trigger:focus-visible,
	.dpf-mega__top--has-panel .dpf-mega__top-trigger[aria-expanded="true"] {
		background: #f3f7f4;
		color: var(--dpf-green);
	}

	.dpf-mega__chevron {
		width: 14px;
		height: 9px;
	}

	.dpf-mega__panel {
		position: static;
		box-shadow: none;
		border-top: 0;
		background: #f8faf9;
		max-height: none;
		overflow-y: visible;
	}

	.dpf-mega__panel-inner {
		width: auto;
		max-width: none;
		padding: 6px 16px 14px;
	}

	/* The panel grid is a desktop construct; on mobile level 1 is a plain
	   stack of rows. */
	.dpf-mega__list--1 {
		display: block;
	}

	/* Internal columns are a desktop construct. (grid-column needs no reset:
	   the list is display:block here, so the parent is not a grid.) */
	.dpf-mega__item--wide > .dpf-mega__list--2 {
		column-count: 1;
	}

	.dpf-mega__list--1 > .dpf-mega__item:first-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.dpf-mega__list--1 > .dpf-mega__item:first-child > .dpf-mega__link {
		font-size: 15px;
		font-weight: 700;
	}

	/* Level 1 reads as a list of rows, each divided by a full-width rule,
	   rather than as the underlined column headings used in the mega panel. */
	.dpf-mega__list--1 > .dpf-mega__item {
		margin-bottom: 0;
		border-bottom: 1px solid var(--dpf-rule);
	}

	.dpf-mega__list--1 > .dpf-mega__item:last-child {
		border-bottom: 0;
	}

	.dpf-mega__list--1 > .dpf-mega__item > .dpf-mega__link,
	.dpf-mega__list--1 > .dpf-mega__item > .dpf-mega__label {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		padding: 11px 0;
		margin-bottom: 0;
		border-bottom: 0;
		font-size: 15px;
		text-transform: none;
		letter-spacing: 0;
	}

	/* Count trails the name rather than sitting hard right, where the
	   expand button now lives. */
	.dpf-mega__list--1 .dpf-mega__count {
		font-size: 12px;
	}

	/* Comfortable tap targets throughout the drawer. */
	.dpf-mega__list--2 .dpf-mega__link {
		padding: 9px 0;
		min-width: 0;
	}

	/* Row layout: the category stays a link, the chevron is its own button,
	   so tapping the name still navigates to the category. */
	.dpf-mega__item--1.dpf-mega__item--has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.dpf-mega__item--1.dpf-mega__item--has-children > .dpf-mega__link,
	.dpf-mega__item--1.dpf-mega__item--has-children > .dpf-mega__label {
		flex: 1 1 auto;
	}

	.dpf-mega__sub-toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		/* 48px tap target without enlarging the row; the visible control is
		   the circle drawn by ::before. */
		width: 48px;
		height: 48px;
		margin: -8px 0;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--dpf-rule);
		background: none;
		color: var(--dpf-green);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* A bordered circle, so the chevron reads as a button rather than an
	   ornament sitting at the end of the row. */
	.dpf-mega__sub-toggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 32px;
		margin: -16px 0 0 -16px;
		border: 1px solid var(--dpf-green);
		border-radius: 50%;
		background: #fff;
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}

	.dpf-mega__sub-toggle .dpf-mega__chevron {
		position: relative; /* above ::before */
		width: 13px;
		height: 8px;
		transition: transform 0.18s ease;
	}

	/* Pressed feedback — touch has no hover, so :active carries the weight. */
	.dpf-mega__sub-toggle:active::before {
		background: var(--dpf-rule);
	}

	/* Open: inverted, so state is obvious at a glance as well as by rotation. */
	.dpf-mega__sub-toggle[aria-expanded="true"]::before {
		background: var(--dpf-green);
		border-color: var(--dpf-green);
	}

	.dpf-mega__sub-toggle[aria-expanded="true"] {
		color: #fff;
	}

	.dpf-mega__sub-toggle[aria-expanded="true"] .dpf-mega__chevron {
		transform: rotate(180deg);
	}

	/* Keep the focus ring clear of the circle. */
	.dpf-mega__sub-toggle:focus-visible {
		outline-offset: -6px;
	}

	/* Collapsed by default; the adjacent-sibling rule is why the toggle is
	   rendered immediately before its list. */
	.dpf-mega__list--2 {
		display: none;
		flex-basis: 100%;
		margin: 0 0 12px 2px;
		padding-left: 12px;
		border-left: 2px solid var(--dpf-green-mid);
	}

	.dpf-mega__sub-toggle[aria-expanded="true"] + .dpf-mega__list--2 {
		display: block;
	}

	/* Burger becomes a close icon while the drawer is open. */
	.dpf-mega__drawer-toggle[aria-expanded="true"] .dpf-mega__burger {
		background: transparent;
	}

	.dpf-mega__drawer-toggle[aria-expanded="true"] .dpf-mega__burger::before,
	.dpf-mega__drawer-toggle[aria-expanded="true"] .dpf-mega__burger::after {
		top: 0;
	}

	.dpf-mega__drawer-toggle[aria-expanded="true"] .dpf-mega__burger::before {
		transform: rotate(45deg);
	}

	.dpf-mega__drawer-toggle[aria-expanded="true"] .dpf-mega__burger::after {
		transform: rotate(-45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dpf-mega *,
	.dpf-mega *::before,
	.dpf-mega *::after {
		transition: none !important;
	}
}