:root {
    --black:#050308;
    --black2:#0a0610;
    --purple:#7b2cff;
    --purple2:#a96cff;
    --purple3:#c18bff;
    --text:#fff;
    --muted:#aaa3b8;
    --line:rgba(255,255,255,.08);
    --glass:rgba(14,9,21,.72);
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth
}
body {
  background:var(--black);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  background:
   radial-gradient(circle at 15% 15%,rgba(123,44,255,.18),transparent 28%),
   radial-gradient(circle at 85% 35%,rgba(87,20,160,.15),transparent 30%),
   radial-gradient(circle at 50% 100%,rgba(123,44,255,.10),transparent 35%);
  pointer-events:none
}
a {
  text-decoration:none;
  color:inherit
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  border:0
}
img {
  max-width:100%;
  display:block
}
.container {
  width:min(1200px,92%);
  margin:auto
}
.navbar {
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,92%);
  height:72px;
  padding:8px 12px 8px 18px;
  border:1px solid var(--line);
  background:rgba(9,6,13,.76);
  backdrop-filter:blur(22px);
  border-radius:42px;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:Georgia,serif;
  font-size:33px;
  letter-spacing:5px;
  font-weight:700
}
.brand-logo {
  width:62px;
  height:62px;
  object-fit:contain;
  filter:none;
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(217,120,24,.28))
}
.nav-links {
  display:flex;
  gap:4px
}
.nav-links a,.nav-icon {
  padding:11px 16px;
  border-radius:28px;
  color:#c8c1d0;
  font-size:13px;
  transition:.35s
}
.nav-links a:hover,.nav-icon:hover {
  background:rgba(123,44,255,.15);
  color:#fff;
  transform:translateY(-2px)
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:6px
}
.nav-icon {
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:#fff
}
.cart-count {
  position:absolute;
  margin:-28px 0 0 25px;
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:20px;
  background:var(--purple);
  font-size:10px;
  display:grid;
  place-items:center
}
.hero {
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  padding:145px 0 80px;
  position:relative
}
.hero-copy {
  padding-left:4%
}
.eyebrow {
  display:inline-flex;
  padding:9px 16px;
  border-radius:30px;
  background:rgba(123,44,255,.09);
  border:1px solid rgba(169,108,255,.22);
  color:var(--purple3);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase
}
h1,h2,h3,.serif {
  font-family:Georgia,"Times New Roman",serif
}
h1 {
  font-size:clamp(64px,8vw,130px);
  font-weight:500;
  line-height:.82;
  letter-spacing:-5px;
  margin:28px 0
}
.gradient {
  background:linear-gradient(90deg,#fff,#b875ff,#fff);
  background-size:220%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient 6s linear infinite
}
@keyframes gradient {
  to {
    background-position:220%
  }
}
.hero p {
  max-width:590px;
  color:var(--muted);
  line-height:1.8
}
.actions {
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap
}
.btn {
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:0 23px;
  border-radius:18px;
  color:#fff;
  font-weight:600;
  transition:.4s
}
.btn:after {
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,.17);
  transform:translate(-50%,-50%);
  transition:.55s
}
.btn:hover:after {
  width:400px;
  height:400px
}
.btn>* {
  position:relative;
  z-index:2
}
.primary {
  background:linear-gradient(135deg,#9149ff,#5c1bc9);
  box-shadow:0 12px 35px rgba(123,44,255,.28)
}
.primary:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(123,44,255,.52)
}
.secondary {
  background:rgba(255,255,255,.04);
  border:1px solid var(--line)
}
.secondary:hover {
  transform:translateY(-4px);
  border-color:rgba(169,108,255,.4);
  background:rgba(123,44,255,.10)
}
.hero-art {
  min-height:650px;
  display:grid;
  place-items:center;
  position:relative
}
.orbit {
  position:absolute;
  width:500px;
  height:500px;
  border:1px solid rgba(169,108,255,.14);
  border-radius:50%;
  animation:spin 18s linear infinite
}
.orbit:before {
  content:"";
  position:absolute;
  top:5px;
  left:50%;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#b875ff;
  box-shadow:0 0 25px #b875ff
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.glow {
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(123,44,255,.4),transparent 66%);
  filter:blur(12px);
  animation:pulse 4s ease-in-out infinite
}
@keyframes pulse {
  50% {
    transform:scale(1.14);
    opacity:.72
  }
}
.bottle {
  position:relative;
  width:220px;
  height:360px;
  border-radius:38px 38px 55px 55px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(123,44,255,.18),rgba(0,0,0,.6));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 15px 0 30px rgba(255,255,255,.05),inset -20px 0 30px rgba(0,0,0,.45),0 45px 100px rgba(123,44,255,.38);
  animation:float 5s ease-in-out infinite
}
@keyframes float {
  50% {
    transform:translateY(-22px) rotate(2deg)
  }
}
.bottle:before {
  content:"";
  position:absolute;
  width:86px;
  height:55px;
  top:-50px;
  left:50%;
  transform:translateX(-50%);
  border-radius:12px 12px 5px 5px;
  background:linear-gradient(90deg,#111,#5d496b,#111)
}
.bottle:after {
  content:"";
  position:absolute;
  width:55px;
  height:14px;
  top:-63px;
  left:50%;
  transform:translateX(-50%);
  border-radius:10px;
  background:#0c0910
}
.label {
  position:absolute;
  inset:105px 24px 55px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(255,255,255,.04)
}
.label strong {
  font:44px Georgia,serif;
  letter-spacing:6px
}
.label small {
  display:block;
  margin-top:5px;
  color:#c18bff;
  letter-spacing:4px
}
.marquee {
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:22px 0;
  background:rgba(123,44,255,.025);
  white-space:nowrap
}
.track {
  display:block;
  width:100%;
  animation:marquee-one-line 24s linear infinite;
  will-change:transform
}
.track span {
  display:inline-block;
  margin:0;
  font:25px Georgia,serif;
  letter-spacing:5px;
  color:#D4AF37;
  white-space:nowrap
}
.track b {
  color:#a96cff
}
@keyframes marquee-one-line {
  0% {
    transform:translateX(100%)
  }
  100% {
    transform:translateX(-100%)
  }
}
.section {
  padding:130px 0
}
.section-head {
  max-width:760px;
  margin-bottom:55px
}
.tag {
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#a96cff;
  margin-bottom:15px
}
.section-head h2 {
  font-size:clamp(48px,6vw,82px);
  font-weight:500;
  line-height:.95
}
.section-head p {
  color:#918899;
  line-height:1.8;
  margin-top:20px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.card {
  padding:35px;
  min-height:260px;
  border-radius:32px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(123,44,255,.035));
  transition:.5s
}
.card:hover {
  transform:translateY(-10px);
  border-color:rgba(169,108,255,.3);
  box-shadow:0 25px 70px rgba(0,0,0,.3)
}
.icon {
  width:55px;
  height:55px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(123,44,255,.12);
  color:#b875ff;
  font-size:22px;
  margin-bottom:28px
}
.card h3 {
  font-size:30px;
  font-weight:500;
  margin-bottom:12px
}
.card p {
  color:#88808f;
  line-height:1.7;
  font-size:14px
}
.products {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.product {
  padding:16px;
  border-radius:32px;
  background:linear-gradient(145deg,#120b19,#08060b);
  border:1px solid var(--line);
  transition:.5s
}
.product:hover {
  transform:translateY(-10px);
  border-color:rgba(169,108,255,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.45)
}
.product-image {
  height:290px;
  border-radius:25px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,rgba(123,44,255,.24),transparent 65%);
  overflow:hidden
}
.mini-bottle {
  width:105px;
  height:175px;
  border-radius:24px 24px 30px 30px;
  background:linear-gradient(135deg,#2c2234,#7b2cff,#110a18);
  box-shadow:0 30px 60px rgba(123,44,255,.3);
  position:relative;
  transition:.5s
}
.mini-bottle:before {
  content:"";
  position:absolute;
  width:42px;
  height:32px;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  background:#17121d;
  border-radius:8px
}
.product:hover .mini-bottle {
  transform:translateY(-8px) rotate(4deg) scale(1.05)
}
.product-info {
  padding:18px 4px 5px
}
.product-info h3 {
  font-size:30px;
  font-weight:500
}
.product-info p {
  color:#817987;
  font-size:13px;
  margin:7px 0 15px
}
.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}
.price {
  font-weight:700
}
.product-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px
}
.small-btn {
  min-height:43px;
  border-radius:15px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:#fff;
  transition:.35s
}
.small-btn:hover {
  background:rgba(123,44,255,.15);
  border-color:rgba(169,108,255,.35);
  transform:translateY(-2px)
}
.buy {
  background:#7b2cff;
  border-color:#7b2cff
}
.buy:hover {
  background:#8e43ff
}
.cta {
  margin:10px 0 120px;
  padding:85px 25px;
  text-align:center;
  border-radius:42px;
  border:1px solid var(--line);
  background:radial-gradient(circle,rgba(123,44,255,.22),transparent 65%),#0b0710
}
.cta h2 {
  font-size:clamp(52px,7vw,90px);
  font-weight:500;
  line-height:.9;
  margin:15px 0 20px
}
.cta p {
  max-width:560px;
  margin:0 auto 28px;
  color:#908797;
  line-height:1.7
}
footer {
  border-top:1px solid var(--line);
  padding:55px 0 28px
}
.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:40px
}
.footer-brand {
  font:50px Georgia,serif;
  letter-spacing:6px
}
.footer-grid p {
  color:#776f7d;
  line-height:1.7;
  max-width:360px;
  margin-top:12px
}
.footer-links {
  display:flex;
  gap:55px
}
.footer-links h4 {
  font-size:11px;
  letter-spacing:3px;
  color:#b875ff;
  margin-bottom:18px
}
.footer-links a {
  display:block;
  color:#88808e;
  font-size:13px;
  margin:10px 0;
  transition:.3s
}
.footer-links a:hover {
  color:#fff;
  transform:translateX(4px)
}
.copyright {
  margin-top:45px;
  border-top:1px solid var(--line);
  padding-top:22px;
  color:#625b66;
  font-size:12px;
  display:flex;
  justify-content:space-between
}
.toast {
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:3000;
  max-width:340px;
  padding:15px 18px;
  border-radius:18px;
  background:#160c23;
  border:1px solid rgba(169,108,255,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transform:translateY(120px);
  opacity:0;
  transition:.4s
}
.toast.show {
  transform:translateY(0);
  opacity:1
}
.reveal {
  opacity:0;
  transform:translateY(45px);
  transition:1s
}
.reveal.visible {
  opacity:1;
  transform:none
}
@media(max-width:900px) {
  .nav-links {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:135px
  }
  .hero-copy {
    padding-left:0
  }
  .hero-art {
    min-height:550px
  }
  .cards,.products {
    grid-template-columns:1fr
  }
  .footer-grid {
    flex-direction:column
  }
  .footer-links {
    flex-wrap:wrap
  }
}
@media(max-width:600px) {
  .navbar {
    height:64px
  }
  .brand {
    font-size:23px
  }
  .brand-logo {
    width:46px;
    height:46px
  }
  .nav-icon {
    width:38px;
    height:38px
  }
  .nav-actions .nav-icon:nth-child(2) {
    display:none
  }
  .hero h1 {
    font-size:60px;
    letter-spacing:-3px
  }
  .hero-art {
    min-height:470px
  }
  .orbit {
    width:350px;
    height:350px
  }
  .bottle {
    transform:scale(.78)
  }
  .section {
    padding:95px 0
  }
  .product-actions {
    grid-template-columns:1fr
  }
  .copyright {
    flex-direction:column;
    gap:8px
  }
}
@media(max-width:760px) {
  #checkoutGrid {
    grid-template-columns:1fr!important
  }
}
/* =========================================================
   LEO RESPONSIVE SYSTEM
   Keeps the original black / purple / rounded luxury theme.
========================================================= */
/* Product photo support */
.product-image {
    position:relative;
    isolation:isolate;
    perspective:900px;
    transform-style:preserve-3d;
    will-change:transform;
}
.product-image img.product-photo {
    width:min(78%,250px);
    height:100%;
    object-fit:contain;
    object-position:center;
    border-radius:24px;
    filter:drop-shadow(0 28px 40px rgba(0,0,0,.45));
    transform:translate3d(0,0,25px) scale(1);
    transition:transform .18s ease-out, filter .35s ease;
    will-change:transform;
    user-select:none;
    -webkit-user-drag:none;
}
.product:hover .product-image img.product-photo {
    filter:drop-shadow(0 35px 55px rgba(123,44,255,.30));
}
.product-image .photo-shine {
    position:absolute;
    inset:-30%;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);
    transform:translateX(-80%) rotate(8deg);
    transition:transform .7s ease;
    z-index:3;
}
.product:hover .product-image .photo-shine {
    transform:translateX(80%) rotate(8deg);
}
/* Mouse-follow glow for cards */
.product,
.card {
    --mx:50%;
    --my:50%;
}
.product::after,
.card::after {
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    left:var(--mx);
    top:var(--my);
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(168,104,255,.15),transparent 68%);
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
    z-index:0;
}
.product:hover::after,
.card:hover::after {
  opacity:1
}
.product > *,
.card > * {
  position:relative;
  z-index:1
}
/* Large desktops */
@media (min-width:1400px) {
    .container {
    width:min(1320px,90%)
  }
    .navbar {
    width:min(1320px,90%)
  }
    .hero {
    min-height:900px
  }
    .hero-copy {
    padding-left:3%
  }
    .hero-art {
    min-height:720px
  }
}
/* Laptop / small desktop */
@media (min-width:901px) and (max-width:1199px) {
    .container {
    width:92%
  }
    .navbar {
    width:92%
  }
    .nav-links a {
    padding:10px 11px
  }
    .brand {
    font-size:25px
  }
    .hero {
    grid-template-columns:1fr .85fr;
    padding-top:135px
  }
    h1 {
    font-size:clamp(68px,8vw,100px)
  }
    .hero-art {
    min-height:560px
  }
    .orbit {
    width:430px;
    height:430px
  }
    .bottle {
    transform:scale(.88)
  }
    .cards,.products {
    gap:16px
  }
}
/* Tablet landscape / portrait */
@media (min-width:601px) and (max-width:900px) {
    .navbar {
    top:12px;
    width:94%;
    height:68px
  }
    .nav-links {
    display:none
  }
    .hero {
        grid-template-columns:1fr;
        padding:135px 0 55px;
        min-height:auto;
      
  }
    .hero-copy {
        padding-left:0;
        max-width:760px;
      
  }
    .hero-art {
        min-height:570px;
        margin-top:15px;
      
  }
    h1 {
    font-size:clamp(72px,11vw,105px)
  }
    .cards {
    grid-template-columns:repeat(2,1fr)
  }
    .cards .card:last-child {
    grid-column:1/-1
  }
    .products {
    grid-template-columns:repeat(2,1fr)
  }
    .section {
    padding:105px 0
  }
    .product-image {
    height:300px
  }
    .footer-grid {
    flex-direction:column
  }
}
/* Phones */
@media (max-width:600px) {
    html {
    font-size:15px
  }
    body {
    min-width:0
  }
    .container {
        width:90%;
        max-width:none;
      
  }
    .navbar {
        top:10px;
        width:94%;
        height:62px;
        padding:6px 8px 6px 12px;
        border-radius:34px;
      
  }
    .brand {
        font-size:21px;
        letter-spacing:3px;
        gap:7px;
      
  }
    .brand-logo {
        width:34px;
        height:34px;
      
  }
    .nav-actions {
    gap:4px
  }
    .nav-icon {
        width:38px;
        height:38px;
        border-radius:13px;
      
  }
    .hero {
        padding:120px 0 35px;
        display:block;
        min-height:auto;
      
  }
    .hero-copy {
    padding:0
  }
    .eyebrow {
        font-size:9px;
        letter-spacing:2.3px;
        padding:8px 12px;
      
  }
    h1 {
        font-size:clamp(52px,15vw,72px);
        line-height:.86;
        letter-spacing:-3px;
        margin:23px 0;
      
  }
    .hero p {
        font-size:14px;
        line-height:1.75;
      
  }
    .actions {
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
      
  }
    .btn {
        width:100%;
        min-height:50px;
        border-radius:17px;
      
  }
    .hero-art {
        min-height:440px;
        margin-top:10px;
      
  }
    .orbit {
        width:min(86vw,350px);
        height:min(86vw,350px);
      
  }
    .glow {
        width:min(80vw,340px);
        height:min(80vw,340px);
      
  }
    .bottle {
        width:190px;
        height:310px;
        transform:scale(.82);
      
  }
    .bottle:before {
    width:76px;
    height:48px;
    top:-44px
  }
    .bottle:after {
    top:-55px
  }
    .label {
    inset:90px 20px 48px
  }
    .label strong {
    font-size:38px
  }
    .marquee {
    padding:18px 0
  }
    .track span {
        margin:0 22px;
        font-size:19px;
        letter-spacing:3px;
      
  }
    .section {
    padding:82px 0
  }
    .section-head {
    margin-bottom:35px
  }
    .section-head h2 {
        font-size:clamp(45px,13vw,62px);
        line-height:.95;
      
  }
    .section-head p {
    font-size:14px
  }
    .cards,
    .products {
        grid-template-columns:1fr;
        gap:14px;
      
  }
    .card {
        min-height:0;
        padding:28px;
        border-radius:27px;
      
  }
    .product {
        padding:13px;
        border-radius:28px;
      
  }
    .product-image {
        height:275px;
        border-radius:22px;
      
  }
    .product-image img.product-photo {
        width:82%;
        max-height:255px;
      
  }
    .product-info h3 {
    font-size:28px
  }
    .product-actions {
        grid-template-columns:1fr 1fr;
      
  }
    .small-btn {
        min-height:45px;
        border-radius:14px;
      
  }
    .cta {
        width:90%;
        margin:0 auto 80px;
        padding:65px 22px;
        border-radius:30px;
      
  }
    .cta h2 {
        font-size:clamp(48px,13vw,64px);
      
  }
    .footer-grid {
        flex-direction:column;
      
  }
    .footer-links {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:28px;
      
  }
    .footer-brand {
    font-size:43px
  }
    .copyright {
        flex-direction:column;
        gap:8px;
        line-height:1.6;
      
  }
}
/* Very small phones */
@media (max-width:380px) {
    .navbar {
    width:95%
  }
    .brand {
    font-size:19px
  }
    .brand-logo {
    width:30px;
    height:30px
  }
    .nav-icon {
    width:35px;
    height:35px
  }
    h1 {
    font-size:51px
  }
    .hero-art {
    min-height:400px
  }
    .bottle {
    transform:scale(.72)
  }
    .product-actions {
    grid-template-columns:1fr
  }
}
/* Touch devices: no hover dependency, but preserve movement via tap-friendly sizing */
@media (hover:none) {
    .product:hover,
    .card:hover {
        transform:none;
      
  }
    .product::after,
    .card::after {
        display:none;
      
  }
}
/* Accessibility / reduced motion */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.001ms!important;
      
  }
}
/* =========================================================
   FINAL DEVICE-ADAPTIVE LAYOUT
========================================================= */
html,body {
  width:100%;
  max-width:100%;
  overflow-x:hidden
}
*,*::before,*::after {
  max-width:100%
}
.container {
  width:calc(100% - 48px);
  max-width:1200px;
  margin-inline:auto
}
.navbar {
  width:calc(100% - 48px);
  max-width:1200px
}
.hero,.section,.footer-grid,.hero-copy,.hero-art,.section-head,.card,.product,.product-info {
  min-width:0
}
.hero p,.section-head p,.card p,.product-info p {
  overflow-wrap:anywhere
}
.cards,.products {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))
}
.hero-art {
  min-height:clamp(430px,52vw,650px)
}
.orbit {
  width:clamp(300px,38vw,500px);
  height:clamp(300px,38vw,500px)
}
.glow {
  width:clamp(260px,32vw,420px);
  height:clamp(260px,32vw,420px)
}
.bottle {
  width:clamp(170px,18vw,220px);
  height:clamp(280px,30vw,360px)
}
.mobile-menu-btn {
  display:none
}
.mobile-menu {
  display:none
}
@media (max-width:1050px) {
   .nav-links {
    display:none
  }
  .mobile-menu-btn {
    display:grid
  }
   .hero {
    grid-template-columns:1fr;
    padding-top:135px
  }
  .hero-copy {
    max-width:800px
  }
  .hero-art {
    margin-top:5px
  }
}
@media (max-width:700px) {
   .container,.navbar {
    width:calc(100% - 28px)
  }
   .navbar {
    top:9px;
    height:62px;
    padding:6px 7px 6px 10px
  }
   .brand {
    font-size:clamp(18px,5.5vw,23px);
    letter-spacing:clamp(2px,1vw,3px)
  }
   .brand-logo {
    width:clamp(40px,10vw,48px);
    height:clamp(40px,10vw,48px)
  }
   .nav-actions {
    margin-left:auto
  }
  .nav-icon {
    width:39px;
    height:39px;
    border-radius:14px
  }
   .mobile-menu {
    position:fixed;
    top:79px;
    left:14px;
    right:14px;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:10px;
    border:1px solid var(--line);
    background:rgba(9,6,13,.94);
    backdrop-filter:blur(25px);
    border-radius:24px;
    opacity:0;
    transform:translateY(-12px) scale(.98);
    pointer-events:none;
    transition:.3s ease;
    box-shadow:0 25px 80px rgba(0,0,0,.5)
  }
   .mobile-menu.open {
    opacity:1;
    transform:none;
    pointer-events:auto
  }
   .mobile-menu a {
    padding:14px 17px;
    border-radius:17px;
    color:#c8c1d0;
    font-size:14px
  }
   .mobile-menu a:hover,.mobile-menu a:active {
    background:rgba(123,44,255,.13);
    color:#fff
  }
   .hero {
    padding-top:110px;
    padding-bottom:30px
  }
  .hero-art {
    min-height:clamp(360px,105vw,480px)
  }
   .orbit {
    width:min(82vw,350px);
    height:min(82vw,350px)
  }
  .glow {
    width:min(78vw,330px);
    height:min(78vw,330px)
  }
   .bottle {
    width:clamp(165px,48vw,195px);
    height:clamp(270px,76vw,315px)
  }
   .section {
    padding:78px 0
  }
  .cards,.products {
    grid-template-columns:1fr
  }
   .product-image {
    height:clamp(240px,70vw,300px)
  }
  .product-actions {
    grid-template-columns:1fr 1fr
  }
   .footer-links {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px
  }
}
@media (max-width:430px) {
   .container,.navbar {
    width:calc(100% - 20px)
  }
  .navbar {
    height:58px
  }
  .nav-icon {
    width:36px;
    height:36px
  }
   .hero {
    padding-top:102px
  }
  h1 {
    font-size:clamp(46px,15vw,61px);
    letter-spacing:-2.5px
  }
  .hero-art {
    min-height:370px
  }
   .orbit {
    width:78vw;
    height:78vw
  }
  .product-actions {
    grid-template-columns:1fr
  }
   .product-image img.product-photo {
    width:88%;
    max-height:90%
  }
}
@media (max-width:340px) {
  .nav-icon {
    width:34px;
    height:34px
  }
  .hero-art {
    min-height:340px
  }
  .bottle {
    transform:scale(.84)
  }
  .product-info h3 {
    font-size:25px
  }
}
#checkoutGrid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start
}
@media(max-width:800px) {
  #checkoutGrid {
    grid-template-columns:1fr!important
  }
}
@media(max-width:600px) {
   #checkoutGrid .card {
    padding:22px
  }
   #cartItems .card {
    flex-direction:column!important;
    align-items:flex-start!important
  }
   #cartItems .card>div:last-child {
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap
  }
}
/* =========================================================
   PRODUCT GRID: TWO PRODUCTS ON SMALL SCREENS
   Cards keep the same rounded shape; only their dimensions scale.
========================================================= */
.product-click {
  display:block;
  color:inherit;
  text-decoration:none
}
.ml-label {
  color:#a96cff;
  font-size:12px
}
.product {
  position:relative;
  overflow:hidden
}
.product-info {
  min-width:0
}
.product-info h3,.product-info p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.product-image {
  transition:transform .22s ease-out
}
/* Phones and narrow tablets: always two products per row. */
@media (max-width:700px) {
    .products {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
    .product {
    padding:9px;
    border-radius:22px
  }
    .product-image {
    height:clamp(150px,42vw,225px);
    border-radius:17px
  }
    .product-image img.product-photo {
    width:92%;
    max-height:94%
  }
    .product-info {
    padding:12px 3px 2px
  }
    .product-info h3 {
    font-size:clamp(18px,5.5vw,25px);
    line-height:1.05
  }
    .product-info p {
    font-size:10px;
    margin:5px 0 9px
  }
    .row {
    gap:4px
  }
    .price {
    font-size:clamp(12px,3.5vw,16px)
  }
    .ml-label {
    font-size:9px
  }
    .product-actions {
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:9px
  }
    .small-btn {
    min-height:37px;
    border-radius:11px;
    font-size:10px;
    padding:0 4px
  }
    .mini-bottle {
    transform:scale(.72)
  }
}
@media (max-width:380px) {
    .products {
    gap:7px
  }
    .product {
    padding:7px;
    border-radius:19px
  }
    .product-image {
    height:clamp(135px,41vw,175px);
    border-radius:15px
  }
    .product-info {
    padding-top:9px
  }
    .product-info h3 {
    font-size:17px
  }
    .product-info p {
    font-size:9px
  }
    .product-actions {
    gap:4px
  }
    .small-btn {
    font-size:9px;
    min-height:34px
  }
}
/* Product detail page */
.product-detail-section {
  padding-top:160px;
  padding-bottom:60px
}
.product-detail-shell {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(35px,7vw,100px);
  align-items:center;
  min-height:650px
}
.product-detail-media {
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
  border-radius:42px;
  border:1px solid var(--line);
  background:radial-gradient(circle at center,rgba(123,44,255,.18),transparent 62%),rgba(255,255,255,.025);
  overflow:hidden;
  perspective:1000px
}
.detail-glow {
  position:absolute;
  width:65%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(123,44,255,.30),transparent 65%);
  filter:blur(18px);
  animation:pulse 4s ease-in-out infinite
}
.product-detail-image {
  position:relative;
  width:70%;
  height:75%;
  display:grid;
  place-items:center;
  z-index:2;
  transform-style:preserve-3d;
  transition:transform .2s ease-out
}
.product-detail-image .product-photo {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 35px 55px rgba(0,0,0,.55));
  transform:translateZ(30px);
  transition:transform .2s ease-out
}
.product-slides {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y;
}
.product-slides .product-slide {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translateZ(30px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease;
}
.product-slides .product-slide.active {
  opacity:1;
  visibility:visible;
}
.product-slide-control {
  position:absolute;
  top:50%;
  z-index:4;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.78);
  color:#241a16;
  font-size:20px;
  transform:translateY(-50%);
  cursor:pointer;
  pointer-events:auto !important;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.product-slide-prev { left:18px; }
.product-slide-next { right:18px; }
@media (max-width:700px) {
  .product-slide-control {
    display:grid !important;
    width:40px;
    height:40px;
    z-index:6;
    background:rgba(255,255,255,.92);
    border-color:rgba(82,45,28,.22);
    box-shadow:0 8px 18px rgba(67,35,22,.18);
    touch-action:manipulation;
  }
  .product-slide-prev { left:10px; }
  .product-slide-next { right:10px; }
}
.product-detail-image .mini-bottle {
  width:180px;
  height:300px
}
.product-detail-copy {
  min-width:0
}
.product-detail-copy h1 {
  font-size:clamp(55px,7vw,100px);
  font-weight:500;
  line-height:.9;
  letter-spacing:-4px;
  margin:14px 0 18px
}
.detail-rating {
  color:#b875ff;
  letter-spacing:2px;
  font-size:13px;
  margin-bottom:24px
}
.detail-rating span {
  color:#817987;
  letter-spacing:0;
  margin-left:10px
}
.detail-price {
  font-size:28px;
  font-weight:700;
  margin-bottom:24px
}
.detail-price small {
  font-size:11px;
  color:#a96cff;
  margin-left:8px;
  letter-spacing:2px
}
.detail-description {
  color:#918899;
  line-height:1.9;
  max-width:620px;
  font-size:15px
}
.notes-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:30px 0
}
.notes-grid div {
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025)
}
.notes-grid span {
  display:block;
  color:#a96cff;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:8px
}
.notes-grid strong {
  font-size:12px;
  line-height:1.5;
  color:#ddd6e2;
  font-weight:500
}
.detail-actions {
  display:flex;
  gap:10px;
  max-width:500px
}
.detail-actions .btn {
  flex:1
}
.related-section {
  padding-top:70px
}
.related-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
@media(max-width:900px) {
   .product-detail-section {
    padding-top:125px
  }
   .product-detail-shell {
    grid-template-columns:1fr;
    gap:30px
  }
   .product-detail-media {
    min-height:min(72vw,520px);
    max-height:600px
  }
   .product-detail-copy h1 {
    font-size:clamp(52px,10vw,82px)
  }
   .related-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:700px) {
   .product-detail-section {
    padding-top:105px;
    padding-bottom:30px
  }
   .product-detail-media {
    min-height:clamp(330px,90vw,470px);
    border-radius:30px
  }
   .product-detail-image {
    width:78%;
    height:78%
  }
   .product-detail-image .mini-bottle {
    width:145px;
    height:245px
  }
   .product-detail-copy h1 {
    font-size:clamp(45px,13vw,65px);
    letter-spacing:-2px
  }
   .detail-description {
    font-size:13px;
    line-height:1.8
  }
   .notes-grid {
    grid-template-columns:1fr;
    gap:7px;
    margin:22px 0
  }
   .notes-grid div {
    padding:13px;
    border-radius:15px
  }
   .detail-actions {
    width:100%;
    flex-direction:column
  }
   .detail-actions .btn {
    width:100%
  }
   .related-section {
    padding-top:55px
  }
   .related-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:380px) {
   .product-detail-media {
    min-height:310px
  }
   .related-grid {
    gap:7px
  }
}
/* =========================================================
   LEO PREMIUM RESPONSIVE POLISH
   Responsive without sacrificing the original luxury feel.
========================================================= */
:root {
    --luxury-glass:rgba(15,10,22,.72);
    --luxury-border:rgba(255,255,255,.10);
    --luxury-purple:rgba(123,44,255,.28);
}
body {
    background:
      radial-gradient(circle at 50% -15%,rgba(123,44,255,.12),transparent 34%),
      #050308;
}
/* Keep the navigation elegant at every width */
.navbar {
    border-color:rgba(255,255,255,.10);
    box-shadow:0 18px 65px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
}
.brand-logo {
  filter:drop-shadow(0 0 12px rgba(217,120,24,.32));
}
/* Desktop luxury proportions */
.hero {
    min-height:clamp(720px,92vh,920px);
    padding-top:clamp(125px,10vw,155px);
}
.hero-copy {
  padding-left:clamp(0px,3vw,38px)
}
.hero-art {
  min-height:clamp(560px,48vw,690px)
}
.hero-art .bottle {
  filter:drop-shadow(0 25px 50px rgba(123,44,255,.15))
}
/* Cards have a softer luxury surface */
.card,.product {
    background:
      linear-gradient(145deg,rgba(255,255,255,.055),rgba(123,44,255,.025) 55%,rgba(0,0,0,.10)),
      rgba(8,5,12,.88);
    border-color:rgba(255,255,255,.085);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.card:hover,.product:hover {
    border-color:rgba(169,108,255,.34);
    box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 0 1px rgba(123,44,255,.035);
}
/* Product media is always visually substantial */
.product-image {
    position:relative;
    background:
      radial-gradient(circle at 50% 44%,rgba(157,91,255,.23),transparent 48%),
      radial-gradient(circle at 50% 100%,rgba(123,44,255,.10),transparent 55%),
      rgba(255,255,255,.018);
    border:1px solid rgba(255,255,255,.045);
}
.product-image:before {
    content:"";
    position:absolute;
    width:55%;
  height:55%;
    border-radius:50%;
    background:rgba(123,44,255,.13);
    filter:blur(35px);
    pointer-events:none;
}
.product-photo {
  position:relative;
  z-index:2
}
/* =========================================================
   TABLETS / SMALL LAPTOPS
========================================================= */
@media (min-width:701px) and (max-width:1100px) {
    .container,.navbar {
    width:calc(100% - 46px)
  }
    .hero {
    grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
    gap:15px
  }
    .hero h1 {
    font-size:clamp(66px,8.7vw,94px)
  }
    .hero-art {
    min-height:560px
  }
    .orbit {
    width:clamp(380px,42vw,480px);
    height:clamp(380px,42vw,480px)
  }
    .cards {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px
  }
    .products {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px
  }
    .product {
    padding:12px;
    border-radius:27px
  }
    .product-image {
    height:250px;
    border-radius:21px
  }
}
/* =========================================================
   PHONES — TWO PREMIUM PRODUCTS PER ROW
   The card scales in all dimensions rather than becoming narrow.
========================================================= */
@media (max-width:700px) {
    .container {
    width:calc(100% - 24px)
  }
    .hero {
        padding-top:105px;
        padding-bottom:24px;
        min-height:auto;
      
  }
    .hero-copy {
    text-align:left
  }
    .hero h1 {
        font-size:clamp(48px,14vw,65px);
        line-height:.86;
        margin:21px 0 18px;
      
  }
    .hero p {
    max-width:95%;
    font-size:13px;
    line-height:1.8
  }
    .hero .actions {
    display:flex;
    gap:8px
  }
    .hero .actions .btn {
    flex:1;
    min-width:0;
    padding:0 13px;
    font-size:12px
  }
    .hero-art {
        min-height:clamp(390px,108vw,500px);
        margin-top:0;
      
  }
    .hero-art .bottle {
    width:180px;
    height:295px
  }
    .orbit {
    width:min(82vw,360px);
    height:min(82vw,360px)
  }
    .glow {
    width:min(78vw,330px);
    height:min(78vw,330px)
  }
    .section {
    padding:78px 0
  }
    .section-head {
    margin-bottom:30px
  }
    .section-head h2 {
    font-size:clamp(42px,11.8vw,58px)
  }
    .cards {
    grid-template-columns:1fr;
    gap:12px
  }
    .card {
    padding:25px;
    border-radius:26px
  }
    /* The important two-column product rule */
    .products {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:11px;
        align-items:stretch;
      
  }
    .product {
        width:100%;
        min-width:0;
        padding:8px;
        border-radius:22px;
        display:flex;
        flex-direction:column;
        overflow:hidden;
      
  }
    .product-click {
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0
  }
    .product-image {
        width:100%;
        height:auto;
        aspect-ratio:.84 / 1;
        min-height:0;
        border-radius:17px;
        flex:none;
      
  }
    .product-image img.product-photo {
        width:90%;
        height:90%;
        max-height:none;
        object-fit:contain;
      
  }
    .mini-bottle {
    transform:scale(.70)
  }
    .product-info {
        padding:11px 3px 3px;
        min-height:76px;
      
  }
    .product-info h3 {
        font-size:clamp(17px,5.2vw,24px);
        line-height:1.05;
        letter-spacing:-.3px;
      
  }
    .product-info p {
        font-size:9.5px;
        line-height:1.3;
        margin:5px 0 8px;
      
  }
    .row {
    min-width:0
  }
    .price {
    font-size:12px
  }
    .ml-label {
    font-size:8px;
    letter-spacing:.7px
  }
    .product-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5px;
        margin-top:auto;
        padding-top:6px;
      
  }
    .small-btn {
        min-width:0;
        min-height:36px;
        padding:0 3px;
        border-radius:11px;
        font-size:9.5px;
        white-space:nowrap;
      
  }
    .cta {
        width:calc(100% - 24px);
        padding:58px 18px;
        border-radius:30px;
        margin-bottom:75px;
      
  }
    .cta h2 {
    font-size:clamp(45px,12vw,61px)
  }
    footer {
    padding-top:42px
  }
    .footer-brand {
    font-size:42px
  }
}
/* Larger phones: give the two product cards a little more breathing room */
@media (min-width:430px) and (max-width:700px) {
    .products {
    gap:13px
  }
    .product {
    padding:10px;
    border-radius:24px
  }
    .product-image {
    border-radius:19px
  }
    .product-info {
    padding-top:13px;
    min-height:86px
  }
    .product-info h3 {
    font-size:23px
  }
    .product-info p {
    font-size:10px
  }
    .price {
    font-size:13px
  }
    .small-btn {
    min-height:39px;
    font-size:10px
  }
}
/* Small phones: preserve two columns, but use clean proportions */
@media (max-width:390px) {
    .container {
    width:calc(100% - 18px)
  }
    .navbar {
    width:calc(100% - 18px)
  }
    .hero h1 {
    font-size:clamp(44px,14.5vw,56px)
  }
    .hero .actions .btn {
    font-size:10px;
    min-height:47px
  }
    .products {
    gap:8px
  }
    .product {
    padding:7px;
    border-radius:20px
  }
    .product-image {
    border-radius:15px
  }
    .product-info {
    padding:9px 2px 2px;
    min-height:71px
  }
    .product-info h3 {
    font-size:17px
  }
    .product-info p {
    font-size:8px;
    margin:4px 0 7px
  }
    .price {
    font-size:11px
  }
    .ml-label {
    font-size:7px
  }
    .product-actions {
    gap:4px
  }
    .small-btn {
    min-height:34px;
    border-radius:10px;
    font-size:8.5px
  }
}
/* Very small phones — still two columns, never collapse to one */
@media (max-width:340px) {
    .products {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px
  }
    .product {
    padding:6px;
    border-radius:18px
  }
    .product-image {
    border-radius:14px
  }
    .product-info h3 {
    font-size:16px
  }
    .product-info p {
    font-size:7.5px
  }
    .small-btn {
    font-size:8px;
    min-height:32px
  }
}
/* Touch screens: premium depth stays, but don't rely on hover */
@media (hover:none) {
    .product:active {
    transform:scale(.985)
  }
    .card:active {
    transform:scale(.995)
  }
}
/* Reduced motion remains respected */
@media (prefers-reduced-motion:reduce) {
    .orbit,.glow,.bottle,.track {
    animation:none!important
  }
}
/* =========================================================
   LEO SIGNATURE ATMOSPHERE — STARFALL + LUXURY CURSOR
========================================================= */
#leoRain {
    position:fixed;
  inset:0;
  pointer-events:none;
  z-index:8;
  overflow:hidden;
  opacity:.96;
}
.leo-star {
    position:absolute;
  top:-5vh;
  left:0;
  width:var(--size);
  height:var(--size);
    background:linear-gradient(135deg,#fff9d9 0%,#f8d77d 48%,#c98a2d 100%);
    clip-path:polygon(50% 0%,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0% 50%,39% 37%);
    filter:drop-shadow(0 0 3px rgba(255,232,166,.95));
    box-shadow:none;
    animation:leoStarFall var(--dur) linear var(--delay) infinite, leoStarTwinkle var(--twinkle) ease-in-out var(--delay) infinite;
    will-change:transform,opacity,filter;
}
@keyframes leoStarFall {
    0% {
    transform:translate3d(0,-8vh,0) rotate(0deg);
    opacity:0
  }
    8% {
    opacity:var(--op)
  }
    82% {
    opacity:var(--op)
  }
    100% {
    transform:translate3d(var(--drift),115vh,0) rotate(220deg);
    opacity:0
  }
}
/* Always-on golden starfall accents across the entire website. */
#leoRain .leo-star:nth-child(5n) {
    width:1.5px;
  height:20px;
    border-radius:999px;
    clip-path:none;
    background:linear-gradient(to bottom,rgba(255,248,210,0),rgba(246,202,105,.95),rgba(255,237,165,0));
    filter:drop-shadow(0 0 5px rgba(246,202,105,.9));
}
#leoRain .leo-star:nth-child(9n) {
    width:2px;
  height:2px;
    filter:drop-shadow(0 0 7px rgba(255,225,135,1)) drop-shadow(0 0 14px rgba(225,165,65,.55));
}
#leoRain .leo-star:nth-child(13n) {
  animation-duration:calc(var(--dur) * .62),var(--twinkle);
}
@keyframes leoStarTwinkle {
    0%,100% {
    filter:brightness(.72) drop-shadow(0 0 2px rgba(255,214,117,.75));
    transform:scale(.82)
  }
    50% {
    filter:brightness(1.9) drop-shadow(0 0 7px rgba(255,220,132,1));
    transform:scale(1.18)
  }
}
/* A soft comet-like cursor trail, not a ring/circle cursor. */
#leoCursorEffect {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99999;
  overflow:visible
}
.leo-cursor-core,.leo-cursor-trail {
    position:fixed;
  left:0;
  top:0;
  border-radius:50%;
  pointer-events:none;
    transform:translate3d(-200px,-200px,0);
    will-change:transform;
}
.leo-cursor-core {
    width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
    background:rgba(255,255,255,.98);
    box-shadow:0 0 7px #fff,0 0 20px rgba(255,255,255,.9),0 0 42px rgba(169,108,255,.7);
    filter:blur(.15px);
}
.leo-cursor-trail {
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:rgba(255,255,255,.8);
  box-shadow:0 0 12px rgba(255,255,255,.8),0 0 22px rgba(169,108,255,.55)
}
.trail-1 {
  width:9px;
  height:9px
}
.trail-2 {
  width:8px;
  height:8px
}
.trail-3 {
  width:7px;
  height:7px
}
.trail-4 {
  width:6px;
  height:6px
}
.trail-5 {
  width:5px;
  height:5px
}
.trail-6 {
  width:4px;
  height:4px
}
.trail-7 {
  width:3px;
  height:3px
}
.trail-8 {
  width:2px;
  height:2px
}
body.leo-pointer-down .leo-cursor-core {
  transform:scale(1.65)
}
body.leo-over-link .leo-cursor-core {
  box-shadow:0 0 8px #fff,0 0 28px #fff,0 0 55px rgba(169,108,255,.95)
}
body > *:not(#leoRain):not(#leoCursorEffect) {
  position:relative;
  z-index:1
}
/* Keep the hero bottle moving on every screen, including phones. */
.bottle {
  transform-style:preserve-3d;
  will-change:transform
}
@keyframes leoBottleFloatSpin {
    0%,100% {
    transform:translateY(0) rotateY(-12deg) rotateZ(0deg)
  }
    25% {
    transform:translateY(-12px) rotateY(70deg) rotateZ(1deg)
  }
    50% {
    transform:translateY(-24px) rotateY(180deg) rotateZ(0deg)
  }
    75% {
    transform:translateY(-12px) rotateY(290deg) rotateZ(-1deg)
  }
}
@media (max-width:900px) {
    /* Mobile uses the same bottle motion as desktop: gentle floating, no rotation. */
    .hero-art .bottle {
    animation:float 5s ease-in-out infinite!important
  }
    .hero-art .orbit {
    animation:spin 20s linear infinite!important
  }
    .hero-art .glow {
    animation:pulse 4s ease-in-out infinite!important
  }
}
@media (max-width:600px) {
  #leoRain {
    opacity:.52
  }
}
@media (hover:none) {
  #leoCursorEffect {
    display:none
  }
}
@media (prefers-reduced-motion:reduce) {
    .hero-art .bottle,.hero-art .orbit,.hero-art .glow {
    animation:none!important
  }
    #leoRain {
    display:none
  }
}
/* =========================================================
   LEO HERO BOTTLE BRANDING
========================================================= */
.bottle .label {
  padding:18px 12px;
}
.bottle-branding {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}
.bottle-logo {
  width:48px;
  height:48px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.96;
  margin-bottom:2px;
}
.bottle-branding strong {
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:.9;
  letter-spacing:6px;
  font-weight:600;
}
.bottle-branding small {
  display:block;
  color:#c18bff;
  font-size:8px;
  letter-spacing:2.2px;
  line-height:1.2;
  white-space:nowrap;
}
/* On phones: navbar -> bottle -> hero copy. The bottle remains prominent at the top. */
@media (max-width:600px) {
    .hero {
        display:flex;
        flex-direction:column;
        padding-top:76px;
        padding-bottom:30px;
      
  }
    .hero-art {
        order:-1;
        width:100%;
        min-height:clamp(305px,82vw,390px);
        margin:0 0 0;
      
  }
    .hero-copy {
    order:2;
    width:100%;
  }
    .hero-art .bottle {
        animation:float 5s ease-in-out infinite!important;
        transform-origin:center center;
      
  }
    .bottle-logo {
    width:44px;
    height:44px;
  }
    .bottle-branding strong {
    font-size:35px;
  }
    .bottle-branding small {
    font-size:7px;
    letter-spacing:1.8px;
  }
}
@media (max-width:380px) {
    .hero {
    padding-top:64px;
  }
    .hero-art {
    min-height:280px;
    margin-bottom:0;
  }
    .hero-art .bottle {
    width:165px;
    height:270px;
  }
    .bottle-logo {
    width:38px;
    height:38px;
  }
    .bottle-branding strong {
    font-size:30px;
    letter-spacing:4px;
  }
    .bottle-branding small {
    font-size:6.5px;
    letter-spacing:1.4px;
  }
}
/* Catalog/contact polish */
.product-brand {
  color:#a96cff;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:7px
}
.contact-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.contact-card {
  padding:28px;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(123,44,255,.035))
}
.contact-card .contact-icon {
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(123,44,255,.12);
  color:#c18bff;
  margin-bottom:18px
}
.contact-card h3 {
  font-size:26px;
  font-weight:500;
  margin-bottom:9px
}
.contact-card p,.contact-card a {
  color:#908797;
  font-size:13px;
  line-height:1.7
}
.contact-card a {
  display:block;
  margin-top:4px;
  transition:.3s
}
.contact-card a:hover {
  color:#fff;
  transform:translateX(3px)
}
.detail-contact {
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:#8f8796;
  font-size:12px
}
.detail-contact a {
  padding:8px 12px;
  border-radius:18px;
  background:rgba(123,44,255,.08);
  border:1px solid rgba(169,108,255,.16);
  color:#c18bff
}
@media(max-width:900px) {
  .contact-grid {
    grid-template-columns:1fr
  }
}
/* =========================================================
   LEO REFERENCE PALETTE — COLOR ONLY + REFERENCE BOTTLE
   Layout, interactions and existing animation timing are unchanged.
========================================================= */
:root {
    --black:#fff8f1;
    --black2:#f7ece2;
    --purple:#6b246d;
    --purple2:#9b4b20;
    --purple3:#c98235;
    --text:#2d1b16;
    --muted:#6f5b51;
    --line:rgba(82,45,28,.14);
    --glass:rgba(255,250,245,.84);
    --orange:#d97818;
    --gold:#e3a13b;
    --deep-purple:#4a194d;
    --cream:#fff8f1;
    --cream2:#f8eee6;
    --brown:#351d17;
}
body {
    background:
      radial-gradient(circle at 15% 15%,rgba(107,36,109,.10),transparent 28%),
      radial-gradient(circle at 85% 35%,rgba(217,120,24,.13),transparent 30%),
      radial-gradient(circle at 50% 100%,rgba(227,161,59,.10),transparent 35%),
      var(--cream);
    color:var(--text);
}
body:before {
    background:
      radial-gradient(circle at 15% 15%,rgba(107,36,109,.09),transparent 28%),
      radial-gradient(circle at 85% 35%,rgba(217,120,24,.10),transparent 30%),
      radial-gradient(circle at 50% 100%,rgba(227,161,59,.08),transparent 35%);
}
.navbar {
    background:rgba(255,250,246,.90);
    border-color:rgba(217,120,24,.24);
    box-shadow:0 18px 55px rgba(72,36,22,.18),0 0 0 1px rgba(227,161,59,.12);
}
.brand {
  color:#3b2118
}
.brand-logo {
    filter:none!important;
    opacity:1;
}
.nav-links a,.nav-icon {
  color:#3b2922
}
.nav-links a:hover,.nav-icon:hover {
    background:rgba(217,120,24,.10);
    color:#5b194f;
}
.nav-icon {
    background:rgba(255,255,255,.52);
    border-color:rgba(82,45,28,.13);
}
.cart-count {
    background:var(--orange);
    color:#fff;
}
.hero {
  color:var(--text)
}
.eyebrow {
    background:rgba(217,120,24,.08);
    border-color:rgba(217,120,24,.28);
    color:#9a571f;
}
.gradient {
    background:linear-gradient(90deg,#6b246d,#d97818,#e6a13b,#6b246d);
    background-size:220%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero p {
  color:#6d5a50
}
.primary {
    background:linear-gradient(135deg,#d97818,#a84d1b);
    box-shadow:0 12px 35px rgba(217,120,24,.24);
    color:#fff!important;
}
.primary:hover {
  box-shadow:0 18px 45px rgba(217,120,24,.34)
}
.secondary {
    background:rgba(255,255,255,.62);
    border-color:rgba(82,45,28,.15);
    color:#3b2118;
}
.secondary:hover {
    border-color:rgba(217,120,24,.35);
    background:rgba(217,120,24,.08);
}
.orbit {
    border-color:rgba(107,36,109,.20);
}
.orbit:before {
    background:#d97818;
    box-shadow:0 0 25px #d97818;
}
.glow {
    background:radial-gradient(circle,rgba(217,120,24,.24),rgba(107,36,109,.10),transparent 66%);
}
.hero-art .bottle {
    filter:drop-shadow(0 25px 50px rgba(217,120,24,.18));
}
.reference-bottle {
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    width:300px;
    height:595px;
    border-radius:0;
    overflow:visible;
}
.hero-reference-bottle {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    filter:drop-shadow(0 35px 45px rgba(52,23,18,.32));
    transform:translateZ(20px);
}
.marquee {
    border-color:rgba(82,45,28,.13);
    background:rgba(107,36,109,.025);
}
.track span {
  color:#7c675c
}
.track b {
  color:#d97818
}
.section-head h2 {
  color:#342019
}
.section-head p {
  color:#79665b
}
.tag {
  color:#b65f20
}
.card {
    background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,238,230,.72));
    border-color:rgba(82,45,28,.12);
    box-shadow:0 18px 55px rgba(67,35,22,.07);
}
.card:hover {
    border-color:rgba(217,120,24,.32);
    box-shadow:0 25px 70px rgba(67,35,22,.12);
}
.icon {
    background:rgba(217,120,24,.10);
    color:#b55b18;
}
.card h3 {
  color:#3b241b
}
.card p {
  color:#78655b
}
.product {
    background:linear-gradient(145deg,#fffaf6,#f5e9df);
    border-color:rgba(82,45,28,.12);
    box-shadow:0 16px 50px rgba(67,35,22,.07);
}
.product:hover {
    border-color:rgba(217,120,24,.35);
    box-shadow:0 30px 80px rgba(67,35,22,.13);
}
.product-image {
    background:
      radial-gradient(circle at 50% 44%,rgba(217,120,24,.16),transparent 48%),
      radial-gradient(circle at 50% 100%,rgba(107,36,109,.11),transparent 55%),
      #fff8f1;
    border-color:rgba(82,45,28,.08);
}
.product-image:before {
  background:rgba(217,120,24,.09)
}
.product-info h3 {
  color:#3a231a
}
.product-info p,.product-brand {
  color:#856e62
}
.ml-label {
  color:#9b4b20
}
.price {
  color:#3b2118
}
.small-btn {
    background:rgba(255,255,255,.70);
    border-color:rgba(82,45,28,.13);
    color:#3b2118;
}
.small-btn:hover {
    background:rgba(217,120,24,.09);
    border-color:rgba(217,120,24,.30);
}
.buy {
    background:#6b246d;
    border-color:#6b246d;
    color:#fff;
}
.buy:hover {
  background:#7b2e7c
}
.cta {
    background:radial-gradient(circle,rgba(217,120,24,.15),rgba(107,36,109,.08) 45%,transparent 68%),#fff7ef;
    border-color:rgba(82,45,28,.13);
}
.cta h2 {
  color:#3a2119
}
.cta p {
  color:#7b685e
}
footer {
    background:#321b22;
    border-top-color:rgba(227,161,59,.18);
}
.footer-brand {
  color:#f6dfbf
}
.footer-grid p,.footer-links a {
  color:#cbb5a7
}
.footer-links h4 {
  color:#e0a14b
}
.footer-links a:hover {
  color:#fff5e8
}
.copyright {
  border-top-color:rgba(255,255,255,.12);
  color:#bca79b
}
.overlay {
    background:rgba(49,23,31,.88);
}
.search-box input {
    background:rgba(255,250,245,.96);
    border-color:rgba(227,161,59,.35);
    color:#321b18;
}
.search-close {
    background:#d97818;
    color:#fff;
}
.toast {
    background:#fff8f1;
    border-color:rgba(217,120,24,.30);
    color:#3a2119;
    box-shadow:0 20px 60px rgba(67,35,22,.18);
}
/* Product detail / supporting pages use the same reference palette. */
.product-detail-media {
    background:radial-gradient(circle at center,rgba(217,120,24,.15),transparent 62%),#fff8f1;
    border-color:rgba(82,45,28,.12);
}
.detail-glow {
  background:radial-gradient(circle,rgba(217,120,24,.25),rgba(107,36,109,.08),transparent 65%)
}
.detail-rating {
  color:#b55b18
}
.detail-rating span {
  color:#817066
}
.detail-price {
  color:#3a2119
}
.detail-price small {
  color:#b65f20
}
.detail-description {
  color:#78645a
}
.notes-grid div {
  background:rgba(255,255,255,.62);
  border-color:rgba(82,45,28,.11)
}
.notes-grid span {
  color:#b65f20
}
.notes-grid strong {
  color:#4b3027
}
.detail-contact {
  color:#806c61
}
.detail-contact a {
  background:rgba(217,120,24,.08);
  border-color:rgba(217,120,24,.18);
  color:#9b4b20
}
.contact-card {
    background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,238,230,.72));
    border-color:rgba(82,45,28,.12);
}
.contact-card .contact-icon {
  background:rgba(217,120,24,.10);
  color:#b55b18
}
.contact-card h3 {
  color:#3b241b
}
.contact-card p,.contact-card a {
  color:#78645a
}
.contact-card a:hover {
  color:#5b194f
}
/* Preserve the existing animation system; starfall is now warm light-gold. */
.leo-cursor-core {
    background:rgba(255,250,242,.98);
    box-shadow:0 0 7px #fff,0 0 20px rgba(217,120,24,.75),0 0 42px rgba(107,36,109,.45);
}
.leo-cursor-trail {
    background:rgba(255,248,238,.80);
    box-shadow:0 0 12px rgba(255,255,255,.8),0 0 22px rgba(217,120,24,.45);
}
body.leo-over-link .leo-cursor-core {
    box-shadow:0 0 8px #fff,0 0 28px #fff,0 0 55px rgba(217,120,24,.75);
}
/* Reference bottle keeps the original floating animation; only the visual source changed. */
.reference-bottle {
    animation:float 5s ease-in-out infinite;
}
@media(max-width:900px) {
    .hero-art .reference-bottle {
        animation:float 5s ease-in-out infinite!important;
      
  }
}
@media(max-width:600px) {
    .hero-art .reference-bottle {
        width:230px;
        height:425px;
      
  }
}
@media(max-width:380px) {
    .hero-art .reference-bottle {
        width:205px;
        height:380px;
      
  }
}
/* Reference-bottle cleanup: the source image already contains the lion stopper, so
   the generic CSS bottle cap must not render on top of it. */
