/*
Theme Name: ITN Commerce
Theme URI: https://tugboatvapeae.com/
Author: ITN
Description: A clean, modern, custom-coded WooCommerce theme built with plain PHP and WooCommerce hooks (no page builder). Built for Tugboat Vape AE.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
Requires Plugins: woocommerce
Text Domain: itn-commerce
*/

/* =========================================================
   0. RESET
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
}

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

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

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

button {
	cursor: pointer;
	border: 0;
	background: none;
}

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	--color-navy: #0d2b3e;
	--color-navy-light: #163c54;
	--color-gold: #e3a008;
	--color-gold-dark: #c58607;
	--color-ink: #1a2733;
	--color-body: #46545f;
	--color-muted: #74838d;
	--color-line: #e3e8eb;
	--color-bg: #ffffff;
	--color-bg-soft: #f6f8f9;

	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-heading: "Poppins", var(--font-body);

	--container-width: 1200px;
	--radius: 10px;
	--radius-pill: 999px;

	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	--header-height: 76px;
}

/* =========================================================
   2. BASE / TYPOGRAPHY
   ========================================================= */
body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
	background: var(--color-bg);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	line-height: 1.2;
	margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 var(--space-3); }

.container {
	width: 100%;
	/* Literal fallbacks on purpose. If anything on the server ever
	   serves this file with the :root custom properties stripped or
	   split into another file (LiteSpeed's CSS combine / "unique CSS"
	   optimizers are known for this), `max-width: var(--container-width)`
	   would resolve to nothing and silently become `max-width: none`,
	   i.e. a full-width page. With a fallback it degrades to 1200px
	   instead of to broken. */
	max-width: var(--container-width, 1200px);
	margin-inline: auto;
	padding-inline: var(--space-4, 1.5rem);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-navy);
	color: #fff;
	padding: var(--space-2) var(--space-3);
	z-index: 10001;
}
.skip-link:focus {
	left: var(--space-3);
	top: var(--space-3);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.btn-primary {
	background: var(--color-gold);
	color: var(--color-navy);
}
.btn-primary:hover {
	background: var(--color-gold-dark);
	transform: translateY(-1px);
}
.btn-outline {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   3. AGE GATE
   ========================================================= */
.age-gate {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);
	background: rgba(8, 29, 43, 0.94);
}
.age-gate[hidden] {
	display: none !important;
}
.age-gate__box {
	background: #fff;
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	padding: var(--space-5) var(--space-4);
	text-align: center;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.age-gate__box h2 {
	margin-bottom: var(--space-2);
}
.age-gate__box p {
	color: var(--color-muted);
	font-size: 0.95rem;
}
.age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.age-gate__actions .btn-outline {
	color: var(--color-navy);
	border-color: var(--color-line);
}
.age-gate__actions .btn-outline:hover {
	background: var(--color-bg-soft);
}
body.age-gate-active {
	overflow: hidden;
}

/* =========================================================
   4. ANNOUNCEMENT BAR
   ========================================================= */
.announcement-bar {
	background: var(--color-navy);
	color: #fff;
	text-align: center;
	font-size: 0.85rem;
	padding: 0.65rem var(--space-3);
	position: relative;
}
.announcement-bar a {
	text-decoration: underline;
	font-weight: 600;
}
.announcement-bar[hidden] {
	display: none;
}

/* =========================================================
   5. SITE HEADER
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	/*
	 * Higher than .nav-overlay (599) on purpose: .site-header creates its
	 * own stacking context (position: sticky), so #site-navigation, even
	 * though it's nested inside the header, would otherwise be capped at
	 * the header's z-index when compared against the overlay sibling
	 * outside it — leaving the open mobile drawer dimmed by the overlay
	 * instead of sitting cleanly above it.
	 */
	z-index: 650;
	background: #fff;
	border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--header-height);
}

.site-branding img {
	max-height: 44px;
	width: auto;
}
.site-branding .site-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--color-navy);
}
.site-branding .site-title a {
	display: block;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.main-navigation a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-ink);
	padding: 0.5rem 0;
	position: relative;
}
.main-navigation a:hover {
	color: var(--color-navy);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.header-actions__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--color-navy);
}
.header-actions__icon:hover {
	background: var(--color-bg-soft);
}
.header-actions__icon .count {
	position: absolute;
	top: -2px;
	right: -2px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}
.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-navy);
	border-radius: 2px;
}

/* Mobile nav drawer */
#site-navigation {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(320px, 85vw);
	height: 100vh;
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 600;
	padding: var(--space-4);
	overflow-y: auto;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}
#site-navigation.is-open {
	transform: translateX(0);
}
#site-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
#site-navigation a {
	display: block;
	padding: var(--space-2) 0;
	font-weight: 600;
	border-bottom: 1px solid var(--color-line);
}
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(13, 43, 62, 0.5);
	z-index: 599;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.nav-close {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--space-3);
	font-size: 1.5rem;
	line-height: 1;
}

@media (min-width: 960px) {
	.main-navigation {
		display: block;
	}
	.menu-toggle {
		display: none;
	}
	#site-navigation {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		box-shadow: none;
		padding: 0;
		overflow: visible;
	}
	#site-navigation ul {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
	}
	#site-navigation a {
		border-bottom: 0;
	}
	.nav-overlay,
	.nav-close {
		display: none;
	}
}

