/* Interaction and accessibility layer, loaded after the legacy responsive CSS. */
:root {
  --penelope-ink: #3f3f3f;
  --penelope-gold-ink: #806117;
  --penelope-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --penelope-scroll-offset: 128px;
}

#wrapper :is(a, button, input, textarea, select, [tabindex]):focus-visible,
#app-vue :is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid #1f4047 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff !important;
}

#wrapper a,
#wrapper :is(input, textarea),
#app-vue :is(input, button, a) {
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#wrapper,
#header-part,
#header-part::before,
#header-part::after {
  transition: none;
}

#header-part .headermenu li a,
#header-part .nav-bar ul.menu li a,
#header-part a.headerlink,
#app-vue .age-gate .btn-dob {
  color: var(--penelope-ink);
}

#header-part .headermenu li.site-nav__childlist li > a,
#header-part .headermenu li a:hover,
#header-part .headermenu li:hover > a,
#header-part .nav-bar ul.menu li a:hover {
  color: var(--penelope-gold-ink);
}

#header-part .headermenu li li a:hover { padding-left: 0; }

#header-part a.headerlink:hover,
#app-vue .age-gate .btn-dob:hover,
#wrapper .fourbourbon-bar .buttons li a.button:hover {
  color: #222;
  background-color: #d7b046;
}

#app-vue .age-gate .btn-dob { min-height: 44px; }

#header-part .mobilemenu {
  position: absolute;
  right: 8px;
  top: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #222;
  cursor: pointer;
  z-index: 101;
}

#header-part .mobilemenu span,
#header-part .mobilemenu span::before,
#header-part .mobilemenu span::after {
  display: block;
  width: 27px;
  height: 2px;
  background: currentColor;
  transition: transform 160ms var(--penelope-ease-out), opacity 120ms ease;
}

#header-part .mobilemenu span { position: relative; }
#header-part .mobilemenu span::before,
#header-part .mobilemenu span::after { content: ''; position: absolute; inset: 0; }
#header-part .mobilemenu span::before { transform: translateY(-7px); }
#header-part .mobilemenu span::after { transform: translateY(7px); }
#header-part .mobilemenu[aria-expanded="true"] span { background: transparent; }
#header-part .mobilemenu[aria-expanded="true"] span::before { transform: rotate(45deg); }
#header-part .mobilemenu[aria-expanded="true"] span::after { transform: rotate(-45deg); }

#header-part .nav-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--penelope-ink);
  cursor: pointer;
}

#header-part .nav-disclosure::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--penelope-ease-out);
}

#header-part .nav-disclosure[aria-expanded="true"]::before {
  transform: translateY(2px) rotate(225deg);
}

.penelope-ui #header-part .ui-submenu[data-open="false"],
.penelope-ui #header-part .ui-submenu[data-open="false"] * {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  #header-part .headermenu ul.menu > li.has-disclosure { padding-top: 14px; padding-bottom: 14px; }
  .penelope-ui #header-part .headermenu .ui-submenu {
    display: flex;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: transform 200ms var(--penelope-ease-out), opacity 150ms ease;
  }
  .penelope-ui #header-part .headermenu .ui-submenu[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .penelope-ui #header-part .headermenu .ui-submenu[data-open="true"] ul { pointer-events: auto; }
  .penelope-ui #header-part .nav-bar { display: none; }
}

@media (max-width: 1023px) {
  #header-part .mobilemenu { display: inline-flex; }
  .penelope-ui #header-part .nav-bar {
    position: fixed;
    inset: var(--penelope-nav-top, 72px) 0 0;
    width: 100%;
    display: block;
    padding: 16px 20px 32px;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform 200ms var(--penelope-ease-out), opacity 150ms ease;
  }
  .penelope-ui #header-part .nav-bar[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .penelope-ui #header-part .nav-bar[data-open="false"] * { visibility: hidden !important; }
  #header-part .nav-bar ul.menu > li { padding-right: 48px; }
  #header-part .nav-bar .nav-disclosure { position: absolute; top: -5px; right: 0; }
  .penelope-ui #header-part .nav-bar .ui-submenu[data-open="false"] { display: none; }
  .penelope-ui #header-part .nav-bar .ui-submenu[data-open="true"] { display: block; }
  body.penelope-menu-open { overflow: hidden; }
}

