/* =========================================================
   HEADER — cg-header
   ========================================================= */

.cg-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 84px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transform: translateY(0);
  transition: height 320ms cubic-bezier(.16,1,.3,1), background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}
@media (max-width: 999px) {
  .cg-header { height: 68px; }
}
.cg-header.is-scrolled {
  height: 64px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 40px rgba(0,0,0,.44);
}
@media (max-width: 999px) {
  .cg-header.is-scrolled { height: 60px; }
}

/* Scroll-direction hide/show. JS toggles this on scroll-down past the reveal
   zone; header always re-shows at/near the top or while a menu is open.
   Mirrors files/assets/css/style.css — keep both in sync. */
.cg-header.is-hidden {
  transform: translateY(-100%);
}

/* Three columns rather than a flex row: with a logo on each side the nav
   must stay centred on the HEADER, not merely sit after the left logo, so
   the two brand marks can differ in width without shifting the menu.
   min-width:0 on the side columns lets an unusually wide logo shrink
   instead of pushing the nav off-centre or out of the header. */
.cg-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding-left: 64px;
  padding-right: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}
@media (max-width: 1239px) {
  .cg-header__inner { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 999px) {
  .cg-header__inner { padding-left: 20px; padding-right: 20px; }
}

.cg-header__logo {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  opacity: 1;
  transition: opacity 200ms ease;
}
.cg-header__logo:hover { opacity: .78; }

/* Present only when a separate mobile logo is configured — the wrapper must
   not add an inline-element baseline gap or change the row's height, so it
   behaves exactly as the bare <img> did. */
.cg-header__logo-pic {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cg-header__logo-img{
  /* height: 45px; */
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: height 320ms cubic-bezier(.16,1,.3,1);
}
@media (max-width: 999px) {
  .cg-header__logo-img { height: 40px; }
}
.cg-header.is-scrolled .cg-header__logo-img { height: 45px; }
@media (max-width: 999px) {
  .cg-header.is-scrolled .cg-header__logo-img { height: 40px; }
}

.cg-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 34px;
}
@media (max-width: 999px) {
  /* Reference build only mounts this nav when isDesktop (w >= 1000); same threshold here. */
  .cg-header__nav { display: none; }
}
@media (max-width: 1239px) {
  .cg-header__nav { gap: 22px; }
}

/* Tablet-landscape squeeze. The desktop nav now shares the row with TWO
   logos, so between the theme's 1000px mobile threshold and 1240px the
   logos step down to keep the six labels on one line. This preserves the
   existing breakpoint rather than moving the whole desktop/mobile switch
   up — measured at 1024px the row still has ~160px of slack. */
@media (max-width: 1239px) and (min-width: 1000px) {
  .cg-header__inner { gap: 24px; }
  .cg-header__logo-img,
  .cg-header.is-scrolled .cg-header__logo-img { height: 40px; }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 32px; }
}
@media (max-width: 1099px) and (min-width: 1000px) {
  .cg-header__inner { gap: 16px; }
  .cg-header__nav { gap: 18px; }
  .cg-header__logo-img,
  .cg-header.is-scrolled .cg-header__logo-img { height: 34px; }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 26px; }
}

.cg-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* The nav sits between two logos now, so a label must never wrap the row
     onto a second line — it shrinks the header instead of breaking it. */
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  /* color: rgba(255,255,255,.66); */
  color: #000000;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.cg-header__nav-link:hover,
.cg-header__nav-link.is-current,
.cg-header__nav-link.is-open {
  /* color: #fff; */
  color: #000000;
  border-bottom-color: var(--text-accent);
}

.cg-header__caret {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 260ms cubic-bezier(.16,1,.3,1);
}
.cg-header__nav-link.is-open .cg-header__caret { transform: rotate(-135deg); }

.cg-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
  gap: 14px;
}

/* Second logo — replaced the header CTA button. Deliberately a little
   smaller than the left lockup so the nav keeps the centre of the header,
   and capped by max-width so an oversized upload shrinks itself rather
   than pushing the nav off-centre. */
.cg-header__logo2 {
  display: flex;
  align-items: center;
  min-width: 0;
  opacity: 1;
  transition: opacity 200ms ease;
}
a.cg-header__logo2:hover { opacity: .78; }

.cg-header__logo2-img{
  /* height: 38px; */
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
  transition: height 320ms cubic-bezier(.16,1,.3,1);
}
.cg-header.is-scrolled .cg-header__logo2-img{
  height: 45px;
}

