/* ============================================
   NT Global Marketing — Modern Stylesheet
   Color palette: Deep Teal + Warm Coral
   ============================================ */

:root {
  /* Brand Colors */
  --color-primary: #0F4C5C;        /* Deep teal */
  --color-primary-dark: #082E38;   /* Darker teal */
  --color-primary-light: #2A7A8E;  /* Lighter teal */
  --color-accent: #FF6B47;         /* Warm coral */
  --color-accent-dark: #E04B27;    /* Deep coral */
  --color-gold: #D4A24C;           /* Gold accent */

  /* Neutrals */
  --color-bg: #FFFEFA;             /* Off-white */
  --color-bg-alt: #F5F1EA;         /* Cream */
  --color-bg-dark: #0A1F25;        /* Near-black teal */
  --color-text: #1A1A1A;           /* Charcoal */
  --color-text-muted: #5C6B70;     /* Muted */
  --color-border: #E5E0D6;         /* Soft border */

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing & sizing */
  --max-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15, 76, 92, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 76, 92, 0.10);
  --shadow-lg: 0 20px 60px rgba(15, 76, 92, 0.15);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
}

h1 { font-size: clamp(2rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin-bottom: 1rem; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 254, 250, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s var(--ease);
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  transition: opacity 0.2s var(--ease);
}

.logo:hover { opacity: 0.85; }

.logo svg.brand-mark {
  height: 38px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Image-based logo (recolored circular NT badge from czarne_1_1.png) */
.logo img.brand-mark {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Wordmark text beside the badge — picks up the brand teal */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  margin-left: 0.75rem;
  line-height: 1;
  font-family: var(--font-heading);
  color: var(--color-primary);
}
.brand-wordmark-1 {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.brand-wordmark-2 {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.26em;
  margin-top: 4px;
}
.brand-wordmark-light {
  color: #FFFEFA;
}
/* Footer logo image: invert to white-on-dark using a brightness filter */
.brand-mark-light {
  filter: brightness(0) invert(1);
}

@media (max-width: 720px) {
  .logo svg.brand-mark { height: 32px; }
  .logo img.brand-mark { height: 30px; }
  .brand-wordmark-1 { font-size: 0.9rem; }
  .brand-wordmark-2 { font-size: 0.6rem; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 0.5rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all 0.2s var(--ease);
}

.nav-cta:hover {
  background: var(--color-accent) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav-cta::after {
  display: none;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary-dark);
  margin: 5px 0;
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s var(--ease);
  font-family: inherit;
  min-height: 48px; /* mobile touch target */
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--color-accent);
  color: #fff;
}

.btn-accent:hover {
  background: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn-arrow::after {
  content: '→';
  transition: transform 0.2s var(--ease);
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  padding: 4rem 0 6rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 107, 71, 0.08), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(15, 76, 92, 0.06), transparent 50%),
    var(--color-bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 107, 71, 0.1);
  color: var(--color-accent-dark);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.hero h1 .highlight {
  color: var(--color-accent);
  position: relative;
  display: inline-block;
}

.hero h1 .highlight::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: 0;
  right: 0;
  height: 0.18em;
  background: rgba(255, 107, 71, 0.25);
  z-index: -1;
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  max-width: 540px;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Hero visual — spinning globe with sourcing arcs */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: center;
  width: 100%;
}

.globe-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- d3-driven rotating globe ---- */

/* Country fills + strokes are set in markup, but transition for any
   future hover state can live here. */
#globe-countries .country {
  vector-effect: non-scaling-stroke;
}

/* Source-route arcs: dashed, flowing outward from Toronto */
#globe-arcs .arc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 7;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px rgba(255,107,71,0.4));
  animation: arc-flow 3.2s linear infinite;
}

@keyframes arc-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -180; }
}

#globe-arcs .arc-1 { stroke: #FF6B47; animation-delay: 0s; }
#globe-arcs .arc-2 { stroke: #FFB58F; animation-delay: 0.5s; }
#globe-arcs .arc-3 { stroke: #FF6B47; animation-delay: 1.0s; }
#globe-arcs .arc-4 { stroke: #FFB58F; animation-delay: 1.5s; }
#globe-arcs .arc-5 { stroke: #FF6B47; animation-delay: 2.0s; }

