/* ==========================================================================
   8X Gear — site chrome
   Header bar, top bar, primary nav, mega menu and footer, mapped onto
   Flatsome's own markup. Ported from the prototype's tools/custom/header.html
   and footer.html; the token names are identical so rules transfer verbatim.
   ========================================================================== */

/* ---------------------------------------------------------------- top bar */
#top-bar{background:var(--ct-ink);color:#fff;}
#top-bar .flex-row{min-height:0;}
/* Flatsome drops the announcement into a flex column that shrinks to content.
   Without this the message and the pills stack and the bar doubles in height. */
#top-bar .flex-col.flex-left{flex:1 1 auto;width:100%;}
.x-topbar-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
}
.x-topbar-msg{
  margin:0;color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;
}
.x-topbar-tools{display:inline-flex;align-items:center;gap:8px;}
.x-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;padding:0 11px;border:1px solid rgba(255,255,255,.4);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}

/* ------------------------------------------------------------ header bar */
/* header_bg is set to --ct-cream in the customizer, so only the hairline and the
   sticky state need stating here. */
#masthead{border-bottom:1px solid rgba(0,0,0,.08);}
#header.has-sticky .stuck .header-main{background-color:var(--ct-cream);}
/* Flatsome draws a shadow under the sticky bar; the prototype uses a hairline. */
#header .header-bg-container,#header .header-bg-image{box-shadow:none;}

#logo img{max-height:52px;width:auto;}

/* The prototype centres the nav between a left logo and right icons. Flatsome
   already puts the logo left, so only the nav column needs re-aligning. */
.header-inner .flex-col.flex-left.flex-grow > .header-nav-main{
  justify-content:center;width:100%;
}

