/*
 * Small override on top of the vendor header3.css (see
 * components/layout/StorefrontHeaderDesktop.tsx / MegaMenu.tsx, which port
 * html/header/header3-container.html verbatim). header3.css never
 * constrains the logo <img> size itself — the source file is a raw
 * 2976x2639 PNG, so left alone it renders at native size and blows up the
 * header. This just caps it to a compact, real logo height.
 */
.header-center {
  padding: 14px 0 !important;
}
.header-center .navbar-logo {
  padding-top: 0 !important;
  display: flex;
  align-items: center;
}
.header-center .navbar-logo img {
  height: 84px;
  width: auto;
  max-width: 100%;
}

/* Center the primary nav (Home/Shop/Pages/About/Contact) within its column
 * instead of the vendor's default left-aligned float.
 *
 * Only `ul.megamenu` itself gets `display:flex; justify-content:center` —
 * its ancestors (.container-megamenu.horizontal, .megamenu-pattern
 * .container, .megamenu-wrapper) must stay plain full-width blocks. Making
 * an *ancestor* a flex row with justify-content:center instead shrinks that
 * row's children (e.g. .megamenu-wrapper) to their content width, which then
 * caps ul.megamenu's own 100% down to that shrunk width — so the "full
 * width" Shop mega-panel (`width:100%` against ul.megamenu, see
 * MegaMenu.tsx) rendered as a ~490px sliver even with width:100% set here. */
@media (min-width: 992px) {
  .megamenu-hori ul.megamenu {
    display: flex;
    justify-content: center;
    float: none;
    width: 100%;
  }
}

/* Shop menu — plain single-column list of real categories, with any real
 * subcategories nested underneath (see MegaMenu.tsx). Matches the simple
 * list style used by the Pages dropdown. */
.sw-shopmenu-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
.sw-shopmenu-list > li > a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.sw-shopmenu-list > li > a:hover {
  color: var(--sw-h2-green, #1a5632);
}
.sw-shopmenu-sublist {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.sw-shopmenu-sublist li a {
  display: block;
  padding: 8px 20px 8px 34px;
  font-size: 13px;
  color: #666;
}
.sw-shopmenu-sublist li a:hover {
  color: var(--sw-h2-green, #1a5632);
}

/* Blog mega menu — thumbnail list of recent posts (see MegaMenu.tsx). */
.sw-blogmenu {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.sw-blogmenu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
}
.sw-blogmenu-item:hover {
  background: #f6f7f8;
}
.sw-blogmenu-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #2f7a4c, var(--sw-h2-green, #1a5632));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}
.sw-blogmenu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sw-blogmenu-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sw-blogmenu-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sw-blogmenu-item:hover .sw-blogmenu-title {
  color: var(--sw-h2-green, #1a5632);
}
.sw-blogmenu-date {
  font-size: 11.5px;
  color: #999;
}
.sw-blogmenu-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 20px 0;
  padding: 11px 0;
  border-top: 1px solid #eee;
  font-size: 13px;
  font-weight: 700;
  color: var(--sw-h2-green, #1a5632);
}

/*
 * Center the main nav menu in the header. header3.css already gives
 * `.megamenu-hori` `display:flex; justify-content:center` — that centers
 * the menu *within its own column*, but that column (col-lg-8, 66.7%) sits
 * between a 25%-wide logo column and an 8.3%-wide cart/search column, so
 * the menu still reads as shifted left overall (its centered box isn't
 * centered in the header, just centered in a smaller box that itself
 * starts right after a wide logo). Rebalancing the two flanking columns to
 * equal width (each 16.7%, same total 12) makes the already-centered menu
 * column actually sit in the middle of the header — only at the `col-lg-*`
 * breakpoint (>=1200px), the one width these three columns render
 * side-by-side at; col-md and below already stack the logo onto its own
 * row above the menu, so no centering ambiguity exists there.
 */
@media (min-width: 1200px) {
  .header-center .navbar-logo.col-lg-3 {
    width: 16.6666667%;
  }
  .header-center .megamenu-hori.col-lg-8 {
    width: 66.6666667%;
  }
  .header-center .shopping_cart.col-lg-1 {
    width: 16.6666667%;
  }
}