/* ==========================================================================
   Mapheox Wholesale — theme styles
   Palette: navy (primary), ocean (accent). Body font: Barlow.
   ========================================================================== */

:root {
	--navy-50: #f0f4fa;
	--navy-100: #dce5f2;
	--navy-200: #b9cce5;
	--navy-300: #8faad1;
	--navy-400: #5d82b8;
	--navy-500: #3a619c;
	--navy-600: #2a4a7f;
	--navy-700: #1f3864;
	--navy-800: #172a4c;
	--navy-900: #101d36;
	--navy-950: #0a1221;
	--ocean-300: #7cc6e4;
	--ocean-400: #4fb3d9;
	--ocean-500: #2e9cca;
	--ocean-600: #1f7da8;
	--muted: #5b6b84;
	--border: #dce5f2;
	--green: #047857;
	--red: #dc2626;
	--radius: 8px;
	--shadow-sm: 0 1px 2px rgba(16, 29, 54, 0.06);
	--shadow-md: 0 4px 12px rgba(16, 29, 54, 0.1);
	--shadow-lg: 0 10px 25px rgba(16, 29, 54, 0.15);
}

/* ---------------------------------------------------------------- Reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--navy-900);
	background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--navy-700); text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5rem; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

.section { padding: 64px 0; }
.section--tight { margin-top: 40px; }
.section--alt { background: var(--navy-50); }

.section__title { font-size: 30px; font-weight: 700; color: var(--navy-900); margin: 8px 0 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.section__head--center { justify-content: center; text-align: center; }
.section__foot { margin-top: 32px; text-align: center; }

.page-intro { max-width: 640px; }

.body-text { color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.body-strong { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--navy-800); margin-top: 16px; }

.eyebrow {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--ocean-600);
	margin: 0;
}
.eyebrow--light { color: var(--ocean-300); letter-spacing: 0.3em; }

.text-ocean-300 { color: var(--ocean-300); }
.text-ocean-400 { color: var(--ocean-400); }
.text-ocean-600 { color: var(--ocean-600); }
.text-navy-700 { color: var(--navy-700); }
.text-green { color: var(--green); }

.hide-sm { display: none; }
.hide-sm-inline { display: none; }

/* ---------------------------------------------------------------- Icons */

.icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.icon--xxl { width: 48px; height: 48px; }
.icon--xl { width: 32px; height: 32px; }
.icon--md { width: 20px; height: 20px; }
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 13px; height: 13px; }

.icon-badge {
	display: inline-flex;
	padding: 12px;
	border-radius: 9999px;
	background: var(--navy-700);
	color: #fff;
}
.icon-badge--sm { padding: 10px; }
.icon-badge--sm .icon { width: 20px; height: 20px; }
.icon-badge--light { background: var(--navy-50); color: var(--navy-700); }

/* ------------------------------------------------------------- Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn--sm { padding: 7px 14px; font-size: 14px; }
.btn--lg { padding: 13px 24px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--navy { background: var(--navy-700); color: #fff; }
.btn--navy:hover { background: var(--navy-800); color: #fff; }

.btn--ocean { background: var(--ocean-500); color: #fff; }
.btn--ocean:hover { background: var(--ocean-600); color: #fff; }

.btn--outline { background: transparent; border-color: var(--navy-200); color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-50); color: var(--navy-800); }

.btn--outline-white { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy-800); }
.btn--ghost:hover { background: var(--navy-50); color: var(--navy-800); }

/* ---------------------------------------------------------------- Cards */

.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
}
.card--shadow { box-shadow: var(--shadow-lg); }
.card--center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.card--left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.card--row { display: flex; align-items: flex-start; gap: 14px; padding: 20px; }
.card--padded { padding: 24px; }
.card--hover { transition: box-shadow 0.15s ease; }
.card--hover:hover { box-shadow: var(--shadow-md); }
.card__title { font-size: 16px; font-weight: 600; color: var(--navy-900); margin: 0; }
.card__heading { font-size: 18px; font-weight: 600; color: var(--navy-900); margin: 0; }
.card__text { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.card__text--pin { display: flex; align-items: flex-start; gap: 4px; }
.card__text--pin .icon { margin-top: 2px; }
.card__link { font-size: 14px; color: var(--muted); }
.card__link:hover { color: var(--navy-700); }

/* ----------------------------------------------------------------- Grid */

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--tight { gap: 12px; }

.split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
.split--start { align-items: start; }
.split__img { width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-md); }

