/* ============================================================
   INOX GLOBAL — Variabili condivise "Industrial Luxe"
   Generato da: home.zip, landing.zip, prodotto.zip, shop.zip
   Design System: Industrial Luxe (CateringPro Elite)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=Inter:wght@400;700&display=swap');

:root {
    /* ── Colori principali ── */
    --inox-primary:            #a10412;
    --inox-primary-action:     #dc3935;   /* Precision Red – CTA / bottoni */
    --inox-primary-container:  #c42727;
    --inox-on-primary:         #ffffff;

    --inox-secondary:          #9e403a;
    --inox-secondary-container:#fd8a80;
    --inox-on-secondary:       #ffffff;

    --inox-tertiary:           #00547b;
    --inox-tertiary-container: #006d9e;   /* Deep Industrial Blue */
    --inox-on-tertiary:        #ffffff;

    /* ── Superfici ── */
    --inox-bg:                 #fff8f7;
    --inox-surface:            #fff8f7;
    --inox-surface-low:        #fff0ee;
    --inox-surface-container:  #ffe9e6;
    --inox-surface-high:       #ffe2de;
    --inox-surface-highest:    #f9dcd8;
    --inox-surface-white:      #ffffff;
    --inox-surface-dim:        #f0d4d0;
    --inox-surface-dark:       #3e2c2a;   /* Inverse Surface */

    /* ── Testi ── */
    --inox-text:               #271816;
    --inox-text-muted:         #5b403d;
    --inox-text-on-dark:       #ffedea;

    /* ── Bordi ── */
    --inox-outline:            #8f706c;   /* Cool Stone */
    --inox-outline-variant:    #e3beba;

    /* ── Tipografia ── */
    --inox-font-head:          'Hanken Grotesk', sans-serif;
    --inox-font-body:          'Inter', sans-serif;

    /* ── Bordi arrotondati ── */
    --inox-radius-sm:          0.25rem;
    --inox-radius:             0.5rem;    /* bottoni, input */
    --inox-radius-md:          0.75rem;
    --inox-radius-lg:          1rem;      /* card, moduli hero */
    --inox-radius-xl:          1.5rem;
    --inox-radius-full:        9999px;    /* chip / badge */

    /* ── Ombre ── */
    --inox-shadow-card:        0px 10px 30px rgba(137, 114, 111, 0.08);
    --inox-shadow-hover:       0px 20px 50px rgba(137, 114, 111, 0.16);

    /* ── Glassmorphism ── */
    --inox-glass-bg:           rgba(255, 255, 255, 0.8);
    --inox-glass-blur:         12px;

    /* ── Spaziatura ── */
    --inox-container-max:      1440px;
    --inox-gutter:             24px;
    --inox-margin-desktop:     64px;
    --inox-margin-tablet:      32px;
    --inox-margin-mobile:      20px;
    --inox-section-gap:        120px;
    --inox-gap:                24px;
}

/* ── Reset base ── */
.inox-widget * { box-sizing: border-box; }

/* ── Container ── */
.inox-container {
    max-width: var(--inox-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--inox-gutter);
    padding-right: var(--inox-gutter);
}

/* ── Tipografia ── */
.inox-display-lg {
    font-family: var(--inox-font-head);
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: -0.02em;
}
.inox-headline-lg {
    font-family: var(--inox-font-head);
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
    letter-spacing: -0.01em;
}
.inox-headline-md {
    font-family: var(--inox-font-head);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
}
.inox-headline-sm {
    font-family: var(--inox-font-head);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}
.inox-body-lg { font-family: var(--inox-font-body); font-size: 18px; font-weight: 400; line-height: 28px; }
.inox-body-md { font-family: var(--inox-font-body); font-size: 16px; font-weight: 400; line-height: 24px; }
.inox-body-sm { font-family: var(--inox-font-body); font-size: 14px; font-weight: 400; line-height: 20px; }
.inox-label-caps {
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Bottoni ── */
.inox-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--inox-primary-action);
    color: var(--inox-on-primary);
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: var(--inox-radius);
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
    text-decoration: none;
}
.inox-btn-primary:hover  { filter: brightness(1.1); }
.inox-btn-primary:active { transform: scale(0.95); }

.inox-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--inox-outline);
    border: 1px solid var(--inox-outline);
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: var(--inox-radius);
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}
.inox-btn-secondary:hover { background: rgba(137,114,111,0.08); }

.inox-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--inox-tertiary-container);
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}
.inox-btn-ghost:hover { text-decoration: underline; }

