/*
Intent: Define the primary visual system for the CAV WordPress theme.
Ownership: Front-end presentation layer.
Dependencies: functions.php enqueues this file; template files provide the class names styled here.
*/

/*------------------------->
FONTS
--------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

@font-face {
    font-family: 'Nyght Serif';
    src: url('NyghtSerif-Medium.woff2') format('woff2'),
        url('NyghtSerif-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*------------------------->
Wine Club
--------------------------*/

/* The Club page is assembled from ungrouped editor blocks.  These selectors
   deliberately use its page id and the existing block order so the editorial
   layout does not leak into the other medium-template pages. */
.page-id-15 #ai_main{
    overflow: clip;
}

/* The opening cover is dark, even though the rest of this medium page is
   cream. Keep every transparent-header control legible over the photograph. */
.page-id-15 .site-header:not(.site-header--solid) .site-logo,
.page-id-15 .site-header:not(.site-header--solid) .menu-toggle,
.page-id-15 .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
.page-id-15 .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a{
    color: var(--color-neutral-white);
}

.page-id-15 .site-header:not(.site-header--solid) .menu-toggle__bars,
.page-id-15 .site-header:not(.site-header--solid) .menu-toggle__bars::before,
.page-id-15 .site-header:not(.site-header--solid) .menu-toggle__bars::after{
    background-color: var(--color-neutral-white);
}

/* Hero */
.page-id-15 #ai_main > .wp-block-cover:first-child{
    min-height: 960px;
    padding: var(--spacing-md);
}

.page-id-15 #ai_main > .wp-block-cover:first-child .wp-block-cover__inner-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-id-15 #ai_main > .wp-block-cover:first-child .wp-block-spacer:first-child{
    height: 320px !important;
}

.page-id-15 #ai_main > .wp-block-cover:first-child h1.headline-center-l{
    margin: 0 auto 184px;
    line-height: 0.95;
}

.page-id-15 #ai_main > .wp-block-cover:first-child p.blurb.club{
    max-width: 470px;
    margin: 0 auto;
    color: var(--color-neutral-white);
    font-family: var(--accent-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-id-15 #ai_main > .wp-block-cover:first-child .wp-block-spacer:last-child{
    height: 80px !important;
}

/* Intro and plan heading */
.page-id-15 #ai_main > .wp-block-cover:first-child + h6.eyebrow-2xs{
    margin: 156px auto 64px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.page-id-15 #ai_main > .wp-block-cover:first-child + h6.eyebrow-2xs + p.blurb-center-2xs{
    max-width: 860px;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.35;
}

.page-id-15 .blurb-center-2xs-info{
    margin-top: 72px;
}

.page-id-15 .headline-center-l-no-eyebrow.club{
    max-width: 700px;
    margin: 80px auto 0;
    font-size: 110px;
    line-height: 0.95;
}

.page-id-15 .headline-center-l-no-eyebrow.club::before{
    font-size: 64px;
    margin-bottom: 48px;
}

/* Editorial images are deliberately offset on the desktop composition. */
.page-id-15 #ai_main > .wp-block-image{
    width: min(24.65vw, 426px);
    margin: 40px 0 0;
}

.page-id-15 #ai_main > .wp-block-image figure,
.page-id-15 #ai_main > .wp-block-image img{
    width: 100%;
}

.page-id-15 .steps-video{
    position: relative;
    display: block;
    min-height: 1080px;
    margin-top: -360px;
}

.page-id-15 .steps-video .wp-block-media-text__content{
    padding: 0;
}

.page-id-15 .steps-video figure.wp-block-media-text__media{
    position: absolute;
    top: 30%;
    right: 0;
    width: min(24.65vw, 426px);
    aspect-ratio: 426 / 560;
    margin: 0;
    overflow: hidden;
}

.page-id-15 .steps-video figure.wp-block-media-text__media img{
    width: 100%;
    height: 100%;
    aspect-ratio: 426 / 560;
    object-fit: cover;
}

/*------------------------->
Restaurant introduction
--------------------------*/

/* The restaurant opens on white, rather than a cover image. Its transparent
   header therefore needs the dark treatment that theme-dark normally reserves
   for the solid state. The open menu is still the brown full screen panel, so
   the override lifts while it is open and the white default takes over again. */
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .site-logo,
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .menu-toggle,
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a{
    color: var(--color-primary-dark);
}

#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.page-id-290.theme-dark:not(.menu-open) .site-header:not(.site-header--solid) .menu-toggle__bars::after{
    background-color: var(--color-primary-dark);
}

/* The gallery's sources are mixed landscape and portrait files. The design is
   a single editorial canvas, so each image gets a deliberate crop and slot. */
.page-id-290 .restaurant-gallery.has-nested-images{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1728px;
    /* The canvas runs from the top of the vineyard slot to the bottom of the
       picnic slot, the two images that bound the composition. */
    aspect-ratio: 1728 / 949;
    margin: 104px auto 112px;
    overflow: visible;
}

.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
    position: absolute;
    display: block;
    margin: 0;
    overflow: hidden;
}

.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img{
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Every slot that sits on top of another one carries the page colour as a
   border, so the overlap reads as a stack of prints rather than a collage.
   The wine pour is the bed of the composition and is left without one. */
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(1),
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(3),
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(4){
    border: 4px solid var(--color-neutral-white);
}

/* Vineyard. Later siblings paint over earlier ones by default, which would put
   the wine pour over this corner; the design has the vineyard on top. */
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(1){
    top: 0;
    left: 8.3333%;
    width: 19.6759%;
    aspect-ratio: 340 / 426;
    z-index: 1;
}

/* Wine pour */
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(2){
    top: 5.058%;
    left: 21.5278%;
    width: 31.713%;
    aspect-ratio: 548 / 693;
}

.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(2) img{
    object-position: 84.35% 50%;
}

/* Plated dish */
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(3){
    top: 17.9136%;
    left: 46.6435%;
    width: 31.713%;
    aspect-ratio: 548 / 693;
}

/* Picnic. Wider and taller than the vineyard slot it mirrors, so the
   composition finishes heavier on the right than it starts on the left. */
.page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(4){
    top: 51.2118%;
    left: 71.7593%;
    width: 22.6852%;
    aspect-ratio: 392 / 463;
}

@media (max-width: 768px){
    /* The composition holds on a phone, redrawn on a taller, narrower canvas:
       the four slots step down the screen rather than across it, the vineyard
       running off the left edge and the picnic off the right. */
    .page-id-290 .restaurant-gallery.has-nested-images{
        width: 100%;
        aspect-ratio: 390 / 611;
        margin: var(--spacing-4xl) auto;
    }

    /* Vineyard */
    .page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(1){
        top: 0;
        left: 0;
        width: 30.64%;
    }

    /* Wine pour */
    .page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(2){
        top: 12.93%;
        left: 13.49%;
        width: 51.03%;
    }

    /* Plated dish */
    .page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(3){
        top: 44.84%;
        left: 35.28%;
        width: 51.03%;
    }

    /* Picnic. Squarer than the desktop slot, matching the vineyard it now
       sits diagonally opposite. */
    .page-id-290 .restaurant-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(4){
        top: 75.45%;
        left: 69.36%;
        width: 30.64%;
        aspect-ratio: 340 / 426;
    }
}

.page-id-15 .plan-step,
.page-id-15 .steps-video .plan-step{
    min-height: 1080px;
}

.page-id-15 .plan-step-number{
    font-size: min(41.67vw, 720px);
    color: var(--color-secondary-light);
}

.page-id-15 h2.plan-step-content{
    max-width: 440px;
    margin: 0;
    font-size: 32px;
    line-height: 0.95;
}

/* Member benefits */
.page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) > .wp-block-column{
    padding: 160px 0 112px;
}

.page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) h6.eyebrow-s{
    margin: 0 auto 64px;
}

.page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) h1.headline-center-s{
    max-width: 860px;
    margin: 0 auto 112px;
}

.page-id-15 .club-benefits{
    position: relative;
    display: block;
    overflow: hidden;
    padding-bottom: 72px;
}

/* Gutenberg stores each benefit's icon, title and copy consecutively.  A
   column-flow grid restores those three nodes to one visual card. */
.page-id-15 .club-benefits > .wp-block-group__inner-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    grid-template-rows: 64px minmax(38px, auto) auto;
    align-items: start;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
}

.page-id-15 .club-benefits figure,
.page-id-15 .club-benefits h2,
.page-id-15 .club-benefits p{
    margin: 0;
}

.page-id-15 .club-benefits figure{
    align-self: start;
}

.page-id-15 .club-benefits h2{
    align-self: center;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
    font-size: 32px;
    line-height: 1;
    text-align: center;
}

.page-id-15 .club-benefits p{
    max-width: 240px;
    padding: 0 var(--spacing-xs);
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
}

.page-id-15 .club-benefits::after{
    content: "~\00a0\00a0\25cb\00a0\00a0\25cf\00a0\00a0\25cb\00a0\00a0\25cb\00a0\00a0~";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary-dark);
    font-family: var(--heading-font-family);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

/* Join panel */
.page-id-15 .wine-dine-cover{
    min-height: 960px;
}

.page-id-15 .wine-dine-cover .wine-dine-cover-content h6.eyebrow-s,
.page-id-15 .wine-dine-cover .wine-dine-cover-content h1,
.page-id-15 .wine-dine-cover .wine-dine-cover-content p{
    color: var(--color-neutral-white);
}

.page-id-15 .wine-dine-cover .wine-dine-cover-content .c7-club-join-button{
    margin-top: var(--spacing-2xl);
    text-align: center;
}

.page-id-15 .wine-dine-cover .wine-dine-cover-content .c7-club-join-button a.c7-btn--primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 248px;
    height: 64px;
    background-color: var(--color-neutral-white);
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* FAQ */
.page-id-15 #ai_main > .wp-block-columns:has(.club-faq) > .wp-block-column{
    padding: 160px 0 80px;
}

.page-id-15 #ai_main > .wp-block-columns:has(.club-faq) h6.eyebrow-s{
    margin: 0 auto 64px;
}

.page-id-15 .headline-center-s.club{
    max-width: 860px;
    margin: 0 auto;
}

.page-id-15 .club-faq{
    max-width: 1440px;
    width: calc(100% - 80px);
    margin: 128px auto 0;
}

.page-id-15 .club-faq .wp-block-accordion-item{
    margin: 0;
}

.page-id-15 .club-faq h3.wp-block-accordion-heading{
    margin: 0;
}

.page-id-15 .club-faq .wp-block-accordion-heading__toggle{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 0 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-dark);
    cursor: pointer;
    text-align: left;
    overflow: visible;
}

.page-id-15 .club-faq .wp-block-accordion-heading__toggle-title{
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-id-15 .club-faq .wp-block-accordion-heading__toggle-icon{
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    justify-self: end;
    font-size: 0;
    line-height: 1;
    overflow: visible;
}

.page-id-15 .club-faq .wp-block-accordion-heading__toggle-icon::after{
    display: block;
    width: 100%;
    content: "+";
    font-family: var(--heading-font-family);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.page-id-15 .club-faq .wp-block-accordion-item::after{
    margin: 0;
}

/* All answers start closed. WordPress adds .is-open after a heading is clicked,
   which is the only state in which its matching panel is shown. */
.page-id-15 .club-faq .wp-block-accordion-panel{
    display: none !important;
}

.page-id-15 .club-faq .wp-block-accordion-item.is-open > .wp-block-accordion-panel{
    display: block !important;
}

.page-id-15 .club-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after{
    content: "\2014";
    font-size: 20px;
}

.page-id-15 .club-faq #accordion-item-10-panel{
    padding: 48px 0 0;
}

.page-id-15 .club-faq #accordion-item-10-panel > p:empty{
    display: none;
}

.page-id-15 .club-faq #accordion-item-10-panel .wp-block-columns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-5xl);
    margin: 0;
}

.page-id-15 .club-faq #accordion-item-10-panel .wp-block-column{
    max-width: 430px;
}

.page-id-15 .club-faq #accordion-item-10-panel h3{
    margin: 0 0 var(--spacing-lg);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.page-id-15 .club-faq #accordion-item-10-panel p{
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

@media (max-width: 768px){
    /* Hero */
    .page-id-15 #ai_main > .wp-block-cover:first-child{
        min-height: 640px;
        padding: var(--spacing-md);
    }

    .page-id-15 #ai_main > .wp-block-cover:first-child .wp-block-spacer:first-child{
        height: 240px !important;
    }

    .page-id-15 #ai_main > .wp-block-cover:first-child h1.headline-center-l{
        max-width: 300px;
        margin-bottom: 128px;
        font-size: 48px;
        line-height: 0.95;
    }

    .page-id-15 #ai_main > .wp-block-cover:first-child p.blurb.club{
        max-width: 306px;
        font-size: 14px;
        line-height: 1.25;
    }

    .page-id-15 #ai_main > .wp-block-cover:first-child .wp-block-spacer:last-child{
        height: 32px !important;
    }

    /* Intro and plan */
    .page-id-15 #ai_main > .wp-block-cover:first-child + h6.eyebrow-2xs{
        margin: 72px auto 40px;
        font-size: 14px;
    }

    .page-id-15 #ai_main > .wp-block-cover:first-child + h6.eyebrow-2xs + p.blurb-center-2xs{
        max-width: 312px;
        width: calc(100% - 48px);
        font-size: 18px;
        line-height: 1.27;
    }

    .page-id-15 .blurb-center-2xs-info{
        width: calc(100% - 48px);
        margin: 56px auto 0;
    }

    .page-id-15 .blurb-center-2xs-info::before,
    .page-id-15 .blurb-center-2xs-info::after{
        margin-bottom: var(--spacing-lg);
    }

    .page-id-15 .blurb-center-2xs-info::after{
        margin-top: var(--spacing-lg);
        margin-bottom: 0;
    }

    .page-id-15 .headline-center-l-no-eyebrow.club{
        max-width: 286px;
        margin-top: 72px;
        font-size: 48px;
        line-height: 0.94;
    }

    .page-id-15 .headline-center-l-no-eyebrow.club::before{
        margin-bottom: 28px;
        font-size: 36px;
    }

    /* The reference uses the wine imagery as a desktop-only editorial detail. */
    .page-id-15 #ai_main > .wp-block-image,
    .page-id-15 .steps-video figure.wp-block-media-text__media{
        display: none;
    }

    .page-id-15 .steps-video{
        min-height: 540px;
        margin-top: 0;
    }

    .page-id-15 .steps-video .wp-block-media-text__content{
        padding: 0;
    }

    .page-id-15 .plan-step,
    .page-id-15 .steps-video .plan-step{
        min-height: 540px;
    }

    .page-id-15 .plan-step-number{
        font-size: 480px;
    }

    .page-id-15 h2.plan-step-content{
        max-width: 300px;
        padding: 0 var(--spacing-md);
        font-size: 24px;
        line-height: 0.95;
    }

    /* Benefits */
    .page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) > .wp-block-column{
        padding: 96px 0 72px;
    }

    .page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) h6.eyebrow-s{
        margin-bottom: 48px;
    }

    .page-id-15 #ai_main > .wp-block-columns:has(.club-benefits) h1.headline-center-s{
        max-width: 330px;
        margin-bottom: 72px;
        font-size: 40px;
        line-height: 0.96;
    }

    .page-id-15 .club-benefits{
        padding-bottom: 64px;
    }

    .page-id-15 .club-benefits > .wp-block-group__inner-container{
        grid-auto-columns: 220px;
        grid-template-rows: 64px 38px auto;
        position: relative;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }

    .page-id-15 .club-benefits h2{
        font-size: 24px;
        padding-top: var(--spacing-md);
    }

    .page-id-15 .club-benefits p{
        max-width: 220px;
        font-size: 16px;
    }

    /* Join panel */
    .page-id-15 .wine-dine-cover{
        min-height: 532px;
        padding: var(--spacing-md);
    }

    .page-id-15 .wine-dine-cover .wp-block-cover__inner-container > .wp-block-spacer{
        display: none;
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 468px;
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content h6.eyebrow-s{
        margin: 0 auto 32px;
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content h1{
        max-width: 300px;
        margin: 0 auto 24px;
        font-size: 40px;
        line-height: 0.95;
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content p.blurb-center-s{
        width: 100%;
        max-width: 288px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.25;
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content .c7-club-join-button{
        margin-top: 32px;
    }

    .page-id-15 .wine-dine-cover .wine-dine-cover-content .c7-club-join-button a.c7-btn--primary{
        min-width: 196px;
        height: 56px;
        font-size: 13px;
    }

    /* FAQ */
    .page-id-15 #ai_main > .wp-block-columns:has(.club-faq) > .wp-block-column{
        padding: 80px 0 40px;
    }

    .page-id-15 #ai_main > .wp-block-columns:has(.club-faq) h6.eyebrow-s{
        margin-bottom: 48px;
    }

    .page-id-15 .headline-center-s.club{
        max-width: 320px;
        font-size: 40px;
        line-height: 0.96;
    }

    .page-id-15 .club-faq{
        width: calc(100% - 40px);
        margin-top: 80px;
    }

    .club-faq-accordion{
        padding: unset;
    }

    .page-id-15 .club-faq .wp-block-accordion-heading__toggle{
        grid-template-columns: minmax(0, 1fr) 40px;
        padding-right: 0;
        min-height: 64px;
    }

    .page-id-15 .club-faq .wp-block-accordion-heading__toggle-icon{
        width: 40px;
        height: 40px;
    }

    .page-id-15 .club-faq .wp-block-accordion-heading__toggle-title{
        font-size: 13px;
        line-height: 1.18;
    }

    .page-id-15 .club-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after{
        font-size: 16px;
    }

    .page-id-15 .club-faq #accordion-item-10-panel{
        padding-top: 40px;
    }

    .page-id-15 .club-faq #accordion-item-10-panel .wp-block-columns{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-id-15 .club-faq #accordion-item-10-panel .wp-block-column{
        max-width: none;
    }

    .page-id-15 .club-faq #accordion-item-10-panel h3{
        margin-bottom: var(--spacing-md);
        font-size: 13px;
    }

    .page-id-15 .club-faq #accordion-item-10-panel p{
        font-size: 16px;
        line-height: 1.3;
    }
}

