@charset "UTF-8";
/* ==========================================================================
   Helixx — base.css
   Design tokens, reset, typography, layout primitives, forms, a11y.

   Loaded on every page. Replaces three stacked legacy layers:
     PressMart Redux inline CSS   45.5 KB
     Elementor kit inline CSS     39.2 KB
     pressmart/assets/css/theme.css  344.7 KB  (16.1% of rules ever matched)

   OWNERSHIP
     Sections 1-9 are the Phase 1 foundation.
     Section 10 is reserved for global chrome (header, footer, page title,
     breadcrumb, pagination, notices, drawers) — append there, do not rewrite
     the sections above.

   BREAKPOINTS — site-wide, NOT Bootstrap defaults. Custom properties cannot be
   used in media queries, so these are the literal numbers used throughout:

     xs   480px    child-theme only
     sm   576px    footer goes 2-col
     md   768px
     lg  1025px    *** NOT 992px *** bootstrap-grid.css was retuned and the
                   Elementor kit agrees (viewport_lg: 1025). Getting this wrong
                   breaks the footer and the product grid at tablet width.
     xl  1200px    container switches to width: 96%

   Max-width mirrors in the source: 575, 600, 640, 767, 1024, 1130, 1199, 1440.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* ---- Brand ---- */
	--hx-primary:            #1d4497;
	--hx-primary-hover:      #0066bf;
	--hx-primary-deep:       #0a3f9d;
	--hx-secondary:          #141414;
	--hx-accent-gold:        #bca76d;

	/* ---- Text ---- */
	--hx-text:               #545454;
	--hx-heading:            #333333;
	--hx-text-strong:        #212121;
	--hx-inverse:            #ffffff;

	/* ---- Surfaces ---- */
	--hx-bg:                 #ffffff;
	--hx-bg-alt:             #f8f8f8;
	--hx-border:             #e9e9e9;

	/* ---- Links ---- */
	--hx-link:               #1d4497;
	--hx-link-hover:         #002f96;

	/* ---- Buttons ---- */
	--hx-btn-bg:             #0a0100;   /* PressMart default button — near-black, NOT brand blue */
	--hx-btn-text:           #ffffff;
	--hx-btn-checkout-bg:    #333333;
	--hx-btn-cart-bg:        #ffd814;   /* Amazon-yellow loop CTA */
	--hx-btn-cart-text:      #000000;

	/* ---- Status ---- */
	--hx-badge-sale:         #0a3f9d;
	--hx-badge-oos:          #ff6161;
	--hx-badge-new:          #82b440;
	--hx-badge-featured:     #ff9f00;
	--hx-success:            #8fae1b;
	--hx-info:               #1e85be;
	--hx-error:              #b81c23;
	--hx-notice-bg:          #f7f6f7;
	--hx-notice-text:        #515151;
	--hx-discount:           #388e3c;

	/* ---- Subscribe plans (bos4w) ---- */
	--hx-plan-1:             #ffd814;
	--hx-plan-2:             #3266d3;

	/* ---- Typography ---- */
	--hx-font:               Montserrat, Arial, Helvetica, sans-serif;
	--hx-text-base:          16px;
	--hx-leading:            1.75;
	--hx-leading-heading:    1.4;
	--hx-weight-body:        400;
	--hx-weight-heading:     600;
	--hx-h1: 26px;
	--hx-h2: 24px;
	--hx-h3: 22px;
	--hx-h4: 19px;
	--hx-h5: 16px;
	--hx-h6: 14px;
	--hx-text-nav:           14px;
	--hx-text-button:        15px;
	--hx-text-small:         14px;
	--hx-text-xs:            12px;
	--hx-heading-mb:         0.6781em;   /* PressMart's literal value — keep it */

	/* ---- Layout ----
	   1600px verified twice: the local replica AND production helixxfoods.ca
	   both print `.container{max-width:1600px}` from the PressMart inline
	   block, which is emitted after Elementor's 1200px kit rule and therefore
	   wins. Do not "correct" this to 1200. */
	--hx-container-max:      1600px;
	--hx-container-width:    96%;        /* applied at min-width: 1200px */
	--hx-gutter:             10px;
	--hx-content-pad-y:      35px;
	--hx-hero-pad-top:       200px;
	--hx-hero-pad-bottom:    150px;
	--hx-footer-pad-y:       5rem;

	/* ---- Added by front-page ----
	   The homepage's boxed sections are 1200px, NOT 1600px. PressMart's
	   `.container,.elementor-section.elementor-section-boxed>.elementor-container
	   {max-width:1600px}` never matched `.e-con`, so all 13 flexbox containers
	   fell through to Elementor's kit value of 1200px. Only the testimonials
	   band (the one legacy <section>) is 1600px, and it uses
	   --hx-container-max above. Verified in page-specs/front-page.md §0.1. */
	--hx-container-boxed:    1200px;

	/* Feature-card and flavour-feature band background. A fourth surface grey,
	   distinct from --hx-bg-alt (#f8f8f8, the testimonials band). Both values
	   appear on the homepage within 200px of each other, so they cannot be
	   collapsed into one token without a visible change. */
	--hx-surface-grey:       #f3f3f3;

	/* ---- Radii — the global radius is genuinely ZERO ---- */
	--hx-radius:             0;
	--hx-radius-pill:        20px;   /* buttons, inputs — child-theme sitewide override */
	--hx-radius-plan:        29px;   /* bos4w plan pills + yellow cart CTA */
	--hx-radius-cta:         30px;
	--hx-radius-media:       20px;
	--hx-radius-round:       50%;

	/* ---- Shadows ---- */
	--hx-shadow-button:      0 1px 2px 0 rgba(0, 0, 0, .15);
	--hx-shadow-ring:        0 0 3px rgba(0, 0, 0, .1);
	--hx-shadow-ring-strong: 0 0 4px rgba(0, 0, 0, .15);
	--hx-shadow-card-hover:  0 0 10px rgba(0, 0, 0, .15);
	--hx-shadow-overlay:     0 8px 8px 0 rgba(0, 0, 0, .15);
	--hx-shadow-sticky:      0 -1px 5px rgba(0, 0, 0, .06);

	/* ---- Motion ---- */
	--hx-t-fast:    all .25s ease;
	--hx-t-ui:      background-color .2s ease-in-out, border-color .2s ease-in-out, color .3s ease-in-out;
	--hx-t-slide:   transform .5s ease;
	--hx-t-drawer:  transform .3s ease, opacity .3s ease, visibility .3s ease;
	--hx-t-image:   all .4s linear;      /* product hover-image crossfade */
	--hx-ease-overshoot: cubic-bezier(0, 0, .44, 1.18);

	/* ---- Z-index ---- */
	--hx-z-card: 9;
	--hx-z-sticky-cta: 99;
	--hx-z-header: 100;
	--hx-z-promo: 101;
	--hx-z-canvas: 995;
	--hx-z-header-sticky: 997;
	--hx-z-mask: 998;
	--hx-z-drawer: 999;
	--hx-z-lightbox: 1000;
	--hx-z-tooltip: 1070;
	--hx-z-preloader: 9999;
	--hx-z-search: 99999;
	--hx-z-skiplink: 100000;

	/* ---- Added by header-nav ----
	   Values measured from the live header (COMPONENT-INVENTORY G1 "hard
	   specs" + pressmart/assets/css/theme.css). Nothing here is invented; each
	   line replaces a literal that PressMart generated into inline CSS. */

	/* Row heights. The topbar's 42px cap with a 40px line-height inside it is
	   PressMart's own off-by-two, and it is what centres the mobile welcome
	   message. Keep both numbers. */
	--hx-header-topbar-h:    42px;
	--hx-header-topbar-line: 40px;
	--hx-header-main-h:      92px;
	--hx-header-main-h-sticky: 75px;
	--hx-header-main-h-mobile: 100px;   /* <=1024px */
	--hx-header-nav-h:       42px;

	/* Sticky threshold. PressMart compared scrollTop against
	   (header height + 450); the sentinel is placed at that offset instead. */
	--hx-header-sticky-offset: 450px;

	--hx-logo-max:           80px;
	--hx-submenu-w:          210px;
	--hx-drawer-w:           300px;     /* mobile menu, slides from the left  */
	--hx-minicart-w:         340px;     /* mini-cart, slides from the right   */

	/* Count bubble on the cart / wishlist icons: 18x18 at 10px. Smaller than
	   --hx-text-xs (12px), which would overflow the circle. */
	--hx-count-size:         18px;
	--hx-text-badge:         10px;

	/* Overlay scrims. Two different alphas in the live CSS — the mask behind
	   the drawers is .6, the search popup's own backdrop is .7. They sit on
	   screen at different times, so collapsing them to one value is safe only
	   if someone confirms it; until then, clone both. */
	--hx-mask-bg:            rgba(0, 0, 0, .6);
	--hx-search-popup-bg:    rgba(0, 0, 0, .7);

	/* The mobile drawer's link hover is #0066cc, while every other hover on the
	   site is #1d4497 (--hx-primary) or #0066bf (--hx-primary-hover). This is a
	   genuine inconsistency in the live CSS. COMPONENT-INVENTORY G1 says to
	   PRESERVE it in phase 1 and unify in phase 7, so it gets its own token
	   rather than being quietly rounded to a neighbour. */
	--hx-mobile-link-hover:  #0066cc;

	/* ---- Added by components ----
	   Two values the §2 token table does not cover, both measured, both used by
	   more than one component. Everything else the component library needs
	   already exists above. */

	/* Accordion hairline. widget-accordion.min.css ships #d5d8dc and the
	   per-page Elementor overrides on 606 and 1720 both ship #d4d4d4, which
	   wins on every live page (content-page.md §6). It is NOT --hx-border
	   (#e9e9e9) — that is the header/table hairline and is visibly lighter.
	   Product tabs render through the same accordion, so this crosses into
	   shop surfaces too. */
	--hx-accordion-border: #d4d4d4;

	/* Testimonial grid gutter. The testimonial and trust-badge grids are
	   authored at 20px, not the 10px --hx-gutter used by the product grid
	   (front-page.md §3 §13). */
	--hx-gutter-wide: 20px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--hx-t-fast: none;
		--hx-t-ui: none;
		--hx-t-slide: none;
		--hx-t-drawer: none;
		--hx-t-image: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* The admin bar sits at 99999. Anything that must clear it gets this offset
   rather than the legacy hardcoded 999998 / 999999 values. */
