/**
 * Happy Plants — responsive styles (single source of truth).
 * All @media blocks live here. Individual CSS files have none.
 * Breakpoints: 1024px, 900px, 860px, 768px, 600px, 520px
 */

/* ── Large tablet (≤1024px) ── */
@media (max-width: 1024px) {
    .hp-single-product__grid {
        grid-template-columns: 55% 45%;
    }
    .hp-shop__layout {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: clamp(20px, 3vw, 36px);
    }
    .hp-shop-sidebar {
        width: 160px;
    }
}

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
    /* Single product */
    .hp-single-product__grid {
        grid-template-columns: 1fr !important;
    }
    .hp-single-product__media-col {
        position: relative !important;
        top: auto !important;
        min-height: 300px !important;
        max-height: 420px !important;
        width: 100% !important;
    }
    .hp-single-product__main-image-img {
        max-height: 350px !important;
    }
    .hp-single-product__panel {
        padding: 20px 16px !important;
        border-left: none !important;
    }
    .hp-single-product__care-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hp-single-product__pairs .hp-single-product__product-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Shop */
    .hp-shop__layout {
        grid-template-columns: 1fr;
    }
    .hp-shop-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    .hp-shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Homepage */
    .hp-featured__loop--cols-4 .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer */
    .hp-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Header mobile (≤860px) ── */
@media (max-width: 860px) {
    :root {
        --hp-topbar-height: 36px;
        --hp-header-height: 80px;
        --hp-nav-height: 36px;
    }
    body {
        font-size: 14px;
    }
    .site-content .col-full,
    #primary,
    #main,
    .site-main,
    .entry-content,
    .woocommerce,
    .woocommerce-page .woocommerce,
    .woocommerce-account .woocommerce {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    #primary .entry-content,
    .woocommerce-account .woocommerce {
        padding: 16px !important;
    }
    .home #primary .entry-content,
    .archive.woocommerce #primary .entry-content,
    .single-product #primary .entry-content,
    .woocommerce-cart #primary .entry-content,
    .woocommerce-checkout #primary .entry-content,
    .woocommerce-order-pay #primary .entry-content,
    .woocommerce-order-received #primary .entry-content {
        padding: 0 !important;
    }
    .site-main {
        margin-bottom: 28px !important;
    }
    .hp-topbar {
        font-size: 8px !important;
        padding: 4px 8px !important;
        letter-spacing: 0.03em !important;
    }
    .hp-header__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 4px 10px;
        gap: 4px;
    }
    .hp-header__logo {
        order: 1;
        flex: 0 0 100%;
        text-align: center;
    }
    .hp-header__logo-img {
        height: auto !important;
        width: clamp(280px, 88vw, 520px) !important;
        max-width: none !important;
        max-height: 74px !important;
        transform: none !important;
    }
    .hp-header__left {
        display: none;
    }
    .hp-header__right {
        order: 2;
        flex: 0 0 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
    }
    .hp-header__link,
    .hp-header__search--inline {
        font-size: 10px;
    }
    .hp-header__search--inline {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
    .hp-header__search-field {
        width: 100%;
        max-width: none;
        padding: 8px 10px;
    }
    .hp-nav {
        padding: 0 10px !important;
    }
    .hp-nav .hp-nav__menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hp-nav .hp-nav__list {
        flex-wrap: nowrap;
        min-width: max-content;
    }
    .hp-nav .hp-nav__list > li > a {
        padding: 10px 10px;
        font-size: 10px;
    }
}

