:root{
  --bg-a:#15101b;
  --bg-b:#33252c;
  --bg-c:#8d6f58;
  --text:#fffaf2;
  --muted:rgba(255,250,242,.72);
  --soft:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.13);
  --accent:#d2ad7c;
  --glow:rgba(210,173,124,.30);
  --radius:34px;
  --font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

*{box-sizing:border-box}
html{min-height:100%; background:#120e12}
body{
  min-height:100%;
  margin:0;
  color:var(--text);
  font-family:var(--font-sans);
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 26%),
    radial-gradient(circle at 28% 60%, rgba(255,255,255,.06), transparent 22%),
    linear-gradient(135deg,var(--bg-a),var(--bg-b) 48%,var(--bg-c));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 38%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, rgba(0,0,0,.16));
  z-index:1;
}

.scent-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  opacity:.75;
  pointer-events:none;
}

.page-shell{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100dvh;
  padding:34px clamp(22px, 3.4vw, 58px);
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1510px;
  margin:0 auto 34px;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand-mark img{
  display:block;
  width:auto;
  height:34px;
  object-fit:contain;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:12px;
}

.top-nav a,
.motion-toggle{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.motion-toggle span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#a9ffc0;
  box-shadow:0 0 0 5px rgba(169,255,192,.10);
}

.hero{
  max-width:1510px;
  margin:0 auto;
  min-height:calc(100dvh - 132px);
  display:grid;
  grid-template-columns:minmax(390px, 560px) minmax(560px, 740px);
  gap:clamp(56px, 6vw, 104px);
  align-items:center;
}

.hero-copy{
  align-self:center;
}

.kicker{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 20px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
}

.kicker::before{
  content:"";
  width:48px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

h1{
  margin:0;
  max-width:9.8ch;
  font-family:var(--font-serif);
  font-weight:650;
  font-size:clamp(4rem, 5.75vw, 6.9rem);
  line-height:.9;
  letter-spacing:-.06em;
}

.lead{
  max-width:45ch;
  margin:24px 0 0;
  color:var(--muted);
  font-size:clamp(1rem, 1.04vw, 1.08rem);
  line-height:1.76;
}

.action-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.primary-action,
.secondary-action{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(16px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.primary-action{
  background:rgba(255,255,255,.13);
}

.secondary-action{
  background:rgba(255,255,255,.04);
}

.primary-action:hover,
.secondary-action:hover,
.scent-option:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.26);
}

.mood-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.mood-row span{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.68);
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800;
  text-transform:uppercase;
}

.scent-picker{
  max-width:500px;
  margin-top:34px;
}

.picker-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

.picker-head h2{
  margin:0 0 4px;
  font-size:18px;
  letter-spacing:-.02em;
}

.picker-head p,
.picker-head > span{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.4;
}

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

.scent-option{
  min-height:64px;
  padding:13px 15px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  text-align:left;
  cursor:pointer;
  backdrop-filter:blur(16px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.scent-option.is-active{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.12);
}

.scent-option strong{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.scent-option small{
  color:rgba(255,255,255,.72);
  font-size:12px;
}

.product-card{
  position:relative;
  width:100%;
  min-height:640px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.14), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:0 32px 88px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(120%);
}

.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 26%,rgba(0,0,0,.12)),
    radial-gradient(circle at 52% 62%,var(--glow),transparent 34%);
  opacity:.9;
}

.card-top{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:28px 28px 0;
}

.selected-label{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
}

.selected-label span{
  color:rgba(255,255,255,.72);
  font-size:11px;
  letter-spacing:.23em;
  text-transform:uppercase;
  font-weight:800;
}

.selected-label strong{
  font-size:17px;
}

.card-top a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:4px;
  font-size:13px;
  font-weight:700;
}

.product-visual{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:86px;
  bottom:150px;
  display:grid;
  place-items:center;
}

.product-glow{
  position:absolute;
  width:min(66%, 480px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.18), var(--glow) 34%, transparent 68%);
  filter:blur(28px);
  opacity:.72;
}

#bottleImage{
  position:relative;
  z-index:3;
  display:block;
  width:min(43%, 320px);
  max-height:360px;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)) drop-shadow(0 34px 60px rgba(0,0,0,.24));
  transition:opacity .25s ease, transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}

#bottleImage.is-changing{
  opacity:.18;
  transform:translateY(8px) scale(.985);
}

.product-info{
  position:absolute;
  z-index:5;
  left:24px;
  right:24px;
  bottom:24px;
  min-height:150px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  padding:24px 26px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(145deg,rgba(18,15,16,.40),rgba(255,255,255,.052));
  box-shadow:0 18px 48px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(130%);
}

.overline{
  margin:0 0 10px;
  color:rgba(255,255,255,.60);
  font-size:11px;
  letter-spacing:.23em;
  text-transform:uppercase;
  font-weight:800;
}

.product-info h2{
  margin:0 0 12px;
  font-size:clamp(2rem,2.65vw,2.8rem);
  line-height:.95;
  letter-spacing:-.045em;
}

.product-info p{
  margin:0;
  max-width:38ch;
  color:rgba(255,255,255,.77);
  font-size:14px;
  line-height:1.62;
}

.info-tags{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.info-tags span{
  padding:10px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.86);
  font-size:12px;
}

@media (max-width:1180px){
  .page-shell{padding:24px 18px 34px}
  .site-header{margin-bottom:24px}
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    gap:30px;
  }
  .product-card{
    min-height:620px;
  }
  #bottleImage{
    width:min(40%, 300px);
  }
}

@media (max-width:720px){
  .site-header{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }
  .brand-mark img{height:30px}
  .top-nav{width:100%; justify-content:space-between}
  h1{
    font-size:clamp(3.2rem,14vw,4.35rem);
    max-width:9.2ch;
  }
  .lead{font-size:15px;line-height:1.66}
  .action-row{gap:10px}
  .primary-action,.secondary-action{min-height:44px;padding:12px 16px;font-size:12px}
  .scent-grid{grid-template-columns:1fr 1fr}
  .product-card{min-height:560px;border-radius:28px}
  .card-top{padding:18px 18px 0}
  .selected-label{padding:10px 12px}
  .selected-label span{font-size:10px}
  .product-visual{top:72px;bottom:154px}
  #bottleImage{width:min(58%,250px);max-height:290px}
  .product-info{
    left:16px;right:16px;bottom:16px;
    grid-template-columns:1fr;
    min-height:auto;
    padding:18px;
    border-radius:22px;
  }
  .product-info h2{font-size:1.9rem}
  .product-info p{max-width:none;font-size:13px}
  .info-tags{justify-content:flex-start}
}


/* PATCH 11 - Three.js cinematic layer + bigger product visual */

.three-layer{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:.68;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:saturate(112%) contrast(106%);
}

.three-layer canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

.scent-canvas{
  z-index:1;
  opacity:.55;
}

body::before{
  z-index:2;
}

.page-shell{
  z-index:3;
}

.product-card{
  min-height:690px;
}

.product-visual{
  top:74px;
  bottom:150px;
}

.product-glow{
  width:min(76%, 560px);
  opacity:.86;
  filter:blur(34px);
}

#bottleImage{
  width:min(54%, 410px);
  max-height:455px;
  filter:
    drop-shadow(0 16px 24px rgba(0,0,0,.20))
    drop-shadow(0 42px 72px rgba(0,0,0,.26))
    drop-shadow(0 0 26px rgba(255,255,255,.05));
}

.product-info{
  min-height:154px;
}

.product-info h2{
  font-size:clamp(2.1rem,2.85vw,3rem);
}

.product-info p{
  max-width:42ch;
}

@media (max-width:1180px){
  .product-card{
    min-height:660px;
  }

  #bottleImage{
    width:min(50%, 370px);
    max-height:410px;
  }
}

@media (max-width:720px){
  .three-layer{
    opacity:.38;
  }

  .product-card{
    min-height:590px;
  }

  .product-visual{
    top:70px;
    bottom:156px;
  }

  #bottleImage{
    width:min(68%, 290px);
    max-height:330px;
  }
}


/* PATCH 12 - Overflow bottle card composition
   Goal: bottle becomes the hero object, overflowing above the glass card like the approved screenshot.
*/

@media (min-width: 1181px){
  .hero{
    align-items:center;
    grid-template-columns:minmax(390px, 560px) minmax(580px, 760px);
  }

  .product-card{
    min-height:610px;
    margin-top:118px;
    overflow:visible;
    border-radius:36px;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,255,255,.13), transparent 30%),
      linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.04));
  }

  .product-card::before{
    border-radius:36px;
    overflow:hidden;
  }

  .card-top{
    padding:30px 36px 0;
  }

  .selected-label{
    padding:14px 18px;
  }

  .selected-label span{
    font-size:12px;
    letter-spacing:.24em;
  }

  .selected-label strong{
    font-size:21px;
  }

  .card-top a{
    font-size:15px;
  }

  .product-visual{
    top:-126px;
    bottom:168px;
    overflow:visible;
    z-index:4;
  }

  .product-glow{
    width:min(82%, 620px);
    opacity:.92;
    filter:blur(38px);
    transform:translateY(72px);
  }

  #bottleImage{
    width:min(64%, 520px);
    max-height:650px;
    transform:translateY(-6px) scale(1);
    filter:
      drop-shadow(0 20px 28px rgba(0,0,0,.18))
      drop-shadow(0 46px 78px rgba(0,0,0,.26))
      drop-shadow(0 0 28px rgba(255,255,255,.06));
  }

  #bottleImage.is-changing{
    opacity:.18;
    transform:translateY(4px) scale(.985);
  }

  .product-info{
    left:28px;
    right:28px;
    bottom:28px;
    min-height:164px;
    padding:28px 32px;
    border-radius:30px;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }

  .overline{
    font-size:12px;
    letter-spacing:.24em;
  }

  .product-info h2{
    font-size:clamp(3rem, 4.1vw, 4.15rem);
    margin-bottom:16px;
  }

  .product-info p{
    max-width:44ch;
    font-size:16px;
    line-height:1.62;
  }

  .info-tags{
    padding-top:8px;
    gap:12px;
  }

  .info-tags span{
    padding:13px 18px;
    font-size:14px;
  }
}

@media (min-width: 721px) and (max-width: 1180px){
  .product-card{
    min-height:620px;
    margin-top:90px;
    overflow:visible;
  }

  .product-visual{
    top:-96px;
    bottom:164px;
    overflow:visible;
  }

  #bottleImage{
    width:min(58%, 430px);
    max-height:540px;
  }

  .product-glow{
    width:min(78%, 540px);
    transform:translateY(58px);
  }

  .product-info{
    min-height:152px;
  }
}

@media (max-width:720px){
  .product-card{
    min-height:560px;
    margin-top:62px;
    overflow:visible;
  }

  .product-card,
  .product-card::before{
    border-radius:28px;
  }

  .product-visual{
    top:-62px;
    bottom:156px;
    overflow:visible;
  }

  #bottleImage{
    width:min(76%, 310px);
    max-height:390px;
  }

  .product-glow{
    width:min(86%, 360px);
    transform:translateY(40px);
    opacity:.78;
  }

  .card-top{
    padding:18px 18px 0;
  }

  .selected-label{
    padding:10px 12px;
  }

  .product-info{
    left:16px;
    right:16px;
    bottom:16px;
    min-height:auto;
    padding:18px;
  }
}


/* PATCH 13 - Story card + CTA refinement
   Card bawah dibuat lebih konsisten antar aroma, dan CTA dipindah ke bawah selector.
*/

