/** Shopify CDN: Minification failed

Line 1467:0 Unexpected "}"

**/
/* ================================================================
   retail.css
   Scoped entirely to body.template-page, body.template-retail so zero risk of bleeding
   into the global wholesale theme on any other page.
================================================================ */

/* ----------------------------------------------------------------
   1. GLOBAL RESETS FOR THIS TEMPLATE
---------------------------------------------------------------- */
body.template-page, body.template-retail {
  background: #ffffff;
  color: #1f2937;
  font-family: Arial, Helvetica, sans-serif;
}

body.template-page .page-width,
body.template-retail .page-width {
  max-width: 1500px;
}


/* Prevent body scroll when mobile drawer is open */
body.retail-drawer-open {
  overflow: hidden;
}


/* ----------------------------------------------------------------
   2. HIDE WHOLESALE / SHOPIFY DEFAULT SECTIONS ON THIS TEMPLATE
   All selectors scoped to body.template-page, body.template-retail — never fires globally.
---------------------------------------------------------------- */
body.template-page #shopify-section-header-top,
body.template-page #shopify-section-announcement-bar,
body.template-page #shopify-section-header,
body.template-page #shopify-section-header-bottom,
body.template-page #shopify-section-services,
body.template-page .header-wrapper,
body.template-page .header-top,
body.template-page .header-bottom,
body.template-page .announcement-bar,
body.template-page .services,
body.template-page .shopify-section-header-sticky,
body.template-page .section-header,
body.template-page header.header,
body.template-page .main-page-title,
body.template-page .page-title,
body.template-page .rte h1:first-child,
body.template-retail #shopify-section-header-top,
body.template-retail #shopify-section-announcement-bar,
body.template-retail #shopify-section-header,
body.template-retail #shopify-section-header-bottom,
body.template-retail #shopify-section-services,
body.template-retail .header-wrapper,
body.template-retail .header-top,
body.template-retail .header-bottom,
body.template-retail .announcement-bar,
body.template-retail .services,
body.template-retail .shopify-section-header-sticky,
body.template-retail .section-header,
body.template-retail header.header,
body.template-retail .main-page-title,
body.template-retail .page-title,
body.template-retail .rte h1:first-child {
  display: none !important;
}


/* ----------------------------------------------------------------
   3. TOPBAR
---------------------------------------------------------------- */
body.template-page .retail-topbar,
body.template-retail .retail-topbar {
  background: #f3f6f5;
  border-bottom: 1px solid #cbe9e9;
}

body.template-page .retail-topbar-inner,
body.template-retail .retail-topbar-inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 0;
}

body.template-page .retail-topbar-center,
body.template-retail .retail-topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

body.template-page .retail-topbar-right,
body.template-retail .retail-topbar-right {
  margin-left: auto;
}

body.template-page .retail-topbar-left,
body.template-retail .retail-topbar-left {
  display: flex;
  align-items: center;
}

body.template-page .retail-topbar-left a,
body.template-retail .retail-topbar-left a {
  color: #2F7070;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}

body.template-page .retail-topbar-phone,
body.template-retail .retail-topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.template-page .retail-topbar-envelope,
body.template-retail .retail-topbar-envelope {
  font-size: 18px;
  line-height: 1;
}

body.template-page .retail-topbar-center,
body.template-retail .retail-topbar-center {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #235555;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Montserrat', sans-serif;
}

body.template-page .retail-topbar-right,
body.template-retail .retail-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body.template-page .retail-topbar-right a,
body.template-retail .retail-topbar-right a {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid #cbe9e9;
  color: #111827;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

body.template-page .retail-topbar-right a:hover,
body.template-retail .retail-topbar-right a:hover {
  color: #116d5e;
}


/* ----------------------------------------------------------------
   4. MAIN HEADER
---------------------------------------------------------------- */
body.template-page .retail-header-main,
body.template-retail .retail-header-main {
  background: #ffffff;
}

body.template-page .retail-header-main-inner,
body.template-retail .retail-header-main-inner {
  min-height: 118px;
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  align-items: center;
  gap: 20px;
}

/* Logo row — on desktop the hamburger is hidden inside this column */
body.template-page .retail-header-logo-row,
body.template-retail .retail-header-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.template-page .retail-header-logo img,
body.template-retail .retail-header-logo img {
  height: auto;
  max-width: 320px;
  display: block;
  padding-top: 10px;
  padding-bottom: 5px;
}

body.template-page .retail-header-shopname,
body.template-retail .retail-header-shopname {
  font-size: 22px;
  font-weight: 900;
  color: #163f8c;
  text-decoration: none;
}

body.template-page .retail-header-brand,
body.template-retail .retail-header-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

body.template-page .retail-header-brand-icon,
body.template-retail .retail-header-brand-icon {
  color: #2f6f6f;
  line-height: 1;
  flex-shrink: 0;
}

body.template-page .retail-header-brand-title,
body.template-retail .retail-header-brand-title {
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  color: #2f6f6f;
  text-transform: uppercase;
  letter-spacing: .5px;
}

body.template-page .retail-header-brand-subtitle,
body.template-retail .retail-header-brand-subtitle {
  margin-top: 4px;
  font-size: 15px;
  color: #25a18e;
  font-style: italic;
  font-family: 'Comfortaa', cursive;
  font-weight: 800;
}

body.template-page .retail-header-tools,
body.template-retail .retail-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

body.template-page .retail-search-form,
body.template-retail .retail-search-form {
  position: relative;
  width: 100%;
  max-width: 320px;
}

body.template-page .retail-search-form input,
body.template-retail .retail-search-form input {
  width: 100%;
  height: 46px;
  padding: 0 50px 0 16px;
  border: 1px solid #2f7070ab;
  border-radius: 6px;
  background: #2f707014;
  color: #374151;
  font-size: 15px;
  box-sizing: border-box;
}

body.template-page .retail-search-form button,
body.template-retail .retail-search-form button {
  display: none; /* hidden — replaced by .retail-search-btn */
}

body.template-page .retail-search-btn,
body.template-retail .retail-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #163f8c;
  border: 0;
  border-radius: 0 6px 6px 0;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

body.template-page .retail-search-btn:hover,
body.template-retail .retail-search-btn:hover {
  background: #0f3271;
}

body.template-page .retail-search-form input,
body.template-retail .retail-search-form input {
  padding-right: 46px; /* make room for the blue button */
}

body.template-page .retail-cart-link,
body.template-retail .retail-cart-link {
  position: absolute;
  right: 80px;
  display: inline-flex;
  text-decoration: none;
  color: #2f7070;
  line-height: 1;
  flex-shrink: 0;
}

body.template-page .retail-cart-link:hover,
body.template-retail .retail-cart-link:hover {
  color: #0f3271;
}

body.template-page .retail-cart-badge,
body.template-retail .retail-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #e53e3e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-sizing: border-box;
}

/* Hamburger — hidden on desktop, shown on mobile */
body.template-page .retail-mobile-toggle,
body.template-retail .retail-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  width: 36px;
  min-width: 36px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
}

body.template-page .retail-mobile-toggle span,
body.template-retail .retail-mobile-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 4px 0;
  background: #163f8c;
  border-radius: 2px;
  transition: background 0.2s;
}

body.template-page .retail-mobile-toggle:hover span,
body.template-retail .retail-mobile-toggle:hover span {
  background: #0f3271;
}


/* ----------------------------------------------------------------
   5. DESKTOP NAV BAR
---------------------------------------------------------------- */
body.template-page .retail-nav-bar,
body.template-retail .retail-nav-bar {
  background: #2F7070;
}

body.template-page .retail-nav-menu,
body.template-retail .retail-nav-menu {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 34px);
  flex-wrap: nowrap;
  position: relative;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

body.template-page .retail-nav-menu a,
body.template-retail .retail-nav-menu a {
  white-space: nowrap;
}

@media screen and (max-width: 1400px) {
  body.template-page .retail-nav-menu,
  body.template-retail .retail-nav-menu {
    gap: 18px;
  }

  body.template-page .retail-nav-menu a,
  body.template-retail .retail-nav-menu a {
    font-size: 13px;
  }
}

@media screen and (max-width: 1280px) {
  body.template-page .retail-nav-menu,
  body.template-retail .retail-nav-menu {
    gap: 12px;
  }

  body.template-page .retail-nav-menu a,
  body.template-retail .retail-nav-menu a {
    font-size: 12px;
  }
}

body.template-page .retail-nav-item,
body.template-retail .retail-nav-item {
  position: relative;
}

body.template-page .retail-nav-item > a,
body.template-retail .retail-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 54px;
  FONT-FAMILY: 'Montserrat', sans-serif;
}

body.template-page .retail-nav-item > a:hover,
body.template-retail .retail-nav-item > a:hover {
  color: #dbeafe;
}

/* Active page underline */
body.template-page .retail-nav-item.is-active > a,
body.template-retail .retail-nav-item.is-active > a {
  color: #FFF;
  box-shadow: inset 0 -3px 0 #2f7070;
}