/* ---------------------------------------------------------- primary nav */
.header-nav-main > li > a.nav-top-link{
  color:#0E1013;
  font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 0;
}
.header-nav-main > li{margin:0 13px;}
/* Hover moves an underline, never the text colour — contrast can only hold. */
.header-nav-main > li > a.nav-top-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--ct-red);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.header-nav-main > li{position:relative;}
.header-nav-main > li > a.nav-top-link:hover::after,
.header-nav-main > li > a.nav-top-link:focus-visible::after,
.header-nav-main > li.current-menu-item > a.nav-top-link::after,
.header-nav-main > li:hover > a.nav-top-link::after{transform:scaleX(1);}
.header-nav-main > li > a.nav-top-link:hover{color:#0E1013;}
/* Flatsome's default underline/border effects would double up with the rule above. */
.header-nav-main.nav-line-bottom > li > a:before,
.header-nav-main.nav-line-grow > li > a:before{display:none;}

/* The prototype's HOT chip, available to any menu item via a CSS class. */
.menu-item.x-hot > a.nav-top-link::before{
  content:"HOT";
  display:inline-flex;align-items:center;order:2;margin-left:7px;
  padding:2px 6px;background:var(--ct-red-ink);color:#fff;
  font-size:9px;font-weight:900;letter-spacing:.1em;line-height:1.4;
}

/* ------------------------------------------------------- header icons */
.header-nav .nav-icon > a,.header-nav .header-search-form a,
.header-nav li.cart-item > a,.header-nav li.account-item > a{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#0E1013;border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease;
}
.header-nav .nav-icon > a:hover,.header-nav li.cart-item > a:hover,
.header-nav li.account-item > a:hover{background-color:#E6DFD2;border-color:rgba(0,0,0,.14);}
/* Flatsome prints the icon colour as !important from `header_icons_color`, which
   would paint the badge count ink-on-red. The badge is the one place white type
   is correct, so it has to answer in kind. */
.header-main .cart-icon strong,.header-nav .cart-item .cart-icon strong{
  background-color:var(--ct-red-ink)!important;color:#fff!important;
  border-color:var(--ct-red-ink)!important;
  font-size:11px;font-weight:800;
}
.header-main .cart-icon strong:after,.header-nav .cart-item .cart-icon strong:after{border-color:transparent!important;}

/* ---------------------------------------------------------- mega menu */
/* Flatsome renders a UX Block inside .nav-dropdown when a menu item carries
   _menu_item_block. Everything below styles that panel, not the block content. */
.header-nav-main .nav-dropdown{
  background:var(--ct-cream);
  border:0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.16);
  box-shadow:0 18px 38px rgba(0,0,0,.12);
  padding:0;border-radius:0;
}
.x-mega{max-width:1280px;margin:0 auto;padding:28px 28px 32px;}
.x-mega-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr) minmax(0,1.05fr);
  gap:32px;align-items:start;
}
.x-mega h3{
  margin:0 0 13px;font-size:11px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(0,0,0,.58);
}
.x-mega-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.x-mega-tile{
  display:block;padding:13px 15px;background:#fff;color:#0E1013;text-decoration:none;
  border:1px solid rgba(0,0,0,.10);
  transition:background-color .18s ease,border-color .18s ease;
}
/* Surface darkens on hover; the ink label never moves toward the background. */
.x-mega-tile:hover,.x-mega-tile:focus-visible{background:#E6DFD2;border-color:rgba(0,0,0,.30);color:#0E1013;}
.x-mega-tile b{display:block;font-size:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;}
.x-mega-tile span{display:block;margin-top:5px;font-size:12px;font-weight:600;color:rgba(0,0,0,.64);}
.x-mega-list a{
  display:block;padding:10px 8px;color:#0E1013;text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.09);
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .18s ease;
}
.x-mega-list a:hover,.x-mega-list a:focus-visible{background:#E6DFD2;color:#0E1013;}
.x-mega-feature{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--ct-ink);color:#fff;}
.x-mega-feature p{margin:0;}
.x-mega-feature .x-mega-q{font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1.2;color:#fff;}
.x-mega-feature .x-mega-p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.82);}
.x-mega-feature a{
  align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 17px;
  background:#fff;color:#0E1013;border:1px solid #fff;text-decoration:none;
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .18s ease,color .18s ease;
}
/* Solid button inverts both layers together, so white-on-ink keeps its contrast. */
.x-mega-feature a:hover{background:var(--ct-ink);color:#fff;}

/* -------------------------------------------------------------- footer */
.footer-wrapper .footer-1{background-color:var(--ct-deep);color:#fff;}
#footer .widget > .widget-title,#footer .widget-title{
  color:var(--ct-red);
  font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:22px;
}
#footer .footer-1 ul{margin:0;padding:0;list-style:none;}
#footer .footer-1 li{margin:0 0 15px;border:0;padding:0;}
#footer .footer-1 li a{
  display:inline-block;color:rgba(255,255,255,.82);text-decoration:none;
  font-size:15px;font-weight:700;line-height:1.35;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
/* Hover brightens the label and reveals a red rule — contrast never drops. */
#footer .footer-1 li a:hover{color:#fff;border-bottom-color:var(--ct-red);}
.x-foot-about{margin:0 0 26px;max-width:38ch;color:rgba(255,255,255,.66);font-size:15px;line-height:1.65;}
.x-foot-contact{list-style:none;margin:0;padding:0;}
.x-foot-contact li{display:flex;gap:12px;margin-bottom:16px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.5;}
.x-foot-contact a{color:rgba(255,255,255,.82);text-decoration:none;}
.x-foot-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.absolute-footer{background-color:var(--ct-deep);color:rgba(255,255,255,.58);}
.absolute-footer a{color:rgba(255,255,255,.82);}
.absolute-footer a:hover{color:#fff;}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .header-nav-main > li{margin:0 9px;}
  .header-nav-main > li > a.nav-top-link{font-size:12px;}
}
@media (max-width:1020px){
  .x-mega-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:26px;}
  .x-mega-feature{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;}
}
@media (max-width:849px){
  .x-mega{padding:20px 16px 24px;}
  .x-mega-grid{grid-template-columns:1fr;gap:20px;}
  .x-mega-tiles{grid-template-columns:1fr;}
  .x-topbar-msg{font-size:10px;letter-spacing:.1em;}
}