/* ═══════════════════════════════════════════════════════════
   CONVEYCRAFT — theme.css
   Foundation only: @font-face · tokens · reset · typography · .wrap
   Component styles live in /assets/css/components/.
   ═══════════════════════════════════════════════════════════ */
/* ─── FONT FACE — Inter Variable, self-hosted ──────────────────── */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.lang-dd {
  display: none !important;
}


/* ─── DESIGN TOKENS ────────────────────────────────────────────── */

:root {

  /* Palette — from Figma color styles */
  --black:        #0C0402;   /* primary text + dark surfaces */
  --title-black:  #07020c;   /* primary text + dark surfaces */
  --black-deep:   #050F13;   /* deepest section bg */
  --gray-900:     #2A2A2A;   /* secondary dark surface */
  --gray-700:     #55504E;   /* warm muted text */
  --gray-500:     #807A77;   /* fainter muted */
  --gray-400:     #B0B0B0;   /* tagline dim text */
  --gray-300:     #C9C7C4;   /* hairlines on paper */
  --sand:         #e2d9ca;   /* warm card bg */
  --paper:        #F9F9F9;   /* off-white section bg */
  --paper-2:      #FAFAF9;   /* cooler off-white */
  --white:        #FFFFFF;
  --rust:         #D34E2D;   /* signal accent — CTA, dots, links */
  --rust-deep:    #B53D1F;
  --rust-tint:    #FBE7DF;   /* soft rust wash for state */
  --cc-page-bg-grey: #f1f1f1;
  --border-grey: #e5e7eb;
 

  /* Product image backdrop + scrim (used on product pages) */
/* Product image backdrop + scrim (used on product pages) */
--img-bg:            #ffffff;
--img-scrim-rgb:      181, 181, 181;  /* #B5B5B5 — neutral grey, not navy */
--img-scrim-opacity:  0.22;
--img-scrim:     linear-gradient(180deg,
                    rgba(var(--img-scrim-rgb), 0) 46.78%,
                    rgba(var(--img-scrim-rgb), var(--img-scrim-opacity)) 100%);

  /* Typography */
  --display:      'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --sans:         'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --mono:         ui-monospace, 'SF Mono', Menlo, monospace;
  --cc-font-size-pp-sm: 0.9375rem; /* 15px */
  --cc-font-size-pp-xs: 0.625rem;   /* 10px */

  /* Layout */
  --page-max:     1512px;
  --page-pad:     clamp(20px, 4vw, 64px);
  --gap:          clamp(20px, 2.4vw, 40px);
  --nav-h:        99px;

  /* Motion */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  
}