body.template-page .retail-nav-chevron,
body.template-retail .retail-nav-chevron {
  margin-top: 1px;
  opacity: 0.8;
  transition: transform 0.15s;
}

body.template-page .retail-nav-item:hover .retail-nav-chevron,
body.template-retail .retail-nav-item:hover .retail-nav-chevron {
  transform: rotate(180deg);
}

body.template-page .retail-dropdown,
body.template-retail .retail-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fbfbfbff;
  border: 3px solid #dbe3ef;
  box-shadow: 0 8px 24px #333;
  z-index: 20;
  padding: 8px 0;
}

body.template-page .retail-dropdown a,
body.template-retail .retail-dropdown a {
  display: block;
  padding: 10px 8px;
  color: #1c4848;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  FONT-FAMILY: 'Comfortaa', CURSIVE;
}

body.template-page .retail-dropdown a:hover,
body.template-retail .retail-dropdown a:hover {
  background: #f1fffe;
}

body.template-page .retail-nav-item:hover .retail-dropdown,
body.template-retail .retail-nav-item:hover .retail-dropdown {
  display: block;
}


/* ----------------------------------------------------------------
   6. MOBILE DRAWER
   Slides in from the left. z-index above everything on the page.
   Styles use the retail- prefix so they never clash with the
   wholesale theme's own drawer/modal if it exists elsewhere.
---------------------------------------------------------------- */
.retail-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 88vw;
  height: 100%;
  background: #ffffff;
  z-index: 10000;
  overflow-y: auto;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  will-change: transform;
  contain: layout style;
}

body:not(.shopify-design-mode) .retail-drawer {
  transition: transform 0.28s ease;
}

.retail-drawer.is-open {
  transform: translateX(0);
}

.retail-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  contain: strict;
}

body:not(.shopify-design-mode) .retail-drawer-overlay {
  transition: opacity 0.28s ease;
}

.retail-drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer header row */
.retail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: #0f3d88;
  flex-shrink: 0;
}

.retail-drawer-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.retail-drawer-close {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}

.retail-drawer-close:hover {
  color: #dbeafe;
}

/* Top utility links (Account, Track Order, etc.) */
.retail-drawer-toplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 10px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.retail-drawer-toplinks a {
  color: #374151;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px 4px 0;
  margin-right: 10px;
  border-right: 1px solid #d1d5db;
}

.retail-drawer-toplinks a:last-child {
  border-right: 0;
  margin-right: 0;
}

.retail-drawer-toplinks a:hover {
  color: #163f8c;
}

/* Main nav links */
.retail-drawer-nav {
  flex: 1;
}

.retail-drawer-item {
  border-bottom: 1px solid #f3f4f6;
}

/* Plain link items */
.retail-drawer-item > a {
  display: block;
  padding: 15px 18px;
  color: #111827;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.retail-drawer-item > a:hover {
  color: #163f8c;
  background: #f8fafc;
}

/* Parent items with children — button instead of link */
.retail-drawer-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 18px;
  background: transparent;
  border: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  text-align: left;
}

.retail-drawer-parent:hover {
  color: #163f8c;
  background: #f8fafc;
}

.retail-drawer-chevron {
  font-size: 18px;
  font-weight: 400;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.retail-drawer-item.is-expanded .retail-drawer-chevron {
  transform: rotate(90deg);
}

/* Child link accordion */
.retail-drawer-children {
  display: none;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.retail-drawer-item.is-expanded .retail-drawer-children {
  display: block;
}

.retail-drawer-children a {
  display: block;
  padding: 12px 18px 12px 30px;
  color: #374151;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}

.retail-drawer-children a:last-child {
  border-bottom: 0;
}

.retail-drawer-children a:hover {
  color: #163f8c;
  background: #eef3f8;
}

/* Phone at the bottom of the drawer */
.retail-drawer-footer {
  padding: 18px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.retail-drawer-phone {
  color: #163f8c;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.retail-drawer-phone:hover {
  text-decoration: underline;
}


/* ----------------------------------------------------------------
   7. HERO
---------------------------------------------------------------- */
body.template-page .retail-hero,
body.template-retail .retail-hero {
  background: #F3F6F5;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.template-page .retail-hero-inner,
body.template-retail .retail-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .98fr;
  align-items: center;
  column-gap: 10px;
  height: 480px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

body.template-page .retail-hero-copy,
body.template-retail .retail-hero-copy {
  padding: 20px 0 20px 90px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

body.template-page .retail-hero-kicker,
body.template-retail .retail-hero-kicker {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.1;
  color: #2A6363;
  font-family: 'Comfortaa', cursive;
}

body.template-page .retail-hero-title,
body.template-retail .retail-hero-title {
  margin: 0;
  font-size: 59px;
  line-height: .98;
  font-weight: 900;
  color: #2A6363;
  text-transform: uppercase;
  letter-spacing: .4px;
}

body.template-page .retail-hero-subtitle,
body.template-retail .retail-hero-subtitle {
  margin: 14px 0 0;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 500;
  color:#2F7070;
  text-transform: uppercase;
  font-family: 'Bowlby One', sans-serif;
  letter-spacing: .5px;
}

body.template-page .retail-hero-rule,
body.template-retail .retail-hero-rule {
  width: 118px;
  height: 3px;
  background: #2f67bb;
  border: 0;
  margin: 26px 0 22px;
}

body.template-page .retail-hero-text,
body.template-retail .retail-hero-text {
  margin: 10px 0 22px;
  font-size: 18px;
  line-height: 1.45;
  color: #374151;
  max-width: 470px;
  font-family: 'Montserrat', sans-serif;
}

body.template-page .retail-hero-buttons,
body.template-retail .retail-hero-buttons {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px;
  margin: 0 0 16px;
  width: fit-content;
}

body.template-page .retail-btn-primary,
body.template-retail .retail-btn-primary,
body.template-page .retail-btn-secondary,
body.template-retail .retail-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 56px;
  padding: 0 26px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .4px;
  box-sizing: border-box;
  background: transparent;
  color: #2F7070;
  border: 2px solid #2F7070;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

body.template-page .retail-btn-primary:hover,
body.template-retail .retail-btn-primary:hover,
body.template-page .retail-btn-secondary:hover,
body.template-retail .retail-btn-secondary:hover {
  background: #2F7070;
  color: #ffffff;
  border-color: #2F7070;
}

body.template-page .retail-hero-features,
body.template-retail .retail-hero-features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 48px;
  width: fit-content;
  justify-content: flex-start;
  padding-top: 8px;
  border-top: 1px solid #d9e8e8;
  margin-top: 4px;
}

body.template-page .retail-hero-feature,
body.template-retail .retail-hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 145px;
}

body.template-page .retail-hero-feature-icon,
body.template-retail .retail-hero-feature-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #2F7070;
  font-size: 28px;
  line-height: 1;
}

body.template-page .retail-hero-feature strong,
body.template-retail .retail-hero-feature strong {
  display: block;
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  color: #2F7070;
  text-transform: uppercase;
}

body.template-page .retail-hero-feature span,
body.template-retail .retail-hero-feature span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #4b5563;
}


/* ----------------------------------------------------------------
   8. BENEFITS
---------------------------------------------------------------- */
body.template-page .retail-benefits,
body.template-retail .retail-benefits {
  background: #ffffff;
  padding: 22px 0 28px;
}

body.template-page .retail-benefits-inner,
body.template-retail .retail-benefits-inner {
  max-width: 1400px;
}

body.template-page .retail-benefits-box,
body.template-retail .retail-benefits-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #eef3f8;
  border-radius: 2px;
  overflow: hidden;
}

body.template-page .retail-benefit,
body.template-retail .retail-benefit {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  position: relative;
}

body.template-page .retail-benefit:not(:last-child)::after,
body.template-retail .retail-benefit:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 0;
  width: 1px;
  height: calc(100% - 44px);
  background: #c9d4e3;
}

body.template-page .retail-benefit-icon,
body.template-retail .retail-benefit-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #2f67bb;
  font-size: 28px;
  line-height: 1;
}

body.template-page .retail-benefit strong,
body.template-retail .retail-benefit strong {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
  color: #111827;
  text-transform: uppercase;
}

body.template-page .retail-benefit span,
body.template-retail .retail-benefit span {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: #374151;
}


/* ----------------------------------------------------------------
   9. CATEGORIES
---------------------------------------------------------------- */
body.template-page .retail-categories,
body.template-retail .retail-categories {
  padding: 18px 0 40px;
  background: #ffffff;
}

body.template-page .retail-section-title,
body.template-retail .retail-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 0 28px;
  text-align: center;
}

body.template-page .retail-section-title::before,
body.template-retail .retail-section-title::before,
body.template-page .retail-section-title::after,
body.template-retail .retail-section-title::after {
  content: "";
  width: 100px;
  height: 2px;
  background: #d7e0ec;
}

