/* ============================================================
   LUSSO DIGITALE — Responsive Styles
   Mobile-first: base is mobile, enhanced with min-width
   ============================================================ */

/* ------------------------------------------------------------
   Mobile Base (< 576px)
   ------------------------------------------------------------ */
:root {
    --section-pad: 40px;
    --header-height: 70px;
}

.container { padding: 0 20px; }

/* Header */
.header__inner { padding: 0 20px; gap: 16px; }
.header__nav { display: none; }
.header__lang { display: none; }
.header__hamburger { display: flex; }
.header__logo-wordmark { font-size: 1.2rem; }

/* Hero */
.hero__title { font-size: 2.2rem; }
.hero__subtitle { font-size: 0.95rem; }

/* Sections */
.section-title { font-size: 1.8rem; }

/* Categories */
.categories__grid { grid-template-columns: 1fr; gap: 20px; }

/* Products */
.products-grid { grid-template-columns: 1fr; gap: 20px; }
.catalog-grid__inner { grid-template-columns: 1fr; gap: 20px; }

/* Value Strip */
.value-strip__grid { grid-template-columns: 1fr; gap: 30px; }

/* Product Feature */
.product-feature { grid-template-columns: 1fr; }
.product-feature__content { padding: 40px 20px; }
.product-feature__title { font-size: 1.8rem; }

/* Carousel */
.carousel__track { grid-template-columns: 1fr; overflow-x: auto; scroll-snap-type: x mandatory; }
.carousel__track .product-card { scroll-snap-align: start; min-width: 280px; }

/* Brand Story */
.brand-story__quote { font-size: 1.1rem; }
.brand-story__quote-mark { font-size: 4rem; }

/* Newsletter */
.newsletter__form { flex-direction: column; }
.newsletter__input { border-right: 1px solid var(--color-border); }

/* Footer */
.site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
.site-footer__upper { padding: 60px 0 40px; }
.site-footer__lower-inner { flex-direction: column; text-align: center; gap: 16px; }

/* Product Page */
.product-hero { grid-template-columns: 1fr; padding: 20px 0; }
.product-gallery { padding: 0 20px; margin-bottom: 32px; }
.product-info { padding: 0 20px; }
.product-info__name { font-size: 1.8rem; }
.product-gallery__thumbs { gap: 8px; }
.product-gallery__thumb { width: 60px; height: 60px; }

/* Tabs */
.tabs__nav { flex-wrap: wrap; }
.tab-btn { padding: 12px 16px; font-size: 0.75rem; }

/* About */
.story-block { grid-template-columns: 1fr; gap: 32px; }
.story-block--reverse .story-block__image { order: 0; }
.story-block--reverse .story-block__content { order: 0; }
.story-block__image img { height: 250px; }
.values__grid { grid-template-columns: 1fr; gap: 40px; }
.team__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* Editorial */
.editorial-feature { grid-template-columns: 1fr; }
.editorial-feature__content { padding: 40px 20px; }
.articles__grid { grid-template-columns: 1fr; gap: 32px; }

/* Contact */
.contact-grid { grid-template-columns: 1fr; gap: 48px; }

/* Cart */
.cart-grid { grid-template-columns: 1fr; gap: 40px; }
.cart-row { grid-template-columns: 80px 1fr; gap: 16px; }
.cart-row__total { grid-column: 2; }
.cart-row__image { width: 80px; height: 80px; }

/* Cart Drawer */
.cart-drawer__panel { width: 100%; }

/* New Arrivals header */
.new-arrivals__header { flex-direction: column; align-items: flex-start; gap: 8px; }

/* Page Hero */
.page-hero__title { font-size: 2rem; }

/* Brand bar */
.brand-bar__logos { gap: 30px; }

/* Mobile menu */
.mobile-menu__link { font-size: 1.6rem; }

/* Legal */
.legal-header { padding: 40px 0; }
.legal-content { padding: 40px 0 60px; }

/* Product card footer */
.product-card__footer { flex-direction: column; align-items: flex-start; }
.product-card__add-btn { width: 100%; text-align: center; }

/* ============================================================
   Large Mobile (min-width: 576px)
   ============================================================ */
@media (min-width: 576px) {
    :root { --section-pad: 60px; }

    .container { padding: 0 30px; }

    .hero__title { font-size: 2.8rem; }
    .categories__grid { grid-template-columns: repeat(2, 1fr); }
    .value-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .articles__grid { grid-template-columns: repeat(2, 1fr); }
    .cart-row { grid-template-columns: 100px 1fr auto; }
}

/* ============================================================
   Tablet Portrait (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
    :root { --section-pad: 80px; }

    .container { padding: 0 40px; }
    .header__inner { padding: 0 40px; }

    .hero__title { font-size: 3.2rem; }

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

    .product-feature { grid-template-columns: 1fr 1fr; }
    .product-feature__content { padding: 60px 40px; }

    .editorial-feature { grid-template-columns: 1fr 1fr; }
    .editorial-feature__content { padding: 60px 40px; }

    .contact-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

    .stats__grid { grid-template-columns: repeat(4, 1fr); }

    .team__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    .cart-grid { grid-template-columns: 65fr 35fr; gap: 40px; }
    .cart-row { grid-template-columns: 100px 1fr auto auto; }

    .carousel__track { grid-template-columns: repeat(2, 1fr); }

    .newsletter__form { flex-direction: row; }
    .newsletter__input { border-right: none; }

    .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ============================================================
   Tablet Landscape (min-width: 992px)
   ============================================================ */
@media (min-width: 992px) {
    :root { --header-height: 80px; }

    .header__nav { display: flex; }
    .header__hamburger { display: none; }
    .header__lang { display: block; }

    .hero__title { font-size: 3.8rem; }

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

    .value-strip__grid { grid-template-columns: repeat(4, 1fr); }
    .values__grid { grid-template-columns: repeat(3, 1fr); }
    .team__grid { grid-template-columns: repeat(4, 1fr); }

    .story-block { grid-template-columns: 1fr 1fr; }
    .story-block__image img { height: 400px; }
    .story-block--reverse .story-block__image { order: 2; }
    .story-block--reverse .story-block__content { order: 1; }

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

    .product-hero { grid-template-columns: 55fr 45fr; }
    .product-gallery { padding: 0 40px 0 60px; }
    .product-info { padding: 0 60px 0 40px; }

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

    .brand-bar__logos { flex-wrap: nowrap; gap: 50px; }

    .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; }
    .site-footer__lower-inner { flex-direction: row; }
}

/* ============================================================
   Desktop (min-width: 1200px)
   ============================================================ */
@media (min-width: 1200px) {
    :root { --section-pad: 100px; }

    .hero__title { font-size: 4rem; }
    .section-title { font-size: var(--fs-h2); }

    .container { padding: 0 40px; }

    .carousel__track { grid-template-columns: repeat(4, 1fr); }

    .product-feature__title { font-size: 2.5rem; }
    .product-feature__content { padding: 80px; }

    .editorial-feature__content { padding: 80px; }
}

/* ============================================================
   Large Desktop (min-width: 1400px)
   ============================================================ */
@media (min-width: 1400px) {
    .container { max-width: var(--max-width); }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .cart-drawer,
    .search-overlay,
    .mobile-menu,
    .btn { display: none; }

    body { font-size: 12pt; color: #000; }
    a { color: #000; }
}