/*
    Theme Name: Leonardo da Vinci
    Author: Egloo
    Author URI: https://egloo.it
    Version: 1.0.0
    Text Domain: eg-leonardo-da-vinci
    Description: A custom WordPress theme for Leonardo da Vinci, designed by Egloo.
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: "Garamond Premier Pro";
    src: url("assets/fonts/garamond-premier-pro/garamond-premier-pro-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Garamond Premier Pro";
    src: url("assets/fonts/garamond-premier-pro/garamond-premier-pro-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Garamond Premier Pro Display";
    src: url("assets/fonts/garamond-premier-pro-display/garamond-premier-pro-display-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Garamond Premier Pro Display";
    src: url("assets/fonts/garamond-premier-pro-display/garamond-premier-pro-display-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Garamond Premier Pro Display";
    src: url("assets/fonts/garamond-premier-pro-display/garamond-premier-pro-display-500-italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Novecento sans";
    src: url("assets/fonts/novecento-sans/novecento-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Novecento sans";
    src: url("assets/fonts/novecento-sans/novecento-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Novecento sans";
    src: url("assets/fonts/novecento-sans/novecento-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

dialog {
    margin: auto;
}

a,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
}

img,
video,
iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

button,
label,
input {
    cursor: pointer;
}

input[type="reset"],
input[type="submit"],
button {
    border: none;
    background-color: transparent;
}

span:has(> svg:only-child),
svg {
    line-height: 0;
}

ul {
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 6.25rem;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--surface);
}

body:has(dialog[open]) {
    overflow: hidden;
}

:focus-visible {
    outline-offset: 4px;
    outline: 0px solid var(--on-surface, currentColor);
    animation:
        focus-ring-in 0.2s forwards,
        focus-ring-out 0.2s 0.2s forwards;
}

@keyframes focus-ring-in {
    to {
        outline-width: 8px;
    }
}

@keyframes focus-ring-out {
    to {
        outline-width: 4px;
    }
}

/* ======================================== */
/* VARIABILI                                */
/* ======================================== */

:root {
    --surface: #fff;
    --paper: #f8f7f3;
    --paper-warm: #e3d4bd;
    --accent: #a18639;
    --fade-duration: 1s;
    --fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fade-rise: 0.25rem;
    --parallax-distance: 6rem;
    --autoplay-duration: 5s;
    --hover-zoom: 1.05;
    --hover-zoom-duration: 0.8s;
    --parallax-scale: 0.5;

    /* ---------- container ---------- */
    --container-columns: 12;
    --container-gap: 1.25rem;
    --container-column-width: 5.734375rem;
    --container-x-padding: 2rem;
    --grid-2: calc(2 * var(--container-column-width) + 1 * var(--container-gap));
    --grid-3: calc(3 * var(--container-column-width) + 2 * var(--container-gap));
    --grid-4: calc(4 * var(--container-column-width) + 3 * var(--container-gap));
    --grid-5: calc(5 * var(--container-column-width) + 4 * var(--container-gap));
    --grid-6: calc(6 * var(--container-column-width) + 5 * var(--container-gap));
    --grid-7: calc(7 * var(--container-column-width) + 6 * var(--container-gap));
    --grid-8: calc(8 * var(--container-column-width) + 7 * var(--container-gap));
    --grid-9: calc(9 * var(--container-column-width) + 8 * var(--container-gap));
    --grid-10: calc(10 * var(--container-column-width) + 9 * var(--container-gap));
    --grid-11: calc(11 * var(--container-column-width) + 10 * var(--container-gap));
    --grid-12: calc(12 * var(--container-column-width) + 11 * var(--container-gap));

    --container-gutter: max(var(--container-x-padding), (100% - var(--grid-12)) / 2);

    --column-text: 27.8125rem;

    /* ---------- form ---------- */
    --form-gap-row: 1.875rem;
    --form-gap-col: var(--container-gap);
    --form-field-min-width: 14.375rem;
    --form-checkbox-size: 0.8125rem;
    --form-checkbox-bg: #ebebeb;
    --form-checkbox-checked-bg: var(--accent);
    --form-input-bg: #eff9f9;
    --form-input-border: transparent;
    --form-input-font-size: 1rem;
    --form-input-weight: 400;
    --form-input-padding-block: 0.9375rem 0.875rem;
    --form-input-padding-inline: 1.25rem;
    --form-label-weight: 500;
    --form-border-radius-input: 0.625rem;
    --form-border-radius-checkbox: 0.125rem;
    --form-border-radius-radio: 50%;
    --form-label-field-gap: 0.625rem;
    --form-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC44NzUiIGhlaWdodD0iNy4xOTciIHZpZXdCb3g9IjAgMCAxMC44NzUgNy4xOTciPgogIDxwYXRoIGlkPSJUcmFjY2lhdG9fMjA4ODUiIGRhdGEtbmFtZT0iVHJhY2NpYXRvIDIwODg1IiBkPSJNLTE1NjA2LjA3Niw2ODc4LjMwN2wzLjI2MywzLjI2Myw0Ljc4NC00Ljc4NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2MDcuNDkgLTY4NzUuMzczKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
    --form-icon-file: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy4zNjIiIGhlaWdodD0iMTkuNzQ4IiB2aWV3Qm94PSIwIDAgMjMuMzYyIDE5Ljc0OCI+CiAgPGcgaWQ9IlJhZ2dydXBwYV8xNTc4IiBkYXRhLW5hbWU9IlJhZ2dydXBwYSAxNTc4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzM4LjA4NiAtNjU0Mi41MDEpIj4KICAgIDxwYXRoIGlkPSJUcmFjY2lhdG9fMjA5MDkiIGRhdGEtbmFtZT0iVHJhY2NpYXRvIDIwOTA5IiBkPSJNMzQuMzM2LDU3LjQ1N2EuNjE2LjYxNiwwLDAsMC0uNjIyLjYyMnYyLjk2NUEyLjMyLDIuMzIsMCwwLDEsMzEuNCw2My4zNjJIMTYuMTQ4YTIuMzEyLDIuMzEyLDAsMCwxLTIuMzE3LTIuMzE3VjU4LjA3OWEuNjIyLjYyMiwwLDAsMC0xLjI0NSwwdjIuOTY1YTMuNTYzLDMuNTYzLDAsMCwwLDMuNTYzLDMuNTYzSDMxLjM4NWEzLjU2MywzLjU2MywwLDAsMCwzLjU2My0zLjU2M1Y1OC4wNzlhLjYuNiwwLDAsMC0uNjEyLS42MjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MjYgNjQ5Ny4xNDEpIiBmaWxsPSIjYmI4ZWY4IiBzdHJva2U9IiNiYjhlZjgiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHBhdGggaWQ9IlRyYWNjaWF0b18yMDkxMCIgZGF0YS1uYW1lPSJUcmFjY2lhdG8gMjA5MTAiIGQ9Ik0zOS43NTcsMzIuMTZhLjYxNi42MTYsMCwwLDAsLjYyMi0uNjIyVjIwLjg2MWwyLjY2NiwyLjgyN2EuNjQ1LjY0NSwwLDAsMCwuNDQ4LjIuNTY4LjU2OCwwLDAsMCwuNDI0LS4xNzQuNjI4LjYyOCwwLDAsMCwuMDI1LS44ODRsLTMuNzM3LTMuOTc0YS42NDguNjQ4LDAsMCwwLS45MSwwTDM1LjU1OCwyMi44M2EuNjI1LjYyNSwwLDEsMCwuOTA5Ljg2bDIuNjY2LTIuODI3VjMxLjUzOGEuNjE4LjYxOCwwLDAsMCwuNjI0LjYyMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcxMC4wMTYgNjUyNC4zMzIpIiBmaWxsPSIjYmI4ZWY4IiBzdHJva2U9IiNiYjhlZjgiIHN0cm9rZS13aWR0aD0iMSIvPgogIDwvZz4KPC9zdmc+Cg==");
    --form-icon-select: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.02359 2.04426C3.41412 2.43477 4.04727 2.43476 4.43779 2.04424L6.27879 0.203241C6.54961 -0.0675785 6.98869 -0.067596 7.25953 0.203202C7.5304 0.47403 7.53042 0.91317 7.25957 1.18402L4.43781 4.00578C4.04728 4.39631 3.41412 4.39631 3.02359 4.00578L0.201758 1.18395C-0.069058 0.913131 -0.0690589 0.474051 0.201757 0.203234C0.472569 -0.0675773 0.911639 -0.0675829 1.18246 0.203222L3.02359 2.04426Z' fill='%23181818'/%3E%3C/svg%3E");

    /* ---------- Typography ---------- */
    --ff-primary: "Garamond Premier Pro", serif;
    --ff-display: "Garamond Premier Pro Display", "Garamond Premier Pro", serif;
    --ff-secondary: "Novecento sans", sans-serif;

    /* ---------- Header ---------- */

    --header-padding-block: calc((6.25rem - 3.6875rem) / 2);
    --header-padding-inline: 3.75rem;
    --header-logo-width: 12.5rem;
    --header-side-width: 21.875rem;
    --header-gap: 1.875rem;
    --header-menu-gap: clamp(1.875rem, 3.5vw, 3.125rem);
    --header-color: #fff;
    --header-drawer-bg: rgb(0 0 0 / 0.9);
    --header-submenu-bg: linear-gradient(rgb(0 0 0 / 0.13), rgb(0 0 0 / 0.13)), linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16));
    --header-submenu-blur: blur(5px);
    --header-submenu-current: var(--header-color);
    --header-submenu-padding: 0.875rem;
    --header-submenu-gap: 0.625rem;
    --header-slide-duration: 0.35s;

    /* ---------- Collezioni ---------- */
    --collections-height: 30.5625rem;
    --collections-bg: #f3f2f1;
    --collections-paper: url("assets/images/paper-texture.jpg");
    --collections-padding-top: 4.95rem;
    --collections-step: 4.875rem;
    --collections-link-color: #5f402e;
    --collections-figure-top: 2.875rem;
    --collections-figure-end: 6.25rem;
    --collections-figure-height: 27.1875rem;
    --collections-duration: 0.42s;
    --collections-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Paginazione ---------- */
    --pagination-gap: 0.9375rem;
    --pagination-arrow-space: 0.625rem;
    --pagination-arrow-hit: 0.625rem;
    --pagination-arrow-width: 0.3125rem;
    --pagination-arrow-height: 0.5401rem;
    --pagination-color: #000;
    --pagination-current-color: var(--accent);
    --header-tracking: 0.04em;

    /* ---------- Torn Edges ---------- */

    --torn-height: 6.25rem;
    --torn-shape: url("assets/images/torn-edge-mask.png");
    --torn-start: 0rem;
    --torn-end: 0rem;

    /* ---------- Footer ---------- */
    --footer-padding-inline: var(--container-x-padding);
    --footer-gap: 3.125rem;
    --footer-columns-gap: 5.4375rem;
    --footer-bg: #432d20;
    --footer-color: #fff;
    --footer-accent: #a18639;
    --footer-rule: rgb(255 255 255 / 0.1);
    --footer-sans-size: 1rem;
    --footer-line-step: 2.1875rem;
    --footer-logo-width: 12.5rem;
    --footer-mark-size: 5.3125rem;

    --footer-torn-clearance: 2.1875rem;

    /* ---------- Hero ---------- */
    --hero-content-width: 55.875rem;
    --hero-min-block-size: 56.25rem;
    --hero-gap: 3.125rem;
    --hero-color: #fff;
    --hero-ornament-color: #a18639;
    --hero-veil: rgb(0 0 0 / 0.2);

    /* ---------- Hero Edge ---------- */
    --hero-edge-block-size: 48.125rem;
    --hero-edge-padding-top: 19.3125rem;
    --hero-edge-torn-clearance: 7.25rem;
    --hero-edge-width: 41.875rem;
    --hero-edge-gap: 5rem;
    --hero-edge-veil: rgb(0 0 0 / 0.3);
    --hero-edge-color: #fff;
    --hero-edge-title-width: 100%;
    --hero-edge-ornament-color: var(--hero-edge-color);
    --hero-edge-breadcrumbs-color: #f3f2f1;
    --hero-edge-breadcrumbs-current-opacity: 0.6;
    --hero-edge-decor-stage: 90rem;
    --hero-edge-decor-gutter: max(0px, calc((100% - var(--hero-edge-decor-stage)) / 2));
    --hero-edge-paper-height: 42.089rem;
    --hero-edge-paper-cut: 5.897rem;

    /* ---------- Cta ---------- */
    --cta-stroke-color: rgb(211 190 159 / 0.5);
    --cta-stroke-hover-color: #a18639;
    --cta-hover-color: var(--accent);

    /* ---------- Text Centered ---------- */
    --text-centered-width: var(--grid-7);
    --text-centered-title-width: var(--text-centered-width);
    --text-centered-gap: 2.5rem;
    --text-centered-text-gap: 1.875rem;
    --text-centered-quote-color: #5f402e;
    --text-centered-author-width: var(--grid-6);
    --text-centered-padding-top: 7.5rem;
    --text-centered-padding-bottom: 6.25rem;
    --text-centered-title-color: #5f402e;
    --text-centered-accent: var(--accent);
    --text-centered-figure-width: 24rem;
    --text-centered-figure-offset: 0rem;
    --text-centered-figure-clearance: 0rem;
    --text-centered-figure-gap: 2.5rem;
    --text-centered-figure-bite: 1rem;
    --text-centered-bg: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;

    /* ---------- Texts Side ---------- */
    --texts-side-padding-top: 7.5rem;
    --texts-side-padding-bottom: 2.5rem;
    --texts-side-gap: 2.5rem;
    --texts-side-col-width: var(--grid-3);
    --texts-side-end-gap: 3.75rem;
    --texts-side-figure-width: 22.125rem;
    --texts-side-figure-height: 37.09375rem;
    --texts-side-image-height: 29rem;
    --texts-side-title-color: #5f402e;
    --texts-side-drops-width: 39.5625rem;
    --texts-side-drops-x: 3.0875rem;
    --texts-side-drops-y: -3.96875rem;
    --texts-side-sketches-width: 106.81%;
    --texts-side-sketches-y: -2.09375rem;
    --texts-side-sketches-opacity: 0.3;

    /* ---------- Slide Collection ---------- */
    --slide-collection-padding-top: 7.5rem;
    --slide-collection-gap: 3.75rem;
    --slide-collection-head-gap: 3.125rem;
    --slide-collection-title-color: #5f402e;

    --slide-collection-tabs-gap: 1.875rem;
    --slide-collection-tab-width: 7.5rem;
    --slide-collection-tab-gap: 0.3125rem;
    --slide-collection-tab-stroke-width: 6.875rem;
    --slide-collection-tab-stroke-height: 0.58rem;
    --slide-collection-stage-width: 96rem;
    --slide-collection-panel-height: 46rem;
    --slide-collection-bottles-top: 1rem;
    --slide-collection-bottles-height: 44rem;
    --slide-collection-torn-height: 5.897rem;
    --slide-collection-content-width: var(--grid-6);
    --slide-collection-content-top: 12.233rem;
    --slide-collection-content-gap: 1.875rem;
    --slide-collection-text-width: var(--grid-4);
    --slide-collection-cta-top: 33.358rem;
    --slide-collection-arrow-top: 22.546rem;
    --slide-collection-arrow-size: 3.3125rem;
    --slide-collection-arrow-color: #5f402e;
    --slide-collection-arrow-border: #d3be9f;

    /* ---------- Banner ---------- */
    --banner-block-size: 62.5rem;
    --banner-padding-block: 6.25rem;
    --banner-width: 57.5rem;
    --banner-gap: 3.125rem;
    --banner-column-width: 100%;
    --banner-column-gap: 3.125rem;
    --banner-text-gap: 1.875rem;
    --banner-body-width: var(--grid-6);
    --banner-logo-height: 8.0625rem;
    --banner-veil: 0.35;
    --banner-veil-edge: 0.1;
    --banner-accent: var(--accent);
    --banner-cta-stroke-color: #493d08;
    --banner-cta-stroke-hover-color: #fff;

    /* ---------- Slide Anecdotes ---------- */
    --slide-anecdotes-padding-block: 7.5rem;
    --slide-anecdotes-autoplay-duration: 9s;
    --slide-anecdotes-fade-duration: 1.2s;
    --slide-anecdotes-width: var(--grid-8);
    --slide-anecdotes-title-width: 100%;
    --slide-anecdotes-gap: 3.75rem;
    --slide-anecdotes-body-gap: 2.5rem;
    --slide-anecdotes-text-gap: 2.5rem;
    --slide-anecdotes-title-height: 15rem;
    --slide-anecdotes-text-height: 3.25rem;
    --slide-anecdotes-title-color: #5f402e;
    --slide-anecdotes-accent: var(--accent);
    --slide-anecdotes-pager-gap: 1.1875rem;
    --slide-anecdotes-arrow-hit: 0.625rem;
    --slide-anecdotes-track-inline-size: 6.25rem;
    --slide-anecdotes-track-color: rgb(60 47 42 / 0.2);
    --slide-anecdotes-stage: 90rem;
    --slide-anecdotes-stage-start: max(0px, calc((100% - var(--slide-anecdotes-stage)) / 2));
    --slide-anecdotes-drops-inline-size: 19.25rem;
    --slide-anecdotes-drops-block-size: 19.625rem;

    /* ---------- Text Split ---------- */
    --text-split-padding-block: 7.5rem;
    --text-split-gap-block: 3.75rem;
    --text-split-padding-end: 7.5rem;

    /* ---------- Numbers ---------- */
    --numbers-padding-top: 6.4456rem;
    --numbers-padding-bottom: 6.1819rem;
    --numbers-gap: 4.6875rem;
    --numbers-item-width: var(--grid-3);
    --numbers-item-gap: 3.125rem;
    --numbers-bg: #58001b;
    --numbers-color: #fff;
    --numbers-accent: var(--accent);
    --numbers-sketches-width: 97.09%;
    --numbers-sketches-x: 49.83%;
    --numbers-sketches-y: -6.2856rem;

    /* ---------- Tiles ---------- */
    --tiles-padding-top: 3.75rem;
    --tiles-padding-bottom: 7.5rem;
    --tiles-gap: 5rem;
    --tiles-intro-gap: 2.5rem;
    --tiles-heading-gap: 3.125rem;
    --tiles-body-gap: 1.65rem;
    --tiles-list-gap: 2.25rem;
    --tiles-item-width: 18.6875rem;
    --tiles-item-gap: 1rem;
    --tiles-image-width: var(--grid-3);
    --tiles-image-height: 21.875rem;
    --tiles-accent: var(--accent);
    --tiles-title-color: #5f402e;

    /* ---------- Map ---------- */
    --map-padding-top: 14.71625rem;
    --map-padding-bottom: 7.5rem;
    --map-italy-offset: -7rem;
    --map-body-offset: 1.33375rem;
    --map-body-width: 27.8125rem;
    --map-body-gap: 1.875rem;
    --map-text-width: 100%;
    --map-title-color: #5f402e;
    --map-accent: var(--accent);
    --map-drawing-width: 30.875rem;
    --map-drawing-height: 31.6875rem;
    --map-italy-width: 10.7254rem;
    --map-italy-end: 3.9375rem;
    --map-italy-top: 5.528rem;
    --map-groups-gap: 3.75rem;
    --map-groups-top: 7.5rem;
    --map-region-gap: 1.375rem;
    --map-chip-gap: 1.25rem;
    --map-chip-padding-block: 0.8125rem;
    --map-chip-padding-inline: 1.25rem;
    --map-chip-color: #5f402e;
    --map-chip-border: rgb(95 64 46 / 0.2);
    --map-ring-size: 1.625rem;
    --map-ring-color: #a1863969;

    /* ---------- News ---------- */
    --news-padding-top: 3.75rem;
    --news-padding-bottom: 7.5rem;
    --news-gap: 7.5rem;
    --news-column-gap: 2.5rem;
    --news-columns: 3;
    --news-card-gap: 1rem;
    --news-chip-gap: 1.25rem;
    --news-chip-padding-block: 0.5rem 0.6875rem;
    --news-chip-padding-inline: calc(1.25rem - 1px);
    --news-chip-color: #5f402e;
    --news-chip-border: rgb(95 64 46 / 0.2);
    --news-chip-bg: #fff;
    --news-chip-hover-bg: linear-gradient(rgb(95 64 46 / 0.05), rgb(95 64 46 / 0.05)), #f3f2f1;
    --news-chip-active-color: #f3f2f1;
    --news-chip-active-bg: var(--accent);
    --news-category-color: var(--accent);
    --news-date-opacity: 0.6;

    /* ---------- Articolo ---------- */
    --article-figure-width: var(--grid-8);
    --article-figure-rise: 20.6875rem;
    --article-meta-gap: 3rem;
    --article-excerpt-gap: 5rem;
    --article-content-gap: 3.75rem;
    --article-padding-bottom: 7.5rem;
    --article-text-gap: 1.875rem;
    --article-title-color: #5f402e;
    --article-category-color: var(--accent);
    --article-date-opacity: 0.6;
    --article-lead-padding-bottom: 3.75rem;

    /* ---------- Blocchi dell'articolo ---------- */
    --text-column-padding-block: 3.75rem;
    --text-column-gap: 2.5rem;
    --text-column-title-color: #5f402e;
    --gallery-padding-block: 3.75rem;
    --gallery-gap: 1.875rem;
    --gallery-ratio: 220.1667 / 280;
    --wine-cards-padding-block: 3.75rem;
    --wine-cards-gap: 2.5rem;
    --wine-cards-list-gap: 1.875rem;
    --wine-cards-list-padding-block: 2.5rem;
    --wine-cards-card-width: 25rem;
    --wine-cards-card-gap: 0.9375rem;
    --wine-cards-info-gap: 0.625rem;
    --wine-cards-frame-height: 30.877rem;
    --wine-cards-frame-padding-block: 2.5rem;
    --wine-cards-frame-padding-inline: 0.625rem;

    --wine-cards-frame-bg: #fafafa;
    --wine-cards-bottle-height: 24.5447rem;
    --wine-cards-collection-color: #5f402e;

    /* ---------- News related ---------- */
    --news-related-padding-block: 6.25rem;
    --news-related-heading-gap: 3.125rem;
    --news-related-gap: 2.5rem;
    --news-related-card-gap: 1.875rem;
    --news-related-columns: 5;
    --news-related-title-opacity: 0.4;
    --text-split-text-width: 27.8125rem;
    --text-split-text-gap: 1.875rem;
    --text-split-image-width: 100%;
    --text-split-image-fit: cover;
    --text-split-image-ratio: 650 / 583;
    --text-split-title-color: #5f402e;

    /* ---------- Accordion ---------- */
    --accordion-padding-top: 3.75rem;
    --accordion-padding-bottom: 5rem;
    --accordion-duration: 0.5s;
    --accordion-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --accordion-gap: 2.5rem;
    --accordion-intro-color: var(--accent);
    --accordion-text-color: #5f402e;
    --accordion-signature-size: 1.25rem;
    --accordion-sheet-width: 16.5625rem;
    --accordion-sheet-height: 22.8125rem;
    --accordion-sheet-x: 3.9375rem;
    --accordion-sheet-y: -9.53125rem;

    /* ---------- Figure ---------- */
    --figure-padding-top: 2.5rem;
    --figure-padding-bottom: 2.5rem;
    --figure-gap: 5rem;
    --figure-height: 34.625rem;
    --figure-scale-min: 0.7437;
    --figure-progress: 1;

    /* ---------- Slide Wines ---------- */
    --slide-wines-padding-top: 3.125rem;
    --slide-wines-padding-bottom: 6.25rem;
    --slide-wines-slot: 32.375rem;
    --slide-wines-pitch: 38.625rem;
    --slide-wines-gap: 2.125rem;
    --slide-wines-frame-width: 31.25rem;
    --slide-wines-frame-ratio: 500 / 617.537;
    --slide-wines-frame-scale: 0.9;
    --slide-wines-frame-padding-block: 2.5rem;
    --slide-wines-frame-padding-inline: 1.875rem;
    --slide-wines-frame-bg: #f3f2f1;
    --slide-wines-text-width: 31.25rem;
    --slide-wines-text-gap: 1.5625rem;
    --slide-wines-description-height: 4.05rem;
    --slide-wines-dim: 0.4;
    --slide-wines-arrow-size: 3.3125rem;
    --slide-wines-arrow-x: 20.25rem;
    --slide-wines-arrow-y: 19rem;
    --slide-wines-arrow-color: var(--accent);
    --slide-wines-arrow-border: #e5e5e5;
    --slide-wines-pager-gap: 1.1875rem;
    --slide-wines-pager-space: 5rem;
    --slide-wines-pager-hit: 0.625rem;
    --slide-wines-bar-width: 6.25rem;
    --slide-wines-bar-color: rgb(60 47 42 / 0.2);
    --slide-wines-duration: 0.6s;

    --slide-wines-stage: 112.5rem;

    /* ---------- Other Collections ---------- */
    --other-collections-padding-block: 7.5rem;
    --other-collections-gap: 3.75rem;
    --other-collections-head-gap: 3.125rem;
    --other-collections-title-color: #5f402e;
    --other-collections-card-gap: 2.5rem;
    --other-collections-card-space: 2.125rem;
    --other-collections-frame-height: 31.906rem;
    --other-collections-frame-bg: #f3f2f1;
    --other-collections-drops-width: 21.9375rem;
    --other-collections-drops-height: 22.375rem;
    --other-collections-drops-x: 32.25rem;
    --other-collections-drops-y: 9.25rem;

    /* ---------- Text Specs ---------- */
    --text-specs-height: 48.125rem;
    --text-specs-stage: 90rem;
    --text-specs-gutter: max(0px, calc((100% - var(--text-specs-stage)) / 2));
    --text-specs-header-space: calc(3.6875rem + var(--header-padding-block) * 2);
    --text-specs-panel-bg: #f3f2f1;
    --text-specs-image-width: var(--grid-5);
    --text-specs-image-height: 34.75rem;
    --text-specs-padding: 5rem;
    --text-specs-gap: 3.125rem;
    --text-specs-head-gap: 1.25rem;
    --text-specs-intro-gap: 0.625rem;
    --text-specs-claim-color: var(--accent);
    --text-specs-data-gap: 2.5rem;
    --text-specs-spec-width: 16.25rem;
    --text-specs-label-color: var(--accent);
    --text-specs-label-size: 1rem;
    --text-specs-label-weight: 600;
    --text-specs-label-tracking: 0.1em;
    --text-specs-label-space: 0.9375rem;
    --text-specs-label-border: rgb(0 0 0 / 0.15);
    --text-specs-value-space: 0.75rem;
    --text-specs-values-indent: 1.6875rem;
    --text-specs-cta-cell-height: 8.25rem;
    --text-specs-cta-bg: #f3f2f1;
    --text-specs-cta-color: var(--accent);
    --text-specs-cta-size: 1rem;
    --text-specs-cta-weight: 400;
    --text-specs-cta-tracking: 0.04em;
    --text-specs-cta-padding-block: 0.9375rem 1.125rem;
    --text-specs-cta-padding-inline: 2.5rem;
    --text-specs-back-y: 3.125rem;
    --text-specs-back-x: 3.75rem;
    --text-specs-back-bg: var(--surface);
    --text-specs-back-color: #5f402e;
    --text-specs-back-border: rgb(95 64 46 / 0.2);
    --text-specs-back-padding-block: 0.625rem;
    --text-specs-back-padding-inline: 1.25rem;
}

