/* ============================================================
   XSENSE — Global Responsive Fixes
   Loaded LAST so it overrides earlier stylesheets.
   Goals:
   - Eliminate horizontal overflow on every page/device
   - Fix floating button (install app / back-to-top) collisions
   - Make grids, carousels, galleries, hotspots fully fluid
   ============================================================ */

/* ---------- 1. GLOBAL OVERFLOW GUARDS ---------- */
/* Use `clip` (not `hidden`) so position:sticky children keep working.
   `overflow-x: hidden` on body breaks sticky positioning in most browsers. */
html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

/* Fallback for browsers without `clip` support. */
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Never let media force a horizontal scrollbar.
   NOTE: `height: auto` is applied only to replaced media (img/video/iframe),
   NOT to inline <svg> icons which rely on their explicit width/height. */
img,
video,
iframe,
canvas {
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%;
}

/* Long unbroken strings (URLs, SKUs) wrap instead of overflowing. */
p, h1, h2, h3, h4, h5, h6, li, a, span, td, th, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Grid/flex children must be allowed to shrink below content size. */
.product-grid > *,
.split-grid > *,
.reviews-layout > *,
.highlight-block > *,
.checkout-layout > *,
.cart-layout > *,
.contact-grid > *,
.why-grid > *,
.footer-grid > *,
.banner-grid > *,
.feature-grid > *,
.icon-grid > *,
.inbox-grid > *,
.stats-grid > *,
.video-grid > * {
    min-width: 0;
}

/* ---------- 2. FLOATING BUTTONS (no overlap) ---------- */
/* All floating buttons share the same right-edge rail and are stacked with a
   fixed gap, so they can never collide with each other or with page content.

   Bottom → top order (desktop):
     back-to-top   bottom: 28px   (48px tall)
     chat bubble   bottom: 90px   (58px tall)
     install FAB   bottom: 162px  (48px tall)

   Each slot is derived from the one below it plus a 14px gap, so the three
   can never overlap even if a button's size changes.

   The chat widget is a self-contained component (assets/css/chat-widget.css)
   that owns its own bubble + panel. Here we only place its bubble on the rail
   and make sure the install FAB sits ABOVE it, so opening the chat can never
   cover the install button. */
.back-to-top {
    z-index: 950;
}

.xs-chat-widget {
    z-index: 960;
}

.pwa-install-btn {
    z-index: 940;
}

/* Desktop rail.
   The install FAB is moved up to the third slot so it clears the chat bubble
   (which now occupies the second slot). Without this the two sat at ~90px and
   overlapped exactly. */
@media (min-width: 769px) {
    .xs-chat-widget {
        /* 48px back-to-top + 28px offset + 14px gap */
        bottom: 90px;
    }

    .pwa-install-btn {
        /* 90px chat slot + 58px bubble + 14px gap */
        bottom: 162px;
    }
}

/* On mobile, stack them vertically above the bottom toolbar with clear gaps. */
@media (max-width: 768px) {
    .back-to-top {
        right: 14px;
        bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 14px);
        width: 46px;
        height: 46px;
    }

    /* Chat widget bubble: one slot above back-to-top.
       (The panel itself is positioned inside chat-widget.css.)
       14px offset + 46px back-to-top + 14px gap = 74px. */
    .xs-chat-widget {
        right: 14px;
        bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 74px);
    }

    .pwa-install-btn {
        right: 14px;
        /* 74px chat slot + 46px bubble + 14px gap = 134px, so the install FAB
           always clears the chat bubble above the bottom toolbar. */
        bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 134px);
        width: 46px;
        height: 46px;
        padding: 0;
    }

    html[dir="rtl"] .back-to-top { right: auto; left: 14px; }
    html[dir="rtl"] .xs-chat-widget { right: auto; left: 14px; }
    html[dir="rtl"] .pwa-install-btn { right: auto; left: 14px; }
}