@media (min-width: 1181px){
  .hero{
    grid-template-columns:minmax(410px, 560px) minmax(600px, 760px);
    gap:clamp(58px, 6vw, 108px);
  }

  .lead{
    max-width:46ch;
  }

  .mood-row{
    margin-top:18px;
  }

  .scent-picker{
    margin-top:32px;
  }

  .action-row-bottom{
    margin-top:26px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    max-width:500px;
  }

  .primary-action,
  .secondary-action{
    min-height:48px;
    padding:13px 20px;
  }

  .secondary-action{
    min-width:190px;
  }

  .product-card{
    min-height:625px;
    margin-top:118px;
  }

  .product-visual{
    top:-132px;
    bottom:190px;
  }

  #bottleImage{
    width:min(61%, 500px);
    max-height:620px;
  }

  .product-info{
    min-height:202px;
    left:28px;
    right:28px;
    bottom:28px;
    padding:30px 34px;
    border-radius:30px;
    grid-template-columns:minmax(0, 1fr);
    gap:20px;
  }

  .product-info > div:first-child{
    display:grid;
    grid-template-columns:minmax(230px, .92fr) minmax(260px, 1.08fr);
    column-gap:34px;
    row-gap:12px;
    align-items:start;
  }

  .overline{
    grid-column:1;
    margin-bottom:0;
    font-size:12px;
    line-height:1.7;
    max-width:16ch;
  }

  .product-info h2{
    grid-column:1;
    margin:0;
    font-size:clamp(2.95rem, 3.7vw, 4rem);
    line-height:.92;
    max-width:8.5ch;
    overflow-wrap:normal;
  }

  .product-info p{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    max-width:38ch;
    font-size:16px;
    line-height:1.68;
    color:rgba(255,255,255,.82);
  }

  .info-tags{
    position:absolute;
    top:30px;
    right:34px;
    padding:0;
    max-width:48%;
    justify-content:flex-end;
  }

  .info-tags span{
    padding:12px 16px;
    font-size:13px;
    line-height:1.2;
    white-space:normal;
    text-align:center;
  }

  .product-card[data-scent="after-dusk"] .product-info h2,
  .product-card[data-scent="velvet-blush"] .product-info h2{
    max-width:7.4ch;
  }

  .product-card[data-scent="citrelle"] .product-info h2,
  .product-card[data-scent="pearlight"] .product-info h2{
    max-width:9ch;
    font-size:clamp(2.8rem, 3.55vw, 3.75rem);
  }

  .product-card[data-scent="lumora"] .product-info h2,
  .product-card[data-scent="vesper"] .product-info h2{
    max-width:8ch;
  }
}

@media (min-width: 721px) and (max-width: 1180px){
  .action-row-bottom{
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .product-card{
    min-height:640px;
  }

  .product-info{
    min-height:180px;
    grid-template-columns:1fr;
  }

  .product-info > div:first-child{
    display:block;
  }

  .product-info h2{
    font-size:clamp(2.5rem, 6vw, 3.5rem);
    max-width:10ch;
  }

  .product-info p{
    max-width:46ch;
  }

  .info-tags{
    justify-content:flex-start;
  }
}

@media (max-width:720px){
  .action-row-bottom{
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .action-row{
    width:100%;
  }

  .primary-action,
  .secondary-action{
    flex:1 1 100%;
  }

  .product-card{
    min-height:590px;
  }

  .product-info h2{
    font-size:clamp(1.85rem, 9vw, 2.55rem);
    max-width:10ch;
  }

  .product-info p{
    line-height:1.62;
  }

  .info-tags span{
    font-size:11px;
  }
}


/* PATCH 14 - content + layout refine */

.kicker{display:none !important;}

.hero-copy{
  align-self:flex-start;
  padding-top:42px;
}

.lead{
  max-width:42ch;
  margin-top:22px;
  font-size:clamp(1.05rem,1.55vw,1.28rem);
  line-height:1.7;
  color:rgba(255,255,255,.80);
}

.action-row-bottom{
  margin-top:24px;
  max-width:460px;
  padding:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.primary-action{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.secondary-action{
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);
}

.secondary-action::after{
  content:"↗";
  margin-left:8px;
  font-size:13px;
  opacity:.8;
}

.product-card{
  min-height:650px;
}

.product-visual{
  top:-128px;
  bottom:220px;
}

#bottleImage{
  width:min(60%, 495px);
  max-height:620px;
}

.product-info{
  min-height:220px;
  left:26px;
  right:26px;
  bottom:26px;
  padding:26px 28px 24px;
  border-radius:30px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  background:linear-gradient(180deg, rgba(42,34,36,.46), rgba(49,39,41,.38));
}

.info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.overline{
  margin:0;
  font-size:12px;
  letter-spacing:.24em;
  line-height:1.65;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
  max-width:20ch;
}

.info-tags{
  position:static;
  padding:0;
  justify-content:flex-end;
  gap:10px;
  max-width:52%;
}

.info-tags span{
  padding:11px 16px;
  font-size:13px;
  line-height:1.22;
  white-space:normal;
  text-align:center;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.info-body{
  display:grid;
  grid-template-columns:minmax(220px, .9fr) minmax(0, 1.1fr);
  gap:28px;
  align-items:start;
}

.title-stack h2{
  margin:0;
  font-size:clamp(3rem, 3.9vw, 4.05rem);
  line-height:.90;
  letter-spacing:-.05em;
  max-width:7.6ch;
  text-wrap:balance;
}

.story-stack{
  display:grid;
  gap:10px;
  align-content:start;
  padding-top:4px;
}

.story-lead,
.story-desc,
.story-close{
  margin:0;
  max-width:40ch;
  color:rgba(255,255,255,.84);
  font-size:15px;
  line-height:1.68;
}

.story-lead{
  color:rgba(255,255,255,.88);
}

.story-close{
  margin-top:2px;
  color:rgba(255,255,255,.98);
}

#productDesc:empty{
  display:none;
}

.product-card[data-scent="citrelle"] .title-stack h2,
.product-card[data-scent="pearlight"] .title-stack h2{
  max-width:8.6ch;
  font-size:clamp(2.9rem, 3.55vw, 3.7rem);
}

.product-card[data-scent="velvet-blush"] .title-stack h2{
  max-width:8.4ch;
  font-size:clamp(2.8rem, 3.4vw, 3.55rem);
}

.product-card[data-scent="lumora"] .title-stack h2,
.product-card[data-scent="vesper"] .title-stack h2{
  max-width:8.5ch;
}

@media (min-width:1181px){
  .hero{
    grid-template-columns:minmax(380px, 520px) minmax(620px, 770px);
    gap:clamp(58px, 6vw, 118px);
  }
}

@media (min-width:721px) and (max-width:1180px){
  .hero-copy{
    padding-top:0;
  }
  .action-row-bottom{
    border-radius:24px;
    padding:0;
    background:transparent;
    border:none;
    max-width:none;
  }
  .product-card{
    min-height:690px;
  }
  .product-visual{
    top:-96px;
    bottom:235px;
  }
  #bottleImage{
    width:min(62%, 445px);
    max-height:530px;
  }
  .product-info{
    min-height:252px;
    padding:22px;
  }
  .info-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .info-tags{
    max-width:none;
    justify-content:flex-start;
  }
  .info-body{
    grid-template-columns:1fr;
    gap:16px;
  }
  .title-stack h2{
    max-width:10ch;
    font-size:clamp(2.55rem, 5.7vw, 3.4rem);
  }
  .story-lead,
  .story-desc,
  .story-close{
    max-width:none;
  }
}

@media (max-width:720px){
  .hero-copy{
    padding-top:0;
  }
  .lead{
    margin-top:18px;
    font-size:1rem;
  }
  .action-row-bottom{
    border-radius:24px;
    padding:0;
    background:transparent;
    border:none;
    max-width:none;
  }
  .action-row{
    gap:10px;
  }
  .primary-action,
  .secondary-action{
    min-height:48px;
    width:100%;
  }
  .product-card{
    min-height:650px;
  }
  .product-visual{
    top:-58px;
    bottom:270px;
  }
  #bottleImage{
    width:min(74%, 315px);
    max-height:395px;
  }
  .product-info{
    min-height:auto;
    left:16px;
    right:16px;
    bottom:16px;
    padding:18px;
    border-radius:24px;
  }
  .info-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .info-tags{
    max-width:none;
    justify-content:flex-start;
  }
  .info-body{
    grid-template-columns:1fr;
    gap:14px;
  }
  .title-stack h2{
    max-width:10ch;
    font-size:clamp(2.15rem, 10vw, 3rem);
  }
  .story-lead,
  .story-desc,
  .story-close{
    max-width:none;
    font-size:14px;
    line-height:1.62;
  }
}


/* PATCH 15 - Card tweak based on annotated feedback
   - remove visible "Signature Collection"
   - cleaner two-column card
   - stronger margins and spacing
   - give story block more room
   - keep selected scent badge cleaner
*/

.selected-label{
  min-width:292px;
  padding:16px 22px;
  justify-content:space-between;
  gap:20px;
}

.selected-label span{
  font-size:12px;
  letter-spacing:.24em;
}

.selected-label strong{
  font-size:23px;
  line-height:1;
}

.product-card{
  min-height:650px;
}

.product-info{
  min-height:240px;
  padding:24px 30px 26px;
  gap:14px;
}

.info-head{
  justify-content:flex-start;
  gap:12px;
}

.overline{
  display:none !important;
}

.info-tags{
  max-width:none;
  justify-content:flex-start;
}

.info-tags span{
  padding:11px 18px;
  min-height:42px;
}

.info-body{
  grid-template-columns:minmax(280px, .9fr) minmax(0, 1.1fr);
  gap:34px;
  align-items:start;
}

.title-stack{
  align-self:flex-start;
  padding-right:10px;
}

.title-stack h2{
  margin:0;
  max-width:6.8ch;
  font-size:clamp(3.15rem, 4vw, 4.35rem);
  line-height:.90;
  letter-spacing:-.055em;
}

.story-stack{
  gap:12px;
  padding-top:4px;
}

.story-lead,
.story-desc,
.story-close{
  max-width:42ch;
  font-size:15px;
  line-height:1.72;
}

.story-close{
  margin-top:6px;
}

.product-card[data-scent="after-dusk"] .title-stack h2{
  max-width:5.9ch;
}

.product-card[data-scent="citrelle"] .title-stack h2{
  max-width:7.2ch;
  font-size:clamp(3.05rem, 3.75vw, 4rem);
}

.product-card[data-scent="pearlight"] .title-stack h2{
  max-width:7.4ch;
  font-size:clamp(2.95rem, 3.65vw, 3.9rem);
}

.product-card[data-scent="velvet-blush"] .title-stack h2{
  max-width:7.1ch;
  font-size:clamp(2.9rem, 3.45vw, 3.75rem);
}

.product-card[data-scent="lumora"] .title-stack h2,
.product-card[data-scent="vesper"] .title-stack h2{
  max-width:6.7ch;
}

@media (min-width:1181px){
  .product-info{
    left:28px;
    right:28px;
    bottom:28px;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .selected-label{
    min-width:268px;
    padding:14px 20px;
  }

  .product-info{
    min-height:260px;
    padding:22px 22px 24px;
  }

  .info-body{
    grid-template-columns:1fr;
    gap:16px;
  }

  .title-stack h2{
    max-width:9ch;
    font-size:clamp(2.65rem, 5.9vw, 3.55rem);
  }

  .story-lead,
  .story-desc,
  .story-close{
    max-width:none;
  }
}

@media (max-width:720px){
  .selected-label{
    min-width:0;
    width:100%;
    max-width:240px;
    padding:12px 16px;
  }

  .selected-label strong{
    font-size:20px;
  }

  .product-info{
    min-height:auto;
    padding:18px 18px 20px;
    gap:12px;
  }

  .info-tags{
    gap:8px;
  }

  .info-tags span{
    padding:10px 14px;
    min-height:38px;
    font-size:12px;
  }

  .info-body{
    grid-template-columns:1fr;
    gap:14px;
  }

  .title-stack h2{
    max-width:8.8ch;
    font-size:clamp(2.2rem, 10vw, 3.05rem);
  }

  .story-lead,
  .story-desc,
  .story-close{
    max-width:none;
    font-size:14px;
    line-height:1.64;
  }
}


/* PATCH 16 - remove invalid second label and hard-fix story layout */

#sceneTag{
  display:none !important;
}