.reference-bottle:before,
.reference-bottle:after {
    display:none!important;
}
/* Keep the enlarged LEO mark readable on smaller screens. */
@media(max-width:900px) {
    .brand-logo {
    width:48px;
    height:48px
  }
}
@media(max-width:600px) {
    .brand-logo {
    width:44px;
    height:44px
  }
}
@media(max-width:380px) {
    .brand-logo {
    width:40px;
    height:40px
  }
}
/* User-supplied bottle + clearer original LEO gold/orange branding */
.brand {
  gap:10px;
  font-size:40px;
  letter-spacing:6px;
  color:#c96f12;
  text-shadow:0 2px 12px rgba(201,111,18,.18)
}
.brand-logo {
  width:74px;
  height:74px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(201,111,18,.42));
  opacity:1
}
.brand-wordmark {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  color:#c96f12;
  line-height:1
}
.reference-bottle {
  width:clamp(255px,27vw,340px);
  height:auto;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:0 35px 90px rgba(123,44,255,.28);
  overflow:visible;
  display:grid;
  place-items:center;
  animation:float 5s ease-in-out infinite;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.35)) drop-shadow(0 0 24px rgba(123,44,255,.16))
}
.reference-bottle:before,.reference-bottle:after {
  display:none;
  content:none
}
.hero-reference-bottle {
  width:100%;
  height:auto;
  max-height:clamp(480px,60vh,680px);
  object-fit:contain;
  object-position:center;
  display:block;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.25)) drop-shadow(0 0 16px rgba(217,120,24,.10));
  animation:bottleShine 4.5s ease-in-out infinite;
  transform-origin:center bottom
}
@keyframes bottleShine {
  0%,100% {
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.25)) drop-shadow(0 0 16px rgba(217,120,24,.10))
  }
  50% {
    filter:drop-shadow(0 22px 28px rgba(0,0,0,.28)) drop-shadow(0 0 28px rgba(123,44,255,.24))
  }
}
@media(max-width:600px) {
  .brand {
    font-size:25px;
    letter-spacing:4px
  }
  .brand-logo {
    width:52px;
    height:52px
  }
  .reference-bottle {
    width:min(78vw,270px)
  }
}
/* Tighten the space between the fixed navbar and the homepage hero */
.navbar {
  top:10px
}
.hero {
  padding-top:92px
}
@media (max-width:900px) {
    .hero {
    padding-top:88px
  }
}
@media (max-width:600px) {
    .navbar {
    top:7px
  }
    .hero {
    padding-top:82px
  }
}
.nav-search {
  position:absolute;
  top:50%;
  right:72px;
  transform:translateY(-50%) scaleX(.96);
  transform-origin:right center;
  width:min(420px,42vw);
  display:none;
  z-index:1200
}
.nav-search.show {
  display:block
}
.nav-search input {
  width:100%;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(198,145,60,.55);
  outline:none;
  background:rgba(27,9,40,.96);
  color:#fff;
  padding:0 52px 0 18px;
  font-size:15px;
  box-shadow:0 8px 24px rgba(0,0,0,.2)
}
.nav-search input::placeholder {
  color:rgba(255,255,255,.62)
}
.nav-search .search-close {
  position:absolute;
  right:5px;
  top:5px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#c99a3b;
  color:#24102f;
  cursor:pointer;
  font-size:18px
}
.navbar {
  position:relative
}
@media(max-width:900px) {
  .nav-search {
    left:12px;
    right:58px;
    width:auto;
    transform:translateY(-50%);
  }
  .nav-actions {
    position:relative;
    z-index:1201
  }
  .nav-search input {
    height:40px;
    font-size:14px
  }
}
/* =========================================================
   LEO AURELIA — PREMIUM UI/UX POLISH
========================================================= */
:root {
  --gold:#e4ad57;
  --gold2:#f4d28b;
  --plum:#5b194f;
  --ink:#2d1816;
  --cream:#fffaf5
}
body {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
body:after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.05) 46%,transparent 54%);
  transform:translateX(-120%);
  animation:ambientSweep 13s ease-in-out infinite
}
@keyframes ambientSweep {
  0%,62% {
    transform:translateX(-120%)
  }
  78%,100% {
    transform:translateX(120%)
  }
}
.navbar {
  height:76px;
  border-color:rgba(217,120,24,.18);
  box-shadow:0 14px 50px rgba(54,27,20,.16),inset 0 1px rgba(255,255,255,.75);
  transition:transform .35s,box-shadow .35s,background .35s
}
.navbar.scrolled {
  box-shadow:0 18px 65px rgba(54,27,20,.22),inset 0 1px rgba(255,255,255,.9);
  background:rgba(255,250,246,.97)
}
.brand {
  position:relative;
  gap:9px
}
.brand:after {
  content:"";
  position:absolute;
  left:4px;
  right:2px;
  bottom:-2px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.7
}
.brand-logo {
  transition:transform .5s filter .5s
}
.brand:hover .brand-logo {
  transform:scale(1.07) rotate(-2deg);
  filter:drop-shadow(0 0 18px rgba(201,111,18,.58))
}
.nav-links a {
  position:relative
}
.nav-links a:after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:7px;
  height:2px;
  border-radius:9px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);
  transform-origin:center;
  transition:.35s
}
.nav-links a:hover:after {
  transform:scaleX(1)
}
.nav-icon {
  transition:transform .3s,background .3s,box-shadow .3s
}
.nav-icon:hover {
  box-shadow:0 8px 25px rgba(107,36,109,.12)
}
.hero {
  min-height:calc(100vh - 10px);
  padding-top:92px;
  overflow:visible
}
.hero:before {
  content:"";
  position:absolute;
  width:52vw;
  height:52vw;
  max-width:760px;
  max-height:760px;
  right:-12%;
  top:9%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,36,109,.10),transparent 66%);
  filter:blur(10px);
  pointer-events:none
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero-copy>* {
  animation:heroEnter .9s cubic-bezier(.2,.75,.2,1) both
}
.hero-copy .eyebrow {
  animation-delay:.05s
}
.hero-copy h1 {
  animation-delay:.13s
}
.hero-copy p {
  animation-delay:.22s
}
.hero-copy .actions {
  animation-delay:.32s
}
@keyframes heroEnter {
  from {
    opacity:0;
    transform:translateY(24px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.eyebrow {
  box-shadow:0 8px 25px rgba(217,120,24,.08)
}
h1 {
  font-weight:600;
  text-wrap:balance;
  text-shadow:0 10px 45px rgba(75,27,25,.08)
}
.hero p {
  font-size:15px
}
.actions .btn {
  box-shadow:0 10px 30px rgba(67,35,22,.10)
}
.primary {
  background:linear-gradient(135deg,#e08a2c,#a84d1b 72%,#6b246d);
  background-size:180%;
  animation:buttonGlow 5s ease-in-out infinite
}
.primary:hover {
  background-position:100% 0
}
@keyframes buttonGlow {
  50% {
    background-position:100% 0;
    box-shadow:0 18px 50px rgba(217,120,24,.30)
  }
}
.hero-art {
  isolation:isolate
}
.hero-art:before,.hero-art:after {
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none
}
.hero-art:before {
  width:360px;
  height:360px;
  border:1px solid rgba(228,173,87,.22);
  box-shadow:0 0 0 24px rgba(228,173,87,.025),0 0 0 48px rgba(107,36,109,.025);
  animation:haloBreath 6s ease-in-out infinite
}
.hero-art:after {
  width:7px;
  height:7px;
  background:var(--gold2);
  box-shadow:0 0 18px var(--gold2);
  top:18%;
  right:20%;
  animation:orbDrift 7s ease-in-out infinite
}
@keyframes haloBreath {
  50% {
    transform:scale(1.08);
    opacity:.7
  }
}
@keyframes orbDrift {
  50% {
    transform:translate(-38px,42px) scale(1.7)
  }
}
.reference-bottle {
  z-index:4;
  filter:drop-shadow(0 30px 48px rgba(50,23,18,.28)) drop-shadow(0 0 30px rgba(217,120,24,.14));
  transition:filter .4s
}
.reference-bottle:hover {
  filter:drop-shadow(0 38px 60px rgba(50,23,18,.34)) drop-shadow(0 0 42px rgba(217,120,24,.24))
}
.hero-reference-bottle {
  animation:bottleShine 4.5s ease-in-out infinite, bottleMicro 6s ease-in-out infinite;
  will-change:transform,filter
}
@keyframes bottleMicro {
  0%,100% {
    transform:translateY(0) rotate(-.4deg)
  }
  50% {
    transform:translateY(-7px) rotate(.4deg)
  }
}
.orbit {
  border-color:rgba(107,36,109,.12);
  box-shadow:inset 0 0 60px rgba(228,173,87,.03)
}
.marquee {
  position:relative;
  background:linear-gradient(90deg,rgba(107,36,109,.035),rgba(217,120,24,.055),rgba(107,36,109,.035));
  backdrop-filter:blur(8px)
}
.track span {
  transition:color .3s
}
.marquee:hover .track {
  animation-play-state:paused
}
.section {
  position:relative
}
.section:before {
  content:"";
  position:absolute;
  left:0;
  top:50px;
  width:90px;
  height:1px;
  background:linear-gradient(90deg,var(--orange),transparent);
  opacity:.65
}
.section-head {
  position:relative
}
.section-head h2 {
  letter-spacing:-1.5px;
  text-wrap:balance
}
.section-head h2:after {
  content:"";
  display:block;
  width:64px;
  height:3px;
  border-radius:9px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  margin-top:22px;
  opacity:.75
}
.cards {
  perspective:1200px
}
.card {
  position:relative;
  overflow:hidden
}
.card:before {
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.35) 48%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s
}
.card:hover:before {
  transform:translateX(120%)
}
.card:hover {
  transform:translateY(-10px) rotateX(1deg)
}
.product {
  position:relative;
  overflow:hidden
}
.product:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.30),transparent 20%);
  opacity:0;
  transition:.35s;
  pointer-events:none;
  z-index:3
}
.product:hover:before {
  opacity:1
}
.product-image {
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
.product-image:after {
  content:"";
  position:absolute;
  inset:-20%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 48%,transparent 58%);
  transform:translateX(-120%) rotate(8deg);
  transition:transform .8s;
  pointer-events:none
}
.product:hover .product-image:after {
  transform:translateX(120%) rotate(8deg)
}
.product-info h3 {
  transition:color .3s,transform .3s
}
.product:hover .product-info h3 {
  color:#6b246d;
  transform:translateX(2px)
}
.price {
  font-size:17px
}
.small-btn {
  font-weight:650
}
.buy {
  box-shadow:0 10px 25px rgba(107,36,109,.18)
}
.cta {
  position:relative;
  overflow:hidden
}
.cta:before {
  content:"LEO";
  position:absolute;
  right:-20px;
  bottom:-70px;
  font:180px Georgia,serif;
  letter-spacing:15px;
  color:rgba(107,36,109,.045);
  pointer-events:none
}
.cta>* {
  position:relative;
  z-index:1
}
footer {
  position:relative;
  overflow:hidden
}
.footer-brand {
  transition:letter-spacing .5s
}
.footer-brand:hover {
  letter-spacing:10px
}
#leoRain {
  opacity:.92
}
.leo-star {
  background:linear-gradient(135deg,#fff8dd,#e4ad57 55%,#c87b18);
  width:calc(var(--size) * 1.25);
  height:calc(var(--size) * 1.25);
  filter:drop-shadow(0 0 4px rgba(255,222,145,.95)) drop-shadow(0 0 10px rgba(228,173,87,.35))
}
.leo-star:nth-child(4n) {
  animation-duration:calc(var(--dur) * .78),var(--twinkle);
}
.leo-star:nth-child(7n) {
  opacity:.55
}
.leo-star:nth-child(9n) {
  transform:scale(1.35)
}
#leoRain:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(255,221,143,.08),transparent 20%),radial-gradient(circle at 80% 20%,rgba(255,221,143,.06),transparent 18%);
}
.nav-search {
  backdrop-filter:blur(16px)
}
.nav-search input {
  box-shadow:0 15px 45px rgba(57,24,20,.16),inset 0 1px rgba(255,255,255,.8)
}
.reveal {
  transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1)
}
@media(max-width:900px) {
  .hero {
    min-height:auto;
    padding-top:84px;
    padding-bottom:55px
  }
  .hero-art {
    min-height:500px
  }
  .hero-art:before {
    width:280px;
    height:280px
  }
  .section {
    padding:100px 0
  }
  .navbar {
    height:68px
  }
  .brand-logo {
    width:58px;
    height:58px
  }
}
@media(max-width:600px) {
  .hero {
    padding-top:74px
  }
  .hero-copy {
    padding-left:0
  }
  .hero-art {
    min-height:430px;
    margin-top:-12px
  }
  .hero-art:before {
    width:230px;
    height:230px
  }
  .section {
    padding:80px 0
  }
  .section:before {
    top:30px
  }
  .section-head {
    margin-bottom:38px
  }
  .section-head h2 {
    font-size:clamp(42px,12vw,62px)
  }
  .cards,.products {
    gap:14px
  }
  .card,.product {
    border-radius:24px
  }
  .navbar {
    top:5px
  }
  .nav-search {
    top:50%;
  }
}
@media(prefers-reduced-motion:reduce) {
  body:after,.hero-copy>*,.hero-art:before,.hero-art:after,.hero-reference-bottle,.primary {
    animation:none!important
  }
  .card:before,.product-image:after {
    display:none
  }
  .leo-star {
    animation:none!important
  }
}
.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#6b246d,#d97818,#f4d28b);
  transform:scaleX(0);
  transform-origin:left center;
  z-index:2000;
  box-shadow:0 0 14px rgba(217,120,24,.45)
}
.hero-art {
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform .15s ease-out
}
.section-flash {
  animation:sectionFlash .9s ease-out
}
@keyframes sectionFlash {
  0% {
    filter:brightness(1)
  }
  45% {
    filter:brightness(1.08)
  }
  100% {
    filter:brightness(1)
  }
}
/* Mobile product/cart/checkout navigation: keep the top bar clean. */
@media (max-width: 900px) {
    .mobile-menu {
    display:none !important;
  }
}
/* FINAL INLINE NAV SEARCH: opens in-place, never scrolls the page */
.navbar {
  position:relative!important;
  overflow:visible!important;
}
.nav-search {
  position:absolute!important;
  top:50%!important;
  right:72px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  width:min(420px,42vw)!important;
  display:none!important;
  z-index:5000!important;
}
.nav-search.show {
  display:block!important;
}
.nav-search input {
  width:100%!important;
  box-sizing:border-box!important;
}
.nav-search .search-results,.search-results {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:45vh;
  overflow:auto;
  border-radius:16px;
  background:#100a17;
  border:1px solid rgba(201,154,59,.35);
  padding:8px;
  z-index:5001;
}
.search-results:empty {
  display:none;
}
.search-results a {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 14px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
}
.search-results a:hover {
  background:rgba(201,154,59,.12);
}
.search-results small {
  display:block;
  color:#9b8ea6;
  margin-top:3px;
}
.search-results b {
  color:#d8b45a;
  white-space:nowrap;
}
.no-results {
  padding:14px;
  color:#9b8ea6;
}
@media(max-width:900px) {
  .nav-search {
    left:10px!important;
    right:58px!important;
    width:auto!important;
  }
  .nav-search input {
    height:40px!important;
    font-size:14px!important;
  }
}
/* LEO product size selector + search polish */
.product-meta-row {
  align-items:center;
  margin-top:12px
}
.size-picker {
  display:flex;
  align-items:center;
  gap:8px;
  color:#8d7d72;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase
}
.size-select {
  appearance:none;
  -webkit-appearance:none;
  min-width:82px;
  height:34px;
  padding:0 28px 0 11px;
  border-radius:11px;
  border:1px solid rgba(198,145,60,.35);
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(198,145,60,.08));
  color:#3b2d27;
  font:600 12px inherit;
  outline:none;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c99a3b 50%),linear-gradient(135deg,#c99a3b 50%,transparent 50%);
  background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat
}
.size-select:hover,.size-select:focus {
  border-color:rgba(201,154,59,.75);
  box-shadow:0 0 0 3px rgba(201,154,59,.08)
}
.size-select option {
  background:#f6eee7;
  color:#3b2d27
}
.search-empty {
  grid-column:1/-1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg,#120b19,#08060b);
  color:#fff;
  text-align:center
}
.search-empty span {
  color:#8e8495;
  font-size:13px
}
@media(max-width:600px) {
  .size-picker {
    gap:5px;
    font-size:8px
  }
  .size-select {
    min-width:72px;
    height:30px;
    font-size:10px
  }
  .product-meta-row {
    margin-top:8px
  }
  .price {
    font-size:15px
  }
}
.detail-size-select {
  margin-top:8px;
  background:rgba(255,255,255,.04);
  color:#2f2a26;
  border:1px solid rgba(255,255,255,.42);
  border-radius:10px;
  padding:8px 12px;
  font:inherit;
  cursor:pointer
}
.detail-size-select option {
  background:#f6eee7;
  color:#3b2d27
}
/* LEO ROYAL CLASSIC WORDMARK */
.brand-wordmark, .brand > span  {
    font-family: "Bodoni 72", "Didot", "Bodoni MT", "Times New Roman", Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-style: normal !important;
}
/* LEO LUXURY THEME — CHAMPAGNE GOLD */
:root {
  --leo-accent:#c99a3b;
  --leo-accent-light:#e6c777
}
.brand-wordmark,.brand>span {
  color:var(--leo-accent)!important;
  text-shadow:0 1px 14px rgba(201,154,59,.16)
}
.brand-logo {
    filter:brightness(0) saturate(100%) invert(67%) sepia(39%) saturate(671%) hue-rotate(2deg) brightness(90%) contrast(88%)!important;
    opacity:1!important;
}
.footer-brand {
  color:var(--leo-accent)!important
}
.nav-links a:hover,.nav-icon:hover {
  color:var(--leo-accent)!important
}
.cart-count {
  background:var(--leo-accent)!important;
  color:#170f08!important
}
.nav-search input {
  border-color:rgba(201,154,59,.55)!important
}
.nav-search .search-close {
  background:var(--leo-accent)!important;
  color:#160d08!important
}
.search-results b {
  color:var(--leo-accent)!important
}
/* Search focus backdrop: blur the entire page while keeping the search UI clear */
.leo-search-backdrop {
    position:fixed;
    inset:0;
    z-index:1100;
    display:block;
    background:rgba(3,2,5,.38);
    backdrop-filter:blur(9px) saturate(.78);
    -webkit-backdrop-filter:blur(9px) saturate(.78);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,visibility .28s ease;
}
body.leo-search-open .leo-search-backdrop {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
body.leo-search-open .navbar {
  z-index:1200
}
body.leo-search-open {
  overflow:hidden
}
/* Reliable page blur while search is open. The search/navigation stays crisp above it. */
body.leo-search-open > main,
body.leo-search-open > footer {
    filter:blur(8px) saturate(.82);
    transition:filter .28s ease;
    pointer-events:none;
}
body.leo-search-open > .navbar {
  filter:none!important;
}
.nav-search {
  z-index:1201!important
}
/* Brand collection variant controls — same LEO theme */
.variant-notes-grid .variant-choice {
  grid-column:span 1
}
.variant-notes-grid .detail-size-select {
  width:100%;
  margin-top:2px
}
.variant-notes-grid small {
  display:block;
  margin-top:9px;
  color:#817987;
  font-size:10px;
  line-height:1.4
}
.detail-size-select {
  width:100%;
  min-height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f6eee7;
  color:#3b2d27;
  padding:0 10px
}
@media(max-width:700px) {
  .variant-notes-grid .variant-choice {
    grid-column:auto
  }
}
/* Collection visibility fix: product cards are real content, not scroll-gated overlays. */
#productGrid .product {
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
#productGrid .product.visible {
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
#productGrid .product-image {
  visibility:visible!important;
}
/* LEO brand story + customer reviews */
.leo-about-section .section-head {
  max-width:900px
}
.about-story-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:18px;
  margin-top:42px
}
.about-story-card {
  position:relative;
  padding:34px;
  border:1px solid rgba(196,139,71,.25);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(150,85,28,.035));
  overflow:hidden
}
.about-story-card:first-child {
  background:linear-gradient(145deg,rgba(196,139,71,.09),rgba(255,255,255,.025))
}
.about-kicker {
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#c89255;
  margin-bottom:15px
}
.about-story-card h3 {
  font-size:28px;
  font-weight:500;
  margin-bottom:13px;
  color:#f0d1a3
}
.about-story-card p {
  font-size:14px;
  line-height:1.8;
  color:#9d9187;
  margin-top:10px
}
.about-promise {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:24px;
  border:1px solid rgba(196,139,71,.22);
  border-radius:24px;
  overflow:hidden
}
.about-promise>div {
  padding:24px 18px;
  text-align:center;
  border-right:1px solid rgba(196,139,71,.18)
}
.about-promise>div:last-child {
  border-right:0
}
.promise-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0 auto 12px;
  border:1px solid rgba(196,139,71,.45);
  border-radius:50%;
  color:#d2a063;
  font-size:19px
}
.about-promise strong {
  display:block;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#e3c18f
}
.about-promise p {
  font-size:12px;
  line-height:1.65;
  color:#8f857d;
  margin:9px 0 0
}
.review-summary {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 30px;
  margin-bottom:26px;
  border:1px solid rgba(196,139,71,.25);
  border-radius:24px;
  background:linear-gradient(100deg,rgba(196,139,71,.08),rgba(255,255,255,.025));
  max-width:720px
}
.review-score {
  font-size:52px;
  line-height:1;
  font-weight:500;
  color:#f0d1a3
}
.stars {
  font-size:24px;
  letter-spacing:4px;
  color:#d59b50;
  white-space:nowrap
}
.review-label {
  font-size:11px;
  color:#8f857d;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:5px
}
.review-count {
  margin-left:auto;
  color:#b5a69a;
  font-size:13px;
  letter-spacing:1px
}
.reviews-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}
.review-card {
  padding:22px;
  border:1px solid rgba(196,139,71,.2);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.08));
  min-width:0
}
.review-person {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px
}
.review-avatar {
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#c58a4c,#6c4325);
  color:#fff;
  font-weight:600
}
.review-person strong {
  display:block;
  font-size:13px;
  color:#ead1ad
}
.review-person span {
  display:block;
  font-size:10px;
  color:#81776e;
  margin-top:3px
}
.review-card p {
  font-size:12px;
  line-height:1.75;
  color:#9d9187;
  margin:0
}
@media(max-width:1100px) {
  .about-story-grid {
    grid-template-columns:1fr 1fr
  }
  .about-story-card:first-child {
    grid-column:1/-1
  }
  .about-promise {
    grid-template-columns:repeat(3,1fr)
  }
  .about-promise>div:nth-child(3) {
    border-right:0
  }
  .about-promise>div:nth-child(-n+3) {
    border-bottom:1px solid rgba(196,139,71,.18)
  }
  .reviews-grid {
    grid-template-columns:repeat(3,1fr)
  }
}
@media(max-width:700px) {
  .about-story-grid,.reviews-grid {
    grid-template-columns:1fr
  }
  .about-story-card:first-child {
    grid-column:auto
  }
  .about-promise {
    grid-template-columns:1fr 1fr
  }
  .about-promise>div {
    border-right:1px solid rgba(196,139,71,.18)!important;
    border-bottom:1px solid rgba(196,139,71,.18)
  }
  .about-promise>div:nth-child(even) {
    border-right:0!important
  }
  .about-promise>div:last-child {
    grid-column:1/-1;
    border-right:0!important
  }
  .review-summary {
    flex-wrap:wrap
  }
  .review-count {
    margin-left:0;
    width:100%
  }
}
/* LEO COMPLETE ROUNDED BRAND FOOTER — applied consistently to every page */
.leo-footer {
  padding:34px 0 24px;
  background:linear-gradient(180deg,#241218 0%,#160b10 100%);
  border-top:1px solid rgba(228,173,87,.18);
}
.leo-footer-shell {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(228,173,87,.32);
  border-radius:34px;
  background:radial-gradient(circle at 82% 15%,rgba(228,173,87,.10),transparent 25%),radial-gradient(circle at 12% 90%,rgba(107,36,109,.14),transparent 28%),linear-gradient(145deg,rgba(60,28,34,.98),rgba(28,13,18,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.05);
  padding:34px 38px 22px;
}
.leo-footer-shell:before {
  content:"✦";
  position:absolute;
  right:32px;
  top:18px;
  font-size:88px;
  color:rgba(228,173,87,.045);
  font-family:Georgia,serif;
  pointer-events:none;
}
.leo-footer-top {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:start;
}
.leo-footer-logo-row {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.leo-footer-logo {
  width:68px;
  height:68px;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(228,173,87,.14));
}
.leo-footer-brand-block .footer-brand {
  font-size:42px;
  line-height:.95;
  letter-spacing:6px;
  color:#f6dfbf;
}
.leo-footer-subtitle {
  font-size:9px;
  letter-spacing:3px;
  color:#d8b98f;
  margin-top:8px;
}
.leo-footer-intro {
  max-width:610px!important;
  margin:10px 0 0!important;
  color:#cbb5a7!important;
  line-height:1.75!important;
  font-size:13px!important;
}
.leo-footer-intro strong {
  color:#f0d5a7;
  letter-spacing:.4px;
}
.leo-footer-story {
  padding:24px;
  border:1px solid rgba(228,173,87,.18);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.footer-section-kicker,.leo-footer-grid h4 {
  font-size:10px;
  letter-spacing:2.6px;
  color:#e0a14b;
  margin:0 0 10px;
  font-weight:700;
}
.leo-footer-story h3 {
  font:26px Georgia,serif;
  color:#f6dfbf;
  margin:0 0 10px;
}
.leo-footer-story p {
  color:#cbb5a7;
  line-height:1.7;
  font-size:13px;
  margin:7px 0;
}
.leo-footer-points {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.leo-footer-points span {
  padding:8px 11px;
  border:1px solid rgba(228,173,87,.16);
  border-radius:999px;
  color:#e7cda4;
  font-size:10px;
  background:rgba(228,173,87,.045);
}
.leo-footer-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,173,87,.32),transparent);
  margin:28px 0;
}
.leo-footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.35fr 1fr;
  gap:28px;
}
.leo-footer-grid h4 {
  margin-bottom:13px;
}
.leo-footer-grid a {
  display:block;
  color:#cbb5a7;
  font-size:12px;
  margin:9px 0;
  transition:.3s;
  text-decoration:none;
}
.leo-footer-grid a:hover {
  color:#fff5e8;
  transform:translateX(4px);
}
.leo-footer-address {
  color:#cbb5a7;
  font-size:12px;
  line-height:1.8;
  margin:0;
}
.leo-footer-highlight {
  margin-top:26px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(228,173,87,.20);
  background:linear-gradient(90deg,rgba(228,173,87,.07),rgba(107,36,109,.08),rgba(228,173,87,.04));
  display:flex;
  align-items:center;
  gap:18px;
}
.leo-footer-highlight>span {
  font:28px Georgia,serif;
  letter-spacing:4px;
  color:#e4ad57;
}
.leo-footer-highlight p {
  flex:1;
  color:#cbb5a7;
  font-size:12px;
  line-height:1.55;
  margin:0;
}
.back-to-leo {
  display:flex!important;
  align-items:center;
  gap:10px;
  min-width:175px;
  justify-content:center;
  padding:11px 15px;
  border:1px solid rgba(228,173,87,.40);
  border-radius:999px;
  background:linear-gradient(135deg,#f4c76b 0%,#d87924 42%,#7b2f78 100%);
  color:#fffaf0!important;
  box-shadow:0 10px 28px rgba(217,120,24,.22),0 0 22px rgba(123,47,120,.14);
  font-size:12px!important;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none!important;
  transition:.3s!important;
}
.back-to-leo:hover {
  transform:translateY(-3px)!important;
  box-shadow:0 16px 35px rgba(217,120,24,.30),0 0 30px rgba(123,47,120,.20)!important;
  filter:brightness(1.08) saturate(1.08);
}
.back-to-leo small {
  display:block;
  font-size:7px;
  letter-spacing:2px;
  opacity:.75;
  line-height:1;
  margin-bottom:3px;
}
.back-arrow {
  font-size:16px;
  line-height:1;
}
.leo-footer-bottom {
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#bca79b;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
@media(max-width:900px) {
  .leo-footer-shell {
    padding:28px 24px 20px;
    border-radius:28px
  }
  .leo-footer-top {
    grid-template-columns:1fr;
    gap:22px
  }
  .leo-footer-grid {
    grid-template-columns:1fr 1fr
  }
  .leo-footer-highlight {
    flex-wrap:wrap
  }
  .leo-footer-highlight p {
    flex-basis:100%
  }
  .back-to-leo {
    margin-left:auto;
  }
}
@media(max-width:600px) {
  .leo-footer {
    padding:22px 0 16px
  }
  .leo-footer-shell {
    padding:24px 18px 18px;
    border-radius:24px
  }
  .leo-footer-logo {
    width:58px;
    height:58px
  }
  .leo-footer-brand-block .footer-brand {
    font-size:36px
  }
  .leo-footer-grid {
    grid-template-columns:1fr
  }
  .leo-footer-highlight {
    padding:16px;
    border-radius:18px
  }
  .back-to-leo {
    width:100%;
    margin-left:0
  }
  .leo-footer-bottom {
    flex-direction:column;
    gap:7px
  }
  .leo-footer-story {
    padding:18px;
    border-radius:20px
  }
}
.leo-privacy-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  padding:10px 15px;
  border-radius:999px;
  border:1px solid rgba(228,173,87,.35);
  background:linear-gradient(135deg,rgba(228,173,87,.14),rgba(123,47,120,.16));
  color:#f3d5a9!important;
  text-decoration:none!important;
  font-size:11px!important;
  letter-spacing:.7px;
  transition:.25s!important
}
.leo-privacy-btn:hover {
  transform:translateY(-2px);
  border-color:rgba(244,199,107,.7);
  background:linear-gradient(135deg,rgba(244,199,107,.22),rgba(123,47,120,.25));
  box-shadow:0 8px 22px rgba(0,0,0,.18)
}
.privacy-page {
  background:#090909;
  color:#eadbc8;
  min-height:100vh
}
.privacy-shell {
  max-width:900px;
  margin:0 auto;
  padding:120px 24px 80px
}
.privacy-card {
  border:1px solid rgba(228,173,87,.25);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(60,28,34,.9),rgba(28,13,18,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  padding:42px
}
.privacy-back {
  display:inline-flex;
  color:#f3d5a9;
  text-decoration:none;
  border:1px solid rgba(228,173,87,.3);
  padding:9px 14px;
  border-radius:999px;
  background:rgba(228,173,87,.08);
  margin-bottom:28px
}
.privacy-card h1 {
  font:48px Georgia,serif;
  color:#f6dfbf;
  margin:0 0 10px
}
.privacy-card h2 {
  font:24px Georgia,serif;
  color:#e9c889;
  margin:28px 0 8px
}
.privacy-card p,.privacy-card li {
  color:#cbb5a7;
  line-height:1.75;
  font-size:14px
}
.privacy-card ul {
  padding-left:22px
}
@media(max-width:600px) {
  .privacy-shell {
    padding:95px 16px 55px
  }
  .privacy-card {
    padding:26px 20px;
    border-radius:22px
  }
  .privacy-card h1 {
    font-size:38px
  }
}
/* Checkout UPI visibility */
#payment {
  color:#111!important;
  background:#fff!important;
}
#payment option {
  color:#111!important;
  background:#fff!important;
}
/* Stronger, clearer About LEO typography */
.leo-about-section .section-head>p {
  color:#e1d2c4!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.about-story-card p {
  color:#d5c4b6!important;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.about-story-card h3 {
  color:#f3d5a9!important;
}
.about-promise strong {
  color:#efd09f!important;
}
.about-promise p {
  color:#d0bfb1!important;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
/* =========================================================
   LEO DESIGNER GLASS NAVIGATION — MOBILE DRAWER + DESKTOP ACCOUNT
========================================================= */
:root {
  --leo-glass-bg:rgba(255,255,255,.13);
  --leo-glass-border:rgba(255,255,255,.28);
  --leo-glass-shadow:0 22px 70px rgba(0,0,0,.28);
  --leo-ink:#17120f;
  --leo-gold:#c99a3b
}
.navbar {
    background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.075)) !important;
    border:1px solid var(--leo-glass-border) !important;
    backdrop-filter:blur(28px) saturate(170%);
    -webkit-backdrop-filter:blur(28px) saturate(170%);
    box-shadow:inset 0 1px rgba(255,255,255,.42),inset 0 -1px rgba(255,255,255,.08),var(--leo-glass-shadow) !important;
    overflow:visible !important;
}
.navbar:before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.12),transparent 34%,rgba(255,255,255,.07) 68%,transparent);
  opacity:.8
}
.brand,.nav-actions,.nav-links,.nav-search {
  position:relative;
  z-index:2
}
.brand-logo {
  filter:none !important;
  mix-blend-mode:multiply;
}
.brand-wordmark {
  color:#111 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.5)
}
.nav-links a {
  color:#17120f !important;
  font-weight:600;
  text-shadow:0 1px rgba(255,255,255,.35)
}
.nav-links a:hover {
  background:rgba(255,255,255,.24)!important;
  color:#000!important
}
.nav-icon {
  color:#17120f !important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.35)
}
.nav-icon:hover {
  background:rgba(255,255,255,.30)!important;
  color:#000!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.55)!important
}
.search-glyph {
  width:19px;
  height:19px;
  display:block
}
.search-glyph circle,.search-glyph path {
  stroke:#111;
  stroke-width:2;
  fill:none;
  stroke-linecap:round
}
.user-icon {
  width:18px;
  height:18px;
  display:block;
  position:relative;
  border:1.8px solid #111;
  border-radius:50% 50% 45% 45%;
  border-top-color:transparent;
  transform:translateY(4px)
}
.user-icon:before {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border:1.8px solid #111;
  border-radius:50%;
  left:50%;
  top:-8px;
  transform:translateX(-50%);
  background:transparent
}
.hamburger-icon {
  width:20px;
  height:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.hamburger-icon i {
  height:1.7px;
  width:100%;
  background:#111;
  border-radius:99px;
  display:block;
  transition:.3s
}
.mobile-menu-btn {
  display:none !important
}
.menu-backdrop {
  position:fixed;
  inset:0;
  background:rgba(8,5,9,.42);
  backdrop-filter:blur(5px);
  z-index:1090;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s
}
.menu-backdrop.open {
  opacity:1;
  pointer-events:auto
}
.mobile-menu {
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:min(360px,88vw) !important;
  height:100dvh !important;
  margin:0 !important;
  padding:110px 22px 30px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  z-index:1100 !important;
  background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.09)) !important;
  border-left:1px solid rgba(255,255,255,.4) !important;
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:34px 0 0 34px !important;
  box-shadow:-25px 0 80px rgba(0,0,0,.35),inset 1px 0 rgba(255,255,255,.45) !important;
  backdrop-filter:blur(30px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(170%) !important;
  opacity:0 !important;
  transform:translateX(105%) !important;
  pointer-events:none !important;
  transition:transform .45s cubic-bezier(.22,.8,.2,1),opacity .35s ease !important;
  overflow:auto !important
}
.mobile-menu.open {
  opacity:1 !important;
  transform:translateX(0) !important;
  pointer-events:auto !important
}
.mobile-menu .drawer-brand {
  position:absolute;
  top:28px;
  left:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.28)
}
.mobile-menu .drawer-brand img {
  width:48px;
  height:48px;
  object-fit:contain;
  mix-blend-mode:multiply
}
.mobile-menu .drawer-brand strong {
  color:#111;
  font-size:20px;
  letter-spacing:3px
}
.mobile-menu .drawer-kicker {
  font-size:10px;
  letter-spacing:3px;
  color:#4c4038;
  margin:12px 4px 4px;
  text-transform:uppercase
}
.mobile-menu a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 17px !important;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px !important;
  color:#17120f !important;
  background:rgba(255,255,255,.12);
  font-size:15px !important;
  font-weight:650;
  box-shadow:inset 0 1px rgba(255,255,255,.22);
  transform:none !important
}
.mobile-menu a:after {
  content:"→";
  font-size:17px;
  opacity:.6
}
.mobile-menu a:hover {
  background:rgba(255,255,255,.27)!important;
  border-color:rgba(201,154,59,.55)!important;
  color:#000!important
}
.user-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:1500;
  background:rgba(5,3,7,.5);
  backdrop-filter:blur(7px);
  opacity:0;
  pointer-events:none;
  transition:.3s
}
.user-modal-backdrop.open {
  opacity:1;
  pointer-events:auto
}
.user-modal {
  position:fixed;
  z-index:1501;
  left:50%;
  top:50%;
  width:min(430px,calc(100% - 32px));
  transform:translate(-50%,-46%) scale(.97);
  opacity:0;
  pointer-events:none;
  padding:28px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.10));
  backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 30px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.45);
  transition:.35s
}
.user-modal.open {
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1)
}
.user-modal h3 {
  margin:0 0 7px;
  color:#111;
  font-size:27px
}
.user-modal p {
  color:#4e443e;
  font-size:13px;
  line-height:1.6;
  margin:0 0 20px
}
.user-modal label {
  display:block;
  color:#211915;
  font-size:12px;
  font-weight:700;
  margin:12px 0 7px
}
.user-modal input {
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(70,45,30,.25);
  border-radius:14px;
  background:rgba(255,255,255,.65);
  color:#111;
  padding:13px 14px;
  outline:none
}
.user-modal input:focus {
  border-color:var(--leo-gold);
  box-shadow:0 0 0 4px rgba(201,154,59,.12)
}
.user-modal-actions {
  display:flex;
  gap:10px;
  margin-top:18px
}
.user-modal-actions button {
  flex:1
}
.user-close {
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.25);
  color:#111;
  font-size:18px;
  cursor:pointer
}
.account-status {
  padding:12px 14px;
  border-radius:15px;
  background:rgba(255,255,255,.28);
  color:#211915;
  font-size:13px;
  margin-top:12px
}
.nav-search {
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09)) !important;
  border:1px solid rgba(255,255,255,.38) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.45)!important;
  border-radius:24px!important;
  padding:6px!important;
  backdrop-filter:blur(25px) saturate(170%)!important
}
.nav-search input {
  background:rgba(255,255,255,.72)!important;
  color:#111!important;
  border:1px solid rgba(255,255,255,.8)!important
}
.nav-search input::placeholder {
  color:#5c514a!important
}
.nav-search .search-close {
  background:#111!important;
  color:#fff!important
}
@media(max-width:900px) {
   .navbar {
    height:68px!important;
    width:calc(100% - 22px)!important;
    padding:6px 9px!important
  }
   .nav-links {
    display:none!important
  }
  .mobile-menu-btn {
    display:grid!important
  }
  .user-login-btn {
    display:none!important
  }
   .brand-logo {
    width:50px!important;
    height:50px!important
  }
  .brand-wordmark {
    font-size:21px!important;
    letter-spacing:3px
  }
   .nav-actions {
    gap:6px
  }
  .nav-icon {
    width:40px!important;
    height:40px!important;
    border-radius:15px!important
  }
   .nav-search {
    left:8px!important;
    right:8px!important;
    top:calc(100% + 8px)!important;
    width:auto!important;
    transform:none!important
  }
}
@media(min-width:901px) {
  .nav-actions .mobile-menu-btn {
    display:none!important
  }
  .nav-actions .user-login-btn {
    display:grid!important
  }
}
@media(max-width:420px) {
  .navbar {
    width:calc(100% - 14px)!important
  }
  .brand-wordmark {
    display:none
  }
  .nav-icon {
    width:38px!important;
    height:38px!important
  }
}
/* =========================================================
   LEO — SPLIT LIQUID GLASS NAVIGATION
   Two independent floating glass capsules: brand + actions.
   ========================================================= */
