:root {
  --black: #0c0b09;
  --black-soft: #17140f;
  --black-light: #252018;
  --cream: #e9ddc8;
  --cream-light: #f5ecdc;
  --cream-dark: #cdbd9f;
  --gold: #b59560;
  --gold-light: #d4b980;
  --brown: #685541;
  --dark-text: #181510;
  --muted-dark: #675d50;
  --muted-light: #a69c8d;
  --border-dark: rgba(24, 21, 16, 0.17);
  --border-light: rgba(233, 221, 200, 0.17);
  --heading-font: "Cormorant Garamond", serif;
  --body-font: "Manrope", sans-serif;
  --navbar-height: 82px;
  --container: 1240px;
}

/* RESET */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-height);
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--cream-light);
  font-family: var(--body-font);
  line-height: 1.7;
}

body.locked {
  overflow: hidden;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
}

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

::selection {
  background: var(--gold);
  color: var(--black);
}

/* REUSABLE */

.cream-section {
  background: var(--cream);
  color: var(--dark-text);
}

.dark-section {
  background: var(--black);
  color: var(--cream-light);
}

.section-kicker {
  margin-bottom: 20px;
  color: var(--brown);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.light-kicker {
  color: var(--gold-light);
}

.button {
  min-height: 52px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-cream {
  background: var(--cream);
  color: var(--black);
}

.button-cream:hover {
  background: var(--gold-light);
}

.button-dark {
  background: var(--black);
  color: var(--cream);
}

.button-dark:hover {
  background: var(--brown);
}

.button-outline {
  border-color: rgba(245, 236, 220, 0.34);
  color: var(--cream-light);
}

.button-outline:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--black);
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* NAVBAR */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: var(--navbar-height);
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition:
    height 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.navbar.scrolled,
.navbar-solid {
  height: 72px;
  background: rgba(12, 11, 9, 0.95);
  border-color: var(--border-light);
  backdrop-filter: blur(16px);
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-logo {
  width: 168px;
  height: auto;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-menu a {
  position: relative;
  color: var(--cream-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.is-active {
  color: var(--cream);
}

.nav-menu a:hover::after,
.nav-menu a.is-active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta {
  min-height: 39px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(233, 221, 200, 0.34);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: 0.3s ease;
}

.nav-cta:hover {
  background: var(--cream);
  color: var(--black);
}

.menu-button {
  width: 44px;
  height: 44px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  width: 24px;
  height: 1px;
  background: var(--cream);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.menu-button.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
  opacity: 0;
}

.menu-button.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* HOME HERO */

.home-hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 7% 80px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  background:
    radial-gradient(
      circle at 76% 42%,
      rgba(181, 149, 96, 0.19),
      transparent 27%
    ),
    linear-gradient(118deg, #090806 34%, #1c1710 100%);
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );
  background-size: 80px 80px;
}

.hero-background-word {
  position: absolute;
  left: -40px;
  bottom: -55px;
  color: rgba(233, 221, 200, 0.025);
  font-family: var(--heading-font);
  font-size: clamp(170px, 25vw, 410px);
  font-weight: 600;
  letter-spacing: -15px;
  line-height: 0.8;
  user-select: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-light);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
}

.eyebrow::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.hero-copy h1 {
  margin: 27px 0 16px;
  font-family: var(--heading-font);
  font-size: clamp(68px, 8vw, 122px);
  font-weight: 500;
  letter-spacing: -4px;
  line-height: 0.82;
}

.hero-copy h1 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.hero-copy > h2 {
  color: var(--cream);
  font-family: var(--heading-font);
  font-size: clamp(24px, 2.7vw, 36px);
  font-weight: 500;
}

.hero-description {
  max-width: 540px;
  margin-top: 20px;
  color: var(--muted-light);
  font-size: 13px;
  line-height: 1.9;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-visual {
  position: relative;
  z-index: 2;
  min-height: 560px;
  display: grid;
  place-items: center;
}


.hero-footer {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #756c5e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scroll-line {
  width: 120px;
  height: 1px;
  background: rgba(233, 221, 200, 0.18);
  overflow: hidden;
}

.scroll-line div {
  width: 45%;
  height: 100%;
  background: var(--gold);
  animation: scrollAnimation 2.2s ease-in-out infinite;
}

@keyframes scrollAnimation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(280%);
  }
}

/* FLAVOR PAGE HERO */

.flavor-hero {
  position: relative;
  min-height: 610px;
  padding: 155px 8% 95px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(181, 149, 96, 0.19),
      transparent 26%
    ),
    var(--black);
  overflow: hidden;
}

.flavor-hero-word {
  position: absolute;
  right: -40px;
  bottom: -55px;
  color: rgba(233, 221, 200, 0.035);
  font-family: var(--heading-font);
  font-size: clamp(170px, 27vw, 430px);
  font-weight: 600;
  line-height: 0.8;
}

.flavor-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.flavor-hero-copy h1 {
  margin: 25px 0;
  font-family: var(--heading-font);
  font-size: clamp(70px, 9vw, 125px);
  font-weight: 500;
  letter-spacing: -4px;
  line-height: 0.82;
}

.flavor-hero-copy h1 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.flavor-hero-copy > p:last-child {
  max-width: 560px;
  color: var(--muted-light);
  font-size: 13px;
  line-height: 1.9;
}

.flavor-hero-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.flavor-hero-symbol img {
  width: 180px;
  max-height: 330px;
  object-fit: contain;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

/* FOOTER */

.footer {
  padding: 65px 7% 27px;
  background: #070604;
  color: var(--cream);
}

.footer-main {
  padding-bottom: 45px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  border-bottom: 1px solid var(--border-light);
}

.footer-logo img {
  width: min(310px, 65vw);
  height: auto;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.footer-main > p {
  max-width: 360px;
  color: var(--muted-light);
  font-family: var(--heading-font);
  font-size: 22px;
  font-style: italic;
  text-align: right;
}

.footer-links {
  padding: 35px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px 40px;
  border-bottom: 1px solid var(--border-light);
}

.footer-links a {
  color: var(--muted-light);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--cream);
}

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 35px;
  color: #70685c;
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* TABLET */

@media (max-width: 1050px) {
  .nav-menu {
    gap: 19px;
  }
  .home-hero {
    grid-template-columns: 1fr;
    padding-top: 145px;
  }
  .hero-copy {
    max-width: 760px;
  }
  .hero-visual {
    min-height: 540px;
  }
  .story-section {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .principle-strip {
    grid-column: auto;
  }
  .philosophy-section,
  .flavor-cta,
  .community-section {
    grid-template-columns: 1fr;
    gap: 65px;
  }
  .philosophy-copy,
  .community-copy {
    max-width: 760px;
  }
  .flavor-layout {
    grid-template-columns: 1fr;
  }
  .flavor-menu {
    border-right: 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .flavor-detail {
    min-height: 620px;
  }
}

/* MOBILE */

@media (max-width: 820px) {
  :root {
    --navbar-height: 72px;
  }
  .navbar {
    height: 72px;
    padding: 0 22px;
  }
  .navbar-logo {
    width: 140px;
  }
  .nav-cta {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .nav-menu {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    padding: 30px 23px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(12, 11, 9, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease;
  }
  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-menu a {
    width: 100%;
    padding: 17px 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--cream);
    font-family: var(--heading-font);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav-menu a::after {
    display: none;
  }
  .principle-strip {
    grid-template-columns: 1fr;
  }
  .principle-strip article {
    border-right: 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .principle-strip article:last-child {
    border-bottom: 0;
  }
  .caged-preview {
    grid-template-columns: 1fr;
  }
  .caged-preview div {
    min-height: 85px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    padding: 15px 25px;
    border-right: 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .caged-preview div:last-child {
    border-bottom: 0;
  }
  .caged-preview strong {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    font-size: 30px;
  }
  .caged-preview span {
    margin-top: 0;
    font-size: 17px;
  }
  .flavor-hero {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .flavor-hero-symbol {
    justify-content: start;
  }
  .flavor-hero-symbol img {
    width: 115px;
  }
  .flavor-detail {
    grid-template-columns: 1fr;
  }
  .flavor-image-panel {
    min-height: 500px;
  }
  .collection-note {
    grid-template-columns: 1fr;
  }
  .collection-note-symbol {
    text-align: left;
  }
  .footer-main {
    flex-direction: column;
  }
  .footer-main > p {
    text-align: left;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }
}

/* SMALL MOBILE */

@media (max-width: 600px) {
  .home-hero {
    min-height: auto;
    padding: 120px 22px 80px;
  }
  .hero-copy h1 {
    font-size: 61px;
    letter-spacing: -2px;
  }
  .hero-copy > h2 {
    font-size: 23px;
  }
  .hero-buttons {
    flex-direction: column;
  }
  .hero-buttons .button {
    width: 100%;
  }
  .hero-visual {
    min-height: 455px;
  }
  .hero-footer {
    display: none;
  }
  .story-section,
  .philosophy-section,
  .flavor-cta,
  .community-section,
  .flavor-explorer,
  .collection-note {
    padding: 85px 22px;
  }
  .section-heading h2,
  .philosophy-copy h2,
  .flavor-cta-copy h2,
  .community-copy h2,
  .flavor-explorer-heading h2 {
    font-size: 47px;
  }
  .philosophy-circle {
    width: 315px;
  }
  .philosophy-circle strong {
    font-size: 55px;
  }
  .community-symbol {
    justify-content: start;
  }
  .community-symbol img {
    width: 110px;
  }
  .flavor-hero {
    min-height: auto;
    padding: 130px 22px 80px;
  }
  .flavor-hero-copy h1 {
    font-size: 61px;
    letter-spacing: -2px;
  }
  .flavor-tab {
    min-height: 90px;
    padding: 16px;
  }
  .flavor-tab strong {
    font-size: 25px;
  }
  .flavor-image-panel {
    min-height: 420px;
  }
  .flavor-detail-copy {
    padding: 50px 25px;
  }
  .flavor-detail-copy h2 {
    font-size: 55px;
  }
  .flavor-detail-copy .button {
    width: 100%;
  }
  .collection-note-copy h2 {
    font-size: 52px;
  }
  .collection-note-symbol {
    font-size: 32px;
    letter-spacing: 5px;
  }
  .footer {
    padding: 55px 22px 24px;
  }
  .footer-logo img {
    width: 230px;
  }
  .footer-links {
    flex-direction: column;
    gap: 13px;
  }
  .age-panel {
    padding: 38px 24px;
  }
  .age-panel h2 {
    font-size: 38px;
  }
  .age-actions {
    flex-direction: column;
    gap: 10px;
  }
  .age-actions .button {
    width: 100%;
  }
}

/* ==================================================
   FINAL POLISH — MAESTRO FLAVOR EXPLORER
================================================== */

/* Area keseluruhan */
.flavor-explorer {
  padding: 105px 5% 125px;
}

.flavor-explorer-heading {
  width: min(1320px, 100%);
  margin: 0 auto 58px;
}

.flavor-explorer-heading h2 {
  max-width: 950px;
  font-size: clamp(52px, 6vw, 82px);
  line-height: 0.95;
}

/* Kotak utama flavor */
.flavor-layout {
  width: min(1320px, 100%);
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid rgba(24, 21, 16, 0.18);
  background: var(--cream-light);
  box-shadow: 0 30px 80px rgba(45, 35, 23, 0.08);
}

/* Menu flavor kiri */
.flavor-menu {
  min-width: 0;
  background: #eadcc4;
  border-right: 1px solid rgba(24, 21, 16, 0.18);
}

.flavor-tab {
  width: 100%;
  min-height: 116px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(24, 21, 16, 0.16);
  background: transparent;
  color: var(--dark-text);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    padding-left 0.3s ease;
}

.flavor-tab:last-child {
  border-bottom: 0;
}

.flavor-tab:hover,
.flavor-tab.is-selected {
  padding-left: 27px;
  background: var(--black);
  color: var(--cream);
}

.flavor-tab > span {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.flavor-tab:hover > span,
.flavor-tab.is-selected > span {
  color: var(--gold-light);
}

.flavor-tab strong {
  min-width: 0;
  font-family: var(--heading-font);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.05;
}

.flavor-tab small {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 20px;
}

/* Detail produk sebelah kanan */
.flavor-detail {
  min-width: 0;
  min-height: 710px;
  display: grid;
  grid-template-columns:
    minmax(420px, 1.15fr)
    minmax(320px, 0.85fr);
  background: var(--cream-light);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.flavor-detail.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

/* Area gambar */
.flavor-image-panel {
  position: relative;
  min-width: 0;
  min-height: 710px;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    radial-gradient(
      circle at center,
      rgba(181, 149, 96, 0.14),
      transparent 48%
    ),
    #12100d;
  overflow: hidden;
}

/* Bingkai tipis di area gambar */
.flavor-image-panel::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: 1;
  border: 1px solid rgba(233, 221, 200, 0.13);
  pointer-events: none;
}

/* Gradasi ringan, tidak menutupi gambar */
.flavor-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.11),
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.15)
    );
  pointer-events: none;
}

/* Gambar dibuat tampil UTUH, bukan di-crop */
.flavor-image-panel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 650px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
}

.flavor-detail:hover .flavor-image-panel img {
  transform: scale(1.015);
}

/* Nomor dan huruf chord */
.flavor-image-panel > span,
.flavor-image-panel > strong {
  position: absolute;
  z-index: 4;
  color: var(--cream);
}

.flavor-image-panel > span {
  top: 38px;
  left: 40px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.flavor-image-panel > strong {
  right: 35px;
  bottom: 18px;
  color: rgba(233, 221, 200, 0.88);
  font-family: var(--heading-font);
  font-size: 105px;
  font-weight: 500;
  line-height: 1;
}

/* Area deskripsi */
.flavor-detail-copy {
  min-width: 0;
  padding: 58px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(24, 21, 16, 0.12);
}

.flavor-detail-copy > p:first-child {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.flavor-detail-copy h2 {
  margin: 10px 0 23px;
  font-family: var(--heading-font);
  font-size: clamp(54px, 5.5vw, 78px);
  font-weight: 600;
  line-height: 0.88;
}

/* Tag rasa */
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
}

.profile-tags span {
  padding: 8px 13px;
  border: 1px solid rgba(24, 21, 16, 0.18);
  color: var(--brown);
  font-family: var(--heading-font);
  font-size: 16px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.13);
}

/* Deskripsi flavor */
.flavor-detail-copy > p:nth-of-type(2) {
  max-width: 490px;
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.95;
}

/* Tombol order */
.flavor-detail-copy .button {
  width: 100%;
  max-width: 260px;
  margin-top: 30px;
  justify-content: space-between;
}

.order-note {
  margin-top: 12px;
  color: var(--muted-dark);
  font-size: 9px;
  line-height: 1.6;
}

/* ==================================================
   LAPTOP KECIL / TABLET LANDSCAPE
================================================== */

@media (max-width: 1180px) {
  .flavor-layout {
    grid-template-columns: 1fr;
  }
  .flavor-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-right: 0;
    border-bottom: 1px solid rgba(24, 21, 16, 0.18);
  }
  .flavor-tab {
    min-height: 125px;
    padding: 18px 10px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    border-right: 1px solid rgba(24, 21, 16, 0.16);
    border-bottom: 0;
    text-align: center;
  }
  .flavor-tab:last-child {
    border-right: 0;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 10px;
  }
  .flavor-tab strong {
    font-size: 20px;
  }
  .flavor-tab small {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .flavor-detail {
    grid-template-columns:
      minmax(390px, 1.08fr)
      minmax(320px, 0.92fr);
  }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {
  .flavor-explorer {
    padding: 90px 24px 100px;
  }
  .flavor-menu {
    grid-template-columns: 1fr;
  }
  .flavor-tab {
    min-height: 82px;
    padding: 14px 20px;
    grid-template-columns: 34px minmax(0, 1fr) 38px;
    justify-items: initial;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(24, 21, 16, 0.16);
    text-align: left;
  }
  .flavor-tab:last-child {
    border-bottom: 0;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 25px;
  }
  .flavor-tab strong {
    font-size: 25px;
  }
  .flavor-detail {
    grid-template-columns: 1fr;
  }
  .flavor-image-panel {
    min-height: 590px;
  }
  .flavor-image-panel img {
    max-height: 530px;
  }
  .flavor-detail-copy {
    padding: 55px 42px;
    border-top: 1px solid rgba(24, 21, 16, 0.12);
    border-left: 0;
  }
  .flavor-detail-copy h2 {
    font-size: 64px;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {
  .flavor-explorer {
    padding: 75px 16px 85px;
  }
  .flavor-explorer-heading {
    margin-bottom: 40px;
  }
  .flavor-explorer-heading h2 {
    font-size: 44px;
  }
  .flavor-tab {
    min-height: 77px;
    padding: 13px 15px;
    grid-template-columns: 30px minmax(0, 1fr) 35px;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 19px;
  }
  .flavor-tab strong {
    font-size: 23px;
  }
  .flavor-tab small {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .flavor-image-panel {
    min-height: 470px;
    padding: 18px;
  }
  .flavor-image-panel::before {
    inset: 12px;
  }
  .flavor-image-panel img {
    max-height: 430px;
  }
  .flavor-image-panel > span {
    top: 27px;
    left: 28px;
  }
  .flavor-image-panel > strong {
    right: 23px;
    bottom: 13px;
    font-size: 75px;
  }
  .flavor-detail-copy {
    padding: 45px 24px;
  }
  .flavor-detail-copy h2 {
    font-size: 52px;
  }
  .flavor-detail-copy .button {
    max-width: none;
  }
}
/* ==================================================
   MAESTRO MULTI-FLAVOR CART — FINAL
================================================== */

/* Gambar liquid dibuat sedikit lebih kecil */

.flavor-image-panel img {
  width: 86%;
  height: 86%;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
}

/* Navbar cart */

.nav-cart-button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(233, 221, 200, 0.34);
  background: transparent;
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s ease;
}

.nav-cart-button:hover {
  background: var(--cream);
  color: var(--black);
}

.nav-cart-button span {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--black);
  font-size: 9px;
}

/* Order form */

.availability-badge {
  width: fit-content;
  margin-bottom: 19px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(24, 21, 16, 0.15);
  color: var(--brown);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.availability-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5c764b;
  box-shadow: 0 0 0 4px rgba(92, 118, 75, 0.12);
}

.order-configurator {
  margin-top: 30px;
  padding-top: 27px;
  border-top: 1px solid rgba(24, 21, 16, 0.15);
}

.order-heading {
  margin-bottom: 22px;
}

.order-heading p {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.order-heading span {
  display: block;
  margin-top: 5px;
  color: var(--muted-dark);
  font-size: 10px;
  line-height: 1.6;
}

.order-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field > span {
  color: var(--dark-text);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.form-field select,
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(24, 21, 16, 0.2);
  border-radius: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.18);
  color: var(--dark-text);
  font-family: var(--body-font);
  font-size: 12px;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}

.form-field select,
.form-field input {
  height: 46px;
  padding: 0 13px;
}

.form-field textarea {
  min-height: 82px;
  padding: 12px 13px;
  line-height: 1.6;
  resize: vertical;
}

.form-field select:focus,
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.35);
}

.form-field input[readonly] {
  color: var(--brown);
  cursor: default;
}

.form-field small {
  color: var(--muted-dark);
  font-size: 8px;
  line-height: 1.5;
}

.custom-nicotine-field {
  display: none;
}

.custom-nicotine-field.is-visible {
  display: flex;
}

.quantity-control {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  border: 1px solid rgba(24, 21, 16, 0.2);
}

.quantity-control button {
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--dark-text);
  font-size: 20px;
  cursor: pointer;
  transition: 0.25s ease;
}

.quantity-control button:hover {
  background: var(--black);
  color: var(--cream);
}

.quantity-control input {
  height: 46px;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(24, 21, 16, 0.2);
  border-right: 1px solid rgba(24, 21, 16, 0.2);
  text-align: center;
  appearance: textfield;
}

.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button {
  appearance: none;
}

.add-order-button {
  width: 100%;
  margin-top: 21px;
  justify-content: space-between;
}

.add-order-button span {
  font-size: 17px;
}

.order-note {
  margin-top: 10px;
  color: var(--muted-dark);
  font-size: 8px;
  line-height: 1.5;
}

.form-field.has-error input {
  border-color: #91483f;
}

.form-field-error {
  color: #91483f;
  font-size: 8px;
}

/* Cart drawer */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  visibility: hidden;
  pointer-events: none;
}

.cart-drawer.active {
  visibility: visible;
  pointer-events: auto;
}

.cart-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 6, 4, 0.76);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease;
}

.cart-drawer.active .cart-overlay {
  opacity: 1;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream-light);
  color: var(--dark-text);
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

.cart-drawer.active .cart-panel {
  transform: translateX(0);
}

.cart-header {
  padding: 27px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border-dark);
}

