@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

/* Hide the theme's built-in header — Elementor has its own */
#masthead.site-header {
    display: none !important;
}
/* Remove ALL top whitespace */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
/* Collapse the header WRAPPER only on homepage so hero image goes edge-to-edge */
/* This targets the outer div, not #header itself */
body.home > div > [data-elementor-type="twbb_header"] {
    height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.home .elementor-241 {
    height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Hide the side cart panel — cart icon goes directly to /cart */
.twbb_menu-cart__container,
.twbb_menu-cart__main {
    display: none !important;
}

/* Disable Elementor lazy load dimming — prevents the "dull" flash */
.e-con.e-parent:not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: var(--background-image, none) !important;
}
.e-con.e-parent {
    content-visibility: visible !important;
}
/* Prevent Elementor from adding dark overlays after page load */
.elementor-element::before {
    transition: none !important;
    animation: none !important;
}
/* Force all sections to be visible immediately — no fade-in */
.elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
}
.elementor-element {
    animation-duration: 0s !important;
}

/* ═══════════════════════════════════════════════════════
   HERO SECTION MAKEOVER
   ═══════════════════════════════════════════════════════ */

/* Hero container — better gradient overlay */
.elementor-206 .elementor-element.elementor-element-jcjhcud1::before {
    background-image: linear-gradient(135deg, rgba(2,6,23,0.85) 0%, rgba(2,6,23,0.4) 50%, rgba(2,6,23,0.15) 100%) !important;
}

/* Hero heading — larger, bolder, gradient text */
.elementor-206 .elementor-element-84bulw81 .elementor-heading-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 40%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 24px !important;
}

/* Hero description text — cleaner, more readable, justified */
.elementor-206 .elementor-element-a1vaosem {
    max-width: 560px !important;
}
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container,
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container p {
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 400 !important;
    text-align: justify !important;
}
/* Make key phrases pop */
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container strong,
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container b {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

/* FDA badge — standalone pill on its own line */
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container p:first-child {
    margin-bottom: 16px !important;
    line-height: 1 !important;
}
.elementor-206 .elementor-element-a1vaosem .elementor-widget-container p:first-child::before {
    content: '✦ FDA Cleared · Summit to Sea' !important;
    display: inline-block !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 20px !important;
    border-radius: 100px !important;
}

/* Call Us button — modern gradient with glow */
.elementor-206 .elementor-element-3cdnfmal .elementor-button,
.elementor-206 a.elementor-button[href^="tel:"] {
    background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.35) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px !important;
}
.elementor-206 .elementor-element-3cdnfmal .elementor-button:hover,
.elementor-206 a.elementor-button[href^="tel:"]:hover {
    box-shadow: 0 12px 40px rgba(56, 189, 248, 0.5) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
}
/* Add phone icon before Call Us */
.elementor-206 .elementor-element-3cdnfmal .elementor-button-text::before,
.elementor-206 a.elementor-button[href^="tel:"] .elementor-button-text::before {
    content: '📞 ' !important;
}

/* ═══════════════════════════════════════════════════════
   HEADER MAKEOVER — Modern glass nav with smart layout
   ═══════════════════════════════════════════════════════ */