/* Toronto origin pin = red, larger, with a strong pulsing halo */
#globe-pins .pin-origin .pin-halo {
  fill: #FF6B47;
  opacity: 0.45;
  transform-origin: center;
  transform-box: fill-box;
  animation: pin-pulse-origin 2.2s ease-in-out infinite;
}
#globe-pins .pin-origin .pin-dot {
  fill: #FF6B47;
  stroke: #fff;
  stroke-width: 2;
}

/* Destination pins = gold */
#globe-pins .pin-dest .pin-halo {
  fill: #D4A24C;
  opacity: 0.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: pin-pulse-dest 2.4s ease-in-out infinite;
}
#globe-pins .pin-dest:nth-child(2) .pin-halo { animation-delay: 0.3s; }
#globe-pins .pin-dest:nth-child(3) .pin-halo { animation-delay: 0.6s; }
#globe-pins .pin-dest:nth-child(4) .pin-halo { animation-delay: 0.9s; }
#globe-pins .pin-dest:nth-child(5) .pin-halo { animation-delay: 1.2s; }
#globe-pins .pin-dest .pin-dot {
  fill: #D4A24C;
  stroke: #fff;
  stroke-width: 1.5;
}

@keyframes pin-pulse-origin {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(2.2); opacity: 0;   }
}
@keyframes pin-pulse-dest {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.9); opacity: 0;   }
}

.hero-visual .badge {
  position: absolute;
  background: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 2;
}

.badge-icon {
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.hero-visual .badge-1 {
  top: 8%;
  left: -8%;
  animation: float 6s ease-in-out infinite;
}
.hero-visual .badge-2 {
  bottom: 18%;
  right: -10%;
  animation: float 6s ease-in-out infinite 2s;
}
.hero-visual .badge-3 {
  top: 50%;
  left: -12%;
  animation: float 6s ease-in-out infinite 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============================================
   SECTIONS
   ============================================ */
section {
  padding: 5rem 0;
}

.section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3.5rem;
}

.section-eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.section-head h2 {
  margin-bottom: 1rem;
}

.section-head p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}


/* ============================================
   PRODUCTS PAGE — CATEGORY SECTIONS
   ============================================ */
.category-section {
  margin-bottom: 4rem;
}

.category-section:last-of-type {
  margin-bottom: 0;
}

.category-head {
  text-align: left;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(15, 76, 92, 0.12);
}

.category-head h2 {
  margin: 0;
  font-size: 1.85rem;
  color: var(--color-primary);
}

.category-head p {
  margin: 0.4rem 0 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}

/* ---- Collapsible category accordion (products page) ---- */
details.category-section > summary.category-head {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-right: 2.5rem;
  transition: border-color 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
details.category-section > summary.category-head::-webkit-details-marker {
  display: none;
}
details.category-section > summary.category-head:hover {
  border-bottom-color: var(--color-accent);
}
details.category-section > summary.category-head:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Chevron */
.category-toggle {
  position: absolute;
  top: 0.65rem;
  right: 0.35rem;
  width: 13px;
  height: 13px;
  border-right: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(45deg); /* points down when collapsed */
  transition: transform 0.3s var(--ease);
}
details.category-section[open] > summary.category-head .category-toggle {
  transform: rotate(-135deg); /* points up when expanded */
}
/* Reveal animation for the grid when a category is opened */
details.category-section[open] > .products-grid {
  animation: categoryReveal 0.35s var(--ease);
}
@keyframes categoryReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   FEATURES / VALUE PROPS
   ============================================ */
.features {
  background: var(--color-bg-alt);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: #fff;
  padding: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all 0.3s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 1.25rem;
}

.feature-card h3 {
  margin-bottom: 0.65rem;
  font-size: 1.2rem;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ============================================
   IMPORT-DIRECT BANNER (competitive advantage)
   ============================================ */
.import-banner {
  background: linear-gradient(135deg, #082E38 0%, #0F4C5C 50%, #2A7A8E 100%);
  color: #fff;
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

.import-banner::before,
.import-banner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.import-banner::before {
  top: -60%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,107,71,0.25), transparent 70%);
}
.import-banner::after {
  bottom: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212,162,76,0.18), transparent 70%);
}

.import-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  position: relative;
}

.import-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  animation: pulse-pin 2.4s ease-in-out infinite;
}