@media (max-width: 767px) {
  #header-part .mobilemenu { right: auto; left: 7px; }
}

.estate-landing-sec-2,
.ELContent,
#our-bourbon { scroll-margin-top: var(--penelope-scroll-offset); }
#wrapper .ELtabs li a { transition: color 120ms ease, background-color 120ms ease; }
#wrapper .ELContent[hidden] { display: none !important; }

/* Product browsing and form access should never wait for decorative entrances. */
#wrapper .productlisting .animated,
#wrapper .fourbourbon-bar .animated,
#wrapper .signup-bar .animated,
#wrapper .instagram-bar .animated {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#wrapper .fourbourbon-bar .productlisting li img,
#wrapper .ourbourbon-bar .rightproducts li img {
  top: 0;
  transition: transform 160ms var(--penelope-ease-out);
}
#wrapper .fourbourbon-bar .productlisting li:hover img,
#wrapper .ourbourbon-bar .rightproducts li a:hover img { top: 0; transform: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #wrapper .fourbourbon-bar .productlisting li:hover img,
  #wrapper .ourbourbon-bar .rightproducts li a:hover img { transform: translateY(-4px); }
}

#wrapper :is(.button, .headerlink, .mobilemenu, .nav-disclosure, .wpcf7-submit, .slick-arrow):active,
#app-vue .btn-dob:active { filter: brightness(0.9); }

@media (prefers-reduced-motion: no-preference) {
  [data-input-modality="pointer"] #wrapper :is(.button, .headerlink, .mobilemenu, .nav-disclosure, .wpcf7-submit),
  [data-input-modality="pointer"] #app-vue .btn-dob {
    transition: transform 120ms var(--penelope-ease-out), color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
  [data-input-modality="pointer"] #wrapper :is(.button, .headerlink, .mobilemenu, .nav-disclosure, .wpcf7-submit):active,
  [data-input-modality="pointer"] #app-vue .btn-dob:active { transform: scale(0.97); }
}

/* Make previously automatic press/logo strips browsable without a timer. */
#wrapper :is(.brand-slider-bar, .details-bar .logos ul) {
  position: relative;
  padding-bottom: 60px;
}
#wrapper :is(.brand-slider-bar, .details-bar .logos ul) > .slick-arrow {
  position: absolute;
  top: auto;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: #fff;
  color: #3f3f3f;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#wrapper :is(.brand-slider-bar, .details-bar .logos ul) > .slick-prev {
  left: auto;
  right: calc(50% + 5px);
}
#wrapper :is(.brand-slider-bar, .details-bar .logos ul) > .slick-next {
  left: calc(50% + 5px);
  right: auto;
}

body.penelope-age-gate-open { overflow: hidden; }
dialog.age-gate {
  box-sizing: border-box;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 20px 12px;
  background: transparent;
  overflow-y: auto;
  justify-content: flex-start;
}
dialog.age-gate:not([open]) { display: none; }
dialog.age-gate::backdrop { background: rgb(255 255 255 / 94%); }
dialog.age-gate .container-fluid { max-width: 100%; margin-block: auto; flex-shrink: 0; }
dialog.age-gate .age-gate-form { height: auto; min-height: 400px; max-width: 100%; overflow: visible; }
dialog.age-gate .age-gate-input { border-bottom-color: #767676; }

@media (max-width: 767px) {
  dialog.age-gate .age-gate-form { min-height: 0; }
}

[data-input-modality="keyboard"] #header-part *,
[data-input-modality="keyboard"] #header-part *::before,
[data-input-modality="keyboard"] #header-part *::after,
[data-input-modality="keyboard"] #wrapper .ELtabs a { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto !important; }
  #wrapper *, #wrapper *::before, #wrapper *::after,
  #app-vue *, #app-vue *::before, #app-vue *::after {
    animation: none !important;
    transition: none !important;
  }
  #wrapper .animated { opacity: 1 !important; transform: none !important; }
  #wrapper .productlisting li:hover img { transform: none !important; }
}