body.template-page .retail-section-title h2,
body.template-retail .retail-section-title h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  color: #143d8d;
  text-transform: uppercase;
}

body.template-page .retail-category-grid,
body.template-retail .retail-category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 34px;
  text-align: center;
}

body.template-page .retail-category-card,
body.template-retail .retail-category-card {
  text-decoration: none;
}

body.template-page .retail-category-image,
body.template-retail .retail-category-image {
  width: 160px;
  height: 160px;
  margin: 0 auto 16px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.template-page .retail-category-image img,
body.template-retail .retail-category-image img {
  max-width: 88px;
  max-height: 118px;
  width: auto;
  height: auto;
}

body.template-page .retail-category-name,
body.template-retail .retail-category-name {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
  color: #1f2937;
  text-transform: uppercase;
}

body.template-page .retail-category-btn,
body.template-retail .retail-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #7f9bc8;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #163f8c;
  text-transform: uppercase;
  text-decoration: none;
}

body.template-page .retail-category-btn:hover,
body.template-retail .retail-category-btn:hover {
  border-color: #163f8c;
}


/* ================================================================
   RESPONSIVE BREAKPOINTS
================================================================ */

/* ----------------------------------------------------------------
   1200px — wide tablet / small desktop
---------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  body.template-page .retail-header-main-inner,
  body.template-retail .retail-header-main-inner {
    grid-template-columns: 240px 1fr 280px;
  }

  body.template-page .retail-nav-menu,
  body.template-retail .retail-nav-menu {
    gap: 28px;
  }

  body.template-page .retail-hero-inner,
  body.template-retail .retail-hero-inner {
    padding-left: 34px;
    padding-right: 34px;
  }

  body.template-page .retail-hero-title,
  body.template-retail .retail-hero-title {
    font-size: 58px;
  }

  body.template-page .retail-hero-subtitle,
  body.template-retail .retail-hero-subtitle {
    font-size: 28px;
  }

  body.template-page .retail-benefits-box,
  body.template-retail .retail-benefits-box {
    grid-template-columns: repeat(2, 1fr);
  }

  body.template-page .retail-category-grid,
  body.template-retail .retail-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------------
   989px — tablet
---------------------------------------------------------------- */
@media screen and (max-width: 989px) {
  body.template-page .retail-topbar-center,
  body.template-retail .retail-topbar-center {
    display: none;
  }

  body.template-page .retail-topbar-inner,
  body.template-retail .retail-topbar-inner {
    grid-template-columns: 1fr auto;
  }

  body.template-page .retail-header-main-inner,
  body.template-retail .retail-header-main-inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
    justify-items: center;
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  body.template-page .retail-header-tools,
  body.template-retail .retail-header-tools {
    width: 100%;
    justify-content: center;
  }

  body.template-page .retail-search-form,
  body.template-retail .retail-search-form {
    max-width: 420px;
  }

  body.template-page .retail-hero-inner,
  body.template-retail .retail-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 34px 26px 0;
  }

  body.template-page .retail-hero-copy,
  body.template-retail .retail-hero-copy {
    max-width: 100%;
    padding-bottom: 20px;
    text-align: center;
  }

  body.template-page .retail-hero-rule,
  body.template-retail .retail-hero-rule,
  body.template-page .retail-hero-text,
  body.template-retail .retail-hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  body.template-page .retail-hero-buttons,
  body.template-retail .retail-hero-buttons,
  body.template-page .retail-hero-features,
  body.template-retail .retail-hero-features {
    justify-content: center;
  }


  body.template-page .retail-benefit:not(:last-child)::after,
  body.template-retail .retail-benefit:not(:last-child)::after {
    display: none;
  }
}

/* ----------------------------------------------------------------
   749px — mobile
   Strategy:
     • Hide the desktop nav bar entirely.
     • Show the hamburger button — drawer handles navigation.
     • Never bring back the wholesale Shopify header (stays hidden).
     • Simple flex-column header: logo row on top, search+cart below.
     • Brand tagline hidden (saves vertical space on small screens).
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {

  /* ── Topbar ─────────────────────────────────── */
  body.template-page .retail-topbar-inner,
  body.template-retail .retail-topbar-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 12px;
    text-align: center;
    justify-content: center;
  }

  body.template-page .retail-topbar-left,
  body.template-retail .retail-topbar-left {
    justify-content: center;
  }

  body.template-page .retail-topbar-left a,
  body.template-retail .retail-topbar-left a {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Hide the right link-list on mobile — it's in the drawer instead */
  body.template-page .retail-topbar-right,
  body.template-retail .retail-topbar-right {
    display: none;
  }

  /* ── Main header ─────────────────────────────── */
  body.template-page .retail-header-main-inner,
  body.template-retail .retail-header-main-inner {
    /* Single-column flex: logo-row on top, search+cart below */
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: auto;
    padding: 10px 14px 1px;
  }

  /* Logo row: hamburger left, logo centred */
  body.template-page .retail-header-logo-row,
  body.template-retail .retail-header-logo-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.template-page .retail-mobile-toggle,
  body.template-retail .retail-mobile-toggle {
    display: inline-flex;  /* show hamburger on mobile */
  }

  body.template-page .retail-header-logo,
  body.template-retail .retail-header-logo {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  body.template-page .retail-header-logo img,
  body.template-retail .retail-header-logo img {
    max-height: 150px;
    max-width: 250px;
  }

  /* Keep a right spacer so logo stays visually centered */
  body.template-page .retail-header-logo-row::after,
  body.template-retail .retail-header-logo-row::after {
    content: "";
    width: 36px;  /* matches hamburger width */
    flex-shrink: 0;
  }

  /* Hide brand tagline — too much on a phone */
  body.template-page .retail-header-brand,
  body.template-retail .retail-header-brand {
    display: none;
  }

  /* Search + cart: full width, centered */
  body.template-page .retail-header-tools,
  body.template-retail .retail-header-tools {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  body.template-page .retail-search-form,
  body.template-retail .retail-search-form {
    flex: 1;
    max-width: none;
    width: auto;
  }

  body.template-page .retail-search-form input,
  body.template-retail .retail-search-form input {
    height: 44px;
    font-size: 14px;
  }

  body.template-page .retail-cart-link,
  body.template-retail .retail-cart-link {
    font-size: 26px;
    flex-shrink: 0;
  }

  /* ── Desktop nav: hide on mobile (drawer replaces it) ─ */
  body.template-page .retail-nav-bar,
  body.template-retail .retail-nav-bar {
    display: none;
  }

  /* ── Hero ───────────────────────────────────── */
  body.template-page .retail-hero-inner,
  body.template-retail .retail-hero-inner {
    grid-template-columns: 1fr;
    padding: 2px 10px 0;
    min-height: auto;
  }

  body.template-page .retail-hero-copy,
  body.template-retail .retail-hero-copy {
    max-width: 100%;
    text-align: center;
    padding: 0 0 20px;
  }

  body.template-page .retail-hero-kicker,
  body.template-retail .retail-hero-kicker {
    font-size: 22px;
  }

  body.template-page .retail-hero-title,
  body.template-retail .retail-hero-title {
    font-size: 40px;
    line-height: .95;
  }

  body.template-page .retail-hero-subtitle,
  body.template-retail .retail-hero-subtitle {
    font-size: 22px;
  }

  body.template-page .retail-hero-rule,
  body.template-retail .retail-hero-rule,
  body.template-page .retail-hero-text,
  body.template-retail .retail-hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  body.template-page .retail-hero-text,
  body.template-retail .retail-hero-text {
    font-size: 16px;
  }

/* STACK BUTTONS */
  body.template-page .retail-hero-buttons,
  body.template-retail .retail-hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 16px !important;
  }
  /* MOBILE HERO IMAGE HEIGHT */
body.template-page .retail-hero-image-wrap,
body.template-retail .retail-hero-image-wrap {
  height: 220px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-top: -20px !important;
}

  body.template-page .retail-hero-buttons a,
  body.template-retail .retail-hero-buttons a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* FIX HERO CUT OFF */
  body.template-page .retail-hero,
  body.template-retail .retail-hero {
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
  }

  body.template-page .retail-hero-inner,
  body.template-retail .retail-hero-inner,
  body.template-page .retail-hero-copy {
    height: auto !important;
    overflow: visible !important;
  }

}

  body.template-page .retail-btn-primary,
  body.template-retail .retail-btn-primary,
  body.template-page .retail-btn-secondary,
  body.template-retail .retail-btn-secondary {
    min-width: 100%;
    max-width: 320px;
  }

  body.template-page .retail-hero-features,
  body.template-retail .retail-hero-features {
    justify-content: center;
    gap: 18px;
  }

  body.template-page .retail-hero-feature,
  body.template-retail .retail-hero-feature {
    min-width: auto;
    justify-content: center;
    text-align: left;
  }

  body.template-page .retail-hero-image,
  body.template-retail .retail-hero-image {
    max-width: 100%;
    height: auto;
  }

  /* ── Benefits & categories ──────────────────── */
  body.template-page .retail-benefits-box,
  body.template-retail .retail-benefits-box {
    grid-template-columns: 1fr;
  }

  body.template-page .retail-category-grid,
  body.template-retail .retail-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  body.template-page .retail-category-image,
  body.template-retail .retail-category-image {
    width: 132px;
    height: 132px;
  }

  body.template-page .retail-section-title::before,
  body.template-retail .retail-section-title::before,
  body.template-page .retail-section-title::after,
  body.template-retail .retail-section-title::after {
    width: 40px;
  }
}
body.shopify-design-mode .retail-drawer,
body.shopify-design-mode .retail-drawer-overlay,
body.shopify-design-mode .retail-nav-chevron {
  transition: none !important;
  animation: none !important;
}

