/* ===== AlkoMig Premium Light (clean, single layer) — FINAL CLEAN ===== */

:root{
  --bg:#e6ebf2;
  --text:#0b1220;
  --muted:#627089;
  --line:rgba(11,18,32,.08);

  --card:rgba(255,255,255,.68);
  --cardSolid:#ffffff;

  --brand:#ee7b16;
  --brand2:#c95f08;
  --brandSoft:rgba(238,123,22,.12);

  --radius:18px;
  --radius2:24px;

  --shadow: 0 14px 34px rgba(11,18,32,.10);
  --shadow2: 0 28px 70px rgba(11,18,32,.16);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:auto}

body{
  margin:0;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:url("../../img/bg.png") center center / cover no-repeat fixed;
  padding-top:64px;
  overflow-x:hidden;
}
.header,
main,
.legal-note,
.footer,
#cartMount,
body > section,
body > .contacts-page{
  opacity:0;
  transition:opacity .42s ease-in-out;
}

body.page-ready .header,
body.page-ready main,
body.page-ready .legal-note,
body.page-ready .footer,
body.page-ready #cartMount,
body.page-ready > section,
body.page-ready > .contacts-page{
  opacity:1;
}

body.page-leave .header,
body.page-leave main,
body.page-leave .legal-note,
body.page-leave .footer,
body.page-leave #cartMount,
body.page-leave > section,
body.page-leave > .contacts-page{
  opacity:0;
}



a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.45}


/* typography */
h1,h2,h3,.logo__text,.hero__cardTitle{
  font-family:"Unbounded","Manrope",system-ui,sans-serif;
  letter-spacing:-.6px;
}
.hero h1{letter-spacing:-1px}

/* ===== HEADER ===== */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(255,255,255,.12);
  transition:
    opacity .42s ease-in-out,
    transform .35s ease,
    background .35s ease,
    backdrop-filter .35s ease;
  animation:none;
}
.header--hidden{transform:translateY(-100%)}
.header,.header *{line-height:1}

.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:64px;
  padding:0;
  position:relative;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
  border-radius:0;
  position:relative;
  z-index:10;
  height:64px;
  width:220px;
  cursor:pointer;
}

.logo__mark{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  box-shadow:0 14px 24px rgba(238,123,22,.22);
}

.logo__img{
  height:160px;
  width:auto;
  display:block;
  margin:0;
  position:absolute;
  top:50%;
  left:-32px;
  transform:translateY(calc(-50% + 9px));
  object-fit:cover;
  padding:0;
  background:transparent;
  border:none;
  outline:none;
  box-shadow:none;
  border-radius:18px;
  pointer-events:none;
}

.nav{
  display:flex;
  gap:10px;
}
.nav a{
  position:relative;
  overflow:hidden;
  padding:9px 12px;
  border-radius:12px;
  color:rgba(11,18,32,.74);
  transition:.18s ease;
}
.nav a:hover{
  background:rgba(238,123,22,.10);
  
}
.nav a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(238,123,22,.45), transparent);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
}
.nav a:hover::after{
  opacity:1;
  transform:translateY(0);
}

/* sections */
.section{
  position:relative;
  padding:28px 0;
}
.section::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(1120px, calc(100% - 40px));
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(11,18,32,.07), transparent);
}
.section--alt{background:transparent;border:0}
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.section__head h2{
  margin:0;
  font-size:22px;
}

/* hero */
.hero{padding:30px 0 10px}
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.hero h1{
  font-size:42px;
  line-height:1.04;
  margin:0 0 10px;
}
.hero p{max-width:700px}
.hero__text,
.hero__sub{
  animation:heroFadeUp .8s ease;
}

