/* ************************************************************************************** */
/* Root variables */
:root {
  --color: #212529;
  --color-dark: rgb(245,245,247);
  --ap-lg-button-icon: rgba(0, 0, 0, 0.5952);
  --ap-lg-button-bg: #ececf0;
  --global-gutter-perc: 0px 8%;
  --global-card-bg-primary: #F4F3F2;
  --global-card-bg-secondary: white;
  --global-card-bg-primary-dark: black;
  --global-section-background-color: rgb(245, 245, 247);
  --border-compare-column-separator: #d2d2d7;
  --global-griditem-bg: #f9f9f9;
  --button-v-position: 20px;  /* Initial position from the bottom */
  --button-movement: -40px;   /* Change in movement as the video resizes */
  --button-size: 50px;        /* Default button size */
  --global-section-padding: 100px;
  --global-section-margin: 100px;
  --global-card-padding: 32px;
  --global-modal-padding: 64px 64px;
  --grey-text: rgba(0,0,0,.56);
  --bg-light-banner: rgb(249, 246, 242);
  --global-card-border-radius: 28px;
  --global-modal-border-radius: var(--global-card-padding);
  --banner-image-right: 0px var(--global-card-border-radius) var(--global-card-border-radius) 0px;
  --mobile-banner-image-bottom: 0px 0px var(--global-card-border-radius) var(--global-card-border-radius);
  --mobile-banner-image-top: var(--global-card-border-radius) var(--global-card-border-radius) 0px 0px;
  --banner-image-left: var(--global-card-border-radius) 0px 0px var(--global-card-border-radius);
  --height: 600px;
  --alt-black: #191919;
  --p-width: 678px;
  --p-height: 550px;
  --green-emphasis: #255C26;
  --green-emphasis-lighter: #2a6a2c;
  --green-emphasis-lightest: #307731;
  --grey-emphasis: rgb(134,134,139);
  --brown-emphasis: #dda827;
  --globalnav-backdrop-filter: saturate(180%) blur(20px);
  --globalnav-background: rgba(250, 250, 252, .8);
  --global-viewport-content-responsive: 87.5vw;
  --gallery-side-padding: calc(50vw - min(1680px, var(--global-viewport-content-responsive)) / 2);
  --gallery-column-gap:20px;
  --scrollbar-width:2px;
  --gridItem-color-font-color: #bdfda6;
  --gridItem-color-bg: rgb(12,49,56);
  --gridItem-color-font-color: #bdfda6;
  --gridItem-color-bg: rgb(12,49,56);
  --single-card-padding: 80px;
  --global-single-card-padding: var(--single-card-padding), 60px 8.33333333333%;
  --bg-ng-caption:rgb(252,232,230);
  --text-ng-caption:rgb(165,14,14);
  --bg-ps-caption:rgb(230,244,234);
  --text-ps-caption:#0a8059;
  --table-default-fs: 0.9em;
  --bg-dark-lm: hsl(0,0%,90%);
  --bg-lm: hsl(0,0%,95%);
  --bg-light-lm: hsl(0,0%,100%);
  --text-color-lm: hsl(0,0%,5%);
  --text-color-muted-lm: rgba(0, 0, 0, 0.67);
  --bg-dark-dm: hsl(0,0%,0%);
  --bg-dm: hsl(0,0%,5%);
  --bg-light-dm: hsl(0,0%,10%);
  --text-color-dm: hsl(0,0%,95%);
  --text-color-muted-dm: rgba(255, 255, 255, 0.67);
  --border-dm: hsl(0,0%,30%);
  --responsive-gutter-width: 156px;
  --cmp-bottle-size: 300px;        /* normal compare sticky-bar image size */
  --cmp-bottle-radius: 14px;
  --cmp-bottle-scale: 0.92;        /* makes compare bottle look less “edge-to-edge” */
  --cmp-bottle-pad: 10px;          /* inner compare bottle breathing room */
}

.dark-mode {
  color: var(--text-color-dm);
}

.zoom-button.dark-theme {
  background-color: var(--green-emphasis)!important;
  color:white!important;
}

.zoom-button.dark-theme svg {
  stroke: white!important;
}

@media (max-width: 768px) {
  :root {
    --global-section-padding: 25px;
    --banner-image-right: var(--mobile-banner-image-bottom);
    --banner-image-left: var(--mobile-banner-image-top);
  }
}

* {
  font-family: 'Montserrat', 'Ubuntu', 'Poppins', sans-serif;
}

html, body {
  overflow-x: clip; /* best */
}

/* fallback for older browsers */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Navigation menu */
/* =========================================================
   Global Navbar safety
   ========================================================= */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* =========================================================
   NAVBAR BASE
   ========================================================= */
.ftco-section.sticky-top{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
  transition: transform .28s ease, box-shadow .2s ease;
}
.ftco-section.sticky-top.nav-hidden{ transform: translateY(-100%); }

.navbar{
  background: #fff !important;
  --bs-navbar-padding-y: .1rem;
  font-size: 13px;
  font-weight: 400;
}

.navbar .nav-link{
  color: rgba(0,0,0,.88) !important;
  white-space: nowrap;
}

/* logo (keep if you use it) */
.logo{
  height: 80px;
  transition: height .3s ease, opacity .3s ease;
}
.sticky-on-scroll .logo{ height: 0; opacity: 0; }

/* =========================================================
   ✅ CENTER DESKTOP NAVBAR AGAIN (Bootstrap container overrides)
   ========================================================= */
@media (min-width: 768px){
  .navbar > .container,
  #ftco-navbar.navbar,
  #ftco-navbar.navbar > .container,
  #ftco-navbar.navbar > .container-fluid,
  #ftco-navbar.navbar > .container-sm,
  #ftco-navbar.navbar > .container-md,
  #ftco-navbar.navbar > .container-lg,
  #ftco-navbar.navbar > .container-xl,
  #ftco-navbar.navbar > .container-xxl{
    justify-content: center !important;
  }

  #ftco-nav.navbar-collapse{
    flex-grow: 0 !important;
    width: auto !important;
    justify-content: center !important;
  }

  #ftco-nav .navbar-nav{
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #ftco-nav .navbar-nav.ml-auto{ margin-left: 0 !important; }
}

/* =========================================================
   NAV ITEMS
   ========================================================= */
.navbar-nav .nav-item{
  position: relative;
  margin-right: 18px;
  padding-right: 18px;
}
@media (max-width: 768px){
  .navbar-nav .nav-item{ margin-right: 0; padding-right: 0; }
}

/* =========================================================
   DESKTOP: SINGLE GLOBAL DROPDOWN PANEL (GDP)
   ========================================================= */
@media (min-width: 768px){
  .navbar .dropdown-toggle::after{ display: none !important; }

  /* Hide the individual Bootstrap dropdown menus on desktop.
     We use ONE global panel instead. */
  .navbar .nav-item.dropdown .dropdown-menu{
    display: none !important;
  }

  #global-dropdown-panel{
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;

    top: var(--nav-h, 72px);
    margin: 0;

    max-height: 0;
    overflow: hidden;

    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;

    pointer-events: none;

    transition:
      max-height 650ms cubic-bezier(.22,.61,.36,1),
      padding 650ms cubic-bezier(.22,.61,.36,1),
      background-color 0ms linear 600ms,
      box-shadow 0ms linear 600ms,
      backdrop-filter 0ms linear 600ms;

    z-index: 2000;
  }

  #global-dropdown-panel.show{
    max-height: min(560px, calc(100vh - var(--nav-h, 72px) - 24px));
    padding: 24px 7px;

    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 18px 50px rgba(0,0,0,.12);

    pointer-events: auto;

    transition:
      max-height 650ms cubic-bezier(.22,.61,.36,1),
      padding 650ms cubic-bezier(.22,.61,.36,1);
  }

  #global-dropdown-panel .row{
    max-width: 1380px;
    margin: 0 auto;
    padding: 0px 0px 50px 0px;
  }

  /* Content fade on handoff (NO slide on handoff) */
  #global-dropdown-panel .gdp-inner{
    opacity: 1;
    transition: opacity 160ms ease;
  }
  #global-dropdown-panel.is-swapping .gdp-inner{
    opacity: 0;
  }
}

body.dropdown-open .main-body {transition: filter 300ms ease;}

/* Desktop page blur when dropdown open */
@media (min-width: 768px){
  body.dropdown-open .main-body{ filter: blur(22px); transition: filter 300ms ease; }
  body.dropdown-open .ftco-section.navbar,
  body.dropdown-open #global-dropdown-panel{ filter: none !important; }
}

/* Desktop logo */
.desktop-logo{ display: none; }
@media (min-width: 768px){
  .desktop-logo{
    display: flex;
    align-items: center;
    margin-right: 43px;
    text-decoration: none;
    flex: 0 0 auto;
    padding-bottom: 9px;
  }
  .desktop-logo img{
    height: 34px;
    width: auto;
    display: block;
  }
}

/* =========================================================
   MOBILE: hide desktop collapse area; use drawer instead
   ========================================================= */
@media (max-width: 767px){
  .navbar-collapse{ display: none !important; }
  #ftco-navbar .navbar-brand{ display: none !important; }
}

/* =========================================================
   MOBILE TOP BAR (hamburger left, logo right) + GLASS BACKGROUND
   ========================================================= */
.mnav-bar{ display: none; }

@media (max-width: 767px){
  .ftco-section.sticky-top{
    background: rgba(255,255,255,0.80) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
  #ftco-navbar{ background: transparent !important; }

  .mnav-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 12px;
  }

  .mobile-logo{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    text-decoration: none;
  }
  .mobile-logo img{
    height: 28px;
    width: auto;
    display: block;
  }
}

/* =========================================================
   MOBILE HAMBURGER
   ========================================================= */
@media (max-width: 767px){
  .menu-icon-container{
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  .menu-icon{
    width: 22px;
    height: 14px;
    position: relative;
  }

  .menu-icon .line-1,
  .menu-icon .line-2{
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0,0,0,.85);
    border-radius: 2px;
    transition: transform 260ms ease, top 260ms ease, bottom 260ms ease;
  }

  .menu-icon .line-1{ top: 2px; }
  .menu-icon .line-2{ bottom: 2px; }

  body.mnav-open .menu-icon .line-1{
    top: 6px;
    transform: rotate(45deg);
  }
  body.mnav-open .menu-icon .line-2{
    bottom: 6px;
    transform: rotate(-45deg);
  }
}

/* =========================================================
   MOBILE DRAWER + BACKDROP (FULLSCREEN, ANY SCROLL POSITION)
   ========================================================= */
.mnav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 1999;
  display: none;
}
body.mnav-open .mnav-backdrop{ display: block; }

.mnav-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(88vw, 380px);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: -18px 0 50px rgba(0,0,0,.12);
  z-index: 2000;

  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
}
body.mnav-open .mnav-drawer{ transform: translateX(0); }

body.mnav-open{
  position: fixed;
  width: 100%;
}

/* drawer header */
.mnav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mnav-title{ font-weight: 700; font-size: 14px; }
.mnav-close{
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  padding: 8px;
}

.mnav-content{
  padding: 10px 12px 24px;
  overflow: auto;
}

.mnav-link{
  display: block;
  padding: 14px 14px;
  border-radius: 12px;
  color: rgba(0,0,0,.9);
  text-decoration: none;
  font-size: 16px;
}
.mnav-link:active{ background: rgba(0,0,0,.06); }

.mnav-acc{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: rgba(0,0,0,.9);
}
.mnav-acc:active{ background: rgba(0,0,0,.06); }
.mnav-acc-icon{ font-weight: 800; }

.mnav-acc-panel{ padding: 6px 10px 10px; }

.mnav-sublink{
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: rgba(0,0,0,.82);
  text-decoration: none;
  font-size: 15px;
}
.mnav-sublink:active{ background: rgba(0,0,0,.06); }

/* hide drawer/backdrop on desktop */
@media (min-width: 768px){
  .mnav-drawer, .mnav-backdrop{ display: none !important; }
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Layout Structure */
.gutter-main {
  padding: var(--global-gutter-perc);
}
.structure-large-offset {
    margin-inline-start: 31.6666666667%;
}
.structure-large-1 {
    flex-basis: 60.6666666667%;
    max-width: 60.6666666667%;
}

.dynamic-height {
  height: 250px;
}

@media only screen and (max-width: 990px) {
  .dynamic-height {
    height: 0px;
  } 
}

@media (max-width: 1068px) {
    .medium-8 {
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%;
    }
}
@media (max-width: 1068px) {
    .medium-offset-4 {
        margin-inline-start: 33.3333333333%;
    }
}



@media (max-width: 734px) {

  .small-12 {
    flex: 1 1 100%;
  }

  .small-12 {
      flex-basis: 100%;
      max-width: 100%;
  }
}

@media (max-width: 734px) {
    .small-offset-0 {
        margin-inline-start: 0;
    }
}

.headline-section-spacer {
  margin-top: 150px;
}

.separator-compare-section {
  margin: 100px auto auto 0px;
  border-color: var(--border-compare-column-separator);
}

.separator-large {
  width: 100%;
  padding-top: 3rem;
}

.section-padding-large {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.max-width-large {
  width: 100%;
  max-width: 80rem;
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Button Styles */
/* ==========================================================================
   CTA Generic Button
   ========================================================================== */
.cta-generic-button {
  --btn-bg: var(--bg-lm);
  --btn-color: var(--text-color-lm);
  --btn-border: var(--bg-lm);
  --btn-radius: 999px;
  --btn-padding: 0.75em 1.8em;
  --btn-font-size: clamp(13px, 1.1vw, 16px);
  --btn-weight: 500;
  --btn-transition: all 0.25s cubic-bezier(.16,1,.3,1);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  text-decoration: none;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--btn-transition);
  position: relative;
  overflow: hidden;
}

/* Hover / Active */
.cta-generic-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--btn-bg) 85%, white 10%);
  border-color: color-mix(in srgb, var(--btn-border) 75%, white 25%);
}

.cta-generic-button:active {
  transform: scale(0.98);
}

/* Focus ring for accessibility */
.cta-generic-button:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 3px;
}

/* =======================================================
   THEMES
   ======================================================= */

/* Primary (default) */
.cta-generic-button[data-style="primary"] {
  --btn-bg: var(--bg-lm);
  --btn-color: var(--text-color-lm);
  --btn-border: var(--bg-lm);
}

/* Outline */
.cta-generic-button[data-style="outline"] {
  --btn-bg: transparent;
  --btn-color: #111;
  --btn-border: #444;
}

.cta-generic-button[data-style="outline"]:hover {
  background: rgba(0,0,0,0.05);
}

/* Ghost (minimal, transparent) */
.cta-generic-button[data-style="ghost"] {
  --btn-bg: transparent;
  --btn-color: inherit;
  --btn-border: transparent;
  opacity: 0.85;
}

.cta-generic-button[data-style="ghost"]:hover {
  opacity: 1;
}

