/* =========================================================
   Header
   ========================================================= */
.ds-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--ds-white);
  transition: box-shadow var(--ds-transition);
}

.ds-header-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 14px;
  z-index: 1;
  pointer-events: none;
}

.ds-site-header.is-stuck .ds-header-desktop,
.ds-site-header.is-stuck .ds-header-mobile {
  box-shadow: var(--ds-shadow-sm);
}

/* ---- Top bar ---- */
.ds-topbar {
  background: var(--ds-primary-dark);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--ds-fs-sm);
}

.ds-topbar .container {
  position: relative;
}

/* True center (not just "equal gaps" from space-between) via absolute positioning,
   so the promo message stays exactly centered regardless of how wide the menu or
   phone number blocks on either side happen to be. */
.ds-topbar-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.ds-topbar a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.ds-topbar a:hover {
  color: var(--ds-white);
}

.ds-topbar-nav {
  display: flex;
  gap: 1.25rem;
}

.ds-topbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  transition:
    background-color var(--ds-transition),
    color var(--ds-transition);
}

.ds-topbar-nav > li > a:hover,
.ds-topbar-nav > li > a:focus-visible {
  color: var(--ds-white);
  background-color: rgba(255, 255, 255, 0.16);
}

.ds-topbar-nav > li > a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.ds-topbar-phone {
  font-weight: 600;
  letter-spacing: 0.02em;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ds-topbar-phone-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---- Desktop header row: solid brand-green band, white logo/text/icons ---- */
.ds-header-desktop {
  background: var(--ds-primary);
  border-bottom: 1px solid var(--ds-primary-dark);
}

.ds-header-logo img {
  /* Logo mark (assets/images/logo-animated.svg) is a wide wordmark, ~1063×709
       (~1.5:1) — noticeably wider/flatter than the old logo, so it's sized off
       height (not width, previously 57px/160px respectively) to fit the fixed
       84px (--ds-header-height) header band without crowding it: 64px tall
       leaves ~10px of breathing room above and below, and comes out to roughly
       96px wide at this ratio. Already a white/gold mark per brand assets — no
       filter needed, it reads cleanly against the green band below. */
  width: 155px;
  height: 75px;
}

.ds-header-logo-mobile img {
  width: 110px;
  height: 56px;
  max-height: inherit;
}

.ds-logo-text {
  font-size: var(--ds-fs-xl);
  font-weight: 800;
  color: var(--ds-white);
}

.ds-main-nav-list > li {
  position: relative;
}

.ds-main-nav-list > li > a {
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--ds-radius-sm);
  position: relative;
  color: rgba(255, 255, 255, 0.92);
  transition:
    background-color var(--ds-transition),
    color var(--ds-transition);
}

/* Single, unambiguous "active" treatment (soft background chip) — used for both the
   currently-open page and mouse/keyboard hover. Previously this also animated an
   underline at the same time, which read as two competing active states at once. */
.ds-main-nav-list > li > a:hover,
.ds-main-nav-list > li > a:focus-visible,
.ds-main-nav-list > li.current-menu-item > a {
  color: var(--ds-white);
  background-color: rgba(255, 255, 255, 0.16);
}

/* Simple dropdown for items with children (mega menu walker adds .ds-has-children) */
.ds-main-nav-list .sub-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
  padding: 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--ds-transition),
    transform var(--ds-transition),
    visibility var(--ds-transition);
  z-index: 10;
}

.ds-main-nav-list li:hover > .sub-menu,
.ds-main-nav-list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ds-main-nav-list .sub-menu li a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-fs-sm);
}

.ds-main-nav-list .sub-menu li a:hover {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* ---- Header icon buttons ---- */
.ds-header-icon-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--ds-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition:
    background-color var(--ds-transition),
    color var(--ds-transition);
}

.ds-header-icon-btn:hover,
.ds-header-icon-btn:focus-visible {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* Icon buttons sitting directly on the green header bands (desktop + mobile) get a
   soft translucent "chip" background at rest — not just on hover — so they read as
   tappable buttons rather than bare icons floating on the green band. */
.ds-header-desktop .ds-header-icon-btn,
.ds-header-mobile .ds-header-icon-btn {
  color: var(--ds-white);
  background-color: rgba(255, 255, 255, 0.12);
}

.ds-header-desktop .ds-header-icon-btn:hover,
.ds-header-desktop .ds-header-icon-btn:focus-visible,
.ds-header-mobile .ds-header-icon-btn:hover,
.ds-header-mobile .ds-header-icon-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--ds-white);
}

.ds-header-icon-btn .ds-cart-count:not([hidden]),
.ds-header-icon-btn .ds-wishlist-count:not([hidden]) {
  position: absolute;
  top: -4px;
  left: -4px;
  background: var(--ds-accent);
  color: var(--ds-text);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Small "logged in" indicator on the account icon — same idea as the cart badge,
   just a plain dot since there's no count to show. */
.ds-header-icon-btn .ds-account-logged-in-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #4ade80;
  border: 2px solid var(--ds-primary);
}

