/**
 * Responsive — tablet (769–1024px) e smartphone (≤768px)
 * Il layout desktop resta invariato.
 */

/* ── Base touch / safe area ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.btn,
.search-btn,
.nav-toggle,
.quantity-btn,
.product-tab-btn,
.category-chip,
.filters-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(18, 160, 215, 0.2);
}

/* Evita zoom automatico su input iOS */
@media (max-width: 768px) {
    input.form-control,
    select.form-control,
    textarea.form-control,
    .search-input {
        font-size: 16px;
    }
}

/* ── Container ── */
@media (max-width: 1024px) {
    .container {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    main .container {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
}

/* ── Top bar ── */
@media (max-width: 768px) {
    .top-bar-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 0.5rem 0.85rem;
        gap: 0.35rem;
    }

    .top-bar-whatsapp {
        font-size: 0.8rem;
        display: block;
        padding: 0.15rem 0;
    }

    .top-bar-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.65rem 1rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 380px) {
    .top-bar-whatsapp {
        font-size: 0.75rem;
    }
}

/* ── Header ── */
@media (max-width: 768px) {
    .header-main {
        padding: 0.75rem 0.85rem;
    }

    .logo-img {
        height: 40px;
        max-width: 140px;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .cart-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
    }

    .search-input {
        padding: 0.7rem 1rem;
    }

    .search-btn {
        min-height: 44px;
        padding: 0 1rem;
    }
}

/* ── Ribbon B2B ── */
@media (max-width: 768px) {
    .ribbon-b2b {
        font-size: 0.78rem;
        padding: 0.45rem 0.85rem;
        line-height: 1.35;
        text-align: center;
    }
}

/* ── Griglia prodotti: 4 desktop · 3 tablet · 2 smartphone ── */
.shop .row {
    margin-left: -8px;
    margin-right: -8px;
}

.shop .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .shop .row > .col-md-3,
    .shop .row > .col-md-4,
    .shop .row > .col-lg-3 {
        width: 33.333%;
    }

    .shop .product-title h3 {
        font-size: 0.88rem;
    }
}

@media (max-width: 768px) {
    .shop .row > .col-md-3,
    .shop .row > .col-md-4,
    .shop .row > .col-lg-3,
    .shop .row > .col-12 {
        width: 50%;
    }

    .shop .product-body {
        padding: 0.75rem;
    }

    .shop .product-title h3 {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .shop .product-price,
    .shop .product-price-slot .product-price {
        font-size: 0.9rem;
    }

    .shop .product-card-action .btn {
        width: 100%;
        min-height: 40px;
        font-size: 0.72rem;
        padding: 0.5rem 0.35rem;
    }

    .shop .product-overlay {
        display: none;
    }
}

@media (max-width: 360px) {
    .shop .row > .col-md-3,
    .shop .row > .col-md-4,
    .shop .row > .col-lg-3,
    .shop .row > .col-12 {
        width: 100%;
    }
}

/* Home widgets prodotti in evidenza */
@media (max-width: 768px) {
    .prodotti-home .col-lg-3 {
        width: 50%;
    }
}

@media (max-width: 360px) {
    .prodotti-home .col-lg-3 {
        width: 100%;
    }
}

/* ── Catalogo / filtri ── */
.filters-toggle {
    display: none;
}

@media (max-width: 768px) {
    .brand-filters[data-collapsible-filters] .brand-filters-heading {
        display: none;
    }

    .page-title h1 {
        font-size: 1.45rem;
        line-height: 1.25;
    }

    .page-subtitle {
        font-size: 0.88rem;
    }

    .shop-toolbar .col-lg-3 {
        width: 100%;
        margin-bottom: 0.65rem;
    }

    .shop-toolbar {
        background: var(--accent-pale, #f5fbfe);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .order-select h6 {
        font-size: 0.82rem;
        margin-bottom: 0.35rem;
    }

    .brand-filters[data-collapsible-filters] .filters-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 0.65rem 1rem;
        margin-bottom: 0.5rem;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--text-primary);
        cursor: pointer;
    }

    .brand-filters[data-collapsible-filters] .filters-toggle::after {
        content: '▾';
        font-size: 0.85rem;
        transition: transform 0.2s ease;
    }

    .brand-filters[data-collapsible-filters].is-open .filters-toggle::after {
        transform: rotate(180deg);
    }

    .brand-filters[data-collapsible-filters]:not(.is-open) .category-chips {
        display: none;
    }

    .brand-filters .category-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        scrollbar-width: thin;
    }

    .brand-filters .category-chip {
        flex-shrink: 0;
    }

    .filter-block .category-chips {
        gap: 0.4rem;
    }

    .catalog-brands,
    .catalog-category-block {
        padding: 1rem;
    }

    .catalog-category-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        font-size: 1.05rem;
    }
}