/* Light mode variant */
@media (prefers-color-scheme: light) {
  .cta-generic-button[data-style="primary"] {
    --btn-bg: #222;
    --btn-color: #fff;
  }
  .cta-generic-button[data-style="outline"] {
    --btn-color: #111;
    --btn-border: #444;
  }
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  .cta-generic-button[data-style="primary"] {
    --btn-bg: #fff;
    --btn-color: #000;
  }
  .cta-generic-button[data-style="outline"] {
    --btn-color: #fff;
    --btn-border: #666;
  }
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Sections */
.section {
  padding-top: var(  --global-section-padding);
  padding-bottom: var(  --global-section-padding);
}

section .section-margin {
  margin: var(--global-section-margin) 0px var(--global-section-margin) 0px;
}

.section.background-primary {
  background-color: var(--global-section-background-color);
}

.section-content-responsive {
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 87.5vw;
  max-width: 1200px;
}

@media only screen and (max-width: 734px) {
  .section-content-responsive {
      max-width: 480px;
  }
}

.fixed-content-container.section-content-responsive {
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 100%;
  max-width: inherit;
}

.sub-section {
  padding-bottom: 50px;
}

/* Due to double padding when sub-section & modal image are combined -- sub-section padding is removed */
.no-sub-section.modal-image-wrapper {
  padding-top: 0px;
}

@media (max-width: 734px) {
  .section-content-responsive.viewport-adjustment {
      margin-top:-200px;
  }
}

@media (max-width: 992px) {
  .section-content-responsive.viewport-adjustment {
      margin-top: -12%;
  }
}

@media (min-width: 992px) {
  .section-content-responsive.viewport-adjustment {
      margin-top:3%;
  }
}

/* @media (min-width: 1645px) {
  .section-content-responsive.viewport-adjustment {
      margin-top:-170px;
  }
} */

@media (min-width: 768px) {
  .section-header .section-header-headline {
      max-width: 75%;
  }
}

/* Banner card section */
.banner-card-right-section {
  padding: 0px;
  border-radius: var(--banner-image-right);
}
.banner-card-image-right {
  padding: 0px;
  border-radius: var(--banner-image-right);
}

.banner-card-image {
  object-fit: cover;
  width: 100%;
  overflow: hidden;

}

@media (min-width: 1069px) and (min-width: 1441px) {
  .banner-card, .banner-card-image {
      height: var(--height);
  }

  .modal-column-card {
    height: auto;
  }

  .banner-card-text-section {
    padding:15px;
  }
}

@media (min-width: 601px) {
  .container.banner-card {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}


@media (max-width: 600px) {
  .container.banner-card {
    padding-left: 5px;
    padding-right: 5px;
  }

  .banner-card, .banner-card-image {
    --height: 480px;
}

  .banner-card-image-right {
    height: var(--height);
    width:100%;
    overflow: hidden;
  }
}

.banner-card-btn {
  background-color: var(--alt-black);
  transition: 0.2s ease-in-out;
  font-weight: 500;
}

.banner-card-btn:hover {
  color: var(--ap-lg-button-icon)!important;
  background-color: white!important;
  transition: 0.2s ease-in-out;
}


/* Single big card section */
.section-cards {
  position: relative;
  overflow: hidden;
  padding-block: 34px;
}

.cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  grid-column-gap: 30px;
  column-gap: 30px;
  grid-row-gap: 30px;
  row-gap: 30px;
  height: 700px;
}

.tile-focus {
  width: 100%;
  height: 100%;
  transition: opacity .2sease;
}

.cards-container .tile-content {
  box-sizing: border-box;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.tile-focus .tile-content {
  padding: var(--global-single-card-padding);
}


.section-cards .cards-container .tile-media {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.section-cards .cards-container .tile-media.tile-background-picture {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

.section-cards .cards-container .tile-media.tile-background-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.section-cards .cards-container .tile-media.tile-background-picture.container-card-image {
  display: block;
  --p-width: 1200px;
  --p-height: 718px;
  width: var(--p-width);
  height: var(--p-height);
}



/* Banner card themes */
/* Banner card light theme 1 */
.banner-card-theme-light-1 {
  background-color: var(--global-card-bg-primary);
  border-radius: var(--global-card-border-radius);
}

.banner-card-theme-light-2 {
  background-color: var(--global-card-bg-secondary);
  border-radius: var(--global-card-border-radius);
}

.banner-card-theme-dark-1 {
  background-color: black;
  border-radius: var(--global-card-border-radius);
  color: var(--color);
  --color: #e2e2e2;
}

/* Section theme */
.section-light-theme-grey {
  background-color: var(--global-card-bg-primary);
}

/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Typographies */
.typography-light-theme {
  color: var(--text-color-muted-dm);
}

.typography-dark-theme {
  color: var(--text-color-muted-lm);
}

.typography-navbar-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color-muted-lm);
}

.typography-section-headline,
.typography-modal-headline
{
  font-size: 56px;
  line-height: 1.0714285714;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 50px;
}

.typography-section-hero-intro-headline {
  font-size: 96px;
  line-height: 1.0416666667;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.typography-section-hero-intro-paragraph {
  font-size: 24px;
  line-height: 1.41667;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.typography-section-hero-paragraph {
  font-size: 17px;
  line-height: 1.41667;
  font-weight: 400;
  letter-spacing: 0.025em;
}

@media (max-width: 1068px) {
  .typography-section-hero-intro-headline {
      font-size: 64px;
      line-height: 1.0625;
      font-weight: 600;
      letter-spacing: -0.009em;
  }
  
}

@media (max-width: 734px) {
  .typography-section-hero-intro-headline {
    font-size: 48px;
    line-height: 1.0834933333;
    font-weight: 600;
    letter-spacing: -0.003em;
  }

  .typography-section-hero-intro-paragraph {
    font-size: 17px;
    line-height: 1.41667;
    font-weight: 400;
    letter-spacing: 0.025em;
  }

  .p-hero-intro-paragraph {
    padding: 1rem;
  }

  .typography-section-hero-paragraph {
    font-size: 14px;
  }
}


.module-content .typography-section-headline {
  text-align: center;
  margin-bottom:0px;
}

.header-description {
  font-size: 38px;
  line-height: 1.1428571429;
  font-weight: 500;
  letter-spacing: .007em;
}

.section-header {
  align-items: flex-end;
  display: flex;
  justify-content: space-around;
  gap: 28px;
  padding-bottom: 80px;
}

.black-emphasis {
  color:  var(--tertaire-dark-tone);
}

.green-emphasis {
  color: var(--green-emphasis);
}

.gradient-highlight {
  font-size: 38px;
  background: -webkit-linear-gradient(
    97deg,    
    var(--green-emphasis) 15%,
    white
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-emphasis.highlight {
  font-size: 21px;
}

.green-emphasis-lighter {
  color: var(--green-emphasis-lighter);
}

.green-emphasis-lightest {
  color: var(--green-emphasis-lightest);
}

.brown-emphasis {
  color: var(--brown-emphasis);
}

.grey-emphasis {
  color: var(--grey-text);
}

.brown-gradient-header {
  background: linear-gradient(90deg, #7a5230 0%, #e2b38f 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hidden {
  display: none!important;
}

a.hidden-link {
  color: inherit;
  text-decoration: none;
  
}

.superscript {
  vertical-align: super;
}

.superscript.small,
.superscript .small {
  font-size: 0.75em;
}


/* Typography of card banner */
.modal-header {
  font-size: 32px;
  line-height: 1.0714285714;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.modal-label {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
}

p.typography-modal-paragraph,
li.typography-modal-paragraph
 {
  font-size: 20px;
  line-height: 1.4705882353;
  font-weight: 400;
  letter-spacing: -0.022em;
}

h3.typography-modal-paragraph
 {
  font-size: 23px;
  line-height: 1.4705882353;
  font-weight: 500;
  letter-spacing: -0.022em;
}

p.typography-form-paragraph {
  font-size: 15px;
  line-height: 1.4705882353;
  font-weight: 500;
  letter-spacing: -0.022em;
}

.typography-small-notes {
  font-size: 13px;
  line-height: 1.4705882353;
  font-weight: 400;
  letter-spacing: -0.022em;
}


@media (min-width: 735px) {
  .section-header .section-header-headline {
      max-width: 75%;
  }
}

@media (max-width: 1068px) {
  .typography-section-headline,
  .typography-modal-headline {
      font-size: 48px;
      line-height: 1.0834933333;
      font-weight: 500;
      letter-spacing: -0.003em;
      margin-bottom: 15px;
  }
}

@media (max-width: 734px) {
  .typography-section-headline,
  .typography-modal-headline {
      font-size: 28px;
      line-height: 1.1428571429;
      font-weight: 500;
      letter-spacing: .007em;
      margin-bottom: 10px;
  }

  p.typography-modal-paragraph,
  li.typography-modal-paragraph {
      font-size: 14px;
      line-height: 1.4705882353;
      font-weight: 400;
      letter-spacing: -0.022em;
  }

  h3.typography-modal-paragraph {
      font-size: 23px;
      line-height: 1.4705882353;
      font-weight: 500;
      letter-spacing: -0.022em;
  }

  .section-flex-tiles-tile-eyebrow,
  .typography-modal-eyebrow {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.12;
  }
  
  .section-flex-tiles-tile-headline  {
    font-size: 25px!important;
  }
}

/* .banner-headline-xtra {
  font-size: 70px;
  line-height: 1.1428571429;
  font-weight: 500;
  letter-spacing: .007em;
  margin-bottom: 10px;
} */


@media only screen and (max-width:3000px) {
  .banner-headline-xtra {
    font-size: 100px;
    line-height: 1.1428571429;
    font-weight: 500;
    letter-spacing: .007em;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width:1390px) {
  .banner-headline-xtra {
    font-size: 70px;
    line-height: 1.1428571429;
    font-weight: 500;
    letter-spacing: .007em;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width:700px) {
  .banner-headline-xtra {
    font-size: 50px;
    line-height: 1.1428571429;
    font-weight: 500;
    letter-spacing: .007em;
    margin-bottom: 10px;
  }
}




/* Typography scroll gallery cards */
/* Eyebrows */
.typography-feature-card-eyebrow {
  font-size: 17px;
  line-height: 1.2353641176;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.tile-eyebrow,
.typography-modal-eyebrow {
  margin-top:20px;
}

.typography-typography-modal-eyebrow {
  font-size: 28px;
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
}


/* Headlines */
.typography-card-headline {
  font-size: 28px;
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
}

.typography-big-promotion-eyebrow,
.typography-big-promotion-eyebrow.dark {
  --big-promotion-eyebrow-font-size:24px;
  --big-promotion-eyebrow-color: var(--ap-lg-button-icon);
  color: var(--big-promotion-eyebrow-color);
  font-size: var(--big-promotion-eyebrow-font-size);
  line-height: 1.1428571429;
  font-weight: 500;
  overflow-wrap: break-word;
  letter-spacing: .007em;
}

.typography-big-promotion-eyebrow.dark,
.typography-big-promotion-header.dark {
  color: var(--color-dark);
}




.typography-big-promotion-header,
.typography-big-promotion-header.dark {
  --big-promotion-header-font-size:60px;
  font-size: var(--big-promotion-header-font-size);
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
  overflow-wrap: break-word;
  padding:9px 0px;
}

@media (max-width: 734px) {
  .typography-big-promotion-eyebrow {
    --big-promotion-eyebrow-font-size:14px;
    --big-promotion-eyebrow-color: var(--green-emphasis);
    color: var(--big-promotion-eyebrow-color);
    font-size: var(--big-promotion-eyebrow-font-size);
    line-height: 1.1428571429;
    font-weight: 500;
    overflow-wrap: break-word;
    letter-spacing: .007em;
  }
  
  .typography-big-promotion-header {
    --big-promotion-header-font-size:28px;
    font-size: var(--big-promotion-header-font-size);
    line-height: 1.1428571429;
    font-weight: 900;
    letter-spacing: .007em;
    overflow-wrap: break-word;
  }

}

.typography-modal-feature-headline {
  font-size: 32px;
  line-height: 1.0714285714;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.typography-modal-label-description .dark-mode {
  color: var(--text-color-dm);
}

.modal-feature-content-wrapper-colored-theme .typography-modal-feature-paragraph {
  color:white;
}

.typography-modal-feature-paragraph.color,
.typography-modal-feature-paragraph .color 
{
  color: #bdfda6;
}

.modal-list-item {
  font-weight: inherit;
}


.modal-list-item .color {
  color: var(--gridItem-color-font-color);
}

.modal-list-item.light-theme,
.light-theme {
  color: var(--text-color-dm);
}

/* Cursors */
.cursor-def {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Hero Homepage section  */
section#hero-taste-analytics.sticky-hero-section {
    height: 100vh;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #hero-taste-analytics .sticky-hero-image {
    width: 100%;
    height: auto;
    transform: scale(2.3);
    transform-origin: center center; /* iets onder de bovenkant */
    will-change: transform;
  }
  
  #hero-taste-analytics .pin-spacer {
    background-color: black;
  }

/* ************************************************************************************** */
/* Hero next section  */
  #hero-taste-analytics.next-hero-section {
    padding-top: 25vh;  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #hero-taste-analytics.next-hero-section {
  background: black;
  }

  .next-hero-section .hero-headline,
  .video-hero-verbiage .hero-headline {
    font-size: 80px;
    padding-top: 96px;
    padding-bottom: 56px;
  }


.overview-feature-icon {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 68px;
    --p-height: 68px;
}

/* ************************************************************************************** */
/* Global geometries */
.not-rounded {
  border-radius: 0px;
}

.borderless {
  border: none;
  outline: none;
}

.no-shadow {
  box-shadow: none!important;
}

.global-border {
  border-radius: var(--global-card-border-radius);
}

.container-fluid .no-bs-gutter.row,
.container-fluid .no-bs-gutter.col-12 {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
}



/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Reusable Hero Section */
/* Container: make it taller than the viewport and stack children */
.hero-section .hero-media {
  position: relative;
  display: grid;            /* stack picture + overlay */
  grid-template-areas: "stack";
  min-height: 160vh;        /* adjust to your desired tall hero height */
}

@media screen and (max-width: 750px) {
  .hero-section .hero-media {
    min-height: 95vh;        /* adjust to your desired tall hero height */
}
}

/* Make both children occupy the same grid cell */
.hero-section .hero-media picture,
.hero-section .hero-media .hero-overlay {
  grid-area: stack;
}

/* Background image */
.hero-section .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: sticky;
  bottom: clamp(3rem,4vw, 5rem);
  margin-bottom: 100px;       
  align-self: end;      
  justify-self: start;  
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff;
  z-index: 1;
  text-align: left;     
}

.hero-section .hero-overlay {
  position: sticky;
  bottom: clamp(3rem,4vw, 5rem);
  margin: 50px auto 100px;       
  align-self: end;      
  justify-self: start;  
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff;
  z-index: 1;
  text-align: left;  
}


.hero-eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero-headline {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
  font-weight: 600;
}

.hero-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.hero-button:hover { background-color: #fff; }


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* =========================================================
   WELCOME HEADER PROMO VIDEO (DESKTOP / BASE)
   ========================================================= */

.video-wall-container {
  height: 80vh;
  min-height: 680px;
  max-width: 1920px;
  max-height: 1260px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-wall-container .video-header .row {
  --bs-gutter-x: 0;
}

@media (max-width: 1068px) {
  .video-wall-container {
    border-radius: 36px;
  }
}

.video-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full screen initially (desktop) */
  border-radius: 15px;
  transition: height 0.1s ease-out, transform 0.1s ease-out;
}

#videoColumn {
  width: 100%;
  transition: width 0.1s ease-out;
}

.video-element {
  height: 110%;
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
}

@media only screen and (min-width: 1886px) {
  .video-element {
    border-radius: 15px;
  }
}

.video-element.headerVideo-hero-analytics {
  border-radius: 35px;
}

/* Verbiage overlay */
.video-hero-verbiage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  color: white;
  z-index: 2;
}

.video-hero-verbiage h1 {
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   VIDEO CONTROLS (DESKTOP / BASE)
   ========================================================= */

.play-button-overlay,
.prev-button-overlay,
.next-button-overlay {
  position: absolute;
  bottom: var(--button-v-position);
  height: calc(100% - var(--button-v-position));
  display: flex;
  align-items: flex-end;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin: 20px 40px;
}

.play-button-overlay .fa-play.fa-solid,
.play-button-overlay .fa-pause.fa-solid,
.play-button i.video-replay-mode {
  color: var(--ap-lg-button-icon);
}

.prev-button-overlay { left: 1%; }
.next-button-overlay { right: 1%; }

/* Show buttons */
.play-button-overlay,
.prev-button-overlay,
.next-button-overlay {
  visibility: visible;
  opacity: 1;
}

.play-button,
.prev-button,
.next-button {
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(232, 232, 237);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.play-button:hover,
.prev-button:hover,
.next-button:hover {
  background-color: rgb(200, 200, 200);
  transform: scale(1.1);
}

.prev-button svg,
.next-button svg,
.prev-button path,
.next-button path {
  fill: none;
}

button.next-button.finish-style {
  background: transparent;
  border: none;
  color: #000;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

button.next-button.finish-style svg {
  margin-left: 0.4em;
  stroke-width: 2.5;
}

button.next-button.finish-style:hover {
  text-decoration: underline;
}

/* =========================================================
   MOBILE: SWAP DESKTOP ↔ MOBILE VIDEO + FIX HEIGHT/OVERLAP
   ========================================================= */

.video-wall-container--mobile {
  display: none; /* hidden by default (desktop) */
}

.section--welcome-mobile {
  display: none; /* hidden by default (desktop) */
}

@media (max-width: 734px) {

  /* ---- (A) Border radius tweak you wanted on mobile container ---- */
  .video-wall-container {
    border-radius: 28px;
    max-height: 960px;
  }

  /* ---- (B) Swap: hide desktop video container, show mobile container ---- */
  .video-wall-container:not(.video-wall-container--mobile) {
    display: none;
  }

  .video-wall-container--mobile {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch;
    margin-bottom: 16px; /* ensures text doesn't touch/overlap */
  }

  /* ---- (C) Critical: mobile header must NOT inherit 100vh from .video-header ---- */
  .video-header--mobile {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0;
    transition: none; /* avoids any height tween weirdness on mobile variant */
  }

  /* If you used #videoColumnMobile in your mobile HTML */
  #videoColumnMobile {
    height: auto !important;
    position: relative;
    background: #000; /* letterbox/background */
  }

 .video-element--mobile {
  width: 100% !important;
  height: auto !important;
  max-height: 100svh;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  border-radius: 0 !important; /* no rounded corners on mobile */
  transform: none !important;
}

  /* ---- (D) Mobile UX: tap video to play/pause, so hide overlay buttons ---- */
  .play-button-overlay,
  .prev-button-overlay,
  .next-button-overlay {
    display: none !important;
  }

  /* ---- (E) Swap: hide desktop heading, show mobile heading ---- */
  .section-content-responsive.section.viewport-adjustment:not(.section--welcome-mobile) {
    display: none;
  }

  .section--welcome-mobile {
    display: block;
  }

  /* Mobile typography polish */
  .section--welcome-mobile .typography-section-headline {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.15;
    margin: 15px auto;
  }

  .section--welcome-mobile .header-description {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-top: 0.25rem;
  }

    .shrink-hero {
    display: none;
  }
}





/* ************************************************************************************** */
/* Animations */
/*  */
/* Text animations */
.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 2s;
}

.tag-delayed-m {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 2s 250ms;
}

.tag-delayed-l {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 2s 800ms;
}

/* visible-delayed class is added on scroll by textFadeIn.js */
.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.tag-delayed-m.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.tag-delayed-l.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.fade-in {
  --fadeIn-time: 2s;
  --fadeIn-delay: 700ms;
  animation: fadeIn ease var(--fadeIn-time) var(--fadeIn-delay) forwards; /* 3s fade-in, starts after 1s */
  -webkit-animation: fadeIn ease var(--fadeIn-time) var(--fadeIn-delay) forwards;
  -moz-animation: fadeIn ease var(--fadeIn-time) var(--fadeIn-delay) forwards;
  -o-animation: fadeIn ease var(--fadeIn-time) var(--fadeIn-delay) forwards;
  -ms-animation: fadeIn ease var(--fadeIn-time)s var(--fadeIn-delay) forwards;
  opacity: 0;
}

.fade-in.delay-1 {
  --fadeIn-delay: 1400ms;
}

.fade-in.delay-2 {
  --fadeIn-delay: 1800ms;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Base fade-in animation */
@keyframes fadeIn {
  to {
      opacity: 1;
      transform: translate(0, 0);
  }
}

/* On hover card growth */
.card-box-shadow {
	transition: .3s ease-in-out;
	box-shadow: 2px 4px 12px #00000014;
}

.card-box-shadow:hover {
  box-shadow: 2px 4px 16px #00000029;
	transform: scale3d(1.01,1.01,1.01);
}

.scale-animation {
  transition: all 0.3s;
}

.scale-animation:hover {
  transition: all 0.3s;
  transform: scale3d(1.01,1.01,1.01);
}


/* Slide in effects */

@keyframes slideInLeft {
  from {
      transform: translateX(-20%);
  }
  to {
      transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
      transform: translateX(30%);
  }
  to {
      transform: translateX(0);
  }
}

@keyframes slideInBottom {
  from {
      transform: translateY(30%);
  }
  to {
      transform: translateY(0);
  }
}

@keyframes productSlideInRight {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Reusable class for slide-in from the left */
.slide-in-left {
  animation: slideInLeft 1.3s ease-out forwards;
}

.slide-in-right {
  animation: slideInRight 1.5s ease-out forwards;
}

.slide-in-bottom {
  animation: slideInBottom 1.5s ease-out forwards 1100ms;
}

.product-slide-in-right {
  animation: productSlideInRight .6s forwards cubic-bezier(.1,.5,0,1);
  animation-delay: 1.6s;}




/* GSAP library animations */
/* Fade-up text --- play none none reverse */
.gsap-fade-up-pnnr {
  opacity: 0;
  transform: translateY(40px);
}

/* play none none none */
.gsap-fade-up-pnnn {
  opacity: 0;
  transform: translateY(40px);
}



/* Initially, cards are transformed and hidden */
.gallery-item {
  transform: translateY(20px) matrix(1, 0, 0, 1, 0, 30); /* Transformed off-screen */
  opacity: 0; /* Fully hidden */
  transition: transform 800ms ease-out, opacity 800ms ease-out; /* Smooth transition when visible */
}

/* When the card enters the viewport, transform and opacity are reset */
.gallery-item.in-viewport {
  transform: translateY(0px) matrix(1, 0, 0, 1, 0, 0); /* Reset transform to bring into view */
  opacity: 1; /* Make it visible */
}

/* Staggering delay for each item */
.gallery-item:nth-child(1).in-viewport {
  transition-delay: 0.2s;
}

.gallery-item:nth-child(2).in-viewport {
  transition-delay: 0.4s;
}

.gallery-item:nth-child(3).in-viewport {
  transition-delay: 0.6s;
}

.gallery-item:nth-child(4).in-viewport {
  transition-delay: 0.8s;
}

.gallery-item:nth-child(5).in-viewport {
  transition-delay: 1s;
}

.gallery-item:nth-child(6).in-viewport {
  transition-delay: 1.2s;
}

.gallery-item:nth-child(7).in-viewport {
  transition-delay: 1.4s;
}



/* Animation to scale text on scroll value */
.scaling-text {
  font-size: 3rem;
  transition: transform 0.1s ease-out;
}

.opacity-fade-text {
  opacity: 0.8;
  transition: opacity 0.1s ease-out;
}


/* Scrollable quick action animation  */
.wd-actions-scope * { box-sizing: border-box; }

/* Section: centered, responsive padding */
.wd-actions{
  display: flex;
  justify-content: center;        /* center row horizontally */
  padding-block: clamp(24px, 6vw, 80px);
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Row: keep content centered and width-fluid */
.wd-actions-row{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ===== Pill Button (auto-width by content) ===== */
.wd-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: none;
  background: transparent;         /* background lives in ::before */
  border-radius: 999px;            /* pill (not 50% circle) */
  padding: 12px 16px;
  white-space: nowrap;             /* fit content tightly */
  cursor: pointer;

  position: relative;
  isolation: isolate;

  /* subtle lift (for entrance animation) */
  opacity: 1;
  transform: translateY(12px) scale(.985);
  will-change: transform;
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Animated pill layer */
.wd-action-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;

  background: #1c1c1e;
  border: 1px solid #2c2c2e;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);

  /* center-emerge (GSAP will drive --sx/--sy) */
  transform: scaleX(var(--sx, 0)) scaleY(var(--sy, .92));
  transform-origin: center center;
  will-change: transform, box-shadow;
}

/* Optional shine */
.wd-action-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,0) 40% 60%,
    rgba(255,255,255,.06)
  );
  opacity: 0;
  transform: translateX(-30%) skewX(-8deg);
  transition: opacity .35s ease, transform .8s cubic-bezier(.16,1,.3,1);
}

.wd-action-btn:hover::before{ box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.wd-action-btn:hover::after{ opacity: 1; transform: translateX(0) skewX(-8deg); }
.wd-action-btn:active{ transform: translateY(0) scale(.98); }

/* Icon + label (revealed after pill expands) */
.wd-action-ico{
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 0 rgba(255,255,255,.12);
  z-index: 2;

  opacity: 0;                      /* hidden until reveal */
  transform: translateY(6px);
  transition: box-shadow .35s ease;
}
.wd-action-ico svg{ color: #f5f5f7; display: block; }

.wd-action-label{
  color: var(--text-color-muted-dm);
  z-index: 2;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  opacity: 0;                      /* hidden until reveal */
  transform: translateY(6px);
}

/* Optional hover 3D tilt */
.wd-action-btn.wd-tilt{
  transform: perspective(600px)
             rotateX(var(--tiltY, 0deg))
             rotateY(var(--tiltX, 0deg))
             translateY(0);
  transition: transform .12s ease;
}

/* GPU polish */
.wd-action-btn,
.wd-action-btn::before{
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Reduced motion: everything shows static */
@media (prefers-reduced-motion: reduce){
  .wd-action-btn,
  .wd-action-btn::before,
  .wd-action-btn::after,
  .wd-action-ico,
  .wd-action-label{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.wd-actions--centerY{
  min-height: 60vh;               /* tweak as needed, or 100vh for full screen */
  display: flex;
  align-items: center;            /* vertical centering */
  justify-content: center;        /* horizontal centering (already set) */
}

/* Sticky mode: fixed at bottom-center */
.wd-action-btn.is-sticky {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%); /* centering while sticky */
  z-index: 1500;
}

/* When sticky, keep the pill crisp on top of content */
.wd-action-btn.is-sticky::before {
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

/* Prevent layout shift when sticky (button leaves the flow) */
.wd-actions--reserve-space {
  /* reserve roughly the button height so the row doesn’t jump */
  padding-bottom: clamp(48px, 8vw, 80px);
}

/* Optional: a little “lift” when becoming sticky */
.wd-action-btn.is-sticky:active {
  transform: translateX(-50%) translateY(0) scale(.98);
}



/* Tooltip animation */
.tooltip-container {
  --background: #750292;
  position: relative;
  cursor: pointer;
  display: flex;
  transition: all 0.2s;
  padding: 0 0.2em;
  border: 1px solid transparent;
}

.tooltip {
  position: absolute;
  top: 20px;
  left: 32%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  color: #fff;
  background: var(--background);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-20%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -150%;
  border-radius: 0.25em;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tooltip-text {
  margin-right: 4px;
  height: fit-content;
  animation: 1s bounce infinite;
  border-bottom: 2px solid var(--background);
}

.tooltip-text:hover {
  animation: none;
}

@keyframes bounce {
  50% {
    color: #cda8d6;
  }
  75% {
    scale: 0.98;
    transform: rotate(1deg);
  }
  100% {
    scale: 1.01;
  }
}























/* ************************************************************************************** */
/* Flex tiles grid system */

/* ---------- Layout containers ---------- */
.section-wide {
  margin-left: auto;
  margin-right: auto;
}

.section-content {
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  padding: 20px 0 60px;
}

@media only screen and (min-width: 1069px) {
  .section-wide .section-content {
    max-width: 1380px;
    width: 100%;
  }
}

@media only screen and (min-width: 1441px) {
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
  }
}

/* (You had this block twice; kept once) */
@media only screen and (min-width: 1069px) {
  .section-wide .section-content {
    max-width: 1380px;
    width: 100%;
  }
}

@media only screen and (max-width: 1068px) {
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
  }
  .homepage-tile-img-dramviewer {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 734px) {
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
  .homepage-tile-img-dramviewer {
    margin-bottom: 50px;
  }
}

/* ---------- Grid ---------- */
.section-flex-tiles .grid,
.grid-container-wrapper.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px; /* Gap between grid items */
  padding: 0 24px;
}

@media only screen and (min-width: 900px)
{
  .section-flex-tiles .grid,
.grid-container-wrapper.grid {
    padding: 0 12%;
}
}

.grid-item {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}

/* Half-width grid item spans 6 columns */
.grid-item.half-width {
  grid-column: span 6;
}

/* Full-width grid item spans 12 columns */
.grid-item.full-width {
  --grid-item-half-width-height: 350px;
  grid-column: span 12;
  height: var(--grid-item-half-width-height);
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media only screen and (max-width: 734px) {
  .section-flex-tiles .grid-item {
    grid-column: span 12;
    min-height: 500px;
  }
}

/* ---------- Tile ---------- */
.tile {
  height: 100%;
  width: 100%;
  padding-bottom: 0;
  grid-column: span 6;
  overflow: hidden;
}

.tile-rounded {
  border-radius: var(--global-card-border-radius);
}

@media only screen and (max-width: 734px) {
  .section-flex-tiles .tile {
    grid-column: span 12;
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
    max-height: 500px;
  }

  .grid-item.full-width {
    grid-column: span 12;
    height: auto; /* Allow flexible height on smaller screens */
    min-height: 500px;
  }
}

@media only screen and (max-width: 1068px) {
  .section-flex-tiles .tile {
    max-height: 600px;
  }
}

/* ---------- Tile content ---------- */
.section-flex-tiles .tile-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 0;
  padding-top: 40px;
}

.section-flex-tiles .grid-item.full-width .tile-content {
  flex-direction: row;
  padding: 0px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Image rules (desktop/base) ---------- */
.section-flex-tiles .full-width .image-wrapper img {
  width: 100%;
  object-fit: cover; /* Ensures the image fills the container and crops excess */
  object-position: center; /* Centers the image inside the container */
  display: block; /* Ensures no inline space issues */
}

.section-flex-tiles .full-width .tile-content .verbiage-wrapper,
.section-flex-tiles .full-width .tile-content .image-wrapper {
  width: 50%; /* Each takes up 50% of the width */
}

.section-flex-tiles.tile-content {
  padding: 50px 8.3333333333%;
}

/* ---------- Verbiage ---------- */
.verbiage-wrapper {
  padding-top: 10px;
  padding-bottom: 25px;
  z-index: 1;
}

.section-flex-tiles-tile-eyebrow,
.typography-modal-eyebrow {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.12;
}

.tile-headline,
.modal-headline {
  margin-top: 25px;
}

.section-flex-tiles-tile-headline {
  font-size: 35px;
}

/* ---------- Image wrapper ---------- */
.section-flex-tiles .image-wrapper {
  height: 100%;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.section-flex-tiles .full-width .image-wrapper {
  width: 50%; /* Takes up 50% of the row width */
  height: 100%; /* Matches the height of the parent row */
  overflow: hidden; /* Prevents the image from spilling outside the wrapper */
  display: flex; /* Centers content if needed */
  align-items: center; /* Ensures alignment */
  justify-content: center;
}

.section-flex-tiles image {
  display: block;
}

/* ---------- Specific image sizing ---------- */
.homepage-tile-img-dramviewer {
  display: block;
  width: var(--p-width);
  height: var(--p-height);
  /* If resizing, keep aspect ratio 11 : 24 in mind. */
  --p-width: 250px;
  --p-height: 500px;
  margin-bottom: 100px;
}

.homepage-tile-img-dramfinderpro {
  display: block;
  width: var(--p-width);
  height: var(--p-height);
  --p-height: auto;
}

/* ---------- Feature verbiage ---------- */
.feature-verbiage-wrapper.typography-feature-overview {
  color: white;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
}

/* ======================================================================================
   MOBILE: FULL-WIDTH TILE SHOULD BE TEXT-ONLY (ONLY TOUCHING CLASSES IN YOUR SHARED HTML)
   ====================================================================================== */
@media only screen and (max-width: 734px) {

  /* Make the full-width tile flexible in height (text-only) */
  .grid-item.full-width {
    height: auto;
    min-height: 0;
  }

  /* Stack content (instead of side-by-side) */
  .grid-item.full-width .tile-content {
    display: block;
  }

  /* Remove the image area completely on mobile */
  .grid-item.full-width .image-wrapper {
    display: none !important;
  }

  /* Ensure text area takes full width (override any 50% rules) */
  .grid-item.full-width .verbiage-wrapper {
    width: 100% !important;
    padding-top: 10px;
    padding-bottom: 25px;
  }

  /* Optional: mobile CTA spacing */
  .grid-item.full-width .module-cta-links {
    margin-top: 0.75rem;
  }

  /* Safety: prevent leftover margin from hidden images affecting spacing */
  .homepage-tile-img-dramviewer {
    margin-bottom: 0 !important;
  }
}


/* ************************************************************************************** */
/* 2 column grid system */

/* Container setup */
.grid-2-col {
  justify-content: space-around;
}
.display-section-columns .row {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem; /* compenseert padding van .column */
  margin-bottom: 180px;
}

.display-section-columns {
  width: 900px;

}

/* Algemene kolom-styling */
.column {
  box-sizing: border-box;
  padding: 0.5rem;
}

/* Breedtes per breakpoint */
/* Mobiel (small-12): 100% */
.small-12 {
  flex: 1 1 100%;
}


/* Tablet (medium-6): 50% */
@media (min-width: 600px) and (max-width: 899px) {
  .medium-6 {
    flex: 1 1 50%;
  }
  .display-section-columns {
    width: 80%;
    margin-left: 25px;
    margin-right: 25px;
  }
}

/* Desktop (large-6): 50% */
@media (min-width: 900px) {
  .large-6 {
    flex: 1 1 50%;
  }
}

.section-border-gradient.burst-gradient,
.section-border-gradient .burst-gradient
 {
  --border-gradient: linear-gradient(
    97deg,
    var(--green-emphasis) 15%,
    white
  );

  border: 15px solid transparent;
  border-radius: 40px;
  background-image:
    linear-gradient(black, black),
    var(--border-gradient);

  background-origin:
    padding-box,
    border-box;

  background-clip:
    padding-box,
    border-box;
}





/* ************************************************************************************** */
/* Scroll gallery */
/* Scroll and gallery container */
.caption-tile-gallery .card-set {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 20px var(--gutter);       /* symmetric padding */
  width: max-content;
}

.caption-tile-gallery { --gutter: 24px; }
@media (max-width: 734px) {
  .caption-tile-gallery { --gutter: 16px; }
}

.scroll-container {
  overflow: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  scroll-snap-type: x mandatory;
}

/* Rail overlay */
.shelf-title-rail {
  position: absolute;
  left: 24px;          /* match your inner gutter (16px on mobile) */
  top: 8px;            /* adjust to sit nicely above cards */
  right: auto;
  z-index: 20;
  pointer-events: none; /* never block interactions with cards */
}

/* Big, elegant type */
.shelf-title-rail__text {
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(28px, 6vw, 72px);
  letter-spacing: -0.02em;
  color: #111;
  text-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Mobile gutter alignment */
@media (max-width: 734px) {
  .shelf-title-rail { left: 16px; top: 6px; }
}

.scroll-gallery .gallery-wide .scroll-container {
  position: relative;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--responsive-gutter-width);
  padding: 10px 0 var(--staggered-translate-y, 30px);
  margin: -10px 0 calc(var(--staggered-translate-y, 30px) * -1);
}

@media only screen and (min-width: 1441px) {
  .item-container {
    padding: 0px var(--gallery-side-padding);
  }
}



.scroll-container::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}


.section-consider .gallery .item-container {
  --gallery-column-gap: 20px;
}

.gallery .item-container {
  display: grid;
  grid-template-rows: repeat(1, auto);
  grid-template-columns: max-content;
  grid-auto-flow: column;
  grid-column-gap: var(--gallery-column-gap); 
  --gallery-column-gap: 45px;
  column-gap: var(--gallery-column-gap);
  grid-row-gap: 0px;
  row-gap: 0px;
  width: fit-content;
}

.gallery.gallery-align-start .item-container {
  padding: 0 var(--gallery-side-padding);
}

.gallery.gallery-align-start .scroll-container {
  scroll-padding: var(--gallery-side-padding);
}

@media only screen and (min-width: 1441px) {
  .gallery .item-container {
      --gallery-column-gap: 72px;
  }
}

/* Scroll gallery card set */
.gallery .card-set {
  display: grid;
  grid-template-rows: repeat(1, auto);
  grid-template-columns: max-content;
  grid-auto-flow: column;
  grid-column-gap: var(--gallery-column-gap);
  column-gap: var(--gallery-column-gap);
  grid-row-gap: 0px;
  row-gap: 0px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0px 0px;
  list-style: none;
}
.caption-tile-gallery .card-set::after {
  content: "";
  flex: 0 0 var(--gutter);
}

.gallery.gallery-align-start .gallery-item {
  scroll-snap-align: start;
  top:0;
  transition: 0.3s ease-in-out;
}
.gallery.gallery-align-start .gallery-item:hover {
  top:-5px;
  transition: 0.3s ease-in-out;
}

.grid-item {
  position: relative;
  box-sizing: border-box;
}

/* Scroll gallery card container */
.gallery .card-set .card, .gallery .card-set .card-container {
  height: 100%;
  border: none;
}

.feature-card {
  transition: transform .3s cubic-bezier(0,0,0.5,1);
}

.feature-card:hover {
  transition: transform .3s cubic-bezier(0,0,0.5,1);
}

.card .card-modifier.fixed-width {
  width: 372px;
}

@media only screen and (min-width: 1441px) {
  .card .card-modifier.fixed-width {
      width: 405px;
  }
}

.card .card-modifier.theme-dark, .theme-dark .card .card-modifier {
  background: #242426;
}

.card .card-modifier.card-padding {
  padding: var(--global-card-padding);
}

@media only screen and (min-width: 1441px) {
  .feature-card .card-modifier {
      max-height: 804px;
      min-height: 740px;
  }
}

.feature-card .card-modifier {
  max-height: 700px;
  min-height: 680px;
}
@media only screen and (min-width: 1441px) {
  .card .card-modifier {
      min-height: 620px;
  }
}

@media only screen and (max-width: 430px) {
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .section-flex-tiles .grid {
    width:100%!important;
    padding: 0 0!important;
  }
  
  .card .card-modifier.card-padding {
  width:280px;
  min-height: 480px;
  max-height: 530px;
  }

  .typography-feature-card-eyebrow {
    font-size: 17px;
    line-height: 1.2353641176;
    font-weight: 500;
  }

  .typography-card-headline {
    font-size: 24px;
    font-weight: 400;
  }

  .container.banner-card .banner-card-theme-light-1,
  .img-fluid.banner-card-image-right {
    --global-card-border-radius: 0px;
    border-radius: var(--global-card-border-radius);
  }

}

.gallery-caption-content .gallery-caption-highlight {
    display: inline;
    color: var(--text-color-dm);
  }
.gallery-caption-content {
    display: inline;
    color: var(--text-color-muted-dm);
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 500;
  }

@media only screen and (min-width: 431px) and (max-width: 1024px) {
  .card .card-modifier.card-padding {
  width:300px;
  min-height: 500px;
  max-height: 530px;
  }
}

.card .card-modifier {
  background: none;
  border-radius: var(--global-card-border-radius);
  box-sizing: border-box;
  clip-path: inset(1px 1px 1px 1px round var(--global-card-border-radius));
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

.card-viewport-content {
  height: 100%;
}
.feature-card-content .feature-card-copy {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1441px) {
  .feature-card .feature-card-copy {
      padding-bottom: 583px;
  }
}
.feature-card .feature-card-copy {
  padding-bottom: 523px;
}

/* Card image */
.feature-card-content .feature-card-image-container.image-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.feature-card-content .feature-card-image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; 
  height: 100%;
  overflow: hidden;
}

.feature-card-content .feature-card-image-container .feature-card-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card button */
.card-cta-modal-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  border-radius: var(--global-card-border-radius);
  z-index: 2;
  width: 100%;
  height: 100%;
}

figure.overview-consider-fc-apple-intelligence .feature-card-image {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

button.card-cta-modal-button {
  background-color: transparent;
  border: none;
}

a.overlay {
  width: 100%;
  height:100%;
  position: absolute; 
}

.card-cta-modal-button .card-cta-modal-button-icon {
  --scrim-background-color: rgb(51, 51, 54);
  --scrim-hover-background-color: #37373a;
  --scrim-active-background-color: #2f2f32;
  --icon-color: #d6d6d7;
  --icon-interaction-color: rgb(255, 255, 255);
  border-radius: 50%;
  display: flex;
  align-items: center;
  height: 36px;
  width: 36px;
  outline: none;
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: center;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear;
  background-color: var(--scrim-background-color);
  color: var(--icon-color);
}

.card-cta-modal-button .card-cta-modal-button-icon .card-cta-modal-button-small-icon {
  fill: currentColor;
  pointer-events: none;
}
.card-cta-modal-button .card-modal-button-small-icon {
  width: 18px;
  height: 18px;
}


/* Card Nav */

/* Style for navigation buttons container */
.nav-buttons-container {
  --global-navcard-margin-bottom: 15px;
  position: sticky;
  top:100px;
  z-index: 100; /* Ensure it appears on top */
  display: flex;
  gap: 10px;
  margin-bottom: var(--global-navcard-margin-bottom);
  border-radius: var(--global-card-border-radius);
  background-color: var(--ap-lg-button-bg);
  padding: 10px;
  width: 111px;

}

.nav-button-flex-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 10;  /* Ensure buttons stay on top */
}


/* Style for individual navigation buttons */
.nav-button-arrow {
  --cardnav-backgroundcolor: rgba(210,210,215);
  --cardnav-border:none;
  position: relative; 
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--cardnav-backgroundcolor);
  border: var(--cardnav-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 1000;  /* Ensure the button stays on top */
}


.nav-button-arrow:hover {
  --cardnav-backgroundcolor-hover:rgba(223, 223, 227);
  background-color: var(--cardnav-backgroundcolor-hover);
  transition: all 200ms ease;
}

.nav-button-arrow svg {
  --cardnav-arrowcolor: rgba(0, 0, 0, 0.56);
  width: 20px;
  height: 20px;
  fill: var(--cardnav-arrowcolor);
}

.nav-button-arrow.disabled {
  --cardnav-disabled: 0.42;
  pointer-events: none;
  opacity: var(--cardnav-disabled);
}


/* Dynamic modal content containers for gallery items */
.card-modal-trigger.modal-trigger.card-cta-modal-button.toggle-btn {
  margin-right: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

/* Fixed container for content layers */
.fixed-content-container {
  position: relative;
  height: auto;
  width: 100%;
  background-color: var(--global-card-bg-primary);
}



/* Stacking content layers */
.content-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: none; /* Hide inactive content completely */
}

.content-layer.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  display: block; /* Show only the active content */
}


.modal-content-container {
  position: relative;
  padding: var(--global-section-padding);
}

.modal-content-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}


.modal-feature-group {
  padding: 25px 0px;
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* ====== SECTION ====== */
/* ---------- Gallery base stays the same ---------- */
.gallery {
  position: relative;
  isolation: isolate; /* ensure bg stays under content */
}
.gallery .gallery-bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;      /* ← actually clips the scaled child */
  z-index: -1;
}
/* Full-bleed background image layer */
.gallery .gallery-bg-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("https://images.pexels.com/photos/8945859/pexels-photo-8945859.jpeg?_gl=1*a8xxu5*_ga*NTg5MzM3MzMxLjE3NTk4NjM0MDg.*_ga_8JE65Q40S6*czE3NjEzMTQzNjckbzE1JGcxJHQxNzYxMzE1NzcwJGozMyRsMCRoMA..");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Slight scale to avoid edge clipping when blurring */
  transform: scale(1.05);
  will-change: filter, transform;
  filter: blur(0px);
}

/* subtle overlay for readability */
.gallery .gallery-bg-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gallery .gallery-bg-photo { filter: none !important; transform: none !important; }
}

.gallery .scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--responsive-gutter-width);
  position: relative;
}
.gallery .scroll-container::-webkit-scrollbar { display: none; }

.gallery .card-set {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  list-style: none;
  padding: 20px 24px 20px var(--responsive-gutter-width);
  width: max-content;
}

.gallery .scroll-container::before {
  content: "";
  position: absolute;
  left: 0;
  width: 64px; /* 88px - 24px = visible leading offset difference */
  height: 1px; /* invisible spacer that "absorbs" scroll start */
  pointer-events: none;
}

.caption-tile-gallery .scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--responsive-gutter-width); /* left & right */
}

.caption-tile-gallery .scroll-container::-webkit-scrollbar { display: none; }

@media (max-width: 734px) {
  .caption-tile-gallery .scroll-container { scroll-padding-left: 16px; }
}


@media (max-width: 734px) {
  .caption-tile-gallery .card-set { padding: 20px 16px; }
}

/* Snapping items (direct children of the snapping row) */
.caption-tile-gallery .card-set > .card-container {
  flex: 0 0 400px;                    /* narrow width */
  scroll-snap-align: start;           /* ← the important bit */
  scroll-snap-stop: always;           /* optional: stronger snap */
  min-width: 0;
}
.caption-tile-gallery .card-set > .card-container.wide { flex-basis: 696px; }

/* ---------- Tile widths (2:1) ---------- */
.caption-tile-gallery .card-container {
  flex: 0 0 372px;           /* narrow */
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}
.caption-tile-gallery .card-container.wide {
  flex-basis: 696px;         
}

.card {
  background-color: transparent!important;
}


.caption-tile-gallery .card {
  border-radius: 28px;
  display: flex;
  flex-direction: column;
}

/* ---------- Media block: single uniform height for ALL tiles ---------- */
.caption-tile-gallery .media-block {
  --media-h: 452px;          /* <— set the shared image height here */
  block-size: var(--media-h);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 34px;
}

/* Fill the media box with consistent visual height */
.caption-tile-gallery .media-block img,
.caption-tile-gallery .media-block picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;       
  display: block;
  border-radius: 18px;
}

.caption-tile-gallery .media-block.media--contain img,
.caption-tile-gallery .media-block.media--contain picture {
  object-fit: contain;       /* preserves full image, may pillar/letterbox */
}

/* ---------- Caption lives inside the card (below the image) ---------- */
.caption-tile .card-caption-content {
  padding: 16px 6px 0;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  max-width: 480px;
  margin: 0;
}
.caption-tile-gallery .card-container:not(.wide) .card-caption-content {
  max-width: 340px;
}

/* Typography */
.card-caption-heading {
  margin: 0 0 .55em;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-color-dm);
}
.typography-caption-tile,
.caption-tile .card-caption-content p {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-color-dm);
}

.p-hero-intro-paragraph {
  padding: 1rem 1rem 1rem 0px;
}

/* Optional clamp to prevent any single caption from getting too tall */
.caption-tile .card-caption-content h4,
.caption-tile .card-caption-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.caption-tile .card-caption-content h4 { -webkit-line-clamp: 2; }
.caption-tile .card-caption-content p  { -webkit-line-clamp: 4; }

/* ---------- Small screens ---------- */
@media (max-width: 734px) {
  .gallery .card-set { gap: 16px; padding: 16px; }
  .caption-tile-gallery .card-container,
  .caption-tile-gallery .card-container.wide { flex-basis: min(92vw, 520px); }

  /* shrink the shared media height for phones */
  .caption-tile-gallery .media-block { --media-h: 260px; }
}



/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Frequently Asked Questions */

.faq-component {
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
}


.w-layout-grid {
  display: grid;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.faq-list {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  place-items: start stretch;
}


.faq-accordion {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}


.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;

  cursor: pointer;
  padding: 1.25rem 1.5rem 1.25rem 0;
}

.faq-question:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 8px;
}

.faq-icon-wrapper {
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-embed-small {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 50% 50%;
}


.faq-accordion.is-open .icon-embed-small {
  transform: rotate(45deg);
}



.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion.is-open .faq-answer {
  grid-template-rows: 1fr;
}


.faq-answer-inner {
  overflow: hidden;
  padding: 0 1.5rem 1.25rem 0;

  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.faq-accordion.is-open .faq-answer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Text reset */
.faq-answer p {
  margin: 0;
}







/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Footer */
/* Footer Styling */
/* =========================================================
   FOOTER (DESKTOP FIRST, MOBILE ACCORDION BACKUP)
   ========================================================= */

/* Footer base */
#footer-content {
  background-color: var(--global-card-bg-primary);
  color: var(--text-color-lm);
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

#footer-content.light-mode {
  background-color: white;
}

.footer-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Join The Dram Section */
.join-dram {
  text-align: center;
}

.footer-title {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.footer-text {
  font-size: 1rem;
  margin-bottom: 20px;
}

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-btn {
  text-decoration: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  text-align: center;
}

.primary-btn {
  background-color: #cda34f;
  color: #fff;
}

.btn:first-child:active {
  background-color: rgb(232, 232, 237);
}

.secondary-btn {
  background-color: #444;
  color: #fff;
}

/* Divider */
#footer-content hr {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
  margin: 12px 0;
}

/* Links Section (DESKTOP: 4 columns, same as your old layout) */
.links-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer-links {
  flex: 1;
  min-width: 0;
}

/* Details reset so desktop looks like normal columns */
.footer-accordion {
  border: 0;
  padding: 0;
}

.footer-accordion > summary.footer-subtitle {
  font-size: 1.2rem;
  margin-bottom: 10px;
  list-style: none;
  cursor: default;
  display: block;
}

.footer-accordion > summary::-webkit-details-marker {
  display: none;
}

.footer-accordion > summary::after {
  content: none; /* no + / - on desktop */
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 5px;
}

.footer-list a {
  color: var(--text-color-muted-lm);
  text-decoration: none;
}

.footer-list a:hover {
  text-decoration: underline;
}

/* Bottom Section */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.legal-icons {
  font-size: 1.8rem;
  color: #fff;
  margin-right: 10px;
  width: 150px;
  height: auto;
}

.footer-copy {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-color-muted-lm);
}

/* Breadcrumbs */
.breadcrumb a,
.breadcrumb button,
.breadcrumb span[aria-current] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--bc-fg);
  padding: 6px 10px;
  border-radius: var(--bc-radius);
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb a:hover,
.breadcrumb button:hover {
  background: var(--bc-hover);
}