.cart-header p {
  color: var(--brown);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
}

.cart-header h2 {
  margin-top: 3px;
  font-family: var(--heading-font);
  font-size: 37px;
  font-weight: 600;
  line-height: 1;
}

.cart-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--cream);
  font-family: var(--heading-font);
  font-size: 28px;
  cursor: pointer;
}

.cart-items {
  flex: 1;
  padding: 8px 28px;
  overflow-y: auto;
}

.cart-empty {
  flex: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 45px 30px;
  text-align: center;
}

.cart-empty.is-visible {
  display: flex;
}

.cart-empty img {
  width: 48px;
  max-height: 75px;
  margin-bottom: 22px;
  object-fit: contain;
}

.cart-empty h3 {
  font-family: var(--heading-font);
  font-size: 32px;
  font-weight: 600;
}

.cart-empty p {
  max-width: 280px;
  margin-top: 8px;
  color: var(--muted-dark);
  font-size: 11px;
}

.cart-item {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  border-bottom: 1px solid var(--border-dark);
}

.cart-item-image {
  width: 84px;
  height: 110px;
  display: grid;
  place-items: center;
  background: #181510;
  overflow: hidden;
}

.cart-item-image img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.cart-item-copy {
  min-width: 0;
}

.cart-item-copy h3 {
  font-family: var(--heading-font);
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
}

.cart-item-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  color: var(--muted-dark);
  font-size: 9px;
}

.cart-item-note {
  margin-top: 7px;
  color: var(--brown);
  font-size: 9px;
  font-style: italic;
  line-height: 1.5;
}

.cart-item-actions {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cart-quantity {
  display: grid;
  grid-template-columns: 31px 34px 31px;
  border: 1px solid var(--border-dark);
}

.cart-quantity button {
  height: 31px;
  background: transparent;
  color: var(--dark-text);
  cursor: pointer;
}

.cart-quantity button:hover {
  background: var(--black);
  color: var(--cream);
}

.cart-quantity span {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
  font-size: 10px;
}

.cart-remove {
  background: transparent;
  color: #81433c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
}

.cart-footer {
  padding: 23px 28px 27px;
  border-top: 1px solid var(--border-dark);
  background: var(--cream);
}

.cart-total {
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total span {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cart-total strong {
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 600;
}

.clear-cart-button {
  margin-bottom: 13px;
  background: transparent;
  color: var(--muted-dark);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
}

.checkout-button {
  width: 100%;
  justify-content: space-between;
}

.checkout-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.cart-footer > p {
  margin-top: 10px;
  color: var(--muted-dark);
  font-size: 8px;
  line-height: 1.5;
}

/* Toast */

.order-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 4500;
  padding: 13px 18px;
  background: var(--black);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.order-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Floating buttons */

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.floating-action {
  min-width: 46px;
  height: 46px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(233, 221, 200, 0.25);
  background: var(--black);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.floating-action:hover {
  background: var(--cream);
  color: var(--black);
  transform: translateY(-3px);
}

.floating-cart-button strong {
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--black);
  font-size: 8px;
}

.floating-whatsapp {
  width: 46px;
  min-width: 46px;
  padding: 0;

  background: var(--black);
  color: var(--cream);
}

.floating-whatsapp svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor;
}

.floating-whatsapp:hover {
  background: var(--cream);
  color: var(--black);
}

.back-to-top {
  width: 46px;
  min-width: 46px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Responsive */

@media (max-width: 820px) {
  .nav-cart-button {
    margin-left: auto;
  }
  .cart-panel {
    width: min(440px, 100%);
  }
}

@media (max-width: 600px) {
  .nav-cart-button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 8px;
  }
  .order-form-grid {
    grid-template-columns: 1fr;
  }
  .form-field-full {
    grid-column: auto;
  }
  .flavor-image-panel img {
    width: 82%;
    height: 82%;
    max-height: 390px;
  }
  .cart-header {
    padding: 22px 20px;
  }
  .cart-items {
    padding: 6px 20px;
  }
  .cart-footer {
    padding: 20px;
  }
  .cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .cart-item-image {
    width: 72px;
    height: 96px;
  }
  .floating-actions {
    right: 13px;
    bottom: 13px;
  }
  .floating-cart-button span {
    display: none;
  }
}
/* ==================================================
   MAESTRO AGE GATE
   FINAL OVERRIDE
================================================== */

/* BACKDROP */

#ageGate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  min-height: 100vh !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(181, 149, 96, 0.14),
      transparent 35%
    ),
    rgba(8, 7, 5, 0.98) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

#ageGate.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==================================================
   PANEL
================================================== */

#ageGate .age-panel-dob {
  width: min(560px, calc(100vw - 40px)) !important;
  padding:
    46px
    58px
    36px !important;
  margin: 0 !important;
  display: block !important;
  background: #e9ddc8 !important;
  color: #181510 !important;
  border:
    1px solid
    rgba(233, 221, 200, 0.25) !important;
  text-align: center !important;
  box-shadow:
    0 35px 90px
    rgba(0, 0, 0, 0.4) !important;
}