.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------- Chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 9999px;
	border: 1px solid var(--navy-200);
	background: var(--navy-50);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-700);
}
.chip:hover { background: var(--navy-100); color: var(--navy-700); text-decoration: none; }
.chip--active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip--active:hover { background: var(--navy-800); color: #fff; }

.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.badge--featured { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--ocean-500); color: #fff; }

/* --------------------------------------------------------------- Header */

.site-header { position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); }

.admin-bar .site-header { top: 32px; }

.topbar { background: var(--navy-900); color: var(--navy-100); font-size: 12px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.topbar__contact { display: flex; align-items: center; gap: 16px; }
.topbar__item { display: inline-flex; align-items: center; gap: 6px; color: var(--navy-100); }
a.topbar__item:hover { color: #fff; text-decoration: none; }
.topbar__tagline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; letter-spacing: 0.04em; }
.hide-md-inline { display: none; }
.hide-lg-inline { display: none; }

.mainbar { background: #fff; }
.mainbar__inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.mainbar__menu-toggle {
	display: inline-flex;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: var(--navy-800);
}
.mainbar__search { display: none; flex: 1; max-width: 560px; margin: 0 auto; }
.mainbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mainbar__cart { position: relative; display: inline-flex; padding: 8px; color: var(--navy-800); border-radius: 6px; }
.mainbar__cart:hover { background: var(--navy-50); color: var(--navy-800); }
.mainbar__cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 9999px;
	background: var(--ocean-500);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wordmark { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.wordmark:hover { text-decoration: none; }
.wordmark__logo { height: 32px; width: auto; }
.wordmark__text { display: none; flex-direction: column; line-height: 1.3; }
.wordmark__line1 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); }
.wordmark__line2 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--ocean-600); }

.searchform { position: relative; width: 100%; }
.searchform input[type="search"] {
	width: 100%;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
}
.searchform input[type="search"]:focus { outline: 2px solid var(--ocean-500); outline-offset: 0; border-color: var(--ocean-500); }
.searchform button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--muted);
}
.searchform button:hover { color: var(--navy-700); }

.account-menu { position: relative; }
.account-menu__trigger { gap: 6px; }
.account-menu__dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	width: 210px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 6px;
	z-index: 60;
}
.account-menu__label { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; margin: 0; }
.account-menu__dropdown a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: 14px;
	color: var(--navy-800);
	border-radius: 6px;
}
.account-menu__dropdown a:hover { background: var(--navy-50); text-decoration: none; }

.navbar { display: none; background: var(--navy-700); }
.navbar__inner { display: flex; align-items: center; }
.navbar__link {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-100);
	transition: background-color 0.15s ease;
}
.navbar__link:hover { background: var(--navy-600); color: #fff; text-decoration: none; }
.navbar__link.is-active { background: var(--navy-900); color: #fff; }
.navbar__link--right { margin-left: auto; }

.mobile-nav { background: #fff; border-bottom: 1px solid var(--border); }
.mobile-nav__inner { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__search { margin-bottom: 12px; }
.mobile-nav__link {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-800);
}
.mobile-nav__link:hover { background: var(--navy-50); text-decoration: none; }

/* ----------------------------------------------------------------- Hero */

.hero { position: relative; }
.hero__img { width: 100%; height: 520px; object-fit: cover; }
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(10, 18, 33, 0.85), rgba(10, 18, 33, 0.5), transparent);
}
.hero__content { position: absolute; inset: 0; display: flex; align-items: center; }
.hero__box { max-width: 576px; color: #fff; }
.hero__logo { height: 56px; width: auto; margin-bottom: 24px; }
.hero__title { font-size: 36px; font-weight: 700; line-height: 1.15; margin: 12px 0 0; }
.hero__title span { color: var(--ocean-300); }
.hero__lead { margin-top: 16px; font-size: 18px; color: var(--navy-100); }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy-200); }

/* ----------------------------------------------------------- Value props */

.value-props { position: relative; z-index: 10; margin-top: -64px; }

/* ------------------------------------------------------------ Page hero */