body.admin-bar {
	--hx-z-offset: 999000;
}

/* ==========================================================================
   2. FONTS

   Montserrat, self-hosted, variable (one file covers 400/500/600/700 — which
   is all four weights the design uses). Replaces three fonts.googleapis.com
   requests plus the dead uploads/elementor/google-fonts/css/montserrat.css
   which returns 404.

   latin-ext is declared but only downloaded when a page actually contains a
   character in its unicode-range. French (é à ç ô û œ) is inside `latin`.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   3. RESET
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--hx-bg);
	color: var(--hx-text);
	font-family: var(--hx-font);
	font-size: var(--hx-text-base);
	font-weight: var(--hx-weight-body);
	line-height: var(--hx-leading);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--hx-border);
	margin: 2rem 0;
	height: 0;
}

[hidden] {
	display: none !important;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--hx-heading);
	font-family: var(--hx-font);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	margin-bottom: var(--hx-heading-mb);
	text-transform: inherit;
}

h1, .h1 { font-size: var(--hx-h1); }
h2, .h2 { font-size: var(--hx-h2); }
h3, .h3 { font-size: var(--hx-h3); }
h4, .h4 { font-size: var(--hx-h4); }
h5, .h5 { font-size: var(--hx-h5); }
h6, .h6 { font-size: var(--hx-h6); }

p {
	margin-bottom: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--hx-link);
	text-decoration: none;
	transition: var(--hx-t-ui);
}

a:hover,
a:focus {
	color: var(--hx-link-hover);
}

strong, b {
	font-weight: 600;
}

small {
	font-size: var(--hx-text-small);
}

/* Lists carry no markers by default (chrome uses <ul> for navigation
   everywhere). Prose restores them — see .hx-prose in content.css. */
ul, ol {
	list-style: none;
}

blockquote {
	border-left: 3px solid var(--hx-primary);
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	font-style: italic;
}

code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

pre {
	background: var(--hx-bg-alt);
	overflow-x: auto;
	padding: 1rem;
}

::selection {
	background: var(--hx-primary);
	color: var(--hx-inverse);
}

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

/* L3 — container.
   Below 1200px: max-width 1600px with side padding.
   At 1200px and up: width 96% of the viewport, capped at 1600px. */
.hx-container {
	width: 100%;
	max-width: var(--hx-container-max);
	margin-inline: auto;
	padding-inline: 15px;
}

@media (min-width: 768px) {
	.hx-container {
		padding-inline: var(--hx-gutter);
	}
}

@media (min-width: 1200px) {
	.hx-container {
		width: var(--hx-container-width);
		padding-inline: 0;
	}
}

.hx-container--narrow {
	max-width: 860px;
}

/* Full-bleed escape hatch for sections that need edge-to-edge background. */
.hx-container--fluid {
	width: 100%;
	max-width: none;
}

/* L4 — grid. Gutter is 10px, NOT Bootstrap's 15px. */
.hx-grid {
	display: grid;
	gap: var(--hx-gutter);
	grid-template-columns: repeat(var(--hx-cols, 1), minmax(0, 1fr));
}

.hx-grid--2 { --hx-cols: 2; }
.hx-grid--3 { --hx-cols: 3; }
.hx-grid--4 { --hx-cols: 4; }
.hx-grid--5 { --hx-cols: 5; }

@media (max-width: 1024px) {
	.hx-grid--4,
	.hx-grid--5 { --hx-cols: 3; }
}

@media (max-width: 767px) {
	.hx-grid--3,
	.hx-grid--4,
	.hx-grid--5 { --hx-cols: 2; }

	.hx-grid--2 { --hx-cols: 1; }
}

/* Sidebar layouts. `--hx-aside` is the sidebar column width. */
.hx-layout {
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.hx-layout--has-aside {
		grid-template-columns: minmax(0, 1fr) var(--hx-aside, 290px);
	}

	.hx-layout--aside-left {
		grid-template-columns: var(--hx-aside, 290px) minmax(0, 1fr);
	}

	.hx-layout--aside-left > .hx-layout__main { order: 2; }
	.hx-layout--aside-left > .hx-layout__aside { order: 1; }
}

/* The page shell. */
.site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--hx-bg);
}

.site-content {
	flex: 1 0 auto;
	padding-block: var(--hx-content-pad-y);
}

.content-area {
	min-width: 0;
}

/* Vertical rhythm utility replacing Elementor's spacer widget. */
.hx-spacer { height: var(--hx-space, 40px); }
.hx-spacer--sm { --hx-space: 20px; }
.hx-spacer--lg { --hx-space: 80px; }

/* ==========================================================================
   6. FORMS AND BUTTONS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 10px 18px;
	background-color: var(--hx-bg);
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-pill);
	color: var(--hx-text);
	line-height: 1.6;
	transition: var(--hx-t-ui);
	appearance: none;
}

textarea {
	min-height: 140px;
	border-radius: var(--hx-radius-media);
	resize: vertical;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, var(--hx-text) 50%),
		linear-gradient(135deg, var(--hx-text) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--hx-primary);
	outline: 0;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	margin-right: .5em;
	accent-color: var(--hx-primary);
}

label {
	display: inline-block;
	margin-bottom: .35em;
}

::placeholder {
	color: var(--hx-text);
	opacity: .7;
}

/* Buttons.
   The default button is near-black (#0a0100), NOT brand blue — verified from
   the PressMart dynamic CSS. The pill radius comes from the child theme's
   sitewide `.button { border-radius: 20px }` override, ported here without
   !important because nothing competes with it any more. */