.breadcrumb li {
  position: relative;
  display: flex;
  align-items: center;
}

#breadcrumb .sep {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  background: no-repeat center / contain
    url("/resources/assets/svg/global/footer/breadcrump/footer-breadcrump-separator.svg");
  vertical-align: middle;
}

.breadcrumb .home img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 6px;
}

.breadcrumb span[aria-current="page"] {
  color: var(--bc-muted);
  font-weight: 600;
}

.crumb-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--bc-fg);
}

.crumb-toggle:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  border-radius: var(--bc-radius);
}

.crumb-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.crumb-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
}

.crumb-menu a:hover {
  background: var(--bc-hover);
}

@media (max-width: 720px) {
  .breadcrumb [data-collapse="middle"] {
    display: none;
  }
  .breadcrumb .crumb-collapsed {
    display: inline-flex;
  }
}
@media (min-width: 721px) {
  .breadcrumb .crumb-collapsed {
    display: none;
  }
}

#breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 14px/1.4 system-ui, sans-serif;
}

#breadcrumb a {
  text-decoration: none;
  padding: 0 0 5px 0;
}

#breadcrumb .sep {
  opacity: 0.5;
}

#breadcrumb img.logo {
  height: 20px;
  vertical-align: middle;
}

#breadcrumb .current {
  color: var(--text-color-muted-lm);
  font-weight: 400;
}

