/* ═══════════════════════════════════════════════════════════════════
   THEME COLOR OVERRIDE  ·  Limpo — Luxury Navy × Gold
   Rules: color-related properties only.
   No layout, spacing, animation, or structural changes.
   ═══════════════════════════════════════════════════════════════════

   PALETTE
   Primary Navy    #1E3A5F   — buttons, links, active states
   Secondary Navy  #4A6A8A   — hover states
   Gold Accent     #C9A86A   — highlights, footer headings, accents
   Deep Navy       #0F2238   — footer background
   Body Dark       #1F2937   — headings
   Body Grey       #6B7280   — body text
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. CSS Variables ───────────────────────────────────────────── */
:root {
  --primary:    #1E3A5F;
  --secondary:  #4A6A8A;
  --navy-blue:  #1E3A5F;
  --black:      #1F2937;
  --lightgreen: #C9A86A;
  --lightblue:  #C9A86A;
  --grey:       #6B7280;
}


/* ─── 2. Hard-coded values (unreachable via variables) ───────────── */
.coltabs-tab--active { background: #1E3A5F !important; }
.faq-question:hover  { color:      #1E3A5F !important; }
.faq-banner-sec      { background: #1E3A5F !important; }


/* ─── 3. Announcement bar (offer strip) ─────────────────────────── */
/* --bg-color is set inline per-page; override background directly.  */
announcement-bar {
  background:       #1E3A5F !important;
  background-color: #1E3A5F !important;
}
.announcement-bar__announcement-controller .announcement-button {
  background: #1E3A5F !important;
}


/* ─── 4. Main header (pageheader / logo + nav bar) ───────────────── */
/* Warm off-white — distinctly different from announcement bar navy, */
/* provides clean contrast for the navy logo and gold accents.       */
pageheader {
  background:       #FAF8F4 !important;
  background-color: #FAF8F4 !important;
}


/* ─── 5. Footer — deep navy with gold headings ───────────────────── */

/* Background */
div#pagefooter .section-footer {
  background: #0F2238 !important;
}

/* Column heading titles → gold */
.section-footer__title.heading-font,
.section-footer__title.heading-font.h6,
.section-footer__title.heading-font.h6.no-wrap {
  color: #C9A86A !important;
}

/* h5 blocks (return address header etc.) → gold */
.section-footer__text.rte h5 {
  color: #C9A86A !important;
}

/* Paragraph body text → light on dark */
.section-footer__text.rte p {
  color: rgba(255, 255, 255, 0.62) !important;
  opacity: 1 !important;
}

/* Menu links → light on dark, gold on hover */
ul.section-footer__menu-block__menu li a {
  color: rgba(255, 255, 255, 0.72) !important;
}
ul.section-footer__menu-block__menu li a:hover {
  color: #C9A86A !important;
}

/* Borders — white-opacity works naturally on dark background */
.section-footer__row-container {
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.section-footer__row.section-footer__row--blocks > .section-footer__row__col {
  border-right-color: rgba(255, 255, 255, 0.10) !important;
}
.section-footer__title.heading-font.h6.no-wrap {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.section-footer__text.rte h5 {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Social icon ring borders */
.section-footer__row-container ul.social.inline-flex.flex-wrap.social--large li a {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Footer lower row (copyright + payment logos) */
.section-footer__row.section-footer__row-lower {
  opacity: 0.68 !important;
}
.copyright,
.copyright a,
.copyright span {
  color: rgba(255, 255, 255, 0.82) !important;
}


/* ─── 6. Mobile footer accordion ────────────────────────────────── */
/* Original CSS uses rgba(white) dividers — correct for dark footer. */
/* Override to ensure they win over any legacy light-bg rule.        */
@media (max-width: 749px) {
  .section-footer__menu-block .section-footer__title {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  }
  .section-footer__row__col {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  }
}


/* ─── 6b. Quick-add "Add to cart" button on product cards ────────── */
/* customdf2a.css has an unbalanced brace that accidentally traps this
   rule inside a max-width:767px media block, so it only ever painted on
   mobile — on desktop it silently fell back to the browser's transparent
   button reset. Re-declare unconditionally with the real brand colors. */
button.quick_add_card_btn_custom {
  background: #1E3A5F !important;
  color: #ffffff !important;
  padding: 8px !important;
  margin-top: 3px !important;
}
button.quick_add_card_btn_custom:hover {
  background: #4A6A8A !important;
}

/* ─── 6c. Cart drawer visibility ──────────────────────────────────── */
/* A third-party Shopify app (loaded live from an external CDN — its
   selector list names competing apps like "monster-upsell-cart" and
   "halo-cart-sidebar") ships a broad !important rule that blanket-hides
   ANY element named <cart-drawer> — display, visibility, opacity AND
   size all zeroed — to avoid showing two cart UIs at once on the
   original live store. It has no way to know this theme's OWN native
   <cart-drawer> is the one meant to be shown here, so it hides that
   too. Win back every property it zeroes, only when the drawer is
   actually open (higher specificity so it doesn't fight the app while
   genuinely closed). */
cart-drawer.js-cart-drawer[open] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(88%, 540px) !important;
  height: 100vh !important;
}

/* ─── 7. Sale badges ─────────────────────────────────────────────── */
.image-label-wrap span.offer-price,
product-block .image-label-wrap span.offer-price {
  background: #9F1239 !important;
  color: #ffffff !important;
}
.product-label--sale {
  background: #9F1239 !important;
  color: #ffffff !important;
}
.product-label--stock {
  background: #15803D !important;
  color: #ffffff !important;
}

/* ─── 8. Tablet product-grid columns ──────────────────────────────── */
/* main43e1.css only defines two states for --per-row-4/5 grids: 1 column
   below 768px (theme default, corrected to 2 via the --per-row-mob-2
   companion class already on every grid) and straight to 4/5 columns at
   768px+. There's no dedicated tablet step, so a 768-1023px viewport (e.g.
   iPad portrait) renders the same column count as full desktop. Add one. */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid--per-row-4,
  .product-grid--per-row-5 {
    --product-columns-desktop: 3;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   9. HEADER + MEGA MENU — PREMIUM REDESIGN
   Data/markup source: render_nav_desktop() / render_nav_tier1() in
   includes/partials/header.php (dynamic — nothing here is hardcoded
   per-category). This section is presentation only: it does not touch
   main-navigation's hover-intent/keyboard JS (maine5dd.js), which still
   owns opening/closing via .navigation__item--show-children.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 9.1 Sticky header polish ───────────────────────────────────── */
#pageheader {
  transition: box-shadow .25s ease;
}
#pageheader.pageheader--scrolled {
  box-shadow: 0 4px 24px rgba(15, 34, 56, 0.08);
}

/* ─── 9.2 Top nav bar — spacing, type, hover/active state ───────────── */
.navigation__tier-1 > .navigation__item > .navigation__link {
  font-family: var(--base-font-family);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #1F2937;
  transition: color .2s ease;
}
.navigation__tier-1 > .navigation__item > .navigation__link:hover,
.navigation__tier-1 > .navigation__item--active > .navigation__link {
  color: #1E3A5F;
}
.navigation__tier-1 > .navigation__item > .navigation__link:before {
  background-color: #C9A86A;
  height: 2px;
}
.navigation__tier-1 > .navigation__item > .navigation__children-toggle {
  color: #1F2937;
}
.navigation__tier-1 > .navigation__item > .navigation__link:focus-visible {
  outline: 2px solid #1E3A5F;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─── 9.3 Mega menu shell — soft shadow, rounded corners, fade+slide ── */
.navigation__tier-2-container.mega-menu {
  background: #ffffff;
  border: none;
  border-top: 1px solid rgba(15, 34, 56, 0.06);
  box-shadow: 0 24px 48px -20px rgba(15, 34, 56, 0.22), 0 2px 10px rgba(15, 34, 56, 0.06);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.navigation__item--show-children > .mega-menu,
html:not(.js) .navigation__item--with-children:hover > .mega-menu,
html:not(.js) .navigation__item--with-children:focus-within > .mega-menu {
  transform: translateY(0);
}
.navigation__tier-2-container.mega-menu .container {
  max-width: 1360px;
}

/* ─── 9.4 Mega menu layout — subcategory grid + featured banner ─────── */
.mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: start;
  gap: 36px;
  padding: 36px 0;
}
.mega-menu__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 20px;
  align-content: start;
}

/* Column headers — icon + name + count + arrow, hover highlight */
.mega-menu__group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  text-decoration: none;
  color: #171717;
  transition: background-color .18s ease;
}
.mega-menu__group-header:hover,
.mega-menu__group-header:focus-visible {
  background: #F5F3EE;
}
.mega-menu__group-header:hover .mega-menu__group-arrow {
  transform: translateX(3px);
  color: #1E3A5F;
}

.mega-menu__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mega-menu__icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-menu__icon--initial {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--base-font-family);
}

.mega-menu__group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.mega-menu__group-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-menu__group-count {
  font-size: 11.5px;
  color: #8C94A6;
  margin-top: 1px;
}
.mega-menu__group-arrow {
  flex: none;
  color: #B7BEC9;
  transition: transform .2s ease, color .2s ease;
}

/* Subcategory list under each group header */
.mega-menu__group-list {
  list-style: none;
  margin: 2px 0 18px;
  padding: 0 0 0 48px;
  display: flex;
  flex-direction: column;
}
.mega-menu__group-list a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  color: #5B6472;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.mega-menu__group-list a:hover,
.mega-menu__group-list a:focus-visible {
  color: #1E3A5F;
  transform: translateX(2px);
}
.mega-menu__group-list a.mega-menu__group-more {
  color: #C9A86A;
  font-weight: 600;
}
.mega-menu__group:not(:has(.mega-menu__group-list)) .mega-menu__group-header {
  margin-bottom: 16px;
}

/* Featured category banner */
.mega-menu__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(15, 34, 56, 0.35);
}
.mega-menu__banner-media {
  position: absolute;
  inset: 0;
}
.mega-menu__banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.mega-menu__banner:hover .mega-menu__banner-media img {
  transform: scale(1.06);
}
.mega-menu__banner-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #1E3A5F 0%, #2F4858 55%, #4A6A8A 100%);
}
.mega-menu__banner-initial {
  font-size: 84px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.14);
  font-family: var(--heading-font-family);
}
.mega-menu__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 22, 34, .82) 0%, rgba(15, 22, 34, .1) 55%, rgba(15, 22, 34, 0) 100%);
}
.mega-menu__banner-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-menu__banner-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--heading-font-family);
}
.mega-menu__banner-meta {
  font-size: 12px;
  opacity: .78;
}
.mega-menu__banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #C9A86A;
  margin-top: 8px;
  transition: gap .2s ease;
}
.mega-menu__banner:hover .mega-menu__banner-cta {
  gap: 10px;
}

