/* =============================================================
   FILE: hello-elementor-child/assets/header/header.css
   Searano Marine — Global Header
   ============================================================= */

/* ── Base reset ──────────────────────────────────────────────── */
.srn-header-wrap *,
.srn-mobile-nav *,
.srn-cart-drawer * {
  box-sizing: border-box !important;
}

/* ================================================================
   HEADER WRAPPER — fixed position beats every Elementor container
   Body padding-top accounts for header height so content isn't hidden
   ================================================================ */
.srn-header-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9990 !important;
  box-shadow: 0 4px 24px rgba(6,21,48,.0);
  transition: box-shadow .2s;
}
.srn-header-wrap.srn-scrolled {
  box-shadow: 0 4px 24px rgba(6,21,48,.3) !important;
}

/* Push page content below the fixed header.
   Class is added by JS only when #srn-header-wrap is actually in the DOM —
   this prevents a white gap on pages where the header template isn't assigned.
   navbar 72px + navstrip 46px = 118px */
body.srn-has-header {
  padding-top: 118px !important;
}
@media (max-width: 960px) {
  /* no navstrip on mobile: navbar 72px only */
  body.srn-has-header { padding-top: 72px !important; }
}
@media (max-width: 600px) {
  body.srn-has-header { padding-top: 60px !important; }
}

/* ── WordPress admin bar compatibility ───────────────────────────
   WP adds 'admin-bar' to <html> and a 32px bar at the top.
   Shift our fixed header down so it sits below the admin bar. */
.admin-bar .srn-header-wrap { top: 32px !important; }
@media (max-width: 782px) {
  /* WP admin bar is 46px on small screens */
  .admin-bar .srn-header-wrap { top: 46px !important; }
}

/* ================================================================
   NAVBAR PHONE — Allied-style: icon + CALL US label + number
   ================================================================ */
.srn-navbar-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.85) !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  transition: color .15s;
  flex-shrink: 0 !important;
}
.srn-navbar-phone:hover { color: #fff !important; }
.srn-navbar-phone-icon {
  flex-shrink: 0 !important;
  opacity: .75;
}
.srn-navbar-phone:hover .srn-navbar-phone-icon { opacity: 1; }
.srn-navbar-phone-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}
.srn-navbar-phone-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
}
.srn-navbar-phone-number {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  color: inherit !important;
}
@media (max-width: 960px) {
  .srn-navbar-phone { display: none !important; }
}

/* ================================================================
   NAVBAR: Logo | Search bar | Actions
   ================================================================ */
.srn-navbar {
  background: #0A1F44 !important;
  height: 72px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  width: 100% !important;
}
.srn-navbar-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
/* Logo takes left flex space — pushes search toward center */
.srn-navbar-inner > .srn-logo {
  flex: 1 !important;
  justify-content: flex-start !important;
}
/* Actions take right flex space — aligned to end */
.srn-navbar-inner > .srn-actions {
  flex: 1 !important;
  justify-content: flex-end !important;
}

/* ── Logo ──────────────────────────────────────────────────────── */
.srn-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.srn-logo img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}
.srn-mobile-nav-header .srn-logo img {
  height: 38px !important;
  max-height: 38px !important;
}

