/* ========================
   Mobile Header Controls
   Always hidden on desktop — shown via mobile breakpoint below
======================== */
.mobile-header-controls {
    display: none;
}

/* ========================
   Desktop ≥ 992px
======================== */
@media (min-width: 992px) {
    .nav-cart-desktop {
        display: flex !important;
    }
}

/* ========================
   Tablet / Mobile  ≤ 991px
======================== */
@media only screen and (max-width: 991px) {

    /* --- Header: become a solid block (not absolute overlay) --- */
    .site-header--overlay {
        position: relative;
        background: var(--color-secondary);
        z-index: 100;
    }

    /* Show mobile cart + hamburger */
    .mobile-header-controls {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Mobile hamburger button */
    .mobile-nav-toggle {
        background: rgba(255, 255, 255, 0.12);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        padding: 7px 9px;
        color: #ffffff;
        cursor: pointer;
        line-height: 0;
        transition: background 0.2s;
    }

    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus {
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }

    /* Mobile cart link */
    .mobile-cart-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        padding: 6px;
    }

    .mobile-cart-link .cart-svg-icon {
        color: #ffffff;
        width: 28px;
        height: 28px;
    }

    .mobile-cart-link .cart-count {
        top: -2px;
        right: -6px;
        background: var(--color-wave);
        color: var(--color-secondary);
        font-weight: 700;
    }

    /* Both overlay and non-overlay headers need relative positioning
       so the absolute collapse panel anchors from the header bottom */
    .site-header {
        position: relative;
    }

    /* Non-overlay (inner pages) gets matching dark header on mobile */
    .site-header:not(.site-header--overlay) {
        background: var(--color-secondary);
    }

    .site-header:not(.site-header--overlay) .site-topbar {
        background: transparent;
    }

    .site-header:not(.site-header--overlay) .site-nav {
        background: transparent;
    }

    /* --- Site nav: zero height on mobile (collapse anchors from site-header) --- */
    .site-nav {
        padding: 0 !important;
    }

    /* --- Expanded nav panel drops below the header --- */
    #navbarNavDropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-secondary);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
        padding: 8px 0 20px;
        z-index: 999;
    }

    /* --- Nav items: stack vertically --- */
    .navbar-wrapper .dropdown {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 0;
    }

    .navbar-wrapper .dropdown li,
    .navbar-wrapper .dropdown li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        padding: 0 !important;
        margin-right: 0;
    }

    /* --- Remove pill inside mobile nav --- */
    .floatnav-pill-inner {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* --- Mobile nav link styles --- */
    .site-header .navbar-wrapper a,
    .site-header .nav-item a,
    .site-header--overlay .navbar-wrapper a,
    .site-header--overlay .nav-item a {
        color: rgba(255, 255, 255, 0.92) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 14px 8px !important;
        font-size: 15px;
        font-weight: 500;
    }

    .site-header .navbar-wrapper a:hover,
    .site-header .nav-item a:hover,
    .site-header--overlay .navbar-wrapper a:hover,
    .site-header--overlay .nav-item a:hover {
        color: var(--color-wave) !important;
    }

    .site-header--overlay .navbar-wrapper a.active,
    .site-header--overlay .nav-item a.active {
        color: var(--color-wave) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* --- Desktop cart hidden in nav on mobile (moved to topbar) --- */
    .nav-cart-desktop {
        display: none !important;
    }

    /* --- Submenus: accordion (toggled by JS .is-open class) --- */
    .navbar-wrapper ul li > ul {
        position: static !important;
        display: none !important;
        box-shadow: none !important;
        border-top: none !important;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 0 6px 0 !important;
        padding: 4px 0 !important;
    }

    .navbar-wrapper ul li.is-open > ul {
        display: block !important;
    }

    .navbar-wrapper ul li > ul a {
        color: rgba(255, 255, 255, 0.75) !important;
        padding: 10px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        font-size: 14px;
    }

    .navbar-wrapper ul li > ul a:hover {
        color: var(--color-wave) !important;
        background: rgba(255, 255, 255, 0.06);
    }

    /* Flip chevron when submenu is open */
    .navbar-wrapper ul > li.is-open:has(> ul) > a::after {
        content: " ▴" !important;
    }

    /* Navbar-nav (cart area on desktop) — hide border/margin on mobile */
    .navbar-nav {
        margin-top: 0;
        padding-top: 0;
    }

    /* Hero: header is now in flow on mobile, so restore normal padding.
       Horizontal 0 — container inside handles side spacing. */
    .welcomehero-inner {
        padding: 60px 0 !important;
    }

    /* Tighten indicator position on mobile */
    .hero-carousel-indicators {
        bottom: 80px;
    }

    .welcometext h1 {
        font-size: 48px;
        line-height: 58px;
    }
}

/* ========================
   Small Mobile  ≤ 767px
======================== */
@media only screen and (max-width: 767px) {

    .welcomewrap {
        min-height: 520px;
    }

    .welcomehero-inner {
        min-height: 420px;
        justify-content: center;
        padding: 40px 0 !important;
    }

    .hero-slide {
        min-height: 420px;
    }

    .welcometext h1 {
        font-size: 36px;
        line-height: 44px;
    }

    .listbtnstyle {
        padding: 0;
        column-count: 1 !important;
    }

    .operationhourswrap {
        padding-top: 70px;
    }

    .operationhourscol ul li {
        display: block !important;
    }

    .operationhourscol {
        padding: 25px;
    }

    .operationhourscol ul {
        margin-bottom: 0;
    }

    .daycol,
    .timecol {
        font-size: var(--font-body-lg);
    }

    .carousel-caption h5 {
        font-size: var(--font-body-xl);
        padding: 0 25px;
    }

    .testinobualwrap {
        padding: 180px 0 90px 0;
    }

    .testinobualwrap .carousel-caption {
        width: 80%;
        margin: 0 auto;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        height: 30px !important;
        background-size: cover;
    }
}

/* ========================
   Tablet mid  ≤ 768px
======================== */
@media only screen and (max-width: 768px) {

    .navbar-toggler-icon {
        width: 30px;
        height: 30px;
    }

    .prodcatwrap {
        padding-top: 30px;
        text-align: center;
    }

    .prodcatwrap .prod-info h6 {
        height: 100px;
    }

    .bluepatternbg {
        background-size: cover !important;
    }

    .product-service-wrap {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .listbtnstyle li {
        padding: 8px;
    }

    .listbtnstyle li a {
        font-size: var(--font-body-sm);
    }
}

/* ========================
   Foam Party Sections — Tablet ≤ 991px
======================== */
@media only screen and (max-width: 991px) {

    .foamintrowrap   { padding: 64px 0 72px; }
    .whymrhappywrap  { padding: 64px 0 72px; }
    .foamctawrap     { padding: 70px 0 80px; }

    .foamintro-title { font-size: 36px; }
    .foamcta-title   { font-size: 38px; }

    /* Stack stat grid to 2-col on tablet (already is, just ensure padding) */
    .foam-stat-grid  { gap: 16px; }

    /* Hide large decorative bg bubbles on smaller screens */
    .foam-bg-bubble  { display: none; }
}

/* ========================
   Foam Party Sections — Mobile ≤ 767px
======================== */
@media only screen and (max-width: 767px) {

    /* Hero foam badge */
    .foam-badge   { font-size: 11px; padding: 7px 13px; }
    .hero-tagline { font-size: 14px; margin-bottom: 24px; }

    /* Hide floating hero bubbles on small screens */
    .bubble-float { display: none; }

    /* Foam intro */
    .foamintro-title  { font-size: 28px; line-height: 1.25; }
    .foamintro-body   { font-size: 15px; }
    .foamintro-badge  { font-size: 11px; }

    /* Stat grid — 2 cols still fine, just tighten padding */
    .foam-stat        { padding: 20px 14px 18px; }
    .foam-stat-num    { font-size: 15px; }
    .foam-stat-label  { font-size: 12px; }

    /* Trust cards */
    .trust-card   { padding: 24px 20px; }
    .trust-card h4 { font-size: 16px; }

    /* Service area tags */
    .area-tags    { gap: 8px; }
    .area-tag     { font-size: 12px; padding: 6px 13px; }

    /* Bottom CTA */
    .foamcta-title  { font-size: 30px; }
    .foamcta-body   { font-size: 16px; }
    .foam-cta-bubble { display: none; }

    /* Reduced motion safe — still applies */
    .foam-stat,
    .trust-card { animation-duration: 0.3s; }
}