@charset "UTF-8";
/* ==========================================================================
   Helixx — shop.css
   WooCommerce surfaces: product card, shop archive, single product, bundle
   and subscribe UI, cart, checkout, my account, mini-cart drawer, notices.

   Depends on base.css (tokens, reset, typography, layout, forms). Loaded only
   on Woo routes — is_woocommerce() || is_cart() || is_checkout() ||
   is_account_page(), see inc/enqueue.php :: hx_is_woo_surface().

   Budget (THEME-BUILD-PLAN §8): ~24 KB raw. Shop surface total CSS <= 55 KB,
   product <= 65 KB.

   ---------------------------------------------------------------------------
   OWNERSHIP — READ BEFORE EDITING

   This file is written by several agents in parallel. Each numbered section
   below is owned by exactly one surface. APPEND INSIDE YOUR OWN SECTION.
   Do not rewrite another section, do not reorder sections, and do not add a
   second :root block — every token already exists in base.css §1.

   If you need a value that is not a token, it belongs in base.css §1 as a new
   token, not hardcoded here. Ask the foundation owner rather than inventing.
   ---------------------------------------------------------------------------

   BREAKPOINTS — repeated from base.css because custom properties cannot be
   used in media queries:

     xs   480px      sm   576px      md   768px
     lg  1025px  *** NOT 992px ***   xl  1200px

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

   ---------------------------------------------------------------------------
   CLASS NAMES THAT MUST NOT BE RENAMED (THEME-BUILD-PLAN Appendix B)

   Third-party CSS and JS key off these. Several are the theme's own
   misspellings and are load-bearing exactly as written. Rename only in the
   phase-7 polish pass, with a grep-verified sweep:

     .whishlist-button          (sic)
     .pressmart-mask-overaly    (sic)
     .bos4w-display-options     .custom-ajax-add-to-cart
     .ajax-add-to-cart-button   .product-buttons-variations
     .woocommerce-LoopProduct-link
     .front-image / .hover-image
     .star-rating               .woocommerce-Price-amount
     .shop_table_responsive     .coupon-custom
     .tabs-img                  .quickview-btn
     .header-cart-icon.cart-icon
   ========================================================================== */


/* ==========================================================================
   1. PRODUCT CARD
   woocommerce/content-product.php — the single most-reused template in the
   build. Renders on shop, category, search, related, cross-sells, upsells and
   the homepage. Owned by the product-card agent.

   Notes carried from the specs:
     - image size is woocommerce_thumbnail, 430x502 (custom 6:7 crop)
     - .front-image / .hover-image crossfade uses --hx-t-image
     - the wishlist button is CSS-hidden for simple products today; the
       rebuild must NOT RENDER it for simple products (§5.6)
   ========================================================================== */

/* 1.1 — Card shell -------------------------------------------------------- */

.products div.product {
	line-height: 1.6;
	padding: 0 var(--hx-gutter);
}

.products div.product .product-wrapper {
	position: relative;
	height: 100%;
	padding: var(--hx-gutter);
	transition: box-shadow var(--hx-t-ui);
}

.products div.product:hover .product-wrapper {
	box-shadow: var(--hx-shadow-card-hover);
	z-index: var(--hx-z-card);
}

/* 1.2 — Image, hover swap, labels, quick view ----------------------------- */

.products .product-image {
	position: relative;
	overflow: hidden;
	margin-bottom: 8px;
}

.products .product-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: var(--hx-t-image);
}

.products .product-image .hover-image {
	position: absolute;
	inset: 0 auto auto 0;
	opacity: 0;
	visibility: hidden;
}

.products .product-image:hover .hover-image {
	opacity: 1;
	visibility: visible;
}

.products div.product.outofstock .product-image img {
	filter: grayscale(1);
	opacity: 0.8;
}

.product-labels {
	position: absolute;
	top: 1em;
	left: 0;
	z-index: var(--hx-z-card);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.product-labels > span {
	display: block;
	color: var(--hx-inverse);
	font-size: 10px;
	padding: 3px 10px;
	margin-top: 8px;
	text-transform: uppercase;
}

.product-labels > span:first-child {
	margin-top: 0;
}

.product-labels span.new {
	background-color: var(--hx-badge-new);
}

.product-labels span.featured {
	background-color: var(--hx-badge-featured);
}

.product-labels span.out-of-stock {
	background-color: var(--hx-badge-oos);
}

/* The theme declares --hx-badge-sale here, but wp-custom-css overrides the sale
   badge to a yellow circle and wins. PHASE0-GATE §3: this cannot be verified
   visually — zero products carry a _sale_price — so it is built from the rule,
   not from a screenshot. */
.product-labels span.on-sale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6em;
	height: 6em;
	background-color: var(--hx-plan-1);
	color: var(--hx-btn-cart-text);
	border-radius: var(--hx-radius-round);
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0;
	margin-top: 8px;
}

.products .product-image .quickview-button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(35px);
	transition: var(--hx-t-ui);
}

.products .product:hover .product-image .quickview-button,
.products .product:focus-within .product-image .quickview-button {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	z-index: var(--hx-z-card);
}

.products .product-image .quickview-button a {
	display: block;
	padding: 0.4rem;
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

/* 1.3 — Title, rating, short description ---------------------------------- */

.products.product-style-1.grid-view .product-info {
	text-align: center;
}

.products.product-style-1.grid-view .pressmart-star-rating {
	justify-content: center;
}

.products .product-title {
	font-size: 15px;
	font-weight: var(--hx-weight-body);
	line-height: var(--hx-leading-heading);
	margin: 0 0 0.4rem;
}

.products .product-title a {
	color: var(--hx-heading);
}

.products .pressmart-star-rating {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

/* Star rating.
   PressMart drew five \ea70 glyphs from presslayouts-font, twice: an unstyled
   base row inheriting the body colour, and a gold overlay clipped to the score.
   Rebuilt with a masked background so both rows are real tokens rather than a
   hardcoded hex inside a data URI — the mask is monochrome, the colour is
   --hx-text (empty) and --hx-accent-gold (filled).
   Cell = 14px star + 2px letter-spacing = 16px; five cells = 80px = 5.715em. */
.star-rating {
	--hx-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.43 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.332 1.209-6 5.848 1.416 8.263L12 19.446l-7.416 3.892L6 15.075 0 9.227l8.332-1.209z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 5.715em;
	height: 1em;
	font-size: 14px;
	line-height: 1;
	overflow: hidden;
	background-color: var(--hx-text);
	-webkit-mask-image: var(--hx-star);
	mask-image: var(--hx-star);
	-webkit-mask-size: 1.143em 1em;
	mask-size: 1.143em 1em;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.star-rating > span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
	background-color: var(--hx-accent-gold);
}

.products .rating-counts {
	margin-left: 6px;
	line-height: 1;
	font-size: var(--hx-text-xs);
}

/* Hidden in grid view, revealed in list view (see 2.7). */
.products .woocommerce-product-details__short-description {
	display: none;
}

/* 1.4 — Price ------------------------------------------------------------- */

.products .product-price {
	margin-bottom: 0.3rem;
}

/* wp-custom-css and custom-style.css BOTH set `.price{font-size:28px!important}`
   and it wins over the theme's 16px, so loop prices really do render at 32px.
   Scoped to .products here so it cannot leak onto the single-product summary,
   which shop.css §3 owns. */
.products .product-price span.price {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	font-size: 28px;
	font-weight: var(--hx-weight-heading);
	color: var(--hx-text-strong);
	line-height: 1.2;
}

.products.product-style-1.grid-view .product-price span.price {
	justify-content: center;
}

.products .product-price span.price > .woocommerce-Price-amount {
	width: 100%;
}

.products .product-price span.price del {
	width: 100%;
	order: 1;
	margin-bottom: -10px;
	font-size: var(--hx-text-small);
	font-weight: var(--hx-weight-body);
	opacity: 1;
}

.products .product-price span.price ins {
	width: 100%;
	order: 2;
	background: none;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

/* 1.5 — Cart controls ----------------------------------------------------- */

/* The yellow bos4w pill IS the primary add-to-cart control on 1187/1260/1263.
   wp-custom-css neutralises the plugin's 2px black selected ring, so the pill
   looks identical selected or not. */
.bos4w-display-options ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bos4w-display-options li label {
	display: block;
	max-width: 290px;
	margin: 10px auto;
	padding: 3px 5px;
	background-color: var(--hx-plan-1);
	color: var(--hx-btn-cart-text);
	border: 2px solid transparent;
	border-radius: var(--hx-radius-plan);
	text-align: center;
	cursor: pointer;
	font-size: var(--hx-text-button);
	font-weight: var(--hx-weight-heading);
	transition: var(--hx-t-ui);
}

.bos4w-display-options li label.selected {
	border-color: transparent;
}

.bos4w-display-options li label input {
	display: none;
}

/* The visible fallback button (product 2485).
   Two !important rules fought over its colour in production; the yellow one
   (specificity 0-4-0, wp-custom-css) beat the blue one (0-3-1,
   custom-style.css:396). Collapsed to this single rule. */
.products .ajax-add-to-cart-button {
	display: inline-block;
	min-width: 145px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--hx-radius-pill);
	box-shadow: var(--hx-shadow-button);
	background-color: var(--hx-btn-cart-bg);
	color: var(--hx-btn-cart-text);
	font-size: var(--hx-text-button);
	font-weight: var(--hx-weight-heading);
	line-height: 1.2;
	cursor: pointer;
	transition: var(--hx-t-ui);
}

.products .ajax-add-to-cart-button[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.products .custom-ajax-add-to-cart {
	margin: 0;
}

/* Hidden site-wide in production by `.product-buttons{display:none!important}`
   (custom-style.css:26, unscoped). That single rule is why the two bopobb
   bundles render no cart control at all. The modifier class is what the
   `hx_card_choose_options` flag switches on once the fix is signed off. */
.product-buttons {
	display: none;
}

.product-buttons-variations--visible .product-buttons {
	display: block;
}

.product-buttons-variations--visible .cart-button .button {
	display: inline-block;
	min-width: 145px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--hx-radius-pill);
	box-shadow: var(--hx-shadow-button);
	background-color: var(--hx-btn-cart-bg);
	color: var(--hx-btn-cart-text);
	font-size: var(--hx-text-button);
	font-weight: var(--hx-weight-heading);
	line-height: 1.2;
}

@media (max-width: 768px) {
	.bos4w-display-options li label {
		max-width: 100%;
		width: 100%;
	}
}


/* ==========================================================================
   2. SHOP / PRODUCT ARCHIVE
   woocommerce/archive-product.php, product-category archives, shop sidebar,
   result count, ordering, pagination, the SEO paragraph block.
   See page-specs/shop-archive.md.
   ========================================================================== */

/* 2.1 — Layout -----------------------------------------------------------
   The live markup used `.row.flex-row-reverse` to float the sidebar left,
   which put #secondary BEFORE #primary visually while leaving it after in
   source. The rebuild keeps the content-first DOM (correct for a11y and SEO)
   and does the same job with `order`. `.row` / `.col-*` are still emitted for
   third-party selectors but carry no layout here. */

.hx-archive {
	display: block;
}

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

@media (min-width: 768px) {
	/* The #main-content .row utility in base.css has ID-level specificity.
	   Match that scope so this archive remains a grid instead of reverting to
	   a wrapping flex row. */
	#main-content .hx-archive--has-sidebar {
		display: grid;
		grid-template-columns: 4fr 8fr;
		gap: 0 calc(var(--hx-gutter) * 3);
		align-items: start;
		margin-inline: 0;
	}

	#main-content .hx-archive--has-sidebar > .content-area {
		order: 2;
	}

	#main-content .hx-archive--has-sidebar > .widget-area {
		order: 1;
	}

	#main-content .hx-archive--has-sidebar > .content-area,
	#main-content .hx-archive--has-sidebar > .widget-area {
		width: auto;
		max-width: none;
		padding-inline: 0;
	}
}

@media (min-width: 1025px) {
	#main-content .hx-archive--has-sidebar {
		grid-template-columns: 3fr 9fr;
	}
}

/* 2.2 — Page-title band (taxonomy archives only) --------------------------
   The default .hx-page-title--show-text class reveals the title, breadcrumb,
   and mobile banner. The legacy hidden treatment remains available through
   the `hx_hide_archive_banner_text` PHP filter. */

#page-title {
	background-color: rgba(10, 27, 52, 0.38);
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center center;
	padding-top: var(--hx-hero-pad-top);
	padding-bottom: var(--hx-hero-pad-bottom);
}

.page-title.text-center {
	text-align: center;
}

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

#page-title .title {
	display: none;
	margin: 0;
	font-size: var(--hx-h1);
	line-height: 1.2;
}

#page-title .entry-breadcrumbs {
	display: none;
	margin-top: 6px;
}

#page-title .pressmart-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 6px;
}

#page-title.color-scheme-dark .title,
#page-title.color-scheme-dark .pressmart-breadcrumb,
#page-title.color-scheme-dark .pressmart-breadcrumb a {
	color: var(--hx-inverse);
}

.pressmart-breadcrumb .delimiter-sep.forward-slash::before {
	content: "/";
}

/* Reveal the category header when the template uses the default treatment. */
#page-title.hx-page-title--show-text .title,
#page-title.hx-page-title--show-text .entry-breadcrumbs {
	display: block;
}

@media (max-width: 768px) {
	#page-title:not(.hx-page-title--show-text) {
		display: none;
	}

	#page-title.hx-page-title--show-text {
		padding-block: 72px;
	}
}

/* 2.3 — Products header (toolbar) ---------------------------------------- */

.products-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.products-header-left,
.products-header-right,
.products-header .show-products-number {
	display: flex;
	align-items: center;
}

.products-header .products-header-left > *,
.products-header .products-header-right > * {
	margin: 0;
}

.products-header-right > div:not(:last-child) {
	margin-right: 15px;
}

/* The live heading was an <h5>, which left /shop/ with zero <h1>. It is an
   <h1> now at the identical rendered size — a visual no-op. */
.products-header .woocommerce-products-header__title {
	font-size: var(--hx-h5);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	margin: 0;
}

.products-header .woocommerce-result-count {
	font-size: var(--hx-text-xs);
	margin-left: 10px;
}

.products-header .product-show span {
	font-weight: var(--hx-weight-heading);
	margin-right: 5px;
}

.products-header select {
	height: 36px;
}

/* Icon-only view toggle: the label was font-size:0 in the live CSS. It is
   visually hidden here instead, so the control keeps an accessible name. */
.products-header .products-view a {
	display: inline-flex;
	align-items: center;
	margin-right: 10px;
	color: var(--hx-text);
}

.products-header .products-view a:last-child {
	margin-right: 0;
}

.products-header .products-view a.active {
	color: var(--hx-primary);
}

.products-header .products-view .hx-icon {
	font-size: 20px;
}

.products-view__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A 30x30 icon with the <select> laid invisibly on top of it. */
.woocommerce-ordering {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
	margin: 0;
	text-align: center;
	line-height: 30px;
}

.woocommerce-ordering__icon {
	font-size: 23px;
	color: var(--hx-text);
	pointer-events: none;
}

.woocommerce-ordering select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	font-weight: var(--hx-weight-body);
	text-indent: -9999px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

@media (max-width: 1024px) {
	.products-header .woocommerce-result-count,
	.products-header .products-view,
	.products-header .product-show {
		display: none;
	}
}

/* 2.4 — Active filter chips ---------------------------------------------- */

.pressmart-active-filters {
	margin-bottom: 15px;
}

.hx-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-active-filters__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-pill);
	font-size: var(--hx-text-xs);
	color: var(--hx-text);
}

.hx-active-filters__item--clear a {
	font-size: var(--hx-text-xs);
	text-decoration: underline;
}

/* 2.5 — The grid ---------------------------------------------------------
   3 columns >=768px, 2 columns below. `lg` is 1025px in this build, not 992,
   but col-md-4 and col-lg-4 are both 3 columns so there is no third state.
   The negative inline margin + per-card padding reproduces the legacy
   `.row{margin:0 -10px}` / `.col-*{padding:0 10px}` gutter exactly. */

.products.products-wrap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: calc(var(--hx-gutter) * -1);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.products.products-wrap {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 2.6 — Pagination -------------------------------------------------------- */

.pressmart-pagination {
	display: block;
	padding: 1em 0.5em;
	margin: 1em 0 2em;
	text-align: center;
}

.pressmart-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pressmart-pagination li {
	display: inline-block;
}

.pressmart-pagination li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 1px;
	border-radius: var(--hx-radius-round);
	font-weight: var(--hx-weight-heading);
	color: var(--hx-text);
}

.pressmart-pagination .next,
.pressmart-pagination .prev {
	width: auto;
	padding: 0 15px;
	text-transform: uppercase;
}