:root {
  --glow-x:  86%;
  --glow-x2: 92%;
  --dark-panel-bg:
    radial-gradient(ellipse 140% 150% at var(--glow-x) 55%,
      rgba(62,90,120,0.38) 0%,
      rgba(40,64,93,0.24) 25%,
      rgba(20,36,55,0.10) 45%,
      rgba(5,10,18,0.52) 70%),
    radial-gradient(120% 90% at var(--glow-x2) 28%, rgba(70,104,124,0.26), transparent 58%),
    linear-gradient(158deg, #121F2F 0%, #101B29 56%, #0C151F 100%);
}


/* ─── Inter-specific tweaks ──────────────────────────────────── */

html {
  font-feature-settings: "cv11", "ss01", "ss03";
  /* cv11 = single-storey a (modern, cleaner look)
     ss01 = open digits (4, 6, 9 — easier to scan numerically)
     ss03 = "rounded" a → standard, no actually skip — use cv11 alone */
}


/* ─── RESET ────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern" 1;
  min-height: 100vh;
}

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

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

button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── LAYOUT ───────────────────────────────────────────────────── */

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

section { position: relative; }


/* ─── TYPOGRAPHY DEFAULTS ──────────────────────────────────────── */
/* Section-specific type lives with the component. These are the
   baseline rules so a bare <h1>/<p> already looks like ConveyCraft. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--black);
}

p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

strong { font-weight: 600; }

::selection {
  background: var(--rust);
  color: var(--white);
}


.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* ═══════════════════════════════════════════════════════════
   The six sections below always load together on every page
   (header, mobile-menu, mega-menu, footer, back-to-top,
   sections) — merged from separate files on 2026-09-14,
   since none of them ever load independently of the others.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HEADER (masthead)
   Desktop: transparent over hero, dark on scroll / inner pages
   Mobile: always fixed sticky at top (64px)
   ═══════════════════════════════════════════════════════════ */

.masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.admin-bar .transparentheader { top: 32px; }

/* Desktop admin-bar offset for the regular (non-transparent) masthead used on
   inner/dark-header pages — .transparentheader above only covers the front
   page's hero-over variant. Without this, .masthead stays at top:0 and the
   WP admin bar (z-index 200) renders on top of it instead of pushing it down. */


.masthead.is-fixed { position: fixed; }

.masthead.is-scrolled,
body.cc-dark-header .masthead {
	background: #111d2c;
	border-bottom-color: rgba(255, 255, 255, 0.10);
}

body.cc-dark-header .masthead { position: relative; }

/* Text colour over dark background */
.masthead .nav-link,
.masthead .lang-switch,
.masthead .brand-text { color: var(--white); }
.masthead .nav-link:hover { color: var(--rust); }

/* ─── Inner row ──────────────────────────────────────────────── */
.masthead .nav { padding: 24px 0; }
.masthead .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* ─── Logo ───────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; }
.brand img,
.brand .custom-logo,
.custom-logo-link img {
	height: 50px;
	width: auto;
	display: block;
}
.brand-text {
	font-family: var(--display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.02em;
}

/* ─── Primary nav links ──────────────────────────────────────── */
.nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: 1;
	justify-content: center;
}

.nav-link {
	font-family: var(--display);
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--black);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	transition: color 0.2s var(--ease);
}
.nav-link:hover,
.nav-link.is-active { color: var(--rust); }

.has-mega { position: relative; }
.has-mega .chev {
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	margin-left: 4px;
	vertical-align: middle;
	opacity: 0.6;
}

/* ─── Right cluster ──────────────────────────────────────────── */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--display);
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--black);
	cursor: pointer;
	position: relative;
}
.lang-switch .chev {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.55;
	margin-left: 2px;
}

.lang-switch.has-lang-dd .lang-current,
.lang-switch.has-lang-dd svg,
.lang-switch.has-lang-dd .chev { transition: opacity 0.15s var(--ease); }
.lang-switch.has-lang-dd:hover .lang-current,
.lang-switch.has-lang-dd:hover svg,
.lang-switch.has-lang-dd:hover .chev { opacity: 0.6; }

.lang-dd {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	min-width: 110px;
	display: none;
	flex-direction: column;
	gap: 2px;
	z-index: 400;
}
.lang-switch.is-open .lang-dd { display: flex; }

.lang-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--black);
	transition: background 0.12s var(--ease);
}
.lang-option:hover { background: #f5f5f5; }

.lang-flag { width: 20px; height: 15px; border-radius: 2px; flex-shrink: 0; }
.masthead .lang-dd { background: var(--white); }

/* ─── Icon buttons ───────────────────────────────────────────── */
.nav-icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	color: var(--black);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
	position: relative;
}
.nav-icon:hover {
	background: var(--black);
	border-color: var(--black);
	color: var(--white);
}

.masthead .nav-icon {
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--white);
}
.masthead .nav-icon:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.40);
}

/* ─── Cart button + badge ────────────────────────────────────── */
.nav-cart { position: relative; }
.nav-cart::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--white);
	background: var(--black-deep);
	padding: 5px 10px;
	border-radius: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s var(--ease);
}
.nav-cart:hover::after { opacity: 1; }

.cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--rust);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