/* =========================================================
   MOBILE STRUCTURE
   ========================================================= */
@media only screen and (max-width: 734px) {
  #footer-content {
    padding: 28px 16px;
  }

  .footer-container {
    gap: 16px;
  }

  /* Links become 1 column */
  .links-section {
    display: block;
  }

  .footer-links {
    width: 100%;
  }

  /* Accordion look */
  .footer-accordion {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding: 10px 0;
  }

  .footer-links:last-child .footer-accordion {
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  }

  /* Summary row (tap target) */
  .footer-accordion > summary.footer-subtitle {
    font-size: 1.05rem;
    margin: 0;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-accordion > summary::-webkit-details-marker {
    display: none;
  }

  /* + / – indicator */
  .footer-accordion > summary::after {
    content: "+";
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.7;
  }

  .footer-accordion[open] > summary::after {
    content: "–";
  }

  /* Bigger tap targets for links */
  .footer-list li {
    margin-bottom: 10px;
  }

  .footer-list a {
    display: inline-block;
    padding: 6px 0;
  }

  /* Bottom becomes stacked */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .legal-icons {
    width: 100px;
    height: auto;
    margin-right: 0;
  }

  .footer-copy {
    text-align: left;
  }

  /* Breadcrumb can wrap */
  #breadcrumb {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}




/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* DRAMVIEWER CSS */
.section-wide .section-content {
  margin: 0;
  padding:0;
  width: 100%;
  max-width:100%;
}

.grid-container {
  display: flex;
  flex-direction: column;
  grid-column: span 12;
  margin: 0;
  padding:0;
  width: 100%;
}


.verbiage-wrapper .text-start.twenty-breath {
  padding-left: 20%;
}

@media only screen and (max-width:700px) {
  .verbiage-wrapper .text-start.twenty-breath {
    padding: 10%;
  }
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#searchInput {
  flex: 1;
  padding-right: 30px; /* Space for the clear button */
}



.autocomplete {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  position: absolute;
  min-width: 100%;
  z-index: 1000;
  background: #f8f8f8;
  color: var(--ap-lg-button-icon);
  border-radius: 0px 0px 15px 15px;
  box-shadow: 2px 4px 12px #00000014;

}

.dropdown-content.show {
  max-height: 500px;
  border-radius: 0px 0px 15px 15px;
  transition: all 0.25s ease-in;
  border:1px solid var(--global-section-background-color);
  box-shadow: 2px 4px 12px #00000014;
}



.dropdown-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: all 300ms ease;
}