/* Footer strip — View All CTA */
.mega-menu__footer {
  border-top: 1px solid #EEECE6;
  background: #FAF9F6;
}
.mega-menu__footer-inner {
  max-width: 1360px;
  display: flex;
  justify-content: flex-end;
  padding: 14px 0;
}
.mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1E3A5F;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, gap .2s ease;
}
.mega-menu__view-all:hover,
.mega-menu__view-all:focus-visible {
  background: #4A6A8A;
  gap: 11px;
}

/* Compact laptop widths — drop the banner column before anything scrolls */
@media (max-width: 1280px) {
  .mega-menu__inner {
    grid-template-columns: 1fr;
  }
  .mega-menu__banner {
    display: none;
  }
}

/* Tablet — narrower groups, tighter padding */
@media (min-width: 768px) and (max-width: 1023px) {
  .mega-menu__groups {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .mega-menu__inner {
    padding: 26px 0;
    gap: 24px;
  }
}

/* ─── 9.5 Keyboard focus parity with hover states ────────────────── */
.mega-menu__group-header:focus-visible,
.mega-menu__group-list a:focus-visible,
.mega-menu__banner:focus-visible,
.mega-menu__view-all:focus-visible {
  outline: 2px solid #1E3A5F;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .navigation__tier-2-container.mega-menu,
  .mega-menu__banner-media img,
  .mega-menu__group-arrow,
  .mega-menu__group-list a,
  .mega-menu__banner-cta,
  .mega-menu__view-all {
    transition: none !important;
  }
}

/* ─── 9.6 Mobile accordion drawer — icons, spacing, active state ────── */
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item > .navigation__link {
  font-family: var(--base-font-family);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item--active > .navigation__link {
  color: #1E3A5F;
}
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item > .navigation__children-toggle {
  min-width: 48px;
  min-height: 48px;
}
.mobile-navigation-drawer .navigation__column-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.mobile-navigation-drawer .navigation__column-title .mega-menu__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.mobile-navigation-drawer .navigation__column-title .mega-menu__icon--initial {
  font-size: 12px;
}
.mobile-navigation-drawer .navigation__link-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-navigation-drawer .navigation__tier-3 .navigation__link {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding-left: 40px;
  color: #5B6472;
}