/* =========================================================
   6. SITE FOOTER
   ========================================================= */
.site-footer {
	position: relative;
	background: linear-gradient(180deg, var(--color-navy-light) 0%, var(--color-navy) 55%);
	color: rgba(255, 255, 255, 0.82);
	margin-top: var(--space-6);
}
/* Thin gold hairline across the very top of the footer — the same
   accent the hero and buttons use, so the dark band reads as part of
   the brand rather than as the page simply running out. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-gold) 0%, rgba(227, 160, 8, 0.25) 45%, transparent 100%);
}
.site-footer a {
	transition: color 0.15s ease;
}
.site-footer a:hover {
	color: #fff;
}

.footer-top {
	padding: var(--space-6) 0 var(--space-5);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

/* ---------- brand column ---------- */
.footer-brand__mark {
	margin-bottom: var(--space-3);
}
.footer-brand img,
.footer-brand .custom-logo {
	max-height: 46px;
	width: auto;
}
.footer-brand__name {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
}
.footer-brand__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

/* ---------- delivery strip (full width) ---------- */
/* The three delivery/payment facts run across the whole footer instead
   of stacking inside the first column. As a column the card was about
   twice the height of the link columns beside it, which left a large
   empty block on the right-hand side of the footer; across the full
   width it fills that space and is easier to scan. */
.footer-delivery-strip {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-delivery-cell {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: var(--space-3);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 3px solid var(--color-gold);
	border-radius: var(--radius);
}
.footer-delivery-cell__icon {
	font-size: 1.25rem;
	line-height: 1.2;
	flex-shrink: 0;
}
.footer-delivery-cell__area {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 0.15rem;
}
.footer-delivery-cell__time {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
}
.footer-delivery-cell__note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
}
@media (min-width: 700px) {
	.footer-delivery-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.footer-social {
	display: flex;
	gap: var(--space-2);
}
.footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}
.footer-social a:hover {
	background: var(--color-gold);
	color: var(--color-navy);
}

/* ---------- link columns ---------- */
.footer-col h3 {
	position: relative;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
}
.footer-col h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--color-gold);
	border-radius: 2px;
}
.footer-brand .footer-delivery__title::after {
	display: none;
}
.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.footer-col ul a,
.footer-col address {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
	font-style: normal;
	overflow-wrap: anywhere;
}
/* Links slide a touch to the right on hover — cheap, but it makes the
   column feel interactive instead of static. */
.footer-col ul a {
	display: inline-block;
}
.footer-col ul a:hover {
	transform: translateX(3px);
	color: #fff;
}
/* Two columns of brand links so eight names fit without making the
   footer taller. Selector deliberately includes .footer-col ul so it
   out-specifies the single-column flex rule above without !important. */
.footer-col ul.footer-brand-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem var(--space-2);
}

/* ---------- contact column ---------- */
.footer-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.footer-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.9rem;
	line-height: 1.55;
}
.footer-contact__icon {
	flex-shrink: 0;
	font-size: 0.85rem;
	opacity: 0.8;
	line-height: 1.6;
}
.footer-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}
.footer-whatsapp:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-navy);
}

/* Extra breathing room on small screens — the footer sits on a dark
   background right to the edge of the viewport, so cramped side
   padding reads as clipped text even when nothing is technically
   overflowing. */
@media (max-width: 699px) {
	.footer-delivery-strip,
	.footer-top,
	.footer-seo,
	.footer-bottom {
		padding-inline: 1.75rem;
	}
	.footer-top {
		gap: var(--space-4);
	}
}

/* ---------- bottom strip ---------- */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: var(--space-3) 0 var(--space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
}
.footer-bottom__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem var(--space-3);
	margin: 0;
}
/* Separator dot between the copyright and the build credit — drawn in
   CSS so it disappears automatically when the two wrap onto separate
   lines on a phone. */
.footer-credit::before {
	content: "·";
	margin-right: var(--space-3);
	color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 559px) {
	.footer-credit::before {
		display: none;
	}
}
.footer-credit a {
	color: var(--color-gold);
	font-weight: 600;
}
.footer-credit a:hover {
	text-decoration: underline;
}
/* The payment logos are mostly dark (Visa navy, Apple Pay black), so on
   the navy footer they would all but disappear. A light rounded plate
   behind the strip keeps every mark legible and reads as a deliberate
   badge rather than a pasted-on image. */
.footer-payments {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.9rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius);
	max-width: 100%;
}
.footer-payments__image {
	display: block;
	max-width: 100%;
	max-height: 34px;
	width: auto;
}

@media (min-width: 700px) {
	.footer-top {
		grid-template-columns: 1.6fr 1fr 1fr;
	}
}

/* =========================================================
   7. GENERIC PAGE / PLACEHOLDER CONTENT
   ========================================================= */
.site-main {
	display: block;
	width: 100%;
}
.placeholder-section {
	padding: var(--space-6) 0;
	text-align: center;
}
.placeholder-section p {
	max-width: 560px;
	margin-inline: auto;
	color: var(--color-muted);
}

