/* ============================================================================
   Forge Core — Layout component
   Section wrappers, container, generic grid, warm-white page background.
   Tokens only (design-system.css).
   ============================================================================ */

/* Section wrapper */
.forge-section {
  padding: var(--forge-space-3xl) var(--forge-space-xl);
}
.forge-section--warm { background: var(--forge-warm-white); }
.forge-section--grey { background: var(--forge-grey); }
.forge-section--dark { background: var(--forge-black); }

/* Container */
.forge-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Generic responsive grid (3 → 2 → 1) */
.forge-grid {
  display: grid;
  grid-template-columns: repeat(var(--forge-grid-cols), minmax(0, 1fr));
  gap: var(--forge-grid-gap);
  background: var(--forge-grid-bg);
  padding: var(--forge-grid-padding);
  border-radius: var(--forge-card-radius);
}
@media (max-width: 1024px) {
  .forge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .forge-grid { grid-template-columns: 1fr; }
}

/* Warm-white page background helper */
.forge-bg-warm { background: var(--forge-warm-white); }

/* ── Category page template (single source of truth for page styling) ─────────
   Full-width dark hero + light product-grid section. Tokens only. */
/* Neutralise the Astra content container ON CATEGORY PAGES ONLY so the
   full-bleed sections aren't constrained or clipped (mirrors what Forge already
   does for `.home`). Scoped via the forge-category-page body class. */
.forge-category-template #content,
.forge-category-template .site-content,
.forge-category-template #primary,
.forge-category-template .ast-container,
.forge-category-template .entry-content {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;           /* kill the 120px top from body:not(.home) rule + any Astra padding */
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}
/* Ensure no ancestor clips the breakout */
.forge-category-template,
.forge-category-template #page { overflow-x: visible !important; }

/* Sections must stack vertically, full width each */
.forge-category-template .forge-category-hero,
.forge-category-template .forge-category-grid {
  display: block !important;
  float: none !important;
  clear: both !important;
}

.forge-category-hero {
  background: var(--forge-black);
  text-align: center;
  padding: var(--forge-space-3xl) var(--forge-space-xl); /* 4rem top/bottom */
}

/* Full-bleed: span the viewport regardless of any residual container width */
.forge-category-hero,
.forge-category-grid {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  left: 0;
  right: 0;
  box-sizing: border-box;
}
.forge-category-hero__label {
  font-family: var(--forge-font-body);
  font-size: var(--forge-size-xs);          /* 0.75rem */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forge-gold);
  margin: 0 0 var(--forge-space-md);
}
.forge-category-hero__title {
  font-family: var(--forge-font-heading);
  font-size: var(--forge-size-2xl);         /* 2.5rem */
  font-weight: 400;
  line-height: 1.1;
  color: var(--forge-warm-white);
  margin: 0;
}
.forge-category-hero__subtitle {
  font-family: var(--forge-font-body);
  font-size: var(--forge-size-sm);          /* 0.875rem */
  line-height: 1.6;
  color: var(--forge-text-muted);           /* #999999 */
  max-width: 500px;
  margin: var(--forge-space-md) auto 0;
}

/* Product grid section below hero (full-bleed handled by the shared rule above) */
.forge-category-grid {
  background: var(--forge-grid-bg);
  padding: var(--forge-space-2xl) var(--forge-space-xl); /* 3rem top/bottom */
}

/* Remove the white band above the hero. Forge applies
   `body:not(.home) #content { padding-top:120px }` to clear the transparent
   header — but that transparent pad shows the page background as white above
   the dark hero. Zero it on category pages and move the header clearance into
   the hero so its dark background fills behind the transparent header.
   `html body…` raises specificity above the inline !important rule. */
html body.forge-category-template #content,
html body.forge-category-template .site-content {
  padding-top: 0 !important;
}
/* Desktop: hero absorbs the absolute header height + breathing room */
html body.forge-category-template:not(.ast-header-break-point) .forge-category-hero {
  padding-top: calc(var(--forge-space-3xl) + 120px) !important; /* 4rem + ~120px header */
}
/* Mobile: body padding-top:143px already clears the fixed header — just breathing room */
html body.forge-category-template.ast-header-break-point .forge-category-hero {
  padding-top: var(--forge-space-3xl) !important; /* 4rem */
}
body.forge-category-template,
body.forge-category-template #page,
body.forge-category-template .site-header {
  margin-top: 0 !important;
}

/* ── Secondary menu bar (Astra below-header row / secondary_menu location) ────
   "Product Categories Menu" — third header row, matched to the dark header:
   dark bg, warm-white uppercase links, gold on hover/active, no bullets,
   evenly spaced + centered. Tokens only. */
/* Suppress ALL Astra dropdown/flyout sub-menus on desktop — sectors and
   categories are in the below-header strip, not hover dropdowns. */