/* ==================================================
   LOGO
================================================== */

#ageGate .age-panel-dob .age-logo {
  display: block !important;
  width: 190px !important;
  height: auto !important;
  max-width: 70% !important;
  max-height: none !important;
  margin:
    0 auto
    25px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* ==================================================
   DIVIDER
================================================== */

#ageGate .age-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin:
    0 0
    25px !important;
  background:
    rgba(24, 21, 16, 0.3) !important;
}

/* ==================================================
   MAESTRO WORLDWIDE
================================================== */

#ageGate .age-label {
  margin:
    0 0
    8px !important;
  color: #685541 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

/* ==================================================
   WELCOME
================================================== */

#ageGate .age-panel-dob h2 {
  margin:
    0 0
    16px !important;
  color: #181510 !important;
  font-family:
    "Cormorant Garamond",
    serif !important;
  font-size: 46px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

/* ==================================================
   DESCRIPTION
================================================== */

#ageGate .age-description {
  width: 100% !important;
  max-width: 390px !important;
  margin:
    0 auto
    27px !important;
  color: #675d50 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

/* ==================================================
   YYYY MM DD LABEL
================================================== */

#ageGate .birth-date-labels {
  width: 270px !important;
  max-width: 100% !important;
  margin:
    0 auto
    7px !important;
  display: grid !important;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;
  gap: 10px !important;
}

#ageGate .birth-date-labels span {
  display: block !important;
  color: #181510 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* ==================================================
   DATE INPUT CONTAINER
================================================== */

#ageGate .birth-date {
  width: 270px !important;
  max-width: 100% !important;
  margin:
    0 auto !important;
  display: grid !important;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;
  gap: 10px !important;
  align-items: center !important;
}

/* ==================================================
   INPUT
================================================== */

#ageGate .birth-date input {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: block !important;
  border:
    1px solid
    rgba(24, 21, 16, 0.42) !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #181510 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 54px !important;
  text-align: center !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#ageGate .birth-date input::placeholder {
  color:
    rgba(
      24,
      21,
      16,
      0.4
    ) !important;
  opacity: 1 !important;
}

#ageGate .birth-date input:focus {
  border-color: #b59560 !important;
  background:
    rgba(
      255,
      255,
      255,
      0.2
    ) !important;
}

#ageGate .birth-date input.is-invalid {
  border-color: #8f3229 !important;
}

/* ==================================================
   ERROR
================================================== */

#ageGate .age-error {
  width: 100% !important;
  min-height: 18px !important;
  margin:
    10px auto
    0 !important;
  color: #8f3229 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* ==================================================
   ENTER BUTTON
================================================== */

#ageGate .age-enter-button {
  width: auto !important;
  min-width: 150px !important;
  height: 49px !important;
  margin:
    10px auto
    0 !important;
  padding:
    0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border:
    1px solid
    #0c0b09 !important;
  border-radius: 0 !important;
  background: #0c0b09 !important;
  color: #e9ddc8 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease !important;
}

#ageGate .age-enter-button:hover {
  background: #685541 !important;
  border-color:
    #685541 !important;
  transform:
    translateY(-2px) !important;
}

/* ==================================================
   EXIT BUTTON
================================================== */

#ageGate .age-exit {
  width: fit-content !important;
  margin:
    14px auto
    0 !important;
  padding: 5px !important;
  display: block !important;
  border: 0 !important;
  background:
    transparent !important;
  color: #675d50 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration:
    underline !important;
  text-transform:
    uppercase !important;
  cursor: pointer !important;
}

#ageGate .age-exit:hover {
  color: #0c0b09 !important;
}

/* ==================================================
   BOTTOM DIVIDER
================================================== */

#ageGate .age-bottom-divider {
  width: 100% !important;
  height: 1px !important;
  margin:
    28px 0
    18px !important;
  display: block !important;
  background:
    rgba(
      24,
      21,
      16,
      0.15
    ) !important;
}

/* ==================================================
   LEGAL
================================================== */

#ageGate .age-legal {
  width: 100% !important;
  max-width: 390px !important;
  margin:
    0 auto !important;
  color: #675d50 !important;
  font-family:
    "Manrope",
    sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

/* ==================================================
   MOBILE
================================================== */

@media (
  max-width: 600px
) {
  #ageGate {
    padding:
      14px !important;
  }
  #ageGate .age-panel-dob {
    width:
      calc(
        100vw - 28px
      ) !important;
    padding:
      34px
      22px
      27px !important;
  }
  #ageGate .age-panel-dob .age-logo {
    width: 160px !important;
    margin-bottom:
      22px !important;
  }
  #ageGate .age-panel-dob h2 {
    font-size:
      39px !important;
  }
  #ageGate .age-description {
    font-size:
      10px !important;
    margin-bottom:
      23px !important;
  }
  #ageGate .birth-date,
  #ageGate .birth-date-labels {
    width:
      240px !important;
    gap:
      7px !important;
  }
  #ageGate .birth-date input {
    height:
      50px !important;
    line-height:
      50px !important;
    font-size:
      11px !important;
  }
  #ageGate .age-enter-button {
    height:
      47px !important;
    min-width:
      145px !important;
  }
}

/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (
  max-width: 370px
) {
  #ageGate .age-panel-dob {
    padding:
      29px
      16px
      24px !important;
  }
  #ageGate .birth-date,
  #ageGate .birth-date-labels {
    width:
      100% !important;
  }
  #ageGate .age-panel-dob h2 {
    font-size:
      34px !important;
  }
}
/* ==================================================
   FINAL COLLECTION MENU
   BLAK / WHYT / RHYTHM CONSISTENT
================================================== */

/* Semua flavor item */
.flavor-tab {
  display: grid !important;
  grid-template-columns:
    44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  text-align: left !important;
}

/* ==================================================
   FONT NAMA
   SEMUA COLLECTION SAMA
================================================== */

.flavor-tab strong,
.flavor-tab[data-collection="blak"] strong,
.flavor-tab[data-collection="whyt"] strong,
.flavor-tab[data-collection="rhythm"] strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-family: var(--heading-font) !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

/* ==================================================
   BLAK + WHYT
   KODE JADI BULATAN
================================================== */

