/**
 * Ferozzi Theme — Responsive Breakpoint System
 * Mobile-first responsive styles for all viewport widths 320px–2560px
 *
 * Breakpoints:
 *   sm: 480px  — Large phones / landscape
 *   md: 768px  — Tablets
 *   lg: 1024px — Small desktops / landscape tablets
 *   xl: 1440px — Large desktops
 */

/* ==========================================================================
   1. Breakpoint Custom Properties
   ========================================================================== */

:root {
    --fz-bp-sm: 480px;
    --fz-bp-md: 768px;
    --fz-bp-lg: 1024px;
    --fz-bp-xl: 1440px;
}

/* ==========================================================================
   2. Base Responsive Styles
   ========================================================================== */

body {
    font-size: clamp(14px, 1rem, 18px);
    line-height: 1.4;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   3. Tap Target Minimum Sizes (44×44px)
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.fz-btn,
[role="button"] {
    min-width: 44px;
    min-height: 44px;
}

nav a,
nav button,
.fz-header__nav a,
.fz-drawer__nav a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Cart drawer interactive controls */
.fz-cart-drawer__qty-btn,
.fz-cart-drawer__remove,
.fz-cart-drawer button {
    min-width: 44px;
    min-height: 44px;
}

/* ==========================================================================
   4. Small (≥480px)
   ========================================================================== */

@media (min-width: 480px) {
    .fz-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   5. Medium (≥768px)
   ========================================================================== */

@media (min-width: 768px) {
    .fz-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ==========================================================================
   6. Large (≥1024px)
   ========================================================================== */

@media (min-width: 1024px) {
    .fz-container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   7. Extra Large (≥1440px)
   ========================================================================== */

@media (min-width: 1440px) {
    .fz-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ==========================================================================
   8. Cart Drawer — Full Width Below 768px
   ========================================================================== */

@media (max-width: 767px) {
    .fz-cart-drawer,
    .fz-cart-drawer__panel {
        width: 100vw;
        max-width: 100vw;
    }

    .fz-cart-drawer__qty-btn,
    .fz-cart-drawer__remove,
    .fz-cart-drawer button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* ==========================================================================
   9. Header / Off-Canvas Navigation
   ========================================================================== */

@media (max-width: 1023px) {
    .fz-header__nav-desktop,
    .fz-header__nav,
    .fz-nav {
        display: none;
    }

    .fz-header__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 1024px) {
    .fz-header__hamburger {
        display: none;
    }

    .fz-drawer {
        display: none;
    }
}

/* ==========================================================================
   10. PDP Mobile — Gallery Stack & Sticky Bar
   ========================================================================== */

@media (max-width: 767px) {
    .fz-pdp__gallery,
    .fz-pdp__gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Legacy mobile bar removed — use #fz-sticky-bar from sticky-bar.php */
    .fz-pdp__sticky-bar {
        display: none !important;
    }

    body.single-product .fz-main.fz-pdp {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .fz-sticky-bar {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .fz-sticky-bar__inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .fz-sticky-bar__price {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fz-sticky-bar__price .price {
        display: inline;
        white-space: nowrap;
    }

    .fz-pdp__accordion {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .fz-pdp__sticky-bar {
        display: none;
    }

    .fz-pdp__accordion {
        display: none;
    }
}

/* ==========================================================================
   11. PLP Mobile — 2-Column Grid & Filter Drawer
   ========================================================================== */

@media (max-width: 767px) {
    .fz-plp__grid,
    .fz-product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .fz-plp__filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .fz-plp__filter-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85vw;
        max-width: 320px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .fz-plp__filter-drawer.is-open {
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
    .fz-plp__filter-toggle {
        display: none;
    }

    .fz-plp__filter-drawer {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   12. Prevent Horizontal Overflow at All Viewports
   ========================================================================== */

html {
    overflow-x: hidden;
}

.fz-container,
.fz-section,
main,
[role="main"] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}