/* ─── Hamburger button (3 lines → X animated) ────────────────── */
.nav-burger {
	display: none;
	position: relative;
  z-index: 110;
	width: 44px;
	height: 44px;
	background: none;

	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	color: var(--white);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav-burger span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-burger span:nth-child(1) { transform: translate(-50%, -8px); }
.nav-burger span:nth-child(2) { transform: translate(-50%, -50%); }
.nav-burger span:nth-child(3) { transform: translate(-50%, 6px); }

.nav-burger.is-open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
	.nav-links { gap: 24px; }
	.brand {display: none !important;}
	.hero-rule--h1 { display: none; }
}

@media (max-width: 1060px) {
	.nav-links,
	.lang-switch { display: none; }
	.nav-burger { display: inline-flex; }

	/* Mobile: masthead ALWAYS fixed sticky at top */
	.masthead {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		background: #0c1a1f;
		border-bottom-color: rgba(255, 255, 255, 0.10);
		transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
	}

	.masthead .wrap { gap: 0; }
	.masthead .nav { padding: 0.5rem 0; }

	.custom-logo-link img { height: 40px; }

	.nav-icon.nav-cart { display: none; }

	/* Reserve space under fixed header */
	body { padding-top: 61px; }
	body.home { padding-top: 0; }

	/* WP admin bar handling */
	body.admin-bar .masthead { top: 46px; }
  
	
	#wpadminbar { z-index: 200 !important; }
}

header.transparentheader {
	background: transparent !important;
	border-bottom-color: transparent !important;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

header.transparentheader.scrolled {
	background: #0c1a1f !important;
	border-bottom-color: rgba(255, 255, 255, 0.10) !important;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
body.cc-mobile-menu-open header.transparentheader {
	background: #0c1a1f !important;
	border-bottom-color: rgba(255, 255, 255, 0.10) !important;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.masthead {
    transition: transform 0.3s ease;
}
.masthead.is-hidden {
    transform: translateY(-100%);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU — drops down below fixed header (64px)
   Two views: main (nav) + products panel (slides in from right)
   ═══════════════════════════════════════════════════════════ */

.mobile-menu {
	position: fixed;
	top: 61px;                       /* under fixed header */
	left: 0;
	right: 0;
	height: calc(100dvh - 61px);
	z-index: 90;                      /* below masthead (100) */
	background: var(--black-deep);
	overflow: hidden;
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.35s cubic-bezier(.22, .61, .36, 1),
	            opacity 0.25s ease,
	            visibility 0.35s;
}

.mobile-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

/* WP admin bar shifts everything down — this used to set the exact same
   values as the base rule above (a no-op), so on mobile the menu started
   61px from the true viewport top while the header (correctly shifted by
   the admin bar) ended 46px further down, leaving the menu overlapping the
   header/admin-bar by that 46px instead of starting flush below it. */
body.admin-bar .mobile-menu {
    top: calc(61px + 46px);
    height: calc(100dvh - 61px - 46px);
}

/* ─── Main view ──────────────────────────────────────────────── */
.mm-main {
	position: absolute;
	inset: 0;
	background: var(--black-deep);
	display: flex;
	flex-direction: column;
	transition: transform 0.42s cubic-bezier(.22, .61, .36, 1);
}
.mm-main.is-hidden { transform: translateX(-100%); }

.mm-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 0;
	overflow-y: auto;
}

.mm-nav-link {
	font-family: var(--display);
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--white);
	background: none;
	border: none;
	padding: 16px 0;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	cursor: pointer;
}

.mm-rule {
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
	margin: 4px 0;
	width: 37px;
}

/* ─── Bottom pills ───────────────────────────────────────────── */
.mm-bottom {
	padding: 16px 16px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
}

.mm-cart-pill {
	height: 56px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 24px;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #F2F3F1;
	width: 100%;
	position: relative;
}

.mm-lang-pill {
	height: 56px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 24px;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 500;
	background: var(--white);
	color: var(--black-deep);
	cursor: pointer;
	position: relative;
	user-select: none;
}

.mm-lang-dd {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	flex-direction: column;
	overflow: hidden;
	z-index: 200;
}
.mm-lang-pill.is-open .mm-lang-dd { display: flex; }

.mm-lang-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--black-deep);
}
.mm-lang-opt:hover { background: #f5f5f5; }

/* ─── Products panel (slides in from right) ──────────────────── */
.mm-products-panel {
	position: absolute;
	inset: 0;
	background: var(--white);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s var(--ease-out, ease);
}
.mm-products-panel.is-visible {
	transform: translateX(0);
}

.mm-prod-top {
	background: var(--black-deep);
	padding: 16px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mm-back-btn {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--white);
	font-family: var(--display);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
  width: 100%;
}

.mm-prod-scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mm-cat-head {
	background: rgba(229, 229, 229, 0.58);
	padding: 16px;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--black-deep);
	display: block;
}
.mm-cat-head--link:hover { color: var(--rust); }

