/* The Bella Principessa bar, menu and footer on every page that keeps the parent theme's own templates (blog posts,
   FAQs, archives, search ...). Generated from design-system.css: only the rules for the bar, the menu overlay, the
   footer and the WhatsApp button, with the bar's and footer's classes renamed (bm-*) so the parent theme's rules for
   .header-nav, .logo-block, footer and the like never reach them. Nothing here styles the page content. */
/* a clean start inside the bar, menu and footer: the parent's global rules (Bootstrap's reboot, p, a, h3) step back to
   the browser's defaults, as on the designed pages */
:where(#nav, #menu, .bm-foot, .wa-float) :is(ol, ul, li, p, h3, a, button, nav, span, strong, em) { all: revert; }
:where(#nav, #menu, .bm-foot, .wa-float), :where(#nav, #menu, .bm-foot, .wa-float) * { box-sizing: border-box; }
:where(#menu, .bm-foot) { font-family: "Bella SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; text-align: left; }
:where(#nav, #menu, .bm-foot, .wa-float) img, :where(#nav, #menu, .bm-foot, .wa-float) video { display: block; max-width: 100%; height: auto; }
:where(#nav, #menu, .bm-foot, .wa-float) a, :where(#nav, #menu, .bm-foot, .wa-float) p a { color: inherit; }
:where(#nav, #menu, .bm-foot, .wa-float) h3 { font-family: "Bella Favorit", "SF Pro Display", -apple-system, sans-serif; font-weight: 500; letter-spacing: -.02em; margin: 0; }
:where(#nav, #menu, .bm-foot, .wa-float) p { margin: 0 0 10px; color: var(--body); }
.bm-foot .wrap { width: min(100% - 32px, 1120px); margin: 0 auto; }
:where(#nav, #menu, .bm-foot) :focus-visible { outline: 2px solid #c9a24a; outline-offset: 3px; }
/* the bar is fixed, as on the designed pages, so the page starts below it */
body.bella-mast { padding-top: var(--nav); }
@media (min-width: 900px) { :where(#menu, .bm-foot) { font-size: 20px; } }
@font-face { font-family: "Bella Favorit"; src: url("../../prosecco-theme/fonts/favoritLight.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Bella Favorit"; src: url("../../prosecco-theme/fonts/favoritMed.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bella SF Pro Display"; src: local("SF Pro Display"), url("../../prosecco-theme/fonts/SFProDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bella SF Pro Display"; src: local("SF Pro Display Medium"), url("../../prosecco-theme/fonts/SFProDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root { --ink:#1e1c1d; --body:#5e5b57; --green:#1f4d36; --brand:#47b867; --rose:#dc59a0; --paper:#f5f1e8; --white:#fff;
        --mint:#daf1e1; --foot:#55524d; --rule:#d9e5dd; --stripe:#ffcde4; --sky:#bfe3ec; --nav:94px; }
.bm-nav {position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--nav); background: #fff;
              transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; box-shadow: 0 1px 0 rgba(0,0,0,.06);}
.bm-nav--over {background: transparent; box-shadow: none;}
.bm-nav--over::before {content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
                            background: linear-gradient(rgba(20,16,10,.45), rgba(20,16,10,0));}
.bm-nav--over img {filter: brightness(0) invert(1);}
.bm-nav--hidden {transform: translateY(-100%);}
.bm-nav .bm-container {width: min(100% - 32px, 1320px); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;}
.bm-btn-block {justify-self: end;}
.bm-logo-icon a {display: flex; align-items: center; min-height: 44px;}
.bm-logo-icon img {width: 34px; height: auto;}
.bm-logo-block a {display: flex; align-items: center; min-height: 44px;}
.bm-logo-block img {width: 190px; height: auto;}
.bm-btn-block ol {list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;}
.bm-btn-block a, .bm-btn-block button {display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer;}
.bm-btn-block img {width: 24px; height: 24px;}
.wa-float {position: fixed; right: 18px; bottom: 18px; z-index: 9; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
            background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18);}
.wa-float img {width: 34px; height: 34px;}
:root { --gold: #86661c; }
:root { --rose-ink: #b83d82; }
.bm-foot .notes {margin: 12px auto 14px; padding-left: 1.2em; text-align: left; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 70em;}
.bm-foot .notes li {margin-bottom: 4px;}
.bm-foot .notes li:target {color: #fff; outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; border-radius: 2px;}
.bm-foot {background: var(--green); color: rgba(255,255,255,.82); font-size: 15px; padding: 8px 0 40px;}
.bm-foot h3 {font-family: "Bella Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 17px; color: #fff; margin: 0 0 8px;}
.bm-foot a {color: rgba(255,255,255,.86); text-decoration: none;}
.bm-foot a:hover {color: #fff; text-decoration: underline; text-underline-offset: 3px;}
.foot-mark {display: flex; flex-direction: column; align-items: center; gap: 14px; width: max-content; margin: 0 auto 34px; padding-top: 34px;}
.foot-mark img {width: 260px; height: auto; display: block;}
.bm-foot .wrap > .foot-mark {border: 0;}
.bm-foot .foot-top {border-top: 1px solid rgba(255,255,255,.18); padding-top: 28px; text-align: center;}
.foot-cols a {justify-content: center;}
.foot-say {margin: 0; color: #fff; font-family: "Bella Favorit", "SF Pro Display", sans-serif; font-weight: 300; text-transform: uppercase; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12; letter-spacing: .01em;}
.foot-say b {font-weight: 500;}
.foot-top {display: grid; gap: 26px;}
.foot-cols {display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px;}
.foot-cols a {display: flex; align-items: center; gap: 8px; min-height: 36px;}
.foot-legal {text-align: center; margin-top: 28px; font-size: 13px; line-height: 1.55;}
.foot-legal p {color: rgba(255,255,255,.72); margin: 0 auto 10px; max-width: 62em;}
.foot-legal p.strong {color: #fff; margin-bottom: 4px;}
@media (min-width: 900px) {
  .foot-cols {grid-template-columns: repeat(4, minmax(150px, 1fr));}
  .foot-mark img {width: 340px;}
  .foot-cols {max-width: 900px; margin: 0 auto;}
}
@media (max-width: 991px) {
  :root { --nav: 84px; }
}
@media (min-width: 992px) {
  .bm-logo-icon img {width: 44px;}
  .bm-logo-block img {width: 316px;}
  .bm-btn-block {justify-self: end;}
}
:root { --sp: 22px; }
@media (min-width: 900px) {
  :root { --sp: 32px; }
}
.bm-foot, .foot-cols a {font-size: 16px;}
.foot-legal, .foot-legal p, .bm-foot .notes {font-size: 14px; line-height: 1.55;}
.foot-mark {padding-top: 2px;}
@media (min-width: 900px) {
  .foot-cols a {font-size: 16px;}
  .foot-legal, .foot-legal p, .bm-foot .notes {font-size: 14px;}
}
.menu[hidden] {display: none;}
.menu {position: fixed; inset: 0; z-index: 30;}
.menu-scrim {position: absolute; inset: 0; background: rgba(15,22,18,.55); opacity: 0; transition: opacity .35s ease;}
.menu-panel {position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); background: var(--green); color: #fff;
              overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 32px; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1);}
.menu.open .menu-scrim {opacity: 1;}
.menu.open .menu-panel {transform: none;}
.menu-top {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px;}
.menu-logo img {width: 190px; height: auto; display: block;}
.menu-close {width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none;}
.menu-ctas {display: flex; gap: 10px; margin-bottom: 26px;}
.menu-ctas .btn {flex: 1;}
.menu .btn.solid {background: #fff; color: var(--green);}
.menu .btn.line {border-color: rgba(255,255,255,.7); color: #fff;}
.menu-groups {display: grid; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);}
.menu-h {margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #e3c27a;}
.menu-groups a {display: block; padding: 7px 0; font-family: "Bella Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: #fff; text-decoration: none;}
.menu-groups a:hover {color: #e3c27a;}
.menu-social {display: flex; gap: 8px; margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);}
.menu-social a {width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.3);}
.menu-social svg {width: 20px; height: 20px;}
.menu-legal {margin: 0; font-size: 14px; color: rgba(255,255,255,.75);}
body.menu-on {overflow: hidden;}
@media (prefers-reduced-motion: reduce) {
  .menu-scrim, .menu-panel {transition: none;}
}
.menu-wines {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;}
.wine-tile {display: block; text-decoration: none; color: #fff; padding: 0 !important;}
.wine-tile img {width: 100%; height: auto; aspect-ratio: 547/560; object-fit: cover; border-radius: 12px; display: block;}
.menu-groups .wine-tile span {display: block; margin-top: 8px; font-family: "Bella Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.25;}
.wine-tile em {display: block; font-style: normal; font-size: 14px; color: #e3c27a; margin-top: 2px;}
.menu-groups a[aria-current]::after {content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e3c27a; margin-left: 10px; vertical-align: middle;}
.menu-season {display: block; margin-top: 26px; margin-bottom: 4px; padding: 18px 18px 16px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none;}
.menu-season strong {display: block; margin: 6px 0 6px; font-family: "Bella Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; line-height: 1.2;}
.menu-season em {font-style: normal; color: #e3c27a; font-size: 15px;}
.menu-lang {display: flex; gap: 6px; margin: 0 0 12px;}
.menu-lang a {min-width: 44px; height: 36px; display: grid; place-items: center; border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.8); text-decoration: none; border: 1px solid rgba(255,255,255,.25);}
.menu-lang a[aria-current] {background: #fff; color: var(--green); border-color: #fff;}
@media (prefers-reduced-motion: no-preference) {
  .menu .menu-ctas, .menu .menu-groups > div, .menu .menu-social, .menu .menu-season {opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;}
  .menu.open .menu-ctas, .menu.open .menu-groups > div, .menu.open .menu-social, .menu.open .menu-season {opacity: 1; transform: none;}
  .menu.open .menu-ctas {transition-delay: .08s;}
  .menu.open .menu-groups > div:nth-child(1) {transition-delay: .14s;}
  .menu.open .menu-groups > div:nth-child(2) {transition-delay: .2s;}
  .menu.open .menu-groups > div:nth-child(3) {transition-delay: .26s;}
  .menu.open .menu-season {transition-delay: .32s;}
  .menu.open .menu-social {transition-delay: .36s;}
}
.menu-panel {padding: 14px 20px 18px; display: flex; flex-direction: column;}
.menu-top {margin-bottom: 14px;}
.menu-logo img {width: 170px;}
.menu-close {width: 44px; height: 44px;}
.menu-wines {margin: 6px 0 12px; gap: 10px;}
.wine-tile img {aspect-ratio: 547 / 400; object-position: 50% 45%;}
.menu-groups .wine-tile span, .wine-tile span {margin-top: 6px; font-size: 15px;}
.wine-tile em {font-size: 13px;}
.menu-season {margin: 0 0 14px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px;}
.menu-season .menu-h {grid-column: 1; margin: 0;}
.menu-season strong {grid-column: 1; margin: 2px 0 0; font-size: 18px;}
.menu-season em {grid-column: 2; grid-row: 1 / span 2; font-size: 20px;}
.menu-groups {grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 12px;}
.menu-groups a {font-size: 17px; padding: 5px 0; min-height: 34px;}
.menu-foot {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18);}
.menu-foot .menu-social {margin: 0; padding: 0; border: 0; gap: 6px;}
.menu-foot .menu-social a {width: 38px; height: 38px;}
.menu-foot .menu-social svg {width: 18px; height: 18px;}
.menu-lang {margin: 0; gap: 4px;}
.menu-lang a {min-width: 38px; height: 32px; font-size: 13px;}
.menu-legal {margin-top: 10px; font-size: 13px;}
@media (max-height: 700px) {
  .wine-tile img {aspect-ratio: 547 / 300;}
  .menu-top {margin-bottom: 8px;}
  .menu-season {margin-bottom: 10px;}
  .menu-groups a {padding: 4px 0; min-height: 32px;}
  .menu-legal {margin-top: 6px;}
}
@media (min-width: 900px) {
  .menu-panel {width: 480px; padding: 20px 28px 22px;}
  .menu-groups a {font-size: 19px;}
}
@media (prefers-reduced-motion: no-preference) {
  .menu .menu-wines, .menu .menu-foot {opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;}
  .menu.open .menu-wines, .menu.open .menu-foot {opacity: 1; transform: none;}
  .menu.open .menu-wines {transition-delay: .08s;}
  .menu.open .menu-season {transition-delay: .16s;}
  .menu.open .menu-foot {transition-delay: .3s;}
}
.menu-h {font-size: 14px;}
.menu-groups a {font-size: 17px;}
.wine-tile span {font-size: 16px;}
.wine-tile em {font-size: 14px;}
.bm-foot, .foot-cols a {font-size: 17px;}
.foot-legal, .foot-legal p, .bm-foot .notes, .menu-legal {font-size: 15px; line-height: 1.55;}
@media (min-width: 900px) {
  .menu-groups a {font-size: 19px;}
  .foot-legal, .foot-legal p, .bm-foot .notes {font-size: 15px;}
}
@media (max-height: 700px) {
  .menu-groups a {padding: 3px 0; min-height: 30px;}
  .menu-wines {margin-bottom: 8px;}
}
body.admin-bar .bm-nav {top: 32px;}
@media (max-width: 782px) {
  body.admin-bar .bm-nav {top: 46px;}
}