.pill{
  display:inline-block;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(11,18,32,.06);
  border:1px solid rgba(11,18,32,.06);
  color:rgba(11,18,32,.72);
  font-size:12px;
  font-weight:900;
}
.hero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* buttons */
.btn{
  position:relative;
  overflow:hidden;
  border:0;
  padding:11px 16px;
  border-radius:16px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow:0 18px 40px rgba(238,123,22,.20);
}
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
.btn:hover::before{
  left:140%;
  transition:left .65s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:48%;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  pointer-events:none;
  opacity:.75;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 26px 60px rgba(238,123,22,.22);
}
.btn:active{transform:translateY(0)}

.btn--ghost{
  background:rgba(255,255,255,.55);
  color:rgba(11,18,32,.90);
  border:1px solid rgba(11,18,32,.10);
  box-shadow:none;
}
.btn--ghost::after{display:none}
.btn--ghost:hover{
  background:rgba(238,123,22,.10);
  border-color:rgba(238,123,22,.22);
  transform:translateY(-1px);
}
.btn--wide{width:100%}

/* cards */
.hero__card,
.product,
.card,
.faq,
.notice{
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.58));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.62);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}

.hero__card,
.product,
.card,
.faq{
  position:relative;
  overflow:hidden;
}
.hero__card::before,
.product::before,
.card::before,
.faq::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 16% 0%, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(700px 260px at 92% 22%, rgba(238,123,22,.10), transparent 60%);
  opacity:.55;
}

.product,
.card,
.hero__card{
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}
.product:hover,
.card:hover,
.hero__card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 24px 60px rgba(11,18,32,.14);
  border-color:rgba(238,123,22,.14);
}

.card,
.faq,
.hero__card,
.notice{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}
.card:hover,
.faq:hover,
.hero__card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 54px rgba(11,18,32,.12);
}

/* notice */
.notice{
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(238,123,22,.11), rgba(238,123,22,.07));
  border-color:rgba(238,123,22,.18);
  color:rgba(11,18,32,.92);
}
.notice b{font-weight:900}

/* hero card */
.hero__card{padding:18px}
.hero__cardTitle{font-weight:950;margin-bottom:10px}
.hero__list{margin:0;padding-left:18px}
.hero__list li{margin:8px 0}

/* catalog */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.product{
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:180px;
  transform-style:preserve-3d;
}

.product__title{
  font-weight:950;
  font-size:16px;
  line-height:1.3;
  margin-bottom:12px;
}

.product__meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
}

.price{
  font-size:18px;
  font-weight:900;
  color:var(--brand2);
}

.product .btn{
  width:100%;
  border-radius:12px;
}

.product__img{
  position:relative;
  width:100%;
  height:140px;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:12px;
  background:rgba(11,18,32,.06);
  border:1px solid rgba(11,18,32,.08);
}
.product__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}
.product__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, filter .35s ease;
}
.product:hover .product__img img{
  transform:scale(1.04);
  filter:saturate(1.04) contrast(1.03);
}

/* how works */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{padding:18px}
.card__title{font-weight:950;margin-bottom:6px}
.card__text{color:rgba(98,112,137,.98)}

/* FAQ */
.faq{padding:14px 16px}
.faq summary{
  cursor:pointer;
  font-weight:950;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"▸";
  display:inline-block;
  margin-right:10px;
  color:var(--brand2);
}
.faq[open] summary::before{content:"▾"}
.faq__body{
  margin-top:10px;
  color:rgba(98,112,137,.98);
}

/* footer */
.footer{
  padding:26px 0;
  text-align:center;
  color:rgba(98,112,137,.98);
}

/* promo */
.promo{padding:25px 0 10px}
.promo__wrap{position:relative}

.promo__viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:22px;
  scroll-snap-type:x mandatory;
  touch-action:pan-x;
  user-select:none;
  -webkit-user-select:none;
  padding:0;
  margin:0;
}
.promo__viewport::-webkit-scrollbar{display:none}

.promo__track{
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
}