@media (width < 64rem) {
    :root {
        /* ---------- Header ---------- */

        --header-padding-block: 1.25rem;
        --header-padding-inline: 1.25rem;
        --header-logo-width: 10.3125rem;
        --header-burger-size: 3.0625rem;
        --header-drawer-gap: 1.5rem;

        /* ---------- Torn Edges ---------- */
        --torn-height: 2.5rem;

        /* ---------- Footer ---------- */
        --footer-padding-inline: 1.25rem;
        --footer-gap: 3.75rem;
        --footer-columns-gap: 2.5rem;
        --footer-torn-clearance: 4.875rem;
        --footer-logo-width: 10.3125rem;
        --footer-mark-size: 5.3125rem;

        /* ---------- Hero ---------- */
        --hero-gap: 2.5rem;

        --parallax-scale: 0.25;
    }
}

/* ======================================== */
/* UTILS */
/* ======================================== */

nav.breadcrumbs ul {
    --_gap: 1.25rem;
    display: block;
}

nav.breadcrumbs li {
    display: inline-block;
    position: relative;
}

nav.breadcrumbs li:not(:last-child) {
    margin-inline-end: var(--_gap);
}

nav.breadcrumbs li svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc((var(--_gap) * -1) / 2);
    translate: 50% -50%;
}

nav.breadcrumbs [aria-current] {
    color: rgb(from currentColor r g b / 0.3);
}

.rich-text > *:not(:last-child) {
    margin-block-end: 1lh;
}

.rich-text strong {
    font-weight: 700;
}

.rich-text ul {
    list-style-type: disc;
}

.rich-text ol {
    list-style-type: decimal;
}

.rich-text ul,
.rich-text ol {
    display: flex;
    flex-direction: column;
    gap: 0.5lh;
    padding-inline-start: 1.25em;
}

.rich-text li {
    padding-inline-start: 0.25em;
}

.rich-text li::marker {
    color: var(--accent);
}

.rich-text ol > li::marker {
    font-variant-numeric: tabular-nums;
}

.rich-text li > :is(ul, ol) {
    margin-block-start: 0.5lh;
}

.eg-text-column__body :is(ul, ol) {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
    text-align: start;
}

.rich-text a {
    text-decoration: underline;
}

.color-accent {
    color: var(--accent);
}

:is(h1, h2, h3, h4, h5, h6) .color-accent {
    font-family: var(--ff-primary);
    font-style: italic;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
}

.skip-link:focus {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 9999;
    inline-size: fit-content;
    block-size: fit-content;
    padding: 0.75rem 1.25rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    background-color: var(--on-surface, #000);
    color: var(--surface, #fff);
    border-radius: 0.25rem;
    outline: 2px solid transparent;
}

.img-wrapper.img-wrapper-ratio > picture,
.img-wrapper.img-wrapper-ratio {
    overflow: hidden;
    position: relative;
}

.img-wrapper.img-wrapper-ratio > picture {
    block-size: 100%;
    display: block;
}

.img-wrapper.img-wrapper-ratio > video,
.img-wrapper.img-wrapper-ratio > picture > video,
.img-wrapper.img-wrapper-ratio > picture > img,
.img-wrapper.img-wrapper-ratio > img {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    object-fit: cover;
    inset: 0;
}

.layers {
    display: grid;
}

.layers > .layer {
    grid-column: -1/1;
    grid-row: -1/1;
}

.layers > .layer.layer-bg {
    position: relative;
}

.layers > .layer.layer-bg > .img-wrapper.img-wrapper-ratio:only-child {
    block-size: 100%;
}

.layers > .layer.layer-bg::before,
.layers > .layer.layer-bg::after {
    content: "";
    pointer-events: none;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
}

.layers > .layer.layer-fg {
    position: relative;
    z-index: 1;
}

.container {
    inline-size: 100%;
    max-inline-size: calc((var(--container-x-padding) * 2) + ((var(--container-columns) - 1) * var(--container-gap)) + (var(--container-columns) * var(--container-column-width)));
    margin-inline: auto;
    padding-inline: var(--container-x-padding);
}
.container.container-11 {
    --container-columns: 11;
}
.container.container-10 {
    --container-columns: 10;
}
.container.container-9 {
    --container-columns: 9;
}
.container.container-8 {
    --container-columns: 8;
}
.container.container-7 {
    --container-columns: 7;
}
.container.container-6 {
    --container-columns: 6;
}
.container.container-5 {
    --container-columns: 5;
}
.container.container-4 {
    --container-columns: 4;
}
.container.container-3 {
    --container-columns: 3;
}
.container.container-2 {
    --container-columns: 2;
}

/* ======================================== */
/* WPCF7 */
/* ======================================== */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    inline-size: var(--form-checkbox-size);
    block-size: var(--form-checkbox-size);
    background-color: var(--form-checkbox-bg);
    flex-shrink: 0;
    cursor: pointer;
}

input[type="checkbox"] {
    border-radius: var(--form-border-radius-checkbox);
}

input[type="radio"] {
    border-radius: var(--form-border-radius-radio);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--form-checkbox-checked-bg);
    background-image: var(--form-icon-check);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--on-surface);
    outline-offset: 2px;
}

input:is([type="text"], [type="number"], [type="email"], [type="tel"]),
.wpcf7-styled select,
.wpcf7-styled textarea {
    inline-size: 100%;
    padding-block: var(--form-input-padding-block);
    padding-inline: var(--form-input-padding-inline);
    border: 1px solid var(--form-input-border);
    background-color: var(--form-input-bg);
    border-radius: var(--form-border-radius-input);
    font-size: var(--form-input-font-size);
    font-weight: var(--form-input-weight);
    outline: none;
}

.wpcf7-styled select {
    appearance: none;
    background-image: var(--form-icon-select);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--form-input-padding-inline)) center;
    padding-inline-end: calc(var(--form-input-padding-inline) + 1.5rem);
}

input::placeholder,
textarea::placeholder,
.wpcf7-styled label:has(input[type="file"]) > span:first-child {
    color: rgb(from var(--on-surface) r g b / 0.4);
}

.wpcf7-styled textarea {
    min-block-size: 6.875rem;
    field-sizing: content;
    resize: vertical;
}

input:is([type="text"], [type="number"], [type="email"], [type="tel"]):focus-visible,
.wpcf7-styled select:focus-visible,
.wpcf7-styled textarea:focus-visible {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
    outline-offset: 0;
}

.wpcf7-styled label {
    font-size: 0.875rem;
    line-height: 1.571;
    letter-spacing: -0.01em;
    font-weight: var(--form-label-weight);
    display: flex;
    flex-direction: column;
    gap: var(--form-label-field-gap);
}

.wpcf7-styled .align-center {
    text-align: center;
}

.wpcf7-styled label:has(input[type="file"]) {
    overflow: hidden;
    display: grid;
    background-image: var(--form-icon-file);
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    background-color: rgb(from currentColor r g b / 0.1);
    border: 1px solid transparent;
    border-radius: var(--form-border-radius-input);
    padding-block: var(--form-input-padding-block);
    padding-inline: var(--form-input-padding-inline);
    cursor: pointer;
}

.wpcf7-styled label:has(input[type="file"]) > span:first-child {
    overflow: hidden;
    max-inline-size: calc(100% - 3rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.wpcf7-styled label:has(input[type="file"]) input[type="file"] {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
    z-index: -1;
}

.wpcf7-styled label:has([aria-required="true"]) .label-title::after {
    content: " *";
    color: currentColor;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--form-field-min-width), 100%), 1fr));
    row-gap: var(--form-gap-row);
    column-gap: var(--form-gap-col);
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p .wide {
    grid-column: 1 / -1;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit {
    inline-size: 100%;
    margin-inline: auto;
    border-radius: var(--form-border-radius-input);
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p br,
.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-spinner {
    display: none;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.wpcf7-styled .wpcf7-acceptance label {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

.wpcf7-styled .wpcf7-acceptance label span {
    text-box: trim-both cap alphabetic;
}

.wpcf7-styled .wpcf7-acceptance label span a {
    text-decoration: underline;
}

.wpcf7-styled .wide [data-name="acceptance"] {
    display: block;
    margin-block: var(--form-gap-row);
}

.wpcf7-styled [data-name="acceptance"] .wpcf7-list-item {
    margin-inline-start: 0;
}

.wpcf7-styled .wpcf7-response-output {
    padding: 1rem;
    text-wrap: balance;
    font-size: 0.875rem;
    inline-size: 100%;
    border: 1px solid transparent;
    margin-block-start: 3rem;
    border-radius: var(--form-border-radius-input);
}

.wpcf7-styled form.sent .wpcf7-response-output {
    background-color: #5ad66521;
    border-color: #5ad6659e;
}

.wpcf7-styled form.invalid .wpcf7-response-output {
    border-color: #ffb900cc;
}

.eg-pagination ul {
    display: flex;
    gap: var(--pagination-gap);
    justify-content: center;
    align-items: center;
    color: var(--pagination-color);
}

.eg-pagination .page-current {
    color: var(--pagination-current-color);
}

.eg-pagination .page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pagination-arrow-hit);
}

.eg-pagination .page-btn-prev {
    margin-inline-end: var(--pagination-arrow-space);
}

.eg-pagination .page-btn-next {
    margin-inline-start: var(--pagination-arrow-space);
}

.eg-pagination .page-btn::before {
    content: "";
    display: block;
    inline-size: var(--pagination-arrow-width);
    block-size: var(--pagination-arrow-height);
    background-color: currentColor;
    mask: url("assets/images/chevron-right.svg") no-repeat center / 100% 100%;
}

.eg-pagination .page-btn-prev::before {
    scale: -1 1;
}

.eg-pagination .page-btn:disabled {
    opacity: 0.4;
}

.eg-pagination :disabled {
    pointer-events: none;
}

/* ======================================== */
/* TYPOGRAPHY                               */
/* ======================================== */

.ff-primary {
    font-family: var(--ff-primary);
}

.ff-secondary {
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
}

.fs-label {
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: lowercase;
}

.fs-body {
    font-family: var(--ff-primary);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.2;
}

.fs-body-small {
    font-family: var(--ff-primary);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
}

.fs-h1-display,
.fs-h1-corsivo,
.fs-h2-display,
.fs-h2-corsivo,
.fs-h3-display,
.fs-h3-corsivo,
.fs-h4-display,
.fs-h4-corsivo,
.fs-h5-display,
.fs-h5-corsivo,
.fs-h6-display,
.fs-h6-corsivo {
    font-family: var(--ff-display);
    font-weight: 400;
}

.fs-h1-corsivo,
.fs-h2-corsivo,
.fs-h3-corsivo,
.fs-h4-corsivo,
.fs-h5-corsivo,
.fs-h6-corsivo {
    font-style: italic;
}

.fs-h1-display,
.fs-h1-corsivo {
    font-size: 6.25rem;
    font-weight: 500;
    line-height: 0.75;
}

.fs-h2-display,
.fs-h2-corsivo {
    font-size: 4.375rem;
    line-height: 0.85;
}

.fs-h3-display,
.fs-h3-corsivo {
    font-size: 2.8125rem;
    line-height: 0.85;
}

.fs-h4-display,
.fs-h4-corsivo {
    font-size: 2.1875rem;
    line-height: 0.9;
}

.fs-h5-display,
.fs-h5-corsivo {
    font-size: 1.875rem;
    line-height: 1;
}

.fs-h6-display,
.fs-h6-corsivo {
    font-size: 1.5625rem;
    line-height: 1;
}

@media (width < 64rem) {
    .fs-h1-display,
    .fs-h1-corsivo {
        font-size: 2.75rem;
        line-height: 0.9;
    }

    .fs-h2-display,
    .fs-h2-corsivo {
        font-size: 2.25rem;
    }

    .fs-h3-display,
    .fs-h3-corsivo {
        font-size: 1.875rem;
    }

    .fs-h4-display,
    .fs-h4-corsivo {
        font-size: 1.625rem;
    }

    .fs-h5-display,
    .fs-h5-corsivo {
        font-size: 1.5rem;
    }

    .fs-h6-display,
    .fs-h6-corsivo {
        font-size: 1.25rem;
    }

    .fs-body {
        font-size: 1.125rem;
    }

    .fs-body-small {
        font-size: 1rem;
    }
}

/* ======================================== */
/* HEADER                                   */
/* ======================================== */

.eg-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    color: var(--header-color);
    background-color: transparent;
    transition:
        color var(--collections-duration) var(--collections-ease),
        background-color var(--collections-duration) var(--collections-ease),
        translate var(--header-slide-duration) var(--collections-ease);
}

.eg-header.is-hidden {
    translate: 0 -100%;
}

.eg-header.is-static {
    position: absolute;
}

.eg-header.is-static.is-open {
    position: fixed;
}

.eg-header.is-stuck:not(.is-open) {
    --header-color: #000;
    background-color: #fff;
}

.eg-header.is-stuck:not(.is-open) .eg-header__logo img {
    filter: brightness(0);
}

.admin-bar .eg-header {
    inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

.eg-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-gap);
    padding-block: var(--header-padding-block);
    padding-inline: var(--header-padding-inline);
}

.eg-header__drawer {
    display: contents;
}

.eg-header__nav {
    flex: 1 1 var(--header-side-width);
    min-inline-size: 0;
}