/* ── Inline search ─────────────────────────────────────────────── */
.srn-search-wrap {
  /* Logo and Actions each take flex:1 on either side, centering this naturally */
  flex: 0 0 auto !important;
  width: clamp(280px, 45vw, 680px) !important;
  position: relative !important;
  min-width: 0 !important;
}
.srn-search-form {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  padding: 0 6px 0 14px !important;
  gap: 8px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
}
.srn-search-form:focus-within {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.srn-search-form-icon {
  color: rgba(255,255,255,.45) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.srn-search-input,
.srn-search-input[type="search"] {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.srn-search-input::placeholder { color: rgba(255,255,255,.4) !important; }
.srn-search-input::-webkit-search-cancel-button,
.srn-search-input::-webkit-search-decoration { display: none !important; -webkit-appearance: none !important; }

.srn-search-clear,
button.srn-search-clear {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  flex-shrink: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: color .15s;
}
.srn-search-clear[hidden],
button.srn-search-clear[hidden],
.srn-search-clear[style*="display:none"],
button.srn-search-clear[style*="display:none"],
.srn-search-clear[style*="display: none"],
button.srn-search-clear[style*="display: none"] { display: none !important; }
.srn-search-clear:hover { color: #fff !important; }

.srn-search-btn,
button.srn-search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  background: #e51f2b !important;
  background-color: #e51f2b !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background .15s;
}
.srn-search-btn:hover,
button.srn-search-btn:hover { background: #c41825 !important; background-color: #c41825 !important; }

/* Search results dropdown */
.srn-search-results {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(6,21,48,.2) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}
.srn-search-results.srn-active { display: block !important; }
.srn-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  border-bottom: 1px solid #F0EDE8 !important;
  color: #14202E !important;
  transition: background .1s;
}
.srn-result-item:hover { background: #F7F4EF !important; }
.srn-result-img { width: 44px !important; height: 44px !important; object-fit: cover !important; border-radius: 6px !important; flex-shrink: 0 !important; }
.srn-result-name { font-size: 13px !important; font-weight: 600 !important; color: #14202E !important; }
.srn-result-cat { font-size: 11px !important; color: #8A9AAD !important; }
.srn-result-price { font-size: 13px !important; font-weight: 700 !important; color: #C2530F !important; flex-shrink: 0 !important; }
.srn-search-msg { padding: 14px 16px !important; font-size: 13px !important; color: #8A9AAD !important; text-align: center !important; }
.srn-result-all {
  display: block !important;
  text-align: center !important;
  padding: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #C2530F !important;
  text-decoration: none !important;
  border-top: 1px solid #F0EDE8 !important;
}
.srn-result-all:hover { background: #F7F4EF !important; }

/* ── Right actions ─────────────────────────────────────────────── */
.srn-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Cart button */
.srn-cart-trigger,
button.srn-cart-trigger {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.8) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background .15s;
}
.srn-cart-trigger:hover,
button.srn-cart-trigger:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Cart badge — always visible, even at 0 */
.srn-cart-count {
  position: absolute !important;
  top: 5px !important; right: 5px !important;
  min-width: 17px !important; height: 17px !important;
  padding: 0 4px !important;
  background: #e51f2b !important; background-color: #e51f2b !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-size: 10px !important; font-weight: 700 !important; line-height: 17px !important;
  text-align: center !important;
  display: block !important;
}

/* CTA */
.srn-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 20px !important;
  background: #e51f2b !important; background-color: #e51f2b !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important; font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin-left: 4px !important;
  border: none !important; box-shadow: none !important;
  transition: background .15s;
}
.srn-cta-btn:hover { background: #c41825 !important; background-color: #c41825 !important; }

/* Hamburger */
.srn-hamburger,
button.srn-hamburger {
  display: none !important;
}
@media (max-width: 960px) {
  .srn-hamburger,
  button.srn-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important; height: 44px !important;
    background: none !important; background-color: transparent !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 8px !important;
    margin-left: 2px !important;
    -webkit-appearance: none !important; appearance: none !important;
  }
}
.srn-hamburger span {
  display: block !important;
  width: 100% !important; height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  transition: transform .25s, opacity .25s;
}
.srn-hamburger.srn-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.srn-hamburger.srn-open span:nth-child(2) { opacity: 0 !important; }
.srn-hamburger.srn-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ================================================================
   NAV STRIP — desktop links row below navbar
   ================================================================ */
.srn-navstrip {
  background: #0c2350 !important;
  height: 46px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  width: 100% !important;
  overflow: visible !important;
}
.srn-navstrip-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Top-level nav list */
html body .srn-navstrip ul.menu,
html body .srn-navstrip > div > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  gap: 0 !important;
  background: none !important;
  border: none !important;
}

/* ALL list items */
html body .srn-navstrip li {
  list-style: none !important;
  position: relative !important;
}

/* Top-level links */
html body .srn-navstrip ul.menu > li > a,
html body .srn-navstrip > div > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  height: 46px !important;
  padding: 0 15px !important;
  color: rgba(255,255,255,.78) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  border-bottom: 3px solid transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: color .15s, border-color .15s;
}
html body .srn-navstrip ul.menu > li > a:hover,
html body .srn-navstrip ul.menu > li.current-menu-item > a,
html body .srn-navstrip ul.menu > li.current-menu-ancestor > a {
  color: #fff !important;
  border-bottom-color: #e51f2b !important;
}

/* Chevron for top-level parents — explicit overrides beat any theme border reset */
html body .srn-navstrip ul.menu > li.menu-item-has-children > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  transform: rotate(45deg) translateY(-2px) !important;
  opacity: .7 !important;
  transition: transform .15s, opacity .15s;
  box-shadow: none !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
html body .srn-navstrip ul.menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateY(2px) !important;
  opacity: 1 !important;
}

/* HIDE all sub-menus by default — beat any theme/plugin override */
html body .srn-navstrip .sub-menu,
html body .srn-navstrip ul ul,
html body .srn-navstrip li ul {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #fff !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 16px 48px rgba(6,21,48,.18) !important;
  padding: 8px 0 !important;
  list-style: none !important;
  margin: 0 !important;
  z-index: 9991 !important;
  height: auto !important;
}

/* SHOW sub-menu on hover */
html body .srn-navstrip li.menu-item-has-children:hover > ul,
html body .srn-navstrip li.menu-item-has-children:hover > .sub-menu,
html body .srn-navstrip li.menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Sub-menu item links */
html body .srn-navstrip .sub-menu li a,
html body .srn-navstrip .sub-menu > li > a {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 10px 20px !important;
  color: #14202E !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  background: none !important;
  white-space: nowrap !important;
  transition: background .12s, color .12s;
}
html body .srn-navstrip .sub-menu li a:hover {
  background: #F7F4EF !important;
  color: #C2530F !important;
}

/* ── 3rd-level: arrow on sub-menu items that have children ─────── */
html body .srn-navstrip .sub-menu li.menu-item-has-children > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: auto !important;
  padding-left: 12px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  /* rotate to point RIGHT → */
  transform: rotate(-45deg) !important;
  opacity: .55 !important;
  flex-shrink: 0 !important;
  /* override any inherited top-level arrow styles */
  border-top: none !important;
  border-left: none !important;
}

/* 3rd-level sub-menu: flies out to the right of the 2nd-level item */
html body .srn-navstrip .sub-menu .sub-menu {
  top: -8px !important;
  left: 100% !important;
  border-radius: 0 0 10px 10px !important;
  /* Keep hidden until parent is hovered — inherited from the base hide rule */
}

/* Show 3rd-level on hover of its parent 2nd-level item */
html body .srn-navstrip .sub-menu li.menu-item-has-children:hover > .sub-menu {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ================================================================
   OVERLAY
   ================================================================ */
.srn-overlay {
  display: none !important;
  position: fixed !important; inset: 0 !important;
  background: rgba(6,21,48,.5) !important;
  z-index: 9980 !important;
  backdrop-filter: blur(2px);
}
.srn-overlay.srn-open { display: block !important; }

/* ================================================================
   MOBILE DRAWER
   ================================================================ */
.srn-mobile-nav {
  position: fixed !important;
  top: 0 !important; left: -320px !important;
  width: 300px !important; height: 100% !important;
  background: #0A1F44 !important;
  z-index: 9995 !important;
  overflow-y: auto !important;
  display: flex !important; flex-direction: column !important;
  transition: left .3s cubic-bezier(.4,0,.2,1);
}
.srn-mobile-nav.srn-open { left: 0 !important; }

.srn-mobile-nav-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  flex-shrink: 0 !important;
}
.srn-mobile-close,
button.srn-mobile-close {
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 28px !important; line-height: 1 !important;
  cursor: pointer !important; padding: 4px 8px !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.srn-mobile-close:hover { color: #fff !important; }

.srn-mobile-nav-menu { flex: 1 !important; padding: 8px 0 !important; }
.srn-mobile-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.srn-mobile-menu .menu-item > a {
  display: flex !important; align-items: center !important;
  padding: 13px 20px !important;
  color: rgba(255,255,255,.85) !important; text-decoration: none !important;
  font-size: 15px !important; font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: none !important;
  transition: color .15s, background .15s;
}
.srn-mobile-menu .menu-item > a:hover,
.srn-mobile-menu .menu-item.current-menu-item > a {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}
.srn-submenu-toggle,
button.srn-submenu-toggle {
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer !important; padding: 13px 20px !important;
  margin-left: auto !important; font-size: 18px !important;
  -webkit-appearance: none !important; appearance: none !important;
  transition: color .15s, transform .25s;
}
.srn-submenu-toggle.srn-sub-open { transform: rotate(180deg) !important; color: rgba(255,255,255,.8) !important; }
.srn-mobile-menu .menu-item-has-children {
  display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.srn-mobile-menu .menu-item-has-children > a { border-bottom: none !important; flex: 1 !important; }
.srn-mobile-menu .sub-menu {
  display: none !important;
  width: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
  background: rgba(0,0,0,.15) !important;
}
.srn-mobile-menu .sub-menu.srn-sub-open { display: block !important; }
.srn-mobile-menu .sub-menu .menu-item > a {
  padding: 11px 20px 11px 36px !important;
  font-size: 13px !important; font-weight: 500 !important;
  border-left: 3px solid #C2530F !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.75) !important;
  background: none !important;
}
.srn-mobile-menu .sub-menu .menu-item > a:hover { color: #fff !important; }

.srn-mobile-nav-footer {
  padding: 20px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  flex-shrink: 0 !important;
}
.srn-mobile-phone {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  color: rgba(255,255,255,.75) !important; text-decoration: none !important;
  font-size: 15px !important; font-weight: 600 !important;
}
.srn-mobile-phone:hover { color: #fff !important; }
.srn-mobile-cta {
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 48px !important; background: #e51f2b !important; background-color: #e51f2b !important;
  color: #fff !important; border-radius: 8px !important;
  font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important;
}
.srn-mobile-cta:hover { background: #c41825 !important; background-color: #c41825 !important; }

/* ================================================================
   CART DRAWER
   ================================================================ */
.srn-cart-drawer {
  position: fixed !important;
  top: 0 !important; right: -420px !important;
  width: 400px !important; max-width: 100vw !important; height: 100% !important;
  background: #fff !important;
  z-index: 9995 !important;
  display: flex !important; flex-direction: column !important;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(6,21,48,.2) !important;
}
.srn-cart-drawer.srn-open { right: 0 !important; }
.srn-cart-drawer-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 20px 24px !important; border-bottom: 1px solid #E6E1D8 !important; flex-shrink: 0 !important;
}
.srn-cart-drawer-title {
  font-size: 20px !important; font-weight: 800 !important;
  text-transform: uppercase !important; color: #0A1F44 !important;
  margin: 0 !important; padding: 0 !important;
}
.srn-cart-close,
button.srn-cart-close {
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  color: #5A6573 !important; cursor: pointer !important;
  padding: 6px !important; border-radius: 6px !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.srn-cart-close:hover { background: #F7F4EF !important; color: #14202E !important; }
.srn-cart-drawer-body { flex: 1 !important; overflow-y: auto !important; padding: 16px 0 !important; }
.srn-cart-item {
  display: flex !important; gap: 14px !important;
  padding: 14px 24px !important; border-bottom: 1px solid #F0EDE8 !important;
}
.srn-cart-item-img { width: 68px !important; height: 68px !important; object-fit: cover !important; border-radius: 8px !important; flex-shrink: 0 !important; }
.srn-cart-item-body { flex: 1 !important; min-width: 0 !important; }
.srn-cart-item-name { font-size: 14px !important; font-weight: 600 !important; color: #14202E !important; }
.srn-cart-item-meta { font-size: 13px !important; color: #5A6573 !important; margin-top: 4px !important; }
.srn-cart-item-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 8px !important; }
.srn-cart-item-price { font-size: 15px !important; font-weight: 700 !important; color: #C2530F !important; }
.srn-cart-item-remove,
button.srn-cart-item-remove {
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  color: #9AA3AD !important; cursor: pointer !important;
  font-size: 18px !important; padding: 2px 6px !important; border-radius: 4px !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.srn-cart-item-remove:hover { color: #CC0000 !important; background: #FCE8E8 !important; }
.srn-cart-loading, .srn-cart-empty { text-align: center !important; color: #5A6573 !important; padding: 40px 24px !important; }
.srn-cart-drawer-footer {
  border-top: 1px solid #E6E1D8 !important; padding: 20px 24px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important; flex-shrink: 0 !important;
}
.srn-cart-drawer-footer[hidden] { display: none !important; }
.srn-cart-subtotal { display: flex !important; justify-content: space-between !important; font-size: 15px !important; color: #3E4A59 !important; }
.srn-cart-subtotal strong { font-size: 20px !important; font-weight: 800 !important; color: #0A1F44 !important; }
.srn-cart-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 48px !important; border-radius: 8px !important;
  font-size: 15px !important; font-weight: 700 !important;
  text-decoration: none !important;
}
.srn-cart-btn-primary { background: #C2530F !important; background-color: #C2530F !important; color: #fff !important; border: none !important; }
.srn-cart-btn-primary:hover { background: #a5460c !important; background-color: #a5460c !important; }
.srn-cart-btn-outline { border: 2px solid #0A1F44 !important; color: #0A1F44 !important; background: transparent !important; }
.srn-cart-btn-outline:hover { background: #0A1F44 !important; color: #fff !important; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .srn-navstrip { display: none !important; }
  .srn-cta-btn { display: none !important; }
}
/* Mobile search toggle button — only on small screens */
.srn-mobile-search-btn,
button.srn-mobile-search-btn {
  display: none !important;
}
@media (max-width: 680px) {
  .srn-mobile-search-btn,
  button.srn-mobile-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.8) !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .15s;
  }
  .srn-mobile-search-btn:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

  /* Hide the inline search wrap — shown via toggle below */
  .srn-search-wrap { display: none !important; }
  .srn-navbar-inner {
    justify-content: space-between !important;
    padding: 0 20px !important;
    gap: 12px !important;
  }

  /* Full-width search bar that drops below the navbar when toggled */
  .srn-navbar.srn-search-open .srn-search-wrap {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #0A1F44 !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 24px rgba(6,21,48,.3) !important;
    z-index: 9989 !important;
  }
  .srn-navbar.srn-search-open .srn-mobile-search-btn {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
  }
}
@media (max-width: 600px) {
  .srn-topbar { display: none !important; }
  .srn-logo img { height: 36px !important; max-height: 36px !important; }
  /* Prevent iOS auto-zoom on input focus — must be 16px or larger */
  .srn-search-input,
  .srn-search-input[type="search"] { font-size: 16px !important; }
}