/* Coastal Calm — mobile styles. Loaded after coastal.css.
   Everything here is scoped to < 992px (the breakpoint where the storefront swaps
   #headerOne for #headerMobile). Markup: resources/views/includes/headers/mobile-menu.blade.php */

@media (max-width: 991.98px) {

    /* No sideways page scroll on phones, whatever a section does */
    @supports (overflow: clip) { html, body { overflow-x: clip; } }

    /* ---------- Mobile header ---------- */
    #headerMobile.c-mhead {
        /* no z-index here: a stacking context would trap the slide-in menu under .mobile-overlay */
        position: relative; z-index: auto !important;
        background: var(--c-shell) !important;
        border-bottom: 1px solid var(--c-sand-line);
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Slim navy promo bar */
    #headerMobile .c-mpromo {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        background: var(--c-navy); color: #e9e2d4;
        min-height: 34px; padding: 7px 16px;
        font-size: 12.5px; font-weight: 500; letter-spacing: .02em; line-height: 1.3;
        text-align: center;
    }
    #headerMobile .c-mpromo svg { flex-shrink: 0; }
    #headerMobile .c-mpromo span { color: #e9e2d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

    #headerMobile .header-maxi {
        background: var(--c-shell) !important;
        padding: 8px 0 6px !important;
    }
    #headerMobile .c-mhead__bar {
        display: flex; align-items: center; gap: 2px;
        padding: 0 8px 0 6px;
    }

    /* 44px tap targets */
    .c-mbtn,
    #headerMobile .header-maxi .navigation-mobile-container .navigation-mobile-toggler {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 44px !important; height: 44px !important; min-width: 44px;
        padding: 0 !important; margin: 0 !important;
        border: 0 !important; border-radius: 999px !important;
        background: transparent !important; box-shadow: none !important;
        color: var(--c-ink) !important; font-size: 0; line-height: 1;
        cursor: pointer; position: relative; transform: none !important;
        transition: background .2s;
    }
    .c-mbtn:hover, .c-mbtn:focus-visible,
    #headerMobile .navigation-mobile-toggler:hover { background: rgba(17, 17, 17, .06) !important; color: var(--c-ink) !important; }
    .c-mbtn:focus { outline: none; box-shadow: none !important; }
    .c-mbtn:focus-visible { outline: 2px solid var(--c-ocean); outline-offset: 1px; }

    #headerMobile .c-mhead__logo {
        flex: 1 1 auto; min-width: 0;
        display: flex !important; align-items: center; justify-content: flex-start;
        width: auto !important; height: auto !important; padding: 0 0 0 4px !important;
        font-size: 0;
    }
    #headerMobile .c-mhead__logo img { height: 38px !important; width: auto !important; max-width: 100%; object-fit: contain; display: block; }

    #headerMobile .c-mhead__actions { display: flex; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; }

    /* Store icon (svg injected by master.blade.php) */
    #headerMobile #mobile-stor { background: transparent !important; animation: none !important; }
    /* Until master.blade.php injects its store icon, show a map pin */
    #headerMobile #mobile-stor:empty {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230f2a3a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
    }
    #headerMobile #mobile-stor svg {
        width: 22px !important; height: 22px !important; margin: 0 !important;
        animation: none !important; filter: none !important;
    }
    #headerMobile #mobile-stor svg path { fill: var(--c-navy) !important; }
    #headerMobile #mobile-stor svg circle { animation: none !important; filter: none !important; }

    /* Cart */
    #headerMobile .pro-header-right-options { display: flex; margin: 0 !important; padding: 0 !important; list-style: none; }
    #headerMobile .pro-header-right-options > li { position: relative; margin: 0 !important; padding: 0 !important; list-style: none; }
    #headerMobile .cart-btn::after { display: none !important; }
    #headerMobile .cart-btn .cart-icon-wrapper {
        width: 44px !important; height: 44px !important; border-radius: 999px !important;
        background: transparent !important; box-shadow: none !important; animation: none !important;
        display: flex; align-items: center; justify-content: center; position: relative; transform: none !important;
    }
    #headerMobile .cart-btn .cart-icon-wrapper svg { width: 22px !important; height: 22px !important; color: var(--c-ink) !important; }
    #headerMobile .cart-btn .total-menu-cart-product-count {
        position: absolute !important; top: 3px !important; right: 1px !important; left: auto !important;
        min-width: 19px; height: 19px; padding: 0 4px !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        border-radius: 999px !important; border: 2px solid var(--c-shell) !important; box-sizing: border-box;
        background: var(--c-coral) !important; color: #fff !important;
        font-size: 10.5px !important; font-weight: 700 !important; line-height: 1 !important;
        box-shadow: none !important; animation: none !important; letter-spacing: 0;
    }

    /* Mobile cart dropdown */
    #headerMobile .pro-header-right-options .dropdown-menu {
        width: min(340px, calc(100vw - 24px)); min-width: 0;
        margin-top: 8px !important; padding: 14px 16px !important;
        background: #fff !important; border: 1px solid var(--c-sand-line) !important;
        border-radius: var(--c-radius) !important; box-shadow: var(--c-shadow) !important;
        max-height: 70vh; overflow-y: auto;
    }
    /* Popper places this off-screen on phones; pin it under the cart button instead */
    #headerMobile .pro-header-right-options .dropdown-menu.show {
        position: absolute !important; top: 100% !important; right: -4px !important; left: auto !important;
        transform: none !important; will-change: auto; z-index: 1045;
    }
    #headerMobile .shopping-cart-items { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--c-text); }
    #headerMobile .shopping-cart-items li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-sand-line); }
    #headerMobile .shopping-cart-items li:last-child { border-bottom: 0; flex-direction: column; align-items: stretch; gap: 8px; }
    #headerMobile .shopping-cart-items .item-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--c-sand); flex-shrink: 0; }
    #headerMobile .shopping-cart-items .item-thumb img { width: 100%; height: 100%; object-fit: cover; }
    #headerMobile .shopping-cart-items h3 { font-family: var(--c-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--c-ink); margin: 0 0 4px; }
    #headerMobile .shopping-cart-items .btn { margin: 0 !important; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    /* Search pill */
    #headerMobile .header-navbar { background: var(--c-shell) !important; padding: 2px 16px 14px !important; }
    #headerMobile .c-mhead__search .form-inline { display: block; width: 100%; margin: 0; }
    #headerMobile .search-field-wrap {
        display: flex !important; align-items: center; width: 100%;
        background: #fff; border: 1px solid var(--c-sand-line); border-radius: 999px;
        padding: 4px 4px 4px 18px; transform: none !important; box-shadow: none !important;
    }
    #headerMobile .search-field-wrap:focus-within { border-color: var(--c-ocean); box-shadow: 0 0 0 3px rgba(176, 38, 10, .12) !important; }
    #headerMobile .search-field-wrap .search-input {
        flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 !important; margin: 0;
        border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
        font-size: 16px; color: var(--c-ink);
    }
    #headerMobile .search-field-wrap .search-input::placeholder { color: #7d8a91; opacity: 1; }
    #headerMobile .search-field-wrap .search_button {
        order: 2; flex-shrink: 0; position: static !important;
        width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important;
        border: 0 !important; border-radius: 999px !important;
        background: var(--c-navy) !important; color: #fff !important;
        display: flex; align-items: center; justify-content: center;
    }
    #headerMobile .search-field-wrap .search_button i { color: #fff !important; font-size: 15px; }

    /* ---------- Slide-in navigation ---------- */
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile {
        position: fixed; top: 0; bottom: 0; left: -380px !important;
        width: 86vw !important; max-width: 340px; height: 100% !important;
        z-index: 10060 !important;
        background: var(--c-shell) !important; border: 0 !important;
        overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
        transition: left .35s ease, box-shadow .35s ease;
        font-size: 15px;
    }
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile.navigation-active {
        left: 0 !important;
        box-shadow: 24px 0 48px -24px rgba(17, 17, 17, .45);
    }
    .mobile-overlay { z-index: 10050 !important; background: rgba(17, 17, 17, .55) !important; width: 100% !important; left: 0; }

    #navigation-mobile .c-mnav__top {
        position: sticky; top: 0; z-index: 2;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 20px;
        background: var(--c-shell); border-bottom: 1px solid var(--c-sand-line);
    }
    #navigation-mobile .c-mnav__logo { display: block; }
    #navigation-mobile .c-mnav__logo img { height: 28px; width: auto; display: block; }
    #navigation-mobile .c-mnav__close {
        width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px;
        border: 1px solid var(--c-sand-line); background: #fff; color: var(--c-ink);
        display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    }
    #navigation-mobile .c-mnav__close:hover { border-color: var(--c-ocean); }

    /* Sign-in block */
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile .logout-main {
        display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
        width: auto !important; margin: 18px 16px 6px; padding: 20px;
        background: #fff !important; border: 1px solid var(--c-sand-line) !important; border-radius: 20px;
        position: static;
    }
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile .logout-main .welcome {
        width: auto !important; color: var(--c-ink); display: flex; flex-direction: column; gap: 4px;
    }
    #navigation-mobile .logout-main .welcomeUsername { font-family: var(--c-serif) !important; font-size: 21px; line-height: 1.2; color: var(--c-ink) !important; }
    #navigation-mobile .logout-main .welcome small { font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile .logout-main .logout { width: 100%; height: auto !important; padding: 0 !important; }
    #headerMobile .header-maxi .navigation-mobile-container #navigation-mobile .logout-main .logout a {
        position: static !important; float: none !important;
        width: 100% !important; height: auto !important; min-height: 46px;
        display: flex !important; align-items: center; justify-content: center;
        padding: 12px 20px !important; border-radius: 999px !important;
        font-size: 15px !important; font-weight: 600; top: auto; right: auto;
    }
    #headerMobile #navigation-mobile .logout-main .logout a.c-btn--dark { background: var(--c-navy) !important; color: #fff !important; border: 0 !important; }
    #headerMobile #navigation-mobile .logout-main .logout a.c-btn--ghost { background: transparent !important; color: var(--c-navy) !important; border: 1.5px solid var(--c-navy) !important; }

    /* Lists */
    #navigation-mobile .c-mnav__label {
        margin: 24px 20px 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
        text-transform: uppercase; color: var(--c-ocean);
    }
    #navigation-mobile .c-mnav__list { margin: 0 12px !important; padding: 0 !important; list-style: none; font-size: 15px !important; display: block; }
    #navigation-mobile .c-mnav__list .nav-item { margin: 0; border-bottom: 1px solid var(--c-sand-line); }
    #navigation-mobile .c-mnav__list .nav-item:last-child { border-bottom: 0; }
    #headerMobile #navigation-mobile .c-mnav__list .nav-link {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 46px; padding: 10px 10px !important; border-radius: 12px;
        color: var(--c-ink) !important; font-size: 15px; font-weight: 500; line-height: 1.3;
        background: transparent; cursor: pointer;
    }
    #headerMobile #navigation-mobile .c-mnav__list--cats .nav-link { min-height: 50px; font-size: 16.5px; font-weight: 600; color: var(--c-ink) !important; }
    #headerMobile #navigation-mobile .c-mnav__list .nav-link svg { color: var(--c-ocean); flex-shrink: 0; }
    #headerMobile #navigation-mobile .c-mnav__list .nav-link:hover,
    #headerMobile #navigation-mobile .c-mnav__list .nav-link:active { background: var(--c-seafoam); color: var(--c-ocean) !important; }
    #headerMobile #navigation-mobile .c-mnav__list .c-mnav__sale,
    #headerMobile #navigation-mobile .c-mnav__list .c-mnav__sale svg { color: var(--c-coral) !important; }

    /* Help card */
    #navigation-mobile .c-mnav__help {
        margin: 26px 16px 0; padding: 22px 20px;
        background: var(--c-sand); border-radius: 20px;
        display: flex; flex-direction: column; gap: 4px;
    }
    #navigation-mobile .c-mnav__help strong { font-family: var(--c-serif) !important; font-weight: 400; font-size: 19px; color: var(--c-ink); }
    #navigation-mobile .c-mnav__help span { font-size: 14px; color: var(--c-text); }
    #navigation-mobile .c-mnav__help .c-btn { margin-top: 12px; width: 100%; padding: 13px 18px; font-size: 15px; color: #fff !important; }
    #navigation-mobile .c-mnav__help .c-btn:hover { background: var(--c-navy); }
    #navigation-mobile .c-mnav__help .c-mnav__stores { margin-top: 8px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--c-ocean) !important; padding: 8px 0; }

    /* ---------- Compact sticky bar (after scrolling past the header) ---------- */
    #mobileStickyHeader.c-msticky {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
        align-items: center; gap: 4px;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px 6px;
        background: var(--c-shell) !important;
        border-bottom: 1px solid var(--c-sand-line);
        box-shadow: 0 10px 30px -20px rgba(17, 17, 17, .45);
    }
    #mobileStickyHeader.c-msticky.is-visible { display: flex !important; }
    #mobileStickyHeader .c-msticky__logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
    #mobileStickyHeader .c-msticky__logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; display: block; }
    #mobileStickyHeader .c-msticky__call {
        display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
        min-height: 40px; padding: 0 18px; border-radius: 999px;
        background: var(--c-navy); color: #fff !important;
        font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
    }
    #mobileStickyHeader .c-msticky__call:hover { background: var(--c-ocean); color: #fff !important; }

    /* ---------- Floating chat + cart + back-to-top ---------- */
    #floating-cart-btn {
        left: 16px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: 50px !important; height: 50px !important; font-size: 18px !important;
        background: var(--c-navy) !important; color: #fff !important;
        box-shadow: 0 0 0 2px rgba(251, 248, 243, .22), 0 12px 28px -12px rgba(17, 17, 17, .6) !important;
        z-index: 1035 !important;
    }
    #floating-cart-btn .fc-badge { background: var(--c-coral) !important; border: 2px solid var(--c-shell); top: -3px !important; right: -3px !important; }
    #floating-cart-dropdown {
        left: 12px !important; right: 12px !important; width: auto !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; max-height: 65vh !important;
        border-radius: 20px !important; border: 1px solid var(--c-sand-line);
        box-shadow: var(--c-shadow) !important; z-index: 1036 !important;
    }
    #floating-cart-dropdown .fc-header { color: var(--c-ink); border-bottom-color: var(--c-sand-line); }
    #floating-cart-dropdown .fc-checkout-btn { background: var(--c-navy); border-radius: 999px; min-height: 46px; display: flex; align-items: center; justify-content: center; }
    #floating-cart-dropdown .fc-checkout-btn:hover { background: var(--c-ocean); }

    /* On phones the chat pill becomes a 50px round button (label kept for screen readers)
       so it no longer sits on top of CTAs and prices.
       `html body a` outranks lastStyle.css (#chat_icon { display:block !important }), which some
       pages load a second time after this file - that left the icon stuck to the top of the circle. */
    html body a#chat_icon {
        right: 16px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: 50px !important; height: 50px !important; min-height: 0 !important; padding: 0 !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        border-radius: 999px !important; z-index: 1035 !important;
        background: var(--c-ocean) !important;
        box-shadow: 0 0 0 2px #fff, 0 12px 28px -12px rgba(17, 17, 17, .6) !important;
    }
    #chat_icon span {
        display: block !important; width: 24px; height: 24px; overflow: hidden;
        font-size: 0 !important; line-height: 0 !important; color: transparent !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    }
    /* master.blade.php toggles .hover-effect every second; keep it a quiet navy/ocean pulse
       instead of a pale flash that makes the white label unreadable */
    html body a#chat_icon.hover-effect { background: var(--c-navy) !important; background-color: var(--c-navy) !important; transform: none !important; }
    #chat_icon { transition: background .6s ease !important; }

    /* Newsletter blurb in the footer inherits a dark body colour on phones */
    .c-footer .c-footer__news-col p { color: #c9d4d8 !important; }

    #back-to-top { right: 16px !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; width: 44px !important; height: 44px !important; z-index: 1034 !important; }

    /* Keep the last lines of the footer clear of the floating buttons */
    .c-footer__bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

    /* ---------- Homepage at phone widths ---------- */
    .c-home .c-section-head { flex-wrap: wrap; align-items: flex-end; row-gap: 8px; margin-bottom: 24px; }
    .c-home .c-section-head > :first-child { flex: 1 1 auto; min-width: 0; }
    .c-home .c-section-head a { white-space: nowrap; }

    .c-home .faq-section { padding-bottom: 24px !important; }
    .c-home .faq-section .faq-outer-card { margin-left: 0 !important; margin-right: 0 !important; }
    .c-home .faq-section-sub { color: var(--c-text) !important; }
}