@font-face {
    font-family: 'Nyght Serif';
    src: url('NyghtSerif-Regular.woff2') format('woff2'),
        url('NyghtSerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nyght Serif';
    src: url('NyghtSerif-RegularItalic.woff2') format('woff2'),
        url('NyghtSerif-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Nyght Serif';
    src: url('NyghtSerif-Light.woff2') format('woff2'),
        url('NyghtSerif-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nyght Serif';
    src: url('NyghtSerif-LightItalic.woff2') format('woff2'),
        url('NyghtSerif-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('GeneralSans-Light.woff2') format('woff2'),
        url('GeneralSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*------------------------->
CSS Variables
--------------------------*/

:root {

    --color-primary-darkest: #291E1A;
    --color-primary-dark: #3A231C;
    --color-primary-dark-50: rgba(58, 35, 28, 0.5);
    --color-primary-dark-20: rgba(58, 35, 28, 0.2);
    --color-secondary-dark: #A38F75;
    --color-secondary-medium: #D1C1AF;
    --color-secondary-medium-10: rgb(209, 193, 175, 0.2);
    --color-secondary-light: #E7D7C5;
    --color-secondary-lighter: #E0D6CB;
    --color-secondary-lightest: #EFE2D4;
    --color-neutral-medium: #9A9593;
    --color-neutral-light: #C8C2C0;
    --color-neutral-lighter: #ECEBEA;
    --color-neutral-white: #ffffff;
    --color-feedback-error: #CE5959;
    --color-feedback-success: #4CAF50;
    --color-feedback-warning: #FF9800;
    --color-feedback-info: #14181B;

    --heading-font-family: 'Nyght Serif', serif;
    --body-font-family: 'General Sans', sans-serif;
    --accent-font-family: 'Josefin Sans', sans-serif;

    --size-wide: 100%;
    --size-xlarge: 1728px;
    --size-large: 1440px;
    --size-medium: 1150px;
    --size-small: 860px;
    --size-xsmall: 520px;
    --size-2xsmall: 460px;
    --size-3xsmall: 350px;

    --spacing-unit: 8px;
    --spacing-xxs: calc(var(--spacing-unit) * 0.5);
    /* 4px */
    --spacing-xs: calc(var(--spacing-unit) * 1);
    /* 8px */
    --spacing-sm: calc(var(--spacing-unit) * 1.5);
    /* 12px */
    --spacing-md: calc(var(--spacing-unit) * 2);
    /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);
    /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);
    /* 32px */
    --spacing-2xl: calc(var(--spacing-unit) * 5);
    /* 40px */
    --spacing-3xl: calc(var(--spacing-unit) * 6);
    /* 48px */
    --spacing-4xl: calc(var(--spacing-unit) * 7);
    /* 56px */
    --spacing-5xl: calc(var(--spacing-unit) * 8);
    /* 64px */
    --spacing-6xl: calc(var(--spacing-unit) * 12);
    /* 96px */

    /* Commerce7 Styles */
    /* --c7-page-width: ; */
    /* --c7-page-width-checkout: ; */
    --c7-font-family: var(--accent-font-family);
    /* --c7-body-text-color: ; */
    /* --c7-alt-text-color: ; */
    /* --c7-font-size: ; */
    /* --c7-font-size-sub: ; */
    --c7-heading-font-family: var(--heading-font-family);
    --c7-heading-text-color: var(--color-primary-dark);
    --c7-heading-font-weight: 500;

    --c7-primary-color: var(--color-secondary-light);
    --c7-primary-color-text: var(--color-primary-dark);
    /* --c7-primary-color-dark: ; */
    /* --c7-primary-color-focus: ; */

    /* --c7-link-color: ; */
    /* --c7-bg: var(--color-secondary-light); */
    /* --c7-bg-alt: ; */
    --c7-border-color: var(--color-primary-dark-20);
    /* --c7-border-radius: ; */

    /* --c7-loading-bg: ; */
    /* --c7-modal-border-radius: ; */
    /* --c7-modal-shadow: ; */
    /* --c7-overlay-bg: ; */
    /* --c7-progress-bar: ; */
    /* --c7-pill-bg: ; */
    /* --c7-pill-text-color: ; */

    /* --c7-field-bg: ; */
    /* --c7-field-border-radius: ; */
    /* --c7-field-border-color: ; */
    /* --c7-field-focus-color: ; */
    /* --c7-field-option-selected-color: ; */
    /* --c7-field-option-focus-color: ; */
    /* --c7-field-placeholder: ; */

    --c7-primary-button-bg: var(--color-secondary-medium);
    --c7-primary-button-bg-hover: var(--color-secondary-dark);
    --c7-primary-button-text-color: var(--color-primary-dark);
    /* --c7-alt-button-bg: ; */
    /* --c7-alt-button-bg-hover: ; */
    /* --c7-alt-button-text-color: ; */
    --c7-button-border-radius: 48000px;

    /* --c7-info-bg: ; */
    /* --c7-error: ; */
    /* --c7-error-bg: ; */
    /* --c7-warning: ; */
    /* --c7-warning-bg: ; */
    /* --c7-success: ; */
    /* --c7-success-bg: ; */

    --c7-header-text-color: var(--color-primary-dark);
    /* --c7-notification: ; */
    /* --c7-cart-count-bg: ; */
    /* --c7-cart-count-bg-focus: ; */
    /* --c7-cart-count-text-color: ; */
    /* --c7-side-cart-shadow: ; */
    /* --c7-dropdown-border-radius: ; */
    /* --c7-dropdown-shadow: ; */
    /* --c7-dropdown-hover: ; */

    /* --c7-block-bg: ; */
    /* --c7-block-border-color: ; */
    /* --c7-block-border-radius: ; */
    /* --c7-block-shadow: ; */

}

/*------------------------->
Resets
--------------------------*/

/* C7 resets */
#cav .c7wp-wrap[data-c7-type="login"],
.c7wp-wrap[data-c7-type="cart"] {
    min-width: unset;
}

#cav .c7wp-wrap[data-c7-type="login"],
.c7wp-wrap[data-c7-type="cart"] button.c7-link {}

#cav .header-actions #c7-account .c7-user-nav__account a {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
}

.c7-user-nav__account {
    padding-right: unset;
}

.c7-content {
    padding: unset;
}

/* WordPress Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea,
select {
    font-family: var(--body-font-family);
    font-size: 1rem;
}

table {
    border-collapse: collapse;
}

:where(.wp-block-columns) {
    margin-bottom: unset;
}

/*------------------------->
Header
--------------------------*/
.site-header {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    transition: transform 0.35s ease, background-color 0.35s ease;
}

/* Applied when the header slides back in mid-page; cleared again at the top. */
.site-header--solid {
    /* background: var(--color-secondary-medium); */
}

/* Slides the header out of view without a transform on the resting state, so the
   fixed .main-navigation keeps the viewport as its containing block. */
/* .menu-toggle--hidden, */
.site-branding--hidden,
/* .header-actions-nav--hidden, */
.menu-item-278--hidden,
.c7-user-nav__account--hidden,
   .site-header--hidden {
    /* transform: translateY(-200%); */
     opacity: 0;
     pointer-events: none;
     visibility: hidden;
}

/* The nav lives inside the header, so no transform may apply while it is open. */
#cav.menu-open .site-header {
    transform: none;
    transition: none;
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.header-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    height: calc(var(--spacing-xl) * 2.25);
    /* Only the left edge is inset; the buy wine and cart blocks stay full bleed. */
    padding-left: var(--spacing-2xl);
}

.menu-toggle {
    background: transparent;
    border: none;
    /* color: var(--color-primary-dark); */
    font-family: var(--accent-font-family);
    /* Matches the header actions nav on the other side of the bar. */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

/* Letter spacing also trails the final U, which would read as a wider gap than
   the one set above; the negative margin takes that trailing space back. */
.menu-toggle__label {
    margin-right: -0.04em;
}

.menu-toggle__bars {
    width: 32px;
    height: 1.5px;
    background: var(--color-primary-dark);
    position: relative;
    display: inline-block;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    left: 0;
    transition: opacity 180ms ease;
}

.menu-toggle__bars::before {
    top: -5px;
}

.menu-toggle__bars::after {
    top: 5px;
}

.menu-toggle.is-open .menu-toggle__bars::before,
.menu-toggle.is-open .menu-toggle__bars::after {
    opacity: 0;
}

.site-branding {
    text-align: center;
    flex-grow: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    ;
    top: 50%;
}

.site-logo {
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 1.15rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    /* gap: var(--spacing-md); */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-actions .header-actions-nav {
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: var(--spacing-lg);
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--accent-font-family);
    font-weight: 500;
    line-height: 1.2;
    /* Percentages are not valid for letter-spacing, so the 4% was dropped. */
    letter-spacing: 0.04em;
    padding-left: var(--spacing-md);
    align-items: center;
}

.header-actions #c7-cart {
    background-color: var(--color-secondary-light);
    height: calc(var(--spacing-xl) * 2.25);
    padding: 0 var(--spacing-md);
}

#menu-header-actions-nav .buy-wine-btn a {
    background: var(--wp--preset--color--secondary-light);
    height: calc(var(--spacing-xl) * 2.25);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--color-secondary-dark);
    padding: 0 var(--spacing-4xl);
}

/* Dark pages open on a full bleed cover image, so the header sits on artwork and
   the brown default would disappear into it. Scoped to the transparent state:
   once the header is --solid again mid page it is back over the cream sections.
   The buy wine link and the cart keep their brown, they carry their own block. */
#cav.theme-white .site-header:not(.site-header--solid) .site-logo,
#cav.theme-white .site-header:not(.site-header--solid) .menu-toggle,
#cav.theme-white .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.theme-white .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a {
    color: var(--color-neutral-white);
}

/* #cav.theme-lightest .site-header:not(.site-header--solid) .site-logo,
#cav.theme-lightest .site-header:not(.site-header--solid) .menu-toggle{
    color: var(--color-neutral-white);
} */

#cav.theme-white .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.theme-white .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.theme-white .site-header:not(.site-header--solid) .menu-toggle__bars::after{
    background: var(--color-neutral-white);
}

#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle.is-open{
    color: var(--color-secondary-lightest);
}

#cav.theme-light .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__label,
#cav.theme-lightest .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__label,
#cav.theme-lighter .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__label,
#cav.theme-medium .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__label{
    color: var(--color-secondary-lightest);
}

#cav.theme-light .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars,
#cav.theme-light .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::before,
#cav.theme-light .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::after,

#cav.theme-lightest .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars,
#cav.theme-lightest .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::before,
#cav.theme-lightest .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::after,

#cav.theme-lighter .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars,
#cav.theme-lighter .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::before,
#cav.theme-lighter .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::after,

#cav.theme-medium .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars,
#cav.theme-medium .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::before,
#cav.theme-medium .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::after,

#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars,
#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::before,
#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle.is-open .menu-toggle__bars::after{
    background: var(--color-secondary-lightest);
}

#cav.theme-dark .site-header:not(.site-header--solid) .site-logo,
#cav.theme-dark .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.theme-dark .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a {
    color: var(--color-primary-dark);
}

#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::after {
    background: var(--color-primary-dark);
}

#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .site-logo,
#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .menu-toggle,
#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .site-logo,
/* #cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .menu-toggle, */
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a,
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .site-logo,
/* #cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .menu-toggle, */
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) #menu-header-actions-nav li:not(.buy-wine-btn) a,
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .header-actions #c7-account .c7-user-nav__account a {
    color:  var(--color-primary-dark);
}

#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.page-id-17.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::after
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.page-id-294.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::after,
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars,
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::before,
#cav.page-id-296.theme-dark .site-header:not(.site-header--solid) .menu-toggle__bars::after {
    background:  var(--color-primary-dark);
}

.header-link {
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-family: var(--accent-font-family);
}

.button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-dark);
    color: var(--color-neutral-white);
    padding: 0.9rem 1.4rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cart-toggle {
    color: var(--color-primary-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-toggle__icon {
    font-size: 1.05rem;
}

.main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: var(--color-primary-dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    height: 100vh;
    z-index: 1;
    display: grid;
    grid-template-columns: 60% 40%;
}

.main-navigation.is-open {
    opacity: 1;
    pointer-events: auto;
}

.main-navigation .menu-toggle {
    position: absolute;
    top: calc(var(--spacing-unit) * 3);
    left: var(--spacing-md);
    z-index: 2;
    /* color: var(--color-secondary-dark); */
}

.main-navigation .menu-toggle__bars {
    background: var(--color-secondary-dark);
}

.main-navigation .primary-menu {
    padding-top: calc(var(--spacing-unit) * 10);
}

#site-navigation.main-navigation.is-open aside {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#site-navigation.main-navigation.is-open .nav-media__video,
#site-navigation.main-navigation.is-open .nav-media__image,
#site-navigation.main-navigation.is-open .nav-media__image img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 9;
}

#site-navigation.main-navigation.is-open .nav-media__video {
    transition: opacity 180ms ease;
}

#site-navigation.main-navigation.is-open .nav-media__image {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

#site-navigation.main-navigation.is-open .nav-media__image img {
    display: block;
}

#site-navigation.main-navigation.is-open .nav-media--active .nav-media__video {
    opacity: 0;
}

#site-navigation.main-navigation.is-open .nav-media__image.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.main-navigation.is-open .sub-menu a {
    font-family: var(--accent-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;

}

.primary-menu {
    list-style: none;
    margin: 0;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    /* Shrink items to their text so hovering the gaps leaves the nav video playing. */
    align-items: flex-start;
}

