/* Homepage. Pixel values are the live site's measurements at 1440px wide; widths are kept proportional. */
:root{--marq:112px}
@media (max-width:1199px){:root{--marq:84px}}
@media (max-width:767px){:root{--marq:49px}}
.marquee__track>*{font-size:var(--marq)}
.marquee{height:var(--marq)}
@media (max-width:767px){.marquee .ghost{-webkit-text-stroke-width:.6px}.marquee__track>*{margin:0 24px}}

/* Hero */
.hero{position:relative;height:987px;overflow:hidden;background:#000}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.hero__content{position:absolute;inset:0}
.hero__bottle{position:absolute;top:110px;left:50%;width:calc((100% - 2*var(--colpad))*.37);height:auto;transform:translateX(-50%)}
.hero__left{position:absolute;top:350px;left:var(--colpad);width:fit-content}
.hero__left h1{display:flex;flex-direction:column;align-items:flex-end}
.hero__explore{line-height:1.1}
.hero__the{margin:40px 33px 0 0;font-size:var(--t60);line-height:1}
.hero__ghost{font-size:min(3.47vw,50px);line-height:48px;white-space:nowrap}
.hero__ghost--left{margin-top:56px}
.hero__buy{display:flex;align-items:flex-end;gap:60px;margin-top:43px}
.hero__buy img{width:92px;height:auto}
.hero__right{position:absolute;top:500px;right:var(--colpad);display:flex;flex-direction:column;align-items:flex-start;width:min(34.4vw,543px)}
.hero__unexplored{font-size:var(--h2);line-height:1.1;text-transform:uppercase}
.hero__ghost--right{margin:56px 0 0 -10px}
.hero__right .btn{align-self:flex-end;margin-top:38px}
@media (min-width:1550px){.hero__buy img{width:115px}.hero__buy .btn,.cocktails__all{padding:20px 36px;font-size:24px}}
@media (max-width:1199px){
  .hero{height:820px}
  .hero__bottle{width:360px;top:100px}
  .hero__left{top:290px;width:40vw}
  .hero__left .hero__ghost{text-align:right}
  .hero__right{top:420px}
  .hero__explore{font-size:min(var(--h1),6.4vw)}
  .hero__right{width:38vw}
  .hero__ghost{font-size:3.3vw;line-height:1.2}
  .hero__buy{gap:24px}
  .hero__buy img{width:60px}
}
@media (max-width:767px){
  .hero{height:897px}
  .hero__bottle{top:120px;width:320px}
  .hero__content{position:absolute;top:auto;right:0;bottom:81px;left:0;display:grid;align-content:end;grid-template-columns:auto auto;justify-content:center;column-gap:.6em;justify-items:center}
  .hero__left,.hero__right,.hero__left h1{display:contents}
  .hero__explore{grid-area:1/1/2/-1;font-size:52px;line-height:1.1}
  .hero__the,.hero__unexplored{margin:0;font-size:7.2vw;line-height:1.5}
  .hero__the{grid-area:2/1;justify-self:end}
  .hero__unexplored{grid-area:2/2;justify-self:start}
  .hero__ghost{margin:0;font-size:8.1vw;line-height:1.45;text-align:center}
  .hero__ghost--left{grid-area:3/1/4/-1}
  .hero__ghost--right{grid-area:4/1/5/-1}
  .hero__buy{grid-area:5/1/6/-1;margin-top:24px}
  .hero__buy img{display:none}
  .hero__buy .btn{padding:14px 32px}
  .hero__right .btn{grid-area:6/1/7/-1;align-self:auto;margin-top:14px;padding:16px 36px}
}

/* "…that delights the whole world" */
.delights{position:relative;height:442px;padding-top:70px;text-align:center}
.delights::before{content:"";position:absolute;top:0;left:50%;width:min(1100px,100%);height:422px;background:url("../assets/elipse.png") center/contain no-repeat;filter:blur(81px);transform:translateX(-50%);pointer-events:none}
.delights>*{position:relative}
.delights h2{position:absolute;bottom:0;left:50%;width:min(900px,92%);transform:translateX(-50%)}
.delights h2[data-reveal]{transform:translate(-50%,40px)}
.delights h2[data-reveal].is-in{transform:translateX(-50%)}
@media (min-width:1550px){.delights{height:486px}}
@media (max-width:767px){.delights{height:227px;padding-top:35px}}

/* World's No. 3 collage */
.ranking,.taste,.wild{padding-inline:var(--colpad)}
.ranking{padding-block:248px}
.ranking__stage{position:relative}
.ranking__collage{position:relative;width:min(88%,1408px);margin-left:17%;aspect-ratio:1090/633}
.ranking__party{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ranking__three{position:absolute;top:11.4%;left:31.7%;width:33.5%}
.ranking__bottle{position:absolute;top:7.9%;left:55%;width:17%}
.ranking__most{position:absolute;top:82%;left:33.9%;font-size:var(--t32);line-height:1.1;color:var(--text)}
.ranking__most span{display:block}
.ranking__horns{position:absolute;top:120px;left:-60px;width:324px}
.ranking__zigzag{position:absolute;top:74.4%;left:33.7%;width:147px}
.ranking__title{position:absolute;top:66.2%;left:7.5%;font-size:var(--t112);line-height:1.1}
.ranking__title span{display:block}
@media (max-width:1199px){.ranking{padding-block:142px}.ranking__most{font-size:18px}.ranking__horns{left:-6%;width:26.2%}.ranking__zigzag{width:11.9%}}
@media (max-width:767px){
  .ranking{padding:172px 4% 80px}
  .ranking__stage{display:flex;flex-direction:column}
  .ranking__title{position:static;order:-1;margin-bottom:32px;line-height:1.6;text-align:center;color:var(--text)}
  .ranking__title span{display:inline}
  .ranking__title span.green{display:block}
  .ranking__collage{width:calc(100% + 36px);margin-left:-24px}
  .ranking__most{top:77.7%;left:27.6%;font-size:14px;letter-spacing:.28px}
  .ranking__horns{display:none}
  .ranking__zigzag{top:auto;bottom:29%;left:0;width:52px}
}

/* How does it taste */
.taste{position:relative;padding-bottom:248px}
.taste{--col:calc(100% - 2*var(--colpad))}
.taste__media{position:relative;width:min(694px,56%);aspect-ratio:694/828;background:#000}
.taste__media video{width:100%;height:100%;object-fit:cover}
.taste__media::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 68%)}
.taste__copy{position:absolute;top:53px;left:calc(var(--colpad) + min(694px,var(--col)*.56) - var(--col)*.05);width:calc(var(--col)*.44)}
.taste__copy h2{margin-bottom:40px}
.taste__lead{margin-bottom:32px;line-height:1.3}
.taste__neon-bottle{position:absolute;top:352px;left:calc(var(--colpad) - 72px);width:163px}
@media (min-width:1550px){.taste__copy{width:calc(var(--col)*.47)}}
.taste__neon-grass{position:absolute;top:567px;right:var(--colpad);width:402px}
@media (max-width:1199px){
  .taste{padding-bottom:142px}
  .taste__neon-bottle{left:0;width:110px}
  .taste__neon-grass{top:auto;bottom:60px;width:260px}
}
@media (max-width:767px){
  .taste{padding-bottom:80px;text-align:center}
  .taste__media{width:100%;aspect-ratio:359/468}
  .taste__copy{position:static;width:auto;margin-top:53px}
  .taste__copy h2{margin-bottom:16px}
  .taste__lead{margin:0 18px 24px;font-size:20px}
  .taste__neon-bottle{top:260px;left:-16px;width:130px}
  .taste__neon-grass{display:none}
}

/* The legend */
.legend{display:grid;grid-template-columns:48% 40%;column-gap:5%;max-width:1920px;margin-inline:auto;padding-top:90px}
.legend__bison{position:relative;align-self:start;margin-top:38px;container-type:inline-size}
.legend__bison>img:first-child{width:100%}
.legend__bubble{position:absolute;top:6.1%;left:21.7%;width:67.6%;font-size:min(5.42cqw,50px);line-height:1.1;text-transform:uppercase;color:var(--text)}
@media (min-width:2200px){.legend__bubble{font-size:44px}}
.legend__grass{position:absolute;top:80.1%;left:4%;width:96%}
.legend__copy>p:first-child{margin-bottom:40px}
.legend__copy h2{margin-bottom:30px}
.legend__copy h2+p{margin-bottom:32px}
.legend__festiwal{width:84.4%;margin-bottom:32px}
@media (max-width:767px){
  .marquee--legend{margin-top:28px}
  .legend{grid-template-columns:1fr;padding:46px 20px 0;text-align:center}
  .legend__bubble{text-align:left}
  .legend__bison{width:calc(100% + 4px);margin:0 0 41px -20px}
  .legend__copy>p:first-child{margin-bottom:20px;font-weight:500}
  .legend__copy h2{margin-bottom:20px;padding:0 15px}
  .legend__festiwal{width:100%}
}

/* Heritage */
.heritage{display:grid;grid-template-columns:53% 47%;max-width:1920px;margin-inline:auto;padding:248px 0}
.heritage__copy{padding:0 16.2% 0 13.2%}
.heritage__copy h2{max-width:440px;margin-bottom:30px}
.heritage__first span:last-child{display:block}
.heritage__first{line-height:1.3}
.heritage__list{margin:39px 0 0;padding:0;list-style:none}
.heritage__item{display:grid;grid-template-columns:83px 1fr;column-gap:36px;min-height:104px;margin-bottom:32px}
.heritage__item img{width:83px;height:auto}
.heritage__item h3{padding-bottom:16px}
.heritage__item p{max-width:420px}
.heritage__visual{position:relative}
.heritage__forest{width:100%;height:940px;object-fit:cover}
.heritage__shadow{position:absolute;top:0;left:-184px;width:268px}
.heritage__bottle{position:absolute;top:60px;left:-106px;width:229px}
.heritage__unique{position:absolute;top:605px;left:65px;width:520px;line-height:1.1}
@media (max-width:1199px){
  .heritage{padding-block:142px}
  .heritage__copy{padding:0 8% 0 7.5%}
  .heritage__forest{height:auto;aspect-ratio:677/940}
  .heritage__shadow{left:-26.7%;width:39.6%}
  .heritage__bottle{top:6.4%;left:-15.2%;width:33.8%}
  .heritage__unique{top:64.4%;left:10.3%;width:76.8%}
}
@media (max-width:767px){
  .heritage{grid-template-columns:1fr;padding:80px 0;text-align:center}
  .heritage__copy{padding:0 16px 40px}
  .heritage__copy h2{max-width:300px;margin:0 auto 20px}
  .heritage__first{line-height:1.1}
  .heritage__list{margin-top:60px}
  .heritage__item{grid-template-columns:1fr;justify-items:center;min-height:0;margin-bottom:41px}
  .heritage__item img{width:52px;margin-bottom:20px}
  .heritage__item h3{padding-bottom:16px}
  .heritage__item p{max-width:none}
  .heritage__forest{aspect-ratio:390/520}
  .heritage__shadow{left:23.8%;width:41.5%}
  .heritage__bottle{top:7.7%;left:34.6%;width:30.8%}
  .heritage__unique{top:57.7%;left:5%;width:90%;line-height:1.3;text-align:center}
}

/* As a shot */
.shot{position:relative;overflow:hidden}
.marquee--shot{position:relative;z-index:1}
.shot__bar{position:relative;aspect-ratio:1440/754;margin-top:-70px}
.shot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot__bar h2{position:absolute;top:160px;left:50%;width:min(736px,92%);transform:translateX(-50%);text-align:center}
.shot__bottle{position:absolute;right:calc(var(--colpad) + 140px);bottom:0;width:300px}
.shot__zig{position:absolute;transform:rotate(-90deg);transform-origin:top left}
.shot__zig--a{top:65.4%;left:52.9%;width:143px}
.shot__zig--b{top:75.9%;left:65.7%;width:89px}
.shot__challenge{position:relative;padding-bottom:30px}
.shot__stare{width:100%;height:600px;object-fit:cover}
.shot__video{position:absolute;z-index:1;top:-196px;left:50%;width:643px;height:400px;object-fit:cover;transform:translateX(-50%)}
.shot__dare{position:absolute;z-index:2;top:332px;left:50%;width:min(753px,92%);font-size:var(--h2);line-height:1.1;text-align:center;transform:translateX(-50%)}
.shot__grass{position:relative;display:block;width:90%;margin:-141px auto 0}
@media (max-width:1199px){
  .shot__bar{height:560px;aspect-ratio:auto;margin-top:-50px}
  .shot__bottle{top:24px;right:auto;bottom:auto;left:60%;width:220px}
  .shot__zig--a{top:370px;width:100px}
  .shot__zig--b{top:430px;width:64px}
  .shot__stare{height:440px}
  .shot__video{top:-150px;width:480px;height:300px}
  .shot__dare{top:230px}
  .shot__grass{margin-top:-110px}
}
@media (max-width:767px){
  .marquee--shot{margin-bottom:70px}
  .shot__bar{height:490px;aspect-ratio:auto;margin-top:0}
  .shot__bar h2{top:20px;width:274px}
  .shot__bar h2 span{display:block}
  .shot__bottle{top:116px;right:auto;bottom:auto;left:103px;width:160px}
  .shot__zig--a{top:308px;left:12px;width:67px}
  .shot__zig--b{top:364px;left:111px;width:42px}
  .shot__challenge{padding-bottom:0}
  .shot__stare{height:130px}
  .shot__video{display:none}
  .shot__dare{top:70px;width:260px;font-size:28px}
  .shot__grass{margin-top:63px}
}

/* Drink as a cocktail */
/* The heading sits in the 1720px column; the three cards span the full 7% gutters, each capped at 500px. */
.cocktails{padding-inline:7%}
.cocktails h2{max-width:1720px;margin-inline:auto}
.cocktails__grid{display:flex;justify-content:space-between;margin-top:80px}
.cocktail{position:relative;display:block;width:31.2%;max-width:500px;color:var(--text);text-align:center;transition:transform .35s ease-in-out}
.cocktail:hover{transform:translateY(-10px)}
.cocktail__art{display:block;width:min(100%,400px);margin:0 auto;aspect-ratio:1}
.cocktail__spray{position:absolute;top:40px;left:50%;width:min(100%,483px);transform:translateX(-50%)}
.cocktail__img{position:relative;width:100%;height:100%;object-fit:contain}
.cocktail__name{display:block;margin-top:32px;line-height:1.3}
.cocktails__all{display:flex;margin:40px auto 6px}
.cocktails__all:hover{margin:46px auto 0}
@media (min-width:1550px){.cocktails__all{margin-top:80px}.cocktails__all:hover{margin-top:86px}}
@media (max-width:767px){
  .cocktails{text-align:center}
  .cocktails__grid{flex-direction:column;align-items:center;gap:48px;margin-top:64px}
  .cocktail{width:100%;max-width:none}
  .cocktail__art{width:312px;max-width:100%;margin:0 auto;aspect-ratio:auto}
  .cocktail__img{height:auto}
  .cocktail__spray{top:20px;width:263px}
  .cocktail__name{margin-top:24px;line-height:1.6}
  .cocktails__all{margin-top:60px;padding:14px 32px}
  .cocktails__all:hover{margin-top:66px}
}

/* Products and cart */
.products{display:grid;grid-template-columns:60% 40%;grid-template-rows:425px 421px;max-width:1920px;margin-inline:auto}
.product{position:relative;overflow:hidden}
.product--bison{grid-row:1/3;padding:154px 0 0 11.67%;background:url("../assets/green-back.webp") center/cover no-repeat}
.product--bison .product__copy{position:relative;z-index:1;width:433px;max-width:52%}
.product__eyebrow{margin-bottom:32px;line-height:1.3}
.product--bison h2{margin-bottom:40px}
.product__buy{display:flex;gap:59px}
.product__arrow{flex:none;width:87px;height:152px;transform:scaleX(-1) rotate(90deg)}
.product h3{padding-bottom:16px;line-height:1.42}
.product--bison .product__bottle{position:absolute;right:0;bottom:0;width:333px}
.product--czarna{padding:166px 8% 0;background:rgba(208,172,67,.12)}
.product--biala{padding:128px 8% 0;background:rgba(255,255,255,.12)}
.product--czarna h3,.product--biala h3{padding-bottom:24px;line-height:1.1}
.product__soon{line-height:1.3}
.product--czarna .product__bottle,.product--biala .product__bottle{position:absolute;bottom:0;left:55.5%;width:203px}
.product--biala .product__bottle{width:210px}
.size-selector{display:flex;flex-wrap:wrap;gap:8px 10px}
.product--biala .size-selector{justify-content:center;width:170px}
.size-selector button{width:80px;height:30px;padding:0;border:0;border-radius:28px;background:rgba(255,255,255,.1);color:#fff;font:600 16px/16px var(--body);cursor:pointer;transition:background-color .3s,color .3s}
.size-selector button.is-selected{background:#fff;color:#000}
.cart-panels{min-height:60px;margin-top:32px}
.cart-panel{position:relative;width:300px;max-width:100%}
.cart-loading{font-size:14px;color:rgba(255,255,255,.7)}
.cart-widget iframe{display:block;max-width:100%}
@media (min-width:1550px){
  .products{grid-template-rows:439px 435px}
  .product--bison .product__copy{width:684px;max-width:60%}
  .product__buy{gap:77px}
  .product__arrow{width:115px;height:201px}
  .product--biala .size-selector{width:auto;justify-content:flex-start}
}
@media (max-width:1199px){
  .products{grid-template-rows:380px 380px}
  .product--bison{padding-top:90px}
  .product__buy{gap:24px}
  .product__arrow{width:60px;height:105px}
  .product--czarna{padding-top:110px}
  .product--biala{padding-top:80px}
  .product--bison .product__bottle{width:38.3%}
  .product--czarna .product__bottle,.product--biala .product__bottle{right:20px;left:auto;width:170px}
}
@media (max-width:767px){
  .products{grid-template-columns:1fr;grid-template-rows:none}
  .product,.product--bison,.product--czarna,.product--biala{grid-row:auto;padding:64px 16px 0;text-align:center}
  .product--bison .product__copy{width:auto;max-width:none}
  .product__eyebrow{margin-bottom:24px;line-height:1.6}
  .product--bison h2{margin-bottom:46px;line-height:1.3}
  .product__buy{display:block}
  .product__arrow{display:none}
  .product h3,.product--czarna h3,.product--biala h3{max-width:none;padding-bottom:16px;font-size:20px;line-height:1.3}
  .product--czarna h3,.product--biala h3{padding:0 15px 24px}
  .size-selector,.product--biala .size-selector{justify-content:center;width:auto}
  .cart-panels{min-height:48px;margin-top:20px}
  .cart-panel{margin-left:calc(50% - 86px)}
  .product--biala .cart-panel{margin-left:calc(50% - 111px)}
  .product .product__bottle,.product--bison .product__bottle,.product--czarna .product__bottle,.product--biala .product__bottle{position:static;margin:40px auto 0}
  .product--bison .product__bottle{width:251px}
  .product--czarna .product__bottle{width:203px}
  .product--biala .product__bottle{width:210px}
}

/* Show us your wild side */
.wild__head{display:flex;align-items:center}
.wild__head h2{width:50%}
.wild__handle{margin-left:7%;font-size:22px;line-height:1.1;letter-spacing:.64px;text-transform:uppercase}
.wild__photos{display:flex;justify-content:space-between;margin:71px -12px 0}
.wild__photos img{width:25.4%;max-width:354px;height:auto;transform:rotate(4deg)}
.wild__photos img:nth-child(2){transform:rotate(-4deg)}
@media (max-width:767px){
  .wild{text-align:center}
  .wild__head{flex-direction:column}
  .wild__head h2{width:auto}
  .wild__handle{margin:39px 0 0;font-size:20px}
  .wild__photos{flex-direction:column;margin:31px 0 0}
  .wild__photos img{width:307px;max-width:80%;margin:0 0 -20px -10px}
  .wild__photos img:nth-child(even){margin-left:auto;margin-right:-9px}
}

/* Bison Sleeve offer */
.sleeve-popup{position:fixed;inset:0;z-index:950;display:grid;place-items:center;overflow-y:auto}
.sleeve-popup__backdrop{position:fixed;inset:0;background:radial-gradient(circle,rgba(0,7,0,.59) 0%,rgba(0,7,0,.68) 50%,rgba(0,7,0,.78) 100%),url("../assets/blocker-popup.webp") center/cover no-repeat}
.sleeve-popup__card{position:relative;width:845px;height:647px;border-radius:50px;background:#000;overflow:hidden}
.sleeve-popup__grass{position:absolute;top:0;left:0;width:100%;pointer-events:none}
.sleeve-popup__close{position:absolute;z-index:2;top:39px;right:41px;width:70px;height:53px;padding:0;border:0;background:none;cursor:pointer}
.sleeve-popup__close img{width:100%;height:100%}
.sleeve-popup__copy{position:absolute;top:190px;left:35px;width:504px;font:400 var(--t32)/1.3 var(--display);color:var(--text);text-align:center}
.sleeve-popup__line{display:block;white-space:nowrap}
.sleeve-popup__line em{position:relative;font-style:normal;color:var(--green)}
.sleeve-popup__line--first em::after{content:"";position:absolute;bottom:62%;left:50%;width:54px;height:49px;background:url("../assets/pseudo-horns.svg") center/contain no-repeat;transform:translateX(-50%)}
.sleeve-popup__card:focus{outline:none}
.sleeve-popup__line--outline{margin-top:8px;font-size:32px;letter-spacing:2px;color:transparent;-webkit-text-stroke:2px var(--green)}
.sleeve-popup__line--offer{font-size:var(--t48)}
@media (min-width:1550px){.sleeve-popup__card{transform:scale(1.15)}}
.sleeve-popup__line--outline+.sleeve-popup__line--offer{margin-top:2px}
.sleeve-popup__bottle{position:absolute;top:50px;left:477px;width:368px}
.sleeve-popup__arrow{position:absolute;top:488px;left:471px;width:68px;height:68px}
.sleeve-popup__label{position:absolute;top:549px;left:506px;font:400 35px/1.3 var(--display);letter-spacing:1px;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--green);transform:rotate(6deg)}
.sleeve-popup__buy{position:absolute;top:398px;left:199px;width:178px;padding:16px 24px;font-size:18px}
.sleeve-popup__buy:hover{top:392px}
@media (max-width:899px){
  .sleeve-popup__card{width:min(390px,100%);height:760px}
  .sleeve-popup__close{top:22px;right:30px}
  .sleeve-popup__copy{top:80px;left:12px;right:12px;width:auto;font-size:20px;line-height:1.6}
  .sleeve-popup__line--outline{margin-top:4px;font-size:21px;letter-spacing:1px;-webkit-text-stroke-width:1px}
  .sleeve-popup__line--offer{font-size:24px;line-height:1.2}
  .sleeve-popup__bottle{top:169px;left:50%;width:348px;max-width:calc(100% - 14px);transform:translateX(-50%)}
  .sleeve-popup__arrow{top:556px;left:16.5%;width:54px;height:69px;transform:rotate(-35deg)}
  .sleeve-popup__label{top:622px;left:50%;font-size:30px;-webkit-text-stroke-width:1px;transform:translateX(-50%) rotate(6deg)}
  .sleeve-popup__buy{top:699px;left:50%;transform:translateX(-50%)}
  .sleeve-popup__buy:hover{top:693px}
}