.navbar {
    position:fixed !important;
    top:16px !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    padding:0 28px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    overflow:visible !important;
    pointer-events:none !important;
}
.navbar::before {
  display:none !important
}
.navbar .brand,
.navbar .nav-actions {
    pointer-events:auto !important;
}
.navbar .brand {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:58px !important;
    padding:7px 18px 7px 9px !important;
    border:1px solid rgba(255,255,255,.34) !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 48%,rgba(255,255,255,.06)) !important;
    backdrop-filter:blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
    box-shadow:0 10px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.55),inset 0 -1px rgba(255,255,255,.10) !important;
    position:relative !important;
    overflow:hidden !important;
}
.navbar .brand::before,
.navbar .nav-actions::before {
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.20),transparent 32%,rgba(255,255,255,.08) 58%,transparent 82%);
}
.navbar .brand-logo {
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
  mix-blend-mode:multiply !important;
  position:relative !important;
  z-index:1 !important
}
.navbar .brand-wordmark {
  color:#111 !important;
  font-weight:800 !important;
  letter-spacing:5px !important;
  font-size:21px !important;
  position:relative !important;
  z-index:1 !important;
  text-shadow:0 1px rgba(255,255,255,.45) !important
}
.navbar .nav-actions {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-height:58px !important;
    padding:7px 9px !important;
    border:1px solid rgba(255,255,255,.34) !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.09) 48%,rgba(255,255,255,.05)) !important;
    backdrop-filter:blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
    box-shadow:0 10px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.55),inset 0 -1px rgba(255,255,255,.10) !important;
    position:relative !important;
    overflow:hidden !important;
}
.navbar .nav-actions > * {
  position:relative !important;
  z-index:2 !important
}
.navbar .nav-links {
  display:none !important
}
.navbar .nav-icon {
    width:46px !important;
  height:46px !important;
  padding:0 !important;
    display:grid !important;
  place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.15) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    color:#111 !important;
    box-shadow:inset 0 1px rgba(255,255,255,.48),0 4px 14px rgba(0,0,0,.08) !important;
    transition:transform .28s ease,background .28s ease,box-shadow .28s ease !important;
}
.navbar .nav-icon:hover {
  transform:translateY(-2px) scale(1.03) !important;
  background:rgba(255,255,255,.30) !important;
  box-shadow:0 9px 25px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.65) !important;
  color:#000 !important
}
.navbar .search-glyph {
  width:20px !important;
  height:20px !important
}
.navbar .search-glyph circle,.navbar .search-glyph path {
  stroke:#111 !important;
  stroke-width:2.1 !important;
  fill:none !important;
  stroke-linecap:round !important
}
.navbar .user-icon {
  border-color:#111 !important
}
.navbar .user-icon:before {
  border-color:#111 !important
}
.navbar .mobile-menu-btn {
  display:none !important
}
.navbar .cart-count {
  margin:-28px 0 0 24px !important
}
/* Keep search panel attached to the action capsule. */
.navbar .nav-search {
  right:8px !important;
  top:calc(100% + 10px) !important;
  transform:none !important;
  width:min(420px,42vw) !important
}
@media(max-width:900px) {
    .navbar {
    top:8px !important;
    padding:0 10px !important;
    gap:8px !important
  }
    .navbar .brand {
    min-height:52px !important;
    padding:5px 14px 5px 7px !important;
    gap:7px !important
  }
    .navbar .brand-logo {
    width:43px !important;
    height:43px !important
  }
    .navbar .brand-wordmark {
    font-size:17px !important;
    letter-spacing:4px !important
  }
    .navbar .nav-actions {
    min-height:52px !important;
    padding:5px 6px !important;
    gap:5px !important
  }
    .navbar .nav-icon {
    width:40px !important;
    height:40px !important
  }
    .navbar .mobile-menu-btn {
    display:grid !important
  }
    .navbar .nav-actions .mobile-menu-btn {
    display:grid !important
  }
    .navbar .nav-search {
    left:auto !important;
    right:6px !important;
    top:calc(100% + 9px) !important;
    width:min(360px,calc(100vw - 28px)) !important
  }
}
@media(max-width:480px) {
    .navbar {
    padding:0 7px !important
  }
    .navbar .brand-wordmark {
    font-size:15px !important;
    letter-spacing:3px !important
  }
    .navbar .brand {
    padding-right:11px !important
  }
    .navbar .nav-icon {
    width:38px !important;
    height:38px !important
  }
    .navbar .nav-actions {
    gap:3px !important
  }
}
.navbar .nav-search {
  pointer-events:auto !important
}
/* Extra transparency: true frosted-liquid glass rather than opaque panels. */
.navbar .brand,
.navbar .nav-actions {
    background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.055) 48%,rgba(255,255,255,.025)) !important;
    backdrop-filter:blur(34px) saturate(190%) contrast(105%) !important;
    -webkit-backdrop-filter:blur(34px) saturate(190%) contrast(105%) !important;
    border-color:rgba(255,255,255,.28) !important;
    box-shadow:0 14px 45px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.48),inset 0 -1px rgba(255,255,255,.07) !important;
}
.navbar .nav-icon {
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.24) !important
}
.navbar .nav-icon:hover {
  background:rgba(255,255,255,.22) !important
}
/* FINAL NAV INTERACTION FIX */
.navbar {
  z-index:10000!important;
  pointer-events:none!important
}
.navbar .brand,.navbar .nav-actions,.navbar .nav-search {
  pointer-events:auto!important
}
.navbar .nav-actions {
  position:relative!important;
  z-index:10002!important
}
.navbar .nav-icon {
  position:relative!important;
  z-index:10003!important;
  pointer-events:auto!important
}
.mobile-menu-btn {
  cursor:pointer!important
}
.hamburger-icon {
  width:22px!important;
  height:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  align-items:stretch!important
}
.hamburger-icon i {
  display:block!important;
  width:100%!important;
  height:2px!important;
  border-radius:4px!important;
  background:#111!important;
  box-shadow:0 1px rgba(255,255,255,.5)!important
}
.menu-backdrop {
  z-index:10990!important
}
.mobile-menu {
  z-index:11000!important
}
.mobile-menu a {
  cursor:pointer!important;
  pointer-events:auto!important
}
body.menu-open {
  overflow:hidden!important
}
@media(max-width:900px) {
   .navbar {
    pointer-events:none!important
  }
   .navbar .brand,.navbar .nav-actions {
    pointer-events:auto!important
  }
   .navbar .mobile-menu-btn {
    display:grid!important;
    visibility:visible!important;
    opacity:1!important
  }
}
/* ===== LEO FINAL SPLIT GLASS NAVIGATION OVERRIDE ===== */
.navbar {
    position:fixed!important;
   top:18px!important;
   left:0!important;
   transform:none!important;
    width:100%!important;
   height:auto!important;
   padding:0 28px!important;
    background:transparent!important;
   border:0!important;
   box-shadow:none!important;
    backdrop-filter:none!important;
   -webkit-backdrop-filter:none!important;
    display:flex!important;
   align-items:center!important;
   justify-content:space-between!important;
    z-index:1000!important;
   pointer-events:none!important;
}
.navbar > .brand,
.navbar > .nav-actions {
    pointer-events:auto!important;
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.30)!important;
    box-shadow:0 12px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.42)!important;
    backdrop-filter:blur(24px) saturate(170%)!important;
    -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
    border-radius:999px!important;
}
.navbar > .brand {
    min-height:68px!important;
   padding:4px 22px 4px 10px!important;
    gap:10px!important;
   color:#050505!important;
}
.navbar > .nav-actions {
    min-height:68px!important;
   padding:8px 10px!important;
    gap:7px!important;
}
.brand-logo {
  filter:brightness(0)!important;
   width:58px!important;
  height:58px!important;
   opacity:1!important
}
.brand-wordmark {
  color:#050505!important;
  text-shadow:none!important
}
.nav-icon {
    color:#080808!important;
    background:rgba(255,255,255,.20)!important;
    border:1px solid rgba(255,255,255,.36)!important;
}
.nav-icon:hover {
  background:rgba(255,255,255,.38)!important;
  color:#000!important
}
.search-glyph {
  stroke:#050505!important
}
.user-icon {
  border-color:#050505!important
}
.hamburger-icon,.hamburger-icon i {
  background:#050505!important
}
.mobile-menu-btn {
  display:none!important
}
@media(max-width:1050px) {
   .navbar {
    top:10px!important;
    padding:0 14px!important
  }
   .navbar > .brand {
    min-height:58px!important;
    padding-right:17px!important
  }
   .navbar > .nav-actions {
    min-height:58px!important;
    padding:6px 7px!important
  }
   .brand-logo {
    width:46px!important;
    height:46px!important
  }
   .brand-wordmark {
    font-size:22px!important
  }
   .nav-icon {
    width:40px!important;
    height:40px!important
  }
   .mobile-menu-btn {
    display:grid!important
  }
   .mobile-menu {
       display:flex!important;
     position:fixed!important;
     top:0!important;
     right:0!important;
       left:auto!important;
     width:min(350px,88vw)!important;
     height:100dvh!important;
       padding:105px 22px 28px!important;
     margin:0!important;
       z-index:2000!important;
     flex-direction:column!important;
     gap:8px!important;
       border:1px solid rgba(255,255,255,.28)!important;
     border-right:0!important;
       border-radius:32px 0 0 32px!important;
       background:rgba(255,255,255,.13)!important;
       backdrop-filter:blur(32px) saturate(180%)!important;
       -webkit-backdrop-filter:blur(32px) saturate(180%)!important;
       box-shadow:-24px 0 70px rgba(0,0,0,.35), inset 1px 0 0 rgba(255,255,255,.35)!important;
       opacity:0!important;
     transform:translateX(110%)!important;
       pointer-events:none!important;
     transition:transform .38s cubic-bezier(.22,.8,.25,1),opacity .25s ease!important;
     
  }
   .mobile-menu.open {
    opacity:1!important;
    transform:translateX(0)!important;
    pointer-events:auto!important
  }
   .mobile-menu a {
    color:#090909!important;
    background:rgba(255,255,255,.16)!important;
    border:1px solid rgba(255,255,255,.22)!important
  }
   .menu-backdrop {
       display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1990!important;
       background:rgba(0,0,0,.30)!important;
    backdrop-filter:blur(3px)!important;
       opacity:0!important;
    pointer-events:none!important;
    transition:opacity .25s ease!important;
     
  }
   .menu-backdrop.open {
    opacity:1!important;
    pointer-events:auto!important
  }
}
@media(min-width:1051px) {
   .mobile-menu,.menu-backdrop {
    display:none!important
  }
}
/* ===== FINAL NAV OVERRIDE: two truly separate glass capsules ===== */
.navbar {
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
  pointer-events:none!important;
}
.navbar>.brand,.navbar>.nav-actions {
  pointer-events:auto!important;
  position:relative!important;
  flex:0 0 auto!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
}
.navbar>.brand {
  border-radius:24px!important;
  padding:6px 18px 6px 8px!important;
  min-height:56px!important;
}
.navbar>.nav-actions {
  border-radius:24px!important;
  padding:6px 8px!important;
  min-height:56px!important;
  gap:7px!important;
}
.navbar>.brand:before,.navbar>.nav-actions:before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,0) 45%,rgba(255,255,255,.08))!important;
  pointer-events:none!important;
}
.navbar>.nav-actions>* {
  z-index:2!important;
}
.navbar .mobile-menu-btn {
  display:none!important;
  visibility:visible!important;
  opacity:1!important;
}
.hamburger-icon,.hamburger-icon i {
  display:block!important;
}
.hamburger-icon {
  width:22px!important;
  height:18px!important;
  position:relative!important;
}
.hamburger-icon i {
  position:absolute!important;
  left:0!important;
  width:22px!important;
  height:2px!important;
  background:#111!important;
  border-radius:3px!important;
}
.hamburger-icon i:nth-child(1) {
  top:0
}
.hamburger-icon i:nth-child(2) {
  top:8px
}
.hamburger-icon i:nth-child(3) {
  top:16px
}
.mobile-menu {
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:min(380px,88vw)!important;
  height:100vh!important;
  display:block!important;
  visibility:visible!important;
  opacity:0!important;
  transform:translateX(105%)!important;
  pointer-events:none!important;
  z-index:20001!important;
  padding:26px!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.52)!important;
  border-left:1px solid rgba(255,255,255,.65)!important;
  box-shadow:-24px 0 60px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(30px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(160%)!important;
  transition:transform .34s ease,opacity .24s ease!important;
}
.mobile-menu.open {
  opacity:1!important;
  transform:translateX(0)!important;
  pointer-events:auto!important;
}
.menu-backdrop {
  position:fixed!important;
  inset:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:20000!important;
  background:rgba(0,0,0,.16)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  transition:opacity .25s ease!important;
}
.menu-backdrop.open {
  opacity:1!important;
  pointer-events:auto!important;
}
.drawer-head {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 4px 22px;
  border-bottom:1px solid rgba(0,0,0,.12);
  margin-bottom:22px
}
.drawer-head img {
  width:44px;
  height:44px;
  object-fit:contain
}
.drawer-head strong {
  display:block;
  color:#111;
  letter-spacing:4px;
  font-size:18px
}
.drawer-head small {
  display:block;
  color:#5b514a;
  font-size:9px;
  letter-spacing:2px;
  margin-top:3px
}
.drawer-close {
  margin-left:auto;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.28);
  font-size:25px;
  cursor:pointer;
  color:#111
}
.drawer-links {
  display:flex;
  flex-direction:column;
  gap:10px
}
.drawer-links a {
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  padding:15px 16px!important;
  border-radius:17px!important;
  color:#111!important;
  text-decoration:none!important;
  background:rgba(255,255,255,.22)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  font-weight:650!important;
}
.drawer-links a:hover {
  background:rgba(255,255,255,.48)!important;
}
@media(max-width:900px) {
  .navbar {
    gap:14px!important;
    padding:0 10px!important
  }
  .navbar>.brand {
    min-height:52px!important
  }
  .navbar>.nav-actions {
    min-height:52px!important
  }
  .navbar .mobile-menu-btn {
    display:grid!important
  }
  .navbar .user-login-btn {
    display:none!important
  }
  .navbar .nav-icon {
    width:40px!important;
    height:40px!important
  }
}
@media(min-width:901px) {
  .navbar .mobile-menu-btn {
    display:none!important
  }
  .navbar .user-login-btn {
    display:grid!important
  }
}
@media(max-width:420px) {
  .navbar {
    gap:8px!important;
    padding:0 7px!important
  }
  .navbar>.brand {
    padding-right:12px!important
  }
  .navbar>.nav-actions {
    gap:3px!important
  }
  .navbar .nav-icon {
    width:38px!important;
    height:38px!important
  }
  .brand-wordmark {
    font-size:15px!important
  }
}
/* Account modal must be centered and must never navigate/scroll to footer. */
.user-modal-backdrop {
  position:fixed!important;
  inset:0!important;
  z-index:21000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(10,8,7,.34)!important;
  opacity:0!important;
  pointer-events:none!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  transition:opacity .2s ease!important
}
.user-modal-backdrop.open {
  opacity:1!important;
  pointer-events:auto!important
}
.user-modal {
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-46%) scale(.96)!important;
  z-index:21001!important;
  width:min(430px,calc(100vw - 30px))!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:28px!important;
  padding:28px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(28px)!important;
  -webkit-backdrop-filter:blur(28px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .2s ease,transform .2s ease!important
}
.user-modal.open {
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate(-50%,-50%) scale(1)!important
}
/* =========================================================
   FINAL MOBILE NAV — MATCH USER SKETCH
   Four controls in the RIGHT glass capsule:
   Search | Cart | Account | Menu
   The LEFT capsule contains only LEO.
========================================================= */
@media (max-width:900px) {
    .navbar {
        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
        gap:10px!important;
        padding:0 8px!important;
        pointer-events:none!important;
      
  }
    .navbar>.brand,
    .navbar>.nav-actions {
        pointer-events:auto!important;
      
  }
    .navbar>.brand {
        flex:0 0 auto!important;
      
  }
    .navbar>.nav-actions {
        margin-left:auto!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-end!important;
        flex:0 0 auto!important;
        gap:5px!important;
        padding:6px 7px!important;
        min-height:52px!important;
        border-radius:28px!important;
      
  }
    .navbar .nav-actions .nav-icon {
        display:grid!important;
        visibility:visible!important;
        opacity:1!important;
        flex:0 0 auto!important;
        width:39px!important;
        height:39px!important;
        min-width:39px!important;
        min-height:39px!important;
        padding:0!important;
        margin:0!important;
        place-items:center!important;
        border-radius:50%!important;
      
  }
    /* Keep ALL four controls visible on mobile. */
    .navbar .nav-actions .nav-icon:nth-child(2),
    .navbar .nav-actions .user-login-btn,
    .navbar .nav-actions .mobile-menu-btn {
        display:grid!important;
        visibility:visible!important;
        opacity:1!important;
      
  }
    .navbar .mobile-menu-btn {
        order:4!important;
        cursor:pointer!important;
        z-index:10010!important;
        -webkit-tap-highlight-color:transparent!important;
      
  }
    .navbar .user-login-btn {
    order:3!important
  }
    .navbar .nav-actions>a.nav-icon {
    order:2!important
  }
    .navbar #searchBtn {
    order:1!important
  }
    .navbar .hamburger-icon {
        display:flex!important;
        flex-direction:column!important;
        justify-content:space-between!important;
        width:21px!important;
        height:17px!important;
        pointer-events:none!important;
      
  }
    .navbar .hamburger-icon i {
        position:static!important;
        display:block!important;
        width:21px!important;
        height:2px!important;
        flex:0 0 2px!important;
        background:#111!important;
        border-radius:99px!important;
        pointer-events:none!important;
      
  }
    .navbar .search-glyph {
    width:21px!important;
    height:21px!important;
    stroke:#111!important
  }
    .navbar .user-icon {
    border-color:#111!important
  }
    .navbar .cart-count {
    background:#111!important;
    color:#fff!important
  }
    /* Drawer starts below the top navigation and slides from the right. */
    .mobile-menu {
        top:0!important;
        right:0!important;
        left:auto!important;
        width:min(380px,88vw)!important;
        height:100dvh!important;
        padding:92px 20px 24px!important;
        border-radius:28px 0 0 28px!important;
        transform:translateX(110%)!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        z-index:20001!important;
      
  }
    .mobile-menu.open {
        transform:translateX(0)!important;
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
      
  }
}
@media (max-width:430px) {
    .navbar {
    gap:7px!important;
    padding:0 6px!important
  }
    .navbar>.brand {
    padding:5px 11px 5px 7px!important;
    min-height:50px!important
  }
    .navbar>.nav-actions {
    gap:2px!important;
    padding:5px 5px!important;
    min-height:50px!important
  }
    .navbar .nav-actions .nav-icon {
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important
  }
    .navbar .hamburger-icon {
    width:20px!important;
    height:16px!important
  }
    .navbar .hamburger-icon i {
    width:20px!important
  }
    .brand-wordmark {
    font-size:15px!important
  }
    .brand-logo {
    width:42px!important;
    height:42px!important
  }
}
/* FINAL REQUEST: centered search + menu on desktop + thin hamburger + separated glass capsules */
.navbar>.brand,.navbar>.nav-actions {
  backdrop-filter:blur(26px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%)!important;
  background:rgba(255,255,255,.10)!important;
}
.navbar {
  gap:34px!important;
}
.navbar .mobile-menu-btn {
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}
.navbar .hamburger-icon {
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  width:20px!important;
  height:16px!important;
  pointer-events:none!important;
}
.navbar .hamburger-icon i {
  position:static!important;
  width:20px!important;
  height:1.5px!important;
  min-height:1.5px!important;
  background:#111!important;
  border-radius:99px!important;
  display:block!important;
  pointer-events:none!important;
}
.navbar .mobile-menu-btn {
  order:4!important;
}
@media(min-width:901px) {
  .navbar .mobile-menu-btn {
    display:grid!important
  }
  .navbar .user-login-btn {
    display:grid!important
  }
  .mobile-menu {
    top:86px!important;
    height:calc(100dvh - 86px)!important;
  }
}
.leo-center-search {
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
  background:rgba(10,8,8,.30)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
}
.leo-center-search.open {
  opacity:1!important;
  pointer-events:auto!important;
}
.leo-search-card {
  position:relative!important;
  width:min(650px,calc(100vw - 34px))!important;
  max-height:min(78vh,720px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:34px!important;
  border-radius:32px!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 35px 100px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.55)!important;
  backdrop-filter:blur(34px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(34px) saturate(170%)!important;
  color:#111!important;
  transform:translateY(12px) scale(.98);
  transition:transform .22s ease!important;
}
.leo-center-search.open .leo-search-card {
  transform:none!important;
}
.leo-search-x {
  position:absolute!important;
  right:18px!important;
  top:18px!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  border:1px solid rgba(0,0,0,.12)!important;
  background:rgba(255,255,255,.28)!important;
  color:#111!important;
  font-size:24px!important;
  cursor:pointer!important;
}
.leo-search-eyebrow {
  font-size:10px!important;
  letter-spacing:3px!important;
  color:#6b3d2d!important;
  font-weight:700!important;
  margin-bottom:8px!important
}
.leo-search-card h2 {
  margin:0!important;
  font-size:clamp(30px,5vw,46px)!important;
  letter-spacing:-1px!important;
  color:#1d1411!important
}
.leo-search-card p {
  margin:8px 0 22px!important;
  color:#5d514a!important
}
.leo-search-field {
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 16px!important;
  height:58px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.9)!important
}
.leo-search-field svg {
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:#211915!important;
  stroke-width:1.7!important
}
.leo-search-field input {
  flex:1!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#111!important;
  font-size:16px!important
}
.leo-search-field input::placeholder {
  color:#766a63!important
}
.leo-center-results {
  margin-top:14px!important;
  max-height:45vh!important;
  overflow:auto!important;
  display:grid!important;
  gap:8px!important
}
.leo-result {
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:15px!important;
  padding:13px 15px!important;
  border-radius:16px!important;
  text-decoration:none!important;
  background:rgba(255,255,255,.23)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  color:#17110e!important;
  transition:.2s ease!important
}
.leo-result:hover {
  background:rgba(255,255,255,.48)!important;
  transform:translateY(-1px)!important
}
.leo-result strong,.leo-result small {
  display:block
}
.leo-result strong {
  font-size:15px
}
.leo-result small {
  margin-top:3px;
  color:#6b5a52;
  font-size:11px
}
.leo-result b {
  font-size:14px;
  color:#5d3a22
}
.leo-search-empty {
  padding:24px;
  text-align:center;
  color:#645852;
  background:rgba(255,255,255,.12);
  border-radius:16px
}
/* FINAL HAMBURGER — three clean, thin lines */
.hamburger-icon {
    width:22px !important;
    height:16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.hamburger-icon i {
    display:block !important;
    width:100% !important;
    height:1px !important;
    min-height:1px !important;
    max-height:1px !important;
    margin:0 !important;
    padding:0 !important;
    background:#111 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
}
.hamburger-icon i:nth-child(1),
.hamburger-icon i:nth-child(2),
.hamburger-icon i:nth-child(3) {
  height:1px !important;
  min-height:1px !important;
  max-height:1px !important;
}
/* ============================================================
   LEO HERO VIDEO + ALWAYS-ON GOLDEN STARFALL
   ============================================================ */
.hero-art {
    min-height:clamp(520px,52vw,700px)!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    overflow:visible!important;
    isolation:isolate;
}
.hero-video-frame {
    position:relative;
    width:min(100%,478px);
    aspect-ratio:478/850;
    padding:7px;
    border-radius:34px;
    background:linear-gradient(135deg,rgba(232,190,96,.95),rgba(120,72,24,.55) 45%,rgba(245,211,125,.9));
    box-shadow:0 0 0 1px rgba(255,226,146,.34),0 28px 90px rgba(0,0,0,.48),0 0 48px rgba(216,166,70,.18);
    overflow:visible;
    transform:translateZ(0);
}
.hero-video-frame::before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:35px;
    padding:1px;
    background:linear-gradient(120deg,rgba(255,244,190,.9),rgba(255,255,255,.06),rgba(220,170,72,.8),rgba(255,245,197,.25));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:.95;
}
.hero-video-inner {
    position:relative;
    width:100%;
    height:100%;
    border-radius:28px;
    overflow:hidden;
    background:#050505;
    transform:translateZ(0);
    backface-visibility:hidden;
    contain:paint;
}
.hero-video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    background:#050505;
    transform:translate3d(0,0,0) scale(1.002);
    will-change:transform,opacity;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    filter:saturate(1.04) contrast(1.02);
}
.hero-video-shade {
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.14) 52%,rgba(0,0,0,.34));
    mix-blend-mode:multiply;
}
.hero-starfall {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:4;
    pointer-events:none;
    mix-blend-mode:screen;
}
.hero-video-logo {
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:clamp(170px,34%,255px);
    height:auto;
    transform:translate(-50%,-50%);
    object-fit:contain;
    opacity:.58;
    filter:drop-shadow(0 0 8px rgba(255,220,125,.38)) drop-shadow(0 12px 28px rgba(0,0,0,.32));
    animation:leoVideoLogoFloat 4.8s ease-in-out infinite;
    will-change:transform;
    pointer-events:none;
}
@keyframes leoVideoLogoFloat {
    0%,100% {
    transform:translate(-50%,-50%) translateY(0) scale(1)
  }
    50% {
    transform:translate(-50%,-50%) translateY(-12px) scale(1.025)
  }
}
.hero-video-frame::after {
    content:"✦";
    position:absolute;
    z-index:7;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    color:#f6d47e;
    font-size:20px;
    line-height:1;
    text-shadow:0 0 16px rgba(246,212,126,.8);
    pointer-events:none;
}
@media (max-width:900px) {
    .hero-art {
    min-height:clamp(390px,90vw,560px)!important;
    margin-top:8px
  }
    .hero-video-frame {
    width:min(88vw,478px);
    border-radius:28px;
    padding:6px
  }
    .hero-video-inner {
    border-radius:22px
  }
    .hero-video-frame::before {
    border-radius:29px
  }
}
@media (max-width:600px) {
    .hero-art {
    min-height:clamp(280px,76vw,430px)!important
  }
    .hero-video-frame {
    width:min(88vw,478px);
    aspect-ratio:478/850;
    padding:5px;
    border-radius:22px
  }
    .hero-video-inner {
    border-radius:17px
  }
    .hero-video-frame::before {
    border-radius:23px
  }
    .hero-video-logo {
    width:42%;
    opacity:.52
  }
}
@media (prefers-reduced-motion:reduce) {
    .hero-video-logo {
    animation:none
  }
}
/* FINAL HERO VIDEO MATCH — restore the original video presentation and animation.
   Starfall overlay remains enabled separately. */