.hx-button,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-block;
	padding: 12px 28px;
	background-color: var(--hx-btn-bg);
	border: 1px solid transparent;
	border-radius: var(--hx-radius-pill);
	box-shadow: var(--hx-shadow-button);
	color: var(--hx-btn-text);
	font-size: var(--hx-text-button);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--hx-t-ui);
}

.hx-button:hover,
.hx-button:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-button--primary {
	background-color: var(--hx-primary);
}

.hx-button--primary:hover,
.hx-button--primary:focus {
	background-color: var(--hx-primary-hover);
}

.hx-button--cart {
	width: 100%;
	background-color: var(--hx-btn-cart-bg);
	border-radius: var(--hx-radius-plan);
	color: var(--hx-btn-cart-text);
	padding: 14px 20px;
}

.hx-button--cart:hover,
.hx-button--cart:focus {
	background-color: var(--hx-btn-cart-bg);
	color: var(--hx-btn-cart-text);
	border-color: var(--hx-btn-cart-text);
}

.hx-button--ghost {
	background-color: transparent;
	border-color: currentColor;
	box-shadow: none;
	color: var(--hx-text-strong);
}

.hx-button[disabled],
button[disabled],
.button.disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* Buttons that are purely an icon must not inherit the pill chrome. */
.hx-iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

.hx-iconbutton:hover,
.hx-iconbutton:focus {
	background: none;
	color: var(--hx-primary);
}

/* ==========================================================================
   7. ICONS
   ========================================================================== */

.hx-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.hx-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -.125em;
	flex: none;
	pointer-events: none;
}

/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

/* WordPress + WooCommerce both emit .screen-reader-text; the class name is
   fixed by core and must not be renamed. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	top: 5px;
	left: 5px;
	padding: 15px 23px 14px;
	background-color: var(--hx-bg);
	border-radius: var(--hx-radius);
	box-shadow: var(--hx-shadow-ring-strong);
	color: var(--hx-primary);
	font-size: var(--hx-text-small);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	z-index: var(--hx-z-skiplink);
}

.hx-skip-link:focus {
	z-index: calc(var(--hx-z-skiplink) + var(--hx-z-offset, 0));
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--hx-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */

.hx-visually-hidden { /* alias of .screen-reader-text for theme-owned markup */
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
}

.hx-text-center { text-align: center; }
.hx-text-left   { text-align: left; }
.hx-text-right  { text-align: right; }

.hx-flow > * + * { margin-top: var(--hx-flow, 1rem); }

.hx-stack {
	display: flex;
	align-items: center;
	gap: var(--hx-stack-gap, 10px);
}

.hx-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Wide content must scroll inside its own box; the page body never scrolls
   horizontally. */
.hx-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Responsive display helpers. lg is 1025px — see the header of this file. */
.hx-hide-lg-down { display: none; }

@media (min-width: 1025px) {
	.hx-hide-lg-down { display: revert; }
	.hx-hide-lg-up { display: none; }
}

@media (max-width: 767px) {
	.hx-hide-sm { display: none; }
}

/* Empty state shared by archives, search and the fallback loop. */
.hx-no-results {
	padding: 40px 0;
	max-width: 640px;
}

.hx-no-results p {
	margin-bottom: 1.5rem;
}

/* Core pagination, restyled. */
.hx-pagination {
	margin-top: 40px;
}

.hx-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.hx-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--hx-border);
	color: var(--hx-text-strong);
	font-size: var(--hx-text-small);
	transition: var(--hx-t-ui);
}

.hx-pagination .page-numbers:hover,
.hx-pagination .page-numbers.current {
	background-color: var(--hx-primary);
	border-color: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Entry media used by the fallback loop and single templates. */
.hx-entry-media {
	display: block;
	margin-bottom: 1rem;
	overflow: hidden;
}

.hx-entry-media img {
	width: 100%;
}

/* Search form. */
.hx-searchform {
	display: flex;
	gap: 8px;
	max-width: 520px;
}

.hx-searchform .hx-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
}

.hx-searchform .hx-searchform__submit {
	flex: none;
}

/* 404. Title is 48px with line-height 1 — verified against the current 404. */
.hx-404 {
	padding-block: 60px;
	text-align: center;
}

.hx-404__title {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 1rem;
}

.hx-404__tagline {
	margin-bottom: 2rem;
}

.hx-404 .hx-searchform {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Phase 1 scaffolding.

   These three rules style the placeholder header, footer and title band that
   inc/template-tags.php renders ONLY while the real Phase 2 parts are absent.
   Delete this block once template-parts/header/site-header.php,
   template-parts/footer/footer-main.php and
   template-parts/global/page-title.php all exist.
   -------------------------------------------------------------------------- */

.site-header--fallback {
	padding-block: 18px;
	border-bottom: 1px solid var(--hx-border);
}

.site-header--fallback .hx-stack {
	justify-content: space-between;
	gap: 24px;
}

.site-header--fallback .site-header__brand {
	font-size: var(--hx-h4);
	font-weight: var(--hx-weight-heading);
	margin: 0;
}

.site-header--fallback .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: var(--hx-text-nav);
	font-weight: 600;
}

.site-footer--fallback {
	padding-block: var(--hx-footer-pad-y);
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
	text-align: center;
}

.hx-page-hero--fallback {
	padding-block: 40px;
	background-color: var(--hx-bg-alt);
	text-align: center;
}

.hx-page-hero__title {
	margin-bottom: 0;
}

/* ==========================================================================
   10. GLOBAL CHROME  —  RESERVED
   Header, footer, promo bar, page-title band, breadcrumb, notices, mask,
   drawers and the mobile bottom navbar are appended below by Phase 2.
   Do not edit sections 1-9 to accommodate chrome; add rules here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1  HEADER  (owner: header-nav)
   Appended to the reserved §10 band. Do not reorder; later chrome appends
   below this block.

   Source of truth: phase0-backup/rendered/__root__.html (markup),
   pressmart/assets/css/theme.css (computed values), COMPONENT-INVENTORY G1
   (row order + the five generated dimensions), customizer-css triage §3.8.

   SCOPED GRID UTILITIES, read this before touching them
   -----------------------------------------------------
   The captured header markup uses bootstrap class names (.container, .row,
   .col-4, .d-none, .d-lg-flex). bootstrap-grid.css dies with PressMart, so
   those names would resolve to nothing. They are redefined below, but ONLY
   under `.site-header`.

   That scoping is deliberate and load-bearing. `.container`, `.row` and
   `.col-*` are among the most-used class names on the web, and this site runs
   30+ plugins — several of which ship their own bootstrap-flavoured markup
   (the affiliate dashboard and the login popup both do). A global `.row
   { display: flex }` here would silently reflow plugin UI on pages this theme
   never intended to touch. Scoped, it cannot.

   Breakpoint note: `lg` is 1025px, NOT bootstrap's 992px. PressMart retuned
   bootstrap-grid.css and the Elementor kit agrees (viewport_lg 1025). Using
   992 shows the desktop nav row and the mobile drawer trigger at the same
   time between 992 and 1024.
   -------------------------------------------------------------------------- */

/* ---- 10.1.1  Scoped grid ---- */

.site-header .container {
	width: 100%;
	max-width: var(--hx-container-max);
	margin-inline: auto;
	padding-inline: var(--hx-gutter);
}

@media (min-width: 1200px) {
	.site-header .container {
		width: var(--hx-container-width);
	}
}

.site-header .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-header .col-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.site-header .col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.site-header .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.site-header .d-none {
	display: none;
}

.site-header .d-flex {
	display: flex;
}

.site-header .justify-content-center {
	justify-content: center;
}