.footer-seo {
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-seo p {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	max-width: 780px;
}

/* =========================================================
   8. SHARED SECTION LAYOUT
   ========================================================= */
.section {
	padding: var(--space-6) 0;
}
.section:nth-of-type(even) {
	background: var(--color-bg-soft);
}
.section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
.section__header h2 {
	margin-bottom: var(--space-1);
}
.section__header p {
	margin: 0;
	color: var(--color-muted);
	max-width: 560px;
}
.section__cta {
	font-weight: 600;
	color: var(--color-navy);
	white-space: nowrap;
}
.section__cta:hover {
	text-decoration: underline;
}
.container--narrow {
	max-width: 760px;
}

/* =========================================================
   9. HERO
   ========================================================= */
.hero {
	background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(227, 160, 8, 0.35), transparent 70%);
}
.hero__grid {
	position: relative;
	padding: var(--space-6) var(--space-4);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	align-items: center;
}
.hero__content {
	max-width: 620px;
}
.hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-gold);
	margin-bottom: var(--space-2);
}
.hero__title {
	color: #fff;
}
.hero__subhead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
	max-width: 640px;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

@media (min-width: 960px) {
	.hero__grid {
		/* Slider column narrower than before (was 1fr out of 2.3
		   total, now 1fr out of 2.8 total) — desktop only, per
		   request. Mobile keeps its original single-column stack. */
		grid-template-columns: 1.8fr 1fr;
	}
}

/* Combo-offer slider */
.hero__slider {
	position: relative;
}
.hero-slider__track {
	position: relative;
	min-height: 220px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	backdrop-filter: blur(6px);
	overflow: hidden;
}
@media (min-width: 960px) {
	.hero-slider__track {
		/* Taller / more vertical on desktop, paired with the narrower
		   slider column set on .hero__grid above. Mobile keeps the
		   220px min-height set just above (this rule must come AFTER
		   the base rule in source order, or the unscoped base rule —
		   same specificity — would win the cascade at desktop widths
		   too and silently cancel this override). */
		min-height: 420px;
	}
}
.hero-slide {
	position: absolute;
	inset: 0;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(12px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	background-size: cover;
	background-position: center;
}
.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
.hero-slide__icon {
	font-size: 2rem;
	margin-bottom: var(--space-1);
}
/* A slide with an uploaded image (Customizer → Homepage Hero Slider)
   uses it as a full-bleed background instead of the plain icon card,
   with a dark gradient scrim so the title/text/button stay readable
   over any photo — a more modern look than the flat icon+text card. */
.hero-slide--has-image {
	justify-content: flex-end;
}
.hero-slide--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(13, 43, 62, 0.1) 0%, rgba(13, 43, 62, 0.95) 100%);
}
.hero-slide--has-image > * {
	position: relative;
	z-index: 2;
}
.hero-slide h3 {
	color: #fff;
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
}
.hero-slide p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	max-width: 320px;
}
.hero-slide__cta {
	display: inline-block;
	margin-top: var(--space-2);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--color-gold);
}
.hero-slide__cta:hover {
	text-decoration: underline;
}
.hero-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--space-3);
}
.hero-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.hero-slider__dot.is-active {
	background: var(--color-gold);
	transform: scale(1.2);
}

/* =========================================================
   10. USP BAR
   ========================================================= */
.usp-bar {
	background: #fff;
	border-bottom: 1px solid var(--color-line);
}
.usp-bar__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	padding: var(--space-5) 0;
}
.usp-item {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}
.usp-item__icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.usp-item h3 {
	font-size: 0.98rem;
	margin-bottom: 0.25rem;
}
.usp-item p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--color-muted);
}
@media (min-width: 700px) {
	.usp-bar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.usp-bar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================
   11. PRODUCT GRID / CARD
   ========================================================= */
.product-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card {
	display: block;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-line);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(13, 43, 62, 0.1);
}
.product-card__image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-soft);
	overflow: hidden;
}
.product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.product-card:hover .product-card__image img {
	transform: scale(1.05);
}
.product-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
}
.product-card__link {
	display: block;
}
.product-card__body {
	padding: var(--space-2) var(--space-3) var(--space-3);
}
.product-card__title {
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 0.35rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__price {
	font-weight: 700;
	color: var(--color-navy);
	font-size: 0.92rem;
}
.product-card__price del {
	color: var(--color-muted);
	font-weight: 400;
	margin-right: 0.35rem;
}
.product-card__price ins {
	text-decoration: none;
}

.product-card__actions {
	display: flex;
	gap: 0.5rem;
	padding: 0 var(--space-3) var(--space-3);
	flex-wrap: wrap;
}
.product-card__actions .button,
.product-card__actions .btn-buy-now {
	flex: 1 1 auto;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.55rem 0.6rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.product-card__actions .button {
	background: var(--color-bg-soft);
	color: var(--color-navy);
	border: 1px solid var(--color-line);
}
.product-card__actions .button:hover {
	background: var(--color-line);
}
.product-card__actions .button.loading {
	opacity: 0.6;
}
.product-card__actions .btn-buy-now {
	background: var(--color-navy);
	color: #fff;
}
.product-card__actions .btn-buy-now:hover {
	background: var(--color-navy-light);
}
.product-card__actions .added_to_cart {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-gold-dark);
	text-decoration: underline;
}

@media (min-width: 700px) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================
   12. CATEGORY SLIDER
   ========================================================= */
/* Every category with products is rendered, and the row scrolls
   horizontally instead of wrapping: two cards visible on a phone, three
   on a tablet, four on a desktop, with the rest one swipe (or one arrow
   click) away. Scroll-snap does the paging natively, so the JS in
   main.js only has to drive the two arrow buttons and disable them at
   either end — no carousel library, and it still works with JS off. */
.category-slider {
	position: relative;
}
.category-slider__track {
	display: flex;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.category-slider__track::-webkit-scrollbar {
	display: none;
}
.category-slide {
	flex: 0 0 calc((100% - var(--space-3)) / 2);
	scroll-snap-align: start;
}
.category-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-navy);
	border: 1px solid var(--color-line);
	box-shadow: 0 6px 18px rgba(13, 43, 62, 0.16);
	font-size: 1.4rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.category-slider__arrow:hover:not(:disabled) {
	background: var(--color-bg-soft);
}
.category-slider__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}
.category-slider__arrow--prev {
	left: calc(var(--space-3) * -1);
}
.category-slider__arrow--next {
	right: calc(var(--space-3) * -1);
}
/* Arrows only where there's a pointer to click them with; touch screens
   just swipe. is-scrollable is added by main.js when the track actually
   overflows, so a store with only two categories never shows arrows. */
