html, body {
  height: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

/* Formulations Panel Container */
.formulations-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9000 !important;
  display: block;
  opacity: 0;
  visibility: hidden;
  filter: blur(0px);
  transition:
    opacity 1.5s cubic-bezier(0.4,0,0.2,1),
    filter 1.5s cubic-bezier(0.4,0,0.2,1);
  overflow: auto;
  background: var(--panel-gradient, linear-gradient(135deg, #59baff, #7ee5f0, #94ffe8));
  background-attachment: fixed;
}


.formulation-card {
  position: absolute;
  left: 50%;
  top: 2vh;
  bottom: 2vh;
  border-radius: 16px;
  border: 1px solid #f0efef1e;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 680px;
  max-height: calc(96vh);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.4s ease, background 1.2s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
  background: linear-gradient(var(--card-gradient-angle, 135deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
  box-shadow: 0 8px 32px rgba(212, 212, 212, 0.1);
  visibility: hidden;
  overflow: hidden;
}

.formulation-card-content {
  position: relative;
  border-radius: 16px;
  padding: 30px 50px 20px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Optional: frosted glass effect */
  backdrop-filter: blur(10px);
  /* Remove any solid background! */
  font-family: 'Montserrat Alternates', sans-serif;
  width: 680px;
  min-height: 100px !important;
  min-width: 100px !important;
  max-height: calc(96vh - 4vh);
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 255, 232, 0.79) transparent;
}

/* Webkit scrollbar styling for Chrome/Safari/Edge */
.formulation-card-content::-webkit-scrollbar {
  width: 8px;
}

.formulation-card-content::-webkit-scrollbar-track {
  background: transparent;
}

.formulation-card-content::-webkit-scrollbar-thumb {
  background: rgba(148, 255, 232, 0.79);
  border-radius: 4px;
}

.formulation-card-content::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 255, 232, 1);
}

.formulation-card-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.01); /* adjust opacity as needed */
  border-radius: 16px;
  z-index: 0;
  pointer-events: none;
}
.formulation-card-content > * {
  position: relative;
  z-index: 1;
}

.formulation-card.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2;
  visibility: visible;
  animation: cardBgFadeIn 1.2s cubic-bezier(0.4,0,0.2,1);
}

@keyframes cardBgFadeIn {
  0% {
    background-size: 200% 200%;
    filter: brightness(0.7) blur(2px);
  }
  60% {
    background-size: 110% 110%;
    filter: brightness(1.05) blur(0.5px);
  }
  100% {
    background-size: 100% 100%;
    filter: brightness(1) blur(0);
  }
}

.sei-logo-holder {
  margin-bottom: 16px;
  filter: drop-shadow(0 3px 3px rgba(0, 15, 17, 0.22));
}