.cg-header__burger {
  /* Reference build only mounts this button when isMobile (w < 1000); same threshold here. */
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  background: #c61e1e;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
}
@media (max-width: 999px) {
  .cg-header__burger { display: flex; }
}
.cg-header__burger-bar {
  display: block;
  height: 1px;
  background: #fff;
  width: 100%;
}

/* ---------------------------------------------------------
   MOBILE HEADER ROW — [logo 1] ......... [logo 2] [burger]
   The nav is display:none below 1000px, which removes it from the grid
   entirely, so the row is redeclared as two columns here; a three-column
   template would leave the right cluster stranded in the middle column.
   Both logos stay visible all the way down to 320px, stepping down in
   size so they never meet the burger.
   --------------------------------------------------------- */
@media (max-width: 999px) {
  .cg-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 28px; }
}
@media (max-width: 767px) {
  .cg-header__inner { gap: 12px; }
  .cg-header__logo-img,
  .cg-header.is-scrolled .cg-header__logo-img { height: 34px; }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 24px; }
}
@media (max-width: 479px) {
  .cg-header__actions { gap: 10px; }
  .cg-header__logo-img,
  .cg-header.is-scrolled .cg-header__logo-img { height: 32px; }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 32px; }
}
@media (max-width: 359px) {
  .cg-header__inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .cg-header__actions { gap: 8px; }
  .cg-header__logo-img,
  .cg-header.is-scrolled .cg-header__logo-img { height: 26px; }
  .cg-header__logo2-img,
  .cg-header.is-scrolled .cg-header__logo2-img { height: 18px; }
}

/* Mega menu */

.cg-header__mega-wrap {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  padding: 0 64px 24px;
  animation: cgFadeDown 280ms cubic-bezier(.16,1,.3,1) both;
}
@media (max-width: 1239px) {
  .cg-header__mega-wrap { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 999px) {
  .cg-header__mega-wrap { padding: 0 20px 0; }
}

.cg-header__mega-panel {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--n-0);
  border: 1px solid var(--n-100);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(11,12,15,.18);
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: minmax(0,76fr) minmax(292px,24fr);
}
@media (max-width: 1199px) {
  .cg-header__mega-panel { grid-template-columns: minmax(0,70fr) minmax(272px,30fr); }
}
@media (max-width: 1023px) {
  .cg-header__mega-panel { grid-template-columns: minmax(0,1fr); }
}
.cg-header.is-scrolled .cg-header__mega-panel { max-height: calc(100vh - 112px); }
@media (max-width: 999px) {
  .cg-header__mega-panel { max-height: calc(100vh - 116px); }
  .cg-header.is-scrolled .cg-header__mega-panel { max-height: calc(100vh - 108px); }
}

.cg-header__mega-links {
  padding: 40px 44px 44px;
}
@media (max-width: 1239px) {
  .cg-header__mega-links { padding: 32px 28px 36px; }
}

.cg-header__mega-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-500);
  padding-bottom: 28px;
}
@media (max-width: 1239px) {
  .cg-header__mega-kicker { padding-bottom: 22px; }
}

.cg-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: 44px;
}
@media (max-width: 1239px) {
  .cg-header__mega-grid { column-gap: 28px; }
}
@media (max-width: 899px) {
  .cg-header__mega-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.cg-header__mega-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--n-100);
  color: var(--n-950);
  transition: color 200ms ease;
}
@media (max-width: 1239px) {
  .cg-header__mega-item { padding: 14px 0; }
}
.cg-header__mega-item:hover { color: var(--accent-500); }

.cg-header__mega-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #F4F4F2;
}
@media (max-width: 1239px) {
  .cg-header__mega-thumb { width: 62px; height: 44px; }
}
.cg-header__mega-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cg-header__mega-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.35;
  color: inherit;
}
@media (max-width: 1239px) {
  .cg-header__mega-label { font-size: 14px; }
}

.cg-header__mega-chevron {
  flex: 0 0 auto;
  color: var(--accent-500);
}

.cg-header__mega-promo {
  position: relative;
  padding: 40px 32px 40px;
  border-left: 1px solid var(--n-100);
  overflow: hidden;
}
@media (max-width: 1359px) {
  .cg-header__mega-promo { padding: 40px 26px 40px; }
}
@media (max-width: 1239px) {
  .cg-header__mega-promo { padding: 32px 24px 32px; }
}
@media (max-width: 1023px) {
  .cg-header__mega-promo { padding: 28px 24px 32px; border-left-color: transparent; }
}