@media (min-width: 700px) {
	.category-slide {
		flex-basis: calc((100% - var(--space-3) * 2) / 3);
	}
	.category-slider.is-scrollable .category-slider__arrow {
		display: block;
	}
}
@media (min-width: 1100px) {
	.category-slide {
		flex-basis: calc((100% - var(--space-3) * 3) / 4);
	}
}

.category-grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-card {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
}
.category-card__image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, var(--color-navy-light), var(--color-navy));
	overflow: hidden;
}
.category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.category-card:hover .category-card__image img {
	transform: scale(1.08);
}
.category-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.75rem;
}
.category-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-3);
	background: linear-gradient(to top, rgba(8, 20, 29, 0.85) 0%, rgba(8, 20, 29, 0.15) 55%, transparent 100%);
}
.category-card__overlay h3 {
	color: #fff;
	font-size: 1rem;
	margin: 0 0 0.2rem;
}
.category-card__count {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-gold);
}

@media (min-width: 700px) {
	.category-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================
   13. BRAND STRIP
   ========================================================= */
.brand-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.brand-strip li {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	padding: 0.5rem 1.1rem;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--color-navy);
}

/* =========================================================
   14. TRUST CONTENT + FAQ
   ========================================================= */
/* The long-form homepage content now runs at the same 1200px measure as
   every section above it (it used to sit in a 760px reading column).
   Because the lines are longer, the type is set slightly larger with
   more leading so it still reads comfortably rather than looking like a
   wall of small text stretched across a monitor. */
.prose {
	font-size: 1.02rem;
	line-height: 1.85;
}
.prose h3 {
	font-size: 1.25rem;
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
}
.prose p {
	margin-bottom: var(--space-3);
}
.trust-section p {
	color: var(--color-body);
}
.trust-section a {
	color: var(--color-navy);
	text-decoration: underline;
	font-weight: 600;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.faq-item {
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
}
.faq-item h3 {
	margin: 0;
}
.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
	text-align: left;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--color-ink);
}
.faq-item__icon {
	flex-shrink: 0;
	font-size: 1.2rem;
	color: var(--color-gold-dark);
	transition: transform 0.2s ease;
}
.faq-item__question[aria-expanded="true"] .faq-item__icon {
	transform: rotate(45deg);
}
.faq-item__answer {
	padding: 0 var(--space-3) var(--space-3);
	color: var(--color-muted);
	font-size: 0.92rem;
}
.faq-item__answer p {
	margin: 0;
}

/* =========================================================
   15. STANDALONE PAGE CONTENT (page.php)
   ========================================================= */
.page-content {
	padding: var(--space-6) var(--space-4);
}
.page-content h1 {
	margin-bottom: var(--space-4);
}
.page-content h2 {
	margin-top: var(--space-5);
}
.page-content p,
.page-content li {
	color: var(--color-body);
}
.page-content img {
	border-radius: var(--radius);
}

/* =========================================================
   16. WOOCOMMERCE — SHOP / PRODUCT ARCHIVE
   ========================================================= */
.woocommerce-page .site-main {
	/* padding-block only (top/bottom) — a plain `padding` shorthand here
	   would set padding-left/right to 0 too, and because this selector
	   (.woocommerce-page .site-main) is more specific than .container's
	   `padding-inline`, that 0 would win the cascade and wipe out the
	   side gutter .container gives every other page. That's exactly
	   what made Shop/Cart/Checkout/Single Product run edge-to-edge
	   instead of matching the homepage's inset. */
	padding-block: var(--space-5) var(--space-6);
}
.shop-archive-intro {
	margin: 0 0 var(--space-5);
	color: var(--color-body);
	font-size: 0.98rem;
	line-height: 1.7;
}
/* Long-form SEO copy under the product loop (itn_shop_archive_outro()
   in inc/woocommerce-hooks.php). Separated from the products by a rule
   so it reads as reference material rather than more shop UI. */