.primary-menu ul {
    list-style: none;
    gap: var(--spacing-unit);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.primary-menu li {
    max-width: 100%;
}

.primary-menu li a {
    color: var(--color-secondary-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: inline-block;
    font-family: var(--heading-font-family);
    font-weight: 400;
    font-size: 60px;
}

/* .primary-menu {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
        padding: 0;
    } */

.header-actions {
    /* gap: var(--spacing-lg); */
}

.theme-light,
.theme-lighter {
    background: var(--color-secondary-light);
    color: var(--color-primary-dark);
}

.theme-lighter {
    background: var(--color-secondary-lighter);
}

.theme-lightest {
    background: var(--color-secondary-lightest);
}

.theme-medium {
    background: var(--color-secondary-medium);
}

/* #ai_main{
    padding-top: calc(var(--spacing-3xl) * 3);
} */

/*------------------------->
Theme Blocks
--------------------------*/

h1 {
    font-family: var(--heading-font-family);
    font-size: 60px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    max-width: var(--size-medium);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-family: var(--heading-font-family);
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

h1.headline-left-xl {
    font-size: 188px;
    line-height: 0.9;
    letter-spacing: -3%;
    max-width: var(--size-small);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

h1.headline-left-xl::before,
h1.headline-center-xl::before,
.headline-center-xl-no-eyebrow::before,
.headline-center-l-no-eyebrow::before,
.headline-center-s-no-eyebrow::before,
.headline-center-xs-no-eyebrow::before {
    content: "~";
    display: block;
    font-size: 108px;
    line-height: 1;
    margin-bottom: calc(var(--spacing-xl) * 2);
}

h1.headline-center-xl,
.headline-center-xl-no-eyebrow {
    font-size: 188px;
    line-height: 0.9;
    letter-spacing: -3%;
    max-width: var(--size-medium);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.headline-center-xl-no-eyebrow {
    max-width: var(--size-large);
}

h1.headline-center-l,
.headline-center-l-no-eyebrow {
    font-size: 140px;
    line-height: 0.95;
    max-width: var(--size-medium);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

h1.headline-center-l-composition {
    font-size: 140px;
    line-height: 0.95;
    max-width: var(--size-medium);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-xs);
}

h1.headline-center-l-composition span {
    display: block;
}

h1.headline-center-l-composition span:nth-child(1) {
    text-align: left;
}

h1.headline-center-l-composition span:nth-child(2) {
    text-align: center;
}

h1.headline-center-l-composition span:nth-child(3) {
    text-align: right;
    padding-right: 0.6em;
}

h1.headline-center-l-composition-2 {
    font-size: 140px;
    line-height: 0.95;
    max-width: var(--size-medium);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

h1.headline-center-l-composition-2 span {
    display: block;
}

h1.headline-center-l-composition-2 span:nth-child(1) {
    text-align: center;
}

h1.headline-center-l-composition-2 span:nth-child(2) {
    text-align: left;
}

h1.headline-center-l-composition-2 span:nth-child(3) {
    text-align: right;
}

h1.headline-center-l-composition-3 {
    font-size: 140px;
    line-height: 0.95;
    max-width: var(--size-large);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

h1.headline-center-l-composition-3 span {
    display: block;
}

h1.headline-center-l-composition-3 span:nth-child(1) {
    text-align: left;
    max-width: 715px;
}

h1.headline-center-l-composition-3 span:nth-child(2) {
    text-align: right;
    max-width: 715px;
    align-self: flex-end;
}

h6.eyebrow {
    font-family: var(--accent-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

p {
    font-family: var(--body-font-family);
    font-size: 18px;
}

p.blurb {
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    letter-spacing: -2%;
    max-width: var(--size-small);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-dark);
}

.center-text-l {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    max-width: calc(var(--size-2xsmall)*1.04);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-button .wp-block-button__link {
    align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    word-break: break-word;
}

.wp-block-button.is-style-fill a {
    background: var(--color-secondary-light);
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 4%;
    text-transform: uppercase;
    min-width: 160px;
    height: 64px;
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
}

.wp-block-button.is-style-icon a {
    background: var(--color-secondary-light);
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 4%;
    text-transform: uppercase;
    min-width: 160px;
    height: 64px;
    padding-left: var(--spacing-6xl);
    padding-right: var(--spacing-3xl);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    position: relative;
}

.wp-block-button.is-style-icon svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

h6.eyebrow-left {
    font-family: var(--accent-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-primary-dark);
}

h1.headline-left-l {
    font-size: 140px;
    line-height: 0.95;
    max-width: var(--size-large);
    width: 90%;
    text-align: left;
}

h1.headline-left-l span {
    display: block;
}

.headline-left-large {
    max-width: var(--size-large);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-right: calc(var(--spacing-3xl) * 3);
}

.headline-left-large .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
}

.headline-left-large .blurb-right {
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    letter-spacing: -2%;
    max-width: 570px;
    width: 100%;
    align-self: flex-end;
}

h6.eyebrow-m {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

.headline-center-m {
    font-size: 108px;
    line-height: 0.95;
    max-width: var(--size-small);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


p.blurb-center-m {
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    letter-spacing: -2%;
    max-width: 560px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-dark);
}

.blurb-vintage {
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary-dark);
}

.blurb-vintage-year {
    font-family: var(--heading-font-family);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

h6.eyebrow-s {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

.headline-center-s,
.headline-center-s-no-eyebrow {
    font-size: 80px;
    line-height: 1.0;
    max-width: var(--size-medium);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

p.blurb-center-s {
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-primary-dark);
    line-height: 1.4;
    text-align: center;
    letter-spacing: -2%;
    max-width: var(--size-small);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.buttons-center-s {
    margin-top: var(--spacing-2xl);
    display: flex;
    justify-content: center;
}

.blurb-center-s-price {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

.blurb-center-s-value {
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark-50);
}

.experience-cost-wrapper::before,
.experience-cost-wrapper::after {
    content: "";
    display: block;
    max-width: var(--size-medium);
    width: 100%;
    height: 1px;
    background-color: var(--color-primary-dark-20);
    margin-bottom: var(--spacing-xl);
    margin-left: auto;
    margin-right: auto;
}

.experience-cost-wrapper::after {
    margin-top: var(--spacing-xl);
    margin-bottom: unset;
}

h6.eyebrow-xs {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

.headline-center-xs {
    font-family: var(--heading-font-family);
    font-size: 60px;
    font-weight: 400;
    text-align: center;
    max-width: var(--size-small);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-buttons {
    justify-content: center;
}

.wp-block-button.is-style-text a {
    background-color: transparent;
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-decoration: underline;
}

.headline-center-xs-no-eyebrow {
    font-size: 60px;
    font-weight: 400;
    line-height: 1.0;
    max-width: var(--size-small);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-button.is-style-outline a {
    border: 1px solid var(--color-primary-dark-20);
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 4%;
    text-transform: uppercase;
    min-width: 160px;
    height: 64px;
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    background-color: transparent;
}

h6.eyebrow-2xs {
    font-family: var(--accent-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
}

p.blurb-center-2xs {
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    text-align: center;
    max-width: var(--size-medium);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.blurb-center-2xs-info p,
.blurb-center-2xs-info h5.wp-block-heading,
.blurb-center-2xs-info-white p,
.blurb-center-2xs-info-white h5.wp-block-heading {
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
}

.blurb-center-2xs-info::before,
.blurb-center-2xs-info::after,
.blurb-center-2xs-info-white::before,
.blurb-center-2xs-info-white::after {
    content: "";
    display: block;
    max-width: var(--size-xsmall);
    width: 100%;
    height: 1px;
    background-color: var(--color-primary-dark-20);
    margin-bottom: var(--spacing-xl);
    margin-left: auto;
    margin-right: auto;
}

.blurb-center-2xs-info::after {
    margin-top: var(--spacing-xl);
    margin-bottom: unset;
}

.blurb-center-2xs-info h5.wp-block-heading {
    margin-bottom: var(--spacing-sm);
}

h1.quote {
    max-width: var(--size-medium);
    width: 90%;
    font-family: var(--heading-font-family);
    font-size: 48px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
}

h1.quote::before {
    content: "“";
    display: block;
    font-size: 456px;
    line-height: 1;
    margin-top: var(--spacing-xl);
    margin-bottom: -260px;
    /* Centring the character centres its advance width, and the ink of this
       glyph sits right of that, which leaves the mark visibly off centre above
       the quote. Set in em so it holds at whatever size the mark is set. */
    position: relative;
    right: 0.107em;
}

h1.quote.has-primary-dark-color::before {
    color: var(--color-secondary-light);
}

.blog-entry-title {
    text-align: center;
    line-height: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--size-medium);
    width: 90%;
}

.blog-body h2 {
    font-family: var(--heading-font-family);
    font-size: var(--spacing-xl);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    max-width: var(--size-small);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.blog-body p{
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--size-small);
    width: 90%;
    padding-bottom: var(--spacing-lg);
    color: var(--color-primary-dark);
}

.image-top-text-bottom,
.image-top-text-bottom-with-btns {
    font-family: var(--accent-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--size-small);
    width: 90%;
    padding-bottom: var(--spacing-2xl);
    color: var(--color-primary-dark);
}

.image-top-text-bottom,
.image-top-text-bottom-with-btns {
    display: flex;
    flex-direction: column;
    max-width: 860px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.image-top-text-bottom-with-btns {
    max-width: var(--size-medium);
    width: 90%;
}

.image-top-text-bottom img,
.image-top-text-bottom-with-btns img {
    margin-bottom: var(--spacing-lg);
}

.image-top-text-bottom .wp-block-media-text__content {
    max-width: var(--size-small);
    width: 90%;
    padding: unset;
}

.image-top-text-bottom p,
.image-top-text-bottom-with-btns p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.image-top-text-bottom-with-btns p {
    font-family: var(--body-font-family);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    max-width: var(--size-small);

    text-transform: none;
    font-size: 18px;
}

p.blurb-center-2xs.blog-content {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-align: center;
    max-width: var(--size-2xsmall);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.list-details {
    text-align: center;
}

.list-details p,
.list-details h5.wp-block-heading {
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--spacing-xs);
    padding-bottom: unset;
}

.list-details p {
    margin-bottom: var(--spacing-lg);
}

.list-details::before,
.list-details::after {
    content: "~";
    display: block;
    font-family: var(--heading-font-family);
    font-size: 108px;
    line-height: 1;
    margin-bottom: calc(var(--spacing-xl) * 2);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-dark);
}

h2.blog-content-eyebrow {
    max-width: var(--size-2xsmall);
    width: 90%;

}

.blog-content-eyebrow::before,
.blog-content-eyebrow::after {
    content: "~";
    display: block;
    font-family: var(--heading-font-family);
    font-size: 60px;
    line-height: 1;
    margin-bottom: var(--spacing-xl);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-dark);
}

.blog-content-eyebrow::after {
    margin-top: var(--spacing-xl);
    margin-bottom: unset
}

.pages-image-top-text-bottom {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--size-small);
}

.pages-image-top-text-bottom figcaption {
    font-family: 'Josefin Sans';
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}


.wine-cards {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    gap: var(--spacing-xxs);
    margin-top: var(--spacing-6xl);
    margin-bottom: var(--spacing-xs);
}

.wine-cards .wine-card {
    width: 100%;
}

.wine-card {
    border-radius: 100% 100% 0 0;
    width: 50%;
    aspect-ratio: 0.98;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--spacing-5xl);
}

.wine-card p.has-large-font-size {
    font-family: var(--heading-font-family);
    font-size: 40px;
    font-weight: 500;
    line-height: 110px;
    text-transform: uppercase;
    color: #ffffff;
}

.wine-card p {
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    text-align: center;
    max-width: calc(var(--size-xsmall) + 100px);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
}

.wine-card .wp-block-button.is-style-text a {
    color: var(--color-neutral-white);
}

.vertical-cards {
    max-width: var(--size-medium);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.vertical-cards .wp-block-column figure {
    display: flex;
}

.vertical-cards .wp-block-column:nth-child(1) figure {
    flex-direction: column;
}

.vertical-cards .wp-block-column:nth-child(2) figure {
    flex-direction: column-reverse;
    position: relative;
    transform: translateY(20%);
}

.vertical-cards .wp-block-column figure img {
    aspect-ratio: 0.8;
    width: 100%;
}

.vertical-cards figcaption {
    max-width: var(--size-3xsmall);
    width: 90%;
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
}

.vertical-cards .wp-block-column:nth-child(1) figcaption {
    align-self: flex-end;
    text-align: right;
}

.vertical-cards .wp-block-column:nth-child(2) {
    padding-bottom: 20%;
}

.estate-card {
    height: 100vh;
}

.estate-card .wp-block-media-text__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    overflow: hidden;
}

.estate-card h1 {
    max-width: 480px;
    width: 90%;
    margin-inline: unset;
    text-align: left;
}

.estate-card .estate-card-details {
    align-self: flex-end;
    max-width: 280px;
    justify-self: flex-end;
}

.estate-card .trip-advisor-logo img {
    position: relative;
    width: 50%;
}

.estate-card-details .wp-block-buttons {
    justify-content: flex-start;
}

.estate-card-details .wp-block-buttons a {
    padding-left: unset;
}

.estate-card figure {
    position: relative;
    height: 100%;
}

.estate-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
    position: absolute;
    border: 8px solid white;
}

.experience-cards {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    max-width: var(--size-xlarge);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .experience-cards {
        flex-direction: column;
    }    
}

.experience-cards .experience-card {
    flex-basis: calc(50% - calc(var(--spacing-sm) / 2));
}

.experience-cards .experience-card img {
    width: 100%;
    aspect-ratio: 1.618;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.experience-cards .experience-card .eyebrow {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary-dark-50);
}

.experience-cards .experience-card h2 {
    max-width: var(--size-xsmall);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-xs);
}

/* .content-text-image-left-right.has-primary-dark-background-color figure{
    max-width: var(--size-small);
} */

.content-text-image-left-right .image-text-block,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block {
    position: relative;
    margin-top: 25%;
}

.content-text-image-left-right .image-text-block .wp-block-media-text__content,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block .wp-block-media-text__content {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    justify-self: flex-start;
}

.content-text-image-left-right .image-text-block h1,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block h1 {
    text-align: left;
    margin-bottom: var(--spacing-sm);
    max-width: var(--size-xsmall);
    line-height: 1;
    margin-bottom: var(--spacing-3xl);
    margin-top: var(--spacing-xs);
}

.content-text-image-left-right .image-text-block p {
    max-width: var(--size-xsmall);
}

.content-text-image-left-right .image-text-block h1.headline-left-xl,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block h1.headline-left-xl {
    position: absolute;
    top: 0;
    transform: translate(-22%, -50%);
    min-width: 50vw;
}

.content-text-image-left-right .image-text-block h1.headline-left-xl::before,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block h1.headline-left-xl::before {
    position: absolute;
    top: -188px;
}

.content-text-image-left-right h6,
.content-text-image-left-right h1,
.content-text-image-left-right.has-primary-dark-background-color h6,
.content-text-image-left-right.has-primary-dark-background-color h1 {
    color: var(--color-secondary-dark);
    text-transform: uppercase;
}

.content-text-image-left-right .image-text-block-video .wp-block-media-text__content,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .wp-block-media-text__content {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: unset;
    padding-right: unset;
    margin-top: var(--spacing-xs);
}

.content-text-image-left-right .image-text-block-video .wp-block-media-text__content .wp-block-video,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .wp-block-media-text__content .wp-block-video {
    width: 100%;
    height: 340px;
    max-width: 426px;
}

.content-text-image-left-right .image-text-block-video .wp-block-media-text__content .wp-block-video video,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .wp-block-media-text__content .wp-block-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    display: block;
}

.content-text-image-left-right .image-text-block-video figure.wp-block-media-text__media,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video figure.wp-block-media-text__media {
    margin-left: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container {
    align-self: flex-end;
    max-width: 386px;
    text-align: right;
    width: 90%;
    margin-top: var(--spacing-xl);

}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container,
.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container a,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container a {
    color: var(--color-secondary-lightest);
}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container,
.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container a {
    color: var(--color-primary-dark);
}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container .wp-block-buttons,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container .wp-block-buttons {
    justify-content: flex-end;
}

/* The winemaker page reads the other way round: the copy sits at the left edge
   of its column, under a reel that stays right. Flipping the block also flips
   the copy and the link with it, which would otherwise rag against the edge
   they are now set against. */
.content-text-image-left-right .image-text-block-video .image-text-block-video-content.winemaker,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content.winemaker {
    align-self: flex-start;
    /* Off the screen edge by about what the copy in the row above is set in
       from its own column. */
    padding-left: var(--spacing-5xl);
}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content.winemaker .wp-block-group__inner-container,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content.winemaker .wp-block-group__inner-container {
    align-self: flex-start;
    text-align: left;
}

.content-text-image-left-right .image-text-block-video .image-text-block-video-content.winemaker .wp-block-group__inner-container .wp-block-buttons,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content.winemaker .wp-block-group__inner-container .wp-block-buttons {
    justify-content: flex-start;
}

/* Restaurant "The Cuisine" layout. Offsets are percentages of the container
   width so the overlapping composition scales with the viewport. */
.content-text-image-left-right.restaurant>.wp-block-group__inner-container {
    max-width: var(--size-xlarge);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4%;
}

.content-text-image-left-right.restaurant>.wp-block-group__inner-container>figure.wp-block-image img {
    width: 22.9%;
    margin-left: 3.1%;
}

.content-text-image-left-right.restaurant .headline-left-large {
    width: auto;
    max-width: none;
    padding-right: 0;
    margin-left: 29.6%;
    margin-right: 0;
    /* Lifts the heading alongside the image above it. */
    margin-top: -26.2%;
}

.content-text-image-left-right.restaurant .headline-left-large h1.headline-left-l {
    font-size: clamp(48px, 7.8vw, 112px);
    width: 100%;
    /* In em so the wrap point tracks the font size: one word per line. */
    max-width: 4.3em;
    margin-top: var(--spacing-xxs);
    /* Cancels the auto side margins the constrained layout puts on children. */
    margin-left: 0;
    margin-right: auto;
}

.content-text-image-left-right.restaurant .image-text-block {
    grid-template-columns: 56.6% 40.3%;
    align-items: end;
    /* Overlaps the food image with the tail of the heading. */
    margin-top: -17.1%;
}

.content-text-image-left-right.restaurant .image-text-block .wp-block-media-text__content {
    padding-left: 22.6%;
    padding-right: 0;
    padding-bottom: 10.5%;
}

.content-text-image-left-right.restaurant .image-text-block .wp-block-media-text__content p {
    max-width: calc(var(--size-2xsmall) - 34px);
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.48%;
}

/* The blurbs carry .no-before, so the divider is drawn once across the row
   rather than per column. */
.content-text-image-left-right.restaurant .wp-block-columns {
    margin-top: 13.7%;
}

/* Weddings & Events "Where everything begins" layout. Offsets are percentages
   of the container width so the overlapping composition scales. */
.content-text-image-left-right.weddings>.wp-block-group__inner-container {
    max-width: var(--size-xlarge);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content-text-image-left-right.weddings>.wp-block-group__inner-container>figure.wp-block-image img {
    width: 29.6%;
}

/* Second image sits right, lifted alongside the heading. */
.content-text-image-left-right.weddings>.wp-block-group__inner-container>figure.wp-block-image:last-of-type {
    margin-top: -31.6%;
}

.content-text-image-left-right.weddings>.wp-block-group__inner-container>figure.wp-block-image:last-of-type img {
    margin-left: auto;
}

.content-text-image-left-right.weddings h1.headline-center-l {
    /* Scales with the container so the overlap stays proportional. */
    font-size: clamp(60px, 9.72vw, 140px);
    /* Lifts the heading across both images; z-index keeps the type on top. */
    margin-top: -34.2%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.content-text-image-left-right.weddings p.blurb {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.55%;
    text-transform: uppercase;
    max-width: var(--size-2xsmall);
    margin-top: 3.9%;
}

.content-text-image-left-right.weddings h6.eyebrow-2xs {
    padding-top: 1.9%;
}

.content-text-image-left-right.weddings .blurb-center-2xs-info {
    padding-top: 2.6%;
}

/* Experience modal: filled from the REST API by theme.js. */
.experience-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.experience-modal[hidden] {
    display: none;
}

.experience-modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-primary-dark-50);
}

.experience-modal__dialog {
    position: relative;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    /* Matches the single Experience page background. */
    background: var(--color-neutral-white);
}

/* The dialog only takes focus programmatically, so it needs no focus ring. */
.experience-modal__dialog:focus {
    outline: none;
}

.experience-modal__close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    display: block;
    margin-left: auto;
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--color-primary-dark);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.experience-modal.is-loading .experience-modal__content::before {
    content: "Loading…";
    display: block;
    font-family: var(--accent-font-family);
    font-size: 12px;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primary-dark);
}

body.experience-modal-open {
    overflow: hidden;
}

.experiences-slider-container {
    padding: 0;
}

.experiences-at-cavalli-heading {
    overflow: hidden;
}

.experiences-at-cavalli-heading.weddings {
    overflow: hidden;
}

/* The marquee runs edge to edge. It sits inside the section's 90% column, so
   it is pulled back out by half the gutter that column leaves: 5% of the
   section against 90% of it is 5.5556% of the container the margin resolves
   against. Without this the band is clipped to the column and the type stops
   short of both edges.

   Set as a percentage rather than off 100vw, which counts the scrollbar and
   would leave the page scrolling sideways. Exact up to the 1728px the column
   is capped at; past a 1920px viewport the band holds that width. */
.experiences-slider-container.weddings {
    width: auto;
    max-width: none;
    margin-left: -5.5556%;
    margin-right: -5.5556%;
}

.experiences-slider-heading,
.experiences-slider-heading-2 {
    display: block;
    width: max-content;
    max-width: none;
    margin: 0;
    font-size: 210px;
    line-height: 85%;
    letter-spacing: -5%;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-secondary-medium);
    opacity: 30%;
    will-change: transform;
    animation: experiences-slider-heading-scroll 18s linear infinite;
}

.experiences-slider-heading-2 {
    position: relative;
    top: -0.85em;
    margin-bottom: -0.85em;
    animation-name: experiences-slider-heading-scroll-following;
}

.experiences-slider-heading::after,
.experiences-slider-heading-2::after,
.experiences-slider-heading-wedding::after,
.experiences-slider-heading-wedding-2::after {
    content: '\00a0';
}

.experiences-slider-heading-wedding,
.experiences-slider-heading-wedding-2 {
    display: block;
    width: max-content;
    max-width: none;
    margin: 0;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-secondary-medium);
    will-change: transform;
    animation: experiences-slider-heading-scroll 60s linear infinite;
}

.experiences-slider-heading-wedding-2 {
    position: relative;
    top: -1.01em;
    margin-bottom: -0.85em;
    animation-name: experiences-slider-heading-scroll-following;
}

@keyframes experiences-slider-heading-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes experiences-slider-heading-scroll-following {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .experiences-slider-heading,
    .experiences-slider-heading-2 {
        animation: none;
        transform: none;
    }
}


.flights-bites-slider-container,
.wedding-events-container {
    position: relative;
    margin-top: 20%;
}

.flights-bites-slider-container .headline-center-m {
    max-width: var(--size-small);
}

.experiences-slider {
    overflow: hidden;
    padding-bottom: var(--spacing-4xl);
}

.experiences-slider .flickity-viewport {
    overflow: visible;
}

.experiences-slider .flights-bites-slider-container {
    width: 100%;
}

.flights-bites-slider-header,
.wedding-events-header {
    position: absolute;
    top: 0;
    transform: translate(50%, -70%);
    min-width: 50vw;
}

.wedding-events-header {
    transform: translate(17%, -73%);
}

.wedding-events-container .image-top-text-bottom-with-btns {
    max-width: var(--size-small);
}

.wedding-intro-img img {
    border: 24px solid #ffffff;
}

.estate-page-cover .headline-center-l-composition {
    color: #ffffff;
}

/*------------------------->
Wine page cover
--------------------------*/

/* The reel is cut back to an arch standing in the middle of a brown field, with
   the two halves of the headline reading across it: the first block high and
   left, the second low and right. */
.wine-page-cover {
    /* Named here because the headline reads off the arch height on mobile. */
    --wine-cover-arch-width: clamp(280px, 39vw, 585px);
    --wine-cover-arch-height: clamp(322px, 45vw, 672px);
    background-color: var(--color-primary-dark);
    overflow: hidden;
    /* Sets the field the arch is centred in: the spacer above the headline is
       shorter than the room the design leaves below it. */
    padding-bottom: calc(var(--spacing-unit) * 28);
}

/* The cover video is full bleed by default, pinned to all four edges. Core sets
   that through a type selector, so the element is named here too to outweigh it. */
.wine-page-cover video.wp-block-cover__video-background {
    width: var(--wine-cover-arch-width);
    height: var(--wine-cover-arch-height);
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    /* Deliberately larger than the box: the browser scales a radius pair down
       until it fits the edge, which lands this at exactly half the width and so
       keeps the top a true semicircle at every width. */
    border-radius: 100vmax 100vmax 0 0;
    object-fit: cover;
}

.wine-page-cover h1.headline-center-l-composition-3 {
    color: var(--color-neutral-white);
    /* The design sets the two blocks further apart than the lines within them. */
    gap: 0.5em;
    /* The heading otherwise carries the browser default 0.67em block margin,
       which at this size adds another 90px above the editor's spacer. */
    margin-top: 0;
    margin-bottom: 0;
}

.intro-video.intro-video--animated {
    overflow: hidden;
    /* background-color: var(--color-secondary-medium); */
}

.intro-video-pin {
    height: 300vh;
}

.intro-video-pin .intro-video.intro-video--animated {
    position: sticky;
    top: 0;
    height: 100vh;
}

/* The cover background is named twice because core renders a video as
   <video> and an image as <img>, and either one can fill this cover. */
.intro-video.intro-video--animated .wp-block-cover__video-background,
.intro-video.intro-video--animated .wp-block-cover__image-background {
    object-fit: cover;
    will-change: width, height, border-radius, transform;
}

.intro-video.intro-video--animated .wp-block-cover__inner-container {
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    max-width: var(--size-small);
    align-self: flex-end;
    color: #ffffff;
    font-family: var(--body-font-family);
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    margin-bottom: 10%;
}

.intro-video.intro-video--animated .wp-block-cover__inner-container a {
    color: #ffffff;
    font-size: 14px;
}

.cover-reel {
    top: 50%;
    left: 50%;
    width: 330px;
    margin-left: auto;
    margin-right: auto;
    border: 24px solid #ffffff;
}

.intro-cover-text {
    text-align: center;
    max-width: 426px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 4%;
    margin-top: 3%;
    margin-bottom: 5%;
}

.winemaker-cover .wp-block-buttons {
    margin-bottom: 5%;
}

/* The portrait hangs in a white mount, the same treatment the estate reel and
   the wedding intro image carry. */
.winemaker-cover .wp-block-image img {
    border: var(--spacing-lg) solid var(--color-neutral-white);
}

#cav-collection-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    list-style: none;
    font-family: var(--heading-font-family);
    font-size: 24px;
    letter-spacing: 3%;
    text-transform: uppercase;
    font-weight: 400;
    border-top: 1px solid var(--color-primary-dark-50);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.c7-product-collection__products {
    border-top: 1px solid var(--color-primary-dark-50);
    position: relative;
}

.c7-product-collection__products::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: var(--color-primary-dark-50);
}

.c7-product-collection__product-list {
    column-gap: 0;
    margin-top: 0;
}

/* A collection block renders the whole collection template, so one embedded in a
   page repeats the intro line, the title and the filters underneath the heading
   the section already carries. Only the product list is wanted there. */
.wp-block-c7wp-collection .center-text-l,
.wp-block-c7wp-collection .headline-center-xl,
.wp-block-c7wp-collection #cav-collection-nav {
    display: none;
}

/* Sets the rule off from the link above it, which the block margin alone leaves
   almost touching. */
.wp-block-c7wp-collection {
    margin-top: var(--spacing-6xl);
}

.c7-product-collection__products .c7-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--color-primary-dark-50);
    padding: var(--spacing-6xl) 0;
}

/* C7 sets a slash between the price and the variant; the detail page drops it
   and the cards read the same way. */
.c7-product-collection__products .c7-product .c7-product__add-to-cart__price {
    gap: var(--spacing-sm);
}

.c7-product-collection__products .c7-product .c7-product__add-to-cart__price__variant::before {
    display: none;
}

.c7-product-collection__products .c7-product .c7-product__image {
    margin-right: 0;
    position: relative;
}

.c7-product-collection__products .c7-product .c7-product__image::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 672px;
    max-width: 90vw;
    aspect-ratio: 672 / 370;
    transform: translate(-50%, -50%);
    background-image: url("../images/product-background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.c7-product-collection__products .c7-product:hover .c7-product__image::after {
    opacity: 1;
}

.c7-product-collection__products .c7-product .c7-product__image img {
    max-height: unset;
}

.c7-product-collection__products .c7-product .shop-details-button {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.c7-product__add-to-cart__form__quantity .c7-form__field input[type='text']{
    background-color: transparent;
    border-color: var(--color-primary-dark-20);
    border-radius: 100px;
    color: var(--color-primary-dark);
}

.product-type-white .c7-product__add-to-cart__form__quantity .c7-form__field input[type='text']{
    background-color: var(--color-secondary-medium-10);
    border-color: var(--color-secondary-medium-10);
    color: var(--color-secondary-lightest);
}

.product-type-red .c7-product__add-to-cart__form__quantity .c7-form__field input[type='text']{
    background-color: #27292a;
    border-color: #27292a;
    color: var(--color-secondary-lightest);
}



#varietal-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--accent-font-family);
}

.c7-product-collection__products .c7-product .c7-product__title {
    font-size: 32px;
    text-transform: uppercase;
    text-align: center;
}

.c7-product__add-to-cart__form {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.c7-product__add-to-cart__form .c7-btn.c7-btn--primary {
    font-size: 14px;
    text-transform: uppercase;
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);

}

.c7-product__add-to-cart__price {
    display: flex;
    justify-content: center;
}

.c7-pagination {
    display: none;
}

.c7-product-collection__products .c7-product .c7-product__add-to-cart__price span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
}

.c7-product-vintage {
    display: flex;
    flex-direction: column;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 4%;
    margin-bottom: unset;
}

.product-intro h1 {
    font-size: 108px;
    line-height: 1;
    max-width: var(--size-small);
}

.product-intro h2 {
    font-size: 40px;
    text-align: center;
    margin-top: unset;
}

.product-intro .c7-product__image {
    display: flex;
    justify-content: center;
    margin-right: 0;
    /* The illustration behind the bottle is positioned against this box. Without
       it the ::after escaped to an ancestor and landed under the copy. */
    position: relative;
}

.product-intro .c7-product__image img {
    width: calc(var(--size-2xsmall) + 20px);
}

.product-intro .c7-product__image::after {
    content: "";
    display: block;
    position: absolute;
    /* Low on the bottle, so the ridge line reads across the label. */
    top: 58%;
    left: 50%;
    z-index: -1;
    width: 100%;
    max-width: var(--size-medium);
    aspect-ratio: 672 / 370;
    transform: translate(-50%, -50%);
    background-image: url("../images/product-background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.c7-product-detail .product-intro .product-info .c7-product__content {
    max-width: calc(var(--size-xsmall) + 50px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -2%;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-6xl);
}

.c7-product_specs {
    max-width: calc(var(--size-3xsmall) - 20px);
    line-height: 1;
    color: var(--color-secondary-dark);
}

#varietal-blend-text {
    text-align: center;
    text-transform: uppercase;
    font-family: var(--heading-font-family);
    font-weight: 500;
    font-size: 40px;
}

.c7-product-info-intro {
    display: flex;
    gap: 50px;
    justify-content: center;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 4%;
}

.c7-product__info .c7-product__teaser {
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    max-width: 446px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.c7-product-detail .c7-product .c7-product__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-primary-dark);
    color: var(--color-secondary-lightest);
}