.product-info{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:18px !important;
  align-content:start !important;
}

.product-info .info-head{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:12px !important;
  margin:0 !important;
}

.product-info .info-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  max-width:none !important;
  position:static !important;
  padding:0 !important;
}

.product-info .info-tags span{
  white-space:nowrap !important;
}

.product-info .info-body{
  display:grid !important;
  grid-template-columns:minmax(260px, .88fr) minmax(0, 1.12fr) !important;
  gap:34px !important;
  align-items:start !important;
}

.product-info .title-stack{
  display:block !important;
  align-self:start !important;
  padding-right:8px !important;
  min-width:0 !important;
}

.product-info .title-stack h2{
  display:block !important;
  margin:0 !important;
  max-width:6.8ch !important;
  line-height:.9 !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.product-info .story-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:10px !important;
  padding:2px 0 0 !important;
  min-width:0 !important;
}

.product-info .story-stack p,
.product-info .story-lead,
.product-info .story-desc,
.product-info .story-close{
  position:static !important;
  display:block !important;
  margin:0 !important;
  width:100% !important;
  max-width:42ch !important;
  grid-column:auto !important;
  grid-row:auto !important;
  text-align:left !important;
  font-size:15px !important;
  line-height:1.72 !important;
  letter-spacing:0 !important;
  white-space:normal !important;
}

.product-info .story-lead{
  color:rgba(255,255,255,.92) !important;
  font-weight:500 !important;
}

.product-info .story-desc{
  color:rgba(255,255,255,.82) !important;
}

.product-info .story-close{
  color:rgba(255,255,255,.98) !important;
  margin-top:4px !important;
}

@media (min-width:721px) and (max-width:1180px){
  .product-info .info-body{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .product-info .title-stack h2{
    max-width:8.8ch !important;
  }

  .product-info .story-stack p,
  .product-info .story-lead,
  .product-info .story-desc,
  .product-info .story-close{
    max-width:none !important;
  }
}

@media (max-width:720px){
  .product-info{
    gap:14px !important;
  }

  .product-info .info-tags span{
    white-space:normal !important;
  }

  .product-info .info-body{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .product-info .title-stack h2{
    max-width:8.8ch !important;
  }

  .product-info .story-stack p,
  .product-info .story-lead,
  .product-info .story-desc,
  .product-info .story-close{
    max-width:none !important;
    font-size:14px !important;
    line-height:1.64 !important;
  }
}


/* PATCH 19 - selected meta label fix */
.selected-label.selected-meta-label{
  min-width:360px !important;
  max-width:min(46vw, 460px) !important;
  justify-content:center !important;
  padding:15px 22px !important;
}

.selected-label.selected-meta-label span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:12px !important;
  letter-spacing:.18em !important;
}

@media (max-width:720px){
  .selected-label.selected-meta-label{
    min-width:0 !important;
    width:100% !important;
    max-width:280px !important;
    padding:12px 14px !important;
  }

  .selected-label.selected-meta-label span{
    font-size:10px !important;
    letter-spacing:.12em !important;
  }
}


/* PATCH 20 FORCE REFRESH */
.selected-meta-label{
  min-width:360px !important;
  max-width:min(48vw, 500px) !important;
  justify-content:center !important;
  padding:15px 22px !important;
}
.selected-meta-label span,
#selectedMeta{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
@media (max-width:720px){
  .selected-meta-label{
    min-width:0 !important;
    max-width:290px !important;
    padding:12px 14px !important;
  }
  .selected-meta-label span,
  #selectedMeta{
    font-size:10px !important;
    letter-spacing:.10em !important;
  }
}


/* PATCH 21 - WebP aroma backgrounds */
:root{
  --scene-image:url("../assets/bg_aroma/bg_aroma_after_dusk.webp");
}

body{
  background:
    linear-gradient(120deg, rgba(8,8,12,.58) 0%, rgba(8,8,12,.30) 34%, rgba(8,8,12,.52) 100%),
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 26%),
    radial-gradient(circle at 28% 60%, rgba(255,255,255,.06), transparent 22%),
    var(--scene-image),
    linear-gradient(135deg,var(--bg-a),var(--bg-b) 48%,var(--bg-c));
  background-size:cover, cover, cover, cover, cover;
  background-position:center center, 78% 22%, 28% 60%, center center, center center;
  background-repeat:no-repeat;
  background-attachment:fixed, fixed, fixed, fixed, fixed;
}

.product-card::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) 24%, rgba(0,0,0,.22) 100%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 42%);
}

@media (max-width: 900px){
  body{
    background-attachment:scroll, scroll, scroll, scroll, scroll;
  }
}



/* PATCH 22 - Dedicated aroma background layer + Three.js combine
   Reason: body background can be visually buried by canvas/WebGL overlays.
   This forces background image to its own fixed layer under Three.js and particles.
*/

:root{
  --scene-image: url("../assets/bg_aroma/bg_aroma_after_dusk.webp");
}

/* Make body itself dark-neutral. Dedicated layer handles image background. */
html,
body{
  background:#0f0b13 !important;
}

.aroma-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(8, 7, 12, .78) 0%, rgba(8, 7, 12, .34) 42%, rgba(8, 7, 12, .22) 68%, rgba(8, 7, 12, .45) 100%),
    var(--scene-image);
  background-size:cover, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
  transform:translateZ(0) scale(1.012);
  filter:saturate(112%) contrast(104%) brightness(.95);
}

.aroma-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.08), transparent 26%),
    radial-gradient(circle at 20% 58%, rgba(0,0,0,.25), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 38%, rgba(0,0,0,.22));
}

/* Three.js remains visible but no longer dominates the generated background. */
.three-layer{
  z-index:1 !important;
  opacity:.34 !important;
  mix-blend-mode:screen !important;
  filter:saturate(115%) contrast(108%) !important;
}

/* Particle canvas above the background, subtle. */
.scent-canvas{
  z-index:2 !important;
  opacity:.42 !important;
  mix-blend-mode:screen;
}

/* Soft cinematic shade, not too dark. */
body::before{
  z-index:3 !important;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 34%, rgba(0,0,0,.16)) !important;
}

/* UI must sit above all background effects. */
.page-shell{
  position:relative !important;
  z-index:4 !important;
}

/* Make glass cards read well over photographic background */
.product-card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
  backdrop-filter:blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}

.product-info{
  background:linear-gradient(180deg, rgba(26,22,26,.58), rgba(30,24,28,.46)) !important;
  backdrop-filter:blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(130%) !important;
}

/* Disable old body background stack from Patch 21 so it does not fight the fixed layer. */
body{
  background-image:none !important;
}

@media (max-width:900px){
  .aroma-bg{
    background-position:center center, center center;
    filter:saturate(110%) contrast(104%) brightness(.88);
  }

  .three-layer{
    opacity:.22 !important;
  }

  .scent-canvas{
    opacity:.34 !important;
  }
}


/* PATCH 23 - CSS variable URL path fix
   Root cause:
   JS was writing --scene-image:url("assets/...") into <html>.
   When used inside css/styles.css, that URL can be resolved as css/assets/..., so the image disappears.
   Fix:
   - JS now sets direct inline background-image on .aroma-bg.
   - CSS default keeps ../assets path only as fallback before JS runs.
*/

:root{
  --scene-image: url("../assets/bg_aroma/bg_aroma_after_dusk.webp") !important;
}

.aroma-bg{
  background-image:
    linear-gradient(90deg, rgba(8, 7, 12, .62) 0%, rgba(8, 7, 12, .22) 42%, rgba(8, 7, 12, .16) 68%, rgba(8, 7, 12, .34) 100%),
    var(--scene-image) !important;
  filter:saturate(118%) contrast(106%) brightness(1.02) !important;
}

.aroma-bg::after{
  background:
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.08), transparent 26%),
    radial-gradient(circle at 18% 62%, rgba(0,0,0,.20), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 38%, rgba(0,0,0,.18)) !important;
}

.three-layer{
  opacity:.30 !important;
  mix-blend-mode:screen !important;
}

.scent-canvas{
  opacity:.38 !important;
  mix-blend-mode:screen !important;
}

body::before{
  background:
    radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06), transparent 34%, rgba(0,0,0,.13)) !important;
}


/* PATCH 24 - background switch fix
   Patch 23 used .aroma-bg background-image with !important.
   That locked the fallback image and prevented JS from visually switching backgrounds.
   Now fallback remains valid, while JS can override it per aroma.
*/

.aroma-bg{
  background-image:
    linear-gradient(90deg, rgba(8, 7, 12, .62) 0%, rgba(8, 7, 12, .22) 42%, rgba(8, 7, 12, .16) 68%, rgba(8, 7, 12, .34) 100%),
    url("../assets/bg_aroma/bg_aroma_after_dusk.webp");
  background-size:cover, cover !important;
  background-position:center center, center center !important;
  background-repeat:no-repeat, no-repeat !important;
}

/* Ensure WebGL and particles are visible but not overpowering the photo background. */
.three-layer{
  opacity:.28 !important;
  mix-blend-mode:screen !important;
}

.scent-canvas{
  opacity:.36 !important;
  mix-blend-mode:screen !important;
}


/* PATCH 25 - Vertical aroma title + story-focused card + new favicon */