.shop-archive-outro {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-line);
	color: var(--color-body);
}
.shop-archive-outro h2 {
	margin-bottom: var(--space-3);
}
.shop-archive-outro a {
	color: var(--color-navy);
	text-decoration: underline;
	font-weight: 600;
}
.shop-archive-intro p {
	margin: 0 0 var(--space-2);
}
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}
.woocommerce ul.products li.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0 !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(13, 43, 62, 0.1);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
}
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-ink);
	padding: var(--space-2) var(--space-3) 0;
	margin: 0;
}
.woocommerce ul.products li.product .price {
	display: block;
	padding: 0.25rem var(--space-3) var(--space-3);
	font-weight: 700;
	color: var(--color-navy);
}
.woocommerce ul.products li.product .price del {
	color: var(--color-muted);
	font-weight: 400;
}
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
	min-height: 0;
	min-width: 0;
	line-height: 1;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin: 0 var(--space-3) var(--space-3);
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.6rem;
	border-radius: var(--radius-pill);
	background: var(--color-navy);
	color: #fff !important;
}
.woocommerce ul.products li.product a.button:hover {
	background: var(--color-navy-light);
}
/* Add to Cart + Buy Now side by side (itn_shop_loop_*() in
   inc/woocommerce-hooks.php) — higher specificity than the plain
   `a.button` rule above so both buttons sit as equal flex items
   instead of full-width stacked blocks. */
.woocommerce ul.products li.product .shop-loop-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 var(--space-3) var(--space-3);
}
.woocommerce ul.products li.product .shop-loop-actions a.button,
.woocommerce ul.products li.product .shop-loop-actions .btn-buy-now {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.55rem 0.4rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.woocommerce ul.products li.product .shop-loop-actions .btn-buy-now {
	background: var(--color-navy);
	color: #fff;
}
.woocommerce ul.products li.product .shop-loop-actions .btn-buy-now:hover {
	background: var(--color-navy-light);
}
.woocommerce ul.products li.product .shop-loop-actions .added_to_cart {
	flex-basis: 100%;
	margin: 0;
	background: none;
	color: var(--color-gold-dark) !important;
	text-decoration: underline;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: block;
	padding: 0.5rem 0.9rem;
	color: var(--color-navy);
	font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--color-navy);
	color: #fff;
}
.woocommerce-result-count,
.woocommerce-ordering {
	color: var(--color-muted);
	font-size: 0.9rem;
}
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 0.4rem 0.6rem;
}

@media (min-width: 700px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------
   Width safety net for the Shop archive.

   The real fix for the "Shop page runs edge to edge" bug is in
   woocommerce.php (the wrapper is now printed unconditionally — see the
   long comment there). This is the belt to that pair of braces: if the
   wrapper ever fails to print again — a plugin removing the hooks, a
   full-page cache still serving pre-fix HTML, another template taking
   over — every piece of shop furniture still centres itself at the same
   1200px measure instead of stretching across the whole monitor.

   Placed at the END of this section on purpose: these selectors tie on
   specificity with the layout rules above (e.g. `.woocommerce
   ul.products`, which sets its own margin), so only source order makes
   the auto margins stick. Verified both ways in the browser — with the
   wrapper (no visual change at all, since the wrapper is already
   narrower than 1200px) and with the wrapper deliberately removed.

   Deliberately no padding here: when the wrapper IS present it already
   supplies the side gutter, and adding more would double-inset the page.
   --------------------------------------------------------------- */
.woocommerce-page .woocommerce-products-header,
.woocommerce-page h1.page-title,
.woocommerce-page ul.products,
.woocommerce-page .shop-archive-intro,
.woocommerce-page .shop-archive-outro,
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering,
.woocommerce-page nav.woocommerce-pagination,
.woocommerce-page .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-no-products-found {
	max-width: var(--container-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
   17. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================= */
/* `div.product` is a CSS Grid, but NOT every child belongs in the same
   2-column row: WooCommerce renders the gallery + summary first, then
   appends the Description/Additional-info tabs (.woocommerce-tabs) and
   Related Products (.related.products) as further DIRECT children of
   this same element. Without grid-column set on those, plain grid
   auto-placement drops each of them into just ONE of the two columns
   (half the page width) instead of a full-width row below — this was
   the "Related products has an empty gap on the right" / "layout is
   broken" bug. Full-span (1 / -1) on those two elements fixes it and
   keeps them at the same 1200px width as the rest of the page. */
.woocommerce div.product {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-6);
	align-items: start;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	grid-column: 1 / -1;
}
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	grid-column: 1;
	border-radius: var(--radius);
	overflow: hidden;
}
/* The gallery's own wrapper: WooCommerce doesn't ship a "click a
   thumbnail to swap the big photo" behaviour in its base markup (that
   needs its own JS/CSS bundle we deliberately don't load — see the
   `woocommerce_enqueue_styles` filter in functions.php). Instead we
   lay every gallery image out ourselves: the first image is always the
   large main photo; any additional images become a small thumbnail
   row underneath. This is deterministic — it can never end up
   stacking full-size duplicate photos on top of each other the way
   the unstyled default markup did. */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product .woocommerce-product-gallery__image {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-soft);
	flex: 1 1 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child) {
	flex: 0 0 84px;
	max-width: 84px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce div.product .summary {
	grid-column: 1;
	max-width: none;
}
.woocommerce div.product .summary h1.product_title {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	margin-bottom: var(--space-2);
}
.woocommerce div.product .summary p.price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: var(--space-3);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
	color: var(--color-body);
	margin-bottom: var(--space-3);
}
/* Short description doubles as the "Specifications" list when the
   product editor writes it as a bullet list — a clean, compact spec
   block sitting right next to the photo instead of a plain paragraph. */