.eg-header__nav--start {
    order: 1;
}

.eg-header__logo {
    order: 2;
    flex: 0 0 auto;
    display: block;
    inline-size: var(--header-logo-width);
    color: inherit;
}

.eg-header__nav--end {
    order: 3;
}

/* Logo a sinistra e le voci dei due menu in un'unica fila a destra: le due
   `<nav>` restano due, ma si accostano con lo stesso passo delle voci. */
@media (width >= 64rem) {
    .eg-header__logo {
        order: 0;
    }

    .eg-header__nav {
        flex: 0 1 auto;
    }

    .eg-header__nav--start {
        margin-inline-start: auto;
    }

    .eg-header__inner {
        gap: var(--header-menu-gap);
    }
}

.eg-header__logo :is(img, svg) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 200 / 59;
    object-fit: contain;
    transition: filter var(--collections-duration) var(--collections-ease);
}

/* ---------- Menu ---------- */

.eg-menu {
    display: flex;
    align-items: center;
    gap: var(--header-menu-gap);
}

.eg-header__nav--end .eg-menu {
    justify-content: flex-end;
}

.eg-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.eg-menu :is(.eg-menu__link, .eg-menu__toggle, .eg-menu__sublink) {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: var(--header-tracking);
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition:
        opacity 0.3s ease,
        color var(--collections-duration) var(--collections-ease);
}

.eg-menu :is(.eg-menu__link, .eg-menu__toggle, .eg-menu__sublink):is(:hover, :focus-visible) {
    opacity: 0.6;
}

.eg-menu__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 0.4375rem;
    block-size: 0.25rem;
    transition: transform 0.3s ease;
}

.eg-menu__chevron svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

[aria-expanded="true"] .eg-menu__chevron {
    transform: rotate(180deg);
}

/* ---------- Submenu ---------- */

.eg-menu__submenu {
    position: absolute;
    inset-block-start: calc(var(--header-submenu-padding) * -1);
    inset-inline-start: calc(var(--header-submenu-padding) * -1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--header-submenu-gap);
    min-inline-size: max-content;
    padding: var(--header-submenu-padding);
    padding-block-start: calc(var(--header-submenu-padding) * 2 + 0.875rem);
    background-image: var(--header-submenu-bg);
    backdrop-filter: var(--header-submenu-blur);
    -webkit-backdrop-filter: var(--header-submenu-blur);
    opacity: 1;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s;
}

.eg-header__nav--end .eg-menu__submenu {
    inset-inline-start: auto;
    inset-inline-end: calc(var(--header-submenu-padding) * -1);
}

.eg-menu__item--has-submenu .eg-menu__toggle {
    position: relative;
    z-index: 2;
}

.eg-menu__item--lang:has([aria-expanded="true"]) :is(.eg-menu__link, .eg-menu__chevron) {
    color: var(--header-submenu-current);
}

.eg-menu__submenu[inert] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
}

/* ---------- Collezioni: il pannello del menu ---------- */

.eg-collections {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: var(--collections-height);
    padding-inline: var(--header-padding-inline);
    background-color: var(--collections-bg);
    background-image: var(--collections-paper);
    background-repeat: no-repeat;
    background-size: 110% 153.58%;
    background-position: 50% 37.79%;
    clip-path: inset(0 0 0 0);
    transition:
        clip-path var(--collections-duration) var(--collections-ease),
        visibility 0s;
}

.eg-collections[inert] {
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path var(--collections-duration) var(--collections-ease),
        visibility 0s linear var(--collections-duration);
}

.eg-collections__list {
    display: flex;
    flex-direction: column;
    padding-block-start: var(--collections-padding-top);
}

.eg-collections__item + .eg-collections__item {
    margin-block-start: calc(var(--collections-step) - 2.8125rem * 0.85);
}

.eg-collections__link {
    display: inline-grid;
    color: var(--collections-link-color);
    transition: color 0.3s ease;
}

.eg-collections__label,
.eg-collections__link::after {
    grid-area: 1 / 1;
}

.eg-collections__link::after {
    content: attr(data-label);
    block-size: 0;
    overflow: hidden;
    font-style: normal;
    visibility: hidden;
}

.eg-collections__link:is(:hover, :focus-visible) {
    font-style: italic;
    color: var(--accent);
}

.eg-collections__figure {
    position: absolute;
    inset-block-start: var(--collections-figure-top);
    inset-inline-end: var(--collections-figure-end);
    inline-size: auto;
    max-inline-size: none;
    block-size: var(--collections-figure-height);
    mix-blend-mode: multiply;
    opacity: 0;

    pointer-events: none;
    transition: opacity 0.3s ease;
}

.eg-collections__item.is-active .eg-collections__figure {
    opacity: 1;
}

.eg-collections__item:nth-child(3) .eg-collections__figure {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-end: 0;
    block-size: 27.25rem;
}

.eg-collections__item:nth-child(4) .eg-collections__figure {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-end: 10.3125rem;
    block-size: 27rem;
}

.eg-collections__item:nth-child(5) .eg-collections__figure {
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
    block-size: 100%;
}

@media (width >= 64rem) {
    .eg-header:has(.eg-menu__toggle--collections[aria-expanded="true"]) {
        --header-color: #000;
        background-color: #fff;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .eg-header:has(.eg-menu__toggle--collections[aria-expanded="true"]) .eg-header__logo img {
        filter: brightness(0);
    }

    .eg-menu__item:has(.eg-menu__toggle--collections[aria-expanded="true"]) :is(.eg-menu__link, .eg-menu__chevron) {
        color: var(--accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-header.is-hidden {
        translate: 0 -100%;
    }

    .eg-header,
    .eg-header__logo :is(img, svg),
    .eg-menu :is(.eg-menu__link, .eg-menu__toggle, .eg-menu__sublink),
    .eg-collections,
    .eg-collections__figure,
    .eg-collections__link {
        transition: none;
    }
}

@media (width < 64rem) {
    .eg-collections {
        order: 2;
        position: static;
        display: grid;
        grid-template-rows: 1fr;
        block-size: auto;
        margin-block-start: calc(var(--header-drawer-gap) * -1);
        padding: 0;
        background: none;
        transition:
            grid-template-rows 0.35s var(--collections-ease),
            visibility 0s;
    }

    .eg-collections[inert] {
        grid-template-rows: 0fr;
        transition:
            grid-template-rows 0.35s var(--collections-ease),
            visibility 0s linear 0.35s;
    }

    .eg-collections,
    .eg-collections[inert] {
        clip-path: none;
    }

    .eg-collections__list {
        align-items: center;
        min-block-size: 0;
        overflow: hidden;
        padding-block-start: 0;
        text-align: center;
    }

    .eg-collections__item:first-child {
        margin-block-start: calc(var(--header-drawer-gap) * 0.75);
    }

    .eg-collections__item + .eg-collections__item {
        margin-block-start: var(--header-submenu-gap);
    }

    .eg-collections__figure {
        display: none;
    }

    .eg-collections__link {
        font-family: var(--ff-secondary);
        font-variant-numeric: lining-nums;
        font-size: 1.125rem;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: lowercase;
        color: inherit;
        opacity: 0.6;
    }

    .eg-collections__item:is(:hover, :focus-within) .eg-collections__link {
        font-style: normal;
        color: var(--accent);
        opacity: 1;
    }
}

/* ---------- Burger (mobile only) ---------- */

.eg-header__burger {
    order: 4;
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-end: calc(var(--header-padding-inline) * -0.5);
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.eg-header__burger-bars,
.eg-header__burger-bars::before,
.eg-header__burger-bars::after {
    display: block;
    inline-size: 1.5rem;
    block-size: 1px;
    background-color: currentColor;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.eg-header__burger-bars::before,
.eg-header__burger-bars::after {
    content: "";
    position: absolute;
}

.eg-header__burger-bars::before {
    transform: translateY(-0.4375rem);
}

.eg-header__burger-bars::after {
    transform: translateY(0.4375rem);
}

.eg-header__burger[aria-expanded="true"] .eg-header__burger-bars {
    background-color: transparent;
}

.eg-header__burger[aria-expanded="true"] .eg-header__burger-bars::before {
    transform: rotate(45deg);
}

.eg-header__burger[aria-expanded="true"] .eg-header__burger-bars::after {
    transform: rotate(-45deg);
}

/* ---------- Mobile ---------- */

@media (width < 64rem) {
    .eg-header {
        transition: translate var(--header-slide-duration) var(--collections-ease);
    }

    .eg-header__logo :is(img, svg) {
        transition: none;
    }

    .eg-menu :is(.eg-menu__link, .eg-menu__toggle, .eg-menu__sublink) {
        transition: opacity 0.3s ease;
    }

    .eg-header__inner {
        position: relative;
        justify-content: center;
    }

    .eg-header__logo {
        margin-inline: auto;
    }

    .eg-header__burger {
        display: flex;
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: var(--header-padding-inline);
        translate: 0 -50%;
        inline-size: var(--header-burger-size);
        block-size: var(--header-burger-size);
        margin-inline-end: 0;
        border: 1px solid rgb(from currentColor r g b / 0.2);
        border-radius: 100px;
    }

    .eg-header__burger-bars,
    .eg-header__burger-bars::before,
    .eg-header__burger-bars::after {
        inline-size: 1.4375rem;
    }

    .eg-header__burger-bars::before {
        transform: translateY(-0.375rem);
    }

    .eg-header__burger-bars::after {
        transform: translateY(0.375rem);
    }

    .eg-header__drawer {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: 100dvh;
        z-index: -1;
        padding-block: 7.5rem 2.5rem;
        padding-inline: var(--header-padding-inline);
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--header-drawer-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.35s ease,
            visibility 0.35s;
    }

    .admin-bar .eg-header__drawer {
        inset-block-start: var(--wp-admin--admin-bar--height, 46px);
        block-size: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
    }

    .eg-header.is-open .eg-header__drawer {
        opacity: 1;
        visibility: visible;
    }

    .eg-header__nav {
        flex: 0 0 auto;
    }

    .eg-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .eg-header__nav--end .eg-menu {
        justify-content: flex-start;
    }

    .eg-menu__item {
        flex-wrap: wrap;
    }

    .eg-menu :is(.eg-menu__link, .eg-menu__toggle) {
        font-size: 1.125rem;
    }

    .eg-menu__submenu {
        position: static;
        inline-size: 100%;
        padding: 0.75rem 0 0 1rem;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .eg-menu__submenu[inert] {
        display: none;
    }

    .eg-header.is-open {
        --header-color: #000;
        --header-drawer-bg: #fff;
        --header-submenu-current: var(--accent);
    }

    .eg-header.is-open .eg-header__logo img {
        filter: brightness(0);
    }

    .eg-header__drawer {
        justify-content: safe center;
        gap: var(--header-drawer-gap);
        padding-block: 7.5rem;
    }

    .eg-menu,
    .eg-header__nav--end .eg-menu {
        align-items: center;
        gap: var(--header-drawer-gap);
    }

    .eg-menu__item {
        justify-content: center;
        text-align: center;
    }

    .eg-menu :is(.eg-menu__link, .eg-menu__toggle) {
        font-family: var(--ff-primary);
        font-size: 1.5rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* ---------- Lingua: in alto a sinistra, alla pari del burger ---------- */
    /* Sta nel drawer (e quindi c'e' solo a menu aperto) ma esce dalla colonna:
       il drawer e' `fixed`, e fa da riferimento. `__inner` copre la barra e
       si prenderebbe i tocchi: non li prende piu', i suoi figli si'. */
    .eg-header__inner {
        pointer-events: none;
    }

    .eg-header__inner > * {
        pointer-events: auto;
    }

    .eg-menu__item--lang {
        position: absolute;
        inset-block-start: calc(var(--header-padding-block) + var(--header-burger-size) / 2);
        inset-inline-start: var(--header-padding-inline);
        translate: 0 -50%;
    }

    .eg-menu__item--lang .eg-menu__toggle {
        font-size: 1rem;
    }

    .eg-menu__item--lang .eg-menu__submenu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0 auto;
        inline-size: auto;
        min-inline-size: 100%;
        padding: 0.75rem 0 0;
        background: #fff;
    }

    .eg-menu__item--lang .eg-menu__submenu[inert] {
        display: flex;
    }

    .eg-menu .eg-menu__sublink {
        font-family: var(--ff-secondary);
        font-size: 1.125rem;
        letter-spacing: 0.04em;
    }
}

.page-template-sangiovese,
.page-template-taccuino,
.page-template-collezione,
.page-template-testo,
.single-news,
.single-wine,
.error404 {
    --header-color: #000;
    --header-drawer-bg: rgb(255 255 255 / 0.95);
    --header-submenu-bg: linear-gradient(#fff, #fff);
    --header-submenu-blur: none;
    --header-submenu-current: var(--accent);
}

.page-template-sangiovese .eg-header__logo img,
.page-template-taccuino .eg-header__logo img,
.page-template-collezione .eg-header__logo img,
.page-template-testo .eg-header__logo img,
.single-news .eg-header__logo img,
.single-wine .eg-header__logo img,
.error404 .eg-header__logo img {
    filter: brightness(0);
}

@media (prefers-reduced-motion: reduce) {
    .eg-header *,
    .eg-header__drawer {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* TORN EDGES                               */
/* ======================================== */

.eg-torn--top,
.eg-torn--bottom + * {
    --torn-start: var(--torn-height);
    margin-block-start: calc(var(--torn-height) * -1);
}

.eg-torn--top:not(.eg-torn--layered),
.eg-torn--bottom + *:not(.eg-torn--layered),
.eg-torn--layered.eg-torn--top::before,
.eg-torn--bottom + .eg-torn--layered::before {
    mask-image: linear-gradient(#000, #000), var(--torn-shape);
    mask-size:
        100% calc(100% - var(--torn-height) + 1px),
        100% var(--torn-height);
    mask-position: bottom, top;
    mask-repeat: no-repeat;
    mask-composite: add;
}

.eg-torn--bottom,
main > :has(+ .eg-torn--top),
main:has(+ .eg-torn--top) > :last-child {
    --torn-end: var(--torn-height);
}

/* ---------- Le sagome ---------- */

.eg-torn--panel {
    --torn-shape: url("assets/images/torn-edge-panel-mask.svg");
}

.eg-torn--panel-mirrored {
    --torn-shape: url("assets/images/torn-edge-panel-mask-mirrored.svg");
}

.eg-torn--panel-rotated {
    --torn-shape: url("assets/images/torn-edge-panel-rotated.svg");
}

.eg-torn--panel-flipped {
    --torn-shape: url("assets/images/torn-edge-panel-flipped.svg");
}

.eg-torn--rotated {
    --torn-shape: url("assets/images/torn-edge-rotated.png");
}

.eg-torn--hero {
    --torn-shape: url("assets/images/hero-torn-edge.png");
}

/* ---------- Mobile ---------- */

@media (width < 64rem) {
    .eg-torn--top,
    .eg-torn--bottom + * {
        --torn-start: calc(var(--torn-height) + var(--torn-air-start, 0rem));
    }

    .eg-torn--bottom,
    main > :has(+ .eg-torn--top),
    main:has(+ .eg-torn--top) > :last-child {
        --torn-end: calc(var(--torn-height) + var(--torn-air-end, 0rem));
    }

    .eg-text-centered,
    .eg-texts-side,
    .eg-numbers,
    .eg-map,
    .eg-tiles,
    .eg-slide-anecdotes,
    .eg-news-related,
    .eg-wine-cards,
    .eg-accordion,
    .eg-figure {
        --torn-air-start: 1.25rem;
        --torn-air-end: 1.25rem;
    }

    .eg-text-split,
    .eg-gallery,
    .eg-text-column {
        --torn-air-start: 2.5rem;
        --torn-air-end: 2.5rem;
    }

    .eg-other-collections {
        --torn-air-end: 0.75rem;
    }

    .eg-wine-cards {
        --torn-air-end: 0rem;
    }

    .eg-accordion {
        --torn-air-start: 0rem;
    }

    .eg-text-centered:has(> .eg-text-centered__figure) {
        --torn-air-end: 0rem;
    }
}

/* ======================================== */
/* FOOTER                                   */
/* ======================================== */

.eg-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--footer-gap);
    padding-block-start: calc(var(--torn-start) + var(--footer-torn-clearance));
    overflow: hidden;
    --container-x-padding: var(--footer-padding-inline);
    color: var(--footer-color);
    background-color: var(--footer-bg);
}

.eg-footer__row {
    position: relative;
    z-index: 1;
}

/* ---------- Top: claim + historic mark ---------- */

.eg-footer__row--top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding-block-end: var(--footer-gap);
    border-block-end: 1px solid var(--footer-rule);
}

.eg-footer__claim {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.eg-footer__vitruvian {
    flex: 0 0 auto;
    inline-size: 7.3125rem;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
    mix-blend-mode: lighten;
}

.eg-footer__claim-text a {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: opacity 0.3s ease;
}

.eg-footer__claim-text a:is(:hover, :focus-visible) {
    opacity: 0.6;
}

.eg-footer__badge {
    flex: 0 0 auto;
    inline-size: 5.3125rem;
    block-size: auto;
    aspect-ratio: 85 / 91;
    object-fit: contain;
}

/* ---------- Logo ---------- */

.eg-footer__logo {
    display: block;
    inline-size: var(--footer-logo-width);
    color: inherit;
}

.eg-footer__logo :is(img, svg) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 200 / 59;
    object-fit: contain;
}

/* ---------- Columns ---------- */

.eg-footer__columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--footer-columns-gap);
}

.eg-footer__col {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

.eg-footer__col--about {
    flex: 0 1 26.5rem;
}

.eg-footer__col--contact {
    flex: 0 0 14.25rem;
}

.eg-footer__col--languages,
.eg-footer__col--info {
    flex: 0 0 12.6875rem;
}

.eg-footer__col-title {
    color: var(--footer-accent);
}

.eg-footer__text,
.eg-footer__address,
.eg-footer__legal {
    white-space: pre-line;
}

.eg-footer__address {
    font-style: normal;
}

.eg-footer__address {
    display: flex;
    flex-direction: column;
}

.eg-footer__address a {
    transition: opacity 0.3s ease;
}

.eg-footer__address a:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* ---------- Socials ---------- */

.eg-footer__socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.eg-footer__social {
    display: block;
    inline-size: 2rem;
    block-size: 2rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.eg-footer__social:is(:hover, :focus-visible) {
    opacity: 1;
}

.eg-footer__social img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/* ---------- Language / info lists ---------- */

.eg-footer__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--footer-line-step) - var(--footer-sans-size));
}

.eg-footer__link {
    display: inline-block;
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: var(--footer-sans-size);
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    transition: opacity 0.3s ease;
}

.eg-footer__link:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* ---------- Legal ---------- */

.eg-footer__row--legal {
    display: flex;
    align-items: center;
    min-block-size: 6.25rem;
    padding-block: 1.25rem;
    border-block-start: 1px solid var(--footer-rule);
}

.eg-footer__legal {
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0.4;
}

/* ---------- Mobile ---------- */

@media (width < 64rem) {
    .eg-footer__row--top {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        padding-block-end: 3.125rem;
    }

    .eg-footer__claim-text,
    .eg-footer__col-title,
    .eg-footer__text,
    .eg-footer__address {
        font-size: 1.125rem;
    }

    .eg-footer__claim {
        display: contents;
    }

    .eg-footer__logo {
        margin-inline: auto;
    }

    .eg-footer__vitruvian {
        order: 1;
        inline-size: var(--footer-mark-size);
    }

    .eg-footer__badge {
        order: 2;
    }

    .eg-footer__claim-text {
        order: 3;
        flex-basis: 100%;
        text-align: center;
    }

    .eg-footer__claim-text p {
        line-height: 1.2;
    }

    .eg-footer__columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
        row-gap: 2.5rem;
        align-items: start;
    }

    .eg-footer__col {
        flex: 0 0 auto;
        inline-size: 100%;
        max-inline-size: none;
    }

    .eg-footer__col--about,
    .eg-footer__col--contact {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }

    .eg-footer__col--languages,
    .eg-footer__col--info {
        margin-block-start: 3.125rem;
    }

    .eg-footer__address {
        align-items: center;
    }

    .eg-footer__socials {
        justify-content: center;
    }

    .eg-footer__list li {
        display: flex;
    }

    .eg-footer__col--languages {
        position: relative;
    }

    .eg-footer__col--languages::before {
        content: "";
        position: absolute;
        inset-block-start: -1.875rem;
        inset-inline-start: calc(var(--footer-padding-inline) * -1);
        inset-inline-end: calc(-100% - 1.25rem - var(--footer-padding-inline));
        border-block-start: 1px solid var(--footer-rule);
    }

    .eg-footer__legal {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-footer * {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* HERO                                     */
/* ======================================== */

.eg-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: max(100dvh, var(--hero-min-block-size));
    padding-block-start: var(--hero-padding-top);
    padding-inline: var(--container-x-padding);
    overflow: hidden;
    color: var(--hero-color);
    background-color: #000;
}

.eg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--hero-veil), var(--hero-veil));
    pointer-events: none;
}

.eg-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
}