@media only screen and (max-width: 600px) {
  .dropdown-item {
    font-size: 12px;
  }
}

.dropdown-item:hover,
.dropdown-item.active {
  transition: all 300ms ease;
  padding-left: 5px;
  background-color: inherit;
}

.zero-opacity {
  opacity: 0;
  cursor: default;
}

.no-match {
  color: var(--ap-lg-button-icon);
  text-align: left;
  font-style: italic;
  background: #f8f8f8;
  padding: 10px;
}

/* Whisky Flag of country of origin */
.flag-size {
  --origin-flag-height: 36px;
  --origin-flag-width: 36px;
  min-height: var(--origin-flag-height);
  min-width:var(--origin-flag-width);
  width: var(--origin-flag-width);
  height: var(--origin-flag-height);
  max-width: var(--origin-flag-width);
  max-height: var(--origin-flag-height);
}

.flag-img {
  box-shadow: var(--bs-box-shadow);
}

.flag-is-round {
  border:none;
  background-size: cover;
  border-radius: 50%;
  display: grid;
  position: absolute;
  top: 25px;
  right: 25px;
}

.flag-container {
  display: grid;
  justify-content: center;
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  transform: scale(1.2);
  opacity: 0;
  transition: transform 1s ease-out, opacity 0.2s ease-out;
}

.grid-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-item.bottom {
  min-height: 144px;
  height: 144px;
  max-height: 144px;
}

.large.image-item {
  padding:0!important;
}

.center img {
  width: 100%;
  border-radius: 10px;
  max-height: 450px;
}

/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Modal */
.modal-wrapper {
  padding: var(--global-modal-padding);
}
.productDisplayModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  overflow-y: auto; /* Allow scrolling inside modal */
  opacity: 0;
  visibility: hidden;
  /* Add a delay to the visibility change on close */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}


/* Show modal */
.productDisplayModal.active {
  opacity: 1;
  visibility: visible;
  /* Remove the delay when opening the modal */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}
/* Prevent body scrolling when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Reviews blog
   ========================================================================== */

.reviews-page,
.review-article-page {
  background: var(--global-section-background-color);
  color: var(--color);
}

.reviews-kicker {
  margin: 0 0 12px;
  color: var(--brown-emphasis);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reviews-hero {
  padding-top: clamp(88px, 12vw, 150px);
  padding-bottom: clamp(56px, 9vw, 100px);
  background: var(--bg-light-banner);
}

.reviews-hero__inner {
  max-width: 960px;
}

.reviews-hero h1,
.review-article__intro h1 {
  margin: 0;
  max-width: 880px;
  color: var(--alt-black);
  font-size: clamp(3rem, 8vw, 6.8rem);
  font-weight: 800;
  line-height: 0.95;
}

.reviews-hero p:not(.reviews-kicker),
.review-article__intro p:not(.reviews-kicker) {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--grey-text);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
}

.reviews-index {
  padding-top: var(--global-section-padding);
  padding-bottom: var(--global-section-padding);
}

.reviews-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.reviews-section-heading h2 {
  margin: 0;
  color: var(--alt-black);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
}

.review-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: var(--global-card-bg-secondary);
  border-radius: var(--global-card-border-radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.07);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(0,0,0,0.11);
}

.review-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.review-card__link:focus {
  outline: 3px solid var(--brown-emphasis);
  outline-offset: 4px;
}

.review-card__media {
  aspect-ratio: 16 / 11;
  background: var(--global-card-bg-primary);
  overflow: hidden;
}

.review-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 320ms ease;
}

.review-card:hover .review-card__media img {
  transform: scale(1.035);
}

.review-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
}

.review-card__meta,
.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.review-card__meta span {
  color: var(--green-emphasis);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-card__meta strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--alt-black);
  color: #fff;
  font-size: 0.96rem;
}

.review-card h3 {
  margin: 0;
  color: var(--alt-black);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.08;
}

.review-card p {
  flex: 1;
  margin: 0;
  color: var(--grey-text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.review-card__footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-compare-column-separator);
  color: var(--grey-text);
  font-size: 0.86rem;
  font-weight: 650;
}

.review-card__footer span:last-child {
  color: var(--brown-emphasis);
}

.review-article {
  background: var(--global-section-background-color);
}

.review-article__hero {
  position: relative;
  min-height: min(780px, 92vh);
  display: grid;
  align-items: end;
  background: var(--alt-black);
  color: #fff;
  overflow: hidden;
}

.review-article__media {
  position: absolute;
  inset: 0;
}

.review-article__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.38) 52%, rgba(0,0,0,0.12));
}

.review-article__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.review-article__intro {
  position: relative;
  z-index: 1;
  padding-top: 140px;
  padding-bottom: clamp(48px, 8vw, 92px);
}

.review-article__intro h1,
.review-article__intro p:not(.reviews-kicker) {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.review-back-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.review-back-link:hover {
  color: #fff;
}

.review-score-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 760px;
  margin: 34px 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(16px) saturate(1.1);
}

.review-score-strip div {
  padding: 18px;
  background: rgba(255,255,255,0.12);
}

.review-score-strip dt {
  margin-bottom: 6px;
  color: rgba(255,255,255,0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.review-score-strip dd {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}

.review-bottle-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px;
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: #fff;
  color: var(--alt-black);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(0,0,0,0.24);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.review-bottle-cta:hover,
.review-bottle-cta:focus {
  transform: translateY(-2px);
  background: var(--bg-light-banner);
  color: var(--alt-black);
  box-shadow: 0 20px 42px rgba(0,0,0,0.28);
}

.review-article__content {
  max-width: 1180px;
  padding-top: clamp(56px, 9vw, 100px);
  padding-bottom: clamp(70px, 11vw, 130px);
}

.review-article__layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 760px);
  gap: clamp(34px, 6vw, 88px);
  align-items: start;
}

.review-chapters {
  position: sticky;
  top: 112px;
  padding: 24px 0;
  border-top: 1px solid var(--border-compare-column-separator);
  border-bottom: 1px solid var(--border-compare-column-separator);
}

.review-chapters p {
  margin: 0 0 16px;
  color: var(--brown-emphasis);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.review-chapters nav {
  display: grid;
  gap: 10px;
}

.review-chapters a {
  color: var(--grey-text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.review-chapters a:hover,
.review-chapters a:focus {
  color: var(--green-emphasis);
}

.review-article__body section {
  scroll-margin-top: 120px;
}

.review-article__content p {
  color: var(--color);
  font-size: clamp(1.04rem, 1.7vw, 1.22rem);
  line-height: 1.78;
}

.review-article__content .review-lede {
  color: var(--alt-black);
  font-size: clamp(1.25rem, 2.5vw, 1.72rem);
  font-weight: 650;
  line-height: 1.45;
}

.review-article__content h2 {
  margin: 52px 0 14px;
  color: var(--alt-black);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
}

.review-tasting-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 18px;
}

.review-image-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 8px;
}

.review-image-duo figure {
  margin: 0;
  overflow: hidden;
  background: var(--global-card-bg-secondary);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.055);
}

.review-image-duo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: var(--global-card-bg-primary);
}

.review-image-duo figcaption {
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--grey-text);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

.review-tasting-grid div {
  padding: 22px;
  background: var(--global-card-bg-secondary);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.055);
}

.review-tasting-grid h3 {
  margin: 0 0 10px;
  color: var(--green-emphasis);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.review-tasting-grid p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

.review-verdict {
  margin-top: 58px;
  padding: clamp(28px, 5vw, 48px);
  background: var(--bg-light-banner);
  border-left: 6px solid var(--green-emphasis);
  border-radius: 0 var(--global-card-border-radius) var(--global-card-border-radius) 0;
}

.review-verdict h2 {
  margin-top: 0;
}

@media (max-width: 980px) {
  .review-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-article__layout {
    grid-template-columns: 1fr;
  }

  .review-chapters {
    position: static;
    padding: 20px;
    background: var(--global-card-bg-secondary);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.055);
  }

  .review-chapters nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .reviews-section-heading {
    display: block;
  }

  .review-card-grid {
    grid-template-columns: 1fr;
  }

  .review-card__body {
    padding: 24px;
  }

  .review-article__hero {
    min-height: auto;
  }

  .review-article__media::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.82));
  }

  .review-score-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-chapters nav,
  .review-image-duo,
  .review-tasting-grid {
    grid-template-columns: 1fr;
  }
}

/* Modal Content */
.productDisplayModal .modal-content
 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: var(--global-modal-border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 1080px;
  max-height: 80%;
  overflow-y: auto;
  margin-top:50px;
}

.productDisplayModal .modal-content::-webkit-scrollbar {
  display: none!important;
}

/* Close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}

/* Background blur effect */
.blur-background {
  filter: blur(5px);
}

/* Zoom and Close Button Styling */
.form-step .zoom-button,
.form-step .close-button {
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(232, 232, 237);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, background-color 0.3s;
}

.form-step .zoom-button {
  background-color: white;
}

/* Button Hover */
.form-step .zoom-button:hover,
.form-step .close-button:hover {
  background-color: rgb(200, 200, 200);
  transform: scale(1.1);
}

/* Magnifier Icon */
.form-step .zoom-button svg,
.form-step .close-button svg {
  width: 50%;
  height: 50%;
  stroke: black;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Modal Content Wrapper */
.modal-feature-content-wrapper.modal-feature-content-wrapper-colored-theme {
  background-color: var(--gridItem-color-bg);
  color: var(--gridItem-color-font-color);
}

.modal-feature-content-wrapper {
  padding: var(--global-modal-padding);
  border-radius: var(--global-modal-border-radius);
}

.modal-content .sticky-wrapper {
  position: sticky;
  top: 1px;
  right: 10px;
  align-items: flex-end;
  justify-content: right;
  display: flex;
  padding-top: 65px;
  box-sizing: border-box;
}

.modal-feature-content-wrapper.feature-group-image-wrapper {
  flex-direction: column;
  padding-bottom: 0px;
  display: flex;
}

.modal-feature-content-image {
  width:60%;
  margin: 0 auto;
  
}

@media only screen and (max-width:594px) {
  .modal-feature-content-wrapper {

    --global-modal-padding: 32px 32px;
    padding: var(--global-modal-padding);
  }
  .modal-feature-group p,
  .modal-feature-group li {
      font-size: 0.8em;
  }
  .modal-feature-group h2 {
      font-size: 1.5em;
  }
}

.modal-image-wrapper {
  padding: 55px 5px;
}

.modal-image {
  width: 100%;
}

.modal-image img {
  border-radius: 35px;
  width:100%;
}

.mg-top-l {
  margin-top: 200px;
}

/* Inside process page: calmer editorial rhythm for step content */
#target-class.fixed-content-container {
  padding: clamp(32px, 5vw, 80px) clamp(16px, 4vw, 56px) !important;
  background: var(--global-card-bg-primary);
}

#target-class .modal-content-container {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

#target-class .modal-content-wrapper {
  max-width: 1040px;
}

#target-class .modal-content {
  display: block;
}

#target-class .content-layer > .typography-modal-eyebrow {
  margin: 0 0 12px;
  color: var(--text-color-muted-lm);
}

#target-class .content-layer > .typography-section-headline {
  max-width: 760px;
  margin-bottom: clamp(28px, 5vw, 56px);
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
}

#target-class .content-layer section {
  margin: clamp(32px, 5vw, 72px) 0;
}