.pressmart-pagination .current {
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

/* 2.7 — List view --------------------------------------------------------
   ?view=list-view changes only the wrapper class. Card column classes are
   untouched; the grid collapses to one column and the short description,
   hidden in grid view, is revealed. */

.products.list-view.products-wrap {
	grid-template-columns: minmax(0, 1fr);
}

.products.list-view div.product {
	padding: 0 15px;
}

.products.list-view div.product .product-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--hx-gutter);
	padding: 15px 0;
	border-bottom: 1px solid var(--hx-border);
}

.products.list-view div.product:last-child .product-wrapper {
	border-bottom: none;
}

.products.list-view div.product:hover .product-wrapper {
	box-shadow: none;
}

.products.list-view .product-image {
	flex: 0 0 30%;
	max-width: 30%;
}

.products.list-view .product-info {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--hx-gutter);
	flex: 1 1 auto;
	text-align: left;
}

.products.list-view .woocommerce-product-details__short-description {
	display: block;
	margin-top: 15px;
}

.products.list-view .woocommerce-product-details__short-description ul,
.products.list-view .woocommerce-product-details__short-description ul li {
	list-style: inside none disc;
}

/* 2.8 — SEO paragraph -----------------------------------------------------
   The store's primary organic body copy for "Cream of Rice". Ported
   character-for-character; do not reword. */

.custom-responsive-content {
	margin-top: var(--hx-content-pad-y);
}

.custom-responsive-content p {
	margin: 0;
}

/* 2.9 — Sidebar and the mobile off-canvas drawer -------------------------- */

.widget-area .sidebar-inner {
	padding-top: 1em;
}

.widget-area .widget {
	margin-bottom: 30px;
}

/* <details>/<summary> replaces the jQuery slideToggle the `has-widget-toggle`
   body class used to wire up. Same interaction, keyboard-operable for free. */
.widget-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	font-weight: var(--hx-weight-heading);
	color: var(--hx-heading);
	margin-bottom: 20px;
	cursor: pointer;
	list-style: none;
}

.widget-title::-webkit-details-marker {
	display: none;
}

details.hx-widget > .widget-title::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: var(--hx-t-fast);
}

details.hx-widget[open] > .widget-title::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.price-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.price-filter-list li a {
	display: block;
	padding: 4px 0;
	color: var(--hx-text);
}

.price-filter-list li.chosen a {
	font-weight: var(--hx-weight-heading);
	color: var(--hx-primary);
}

@media (max-width: 767px) {
	.has-mobile-canvas-sidebar .widget-area {
		position: fixed;
		inset: 0 auto 0 0;
		display: flex;
		flex-direction: column;
		width: 300px;
		padding-top: 1em;
		overflow-y: auto;
		background-color: var(--hx-bg);
		z-index: calc(var(--hx-z-drawer) + var(--hx-z-offset, 0));
		transform: translateX(-100%);
		transition: var(--hx-t-drawer);
	}

	.has-mobile-canvas-sidebar .widget-area.opened {
		transform: none;
	}
}


/* ==========================================================================
   3. SINGLE PRODUCT
   Gallery, summary, price, add-to-cart, qty stepper, accordion tabs,
   _pls_ comparison tab, related products, sticky add-to-cart bar.
   See page-specs/single-product.md.
   ========================================================================== */

/* --- 3.1 Two-column row ---------------------------------------------------
   Sticky replaces jQuery sticky-kit (`stick_in_parent`, offset_top 50). The
   summary is the shorter column on every Helixx product, so it is the one that
   sticks — same outcome, no JS, no `.pressmart-is-stucked` class, and no need
   for the `padding-top: 23%/36%/44%` compensation chain the child CSS used to
   clear the stuck element. That whole chain is deliberately absent.
   ------------------------------------------------------------------------- */

.single-product-page .single-product-wrapper {
	margin-bottom: 1em; /* child theme value; parent used 3em */
}

@media (min-width: 768px) {
	.single-product-wrapper {
		align-items: start; /* stop equal-height stretch, or sticky never moves */
	}

	.single-product-wrapper > .col-md-6:last-child {
		position: sticky;
		top: 50px;
		align-self: start;
	}
}

/* --- 3.2 Gallery ---------------------------------------------------------- */

.single-product-page .woocommerce-product-gallery {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
	position: relative;
}

/* The gallery wrapper carries WooCommerce's legacy `.images` class, which core's
   own stylesheet floats at width:48%. Inside our 50% grid column that shrinks the
   product image to a quarter of the page. The two-column split is owned by
   `.col-md-6`, so reclaim the full column here. Specificity is set to just beat
   core's `.woocommerce div.product div.images`. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	width: 100%;
	float: none;
}

.woocommerce-product-gallery__wrapper {
	position: relative;
	margin: 0;
}

.woocommerce-product-gallery__wrapper,
.single-product-thumbnails {
	flex-basis: 100%;
	max-width: 100%;
}

.single-product-gallery {
	position: relative;
}

/* Crossfade. Slide 1 stays in flow and sets the intrinsic height; every other
   slide overlays it. All product imagery is square, so heights agree. */
.woocommerce-product-gallery__image {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hx-t-image), visibility var(--hx-t-image);
}

.woocommerce-product-gallery__image:first-child {
	position: relative;
}

.woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* The legacy trigger is never rendered; kept as a guard against plugins. */
.woocommerce-product-gallery__trigger {
	display: none;
}

/* --- 3.3 Thumbnail strip -------------------------------------------------
   Each thumbnail is a <label> around a visually hidden radio. The radio group
   is what drives the active slide (see 3.4) and it gives arrow-key navigation
   and a real focus ring for free — neither of which the Slick build had.
   ------------------------------------------------------------------------- */

.product-gallery-bottom .single-product-thumbnails {
	display: flex;
	margin-top: 1em;
	margin-left: -0.5em;
	margin-right: -0.5em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.hx-gallery__thumb {
	flex: 0 0 25%;
	scroll-snap-align: start;
	cursor: pointer;
	padding-left: 0.5em;
	padding-right: 0.5em;
	/* DEFECT FIXED: the live CSS dims the ACTIVE thumbnail to .6 and leaves the
	   inactive ones at 1 — the indicator is inverted. Corrected here. */
	opacity: 0.6;
	transition: opacity var(--hx-t-ui);
}

.hx-gallery__thumb:hover {
	opacity: 1;
}

.hx-gallery__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.hx-gallery__thumb:has(.hx-gallery__radio:focus-visible) {
	opacity: 1;
	outline: 3px solid var(--hx-primary);
	outline-offset: 2px;
}

.pressmart-gallery-thumbnail-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 3.4 Slide selection -------------------------------------------------
   One rule per index, linking radio N to slide N, thumbnail N and lightbox
   figure N. Capped at 12; the Amazon listing sets (Nov 2026) have 9 images. If
   a product ever exceeds 12, extend this block — slides past the cap simply stay
   on image 1 rather than breaking.
   ------------------------------------------------------------------------- */

.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(1) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(1),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(2) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(2),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(3) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(3),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(4) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(4),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(5) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(5),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(6) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(6),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(7) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(7),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(8) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(8),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(9) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(9),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(10) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(10),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(11) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(11),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(12) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(12) {
	opacity: 1;
	visibility: visible;
	z-index: var(--hx-z-card);
}

.hx-gallery__thumb:has(.hx-gallery__radio:checked) {
	opacity: 1;
}

.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(1) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(1),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(2) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(2),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(3) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(3),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(4) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(4),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(5) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(5),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(6) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(6),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(7) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(7),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(8) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(8),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(9) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(9),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(10) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(10),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(11) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(11),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(12) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(12) {
	display: block;
}

/* --- 3.5 Lightbox button and viewer --------------------------------------
   Replaces PhotoSwipe. `:target` means the control is a real link: keyboard
   reachable, back-button closable, and functional with scripting off.
   ------------------------------------------------------------------------- */

.woocommerce-product-gallery .single-product-images-btns {
	position: absolute;
	bottom: 1.5rem;
	right: 1rem;
	z-index: var(--hx-z-card);
}

.single-product-images-btns > div {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.woocommerce-product-gallery .single-product-images-btns a {
	border-radius: var(--hx-radius-round);
	box-sizing: content-box;
	box-shadow: var(--hx-shadow-ring);
	background: var(--hx-bg);
	color: var(--hx-heading);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	width: 46px;
}

.woocommerce-product-gallery .single-product-images-btns a .hx-icon {
	width: 20px;
	height: 20px;
}

.hx-lightbox {
	display: none;
}

.hx-lightbox:target {
	display: flex;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: calc(var(--hx-z-lightbox) + var(--hx-z-offset, 0));
}

.hx-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.hx-lightbox__stage {
	position: relative;
	max-width: min(1200px, 92vw);
	max-height: 88vh;
}

.hx-lightbox__figure {
	display: none;
	margin: 0;
}

.hx-lightbox__figure img {
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
}

.hx-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--hx-radius-round);
	background: var(--hx-bg);
	color: var(--hx-heading);
}

/* --- 3.6 Breadcrumbs ------------------------------------------------------
   NOTE FOR THE CLIENT: the 80px ellipsis truncation below is aggressive enough
   to render "Cream Of..." on a 1600px desktop. It is a deliberate PressMart
   design decision, not a bug, so it is cloned — but it is worth revisiting in
   the per-page polish pass.
   ------------------------------------------------------------------------- */

.woocommerce div.summary .entry-breadcrumbs {
	margin-bottom: 0.678rem;
}

.woocommerce div.product .pressmart-breadcrumb {
	margin-bottom: 0.3em;
}

.woocommerce div.product .pressmart-breadcrumb,
.woocommerce div.product .pressmart-breadcrumb a {
	font-size: var(--hx-text-xs);
}

.woocommerce div.product .pressmart-breadcrumb a,
.woocommerce div.product .pressmart-breadcrumb span:last-child {
	max-width: 80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: bottom;
}

.woocommerce div.product .pressmart-breadcrumb span:last-child {
	max-width: 200px;
}

.woocommerce div.product .pressmart-breadcrumb a:hover {
	max-width: 180px;
}

.pressmart-breadcrumb .delimiter-sep.forward-slash::before {
	content: "/";
	padding: 0 0.4em;
}

/* --- 3.7 Title ------------------------------------------------------------ */

.woocommerce div.product .product_title {
	font-size: var(--hx-h2);
	margin: 0 0 0.678rem;
	padding: 0;
	clear: none;
}

/* Clears the absolutely positioned prev/next block. */
.woocommerce div.product .entry-breadcrumbs,
.woocommerce div.product .product_title {
	margin-right: 15%;
}

/* --- 3.8 Prev/next navigation -------------------------------------------- */

.product-navigation-share {
	display: flex;
	align-items: center;
	position: absolute;
	right: 1em;
	top: 0;
}

.product-navigation {
	display: flex;
	align-items: flex-start;
}

.product-navigation .product-nav-btn {
	position: relative;
}

.product-navigation .product-nav-btn > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.product-navigation .product-prev > a {
	margin-right: 0.5em;
}

.product-navigation .product-info-wrap {
	right: -1em;
	width: 234px;
}

.product-navigation .product-info {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}

.product-navigation .product-thumb {
	margin-right: 1em;
	flex: 0 0 30%;
}

.product-navigation .product-info-wrap {
	box-shadow: var(--hx-shadow-ring);
	background: var(--hx-bg);
	position: absolute;
	padding: 4px;
	opacity: 0;
	visibility: hidden;
	right: -3em;
	top: 100%;
	pointer-events: none;
	transform: translateY(20px);
	transition: transform var(--hx-t-slide), opacity var(--hx-t-slide), visibility var(--hx-t-slide);
	z-index: var(--hx-z-card);
}

.product-navigation .product-nav-btn:hover .product-info-wrap,
.product-navigation .product-nav-btn:focus-within .product-info-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* --- 3.9 Rating ----------------------------------------------------------
   Star colour is gold, NOT brand blue — a child-theme override that is part of
   the brand's product-page identity. */

.woocommerce .star-rating span {
	color: var(--hx-accent-gold);
}

/* --- 3.10 Price ----------------------------------------------------------- */

.woocommerce div.summary > p.price,
.woocommerce div.summary > span.price {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	font-size: 28px;
}

/* Site-wide suppression of sale strikethroughs, ported from the homepage
   widget CSS. Untestable locally: no product currently carries a _sale_price. */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	display: none;
}

/* --- 3.11 Short description ---------------------------------------------- */

.woocommerce div.summary .woocommerce-product-details__short-description {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.woocommerce div.summary .woocommerce-product-details__short-description > span,
.woocommerce div.product form.cart .variations th.label {
	width: 115px;
	font-weight: var(--hx-weight-heading);
	padding-right: 0.6781em;
}

.woocommerce div.summary .woocommerce-product-details__short-description .short-description {
	flex: 1 1 auto;
}

.woocommerce div.summary .woocommerce-product-details__short-description ul {
	list-style: inside;
	margin: 0;
}

/* --- 3.12 Variations ------------------------------------------------------
   Hidden rather than removed: the label is the select's accessible name, and
   add-to-cart-variation.js binds its reset path to `.reset_variations`. */

.woocommerce div.product form.cart .variations th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce div.product form.cart .reset_variations {
	display: none;
}

/* --- 3.13 Trust badge ----------------------------------------------------- */

.pressmart-product-trust-badge {
	width: 70%;
	text-align: center;
	margin: 0 0 1rem;
	padding: 1rem;
}

.pressmart-product-trust-badge img {
	max-width: 100%;
	height: auto;
}

/* --- 3.14 Product meta ---------------------------------------------------- */

.woocommerce div.product .product_meta > span {
	display: block;
	font-size: var(--hx-text-small);
}

/* --- 3.15 Share row ------------------------------------------------------- */

.product-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.product-share .share-label {
	font-weight: var(--hx-weight-heading);
}

.product-share .pressmart-social {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.product-share .pressmart-social a,
.product-share .pressmart-social button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-round);
	background: none;
	color: var(--hx-text);
	cursor: pointer;
	transition: color var(--hx-t-ui), border-color var(--hx-t-ui);
}

.product-share .pressmart-social a:hover,
.product-share .pressmart-social button:hover {
	color: var(--hx-primary);
	border-color: var(--hx-primary);
}

.product-share .social-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 3.16 Quantity stepper and cart button -------------------------------- */

.single-product-page div.quantity {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
	margin-right: 10px;
}

/* flex-shrink squeezed these to ~8px wide on a phone, well under the 24px
   tap-target minimum, so the width is pinned rather than merely requested. */
.single-product-page div.quantity .minus,
.single-product-page div.quantity .plus {
	flex: 0 0 auto;
	width: 2.5em;
	min-width: 34px;
	border: 1px solid var(--hx-border);
	background: var(--hx-bg-alt);
	cursor: pointer;
	line-height: 1;
}

.single-product-page div.quantity .qty {
	width: 4em;
	text-align: center;
	border: 1px solid var(--hx-border);
	border-left: 0;
	border-right: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product-page div.quantity .qty::-webkit-outer-spin-button,
.single-product-page div.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- 3.17 Bought together (Amazon-style, self-contained flex) -------------
   The template still carries PressMart's Bootstrap grid classes (col-4,
   col-lg-9, col-lg-3), but that grid died with PressMart — so those columns
   collapse and the block scatters across the page. This owns the whole layout
   with its own flexbox instead: a strip of product tiles joined by "+" beside a
   compact totals card. Not dependent on any col-* width. */
.pressmart-bought-together-products {
	margin-bottom: 3em;
}
.single-product-page > .pressmart-bought-together-products .bought-together-title {
	margin-bottom: 1.2rem;
}

/* Neutralise the leftover grid so the flex rules below are unopposed. The
   #main-content prefix is needed to outrank core's `#main-content [class*="col-"]
   { width:100% }` (an ID selector), which otherwise forces .products full-width
   and wraps the totals card below the strip. */
.single-product-page > .pressmart-bought-together-products .row {
	margin: 0;
}
#main-content .pressmart-bought-together-products [class*="col-"] {
	width: auto;
	max-width: none;
	padding: 0;
}

/* Outer: product strip + totals card, side by side. The #main-content prefix is
   required to outrank core's `#main-content .row` (an ID selector), which
   otherwise re-imposes wrap and drops the totals card below the strip. */
#main-content .pressmart-bought-together-products > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
}
#main-content .pressmart-bought-together-products > .row > .products {
	flex: 1 1 auto;
	min-width: 0;
}
#main-content .pressmart-bought-together-products > .row > .items-total-price-button {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--hx-border-color, #e6e6e6);
	border-radius: 14px;
	background: var(--hx-bg-alt, #f6f7f9);
}
@media (min-width: 900px) {
	#main-content .pressmart-bought-together-products > .row {
		flex-wrap: nowrap;
	}
}
@media (max-width: 899px) {
	#main-content .pressmart-bought-together-products > .row > .items-total-price-button {
		flex-basis: 100%;
	}
}