.eg-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-gap);
    inline-size: 100%;
    max-inline-size: var(--hero-content-width);
    text-align: center;
}

.eg-hero__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-hero__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    translate: 0 -1px;
    color: var(--hero-ornament-color);
}

.eg-hero__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-hero__scroll {
    display: block;
    inline-size: 3.3125rem;
    color: var(--hero-color);
    transition: opacity 0.3s ease;
}

.eg-hero__scroll:is(:hover, :focus-visible) {
    opacity: 0.6;
}

.eg-hero__scroll svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

@media (width < 64rem) {
    .eg-hero {
        --hero-min-block-size: 0rem;
        --hero-padding-top: 0rem;
    }

    .eg-hero__content:has(.eg-hero__title) :is(.eg-hero__pre-title, .eg-hero__scroll) {
        position: absolute;
    }

    .eg-hero__content:has(.eg-hero__title) .eg-hero__pre-title {
        inset-block-end: calc(100% + var(--hero-gap));
        inset-inline: 0;
        justify-content: center;
    }

    .eg-hero__content:has(.eg-hero__title) .eg-hero__scroll {
        inset-block-start: calc(100% + var(--hero-gap));
        inset-inline-start: 50%;
        translate: -50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-hero__scroll {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* CTA                                      */
/* ======================================== */

.eg-cta {
    --cta-stroke-inline-size: 100%;
    --cta-stroke-block-size: 0.875rem;
    --cta-stroke-image: url("assets/images/cta-stroke.svg");
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    transition: color 0.4s ease;
}

.eg-cta__stroke {
    inline-size: var(--cta-stroke-inline-size);
    block-size: var(--cta-stroke-block-size);
    background-color: var(--cta-stroke-color);
    background-image: linear-gradient(var(--cta-stroke-hover-color), var(--cta-stroke-hover-color));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    mask: var(--cta-stroke-image) no-repeat center / 100% 100%;
    transition: background-size 0.4s ease;
}

.eg-cta:is(:hover, :focus-visible) .eg-cta__stroke {
    background-size: 100% 100%;
}

.eg-cta:is(:hover, :focus-visible) {
    color: var(--cta-hover-color, inherit);
}

@media (prefers-reduced-motion: reduce) {
    .eg-cta,
    .eg-cta__stroke {
        transition-duration: 0.01ms !important;
    }
}

@media (width < 64rem) {
    .eg-cta {
        font-size: 0.875rem;
    }
}

/* ======================================== */
/* ANIMAZIONI                               */
/* ======================================== */

/* Si scrive solo lo stato *prima* dell'entrata (`:not(.is-in)`): entrato,
   l'elemento torna ai suoi stili di sempre invece di riceverne di nuovi. */
.js-fx .fx-fade {
    transition:
        opacity var(--fade-duration) var(--fade-ease),
        translate var(--fade-duration) var(--fade-ease);
}

.js-fx .fx-fade:not(.is-in) {
    opacity: 0;
}

.js-fx :is(p, h1, h2, h3, h4, figcaption, button, .eg-cta, .rich-text).fx-fade:not(.is-in) {
    translate: 0 var(--fade-rise);
}

/* Una CTA che entra in dissolvenza ha due transizioni da tenere insieme:
   la `transition` di .fx-fade e' piu' specifica di quella di .eg-cta e le
   cancellava il colore in hover, che quindi scattava. Vanno scritte tutte
   e due qui, dove la regola e' la piu' specifica delle tre. */
.js-fx .eg-cta.fx-fade {
    transition:
        opacity var(--fade-duration) var(--fade-ease),
        translate var(--fade-duration) var(--fade-ease),
        color 0.4s ease;
}

.eg-texts-side__figure,
.eg-banner__image,
.eg-text-split__image,
.eg-tiles__image,
.eg-gallery__image,
.eg-hero-edge__image,
.eg-hero-edge__artwork,
.eg-accordion::after,
.page-template-taccuino .eg-hero-edge--paper::after {
    translate: 0 calc(var(--parallax-distance) * var(--parallax-scale) * var(--parallax-progress, 0) * var(--parallax-direction, 1));
}

.eg-hero-edge__image,
.eg-hero-edge__artwork {
    --parallax-direction: -1;
    --parallax-distance: 3rem;
}

.eg-texts-side__figure {
    --parallax-distance: 4rem;
}

.eg-banner__image {
    --parallax-distance: 3rem;
}

.eg-text-split__media {
    --parallax-distance: 3rem;
}

.eg-text-split--contain .eg-text-split__media {
    --parallax-distance: 2rem;
}

.eg-accordion {
    --parallax-distance: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fade-rise: 0rem;
    }

    .js-fx .fx-fade {
        transition: none;
    }

    .js-fx .fx-fade:not(.is-in) {
        opacity: 1;
    }

    .eg-texts-side__figure,
    .eg-banner__image,
    .eg-text-split__image,
    .eg-tiles__image,
    .eg-gallery__image,
    .eg-hero-edge__image,
    .eg-hero-edge__artwork,
    .eg-accordion::after,
    .page-template-taccuino .eg-hero-edge--paper::after {
        translate: none;
    }
}

/* ======================================== */
/* TEXT CENTERED                            */
/* ======================================== */

.eg-text-centered {
    position: relative;
    padding-block: calc(var(--torn-start) + var(--text-centered-padding-top)) calc(var(--torn-end) + var(--text-centered-padding-bottom) + var(--text-centered-figure-clearance));
    background: var(--text-centered-bg);
}

.eg-text-centered--plain {
    --text-centered-bg: var(--surface);
    --text-centered-padding-top: 3.75rem;
    --text-centered-padding-bottom: 3.75rem;
    --text-centered-width: var(--grid-6);
    --text-centered-title-width: var(--grid-10);
}

.eg-text-centered--plain .eg-text-centered__text > p {
    font-size: 1.25rem;
}

.eg-text-centered__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--text-centered-gap);
    max-inline-size: calc(var(--text-centered-width) + var(--container-x-padding) * 2);
    text-align: center;
}

.eg-text-centered__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-text-centered__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--text-centered-accent);
}

.eg-text-centered__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-text-centered__text {
    display: flex;
    flex-direction: column;
    gap: var(--text-centered-text-gap);
    inline-size: 100%;
}

.eg-text-centered__quote {
    color: var(--text-centered-quote-color);
}

.eg-text-centered__quote-author {
    max-inline-size: var(--text-centered-author-width);
    margin-inline: auto;
    color: var(--text-centered-accent);
}

.eg-text-centered__title {
    margin-inline: max(calc((var(--text-centered-width) - var(--text-centered-title-width)) / 2), calc((100% - 100vw) / 2 + var(--container-x-padding)));
    color: var(--text-centered-title-color);
    text-wrap: balance;
}

.page-template-leonardo-wine-lover {
    --text-centered-title-width: 52rem;
}

.eg-text-centered--dark {
    --cta-hover-color: currentColor;
    --text-centered-bg: #58001b;
    --text-centered-padding-top: 3.75rem;
    --text-centered-padding-bottom: 6.46875rem;
    --text-centered-width: var(--grid-10);
    --text-centered-title-width: var(--grid-10);
    --text-centered-gap: 5rem;
    --text-centered-text-gap: 2.5rem;
    --text-centered-title-color: #f3f2f1;
    --text-centered-quote-color: #fff;
    color: #f3f2f1;
}

.eg-text-centered--intro {
    --text-centered-bg: var(--surface);
    --text-centered-padding-top: 1.25rem;
    --text-centered-padding-bottom: 1.25rem;
    --text-centered-width: var(--grid-8);
    --text-centered-title-width: var(--grid-8);
    --text-centered-gap: 3.125rem;
    --text-centered-text-gap: 2.5rem;
}

.eg-text-centered--veiled {
    --text-centered-text-gap: 1.25rem;
}

@media (width < 64rem) {
    .eg-text-centered {
        --text-centered-padding-top: 3.75rem;
        --text-centered-padding-bottom: 3.75rem;
        --text-centered-gap: 1.5rem;
    }
}

.eg-text-centered--lead {
    --text-centered-padding-top: 12.46875rem;
    --text-centered-padding-bottom: 5.3125rem;
    --text-centered-width: 50rem;
}

.eg-text-centered--lead .eg-text-centered__text > p {
    font-size: 1.875rem;
    line-height: 1;
}

.eg-text-centered--outro {
    --text-centered-padding-top: 3.75rem;
    --text-centered-padding-bottom: 6.25rem;
    --text-centered-width: var(--grid-6);
    --text-centered-gap: 2.5rem;
}

.eg-text-centered.eg-torn--layered {
    isolation: isolate;
    background: none;
}

.eg-text-centered.eg-torn--layered::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--text-centered-bg);
}

.page-template-sangiovese {
    --sangiovese-grapes-x: 10.5rem;
    --sangiovese-grapes-y: -8.995rem;
    --sangiovese-grapes-width: 19.648125rem;
    --sangiovese-grapes-height: 24.890625rem;
    --sangiovese-drops-x: 23.8125rem;
    --sangiovese-drops-y: -11.3125rem;
    --sangiovese-drops-width: 42.048125rem;
    --sangiovese-drops-height: 34.090625rem;
}

.page-template-sangiovese .eg-text-centered--lead .eg-text-centered__figure {
    inset-block-start: var(--sangiovese-grapes-y);
    inset-block-end: auto;
    inset-inline-start: calc(50% - var(--sangiovese-grapes-x));
    inline-size: var(--sangiovese-grapes-width);
    block-size: var(--sangiovese-grapes-height);
    object-fit: contain;
    z-index: 1;
}

.page-template-sangiovese .eg-text-centered--lead::after {
    content: "";
    position: absolute;
    inset-block-start: var(--sangiovese-drops-y);
    inset-inline-start: calc(50% - var(--sangiovese-drops-x));
    z-index: 0;
    inline-size: var(--sangiovese-drops-width);
    block-size: var(--sangiovese-drops-height);
    background: url("assets/images/wine-drops-trail.png") no-repeat center / 100% 100%;
    pointer-events: none;
}

.page-template-collezione,
.single-wine {
    --collezione-drops-x: calc(var(--grid-8) / 2 + 1.25rem);
    --collezione-drops-y: 3.5rem;
    --collezione-drops-width: 21.9375rem;
    --collezione-drops-height: 22.375rem;
}

.page-template-collezione .eg-text-centered--intro,
.single-wine .eg-text-centered--intro {
    overflow-x: clip;
    --text-centered-padding-top: 6.875rem;
    --text-centered-padding-bottom: 2.5rem;
}

.page-template-collezione .eg-text-centered--intro .eg-text-centered__title,
.single-wine .eg-text-centered--intro .eg-text-centered__title {
    text-wrap: wrap;
}

.page-template-collezione .eg-text-centered--intro::after,
.single-wine .eg-text-centered--intro::after {
    content: "";
    position: absolute;
    inset-block-start: var(--collezione-drops-y);
    inset-inline-start: calc(50% + var(--collezione-drops-x));
    z-index: 0;
    inline-size: var(--collezione-drops-width);
    block-size: var(--collezione-drops-height);
    background: url("assets/images/wine-drops-scattered.png") no-repeat center / 100% 100%;
    scale: 1 -1;
    pointer-events: none;
}

.eg-text-centered__figure {
    position: absolute;
    inset-block-end: var(--text-centered-figure-offset);
    inset-inline-start: 0;
    z-index: 0;
    inline-size: var(--text-centered-figure-width);
    block-size: auto;
    pointer-events: none;
}

@media (width < 64rem) {
    .eg-text-centered--veiled .eg-text-centered__text > p br {
        display: none;
    }

    .eg-text-centered.eg-text-centered {
        --text-centered-padding-top: 3.75rem;
        --text-centered-padding-bottom: 3.75rem;
        --text-centered-width: 100%;
        --text-centered-title-width: 100%;
        --text-centered-author-width: 100%;
        --text-centered-gap: 1.5rem;
        --text-centered-text-gap: 1.25rem;
        overflow-x: clip;
    }

    .eg-text-centered--plain .eg-text-centered__text > p {
        font-size: 1.125rem;
    }

    .eg-text-centered--lead.eg-text-centered--lead {
        --text-centered-padding-top: 8.5rem;
    }

    .eg-text-centered--lead .eg-text-centered__text > p {
        font-size: 1.375rem;
        line-height: 1.1;
    }

    .eg-text-centered--lead .eg-text-centered__text > p br,
    .eg-text-centered--dark .eg-text-centered__quote br {
        display: none;
    }

    .eg-text-centered:has(> .eg-text-centered__figure) {
        --text-centered-figure-width: 16rem;
        --text-centered-figure-offset: 0rem;
        --text-centered-figure-clearance: 0rem;
        --text-centered-figure-bite: var(--torn-end);
        --text-centered-padding-bottom: 0rem;
    }

    .eg-text-centered__figure {
        position: static;
        display: block;
        margin-block-start: var(--text-centered-figure-gap);
        margin-block-end: calc(var(--text-centered-figure-bite) * -1);
        margin-inline: auto;
    }

    .page-template-sangiovese .eg-text-centered--lead .eg-text-centered__figure {
        margin-block-end: var(--torn-end);
    }

    .page-template-sangiovese .eg-hero-edge--sketches {
        --hero-edge-block-size: 0rem;
        --hero-edge-padding-top: 7.5rem;
    }

    .page-template-sangiovese .eg-text-centered--lead.eg-text-centered--lead {
        --text-centered-padding-top: 8rem;
        --text-centered-padding-bottom: 3.75rem;
    }

    .page-template-sangiovese .eg-text-centered--lead .eg-text-centered__figure.eg-text-centered__figure {
        position: absolute;
        margin: 0;
    }

    .page-template-sangiovese {
        --sangiovese-grapes-x: 5rem;
        --sangiovese-grapes-y: -3rem;
        --sangiovese-grapes-width: 10rem;
        --sangiovese-grapes-height: 12.67rem;
        --sangiovese-drops-x: 11rem;
        --sangiovese-drops-y: -6rem;
        --sangiovese-drops-width: 21rem;
        --sangiovese-drops-height: 17rem;
    }

    .page-template-sangiovese .eg-text-centered:has(> .eg-text-centered__figure) {
        --text-centered-figure-clearance: 0rem;
    }

    .page-template-collezione,
    .single-wine {
        --collezione-drops-x: calc(50% - 5.5rem);
        --collezione-drops-y: 0.5rem;
        --collezione-drops-width: 6rem;
        --collezione-drops-height: 6.12rem;
    }

    /* Sotto la scheda del vino l'intro non ha aria sopra il titolo: le gocce
       si stringono nell'angolo, accanto all'occhiello. */
    .eg-text-specs + .eg-text-centered--intro {
        --collezione-drops-x: calc(50% - 3.5rem);
        --collezione-drops-y: 0rem;
        --collezione-drops-width: 3.25rem;
        --collezione-drops-height: 3.315rem;
    }

    .page-template-collezione .eg-text-centered--intro,
    .single-wine .eg-text-centered--intro {
        --text-centered-padding-top: 5rem;
        --text-centered-padding-bottom: 2.5rem;
    }

    .eg-text-centered--intro .eg-text-centered__title {
        font-size: 1.875rem;
    }
}

@media (width < 64rem) {
    .eg-text-split + .eg-text-centered--plain.eg-text-centered--plain {
        --text-centered-padding-top: 2.5rem;
    }

    .eg-text-specs + .eg-text-centered--intro.eg-text-centered--intro {
        --text-centered-padding-top: 1.25rem;
    }
}

/* ======================================== */
/* TEXTS SIDE                               */
/* ======================================== */

.eg-texts-side {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--torn-start) + var(--texts-side-padding-top)) calc(var(--torn-end) + var(--texts-side-padding-bottom));
    overflow: clip;
    background-color: var(--surface);
}

.eg-texts-side__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--texts-side-gap);
}

.eg-texts-side::before,
.eg-texts-side::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: var(--torn-start) 0 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

.eg-texts-side::before {
    background-image: url("assets/images/sketches.jpg");
    background-position: 100% var(--texts-side-sketches-y);
    background-size: var(--texts-side-sketches-width) auto;
    mix-blend-mode: multiply;
    opacity: var(--texts-side-sketches-opacity);
}

.eg-texts-side::after {
    background-image: url("assets/images/wine-drops.png");
    background-position: calc(50% - var(--texts-side-drops-x)) var(--texts-side-drops-y);
    background-size: var(--texts-side-drops-width) auto;
}

.eg-texts-side__col {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--texts-side-gap);
    max-inline-size: var(--texts-side-col-width);
    translate: 0 -1.25rem;
    text-align: center;
}

.eg-texts-side__col--end {
    align-items: center;
    gap: var(--texts-side-end-gap);
}

.eg-texts-side__title {
    color: var(--texts-side-title-color);
}

.eg-texts-side__figure {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 1 var(--texts-side-figure-width);
    align-items: center;
    justify-content: center;
    max-inline-size: var(--texts-side-figure-width);
    block-size: var(--texts-side-figure-height);
}

.eg-texts-side__figure img {
    inline-size: 100%;
    block-size: var(--texts-side-image-height);
    object-fit: contain;
}

@media (width < 64rem) {
    .eg-texts-side {
        --texts-side-padding-top: 3.75rem;
        --texts-side-padding-bottom: 2.5rem;
        --texts-side-gap: 1.5rem;
        --texts-side-end-gap: var(--texts-side-gap);
        --texts-side-col-width: 100%;
        --texts-side-figure-width: 12rem;
        --texts-side-figure-height: auto;
        --texts-side-image-height: 15rem;
        --texts-side-drops-width: 16rem;
        --texts-side-drops-x: 1.5rem;
        --texts-side-drops-y: 13rem;
    }

    .eg-texts-side__inner {
        flex-direction: column;
    }

    .eg-texts-side__col {
        flex: 0 0 auto;
        translate: none;
    }

    .eg-texts-side__figure {
        flex: 0 0 auto;
        inline-size: 100%;
        --parallax-distance: 2rem;
    }
}

/* ======================================== */
/* SLIDE COLLECTION                         */
/* ======================================== */

.eg-slide-collection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-collection-gap);
    padding-block: calc(var(--torn-start) + var(--slide-collection-padding-top)) var(--torn-end);
    overflow: hidden;
    background-color: var(--surface);
}

.eg-slide-collection__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-collection-head-gap);
    text-align: center;
}

.eg-slide-collection__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-slide-collection__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.269rem;
    color: var(--accent);
}

.eg-slide-collection__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-slide-collection__title {
    text-wrap: balance;
    color: var(--slide-collection-title-color);
}

/* ---------- Tab ---------- */

.eg-slide-collection__tabs {
    display: flex;
    align-items: center;
    gap: var(--slide-collection-tabs-gap);
}

.eg-slide-collection__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-collection-tab-gap);
    min-inline-size: var(--slide-collection-tab-width);
    padding: 0;
    color: var(--on-surface);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.eg-slide-collection__tab:is(:hover, :focus-visible),
.eg-slide-collection__tab.is-active {
    color: var(--accent);
}

.eg-slide-collection__tab-label {
    white-space: nowrap;
}

.eg-slide-collection__tab-stroke {
    inline-size: var(--slide-collection-tab-stroke-width);
    block-size: var(--slide-collection-tab-stroke-height);
    background-color: currentColor;
    mask: url("assets/images/cta-stroke-frayed.svg") no-repeat center / 100% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eg-slide-collection__tab.is-active .eg-slide-collection__tab-stroke {
    opacity: 1;
}

/* ---------- Pannello di carta ---------- */

.eg-slide-collection__panel {
    position: relative;
    align-self: stretch;
    block-size: var(--slide-collection-panel-height);
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
}

.eg-slide-collection__panel::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--slide-collection-torn-height);
    background-color: var(--surface);
    mask: url("assets/images/torn-edge-top.svg") no-repeat top / 100% 100%;
}