@media (min-width: 769px) {
  .main-header-bar .sub-menu,
  .main-header-bar .ast-sub-menu,
  .ast-primary-header-bar .sub-menu,
  .ast-primary-header-bar .ast-sub-menu,
  #masthead .main-header-menu .sub-menu,
  #masthead .main-header-menu .ast-sub-menu,
  .main-navigation .sub-menu,
  .ast-nav-menu .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0,0,0,0) !important;
  }
}

.ast-below-header-bar {
  background: var(--forge-black) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .main-header-menu {
  list-style: none !important;
  justify-content: center !important;
  gap: var(--forge-space-lg) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item {
  margin: 0 !important;
  list-style: none !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-link {
  color: var(--forge-warm-white) !important;
  font-family: var(--forge-font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: var(--forge-space-sm) var(--forge-space-sm) !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--forge-transition) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item:hover > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item > a:hover {
  color: var(--forge-gold) !important;
}
/* Active item — gold text + thin gold underline */
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current-menu-item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current_page_item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current-menu-ancestor > a {
  color: var(--forge-gold) !important;
  border-bottom-color: var(--forge-gold) !important;
}


/* ============================================================================
   Forge Core — Custom Mobile Header (Eden-Canvas-style)
   Active when Astra fires its mobile layout (body.ast-header-break-point).
   Row 1: logo + circular icons. Rows 2+3: horizontal scrolling nav strips
   with gold diamond separators. Strip/hide CSS lives in PHP companion.
   ============================================================================ */
body.ast-header-break-point .forge-mh {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
}
/* Row 1 — logo + icons */
body.ast-header-break-point #forge-mobile-header,
body.ast-header-break-point .forge-mh__bar {
  height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.25rem !important;
  background: var(--forge-black) !important;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
body.ast-header-break-point .forge-mh__logo {
  color: var(--forge-gold) !important;
  font-family: var(--forge-font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 60% !important;
}
body.ast-header-break-point #forge-mobile-header .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
body.ast-header-break-point .forge-mh__logo img,
body.ast-header-break-point #forge-mobile-header img,
body.ast-header-break-point #forge-mobile-header .custom-logo {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
/* Top bar text links (Contact + Shop) */
body.ast-header-break-point .forge-mh__toplinks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
}
body.ast-header-break-point .forge-mh__toplink {
  font-family: var(--forge-font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--forge-warm-white) !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body.ast-header-break-point .forge-mh__toplink:hover,
body.ast-header-break-point .forge-mh__toplink:focus {
  color: var(--forge-gold) !important;
  border-color: var(--forge-gold) !important;
}
/* Right-side circular icons */
body.ast-header-break-point .forge-mh__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
body.ast-header-break-point .forge-mh__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--forge-gold);
  background: transparent;
  color: var(--forge-gold) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
body.ast-header-break-point .forge-mh__icon:hover,
body.ast-header-break-point .forge-mh__icon:focus {
  background: var(--forge-gold);
  color: var(--forge-black) !important;
}
body.ast-header-break-point .forge-mh__icon svg { display: block; }
body.ast-header-break-point .forge-mh__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--forge-gold);
  color: var(--forge-black);
  font-family: var(--forge-font-body);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* Rows 2 + 3 — two horizontal scroll strips with a 3px dark gap */
body.ast-header-break-point .forge-mh__nav {
  background: var(--forge-black);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
body.ast-header-break-point .forge-mh__strip-gap {
  height: 3px;
  background: rgba(201,168,76,0.12);
  margin: 0;
}
body.ast-header-break-point .forge-mh__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 1.25rem !important;
  margin: 0 !important;
  list-style: none !important;
  height: 40px;
  background: var(--forge-black);
}
body.ast-header-break-point .forge-mh__list::-webkit-scrollbar { display: none !important; }
body.ast-header-break-point .forge-mh__li {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.ast-header-break-point .forge-mh__li + .forge-mh__li::before {
  content: "\25C6"; /* ◆ */
  color: var(--forge-gold);
  font-size: 8px;
  margin: 0 14px;
  opacity: 0.7;
}
body.ast-header-break-point .forge-mh__link {
  font-family: var(--forge-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--forge-warm-white) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  white-space: nowrap !important;
  padding: 4px 0 !important;
  transition: color 0.15s ease;
}
body.ast-header-break-point .forge-mh__link:hover,
body.ast-header-break-point .forge-mh__link:focus { color: var(--forge-gold) !important; }

/* ── Row 1 layout fix: logo left, pills centre, icons right ── */
body.ast-header-break-point #forge-mobile-header .forge-mh-row-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1rem !important;
  height: 60px !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-pills {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  overflow: hidden !important;
  padding: 0 0.5rem !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-pills a {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.75rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-icons {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}