.hero-video-frame {
    width:min(340px,78%);
    aspect-ratio:478 / 850;
    padding:7px;
    border-radius:34px;
    animation:heroFrameFloat 5s ease-in-out infinite;
}
.hero-video-inner {
    border-radius:27px;
}
.hero-video {
    object-fit:cover;
    object-position:center;
}
.hero-video-logo {
    width:58%;
    max-width:235px;
    opacity:.78;
    animation:heroLogoFloat 5s ease-in-out infinite;
}
@media (max-width:900px) {
    .hero-video-frame {
    width:min(300px,72vw);
    padding:6px;
    border-radius:30px
  }
    .hero-video-inner {
    border-radius:24px
  }
    .hero-video-frame::before {
    border-radius:27px
  }
    .hero-video-logo {
    width:62%;
    opacity:.82
  }
}
@media (max-width:560px) {
    .hero-video-frame {
    width:min(255px,68vw);
    padding:5px;
    border-radius:25px
  }
    .hero-video-inner {
    border-radius:20px
  }
    .hero-video-frame::before {
    border-radius:22px
  }
    .hero-video-logo {
    width:64%;
    max-width:180px
  }
}
/* FINAL HERO VIDEO WIDTH — preserve the approved vertical height while widening
   the video so it sits approximately 2px from the hero content boundary.
   This applies consistently on desktop and mobile. */