.promo__card{
  flex:0 0 calc((100% - 10px) / 2);
  width:calc((100% - 10px) / 2);
  height:220px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  background:rgba(0,0,0,.06);
  scroll-snap-align:start;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.promo__card img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  position:relative;
  z-index:1;
  -webkit-user-drag:none;
  user-select:none;
}
.promo__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--promo-bg) center/cover no-repeat;
  filter:blur(22px);
  transform:scale(1.12);
  opacity:.55;
}
.promo__card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(70% 90% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.28) 100%);
  pointer-events:none;
}

.promo__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  outline:none;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.promo__arrow--left{left:10px}
.promo__arrow--right{right:10px}

.promo__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding-top:12px;
}
.promo__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.45);
  box-shadow:
    inset 0 0 0 1px rgba(11,18,32,.08),
    0 4px 10px rgba(11,18,32,.06);
  transition:width .26s ease, background .26s ease, transform .2s ease, opacity .2s ease;
  opacity:.9;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.promo__dot.is-active{
  width:28px;
  background:rgba(11,18,32,.72);
  transform:scale(1.02);
  opacity:1;
}

/* add-to-cart */
.btn.is-adding,
.msr-add.is-adding{
  position:relative;
  pointer-events:none;
  opacity:.95;
}

.btn.is-adding::after,
.msr-add.is-adding::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:16px;
  height:16px;
  margin-top:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:rgba(255,255,255,.95);
  animation:addSpin .7s linear infinite;
}
@keyframes addSpin{to{transform:rotate(360deg)}}

.fly-to-cart{
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  will-change:transform, opacity;
}

.cart-pill__icon.is-bump{
  animation:cartBump .26s ease;
}
@keyframes cartBump{
  0%{transform:scale(1)}
  60%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

/* hide legacy mount */
#products{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* search */
.search-dark{
  transition:box-shadow .24s ease, background .24s ease, border-color .24s ease;
}
.search-dark:focus-within{
  background:rgba(255,255,255,.34);
  box-shadow:0 10px 30px rgba(11,18,32,.08);
}

/* cookie bar */
.cookie-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9998;
  background:rgba(255,255,255,.96);
  border-top:1px solid rgba(11,18,32,.08);
  box-shadow:0 -10px 30px rgba(11,18,32,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
}
.cookie-bar.is-show{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.cookie-bar__inner{
  max-width:1280px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.cookie-bar__text{
  font-size:15px;
  line-height:1.55;
  color:#1f2a37;
  text-align:center;
}
.cookie-bar__link{
  color:#ff2a37;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-bar__link:hover{
  text-decoration-thickness:2px;
}
.cookie-bar__btn{
  flex:0 0 auto;
  min-width:96px;
  height:34px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:#ff2a37;
  color:#fff;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(255,42,55,.24);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cookie-bar__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(255,42,55,.34);
}
.cookie-bar__btn:active{transform:translateY(0)}
body.cookie-offset{padding-bottom:96px}

/* age gate */
.age-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.age-gate.is-show{
  opacity:1;
  visibility:visible;
}
.age-gate__dialog{
  width:100%;
  max-width:760px;
  text-align:center;
}
.age-gate__title{
  margin:0 0 24px;
  color:#fff;
  font-weight:800;
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.15;
}
.age-gate__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}
.age-gate__btn{
  width:min(300px, 100%);
  min-height:48px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  font-size:18px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.age-gate__btn:hover{transform:translateY(-1px)}
.age-gate__btn--yes{
  background:#26c93a;
  box-shadow:0 12px 28px rgba(38,201,58,.22);
}
.age-gate__btn--no{
  background:#d92d2d;
  box-shadow:0 12px 28px rgba(217,45,45,.22);
}
.age-gate__text{
  max-width:860px;
  margin:0 auto;
  color:rgba(255,255,255,.92);
  font-size:15px;
  line-height:1.55;
}
body.age-lock{overflow:hidden}

/* legal */
.legal-note{
  padding:18px 0 10px;
}
.legal-note__box{
  position:relative;
  border:1px solid rgba(11,18,32,.08);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  padding:18px 20px 22px;
  box-shadow:0 16px 40px rgba(11,18,32,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.legal-note__warn{
  margin:0 0 12px;
  font-weight:800;
  font-size:14px;
  line-height:1.45;
  text-transform:uppercase;
  color:#d7261d;
  padding-right:90px;
}
.legal-note__text,
.legal-note__meta{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.65;
  color:#3d4a5f;
  position:relative;
  z-index:2;
}
.legal-note__meta:last-child{margin-bottom:0}
.legal-note__age{
  position:absolute;
  right:18px;
  bottom:16px;
  width:54px;
  height:54px;
  object-fit:contain;
  opacity:.9;
  z-index:1;
  pointer-events:none;
}

/* forms / lock */
#checkoutForm button[type="submit"][data-locked="1"]{
  background:#b9bcc3 !important;
  color:#fff !important;
  cursor:not-allowed;
  opacity:.9;
  box-shadow:none !important;
  filter:grayscale(1);
}

/* anchors */
#catalog,
#how,
#faq{
  scroll-margin-top:110px;
}

/* ===== MOBILE BURGER MENU — CLEAN FINAL ===== */
.header-burger{
  display:none;
  width:46px;
  height:46px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 30px rgba(11,18,32,.08);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
  position:relative;
  z-index:1301;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.header-burger span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#0b1220;
  transition:
    transform .34s cubic-bezier(.22,.9,.24,1),
    opacity .22s ease,
    width .22s ease;
}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:1300;
  pointer-events:none;
}

.mobile-menu__overlay{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(212,218,226,.82), rgba(194,201,210,.88));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .32s ease;
}
.mobile-menu__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:radial-gradient(rgba(255,255,255,.7) 0.6px, transparent 0.6px);
  background-size:8px 8px;
}