.ds-mobile-navbar-icon-wrap .ds-account-logged-in-dot {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4ade80;
  border: 2px solid var(--ds-white);
}

/* Sitewide search modal (Bootstrap .modal). Opens from the TOP of the screen
   instead of Bootstrap's default vertical-center (removed .modal-dialog-centered
   in search-modal.php) — a centered modal kept re-centering itself (and jumping)
   as the results list grew/shrank while typing, which felt unstable. Anchoring to
   the top plus a hard max-height on modal-content keeps the dialog itself fixed in
   place and makes the results list the only thing that scrolls. */
.ds-search-modal .modal-dialog {
  margin-top: 4.5rem;
}

.ds-search-modal .modal-content {
  max-height: calc(100vh - 7rem);
  overflow: hidden;
}

.ds-search-modal .modal-body {
  padding: 2rem 1.5rem;
  max-height: calc(
    100vh - 7rem - 60px
  ); /* minus the modal header's own height */
  overflow-y: auto;
}

.ds-search-modal .ds-ajax-search-results {
  position: static;
  box-shadow: none;
  border: none;
  margin-top: 0.75rem;
  max-height: none; /* the scrollable area is .modal-body now, not this box */
  overflow-y: visible;
}

@media (max-width: 575.98px) {
  .ds-search-modal .modal-dialog {
    margin-top: 1rem;
    margin-inline: 0.75rem;
  }

  .ds-search-modal .modal-content {
    max-height: calc(100vh - 2rem);
  }

  .ds-search-modal .modal-body {
    max-height: calc(100vh - 2rem - 60px);
  }
}

/* ---- Mobile header: same brand-green band as desktop, white logo reads cleanly ---- */
.ds-header-mobile {
  background: var(--ds-primary);
}


.ds-header-logo-mobile .ds-logo-text {
  font-size: var(--ds-fs-lg);
}

/* ---- AJAX search component (shared: header + homepage) ---- */
.ds-ajax-search {
  position: relative;
}

.ds-ajax-search-input-wrap {
  position: relative;
}

.ds-ajax-search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--ds-muted);
  pointer-events: none;
}

.ds-ajax-search-input {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-fs-base);
  background: var(--ds-white);
}

.ds-ajax-search-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-light);
  outline: none;
}

.ds-ajax-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  /* Was z-index: 50 — far too low against this site's floating-UI scale (site
       header: 1030, sticky add-to-cart bar: 1040, mobile bottom nav: 1045). Swiper
       sliders (e.g. the homepage category slider right below this search section)
       use CSS transforms internally to move slides, and any transformed element
       establishes its own stacking context — at only z-index:50, this dropdown
       could end up painted underneath that section instead of floating above it,
       which is exactly the "search results box falls behind the category icons"
       bug that was reported. 1050 keeps it above everything else on the page,
       including the mobile bottom nav. */
  z-index: 1050;
  padding: 0.5rem;
}

.ds-search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
}

.ds-search-result-item:hover,
.ds-search-result-item.is-active {
  background: var(--ds-primary-light);
}

.ds-search-result-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
  flex-shrink: 0;
}

.ds-search-result-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Without flex:1 + min-width:0, a flex item's default min-width is "auto",
       which for text content means it refuses to shrink below its longest
       unbreakable run — so a long product title could push this whole row
       wider than the search box instead of just wrapping onto another line.
       On mobile especially (narrower box, more titles that don't fit on one
       line) that meant the result rows resized unpredictably as you typed,
       which read as the list "shaking"/jumping around. min-width:0 lets the
       title wrap normally within the row instead. */
  flex: 1 1 auto;
  min-width: 0;
}

.ds-search-result-title {
  font-weight: 600;
  font-size: var(--ds-fs-sm);
  white-space: normal;
  overflow-wrap: break-word;
}

.ds-search-result-price {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
}

.ds-search-result-oos {
  margin-right: auto;
  font-size: var(--ds-fs-xs);
  color: var(--ds-danger);
}

.ds-search-loading,
.ds-search-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--ds-muted);
  font-size: var(--ds-fs-sm);
  margin: 0;
}

/* ---- Offcanvas (mobile menu / cart / filters) shared look ---- */
.offcanvas.ds-offcanvas-right {
  width: min(380px, 90vw);
  z-index: 1046;
}

.ds-offcanvas-subtitle {
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
  margin-block: 1rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ds-mobile-nav-list li a,
.ds-mobile-categories li a {
  display: block;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--ds-border);
  font-weight: 500;
}

.ds-social-link {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
}

.ds-social-link:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
}

/* ---- Cart Drawer ---- */
.ds-cart-drawer-body {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Soft busy state: keep current items visible (no full-page spinner wipe). */
.ds-cart-drawer-body.is-busy {
  pointer-events: none;
}

.ds-cart-drawer-body.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(248, 250, 248, 0.45);
  backdrop-filter: blur(0.5px);
}