.mm-prod-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px 12px 8px;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mm-prod-item-img {
	width: 115px;
	height: 88px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper);
	flex-shrink: 0;
}
.mm-prod-item-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mm-prod-item-name {
	flex: 1;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--black-deep);
	line-height: 24px;
}

.mm-prod-item-calc {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid var(--rust);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rust);
	flex-shrink: 0;
}

.mm-prod-footer {
	padding: 24px 16px 40px;
	background: var(--white);
}

.mm-view-all-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	border: 1px solid var(--rust);
	border-radius: 100px;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--rust);
}

/* ─── Body lock when menu open ───────────────────────────────── */
body.cc-mobile-menu-open {
	overflow: hidden;
	touch-action: none;
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENU — full-width panel attached below masthead
   ═══════════════════════════════════════════════════════════ */

.mega-panel {
  position: fixed;
  top: calc(var(--nav-h, 97px) + 6px);
  left: 50%;
  width: min(var(--page-max), 100vw);
  max-height: calc(100vh - var(--nav-h, 97px) - 24px);
  overflow: auto;
  background: var(--white);
  border: 1px solid rgba(12, 4, 2, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(12, 4, 2, 0.13);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 90;
}

.has-mega:hover .mega-panel,
.has-mega.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Follow the masthead's admin-bar shift (see the desktop .masthead rule
   above) so the panel keeps opening flush below the nav when logged in,
   instead of the gap/overlap that comes from only .mega-panel's own
   --nav-h staying put while .masthead moves down by 32px. */
@media (min-width: 901px) {
	body.admin-bar .mega-panel {
		top: calc(var(--nav-h, 97px) + 6px + 32px);
		max-height: calc(100vh - var(--nav-h, 97px) - 24px - 32px);
	}
}


/* ─── Header strip ───────────────────────────────────────────── */

.mega-hd {
  padding: 24px 64px 20px;
  border-bottom: 1px solid rgba(12, 4, 2, 0.08);
}
.mega-hd h3 {
  font-family: var(--display);
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black-deep);
  margin: 0;
}


/* ─── Two-column inner grid ──────────────────────────────────── */

.mega-inner {
  display: grid;
  grid-template-columns: 360px 1fr;
}


/* ─── Left: category list ────────────────────────────────────── */

.mega-cats {
  padding: 24px 32px 32px;
  border-right: 1px solid rgba(12, 4, 2, 0.08);
}
.mega-cat-list {
  display: flex;
  flex-direction: column;
}

.mega-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  font-family: var(--display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--black-deep);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-align: left;
}
.mega-cat + .mega-cat { border-top: 1px solid rgba(12, 4, 2, 0.07); }
.mega-cat:hover { color: var(--rust); }
.mega-cat.is-active {
  background: #F5F5F5;
  color: var(--rust);
  font-weight: 600;
}

.mega-cat-arrow {
  display: none;
  color: var(--rust);
  flex-shrink: 0;
}
.mega-cat.is-active .mega-cat-arrow { display: inline-flex; }


/* ─── Right: active category content ─────────────────────────── */

.mega-right { padding: 24px 32px 32px; }

.mega-cat-content { display: none; }
.mega-cat-content.is-active { display: block; }

.mega-right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.mega-right-head h4 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--black-deep);
  margin: 0;
}