.flavor-tab[data-collection="blak"] > span,
.flavor-tab[data-collection="whyt"] > span {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: currentColor !important;
  font-family: var(--heading-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* B dan W tetap hilang */
.flavor-tab[data-collection="blak"] small,
.flavor-tab[data-collection="whyt"] small {
  display: none !important;
}

/* ==================================================
   RHYTHM
================================================== */

/* nomor 01-05 hilang */
.flavor-tab[data-collection="rhythm"] > span {
  display: none !important;
}

/* CAGED jadi lingkaran kiri */
.flavor-tab[data-collection="rhythm"] small {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: currentColor !important;
  font-family: var(--heading-font) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* ==================================================
   HOVER / SELECTED
   JANGAN BERGESER
================================================== */

.flavor-tab:hover,
.flavor-tab.is-selected,

.flavor-tab[data-collection="blak"]:hover,
.flavor-tab[data-collection="blak"].is-selected,

.flavor-tab[data-collection="whyt"]:hover,
.flavor-tab[data-collection="whyt"].is-selected,

.flavor-tab[data-collection="rhythm"]:hover,
.flavor-tab[data-collection="rhythm"].is-selected {
  padding-left: 22px !important;
}

/* ==================================================
   LAYOUT 5 KOLOM
   LAPTOP / TABLET LANDSCAPE
================================================== */

@media (max-width: 1180px) {
  .flavor-tab,
  .flavor-tab[data-collection="blak"],
  .flavor-tab[data-collection="whyt"],
  .flavor-tab[data-collection="rhythm"] {
    grid-template-columns:
      42px minmax(0, 1fr) !important;
    justify-items: initial !important;
    gap: 14px !important;
    min-height: 155px !important;
    padding: 18px 20px !important;
    text-align: left !important;
  }
  /* FONT SEMUA SAMA */
  .flavor-tab strong,
  .flavor-tab[data-collection="blak"] strong,
  .flavor-tab[data-collection="whyt"] strong,
  .flavor-tab[data-collection="rhythm"] strong {
    font-size: 21px !important;
    line-height: 1.08 !important;
  }
  /* BULATAN BLAK + WHYT */
  .flavor-tab[data-collection="blak"] > span,
  .flavor-tab[data-collection="whyt"] > span {
    width: 40px !important;
    height: 40px !important;
    font-size: 11px !important;
  }
  /* BULATAN RHYTHM */
  .flavor-tab[data-collection="rhythm"] small {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected,
  .flavor-tab[data-collection="blak"]:hover,
  .flavor-tab[data-collection="blak"].is-selected,
  .flavor-tab[data-collection="whyt"]:hover,
  .flavor-tab[data-collection="whyt"].is-selected,
  .flavor-tab[data-collection="rhythm"]:hover,
  .flavor-tab[data-collection="rhythm"].is-selected {
    padding-left: 20px !important;
  }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {
  .flavor-tab,
  .flavor-tab[data-collection="blak"],
  .flavor-tab[data-collection="whyt"],
  .flavor-tab[data-collection="rhythm"] {
    grid-template-columns:
      42px minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 15px 18px !important;
    gap: 15px !important;
  }
  .flavor-tab strong,
  .flavor-tab[data-collection="blak"] strong,
  .flavor-tab[data-collection="whyt"] strong,
  .flavor-tab[data-collection="rhythm"] strong {
    font-size: 25px !important;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 18px !important;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {
  .flavor-tab,
  .flavor-tab[data-collection="blak"],
  .flavor-tab[data-collection="whyt"],
  .flavor-tab[data-collection="rhythm"] {
    grid-template-columns:
      38px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 78px !important;
    padding: 13px 15px !important;
  }
  .flavor-tab strong,
  .flavor-tab[data-collection="blak"] strong,
  .flavor-tab[data-collection="whyt"] strong,
  .flavor-tab[data-collection="rhythm"] strong {
    font-size: 22px !important;
  }
  .flavor-tab[data-collection="blak"] > span,
  .flavor-tab[data-collection="whyt"] > span,
  .flavor-tab[data-collection="rhythm"] small {
    width: 35px !important;
    height: 35px !important;
  }
  .flavor-tab[data-collection="blak"] > span,
  .flavor-tab[data-collection="whyt"] > span {
    font-size: 10px !important;
  }
  .flavor-tab[data-collection="rhythm"] small {
    font-size: 16px !important;
  }
  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 15px !important;
  }
}
/* ==================================================
   MAESTRO NEW HOMEPAGE + STORY PAGE
================================================== */

/* ==================================================
   HOMEPAGE HERO
================================================== */

.maestro-hero-line {
  margin-top: 25px;
  color: var(--cream-dark);
  font-family: var(--heading-font);
  font-size: 21px;
  font-style: italic;
  letter-spacing: 2px;
}

.maestro-main-cover h3 {
  font-size: 40px;
  letter-spacing: 2px;
}

/* ==================================================
   HOMEPAGE COLLECTIONS
================================================== */

.maestro-collections {
  padding: 110px 6%;
}

.maestro-collections-header {
  width: min(1320px, 100%);
  margin: 0 auto 55px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}

.maestro-collections-header h2 {
  font-family: var(--heading-font);
  font-size: clamp(
    58px,
    7vw,
    92px
  );
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 0.9;
}

.maestro-collections-header h2 span {
  display: block;
  color: var(--brown);
  font-style: italic;
}

.maestro-collections-header > p {
  max-width: 270px;
  color: var(--muted-dark);
  font-size: 11px;
  line-height: 1.8;
  text-align: right;
}

/* GRID */

.collection-showcase {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

/* CARD */

.collection-card {
  min-width: 0;
  border-right: 1px solid var(--border-dark);
  overflow: hidden;
}

.collection-card:last-child {
  border-right: 0;
}

/* VISUAL */

.collection-card-visual {
  position: relative;
  height: 560px;
  background: var(--black);
  overflow: hidden;
}

.collection-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.7s ease,
    filter 0.5s ease;
}

.collection-card:hover
.collection-card-visual img {
  transform: scale(1.045);
}

.collection-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.52)
    );
  pointer-events: none;
}

.collection-index {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 3;
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.collection-word {
  position: absolute;
  left: 20px;
  bottom: -10px;
  z-index: 3;
  color: rgba(
    245,
    236,
    220,
    0.17
  );
  font-family: var(--heading-font);
  font-size: clamp(
    65px,
    7vw,
    115px
  );
  font-weight: 700;
  line-height: 0.8;
  pointer-events: none;
}

/* COPY */

.collection-card-copy {
  min-height: 350px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.collection-card-title p {
  color: var(--brown);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
}

.collection-card-title h3 {
  margin-top: 5px;
  font-family: var(--heading-font);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
}

.collection-definition {
  margin-top: 20px;
  color: var(--muted-dark);
  font-size: 11px;
  line-height: 1.8;
}

.collection-keywords {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.collection-keywords span {
  padding: 6px 10px;
  border: 1px solid var(--border-dark);
  color: var(--brown);
  font-family: var(--heading-font);
  font-size: 14px;
  font-style: italic;
}

.collection-link {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dark-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.collection-link span {
  font-size: 18px;
  transition:
    transform 0.3s ease;
}

.collection-link:hover span {
  transform:
    translate(
      4px,
      -4px
    );
}

/* ==================================================
   HOMEPAGE STORY
================================================== */

.maestro-story-teaser {
  position: relative;
  min-height: 600px;
  padding: 95px 9%;
  display: grid;
  grid-template-columns:
    0.6fr
    1.4fr;
  align-items: center;
  gap: 100px;
  overflow: hidden;
}

.story-background-word {
  position: absolute;
  right: -40px;
  bottom: -55px;
  color: rgba(
    233,
    221,
    200,
    0.025
  );
  font-family: var(--heading-font);
  font-size: clamp(
    180px,
    28vw,
    440px
  );
  font-weight: 600;
  line-height: 0.7;
}

.maestro-story-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.maestro-story-symbol img {
  width: 135px;
  max-height: 250px;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.maestro-story-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.maestro-story-copy h2 {
  font-family: var(--heading-font);
  font-size: clamp(
    60px,
    8vw,
    105px
  );
  font-weight: 500;
  letter-spacing: -3px;
  line-height: 0.84;
}

.maestro-story-copy h2 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.maestro-story-copy > p:not(
  .section-kicker
) {
  max-width: 500px;
  margin: 25px 0 30px;
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.9;
}

/* ==================================================
   HOMEPAGE PRINCIPLES
================================================== */

.maestro-principles {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  border-top:
    1px solid
    var(--border-dark);
  border-bottom:
    1px solid
    var(--border-dark);
}

.maestro-principle {
  min-height: 260px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right:
    1px solid
    var(--border-dark);
  transition:
    background 0.35s ease,
    color 0.35s ease;
}

.maestro-principle:last-child {
  border-right: 0;
}

.maestro-principle > span {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.maestro-principle strong {
  margin-top: auto;
  font-family: var(--heading-font);
  font-size: 46px;
  font-weight: 600;
}

.maestro-principle small {
  color: var(--muted-dark);
  font-size: 10px;
}

.maestro-principle:hover {
  background: var(--black);
  color: var(--cream);
}

.maestro-principle:hover span {
  color: var(--gold-light);
}

.maestro-principle:hover small {
  color: var(--muted-light);
}

/* ==================================================
   HOMEPAGE COMMUNITY
================================================== */

.maestro-community {
  min-height: 520px;
  padding: 95px 9%;
  display: grid;
  grid-template-columns:
    0.55fr
    1.45fr;
  align-items: center;
  gap: 90px;
}

.maestro-community-symbol {
  display: grid;
  place-items: center;
}

.maestro-community-symbol img {
  width: 130px;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.maestro-community-copy h2 {
  font-family: var(--heading-font);
  font-size: clamp(
    60px,
    8vw,
    100px
  );
  font-weight: 500;
  line-height: 0.85;
}

.maestro-community-copy h2 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.maestro-community-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.maestro-text-link {
  color: var(--cream-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-decoration: underline;
  text-transform: uppercase;
}

/* ==================================================
   STORY PAGE HERO
================================================== */

.story-page-hero {
  position: relative;
  min-height: 690px;
  padding: 150px 8% 90px;
  display: grid;
  grid-template-columns:
    1.3fr
    0.7fr;
  align-items: center;
  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(
        181,
        149,
        96,
        0.18
      ),
      transparent 27%
    ),
    var(--black);
  overflow: hidden;
}

.story-page-background {
  position: absolute;
  right: -80px;
  bottom: -50px;
  color: rgba(
    233,
    221,
    200,
    0.03
  );
  font-family: var(--heading-font);
  font-size: clamp(
    170px,
    27vw,
    430px
  );
  font-weight: 600;
  line-height: 0.8;
}

.story-page-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

.story-page-hero-copy h1 {
  margin: 25px 0;
  font-family: var(--heading-font);
  font-size: clamp(
    74px,
    10vw,
    135px
  );
  font-weight: 500;
  letter-spacing: -5px;
  line-height: 0.8;
}

.story-page-hero-copy h1 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.story-page-hero-copy > p:last-child {
  color: var(--muted-light);
  font-family: var(--heading-font);
  font-size: 22px;
  font-style: italic;
}

.story-page-hero-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.story-page-hero-symbol img {
  width: 165px;
  max-height: 310px;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

/* ==================================================
   STORY READING
================================================== */

.story-reading {
  padding: 115px 8%;
  display: grid;
  grid-template-columns:
    1.1fr
    0.9fr;
  gap: 100px;
}

.story-reading-heading h2 {
  max-width: 720px;
  font-family: var(--heading-font);
  font-size: clamp(
    55px,
    7vw,
    90px
  );
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 0.95;
}

.story-reading-copy {
  align-self: end;
}

.story-reading-copy p {
  margin-bottom: 20px;
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.95;
}

.story-reading-copy .story-lead {
  color: var(--dark-text);
  font-family: var(--heading-font);
  font-size: 31px;
  font-weight: 600;
}

/* ==================================================
   STORY PRINCIPLES
================================================== */

.story-principles {
  padding: 0 7% 110px;
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
}

.story-principle {
  min-height: 280px;
  padding: 32px;
  border-top:
    1px solid
    var(--border-dark);
  border-right:
    1px solid
    var(--border-dark);
  border-bottom:
    1px solid
    var(--border-dark);
}

.story-principle:first-child {
  border-left:
    1px solid
    var(--border-dark);
}

.story-principle span {
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.story-principle h3 {
  margin-top: 85px;
  font-family: var(--heading-font);
  font-size: 46px;
  font-weight: 600;
}

.story-principle p {
  margin-top: 5px;
  color: var(--muted-dark);
  font-size: 11px;
}

/* ==================================================
   STORY PHILOSOPHY
================================================== */

.story-philosophy {
  min-height: 680px;
  padding: 100px 8%;
  display: grid;
  grid-template-columns:
    0.85fr
    1.15fr;
  align-items: center;
  gap: 100px;
}

.story-philosophy-symbol {
  display: grid;
  place-items: center;
}

.story-music-circle {
  width: 390px;
  max-width: 92%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border:
    1px solid
    var(--border-light);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(
        181,
        149,
        96,
        0.15
      ),
      transparent 55%
    );
}

.story-music-circle span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
}

.story-music-circle img {
  width: 38px;
  margin: 10px 0;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.story-music-circle strong {
  font-family: var(--heading-font);
  font-size: 70px;
  font-weight: 500;
}

.story-philosophy-copy h2 {
  max-width: 720px;
  font-family: var(--heading-font);
  font-size: clamp(
    58px,
    7vw,
    90px
  );
  font-weight: 500;
  line-height: 0.9;
}

.story-philosophy-copy > p:not(
  .section-kicker
) {
  max-width: 600px;
  margin-top: 25px;
  color: var(--muted-light);
  font-size: 13px;
  line-height: 1.9;
}

.story-philosophy-tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.story-philosophy-tags span {
  padding: 8px 14px;
  border:
    1px solid
    var(--border-light);
  color: var(--cream-dark);
  font-family: var(--heading-font);
  font-size: 17px;
  font-style: italic;
}

/* ==================================================
   STORY COMPOSITION
================================================== */

.story-composition {
  padding: 110px 7%;
}

.story-composition-heading {
  margin-bottom: 60px;
}

.story-composition-heading h2 {
  font-family: var(--heading-font);
  font-size: clamp(
    60px,
    8vw,
    100px
  );
  font-weight: 500;
  line-height: 0.9;
}

.story-composition-heading h2 span {
  color: var(--brown);
  font-style: italic;
}

.story-composition-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  border-top:
    1px solid
    var(--border-dark);
  border-bottom:
    1px solid
    var(--border-dark);
}

.story-composition-grid article {
  min-height: 310px;
  padding: 35px;
  border-right:
    1px solid
    var(--border-dark);
}

.story-composition-grid article:last-child {
  border-right: 0;
}

.story-composition-grid article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border:
    1px solid
    var(--dark-text);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 20px;
}

.story-composition-grid strong {
  display: block;
  margin-top: 80px;
  font-family: var(--heading-font);
  font-size: 40px;
  font-weight: 600;
}

.story-composition-grid p {
  margin-top: 10px;
  max-width: 300px;
  color: var(--muted-dark);
  font-size: 11px;
  line-height: 1.8;
}

/* ==================================================
   STORY COMMUNITY
================================================== */

.story-community {
  min-height: 600px;
  padding: 100px 9%;
  display: grid;
  grid-template-columns:
    0.55fr
    1.45fr;
  align-items: center;
  gap: 90px;
}

.story-community-symbol {
  display: grid;
  place-items: center;
}

.story-community-symbol img {
  width: 145px;
  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.story-community-copy h2 {
  max-width: 820px;
  font-family: var(--heading-font);
  font-size: clamp(
    58px,
    7vw,
    92px
  );
  font-weight: 500;
  line-height: 0.87;
}

.story-community-copy h2 span {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.story-community-copy > p:not(
  .section-kicker
) {
  max-width: 650px;
  margin-top: 25px;
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.9;
}

.story-community-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {
  .collection-showcase {
    grid-template-columns: 1fr;
  }
  .collection-card {
    display: grid;
    grid-template-columns:
      1fr 1fr;
    border-right: 0;
    border-bottom:
      1px solid
      var(--border-dark);
  }
  .collection-card:last-child {
    border-bottom: 0;
  }
  .collection-card-visual {
    height: 500px;
  }
  .collection-card-copy {
    min-height: 500px;
  }
  .story-reading {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 820px) {
  .maestro-collections-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .maestro-collections-header > p {
    text-align: left;
  }
  .maestro-story-teaser,
  .maestro-community,
  .story-page-hero,
  .story-philosophy,
  .story-community {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .maestro-principles,
  .story-principles,
  .story-composition-grid {
    grid-template-columns: 1fr;
  }
  .maestro-principle,
  .story-composition-grid article {
    border-right: 0;
    border-bottom:
      1px solid
      var(--border-dark);
  }
  .story-principle {
    border-left:
      1px solid
      var(--border-dark);
  }
  .maestro-story-symbol,
  .maestro-community-symbol,
  .story-page-hero-symbol,
  .story-community-symbol {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .maestro-main-cover h3 {
    font-size: 30px;
  }
  .maestro-collections {
    padding: 80px 18px;
  }
  .maestro-collections-header h2 {
    font-size: 53px;
  }
  .collection-card {
    grid-template-columns: 1fr;
  }
  .collection-card-visual {
    height: 520px;
  }
  .collection-card-copy {
    min-height: 320px;
    padding: 28px 23px;
  }
  .collection-card-title h3 {
    font-size: 46px;
  }
  .maestro-story-teaser,
  .maestro-community {
    min-height: auto;
    padding: 80px 23px;
  }
  .maestro-story-copy h2,
  .maestro-community-copy h2 {
    font-size: 55px;
    letter-spacing: -2px;
  }
  .maestro-story-symbol img,
  .maestro-community-symbol img {
    width: 90px;
  }
  .maestro-principle {
    min-height: 190px;
    padding: 25px;
  }
  .maestro-community-actions,
  .story-community-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .maestro-community-actions .button,
  .story-community-actions .button {
    width: 100%;
  }
  .story-page-hero {
    min-height: auto;
    padding: 130px 23px 80px;
  }
  .story-page-hero-copy h1 {
    font-size: 65px;
    letter-spacing: -3px;
  }
  .story-page-hero-symbol img {
    width: 95px;
  }
  .story-reading {
    padding: 80px 23px;
  }
  .story-reading-heading h2 {
    font-size: 52px;
  }
  .story-principles {
    padding: 0 23px 80px;
  }
  .story-philosophy,
  .story-community {
    padding: 80px 23px;
  }
  .story-philosophy-copy h2,
  .story-community-copy h2 {
    font-size: 54px;
  }
  .story-music-circle {
    width: 300px;
  }
  .story-music-circle strong {
    font-size: 54px;
  }
  .story-composition {
    padding: 80px 23px;
  }
  .story-composition-heading h2 {
    font-size: 55px;
  }
  .story-composition-grid article {
    min-height: 250px;
    padding: 28px 24px;
  }
  .story-composition-grid strong {
    margin-top: 55px;
  }
}
.flavor-tab[data-collection="blak"] > span,
.flavor-tab[data-collection="whyt"] > span {
  width: 48px !important;
  height: 48px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.flavor-tab[data-collection="blak"],
.flavor-tab[data-collection="whyt"] {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 16px !important;
}
/* ==================================================
   COMMUNITY PAGE
================================================== */

/* HERO */

.community-page-hero {
  position: relative;

  min-height: 720px;
  padding: 145px 8% 95px;

  display: grid;
  grid-template-columns:
    0.55fr
    1.45fr;

  align-items: center;
  gap: 90px;

  background:
    radial-gradient(
      circle at 20% 48%,
      rgba(181, 149, 96, 0.18),
      transparent 28%
    ),
    var(--black);

  overflow: hidden;
}

.community-page-word {
  position: absolute;

  right: -70px;
  bottom: -55px;

  color:
    rgba(
      233,
      221,
      200,
      0.025
    );

  font-family: var(--heading-font);

  font-size:
    clamp(
      150px,
      23vw,
      380px
    );

  font-weight: 600;
  line-height: 0.8;

  pointer-events: none;
}

.community-page-hero-symbol,
.community-page-hero-copy {
  position: relative;
  z-index: 2;
}

.community-page-hero-symbol {
  display: grid;
  place-items: center;
}

.community-page-hero-symbol img {
  width: 150px;
  max-height: 290px;

  object-fit: contain;

  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.community-page-hero-copy {
  max-width: 850px;
}

.community-page-hero-copy h1 {
  margin: 25px 0;

  font-family: var(--heading-font);

  font-size:
    clamp(
      70px,
      9vw,
      125px
    );

  font-weight: 500;
  letter-spacing: -4px;
  line-height: 0.82;
}

.community-page-hero-copy h1 span {
  display: block;

  color: var(--gold-light);
  font-style: italic;
}

.community-page-hero-copy > p {
  max-width: 600px;

  color: var(--muted-light);

  font-size: 12px;
  line-height: 1.9;
}

.community-page-hero-copy .button {
  margin-top: 30px;
}

/* ==================================================
   COMMUNITY SPACES
================================================== */

.community-spaces {
  padding: 110px 7%;
}

.community-spaces-heading {
  max-width: 900px;

  margin-bottom: 55px;
}

.community-spaces-heading h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      58px,
      8vw,
      100px
    );

  font-weight: 500;
  letter-spacing: -2px;
  line-height: 0.88;
}

.community-spaces-heading h2 span {
  display: block;

  color: var(--brown);
  font-style: italic;
}

/* PLATFORM GRID */

.community-platform-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  border:
    1px solid
    var(--border-dark);
}

.community-platform-card {
  min-height: 620px;

  padding: 38px;

  display: flex;
  flex-direction: column;

  border-right:
    1px solid
    var(--border-dark);

  background: var(--cream);

  color: var(--dark-text);

  transition:
    background 0.4s ease,
    color 0.4s ease;
}

.community-platform-card:last-child {
  border-right: 0;
}

.community-platform-card:hover {
  background: var(--black);

  color: var(--cream);
}

/* TOP */

.community-platform-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community-platform-number {
  color: var(--brown);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.community-platform-whatsapp

/* COPY */

.community-platform-copy {
  margin-top: 90px;
}

.community-platform-copy > p:first-child {
  color: var(--brown);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
}

.community-platform-copy h3 {
  margin-top: 5px;

  font-family: var(--heading-font);

  font-size:
    clamp(
      52px,
      6vw,
      76px
    );

  font-weight: 600;
  line-height: 0.9;
}

.community-platform-description {
  max-width: 480px;

  margin-top: 24px;

  color: var(--muted-dark);

  font-size: 11px;
  line-height: 1.9;
}

.community-platform-card:hover
.community-platform-description {
  color: var(--muted-light);
}

/* FEATURES */

.community-platform-features {
  margin-top: 30px;

  list-style: none;
}

.community-platform-features li {
  padding: 11px 0;

  border-bottom:
    1px solid
    var(--border-dark);

  font-family: var(--heading-font);

  font-size: 18px;
}

.community-platform-card:hover
.community-platform-features li {
  border-color: var(--border-light);
}

/* LINK */

.community-platform-link {
  margin-top: auto;
  padding-top: 35px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-top:
    1px solid
    var(--border-dark);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.community-platform-link span {
  font-size: 20px;

  transition:
    transform 0.3s ease;
}

.community-platform-link:hover span {
  transform:
    translate(
      4px,
      -4px
    );
}

.community-platform-card:hover
.community-platform-link {
  border-color: var(--border-light);
}

.community-link-disabled {
  opacity: 0.55;

  cursor: default;
  pointer-events: none;
}

/* ==================================================
   COMMUNITY VALUES
================================================== */

.community-values {
  padding: 110px 7%;
}

.community-values-heading {
  margin-bottom: 55px;
}

.community-values-heading h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      8vw,
      100px
    );

  font-weight: 500;
  line-height: 0.87;
}

.community-values-heading h2 span {
  color: var(--gold-light);

  font-style: italic;
}

.community-values-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    var(--border-light);

  border-bottom:
    1px solid
    var(--border-light);
}

.community-value {
  min-height: 300px;

  padding: 35px;

  border-right:
    1px solid
    var(--border-light);
}

.community-value:last-child {
  border-right: 0;
}

.community-value > span {
  color: var(--gold-light);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.community-value h3 {
  margin-top: 90px;

  font-family: var(--heading-font);

  font-size: 46px;
  font-weight: 600;
}

.community-value p {
  max-width: 300px;

  margin-top: 8px;

  color: var(--muted-light);

  font-size: 10px;
  line-height: 1.8;
}

/* ==================================================
   FINAL CTA
================================================== */

.community-final-cta {
  min-height: 560px;

  padding: 95px 9%;

  display: grid;

  grid-template-columns:
    0.55fr
    1.45fr;

  align-items: center;

  gap: 90px;
}

.community-final-symbol {
  display: grid;
  place-items: center;
}

.community-final-symbol img {
  width: 135px;
  max-height: 250px;
}

.community-final-copy h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      8vw,
      100px
    );

  font-weight: 500;
  line-height: 0.86;
}

.community-final-copy h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.community-final-copy > p:not(
  .section-kicker
) {
  max-width: 500px;

  margin: 24px 0 30px;

  color: var(--muted-dark);

  font-size: 11px;
  line-height: 1.9;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 820px) {

  .community-page-hero,
  .community-final-cta {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .community-page-hero-symbol,
  .community-final-symbol {
    justify-content: flex-start;
  }

  .community-platform-grid,
  .community-values-grid {
    grid-template-columns: 1fr;
  }

  .community-platform-card {
    border-right: 0;

    border-bottom:
      1px solid
      var(--border-dark);
  }

  .community-platform-card:last-child {
    border-bottom: 0;
  }

  .community-value {
    border-right: 0;

    border-bottom:
      1px solid
      var(--border-light);
  }

  .community-value:last-child {
    border-bottom: 0;
  }

}

@media (max-width: 600px) {

  .community-page-hero {
    min-height: auto;

    padding:
      130px
      23px
      80px;
  }

  .community-page-hero-symbol img {
    width: 95px;
  }

  .community-page-hero-copy h1 {
    font-size: 63px;

    letter-spacing: -3px;
  }

  .community-spaces,
  .community-values {
    padding:
      80px
      18px;
  }

  .community-spaces-heading h2,
  .community-values-heading h2 {
    font-size: 53px;
  }

  .community-platform-card {
    min-height: 540px;

    padding: 28px 24px;
  }

  .community-platform-copy {
    margin-top: 60px;
  }

  .community-platform-copy h3 {
    font-size: 52px;
  }

  .community-value {
    min-height: 230px;

    padding: 28px 24px;
  }

  .community-value h3 {
    margin-top: 55px;

    font-size: 40px;
  }

  .community-final-cta {
    min-height: auto;

    padding:
      80px
      23px;
  }

  .community-final-symbol img {
    width: 90px;
  }

  .community-final-copy h2 {
    font-size: 55px;
  }

  .community-final-copy .button {
    width: 100%;
  }

}
/* ==================================================
   HOMEPAGE COMMUNITY
================================================== */

.maestro-community-description {
  max-width: 520px;

  margin-top: 24px;

  color: var(--muted-light);

  font-size: 12px;
  line-height: 1.9;
}

.community-coming-soon {
  opacity: 0.55;

  cursor: default;

  pointer-events: none;
}
/* ==================================================
   COMMUNITY SOCIAL LOGOS
================================================== */

.community-social-logo {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  color: #0c0b09;

  background: transparent;

  border: 0;
  border-radius: 0;

  flex-shrink: 0;
}

.community-social-logo svg {
  width: 36px;
  height: 36px;

  display: block;

  fill: currentColor;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.community-platform-card:hover
.community-social-logo svg {
  transform: scale(1.08);
}

/* KEEP CARD LIGHT WHEN HOVERED */

.community-platform-card:hover {
  background: var(--cream-light);
  color: var(--dark-text);
}

.community-platform-card:hover
.community-platform-description {
  color: var(--muted-dark);
}

.community-platform-card:hover
.community-platform-features li {
  border-color: var(--border-dark);
}

.community-platform-card:hover
.community-platform-link {
  border-color: var(--border-dark);
}

/* MOBILE */

@media (max-width: 600px) {

  .community-social-logo {
    width: 48px;
    height: 48px;
  }

  .community-social-logo svg {
    width: 31px;
    height: 31px;
  }

}
/* ==================================================
   COMMUNITY CARDS
   FINAL SYMMETRICAL LAYOUT
================================================== */

.community-platform-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  align-items: stretch !important;
}

/* CARD */

.community-platform-card,
.community-platform-card.community-platform-whatsapp {
  min-height: 685px !important;
  height: 100% !important;

  padding: 38px !important;

  display: grid !important;

  grid-template-rows:
    auto
    1fr
    auto !important;

  background: var(--cream) !important;
  color: var(--dark-text) !important;
}

/* ==================================================
   TOP: NUMBER + LOGO
================================================== */

.community-platform-top {
  width: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}

.community-platform-number {
  margin: 0 !important;
}

.community-social-logo {
  width: 56px !important;
  height: 56px !important;

  margin: 0 !important;

  display: grid !important;
  place-items: center !important;
}

.community-social-logo svg {
  width: 36px !important;
  height: 36px !important;
}

/* ==================================================
   MAIN COPY
================================================== */

.community-platform-copy,
.community-platform-whatsapp .community-platform-copy {
  margin: 0 !important;

  padding-top: 68px !important;

  display: flex !important;
  flex-direction: column !important;
}

/* LABEL */

.community-platform-copy > p:first-child {
  margin: 0 0 10px !important;

  min-height: 12px !important;
}

/* TITLE */

.community-platform-copy h3 {
  margin: 0 !important;

  min-height: 126px !important;

  display: flex !important;
  align-items: flex-start !important;

  font-size: clamp(
    52px,
    5vw,
    72px
  ) !important;

  line-height: 0.92 !important;
}

/* DESCRIPTION */

.community-platform-description {
  min-height: 82px !important;

  margin: 18px 0 0 !important;

  line-height: 1.9 !important;
}

/* ==================================================
   FEATURES
================================================== */

.community-platform-features {
  margin: 28px 0 0 !important;

  padding: 0 !important;
}

.community-platform-features li {
  min-height: 54px !important;

  padding: 14px 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* ==================================================
   BOTTOM LINK
================================================== */

.community-platform-link {
  width: 100% !important;

  margin: 32px 0 0 !important;

  padding: 32px 0 0 !important;

  align-self: end !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}

/* ==================================================
   HOVER
================================================== */

.community-platform-card:hover {
  background: var(--cream-light) !important;
  color: var(--dark-text) !important;
}

/* ==================================================
   TABLET / MOBILE
================================================== */

@media (max-width: 820px) {

  .community-platform-grid {
    grid-template-columns: 1fr !important;
  }

  .community-platform-card,
  .community-platform-card.community-platform-whatsapp {
    min-height: 620px !important;
  }

}

@media (max-width: 600px) {

  .community-platform-card,
  .community-platform-card.community-platform-whatsapp {
    min-height: 560px !important;

    padding: 28px 24px !important;
  }

  .community-platform-copy,
  .community-platform-whatsapp .community-platform-copy {
    padding-top: 50px !important;
  }

  .community-platform-copy h3 {
    min-height: auto !important;

    font-size: 52px !important;
  }

  .community-platform-description {
    min-height: auto !important;
  }

}
/* ==================================================
   HOME PHILOSOPHY TEASER
================================================== */

.home-philosophy-teaser {
  padding-top: 95px;
}

.home-philosophy-intro {
  padding: 0 7% 65px;

  display: grid;

  grid-template-columns:
    1.3fr 0.7fr;

  align-items: end;

  gap: 70px;
}

.home-philosophy-intro h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      58px,
      7vw,
      92px
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -2px;
}

.home-philosophy-intro h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.home-philosophy-side {
  padding-bottom: 5px;
}

.home-philosophy-side p {
  max-width: 420px;

  color: var(--muted-dark);

  font-size: 11px;

  line-height: 1.9;
}

.home-philosophy-link {
  margin-top: 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-width: 260px;

  padding-bottom: 8px;

  border-bottom:
    1px solid
    var(--dark-text);

  color: var(--dark-text);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.home-philosophy-link span {
  font-size: 17px;
}

/* ARROW IN PRINCIPLE */

.maestro-principle {
  position: relative;
}

.maestro-principle b {
  position: absolute;

  top: 30px;
  right: 30px;

  font-family: var(--body-font);

  font-size: 17px;

  font-weight: 400;

  opacity: 0;

  transform:
    translate(-5px, 5px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.maestro-principle:hover b {
  opacity: 1;

  transform:
    translate(0, 0);
}

/* ==================================================
   PHILOSOPHY HERO
================================================== */

.philosophy-page-hero {
  position: relative;

  min-height: 720px;

  padding:
    145px
    8%
    95px;

  display: grid;

  grid-template-columns:
    0.55fr
    1.45fr;

  align-items: center;

  gap: 90px;

  background:
    radial-gradient(
      circle at 20% 48%,
      rgba(181, 149, 96, 0.17),
      transparent 28%
    ),
    var(--black);

  overflow: hidden;
}

.philosophy-background-word {
  position: absolute;

  right: -50px;
  bottom: -50px;

  color:
    rgba(
      233,
      221,
      200,
      0.025
    );

  font-family: var(--heading-font);

  font-size:
    clamp(
      150px,
      23vw,
      390px
    );

  font-weight: 600;

  line-height: 0.8;
}

.philosophy-hero-symbol,
.philosophy-hero-copy {
  position: relative;

  z-index: 2;
}

.philosophy-hero-symbol {
  display: grid;

  place-items: center;
}

.philosophy-hero-symbol img {
  width: 150px;

  max-height: 290px;

  object-fit: contain;

  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

.philosophy-hero-copy h1 {
  margin:
    25px
    0;

  font-family: var(--heading-font);

  font-size:
    clamp(
      72px,
      9vw,
      125px
    );

  font-weight: 500;

  letter-spacing: -4px;

  line-height: 0.82;
}

.philosophy-hero-copy h1 span {
  display: block;

  color: var(--gold-light);

  font-style: italic;
}

.philosophy-hero-copy > p {
  max-width: 540px;

  color: var(--muted-light);

  font-size: 12px;

  line-height: 1.9;
}

.philosophy-hero-copy .button {
  margin-top: 30px;
}

/* ==================================================
   PHILOSOPHY INTRO
================================================== */

.philosophy-intro {
  padding:
    110px
    8%;

  display: grid;

  grid-template-columns:
    1.1fr
    0.9fr;

  gap: 100px;
}

.philosophy-intro-heading h2 {
  max-width: 720px;

  font-family: var(--heading-font);

  font-size:
    clamp(
      58px,
      7vw,
      92px
    );

  font-weight: 500;

  line-height: 0.92;

  letter-spacing: -2px;
}

.philosophy-intro-heading h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.philosophy-intro-copy {
  align-self: end;
}

.philosophy-intro-copy p {
  margin-bottom: 20px;

  color: var(--muted-dark);

  font-size: 12px;

  line-height: 1.95;
}

.philosophy-intro-copy
.philosophy-lead {
  color: var(--dark-text);

  font-family: var(--heading-font);

  font-size: 30px;

  font-weight: 600;

  line-height: 1.2;
}

/* ==================================================
   THREE PRINCIPLES
================================================== */

.philosophy-principles {
  padding:
    0
    7%
    110px;
}

.philosophy-principle {
  min-height: 310px;

  display: grid;

  grid-template-columns:
    0.25fr
    0.75fr
    1fr;

  align-items: center;

  border-top:
    1px solid
    var(--border-dark);
}

.philosophy-principle:last-child {
  border-bottom:
    1px solid
    var(--border-dark);
}

.philosophy-principle-number span {
  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--dark-text);

  border-radius: 50%;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;
}

.philosophy-principle-title p {
  color: var(--brown);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}

.philosophy-principle-title h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      50px,
      6vw,
      78px
    );

  font-weight: 600;

  line-height: 1;
}

.philosophy-principle-copy {
  max-width: 520px;
}

.philosophy-principle-copy strong {
  display: block;

  margin-bottom: 15px;

  font-family: var(--heading-font);

  font-size: 26px;

  font-weight: 600;
}

.philosophy-principle-copy p {
  color: var(--muted-dark);

  font-size: 11px;

  line-height: 1.9;
}

/* ==================================================
   MUSIC SECTION
================================================== */

.philosophy-music {
  min-height: 680px;

  padding:
    100px
    8%;

  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  align-items: center;

  gap: 100px;
}

.philosophy-music-visual {
  display: grid;

  place-items: center;
}

.philosophy-record {
  width: 400px;

  max-width: 92%;

  aspect-ratio: 1;

  padding: 30px;

  border:
    1px solid
    var(--border-light);

  border-radius: 50%;
}

.philosophy-record-ring {
  width: 100%;

  height: 100%;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      233,
      221,
      200,
      0.15
    );

  border-radius: 50%;

  background:
    repeating-radial-gradient(
      circle,
      transparent 0,
      transparent 6px,
      rgba(
        233,
        221,
        200,
        0.08
      ) 7px
    );
}

.philosophy-record-center {
  width: 135px;

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 10px;

  border-radius: 50%;

  background: var(--cream);

  color: var(--black);
}

.philosophy-record-center img {
  width: 32px;
}

.philosophy-record-center span {
  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}

.philosophy-music-copy h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      7vw,
      95px
    );

  font-weight: 500;

  line-height: 0.87;
}

.philosophy-music-copy h2 span {
  display: block;

  color: var(--gold-light);

  font-style: italic;
}

.philosophy-music-copy > p:not(
  .section-kicker
) {
  max-width: 580px;

  margin-top: 25px;

  color: var(--muted-light);

  font-size: 12px;

  line-height: 1.9;
}

.philosophy-music-words {
  margin-top: 30px;

  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}

.philosophy-music-words span {
  padding:
    8px
    14px;

  border:
    1px solid
    var(--border-light);

  color: var(--cream-dark);

  font-family: var(--heading-font);

  font-size: 17px;

  font-style: italic;
}

/* ==================================================
   PROCESS
================================================== */

.philosophy-process {
  padding:
    110px
    7%;
}

.philosophy-process-heading {
  margin-bottom: 60px;
}

.philosophy-process-heading h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      8vw,
      100px
    );

  font-weight: 500;

  line-height: 0.88;
}

.philosophy-process-heading h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.philosophy-process-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  border-top:
    1px solid
    var(--border-dark);

  border-bottom:
    1px solid
    var(--border-dark);
}

.philosophy-process-grid article {
  min-height: 300px;

  padding: 30px;

  border-right:
    1px solid
    var(--border-dark);
}

.philosophy-process-grid article:last-child {
  border-right: 0;
}

.philosophy-process-grid article > span {
  color: var(--brown);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;
}

.philosophy-process-grid strong {
  display: block;

  margin-top: 100px;

  font-family: var(--heading-font);

  font-size: 40px;

  font-weight: 600;
}

.philosophy-process-grid p {
  max-width: 230px;

  margin-top: 8px;

  color: var(--muted-dark);

  font-size: 10px;

  line-height: 1.8;
}

/* ==================================================
   COLLECTION EXPRESSIONS
================================================== */

.philosophy-collections {
  padding:
    110px
    7%;
}

.philosophy-collections-heading {
  margin-bottom: 60px;
}

.philosophy-collections-heading h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      8vw,
      100px
    );

  font-weight: 500;

  line-height: 0.87;
}

.philosophy-collections-heading h2 span {
  display: block;

  color: var(--gold-light);

  font-style: italic;
}

.philosophy-collection-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  border-top:
    1px solid
    var(--border-light);

  border-bottom:
    1px solid
    var(--border-light);
}

.philosophy-collection-card {
  position: relative;

  min-height: 290px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  border-right:
    1px solid
    var(--border-light);

  color: var(--cream);

  transition:
    background 0.35s ease,
    color 0.35s ease;
}

.philosophy-collection-card:last-child {
  border-right: 0;
}

.philosophy-collection-card > span {
  color: var(--gold-light);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;
}

.philosophy-collection-card strong {
  margin-top: auto;

  font-family: var(--heading-font);

  font-size: 56px;

  font-weight: 600;
}

.philosophy-collection-card small {
  color: var(--muted-light);

  font-family: var(--heading-font);

  font-size: 16px;

  font-style: italic;
}

.philosophy-collection-card b {
  position: absolute;

  top: 30px;
  right: 30px;

  font-size: 19px;

  font-weight: 400;
}

.philosophy-collection-card:hover {
  background: var(--cream);

  color: var(--black);
}

.philosophy-collection-card:hover small {
  color: var(--muted-dark);
}

/* ==================================================
   FINAL
================================================== */

.philosophy-final {
  min-height: 550px;

  padding:
    95px
    9%;

  display: grid;

  grid-template-columns:
    0.55fr
    1.45fr;

  align-items: center;

  gap: 90px;
}

.philosophy-final-symbol {
  display: grid;

  place-items: center;
}

.philosophy-final-symbol img {
  width: 135px;
}

.philosophy-final-copy h2 {
  font-family: var(--heading-font);

  font-size:
    clamp(
      60px,
      8vw,
      100px
    );

  font-weight: 500;

  line-height: 0.86;
}

.philosophy-final-copy h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.philosophy-final-copy > p:not(
  .section-kicker
) {
  margin:
    23px
    0
    30px;

  color: var(--muted-dark);

  font-size: 11px;

  line-height: 1.9;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {

  .home-philosophy-intro,
  .philosophy-page-hero,
  .philosophy-intro,
  .philosophy-music,
  .philosophy-final {
    grid-template-columns: 1fr;
  }

  .philosophy-principle {
    grid-template-columns:
      80px
      0.8fr
      1.2fr;
  }

  .philosophy-process-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .philosophy-process-grid article:nth-child(2) {
    border-right: 0;
  }

  .philosophy-collection-grid {
    grid-template-columns: 1fr;
  }

  .philosophy-collection-card {
    border-right: 0;

    border-bottom:
      1px solid
      var(--border-light);
  }

  .philosophy-collection-card:last-child {
    border-bottom: 0;
  }

}

@media (max-width: 600px) {

  .home-philosophy-teaser {
    padding-top: 75px;
  }

  .home-philosophy-intro {
    padding:
      0
      20px
      50px;
  }

  .home-philosophy-intro h2 {
    font-size: 52px;
  }

  .philosophy-page-hero {
    min-height: auto;

    padding:
      130px
      23px
      80px;
  }

  .philosophy-hero-symbol {
    justify-content: flex-start;
  }

  .philosophy-hero-symbol img {
    width: 90px;
  }

  .philosophy-hero-copy h1 {
    font-size: 62px;

    letter-spacing: -3px;
  }

  .philosophy-intro {
    padding:
      80px
      23px;
  }

  .philosophy-intro-heading h2 {
    font-size: 52px;
  }

  .philosophy-principles {
    padding:
      0
      23px
      80px;
  }

  .philosophy-principle {
    padding:
      35px
      0;

    grid-template-columns: 1fr;

    gap: 25px;
  }

  .philosophy-principle-title h2 {
    font-size: 52px;
  }

  .philosophy-music {
    padding:
      80px
      23px;
  }

  .philosophy-record {
    width: 300px;
  }

  .philosophy-music-copy h2 {
    font-size: 54px;
  }

  .philosophy-process {
    padding:
      80px
      23px;
  }

  .philosophy-process-heading h2 {
    font-size: 54px;
  }

  .philosophy-process-grid {
    grid-template-columns: 1fr;
  }

  .philosophy-process-grid article {
    min-height: 230px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--border-dark);
  }

  .philosophy-process-grid article:last-child {
    border-bottom: 0;
  }

  .philosophy-process-grid strong {
    margin-top: 60px;
  }

  .philosophy-collections {
    padding:
      80px
      23px;
  }

  .philosophy-collections-heading h2 {
    font-size: 54px;
  }

  .philosophy-collection-card {
    min-height: 220px;
  }

  .philosophy-final {
    min-height: auto;

    padding:
      80px
      23px;
  }

  .philosophy-final-symbol {
    justify-content: flex-start;
  }

  .philosophy-final-symbol img {
    width: 90px;
  }

  .philosophy-final-copy h2 {
    font-size: 54px;
  }

  .philosophy-final-copy .button {
    width: 100%;
  }

}
/* =========================================
   ACTIVE NAVBAR INDICATOR
========================================= */

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  white-space: nowrap;
}

.nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 0;

  color: rgba(233, 221, 200, 0.78);
  text-decoration: none;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;

  transition: color 0.25s ease;
}

.nav-menu a:hover {
  color: #d9b26f;
}

.nav-menu a.is-active {
  color: #e3c17e;
}

.nav-menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;

  height: 1.5px;
  background: #e3c17e;
}
/* ==================================================
   HOME COLLECTIONS V3
================================================== */

.home-collections-v3 {
  padding:
    110px
    26px
    120px;
}

/* ==================================================
   HEADING
================================================== */

.home-collections-v3-heading {
  width: min(1500px, 100%);

  margin:
    0 auto
    60px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}

.home-collections-v3-heading h2 {
  font-family:
    var(--heading-font);

  font-size:
    clamp(
      62px,
      7.5vw,
      105px
    );

  font-weight: 500;

  letter-spacing: -3px;

  line-height: 0.86;
}

.home-collections-v3-heading h2 span {
  display: block;

  color: var(--brown);

  font-style: italic;
}

.home-collections-v3-heading > p {
  max-width: 310px;

  padding-bottom: 6px;

  color: var(--muted-dark);

  font-size: 11px;

  line-height: 1.8;

  text-align: right;
}

/* ==================================================
   GRID
================================================== */

.home-collection-grid {
  width: min(1500px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    var(--border-dark);

  border-bottom:
    1px solid
    var(--border-dark);
}

/* ==================================================
   CARD
================================================== */

.home-collection-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  color: var(--dark-text);

  border-right:
    1px solid
    var(--border-dark);

  text-decoration: none;

  overflow: hidden;

  cursor: pointer;
}

.home-collection-card:last-child {
  border-right: 0;
}

/* ==================================================
   IMAGE
================================================== */

.home-collection-visual {
  position: relative;

  width: 100%;

  height:
    clamp(
      620px,
      46vw,
      720px
    );

  background: var(--black);

  overflow: hidden;
}

.home-collection-visual img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: scale(1.025);

  transition:
    transform 0.7s ease,
    filter 0.5s ease;
}