@media (min-width: 1025px) {
	.site-header .d-lg-flex {
		display: flex;
	}

	.site-header .d-lg-none {
		display: none;
	}
}

/* ---- 10.1.2  Shell ---- */

.site-header {
	position: relative;
	z-index: var(--hx-z-header);
	background-color: var(--hx-bg);
	color: var(--hx-text);
}

.site-header a {
	color: var(--hx-text-strong);
	transition: var(--hx-t-ui);
}

.site-header a:hover,
.site-header a:focus-visible {
	color: var(--hx-primary);
}

.site-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header ul li {
	margin-bottom: 0;
}

.header-desktop,
.header-mobile {
	flex: 0 0 100%;
	max-width: 100%;
}

.header-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-width: 0;
}

.header-col-left {
	justify-content: flex-start;
}

.header-col-right {
	justify-content: flex-end;
}

/* 10px between header elements, flush at both ends of a column. */
.header-main .header-col > *,
.header-navigation .header-col > * {
	padding-inline: var(--hx-gutter);
}

.header-main .header-col > *:first-child,
.header-navigation .header-col > *:first-child {
	padding-inline-start: 0;
}

.header-main .header-col > *:last-child,
.header-navigation .header-col > *:last-child {
	padding-inline-end: 0;
}

/* ---- 10.1.3  Topbar ----
   The desktop track is an empty 42px band. That is not an oversight: both live
   slots are `placebo`, and the band is what separates the page from the top of
   the viewport at >=1025px. Deleting it moves the whole header up 42px. */

.header-topbar {
	max-height: var(--hx-header-topbar-h);
	font-size: var(--hx-text-xs);
	color: var(--hx-secondary);
	background-color: var(--hx-bg);
	border-bottom: 1px solid var(--hx-secondary);
}

.header-topbar .header-col > * {
	display: inline-flex;
	align-items: center;
	line-height: var(--hx-header-topbar-line);
	padding-inline: var(--hx-gutter);
}

.header-topbar a {
	color: var(--hx-secondary);
}

.header-topbar a:hover,
.header-topbar a:focus-visible {
	color: var(--hx-primary);
}

.header-topbar .welcome-message {
	white-space: nowrap;
}

/* ---- 10.1.4  Main row ---- */

.header-main {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	height: var(--hx-header-main-h);
	background-color: var(--hx-bg);
	border-bottom: 1px solid var(--hx-border);
}

@media (max-width: 1024px) {
	.header-main {
		height: var(--hx-header-main-h-mobile);
	}
}

.header-main > .container,
.header-navigation > .container,
.header-topbar > .container {
	height: 100%;
}

.header-main .row,
.header-navigation .row {
	height: 100%;
}

/* The nav row is a single line. `.site-header .row` sets flex-wrap:wrap, which
   hands vertical positioning of that one line to `align-content` (not
   align-items) — and it was leaving the menu + social ~9px low inside the 42px
   bar. Forcing nowrap lets align-items:center actually centre the row. */
.header-navigation .row {
	flex-wrap: nowrap;
	align-content: center;
}

/* ---- 10.1.5  Logo ----
   ONE image. `.logo-light` and `.mobile-logo` are not emitted at all — see
   template-parts/header/logo.php for why they never rendered. */

.header-logo {
	display: flex;
	align-items: center;
	min-width: 0;
}

.header-logo a {
	display: inline-flex;
	align-items: center;
	padding-block: 5px;
}

.header-logo .logo {
	display: block;
	width: auto;
	max-width: var(--hx-logo-max);
	height: auto;
}

.header-logo .logo--text {
	font-weight: var(--hx-weight-heading);
	font-size: var(--hx-h5);
	white-space: nowrap;
}

/* "Proudly Made In Canada" badge. Was a customizer `content: url()` with a
   hardcoded absolute domain; it is a real <img> now (triage §3.10). Hidden
   below 768px exactly as the original media query had it. */
.header-logo__badge {
	display: none;
}

@media (min-width: 768px) {
	/* WooCommerce scopes `img { max-width:100% }` from the body class, so this
	   needs two classes of specificity to keep the badge from expanding and
	   making the entire desktop header row taller than its container. */
	.site-header .header-logo__badge {
		display: block;
		width: auto;
		max-width: 132px;
		height: auto;
		margin-inline-start: 3em;
	}
}

@media (max-width: 1199px) {
	.site-header .header-logo__badge {
		margin-inline-start: 1.25em;
	}
}

/* ---- 10.1.6  Search ---- */

.hx-ajax-search {
	position: relative;
	width: 100%;
}

.hx-ajax-search .searchform {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background-color: var(--hx-bg);
}

.hx-ajax-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding-inline-start: 1.5em;
	border: none;
	border-radius: 0;
	background: none;
	appearance: none;
	font-size: var(--hx-text-small);
	color: var(--hx-text);
}

.hx-ajax-search .search-field:focus {
	outline: none;
}

.hx-ajax-search .searchform:focus-within {
	border-color: var(--hx-primary);
}

.hx-ajax-search .search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: -1px;
	padding: 12px 20px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-color: var(--hx-btn-bg);
	color: var(--hx-btn-text);
	cursor: pointer;
	transition: var(--hx-t-ui);
}

.hx-ajax-search .search-submit:hover,
.hx-ajax-search .search-submit:focus-visible {
	background-color: var(--hx-primary);
}

.hx-ajax-search .search-submit .hx-icon {
	font-size: 18px;
}

/* Results + trending share one dropped panel. `.trending-search-wrap` is
   hidden until site.js opens it, matching the live behaviour. */
.hx-ajax-search .search-results-wrapper:not(:empty),
.hx-ajax-search .trending-search-wrap {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 98;
	max-height: 55vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--hx-bg);
	box-shadow: var(--hx-shadow-ring-strong);
}

.hx-ajax-search .trending-search-wrap {
	display: none;
}

.hx-ajax-search .trending-search-wrap.is-open {
	display: block;
}

.trending-search-wrap ul li a,
.trending-search-wrap .trending-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 20px;
}

.trending-search-wrap .trending-title {
	font-weight: var(--hx-weight-heading);
	color: #777777;
}

/* ---- 10.1.7  Account / wishlist / cart triggers ---- */

.header-myaccount > a,
.header-wishlist > a,
.header-cart > a,
.header-mini-search > .search-icon-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	font-size: var(--hx-text-xs);
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--hx-text-strong);
	transition: var(--hx-t-ui);
}

.header-mini-search > .search-icon-text:hover,
.header-mini-search > .search-icon-text:focus-visible {
	color: var(--hx-primary);
}

.header-myaccount-icon .hx-icon,
.header-wishlist-icon .hx-icon,
.header-cart-icon .hx-icon,
.header-search-icon .hx-icon {
	font-size: 22px;
}