/* ── Scheda prodotto ── */
@media (max-width: 1024px) {
    .product-detail-title {
        font-size: 1.55rem;
    }

    .product-detail-grid {
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .product-page {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }

    .breadcrumb {
        font-size: 0.78rem;
        flex-wrap: wrap;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .product-detail-title {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .product-detail-info .product-price-box .product-price {
        font-size: 1.35rem;
    }

    .detail-actions-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-actions-inline .quantity-selector {
        justify-content: center;
        width: 100%;
    }

    .detail-actions-inline .btn-bg {
        width: 100%;
        min-height: 48px;
        text-align: center;
        justify-content: center;
    }

    .product-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .product-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .product-tab-btn {
        flex-shrink: 0;
        min-height: 44px;
    }

    .product-image-large {
        min-height: 200px;
        max-height: 320px;
    }

    .product-image-large img {
        max-height: 280px;
        object-fit: contain;
    }
}

/* Barra acquisto fissa su smartphone */
.product-mobile-bar {
    display: none;
}

@media (max-width: 768px) {
    .product-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 20px rgba(18, 160, 215, 0.12);
        backdrop-filter: blur(8px);
    }

    .product-mobile-bar-price {
        font-weight: 800;
        color: var(--accent);
        font-size: 1rem;
        line-height: 1.2;
        min-width: 0;
    }

    .product-mobile-bar-price small {
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .product-mobile-bar .btn-bg {
        flex-shrink: 0;
        min-height: 44px;
        padding: 0.65rem 1.15rem;
        white-space: nowrap;
    }
}

/* ── Carrello ── */
@media (max-width: 768px) {
    main.container > h1 {
        font-size: 1.65rem !important;
        margin-bottom: 1.25rem !important;
    }

    .cart-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cart-item {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.65rem 0.75rem;
        padding: 1rem;
        align-items: start;
    }

    .cart-item-image {
        width: 64px;
        height: 64px;
        grid-row: 1 / 3;
    }

    .cart-item-info {
        grid-column: 2 / 4;
    }

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

    .cart-item .quantity-selector {
        grid-column: 2;
        justify-self: start;
    }

    .cart-item-total {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
        align-self: center;
    }

    .cart-item .btn-danger {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
        min-width: 44px;
        min-height: 44px;
    }

    .cart-summary {
        position: sticky;
        bottom: env(safe-area-inset-bottom);
        z-index: 40;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(18, 160, 215, 0.15);
        margin-left: -0.85rem;
        margin-right: -0.85rem;
        padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .cart-summary .btn-block {
        min-height: 48px;
        font-size: 1rem;
    }
}

/* ── Profilo / auth ── */
@media (max-width: 768px) {
    .profile-page-header {
        flex-direction: column;
        margin: 1.25rem 0 1rem;
    }

    .profile-page-header h1 {
        font-size: 1.65rem;
    }

    .profile-form-card {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

/* ── Footer ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }

    .footer-links-cols {
        columns: 1;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 2rem;
    }

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

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 0.75rem;
    }

    .footer-tagline {
        font-size: 0.9rem;
    }

    .footer-newsletter-mini {
        max-width: 100%;
    }

    .footer-bottom {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        text-align: center;
    }

    .footer-admin {
        margin-top: 0.5rem;
    }
}

/* ── Homepage ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .home-categories-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

    .banners-scroll .banner-card {
        flex: 0 0 calc(40% - 0.7rem);
    }
}

@media (max-width: 768px) {
    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
    }

    .widget-shop .widget-product {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .widget-shop .widget-product .product-image {
        width: 88px;
        min-width: 88px;
        height: 88px;
        flex-shrink: 0;
    }

    .trust-icons-grid {
        gap: 1rem;
    }
}

/* ── Pagine legali / newsletter ── */
@media (max-width: 768px) {
    .legal-page .legal-content {
        padding: 1.25rem 0;
    }

    .legal-content h1 {
        font-size: 1.5rem;
    }

    .legal-content h2 {
        font-size: 1.15rem;
    }

    .newsletter-page-card {
        padding: 1.25rem;
    }
}

/* ── Tabelle overflow ── */
@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}