.page-hero { position: relative; }
.page-hero__img { width: 100%; height: 288px; object-fit: cover; }
.page-hero__overlay { position: absolute; inset: 0; background: rgba(10, 18, 33, 0.6); }
.page-hero__content { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; }
.page-hero__content h1 { font-size: 36px; font-weight: 700; margin: 0; }
.page-hero__content p { margin: 8px 0 0; max-width: 576px; color: var(--navy-100); }

/* ----------------------------------------------------------- Assurances */

.assurances {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	border: 1px solid var(--navy-100);
	background: #fff;
	border-radius: var(--radius);
	padding: 24px;
	font-size: 14px;
	color: var(--muted);
	box-shadow: var(--shadow-sm);
}
.assurances span { display: inline-flex; align-items: center; gap: 8px; }

.stockist-chip {
	border: 1px solid var(--navy-100);
	background: #fff;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-800);
}

/* ------------------------------------------------------------------ CTA */

.cta { background: var(--navy-700); color: #fff; padding: 64px 0; }
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta__title { font-size: 30px; font-weight: 700; max-width: 640px; margin: 0; }
.cta__title--sm { font-size: 24px; }
.cta__text { max-width: 640px; color: var(--navy-100); margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta--panel { border-radius: var(--radius); padding: 40px 24px; margin-top: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.panel-cta {
	margin-top: 56px;
	background: var(--navy-50);
	border-radius: var(--radius);
	padding: 40px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.panel-cta h2 { font-size: 24px; font-weight: 700; color: var(--navy-900); margin: 0; }
.panel-cta .body-text { max-width: 576px; margin: 0; }

.panel-note {
	background: var(--navy-50);
	border-radius: var(--radius);
	padding: 20px;
	font-size: 14px;
	color: var(--muted);
}
.panel-note a { font-weight: 500; color: var(--navy-800); }

/* ---------------------------------------------------------------- Forms */

.form { display: flex; flex-direction: column; gap: 16px; }
.form__title { font-size: 18px; font-weight: 600; color: var(--navy-900); margin: 0; }
.form__row { display: grid; gap: 16px; grid-template-columns: 1fr; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field label { font-size: 14px; font-weight: 500; color: var(--navy-900); }
.form__field input,
.form__field select,
.form__field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--navy-900);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus { outline: 2px solid var(--ocean-500); border-color: var(--ocean-500); }
.form__error { font-size: 14px; color: var(--red); margin: 0; }

.form-success { padding: 40px 0; text-align: center; }
.form-success h2 { font-size: 20px; font-weight: 700; color: var(--navy-900); margin: 16px 0 0; }
.form-success .icon { margin: 0 auto; }

/* ----------------------------------------------------------- Price lock */

.price-lock {
	border: 1px dashed var(--navy-200);
	border-radius: var(--radius);
	background: var(--navy-50);
	padding: 16px;
	text-align: center;
}
.price-lock__icon { width: 20px; height: 20px; color: var(--navy-400); margin: 0 auto; }
.price-lock__title { font-size: 13px; font-weight: 600; color: var(--navy-800); margin: 6px 0 0; }
.price-lock__text { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.price-lock__actions { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.price-inline-lock {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-800);
	background: var(--navy-50);
	border: 1px dashed var(--navy-200);
	border-radius: 6px;
	padding: 8px 12px;
}
.price-inline-lock .icon { width: 15px; height: 15px; color: var(--navy-400); }

.trade-price { display: block; font-size: 20px; font-weight: 700; color: var(--navy-700); }
.trade-price small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.trade-rrp { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.trade-rrp em { font-style: normal; font-weight: 600; color: var(--green); }
.ex-gst { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------- Product grid */

/* Scope the grid to the theme container so WooCommerce's default
   .products/.product stylesheet cannot override it. */
.container ul.products,
ul.products.grid {
	list-style: none !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	display: grid !important;
	gap: 24px;
	grid-template-columns: 1fr;
}
.container ul.products::before,
.container ul.products::after,
ul.products.grid::before,
ul.products.grid::after { display: none !important; }

.container ul.products li.product,
ul.products.grid li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

@media (min-width: 640px) {
	.container ul.products.grid--4,
	ul.products.grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
	.container ul.products.grid--4,
	ul.products.grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
}

li.product.product-card,
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card__media { position: relative; display: block; background: #fff; }
.product-card__media img,
li.product .product-card__media img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 16px;
	margin: 0 !important;
}
.product-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 0 16px 16px; }
.product-card__cat { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.product-card__cat a { color: var(--ocean-600); }
.product-card__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy-900);
}
.product-card__name:hover { color: var(--navy-600); text-decoration: none; }
.loop-meta { font-size: 12px; color: var(--muted); margin: 0; }
.product-card__footer { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.product-card__price .price { font-size: 14px; }

.product-card__actions .add_to_cart_button,
.product-card__actions .button,
.product-card__actions .added_to_cart {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 6px;
	background: var(--navy-700);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.product-card__actions .add_to_cart_button:hover,
.product-card__actions .button:hover { background: var(--navy-800); }
.product-card__actions .added_to_cart { background: var(--ocean-500); margin-top: 6px; }

/* ------------------------------------------------- WooCommerce overrides */

.woocommerce .page-title { display: none; }

/* Neutralize WC default product-list decorations inside the theme grid. */
.container ul.products li.product .onsale { display: none; }
.container ul.products li.product .woocommerce-loop-product__title { display: none; }
.container ul.products li.product .star-rating { display: none; }
.container ul.products li.product .price { display: block; margin: 0; color: inherit; }
.container ul.products li.product .price del { display: none; }
.container ul.products li.product .price ins { text-decoration: none; }

.woocommerce .woocommerce-ordering { margin-bottom: 24px; }
.woocommerce .woocommerce-ordering select {
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
}

.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 14px;
	color: var(--navy-800);
	background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* Single product */
.woocommerce div.product { display: block; }
.woocommerce div.product .price .trade-price { font-size: 26px; }
.woocommerce div.product form.cart .quantity input {
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
}
.woocommerce .quantity .qty { width: 90px; }
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--navy-700);
	color: #fff;
	border-radius: 6px;
	padding: 12px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--navy-800); color: #fff; }

.woocommerce div.product .product_meta { font-size: 14px; color: var(--muted); margin-top: 16px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--navy-50); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--ocean-500);
	background: var(--navy-50);
	color: var(--navy-900);
	border-radius: 6px;
	font-size: 14px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--ocean-500); }
.woocommerce-error { border-top-color: var(--red); }

/* Cart / checkout tables */
.woocommerce table.shop_table {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 14px;
}
.woocommerce table.shop_table th { background: var(--navy-50); color: var(--navy-800); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-shipping-fields h3 { font-size: 18px; color: var(--navy-900); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
}

#place_order { width: 100%; }

/* My account */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--navy-200);
	border-radius: 9999px;
	background: var(--navy-50);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-700);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; text-decoration: none; }