.header-myaccount {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-mini-search {
	position: relative;
}

/* `.header-cart-icon.cart-icon` — BOTH class names are on the Appendix B
   do-not-rename list. Other code binds to that exact pair. */
.header-cart-icon,
.header-wishlist-icon {
	position: relative;
	display: inline-flex;
}

.header-cart-count,
.header-wishlist-count {
	position: absolute;
	top: -7px;
	inset-inline-end: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hx-count-size);
	height: var(--hx-count-size);
	border-radius: var(--hx-radius-round);
	font-size: var(--hx-text-badge);
	line-height: 1;
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

/* ---- 10.1.8  Language switcher ---- */

.language-switcher .hx-dropdown,
.language-switcher .hx-dropdown ul {
	margin: 0;
	list-style: none;
}

.language-switcher .has-dropdown {
	position: relative;
}

.hx-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.hx-dropdown__toggle .hx-dropdown__chevron {
	font-size: 7px;
}

/* Polylang ships 16x11 flags, except quebec.png which is 17x11. The explicit
   attrs reserve the box; width:auto lets the odd one keep its aspect. */
.hx-dropdown img {
	width: auto;
	height: 11px;
	margin-inline-end: 5px;
}

/* Desktop right cluster: stack the language toggle (flag over "English") so its
   label sits on the same line as the My Account / Wishlist / Cart labels beside
   it — those are icon-over-label triggers and the inline switcher was floating
   its text up to the icon row. Scoped to .header-col-right so the mobile topbar
   switcher keeps its inline layout. Grid areas do this with no markup change:
   the 24px flag row matches the account icon height, so all four labels align. */
.header-col-right .language-switcher .hx-dropdown__toggle {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 22px auto;
	grid-template-areas:
		"flag flag"
		"name chevron";
	place-items: center;
	column-gap: 3px;
	font-size: var(--hx-text-xs);
	line-height: 1.2;
	color: var(--hx-text-strong);
}

.header-col-right .language-switcher .hx-dropdown__toggle > img {
	grid-area: flag;
	height: 15px;
	margin: 0;
}

.header-col-right .language-switcher .hx-dropdown__toggle > span {
	grid-area: name;
}

.header-col-right .language-switcher .hx-dropdown__toggle > .hx-dropdown__chevron {
	grid-area: chevron;
}

.language-switcher .sub-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: -10px;
	z-index: 98;
	min-width: 60px;
	max-width: 190px;
	width: auto;
	padding: 0;
	background-color: var(--hx-bg);
	box-shadow: var(--hx-shadow-ring);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(15px);
	transition: var(--hx-t-drawer);
}

.header-col-right .language-switcher .sub-dropdown {
	inset-inline-start: auto;
	inset-inline-end: -10px;
}

/* :focus-within is the accessibility half of this. The live theme opened on
   :hover only, so the switcher was unreachable by keyboard. */
.language-switcher .has-dropdown:hover > .sub-dropdown,
.language-switcher .has-dropdown:focus-within > .sub-dropdown,
.language-switcher .has-dropdown.is-open > .sub-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.language-switcher .sub-dropdown li a {
	display: flex;
	align-items: center;
	padding: 12px;
	line-height: 1;
	text-transform: none;
}

/* Always-visible language selector. Keeping both choices in view removes the
   hidden hover interaction and makes the current language immediately clear. */
.language-switcher {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.hx-language-options {
	display: inline-grid;
	grid-template-columns: repeat(2, minmax(34px, 1fr));
	align-items: center;
	margin: 0;
	padding: 3px;
	border: 1px solid #dbe2eb;
	border-radius: 999px;
	list-style: none;
	background: #f3f6f9;
	box-shadow: inset 0 1px 2px rgba(21, 34, 49, .04);
}

.hx-language-options li {
	display: flex;
	margin: 0;
	padding: 0;
}

.hx-language-options__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	color: #586575;
	font-size: 11px;
	font-weight: 750;
	line-height: 1;
	letter-spacing: .06em;
	text-decoration: none;
	transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

a.hx-language-options__item:hover {
	color: var(--hx-primary);
	background: #fff;
}

a.hx-language-options__item:focus-visible {
	outline: 2px solid var(--hx-primary);
	outline-offset: 2px;
}

.hx-language-options__item.is-current {
	color: #fff;
	background: var(--hx-primary);
	box-shadow: 0 2px 6px rgba(32, 75, 151, .24);
	cursor: default;
}

.header-col-right .language-switcher {
	margin-inline-start: 4px;
}

.header-topbar .hx-language-options {
	padding: 2px;
	border-color: #dbe2eb;
	background: #f3f6f9;
	box-shadow: inset 0 1px 2px rgba(21, 34, 49, .04);
}

.header-topbar .hx-language-options__item {
	min-height: 24px;
	color: #586575;
	font-size: 10px;
}

.header-topbar .hx-language-options__item.is-current {
	color: #fff;
	background: var(--hx-primary);
	box-shadow: 0 1px 4px rgba(32, 75, 151, .2);
}

@media (prefers-reduced-motion: reduce) {
	.hx-language-options__item { transition: none; }
}

/* ---- 10.1.9  Navigation row ----
   Brand blue. This came from a customizer override with `!important`; the
   triage (§3.8) says keep the decision, so it is a plain declaration here and
   the !important is gone. */

.header-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--hx-header-nav-h);
	background-color: var(--hx-primary);
}

.header-navigation a,
.header-navigation .main-navigation ul.menu > li > a {
	color: var(--hx-inverse);
}

.header-navigation a:hover,
.header-navigation a:focus-visible,
.header-navigation .main-navigation ul.menu > li > a:hover {
	color: var(--hx-accent-gold);
}

.main-navigation,
.main-navigation > ul.menu,
.main-navigation > ul.menu > li {
	display: flex;
	align-items: center;
	height: 100%;
}

.main-navigation ul.menu {
	flex-direction: row;
	flex-wrap: wrap;
}

.main-navigation ul.menu > li {
	position: relative;
}

.main-navigation ul.menu > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: var(--hx-header-nav-h);
	padding-inline: var(--hx-gutter);
	font-size: var(--hx-text-nav);
	font-weight: var(--hx-weight-heading);
}

/* Parent-item chevron. The live theme drew this from an icon font that dies
   with PressMart; it is a CSS triangle now — no font, no extra request, and it
   cannot render as tofu if the sprite fails to load. */
.main-navigation ul.menu > li.menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-inline-start: 5px;
	border-inline: 3.5px solid transparent;
	border-top: 4px solid currentcolor;
}

/* ---- 10.1.10  Dropdowns ----
   Pure CSS, 210px, translateY(15px) -> none over .3s. NO mega-menu: verified
   zero menu items have one enabled. */

.main-navigation ul.sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 98;
	width: var(--hx-submenu-w);
	padding-block: 10px;
	background-color: var(--hx-bg);
	box-shadow: var(--hx-shadow-ring-strong);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(15px);
	transition: var(--hx-t-drawer);
}

.main-navigation ul.menu > li:hover > ul.sub-menu,
.main-navigation ul.menu > li:focus-within > ul.sub-menu,
.main-navigation ul.menu li li:hover > ul.sub-menu,
.main-navigation ul.menu li li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* Third level opens sideways. */
.main-navigation ul.menu li li > ul.sub-menu {
	inset-inline-start: 100%;
	top: 0;
}

.main-navigation ul.sub-menu li {
	position: relative;
}

.main-navigation ul.sub-menu li a {
	display: block;
	padding: 8px 14px;
	font-size: var(--hx-text-small);
	font-weight: var(--hx-weight-body);
	color: var(--hx-text-strong);
}

.main-navigation ul.sub-menu li a:hover,
.main-navigation ul.sub-menu li a:focus-visible {
	color: var(--hx-primary);
}

.main-navigation ul.sub-menu li.menu-item-has-children > a {
	position: relative;
	padding-inline-end: 24px;
}

.main-navigation ul.sub-menu li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 12px;
	width: 0;
	height: 0;
	margin-top: -3.5px;
	border-block: 3.5px solid transparent;
	border-inline-start: 4px solid currentcolor;
}

.main-navigation .hx-menu-coming-soon > a,
.hx-mobile-menu .hx-menu-coming-soon > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: default;
	opacity: .62;
}

.main-navigation .hx-menu-coming-soon > a::after,
.hx-mobile-menu .hx-menu-coming-soon > a::after {
	padding: 3px 6px;
	border-radius: 999px;
	color: var(--hx-primary);
	background: var(--hx-bg-alt);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	content: "Soon";
}

/* ---- 10.1.11  Header social ---- */

.header-navigation .hx-social {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.hx-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-inline-end: 7px;
	margin-bottom: 7px;
	border-radius: var(--hx-radius);
	font-size: 14px;
}

.header-navigation .hx-social a {
	margin-bottom: 0;
}

.hx-social a:last-child {
	margin-inline-end: 0;
}

.hx-social.icons-shape-circle a {
	border-radius: var(--hx-radius-round);
}