.woocommerce div.product .summary .woocommerce-product-details__short-description ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description ul li {
	padding-left: 1.4rem;
	position: relative;
	font-size: 0.92rem;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-gold-dark);
	font-weight: 700;
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
}
.woocommerce div.product form.cart input.qty {
	width: 70px;
	padding: 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	text-align: center;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--color-gold);
	color: var(--color-navy);
	font-weight: 700;
	padding: 0.85rem 2rem;
	border-radius: var(--radius-pill);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--color-gold-dark);
}
.product-trust-badges {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	list-style: none;
	padding: var(--space-3);
	margin: 0 0 var(--space-4);
	background: var(--color-bg-soft);
	border-radius: var(--radius);
	font-size: 0.88rem;
	color: var(--color-body);
}
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--space-5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	border-bottom: 1px solid var(--color-line);
	margin-bottom: var(--space-4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 0.25rem;
	font-weight: 600;
	color: var(--color-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-gold);
}
.woocommerce div.product .related.products {
	margin-top: var(--space-6);
}
.woocommerce div.product .related.products > h2 {
	margin-bottom: var(--space-4);
}

.sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background: #fff;
	border-top: 1px solid var(--color-line);
	box-shadow: 0 -8px 24px rgba(13, 43, 62, 0.12);
	padding: var(--space-2) var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.sticky-atc__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sticky-atc__title {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55vw;
}
.sticky-atc__price {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-navy);
}
.sticky-atc__cta {
	flex-shrink: 0;
	padding: 0.65rem 1.3rem;
}

@media (min-width: 960px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
	}
	.woocommerce div.product div.images,
	.woocommerce div.product .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
	}
	.woocommerce div.product .summary {
		grid-column: 2;
		grid-row: 1;
	}
	.sticky-atc {
		display: none;
	}
}

/* =========================================================
   18. WOOCOMMERCE — CART & CHECKOUT
   ========================================================= */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: var(--space-4);
}
.woocommerce table.shop_table th {
	background: var(--color-bg-soft);
	text-align: left;
	font-size: 0.85rem;
	color: var(--color-muted);
	padding: var(--space-2) var(--space-3);
}
.woocommerce table.shop_table td {
	padding: var(--space-2) var(--space-3);
	border-top: 1px solid var(--color-line);
	vertical-align: middle;
}
.woocommerce table.shop_table td.product-thumbnail img {
	width: 64px;
	border-radius: var(--radius);
}
@media (max-width: 699px) {
	/* Scoped to the Cart page specifically (.woocommerce-cart), not
	   every table.shop_table sitewide — the cart table has more columns
	   than a narrow phone screen can show at readable width (thumbnail,
	   name, qty stepper, price, remove), so scrolling it horizontally
	   keeps every column usable. Checkout's "Your order" table
	   (#order_review) only has two columns (Product, Subtotal); this
	   used to apply here too, which forced long product names onto one
	   unreadable nowrap line needing its own horizontal scroll — the
	   "Your order isn't responsive on mobile" bug. Left unscoped, that
	   table just wraps product names onto multiple lines like any
	   normal table, which is all it ever needed. */
	.woocommerce-cart table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-cart table.shop_table th,
	.woocommerce-cart table.shop_table td {
		white-space: nowrap;
	}
}
.woocommerce .cart-collaterals .cart_totals {
	background: var(--color-bg-soft);
	border-radius: var(--radius);
	padding: var(--space-4);
}
.woocommerce .cart-collaterals .cart_totals > h2 {
	font-size: 1.15rem;
	margin-bottom: var(--space-3);
}
.woocommerce .cart-collaterals .cart_totals table {
	background: none;
	border: 0;
}
.woocommerce .cart-collaterals .cart_totals th,
.woocommerce .cart-collaterals .cart_totals td {
	background: none;
}
.woocommerce .cart-collaterals .cart_totals .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--space-3);
}
/* Modern two-column cart: items on the left, an order summary that
   sticks in view on the right — the same pattern used for checkout,
   so the cart → checkout handoff feels like one continuous flow
   instead of two differently-laid-out pages. .woocommerce-cart-form
   and .cart-collaterals are siblings straight inside the shortcode's
   own .woocommerce wrapper (a direct child of <main> — see page.php),
   so a grid there is enough.

   Every full-width piece (any notice WooCommerce prints — "removed,
   Undo?" and similar — plus the trust bar) gets grid-column:1/-1 with
   NO grid-row, and the form/cart-collaterals get their column fixed
   (1 and 2) with no grid-row either. Left to auto-placement this way,
   a full-width item can only ever occupy an entire empty row, so the
   form and cart-collaterals — the first two items that only need
   PART of a row — inevitably land in the same row as each other the
   first time that happens, whether that's row 1 (no notice) or a
   later row (one or more notices stacked above). Pinning the form or
   collaterals to a fixed grid-row instead would break the moment a
   notice appears above them and shifts everything down by a row —
   which is exactly the "cart layout broken" bug this replaced: a
   real notice is a normal, expected thing to see here (removing an
   item, a stock warning), not an edge case to leave unhandled. */