/* Very small screens: keep the install button as an icon-only circle. */
@media (max-width: 400px) {
    .pwa-install-btn span { display: none; }
    .pwa-install-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

/* ---------- 3. PRODUCT PAGE ---------- */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .product-gallery {
        position: static;
        top: auto;
    }

    .product-info {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    /* Product topbar: stack breadcrumb + nav, keep nav centered. */
    .product-topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .product-prevnext {
        align-self: flex-end;
    }

    .breadcrumbs {
        font-size: .8rem;
        line-height: 1.5;
    }

    /* Gallery: fluid, no fixed aspect that overflows. */
    .gallery-main {
        aspect-ratio: 1 / 1;
        max-width: 100%;
    }

    .gallery-thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .gallery-thumbs::-webkit-scrollbar { display: none; }

    .thumb {
        flex: 0 0 72px;
        width: 72px;
    }

    /* Purchase row: full-width controls. */
    .purchase-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .purchase-row .qty {
        flex: 1 1 100%;
        justify-content: center;
    }

    .purchase-row .cart-btn,
    .purchase-row .buy-btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }

    /* Hotspot tips must never overflow the viewport. */
    .hotspot-stage {
        max-width: 100%;
    }

    .hotspot-tip {
        width: min(260px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
    }

    /* Highlights stack cleanly. */
    .highlight-block {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .highlight-media img {
        width: 100%;
        height: auto;
    }

    /* Reviews summary full width. */
    .rating-summary {
        max-width: 100%;
    }

    /* In-box grid centered and fluid. */
    .inbox-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-title {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
        line-height: 1.25;
    }

    .product-price-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .share-row {
        flex-wrap: wrap;
    }
}

/* ---------- 4. CAROUSELS ---------- */
/* NOTE: do NOT set a global `flex` on .carousel-track > * here — that would
   override the desktop `flex: 0 0 calc(25% - 16.5px)` in styles.css and make
   one card huge. Only adjust flex-basis inside media queries. */
.carousel {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel-track {
    display: flex;
    gap: 22px;
    min-width: 0;
}

@media (max-width: 1200px) {
    .carousel-track > * {
        flex-basis: calc(33.333% - 14.67px);
    }
}

@media (max-width: 992px) {
    .carousel-track > * {
        flex-basis: calc(50% - 11px);
    }
}

@media (max-width: 640px) {
    .carousel-track > * {
        flex-basis: calc(85% - 11px);
    }

    #reviewCarousel .carousel-track > * {
        flex-basis: calc(100% - 0px);
    }

    /* Carousel controls: keep them visible and tappable. */
    .carousel-controls {
        gap: 12px;
        margin-top: 22px;
    }

    .ctrl-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }
}

/* ---------- 5. HEADER / NAV ---------- */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .header-inner {
        gap: 10px;
    }

    .brand-text .brand-tag {
        display: none;
    }

    .header-actions {
        gap: 6px;
    }

    .cart-btn-header,
    .theme-toggle,
    .menu-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

@media (max-width: 380px) {
    .container { padding: 0 12px; }
    .brand-name { font-size: 1.05rem; }
}

/* ---------- 6. HERO SLIDER ---------- */
/* NOTE: the full mobile slider layout lives in §19 below. This section only
   carries the shared typography/radar tweaks that are safe to apply early. */
@media (max-width: 768px) {
    .slide-title {
        line-height: 1.2;
    }

    .slide-sub {
        font-size: .95rem;
    }

    .slide-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .slide-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .hero-radar {
        opacity: .35;
        transform: scale(.8);
    }
}

/* ---------- 7. SECTIONS / GRIDS ---------- */
@media (max-width: 768px) {
    .section {
        padding: clamp(44px, 10vw, 72px) 0;
    }

    .section-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
        line-height: 1.25;
    }

    .section-head {
        margin-bottom: 26px;
    }

    .banner-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .video-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-grid,
    .why-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 8. COMPARE SLIDER ---------- */
@media (max-width: 768px) {
    .compare-box {
        max-width: 100%;
    }

    .compare-chip {
        font-size: .72rem;
        padding: 5px 10px;
    }

    .compare-hint {
        font-size: .78rem;
    }
}

/* ---------- 9. FORMS / CHECKOUT / CART ---------- */
@media (max-width: 768px) {
    .checkout-grid,
    .review-form-grid,
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-actions {
        flex-direction: column-reverse;
    }

    .checkout-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .cart-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cart-item-name {
        font-size: .88rem;
    }
}

/* ---------- 10. FOOTER ---------- */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .footer-tools {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ---------- 11. TABLES (admin-style content on public pages) ---------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ---------- 12. MODALS / LIGHTBOX ---------- */
@media (max-width: 768px) {
    .lightbox,
    .video-lightbox {
        padding: 12px;
    }

    .lightbox img,
    .video-lightbox-frame iframe {
        max-width: 100%;
        max-height: 80vh;
    }
}

/* ---------- 13. STICKY BUY BAR ---------- */
@media (max-width: 640px) {
    .sticky-buy-inner {
        gap: 10px;
    }

    .sticky-buy-name {
        max-width: 38vw;
    }

    .sticky-buy-actions {
        gap: 6px;
    }

    .sticky-buy-actions .btn {
        padding: 9px 12px;
        font-size: .8rem;
    }
}

/* ---------- 14. TOAST ---------- */
@media (max-width: 768px) {
    .toast {
        left: 14px;
        right: 14px;
        max-width: none;
        text-align: center;
    }
}

/* ---------- 15. iOS INSTALL HINT ---------- */
.pwa-ios-hint {
    position: fixed;
    left: 50%;
    bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 16px);
    transform: translate(-50%, 120%);
    z-index: 960;
    width: min(360px, calc(100vw - 28px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 16px 18px;
    opacity: 0;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}

.pwa-ios-hint.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.pwa-ios-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-ios-body i {
    color: var(--accent);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pwa-ios-body p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}

.pwa-ios-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-ios-close:hover { background: var(--surface-2); color: var(--text); }

/* ---------- 16. PRODUCT TOPBAR + BREADCRUMBS ---------- */
@media (max-width: 768px) {
    .product-topbar {
        padding: 10px 0;
    }

    .breadcrumbs {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .breadcrumbs a,
    .breadcrumbs .crumb-current {
        display: inline;
    }

    /* Long product names in breadcrumb truncate instead of overflowing. */
    .breadcrumbs .crumb-current:last-child {
        display: inline-block;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

/* ---------- 17. HOTSPOT TIPS: clamp to viewport ---------- */
@media (max-width: 768px) {
    .hotspot-tip {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, calc(-100% - 14px)) !important;
        width: min(280px, calc(100vw - 40px)) !important;
        max-width: calc(100vw - 40px) !important;
    }

    .hotspot-tip.open {
        transform: translate(-50%, calc(-100% - 14px)) !important;
    }
}

/* ---------- 18. SAFETY: prevent any stray wide element ---------- */
@media (max-width: 768px) {
    [style*="width:"] {
        max-width: 100% !important;
    }

    /* Any element that still overflows gets clipped rather than scrolling.
       NOTE: only .section/.container are clipped — NOT <main>, because
       clipping <main> would break position:sticky children. */
    .section,
    .container {
        max-width: 100%;
        overflow-x: clip;
    }
}

/* ---------- 19. HERO SLIDER — MOBILE POLISH ---------- */
/* Goal: the slider keeps ONE fixed height on phones so switching slides never
   resizes the hero. The promotional overlay is absolutely positioned inside a
   reserved bottom zone and its image is constrained to FIT that zone (never
   growing the slide, never covering the copy).

   Layout per slide (fixed height):
     ┌───────────────────────────┐
     │  header clearance         │
     │  copy (kicker/title/sub)  │  ← top zone, centered
     │  buttons                  │
     │  ── reserved gap ──       │
     │  overlay image (fit)      │  ← bottom zone, absolutely placed
     └───────────────────────────┘
*/
@media (max-width: 768px) {
    /* Fixed hero height — identical for every slide. */
    .hero {
        min-height: auto;
    }

    .hero-slider,
    .slide,
    .slide.active {
        min-height: min(78svh, 560px);
        min-height: min(78dvh, 560px);
    }

    /* ---- The slide is a single stacking context ----
       The promotional overlay becomes a FULL-BLEED background layer (inset:0)
       and the copy sits on top of it. A dark scrim between the two keeps the
       text readable. The slider height is fixed, so switching slides never
       resizes the hero. */
    .slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(var(--header-height) + 20px) 0 76px;
    }

    /* Transparent header: the bar floats over the slide, so the copy needs
       clearance equal to the header height. The hero itself stays flush with
       the top edge (no padding on .hero) so the artwork reaches the very top. */
    body.has-transparent-header .hero-slider,
    body.has-transparent-header .slide,
    body.has-transparent-header .slide.active {
        min-height: min(88svh, 640px);
        min-height: min(88dvh, 640px);
    }

    body.has-transparent-header .slide {
        padding-top: calc(var(--header-height) + 28px);
    }

    /* Copy sits above the overlay + scrim. The desktop transparent-header rule
       (styles.css) adds its own top padding to .slide-inner; we neutralize it
       here because the slide already carries the header clearance, otherwise
       the copy would be pushed down twice. */
    .slide-inner,
    body.has-transparent-header .hero .slide-inner {
        position: relative;
        z-index: 3;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .slide-content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    /* Kicker: smaller and tighter. */
    .slide-kicker {
        font-size: .68rem;
        padding: 6px 14px;
        margin-bottom: 14px;
        letter-spacing: .08em;
    }

    /* Title: strong but not overwhelming. */
    .slide-title {
        font-size: clamp(1.55rem, 7.2vw, 2.3rem);
        line-height: 1.18;
        margin-bottom: 12px;
    }

    /* Subtitle: readable, constrained width. */
    .slide-sub {
        font-size: .95rem;
        line-height: 1.6;
        max-width: 92%;
        margin: 0 auto 22px;
    }

    /* Buttons: full-width, stacked, easy to tap. */
    .slide-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-width: 340px;
        margin: 0 auto;
    }

    .slide-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }

    /* Radar: subtle background accent, not competing with text. */
    .hero-radar {
        width: min(78vmin, 420px);
        opacity: .28;
        top: 42%;
    }

    /* ---- Promotional overlay: FULL-BLEED background layer ----
       It fills the entire slide (inset:0) and its image is scaled with
       `object-fit: cover` so it always fills the slider edge-to-edge, exactly
       like a background. All position presets collapse to this on phones.

       Scoped to the HOME hero (`.slide`) so the separate about-page slider
       (`.about-slide`) keeps its own desktop-style overlay placement. */
    .slide .slide-overlay--left,
    .slide .slide-overlay--right,
    .slide .slide-overlay--center,
    .slide .slide-overlay--custom,
    [dir="rtl"] .slide .slide-overlay--left,
    [dir="rtl"] .slide .slide-overlay--right,
    [dir="rtl"] .slide .slide-overlay--center,
    [dir="rtl"] .slide .slide-overlay--custom {
        position: absolute;
        inset: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        z-index: 1;
        display: block;
        margin: 0;
    }

    /* The image fills the whole layer, cropping as needed (cover). */
    .slide .slide-overlay img.slide-overlay-img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }

    /* Dark scrim between the image and the copy so the text stays readable
       over any artwork. Sits above the overlay (z-index 2) and below the copy
       (z-index 3). */
    .slide .slide-overlay::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(11, 14, 20, .72) 0%,
            rgba(11, 14, 20, .55) 45%,
            rgba(11, 14, 20, .78) 100%);
    }

    /* Default width when the admin did not set a custom width. */
    .slide .slide-overlay:not([style*="width"]) {
        width: 100%;
    }

    /* Appear animations: a simple fade (no offsets) so the full-bleed layer
       never shifts the layout. */
    .slide .slide-overlay.ov-appear-slide-left,
    .slide .slide-overlay.ov-appear-slide-right,
    .slide .slide-overlay.ov-appear-zoom-in,
    .slide .slide-overlay.ov-appear-fade-zoom,
    .slide .slide-overlay--center.ov-appear-slide-left,
    .slide .slide-overlay--center.ov-appear-slide-right,
    .slide .slide-overlay--center.ov-appear-zoom-in,
    .slide .slide-overlay--center.ov-appear-fade-zoom,
    .slide .slide-overlay--custom.ov-appear-slide-left,
    .slide .slide-overlay--custom.ov-appear-slide-right,
    .slide .slide-overlay--custom.ov-appear-zoom-in,
    .slide .slide-overlay--custom.ov-appear-fade-zoom,
    [dir="rtl"] .slide .slide-overlay.ov-appear-slide-left,
    [dir="rtl"] .slide .slide-overlay.ov-appear-slide-right,
    [dir="rtl"] .slide .slide-overlay--center.ov-appear-slide-left,
    [dir="rtl"] .slide .slide-overlay--center.ov-appear-slide-right,
    [dir="rtl"] .slide .slide-overlay--custom.ov-appear-slide-left,
    [dir="rtl"] .slide .slide-overlay--custom.ov-appear-slide-right {
        transform: none;
    }

    /* Controls: sit at the bottom of the slide, clear of the artwork. */
    .hero-controls {
        bottom: 16px;
        gap: 12px;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
    }
}