/* Inner: the product tiles in a row, with a "+" between each. */
#main-content .pressmart-bought-together-products .products > .row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: clamp(20px, 2.6vw, 38px);
	margin: 0;
}
.single-product-page > .pressmart-bought-together-products .products div.product {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	text-align: center;
}
.single-product-page > .pressmart-bought-together-products .products div.product + div.product::before {
	content: "+";
	position: absolute;
	left: clamp(-19px, -1.3vw, -10px);
	top: 38%;
	transform: translateY(-50%);
	font-size: 1.48rem;
	font-weight: 700;
	line-height: 0;
	color: var(--hx2-ink, #16202a);
}
.single-product-page > .pressmart-bought-together-products .product-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.single-product-page > .pressmart-bought-together-products .product-image img {
	width: 100%;
	height: auto;
	max-width: 148px;
}
.single-product-page > .pressmart-bought-together-products .product-title {
	font-size: 0.82rem;
	line-height: 1.3;
	margin: 0.6rem 0 0.2rem;
}
.single-product-page > .pressmart-bought-together-products .product-info {
	text-align: center;
}
.single-product-page > .pressmart-bought-together-products .product-info .price {
	font-weight: 700;
}

/* Checkbox under each add-on tile. */
.single-product-page > .pressmart-bought-together-products .product-checkbox {
	margin-top: 0.6rem;
	display: flex;
	justify-content: center;
}
.single-product-page > .pressmart-bought-together-products .product-checkbox input {
	width: 18px;
	height: 18px;
	accent-color: var(--hx2-blue, #1d4497);
	cursor: pointer;
}

/* Totals card contents. */
.single-product-page > .pressmart-bought-together-products .items-total-price > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.7rem;
}
.single-product-page > .pressmart-bought-together-products .items-total {
	margin-top: 0.2rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--hx-border-color, #e0e0e0);
	font-weight: 700;
	font-size: 1.05rem;
}
.single-product-page > .pressmart-bought-together-products .item-price,
.single-product-page > .pressmart-bought-together-products .items-price,
.single-product-page > .pressmart-bought-together-products .total-price {
	font-weight: 700;
	white-space: nowrap;
}
.single-product-page > .pressmart-bought-together-products .add-items-to-cart-wrap {
	margin-top: 1.1rem;
}
.single-product-page > .pressmart-bought-together-products .add-items-to-cart {
	width: 100%;
}

/* Only hidden when the block is nested inside the tabs. */
.woocommerce-tabs .bought-together-title {
	display: none;
}

@media (max-width: 600px) {
	.single-product-page > .pressmart-bought-together-products .products > .row {
		flex-wrap: wrap;
	}
	.single-product-page > .pressmart-bought-together-products .products div.product {
		flex: 1 1 40%;
	}
}

/* --- 3.18 Tabs accordion -------------------------------------------------
   Native <details name>. `.tabs` is NOT hidden: its anchors point at the panel
   ids, so it doubles as no-JS navigation. */

.woocommerce-tabs {
	margin-bottom: 3em;
}

.accordion-layout .tab-content-wrap a.accordion-title,
.accordion-layout .tab-content-wrap summary.accordion-title {
	display: block;
	font-size: var(--hx-h4);
	font-weight: var(--hx-weight-heading);
	padding: 0.6871em 1em;
	position: relative;
	cursor: pointer;
	list-style: none;
}

.accordion-layout .tab-content-wrap summary.accordion-title::-webkit-details-marker {
	display: none;
}

.tab-content-wrap .accordion-title::after {
	content: "";
	position: absolute;
	right: 1em;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--hx-t-ui);
}

.tab-content-wrap[open] .accordion-title::after {
	transform: rotate(-135deg);
}

.accordion-layout .woocommerce-Tabs-panel {
	padding: 1em;
}

/* ========================================================================== 
   Protein bar pre-launch
   ========================================================================== */

.single-product-page.hx-prelaunch-bar {
	--hx-bar-accent: #c94c51;
	--hx-bar-wash: #fff3f3;
}

.single-product-page.hx-prelaunch-bar--chocolate { --hx-bar-accent: #794734; --hx-bar-wash: #f8f0ec; }
.single-product-page.hx-prelaunch-bar--caramel { --hx-bar-accent: #d47c28; --hx-bar-wash: #fff5e8; }

#main-content .hx-prelaunch-bar .entry-summary .price { margin-bottom: 18px; }

.hx-bar-launch-state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	color: var(--hx-bar-accent);
	background: var(--hx-bar-wash);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hx-bar-launch-state::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }

.hx-bar-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 15px 0 21px;
}

.hx-bar-facts > span {
	min-width: 0;
	padding: 13px 10px;
	border: 1px solid #e0e5eb;
	border-radius: 10px;
	color: #6c7580;
	background: #fff;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
}