body.shopify-design-mode .section {
  margin: revert !important;
  padding: revert !important;
}
body.shopify-design-mode .retail-drawer,
body.shopify-design-mode .retail-drawer-overlay {
  display: none !important;
}
body.template-page .top-column-content,
body.template-page #TopColumnContent,
body.template-page .ttloader,
body.template-page .skip-to-content-link,
body.template-retail .top-column-content,
body.template-retail #TopColumnContent,
body.template-retail .ttloader,
body.template-retail .skip-to-content-link {
  display: none !important;
}

body.template-page, body.template-retail.gradient {
  background-attachment: scroll !important;
}
body.template-page #MainContent,
body.template-retail #MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.template-page .content-for-layout,
body.template-retail .content-for-layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.template-page, body.template-retail {
  --header-height: 0px !important;
  --header-sticky-height: 0px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.template-page #MainContent,
body.template-retail #MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.template-page, body.template-retail,
body.template-page #MainContent,
body.template-retail #MainContent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.template-page .retail-hero-image-wrap,
body.template-retail .retail-hero-image-wrap {
  align-items: flex-end;
  overflow: hidden;
  justify-content: flex-start;
  padding: 0;
  height: 480px;
  display: flex;
}

body.template-page .retail-hero-image,
body.template-retail .retail-hero-image {
  object-fit: contain;
  object-position: bottom center;
  width: 100%;
  max-width: 100%;
  display: block;
  vertical-align: bottom;
}

body.template-page .retail-hero-features,
body.template-retail .retail-hero-features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
body.template-page footer .link,
body.template-retail footer .link,
body.template-page footer .customer a,
body.template-retail footer .customer a,
body.template-page footer a,
body.template-retail footer a {
  text-decoration: none;
}
body.template-page footer .fa,
body.template-retail footer .fa,
body.template-page footer .fas,
body.template-retail footer .fas,
body.template-page footer .far,
body.template-retail footer .far,
body.template-page footer .fab,
body.template-retail footer .fab,
body.template-page footer i,
body.template-retail footer i {
  display: inline-block !important;
  visibility: visible !important;
}

body.template-page footer a,
body.template-retail footer a {
  text-decoration: none !important;
}

body.template-page footer a:hover,
body.template-retail footer a:hover {
  text-decoration: underline !important;
}
body.template-page .retail-shop-all-btn,
body.template-retail .retail-shop-all-btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 36px;
  background: #2F7070;
  color: #fff;
  border: 2px solid #112525ff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: background 0.2s, color 0.2s;
  justify-content: center;
}

body.template-page .retail-topbar-right a:last-child,
body.template-retail .retail-topbar-right a:last-child {
  color: #ffffff;
  font-weight: 900;
  background: #1564B6;
  border-left: 1px solid #1564B6;
}

body.template-page .retail-topbar-right a:last-child:hover,
body.template-retail .retail-topbar-right a:last-child:hover {
  background: #1f5050;
  border-left-color: #1f5050;
}
body.template-page .retail-hero,
body.template-retail .retail-hero {
  background: #f2f4f5;
  overflow: hidden;
 padding: 25px 0 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  position: relative;
}


/* ================================================================
   RETAIL PRODUCT PAGE OVERRIDES
================================================================ */

/* ----------------------------------------------------------------
   HIDE WHOLESALE-ONLY ELEMENTS
---------------------------------------------------------------- */
body.template-retail .wholesale,
body.template-retail .free-shipping,
body.template-retail .free-shipping-modal,
body.template-retail .stock-status,
body.template-retail .product-code,
body.template-retail .product__viewing,
body.template-retail .product-com-wish,
body.template-retail .payment,
body.template-retail .product-single__description,
body.template-retail .shopify-payment-button,
body.template-retail .shopify-payment-button__button,
body.template-retail .dynamic-checkout__content,
body.template-retail #dynamic-checkout-cart,
body.template-retail [data-shopify="payment-button"],
body.template-retail .product-form__payment-container,
body.template-retail .shopify-cleanslate,
body.template-retail .price__sale,
body.template-retail .price__badges,
body.template-retail .unit-price {
  display: none !important;
}

/* ----------------------------------------------------------------
   TRUST BAR — full width above image, no extra white space
---------------------------------------------------------------- */
body.template-retail .rp-trust-bar-wrap {
  background: #f0fafa;
  border-bottom: 1px solid #c5e4e4;
  padding: 10px 20px;
}
body.template-retail .rp-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1500px;
  margin: 0 auto;
}
body.template-retail .rp-trust-bar span {
  font-size: 12px;
  font-weight: 700;
  color: #2F7070;
  background: #ffffff;
  border: 1px solid #c5e4e4;
  padding: 4px 14px;
  border-radius: 20px;
}

/* ----------------------------------------------------------------
   PRICE — "Retail Price: $10.50"
---------------------------------------------------------------- */
body.template-retail .pr_outer {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding-bottom: 0px !important;
}

body.template-retail .pr_outer .whle_price { display: none !important; }
body.template-retail .pr_outer .price__regular { display: inline-flex !important; }
body.template-retail .pr_outer .price__regular .visually-hidden { display: none !important; }
body.template-retail .pr_outer .price__regular .price-item--regular {
  display: inline !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #a83236 !important;
}

/* ----------------------------------------------------------------
   FREE SHIPPING → FAST SHIPPING & NO TAX
---------------------------------------------------------------- */
body.template-retail .product__tax.caption.rte {
  font-size: 0 !important;
  color: transparent !important;
}
body.template-retail .product__tax.caption.rte::before {
  content: 'No Tax on All Orders' !important;
  display: block !important;
  font-size: 12px !important;
  font-family: 'Montserrat', sans-serif;
  color: #374151 !important;
  font-weight: 700 !important;
}

/* ----------------------------------------------------------------
   FIX "Choose a Jej" label corruption
---------------------------------------------------------------- */
body.template-retail .product-form__input .form__label {
  position: static !important;
  top: auto !important;
}

/* ----------------------------------------------------------------
   QUANTITY + ADD TO CART — stepper left, button right, same row
---------------------------------------------------------------- */
body.template-retail .product .product__info-container .product-form__quantity {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}
body.template-retail .product-form__quantity .form__label {
  display: none !important;
}
body.template-retail .rp-qty-heading {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #9c0505 !important;
  margin: 0.2rem 0 0.1rem !important;
}

body.template-retail .product-form__submit {
  height: 46px !important;
  width: 100% !important;
}
body.template-retail .product-form__buttons::after {
  content: 'Shipping calculated at checkout (Free Shipping over $99)' !important;
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-top: 8px !important;
}

/* ----------------------------------------------------------------
   DESCRIPTION — white card matching wholesale style
---------------------------------------------------------------- */
body.template-retail .rp-desc-outer {
  background: #f3f4f6;
  padding: 0 0 30px;
}
body.template-retail .rp-desc-inner {
  max-width: 1100px;
  margin: 20px auto 30px;
  padding: 30px 150px 30px;
  background-color: #ffffff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.23);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  color: #333;
  word-break: break-word;
  text-align: center;
}
body.template-retail .rp-desc-inner p {
  margin-bottom: 18px;
  white-space: normal !important;
}
body.template-retail .rp-desc-inner h1 {
  font-size: 20px;
  font-weight: 600;
  color: #143d8d;
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .5px;
  
}
@media screen and (max-width: 768px) {
  body.template-retail .rp-desc-inner {
    padding: 20px;
    margin: 20px;
  }
}


/* ================================================================
   RETAIL CART PAGE — body.template-retail (cart.retail template)
================================================================ */

/* Rename "CASE QUANTITY" column header → "QUANTITY" */
body.template-retail .cart-items thead th:nth-child(3) {
  font-size: 0 !important;
  color: transparent !important;
}
body.template-retail .cart-items thead th:nth-child(3)::before {
  content: 'QUANTITY' !important;
  font-size: 1.4rem !important;
  color: var(--color-foreground) !important;
}