.hero-video-frame {
    width:calc(100% - 4px)!important;
    height:604px!important;
    aspect-ratio:auto!important;
    max-width:none!important;
    box-sizing:border-box;
}
.hero-video-inner {
  width:100%;
  height:100%
}
@media (max-width:900px) {
    .hero-video-frame {
        width:calc(100% - 4px)!important;
        height:533px!important;
        aspect-ratio:auto!important;
      
  }
}
@media (max-width:560px) {
    .hero-video-frame {
        width:calc(100% - 4px)!important;
        height:453px!important;
        aspect-ratio:auto!important;
      
  }
}
/* LEO review entrance carousel */
#reviews .reviews-grid {
    display:flex;
    gap:18px;
    overflow:hidden;
    padding:10px 4px 18px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
}
#reviews .review-card {
    flex:0 0 min(360px, 82vw);
    scroll-snap-align:center;
    opacity:.58;
    transform:scale(.94);
    transition:transform .55s ease, opacity .55s ease, box-shadow .55s ease;
}
#reviews .review-card.is-active {
    opacity:1;
    transform:scale(1);
}
@media(max-width:700px) {
    #reviews .reviews-grid {
    gap:12px;
    padding-left:calc((100% - min(82vw,360px))/2);
    padding-right:calc((100% - min(82vw,360px))/2)
  }
    #reviews .review-card {
    flex-basis:82vw
  }
}
/* Matching luxury footer colors */
.leo-footer-story h3 {
  color:#d6b15a;
  text-shadow:0 0 18px rgba(214,177,90,.16)
}
.leo-footer-points span {
  color:#d8c07a
}
.leo-footer .footer-section-kicker {
  color:#caa94d
}
.leo-footer-intro strong {
  color:#e1c46b
}
.review-carousel-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:8px auto 0
}
.review-arrow {
  width:38px;
  height:38px;
  border:1px solid rgba(214,177,90,.55);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:#d6b15a;
  font-size:24px;
  line-height:1;
  cursor:pointer
}
.review-arrow:hover {
  background:rgba(214,177,90,.12)
}
.review-dots {
  display:flex;
  gap:7px;
  align-items:center
}
.review-dot {
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(214,177,90,.35);
  cursor:pointer
}
.review-dot.active {
  width:20px;
  border-radius:8px;
  background:#d6b15a
}
/* Final review/footer polish */
#reviews .reviews-grid {
    display:flex !important;
    justify-content:center !important;
    align-items:stretch !important;
    overflow:hidden !important;
    scroll-snap-type:none !important;
}
#reviews .review-card {
    flex:0 0 min(360px,82vw) !important;
    margin:0 auto !important;
}
#reviews .review-card.is-active {
    margin-left:auto !important;
   margin-right:auto !important;
}
/* Light luxury footer */
.leo-footer {
    background:linear-gradient(180deg,#fffaf0 0%,#f5ead4 100%) !important;
    border-top:1px solid rgba(177,139,70,.28) !important;
}
.leo-footer-shell {
    background:linear-gradient(145deg,#fffdf8 0%,#f7eedc 100%) !important;
    border-color:rgba(177,139,70,.35) !important;
    box-shadow:0 24px 70px rgba(107,79,32,.12),inset 0 1px rgba(255,255,255,.9) !important;
}
.leo-footer,.leo-footer * {
    color:#5c4933;
}
.leo-footer .footer-brand,.leo-footer h4,.leo-footer .footer-section-kicker {
  color:#8a682f !important
}
.leo-footer .leo-footer-intro,.leo-footer .leo-footer-address,.leo-footer p {
  color:#6d5a43 !important
}
.leo-footer-points span {
  color:#9a7638 !important
}
.leo-footer-divider {
  border-color:rgba(177,139,70,.25) !important
}
.leo-footer-bottom {
  color:#7b684d !important
}
/* LEO curated category discovery section — added without changing the original collection/product page. */
.leo-discovery-section {
  position:relative;
  overflow:hidden
}
.leo-discovery-section:after {
  content:"";
  position:absolute;
  inset:18% -15% auto;
  height:520px;
  background:radial-gradient(circle,rgba(214,164,88,.09),transparent 62%);
  pointer-events:none;
  z-index:-1
}
.leo-category-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:34px
}
.leo-category-card {
  position:relative;
  min-height:190px;
  padding:20px 22px;
  display:grid;
  grid-template-columns:112px 1fr 30px;
  align-items:center;
  gap:18px;
  text-align:left;
  border:1px solid rgba(214,164,88,.28);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(17,13,12,.98),rgba(8,10,10,.98));
  box-shadow:0 16px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease
}
.leo-category-card:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 50%,rgba(214,164,88,.13),transparent 34%);
  opacity:.8;
  pointer-events:none
}
.leo-category-card:hover,.leo-category-card.is-active {
  transform:translateY(-4px);
  border-color:rgba(214,164,88,.72);
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 0 1px rgba(214,164,88,.08)
}
.leo-category-card.is-active {
  background:linear-gradient(135deg,rgba(29,21,14,.98),rgba(8,11,10,.98))
}
.leo-category-copy {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:5px
}
.leo-category-copy small {
  font-size:10px;
  letter-spacing:2px;
  color:#c9a15f;
  font-family:Arial,sans-serif
}
.leo-category-copy strong {
  font-family:var(--leo-royal-font,Georgia,serif);
  font-size:29px;
  font-weight:600;
  letter-spacing:.4px;
  color:#f1d39d
}
.leo-category-copy em {
  font-style:normal;
  font-size:13px;
  color:#a9a09a;
  letter-spacing:.3px
}
.leo-category-arrow {
  position:relative;
  z-index:2;
  width:30px;
  height:30px;
  border:1px solid rgba(214,164,88,.45);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#e5bf79;
  font-size:18px;
  transition:transform .3s ease,background .3s ease
}
.leo-category-card:hover .leo-category-arrow,.leo-category-card.is-active .leo-category-arrow {
  transform:translateX(3px);
  background:rgba(214,164,88,.1)
}
.leo-category-bottle {
  position:relative;
  z-index:2;
  width:84px;
  height:118px;
  margin:auto;
  display:block;
  border-radius:18px 18px 23px 23px;
  box-shadow:0 18px 28px rgba(0,0,0,.45),inset 7px 0 13px rgba(255,255,255,.11),inset -7px 0 13px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.16);
  transform:perspective(450px) rotateY(-8deg);
  transition:transform .35s ease,filter .35s ease
}
.leo-category-card:hover .leo-category-bottle,.leo-category-card.is-active .leo-category-bottle {
  transform:perspective(450px) rotateY(-3deg) translateY(-5px) rotate(-1deg);
  filter:brightness(1.08)
}
.leo-category-bottle:before {
  content:"";
  position:absolute;
  width:35px;
  height:22px;
  top:-19px;
  left:50%;
  transform:translateX(-50%);
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(90deg,#111,#777,#111);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 -4px 8px rgba(0,0,0,.3)
}
.leo-category-bottle:after {
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  width:54px;
  height:34px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(226,195,135,.6);
  border-radius:5px;
  background:rgba(0,0,0,.25);
  box-shadow:inset 0 0 12px rgba(255,255,255,.04)
}
.leo-category-bottle i {
  position:absolute;
  left:50%;
  top:48%;
  width:1px;
  height:35px;
  background:rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
  z-index:2
}
.leo-category-bottle b {
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:2px;
  color:#e8c986;
  z-index:3;
  font-weight:500
}
.bottle-best {
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible
}
.bottle-best:before,.bottle-best:after,.bottle-best i,.bottle-best b {
  display:none
}
.bestseller-bottle-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
  transition:transform .35s ease,filter .35s ease
}
.leo-category-card:hover .bottle-best .bestseller-bottle-image,.leo-category-card.is-active .bottle-best .bestseller-bottle-image {
  transform:translateY(-5px) rotate(-1deg);
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.32)) brightness(1.04)
}
.bottle-men {
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible
}
.bottle-men:before,.bottle-men:after,.bottle-men i,.bottle-men b {
  display:none
}
.mens-bottle-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
  transition:transform .35s ease,filter .35s ease
}
.leo-category-card:hover .bottle-men .mens-bottle-image,.leo-category-card.is-active .bottle-men .mens-bottle-image {
  transform:translateY(-5px) rotate(-1deg);
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.32)) brightness(1.04)
}
.bottle-women {
  width:84px;
  height:118px;
  margin:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:block
}
.bottle-women:before,.bottle-women:after,.bottle-women i,.bottle-women b {
  display:none
}
.womens-bottle-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
  transition:transform .35s ease,filter .35s ease
}
.leo-category-card:hover .bottle-women .womens-bottle-image,.leo-category-card.is-active .bottle-women .womens-bottle-image {
  transform:translateY(-5px) rotate(-1deg);
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.32)) brightness(1.04)
}
.bottle-celebrity {
  background:linear-gradient(135deg,#080808 0%,#171717 42%,#6f5424 100%);
  border-radius:13px 13px 20px 20px
}
.bottle-celebrity {
  width:84px;
  height:118px;
  margin:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:block
}
.bottle-celebrity:before,.bottle-celebrity:after,.bottle-celebrity i,.bottle-celebrity b {
  display:none
}
.celebrity-bottle-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
  transition:transform .35s ease,filter .35s ease
}
.leo-category-card:hover .bottle-celebrity .celebrity-bottle-image,.leo-category-card.is-active .bottle-celebrity .celebrity-bottle-image {
  transform:translateY(-5px) rotate(-1deg);
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.32)) brightness(1.04)
}
.leo-category-results {
  margin-top:36px;
  padding:28px;
  border-radius:30px;
  border:1px solid rgba(214,164,88,.22);
  background:linear-gradient(145deg,rgba(17,12,11,.82),rgba(7,9,9,.92));
  box-shadow:0 22px 65px rgba(0,0,0,.2);
  scroll-margin-top:90px
}
.leo-category-results-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px
}
.leo-category-results-head h3 {
  margin:5px 0 0;
  font-family:var(--leo-royal-font,Georgia,serif);
  font-size:clamp(27px,3vw,42px);
  font-weight:500;
  color:#f0d4a3
}
.leo-category-count {
  color:#b9a994;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap
}
.leo-category-products {
  margin-top:0
}
.leo-category-products .product {
  min-width:0
}
@media(max-width:900px) {
  .leo-category-grid {
    grid-template-columns:1fr
  }
  .leo-category-card {
    min-height:175px
  }
  .leo-category-results {
    padding:20px
  }
}
@media(max-width:600px) {
  .leo-category-grid {
    gap:12px;
    margin-top:24px
  }
  .leo-category-card {
    grid-template-columns:82px 1fr 28px;
    gap:12px;
    padding:17px 14px;
    min-height:145px;
    border-radius:20px
  }
  .leo-category-bottle {
    width:62px;
    height:90px;
    border-radius:14px 14px 18px 18px
  }
  .leo-category-bottle:before {
    width:28px;
    height:17px;
    top:-15px
  }
  .leo-category-bottle:after {
    width:42px;
    height:28px
  }
  .leo-category-bottle b {
    font-size:8px;
    letter-spacing:1.5px
  }
  .leo-category-copy strong {
    font-size:23px
  }
  .leo-category-copy em {
    font-size:11px
  }
  .leo-category-copy small {
    font-size:8px;
    letter-spacing:1.5px
  }
  .leo-category-results {
    margin-top:24px;
    border-radius:22px;
    padding:15px
  }
  .leo-category-results-head {
    align-items:flex-start;
    margin-bottom:16px
  }
  .leo-category-results-head h3 {
    font-size:27px
  }
  .leo-category-count {
    font-size:9px;
    letter-spacing:1px;
    margin-top:5px
  }
}
/* Curated category cards navigate to a dedicated collection page. */
a.leo-category-card {
   text-decoration:none;
   
}
a.leo-category-card:visited {
   color:inherit;
   
}
/* Darker typography for the content below the WHY LEO cards. */
#discover .section-head h2,
#collection .section-head h2,
#contact .section-head h2,
#reviews .section-head h2,
.cta h2 {
    color:#2d1b16 !important;
}
#discover .section-head p,
#collection .section-head p,
#contact .section-head p,
#reviews .section-head p,
.cta p {
    color:#4f3b32 !important;
}
#discover .section-head .tag,
#collection .section-head .tag,
#contact .section-head .tag,
#reviews .section-head .tag {
    color:#8f4a18 !important;
}
#collection .product-info p,
#collection .product-info .product-brand,
#contact .contact-card p,
#contact .contact-card a,
#reviews .review-card p {
    color:#4f3b32 !important;
}
/* Extra contrast: darker typography below the WHY LEO / promise cards. */
.leo-discovery-section .section-head h2,
#collection .section-head h2,
#contact .section-head h2,
#reviews .section-head h2,
.leo-discovery-section .section-head p,
#collection .section-head p,
#contact .section-head p,
#reviews .section-head p {
    color:#2b1913 !important;
    text-shadow:none !important;
}
.leo-discovery-section .section-head .tag,
#collection .section-head .tag,
#contact .section-head .tag,
#reviews .section-head .tag {
    color:#7a3d1c !important;
}
.about-promise strong {
    color:#4a2a1d !important;
    text-shadow:none !important;
}
.about-promise p {
    color:#5b4034 !important;
    text-shadow:none !important;
}
.about-promise .promise-icon {
    color:#7a3d1c !important;
}
.about-story-card h3,
.about-story-card p {
    color:#3b241b !important;
    text-shadow:none !important;
}
.about-story-card .about-kicker {
    color:#7a3d1c !important;
}
.leo-about-section .section-head>p {
    color:#4f382d !important;
    text-shadow:none !important;
}
/* ============================================================
   FINAL USER REQUEST — NEW HERO VIDEO + EDGE-TO-EDGE MOBILE
   ============================================================ */