.import-text h3 {
  color: #fff;
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.import-text p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-size: 1rem;
  max-width: 640px;
}

.import-text .pill {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.import-cta {
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .import-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.25rem;
  }
  .import-icon { margin: 0 auto; }
  .import-text p { margin: 0 auto; }
}

/* ============================================
   PRODUCTS GRID
   ============================================ */
.products-grid {
  display: grid;
  /* Use a fixed MAX (320px) instead of 1fr so single-card categories
     (like Rubber Bands, Tape) don't stretch their card to fill the row.
     Every card now renders at the same size regardless of how many
     products are in the category. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 1.5rem;
  justify-content: start;
}

.product-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.product-img {
  aspect-ratio: 4 / 3;
  background:
    /* faint paper texture */
    repeating-linear-gradient(0deg, rgba(15,76,92,0.015) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #FBF8F2 0%, #F0EBE0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

/* faint sketch-pad grid */
.product-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,76,92,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,76,92,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  opacity: 0.5;
  pointer-events: none;
}

.product-img svg.sketch {
  width: 88%;
  height: 88%;
  transition: transform 0.5s var(--ease);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(15, 76, 92, 0.18));
}

.product-card:hover .product-img svg.sketch {
  transform: scale(1.05) rotate(-1deg);
}

/* Line-icon product cards: coral icon on a deep teal panel */
.product-img-icon {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 107, 71, 0.18), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(212, 162, 76, 0.14), transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.product-img-icon::before {
  /* Replace the sketch-pad grid with a faint teal grid that suits the dark panel */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 1;
}

.product-img-icon .line-icon {
  width: 56%;
  height: 56%;
  position: relative;
  z-index: 1;
  color: var(--color-accent);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.5s var(--ease);
}

/* Wide-aspect glove icon (pair of gloves) needs more horizontal room */
.product-img-icon .line-icon-gloves {
  width: 80%;
  height: 50%;
}

.product-card:hover .product-img-icon .line-icon {
  transform: scale(1.08) rotate(-1deg);
}

/* Slight glow ring behind the icon, so it reads well at small sizes */
.product-img-icon::after {
  content: '';
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 71, 0.18) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  filter: blur(8px);
}

/* Photo product cards — real product photography on an off-white panel
   so transparent edges of the photos blend seamlessly. */
.product-img-photo {
  background: #FFFEFA;  /* off-white blends with the transparent edges of the product photos */
  padding: 0;
}
.product-img-photo::before { display: none; }
.product-img-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show entire product without cropping */
  padding: 1.25rem;             /* breathing room around each product */
  z-index: 1;
  transition: transform 0.5s var(--ease);
}
.product-card:hover .product-img-photo img {
  transform: scale(1.05);
}

.product-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-accent);
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 10;                    /* well above the photo image */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  pointer-events: none;
}
/* "Coming Soon" tag — muted gray variant (overrides .product-tag's orange) */
.product-tag.product-tag-soon {
  background: var(--color-text-muted) !important;
}

/* Make whole product card clickable on the catalogue page */
.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.product-card-link:hover h3 { color: var(--color-accent); }
.product-card-link.product-card-static { cursor: default; }
.product-card-link.product-card-static:hover h3 { color: var(--color-primary-dark); }

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */
.product-detail {
  padding: 3rem 0 5rem;
}

/* Specs LEFT (wider — primary content), image RIGHT (narrower spotlight) */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr minmax(280px, 0.85fr);
  gap: 3.5rem;
  align-items: start;
}

/* Use CSS order so this works regardless of DOM order in legacy / future pages.
   The HTML still has image first, then info — but visually we put info first. */
.product-detail-info  { order: 1; }
.product-detail-image { order: 2; }

.product-detail-image {
  position: sticky;
  top: 6rem;
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-md);
}

.product-detail-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-detail-info h2 {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 0.6rem;
}
.product-detail-info h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

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

.spec-list li {
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  font-size: 1rem;
  color: var(--color-text);
}
.spec-list li:last-child { border-bottom: none; }
.spec-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 18px; height: 18px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sizing-table placeholder block (until user provides actual specs) */
.sizing-table-placeholder {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  padding: 1.5rem 1.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 2rem;
}
.sizing-table-placeholder p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.sizing-table-placeholder p:last-child { margin-bottom: 0; }
.sizing-table-placeholder strong { color: var(--color-primary-dark); }