.eg-slide-collection__track {
    display: contents;
}

.eg-slide-collection__slide {
    position: absolute;
    z-index: 2;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: min(100%, var(--slide-collection-stage-width));
    translate: -50% 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.5s ease,
        visibility 0s linear 0.5s;
}

.eg-slide-collection__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.5s ease,
        visibility 0s;
}

.eg-slide-collection__content {
    position: absolute;
    inset-block-start: var(--slide-collection-content-top);
    inset-inline-start: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-collection-content-gap);
    inline-size: var(--slide-collection-content-width);
    translate: -50% 0;
    text-align: center;
}

.eg-slide-collection__slide-title {
    color: var(--accent);
}

.eg-slide-collection__text {
    inline-size: var(--slide-collection-text-width);
}

.eg-slide-collection__cta {
    --cta-stroke-image: url("assets/images/cta-stroke-frayed.svg");
    --cta-stroke-inline-size: 14.6875rem;
    --cta-stroke-block-size: 1.238rem;
    position: absolute;
    inset-block-start: var(--slide-collection-cta-top);
    inset-inline-start: 50%;
    inline-size: var(--slide-collection-text-width);
    translate: -50% 0;
}

/* ---------- Frecce ---------- */

.eg-slide-collection__dots,
.eg-slide-collection__cta-short {
    display: none;
}

.eg-slide-collection__arrow {
    position: absolute;
    z-index: 3;
    inset-block-start: var(--slide-collection-arrow-top);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--slide-collection-arrow-size);
    block-size: var(--slide-collection-arrow-size);
    padding: 0;
    color: var(--slide-collection-arrow-color);
    background: none;
    border: 1px solid var(--slide-collection-arrow-border);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.eg-slide-collection__arrow:is(:hover, :focus-visible) {
    background-color: rgb(from var(--slide-collection-arrow-border) r g b / 0.25);
}

.eg-slide-collection__arrow svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.eg-slide-collection__arrow--prev {
    inset-inline-start: calc(50% - var(--slide-collection-content-width) / 2);
    rotate: 90deg;
}

.eg-slide-collection__arrow--next {
    inset-inline-start: calc(50% + var(--slide-collection-content-width) / 2 - var(--slide-collection-arrow-size));
    rotate: -90deg;
}

/* ---------- Il collage, slide per slide ---------- */

.eg-slide-collection__bottles,
.eg-slide-collection__decoration {
    position: absolute;
    object-fit: contain;
}

.eg-slide-collection__bottles {
    inset-block-start: var(--slide-collection-bottles-top);
    block-size: var(--slide-collection-bottles-height);
}

.eg-slide-collection__slide:nth-child(1) .eg-slide-collection__bottles {
    inset-inline-start: 7.875rem;
    inline-size: 14.05rem;
}

.eg-slide-collection__slide:nth-child(1) .eg-slide-collection__decoration {
    inset-block-start: 1.4206rem;
    inset-inline-end: 4rem;
    inline-size: 23.3125rem;
    block-size: 23.25rem;
}

.eg-slide-collection__slide:nth-child(2) .eg-slide-collection__bottles {
    inset-inline-end: 6.3125rem;
    inline-size: 18rem;
}

.eg-slide-collection__slide:nth-child(2) .eg-slide-collection__decoration {
    inset-block-start: -0.7669rem;
    inset-inline-start: 5.8125rem;
    inline-size: 18.25rem;
    block-size: 22.875rem;
}

.eg-slide-collection__slide:nth-child(3) .eg-slide-collection__bottles {
    inset-inline-start: 6.875rem;
    inline-size: 14.5rem;
}

.eg-slide-collection__slide:nth-child(3) .eg-slide-collection__decoration {
    inset-block-end: 0;
    inset-inline-end: 0rem;
    inline-size: 21.4375rem;
    block-size: 24.4375rem;
}

.eg-slide-collection__slide:nth-child(4) .eg-slide-collection__bottles {
    inset-inline-end: 5.125rem;
    inline-size: 14.55rem;
}

.eg-slide-collection__slide:nth-child(4) .eg-slide-collection__decoration {
    inset-block-end: 0;
    inset-inline-start: 4.25rem;
    inline-size: 16.875rem;
    block-size: 22.875rem;
}

.eg-slide-collection__slide:nth-child(5) .eg-slide-collection__bottles {
    inset-inline-start: 7rem;
    inline-size: 15.3rem;
}

.eg-slide-collection__slide:nth-child(5) .eg-slide-collection__decoration {
    inset-block-end: 0;
    inset-inline-end: 0rem;
    inline-size: 24.4375rem;
    block-size: 24.5rem;
}
@media (width < 64rem) {
    .eg-slide-collection {
        --slide-collection-padding-top: 1.875rem;
        --slide-collection-gap: 2rem;
        --slide-collection-head-gap: 1.5rem;
        --slide-collection-tabs-gap: 1.25rem;
        --slide-collection-tab-width: 0rem;
        --slide-collection-torn-height: 2.5rem;
        --slide-collection-arrow-size: 2.75rem;
    }

    .eg-slide-collection__tabs {
        align-self: stretch;
        justify-content: flex-start;
        padding-inline: var(--container-x-padding);
        padding-block-end: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .eg-slide-collection__tab {
        flex: 0 0 auto;
    }

    .eg-slide-collection__panel {
        display: grid;
        grid-template-columns: 1fr auto auto auto 1fr;
        gap: 2.5rem 1rem;
        align-items: center;
        block-size: auto;
        padding-block-end: 3.75rem;
    }

    .eg-slide-collection__track {
        display: flex;
        grid-row: 1;
        grid-column: 1 / -1;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
    }

    .eg-slide-collection__track::-webkit-scrollbar {
        display: none;
    }

    .eg-slide-collection__slide {
        position: relative;
        inset: auto;
        inline-size: auto;
        translate: none;
        flex: 0 0 100%;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 5rem var(--container-x-padding) 3.75rem;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .eg-slide-collection__slide:nth-child(n) .eg-slide-collection__bottles {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: 18rem;
        max-inline-size: 100%;
    }

    .eg-slide-collection__decoration {
        display: none;
    }

    .eg-slide-collection__content,
    .eg-slide-collection__cta {
        position: relative;
        inset: auto;
        inline-size: 100%;
        translate: none;
    }

    /* Da telefono l'etichetta e' «Scopri di più»: la pennellata e' larga
       quanto la scritta (layout), non i 235px di quella lunga. */
    .eg-slide-collection__cta {
        --cta-stroke-inline-size: 100%;
        inline-size: auto;
        max-inline-size: 100%;
        line-height: 1.4;
        text-align: center;
    }

    .eg-slide-collection__text {
        inline-size: 100%;
    }

    .eg-slide-collection__arrow {
        position: relative;
        inset: auto;
        grid-row: 2;
    }

    .eg-slide-collection__arrow--prev {
        grid-column: 2;
    }

    .eg-slide-collection__arrow--next {
        grid-column: 4;
    }

    .eg-slide-collection__dots {
        display: flex;
        grid-row: 2;
        grid-column: 3;
        gap: 0.625rem;
        align-items: center;
        justify-content: center;
    }

    .eg-slide-collection__dot {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--accent);
        opacity: 0.3;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    .eg-slide-collection__dot.is-active {
        opacity: 1;
    }

    .eg-slide-collection__cta-long {
        display: none;
    }

    .eg-slide-collection__cta-short {
        display: inline;
    }

    .eg-slide-collection__slide {
        padding-block-end: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-slide-collection__slide,
    .eg-slide-collection__tab,
    .eg-slide-collection__tab-stroke,
    .eg-slide-collection__arrow {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* BANNER                                   */
/* ======================================== */

.eg-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: calc(var(--banner-block-size) + var(--torn-start) + var(--torn-end));
    padding-block: calc(var(--torn-start) + var(--banner-padding-block)) calc(var(--torn-end) + var(--banner-padding-block-end, var(--banner-padding-block)));
    overflow: clip;
    color: var(--surface);
}

.eg-banner__image {
    position: absolute;
    inset: calc(var(--parallax-distance) * -1) 0 auto;
    z-index: -2;
    inline-size: 100%;
    block-size: calc(100% + var(--parallax-distance) * 2);
    object-fit: cover;
    pointer-events: none;
}

.eg-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(89.7deg, rgb(0 0 0 / var(--banner-veil-edge)) 0.65%, rgb(0 0 0 / var(--banner-veil)) 51.71%, rgb(0 0 0 / var(--banner-veil-edge)) 90.29%);
    pointer-events: none;
}

.eg-banner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--banner-gap);
    max-inline-size: calc(var(--banner-width) + var(--container-x-padding) * 2);
    text-align: center;
}

.eg-banner__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-banner__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--banner-accent);
}

.eg-banner__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-banner__logo {
    flex: 0 0 auto;
    inline-size: auto;
    block-size: var(--banner-logo-height);
}

.eg-banner__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--banner-column-gap);
    inline-size: 100%;
    max-inline-size: var(--banner-column-width);
}

.eg-banner__text {
    display: flex;
    flex-direction: column;
    gap: var(--banner-text-gap);
    inline-size: 100%;
}

.eg-banner__title {
    text-wrap: balance;
}

.eg-banner__title .color-accent {
    color: inherit;
}

.eg-banner__body {
    max-inline-size: var(--banner-body-width);
    margin-inline: auto;
}

.eg-banner .eg-cta {
    --cta-hover-color: currentColor;
    --cta-stroke-color: var(--banner-cta-stroke-color);
    --cta-stroke-hover-color: var(--banner-cta-stroke-hover-color);
}

/* ---------- Le varianti ---------- */

.eg-banner--logo {
    --banner-block-size: 0rem;
    --banner-padding-block: 3.478rem;
    --banner-width: var(--grid-8);
    --banner-gap: 5rem;
    --banner-column-width: var(--grid-6);
    --banner-veil: 0.3;
    --banner-cta-stroke-hover-color: #a18639;
}

.eg-banner--logo .eg-banner__title {
    font-size: 2.8125rem;
    line-height: 0.85;
}

.eg-banner--flat {
    --banner-width: var(--grid-8);
    --banner-veil: 0.3;
}

.eg-banner--flat::before {
    background-image: linear-gradient(rgb(0 0 0 / var(--banner-veil)), rgb(0 0 0 / var(--banner-veil)));
}

.eg-banner--quote {
    --banner-block-size: 0rem;
    --banner-padding-block: 12.5rem;
}

.eg-banner--quote .eg-banner__body {
    max-inline-size: none;
    margin-inline: 0;
}

.eg-banner--claim {
    --banner-block-size: 0rem;
    --banner-padding-block: 13.75rem;
}

.eg-banner--veiled {
    --banner-block-size: 0rem;
    --banner-padding-block: 16.25rem;
    --banner-width: var(--grid-8);
    --banner-gap: 2.5rem;
    --banner-veil: 0.4;
    --banner-veil-edge: 0.3;
}

.eg-banner--veiled .eg-banner__title {
    font-size: 4.375rem;
    line-height: 0.85;
}

.page-template-impronta .eg-banner--logo .eg-banner__title {
    font-size: 4.375rem;
    line-height: 0.85;
}

.page-template-impronta .eg-banner--logo {
    --banner-padding-block-end: 7.858rem;
}

@media (width < 64rem) {
    .eg-banner {
        --banner-block-size: 37.5rem;
        --banner-padding-block: 3.75rem;
        --banner-logo-height: 5rem;
        --banner-gap: 2rem;
        --banner-column-gap: 2rem;
        --banner-text-gap: 1.25rem;
    }

    .page-template-impronta .eg-banner--logo {
        --banner-padding-block-end: var(--banner-padding-block);
    }

    .eg-banner--quote,
    .eg-banner--claim,
    .eg-banner--veiled {
        --banner-block-size: 0rem;
        --banner-padding-block: 3.75rem;
    }

    .eg-banner:has(.eg-banner__image) {
        --banner-block-size: 0rem;
        --banner-padding-block: 7.5rem;
        --banner-padding-block-end: 7.5rem;
    }

    .eg-banner--logo .eg-banner__title,
    .eg-banner--veiled .eg-banner__title,
    .page-template-impronta .eg-banner--logo .eg-banner__title {
        font-size: 2.25rem;
    }
}

.page-template-sangiovese .eg-banner__image {
    object-position: center 59.76%;
}

/* ======================================== */
/* SLIDE ANECDOTES                          */
/* ======================================== */

.eg-slide-anecdotes {
    --autoplay-duration: var(--slide-anecdotes-autoplay-duration);
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    padding-block: calc(var(--torn-start) + var(--slide-anecdotes-padding-block)) calc(var(--torn-end) + var(--slide-anecdotes-padding-block));
    overflow: hidden;
    background-color: var(--surface);
}

.eg-slide-anecdotes__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-anecdotes-gap);
}

.eg-slide-anecdotes__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-anecdotes-body-gap);
    inline-size: 100%;
}

.eg-slide-anecdotes__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-slide-anecdotes__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--slide-anecdotes-accent);
}

.eg-slide-anecdotes__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-slide-anecdotes__viewport {
    display: grid;
    inline-size: 100%;
}

.eg-slide-anecdotes__slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-anecdotes-text-gap);
    inline-size: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--slide-anecdotes-fade-duration) ease,
        visibility 0s linear var(--slide-anecdotes-fade-duration);
}

.eg-slide-anecdotes__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--slide-anecdotes-fade-duration) ease,
        visibility 0s;
}

.eg-slide-anecdotes__slide::before {
    content: "";
    position: absolute;
    z-index: -1;
    inline-size: var(--slide-anecdotes-drops-inline-size);
    block-size: var(--slide-anecdotes-drops-block-size);
    background: url("assets/images/wine-drops-scattered.png") no-repeat center / 100% 100%;
    pointer-events: none;
}

.eg-slide-anecdotes__slide:nth-child(1)::before {
    inset-inline-start: calc(50% - var(--slide-anecdotes-width) / 2 - 1.25rem - var(--slide-anecdotes-drops-inline-size));
    inset-block-start: 18.375rem;
    rotate: 180deg;
}

.eg-slide-anecdotes__slide:nth-child(2)::before {
    inset-inline-start: calc(50% + var(--slide-anecdotes-width) / 2 + 1.25rem);
    inset-block-start: 21.25rem;
}

.eg-slide-anecdotes__slide:nth-child(3)::before {
    inset-inline-start: calc(50% - var(--slide-anecdotes-width) / 2 - 4.25rem - var(--slide-anecdotes-drops-inline-size));
    inset-block-start: 20.71375rem;
    rotate: -65.37deg;
}

/* Le posizioni disegnate sono tre. Una quarta slide, senza questa riga, si
   ritroverebbe la macchia nell'angolo in alto a sinistra. */
.eg-slide-anecdotes__slide:nth-child(n + 4)::before {
    content: none;
}

.eg-slide-anecdotes__image {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    pointer-events: none;
}

.eg-slide-anecdotes__animation {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    mix-blend-mode: darken;
    pointer-events: none;
}

/* ---------- Slide 1 ---------- */
.eg-slide-anecdotes__slide:nth-child(1) .eg-slide-anecdotes__image--start {
    inline-size: 13.125rem;
    block-size: 12.625rem;
    inset-inline-start: calc(var(--slide-anecdotes-stage-start) + 7.55875rem);
    inset-block-start: 10.48125rem;
    rotate: -10deg;
    mix-blend-mode: multiply;
}

.eg-slide-anecdotes__slide:nth-child(1) .eg-slide-anecdotes__animation {
    inline-size: 19.5rem;
    block-size: 19.5rem;
    inset-inline-end: calc(var(--slide-anecdotes-stage-start) + 2.5rem);
    inset-block-start: 4rem;
}

/* ---------- Slide 2 ---------- */
.eg-slide-anecdotes__slide:nth-child(2) .eg-slide-anecdotes__image--start {
    inline-size: 14.775rem;
    block-size: 18.9375rem;
    inset-inline-start: calc(var(--slide-anecdotes-stage-start) + 6.07125rem);
    inset-block-start: 5.61875rem;
}

.eg-slide-anecdotes__slide:nth-child(2) .eg-slide-anecdotes__image--end {
    inline-size: 9.1875rem;
    block-size: 12.25rem;
    inset-inline-end: calc(var(--slide-anecdotes-stage-start) + 6.31875rem);
    inset-block-start: 6.579375rem;
    rotate: 10deg;
    mix-blend-mode: multiply;
}

/* ---------- Slide 3 ---------- */
.eg-slide-anecdotes__slide:nth-child(3) .eg-slide-anecdotes__animation {
    inline-size: 18.6875rem;
    block-size: 18.6875rem;
    inset-inline-end: calc(var(--slide-anecdotes-stage-start) + 3rem);
    inset-block-start: 5.6875rem;
}

.eg-slide-anecdotes__title {
    min-block-size: var(--slide-anecdotes-title-height);
    inline-size: var(--slide-anecdotes-title-width);
    color: var(--slide-anecdotes-title-color);
}

.eg-slide-anecdotes__text {
    min-block-size: var(--slide-anecdotes-text-height);
    inline-size: 100%;
    max-inline-size: var(--slide-anecdotes-width);
}

/* ---------- Contatore ---------- */

.eg-slide-anecdotes__pager {
    display: flex;
    align-items: center;
    gap: var(--slide-anecdotes-pager-gap);
}

.eg-slide-anecdotes__arrow {
    position: relative;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.eg-slide-anecdotes__arrow::after {
    content: "";
    position: absolute;
    inset: calc(var(--slide-anecdotes-arrow-hit) * -1);
}

.eg-slide-anecdotes__arrow svg {
    display: block;
    inline-size: 0.3125rem;
    block-size: 0.5rem;
}

.eg-slide-anecdotes__arrow--prev svg {
    rotate: 180deg;
}

.eg-slide-anecdotes__count {
    display: flex;
    align-items: center;
    gap: var(--slide-anecdotes-pager-gap);
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.eg-slide-anecdotes__current,
.eg-slide-anecdotes__total {
    flex: 0 0 auto;
    min-inline-size: 0.5rem;
    text-align: center;
}

.eg-slide-anecdotes__track {
    position: relative;
    flex: 0 0 auto;
    inline-size: var(--slide-anecdotes-track-inline-size);
    block-size: 1px;
    background-color: var(--slide-anecdotes-track-color);
}

.eg-slide-anecdotes__progress {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--slide-anecdotes-progress, 0%);
    block-size: 1px;
    background-color: var(--slide-anecdotes-accent);
    transition: inline-size 0.5s ease;
}

@media (width < 64rem) {
    .eg-slide-anecdotes {
        --slide-anecdotes-padding-block: 3.75rem;
        --slide-anecdotes-gap: 2rem;
        --slide-anecdotes-body-gap: 1rem;
        --slide-anecdotes-text-gap: 1.25rem;
        --slide-anecdotes-title-width: 100%;
        --slide-anecdotes-title-height: 0rem;
        --slide-anecdotes-text-height: 0rem;
        --slide-anecdotes-drops-inline-size: 5.5rem;
        --slide-anecdotes-drops-block-size: 5.6rem;
    }

    .eg-slide-anecdotes__viewport {
        position: relative;
        touch-action: pan-y;
    }

    .eg-slide-anecdotes__slide {
        padding-block-start: 1.5rem;
    }

    .eg-slide-anecdotes__slide:nth-child(n)::before {
        inset-inline: auto -1.5rem;
        inset-block-start: calc(var(--slide-anecdotes-drops-block-size) * -1 - 1rem);
    }

    .eg-slide-anecdotes__slide:nth-child(n) :is(.eg-slide-anecdotes__image, .eg-slide-anecdotes__animation) {
        inline-size: 9rem;
        block-size: 9rem;
        opacity: 0.6;
    }

    .eg-slide-anecdotes__slide:nth-child(n) .eg-slide-anecdotes__image--start {
        inset-block-start: 9rem;
        inset-inline: -3rem auto;
    }

    .eg-slide-anecdotes__slide:nth-child(n) :is(.eg-slide-anecdotes__image--end, .eg-slide-anecdotes__animation) {
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline: auto -3rem;
    }

    .eg-slide-anecdotes__slide:nth-child(2) .eg-slide-anecdotes__image--start {
        inline-size: 10rem;
        block-size: auto;
        inset-block-start: 7rem;
        inset-inline-start: -5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-slide-anecdotes__slide,
    .eg-slide-anecdotes__progress {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* HERO EDGE                                */
/* ======================================== */

.eg-hero-edge {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    min-block-size: calc(var(--hero-edge-block-size) + var(--torn-start));
    padding-block: calc(var(--torn-start) + var(--hero-edge-padding-top)) calc(var(--torn-end) + var(--hero-edge-torn-clearance));
    overflow: clip;
    color: var(--hero-edge-color);
}

.eg-hero-edge__image {
    position: absolute;
    inset: calc(var(--parallax-distance) * var(--parallax-scale) * -1) 0 auto;
    z-index: -2;
    inline-size: 100%;
    block-size: calc(100% + var(--parallax-distance) * var(--parallax-scale) * 2);
    object-fit: cover;
}

.eg-hero-edge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(var(--hero-edge-veil), var(--hero-edge-veil));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

.eg-hero-edge__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-edge-gap);
    max-inline-size: calc(var(--hero-edge-width) + var(--container-x-padding) * 2);
    text-align: center;
}

.eg-hero-edge__breadcrumbs {
    font-size: 0.8125rem;
    color: var(--hero-edge-breadcrumbs-color);
}

.eg-hero-edge__breadcrumbs nav.breadcrumbs [aria-current] {
    color: rgb(from currentColor r g b / var(--hero-edge-breadcrumbs-current-opacity));
}

.eg-hero-edge__breadcrumbs li svg {
    display: none;
}

.eg-hero-edge__breadcrumbs li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--_gap) / -2);
    translate: 50% -50%;
    inline-size: 0.25rem;
    block-size: 0.375rem;
    background-color: var(--hero-edge-ornament-color);
    mask: url("assets/images/ornament-end.svg") no-repeat center / 100% 100%;
}