.cg-header__mega-promo-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-500);
}

.cg-header__mega-promo-title {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--n-950);
}
@media (max-width: 1239px) {
  .cg-header__mega-promo-title { font-size: 21px; }
}
.cg-header__mega-promo-title em {
  font-style: normal;
  color: var(--accent-500);
}

.cg-header__mega-promo-copy {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--n-600);
  text-wrap: pretty;
}

.cg-header__mega-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--n-950);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background 200ms ease, gap 200ms ease;
}
.cg-header__mega-promo-cta:hover { background: var(--accent-500); gap: 20px; }

.cg-header__mega-promo-ring {
  position: absolute;
  right: -90px; bottom: -90px;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid var(--accent-300);
  opacity: .28;
  pointer-events: none;
}

.cg-header__mega-promo-img {
  position: relative;
  display: block;
  width: 100%;
  height: 124px;
  margin-top: 20px;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 1023px) {
  .cg-header__mega-promo-img { height: 160px; }
}

/* Mobile menu overlay */

/* ---------------------------------------------------------
   MOBILE DRAWER
   Was a full-screen overlay; now slides in from the right so the page stays
   partly visible behind it. Transform-only animation (no width/left
   transitions), and the panel is never display:none — a display swap cannot
   transition, so closed state is translate + visibility instead.
   --------------------------------------------------------- */
.cg-header__mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(11, 12, 15, .62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.cg-header__mobile-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}

.cg-header__mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 88vw);
  max-width: 100%;
  z-index: 80;
  background: #0B0C0F;
  border-left: 1px solid rgba(255,255,255,.09);
  box-shadow: -30px 0 70px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 340ms cubic-bezier(.16,1,.3,1), visibility 0s linear 340ms;
}
.cg-header__mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 340ms cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* At 320px a full-bleed panel reads as a broken page rather than a drawer;
   92vw keeps a deliberate sliver of the page showing. */
@media (max-width: 400px) {
  .cg-header__mobile-menu { width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-header__mobile-menu,
  .cg-header__mobile-backdrop { transition-duration: 1ms; }
}

.cg-header__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}
.cg-header__mobile-logo { height: 40px; width: auto; display: block; }
.cg-header__mobile-close {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cg-header__mobile-nav {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}
.cg-header__mobile-link {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: rgba(255,255,255,.78);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.cg-header__mobile-link.is-current { color: #fff; }

.cg-header__mobile-products-toggle {
  /* Reference build uses a plain <div onClick>; this is a <button> for a11y,
     so browser default button chrome (background/border/font) is reset here. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: rgba(255,255,255,.78);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  cursor: pointer;
}
.cg-header__mobile-products-sign {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-accent);
}

.cg-header__mobile-categories {
  display: flex;
  flex-direction: column;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.cg-header__mobile-category {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  color: rgba(255,255,255,.64);
}
.cg-header__mobile-category-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.28);
}

.cg-header__mobile-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
}

/* =========================================================
   WORDPRESS STATE HOOKS
   The reference build mounts/unmounts these panels from the DOM.
   The WP theme always renders them and toggles visibility via class,
   so the two states below are the only addition to the original rules.
   ========================================================= */

.cg-header__mega-wrap { display: none; }
.cg-header.is-products-open .cg-header__mega-wrap { display: block; }

/* The drawer and its backdrop are always in the DOM and always `display`ed;
   open/closed is transform + visibility so the slide can animate. */

.cg-header__mobile-categories { display: none; }
.cg-header__mobile-products-toggle.is-open + .cg-header__mobile-categories { display: flex; }

body.cg-menu-open { overflow: hidden; }

/* Defense-in-depth: viewport is the final authority on desktop/mobile panels,
   even if a stale JS state class survives a resize (bfcache restore, devtools
   device toggle, etc). CSS visibility must never depend on JS alone. */
@media (max-width: 999px) {
  .cg-header.is-products-open .cg-header__mega-wrap { display: none; }
}
@media (min-width: 1000px) {
  .cg-header__mobile-menu.is-open,
  .cg-header__mobile-backdrop.is-open {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
  .cg-header__mobile-products-toggle.is-open + .cg-header__mobile-categories { display: none; }
}