.hx-bar-facts strong { display: block; margin-bottom: 3px; color: #1c2938; font-size: 14px; }

.hx-bar-interest {
	margin-top: 24px;
	padding: clamp(23px, 3vw, 31px);
	border: 1px solid color-mix(in srgb, var(--hx-bar-accent) 25%, #dfe4ea);
	border-radius: 17px;
	background: linear-gradient(135deg, var(--hx-bar-wash), #fff 70%);
}

.hx-bar-interest__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--hx-bar-accent, #1d4497);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hx-bar-interest h2 { margin: 0 0 8px; color: #152231; font-size: clamp(20px, 2.19vw, 26px); letter-spacing: -.025em; }
.hx-bar-interest > p { margin: 0 0 17px; color: #5f6b77; font-size: 13px; line-height: 1.55; }

.hx-bar-interest form { position: relative; display: flex; gap: 8px; margin: 0; }

.hx-bar-interest input[type="email"] {
	min-width: 0;
	min-height: 50px;
	flex: 1;
	padding: 12px 14px;
	border: 1px solid #cbd4de;
	border-radius: 9px;
	box-shadow: none;
	background: #fff;
	font-size: 14px;
}

.hx-bar-interest input[type="email"]:focus { border-color: var(--hx-bar-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-bar-accent) 14%, transparent); }

.hx-bar-interest button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 19px;
	border: 0;
	border-radius: 9px;
	color: #fff;
	background: var(--hx-bar-accent);
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
}

.hx-bar-interest button:hover,
.hx-bar-interest button:focus-visible { filter: brightness(.9); transform: translateY(-1px); }
.hx-bar-interest > small { display: block; margin-top: 10px; color: #77818c; font-size: 10px; }
.hx-bar-interest__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.hx-bar-interest__notice { padding: 11px 13px; border-radius: 8px; font-weight: 650; }
.hx-bar-interest__notice--ok { color: #28623a !important; background: #e9f5ec; }
.hx-bar-interest__notice--error { color: #852f2f !important; background: #faeaea; }

.hx-bar-collection { margin-top: clamp(55px, 7vw, 92px); padding: clamp(58px, 7vw, 90px) 0; background: #f5f7fa; }
.hx-bar-collection > .hx-container { max-width: 1180px; }
.hx-bar-collection h2 { max-width: 680px; margin: 0 0 32px; color: #152231; font-size: clamp(26px, 3.27vw, 38px); letter-spacing: -.04em; }
.hx-bar-collection__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.hx-bar-collection__item {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(120px, 1.15fr);
	align-items: center;
	gap: 10px;
	min-height: 210px;
	padding: 18px;
	border: 1px solid #dde3ea;
	border-radius: 16px;
	color: #182636;
	background: #fff;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hx-bar-collection__item:hover { border-color: #bcc8d6; box-shadow: 0 16px 35px rgba(20,39,72,.1); color: #182636; transform: translateY(-3px); }
.hx-bar-collection__item.is-current { border-color: var(--hx-primary); box-shadow: inset 0 0 0 1px var(--hx-primary); }
.hx-bar-collection__item img { width: 100%; height: 170px; object-fit: contain; }
.hx-bar-collection__item strong { display: block; margin-bottom: 7px; font-size: 17px; line-height: 1.3; }
.hx-bar-collection__item small { color: #697581; font-size: 11px; font-weight: 650; }

@media (max-width: 900px) {
	.hx-bar-collection__grid { grid-template-columns: 1fr; }
	.hx-bar-collection__item { grid-template-columns: 140px 1fr; min-height: 0; }
	.hx-bar-collection__item img { height: 140px; }
}

@media (max-width: 520px) {
	.hx-bar-facts { grid-template-columns: 1fr; }
	.hx-bar-facts > span { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
	.hx-bar-facts strong { margin: 0; }
	.hx-bar-interest form { flex-direction: column; }
	.hx-bar-interest button { width: 100%; }
	.hx-bar-collection__item { grid-template-columns: 105px 1fr; }
	.hx-bar-collection__item img { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-bar-interest button,
	.hx-bar-collection__item { transition-duration: .01ms !important; }
}

/* WooCommerce's single-product script initializes every `.woocommerce-tabs`
   wrapper as legacy tabs and hides `.wc-tab`/`.panel` elements inline. Our
   panels are native <details> content, so their visibility must follow the
   owning disclosure instead. The explicit open rule also protects the content
   from third-party tab scripts that apply an inline `display:none`. */
.accordion-layout .tab-content-wrap:not([open]) > .woocommerce-Tabs-panel {
	display: none !important;
}

.accordion-layout .tab-content-wrap[open] > .woocommerce-Tabs-panel {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.accordion-layout .tab-content-wrap:not(:last-child) {
	border-bottom: 1px solid var(--hx-border);
}

/* --- 3.19 Reviews --------------------------------------------------------- */

.woocommerce #reviews #comments ol.commentlist li {
	margin-left: 1em;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0 0 0 6em;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p {
	display: inline-block;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	font-size: 13px;
}

.woocommerce .woocommerce-Reviews .rating-counts-wrap,
.woocommerce-Reviews .clear {
	display: none;
}

/* --- 3.20 Side rail ------------------------------------------------------- */

.single-product-page .tabs-img {
	width: 100%;
	float: none;
}

.single-product-page .tabs-img img {
	border-radius: var(--hx-radius-media);
	width: 100%;
}

@media (min-width: 1200px) {
	.single-product-page .tabs-img {
		max-width: 49.2%;
	}
}

/* --- 3.21 Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
	.woocommerce div.product .entry-breadcrumbs,
	.woocommerce div.product .product_title {
		margin-right: 20%;
	}

	.product-navigation-share {
		right: 0;
	}

	.single-product-page .woocommerce-product-details__short-description {
		margin-bottom: 0;
	}

	.single-product-page > .pressmart-bought-together-products .items-total-price-button {
		margin-top: 1em;
		padding: 1em;
	}

	.single-product-page #reviews {
		display: block;
	}

	.single-product-page #reviews #comments,
	.single-product-page #reviews #review_form_wrapper {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.single-product-page div.summary form.cart .button {
		width: 100%;
	}

	.pressmart-product-trust-badge {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-left: 0.1em;
	}
}

@media (max-width: 767px) {
	.single-product-page .col-md-6 {
		text-align: center;
	}

	.entry-breadcrumbs {
		display: none;
	}

	.single-product-page .product_title {
		margin-right: 0;
	}

	.single-product-page .woocommerce-product-rating {
		max-width: 265px;
		margin: 0 auto;
	}

	.single-product-page div.quantity {
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 1.3em;
	}

	.single-product-page div.summary form.cart .button {
		width: 100%;
		padding: 1.2em;
		font-size: 1.3em;
	}

	.pressmart-product-trust-badge {
		display: block;
		text-align: center;
		margin: 0 auto;
	}

	.single-product-page .product-share {
		justify-content: center;
	}

	.single-product-page .woocommerce-tabs {
		margin-bottom: 30px;
	}
}

@media (max-width: 480px) {
	.single-product-page .pressmart-product-trust-badge {
		width: 100%;
	}
}


/* ==========================================================================
   4. BUNDLE + SUBSCRIBE
   bopobb slot grid and <dialog> picker (products 3031, 3050 only), and the
   bos4w buy-once-or-subscribe plan pills.

   Plan colours are tokens: --hx-plan-1 (#ffd814), --hx-plan-2 (#3266d3).
   Port `.bos4w-display-options li:nth-child(2) label { display: none }`
   (§5.2). The yellow pill IS the primary add-to-cart control — the native
   Woo button is display:none.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. BUNDLE — bopobb slot grid + <dialog> picker      [owner: woo-bundle]
   Section 4 is shared with the subscribe agent (4b). Append inside 4a only.

   Every value below is lifted from the plugin's bopo-frontend.css and the
   captured per-page inline CSS, not invented. The four locals in
   .hx-bundle are plugin chrome colours with no brand meaning, so they are
   component-scoped rather than promoted into base.css §1.

     tile 20.5% / separator 6%   -> woo-bopo-bundle-frontend-inline-css,
                                    identical on 3031 and 3050. The 5-pack
                                    therefore WRAPS to a second row; that is
                                    the live behaviour, do not "fix" it.
     popup 960 x 600, header 85px, title 24px/32px uppercase
     candidate grid 200px columns, gap 27px 30px, padding 0 35px 40px
   -------------------------------------------------------------------------- */

.hx-bundle {
	--hx-bundle-tile-border: rgba(230, 230, 230, 0.8);
	--hx-bundle-plus: #ababab;
	--hx-bundle-alert-bg: #eeeeee;
	--hx-bundle-alert-rule: #222222;
}

/* ---- Tile row ---- */

.hx-bundle__tiles {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
}

.hx-bundle__tile {
	width: 20.5%;
	align-self: center;
	height: 100%;
	margin-bottom: 16px;
}

.hx-bundle__tile-button {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: auto;
	padding: 0;
	background-color: var(--hx-bg);
	border: 2px solid var(--hx-bundle-tile-border);
	border-radius: var(--hx-radius);
	aspect-ratio: 1;
	cursor: pointer;
	transition: border-color var(--hx-t-ui);
}

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

.hx-bundle__tile-img {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	line-height: 0;
	border-radius: var(--hx-radius);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.hx-bundle__plus {
	display: flex;
	width: 6%;
	margin-bottom: 1em;
}

.hx-bundle__plus-icon {
	margin: auto;
	color: var(--hx-bundle-plus);
}

/* ---- Slot table ---- */

.hx-bundle__table {
	width: 100%;
	margin-bottom: 0;
	border: none;
}

.hx-bundle__slot .bopobb-item-detail-wrap {
	display: flex;
}

.hx-bundle__slot-title {
	display: -webkit-box;
	overflow: hidden;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hx-link);
	text-align: left;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hx-bundle__slot-title:hover,
.hx-bundle__slot-title:focus-visible {
	color: var(--hx-link-hover);
}

.hx-bundle__slot-edit {
	align-self: center;
	margin: 0 10px;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--hx-text-small);
	color: inherit;
	cursor: pointer;
}

.hx-bundle__slot .bopobb-item-right {
	display: flex;
	justify-content: flex-end;
}

.hx-bundle__qty,
.hx-bundle__qty-input {
	width: 27px;
	height: 24px;
	margin: auto;
	padding: 0;
	border: none;
	background-color: transparent;
	box-shadow: none;
	text-align: center;
}

.hx-bundle__qty-input {
	border-bottom: 1px solid var(--hx-secondary);
}

.hx-bundle__qty-input::-webkit-outer-spin-button,
.hx-bundle__qty-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hx-bundle__slot-price {
	display: inline-flex;
	align-self: center;
	margin-left: 15px;
	text-align: right;
}

/* Defect #3 fix: the unselected cell shows the component price, muted so it
   does not read as a confirmed selection. */
.hx-bundle__slot-price[data-placeholder] {
	opacity: 0.6;
}

.hx-bundle__alert:not(:empty) {
	margin: 10px 0;
	padding: 6px 10px 6px 14px;
	border-left: 4px solid var(--hx-bundle-alert-rule);
	background-color: var(--hx-bundle-alert-bg);
	font-size: var(--hx-text-small);
}

/* ---- <dialog> picker (defect #5: was a fixed 960x600 div) ---- */

.hx-bundle-picker {
	width: min(960px, 92vw);
	max-width: min(960px, 92vw);
	height: min(600px, 88vh);
	max-height: min(600px, 88vh);
	padding: 0;
	border: 0;
	border-radius: var(--hx-radius);
	background-color: var(--hx-bg);
	color: var(--hx-text);
	overflow: hidden;
}

.hx-bundle-picker::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

.hx-bundle-picker__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hx-bundle-picker__header {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	height: 85px;
	padding: 21px 30px;
	background-color: var(--hx-bg);
}

.hx-bundle-picker__title {
	flex: 1 1 auto;
	overflow: hidden;
	margin: 0;
	font-size: var(--hx-h3);
	line-height: 32px;
	color: var(--hx-secondary);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: clip;
}

.hx-bundle-picker__close {
	flex: 0 0 auto;
	font-size: 27px;
	color: var(--hx-secondary);
	cursor: pointer;
}

.hx-bundle-picker__list {
	flex: 1 1 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 27px 30px;
	padding: 0 35px 40px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--hx-bg);
}

.hx-bundle-picker__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hx-secondary);
	text-align: center;
	cursor: pointer;
	transition: box-shadow var(--hx-t-ui);
}

.hx-bundle-picker__card:hover,
.hx-bundle-picker__card:focus-visible {
	box-shadow: var(--hx-shadow-card-hover);
}

.hx-bundle-picker__card[hidden] {
	display: none;
}

.hx-bundle-picker__card--oos {
	opacity: 0.5;
	cursor: not-allowed;
}

.hx-bundle-picker__card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.hx-bundle-picker__card-price {
	font-weight: var(--hx-weight-heading);
}

@media (max-width: 767px) {
	.hx-bundle-picker__list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		padding: 0 16px 24px;
	}

	.hx-bundle-picker__header {
		padding: 16px;
	}
}

/* --------------------------------------------------------------------------
   end 4a
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   4b. SUBSCRIBE — bos4w purchase-mode pills   [owner: woo-single-product]
   Markup: template-parts/product/purchase-mode.php, rendered inside form.cart.

   The pill geometry and both plan colours are the child theme's, verbatim —
   this IS the design, not an approximation of it: #ffd814 one-time, #3266d3
   subscribe, 29px radius, 290px max-width, selected state a 2px black border.

   TWO DELIBERATE DEPARTURES, both required by acceptance criteria §15.19:

   1. The live radio is `display: none`, which makes the control invisible to
      keyboard users AND removes `:checked` styling — there is currently no way
      to see or change the selection without a mouse. Here the input is
      visually hidden but still focusable, so `:checked` and `:focus-visible`
      both work.
   2. `.add-to-cart-hide` is NOT ported. The live CSS hides the quantity
      stepper and the Add-to-cart button on any simple product with subscribe
      data, locking the order to a single unit; the pill then fires a synthetic
      click on the hidden button. The rebuild submits the form normally, so the
      stepper stays visible and customers can buy more than one.

   NOTE: THEME-BUILD-PLAN §5.2 also asks for
   `.bos4w-display-options li:nth-child(2) label { display: none }`, which would
   hide the subscribe pill outright. That contradicts the same sentence's
   instruction to port #3266d3, contradicts page-specs/single-product.md §7.3,
   and contradicts §15.17. Not ported — flagged for the client.
   -------------------------------------------------------------------------- */

.hx-purchase-mode {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	display: grid;
	gap: 0.5rem;
}

.hx-purchase-mode__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hx-purchase-mode__pill {
	display: block;
	background: var(--hx-plan-1);
	color: var(--hx-btn-cart-text);
	padding: 3px 5px;
	max-width: 290px;
	text-align: center;
	border-radius: var(--hx-radius-plan);
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color var(--hx-t-ui);
}

.hx-purchase-mode__option:nth-of-type(2) .hx-purchase-mode__pill {
	background: var(--hx-plan-2);
	color: var(--hx-inverse);
}

.hx-purchase-mode__option input:checked + .hx-purchase-mode__pill {
	border-color: var(--hx-secondary);
}

.hx-purchase-mode__option input:focus-visible + .hx-purchase-mode__pill {
	outline: 3px solid var(--hx-primary);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.hx-purchase-mode__pill {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.hx-purchase-mode__pill {
		margin: 0 auto;
	}
}

/* --------------------------------------------------------------------------
   end 4b
   -------------------------------------------------------------------------- */


/* ==========================================================================
   5. CART
   Cart table (6 columns), qty stepper (min=0 here, min=1 on product),
   coupon form (NATIVE, plain POST), cross-sells, cart totals.
   See page-specs/cart-checkout.md.
   ========================================================================== */

/* 5.1 Two-column wrapper.
   NOT Bootstrap columns and NOT the site-wide 10px gutter — the live wrapper
   uses 15px inline padding with a -15px negative margin, and its breakpoint is
   1025px. Both are reproduced as observed (cart-checkout.md §3.3). */
.hx-cart-layout {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}

.hx-cart-layout > * {
	width: 100%;
	padding-inline: 15px;
}

@media (min-width: 1025px) {
	.hx-cart-form {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.hx-cart-totals {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

.woocommerce-cart .woocommerce-cart-form table.cart {
	box-shadow: var(--hx-shadow-ring);
}

@media (max-width: 1024px) {
	.woocommerce-cart .woocommerce-cart-form table.cart {
		box-shadow: none;
	}

	.woocommerce-cart .woocommerce-cart-form {
		margin-bottom: 3em;
	}
}

/* 5.2 Cart table */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.shop_table td {
	padding: 8px 12px;
	vertical-align: middle;
}

.woocommerce-cart table.cart th {
	padding: 8px 12px;
	font-size: var(--hx-h5);
	text-align: left;
}

.woocommerce table.shop_table td.product-name {
	font-weight: var(--hx-weight-heading);
}

.woocommerce table.shop_table td .amount {
	font-weight: var(--hx-weight-heading);
	font-size: var(--hx-h5);
}

.woocommerce table.shop_table td.actions {
	text-align: right;
}

/* The 430x502 source is capped here. cart.php now requests the 150x150
   `thumbnail` size, so this is a guard rail rather than a 5x downscale. */
.woocommerce table.shop_table td.product-thumbnail img {
	max-width: 80px;
	width: inherit;
	height: auto;
}

.woocommerce table.shop_table td.product-remove .remove {
	display: inline-block;
	font-size: 21px;
	line-height: 1;
	color: var(--hx-text);
	text-decoration: none;
	transition: var(--hx-t-fast);
}

.woocommerce table.shop_table td.product-remove .remove:hover,
.woocommerce table.shop_table td.product-remove .remove:focus {
	color: var(--hx-error);
}

/* 5.3 Actions row + native coupon */
.woocommerce-cart .woocommerce-cart-wrapper .actions {
	padding: 15px;
}

.woocommerce-cart-wrapper .actions .coupon label {
	display: none;
}

@media (min-width: 576px) {
	.woocommerce-cart-wrapper .actions .coupon {
		display: flex;
		float: left;
		width: 60%;
		gap: 10px;
	}

	.woocommerce-cart-wrapper .actions .coupon .input-text {
		max-width: 240px;
	}
}

@media (max-width: 1024px) {
	.woocommerce-cart-wrapper .actions .coupon {
		width: 75%;
	}
}

/* The Update cart button stays in the DOM — assets/js/checkout.js clicks it on
   a quantity change. Direct-child selector, so the coupon button (nested in
   .coupon) is untouched. */
.has-auto-update-cart .actions > button[type="submit"] {
	display: none;
}

/* 5.4 Quantity stepper */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-pill);
	overflow: hidden;
}

.quantity .qty {
	width: 3.5em;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.quantity .minus,
.quantity .plus {
	flex: 0 0 auto;
	width: 2.25em;
	min-width: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--hx-text);
	font-size: var(--hx-h5);
	line-height: 1;
	cursor: pointer;
}

.quantity .minus:hover,
.quantity .plus:hover,
.quantity .minus:focus-visible,
.quantity .plus:focus-visible {
	background-color: var(--hx-bg-alt);
	color: var(--hx-text);
}

/* 5.5 Totals panel */
.woocommerce-cart-wrapper .cart_totals {
	padding: 1em;
	box-shadow: var(--hx-shadow-ring);
}

.cart-collaterals .cart_totals h2,
.hx-cart-totals .cart_totals h2 {
	font-size: 21px;
	margin-bottom: 10px;
}

.woocommerce-cart .cart_totals table th {
	text-align: left;
	font-weight: var(--hx-weight-heading);
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
}

.woocommerce-cart .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
	display: block;
	margin-bottom: 5px;
	font-weight: var(--hx-weight-heading);
	font-size: var(--hx-h5);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 100%;
}

.woocommerce-shipping-destination {
	margin-bottom: 0;
	font-size: var(--hx-text-small);
}

/* 5.6 Shipping calculator.
   No select2 — the country list is CA + US. See inc/woocommerce/cart-checkout.php. */
.woocommerce-shipping-calculator .form-row {
	margin-bottom: 10px;
}

.shop_table_responsive td .shipping-calculator-form {
	text-align: left;
}

/* 5.7 Cross-sells carousel.
   Owl's responsive columns (xl 5 / lg 4 / md 3 / sm 2 / xs 2) reproduced with
   scroll-snap. Zero JS required; assets/js/carousel.js only adds arrows/dots. */
.hx-cross-sells {
	margin-top: 3em;
}

.hx-cross-sells .hx-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 10px) / 2);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.hx-cross-sells .hx-carousel__track > * {
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.hx-cross-sells .hx-carousel__track {
		grid-auto-columns: calc((100% - 20px) / 3);
	}
}

@media (min-width: 1025px) {
	.hx-cross-sells .hx-carousel__track {
		grid-auto-columns: calc((100% - 30px) / 4);
	}
}

@media (min-width: 1200px) {
	.hx-cross-sells .hx-carousel__track {
		grid-auto-columns: calc((100% - 40px) / 5);
	}
}

/* 5.8 Mobile — the stacked card layout.
   Every <td> carries data-title and it is LOAD-BEARING: it is the only label
   the customer gets once the <thead> is hidden. */
@media (max-width: 1024px) {
	.shop_table_responsive thead,
	.shop_table_responsive th {
		display: none;
	}

	.shop_table_responsive tr {
		display: block;
		position: relative;
		margin-bottom: 20px;
	}

	.shop_table_responsive td {
		display: block;
		padding: 0 0 8px;
		margin-bottom: 8px;
		border-bottom: none;
		text-align: right;
	}

	.shop_table_responsive td::before {
		content: attr(data-title);
		float: left;
		padding-top: 3px;
		color: var(--hx-heading);
		font-size: var(--hx-text-xs);
		font-weight: var(--hx-weight-heading);
	}

	.woocommerce-cart table.cart tr {
		display: block;
		border: 0;
		margin-bottom: 20px;
		padding-bottom: 20px;
		padding-left: 112px;
	}

	.woocommerce-cart table.cart .product-thumbnail {
		position: absolute;
		left: 0;
	}

	.woocommerce-cart table.cart .product-thumbnail::before {
		content: none;
	}

	.woocommerce-cart table.cart .product-thumbnail img {
		max-width: 98px;
	}

	.woocommerce-cart table.cart td.product-name {
		margin-right: 2.5em;
		text-align: left;
	}

	/* Sticky checkout CTA.
	   position:sticky, not the live position:fixed — fixed dragged in the
	   .pressmart-back-to-top{bottom:68px} offset chain (§3.9). */
	.woocommerce-cart.has-mobile-bottom-navbar-single-page .wc-proceed-to-checkout {
		position: sticky;
		bottom: 0;
		z-index: var(--hx-z-sticky-cta);
		padding: 0;
		border-radius: 0;
		box-shadow: var(--hx-shadow-ring-strong);
		background-color: var(--hx-bg);
	}

	.woocommerce-cart.has-mobile-bottom-navbar-single-page .wc-proceed-to-checkout .checkout-button {
		border-radius: 0;
	}
}


/* ==========================================================================
   6. CHECKOUT
   Billing/shipping form, review order, and the CUSTOM .coupon-custom AJAX
   block inside the review-order <tfoot>.

   The cart and checkout coupon UIs are DELIBERATELY DIFFERENT (§5.3).
   Do not unify them. Totals row label is "Shipment", not "Shipping"; the tax
   row is "GST".
   ========================================================================== */

/* 6.1 Shell — 7/5 grid.
   Breakpoint is md (768px), not lg. #payment is server-rendered in the LEFT
   column by form-checkout.php; there is no JS relocation to compensate for. */
.hx-checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 20px;
}

@media (min-width: 768px) {
	.hx-checkout {
		grid-template-columns: 7fr 5fr;
		align-items: start;
	}

	/* Replaces the live scroll handler that toggled .order-review-inner.fixed
	   with a hardcoded max-width:430px. Pure CSS, no jitter, no resize bug. */
	.hx-checkout__summary {
		position: sticky;
		top: 10px;
	}
}

.woocommerce-checkout .order-review-inner {
	position: relative;
	padding: 0.6871em;
	box-shadow: var(--hx-shadow-ring);
}

/* Billing and shipping are stacked, NOT side by side — both children of
   #customer_details are forced full width. */
.woocommerce-checkout .col2-set:not(.addresses) .col-1,
.woocommerce-checkout .col2-set:not(.addresses) .col-2 {
	flex: 1 0 100%;
	max-width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields {
	margin-bottom: 3em;
}

.woocommerce-checkout .woocommerce-shipping-fields h3 {
	font-size: 18px;
}

/* 6.2 Form rows.
   The live theme floats .form-row-first/.form-row-last at 48% with a 4% gutter
   and needs <div class="clear"> spacers to close the floats. Grid instead: the
   templates no longer emit those spacers, and stray ones are harmless. */
.woocommerce .form-row {
	margin-bottom: 1em;
}

.woocommerce .form-row .woocommerce-input-wrapper {
	display: block;
}

.woocommerce .form-row-wide,
.woocommerce .form-row.notes {
	width: 100%;
}

@media (min-width: 576px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-EditAccountForm {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4%;
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.woocommerce-shipping-fields__field-wrapper > .form-row-wide,
	.woocommerce-EditAccountForm > .form-row-wide,
	.woocommerce-EditAccountForm > fieldset,
	.woocommerce-EditAccountForm > p:not(.form-row) {
		grid-column: 1 / -1;
	}

	.woocommerce .clear {
		display: none;
	}
}

.woocommerce .required {
	color: var(--hx-error);
	text-decoration: none;
}

.woocommerce .optional {
	color: var(--hx-text);
	font-size: var(--hx-text-small);
}

/* 6.3 Review order table.
   The live rule is `th, td { width: 55% }` on a two-column table — nonsense the
   browser normalises away. Replaced with auto width plus a right-aligned last
   column, which is what it was trying to say. */
.woocommerce-checkout table.shop_table th {
	padding: 0 10px;
	font-size: var(--hx-text-small);
	line-height: 18px;
	text-align: left;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	width: auto;
}

.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tbody td:last-child,
.woocommerce-checkout-review-order-table tfoot td:last-child {
	text-align: right;
}

.woocommerce-checkout-review-order td.product-name {
	display: flex;
	align-items: center;
	width: 100%;
}

.woocommerce-checkout-review-order .pressmart-product-thumb {
	min-width: 40px;
	margin-right: 10px;
}

.woocommerce-checkout .order-review-inner .pressmart-product-desc {
	font-size: var(--hx-text-small);
	line-height: 17px;
}

.woocommerce-checkout ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout ul#shipping_method li label {
	font-size: var(--hx-text-small);
}

@media (max-width: 1024px) {
	.woocommerce-checkout .pressmart-product-thumb {
		display: none;
	}

	.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
		table-layout: fixed;
	}
}

/* 6.4 The bespoke coupon block.
   Inline styles from the child theme's #coupon-error-message live here now. */
.woocommerce-checkout .coupon-custom {
	display: flex;
}

.woocommerce-checkout .coupon-custom .input-wrap {
	width: 66%;
}

.woocommerce-checkout .coupon-custom button#apply-coupon-btn {
	height: 41px;
	margin-left: 5px;
	padding: 0 10px;
	font-size: var(--hx-text-small);
}

.woocommerce-checkout .coupon-custom #coupon-error-message {
	margin-top: 5px;
	color: var(--hx-error);
	font-size: var(--hx-text-small);
	text-align: left;
}

/* Replaces the JS-assigned inline border-color. */
.woocommerce-checkout .coupon-custom #coupon_code.is-error {
	border-color: var(--hx-error);
}

.woocommerce-checkout .coupon-custom button.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* 6.5 Payment */
.woocommerce-checkout #payment {
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	position: relative;
	margin-top: 1em;
	padding: 1em;
	background: none;
	color: inherit;
	box-shadow: var(--hx-shadow-ring);
}

/* One gateway still renders a radio (WooCommerce needs the input in the form).
   Hide the control, keep the value postable. */
.woocommerce-checkout .wc_payment_methods li:only-child .input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.woocommerce-checkout .place-order .button,
.woocommerce-checkout #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	background-color: var(--hx-btn-checkout-bg);
	color: var(--hx-inverse);
}

.woocommerce-privacy-policy-text {
	font-size: var(--hx-text-small);
}

@media (max-width: 1024px) {
	.woocommerce-page .col2-set .col-1 {
		margin-bottom: 2em;
	}

	/* Sticky place-order. sticky, not fixed — same reasoning as the cart CTA. */
	.woocommerce-checkout.has-mobile-bottom-navbar-single-page .place-order {
		position: sticky;
		bottom: 0;
		z-index: var(--hx-z-sticky-cta);
		background-color: var(--hx-bg);
		box-shadow: var(--hx-shadow-ring-strong);
	}

	.woocommerce-checkout.has-mobile-bottom-navbar-single-page #place_order {
		border-radius: 0;
	}
}


/* ==========================================================================
   7. MY ACCOUNT
   Login form, account navigation (8 items incl. the wt-smart-coupons and
   ddwcaf plugin endpoints), orders, addresses, downloads.
   See page-specs/my-account.md.

   Registration is disabled site-wide (woocommerce_enable_myaccount_registration
   = no), so half of form-login.php is dead code.
   ========================================================================== */