.ds-cart-drawer-body.is-busy::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 50%;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 2.5px solid var(--ds-primary-light);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-cart-spin 0.65s linear infinite;
}

.ds-cart-item.is-removing {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.ds-cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 180px;
  padding: 2rem 1rem;
  color: var(--ds-muted);
  text-align: center;
}

.ds-cart-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ds-primary-light);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-cart-spin 0.7s linear infinite;
}

.ds-cart-loading-text {
  margin: 0;
  font-size: var(--ds-fs-sm);
}

@keyframes ds-cart-spin {
  to {
    transform: rotate(360deg);
  }
}

.ds-cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.ds-cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.ds-cart-item-image img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
}

.ds-cart-item-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ds-cart-item-title {
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  margin: 0;
}

.ds-cart-item-price {
  font-size: var(--ds-fs-sm);
  color: var(--ds-primary-dark);
  font-weight: 600;
}

.ds-qty-stepper {
  align-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  width: fit-content;
}

.ds-qty-stepper button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  color: var(--ds-text);
}

.ds-qty-stepper input.qty {
  width: 36px;
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}

.ds-qty-stepper input.qty::-webkit-outer-spin-button,
.ds-qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ds-cart-item-remove {
  background: transparent;
  border: none;
  color: var(--ds-muted);
  align-self: flex-start;
}

.ds-cart-item-remove:hover {
  color: var(--ds-danger);
}

.ds-cart-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--ds-border);
}

.ds-cart-clear-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: var(--ds-danger);
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  padding: 0;
  margin-bottom: 1rem;
}

.ds-cart-clear-all .ds-icon {
  width: 15px;
  height: 15px;
}

.ds-cart-clear-all:hover {
  text-decoration: underline;
}

.ds-cart-subtotal-row {
  /* Breathing room from both the "clear all" button above and the action
       buttons below — previously this sat flush against the buttons underneath it. */
  padding-block: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: var(--ds-fs-base);
}

.ds-cart-subtotal-row strong {
  color: var(--ds-primary-dark);
  font-size: var(--ds-fs-lg);
}

/* ---- Toastify overrides (branded colors/shape on top of the library's own styles;
   positioning/animation/stacking are handled entirely by Toastify itself) ---- */
.ds-toastify {
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: var(--ds-shadow-md) !important;
  font-family: var(--ds-font-base) !important;
  font-size: var(--ds-fs-sm) !important;
  padding: 0.85rem 1.5rem !important;
  background: var(--ds-text) !important;
}

/* --ds-primary is the same green as the header, so the success toast used to blend
   right into it and was hard to tell apart at a glance — switched to a gold that
   reads clearly against the header. */
.ds-toastify-success {
  background: #d9b56d !important;
  color: var(--ds-text) !important;
}

.ds-toastify-error {
  background: var(--ds-danger) !important;
}

/* ---- Breadcrumb ---- */
.ds-breadcrumb-wrap {
  padding-top: 1rem;
}

.ds-breadcrumb .breadcrumb {
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

.ds-breadcrumb .breadcrumb-item.active {
  color: var(--ds-text);
}

@media (max-width: 991.98px) {
  .ds-header-mobile {
    position: sticky;
    top: 0;
  }
}

/* =========================================================
   Mobile bottom navigation bar (app-style tab bar)
   template-parts/header/mobile-bottom-nav.php — fixed to the viewport bottom,
   shown only < lg (matching the breakpoint the rest of the header already
   treats as "mobile"). Reuses the existing search-modal/cart-drawer triggers
   and the existing .ds-cart-count badge (kept live-updated by cart.js already).
   ========================================================= */
.ds-mobile-navbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1045;
  display: none;
  align-items: stretch;
  height: var(--ds-mobile-navbar-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ds-white);
  border-top: 1px solid var(--ds-border);
  box-shadow: 0 -4px 16px rgba(32, 40, 32, 0.08);
}

@media (max-width: 991.98px) {
  .ds-mobile-navbar {
    display: flex;
  }

  /* Keeps footer content (and everything else) from being hidden behind the
       fixed bar — the bar only exists at this breakpoint, so the padding that
       makes room for it only needs to apply here too. */
  body {
    padding-bottom: var(--ds-mobile-navbar-height);
  }
}

.ds-mobile-navbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: none;
  background: none;
  color: var(--ds-muted);
  font-size: 0.7rem;
  text-decoration: none;
  padding: 0;
}

.ds-mobile-navbar-item .ds-icon {
  width: 22px;
  height: 22px;
}

.ds-mobile-navbar-item.is-active {
  color: var(--ds-primary);
}

.ds-mobile-navbar-icon-wrap {
  position: relative;
  display: inline-flex;
}

.ds-mobile-navbar-icon-wrap .ds-cart-count:not([hidden]),
.ds-mobile-navbar-icon-wrap .ds-wishlist-count:not([hidden]) {
  position: absolute;
  top: -0.35rem;
  inset-inline-end: -0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--ds-accent);
  color: var(--ds-text);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}