/* ── Card prodotto ── */
.inox-product-card {
    background: var(--inox-surface-white);
    border: 1px solid var(--inox-outline-variant);
    border-radius: var(--inox-radius-lg);
    overflow: hidden;
    box-shadow: var(--inox-shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
}
.inox-product-card:hover {
    box-shadow: var(--inox-shadow-hover);
    transform: translateY(-4px);
}
.inox-product-card .inox-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.inox-product-card .inox-card-body { padding: 20px; }
.inox-product-card .inox-quick-add {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    background: var(--inox-glass-bg);
    backdrop-filter: blur(var(--inox-glass-blur));
    border: 1px solid var(--inox-outline-variant);
    border-radius: var(--inox-radius);
    padding: 8px 20px;
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.inox-product-card:hover .inox-quick-add {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Badge chip ── */
.inox-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--inox-radius-full);
    font-family: var(--inox-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.inox-chip-primary { background: var(--inox-surface-container); color: var(--inox-primary); }
.inox-chip-tertiary { background: rgba(0,109,158,0.1); color: var(--inox-tertiary-container); }
.inox-chip-success  { background: rgba(0,130,80,0.1); color: #007d4e; }

/* ── Input/Select ── */
.inox-input {
    width: 100%;
    border: 1px solid var(--inox-outline);
    border-radius: var(--inox-radius);
    padding: 12px 16px;
    font-family: var(--inox-font-body);
    font-size: 16px;
    background: var(--inox-surface-white);
    color: var(--inox-text);
    transition: border-color 0.2s ease;
    outline: none;
}
.inox-input:focus { border-color: var(--inox-primary-action); }

/* ── Glass panel ── */
.inox-glass {
    background: var(--inox-glass-bg);
    backdrop-filter: blur(var(--inox-glass-blur));
    -webkit-backdrop-filter: blur(var(--inox-glass-blur));
    border: 1px solid rgba(255,255,255,0.3);
}

/* ── Sezione dark ── */
.inox-section-dark {
    background: var(--inox-surface-dark);
    color: var(--inox-text-on-dark);
}

/* ── Hero overlay ── */
.inox-hero-overlay {
    background: linear-gradient(to bottom, rgba(39,24,22,0.4) 0%, rgba(39,24,22,0.8) 100%);
}

/* ── Responsive typography ── */
@media (max-width: 768px) {
    .inox-display-lg  { font-size: 40px; line-height: 48px; }
    .inox-headline-lg { font-size: 32px; line-height: 40px; }
    .inox-headline-md { font-size: 24px; line-height: 32px; }
    :root { --inox-section-gap: 64px; }
}

/* ── Footer grid ── */
.inox-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inox-gap);
}
@media (max-width: 1024px) { .inox-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .inox-footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INOX RESPONSIVE MOBILE — Miglioramenti v1.1
   ============================================================ */

/* ── Header responsive ── */
.inox-nav-desktop { display: flex; }
.inox-hamburger   { display: none !important; }

@media (max-width: 900px) {
    /* Mostra hamburger, nascondi nav desktop */
    .inox-nav-desktop           { display: none !important; }
    .inox-hamburger             { display: flex !important; }
    /* Nascondi testo CTA header su tablet/mobile, mostra solo su desktop */
    .inox-header-actions .inox-cta-btn { display: none; }
    /* Header inner height ridotta */
    .inox-header-inner          { height: 64px !important; }
}

@media (max-width: 640px) {
    /* Testo brand: dimensioni ridotte */
    .inox-brand .inox-headline-md { font-size: 20px !important; line-height: 28px !important; }
}

/* ── Mobile drawer nav links ── */
.inox-nav-list-mobile li a:hover { color: var(--inox-primary-action) !important; }

/* ── Griglia prodotti responsive ── */
.inox-products-grid {
    display: grid;
    gap: var(--inox-gap);
}
.inox-products-grid.inox-cols-4 { grid-template-columns: repeat(4, 1fr); }
.inox-products-grid.inox-cols-3 { grid-template-columns: repeat(3, 1fr); }
.inox-products-grid.inox-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
    .inox-products-grid.inox-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .inox-products-grid.inox-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .inox-products-grid.inox-cols-4,
    .inox-products-grid.inox-cols-3,
    .inox-products-grid.inox-cols-2 { grid-template-columns: 1fr; }
}

/* ── Hero responsive ── */
.inox-hero-content {
    padding-left: var(--inox-margin-desktop);
    padding-right: var(--inox-margin-desktop);
}
@media (max-width: 1024px) {
    .inox-hero-content {
        padding-left: var(--inox-margin-tablet);
        padding-right: var(--inox-margin-tablet);
    }
}
@media (max-width: 640px) {
    .inox-hero-content {
        padding-left: var(--inox-margin-mobile);
        padding-right: var(--inox-margin-mobile);
        text-align: center;
    }
}

/* ── Sezioni: padding verticale responsive ── */
.inox-section {
    padding-top: var(--inox-section-gap);
    padding-bottom: var(--inox-section-gap);
}
@media (max-width: 768px) {
    .inox-section { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 640px) {
    .inox-section { padding-top: 32px; padding-bottom: 32px; }
}

/* ── Container gutter mobile ── */
@media (max-width: 640px) {
    .inox-container {
        padding-left: var(--inox-margin-mobile);
        padding-right: var(--inox-margin-mobile);
    }
}

/* ── Bottoni: full-width su mobile ── */
@media (max-width: 640px) {
    .inox-btn-mobile-full {
        width: 100%;
        justify-content: center;
    }
}

/* ── Card prodotto: aspect-ratio su mobile ── */
@media (max-width: 640px) {
    .inox-product-card .inox-card-img { aspect-ratio: 3/2; }
    .inox-product-card .inox-card-body { padding: 14px; }
}

/* ── Tipografia extra-piccola per mobile ── */
@media (max-width: 480px) {
    .inox-display-lg  { font-size: 32px; line-height: 40px; }
    .inox-headline-lg { font-size: 26px; line-height: 34px; }
    .inox-headline-md { font-size: 22px; line-height: 30px; }
    .inox-headline-sm { font-size: 20px; line-height: 28px; }
    .inox-body-lg     { font-size: 16px; line-height: 24px; }
}

/* ── Feature grid (trust badges, servizi) ── */
.inox-feature-grid {
    display: grid;
    gap: var(--inox-gap);
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
    .inox-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .inox-feature-grid { grid-template-columns: 1fr; }
}

/* ── Navbar mobile: stile voci ── */
.inox-nav-list-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
}
.inox-nav-list-mobile li { border-bottom: 1px solid var(--inox-outline-variant); }
.inox-nav-list-mobile li a {
    display: block;
    padding: 14px 0;
    color: var(--inox-text);
    text-decoration: none;
    font-family: var(--inox-font-body);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s;
}
.inox-nav-list-mobile li a:hover { color: var(--inox-primary-action); }