/* Vertical title sits in the right visual space, reading bottom-to-top. */
.vertical-aroma-title{
  position:absolute;
  z-index:6;
  right:clamp(18px, 2.2vw, 34px);
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center;
  width:min(48vh, 470px);
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  font-family:var(--font-sans);
  font-size:clamp(3.2rem, 5.1vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:800;
  color:rgba(255,255,255,.14);
  text-shadow:0 24px 70px rgba(0,0,0,.22);
  mix-blend-mode:screen;
}

/* Hide the old large title inside the story card, so the card focuses on content. */
.product-info .title-stack{
  display:none !important;
}

.product-info .info-body{
  display:block !important;
}

.product-info .story-stack{
  max-width:100% !important;
  width:100% !important;
  padding-top:2px !important;
  gap:12px !important;
}

.product-info .story-stack p,
.product-info .story-lead,
.product-info .story-desc,
.product-info .story-close{
  max-width:64ch !important;
  font-size:clamp(14px, .95vw, 16px) !important;
  line-height:1.68 !important;
}

/* Give the story card a calmer and more editorial composition. */
.product-info{
  min-height:220px !important;
  padding:26px 32px 28px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}

.product-info .info-head{
  margin:0 !important;
  display:flex !important;
  justify-content:flex-start !important;
}

.product-info .info-tags{
  justify-content:flex-start !important;
}

.product-info .info-tags span{
  font-size:13px !important;
  padding:11px 18px !important;
}

/* Make the product area and right title breathe. */
@media (min-width:1181px){
  .product-card{
    padding-right:clamp(44px, 5vw, 88px);
  }

  .product-visual{
    left:-4%;
    right:8%;
  }

  .product-info{
    right:clamp(86px, 8vw, 138px) !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .vertical-aroma-title{
    right:12px;
    font-size:clamp(2.5rem, 8vw, 4.6rem);
    color:rgba(255,255,255,.12);
  }

  .product-info{
    right:76px !important;
  }
}

@media (max-width:720px){
  .vertical-aroma-title{
    right:-42px;
    top:44%;
    width:360px;
    font-size:3.1rem;
    color:rgba(255,255,255,.10);
  }

  .product-info{
    right:16px !important;
    padding:18px !important;
  }

  .product-info .story-stack p,
  .product-info .story-lead,
  .product-info .story-desc,
  .product-info .story-close{
    max-width:none !important;
    font-size:14px !important;
  }
}


/* PATCH 26 - Three-column editorial title rail + microinteraction
   Goal:
   - vertical aroma title becomes its own third section, not a child of product-card
   - product card gets cleaner story area
   - right rail has subtle motion and switch animation
*/

@media (min-width:1181px){
  .hero{
    grid-template-columns:minmax(380px, 520px) minmax(560px, 740px) minmax(84px, 180px) !important;
    gap:clamp(34px, 3.8vw, 72px) !important;
    align-items:center !important;
  }

  .product-card{
    grid-column:2 !important;
    padding-right:0 !important;
    max-width:740px !important;
  }

  .product-visual{
    left:0 !important;
    right:0 !important;
  }

  .product-info{
    right:28px !important;
  }
}

/* Third rail section */
.aroma-title-rail{
  position:relative;
  z-index:5;
  min-height:min(74vh, 760px);
  display:grid;
  place-items:center;
  align-self:center;
  pointer-events:none;
  isolation:isolate;
}

.aroma-title-rail .rail-line{
  position:absolute;
  top:8%;
  bottom:8%;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    180deg,
    transparent,
    rgba(255,255,255,.16),
    rgba(255,255,255,.06),
    transparent
  );
  opacity:.55;
}

.aroma-title-rail .rail-glow{
  position:absolute;
  inset:14% 18%;
  border-radius:999px;
  background:radial-gradient(circle at center, var(--glow), transparent 64%);
  filter:blur(34px);
  opacity:.32;
  animation:railGlowPulse 5.8s ease-in-out infinite;
}

/* Override old inside-card absolute title */
.vertical-aroma-title{
  position:relative !important;
  inset:auto !important;
  right:auto !important;
  top:auto !important;
  z-index:2 !important;
  width:auto !important;
  height:auto !important;
  max-height:min(70vh, 720px);
  display:block;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg) translateY(0) !important;
  transform-origin:center !important;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;

  font-family:var(--font-sans);
  font-size:clamp(4.8rem, 6.3vw, 7.8rem);
  line-height:.86;
  letter-spacing:-.058em;
  font-weight:850;
  color:rgba(255,255,255,.18);
  text-shadow:
    0 18px 54px rgba(0,0,0,.20),
    0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
  mix-blend-mode:screen;
  animation:verticalTitleFloat 6.5s ease-in-out infinite;
}

.vertical-aroma-title::after{
  content:"";
  position:absolute;
  inset:-8% -16%;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,.30) 42%,
    transparent 62%
  );
  transform:translateY(-120%);
  opacity:.34;
  filter:blur(8px);
  animation:verticalTitleShimmer 5.8s ease-in-out infinite;
}

.vertical-aroma-title.is-switching{
  animation:
    verticalTitleSwitch .7s cubic-bezier(.2,.8,.2,1),
    verticalTitleFloat 6.5s ease-in-out infinite .7s;
}

@keyframes verticalTitleFloat{
  0%, 100%{
    transform:rotate(180deg) translateY(0) !important;
    letter-spacing:-.058em;
    color:rgba(255,255,255,.16);
  }
  50%{
    transform:rotate(180deg) translateY(-10px) !important;
    letter-spacing:-.045em;
    color:rgba(255,255,255,.24);
  }
}

@keyframes verticalTitleSwitch{
  0%{
    opacity:0;
    transform:rotate(180deg) translateY(22px) scale(.96) !important;
    filter:blur(8px);
  }
  100%{
    opacity:1;
    transform:rotate(180deg) translateY(0) scale(1) !important;
    filter:blur(0);
  }
}

@keyframes verticalTitleShimmer{
  0%, 62%{
    transform:translateY(-120%);
    opacity:0;
  }
  72%{
    opacity:.28;
  }
  100%{
    transform:translateY(120%);
    opacity:0;
  }
}

@keyframes railGlowPulse{
  0%, 100%{
    opacity:.20;
    transform:scale(.96);
  }
  50%{
    opacity:.40;
    transform:scale(1.04);
  }
}

/* Make card cleaner now that title lives in a separate rail */
.product-info .title-stack{
  display:none !important;
}

.product-info .info-body{
  display:block !important;
}

.product-info .story-stack{
  width:100% !important;
  max-width:100% !important;
}

.product-info .story-stack p,
.product-info .story-lead,
.product-info .story-desc,
.product-info .story-close{
  max-width:64ch !important;
}

/* Tablet: keep editorial title outside card, but make it horizontal above stage */
@media (min-width:721px) and (max-width:1180px){
  .hero{
    grid-template-columns:1fr !important;
  }

  .aroma-title-rail{
    order:2;
    min-height:auto;
    display:block;
    margin:-4px 0 10px;
  }

  .aroma-title-rail .rail-line,
  .aroma-title-rail .rail-glow{
    display:none;
  }

  .vertical-aroma-title{
    writing-mode:horizontal-tb;
    transform:none !important;
    max-height:none;
    font-size:clamp(3rem, 9vw, 5rem);
    line-height:.9;
    text-align:left;
    color:rgba(255,255,255,.16);
    animation:verticalTitleFloatTablet 5.6s ease-in-out infinite;
  }

  .vertical-aroma-title.is-switching{
    animation:verticalTitleSwitchTablet .55s ease, verticalTitleFloatTablet 5.6s ease-in-out infinite .55s;
  }

  .product-card{
    order:3;
  }

  @keyframes verticalTitleFloatTablet{
    0%,100%{ transform:translateX(0) !important; opacity:.72; }
    50%{ transform:translateX(8px) !important; opacity:1; }
  }

  @keyframes verticalTitleSwitchTablet{
    0%{ opacity:0; transform:translateX(-18px) !important; filter:blur(7px); }
    100%{ opacity:1; transform:translateX(0) !important; filter:blur(0); }
  }
}

/* Mobile: show as soft horizontal editorial label between copy and product */
@media (max-width:720px){
  .hero{
    grid-template-columns:1fr !important;
  }

  .aroma-title-rail{
    order:2;
    min-height:auto;
    display:block;
    margin:2px 0 8px;
  }

  .aroma-title-rail .rail-line,
  .aroma-title-rail .rail-glow{
    display:none;
  }

  .vertical-aroma-title{
    writing-mode:horizontal-tb;
    transform:none !important;
    max-height:none;
    width:auto !important;
    right:auto !important;
    top:auto !important;
    font-size:clamp(2.2rem, 12vw, 3.5rem);
    line-height:.9;
    text-align:left;
    color:rgba(255,255,255,.14);
    animation:verticalTitleFloatTablet 5.8s ease-in-out infinite;
  }

  .product-card{
    order:3;
  }
}

@media (prefers-reduced-motion: reduce){
  .vertical-aroma-title,
  .vertical-aroma-title::after,
  .aroma-title-rail .rail-glow{
    animation:none !important;
  }
}


/* PATCH 27 - Static stronger aroma title
   User request:
   - remove microinteraction/motion from aroma title
   - make the vertical aroma title more visible
*/

.aroma-title-rail .rail-glow,
.vertical-aroma-title,
.vertical-aroma-title::after,
.vertical-aroma-title.is-switching{
  animation:none !important;
  transition:none !important;
}

.vertical-aroma-title::after{
  display:none !important;
}

/* Keep the rail elegant but static */
.aroma-title-rail .rail-glow{
  opacity:.38 !important;
  transform:none !important;
  filter:blur(30px) !important;
}

.aroma-title-rail .rail-line{
  opacity:.72 !important;
  background:linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.16)),
    rgba(255,255,255,.10),
    transparent
  ) !important;
}

/* Stronger readable editorial title */
.vertical-aroma-title{
  color:color-mix(in srgb, var(--accent) 44%, rgba(255,255,255,.58)) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  text-shadow:
    0 10px 30px rgba(0,0,0,.38),
    0 0 18px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  filter:none !important;
  letter-spacing:-.052em !important;
}

/* Slightly darken behind the rail so the title stands out */
.aroma-title-rail::before{
  content:"";
  position:absolute;
  inset:0 -12%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.18),
    transparent
  );
  filter:blur(18px);
  opacity:.72;
  z-index:0;
}

.aroma-title-rail .vertical-aroma-title{
  z-index:2 !important;
}

@media (min-width:1181px){
  .vertical-aroma-title{
    font-size:clamp(5.2rem, 6.6vw, 8.2rem) !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .vertical-aroma-title{
    color:color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.64)) !important;
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width:720px){
  .vertical-aroma-title{
    color:color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.68)) !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* PATCH 28 - Order UI + active state + product layering polish */

/* 1) More visible active scent, still premium and not too loud */
.scent-option{
  position:relative;
  overflow:hidden;
}

.scent-option::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.scent-option.is-active{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.08)),
      rgba(255,255,255,.055)
    ) !important;
  border-color:color-mix(in srgb, var(--accent) 52%, rgba(255,255,255,.22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 14px 36px color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,.12)) !important;
}

.scent-option.is-active::after{
  opacity:1;
}

.scent-option.is-active strong{
  color:#fff;
}

.scent-option.is-active small{
  color:color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.86));
}

.scent-option.is-active::before{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 82%, #fff);
  box-shadow:0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  z-index:2;
}

/* 2) Replace bottom CTA into order channel panel */
.order-panel{
  margin-top:24px;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}

.order-label{
  flex:0 0 auto;
  padding:0 8px 0 12px;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
}

.order-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1 1 auto;
}

.order-channel,
.preview-next-inline{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.065);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  padding:11px 14px;
  cursor:pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.order-channel:hover,
.preview-next-inline:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.22));
  background:color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.08));
  box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 16%, rgba(0,0,0,.18));
}

.order-icon{
  width:21px;
  height:21px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  font-size:12px;
  line-height:1;
}

.order-wa .order-icon{
  background:rgba(37,211,102,.18);
}

.order-shopee .order-icon{
  background:rgba(238,77,45,.20);
}

.order-tiktok .order-icon{
  background:rgba(255,255,255,.14);
}

.preview-next-inline{
  flex:0 0 auto;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.84);
}

/* Hide old action style if any remains */
.action-row-bottom .primary-action,
.action-row-bottom .secondary-action{
  display:none !important;
}

/* 3) Card top label: left aligned and not hidden by bottle */
.product-card .card-top{
  justify-content:space-between !important;
  align-items:flex-start !important;
  padding:28px 32px 0 !important;
  position:relative;
  z-index:14 !important;
}

.selected-meta-label,
.selected-label.selected-meta-label{
  margin-left:0 !important;
  justify-content:flex-start !important;
  text-align:left !important;
  min-width:min(41vw, 430px) !important;
  max-width:min(45vw, 480px) !important;
  padding:14px 24px !important;
}

.selected-meta-label span,
#selectedMeta{
  text-align:left !important;
  letter-spacing:.17em !important;
}

/* 4) Bottle above all product-card layers */
.product-visual{
  z-index:18 !important;
  pointer-events:none;
}

#bottleImage{
  position:relative !important;
  z-index:28 !important;
}

.product-card::before,
.product-card::after{
  z-index:1;
}

.product-info{
  z-index:12 !important;
}

.card-top{
  z-index:24 !important;
}

/* 5) Make it yours hover color */
.card-top a{
  transition:color .22s ease, border-color .22s ease, text-shadow .22s ease, transform .22s ease !important;
}

.card-top a:hover{
  color:color-mix(in srgb, var(--accent) 45%, #fff) !important;
  border-bottom-color:color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.42)) !important;
  text-shadow:0 0 18px color-mix(in srgb, var(--accent) 46%, transparent);
  transform:translateY(-1px);
}