@media (min-width: 960px) {
	.woocommerce-cart .site-main > .woocommerce {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-5);
		align-items: start;
	}
	.woocommerce-cart .site-main > .woocommerce > .woocommerce-message,
	.woocommerce-cart .site-main > .woocommerce > .woocommerce-info,
	.woocommerce-cart .site-main > .woocommerce > .woocommerce-error,
	.woocommerce-cart .site-main > .woocommerce > .order-trust-bar {
		grid-column: 1 / -1;
	}
	.woocommerce-cart .site-main > .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
	}
	.woocommerce-cart .site-main > .woocommerce > .cart-collaterals {
		grid-column: 2;
		position: sticky;
		top: var(--space-4);
	}
}
.woocommerce a.remove {
	color: var(--color-muted) !important;
	font-size: 1.1rem;
}
/* Coupons are disabled sitewide (woocommerce_coupons_enabled filter),
   so the coupon box never renders — these rules are just a harmless
   leftover in case it's ever switched back on. The "Update cart"
   button, however, still renders (WooCommerce always outputs it), so
   the whole actions row is hidden here; quantity changes still work
   via initCartAutoUpdate() in main.js, which clicks the hidden button
   for the customer instead of making them find and press it. */
.woocommerce .coupon {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.woocommerce .coupon input#coupon_code {
	padding: 0.7rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
}
.woocommerce-cart-form table.cart tr td.actions {
	display: none;
}
.woocommerce input.qty {
	width: 64px;
	padding: 0.5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	text-align: center;
}
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #place_order {
	display: inline-block;
	background: var(--color-gold);
	color: var(--color-navy) !important;
	font-weight: 700;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius-pill);
	text-align: center;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #place_order:hover {
	background: var(--color-gold-dark);
}
.woocommerce form .form-row {
	margin: 0 0 var(--space-3);
}
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	width: 100%;
}
/* Pair short fields side by side (Town/City + Emirate, Phone + Email)
   so the billing form reads shorter instead of one field per row —
   itn_simplify_checkout_fields() in inc/woocommerce-hooks.php assigns
   these two classes. Below 480px there isn't room for two columns, so
   everything just stacks full-width (the default block layout). */
@media (min-width: 480px) {
	.woocommerce-checkout .form-row-first {
		width: calc(50% - var(--space-2));
		float: left;
		clear: left;
	}
	.woocommerce-checkout .form-row-last {
		width: calc(50% - var(--space-2));
		float: right;
		clear: right;
	}
	.woocommerce-checkout .form-row-wide {
		clear: both;
	}
	.woocommerce-checkout .col2-set::after,
	.woocommerce-checkout .col-1::after,
	.woocommerce-checkout .col-2::after {
		content: "";
		display: table;
		clear: both;
	}
}
/* Modern two-column checkout: billing details on the left, an order
   summary that sticks in view on the right, instead of everything
   stacked in one long scroll. WooCommerce's own checkout markup
   renders .col2-set and the #order_review block as siblings inside
   form.checkout, so a grid on that shared parent — with each part
   placed into a column via `order`/explicit column assignment — is
   enough to reflow them side by side without touching any template. */
@media (min-width: 960px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-5);
		align-items: start;
	}
	.woocommerce-checkout form.checkout .col2-set {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: var(--space-4);
		background: var(--color-bg-soft);
		border-radius: var(--radius);
		padding: var(--space-4);
	}
	.woocommerce-checkout form.checkout #order_review table.shop_table {
		background: #fff;
	}
}
.woocommerce-checkout #payment {
	background: var(--color-bg-soft);
	border-radius: var(--radius);
	padding: var(--space-4);
	margin-top: var(--space-3);
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: 0;
}
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border-radius: var(--radius);
	padding: var(--space-3);
	margin-top: var(--space-2);
	font-size: 0.88rem;
	color: var(--color-body);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-NoticeGroup p {
	background: var(--color-bg-soft);
	border-left: 4px solid var(--color-gold);
	border-radius: var(--radius);
	padding: var(--space-3);
	list-style: none;
	margin-bottom: var(--space-4);
}
.woocommerce-error {
	border-left-color: #c0392b;
}
.order-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-navy);
}
.itn-notes-toggle {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-navy);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* =========================================================
   19. WOOCOMMERCE — MY ACCOUNT
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0.6rem 0.9rem;
	font-weight: 600;
	color: var(--color-muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-gold);
}
.woocommerce-account .woocommerce-MyAccount-content {
	max-width: 720px;
}

/* =========================================================
   20. BLOG
   ========================================================= */
.blog-hero {
	background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
	color: #fff;
	padding: var(--space-6) 0 var(--space-5);
	text-align: center;
}
.blog-hero__eyebrow {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	margin-bottom: var(--space-3);
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gold);
}
.blog-hero__title {
	color: #fff;
	margin-bottom: var(--space-2);
}
.blog-hero__subtitle {
	max-width: 620px;
	margin: 0 auto var(--space-4);
	color: rgba(255, 255, 255, 0.78);
}
.blog-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.blog-pill {
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}
.blog-pill:hover {
	background: rgba(255, 255, 255, 0.18);
}
.blog-pill.is-active {
	background: var(--color-gold);
	color: var(--color-navy);
}