@media (max-width: 600px) {
    .hero-art {
        width:100vw!important;
        margin-left:calc((100% - 100vw)/2)!important;
        margin-right:calc((100% - 100vw)/2)!important;
        min-height:0!important;
        margin-top:0!important;
        padding:0!important;
        overflow:visible!important;
      
  }
    .hero-video-frame {
        width:100vw!important;
        max-width:none!important;
        height:auto!important;
        aspect-ratio:1080 / 1920!important;
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        animation:none!important;
        overflow:hidden!important;
      
  }
    .hero-video-frame::before,
    .hero-video-frame::after {
        display:none!important;
      
  }
    .hero-video-inner {
        width:100%!important;
        height:100%!important;
        border-radius:0!important;
        overflow:hidden!important;
      
  }
    .hero-video {
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
        border-radius:0!important;
      
  }
    .navbar {
        position:fixed!important;
        top:8px!important;
        left:50%!important;
        transform:translateX(-50%)!important;
        z-index:10000!important;
      
  }
}
/* FINAL MOBILE HERO OVERLAY FIX — video starts at the top so the fixed
   navigation overlays it with no gap. */
@media (max-width:600px) {
    .hero {
        padding-top:0!important;
        margin-top:0!important;
      
  }
    .hero-art {
        margin-top:0!important;
      
  }
    .navbar {
        position:fixed!important;
        top:8px!important;
        z-index:10000!important;
      
  }
}
/* FINAL MOBILE EDGE-TO-EDGE HERO — force the video to the viewport edges. */
@media (max-width:600px) {
    .hero-art {
        position:relative!important;
        left:50%!important;
        width:100vw!important;
        margin-left:0!important;
        margin-right:0!important;
        transform:translateX(-50%)!important;
        padding:0!important;
      
  }
    .hero-video-frame {
        position:relative!important;
        left:0!important;
        width:100vw!important;
        max-width:100vw!important;
        margin:0!important;
      
  }
}
/* ============================================================
   HARD MOBILE EDGE FIX — HERO VIDEO MUST TOUCH VIEWPORT EDGES
   ============================================================ */