/* Keep product visual clean on the center card */
@media (min-width:1181px){
  .product-visual{
    top:-126px !important;
    bottom:190px !important;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    min-width:390px !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .order-panel{
    border-radius:24px;
    align-items:flex-start;
    flex-direction:column;
    max-width:none;
  }

  .order-actions{
    width:100%;
    flex-wrap:wrap;
  }

  .preview-next-inline{
    width:100%;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    min-width:min(70vw, 420px) !important;
    max-width:min(74vw, 480px) !important;
  }
}

@media (max-width:720px){
  .order-panel{
    border-radius:24px;
    align-items:stretch;
    flex-direction:column;
    max-width:none;
    padding:10px;
  }

  .order-label{
    padding:2px 4px 0;
  }

  .order-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .order-channel,
  .preview-next-inline{
    width:100%;
    min-height:44px;
  }

  .product-card .card-top{
    padding:18px 18px 0 !important;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    min-width:0 !important;
    max-width:calc(100vw - 72px) !important;
    padding:12px 14px !important;
  }

  .selected-meta-label span,
  #selectedMeta{
    font-size:10px !important;
    letter-spacing:.09em !important;
  }
}


/* PATCH 29 - Final polish based on latest notes
   1. Hero dynamic copy simplified to perfume title + EDP + longevity.
   2. Order panel cleaned, Preview Next Aroma removed.
   3. Top meta label width tightened.
   4. Bottle enlarged.
   5. Glass blur reduced so background remains visible.
*/

/* Better readable hero copy for new English durability sentence */
.lead{
  max-width:44ch !important;
  font-size:clamp(1rem, 1.2vw, 1.16rem) !important;
  line-height:1.62 !important;
}

/* Order panel: cleaner, more premium, no preview button */
.order-panel{
  max-width:430px !important;
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:26px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.038)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.12) !important;
}

.order-label{
  padding:0 4px 0 6px !important;
  font-size:12px !important;
  letter-spacing:.02em !important;
  color:rgba(255,255,255,.88) !important;
}

.order-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  width:100% !important;
}

.order-channel{
  min-height:40px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  background:rgba(255,255,255,.070) !important;
  border-color:rgba(255,255,255,.12) !important;
}

.order-channel span:last-child{
  white-space:nowrap !important;
}

.order-channel:hover{
  transform:translateY(-1px) !important;
  background:color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.075)) !important;
}

.preview-next-inline{
  display:none !important;
}

/* Top label: left aligned but compact, no long empty pill */
.selected-meta-label,
.selected-label.selected-meta-label{
  min-width:0 !important;
  width:auto !important;
  max-width:360px !important;
  justify-content:flex-start !important;
  padding:13px 20px !important;
}

.selected-meta-label span,
#selectedMeta{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:11px !important;
  letter-spacing:.15em !important;
}

/* Bottle must feel like the hero object. */
.product-visual{
  top:-148px !important;
  bottom:178px !important;
  z-index:28 !important;
}

#bottleImage{
  width:min(78%, 530px) !important;
  max-height:670px !important;
  z-index:40 !important;
  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.18))
    drop-shadow(0 48px 80px rgba(0,0,0,.26))
    drop-shadow(0 0 18px rgba(255,255,255,.05)) !important;
}

/* Keep bottle above card layers */
.product-card .card-top{
  z-index:30 !important;
}

.product-info{
  z-index:18 !important;
}

/* Reduce blur and opacity so photographic background is still visible */
.product-card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.030)) !important;
  backdrop-filter:blur(9px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(118%) !important;
  border-color:rgba(255,255,255,.16) !important;
}

.product-info{
  background:linear-gradient(180deg, rgba(22,18,20,.48), rgba(24,19,22,.40)) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* If title rail exists, keep it clearer but static */
.vertical-aroma-title{
  animation:none !important;
  transition:none !important;
  color:color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,.62)) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.vertical-aroma-title::after{
  display:none !important;
}

@media (min-width:1181px){
  .product-card{
    min-height:650px !important;
  }

  .product-info{
    right:28px !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .order-panel{
    max-width:520px !important;
    grid-template-columns:1fr !important;
    border-radius:22px !important;
  }

  .order-actions{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .product-visual{
    top:-110px !important;
    bottom:210px !important;
  }

  #bottleImage{
    width:min(70%, 470px) !important;
    max-height:560px !important;
  }
}

@media (max-width:720px){
  .order-panel{
    max-width:none !important;
    grid-template-columns:1fr !important;
    border-radius:22px !important;
  }

  .order-actions{
    grid-template-columns:1fr !important;
  }

  .order-channel{
    width:100% !important;
    min-height:44px !important;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    max-width:calc(100vw - 72px) !important;
    padding:11px 14px !important;
  }

  .selected-meta-label span,
  #selectedMeta{
    font-size:10px !important;
    letter-spacing:.09em !important;
  }

  .product-visual{
    top:-66px !important;
    bottom:258px !important;
  }

  #bottleImage{
    width:min(84%, 340px) !important;
    max-height:420px !important;
  }
}


/* PATCH 30 - UI micro polish */

/* 1. Hero dynamic copy becomes a clearer info card with visual distance */
.lead{
  margin-top:26px !important;
  padding:14px 16px 15px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  backdrop-filter:blur(10px) saturate(116%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(116%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.lead::first-letter{
  color:color-mix(in srgb, var(--accent) 42%, #fff);
}

/* Make the scent title in the dynamic line feel emphasized through first words */
.hero-copy .lead{
  font-weight:520;
}

.mood-row{
  margin-top:14px !important;
}

/* 2. User-centric picker copy */
.picker-head p{
  max-width:44ch;
}

/* 3. Order panel with real icons */
.order-panel{
  max-width:470px !important;
  grid-template-columns:auto 1fr !important;
  padding:10px 12px !important;
}

.order-actions{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.order-channel{
  gap:8px !important;
  padding:9px 12px !important;
}

.order-icon,
.order-channel .order-icon{
  display:none !important;
}

.order-icon-img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
  flex:0 0 22px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.14));
}

.order-tiktok .order-icon-img{
  width:23px;
  height:23px;
}

.order-shopee .order-icon-img{
  width:22px;
  height:22px;
}

/* 4. Header motion switch and bilingual toggle */
.top-nav{
  gap:10px !important;
}

.motion-toggle{
  position:relative !important;
  min-width:112px !important;
  padding:7px 10px 7px 42px !important;
  justify-content:flex-start !important;
  border-radius:999px !important;
}

.motion-toggle::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:26px;
  height:15px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
}

.motion-toggle::after{
  content:"";
  position:absolute;
  left:13px;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#8cffaa;
  box-shadow:0 0 12px rgba(140,255,170,.65);
  transition:left .22s ease, background .22s ease, box-shadow .22s ease;
}

.motion-toggle span{
  display:none !important;
}

.motion-toggle.is-off::after{
  left:26px;
  background:rgba(255,255,255,.62);
  box-shadow:none;
}

.motion-toggle.is-off{
  color:rgba(255,255,255,.62) !important;
}

.lang-toggle{
  min-height:42px;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  align-items:center;
  padding:5px;
  min-width:92px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.lang-toggle span{
  min-height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  padding:0 9px;
}

.lang-toggle span:first-child{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.lang-toggle.is-eng span:first-child{
  background:transparent;
  color:rgba(255,255,255,.62);
}

.lang-toggle.is-eng span:last-child{
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* 5. Bottle micromotion and hover zoom */
.product-visual{
  perspective:1000px;
}

#bottleImage{
  transform-origin:center bottom;
  animation:bottleFloatWave 5.6s ease-in-out infinite;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease !important;
  will-change:transform;
}

.product-visual:hover #bottleImage,
#bottleImage:hover{
  transform:translateY(-10px) scale(1.045) rotateX(1.2deg) !important;
  filter:
    drop-shadow(0 20px 26px rgba(0,0,0,.20))
    drop-shadow(0 54px 86px rgba(0,0,0,.28))
    drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 22%, transparent)) !important;
}

@keyframes bottleFloatWave{
  0%, 100%{
    transform:translate3d(0, 0, 0) rotateZ(0deg);
  }
  35%{
    transform:translate3d(0, -8px, 0) rotateZ(.28deg);
  }
  68%{
    transform:translate3d(0, -3px, 0) rotateZ(-.22deg);
  }
}

/* 6. Remove rail line on right title */
.aroma-title-rail .rail-line{
  display:none !important;
}

.aroma-title-rail::before{
  opacity:.50 !important;
}

/* Keep vertical title visible but clean */
.vertical-aroma-title{
  color:color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,.66)) !important;
  text-shadow:
    0 10px 28px rgba(0,0,0,.38),
    0 0 26px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

@media (prefers-reduced-motion: reduce){
  #bottleImage{
    animation:none !important;
  }
}

@media (max-width:720px){
  .lead{
    padding:12px 14px !important;
    border-radius:16px !important;
  }

  .top-nav{
    width:100%;
    justify-content:space-between;
  }

  .motion-toggle{
    min-width:108px !important;
  }

  .lang-toggle{
    min-width:88px;
  }

  .order-panel{
    max-width:none !important;
  }
}


/* PATCH 31 - Clean final build override
   Goal: source HTML, JS state, and visible UI now match.
   This is intended as the new stable baseline. Keep Patch 30 as rollback.
*/

.hero-final{
  grid-template-columns:minmax(380px, 520px) minmax(560px, 740px) minmax(84px, 180px) !important;
  gap:clamp(34px, 3.8vw, 72px) !important;
}

.product-stage{
  grid-column:auto !important;
}

.scent-picker .picker-head p{
  color:rgba(255,255,255,.68) !important;
}

.order-panel{
  margin-top:22px !important;
}

.order-actions{
  align-items:center !important;
}

.product-card .card-top{
  padding:28px 32px 0 !important;
}

.selected-meta-label,
.selected-label.selected-meta-label{
  max-width:340px !important;
  padding:13px 18px !important;
}

.product-info{
  min-height:220px !important;
}

#productDesc:empty{
  display:none !important;
}

.vertical-aroma-title{
  animation:none !important;
}

.vertical-aroma-title::after,
.aroma-title-rail .rail-line{
  display:none !important;
}

@media (max-width:1180px){
  .hero-final{
    grid-template-columns:1fr !important;
  }
}


/* PATCH 32 - CTA + story readability
   Keep the bottle position, but move/readjust the story area so text is not covered.
*/

/* CTA polish: one calm commerce bar with stronger hierarchy */
.order-panel{
  max-width:500px !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:28px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.038)),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%) !important;
  border:1px solid color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px rgba(0,0,0,.15) !important;
}

.order-label{
  padding:2px 4px 0 !important;
  font-size:12px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.74) !important;
}

.order-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:9px !important;
}

.order-channel{
  min-height:46px !important;
  padding:10px 13px !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.order-channel:hover{
  transform:translateY(-2px) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.12)),
      rgba(255,255,255,.065)
    ) !important;
  border-color:color-mix(in srgb, var(--accent) 44%, rgba(255,255,255,.22)) !important;
}

/* Keep bottle hero position, but ensure it is visually above card and does not ruin reading */
.product-visual{
  z-index:34 !important;
  top:-150px !important;
  bottom:220px !important;
}

#bottleImage{
  width:min(78%, 530px) !important;
  max-height:670px !important;
  z-index:44 !important;
}

/* Product card gets extra room so the bottle can overlap without covering story */
.product-card{
  min-height:690px !important;
}