/* BLAK */

.home-collection-blak
.home-collection-visual img {
  object-position:
    50% 50%;
}

/* WHYT */

.home-collection-whyt
.home-collection-visual img {
  object-position:
    52% 50%;
}

/* RHYTHM */

.home-collection-rhythm
.home-collection-visual img {
  object-position:
    50% 50%;
}

.home-collection-card:hover
.home-collection-visual img {
  transform:
    scale(1.065);
}

/* overlay */

.home-collection-visual::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.08) 55%,
      rgba(0, 0, 0, 0.48)
    );

  pointer-events: none;
}

/* ==================================================
   NUMBER
================================================== */

.home-collection-number {
  position: absolute;

  top: 28px;
  left: 28px;

  z-index: 3;

  color: var(--cream);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;
}

/* ==================================================
   WATERMARK
================================================== */

.home-collection-watermark {
  position: absolute;

  left: 24px;
  right: 24px;

  bottom: -9px;

  z-index: 3;

  overflow: hidden;

  color:
    rgba(
      233,
      221,
      200,
      0.15
    );

  font-family:
    var(--heading-font);

  font-size:
    clamp(
      70px,
      7vw,
      120px
    );

  font-weight: 700;

  line-height: 0.78;

  white-space: nowrap;

  pointer-events: none;
}