/* 7.1 Login card.
   --hx-login-shadow is a COMPONENT-scoped property, not a new global token and
   not a second :root block. The card's shadow is 0 0 3px rgba(0,0,0,.20),
   which is a fifth alpha step nothing else on the site uses; promoting it to a
   global token for one component would be worse than scoping it here. */
.hx-login-card {
	--hx-login-shadow: 0 0 3px rgba(0, 0, 0, .2);

	max-width: 695px;
	margin: 1em auto 0;
	box-shadow: var(--hx-login-shadow);
}

.woocommerce-account .hx-login-card {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.hx-login-card .customer-login {
	display: none;
	flex-direction: row;
}

.hx-login-card .customer-login.active {
	display: flex;
}

.customer-login-left {
	flex: 40%;
	padding: 40px 35px;
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
	font-size: var(--hx-h5);
}

.customer-login-left h2 {
	margin-bottom: 10px;
	color: var(--hx-inverse);
}

.customer-login-right {
	flex: 60%;
	padding: 40px 35px;
}

.woocommerce .form-row.woocommerce-rememberme-lost_password {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.woocommerce .woocommerce-rememberme-lost_password label {
	margin: 0;
}

.woocommerce form .woocommerce-rememberme-lost_password label,
.woocommerce form .woocommerce-rememberme-lost_password a {
	font-weight: var(--hx-weight-heading);
	color: var(--hx-primary);
}

.hx-login-card .button {
	width: 100%;
	text-align: center;
}

.hx-login-card .button.loading {
	position: relative;
	color: rgba(255, 255, 255, .05);
	pointer-events: none;
}

.hx-login-card .signin-up-error-message {
	color: var(--hx-badge-oos);
}

.hx-login-card .signin-up-success-message {
	color: var(--hx-discount);
}

@media (max-width: 767px) {
	.hx-login-card .customer-login {
		flex-wrap: wrap;
	}

	/* Both children get flex:100%. The live site only sets it on -right and
	   relies on flex-wrap to push the left panel onto its own row — which works
	   by accident, at a width it never intended. */
	.customer-login-left,
	.customer-login-right {
		flex: 100%;
	}

	.customer-login-right {
		padding: 30px 20px;
	}

	.woocommerce .form-row.woocommerce-rememberme-lost_password {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* 7.2 Dashboard shell.
   Scoped to .hx-account, not to `.woocommerce`. The affiliate plugin nests its
   own .woocommerce div inside the content column; the live layout only survives
   that because of a direct-child combinator (my-account.md §5). */
.hx-account {
	display: flex;
	flex-flow: row;
}

.hx-account .MyAccount-navigation-wrapper {
	flex: 0 0 25%;
	max-width: 25%;
}

.hx-account .woocommerce-MyAccount-content {
	flex: 0 0 75%;
	max-width: 75%;
	padding-left: 2em;
}

@media (max-width: 767px) {
	.hx-account {
		flex-flow: column;
	}

	.hx-account .MyAccount-navigation-wrapper,
	.hx-account .woocommerce-MyAccount-content {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
	}

	.hx-account .MyAccount-navigation-wrapper {
		margin-bottom: 2em;
	}
}

/* 7.3 Profile card + nav.
   The two read as one stacked unit: blue card with square bottom corners, grey
   bordered list flush beneath it. */
.hx-user-profile {
	padding: 2em 1em;
	background-color: var(--hx-primary);
	border: 1px solid var(--hx-primary);
	border-radius: 0;
	text-align: center;
}

.hx-user-profile .user-avatar img {
	width: 80px;
	height: 80px;
	padding: 5px;
	border: 1px solid var(--hx-inverse);
	border-radius: var(--hx-radius-round);
	vertical-align: middle;
}

.hx-user-profile .user-info .display-name {
	margin-top: 10px;
	margin-bottom: 0;
	color: var(--hx-inverse);
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hx-border);
	border-radius: 0;
}

.woocommerce-MyAccount-navigation ul li {
	margin-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: 1rem 1rem 1rem 1.7rem;
	text-decoration: none;
	transition: var(--hx-t-fast);
}

.woocommerce-MyAccount-navigation li:not(:last-child) a {
	border-bottom: 1px solid var(--hx-border);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li:hover a,
.woocommerce-MyAccount-navigation li a:focus-visible {
	background-color: var(--hx-bg-alt);
}

/* Inline SVG, not a webfont glyph. This is what removes the 121 KB
   presslayouts-font from the account page type. */
.hx-account-nav__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--hx-primary);
}

/* 7.4 Section title — shared by orders, downloads, addresses, account details */
.hx-section-title {
	margin-bottom: 1.5em;
}

.hx-section-title h2 {
	margin-bottom: .25em;
}

.hx-section-title p {
	margin-bottom: 0;
}

/* 7.5 Orders table */
.woocommerce table.my_account_orders {
	font-size: var(--hx-text-small);
}

.woocommerce table.my_account_orders th {
	text-align: left;
}

.woocommerce table.my_account_orders .button {
	padding: 10px 14px;
	font-size: var(--hx-text-xs);
	line-height: 16px;
}

.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-number a {
	font-weight: var(--hx-weight-heading);
	color: var(--hx-primary);
}

.woocommerce-Pagination a.button {
	background: none;
	box-shadow: none;
	font-weight: var(--hx-weight-heading);
	color: var(--hx-primary);
}

/* 7.6 Addresses */
.woocommerce-account .addresses .title .edit {
	font-weight: var(--hx-weight-heading);
	color: var(--hx-primary);
}

.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
}

@media (min-width: 768px) {
	.woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}

/* 7.7 Affiliate dashboard.
   Plugin-owned markup; PressMart shipped no layout for it at all and the
   plugin's own CSS is minimal, so the grids come from the theme. Do NOT try to
   restyle the <canvas> charts — they are drawn by the plugin's chart.js. */
.ddwcaf-affiliate-statistics-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

@media (min-width: 768px) {
	.ddwcaf-affiliate-statistics-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.ddwcaf-affiliate-statistics-container {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.ddwcaf-analytics-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 1025px) {
	.ddwcaf-analytics-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ddwcaf-dashboard-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.ddwcaf-dashboard-navigation-item a {
	display: block;
	padding: .6rem 1rem;
	border: 1px solid var(--hx-border);
	text-decoration: none;
}

.ddwcaf-dashboard-navigation-item.ddwcaf-active a {
	background: var(--hx-primary);
	border-color: var(--hx-primary);
	color: var(--hx-inverse);
}


/* ==========================================================================
   8. MINI-CART DRAWER
   Header cart trigger, off-canvas drawer, mask, fragments.

   Drawer z-index must clear the admin bar via the offset band declared in
   base.css §1 — use calc(var(--hx-z-drawer) + var(--hx-z-offset, 0)), never a
   hardcoded 999998/999999.
   ========================================================================== */


/* ==========================================================================
   9. NOTICES AND SHARED SHOP CHROME
   woocommerce-message / -info / -error, stock and backorder copy, price
   formatting, star rating, badges (sale / out-of-stock / new / featured),
   trust badges, product policies.

   Badge colours are tokens: --hx-badge-sale, --hx-badge-oos, --hx-badge-new,
   --hx-badge-featured.

   NOTE (PHASE0-GATE §3): sale badges CANNOT be visually verified — zero
   products carry a _sale_price, so neither badge renders anywhere in the
   captured baseline. Build from the customizer CSS rule, not from a
   screenshot:
     .product-labels span.on-sale {
       background-color: #ffd814; color: black;
       border-radius: 50%; width: 6em; height: 6em;
     }
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.a NOTICES — added by the woo-funnel agent.

   Claimed here because the funnel is the first surface that needs them: the
   empty cart, the coupon blocklist error, the empty orders/downloads states
   and the wholesale "non-wholesale user" notice are all this component.
   If another surface needs a variant, extend this block — do not restate it.

   The live rules use an icon-font glyph in the 3.5em left padding (\ea04
   success, \e978 info, \e998 mail). Those are replaced with inline SVG at the
   call site, so the padding is kept and the ::before glyph is not.
   -------------------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	margin: 0 0 2em;
	padding: 1em 2em 1em 3.5em;
	background: var(--hx-notice-bg);
	color: var(--hx-notice-text);
	border-top: 3px solid;
	list-style: none;
}

.woocommerce-message {
	border-top-color: var(--hx-success);
}

.woocommerce-info {
	border-top-color: var(--hx-info);
}

.woocommerce-error {
	border-top-color: var(--hx-error);
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
	margin-left: 1em;
}

/* --------------------------------------------------------------------------
   9.b ORDER RECEIVED — added by the woo-funnel agent.

   NOT VERIFIED AGAINST A LIVE RENDER: no orders exist locally, so this is
   built from theme.css:9074-9112 / 15018-15038 and must be checked against
   production before sign-off.
   -------------------------------------------------------------------------- */
.woocommerce-order .woocommerce-notice {
	font-size: 1.26rem;
	text-align: center;
}

.woocommerce-order .woocommerce-notice--success {
	color: var(--hx-discount);
}

.woocommerce ul.order_details {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 2rem;
	margin: 0 0 2em;
	border: 2px dashed var(--hx-border);
	border-radius: var(--hx-radius);
	list-style: none;
}

.woocommerce ul.order_details li {
	padding-right: 3em;
	margin-bottom: 0;
	border-right: 2px dashed var(--hx-border);
	list-style-type: none;
	text-align: center;
}

/* The original leaves a dangling divider on the last item. Fixed. */
.woocommerce ul.order_details li:last-child {
	padding-right: 0;
	border-right: none;
}

.woocommerce ul.order_details li strong {
	display: block;
	color: var(--hx-link);
	text-align: center;
}

/* The gateway instructions paragraph (Interac E-Transfer). */
.woocommerce-order .order_details + p {
	font-size: var(--hx-h5);
}

@media (max-width: 1024px) {
	.woocommerce-order .woocommerce-notice {
		font-size: var(--hx-h5);
	}

	.woocommerce ul.order_details {
		flex-direction: column;
		align-items: inherit;
		padding: 1rem;
	}

	.woocommerce ul.order_details li {
		padding: 0;
		border: none;
		text-align: inherit;
	}

	.woocommerce ul.order_details li:not(:last-child) {
		margin-bottom: 1.5em;
	}

	.woocommerce ul.order_details li strong {
		display: initial;
		margin-left: .5rem;
	}
}

/* ==========================================================================
   Single product — above-the-fold rebalance (2026-08)
   50/50 left the photo oversized, the buy column cramped, and a big void under
   the short gallery. Gallery ~40% / summary ~60%, a capped image, a tighter
   summary so the CTA clears the fold, and a reassurance strip filling the left
   column under the gallery. #main-content prefixes outrank core's ID grid rules.
   ========================================================================== */
@media (min-width: 768px) {
	#main-content .single-product-wrapper > .col-md-6:first-child {
		flex: 0 0 34%;
		max-width: 34%;
	}
	#main-content .single-product-wrapper > .col-md-6:last-child {
		flex: 0 0 66%;
		max-width: 66%;
	}
}

/* WooCommerce core floats div.summary right at width:48%, which left a big empty
   band down the middle of the row (the summary only filled the right ~half of
   its column). Let it fill its column instead — mirrors the .images fix. The
   selector beats core's `.woocommerce div.product div.summary`. */
.woocommerce div.product .summary.entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

/* Cap the product image so it isn't oversized; centre it and the thumbnails.
   The reassurance strip and benefits badge share the cap so the whole left rail
   lines up under the image. */
.single-product-page .single-product-images-wrapper.single-product-gallery,
.single-product-page .single-product-thumbnails,
.single-product-page .hx-reassure,
.single-product-page .pressmart-product-trust-badge {
	max-width: 420px;
	margin-inline: auto;
}
.single-product-page .pressmart-product-trust-badge {
	margin-top: 1.6rem;
}
.single-product-page .pressmart-product-trust-badge img {
	width: 100%;
	height: auto;
}

/* Tighter summary rhythm so price + Add to cart stay above the fold. */
#main-content .single-product-page .product_title {
	font-size: clamp(1.33rem, 1.55vw, 1.59rem);
	line-height: 1.18;
	margin: 0 0 .4rem;
}
#main-content .single-product-page .entry-summary .woocommerce-product-rating {
	margin: 0 0 .5rem;
}
#main-content .single-product-page .entry-summary .price {
	margin: .2rem 0 .55rem;
}
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: .9rem;
}

/* Reassurance strip under the gallery — fills the void, adds purchase trust. */
.hx-reassure {
	display: grid;
	gap: .9rem;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--hx-border-color, #e6e6e6);
}
.hx-reassure__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--hx-text, #1b2733);
}
.hx-reassure__item svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--hx2-blue, #1d4497);
}

@media (max-width: 767px) {
	/* On desktop the reassurance strip + benefits badge sit in the gallery column
	   to fill the left rail. Stacked on mobile that would push the buy box down,
	   so `display:contents` promotes the column's children to flex items and
	   `order` drops the trust content below the summary: image → buy box → trust. */
	#main-content .single-product-wrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	#main-content .single-product-wrapper > .col-md-6:first-child {
		display: contents;
	}
	#main-content .single-product-wrapper > .col-md-6:first-child > .woocommerce-product-gallery {
		order: 1;
	}
	#main-content .single-product-wrapper > .col-md-6:first-child > .yith-wcwl-add-to-wishlist {
		order: 2;
	}
	#main-content .single-product-wrapper > .col-md-6:last-child {
		order: 3;
	}
	#main-content .single-product-page .hx-reassure {
		order: 4;
	}
	#main-content .single-product-page .pressmart-product-trust-badge {
		order: 5;
	}

	.single-product-page .single-product-images-wrapper.single-product-gallery,
	.single-product-page .single-product-thumbnails,
	.single-product-page .hx-reassure {
		max-width: 460px;
	}
}

/* ==========================================================================
   Custom /shop/ landing — template-parts/shop/index.php
   Category shelves + "add one of each" + brand story.
   ========================================================================== */
.hx-shop {
	padding-block: 0;
	background: #fff;
}

.hx-shop__titlebar {
	padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 48px);
	border-bottom: 1px solid var(--hx-border-color, #e3e6e9);
	background: #fff;
}

.hx-shop__titlebar-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px 60px;
}

.hx-shop__titlebar-copy { max-width: 620px; }
.hx-shop__titlebar .hx-shop__eyebrow { margin-bottom: 12px; }
.hx-shop__titlebar h1 {
	margin: 0 0 10px;
	font-size: clamp(2.38rem, 4vw, 3.75rem);
	line-height: .95;
	letter-spacing: -.055em;
}
.hx-shop__titlebar-copy > p:last-child {
	margin: 0;
	color: #596570;
	font-size: 1rem;
	line-height: 1.6;
}
.hx-shop__titlebar .hx-shop__proof {
	justify-content: flex-end;
	margin: 0;
}
.hx-shop__titlebar .hx-shop__proof li {
	min-height: 40px;
	padding: 6px 11px;
	border: 1px solid #dfe5ed;
	border-radius: 8px;
	background: #f7f9fc;
}

.hx-shop__hero {
	position: relative;
	padding: clamp(58px, 7vw, 96px) 0 clamp(72px, 8vw, 112px);
	overflow: hidden;
	background: linear-gradient(135deg, #f5f2eb 0%, #fbfbf8 55%, #edf2fb 100%);
}

.hx-shop__hero::after {
	position: absolute;
	right: -12vw;
	bottom: -40%;
	width: min(62vw, 900px);
	aspect-ratio: 1;
	border: 1px solid rgba(29, 68, 151, .11);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.hx-shop__hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
	align-items: center;
	gap: clamp(44px, 6vw, 92px);
}

.hx-shop__hero-copy { max-width: 680px; }

.hx-shop__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--hx2-blue, #1d4497);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hx-shop__eyebrow::before {
	width: 30px;
	height: 2px;
	background: currentColor;
	content: "";
}

.hx-shop__hero h1 {
	max-width: 760px;
	margin: 0 0 22px;
	font-size: clamp(2.31rem, 3.5vw, 3.5rem);
	line-height: .99;
	letter-spacing: -.055em;
}

.hx-shop__lede {
	max-width: 620px;
	margin: 0;
	color: #505d68;
	font-size: clamp(1.02rem, 1.39vw, 1.16rem);
	line-height: 1.72;
}

.hx-shop__hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-top: 30px;
}