.c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart {
    margin-left: auto;
    margin-right: auto;
}

.c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart .c7-product__add-to-cart__price {
    flex-direction: column-reverse;
    text-align: center;
}

.c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart .c7-product__add-to-cart__price__variant {
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
}

.c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart .c7-product__add-to-cart__price span:nth-child(2) {
    font-family: var(--heading-font-family);
    font-size: 40px;
    font-weight: 500;
}

.c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart .c7-product__add-to-cart__price__variant::before {
    display: none;
}

.c7-product-tasting-note {
    font-weight: 500;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    display: block;
}

.wine-dine-cover .wine-dine-cover-content {
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(255 255 255 / 50%);
    padding: var(--spacing-2xl);
}

.wine-dine-cover .wine-dine-cover-content h6.eyebrow-s,
.wine-dine-cover .wine-dine-cover-content h1,
.wine-dine-cover .wine-dine-cover-content p {
    color: var(--color-neutral-white);
}

.wine-dine-cover .wine-dine-cover-content .wp-block-button.is-style-fill a {
    background-color: var(--color-neutral-white);
}

.theme-dark .wine-dine-cover .wine-dine-cover-content {
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-secondary-medium);
    padding: var(--spacing-2xl);
}

.wine-dine-cover .wine-dine-cover-content h6.eyebrow-s,
.wine-dine-cover .wine-dine-cover-content h1,
.wine-dine-cover .wine-dine-cover-content p {
    color: var(--color-secondary-medium);
}