/* Sub-section heading inside the specs panel (e.g. ziplock has 3 tables) */
.sizing-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 1.5rem 0 0.75rem;
  letter-spacing: 0.02em;
}
.sizing-subtitle:first-of-type { margin-top: 0; }

/* Subtle note used on glove pages where sizes are already listed in spec bullets */
.sizing-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.5rem;
}

/* Real sizing table (when filled in) */
.sizing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sizing-table thead th {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.95rem 1.1rem;
  text-align: left;
  border-bottom: 2px solid var(--color-primary-dark);
}
.sizing-table thead th + th { border-left: 1px solid rgba(255,255,255,0.12); }
.sizing-table tbody td {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.sizing-table tbody tr:last-child td { border-bottom: none; }
.sizing-table tbody tr:nth-child(even) td {
  background: rgba(245, 241, 234, 0.55);  /* very subtle zebra */
}
.sizing-table tbody tr:hover td {
  background: rgba(255, 107, 71, 0.08);   /* coral hover tint */
  transition: background 0.15s var(--ease);
}
/* First column (size/sku) — emphasised */
.sizing-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}
/* Numeric columns (any but first) — tabular nums for alignment */
.sizing-table tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Mobile: convert each row into a stacked card with column labels */
@media (max-width: 720px) {
  .sizing-table {
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .sizing-table thead { display: none; }
  .sizing-table, .sizing-table tbody, .sizing-table tr, .sizing-table td {
    display: block;
    width: 100%;
  }
  .sizing-table tbody tr {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    box-shadow: var(--shadow-sm);
  }
  .sizing-table tbody tr:nth-child(even) td { background: transparent; }
  .sizing-table tbody td {
    border: none;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .sizing-table tbody td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 700;
    flex-shrink: 0;
  }
  .sizing-table tbody td:first-child {
    font-size: 1.1rem;
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 0.25rem;
  }
  .sizing-table tbody td:first-child::before {
    content: 'Size';
  }
}

.product-detail-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

@media (max-width: 820px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-detail-image {
    position: static;
    aspect-ratio: 16 / 10;
  }
}

.product-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-body h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.product-body p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin: 0 0 1rem;
  flex: 1;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.product-link:hover {
  color: var(--color-accent);
}

/* ============================================
   ABOUT
   ============================================ */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(212, 162, 76, 0.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(255, 107, 71, 0.18), transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
}

.about-image svg.warehouse-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Floating stat badges layered over warehouse illustration */
.about-image .stat-badge {
  position: absolute;
  background: #fff;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

.about-image .stat-badge strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}

.about-image .stat-badge.sb-1 { top: 6%; left: -5%; }
.about-image .stat-badge.sb-2 { bottom: 8%; right: -5%; animation-delay: 2s; }

.about-content h2 {
  margin-bottom: 1.5rem;
}

.about-content p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.about-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
}

.about-list li {
  padding-left: 2rem;
  margin-bottom: 0.85rem;
  position: relative;
  color: var(--color-text);
}

.about-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 4px;
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 107, 71, 0.25), transparent 70%);
  border-radius: 50%;
}

.cta-content {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  color: #fff;
  margin-bottom: 1rem;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* ============================================
   PAGE HEADER (sub-pages)
   ============================================ */
.page-header {
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
  padding: 4rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-header .breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.page-header h1 {
  margin-bottom: 1rem;
}

.page-header p {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
}

.contact-info {
  background: var(--color-primary);
  color: #fff;
  padding: 2.5rem;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.contact-info::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 107, 71, 0.3), transparent 70%);
  border-radius: 50%;
}

.contact-info h3 {
  color: #fff;
  margin-bottom: 1.5rem;
}

.contact-info p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}

.contact-list {
  list-style: none;
  position: relative;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.contact-list .icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.contact-list strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.contact-list a {
  color: #fff;
  font-weight: 500;
  word-break: break-word;
}

.contact-list a:hover {
  color: var(--color-accent);
}

.contact-form {
  background: #fff;
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
  transition: all 0.2s var(--ease);
  min-height: 48px;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.12);
}