/* Very small phones: tighten further. */
@media (max-width: 400px) {
    .hero-slider,
    .slide,
    .slide.active {
        min-height: min(74svh, 500px);
        min-height: min(74dvh, 500px);
    }

    body.has-transparent-header .hero-slider,
    body.has-transparent-header .slide,
    body.has-transparent-header .slide.active {
        min-height: min(84svh, 580px);
        min-height: min(84dvh, 580px);
    }

    .slide-title {
        font-size: clamp(1.4rem, 8vw, 1.9rem);
    }
}

/* Landscape phones: the copy would be too tall for the short viewport, so
   tighten the spacing. The overlay stays full-bleed behind the copy. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .hero-slider,
    .slide,
    .slide.active {
        min-height: min(92svh, 420px);
        min-height: min(92dvh, 420px);
    }

    .slide {
        padding: calc(var(--header-height) + 12px) 20px 64px;
    }

    body.has-transparent-header .slide {
        padding-top: calc(var(--header-height) + 16px);
    }

    .slide-content {
        text-align: left;
    }

    [dir="rtl"] .slide-content {
        text-align: right;
    }

    .slide-title {
        font-size: clamp(1.3rem, 4.5vw, 1.8rem);
    }

    .slide-sub {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .slide-actions {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
        margin: 0;
        justify-content: flex-start;
    }

    .slide-actions .btn {
        width: auto;
    }
}