/* Header container — dark on ALL pages */
#header,
.elementor-element-zakf4yxv {
    background: rgba(10, 15, 30, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 40px !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 9999 !important;
}

/* When sticky/scrolled — even darker */
#header.e-sticky--active,
.elementor-element-zakf4yxv.e-sticky--active {
    background: rgba(8, 12, 24, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Force header icons (user, cart) to white on all pages */
#header .elementor-widget-icon .elementor-icon,
#header .elementor-widget-icon .elementor-icon svg,
#header .elementor-widget-icon .elementor-icon i,
#header .elementor-widget-icon a,
#header .twbb-menu-cart__toggle .elementor-button,
#header .twbb-menu-cart__toggle .elementor-button-icon,
#header .twbb-menu-cart__toggle svg,
#header .elementor-widget-twbb_woocommerce-menu-cart svg,
#header .elementor-widget-twbb_woocommerce-menu-cart .twbb-cart-icon,
#header .elementor-widget-twbb_woocommerce-menu-cart .elementor-button {
    color: #d4a843 !important;
    fill: #d4a843 !important;
}
#header .elementor-widget-icon .elementor-icon:hover,
#header .twbb-menu-cart__toggle:hover .elementor-button,
#header .twbb-menu-cart__toggle:hover svg {
    color: #f5c542 !important;
    fill: #f5c542 !important;
}

/* Logo — homepage has white logo, just add warm glow */
body.home #header .elementor-widget-image img {
    height: 44px !important;
    width: auto !important;
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(245, 197, 66, 0.2)) !important;
    transition: filter 0.3s ease !important;
}
/* Logo — inner pages have dark logo, invert it to white */
body:not(.home) #header .elementor-widget-image img {
    height: 44px !important;
    width: auto !important;
    filter: brightness(0) invert(1) brightness(1.15) drop-shadow(0 0 10px rgba(245, 197, 66, 0.2)) !important;
    transition: filter 0.3s ease !important;
}

/* Override Elementor global CSS variables for header */
#header,
#header .elementor-element {
    --e-global-color-text: rgba(255, 255, 255, 0.65) !important;
    --e-global-color-accent: #f5c542 !important;
    --e-global-typography-text-font-family: 'Raleway' !important;
    --e-global-typography-text-font-size: 13px !important;
    --e-global-typography-text-font-weight: 500 !important;
    --e-global-typography-text-text-transform: uppercase !important;
    --e-global-typography-text-letter-spacing: 0.5px !important;
}

/* Nav menu links — warm gold typography */
#header .twbb-nav-menu .twbb-item,
#header .twbb-nav-menu .twbb-item,
#header .twbb-nav-menu__container ul li a {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    font-family: 'Raleway', 'Inter', sans-serif !important;
    position: relative !important;
}
#header .twbb-nav-menu .twbb-item:hover,
#header .twbb-nav-menu .twbb-item:hover,
#header .twbb-nav-menu__container ul li a:hover {
    color: #f5c542 !important;
    background: rgba(245, 197, 66, 0.06) !important;
}

/* Active menu item — gold underline */
#header .twbb-nav-menu .menu-item.current-menu-item .twbb-item,
#header .twbb-nav-menu .menu-item.current_page_item .twbb-item {
    color: #f5c542 !important;
}
#header .twbb-nav-menu .menu-item.current-menu-item .twbb-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 16px !important;
    right: 16px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #f5c542, #e8a317) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.3) !important;
}

/* Dropdown menus — dark with gold accents */
#header .twbb-nav-menu--dropdown,
#header .sub-menu {
    background: rgba(15, 18, 28, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(245, 197, 66, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;
    margin-top: 8px !important;
}
#header .sub-menu .twbb-item {
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}
#header .sub-menu .twbb-item:hover {
    background: rgba(245, 197, 66, 0.08) !important;
    color: #f5c542 !important;
}

/* CTA button in nav (only actual buttons, not nav links) */
#header .elementor-widget-button .elementor-button {
    background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3) !important;
    transition: all 0.2s ease !important;
}
#header .elementor-widget-button .elementor-button:hover {
    box-shadow: 0 6px 25px rgba(56, 189, 248, 0.45) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
}

/* Mobile hamburger — modern look */
#header .twbb-menu-toggle {
    color: white !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════
   POLICY PAGES — Refund, Terms, Privacy, Shipping
   ═══════════════════════════════════════════════════════ */
body.page-id-210 .elementor-210,
body.page-id-211 .elementor-211,
body.page-id-212 .elementor-212,
body.page-id-213 .elementor-213 {
    max-width: 900px !important;
    margin: 10px auto !important;
    padding: 0 20px !important;
}

/* Single frame around ALL content */
body.page-id-210 .elementor-210,
body.page-id-211 .elementor-211,
body.page-id-212 .elementor-212,
body.page-id-213 .elementor-213 {
    background: rgba(245, 197, 66, 0.06) !important;
    border: 1.5px solid rgba(212, 168, 67, 0.2) !important;
    border-radius: 16px !important;
    padding: 36px 40px !important;
}