.mega-see-all {
  font-family: var(--display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mega-see-all:hover { color: var(--rust-deep); }


/* ─── Product cards ──────────────────────────────────────────── */

.mega-products {
  display: grid;
  gap: 16px;
}
.mega-products--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-products--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mega-prod {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #E2E5E7;
  border-radius: 7px;
  padding: 48px 8px 12px;
  position: relative;
  transition: border-color 0.2s;
}
.mega-prod:hover { border-color: #c8cbcd; }

.mega-prod-img {
  aspect-ratio: 201 / 152;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
}
.mega-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.3);
}

.mega-prod-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}
.mega-prod-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--rust);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rust);
  flex-shrink: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mega-prod:hover .mega-prod-circle--rust {
  background: var(--rust);
  color: var(--white);
}

.mega-prod-name {
  font-family: var(--display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black-deep);
  padding: 0 4px;
}


/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: 320px 1fr; }
  .mega-hd { padding: 20px 32px 16px; }
  .mega-products--4col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1060px) {
  /* Mega panel only ever shows when desktop nav is visible */
  .mega-panel { display: none; }
}

.mega-prod-circle--config {
	background: var(--rust);
	color: var(--white);
	border-color: var(--rust);
}

.mega-prod-circle--config svg {
	transform: scale(0.95);
}

/* Make sure hover on the .mega-prod doesn't bleed the rust-fill effect
   onto the --config circle (it's already filled). Override the existing
   :hover rule for that specific case. */
.mega-prod:hover .mega-prod-circle--config {
	background: var(--rust);
	color: var(--white);
}


/* ═══════════════════════════════════════════════════════════
   FOOTER (colophon)
   ═══════════════════════════════════════════════════════════ */
.colophon {
  background: var(--navbar-color, #111D2C);
  color: var(--white);
  padding: 32px 0 0;
}
.colophon .wrap {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 0.8fr) minmax(400px, 1.55fr);
  grid-template-areas:
    "logo    contact  newsletter"
    "logo    partner  newsletter"
    "bottom  bottom   bottom";
  column-gap: 48px;
  align-items: start;
}

.colophon-logo {
  grid-area: logo;
  display: block;
  width: min(296px, 100%);
  height: clamp(68px, 6vw, 78px);
}
.colophon-logo a { display: block; height: 100%; }
.colophon-logo img,
.colophon-logo .custom-logo {
  height: 100%;
  width: auto;
  display: block;
}
.colophon-logo .brand-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
}

.colophon-contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}
.colophon-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 13px;
  line-height: 20px;
  color: #878585;
}
.colophon-contact li svg { flex-shrink: 0; color: var(--rust); }
.colophon-contact li a { color: #878585; transition: color 0.2s; }
.colophon-contact li a:hover { color: var(--rust); }

.colophon-partner {
  grid-area: partner;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 13px;
  line-height: 20px;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.colophon-partner svg { flex-shrink: 0; color: var(--rust); }
.colophon-partner span { display: inline-block; transition: transform 0.2s var(--ease); }
.colophon-partner:hover,
.colophon-partner:active { color: var(--rust); }
.colophon-partner:hover span,
.colophon-partner:active span { transform: translateX(5px); }

/* ─── Newsletter ──────────────────────────────────────────────── */

.colophon-nl {
  grid-area: newsletter;
  padding-left: 52px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.colophon-nl-label { font-family: var(--display); font-size: 16px; font-weight: 500; color: var(--white); margin: 0; }
.colophon-nl-toggle { display: none; }
.colophon-nl-form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

.colophon-nl-field {
  display: flex;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.colophon-nl-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  font-family: var(--sans);
  font-size: 14px;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
}
.colophon-nl-field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.colophon-nl-field button {
  height: 44px;
  padding: 0 24px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rust);
  border: none;
  border-radius: 0 100px 100px 0;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.colophon-nl-field button:hover { background: var(--rust-deep); }
.colophon-nl-note { font-size: 11px; color: rgba(255, 255, 255, 0.3); margin: 0; text-align: left; }
.colophon-nl-note a { color: rgba(255, 255, 255, 0.45); text-decoration: underline; }
.colophon-nl-note a:hover { color: var(--rust); }

/* ─── Bottom bar ─────────────────────────────────────────────── */

.colophon-bottom {
  grid-area: bottom;
  margin-top: 16px;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--display);
  font-size: 13px;
  line-height: 20px;
  color: var(--gray-500);
}
.colophon-bottom-dev { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; order: 1; }
.colophon-bottom-dev a { color: inherit; display: inline-flex; align-items: center; transition: opacity 0.2s; }
.colophon-bottom-dev a:hover { opacity: 0.72; }
.colophon-bottom-dev img { display: block; width: auto; height: 16px; }
.colophon-legal { order: 2; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto; }
.colophon-legal a { color: var(--gray-500); white-space: nowrap; transition: color 0.2s; }
.colophon-legal a:hover { color: var(--rust); }
.colophon-copyright { order: 3; white-space: nowrap; }


/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .colophon .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    grid-template-areas:
      "logo      newsletter"
      "contact   newsletter"
      "partner   newsletter"
      "bottom    bottom";
    column-gap: 48px;
  }
  .colophon-logo { width: 210px; height: 52px; margin-bottom: 16px; }
  .colophon-contact { margin-top: 0; }
}