#target-class .content-layer > section + .typography-modal-eyebrow {
  margin-top: clamp(48px, 7vw, 96px);
}

#target-class .content-layer > section + .typography-modal-eyebrow,
#target-class .content-layer > section + .typography-modal-eyebrow + .typography-section-headline {
  max-width: 760px;
}

#target-class .banner-card,
#target-class .big-promotion-wrapper,
#target-class .modal-column-card {
  border-radius: 8px;
  overflow: hidden;
}

#target-class .banner-card .row,
#target-class .modal-column-card .row {
  row-gap: 0;
}

#target-class .banner-card .row.align-items-center {
  min-height: 0;
}

#target-class .banner-card .p-5,
#target-class .modal-column-card .p-5,
#target-class .big-promotion-wrapper.p-5,
#target-class .row.p-5 {
  padding: clamp(24px, 4vw, 40px) !important;
}

#target-class .text-content > div,
#target-class .col-md-6.p-5 {
  max-width: 720px;
}

#target-class p.typography-modal-paragraph,
#target-class li.typography-modal-paragraph,
#target-class .typography-modal-paragraph p,
#target-class .modal-list-item span {
  max-width: 64ch;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.64;
  letter-spacing: 0;
}

#target-class h3.typography-modal-paragraph {
  max-width: 66ch;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.55;
  letter-spacing: 0;
}

#target-class .typography-modal-paragraph.sub-section,
#target-class p.sub-section {
  margin: 12px 0 28px;
}

#target-class .typography-big-promotion-eyebrow {
  margin-top: clamp(24px, 4vw, 44px);
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#target-class .typography-big-promotion-header {
  margin-bottom: 10px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1;
}

#target-class .big-promotion-wrapper > .typography-big-promotion-eyebrow:first-child {
  margin-top: 0;
}

#target-class .big-promotion-wrapper > .typography-modal-paragraph {
  padding-bottom: clamp(8px, 2vw, 18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#target-class .big-promotion-wrapper > .typography-modal-paragraph:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#target-class .modal-image-wrapper {
  padding: clamp(24px, 4vw, 44px) 0;
}

#target-class .image-content {
  max-height: clamp(220px, 34vw, 380px);
}

#target-class .col-md-6.global-border,
#target-class .image-content,
#target-class .modal-image {
  overflow: hidden;
}

#target-class .modal-image img,
#target-class .banner-card-image {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

#target-class .banner-card-image {
  max-height: clamp(220px, 30vw, 340px);
}

#target-class .col-md-6.global-border .banner-card-image {
  height: clamp(240px, 28vw, 360px);
}

#target-class .image-content .banner-card-image {
  height: clamp(210px, 26vw, 320px);
}

#target-class .modal-image img {
  aspect-ratio: 16 / 9;
  max-height: clamp(220px, 34vw, 360px);
}

#target-class .modal-list-item {
  margin: 18px 0;
  padding-left: 2px;
}

#target-class .modal-list-item b {
  font-weight: 650;
}

#target-class .inside-step-block {
  margin: 0;
}

#target-class .inside-step-header {
  max-width: 760px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

#target-class .inside-step-eyebrow,
#target-class .inside-topic-eyebrow {
  margin: 0 0 12px;
  color: var(--text-color-muted-lm);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#target-class .inside-step-title {
  margin: 0;
  max-width: 760px;
  color: var(--green-emphasis);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

#target-class .inside-step-card,
#target-class .inside-topic-list {
  border-radius: 8px;
  background: var(--global-card-bg-primary);
  overflow: hidden;
}

#target-class .inside-step-card {
  padding: clamp(24px, 4vw, 40px);
}

#target-class .inside-step-card--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

#target-class .inside-step-copy {
  max-width: 64ch;
}

#target-class .inside-step-copy p,
#target-class .inside-topic p {
  margin: 0 0 18px;
  max-width: 64ch;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.64;
  letter-spacing: 0;
}

#target-class .inside-step-copy p:last-child,
#target-class .inside-topic p:last-child {
  margin-bottom: 0;
}

#target-class .inside-step-media {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

#target-class .inside-step-media img {
  display: block;
  width: 100%;
  height: clamp(220px, 28vw, 360px);
  object-fit: cover;
}

#target-class .inside-topic-list {
  display: grid;
}

#target-class .inside-topic {
  padding: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#target-class .inside-topic:last-child {
  border-bottom: 0;
}

#target-class .inside-topic-title {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

@media (min-width: 735px) and (max-width: 1024px) {
  .section-consider .section-content-responsive {
    width: min(92vw, 900px);
  }

  .section-consider .section-header {
    padding-bottom: 44px;
  }

  .section-consider .gallery .item-container,
  .section-consider .gallery .card-set {
    --gallery-column-gap: 18px;
  }

  .section-consider .card .card-modifier.fixed-width {
    width: min(42vw, 340px);
  }

  .section-consider .feature-card .card-modifier,
  .section-consider .card .card-modifier {
    min-height: 500px;
    max-height: 560px;
  }

  .section-consider .feature-card .feature-card-copy {
    padding-bottom: 390px;
  }

  #target-class.fixed-content-container {
    padding: 40px 24px !important;
  }

  #target-class .modal-content-container {
    padding: 32px 24px;
  }

  #target-class .content-layer > .typography-section-headline,
  #target-class .inside-step-title {
    font-size: clamp(32px, 5vw, 42px);
  }

  #target-class .col-md-6.global-border .banner-card-image,
  #target-class .inside-step-media img {
    height: clamp(220px, 28vw, 300px);
  }

  #target-class .image-content .banner-card-image,
  #target-class .modal-image img {
    max-height: 300px;
  }

  #target-class .inside-step-card--split {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    gap: 28px;
  }
}

@media (max-width: 734px) {
  .section-consider {
    padding-top: 28px;
  }

  .section-consider .section-content-responsive {
    width: min(92vw, 480px);
  }

  .section-consider .section-header {
    padding-bottom: 28px;
  }

  .section-consider .gallery.gallery-align-start .item-container {
    padding: 0 16px;
  }

  .section-consider .gallery .card-set {
    --gallery-column-gap: 14px;
  }

  .section-consider .card .card-modifier.fixed-width,
  .section-consider .card .card-modifier.card-padding {
    width: min(78vw, 300px);
    min-height: 420px;
    max-height: 460px;
  }

  .section-consider .feature-card .feature-card-copy {
    padding-bottom: 310px;
  }

  .section-consider .typography-card-headline {
    font-size: 22px;
    line-height: 1.15;
  }

  #target-class.fixed-content-container {
    padding: 22px 12px 36px !important;
  }

  #target-class .modal-content-container {
    padding: 18px 12px;
    background: rgba(255, 255, 255, 0.82);
  }

  #target-class .content-layer > .typography-section-headline {
    font-size: 30px;
    margin-bottom: 26px;
  }

  #target-class .content-layer section {
    margin: 26px 0;
  }

  #target-class .content-layer > section + .typography-modal-eyebrow {
    margin-top: 44px;
  }

  #target-class .nav-buttons-container {
    position: static;
    margin-left: auto;
    margin-bottom: 18px;
  }

  #target-class p.typography-modal-paragraph,
  #target-class li.typography-modal-paragraph,
  #target-class .typography-modal-paragraph p,
  #target-class .modal-list-item span {
    font-size: 15px;
    line-height: 1.62;
  }

  #target-class .banner-card-image,
  #target-class .col-md-6.global-border .banner-card-image,
  #target-class .image-content .banner-card-image {
    height: auto;
    max-height: 190px;
  }

  #target-class .modal-image img {
    max-height: 190px;
  }

  #target-class .inside-step-card--split {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #target-class .inside-step-title {
    font-size: 30px;
  }

  #target-class .inside-step-copy p,
  #target-class .inside-topic p {
    font-size: 15px;
    line-height: 1.62;
  }

  #target-class .inside-step-media img {
    height: auto;
    max-height: 190px;
  }

  #target-class .inside-step-card,
  #target-class .inside-topic {
    padding: 20px 16px;
  }
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* GALLERY MODALS */
/* Base hidden state */
.wd-modal {
  position: fixed;
  inset: 0;
  z-index: 1060; /* above navbar */
  display: none;
}

/* Visible */
.wd-modal.show { display: block; }

/* Backdrop */
.wd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}

/* Dialog */
.wd-modal-dialog {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}


/* Close button */
.wd-modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #2c2c2e; background: #1c1c1e; color: #eaeaea;
  cursor: pointer;
}
.wd-modal-close:hover { background:#2a2a2d; }

.modal-open-button-container {
}

button.modal-open {
  width: 36px; height: 36px; border-radius: 50%;
  background: #1c1c1e; color: #eaeaea;
  cursor: pointer;
  border: none;
  width: var(--button-size);
  height: var(--button-size);
}

button.btn-modal-primary {
  background-color: rgb(232, 232, 237);
}

.btn-modal-primary .btn-modal-content-primary {
  color: var(--ap-lg-button-icon);
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Dramfinder multi step form */
/* Main Layout */
.multi-step-form-wrapper {
  display: flex;
  max-width: 1000px;
  margin: auto;
  background-color: white;
  border-radius: var(--global-card-border-radius);
  flex-direction: row;
  min-height: 700px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.multi-step-form-wrapper .form-container .buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 0 0; /* spacing from the form content */
}


/* Sidebar */
.sidebar {
  width: 25%;
  padding: 20px;
  background-color: #f7f7f7;
}

@media only screen and (min-width:1000px) {
  .sidebar {
    padding: 20px;
    border-radius: 0px 25px 25px 0px;
  }
}

@media only screen and (max-width:999px) {
  .multi-step-form-wrapper {
    padding: 20px;
    border-radius: 25px 0px 25px 0px;
    flex-direction: column!important;
  }
}

.sidebar h3 {
  margin-bottom: 10px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.step-item {
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: default;
  background-color: #e0e0e0;
}

.step-item.completed {
  background-color: #4caf50;
  color: white;
}

.step-item.active {
  background-color: #ff9800;
  color: white;
}

/* Flexbox container */
.form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Progress Bar */
.progress-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 8px;
  gap: 8px; /* space between segments */
  margin-bottom: 20px;
}

.progress-step {
  position: relative;
  --progress-next: #e0e0e0;
  flex: 1;
  background-color: var(--progress-next); /* gray background */
  border-radius: 4px;
  overflow: hidden; /* ensure fill stays inside */
}


.fill-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%; /* starts empty */
  background-color: var(--progress-completed, rgb(0, 158, 96)); /* green fill */
  transition: width 0.4s ease-in-out;
  border-radius: 4px;
}

/* When completed, animate fill from left to right */
.progress-step.completed .fill-bar {
  width: 100%;
}

.progress-step .checkmark {
  display: none;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
}

.progress-step.completed .checkmark {
  display: block;
}

.progress-step.active {
  --progress-active: orange;
  background-color: var(--progress-active);
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* Form Steps */
.multi-step-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}

.form-step {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: center;
}

.form-step.active {
  display: flex;
}

.form-step .form-group #age-warning {
  padding: 10px;
  font-size: 0.9em;
  margin-top: 4px;
  min-height: 1.2em; /* reserve vertical space */
  background-color: var(--bg-ng-caption);
  color: var(--text-ng-caption);
  border-radius: 8px;
}

#age-warning {
  visibility: hidden; /* hide but keep space */
  transition: visibility 0.3s ease;
}

#age-warning.visible {
  visibility: visible;
}


/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 300px;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}


/* Radio button options style in multi-form-stepper */

@media only screen and (min-width: 765px) {
  .option-selector {
    min-width: 600px;
  }
}

.option-selector {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.option-card {
  flex: 1;
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
  transition: 0.3s all ease;
}

.option-card:hover {
  transform: translateY(-2px);
}

.option-card input[type="radio"] {
  display: none;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 120px;
  justify-content: space-between;
  border: 2px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Duotone parts */
.card-top {
  background-color: #f5f5f5;
  color: #333;
  padding: 20px;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

.card-bottom {
  background-color: #dedede;
  color: #555;
  padding: 14px;
  font-size: 14px;
  text-align: center;
}

/* Selected style */
.option-card input[type="radio"]:checked + .card-content {
  transition: border-color 0.3s ease;
  border-color: var(--green-emphasis);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
}

.option-card input[type="radio"]:checked + .card-content .card-top {
  background-color: var(--green-emphasis);
  transition: background-color 0.3s ease;
  color: white;
}

.option-card input[type="radio"]:checked + .card-content .card-bottom {
  background-color: white;
  transition: background-color 0.3s ease;
  color: #333;
}

/* Taste types selector */
.taste-item-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}

.taste-item {
  padding: 12px 16px;
  text-align: center;
  background: #f4f4f4;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.taste-item:hover {
  background: #eaeaea;
}

.taste-item.selected {
  background: #f7f7f7;
  border: 2px solid var(--green-emphasis);
  color: black;
  font-weight: bold;
}

.taste-item.disabled:not(.selected) {
  opacity: 0.5;
  pointer-events: none;
}


/* Multi-step buttons */

.multi-step-form .buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  bottom: 20px;
  padding: 10px;
}
.inactive {
  cursor: not-allowed;  /* Show not-allowed cursor */
  opacity: 0.5;  /* Make it semi-transparent */
}

.inactive:hover {
  transform: none;
  opacity: 0.5;
  background-color: rgb(232, 232, 237); /* Light gray button background */
}


/* Start Button - same styling as next/prev buttons */
.start-button {
  background-color: rgb(232, 232, 237); /* Light gray button background */
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  color: var(--ap-lg-button-icon);
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
}

.start-button:hover {
  background-color: rgb(200, 200, 200);
}

/* Hide the wizard initially */
.multi-step-form-container {
  display: none;
}


.background-container {
  background-image: url("/resources/images/dramfinder/background/dramfinder-greenleafs-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center the start screen */
.start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  min-width: 50%;
  height: auto;
  padding: 40px;
}

/* Blur effect for the start screen */
.section-blur {
  background: rgba(244, 243, 242, 0.6); /* Light transparent background */
  backdrop-filter: blur(5px);
  border-radius: var(--global-card-border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

/* Smooth fade-in effect for wizard */
.multi-step-form-container {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Smooth fade-out and hide start screen */
.hide-start-screen {
  display: none!important;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  min-width: 50%;
  height: auto;
  padding: 40px;
}

/* Disabled (inactive) button styling */
.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.taste-sliders-container {
  margin: 20px;
  padding: 15px;
  border-top: 1px solid #ddd;
}

.taste-slider-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  background-color: #f4f4f4;
  border-radius: 10px;
  padding: 10px 15px;
}

.taste-slider-block label {
  font-weight: 500;
  font-size: 16px;
  color: #333;
  min-width: 90px;
  flex-shrink: 0;
}

.taste-slider-block input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: #eee;
  outline: none;
  transition: background 0.3s;
}

.taste-slider-block input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--green-emphasis);
  cursor: pointer;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--green-emphasis);
  transition: background 0.3s, box-shadow 0.3s;
}

.taste-slider-block input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--green-emphasis);
  cursor: pointer;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--green-emphasis);
}

.taste-slider-block .rating-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-emphasis);
  min-width: 24px;
  text-align: right;
}

.input-with-unit {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}

.input-with-unit input {
  width: 100%;
  height: 40px;
  padding-right: 60px; /* room for 'years' */
  padding-left: 12px;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.input-with-unit .unit {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  pointer-events: none;
}


#whisky-results table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  text-align: left;
}

#whisky-results .whisky-name-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#whisky-results .whisky-link {
  visibility: hidden;
  text-decoration: none;
  font-size: 1.2em;
  color: #0077cc;
  transition: opacity 0.5s ease;
}

#whisky-results .whisky-row:hover .whisky-link {
  visibility: visible;
}

#whisky-results .whisky-link:hover {
  text-decoration: underline;
}


#whisky-results .whisky-table-head th.whisky-th {
  background-color: #f0f0f0;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: var(--table-default-fs);
  border-bottom: 2px solid #ccc;
}

#whisky-results .whisky-table-body tr.whisky-row {
  background-color: #f5f5f5;
  font-size: var(--table-default-fs);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
}

#whisky-results .whisky-table-body tr.whisky-row:nth-child(odd) {
  background-color: white;
}

#whisky-results .whisky-table-body tr.whisky-row:hover {
  background-color: #d6d9dc;
}