/* ==================================================
   COPY
================================================== */

.home-collection-copy {
  min-height: 365px;

  padding:
    34px
    28px
    30px;

  display: flex;

  flex-direction: column;

  background:
    var(--cream);

  transition:
    background 0.35s ease;
}

.home-collection-card:hover
.home-collection-copy {
  background:
    var(--cream-light);
}

.home-collection-label {
  color: var(--brown);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}

.home-collection-copy h3 {
  margin-top: 7px;

  font-family:
    var(--heading-font);

  font-size:
    clamp(
      46px,
      4.5vw,
      66px
    );

  font-weight: 600;

  line-height: 0.95;
}

.home-collection-description {
  min-height: 64px;

  margin-top: 22px;

  color: var(--muted-dark);

  font-size: 11px;

  line-height: 1.8;
}

/* ==================================================
   TAGS
================================================== */

.home-collection-tags {
  margin-top: 20px;

  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}

.home-collection-tags span {
  padding:
    7px
    11px;

  border:
    1px solid
    var(--border-dark);

  color: var(--brown);

  font-family:
    var(--heading-font);

  font-size: 15px;

  font-style: italic;
}

/* ==================================================
   ACTION
================================================== */

.home-collection-action {
  margin-top: auto;

  padding-top: 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--dark-text);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.3px;

  text-transform: uppercase;
}