/* ---- 10.1.12  Mobile navbar toggle ---- */

.mobile-navbar .navbar-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 0;
	border: none;
	border-radius: 0;
	background: none;
	font-size: var(--hx-text-xs);
	font-weight: var(--hx-weight-heading);
	line-height: 1.2;
	color: var(--hx-text-strong);
	cursor: pointer;
}

.mobile-navbar .navbar-icon .hx-icon {
	font-size: 22px;
}

/* ---- 10.1.13  Sticky ----
   Only `.header-main` sticks. The sentinel sits at (header height + 450px);
   site.js observes it and toggles `.fixed` on `.site-header` plus
   `.header-sticked` on `.header-main`, exactly as the jQuery version did. */

.hx-header-sentinel {
	position: absolute;
	top: calc(100% + var(--hx-header-sticky-offset));
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

.header-sticky .header-main.header-sticked {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: var(--hx-z-header-sticky);
	height: var(--hx-header-main-h-sticky);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* Reserve the vacated space so the page does not jump when the row detaches. */
.site-header.fixed .header-main {
	margin-bottom: var(--hx-header-main-h);
}

@media (max-width: 1024px) {
	.site-header.fixed .header-main {
		margin-bottom: var(--hx-header-main-h-mobile);
	}
}

/* Scrolling down hides the sticky row, scrolling up brings it back. */
.header-sticky .header-main.header-sticked.scroll-down {
	transform: translateY(-100%);
	transition: transform var(--hx-t-slide);
}

.header-sticky .header-main.header-sticked.scroll-up {
	transform: translateY(0);
	transition: transform var(--hx-t-slide);
}

.admin-bar .header-sticky .header-main.header-sticked {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .header-sticky .header-main.header-sticked {
		top: 46px;
	}
}

/* --------------------------------------------------------------------------
   10.2  OFF-CANVAS LAYER  (owner: header-nav)
   Mobile menu, search popup, mini-cart drawer and the shared mask. All four
   are rendered before </body>, outside .site-wrapper.
   -------------------------------------------------------------------------- */

/* ---- 10.2.1  Mask ----
   `.pressmart-mask-overaly` keeps its PressMart name AND its typo: it is on
   the Appendix B do-not-rename list. It is a <button> here rather than a
   <div>, so it is a real dismiss control. */

.pressmart-mask-overaly {
	position: fixed;
	inset: 0;
	z-index: var(--hx-z-mask);
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background-color: var(--hx-mask-bg);
	opacity: 0;
	visibility: hidden;
	cursor: default;
	transition: opacity .5s ease, visibility 0s ease .5s;
}

.pressmart-mask-overaly.opened {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s ease;
}

/* ---- 10.2.2  Mobile menu drawer ---- */

.hx-mobile-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	z-index: var(--hx-z-drawer);
	display: flex;
	flex-direction: column;
	width: var(--hx-drawer-w);
	max-width: 85vw;
	overflow: hidden;
	overflow-y: auto;
	background-color: var(--hx-bg);
	transform: translateX(-100%);
	transition: var(--hx-t-slide);
}

.hx-mobile-menu.opened {
	transform: translateX(0);
}

/* RTL: the drawer comes from the other edge. */
.rtl .hx-mobile-menu {
	transform: translateX(100%);
}

.rtl .hx-mobile-menu.opened {
	transform: translateX(0);
}

.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px;
	border-bottom: 3px double var(--hx-border);
}

.mobile-menu-header .login-register {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	font-size: var(--hx-h5);
	font-weight: var(--hx-weight-heading);
	text-transform: capitalize;
}

.hx-mobile-menu .mobile-nav-content {
	display: none;
}

.hx-mobile-menu .mobile-nav-content.active {
	display: block;
}

.hx-mobile-menu ul.mobile-main-menu {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-mobile-menu ul.mobile-main-menu li {
	position: relative;
	margin-bottom: 0;
	list-style: none;
}

.hx-mobile-menu ul.mobile-main-menu li > a {
	display: block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--hx-heading);
}

.hx-mobile-menu ul.mobile-main-menu li > a:hover,
.hx-mobile-menu ul.mobile-main-menu li > a:focus-visible {
	/* #0066cc, not --hx-primary-hover (#0066bf). See the token comment. */
	color: var(--hx-mobile-link-hover);
}

.hx-mobile-menu ul.mobile-main-menu > li > a {
	padding: 15px;
	font-weight: var(--hx-weight-heading);
}

.hx-mobile-menu ul.mobile-main-menu ul li a {
	display: block;
	padding: 15px;
	font-size: var(--hx-text-small);
}

.hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > a {
	padding-inline-end: 55px;
}

/* Submenus are closed until site.js (or :target-less JS) opens them. */
.hx-mobile-menu ul.mobile-main-menu ul.sub-menu {
	display: none;
}

.hx-mobile-menu ul.mobile-main-menu li.active > ul.sub-menu {
	display: block;
}

/* The accordion control. A real <button> in this theme — PressMart injected a
   bare <span> from jQuery, which no keyboard could reach. Same 55x53 hit area,
   same position. */
.hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > .menu-toggle {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	z-index: 99;
	width: 55px;
	height: 53px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: inherit;
}

.hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > .menu-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -5px 0 0 -4px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: var(--hx-t-fast);
}

.hx-mobile-menu ul.mobile-main-menu li.active > .menu-toggle::after {
	margin-top: -1px;
	transform: rotate(-135deg);
}

.mobile-topbar {
	margin-top: auto;
	padding: 15px;
}

/* ---- 10.2.3  Search popup ---- */