.wine-dine-cover .wine-dine-cover-content .wp-block-button.is-style-fill a {
    background-color: var(--color-secondary-medium);
}

.winemaker-cover .winemaker-intro-paragraph {
    font-size: 24px;
    padding-bottom: var(--spacing-xl);
    padding-top: 0;
}

/* An image block sitting on its own directly in the page runs full bleed. The
   editor's large size otherwise holds it to the 1024px file through sizes. */
#ai_main > .wp-block-image figure {
    max-width: none;
}

#ai_main > .wp-block-image img {
    width: 100%;
}

.winemaker-cover p {
    /* The cover always stands on a photograph, so the copy goes light with the
       headings above it rather than staying the default brown. */
    color: var(--color-neutral-white);
    max-width: var(--size-small);
    font-size: 18px;
    font-family: var(--body-font-family);
    line-height: 1.4;
    letter-spacing: -2%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: var(--spacing-xl);
}

.content-text-image-left-right .image-text-block-winemaker .wp-block-media-text__content,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block .wp-block-media-text__content {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    justify-self: flex-start;
}

.content-text-image-left-right .image-text-block-winemaker h1,
.content-text-image-left-right.has-primary-dark-background-color .image-text-block h1 {
    text-align: left;
    margin-bottom: var(--spacing-sm);
    max-width: var(--size-xsmall);
    line-height: 1;
    margin-bottom: var(--spacing-3xl);
    margin-top: var(--spacing-xs);
}

.winemaker-text-block {
    max-width: 426px;
    font-family: var(--body-font-family);
    font-weight: 400;
    color: var(--color-secondary-lightest);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -2%;
}

.eyebrow-card {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-align: center;
    text-transform: uppercase;
    max-width: var(--size-2xsmall);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-secondary-dark);
}

.headline-center-s.eyebrow-card-head {
    max-width: var(--size-2xsmall);
}

.restaurant-paragraph {
    font-size: 18px;
    font-family: var(--body-font-family);
    line-height: 1.4;
    letter-spacing: -2%;
    font-weight: 400;
    max-width: var(--size-xsmall);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.restaurant-paragraph-bottom {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -2%;
    text-align: center;
    max-width: var(--size-xsmall);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--spacing-md);
}

.theme-dark .blurb-center-2xs-info::before,
.theme-dark .blurb-center-2xs-info::after {
    background-color: rgba(255, 255, 255, 0.3);
}

.theme-dark .blurb-center-2xs-info.no-before::before,
.theme-dark .blurb-center-2xs-info.no-before::after {
    background-color: transparent;
}

.image-text-block.light .blurb-center-2xs-info::before {
    margin-top: var(--spacing-3xl);
}

.image-text-block.light .blurb-center-2xs-info::before,
.image-text-block.light .blurb-center-2xs-info::after {
    background-color: var(--color-primary-dark-20);

}

.blurb-center-2xs-info.weddings::before,
.blurb-center-2xs-info.weddings::after {
    background-color: rgba(255, 255, 255, 0.3);
}

.estate-card .estate-card-details .about-bottom-info {
    font-family: var(--accent-font-family);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 4%;
    font-weight: 500;
    text-transform: uppercase;
}

.venue-intro-text {
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4%;
    max-width: 1650px;
    margin-left: auto;
    margin-right: auto;
}

/* white wine varietal */

/* Red wine varietal */
#cav.product-type-red {
    background-color: var(--color-primary-dark);
}

#cav.product-type-red .product-intro,
#cav.product-type-red .product-intro .c7-product__title,
#cav.product-type-red .product-intro h2 {
    color: var(--color-secondary-dark);
}

#cav.product-type-red .product-intro .product-info .c7-product__content {
    color: var(--color-secondary-lightest);
}

#cav.product-type-red .c7-product-detail .c7-product .c7-product__details {
    background-color: var(--color-feedback-info);
}

/* The band around the detail block. The body carries the product type, so left
   unscoped this also ruled the featured wines cards in gold at twice the weight
   of the hairline they share with every other collection. */
#cav.product-type-red .c7-product-detail .c7-product {
    border-top: 2px solid var(--color-secondary-dark);
    border-bottom: 2px solid var(--color-secondary-dark);
}

#cav.product-type-red .site-header .site-logo {
    color: var(--color-secondary-medium);
}

#cav.product-type-red .header-actions #c7-account .c7-user-nav__account>a,
#cav.product-type-red #menu-header-actions-nav,
#cav.product-type-red .menu-toggle {
    color: var(--color-secondary-lightest);
}

#cav.product-type-red .menu-toggle__bars,
#cav.product-type-red .menu-toggle__bars::before,
#cav.product-type-red .menu-toggle__bars::after {
    background: var(--color-secondary-lightest);
}

#cav.product-type-red #menu-header-actions-nav .buy-wine-btn {
    color: var(--color-primary-dark);
}

#cav.product-type-red .product-intro .c7-product__image::after {
    background-image: url("../images/red-product-background.svg");
}

#cav.product-type-red .wine-dine-cover .wine-dine-cover-content {
    border: 1px solid var(--color-secondary-medium);
}

#cav.product-type-red .wine-dine-cover .wine-dine-cover-content h6.eyebrow-s,
#cav.product-type-red .wine-dine-cover .wine-dine-cover-content h1,
#cav.product-type-red .wine-dine-cover .wine-dine-cover-content p {
    color: var(--color-secondary-medium);
}

#cav.product-type-red .wine-dine-cover .wine-dine-cover-content .wp-block-button.is-style-fill a {
    background-color: var(--color-secondary-medium);
}

/* Experiences page */
.experience-blog-body {
    display: grid;
    grid-template-columns: 30% 70%;
}

/* Sidebar images alternate down the column: odd portrait, even landscape.
   Applies on the single Experience page and in the modal, which share markup. */
.sidebar .experience-img img {
    width: 100%;
    object-fit: cover;
}

.sidebar .experience-img:nth-child(odd) img {
    aspect-ratio: 3 / 4;
}

.sidebar .experience-img:nth-child(even) img {
    aspect-ratio: 3 / 2;
}

.single-experience .blurb-center-2xs-info::before,
.single-experience .blurb-center-2xs-info::after,
.experience-modal .blurb-center-2xs-info::before,
.experience-modal .blurb-center-2xs-info::after {
    background-color: var(--color-primary-dark-20);
}

h1.quote.blog.has-primary-dark-color::before {
    display: none;
}

.blog-heading {
    max-width: var(--size-xsmall);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.blog-heading::before {
    content: "~";
    display: block;
    font-size: 60px;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.blog-text-intro {
    text-align: center;
    max-width: var(--size-xsmall);
    margin-left: auto;
    margin-right: auto;
}

.card-details-header {
    text-align: center;
}

.blurb-center-2xs-info.experiences::before,
.blurb-center-2xs-info.experiences::after {
    display: none;
}

.experience-card-detail {
    border: 1px solid var(--color-primary-dark-20);
    display: flex;
    justify-content: center;
    max-width: var(--size-xsmall);
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-2xl) var(--spacing-3xl);
}

.experience-card-detail img {
    margin-left: auto;
    margin-right: auto;
}

.headline-center-xs-no-eyebrow.experiences {
    max-width: var(--size-xsmall);
    margin-left: auto;
    margin-right: auto;
}

.experience-img {}

p.blurb.experiences {
    max-width: var(--size-xsmall);
    font-family: var(--accent-font-family);
    font-size: 18px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

/* Experiences slider */
.experiences-slider-container .experiences-slider img {
    width: 100%;
    aspect-ratio: 1.618;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.headline-center-l-no-eyebrow.club{
    max-width: var(--size-small);
}

.blurb.club{
    max-width: var(--size-xsmall);
    margin-left: auto;
    margin-right: auto;
}

.plan-step {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.plan-step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: var(--heading-font-family);
    font-size: 720px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-secondary-light);
    z-index: 1;
}

.plan-step-content {
    position: relative;
    z-index: 2;
    max-width: calc(var(--size-2xsmall) - 20px);
    text-align: center;
}

.plan-step-content p {
    margin: 0;
    font-family: var(--heading-font-family);
    font-size: 32px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-primary-dark);
}

.steps-video img{
    object-fit: contain;
    aspect-ratio: 1.32;
}

.club-benefits{
    display: flex;
    justify-content: center;
}

.club-benefits img{
    margin-left: auto;
    margin-right: auto;
}

.club-benefits p{
    max-width: calc(var(--size-3xsmall) - 80px);
    text-align: center;
    letter-spacing: -2%;
}

.theme-medium .c7-club-join-button{
    text-align: center;
}

.theme-medium .c7-club-join-button a.c7-btn--primary{
    background-color: var(--color-neutral-white);
    text-transform: uppercase;
    padding: var(--spacing-unit) var(--spacing-3xl);
    line-height: 2.5;
}

.headline-center-s.club{
    max-width: var(--size-small);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.club-faq{
    max-width: var(--size-large);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.club-faq #accordion-item-10-panel .wp-block-columns .wp-block-column{
    max-width: var(--size-2xsmall);
}

.club-faq #accordion-item-10-panel .wp-block-columns{
    gap: var(--spacing-5xl);
}

.club-faq h3{
    font-family: var(--accent-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
}

.club-faq .wp-block-accordion-item::after{
     content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary-dark-20);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
}

.headline-center-s-no-eyebrow.contact::before,
.headline-center-xs-no-eyebrow.contact::before {
    content: "~";
    display: block;
    font-size: 60px !important;
    line-height: 1;
    margin-bottom: var(--spacing-xl);
    font-family: var(--heading-font-family);
}

.headline-center-s-no-eyebrow.contact{
    max-width: var(--size-small);
}

.headline-center-xs-no-eyebrow.contact{
    font-size: 18px;
    font-family: var(--accent-font-family);
}

/* Contact intro: a fixed-proportion canvas (height is 80% of the width), so the
   scattered gallery keeps its composition at any viewport width. Each slot
   carries its own aspect ratio, so replacing an image in the gallery does not
   change the layout. */
.contact-intro{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.8;
    /* The images animate sideways past the edges; clip them so they do not widen
       the page. clip rather than hidden, so no scroll container is created. */
    overflow-x: clip;
}

.contact-intro > .wp-block-group__inner-container{
    position: relative;
    height: 100%;
}

.contact-intro .wp-block-gallery{
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    gap: 0;
}

/* Core's gallery rules use figure.wp-block-image:not(#individual-image), so the
   slot rules below have to match that specificity to win. */
.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
    position: absolute;
    margin: 0;
}

.contact-intro .wp-block-gallery figure.wp-block-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slots in gallery order. Percentages are of the canvas, so the whole
   composition scales together. */
.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(1){
    left: 82.9%;
    top: 4.7%;
    width: 16.3%;
    aspect-ratio: 3 / 4;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(2){
    left: 79.7%;
    top: 80.6%;
    width: 20.7%;
    aspect-ratio: 4 / 3;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(3){
    left: 0;
    top: 0;
    width: 20.9%;
    aspect-ratio: 4 / 3;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(4){
    left: 70.4%;
    top: 42.5%;
    width: 20.7%;
    aspect-ratio: 4 / 3;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(5){
    left: 41.8%;
    top: 58.3%;
    width: 16.3%;
    aspect-ratio: 3 / 4;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(6){
    left: 8.8%;
    top: 39%;
    width: 16.3%;
    aspect-ratio: 3 / 4;
}

.contact-intro .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(7){
    left: 0;
    top: 80.4%;
    width: 20.9%;
    aspect-ratio: 4 / 3;
}

/* Headline and button sit above the gallery. */
.contact-intro > .wp-block-group__inner-container > .wp-block-group{
    position: absolute;
    top: 20.1%;
    left: 0;
    width: 100%;
    z-index: 1;
}

/* The heading's default margins are sized off its 140px font, which pushes the
   button too far down the canvas. */
.contact-intro h1{
    margin-top: 0;
    margin-bottom: var(--spacing-2xl);
}

.contact-intro .wp-block-buttons{
    justify-content: center;
}

/* Prev/next buttons sit inline with the page dots, drawn as tildes. */
.contact-slider .flickity-prev-next-button{
    top: auto;
    bottom: -32px;
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transform: none;
    color: var(--color-primary-dark);
}

.contact-slider .flickity-prev-next-button.previous{
    left: calc(50% - 130px);
}

.contact-slider .flickity-prev-next-button.next{
    right: calc(50% - 130px);
}

.contact-slider .flickity-prev-next-button svg{
    display: none;
}

/* Same tilde treatment the headings use, at a control-sized scale. */
.contact-slider .flickity-prev-next-button::before{
    content: "~";
    display: block;
    font-family: var(--heading-font-family);
    font-size: 32px;
    line-height: 1;
}

/* Flickity cells: one slide wide, with the next peeking in beside it. */
.contact-slider .restaurant-slider{
    width: 100%;
    max-width: var(--size-small);
    margin-right: var(--spacing-xl);
}

.restaurant-slider .restaurant-slider-content{
    max-width: var(--size-small);
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-primary-dark-20);
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-6xl);
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-5xl);

}

.restaurant-slider .restaurant-slider-content img{
    margin-left: auto;
    margin-right: auto;
}

.restaurant-slider h2{
    font-size: 32px;
}


.cavalli-map{
    display: flex;
    justify-content: center;
}

.cavalli-map iframe{
    border: 40px solid #ffffff;
    max-width: 1070px;
    width: 100%;
    height: 400px;
}

@media (max-width:768px){
    .cavalli-map iframe{
        border: 20px solid #ffffff;
        width: 90%;
    }
}

.wp-block-button.is-style-icon.contact a{
    background-color: transparent;
    border: 1px solid var(--color-primary-dark);
}


/*------------------------->
Contact form (Contact Form 7)
--------------------------*/

.wpcf7{
    /* Card proportions from the design: ~520px of content inside 48px padding. */
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-3xl);
    border: 1px solid var(--color-primary-dark-20);
    background: var(--color-neutral-white);
    color: var(--color-primary-dark);
}

.wpcf7-form p{
    margin: 0 0 var(--spacing-lg);
}

/* Contact Form 7 puts a <br> after each label; the labels are block already. */
.wpcf7-form p br{
    display: none;
}

.wpcf7-form .wpcf7-form-control-wrap{
    display: block;
}

/* Section headings, including the "Enquiry" label above the tabs. */
.wpcf7-form h3,
.wpcf7-form .enquiry-tabs > p > label{
    display: block;
    font-family: var(--heading-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--spacing-lg);
}

.wpcf7-form .contact-details label,
.wpcf7-form .additional-info label{
    display: block;
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

/* Ruled divider above each section. */
.wpcf7-form .contact-details,
.wpcf7-form .additional-info{
    border-top: 1px solid var(--color-primary-dark-20);
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-3xl);
}

/* Enquiry subject tabs. */
.wpcf7-form .enquiry-tabs ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
}