.mobile-menu__panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:88px 24px 36px;
  opacity:0;
  transform:translateY(26px) scale(.975);
  transform-origin:center center;
  transition:opacity .32s ease, transform .32s ease;
}

.mobile-menu__head{
  position:absolute;
  top:18px;
  left:20px;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mobile-menu__title{
  font-family:"Unbounded","Manrope",system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(11,18,32,.55);
}

.mobile-menu__close{
  width:46px;
  height:46px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.34);
  color:#0b1220;
  font-size:24px;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mobile-menu__close:hover{
  background:rgba(255,255,255,.54);
  transform:scale(1.03);
}

.mobile-menu__nav{
  width:min(520px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mobile-menu__nav a{
  position:relative;
  overflow:hidden;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  color:#0b1220;
  font-family:"Unbounded","Manrope",system-ui,sans-serif;
  font-weight:700;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.02em;
  padding:20px 16px;
  opacity:0;
  transform:translateY(26px) scale(.96);
  filter:blur(6px);
  will-change:transform, opacity, filter;
  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.22,.9,.24,1),
    filter .42s ease,
    color .18s ease,
    background .18s ease;
}
.mobile-menu__nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(260px, 70%);
  height:1px;
  background:rgba(11,18,32,.10);
}
.mobile-menu__nav a:last-child::after{display:none}

.mobile-menu__nav a::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:180px;
  height:60px;
  transform:translate(-50%,-50%) scale(.7);
  background:radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 72%);
  opacity:0;
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.mobile-menu__nav a:hover::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{pointer-events:auto}
body.menu-open .mobile-menu__overlay{opacity:1}
body.menu-open .mobile-menu__panel{
  opacity:1;
  transform:translateY(0) scale(1);
}
body.menu-open .mobile-menu__nav a{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
body.menu-open .mobile-menu__nav a:nth-child(1){transition-delay:.07s}
body.menu-open .mobile-menu__nav a:nth-child(2){transition-delay:.13s}
body.menu-open .mobile-menu__nav a:nth-child(3){transition-delay:.19s}
body.menu-open .mobile-menu__nav a:nth-child(4){transition-delay:.25s}
body.menu-open .mobile-menu__nav a:nth-child(5){transition-delay:.31s}
body.menu-open .mobile-menu__nav a:nth-child(6){transition-delay:.37s}
body.menu-open .mobile-menu__nav a:hover{
  transform:translateY(-2px) scale(1.03);
  color:rgba(11,18,32,.92);
}
body.menu-open .header-burger span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.menu-open .header-burger span:nth-child(2){
  opacity:0;
}
body.menu-open .header-burger span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
body.menu-open .header{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body.menu-open .header-searchBtn,
body.menu-open .cart-pill{
  opacity:.55;
  transform:scale(.98);
  transition:opacity .22s ease, transform .22s ease;
}

body.menu-animating .mobile-menu__nav a,
body.menu-animating .mobile-menu__close,
body.menu-animating .mobile-menu__overlay{
  pointer-events:none;
}

/* animations */
@keyframes headerFadeIn{
  from{
    opacity:0;
    transform:translateY(-16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes heroFadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* responsive */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
  .nav{display:none}
  .hero h1{font-size:36px}
  .header-burger{display:flex}

  .cookie-bar__inner{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:14px 14px 16px;
  }
  .cookie-bar__text{
    font-size:14px;
    line-height:1.5;
    text-align:left;
  }
  .cookie-bar__btn{
    width:100%;
    min-width:0;
    height:46px;
    border-radius:14px;
  }
  body.cookie-offset{padding-bottom:150px}
}

@media (min-width:901px){
  .mobile-menu{display:none}
}

@media (max-width:768px){
  .promo__arrow{display:none}
  .promo__card{
    flex:0 0 100%;
    width:100%;
    height:170px;
  }
  .promo__card img{
    width:98%;
    height:98%;
  }

  .mobile-menu__panel{
    padding:82px 18px 28px;
  }
  .mobile-menu__nav a{
    font-size:28px;
    padding:18px 12px;
  }

  .age-gate{
    padding:16px;
    align-items:center;
  }
  .age-gate__dialog{max-width:100%}
  .age-gate__title{
    margin:0 0 18px;
    font-size:24px;
    line-height:1.2;
  }
  .age-gate__actions{
    gap:10px;
    margin-bottom:18px;
  }
  .age-gate__btn{
    width:100%;
    max-width:280px;
    min-height:46px;
    padding:0 16px;
    border-radius:10px;
    font-size:16px;
  }
  .age-gate__text{
    max-width:100%;
    font-size:13px;
    line-height:1.45;
    padding:0 4px;
  }

  .legal-note__box{
    padding:16px 16px 20px;
    border-radius:14px;
  }
  .legal-note__warn{
    font-size:12px;
    padding-right:64px;
  }
  .legal-note__text,
  .legal-note__meta{
    font-size:12px;
    line-height:1.55;
  }
  .legal-note__age{
    width:42px;
    height:42px;
    right:12px;
    bottom:12px;
  }
}

@media (max-width:520px){
  .logo{
    width:170px;
    height:64px;
  }
  .logo__img{
    height:160px;
    left:-22px;
    border-radius:14px;
    pointer-events:none;
  }

  .header-burger,
  .mobile-menu__close{
    width:44px;
    height:44px;
    border-radius:12px;
  }

  .mobile-menu__title{font-size:13px}
  .mobile-menu__nav a{
    font-size:22px;
    padding:16px 10px;
  }
  .mobile-menu__nav a::after{width:72%}
}

@media (max-width:420px){
  .age-gate__title{font-size:21px}
  .age-gate__btn{
    max-width:100%;
    min-height:44px;
    font-size:15px;
  }
  .age-gate__text{
    font-size:12px;
    line-height:1.4;
  }
}

@media (max-width:900px){
  .logo__img{
    height:145px;
    left:-12px;
    border-radius:16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .header,
  .hero__text,
  .hero__sub,
  .mobile-menu__panel,
  .mobile-menu__nav a,
  .mobile-menu__overlay,
  .product,
  .product__img img,
  .btn::before{
    animation:none !important;
    transition:none !important;
  }
}