.hx-search-popup {
	position: fixed;
	inset: 0;
	z-index: var(--hx-z-search);
	width: 100vw;
	height: 100vh;
	background-color: var(--hx-search-popup-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.hx-search-popup.opened {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hx-search-popup__wrap {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px;
	transform: translateY(-100%);
	transition: transform .3s ease-in-out;
}

.hx-search-popup.opened .hx-search-popup__wrap {
	transform: translateY(0);
}

.hx-search-popup .hx-ajax-search {
	max-width: 600px;
}

/* Inside the popup the panels are in flow, not dropped over the page. */
.hx-search-popup .search-results-wrapper:not(:empty),
.hx-search-popup .trending-search-wrap {
	position: static;
}

@media (max-width: 767px) {
	.hx-search-popup__wrap {
		padding: 70px 20px 20px;
	}
}

/* ---- 10.2.4  Mini-cart drawer ---- */

.hx-minicart-slide {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	z-index: var(--hx-z-drawer);
	display: flex;
	flex-direction: column;
	width: var(--hx-minicart-w);
	max-width: 90vw;
	overflow: hidden;
	overflow-y: auto;
	background-color: var(--hx-bg);
	transform: translateX(100%);
	transition: var(--hx-t-slide);
}

.hx-minicart-slide.opened {
	transform: translateX(0);
}

.rtl .hx-minicart-slide {
	transform: translateX(-100%);
}

.rtl .hx-minicart-slide.opened {
	transform: translateX(0);
}

.minicart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px;
	border-bottom: 1px solid var(--hx-border);
}

.minicart-header .minicart-title {
	margin: 0;
	font-size: var(--hx-h5);
	font-weight: var(--hx-weight-heading);
}

.hx-minicart-slide .widget_shopping_cart,
.hx-minicart-slide .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* ---- 10.2.5  Shared close control ---- */

.close-sidebar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: inherit;
	transition: var(--hx-t-ui);
}

.close-sidebar:hover,
.close-sidebar:focus-visible {
	color: var(--hx-primary);
}

.hx-search-popup .close-sidebar {
	position: absolute;
	top: 30px;
	inset-inline-end: 30px;
	color: var(--hx-inverse);
}

/* ---- 10.2.6  Admin bar ----
   Use the reserved offset band. Never the legacy hardcoded 999998/999999. */

body.admin-bar .hx-mobile-menu,
body.admin-bar .hx-minicart-slide {
	z-index: calc(var(--hx-z-drawer) + var(--hx-z-offset, 0));
}

body.admin-bar .pressmart-mask-overaly {
	z-index: calc(var(--hx-z-mask) + var(--hx-z-offset, 0));
}

body.admin-bar .hx-search-popup {
	z-index: calc(var(--hx-z-search) + var(--hx-z-offset, 0));
}

@media (min-width: 783px) {
	body.admin-bar .hx-mobile-menu,
	body.admin-bar .hx-minicart-slide {
		top: 32px;
	}
}

/* ---- 10.2.7  Scroll lock ----
   Set by site.js while any panel is open. */

body.hx-no-scroll {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   10.1  FOOTER + GLOBAL CHROME          [added by footer-global area]
   Owns: .site-footer, .hx-footer-*, .hx-social, .hx-newsletter, .hx-navbar,
         .page-title / .entry-breadcrumbs / .hx-breadcrumb, .hx-notices.
   Header, promo bar, drawers and the mask are appended in 10.2 by the header
   area — append below your own sub-heading, do not interleave.
   -------------------------------------------------------------------------- */

/* --- Footer band ---------------------------------------------------------
   Single band. footer-layout = 3, padding 5rem 0, bg #1d4497, text/links
   #ffffff, link hover #bca76d, widget titles #f9f9f9 @ 18px / mb 20px.
   No copyright bar, subscribe band, categories row, payment badges or
   back-to-top: all five options are '0' (COMPONENT-INVENTORY §8).
   ------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

.footer-main {
	padding-block: var(--hx-footer-pad-y);
}

/* 3/2/2/2/3 at >=1025px. The lg breakpoint is 1025, NOT 992 — bootstrap-grid
   was retuned and the Elementor kit agrees (viewport_lg: 1025). At 992 the
   columns would collapse a full breakpoint early on tablets. */
.hx-footer-row {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.hx-footer-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.hx-footer-row {
		grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
	}
}

.site-footer a {
	color: var(--hx-inverse);
	transition: color var(--hx-t-ui);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--hx-accent-gold);
}

.hx-footer__title {
	margin-bottom: 20px;
	color: #f9f9f9;
	font-size: 18px;
	line-height: var(--hx-leading-heading);
}

.hx-footer__title--secondary {
	margin-top: 34px;
}

/* Shop column: a sub-heading per bag size (15 / 25 servings) above its flavours. */
.hx-footer__subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: rgba(249, 249, 249, .72);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hx-footer__menu + .hx-footer__subtitle,
nav + .hx-footer__subtitle {
	margin-top: 22px;
}

.hx-footer-col--shop .hx-footer__menu li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.hx-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-footer__logo-wrap {
	margin-bottom: 1rem;
}

.hx-footer__logo {
	height: auto;
	max-width: 150px;
}

.hx-benefit-icon {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hx-footer__canada-mark {
	width: 58px;
	margin: 1rem 0;
}

.hx-footer__canada-mark .hx-benefit-icon {
	width: 100%;
	height: auto;
}

.hx-footer__contact {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hx-footer__contact li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hx-footer__copyright p {
	margin-bottom: 0;
}

/* --- Social row ----------------------------------------------------------
   30x30, square, NO border-radius, 14px glyph, 7px right/bottom margin.
   The circle variant is the blog sidebar's (blog.md §12.2).
   ------------------------------------------------------------------------- */

.hx-social {
	display: flex;
	flex-wrap: wrap;
	margin-block: 1rem;
}

.hx-social__link {
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	margin-right: 7px;
	margin-bottom: 7px;
	font-size: 14px;
}

.hx-social--circle .hx-social__link {
	border-radius: var(--hx-radius-round);
}

/* --- Newsletter ----------------------------------------------------------
   Pill inputs/submit, inherited from custom_css post 2555 (20px = pill token).
   ------------------------------------------------------------------------- */

.hx-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hx-newsletter__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.5em 1em;
	border: 0;
	border-radius: var(--hx-radius-pill);
	background-color: var(--hx-bg);
	color: var(--hx-text);
}

.hx-newsletter__submit {
	border-radius: var(--hx-radius-pill);
}

/* Honeypot: must be unreachable to humans but NOT display:none, which some
   bots detect and skip. Off-canvas and removed from the tab order instead. */
.hx-newsletter__hp {
	position: absolute !important;
	left: -9999px;
	height: 1px;
	overflow: hidden;
}

/* Post-submit notice (set by inc/newsletter.php via the hx_news query arg). */
.hx-newsletter__notice {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--hx-radius-pill);
	font-size: 0.875rem;
	line-height: 1.35;
}

.hx-newsletter__notice--ok {
	color: #fff;
	background: var(--hx-success);
}

.hx-newsletter__notice--error {
	color: #fff;
	background: var(--hx-error);
}

/* --- Page-title header + breadcrumbs ------------------------------------
   POST-CLONE IMPROVEMENT (signed off 2026-08). The original PressMart band was
   an empty ~350px strip that HID its own <h1> and breadcrumb (200/150 padding,
   `.title` + `.entry-breadcrumbs` display:none, band hidden < 768px). That was a
   faithful clone of a defect. It is now a compact page header: the <h1> and the
   trail are shown, padding is sane, and it renders on every breakpoint. The band
   is still the page's single <h1> (page.php keeps .entry-content h1-free), so
   this also gives every interior page a visible, indexable title.
   See template-parts/global/page-title.php.
   ------------------------------------------------------------------------- */

#page-title {
	/* background-color, not the `background` shorthand, so a per-page bg image
	   set inline via hx_page_title_bg still shows on top of it. */
	padding-top: 34px;
	padding-bottom: 34px;
	background-color: var(--hx-bg-alt);
	border-bottom: 1px solid var(--hx-border);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.page-title .entry-header {
	margin: 0;
}

.page-title .title {
	margin: 0;
	color: var(--hx-heading);
	font-size: var(--hx-h1);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
}

.page-title .entry-breadcrumbs {
	margin-top: 10px;
	font-size: var(--hx-text-small);
	color: var(--hx-text);
}

.page-title .entry-breadcrumbs a {
	color: var(--hx-link);
}

.page-title .entry-breadcrumbs a:hover,
.page-title .entry-breadcrumbs a:focus {
	color: var(--hx-link-hover);
}

@media (max-width: 767px) {
	#page-title {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* The trail itself, for the surfaces that DO show it (Woo templates move it
   out of the band, where the hiding rules above do not reach). */
.hx-breadcrumb {
	font-size: var(--hx-text-small);
}

.hx-breadcrumb .delimiter-sep {
	display: inline-block;
	padding-inline: 6px;
}

.hx-breadcrumb .forward-slash::before {
	content: "/";
}

/* --- Notices ------------------------------------------------------------- */

.hx-notices {
	margin-block: 1rem;
}

/* --- Mobile bottom navbar ------------------------------------------------
   Fixed, light. Shown below the lg breakpoint only, matching PressMart's
   .pressmart-mobile-navbar. Clears the admin bar via the token band rather
   than the legacy hardcoded 999998/999999.
   ------------------------------------------------------------------------- */

.hx-navbar {
	position: fixed;
	z-index: calc(var(--hx-z-sticky-cta) + var(--hx-z-offset, 0));
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	background-color: var(--hx-bg);
	box-shadow: var(--hx-shadow-sticky);
}

@media (min-width: 1025px) {
	.hx-navbar {
		display: none;
	}
}

.hx-navbar__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--hx-heading);
	font-size: var(--hx-text-xs);
	gap: 2px;
	text-align: center;
	cursor: pointer;
}

.hx-navbar__icon {
	position: relative;
	display: inline-flex;
	font-size: 18px;
}

.hx-navbar__count {
	position: absolute;
	top: -6px;
	left: 100%;
	min-width: 16px;
	padding: 0 4px;
	border-radius: var(--hx-radius-round);
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
	font-size: 10px;
	line-height: 16px;
}