.wpcf7-form .enquiry-tabs li{
    border: 1px solid var(--color-primary-dark-20);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wpcf7-form .enquiry-tabs li p{
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.2;
}

.wpcf7-form .enquiry-tabs li:hover{
    border-color: var(--color-primary-dark);
}

.wpcf7-form .enquiry-tabs li.is-active{
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-neutral-white);
}

/* Text fields. */
.wpcf7-form input[type="email"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-primary-dark-20);
    border-radius: 0;
    background: transparent;
    color: var(--color-primary-dark);
    font-family: var(--body-font-family);
    font-size: 16px;
    line-height: 1.4;
    appearance: none;
}

.wpcf7-form textarea{
    display: block;
    min-height: 140px;
    resize: vertical;
}

.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus{
    outline: none;
    border-color: var(--color-primary-dark);
}

.wpcf7-form ::placeholder{
    color: var(--color-neutral-medium);
    opacity: 1;
}

/* Radio group. */
.wpcf7-form .wpcf7-radio{
    display: block;
}

.wpcf7-form .wpcf7-list-item{
    display: block;
    margin: 0 0 var(--spacing-xs);
}

.wpcf7-form input[type="radio"]{
    width: 18px;
    height: 18px;
    margin: 0 var(--spacing-sm) 0 0;
    padding: 0;
    border: 1px solid var(--color-primary-dark-20);
    border-radius: 50%;
    vertical-align: middle;
    appearance: none;
    cursor: pointer;
}

.wpcf7-form input[type="radio"]:checked{
    border-color: var(--color-primary-dark);
    background: radial-gradient(var(--color-primary-dark) 0 45%, transparent 47%);
}

.wpcf7-form .wpcf7-list-item-label{
    font-family: var(--body-font-family);
    font-size: 14px;
    vertical-align: middle;
}