/* Force justify and tighten paragraph spacing */
body.page-id-210 p,
body.page-id-210 li,
body.page-id-211 p,
body.page-id-211 li,
body.page-id-212 p,
body.page-id-212 li,
body.page-id-213 p,
body.page-id-213 li {
    text-align: justify !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    color: #374151 !important;
    padding: 0 !important;
}

/* Headings inside policy pages */
body.page-id-210 h1, body.page-id-210 h2, body.page-id-210 h3,
body.page-id-211 h1, body.page-id-211 h2, body.page-id-211 h3,
body.page-id-212 h1, body.page-id-212 h2, body.page-id-212 h3,
body.page-id-213 h1, body.page-id-213 h2, body.page-id-213 h3 {
    color: #1e1b4b !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

/* Kill all inner padding/margins on policy page containers — NOT header/footer */
body.page-id-210 .e-con:not(#header):not(#header *),
body.page-id-211 .e-con:not(#header):not(#header *),
body.page-id-212 .e-con:not(#header):not(#header *),
body.page-id-213 .e-con:not(#header):not(#header *) {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}
body.page-id-210 .elementor-widget:not(#header *),
body.page-id-211 .elementor-widget:not(#header *),
body.page-id-212 .elementor-widget:not(#header *),
body.page-id-213 .elementor-widget:not(#header *) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
}
/* Force the 66% width heading/content to full width */
body.page-id-210 [class*="elementor-element-22kzu3cz"],
body.page-id-211 [class*="elementor-element-22kzu3cz"],
body.page-id-212 [class*="elementor-element-22kzu3cz"],
body.page-id-213 [class*="elementor-element-22kzu3cz"],
body.page-id-210 .elementor-widget-twbbpost-content,
body.page-id-211 .elementor-widget-twbbpost-content,
body.page-id-212 .elementor-widget-twbbpost-content,
body.page-id-213 .elementor-widget-twbbpost-content {
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
}

/* Remove extra spacing between sections */
body.page-id-210 .elementor-element,
body.page-id-211 .elementor-element,
body.page-id-212 .elementor-element,
body.page-id-213 .elementor-element {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Keep some padding on the top-level container */
body.page-id-210 .elementor-top-section,
body.page-id-211 .elementor-top-section,
body.page-id-212 .elementor-top-section,
body.page-id-213 .elementor-top-section {
    padding: 20px 0 !important;
}

/* Remove any white background/shadow from wrapper elements */
body.page-id-210 .elementor-section,
body.page-id-210 .elementor-column,
body.page-id-210 .elementor-widget-wrap,
body.page-id-210 .elementor-container,
body.page-id-211 .elementor-section,
body.page-id-211 .elementor-column,
body.page-id-211 .elementor-widget-wrap,
body.page-id-211 .elementor-container,
body.page-id-212 .elementor-section,
body.page-id-212 .elementor-column,
body.page-id-212 .elementor-widget-wrap,
body.page-id-212 .elementor-container,
body.page-id-213 .elementor-section,
body.page-id-213 .elementor-column,
body.page-id-213 .elementor-widget-wrap,
body.page-id-213 .elementor-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* White frame removal handled by JS in footer — see fixPolicyPages() */

/* Refund page — nudge content left */
body.page-id-212 .elementor-widget-twbbpost-content {
    margin-left: -20px !important;
}

/* Privacy page — space between title and content */
body.page-id-211 .elementor-widget-twbbpost-content {
    margin-top: 20px !important;
}

/* Links in policy pages */
body.page-id-210 .elementor-widget-container a,
body.page-id-211 .elementor-widget-container a,
body.page-id-212 .elementor-widget-container a,
body.page-id-213 .elementor-widget-container a {
    color: #d4a843 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
body.page-id-210 .elementor-widget-container a:hover,
body.page-id-211 .elementor-widget-container a:hover,
body.page-id-212 .elementor-widget-container a:hover,
body.page-id-213 .elementor-widget-container a:hover {
    color: #f5c542 !important;
}