@media (max-width: 600px) {
    html, body  {
     overflow-x:hidden!important;
     
  }
    .hero.container {
        width:calc(100% - 18px)!important;
        max-width:none!important;
        padding-left:0!important;
        padding-right:0!important;
      
  }
    .hero-art {
        position:relative!important;
        width:100vw!important;
        min-width:100vw!important;
        max-width:100vw!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:0!important;
        left:auto!important;
        right:auto!important;
        transform:none!important;
        padding:0!important;
        border:0!important;
        box-sizing:border-box!important;
      
  }
    .hero-video-frame {
        position:relative!important;
        display:block!important;
        width:100vw!important;
        min-width:100vw!important;
        max-width:100vw!important;
        margin:0!important;
        left:0!important;
        right:auto!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        background:transparent!important;
        transform:none!important;
      
  }
    .hero-video-inner,
    .hero-video {
        width:100%!important;
        min-width:100%!important;
        max-width:none!important;
        border-radius:0!important;
      
  }
    .hero-video-frame::before,
    .hero-video-frame::after {
    display:none!important;
  }
}
/* =========================================================
   HERO VIDEO — TRUE EDGE-TO-EDGE FIX
   The video now fills the complete hero frame with no empty
   strip on the left or right. The outer frame remains visible.
   ========================================================= */