/* Submit. */
.wpcf7-form input[type="submit"]{
    display: block;
    min-width: 200px;
    height: 56px;
    margin: var(--spacing-3xl) auto 0;
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
    border: none;
    border-radius: 999px;
    background: var(--color-secondary-light);
    color: var(--color-primary-dark);
    font-family: var(--accent-font-family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 4%;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover{
    background: var(--color-secondary-medium);
}

/* Validation. */
.wpcf7-form .wpcf7-not-valid{
    border-color: var(--color-feedback-error);
}

.wpcf7-form .wpcf7-not-valid-tip{
    margin-top: var(--spacing-xxs);
    font-family: var(--accent-font-family);
    font-size: 12px;
    letter-spacing: 4%;
    color: var(--color-feedback-error);
}

.wpcf7-form .wpcf7-response-output{
    margin: var(--spacing-lg) 0 0;
    padding: var(--spacing-md);
    border: 1px solid var(--color-primary-dark-20);
    font-family: var(--accent-font-family);
    font-size: 13px;
    line-height: 1.4;
}

/*------------------------->
Journal listing (Query Loop)
--------------------------*/

.wp-block-query{
    max-width: var(--size-xlarge);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-query .wp-block-post-template{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5xl) var(--spacing-xs);
    margin: 0;
    padding: 0;
}

.wp-block-query .wp-block-post{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.wp-block-query .wp-block-post-featured-image{
    margin: 0 0 var(--spacing-lg);
}

/* A fixed ratio keeps the row tidy whatever shape the featured image is. */
.wp-block-query .wp-block-post-featured-image img{
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.wp-block-query .wp-block-post-date{
    margin-bottom: var(--spacing-sm);
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
}

.wp-block-query h2.wp-block-post-title{
    max-width: var(--size-3xsmall);
    margin: 0 auto var(--spacing-md);
    font-family: var(--heading-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

.wp-block-query .wp-block-read-more{
    margin: auto auto 0;
    font-family: var(--accent-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4%;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Pagination: Prev left, numbers centred, Next right, above a rule. */
.wp-block-query .wp-block-query-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6xl);
    margin-top: var(--spacing-5xl);
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
    border-top: 1px solid var(--color-primary-dark-20);
    font-family: var(--heading-font-family);
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The block labels read "Previous Page" / "Next Page"; the short form is shown
   while the full wording stays as the accessible name. */
.wp-block-query .wp-block-query-pagination-previous,
.wp-block-query .wp-block-query-pagination-next{
    font-size: 0;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.wp-block-query .wp-block-query-pagination-previous::after,
.wp-block-query .wp-block-query-pagination-next::after{
    font-size: 24px;
    letter-spacing: inherit;
}

.wp-block-query .wp-block-query-pagination-previous::after{
    content: "Prev";
}

.wp-block-query .wp-block-query-pagination-next::after{
    content: "Next";
}

/* WordPress omits the link entirely on the first and last page, so the greyed
   out label is drawn in its place to keep the row balanced. */
.wp-block-query .wp-block-query-pagination:not(:has(.wp-block-query-pagination-previous))::before{
    content: "Prev";
    color: var(--color-neutral-light);
}

.wp-block-query .wp-block-query-pagination:not(:has(.wp-block-query-pagination-next))::after{
    content: "Next";
    color: var(--color-neutral-light);
}

.wp-block-query .wp-block-query-pagination-numbers{
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.wp-block-query .wp-block-query-pagination-numbers .page-numbers{
    color: var(--color-neutral-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-query .wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query .wp-block-query-pagination-numbers a.page-numbers:hover{
    color: var(--color-primary-dark);
}

/* Journal: two across on tablet, single column on phones. */
@media (max-width: 1024px){
    .wp-block-query .wp-block-post-template{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .wp-block-query .wp-block-post-template{
        grid-template-columns: 1fr;
        gap: var(--spacing-6xl);
    }

    /* Letterboxed crop so a full width image does not dominate the screen. */
    .wp-block-query .wp-block-post-featured-image img{
        aspect-ratio: 2 / 1;
    }

    .wp-block-query .wp-block-post-featured-image{
        margin-bottom: var(--spacing-md);
    }

    .wp-block-query h2.wp-block-post-title{
        max-width: none;
        font-size: 16px;
    }

    .wp-block-query .wp-block-query-pagination{
        justify-content: space-between;
        gap: var(--spacing-md);
        margin-top: var(--spacing-3xl);
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
        font-size: 14px;
    }

    .wp-block-query .wp-block-query-pagination-previous::after,
    .wp-block-query .wp-block-query-pagination-next::after{
        font-size: 14px;
    }

    .wp-block-query .wp-block-query-pagination-numbers{
        gap: var(--spacing-sm);
    }
}

/*------------------------->
C7 Templates Mobile styles
--------------------------*/

@media (max-width: 768px){
    .c7-product-collection__products::after {
        display: none;
    }

    /* Four filters across a phone: they spread the row rather than sitting in a
       centred cluster, and the type steps down to make the room. The rules run
       edge to edge because the inset is padding, inside the border box. */
    #cav-collection-nav{
        justify-content: space-between;
        gap: 0;
        font-size: 18px;
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--color-primary-dark-50);
    }

    /* The rule marking the collection being shown. Set in em so it stays in
       proportion to the label it sits under. */
    #cav-collection-nav li.is-active{
        position: relative;
    }

    #cav-collection-nav li.is-active::after{
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.35em;
        width: 1.4em;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color-primary-dark);
    }

    /* Product intro. The whole block is set for a 1728 canvas: the 108px title
       runs off the screen here, and the 480px bottle leaves the illustration
       behind it wider than the phone. */

    /* The page holding the C7 template opens with a 240px editor spacer, which
       on a phone spends most of the first screen before the intro starts. Taken
       off the detail rather than the spacer, which the collection page shares. */
    .c7-product-detail{
        margin-top: -144px;
    }

    .product-intro h1{
        font-size: 40px;
    }

    .product-intro h2{
        font-size: 28px;
    }

    .product-intro .c7-product__image img{
        width: 200px;
    }

    #varietal-blend-text{
        font-size: 28px;
    }

    .c7-product-detail .product-intro .product-info .c7-product__content{
        width: 78%;
        font-size: 16px;
    }

    /* Wine specs. Held to roughly the width of the longer word, so the heading
       breaks over the two lines the design sets it on. */
    .c7-product_specs{
        max-width: 4em;
    }

    /* The 50px desktop gap spreads three values wider than a phone. */
    .c7-product-info-intro{
        gap: var(--spacing-lg);
    }

    .c7-product__info .c7-product__teaser{
        width: 78%;
        font-size: 16px;
    }

    .c7-product-detail .c7-product .c7-product__details .c7-product__add-to-cart .c7-product__add-to-cart__price span:nth-child(2){
        font-size: 30px;
    }

    /* Stacked, the block ends on the tasting note link, which otherwise sits
       hard against the section below it. */
    .c7-product-detail .c7-product .c7-product__details{
        padding-bottom: var(--spacing-2xl);
    }

    /* Collection cards. One card per row here, so the bottle is held to a
       height that keeps the whole card on a screen; at its natural size it runs
       to about twice the design. */
    .c7-product-collection__products .c7-product .c7-product__image img{
        max-height: 225px;
        width: auto;
    }

    .c7-product-collection__products .c7-product{
        padding: var(--spacing-2xl) 0;
    }

    /* The quantity field and the button share a row, which at the desktop sizes
       runs wider than a phone and wraps the button's label a letter at a time. */
    .c7-product__add-to-cart__form .c7-btn.c7-btn--primary{
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        white-space: nowrap;
    }
}

/*------------------------->
Mobile header and headings
--------------------------*/

@media (max-width: 768px){
    /* Header: burger, mark, cart only. */
    .menu-toggle__label{
        display: none;
    }

    /* The desktop inset is too wide once the burger stands on its own. */
    .header-inner{
        padding-left: var(--spacing-md);
    }

    .header-actions #c7-account,
    .header-actions #header-actions-navigation{
        display: none;
    }

    /* The logo is one SVG holding the horse (0-33.2 of the 72 unit viewBox)
       above the wordmark, so the box is clipped to show the mark alone. */
    .site-logo{
        height: 40px;
        overflow: hidden;
        /* Top aligned, otherwise the centred flex box clips the middle band. */
        align-items: flex-start;
    }

    .site-logo svg{
        width: 197px;
        height: auto;
        flex-shrink: 0;
    }

    /* Display headings step down; the desktop sizes overflow a phone. */
    h1{
        font-size: 34px;
    }

    h2{
        font-size: 22px;
    }

    h1.headline-left-xl,
    h1.headline-center-xl,
    .headline-center-xl-no-eyebrow{
        font-size: 56px;
    }

    h1.headline-center-l,
    .headline-center-l-no-eyebrow,
    h1.headline-center-l-composition,
    h1.headline-center-l-composition-2,
    h1.headline-center-l-composition-3,
    h1.headline-left-l{
        font-size: 48px;
    }

    .headline-center-m{
        font-size: 46px;
        width: 100%;
    }

    .headline-left-large{
        padding: unset;
    }

    .headline-center-s,
    .headline-center-s-no-eyebrow{
        font-size: 40px;
    }

    .headline-center-xs,
    .headline-center-xs-no-eyebrow{
        font-size: 26px;
    }

    h6.eyebrow,
    h6.eyebrow-left{
        font-size: 13px;
    }

    /* The tilde that sits above the no-eyebrow headings. */
    h1.headline-center-xl::before,
    .headline-center-xl-no-eyebrow::before,
    .headline-center-l-no-eyebrow::before,
    .headline-center-s-no-eyebrow::before,
    .headline-center-xs-no-eyebrow::before{
        font-size: 48px;
    }

    /* Open menu: a single full width column, no media panel. */
    .main-navigation{
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .main-navigation #nav-media{
        display: none;
    }

    .main-navigation .primary-menu{
        padding: calc(var(--spacing-unit) * 12) var(--spacing-lg) var(--spacing-6xl);
    }

    .primary-menu li a{
        /* Sized so "Weddings & Events" still holds one line at 390px. */
        font-size: 28px;
        line-height: 1.45;
        letter-spacing: 0.04em;
    }

    .primary-menu .sub-menu{
        gap: 0;
        padding-bottom: var(--spacing-sm);
    }

    .primary-menu .sub-menu li a{
        font-family: var(--accent-font-family);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.9;
        letter-spacing: 0.12em;
        color: var(--color-secondary-medium);
    }

    /* Login, Book a table and Cart sit at the foot of the open panel. */
    body.menu-open .header-actions{
        position: fixed;
        left: var(--spacing-lg);
        right: var(--spacing-lg);
        bottom: var(--spacing-3xl);
        z-index: 2;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--spacing-md);
    }

    body.menu-open .header-actions #c7-account,
    body.menu-open .header-actions #header-actions-navigation{
        display: block;
    }

    /* The class is on both the <nav> and its <ul>, so this resets both. */
    body.menu-open .header-actions .header-actions-nav{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        margin: 0;
        padding: 0;
    }

    body.menu-open #menu-header-actions-nav .buy-wine-btn{
        display: none;
    }

    body.menu-open .header-actions,
    body.menu-open .header-actions a,
    body.menu-open .header-actions button{
        color: var(--color-secondary-light);
    }

    body.menu-open .header-actions #c7-cart{
        height: auto;
        padding: 0;
        background: transparent;
    }

    /* Commerce7 ships an icon plus a count; the panel wants "Cart (0)". */
    body.menu-open #c7-cart .c7-link{
        font-family: var(--accent-font-family);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    body.menu-open #c7-cart .c7-user-nav__cart__title{
        display: none;
    }

    body.menu-open #c7-cart .c7-link::before{
        content: "Cart";
    }

    /* Commerce7 draws the count as a filled badge; the panel wants plain text. */
    body.menu-open #c7-cart .c7-user-nav__cart__count{
        min-width: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
    }

    body.menu-open #c7-cart .c7-user-nav__cart__count::before{
        content: " (";
    }

    body.menu-open #c7-cart .c7-user-nav__cart__count::after{
        content: ")";
    }

    #cav #c7-content .c7-content.c7-cart{
        max-width: var(--size-large);
        margin-left: auto;
        margin-right: auto;
    }

    /* Media text blocks stack, image over copy. */
    .wp-block-media-text{
        display: block;
    }

    .wp-block-media-text .wp-block-media-text__media img{
        width: 100%;
        object-fit: contain;
        aspect-ratio: 0.7;
    }

    .wp-block-media-text .wp-block-media-text__content{
        padding: var(--spacing-lg) 0 0;
    }

    /* Home intro: the heading is absolutely offset for desktop. */
    .content-text-image-left-right .image-text-block,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block{
        margin-top: var(--spacing-3xl);
    }

    .content-text-image-left-right .image-text-block h1.headline-left-xl,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block h1.headline-left-xl{
        position: static;
        min-width: 0;
        transform: none;
    }

    .content-text-image-left-right .image-text-block h1.headline-left-xl::before,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block h1.headline-left-xl::before{
        position: static;
    }

    h1.headline-left-xl::before{
        margin-bottom: var(--spacing-2xl);
    }

    /* Cuisine block reads: heading, image, then the restaurant copy. The
       content wrapper drops out with display:contents so its children can be
       ordered around the image. */
    .content-text-image-left-right .image-text-block{
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    .content-text-image-left-right .image-text-block .wp-block-media-text__content,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block .wp-block-media-text__content{
        display: contents;
        max-width: calc(var(--size-3xsmall) - 50px);
        margin-bottom: 0;
    }

    .content-text-image-left-right .image-text-block h1.headline-left-xl{
        order: 1;
    }

    .content-text-image-left-right .image-text-block .wp-block-media-text__media{
        order: 2;
        margin: var(--spacing-lg) 0 var(--spacing-xl);
    }

    .content-text-image-left-right .image-text-block .wp-block-media-text__content > *{
        order: 3;
    }

    /* display:contents drops the wrapper's padding, so the copy is re-inset
       while the image stays full bleed. */
    .content-text-image-left-right .image-text-block .wp-block-media-text__content > *:not(h1.headline-left-xl){
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        margin-top: 0;
        max-width: var(--size-3xsmall);
    }

    .content-text-image-left-right.has-primary-dark-background-color .image-text-block h1{
        margin-bottom: 0;
    }

    h1.headline-left-xl::before{
        font-size: 32px;
    }

    /* The video does not run on mobile. */
    .content-text-image-left-right .image-text-block-video .wp-block-video,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .wp-block-video{
        display: none;
    }

    /* Reads image first, then the estate copy. The block puts its media on the
       right, so on a single column the figure has to be ordered ahead of the
       content it normally sits beside. */
    .content-text-image-left-right .image-text-block-video,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video{
        display: flex;
        flex-direction: column-reverse;
    }

    .content-text-image-left-right .image-text-block-video.estate,
    .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile.image-text-block-video.winemaker{
        flex-direction: column;
    }

    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content.winemaker{
        margin-bottom: var(--spacing-4xl);
    }

    .content-text-image-left-right .image-text-block-video figure.wp-block-media-text__media,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video figure.wp-block-media-text__media{
        order: 1;
        /* The desktop 8px nudge runs the full width image off the right edge. */
        margin-left: 0;
        /* margin-top: var(--spacing-xl); */
    }

    .content-text-image-left-right .image-text-block-video .wp-block-media-text__content,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .wp-block-media-text__content{
        align-items: stretch;
        order: 2;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container{
        max-width: none;
        width: 100%;
        text-align: left;
        /* The image above now sets the gap. */
        margin-top: 0;
        margin-bottom: var(--spacing-lg);
    }

    /* The copy reads left here, so the link below it follows rather than
       staying on the right edge the desktop layout puts it on. */
    .content-text-image-left-right .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container .wp-block-buttons,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content .wp-block-group__inner-container .wp-block-buttons{
        justify-content: flex-start;
    }

    /* One column, so the winemaker block's desktop offset would stack on top of
       the inset the content wrapper already carries. */
    .content-text-image-left-right .image-text-block-video .image-text-block-video-content.winemaker,
    .content-text-image-left-right.has-primary-dark-background-color .image-text-block-video .image-text-block-video-content.winemaker{
        align-self: stretch;
        padding-left: 0;
    }

    /* The desktop 18px body copy runs to nine or ten words a line at this
       width; the design sets it a step down. */
    .content-text-image-left-right .image-text-block .wp-block-media-text__content p,
    .content-text-image-left-right .image-text-block-video .image-text-block-video-content p,
    .content-text-image-left-right .image-text-block-winemaker .wp-block-media-text__content p{
        font-size: 16px;
    }

    .content-text-image-left-right .image-text-block-video.estate .image-text-block-video-content p{
        margin-bottom: var(--spacing-5xl);
    }

    /* The winemaker row is its own class, so it misses the inset its siblings
       above get and its copy reads off both edges of the screen. The image
       stays full bleed; only the content column is brought in. */
    .content-text-image-left-right .image-text-block-winemaker .wp-block-media-text__content{
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    /* Weddings & Events heading is absolutely offset for desktop. */
    .wedding-events-container{
        margin-top: var(--spacing-3xl);
    }

    .wedding-events-header{
        position: static;
        min-width: 0;
        transform: none;
    }

    /* The marquee is sized for a desktop canvas; at 210px only two letters of
       "Experiences at Cavalli" fit across a phone. */
    .experiences-slider-heading,
    .experiences-slider-heading-2{
        font-size: 60px;
    }

    /* The slide is narrower than the screen and centred, so the neighbouring
       images show at both edges. initFlightsBitesSliders switches cellAlign to
       centre on phones for the same reason. */
    .experiences-slider .flights-bites-slider-container{
        width: 82%;
    }

    /* The gap between one slide's image and the next. Set on the figure rather
       than the slide, so the eyebrow, title and copy still run the full width
       of the cell; without it the images butt together and the peek at each
       edge reads as one continuous strip. */
    .experiences-slider .flights-bites-slider-container figure.wp-block-media-text__media{
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
    }

    /* Titles run to one, two or three lines, which lands each slide's image at
       a different height and leaves the peeking neighbours out of step with
       the selected one. Reserving three lines plus the eyebrow puts every
       image on the same line. */
    .experiences-slider .flights-bites-slider-header{
        min-height: 190px;
    }

    /* The slide's media-text is held to 90%, which insets the image a second
       time now that the cell itself is the narrow element. */
    .experiences-slider .flights-bites-slider-container .image-top-text-bottom-with-btns{
        width: 100%;
        max-width: none;
    }

    /* Landscape crop. Written against the media class so it outweighs the
       shared stacked-media rule that letterboxes every image at 0.7. */
    .experiences-slider .flights-bites-slider-container figure.wp-block-media-text__media img{
        aspect-ratio: 1.07;
        object-fit: cover;
    }

    /* Swipe only: at this width the arrows sit on top of the image. */
    .experiences-slider .flickity-prev-next-button{
        display: none;
    }

    /* The slider viewport is overflow:visible so neighbouring images peek in.
       Only the selected slide should show its heading and copy. */
    .experiences-slider .flights-bites-slider-container:not(.is-selected) .flights-bites-slider-header,
    .experiences-slider .flights-bites-slider-container:not(.is-selected) .wp-block-media-text__content{
        visibility: hidden;
    }

    /* The heading is lifted out of the slide and pushed half its own width to
       the right for desktop, which leaves it hanging off screen at phone
       width. On mobile it sits in flow, centred above the image, so the 20%
       of clearance the slide reserved for it is no longer needed. */
    .experiences-slider .flights-bites-slider-container{
        margin-top: 0;
    }

    .experiences-slider .flights-bites-slider-header{
        position: static;
        transform: none;
        min-width: 0;
        margin-bottom: var(--spacing-lg);
    }

    .experiences-slider .flights-bites-slider-container .headline-center-m{
        max-width: none;
        width: 100%;
    }

    /* Experience detail, on the single Experience page and in the "More info"
       modal, which render the same markup. The 30% image column is too narrow
       to read at this width, so the body drops to one column and theme.js puts
       the images back between the sections they were written against. */
    .experience-blog-body{
        grid-template-columns: 1fr;
    }

    /* Empty once the images are back in the flow. */
    .experience-blog-body .sidebar{
        display: none;
    }

    /* The copy blocks are centred inside a 520px column, so at phone width they
       run to both edges of the screen; the inset is set on the column instead. */
    .experience-blog-body .experiences-content{
        /* A grid item is otherwise never narrower than its own content, which
           a long title or a wide button would take past the screen. */
        min-width: 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .experiences-content .experience-img{
        margin-top: var(--spacing-4xl);
        margin-bottom: var(--spacing-4xl);
    }

    /* Sources run portrait or landscape and are cropped to a band in the column
       on desktop. In the flow they are cropped the same way, otherwise a
       portrait image alone stands taller than the screen. */
    .experiences-content .experience-img img{
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    /* The inner figure is display:table for the aligncenter class, which sizes
       it to the image rather than the column. */
    .experiences-content .experience-img figure{
        display: block;
        width: 100%;
        margin: 0;
    }

    /* The featured image opens the page, so it breaks out of the inset and sits
       against the top edge, with a taller crop than the images below it. */
    .experiences-content > .experience-img.wp-block-post-featured-image{
        margin: 0 calc(var(--spacing-md) * -1) var(--spacing-3xl);
    }

    .experiences-content > .experience-img.wp-block-post-featured-image img{
        aspect-ratio: 4 / 3;
    }

    .wine-card{
        width: 100%;
        /* Taller portrait card, so the bottle reads above the copy. */
        aspect-ratio: 0.7;
        padding-bottom: var(--spacing-3xl);
        border-radius: 1000px 1000px 0 0;
    }

    /* The desktop 110px line height splits the two word title so far apart
       that it overflows the top of the card. */
    .wine-card p.has-large-font-size{
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: var(--spacing-md);
    }

    .wine-card p{
        font-size: 16px;
    }

    /*------------------------->
    Estate cover
    --------------------------*/

    /* Editor spacers, so the heights are inline and need the override. The
       240px gap drops the headline most of the way down a phone screen, and
       the 100px one pushes the reel past the fold. */
    .estate-page-cover .wp-block-cover__inner-container > .wp-block-spacer:first-child{
        height: 72px !important;
    }

    .estate-page-cover .wp-block-cover__inner-container > .wp-block-spacer:nth-child(4){
        height: 48px !important;
    }

    /* One shared inset for the whole cover, so the headline, copy, reel and
       strapline share an edge. */
    .estate-page-cover h1.headline-center-l-composition,
    .estate-page-cover p.blurb,
    .estate-page-cover .cover-reel,
    .estate-page-cover .intro-cover-text{
        width: 85%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .estate-page-cover h1.headline-center-l-composition{
        font-size: 44px;
    }

    h1.headline-center-l-composition span:nth-child(2){
        text-align: left;
    }

    /* Steps down from 24px, which wrapped the copy onto a sixth line. */
    .estate-page-cover p.blurb{
        font-size: 20px;
    }

    /* The reel is a 9:16 portrait clip, which at this width runs off the
       bottom of the screen, so it is cropped to a near square frame. */
    .estate-page-cover .cover-reel video{
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 0.85 !important;
        object-fit: cover;
    }

    .estate-page-cover .cover-reel{
        border-width: 30px;
    }

    .estate-page-cover .intro-cover-text{
        margin-top: var(--spacing-xl);
    }

    /*------------------------->
    Wine cover
    --------------------------*/

    /* The two headline blocks stop reading off the left and right edges and
       stack centred instead, with the arch held between them and the second
       block dropped over its foot. */
    .wine-page-cover{
        --wine-cover-arch-width: min(292px, 81vw);
        --wine-cover-arch-height: min(299px, 83vw);
        padding-bottom: var(--spacing-4xl);
    }

    /* An editor spacer, so the height is inline and needs the override. At 240px
       the headline starts halfway down a phone screen. */
    .wine-page-cover .wp-block-cover__inner-container > .wp-block-spacer:first-child{
        height: 100px !important;
    }

    .wine-page-cover h1.headline-center-l-composition-3{
        /* Holds the arch, less the overlap the design gives the second block. */
        gap: calc(var(--wine-cover-arch-height) - var(--spacing-lg));
    }

    .wine-page-cover h1.headline-center-l-composition-3 span:nth-child(1),
    .wine-page-cover h1.headline-center-l-composition-3 span:nth-child(2){
        text-align: center;
        align-self: center;
        /* Narrow enough to hold each block to the two lines the design sets. */
        max-width: 6em;
    }

    /* Centred on the gap in the headline rather than on the section, which would
       ride too high: the first block and the spacer above it are shorter than
       the run of copy below. */
    .wine-page-cover video.wp-block-cover__video-background{
        top: calc(100px + (48px * 0.95 * 2));
        transform: translateX(-50%);
    }

    /*------------------------->
    Winemaker cover
    --------------------------*/

    /* The mount is sized off the screen rather than off the file, which at its
       full 330px runs almost edge to edge here. Box sizing is border box, so
       the width and ratio describe the mount and the portrait crops inside it;
       the source is a taller frame than the design cuts it to. */
    .winemaker-cover .wp-block-image img{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        border-width: var(--spacing-xl);
        aspect-ratio: 0.86;
        object-fit: cover;
    }

    /* Steps down from 48px, which ran the quote to eleven lines. */
    h1.quote{
        font-size: 26px;
    }

    h1.quote.winemaker{
        margin-bottom: var(--spacing-4xl);
    }

    /* The mark is set in a 456px line box that is mostly empty space above the
       glyph, which at this width leaves it stranded below the portrait. */
    .winemaker-cover h1.quote::before{
        margin-top: -75px;
    }

    /*------------------------->
    About the estate
    --------------------------*/

    /* The lead heading is centred by the global h1 margins, which sets it in
       further than the eyebrow and copy it sits between. */
    .headline-left-large{
        width: 100%;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .headline-left-large h1.headline-left-l{
        width: 100%;
        margin-inline: 0;
        /* A step down from the shared 48px, which sets the three lines wider
           than the copy beneath them. */
        font-size: 38px;
    }

    /* Estate cards: each one is a full height two column split on desktop,
       with the photo absolutely filling its half. In a single column that
       collapses to the copy sitting on top of the photo, so the card is
       unpicked into stacked blocks at natural height. */
    .estate-card{
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .estate-card .wp-block-media-text__content{
        order: 1;
        height: auto;
        overflow: visible;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .estate-card h1{
        width: 100%;
        margin-inline: 0;
        font-size: 30px;
        line-height: 1.05;
        margin-bottom: var(--spacing-lg);
    }

    /* The narrow measure stays, but reads from the left edge rather than
       hanging off the right of the column. */
    .estate-card .estate-card-details{
        align-self: flex-start;
        max-width: 240px;
        margin-bottom: var(--spacing-lg);
    }

    .estate-card .estate-card-details p{
        font-size: 14px;
        line-height: 1.4;
    }

    .estate-card figure.wp-block-media-text__media{
        order: 2;
        height: auto;
    }

    /* The sources are portrait; the design crops them to a landscape band.
       Written against the media class as well, so it outweighs the shared
       stacked-media rule above that letterboxes every image at 0.7. */
    .estate-card figure.wp-block-media-text__media img{
        position: static;
        height: auto;
        aspect-ratio: 1.4;
        object-fit: cover;
    }

    .estate-column{
        padding: unset;
    }

    .vcard .wp-block-columns{
        margin: unset;
        width: 100%;
        gap: 0;
    }

    /*------------------------->
    Weddings & Events
    --------------------------*/

    /* Editor spacers, so the heights are inline and need the override. The two
       together spend the first 300px of the page before the heading starts. */
    .page-id-683 #ai_main > .wp-block-spacer:first-child{
        height: 76px !important;
    }

    .page-id-683 .content-text-image-left-right.weddings .image-left-right-spacer{
        height: 16px !important;
    }

    /* The opening block is a percentage composition: the two photographs are
       laid down first and the heading is lifted back over them. In one column
       that leaves the heading sitting on top of a photograph and running off
       the right edge, so the block is re-laid as a grid that reads heading,
       strapline, then the pair of photographs side by side. */
    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6px;
        align-items: start;
        /* Runs the full width so the photographs reach both edges. The copy
           carries its own 90% measure, which the column used to provide. */
        width: 100%;
        max-width: none;
    }

    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > *{
        grid-column: 1 / -1;
    }

    /* The marquee is pulled out of that 90% column at every other width; here
       the column it sits in already runs edge to edge. */
    .page-id-683 .content-text-image-left-right.weddings .experiences-slider-container{
        margin-left: 0;
        margin-right: 0;
    }

    /*------------------------->
    Weddings & Events: your day, our canvas
    --------------------------*/

    /* An editor spacer, so the height is inline and needs the override. At
       100px the eyebrow starts a tenth of the way into the cover. */
    .page-id-683 .winemaker-cover .wp-block-cover__inner-container > .wp-block-spacer:first-child{
        height: 48px !important;
    }

    /* The closing spacer holds the cover open below the copy; the design runs
       the next section's photograph straight on. */
    .page-id-683 .winemaker-cover .wp-block-cover__inner-container > .wp-block-spacer:last-child{
        height: 24px !important;
    }

    /* The mount is sized off the screen rather than the file; the design draws
       it a little narrower than the shared 95%. */
    .page-id-683 .winemaker-cover .wp-block-image img{
        width: 91.5%;
    }

    /* Steps down from 24px, which set the standfirst to seven lines against
       the design's six, on the tighter leading the page uses throughout. */
    .page-id-683 .winemaker-cover .winemaker-intro-paragraph{
        font-size: 18px;
        line-height: 1.33;
        max-width: 300px;
    }

    /*------------------------->
    Weddings & Events: the venue cards
    --------------------------*/

    /* Both photographs run full bleed across the top of their block, cropped
       to a landscape band rather than the shared 0.7 letterbox. */
    .page-id-683 .image-text-block figure.wp-block-media-text__media img{
        aspect-ratio: 1.02;
        object-fit: cover;
    }

    .page-id-683 .image-text-block .eyebrow-card{
        font-size: 12px;
    }

    /* The 460px desktop measure is wider than the screen, so both titles run
       a line longer than the design sets them. */
    .page-id-683 .image-text-block h1.headline-center-s.eyebrow-card-head{
        max-width: 264px;
    }

    /* The copy and the details below it are held to a centred column; the
       520px desktop measure is wider than the screen. */
    .page-id-683 .image-text-block .restaurant-paragraph{
        font-size: 16px;
        line-height: 1.25;
        max-width: 264px;
    }

    .page-id-683 .image-text-block .blurb-center-2xs-info{
        max-width: 272px;
        margin-left: auto;
        margin-right: auto;
    }

    /* The sunken garden carries its media on the right, which stacks the
       photograph under the copy; the design opens the block with it. */
    .page-id-683 .image-text-block.light{
        display: flex;
        flex-direction: column;
    }

    .page-id-683 .image-text-block.light figure.wp-block-media-text__media{
        order: 1;
    }

    .page-id-683 .image-text-block.light .wp-block-media-text__content{
        order: 2;
        /* The block's centred alignment shrink wraps the column once it is a
           flex item, which would hand every child the widest one's measure. */
        align-self: stretch;
    }

    /*------------------------->
    Weddings & Events: conferences and corporate
    --------------------------*/

    /* The section's 38px padding, and the 24px the heading block adds inside
       it, set the copy in twice as far as the design's single 24px inset. */
    .page-id-683 #ai_main > .wp-block-columns.has-white-background-color{
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .page-id-683 .headline-left-large{
        padding-left: 0;
        padding-right: 0;
    }

    .page-id-683 .headline-left-large h6.eyebrow-left{
        font-size: 14px;
    }

    /* A step up from the shared 38px; with the inset corrected the design
       still breaks the title over the same four lines. */
    .page-id-683 .headline-left-large h1.headline-left-l{
        font-size: 48px;
    }

    .page-id-683 .headline-left-large p{
        line-height: 1.33;
    }

    /* The 64px pill is the desktop button; at the narrower inset its label
       wrapped over two lines. */
    .page-id-683 .wp-block-button.is-style-fill a{
        height: 48px;
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /* The design divides the section label from the cards below it. */
    .page-id-683 .venue-intro-text{
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--color-primary-dark-20);
    }

    /* The section already sets the copy in, so the card's own inset would
       stack on top of it. */
    .page-id-683 .estate-card .wp-block-media-text__content{
        padding-left: 0;
        padding-right: 0;
    }

    .page-id-683 .estate-card .estate-card-details{
        max-width: 264px;
    }

    /* The photographs run to the edges of the screen while the copy above
       them stays inset. */
    .page-id-683 .estate-card figure.wp-block-media-text__media{
        margin-left: calc(var(--spacing-lg) * -1);
        margin-right: calc(var(--spacing-lg) * -1);
    }

    /* Steps down from the 24px the desktop band carries. */
    .page-id-683 h1.experiences-slider-heading-wedding,
    .page-id-683 h1.experiences-slider-heading-wedding-2{
        font-size: 20px;
    }

    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > .wp-block-spacer{
        grid-row: 1;
    }

    .page-id-683 .content-text-image-left-right.weddings h1.headline-center-l{
        grid-row: 2;
        /* Cancels the lift that carried the heading over the photographs. */
        margin-top: 0;
        /* The desktop clamp bottoms out at 60px, which runs "EVERYTHING" off
           both edges; the design sets it at the shared mobile size. */
        font-size: 48px;
    }

    .page-id-683 .content-text-image-left-right.weddings p.blurb{
        grid-row: 3;
        width: 90%;
        max-width: none;
        justify-self: center;
        font-size: 13px;
        margin-top: var(--spacing-lg);
    }

    /* The pair share a row, the second dropped below the first the way the
       desktop composition staggers them. */
    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > figure.wp-block-image{
        grid-row: 4;
        margin-top: var(--spacing-lg);
    }

    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > figure.wp-block-image:first-of-type{
        grid-column: 1;
    }

    /* The stagger the desktop composition gives the pair. */
    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > figure.wp-block-image:last-of-type{
        grid-column: 2;
        margin-top: calc(var(--spacing-lg) + 90px);
    }

    .page-id-683 .content-text-image-left-right.weddings > .wp-block-group__inner-container > figure.wp-block-image img{
        width: 100%;
        aspect-ratio: 0.7;
        object-fit: cover;
    }

    .page-id-683 .content-text-image-left-right.weddings h6.eyebrow-2xs{
        grid-row: 5;
        font-size: 14px;
    }

    .page-id-683 .content-text-image-left-right.weddings p.blurb-center-2xs{
        grid-row: 6;
        width: 100%;
        /* A shade under the 90% column, which is the difference between the
           design's ten lines and nine. */
        max-width: 316px;
        font-size: 18px;
        line-height: 1.33;
    }

    /* Held to the column the design divides, which also breaks the contact
       line after the number the way the design sets it. */
    .page-id-683 .content-text-image-left-right.weddings .blurb-center-2xs-info{
        grid-row: 7;
        max-width: 312px;
        justify-self: center;
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-5xl);
    }

    .page-id-683 .content-text-image-left-right.weddings .experiences-slider-container{
        grid-row: 8;
    }

    /*------------------------->
    Restaurant
    --------------------------*/

    /* An editor spacer, so the height is inline and needs the override. At
       200px the headline starts a third of the way down the screen. */
    .page-id-290 #ai_main > .wp-block-spacer:first-child{
        height: 76px !important;
    }

    /* A step up from the shared 48px. The design breaks the opening line after
       "WHERE", which the smaller size runs onto one line with "EVERY". */
    .page-id-290 h1.headline-center-l{
        font-size: 52px;
        /* Caps the measure at the 390px design width, so the four line break
           holds on the wider phones rather than reflowing to three. */
        max-width: 351px;
    }

    /* The 64px pill is the desktop button; the design draws a shorter one with
       the label closer to its ends. */
    .page-id-290 .wp-block-button.is-style-fill a{
        height: 48px;
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    .page-id-290 h6.eyebrow-2xs{
        font-size: 15px;
        margin-bottom: var(--spacing-3xl);
    }

    /* Body copy runs a step down from the desktop sizes and, throughout the
       page, on a tighter 1.25 leading than the 1.4 the desktop sets. */
    .page-id-290 p.blurb-center-2xs,
    .page-id-290 .content-text-image-left-right.restaurant .image-text-block .wp-block-media-text__content p,
    .page-id-290 .winemaker-cover .winemaker-intro-paragraph,
    .page-id-290 .winemaker-cover p,
    .page-id-290 .image-text-block .restaurant-paragraph,
    .page-id-290 .image-text-block .restaurant-paragraph-bottom{
        line-height: 1.25;
    }

    /* Steps down from 24px, which set the intro to eight lines against the
       design's ten. */
    .page-id-290 p.blurb-center-2xs{
        font-size: 20px;
        /* Two words narrower than the 90% the block sets, which is the
           difference between the design's ten lines and nine. */
        max-width: 342px;
    }

    /* The 520px dividers run edge to edge at this width; the design insets
       them to the column they divide. */
    .page-id-290 .blurb-center-2xs-info::before,
    .page-id-290 .blurb-center-2xs-info::after,
    .page-id-290 .blurb-center-2xs-info-white::before,
    .page-id-290 .blurb-center-2xs-info-white::after{
        width: 90%;
    }

    /* Opening hours. The desktop block sets an even rhythm; the design pairs
       each heading with its value and opens the gap between the pairs. */
    .page-id-290 .blurb-center-2xs-info-white{
        margin-top: var(--spacing-2xl);
        margin-bottom: var(--spacing-4xl);
    }

    .page-id-290 .blurb-center-2xs-info-white::before{
        margin-bottom: var(--spacing-lg);
    }

    /* The white variant's closing rule is the one divider that carries its
       margin below rather than above it. */
    .page-id-290 .blurb-center-2xs-info-white::after{
        margin-top: var(--spacing-lg);
        margin-bottom: 0;
    }

    .page-id-290 .blurb-center-2xs-info-white h5.wp-block-heading{
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    /*------------------------->
    Restaurant: the cuisine
    --------------------------*/

    /* The desktop block is a percentage composition: the heading is lifted
       alongside the image above it and the copy overlaps the heading's tail.
       In one column that leaves the heading stranded beside a thumbnail, so
       the offsets are unpicked and the block reads image, heading, copy.

       The first child is an editor spacer, so its height is inline and needs
       the override. */
    .page-id-290 .content-text-image-left-right.restaurant .image-left-right-spacer{
        height: 12px !important;
    }

    .page-id-290 .content-text-image-left-right.restaurant > .wp-block-group__inner-container > figure.wp-block-image img{
        width: 63.5%;
        margin-left: 0;
    }

    .page-id-290 .content-text-image-left-right.restaurant .headline-left-large{
        margin-left: 0;
        margin-top: var(--spacing-lg);
        padding-left: 0;
        padding-right: 0;
    }

    .page-id-290 .content-text-image-left-right.restaurant .headline-left-large h6.eyebrow-left{
        margin-bottom: var(--spacing-3xl);
    }

    .page-id-290 .content-text-image-left-right.restaurant .headline-left-large h1.headline-left-l{
        /* The desktop measure sets one word to a line; here the design closes
           on "BACK FOR". */
        max-width: none;
        font-size: 52px;
    }

    .page-id-290 .content-text-image-left-right.restaurant .image-text-block{
        margin-top: var(--spacing-md);
        /* The desktop block bottom aligns its two columns, which stacked reads
           as the copy hanging off the right edge. */
        align-items: flex-start;
    }

    /* Copy, then the dish. The block carries its media on the right, so
       stacked it has to be ordered after the column it sits beside. */
    .page-id-290 .content-text-image-left-right.restaurant .image-text-block .wp-block-media-text__content > *{
        order: 2;
        /* The inner container is already held to 90%, so the shared inset
           would set the copy in a second time. */
        padding-left: 0;
        padding-right: 0;
    }

    .page-id-290 .content-text-image-left-right.restaurant .image-text-block figure.wp-block-media-text__media{
        order: 3;
    }

    .page-id-290 .content-text-image-left-right.restaurant .image-text-block .wp-block-media-text__content p{
        font-size: 20px;
        /* Held in from the container, which is the difference between the
           design's eight lines and seven. */
        max-width: 335px;
    }

    /* Written against the media class as well, so it outweighs the shared
       stacked-media rule that letterboxes every image at 0.7. */
    .page-id-290 .content-text-image-left-right.restaurant .image-text-block figure.wp-block-media-text__media img{
        aspect-ratio: 0.87;
        object-fit: cover;
    }

    /* The three menus stack here. Their dividers are transparent (.no-before)
       but still hold the margins that spaced them across a desktop row. */
    .page-id-290 .content-text-image-left-right.restaurant .wp-block-columns{
        margin-top: 0;
        padding-bottom: var(--spacing-lg);
        gap: 0;
    }

    .page-id-290 .content-text-image-left-right.restaurant .blurb-center-2xs-info{
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .page-id-290 .content-text-image-left-right.restaurant .blurb-center-2xs-info::before,
    .page-id-290 .content-text-image-left-right.restaurant .blurb-center-2xs-info::after{
        margin-top: 0;
        margin-bottom: 0;
    }

    .page-id-290 .content-text-image-left-right.restaurant .blurb-center-2xs-info h5.wp-block-heading{
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
    }

    /*------------------------->
    Restaurant: the menu cover
    --------------------------*/

    /* An editor spacer, so the height is inline and needs the override. At
       100px the eyebrow starts a fifth of the way into the cover. */
    .page-id-290 .winemaker-cover .wp-block-cover__inner-container > .wp-block-spacer:first-child{
        height: 40px !important;
    }

    /* The three staggered words are set tighter here than the shared 0.95,
       which spaces them further apart than the design stacks them. */
    .page-id-290 h1.headline-center-l-composition-2{
        font-size: 52px;
        line-height: 0.85;
    }

    .page-id-290 .winemaker-cover .winemaker-intro-paragraph{
        font-size: 20px;
        /* The 860px measure is wider than the screen, so the standfirst would
           run the full width of the cover. */
        max-width: 330px;
    }

    .page-id-290 .winemaker-cover p{
        font-size: 18px;
    }

    /*------------------------->
    Restaurant: private dining and picnics
    --------------------------*/

    .page-id-290 .image-text-block .eyebrow-card{
        font-size: 13px;
    }

    .page-id-290 .image-text-block h1.headline-center-s.eyebrow-card-head{
        font-size: 45px;
    }

    /* Held in em so the wrap tracks the font size. Private dining breaks after
       "A NIGHT"; picnics after "FLAVOURS", which needs the wider measure. */
    .page-id-290 .image-text-block.has-primary-dark-background-color h1.headline-center-s.eyebrow-card-head{
        max-width: 5em;
    }

    /* "OF THE LAND" and "FLAVOURS OF" set within half a percent of each other,
       so the measure has to fall between them to land the design's break. */
    .page-id-290 .image-text-block.light h1.headline-center-s.eyebrow-card-head{
        max-width: 6.51em;
    }

    /* The 520px desktop measure is wider than the screen, so the copy would
       run the full width; the design keeps it in a centred column. */
    .page-id-290 .image-text-block .restaurant-paragraph,
    .page-id-290 .image-text-block .restaurant-paragraph-bottom,
    .page-id-290 .image-text-block .blurb-center-2xs-info{
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .page-id-290 .image-text-block .restaurant-paragraph{
        font-size: 18px;
    }

    /* Same pairing as the opening hours: heading tight to its value, with the
       gap opened between the pairs. */
    .page-id-290 .image-text-block .blurb-center-2xs-info{
        margin-top: var(--spacing-3xl);
    }

    .page-id-290 .image-text-block .blurb-center-2xs-info h5.wp-block-heading{
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    /* Stacked, each block ends on its last line of copy hard against the
       section below. */
    .page-id-290 .image-text-block .wp-block-media-text__content{
        padding-bottom: var(--spacing-3xl);
    }

    .page-id-290 .image-text-block .restaurant-paragraph-bottom{
        font-size: 13px;
    }

    /* Both photographs run full bleed across the top of their block, cropped
       squarer than the shared 0.7 letterbox. */
    .page-id-290 .image-text-block.has-primary-dark-background-color figure.wp-block-media-text__media img{
        aspect-ratio: 1.12;
        object-fit: cover;
    }

    .page-id-290 .image-text-block.light figure.wp-block-media-text__media img{
        aspect-ratio: 0.98;
        object-fit: cover;
    }

    /* Picnics carries its media on the right, which stacks the photograph
       under the copy; the design opens the block with it. */
    .page-id-290 .image-text-block.light{
        display: flex;
        flex-direction: column;
    }

    .page-id-290 .image-text-block.light figure.wp-block-media-text__media{
        order: 1;
    }

    .page-id-290 .image-text-block.light .wp-block-media-text__content{
        order: 2;
        /* The block's centred alignment shrink wraps the column once it is a
           flex item, which would hand every child the widest one's measure. */
        align-self: stretch;
    }

    #v-card-mobile-text{
        max-width: 312px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 0 !important;
        margin-bottom: var(--spacing-5xl);
    }

    .wine-cards-section{
        padding-left: 0;
        padding-right: 0;
    }

    .eyebrow-s.wine{
        margin-top: var(--spacing-5xl);
    }

    .spacer-shop{
        height: 140px !important;
    }
    .spacer-winemaker,
    .experiences-spacer{
        height: 100px !important;
    }
    .p.blurb-center-m.winemaker{
        font-size: 18px;
        margin-bottom: var(--spacing-3xl);
    }
    .restaurant-paragraph-bottom{
        margin-bottom: var(--spacing-3xl);
    }
}