/* lastStyle.css pulls the product page up 80px to hide under the old mobile header;
   with the Coastal header that slides the gallery over the search pill */
@media screen and (max-width: 768px) {
    #product_content_mobile { margin-top: 0 !important; }
}

@media (max-width: 575.98px) {
    .c-home .c-section-head h2 { font-size: 28px; }
    .c-home .c-section-head a { font-size: 14.5px; }

    .c-hero__checks { gap: 10px 18px; }
    .c-hero__card { padding: 16px 18px; gap: 14px; }

    .c-feel__box { border-radius: 26px; }
    .c-feel__copy h2 { font-size: 28px; }
    .c-feel__copy p { font-size: 16px; }

    .c-products__track { grid-auto-columns: 80%; gap: 14px; margin-right: -16px; padding-right: 16px; scroll-padding-left: 0; }
    .c-pcard__img { height: 220px; }

    .c-brands { padding-top: 40px; padding-bottom: 48px; gap: 22px; }
    .c-brandtiles { padding: 30px 14px 26px; border-radius: 24px 24px 14px 14px; }
    .c-brandtiles__head { margin-bottom: 24px; }
    .c-brandtiles__head h2 { font-size: 28px; }
    .c-brandtiles__sub { font-size: 14px; gap: 10px; }
    .c-brandtiles__sub::before, .c-brandtiles__sub::after { width: 32px; }
    .c-brandtiles__grid { --tile-cols: 2; --tile-gap: 12px; }
    .c-brandtile { border-radius: 14px; }
    .c-brandtile:hover { border-radius: 18px; }

    .c-stores__intro h2 { font-size: 30px; }
    .c-stores__intro p { font-size: 16px; }
    .c-stores__img { flex-grow: 0; height: 240px; min-height: 0; }

    .c-promos { gap: 16px; }
    .c-promo { min-height: 320px; border-radius: 24px; }
    .c-promo__text h3 { font-size: 28px; }
    .c-promo--fin { min-height: 0; }
    .c-promo--fin h3 { font-size: 30px; }
    .c-promo--fin .c-btn { margin-top: 12px; }

    .c-home .faq-section { padding-top: 48px !important; }
    .c-home .faq-section .text-center.mb-5 { margin-bottom: 28px !important; }
    .c-home .faq-outer-card { border-radius: 22px !important; min-height: 0 !important; }
}