.home-collection-action b {
  font-size: 20px;

  font-weight: 400;

  transition:
    transform 0.3s ease;
}

.home-collection-card:hover
.home-collection-action b {
  transform:
    translate(
      5px,
      -5px
    );
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .home-collections-v3 {
    padding:
      85px
      20px;
  }

  .home-collections-v3-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 25px;
  }

  .home-collections-v3-heading > p {
    text-align: left;
  }

  .home-collection-grid {
    grid-template-columns: 1fr;
  }

  .home-collection-card {
    display: grid;

    grid-template-columns:
      1.05fr
      0.95fr;

    border-right: 0;

    border-bottom:
      1px solid
      var(--border-dark);
  }

  .home-collection-card:last-child {
    border-bottom: 0;
  }

  .home-collection-visual {
    height: 600px;
  }

  .home-collection-copy {
    min-height: 600px;
  }

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

  .home-collections-v3 {
    padding:
      75px
      16px;
  }

  .home-collections-v3-heading h2 {
    font-size: 55px;

    letter-spacing: -2px;
  }

  .home-collection-card {
    display: flex;
  }

  .home-collection-visual {
    height: 560px;
  }

  .home-collection-copy {
    min-height: 330px;

    padding:
      27px
      22px;
  }

  .home-collection-copy h3 {
    font-size: 49px;
  }

  .home-collection-description {
    min-height: auto;
  }

}
/* =========================================
   FLAVORS PAGE - FINAL FIX
========================================= */

/* area intro atas */
.collection-switcher,
.collection-intro,
.flavor-layout {
  width: min(1440px, calc(100% - 40px));
}

/* intro atas */
.collection-intro {
  margin: 0 auto 34px;
  align-items: flex-start;
  gap: 48px;
}

.collection-name-wrap strong {
  font-size: clamp(46px, 4.2vw, 64px);
  line-height: 0.95;
}

.collection-intro > p {
  max-width: 700px;
  font-size: 12px;
  line-height: 1.9;
}

/* layout utama flavor */
.flavor-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  border: 1px solid rgba(24, 21, 16, 0.18);
  background: var(--cream-light);
  box-shadow: 0 30px 80px rgba(45, 35, 23, 0.08);
}

/* menu kiri */
.flavor-menu {
  background: #eadcc4;
  border-right: 1px solid rgba(24, 21, 16, 0.18);
}

/* tiap item menu */
.flavor-tab {
  width: 100%;
  min-height: 118px;
  padding: 22px 24px;

  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 52px;
  align-items: center;
  column-gap: 16px;

  border-bottom: 1px solid rgba(24, 21, 16, 0.14);

  background: transparent;
  color: var(--dark-text);

  text-align: left;
  cursor: pointer;

  transition:
    background 0.28s ease,
    color 0.28s ease,
    padding-left 0.28s ease;
}

.flavor-tab:last-child {
  border-bottom: 0;
}

.flavor-tab:hover,
.flavor-tab.is-selected {
  padding-left: 30px;
  background: var(--black);
  color: var(--cream);
}

.flavor-tab > span {
  color: var(--brown);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1;
}

.flavor-tab:hover > span,
.flavor-tab.is-selected > span {
  color: var(--gold-light);
}

/* INI YANG BIKIN NAMA FLAVOR LEBIH AMAN */
.flavor-tab strong {
  display: block;
  min-width: 0;
  max-width: 100%;

  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.08;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* bulatan kode kanan */
.flavor-tab small {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-family: var(--heading-font);
  font-size: 17px;
  line-height: 1;
}

/* kalo small kosong di BLAK / WHYT, tetap rapi */
.flavor-tab small:empty {
  border-color: transparent;
}

/* detail kanan */
.flavor-detail {
  min-height: 760px;

  display: grid;
  grid-template-columns: minmax(560px, 1.18fr) minmax(360px, 0.82fr);

  background: var(--cream-light);
}

/* panel gambar */
.flavor-image-panel {
  position: relative;
  min-height: 760px;
  padding: 28px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(181, 149, 96, 0.16),
      transparent 48%
    ),
    #12100d;

  overflow: hidden;
}

.flavor-image-panel::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(233, 221, 200, 0.12);
  pointer-events: none;
}

.flavor-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.10),
      transparent 22%,
      transparent 78%,
      rgba(0, 0, 0, 0.14)
    );

  pointer-events: none;
}

/* INI BUAT BESARIN GAMBAR */
.flavor-image-panel img {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;
  max-height: 720px;

  object-fit: contain;
  object-position: center;

  transition:
    opacity 0.3s ease,
    transform 0.45s ease;
}

.flavor-detail:hover .flavor-image-panel img {
  transform: scale(1.03);
}

/* nomor di kiri atas */
.flavor-image-panel > span,
.flavor-image-panel > strong {
  position: absolute;
  z-index: 4;
  color: var(--cream);
}

.flavor-image-panel > span {
  top: 38px;
  left: 40px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* huruf gede kanan bawah */
.flavor-image-panel > strong {
  right: 36px;
  bottom: 18px;

  color: rgba(233, 221, 200, 0.88);

  font-family: var(--heading-font);
  font-size: 105px;
  font-weight: 500;
  line-height: 1;
}

/* copy kanan */
.flavor-detail-copy {
  padding: 56px 48px;
  border-left: 1px solid rgba(24, 21, 16, 0.12);
}

.flavor-detail-copy h2 {
  margin: 12px 0 22px;

  font-family: var(--heading-font);
  font-size: clamp(50px, 5vw, 76px);
  line-height: 0.92;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 26px;
}

.profile-tags span {
  padding: 8px 13px;
  border: 1px solid rgba(24, 21, 16, 0.18);
  color: var(--brown);

  font-family: var(--heading-font);
  font-size: 16px;
  font-style: italic;

  background: rgba(255, 255, 255, 0.13);
}

.flavor-detail-copy > p:nth-of-type(2) {
  max-width: 520px;
  font-size: 13px;
  line-height: 1.95;
}

/* =========================================
   TABLET
========================================= */
@media (max-width: 1100px) {
  .flavor-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .flavor-detail {
    grid-template-columns: 1fr;
  }

  .flavor-image-panel {
    min-height: 640px;
  }

  .flavor-image-panel img {
    max-height: 590px;
  }
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 700px) {
  .collection-switcher,
  .collection-intro,
  .flavor-layout {
    width: min(100%, calc(100% - 24px));
  }

  .collection-intro {
    gap: 16px;
  }

  .collection-intro > p {
    max-width: 100%;
    text-align: left;
  }

  .flavor-layout {
    grid-template-columns: 1fr;
  }

  .flavor-tab {
    min-height: 96px;
    padding: 18px 18px;
    grid-template-columns: 48px minmax(0, 1fr) 46px;
    column-gap: 14px;
  }

  .flavor-tab:hover,
  .flavor-tab.is-selected {
    padding-left: 22px;
  }

  .flavor-tab strong {
    font-size: 18px;
    line-height: 1.1;
  }

  .flavor-tab small {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .flavor-detail {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .flavor-image-panel {
    min-height: 480px;
    padding: 18px;
  }

  .flavor-image-panel img {
    max-height: 430px;
  }

  .flavor-image-panel > strong {
    font-size: 72px;
    right: 22px;
    bottom: 16px;
  }

  .flavor-detail-copy {
    padding: 34px 24px;
  }

  .flavor-detail-copy h2 {
    font-size: 42px;
  }
}
/* =========================================================
   GLOBAL AUTH NAVIGATION
========================================================= */

.nav-auth-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 38px;

  padding:
    0
    4px;

  color:
    var(--cream-dark);

  font-family:
    var(--body-font);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  transition:
    color 0.25s ease;
}

.nav-auth-link::after {
  content: "";

  position: absolute;

  left: 4px;
  right: 4px;
  bottom: 3px;

  height: 1px;

  background:
    currentColor;

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform 0.25s ease;
}

.nav-auth-link:hover {
  color:
    var(--gold-light);
}

.nav-auth-link:hover::after,
.nav-auth-link.is-logged-in::after {
  transform:
    scaleX(1);

  transform-origin:
    left;
}

.nav-auth-link.is-logged-in {
  color:
    var(--gold-light);
}

@media (max-width: 900px) {

  .nav-auth-link {
    display: none;
  }

}
/* ==================================================
   GLOBAL NAVBAR — CONTACT MENU SUPPORT
================================================== */

@media (min-width: 821px) {

  .nav-menu {
    gap: 26px;
  }

}

@media (max-width: 1180px) and (min-width: 821px) {

  .nav-menu {
    gap: 18px;
  }

}

@media (max-width: 1020px) and (min-width: 821px) {

  .nav-cta {
    display: none;
  }

}
.curated-brand {
  font-family: "Pacifico", cursive;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: #111;
  text-decoration: none;
}

/* ==================================================
   HOME — CURATED BY MAESTRO FEATURE
================================================== */

.home-curated-feature {
  position: relative;

  min-height: 680px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(420px, 0.88fr);

  background:
    #e5a0a6;

  color:
    #11100e;

  overflow: hidden;
}

/* ==================================================
   VISUAL
================================================== */

.home-curated-visual {
  position: relative;

  min-height: 680px;

  overflow: hidden;

  background:
    #e7a2a8;
}

.home-curated-visual::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      90deg,
      transparent 65%,
      rgba(
        229,
        160,
        166,
        0.3
      )
      100%
    );

  pointer-events: none;
}