.blog-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding: var(--space-6) 0;
	align-items: start;
}
@media (min-width: 960px) {
	.blog-layout {
		grid-template-columns: 2.2fr 1fr;
	}
}

.blog-card {
	display: block;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(13, 43, 62, 0.1);
}
.blog-card__image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--color-bg-soft);
	overflow: hidden;
}
.blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	background: linear-gradient(160deg, var(--color-navy-light), var(--color-navy));
}
.blog-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
}
.blog-card__body {
	padding: var(--space-3);
}
.blog-card__eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}
.blog-card__title {
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
}
.blog-card__title a {
	color: var(--color-ink);
}
.blog-card__title a:hover {
	color: var(--color-navy);
}
.blog-card__excerpt {
	color: var(--color-body);
	font-size: 0.92rem;
	margin-bottom: var(--space-2);
}
.blog-card__meta {
	display: flex;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.blog-card--featured {
	margin-bottom: var(--space-5);
}
@media (min-width: 700px) {
	.blog-card--featured {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
	}
	.blog-card--featured .blog-card__image {
		aspect-ratio: auto;
		height: 100%;
	}
	.blog-card--featured .blog-card__body {
		padding: var(--space-5);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.blog-card--featured .blog-card__title {
		font-size: clamp(1.3rem, 2vw, 1.7rem);
	}
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
.blog-grid:empty {
	display: none;
}
@media (min-width: 700px) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.blog-pagination {
	margin-top: var(--space-5);
}
.blog-pagination .page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
}
.blog-pagination .page-numbers li {
	margin: 0;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
	display: block;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-weight: 600;
	color: var(--color-navy);
}
.blog-pagination span.page-numbers.current {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: #fff;
}

.blog-sidebar__widget,
.blog-sidebar__cta {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
}
.blog-sidebar__widget h3,
.blog-sidebar__cta h3 {
	font-size: 0.95rem;
	margin-bottom: var(--space-3);
}
.blog-search {
	display: flex;
}
.blog-search input[type="search"] {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
}
.blog-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-category-list li + li {
	border-top: 1px solid var(--color-line);
}
.blog-category-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0;
	color: var(--color-body);
	font-size: 0.92rem;
}
.blog-category-list a:hover {
	color: var(--color-navy);
}
.blog-category-list__count {
	color: var(--color-muted);
	font-size: 0.8rem;
}
.blog-most-read {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-most-read li + li {
	margin-top: var(--space-2);
}
.blog-most-read a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--color-body);
}
.blog-most-read a:hover .blog-most-read__title {
	color: var(--color-navy);
}
.blog-most-read__thumb {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-most-read__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-most-read__title {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
}
.blog-sidebar__cta {
	background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
	border-color: transparent;
	color: #fff;
}
.blog-sidebar__cta h3 {
	color: #fff;
}
.blog-sidebar__cta p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	margin-bottom: var(--space-3);
}
.blog-sidebar__cta .btn {
	width: 100%;
	text-align: center;
}

/* =========================================================
   21. SINGLE BLOG POST (single.php)
   ========================================================= */
/* Same dark hero band as the Blog listing page, just swapping the
   intro copy + pills for the post's own category/title/meta. */
.blog-hero--single {
	padding-bottom: var(--space-6);
}
.blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.88rem;
}

.blog-single {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.blog-single__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.blog-single__content {
	padding: var(--space-5) var(--space-4);
	color: var(--color-body);
	font-size: 1rem;
	line-height: 1.75;
}
.blog-single__content > *:first-child {
	margin-top: 0;
}
.blog-single__content h2 {
	margin-top: var(--space-5);
}
.blog-single__content h3 {
	margin-top: var(--space-4);
}
.blog-single__content p,
.blog-single__content li {
	color: var(--color-body);
}
.blog-single__content ul,
.blog-single__content ol {
	padding-left: 1.4rem;
	margin: 0 0 var(--space-3);
}
.blog-single__content img {
	border-radius: var(--radius);
	max-width: 100%;
	height: auto;
}
.blog-single__content blockquote {
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-gold);
	background: var(--color-bg-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color-ink);
	font-style: italic;
}
.blog-single__content a {
	color: var(--color-navy);
	text-decoration: underline;
	text-decoration-color: var(--color-gold);
}
.blog-single__content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
}
.blog-single__content table th,
.blog-single__content table td {
	padding: 0.6rem;
	border: 1px solid var(--color-line);
	text-align: left;
}
.blog-single__page-links {
	margin-top: var(--space-4);
	font-weight: 600;
}

.blog-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 var(--space-4) var(--space-4);
}
.blog-single__tags .blog-pill {
	background: var(--color-bg-soft);
	color: var(--color-navy);
}
.blog-single__tags .blog-pill:hover {
	background: var(--color-line);
}

.blog-single__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	border-top: 1px solid var(--color-line);
}
.blog-single__nav-prev:empty,
.blog-single__nav-next:empty {
	display: none;
}
.blog-single__nav a {
	font-weight: 600;
	color: var(--color-navy);
}
.blog-single__nav a:hover {
	text-decoration: underline;
}
.blog-single__nav-next {
	margin-left: auto;
	text-align: right;
}