#whisky-results .whisky-td {
  font-size: var(--table-default-fs);
  padding: 14px 16px;
  border-bottom: none;
  vertical-align: middle;
}

#whisky-results .number-col {
  text-align: right;
  font-feature-settings: "tnum";
}

#whisky-results .probability-col {
  text-align: right;
  font-feature-settings: "tnum";
}


/* Home image format rendering */
@media only screen and (min-width: 1000px){
  .grid-item .tile .tile-content .image-wrapper .dramfinderpro-promo-v0725 {
  max-width: 100%;
  }
  .grid-item.half-width {
    height: 720px;
  }
}
@media only screen and (min-width: 1551px) {
  .section-flex-tiles .grid {
    padding: 0px 240px;
  }
  .grid-item.half-width {
    height: 1200px;
  }
}


@media only screen and (max-width: 999px) {
  .grid-item .tile .tile-content .image-wrapper .dramfinderpro-promo-v0725 {
  max-width: 100%;

  }

   .grid-item.half-width {
    height: 650px;
  }
}



/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Homepage Modules */
.main-body{
  filter: none;
  transition: filter 400ms ease;
  will-change: filter;
}

.main .inside-main-unit .module-content {
  width: 100%;
}

/* Optional: set a consistent height */
.inside-main-unit .module-content {
  height: 950px;
  max-height: 950px;
}

.inside-main-unit .module-content .module-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--global-card-bg-primary);
  overflow: hidden;
}

.module-content .module-wrapper a.module-link {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    text-decoration: none;
}


.module-verbiage-wrapper {
  text-align: center;
  flex-shrink: 0;
  z-index: 2;
  padding-top:45px;
}

.subhead {
  font-size: 28px;
}

/* Now a relative media container */
.module-media-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9; /* Keeps video nicely framed */
  overflow: hidden;
  z-index: 1;
}

.module-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: none;
}

.module-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: translateZ(0) scale(1.01); /* slight overscale */
  will-change: transform;
}

/* Responsive adjustment */
@media only screen and (max-width: 768px) {
  .module-wrapper {
    gap: 24px;
    padding: 32px 0;
  }

  .subhead {
    font-size: 22px;
  }

  .module-media-wrapper {
    aspect-ratio: 4 / 3;
  }
}

@media only screen and (max-width: 1551px) {
  .module-video {
    height: 100%;
  }
}

.module-content .module-cta-links,
.module-cta-links {
  position: relative;
  z-index: 4;
  text-decoration: none;
  display: inline-block;
  margin: 24px 0px;
}

.module-content .module-cta-links .button,
.module-cta-links .button
 {
  text-decoration: none;
}



.module-content .module-cta-links .cta-button,
.module-cta-links .cta-button {
  background-color: var(--green-emphasis);
  color: white;
  border: 1px solid transparent;
  border-radius: 40px;
  padding: 15px 20px;
  line-height: 1.17;
  font-weight: 400;
  transition: all ease-in-out .3s;
}

.cta-button-slim,
.cta-button.cta-button-slim {
  background-color: transparent;
  color: var(--text-color-lm);
  border: none;
}


.module-content .module-cta-links .cta-button:hover,
.module-cta-links .cta-button:hover {
  background-color: transparent;
  color: var(--green-emphasis);
  border: 1px solid var(--green-emphasis);
  border-radius: 40px;
  padding: 15px 20px;
  line-height: 1.17;
  font-weight: 400;
  transition: all ease-in-out .3s;
}

.cta-button-slim:hover,
.cta-button.cta-button-slim:hover {
  background-color: transparent;
  color: var(--text-color-lm);
  border: none;  
}




/* Cookie consent notification */
.wrapper {
  position: fixed;
  bottom: 50px;
  right: -370px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}
.wrapper.show {
  right: 20px;
}
.wrapper header {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
header i {
  color: var(--green-emphasis);
  font-size: 32px;
}
header h2 {
  color: var(--green-emphasis);
  font-weight: 500;
}
.wrapper .data {
  margin-top: 16px;
}
.wrapper .data p {
  color: #333;
  font-size: 16px;
}
.data p a {
  color: var(--green-emphasis);
  text-decoration: none;
}
.data p a:hover {
  text-decoration: underline;
}
.wrapper .buttons {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buttons .button {
  border: none;
  color: #fff;
  padding: 8px 0;
  border-radius: 4px;
  background: var(--green-emphasis);
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
  background-color: var(--green-emphasis);
}
#declineBtn {
  border: 2px solid var(--green-emphasis);
  background-color: #fff;
  color: var(--green-emphasis);
}
#declineBtn:hover {
  background-color: var(--green-emphasis);
  color: #fff;
}

@media only screen and (min-width: 769px) {
  .inside-main-unit .module-content {
    height: 950px;
    max-height: 950px;
  }
}

@media only screen and (max-width: 768px) {
  .inside-main-unit .module-content {
    height: auto;
    max-height: none;
  }
}

/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Gallery styles - gallery heros */
/* Scope variables to this component only */
.wd-gallery-scope {
  --bg: var(--global-card-bg-primary);
  --fg: #eaeaea;
  --muted: #b8b8b8;
  --card: #111315;
  --accent: #f5f5f5;
  --gap: clamp(8px, 1.5vw, 14px);
  --card-w: clamp(550px, 90vw, 1070px);
  --card-h: clamp(220px,50vw, 620px);
  --radius: 14px;
}

/* Box sizing ONLY inside the gallery */
.wd-gallery-scope,
.wd-gallery-scope * { box-sizing: border-box; }

/* Root wrapper for the gallery */
.wd-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: white;
  color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header (scoped) */
.wd-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: 48px 40px 20px;
}
.wd-title {
  color: var(--color); margin: 0;
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 600; letter-spacing: -0.02em;
}
.wd-hint { color: var(--color); font-size: 14px; font-weight: 500; }

/* Gallery shell */
.wd-gallery { position: relative; }

/* Track (hidden scrollbar, no gradient edges) */
.wd-track {
  display: flex; gap: var(--gap); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 24px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wd-track::-webkit-scrollbar { display: none; }

/* Slides */
.wd-slide {
  position: relative; flex: 0 0 var(--card-w); height: var(--card-h);
  border-radius: var(--radius); overflow: hidden; background: var(--card);
  scroll-snap-align: center;
  transform: scale(var(--s, 0.92));
  filter: grayscale(var(--g, 0.4)) brightness(var(--b, 1.05)) contrast(var(--c, 0.85));
  transition: transform 0.35s ease, filter 0.35s ease;
}
.wd-media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: saturate(1.05); transform: scale(1);
  transition: transform 0.5s ease, filter 0.5s ease;
}
.wd-slide::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -80px 120px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* info row (label + CTA) */
.wd-info {
  position: absolute; left: 40px; right: 40px; bottom: 40px;
  display: flex; justify-content: space-between; align-items: center; z-index: 2;
}

@media only screen and (max-width: 1060px) {
  .wd-info-mobile {
    flex-direction: column-reverse;
    text-align: center;
    padding: 9px;
    right: 0px;
    left: 0px;
  }
  .m-hidden {
    display: none;
    visibility: hidden;
  }
}

/* Hide by default: label, description, button.
   GSAP will reveal them when the slide becomes .is-active */
.wd-slide .wd-label,
.wd-slide .wd-label-description,
.wd-slide .wd-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.wd-slide .wd-cta.wd-cta-m {
  font-size: clamp(0.5rem, calc(6vw + 1rem), 1rem)!important;
  padding: min(2.5%, 10px) min(5%, 20px)!important;
}

/* Only active slide’s content is visible/clickable */
.wd-slide.is-active .wd-label,
.wd-slide.is-active .wd-label-description,
.wd-slide.is-active .wd-cta {
  visibility: visible;
}

.wd-slide:not(.is-active) .wd-cta { pointer-events: none; }
.wd-slide.is-active .wd-cta       { pointer-events: auto; }

/* Make sure no competing CSS transitions cause offsets */
.wd-info .wd-label,
.wd-info .wd-label-description,
.wd-info .wd-cta {
  transition: none !important;
}

.wd-label {
  font-weight: 300;
  font-size: clamp(1rem, 15vw, 2rem);
  opacity: 0.95;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

.wd-label-description {
  font-weight:500;
  font-size: clamp(.8rem, 11vw, 1.1rem);
  opacity: 1;
  color:white;
  margin: auto 10px;
  vertical-align: middle;
}

/* CTA button */
.wd-cta {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.25s ease, border 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.wd-cta.buy-btn {
  margin-top: min(15px, 2vh);
}
.wd-cta:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.wd-cta:active { transform: scale(0.97); }

/* Control panel (prev / dots / next) */
.wd-control-row {
  display: flex; justify-content: center; margin: 10px 0 24px; z-index: 1500; }
  
.wd-control-panel {
  display: flex; align-items: center; gap: 10px;
  background: #1c1c1e; border: 1px solid #2c2c2e; border-radius: 999px;
  padding: 6px 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* start hidden; GSAP will reveal on scroll */
/* Make the control row stick to viewport bottom while the gallery is in view */
.wd-control-row {
  position: sticky;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10;
  /* keep your existing layout */
  display:flex; 
  justify-content:center; 
  margin: 10px 0 24px;
  /* ensure clicks go to the panel even if row spans full width */
  pointer-events: none;
}


/* The pill itself handles interactions; keep your current styles */
.wd-control-panel{
  pointer-events: auto;
  /* start hidden; GSAP will reveal on scroll (you already added this earlier) */
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce){
  .wd-control-panel{ opacity:1 !important; transform:none !important; }
}


/* respect reduced motion: just show it */
@media (prefers-reduced-motion: reduce) {
  .wd-control-panel {
    opacity: 1 !important;
    transform: none !important;
  }
}


.wd-btn {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid #2c2c2e; background: #2a2a2d; color: #f5f5f7;
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.2s ease;
}
.wd-btn:hover { background: #3a3a3d; }
.wd-btn:active { transform: scale(0.98); }
.wd-btn[disabled] { opacity: 0.45; pointer-events: none; }

.wd-dots { display: flex; gap: 10px; align-items: center; }
.wd-dot {
  width: 6px; height: 6px; border-radius: 10px; background: #555;
  transition: width 0.25s ease, background 0.25s ease;
}
.wd-dot.wd-active { width: 20px; background: #f0f0f0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wd-slide, .wd-media { transition: none; }
}

/* ===== Modal (smooth + scrollable panel) ===== */

/* Container is always display:block so close can animate */
.wd-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: block;
  visibility: hidden;
  pointer-events: none;
}

/* Visible/open OR closing (keep visible during close) */
.wd-modal.show,
.wd-modal.is-closing {
  visibility: visible;
}

/* Pointer events only when open */
.wd-modal.show {
  pointer-events: auto;
}

/* Backdrop fade */
.wd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 300ms ease;
}
.wd-modal.show .wd-modal-backdrop { opacity: 1; }
.wd-modal.is-closing .wd-modal-backdrop { opacity: 0; }

/* Dialog centers the panel; allow overflow so close btn isn't clipped */
.wd-modal-dialog {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Panel: scrollable content area */
.wd-modal-content{
  position: relative;
  width: min(92vw, 720px);
  border-radius: 16px;
  background: #111315;
  color: #eaeaea;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);

  /* scrolling + transitions you already had */
  max-height: 80vh;
  overflow: auto;

  /* open/close animations (keep what you had) */
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 320ms cubic-bezier(.22,.61,.36,1),
    transform 320ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.wd-modal.show .wd-modal-content { opacity:1; transform:translateY(0) scale(1); }
.wd-modal.is-closing .wd-modal-content { opacity:0; transform:translateY(12px) scale(0.985); }

/* Body gets the padding instead of the panel */
.wd-modal-body{
  padding: clamp(16px, 3vw, 24px);
}

.wd-modal-titlebar{
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--bg-light-dm);
  color: var(--text-color-muted-dm);
  padding: 20px 16px;      
  border-bottom: 1px solid var(--text-color-muted-dm);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, box-shadow .25s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  contain: paint;
}

/* Visible state */
.wd-modal-titlebar.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Subtle shadow when content scrolled */
.wd-modal-content.scrolled .wd-modal-titlebar.is-visible{
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Spacer reserves space when bar is visible (avoids jumps) */
.wd-modal-titlebar-spacer{
  height: 0;
  transition: height .28s ease;
}
.wd-modal-content.tb-visible .wd-modal-titlebar-spacer{
  height: var(--tb-h, 0px);
}


/* Close button (unchanged) */
.wd-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #3a3a3c;
  background: #1c1c1e; color: #f5f5f7;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: background .2s ease, transform .15s ease, color .2s ease, border-color .2s ease;
}
.wd-modal-close:hover { background:#2a2a2d; border-color:#525255; color:#fff; }
.wd-modal-close:active { transform: scale(.96); }
.wd-modal-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* Prevent page scroll while modal open */
body.modal-open {
  overflow: hidden;
} /* NEW */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wd-modal-backdrop, .wd-modal-content { transition: none; }
  .wd-modal-content { opacity: 1; transform: none; }
}

/* Pause button state */
.wd-btn.wd-pause.is-paused {
  background: #232326;
  border-color: #3a3a3d;
}

/* Icon swap for pause/play */
.wd-btn.wd-pause .wd-ico-pause { display: block; }
.wd-btn.wd-pause .wd-ico-play  { display: none;  }
.wd-btn.wd-pause.is-paused .wd-ico-pause { display: none; }
.wd-btn.wd-pause.is-paused .wd-ico-play  { display: block; }

/* Icons inherit button color */
.wd-btn.wd-pause svg {
  display: block;
  stroke: currentColor;
  fill: currentColor;
}

.icon-row {
    --tile-size: 32px;
    --tile-radius: 8px;
    --tile-bg: var(--bg-light-dm);
    --tile-border: var(--border-dm);    
    --icon-color: #6b7280;     
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: flex-start; 
    flex-wrap: wrap;
    padding: 8px;       
    margin:8px;
    background-color:var(--tile-bg);
    border-radius: 11px; 
    width: fit-content;      
  }

  .icon-tile {
    width: var(--tile-size);
    aspect-ratio: 1;            /* keeps perfect square */
    border-radius: var(--tile-radius);
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    display: flex;              /* center the SVG */
    align-items: center;
    justify-content: center;
    margin-right: 8px;
  }

.icon-tile-description {
  font-size: clamp(0.8em, 10px, 0.9em);
}

  .whisky-stats .icon-tile#nose {
    background-color: #e4d188;
  }

  .icon-svg {
    width: 48%;
    height: 48%;
    display: block;
    color: var(--icon-color);
  }

  /* Optional: dark mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --tile-bg: #111214;
      --tile-border: #24262a;
      --icon-color: #cbd5e1;
    }
    .icon-tile { box-shadow: none; }
  }

.section-shelf {
  margin: 100px; /* outer spacing */
}

.shelf-content {
  background: var(--global-card-bg-primary);
  border-radius: 25px;
  --section-h: clamp(300px, 60vh, 700px); /* tweak as you like */
  height: var(--section-h);

  /* Center the image */
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* keep everything neatly clipped inside the rounded box */
}

.mediaCardImage {
  /* Image styling */
  margin: 25px;
  border-radius: 25px;
  aspect-ratio: 1 / 1; 
  height: calc(100% - 50px);
  max-width: calc(100% - 50px);

  object-fit: cover;   
  display: block;
}
.hero-section .header-img-eyebrow {
    --p-width: 260px;
    --p-height: 22px;  
    margin-top: 0;
    background-size: 250px 21px;
    background-repeat: no-repeat;
    background-image: url(/resources/images/shelf/v/hero/logo-header-eyebrow.png);
    display: block;
    width: var(--p-width);
    height: var(--p-height);

}

@media only screen and (min-width) {
  .hero-section .header-img-eyebrow {
  background-image: url(/resources/images/shelf/v/hero/logo-header-eyebrow.png);
  }
}

.visuallyHidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(0 0 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

/* The wrapper is the only thing we position relative; animations are clipped inside */
.shelf-dyn-title-wrap {
  position: relative;
  overflow: hidden;      /* clip sliding text */
  display: block;
}





/* ===== Shrink Hero (GSAP-driven pin) ===== */
.shrink-hero[data-component="shrink-hero"] {
  /* Tweakables */
  --target-scale: 0.78;
  --target-radius: 44px;
  --max-img-width: 1600px;
  --pin-span: 260%; /* how long it stays pinned, relative to viewport height */

  position: relative;
  overflow: clip; /* avoid transform bleed during scale */
  background-color: white;
}

/* Stage: GSAP will pin this; do NOT make it sticky */
.shrink-hero__stage {
  margin-top: 50px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Image */
.shrink-hero__img {
  width: min(100vw, var(--max-img-width));
  display: block;
  transform-origin: center;
  border-radius: 0;
}

/* Overlay copy (white, readable) */
.shrink-hero__copy {
  position: absolute;
  inset: 0;                 /* fill the image area */
  display: flex;            /* use flexbox to center text */
  flex-direction: column;
  justify-content: center;  /* vertical centering */
  align-items: center;      /* horizontal centering */
  text-align: center;
  padding: 0 6vw;
  z-index: 2;
  color: var(--bg-light-lm);
}

.copy-line {
  opacity: 0;           /* GSAP reveals */
  transform: translateY(12px);
  margin: 0;
  text-wrap: balance;
}

.copy-line--1 {
  font-size: clamp(80px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.copy-line--2 {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.4;
  max-width: 40ch;
}

/* Optional: soft vignette for legibility */
.shrink-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 100%);
  z-index: 1;
}

/* Reduced motion: show static */
@media (prefers-reduced-motion: reduce) {
  .copy-line { opacity: 1 !important; transform: none !important; }
}

/* Mobile: no pin/fancy transforms */
@media (max-width: 768px) {
  .shrink-hero__copy { position: static; padding: 16px 20px 0; pointer-events: auto; }
  .copy-line { opacity: 1; transform: none; }
}

/* Ultra-wide cap */
@media (min-width: 1600px) {
  .shrink-hero__img { width: var(--max-img-width); }
}



/* =========================================================
   WD Gallery: Mobile portrait / full-screen cards
   (Desktop stays untouched)
   ========================================================= */
@media (max-width: 734px) {

  /* Make the cards behave like full-screen portrait panels */
  .wd-gallery-scope {
    --card-w: 92vw;          /* nearly full width */
    --card-h: 70svh;         /* "one screen" feel, safe viewport */
    --radius: 18px;
    --gap: 12px;
  }

  /* Reduce wrapper forcing full viewport height (prevents awkward extra white) */
  .wd-wrap {
    min-height: auto;
  }

  /* Header spacing tighter on mobile */
  .wd-header {
    padding: 28px 16px 14px;
    flex-direction: column;
    align-items: flex-start;
  }

  .wd-hint {
    margin-top: 6px;
  }

  /* Track padding so cards don’t kiss the edges */
  .wd-track {
    padding: 0 16px 18px;
    scroll-padding: 0 16px;
  }

  /* The actual slide becomes portrait and centered */
  .wd-slide {
    flex: 0 0 var(--card-w);
    height: var(--card-h);
    border-radius: var(--radius);
    scroll-snap-align: center;
  }

  /* Background image fills the portrait frame */
  .wd-media {
    background-size: cover;
    background-position: center;
    transform: scale(1); /* no extra zoom on mobile */
  }

  /* Stronger bottom gradient so text stays readable */
  .wd-slide::after {
    box-shadow: inset 0 -120px 180px rgba(0,0,0,0.45);
  }

  .wd-label {
    font-size: clamp(1.3rem, 7vw, 2rem);
    line-height: 1.1;
  }

  .wd-label-description {
    font-size: clamp(0.95rem, 4vw, 1.05rem);
    margin: 6px 0 0 0;
  }

  /* Control pill: keep it usable and not too wide */
  .wd-control-row {
    bottom: max(12px, env(safe-area-inset-bottom));
    margin: 8px 0 18px;
  }

  .wd-control-panel {
    gap: 8px;
    padding: 6px 10px;
  }

  .wd-dots {
    display: none; /* optional: remove dots to keep pill compact */
  }
}


/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  */
/*  *//*  *//*  */
/*  *//*  */
/*  */
/* Shop */

.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #eee;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 400px;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all 0.15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #fff;
  font-weight: 600;
}

/* Hover effect */
.radio-inputs .radio:hover .name {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Animation */
.radio-inputs .radio input:checked + .name {
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: select 0.3s ease;
}

@keyframes select {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Particles */
.radio-inputs .radio input:checked + .name::before,
.radio-inputs .radio input:checked + .name::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b82f6;
  opacity: 0;
  animation: particles 0.5s ease forwards;
}

.radio-inputs .radio input:checked + .name::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.radio-inputs .radio input:checked + .name::after {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes particles {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--direction));
  }
}

.radio-inputs .radio input:checked + .name::before {
  --direction: -10px;
}

.radio-inputs .radio input:checked + .name::after {
  --direction: 10px;
}

.shop-filter-container.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.shop-filter-container.is-disabled .radio .name {
  cursor: not-allowed;
}

@media only screen and (max-width:962px) {
  .shop-filter-container {
    flex-direction: column!important;
  }
}

/* Smooth filter transitions for product cards */
.whisky-shop .whisky-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}