.eg-hero-edge__title {
    inline-size: var(--hero-edge-title-width);
}

.eg-hero-edge__title .color-accent {
    color: inherit;
}

@media (width < 64rem) {
    .eg-hero-edge {
        align-items: center;
        --hero-edge-block-size: 37.5rem;
        --hero-edge-padding-top: var(--hero-edge-torn-clearance);
        --hero-edge-torn-clearance: 3.75rem;
        --hero-edge-gap: 1.5rem;
    }
}

.eg-hero-edge__breadcrumbs li:last-child:nth-child(n + 3) {
    display: none;
}

.eg-hero-edge__breadcrumbs li:nth-last-child(2):nth-child(n + 2) {
    margin-inline-end: 0;
}

.eg-hero-edge__breadcrumbs li:nth-last-child(2):nth-child(n + 2)::after {
    content: none;
}

.eg-hero-edge--sketches {
    --hero-edge-padding-top: 16rem;
    --hero-edge-torn-clearance: 10.5625rem;
    --hero-edge-title-width: 68rem;
    --hero-edge-color: #5f402e;
    --hero-edge-ornament-color: var(--accent);
    --hero-edge-breadcrumbs-color: #000;
    --hero-edge-breadcrumbs-current-opacity: 0.5;
    --hero-edge-sketches-y: 5.268rem;
    --hero-edge-book-width: 17.9375rem;
    --hero-edge-book-height: 21.75rem;
    --hero-edge-book-y: 26.375rem;
    --hero-edge-sketches-left-width: 19.4375rem;
    --hero-edge-sketches-left-height: 36.875rem;
    --hero-edge-sketches-left-y: 4rem;
    --hero-edge-sketches-right-width: 17.625rem;
    --hero-edge-sketches-right-height: 37.6875rem;
    --hero-edge-sketches-right-x: 0.0625rem;
    --hero-edge-sketches-right-y: 1.4375rem;
    --hero-edge-drops-width: 21.9375rem;
    --hero-edge-drops-height: 22.375rem;

    --hero-edge-drops-end: 4.8125rem;
    --hero-edge-drops-y: 25rem;
    background-color: var(--surface);
}

.eg-hero-edge--sketches::before {
    background-image: url("assets/images/sketches.jpg");
    background-position: center var(--hero-edge-sketches-y);
    background-size: 100% auto;
    mix-blend-mode: multiply;
    opacity: 0.3;
}

.eg-hero-edge--sketches .eg-hero-edge__title .color-accent {
    color: var(--accent);
}

/* Il corsivo di «Toscana e Romagna» ha ascendenti alti: con l'interlinea del titolo tocca la riga sopra. */
.page-template-sangiovese .eg-hero-edge__title .color-accent {
    line-height: 1.1;
}

.eg-hero-edge--paper {
    background-color: transparent;
}

.eg-hero-edge--paper::before,
.page-template-taccuino .eg-hero-edge--paper::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    block-size: var(--hero-edge-paper-height);
    mask-image: linear-gradient(#000, #000), url("assets/images/torn-edge.png");
    mask-size:
        100% calc(100% - var(--hero-edge-paper-cut) + 1px),
        100% var(--hero-edge-paper-cut);
    mask-position: top, bottom;
    mask-repeat: no-repeat;
    mask-composite: add;
    pointer-events: none;
}

.eg-hero-edge--paper::before {
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
    mix-blend-mode: normal;
    opacity: 1;
}

.page-template-taccuino .eg-hero-edge--paper::after {
    inset: var(--hero-edge-sketches-left-y) auto auto 0;
    inline-size: var(--hero-edge-sketches-left-width);
    block-size: var(--hero-edge-sketches-left-height);
    background-image: url("assets/images/sketches-left.png");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: darken;
}

.page-template-taccuino .eg-hero-edge__content::before,
.page-template-taccuino .eg-hero-edge__content::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.page-template-taccuino .eg-hero-edge__content::before {
    background-image: url("assets/images/sketches-right.png");
    background-position: right var(--hero-edge-sketches-right-x) top var(--hero-edge-sketches-right-y);
    background-size: var(--hero-edge-sketches-right-width) var(--hero-edge-sketches-right-height);
    mix-blend-mode: darken;
}

.page-template-taccuino .eg-hero-edge__content::after {
    background-image: url("assets/images/book.png"), url("assets/images/wine-drops-spray.png");
    background-position:
        left 0 top var(--hero-edge-book-y),
        right var(--hero-edge-drops-end) top var(--hero-edge-drops-y);
    background-size:
        var(--hero-edge-book-width) var(--hero-edge-book-height),
        var(--hero-edge-drops-width) var(--hero-edge-drops-height);
}

.eg-hero-edge--artworks {
    --hero-edge-color: #5f402e;
    --hero-edge-ornament-color: var(--accent);
    --hero-edge-breadcrumbs-color: #000;
    --hero-edge-breadcrumbs-current-opacity: 0.5;
    --hero-edge-paper-height: 47.71375rem;
    --hero-edge-artwork-start-width: 28.9375rem;
    --hero-edge-artwork-start-height: 29.1875rem;
    --hero-edge-artwork-start-x: -1.125rem;
    --hero-edge-artwork-start-y: 20.1875rem;
    --hero-edge-artwork-end-width: 26.015625rem;
    --hero-edge-artwork-end-height: 29.52175rem;
    --hero-edge-artwork-end-x: -0.703125rem;
    --hero-edge-artwork-end-y: 20.6875rem;
}

.eg-hero-edge--artworks .eg-hero-edge__title .color-accent {
    color: var(--accent);
}

.eg-hero-edge__artworks {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    block-size: var(--hero-edge-paper-height);
    mask-image: linear-gradient(#000, #000), url("assets/images/torn-edge.png");
    mask-size:
        100% calc(100% - var(--hero-edge-paper-cut) + 1px),
        100% var(--hero-edge-paper-cut);
    mask-position: top, bottom;
    mask-repeat: no-repeat;
    mask-composite: add;
    pointer-events: none;
}

.eg-hero-edge__artwork {
    position: absolute;
    object-fit: cover;
}

.eg-hero-edge__artwork--start {
    inset-block-start: var(--hero-edge-artwork-start-y);
    inset-inline-start: var(--hero-edge-artwork-start-x);
    inline-size: var(--hero-edge-artwork-start-width);
    block-size: var(--hero-edge-artwork-start-height);
}

.eg-hero-edge__artwork--end {
    inset-block-start: var(--hero-edge-artwork-end-y);
    inset-inline-end: var(--hero-edge-artwork-end-x);
    inline-size: var(--hero-edge-artwork-end-width);
    block-size: var(--hero-edge-artwork-end-height);
}

.eg-hero-edge--leonardo-da-vinci {
    --hero-edge-artwork-start-width: 24.0625rem;
    --hero-edge-artwork-start-height: 22rem;
    --hero-edge-artwork-start-x: 0rem;
    --hero-edge-artwork-start-y: 24.25rem;
}

.eg-hero-edge--1502-da-vinci-in-romagna {
    --hero-edge-artwork-end-width: 28.125rem;
    --hero-edge-artwork-end-height: 24.5rem;
    --hero-edge-artwork-end-x: -4.6875rem;
    --hero-edge-artwork-end-y: 23.625rem;
}

.eg-hero-edge--i-capolavori {
    --hero-edge-artwork-start-width: 24rem;
    --hero-edge-artwork-start-height: 27.0625rem;
    --hero-edge-artwork-start-x: 2.1875rem;
    --hero-edge-artwork-start-y: 19.5625rem;
    --hero-edge-artwork-end-width: 20.25rem;
    --hero-edge-artwork-end-height: 27.5rem;
    --hero-edge-artwork-end-x: 3.5625rem;
    --hero-edge-artwork-end-y: 20.1875rem;
}

.eg-hero-edge__sketch {
    position: absolute;
    z-index: -1;
    display: none;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.eg-hero-edge--leonardo-da-vinci .eg-hero-edge__sketch {
    display: block;
    inset-block-start: 9.875rem;
    inset-inline-end: 2.5rem;
    inline-size: 24.4375rem;
    block-size: 24.6875rem;
}

.eg-hero-edge--1502-da-vinci-in-romagna .eg-hero-edge__sketch {
    display: block;
    inset-block-start: 11.0625rem;
    inset-inline-start: 6.25rem;
    inline-size: 18.636rem;
    block-size: 23.3796rem;
}

@media (width < 64rem) {
    .eg-hero-edge--sketches {
        --hero-edge-block-size: 26.25rem;
        --hero-edge-padding-top: var(--hero-edge-torn-clearance);
        --hero-edge-torn-clearance: 5rem;
        --hero-edge-title-width: 100%;
    }

    .page-template-taccuino .eg-hero-edge--sketches {
        --hero-edge-block-size: 20.25rem;
        --hero-edge-padding-top: 7.5rem;
        --hero-edge-torn-clearance: 9.5rem;
        --hero-edge-title-width: 100%;
        --hero-edge-sketches-y: 3rem;
        --hero-edge-book-width: 7rem;
        --hero-edge-book-height: 8.505rem;
        --hero-edge-sketches-left-width: 7rem;
        --hero-edge-sketches-left-height: 13.28rem;
        --hero-edge-sketches-left-y: 5rem;
        --parallax-distance: 2rem;
        --hero-edge-sketches-right-width: 6.5rem;
        --hero-edge-sketches-right-height: 13.9rem;
        --hero-edge-drops-width: 7rem;
        --hero-edge-drops-height: 7.14rem;
        --hero-edge-drops-end: -2rem;
        --hero-edge-drops-y: 18rem;
    }

    .page-template-taccuino .eg-hero-edge__content::after {
        background-position:
            left 0 bottom 0,
            right var(--hero-edge-drops-end) top 3.5rem;
    }

    .eg-hero-edge--paper,
    .eg-hero-edge--artworks {
        --hero-edge-paper-height: 100%;
        --hero-edge-paper-cut: 2.5rem;
    }

    .eg-hero-edge--artworks .eg-hero-edge__title {
        font-size: clamp(2.75rem, calc(15vw - 0.625rem), 3.75rem);
    }

    .eg-hero-edge--artworks.eg-hero-edge--artworks {
        --hero-edge-artwork-start-width: auto;
        --hero-edge-artwork-start-height: 11rem;
        --hero-edge-artwork-start-x: -0.5rem;
        --hero-edge-artwork-end-width: auto;
        --hero-edge-artwork-end-height: 11rem;
        --hero-edge-artwork-end-x: -0.5rem;
    }

    .eg-hero-edge--artworks .eg-hero-edge__artwork {
        inset-block-start: auto;
        inset-block-end: 0;
        object-fit: contain;
    }

    .eg-hero-edge .eg-hero-edge__sketch {
        inset-block-start: 4.5rem;
        inline-size: 6.5rem;
        block-size: 6.5rem;
    }

    .eg-hero-edge--leonardo-da-vinci .eg-hero-edge__sketch {
        inset-inline-end: 1rem;
    }

    .eg-hero-edge--1502-da-vinci-in-romagna .eg-hero-edge__sketch {
        inset-inline-start: 1rem;
    }
}

.eg-hero-edge--article {
    --hero-edge-padding-top: 12.25rem;
    --hero-edge-gap: 3.125rem;
    --hero-edge-width: var(--grid-8);
    --hero-edge-title-width: var(--grid-8);
    --article-title-figure-gap: 7.5rem;
    --hero-edge-paper-height: calc(100% - 0.41125rem);
    min-block-size: 0;
    padding-block-end: calc(var(--torn-end) + var(--article-title-figure-gap) + var(--article-figure-rise));
}

.eg-hero-edge--article .eg-hero-edge__title {
    font-size: 4.375rem;
    line-height: 0.85;
}

/* Le pagine di testo (templates/testo.php) usano la testata degli articoli ma
   non hanno la foto che ci risale sopra: sotto il titolo niente spazio per lei. */
.eg-hero-edge--text {
    padding-block-end: calc(var(--torn-end) + 10rem);
}

@media (width < 64rem) {
    .eg-hero-edge--text {
        padding-block-end: calc(var(--torn-end) + 5rem);
    }
}

@media (width < 64rem) {
    .eg-hero-edge--article {
        --hero-edge-padding-top: 7.5rem;
        --hero-edge-gap: 1.5rem;
        --hero-edge-title-width: 100%;
        --hero-edge-paper-cut: 2.5rem;
        --article-title-figure-gap: 2.5rem;
    }

    .eg-hero-edge--article .eg-hero-edge__title {
        font-size: 2.75rem;
    }
}

/* ======================================== */
/* TEXT SPLIT                               */
/* ======================================== */

.eg-text-split {
    padding-block: var(--torn-start) var(--torn-end);
    background-color: var(--surface);
}

.eg-text-split__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--container-gap);
    padding-block: var(--text-split-padding-block) var(--text-split-gap-block);
}

.eg-text-split__block + .eg-text-split__block {
    padding-block-start: var(--text-split-gap-block);
}

.eg-text-split__block:last-child {
    padding-block-end: var(--text-split-padding-end);
}

.page-template-sangiovese {
    --text-split-padding-end: 3.75rem;
}

.page-template-sangiovese .eg-text-split__title {
    inline-size: 28.75rem;
}

.page-template-impronta .eg-banner + .eg-text-split {
    --text-split-padding-block: 3.75rem;
    --text-split-padding-end: 3.75rem;
}

.page-template-impronta .eg-banner + .eg-text-split .eg-text-split__subtitle {
    color: var(--text-split-title-color);
}

/* Senza titolo, «Le origini a Vinci» apre la sezione: prende misura e colore del titolo. */
.page-template-leonardo-wine-lover .eg-text-split__block:first-child .eg-text-split__subtitle {
    color: var(--text-split-title-color);
    font-size: 4.375rem;
    line-height: 0.85;
}

@media (width < 64rem) {
    .page-template-leonardo-wine-lover .eg-text-split__block:first-child .eg-text-split__subtitle {
        font-size: 2.25rem;
    }
}

.page-template-impronta .eg-text-centered + .eg-text-split .eg-text-split__block:nth-child(1) .eg-text-split__image {
    object-position: center 30.74%;
}

.eg-text-split--paper {
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
}

.eg-text-split--contain {
    --text-split-image-fit: contain;
}

.eg-text-split.eg-text-split--paper .eg-text-split__block {
    --text-split-padding-block: 3.75rem;
}

.eg-text-split.eg-text-split--article .eg-text-split__block {
    --text-split-padding-block: 3.75rem;
    --text-split-padding-end: 6.25rem;
    --text-split-text-width: var(--grid-4);
}

.eg-text-split__block.is-flipped .eg-text-split__media {
    order: -1;
}

.eg-text-split__block.is-image-only {
    grid-template-columns: minmax(0, var(--text-split-image-width));
    justify-content: center;
}

.eg-text-split__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--text-split-text-gap);
    inline-size: var(--text-split-text-width);
    max-inline-size: 100%;
    margin-inline: auto;
}

.eg-text-split__title {
    color: var(--text-split-title-color);
}

.eg-text-split__body {
    inline-size: 100%;
    font-family: var(--ff-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
}

.eg-text-split__media {
    position: relative;
    min-inline-size: 0;
    inline-size: 100%;
    aspect-ratio: var(--text-split-image-ratio);
    overflow: clip;
}

.eg-text-split__image {
    position: absolute;
    inset: calc(var(--parallax-distance) * var(--parallax-scale) * -1) 0 auto;
    inline-size: 100%;
    block-size: calc(100% + var(--parallax-distance) * var(--parallax-scale) * 2);
    object-fit: var(--text-split-image-fit);
}

.eg-text-split--contain .eg-text-split__media {
    overflow: visible;
}

.eg-text-split--contain .eg-text-split__image {
    inset: 0;
    block-size: 100%;
}

@media (width < 64rem) {
    .eg-text-split__block.is-flipped .eg-text-split__media {
        order: 0;
    }

    .eg-text-split:has(+ .eg-figure) .eg-text-split__media {
        order: -1;
    }

    .eg-text-split--contain .eg-text-split__media {
        aspect-ratio: auto;
    }

    .eg-text-split--contain .eg-text-split__image {
        position: static;
        block-size: auto;
    }

    .eg-text-split--contain .eg-text-split__media {
        inline-size: auto;
        margin-inline: calc(var(--container-x-padding) * -1);
    }

    .eg-text-split__block,
    .eg-text-split__block.is-flipped {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 1.5rem;
        padding-block: 2.5rem 1.25rem;
    }

    .eg-text-split__block + .eg-text-split__block {
        padding-block-start: 1.25rem;
    }

    .eg-text-split__block:last-child {
        padding-block-end: 2.5rem;
    }

    .eg-text-split__text {
        inline-size: 100%;
    }

    .eg-text-split .eg-text-split__title {
        inline-size: auto;
    }

    .eg-text-split__body {
        max-inline-size: 100%;
    }

    .eg-text-split__media {
        aspect-ratio: 4 / 5;
    }
}

/* ======================================== */
/* ARTICOLO                                 */
/* ======================================== */

.eg-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-end: var(--article-padding-bottom);
    background-color: var(--surface);
}

.eg-article__figure {
    position: relative;
    z-index: 1;
    inline-size: var(--article-figure-width);
    margin-block-start: calc(var(--article-figure-rise) * -1);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.eg-article__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--article-meta-gap);
}

.eg-article__date {
    opacity: var(--article-date-opacity);
}

.eg-article__category {
    color: var(--article-category-color);
}

.eg-article__excerpt {
    margin-block-start: var(--article-excerpt-gap);
    text-align: center;
    text-wrap: balance;
}

.eg-article--lead {
    padding-block-end: var(--article-lead-padding-bottom);
}

.eg-article__excerpt {
    color: var(--article-title-color);
}

.eg-article__excerpt .color-accent {
    font-style: italic;
}

@media (width < 64rem) {
    :root {
        --article-figure-width: calc(100% - 2 * var(--container-x-padding));
        --article-figure-rise: 7.5rem;
        --article-meta-gap: 1.5rem;
        --article-excerpt-gap: 2rem;
        --article-padding-bottom: 3.75rem;
        --article-lead-padding-bottom: 2.5rem;
    }
}

/* ---------- Blocco «Testo» ---------- */

.eg-text-column {
    padding-block: calc(var(--torn-start) + var(--text-column-padding-block)) calc(var(--torn-end) + var(--text-column-padding-block));
    background-color: var(--surface);
}

.eg-text-column__inner {
    display: flex;
    flex-direction: column;
    gap: var(--text-column-gap);
    text-align: center;
}

.eg-text-column__title {
    color: var(--text-column-title-color);
    text-wrap: balance;
}