/* Story panel: lower, darker, and with internal top space clear of bottle */
.product-info{
  left:28px !important;
  right:28px !important;
  bottom:28px !important;
  min-height:260px !important;
  padding:36px 36px 34px !important;
  border-radius:30px !important;
  background:
    linear-gradient(180deg, rgba(18,15,18,.68), rgba(22,17,20,.54)) !important;
  backdrop-filter:blur(7px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(118%) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 20px 54px rgba(0,0,0,.18) !important;
}

/* Put story content to the right side on desktop, away from bottle center overlap */
@media (min-width:1181px){
  .product-info{
    display:grid !important;
    grid-template-columns:minmax(150px, .42fr) minmax(360px, .58fr) !important;
    column-gap:28px !important;
    align-items:start !important;
  }

  .product-info .info-head{
    grid-column:1 / -1 !important;
    max-width:52% !important;
  }

  .product-info .info-body{
    grid-column:2 !important;
    display:block !important;
  }

  .product-info .story-stack{
    padding-top:0 !important;
    max-width:100% !important;
  }

  .product-info .story-stack p,
  .product-info .story-lead,
  .product-info .story-desc,
  .product-info .story-close{
    max-width:43ch !important;
    font-size:15px !important;
    line-height:1.72 !important;
  }

  .product-info .info-tags span{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.13) !important;
  }
}

/* Add subtle shadow gradient behind bottle bottom so overlap feels intentional */
.product-card::after{
  content:"" !important;
  position:absolute !important;
  left:22%;
  right:22%;
  top:42%;
  height:190px;
  z-index:10 !important;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.12) 34%,
      transparent 72%
    );
  filter:blur(20px);
}

/* Make card label and top link remain above the decorative shadow */
.card-top{
  z-index:50 !important;
}

/* Responsive: story stays readable and bottle remains hero */
@media (min-width:721px) and (max-width:1180px){
  .product-card{
    min-height:710px !important;
  }

  .product-visual{
    top:-112px !important;
    bottom:270px !important;
  }

  #bottleImage{
    width:min(72%, 480px) !important;
    max-height:560px !important;
  }

  .product-info{
    min-height:280px !important;
    padding:28px !important;
  }

  .order-panel{
    max-width:520px !important;
  }
}

@media (max-width:720px){
  .order-panel{
    max-width:none !important;
    border-radius:24px !important;
  }

  .order-actions{
    grid-template-columns:1fr !important;
  }

  .order-channel{
    min-height:48px !important;
    border-radius:18px !important;
  }

  .product-card{
    min-height:720px !important;
  }

  .product-visual{
    top:-64px !important;
    bottom:330px !important;
  }

  #bottleImage{
    width:min(84%, 340px) !important;
    max-height:420px !important;
  }

  .product-info{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    min-height:auto !important;
    padding:20px !important;
    border-radius:24px !important;
  }

  .product-info .story-stack p,
  .product-info .story-lead,
  .product-info .story-desc,
  .product-info .story-close{
    max-width:none !important;
    font-size:14px !important;
    line-height:1.66 !important;
  }
}


/* PATCH 33 - Story + dynamic notes card
   Goal:
   - Keep bottle position.
   - Avoid story text being covered.
   - Make the lower card feel like one full editorial story block.
   - Add dynamic Top / Heart / Base notes at the bottom.
*/

.product-card{
  min-height:760px !important;
}

.product-visual{
  top:-146px !important;
  bottom:330px !important;
  z-index:34 !important;
}

#bottleImage{
  width:min(76%, 520px) !important;
  max-height:650px !important;
  z-index:44 !important;
}

/* Rebuild the lower card as a structured editorial panel */
.product-info.product-info-notes,
.product-info{
  left:28px !important;
  right:28px !important;
  bottom:28px !important;
  min-height:355px !important;
  padding:26px 30px 24px !important;
  border-radius:30px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:1fr auto !important;
  gap:22px !important;
  background:
    linear-gradient(180deg, rgba(20,17,18,.66), rgba(23,18,19,.54)) !important;
  backdrop-filter:blur(7px) saturate(116%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(116%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 58px rgba(0,0,0,.20) !important;
  z-index:18 !important;
}

/* Remove old grid behavior from previous patches */
.product-info .info-head,
.product-info .info-body,
.product-info .title-stack{
  display:contents !important;
}

.story-card{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(160px, .34fr) minmax(0, .66fr);
  gap:clamp(24px, 3vw, 46px);
  align-items:start;
}

.story-card .info-tags{
  position:static !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  max-width:none !important;
  padding:0 !important;
}

.story-card .info-tags span{
  padding:12px 18px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:rgba(255,255,255,.88) !important;
  white-space:normal !important;
  max-width:260px;
}

.story-card .story-stack{
  display:grid !important;
  gap:14px !important;
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}

.story-card .story-stack p,
.story-card .story-lead,
.story-card .story-desc,
.story-card .story-close{
  margin:0 !important;
  max-width:54ch !important;
  width:auto !important;
  color:rgba(255,255,255,.88) !important;
  font-size:15px !important;
  line-height:1.72 !important;
  letter-spacing:0 !important;
}

.story-card .story-lead{
  font-weight:620 !important;
  color:#fff !important;
}

.story-card .story-close{
  color:rgba(255,255,255,.98) !important;
}

/* Notes section inspired by the reference card */
.notes-grid{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.note-card{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  min-width:0;
}

.note-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.85));
  border:1px solid color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,.14));
  background:rgba(255,255,255,.045);
  font-size:17px;
  line-height:1;
}

.note-card strong{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}

.note-card p{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.5;
}

/* Let the bottle overlap only the upper visual card, not the story block */
.product-card::after{
  left:26% !important;
  right:26% !important;
  top:36% !important;
  height:160px !important;
  opacity:.70 !important;
}

/* Desktop balance: visual card can stay cinematic but text remains below the bottle */
@media (min-width:1181px){
  .product-card{
    min-height:760px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:355px !important;
  }

  .product-visual{
    top:-146px !important;
    bottom:330px !important;
  }
}

/* Tablet */
@media (min-width:721px) and (max-width:1180px){
  .product-card{
    min-height:800px !important;
  }

  .product-visual{
    top:-110px !important;
    bottom:410px !important;
  }

  #bottleImage{
    width:min(72%, 470px) !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:405px !important;
    padding:24px !important;
  }

  .story-card{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .story-card .info-tags span{
    max-width:none;
  }

  .notes-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .note-card{
    grid-template-columns:34px 1fr;
  }
}

/* Mobile */
@media (max-width:720px){
  .product-card{
    min-height:860px !important;
  }

  .product-visual{
    top:-64px !important;
    bottom:520px !important;
  }

  #bottleImage{
    width:min(82%, 330px) !important;
    max-height:410px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    min-height:auto !important;
    padding:20px !important;
    border-radius:24px !important;
  }

  .story-card{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .story-card .story-stack p,
  .story-card .story-lead,
  .story-card .story-desc,
  .story-card .story-close{
    max-width:none !important;
    font-size:14px !important;
    line-height:1.66 !important;
  }

  .notes-grid{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .note-icon{
    width:32px;
    height:32px;
    font-size:15px;
  }

  .note-card{
    grid-template-columns:34px 1fr;
  }

  .note-card p{
    font-size:12.5px;
  }
}


/* PATCH 34 - Story full-width layout
   User direction:
   - Mood label becomes its own full-width row.
   - Story becomes its own full-width row, left aligned.
   - Add large breathing space between label and story so the bottle overlap feels intentional.
   - Keep notes at bottom.
*/

.product-card{
  min-height:800px !important;
}

/* Keep bottle big and central, but avoid text collision by giving story more lower space */
.product-visual{
  top:-146px !important;
  bottom:390px !important;
  z-index:34 !important;
}

#bottleImage{
  width:min(76%, 520px) !important;
  max-height:650px !important;
  z-index:44 !important;
}

/* Lower editorial panel rebuilt as 3 vertical rows:
   1. Mood label
   2. Story
   3. Notes
*/
.product-info.product-info-notes,
.product-info{
  left:28px !important;
  right:28px !important;
  bottom:28px !important;
  min-height:430px !important;
  padding:30px 34px 26px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr auto !important;
  gap:0 !important;
  border-radius:32px !important;
  background:
    linear-gradient(180deg, rgba(18,15,18,.68), rgba(23,18,19,.55)) !important;
  backdrop-filter:blur(7px) saturate(116%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(116%) !important;
  z-index:18 !important;
}

/* Full-width story card, no side-by-side columns */
.story-card{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr !important;
  gap:0 !important;
  align-items:start !important;
  min-width:0 !important;
}

/* Mood label full row */
.story-card .info-tags{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  position:relative !important;
  z-index:2 !important;
  padding:0 !important;
  margin:0 !important;
}

.story-card .info-tags span{
  max-width:none !important;
  width:auto !important;
  padding:12px 20px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.095) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.90) !important;
  font-size:14px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}

/* Large vertical gap creates clear bottle breathing space */
.story-card .story-stack{
  margin-top:clamp(108px, 9.2vw, 148px) !important;
  display:grid !important;
  gap:13px !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  text-align:left !important;
  position:relative !important;
  z-index:2 !important;
}

/* Story as full div, left aligned */
.story-card .story-stack p,
.story-card .story-lead,
.story-card .story-desc,
.story-card .story-close{
  display:block !important;
  width:100% !important;
  max-width:68ch !important;
  margin:0 !important;
  text-align:left !important;
  color:rgba(255,255,255,.88) !important;
  font-size:15px !important;
  line-height:1.72 !important;
  letter-spacing:0 !important;
}

.story-card .story-lead{
  font-weight:620 !important;
  color:#fff !important;
}

.story-card .story-close{
  color:rgba(255,255,255,.98) !important;
}

/* Notes remain below and separated clearly */
.notes-grid{
  margin-top:24px !important;
  padding-top:20px !important;
  border-top:1px solid rgba(255,255,255,.11) !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:20px !important;
}

/* Make overlap shadow more intentional, behind bottle only */
.product-card::after{
  left:24% !important;
  right:24% !important;
  top:32% !important;
  height:180px !important;
  opacity:.62 !important;
  z-index:10 !important;
}

/* Desktop fine tuning */
@media (min-width:1181px){
  .product-card{
    min-height:800px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:430px !important;
  }

  .story-card .story-stack{
    margin-top:clamp(112px, 8.7vw, 146px) !important;
  }
}

/* Tablet */
@media (min-width:721px) and (max-width:1180px){
  .product-card{
    min-height:860px !important;
  }

  .product-visual{
    top:-110px !important;
    bottom:500px !important;
  }

  #bottleImage{
    width:min(72%, 470px) !important;
    max-height:560px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:490px !important;
    padding:24px !important;
  }

  .story-card .story-stack{
    margin-top:118px !important;
  }

  .story-card .story-stack p,
  .story-card .story-lead,
  .story-card .story-desc,
  .story-card .story-close{
    max-width:none !important;
  }

  .notes-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* Mobile */
@media (max-width:720px){
  .product-card{
    min-height:910px !important;
  }

  .product-visual{
    top:-64px !important;
    bottom:600px !important;
  }

  #bottleImage{
    width:min(82%, 330px) !important;
    max-height:410px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    min-height:auto !important;
    padding:20px !important;
    border-radius:24px !important;
  }

  .story-card .info-tags span{
    font-size:13px !important;
    padding:10px 15px !important;
  }

  .story-card .story-stack{
    margin-top:94px !important;
    gap:11px !important;
  }

  .story-card .story-stack p,
  .story-card .story-lead,
  .story-card .story-desc,
  .story-card .story-close{
    max-width:none !important;
    font-size:14px !important;
    line-height:1.66 !important;
  }

  .notes-grid{
    grid-template-columns:1fr !important;
    gap:13px !important;
    margin-top:20px !important;
    padding-top:18px !important;
  }
}


