/* Shared foundation: fonts, the measured type scale, buttons, age gate, header, menu, footer and cookie bar.
   Tiers follow the live site: >=1550, 1200-1549, 768-1199, <=767. */
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/dela-gothic-one-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/dela-gothic-one-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/poppins-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/poppins-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/poppins-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/poppins-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/poppins-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/poppins-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/poppins-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/poppins-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/poppins-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/poppins-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green:#00fe00;--band:#0ad90a;--white:#fff;--text:#e9e9e9;--black:#000;
  --display:"Dela Gothic One","Arial Black",sans-serif;--body:"Poppins",Arial,sans-serif;
  /* --pad is the plain side gutter. --colpad grows on very wide screens so a block stays in live's centred
     1720px column; live applies that cap to some blocks and not others, so each block picks one. */
  --pad:7%;--colpad:max(var(--pad),calc(50% - 860px));--section:248px;
  --h1:min(112px,6vw);--h2:60px;--h3:40px;
  --t112:112px;--t60:60px;--t48:48px;--t32:32px;--t24:24px;--t18:18px;--t16:16px;
  --logo:188px;--burger:121px;
}
@media (max-width:1549px){:root{--h1:5.5vw;--h2:40px;--t112:80px;--t48:34px;--t32:26px}}
@media (max-width:1199px){:root{--pad:4%;--section:142px;--h1:72px;--h2:36px;--h3:28px;--t112:62px;--t60:40px;--t48:32px;--t32:24px;--t24:20px;--t18:16px;--logo:146px;--burger:98px}}
@media (max-width:767px){:root{--section:80px;--h1:52px;--h2:28px;--t112:28px;--t60:32px;--t48:28px;--t32:20px;--t18:14px;--t16:12px;--logo:115px;--burger:68px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--text);font:400 20px/1.3 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
@media (max-width:1199px){body{font-size:16px}}
@media (max-width:767px){body{font-size:14px;line-height:1.6}}
body.age-locked,body.menu-open,body.popup-open{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
h1,h2,h3,p{margin:0}
h1{font:400 var(--h1)/1.1 var(--display);color:var(--green);text-transform:uppercase}
h2{font:400 var(--h2)/1.1 var(--display);color:var(--white);text-transform:uppercase}
h3{font:400 var(--h3)/normal var(--display);color:var(--white)}
@media (max-width:767px){h2{line-height:1.3}}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#site-main,.site-footer{overflow-x:clip}
#site-main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

/* Layout and type utilities. Names mirror the live classes they stand in for. */
.wrap{padding-inline:var(--pad)}
.section-h{padding-block:var(--section)}
.dela{font-family:var(--display);font-weight:400}
.upper{text-transform:uppercase}
.green{color:var(--green)}
.white{color:var(--white)}
.semi{font-weight:600}
.center{text-align:center}
.t112{font-size:var(--t112)}.t60{font-size:var(--t60)}.t48{font-size:var(--t48)}.t32{font-size:var(--t32)}.t24{font-size:var(--t24)}.t18{font-size:var(--t18)}.t16{font-size:var(--t16)}
.ghost{color:transparent;-webkit-text-stroke:2px var(--white)}
.ghost.green{-webkit-text-stroke-color:var(--green)}
@media (max-width:1199px){.ghost{-webkit-text-stroke-width:1px}}
@media (max-width:767px){.m-center{text-align:center}}

/* Pill buttons with the offset shadow that drops on hover. */
.btn{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:14px 24px;border:0;border-radius:40px;font:600 20px/normal var(--body);text-transform:uppercase;color:var(--black);cursor:pointer;transition:margin .5s ease-in-out,box-shadow .5s ease-in-out,background-color .3s,color .3s}
.btn--green{background:var(--green);box-shadow:0 6px 0 rgba(0,254,0,.3);margin-bottom:6px}
.btn--white{background:var(--white);box-shadow:0 6px 0 rgba(255,255,255,.3);margin-bottom:6px;border-radius:44px}
.btn--green:hover,.btn--white:hover{margin-top:6px;margin-bottom:0;box-shadow:0 0 0 transparent}
.btn--outline{padding:16px 36px;border:2px solid var(--white);border-radius:50px;background:transparent;color:var(--white);font-size:24px;font-weight:700}
.btn--outline:hover{background:var(--white);color:var(--black)}
@media (max-width:1199px){.btn{font-size:18px}.btn--outline{font-size:18px;padding:14px 28px}}

/* Round social buttons. */
.social-links{display:flex;gap:20px}
.social-links a{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--green);border-radius:50%;background:var(--black);transition:background-color .3s}
.social-links a:hover{background:#0b3d0b}
.social-links img{width:26px;height:26px;filter:invert(1)}
.social-links--sm a{width:48px;height:48px}
.social-links--sm img{width:22px;height:22px}

/* Age gate */
.age-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow-y:auto;background:radial-gradient(circle,rgba(0,7,0,.12) 0%,rgba(0,7,0,.3) 55%,rgba(0,7,0,.5) 100%),url("../assets/blocker-popup.webp") center/cover no-repeat #000}
.age-gate__inner{width:min(1150px,80%);padding:0 7%;background:url("../assets/spray.webp") center/contain no-repeat;text-align:center}
.age-gate__title{font:400 var(--t112)/1.3 var(--display);color:var(--text);text-transform:uppercase}
.age-gate__desc{margin-top:32px;font:600 var(--t24)/1.3 var(--body);color:var(--text)}
.age-gate__actions{display:flex;justify-content:center;gap:24px;padding:48px 0}
.age-gate__note{max-width:752px;margin:0 auto;padding:0 30px;font-size:var(--t18);line-height:1.3}
@media (max-width:767px){
  .age-gate{background:linear-gradient(rgba(0,7,0,.2),rgba(0,7,0,.45)),url("../assets/preview-age-mobile.webp") center/cover no-repeat #000}
  .age-gate__inner{width:100%;padding:14% 4%}
  .age-gate__title{font-size:34px;line-height:1.6}
  .age-gate__desc{max-width:86%;margin:24px auto 0;font-size:18px;line-height:1.6}
  .age-gate__actions{flex-direction:column;align-items:center;gap:12px;padding:24px 0}
  .age-gate__actions .btn{padding:14px 32px;font-size:18px}
  .age-gate__actions .btn--white{padding:14px 28px;font-size:16px}
  .age-gate__note{padding:0;font-size:14px;line-height:1.6}
}

/* Header: sits over the first section and scrolls with the page. */
.site-header{position:absolute;top:32px;left:var(--colpad);right:var(--colpad);z-index:60;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.site-header>*{pointer-events:auto}
.site-header__logo img{width:var(--logo);height:auto}
.burger{position:relative;width:var(--burger);aspect-ratio:121/93;padding:0;border:0;background:url("../assets/burger-circle.png") center/contain no-repeat;cursor:pointer}
.burger__lines,.burger__lines::before,.burger__lines::after{position:absolute;top:50%;left:50%;width:38%;aspect-ratio:54/20;background:url("../assets/burger-line.svg") center/contain no-repeat;transition:transform .35s ease-in-out,opacity .2s}
.burger__lines{transform:translate(-55%,-35%)}
.burger__lines::before,.burger__lines::after{content:"";width:100%}
.burger__lines::before{transform:translate(-50%,-135%)}
.burger__lines::after{transform:translate(-50%,35%)}
.burger[aria-expanded="true"] .burger__lines{background:none;transform:translate(-50%,-50%)}
.burger[aria-expanded="true"] .burger__lines::before{transform:translate(-50%,-50%) rotate(25deg) scale(1.15)}
.burger[aria-expanded="true"] .burger__lines::after{transform:translate(-50%,-50%) rotate(-65deg) scale(1.15)}
body.menu-open .site-header{position:fixed}

/* Full-screen menu */
.site-menu{position:fixed;inset:0;z-index:50;overflow-y:auto;background:var(--black);animation:menu-in .35s ease-out}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
.site-menu:focus{outline:none}
.site-menu__inner{display:flex;align-items:flex-start;column-gap:32px;padding:max(150px,19.4vh) var(--colpad) 80px}
.site-menu__bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:2%;flex:0 0 65%}
.site-menu__bottle{display:flex;flex-direction:column;align-items:center;color:var(--text);transition:transform .35s ease-in-out}
.site-menu__bottle:hover{transform:translateY(-8px)}
.site-menu__bottle-art{position:relative;display:block;width:200px;height:540px}
.site-menu__bottle-art img{position:relative;width:100%;height:100%;object-fit:contain}
.site-menu__bottle-art .site-menu__bottle-shadow{position:absolute;top:-25px;left:50%;width:142px;height:534px;transform:translateX(-50%);object-fit:fill}
.site-menu__bottle-name{margin-top:24px;font:400 var(--t24)/1.3 var(--display);text-align:center}
.site-menu__side{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;flex:1;min-width:0}
.site-menu__links{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.site-menu__links a{font:400 20px/29px var(--display);text-transform:uppercase;color:var(--white);transition:color .3s}
.site-menu__links a:first-child,.site-menu__links a:hover{color:var(--green)}
.site-menu__follow p{margin-bottom:30px;font:400 var(--t32)/1.3 var(--display);text-transform:uppercase}
/* Language links are an addition to the live menu, so they sit in the bottom-left corner, outside its layout
   and clear of the chat bot in the bottom-right corner. */
.site-menu__languages{position:absolute;bottom:28px;left:var(--colpad);display:flex;gap:24px}
.site-menu__languages a{font:400 14px/1.3 var(--display);text-transform:uppercase;color:#8d8d8d}
.site-menu__languages a[aria-current],.site-menu__languages a:hover{color:var(--green)}
@media (min-width:1550px){
  .site-menu__bottle-art{height:628px}
  .site-menu__bottle-art .site-menu__bottle-shadow{top:-53px;width:190px;height:717px}
  .site-menu__bottle-name{margin-top:44px}
  .site-menu__links{gap:40px}
  .site-menu__links a{font-size:24px;line-height:35px}
  .site-menu__follow p{margin-bottom:39px}
  .site-menu .social-links--sm a{width:56px;height:56px}
  .site-menu .social-links--sm img{width:26px;height:26px}
}
@media (max-width:1199px){
  .site-menu__inner{padding-top:150px}
  .site-menu__bottles{grid-template-columns:repeat(3,170px);gap:16px;flex:none}
  .site-menu__bottle-art{width:140px;height:378px}
  .site-menu__bottle-art .site-menu__bottle-shadow{width:100px;height:374px;top:-18px}
}
@media (max-width:767px){
  .site-menu__inner{flex-direction:column;align-items:stretch;row-gap:60px;padding:200px 16px 190px}
  .site-menu__side{order:-1}
  .site-menu__languages{position:static;justify-content:center}
  .site-menu__side{flex:none;align-items:center;gap:40px;padding-left:0}
  .site-menu__links{align-items:center;gap:20px}
  .site-menu__links a{font-size:18px;line-height:26px}
  .site-menu__follow{display:flex;flex-direction:column;align-items:center}
  .site-menu__follow p{margin-bottom:20px;font-size:20px;line-height:1.6}
  .site-menu__bottles{grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
  .site-menu__bottle-art{width:95px;height:308px}
  .site-menu__bottle-art .site-menu__bottle-shadow{top:-29px;width:52px;height:196px}
  .site-menu__bottle-name{margin-top:36px;font-size:16px;line-height:1.6}
}

/* Footer */
.site-footer{position:relative;background:var(--black)}
.site-footer__line{display:block;width:100%;height:21px}
.site-footer__top{display:grid;grid-template-columns:35.2% 30.8% 1fr;padding-inline:var(--colpad);padding-top:119px;padding-bottom:90px}
.site-footer__brand img{width:219px;height:auto}
.site-footer__brand p{max-width:366px;margin-top:32px;font-size:var(--t18);line-height:1.3}
.site-footer h2{margin-bottom:40px;font:400 var(--t32)/1.3 var(--display);color:var(--text);text-transform:uppercase}
.site-footer__legal{max-width:349px}
.site-footer__legal a{display:block;width:fit-content;margin-bottom:18px;padding:6px 25px 6px 0;font:400 20px/20px var(--body);color:var(--text);transition:color .3s}
.site-footer__legal a:hover{color:var(--green)}
.site-footer__grass{width:92.85%;margin:0 auto;height:auto}
.responsible{padding-top:30px;text-align:center}
.responsible__band{padding:12px var(--pad);background:var(--band);color:var(--black);font:600 var(--t16)/1.3 var(--body)}
.responsible__importer{padding:11px var(--pad) 12px;font:600 var(--t16)/1.3 var(--body);color:var(--text)}
@media (max-width:1199px){
  .site-footer__top{grid-template-columns:1.1fr 1fr 1fr;column-gap:40px;padding-top:90px}
  .site-footer__legal a{font-size:16px}
}
@media (max-width:991px) and (min-width:768px){
  .site-footer__top{grid-template-columns:1fr 1fr;row-gap:48px}
  .site-footer__legal{grid-column:2;grid-row:1/3}
  .site-footer__follow{grid-column:1;grid-row:2}
}
@media (max-width:767px){
  .site-footer__top{grid-template-columns:1fr;row-gap:63px;padding-top:75px;padding-bottom:80px;text-align:center}
  .site-footer__brand img{width:150px;margin:0 auto}
  .site-footer__brand p{max-width:none;margin-top:24px;line-height:1.6}
  .site-footer__legal{max-width:none}
  .site-footer h2{margin-bottom:32px;line-height:1.6}
  .site-footer__legal a{margin:0 auto 28px;padding:6px 25px;font-size:14px;line-height:14px}
  .site-footer__legal a:last-child{margin-bottom:0}
  .site-footer__follow .social-links{justify-content:center}
  .site-footer__grass{width:99.5%}
  .responsible__band{padding:16px 11px;line-height:1.6}
  .responsible__importer{padding:16px 11px 25px;line-height:1.6}
}

/* Cookie bar */
/* Above the chat bot's fixed box, which would otherwise cover the accept button. */
.cookie-bar{position:fixed;left:50%;bottom:20px;z-index:2147483000;display:flex;align-items:center;gap:32px;width:min(1180px,calc(100% - 24px));padding:16px 40px;border-radius:16px;background:#fff;box-shadow:0 12px 48px rgba(0,0,0,.12);transform:translateX(-50%);color:#424753;font:400 14px/1.5 var(--body)}
.cookie-bar__icon{flex:none;width:38px;height:38px}
.cookie-bar p{flex:1}
.cookie-bar a{color:#424753;text-decoration:underline}
.cookie-bar button{flex:none;padding:12px 20px;border:0;border-radius:8px;background:#292c34;color:#fff;font:600 12px/18px var(--body);cursor:pointer}
@media (max-width:767px){
  .cookie-bar{flex-direction:column;gap:16px;text-align:center}
  .cookie-bar__icon{display:none}
}

/* Shared motion: scrolling outline headlines and reveal-on-scroll. */
.marquee{overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;animation:marquee 40s linear infinite}
.marquee__track>*{flex:none;margin:0 32px;font:400 var(--t112)/1 var(--display);text-transform:uppercase}
@keyframes marquee{to{transform:translateX(-50%)}}
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
[data-reveal="left"]{transform:translateX(-60px)}
[data-reveal="right"]{transform:translateX(60px)}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.site-menu{transition:none;animation:none}
}