.woocommerce-MyAccount-content { font-size: 15px; }

/* Login / register forms */
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	max-width: 480px;
}
.woocommerce form .form-row label { font-size: 14px; font-weight: 500; color: var(--navy-900); }

/* Prose (generic pages) */
.prose h1 { font-size: 32px; color: var(--navy-900); }
.prose h2 { font-size: 24px; color: var(--navy-900); margin-top: 32px; }
.prose p { color: var(--muted); line-height: 1.7; }

/* ---------------------------------------------------------------- Footer */

.site-footer { background: var(--navy-900); color: var(--navy-100); margin-top: 0; }
.footer__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	padding-top: 48px;
	padding-bottom: 48px;
}
.footer__logo { height: 36px; width: auto; }
.footer__tag { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--ocean-400); }
.footer__blurb { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--navy-200); }
.footer__social { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy-100); }
.footer__social:hover { color: #fff; text-decoration: none; }
.footer__heading { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; margin: 0; }
.footer__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__list a { color: var(--navy-100); }
.footer__list a:hover { color: #fff; }
.footer__contact { display: flex; align-items: center; gap: 8px; }
.footer__contact--top { align-items: flex-start; }
.footer__contact--top .icon { margin-top: 3px; }
.footer__bottom { border-top: 1px solid var(--navy-800); }
.footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 12px;
	color: var(--navy-300);
}

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

@media (min-width: 640px) {
	.hide-sm { display: inline; }
	.hide-sm-inline { display: inline-flex; }
	.section__foot.hide-sm { display: none; }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.form__row { grid-template-columns: repeat(2, 1fr); }
	.wordmark__logo { height: 40px; }
	.wordmark__text { display: flex; }
	.hero__logo { height: 64px; }
	.footer__grid { grid-template-columns: repeat(2, 1fr); }
	.footer__bottom-inner { flex-direction: row; }
}

@media (min-width: 768px) {
	.hide-md-inline { display: inline-flex; }
}

@media (min-width: 1024px) {
	.hide-lg-inline { display: inline-flex; }
	.mainbar__menu-toggle { display: none; }
	.mainbar__search { display: block; }
	.navbar { display: block; }
	.mobile-nav { display: none !important; }
	.split { grid-template-columns: repeat(2, 1fr); }
	.split--contact { grid-template-columns: 400px 1fr; }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.hero__title { font-size: 46px; }
	.footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Trade Catalogue page (self-contained — no WooCommerce classes involved)
   ========================================================================== */

.catalog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 24px;
}

.catalog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}
.catalog-card:hover { box-shadow: var(--shadow-md); }