.hx-navbar__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The fixed bar would otherwise sit on top of the last few lines of the
   footer on short pages. */
@media (max-width: 1024px) {
	.site-footer {
		padding-bottom: 60px;
	}
}

/* ==========================================================================
   10.1.2  SCOPED GRID — MAIN CONTENT
   --------------------------------------------------------------------------
   §10.1.1 defines the bootstrap-flavoured grid under `.site-header` only, and
   explains why that scoping is load-bearing (30+ plugins ship their own
   bootstrap-ish markup; a global `.row { display:flex }` would reflow UI this
   theme never intended to touch).

   The same class names are used by the templates inside `#main-content` —
   archive-product, single-product, content-product, checkout, post-card,
   products-grid, bought-together, sidebar-filters, page-full-width and
   single-product-reviews. Without a definition they resolve to nothing, which
   collapses the product grid and the reviews panel to a single column.

   So: same utilities, same values, second scope. Still not global.

   Breakpoints follow §10.1.1 — `lg` is 1025px, NOT bootstrap's 992px, because
   PressMart retuned bootstrap-grid.css and the Elementor kit agrees
   (viewport_lg 1025). `md` is 768px and `xl` is 1200px.
   ========================================================================== */

#main-content .container {
	width: 100%;
	max-width: var(--hx-container-max);
	margin-inline: auto;
	padding-inline: var(--hx-gutter);
}

@media (min-width: 1200px) {
	#main-content .container {
		width: var(--hx-container-width);
	}
}

#main-content .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--hx-gutter) * -1);
}

#main-content [class*="col-"] {
	position: relative;
	width: 100%;
	padding-inline: var(--hx-gutter);
}

/* Base (mobile-first) — explicit spans used by the templates. */
#main-content .col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
	#main-content .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	#main-content .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	#main-content .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
	#main-content .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	#main-content .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	#main-content .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1025px) {
	#main-content .col-lg-3 { flex: 0 0 25%;         max-width: 25%; }
	#main-content .col-lg-4 { flex: 0 0 33.333333%;  max-width: 33.333333%; }
	#main-content .col-lg-9 { flex: 0 0 75%;         max-width: 75%; }
}

@media (min-width: 1200px) {
	#main-content .col-xl-3 { flex: 0 0 25%;  max-width: 25%; }
	#main-content .col-xl-9 { flex: 0 0 75%;  max-width: 75%; }
}

/* Prevent accidental horizontal scroll on mobile (long pill labels, tag lists,
   product-tab rows, etc. that spill past the viewport). `clip` stops the sideways
   scroll without turning html into a scroll container, so position:sticky and the
   fixed mobile bars keep working. */
html { overflow-x: clip; }

/* ==========================================================================
   10.1.14  Mobile / tablet header controls — Menu, Search, Cart
   --------------------------------------------------------------------------
   The global button rule (§ "button, input[type=submit]") paints EVERY button
   with a pill background, 12px/28px padding and --hx-shadow-button. The mobile
   toggles reset `border` and `background` but never the shadow or the padding,
   so the Menu control carried a ghost pill outline and the three controls sat
   at different heights. Worse, `button:hover` sets a solid primary background,
   which the search toggle's own :hover (colour only) could not undo — tapping
   search flooded it with a filled pill.
   All three are now one component: same 44px target, same icon size, same
   label, same states.
   ========================================================================== */
.header-mobile .navbar-toggle,
.header-mobile .search-icon-text,
.header-mobile .header-cart > a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 52px;
	min-height: 48px;
	padding: 4px 6px;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	background: none;
	color: var(--hx-text-strong);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

/* Beat `button:hover { background-color: var(--hx-primary) }` from the global
   button rule — the tinted wash below is the intended feedback. */
.header-mobile .navbar-toggle:hover,
.header-mobile .navbar-toggle:focus-visible,
.header-mobile .search-icon-text:hover,
.header-mobile .search-icon-text:focus-visible,
.header-mobile .header-cart > a:hover,
.header-mobile .header-cart > a:focus-visible {
	background-color: rgba(29, 68, 151, .08);
	color: var(--hx-primary);
}

.header-mobile .navbar-toggle:active,
.header-mobile .search-icon-text:active,
.header-mobile .header-cart > a:active {
	background-color: rgba(29, 68, 151, .14);
}

/* One icon size across the row, so nothing sits a pixel high. */
.header-mobile .navbar-icon .hx-icon,
.header-mobile .header-search-icon .hx-icon,
.header-mobile .header-cart-icon .hx-icon {
	display: block;
	font-size: 21px;
	line-height: 1;
}

.header-mobile .navbar-label,
.header-mobile .header-icon-text {
	display: block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
}

/* The right-hand pair sits tight to the edge without the labels colliding. */
.header-mobile .header-col-right {
	gap: 2px;
	justify-content: flex-end;
}

.header-mobile .header-mini-search { position: relative; display: flex; }

/* The cart badge is absolutely positioned against the icon, not the control,
   so it tracks the glyph rather than drifting with the label. */
.header-mobile .header-cart-icon { position: relative; display: block; }

/* The open panel should read as the active control. */
.header-mobile .search-icon-text[aria-expanded="true"],
.header-mobile .navbar-toggle[aria-expanded="true"] {
	background-color: rgba(29, 68, 151, .12);
	color: var(--hx-primary);
}

@media (max-width: 380px) {
	.header-mobile .navbar-toggle,
	.header-mobile .search-icon-text,
	.header-mobile .header-cart > a {
		min-width: 46px;
		padding: 4px 3px;
	}
}

/* The mobile topbar's welcome message is the same "Proudly Made In Canada"
   claim. Below 768px the red line under the logo says it; from 768px to 1199px
   the badge image says it. The desktop topbar track is empty by design. Either way the topbar repeat is the
   third copy, so it goes — delete this block to put it back. */
@media (max-width: 1199px) {
	.header-topbar .welcome-message {
		display: none;
	}
}

/* ---- 10.1.15  "Proudly Made in Canada" — text form for small screens ----
   The badge image (.header-logo__badge) is display:none below 768px; this is
   what shows instead. Exactly one of the two is visible at any width, and the
   text is aria-hidden because the badge image already carries the claim in its
   alt text for anyone above the breakpoint — and the footer states it too. */
.header-logo__made {
	display: none;
}

@media (max-width: 767px) {
	/* Scoped to .header-main: .header-col-center is ALSO the topbar's own centre
	   column, and stacking that one dropped the language switcher onto the logo. */
	.header-main .header-logo {
		flex-direction: column;
		align-items: center;
		gap: 1px;
	}

	.header-logo a {
		padding-block: 2px;
	}

	.header-logo__made {
		display: block;
		color: #d52b1e;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .06em;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

@media (max-width: 380px) {
	.header-logo__made {
		font-size: 9px;
		letter-spacing: .04em;
	}
}

/* The centre logo needs a true centre track on phones while the two controls
   on the right need more room than the single Menu control on the left. */
@media (max-width: 767px) {
	.site-header .header-mobile {
		display: grid;
		grid-template-columns: minmax(54px, 1fr) auto minmax(108px, 1fr);
		width: 100%;
	}

	.site-header .header-mobile .header-col {
		width: auto;
		max-width: none;
	}

	.header-mobile .header-col-center {
		justify-self: center;
	}

	.header-mobile .header-col-right {
		justify-self: end;
	}

	.header-mobile .header-logo .logo {
		max-width: min(var(--hx-logo-max), 118px);
	}
}

/* "New" tag (October 2026 launch): header menu, product size/flavour pills,
   shop shelves and the homepage size toggle. In base.css because the menu
   renders on every page. */
.hx-new-tag {
	display: inline-block;
	padding: 3px 6px 2px;
	border-radius: 999px;
	background: #c8102e;
	color: #fff;
	font-size: .6rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
}