/** Shopify CDN: Minification failed

Line 628:2 Unexpected "20%"
Line 629:2 Unexpected "40%"
Line 630:2 Unexpected "60%"
Line 631:2 Unexpected "80%"
Line 632:2 Unexpected "100%"
Line 633:0 Unexpected "}"
Line 640:2 Unexpected "50%"
Line 641:2 Unexpected "100%"
Line 642:0 Unexpected "}"

**/
/* soa-body.css: custom store CSS moved out of layout/theme.liquid so browsers can cache it.
   Block order is unchanged; each block notes its original line range. */

/* ---- from layout/theme.liquid lines 3160-4205 ---- */
/* ===================================================================
   SPOOLED OUT AUSTRALIA — PREMIUM HEADER OVERHAUL
   Version: 3.1 | Feb 2026
   Fixed: Sticky header, duplicate logo, mega menu white bg, hero detection
   =================================================================== */

/* -------------------------------------------------------------------
   2. ANNOUNCEMENT MARQUEE
   ------------------------------------------------------------------- */
.soa-marquee-bar {
  background: linear-gradient(135deg, #00a2d8 0%, #00a2d8 100%) !important;
  overflow: hidden !important;
  padding: 7px 0 !important;
  position: relative;
  z-index: 29;
  border: none !important;
  box-shadow: none !important;
}
.soa-marquee-bar .page-width {
  max-width: 100% !important;
  padding: 0 !important;
}
.soa-marquee-track {
  display: flex;
  width: max-content;
  animation: soaMarqueeScroll 25s linear infinite; /* Audit fix: was 45s, read as static on wide desktop screens */
  /* REMOVED: will-change: transform — inside sticky header causes iOS WKWebView
     compositing deadlock: sticky ancestor + will-change descendant freezes
     all touch/scroll events after 1-2 scrolls. Animation works without it. */
}
.soa-marquee-bar:hover .soa-marquee-track {
  animation-play-state: paused;
}
.soa-marquee-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  padding-right: 0;
}
.soa-marquee-item {
  color: #ffffff !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}
.soa-marquee-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}
.soa-marquee-sep {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 8px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}
.soa-marquee-link {
  color: #ffffff !important;
  text-decoration: none !important;
}
.soa-marquee-link:hover {
  text-decoration: underline !important;
}
.soa-marquee-link-text {
  text-decoration: underline;
  opacity: 0.85;
}

/* Hide the original slideshow controls in marquee mode */
.soa-marquee-bar .slideshow-wrapper { display: contents; }
.soa-marquee-bar .slideshow__pause { display: none !important; }
.soa-marquee-bar .announcement-slider { display: none !important; }

@keyframes soaMarqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------
   3. TRANSPARENT HEADER ON HOMEPAGE
   ------------------------------------------------------------------- */
/* Header wrapper must sit on top of hero content */
.header-sticky-wrapper {
  position: relative;
  z-index: 20;
}

/* SOA: Solid Deep Ocean Blue header on ALL pages including homepage */
.header-wrapper--sticky.is-light .site-header,
.header-wrapper[data-overlay-header="true"] .site-header,
.header-wrapper:not(.is-light) .site-header,
.header-wrapper[data-overlay-header="false"] .site-header,
.header-wrapper .site-header {
  background: #121D44 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
  transition: background 0.35s ease, box-shadow 0.35s ease !important;
}

/* Ensure toolbar is also solid */
.header-wrapper--sticky.is-light .toolbar--transparent,
.header-wrapper .toolbar--transparent,
.toolbar--transparent {
  background: #121D44 !important;
  transition: background 0.35s ease !important;
}

/* Homepage hero needs no extra padding - Impulse handles via overlay_header */
.template-index .main-content > .shopify-section:first-child {
  /* Handled by theme */
}

/* -------------------------------------------------------------------
   3b. NAV LINK TEXT SHADOW (for transparent header over light images)
   ------------------------------------------------------------------- */
.is-light .site-nav__link,
.is-light .site-nav__link:hover,
.header-wrapper--sticky.is-light:not(.soa-header-scrolled) .site-nav__link {
  text-shadow: 0 1px 4px rgba(0,0,0,0.65), 0 0 10px rgba(0,0,0,0.45) !important;
}