@media (max-width: 700px) {
  .colophon { padding-top: 28px; }
  .colophon .wrap {
    display: block;
  }
  .colophon-logo { width: 180px; height: 46px; margin-bottom: 16px; }
  .colophon-nl {
    border-left: 0;
    padding-left: 0;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .colophon-nl-label { display: none; }
  .colophon-nl-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
  }
  .colophon-nl-chevron { flex: 0 0 auto; color: rgba(255, 255, 255, 0.7); transition: transform 0.3s var(--ease); }
  .colophon-nl-form {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: max-height 0.36s cubic-bezier(.22,.61,.36,1), margin-top 0.3s ease, opacity 0.22s ease, transform 0.3s ease;
  }
  .colophon-nl.is-open .colophon-nl-form {
    max-height: 160px;
    margin-top: 14px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .colophon-nl.is-open .colophon-nl-chevron { transform: rotate(180deg); }
  .colophon-bottom { flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
  .colophon-legal, .colophon-copyright, .colophon-bottom-dev { order: initial; margin: 0; }
}

/* ─── Screen reader only (a11y) ──────────────────────────────── */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* ─── Back to top ────────────────────────────────────────────── */

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rust);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background 0.15s;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--rust-deep); }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP — fixed circular button, appears after 400px scroll
   ═══════════════════════════════════════════════════════════ */

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease),
              transform 0.25s var(--ease),
              background 0.15s var(--ease);
}

.back-to-top:hover {
  background: var(--rust-deep);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top svg {
  stroke-width: 2.5;
}


/* Move out of the way of the mobile menu when open */
body.cc-mobile-menu-open .back-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}


@media (max-width: 600px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════
   SECTION PRIMITIVES — shared across all front-page sections
   ═══════════════════════════════════════════════════════════ */


/* ─── Section title (h2) ─────────────────────────────────────── */

.section-title {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.143;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--black-deep);
  text-transform: uppercase;
  max-width: 900px;
  margin: 0 0 56px;
}
.section-title .accent {
  font-weight: 600;
}
.section-title.on-dark { color: var(--white); }


/* ─── Eyebrow pill above section titles ──────────────────────── */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #cecece;
  border-radius: 100px;
  font-family: var(--display);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  margin-bottom: 48px;
}
.section-eyebrow--on-dark {
  border-color: #cecece;
  color: var(--white);
}


/* ─── Split head (eyebrow + title side by side) ──────────────── */

.section-head-split {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 48px;
}
.section-head-split .section-eyebrow {
  padding-top: 10px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.section-head-split .section-title {
  margin: 0;
  flex: 1;
  text-align: left;
  max-width: none;
}


/* ─── Mobile head adjustments ────────────────────────────────── */

@media (max-width: 760px) {
  .section-title { font-size: clamp(32px, 7vw, 44px); line-height: 1.15; }
  .section-head-split { flex-direction: column; gap: 12px; }
  .section-head-split .section-title { text-align: left; }
}