.hero-video-frame {
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding:0!important;
}
.hero-video-inner {
    width:100%!important;
    height:100%!important;
    border-radius:inherit!important;
    overflow:hidden!important;
    box-shadow:inset 0 0 0 2px rgba(255,226,146,.58);
}
.hero-video-frame::before {
    inset:0!important;
    border-radius:inherit!important;
    z-index:6!important;
}
.hero-video-frame::after {
    z-index:7!important;
}
.hero-video,
.hero-starfall,
.hero-video-shade {
    width:100%!important;
    height:100%!important;
}
@media(max-width:900px) {
    .hero-video-frame {
    width:100%!important;
    padding:0!important
  }
}
@media(max-width:560px) {
    .hero-video-frame {
    width:100%!important;
    padding:0!important
  }
}
/* Clickable location + Instagram links */
.leo-location-link, .leo-footer-location-link  {
   color: inherit;
   text-decoration: none;
   
}
.leo-location-link:hover, .leo-footer-location-link:hover  {
   text-decoration: underline;
   
}
.instagram-contact-card a  {
   color: inherit;
   text-decoration: none;
   font-weight: 700;
   
}
.instagram-contact-card a:hover  {
   text-decoration: underline;
   
}
/* LEO review carousel — realistic, fluid motion refinement */
#reviews .reviews-grid {
    position:relative;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:18px !important;
    overflow:hidden !important;
    padding:18px 0 28px !important;
    scroll-snap-type:none !important;
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch;
    perspective:1200px;
    touch-action:pan-y;
}
#reviews .review-card {
    flex:0 0 min(360px,82vw) !important;
    margin:0 !important;
    position:relative;
    opacity:.42;
    transform:translate3d(0,10px,-35px) scale(.90) rotateY(0deg);
    filter:blur(1.2px) saturate(.82);
    transform-origin:center center;
    will-change:transform,opacity,filter,box-shadow;
    transition:
      transform 900ms cubic-bezier(.22,1,.36,1),
      opacity 700ms ease,
      filter 700ms ease,
      box-shadow 900ms cubic-bezier(.22,1,.36,1);
    box-shadow:0 8px 22px rgba(55,35,15,.06);
}
#reviews .review-card.is-active {
    opacity:1;
    transform:translate3d(0,0,35px) scale(1) rotateY(0deg);
    filter:none;
    z-index:3;
    box-shadow:0 22px 50px rgba(55,35,15,.16),0 0 0 1px rgba(196,139,71,.16);
}
#reviews .review-card.is-prev {
    opacity:.64;
    transform:translate3d(-6px,5px,0) scale(.94) rotateY(7deg);
    filter:blur(.35px) saturate(.92);
    z-index:2;
}
#reviews .review-card.is-next {
    opacity:.64;
    transform:translate3d(6px,5px,0) scale(.94) rotateY(-7deg);
    filter:blur(.35px) saturate(.92);
    z-index:2;
}
#reviews .review-card.is-entering {
    animation:leoReviewSettle 900ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes leoReviewSettle {
    0% {
    opacity:.25;
    transform:translate3d(0,18px,-90px) scale(.84) rotateY(0deg);
    filter:blur(3px)
  }
    55% {
    opacity:.92;
    transform:translate3d(0,-2px,20px) scale(1.015) rotateY(0deg);
    filter:blur(0)
  }
    100% {
    opacity:1;
    transform:translate3d(0,0,35px) scale(1) rotateY(0deg);
    filter:none
  }
}
#reviews .review-carousel-controls {
  margin-top:4px
}
#reviews .review-arrow {
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease
}
#reviews .review-arrow:hover {
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 20px rgba(55,35,15,.10)
}
#reviews .review-dot {
  transition:width .3s ease,background .3s ease,transform .3s ease,box-shadow .3s ease
}
#reviews .review-dot.active {
  transform:scale(1.02);
  box-shadow:0 0 12px rgba(214,177,90,.24)
}
@media(max-width:700px) {
    #reviews .reviews-grid {
    gap:12px !important;
    padding-left:calc((100% - min(82vw,360px))/2) !important;
    padding-right:calc((100% - min(82vw,360px))/2) !important
  }
    #reviews .review-card {
    flex-basis:82vw !important
  }
    #reviews .review-card.is-prev {
    transform:translate3d(-3px,5px,0) scale(.94) rotateY(4deg)
  }
    #reviews .review-card.is-next {
    transform:translate3d(3px,5px,0) scale(.94) rotateY(-4deg)
  }
}
@media(prefers-reduced-motion:reduce) {
    #reviews .review-card,#reviews .review-arrow,#reviews .review-dot {
    transition:none !important;
    animation:none !important
  }
    #reviews .reviews-grid {
    scroll-behavior:auto !important
  }
}
/* Mobile review flow: three cards stacked vertically with fast, natural directional motion. */
@media (max-width:700px) {
    #reviews .reviews-grid {
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        padding:14px 0 22px !important;
        min-height:520px;
        overflow:hidden !important;
        perspective:1000px;
        transform-style:preserve-3d;
      
  }
    #reviews .review-card {
        display:none !important;
        width:100% !important;
        flex:0 0 auto !important;
        margin:0 !important;
        opacity:0;
        transform:translate3d(0,0,0) scale(.985);
        filter:none;
        transition:transform .68s cubic-bezier(.16,1,.3,1),opacity .48s ease,box-shadow .68s ease;
        will-change:transform,opacity;
      
  }
    #reviews .review-card.mobile-review-visible {
        display:block !important;
        opacity:1;
        transform:translate3d(0,0,0) scale(1);
        box-shadow:0 16px 34px rgba(55,35,15,.13),0 0 0 1px rgba(196,139,71,.10);
      
  }
    #reviews .review-card.mobile-review-enter-right {
        animation:leoMobileReviewFromRight .90s cubic-bezier(.22,1,.36,1) both;
      
  }
    #reviews .review-card.mobile-review-enter-left {
        animation:leoMobileReviewFromLeft .90s cubic-bezier(.22,1,.36,1) both;
      
  }
    /* Mobile flow: RIGHT -> LEFT -> RIGHT */
    #reviews .review-card:nth-child(1).mobile-review-enter-right {
    animation-delay:0ms
  }
    #reviews .review-card:nth-child(2).mobile-review-enter-left {
    animation-delay:120ms
  }
    #reviews .review-card:nth-child(3).mobile-review-enter-right {
    animation-delay:240ms
  }
    @keyframes leoMobileReviewFromRight {
        0% {
      opacity:0;
      transform:translate3d(110%,0,0) scale(.94) rotateY(-8deg)
    }
        55% {
      opacity:1;
      transform:translate3d(-3%,0,18px) scale(1.005) rotateY(1deg)
    }
        100% {
      opacity:1;
      transform:translate3d(0,0,0) scale(1) rotateY(0)
    }
      
  }
    @keyframes leoMobileReviewFromLeft {
        0% {
      opacity:0;
      transform:translate3d(-110%,0,0) scale(.94) rotateY(8deg)
    }
        55% {
      opacity:1;
      transform:translate3d(3%,0,18px) scale(1.005) rotateY(-1deg)
    }
        100% {
      opacity:1;
      transform:translate3d(0,0,0) scale(1) rotateY(0)
    }
      
  }
}
@media(prefers-reduced-motion:reduce) {
    #reviews .review-card.mobile-review-enter-right,
    #reviews .review-card.mobile-review-enter-left {
    animation:none !important
  }
}


/* Final collection-card polish: visual only. */
.leo-category-card {
  isolation:isolate;
  background-color:#17110f;
  background-blend-mode:normal;
}
.leo-category-card:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 34%,transparent 70%,rgba(0,0,0,.18));
  opacity:.55;
  pointer-events:none;
  z-index:1;
  transition:opacity .3s ease;
}
.leo-category-card:hover:after,
.leo-category-card.is-active:after {
  opacity:.82;
}
.leo-category-card .leo-category-copy strong {
  text-shadow:0 3px 18px rgba(0,0,0,.82),0 1px 2px rgba(0,0,0,.65) !important;
}
.leo-category-card .leo-category-copy em {
  text-shadow:0 2px 10px rgba(0,0,0,.78) !important;
}
.leo-category-card .leo-category-arrow {
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
.leo-category-card:hover .leo-category-arrow,
.leo-category-card.is-active .leo-category-arrow {
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 1px rgba(214,164,88,.10),inset 0 1px rgba(255,255,255,.12);
}
@media (max-width:700px) {
  #reviews .reviews-grid {
    touch-action:pan-y !important;
    overscroll-behavior-x:contain;
    -webkit-user-select:none;
    user-select:none;
  }
  #reviews .review-card {
    touch-action:pan-y;
  }
  .leo-category-grid {
    gap:14px;
  }
  .leo-category-card {
    min-height:176px;
    border-radius:24px;
    padding:18px 18px;
  }
  .leo-category-copy strong {
    font-size:27px;
  }
}

/* FINAL: dark, readable product size selector text */
.size-select,
.detail-size-select {
  color: #3b2d27 !important;
  -webkit-text-fill-color: #3b2d27 !important;
  font-weight: 600 !important;
}
.size-select option,
.detail-size-select option {
  color: #3b2d27 !important;
  background: #f6eee7 !important;
}

/* FINAL: mobile reviews must remain touchable and vertically scrollable */
@media (max-width: 700px) {
  #reviews .reviews-grid {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
  }
  #reviews .review-card {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }
}


/* FINAL VISIBILITY POLISH: keep the cursor glow behind review content. */
#leoCursorEffect {
  z-index:2 !important;
}
#leoCursorEffect .leo-cursor-core {
  width:10px !important;
  height:10px !important;
  margin:-5px 0 0 -5px !important;
  border-radius:50% !important;
  background:#d6a24f !important;
  opacity:.82 !important;
  box-shadow:0 0 5px rgba(214,162,79,.65),0 0 12px rgba(214,162,79,.25) !important;
}
#leoCursorEffect .leo-cursor-trail {
  border-radius:50% !important;
  background:rgba(214,162,79,.42) !important;
  opacity:.45 !important;
  box-shadow:0 0 8px rgba(214,162,79,.24) !important;
}
#reviews .review-card,
#reviews .review-card * {
  position:relative;
}

/* FINAL SIZE SELECTOR VISIBILITY — dark text on every product card/detail page. */
select.size-select,
select.detail-size-select {
  color:#3b2d27 !important;
  -webkit-text-fill-color:#3b2d27 !important;
  background-color:#f6eee7 !important;
  color-scheme:light !important;
  text-shadow:none !important;
  font-weight:600 !important;
}
select.size-select option,
select.detail-size-select option {
  color:#3b2d27 !important;
  -webkit-text-fill-color:#3b2d27 !important;
  background-color:#f6eee7 !important;
}

/* =========================================================
   FINAL REVIEW CARDS — MATCH THE WHY LEO CARD MOTION
   ========================================================= */
#reviews {
  position: relative;
  z-index: 3;
}

#reviews .reviews-grid {
  position: relative !important;
  display: block !important;
  height: 430px !important;
  min-height: 0 !important;
  margin: 28px 0 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  perspective: 1200px;
  touch-action: pan-y pinch-zoom !important;
}

#reviews .review-card {
  position: absolute !important;
  left: 50%;
  top: 50%;
  width: min(760px, calc(100% - 80px)) !important;
  min-height: 300px;
  box-sizing: border-box;
  padding: 32px 36px !important;
  margin: 0 !important;
  border: 1px solid rgba(196,139,71,.38) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #fffaf8, #f7e9ef) !important;
  box-shadow: 0 18px 50px rgba(100,55,75,.13), inset 0 1px 0 rgba(255,255,255,.92) !important;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.86);
  filter: blur(1px);
  transition: left .55s cubic-bezier(.22,1,.36,1),
              opacity .45s ease,
              transform .55s cubic-bezier(.22,1,.36,1),
              filter .45s ease,
              box-shadow .55s ease;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  will-change: transform, opacity, left;
}

#reviews .review-card::before {
  content: '“';
  position: absolute;
  right: 28px;
  top: 8px;
  font: 88px/1 Georgia, serif;
  color: rgba(140,84,111,.12);
  pointer-events: none;
}

#reviews .review-card.is-active {
  left: 50%;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  filter: none;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(100,55,75,.18),
              0 0 0 1px rgba(183,128,151,.14),
              inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#reviews .review-card.is-prev,
#reviews .review-card.is-next {
  opacity: .58;
  visibility: visible;
  filter: blur(.3px);
  z-index: 2;
  pointer-events: none;
}

#reviews .review-card.is-prev {
  left: calc(50% - min(43vw, 480px));
  transform: translate(-50%, -50%) scale(.90) rotateY(6deg);
}

#reviews .review-card.is-next {
  left: calc(50% + min(43vw, 480px));
  transform: translate(-50%, -50%) scale(.90) rotateY(-6deg);
}

#reviews .review-card.is-entering {
  animation: leoReviewCardEnter .75s cubic-bezier(.22,1,.36,1) both;
}

@keyframes leoReviewCardEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82) translateY(22px);
    filter: blur(4px);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02) translateY(-2px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
}

#reviews .review-person {
  position: relative;
  z-index: 2;
  gap: 14px;
  margin-bottom: 24px;
}

#reviews .review-avatar {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c58a4c, #8b5270) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 7px 18px rgba(100,55,75,.16);
}

#reviews .review-person strong {
  color: #3b241b !important;
  font-size: 16px !important;
}

#reviews .review-person span {
  color: #7a5b50 !important;
  font-size: 11px !important;
}

#reviews .review-card p {
  position: relative;
  z-index: 2;
  color: #4b3842 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

/* Keep the decorative cursor circles behind review content. */
#leoCursorEffect {
  z-index: 0 !important;
}
#reviews,
#reviews .review-card,
#reviews .review-person,
#reviews .review-card p {
  isolation: isolate;
}

@media (max-width: 700px) {
  #reviews .reviews-grid {
    height: 560px !important;
    min-height: 560px !important;
    margin-top: 22px !important;
    padding: 8px 0 16px !important;
    overflow: hidden !important;
    touch-action: pan-y pinch-zoom !important;
  }

  #reviews .review-card {
    position: absolute !important;
    left: 50% !important;
    top: 50%;
    width: calc(100% - 28px) !important;
    min-height: 0;
    padding: 26px 22px !important;
    border-radius: 24px !important;
  }

  #reviews .review-card.is-prev,
  #reviews .review-card.is-next {
    left: 50% !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.92) !important;
  }

  #reviews .review-card.is-active {
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  #reviews .review-card.mobile-review-visible {
    display: block !important;
    visibility: visible;
    opacity: 1;
    position: absolute !important;
  }

  #reviews .review-card.mobile-review-visible.is-active {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  #reviews .review-card.mobile-review-enter-right,
  #reviews .review-card.mobile-review-enter-left {
    animation-duration: .78s !important;
  }

  #reviews .review-card.mobile-review-enter-right {
    animation-name: leoMobileReviewCardRight !important;
  }

  #reviews .review-card.mobile-review-enter-left {
    animation-name: leoMobileReviewCardLeft !important;
  }

  @keyframes leoMobileReviewCardRight {
    0% { opacity:0; transform:translate(-50%, -50%) translateX(85%) scale(.90) rotateY(-6deg); }
    60% { opacity:1; transform:translate(-50%, -50%) translateX(-2%) scale(1.01) rotateY(1deg); }
    100% { opacity:1; transform:translate(-50%, -50%) scale(1); }
  }

  @keyframes leoMobileReviewCardLeft {
    0% { opacity:0; transform:translate(-50%, -50%) translateX(-85%) scale(.90) rotateY(6deg); }
    60% { opacity:1; transform:translate(-50%, -50%) translateX(2%) scale(1.01) rotateY(-1deg); }
    100% { opacity:1; transform:translate(-50%, -50%) scale(1); }
  }

  #reviews .review-person {
    margin-bottom: 18px;
  }

  #reviews .review-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  #reviews .review-card p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }
}

@media (max-width: 390px) {
  #reviews .reviews-grid {
    height: 530px !important;
    min-height: 530px !important;
  }
  #reviews .review-card {
    width: calc(100% - 22px) !important;
    padding: 23px 18px !important;
  }
}

/* Review avatar cleanup: keep the initial inside one clean circle. */
#reviews .review-person > .review-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  transform: none !important;
}

#reviews .review-person > .review-avatar::before,
#reviews .review-person > .review-avatar::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 700px) {
  #reviews .review-person > .review-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
    font-size: 16px !important;
  }
}

/* FINAL CROSS-BROWSER SIZE SELECTOR FIX
   Keep 50 ML / 100 ML text dark in Chrome, Brave and other browsers. */
select.size-select,
select.detail-size-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color: #3b2d27 !important;
  -webkit-text-fill-color: #3b2d27 !important;
  background-color: #f6eee7 !important;
  color-scheme: light !important;
  forced-color-adjust: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
}

select.size-select option,
select.detail-size-select option,
select.size-select optgroup,
select.detail-size-select optgroup {
  color: #3b2d27 !important;
  -webkit-text-fill-color: #3b2d27 !important;
  background-color: #f6eee7 !important;
  color-scheme: light !important;
  forced-color-adjust: none !important;
  opacity: 1 !important;
}

select.size-select:focus,
select.detail-size-select:focus,
select.size-select:active,
select.detail-size-select:active {
  color: #3b2d27 !important;
  -webkit-text-fill-color: #3b2d27 !important;
  background-color: #f6eee7 !important;
}


/* ============================================================
   HERO BOTTLE — replaces only the homepage hero video.
   Uses the existing LEO bottle with the lion-face cap.
   ============================================================ */
.hero-bottle-frame {
    overflow: visible !important;
}
.hero-bottle-frame::after {
    display: none !important;
}
.hero-bottle-inner {
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.hero-bouncing-bottle {
    display: block;
    width: auto;
    max-width: 84%;
    height: auto;
    max-height: 86%;
    object-fit: contain;
    transform-origin: center bottom;
    animation: leoHeroBottleBounce 2.8s ease-in-out infinite;
    will-change: transform;
    filter: drop-shadow(0 26px 34px rgba(0,0,0,.28));
}
@keyframes leoHeroBottleBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-24px) scale(1.015); }
}
@media (max-width: 900px) {
    .hero-bouncing-bottle {
        max-width: 84%;
        max-height: 86%;
    }
}
@media (max-width: 600px) {
    .hero-bottle-frame,
    .hero-bottle-inner {
        overflow: visible !important;
    }
    .hero-bouncing-bottle {
        width: min(66vw, 300px);
        max-width: 66vw;
        max-height: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bouncing-bottle { animation: none; }
}



/* =========================================================
   CUSTOMER REVIEW WALL — CLEAN CONTINUOUS SCROLL
   Each review exists only once in the HTML. JavaScript recycles
   cards at the edge, so duplicate cards never sit behind each other.
   ========================================================= */
#reviews .review-summary { margin-bottom: 28px; }
#reviews .reviews-wall {
  width: 100%; display: grid; gap: 16px; margin: 28px 0 0; overflow: hidden;
}
#reviews .review-marquee {
  width: 100%; overflow: hidden; position: relative; padding: 2px 0;
}
#reviews .review-marquee::before,
#reviews .review-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 72px;
  z-index: 3; pointer-events: none;
}
#reviews .review-marquee::before {
  left: 0; background: linear-gradient(90deg, var(--bg, #fff) 0%, rgba(255,255,255,0) 100%);
}
#reviews .review-marquee::after {
  right: 0; background: linear-gradient(270deg, var(--bg, #fff) 0%, rgba(255,255,255,0) 100%);
}
#reviews .review-marquee-track { display: flex; width: max-content; will-change: transform; }
#reviews .review-marquee-group { display: flex; flex: 0 0 auto; gap: 16px; padding-right: 16px; }
#reviews .reviews-wall .review-card {
  position: relative !important; left: auto !important; top: auto !important;
  width: 380px !important; min-height: 124px !important; height: 124px !important;
  margin: 0 !important; padding: 16px 20px 14px !important; box-sizing: border-box;
  flex: 0 0 380px; display: block !important; visibility: visible !important;
  opacity: 1 !important; transform: none !important; filter: none !important;
  pointer-events: auto !important; overflow: hidden; border-radius: 14px !important;
  border: 1px solid rgba(110,70,60,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 24px rgba(70,40,35,.08) !important;
}
#reviews .reviews-wall .review-card::before {
  content: '★★★★★' !important; position: absolute !important; top: 15px !important; right: 17px !important;
  font: 700 14px/1 Arial,sans-serif !important; letter-spacing: 1px; color: #7d1e1e !important; opacity: 1 !important;
}
#reviews .reviews-wall .review-person { display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; padding-right: 100px; }
#reviews .reviews-wall .review-avatar { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; font-size: 15px !important; }
#reviews .reviews-wall .review-person strong { display: block; font-size: 14px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reviews .reviews-wall .review-person span:not(.review-avatar) { display: block; margin-top: 3px; font-size: 10px !important; }
#reviews .reviews-wall .review-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
#reviews .review-carousel-controls { display: none !important; }
@media (max-width:700px) {
  #reviews .reviews-wall { gap: 12px; }
  #reviews .review-marquee-group { gap: 12px; padding-right: 12px; }
  #reviews .reviews-wall .review-card { width:min(82vw,330px) !important; flex-basis:min(82vw,330px); min-height:116px !important; height:116px !important; padding:14px 16px 12px !important; }
  #reviews .reviews-wall .review-card::before { top:13px !important; right:14px !important; font-size:12px !important; }
  #reviews .review-marquee::before,#reviews .review-marquee::after { width:28px; }
}


/* Product photo cards: rectangular, with the supplied photo touching every media edge. */
.product {
  padding:0;
  border-radius:0;
  overflow:hidden;
}
.product-image {
  border-radius:0;
  border:0;
  margin:0;
  padding:0;
  width:100%;
  background:transparent;
}
.product-image::before { display:none; }
.product-image img.product-photo {
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  filter:none;
}
.product:hover .product-image img.product-photo { filter:none; }
.product-info { padding:16px 16px 0; }
.product-actions { padding:0 16px 16px; }

/* Product photo visibility fix: keep the supplied bottle photos fully visible in cards and on product pages. */
.product-image {
  position:relative;
  overflow:hidden;
}
.product-image img.product-photo {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  object-fit:cover !important;
  object-position:50% 70% !important;
  z-index:2 !important;
}
.product-detail-image {
  overflow:hidden;
}
.product-detail-image .product-photo {
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Final product photo framing fix: keep the complete bottle, including its cap, visible everywhere. */
.product-image img.product-photo {
  object-fit: contain !important;
  object-position: center center !important;
  transform-origin: center center;
}
.product-detail-image {
  width: 70% !important;
  height: 75% !important;
  overflow: visible !important;
}
.product-detail-image .product-photo {
  object-fit:contain !important;
  object-position: center center !important;
}
.product-detail-image {
  width:70% !important;
  height:75% !important;
  display:grid !important;
  place-items:center !important;
}
.product-detail-image .product-slides {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.product-detail-image .product-slides .product-slide {
  opacity:0 !important;
  visibility:hidden !important;
}
.product-detail-image .product-slides .product-slide.active {
  opacity:1 !important;
  visibility:visible !important;
}