.tf-header .inner-header {
  padding: 8px 0px;
}
@media (min-width: 1440px) {
  .tf-header .inner-header {
    padding: 10px 15px;
  }
  .tf-header .nav-icon {
    gap: 18px;
  }
}
/* Right-side header icons (Track Order, Sign in, Wishlist, Cart, More) are
   icon-only now - the theme's text label under each was removed per direct
   request, so the icon no longer needs the flex-column's text-align/gap
   sized for a two-line item. */
.tf-header .nav-icon-item {
  align-items: center;
  justify-content: center;
}
.tf-header .nav-icon {
  gap: 16px;
}
.tf-header .main-nav-menu .item-link {
  line-height: 40px;
}
/* The real Shoppolio brand mark (icon-only vector, cropped via getBBox()
   from shoppolio-logo/Shoppolio_logo_transparent.svg in the repo root -
   paired here with the existing "Shop"/"polio" text logotype rather than
   baking text into the image, since the source pack has no separate
   transparent wordmark-only asset) sits before the text as a plain sibling
   in the markup - .logo-site is the shared flex container that lines the
   two up. It's the wrapping <div> in the header/mobile-menu but the <a>
   itself in the footer (ft-logo wraps a class="logo-site" anchor) - the
   selector works identically as a flex container either way. */
.logo-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-site .logo-icon {
  height: 34px;
  width: auto;
}
/* Mobile off-canvas menu: .canvas-mb .logo-site (styles.css) is
   absolutely positioned over the menu body, not in normal flow, so the
   logo growing taller (the new icon added above) doesn't push the search
   field below it down on its own - nudge the search field down to give
   the now-taller logo clearance instead, per direct request. */
.canvas-mb .mb-content-top .form-search {
  margin-top: 25px;
}
.tf-header .form-search-product {
  border-color: var(--gray-4);
}
.tf-header .form-search-product .btn-submit-form {
  background-color: var(--gray);
}
.tf-header .form-search-product .btn-submit-form:hover {
  background-color: var(--text-3);
}
.nav-cart .link-fill {
  position: relative;
}
.nav-cart .cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--primary);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.shoppolio-cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 6px;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.shoppolio-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}