/* ==========================================================================
   HPF Trickle Up — main site stylesheet
   Single site-wide component stylesheet, loaded on every page after style.css
   (which holds the theme header + all :root design tokens + base/reset).
   Consolidated from: header-footer.css + woocommerce.css + home/home.css.
   All rules consume the --hpf-* / --hrp-* tokens defined in style.css.
   ========================================================================== */

/* ============================ HEADER & FOOTER ============================ */
/* =========================================================
 * Hurayra Pet Foods — custom header & footer
 * Colour + type tokens live in style.css (single source of truth).
 * This sheet loads after it (declared dependency) and only consumes
 * the --hpf-* custom properties — no redefinition here.
 * =======================================================*/
.hpf-header,
.hpf-footer { font-family: var(--hpf-font-head); }

/* ---------- shared brand text (logo fallback) ---------- */
.hpf-brand__text { text-decoration: none; }
.hpf-brand__name {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--hpf-white);
}

/* =====================  HEADER  ===================== */
.hpf-header {
	width: 100%;
	position: sticky;
	/* Only the navbar stays pinned. The header is offset upward by the
	   announcement-bar height (measured into --hpf-ann-h by JS), so the
	   announcement scrolls off-screen while the navbar sits flush at the top.
	   The header (not the navbar) is the sticky element so it's bounded by the
	   full page height rather than its own short box. */
	top: calc(-1 * var(--hpf-ann-h, 0px));
	z-index: 999;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
/* Keep the pinned navbar clear of the WP admin bar for logged-in users. */
.admin-bar .hpf-header { top: calc(32px - var(--hpf-ann-h, 0px)); }
@media (max-width: 782px) {
	/* On mobile the admin bar isn't fixed, so no offset is needed. */
	.admin-bar .hpf-header { top: calc(-1 * var(--hpf-ann-h, 0px)); }
}

/* Announcement bar */
.hpf-announcement {
	background: var(--hpf-pink);
	color: var(--hpf-white);
	text-align: center;
}
.hpf-announcement__inner {
	max-width: var(--hpf-maxw);
	margin: 0 auto;
	padding: 2px var(--hpf-gutter);
	font-size: 20px;
	letter-spacing: -0.2px;
	font-weight: 500;
}
.hpf-announcement__inner strong { font-weight: 700; }

/* Nav bar */
.hpf-navbar { background: var(--hpf-teal); position: relative; }
.hpf-navbar__inner {
	max-width: var(--hpf-maxw);
	margin: 0 auto;
	/* Fluid side padding: generous on wide screens, tightening down
	   gracefully on tablets/phones instead of a fixed 120px. */
	padding: 12px clamp(16px, 6vw, 120px);
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Brand / logo */
.hpf-brand { flex: 0 0 auto; display: flex; align-items: center; }
.hpf-brand img,
.hpf-brand .custom-logo { max-height: 40px; width: auto; height: auto; }

/* Primary nav */
.hpf-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.hpf-nav-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hpf-nav-menu li { position: relative; margin: 0; }
.hpf-nav-menu li > a {
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0px 22px;
	border: 1.5px solid rgba(255, 255, 255, .9);
	border-radius: 999px;
	color: var(--hpf-white);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s ease;
}
/* White fill that wipes in from the left on hover. */
.hpf-nav-menu li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hpf-white);
	border-radius: inherit;
	transform: translateX(-101%);
	transition: transform .35s ease;
	z-index: -1;
}
.hpf-nav-menu li > a:hover { color: var(--hpf-teal); }
.hpf-nav-menu li > a:hover::before { transform: translateX(0); }

/* Highlighted pill (e.g. "Subscribe & Save") — add the CSS class
   "hpf-highlight" to that menu item in Appearance → Menus. */
.hpf-nav-menu li.hpf-highlight > a {
	background: var(--hpf-teal);
	border-color: var(--hpf-teal);
}
/* Highlighted pill also wipes to white; text turns dark for contrast. */
.hpf-nav-menu li.hpf-highlight > a:hover { color: var(--hpf-teal); }

/* Dropdown caret for items with children */
.hpf-nav-menu .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Sub-menus */
.hpf-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin-top: 10px;
	padding: 8px 0;
	background: var(--hpf-white);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 100;
}
.hpf-nav-menu li:hover > .sub-menu,
.hpf-nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.hpf-nav-menu .sub-menu li > a {
	display: block;
	padding: 10px 18px;
	border: 0;
	border-radius: 0;
	color: #333;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	white-space: normal;
}
.hpf-nav-menu .sub-menu li > a:hover { background: #f2f8f7; color: var(--hpf-teal); }

/* ---------- Shop mega-menu (full-width product panel) ---------- */
/* The Shop <li> becomes static so the panel can span the whole nav bar. */
.hpf-nav-menu li.hpf-has-mega { position: static; }

.hpf-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	background: var(--hpf-white);
	box-shadow: 0 24px 40px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 200;
}
/* Invisible bridge so the cursor can travel from the pill to the panel. */
.hpf-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}
.hpf-nav-menu li.hpf-has-mega:hover > .hpf-mega,
.hpf-nav-menu li.hpf-has-mega:focus-within > .hpf-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.hpf-mega__inner {
	max-width: var(--hpf-maxw);
	margin: 0 auto;
	padding: 30px var(--hpf-gutter) 38px;
}
.hpf-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* ---- Two category carousels (Wet Food / Dry Food) ---- */
.hpf-mega__cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	position: relative;
}
/* .hpf-mega__cats::before {
	content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px;
	background: var(--hpf-border); transform: translateX(-22px);
} */
.hpf-mega__cat { min-width: 0; }
.hpf-mega__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.hpf-mega__cat-title { font-family: var(--hpf-font-head); font-size: 20px; font-weight: 700; color: var(--hpf-ink); margin: 0; }
.hpf-mega__nav { display: flex; gap: 8px; }
.hpf-mega__arrow {
	width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid var(--hpf-border);
	background: var(--hpf-white); color: var(--hpf-ink); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s var(--hpf-ease), color .2s var(--hpf-ease), border-color .2s;
}
.hpf-mega__arrow:hover:not(:disabled) { background: var(--hpf-teal); color: var(--hpf-white); border-color: var(--hpf-teal); }
.hpf-mega__arrow:disabled { opacity: .35; cursor: not-allowed; }
.hpf-mega__arrow svg { width: 18px; height: 18px; }
.hpf-mega__viewport { overflow: hidden; }
.hpf-mega__track { display: flex; gap: 20px; transition: transform .35s var(--hpf-ease); will-change: transform; }
.hpf-mega__track > .hpf-pcard { flex: 0 0 calc(50% - 10px); min-width: 0; }
.hpf-mega__all {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
	font-weight: 700; font-size: 14px; color: var(--hpf-teal-dark); text-decoration: none;
}
.hpf-mega__all:hover { color: var(--hpf-teal); }

@media (max-width: 1200px) {
	.hpf-mega__cats { gap: 32px; }
	/* .hpf-mega__cats::before { transform: translateX(-16px); } */
}
/* ---- Scrumbles-style full purchase card (SHOP dropdown) ---- */
.hpf-pcard {
	/* Brand palette (teal + pink) instead of the Scrumbles cream/maroon. */
	--hpf-cream: #eaf6f5;
	--hpf-cream-border: #bfe0dd;
	--hpf-badge: var(--hpf-pink);
	--hpf-maroon: var(--hpf-teal);
	--hpf-maroon-hover: var(--hpf-teal);
	--hpf-price-red: var(--hpf-pink);
	display: flex;
	flex-direction: column;
	border: 1px solid #edf0f0;
	border-radius: 16px;
	background: var(--hpf-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
.hpf-pcard__form { margin: 0; display: flex; flex-direction: column; }
.hpf-pcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e3efee;
	padding: 12px;
	height: 180px;
	border-radius: 16px 16px 0 0;
	transition: background-color .45s var(--hpf-ease, ease);
}
.hpf-pcard__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 10px;
}
.hpf-pcard__title {
	margin: 0;
	padding: 14px 16px 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: -0.2px;
}
.hpf-pcard__title a { color: var(--hpf-teal); text-decoration: none; }
.hpf-pcard__title a:hover { text-decoration: none; opacity: .85; }

/* options */
.hpf-pcard__options { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 10px; }
.hpf-pcard__opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 2px solid #ececec;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
}
.hpf-pcard__opt--sub { background: var(--hpf-cream); border-color: var(--hpf-cream-border); }
.hpf-pcard__opt:has(.hpf-pcard__radio:checked) { border-color: var(--hpf-pink); }

.hpf-pcard__opt input.hpf-pcard__radio,
.hpf-pcard__radio {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	margin: 3px 0 0;
	padding: 0 !important;
	border: 2px solid #b7b7b7;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.hpf-pcard__opt input.hpf-pcard__radio:checked,
.hpf-pcard__radio:checked {
	border-color: var(--hpf-pink);
	background: var(--hpf-pink) !important;
}
.hpf-pcard__radio:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--hpf-pink);
}

.hpf-pcard__opt-main { flex: 1 1 auto; min-width: 0; }
.hpf-pcard__opt-title { display: block; font-size: 14px; font-weight: 700; color: #222; }
.hpf-pcard__opt-note { display: block; margin-top: 2px; font-size: 12px; color: #777; }
.hpf-pcard__badge {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--hpf-badge);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}
.hpf-pcard__opt-price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	line-height: 1.1;
}
.hpf-pcard__was { font-size: 12px; color: #9aa0a0; text-decoration: line-through; }
.hpf-pcard__now { font-size: 17px; font-weight: 700; color: #222; }
.hpf-pcard__now--sub { color: var(--hpf-price-red); }

/* schedule dropdown: shown only while Subscribe is selected */
.hpf-pcard__schedule { padding: 0 2px; }
.hpf-pcard__options:has(.hpf-pcard__opt--one .hpf-pcard__radio:checked) .hpf-pcard__schedule { display: none; }
.hpf-pcard__schedule-select {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 12px 42px 12px 16px;
	border: 2px solid var(--hpf-cream-border);
	border-radius: 12px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d5f59' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hpf-teal);
	/* Recolours the native option highlight from blue to brand teal. */
	accent-color: var(--hpf-teal);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.hpf-pcard__schedule-select:hover { border-color: var(--hpf-teal); }
.hpf-pcard__schedule-select:focus,
.hpf-pcard__schedule-select:focus-visible {
	outline: none;
	border-color: var(--hpf-teal);
	box-shadow: 0 0 0 3px rgba(13, 95, 89, .12);
}
.hpf-pcard__schedule-select option {
	padding: 10px 14px;
	font-weight: 500;
	color: #333;
	background: #fff;
}
.hpf-pcard__schedule-select option:checked {
	background: var(--hpf-cream);
	color: var(--hpf-teal);
	font-weight: 700;
}

/* Custom dropdown (built by JS) — fully brand-styled option list.
   The native <select> is hidden but stays in the form so it still submits. */
.hpf-cselect { position: relative; }
.hpf-cselect-ready .hpf-pcard__schedule-select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.hpf-cselect__toggle {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 2px solid var(--hpf-cream-border);
	border-radius: 12px;
	background: #fff;
	color: var(--hpf-text-dark);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.hpf-cselect__toggle:hover { border-color: var(--hpf-teal); }
.hpf-cselect.is-open .hpf-cselect__toggle {
	/* border-color: var(--hpf-teal); */
	box-shadow: 0 0 0 3px rgba(13, 95, 89, .12);
}
.hpf-cselect__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpf-cselect__caret {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid var(--hpf-teal);
	border-bottom: 2.5px solid var(--hpf-teal);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.hpf-cselect.is-open .hpf-cselect__caret { transform: translateY(1px) rotate(-135deg); }
.hpf-cselect__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #e6eeed;
	border-radius: 12px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 50;
}
.hpf-cselect.is-open .hpf-cselect__list { opacity: 1; visibility: visible; transform: none; }
.hpf-cselect__list li { margin: 0; }
.hpf-cselect__option {
	margin: 0;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: #333;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}
.hpf-cselect__option + .hpf-cselect__option { margin-top: 2px; }
/* Hover: keep the background unchanged, only tint the text with the theme color. */
.hpf-cselect__option:hover { background: var(--hpf-teal); color: #fff; }
.hpf-cselect__option.is-selected,
.hpf-cselect__option.is-selected:hover { background: var(--hpf-teal); color: #fff; font-weight: 700; }

/* qty + add to cart */
.hpf-pcard__buy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 6px 16px 18px;
}
.hpf-pcard__qty {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 2px solid #eee;
	border-radius: 999px;
	padding: 4px;
}
.hpf-pcard__qbtn {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 30px;
	min-width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hpf-pink);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hpf-pcard__qbtn:hover { background: #c1556f; color: #fff; }
.hpf-pcard__qty .hpf-pcard__qinput {
	box-sizing: border-box;
	width: 40px;
	min-width: 40px;
	min-height: 30px;
	padding: 0 2px;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: #222;
	-moz-appearance: textfield;
	appearance: textfield;
}
.hpf-pcard__qinput::-webkit-outer-spin-button,
.hpf-pcard__qinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hpf-pcard__submit {
	flex: 1 1 130px;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--hpf-maroon);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}
.hpf-pcard__submit:hover { background: var(--hpf-maroon-hover); color: #fff; }
.hpf-pcard__submit--link { flex: 1 1 auto; }
.hpf-pcard__price { padding: 4px 16px 12px; font-size: 16px; font-weight: 700; color: var(--hpf-teal); }
.hpf-pcard__price .bos4w-or-subscribe { font-size: 13px; font-weight: 600; color: var(--hpf-teal); }

/* ---- Shop grid: skin the Elementor Loop Grid cards to match ---- */
/* Scoped to loop items so it doesn't affect other Elementor sections. */
.elementor-loop-container .e-loop-item {
	background: var(--hpf-white);
	border: 1px solid #edf0f0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
	transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-loop-container .e-loop-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
}
.elementor-loop-container .e-loop-item .elementor-widget-image { background: #e3efee; }
.elementor-loop-container .e-loop-item .elementor-widget-image img { display: block; width: 100%; }
.elementor-loop-container .e-loop-item .elementor-button {
	width: 100%;
	justify-content: center;
	background-color: var(--hpf-pink);
	color: var(--hpf-white);
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .5px;
}
.elementor-loop-container .e-loop-item .elementor-button:hover { background-color: #c1556f; color: var(--hpf-white); }

/* While the Quicksand webfont loads, the fallback font renders the nav pills
   wider and the navbar row can momentarily exceed the viewport (a FOUT
   horizontal-scrollbar flash). Suppress page-level horizontal scroll the same
   way the home template already does (body.hpf-full-bleed) — proven safe with
   the sticky navbar. */
body { overflow-x: hidden; }

/* Cart / account buttons */
.hpf-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.hpf-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/* padding:0 / border:0 override the theme's generic `button` rule, which
	   otherwise injects 12px 26px padding into the <button> search toggle and
	   collapses its icon (the cart/account icons are <a>, so unaffected). */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hpf-white);
	color: var(--hpf-teal-dark);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(13, 95, 89, .14);
	transition: transform .2s var(--hpf-ease), box-shadow .2s var(--hpf-ease), background .2s var(--hpf-ease), color .2s var(--hpf-ease);
}
.hpf-icon-btn svg { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .2s var(--hpf-ease); }
/* Hover / focus: lift + invert to a solid teal-dark pill with a white icon. */
.hpf-icon-btn:hover,
.hpf-icon-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 9px 20px rgba(13, 95, 89, .26);
	background: var(--hpf-teal-dark);
	color: var(--hpf-white);
}
.hpf-icon-btn:hover svg { transform: scale(1.06); }
.hpf-icon-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(13, 95, 89, .14); }
.hpf-icon-btn:focus-visible { outline: 2px solid var(--hpf-white); outline-offset: 2px; }

/* Cart count badge — pink accent with a white ring so it pops on any bg. */
.hpf-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--hpf-pink);
	color: #fff;
	font-family: var(--hpf-font-head);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--hpf-white);
}

/* Mobile toggle (hidden on desktop) */
.hpf-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.hpf-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--hpf-white);
	transition: transform .2s ease, opacity .2s ease;
}

/* =====================  MINI-CART DRAWER  ===================== */
/* Markup: inc/woocommerce-ui.php (hpf_cart_drawer) + woocommerce/cart/mini-cart.php.
   Behaviour: assets/js/header-footer.js (open/close + quantity steppers).
   Design matches the reference cart: cream panel, two-column items, qty
   steppers, "Estimated Total" footer with side-by-side View Cart / Check Out. */
.hpf-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 28, 27, .5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1200;
}
.hpf-drawer-backdrop.is-open { opacity: 1; }

/* Lock background scroll while the drawer is open. */
body.hpf-drawer-open { overflow: hidden; }

.hpf-cart-drawer {
	--hpf-drawer-bg: #faf9f6;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--hpf-drawer-bg);
	box-shadow: -18px 0 50px rgba(0, 0, 0, .22);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
	z-index: 1300;
	font-family: var(--hpf-font);
}
.hpf-cart-drawer.is-open { transform: translateX(0); visibility: visible; }

/* ---- Header ---- */
.hpf-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 20px 22px 14px;
	background: var(--hpf-drawer-bg);
	color: var(--hpf-teal);
}
.hpf-cart-drawer__title {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-family: var(--hpf-font-head);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--hpf-ink);
}
.hpf-cart-drawer__count { font-weight: 700; }
.hpf-cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	color: var(--hpf-teal);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease;
}
.hpf-cart-drawer__close:hover { background: rgba(13, 95, 89, .09); }
.hpf-cart-drawer__close svg { width: 22px; height: 22px; }

/* ---- Body: flex column so the checkout footer pins to the bottom ---- */
.hpf-cart-drawer__body {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}
.hpf-cart-drawer .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

/* Scroll region: the free-shipping bar + items scroll together (so the message
   is NOT pinned); the header and footer stay put. */
.hpf-cart-drawer__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.hpf-cart-drawer__scroll--empty { display: flex; flex-direction: column; }

/* ---- Free-shipping progress bar ---- */
.hpf-cart-drawer__ship {
	flex: 0 0 auto;
	padding: 4px 22px 18px;
	background: var(--hpf-drawer-bg);
}
.hpf-cart-drawer__ship-msg {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hpf-muted);
}
.hpf-cart-drawer__ship-msg strong { color: var(--hpf-ink); font-weight: 700; }
.hpf-cart-drawer__ship.is-unlocked .hpf-cart-drawer__ship-msg { color: var(--hpf-ink); }
.hpf-cart-drawer__ship-track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #dbe6e5;
	overflow: hidden;
}
.hpf-cart-drawer__ship-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hpf-teal);
	transition: width .4s ease;
}

/* ---- Items (scrolling region) ---- */
.hpf-cart-drawer .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0 22px;
	background: var(--hpf-drawer-bg);
	transition: opacity .2s ease;
}
.hpf-cart-drawer.is-loading .woocommerce-mini-cart { opacity: .5; pointer-events: none; }

.hpf-cart-drawer li.woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid var(--hpf-border);
}
/* Media */
.hpf-mini-item__media { flex: 0 0 auto; }
.hpf-mini-item__media a { display: block; }
.hpf-cart-drawer li.woocommerce-mini-cart-item img {
	width: 84px;
	height: 84px;
	margin: 0;
	object-fit: contain;
	border-radius: 12px;
	border: 1px solid var(--hpf-border);
	background: #fff;
}
/* Info column */
.hpf-mini-item__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 26px;
}
.hpf-mini-item__name {
	font-family: var(--hpf-font-head);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1.25;
	color: var(--hrp-ink);
	text-decoration: none;
}
.hpf-mini-item__name:hover { color: var(--hpf-teal); }
/* Subscription / variation meta (e.g. "Frequency: Every month") */
.hpf-cart-drawer .woocommerce-mini-cart-item dl.variation {
	margin: 0;
	font-size: 13px;
	color: var(--hpf-muted);
	line-height: 1.5;
}
.hpf-cart-drawer .woocommerce-mini-cart-item dl.variation dt {
	display: inline;
	margin: 0;
	font-weight: 700;
}
.hpf-cart-drawer .woocommerce-mini-cart-item dl.variation dd { display: inline; margin: 0 0 0 4px; }
.hpf-cart-drawer .woocommerce-mini-cart-item dl.variation p { margin: 0; }
/* Foot: quantity stepper + price */
.hpf-mini-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}
.hpf-qty {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--hpf-ink);
	border-radius: 999px;
	overflow: hidden;
}
.hpf-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--hpf-teal);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.hpf-qty__btn:hover { background: var(--hpf-pink); }
.hpf-qty__num {
	min-width: 30px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--hpf-ink);
}
.hpf-mini-item__price {
	font-family: var(--hpf-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--hpf-pink);
	white-space: nowrap;
}
.hpf-mini-item__price del {
	color: var(--hpf-muted);
	font-weight: 500;
	margin-right: 7px;
	text-decoration: line-through;
}
.hpf-mini-item__price ins {
	color: var(--hpf-pink);
	font-weight: 800;
	text-decoration: none;
}
/* Remove (thin ×, top-right) */
.hpf-cart-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 20px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--hpf-teal) !important;
	background: transparent;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease;
}
.hpf-cart-drawer .woocommerce-mini-cart-item a.remove:hover { color: var(--hpf-pink) !important; background: transparent; }

/* ---- Footer: estimated total + note + side-by-side actions ---- */
.hpf-mini-cart__foot {
	flex: 0 0 auto;
	padding: 18px 22px 22px;
	background: var(--hpf-white);
	border-top: 1px solid var(--hpf-border);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, .05);
}
.hpf-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
}
.hpf-mini-cart__total-label {
	font-family: var(--hpf-font-head);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--hpf-ink);
}
.hpf-mini-cart__total-amount {
	font-family: var(--hpf-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--hpf-ink);
}
.hpf-mini-cart__note {
	margin: 0 0 16px;
	font-size: 12.5px;
	color: var(--hpf-muted);
	line-height: 1.5;
}
.hpf-mini-cart__note-em { text-decoration: underline; }
.hpf-mini-cart__actions { display: flex; gap: 12px; }
.hpf-mini-cart__actions .button {
	margin: 0;
	padding: 15px 16px;
	border-radius: 999px;
	text-align: center;
	font-family: var(--hpf-font-head);
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	line-height: 1.2;
}
.hpf-mini-cart__view {
	flex: 1 1 0;
	background: var(--hpf-bg-soft);
	color: var(--hpf-ink);
	border: 0;
}
.hpf-mini-cart__view:hover { background: #e4efee; color: var(--hpf-ink); }
.hpf-mini-cart__checkout {
	flex: 1.6 1 0;
	background: var(--hpf-teal);
	color: #fff;
}
.hpf-mini-cart__checkout:hover { background: var(--hpf-teal); color: #fff; filter: brightness(1.08); }

/* ---- Empty state ---- */
.hpf-cart-drawer .woocommerce-mini-cart__empty-message {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 64px 24px 12px;
	color: var(--hpf-muted);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
.hpf-cart-drawer__shop.button {
	flex: 0 0 auto;
	display: block;
	margin: 0 24px 32px;
	padding: 14px 20px;
	text-align: center;
	border-radius: 999px;
	font-weight: 700;
	background: var(--hpf-teal);
	color: #fff;
}
.hpf-cart-drawer__shop.button:hover { color: #fff; filter: brightness(1.08); }

/* ---- Upgrade-to-subscription link ---- */
.hpf-mini-item__upgrade {
	align-self: flex-start;
	font-family: var(--hpf-font-head);
	font-size: 10px;
	font-weight: 700;
	color: var(--hpf-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.hpf-mini-item__upgrade:hover { color: var(--hpf-teal); }

/* ---- Subscription plan switcher (dropdown) ---- */
.hpf-mini-item__plan {
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	padding: 10px 38px 10px 16px;
	border: 1.5px solid var(--hpf-ink);
	border-radius: 999px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d5f59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: var(--hpf-font-head);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	color: var(--hpf-ink);
	cursor: pointer;
}
.hpf-mini-item__plan:focus { outline: none; border-color: var(--hpf-ink); box-shadow: 0 0 0 3px rgba(97, 186, 193, .25); }

/* ---- Coupon accordion (above Estimated Total) ---- */
.hpf-mini-coupon { margin: 0 0 14px; }
.hpf-mini-coupon__applied {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hpf-mini-coupon__applied li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: var(--hpf-bg-soft);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hpf-teal);
}
.hpf-mini-coupon__remove {
	color: var(--hpf-muted) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}
.hpf-mini-coupon__remove:hover { color: var(--hpf-pink) !important; }
.hpf-mini-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: var(--hpf-bg-soft);
	border: 0;
	border-radius: 999px;
	color: var(--hpf-ink);
	font-family: var(--hpf-font-head);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.hpf-mini-coupon__toggle svg { transition: transform .2s ease; }
.hpf-mini-coupon.is-open .hpf-mini-coupon__toggle svg { transform: rotate(90deg); }
.hpf-mini-coupon__panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.hpf-mini-coupon.is-open .hpf-mini-coupon__panel {
	max-height: 240px;
	opacity: 1;
	margin-top: 12px;
}
.hpf-mini-coupon__form { display: flex; gap: 8px; margin: 0; }
.hpf-mini-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--hpf-border);
	border-radius: 999px;
	font-size: 14px;
	background: #fff;
}
.hpf-mini-coupon__input:focus { border-color: var(--hpf-teal); outline: none; }
.hpf-mini-coupon__apply {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--hpf-teal);
	color: #fff;
	font-family: var(--hpf-font-head);
	font-weight: 700;
	font-size: 14px;
}
.hpf-mini-coupon__apply:hover { background: var(--hpf-teal); color: #fff; filter: brightness(1.08); }
.hpf-mini-coupon__notice { margin-top: 12px; }
/* Strip WooCommerce's default notice chrome (red bar, icon, padding). */
.hpf-mini-coupon__notice .woocommerce-error,
.hpf-mini-coupon__notice .woocommerce-message,
.hpf-mini-coupon__notice .woocommerce-info {
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	list-style: none;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
}
.hpf-mini-coupon__notice .woocommerce-error::before,
.hpf-mini-coupon__notice .woocommerce-message::before,
.hpf-mini-coupon__notice .woocommerce-info::before,
.hpf-mini-coupon__notice .woocommerce-error li::before,
.hpf-mini-coupon__notice .woocommerce-message li::before { content: none; display: none; }
.hpf-mini-coupon__notice li { margin: 0; padding: 0; list-style: none; }
.hpf-mini-coupon__notice .woocommerce-error { background: var(--hrp-pink-soft); color: var(--hpf-pink); }
.hpf-mini-coupon__notice .woocommerce-message,
.hpf-mini-coupon__notice .woocommerce-info { background: var(--hrp-teal-soft); color: var(--hpf-teal); }
.hpf-mini-coupon__notice .button { display: none; }

/* ---- Drawer: small-screen tweaks ---- */
@media (max-width: 600px) {
	.hpf-cart-drawer__head { padding: 18px 16px 12px; }
	.hpf-cart-drawer__title { font-size: 20px; }
	.hpf-cart-drawer__ship { padding: 4px 16px 16px; }
	.hpf-cart-drawer .woocommerce-mini-cart { padding: 0 16px; }
	.hpf-mini-cart__foot { padding: 16px; }

	/* Give the info column more room so the qty stepper + was/now price
	   never overflow; let the price drop to its own (right-aligned) line
	   when it can't sit beside the stepper. */
	.hpf-cart-drawer li.woocommerce-mini-cart-item { gap: 12px; }
	.hpf-cart-drawer li.woocommerce-mini-cart-item img { width: 64px; height: 64px; }
	.hpf-mini-item__info { padding-right: 18px; }
	/* Keep quantity + regular/sale price on ONE line; shrink to fit instead. */
	.hpf-mini-item__foot { gap: 8px; flex-wrap: nowrap; }
	.hpf-mini-item__price { font-size: 15px; }
	.hpf-qty__btn { width: 28px; }
}

/* =====================  FOOTER  ===================== */
.hpf-footer {
	background: var(--hpf-teal);
	color: var(--hpf-white);
	/* Subtle depth: slightly deeper teal at the very bottom. */
	background-image: linear-gradient(180deg, var(--hpf-teal) 0%, var(--hpf-teal-dark, #3f989d) 220%);
}
.hpf-footer__inner {
	max-width: var(--hpf-maxw);
	margin: 0 auto;
	padding: 64px var(--hpf-gutter) 0;
}
.hpf-footer a { color: var(--hpf-white); text-decoration: none; }
.hpf-footer a:hover { text-decoration: none; }

/* ---- Main grid: brand · quick links · legal · contact ---- */
.hpf-footer__grid {
	display: grid;
	grid-template-columns: 1.9fr 1fr 1fr 1.4fr;
	gap: 40px 48px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.hpf-footer__brand-col { max-width: 380px; }
.hpf-footer__brand img,
.hpf-footer__brand .custom-logo { max-height: 62px; width: auto; height: auto; margin: 0 0 20px; }
.hpf-footer__desc { font-size: 14.5px; line-height: 1.75; margin: 0 0 22px; opacity: .9; }

/* Section headings with a small accent underline */
.hpf-footer__heading {
	font-family: var(--hpf-font-head);
	color: var(--hpf-white);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	margin: 0 0 20px;
	padding: 0 0 10px;
	position: relative;
}
.hpf-footer__heading::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px;
	background: rgba(255, 255, 255, .55); border-radius: 2px;
}

/* Social icons — outlined pills that fill on hover */
.hpf-social-list { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hpf-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255, 255, 255, .08); color: var(--hpf-white);
	border: 1.5px solid rgba(255, 255, 255, .35);
	transition: background .2s var(--hpf-ease), color .2s var(--hpf-ease), border-color .2s, transform .2s var(--hpf-ease);
}
.hpf-social:hover { background: var(--hpf-white); color: var(--hpf-teal); border-color: var(--hpf-white); transform: translateY(-3px); }
.hpf-social svg { width: 18px; height: 18px; }

/* Link menus — subtle indent on hover */
.hpf-footer-menu { list-style: none; margin: 0; padding: 0; }
.hpf-footer-menu li { margin: 0 0 12px; }
.hpf-footer-menu a {
	display: inline-block; font-size: 14.5px; opacity: .88;
	transition: opacity .15s, transform .15s var(--hpf-ease);
}
.hpf-footer-menu a:hover { opacity: 1; transform: translateX(4px); }

/* Contact list — icon chips */
.hpf-contact-list { list-style: none; margin: 0; padding: 0; }
.hpf-contact-list li {
	display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px;
	line-height: 1.6; font-size: 14.5px; opacity: .92;
}
.hpf-contact__icon {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
	background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center;
}
.hpf-contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Bottom bar ---- */
.hpf-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 22px 0 30px; font-size: 13px;
}
.hpf-footer__company { margin: 0; opacity: .8; line-height: 1.6; }
.hpf-footer__badge { margin: 0; opacity: .9; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.hpf-footer__paw { font-size: 15px; }

/* =====================  RESPONSIVE  ===================== */
/* Narrow-desktop range (just above the mobile drawer breakpoint): the full
   horizontal nav + wide "Subscribe & Save 25%" pill + generous side padding
   don't fit, so tighten the side padding, row gap, menu gap and pill padding
   until everything fits without overflow. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.hpf-navbar__inner { padding-left: 26px; padding-right: 26px; gap: 14px; }
	.hpf-nav { justify-content: flex-end; }
	.hpf-nav-menu { gap: 5px; }
	.hpf-nav-menu li > a { padding-left: 13px; padding-right: 13px; font-size: 13.5px; }
	.hpf-actions { gap: 8px; }
}

@media (max-width: 1024px) {
	:root { --hpf-gutter: 24px; }
	.hpf-mega { display: none; }
	/* Logo left, hamburger at the far right; actions sit just before it. */
	.hpf-brand { order: 0; margin-right: auto; }
	.hpf-actions { order: 1; margin-left: 0; }
	.hpf-nav-toggle { display: flex; order: 2; margin-left: 10px; }

	/* Mobile nav = left slide-in drawer (full height, scrollable). */
	.hpf-nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: 0;
		width: min(330px, 88vw);
		margin: 0;
		padding: 0 0 28px;
		background: var(--hpf-white);
		box-shadow: 4px 0 30px rgba(0, 0, 0, .22);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
		z-index: 1300;
	}
	.hpf-nav.is-open { transform: translateX(0); visibility: visible; }

	.hpf-nav-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}
	.hpf-nav-menu li { width: 100%; position: relative; }

	/* Top-level rows = section headers: teal, uppercase, divider. */
	.hpf-nav-menu li > a {
		justify-content: flex-start;
		width: 100%;
		padding: 15px 20px;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .6px;
		color: var(--hpf-teal-dark);
		background: transparent;
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid var(--hpf-border);
		white-space: normal;
	}
	.hpf-nav-menu li > a::before,
	.hpf-nav-menu li > a::after { display: none; } /* no pill-wipe / caret */
	.hpf-nav-menu li > a:hover { color: var(--hpf-teal); }
	.hpf-nav-menu li.hpf-highlight > a { background: transparent; color: var(--hpf-pink); border-color: var(--hpf-border); }

	/* Sub-menu = white, dark indented links. */
	.hpf-nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: var(--hpf-white);
		border-radius: 0;
	}
	.hpf-nav-menu .sub-menu li > a {
		color: var(--hpf-ink);
		text-transform: none;
		letter-spacing: 0;
		font-weight: 600;
		font-size: 14px;
		padding: 12px 20px 12px 32px;
		border-bottom: 1px solid var(--hpf-border);
	}
	.hpf-nav-menu .sub-menu li:last-child > a { border-bottom: 0; }
}

@media (max-width: 1024px) {
	.hpf-footer__grid { grid-template-columns: 1.6fr 1fr 1.4fr; }
	.hpf-footer__brand-col { grid-column: 1 / -1; max-width: 620px; }
}
@media (max-width: 640px) {
	.hpf-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
	.hpf-footer__brand-col { grid-column: 1 / -1; max-width: none; }
	.hpf-footer__contact-col { grid-column: 1 / -1; }
	.hpf-footer__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
	.hpf-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.hpf-announcement__inner { font-size: 14px; padding: 10px 14px; }
	.hpf-footer__inner { padding: 44px 18px 36px; }

	/* Tighten the header row so brand + actions + toggle always fit. */
	.hpf-navbar__inner { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
	.hpf-actions { gap: 8px; }
	.hpf-icon-btn { width: 42px; height: 42px; }
	.hpf-brand img,
	.hpf-brand .custom-logo { max-height: 34px; }
	/* (Drawer mobile tweaks live in the MINI-CART DRAWER block.) */
}

@media (max-width: 400px) {
	.hpf-icon-btn { width: 38px; height: 38px; }
	.hpf-nav-toggle { width: 40px; }
}


/* =====================  HOME RANGE — EMPTY CATEGORY  =====================
   "Coming Soon" waitlist card shown in "The Good Stuff We Offer" when a tab's
   category has no products yet (pages/page-home.php). */
.hrp-home .hpf-range-empty {
	max-width: 520px;
	margin: 10px auto 6px;
	background: linear-gradient(165deg, #ffffff 0%, #f2f8f7 100%);
	border: 2px dashed rgba(97, 186, 193, .6);
	border-radius: 20px;
	padding: 40px 34px 38px;
	text-align: center;
	box-shadow: 0 12px 32px rgba(13, 95, 89, .08);
}
.hrp-home .hpf-range-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	margin: 0 0 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--hpf-teal), var(--hpf-teal-dark));
	box-shadow: 0 8px 18px rgba(13, 95, 89, .28);
}
.hrp-home .hpf-range-empty__title {
	font-family: var(--hpf-font-head);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--hpf-ink);
	margin: 0 0 10px;
}
.hrp-home .hpf-range-empty__text {
	max-width: 42ch;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--hpf-muted);
	margin: 0 auto 24px;
}
.hrp-home .hpf-range-empty__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 28px;
	background: var(--hpf-teal-dark);
	border: 0;
	border-radius: 999px;
	font-family: var(--hpf-font-head);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(13, 95, 89, .22);
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hrp-home .hpf-range-empty__btn svg { transition: transform .2s ease; }
.hrp-home .hpf-range-empty__btn:hover {
	background: var(--hpf-teal);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(13, 95, 89, .3);
	text-decoration: none;
}
.hrp-home .hpf-range-empty__btn:hover svg { transform: translateX(3px); }
@media (max-width: 600px) {
	.hrp-home .hpf-range-empty { max-width: none; padding: 30px 20px 28px; border-radius: 16px; }
	.hrp-home .hpf-range-empty__title { font-size: 19px; }
}

/* =====================  WAITLIST POPUP  =====================
   "Join the Waitlist" modal (Contact Form 7) opened from the empty-category
   card on the home range. Markup: pages/page-home.php (wp_footer) ·
   Behaviour: header-footer.js. */
.hpf-waitlist {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hpf-waitlist[hidden] { display: none; }
.hpf-waitlist__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 28, 27, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s ease;
}
.hpf-waitlist__dialog {
	position: relative;
	width: min(400px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--hpf-white);
	border-radius: 18px;
	padding: 24px 22px 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
	opacity: 0;
	transform: translateY(18px) scale(.97);
	transition: opacity .32s ease, transform .32s var(--hpf-ease, ease);
}
.hpf-waitlist.is-open .hpf-waitlist__backdrop { opacity: 1; }
.hpf-waitlist.is-open .hpf-waitlist__dialog { opacity: 1; transform: none; }
body.hpf-waitlist-open { overflow: hidden; }

.hpf-waitlist__x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hpf-bg-soft);
	color: var(--hpf-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.hpf-waitlist__x svg { width: 16px; height: 16px; }
.hpf-waitlist__x:hover { background: var(--hpf-teal-dark); color: #fff; }

.hpf-waitlist__head { text-align: center; margin: 0 0 16px; }
.hpf-waitlist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0 0 10px;
	color: #fff;
	background: linear-gradient(135deg, var(--hpf-teal), var(--hpf-teal-dark));
	box-shadow: 0 8px 18px rgba(13, 95, 89, .28);
}
.hpf-waitlist__icon svg { width: 20px; height: 20px; }
.hpf-waitlist__title {
	font-family: var(--hpf-font-head);
	font-size: 19px;
	font-weight: 800;
	color: var(--hpf-ink);
	margin: 0 0 4px;
}
.hpf-waitlist__sub { font-size: 13px; line-height: 1.55; color: var(--hpf-muted); margin: 0; max-width: 36ch; margin-inline: auto; }

/* --- Contact Form 7 fields (.waitlist_form wrapper from the form body) --- */
.hpf-waitlist .waitlist_form label { display: block; margin: 0 0 9px; }
.hpf-waitlist .waitlist_form .wpcf7-form-control-wrap { display: block; }
.hpf-waitlist .waitlist_form input[type="text"],
.hpf-waitlist .waitlist_form input[type="email"],
.hpf-waitlist .waitlist_form input[type="tel"],
.hpf-waitlist .waitlist_form textarea {
	width: 100%;
	padding: 10px 14px;
	background: var(--hpf-bg-soft);
	border: 1.5px solid var(--hpf-border);
	border-radius: 10px;
	font-family: var(--hpf-font);
	font-size: 14px;
	color: var(--hpf-ink);
	outline: 0;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hpf-waitlist .waitlist_form input:focus,
.hpf-waitlist .waitlist_form textarea:focus {
	border-color: var(--hpf-teal);
	background: var(--hpf-white);
	box-shadow: 0 0 0 4px rgba(97, 186, 193, .16);
}
.hpf-waitlist .waitlist_form ::placeholder { color: var(--hpf-muted); opacity: .8; }
/* Fixed compact height beats the CF7 rows attribute. */
.hpf-waitlist .waitlist_form textarea { height: 84px; min-height: 0; resize: vertical; }
.hpf-waitlist .waitlist_form input[type="submit"] {
	width: 100%;
	padding: 12px 20px;
	margin-top: 2px;
	background: var(--hpf-teal-dark);
	border: 0;
	border-radius: 999px;
	font-family: var(--hpf-font-head);
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(13, 95, 89, .22);
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hpf-waitlist .waitlist_form input[type="submit"]:hover {
	background: var(--hpf-teal);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(13, 95, 89, .3);
}
/* CF7 states: validation + response messages, on-brand. */
.hpf-waitlist .wpcf7-not-valid-tip { font-size: 12.5px; color: var(--hpf-pink); margin-top: 4px; }
.hpf-waitlist .wpcf7-spinner { display: block; margin: 10px auto 0; }
.hpf-waitlist .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 11px 14px;
	border: 1.5px solid var(--hpf-teal);
	border-radius: 12px;
	font-size: 13.5px;
	color: var(--hpf-ink);
	background: var(--hpf-bg-soft);
}
.hpf-waitlist .wpcf7-form.invalid .wpcf7-response-output,
.hpf-waitlist .wpcf7-form.failed .wpcf7-response-output { border-color: var(--hpf-pink); background: #fdeef2; }

@media (max-width: 480px) {
	.hpf-waitlist { padding: 12px; }
	.hpf-waitlist__dialog { padding: 28px 20px 22px; border-radius: 18px; }
}

/* --- Shop mega-menu: empty category → compact "Coming Soon" card --- */
/* The empty column stretches its card to the neighbouring carousel's height
   so the two sides stay visually balanced. */
.hpf-mega__cat--empty { display: flex; flex-direction: column; }
.hpf-mega__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 210px;
	margin: 0;
	padding: 24px 20px;
	background: linear-gradient(165deg, #ffffff 0%, #f2f8f7 100%);
	border: 2px dashed rgba(97, 186, 193, .6);
	border-radius: 14px;
}
.hpf-mega__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-bottom: 10px;
	color: #fff;
	background: linear-gradient(135deg, var(--hpf-teal), var(--hpf-teal-dark));
	box-shadow: 0 6px 14px rgba(13, 95, 89, .25);
}
.hpf-mega__empty-title {
	font-family: var(--hpf-font-head);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--hpf-ink);
	margin-bottom: 6px;
}
.hpf-mega__empty-text {
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hpf-muted);
	margin-bottom: 14px;
}
.hpf-mega__empty-btn {
	display: inline-block;
	padding: 9px 20px;
	background: var(--hpf-teal-dark);
	border-radius: 999px;
	font-family: var(--hpf-font-head);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: background .2s ease, transform .15s ease;
}
.hpf-mega__empty-btn:hover { background: var(--hpf-teal); color: #fff; transform: translateY(-2px); text-decoration: none; }

/* =====================  BACK TO TOP  =====================
   Floating button injected by header-footer.js; shown after ~600px scroll. */
.hpf-backtotop {
	position: fixed;
	right: 22px;
	bottom: 24px;
	z-index: 1100; /* under the nav/cart drawers (1290+) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hpf-teal-dark);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(13, 95, 89, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.hpf-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
.hpf-backtotop:hover { background: var(--hpf-teal); transform: translateY(-3px); }
.hpf-backtotop:focus-visible { outline: 2px solid var(--hpf-teal); outline-offset: 3px; }
@media (max-width: 768px) {
	.hpf-backtotop { right: 16px; bottom: 18px; width: 42px; height: 42px; }
	/* Clear the sticky add-to-cart bar on single product pages. */
	.hpf-has-sticky-atc .hpf-backtotop { bottom: 104px; }
}

/* =====================  HEADER SEARCH  =====================
   Desktop: a magnifier icon in .hpf-actions opens a full-width drop-down
   panel below the teal navbar. Mobile: the icon is hidden and the search
   form lives at the top of the slide-in nav drawer instead.
   Markup: header.php · Behaviour: assets/js/header-footer.js               */

/* --- Desktop drop-down panel --- */
.hpf-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--hpf-white);
	box-shadow: 0 18px 40px rgba(13, 95, 89, .18);
	border-top: 1px solid rgba(255, 255, 255, .25);
	/* Collapsed state (animate open). [hidden] still fully hides it for a11y. */
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .32s var(--hpf-ease, ease), opacity .28s ease;
}
.hpf-search-panel:not([hidden]).is-open { max-height: 140px; opacity: 1; }
.hpf-search-panel__inner {
	max-width: var(--hpf-maxw);
	margin: 0 auto;
	padding: 18px clamp(16px, 6vw, 120px);
}
.hpf-search-panel__form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--hpf-bg-soft);
	border: 2px solid var(--hpf-border);
	border-radius: 999px;
	padding: 6px 6px 6px 18px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hpf-search-panel__form:focus-within {
	border-color: var(--hpf-teal);
	box-shadow: 0 6px 18px rgba(13, 95, 89, .12);
	background: var(--hpf-white);
}
.hpf-search-panel__icon { flex: 0 0 auto; color: var(--hpf-teal-dark); }
.hpf-search-panel__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--hpf-font);
	font-size: 16px;
	color: var(--hpf-ink);
	padding: 8px 0;
	-webkit-appearance: none;
	appearance: none;
}
.hpf-search-panel__input::placeholder { color: var(--hpf-muted); opacity: .8; }
/* Drop the browser's native search "×" clear button (keeps a single clean pill). */
.hpf-search-panel__input::-webkit-search-cancel-button,
.hpf-search-panel__input::-webkit-search-decoration,
.hpf-nav-search__input::-webkit-search-cancel-button,
.hpf-nav-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hpf-search-panel__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: var(--hpf-teal-dark);
	color: var(--hpf-white);
	font-family: var(--hpf-font-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .3px;
	padding: 11px 24px;
	border-radius: 999px;
	transition: background .2s ease, transform .15s ease;
}
.hpf-search-panel__submit:hover { background: var(--hpf-teal); transform: translateY(-1px); }
.hpf-search-panel__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hpf-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.hpf-search-panel__close:hover { background: var(--hpf-border); color: var(--hpf-ink); }
.hpf-search-panel__input:focus,.hpf-search-panel__input:active {
    border: 0;
    box-shadow: none;
}
.hpf-search-hero__form input[type="search"]:focus,.hpf-search-hero__form input[type="search"]:active {
    box-shadow: none;
}
/* --- Mobile drawer search (hidden on desktop) --- */
.hpf-nav-search { display: none; }

@media (max-width: 1024px) {
	/* The desktop drop-down + its toggle icon never show on mobile. */
	.hpf-search-panel { display: none; }
	.hpf-search-toggle { display: none; }

	/* Search sits at the very top of the drawer, under the sticky logo bar. */
	.hpf-nav-search {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 14px 16px 6px;
		padding: 4px 4px 4px 14px;
		background: var(--hpf-bg-soft);
		border: 1.5px solid var(--hpf-border);
		border-radius: 999px;
	}
	.hpf-nav-search:focus-within { border-color: var(--hpf-teal); background: var(--hpf-white); }
	.hpf-nav-search__icon { flex: 0 0 auto; color: var(--hpf-teal-dark); }
	.hpf-nav-search__input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		outline: 0;
		background: transparent;
		font-family: var(--hpf-font);
		font-size: 15px;
		color: var(--hpf-ink);
		padding: 9px 0;
		-webkit-appearance: none;
		appearance: none;
	}
	.hpf-nav-search__input::placeholder { color: var(--hpf-muted); }
	.hpf-nav-search__submit {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--hpf-teal-dark);
		color: var(--hpf-white);
		cursor: pointer;
	}
	.hpf-nav-search__submit:hover { background: var(--hpf-teal); }
}


/* ========================= WOOCOMMERCE UI ============================== */
/* =========================================================
 * HPF Trickle Up — Premium WooCommerce UI
 * Single Product · Cart · Checkout
 *
 * Brand-styled layout layered ON TOP of WooCommerce's base CSS, reusing the
 * theme tokens from style.css. Design language mirrors the
 * "Scrumbles-style" storefront the theme was built for — soft cards, rounded
 * pills, cream accents, generous spacing, subtle motion — but strictly in the
 * HPF palette (teal / pink / cream / ink). No new design system is introduced.
 *
 * Scope: rules are namespaced under .hpf-shop / .hpf-cart / .hpf-checkout so
 * they never leak onto non-shop pages.
 * =======================================================*/

:root {
	/* Premium surface scale (local — safe fallbacks if loaded first). */
	--hpf-card-radius: 18px;
	--hpf-card-radius-sm: 12px;
	--hpf-shadow-sm: 0 2px 10px rgba(13, 95, 89, 0.06);
	--hpf-shadow-md: 0 10px 30px rgba(13, 95, 89, 0.10);
	--hpf-shadow-lg: 0 22px 55px rgba(13, 95, 89, 0.16);
	--hpf-ring: 0 0 0 3px rgba(97, 186, 193, 0.28);
	--hpf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hpf-sticky-top: 24px;
}

/* Keep the sticky order summaries clear of the sticky site header. */
.admin-bar { --hpf-sticky-top: 56px; }

.hpf-shop { position: relative; }

.hpf-shop .woocommerce-breadcrumb {
	margin: 0 0 22px;
	font-size: 13px;
	letter-spacing: 0.2px;
	color: var(--hpf-muted);
}
.hpf-shop .woocommerce-breadcrumb a { color: var(--hpf-teal); }
.hpf-shop .woocommerce-breadcrumb a:hover { color: var(--hpf-pink); }

/* WooCommerce notices — rounded + branded. */
.hpf-shop .woocommerce-error,
.hpf-shop .woocommerce-info,
.hpf-shop .woocommerce-message {
	border-radius: var(--hpf-card-radius-sm);
	border-top-color: var(--hpf-teal);
}

/* =========================================================
 * SHARED COMPONENTS
 * =======================================================*/

/* Icons */
.hpf-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* Quantity stepper (single product + cart + product cards) */
.hpf-shop .quantity,
.hpf-cart .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--hpf-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--hpf-white);
	transition: border-color 0.2s var(--hpf-ease), box-shadow 0.2s var(--hpf-ease);
}
.hpf-shop .quantity:focus-within,
.hpf-cart .quantity:focus-within { border-color: var(--hpf-teal); box-shadow: var(--hpf-ring); }
.hpf-shop .quantity input.qty,
.hpf-cart .quantity input.qty {
	width: 52px;
	border: 0;
	border-radius: 0;
	text-align: center;
	padding: 11px 2px;
	font-weight: 700;
	color: var(--hpf-ink);
	-moz-appearance: textfield;
	background: transparent;
}
.hpf-shop .quantity input.qty::-webkit-outer-spin-button,
.hpf-shop .quantity input.qty::-webkit-inner-spin-button,
.hpf-cart .quantity input.qty::-webkit-outer-spin-button,
.hpf-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hpf-shop .quantity input.qty:focus,
.hpf-cart .quantity input.qty:focus { box-shadow: none; outline: none; }
.hpf-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: 0;
	background: transparent;
	color: var(--hpf-teal);
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	border-radius: 0;
	transition: background 0.15s var(--hpf-ease), color 0.15s var(--hpf-ease);
}
.hpf-qty-btn:hover { background: var(--hpf-cream); color: var(--hpf-teal); }
.hpf-qty-btn:active { transform: scale(0.92); }

/* Free-shipping progress bar */
.hpf-freeship { margin: 0 0 18px; }
.hpf-freeship__msg {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--hpf-ink);
}
.hpf-freeship__msg .hpf-ico { color: var(--hpf-teal); }
.hpf-freeship.is-unlocked .hpf-freeship__msg,
.hpf-freeship.is-unlocked .hpf-freeship__msg .hpf-ico { color: var(--hpf-teal); font-weight: 600; }
.hpf-freeship__track {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--hpf-cream);
	overflow: hidden;
}
.hpf-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--hpf-teal), var(--hpf-teal));
	transition: width 0.6s var(--hpf-ease);
}
.hpf-freeship.is-unlocked .hpf-freeship__fill { background: linear-gradient(90deg, var(--hpf-teal), var(--hpf-teal)); }

/* Trust badges */
.hpf-trust {
	list-style: none;
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--hpf-border);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.hpf-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}
.hpf-trust__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hpf-cream);
	color: var(--hpf-teal);
}
.hpf-trust__txt { font-size: 12px; font-weight: 600; color: var(--hpf-muted); line-height: 1.3; }

/* Trust badges as a card below the cart items (left column). */
.hpf-cart-trust {
	margin-top: 22px;
	padding: 24px 20px;
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-card-radius);
	box-shadow: var(--hpf-shadow-sm);
}
.hpf-cart-trust .hpf-trust { margin: 0; padding: 0; border-top: 0; }

/* Secure note + continue-shopping link */
.hpf-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--hpf-muted);
}
.hpf-secure-note .hpf-ico { color: var(--hpf-teal); }
.hpf-continue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 14px;
	color: var(--hpf-teal);
}
.hpf-continue .hpf-ico { transform: rotate(180deg); transition: transform 0.2s var(--hpf-ease); }
.hpf-continue:hover { color: var(--hpf-pink); text-decoration: none; }
.hpf-continue:hover .hpf-ico { transform: rotate(180deg) translateX(3px); }

/* Accordions */
.hpf-acc { border-top: 1px solid var(--hpf-border); }
.hpf-acc__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--hpf-ink);
	font-weight: 700;
	font-size: 15px;
	text-align: left;
	padding: 16px 2px;
	cursor: pointer;
}
.hpf-acc__head:hover { color: var(--hpf-teal); background: transparent; }
.hpf-acc__label { display: inline-flex; align-items: center; gap: 9px; }
.hpf-acc__label .hpf-ico { color: var(--hpf-teal); }
.hpf-acc__head > .hpf-ico { color: var(--hpf-muted); transition: transform 0.3s var(--hpf-ease); }
.hpf-acc__head[aria-expanded="true"] > .hpf-ico { transform: rotate(180deg); }
.hpf-acc__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--hpf-ease);
}
.hpf-acc__body > * { overflow: hidden; min-height: 0; }
.hpf-acc.is-open .hpf-acc__body { grid-template-rows: 1fr; }
.hpf-acc__body p { margin: 0; padding: 0 2px; }
.hpf-acc.is-open .hpf-acc__body > *:first-child { padding-bottom: 16px; }
.hpf-acc__body .hpf-order-note { width: 100%; margin-bottom: 14px; }
.hpf-acc__body .shipping-calculator-form { margin: 0 0 14px; }

/* =========================================================
 * SINGLE PRODUCT
 * =======================================================*/
.hpf-single-product .product { margin: 0; }

.hpf-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 56px;
	align-items: start;
	margin: 0 0 64px;
}

/* Gallery */
.hpf-product__gallery { position: relative; }
.hpf-product__gallery.sticky-gallery { position: sticky; top: var(--hpf-sticky-top); }
.hpf-product__gallery .images,
.hpf-product__gallery .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.hpf-product__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.hpf-product__gallery .woocommerce-product-gallery__image img {
	border-radius: var(--hpf-card-radius);
	background: var(--hpf-bg-soft);
	box-shadow: var(--hpf-shadow-sm);
}
.hpf-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.hpf-product__gallery .flex-control-thumbs li { width: auto; margin: 0; }
.hpf-product__gallery .flex-control-thumbs img {
	border-radius: 10px;
	border: 2px solid transparent;
	opacity: 0.65;
	transition: opacity 0.2s var(--hpf-ease), border-color 0.2s var(--hpf-ease), transform 0.2s var(--hpf-ease);
}
.hpf-product__gallery .flex-control-thumbs img.flex-active,
.hpf-product__gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--hpf-teal); transform: translateY(-2px); }
.hpf-shop .woocommerce-product-gallery__trigger { background: var(--hpf-white); box-shadow: var(--hpf-shadow-sm); }
.hpf-shop span.onsale {
	background: var(--hpf-pink);
	color: #fff;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 7px 15px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	top: 16px;
	left: 16px;
	margin: 0;
	box-shadow: 0 6px 16px rgba(212, 102, 129, 0.35);
}

/* Summary */
.hpf-product__summary { float: none !important; width: auto !important; margin: 0 !important; }
.hpf-product__summary .product_title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; margin: 0 0 14px; }
.hpf-product__summary .woocommerce-product-rating { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.hpf-product__summary .woocommerce-product-rating .woocommerce-review-link { color: var(--hpf-muted); font-size: 14px; }
.hpf-product__summary p.price,
.hpf-product__summary .price {
	color: var(--hpf-ink);
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 20px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.hpf-product__summary p.price del { color: var(--hpf-muted); font-weight: 400; font-size: 21px; opacity: 0.75; }
.hpf-product__summary p.price ins { text-decoration: none; color: var(--hpf-pink); }
.hpf-product__summary .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	margin: 0 0 18px;
}
.hpf-product__summary .stock.in-stock { color: var(--hpf-teal); background: var(--hpf-cream); }
.hpf-product__summary .stock.in-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hpf-teal); }
.hpf-product__summary .stock.out-of-stock { color: #a3402f; background: #fbeae6; }
.hpf-product__summary .woocommerce-product-details__short-description {
	color: var(--hpf-muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--hpf-border);
}

/* Variations */
.hpf-product__summary .variations { width: 100%; margin: 0 0 18px; border: 0; }
.hpf-product__summary .variations tr { display: block; margin: 0 0 14px; }
.hpf-product__summary .variations th,
.hpf-product__summary .variations td { border: 0; padding: 0; display: block; }
.hpf-product__summary .variations th.label { font-weight: 700; color: var(--hpf-ink); margin: 0 0 7px; font-size: 14px; }
.hpf-product__summary .variations select { width: 100%; min-height: 50px; border-radius: 12px; }
.hpf-product__summary .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--hpf-pink); }
.hpf-product__summary .woocommerce-variation-price .price { font-size: 24px; margin: 10px 0 16px; }

/* Quantity + Add to cart */
.hpf-product__summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin: 0 0 22px; }
.hpf-product__summary form.cart .quantity { margin: 0; }
.hpf-product__summary form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 56px;
	font-size: 16px;
	letter-spacing: 0.3px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(97, 186, 193, 0.30);
	transition: transform 0.18s var(--hpf-ease), box-shadow 0.18s var(--hpf-ease), background 0.2s var(--hpf-ease);
}
.hpf-product__summary form.cart .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(97, 186, 193, 0.38); }
.hpf-product__summary form.cart .single_add_to_cart_button:active { transform: translateY(0); }
.hpf-product__summary form.cart.grouped_form { display: block; }
.hpf-product__summary form.cart.variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; align-items: stretch; }

/* Delivery estimate line */
.hpf-delivery {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--hpf-cream);
	color: var(--hpf-teal);
	font-size: 13.5px;
	font-weight: 600;
}
.hpf-delivery .hpf-ico { flex: 0 0 auto; }

/* Product meta */
.hpf-product__summary .product_meta { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--hpf-border); font-size: 14px; color: var(--hpf-muted); }
.hpf-product__summary .product_meta > span { display: block; margin-bottom: 7px; }
.hpf-product__summary .product_meta a { color: var(--hpf-teal); }
.hpf-product__summary .product_meta a:hover { color: var(--hpf-pink); }

/* Info accordions inside summary */
.hpf-info-accordions { margin-top: 4px; border-bottom: 1px solid var(--hpf-border); }

/* Tabs / description / reviews */
.hpf-product__details { margin: 0 0 64px; }
.hpf-shop .woocommerce-tabs ul.tabs {
	padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 6px;
	border-bottom: 1px solid var(--hpf-border);
}
.hpf-shop .woocommerce-tabs ul.tabs::before { display: none; }
.hpf-shop .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.hpf-shop .woocommerce-tabs ul.tabs li::before,
.hpf-shop .woocommerce-tabs ul.tabs li::after { display: none; }
.hpf-shop .woocommerce-tabs ul.tabs li a {
	display: block; padding: 14px 8px; margin-bottom: -1px; font-weight: 700;
	color: var(--hpf-muted); border-bottom: 3px solid transparent; transition: color 0.2s var(--hpf-ease), border-color 0.2s var(--hpf-ease);
}
.hpf-shop .woocommerce-tabs ul.tabs li.active a,
.hpf-shop .woocommerce-tabs ul.tabs li a:hover { color: var(--hpf-ink); border-bottom-color: var(--hpf-teal); text-decoration: none; }
.hpf-shop .woocommerce-tabs .panel { margin: 0; padding: 0; max-width: 900px; }
.hpf-shop .woocommerce-tabs .panel h2:first-child { margin-top: 0; }

/* =========================================================
 * PRODUCT ARCHIVES — Shop / category / tag / search grid
 * =======================================================*/
.hpf-archive { padding: 8px 0 20px; }
.hpf-archive__header { text-align: center; max-width: 720px; margin: 4px auto 30px; }
.hpf-archive__title { font-family: var(--hpf-font-head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--hpf-ink); margin: 0 0 12px; line-height: 1.15; }
.hpf-archive__header .term-description,
.hpf-archive__header p { color: var(--hpf-muted); font-size: 16px; line-height: 1.7; margin: 0; }

/* Toolbar: result count + sorting (notices span full width above) */
.hpf-archive__toolbar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
	padding: 14px 20px; margin: 0 0 28px;
	background: var(--hpf-white); border: 1px solid var(--hpf-border); border-radius: var(--hpf-card-radius-sm); box-shadow: var(--hpf-shadow-sm);
}
.hpf-archive__toolbar:empty { display: none; }
.hpf-archive__toolbar .woocommerce-notices-wrapper { flex: 1 1 100%; }
.hpf-archive__toolbar .woocommerce-notices-wrapper:empty { display: none; }
.hpf-archive__toolbar .woocommerce-result-count { margin: 0; color: var(--hpf-muted); font-size: 14px; }
.hpf-archive__toolbar .woocommerce-ordering { margin: 0; }
.hpf-archive__toolbar .woocommerce-ordering select {
	min-height: 44px; border: 1.5px solid var(--hpf-border); border-radius: 10px; padding: 8px 14px;
	font-family: var(--hpf-font); font-size: 14px; font-weight: 600; color: var(--hpf-ink); background: var(--hpf-white); cursor: pointer;
}

/* Grid — overrides WooCommerce's floated columns. Each cell holds the shared
   .hpf-pcard purchase card (same as the header dropdown). */
/* Scoped to .hpf-shop.hpf-archive (only the archive wrapper has both classes) so
   it out-specifies the generic ".hpf-shop ul.products" related/upsells rule and
   doesn't affect the single-product related grid. */
.hpf-shop.hpf-archive ul.products {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 40px; padding: 0; list-style: none;
}
.hpf-shop.hpf-archive ul.products::before,
.hpf-shop.hpf-archive ul.products::after { content: none; display: none; }
.hpf-shop.hpf-archive ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
	background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left; list-style: none; display: flex;
}
.hpf-shop.hpf-archive ul.products li.product:hover { box-shadow: none; transform: none; border-color: transparent; }
.hpf-shop.hpf-archive ul.products li.product::before { content: none; }
.hpf-shop.hpf-archive ul.products li.product > .hpf-pcard { width: 100%; }
/* Archive: make the product-card image fill the media height. */
.hpf-shop.hpf-archive ul.products li.product a img { height: 100%; }

/* "Why Cat Owners Choose Hurayra" — reassurance block below the archive grid. */
.hpf-why { margin: 60px 0 12px; }
.hpf-why__head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.hpf-why__eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hpf-teal-dark, #0d5f59); margin-bottom: 10px; }
.hpf-why__title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--hpf-ink, #1d2327); line-height: 1.15; margin: 0 0 10px; }
.hpf-why__sub { font-size: 16px; line-height: 1.6; color: var(--hpf-muted, #5b6566); margin: 0; }
.hpf-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hpf-why__card { background: #fff; border: 1px solid var(--hpf-border, #e6eeed); border-radius: 18px; padding: 28px 22px; text-align: center; box-shadow: 0 8px 24px rgba(29, 35, 39, .05); transition: transform .3s var(--hpf-ease, ease), box-shadow .3s var(--hpf-ease, ease); }
.hpf-why__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13, 95, 89, .14); }
.hpf-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 16px; color: #fff; background: linear-gradient(135deg, var(--hpf-teal, #61bac1), var(--hpf-teal-dark, #0d5f59)); box-shadow: 0 8px 18px rgba(13, 95, 89, .28); }
.hpf-why__icon svg { width: 28px; height: 28px; }
.hpf-why__card h3 { font-size: 16.5px; font-weight: 800; color: var(--hpf-ink, #1d2327); margin: 0 0 8px; }
.hpf-why__card p { font-size: 14px; line-height: 1.55; color: var(--hpf-muted, #5b6566); margin: 0; }
@media (max-width: 900px) { .hpf-why__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .hpf-why__grid { grid-template-columns: 1fr; } .hpf-why { margin-top: 42px; } }


/* Product image / spacing come from the global card (.hpf-pcard--global). */

/* WooCommerce pagination */
.hpf-shop .woocommerce-pagination { text-align: center; margin: 0 0 24px; }
.hpf-shop .woocommerce-pagination ul { display: inline-flex; gap: 8px; border: 0; margin: 0; padding: 0; }
.hpf-shop .woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.hpf-shop .woocommerce-pagination ul li a,
.hpf-shop .woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px;
	border: 1px solid var(--hpf-border); border-radius: 10px; background: var(--hpf-white); color: var(--hpf-ink); font-weight: 700; font-size: 14px;
}
.hpf-shop .woocommerce-pagination ul li span.current { background: var(--hpf-teal); border-color: var(--hpf-teal); color: #fff; }
.hpf-shop .woocommerce-pagination ul li a:hover { border-color: var(--hpf-teal); color: var(--hpf-teal-dark); }

/* =========================================================
 * BLOG / STANDARD ARCHIVES (archive.php, search.php, index.php)
 * =======================================================*/
.hpf-main { padding: 36px 0 20px; }
.hpf-page-header { text-align: center; max-width: 720px; margin: 4px auto 32px; }
.hpf-page-title { font-family: var(--hpf-font-head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--hpf-ink); margin: 0 0 12px; line-height: 1.15; }
.hpf-archive-description { color: var(--hpf-muted); font-size: 16px; line-height: 1.7; }

.hpf-loop { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; margin: 0 0 40px; }
.hpf-loop .hpf-entry {
	background: var(--hpf-white); border: 1px solid var(--hpf-border); border-radius: var(--hpf-card-radius);
	overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--hpf-ease), box-shadow .25s var(--hpf-ease);
}
.hpf-loop .hpf-entry:hover { transform: translateY(-4px); box-shadow: var(--hpf-shadow-md); }
.hpf-loop .hpf-entry__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hpf-cream); }
.hpf-loop .hpf-entry__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--hpf-ease); }
.hpf-loop .hpf-entry:hover .hpf-entry__thumb img { transform: scale(1.05); }
.hpf-loop .hpf-entry__header { padding: 20px 20px 0; }
.hpf-loop .hpf-entry__title { font-family: var(--hpf-font-head); font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.hpf-loop .hpf-entry__title a { color: var(--hpf-ink); text-decoration: none; }
.hpf-loop .hpf-entry__title a:hover { color: var(--hpf-teal-dark); }
.hpf-loop .hpf-entry__meta { font-size: 13px; color: var(--hpf-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.hpf-loop .hpf-entry__content { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; color: var(--hpf-muted); font-size: 14.5px; line-height: 1.7; }
.hpf-loop .hpf-entry__content p { margin: 0; }
.hpf-readmore { margin-top: auto; align-self: flex-start; font-weight: 700; color: var(--hpf-teal-dark); text-decoration: none; }
.hpf-readmore:hover { color: var(--hpf-teal); }

/* Standard pagination (the_posts_pagination) */
.hpf-main .navigation.pagination { text-align: center; margin: 0 0 30px; }
.hpf-main .pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hpf-main .pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--hpf-border); border-radius: 10px; background: var(--hpf-white); color: var(--hpf-ink); font-weight: 700; text-decoration: none;
}
.hpf-main .pagination .page-numbers.current { background: var(--hpf-teal); border-color: var(--hpf-teal); color: #fff; }
.hpf-main .pagination a.page-numbers:hover { border-color: var(--hpf-teal); color: var(--hpf-teal-dark); }

/* Archive grids — responsive (the full purchase card needs breathing room, so
   the grid auto-fills down to a single column rather than cramping to 2-up). */
@media (max-width: 900px) {
	.hpf-shop.hpf-archive ul.products { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
	.hpf-shop.hpf-archive ul.products { grid-template-columns: 1fr; gap: 16px; }
	.hpf-archive__toolbar { padding: 12px 14px; }
	.hpf-loop { grid-template-columns: 1fr; }
}

.hpf-shop #reviews .commentlist { margin: 0; padding: 0; list-style: none; }
.hpf-shop #reviews .comment_container {
	display: flex; gap: 16px; padding: 22px; border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-card-radius-sm); margin: 0 0 16px; background: var(--hpf-white);
}
.hpf-shop #reviews .comment_container img.avatar { position: static; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; margin: 0; }
.hpf-shop .star-rating span::before,
.hpf-shop .comment-form-rating .stars a { color: #f2b01e; }
.hpf-shop #review_form .comment-reply-title { font-weight: 700; }

/* Related / upsells / cross-sells cards */
.hpf-shop .related.products, .hpf-shop .upsells.products, .hpf-cart .cross-sells { margin: 0; }
.hpf-shop .related.products > h2, .hpf-shop .upsells.products > h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 28px; }
.hpf-shop ul.products {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none;
}
.hpf-shop ul.products::before, .hpf-shop ul.products::after { display: none; }
.hpf-shop ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; padding: 18px !important;
	background: var(--hpf-white); border: 1px solid var(--hpf-border); border-radius: var(--hpf-card-radius);
	text-align: center; transition: box-shadow 0.25s var(--hpf-ease), transform 0.25s var(--hpf-ease), border-color 0.25s var(--hpf-ease);
}
.hpf-shop ul.products li.product:hover { box-shadow: var(--hpf-shadow-md); transform: translateY(-4px); border-color: var(--hpf-cream-border); }
.hpf-shop ul.products li.product img { border-radius: 12px; margin: 0 auto 16px; }
.hpf-shop ul.products li.product .woocommerce-loop-product__title { font-size: 16px; font-weight: 700; padding: 0; color: var(--hpf-ink); }
.hpf-shop ul.products li.product .price { color: var(--hpf-teal); font-weight: 800; }
.hpf-shop ul.products li.product .button { margin-top: 12px; border-radius: 999px; transition: transform 0.15s var(--hpf-ease); }
.hpf-shop ul.products li.product .button:hover { transform: translateY(-1px); }
.hpf-shop ul.products li.product .star-rating { margin: 0 auto 10px; }

/* Sticky add-to-cart bar (mobile-first; revealed by JS on scroll) */
.hpf-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(8px);
	border-top: 1px solid var(--hpf-border);
	box-shadow: 0 -8px 30px rgba(13, 95, 89, 0.10);
	transform: translateY(110%);
	transition: transform 0.35s var(--hpf-ease);
	padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
}
.hpf-sticky-atc.is-visible { transform: translateY(0); }
.hpf-sticky-atc__inner { display: flex; align-items: center; gap: 14px; max-width: var(--hpf-maxw); margin: 0 auto; }
.hpf-sticky-atc__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hpf-sticky-atc__title { font-weight: 700; font-size: 14px; color: var(--hpf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpf-sticky-atc__price { font-size: 14px; color: var(--hpf-teal); font-weight: 700; }
.hpf-sticky-atc__price del { color: var(--hpf-muted); font-weight: 400; margin-right: 6px; }
.hpf-sticky-atc__btn { flex: 0 0 auto; border-radius: 999px; min-height: 46px; padding: 0 26px; }

/* =========================================================
 * CART
 * =======================================================*/
/* Cart, Checkout & My Account need the full container width — override the
   narrow ~820px "page" text measure that style.css applies to .page .hpf-main. */
.woocommerce-cart .hpf-main,
.woocommerce-checkout .hpf-main,
.woocommerce-account .hpf-main { max-width: none; }

.hpf-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 44px; align-items: start; }

/* Items — card rows (grid: media | info | right-stack: remove/qty/subtotal) */
.hpf-cart-items {
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-card-radius);
	box-shadow: var(--hpf-shadow-sm);
	overflow: hidden;
}
.hpf-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) auto;
	grid-template-areas:
		"media info remove"
		"media info qty"
		"media info subtotal";
	gap: 6px 22px;
	padding: 24px;
	border-bottom: 1px solid var(--hpf-border);
	transition: background 0.2s var(--hpf-ease);
}
.hpf-cart-item:hover { background: var(--hpf-bg-soft); }
.hpf-cart-item:last-of-type { border-bottom: 0; }

.hpf-cart-item__media { grid-area: media; align-self: start; }
.hpf-cart-item__media img {
	width: 96px; height: 96px; object-fit: contain;
	border-radius: var(--hpf-card-radius-sm); border: 1px solid var(--hpf-border); background: #fff;
}

.hpf-cart-item__info { grid-area: info; align-self: center; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hpf-cart-item__name {
	font-family: var(--hpf-font-head);
	font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	color: var(--hpf-teal-dark); text-decoration: none; line-height: 1.25;
}
.hpf-cart-item__name:hover { color: var(--hpf-teal); }
.hpf-cart-item__info .variation,
.hpf-cart-item__info dl.variation { margin: 0; font-size: 13px; color: var(--hpf-muted); line-height: 1.5; }
.hpf-cart-item__info dl.variation dt, .hpf-cart-item__info dl.variation dd { display: inline; margin: 0; }
.hpf-cart-item__info dl.variation dd { margin-right: 8px; }

/* BOS4W in-cart plan selector (rendered via the price filter) */
.hpf-cart-item__plan { color: var(--hpf-ink); font-weight: 700; }
.hpf-cart-item__plan select {
	max-width: 340px; width: 100%;
	padding: 10px 38px 10px 16px;
	border: 1.5px solid var(--hpf-teal); border-radius: 999px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d5f59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
	font-family: var(--hpf-font-head); font-weight: 700; font-size: 13px; color: var(--hpf-teal-dark); cursor: pointer;
}
.hpf-cart-item__plan select:focus { outline: none; border-color: var(--hpf-teal-dark); box-shadow: 0 0 0 3px rgba(97, 186, 193, .25); }
.hpf-cart-item__plan a { color: var(--hpf-teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hpf-cart-item__plan a:hover { color: var(--hpf-teal); }

/* Upgrade-to-subscription link (one-time items) */
.hpf-cart-item__upgrade {
	align-self: flex-start;
	font-family: var(--hpf-font-head); font-size: 13.5px; font-weight: 700;
	color: var(--hpf-teal-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hpf-cart-item__upgrade:hover { color: var(--hpf-teal); }

/* =========================================================
 * CART — AJAX update loading state
 * Immediate spinner + dim; controls disabled; no layout shift
 * (spinner is absolutely positioned, dim uses opacity only).
 * =======================================================*/
.hpf-cart-items { position: relative; }

/* Block interaction on the region being updated. */
.hpf-cart.is-loading .hpf-cart-items,
.hpf-cart.is-loading .cart_totals { pointer-events: none; }

/* Dim the content (not the container) so the spinner stays crisp. */
.hpf-cart.is-loading .hpf-cart-item,
.hpf-cart.is-loading .hpf-cart-actions,
.hpf-cart.is-loading .cart_totals {
	opacity: .5;
	transition: opacity .2s var(--hpf-ease);
}

/* The veil + spinner overlay is injected by assets/js/woocommerce.js with inline
   styles (immune to "remove unused CSS" / CSS caching). The opacity dim above is
   a progressive enhancement only. */

.hpf-cart-notices { margin: 0 0 18px; }
.hpf-cart-notices:empty { display: none; }

.hpf-cart-item__qty { grid-area: qty; justify-self: end; align-self: center; }

.hpf-cart-item__subtotal { grid-area: subtotal; justify-self: end; align-self: end; text-align: right; white-space: nowrap; }
.hpf-cart-item__subtotal .woocommerce-Price-amount { font-family: var(--hpf-font-head); font-weight: 700; font-size: 17px; color: var(--hpf-teal-dark); }
.hpf-cart-item__subtotal ins { text-decoration: none; }
.hpf-cart-item__subtotal ins .woocommerce-Price-amount { color: var(--hpf-pink); font-weight: 800; }
.hpf-cart-item__subtotal del { margin-left: 6px; }
.hpf-cart-item__subtotal del .woocommerce-Price-amount { color: var(--hpf-muted); font-weight: 500; font-size: 15px; }

.hpf-cart-item__remove { grid-area: remove; justify-self: end; align-self: start; }
.hpf-cart-item__remove a.remove {
	display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
	background: transparent; color: var(--hpf-teal-dark) !important; font-size: 20px; line-height: 1; text-decoration: none;
	transition: color 0.2s var(--hpf-ease), background 0.2s var(--hpf-ease);
}
.hpf-cart-item__remove a.remove:hover { color: var(--hpf-pink) !important; background: var(--hpf-bg-soft); }

/* Coupon + update row */
.hpf-cart-actions {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
	padding: 18px 24px; background: var(--hpf-bg-soft);
}
.hpf-cart-actions .coupon { display: flex; gap: 10px; align-items: center; flex: 1 1 auto; }
.hpf-cart-actions .coupon #coupon_code { min-width: 160px; border-radius: 999px; min-height: 46px; }
.hpf-cart-actions .coupon .button, .hpf-cart-actions button[name="update_cart"] { border-radius: 999px; min-height: 46px; }
.hpf-cart-actions button[name="update_cart"] { background: var(--hpf-white); color: var(--hpf-teal-dark); border: 1.5px solid var(--hpf-teal); }
.hpf-cart-actions button[name="update_cart"]:hover { background: var(--hpf-teal); color: #fff; }
.hpf-cart-actions button[name="update_cart"][disabled] { opacity: 0.5; cursor: default; }

/* Totals card (sticky) */
.hpf-cart__aside { position: sticky; top: var(--hpf-sticky-top); }
.hpf-cart .cart-collaterals { width: 100%; float: none; }
.hpf-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.hpf-cart-totals {
	background: var(--hpf-white); border: 1px solid var(--hpf-border); border-radius: var(--hpf-card-radius);
	padding: 26px; box-shadow: var(--hpf-shadow-md);
}
.hpf-cart-totals__title { font-size: 21px; margin: 0 0 18px; }
.hpf-cart-totals table { margin: 0; border: 0; }
.hpf-cart-totals table th, .hpf-cart-totals table td { border: 0; border-bottom: 1px solid var(--hpf-border); padding: 13px 0; font-size: 15px; }
.hpf-cart-totals table th { font-weight: 500; color: var(--hpf-muted); text-align: left; }
.hpf-cart-totals table td { text-align: right; font-weight: 700; color: var(--hpf-ink); }
.hpf-cart-totals .cart-discount td { color: var(--hpf-pink); }
.hpf-cart-totals .order-total th, .hpf-cart-totals .order-total td { border-bottom: 0; padding-top: 18px; font-size: 19px; color: var(--hpf-ink); }
.hpf-cart-totals .order-total td { color: var(--hpf-teal); font-weight: 800; }
.hpf-cart-totals .woocommerce-shipping-destination { font-size: 12.5px; color: var(--hpf-muted); font-weight: 400; }
.hpf-cart-totals #shipping_method { margin: 0; padding: 0; list-style: none; }
.hpf-cart-totals #shipping_method li { margin: 6px 0; }
.hpf-cart-totals .wc-proceed-to-checkout { padding: 22px 0 0; }
.hpf-cart-totals .wc-proceed-to-checkout .checkout-button {
	display: block; width: 100%; text-align: center;
	min-height: 0; padding: 14px 24px; line-height: 1.3; font-size: 16px; border-radius: 999px;
	box-shadow: 0 10px 22px rgba(97, 186, 193, 0.28); transition: transform 0.18s var(--hpf-ease), box-shadow 0.18s var(--hpf-ease);
}
.hpf-cart-totals .wc-proceed-to-checkout .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(97, 186, 193, 0.4); }
.hpf-cart-totals .shipping-calculator-button { color: var(--hpf-teal); }

/* Cross-sells — full-width grid below the cart (relocated in woocommerce-ui.php) */
.woocommerce-cart .cross-sells {
	max-width: var(--hpf-maxw); width: 100%; float: none; margin: 56px auto 0;
}
.woocommerce-cart .cross-sells > h2 {
	font-family: var(--hpf-font-head); text-transform: uppercase; letter-spacing: .3px;
	font-size: clamp(22px, 3vw, 30px); color: var(--hpf-teal-dark); margin: 0 0 26px;
}
.woocommerce-cart .cross-sells ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0;
}
@media (max-width: 1024px) { .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce-cart .cross-sells ul.products { grid-template-columns: 1fr; } }

/* Empty cart */
.hpf-cart-empty { max-width: 540px; margin: 0 auto; text-align: center; padding: 56px 24px; }
.hpf-cart-empty__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%;
	background: var(--hpf-cream); color: var(--hpf-teal); margin: 0 0 26px; animation: hpf-float 3.5s ease-in-out infinite;
}
.hpf-cart-empty .cart-empty, .hpf-cart-empty .wc-empty-cart-message { font-size: 21px; color: var(--hpf-ink); font-weight: 700; margin: 0 0 24px; }
.hpf-cart-empty .return-to-shop { margin: 0; }
.hpf-cart-empty .return-to-shop .hpf-btn { min-height: 52px; line-height: 28px; padding: 12px 34px; }
@keyframes hpf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* =========================================================
 * CHECKOUT — premium two-column layout
 * =======================================================*/
/* Light canvas so the white cards read cleanly. */
.woocommerce-checkout .site-content { background: var(--hpf-bg-soft); }

/* WooCommerce notices (added-to-basket, returning customer, coupon) as cards. */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-left: 4px solid var(--hpf-teal);
	border-radius: var(--hpf-card-radius-sm);
	padding: 16px 20px;
	margin: 0 0 18px;
	font-size: 14.5px;
	color: var(--hpf-ink);
	box-shadow: var(--hpf-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before { display: none; }
.woocommerce-checkout .woocommerce-error { border-left-color: var(--hpf-pink); }
.woocommerce-checkout .woocommerce-message .button { border-radius: 999px; min-height: 44px; margin: 0; }
.woocommerce-checkout .woocommerce-info a.showlogin,
.woocommerce-checkout .woocommerce-info a.showcoupon { color: var(--hpf-teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-checkout .woocommerce-info a.showlogin:hover,
.woocommerce-checkout .woocommerce-info a.showcoupon:hover { color: var(--hpf-teal); }
.page-id-663 aside.hpf-checkout__aside table.shop_table.woocommerce-checkout-review-order-table {border: 0;}
/* "Have a coupon?" toggle — clean full card, no stubby left accent stripe. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	border-left: 1px solid var(--hpf-border);
	background: var(--hpf-cream, #faf9f6);
	box-shadow: none;
	padding: 15px 20px;
	font-weight: 600;
}

.hpf-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 428px; gap: 40px; align-items: start; }

/* ---- Left column: stacked cards (details + payment) ---- */
.hpf-checkout__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hpf-checkout__panel {
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-card-radius);
	box-shadow: var(--hpf-shadow-sm);
	padding: 34px 34px 30px;
}
.hpf-checkout__panel-title {
	font-family: var(--hpf-font-head);
	font-size: 19px; font-weight: 700; letter-spacing: .2px;
	padding: 0 0 14px; margin: 0 0 22px;
	border-bottom: 1px solid var(--hpf-border);
	color: var(--hpf-teal-dark);
}
.hpf-checkout__main .col2-set { width: 100%; }
.hpf-checkout__main .col2-set .col-1,
.hpf-checkout__main .col2-set .col-2 { width: 100%; float: none; margin: 0; }
.hpf-checkout__main .col2-set .col-2:empty { display: none; }
.hpf-checkout__main .woocommerce-shipping-fields,
.hpf-checkout__main .woocommerce-additional-fields { margin-top: 28px; }

/* Section headings */
.hpf-checkout__main h3 {
	font-family: var(--hpf-font-head);
	font-size: 19px; font-weight: 700; letter-spacing: .2px;
	padding: 0 0 14px; margin: 0 0 22px;
	border-bottom: 1px solid var(--hpf-border);
	color: var(--hpf-teal-dark);
}
.hpf-checkout__main .woocommerce-billing-fields__field-wrapper,
.hpf-checkout__main .woocommerce-shipping-fields__field-wrapper,
.hpf-checkout__main .woocommerce-additional-fields__field-wrapper { margin: 0; }

/* ---- Fields ---- */
.hpf-checkout .form-row { padding: 0; margin: 0 0 18px; }
.hpf-checkout .form-row label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 7px; color: var(--hpf-ink); }
.hpf-checkout .form-row .required { color: var(--hpf-pink); border: 0; text-decoration: none; }
.hpf-checkout .form-row .optional { color: var(--hpf-muted); font-weight: 400; }
.hpf-checkout .form-row input.input-text,
.hpf-checkout .form-row textarea,
.hpf-checkout .form-row select,
.hpf-checkout .form-row .select2-container { width: 100%; }
.hpf-checkout .form-row input.input-text,
.hpf-checkout .form-row textarea,
.hpf-checkout .form-row select {
	min-height: 52px;
	border: 1.5px solid var(--hpf-border);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--hpf-ink);
	background: var(--hpf-white);
	transition: border-color .15s var(--hpf-ease), box-shadow .15s var(--hpf-ease);
}
.hpf-checkout .form-row textarea { min-height: 96px; line-height: 1.5; }
.hpf-checkout .form-row input.input-text::placeholder,
.hpf-checkout .form-row textarea::placeholder { color: #9aa6a5; }
.hpf-checkout .form-row input.input-text:focus,
.hpf-checkout .form-row textarea:focus,
.hpf-checkout .form-row select:focus {
	outline: none; border-color: var(--hpf-teal); box-shadow: 0 0 0 3px rgba(97, 186, 193, .22);
}
.hpf-checkout .form-row.woocommerce-invalid input.input-text,
.hpf-checkout .form-row.woocommerce-invalid textarea,
.hpf-checkout .form-row.woocommerce-invalid select { border-color: var(--hpf-pink); }
.hpf-checkout .form-row.woocommerce-invalid input.input-text:focus { box-shadow: 0 0 0 3px rgba(212, 102, 129, .18); }
.hpf-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--hpf-teal); }

/* select2 (country / state) matched to the inputs */
.hpf-checkout .select2-container--default .select2-selection--single {
	height: 52px; border: 1.5px solid var(--hpf-border); border-radius: 12px;
	display: flex; align-items: center;
}
.hpf-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding-left: 14px; color: var(--hpf-ink); }
.hpf-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; right: 8px; }
.hpf-checkout .select2-container--focus .select2-selection--single,
.hpf-checkout .select2-container--open .select2-selection--single { border-color: var(--hpf-teal); box-shadow: 0 0 0 3px rgba(97, 186, 193, .22); }

/* Ship-to-different + checkboxes */
.hpf-checkout #ship-to-different-address { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 6px 0 20px; }
.hpf-checkout #ship-to-different-address label { margin: 0; font-weight: 600; }
.hpf-checkout input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--hpf-teal); }
.hpf-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; }

/* ---- Returning-customer login + coupon forms as cards ---- */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin: 0 0 18px; }
/* .checkout_coupon is a <div>, not a <form> — it renders inside the checkout
   form, where a nested <form> would be dropped by the parser and its submit
   button would place the order. See woocommerce/checkout/form-coupon.php. */
.woocommerce-checkout form.login,
.woocommerce-checkout .checkout_coupon {
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: var(--hpf-card-radius);
	box-shadow: var(--hpf-shadow-sm);
	padding: 24px;
	margin: 0 0 18px;
}
.woocommerce-checkout .checkout_coupon {
	margin-top: 14px;
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
}
.woocommerce-checkout .checkout_coupon .form-row {
	margin: 0; padding: 0; float: none; width: auto;
}
.woocommerce-checkout .checkout_coupon .form-row-first { flex: 1 1 220px; min-width: 0; }
.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; min-width: 160px; }
.woocommerce-checkout .checkout_coupon .clear { display: none; }
.woocommerce-checkout .checkout_coupon .hpf-coupon__msg,
.woocommerce-checkout .checkout_coupon #coupon_code { width: 100%; }
.woocommerce-checkout .checkout_coupon .hpf-coupon__msg { flex: 1 0 100%; }
.woocommerce-checkout .checkout_coupon .button,
.woocommerce-checkout form.login .button { border-radius: 999px; min-height: 50px; }
.woocommerce-checkout .checkout_coupon .button { width: 100%; cursor: pointer; }
.woocommerce-checkout .checkout_coupon.is-processing { opacity: .6; pointer-events: none; }

/* Inline coupon feedback: errors sit under the field, the success notice is
   moved above the (re-collapsed) box by assets/js/woocommerce.js. */
.woocommerce-checkout .hpf-coupon__msg { display: none; clear: both; }
.woocommerce-checkout .hpf-coupon__msg > * { margin: 14px 0 0; }
.woocommerce-checkout .hpf-coupon__msg .woocommerce-error,
.woocommerce-checkout .hpf-coupon__msg .woocommerce-message {
	list-style: none; padding: 12px 16px; font-size: 14px; border-radius: 12px;
}
.woocommerce-checkout .hpf-coupon__applied { margin: 0 0 14px; }

/* ============================================================
 *  CHECKOUT — Order summary (right column)
 *  Fully scoped under .hpf-checkout__aside / .hpf-checkout #payment,
 *  so nothing here leaks onto cart, account or other WooCommerce pages.
 * ==========================================================*/
.hpf-checkout__aside {
	position: sticky; top: var(--hpf-sticky-top);
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(13, 95, 89, .12);
	padding: 26px 26px 22px;
}
.hpf-checkout__summary-title {
	font-family: var(--hpf-font-head);
	font-size: 20px; font-weight: 700; color: var(--hpf-teal-dark);
	margin: 0 0 18px; padding: 0 0 16px;
	border-bottom: 1px solid var(--hpf-border);
	display: flex; align-items: center; gap: 10px;
}
.hpf-checkout__summary-title::before {
	content: ""; flex: none; width: 20px; height: 20px;
	background: var(--hpf-teal);
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* Collapsible-summary header extras — hidden on desktop, revealed on mobile. */
.hpf-checkout__summary-title .hpf-summary-amount,
.hpf-checkout__summary-title .hpf-summary-chevron { display: none; }

/* ---- Product review table ---- */
.hpf-checkout__aside .shop_table { margin: 0; border: 0; width: 100%; background: transparent; border-collapse: collapse; }
.hpf-checkout__aside .shop_table thead th {
	background: transparent; border: 0; border-bottom: 1px solid var(--hpf-border);
	padding: 0 0 10px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--hpf-muted); font-weight: 700;
}
.hpf-checkout__aside .shop_table thead th.product-total { text-align: right; }
.hpf-checkout__aside .shop_table tbody .cart_item td {
	border: 0; border-bottom: 1px solid var(--hpf-border);
	padding: 15px 0; font-size: 14.5px; vertical-align: top; line-height: 1.45;
}
.hpf-checkout__aside .shop_table .product-name { color: var(--hpf-ink); font-weight: 700; padding-right: 14px; }
.hpf-checkout__aside .shop_table .product-name .product-quantity {
	display: inline-block; margin-left: 4px; vertical-align: middle;
	color: var(--hpf-teal-dark); font-weight: 700; font-size: 12px;
	background: rgba(97, 186, 193, .14); border-radius: 999px; padding: 1px 9px;
}
.hpf-checkout__aside .shop_table .product-total { text-align: right; font-weight: 700; white-space: nowrap; color: var(--hpf-ink); }
/* Subscription frequency / meta lines (WC Subscriptions) */
.hpf-checkout__aside .shop_table .product-name .subscription-details,
.hpf-checkout__aside .shop_table .product-name small,
.hpf-checkout__aside .shop_table .variation,
.hpf-checkout__aside .shop_table dl.variation { display: block; margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--hpf-muted); line-height: 1.4; }
.hpf-checkout__aside .shop_table .product-total .subscription-details { font-size: 12px; color: var(--hpf-teal); white-space: normal; }

/* ---- Totals (tfoot) ---- */
.hpf-checkout__aside .shop_table tfoot th,
.hpf-checkout__aside .shop_table tfoot td { border: 0; padding: 11px 0; font-size: 14.5px; }
.hpf-checkout__aside .shop_table tfoot tr:not(.order-total):not(.recurring-totals) th,
.hpf-checkout__aside .shop_table tfoot tr:not(.order-total):not(.recurring-totals) td { border-bottom: 1px solid rgba(0, 0, 0, .05); }
.hpf-checkout__aside .shop_table tfoot th { font-weight: 500; color: var(--hpf-muted); text-align: left; }
.hpf-checkout__aside .shop_table tfoot td { text-align: right; font-weight: 700; color: var(--hpf-ink); }

/* Grand total — visually prominent */
.hpf-checkout__aside .shop_table tfoot .order-total th,
.hpf-checkout__aside .shop_table tfoot .order-total td {
	border-top: 2px solid var(--hpf-cream-border); border-bottom: 0;
	padding-top: 16px; padding-bottom: 4px; vertical-align: baseline;
}
.hpf-checkout__aside .shop_table tfoot .order-total th {
	font-family: var(--hpf-font-head); font-weight: 700; font-size: 15px;
	color: var(--hpf-ink); text-transform: uppercase; letter-spacing: .4px;
}
.hpf-checkout__aside .shop_table tfoot .order-total td {
	color: var(--hpf-teal-dark); font-weight: 800; font-size: 24px; font-family: var(--hpf-font-head);
}
.hpf-checkout__aside .shop_table tfoot .order-total .includes_tax,
.hpf-checkout__aside .shop_table tfoot .order-total small { display: block; font-size: 11.5px; font-weight: 500; color: var(--hpf-muted); margin-top: 2px; }

/* Recurring totals (WooCommerce Subscriptions) as a labelled subsection */
.hpf-checkout__aside .shop_table tfoot tr.recurring-totals th {
	padding: 20px 0 8px; font-family: var(--hpf-font-head); font-weight: 700;
	font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--hpf-teal-dark);
}
.hpf-checkout__aside .shop_table tfoot tr.order-total.recurring-total th,
.hpf-checkout__aside .shop_table tfoot tr.order-total.recurring-total td {
	border-top: 1px solid var(--hpf-border); padding-top: 12px;
}
.hpf-checkout__aside .shop_table tfoot tr.order-total.recurring-total td { font-size: 14px; color: var(--hpf-teal-dark); }

.hpf-checkout__aside #shipping_method { margin: 4px 0 0; padding: 0; list-style: none; }
.hpf-checkout__aside #shipping_method li { margin: 6px 0; display: flex; gap: 8px; align-items: baseline; }

/* Secure note under the table */
.hpf-checkout .hpf-secure-note--pay { justify-content: flex-start; margin: 16px 0 0; font-size: 13px; color: var(--hpf-muted); }

/* ---- Payment — radio cards (relocated to left column, under its own heading) ---- */
.hpf-checkout #payment { background: transparent; border-radius: 0; margin: 0; padding: 0; }
.hpf-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0; list-style: none; }
.hpf-checkout #payment ul.payment_methods li {
	list-style: none; margin: 0 0 10px; padding: 15px 16px;
	background: var(--hpf-white); border: 1.5px solid var(--hpf-border); border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hpf-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0; }
.hpf-checkout #payment ul.payment_methods li:hover { border-color: var(--hpf-cream-border); }
.hpf-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--hpf-teal); background: var(--hpf-cream); box-shadow: 0 0 0 3px rgba(97, 186, 193, .14);
}
.hpf-checkout #payment ul.payment_methods li label { font-weight: 700; color: var(--hpf-ink); display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.hpf-checkout #payment ul.payment_methods li label img { max-height: 26px; width: auto; margin: 0; vertical-align: middle; }
.hpf-checkout #payment ul.payment_methods li input[type="radio"] { width: 19px; height: 19px; accent-color: var(--hpf-teal); margin: 0 2px 0 0; flex: none; }
.hpf-checkout #payment div.payment_box {
	background: transparent; border-radius: 0; font-size: 14px; color: var(--hpf-muted); margin: 14px 0 2px; padding: 0;
}
.hpf-checkout #payment div.payment_box::before { display: none; }
.hpf-checkout #payment .payment_box input.input-text,
.hpf-checkout #payment .payment_box textarea,
.hpf-checkout #payment .payment_box select,
.hpf-checkout #payment .wc-credit-card-form input {
	min-height: 48px; border: 1.5px solid var(--hpf-border); border-radius: 10px; padding: 10px 14px; width: 100%;
	transition: border-color .15s var(--hpf-ease), box-shadow .15s var(--hpf-ease);
}
.hpf-checkout #payment .payment_box input.input-text:focus,
.hpf-checkout #payment .payment_box textarea:focus,
.hpf-checkout #payment .wc-credit-card-form input:focus { outline: none; border-color: var(--hpf-teal); box-shadow: 0 0 0 3px rgba(97, 186, 193, .2); }

/* ---- Mollie Components — credit card fields ----
 * Mollie mounts each field as an <iframe> inside
 * .mollie-components > div#<field> > .mollie-component, so none of the input
 * rules above reach them and the fields fall back to the plugin's own 34px
 * box with a blue focus ring — out of step with the rest of the form.
 *
 * Two things are corrected here:
 *   1. Height. The plugin sets a width on the mounted iframe but never a
 *      height, leaving it to the element's own sizing — which the global
 *      `img, svg, video, iframe { height: auto }` reset in style.css then
 *      collapses. The field content ends up unanchored to its box.
 *   2. The expiry / CVC pair. Mollie lays those out with flex plus
 *      max-width:50% and 5% side padding; an explicit grid keeps them on one
 *      row and aligned to the full-width fields above.
 * Everything is scoped to the checkout payment box, as with the rules above.
 * =======================================================*/
.hpf-checkout #payment .mollie-components {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 14px;
	align-items: start;
	margin: 4px 0 2px;
}
.hpf-checkout #payment .mollie-components > input[type="hidden"] { display: none; }

/* Name on card and Card number span both columns; expiry and CVC share a row. */
.hpf-checkout #payment .mollie-components > div { grid-column: 1 / -1; min-width: 0; }
.hpf-checkout #payment .mollie-components > #expiryDate,
.hpf-checkout #payment .mollie-components > #verificationCode {
	grid-column: span 1;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
/* The grid gap sets the rhythm — drop the plugin's stacking margin. */
.hpf-checkout #payment .mollie-components > div + div { margin-top: 0; }

/* Field box — same metrics as the checkout inputs above. */
.hpf-checkout #payment .mollie-components .mollie-component {
	display: block;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 14px;
	background: var(--hpf-white);
	border: 1.5px solid var(--hpf-border);
	border-radius: 10px;
	box-shadow: none;
	transition: border-color .15s var(--hpf-ease), box-shadow .15s var(--hpf-ease);
}

/* Fill the box, overriding the global iframe height reset. */
.hpf-checkout #payment .mollie-components .mollie-component iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	border: 0;
	vertical-align: top;
}

/* Focus and invalid states in the theme's colours, replacing Mollie's blue. */
.hpf-checkout #payment .mollie-components .mollie-component.has-focus {
	border-color: var(--hpf-teal);
	box-shadow: 0 0 0 3px rgba(97, 186, 193, .2);
}
.hpf-checkout #payment .mollie-components .mollie-component.is-invalid {
	border-color: var(--hpf-pink);
	box-shadow: 0 0 0 3px rgba(212, 102, 129, .18);
}

/* Labels and per-field error text. */
.hpf-checkout #payment .mollie-components .mollie-component-label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hpf-ink);
}
.hpf-checkout #payment .mollie-components [role="alert"] {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--hpf-pink);
}
.hpf-checkout #payment .mollie-components [role="alert"]:empty { display: none; }

/* Stack the expiry / CVC pair on narrow screens. */
@media (max-width: 480px) {
	.hpf-checkout #payment .mollie-components { grid-template-columns: 1fr; }
	.hpf-checkout #payment .mollie-components > #expiryDate,
	.hpf-checkout #payment .mollie-components > #verificationCode { grid-column: 1 / -1; }
}

/* Terms + privacy */
.hpf-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size: 13px; margin: 6px 0 14px; }
.hpf-checkout #payment .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--hpf-muted); margin: 0 0 12px; }

/* ---- Place order button (with hover + loading states) ---- */
.hpf-checkout #payment .place-order { padding: 6px 0 0; margin: 0; }
.hpf-checkout #payment #place_order {
	position: relative;
	display: block; width: 100%; min-height: 56px; float: none; margin: 0;
	font-family: var(--hpf-font-head); font-size: 17px; font-weight: 700; letter-spacing: .2px;
	color: #fff; background: var(--hpf-teal); border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: 0 12px 26px rgba(97, 186, 193, .32);
	transition: transform .18s var(--hpf-ease), box-shadow .18s var(--hpf-ease), background .18s var(--hpf-ease);
}
.hpf-checkout #payment #place_order:hover { background: var(--hpf-teal-dark); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(97, 186, 193, .42); }
.hpf-checkout #payment #place_order:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(97, 186, 193, .3); }
.hpf-checkout #payment #place_order:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
/* Loading state — WC adds .processing to the .checkout form during AJAX submit. */
.hpf-checkout.processing #place_order { color: transparent !important; pointer-events: none; }
.hpf-checkout.processing #place_order::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
	border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
	animation: hpf-spin .7s linear infinite;
}
@keyframes hpf-spin { to { transform: rotate(360deg); } }

/* "Important note" box injected before submit (functions.php) — premium info card */
.hpf-checkout .custom-before-place-order {
	position: relative;
	background: linear-gradient(180deg, #f3fbfa 0%, var(--hpf-cream) 100%);
	border: 1px solid var(--hpf-cream-border);
	border-radius: 14px;
	padding: 16px 18px 17px;
	margin: 0 0 16px;
	overflow: hidden;
}
.hpf-checkout .custom-before-place-order::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hpf-teal);
}
.hpf-checkout .custom-before-place-order__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.hpf-checkout .custom-before-place-order__icon {
	flex: none; width: 30px; height: 30px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hpf-teal); color: #fff;
	box-shadow: 0 4px 10px rgba(97, 186, 193, .35);
}
.hpf-checkout .custom-before-place-order__icon svg { width: 16px; height: 16px; }
.hpf-checkout .custom-before-place-order h3 {
	font-family: var(--hpf-font-head);
	font-size: 12.5px; font-weight: 700; margin: 0; padding: 0; border: 0;
	color: var(--hpf-teal-dark); text-transform: uppercase; letter-spacing: .6px;
}
.hpf-checkout .custom-before-place-order ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hpf-checkout .custom-before-place-order li {
	position: relative; display: flex; align-items: flex-start; gap: 10px;
	margin: 0; padding: 11px 13px;
	background: var(--hpf-white);
	border: 1px solid var(--hpf-cream-border);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(13, 95, 89, .05);
	font-size: 13px; line-height: 1.4; color: var(--hpf-ink);
}
.hpf-checkout .custom-before-place-order li::before {
	content: ""; flex: none; width: 17px; height: 17px; margin-top: 1px;
	background: var(--hpf-teal);
	-webkit-mask: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	mask: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Trust badges — below the Place Order button in the left payment panel */
.hpf-checkout #payment .place-order .hpf-trust { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--hpf-border); }

/* ---- Billing/Shipping fields: two-column grid on desktop (≥1024),
   single column on mobile/tablet (<1024). Short fields pair up; wide
   fields (address, email, country, pet fields) span the full width. ---- */
@media (min-width: 1024px) {
	.hpf-checkout .woocommerce-billing-fields__field-wrapper,
	.hpf-checkout .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		align-items: start;
	}
	/* Each field is one grid cell (keeps the 18px vertical rhythm from .form-row).
	   Override WooCommerce's default form-row-first/last width:47% + float so
	   First/Last name (and any paired field) fill their whole grid column. */
	.hpf-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.hpf-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
		min-width: 0;
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	/* Full-width fields — need the horizontal space / read better on their own row. */
	.hpf-checkout [id$="_country_field"],
	.hpf-checkout [id$="_address_1_field"],
	.hpf-checkout [id$="_address_2_field"],
	.hpf-checkout [id$="_email_field"],
	.hpf-checkout #billing_cat_gender_field { grid-column: 1 / -1; }
	/* Pet Name + "what are you feeding?" pair side by side. */
	.hpf-checkout #billing_cat_name_field,
	.hpf-checkout #billing_cat_food_field { grid-column: auto; }
}
/* =========================================================
 * MOTION — reveal-on-scroll (progressive; no-JS shows everything)
 * =======================================================*/
@media (prefers-reduced-motion: no-preference) {
	.hpf-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--hpf-ease), transform 0.6s var(--hpf-ease); }
	.hpf-reveal.is-in { opacity: 1; transform: none; }
}

/* =========================================================
 * RESPONSIVE
 * =======================================================*/
@media (max-width: 1024px) {
	.hpf-product__top { gap: 36px; }
	.hpf-cart__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; }
	.hpf-checkout__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
}

@media (max-width: 900px) {
	.hpf-product__top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 44px; }
	.hpf-product__gallery.sticky-gallery { position: static; }
	.hpf-cart__layout, .hpf-checkout__layout { grid-template-columns: 1fr; gap: 32px; }
	.hpf-cart__aside, .hpf-checkout__aside { position: static; }
	/* Stacked/mobile: product items list first, summary below (DOM order). */
	.hpf-cart__layout { display: flex; flex-direction: column; }
	.hpf-cart__main { order: 0; }
	.hpf-cart__aside { order: 1; }
	/* Checkout stacked order: order summary FIRST, then details → payment.
	   display:contents lifts the two left panels into the layout flow so the
	   summary can sit above them. */
	/* align-items:stretch overrides the desktop grid's align-items:start so every
	   stacked section (incl. the collapsed "Your order" bar) fills the full width. */
	.hpf-checkout__layout { display: flex; flex-direction: column; align-items: stretch; }
	.hpf-checkout__main { display: contents; }
	.hpf-checkout__aside { order: 1; width: 100%; }
	.hpf-checkout__panel--details { order: 2; }
	.hpf-checkout__panel--payment { order: 3; }

	/* Collapsible "Your order" summary (mobile only). */
	.hpf-checkout__aside.is-toggleable .hpf-checkout__summary-title {
		cursor: pointer; user-select: none; margin-bottom: 0;
	}
	.hpf-checkout__aside.is-toggleable .hpf-summary-amount {
		display: inline-block; margin-left: auto;
		font-family: var(--hpf-font-head); font-size: 18px; font-weight: 800; color: var(--hpf-teal-dark);
	}
	.hpf-checkout__aside.is-toggleable .hpf-summary-chevron {
		display: inline-flex; align-items: center; color: var(--hpf-teal-dark);
		transition: transform .25s var(--hpf-ease);
	}
	/* Chevron points down when collapsed, flips up when expanded. */
	.hpf-checkout__aside.is-toggleable:not(.is-collapsed) .hpf-summary-chevron { transform: rotate(180deg); }
	.hpf-checkout__aside.is-toggleable.is-collapsed .hpf-checkout__summary-title { border-bottom: 0; padding-bottom: 0; }
	.hpf-checkout__aside.is-toggleable.is-collapsed #order_review { display: none; }
}

@media (max-width: 782px) {
	.hpf-product__summary form.cart .single_add_to_cart_button { flex: 1 1 100%; }
	.hpf-cart-actions { flex-direction: column; align-items: stretch; }
	.hpf-cart-actions .coupon { flex-wrap: wrap; }
	.hpf-cart-actions .coupon #coupon_code { flex: 1 1 100%; }
	.hpf-trust { gap: 8px; }
	.hpf-trust__txt { font-size: 11px; }
}

/* Checkout order summary — compact on phones. */
@media (max-width: 600px) {
	.hpf-checkout__panel { padding: 20px; }
	.hpf-checkout__aside { padding: 20px; border-radius: 16px; }
	.hpf-checkout__summary-title { font-size: 18px; }
	.hpf-checkout__aside .shop_table tfoot .order-total td { font-size: 21px; }
	.hpf-checkout #payment ul.payment_methods li { padding: 14px 14px; }
	.hpf-checkout #payment #place_order { min-height: 54px; font-size: 16px; }
}

/* Tablet/landscape: tighten the item card grid. */
@media (max-width: 900px) {
	.hpf-cart-item { grid-template-columns: 88px minmax(0, 1fr) auto; padding: 20px; gap: 6px 18px; }
	.hpf-cart-item__media img { width: 84px; height: 84px; }
}

/* Mobile: stack the item card (image + info on top, qty + subtotal below). */
@media (max-width: 600px) {
	.hpf-cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"media info"
			"media qty"
			"subtotal subtotal";
		gap: 10px 14px;
		padding: 16px;
	}
	.hpf-cart-item:hover { background: var(--hpf-white); }
	.hpf-cart-item__media img { width: 72px; height: 72px; }
	.hpf-cart-item__info { padding-right: 30px; }
	.hpf-cart-item__qty { justify-self: start; align-self: center; }
	.hpf-cart-item__subtotal { justify-self: start; text-align: left; padding-top: 4px; border-top: 1px solid var(--hpf-border); margin-top: 4px; width: 100%; }
	.hpf-cart-item__remove { position: absolute; top: 14px; right: 14px; }
	.hpf-cart-actions { border-radius: 0; }
	.hpf-checkout__main, .hpf-checkout__aside, .hpf-cart-totals { padding: 20px; }
	.hpf-trust { grid-template-columns: repeat(3, 1fr); }
}

/* Give products room above the fixed sticky bar on mobile. */
@media (max-width: 900px) {
	.single-product.hpf-has-sticky-atc .site-content { padding-bottom: 90px; }
}


/* ===================== HOME TEMPLATE + REVIEWS ========================= */
/* ==========================================================================
   HPF Trickle Up — Home template bundle
   Home page components + [hrp_reviews] testimonials. The --hrp-* design
   tokens live in the site-wide style.css :root (single source of truth);
   this sheet only consumes them. Fonts (Quicksand + Nunito) are enqueued
   site-wide in HPF_Theme::enqueue_child_style().
   ========================================================================== */

/* ============================================================
   HURAYRA PET FOODS — Home page template styles
   All rules are scoped under .hrp-home so they never leak into
   the theme header/footer or any other page.
   (Reviews/testimonials live in reviews.css so the shortcode is
   fully reusable on its own.)
   Design tokens (colours, type, spacing, radius, shadows…) come
   from the global :root in style.css — see var(--hrp-*) below.
   ============================================================ */

/* ---- Scoped base / reset (only affects template content) ---- */
.hrp-home{
  font-family:var(--hrp-body);
  color:var(--hrp-ink);
  background:var(--hrp-paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.hrp-home *{margin:0;padding:0;box-sizing:border-box}
.hrp-home h1,.hrp-home h2,.hrp-home h3,.hrp-home h4{font-family:var(--hrp-head);font-weight:700;color:var(--hrp-ink);line-height:1.12;letter-spacing:-.01em}
.hrp-home a{text-decoration:none;color:inherit}
.hrp-home img{max-width:100%;display:block}
.hrp-home section{position:relative}
.hrp-home .wrap{max-width:var(--hrp-maxw);margin:0 auto;padding:0 24px}
.hrp-home .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--hrp-head);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hrp-teal-deep);
  background:var(--hrp-teal-soft);padding:7px 16px;border-radius:50px;margin-bottom:18px;
}
.hrp-home .eyebrow.pink{color:var(--hrp-pink-deep);background:var(--hrp-pink-soft)}
.hrp-home .eyebrow.gold{color:var(--hrp-gold-deep);background:#fbf2db}
.hrp-home .section-head{text-align:center;max-width:680px;margin:0 auto 54px}
.hrp-home .section-head h2{font-size:clamp(2rem,4.2vw,2.9rem)}
.hrp-home .section-head p{color:var(--hrp-ink-soft);font-size:1.06rem;margin-top:14px}

/* Buttons */
.hrp-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--hrp-head);font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:50px;border:none;cursor:pointer;
  transition:transform .25s var(--hrp-ease), box-shadow .25s var(--hrp-ease), background .25s;
  white-space:nowrap;
}
.hrp-home .btn svg{width:18px;height:18px}
.hrp-home .btn-gold{background:var(--hrp-gold);color:#3a2f10;box-shadow:0 10px 26px rgba(228,180,81,.42)}
.hrp-home .btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(228,180,81,.55);background:#edbe5b}
.hrp-home .btn-pink{background:var(--hrp-pink);color:#fff;box-shadow:0 10px 26px rgba(212,102,129,.40)}
.hrp-home .btn-pink:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(212,102,129,.52)}
.hrp-home .btn-teal{background:var(--hrp-teal);color:#fff;box-shadow:0 10px 26px rgba(96,186,191,.40)}
.hrp-home .btn-teal:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(96,186,191,.52)}
.hrp-home .btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.65);color:#fff}
.hrp-home .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.hrp-home .btn-outline{background:#fff;border:2px solid #e7e7e3;color:var(--hrp-ink)}
.hrp-home .btn-outline:hover{border-color:var(--hrp-teal);color:var(--hrp-teal-deep);transform:translateY(-3px)}

/* ============================================================ Hero */
/* ============================================================ Hero (video background) */
.hrp-home .hero--video{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,82vh,860px);display:flex;align-items:center;
  /* Shown until the first video frame paints — brand colours, never a black flash. */
  background:linear-gradient(135deg,var(--hrp-teal-deep) 0%,#123c40 55%,var(--hrp-ink) 100%);
}
.hrp-home .hero__media{position:absolute;inset:0;z-index:0}
.hrp-home .hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* Scrim: dark enough on the left for the copy, clearing toward the right. */
.hrp-home .hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(13,22,24,.86) 0%, rgba(13,22,24,.66) 38%, rgba(13,22,24,.24) 68%, rgba(13,22,24,.42) 100%),
    linear-gradient(180deg, rgba(13,22,24,.35) 0%, transparent 28%, rgba(13,22,24,.5) 100%);
}
.hrp-home .hero__inner{position:relative;z-index:1;padding-block:clamp(70px,9vw,120px)}
.hrp-home .hero__copy{max-width:min(660px,100%);color:#fff}
/* HMC certification roundel — the same bare-mark-plus-drop-shadow treatment as
   .hpf-hn-hero__seal on the Halal Nutrition / Why Halal heroes (no backing
   plate; the artwork is a solid red disc on transparency, so it reads over any
   video frame on its own). It sits in the CTA row as a third flex item, sized to
   the buttons beside it, so the certification sits right next to the ask. */
.hrp-home .hero__seal{flex:none;width:68px;line-height:0}
.hrp-home .hero__seal img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
/* The hero is the LCP element. It animates as one block with NO fill-mode:
   the copy is visible by default and the keyframes only play over the top, so
   nothing can leave it stuck at opacity 0 if animations never run.
   The keyframes move it but never fade it: an LCP element that starts at
   opacity 0 is not a paint candidate until the fade finishes, which added the
   animation's full duration to Largest Contentful Paint. Transform alone is
   composited, so the text paints immediately and still slides in. */
.hrp-home .hero__copy{animation:hrp-hero-in .9s cubic-bezier(.22,1,.36,1)}
@keyframes hrp-hero-in{from{transform:translateY(24px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.hrp-home .hero__copy{animation:none}}
.hrp-home .hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--hrp-head);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:50px;
}
.hrp-home .hero__title{
  font-family:var(--hrp-head);font-weight:700;color:#fff;
  font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.04;letter-spacing:-.02em;margin:0;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.hrp-home .hero__title .accent{color:var(--hrp-gold);white-space:nowrap}
.hrp-home .hero__lead{
  font-size:clamp(1rem,1.55vw,1.22rem);line-height:1.6;color:rgba(255,255,255,.9);
  margin:20px 0 32px;max-width:46ch;text-wrap:pretty;
}
.hrp-home .hero__lead strong{color:#fff;font-weight:800}
.hrp-home .hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hrp-home .hero__cta .btn-ghost{
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hrp-home .hero__cta .btn-ghost:hover{background:#fff;color:var(--hrp-ink);border-color:#fff}
/* The rating row links out to the Trustpilot profile, so it reads as tappable
   without shouting — the arrow and underline only appear on hover/focus. */
.hrp-home .hero__proof{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap;
  text-decoration:none;border-radius:8px;transition:opacity .2s;
}
.hrp-home a.hero__proof:hover{opacity:.9}
.hrp-home a.hero__proof:focus-visible{outline:2px solid var(--hrp-gold);outline-offset:4px}
.hrp-home .hero__stars{color:#00b67a;letter-spacing:2px;font-size:1.05rem}
.hrp-home .hero__rating{color:rgba(255,255,255,.9);font-size:.92rem;font-weight:600}
.hrp-home a.hero__proof:hover .hero__rating{text-decoration:underline;text-underline-offset:3px}
.hrp-home .hero__rating b{font-family:var(--hrp-head);color:#fff}
.hrp-home .hero__proof-arrow{
  width:14px;height:14px;flex:none;color:rgba(255,255,255,.7);
  opacity:0;transform:translate(-3px,3px);transition:opacity .2s,transform .2s;
}
.hrp-home a.hero__proof:hover .hero__proof-arrow,
.hrp-home a.hero__proof:focus-visible .hero__proof-arrow{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .hrp-home .hero__proof,.hrp-home .hero__proof-arrow{transition:none}
  .hrp-home .hero__proof-arrow{transform:none}
}
.hrp-home .hero__chips{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.hrp-home .hero__chips li{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-weight:700;font-size:.84rem;padding:9px 15px;border-radius:50px;
}
.hrp-home .hero__chips svg{width:17px;height:17px;color:var(--hrp-gold);flex:none}
/* Scroll cue */
.hrp-home .hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;
  display:grid;justify-items:center;padding-top:7px;
}
.hrp-home .hero__scroll span{width:3px;height:8px;border-radius:2px;background:#fff;animation:hrp-scroll 1.9s ease-in-out infinite}
@keyframes hrp-scroll{0%,100%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:0;transform:translateY(11px)}}
@media (prefers-reduced-motion:reduce){
  .hrp-home .hero__scroll span{animation:none;opacity:1}
}

/* ============================================================ Press / featured-in marquee */
.hrp-home .press{background:#fff;padding:52px 0 0 0;border-top:1px solid #f0f0ee;border-bottom:1px solid #f0f0ee;overflow:hidden}
.hrp-home .press .label{display:block;text-align:center;font-family:var(--hrp-head);font-weight:700;color:var(--hrp-ink-soft);font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:0px}
.hrp-home .press .label b{color:var(--hrp-teal-deep)}
.hrp-home .marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.hrp-home .marquee-track{display:flex;width:max-content;padding: 40px 0;animation:hrp-scrollx 55s linear infinite}
.hrp-home .marquee:hover .marquee-track{animation-play-state:paused}
@keyframes hrp-scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hrp-home .logo-card{
  flex:none;width:172px;height:96px;margin:0 10px;background:#fff;border:1px solid #eef0ef;
  border-radius:var(--hrp-radius);display:grid;place-items:center;padding:18px 24px;
  box-shadow:var(--hrp-shadow-sm);transition:transform .3s var(--hrp-ease),box-shadow .3s,border-color .3s;
}
.hrp-home .logo-card:hover{transform:translateY(-6px);box-shadow:var(--hrp-shadow);border-color:#e2e2dd}
.hrp-home .logo-card img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.hrp-home .logo-card:hover img{filter:grayscale(0);opacity:1}
@media(prefers-reduced-motion:reduce){.hrp-home .marquee-track{animation:none}}

/* ============================================================ Products */
.hrp-home .products{padding:90px 0}
.hrp-home .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* Category rows (Wet Food / Dry Food) */
.hrp-home .product-cat{margin-bottom:54px}
.hrp-home .product-cat:last-of-type{margin-bottom:0}
.hrp-home .product-cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 26px}
.hrp-home .product-cat__title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0;color:var(--hrp-ink,#1d2327)}
.hrp-home .product-cat__all{font-weight:700;font-size:.95rem;color:var(--hrp-teal,#60babf);text-decoration:none;white-space:nowrap}
.hrp-home .product-cat__all:hover{color:var(--hrp-pink,#d46681)}
/* =========================================================
 * GLOBAL PRODUCT CARD  (.hpf-pcard--global)
 * The site-wide reusable card (shop, categories, tags, search, home, related,
 * up/cross-sells). The header dropdown keeps the plain .hpf-pcard (unchanged).
 * The `--global` prefix (2 classes) also out-specifies the home's `.hrp-home *`
 * reset, so paddings survive on the home page.
 * =======================================================*/
.hpf-pcard--global{box-shadow:0 8px 24px rgba(29,35,39,.06);position:relative;transition:transform .3s var(--hpf-ease),box-shadow .3s var(--hpf-ease)}
.hpf-pcard--global:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(13,95,89,.16)}
/* Media fills the card's available height so cards stay equal + controls align. */
.hpf-pcard--global .hpf-pcard__form{flex:1 1 auto;display:flex;flex-direction:column}
.hpf-pcard--global .hpf-pcard__media{flex:1 1 auto;max-height:200px;min-height:200px;padding:10px;overflow:hidden;position:relative}
.hpf-pcard--global .hpf-pcard__media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:5px;animation:hpfPouchFloat 4.6s ease-in-out infinite;will-change:transform}

/* ---- Fancy cat-food animations ---- */
@keyframes hpfPouchFloat{0%,100%{transform:translateY(0) scale(1.06)}50%{transform:translateY(-7px) scale(1.06)}}
.hpf-pcard--global:hover .hpf-pcard__media img{animation-play-state:paused;transform:scale(1.12) rotate(-1.5deg);transition:transform .45s var(--hpf-ease)}
.hpf-pcard--global .hpf-pcard__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s ease}
.hpf-pcard--global:hover .hpf-pcard__media::after{transform:translateX(130%)}
.hpf-pcard--global::after{content:"🐾";position:absolute;top:12px;right:14px;z-index:4;font-size:20px;opacity:0;transform:translateY(8px) rotate(-14deg);transition:opacity .35s ease,transform .4s var(--hpf-ease);pointer-events:none}
.hpf-pcard--global:hover::after{opacity:.9;transform:translateY(0) rotate(0)}
@media (prefers-reduced-motion: reduce){
	.hpf-pcard--global .hpf-pcard__media img{animation:none;transform:scale(1.06)}
	.hpf-pcard--global,.hpf-pcard--global .hpf-pcard__media::after,.hpf-pcard--global::after{transition:none}
	.hpf-pcard--global:hover{transform:none}
}
/* Roomier spacing (also re-declares paddings the home `.hrp-home *` reset strips). */
.hpf-pcard--global .hpf-pcard__title{padding:16px 16px 4px;font-size:15px}
.hpf-pcard--global .hpf-pcard__options{padding:8px 16px 14px}
.hpf-pcard--global .hpf-pcard__opt{padding:11px 13px}
.hpf-pcard--global .hpf-pcard__opt-title{font-size:14.5px}
.hpf-pcard--global .hpf-pcard__buy{padding:8px 16px 18px}
.hpf-pcard--global .hpf-pcard__qty{padding:4px}
.hpf-pcard--global .hpf-pcard__submit{padding:12px 18px}
.hpf-pcard--global .hpf-pcard__badge{padding:2px 7px}
.hpf-pcard--global .hpf-pcard__schedule{padding:0 2px}
.hpf-pcard--global .hpf-pcard__schedule-select{padding:12px 42px 12px 16px}
.hpf-pcard--global .hpf-cselect__toggle{padding:12px 16px}
.hpf-pcard--global .hpf-cselect__list{padding:6px}
.hpf-pcard--global .hpf-cselect__option{padding:9px 14px}
.hrp-home .p-card{
  background:#fff;border-radius:var(--hrp-radius-lg);border:1px solid #f0f0ec;
  box-shadow:var(--hrp-shadow-sm);overflow:hidden;transition:transform .35s var(--hrp-ease),box-shadow .35s var(--hrp-ease);
  display:flex;flex-direction:column;position:relative;
}
.hrp-home .p-card:hover{transform:translateY(-10px);box-shadow:var(--hrp-shadow-lg)}
.hrp-home .p-media{position:relative;padding:34px 24px 16px;display:grid;place-items:center;min-height:240px}
.hrp-home .p-card:nth-child(1) .p-media{background:linear-gradient(160deg,#fdf6e6,#fbeecb)}
.hrp-home .p-card:nth-child(2) .p-media{background:linear-gradient(160deg,var(--hrp-pink-soft),#f7dde4)}
.hrp-home .p-card:nth-child(3) .p-media{background:linear-gradient(160deg,var(--hrp-teal-soft),#d6eef0)}
.hrp-home .p-media img{max-height:210px;width:auto;transition:transform .5s var(--hrp-ease);filter:drop-shadow(0 14px 22px rgba(0,0,0,.14))}
.hrp-home .p-card:hover .p-media img{transform:scale(1.07) rotate(-2deg)}
.hrp-home .p-tag{position:absolute;top:16px;left:16px;background:var(--hrp-gold);color:#3a2f10;font-family:var(--hrp-head);font-weight:800;font-size:.72rem;padding:5px 12px;border-radius:50px;letter-spacing:.03em}
.hrp-home .p-tag.save{background:var(--hrp-pink);color:#fff;left:auto;right:16px}
.hrp-home .p-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.hrp-home .p-rate{color:var(--hrp-gold-deep);font-size:.85rem;letter-spacing:1px;margin-bottom:6px}
.hrp-home .p-rate small{color:var(--hrp-ink-soft);margin-left:6px}
.hrp-home .p-body h3{font-size:1.32rem}
.hrp-home .p-body .desc{color:var(--hrp-ink-soft);font-size:.9rem;margin:8px 0 16px}
.hrp-home .p-price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.hrp-home .p-price .now{font-family:var(--hrp-head);font-weight:800;font-size:1.55rem;color:var(--hrp-ink)}
.hrp-home .p-price .was{color:#b6b6b1;text-decoration:line-through;font-size:1rem}
.hrp-home .p-price .per{color:var(--hrp-ink-soft);font-size:.82rem;font-weight:600}
.hrp-home .p-body .btn{width:100%;margin-top:auto}
.hrp-home .products .note{
  margin-top:34px;text-align:center;background:var(--hrp-pink-soft);color:var(--hrp-pink-deep);
  border:1px dashed rgba(212,102,129,.4);border-radius:var(--hrp-radius);padding:16px 22px;
  font-weight:700;font-size:.96rem;max-width:760px;margin-left:auto;margin-right:auto;
}

/* ============================================================ Features (teal band) */
.hrp-home .features{background:linear-gradient(160deg,var(--hrp-teal),var(--hrp-teal-deep));padding:88px 0;color:#fff;overflow:hidden}
/* Same decorative-overlay rule as .halal-card::before — never let these capture
   clicks meant for the content beneath them. */
.hrp-home .features::before,.hrp-home .features::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.hrp-home .features::before{width:340px;height:340px;top:-120px;left:-90px}
.hrp-home .features::after{width:260px;height:260px;bottom:-110px;right:-60px}
.hrp-home .features .section-head h2{color:#fff}
.hrp-home .features .section-head p{color:rgba(255,255,255,.85)}
.hrp-home .features .eyebrow{background:rgba(255,255,255,.18);color:#fff}
.hrp-home .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}
.hrp-home .feat{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--hrp-radius);padding:24px;display:flex;gap:16px;align-items:flex-start;
  transition:transform .3s var(--hrp-ease),background .3s;backdrop-filter:blur(2px);
}
.hrp-home .feat:hover{transform:translateY(-6px);background:rgba(255,255,255,.2)}
.hrp-home .feat .ic{width:50px;height:50px;border-radius:14px;background:#fff;color:var(--hrp-teal-deep);display:grid;place-items:center;flex:none}
.hrp-home .feat .ic svg{width:26px;height:26px}
.hrp-home .feat h4{color:#fff;font-size:1.08rem;margin-bottom:4px}
.hrp-home .feat p{color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.5}

/* ============================================================ Subscription (pink) */
/* =========================================================
 * SUBSCRIBE & SAVE — GLOBAL REUSABLE SECTION
 * Scoped to .hpf-subscribe (NOT .hrp-home) and self-contained: it ships
 * its own reset, typography, eyebrow and button so it renders identically
 * on the home page, product archives, or anywhere else. Render it with
 * hpf_subscribe_section() (inc/functions-helpers.php) — never duplicate
 * this markup. The 2-class inner selectors also out-specify the home's
 * `.hrp-home *` reset, so it survives on the home page too.
 * =======================================================*/
.hpf-subscribe{padding:80px 0;position:relative}
.hpf-subscribe *{margin:0;padding:0;box-sizing:border-box}
.hpf-subscribe h2,.hpf-subscribe h4{font-family:var(--hrp-head);font-weight:700;line-height:1.12;letter-spacing:-.01em}
.hpf-subscribe p{font-family:var(--hrp-body)}
.hpf-subscribe a{text-decoration:none;color:inherit}
.hpf-subscribe__wrap{max-width:var(--hrp-maxw);margin:0 auto;padding:0 24px}
.hpf-subscribe .sub-card{
  background:linear-gradient(150deg,var(--hrp-pink),var(--hrp-pink-deep));border-radius:var(--hrp-radius-lg);
  padding:56px 48px 50px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--hrp-shadow-lg);
}
.hpf-subscribe .sub-card::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.08);top:-130px;right:-70px;pointer-events:none}
.hpf-subscribe .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--hrp-head);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border-radius:50px;margin-bottom:18px;
  background:rgba(255,255,255,.2);color:#fff;
}
.hpf-subscribe .sub-head{text-align:center;max-width:620px;margin:0 auto 44px;position:relative;z-index:2}
.hpf-subscribe .sub-head h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.hpf-subscribe .sub-head p{color:rgba(255,255,255,.88);font-size:1.05rem;margin-top:12px}
/* Normal inline text flow (not flex) so the copy wraps as one centred
   sentence on narrow screens instead of squeezing into columns. */
.hpf-subscribe .save-pill{
  display:inline-block;text-align:center;max-width:100%;background:var(--hrp-gold);color:#3a2f10;
  font-family:var(--hrp-head);font-weight:800;font-size:.92rem;line-height:1.55;padding:9px 18px;border-radius:50px;margin-top:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.hpf-subscribe .save-pill b{font-size:1.15rem;white-space:nowrap}
.hpf-subscribe .sub-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2;margin-bottom:38px;
}
.hpf-subscribe .sub-steps::before{content:"";position:absolute;top:46px;left:16%;right:16%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 8px,transparent 8px 16px);z-index:-1}
.hpf-subscribe .sub-step{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--hrp-radius);
  padding:28px 22px;text-align:center;transition:transform .3s var(--hrp-ease),background .3s;backdrop-filter:blur(2px);
}
.hpf-subscribe .sub-step:hover{transform:translateY(-6px);background:rgba(255,255,255,.2)}
.hpf-subscribe .sub-step .num{
  width:54px;height:54px;border-radius:50%;background:#fff;color:var(--hrp-pink-deep);
  display:grid;place-items:center;margin:0 auto 16px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.hpf-subscribe .sub-step .num svg{width:26px;height:26px}
.hpf-subscribe .sub-step .num span{
  position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--hrp-gold);
  color:#3a2f10;font-family:var(--hrp-head);font-weight:800;font-size:.85rem;display:grid;place-items:center;
}
.hpf-subscribe .sub-step h4{color:#fff;font-size:1.12rem;margin-bottom:6px}
.hpf-subscribe .sub-step p{color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.5}
.hpf-subscribe .sub-foot{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  background:rgba(0,0,0,.10);border-radius:var(--hrp-radius);padding:20px 26px;position:relative;z-index:2;
}
.hpf-subscribe .sub-foot .txt{font-family:var(--hrp-head);font-weight:700;font-size:1.05rem}
.hpf-subscribe .sub-foot .txt small{display:block;font-family:var(--hrp-body);font-weight:500;color:rgba(255,255,255,.8);font-size:.84rem}
.hpf-subscribe .sub-foot .txt b{background:rgba(255,255,255,.2);padding:2px 10px;border-radius:8px;letter-spacing:.05em}
/* Button (ported so the component doesn't depend on the home's .btn) */
.hpf-subscribe .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--hrp-head);font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:50px;border:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--hrp-ease),box-shadow .25s var(--hrp-ease),background .25s;
}
.hpf-subscribe .btn svg{width:18px;height:18px}
.hpf-subscribe .btn-gold{background:var(--hrp-gold);color:#3a2f10;box-shadow:0 10px 26px rgba(228,180,81,.42)}
.hpf-subscribe .btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(228,180,81,.55);background:#edbe5b}
@media(max-width:860px){
  .hpf-subscribe .sub-steps{grid-template-columns:1fr}
  .hpf-subscribe .sub-steps::before{display:none}
}
@media(max-width:680px){
  .hpf-subscribe{padding:56px 0}
  /* Tighter side gutters on mobile: the .wrap gutter and the card padding stack,
     so trim both to give the copy usable width instead of ~48px of dead inset. */
  .hpf-subscribe__wrap{padding:0 14px}
  .hpf-subscribe .sub-card{padding:38px 18px}
  .hpf-subscribe .sub-step{padding:24px 16px}
  .hpf-subscribe .sub-foot{flex-direction:column;text-align:center;padding:18px 16px}
  .hpf-subscribe .sub-foot .btn{width:100%}
}
@media(max-width:400px){
  .hpf-subscribe__wrap{padding:0 10px}
  .hpf-subscribe .sub-card{padding:32px 14px}
  .hpf-subscribe .sub-step{padding:22px 14px}
  .hpf-subscribe .sub-foot{padding:16px 14px}
  .hpf-subscribe .save-pill{font-size:.82rem;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){
  .hpf-subscribe .sub-step,.hpf-subscribe .btn{transition:none}
  .hpf-subscribe .sub-step:hover,.hpf-subscribe .btn-gold:hover{transform:none}
}

/* ============================================================ Nutrition */
.hrp-home .nutrition{padding:90px 0;background:#fff}
.hrp-home .nut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hrp-home .nut{
  border-radius:var(--hrp-radius-lg);padding:34px 30px;text-align:center;border:1px solid #f0f0ec;
  background:var(--hrp-paper);transition:transform .35s var(--hrp-ease),box-shadow .35s;
}
.hrp-home .nut:hover{transform:translateY(-8px);box-shadow:var(--hrp-shadow)}
.hrp-home .nut.mid{background:linear-gradient(160deg,var(--hrp-pink),var(--hrp-pink-deep));border-color:transparent;color:#fff;transform:translateY(-14px)}
.hrp-home .nut.mid:hover{transform:translateY(-22px)}
.hrp-home .nut .ic{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;margin:0 auto 18px;background:var(--hrp-teal-soft);color:var(--hrp-teal-deep)}
.hrp-home .nut.mid .ic{background:rgba(255,255,255,.2);color:#fff}
.hrp-home .nut .ic svg{width:36px;height:36px}
.hrp-home .nut h3{font-size:1.5rem;margin-bottom:8px}
.hrp-home .nut.mid h3{color:#fff}
.hrp-home .nut p{color:var(--hrp-ink-soft);font-size:.94rem}
.hrp-home .nut.mid p{color:rgba(255,255,255,.9)}

/* ============================================================ Halal / Eco */
.hrp-home .halal{padding:30px 0 90px}
.hrp-home .halal-card{
  background:linear-gradient(150deg,var(--hrp-teal),var(--hrp-teal-deep));border-radius:var(--hrp-radius-lg);
  display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  padding:54px 56px;color:#fff;overflow:hidden;position:relative;box-shadow:var(--hrp-shadow-lg);
}
/* Decorative glow. pointer-events:none is essential: it is absolutely positioned
   over the bottom-left of the card — right where the Learn More button sits — and
   positioned elements paint above static in-flow content, so without this it
   silently swallows the click. */
.hrp-home .halal-card::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-110px;left:-60px;pointer-events:none}
.hrp-home .halal-card .eyebrow{background:rgba(255,255,255,.2);color:#fff}
.hrp-home .halal-card h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.5rem)}
.hrp-home .halal-card p{color:rgba(255,255,255,.88);margin:18px 0 26px;max-width:460px}
.hrp-home .halal-badges{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hrp-home .halal-badges span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);padding:8px 16px;border-radius:50px;font-weight:700;font-size:.84rem;display:inline-flex;gap:8px;align-items:center}
.hrp-home .halal-visual{position:relative;display:grid;place-items:center;z-index:2}
.hrp-home .halal-visual img{max-height:330px;width:auto;filter:drop-shadow(0 24px 36px rgba(0,0,0,.28))}

/* ============================================================ Blog / News */
.hrp-home .blog{padding:90px 0;background:var(--hrp-paper)}
.hrp-home .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hrp-home .b-card{
  background:#fff;border-radius:var(--hrp-radius-lg);overflow:hidden;border:1px solid #f0f0ec;
  box-shadow:var(--hrp-shadow-sm);transition:transform .35s var(--hrp-ease),box-shadow .35s;display:flex;flex-direction:column;
}
.hrp-home .b-card:hover{transform:translateY(-8px);box-shadow:var(--hrp-shadow-lg)}
.hrp-home .b-media{display:block;height:200px;overflow:hidden;position:relative;background:var(--hrp-teal-soft)}
.hrp-home .b-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hrp-ease)}
.hrp-home .b-card:hover .b-media img{transform:scale(1.07)}
.hrp-home .b-cat{position:absolute;top:14px;left:14px;background:#fff;color:var(--hrp-teal-deep);font-family:var(--hrp-head);font-weight:700;font-size:.74rem;padding:5px 13px;border-radius:50px;box-shadow:var(--hrp-shadow-sm);z-index:2}
.hrp-home .b-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.hrp-home .b-body .date{font-size:.8rem;color:var(--hrp-ink-soft);font-weight:600;margin-bottom:8px}
.hrp-home .b-body h3{font-size:1.12rem;line-height:1.3}
.hrp-home .b-body .excerpt{color:var(--hrp-ink-soft);font-size:.9rem;margin-top:10px}
.hrp-home .b-body .more{margin-top:16px;font-family:var(--hrp-head);font-weight:700;color:var(--hrp-pink-deep);display:inline-flex;align-items:center;gap:7px;font-size:.92rem;align-self:flex-start}
.hrp-home .b-card:hover .more{gap:11px}
.hrp-home .b-body .more svg{width:16px;height:16px;transition:.25s}
.hrp-home .blog-empty{grid-column:1/-1;text-align:center;background:#fff;border:1px dashed #e2e2dd;border-radius:var(--hrp-radius);padding:40px 24px;color:var(--hrp-ink-soft);font-weight:600}

/* ============================================================ FAQ */
.hrp-home .faq{padding:30px 0 90px;background:var(--hrp-paper)}
.hrp-home .faq-wrap{max-width:820px;margin:0 auto}
.hrp-home .faq-item{background:#fff;border:1px solid #eee;border-radius:var(--hrp-radius);margin-bottom:14px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.hrp-home .faq-item.open{box-shadow:var(--hrp-shadow);border-color:var(--hrp-teal)}
.hrp-home .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--hrp-head);font-weight:700;font-size:1.04rem;color:var(--hrp-ink)}
.hrp-home .faq-q .sign{width:34px;height:34px;border-radius:50%;background:var(--hrp-teal-soft);color:var(--hrp-teal-deep);display:grid;place-items:center;flex:none;transition:.3s;font-size:1.3rem}
.hrp-home .faq-item.open .sign{background:var(--hrp-teal);color:#fff;transform:rotate(45deg)}
.hrp-home .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--hrp-ease)}
.hrp-home .faq-a p{padding:0 26px 24px;color:var(--hrp-ink-soft);font-size:.98rem}

/* ============================================================ Final CTA */
.hrp-home .final{padding:0 0 90px}
.hrp-home .final-card{
  background:
    radial-gradient(100% 140% at 0% 0%, var(--hrp-teal), transparent 60%),
    linear-gradient(120deg,var(--hrp-pink),var(--hrp-pink-deep));
  border-radius:var(--hrp-radius-lg);text-align:center;padding:64px 40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--hrp-shadow-lg);
}
.hrp-home .final-card h2{color:#fff;font-size:clamp(2rem,4vw,2.9rem)}
.hrp-home .final-card p{color:rgba(255,255,255,.9);max-width:520px;margin:16px auto 30px;font-size:1.1rem}
.hrp-home .final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hrp-home .final-card .codeline{margin-top:22px;font-weight:700;font-size:.94rem}
.hrp-home .final-card .codeline b{background:rgba(255,255,255,.2);padding:3px 12px;border-radius:8px;font-family:var(--hrp-head);letter-spacing:.05em}

/* ============================================================ Scroll reveal */
.hrp-home .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--hrp-ease),transform .7s var(--hrp-ease)}
.hrp-home .reveal.in{opacity:1;transform:none}
/* If JS is disabled, never hide content */
.no-js .hrp-home .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hrp-home .reveal{opacity:1;transform:none;transition:none}}

/* ============================================================ Responsive */
@media(max-width:1024px){
  .hrp-home .hero--video{min-height:clamp(460px,74vh,700px)}
  .hrp-home .hero__scrim{background:linear-gradient(180deg,rgba(13,22,24,.5) 0%,rgba(13,22,24,.6) 45%,rgba(13,22,24,.82) 100%)}
  .hrp-home .hero__copy{max-width:none;text-align:center;margin-inline:auto}
  .hrp-home .hero__lead{margin-inline:auto}
  .hrp-home .hero__cta,.hrp-home .hero__chips,.hrp-home .hero__proof{justify-content:center}
  .hrp-home .halal-card{grid-template-columns:1fr;text-align:center}
  .hrp-home .halal-badges{justify-content:center}
  .hrp-home .halal-visual{order:-1}
  .hrp-home .feat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .hrp-home .product-grid,.hrp-home .nut-grid,.hrp-home .blog-grid{grid-template-columns:1fr 1fr}
  .hrp-home .nut.mid{transform:none}.hrp-home .nut.mid:hover{transform:translateY(-8px)}
}
@media(max-width:680px){
  /* Hero, phone layout: content-driven height (a fixed vh crammed the copy),
     full-width equal CTAs, tighter chips, and no scroll cue — it collided with
     the chip rows and a thumb-scroll hint is redundant on touch. */
  .hrp-home .hero--video{min-height:0;padding-block:clamp(48px,13vw,72px) clamp(44px,12vw,64px)}
  .hrp-home .hero__inner{padding-block:0}
  /* The CTA row goes column and stretches its items here, so opt the seal out
     and centre it under the buttons rather than letting it blow up to 320px. */
  .hrp-home .hero__seal{align-self:center;width:64px;margin-top:4px}
  .hrp-home .hero__eyebrow{margin-bottom:14px;font-size:.7rem;padding:7px 14px;letter-spacing:.06em}
  .hrp-home .hero__title{font-size:clamp(1.85rem,8.4vw,2.3rem);line-height:1.1}
  .hrp-home .hero__lead{font-size:.98rem;line-height:1.55;margin:14px auto 24px;max-width:34ch}
  .hrp-home .hero__cta{flex-direction:column;gap:10px;align-items:stretch;max-width:320px;margin-inline:auto}
  .hrp-home .hero__cta .btn{width:100%;justify-content:center}
  .hrp-home .hero__proof{margin-top:20px;gap:8px;font-size:.86rem}
  .hrp-home .hero__chips{margin-top:18px;gap:8px}
  .hrp-home .hero__chips{max-width:340px;margin-inline:auto}
  .hrp-home .hero__chips li{flex:0 1 calc(50% - 4px);justify-content:center;font-size:.72rem;padding:8px 10px;gap:6px;white-space:nowrap}
  .hrp-home .hero__chips svg{width:15px;height:15px}
  .hrp-home .hero__scroll{display:none}
  .hrp-home .product-grid,.hrp-home .feat-grid,.hrp-home .nut-grid,.hrp-home .blog-grid{grid-template-columns:1fr}
  .hrp-home .halal-card,.hrp-home .final-card{padding:38px 24px}
  .hrp-home .products,.hrp-home .nutrition,.hrp-home .blog,.hrp-home .features{padding:56px 0}
  .hrp-home .section-head{margin-bottom:38px}
  .hrp-home .press{padding:40px 0 0 0}
  .hrp-home .press .label{margin-bottom:0px}
  .hrp-home .logo-card{width:138px;height:78px;margin:0 7px;padding:14px 18px}
  .hrp-home .marquee-track{animation-duration:40s}
}
@media(max-width:400px){
  .hrp-home .wrap{padding:0 16px}
  .hrp-home .hero__title{font-size:2rem}
  .hrp-home .hero__chips li{font-size:.76rem;padding:8px 12px}
}

/* ============================================================
   HPF Trickle Up — theme integration
   This theme's header.php wraps all page content in a centred
   .hpf-container (max-width + side padding). The home template
   needs its coloured section bands to reach the viewport edges,
   so inc/home-page.php adds a `hpf-full-bleed` body class for this
   template and we neutralise the container here. Each section's
   inner `.wrap` still re-centres content at --hrp-maxw.
   ============================================================ */
body.hpf-full-bleed #content > .hpf-container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
body.hpf-full-bleed .site-content{padding-top:0;padding-bottom:0}
/* Belt-and-braces: keep any 100% wide child from causing x-scroll. */
body.hpf-full-bleed{overflow-x:hidden}


/* ============================================================
   HURAYRA PET FOODS — Reviews / testimonials shortcode styles
   Scoped under .hrp-reviews. Design tokens come from the global
   :root in style.css (enqueued as a dependency of this file).
   ============================================================ */

.hrp-reviews{
  padding:var(--hrp-section-y) 0;background:var(--hrp-paper);
  font-family:var(--hrp-body);color:var(--hrp-ink);line-height:var(--hrp-lh-base);
}
.hrp-reviews *{box-sizing:border-box}
.hrp-reviews .wrap{max-width:var(--hrp-maxw);margin:0 auto;padding:0 24px}

/* Section heading */
.hrp-reviews .section-head{text-align:center;max-width:680px;margin:0 auto 54px}
.hrp-reviews .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--hrp-head);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hrp-pink-deep);
  background:var(--hrp-pink-soft);padding:7px 16px;border-radius:50px;margin-bottom:18px;
}
.hrp-reviews .section-head h2{font-family:var(--hrp-head);font-weight:700;color:var(--hrp-ink);font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:0}
.hrp-reviews .section-head p{color:var(--hrp-ink-soft);font-size:1.06rem;margin-top:14px}

/* Slider */
.hrp-reviews .testi-track{position:relative;max-width:920px;margin:0 auto;overflow:hidden}
.hrp-reviews .testi-rail{display:flex;transition:transform .55s var(--hrp-ease)}
.hrp-reviews .t-card{flex:0 0 100%;padding:0 8px;display:flex}
.hrp-reviews .t-inner{
  background:#fff;border-radius:var(--hrp-radius-lg);box-shadow:var(--hrp-shadow);padding:46px 48px 38px;
  border:1px solid #f0f0ec;text-align:center;position:relative;
  min-height:340px;flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;
}
.hrp-reviews .t-quote{display:block;margin:0 auto 16px}
.hrp-reviews .t-quote svg{width:58px;height:auto;display:block;margin:0 auto}
.hrp-reviews .t-stars{color:#00b67a;font-size:1.1rem;letter-spacing:2px;margin-bottom:16px}
.hrp-reviews .t-text{font-size:1.16rem;color:var(--hrp-ink);font-weight:600;line-height:1.6;position:relative;z-index:2;font-family:var(--hrp-head);max-width:680px;margin:0 auto}
.hrp-reviews .t-text .emoji{display:inline;height:1.1em;width:auto;vertical-align:-.15em;margin-left:2px}
.hrp-reviews .t-who{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:26px}
.hrp-reviews .t-who .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--hrp-pink),var(--hrp-teal));display:grid;place-items:center;color:#fff;font-family:var(--hrp-head);font-weight:800;font-size:1.05rem;flex:none}
.hrp-reviews .t-who .nm{text-align:left}
.hrp-reviews .t-who .nm b{display:block;font-family:var(--hrp-head);font-size:1rem;color:var(--hrp-ink)}
.hrp-reviews .t-verified{display:inline-flex;align-items:center;gap:5px;color:#00b67a;font-size:.8rem;font-weight:700;transition:color .2s;text-decoration:none}
.hrp-reviews .t-verified:hover{color:#019d6a}
.hrp-reviews .t-verified svg{width:14px;height:14px}

/* Nav + dots */
.hrp-reviews .testi-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px}
.hrp-reviews .testi-nav button{width:46px;height:46px;min-width:46px;max-width:46px;flex:0 0 auto;padding:0;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--hrp-teal);background:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s;color:var(--hrp-teal-deep);box-shadow:var(--hrp-shadow-sm)}
.hrp-reviews .testi-nav button svg{width:18px;height:18px;display:block}
.hrp-reviews .testi-nav button:hover{background:var(--hrp-teal);color:#fff;border-color:var(--hrp-teal);transform:translateY(-2px);box-shadow:var(--hrp-shadow)}
.hrp-reviews .testi-nav button:active{transform:translateY(0)}
.hrp-reviews .testi-dots{display:flex;gap:8px}
.hrp-reviews .testi-dots b{width:9px;height:9px;border-radius:50%;background:#dcdcd6;cursor:pointer;transition:.25s}
.hrp-reviews .testi-dots b.on{background:var(--hrp-pink);width:26px;border-radius:50px}

@media(max-width:680px){
  .hrp-reviews{padding:56px 0}
  .hrp-reviews .wrap{padding:0 12px}
  .hrp-reviews .section-head{margin-bottom:38px}
  .hrp-reviews .testi-track{max-width:100%}
  .hrp-reviews .t-card{padding:0 2px}
  .hrp-reviews .t-inner{padding:30px 18px}
  .hrp-reviews .t-text{font-size:1.06rem}
}

/* ============================================================
   Blob layout — single pink-blob testimonial (e.g. product page)
   ============================================================ */
.hrp-reviews--blob{background:#fff;position:relative;overflow:hidden}
.hrp-reviews--blob .section-head h2{color:var(--hrp-ink)}
/* Soft decorative blobs in the corners */
.hrp-reviews--blob::before,
.hrp-reviews--blob::after{content:"";position:absolute;border-radius:50%;background:var(--hrp-pink-soft);z-index:0;pointer-events:none}
.hrp-reviews--blob::before{width:360px;height:360px;left:-150px;bottom:-130px}
.hrp-reviews--blob::after{width:300px;height:300px;right:-130px;top:120px}
.hrp-reviews--blob .wrap{position:relative;z-index:1}

.hrp-reviews--blob .testi-track{max-width:760px;margin:0 auto;overflow:hidden;position:relative}
/* Big gold quotation marks */
.hrp-reviews--blob .testi-track::before,
.hrp-reviews--blob .testi-track::after{position:absolute;font-family:Georgia,'Times New Roman',serif;font-size:120px;line-height:1;color:var(--hrp-gold);z-index:2;pointer-events:none}
.hrp-reviews--blob .testi-track::before{content:"\201C";left:-4px;top:-8px}
.hrp-reviews--blob .testi-track::after{content:"\201D";right:-4px;bottom:-46px}

.hrp-reviews--blob .testi-rail{display:flex;transition:transform .55s var(--hrp-ease)}
.hrp-reviews--blob .t-card{flex:0 0 100%;display:flex;justify-content:center;padding:18px 26px 30px}
.hrp-reviews--blob .t-blob{
  position:relative;max-width:560px;width:100%;text-align:center;color:#fff;
  background:linear-gradient(150deg,var(--hrp-pink),var(--hrp-pink-deep));
  padding:50px 54px 44px;
  border-radius:46% 54% 60% 40% / 52% 44% 56% 48%;
  box-shadow:0 26px 60px rgba(212,102,129,.35);
}
.hrp-reviews--blob .t-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.65);display:grid;place-items:center;margin:0 auto 14px;color:#fff}
.hrp-reviews--blob .t-avatar svg{width:34px;height:34px}
.hrp-reviews--blob .t-source{display:inline-flex;align-items:center;gap:6px;font-family:var(--hrp-head);font-weight:700;font-size:.95rem;color:#fff;margin-bottom:6px}
.hrp-reviews--blob .t-tp-star{width:18px;height:18px;color:#00b67a;background:#fff;border-radius:3px;padding:1px;box-sizing:border-box}
.hrp-reviews--blob .t-stars{color:#fff;font-size:1.05rem;letter-spacing:2px;margin-bottom:14px}
.hrp-reviews--blob .t-text{font-family:var(--hrp-head);font-weight:600;font-size:1.02rem;line-height:1.6;color:#fff;max-width:430px;margin:0 auto 16px}
.hrp-reviews--blob .t-text .emoji{display:inline;height:1.1em;width:auto;vertical-align:-.15em;margin-left:2px}
.hrp-reviews--blob .t-name{font-family:var(--hrp-head);font-weight:800;font-size:1.08rem;margin-bottom:14px}
.hrp-reviews--blob .t-name a{color:#fff;text-decoration:none}
.hrp-reviews--blob .t-paws{display:flex;justify-content:center;gap:8px;color:rgba(255,255,255,.92)}
.hrp-reviews--blob .t-paws svg{width:22px;height:22px}

.hrp-reviews--blob .testi-nav{margin-top:26px}
.hrp-reviews--blob .testi-dots b{background:#e7c9d1}
.hrp-reviews--blob .testi-dots b.on{background:var(--hrp-pink)}

@media(max-width:680px){
  .hrp-reviews--blob .t-blob{padding:40px 28px 34px;border-radius:42px}
  .hrp-reviews--blob .testi-track::before,
  .hrp-reviews--blob .testi-track::after{font-size:80px}
  .hrp-reviews--blob::before,
  .hrp-reviews--blob::after{display:none}
}

/* =========================================================
 * REUSABLE HORIZONTAL CAROUSEL
 * Used by the home "Our Range" rows and the PDP "You may also like"
 * section. Driven by the shared [data-hpf-carousel] controller in
 * header-footer.js (the same one that powers the Shop mega-menu).
 * Shows 3 cards → 2 (≤900px) → ~1.15 peek (≤600px). Placed at the end
 * of main.css so its paddings survive the home `.hrp-home *` reset.
 * =======================================================*/
.hpf-carousel{position:relative}
.hpf-carousel__viewport{overflow:hidden;padding:14px 4px 34px}
.hpf-carousel__track{display:flex;gap:22px;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.hpf-carousel__track>*{flex:0 0 calc((100% - 44px) / 3);min-width:0;box-sizing:border-box}
.hpf-carousel__arrow{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:6;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--hpf-line,#e7ecec);background:#fff;color:var(--hpf-teal-dark,#3f989d);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(29,35,39,.14);transition:background .2s var(--hpf-ease,ease),color .2s var(--hpf-ease,ease),opacity .25s ease,box-shadow .2s ease,transform .2s ease}
.hpf-carousel__arrow svg{width:22px;height:22px;display:block}
.hpf-carousel__arrow:hover{background:var(--hpf-teal,#60babf);color:#fff;box-shadow:0 12px 26px rgba(63,152,157,.28)}
.hpf-carousel__arrow--prev{left:-14px}
.hpf-carousel__arrow--next{right:-14px}
.hpf-carousel__arrow:disabled{opacity:0;pointer-events:none}
/* Pagination dots */
.hpf-carousel__dots{display:flex;justify-content:center;align-items:center;gap:9px;margin:-14px 0 0;padding:0;list-style:none}
.hpf-carousel__dots[hidden]{display:none}
.hpf-carousel__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--hpf-line,#d9e2e2);cursor:pointer;transition:background .25s var(--hpf-ease,ease),transform .25s var(--hpf-ease,ease)}
.hpf-carousel__dot:hover{background:var(--hpf-teal,#60babf)}
.hpf-carousel__dot.is-active{background:var(--hpf-teal-dark,#3f989d);transform:scale(1.4)}
@media (max-width:900px){
  .hpf-carousel__track>*{flex-basis:calc((100% - 22px) / 2)}
  .hpf-carousel__arrow--prev{left:-6px}
  .hpf-carousel__arrow--next{right:-6px}
}
@media (max-width:600px){
  .hpf-carousel{padding-bottom:54px}
  .hpf-carousel__viewport{padding-bottom:14px}
  .hpf-carousel__track{gap:14px}
  .hpf-carousel__track>*{flex-basis:86%}
  /* Arrows move to a centered pair beneath the cards on mobile. */
  .hpf-carousel__arrow{width:40px;height:40px;top:auto;bottom:0;transform:none;background:#fff;box-shadow:0 4px 14px rgba(29,35,39,.18)}
  .hpf-carousel__arrow svg{width:18px;height:18px}
  .hpf-carousel__arrow--prev{left:50%;right:auto;margin-left:-46px}
  .hpf-carousel__arrow--next{left:50%;right:auto;margin-left:6px}
}
@media (prefers-reduced-motion: reduce){
  .hpf-carousel__track{transition:none}
}

/* =========================================================
 * TABBED SECTION (home "Our Range": Wet / Dry / Wet + Dry)
 * Segmented pill nav with a sliding highlight, animated panel
 * switching. Controller: [data-hpf-tabs] in header-footer.js.
 * =======================================================*/
.hpf-tabs{text-align:center;margin-top:6px}
.hpf-tabs__nav{position:relative;display:inline-flex;gap:4px;max-width:100%;padding:6px;margin:0 auto 30px;border-radius:999px;background:var(--hpf-teal-soft,#eaf6f6);box-shadow:inset 0 0 0 1px rgba(63,152,157,.14),0 6px 18px rgba(29,35,39,.06);vertical-align:top}
.hpf-tabs__tab{position:relative;z-index:2;flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:11px 24px;border-radius:999px;font-family:inherit;font-weight:700;font-size:15px;line-height:1;color:var(--hpf-ink,#1d2327);white-space:nowrap;transition:color .3s var(--hpf-ease,ease)}
.hpf-tabs__tab:hover{color:var(--hpf-teal-dark,#3f989d)}
.hpf-tabs__tab.is-active{color:#fff}
.hpf-tabs__tab:focus-visible{outline:2px solid var(--hpf-teal-dark,#3f989d);outline-offset:2px}
.hpf-tabs__ink{position:absolute;z-index:1;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:linear-gradient(135deg,var(--hpf-teal,#60babf),var(--hpf-teal-dark,#3f989d));box-shadow:0 6px 16px rgba(63,152,157,.35);transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hpf-tabs__panels{text-align:left}
.hpf-tabs__panel{text-align:left}
.hpf-tabs__panel[hidden]{display:none}
.hpf-tabs__panel .product-cat__head{display:flex;justify-content:flex-end;margin-bottom:14px}
@keyframes hpfTabIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hpf-tabs__panel.is-active{animation:hpfTabIn .5s cubic-bezier(.22,1,.36,1)}
@media (max-width:600px){
  .hpf-tabs__nav{gap:2px;padding:5px}
  .hpf-tabs__tab{padding:10px 15px;font-size:13px}
  .hpf-tabs__ink{top:5px;bottom:5px}
}
@media (prefers-reduced-motion: reduce){
  .hpf-tabs__ink{transition:none}
  .hpf-tabs__panel.is-active{animation:none}
}


/* =========================================================
 * REUSABLE FAQ ACCORDION  (.hpf-faq)
 * Rendered by hpf_faq_accordion(); toggled by the global handler in
 * header-footer.js. Skin per page by overriding the --hpf-faq-* vars on a
 * wrapper. Defaults suit a light background.
 * =======================================================*/
.hpf-faq {
	--hpf-faq-item-bg: #fff;
	--hpf-faq-item-bg-hover: #fff;
	--hpf-faq-item-bg-open: #fff;
	--hpf-faq-item-border: 1px solid var(--hpf-border, #e6eeed);
	--hpf-faq-item-shadow-open: 0 10px 26px rgba(13, 95, 89, .1);
	--hpf-faq-q-color: var(--hpf-ink, #1d2327);
	--hpf-faq-q-hover-bg: transparent;
	--hpf-faq-q-open-bg: transparent;
	--hpf-faq-num-bg: var(--hpf-teal, #61bac1);
	--hpf-faq-num-color: #fff;
	--hpf-faq-chev: var(--hpf-ink, #1d2327);
	--hpf-faq-a-color: var(--hpf-muted, #5b6566);
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
}
.hpf-faq__item {
	background: var(--hpf-faq-item-bg);
	border: var(--hpf-faq-item-border);
	border-radius: 16px;
	overflow: hidden;
	transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hpf-faq__item:hover { background: var(--hpf-faq-item-bg-hover); }
.hpf-faq__item.is-open { background: var(--hpf-faq-item-bg-open); box-shadow: var(--hpf-faq-item-shadow-open); }
.hpf-faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 15px 22px 15px 15px;
	background: transparent;
	border: 0;
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
	font-family: var(--hpf-font-head, "Quicksand", sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hpf-faq-q-color);
	transition: background .25s ease, color .25s ease;
}
/* Explicit colour beats the theme's generic button:hover recolouring. */
.hpf-faq__q:hover { background: var(--hpf-faq-q-hover-bg); color: var(--hpf-faq-q-color); }
.hpf-faq__item.is-open .hpf-faq__q { background: var(--hpf-faq-q-open-bg); }
.hpf-faq__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hpf-faq-num-bg);
	font-size: 14px;
	font-weight: 800;
	color: var(--hpf-faq-num-color);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.hpf-faq__question { flex: 1 1 auto; min-width: 0; }
.hpf-faq__chev {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -3px;
	border-right: 2.5px solid var(--hpf-faq-chev);
	border-bottom: 2.5px solid var(--hpf-faq-chev);
	transform: rotate(45deg);
	transition: transform .25s var(--hpf-ease, ease);
}
.hpf-faq__item.is-open .hpf-faq__chev { transform: rotate(-135deg); margin-top: 3px; }
.hpf-faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--hpf-ease, ease); }
.hpf-faq__item.is-open .hpf-faq__body { grid-template-rows: 1fr; }
.hpf-faq__body-in { overflow: hidden; min-height: 0; }
.hpf-faq__body p { margin: 0; padding: 16px 26px 20px 62px; font-size: 15px; line-height: 1.75; color: var(--hpf-faq-a-color); }
@media (max-width: 560px) { .hpf-faq__body p { padding-left: 22px; } }
@media (prefers-reduced-motion: reduce) {
	.hpf-faq__item, .hpf-faq__q, .hpf-faq__chev, .hpf-faq__body { transition: none; }
}


/* =========================================================
 * CAT TRANSITION PAGE  (pages/page-cat-transition.php)
 * Scoped under .hpf-ct. Uses the reusable .hpf-faq for its FAQ.
 * =======================================================*/
.hpf-ct {
	--ct-teal: var(--hrp-teal, #60babf);
	--ct-teal-deep: #509296;
	--ct-pink: var(--hrp-pink, #d46681);
	--ct-gold: var(--hrp-gold, #e4b451);
	--ct-gold-hover: #cf9d35;
	--ct-maroon: #5e1233;
	--ct-ink: var(--hpf-ink, #1d2327);
	--ct-muted: var(--hpf-muted, #5b6566);
	--ct-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
/* Full width: beat the theme's narrow `.page .hpf-main` text measure. */
.hpf-main.hpf-ct { max-width: 100%; }
.hpf-ct-wrap { max-width: 100%; margin: 0 auto; padding: 0px; }
.hpf-ct-hero__title, .hpf-ct-steps__title, .hpf-ct-cta__title,
.hpf-ct-plan__title, .hpf-ct-step__title {
	font-family: var(--ct-head); font-weight: 700; letter-spacing: -0.4px;
}
.hpf-ct-hero { padding: clamp(36px, 5vw, 56px) 0 clamp(30px, 4vw, 44px); }
.hpf-ct-hero__head { text-align: center; margin: 0 0 clamp(28px, 4vw, 44px); }
.hpf-ct-hero__title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; color: var(--ct-ink); margin: 0 0 10px; }
.hpf-ct-hero__sub { font-size: clamp(15px, 1.8vw, 18px); color: var(--ct-muted); margin: 0; }
.hpf-ct-plan {
	--plan-pad: clamp(24px, 3.5vw, 44px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--hpf-border, #e6eeed);
	border-radius: 24px;
	padding: var(--plan-pad);
	box-shadow: 0 18px 44px rgba(13, 95, 89, .08);
}
.hpf-ct-plan__title { font-size: clamp(21px, 2.6vw, 28px); color: var(--ct-ink); margin: 0 0 10px; }
.hpf-ct-plan__lead { font-size: 15px; line-height: 1.6; color: var(--ct-muted); margin: 0 0 22px; max-width: 40ch; }
.hpf-ct-table {
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(160deg, var(--ct-pink) 0%, #c25874 100%);
	box-shadow: 0 16px 36px rgba(212, 102, 129, .28);
}
.hpf-ct-table__row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 14px 22px; font-size: 15px; }
.hpf-ct-table__row span:not(:first-child) { text-align: center; }
.hpf-ct-table__row span:first-child { font-weight: 700; }
/* Emphasise the Hurayra column (the goal). */
.hpf-ct-table__row span:nth-child(2) { font-weight: 800; }
.hpf-ct-table__row--head {
	font-family: var(--ct-head);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, .12);
	padding-top: 16px;
	padding-bottom: 16px;
}
.hpf-ct-table__row--head span:first-child { font-weight: 700; }
.hpf-ct-table__row:not(.hpf-ct-table__row--head):nth-of-type(even) { background: rgba(255, 255, 255, .08); }
/* Highlight the final "100%" row. */
.hpf-ct-table__row:last-child { background: rgba(255, 255, 255, .16); font-weight: 800; }

/* Cat peeks out from behind the card: anchored to the bottom-right, it overflows
 * the card's border so the head sits inside and the paws drape over the edge. */
.hpf-ct-plan__media {
	position: absolute;
	right: clamp(4px, 2.4vw, 52px);
	bottom: calc(-1 * var(--plan-pad) - 16px);
	z-index: 2;
	width: clamp(220px, 33vw, 430px);
	pointer-events: none;
}
/* Soft glow behind the peeking cat. */
.hpf-ct-plan__media::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 7%;
	width: 94%;
	height: 60%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(96, 186, 191, .26), transparent 72%);
	z-index: 0;
	pointer-events: none;
}
.hpf-ct-plan__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}
.hpf-ct-steps { padding: clamp(30px, 4vw, 56px) 0; }
.hpf-ct-steps__title { text-align: center; font-size: clamp(26px, 3.4vw, 38px); color: var(--ct-ink); margin: 0 0 clamp(28px, 3.5vw, 44px); }
/* Tinted icon cards (matches the subscriber-perks style). */
.hpf-ct-steps__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1140px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 900px) { .hpf-ct-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hpf-ct-steps__list { grid-template-columns: minmax(0, 1fr); } }
.hpf-ct-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-radius: 20px;
	padding: 28px 26px;
	color: var(--ct-ink);
	box-shadow: 0 6px 20px rgba(29, 35, 39, .05);
	transition: transform .28s var(--hpf-ease, ease), box-shadow .28s var(--hpf-ease, ease), opacity .55s ease var(--rd, 0ms);
}
.hpf-ct-step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(13, 95, 89, .13); }
/* First tip spans the full row as a horizontal banner. */
.hpf-ct-step--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; }
.hpf-ct-step--wide .hpf-ct-step__icon { flex: 0 0 auto; }
.hpf-ct-step--wide .hpf-ct-step__body { flex: 1 1 auto; min-width: 0; }
.hpf-ct-step--wide .hpf-ct-step__text { max-width: 90ch; }
@media (max-width: 520px) {
	.hpf-ct-step--wide { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.hpf-ct-step--teal { background: var(--hrp-teal-soft, #e7f4f5); }
.hpf-ct-step--gold { background: #ffeabd; }
.hpf-ct-step--pink { background: var(--hrp-pink-soft, #fbeef1); }
.hpf-ct-step--cream { background: #faf9f6; }
/* Circular colour-filled icon badge at the top of each card. */
.hpf-ct-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
}
.hpf-ct-step--teal .hpf-ct-step__icon,
.hpf-ct-step--cream .hpf-ct-step__icon { background: var(--ct-teal); }
.hpf-ct-step--gold .hpf-ct-step__icon { background: var(--ct-gold); }
.hpf-ct-step--pink .hpf-ct-step__icon { background: var(--ct-pink); }
.hpf-ct-step__icon svg { display: block; }
.hpf-ct-step__body { min-width: 0; }
.hpf-ct-step__title { font-size: 19px; color: var(--ct-ink); margin: 0 0 6px; }
.hpf-ct-step__text { font-size: 14.5px; line-height: 1.6; color: var(--ct-muted); margin: 0; }
.hpf-ct-cta { padding: clamp(30px, 5vw, 56px) 0; text-align: center; }
.hpf-ct-cta__title { font-size: clamp(24px, 3.2vw, 34px); color: var(--ct-ink); margin: 0 0 10px; }
.hpf-ct-cta__text { font-size: 16px; line-height: 1.6; color: var(--ct-muted); margin: 0 auto 24px; max-width: 34ch; }
.hpf-ct-cta__btn { display: inline-block; background: var(--ct-gold); color: var(--ct-ink); font-family: var(--ct-head); font-weight: 800; font-size: 16px; padding: 14px 34px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 24px rgba(228, 180, 81, .35); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-ct-cta__btn:hover { background: var(--ct-gold-hover); color: var(--ct-ink); transform: translateY(-2px); text-decoration: none; }
.hpf-ct-faq { margin: clamp(10px, 2vw, 20px) 0 clamp(40px, 6vw, 70px); }
.hpf-ct-faq .hpf-ct-wrap { background: var(--ct-maroon); border-radius: 28px; padding: clamp(34px, 5vw, 64px) clamp(20px, 4vw, 56px); max-width: 1040px; }
.hpf-ct-faq__title { font-family: var(--ct-head); font-weight: 700; text-align: center; font-size: clamp(26px, 3.6vw, 40px); color: #fff; margin: 0 0 clamp(24px, 3.5vw, 40px); }
.hpf-ct-faq .hpf-faq {
	--hpf-faq-item-bg: rgba(255, 255, 255, .07);
	--hpf-faq-item-bg-hover: rgba(255, 255, 255, .12);
	--hpf-faq-item-bg-open: rgba(212, 102, 129, .28);
	--hpf-faq-item-border: 1px solid rgba(255, 255, 255, .12);
	--hpf-faq-item-shadow-open: 0 10px 26px rgba(0, 0, 0, .18);
	--hpf-faq-q-color: #fff;
	--hpf-faq-q-hover-bg: rgba(255, 255, 255, .06);
	--hpf-faq-q-open-bg: transparent;
	--hpf-faq-num-bg: var(--ct-pink);
	--hpf-faq-num-color: #fff;
	--hpf-faq-chev: rgba(255, 255, 255, .85);
	--hpf-faq-a-color: rgba(255, 255, 255, .88);
	max-width: 820px;
}
@media (max-width: 860px) {
	.hpf-ct-plan { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.hpf-ct-plan__media { position: static; width: min(300px, 74%); margin: 4px auto 0; right: auto; bottom: auto; }
	.hpf-ct-plan__media img { margin: 0 auto; }
	.hpf-ct-plan__lead { max-width: none; }
}
@media (max-width: 560px) {
	.hpf-ct-step { padding: 22px 20px; }
	.hpf-ct-table__row { padding: 11px 14px; font-size: 13.5px; }
}

/* ---- Subtle hover polish (transition-table rows) ---- */
.hpf-ct-table__row:not(.hpf-ct-table__row--head) { transition: background .2s ease; }
.hpf-ct-table__row:not(.hpf-ct-table__row--head):hover { background: rgba(255, 255, 255, .24); }

/* =========================================================
 * Reveal-on-scroll (generic, opt-in via [data-reveal]).
 * The pre-reveal hidden state is applied ONLY when JS has added `.hpf-anim`
 * to <html>, so the content stays visible if scripting is unavailable. The
 * toggle (`.is-revealed`) is set by the global IntersectionObserver in
 * header-footer.js. All motion is transform/opacity only, and is fully
 * disabled under prefers-reduced-motion.
 * =======================================================*/
[data-reveal] {
	transition: opacity .7s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--rd, 0ms);
}

@media (prefers-reduced-motion: no-preference) {
	/* Hidden (pre-reveal) — applies ONLY while JS has set `.hpf-anim` on <html>. */
	.hpf-anim [data-reveal] { opacity: 0; transform: translateY(26px); }
	.hpf-anim .hpf-ct-steps__list .hpf-ct-step { opacity: 0; }
	/* Revealed — deliberately one level more specific than the hidden rules
	 * above so `.is-revealed` always wins the cascade. */
	.hpf-anim [data-reveal].is-revealed { opacity: 1; transform: none; }
	.hpf-anim .hpf-ct-steps__list.is-revealed .hpf-ct-step { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transition: none; }
}


/* =========================================================
 * COMPOSITION PAGE  (pages/page-composition.php)
 * Scoped under .hpf-comp. Reuses .hpf-carousel, .hpf-tabs and the
 * [data-reveal] system; adds no new stylesheet.
 * =======================================================*/
.hpf-comp {
	--c-teal: var(--hrp-teal, #60babf);
	--c-teal-deep: var(--hrp-teal-deep, #3f989d);
	--c-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--c-teal-bg: #4bb0ae;
	--c-pink: var(--hrp-pink, #d46681);
	--c-pink-deep: var(--hrp-pink-deep, #b94e69);
	--c-pink-soft: var(--hrp-pink-soft, #fbeef1);
	--c-gold: var(--hrp-gold, #e4b451);
	--c-gold-deep: var(--hrp-gold-deep, #cf9d35);
	--c-gold-soft: var(--hrp-gold-soft, #fbf2db);
	--c-gold-bg: #e8b755;
	--c-ink: var(--hpf-ink, #1d2327);
	--c-muted: var(--hpf-muted, #5b6566);
	--c-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-comp { max-width: 100%; padding: 0; }
.hpf-comp-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.hpf-comp h1, .hpf-comp h2, .hpf-comp h3 { font-family: var(--c-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Buttons ---- */
.hpf-comp-btn { display: inline-block; font-family: var(--c-head); font-weight: 800; font-size: 15px; padding: 13px 30px; border-radius: 999px; text-decoration: none; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-comp-btn--gold { background: var(--c-gold); color: var(--c-ink); box-shadow: 0 10px 24px rgba(228, 180, 81, .35); }
.hpf-comp-btn--gold:hover { background: var(--c-gold-deep); color: var(--c-ink); transform: translateY(-2px); text-decoration: none; }

/* ---- Hero ---- */
.hpf-comp-hero { position: relative; overflow: hidden; }
.hpf-comp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0; }
.hpf-comp-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18, 28, 28, .74) 0%, rgba(18, 28, 28, .5) 40%, rgba(18, 28, 28, .12) 72%, rgba(18, 28, 28, .3) 100%); }
.hpf-comp-hero__inner { position: relative; z-index: 2; min-height: clamp(400px, 44vw, 580px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(30px, 4vw, 52px); color: #fff; }
.hpf-comp-hero__title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; margin: 0 0 12px; max-width: 15ch; color: #fff; }
.hpf-comp-hero__sub { font-size: clamp(15px, 1.9vw, 19px); margin: 0; max-width: 32ch; color: rgba(255, 255, 255, .92); }
.hpf-comp-hero__bottom { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 540px; }
.hpf-comp-hero__lead { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; margin: 0; color: rgba(255, 255, 255, .92); max-width: 46ch; }

/* ---- Trust strip ---- */
.hpf-comp-strip { background: var(--c-gold-soft); }
.hpf-comp-strip__list { list-style: none; margin: 0 auto; padding-block: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.hpf-comp-strip__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 18px; }
.hpf-comp-strip__item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 44px; background: rgba(0, 0, 0, .12); }
/* Icon file (assets/images/icons) recoloured to the brand palette via CSS mask. */
.hpf-comp-strip__icon { width: 38px; height: 38px; display: inline-block; -webkit-mask: var(--c-icon) center / contain no-repeat; mask: var(--c-icon) center / contain no-repeat; }
.hpf-comp-strip__icon--teal { background-color: var(--c-teal-deep); }
.hpf-comp-strip__icon--gold { background-color: var(--c-gold-deep); }
.hpf-comp-strip__icon--pink { background-color: var(--c-pink-deep); }
.hpf-comp-strip__label { font-family: var(--c-head); font-weight: 700; font-size: 15px; color: var(--c-ink); }

/* ---- Benefits (teal band + carousel) ---- */
.hpf-comp-fuel { background: #fff; color: var(--c-ink); padding: clamp(44px, 6vw, 80px) 0; }
.hpf-comp-fuel__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: clamp(26px, 3.5vw, 40px); }
.hpf-comp-fuel__title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; margin: 0; color: var(--c-ink); max-width: 16ch; }
.hpf-comp-fuel__intro { font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; margin: 0; color: var(--c-muted); }
.hpf-comp-card { height: 100%; border-radius: 20px; padding: 30px 26px; color: #fff; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); transition: transform .28s var(--hpf-ease, ease), box-shadow .28s var(--hpf-ease, ease); }
.hpf-comp-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0, 0, 0, .2); }
/* Fallbacks so the cards keep their fill if reused outside the .hpf-comp scope
 * (an undefined var makes the whole gradient invalid → transparent card). */
.hpf-comp-card--pink { background: linear-gradient(160deg, var(--c-pink, var(--hrp-pink, #d46681)), #c25874); }
.hpf-comp-card--gold { background: linear-gradient(160deg, var(--c-gold, var(--hrp-gold, #e4b451)), #d5a23e); color: #3a2c07; }
.hpf-comp-card__icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .22); }
.hpf-comp-card--gold .hpf-comp-card__icon { background: rgba(255, 255, 255, .4); }
.hpf-comp-card__title { font-size: 19px; margin: 0; line-height: 1.25; }
.hpf-comp-card__text { font-size: 14.5px; line-height: 1.6; margin: 0; opacity: .96; }
/* Cards are links → keep them looking like cards, not underlined pink text
 * (beats the theme's base `a:hover { color: pink }` in style.css). */
a.hpf-comp-card, a.hpf-comp-card:hover, a.hpf-comp-card:focus { text-decoration: none; }
a.hpf-comp-card--pink, a.hpf-comp-card--pink:hover, a.hpf-comp-card--pink:focus { color: #fff; }
a.hpf-comp-card--gold, a.hpf-comp-card--gold:hover, a.hpf-comp-card--gold:focus { color: #3a2c07; }
.hpf-comp-card__more { margin-top: auto; padding-top: 4px; font-family: var(--c-head); font-weight: 800; font-size: 13px; letter-spacing: .01em; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.hpf-comp-card:hover .hpf-comp-card__more, .hpf-comp-card:focus-visible .hpf-comp-card__more { opacity: .95; transform: none; }
.hpf-comp-card:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 3px; }

/* ---- Product comparison (gold band) ---- */
.hpf-comp-compare { background: var(--c-gold-bg); padding: clamp(44px, 6vw, 80px) 0; }
.hpf-comp-compare__card { max-width: 1080px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.hpf-comp-compare__head { background: var(--c-teal); text-align: center; padding: 24px 20px; }
.hpf-comp-compare__head h2 { color: #fff; font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.hpf-comp-compare__labels, .hpf-comp-compare__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.hpf-comp-compare__labels { background: var(--c-pink); position: sticky; top: 0; z-index: 3; }
.hpf-comp-compare__labels span { color: #fff; font-family: var(--c-head); font-weight: 700; text-align: center; padding: 15px 12px; font-size: 15px; }
.hpf-comp-compare__labels span:nth-child(2) { border-inline: 1px solid rgba(255, 255, 255, .4); }
.hpf-comp-compare__row { align-items: center; border-bottom: 1px solid #eef1f1; transition: background .2s ease; }
.hpf-comp-compare__row:last-child { border-bottom: 0; }
.hpf-comp-compare__row:hover { background: #f7fbfc; }
.hpf-comp-compare__q { padding: 22px 26px; font-family: var(--c-head); font-weight: 700; font-size: 15px; color: #333; line-height: 1.4; }
.hpf-comp-compare__answers { display: contents; }
.hpf-comp-compare__a { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hpf-comp-compare__tag { display: none; }
.hpf-comp-compare__val { font-size: 14px; color: #45556c; font-style: italic; max-width: 22ch; line-height: 1.4; }
.hpf-comp-compare__a--hurayra .hpf-comp-compare__val { font-style: normal; color: #2f7a66; font-weight: 600; }
.hpf-comp-ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hpf-comp-ic--cross { background: #fce8ea; color: #e74c4c; }
.hpf-comp-ic--cross svg { width: 14px; height: 14px; }
.hpf-comp-ic--warn { background: #fff4e0; color: #f5a623; }
.hpf-comp-ic--warn svg { width: 18px; height: 18px; }
.hpf-comp-ic--check { background: #e6f8f0; color: #2ec4a0; }
.hpf-comp-ic--check svg { width: 16px; height: 16px; }

/* ---- Nutrition: responsive tabs → accordion (.hpf-rtabs) ---- */
.hpf-comp-tabs-sec { padding: clamp(40px, 5vw, 72px) 0; }
.hpf-rtabs__head { display: flex;justify-content: space-between; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; font-family: var(--c-head); font-weight: 700; text-transform: uppercase; letter-spacing: .015em; color: var(--c-muted); transition: color .2s var(--hpf-ease, ease); }
.hpf-rtabs__head:hover { color: var(--c-pink-deep); }
.hpf-rtabs__head:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 2px; }
.hpf-rtabs__chev svg { display: block; }
/* Desktop → tab bar (heads in a row, one panel below). */
@media (min-width: 769px) {
	.hpf-rtabs { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 10px; border-bottom: 1px solid var(--hpf-border, #e6eeed); }
	.hpf-rtabs__item { display: contents; }
	.hpf-rtabs__head { order: 0; flex: 0 0 auto; width: auto; justify-content: center; padding: 14px 2px; margin-bottom: -1px; font-size: 11.5px; white-space: nowrap; border-bottom: 3px solid transparent; }
	.hpf-rtabs__head-txt { flex: 0 0 auto; }
	.hpf-rtabs__item.is-open .hpf-rtabs__head { color: var(--c-pink); border-bottom-color: var(--c-pink); }
	.hpf-rtabs__chev { display: none; }
	.hpf-rtabs__panel { order: 1; flex: 0 0 100%; }
	.hpf-rtabs__item:not(.is-open) .hpf-rtabs__panel { display: none; }
	.hpf-rtabs__item.is-open .hpf-rtabs__panel { display: block; animation: hpfTabIn .5s cubic-bezier(.22, 1, .36, 1); }
	.hpf-rtabs__panel-in { padding-top: clamp(26px, 3.5vw, 40px); }
}
.hpf-comp-tabs__body { max-width: 100%; margin: 0 auto; background: var(--c-gold-soft); border-radius: 16px; padding: clamp(22px, 3vw, 36px); }
.hpf-comp-tabs__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: #4b4b4b; }
.hpf-comp-tabs__body p:last-child { margin-bottom: 0; }
.hpf-comp-tabs__body ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.hpf-comp-tabs__body ul:last-child { margin-bottom: 0; }
.hpf-comp-tabs__body li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: #4b4b4b; }
.hpf-comp-tabs__body li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); }
.hpf-comp-tabs__body strong { color: var(--c-ink); }
/* Ingredient (Composition) table inside the last tab */
.hpf-comp-comp-table { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.hpf-comp-comp-table__row { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.hpf-comp-comp-table__row span { padding: 10px 16px; font-size: 14px; border-bottom: 1px solid rgba(0, 0, 0, .06); color: #4b4b4b; }
.hpf-comp-comp-table__row span:not(:first-child) { text-align: center; }
.hpf-comp-comp-table__row:last-child span { border-bottom: 0; }
.hpf-comp-comp-table__row:nth-child(even):not(.hpf-comp-comp-table__row--head) { background: #fbfdfd; }
.hpf-comp-comp-table__row--head span { font-family: var(--c-head); font-weight: 700; color: #fff; background: var(--c-teal); border-bottom: 0; }

/* ---- Halal trust steps (pink band) ---- */
.hpf-comp-trust { background: linear-gradient(160deg, var(--c-pink), #c25874); color: #fff; padding: clamp(44px, 6vw, 78px) 0; }
.hpf-comp-trust__title { text-align: center; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; margin: 0 auto 14px; max-width: 24ch; color: #fff; }
.hpf-comp-trust__intro { text-align: center; max-width: 76ch; margin: 0 auto clamp(30px, 4vw, 48px); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.65; color: rgba(255, 255, 255, .9); }
.hpf-comp-trust__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.hpf-comp-trust__steps::before { content: ""; position: absolute; top: 32px; left: 10%; right: 10%; height: 2px; background: rgba(255, 255, 255, .4); z-index: 0; }
.hpf-comp-trust__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hpf-comp-trust__dot { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--c-pink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.hpf-comp-trust__label { font-family: var(--c-head); font-weight: 700; font-size: 14px; line-height: 1.3; max-width: 16ch; color: #fff; }

/* ---- Why it matters (teal band) ---- */
.hpf-comp-why { background: var(--c-teal-bg); color: #fff; padding: clamp(44px, 6vw, 80px) 0; }
.hpf-comp-why__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.hpf-comp-why__title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 16px; color: #fff; max-width: 16ch; }
.hpf-comp-why__intro { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.65; margin: 0 0 22px; color: rgba(255, 255, 255, .9); }
.hpf-comp-why__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hpf-comp-why__item { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--c-ink); border-radius: 14px; padding: 14px 18px; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.hpf-comp-why__check { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--c-teal-soft); color: var(--c-teal-deep); display: inline-flex; align-items: center; justify-content: center; }
.hpf-comp-why__note { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, .9); }
.hpf-comp-why__media { text-align: center; }
.hpf-comp-why__media img { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .22)); }

/* ---- CTA band (pink rounded card) ---- */
.hpf-comp-cta { padding: clamp(36px, 5vw, 72px) 0; }
.hpf-comp-cta__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; background: linear-gradient(160deg, var(--c-pink), #c25874); border-radius: 24px; padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 56px); color: #fff; }
.hpf-comp-cta__title { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.12; margin: 0 0 12px; color: #fff; max-width: 18ch; }
.hpf-comp-cta__text { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; margin: 0 0 22px; color: rgba(255, 255, 255, .92); max-width: 44ch; }
.hpf-comp-cta__media { text-align: right; }
.hpf-comp-cta__media img { width: 100%; max-width: 360px; height: auto; display: inline-block; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.hpf-comp-why__grid { grid-template-columns: 1fr; }
	.hpf-comp-why__media { max-width: 380px; margin-inline: auto; }
	.hpf-comp-cta__grid { grid-template-columns: 1fr; text-align: center; }
	.hpf-comp-cta__media { text-align: center; order: -1; }
	.hpf-comp-cta__title, .hpf-comp-cta__text { max-width: none; margin-inline: auto; }
}
@media (max-width: 860px) {
	.hpf-comp-trust__steps { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; }
	.hpf-comp-trust__steps::before { display: none; }
}
@media (max-width: 768px) {
	.hpf-comp-fuel__head { grid-template-columns: 1fr; gap: 12px; }
	.hpf-comp-fuel__title { max-width: none; }
	.hpf-comp-hero__bg { object-position: 68% center; }
	.hpf-comp-hero__overlay { background: linear-gradient(180deg, rgba(18, 28, 28, .5), rgba(18, 28, 28, .32) 42%, rgba(18, 28, 28, .62)); }
	/* Comparison → stacked cards */
	.hpf-comp-compare__labels { display: none; }
	.hpf-comp-compare__row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 14px; }
	.hpf-comp-compare__q { padding: 0 2px; text-align: left; }
	.hpf-comp-compare__answers { display: flex; gap: 10px; }
	.hpf-comp-compare__a { flex: 1; border-radius: 12px; border: 1px solid #f0f0f0; padding: 14px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
	.hpf-comp-compare__a:not(.hpf-comp-compare__a--hurayra) { border-top: 2.5px solid #e8899e; }
	.hpf-comp-compare__a--hurayra { background: #f7fdfb; border-top: 2.5px solid var(--c-teal); }
	.hpf-comp-compare__tag { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #999; }
	/* Nutrition → accordion */
	.hpf-rtabs { display: block; }
	.hpf-rtabs__item { display: block; border: 1px solid var(--hpf-border, #e6eeed); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #fff; }
	.hpf-rtabs__head { padding: 15px 16px; font-size: 13px; line-height: 1.3; text-align: left; }
	.hpf-rtabs__item.is-open .hpf-rtabs__head { color: var(--c-pink); }
	.hpf-rtabs__chev { display: inline-flex; flex: 0 0 auto; color: var(--c-muted); transition: transform .3s var(--hpf-ease, ease); }
	.hpf-rtabs__item.is-open .hpf-rtabs__chev { transform: rotate(180deg); color: var(--c-pink); }
	.hpf-rtabs__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--hpf-ease, ease); }
	.hpf-rtabs__item.is-open .hpf-rtabs__panel { grid-template-rows: 1fr; }
	.hpf-rtabs__panel-in { overflow: hidden; min-height: 0; }
	.hpf-rtabs__item.is-open .hpf-rtabs__panel-in { padding: 0 14px 16px; }
	/* Plain content inside each accordion item (drop the cream box on mobile). */
	.hpf-rtabs .hpf-comp-tabs__body { max-width: none; background: none; border-radius: 0; padding: 0; }
}
@media (max-width: 620px) {
	.hpf-comp-strip__list { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
	.hpf-comp-strip__item::after { display: none !important; }
	.hpf-comp-trust__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
		.hpf-comp-trust__steps { grid-template-columns: repeat(2, 1fr); }

}


/* =========================================================
 * NUTRITION LANDING PAGES  (pages/page-{grain-free,protein-rich,
 * omega-3-6-9,vitamin-a-d-e}.php). One reusable component set
 * scoped under .hpf-lp; per-page accent via a modifier class.
 * Reuses the [data-reveal] system + full-bleed body class.
 * =======================================================*/
.hpf-lp {
	--lp-accent: var(--hrp-teal, #60babf);
	--lp-accent-deep: var(--hrp-teal-deep, #3f989d);
	--lp-accent-soft: var(--hrp-teal-soft, #e7f4f5);
	--lp-ink: var(--hpf-ink, #1d2327);
	--lp-muted: var(--hpf-muted, #5b6566);
	--lp-gold: var(--hrp-gold, #e4b451);
	--lp-gold-deep: var(--hrp-gold-deep, #cf9d35);
	--lp-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-lp--pink { --lp-accent: var(--hrp-pink, #d46681); --lp-accent-deep: var(--hrp-pink-deep, #b94e69); --lp-accent-soft: var(--hrp-pink-soft, #fbeef1); }
.hpf-lp--gold { --lp-accent: var(--hrp-gold, #e4b451); --lp-accent-deep: var(--hrp-gold-deep, #cf9d35); --lp-accent-soft: var(--hrp-gold-soft, #fbf2db); }
.hpf-lp--teal { --lp-accent: var(--hrp-teal, #60babf); --lp-accent-deep: var(--hrp-teal-deep, #3f989d); --lp-accent-soft: var(--hrp-teal-soft, #e7f4f5); }
.hpf-main.hpf-lp { max-width: 100%; padding: 0; }
.hpf-lp-wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.hpf-lp h1, .hpf-lp h2, .hpf-lp h3 { font-family: var(--lp-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Buttons ---- */
.hpf-lp-btn { display: inline-block; font-family: var(--lp-head); font-weight: 800; font-size: 15px; padding: 14px 32px; border-radius: 999px; text-decoration: none; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-lp-btn--gold { background: var(--lp-gold); color: var(--lp-ink); box-shadow: 0 10px 24px rgba(228, 180, 81, .35); }
.hpf-lp-btn--gold:hover { background: var(--lp-gold-deep); color: var(--lp-ink); transform: translateY(-2px); text-decoration: none; }
.hpf-lp-btn--ghost { background: transparent; color: var(--lp-accent-deep); border: 2px solid var(--lp-accent); }
.hpf-lp-btn--ghost:hover { background: var(--lp-accent); color: #fff; transform: translateY(-2px); text-decoration: none; }

/* ---- Hero ---- */
.hpf-lp-hero { position: relative; overflow: hidden; }
.hpf-lp-hero--plain { background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-deep)); }
.hpf-lp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0; }
/* Left-to-right scrim: dark where the copy sits, clear over the banner subject. */
.hpf-lp-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16, 26, 26, .74) 0%, rgba(16, 26, 26, .5) 40%, rgba(16, 26, 26, .12) 72%, rgba(16, 26, 26, .3) 100%); }
.hpf-lp-hero__inner { position: relative; z-index: 2; min-height: clamp(400px, 44vw, 580px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding-top: clamp(40px, 5vw, 66px); padding-bottom: clamp(32px, 4vw, 54px); color: #fff; }
.hpf-lp-hero__title { font-size: clamp(30px, 4.8vw, 54px); line-height: 1.08; margin: 0 0 12px; max-width: 16ch; color: #fff; }
.hpf-lp-hero__sub { font-family: var(--lp-head); font-weight: 600; font-size: clamp(16px, 2vw, 21px); margin: 0; max-width: 34ch; color: rgba(255, 255, 255, .92); }
.hpf-lp-hero__bottom { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 560px; }
.hpf-lp-hero__intro { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; margin: 0; max-width: 48ch; color: rgba(255, 255, 255, .92); }
/* Plain (imageless) hero: vertically centred, shorter — no empty banner space. */
.hpf-lp-hero--plain .hpf-lp-hero__inner { justify-content: center; min-height: clamp(320px, 34vw, 440px); gap: 24px; }
@media (max-width: 768px) {
	.hpf-lp-hero__bg { object-position: center; }
	.hpf-lp-hero__overlay { background: linear-gradient(180deg, rgba(16, 26, 26, .5), rgba(16, 26, 26, .32) 42%, rgba(16, 26, 26, .64)); }
	.hpf-lp-hero__inner { min-height: clamp(380px, 82vw, 500px); }
}

/* ---- Feature row (media + copy, alternating) ---- */
.hpf-lp-row { padding: clamp(40px, 6vw, 78px) 0; }
.hpf-lp-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hpf-lp-row__media { order: 2; }
.hpf-lp-row__grid--rev .hpf-lp-row__media { order: 0; }
.hpf-lp-row__media img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 22px 50px rgba(13, 95, 89, .14); }
.hpf-lp-row__copy { min-width: 0; }
.hpf-lp-row__title { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--lp-ink); margin: 0 0 16px; position: relative; padding-bottom: 14px; }
.hpf-lp-row__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--lp-accent); }
.hpf-lp-row__copy p { font-size: 15.5px; line-height: 1.7; color: var(--lp-muted); margin: 0 0 14px; }
.hpf-lp-row__sub { font-size: 17px; color: var(--lp-ink); margin: 20px 0 12px; }

/* ---- Check list ---- */
.hpf-lp-checks { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hpf-lp-checks li { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--lp-ink); }
.hpf-lp-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-accent-soft); color: var(--lp-accent-deep); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.hpf-lp-check svg { width: 15px; height: 15px; }

/* ---- Feature block (centered heading + text) ---- */
.hpf-lp-feature { padding: clamp(36px, 5vw, 64px) 0; text-align: center; }
.hpf-lp-feature__title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: var(--lp-ink); margin: 0 auto 16px; max-width: 24ch; }
.hpf-lp-feature__text { font-size: 15.5px; line-height: 1.7; color: var(--lp-muted); margin: 0 auto 14px; max-width: 70ch; }

/* ---- Accent band (benefit chips) ---- */
.hpf-lp-band { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--lp-accent), var(--lp-accent-deep)); color: #fff; padding: clamp(44px, 6vw, 76px) 0; }
.hpf-lp-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; opacity: .22; }
.hpf-lp-band > .hpf-lp-wrap { position: relative; z-index: 1; }
.hpf-lp-band__title { text-align: center; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: #fff; margin: 0 auto 12px; max-width: 24ch; }
.hpf-lp-band__intro { text-align: center; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.65; color: rgba(255, 255, 255, .92); margin: 0 auto clamp(28px, 4vw, 44px); max-width: 68ch; }
.hpf-lp-chips { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 1000px; }
.hpf-lp-chip { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; padding: 18px 20px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff; transition: transform .25s var(--hpf-ease, ease), background .25s ease; }
.hpf-lp-chip:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .2); }
.hpf-lp-chip__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--lp-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.hpf-lp-chip__ic svg { width: 20px; height: 20px; }

/* ---- Trust chips on light bg (mini-cards) ---- */
.hpf-lp-cards { list-style: none; margin: 22px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; max-width: 1000px; }
.hpf-lp-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: #fff; border: 1px solid var(--hpf-border, #e6eeed); border-radius: 16px; padding: 26px 20px; box-shadow: 0 8px 22px rgba(13, 95, 89, .06); transition: transform .25s var(--hpf-ease, ease), box-shadow .25s ease; }
.hpf-lp-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(13, 95, 89, .13); }
.hpf-lp-card__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--lp-accent-soft); color: var(--lp-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.hpf-lp-card__ic svg { width: 26px; height: 26px; }
.hpf-lp-card__txt { font-family: var(--lp-head); font-weight: 700; font-size: 16px; color: var(--lp-ink); line-height: 1.3; }

/* ---- CTA band ---- */
.hpf-lp-cta { padding: clamp(40px, 6vw, 80px) 0; }
.hpf-lp-cta__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; background: linear-gradient(150deg, var(--lp-accent), var(--lp-accent-deep)); border-radius: 26px; padding: clamp(30px, 4vw, 56px) clamp(28px, 4vw, 60px); color: #fff; overflow: hidden; }
.hpf-lp-cta__title { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.12; margin: 0 0 12px; color: #fff; max-width: 20ch; }
.hpf-lp-cta__text { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; margin: 0 0 24px; color: rgba(255, 255, 255, .93); max-width: 46ch; }
.hpf-lp-cta__media { text-align: right; }
.hpf-lp-cta__media img { width: 100%; max-width: 360px; height: auto; display: inline-block; border-radius: 18px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.hpf-lp-row__grid { grid-template-columns: 1fr; gap: 26px; }
	.hpf-lp-row__media { order: 0 !important; }
	.hpf-lp-row__title::after { left: 50%; transform: translateX(-50%); }
	.hpf-lp-row__copy { text-align: center; }
	.hpf-lp-checks { display: inline-flex; text-align: left; }
	.hpf-lp-chips { grid-template-columns: repeat(2, 1fr); }
	.hpf-lp-cards { grid-template-columns: repeat(2, 1fr); }
	.hpf-lp-cta__grid { grid-template-columns: 1fr; text-align: center; }
	.hpf-lp-cta__media { order: -1; text-align: center; }
	.hpf-lp-cta__title, .hpf-lp-cta__text { max-width: none; margin-inline: auto; }
}
@media (max-width: 560px) {
	.hpf-lp-chips { grid-template-columns: 1fr; }
	.hpf-lp-cards { grid-template-columns: 1fr; }
}


/* =========================================================
 * CONTACT US PAGE  (pages/page-contact-us.php)
 * Scoped under .hpf-contact. Reuses the .hpf-faq component,
 * the [data-reveal] system and the full-bleed body class.
 * =======================================================*/
.hpf-contact {
	--cc-teal: var(--hrp-teal, #60babf);
	--cc-teal-deep: var(--hrp-teal-deep, #3f989d);
	--cc-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--cc-pink: var(--hrp-pink, #d46681);
	--cc-ink: var(--hpf-ink, #1d2327);
	--cc-muted: var(--hpf-muted, #5b6566);
	--cc-border: var(--hpf-border, #e6eeed);
	--cc-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-contact { max-width: 100%; padding: 0; }
.hpf-contact-wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.hpf-contact h1, .hpf-contact h2 { font-family: var(--cc-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Main (info + form) ---- */
.hpf-contact-main { background: var(--cc-teal-soft); padding: clamp(40px, 6vw, 84px) 0; }
.hpf-contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(26px, 4vw, 52px); align-items: start; }

/* Info column */
.hpf-contact-info__title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; color: var(--cc-ink); margin: 0 0 12px; }
.hpf-contact-info__text { font-size: 16px; line-height: 1.6; color: var(--cc-muted); margin: 0 0 24px; max-width: 44ch; }
.hpf-cc-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hpf-cc-list li { display: flex; align-items: center; gap: 14px; }
.hpf-cc-list__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--cc-teal-deep); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(13, 95, 89, .08); }
.hpf-cc-list__ic svg { width: 22px; height: 22px; }
.hpf-cc-list__txt, .hpf-cc-list a { color: var(--cc-ink); font-size: 15.5px; line-height: 1.5; text-decoration: none; font-weight: 600; }
.hpf-cc-list a:hover { color: var(--cc-teal-deep); text-decoration: none; }
.hpf-contact-map { border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(13, 95, 89, .12); border: 1px solid var(--cc-border); background: #fff; }
.hpf-contact-map__frame { position: relative; aspect-ratio: 16 / 10; }
.hpf-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Form card */
.hpf-contact-form-card { background: #fff; border: 1px solid var(--cc-border); border-radius: 24px; padding: clamp(24px, 3vw, 42px); box-shadow: 0 20px 50px rgba(13, 95, 89, .10); }
.hpf-contact-form-card__title { font-size: clamp(22px, 2.8vw, 32px); color: var(--cc-ink); margin: 0 0 8px; }
.hpf-contact-form-card__text { font-size: 15px; line-height: 1.6; color: var(--cc-muted); margin: 0 0 22px; }
/* Form fields — shared by the Contact Form 7 form (its markup reuses
 * .hpf-contact-form / .hpf-field), scoped to the card so the waitlist CF7
 * (.hpf-waitlist) keeps its own styling. */
.hpf-field { margin: 0 0 16px; }
.hpf-field > p { margin: 0; }
.hpf-field label { display: block; font-family: var(--cc-head); font-weight: 700; font-size: 14px; color: var(--cc-ink); margin: 0 0 7px; }
.hpf-contact-form-card .wpcf7-form-control-wrap { display: block; }
.hpf-field input, .hpf-field textarea, .hpf-field select { width: 100%; font: inherit; font-size: 15px; color: var(--cc-ink); background: #fbfdfd; border: 1.5px solid var(--cc-border); border-radius: 12px; padding: 13px 15px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.hpf-field textarea { resize: vertical; min-height: 120px; }
.hpf-field input:focus, .hpf-field textarea:focus, .hpf-field select:focus { outline: none; border-color: var(--cc-teal); background: #fff; box-shadow: 0 0 0 3px rgba(96, 186, 191, .22); }

/* Contact Form 7 submit + messages (inside the card only). */
.hpf-contact-form-card .wpcf7-submit { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cc-head); font-weight: 800; font-size: 15px; color: #fff; background: var(--cc-teal-deep); border: 0; border-radius: 999px; padding: 14px 34px; cursor: pointer; box-shadow: 0 12px 26px rgba(63, 152, 157, .3); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; margin-top: 4px; }
.hpf-contact-form-card .wpcf7-submit:hover { background: var(--cc-teal); transform: translateY(-2px); }
.hpf-contact-form-card .wpcf7-submit:disabled { opacity: .7; cursor: default; transform: none; }
.hpf-contact-form-card .wpcf7-spinner { margin-left: 10px; }
.hpf-contact-form-card .wpcf7-form-control.wpcf7-not-valid { border-color: var(--cc-pink); }
.hpf-contact-form-card .wpcf7-not-valid-tip { color: var(--cc-pink); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.hpf-contact-form-card .wpcf7-form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border: 0; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.hpf-contact-form-card .wpcf7-form.sent .wpcf7-response-output { background: #e6f8f0; color: #2f7a66; }
.hpf-contact-form-card .wpcf7-form.invalid .wpcf7-response-output,
.hpf-contact-form-card .wpcf7-form.unaccepted .wpcf7-response-output,
.hpf-contact-form-card .wpcf7-form.spam .wpcf7-response-output,
.hpf-contact-form-card .wpcf7-form.failed .wpcf7-response-output { background: #fdeef2; color: var(--cc-pink); }

/* ---- FAQ (reusable .hpf-faq, light teal skin) ---- */
.hpf-contact-faq { padding: clamp(44px, 6vw, 84px) 0; }
.hpf-contact-faq__title { text-align: center; font-size: clamp(26px, 3.4vw, 40px); color: var(--cc-ink); margin: 0 auto clamp(26px, 3.5vw, 40px); }
.hpf-contact-faq .hpf-faq {
	--hpf-faq-item-bg: #fff;
	--hpf-faq-item-bg-hover: #f7fbfb;
	--hpf-faq-item-bg-open: var(--cc-teal-soft);
	--hpf-faq-item-border: 1px solid var(--cc-border);
	--hpf-faq-item-shadow-open: 0 12px 30px rgba(13, 95, 89, .10);
	--hpf-faq-q-color: var(--cc-ink);
	--hpf-faq-q-hover-bg: transparent;
	--hpf-faq-q-open-bg: transparent;
	--hpf-faq-num-bg: var(--cc-teal);
	--hpf-faq-num-color: #fff;
	--hpf-faq-chev: var(--cc-teal-deep);
	--hpf-faq-a-color: var(--cc-muted);
	max-width: 820px;
	margin: 0 auto;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hpf-contact-grid { grid-template-columns: 1fr; }
	.hpf-contact-info__text { max-width: none; }
}


/* =========================================================
 * DISTRIBUTOR PAGE additions (pages/page-distributor.php).
 * Extends the reusable .hpf-lp component set.
 * =======================================================*/
/* ---- Info-card grid (icon + title + description) ---- */
.hpf-lp-icards { list-style: none; margin: clamp(24px, 3.5vw, 40px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1120px; text-align: left; }
.hpf-lp-icards__cta { margin-top: clamp(24px, 3.5vw, 40px); }

/* Default = "pillar" cards: gradient icon tile + accent bar that draws in on hover. */
.hpf-lp-icard { position: relative; background: #fff; border: 1px solid var(--hpf-border, #e6eeed); border-radius: 18px; padding: 28px 26px; box-shadow: 0 8px 22px rgba(13, 95, 89, .06); overflow: hidden; transition: transform .28s var(--hpf-ease, ease), box-shadow .28s ease; }
.hpf-lp-icard::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: linear-gradient(var(--lp-accent), var(--lp-accent-deep)); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--hpf-ease, ease); }
.hpf-lp-icard:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(13, 95, 89, .15); }
.hpf-lp-icard:hover::before { transform: scaleY(1); }
.hpf-lp-icard__ic { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, var(--lp-accent), var(--lp-accent-deep)); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 8px 18px rgba(13, 95, 89, .18); }
.hpf-lp-icard__ic svg { width: 26px; height: 26px; }
.hpf-lp-icard__title { font-size: 18px; color: var(--lp-ink); margin: 0 0 8px; line-height: 1.28; }
.hpf-lp-icard__desc { font-size: 14.5px; line-height: 1.6; color: var(--lp-muted); margin: 0; }

/* Variant: modern "spotlight" pillar cards (soft accent corner-glow, floating
 * gradient icon that tilts on hover). */
.hpf-lp-icards--pillar { gap: 22px; }
.hpf-lp-icards--pillar .hpf-lp-icard { background: linear-gradient(180deg, #ffffff 0%, var(--lp-accent-soft) 260%); border-radius: 22px; padding: 34px 28px 30px; box-shadow: 0 12px 32px rgba(13, 95, 89, .07); }
.hpf-lp-icards--pillar .hpf-lp-icard::before { display: none; }
.hpf-lp-icards--pillar .hpf-lp-icard::after { content: ""; position: absolute; top: -50px; right: -50px; width: 130px; height: 130px; border-radius: 50%; z-index: 0; background: radial-gradient(circle, var(--lp-accent) 0%, transparent 68%); opacity: .16; transition: opacity .35s var(--hpf-ease, ease), transform .35s var(--hpf-ease, ease); }
.hpf-lp-icards--pillar .hpf-lp-icard > * { position: relative; z-index: 1; }
.hpf-lp-icards--pillar .hpf-lp-icard:hover { transform: translateY(-8px); border-color: var(--lp-accent); box-shadow: 0 28px 52px rgba(13, 95, 89, .16); }
.hpf-lp-icards--pillar .hpf-lp-icard:hover::after { opacity: .32; transform: scale(1.25); }
.hpf-lp-icards--pillar .hpf-lp-icard__ic { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 20px; box-shadow: 0 12px 24px rgba(13, 95, 89, .26); transition: transform .35s var(--hpf-ease, ease); }
.hpf-lp-icards--pillar .hpf-lp-icard__ic svg { width: 28px; height: 28px; }
.hpf-lp-icards--pillar .hpf-lp-icard:hover .hpf-lp-icard__ic { transform: translateY(-4px) rotate(-8deg); }
.hpf-lp-icards--pillar .hpf-lp-icard__title { font-size: 19px; margin-bottom: 10px; }

/* Variant: numbered milestones (accent top rule + big index, no icon tile). */
.hpf-lp-icards--number .hpf-lp-icard { border-top: 3px solid var(--lp-accent); padding-top: 24px; }
.hpf-lp-icards--number .hpf-lp-icard::before { display: none; }
.hpf-lp-icard__num { display: block; font-family: var(--lp-head); font-weight: 800; font-size: 42px; line-height: 1; color: var(--lp-accent); margin-bottom: 14px; }

/* Variant: large centred feature cards (fewer, more prominent). */
.hpf-lp-icards--feature { max-width: 980px; }
.hpf-lp-icards--feature .hpf-lp-icard { text-align: center; padding: 38px 30px; }
.hpf-lp-icards--feature .hpf-lp-icard::before { display: none; }
.hpf-lp-icards--feature .hpf-lp-icard__ic { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; }
.hpf-lp-icards--feature .hpf-lp-icard__ic svg { width: 32px; height: 32px; }
.hpf-lp-icards--feature .hpf-lp-icard__title { font-size: 20px; }

/* Variant: glass cards sitting on an accent band. */
.hpf-lp-band--cards .hpf-lp-icard { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); box-shadow: none; }
.hpf-lp-band--cards .hpf-lp-icard::before { display: none; }
.hpf-lp-band--cards .hpf-lp-icard:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .18); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
.hpf-lp-band--cards .hpf-lp-icard__ic { background: #fff; color: var(--lp-accent-deep); box-shadow: none; }
.hpf-lp-band--cards .hpf-lp-icard__title { color: #fff; }
.hpf-lp-band--cards .hpf-lp-icard__desc { color: rgba(255, 255, 255, .9); }

/* ---- Retailer strip ---- */
.hpf-lp-retailers { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; }
.hpf-lp-retailer { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 14px; border: 1.5px solid var(--hpf-border, #e6eeed); background: #fff; font-family: var(--lp-head); font-weight: 700; font-size: 16px; color: var(--lp-ink); text-decoration: none; box-shadow: 0 6px 18px rgba(13, 95, 89, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hpf-lp-retailer:hover { transform: translateY(-3px); border-color: var(--lp-accent); box-shadow: 0 12px 28px rgba(13, 95, 89, .12); text-decoration: none; color: var(--lp-ink); }
.hpf-lp-retailer svg { width: 20px; height: 20px; color: var(--lp-accent-deep); }

/* ---- Scarcity callout ---- */
.hpf-lp-callout { max-width: 840px; margin: clamp(28px, 4vw, 44px) auto 0; display: flex; align-items: center; gap: 18px; background: linear-gradient(150deg, var(--lp-accent), var(--lp-accent-deep)); color: #fff; border-radius: 18px; padding: 24px 28px; text-align: left; }
.hpf-lp-callout__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; }
.hpf-lp-callout__ic svg { width: 24px; height: 24px; }
.hpf-lp-callout__title { font-family: var(--lp-head); font-weight: 800; font-size: 17px; margin: 0 0 4px; color: #fff; }
.hpf-lp-callout__text { font-size: 14px; line-height: 1.55; margin: 0; color: rgba(255, 255, 255, .92); }

/* ---- Distributor form (Contact Form 7) ---- */
.hpf-dist { padding: clamp(44px, 6vw, 84px) 0; background: var(--lp-accent-soft); scroll-margin-top: 90px; }
.hpf-dist__card { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 24px 60px rgba(13, 95, 89, .12); }
.hpf-dist__head { text-align: center; margin-bottom: clamp(24px, 3.5vw, 36px); }
.hpf-dist__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: var(--lp-ink); margin: 0 0 10px; }
.hpf-dist__sub { font-size: 15.5px; line-height: 1.6; color: var(--lp-muted); margin: 0 auto; max-width: 52ch; }
.hpf-dist-form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.hpf-dist-form .grid > div { min-width: 0; }
.hpf-dist-form .md\:col-span-2 { grid-column: 1 / -1; }
.hpf-dist-form label { display: block; font-family: var(--lp-head); font-weight: 700; font-size: 13.5px; color: var(--lp-ink); margin-bottom: 7px; }
.hpf-dist-form input[type="text"], .hpf-dist-form input[type="email"], .hpf-dist-form input[type="tel"], .hpf-dist-form textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--hpf-border, #e6eeed); border-radius: 12px; font: inherit; font-size: 15px; color: var(--lp-ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.hpf-dist-form input:focus, .hpf-dist-form textarea:focus { outline: none; border-color: var(--lp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 26%, transparent); }
.hpf-dist-form textarea { resize: vertical; min-height: 120px; }
.hpf-dist-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.hpf-dist-form .wpcf7-list-item { margin: 0; }
.hpf-dist-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-family: var(--hpf-font-body, inherit); font-weight: 600; font-size: 14px; color: var(--lp-ink); border: 1.5px solid var(--hpf-border, #e6eeed); border-radius: 999px; padding: 9px 16px; transition: border-color .2s ease, background .2s ease; }
.hpf-dist-form .wpcf7-list-item label:hover { border-color: var(--lp-accent); }
.hpf-dist-form .wpcf7-list-item input { accent-color: var(--lp-accent-deep); }
.hpf-dist-form .wpcf7-submit { display: inline-block; margin-top: 4px; background: var(--lp-gold); color: var(--lp-ink); font-family: var(--lp-head); font-weight: 800; font-size: 16px; padding: 15px 40px; border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 24px rgba(228, 180, 81, .35); transition: background .2s ease, transform .15s ease; }
.hpf-dist-form .wpcf7-submit:hover { background: var(--lp-gold-deep); transform: translateY(-2px); }
.hpf-dist-form .wpcf7-spinner { margin: 0 auto; }
.hpf-dist-form .wpcf7-not-valid-tip { font-size: 12.5px; color: var(--hrp-pink, #d46681); margin-top: 5px; }
.hpf-dist-form .wpcf7-response-output { margin: 18px 0 0; border-radius: 12px; font-size: 14px; }
@media (max-width: 600px) {
	.hpf-dist-form .grid { grid-template-columns: 1fr; }
	.hpf-lp-callout { flex-direction: column; text-align: center; }
}


/* =========================================================
 * HALAL NUTRITION landing page (landing-pages/page-halal-nutrition.php).
 * Standalone (no site chrome) but uses the global design system. Scoped .hpf-hn.
 * =======================================================*/
.hpf-hn {
	--hn-teal: #4bb0ae;
	--hn-pink: var(--hrp-pink, #d46681);
	--hn-gold: var(--hrp-gold, #e4b451);
	--hn-gold-deep: var(--hrp-gold-deep, #cf9d35);
	--hn-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--hn-teal-deep: var(--hrp-teal-deep, #3f989d);
	--hn-ink: var(--hpf-ink, #1d2327);
	--hn-muted: var(--hpf-muted, #5b6566);
	--hn-head: var(--hpf-font-head, "Quicksand", sans-serif);
	font-family: var(--hpf-font-body, "Nunito", sans-serif);
	color: var(--hn-ink);
	line-height: 1.6;
	overflow-x: clip;
}
.hpf-hn h1, .hpf-hn h2, .hpf-hn h3 { font-family: var(--hn-head); font-weight: 700; letter-spacing: -0.3px; }
.hpf-hn img { max-width: 100%; }
.hpf-hn-wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-hn-btn { display: inline-block; font-family: var(--hn-head); font-weight: 800; font-size: 15px; padding: 14px 32px; border-radius: 999px; text-decoration: none; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-hn-btn--gold { background: var(--hn-gold); color: var(--hn-ink); box-shadow: 0 10px 24px rgba(228, 180, 81, .35); }
.hpf-hn-btn--gold:hover { background: var(--hn-gold-deep); color: var(--hn-ink); transform: translateY(-2px); text-decoration: none; }

/* ---- Hero ---- */
.hpf-hn-hero { position: relative; overflow: hidden; }
.hpf-hn-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: 0; }
.hpf-hn-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15, 25, 25, .72), rgba(15, 25, 25, .45) 46%, rgba(15, 25, 25, .1) 82%); }
.hpf-hn-hero__inner { position: relative; z-index: 2; min-height: clamp(460px, 52vw, 660px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(64px, 8vw, 96px) clamp(40px, 6vw, 72px); color: #fff; }
.hpf-hn-hero__logo { position: absolute; top: clamp(18px, 3vw, 32px); left: clamp(16px, 4vw, 44px); }
.hpf-hn-hero__logo img { height: 44px; width: auto; display: block; }
.hpf-hn-hero__seal { position: absolute; z-index: 2; top: clamp(16px, 3vw, 34px); right: clamp(16px, 4vw, 48px); width: clamp(68px, 8vw, 104px); height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .3)); animation: hpf-hn-seal 6s ease-in-out infinite; }
@keyframes hpf-hn-seal { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .hpf-hn-hero__seal { animation: none; } }
.hpf-hn-hero__copy { max-width: 560px; }
.hpf-hn-hero__title { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; margin: 0 0 16px; color: #fff; }
.hpf-hn-hero__desc { font-size: clamp(15px, 1.9vw, 19px); line-height: 1.55; margin: 0 0 28px; color: rgba(255, 255, 255, .92); max-width: 44ch; }
.hpf-hn-hero__desc p { margin: 0 0 10px; }
.hpf-hn-hero__desc p:last-child { margin-bottom: 0; }

/* ---- Promo strip (marquee) ---- */
.hpf-hn-strip { background: var(--hn-pink); color: #fff; overflow: hidden; padding: 13px 0; }
.hpf-hn-strip__track { display: flex; gap: 44px; width: max-content; animation: hpf-hn-marquee 26s linear infinite; }
.hpf-hn-strip__item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--hn-head); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
@keyframes hpf-hn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Why Halal? ---- */
.hpf-hn-why { background: var(--hn-teal); color: #fff; padding: clamp(48px, 6vw, 84px) 0 0; text-align: center; overflow: hidden; }
.hpf-hn-why__title { font-size: clamp(28px, 3.6vw, 42px); color: #fff; margin: 0 0 16px; }
.hpf-hn-why__text { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, .92); max-width: 72ch; margin: 0 auto; }
.hpf-hn-why__media { margin-top: clamp(20px, 3vw, 34px); }
.hpf-hn-why__media img { display: block; margin: 0 auto -20px auto; width: min(540px, 84%); height: auto; }

/* ---- Is Halal important? ---- */
.hpf-hn-important { padding: clamp(48px, 6vw, 84px) 0; }
.hpf-hn-important__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.hpf-hn-important__title { font-size: clamp(24px, 3.2vw, 36px); color: var(--hn-ink); margin: 0 0 16px; }
.hpf-hn-important__copy p { font-size: 15.5px; line-height: 1.7; color: var(--hn-muted); margin: 0 0 14px; }
.hpf-hn-important__lead { font-weight: 700; color: var(--hn-ink); }
.hpf-hn-important__media img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 22px 50px rgba(13, 95, 89, .14); }
.hpf-hn-checks { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hpf-hn-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--hn-ink); }
.hpf-hn-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--hn-teal-soft); color: var(--hn-teal-deep); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.hpf-hn-check svg { width: 15px; height: 15px; }

/* ---- Quotes carousel ---- */
.hpf-hn-quotes { padding: clamp(48px, 6vw, 84px) 0; }
.hpf-hn-quotes__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.hpf-hn-quotes__title { font-size: clamp(24px, 3.2vw, 36px); color: var(--hn-ink); margin: 0 auto 10px; max-width: 22ch; }
.hpf-hn-quotes__sub { font-size: 15.5px; color: var(--hn-muted); margin: 0; }
.hpf-hn-quotes__carousel { max-width: 900px; margin: 0 auto; }
.hpf-hn-quotes__carousel .hpf-carousel__track > * { flex-basis: 100%; }
.hpf-hn-quote { margin: 0; background: linear-gradient(150deg, var(--hn-gold), var(--hn-gold-deep)); color: #fff; border-radius: 22px; padding: clamp(30px, 4vw, 52px); text-align: center; }
.hpf-hn-quote__mark { font-family: var(--hn-head); font-size: 60px; line-height: 1; color: rgba(255, 255, 255, .55); display: block; margin-bottom: -6px; }
.hpf-hn-quote blockquote { margin: 0 0 16px; font-size: clamp(16px, 2vw, 21px); line-height: 1.5; font-weight: 600; }
.hpf-hn-quote figcaption { font-family: var(--hn-head); font-weight: 700; font-size: 14px; opacity: .92; }

/* ---- Scholars video ---- */
.hpf-hn-scholars { background: var(--hn-teal); color: #fff; padding: clamp(48px, 6vw, 84px) 0; }
.hpf-hn-scholars__head { text-align: center; margin-bottom: clamp(24px, 3.5vw, 40px); }
.hpf-hn-scholars__title { font-size: clamp(26px, 3.4vw, 40px); color: #fff; margin: 0 0 10px; }
.hpf-hn-scholars__sub { font-size: 15.5px; color: rgba(255, 255, 255, .9); margin: 0; }
.hpf-hn-video { position: relative; display: block; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.hpf-hn-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--hpf-ease, ease), filter .3s ease; }
.hpf-hn-video:hover .hpf-hn-video__poster { transform: scale(1.04); filter: brightness(.86); }
/* Fallback chain matters: --hn-teal-deep only exists on the .hpf-hn landing
 * pages, so without it the icon inherits white and vanishes on the circle. */
.hpf-hn-video__play { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--hn-teal-deep, var(--hrp-teal-deep, #3f989d)); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform .25s ease, background .25s ease; }
.hpf-hn-video:hover .hpf-hn-video__play { transform: scale(1.08); background: #fff; }
.hpf-hn-video__play svg { margin-left: 4px; }
.hpf-hn-video--playing iframe, .hpf-hn-video--playing video { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: cover; }

/* ---- More than Just a Tradition ---- */
.hpf-hn-tradition { padding: clamp(48px, 6vw, 84px) 0 0; text-align: center; overflow: hidden; }
.hpf-hn-tradition__title { font-size: clamp(28px, 3.6vw, 42px); color: var(--hn-ink); margin: 0 0 18px; }
.hpf-hn-tradition__text { max-width: 74ch; margin: 0 auto 24px; }
.hpf-hn-tradition__text p { font-size: 15.5px; line-height: 1.7; color: var(--hn-muted); margin: 0 0 14px; }
.hpf-hn-tradition__media { margin-top: clamp(22px, 4vw, 38px); }
.hpf-hn-tradition__media img { display: block; margin: 0 auto; width: min(330px, 66%); height: auto; }

/* ---- FAQ (gold band) ---- */
.hpf-hn-faq { background: var(--hn-gold); padding: clamp(48px, 7vw, 92px) 0; }
.hpf-hn-faq__title { text-align: center; font-family: var(--hn-head); font-weight: 700; font-size: clamp(26px, 3.6vw, 40px); color: var(--hn-ink); margin: 0 0 clamp(24px, 3.5vw, 40px); }
.hpf-hn-faq .hpf-faq { max-width: 860px; margin: 0 auto; --hpf-faq-item-bg: rgba(255, 255, 255, .5); --hpf-faq-item-bg-hover: rgba(255, 255, 255, .72); --hpf-faq-item-bg-open: #fff; --hpf-faq-item-border: 1px solid rgba(255, 255, 255, .6); --hpf-faq-item-shadow-open: 0 12px 30px rgba(0, 0, 0, .1); --hpf-faq-num-bg: var(--hn-ink); --hpf-faq-num-color: #fff; --hpf-faq-q-color: var(--hn-ink); --hpf-faq-q-hover-bg: rgba(255, 255, 255, .3); --hpf-faq-q-open-bg: transparent; --hpf-faq-chev: var(--hn-ink); --hpf-faq-a-color: var(--hn-muted); }

/* ---- Minimal footer ---- */
.hpf-hn-footer { background: var(--hn-teal); color: #fff; padding: clamp(36px, 5vw, 56px) 0; text-align: center; }
.hpf-hn-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hpf-hn-footer__logo { height: 52px; width: auto; }
.hpf-hn-footer__follow { font-family: var(--hn-head); font-weight: 700; font-size: 15px; }
.hpf-hn-footer__social { display: flex; gap: 12px; }
.hpf-hn-footer__soc { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.hpf-hn-footer__soc:hover { background: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.hpf-hn-footer__soc svg { width: 18px; height: 18px; }
.hpf-hn-footer__copy { font-size: 13px; color: rgba(255, 255, 255, .85); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.hpf-hn-important__grid { grid-template-columns: 1fr; }
	.hpf-hn-important__media { order: -1; max-width: 460px; margin-inline: auto; }
	.hpf-hn-hero__inner { min-height: clamp(440px, 92vw, 580px); }
	.hpf-hn-hero__overlay { background: linear-gradient(180deg, rgba(15, 25, 25, .5), rgba(15, 25, 25, .35) 45%, rgba(15, 25, 25, .72)); }
	.hpf-hn-hero__bg { object-position: center; }
}
@media (prefers-reduced-motion: reduce) {
	.hpf-hn-strip__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
}
/* The shared range section (hpf_render_range_section) uses the home's `.reveal`
 * class, whose reveal observer isn't loaded on this standalone page — force it
 * visible so the products don't stay hidden. */
.hpf-hn .hrp-home .reveal { opacity: 1; transform: none; }


/* =========================================================
 * HEALTHY NUTRITION landing page (landing-pages/page-healthy-nutrition.php).
 * Reuses the .hpf-hn base (hero/wrap/btn/faq/footer); adds .hpf-hey sections.
 * =======================================================*/
.hpf-hn-btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); }
.hpf-hn-btn--outline:hover { background: #fff; color: var(--hn-teal-deep, #3f989d); transform: translateY(-2px); text-decoration: none; }

/* ---- Because their bowls deserve a little joy too ---- */
/* Teal band; centred heading with the bowl + benefit chips floating around it. */
.hpf-hey-bowls { background: var(--hn-teal, #4bb0ae); color: #fff; padding: clamp(44px, 6vw, 80px) 0 clamp(30px, 4vw, 50px); overflow: hidden; }
.hpf-hey-bowls__head { text-align: center; max-width: 640px; margin: 0 auto; }
.hpf-hey-bowls__title { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; color: #fff; margin: 0 0 12px; }
.hpf-hey-bowls__lead { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hpf-hey-bowls__lead p { margin: 0; }

.hpf-hey-stage { position: relative; max-width: 100%; min-height: clamp(470px, 50vw, 540px); margin: clamp(20px, 3vw, 36px) auto 0; }
.hpf-hey-stage__bowl { position: absolute; left: 50%; bottom: 0; width: min(400px, 46%); height: auto; margin-left: calc(min(400px, 46%) / -2); z-index: 1; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .28)); }
.hpf-hey-chips { list-style: none; margin: 0; padding: 0; }
.hpf-hey-chip { position: absolute; z-index: 2; width: 262px; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 15px 18px; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, .2); }
.hpf-hey-chip__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.hpf-hey-chip__ic svg { width: 18px; height: 18px; }
.hpf-hey-chip__txt strong { display: block; font-family: var(--hn-head, "Quicksand", sans-serif); font-size: 14.5px; line-height: 1.2; margin-bottom: 3px; }
.hpf-hey-chip__txt > span { font-size: 12.5px; line-height: 1.4; opacity: .92; }
/* Colours */
.hpf-hey-chip--white { background: #fff; color: var(--hn-ink, #1d2327); }
.hpf-hey-chip--white .hpf-hey-chip__ic { background: var(--hn-teal-soft, #e7f4f5); color: var(--hn-teal-deep, #3f989d); }
.hpf-hey-chip--pink { background: var(--hn-pink, #d46681); color: #fff; }
.hpf-hey-chip--pink .hpf-hey-chip__ic { background: rgba(255, 255, 255, .28); color: #fff; }
.hpf-hey-chip--gold { background: var(--hn-gold, #e4b451); color: #fff; }
.hpf-hey-chip--gold .hpf-hey-chip__ic { background: rgba(255, 255, 255, .92); color: var(--hn-gold-deep, #cf9d35); }
/* Positions (desktop scatter) */
.hpf-hey-chip--p0 { top: 0; left: 50%; margin-left: -131px; }
.hpf-hey-chip--p1 { top: 74px; left: 0; }
.hpf-hey-chip--p2 { top: 208px; left: 0; }
.hpf-hey-chip--p3 { top: 74px; right: 0; }
.hpf-hey-chip--p4 { top: 208px; right: 0; }
/* Gentle float */
@media (prefers-reduced-motion: no-preference) {
	.hpf-hey-chip { animation: hpf-hey-float 6s ease-in-out infinite; }
	.hpf-hey-chip--p1, .hpf-hey-chip--p4 { animation-delay: -3s; }
}
@keyframes hpf-hey-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---- We make pet care easy ---- */
.hpf-hey-care { background: var(--hn-teal, #4bb0ae); color: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.hpf-hey-care__head { text-align: center; margin-bottom: clamp(28px, 4vw, 46px); }
.hpf-hey-care__title { font-size: clamp(26px, 3.4vw, 40px); color: #fff; margin: 0 0 10px; }
.hpf-hey-care__sub { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0 auto; max-width: 60ch; }
.hpf-hey-care__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 1080px; margin-inline: auto; }
.hpf-hey-card { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; padding: 28px 24px; text-align: center; transition: transform .28s var(--hpf-ease, ease), background .28s ease; }
.hpf-hey-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .2); }
.hpf-hey-card__ic { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--hn-teal-deep, #3f989d); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.hpf-hey-card__title { font-size: 18px; color: #fff; margin: 0 0 8px; line-height: 1.25; }
.hpf-hey-card__text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; }

/* ---- Meals that make cats purr ---- */
.hpf-hey-purr { padding: clamp(44px, 6vw, 76px) 0; text-align: center; }
.hpf-hey-purr__title { font-size: clamp(26px, 3.4vw, 40px); color: var(--hn-ink, #1d2327); margin: 0 0 8px; }
.hpf-hey-purr__sub { font-size: 15.5px; color: var(--hn-muted, #5b6566); margin: 0 0 14px; }
.hpf-hey-purr__stars { color: var(--hn-gold, #e4b451); font-size: 26px; letter-spacing: 4px; }

/* ---- Happiness, served in every bowl ---- */
.hpf-hey-happy { position: relative; padding: clamp(48px, 6vw, 96px) 0; background: radial-gradient(130% 120% at 88% 12%, var(--hn-teal-soft, #e7f4f5) 0%, rgba(231, 244, 245, 0) 55%); overflow: hidden; }
.hpf-hey-happy__glow { position: absolute; z-index: 0; top: -130px; left: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(228, 180, 81, .18), transparent 70%); pointer-events: none; }
.hpf-hey-happy__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.hpf-hey-happy__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--hn-teal-soft, #e7f4f5); color: var(--hn-teal-deep, #3f989d); font-family: var(--hn-head, "Quicksand", sans-serif); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(13, 95, 89, .08); margin-bottom: 18px; }
.hpf-hey-happy__title { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; color: var(--hn-ink, #1d2327); margin: 0 0 16px; max-width: 14ch; }
.hpf-hey-happy__text { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.7; color: var(--hn-muted, #5b6566); margin: 0 0 22px; max-width: 46ch; }
.hpf-hey-happy__choose { font-family: var(--hn-head, "Quicksand", sans-serif); font-weight: 700; font-size: 16px; color: var(--hn-ink, #1d2327); margin: 0 0 14px; }
.hpf-hey-happy__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hpf-hey-happy__actions .hpf-hn-btn--outline { color: var(--hn-teal-deep, #3f989d); border-color: var(--hn-teal, #4bb0ae); }
.hpf-hey-happy__actions .hpf-hn-btn--outline:hover { background: var(--hn-teal, #4bb0ae); color: #fff; border-color: var(--hn-teal, #4bb0ae); }
/* Media: image framed by an offset accent panel + floating dots */
.hpf-hey-happy__media { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
.hpf-hey-happy__panel { position: absolute; z-index: 0; top: 26px; left: 26px; right: -24px; bottom: -24px; border-radius: 28px; background: linear-gradient(150deg, var(--hn-teal, #4bb0ae), var(--hn-teal-deep, #3f989d)); }
.hpf-hey-happy__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 60px rgba(13, 95, 89, .22); }
.hpf-hey-happy__dot { position: absolute; z-index: 2; border-radius: 50%; }
.hpf-hey-happy__dot--gold { width: 20px; height: 20px; background: var(--hn-gold, #e4b451); top: -10px; left: 10%; box-shadow: 0 6px 14px rgba(228, 180, 81, .4); }
.hpf-hey-happy__dot--pink { width: 14px; height: 14px; background: var(--hn-pink, #d46681); top: 16%; right: -18px; box-shadow: 0 6px 14px rgba(212, 102, 129, .35); }
.hpf-hey-happy__dot--ring { width: 30px; height: 30px; background: transparent; border: 6px solid rgba(75, 176, 174, .5); bottom: 10%; left: -20px; }
@media (prefers-reduced-motion: no-preference) {
	.hpf-hey-happy__dot { animation: hpf-hey-float 5.5s ease-in-out infinite; }
	.hpf-hey-happy__dot--pink { animation-delay: -2s; }
	.hpf-hey-happy__dot--ring { animation-delay: -3.5s; }
}

/* ---- Responsive ---- */
/* Below the scatter breakpoint: bowl on top, chips stacked in a column. */
@media (max-width: 980px) {
	.hpf-hey-stage { min-height: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
	.hpf-hey-stage__bowl { position: static; left: auto; bottom: auto; margin: 0 auto 6px; width: min(300px, 74%); order: -1; }
	.hpf-hey-chips { display: flex; flex-direction: column; gap: 12px; width: 100%; }
	.hpf-hey-chip { position: static; width: 100%; margin: 0; animation: none; }
}
@media (max-width: 860px) {
	.hpf-hey-happy__grid { grid-template-columns: 1fr; }
	.hpf-hey-happy__media { order: -1; max-width: 460px; margin-inline: auto; }
	.hpf-hey-care__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.hpf-hey-care__grid { grid-template-columns: 1fr; }
	.hpf-hey-happy__actions .hpf-hn-btn { width: 100%; text-align: center; }
}


/* =========================================================
 * CUSTOMER REVIEWS — Trustpilot-style Swiper carousel (inc/reviews.php).
 * Reusable via hpf_reviews_section() / [hpf_reviews]. Trustpilot green stars
 * with the theme's fonts/palette.
 * =======================================================*/
.hpf-reviews { --tp-green: #00b67a; padding: clamp(44px, 6vw, 80px) 0; }
.hpf-reviews__wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-reviews__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.hpf-reviews__title { font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 700; letter-spacing: -0.3px; font-size: clamp(26px, 3.4vw, 40px); color: var(--hpf-ink, #1d2327); margin: 0 0 8px; }
.hpf-reviews__sub { font-size: 15.5px; color: var(--hpf-muted, #5b6566); margin: 0 0 14px; }
.hpf-reviews__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hpf-reviews__brand:hover { text-decoration: none; }
.hpf-reviews__brand-txt { font-size: 13px; font-weight: 600; color: var(--hpf-muted, #5b6566); }

/* Trustpilot star boxes */
.hpf-review__stars { display: inline-flex; gap: 3px; }
.hpf-review__star { width: 22px; height: 22px; border-radius: 3px; background: #dcdce6; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hpf-review__star.is-on { background: var(--tp-green, #00b67a); }
.hpf-review__star svg { width: 15px; height: 15px; }
.hpf-review__stars--all .hpf-review__star { width: 26px; height: 26px; }
.hpf-review__stars--all .hpf-review__star svg { width: 18px; height: 18px; }

/* Swiper stage — nav lives on the carousel wrapper (outside .swiper's overflow
 * clip) so the arrows aren't cut off. */
.hpf-reviews__carousel { position: relative; }
.hpf-reviews__swiper.swiper { position: relative; padding: 6px 2px 52px; }
.hpf-reviews__swiper .swiper-wrapper { align-items: stretch; }
.hpf-reviews__swiper .swiper-slide { height: auto; display: flex; }

/* Card */
.hpf-review { background: #fff; border: 1px solid #e9e9ee; border-radius: 10px; box-shadow: 0 6px 22px rgba(20, 30, 40, .07); padding: 26px 24px; width: 100%; display: flex; flex-direction: column; }
.hpf-review__text { font-size: 15px; line-height: 1.62; color: #23262f; margin: 16px 0 18px; flex: 1 1 auto; }
.hpf-review__foot { display: flex; align-items: center; gap: 12px; }
.hpf-review__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--hpf-teal-dark, #0d5f59); color: #fff; font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.hpf-review__meta { display: flex; flex-direction: column; min-width: 0; }
.hpf-review__name { font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 700; font-size: 15px; color: #1c1c28; }
.hpf-review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tp-green, #00b67a); }
.hpf-review__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 700; font-size: 13px; color: var(--hpf-teal-dark, #0d5f59); text-decoration: none; align-self: flex-start; }
.hpf-review__link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Navigation arrows */
.hpf-reviews__nav { position: absolute; top: calc(50% - 26px); transform: translateY(-50%); width: 46px; height: 46px; padding: 0; min-width: 0; border-radius: 50%; border: 1px solid #e7ecec; background: #fff; color: var(--hpf-teal-dark, #0d5f59); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(29, 35, 39, .14); z-index: 6; transition: background .2s ease, color .2s ease, opacity .25s ease, transform .2s ease; }
.hpf-reviews__nav::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.6px 2.6px 0; }
.hpf-reviews__nav--prev { left: -10px; }
.hpf-reviews__nav--prev::before { transform: rotate(135deg); margin-left: 4px; }
.hpf-reviews__nav--next { right: -10px; }
.hpf-reviews__nav--next::before { transform: rotate(-45deg); margin-right: 4px; }
.hpf-reviews__nav:hover { background: var(--hpf-teal, #61bac1); color: #fff; }
.hpf-reviews__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Pagination */
.hpf-reviews__pagination { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; }
.hpf-reviews__pagination .swiper-pagination-bullet { width: 9px; height: 9px; background: #d3dedd; opacity: 1; transition: background .25s ease, width .25s ease; }
.hpf-reviews__pagination .swiper-pagination-bullet-active { background: var(--hpf-teal-dark, #0d5f59); width: 24px; border-radius: 5px; }

@media (max-width: 640px) {
	/* Arrows move to the bottom corners, flanking the dots (no text overlap). */
	.hpf-reviews__swiper.swiper { padding-bottom: 56px; }
	.hpf-reviews__nav { width: 40px; height: 40px; top: auto; bottom: 0; transform: none; }
	.hpf-reviews__nav--prev { left: 6px; }
	.hpf-reviews__nav--next { right: 6px; }
	.hpf-reviews__pagination { bottom: 16px; }
}


/* =========================================================
 * MEDIA / PRESS PAGE  (pages/page-media.php). Scoped .hpf-media.
 * Alternating press rows + a Vimeo facade. Reuses [data-reveal] and the
 * .hpf-hn-video facade base.
 * =======================================================*/
.hpf-media {
	--m-teal: var(--hrp-teal, #60babf);
	--m-teal-deep: var(--hrp-teal-deep, #3f989d);
	--m-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--m-ink: var(--hpf-ink, #1d2327);
	--m-muted: var(--hpf-muted, #5b6566);
	--m-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-media { max-width: 100%; padding: 0; }
.hpf-media-wrap { max-width: 1140px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-media h1, .hpf-media h2 { font-family: var(--m-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Header ---- */
.hpf-media-hero { background: radial-gradient(120% 130% at 50% 0%, var(--m-teal-soft) 0%, rgba(231, 244, 245, 0) 62%); padding: clamp(50px, 7vw, 92px) 0 clamp(28px, 4vw, 48px); }
.hpf-media-hero__inner { text-align: center; }
.hpf-media-hero__eyebrow { display: inline-block; font-family: var(--m-head); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-teal-deep); background: #fff; border: 1px solid var(--m-teal-soft); padding: 8px 18px; border-radius: 999px; box-shadow: 0 6px 16px rgba(13, 95, 89, .07); margin-bottom: 18px; }
.hpf-media-hero__title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; color: var(--m-ink); margin: 0 auto 14px; max-width: 18ch; }
.hpf-media-hero__sub { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: var(--m-muted); margin: 0 auto; max-width: 60ch; }

/* ---- Press items ---- */
.hpf-media-list { padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 7vw, 90px); }
.hpf-media-item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 66px); align-items: center; padding: clamp(32px, 4.5vw, 60px) 0; border-bottom: 1px solid var(--hpf-border, #e6eeed); }
.hpf-media-item:last-child { border-bottom: 0; }
.hpf-media-item__media { order: 2; }
.hpf-media-item--reverse .hpf-media-item__media { order: 0; }
.hpf-media-item__media > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; box-shadow: 0 22px 50px rgba(13, 95, 89, .16); transition: transform .5s var(--hpf-ease, ease), box-shadow .3s ease; }
.hpf-media-item__media > img:hover { transform: scale(1.02); box-shadow: 0 30px 60px rgba(13, 95, 89, .22); }
.hpf-media-item__copy { min-width: 0; }
.hpf-media-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.hpf-media-item__outlet { font-family: var(--m-head); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--m-teal-deep); }
.hpf-media-item__date { font-size: 12px; font-weight: 700; color: var(--m-teal-deep); background: var(--m-teal-soft); padding: 4px 12px; border-radius: 999px; }
.hpf-media-item__title { font-size: clamp(21px, 2.7vw, 30px); line-height: 1.2; color: var(--m-ink); margin: 0 0 14px; }
.hpf-media-item__desc { font-size: 15.5px; line-height: 1.7; color: var(--m-muted); margin: 0 0 22px; max-width: 54ch; }
.hpf-media-item__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-head); font-weight: 800; font-size: 14px; color: #fff; background: var(--m-teal-deep); padding: 12px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px rgba(13, 95, 89, .22); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-media-item__btn:hover { background: var(--m-teal); color: #fff; transform: translateY(-2px); text-decoration: none; box-shadow: 0 12px 26px rgba(13, 95, 89, .28); }
.hpf-media-item__btn svg { transition: transform .2s ease; }
.hpf-media-item__btn:hover svg { transform: translate(2px, -2px); }

/* ---- Vimeo facade (reuses .hpf-hn-video base) ---- */
.hpf-media-video { box-shadow: 0 22px 50px rgba(13, 95, 89, .2); }
.hpf-media-video__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(140deg, var(--m-teal), var(--m-teal-deep)); }
.hpf-media-video__logo { position: absolute; z-index: 2; top: 16px; left: 16px; width: min(140px, 42%); height: auto; background: #fff; padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }

/* ---- Responsive ---- */
@media (max-width: 820px) {
	.hpf-media-item { grid-template-columns: 1fr; gap: 24px; }
	.hpf-media-item__media { order: 0 !important; max-width: 520px; }
	.hpf-media-item__desc { max-width: none; }
}


/* =========================================================
 * MORRISONS PARTNERSHIP PAGE (pages/page-morrisons.php). Scoped .hpf-mor.
 * Plus the global "Join the Pack" CTA band (.hpf-joinpack) — reusable
 * anywhere via hpf_join_pack_section().
 * =======================================================*/
.hpf-mor {
	--mo-teal: var(--hrp-teal, #60babf);
	--mo-teal-deep: var(--hrp-teal-deep, #3f989d);
	--mo-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--mo-gold: var(--hrp-gold, #e4b451);
	--mo-gold-soft: var(--hrp-gold-soft, #fbf2db);
	--mo-pink: var(--hrp-pink, #d46681);
	--mo-ink: var(--hpf-ink, #1d2327);
	--mo-muted: var(--hpf-muted, #5b6566);
	--mo-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-mor { max-width: 100%; padding: 0; }
.hpf-mor-wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-mor h1, .hpf-mor h2, .hpf-mor h3 { font-family: var(--mo-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Hero ---- */
.hpf-mor-hero { background: radial-gradient(120% 130% at 50% 0%, var(--mo-teal-soft) 0%, rgba(231, 244, 245, 0) 64%); padding: clamp(44px, 6vw, 84px) 0 clamp(30px, 4vw, 52px); text-align: center; }
.hpf-mor-hero__title { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.1; color: var(--mo-ink); margin: 0 auto 14px; max-width: 20ch; }
.hpf-mor-hero__sub { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: var(--mo-muted); margin: 0 auto; max-width: 62ch; }

/* ---- Partnership band ---- */
.hpf-mor-partner { background: #f4f6f6; padding: clamp(40px, 5.5vw, 76px) 0; }
.hpf-mor-partner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.hpf-mor-partner__title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: var(--mo-ink); margin: 0 0 16px; }
.hpf-mor-partner__copy p { font-size: 15.5px; line-height: 1.7; color: var(--mo-muted); margin: 0 0 16px; }
.hpf-mor-partner__copy p:last-child { margin-bottom: 0; }
.hpf-mor-quote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--mo-teal); }
.hpf-mor-quote p { font-style: italic; color: var(--mo-teal-deep) !important; margin: 0 !important; }
.hpf-mor-partner__media img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 20px 46px rgba(13, 95, 89, .16); }

/* ---- Store finder ---- */
.hpf-mor-stores { padding: clamp(40px, 6vw, 84px) 0 clamp(30px, 4vw, 52px); }
.hpf-mor-stores__title { text-align: center; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.14; color: var(--mo-ink); margin: 0 auto clamp(24px, 3.5vw, 40px); max-width: 22ch; }
.hpf-mor-stores__card { max-width: 1000px; margin: 0 auto; background: var(--mo-gold-soft); border-radius: 16px; padding: clamp(14px, 2vw, 22px); }
.hpf-mor-stores__scroll { max-height: 620px; overflow: auto; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.hpf-mor-table { width: 100%; border-collapse: collapse; background: transparent; font-size: 14.5px; }
.hpf-mor-table thead th { position: sticky; top: 0; z-index: 2; background: var(--mo-gold); color: #fff; font-family: var(--mo-head); font-weight: 700; font-size: 13.5px; text-align: left; padding: 14px 18px; }
.hpf-mor-table thead th:first-child { border-radius: 8px 0 0 0; }
.hpf-mor-table thead th:last-child { border-radius: 0 8px 0 0; }
.hpf-mor-table tbody th, .hpf-mor-table tbody td { padding: 13px 18px; text-align: left; font-weight: 400; color: var(--mo-ink); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.hpf-mor-table tbody th { font-family: var(--mo-head); font-weight: 700; }
.hpf-mor-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .55); }
.hpf-mor-table tbody tr:hover { background: #fff; }
.hpf-mor-table tbody tr:last-child th, .hpf-mor-table tbody tr:last-child td { border-bottom: 0; }
.hpf-mor-stores__note { margin: 14px 4px 2px; font-size: 13px; line-height: 1.5; color: var(--mo-pink); }
.hpf-mor-stores__note strong { font-weight: 800; }

/* ---- Why buy here ---- */
.hpf-mor-why { padding: clamp(36px, 5vw, 72px) 0; }
.hpf-mor-why__title { text-align: center; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.14; color: var(--mo-ink); margin: 0 auto clamp(24px, 3.5vw, 42px); }
.hpf-mor-why__list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; }
.hpf-mor-why__item { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(18px, 4vw, 46px); align-items: start; padding: clamp(20px, 3vw, 30px) 0; border-top: 1px solid var(--hpf-border, #e6eeed); }
.hpf-mor-why__item:first-child { border-top: 0; }
.hpf-mor-why__head { display: flex; align-items: center; gap: 12px; }
.hpf-mor-why__icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--hrp-pink-soft, #fbeef1); color: var(--mo-pink); display: inline-flex; align-items: center; justify-content: center; transition: transform .28s var(--hpf-ease, ease); }
.hpf-mor-why__item:hover .hpf-mor-why__icon { transform: scale(1.08) rotate(-6deg); }
.hpf-mor-why__label { font-size: 17px; line-height: 1.25; color: var(--mo-ink); margin: 0; }
.hpf-mor-why__text { font-size: 15.5px; line-height: 1.7; color: var(--mo-muted); margin: 0; }

/* ---- Global "Join the Pack" CTA band (reusable) ---- */
.hpf-joinpack { padding: clamp(30px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.hpf-joinpack__wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-joinpack__card { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: stretch; background: linear-gradient(150deg, var(--hrp-pink, #d46681), #c25874); border-radius: 22px; padding: clamp(26px, 3.6vw, 44px) clamp(24px, 3.6vw, 48px) clamp(22px, 3vw, 34px); overflow: hidden; }
.hpf-joinpack__title { font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.12; color: #fff; margin: 0 0 10px; }
.hpf-joinpack__text { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, .93); margin: 0 0 20px; max-width: 46ch; }
.hpf-joinpack__btn { display: inline-block; background: var(--hrp-gold, #e4b451); color: var(--hpf-ink, #1d2327); font-family: var(--hpf-font-head, "Quicksand", sans-serif); font-weight: 800; font-size: 15px; padding: 13px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .16); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.hpf-joinpack__btn:hover { background: var(--hrp-gold-deep, #cf9d35); color: var(--hpf-ink, #1d2327); transform: translateY(-2px); text-decoration: none; }
.hpf-joinpack__note { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 16px 0 0; max-width: 60ch; }
/* Image sits flush with the card's bottom edge (cancels the card's bottom padding). */
.hpf-joinpack__media { display: flex; align-items: flex-end; justify-content: flex-end; margin-bottom: calc(-1 * clamp(22px, 3vw, 34px)); }
.hpf-joinpack__media img { display: block; width: 100%; max-width: 260px; height: auto; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.hpf-mor-partner__grid { grid-template-columns: 1fr; }
	.hpf-mor-partner__media { order: -1; max-width: 520px; margin-inline: auto; }
	.hpf-joinpack__card { grid-template-columns: 1fr; text-align: center; }
	.hpf-joinpack__text, .hpf-joinpack__note { margin-inline: auto; }
	.hpf-joinpack__media { justify-content: center; order: -1; margin-bottom: 0; }
	.hpf-joinpack__media img { max-width: 190px; }
}
@media (max-width: 700px) {
	/* Store table → stacked cards (no cramped horizontal scroll). */
	.hpf-mor-stores__scroll { max-height: 560px; }
	.hpf-mor-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.hpf-mor-table tbody tr { display: block; background: #fff; border-radius: 10px; margin-bottom: 10px; padding: 6px 4px; }
	.hpf-mor-table tbody tr:nth-child(odd) { background: #fff; }
	.hpf-mor-table tbody th, .hpf-mor-table tbody td { display: flex; gap: 10px; justify-content: space-between; border-bottom: 0; padding: 7px 14px; font-size: 14px; }
	.hpf-mor-table tbody th::before, .hpf-mor-table tbody td::before { content: attr(data-label); flex: 0 0 auto; font-family: var(--mo-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mo-muted); }
	.hpf-mor-table tbody td { text-align: right; }
	.hpf-mor-why__item { grid-template-columns: 1fr; gap: 10px; }
}


/* =========================================================
 * LEGAL / POLICY PAGES  (.legal__pages)
 * Reusable document styling for Terms, Privacy, Refund, Shipping, … — add
 * "legal__pages" as an additional CSS class on the page's wrapper group block.
 * Typography-first: comfortable measure, clear heading rhythm, branded lists
 * and a card-style contact table.
 * =======================================================*/
/* Document header — the page title lives outside .legal__pages (it's rendered by
 * the template), so it's scoped with the `hpf-legal-page` body class that
 * hpf_legal_body_class() adds to pages using the wrapper. */
.hpf-legal-page .hpf-entry__header {
	max-width: 880px;
	margin: 0 auto clamp(24px, 4vw, 42px);
	padding: clamp(10px, 2vw, 22px) clamp(4px, 2vw, 16px) clamp(20px, 3vw, 30px);
	text-align: center;
	border-bottom: 1px solid var(--hpf-border, #e6eeed);
}
.hpf-legal-page .hpf-entry__title {
	font-family: var(--hpf-font-head, "Quicksand", sans-serif);
	font-weight: 700;
	letter-spacing: -0.5px;
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 1.12;
	color: var(--hpf-ink, #1d2327);
	margin: 0;
}
/* Branded accent rule under the title. */
.hpf-legal-page .hpf-entry__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: clamp(14px, 2vw, 20px) auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--hrp-teal, #60babf), var(--hrp-teal-deep, #3f989d));
}

.legal__pages {
	--lg-ink: var(--hpf-ink, #1d2327);
	--lg-muted: var(--hpf-muted, #5b6566);
	--lg-teal: var(--hrp-teal, #60babf);
	--lg-teal-deep: var(--hrp-teal-deep, #3f989d);
	--lg-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--lg-line: var(--hpf-border, #e6eeed);
	--lg-head: var(--hpf-font-head, "Quicksand", sans-serif);
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(4px, 1vw, 12px) clamp(4px, 2vw, 16px) clamp(30px, 5vw, 56px);
	color: var(--lg-muted);
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: break-word;
}
.legal__pages .wp-block-group__inner-container { max-width: none; }

/* ---- Headings ---- */
.legal__pages h2,
.legal__pages h3,
.legal__pages h4 {
	position: relative;
	font-family: var(--lg-head);
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.25;
	color: var(--lg-ink);
	padding-left: 16px;
	margin: clamp(34px, 4vw, 52px) 0 14px;
	scroll-margin-top: 100px;
}
.legal__pages h2 { font-size: clamp(21px, 2.6vw, 27px); }
.legal__pages h3 { font-size: clamp(19px, 2.2vw, 23px); }
.legal__pages h4 { font-size: 17px; }
.legal__pages h2::before,
.legal__pages h3::before,
.legal__pages h4::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	bottom: .22em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(var(--lg-teal), var(--lg-teal-deep));
}
.legal__pages > * > :is(h2, h3, h4):first-child { margin-top: 0; }

/* ---- Body copy ---- */
.legal__pages p { margin: 0 0 16px; }
.legal__pages p:last-child { margin-bottom: 0; }
.legal__pages strong, .legal__pages b { color: var(--lg-ink); font-weight: 700; }
.legal__pages em, .legal__pages i { color: var(--lg-ink); }
.legal__pages a { color: var(--lg-teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease; }
.legal__pages a:hover { color: var(--hrp-pink, #d46681); }
.legal__pages hr { border: 0; border-top: 1px solid var(--lg-line); margin: clamp(28px, 4vw, 44px) 0; }

/* ---- Lists (branded markers, generous spacing) ---- */
.legal__pages ul, .legal__pages ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.legal__pages li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.legal__pages li:last-child { margin-bottom: 0; }
.legal__pages ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .68em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lg-teal);
}
/* Nested level: hollow marker + indent */
.legal__pages ul ul { margin: 10px 0 4px; }
.legal__pages ul ul > li::before { background: transparent; border: 2px solid var(--lg-teal); width: 8px; height: 8px; top: .66em; }
/* Ordered lists keep numbers, in brand teal */
.legal__pages ol { counter-reset: hpf-legal; }
.legal__pages ol > li { counter-increment: hpf-legal; }
.legal__pages ol > li::before {
	content: counter(hpf-legal) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--lg-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--lg-teal-deep);
}

/* ---- Tables (e.g. the contact-details card) ---- */
.legal__pages table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	background: var(--lg-teal-soft);
	border: 1px solid var(--lg-line);
	border-radius: 14px;
	overflow: hidden;
	font-size: 15.5px;
}
.legal__pages table th,
.legal__pages table td { padding: clamp(16px, 2.4vw, 24px); text-align: left; vertical-align: top; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.legal__pages table tr:last-child th,
.legal__pages table tr:last-child td { border-bottom: 0; }
.legal__pages table th { font-family: var(--lg-head); font-weight: 700; color: var(--lg-ink); }
/* Free text before the nested <p>s reads as the card's title. */
.legal__pages table td { color: var(--lg-ink); font-family: var(--lg-head); font-weight: 700; }
.legal__pages table td p { color: var(--lg-muted); font-family: var(--hpf-font-body, "Nunito", sans-serif); font-weight: 400; margin: 10px 0 0; }
.legal__pages table td p:first-of-type { margin-top: 14px; }

/* ---- Blockquote ---- */
.legal__pages blockquote { margin: 0 0 20px; padding: 4px 0 4px 18px; border-left: 3px solid var(--lg-teal); }
.legal__pages blockquote p { font-style: italic; color: var(--lg-teal-deep); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.legal__pages { font-size: 15.5px; line-height: 1.75; }
	.legal__pages h2, .legal__pages h3, .legal__pages h4 { padding-left: 13px; }
	.legal__pages li { padding-left: 22px; }
	/* Wide multi-column tables stay usable */
	.legal__pages table { display: block; overflow-x: auto; }
}


/* =========================================================
 * OUR LOCATIONS PAGE (pages/page-our-locations.php). Scoped .hpf-loc.
 * Header + stacked "where to buy" cards (copy left, media right).
 * =======================================================*/
.hpf-loc {
	--lo-teal: var(--hrp-teal, #60babf);
	--lo-teal-deep: var(--hrp-teal-deep, #3f989d);
	--lo-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--lo-ink: var(--hpf-ink, #1d2327);
	--lo-muted: var(--hpf-muted, #5b6566);
	--lo-head: var(--hpf-font-head, "Quicksand", sans-serif);
	background: #f4f6f6;
	overflow-x: clip;
}
.hpf-main.hpf-loc { max-width: 100%; padding: 0 0 clamp(40px, 6vw, 80px); }
.hpf-loc-wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-loc h1, .hpf-loc h2 { font-family: var(--lo-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Header ---- */
.hpf-loc-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(28px, 4vw, 48px); text-align: center; }
.hpf-loc-hero__title { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; color: var(--lo-ink); margin: 0 auto 14px; }
.hpf-loc-hero__sub { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: var(--lo-muted); margin: 0 auto; max-width: 62ch; }

/* ---- Location cards ---- */
/* The cards live in the inner wrap, so the stack spacing belongs there. */
.hpf-loc-list > .hpf-loc-wrap { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }
.hpf-loc-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	background: #fff;
	border-radius: 14px;
	padding: clamp(24px, 3.4vw, 46px);
	box-shadow: 0 4px 18px rgba(29, 35, 39, .06);
	transition: transform .3s var(--hpf-ease, ease), box-shadow .3s ease;
}
.hpf-loc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13, 95, 89, .13); }
.hpf-loc-card__title { font-size: clamp(22px, 2.9vw, 32px); line-height: 1.18; color: var(--lo-ink); margin: 0 0 14px; }
.hpf-loc-card__text { font-size: 15px; line-height: 1.65; color: var(--lo-muted); margin: 0 0 24px; }
.hpf-loc-card__btn {
	display: inline-block;
	background: var(--lo-teal-deep, #3f989d);
	color: #fff;
	font-family: var(--lo-head);
	font-weight: 700;
	font-size: 15px;
	padding: 11px 26px;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(63, 152, 157, .26);
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hpf-loc-card__btn:hover { background: var(--hpf-teal-dark, #0d5f59); color: #fff; transform: translateY(-2px); text-decoration: none; box-shadow: 0 12px 26px rgba(13, 95, 89, .28); }
.hpf-loc-card__media { overflow: hidden; border-radius: 10px; }
.hpf-loc-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--hpf-ease, ease); }
.hpf-loc-card:hover .hpf-loc-card__media img { transform: scale(1.03); }
/* Logo-style media (e.g. Amazon) — contained, never cropped or zoomed. */
.hpf-loc-card__media--contain { display: flex; align-items: center; justify-content: center; }
.hpf-loc-card__media--contain img { width: min(360px, 78%); aspect-ratio: auto; object-fit: contain; }
.hpf-loc-card:hover .hpf-loc-card__media--contain img { transform: none; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
	.hpf-loc-card { grid-template-columns: 1fr; gap: 22px; }
	.hpf-loc-card__media { order: -1; }
	.hpf-loc-card__media--contain img { width: min(280px, 70%); }
}


/* =========================================================
 * OUR STORY PAGE (pages/page-our-story.php). Scoped .hpf-story.
 * Reuses the .hpf-hn-video facade base and the global press marquee.
 * =======================================================*/
.hpf-story {
	--st-teal: var(--hrp-teal, #60babf);
	--st-teal-deep: var(--hrp-teal-deep, #3f989d);
	--st-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--st-pink: var(--hrp-pink, #d46681);
	--st-gold: var(--hrp-gold, #e4b451);
	--st-gold-deep: var(--hrp-gold-deep, #cf9d35);
	--st-gold-soft: var(--hrp-gold-soft, #fbf2db);
	--st-ink: var(--hpf-ink, #1d2327);
	--st-muted: var(--hpf-muted, #5b6566);
	--st-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-story { max-width: 100%; padding: 0; }
.hpf-story-wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-story h1, .hpf-story h2 { font-family: var(--st-head); font-weight: 700; letter-spacing: -0.3px; }
.hpf-story-h2 { font-size: clamp(23px, 2.9vw, 32px); line-height: 1.18; color: var(--st-ink); margin: 0 0 16px; }
.hpf-story-h2--center { text-align: center; margin-inline: auto; }
.hpf-story-link { color: var(--st-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.hpf-story-link:hover { color: var(--st-pink); }

/* ---- Hero ---- */
.hpf-story-hero { padding: clamp(34px, 5vw, 62px) 0 clamp(24px, 3.4vw, 40px); text-align: center; }
.hpf-story-hero__title { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; color: var(--st-ink); margin: 0 0 12px; }
.hpf-story-hero__sub { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; color: var(--st-muted); margin: 0 auto; max-width: 66ch; }

/* ---- Journey / Impact (copy + media) ---- */
.hpf-story-journey, .hpf-story-impact { padding: clamp(24px, 3.4vw, 44px) 0; }
.hpf-story-journey__grid, .hpf-story-impact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.hpf-story-journey__copy p, .hpf-story-impact__copy p, .hpf-story-eco__copy p { font-size: 14.5px; line-height: 1.7; color: var(--st-muted); margin: 0 0 14px; }
.hpf-story-journey__copy p:last-child, .hpf-story-impact__copy p:last-child, .hpf-story-eco__copy p:last-child { margin-bottom: 0; }
.hpf-story-journey__media img, .hpf-story-impact__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 40px rgba(13, 95, 89, .14); }

/* ---- Trusted ingredients strip ---- */
.hpf-story-stats { padding: clamp(26px, 4vw, 50px) 0; }
.hpf-story-stats__sub { text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--st-muted); margin: 0 auto clamp(22px, 3vw, 34px); max-width: 60ch; }
.hpf-story-stats__list { list-style: none; margin: 0; padding: clamp(20px, 3vw, 30px) clamp(10px, 2vw, 20px); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--st-gold-soft); border-radius: 8px; }
.hpf-story-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 6px 16px; }
.hpf-story-stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56px; background: rgba(0, 0, 0, .1); }
/* Brand-coloured icons via CSS mask (same set as the Composition strip). */
.hpf-story-stat__icon { width: 34px; height: 34px; display: inline-block; -webkit-mask: var(--s-icon) center / contain no-repeat; mask: var(--s-icon) center / contain no-repeat; transition: transform .28s var(--hpf-ease, ease); }
.hpf-story-stat:hover .hpf-story-stat__icon { transform: translateY(-3px) scale(1.06); }
.hpf-story-stat__icon--teal { background-color: var(--st-teal-deep); }
.hpf-story-stat__icon--gold { background-color: var(--st-gold-deep); }
.hpf-story-stat__icon--pink { background-color: var(--st-pink); }
.hpf-story-stat__label { font-size: 13px; line-height: 1.4; color: var(--st-ink); max-width: 18ch; }

/* ---- Eco-friendly packaging ---- */
.hpf-story-eco { padding: clamp(24px, 3.6vw, 48px) 0; }
/* Modern treatment: soft gradient card, pack on a glow, floating accents. */
.hpf-story-eco__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(20px, 4vw, 56px);
	align-items: center;
	background: linear-gradient(135deg, var(--st-teal-soft) 0%, #f7fbf8 46%, #fdf6ea 100%);
	border: 1px solid rgba(63, 152, 157, .14);
	border-radius: 26px;
	padding: clamp(24px, 3.6vw, 46px) clamp(22px, 3.6vw, 52px);
	overflow: hidden;
}
/* Decorative corner wash. */
.hpf-story-eco__card::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -90px;
	right: -70px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(96, 186, 191, .2), transparent 72%);
	pointer-events: none;
}
.hpf-story-eco__media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.hpf-story-eco__glow { position: absolute; z-index: 0; width: min(250px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%); }
.hpf-story-eco__media img { position: relative; z-index: 1; display: block; width: 100%; max-width: 240px; height: auto; filter: drop-shadow(0 22px 34px rgba(13, 95, 89, .2)); }
/* Floating accent dots */
.hpf-story-eco__dot { position: absolute; z-index: 2; border-radius: 50%; }
.hpf-story-eco__dot--a { width: 14px; height: 14px; background: var(--st-teal); top: 8%; right: 12%; box-shadow: 0 6px 14px rgba(96, 186, 191, .45); }
.hpf-story-eco__dot--b { width: 22px; height: 22px; border: 5px solid rgba(228, 180, 81, .5); bottom: 12%; left: 6%; }
@media (prefers-reduced-motion: no-preference) {
	.hpf-story-eco__media img { animation: hpf-hey-float 6s ease-in-out infinite; }
	.hpf-story-eco__dot { animation: hpf-hey-float 5s ease-in-out infinite; }
	.hpf-story-eco__dot--b { animation-delay: -2.5s; }
}
.hpf-story-eco__copy { position: relative; z-index: 1; }
.hpf-story-eco__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid rgba(63, 152, 157, .2);
	color: var(--st-teal-deep);
	font-family: var(--st-head);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 7px 15px;
	border-radius: 999px;
	box-shadow: 0 6px 14px rgba(13, 95, 89, .07);
	margin-bottom: 14px;
}

/* ---- Global stage (pink band + video) ---- */
.hpf-story-global { background: var(--st-pink); color: #fff; padding: clamp(34px, 5vw, 56px) 0 clamp(30px, 4.4vw, 50px); }
.hpf-story-global__head { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.hpf-story-global__title { font-size: clamp(23px, 3vw, 34px); line-height: 1.16; color: #fff; margin: 0 0 12px; }
.hpf-story-global__text { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .94); margin: 0 auto; max-width: 82ch; }
.hpf-story-video { width: 100%; max-width: none; border-radius: 4px; box-shadow: 0 20px 44px rgba(0, 0, 0, .22); }

/* ---- Press marquee tweak (scoped to this page) ---- */
.hpf-story-press .press { border-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.hpf-story-journey__grid, .hpf-story-impact__grid, .hpf-story-eco__card { grid-template-columns: 1fr; }
	.hpf-story-journey__media, .hpf-story-impact__media, .hpf-story-eco__media { order: -1; max-width: 520px; margin-inline: auto; }
	.hpf-story-eco__media img { margin-inline: auto; max-width: 200px; }
	.hpf-story-eco__copy { text-align: center; }
	.hpf-story-eco__dot--a { right: 20%; }
	.hpf-story-eco__dot--b { left: 18%; }
	.hpf-story-stats__list { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
	.hpf-story-stat:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
	.hpf-story-stats__list { grid-template-columns: 1fr; }
	.hpf-story-stat::after { display: none !important; }
}


/* =========================================================
 * STATUS / TRANSACTIONAL PAGES (.hpf-status) — the global message layout used
 * by Payment Failed, Thank You (distributor), … Rendered by
 * hpf_status_message(); the page <main> carries .hpf-status-page.
 * =======================================================*/
.hpf-main.hpf-status-page { max-width: 100%; padding: 0; }
.hpf-status {
	padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 60px);
	min-height: min(70vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hpf-status__inner { max-width: 760px; margin: 0 auto; }
.hpf-status__icon { display: block; width: clamp(72px, 9vw, 94px); height: auto; margin: 0 auto clamp(20px, 3vw, 30px); }
.hpf-status__title {
	font-family: var(--hpf-font-head, "Quicksand", sans-serif);
	font-weight: 700;
	font-size: clamp(24px, 4.4vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: #373737;
	margin: 0 auto clamp(18px, 2.6vw, 26px);
	max-width: 20ch;
}
.hpf-status__text { font-size: clamp(14px, 1.7vw, 16.5px); line-height: 1.7; color: var(--hpf-muted, #5b6566); margin: 0 auto 6px; max-width: 68ch; }
.hpf-status__text:last-child { margin-bottom: 0; }
.hpf-status__link { color: var(--hrp-teal-deep, #3f989d); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.hpf-status__link:hover { color: var(--hrp-pink, #d46681); }

/* Gentle attention pulse on the icon (transform only). */
@media (prefers-reduced-motion: no-preference) {
	.hpf-status__icon { animation: hpf-status-pop .5s cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes hpf-status-pop {
	from { transform: scale(.82); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}


/* =========================================================
 * REVIEWS PAGE (pages/page-reviews.php). Scoped .hpf-rev.
 * Hero + the reusable Trustpilot carousel + the multi-step CF7 story form
 * (.hf-steps, behaviour in assets/js/reviews-form.js).
 * =======================================================*/
.hpf-rev {
	--rv-teal: var(--hrp-teal, #60babf);
	--rv-teal-deep: var(--hrp-teal-deep, #3f989d);
	--rv-pink: var(--hrp-pink, #d46681);
	--rv-pink-soft: var(--hrp-pink-soft, #fbeef1);
	--rv-gold: var(--hrp-gold, #e4b451);
	--rv-gold-deep: var(--hrp-gold-deep, #cf9d35);
	--rv-ink: var(--hpf-ink, #1d2327);
	--rv-muted: var(--hpf-muted, #5b6566);
	--rv-line: var(--hpf-border, #e6eeed);
	--rv-head: var(--hpf-font-head, "Quicksand", sans-serif);
	overflow-x: clip;
}
.hpf-main.hpf-rev { max-width: 100%; padding: 0; }
.hpf-rev-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); }
.hpf-rev h1, .hpf-rev h2 { font-family: var(--rv-head); font-weight: 700; letter-spacing: -0.3px; }

/* ---- Hero ---- */
.hpf-rev-hero { padding: clamp(36px, 5vw, 68px) 0 clamp(26px, 3.6vw, 44px); text-align: center; }
.hpf-rev-hero__title { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; color: var(--rv-ink); margin: 0 0 12px; }
.hpf-rev-hero__sub { font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; color: var(--rv-muted); margin: 0 auto; max-width: 56ch; }

/* ---- Testimonials band ---- */
.hpf-rev-testimonials { background: #f5f5f5; }

/* ---- Share your story ---- */
.hpf-rev-share { position: relative; overflow: hidden; }
.hpf-rev-share__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hpf-rev-share__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(40px, 6vw, 84px); }
.hpf-rev-share__title { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.12; color: var(--rv-ink); margin: 0 0 14px; }
.hpf-rev-share__text { font-size: clamp(14px, 1.7vw, 16.5px); line-height: 1.6; color: var(--rv-muted); margin: 0; max-width: 42ch; }
.hpf-rev-share__form { grid-column: 1; }
.hpf-rev-share__copy { grid-column: 1; }

/* =========================================================
 * Multi-step form (.hf-steps) — reusable wherever the CF7 markup is used.
 * =======================================================*/
.hf-steps { max-width: 640px; }
/* ---- Progress indicators ---- */
.hf-indicators { display: flex; align-items: flex-start; margin: 0 0 22px; }
.hf-ind { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; text-align: center; cursor: default; }
.hf-ind-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--rv-pink); color: #fff; display: inline-flex; align-items: center; justify-content: center; opacity: .38; transition: opacity .25s ease, transform .25s var(--hpf-ease, ease), box-shadow .25s ease; }
.hf-ind-icon svg { width: 16px; height: 15px; display: block; }
.hf-ind label { font-family: var(--rv-head); font-weight: 700; font-size: 12.5px; line-height: 1.25; color: var(--rv-muted); max-width: 15ch; transition: color .25s ease; cursor: inherit; }
.hf-ind.is-active .hf-ind-icon, .hf-ind.is-done .hf-ind-icon { opacity: 1; box-shadow: 0 6px 14px rgba(212, 102, 129, .3); }
.hf-ind.is-active .hf-ind-icon { transform: scale(1.06); }
.hf-ind.is-active label, .hf-ind.is-done label { color: var(--rv-gold-deep); }
.hf-ind.is-done { cursor: pointer; }
.hf-sep { flex: 1 1 auto; height: 2px; background: var(--rv-line); border-radius: 2px; margin: 14px 6px 0; }

/* ---- Steps ---- */
.hf-step { display: none; }
.hf-step.is-active { display: block; background: #fff; border: 1px solid var(--rv-line); border-radius: 12px; padding: clamp(18px, 2.6vw, 26px); box-shadow: 0 10px 30px rgba(29, 35, 39, .07); animation: hpf-hf-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes hpf-hf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hf-step.is-active { animation: none; } }

/* ---- Fields ---- */
.hf-label { display: block; font-family: var(--rv-head); font-weight: 700; font-size: 13.5px; color: var(--rv-ink); margin: 0 0 14px; }
.hf-req { color: var(--rv-pink); }
.hf-steps .hf-field,
.hf-steps input[type="text"], .hf-steps input[type="email"], .hf-steps select, .hf-steps textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 14px;
	border: 1px solid var(--rv-line);
	border-radius: 8px;
	font: inherit;
	font-family: var(--hpf-font-body, "Nunito", sans-serif);
	font-weight: 400;
	font-size: 14.5px;
	color: var(--rv-ink);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hf-steps textarea { resize: vertical; min-height: 104px; }
.hf-steps .hf-field:focus, .hf-steps input:focus, .hf-steps select:focus, .hf-steps textarea:focus { outline: none; border-color: var(--rv-teal); box-shadow: 0 0 0 3px rgba(96, 186, 191, .22); }
.hf-steps input[type="file"] { padding: 8px 10px; font-size: 13px; }
/* Validation state */
.hf-steps .hf-invalid, .hf-steps .wpcf7-not-valid { border-color: var(--rv-pink) !important; box-shadow: 0 0 0 3px rgba(212, 102, 129, .16); }
.hf-error, .hf-steps .wpcf7-not-valid-tip { display: block; font-size: 12px; font-weight: 600; color: var(--rv-pink); margin-top: 5px; }
.hf-error:empty { display: none; }

/* Defensive: if CF7's autop ever runs, neutralise the injected <p>/<br> so the
 * step layout (and the button row) still holds together. */
.hf-steps p { margin: 0; display: contents; }
.hf-steps br { display: none; }

/* ---- Buttons ---- */
.hf-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.hf-buttons .hf-prev { order: 0; }
.hf-buttons .hf-next, .hf-buttons .wpcf7-submit { order: 1; }
.hf-steps .hf-btn, .hf-steps input[type="submit"].hf-btn, .hf-steps .wpcf7-submit {
	appearance: none;
	background: var(--rv-gold);
	color: var(--rv-ink);
	font-family: var(--rv-head);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	padding: 11px 26px;
	/* Transparent border keeps every button the same height as .hf-prev,
	 * which needs a real 1px outline. */
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(228, 180, 81, .3);
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hf-steps .hf-btn:hover, .hf-steps .wpcf7-submit:hover { background: var(--rv-gold-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(228, 180, 81, .38); }
.hf-steps .hf-prev { background: #fff; color: var(--rv-ink); border-color: var(--rv-line); box-shadow: none; }
.hf-steps .hf-prev:hover { background: #f6f8f8; border-color: var(--rv-gold); }
.hf-steps .wpcf7-spinner { margin: 0 0 0 8px; align-self: center; }
.hpf-rev-share__form .wpcf7-response-output { margin: 16px 0 0; border-radius: 8px; font-size: 13.5px; background: #fff; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hpf-rev-share__bg { object-position: 72% center; }
	.hpf-rev-share__inner { grid-template-columns: 1fr; }
	/* Keep the copy + form legible over the photo. */
	.hpf-rev-share__copy, .hpf-rev-share__form { background: rgba(255, 255, 255, .86); border-radius: 12px; padding: clamp(14px, 3vw, 20px); backdrop-filter: blur(2px); }
	.hf-steps { max-width: none; }
}
@media (max-width: 560px) {
	.hf-indicators { gap: 2px; }
	.hf-ind label { font-size: 11px; max-width: 11ch; }
	.hf-sep { margin-top: 13px; }
	.hf-buttons .hf-btn, .hf-buttons .wpcf7-submit { flex: 1 1 auto; }
}


/* =========================================================
 * SOY-FREE PAGE (pages/page-soy-free.php). Scoped .hpf-soy.
 * Extends the .hpf-lp landing-page set with three page-specific sections:
 * the "gentle on digestion" callout stage, the promise carousel and the
 * halal band.
 * =======================================================*/
.hpf-soy { --sy-pink: var(--hrp-pink, #d46681); --sy-gold: var(--hrp-gold, #e4b451); }

/* ---- Gentle on digestion (image + floating callouts) ---- */
.hpf-soy-gentle { background: #e2f1f0; padding: clamp(38px, 5vw, 70px) 0 clamp(24px, 3.4vw, 44px); }
.hpf-soy-gentle__head { text-align: center; max-width: 720px; margin: 0 auto; }
.hpf-soy-gentle__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.15; color: var(--lp-ink); margin: 0 0 12px; }
.hpf-soy-gentle__text { font-size: clamp(13.5px, 1.6vw, 15.5px); line-height: 1.65; color: var(--lp-muted); margin: 0; }

.hpf-soy-stage { position: relative; max-width: 920px; margin: clamp(18px, 2.6vw, 30px) auto 0; }
.hpf-soy-stage__img { display: block; width: min(560px, 78%); height: auto; margin: 0 auto; }
.hpf-soy-notes { list-style: none; margin: 0; padding: 0; }
.hpf-soy-note { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 10px; width: 230px; background: #fff; border-radius: 10px; padding: 12px 15px; box-shadow: 0 10px 28px rgba(29, 35, 39, .12); }
.hpf-soy-note__ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--sy-pink); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.hpf-soy-note__txt strong { display: block; font-family: var(--lp-head); font-size: 13.5px; line-height: 1.25; color: var(--lp-ink); margin-bottom: 3px; }
.hpf-soy-note__txt > span { font-size: 12.5px; line-height: 1.45; color: var(--lp-muted); }
/* Desktop scatter (matches the reference) */
.hpf-soy-note--0 { top: 34%; left: 0; }
.hpf-soy-note--1 { top: 6%; right: 2%; }
.hpf-soy-note--2 { bottom: 6%; right: 6%; }
@media (prefers-reduced-motion: no-preference) {
	.hpf-soy-note { animation: hpf-hey-float 6s ease-in-out infinite; }
	.hpf-soy-note--1 { animation-delay: -2s; }
	.hpf-soy-note--2 { animation-delay: -4s; }
}

/* ---- Hypoallergenic (heading left / copy right) ---- */
.hpf-soy-hypo { padding: clamp(34px, 5vw, 66px) 0; }
.hpf-soy-hypo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.hpf-soy-hypo__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.16; color: var(--lp-ink); margin: 0; }
.hpf-soy-hypo__copy p { font-size: 14.5px; line-height: 1.7; color: var(--lp-muted); margin: 0 0 14px; }
.hpf-soy-hypo__copy p:last-child { margin-bottom: 0; }

/* ---- The Hurayra promise (teal band + carousel) ---- */
.hpf-soy-promise { background: var(--lp-accent); color: #fff; padding: clamp(38px, 5.5vw, 72px) 0; }
.hpf-soy-promise__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: clamp(24px, 3.4vw, 40px); }
.hpf-soy-promise__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: #fff; margin: 0; max-width: 18ch; }
.hpf-soy-promise__text { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .92); margin: 0; }
/* Modern promise cards: solid white tiles with a gradient icon chip. A grid
 * (not a carousel) — everything is visible at once and nothing overlaps. */
.hpf-soy-promise__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.hpf-soy-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px 24px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
	overflow: hidden;
	transition: transform .28s var(--hpf-ease, ease), box-shadow .28s ease;
}
.hpf-soy-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--sy-card-a), var(--sy-card-b)); }
.hpf-soy-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0, 0, 0, .18); }
.hpf-soy-card--pink { --sy-card-a: var(--hrp-pink, #d46681); --sy-card-b: #c25874; }
.hpf-soy-card--gold { --sy-card-a: var(--hrp-gold, #e4b451); --sy-card-b: var(--hrp-gold-deep, #cf9d35); }
.hpf-soy-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, var(--sy-card-a), var(--sy-card-b)); color: #fff; margin-bottom: 16px; box-shadow: 0 8px 18px rgba(0, 0, 0, .14); transition: transform .3s var(--hpf-ease, ease); }
.hpf-soy-card:hover .hpf-soy-card__icon { transform: translateY(-2px) rotate(-6deg); }
.hpf-soy-card__title { font-family: var(--lp-head); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--lp-ink); margin: 0 0 8px; }
.hpf-soy-card__text { font-size: 13.5px; line-height: 1.6; color: var(--lp-muted); margin: 0; }

/* ---- Halal band ---- */
.hpf-soy-halal { background: var(--sy-pink); color: #fff; padding: clamp(38px, 5.5vw, 72px) 0; }
.hpf-soy-halal__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hpf-soy-halal__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.14; color: #fff; margin: 0 0 14px; max-width: 20ch; }
.hpf-soy-halal__text { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .92); margin: 0 0 22px; max-width: 52ch; }
.hpf-soy-halal__list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.hpf-soy-halal__item { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--lp-ink); border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); transition: transform .25s var(--hpf-ease, ease); }
.hpf-soy-halal__item:hover { transform: translateX(4px); }
.hpf-soy-halal__ic { flex: 0 0 auto; color: var(--lp-accent-deep); display: inline-flex; }
.hpf-soy-halal__media img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .22)); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hpf-soy-hypo__grid, .hpf-soy-promise__head, .hpf-soy-halal__grid { grid-template-columns: 1fr; }
	.hpf-soy-halal__media { order: -1; max-width: 340px; margin-inline: auto; }
	.hpf-soy-halal__title, .hpf-soy-halal__text { max-width: none; }
	/* Callouts stack under the photo instead of overlapping it. */
	.hpf-soy-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; }
	.hpf-soy-stage__img { width: min(340px, 82%); }
	.hpf-soy-notes { display: flex; flex-direction: column; gap: 12px; width: 100%; }
	.hpf-soy-note { position: static; width: 100%; animation: none; }
}


/* =========================================================
 * UAE PAGE (pages/page-uae.php). Scoped .hpf-uae.
 * Reuses the retail-partner layout from the Morrisons page (.hpf-mor-*) and
 * the global Join the Pack CTA; only these bits are page-specific.
 * =======================================================*/
.hpf-uae-hl { color: var(--mo-teal, #60babf); }

/* ---- Trusted retailers ---- */
.hpf-uae-retailers { padding: clamp(36px, 5vw, 72px) 0 clamp(30px, 4vw, 52px); }
.hpf-uae-retailers__title { text-align: center; font-family: var(--mo-head); font-weight: 700; letter-spacing: -0.3px; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.14; color: var(--mo-ink); margin: 0 auto 10px; max-width: 20ch; }
.hpf-uae-retailers__sub { text-align: center; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; color: var(--mo-muted); margin: 0 auto clamp(22px, 3vw, 34px); max-width: 48ch; }
.hpf-uae-logos {
	list-style: none;
	margin: 0 auto;
	padding: clamp(22px, 3vw, 34px) clamp(14px, 2.6vw, 30px);
	max-width: 940px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	background: var(--mo-gold-soft, #fbf2db);
	border-radius: 10px;
}
.hpf-uae-logo { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 18px; }
.hpf-uae-logo:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 46px; background: rgba(0, 0, 0, .14); }
.hpf-uae-logo a { display: inline-flex; align-items: center; justify-content: center; }
.hpf-uae-logo img { display: block; width: auto; max-width: 100%; max-height: 46px; height: auto; transition: transform .25s var(--hpf-ease, ease), opacity .25s ease; }
.hpf-uae-logo a:hover img { transform: translateY(-3px) scale(1.04); }

/* ---- Responsive ---- */
@media (max-width: 620px) {
	.hpf-uae-logos { grid-template-columns: 1fr; gap: 22px 0; }
	.hpf-uae-logo:not(:last-child)::after { top: auto; bottom: -11px; right: auto; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; }
	.hpf-uae-logo img { max-height: 40px; }
}


/* =========================================================
 * WHEAT-FREE PAGE (pages/page-wheat-free.php). Scoped .hpf-wheat.
 * Reuses the .hpf-lp set + the Soy-Free callout stage (.hpf-soy-*); only the
 * halal steps card and the "pure formula" band are page-specific.
 * =======================================================*/
/* Compact callouts (label only) on this page. */
.hpf-wheat-notes .hpf-soy-note { width: auto; max-width: 250px; align-items: center; }
.hpf-wheat-notes .hpf-soy-note__txt strong { margin-bottom: 0; }

/* ---- Halal-certified steps card (pink) ---- */
.hpf-wheat-halal { padding: clamp(30px, 4.4vw, 58px) 0; }
.hpf-wheat-halal__card { background: linear-gradient(150deg, var(--hrp-pink, #d46681), #c95b78); color: #fff; border-radius: 12px; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 54px); text-align: center; }
.hpf-wheat-halal__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(23px, 3.2vw, 34px); line-height: 1.18; color: #fff; margin: 0 auto 14px; max-width: 24ch; }
.hpf-wheat-halal__text { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .93); margin: 0 auto clamp(26px, 3.6vw, 40px); max-width: 78ch; }
.hpf-wheat-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
/* Connecting rule behind the dots. */
.hpf-wheat-steps::before { content: ""; position: absolute; top: 19px; left: 16%; right: 16%; height: 2px; background: rgba(255, 255, 255, .45); z-index: 0; }
.hpf-wheat-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.hpf-wheat-step__dot { width: 38px; height: 38px; border-radius: 50%; background: var(--hrp-teal, #60babf); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: transform .28s var(--hpf-ease, ease); }
.hpf-wheat-step:hover .hpf-wheat-step__dot { transform: scale(1.08); }
.hpf-wheat-step__label { font-family: var(--lp-head); font-weight: 700; font-size: 13.5px; line-height: 1.35; color: #fff; max-width: 16ch; }

/* ---- Pure formula band (teal) ---- */
.hpf-wheat-pure { background: var(--lp-accent); color: #fff; padding: clamp(34px, 5vw, 66px) 0; }
.hpf-wheat-pure__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hpf-wheat-pure__title { font-family: var(--lp-head); font-weight: 700; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.14; color: #fff; margin: 0 0 16px; max-width: 18ch; }
.hpf-wheat-pure__copy p { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .92); margin: 0 0 14px; max-width: 52ch; }
.hpf-wheat-pure__copy p:last-child { margin-bottom: 0; }
.hpf-wheat-pure__media img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .22)); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hpf-wheat-pure__grid { grid-template-columns: 1fr; }
	.hpf-wheat-pure__media { order: -1; max-width: 320px; margin-inline: auto; }
	.hpf-wheat-pure__title, .hpf-wheat-pure__copy p { max-width: none; }
}
@media (max-width: 620px) {
	.hpf-wheat-steps { grid-template-columns: 1fr; gap: 22px; }
	.hpf-wheat-steps::before { display: none; }
	.hpf-wheat-step__label { max-width: none; }
}


/* =========================================================
 * WHY HALAL PAGE (pages/page-why-halal.php). Scoped .hpf-wh.
 * Rides on the Halal Nutrition section set (.hpf-hn-*) — same layouts, new
 * copy — so only the page-specific sections live here.
 * =======================================================*/
.hpf-main.hpf-wh { max-width: 100%; padding: 0; }
.hpf-wh { --wh-pink-deep: #c15570; }
/* Site chrome is present here (unlike the standalone landing page), so the
   hero needs a little less top padding. */
.hpf-wh .hpf-hn-hero__inner { min-height: clamp(400px, 44vw, 560px); padding-block: clamp(48px, 6vw, 78px) clamp(40px, 5vw, 66px); }

/* ---- Shared check chip (white-on-colour variant) ---- */
.hpf-wh-checks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hpf-wh-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: #fff; }
.hpf-wh-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---- Meat derivatives (pink card) ---- */
.hpf-wh-meat { padding: clamp(34px, 4.6vw, 62px) 0; }
.hpf-wh-meat__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 54px); align-items: center; background: linear-gradient(145deg, var(--hn-pink, #d46681), var(--wh-pink-deep, #c15570)); border-radius: 24px; padding: clamp(28px, 4vw, 54px); overflow: hidden; }
.hpf-wh-meat__title { font-size: clamp(23px, 3.2vw, 36px); line-height: 1.15; color: #fff; margin: 0 0 16px; max-width: 20ch; }
.hpf-wh-meat__copy p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .92); margin: 0 0 14px; max-width: 54ch; }
.hpf-wh-meat__lead { font-weight: 700; color: #fff !important; }
.hpf-wh-meat__note { font-size: 14px !important; font-style: italic; color: rgba(255, 255, 255, .85) !important; margin: 0 !important; }
.hpf-wh-meat__media img { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .26)); }

/* ---- Scholarly guidance carousel ---- */
.hpf-wh-guidance { background: var(--hn-teal-soft, #e7f4f5); padding: clamp(44px, 6vw, 82px) 0; }
.hpf-wh-guidance__carousel { max-width: 1080px; margin: 0 auto; }
/* Two cards per view on desktop. Below 900px the global carousel rules take
   over (one card + peek, arrows centred beneath), so these must not leak. */
@media (min-width: 901px) {
	.hpf-wh-guidance__carousel .hpf-carousel__track > * { flex-basis: calc((100% - 22px) / 2); }
	.hpf-wh-guidance__carousel .hpf-carousel__arrow--prev { left: -18px; }
	.hpf-wh-guidance__carousel .hpf-carousel__arrow--next { right: -18px; }
}

.hpf-wh-card { display: flex; flex-direction: column; border-radius: 22px; padding: clamp(24px, 3vw, 38px); color: #fff; box-shadow: 0 18px 44px rgba(13, 60, 62, .14); }
.hpf-wh-card--pink { background: linear-gradient(150deg, var(--hn-pink, #d46681), var(--wh-pink-deep, #c15570)); }
.hpf-wh-card--gold { background: linear-gradient(150deg, var(--hn-gold, #e4b451), var(--hn-gold-deep, #cf9d35)); }
.hpf-wh-card__title { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.22; color: #fff; margin: 0 0 12px; }
.hpf-wh-card__intro { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .92); margin: 0 0 20px; }
.hpf-wh-card__quote { margin: 0 0 18px; background: rgba(255, 255, 255, .16); border-left: 3px solid rgba(255, 255, 255, .6); border-radius: 0 12px 12px 0; padding: 16px 20px; }
.hpf-wh-card__quote p { font-size: 15px; line-height: 1.6; font-weight: 600; color: #fff; margin: 0 0 8px; }
.hpf-wh-card__quote cite { font-family: var(--hn-head); font-style: normal; font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .88); }
.hpf-wh-card__note { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .24); }

/* ---- Choosing halal (image first) ---- */
.hpf-wh-choosing { background: #fff; }
.hpf-wh-choosing .hpf-hn-important__media { order: -1; }

/* ---- FAQ band: pink on this page (gold on Halal Nutrition) ---- */
.hpf-wh-faq { background: linear-gradient(160deg, var(--hn-pink, #d46681), var(--wh-pink-deep, #c15570)); }
.hpf-wh-faq .hpf-hn-faq__title { color: #fff; }
.hpf-wh-faq .hpf-faq { --hpf-faq-num-bg: var(--wh-pink-deep, #c15570); --hpf-faq-num-color: #fff; --hpf-faq-item-bg: rgba(255, 255, 255, .88); --hpf-faq-item-bg-hover: rgba(255, 255, 255, .96); --hpf-faq-item-bg-open: #fff; --hpf-faq-item-border: 1px solid rgba(255, 255, 255, .7); }

/* ---- Closing CTA ---- */
.hpf-wh-cta { padding: clamp(38px, 5vw, 72px) 0 clamp(44px, 6vw, 84px); }
.hpf-wh-cta__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; background: linear-gradient(135deg, var(--hn-teal-deep, #3f989d), var(--hn-teal, #4bb0ae)); border-radius: 24px; padding: clamp(28px, 4vw, 52px); overflow: hidden; }
.hpf-wh-cta__title { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.12; color: #fff; margin: 0 0 12px; }
.hpf-wh-cta__title span { display: block; color: var(--hn-gold, #e4b451); }
.hpf-wh-cta__text { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, .92); margin: 0 0 clamp(20px, 3vw, 28px); }
.hpf-wh-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hpf-wh-cta__media img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; border-radius: 18px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hpf-wh-meat__card, .hpf-wh-cta__card { grid-template-columns: 1fr; }
	.hpf-wh-meat__media { order: -1; max-width: 300px; margin-inline: auto; }
	.hpf-wh-meat__title, .hpf-wh-meat__copy p { max-width: none; }
	.hpf-wh-cta__media { order: -1; max-width: 400px; margin-inline: auto; }
	.hpf-wh-choosing .hpf-hn-important__media { order: 0; }
}
@media (max-width: 560px) {
	.hpf-wh .hpf-hn-hero__title { max-width: none; }
	.hpf-wh-cta__actions .hpf-hn-btn { width: 100%; text-align: center; }
}


/* =========================================================
 * SUBSCRIBE AND SAVE (pages/page-subscribe-and-save.php). Scoped .hpf-ss.
 * Ported from the Figma canvas (1920px wide). Every size is expressed in
 * design units via --ss-u, where 1u === 1px at a 1920px viewport, so the page
 * is pixel-exact at 1920 and scales proportionally below (with a floor on
 * small screens). Motion lives in assets/js/subscribe-save.js (GSAP).
 * =======================================================*/
.hpf-main.hpf-ss { max-width: 100%; padding: 0; }
.hpf-ss {
	/*
	 * Two units, both "1 design pixel" but capped differently:
	 * --ss-u drives layout (widths, discs, cards, padding) and is capped so the
	 *   composition stops growing past ~1450px, like a max-width container.
	 * --ss-t drives type, capped harder — at the Figma's 1:1 poster scale the
	 *   display headings outgrow their boxes and clip on real viewports.
	 * Both floor on phones so nothing becomes microscopic.
	 */
	--ss-u: clamp(0.26px, 0.05208vw, 0.85px);
	--ss-t: clamp(0.26px, 0.04vw, 0.42px);
	--ss-pink: #ca4976;
	--ss-maroon: #a4375d;
	--ss-teal: var(--hrp-teal, #60babf);
	--ss-gold: var(--hrp-gold, #e4b451);
	--ss-ink: #4c4c4c;
	--ss-line: #b6b4b4;
	--ss-head: var(--hpf-font-head, "Quicksand", sans-serif);
	font-family: var(--ss-head);
	color: var(--ss-ink);
	background: #fff;
	overflow-x: clip;
}
.hpf-ss :where(h1, h2, h3) { font-family: var(--ss-head); font-weight: 700; margin: 0; letter-spacing: 0; }
.hpf-ss :where(p) { margin: 0; }
.hpf-ss :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
/* The theme only ships this utility in myaccount.css, which doesn't load here.
   Without it the "hidden" labels render visibly and distort the node grids. */
.hpf-ss .hpf-acc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hpf-ss-wrap { width: calc(1709 * var(--ss-u)); max-width: calc(100% - 32px); margin-inline: auto; }

/* Shared rounded "blob" that sits behind a headline. */
.hpf-ss-blob { position: absolute; inset: -6% -3%; z-index: 0; border-radius: 999px; transform-origin: left center; }
.hpf-ss-blob--teal { background: var(--ss-teal); }
.hpf-ss-blob--pink { background: var(--ss-pink); }
.hpf-ss-blob--gold { background: var(--ss-gold); }
.hpf-ss-blob--maroon { background: var(--ss-maroon); }


/* ---- Hero ---- */
.hpf-ss-hero { padding-block: calc(100 * var(--ss-u)) 0; text-align: center; }
.hpf-ss-hero__title { position: relative; display: inline-block; padding: calc(10 * var(--ss-u)) calc(34 * var(--ss-u)); }
.hpf-ss-hero__title-in { position: relative; z-index: 1; display: block; font-size: calc(86 * var(--ss-t)); line-height: 1; color: #fff; }
.hpf-ss-hero__lead { font-weight: 700; font-size: calc(96 * var(--ss-t)); line-height: 1; color: var(--ss-teal); margin-top: calc(32 * var(--ss-u)); }
.hpf-ss-hero__text { font-weight: 400; font-size: calc(38.67 * var(--ss-t)); line-height: 1.45; color: var(--ss-ink); text-align: center; text-wrap: balance; margin: calc(20 * var(--ss-u)) auto 0; max-width: calc(900 * var(--ss-u)); }

/* ---- Perk circles ---- */
.hpf-ss-perks { display: flex; justify-content: center; align-items: center; gap: calc(157 * var(--ss-u)); margin-top: calc(33 * var(--ss-u)); }
.hpf-ss-perk { position: relative; }
/* Connector rule between the discs. */
.hpf-ss-perk + .hpf-ss-perk::before {
	content: ""; position: absolute; top: 50%; right: 100%;
	width: calc(157 * var(--ss-u)); height: 0;
	border-top: calc(6 * var(--ss-u)) dashed var(--ss-pink); transform-origin: right center;
}
.hpf-ss-perk__disc {
	width: calc(250 * var(--ss-u)); height: calc(250 * var(--ss-u));
	border-radius: 50%; background: var(--ss-pink); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: calc(10 * var(--ss-u)); text-align: center; padding: calc(20 * var(--ss-u));
}
.hpf-ss-perk__big { font-weight: 700; font-size: calc(110 * var(--ss-t)); line-height: 1; }
.hpf-ss-perk__big span { display: block; font-size: calc(52 * var(--ss-t)); }
.hpf-ss-perk:nth-child(2) .hpf-ss-perk__big { font-size: calc(100 * var(--ss-t)); }
.hpf-ss-perk:nth-child(3) .hpf-ss-perk__big { font-size: calc(74 * var(--ss-t)); }
.hpf-ss-perk__small { font-weight: 400; font-size: calc(42 * var(--ss-t)); line-height: 1.15; max-width: calc(230 * var(--ss-u)); }

/* ---- Loyalty journey (gold card) ---- */
.hpf-ss-journey { padding-block: calc(130 * var(--ss-u)) 0; }
.hpf-ss-journey__card {
	width: calc(1709 * var(--ss-u)); max-width: calc(100% - 32px); margin-inline: auto;
	background: var(--ss-gold); border: calc(4 * var(--ss-u)) dashed rgba(255, 255, 255, .9);
	border-radius: calc(120 * var(--ss-u));
	padding: calc(84 * var(--ss-u)) calc(81 * var(--ss-u)) calc(60 * var(--ss-u));
}
.hpf-ss-journey__title { font-size: calc(110.68 * var(--ss-t)); line-height: 1.2; color: #fff; max-width: calc(1120 * var(--ss-u)); }
.hpf-ss-journey__text { font-weight: 400; font-size: calc(38.67 * var(--ss-t)); line-height: 1.25; color: var(--ss-ink); margin-top: calc(45 * var(--ss-u)); max-width: calc(1160 * var(--ss-u)); }

/* Winding path + milestone nodes. */
.hpf-ss-map { position: relative; margin-top: calc(20 * var(--ss-u)); margin-inline: calc(-81 * var(--ss-u)); aspect-ratio: 1709 / 1314; }
.hpf-ss-map__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hpf-ss-map__path--m { display: none; }
.hpf-ss-map__nodes { position: absolute; inset: 0; }
.hpf-ss-node {
	position: absolute; left: var(--cx); top: var(--cy);
	width: calc(302 * var(--ss-u)); height: calc(302 * var(--ss-u));
	margin: calc(-151 * var(--ss-u)) 0 0 calc(-151 * var(--ss-u));
	display: grid; place-items: center;
}
.hpf-ss-node--big { width: calc(482 * var(--ss-u)); height: calc(482 * var(--ss-u)); margin: calc(-241 * var(--ss-u)) 0 0 calc(-241 * var(--ss-u)); }
.hpf-ss-node__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 37 user units in a 200-unit viewBox === the design's 56px label at 1920. */
.hpf-ss-node__month { font-family: var(--ss-head); font-weight: 700; font-size: 37px; fill: #fff; letter-spacing: .04em; }
.hpf-ss-node__disc {
	width: 78%; height: 78%; border-radius: 50%; background: var(--ss-pink); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em;
	text-align: center; padding: 12%; box-sizing: border-box; overflow: hidden;
	font-weight: 700; line-height: 1.12; text-wrap: balance;
	font-size: calc(58 * var(--ss-t));
}
.hpf-ss-node__note { font-weight: 600; font-size: .62em; opacity: .85; line-height: 1.1; }
.hpf-ss-node--big .hpf-ss-node__disc { font-size: calc(76 * var(--ss-t)); }

/* ---- More cats, more saving ---- */
.hpf-ss-multi { padding-block: calc(220 * var(--ss-u)) 0; }
.hpf-ss-multi__title { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--ss-u)); }
.hpf-ss-multi__line1 { font-size: calc(175 * var(--ss-t)); line-height: 1; color: var(--ss-pink); }
.hpf-ss-multi__line2 { position: relative; display: inline-block; padding: calc(22 * var(--ss-u)) calc(60 * var(--ss-u)); }
.hpf-ss-multi__line2-in { position: relative; z-index: 1; display: block; font-size: calc(152 * var(--ss-t)); line-height: 1; color: #fff; }
.hpf-ss-multi__text { font-weight: 400; font-size: calc(49.33 * var(--ss-t)); line-height: 1.45; color: var(--ss-ink); margin-top: calc(60 * var(--ss-u)); max-width: calc(1010 * var(--ss-u)); }

/* Overlapping cat-count discs — teal on top, pink behind holding the price.
   Geometry lifted 1:1 from the Figma (design units via --ss-u); paint order
   runs smallest-on-top so each disc overlaps the larger one to its right. */
.hpf-ss-tiers { --tier-u: calc(var(--ss-u) * 0.65); display: flex; justify-content: center; align-items: flex-start; margin-top: calc(40 * var(--ss-u)); }
.hpf-ss-tier { position: relative; flex: 0 0 auto; }
.hpf-ss-tier--sm { width: calc(615.6 * var(--tier-u)); height: calc(640 * var(--tier-u)); margin-top: calc(121 * var(--tier-u)); z-index: 3; }
.hpf-ss-tier--md { width: calc(675.6 * var(--tier-u)); height: calc(753 * var(--tier-u)); margin-top: calc(61 * var(--tier-u)); margin-left: calc(-176 * var(--tier-u)); z-index: 2; }
.hpf-ss-tier--lg { width: calc(800.4 * var(--tier-u)); height: calc(857 * var(--tier-u)); margin-left: calc(-234 * var(--tier-u)); z-index: 1; }
/* Pink disc behind, offset down so a crescent shows under the teal. */
.hpf-ss-tier::before { content: ""; position: absolute; z-index: 0; border-radius: 50%; background: var(--ss-pink); }
.hpf-ss-tier--sm::before { width: calc(615.6 * var(--tier-u)); height: calc(615.6 * var(--tier-u)); left: 0; top: calc(24 * var(--tier-u)); }
.hpf-ss-tier--md::before { width: calc(615.6 * var(--tier-u)); height: calc(615.6 * var(--tier-u)); left: calc(59 * var(--tier-u)); top: calc(137 * var(--tier-u)); }
.hpf-ss-tier--lg::before { width: calc(712.4 * var(--tier-u)); height: calc(712.4 * var(--tier-u)); left: calc(88 * var(--tier-u)); top: calc(145 * var(--tier-u)); }
/* Price on the pink crescent, centred under its disc. */
.hpf-ss-tier__price { position: absolute; z-index: 2; text-align: center; font-weight: 700; color: #fff; line-height: 1; font-size: calc(91.13 * var(--ss-t)); }
.hpf-ss-tier--sm .hpf-ss-tier__price { left: 0; width: calc(615.6 * var(--tier-u)); top: calc(486 * var(--tier-u)); }
.hpf-ss-tier--md .hpf-ss-tier__price { left: calc(59 * var(--tier-u)); width: calc(615.6 * var(--tier-u)); top: calc(592 * var(--tier-u)); }
.hpf-ss-tier--lg .hpf-ss-tier__price { left: calc(88 * var(--tier-u)); width: calc(712.4 * var(--tier-u)); top: calc(695 * var(--tier-u)); font-size: calc(102 * var(--ss-t)); }
/* Teal disc on top. */
.hpf-ss-tier__front { position: absolute; z-index: 1; border-radius: 50%; background: var(--ss-teal); border: calc(23 * var(--tier-u)) solid #fff; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--tier-u)); padding: calc(30 * var(--tier-u)); box-sizing: border-box; }
.hpf-ss-tier--sm .hpf-ss-tier__front { width: calc(470.9 * var(--tier-u)); height: calc(470.9 * var(--tier-u)); left: calc(79 * var(--tier-u)); top: 0; }
.hpf-ss-tier--md .hpf-ss-tier__front { width: calc(589.5 * var(--tier-u)); height: calc(589.5 * var(--tier-u)); left: 0; top: 0; }
.hpf-ss-tier--lg .hpf-ss-tier__front { width: calc(711.2 * var(--tier-u)); height: calc(711.2 * var(--tier-u)); left: 0; top: 0; }
.hpf-ss-tier__count { font-weight: 700; font-size: calc(150.72 * var(--ss-t)); line-height: 1; }
.hpf-ss-tier--lg .hpf-ss-tier__count { font-size: calc(166.9 * var(--ss-t)); }
.hpf-ss-tier__note { font-weight: 400; font-size: calc(42.67 * var(--ss-t)); line-height: 1.25; max-width: calc(300 * var(--tier-u)); }

/* ---- Buy once vs subscribe ---- */
.hpf-ss-compare { padding-block: calc(160 * var(--ss-u)) 0; text-align: center; }
.hpf-ss-compare__title { position: relative; display: inline-block; padding: calc(40 * var(--ss-u)) calc(51 * var(--ss-u)); }
.hpf-ss-compare__title-in { position: relative; z-index: 1; display: block; font-size: calc(98.47 * var(--ss-t)); line-height: 1; color: #fff; }
.hpf-ss-compare__sub { font-weight: 400; font-size: calc(46.47 * var(--ss-t)); line-height: 1.25; color: var(--ss-ink); margin-top: calc(50 * var(--ss-u)); }
.hpf-ss-table__scroll { margin-top: calc(90 * var(--ss-u)); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hpf-ss-table {
	width: calc(1696 * var(--ss-u)); min-width: 620px; margin-inline: auto;
	border-collapse: collapse; table-layout: fixed; text-align: left;
	background: #fff; border: 1px solid var(--ss-line); border-radius: calc(24 * var(--ss-u));
	overflow: hidden;
}
.hpf-ss-table th, .hpf-ss-table td {
	font-weight: 700; font-size: calc(38.67 * var(--ss-t)); line-height: 1.2; color: var(--ss-ink);
	height: calc(100 * var(--ss-u)); padding: 0 calc(20 * var(--ss-u)); vertical-align: middle;
}
.hpf-ss-table th:first-child, .hpf-ss-table td:first-child { padding-left: calc(103 * var(--ss-u)); }
.hpf-ss-table col, .hpf-ss-table th:nth-child(1) { width: 47.8%; }
.hpf-ss-table th:nth-child(2) { width: 21.3%; }
.hpf-ss-table th:nth-child(3) { width: 30.9%; }
.hpf-ss-table thead th { font-size: calc(46.47 * var(--ss-t)); height: calc(100 * var(--ss-u)); }
.hpf-ss-table thead .hpf-ss-table__hl { background: var(--ss-maroon); color: #fff; }
.hpf-ss-table tbody .hpf-ss-table__hl { background: var(--ss-maroon); color: #fff; }
.hpf-ss-table thead .hpf-ss-table__hl { border-radius: 0 calc(24 * var(--ss-u)) 0 0; }
.hpf-ss-table tbody tr:last-child .hpf-ss-table__hl { border-radius: 0 0 calc(24 * var(--ss-u)) 0; }
.hpf-ss-table tbody tr:nth-child(odd) th, .hpf-ss-table tbody tr:nth-child(odd) td { background: rgba(164, 55, 93, .1); }
.hpf-ss-table tbody tr:nth-child(odd) .hpf-ss-table__hl { background: var(--ss-pink); }

/* ---- Always in your control ---- */
.hpf-ss-control { padding-block: calc(130 * var(--ss-u)) calc(180 * var(--ss-u)); text-align: center; }
.hpf-ss-control__title { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--ss-u)); }
.hpf-ss-control__line1 { font-size: calc(128 * var(--ss-t)); line-height: 1; color: var(--ss-maroon); }
.hpf-ss-control__line2 { position: relative; display: inline-block; padding: calc(20 * var(--ss-u)) calc(70 * var(--ss-u)); }
.hpf-ss-control__line2-in { position: relative; z-index: 1; display: block; font-size: calc(205 * var(--ss-t)); line-height: 1; color: #fff; }

.hpf-ss-cards {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(40 * var(--ss-u));
	margin-top: calc(171 * var(--ss-u));
}
.hpf-ss-card {
	border-radius: calc(40 * var(--ss-u));
	padding: calc(56 * var(--ss-u)) calc(40 * var(--ss-u)) calc(48 * var(--ss-u));
	text-align: left; color: #fff;
	display: grid; grid-template-columns: auto 1fr; align-items: center;
	column-gap: calc(26 * var(--ss-u)); row-gap: calc(30 * var(--ss-u));
}
.hpf-ss-card--pink { background: var(--ss-pink); }
.hpf-ss-card--gold { background: var(--ss-gold); }
.hpf-ss-card--teal { background: var(--ss-teal); }
.hpf-ss-card--maroon { background: var(--ss-maroon); border: 1px solid var(--ss-line); }
.hpf-ss-card__icon { width: calc(84 * var(--ss-u)); height: calc(84 * var(--ss-u)); border-radius: 50%; background: #fff; display: grid; place-items: center; }
.hpf-ss-card__icon svg { width: 46%; height: 46%; }
.hpf-ss-card--pink .hpf-ss-card__icon { color: var(--ss-pink); }
.hpf-ss-card--gold .hpf-ss-card__icon { color: var(--ss-gold); }
.hpf-ss-card--teal .hpf-ss-card__icon { color: var(--ss-teal); }
.hpf-ss-card--maroon .hpf-ss-card__icon { color: var(--ss-maroon); }
.hpf-ss-card__title { font-size: calc(84 * var(--ss-t)); line-height: 1; color: #fff; min-width: 0; }
.hpf-ss-card__text { grid-column: 1 / -1; font-weight: 700; font-size: calc(46.47 * var(--ss-t)); line-height: 1.22; color: #fff; }

/* ---- Closing CTA ---- */
.hpf-ss-hero__cta { text-align: center; margin-top: calc(110 * var(--ss-u)); }
.hpf-ss-control__cta { margin-top: calc(150 * var(--ss-u)); }
.hpf-ss-btn { display: inline-block; font-family: var(--ss-head); font-weight: 800; font-size: calc(58 * var(--ss-t)); line-height: 1; padding: calc(56 * var(--ss-u)) calc(120 * var(--ss-u)); border-radius: 999px; background: var(--ss-pink); color: #fff; text-decoration: none; box-shadow: 0 12px 28px rgba(202, 73, 118, .35); transition: background .2s var(--hpf-ease, ease), transform .2s var(--hpf-ease, ease), box-shadow .2s ease; }
.hpf-ss-btn:hover { background: var(--ss-maroon); color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(164, 55, 93, .4); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.hpf-ss-journey__card { border-radius: calc(80 * var(--ss-u)); padding-inline: calc(60 * var(--ss-u)); }
}
@media (max-width: 1100px) and (min-width: 861px) {
	.hpf-ss-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	/* Mobile: the three discs become compact pill rows — value badge on the
	   left, caption on the right — with short dashed connectors between them. */
	.hpf-ss-perks { flex-direction: column; align-items: center; gap: calc(56 * var(--ss-u)); }
	.hpf-ss-perk { width: min(100%, calc(1300 * var(--ss-u))); }
	.hpf-ss-perk + .hpf-ss-perk::before { top: auto; right: auto; bottom: 100%; left: 50%; width: 0; height: calc(56 * var(--ss-u)); border-top: 0; border-left: calc(6 * var(--ss-u)) dashed var(--ss-pink); transform: translateX(-50%); transform-origin: center bottom; }
	.hpf-ss-perk__disc { width: 100%; height: auto; border-radius: 999px; flex-direction: row; justify-content: flex-start; text-align: left; gap: calc(64 * var(--ss-u)); padding: calc(64 * var(--ss-u)) calc(88 * var(--ss-u)); }
	.hpf-ss-perk__big { flex: 0 0 auto; min-width: calc(360 * var(--ss-u)); text-align: center; font-size: calc(110 * var(--ss-t)); border-right: calc(6 * var(--ss-u)) dashed rgba(255, 255, 255, .55); padding-right: calc(64 * var(--ss-u)); }
	.hpf-ss-perk__big span { font-size: calc(55 * var(--ss-t)); }
	.hpf-ss-perk:nth-child(2) .hpf-ss-perk__big { font-size: calc(100 * var(--ss-t)); }
	.hpf-ss-perk:nth-child(3) .hpf-ss-perk__big { font-size: calc(80 * var(--ss-t)); }
	.hpf-ss-perk__small { flex: 1 1 auto; font-size: calc(58 * var(--ss-t)); line-height: 1.3; max-width: none; }

	/* Mobile keeps the board-game zigzag: a vertical serpentine with the same
	   alternating milestones, positioned by the --mcx/--mcy coordinates. */
	.hpf-ss-map { aspect-ratio: 1000 / 2200; margin-top: calc(90 * var(--ss-u)); margin-inline: 0; }
	.hpf-ss-map__path { display: none; }
	.hpf-ss-map__path--m { display: block; }
	.hpf-ss-node { left: var(--mcx); top: var(--mcy); width: calc(510 * var(--ss-u)); height: calc(510 * var(--ss-u)); margin: calc(-255 * var(--ss-u)) 0 0 calc(-255 * var(--ss-u)); }
	.hpf-ss-node--big { width: calc(620 * var(--ss-u)); height: calc(620 * var(--ss-u)); margin: calc(-310 * var(--ss-u)) 0 0 calc(-310 * var(--ss-u)); }
	.hpf-ss-node__disc, .hpf-ss-node--big .hpf-ss-node__disc { font-size: calc(66 * var(--ss-t)); }


	.hpf-ss-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40 * var(--ss-u)); width: 100%; }
	.hpf-ss-card { min-height: 0; padding: calc(60 * var(--ss-u)) calc(44 * var(--ss-u)) calc(52 * var(--ss-u)); column-gap: calc(28 * var(--ss-u)); row-gap: calc(26 * var(--ss-u)); }
	.hpf-ss-card__title { font-size: calc(100 * var(--ss-t)); }
	.hpf-ss-card__text { font-size: calc(52 * var(--ss-t)); }
	.hpf-ss-multi__title, .hpf-ss-multi__text { align-items: center; text-align: center; margin-inline: auto; }
	.hpf-ss-multi__title { align-items: center; }
	/* Modern mobile tiers: the crescent discs become horizontal cards —
	   count and note on the left, the price as a pink pill on the right. */
	.hpf-ss-tiers { --tier-u: var(--ss-u); flex-direction: column; align-items: stretch; gap: calc(56 * var(--ss-u)); width: min(100%, calc(1300 * var(--ss-u))); margin-inline: auto; }
	.hpf-ss-tier--sm, .hpf-ss-tier--md, .hpf-ss-tier--lg { width: 100%; height: auto; margin: 0; }
	.hpf-ss-tier--sm::before, .hpf-ss-tier--md::before, .hpf-ss-tier--lg::before { display: none; }
	.hpf-ss-tier--sm .hpf-ss-tier__front, .hpf-ss-tier--md .hpf-ss-tier__front, .hpf-ss-tier--lg .hpf-ss-tier__front { position: static; width: auto; height: auto; border: 0; border-radius: calc(90 * var(--ss-u)); background: linear-gradient(135deg, var(--ss-teal), var(--hrp-teal-deep, #3f989d)); align-items: flex-start; justify-content: center; text-align: left; gap: calc(14 * var(--ss-u)); padding: calc(76 * var(--ss-u)) calc(440 * var(--ss-u)) calc(76 * var(--ss-u)) calc(92 * var(--ss-u)); box-shadow: 0 10px 24px rgba(13, 95, 89, .16); }
	.hpf-ss-tier__count, .hpf-ss-tier--lg .hpf-ss-tier__count { font-size: calc(100 * var(--ss-t)); }
	.hpf-ss-tier__note { font-size: calc(52 * var(--ss-t)); max-width: none; opacity: .92; }
	.hpf-ss-tier--sm .hpf-ss-tier__price, .hpf-ss-tier--md .hpf-ss-tier__price, .hpf-ss-tier--lg .hpf-ss-tier__price { left: auto; right: calc(56 * var(--ss-u)); top: 50%; width: auto; transform: translateY(-50%); background: var(--ss-pink); border-radius: 999px; padding: calc(36 * var(--ss-u)) calc(54 * var(--ss-u)); font-size: calc(78 * var(--ss-t)); box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }

	/* Comparison table: sideways scrolling hid the Subscribe column, so each
	   row becomes a small comparison card — feature on top, the two offers
	   side by side, Subscribe & Save keeping its maroon/pink highlight. */
	.hpf-ss-table__scroll { overflow: visible; }
	.hpf-ss-table { display: block; width: 100%; min-width: 0; border: 0; background: transparent; border-radius: 0; }
	.hpf-ss-table thead { display: none; }
	.hpf-ss-table tbody { display: flex; flex-direction: column; gap: calc(44 * var(--ss-u)); }
	.hpf-ss-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--ss-line); border-radius: calc(56 * var(--ss-u)); overflow: hidden; }
	/* width:auto beats the desktop column-width rules, which would otherwise
	   shrink these grid items to their old table-column percentages. */
	.hpf-ss-table tbody tr th, .hpf-ss-table tbody tr td { width: auto; height: auto; padding: calc(40 * var(--ss-u)) calc(52 * var(--ss-u)); font-size: calc(56 * var(--ss-t)); line-height: 1.3; }
	.hpf-ss-table tbody th[scope="row"] { grid-column: 1 / -1; width: auto; background: rgba(164, 55, 93, .08) !important; padding-block: calc(34 * var(--ss-u)); }
	.hpf-ss-table tbody td { display: block; }
	.hpf-ss-table tbody tr:nth-child(odd) td:not(.hpf-ss-table__hl) { background: #fff; }
	.hpf-ss-table tbody tr:last-child .hpf-ss-table__hl { border-radius: 0; }
	.hpf-ss-table tbody td::before { content: attr(data-th); display: block; font-size: calc(34 * var(--ss-t)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: calc(12 * var(--ss-u)); }
	.hpf-ss-control__cta { margin-top: calc(120 * var(--ss-u)); }
	.hpf-ss-btn { font-size: calc(66 * var(--ss-t)); padding: calc(64 * var(--ss-u)) calc(140 * var(--ss-u)); }
}
@media (max-width: 600px) {
	/* --ss-u bottoms out at 0.26px here, so body copy is re-based on that floor
	   (65u ≈ 17px at 390) rather than left to the pure design ratio. */
	.hpf-ss-hero__text { font-size: calc(65 * var(--ss-t)); max-width: none; }
	.hpf-ss-journey__title { font-size: calc(108 * var(--ss-t)); max-width: none; }
	.hpf-ss-journey__text, .hpf-ss-multi__text { font-size: calc(65 * var(--ss-t)); max-width: none; }
	.hpf-ss-journey__card { border-radius: calc(60 * var(--ss-u)); padding: calc(70 * var(--ss-u)) calc(44 * var(--ss-u)); }
	.hpf-ss-compare__sub { font-size: calc(65 * var(--ss-t)); }
}
@media (prefers-reduced-motion: reduce) {
	.hpf-ss * { animation: none !important; transition: none !important; }
}