/* -------------------------------------------------------------------
   4. HEADER GRADIENT BOTTOM BORDER
   ------------------------------------------------------------------- */
.site-header {
  position: relative;
}


/* -------------------------------------------------------------------
   5. ANIMATED LOGO
   ------------------------------------------------------------------- */
/* Page load animation */
.site-header__logo {
  animation: soaLogoEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}
@keyframes soaLogoEntrance {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover effect */
/* FIX: Removed display: inline-block — it was overriding the theme’s
   .logo--inverted { display: none } causing duplicate logos on non-homepage pages. */
.site-header__logo a,
.site-header__logo .site-header__logo-link {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.35s ease !important;
}
.site-header__logo a:hover,
.site-header__logo .site-header__logo-link:hover {
  transform: scale(1.04) !important;
  filter: brightness(1.12) !important;
}

/* Logo visibility: ensure inverted logo only shows on overlay (homepage) */
.site-header__logo .logo--inverted {
  display: none !important;
}
.is-light .site-header__logo .logo--inverted {
  display: block !important;
}
.is-light .site-header__logo .logo--has-inverted {
  display: none !important;
}
/* When scrolled on homepage, swap back to regular logo */
.soa-header-scrolled .site-header__logo .logo--inverted {
  display: none !important;
}
.soa-header-scrolled .site-header__logo .logo--has-inverted {
  display: block !important;
}

/* -------------------------------------------------------------------
   6. NAV LINK ANIMATIONS (Premium underline + active indicator)
   ------------------------------------------------------------------- */
/* Override existing underline with premium slide-in */
.site-nav__link--underline::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: #00a2d8 !important;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.site-nav__link--underline:hover::after,
.site-nav__item:hover .site-nav__link--underline::after {
  width: 100% !important;
}


/* Fix excessive letter-spacing on form labels (base theme uses 0.3em which causes "S I Z E" rendering) */
.label,
label:not(.variant__button-label):not(.text-label) {
  letter-spacing: 0.02em !important;
}
.product-form__label,
.product-form .label,
.contact-form label,
.form-field label,
.form__label {
  letter-spacing: 0.02em !important;
}


/* Fishing shirt collection grid - centre last row */
.fs-collection-grid__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.fs-collection-grid__card {
  flex: 0 0 calc(33.333% - 20px) !important;
  max-width: calc(33.333% - 20px) !important;
}
@media (max-width: 768px) {
  .fs-collection-grid__card {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}


/* Our Why values grid - centre last row */
.soa-about-values__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.soa-about-values__card {
  flex: 0 0 calc(25% - 20px) !important;
  max-width: calc(25% - 20px) !important;
}
@media (max-width: 900px) {
  .soa-about-values__card {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}
@media (max-width: 480px) {
  .soa-about-values__card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* Standard collection grid - centre last row (Accessories, etc.) */
.collection-content .grid.grid--uniform {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Nav link hover colour */
.site-nav__link {
  transition: color 0.25s ease !important;
  position: relative;
}
.site-nav__link:hover {
  color: #00a2d8 !important;
}

/* Active page indicator */
.site-nav__item .site-nav__link[data-active="true"]::after,
.site-nav__link--underline.active-link::after {
  width: 100% !important;
  background: #00a2d8 !important;
  opacity: 0.7;
}

/* Desktop hover to open Shop dropdown */
.site-nav--has-dropdown:hover > details {
  /* Use CSS to show dropdown on hover */
}
.site-nav--has-dropdown:hover > details > .site-nav__dropdown,
.site-nav--has-dropdown:hover > details > .site-nav__dropdown-animate {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Chevron icon rotation on open */
.site-nav__details[open] > summary .icon-chevron-down {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.site-nav__details summary .icon-chevron-down {
  transition: transform 0.3s ease;
}

/* -------------------------------------------------------------------
   7. SHOP DROPDOWN - FULL-WIDTH MEGA MENU STYLE
   ------------------------------------------------------------------- */

/* Make the SHOP nav item and its parent allow full-width positioning */
.site-nav--has-dropdown {
  position: relative !important;
}
.site-nav--has-dropdown > .site-nav__details {
  position: static !important;
}

/* The SHOP dropdown - compact vertical single-column list */
.site-nav--has-dropdown .site-nav__dropdown {
  background: #121D44 !important;
  border: none !important;
  border-top: 3px solid #00a2d8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  padding: 12px 0 !important;
  /* Compact width - single column */
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  width: 280px !important;
  max-width: 280px !important;
  min-width: 240px !important;
  /* Smooth slide-down animation */
  animation: soaMegaSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
  /* Single-column vertical flex layout */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  border-radius: 0 0 4px 4px !important;
  border: 1px solid rgba(245, 230, 200, 0.15) !important;
  border-top: 3px solid #00a2d8 !important;
  overflow: hidden !important;
}

/* FIX: Override theme’s .site-nav__dropdown a { background-color: var(--colorBody) }
   which gives each link a white background, covering the navy container. */
.site-nav__dropdown a,
.site-nav__dropdown a:link,
.site-nav__dropdown a:visited {
  background-color: transparent !important;
  background: transparent !important;
  color: #ffffff !important;
}
.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus {
  background-color: rgba(0, 162, 216, 0.12) !important;
  background: rgba(0, 162, 216, 0.12) !important;
  color: #00a2d8 !important;
}
/* Also fix deep dropdown backgrounds */
.site-nav__deep-dropdown {
  background-color: #0d1b2a !important;
  background: #0d1b2a !important;
}

/* Position relative to the header, not the nav item */
/* FIX: Removed #SiteHeader { position: relative } — it was overriding
   .site-header--stuck { position: fixed } due to ID specificity.
   The stuck class now works correctly for sticky header on scroll. */
#SiteHeader .page-width {
  position: static;
}
#SiteHeader.site-header--stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: #0d1b2a !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
}
.header-layout {
  position: static !important;
}
.header-item--navigation {
  position: static !important;
}

/* Each dropdown item */
.site-nav--has-dropdown .site-nav__dropdown > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Dropdown links styling */
.site-nav--has-dropdown .site-nav__dropdown .site-nav__dropdown-link {
  color: rgba(251, 250, 247, 0.85) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 32px !important;
  display: block !important;
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease !important;
  text-align: center !important;
  border-right: 1px solid rgba(0, 162, 216, 0.08) !important;
  white-space: nowrap !important;
}

/* Remove border on last item in each row */
.site-nav--has-dropdown .site-nav__dropdown > li:nth-child(4n) .site-nav__dropdown-link {
  border-right: none !important;
}

/* Hover state */
.site-nav--has-dropdown .site-nav__dropdown .site-nav__dropdown-link:hover {
  color: #ffffff !important;
  background: rgba(0, 162, 216, 0.1) !important;
  padding-left: 36px !important;
}

/* Accent line under hovered link */
.site-nav--has-dropdown .site-nav__dropdown .site-nav__dropdown-link::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: #00a2d8;
  margin: 4px auto 0;
  transition: width 0.3s ease;
}
.site-nav--has-dropdown .site-nav__dropdown .site-nav__dropdown-link:hover::after {
  width: 40px;
}

@keyframes soaMegaSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Megamenu class styles (kept for compatibility if theme adds megamenu class) */
.site-nav__dropdown.megamenu {
  background: #0d1b2a !important;
  border: none !important;
  border-top: 2px solid #00a2d8 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  padding: 32px 0 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  animation: soaMegaSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
}

/* Mega menu column headers */
.megamenu .site-nav__dropdown-link--top-level {
  color: #00a2d8 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding-bottom: 8px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(0, 162, 216, 0.2) !important;
  display: block;
}
.megamenu .site-nav__dropdown-link--top-level:hover {
  color: #ffffff !important;
}

/* Mega menu sub-links */
.megamenu .site-nav__dropdown-link {
  color: rgba(251, 250, 247, 0.7) !important;
  font-size: 13px !important;
  padding: 5px 0 !important;
  transition: color 0.2s ease, padding-left 0.25s ease !important;
  display: block;
}
.megamenu .site-nav__dropdown-link:hover {
  color: #ffffff !important;
  padding-left: 6px !important;
}

/* Mega menu collection images */
.megamenu .megamenu__collection-image {
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  border: 1px solid rgba(0, 162, 216, 0.15);
}
.megamenu a:hover .megamenu__collection-image {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 16px rgba(0, 162, 216, 0.2) !important;
  border-color: rgba(0, 162, 216, 0.4);
}
.megamenu .svg-mask {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Mega menu column appear animation */
.megamenu .appear-animation {
  opacity: 0;
  transform: translateY(10px);
  animation: soaMegaColAppear 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.megamenu .appear-delay-1 { animation-delay: 0.05s; }
.megamenu .appear-delay-2 { animation-delay: 0.1s; }
.megamenu .appear-delay-3 { animation-delay: 0.15s; }
.megamenu .appear-delay-4 { animation-delay: 0.2s; }
.megamenu .appear-delay-5 { animation-delay: 0.25s; }
@keyframes soaMegaColAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Deep dropdown */
.site-nav__deep-dropdown {
  background: rgba(10, 20, 32, 0.98) !important;
  border-left: 2px solid rgba(0, 162, 216, 0.3) !important;
}

/* -------------------------------------------------------------------
   8. SEARCH BAR STYLING
   ------------------------------------------------------------------- */
.site-header__search-container {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Predictive search input */
.search__input {
  background: rgba(251, 250, 247, 0.06) !important;
  border: 1.5px solid rgba(251, 250, 247, 0.15) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  font-size: 15px !important;
}
.search__input::placeholder {
  color: rgba(251, 250, 247, 0.4) !important;
}
.search__input:focus {
  border-color: #00a2d8 !important;
  box-shadow: 0 0 0 3px rgba(0, 162, 216, 0.15) !important;
  background: rgba(251, 250, 247, 0.08) !important;
  outline: none !important;
}

/* Search results dropdown */
.search__results {
  background: #0d1b2a !important;
  border: 1px solid rgba(0, 162, 216, 0.15) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Search button */
.btn--search {
  background: transparent !important;
  color: rgba(251, 250, 247, 0.6) !important;
  transition: color 0.25s ease !important;
}
.btn--search:hover {
  color: #00a2d8 !important;
}

/* Close search button */
.btn--close-search {
  color: rgba(251, 250, 247, 0.5) !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}
.btn--close-search:hover {
  color: #00a2d8 !important;
  transform: rotate(90deg) !important;
}

/* -------------------------------------------------------------------
   9. CART ICON ENHANCEMENT
   ------------------------------------------------------------------- */
/* Cart badge */
.cart-link__bubble--visible {
  background-color: #00a2d8 !important;
  border-color: #00a2d8 !important;
}

/* Cart icon hover */
.site-nav__link--icon[data-icon] {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.site-nav__link--icon[data-icon]:hover {
  transform: scale(1.1) !important;
}

/* Cart bounce animation (triggered by JS) */

  20% { transform: scale(1.25); }
  40% { transform: scale(0.92); }
  60% { transform: scale(1.12); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.soa-cart-bounce {
  animation: soaCartBounce 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Cart badge pulse on add */

  50% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(0, 162, 216, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 162, 216, 0); }
}
.soa-badge-pulse .cart-link__bubble--visible {
  animation: soaBadgePulse 0.6s ease !important;
}

/* All header icons hover */
.site-nav__link--icon {
  transition: color 0.25s ease, transform 0.25s ease !important;
}
.site-nav__link--icon:hover {
  color: #00a2d8 !important;
  transform: scale(1.08) !important;
}

/* -------------------------------------------------------------------
   10. MOBILE DRAWER MENU UPGRADE
   ------------------------------------------------------------------- */
.soa-mobile-drawer.drawer {
  background: #0d1b2a !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* FIX: Ensure drawer contents inherits dark background */
.soa-mobile-drawer .drawer__contents,
.soa-mobile-drawer .drawer__scrollable {
  background-color: #0d1b2a !important;
  background: #0d1b2a !important;
}
.soa-mobile-drawer .drawer__fixed-header {
  background: #0d1b2a !important;
}
/* FIX: Override Impulse theme white background on nav list items */
.soa-mobile-drawer .mobile-nav > .mobile-nav__item,
.soa-mobile-drawer .mobile-nav__item {
  background-color: transparent !important;
  background: transparent !important;
}
/* FIX: Divider lines from gold to subtle white */
.soa-mobile-drawer .mobile-nav__item::after {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}


/* Drawer logo */
.soa-drawer-logo {
  padding: 4px 0 8px;
}
.soa-drawer-logo__img {
  max-width: 140px;
  height: auto;
  filter: brightness(1);
}
.soa-drawer-logo__text {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Drawer header */
.soa-mobile-drawer .drawer__header {
  border-bottom: 1px solid rgba(0, 162, 216, 0.15) !important;
  padding: 12px 16px !important;
}

/* Close button */
.soa-mobile-drawer .drawer__close-button {
  color: rgba(251, 250, 247, 0.6) !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}
.soa-mobile-drawer .drawer__close-button:hover {
  color: #00a2d8 !important;
  transform: rotate(90deg) !important;
}

/* Mobile nav links */
.soa-mobile-drawer .mobile-nav__link--top-level,
.soa-mobile-drawer .mobile-nav__link--button {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  padding: 14px 20px !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
.soa-mobile-drawer .mobile-nav__link--top-level:hover,
.soa-mobile-drawer .mobile-nav__link--button:hover {
  color: #00a2d8 !important;
  background: rgba(0, 162, 216, 0.06) !important;
}

/* Active state */
.soa-mobile-drawer .mobile-nav__link[data-active="true"],
.soa-mobile-drawer .mobile-nav__faux-link[data-active="true"] {
  color: #00a2d8 !important;
}
.soa-mobile-drawer .mobile-nav__link[data-active="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #00a2d8;
  border-radius: 0 2px 2px 0;
}

/* Sub-links */
.soa-mobile-drawer .mobile-nav__link {
  color: rgba(251, 250, 247, 0.7) !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.soa-mobile-drawer .mobile-nav__link:hover {
  color: #ffffff !important;
  padding-left: 28px !important;
}

/* Collapsible icons */
.soa-mobile-drawer .collapsible-trigger .icon {
  fill: rgba(251, 250, 247, 0.4) !important;
  transition: fill 0.2s ease, transform 0.3s ease !important;
}
/* FIX: Restore mobile nav chevron button padding and remove incorrect border-bottom
   The global .collapsible-trigger rule overrides the Impulse theme's padding on
   .mobile-nav__toggle button, collapsing it to 1px and making it untappable. */
.soa-mobile-drawer .mobile-nav__toggle .collapsible-trigger {
  padding: 0 30px !important;
  border-bottom: none !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  min-width: 44px !important;
}
.soa-mobile-drawer .collapsible-trigger:hover .icon {
  fill: #00a2d8 !important;
}
.soa-mobile-drawer .collapsible-trigger.is-open .icon {
  transform: rotate(180deg) !important;
  fill: #00a2d8 !important;
}

/* Secondary nav items */
.soa-mobile-drawer .mobile-nav__item--secondary .mobile-nav__link {
  color: rgba(251, 250, 247, 0.5) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* Social icons in drawer */
.soa-mobile-drawer .mobile-nav__social {
  border-top: 1px solid rgba(0, 162, 216, 0.1) !important;
  padding: 16px 20px !important;
  margin-top: 12px !important;
}
/* FIX: Social icon borders gold -> Lagoon Blue */
.soa-mobile-drawer .mobile-nav__social-item {
  border-color: #00a2d8 !important;
}
.soa-mobile-drawer .mobile-nav__social-item a {
  color: rgba(251, 250, 247, 0.7) !important;
  transition: color 0.2s ease !important;
}
.soa-mobile-drawer .mobile-nav__social-item a:hover {
  color: #00a2d8 !important;
}
.soa-mobile-drawer .mobile-nav__social .icon {
  fill: rgba(251, 250, 247, 0.35) !important;
  transition: fill 0.2s ease !important;
}
.soa-mobile-drawer .mobile-nav__social a:hover .icon {
  fill: #00a2d8 !important;
}

/* -------------------------------------------------------------------
   11. TOOLBAR ENHANCEMENTS
   ------------------------------------------------------------------- */
.toolbar {
  background: #0d1b2a !important;
  border-bottom: none !important;
  font-size: 11px !important;
  transition: background 0.35s ease !important;
}
/* SOA: Toolbar solid on all pages including homepage */
.header-wrapper.is-light .toolbar,
.header-wrapper[data-overlay-header="true"] .toolbar,
.header-wrapper .toolbar {
  background: #121D44 !important;
  border-bottom: none !important;
}
.toolbar a {
  color: rgba(251, 250, 247, 0.5) !important;
  transition: color 0.2s ease !important;
}
.toolbar a:hover {
  color: #00a2d8 !important;
}
.toolbar__social .icon {
  fill: rgba(251, 250, 247, 0.35) !important;
  transition: fill 0.2s ease !important;
}
.toolbar__social a:hover .icon {
  fill: #00a2d8 !important;
}

/* -------------------------------------------------------------------
   12. CART DRAWER ENHANCEMENTS
   ------------------------------------------------------------------- */
.drawer--right#CartDrawer {
  background: #0d1b2a !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
}
#CartDrawer .drawer__header {
  border-bottom: 1px solid rgba(0, 162, 216, 0.15) !important;
}
#CartDrawer .drawer__title {
  color: #ffffff !important;
}
#CartDrawer .drawer__close-button {
  color: rgba(251, 250, 247, 0.6) !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}
#CartDrawer .drawer__close-button:hover {
  color: #00a2d8 !important;
  transform: rotate(90deg) !important;
}

/* -------------------------------------------------------------------
   13. RESPONSIVE / MOBILE ADJUSTMENTS
   ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  /* Marquee speed adjustment for mobile */
  .soa-marquee-track {
    animation-duration: 30s;
  }
  .soa-marquee-item {
    font-size: 10.5px;
    padding: 0 6px;
  }
  .soa-marquee-sep {
    padding: 0 10px;
  }
  

  
  /* Logo entrance slightly faster on mobile */
  .site-header__logo {
    animation-delay: 0.1s;
  }

  /* Dropdown already single column (flex) - ensure width fits mobile */
  .site-nav--has-dropdown .site-nav__dropdown {
    width: 280px !important;
    max-width: 280px !important;
  }
}

/* -------------------------------------------------------------------
   14. REDUCED MOTION PREFERENCES
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .soa-marquee-track { animation: none !important; }
  .site-header__logo { animation: none !important; }
  .megamenu { animation: none !important; }
  .megamenu .appear-animation { animation: none !important; opacity: 1 !important; transform: none !important; }
  .site-nav__link--underline::after { transition: none !important; }
  .site-nav__link { transition: none !important; }
  .site-nav--has-dropdown .site-nav__dropdown { animation: none !important; }
}

/* -------------------------------------------------------------------
   15. HEADER WRAPPER TRANSITION SMOOTHING
   ------------------------------------------------------------------- */
.header-wrapper {
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure mega menu is above page content */
.site-nav--is-megamenu .site-nav__dropdown {
  z-index: 100;
}
/* Ensure the site-nav container allows mega menu to escape */
.site-nav.site-navigation {
  position: static;
}

/* SOA: Remove blank gap between hero and first section */
#shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 + .shopify-section,
#shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 ~ .shopify-section:first-of-type,
#shopify-section-hp_fishing_shirts {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Remove excessive section spacing on homepage */
.template-index .index-section {
  margin-top: 0 !important;
}


/* SOA FINAL: Force hide all sold out states */
button[data-add-to-cart][disabled],
.btn.add-to-cart[disabled],
button.add-to-cart:disabled,
[data-add-to-cart-text]:empty,
.btn--full.add-to-cart[disabled] {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* Override sold out button colour - make it look like Add to Cart */
button[data-add-to-cart][disabled] {
  background-color: #121D44 !important;
  border-color: #121D44 !important;
  color: #ffffff !important;
}


/* SOA HERO FIX: Ensure hero image fills full viewport height */
.countdown-layout--hero {
  position: relative !important;
  min-height: 90vh !important;
  overflow: hidden !important;
}
.countdown-layout--hero .countdown__background-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.countdown-layout--hero .countdown__background-image-wrapper img,
.countdown-layout--hero .countdown__background-image-wrapper image-element,
.countdown-layout--hero .countdown__background-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: absolute !important;
  inset: 0 !important;
}
.countdown-layout--hero .countdown__content {
  position: relative !important;
  z-index: 2 !important;
  min-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
/* Remove gap between hero and next section */
#shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5,
#shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 > div {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Mobile hero: reduce to 85vh and ensure no gap */
@media (max-width: 749px) {
  .countdown-layout--hero {
    min-height: 85vh !important;
  }
  .countdown-layout--hero .countdown__content {
    min-height: 85vh !important;
    padding-bottom: 40px !important;
  }
  /* Aggressively remove ALL gap sources between hero and fishing shirts */
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 {
    margin: 0 !important;
    padding: 0 !important;
  }
  #shopify-section-hp_fishing_shirts {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #shopify-section-hp_fishing_shirts .index-section,
  #shopify-section-hp_fishing_shirts > div,
  #shopify-section-hp_fishing_shirts > section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Remove the default index-section top margin on mobile for first section */
  .index-section:first-of-type,
  main > .index-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* SOA: Force header to always be Deep Ocean Blue - never transparent or white */
.site-header,
.site-header--sticky,
.site-header.is-light,
.site-header.is-sticky,
.site-header--transparent,
header.site-header,
#shopify-section-header .site-header,
.site-header-wrapper,
.header-wrapper {
  background-color: #121D44 !important;
  background: #121D44 !important;
}
/* Nav links always white */
.site-header .site-nav__link,
.site-header .site-nav > li > a,
.site-header a.site-nav__link {
  color: #ffffff !important;
}
/* Header icons always white */
.site-header .site-header__icon,
.site-header .icon,
.site-header svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* ---- from layout/theme.liquid lines 4369-4470 ---- */
/* SOA: Remove gap between FAQ and contact form sections */
#shopify-section-hp_contact_form .index-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#shopify-section-hp_faq .index-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

  /* Mobile: force left-align on hero heading and CTA */
  @media (max-width: 749px) {
    .countdown-layout--hero .countdown__content {
      align-items: flex-start !important;
      text-align: left !important;
    }
    .countdown-layout--hero .countdown__block {
      text-align: left !important;
      margin-left: 0 !important;
      margin-right: auto !important;
    }
    .countdown-layout--hero h1,
    .countdown-layout--hero h2,
    .countdown-layout--hero p,
    .countdown-layout--hero .countdown__subtext,
    .countdown-layout--hero .countdown__title {
      text-align: left !important;
    }
  }

/* FIX: Mobile hero full-width */
@media (max-width: 749px) {
  .countdown-wrapper.countdown-layout--hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .countdown-wrapper.countdown-layout--hero .countdown__content,
  .countdown-wrapper.countdown-layout--hero .countdown__background-image-wrapper,
  .countdown-wrapper.countdown-layout--hero .countdown__mobile-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .countdown-wrapper.countdown-layout--hero .countdown__background-image,
  .countdown-wrapper.countdown-layout--hero .countdown__mobile-image {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    left: 0 !important;
  }
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 > div {
    padding: 0 !important;
    margin: 0 !important;
  }
  .countdown-layout--hero image-element,
  .countdown-layout--hero image-element img {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
  }
}

/* FIX: Reduce hero heading size on mobile */
@media (max-width: 749px) {
  .countdown-layout--hero h1,
  .countdown-layout--hero h2,
  .countdown-layout--hero .h1,
  .countdown-layout--hero h2.h1,
  .countdown-layout--hero h1.h1,
  .countdown-layout--hero .countdown__heading h1,
  .countdown-layout--hero .countdown__heading h2,
  .countdown-layout--hero .countdown__heading .h1,
  .countdown-layout--hero .countdown__heading h2.h1,
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 h1,
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 h2,
  #shopify-section-c2ac1515-5165-4644-8d83-8bb5229b78e5 .h1 {
    font-size: 36px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.5px !important;
  }
  .countdown-layout--hero .countdown__block--content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}