/* PATCH 35 - Story clean + headline polish
   User direction:
   - Hide the mood label row but keep DOM available.
   - Remove the gap created by hidden label.
   - Make story one cleaner readable block.
   - Give story a subtle readable handwritten feel.
   - Slightly polish headline color without making it too loud.
*/

/* 1. Hide mood label row completely and remove spacing/gap */
.story-card .info-tags,
.product-info .info-tags{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Rebuild story card as story-only top area */
.story-card{
  display:block !important;
  min-height:0 !important;
  padding:0 !important;
}

/* Remove artificial bottle gap from previous patch */
.story-card .story-stack{
  margin-top:0 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  text-align:left !important;
}

/* Hide empty fallback paragraphs after JS combines copy */
.story-card .story-desc:empty,
.story-card .story-close:empty,
#productDesc:empty,
#productClose:empty{
  display:none !important;
}

/* 2. Story box becomes one clean editorial paragraph */
.story-card .story-lead,
#productLead{
  display:block !important;
  width:100% !important;
  max-width:72ch !important;
  margin:0 !important;
  padding:2px 0 0 !important;
  text-align:left !important;

  font-family:"Segoe Print", "Bradley Hand", "Comic Sans MS", cursive !important;
  font-size:clamp(15px, 1vw, 17px) !important;
  line-height:1.78 !important;
  font-weight:500 !important;
  letter-spacing:.005em !important;
  color:rgba(255,255,255,.91) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.24);
}

/* Make the product info card slightly more balanced now that label row is gone */
.product-info.product-info-notes,
.product-info{
  min-height:360px !important;
  padding:32px 36px 26px !important;
  grid-template-rows:1fr auto !important;
  gap:20px !important;
}

/* Notes stay as bottom section, closer to story but still separated */
.notes-grid{
  margin-top:22px !important;
  padding-top:18px !important;
}

/* Keep bottle position strong without colliding with story */
.product-card{
  min-height:760px !important;
}

.product-visual{
  top:-146px !important;
  bottom:390px !important;
}

/* 3. Headline color polish:
   Keep luxury white, add soft warm/accent gradient and faint glow.
   I do not recommend making it fully colored because it would reduce luxury feel. */
.hero-copy h1{
  color:transparent !important;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,250,239,.96) 46%,
      color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.94)) 100%
    ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  text-shadow:
    0 14px 46px rgba(0,0,0,.20),
    0 0 22px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* On bright backgrounds, keep title contrast stronger */
body::before{
  background:
    radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 34%, rgba(0,0,0,.15)) !important;
}

@media (min-width:1181px){
  .product-info.product-info-notes,
  .product-info{
    min-height:360px !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .product-card{
    min-height:780px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:auto !important;
    padding:26px !important;
  }

  .story-card .story-lead,
  #productLead{
    max-width:none !important;
    font-size:15px !important;
  }
}

@media (max-width:720px){
  .product-card{
    min-height:820px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:auto !important;
    padding:21px !important;
  }

  .story-card .story-lead,
  #productLead{
    max-width:none !important;
    font-size:14px !important;
    line-height:1.68 !important;
  }

  .hero-copy h1{
    text-shadow:0 10px 34px rgba(0,0,0,.24) !important;
  }
}


/* PATCH 36 - Story gap fix
   Problem:
   Story text is readable, but it starts too high and collides with the bottle.
   Fix:
   Keep the clean one-paragraph story style, but push story content down
   while preserving the bottle hero position.
*/

.product-card{
  min-height:820px !important;
}

/* Keep bottle position/size, but define a safe overlap zone */
.product-visual{
  top:-146px !important;
  bottom:430px !important;
  z-index:34 !important;
}

#bottleImage{
  width:min(76%, 520px) !important;
  max-height:650px !important;
  z-index:44 !important;
}

/* Give the lower card more height so story + notes can breathe */
.product-info.product-info-notes,
.product-info{
  min-height:440px !important;
  padding:34px 38px 28px !important;
  display:grid !important;
  grid-template-rows:1fr auto !important;
  gap:24px !important;
}

/* Hidden label must not create layout gap */
.story-card .info-tags,
.product-info .info-tags{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Main fix: intentional blank zone under bottle before story starts */
.story-card{
  display:block !important;
  padding-top:clamp(128px, 10.5vw, 168px) !important;
  min-height:0 !important;
}

/* Story remains one full-width div, left aligned */
.story-card .story-stack{
  margin-top:0 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  text-align:left !important;
}

.story-card .story-lead,
#productLead{
  max-width:74ch !important;
  margin:0 !important;
  color:rgba(255,255,255,.92) !important;
  line-height:1.74 !important;
}

/* Notes stay visually separated below story */
.notes-grid{
  margin-top:20px !important;
  padding-top:20px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}

/* Add soft bottle shadow only in the empty gap area */
.product-card::after{
  left:24% !important;
  right:24% !important;
  top:34% !important;
  height:190px !important;
  opacity:.68 !important;
  z-index:10 !important;
}

@media (min-width:1181px){
  .product-info.product-info-notes,
  .product-info{
    min-height:440px !important;
  }

  .story-card{
    padding-top:clamp(132px, 10vw, 166px) !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .product-card{
    min-height:880px !important;
  }

  .product-visual{
    top:-112px !important;
    bottom:510px !important;
  }

  #bottleImage{
    width:min(72%, 470px) !important;
    max-height:560px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:500px !important;
    padding:28px !important;
  }

  .story-card{
    padding-top:126px !important;
  }
}

@media (max-width:720px){
  .product-card{
    min-height:900px !important;
  }

  .product-visual{
    top:-64px !important;
    bottom:610px !important;
  }

  #bottleImage{
    width:min(82%, 330px) !important;
    max-height:410px !important;
  }

  .product-info.product-info-notes,
  .product-info{
    min-height:auto !important;
    padding:22px !important;
  }

  .story-card{
    padding-top:104px !important;
  }

  .story-card .story-lead,
  #productLead{
    font-size:14px !important;
    line-height:1.68 !important;
  }
}


/* PATCH 36 PERF WEBP CLEANUP
   Performance-focused cleanup from the approved Patch 36 visual baseline.
   No intended visual/layout change.
*/

.product-card,
.product-stage{
  contain:none !important;
  overflow:visible !important;
}

.hero-copy,
.aroma-title-rail{
  contain:layout paint;
}

/* keep particles subtle and cheaper */
.scent-canvas{
  opacity:.34 !important;
}

/* image compositing hint */
#bottleImage,
.aroma-bg,
.scent-canvas,
.three-layer{
  transform:translateZ(0);
}


/* PATCH 40 - Modern story font
   Replace the handwritten/cursive story text with a cleaner modern Google Font.
   Font: Manrope. It keeps the premium feel, improves readability, and still looks modern.
*/

.story-card .story-lead,
#productLead,
.story-card .story-desc,
.story-card .story-close,
#productDesc,
#productClose{
  font-family:"Manrope", var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:clamp(15px, .98vw, 16.5px) !important;
  line-height:1.72 !important;
  font-weight:560 !important;
  letter-spacing:-.01em !important;
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.25) !important;
  font-style:normal !important;
}

.story-card .story-lead strong,
#productLead strong{
  font-weight:760 !important;
}

.product-info{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Slightly reduce story box visual weight now that the font is clearer */
.product-info.product-info-notes,
.product-info{
  background:
    linear-gradient(180deg, rgba(18,15,18,.66), rgba(23,18,19,.54)) !important;
}

/* Notes also use the same modern family for consistency */
.note-card,
.note-card strong,
.note-card p{
  font-family:"Manrope", var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.note-card strong{
  font-weight:800 !important;
}

.note-card p{
  font-weight:520 !important;
}


/* PATCH 42 - Dedicated mobile UX
   Desktop remains based on Patch 40.
   Mobile becomes a different journey:
   1. Brand/header + headline
   2. Compact horizontal scent selector
   3. Product card optimized for one-hand scrolling
   4. Sticky order bar at bottom
*/

/* Desktop remains unchanged. These are mostly mobile overrides. */
@media (max-width:720px){

  html{
    scroll-behavior:smooth;
  }

  body{
    min-height:100svh;
    overflow-x:hidden;
  }

  body::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08) 32%, rgba(0,0,0,.22) 100%) !important;
  }

  .page-shell{
    min-height:100svh !important;
    padding:
      max(16px, env(safe-area-inset-top))
      16px
      calc(120px + env(safe-area-inset-bottom))
      16px !important;
  }

  .site-header{
    position:sticky !important;
    top:0 !important;
    z-index:80 !important;
    padding:10px 0 8px !important;
    backdrop-filter:blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(130%) !important;
  }

  .brand img,
  .brand-logo,
  .site-header img{
    max-height:28px !important;
  }

  .top-nav{
    gap:7px !important;
  }

  .motion-toggle{
    min-width:46px !important;
    width:46px !important;
    height:30px !important;
    padding:0 !important;
    font-size:0 !important;
  }

  .motion-toggle::before{
    left:9px !important;
    width:27px !important;
    height:16px !important;
  }

  .motion-toggle::after{
    left:12px !important;
    width:10px !important;
    height:10px !important;
  }

  .motion-toggle.is-off::after{
    left:25px !important;
  }

  .lang-toggle{
    min-width:74px !important;
    min-height:32px !important;
    padding:3px !important;
    font-size:10px !important;
  }

  .lang-toggle span{
    min-height:24px !important;
    padding:0 7px !important;
  }

  .hero.hero-final,
  .hero{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    align-items:stretch !important;
    padding-top:8px !important;
  }

  .hero-copy{
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    contain:none !important;
  }

  .hero-copy h1{
    font-size:clamp(48px, 14.8vw, 74px) !important;
    line-height:.91 !important;
    letter-spacing:-.055em !important;
    max-width:8.5ch !important;
    margin-top:18px !important;
    margin-bottom:16px !important;
  }

  .lead{
    margin-top:0 !important;
    max-width:none !important;
    padding:12px 14px !important;
    border-radius:18px !important;
    font-size:13.5px !important;
    line-height:1.55 !important;
    background:rgba(20,16,19,.34) !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }

  .mood-row{
    margin-top:10px !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none !important;
  }

  .mood-row::-webkit-scrollbar{
    display:none;
  }

  .mood-row span{
    flex:0 0 auto !important;
    font-size:10px !important;
    padding:8px 11px !important;
  }

  /* Mobile scent picker: horizontal cards, not 2-column desktop grid */
  .scent-picker{
    margin-top:18px !important;
  }

  .picker-head{
    align-items:flex-end !important;
    margin-bottom:10px !important;
  }

  .picker-head h2{
    font-size:17px !important;
    line-height:1.15 !important;
  }

  .picker-head p{
    font-size:12px !important;
    line-height:1.4 !important;
    max-width:28ch !important;
  }

  #sceneLabel{
    font-size:12px !important;
    letter-spacing:.12em !important;
  }

  .scent-grid{
    display:flex !important;
    overflow-x:auto !important;
    gap:10px !important;
    padding:2px 2px 8px 2px !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }

  .scent-grid::-webkit-scrollbar{
    display:none;
  }

  .scent-option{
    flex:0 0 178px !important;
    min-height:72px !important;
    padding:14px 15px !important;
    scroll-snap-align:start !important;
    border-radius:18px !important;
  }

  .scent-option strong{
    font-size:12px !important;
    letter-spacing:.16em !important;
  }

  .scent-option small{
    font-size:11.5px !important;
    margin-top:7px !important;
  }

  .scent-option.is-active{
    transform:translateY(-1px) !important;
  }

  /* Mobile product card as a separate product stage */
  .product-card,
  .product-stage{
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:720px !important;
    margin-top:10px !important;
    border-radius:30px !important;
    overflow:visible !important;
    contain:none !important;
  }

  .product-card .card-top{
    padding:18px 18px 0 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    max-width:calc(100vw - 146px) !important;
    padding:10px 13px !important;
    border-radius:999px !important;
  }

  .selected-meta-label span,
  #selectedMeta{
    font-size:9.5px !important;
    letter-spacing:.10em !important;
  }

  .card-top a{
    font-size:12px !important;
    white-space:nowrap !important;
    padding-top:6px !important;
  }

  .product-visual{
    top:-52px !important;
    bottom:460px !important;
    left:0 !important;
    right:0 !important;
  }

  #bottleImage{
    width:min(86%, 340px) !important;
    max-height:405px !important;
    object-fit:contain !important;
  }

  .product-info.product-info-notes,
  .product-info{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    min-height:auto !important;
    padding:22px 18px 20px !important;
    border-radius:26px !important;
  }

  .story-card{
    padding-top:96px !important;
  }

  .story-card .story-lead,
  #productLead,
  .story-card .story-desc,
  .story-card .story-close,
  #productDesc,
  #productClose{
    font-size:13.4px !important;
    line-height:1.62 !important;
    max-width:none !important;
    font-weight:560 !important;
  }

  .notes-grid{
    grid-template-columns:1fr !important;
    gap:13px !important;
    padding-top:16px !important;
    margin-top:18px !important;
  }

  .note-card{
    grid-template-columns:32px 1fr !important;
    gap:10px !important;
    align-items:start !important;
  }

  .note-icon{
    width:30px !important;
    height:30px !important;
    font-size:14px !important;
  }

  .note-card strong{
    font-size:10px !important;
    letter-spacing:.13em !important;
    margin-bottom:4px !important;
  }

  .note-card p{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

  /* The vertical title is decorative on desktop. On mobile it steals room, so hide it. */
  .aroma-title-rail{
    display:none !important;
  }

  /* Mobile order: sticky purchase bar at bottom for conversion */
  .order-panel{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:120 !important;
    max-width:none !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:24px !important;
    background:
      linear-gradient(135deg, rgba(20,17,20,.72), rgba(36,28,34,.58)),
      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 22px 58px rgba(0,0,0,.34) !important;
    backdrop-filter:blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
  }

  .order-label{
    font-size:10px !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
    padding:0 3px !important;
    color:rgba(255,255,255,.70) !important;
  }

  .order-actions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .order-channel{
    min-height:44px !important;
    border-radius:17px !important;
    padding:8px 9px !important;
    font-size:11.5px !important;
    gap:7px !important;
  }

  .order-icon-img{
    width:20px !important;
    height:20px !important;
  }

  .scent-canvas{
    opacity:.22 !important;
  }

  .three-layer{
    display:none !important;
  }
}

