/* MOZACA GROUP V8 — matched to approved visual mockup. The image is the right-hand photographic scene from the approved design, not a screenshot covering working UI. */
:root { --v8-deep:#0d3526; --v8-green:#167923; }
.topline {display:none}
.v8-header {background:rgba(255,255,255,.96);border-color:rgba(8,59,25,.08)}
.v8-header .nav {height:86px;gap:21px;width:min(1330px,calc(100% - 74px))}
.v8-header .brand {color:#0b6422;align-items:flex-start;min-width:112px}
.v8-header .brand strong {font-size:41px;letter-spacing:-4.5px}
.v8-header .brand small {font-size:9px;letter-spacing:2.25px;padding-left:0;margin-top:6px}
.v8-header .brand-leaf{color:#76ba4b}
.v8-header .desktop-nav {gap:22px;margin:0;flex:0 0 auto}
.v8-header .desktop-nav a {font-size:12.5px;color:#253f30;padding:30px 0;font-weight:700}
.v8-header .desktop-nav a.is-active:after,.v8-header .desktop-nav a:hover:after {background:#277e2a;bottom:22px}
.v8-nav-search {flex:1 1 205px;max-width:305px;min-width:155px;height:47px;border-radius:999px;display:flex;align-items:center;gap:11px;background:rgba(245,248,245,.96);padding:0 18px;color:#0c2f21;border:1px solid #e4ebe3;transition:box-shadow .2s,border-color .2s}
.v8-nav-search:focus-within{border-color:#72b26a;box-shadow:0 0 0 3px #80c37922}
.v8-nav-search .ico{width:21px;height:21px}
.v8-nav-search input{min-width:0;width:100%;outline:0;background:none;border:0;color:#1a3923;font-size:13px}
.v8-nav-search input::placeholder{color:#8a948c}
.v8-header .nav-right {gap:9px;flex:none}
.v8-nav-distributor{border:1px solid #187e2a;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.97);display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px;color:#146925;font-size:12px;font-weight:800;transition:background .2s,transform .2s}
.v8-nav-distributor:hover{background:#e8f6e8;transform:translateY(-1px)}
.v8-nav-distributor .ico {width:14px;height:14px}
.v8-header .bag-button {padding:7px 3px;gap:7px}
.v8-header .bag-word{font-size:0;display:none}
.v8-header .bag-button .ico{width:26px;height:26px}
.v8-header .bag-count{background:#117a20;color:white;border-radius:50%;height:22px;min-width:22px;font-size:12px}
/* Banner body — the photographic scene is clipped only on the right; all left-side copy is accessible HTML */
.hero.hero-v8{background:linear-gradient(103deg,#f9fcf9 0%,#fbfcf9 29%,#f2f6ed 42%,#e8efdf 100%);position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #ddebd9}
.hero.hero-v8::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle at 1% 7%,#b6d5962b,transparent 18%),radial-gradient(ellipse at 19% 97%,#80bc4d24,transparent 29%)}
.hero-v8 .hero-v8-grid{width:min(1330px,calc(100% - 74px));display:grid;grid-template-columns:47% 53%;min-height:558px;align-items:center;position:relative;padding:0;isolation:isolate}
.hero-v8 .hero-v8-copy{position:relative;z-index:2;max-width:610px;padding:35px 0 38px 6px;animation:v8Rise .9s both ease-out}
.hero-v8 .v8-kicker{display:flex;align-items:center;gap:14px;margin:0;color:#295a33;font:800 11px/1.2 'DM Sans',sans-serif;letter-spacing:3px}
.hero-v8 .v8-kicker .ico{width:16px;height:16px;fill:#4a9b3c;stroke:#4a9b3c}
.v8-kicker-line{display:block;width:144px;max-width:19vw;height:1px;background:#b3d49d}
.hero.hero-v8 h1{font:800 clamp(59px,5.9vw,90px)/.97 Manrope,'DM Sans',sans-serif;letter-spacing:-5px;color:#083324;margin:19px 0 14px;max-width:650px;white-space:nowrap}
.hero.hero-v8 h1 span{color:#238121;display:inline-block}
.v8-leaf{display:inline-block;vertical-align:middle;width:clamp(30px,3vw,43px);height:clamp(30px,3vw,43px);margin-left:4px;color:#2e8c24}
.hero-v8 .v8-intro{color:#234235;font:400 clamp(14px,1.28vw,18px)/1.48 'DM Sans',sans-serif;letter-spacing:-.18px;max-width:500px;margin:0 0 19px}
.v8-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(500px,100%);margin-bottom:21px}
.v8-perks>div{display:flex;min-width:0;align-items:flex-start;flex-direction:column;gap:6px;color:#1c402b;font:700 11px/1.3 'DM Sans',sans-serif}
.v8-perk-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(231,243,222,.82);color:#12622a}
.v8-perk-icon .ico{width:23px;height:23px}
.v8-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v8-btn{border-radius:999px;min-height:51px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 21px;white-space:nowrap;font:800 12px/1.2 'DM Sans',sans-serif;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s}
.v8-btn .ico{width:17px;height:17px}
.v8-btn:hover{transform:translateY(-2px)}
.v8-btn-main{background:linear-gradient(120deg,#17852e,#076a1b);color:#fff;box-shadow:0 8px 25px #186e2138}
.v8-btn-main:hover{background:#075a1a;box-shadow:0 12px 31px #186e2146}
.v8-btn-light{background:rgba(255,255,255,.96);border-color:#fff;color:#0d4d24;box-shadow:0 9px 32px #203f1e26}
.v8-btn-light:hover{background:#f0faed}
.v8-small-note{display:flex;align-items:center;gap:10px;margin:13px 0 0;color:#617e64;font:600 10px/1.3 'DM Sans',sans-serif}
.v8-small-note .dot{width:8px;height:8px;border-radius:100%;background:#3caa35;box-shadow:0 0 0 4px #b4dca762}
.v8-scene{position:absolute;z-index:1;top:0;bottom:0;left:43.5%;width:calc(56.5% + max(0px,(100vw - 1330px)/2));padding:0;border:0;display:block;overflow:hidden;background:transparent;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 13%,black 100%);mask-image:linear-gradient(90deg,transparent 0%,black 13%,black 100%)}
.v8-scene>img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;transition:transform 9s ease-out;filter:saturate(1.06)}
.v8-scene:hover>img{transform:scale(1.02)}
.v8-image-hint{position:absolute;z-index:3;right:31%;bottom:19px;display:flex;align-items:center;gap:8px;color:#12471d;background:#ffffffd9;padding:9px 14px;border-radius:99px;border:1px solid #e8f6e2;box-shadow:0 8px 23px #12291939;font-size:11px;font-weight:800;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.v8-scene:hover .v8-image-hint,.v8-scene:focus-visible .v8-image-hint{opacity:1;transform:none}
.v8-image-hint .ico{width:14px;height:14px}
/* Three clickable, native product cards immediately after the hero */
.v8-featured{position:relative;padding:26px 0 43px;background:linear-gradient(180deg,#f8fcf7 0%,#f5f9f4 100%);overflow:hidden;isolation:isolate}
.v8-featured::before{content:"";position:absolute;z-index:-1;inset:-45px 0 0;pointer-events:none;background:radial-gradient(circle at 2% 35%,#d4ebca8c,transparent 14%),radial-gradient(circle at 96% 67%,#d4ebca60,transparent 21%)}
.v8-featured .container{width:min(1410px,calc(100% - 78px))}
.v8-featured-head{text-align:center;margin:0 auto 19px;color:#0e3826}
.v8-featured-head>p{margin:0 0 4px;letter-spacing:4px;color:#277129;font-weight:800;font-size:10px}
.v8-featured-head h2{margin:0 0 3px;font:800 clamp(32px,3.3vw,46px)/1.12 Manrope,'DM Sans',sans-serif;letter-spacing:-2px}
.v8-featured-head h2 span{color:#237c23}
.v8-featured-head>span{font:400 14px/1.3 'DM Sans',sans-serif;color:#536b56}
.v8-featured-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.v8-featured-card{height:188px;border:1px solid #e6eee3;display:flex;align-items:center;position:relative;padding:0 14px 0 0;overflow:hidden;border-radius:20px;text-align:left;box-shadow:0 11px 24px #163e2414;transition:box-shadow .22s,transform .22s;cursor:pointer}
.v8-featured-card:hover{transform:translateY(-3px);box-shadow:0 16px 31px #15392326}
.v8-green{background:radial-gradient(circle at 8% 40%,#cbe9c1,transparent 52%),linear-gradient(108deg,#dcf0d6,#f3f9f1 87%)}
.v8-red{background:radial-gradient(circle at 17% 63%,#ffc5b7,transparent 55%),linear-gradient(103deg,#ffe2dd,#fff2ef)}
.v8-pink{background:radial-gradient(circle at 15% 50%,#ffc5e0,transparent 54%),linear-gradient(102deg,#ffdbef,#fff0f6)}
.v8-featured-pack{position:relative;display:grid;place-items:center;width:43%;min-width:122px;height:100%;flex-shrink:0;overflow:visible}
.v8-featured-pack:before{content:"";position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:#fff9;filter:blur(20px)}
.v8-featured-pack:after{content:"";position:absolute;bottom:14px;left:24%;width:55%;height:9px;filter:blur(8px);border-radius:50%;background:#163d2a50}
.v8-featured-pack img{width:auto;height:88%;max-width:80%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(3px 6px 6px #183b2639);transition:transform .25s}
.v8-featured-card:hover .v8-featured-pack img{transform:scale(1.04) translateY(-2px)}
.v8-featured-box img{width:auto;height:74%;max-width:87%}
.v8-featured-name{display:flex;flex-direction:column;min-width:0;align-items:flex-start;gap:6px;position:relative;z-index:2;flex:1}
.v8-featured-name strong{font:800 clamp(19px,2vw,29px)/1.02 Manrope,'DM Sans',sans-serif;letter-spacing:-1.15px;white-space:nowrap;color:#103b2b}
.v8-red .v8-featured-name strong span{color:#de1616}
.v8-pink .v8-featured-name strong{color:#e9237f;letter-spacing:-1.1px;font-size:clamp(18px,1.8vw,27px)}
.v8-featured-name small{font-size:12px;color:#57665c;white-space:nowrap}
.v8-round-arrow{position:absolute;bottom:16px;right:15px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;color:#164b2a;background:white;box-shadow:0 4px 15px #1737251c;transition:transform .2s}
.v8-featured-card:hover .v8-round-arrow{transform:translateX(3px)}
.v8-round-arrow .ico{width:19px;height:19px}
/* keep original sections intact but place next feature strip after featured cards */
.v8-featured+.value-strip{border-top:1px solid #e5eddf}
@keyframes v8Rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:1340px){
 .v8-header .nav{gap:13px;width:calc(100% - 50px)} .v8-header .desktop-nav{gap:13px}
 .v8-header .desktop-nav a{font-size:11.5px}.v8-nav-search{max-width:245px}
 .v8-nav-distributor{padding:11px 12px;font-size:11px}
 .hero.hero-v8 h1{font-size:clamp(52px,6.2vw,75px)}
 .hero-v8 .hero-v8-grid{width:calc(100% - 52px);grid-template-columns:48% 52%}
 .hero-v8 .v8-intro{font-size:15px;max-width:450px}
 .v8-btn{font-size:11px;padding:14px 15px}.v8-perks{width:min(455px,100%)}
 .v8-featured-name strong{font-size:22px}
}
@media(max-width:1020px){
 .v8-header .desktop-nav{display:none}.v8-header .mobile-toggle{display:grid}
 .v8-header .nav{height:74px;gap:17px}
 .v8-header .brand{min-width:106px}.v8-nav-search{max-width:380px;flex:1 1 auto}
 .v8-nav-distributor{font-size:10px}
 .hero-v8 .hero-v8-grid{min-height:550px;grid-template-columns:51% 49%}
 .hero.hero-v8 h1{font-size:clamp(49px,6.4vw,65px);letter-spacing:-3.6px}
 .v8-perks{gap:5px}.v8-perks>div{font-size:9px}.v8-perk-icon{width:38px;height:38px}
 .v8-scene{left:43%;width:calc(57% + 27px)}
 .v8-btn{padding:12px 11px;font-size:10px}
 .v8-featured-card{height:157px}.v8-featured-name strong{font-size:19px}.v8-featured-name small{font-size:10px}
 .v8-round-arrow{height:30px;width:30px;bottom:11px;right:10px}
}
@media(max-width:700px){
 .v8-header .nav{width:calc(100% - 32px);height:70px;gap:8px}
 .v8-header .brand{min-width:108px}.v8-header .brand strong{font-size:35px}.v8-header .brand small{font-size:7px;letter-spacing:2.2px}
 .v8-nav-search{height:37px;max-width:none;padding:0 9px;margin-left:auto;flex:1 1 auto;min-width:0}.v8-nav-search input{font-size:10px}.v8-nav-search .ico{width:16px;height:16px}
 .v8-nav-distributor{display:none}.v8-header .bag-button{padding:4px}.v8-header .bag-button .ico{width:23px;height:23px}.v8-header .bag-count{min-width:17px;height:17px;font-size:10px;margin-left:-6px}
 .v8-header .mobile-toggle{border-radius:10px;padding:7px}
 .hero.hero-v8{background:linear-gradient(#f9fcf6,#edf6e6);overflow:hidden}
 .hero-v8 .hero-v8-grid{width:100%;display:flex;flex-direction:column;min-height:0;padding:0}
 .hero-v8 .hero-v8-copy{width:100%;padding:29px 23px 11px;max-width:none}
 .hero-v8 .v8-kicker{font-size:9px;gap:9px;letter-spacing:2px}
 .v8-kicker-line{width:80px}
 .hero.hero-v8 h1{font-size:clamp(48px,12vw,67px);margin:15px 0 13px;letter-spacing:-3.5px}
 .hero-v8 .v8-intro{font-size:13px;line-height:1.6;max-width:540px;margin-bottom:17px}
 .v8-leaf{width:27px;height:27px}
 .v8-perks{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:17px;width:100%;max-width:460px}
 .v8-perk-icon{height:33px;width:33px}.v8-perk-icon .ico{height:17px;width:17px}
 .v8-perks>div{font-size:9px;gap:7px}
 .v8-actions{gap:7px}
 .v8-btn{font-size:10px;min-height:42px;padding:11px 12px;gap:7px}.v8-btn .ico{height:15px;width:15px}
 .v8-small-note{font-size:9px;margin-top:12px}
 .v8-scene{position:relative;left:auto;top:auto;bottom:auto;display:block;width:100%;height:350px;max-height:none;margin-top:5px;mask-image:none;-webkit-mask-image:none;background:#d7e9c7}
 .v8-scene img{object-fit:cover;object-position:47% 53%}
 .v8-image-hint{opacity:1;transform:none;right:12px;bottom:9px;font-size:10px}
 .v8-featured{padding:28px 0 34px}.v8-featured .container{width:calc(100% - 34px)}
 .v8-featured-head>p{font-size:9px}.v8-featured-head h2{font-size:31px;letter-spacing:-1.4px}.v8-featured-head>span{font-size:12px}
 .v8-featured-cards{grid-template-columns:1fr;gap:10px}
 .v8-featured-card{height:125px;border-radius:17px;padding-right:50px}
 .v8-featured-pack{min-width:110px;width:36%}.v8-featured-pack img{height:93%}.v8-featured-box img{height:87%}
 .v8-featured-name strong,.v8-pink .v8-featured-name strong{font-size:24px}.v8-featured-name small{font-size:12px}
 .v8-round-arrow{right:14px;bottom:calc(50% - 18px);height:36px;width:36px}
}
@media(max-width:390px){.v8-header .brand{min-width:93px}.v8-header .brand strong{font-size:30px}.v8-header .brand small{font-size:6px}.v8-nav-search input{font-size:9px}.hero.hero-v8 h1{font-size:45px}.hero-v8 .hero-v8-copy{padding-left:17px;padding-right:17px}.v8-btn{font-size:9px;padding:11px 10px}.v8-perks>div{font-size:8px}.v8-scene{height:303px}.v8-featured-name strong,.v8-pink .v8-featured-name strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.hero-v8 .hero-v8-copy{animation:none}.v8-scene>img,.v8-featured-pack img{transition:none}}
/* Fit the original vertical packshots fully inside their horizontal cards. */
.v8-featured-pack{align-self:stretch;height:auto;min-height:0}
.v8-featured-pack img{position:absolute;left:50%;top:50%;height:calc(100% - 17px);max-height:calc(100% - 17px);max-width:78%;width:auto;object-fit:contain;transform:translate(-50%,-50%)}
.v8-featured-card:hover .v8-featured-pack img{transform:translate(-50%,-51%) scale(1.03)}
.v8-featured-pack.v8-featured-box img{height:calc(100% - 35px);max-height:calc(100% - 35px);max-width:86%}
@media(min-width:701px) and (max-width:1000px){.v8-scene>img{object-position:26% center}}