:root {
    --gin-bg: #000000;
    --gin-text: #ffffff;
    --gin-line: rgba(255,255,255,.22);
    --gin-max: 1220px;
    --gin-gap: 52px;
    --gin-header-compensation: 44px;
    --gin-desc-size: clamp(12px, 1.1vw, 20px);
}
html { scroll-behavior: smooth; }
body:has(.gin-page) { background: #000000; }
.gin-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    background: #000000;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.gin-page *, .gin-page *::before, .gin-page *::after { box-sizing: border-box; }
.gin-shell { width: min(calc(100% - 48px), var(--gin-max)); margin: 0 auto; padding: 0 !important; }
.gin-hero { padding: calc(var(--gin-gap) + var(--gin-header-compensation)) 0 0 0 !important; }
.gin-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(60px, 8vw, 110px) !important;
    line-height: .9 !important;
    letter-spacing: -.055em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}
.gin-meta-line {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: var(--gin-gap) !important;
    margin: 0 !important;
    padding: 0 0 8px 0 !important;
}
.gin-last-update {
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .03em !important;
    text-align: right !important;
    white-space: nowrap !important;
}
.gin-section-line { width: 100%; height: 1px; margin: 0; background: var(--gin-line); }
.gin-list { padding: 0 !important; margin: 0 !important; }
.gin-item {
    border-bottom: 1px solid var(--gin-line);
    margin: 0 !important;
    padding: var(--gin-gap) 0 !important;
    align-items: center;
}
.gin-copy { min-width: 0; }
.gin-name {
    margin: 0 0 4px 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    line-height: .95 !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
}
.gin-alcohol {
    margin: 0 0 20px 0 !important;
    color: #fff !important;
    font-size: clamp(12px, 1vw, 16px) !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}
.gin-description {
    max-width: 650px;
    margin: 0 !important;
    color: #e8e8e8 !important;
    line-height: 1.65 !important;
}
.gin-figure { margin: 0 !important; overflow: hidden; background: #0d0d0d; }
.gin-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* DESKTOP */
@media (min-width: 821px) {
    .gin-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        gap: clamp(35px, 4vw, 60px) !important;
    }
    .gin-item.is-reversed { grid-template-columns: 330px minmax(0, 1fr) !important; }
    .gin-figure {
        width: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        height: 330px !important;
        max-height: 330px !important;
    }
    .gin-name { font-size: clamp(30px, 3vw, 55px) !important; }
    .gin-description { font-size: var(--gin-desc-size) !important; }
    .gin-item:not(.is-reversed) .gin-copy { text-align: right !important; }
    .gin-item:not(.is-reversed) .gin-description { margin-left: auto !important; text-align: right !important; }
    .gin-item:not(.is-reversed) .gin-alcohol { text-align: right !important; }
    .gin-item.is-reversed .gin-copy { text-align: left !important; }
    .gin-item.is-reversed .gin-description { margin-left: 0 !important; text-align: left !important; }
    .gin-item.is-reversed .gin-alcohol { text-align: left !important; }
}

/* MOBILE: testo sempre a sinistra e immagine sempre sotto la descrizione. */
@media (max-width: 820px) {
    .gin-page { --gin-gap: 40px !important; --gin-header-compensation: 0px !important; --gin-desc-size: clamp(12px, 3.8vw, 18px) !important; }
    .gin-shell { width: calc(100% - 64px) !important; max-width: none !important; }
    .gin-hero { padding: var(--gin-gap) 0 0 0 !important; }
    .gin-title { font-size: clamp(52px, 14vw, 76px) !important; text-align: left !important; }
    .gin-meta-line { height: var(--gin-gap) !important; }
    .gin-last-update { font-size: 12px !important; text-align: right !important; white-space: normal !important; }

    .gin-item,
    .gin-item.is-reversed {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 24px !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: var(--gin-gap) 0 !important;
    }
    .gin-item .gin-copy,
    .gin-item.is-reversed .gin-copy,
    .gin-item:not(.is-reversed) .gin-copy {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    .gin-item .gin-name,
    .gin-item.is-reversed .gin-name,
    .gin-item:not(.is-reversed) .gin-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px 0 !important;
        font-size: clamp(30px, 8vw, 50px) !important;
        text-align: left !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .gin-item .gin-alcohol,
    .gin-item.is-reversed .gin-alcohol,
    .gin-item:not(.is-reversed) .gin-alcohol {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        font-size: clamp(12px, 4vw, 16px) !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .gin-item .gin-description,
    .gin-item.is-reversed .gin-description,
    .gin-item:not(.is-reversed) .gin-description {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: var(--gin-desc-size) !important;
        line-height: 1.6 !important;
        text-align: left !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    .gin-item .gin-figure,
    .gin-item.is-reversed .gin-figure,
    .gin-item:not(.is-reversed) .gin-figure {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        justify-self: auto !important;
        align-self: stretch !important;
    }
    .gin-item .gin-figure img,
    .gin-item.is-reversed .gin-figure img,
    .gin-item:not(.is-reversed) .gin-figure img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }
}

/* CONCLUSIONE PAGINA: sotto l'ultima linea, centrato; poi nessun altro contenuto visibile. */
.gin-back-top-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 32px 0 !important;
    text-align: center !important;
}
.gin-back-top {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: var(--gin-desc-size) !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
    text-decoration: none !important;
    text-align: center !important;
}
.gin-back-top:visited,
.gin-back-top:hover,
.gin-back-top:focus,
.gin-back-top:active {
    color: #ffffff !important;
    text-decoration: none !important;
}
@media (max-width: 820px) {
    .gin-back-top-wrap { padding: 22px 0 26px 0 !important; }
}