.catalog-card__media { position: relative; display: block; background: #fff; }
.catalog-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 16px;
	margin: 0;
	display: block;
}

.catalog-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 0 16px 16px; }
.catalog-card__cat { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.catalog-card__cat a { color: var(--ocean-600); text-decoration: none; }
.catalog-card__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy-900);
	text-decoration: none;
}
.catalog-card__name:hover { color: var(--navy-600); }

.catalog-card__footer { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.catalog-card__pricing { display: block; }

.btn--disabled { opacity: 0.55; pointer-events: none; }

.catalog-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}
.catalog-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--navy-800);
	text-decoration: none;
}
.catalog-pagination__link:hover { border-color: var(--navy-800); }
.catalog-pagination__link.is-active {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

@media (min-width: 640px) {
	.catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.catalog-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Related products / up-sells / cross-sells (theme-rendered cards) */
.catalog-related { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border); }
.catalog-related__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--navy-900);
	margin: 0;
}
.woocommerce .catalog-related > h2.catalog-related__title { font-size: 24px; margin: 0; }

/* ==========================================================================
   Single product page (fully theme-rendered — no WooCommerce classes)
   ========================================================================== */

/* Header logo must never be resized by any plugin stylesheet. */
.wordmark__logo { height: 32px !important; width: auto !important; max-width: 220px; object-fit: contain; }
@media (min-width: 640px) {
	.wordmark__logo { height: 40px !important; }
}

.product-detail__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: 8px;
}

.product-detail__media {
	position: relative;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.product-detail__media img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 32px;
	margin: 0 !important;
	display: block;
}

.product-detail__summary { display: flex; flex-direction: column; gap: 14px; }
.product-detail__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy-900);
	margin: 0;
}
.product-detail__pricing {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	background: var(--navy-50);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.product-detail__case-price { font-size: 14px; font-weight: 600; color: var(--navy-700); margin-top: 6px; }
.product-detail__excerpt { font-size: 15px; line-height: 1.6; color: var(--navy-700); }
.product-detail__excerpt p { margin: 0 0 10px; }

.product-detail__cart { display: flex; flex-direction: column; gap: 8px; }
.product-detail__qty-label { font-size: 13px; font-weight: 600; color: var(--navy-800); }
.product-detail__cart-row { display: flex; gap: 10px; }
.product-detail__cart-row .qty {
	width: 110px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
}
.product-detail__meta { font-size: 13px; color: var(--muted); margin: 0; }

.product-detail__description {
	margin-top: 48px;
	padding-top: 36px;
	border-top: 1px solid var(--border);
}
.product-detail__description .body-text { margin-top: 14px; font-size: 15px; line-height: 1.7; }

/* Safety net: ANY WooCommerce product list (related, up-sells,
   cross-sells) rendered anywhere in the theme container becomes a
   tidy multi-column grid — never full-width giant cards. */
.container .related ul.products,
.container .up-sells ul.products,
.container .upsells ul.products,
.container .cross-sells ul.products {
	display: grid !important;
	gap: 24px;
	list-style: none !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	grid-template-columns: repeat(2, 1fr) !important;
}
.container .related ul.products li.product,
.container .up-sells ul.products li.product,
.container .upsells ul.products li.product,
.container .cross-sells ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.text-muted { color: var(--muted); }

@media (min-width: 1024px) {
	.product-detail__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
	.container .related ul.products,
	.container .up-sells ul.products,
	.container .upsells ul.products,
	.container .cross-sells ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}