/* Checkbox grid for "Products of Interest" multi-select */
.checkbox-group-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary-dark);
}
.form-hint {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease);
  font-weight: 500;
  user-select: none;
}
.checkbox-item:hover { background: var(--color-bg-alt); }
.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-item:has(input:checked) {
  background: rgba(255, 107, 71, 0.08);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}

.form-status.success {
  display: block;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Map embed */
.map-wrap {
  margin-top: 4rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-hero {
  padding: 5rem 0;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.value-card {
  text-align: center;
  padding: 2rem 1.5rem;
}

.value-card .num {
  display: inline-block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

.site-footer ul {
  list-style: none;
}

.site-footer ul li {
  margin-bottom: 0.65rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
}

.site-footer a:hover {
  color: var(--color-accent);
}

.footer-brand p {
  font-size: 0.92rem;
  margin: 1rem 0;
  max-width: 320px;
}

.footer-brand .logo svg.brand-mark { height: 42px; }
.footer-brand .logo img.brand-mark { height: 36px; }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================
   ANIMATIONS / REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (max-width: 968px) {
  .hero {
    padding: 3rem 0 4rem;
  }

  .hero-grid,
  .about-split,
  .about-hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual {
    order: -1;
    max-width: 360px;
  }

  .hero-stats {
    gap: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: span 2;
  }

  section {
    padding: 4rem 0;
  }
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 720px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5.5rem 2rem 2rem;
    gap: 1rem;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 1.1rem;
    padding: 0.75rem 0;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links a::after { display: none; }

  .nav-cta {
    margin-top: 1rem;
    width: 100%;
    text-align: center;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .contact-info,
  .contact-form {
    padding: 1.75rem;
  }

  section {
    padding: 3rem 0;
  }

  .container {
    padding: 0 1.25rem;
  }
}

@media (max-width: 380px) {
  .logo svg.brand-mark { height: 28px; }
  h1 { font-size: 2rem; }
  .hero-eyebrow { font-size: 0.7rem; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard nav */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   FIX PASS — uniform product images,
   mobile menu, responsive scaling
   ============================================ */

/* Source images are now normalized to a 4:3 aspect with the product centered
   inside an 85% bounding box. Together with the card's `aspect-ratio: 4/3`
   container, every photo renders at exactly the same visual size. */
.product-img-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

/* Mobile menu — lift above the header's stacking context and ensure an
   opaque background, full-screen on small phones. */
@media (max-width: 720px) {
  .nav-links {
    z-index: 105;
    /* Light, semi-transparent (70% opacity) frosted panel — stays light
       while the page behind it darkens. Use explicit longhand offsets (not
       the `inset` shorthand) so the panel reliably fills the full viewport
       height on all mobile browsers, extending below the last nav item. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 78%;
    max-width: 380px;
    height: 100%;
    min-height: 100vh;
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    padding: 5rem 1.5rem 2rem;
    margin: 0;
    border-left: 1px solid var(--color-border);
  }
  .menu-toggle {
    z-index: 115;
  }
  /* Backdrop dim when menu is open. The header creates a stacking context
     (z-index:100 + backdrop-filter), so the open menu lives at an effective
     z-index of 100. Keep this overlay BELOW that (z-index:90) so it darkens
     only the page content behind — the menu panel itself stays light. */
  body:has(.nav-links.open)::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .nav-links {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* Responsive scaling — prevent any element from causing horizontal overflow */
html, body { overflow-x: hidden; max-width: 100%; }

img, svg, video, iframe { max-width: 100%; height: auto; }

/* Tables: scroll horizontally on narrow screens rather than break layout */
.sizing-table,
table {
  width: 100%;
  max-width: 100%;
}
.sizing-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tighter container padding on small screens */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  h1 { font-size: 1.8rem; line-height: 1.2; }
  h2 { font-size: 1.4rem; }
  .page-header { padding: 2rem 0; }
  .category-head h2 { font-size: 1.5rem; }
}

/* Map iframe and other embeds */
.map-wrap iframe {
  width: 100%;
  min-height: 280px;
}

/* ============================================
   HOMEPAGE PREVIEW — 4 cards in one row
   ============================================ */
.products-preview .products-grid {
  grid-template-columns: repeat(4, 1fr);
  justify-content: stretch;
}

@media (max-width: 960px) {
  .products-preview .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .products-preview .products-grid {
    grid-template-columns: 1fr;
  }
}