.kanji-holder {
  margin-bottom: 80px;
  color: var(--kanji, #1a237e); /* Change this per card */
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  -webkit-mask: url('../images/kanji.svg') no-repeat center;
  mask: url('../images/kanji.svg') no-repeat center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: #123456; /* Change per card */
}

.formulation-card[data-formula="no1"] {
  background: linear-gradient(var(--card-gradient-angle, 60deg), var(--gradient-color-1), var(--gradient-color-2));
}
.formulation-card[data-formula="no2"] {
  background: linear-gradient(var(--card-gradient-angle, 130deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no4"] {
  background: linear-gradient(var(--card-gradient-angle, 160deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no6"] {
  background: linear-gradient(var(--card-gradient-angle, 180deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no7"] {
  background: linear-gradient(var(--card-gradient-angle, 30deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no8"] {
  background: linear-gradient(var(--card-gradient-angle, 150deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no9"] {
  background: linear-gradient(var(--card-gradient-angle, 165deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="bright"] {
  background: linear-gradient(var(--card-gradient-angle, 140deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="urban"] {
  background: linear-gradient(var(--card-gradient-angle, 145deg), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
}
.formulation-card[data-formula="no2"] .kanji-holder { background: #ca53cf; }
.formulation-card[data-formula="no4"] .kanji-holder { background: #00c7cc; }
.formulation-card[data-formula="no6"] .kanji-holder { background: #cf347a; }
.formulation-card[data-formula="no7"] .kanji-holder { background: #84c5cf; }
.formulation-card[data-formula="no8"] .kanji-holder { background: #781e52; }
.formulation-card[data-formula="no9"] .kanji-holder { background: #cf8730; }
.formulation-card[data-formula="bright"] .kanji-holder { background: #870058; }
.formulation-card[data-formula="urban"] .kanji-holder { background: #490066; }

.kanji-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.card-title {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0.01em;
  width: 100%;
  text-align: center;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 3.2rem;
}
.card-title .subtitle {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #361375;
}

.card-blurb {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.0em;
  color: var(--kanji, #1a237e);
  margin-bottom: 1.7rem;
  text-align: center;
}

.card-ingredients {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 1.4rem;
  color: #361375;
  margin-bottom: 4.7rem;
  line-height: 1.6em;
  text-align: center;
  padding-left: 90px;
  padding-right: 90px;
}

.card-description {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 1.1rem;
  line-height: 2.1em;
  color: #361375;
  margin-bottom: 0;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 4.5rem;
  background: none;
  border: none;
  color: #b8f1f8a6;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.arrow.left { left: 8px; }
.arrow.right { right: 8px; }
.arrow:hover { color: #4ce6fa; }

.formulation-card .kanji {
  color: var(--kanji, #000);
  /* or use fill for SVGs */
}
.formulation-card .sei-logo {
  fill: var(--logo, #00bcd4);
  /* or filter for PNGs */
}





.formulations-panel.active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0px);
  visibility: visible;
}

.formulations-panel.fast-out {
  transition:
    opacity 0s !important,
    filter 0.6s cubic-bezier(0.4,0,0.2,1) !important;
  filter: blur(12px);
  visibility: visible;
}

/* Removed the ::before pseudo-element since we want the gradient on the main element */

#side-menu-holder { z-index: 10000 !important; }
.formulations-panel { z-index: 9000 !important; }

.sei-logo-svg, .kanji-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.card-title-svg {
  width: auto;   /* or px/rem as you prefer */
  height: 1.7em;
  display: inline-block;
  vertical-align: bottom; /* aligns nicely with text */
  /* Optional: add margin if you want space between SVG and text */
  margin-right: 0.5em;
  filter: brightness(0) invert(1); /* Force white color */
}

.tag-line2.dissolve {
  opacity: 0 !important;
  transition: opacity 1.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

/* Mobile styles for formulations panel */
@media (max-width: 600px) {
  /* Background container for mobile - same approach as rooted panel */
  .formulations-panel-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh !important;
    min-height: 100vh !important;
    background: var(--panel-gradient, linear-gradient(135deg, #59baff, #7ee5f0, #94ffe8));
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    z-index: 9000;
    overflow: visible !important;
  }
  
  .formulations-panel {
    background: transparent !important;
    z-index: 9001 !important;
  }
  
  /* Control card width in viewport on mobile */
  .formulation-card {
    /* Commented out height restrictions for mobile portrait */
    /* top: 2vh; */
    /* top: 2dvh; */
    /* bottom: 2vh; */
    /* bottom: 2dvh; */
    /* max-height: calc(96vh); */
    /* max-height: calc(96dvh); */
    /* max-height: calc(96vh - 120px); */
    width: 95vw !important;
    max-width: 95vw !important;
  }
  
  /* Control card content padding on mobile */
  .formulation-card-content {
    /* Commented out height restrictions for mobile portrait */
    /* max-height: calc(96vh - 4vh); */
    /* max-height: calc(96dvh - 4dvh); */
    /* max-height: calc(96vh - 124px); */
    padding: 20px 25px 15px 25px !important;
    width: 95vw !important;
    max-width: 95vw !important;
  }
  
  /* Control kanji size on mobile */
  .kanji-holder {
    width: 160px !important; /* Smaller kanji */
    height: 160px !important;
    margin-bottom: 20px !important; /* Reduced from 40px to bring closer to logo */
    position: relative !important;
  }
  
  /* Hide the inline SVG content on mobile */
  .kanji-holder .kanji-svg {
    display: none !important;
  }
  
  .kanji-holder::before {
    display: none !important;
  }
  
  /* Remove the ::before pseudo-element */
  .kanji-holder::before {
    display: none !important;
  }
  
  /* Individual kanji files for each card on mobile */
  .formulation-card[data-formula="no1"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no1.svg') no-repeat center !important;
    mask: url('../images/kanji-no1.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #123456 !important;
  }
  .formulation-card[data-formula="no2"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no2.svg') no-repeat center !important;
    mask: url('../images/kanji-no2.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #ca53cf !important; /* Magenta */
  }
  .formulation-card[data-formula="no4"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no4.svg') no-repeat center !important;
    mask: url('../images/kanji-no4.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #00c7cc !important; /* Cyan */
  }
  .formulation-card[data-formula="no6"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no6.svg') no-repeat center !important;
    mask: url('../images/kanji-no6.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #cf347a !important; /* Pink */
  }
  .formulation-card[data-formula="no7"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no7.svg') no-repeat center !important;
    mask: url('../images/kanji-no7.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #84c5cf !important; /* Light blue */
  }
  .formulation-card[data-formula="no8"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no8.svg') no-repeat center !important;
    mask: url('../images/kanji-no8.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #781e52 !important; /* Dark purple */
  }
  .formulation-card[data-formula="no9"] .kanji-holder {
    -webkit-mask: url('../images/kanji-no9.svg') no-repeat center !important;
    mask: url('../images/kanji-no9.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #cf8730 !important; /* Orange */
  }
  .formulation-card[data-formula="bright"] .kanji-holder {
    -webkit-mask: url('../images/kanji-brighter.svg') no-repeat center !important;
    mask: url('../images/kanji-brighter.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #870058 !important; /* Dark magenta */
  }
  .formulation-card[data-formula="urban"] .kanji-holder {
    -webkit-mask: url('../images/kanji-urban.svg') no-repeat center !important;
    mask: url('../images/kanji-urban.svg') no-repeat center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    background: #490066 !important; /* Dark purple */
  }
  
  /* Control logo size on mobile */
  .sei-logo-svg, .kanji-svg {
    width: 60px !important; /* Smaller logo */
    height: 60px !important;
  }
  
  /* Adjust card title size on mobile */
  .card-title {
    font-size: 1.4rem !important;
    margin-bottom: 2.2rem !important;
    margin-top: 1rem !important;
  }
  
  .card-title .subtitle {
    font-size: 1.2rem !important;
  }
  
  /* Adjust card blurb size on mobile */
  .card-blurb {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important; 
    margin-top: 1rem !important;
    /* Reduced from 1.6rem to bring ingredients closer */
  }
  
  /* Adjust ingredients padding on mobile */
  .card-ingredients {
    font-size: 0.95rem !important;
    margin-bottom: 2.5rem !important; /* Reduced from 3.5rem to bring description closer */
    padding-left: 20px !important; /* Reduced left padding */
    padding-right: 20px !important; /* Reduced right padding */
  }
  
  /* Adjust description padding on mobile */
  .card-description {
    font-size: 1rem !important;
    padding-left: 15px !important; /* Reduced left padding */
    padding-right: 15px !important; /* Reduced right padding */
  }
  
  /* Adjust arrow size on mobile */
  .arrow {
    font-size: 3.5rem !important;
  }
  
  .arrow.left { left: 5px !important; }
  .arrow.right { right: 5px !important; }
  
  /* Background container - always 100% viewport */
  .formulations-panel-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    height: calc(100vh - 120px); /* Fallback for browsers that don't support dvh */
    background: var(--panel-gradient, linear-gradient(135deg, #59baff, #7ee5f0, #94ffe8));
    background-attachment: fixed;
    z-index: -1;
  }
}

/* Mobile Landscape Styles */
@media (max-width: 900px) and (orientation: landscape) {
  .formulations-panel {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    height: calc(100vh - 120px); /* Fallback for browsers that don't support dvh */
  }
  
  /* Background container - always 100% viewport */
  .formulations-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    height: calc(100vh - 120px); /* Fallback for browsers that don't support dvh */
    background: inherit;
    z-index: -1;
  }
  
  .formulation-card {
    top: 2vh;
    top: 2dvh; /* Dynamic viewport height for mobile */
    bottom: 2vh;
    bottom: 2dvh; /* Dynamic viewport height for mobile */
    max-height: calc(96vh);
    max-height: calc(96dvh); /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    max-height: calc(96vh - 120px); /* Fallback for browsers that don't support dvh */
    width: 95vw !important;
    max-width: 95vw !important;
  }
  
  .formulation-card-content {
    max-height: calc(96vh - 4vh);
    max-height: calc(96dvh - 4dvh); /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    max-height: calc(96vh - 124px); /* Fallback for browsers that don't support dvh */
    padding: 15px 20px 10px 20px !important;
    width: 95vw !important;
    max-width: 95vw !important;
  }
  
  .kanji-holder {
    width: 120px !important;
    height: 120px !important;
    margin-bottom: 15px !important;
  }
  
  .sei-logo-svg, .kanji-svg {
    width: 50px !important;
    height: 50px !important;
  }
  
  .card-title {
    font-size: 1.2rem !important;
    margin-bottom: 1.8rem !important;
    margin-top: 0.5rem !important;
  }
  
  .card-title .subtitle {
    font-size: 1rem !important;
  }
  
  .card-blurb {
    font-size: 1.2rem !important;
    margin-bottom: 0.8rem !important;
    margin-top: 0.5rem !important;
  }
  
  .card-ingredients {
    font-size: 0.85rem !important;
    margin-bottom: 2rem !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .card-description {
    font-size: 0.9rem !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .arrow {
    font-size: 3rem !important;
  }
  
  .arrow.left { left: 3px !important; }
  .arrow.right { right: 3px !important; }
  
  /* Background container - always 100% viewport */
  .formulations-panel-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    /* Edge and older browser fallbacks */
    height: calc(100vh - 120px); /* Fallback for browsers that don't support dvh */
    background: var(--panel-gradient, linear-gradient(135deg, #59baff, #7ee5f0, #94ffe8));
    background-attachment: fixed;
    z-index: -1;
  }
}