@media (width < 64rem) {
    .eg-text-column {
        --text-column-padding-block: 2.5rem;
        --text-column-gap: 1.5rem;
    }
}

/* ---------- Blocco «Galleria» ---------- */

.eg-gallery {
    padding-block: calc(var(--torn-start) + var(--gallery-padding-block)) calc(var(--torn-end) + var(--gallery-padding-block));
    background-color: var(--surface);
}

.eg-gallery__list {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 4), minmax(0, 1fr));
    align-items: start;
    gap: var(--gallery-gap);
}

/* La voce fa da cornice e la foto ci scorre dentro col parallasse, piu' alta
   di due volte la corsa e alzata di una. */
.eg-gallery__item {
    position: relative;
    aspect-ratio: var(--gallery-ratio);
    overflow: clip;
    --parallax-distance: 1.5rem;
}

.eg-gallery__image {
    position: absolute;
    inset: calc(var(--parallax-distance) * var(--parallax-scale) * -1) 0 auto;
    display: block;
    inline-size: 100%;
    block-size: calc(100% + var(--parallax-distance) * var(--parallax-scale) * 2);
    object-fit: cover;
}

@media (width < 64rem) {
    .eg-gallery {
        --gallery-padding-block: 2.5rem;
        --gallery-gap: 0.75rem;
    }

    .eg-gallery__list {
        grid-template-columns: repeat(auto-fit, minmax(max(8rem, calc(50% - var(--gallery-gap))), 1fr));
    }
}

/* ---------- Blocco «Vini» ---------- */

.eg-wine-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wine-cards-gap);
    padding-block: calc(var(--torn-start) + var(--wine-cards-padding-block)) calc(var(--torn-end) + var(--wine-cards-padding-block));
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
}

.eg-wine-cards__intro {
    font-family: var(--ff-primary);
    font-size: 1.25rem;
    line-height: 1.2;
    text-align: center;
}

.eg-wine-cards__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--wine-cards-list-gap);
    padding-block: var(--wine-cards-list-padding-block);
}

.eg-wine-cards__item {
    inline-size: var(--wine-cards-card-width);
}

.eg-wine-cards__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wine-cards-card-gap);
    color: inherit;
    text-decoration: none;
}

.eg-wine-cards__frame {
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: var(--wine-cards-frame-height);
    padding-block: var(--wine-cards-frame-padding-block);
    padding-inline: var(--wine-cards-frame-padding-inline);
    background-color: var(--wine-cards-frame-bg);
}

.eg-wine-cards__bottle-box {
    position: relative;
    display: block;
    block-size: var(--wine-cards-bottle-height);
    max-inline-size: 100%;
    aspect-ratio: var(--wine-cards-bottle-ratio, 850 / 1200);
}

.eg-wine-cards__bottle {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}



.eg-wine-cards__info {
    display: flex;
    flex-direction: column;
    gap: var(--wine-cards-info-gap);
    inline-size: 100%;
    text-align: center;
}

.eg-wine-cards__collection {
    color: var(--wine-cards-collection-color);
}

@media (width < 64rem) {
    .eg-wine-cards {
        --wine-cards-padding-block: 2.5rem;
        --wine-cards-gap: 1.5rem;
        --wine-cards-list-gap: 1rem;
        --wine-cards-list-padding-block: 0rem;
        --wine-cards-card-width: calc(50% - 0.5rem);
        --wine-cards-frame-height: 15rem;
        --wine-cards-frame-padding-block: 1.25rem;
        --wine-cards-bottle-height: 12.5rem;
    }

    .eg-wine-cards__intro {
        font-size: 1.125rem;
    }
}

/* ======================================== */
/* NEWS RELATED                             */
/* ======================================== */

.eg-news-related {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--news-related-gap);
    padding-block: calc(var(--torn-start) + var(--news-related-padding-block)) calc(var(--torn-end) + var(--news-related-padding-block));
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
}

.eg-news-related__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--news-related-heading-gap);
    /* Senza una larghezza il titolo si stendeva su una riga sola da 799.
       Nel Figma la colonna e' 445 e il titolo va su due righe: verificato
       che a questa misura l'a capo cade dove cade nel disegno.
       E' un `.container` con questa misura al posto delle colonne. */
    max-inline-size: calc(var(--column-text) + var(--container-x-padding) * 2);
    text-align: center;
}

.eg-news-related__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-news-related__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--accent);
}

.eg-news-related__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-news-related__list {
    display: grid;
    grid-template-columns: repeat(var(--news-related-columns), 1fr);
    align-items: start;
    gap: var(--news-related-card-gap);
}

.eg-news-related .eg-news-card__title {
    font-size: 1.375rem;
}

.eg-news-related .eg-news-card__date {
    display: none;
}

@media (width < 64rem) {
    .eg-news-related {
        --news-related-padding-block: 3.75rem;
        --news-related-heading-gap: 1.5rem;
        --news-related-gap: 2rem;
        --news-related-card-gap: 1.5rem 1rem;
        --news-related-columns: 2;
    }

    .eg-news-related__list {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: var(--container-x-padding);
        overscroll-behavior-inline: contain;
    }

    .eg-news-related__list::-webkit-scrollbar {
        display: none;
    }

    .eg-news-related__list > * {
        flex: 0 0 auto;
        inline-size: 80vw;
        scroll-snap-align: start;
    }

    .eg-news-related .eg-news-card__title {
        font-size: 1.25rem;
    }
}

/* ======================================== */
/* NEWS                                     */
/* ======================================== */

/* ======================================== */
/* MAP                                      */
/* ======================================== */

.eg-map {
    position: relative;
    padding-block: calc(var(--torn-start) + var(--map-padding-top)) calc(var(--torn-end) + var(--map-padding-bottom));
    background: var(--paper) url("assets/images/paper-texture.jpg") no-repeat center / cover;
}

.eg-map__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.eg-map__body {
    display: flex;
    flex-direction: column;
    gap: var(--map-body-gap);
    inline-size: var(--map-body-width);
    margin-block-start: var(--map-body-offset);
}

.eg-map__title {
    color: var(--map-title-color);
}

.eg-map__subtitle {
    color: var(--on-surface);
}

.eg-map__text {
    inline-size: var(--map-text-width);
}

/* ---------- La cartina ---------- */

.eg-map__figure {
    position: relative;
    flex: 0 0 auto;
}

.eg-map__italy {
    position: absolute;
    inset-block-start: calc(var(--map-italy-top) - var(--map-padding-top));
    inset-inline-end: var(--map-italy-offset);
    display: block;
    inline-size: var(--map-italy-width);
}

.eg-map__italy svg,
.eg-map__drawing svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-map__drawing {
    position: relative;
    isolation: isolate;
    inline-size: var(--map-drawing-width);
    block-size: var(--map-drawing-height);
}

.eg-map__hotspot,
.eg-map__ring {
    position: absolute;
    inline-size: var(--map-ring-size);
    block-size: var(--map-ring-size);
    border-radius: 50%;
    translate: -50% -50%;
}

.eg-map__ring {
    z-index: -1;
    background: var(--map-ring-color);
    scale: 0;
    opacity: 0;
    transition:
        scale 0.5s ease,
        opacity 0.5s ease;
    pointer-events: none;
}

.eg-map__hotspot {
    z-index: 1;
    cursor: pointer;
}

.eg-map__ring.is-on,
.eg-map__hotspot:hover + .eg-map__ring {
    scale: 1;
    opacity: 1;
}

/* ---------- I quattro punti ---------- */

[data-dot="chianti"] {
    inset-inline-start: 53.44%;
    inset-block-start: 59.01%;
}

[data-dot="montalcino"] {
    inset-inline-start: 57.41%;
    inset-block-start: 74.95%;
}

[data-dot="montepulciano"] {
    inset-inline-start: 64.7%;
    inset-block-start: 73.51%;
}

[data-dot="romagna"] {
    inset-inline-start: 69.92%;
    inset-block-start: 36.94%;
}

/* ---------- Le denominazioni ---------- */

.eg-map__groups {
    display: flex;
    flex-direction: column;
    gap: var(--map-groups-gap);
    margin-block-start: var(--map-groups-top);
}

.eg-map__group {
    display: flex;
    flex-direction: column;
    gap: var(--map-region-gap);
    align-items: flex-start;
}

.eg-map__region {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--map-accent);
}

.eg-map__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
}

.eg-map__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-map__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--map-chip-gap);
}

.eg-map__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--map-chip-padding-block);
    padding-inline: var(--map-chip-padding-inline);
    border: 1px solid var(--map-chip-border);
    border-radius: 100px;
    background-color: #fff;
    color: var(--map-chip-color);
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    cursor: pointer;
}

.eg-map__chip[aria-pressed="true"] {
    border-color: var(--map-chip-color);
}

.eg-map__chip:focus-visible {
    outline: 2px solid var(--map-chip-color);
    outline-offset: 2px;
}

@media (width < 80rem) {
    .eg-map {
        --map-padding-top: 3.75rem;
        --map-padding-bottom: 3.75rem;
        --map-italy-offset: 0rem;
        --map-body-offset: 0rem;
        --map-body-width: 100%;
        --map-body-gap: 1.25rem;
        --map-text-width: 100%;
        --map-drawing-width: 100%;
        --map-drawing-height: auto;
        --map-groups-gap: 2rem;
        --map-groups-top: 2.5rem;
        --map-region-gap: 1rem;
        --map-chip-gap: 0.625rem;
        --map-chip-padding-block: 0.625rem;
        --map-chip-padding-inline: 1rem;
    }

    .eg-map__inner {
        flex-direction: column;
        gap: 2.5rem;
    }

    .eg-map__figure {
        align-self: center;
        inline-size: min(100%, 20rem);
    }

    .eg-map__italy {
        inset-block-start: 0;
        inset-inline-end: 0;
        inline-size: 5rem;
    }

    .eg-map__chip {
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-map__ring {
        transition-duration: 0.01ms !important;
    }
}

.eg-news {
    display: flex;
    flex-direction: column;
    gap: var(--news-gap);
    padding-block: var(--news-padding-top) var(--news-padding-bottom);
    background-color: var(--surface);
}

.eg-news__topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--news-chip-gap);
}

.eg-news__topic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--news-chip-padding-block);
    padding-inline: var(--news-chip-padding-inline);
    border: 1px solid var(--news-chip-border);
    border-radius: 100px;
    color: var(--news-chip-color);
    background: var(--news-chip-bg);
    cursor: pointer;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.eg-news__topic:hover:not(:has(input:checked)) {
    border-color: transparent;
    background: var(--news-chip-hover-bg);
}

.eg-news__topic input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
}

.eg-news__topic:has(input:checked) {
    color: var(--news-chip-active-color);
    background: var(--news-chip-active-bg);
    border-color: transparent;
}

.eg-news__topic:has(input:focus-visible) {
    outline: 2px solid var(--news-chip-color);
    outline-offset: 2px;
}

.eg-news__grid {
    display: grid;
    grid-template-columns: repeat(var(--news-columns), 1fr);
    align-items: start;
    gap: var(--news-gap) var(--news-column-gap);
}

.eg-news__pagination {
    display: flex;
    justify-content: center;
}

.eg-news-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--news-card-gap);
    color: inherit;
}

.eg-news-card__frame {
    display: block;
    inline-size: 100%;
    overflow: clip;
}

.eg-news-card__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale var(--hover-zoom-duration) var(--fade-ease);
}

.eg-news-card__category {
    /* 16 di passo piu' 3 qui fanno i 19 fra la foto e la categoria. */
    margin-block-start: 0.1875rem;
    color: var(--news-category-color);
}

.eg-news-card__title {
    text-wrap: balance;
}

.eg-news-card__date {
    opacity: var(--news-date-opacity);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .eg-news-card:is(:hover, :focus-visible) .eg-news-card__image {
        scale: var(--hover-zoom);
    }
}

@media (width < 64rem) {
    .eg-news {
        --news-padding-top: 0.5rem;
        --news-padding-bottom: 1.25rem;
        --news-gap: 2.5rem;
        --news-column-gap: 1.25rem;
        --news-columns: 1;
        --news-chip-gap: 0.625rem;
        --news-chip-padding-inline: 1rem;
    }

    .eg-news__topics {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-block-end: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .eg-news__topic {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .eg-news__grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================== */
/* TILES                                    */
/* ======================================== */

.eg-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--tiles-gap);
    padding-block: calc(var(--torn-start) + var(--tiles-padding-top)) calc(var(--torn-end) + var(--tiles-padding-bottom));
    background-color: var(--surface);
}

.eg-tiles__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tiles-intro-gap);
    text-align: center;
}

.eg-tiles__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tiles-heading-gap);
    inline-size: 100%;
}

.eg-tiles__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-tiles__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--tiles-accent);
}

.eg-tiles__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-tiles__title {
    color: var(--tiles-title-color);
}

.eg-tiles__body {
    display: flex;
    flex-direction: column;
    gap: var(--tiles-body-gap);
    inline-size: 100%;
}

.eg-tiles__list {
    display: flex;
    align-items: flex-start;
    justify-content: safe center;
    gap: var(--tiles-list-gap);
    padding-inline: var(--container-gutter);
    overflow-x: auto;
    overflow-block: hidden;
    scrollbar-width: none;
}

.eg-tiles__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tiles-item-gap);
    inline-size: var(--tiles-item-width);
}

.eg-tiles__media {
    position: relative;
    flex: 0 0 auto;
    inline-size: var(--tiles-image-width);
    max-inline-size: none;
    block-size: var(--tiles-image-height);
    overflow: clip;
    --parallax-distance: 2rem;
}

.eg-tiles__image {
    position: absolute;
    inset: calc(var(--parallax-distance) * var(--parallax-scale) * -1) 0 auto;
    inline-size: 100%;
    max-inline-size: none;
    block-size: calc(100% + var(--parallax-distance) * var(--parallax-scale) * 2);
    object-fit: cover;
}

.eg-tiles__label {
    color: var(--tiles-accent);
}

@media (width < 64rem) {
    .eg-tiles {
        --tiles-padding-top: 3.75rem;
        --tiles-padding-bottom: 3.75rem;
        --tiles-gap: 2.5rem;
        --tiles-intro-gap: 1.5rem;
        --tiles-heading-gap: 1.5rem;
        --tiles-body-gap: 1.25rem;
        --tiles-list-gap: 1.25rem;
        --tiles-item-width: 16rem;
        --tiles-image-width: 100%;
        --tiles-image-height: 18rem;
    }

    .eg-tiles__list {
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: var(--container-gutter);
        scrollbar-width: none;
    }

    .eg-tiles__item {
        scroll-snap-align: start;
    }
}

/* ======================================== */
/* NUMBERS                                  */
/* ======================================== */

.eg-numbers {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--torn-start) + var(--numbers-padding-top)) calc(var(--torn-end) + var(--numbers-padding-bottom));
    color: var(--numbers-color);
    background-color: var(--numbers-bg);
}

.eg-numbers::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("assets/images/sketches.jpg");
    background-position: var(--numbers-sketches-x) var(--numbers-sketches-y);
    background-size: var(--numbers-sketches-width) auto;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.7;
    pointer-events: none;
}

.eg-numbers__list {
    display: flex;
    justify-content: center;
    gap: var(--numbers-gap);
}

.eg-numbers__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--numbers-item-gap);
    inline-size: var(--numbers-item-width);
}

.eg-numbers__number {
    color: var(--numbers-accent);
    text-align: center;
}

.eg-numbers__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    inline-size: 100%;
    white-space: nowrap;
}

.eg-numbers__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--numbers-accent);
}

.eg-numbers__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

@media (64rem <= width < 90rem) {
    .eg-numbers {
        --numbers-gap: 2.5rem;
    }

    .eg-numbers__item {
        flex: 0 1 var(--numbers-item-width);
        min-inline-size: 0;
    }

    .eg-numbers__label {
        white-space: normal;
        text-align: center;
    }
}

@media (width < 64rem) {
    .eg-numbers {
        --numbers-padding-top: 3.75rem;
        --numbers-padding-bottom: 3.75rem;
        --numbers-gap: 2.5rem;
        --numbers-item-width: 100%;
        --numbers-item-gap: 1rem;
        --numbers-sketches-width: 250%;
        --numbers-sketches-y: 0rem;
    }

    .eg-numbers__list {
        flex-direction: column;
        align-items: center;
    }

    .eg-numbers__item {
        flex-basis: auto;
    }

    .eg-numbers__label {
        white-space: normal;
        text-align: center;
    }
}

/* ======================================== */
/* ACCORDION                                */
/* ======================================== */

.eg-accordion {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--torn-start) + var(--accordion-padding-top)) calc(var(--torn-end) + var(--accordion-padding-bottom));
}

.eg-accordion::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--paper-warm) url("assets/images/paper-warm.jpg") no-repeat center / cover;
}

.eg-accordion::after {
    content: "";
    position: absolute;
    inset-block-start: var(--accordion-sheet-y);
    inset-inline-end: var(--accordion-sheet-x);
    inline-size: var(--accordion-sheet-width);
    block-size: var(--accordion-sheet-height);
    background: url("assets/images/letter-sheet.png") no-repeat center / contain;
    pointer-events: none;
}

.eg-accordion__content {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
}

.eg-accordion__intro {
    color: var(--accordion-intro-color);
}

.eg-accordion__excerpt,
.eg-accordion__text {
    color: var(--accordion-text-color);
    font-style: italic;
}

.eg-accordion__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--accordion-duration) var(--accordion-ease);
}

.eg-accordion__panel[inert] {
    grid-template-rows: 0fr;
}

.eg-accordion__panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
    min-block-size: 0;
    overflow: hidden;
}

.eg-accordion__closing {
    color: var(--accordion-intro-color);
}

.eg-accordion__signature {
    color: var(--accordion-text-color);
    font-size: var(--accordion-signature-size);
    font-style: italic;
    line-height: 1.2;
}

.eg-accordion__toggle {
    align-self: center;
    font-weight: 500;
}

.eg-accordion__toggle[aria-expanded="false"] .eg-accordion__label-close,
.eg-accordion__toggle[aria-expanded="true"] .eg-accordion__label-open {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .eg-accordion__panel {
        transition-duration: 0.01ms !important;
    }
}

@media (width < 64rem) {
    .eg-accordion {
        --accordion-padding-top: 3.75rem;
        --accordion-padding-bottom: 3.75rem;
        --accordion-gap: 1.5rem;
        --accordion-sheet-width: 7rem;
        --accordion-sheet-height: 9.64rem;
        --accordion-sheet-x: 0.5rem;
        --accordion-sheet-y: -4rem;
        --parallax-distance: 0.5rem;
    }

    .eg-accordion__content {
        padding-block-start: 2.5rem;
    }
}

/* ======================================== */
/* FIGURE                                   */
/* ======================================== */

.eg-figure {
    padding-block: calc(var(--torn-start) + var(--figure-padding-top)) calc(var(--torn-end) + var(--figure-padding-bottom));
    background-color: var(--surface);
}

.page-template-impronta .eg-figure,
.page-template-monnalisa .eg-figure {
    --figure-height: 36.3125rem;
    --figure-padding-top: 0rem;
    --figure-padding-bottom: 3.75rem;
}

.eg-figure__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--figure-gap);
    margin-block: 0;
}

.eg-figure__image {
    inline-size: 100%;
    block-size: var(--figure-height);
    object-fit: cover;
    scale: calc(var(--figure-scale-min) + (1 - var(--figure-scale-min)) * var(--figure-progress));
}

.eg-figure__caption {
    color: var(--accent);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .eg-figure__image {
        scale: 1;
    }
}

@media (width < 64rem) {
    .page-template-collezione .eg-figure,
    .single-wine .eg-figure {
        --figure-padding-bottom: 0rem;
    }

    .page-template-impronta .eg-figure,
    .page-template-monnalisa .eg-figure {
        --figure-padding-top: 2.5rem;
    }

    .page-template-monnalisa .eg-figure {
        --figure-padding-bottom: 1.25rem;
    }

    .eg-figure__figure {
        gap: 2rem;
    }

    .eg-figure__image {
        block-size: auto;
        aspect-ratio: 874 / 581;
    }
}

/* ======================================== */
/* SLIDE WINES                              */
/* ======================================== */

.eg-slide-wines {
    padding-block: calc(var(--torn-start) + var(--slide-wines-padding-top)) calc(var(--torn-end) + var(--slide-wines-padding-bottom));
    overflow-x: clip;
    background-color: var(--surface);
}