/* Hide wholesale-only cart elements */
body.template-retail .cart__tax-note,
body.template-retail .cart__ctas .shopify-payment-button {
  display: none !important;
}

/* "Free Shipping & No Tax" note under subtotal */
body.template-retail .cart__footer::after {
  content: '✓ No Tax on All Orders' !important;
  display: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2F7070 !important;
  margin-top: 8px !important;
  text-align: left !important;
}

/* Checkout button — retail orange */
body.template-retail .cart__checkout-button {
  background: #e05c3a !important;
  border-color: #e05c3a !important;
  color: #fff !important;
}
body.template-retail .cart__checkout-button:hover {
  background: #c04a2b !important;
  border-color: #c04a2b !important;
}

/* Continue shopping link */
body.template-retail .cart__continue-btn {
  color: #2F7070 !important;
}
.section-divider-bottom {
   display: block !important;
   border: none !important;
   border-top: 2px solid #ccc !important;
   margin-top: 16px !important;
   margin-bottom: 11px !important;
}
.sku-name {
    font-size: 11px !important;
    text-transform: capitalize !important;
    display: inline-block !important;
    font-weight: 700 !important;
    color: #0c2897 !important;
    FONT-FAMILY: Montserrat, sans-serif;
}
.js-variant-sku {
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0c2897 !important;
    FONT-FAMILY: Montserrat, sans-serif;
}
fieldset.product-form__input .form__label {
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
    color:rgb(156, 5, 5) !important;
}
body.template-retail .rp-divider {
  border: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  margin: 16px 0 !important;
  display: block !important;
}
/* ----------------------------------------------------------------
   RETAIL ADD TO CART BUTTON
---------------------------------------------------------------- */
body.template-retail .retail-atc-wrap {
  margin-top: 1.2rem;
  clear: both;
}
body.template-retail .retail-atc-btn {
  display: block;
  width: 100%;
  height: 50px;
  background: #e05c3a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s;
  text-transform: uppercase;
}
body.template-retail .retail-atc-btn:hover { background: #c04a2b; }
body.template-retail .retail-atc-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
body.template-retail .retail-atc-shipping {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}
body.template-retail cart-drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body.template-retail .cart-drawer,
body.template-retail #CartDrawer,
body.template-retail .cart-drawer__overlay {
  display: none !important;
}
/* ----------------------------------------------------------------
   RETAIL CART PAGE — tax note
---------------------------------------------------------------- */
body.template-retail .tax-note {
  font-size: 0 !important;
  color: transparent !important;
}

body.template-retail .tax-note::before {
  content: 'Shipping Calculated at Checkout (Free Shipping over $99)' !important;
  display: block !important;
  font-size: 14px !important;
  color: #374151 !important;
}
/* ----------------------------------------------------------------
   DESCRIPTION — match product box width and alignment
---------------------------------------------------------------- */
body.template-retail .rp-desc-inner {
  max-width: 1400px;
  margin: 0 auto;
}
body.template-retail .rp-desc-outer {
  background: #f3f4f6;
  padding: 0 !important;
  margin: 0 !important;
}
body.template-retail .product-form {
  overflow: hidden !important;
}
/* ----------------------------------------------------------------
   QTY + ADD TO CART — match wholesale exactly
---------------------------------------------------------------- */
body.template-retail .product .product__info-container .product-form__quantity {
  float: left !important;
  clear: none !important;
  width: auto !important;
  margin-right: 15px !important;
}

body.template-retail .product-form__buttons {
  top: 0 !important;
  margin-top: -10px !important;
}

body.template-retail .product-form__buttons::after {
  display: none !important;
}

body.template-retail .rp-shipping-note {
  font-size: 13px;
  color: #036865a6;
  margin-top: 8px;
  clear: both;
  display: block;
  line-height: 1.4;
  font-family: Montserrat, sans-serif;
}
body.template-retail .retail-topbar {
  width: 100% !important;
}

body.template-retail .retail-topbar-inner {
  max-width: 100% !important;
  padding-right: 0px !important;
}

/* ----------------------------------------------------------------
   RETAIL PRODUCT PAGE — product image sizing
   Overrides the wholesale theme's 56%/left:182px image rule,
   which doesn't fit the retail layout. Makes the image fill
   its container and stay centered.
---------------------------------------------------------------- */
body.template-retail .product__media.media.media--transparent > img,
body.template-retail .product__media.media > img {
  width: 90% !important;
  height: auto !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  position: relative !important;
  display: block !important;
}
/* ================================================================
   RETAIL PRODUCT PAGE — full layout customizations
   Covers: extended gray info box, gray description zone,
   description tab pill, and 5px white gap between sections
================================================================ */

/* --- Description section: paint entire zone gray --- */
body.template-retail [id*="product_description"],
body.template-retail [id*="product_description"] > *,
body.template-retail [id*="product_description"] .page-main,
body.template-retail [id*="product_description"] .color-background-1,
body.template-retail [id*="product_description"] .content-container,
body.template-retail [id*="product_description"] .gradient,
body.template-retail .rp-desc-outer {
  background: #f3f4f6 !important;
}

/* --- 5px white gap between product info and description --- */
body.template-retail [id*="product_description"] {
  border-top: 5px solid #ffffff !important;
  margin-top: 0 !important;
}

/* --- Spacing inside the description gray zone --- */
body.template-retail [id*="product_description"] .page-main {
  padding-top: 50px !important;
  padding-bottom: 40px !important;
}

body.template-retail .rp-desc-outer {
  padding: 0 !important;
}

/* --- White description card styling --- */
body.template-retail .rp-desc-inner {
  position: relative !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
}

/* --- "Description" tab pill above the card --- */
body.template-retail .rp-desc-inner::before {
  content: "MORE INFO:";
  position: absolute;
  top: -44px;
  left: 8px;
  display: inline-block;
  padding: 8px 100px;
  background:#b1bfbf94;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  line-height: 26px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
      border-radius: 4px;
}
body.template-retail .product__title > * {
  color: #373735;
  font-family: Montserrat, sans-serif !important;
  font-weight: bold !important;
  font-size: 20px !important;
}

body.template-retail .tooltip {
  white-space: nowrap !important;
  background-color: #2F7070 !important;
  letter-spacing: normal !important;
  font-family: "dm sans", sans-serif !important;
  border-radius: 4px !important;
}
body.template-retail p.rp-qty-heading {
  margin: 10px 0 -12px 0 !important;
}
body.template-retail .js-variant-sku,
body.template-retail .sku-name {
  position: relative !important;
}

/* ----------------------------------------------------------------
   RETAIL PRODUCT PAGE — divider line between Fast Shipping and SKU
   Use ::after to draw a line that spans the full container width,
   matching the bottom divider below the color swatches.
---------------------------------------------------------------- */
body.template-retail .product__tax.caption.rte {
  border-bottom: 1px solid #2f70704f !important;
  padding-bottom: 1px !important;
  margin: 0 35px 8px 0 !important;
  position: static !important;
}

body.template-retail .product__tax.caption.rte::after {
  display: none !important;
}
body.template-retail .section-divider-bottom {
display: block !important;
border: none !important;
border-top: 1px solid #2f70704f !important;
margin-top: 20px !important;
margin-bottom: 15px !important;
}
body.template-retail .js.product-form__input.Color {
grid-template-columns: repeat(15, 0fr) !important;
}
body.template-retail .card-information .wholesale .whle_title, .card-information .case-price-label {
    color: #004ec7;
    display: none !important;
    font-weight: 700;
}

@media screen and (max-width: 749px) {
  .collection-hero__description {
    padding-top: 0;

   }
  }
  @media screen and (max-width: 749px) {
  body.template-retail .retail-shop-all-btn {
    display: none !important;
  }
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — move cart icon into top phone bar
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Pin cart to top-right of screen (lands in the teal phone bar) */
  body.template-retail .retail-cart-link {
    position: fixed !important;
    top: 8px !important;
    right: 14px !important;
    z-index: 100 !important;
    font-size: 24px !important;
    display: inline-flex !important;
  }

  /* Make room in topbar so cart doesn't overlap phone number */
  body.template-retail .retail-topbar-inner {
    padding-right: 50px !important;
  }

  /* Collapse the empty tools row but keep the cart visible */
  body.template-retail .retail-header-tools {
    display: block !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;   /* ← lets the cart "poke out" */
  }
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — smaller font and tighter line spacing for
   collection hero description
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .collection-hero__description,
  .collection-hero__description p,
  .collection-hero__description h1 {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
  }

  .collection-hero__description h1 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}
/* Un-hide H1 inside collection descriptions */
body.template-collection .rte h1:first-child,
body.template-collection.template-retail .rte h1:first-child,
.collection-hero__description h1:first-child {
  display: block !important;
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — collection hero H1 styling
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .collection-hero__description h1 {
    font-size: 15px !important;
    font-weight: bold !important;
    padding-bottom: 8px !important;
    line-height: 1.3 !important;
  }
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — product page layout fixes
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Product info box: contain within screen, add side padding */
  body.template-retail .product__info-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Product title: allow wrapping, smaller font */
  body.template-retail .product__title > * {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
  }

  /* Description card: reduce padding and margin on mobile */
  body.template-retail .rp-desc-inner {
    padding: 20px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    box-sizing: border-box !important;
  }

  body.template-retail .rp-desc-inner h1 {
    font-size: 18px !important;
  }

  /* Tab pill: smaller on mobile so it doesn't overflow */
  body.template-retail .rp-desc-inner::before {
    font-size: 13px !important;
    padding: 8px 18px !important;
    top: -40px !important;
  }
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — color swatches wrap to multiple rows
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  body.template-retail .js.product-form__input.Color {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 4px !important;
  }
}
/* ----------------------------------------------------------------
   Custom liquid section — reduce vertical padding on desktop
---------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .section-sections--19577228263498__custom_liquid_HKyQEB-padding {
    padding-top: 0px;
    padding-bottom: 2px;
  }
}
/* ----------------------------------------------------------------
   RETAIL — newsletter section color
---------------------------------------------------------------- */
body.template-retail #shopify-section-sections--19577228263498__5e19abcf-1cfb-4285-945f-b821cc717a0d .gradient {
  background:#2f7070ba !important;
  background-attachment: fixed !important;
}
/* ----------------------------------------------------------------
   RETAIL — hide topbar center tagline on tablet to prevent overlap
---------------------------------------------------------------- */
@media screen and (max-width: 1100px) and (min-width: 750px) {
  body.template-retail .retail-topbar-center,
  body.template-page .retail-topbar-center {
    display: none !important;
  }
}
body.template-retail .retail-free-ship,
body.template-page .retail-free-ship {
  color: #c0392b !important;
}
/* ----------------------------------------------------------------
   RETAIL — sale price layout (stacked: compare on top, sale below)
---------------------------------------------------------------- */
body.template-retail #shopify-section-template--19577234751562__main .price__sale,
body.template-retail .price__sale {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

body.template-retail .price__sale .price-item--regular {
  text-decoration: line-through !important;
  color: #08296b !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  order: 1 !important;
  margin: 0 !important;
}

body.template-retail .price__sale .price-item--sale {
  color: #E3170D !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  order: 2 !important;
  margin: 0 !important;
}

body.template-retail .price.price--on-sale .price__regular {
  display: none !important;
}

body.template-retail .product .product__info-container .badge {
  align-self: center !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 7px 8px !important;
  margin-top: 0 !important;
}
body.template-retail .product .product__info-container .price__badge-sale::before {
  content: "SAVE ";
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — sale price on one line
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  body.template-retail .price__sale {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  body.template-retail .price__sale .price-item--regular {
    font-size: 1.5rem !important;
  }

  body.template-retail .price__sale .price-item--sale {
    font-size: 1.6rem !important;
  }

  body.template-retail .product .product__info-container .badge {
    font-size: 11px !important;
    padding: 3px 3px !important;
    line-height: 1.2 !important;
  }

  body.template-retail .product .product__info-container .badge::before {
    content: "SAVE ";
  }
}
/* ================================================================
   RETAIL COLLECTION CARDS — CLEAN FIX
================================================================ */

/* Hide wholesale-only pieces, but NOT the retail price label */
body.template-retail .product-hover,
body.template-retail .wholesale,
body.template-retail .whle_title {
  display: none !important;
}

/* Keep Retail Price label visible */
body.template-retail .whle_price {
  display: inline !important;
}

/* Hide unit price */
body.template-retail .unit-price,
body.template-retail .price__unit,
body.template-retail small.unit-price {
  display: none !important;
}

/* Badge */
body.template-retail .card__badge,
body.template-retail .card__badge .badge {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* Price wrapper */
body.template-retail .card-wrapper .price,
body.template-retail .card-wrapper .price__sale {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding-top: 3px !important;
}

/* Compare-at price */
body.template-retail .price__sale .price-item--regular {
  display: inline !important;
  text-decoration: line-through !important;
  color: #062a72 !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
}




/* FORCE SHOW badge + info on retail cards */
body.template-retail .card--card.card--media > .card__content .card__badge,
body.template-retail .card--card.card--media .card__inner .card__information,
body.template-retail .card--card.card--text .card__inner {
  display: block !important;
}
body.template-retail .product-grid .card__content .card__information h3.card__heading a, .product_tab .card__content .card__information h3.card__heading a, .related-product-grid .card__content .card__information h3.card__heading a {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 1px !important;
    
}
body.template-retail .card__content {
    display: block !important;
}
/* PRODUCT PAGE sale price */
body.template-retail .product__info-wrapper .price__sale .price-item--sale,
body.template-retail .product__info-wrapper .price__sale .price-item--last {
  display: inline !important;
  color: #E3170D !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}

/* COLLECTION CARD sale price */
body.template-retail #product-grid .grid__item .card-wrapper .price__sale .price-item--sale,
body.template-retail #product-grid .grid__item .card-wrapper .price__sale .price-item--last {
  display: inline !important;
  color: #E3170D !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  padding-top: 0 !important;
  padding-bottom: 0px !important;
}
body.template-retail .pr_outer::before {
  content: none !important;
  display: none !important;
}

body.template-retail .case-price-label {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: rgb(8, 133, 106) !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  margin-right: 0px !important;
}
body.template-retail .price__container .pr_outer .whle_price {
  display: inline-flex !important;
  align-items: baseline !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-right: 0px !important;
}
body.template-retail .price__regular,
body.template-retail .price__sale {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.template-retail .price__container .pr_outer .case-price-label {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: rgb(8, 133, 106) !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}
@media screen and (min-width: 990px) {
  body.template-retail .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 60% !important;
    width: calc(60% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #f3f4f6 !important;
    position: relative !important;
  }

  body.template-retail .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 40% !important;
    width: calc(40% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }
}
body.template-retail .product--small:not(.product--no-media) .product__info-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 100% !important;
  width: 100vw !important;
  background: #f3f4f6 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
  body.template-retail .product__info-container {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.template-retail .product__title,
  body.template-retail .product__title h1,
  body.template-retail .product__title h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.25 !important;
     }

body.template-retail .product__title a.product__title,
body.template-retail .product__title > a {
  display: none !important;
}
/* RETAIL TOPBAR — FINAL (HIDE CENTER WHEN TOO TIGHT) */

/* Hide center where it causes overlap */
@media screen and (min-width: 1100px) and (max-width: 1675px) {
  body.template-retail .retail-topbar-center,
  body.template-page .retail-topbar-center {
    display: none !important;
  }

  body.template-retail .retail-topbar-inner,
  body.template-page .retail-topbar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  body.template-retail .retail-topbar-right,
  body.template-page .retail-topbar-right {
    margin-left: auto !important;
    display: flex !important;
  }
}

/* Show center again when enough room */
@media screen and (min-width: 1675px) {
  body.template-retail .retail-topbar-center,
  body.template-page .retail-topbar-center {
    display: flex !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}
/* ================================================================
   RETAIL SUB-PAGES — page content styling
   Applies to: boys, girls, toddler, adult retail pages, etc.
   Scoped to .retail-page-content to avoid affecting newsletter,
   footer, and other theme .rte blocks.
================================================================ */

/* Wrapper — constrain width and center */
body.template-retail .retail-page-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 10px !important;
  font-family: 'Montserrat', sans-serif;
  color: #1f2937;
}

/* H1 — show and style (overrides global retail H1 hide rule) */
body.template-retail .rte .retail-page-content h1,
body.template-page .rte .retail-page-content h1 {
  display: block !important;
  visibility: visible !important;
  font-family: 'Roboto', sans-serif;
  font-size: 35px !important;
  font-weight: 900 !important;
  color: #2F7070 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-top: 15px !important;
  margin-right: 0px !important;
  margin-bottom: 18px !important;
  margin-left: 0px !important;
  padding: 0 !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Paragraph content */
body.template-retail .retail-page-content {
  max-width: 900px;
  margin: 0 auto;
}

body.template-retail .retail-page-content p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important; /* better readability */
  color: #1f2937 !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin: 0 0 12px !important;
  padding: 0 !important;

  /* makes lines look more even WITHOUT ugly justify gaps */
  text-wrap: balance;
}

/* Strong/bold text inside paragraphs */
body.template-retail .retail-page-content p strong {
  font-weight: 700 !important;
  color: #1f2937 !important;
}
/* ----------------------------------------------------------------
   RETAIL SUBBANNER — disable image hover zoom
---------------------------------------------------------------- */
body.template-retail .custom-banner img,
body.template-retail .custom-banner a:hover img,
body.template-retail .custom-banner *:hover img {
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}
/* ----------------------------------------------------------------
   RETAIL SUBBANNER — grid layout on parent
---------------------------------------------------------------- */
body.template-retail .custom-banner .sub-banner-banner {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 15px;
  justify-content: center;
  align-items: center;
  max-width: 1235px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   RETAIL SUBBANNER — individual banner item styling
---------------------------------------------------------------- */
body.template-retail .custom-banner .sub-banner-banner .grid__item {
  border: 1px solid #ceded1 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}
/* ----------------------------------------------------------------
   RETAIL SUBBANNER — desktop only, smaller banners
---------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  body.template-retail .custom-banner .sub-banner {
    max-width: 100%;
    margin: 0 auto;
  }
  
  body.template-retail .custom-banner .sub-banner img {
    width: 100%;
    max-width: 100%;
    display: block;
  }
}
@media screen and (min-width: 750px) {
  body.template-retail .custom-banner .sub-banner {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  
  body.template-retail .custom-banner .sub-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* ================================================================
   RETAIL FEATURED COLLECTION
================================================================ */

body.template-retail .retail-featured-collection-section {
  max-width: 1500px;
  margin: 0 auto;
}
@media screen and (min-width: 990px) and (max-width: 1400px) {
  body.template-retail .retail-featured-collection-section {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Hide wholesale title only — keep case-price-label (Retail Price / Bundle Price) */
body.template-retail .retail-featured-collection-section .whle_title,
body.template-retail .retail-featured-collection-section .wholesale {
  display: none !important;
}

/* Show Retail Price / Bundle Price label */
body.template-retail .retail-featured-collection-section .case-price-label {
  display: inline !important;
  color: rgb(8, 133, 106) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}

/* Show whle_price row (contains the label + price) */
body.template-retail .retail-featured-collection-section .whle_price {
  display: inline-flex !important;
}

/* Show retail price */
body.template-retail .retail-featured-collection-section .price__regular {
  display: block !important;
}

body.template-retail .retail-featured-collection-section .price__regular .price-item--regular,
body.template-retail .retail-featured-collection-section .price-item--regular {
  display: inline !important;
  color: #e01010 !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
}

/* Sale price */
body.template-retail .retail-featured-collection-section .price--on-sale .price__sale {
  display: inline-flex !important;
}

body.template-retail .retail-featured-collection-section .price--on-sale .price__regular {
  display: none !important;
}

body.template-retail .retail-featured-collection-section .price__sale .price-item--sale,
body.template-retail .retail-featured-collection-section .price__sale .price-item--last {
  display: inline !important;
  color: #E3170D !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
}

/* Compare price strikethrough */
body.template-retail .retail-featured-collection-section .price__sale .price-item--regular {
  text-decoration: line-through !important;
  color: #08296b !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
}

/* Price layout */
body.template-retail .retail-featured-collection-section .price,
body.template-retail .retail-featured-collection-section .price__sale {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
}

/* Card title */
body.template-retail .retail-featured-collection-section .card__heading a {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #0066c9 !important;
  text-decoration: none !important;
}

/* Center card content */
body.template-retail .retail-featured-collection-section .card__information,
body.template-retail .retail-featured-collection-section .card-information {
  text-align: center !important;
}

/* Card inner height */
body.template-retail .retail-featured-collection-section .card .card__inner {
  height: 280px !important;
}

body.template-retail .retail-featured-collection-section .card .card__content {
  height: auto !important;
  min-height: 120px !important;
}

/* Ensure owl carousel displays as block */
body.template-retail .retail-featured-collection-section .product-grid.owl-carousel,
body.template-retail .retail-featured-collection-section ul.owl-carousel {
  display: block !important;
}

/* Remove black dot bullet markers */
body.template-retail .retail-featured-collection-section li.slider__slide::marker,
body.template-retail .retail-featured-collection-section li.slider__slide::-webkit-details-marker {
  display: none !important;
  font-size: 0 !important;
  content: none !important;
}

body.template-retail .retail-featured-collection-section .owl-item li {
  list-style: none !important;
}

/* SALE BADGE */
body.template-retail .retail-featured-collection-section .badge {
  background: #ff2633 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 5px 7px !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
}

body.template-retail .retail-featured-collection-section .badge::before {
  content: none !important;
}

/* Slider arrows */
body.template-retail .retail-featured-collection-section .owl-nav button {
  background: #2F7070 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.template-retail .retail-featured-collection-section .owl-nav button:hover {
  background: #143d8d !important;
}

body.template-retail .retail-featured-collection-section .owl-nav span::after {
  background-color: #ffffff !important;
}

body.template-retail .retail-featured-collection-section .owl-nav button:hover span::after {
  background-color: #ffffff !important;
}
/* ----------------------------------------------------------------
   RETAIL FEATURED COLLECTION — MOBILE FIXES
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Fix card layout — stack image above content, no overlap */
  body.template-retail .retail-featured-collection-section .card.card--card {
    display: flex !important;
    flex-direction: column !important;
  }

  body.template-retail .retail-featured-collection-section .card .card__inner {
    height: 220px !important;
    width: 100% !important;
    position: relative !important;
  }

  body.template-retail .retail-featured-collection-section .card .card__content {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Show owl arrows on mobile */
  body.template-retail .retail-featured-collection-section .owl-nav {
    display: flex !important;
    justify-content: space-between !important;
    position: absolute !important;
    top: 40% !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
  }

  body.template-retail .retail-featured-collection-section .owl-nav button {
    pointer-events: all !important;
    width: 32px !important;
    height: 32px !important;
  }
}
@media screen and (max-width: 749px) {
  body.template-retail .retail-featured-collection-section .owl-stage-outer {
    overflow: hidden !important;
  }

  body.template-retail .retail-featured-collection-section .owl-item .card.card--card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  body.template-retail .retail-featured-collection-section .owl-item .card__inner.ratio {
    height: 200px !important;
    aspect-ratio: unset !important;
    flex-shrink: 0 !important;
  }

  body.template-retail .retail-featured-collection-section .owl-item .card__content {
    position: static !important;
    display: block !important;
    height: auto !important;
    padding-top: 8px !important;
  }

  body.template-retail .retail-featured-collection-section .owl-item .card__inner .card__information {
    display: none !important;
  }
  
}
/* Hide the duplicate title that sits inside the image area */
.card__inner .card__information {
   display: none !important;
}

/* Ensure the title below the image stays visible */
.card__content .card__information {
   display: block !important;
}
/* CRITICAL FIX: prevent product-info refresh from hiding content on mobile (iPhone) */
@media screen and (max-width: 749px) {

  body.template-retail product-info,
  body.template-retail .product__info-wrapper,
  body.template-retail .product__info-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  body.template-retail product-info.loading,
  body.template-retail .product__info-wrapper.loading,
  body.template-retail .product__info-container.loading {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.template-retail product-info *:not(.tooltip):not(.tooltip *) {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.template-retail .color-swatch .tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.template-retail .color-swatch:hover .tooltip,
  body.template-retail .Color input[type="radio"]:checked + label .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
  }

    body.template-retail .Color input[type="radio"] + label .icon-checkmark {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.template-retail .Color input[type="radio"]:checked + label .icon-checkmark {
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* MOBILE: force line break after label */
@media screen and (max-width: 749px) {

  body.template-retail .pr_outer {
    flex-wrap: wrap !important;
  }

  body.template-retail .pr_outer::before {
    flex-basis: 100% !important;
  }
}

/* MOBILE: align price line left */
@media screen and (max-width: 749px) {

  body.template-retail .pr_outer {
    justify-content: flex-start !important;
    text-align: left !important;
  }

}
/* MOBILE PORTRAIT ONLY: move sale badge left */
@media screen and (max-width: 749px) and (orientation: portrait) {
  body.template-retail .price__badge-sale {
    position: relative !important;
    left: -86px !important;
  }
}

/* MOBILE LANDSCAPE: keep sale badge normal */
@media screen and (max-width: 749px) and (orientation: landscape) {
  body.template-retail .price__badge-sale {
    position: relative !important;
    left: 0 !important;
  }
}

/* MOBILE: keep color swatches round + prevent overflow */
@media screen and (max-width: 749px) {

  body.template-retail .product-form__input.Color {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    column-gap: 25px !important;
    row-gap: 12px !important;
  }

  body.template-retail .product-form__input.Color label.color-swatch {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    position: relative !important;
  }

  body.template-retail .product-form__input.Color label.color-swatch .icon-checkmark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  body.template-retail .section-divider-bottom {
    display: block !important;
    border: none !important;
    border-top: 1px solid #2f70704f !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  /* FORCE spacing between swatches */
  body.template-retail .product-form__input.Color label.color-swatch {
  margin-right: 8px !important;
  margin-bottom: 10px !important;
  }
  /* COLOR */
body.template-retail .product-form__input.Color .form__label {
  padding-bottom: 25px !important;
}
/* SIZE */
body.template-retail .product-form__input:not(.Color) .form__label {
  padding-bottom: 5px !important;
}
  body.template-retail .retail-featured-collection-section .pr_outer {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  body.template-retail .retail-featured-collection-section .case-price-label {
    white-space: nowrap !important;
  }
  body.template-retail .price__container .pr_outer .case-price-label {
    font-size: 18px !important;
  }
  body.template-retail .price__sale .price-item--regular {
    font-size: 17px !important;
    font-weight: 700 !important;
 }
 body.template-retail .product__info-wrapper .price__sale .price-item--sale, body.template-retail .product__info-wrapper .price__sale .price-item--last {
    display: inline !important;
    color: #E3170D !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
 }
}
/* RETAIL PRODUCT PAGE MOBILE: price line + badge */
@media screen and (max-width: 749px) {

  body.template-retail .product__info-container .price {
    display: block !important;
  }

  body.template-retail .product__info-container .pr_outer {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    width: auto !important;
  }

  body.template-retail .product__info-container .whle_price,
  body.template-retail .product__info-container .price__regular,
  body.template-retail .product__info-container .price__sale {
    display: inline-flex !important;
    align-items: baseline !important;
    line-height: 1 !important;
  }

  body.template-retail .product__info-container .price__sale {
    gap: 4px !important;
  }

  body.template-retail .product__info-wrapper .price__sale .price-item--sale,
  body.template-retail .product__info-wrapper .price__sale .price-item--last {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }

  body.template-retail .product__info-container .price__sale .price-item--regular,
  body.template-retail .product__info-container .price__sale .price-item--regular s {
    line-height: 1 !important;
    vertical-align: baseline !important;
  }

  body.template-retail .product__info-container .badge.price__badge-sale {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 6px 0 0 0 !important;
    position: static !important;
    transform: none !important;
  }
  body.template-retail .product__info-container .price,
  body.template-retail .product__info-container .price__container {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  body.template-retail .product__info-container .pr_outer {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}
fieldset.product-form__input.bundle-image-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  max-width: 800px !important;
}
body.template-retail .retail-delivery-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0c4cd4;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.template-retail .retail-delivery-trigger:hover {
  color: #0838a3;
}

body.template-retail .retail-delivery-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
}

body.template-retail .retail-delivery-overlay.is-open {
  display: flex;
}

body.template-retail .retail-delivery-modal {
  position: relative;
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #dbe4e8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  font-family: 'Montserrat', sans-serif;
  animation: retailDeliveryModalOpen .2s ease;
}

body.template-retail .retail-delivery-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef3f4;
  color: #17202a;
  font-size: 24px;
  line-height: 34px;
  cursor: pointer;
}

body.template-retail .retail-delivery-icon {
  margin-bottom: 8px;
  font-size: 30px;
}

body.template-retail .retail-delivery-modal h2 {
  margin: 0 35px 10px 0;
  color: #17202a;
  font-size: 20px;
  font-weight: 700;
}

body.template-retail .retail-delivery-modal p {
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.6;
}

body.template-retail .retail-delivery-button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 9px;
  background: #0c4cd4;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

body.template-retail .retail-delivery-button:hover {
  background: #0838a3;
  color: #ffffff;
}

@keyframes retailDeliveryModalOpen {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Shipping map */
body.template-retail .retail-delivery-map{
    display:block;
    width:72%;
    max-width:900px;
    height:auto;
    margin:18px auto;
}

body.template-retail .retail-delivery-heading{
    text-align:center;
}

body.template-retail .retail-delivery-heading h2{
    margin-bottom:4px;
}

body.template-retail .retail-delivery-heading p{
    margin:0;
    color:#666;
}

body.template-retail .retail-delivery-note{
    text-align:center;
    color:#666;
    font-size:12px;
    margin-top:12px;
}
body.template-retail .product__tax.caption.rte {
  font-size: 0 !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 0 1px 0 !important;
}
body.template-retail .product__tax.caption.rte::before {
  content: 'No Tax on All Orders' !important;
  display: inline !important;
  font-size: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #374151 !important;
  font-weight: 700 !important;
}

/* delivery trigger — matched font, tighter gap */
body.template-retail .product__tax.caption.rte + .retail-delivery-trigger {
  display: inline-flex !important;
  align-items: center;
  border: none;
  background: none;
  padding: 0 0 10px 0;
  margin: 0;
  cursor: pointer;
  color: #1a73e8;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  vertical-align: baseline;
}
body.template-retail .product__tax.caption.rte + .retail-delivery-trigger::before {
  content: "|";
  margin: 0 6px !important;
  color: #0f8882eb;
  font-weight: 400;
}
body.template-retail .product__tax.caption.rte {
  display: flex !important;
  width: 96% !important;
  align-items: center;
  border-bottom: 1px solid #2f70704f !important;
  margin: 0 0 8px 0 !important;
  padding: 0 0 10px 0 !important;
  box-sizing: border-box !important;
}
body.template-retail .product__tax.caption.rte + .retail-delivery-trigger {
  position: absolute;
  margin-top: -38.5px !important;
  margin-left: 135px !important;
}
/* ── Retail search: field + stacked SHOP ALL ─────────────── */
.retail-header-tools {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.retail-search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;              /* breathing room between field and SHOP ALL */
  width: 300px;
}
.retail-search-form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d5d9dd;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.retail-search-form:focus-within {
  border-color: #1f6f66;                       /* your teal on focus */
  box-shadow: 0 0 0 3px rgba(31,111,102,.12);
}
.retail-search-input {
  border: none;
  outline: none;
  padding: 11px 14px;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  background: transparent;
}
.retail-search-input::placeholder {
  color: #07704aff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  opacity: 1;
}
.retail-search-submit {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #1f6f66;
}
.retail-search-submit:hover { color: #14514a; }

/* ── Predictive dropdown ─────────────────────────────────── */
.retail-predictive {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 400px;                                /* wider than the 300px column */
  max-width: 90vw;
  background: #fff;
  border: 1px solid #e3e6e9;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  z-index: 9999;
  max-height: 460px;
  overflow-y: auto;
  padding: 6px 0;
}
.retail-predictive[aria-hidden="true"] {
  display: none;
}
.retail-predictive-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  text-decoration: none;
  color: #1b2733;
  transition: background .12s ease;
}
.retail-predictive-item:hover { background: #f4f8f7; }
.retail-predictive-item img,
.retail-predictive-noimg {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 5px;
  background: #eee;
  flex-shrink: 0;
}
.retail-predictive-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.retail-predictive-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1b2733;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.retail-predictive-price {
  font-size: 14px;
  font-weight: 700;
  color: #1f6f66;                              /* teal price */
}
.retail-predictive-empty {
  padding: 18px 16px;
  font-size: 14px;
  color: #7a828a;
  text-align: center;
}

@media (max-width: 767px) {
  .retail-header-tools { gap: 14px; }
  .retail-search-wrap { width: 100%; }
  .retail-predictive { width: 100%; max-width: 100%; }
}
.retail-predictive.is-expanded {
  width: 460px;
  max-height: 70vh;
}
.retail-predictive-header {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1f6f66;
  border-bottom: 1px solid #eef1f3;
  position: sticky;
  top: 0;
  background: #fff;
}
/* ----------------------------------------------------------------
   RETAIL MOBILE — show the search bar as its own row
   Overrides the earlier height:0 collapse on .retail-header-tools
   (which existed when the row only held the cart).
---------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Un-collapse the tools row so the search field is visible */
  body.template-retail .retail-header-tools,
  body.template-page .retail-header-tools {
    display: flex !important;
    height: auto !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0 14px 12px !important;
    margin: 0 !important;
  }

  /* Search wrap: full width, no stacked SHOP ALL on mobile */
  body.template-retail .retail-search-wrap,
  body.template-page .retail-search-wrap {
    width: 100% !important;
    max-width: 520px !important;
  }

  /* The cart stays pinned to the top bar (from your existing rule),
     so remove it from this row's flow to avoid a gap */
  body.template-retail .retail-header-tools .retail-cart-link,
  body.template-page .retail-header-tools .retail-cart-link {
    /* your earlier rule already sets position:fixed; this just makes
       sure it doesn't reserve space inside the search row */
    margin: 0 !important;
  }

  /* Predictive dropdown: full width under the field */
  body.template-retail .retail-predictive,
  body.template-page .retail-predictive {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }
  body.template-retail .retail-predictive.is-expanded,
  body.template-page .retail-predictive.is-expanded {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Brand block is now a link — strip link underline/color */
body.template-page a.retail-header-brand,
body.template-retail a.retail-header-brand,
body.template-page a.retail-header-brand:hover,
body.template-retail a.retail-header-brand:hover {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}
body.template-page a.retail-header-brand .retail-header-brand-title,
body.template-retail a.retail-header-brand .retail-header-brand-title,
body.template-page a.retail-header-brand .retail-header-brand-subtitle,
body.template-retail a.retail-header-brand .retail-header-brand-subtitle {
  text-decoration: none !important;
}

body.template-retail .price.price--sold-out > .price__badge-sale {
  display: none !important;
}