/* ── Tablet/Mobile (≤768px) ── */
@media (max-width: 768px) {
    /* Homepage banner — full width, overlay arrows, dots only (no scrollbar) */
    .hp-banner-hero__inner {
        padding: 0 clamp(8px, 3vw, 16px);
    }
    .hp-banner-hero__track {
        gap: 12px;
        scroll-padding-inline: 8px;
    }
    .hp-banner-hero__slide {
        flex: 0 0 min(78vw, 340px);
        width: min(78vw, 340px);
    }
    .hp-banner-hero__nav {
        width: 42px;
        height: 42px;
    }
    .hp-banner-hero__nav--overlay {
        top: clamp(100px, 32vw, 180px);
    }
    .hp-banner-hero__nav--overlay.hp-banner-hero__nav--prev {
        left: 2px;
    }
    .hp-banner-hero__nav--overlay.hp-banner-hero__nav--next {
        right: 2px;
    }
    .hp-banner-hero__caption {
        padding: 14px;
    }
    .hp-banner-hero__title {
        font-size: 26px;
    }
    .hp-banner-hero__narration {
        font-size: 13px;
    }

    /* Section headers */
    .hp-section-header {
        padding: 0 24px 12px;
        margin-top: 32px;
    }

    /* Featured products */
    .hp-featured {
        padding-bottom: 32px;
    }
    .hp-featured__loop.hp-featured__loop--cols-4,
    .hp-featured__empty {
        padding-left: 24px;
        padding-right: 24px;
    }
    .hp-featured__loop--cols-4 ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Filter strip */
    .hp-filter-strip {
        padding: 10px 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hp-filter-strip__list {
        flex-wrap: nowrap;
    }
    .hp-filter-strip::-webkit-scrollbar {
        height: 0;
    }

    /* Editorial */
    .hp-editorial__inner {
        grid-template-columns: 1fr;
    }
    .hp-editorial__column--visual {
        min-height: 200px;
        order: 1;
    }
    .hp-editorial__column--content {
        padding: 32px 24px;
        order: 2;
    }

    /* Plant finder */
    .hp-plant-finder {
        padding: 40px 24px;
    }
    .hp-plant-finder__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hp-plant-finder__heading {
        font-size: 26px;
    }

    /* Easy care */
    .hp-easy-care__empty {
        padding: 0 24px;
    }

    /* Single product */
    .hp-single-product__grid {
        grid-template-columns: 1fr !important;
    }
    .hp-single-product__media-col {
        min-height: 320px !important;
        padding: 16px !important;
        width: 100% !important;
    }
    .hp-single-product__media-inner {
        max-width: 100% !important;
        width: 100% !important;
    }
    .hp-single-product__main-image {
        flex: 1 !important;
    }
    .hp-single-product__thumbs-col {
        flex-direction: row !important;
        flex-wrap: wrap;
        order: 2;
    }
    .hp-single-product__thumbs-col .hp-single-product__thumbs-item {
        width: 48px !important;
        height: 48px !important;
    }
    .hp-single-product__panel {
        padding: 20px 16px !important;
        border-left: none !important;
    }
    .hp-single-product__care-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hp-single-product__title {
        font-size: 24px !important;
    }

    /* Footer */
    .hp-footer {
        padding: 36px 16px 0;
    }
    .hp-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
    :root {
        --hp-topbar-height: 40px;
        --hp-header-height: 72px;
        --hp-nav-height: 34px;
    }
    .hp-breadcrumb--strip,
    nav.woocommerce-breadcrumb.hp-breadcrumb--strip {
        padding: 8px 16px;
    }

    /* Header */
    .hp-header__inner {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px 8px;
    }
    .hp-header__left {
        display: none;
    }
    .hp-header__right .hp-header__link--account,
    .hp-header__right .hp-header__link--wishlist,
    .hp-header__right .hp-header__link--checkout {
        display: none;
    }
    .hp-header__logo {
        order: 1;
        width: 100%;
        text-align: center;
    }
    .hp-header__logo-img {
        width: clamp(240px, 92vw, 420px) !important;
        max-width: none !important;
        max-height: 64px !important;
    }

    /* Homepage banner */
    .hp-banner-hero__inner {
        padding: 0 6px;
    }
    .hp-banner-hero__slide {
        flex: 0 0 min(84vw, 320px);
        width: min(84vw, 320px);
    }
    .hp-banner-hero__nav--overlay {
        top: clamp(88px, 36vw, 150px);
    }
    .hp-banner-hero__title {
        font-size: 22px;
    }

    /* Filter strip */
    .hp-filter-strip__list {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Products */
    .hp-featured__loop--cols-4 .products,
    .hp-easy-care__loop .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Editorial */
    .hp-editorial__inner {
        grid-template-columns: 1fr;
    }
    .hp-editorial__column--visual {
        display: none;
    }

    /* Plant finder */
    .hp-plant-finder__inner {
        grid-template-columns: 1fr;
    }
    .hp-plant-finder__column--stats {
        display: none;
    }

    /* Single product */
    .hp-single-product__grid {
        grid-template-columns: 1fr !important;
    }
    .hp-single-product__thumbs-col {
        flex-direction: row !important;
        flex: 0 0 auto !important;
    }
    .hp-single-product__thumbs-col .hp-single-product__thumbs-item {
        width: 44px !important;
        height: 44px !important;
    }

    /* Shop */
    .hp-shop__layout {
        display: flex;
        flex-direction: column;
    }
    .hp-shop-sidebar {
        display: none;
    }
    .hp-shop-main {
        width: 100%;
    }

    /* Footer */
    .hp-footer__inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .hp-footer__col--newsletter {
        width: 100%;
    }
    .hp-footer {
        padding: 28px 14px 0;
    }
    .hp-footer__col,
    .hp-footer__brand,
    .hp-footer__heading,
    .hp-footer__links,
    .hp-footer__copy {
        text-align: left;
    }

    /* Account */
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }
    .woocommerce-MyAccount-navigation {
        width: 100%;
        margin-bottom: 20px;
    }
    .woocommerce ul.products,
    ul.products {
        margin: 0 !important;
        padding: 0 12px 12px !important;
    }
    .woocommerce ul.products li.product,
    ul.products li.product {
        margin-bottom: 12px !important;
    }
    .woocommerce-cart .cart,
    .woocommerce-checkout form.checkout,
    .woocommerce table.shop_table,
    .woocommerce-page table.shop_table {
        font-size: 13px;
    }
    h1 {
        font-size: clamp(24px, 7vw, 32px);
    }
    h2 {
        font-size: clamp(20px, 6vw, 28px);
    }
}

/* ── Small mobile (≤520px) ── */
@media (max-width: 520px) {
    .hp-single-product__care-row {
        grid-template-columns: 1fr !important;
    }
}