/* Very small phones */
@media (max-width:380px){
  .hero-copy h1{
    font-size:46px !important;
  }

  .scent-option{
    flex-basis:164px !important;
  }

  .product-card,
  .product-stage{
    min-height:748px !important;
  }

  .story-card{
    padding-top:104px !important;
  }
}


/* PATCH 43 - Mobile simplified layout
   User direction:
   - Mobile header: remove controls, focus on logo only.
   - Hero: cleaner, centered, smaller.
   - Mobile product card: simpler, no bottle overlap. Bottle and story should not collide.
   - Desktop remains unchanged.
*/

@media (max-width:720px){

  .page-shell{
    padding:
      max(14px, env(safe-area-inset-top))
      16px
      calc(118px + env(safe-area-inset-bottom))
      16px !important;
  }

  /* 1) Mobile header only shows logo. Hide motion/lang controls. */
  .site-header{
    position:relative !important;
    top:auto !important;
    z-index:80 !important;
    padding:8px 0 4px !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .site-header .top-nav,
  .top-nav{
    display:none !important;
  }

  .brand,
  .site-header .brand{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .brand img,
  .brand-logo,
  .site-header img{
    max-height:30px !important;
    width:auto !important;
  }

  /* 2) Hero mobile: centered, smaller, much more readable */
  .hero.hero-final,
  .hero{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    align-items:stretch !important;
    padding-top:2px !important;
  }

  .hero-copy{
    order:1 !important;
    text-align:center !important;
    width:100% !important;
  }

  .hero-copy h1{
    max-width:10.5ch !important;
    margin:18px auto 14px !important;
    font-size:clamp(42px, 11.8vw, 58px) !important;
    line-height:.94 !important;
    letter-spacing:-.052em !important;
    text-align:center !important;
  }

  .lead{
    margin:0 auto !important;
    max-width:31rem !important;
    padding:12px 14px !important;
    border-radius:18px !important;
    font-size:13.2px !important;
    line-height:1.52 !important;
    text-align:center !important;
  }

  .mood-row{
    justify-content:center !important;
    margin-top:11px !important;
    gap:7px !important;
    flex-wrap:wrap !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }

  .mood-row span{
    font-size:10px !important;
    padding:8px 10px !important;
  }

  .scent-picker{
    margin-top:20px !important;
    text-align:left !important;
  }

  .picker-head{
    align-items:flex-end !important;
    gap:12px !important;
    margin-bottom:10px !important;
  }

  .picker-head h2{
    font-size:17px !important;
  }

  .picker-head p{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .scent-grid{
    display:flex !important;
    overflow-x:auto !important;
    gap:10px !important;
    padding:2px 2px 10px !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }

  .scent-grid::-webkit-scrollbar{
    display:none;
  }

  .scent-option{
    flex:0 0 172px !important;
    min-height:68px !important;
    border-radius:17px !important;
    padding:13px 14px !important;
    scroll-snap-align:start !important;
  }

  /* 3) Mobile product card: no overlap. Normal vertical flow. */
  .product-card,
  .product-stage{
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    margin-top:8px !important;
    padding:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    contain:none !important;
  }

  .product-card .card-top{
    position:relative !important;
    z-index:4 !important;
    padding:18px 18px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .selected-meta-label,
  .selected-label.selected-meta-label{
    max-width:calc(100vw - 150px) !important;
    width:auto !important;
    min-width:0 !important;
    padding:10px 13px !important;
    border-radius:999px !important;
  }

  .selected-meta-label span,
  #selectedMeta{
    font-size:9px !important;
    letter-spacing:.09em !important;
    white-space:nowrap !important;
  }

  .card-top a{
    font-size:12px !important;
    white-space:nowrap !important;
    padding:6px 0 5px !important;
  }

  /* Bottle becomes a normal section, no absolute overlap */
  .product-visual{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px 12px 4px !important;
    display:grid !important;
    place-items:center !important;
    z-index:3 !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }

  .product-glow{
    position:absolute !important;
    width:min(72%, 300px) !important;
    aspect-ratio:1 !important;
    inset:auto !important;
    border-radius:50% !important;
    opacity:.42 !important;
    filter:blur(34px) !important;
    transform:none !important;
  }

  #bottleImage{
    position:relative !important;
    width:min(68%, 270px) !important;
    max-height:330px !important;
    object-fit:contain !important;
    z-index:6 !important;
    transform:none !important;
  }

  #bottleImage:hover,
  .product-visual:hover #bottleImage{
    transform:scale(1.025) !important;
  }

  /* Story card is now after bottle in document flow */
  .product-info.product-info-notes,
  .product-info{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    margin:8px 14px 14px !important;
    min-height:auto !important;
    padding:20px 18px !important;
    border-radius:24px !important;
    display:block !important;
    z-index:4 !important;
  }

  .story-card{
    padding-top:0 !important;
    display:block !important;
  }

  .story-card .story-stack{
    margin:0 !important;
    padding:0 !important;
  }

  .story-card .story-lead,
  #productLead,
  .story-card .story-desc,
  .story-card .story-close,
  #productDesc,
  #productClose{
    font-size:13.4px !important;
    line-height:1.63 !important;
    max-width:none !important;
    text-align:left !important;
    font-weight:560 !important;
  }

  .notes-grid{
    margin-top:18px !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .note-card{
    grid-template-columns:32px 1fr !important;
    gap:10px !important;
  }

  .note-icon{
    width:30px !important;
    height:30px !important;
    font-size:14px !important;
  }

  .note-card strong{
    font-size:10px !important;
    letter-spacing:.13em !important;
  }

  .note-card p{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

  /* Hide decorative desktop rail on mobile */
  .aroma-title-rail{
    display:none !important;
  }

  /* Sticky order bar remains, but compact */
  .order-panel{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:120 !important;
    max-width:none !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:24px !important;
  }

  .order-label{
    font-size:10px !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
    padding:0 3px !important;
  }

  .order-actions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .order-channel{
    min-height:42px !important;
    border-radius:17px !important;
    padding:8px 8px !important;
    font-size:11px !important;
    gap:6px !important;
  }

  .order-icon-img{
    width:19px !important;
    height:19px !important;
  }

  .three-layer{
    display:none !important;
  }

  .scent-canvas{
    opacity:.20 !important;
  }
}

@media (max-width:380px){
  .hero-copy h1{
    font-size:40px !important;
  }

  .product-card .card-top{
    padding:16px 15px 0 !important;
  }

  #bottleImage{
    width:min(72%, 245px) !important;
    max-height:300px !important;
  }

  .scent-option{
    flex-basis:162px !important;
  }
}


/* PATCH 44 - Mobile logo + notes polish
   Mobile only:
   1. Smaller centered Sapopoe logo.
   2. Notes are changed into compact separated cards so they feel aligned and easier to scan.
   Desktop remains unchanged.
*/

@media (max-width:720px){

  /* 1) Logo smaller and centered */
  .site-header{
    padding:6px 0 2px !important;
  }

  .brand,
  .site-header .brand{
    justify-content:center !important;
    align-items:center !important;
  }

  .brand img,
  .brand-logo,
  .site-header img{
    max-height:22px !important;
    width:auto !important;
    display:block !important;
    margin:0 auto !important;
  }

  /* 2) Notes become separated mobile cards */
  .notes-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:18px !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }

  .note-card{
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    gap:11px !important;
    align-items:start !important;
    padding:13px 14px !important;
    border-radius:18px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.072), rgba(255,255,255,.032)),
      radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  .note-icon{
    width:31px !important;
    height:31px !important;
    border-radius:999px !important;
    margin-top:1px !important;
  }

  .note-card strong{
    display:block !important;
    margin:0 0 5px !important;
    font-size:10.5px !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:rgba(255,255,255,.88) !important;
  }

  .note-card p{
    margin:0 !important;
    font-size:12.8px !important;
    line-height:1.48 !important;
    font-weight:520 !important;
    color:rgba(255,255,255,.72) !important;
  }

  /* Slightly tighten the product info so the notes card stack does not feel too long */
  .product-info.product-info-notes,
  .product-info{
    padding-bottom:18px !important;
  }
}

@media (max-width:380px){
  .brand img,
  .brand-logo,
  .site-header img{
    max-height:20px !important;
  }

  .note-card{
    padding:12px 13px !important;
  }
}


/* PATCH 45 - Mobile logo center fix
   Root cause:
   The header/logo element still inherits desktop flex width and alignment.
   Even though the img itself has margin auto, its parent does not truly occupy
   and center within the available mobile viewport.
   Fix:
   Mobile only, make header a true centered grid and center the logo wrapper.
*/

@media (max-width:720px){

  .site-header{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    align-items:center !important;
    width:100% !important;
    padding:8px 0 4px !important;
    margin:0 !important;
  }

  .site-header .brand,
  .brand{
    grid-column:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
  }

  .brand img,
  .brand-logo,
  .site-header img{
    display:block !important;
    max-height:22px !important;
    width:auto !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }

  /* Ensure hidden nav does not reserve space or affect center alignment */
  .site-header .top-nav,
  .top-nav{
    display:none !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }
}

@media (max-width:380px){
  .brand img,
  .brand-logo,
  .site-header img{
    max-height:20px !important;
  }
}