/* ─────────────────────────────────────────────────────────────
   Techwish — GeneratePress / header nav thin overrides.

   GP does not fight our .tw-* components; this file only covers
   primary nav chrome, megamenu dropdown positioning, and mobile guards.
   ───────────────────────────────────────────────────────────── */

.tw-header {
  --tw-header-height: 76px;
}
body.has-tw-topbar {
  --tw-chrome-top: calc(var(--tw-topbar-height, 34px) + var(--tw-header-height, 76px));
}
body:not(.has-tw-topbar) {
  --tw-chrome-top: var(--tw-header-height, 76px);
}

/* Primary nav link styling (our header uses wp_nav_menu in .tw-nav). */
.tw-nav .menu-item > a,
.tw-nav a.tw-nav-item {
  font-family: var(--tw-display, "Space Grotesk", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tw-ink-2, #2A2F2C);
  text-decoration: none;
  transition: color var(--tw-dur-fast, .18s) ease;
}
.tw-nav .menu-item > a:hover,
.tw-nav .current-menu-item > a,
.tw-nav .current-menu-ancestor > a {
  color: var(--tw-mint-600, #1FB37C);
}

.tw-nav li.tw-nav-role-utility > a {
  color: var(--tw-mint-600, #1FB37C) !important;
  font-weight: 600;
}
.tw-nav li.tw-nav-role-utility > a:hover {
  color: var(--tw-mint, #2DCE92) !important;
}

/* Mega menu — full viewport width under sticky header (not clipped to .tw-nav). */
.tw-nav .tw-megamenu-parent {
  position: static;
}
.tw-nav .tw-megamenu-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  /* --tw-megamenu-top: viewport Y of .tw-header bottom (theme.js). --tw-megamenu-top-local
     is header height if a parent ever re-traps position:fixed. */
  top: var(--tw-megamenu-top, var(--tw-chrome-top, 76px));
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-top: 1px solid var(--tw-line-soft, #ECEFED);
  border-bottom: 1px solid var(--tw-line, #DDE3E0);
  background: var(--tw-paper, #fff);
  box-shadow:
    0 28px 56px rgba(11, 15, 13, 0.14),
    0 8px 20px rgba(11, 15, 13, 0.06);
  z-index: var(--tw-z-megamenu, 250);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity var(--tw-dur-fast, .18s) ease, visibility var(--tw-dur-fast, .18s) ease;
}
/* Invisible bridge from nav row down to the panel (no gap on PDP / with topbar). */
.tw-nav .tw-megamenu-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
  pointer-events: auto;
}
/* Panel flush under the white header row — no extra offset. */
body.tw-megamenu-open .tw-site-chrome .tw-promo-bar {
  visibility: hidden;
}
.tw-nav .tw-megamenu-dropdown__panel {
  display: block;
  width: 100%;
  margin: 0;
  /* Same horizontal inset as .tw-header (logo / nav / search). */
  padding: 16px var(--tw-container-pad, 36px) 24px;
  border: 0;
  max-width: none;
  box-sizing: border-box;
}
.tw-nav .tw-megamenu-parent:hover > .tw-megamenu-dropdown,
.tw-nav .tw-megamenu-parent:focus-within > .tw-megamenu-dropdown,
.tw-nav .tw-megamenu-parent:has(.tw-megamenu-dropdown:hover) > .tw-megamenu-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Panel fills the header content band — no extra max-width centering. */
.tw-nav .tw-megamenu-dropdown .tw-mm {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--tw-mm-pad, 10px);
  padding-bottom: var(--tw-mm-pad, 10px);
  box-sizing: border-box;
}

/* GP / WP nav submenu rules must not add vertical padding inside our panel. */
.tw-nav .tw-megamenu-dropdown .tw-mm__cat-links li,
.tw-nav .tw-megamenu-dropdown .tw-mm__cat-links a,
.tw-nav .tw-megamenu-dropdown .tw-mm__cat-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.tw-nav .tw-megamenu-dropdown .tw-mm__cat-links a {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.tw-nav .tw-megamenu-dropdown .tw-mm__cat-all {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  .tw-nav .tw-megamenu-dropdown__panel {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1000px) {
  .tw-nav .tw-megamenu-dropdown {
    display: none !important;
  }
  /* PDP sticky sub-nav breaks if body has overflow clip — clip only elsewhere */
  body.tw-root:not(.single-product) {
    overflow-x: clip;
    max-width: 100vw;
  }
}

/* ── My Account: same tight chrome as PDP (account-page.php shell). ── */
body.tw-account-page #page,
body.tw-account-page .site-content,
body.tw-account-page #content,
body.tw-account-page #primary.content-area,
body.tw-account-page .site-main,
body.tw-account-page .content-area,
body.tw-account-page .inside-article {
  margin-top: 0 !important;
  padding-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.tw-account-page main.tw-account-main {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 56px;
  max-width: none;
  width: 100%;
  background: var(--tw-paper-2, #f4f7f5);
}
body.tw-account-page .woocommerce {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.tw-account-page .generate-page-header,
body.tw-account-page .inside-article > .entry-header {
  display: none !important;
}

/* Cart + checkout — custom page headers, tight shell like account/PDP */
body.tw-cart-page-shell .generate-page-header,
body.tw-cart-page-shell .inside-article > .entry-header,
body.tw-checkout-page-shell .generate-page-header,
body.tw-checkout-page-shell .inside-article > .entry-header {
  display: none !important;
}
body.tw-cart-page-shell #primary.content-area,
body.tw-cart-page-shell .site-main,
body.tw-checkout-page-shell #primary.content-area,
body.tw-checkout-page-shell .site-main {
  max-width: none;
  width: 100%;
}
body.tw-cart-page-shell .inside-article,
body.tw-checkout-page-shell .inside-article {
  padding-top: 12px;
  padding-bottom: 56px;
}

/* ── PDP: no double WC/GP wrappers — content sits tight under site chrome. ── */
body.single-product #primary.content-area,
body.single-product .site-main,
body.single-product .content-area,
body.single-product .inside-article,
body.single-product .woocommerce-notices-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.single-product main.tw-pdp-main {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 56px;
  max-width: none;
  width: 100%;
}
@media (max-width: 900px) {
  .tw-header {
    --tw-header-height: 56px;
  }
  body.has-tw-topbar {
    --tw-topbar-height: 0px;
    --tw-chrome-top: var(--tw-header-height, 56px);
  }
  /* Clearance for PDP sticky bar + mobile bottom nav (nav inset is on .tw-footer). */
  body.has-tw-bottom-nav.single-product main.tw-pdp-main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}
/* Hide GP/WC chrome that can leak below our console footer on PDP. */
body.single-product .site-footer:not(.tw-footer),
body.single-product footer.site-info,
body.single-product #footer-widgets {
  display: none !important;
}
body.single-product .woocommerce .woocommerce-breadcrumb {
  display: none !important;
}

/*
 * Stray WC Flexslider thumb strip below footer only — do NOT hide
 * .tw-pdp-gallery / __main (custom hero) or paint the whole page dark.
 */
body.single-product footer.tw-footer ~ ol.flex-control-thumbs,
body.single-product footer.tw-footer ~ ul.flex-control-thumbs,
body.single-product footer.tw-footer ~ .flex-control-nav,
body.single-product footer.tw-footer ~ .woocommerce-product-gallery,
body.single-product footer.tw-footer ~ div.images {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Unused WC Photoswipe shell (we use tw-pdp-zoom). */
body.single-product .pswp {
  display: none !important;
}

/* ── PDP: undo GP / WooCommerce float layout (we use .tw-pdp-hero grid). ── */
body.single-product .woocommerce div.product,
body.single-product .woocommerce-page div.product {
  overflow: visible !important;
}
body.single-product .woocommerce div.product::before,
body.single-product .woocommerce div.product::after {
  display: none !important;
}
body.single-product .woocommerce div.product div.images,
body.single-product .woocommerce div.product .woocommerce-product-gallery {
  display: none !important;
}
body.single-product .woocommerce div.product div.summary,
body.single-product .woocommerce div.product .entry-summary {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.single-product .tw-pdp-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
}
body.single-product .tw-pdp-gallery {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-width: 0;
}
body.single-product .tw-pdp-gallery__stage {
  position: relative !important;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
/* Thumb sizing only — hero main image layout lives in pdp.css (absolute inset). */
body.single-product .tw-pdp-gallery__thumb img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 72px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 960px) {
  body.single-product .tw-pdp-hero {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  body.single-product .tw-pdp-gallery {
    grid-template-columns: 1fr !important;
  }
}