.whisky-shop .whisky-card.is-enter,
.whisky-shop .whisky-card.is-exit {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
}


/* Final hidden state after the fade-out completes */
.whisky-shop .whisky-card.is-hidden {
  display: none;
}














/* ==========================================================================
   Zoom-to-Landscape (zl-*) — mobile-first
   ========================================================================== */

.zl-hero[data-component="zoom-landscape"] {
  /* Tweakables (sensible defaults) */
  --start-scale: 1.08;      /* slightly zoomed in at start */
  --end-radius: 22px;       /* radius when “landscape” settles */
  --frame-margin: 4vw;      /* side margin for the final card */
  --pin-span: 180%;         /* how long the section stays pinned */
  --overlay-color: #fff;    /* overlay text color */
  --overlay-shadow: 0 2px 16px rgba(0,0,0,.35);

  position: relative;
  background: #000; /* looks great with video/image edges during zoom-out */
  overflow: clip;   /* keep scale bleed contained */
}

/* Stage: pinned by GSAP. Size = viewport at start. */
.zl-stage {
  position: relative;
  height: 100svh;              /* small-viewport units for mobile safe areas */
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* The frame that we scale down to landscape */
.zl-frame {
  position: relative;
  width: 100vw;
  height: 100svh;
  border-radius: 0;
  overflow: hidden;            /* round the media at the end */
  will-change: transform, border-radius, width, height;
}

/* The media always covers the frame initially */
.zl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fills like a background */
  transform: scale(var(--start-scale));
  will-change: transform;
  display: block;
}

/* Optional overlay copy (centered) */
.zl-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 6vw;
  color: var(--overlay-color);
  text-shadow: var(--overlay-shadow);
  z-index: 2;
  pointer-events: none;  /* overlay is decorative; place CTAs elsewhere if needed */
}

.zl-overlay h2 {
  margin: 0 0 .4em 0;
  font-size: clamp(24px, 7.2vw, 40px);
  letter-spacing: -0.02em;
}
.zl-overlay p {
  margin: 0;
  font-size: clamp(14px, 4vw, 18px);
  opacity: .9;
}

/* Larger screens: keep behavior, just allow bigger final card */
@media (min-width: 768px) {
  .zl-hero[data-component="zoom-landscape"] {
    --end-radius: 28px;
    --frame-margin: 5vw;
  }
}

/* Reduced motion: no pinning/zoom, just show the media */
@media (prefers-reduced-motion: reduce) {
  .zl-frame { width: 100vw; height: 100svh; border-radius: 0 !important; }
  .zl-media { transform: none !important; }
}

















.whisky-shop {
  /* Local variables scoped to this component */
  --ws-gap: 14px;
  --ws-card-radius: 16px;
  --ws-card-bg: var(--global-card-bg-primary);
  --ws-accent: #0071e3;
  --ws-new: #e67300;
  --ws-text: var(--text-color-lm);
  --ws-muted: var(--text-color-muted-lm);
  --ws-card-minh: 450px;
  --ws-media-ratio: 4 / 3;
  padding: 56px 20px;
  background: #fff;
  text-align: center;
}

.whisky-shop__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 36px;
  color: var(--ws-text);
}

/* Flexbox layout */
.whisky-shop__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gap);
  justify-content: center;
}

/* Card container */
.whisky-card {
  position: relative; /* for clickable overlay */
  flex: 1 1 300px;
  max-width: 360px;
  min-height: var(--ws-card-minh);
  background: var(--ws-card-bg);
  border-radius: var(--ws-card-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform .25s ease, box-shadow .25s ease;
}
.whisky-card:hover {
  transform: translateY(-3px);
}

/* The full-card clickable link */
.whisky-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--ws-card-radius);
}
.whisky-card__link:focus {
  outline: 2px solid var(--ws-accent);
  outline-offset: 4px;
}

/* Media section */
.whisky-card__media {
  width: 100%;
  aspect-ratio: var(--ws-media-ratio);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.whisky-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Card body */
.whisky-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 0;
  flex: 1 1 auto;
}

.whisky-card__swatches {
  display: flex;
  gap: 6px;
  margin: 4px 0 2px;
}
.whisky-card__swatches span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9c9cf;
}

.whisky-card__badge {
  color: var(--ws-new);
  font-weight: 600;
  font-size: .9rem;
  margin: 0;
}
.whisky-card__name {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ws-text);
  margin: 2px 0 0;
  text-wrap: balance;
  max-width: 28ch;
}

/* Card footer */
.whisky-card__foot {
  margin-top: 10px;
  padding-top: 10px;
}
.whisky-card__price {
  font-weight: 700;
  color: #000;
  margin: 0;
  font-size: 1.05rem;
}

/* CTA link */
.whisky-shop__cta {
  margin-top: 34px;
}
.whisky-shop__link {
  color: var(--ws-accent);
  font-weight: 600;
  text-decoration: none;
}
.whisky-shop__link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (min-width: 1200px) {
  .whisky-card {
    flex-basis: 320px;
  }
}
@media (max-width: 420px) {
  .whisky-shop {
    --ws-card-minh: 420px;
  }
}
/* Base origin badge */
.whisky-shop .whisky-card__origin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 600;
  background: #eef1f5; /* neutral fallback */
  color: #111;
}

/* The small colored dot */
.whisky-shop .whisky-origin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Country color themes (10 popular whisky origins) */
.whisky-shop .origin--scotland        { background: #e6f0ff; color: #0b4dbb; }
.whisky-shop .origin--japan           { background: #fff0f0; color: #c70021; }
.whisky-shop .origin--united-states   { background: #ffe9e9; color: #a40000; }
.whisky-shop .origin--ireland         { background: #e9f7ef; color: #1b7f3a; }
.whisky-shop .origin--canada          { background: #fff0f0; color: #c8102e; }
.whisky-shop .origin--india           { background: #fff6e6; color: #ff6a00; }
.whisky-shop .origin--taiwan          { background: #e8efff; color: #0033aa; }
.whisky-shop .origin--australia       { background: #e8efff; color: #0d47a1; }
.whisky-shop .origin--france          { background: #eef2ff; color: #1e3a8a; }
.whisky-shop .origin--germany         { background: #fff6e5; color: #b45309; }
.whisky-shop .origin--the-netherlands { background: #fff6e5; color: #FF9B00; } 

/* Make dot inherit the text color for quick palette swaps if needed */
.whisky-shop .origin--scotland .whisky-origin-dot,
.whisky-shop .origin--japan .whisky-origin-dot,
.whisky-shop .origin--united-states .whisky-origin-dot,
.whisky-shop .origin--ireland .whisky-origin-dot,
.whisky-shop .origin--canada .whisky-origin-dot,
.whisky-shop .origin--india .whisky-origin-dot,
.whisky-shop .origin--taiwan .whisky-origin-dot,
.whisky-shop .origin--australia .whisky-origin-dot,
.whisky-shop .origin--france .whisky-origin-dot,
.whisky-shop .origin--germany .whisky-origin-dot,
.whisky-shop .origin--the-netherlands .whisky-origin-dot {
  background: currentColor;
}

/* Optional: slight emphasis on card hover */
.whisky-shop .whisky-card:hover .whisky-card__origin { filter: saturate(1.08); }

/* Keep your existing badge styles as-is; just add this icon rule */
.whisky-shop .whisky-award-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px; /* aligns nicely with text */
}

/* ==========================================================================
   Whisky Banner (whisky-banner-*) — width synced via shopControls.js to current row width
   ========================================================================== */

.whisky-shop__grid .whisky-banner {
  position: relative;
  /* shopControls.js syncBannerWidth sets the width to match the rendered row width of the shopping cards*/
  flex: 0 0 auto;
  width: var(--ws-banner-w, auto);
  max-width: var(--ws-banner-w, none);
  min-height: 260px;
  background: var(--ws-card-bg);
  border-radius: var(--ws-card-radius);
  display: flex;
  align-items: stretch;
  overflow: hidden;

  transition: transform .25s ease, box-shadow .25s ease;
}

.whisky-shop__grid .whisky-banner:hover { transform: translateY(-3px); }

.whisky-shop__grid .whisky-banner__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--ws-card-radius);
}

.whisky-shop__grid .whisky-banner__link:focus {
  outline: 2px solid var(--ws-accent);
  outline-offset: 4px;
}

/* Inner layout */
.whisky-shop__grid .whisky-banner__inner {
  width: 100%;
  display: flex;
  gap: 18px;
  align-items: center;
}

.whisky-shop__grid .whisky-banner__copy {
  flex: 1 1 auto;
  text-align: left;
  padding: 40px;
}

.whisky-shop__grid .whisky-banner__kicker {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ws-new);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.whisky-shop__grid .whisky-banner__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ws-text);
  max-width: 32ch;
}

.whisky-shop__grid .whisky-banner__text {
  margin: 0 0 14px;
  color: var(--ws-muted);
  line-height: 1.4;
  max-width: 48ch;
}

.whisky-shop__grid .whisky-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #e6f0ff;
  color: #0b4dbb;
  font-weight: 700;
  width: fit-content;
}

/* Media */
.whisky-shop__grid .whisky-banner__media {
  flex: 0 0 50%;
  max-width: 50%;
  min-height: 220px;
  overflow: hidden;
  background: #f2f2f2;
  display: flex;
}

.whisky-shop__grid .whisky-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile stack */
@media (max-width: 800px) {
  .whisky-shop__grid .whisky-banner__inner { flex-direction: column; }
  .whisky-shop__grid .whisky-banner__media { max-width: 100%; }
  .whisky-shop__grid .whisky-banner__copy { text-align: center; }
  .whisky-shop__grid .whisky-banner__cta { margin: 0 auto; }
}


.alert-message-container {
  display: flex;
  padding: 0.89rem;
  background: #d5ddf9;
  justify-content: center;
  z-index: 1;
  position: absolute;
  width: 100%;
}

.alert-message {
  align-items: center;
  display: flex;
}

.alert-message-inner {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  gap: 15px;
}

.alert-message-inner p {
  font-size: 12px;
  line-height: 1.1em;
  color: #25215b;
  padding: 0;
  margin: 0;
}

p.alert-message-button {
  padding: 6px 8px;
  background-color: #3958ea;
  color: white;
  border-radius: 6px;
  min-width: 87px;
}


/* --- Overlay: force full-screen + centered layout --- */
#productDisplayModal.productDisplayModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 200ms ease, visibility 200ms ease;
}

#productDisplayModal.productDisplayModal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop */
#productDisplayModal .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
}

/* --- Panel: override any Bootstrap / existing .modal-content rules --- */
#productDisplayModal .modal-content {
  position: relative !important;     /* cancels bottom/right positioning */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  margin: 0 !important;
  float: none !important;

  width: min(92vw, 900px) !important; /* wider */
  max-width: 900px !important;
  max-height: 90vh !important;

  overflow: auto !important;          /* scroll inside modal */
  -webkit-overflow-scrolling: touch;

  background: #fff !important;
  border-radius: 16px !important;
}

/* Sticky close bar */
#productDisplayModal .sticky-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #fff !important;
  padding: 12px 12px 0 12px !important;
}

/* Optional inner padding */
#productDisplayModal .modal-wrapper {
  padding: 0 24px 24px 24px;
}

/* Lock page scroll (JS handles iOS too) */
body.modal-open {
  overflow: hidden;
}