.eg-slide-wines:has(> .eg-slide-wines__heading) {
    --slide-wines-padding-top: 3.75rem;
}

.eg-slide-wines__heading {
    margin-block-end: 3.125rem;
    color: var(--accent);
    text-align: center;
}

@media (width < 64rem) {
    .eg-slide-wines:has(> .eg-slide-wines__heading) {
        --slide-wines-padding-top: 3rem;
    }

    .eg-slide-wines__heading {
        margin-block-end: 1.5rem;
    }
}

.eg-slide-wines__viewport {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--slide-wines-stage);
    margin-inline: auto;
    user-select: none;
    cursor: grab;
}

.eg-slide-wines__viewport:active {
    cursor: grabbing;
}

.eg-slide-wines__track {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
}

.eg-slide-wines__slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-wines-gap);
    inline-size: var(--slide-wines-slot);
    translate: calc(var(--slide-wines-offset, 0) * var(--slide-wines-pitch) + var(--slide-wines-drag, 0px));
    transition: translate var(--slide-wines-duration) ease;
}

.eg-slide-wines.is-dragging .eg-slide-wines__slide {
    transition: none;
}

.eg-slide-wines__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slide-wines-gap);
    inline-size: 100%;
    color: inherit;
    text-decoration: none;
}

.eg-slide-wines__frame {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: calc(var(--slide-wines-frame-width) * var(--slide-wines-frame-scale));
    aspect-ratio: var(--slide-wines-frame-ratio);
    min-block-size: 0;
    padding-block: var(--slide-wines-frame-padding-block);
    padding-inline: var(--slide-wines-frame-padding-inline);
    background-color: var(--slide-wines-frame-bg);
    inline-size: var(--slide-wines-frame-width);
    scale: var(--slide-wines-frame-scale);
    transition: scale var(--slide-wines-duration) ease;
}

.eg-slide-wines__slide.is-active .eg-slide-wines__frame {
    scale: 1;
}

.eg-slide-wines__bottle {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: contain;
    mix-blend-mode: darken;
    transition: scale var(--hover-zoom-duration) var(--fade-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.eg-slide-wines__link:is(:hover, :focus-visible) .eg-slide-wines__bottle {
        scale: 1.02;
    }
}



.eg-slide-wines__text {
    display: flex;
    flex-direction: column;
    gap: var(--slide-wines-text-gap);
    inline-size: var(--slide-wines-text-width);
    max-inline-size: 100%;
    text-align: center;
}

.eg-slide-wines__title {
    line-height: 0.8;
    transition: opacity var(--slide-wines-duration) ease;
}

.eg-slide-wines__denomination {
    letter-spacing: 0.04em;
    transition: opacity var(--slide-wines-duration) ease;
}

.eg-slide-wines__description {
    min-block-size: var(--slide-wines-description-height);
    transition: opacity var(--slide-wines-duration) ease;
}

.eg-slide-wines__slide:not(.is-active) :is(.eg-slide-wines__title, .eg-slide-wines__denomination) {
    opacity: var(--slide-wines-dim);
}

.eg-slide-wines__slide:not(.is-active) .eg-slide-wines__description {
    opacity: 0;
}

.eg-slide-wines__arrow {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--slide-wines-arrow-y);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--slide-wines-arrow-size);
    block-size: var(--slide-wines-arrow-size);
    padding: 0;
    color: var(--slide-wines-arrow-color);
    background: none;
    border: 1px solid var(--slide-wines-arrow-border);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.eg-slide-wines__arrow:is(:hover, :focus-visible):not(:disabled) {
    background-color: rgb(from var(--slide-wines-arrow-border) r g b / 0.35);
}

.eg-slide-wines__arrow:disabled,
.eg-slide-wines__pager-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.eg-slide-wines__arrow svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.eg-slide-wines__arrow--prev {
    inset-inline-start: calc(50% - var(--slide-wines-arrow-x) - var(--slide-wines-arrow-size) / 2);
    rotate: 90deg;
}

.eg-slide-wines__arrow--next {
    inset-inline-start: calc(50% + var(--slide-wines-arrow-x) - var(--slide-wines-arrow-size) / 2);
    rotate: -90deg;
}

.eg-slide-wines__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--slide-wines-pager-gap);
    margin-block-start: var(--slide-wines-pager-space);
}

.eg-slide-wines__pager-arrow {
    position: relative;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.eg-slide-wines__pager-arrow::after {
    content: "";
    position: absolute;
    inset: calc(var(--slide-wines-pager-hit) * -1);
}

.eg-slide-wines__pager-arrow svg {
    display: block;
    inline-size: 0.3125rem;
    block-size: 0.5rem;
}

.eg-slide-wines__pager-arrow--prev svg {
    rotate: 180deg;
}

.eg-slide-wines__count {
    display: flex;
    align-items: center;
    gap: var(--slide-wines-pager-gap);
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.eg-slide-wines__current,
.eg-slide-wines__total {
    flex: 0 0 auto;
    min-inline-size: 0.5rem;
    text-align: center;
}

.eg-slide-wines__bar {
    position: relative;
    flex: 0 0 auto;
    inline-size: var(--slide-wines-bar-width);
    block-size: 1px;
    background-color: var(--slide-wines-bar-color);
}

.eg-slide-wines__progress {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--slide-wines-progress, 0%);
    block-size: 1px;
    background-color: var(--accent);
    transition: inline-size var(--slide-wines-duration) ease;
}

@media (width < 64rem) {
    .eg-slide-wines {
        --slide-wines-padding-top: 1.25rem;
        --slide-wines-padding-bottom: 3.75rem;
        --slide-wines-slot: 15rem;
        --slide-wines-pitch: 16.25rem;
        --slide-wines-gap: 1.25rem;
        --slide-wines-frame-width: 15rem;
        --slide-wines-frame-padding-block: 2.5rem;
        --slide-wines-frame-padding-inline: 0.75rem;
        --slide-wines-text-width: 100%;
        --slide-wines-text-gap: 0.75rem;
        --slide-wines-description-height: 0rem;
        --slide-wines-arrow-size: 2.75rem;
        --slide-wines-arrow-x: 8.75rem;
        --slide-wines-arrow-y: 8.5rem;
        --slide-wines-pager-space: 2rem;
        --slide-wines-pager-gap: 1.25rem;
    }

    .eg-slide-wines__arrow {
        display: none;
    }

    .eg-slide-wines__pager-arrow {
        align-items: center;
        justify-content: center;
        inline-size: var(--slide-wines-arrow-size);
        block-size: var(--slide-wines-arrow-size);
        color: var(--slide-wines-arrow-color);
        border: 1px solid var(--slide-wines-arrow-border);
        border-radius: 50%;
    }

    .eg-slide-wines__pager-arrow svg {
        display: none;
    }

    .eg-slide-wines__pager-arrow::before {
        content: "";
        inline-size: 100%;
        block-size: 100%;
        background-color: currentColor;
        mask: url("assets/images/arrow.svg") no-repeat center / 100% 100%;
    }

    .eg-slide-wines__pager-arrow--prev::before {
        rotate: 90deg;
    }

    .eg-slide-wines__pager-arrow--next::before {
        rotate: -90deg;
    }

    .eg-slide-wines__viewport {
        touch-action: pan-y;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-slide-wines__slide,
    .eg-slide-wines__frame,
    .eg-slide-wines__title,
    .eg-slide-wines__denomination,
    .eg-slide-wines__description,
    .eg-slide-wines__progress {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* OTHER COLLECTIONS                        */
/* ======================================== */

.eg-other-collections {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--other-collections-gap);
    position: relative;
    padding-block: calc(var(--torn-start) + var(--other-collections-padding-top, var(--other-collections-padding-block))) calc(var(--torn-end) + var(--other-collections-padding-block));
    overflow-x: clip;
    background-color: var(--surface);
}

.eg-slide-wines + .eg-other-collections {
    --other-collections-padding-top: 0rem;
}

.eg-other-collections__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--other-collections-head-gap);
    text-align: center;
}

.eg-other-collections__pre-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-other-collections__ornament {
    flex: 0 0 auto;
    display: block;
    inline-size: 0.25rem;
    color: var(--accent);
}

.eg-other-collections__ornament svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.eg-other-collections__title {
    color: var(--other-collections-title-color);
    text-wrap: balance;
}

.eg-other-collections__list {
    display: flex;
    align-items: flex-start;
    gap: var(--other-collections-card-gap);
}

.eg-other-collections__item {
    flex: 1 1 0;
    min-inline-size: 0;
}

.eg-other-collections__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--other-collections-card-space);
    color: inherit;
}

.eg-other-collections__frame {
    isolation: isolate;
    display: block;
    overflow: clip;
    inline-size: 100%;
    block-size: var(--other-collections-frame-height);
    background-color: var(--other-collections-frame-bg);
}

.eg-other-collections__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
    transition: scale var(--hover-zoom-duration) var(--fade-ease);
}

.eg-other-collections__name {
    color: var(--other-collections-title-color);
    text-align: center;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .eg-other-collections__link:is(:hover, :focus-visible) .eg-other-collections__image {
        scale: var(--hover-zoom);
    }
}

/* Le gocce stanno sulla testata e non sul titolo, che entra in dissolvenza e se
   le porterebbe dietro in ritardo. In orizzontale sono sempre allo stesso punto
   della pagina (la testata e' centrata), in verticale la seguono: su alcune
   pagine sta 120px piu' in basso, e in tedesco il titolo va su due righe.
   I 9.25rem le portano sotto la prima riga del titolo in tutte le lingue. */
.eg-other-collections__head::before {
    content: "";
    position: absolute;
    inset-block-start: var(--other-collections-drops-y);
    inset-inline-start: calc(50% - var(--other-collections-drops-x));
    z-index: 1;
    inline-size: var(--other-collections-drops-width);
    block-size: var(--other-collections-drops-height);
    background: url("assets/images/wine-drops-scattered.png") no-repeat center / 100% 100%;
    rotate: 180deg;
    pointer-events: none;
}

@media (width < 64rem) {
    .eg-slide-wines + .eg-other-collections {
        --other-collections-padding-top: 1.25rem;
    }

    .eg-other-collections {
        --other-collections-padding-block: 3.75rem;
        --other-collections-gap: 2.5rem;
        --other-collections-head-gap: 1.5rem;
        --other-collections-card-gap: 2.5rem;
        --other-collections-card-space: 1.25rem;
        --other-collections-frame-height: 22rem;
        --other-collections-drops-width: 4rem;
        --other-collections-drops-height: 4.08rem;
        --other-collections-drops-y: -1.5rem;
    }

    .eg-other-collections__head::before {
        inset-inline-start: calc(50% + 50vw - var(--other-collections-drops-width));
    }

    .eg-other-collections__list {
        gap: 1rem;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: var(--container-x-padding);
        overscroll-behavior-inline: contain;
    }

    .eg-other-collections__list::-webkit-scrollbar {
        display: none;
    }

    .eg-other-collections__item {
        flex: 0 0 auto;
        inline-size: 70%;
        scroll-snap-align: start;
    }
}

/* ======================================== */
/* TEXT SPECS                               */
/* ======================================== */

.eg-text-specs {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: var(--text-specs-height);
    padding-inline: var(--text-specs-gutter);
    background: linear-gradient(to right, var(--text-specs-panel-bg) 0 50%, var(--surface) 50% 100%);
}

main > .eg-text-specs:first-child {
    margin-block-start: var(--text-specs-header-space);
}

.eg-text-specs__panel {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.eg-text-specs__bottle-box {
    position: relative;
    display: block;
    block-size: var(--text-specs-image-height);
    max-inline-size: var(--text-specs-image-width);
    aspect-ratio: var(--text-specs-bottle-ratio, 850 / 1200);
}

.eg-text-specs__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}



.eg-text-specs__back {
    position: absolute;
    display: inline-flex;
    align-items: center;
    inset-block-start: var(--text-specs-back-y);
    inset-inline-start: calc(var(--text-specs-gutter) + var(--text-specs-back-x));
    padding-block: var(--text-specs-back-padding-block);
    padding-inline: var(--text-specs-back-padding-inline);
    border: 1px solid var(--text-specs-back-border);
    border-radius: 100px;
    background-color: var(--text-specs-back-bg);
    color: var(--text-specs-back-color);
    text-decoration: none;
}

.eg-text-specs__body {
    display: flex;
    flex-direction: column;
    gap: var(--text-specs-gap);
    padding: var(--text-specs-padding);
}

.eg-text-specs__head {
    display: flex;
    flex-direction: column;
    gap: var(--text-specs-head-gap);
}

.eg-text-specs__intro {
    display: flex;
    flex-direction: column;
    gap: var(--text-specs-intro-gap);
}

.eg-text-specs__claim {
    color: var(--text-specs-claim-color);
}

.eg-text-specs__data {
    display: grid;
    grid-template-columns: repeat(2, var(--text-specs-spec-width));
    gap: var(--text-specs-data-gap);
    align-items: start;
}

.eg-text-specs__spec {
    display: flex;
    flex-direction: column;
    gap: var(--text-specs-value-space);
}

.eg-text-specs__label {
    padding-block-end: var(--text-specs-label-space);
    border-block-end: 1px solid var(--text-specs-label-border);
    color: var(--text-specs-label-color);
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: var(--text-specs-label-size);
    font-weight: var(--text-specs-label-weight);
    line-height: 1;
    letter-spacing: var(--text-specs-label-tracking);
    text-transform: lowercase;
}

.eg-text-specs__values {
    padding-inline-start: var(--text-specs-values-indent);
    list-style: disc;
}

.eg-text-specs__spec--cta {
    justify-content: flex-end;
    align-items: center;
    min-block-size: var(--text-specs-cta-cell-height);
}

.eg-text-specs__cta {
    padding-block: var(--text-specs-cta-padding-block);
    padding-inline: var(--text-specs-cta-padding-inline);
    border-radius: 100px;
    background-color: var(--text-specs-cta-bg);
    color: var(--text-specs-cta-color);
    font-family: var(--ff-secondary);
    font-variant-numeric: lining-nums;
    font-size: var(--text-specs-cta-size);
    font-weight: var(--text-specs-cta-weight);
    line-height: 1;
    letter-spacing: var(--text-specs-cta-tracking);
    text-transform: lowercase;
    text-decoration: none;
    white-space: nowrap;
}

@media (width < 64rem) {
    .eg-text-specs {
        --text-specs-height: 0rem;
        --text-specs-image-width: 100%;
        --text-specs-image-height: 22rem;
        --text-specs-padding: var(--container-x-padding);
        --text-specs-gap: 1.5rem;
        --text-specs-data-gap: 1.5rem 1.25rem;
        --text-specs-spec-width: minmax(0, 1fr);
        --text-specs-back-y: 1.25rem;
        --text-specs-back-x: var(--container-x-padding);
        --text-specs-cta-cell-height: 0rem;
        --text-specs-cta-padding-inline: 1.5rem;
        grid-template-columns: 1fr;
        background: var(--surface);
    }

    .eg-text-specs__panel {
        padding-block: 4.5rem 2rem;
        padding-inline: var(--container-x-padding);
        background-color: var(--text-specs-panel-bg);
    }

    .eg-text-specs__body {
        min-inline-size: 0;
        padding-block: 2.5rem 3.75rem;
    }

    .eg-text-specs__panel {
        min-inline-size: 0;
    }

    .eg-text-specs__spec--cta {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .eg-text-specs__data {
        grid-template-columns: 1fr;
    }

    .eg-text-specs__back {
        display: none;
    }
}

@media (width < 64rem) {
    .eg-other-collections__list,
    .eg-news-related__list,
    .eg-slide-collection__track,
    .eg-news__topics {
        padding-block-end: 0.5rem;
        overflow-block: hidden;
    }

    :is(.eg-text-centered__pre-title, .eg-banner__pre-title, .eg-news-related__pre-title, .eg-tiles__pre-title, .eg-slide-collection__pre-title, .eg-slide-anecdotes__pre-title, .eg-other-collections__pre-title, .eg-hero__pre-title, .eg-numbers__label) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        inline-size: auto;
        line-height: 1.4;
        text-align: center;
        text-wrap: balance;
    }

    :is(.eg-text-centered__pre-title, .eg-banner__pre-title, .eg-news-related__pre-title, .eg-tiles__pre-title, .eg-slide-collection__pre-title, .eg-slide-anecdotes__pre-title, .eg-other-collections__pre-title, .eg-hero__pre-title, .eg-numbers__label) > [class$="__ornament"] {
        display: none;
    }
}

/* ======================================== */
/* AUTOPLAY                                 */
/* ======================================== */

.is-autoplay [data-autoplay-bar] {
    inline-size: 100%;
    scale: 0 1;
    transform-origin: left;
    transition: none;
}

.is-autoplay.is-running [data-autoplay-bar] {
    animation: eg-autoplay var(--autoplay-duration) linear forwards;
}

.is-autoplay.is-paused [data-autoplay-bar] {
    animation-play-state: paused;
}

@keyframes eg-autoplay {
    to {
        scale: 1 1;
    }
}

/* ======================================== */
/* AGE GATE                                 */
/* ======================================== */

/* Il controllo dell'eta' (inc/misc/age-gate.php), sul modello indicato da
   Lorenzo il 15/10: domanda grande, una riga sotto, il «si'» come le CTA del
   sito e il «no» piu' piccolo, senza tratto. */
.eg-age-gate {
    inline-size: min(33.75rem, 100% - 2.5rem);
    max-inline-size: none;
    padding-block: 4.375rem 3.75rem;
    padding-inline: 3.125rem;
    background: var(--paper);
    color: #181818;
    border: 0;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.25);
    text-align: center;
}

.eg-age-gate::backdrop {
    background-color: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(5px);
}

.eg-age-gate__title {
    font-family: var(--ff-display);
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 1.05;
}

/* Il fuoco ci arriva solo all'apertura (vedi age-gate.php): niente anello. */
.eg-age-gate__title:focus {
    outline: none;
}

.eg-age-gate__text {
    margin-block: 1.25rem 2.5rem;
    font-family: var(--ff-primary);
    font-size: 1.25rem;
    line-height: 1.4;
}

.eg-age-gate__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

.eg-age-gate__yes {
    cursor: pointer;
}

.eg-age-gate__no {
    font-family: var(--ff-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    text-decoration: none;
    opacity: 0.7;
    transition: color 0.4s ease, opacity 0.4s ease;
}

.eg-age-gate__no:is(:hover, :focus-visible) {
    color: var(--accent);
    opacity: 1;
}

@media (width < 64rem) {
    .eg-age-gate {
        padding-block: 3.125rem 2.5rem;
        padding-inline: 1.5rem;
    }

    .eg-age-gate__title {
        font-size: 2.5rem;
    }

    .eg-age-gate__text {
        font-size: 1.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-age-gate__no {
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* PAGINE DI TESTO                          */
/* ======================================== */

/* templates/testo.php: privacy, cookie, etichettatura ambientale. */
.eg-text-page .eg-text-column__inner {
    text-align: start;
}

.eg-text-page__body :is(h2, h3, h4) {
    font-family: var(--ff-display);
    font-weight: 400;
    line-height: 1;
    text-wrap: balance;
}

.eg-text-page__body h2 {
    margin-block-start: 1.5lh;
    font-size: 2.1875rem;
}

.eg-text-page__body h3 {
    margin-block-start: 1lh;
    font-size: 1.75rem;
}

.eg-text-page__body h4 {
    font-family: var(--ff-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    color: var(--accent);
}

.eg-text-page__body > :first-child {
    margin-block-start: 0;
}

.eg-text-page__body a {
    overflow-wrap: anywhere;
}

/* Le tabelle dell'etichettatura: componente, materiale, raccolta. */
.eg-text-page__body table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.eg-text-page__body :is(th, td) {
    padding-block: 0.75rem;
    padding-inline: 0 1rem;
    border-block-end: 1px solid rgb(161 134 57 / 0.3);
    text-align: start;
    vertical-align: top;
}

.eg-text-page__body th {
    font-family: var(--ff-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    color: var(--accent);
}

@media (width < 64rem) {
    .eg-text-page__body h2 {
        font-size: 1.875rem;
    }

    .eg-text-page__body h3 {
        font-size: 1.5rem;
    }

    .eg-text-page__body table {
        font-size: 0.875rem;
    }
}