.home-curated-visual img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 1.2s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );
}

.home-curated-feature:hover
.home-curated-visual img {
  transform:
    scale(1.018);
}

/* LARGE SOUL WATERMARK */

.home-curated-visual-word {
  position: absolute;

  left: -12px;

  bottom: -58px;

  z-index: 3;

  color:
    rgba(
      255,
      255,
      255,
      0.11
    );

  font-family:
    var(--heading-font);

  font-size:
    clamp(
      150px,
      19vw,
      320px
    );

  font-weight: 500;

  letter-spacing:
    -0.06em;

  line-height: 0.8;

  pointer-events: none;

  user-select: none;
}

/* TOP META */

.home-curated-visual-meta {
  position: absolute;

  top: 38px;

  left: 42px;

  right: 42px;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color:
    rgba(
      17,
      16,
      14,
      0.66
    );

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}

/* ==================================================
   COPY PANEL
================================================== */

.home-curated-copy {
  position: relative;

  min-width: 0;

    padding:
    clamp(58px, 5.5vw, 88px)
    clamp(42px, 5vw, 78px)
    38px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background:
    linear-gradient(
      145deg,
      #f1c2c3 0%,
      #e6a3a8 100%
    );

  border-left:
    1px solid
    rgba(
      17,
      16,
      14,
      0.14
    );
}

.home-curated-copy::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );
}

/* KICKER */

.home-curated-kicker {
  margin-bottom: 24px;

  color:
    rgba(
      17,
      16,
      14,
      0.62
    );

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform:
    uppercase;
}

/* CURATED SCRIPT */

.home-curated-script {
  margin-bottom: 18px;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(
      36px,
      4vw,
      58px
    );

  line-height: 0.9;

  color:
    #171411;
}

/* SOUL */

.home-curated-copy h2 {
  margin: 0;

  font-family:
    var(--heading-font);

  font-size:
    clamp(
      90px,
      10vw,
      150px
    );

  font-weight: 500;

  letter-spacing:
    -0.055em;

  line-height: 0.72;
}

/* FLAVOR */

.home-curated-flavor {
  margin-top: 26px;

  color:
    rgba(
      17,
      16,
      14,
      0.78
    );

  font-family:
    var(--heading-font);

  font-size:
    clamp(
      27px,
      2.6vw,
      39px
    );

  font-style: italic;
}

/* DESCRIPTION */

.home-curated-description {
  max-width: 520px;

  margin-top: 28px;

  color:
    rgba(
      17,
      16,
      14,
      0.7
    );

  font-size: 12px;

  line-height: 1.9;
}

/* ==================================================
   COLLAB
================================================== */

.home-curated-collab {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-curated-collab-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.home-curated-collab-logo-maestro {
  height: 46px;
}

.home-curated-collab-logo-by3 {
  height: 46px;
  filter: brightness(0) saturate(100%);
}

.home-curated-collab-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(17, 16, 14, 0.55);
  transform: translateY(-1px);
}

/* ==================================================
   BUTTON
================================================== */

.home-curated-button {
  width: fit-content;

  min-height: 54px;

  margin-top: 38px;

  padding:
    0
    27px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  background:
    #11100e;

  color:
    #f5ecdc;

  border:
    1px solid
    #11100e;

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    1.7px;

  text-transform:
    uppercase;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.home-curated-button:hover {
  background:
    transparent;

  color:
    #11100e;

  transform:
    translateY(-3px);
}

/* ==================================================
   BOTTOM PRODUCT DETAILS
================================================== */

.home-curated-details {
  margin-top: 52px;

  padding-top: 24px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px solid
    rgba(
      17,
      16,
      14,
      0.17
    );
}

.home-curated-details > div {
  min-width: 0;

  padding-right: 15px;
}

.home-curated-details > div:not(
  :first-child
) {
  padding-left: 18px;

  border-left:
    1px solid
    rgba(
      17,
      16,
      14,
      0.14
    );
}

.home-curated-details span {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(
      17,
      16,
      14,
      0.5
    );

  font-size: 7px;

  font-weight: 700;

  letter-spacing:
    1.7px;
}

.home-curated-details strong {
  display: block;

  color:
    #11100e;

  font-family:
    var(--heading-font);

  font-size: 16px;

  font-weight: 600;

  line-height: 1.2;
}

/* ==================================================
   TABLET
================================================== */

@media (
  max-width: 1050px
) {

  .home-curated-feature {
    grid-template-columns: 1fr;
  }

  .home-curated-visual {
    min-height: 680px;
  }

  .home-curated-copy {
    min-height: 650px;

    border-left: 0;

    border-top:
      1px solid
      rgba(
        17,
        16,
        14,
        0.14
      );
  }

}

/* ==================================================
   MOBILE
================================================== */

@media (
  max-width: 700px
) {

  .home-curated-feature {
    min-height: auto;
  }

  .home-curated-visual {
    min-height: 520px;
  }

  .home-curated-visual-meta {
    top: 24px;

    left: 22px;

    right: 22px;
  }

  .home-curated-visual-word {
    bottom: -25px;

    font-size: 145px;
  }

  .home-curated-copy {
    min-height: auto;

    padding:
      70px
      26px
      40px;
  }

  .home-curated-copy h2 {
    font-size:
      clamp(
        85px,
        27vw,
        120px
      );
  }

  .home-curated-script {
    font-size: 40px;
  }

  .home-curated-description {
    font-size: 11px;
  }

  .home-curated-button {
    width: 100%;
  }

  .home-curated-details {
    margin-top: 60px;

    grid-template-columns: 1fr;

    gap: 0;
  }

  .home-curated-details > div {
    padding:
      17px
      0;

    border-bottom:
      1px solid
      rgba(
        17,
        16,
        14,
        0.12
      );
  }

  .home-curated-details > div:not(
    :first-child
  ) {
    padding-left: 0;

    border-left: 0;
  }

}

/* ==================================================
   HOME HERO — FINAL
================================================== */

.maestro-home-hero .hero-grid {
  opacity: 0.52;
}

.maestro-home-hero .hero-background-word {
  bottom: -72px;
  color: rgba(233, 221, 200, 0.018);
}

.maestro-home-hero .hero-copy {
  max-width: 720px;
}

.maestro-home-hero {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  column-gap:
    clamp(
      50px,
      6vw,
      110px
    );
}

/* HERO RIGHT AREA */

.maestro-home-hero .hero-visual {
  position: relative;

  min-height: 600px;

  display: grid;

  place-items: center;
}

/* MAIN COMPOSITION */

.hero-composition {
  position: relative;

  width:
    min(
      560px,
      100%
    );

  aspect-ratio: 1 / 1;

  display: grid;

  place-items: center;

  isolation: isolate;
}

/* LARGE OUTER CIRCLE */

.hero-composition::before {
  content: "";

  position: absolute;

  inset: 4%;

  border:
    1px solid
    rgba(
      233,
      221,
      200,
      0.055
    );

  border-radius: 50%;
}

/* SECOND CIRCLE */

.hero-composition::after {
  content: "";

  position: absolute;

  inset: 17%;

  border:
    1px solid
    rgba(
      181,
      149,
      96,
      0.13
    );

  border-radius: 50%;
}

/* CENTRAL RING */

.hero-composition-ring {
  position: absolute;

  width: 55%;

  aspect-ratio: 1 / 1;

  border:
    1px solid
    rgba(
      212,
      185,
      128,
      0.23
    );

  border-radius: 50%;
}

/* CROSS GUIDE */

.hero-composition-ring::before,
.hero-composition-ring::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  background:
    rgba(
      233,
      221,
      200,
      0.07
    );

  transform:
    translate(
      -50%,
      -50%
    );
}

.hero-composition-ring::before {
  width: 145%;

  height: 1px;
}

.hero-composition-ring::after {
  width: 1px;

  height: 145%;
}

/* EXTRA LINES */

.hero-composition-axis {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.hero-composition-axis::before,
.hero-composition-axis::after {
  content: "";

  position: absolute;

  left: 8%;

  width: 84%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        181,
        149,
        96,
        0.2
      ),
      transparent
    );
}

.hero-composition-axis::before {
  top: 25%;
}

.hero-composition-axis::after {
  bottom: 25%;
}

/* MAESTRO SYMBOL */

.hero-composition-emblem {
  position: relative;

  z-index: 5;

  width:
    clamp(
      145px,
      13vw,
      195px
    );

  height:
    clamp(
      205px,
      19vw,
      275px
    );

  display: grid;

  place-items: center;
}

/* SOFT GLOW */

.hero-composition-emblem::before {
  content: "";

  position: absolute;

  inset:
    -45%
    -80%;

  z-index: -1;

  background:
    radial-gradient(
      circle,
      rgba(
        181,
        149,
        96,
        0.15
      ),
      rgba(
        181,
        149,
        96,
        0.03
      )
      40%,
      transparent
      72%
    );

  filter:
    blur(18px);
}

.hero-composition-emblem img {
  width: 100%;

  height: 100%;

  object-fit: contain;

  filter:
    invert(91%)
    sepia(13%)
    saturate(482%)
    hue-rotate(349deg)
    brightness(103%)
    contrast(90%);
}

/* ==================================================
   REMOVE OLD HERO LABELS
================================================== */

.hero-world,
.hero-composition-caption {
  display: none !important;
}

/* ==================================================
   TABLET
================================================== */

@media (
  max-width: 1050px
) {

  .maestro-home-hero {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .maestro-home-hero .hero-visual {
    min-height: 560px;
  }

  .hero-composition {
    width:
      min(
        590px,
        85vw
      );
  }

}

/* ==================================================
   MOBILE
================================================== */

@media (
  max-width: 700px
) {

  .maestro-home-hero .hero-visual {
    min-height: 440px;

    margin-top: 10px;
  }

  .hero-composition {
    width:
      min(
        440px,
        90vw
      );
  }

  .hero-composition-emblem {
    width: 120px;

    height: 175px;
  }

}

/* ==================================================
   SMALL MOBILE
================================================== */

@media (
  max-width: 480px
) {

  .maestro-home-hero .hero-visual {
    min-height: 380px;
  }

  .hero-composition {
    width: 100%;
  }

  .hero-composition-emblem {
    width: 100px;

    height: 150px;
  }

}

/* ==================================================
   MOBILE ACCOUNT NAV
================================================== */

.nav-mobile-auth-link {
  display: none !important;
}


@media (max-width: 820px) {

  .nav-actions .nav-auth-link {
    display: none !important;
  }


  .nav-menu .nav-mobile-auth-link {
    display: flex !important;

    margin-top: 12px;
    padding-top: 24px;

    border-top:
      1px solid
      var(--border-light);
  }

}