/* ============================================================
   responsive.css — Mobile-first responsive behaviour
   Target widths: 320 / 375 / 390 / 414 / 430 / 508 / 600 /
                  768 / 992 / 1200 / 1440+
   No horizontal overflow is allowed.
   ============================================================ */

/* ---------- Large desktop ---------- */
@media (min-width: 1440px) {
    :root {
        --container: 1380px;
    }
}

/* ---------- Desktop (default nav) ---------- */
@media (max-width: 1200px) {
    .main-nav__list {
        gap: 18px;
    }

    .main-nav__link {
        font-size: 0.8rem;
    }

    .header-right {
        gap: 8px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-col--newsletter {
        grid-column: span 2;
    }
}

/* ---------- Tablet → mobile switch point ---------- */
@media (max-width: 992px) {
    .main-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }

    .header-logo {
        justify-self: center;
    }

    .header-logo__text {
        font-size: 1.4rem;
    }

    .header-account,
    .header-currency {
        display: none;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 768px) {
    :root {
        --header-height: 68px;
    }

    .container {
        padding-inline: 18px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }

    .footer-col--brand {
        grid-column: span 2;
        max-width: none;
    }

    .footer-col--newsletter {
        grid-column: span 2;
    }

    .footer-bottom__inner {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 508px) {
    .icon-btn {
        width: 36px;
        height: 36px;
        font-size: 1.02rem;
    }

    .header-right {
        gap: 2px;
    }

    .header-logo__text {
        font-size: 1.2rem;
    }

    .header-logo__img {
        max-height: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col--brand,
    .footer-col--newsletter {
        grid-column: span 1;
    }

    .footer-newsletter {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .footer-newsletter__btn {
        width: 100%;
        border-radius: var(--radius-md);
    }

    .btn {
        padding: 0.85rem 1.6rem;
        font-size: 0.76rem;
    }

    .flash-container {
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 375px) {
    .container {
        padding-inline: 14px;
    }

    .header-inner {
        gap: 6px;
    }

    .header-logo__text {
        font-size: 1.08rem;
    }

    .search-overlay__panel {
        width: 94vw;
    }

    .mobile-menu__nav a {
        font-size: 1.3rem;
    }
}

/* ---------- Very narrow (320px) ---------- */
@media (max-width: 340px) {
    .header-right .icon-btn:nth-of-type(2) {
        display: none; /* wishlist moves into the mobile menu */
    }

    .header-logo__text {
        font-size: 1rem;
    }
}

/* ---------- Landscape & short screens ---------- */
@media (max-height: 520px) {
    .mobile-menu__nav a {
        padding-block: 0.55rem;
        font-size: 1.15rem;
    }

    .mobile-menu {
        padding-bottom: 2rem;
    }
}

/* ---------- Account area ---------- */
@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 0.7rem;
    }

    .account-nav__user {
        flex-basis: 100%;
        margin-bottom: 0.4rem;
    }

    .account-nav__title {
        display: none;
    }

    .account-nav a {
        padding: 0.5rem 0.8rem;
        font-size: 0.88rem;
    }

    .account-nav__signout {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

@media (max-width: 768px) {
    .account-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .account-stats {
        grid-template-columns: 1fr;
    }

    .order-row__total {
        width: 100%;
        text-align: left;
    }
}

/* ---------- Shop filters (mobile) ---------- */
@media (max-width: 768px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-filters {
        position: static;
        display: none;
    }

    .shop-filters.is-open {
        display: block;
    }

    .filter-toggle {
        display: inline-flex;
    }
}

/* ---------- Homepage ---------- */
@media (max-width: 992px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__media {
        justify-self: center;
        max-width: 400px;
        width: 100%;
    }

    .hero__float {
        left: 12px;
    }

    .brand-section__inner {
        grid-template-columns: 1fr;
    }

    .brand-section__media {
        max-width: 520px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    .category-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    .category-card:nth-child(2) { grid-column: span 1; grid-row: span 1; }
    .category-card:nth-child(3) { grid-column: span 1; grid-row: span 1; }
    .category-card:nth-child(4) { grid-column: span 1; grid-row: span 1; }
    .category-card:nth-child(5) { grid-column: span 1; grid-row: span 1; }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
    }

    .brand-section__stats {
        gap: 1.6rem;
    }

    .newsletter-form__row {
        flex-direction: column;
        border-radius: var(--radius-md);
        padding: 12px;
    }

    .newsletter-form__input {
        padding: 8px 10px;
    }

    .newsletter-form__row .btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .categories-grid {
        grid-auto-rows: 130px;
        gap: 12px;
    }

    .category-card__body h3 {
        font-size: 1.15rem;
    }

    .category-card__body {
        left: 14px;
        bottom: 12px;
        right: 14px;
    }

    .hero__title {
        font-size: 2.1rem;
    }

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

@media (max-width: 340px) {
    .products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
    }
}

/* ---------- Product detail page ---------- */

/* Tablet */
@media (max-width: 992px) {
    .product-gallery__main img {
        aspect-ratio: 4 / 5;
    }

    .product-form__actions {
        gap: 8px;
    }

    .tabs__panel {
        padding-block: 1.4rem;
    }
}

/* Tablet small */
@media (max-width: 768px) {
    .product-gallery__thumbs {
        gap: 8px;
    }

    .product-info__title {
        font-size: clamp(1.35rem, 3.5vw, 1.7rem);
    }

    .product-form__actions .btn {
        min-height: 46px;
    }

    .product-meta__row {
        font-size: 0.82rem;
        gap: 10px;
    }

    .product-trust {
        font-size: 0.78rem;
        gap: 12px;
    }

    .tabs__btn {
        font-size: 0.92rem;
        padding: 0.9rem 0.2rem;
    }

    .review-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-form {
        padding: 1.2rem;
    }

    .related .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .related__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Small phones */
@media (max-width: 508px) {
    .product-gallery__thumbs {
        gap: 6px;
    }

    .product-gallery__thumb {
        aspect-ratio: 1 / 1;
    }

    .product-info__title {
        font-size: 1.35rem;
    }

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

    .product-price__now {
        font-size: 1.4rem;
    }

    .product-form__row {
        grid-template-columns: 1fr;
    }

    .product-form__actions {
        flex-wrap: wrap;
    }

    .product-form__actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 46px;
    }

    .product-form__actions .wishlist-btn {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
    }

    .product-trust {
        flex-direction: column;
        gap: 8px;
    }

    .tabs__nav {
        gap: 1.2rem;
    }

    .tabs__btn {
        font-size: 0.85rem;
        padding: 0.8rem 0;
    }
}

/* Narrow phones */
@media (max-width: 375px) {
    .product-gallery__thumbs {
        gap: 5px;
    }

    .product-info__title {
        font-size: 1.2rem;
    }

    .product-form__actions .btn {
        flex: 1 1 100%;
    }

    .product-form__actions .wishlist-btn {
        flex: 0 0 100%;
        width: 100%;
        height: 44px;
    }

    .product-form__qty {
        height: 44px;
    }

    .product-form__qty button {
        width: 44px;
    }

    .product-form select.form-control {
        height: 44px;
    }

    .review-form {
        padding: 1rem;
    }
}

/* ---------- Print ---------- */
@media print {
    .promo-bar,
    .site-header,
    .mobile-menu,
    .nav-overlay,
    .search-overlay,
    .site-footer {
        display: none !important;
    }

    body {
        background: #fff;
    }
}