/* Faithful responsive edition of Jhan's approved Mozaca hero artwork.
   Artwork is a visual layer; links and product choices are actual interactive DOM elements. */
.topline{display:none!important}
.header{position:fixed;top:10px;left:50%;width:min(1300px,calc(100% - 32px));border:1px solid #dfe9d6;border-radius:22px;transform:translate(-50%,-145%);transition:transform .4s cubic-bezier(.22,.8,.22,1),box-shadow .3s;box-shadow:0 15px 60px rgba(18,62,31,.13);pointer-events:none;z-index:45}
.header.is-scrolled{transform:translate(-50%,0);pointer-events:auto}
.header .nav{height:67px;width:calc(100% - 34px)}
.header .brand strong{font-size:32px}.header .brand small{font-size:8px;margin-top:4px}
.header .desktop-nav a{padding:22px 0}.header .desktop-nav a.is-active:after,.header .desktop-nav a:hover:after{bottom:11px}
.visual-hero{position:relative;width:100%;margin:0;padding:0;overflow:hidden;background:#f4f8e9;isolation:isolate;line-height:0}
.visual-hero-picture,.hero-art{display:block;width:100%;height:auto;max-width:none}
.hero-art{user-select:none;-webkit-user-select:none;pointer-events:none}
.hotspot{position:absolute;display:block;background:transparent;border:0;cursor:pointer;z-index:9;border-radius:18px;color:transparent;padding:0;transition:box-shadow .25s,background .25s,transform .25s}
.hotspot:hover{box-shadow:0 0 0 2px rgba(98,184,55,.24),0 0 24px rgba(136,223,56,.2);background:rgba(255,255,255,.055)}
.hotspot:active{transform:scale(.98)}
.hotspot:focus-visible{outline:3px solid #1b7a35;outline-offset:0;background:rgba(255,255,255,.25)}
.hotspot-home{left:20.9%;top:3.7%;width:5.4%;height:5%}.hotspot-products{left:27%;top:3.7%;width:7.5%;height:5%}.hotspot-about{left:34.6%;top:3.7%;width:7%;height:5%}.hotspot-benefits{left:41.7%;top:3.7%;width:7.9%;height:5%}.hotspot-contact{left:50%;top:3.7%;width:7%;height:5%}
.hotspot-search{left:65.5%;top:2.9%;width:18.8%;height:6.7%;border-radius:36px}.hotspot-bag{left:90.3%;top:2%;width:8.1%;height:7.6%}
.hotspot-mobile-menu{display:none}
.hotspot-shop{left:4.2%;top:68.2%;width:18.4%;height:8.3%;border-radius:40px}
.hotspot-whatsapp{left:22.8%;top:68.2%;width:16.2%;height:8.3%;border-radius:40px}
.hero-pick-one{left:79.1%;top:15.5%;width:17.8%;height:16.1%}
.hero-pick-two{left:79.1%;top:32.2%;width:17.8%;height:16.2%}
.hero-pick-three{left:79.1%;top:49.1%;width:17.8%;height:16.7%}
.hero-pick.is-active{border:2px solid rgba(92,179,56,.7);box-shadow:0 0 25px rgba(129,239,69,.17);border-radius:20px}
.hero-carousel-control #heroPrev{right:5.7%;top:72.1%;width:3.1%;height:6%}
.hero-carousel-control #heroNext{right:3%;top:72.1%;width:3.1%;height:6%}
.hero-truth-bar{position:absolute;z-index:7;left:13.5%;bottom:5%;width:71.1%;height:9.6%;background:rgba(252,255,248,.97);border:1px solid #ecf3e5;box-shadow:0 9px 30px rgba(14,48,20,.16);border-radius:21px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;padding:4px 3%;line-height:1.35;backdrop-filter:blur(12px)}
.hero-truth-bar>div{display:flex;align-items:center;gap:12px;justify-content:center;min-width:0}
.hero-truth-bar>div:not(:first-child){border-left:1px solid #d7e3d4}
.hero-truth-bar .ico{color:#236b35;width:26px;height:26px}
.hero-truth-bar strong,.hero-truth-bar small{display:block;white-space:nowrap}.hero-truth-bar strong{font-size:clamp(10px,1.2vw,16px);font-weight:800;color:#1f4932}.hero-truth-bar small{font-size:clamp(8px,.9vw,12px);color:#627866}
.hero-feature{position:absolute;z-index:8;left:43.6%;top:16%;width:28%;height:66%;pointer-events:none;--accent:#22834a}
.hero-feature-panel{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(20px) scale(.94);transition:transform .52s cubic-bezier(.2,.8,.2,1),opacity .45s,visibility .45s;background:radial-gradient(ellipse,#fafff8 21%,rgba(244,255,235,.96) 49%,rgba(240,252,231,.77) 64%,rgba(242,250,227,0) 74%);border-radius:44%}
.hero-feature:not([data-current="prosmaz"]) .hero-feature-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.hero-feature-panel img{height:78%;width:85%;object-fit:contain;filter:drop-shadow(18px 22px 18px rgba(18,49,17,.2));animation:heroBottleFloat 5.5s ease-in-out infinite}
.feature-text{max-width:90%;align-self:center;text-align:center;line-height:1.3;border:1px solid #f3f9eb;background:#fffffff0;box-shadow:0 8px 22px #24522a30;border-radius:18px;padding:6px 20px;transform:translateY(-20%)}
.feature-text span{display:block;font-size:9px;letter-spacing:.15em;color:#658966;font-weight:700}.feature-text strong{display:block;font-size:17px;color:#265b38}
.hero-shine{position:absolute;inset:10% 19% 12% 35%;background:radial-gradient(ellipse at center,rgba(245,255,170,.18),transparent 67%);pointer-events:none;mix-blend-mode:screen;animation:heroShimmer 7s ease-in-out infinite}
.leaf-particle{position:absolute;z-index:4;pointer-events:none;color:#77ad37;text-shadow:1px 3px 3px #438d2225;filter:blur(.5px);opacity:.72;line-height:1;animation:heroLeafSway 7s ease-in-out infinite}
.particle-a{left:43%;top:10%;font-size:30px}.particle-b{left:93%;top:13%;font-size:35px;animation-delay:-3s}.particle-c{left:50%;top:67%;font-size:18px;animation-delay:-1.2s;color:#faffdb}
.hero-tap-hint{display:none}
.hero-menu-panel{display:none}
@keyframes heroBottleFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes heroLeafSway{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(12px,-9px) rotate(10deg)}}
@keyframes heroShimmer{0%,100%{opacity:.35}50%{opacity:.82}}
/* Midrange desktop: artwork always scales proportionally, hotspots scale with it. */
@media (max-width:1150px){.header .nav{gap:15px}.header .desktop-nav{gap:14px}.header .nav-contact{display:none}.hero-truth-bar{border-radius:14px}.hero-truth-bar .ico{width:20px;height:20px}.hero-truth-bar>div{gap:5px}}
/* Approved mobile design takes over below 700px. Hotspots follow its own separate geometry. */
@media(max-width:700px){
 .header{width:calc(100% - 16px);top:6px;border-radius:13px}.header .nav{height:58px}
 .hotspot-home,.hotspot-products,.hotspot-about,.hotspot-benefits,.hotspot-contact{display:none}
 .hotspot-search{left:55%;top:1%;width:12%;height:7%}
 .hotspot-bag{left:69.8%;top:1%;width:11%;height:7%}
 .hotspot-mobile-menu{display:block;left:82%;top:1%;width:13%;height:7%}
 .hotspot-shop{left:23%;top:82%;width:53%;height:5.7%}
 .hotspot-whatsapp{left:23%;top:87.7%;width:53%;height:5.4%}
 .hero-pick-one{left:4%;top:72.3%;width:31%;height:9.4%}
 .hero-pick-two{left:35%;top:72.3%;width:30%;height:9.4%}
 .hero-pick-three{left:65%;top:72.3%;width:31%;height:9.4%}
 .hero-pick.is-active{border-radius:13px;border-width:2px}
 .hero-carousel-control{display:none}
 .hero-truth-bar{display:none}
 .hero-feature{left:19%;top:35%;width:64%;height:38%}
 .hero-feature-panel{background:radial-gradient(ellipse,rgba(253,255,242,.99) 18%,rgba(247,255,237,.98) 47%,rgba(244,255,230,.79) 66%,transparent 74%)}
 .hero-feature-panel img{width:80%;height:82%;filter:drop-shadow(9px 14px 9px #27532340)}
 .feature-text{padding:3px 14px;transform:translateY(-30%)}.feature-text span{font-size:7px}.feature-text strong{font-size:12px}
 .particle-a{left:74%;top:8%;font-size:22px}.particle-b{left:14%;top:47%;font-size:22px}.particle-c{left:73%;top:82%;font-size:11px}
 .hero-shine{inset:35% 12% 20% 10%}
 .hero-menu-panel{position:absolute;display:flex;flex-direction:column;top:7%;right:5%;width:min(240px,65%);z-index:30;line-height:1.45;background:rgba(255,255,255,.97);box-shadow:0 12px 38px #254b2954;border:1px solid #d7e8c9;border-radius:16px;padding:9px 15px;backdrop-filter:blur(13px)}
 .hero-menu-panel[hidden]{display:none}
 .hero-menu-panel a{padding:10px 5px;font-weight:800;color:#1d5831;border-bottom:1px solid #ebeee5;font-size:13px}.hero-menu-panel a:last-child{border-bottom:0}
 .hero-tap-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.visual-hero .leaf-particle,.visual-hero .hero-shine,.visual-hero .hero-feature-panel img{animation:none!important}.visual-hero .hero-feature-panel{transition:none!important}}
/* Hero replacement image: conceal the previous photographic packshot during a selection,
   rather than placing an opaque product directly on top of a second bottle. */
@media(min-width:701px){
 .hero-feature{left:41.7%;top:9.2%;width:31.7%;height:70%}
 .hero-feature-panel{background:radial-gradient(ellipse at 50% 50%,#f2f9e8 0%,#f2f9e8 52%,rgba(240,249,227,.99) 66%,rgba(236,247,218,.94) 74%,rgba(236,247,218,.04) 92%)}
 .hero-feature-panel img{height:77%;width:76%}
}
@media(max-width:700px){
 .hero-feature-panel{background:radial-gradient(ellipse at 50% 50%,#eef8e6 0%,#edf8e3 51%,rgba(236,247,221,.98) 69%,rgba(236,247,221,0) 91%)}
}

/* Keep the artwork pixel-faithful; a product choice opens its accessible enlarged detail panel. */
.visual-hero .hero-feature{display:none!important}
.visual-hero .hero-pick.is-active{border-color:transparent;box-shadow:none}
.visual-hero .hero-pick:focus-visible{border:3px solid #64a42d}
/* Keep every section visible even when an observer or a browser animation is delayed. */
.reveal{opacity:1!important;transform:none!important}