.hx-shop__primary-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 54px;
	padding: 14px 22px 14px 26px;
	border-radius: 999px;
	background: var(--hx2-blue, #1d4497);
	box-shadow: 0 12px 28px rgba(29, 68, 151, .2);
	color: #fff;
	font-size: .92rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hx-shop__primary-cta span { font-size: 1.1rem; }

.hx-shop__primary-cta:hover,
.hx-shop__primary-cta:focus-visible {
	background: var(--hx2-ink, #16202a);
	box-shadow: 0 16px 32px rgba(22, 32, 42, .22);
	color: #fff;
	transform: translateY(-2px);
}

.hx-shop__secondary-cta {
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: var(--hx2-ink, #16202a);
	font-size: .88rem;
	font-weight: 750;
	text-decoration: none;
}

.hx-shop__secondary-cta:hover,
.hx-shop__secondary-cta:focus-visible { color: var(--hx2-blue, #1d4497); }

.hx-shop__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 28px 0 0;
	padding: 0;
	color: #394651;
	font-size: .78rem;
	font-weight: 700;
	list-style: none;
}

.hx-shop__proof li { display: flex; align-items: center; gap: 7px; }

.hx-shop__proof .hx-benefit-icon { width: auto; max-width: 29px; height: 29px; }

.hx-shop__hero-visual {
	position: relative;
	margin: 0;
}

.hx-shop__product-stage {
	position: relative;
	display: grid;
	place-items: center;
	max-width: 610px;
	margin-left: auto;
	padding: clamp(18px, 3vw, 36px);
	border: 1px solid rgba(29, 68, 151, .12);
	border-radius: 42% 42% 24px 24px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 30px 70px rgba(22, 39, 57, .12);
}

.hx-shop__product-stage::before {
	position: absolute;
	top: 12%;
	right: 8%;
	left: 8%;
	height: 52%;
	border-radius: 50%;
	background: #e8eefb;
	content: "";
}

.hx-shop__product-stage img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.hx-shop__flavour-note {
	position: absolute;
	z-index: 2;
	right: -14px;
	bottom: 28px;
	display: flex;
	min-width: 174px;
	padding: 17px 20px;
	border-radius: 16px;
	background: var(--hx2-ink, #16202a);
	box-shadow: 0 18px 40px rgba(22, 32, 42, .2);
	color: #fff;
	flex-direction: column;
}

.hx-shop__flavour-note strong { font-size: 1rem; }
.hx-shop__flavour-note span { margin-top: 3px; color: #cbd3da; font-size: .7rem; }
.hx-shop__notices { margin-bottom: 22px; }

/* Category jump navigation. Generated from the same ordered term list as the
   sections below, so every control always has a matching target. */
.hx-shop-nav {
	position: relative;
	z-index: 3;
	margin: 24px 0 10px;
}

.hx-shop-nav ul {
	display: grid;
	grid-template-columns: repeat(var(--hx-shop-nav-count, 2), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--hx-border-color, #e3e6e9);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	list-style: none;
}

.hx-shop-nav li + li {
	border-left: 1px solid var(--hx-border-color, #e3e6e9);
}

.hx-shop-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 62px;
	padding: 15px 24px;
	color: var(--hx2-ink, #16202a);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}

.hx-shop-nav a span:last-child {
	color: var(--hx2-blue, #1d4497);
	font-size: 1.14rem;
	transition: transform .2s ease;
}

.hx-shop-nav a:hover,
.hx-shop-nav a:focus-visible {
	background: var(--hx2-blue, #1d4497);
	color: #fff;
}

.hx-shop-nav a:hover span:last-child,
.hx-shop-nav a:focus-visible span:last-child {
	color: #fff;
	transform: translateY(3px);
}

/* Category section */
.hx-shop-cat { padding: clamp(52px, 6vw, 78px) 0; border-top: 1px solid var(--hx-border-color, #ececec); scroll-margin-top: 110px; }
.hx-shop-cat:first-of-type { border-top: 0; padding-top: 32px; }
.hx-shop-cat__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 34px; }
.hx-shop-cat__intro { flex: 1 1 420px; min-width: 0; }
.hx-shop-cat__intro h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: clamp(1.71rem, 2.65vw, 2.28rem); letter-spacing: -.035em; margin: 0 0 .55rem; }
.hx-shop-cat__badge { padding: 4px 11px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-shop-cat__desc { max-width: 640px; margin: 0; color: var(--hx-text-muted, #5a6470); line-height: 1.6; }

/* Add one of each */
.hx-shop-cat__addall { margin: 0; flex: 0 0 auto; }
.hx-shop-addall-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--hx2-ink, #16202a); color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.hx-shop-addall-btn:hover { background: var(--hx2-blue, #1d4497); transform: translateY(-1px); }
.hx-shop-addall-btn span { font-size: 1.15em; line-height: 0; }

/* Product shelf — fills the row for a few, wraps for many; the page scrolls. */
.hx-shop-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(18px, 2.3vw, 28px); }
.hx-shop-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e7ec; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 32, .045); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.hx-shop-card:hover { border-color: rgba(29, 68, 151, .3); box-shadow: 0 20px 44px rgba(16, 24, 32, .11); transform: translateY(-5px); }
.hx-shop-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(145deg, #f7f8fb, #edf1f7); }
.hx-shop-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .35s ease; }
.hx-shop-card:hover .hx-shop-card__media img { transform: scale(1.035); }
.hx-shop-card__flag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hx-shop-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.hx-shop-card__title { font-size: 1.06rem; line-height: 1.35; margin: 0; }
.hx-shop-card__title a { color: var(--hx2-ink, #16202a); text-decoration: none; }
.hx-shop-card__title a:hover { color: var(--hx2-blue, #1d4497); }
.hx-shop-card__excerpt { margin: 0; color: var(--hx-text-muted, #6b7580); font-size: .85rem; line-height: 1.5; }
.hx-shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.hx-shop-card__price { font-size: 1.14rem; font-weight: 700; color: var(--hx2-ink, #16202a); }
.hx-shop-card__price del { color: var(--hx-text-muted, #9aa3ab); font-weight: 500; font-size: .9em; margin-right: 4px; }
.hx-shop .hx-shop-card__foot a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 17px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; border: 0; }
.hx-shop .hx-shop-card__foot a.button:hover { background: var(--hx2-ink, #16202a); color: #fff; }
.hx-shop-card__foot .added_to_cart { display: none; }

/* Coming soon */
.hx-shop-cat__soonbox { display: flex; align-items: center; gap: 16px; padding: 28px; border: 1px dashed var(--hx-border-color, #d4d9de); border-radius: 16px; background: var(--hx-bg-alt, #f7f8fa); }
.hx-shop-cat__soonicon { font-size: 1.71rem; line-height: 1; }
.hx-shop-cat__soonbox p { margin: 0; color: var(--hx-text-muted, #5a6470); }

/* Brand story */
.hx-shop-brand { margin-top: 32px; padding: 78px 0; background: var(--hx2-cream, #f6f2ea); text-align: center; }
.hx-shop-brand .hx2-eyebrow { justify-content: center; }
.hx-shop-brand h2 { font-size: clamp(1.71rem, 2.78vw, 2.38rem); letter-spacing: -.02em; max-width: 760px; margin: .4rem auto .9rem; }
.hx-shop-brand p { max-width: 680px; margin: 0 auto 1rem; color: var(--hx-text, #3a444e); line-height: 1.75; font-size: 1.05rem; }

@media (max-width: 900px) {
	.hx-shop__titlebar-inner { align-items: flex-start; flex-direction: column; }
	.hx-shop__titlebar .hx-shop__proof { justify-content: flex-start; }
	.hx-shop__hero-grid { grid-template-columns: 1fr; }
	.hx-shop__hero-copy { max-width: 720px; }
	.hx-shop__hero-visual { max-width: 610px; }
	.hx-shop__product-stage { margin-left: 0; }
}

@media (max-width: 600px) {
	.hx-shop__hero { padding: 46px 0 74px; }
	.hx-shop__hero-grid { gap: 38px; }
	.hx-shop__hero h1 { font-size: clamp(2.09rem, 9.51vw, 2.66rem); }
	.hx-shop__hero-actions { align-items: stretch; flex-direction: column; }
	.hx-shop__primary-cta { width: 100%; }
	.hx-shop__secondary-cta { align-self: flex-start; }
	.hx-shop__proof { gap: 11px 16px; }
	.hx-shop__product-stage { padding: 14px; border-radius: 38% 38% 18px 18px; }
	.hx-shop__flavour-note { right: 4px; bottom: 10px; min-width: 156px; padding: 14px 17px; }
	.hx-shop-nav { margin: 18px 0 8px; }
	.hx-shop-nav .hx2-wrap { width: calc(100% - 24px); }
	.hx-shop-nav ul {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.hx-shop-nav ul::-webkit-scrollbar { display: none; }
	.hx-shop-nav li {
		flex: 1 0 min(72vw, 280px);
		scroll-snap-align: start;
	}
	.hx-shop-nav a { min-height: 56px; padding-inline: 18px; }
	.hx-shop-cat { padding: 34px 0; }
	.hx-shop-cat__head { align-items: flex-start; }
	.hx-shop-cat__addall { width: 100%; }
	.hx-shop-addall-btn { width: 100%; justify-content: center; }
	.hx-shop-brand { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-shop__primary-cta,
	.hx-shop-card,
	.hx-shop-card__media img { transition: none; }
}

/* ========================================================================== 
   Mobile sticky add-to-cart — template-parts/product/sticky-cart.php
   Stacked above the .hx-navbar (bottom:0, ~56px), revealed on scroll once the
   main add-to-cart leaves view. Mobile only; tablet+ has the sticky summary.
   ========================================================================== */
.hx-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 56px;
	z-index: var(--hx-z-sticky-cta, 99);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	background: #fff;
	box-sizing: border-box;
	border-top: 1px solid var(--hx-border-color, #e6e6e6);
	box-shadow: 0 -6px 22px rgba(16, 24, 32, .12);
	transform: translateY(135%);
	transition: transform .28s ease;
}
.hx-sticky-cart.is-visible { transform: translateY(0); }
.hx-sticky-cart__info { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.hx-sticky-cart__thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--hx-bg-alt, #f6f7f9); }
.hx-sticky-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.hx-sticky-cart__price { font-size: 1.1rem; font-weight: 700; color: var(--hx2-ink, #16202a); white-space: nowrap; }
.hx-sticky-cart__price del { color: var(--hx-text-muted, #9aa3ab); font-weight: 500; font-size: .85em; margin-right: 3px; }
.hx-sticky-cart__btn { flex: 1 1 auto; min-width: 0; text-align: center; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hx-sticky-cart__btn:active { transform: scale(.98); }

@media (min-width: 768px) {
	.hx-sticky-cart { display: none; }
}

/* "Buy on Amazon" button — inc/woocommerce/amazon.php */
.hx-amazon-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	max-width: 320px;
	margin-top: 14px;
	padding: 13px 22px;
	border-radius: 999px;
	background: #232f3e;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.hx-amazon-buy:hover,
.hx-amazon-buy:focus-visible { background: #131a22; color: #fff; transform: translateY(-1px); }
.hx-amazon-buy__smile { flex: 0 0 auto; margin-top: 5px; }

/* ========================================================================== 
   Single product refresh: one purchase path, a calmer summary and recipes.
   ========================================================================== */

body.single-product #main-content {
	background: linear-gradient(180deg, #fff 0, #fff 760px, #f8f8f5 760px, #f8f8f5 100%);
}

#main-content .single-product-page {
	padding-top: clamp(22px, 3vw, 42px);
}

#main-content .single-product-page .single-product-wrapper {
	align-items: start;
	gap: clamp(30px, 5vw, 76px);
	margin: 0 0 clamp(62px, 8vw, 110px);
}

@media (min-width: 768px) {
	#main-content .single-product-page .single-product-wrapper {
		display: grid;
		grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	}

	#main-content .single-product-wrapper > .col-md-6:first-child {
		width: 100%;
		max-width: none;
	}

	#main-content .single-product-wrapper > .col-md-6:last-child {
		position: static;
		width: 100%;
		max-width: none;
	}
}

.woocommerce div.product .summary.entry-summary {
	box-sizing: border-box;
	max-width: 100%;
	padding: clamp(24px, 3.4vw, 48px);
	border: 1px solid #e4e7e9;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 55px rgba(16, 32, 48, .08);
}

#main-content .single-product-page .entry-breadcrumbs {
	margin: 0 0 18px;
}

#main-content .single-product-page .product_title {
	max-width: 680px;
	margin: 0 0 12px;
	font-size: clamp(1.63rem, 2.5vw, 2.25rem);
	line-height: 1.08;
	letter-spacing: -.035em;
}

#main-content .single-product-page .entry-summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

#main-content .single-product-page .entry-summary .price {
	display: block;
	margin: 0 0 18px;
	color: var(--hx2-ink, #16202a);
	font-size: clamp(1.56rem, 2.43vw, 2rem);
	font-weight: 700;
}

#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
	display: block;
	max-width: 650px;
	margin: 0 0 24px;
	overflow: visible;
	color: #4f5b66;
	font-size: 1.03rem;
	line-height: 1.7;
	-webkit-line-clamp: unset;
}

#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description p {
	margin: 0;
}

.single-product-page .summary form.cart {
	width: 100%;
	margin: 0;
	padding: 22px 0 14px;
	border-top: 1px solid #e4e7e9;
}

.single-product-page.product-type-simple .summary form.cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.single-product-page .summary form.cart::before {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	content: "Order directly from Helixx Foods";
}

.single-product-page.product-type-simple div.quantity {
	display: flex;
	flex: 0 0 132px;
	margin: 0;
}

.single-product-page div.quantity .minus,
.single-product-page div.quantity .plus,
.single-product-page div.quantity .qty {
	height: 52px;
}

#main-content .single-product-page div.summary form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--hx2-blue, #1d4497);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	transition: transform .2s ease, background-color .2s ease;
}

#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

#main-content .single-product-page div.summary form.cart .single_add_to_cart_button:hover,
#main-content .single-product-page div.summary form.cart .single_add_to_cart_button:focus-visible {
	background: var(--hx2-ink, #16202a);
	transform: translateY(-1px);
}

.single-product-page .hx-amazon-buy {
	width: 100%;
	max-width: none;
	min-height: 52px;
	margin: 0;
	border: 1px solid #cfd5da;
	background: #fff;
	color: var(--hx2-ink, #16202a);
}

.single-product-page .hx-amazon-buy:hover,
.single-product-page .hx-amazon-buy:focus-visible {
	border-color: var(--hx2-ink, #16202a);
	background: var(--hx2-ink, #16202a);
	color: #fff;
}

.single-product-page .summary > .hx-amazon-buy::before {
	content: "Or";
	position: absolute;
	left: 50%;
	margin-top: -38px;
	padding: 0 10px;
	transform: translateX(-50%);
	background: #fff;
	color: #7a848d;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.single-product-page .summary > .hx-amazon-buy {
	position: relative;
	margin-top: 22px;
}

/* Wishlist and legacy comparison purchase blocks repeat decisions already
   covered by the two order buttons. */
.single-product-page .yith-wcwl-add-to-wishlist,
.single-product-page > .pressmart-bought-together-products,
.single-product-page + .hx-sticky-cart {
	display: none !important;
}

.single-product-page .hx-reassure {
	box-sizing: border-box;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 460px;
	margin-top: 24px;
	padding: 20px 22px;
	border: 1px solid #e4e7e9;
	border-radius: 18px;
	background: #fff;
}

.single-product-page .hx-reassure__item {
	font-size: .9rem;
}

.hx-product-recipes {
	margin: 0 0 clamp(62px, 8vw, 104px);
	padding: clamp(34px, 5vw, 64px);
	border-radius: 28px;
	background: #f1eee6;
}

.hx-product-recipes__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.hx-product-recipes__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--hx2-blue, #1d4497);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.hx-product-recipes h2 {
	margin: 0 0 8px;
	font-size: clamp(1.59rem, 2.52vw, 2.19rem);
	letter-spacing: -.03em;
}

.hx-product-recipes__head p {
	margin: 0;
	color: #5c6670;
}

.hx-product-recipes__all {
	flex: 0 0 auto;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	color: var(--hx2-blue, #1d4497);
	font-weight: 700;
	text-decoration: none;
}

.hx-product-recipes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.hx-product-recipes .hx2-recipe {
	position: relative;
	display: block;
	min-height: 330px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--hx2-ink, #16202a);
	color: #fff;
	text-decoration: none;
}

.hx-product-recipes .hx2-recipe::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(7, 13, 18, .02) 25%, rgba(7, 13, 18, .88) 100%);
	content: "";
}

.hx-product-recipes .hx2-recipe > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease, opacity .25s ease;
}

.hx-product-recipes .hx2-recipe > span {
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	z-index: 2;
	display: grid;
	gap: 9px;
}

.hx-product-recipes .hx2-recipe strong {
	display: -webkit-box;
	overflow: hidden;
	color: #fff;
	font-size: clamp(1.05rem, 1.49vw, 1.29rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hx-product-recipes .hx2-recipe__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.hx-product-recipes .hx2-recipe__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: .72rem;
	font-weight: 650;
	line-height: 1;
	backdrop-filter: blur(4px);
}

.hx-product-recipes .hx2-recipe__stat svg {
	display: block;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	max-width: 14px;
	max-height: 14px;
}

.hx-product-recipes .hx2-recipe > i {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--hx2-ink, #16202a);
	font-size: 17px;
	font-style: normal;
	line-height: 1;
	transition: transform .25s ease;
}

.hx-product-recipes .hx2-recipe:hover > img,
.hx-product-recipes .hx2-recipe:focus-visible > img {
	transform: scale(1.04);
}

.hx-product-recipes .hx2-recipe:hover > i,
.hx-product-recipes .hx2-recipe:focus-visible > i {
	transform: translate(2px, -2px);
}

.hx-product-recipes .hx2-recipe:focus-visible {
	outline: 3px solid var(--hx2-blue, #1d4497);
	outline-offset: 3px;
}

.single-product-page .woocommerce-tabs {
	max-width: 940px;
	margin: 0 auto clamp(64px, 8vw, 110px);
	padding: 10px 24px;
	border: 1px solid #e1e5e8;
	border-radius: 20px;
	background: #fff;
}

.single-product-page .woocommerce-tabs .tabs {
	display: none;
}

.single-product-page .accordion-layout .tab-content-wrap summary.accordion-title {
	padding: 20px 42px 20px 4px;
	font-size: 1.05rem;
}

.single-product-page .accordion-layout .woocommerce-Tabs-panel {
	padding: 0 4px 24px;
}

@media (max-width: 900px) {
	.hx-product-recipes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hx-product-recipes__grid .hx2-recipe:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	body.single-product #main-content {
		background: #fff;
	}

	#main-content .single-product-page {
		padding-top: 24px;
	}

	#main-content .single-product-page .single-product-wrapper {
		gap: 22px;
		margin-bottom: 56px;
	}

	#main-content .single-product-wrapper > [class*="col-"] {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding-inline: 0;
	}

	.woocommerce div.product .summary.entry-summary {
		width: calc(100vw - 20px);
		max-width: calc(100vw - 20px);
		padding: 22px;
		border-radius: 18px;
		box-shadow: 0 12px 32px rgba(16, 32, 48, .07);
	}

	#main-content .single-product-page .product_title {
		max-width: 100%;
		margin-right: 0;
		font-size: clamp(1.52rem, 7.05vw, 1.89rem);
		overflow-wrap: anywhere;
	}

	#main-content .single-product-page .entry-summary,
	#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
		text-align: left;
	}

	#main-content .single-product-page .entry-summary .woocommerce-product-rating {
		justify-content: flex-start;
		text-align: left;
	}

	#main-content .single-product-wrapper > .col-md-6:first-child > .yith-wcwl-add-to-wishlist {
		display: none;
	}

	#main-content .single-product-page .hx-reassure {
		order: 4;
		width: calc(100vw - 40px);
		max-width: calc(100vw - 40px);
		margin-top: 0;
	}

	.hx-product-recipes {
		margin-inline: -10px;
		padding: 34px 20px;
		border-radius: 20px;
	}

	.hx-product-recipes__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.hx-product-recipes__grid {
		grid-template-columns: 1fr;
	}

	.hx-product-recipes__grid .hx2-recipe:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.hx-product-recipes .hx2-recipe {
		min-height: 330px;
	}
}

@media (max-width: 430px) {
	.single-product-page.product-type-simple .summary form.cart {
		flex-wrap: wrap;
	}

	.single-product-page.product-type-simple div.quantity {
		flex-basis: 100%;
	}

	.single-product-page.product-type-simple div.quantity .qty {
		flex: 1 1 auto;
	}

	#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}
}

@media print {
	body.single-product #main-content {
		background: #fff;
	}

	.single-product-page .summary form.cart,
	.single-product-page .hx-amazon-buy,
	.single-product-page .hx-reassure,
	.single-product-page .yith-wcwl-add-to-wishlist,
	.hx-product-recipes__all {
		display: none !important;
	}

	.woocommerce div.product .summary.entry-summary,
	.single-product-page .woocommerce-tabs,
	.hx-product-recipes {
		border: 0;
		box-shadow: none;
	}
}

/* Amazon rating badge + block layout — inc/woocommerce/amazon.php */
.hx-amazon-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
}
.hx-amazon-block .hx-amazon-buy { margin-top: 0; }
.hx-amz-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: .9rem;
	line-height: 1;
	color: #232f3e;
}

/* ========================================================================== 
   Single-product conversion pass: value, choice, trust and mobile purchase.
   ========================================================================== */

.hx-product-value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: -10px 0 16px;
	color: #53606b;
	font-size: .92rem;
	font-weight: 650;
}

.hx-product-value .woocommerce-Price-amount {
	color: var(--hx2-blue, #1d4497);
	font-weight: 800;
}

.hx-flavours {
	margin: 0 0 17px;
}

.hx-flavours__label {
	display: block;
	margin-bottom: 9px;
	color: var(--hx2-ink, #16202a);
	font-size: .84rem;
	font-weight: 750;
}

.hx-flavours__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hx-flavours__option {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 11px;
	border: 1px solid #d9dee2;
	border-radius: 999px;
	background: #fff;
	color: #35414b;
	font-size: .78rem;
	font-weight: 650;
	line-height: 1.1;
	text-decoration: none;
}

.hx-flavours__option i {
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--flavour-tone);
	box-shadow: 0 0 0 1px rgba(22, 32, 42, .2);
}

.hx-flavours__option:hover,
.hx-flavours__option:focus-visible,
.hx-flavours__option.is-active {
	border-color: var(--hx2-blue, #1d4497);
	background: #f3f6fc;
	color: var(--hx2-blue, #1d4497);
}

.hx-product-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-product-benefits li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #35414b;
	font-size: .86rem;
	font-weight: 650;
}

.hx-product-benefits .hx-benefit-icon { width: auto; max-width: 25px; height: 25px; }

.single-product-page .summary form.cart {
	margin-top: 18px;
}

.single-product-page .hx-amazon-block {
	align-items: stretch;
	gap: 10px;
	margin-top: 12px;
}

.single-product-page .hx-amz-badge { align-self: flex-start; }

.single-product-page .hx-amazon-block .hx-amazon-buy {
	display: grid;
	grid-template-columns: minmax(150px, .72fr) minmax(150px, 1fr) 32px;
	align-items: center;
	gap: 15px;
	width: 100%;
	max-width: none;
	min-height: 82px;
	margin: 0;
	padding: 12px 15px;
	border: 1px solid #202a33;
	border-radius: 14px;
	background: #0f1111;
	box-shadow: 0 10px 24px rgba(15, 17, 17, .14);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.single-product-page .hx-amazon-block .hx-amazon-buy:hover,
.single-product-page .hx-amazon-block .hx-amazon-buy:focus-visible {
	border-color: #ff9900;
	background: #0f1111;
	box-shadow: 0 14px 30px rgba(15, 17, 17, .22);
	color: #fff;
	transform: translateY(-2px);
}

.single-product-page .hx-amazon-buy:focus-visible {
	outline: 3px solid rgba(255, 153, 0, .3);
	outline-offset: 3px;
}

.hx-amazon-buy__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding-right: 18px;
	border-right: 1px solid #353d43;
}

.hx-amazon-buy__brand img {
	display: block;
	width: 150px;
	height: auto;
}

.hx-amazon-buy__offer {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.hx-amazon-buy__offer strong {
	color: #fff;
	font-size: .93rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.hx-amazon-buy__offer small {
	margin-top: 4px;
	color: #b9c0c5;
	font-size: .7rem;
	font-weight: 500;
}

.hx-amazon-buy__go {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid #424a50;
	border-radius: 50%;
	color: #ff9900;
	font-size: 1.05rem;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.hx-amazon-buy:hover .hx-amazon-buy__go,
.hx-amazon-buy:focus-visible .hx-amazon-buy__go {
	background: #ff9900;
	color: #0f1111;
	transform: translate(2px, -2px);
}

@media (max-width: 460px) {
	.single-product-page .hx-amazon-block .hx-amazon-buy {
		grid-template-columns: minmax(0, 1fr) 32px;
		gap: 10px 14px;
		padding: 15px 16px;
	}

	.hx-amazon-buy__brand {
		justify-content: flex-start;
		min-height: 0;
		padding: 0 0 10px;
		border-right: 0;
		border-bottom: 1px solid #353d43;
	}

	.hx-amazon-buy__brand img { width: 145px; }
	.hx-amazon-buy__offer { grid-column: 1; }
	.hx-amazon-buy__go { grid-column: 2; grid-row: 1 / 3; }
}

.single-product-page .hx-reassure {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	max-width: none;
	margin: 12px 0 0;
	padding: 15px 0 0;
	border: 0;
	border-top: 1px solid #e4e7e9;
	border-radius: 0;
}

.single-product-page .hx-reassure__item {
	gap: 7px;
	font-size: .78rem;
	font-weight: 650;
}

.single-product-page .hx-reassure__item svg {
	width: 19px;
	height: 19px;
}

.hx-flavour-set {
	display: grid;
	grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.35fr) minmax(230px, .8fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	margin: 0 0 clamp(42px, 6vw, 76px);
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid #dce3e8;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 14px 42px rgba(16, 32, 48, .06);
}

.hx-flavour-set__eyebrow {
	display: block;
	margin-bottom: 7px;
	color: var(--hx2-blue, #1d4497);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.hx-flavour-set h2 {
	margin: 0 0 7px;
	font-size: clamp(1.44rem, 2.19vw, 1.93rem);
	letter-spacing: -.03em;
}

.hx-flavour-set__copy p {
	margin: 0;
	color: #626d76;
	font-size: .92rem;
}

.hx-flavour-set__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.hx-flavour-set__product {
	min-width: 0;
	text-align: center;
}

.hx-flavour-set__product a {
	display: block;
	margin-bottom: 8px;
	padding: 8px;
	border-radius: 14px;
	background: #f7f7f3;
}

.hx-flavour-set__product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.hx-flavour-set__product span {
	display: block;
	overflow: hidden;
	color: #35414b;
	font-size: .72rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hx-flavour-set__form button {
	width: 100%;
	min-height: 52px;
	padding: 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--hx2-blue, #1d4497);
	color: #fff;
	font-size: .9rem;
	font-weight: 750;
	cursor: pointer;
}

.hx-flavour-set__form button:hover,
.hx-flavour-set__form button:focus-visible {
	background: var(--hx2-ink, #16202a);
}

/* A product with one associated recipe uses a deliberate split composition
   instead of leaving two empty card columns. */
.hx-product-recipes--count-1 {
	display: grid;
	grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}

.hx-product-recipes--count-1 .hx-product-recipes__head {
	align-items: flex-start;
	flex-direction: column;
	margin-bottom: 0;
}

.hx-product-recipes--count-1 .hx-product-recipes__grid {
	grid-template-columns: 1fr;
}

@media (max-width: 980px) {
	.hx-flavour-set {
		grid-template-columns: 1fr 1.35fr;
	}

	.hx-flavour-set__form {
		grid-column: 1 / -1;
		max-width: 420px;
		width: 100%;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	body.single-product {
		overflow-x: clip;
	}

	#main-content .single-product-page,
	#main-content .single-product-page .single-product-wrapper,
	#main-content .single-product-wrapper > [class*="col-"],
	#main-content .single-product-page .entry-summary,
	#main-content .single-product-page .entry-summary > * {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	#main-content .single-product-page .single-product-wrapper.row {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	#main-content .single-product-page .summary.entry-summary {
		width: 100%;
		max-width: 100%;
		padding: 20px;
	}

	.single-product-page .single-product-images-wrapper.single-product-gallery {
		width: min(100%, 340px);
		max-width: 340px;
	}

	.single-product-page .single-product-thumbnails {
		width: min(82%, 290px);
		max-width: 290px;
	}

	#main-content .single-product-page .single-product-wrapper {
		gap: 14px;
		margin-bottom: 42px;
	}

	#main-content .single-product-page .product_title {
		font-size: clamp(1.44rem, 6.68vw, 1.78rem);
		line-height: 1.08;
	}

	#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
		font-size: .94rem;
		line-height: 1.55;
	}

	.single-product-page.product-type-simple .summary form.cart {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.single-product-page.product-type-simple div.quantity {
		flex: 0 0 104px;
	}

	#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: 12px;
		font-size: .9rem;
	}

	.hx-flavours__options {
		gap: 6px;
	}

	.hx-flavours__option {
		padding: 7px 9px;
		font-size: .72rem;
	}

	.single-product-page .hx-reassure {
		width: 100%;
		max-width: 100%;
		margin-top: 10px;
		padding-top: 13px;
	}

	.single-product-page + .hx-sticky-cart {
		display: flex !important;
	}

	.hx-sticky-cart__btn {
		font-size: .82rem;
	}

	.hx-flavour-set {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-bottom: 42px;
		padding: 26px 20px;
		border-radius: 18px;
	}

	.hx-flavour-set__form {
		grid-column: auto;
	}

	.single-product-page .woocommerce-tabs {
		margin-bottom: 42px;
	}

	.hx-product-recipes {
		margin-bottom: 48px;
	}

	.hx-product-recipes--count-1 {
		display: block;
	}

	.hx-product-recipes--count-1 .hx-product-recipes__head {
		margin-bottom: 28px;
	}
}

@media (max-width: 350px) {
	.single-product-page.product-type-simple .summary form.cart {
		flex-wrap: wrap;
	}

	.single-product-page.product-type-simple div.quantity,
	#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.hx-sticky-cart__thumb {
		display: none;
	}
}

/* ========================================================================== 
   Conversion routes on product discovery surfaces
   ========================================================================== */
.hx-amazon-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid #c8cfd5;
	border-radius: 999px;
	background: #fff;
	color: #17212b;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}
.hx-amazon-card:hover,
.hx-amazon-card:focus-visible { border-color: #ff9900; color: #111; background: #fffaf2; }

.products .product-price-buttons .hx-amazon-card { width: 100%; margin-top: 7px; }
.hx-shop-card__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.hx-shop .hx-shop-card__actions .hx-amazon-card { min-height: 40px; }

.hx-cat-buybox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 4px 0 22px;
	padding: 18px 20px;
	border: 1px solid #d9e2f1;
	border-radius: 16px;
	background: #f3f6fb;
}
.hx-cat-buybox > div { display: grid; gap: 3px; }
.hx-cat-buybox strong { color: #16202a; font-size: 1rem; }
.hx-cat-buybox span { color: #5f6b77; font-size: .82rem; }
.hx-cat-buybox form { flex: 0 0 auto; margin: 0; }
.hx-cat-buybox button {
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--hx2-blue, #1d4497);
	color: #fff;
	font-weight: 750;
	cursor: pointer;
}
.hx-cat-buybox button .woocommerce-Price-amount { color: inherit !important; }

.hx-sticky-cart__actions { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: 7px; min-width: 0; }
.hx-sticky-cart__btn,
.hx-sticky-cart__amazon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 15px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 750;
	line-height: 1;
	white-space: nowrap;
}
.hx-sticky-cart__amazon { border: 1px solid #ff9900; background: #fff8e8; color: #17212b; text-decoration: none; }

@media (max-width: 767px) {
	.single-product-page .single-product-images-wrapper.single-product-gallery { width: min(100%, 295px); max-width: 295px; }
	.single-product-page .single-product-thumbnails { width: min(76%, 245px); max-width: 245px; }

	.hx-cat-buybox { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; }
	.hx-cat-buybox form,
	.hx-cat-buybox button { width: 100%; }

	.tax-product_cat .hx-cat-benefits {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		padding: 12px 0;
		margin-bottom: 18px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.tax-product_cat .hx-cat-benefits::-webkit-scrollbar { display: none; }
	.tax-product_cat .hx-cat-benefits li {
		min-width: min(70vw, 245px);
		padding: 10px 12px;
		border-radius: 10px;
		background: #f7f8fa;
		scroll-snap-align: start;
	}

	.hx-sticky-cart { padding: 8px 10px; }
	.hx-sticky-cart__thumb { display: none; }
	.hx-sticky-cart__actions { width: 100%; }
	.hx-sticky-cart__btn,
	.hx-sticky-cart__amazon { flex: 1 1 0; }
}

@media (max-width: 420px) {
	.hx-sticky-cart__info { display: none; }
}
.hx-amz-stars {
	--pct: calc(var(--rating, 0) / 5 * 100%);
	position: relative;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 1px;
	font-family: Arial, "Segoe UI Symbol", sans-serif;
}
.hx-amz-stars::before { content: "\2605\2605\2605\2605\2605"; color: #d5d9d9; }
.hx-amz-stars::after {
	content: "\2605\2605\2605\2605\2605";
	color: #ffa41c;
	position: absolute;
	inset: 0;
	width: var(--pct);
	overflow: hidden;
	white-space: nowrap;
}
.hx-amz-badge__num { font-weight: 700; color: #232f3e; }
.hx-amz-badge__count { color: #007185; }
.hx-amz-badge:hover .hx-amz-badge__count,
.hx-amz-badge:focus-visible .hx-amz-badge__count { text-decoration: underline; }
.hx-amz-badge__arrow { color: #007185; font-weight: 700; }

/* ==========================================================================
   Native product tabs — Nutrition Facts + Comparison (inc/woocommerce/nutrition.php)
   ========================================================================== */
.hx-nft-wrap { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; }
.hx-nft {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 380px;
	padding: 12px 15px 14px;
	border: 2px solid #111;
	background: #fff;
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
}
.hx-nft__title { margin: 0; font-size: 1.56rem; font-weight: 800; line-height: 1.05; letter-spacing: .2px; }
.hx-nft__serving {
	margin: 3px 0 0;
	padding-bottom: 7px;
	font-size: .82rem;
	border-bottom: 9px solid #111;
}
.hx-nft__table { width: 100%; border-collapse: collapse; }
.hx-nft__table th,
.hx-nft__table td {
	padding: 4px 0;
	font-size: .9rem;
	font-weight: 400;
	text-align: left;
	vertical-align: baseline;
	border-bottom: 1px solid #111;
}
.hx-nft__table td { text-align: right; white-space: nowrap; padding-left: 8px; }
.hx-nft__table th strong { font-weight: 700; }
.hx-nft__cal th,
.hx-nft__cal td { font-size: 1.37rem; font-weight: 800; border-bottom: 5px solid #111; padding-top: 2px; }
.hx-nft__dv th,
.hx-nft__dv td { border-bottom: none; padding: 0 0 3px; font-size: .72rem; }
.hx-nft__row.is-sub th { padding-left: 20px; }
.hx-nft__row.is-major th,
.hx-nft__row.is-major td { border-top: 5px solid #111; }
.hx-nft__note { margin: 8px 0 0; font-size: .72rem; line-height: 1.35; }
.hx-nft__ingredients { flex: 1 1 240px; margin: 0; align-self: flex-start; font-size: .95rem; line-height: 1.6; color: var(--hx-ink, #1a1a2e); }

.hx-compare-wrap {
	width: 100%;
	max-width: 680px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hx-compare__title { margin: 0 0 4px; font-size: 1.29rem; font-weight: 700; color: var(--hx-ink, #0d1b3e); }
.hx-compare__intro { margin: 0 0 16px; font-size: .95rem; color: #5a6172; }
.hx-compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hx-compare th,
.hx-compare td { padding: 12px 14px; text-align: center; border-bottom: 1px solid #e6e9f2; }
.hx-compare thead th { font-weight: 700; color: var(--hx-ink, #0d1b3e); border-bottom: 2px solid #d3d9ea; vertical-align: bottom; }
.hx-compare tbody th { text-align: left; font-weight: 600; color: var(--hx-ink, #0d1b3e); }
.hx-compare .is-brand { background: var(--hx2-blue, #2b50c8); color: #fff; }
.hx-compare thead .is-brand { border-radius: 10px 10px 0 0; font-weight: 800; }
.hx-compare tbody .is-brand { font-weight: 700; }
.hx-compare tbody tr:last-child .is-brand { border-radius: 0 0 10px 10px; }
.hx-compare .is-yes { color: #1a7f43; font-weight: 700; }
.hx-compare .is-no { color: #c0392b; font-weight: 700; }
.hx-compare .is-brand.is-yes { color: #fff; }
.hx-compare__sub { display: block; margin-top: 2px; font-size: .7rem; font-weight: 400; opacity: .8; }
@media (max-width: 480px) {
	.hx-compare {
		min-width: 520px;
	}

	.hx-compare th,
	.hx-compare td { padding: 10px 8px; font-size: .85rem; }
}

@media (max-width: 767px) {
	.single-product-page .woocommerce-tabs {
		padding-inline: 16px;
	}

	.single-product-page .accordion-layout .woocommerce-Tabs-panel {
		max-width: 100%;
		overflow: visible;
	}

	.woocommerce #reviews #comments ol.commentlist {
		margin: 0;
		padding: 0;
	}

	.woocommerce #reviews #comments ol.commentlist li {
		margin-left: 0;
	}

	.woocommerce #reviews #comments ol.commentlist li .comment-text {
		margin-left: 0;
		padding: 14px;
	}

	.woocommerce #reviews #comments ol.commentlist li img.avatar {
		position: static;
		float: none;
		margin-bottom: 10px;
	}
}

/* ========================================================================== 
   Shop the Cream of Rice range
   Carries the protein-bar collection language into a purchasable add-all set.
   ========================================================================== */

.hx-flavour-set.hx-bar-collection {
	display: block;
	margin: 0 0 clamp(48px, 7vw, 84px);
	padding: clamp(42px, 6vw, 68px);
	border: 0;
	border-radius: 26px;
	background: #f5f7fa;
	box-shadow: none;
}

.hx-flavour-set > .hx-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.hx-flavour-set h2 {
	max-width: 760px;
	margin: 0 0 12px;
	color: #152231;
	font-size: clamp(26px, 3.27vw, 38px);
	line-height: 1.08;
	letter-spacing: -.04em;
}

.hx-flavour-set__intro {
	max-width: 650px;
	margin: 0 0 30px;
	color: #64717e;
	font-size: .96rem;
	line-height: 1.65;
}

.hx-flavour-set .hx-bar-collection__item {
	min-height: 220px;
}

.hx-flavour-set .hx-bar-collection__item small .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: 750;
}

.hx-flavour-set__purchase {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 22px;
	padding: 20px 22px;
	border: 1px solid #d9e1e9;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(20, 39, 72, .06);
}

.hx-flavour-set__purchase > div {
	display: grid;
	gap: 4px;
}

.hx-flavour-set__purchase > div strong {
	color: #172536;
	font-size: 1rem;
	line-height: 1.3;
}

.hx-flavour-set__purchase > div span {
	color: #6a7682;
	font-size: .8rem;
	line-height: 1.45;
}

.hx-flavour-set__form {
	flex: 0 0 auto;
	margin: 0;
}

.hx-flavour-set__form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 275px;
	min-height: 52px;
	padding: 13px 22px;
	border: 0;
	border-radius: 10px;
	color: #fff;
	background: var(--hx-primary, #1d4497);
	font-size: .86rem;
	font-weight: 780;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hx-flavour-set__form button:hover,
.hx-flavour-set__form button:focus-visible {
	background: #162c5d;
	box-shadow: 0 8px 18px rgba(29, 68, 151, .2);
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.hx-flavour-set.hx-bar-collection {
		display: block;
		margin-bottom: 46px;
		padding: 34px 20px 24px;
		border-radius: 20px;
	}

	.hx-flavour-set__purchase {
		align-items: stretch;
		flex-direction: column;
		padding: 18px;
	}

	.hx-flavour-set__form {
		width: 100%;
		max-width: none;
	}

	.hx-flavour-set__form button {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hx-flavour-set__form button { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Product-category rich content (inc/woocommerce/category-content.php)
   Lede above the grid, long-form + FAQ below it.
   ========================================================================== */
.hx-cat-lede {
	max-width: 72ch;
	margin: 4px 0 22px;
}
.hx-cat-lede p {
	margin: 0;
	color: #4d5966;
	font-size: 17px;
	line-height: 1.65;
}

.hx-cat-content {
	margin-top: clamp(40px, 5vw, 68px);
	padding-top: clamp(32px, 4vw, 52px);
	border-top: 1px solid var(--hx-border, #e2e8f0);
}

.hx-cat-content__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 42px);
}

.hx-cat-section h3 {
	margin: 0 0 10px;
	font-size: 19px;
	letter-spacing: -.015em;
}
.hx-cat-section p {
	margin: 0 0 12px;
	color: #56616e;
	font-size: 15px;
	line-height: 1.7;
}
.hx-cat-section p:last-child { margin-bottom: 0; }
.hx-cat-section strong { color: var(--hx-text-strong, #14212d); }
.hx-cat-section a {
	color: var(--hx-primary, #1d4497);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hx-cat-faq {
	margin-top: clamp(32px, 4vw, 52px);
}
.hx-cat-faq > h3 {
	margin: 0 0 14px;
	font-size: 21px;
	letter-spacing: -.02em;
}
.hx-cat-faq__list {
	border-top: 1px solid var(--hx-border, #e2e8f0);
	max-width: 80ch;
}
.hx-cat-faq details {
	border-bottom: 1px solid var(--hx-border, #e2e8f0);
}
.hx-cat-faq summary {
	position: relative;
	padding: 16px 44px 16px 0;
	font-size: 16px;
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}
.hx-cat-faq summary::-webkit-details-marker { display: none; }
.hx-cat-faq summary::after {
	position: absolute;
	top: 50%;
	right: 8px;
	content: "+";
	font-size: 21px;
	font-weight: 400;
	transform: translateY(-50%);
}
.hx-cat-faq details[open] summary::after { content: "\2212"; }
.hx-cat-faq details p {
	max-width: 72ch;
	padding: 0 44px 18px 0;
	margin: 0;
	color: #56616e;
	font-size: 15px;
	line-height: 1.7;
}

@media (max-width: 780px) {
	.hx-cat-content__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Benefits strip — between the lede and the grid. */
.hx-cat-benefits {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding: 18px 0 4px;
	margin: 0 0 26px;
	border-top: 1px solid var(--hx-border, #e2e8f0);
	border-bottom: 1px solid var(--hx-border, #e2e8f0);
	list-style: none;
}
.hx-cat-benefits li { padding: 6px 0; }
.hx-cat-benefits .hx-benefit-icon {
	width: auto;
	max-width: 44px;
	height: 42px;
	margin-bottom: 10px;
}
.hx-cat-benefits .hx-benefit-icon--vegan { height: 32px; margin-top: 5px; margin-bottom: 15px; }
.hx-cat-benefits strong {
	display: block;
	margin-bottom: 3px;
	color: var(--hx-text-strong, #14212d);
	font-size: 14px;
	letter-spacing: -.01em;
}
.hx-cat-benefits span {
	display: block;
	color: #67727f;
	font-size: 12.5px;
	line-height: 1.5;
}

/* Recipes — "what would I actually make with this?" */
.hx-cat-recipes { margin-top: clamp(32px, 4vw, 52px); }
.hx-cat-recipes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}
.hx-cat-recipes__head h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.hx-cat-recipes__head a {
	color: var(--hx-primary, #1d4497);
	font-size: 14px;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hx-cat-recipes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.hx-cat-recipes__grid a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--hx-border, #e2e8f0);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-cat-recipes__grid a:hover {
	border-color: #c4d2ea;
	box-shadow: 0 14px 30px rgba(20, 33, 45, .1);
	transform: translateY(-2px);
}
.hx-cat-recipes__grid img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.hx-cat-recipes__grid span {
	display: block;
	padding: 14px 16px 16px;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.hx-cat-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-cat-recipes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.hx-cat-benefits { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.hx-cat-recipes__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Category archives: heading + band
   The toolbar H1 is sized to the old <h5> everywhere else (a deliberate visual
   no-op when it was promoted for SEO). On a category page that has to convert,
   it needs to read as the page heading it is.
   ========================================================================== */
.tax-product_cat .products-header {
	align-items: flex-start;
	margin-bottom: 6px;
	padding-bottom: 0;
}
.tax-product_cat .products-header-left {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.tax-product_cat .products-header .woocommerce-products-header__title {
	font-size: clamp(27px, 2.99vw, 36px);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
}
.tax-product_cat .products-header .woocommerce-result-count {
	margin-left: 0;
	color: #6b7683;
}

/* The band keeps the breadcrumb — useful — but not a second copy of the term
   name, which the H1 below now states properly. */
.tax-product_cat #page-title .entry-header {
	display: none;
}
/* Slim, quiet breadcrumb rail. The band is .text-center and painted with
   --hx-bg-alt for the hero treatment it no longer has, so both are undone here
   to sit under the left-aligned heading without competing with it. */
.tax-product_cat #page-title {
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: transparent;
	border-bottom: 1px solid var(--hx-border);
}
.tax-product_cat #page-title.text-center,
.tax-product_cat #page-title .entry-breadcrumbs {
	margin-top: 0;
	text-align: left;
}

/* The nav is a flex row centred by #page-title .pressmart-breadcrumb, so
   text-align alone cannot move it. */
.tax-product_cat #page-title .pressmart-breadcrumb {
	justify-content: flex-start;
}

/* .color-scheme-dark paints the breadcrumb light for legibility over a photo.
   With the photo gone that is white-on-white, so the colours come back here. */
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb {
	color: #6b7683;
}
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a {
	color: #4a5563;
}
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a:hover,
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a:focus {
	color: var(--hx-primary, #1d4497);
}

/* ==========================================================================
   CLIENT REVISIONS — October 2026
   ========================================================================== */

/* Gallery: slides 2+ collapsed to a quarter-size tile in the top-left corner
   when picked. WooCommerce core's woocommerce.css sizes its default thumbnail
   row with `.woocommerce div.product div.images
   .woocommerce-product-gallery__image:nth-child(n+2) { width: 25%;
   display: inline-block }`, which out-ranks the crossfade rule in §3 above.
   Because those images are lazy with sizes="auto", the browser then also
   fetched the 150px thumbnail for the shrunken box. Match core's specificity
   so every slide fills the stage exactly like the featured image. */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	display: block;
	width: 100%;
}
/* Every slide in the featured image's square frame: a portrait image (the
   Nutrition Facts panel) is contained, not left to overhang the thumbnails. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
}

/* Benefits: always the same five, Made in Canada in the middle — so a fixed
   five-column row (icon over label) rather than a wrapping one, which would
   push the middle item off-centre whenever it wrapped. */
.hx-product-benefits {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 4px 0 0;
}
.hx-product-benefits li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: .76rem;
	line-height: 1.2;
	text-align: center;
}
.hx-product-benefits .hx-benefit-icon { max-width: 30px; height: 30px; }

/* Size switcher: same pill as the flavours, with the price beside the size. */
.hx-sizes__option strong { font-weight: 800; }
.hx-sizes__price { color: #5b6772; font-weight: 600; }
.hx-sizes__option.is-active .hx-sizes__price { color: inherit; }

/* Shop: one shelf per Cream of Rice size, each with a small heading. */
.hx-shop-size { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 26px 0 12px; scroll-margin-top: 150px; }
.hx-shop-size:first-of-type { margin-top: 6px; }
.hx-shop-size h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.hx-shop-size p { margin: 0; color: #5b6772; font-size: .88rem; }
.hx-shop-card__flag--new { background: #c8102e; }
.hx-shop-nav .hx-new-tag { margin-left: 6px; vertical-align: 2px; }

/* Shop titlebar benefits: five equal cells (icon over label) so Made in Canada
   stays in the middle instead of wrapping 4 + 1. */
.hx-shop__titlebar .hx-shop__proof {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	min-width: min(100%, 520px);
}
.hx-shop__titlebar .hx-shop__proof li {
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 10px 6px;
	font-size: .72rem;
	line-height: 1.2;
	text-align: center;
}

/* ==========================================================================
   COMING SOON — D-LIV-R waitlist card (product summary) and the theme's own
   fallback note (coming-soon.php). D-LIV-R ships WooCommerce's out-of-stock
   classes (a small red line) and WooCommerce's purple `.button.alt`, so both
   are re-dressed in the brand here.
   ========================================================================== */
.summary .dlvr-waitlist,
.summary .hx-coming-soon {
	margin: 18px 0 6px;
	padding: 18px 18px 16px;
	border: 1px solid #dbe3ef;
	border-radius: 14px;
	background: #f5f8fd;
}
.summary .dlvr-waitlist .dlvr-waitlist-h,
.summary .hx-coming-soon__h {
	margin: 0 0 4px;
	color: var(--hx2-blue, #1d4497) !important;
	font-size: 1.2rem !important; /* beats WooCommerce's .stock size */
	font-weight: 800;
	letter-spacing: -.01em;
}
.summary .dlvr-waitlist-note,
.summary .hx-coming-soon p:not(.hx-coming-soon__h) { margin: 0 0 12px; color: #4a5563; font-size: .9rem; line-height: 1.5; }
.summary .dlvr-waitlist-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.summary .dlvr-waitlist-row input[type="email"] {
	flex: 1 1 auto;
	width: auto; /* the theme's global input width:100% would push the button below */
	min-width: 0;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid #cdd6e2;
	border-radius: 999px;
	background: #fff;
}
.summary .dlvr-waitlist .dlvr-waitlist-btn {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--hx2-blue, #1d4497) !important;
	color: #fff !important;
	font-weight: 700;
}
.summary .dlvr-waitlist .dlvr-waitlist-btn:hover,
.summary .dlvr-waitlist .dlvr-waitlist-btn:focus-visible { background: #163a82 !important; }
.summary .dlvr-waitlist-msg { margin: 10px 0 0; color: #1f6f43; font-weight: 600; }
.summary .hx-coming-soon__link { font-weight: 700; }
@media (max-width: 480px) {
	.summary .dlvr-waitlist-row { flex-direction: column; }
}
/* The shop card's Coming soon flag and Notify button. */
.hx-shop-card__flag--soon { background: #c8102e; }

/* Shop: the Amazon Storefront banner across the top (shop/index.php). The
   art's own blue runs to its edges, so it sits full-bleed with no frame. */
.hx-shop-banner { background: #1d4497; }
.hx-shop-banner img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: left center; }