html {
  scroll-behavior: smooth;
}

:root {
  --bg-body: #fafafa;
  --text-main: #0f172a;
  --accent: #c9a45c;
  --promo-banner-height: 52px;
  --notification-bg: rgba(255, 251, 242, 0.96);
  --notification-border: rgba(201, 164, 92, 0.32);
  --notification-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  --notification-radius: 18px;
  --notification-text: #0f172a;
  --notification-muted: #6b7280;
  --notification-success-bg: linear-gradient(135deg, rgba(248, 251, 243, 0.98), rgba(255, 251, 242, 0.98));
  --notification-success-border: rgba(120, 153, 90, 0.28);
  --notification-error-bg: linear-gradient(135deg, rgba(255, 245, 245, 0.98), rgba(255, 251, 242, 0.98));
  --notification-error-border: rgba(190, 70, 70, 0.22);
}

.promo-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10040;
  height: var(--promo-banner-height);
  padding: 5px 16px;
  background:
    linear-gradient(90deg, rgba(216, 168, 76, 0.14), transparent 18%, transparent 82%, rgba(216, 168, 76, 0.14)),
    #101010;
  border-bottom: 1px solid rgba(216, 168, 76, 0.54);
  box-shadow:
    0 1px 0 rgba(255, 228, 166, 0.18) inset,
    0 0 22px rgba(216, 168, 76, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.28);
  color: #f7f2e8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

.promo-banner__inner {
  display: flex;
  width: 100%;
  max-width: 980px;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(216, 168, 76, 0.5);
  border-radius: 9px;
  background: rgba(17, 17, 17, 0.86);
  box-shadow:
    0 0 16px rgba(216, 168, 76, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.promo-banner__content,
.promo-banner__actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex-wrap: nowrap;
}

.promo-banner__content {
  gap: 14px;
  white-space: nowrap;
}

.promo-banner__actions {
  flex: 0 0 auto;
  gap: 10px;
}

.promo-banner__tag {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #d8a84c;
  filter: drop-shadow(0 0 8px rgba(216, 168, 76, 0.32));
}

.promo-banner__tag svg {
  width: 100%;
  height: 100%;
}

.promo-banner__text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
}

.promo-banner__code,
.promo-banner__discount strong {
  color: #d8a84c;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(216, 168, 76, 0.28);
}

.promo-banner__code {
  font-size: 17px;
  letter-spacing: 0.02em;
}

.promo-banner__divider {
  width: 1px;
  height: 26px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.62), transparent);
}

.promo-banner__copy,
.promo-banner__close {
  appearance: none;
  border: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.promo-banner__copy {
  min-width: 116px;
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0c45d, #d8a84c);
  color: #111;
  box-shadow: 0 8px 18px rgba(216, 168, 76, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 14px;
  font-weight: 800;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.promo-banner__copy:hover {
  background: linear-gradient(135deg, #ffd978, #e4b85c);
  box-shadow: 0 10px 22px rgba(216, 168, 76, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

.promo-banner__close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 228, 184, 0.88);
  font-size: 28px;
  font-weight: 300;
  transition: color 0.2s ease, background 0.2s ease;
}

.promo-banner__close:hover {
  background: rgba(216, 168, 76, 0.12);
  color: #fff3d1;
}

.promo-banner__clipboard-fallback {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.promo-banner + .belfood-modern-header {
  margin-top: var(--promo-banner-height);
}

.belfood-modern-header {
  top: var(--promo-banner-height) !important;
}

body.promo-banner-closed .promo-banner {
  display: none;
}

body.promo-banner-closed .promo-banner + .belfood-modern-header {
  margin-top: 0;
}

body.promo-banner-closed .belfood-modern-header {
  top: 0 !important;
}

/* Scoped welcome offer banner */
:root{
  --promo-offer-banner-height:76px;
}

.promo-offer-banner[hidden]{
  display:none !important;
}

html.promo-offer-banner-preopen .promo-offer-banner[hidden]{
  display:flex !important;
}

.promo-offer-banner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10030;
  display:flex;
  align-items:center;
  min-height:var(--promo-offer-banner-height);
  padding:10px clamp(12px,2vw,28px);
  background:#161512;
  border-bottom:1px solid rgba(228,177,90,.64);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  color:#fffaf0;
}

.promo-offer-banner__inner{
  width:min(1480px,100%);
  min-height:56px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(360px,1fr) 1px minmax(430px,1.08fr) auto;
  align-items:center;
  gap:28px;
  padding:0 22px;
  border:1px solid rgba(228,177,90,.58);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.promo-offer-banner__timer,
.promo-offer-banner__promo{
  display:flex;
  align-items:center;
  min-width:0;
}

.promo-offer-banner__timer{
  gap:18px;
}

.promo-offer-banner__clock{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  color:#f3c76d;
  border:2px solid currentColor;
  border-radius:50%;
}

.promo-offer-banner__clock svg{
  width:21px;
  height:21px;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  min-width:0;
  color:rgba(255,255,255,.9);
  font-size:clamp(15px,1.28vw,22px);
  font-weight:500;
  line-height:1.1;
  white-space:nowrap;
}

.promo-offer-banner__timer-value{
  color:#f2c365;
  font-size:clamp(24px,2.55vw,38px);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}

.promo-offer-banner__divider{
  width:1px;
  height:40px;
  background:linear-gradient(180deg,transparent,rgba(228,177,90,.7),transparent);
}

.promo-offer-banner__promo{
  gap:24px;
}

.promo-offer-banner__code{
  flex:0 0 auto;
  min-width:220px;
  padding:15px 24px;
  text-align:center;
  color:#f1bd5d;
  font-size:clamp(22px,2vw,32px);
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  border:1px solid rgba(228,177,90,.78);
  border-radius:10px;
  background:rgba(12,12,11,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.promo-offer-banner__button{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:280px;
  min-height:50px;
  padding:0 24px;
  overflow:hidden;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg,#ffd776 0%,#e8af39 100%);
  color:#161512;
  cursor:pointer;
  font:800 clamp(16px,1.32vw,22px)/1.1 inherit;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 18px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.promo-offer-banner__button::before{
  content:"";
  position:absolute;
  inset:-35% auto -35% -55%;
  z-index:-1;
  width:46%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  opacity:.78;
  transform:skewX(-18deg) translateX(0);
  animation:promoOfferButtonShine 3.8s ease-in-out infinite;
}

.promo-offer-banner__button-arrow{
  display:inline-block;
  font-size:1.28em;
  line-height:1;
  transition:transform .2s ease;
}

.promo-offer-banner__button-mobile-text{
  display:none;
}

@media (hover:hover){
  .promo-offer-banner__button:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg,#ffe08c 0%,#efbb4f 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 11px 22px rgba(0,0,0,.2);
  }

  .promo-offer-banner__button:hover .promo-offer-banner__button-arrow{
    transform:translateX(4px);
  }
}

.promo-offer-banner__button:active,
.promo-offer-banner__button.is-pressed{
  transform:scale(.97);
}

.promo-offer-banner__button.is-pressed .promo-offer-banner__button-arrow{
  transform:translateX(4px);
}

.promo-offer-toast{
  position:fixed;
  top:50%;
  left:50%;
  z-index:10080;
  max-width:min(420px,calc(100vw - 32px));
  padding:15px 20px;
  border:1px solid rgba(228,177,90,.72);
  border-radius:14px;
  background:rgba(22,21,18,.96);
  color:#fffaf0;
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  box-shadow:0 18px 45px rgba(0,0,0,.24);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity .25s ease, transform .25s ease;
}

.promo-offer-toast strong{
  color:#e4b15a;
  font-weight:900;
}

.promo-offer-toast.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.promo-offer-banner:not([hidden]) + .belfood-modern-header{
  margin-top:var(--promo-offer-banner-height) !important;
}

html.promo-offer-banner-active .belfood-modern-header{
  top:var(--promo-offer-banner-height) !important;
}

html:not(.promo-offer-banner-active) .belfood-modern-header{
  top:0 !important;
}

@keyframes promoOfferButtonShine{
  0%,58%{
    opacity:0;
    transform:skewX(-18deg) translateX(0);
  }
  68%{
    opacity:.78;
  }
  86%,100%{
    opacity:0;
    transform:skewX(-18deg) translateX(340%);
  }
}

@media (max-width:1180px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(290px,1fr) 1px minmax(320px,1fr) auto;
    gap:18px;
    padding:0 16px;
  }

  .promo-offer-banner__code{
    min-width:176px;
    padding-inline:18px;
  }

  .promo-offer-banner__button{
    min-width:230px;
  }
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:76px;
  }

  .promo-offer-banner{
    padding:6px 8px;
  }

  .promo-offer-banner__inner{
    min-height:64px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "timer timer"
      "code button";
    gap:8px 10px;
    padding:8px 10px;
    border-radius:10px;
  }

  .promo-offer-banner__timer{
    grid-area:timer;
    justify-content:center;
    gap:7px;
  }

  .promo-offer-banner__clock{
    width:20px;
    height:20px;
    border-width:1.5px;
  }

  .promo-offer-banner__clock svg{
    width:13px;
    height:13px;
  }

  .promo-offer-banner__timer-label{
    font-size:13px;
  }

  .promo-offer-banner__timer-value{
    font-size:18px;
  }

  .promo-offer-banner__divider,
  .promo-offer-banner__promo-label{
    display:none;
  }

  .promo-offer-banner__promo{
    grid-area:code;
  }

  .promo-offer-banner__code{
    min-width:0;
    width:100%;
    padding:9px 12px;
    font-size:15px;
    border-radius:8px;
  }

  .promo-offer-banner__button{
    grid-area:button;
    min-width:128px;
    min-height:36px;
    padding:0 12px;
    gap:7px;
    border-radius:8px;
    font-size:13px;
  }

  .promo-offer-banner__button-text{
    display:none;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline;
  }

  .promo-offer-banner__button-arrow{
    font-size:17px;
  }
}

@media (max-width:360px){
  .promo-offer-banner__inner{
    padding-inline:8px;
    gap:7px 8px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px;
  }

  .promo-offer-banner__timer-value{
    font-size:17px;
  }

  .promo-offer-banner__button{
    min-width:116px;
    padding-inline:10px;
    font-size:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .promo-offer-banner__button,
  .promo-offer-banner__button-arrow,
  .promo-offer-toast{
    transition:none;
  }

  .promo-offer-banner__button::before{
    animation:none;
    opacity:0;
  }
}

/* Final sizing sync for fixed promo offer banner */
:root{
  --promo-offer-banner-height:84px;
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:78px;
  }

  .promo-offer-banner{
    padding:3px 8px;
  }

  .promo-offer-banner__inner{
    min-height:0;
    padding:6px 9px;
    gap:5px 9px;
  }

  .promo-offer-banner__timer{
    gap:6px;
  }

  .promo-offer-banner__clock{
    width:19px;
    height:19px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px;
  }

  .promo-offer-banner__timer-value{
    font-size:17px;
  }

  .promo-offer-banner__code{
    padding:8px 10px;
    font-size:14px;
  }

  .promo-offer-banner__button{
    min-width:124px;
    min-height:33px;
    font-size:12px;
  }
}

/* Promo offer compact polish */
:root{
  --promo-offer-banner-height:70px;
}

.promo-offer-banner{
  padding:7px clamp(12px,2vw,28px);
}

.promo-offer-banner__inner{
  min-height:48px;
  gap:22px;
  padding:0 18px;
  border-radius:11px;
}

.promo-offer-banner__clock{
  width:32px;
  height:32px;
  border-width:1.7px;
}

.promo-offer-banner__clock svg{
  width:18px;
  height:18px;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  font-size:clamp(14px,1.14vw,19px);
}

.promo-offer-banner__timer-value{
  font-size:clamp(22px,2.15vw,32px);
}

.promo-offer-banner__divider{
  height:34px;
}

.promo-offer-banner__code{
  min-width:205px;
  padding:12px 22px;
  font-size:clamp(20px,1.75vw,28px);
}

.promo-offer-banner__button{
  min-width:250px;
  min-height:44px;
  overflow:visible;
  font-size:clamp(15px,1.16vw,19px);
}

.promo-offer-banner__button > span{
  position:relative;
  z-index:2;
}

.promo-offer-banner__button::before{
  inset:0 auto 0 -45%;
  z-index:1;
  width:38%;
  border-radius:inherit;
  animation:promoOfferButtonShine 2.7s ease-in-out infinite;
}

.promo-offer-banner__button::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:1px solid rgba(255,215,126,.68);
  border-radius:14px;
  opacity:.36;
  transform:scale(.985);
  box-shadow:0 0 0 0 rgba(228,177,90,.28),0 0 18px rgba(228,177,90,.18);
  animation:promoOfferButtonHalo 2.15s ease-in-out infinite;
  pointer-events:none;
}

@keyframes promoOfferButtonHalo{
  0%,100%{
    opacity:.34;
    transform:scale(.985);
    box-shadow:0 0 0 0 rgba(228,177,90,.22),0 0 14px rgba(228,177,90,.14);
  }
  50%{
    opacity:.82;
    transform:scale(1.045);
    box-shadow:0 0 0 7px rgba(228,177,90,0),0 0 22px rgba(228,177,90,.26);
  }
}

@media (max-width:1180px){
  .promo-offer-banner__button{
    min-width:210px;
  }
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:78px;
  }

  .promo-offer-banner{
    padding:3px 8px;
  }

  .promo-offer-banner__inner{
    min-height:0;
    gap:5px 9px;
    padding:6px 9px;
  }

  .promo-offer-banner__code{
    min-width:0;
    padding:4px 8px 5px;
    font-size:13px;
    line-height:1.05;
  }

  .promo-offer-banner__code::before{
    content:"Промокод";
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.72);
    font-size:8.5px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
    text-transform:none;
  }

  .promo-offer-banner__button{
    min-width:124px;
    min-height:33px;
    font-size:12px;
  }

  .promo-offer-banner__button::after{
    inset:-4px;
    border-radius:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .promo-offer-banner__button::after{
    animation:none;
    opacity:.42;
    transform:none;
  }
}

/* Final mobile/desktop lock for the new discount strip. */
:root{
  --promo-offer-banner-height:84px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:10px clamp(12px,2.4vw,32px) !important;
  background:#111 !important;
  border-bottom:1px solid rgba(255,204,104,.32) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
}

.promo-offer-banner__inner{
  width:min(820px,100%) !important;
  min-height:62px !important;
  display:grid !important;
  grid-template-columns:minmax(216px,.82fr) minmax(310px,1.18fr) !important;
  grid-template-areas:"discount action" !important;
  align-items:center !important;
  gap:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:#111 !important;
  box-shadow:none !important;
}

.promo-offer-banner__timer{
  grid-area:discount !important;
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  min-width:0 !important;
  gap:16px !important;
  column-gap:16px !important;
  row-gap:4px !important;
  padding-left:10px !important;
}

.promo-offer-banner__timer::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:2px;
  height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,202,99,.6),transparent);
  transform:translateY(-50%);
}

.promo-offer-banner__clock{
  grid-row:1 / 3 !important;
  grid-column:1 !important;
  width:54px !important;
  height:54px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  filter:drop-shadow(0 4px 10px rgba(245,189,77,.2)) !important;
}

.promo-offer-banner__clock svg{
  display:none !important;
}

.promo-offer-banner__clock::before{
  content:"%";
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.promo-offer-banner__timer-label{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  color:rgba(255,255,255,.86) !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  margin-top:4px !important;
  color:#f7bd4d !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:.95 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider,
.promo-offer-banner__promo{
  display:none !important;
}

.promo-offer-banner__button{
  grid-area:action !important;
  min-width:0 !important;
  width:100% !important;
  min-height:62px !important;
  padding:0 28px !important;
  gap:18px !important;
  border:1px solid rgba(120,75,10,.3) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:26px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 20px rgba(0,0,0,.22) !important;
}

.promo-offer-banner__button::after{
  display:none !important;
}

.promo-offer-banner__button-arrow{
  font-size:40px !important;
  font-weight:400 !important;
  line-height:.75 !important;
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:78px;
  }

  .promo-offer-banner{
    padding:8px 10px !important;
  }

  .promo-offer-banner__inner{
    width:100% !important;
    min-height:58px !important;
    grid-template-columns:minmax(136px,.86fr) minmax(158px,1.14fr) !important;
    grid-template-areas:"discount action" !important;
    gap:10px !important;
    border-radius:12px !important;
  }

  .promo-offer-banner__timer{
    gap:10px !important;
    column-gap:9px !important;
    row-gap:2px !important;
    padding-left:7px !important;
  }

  .promo-offer-banner__timer::before{
    width:1px;
    height:42px;
  }

  .promo-offer-banner__clock{
    width:40px !important;
    height:40px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:21px;
  }

  .promo-offer-banner__timer-label{
    font-size:14px !important;
  }

  .promo-offer-banner__timer-value{
    margin-top:2px !important;
    font-size:28px !important;
  }

  .promo-offer-banner__button{
    min-height:52px !important;
    padding:0 13px !important;
    gap:8px !important;
    border-radius:12px !important;
    font-size:18px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:28px !important;
  }
}

@media (max-width:380px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(118px,.78fr) minmax(138px,1.22fr) !important;
    gap:7px !important;
  }

  .promo-offer-banner__clock{
    width:34px !important;
    height:34px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:18px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:24px !important;
  }

  .promo-offer-banner__button{
    min-height:48px !important;
    padding:0 10px !important;
    font-size:16px !important;
  }
}

/* Full welcome promo strip: timer + code + discount + CTA. */
:root{
  --promo-offer-banner-height:86px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:10px 12px !important;
  background:#111 !important;
  border-bottom:1px solid rgba(255,204,104,.32) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
}

.promo-offer-banner__inner{
  width:min(1980px,100%) !important;
  min-height:66px !important;
  display:grid !important;
  grid-template-columns:minmax(390px,.9fr) 1px minmax(360px,.9fr) minmax(260px,.62fr) minmax(390px,.9fr) !important;
  grid-template-areas:"timer divider promo discount action" !important;
  align-items:center !important;
  gap:26px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,204,104,.22) !important;
  border-radius:14px !important;
  background:#111 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.promo-offer-banner__timer{
  grid-area:timer !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  padding-left:0 !important;
}

.promo-offer-banner__timer::before,
.promo-offer-banner__discount::before{
  display:none !important;
}

.promo-offer-banner__clock{
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid #f5bd4d !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#f5bd4d !important;
  clip-path:none !important;
  filter:drop-shadow(0 4px 10px rgba(245,189,77,.16)) !important;
}

.promo-offer-banner__clock svg{
  display:block !important;
  width:25px !important;
  height:25px !important;
}

.promo-offer-banner__clock::before{
  content:none !important;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  color:rgba(255,255,255,.86) !important;
  font-size:24px !important;
  font-weight:500 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  margin:0 !important;
  color:#f7bd4d !important;
  font-size:38px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider{
  grid-area:divider !important;
  display:block !important;
  width:1px !important;
  height:50px !important;
  background:linear-gradient(180deg,transparent,rgba(255,204,104,.42),transparent) !important;
}

.promo-offer-banner__promo{
  grid-area:promo !important;
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

.promo-offer-banner__code{
  min-width:214px !important;
  padding:16px 24px !important;
  border:1px solid rgba(255,204,104,.34) !important;
  border-radius:12px !important;
  background:rgba(16,16,16,.7) !important;
  color:#f5bd4d !important;
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.promo-offer-banner__code::before{
  display:none !important;
}

.promo-offer-banner__discount{
  grid-area:discount !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:0 !important;
  padding-left:0 !important;
}

.promo-offer-banner__discount-icon{
  display:grid !important;
  place-items:center !important;
  width:54px !important;
  height:54px !important;
  flex:0 0 auto !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  font-size:28px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.promo-offer-banner__discount-copy{
  display:grid !important;
  gap:2px !important;
}

.promo-offer-banner__discount-label{
  color:rgba(255,255,255,.86) !important;
  font-size:21px !important;
  font-weight:500 !important;
  line-height:1.05 !important;
}

.promo-offer-banner__discount-value{
  color:#f7bd4d !important;
  font-size:36px !important;
  font-weight:900 !important;
  line-height:.95 !important;
}

.promo-offer-banner__button{
  grid-area:action !important;
  width:100% !important;
  min-width:0 !important;
  min-height:62px !important;
  padding:0 30px !important;
  gap:18px !important;
  border:1px solid rgba(120,75,10,.3) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:28px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 20px rgba(0,0,0,.22) !important;
}

.promo-offer-banner__button::after{
  display:none !important;
}

.promo-offer-banner__button-arrow{
  font-size:40px !important;
  font-weight:400 !important;
  line-height:.75 !important;
}

.promo-offer-banner__button-mobile-text{
  display:none !important;
}

@media (max-width:1500px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(318px,.92fr) 1px minmax(286px,.82fr) minmax(216px,.62fr) minmax(300px,.85fr) !important;
    gap:18px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label{
    font-size:20px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:32px !important;
  }

  .promo-offer-banner__code{
    min-width:178px !important;
    font-size:25px !important;
  }

  .promo-offer-banner__button{
    font-size:23px !important;
  }
}

@media (max-width:980px){
  :root{
    --promo-offer-banner-height:132px;
  }

  .promo-offer-banner{
    padding:8px !important;
  }

  .promo-offer-banner__inner{
    min-height:112px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "timer promo"
      "discount action" !important;
    gap:10px 12px !important;
    padding:10px !important;
    border-radius:13px !important;
  }

  .promo-offer-banner__divider{
    display:none !important;
  }

  .promo-offer-banner__timer,
  .promo-offer-banner__promo,
  .promo-offer-banner__discount{
    gap:9px !important;
  }

  .promo-offer-banner__clock,
  .promo-offer-banner__discount-icon{
    width:34px !important;
    height:34px !important;
  }

  .promo-offer-banner__clock svg{
    width:18px !important;
    height:18px !important;
  }

  .promo-offer-banner__discount-icon{
    font-size:18px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label,
  .promo-offer-banner__discount-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value,
  .promo-offer-banner__discount-value{
    font-size:21px !important;
  }

  .promo-offer-banner__promo{
    justify-content:flex-end !important;
  }

  .promo-offer-banner__code{
    min-width:112px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
    font-size:16px !important;
  }

  .promo-offer-banner__button{
    min-height:42px !important;
    padding:0 12px !important;
    gap:8px !important;
    border-radius:10px !important;
    font-size:16px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:26px !important;
  }
}

@media (max-width:380px){
  :root{
    --promo-offer-banner-height:138px;
  }

  .promo-offer-banner__inner{
    gap:8px !important;
    padding:9px 8px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label,
  .promo-offer-banner__discount-label{
    font-size:11px !important;
  }

  .promo-offer-banner__timer-value,
  .promo-offer-banner__discount-value{
    font-size:19px !important;
  }

  .promo-offer-banner__code{
    min-width:102px !important;
    font-size:14px !important;
  }

  .promo-offer-banner__button{
    font-size:14px !important;
  }
}

/* Discount strip matching the new welcome offer reference. */
:root{
  --promo-offer-banner-height:84px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:10px clamp(12px,2.4vw,32px) !important;
  background:#111 !important;
  border-bottom:1px solid rgba(255,204,104,.32) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
}

.promo-offer-banner__inner{
  width:min(820px,100%) !important;
  min-height:62px !important;
  display:grid !important;
  grid-template-columns:minmax(216px,.82fr) minmax(310px,1.18fr) !important;
  gap:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:#111 !important;
  box-shadow:none !important;
}

.promo-offer-banner__timer{
  position:relative !important;
  min-width:0 !important;
  gap:16px !important;
  padding-left:10px !important;
}

.promo-offer-banner__timer::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:2px;
  height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,202,99,.6),transparent);
  transform:translateY(-50%);
}

.promo-offer-banner__clock{
  width:54px !important;
  height:54px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  filter:drop-shadow(0 4px 10px rgba(245,189,77,.2)) !important;
}

.promo-offer-banner__clock svg{
  display:none !important;
}

.promo-offer-banner__clock::before{
  content:"%";
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.promo-offer-banner__timer-label{
  display:block !important;
  color:rgba(255,255,255,.86) !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  display:block !important;
  margin-top:4px !important;
  color:#f7bd4d !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:.95 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider,
.promo-offer-banner__promo{
  display:none !important;
}

.promo-offer-banner__button{
  min-width:0 !important;
  width:100% !important;
  min-height:62px !important;
  padding:0 28px !important;
  gap:18px !important;
  border:1px solid rgba(120,75,10,.3) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:26px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 20px rgba(0,0,0,.22) !important;
}

.promo-offer-banner__button::after{
  display:none !important;
}

.promo-offer-banner__button-arrow{
  font-size:40px !important;
  font-weight:400 !important;
  line-height:.75 !important;
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:78px;
  }

  .promo-offer-banner{
    padding:8px 10px !important;
  }

  .promo-offer-banner__inner{
    width:100% !important;
    min-height:58px !important;
    grid-template-columns:minmax(136px,.86fr) minmax(158px,1.14fr) !important;
    gap:10px !important;
    border-radius:12px !important;
  }

  .promo-offer-banner__timer{
    gap:10px !important;
    padding-left:7px !important;
  }

  .promo-offer-banner__timer::before{
    width:1px;
    height:42px;
  }

  .promo-offer-banner__clock{
    width:40px !important;
    height:40px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:21px;
  }

  .promo-offer-banner__timer-label{
    font-size:14px !important;
  }

  .promo-offer-banner__timer-value{
    margin-top:2px !important;
    font-size:28px !important;
  }

  .promo-offer-banner__button{
    min-height:52px !important;
    padding:0 13px !important;
    gap:8px !important;
    border-radius:12px !important;
    font-size:18px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:28px !important;
  }
}

@media (max-width:380px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(118px,.78fr) minmax(138px,1.22fr) !important;
    gap:7px !important;
  }

  .promo-offer-banner__clock{
    width:34px !important;
    height:34px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:18px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:24px !important;
  }

  .promo-offer-banner__button{
    min-height:48px !important;
    padding:0 10px !important;
    font-size:16px !important;
  }
}

/* Absolute final promo overrides for the shared stylesheet. */
.promo-banner {
  --promo-banner-height: 78px;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: calc(100% - 28px) !important;
  max-width: 1480px;
  height: var(--promo-banner-height) !important;
  margin: 12px auto 0 !important;
}

.promo-banner__inner {
  width: min(980px, calc(100% - 400px)) !important;
  max-width: 980px !important;
  height: 48px !important;
  padding: 0 16px 0 22px !important;
  gap: 24px !important;
}

.promo-banner__copy {
  width: 190px !important;
  min-width: 190px !important;
  height: 40px !important;
  padding: 0 22px 0 52px !important;
  font-size: 17px !important;
}

.promo-banner + .belfood-modern-header {
  margin-top: 0 !important;
}

.belfood-modern-header {
  top: 0 !important;
}

@media (max-width: 1100px) {
  .promo-banner {
    --promo-banner-height: 66px;
    width: calc(100% - 18px) !important;
    margin-top: 8px !important;
  }

  .promo-banner::before,
  .promo-banner::after {
    display: none !important;
  }

  .promo-banner__inner {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    padding: 0 12px 0 16px !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  .promo-banner {
    --promo-banner-height: 48px;
    width: calc(100% - 10px) !important;
    margin-top: 5px !important;
  }

  .promo-banner__inner {
    height: 38px !important;
    padding: 0 5px 0 8px !important;
    gap: 5px !important;
  }

  .promo-banner__copy {
    width: 88px !important;
    min-width: 88px !important;
    height: 30px !important;
    padding: 0 7px 0 24px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 360px) {
  .promo-banner__tag {
    display: none !important;
  }

  .promo-banner__text:first-of-type {
    font-size: 0 !important;
  }

  .promo-banner__text:first-of-type .promo-banner__code {
    font-size: 9.4px !important;
  }

  .promo-banner__copy {
    width: 88px !important;
    min-width: 88px !important;
    padding-left: 20px !important;
    font-size: 8.8px !important;
  }
}

/* Promo polish pass: full black strip, tighter desktop layout, clean mobile line. */
.promo-banner {
  --promo-banner-height: 80px;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--promo-banner-height) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 71, 36, 0.24), transparent 12%),
    radial-gradient(circle at 92% 50%, rgba(255, 71, 36, 0.24), transparent 12%),
    #101010 !important;
  box-shadow: none !important;
}

.promo-banner__inner {
  width: min(1120px, calc(100% - 360px)) !important;
  max-width: 1120px !important;
  height: 52px !important;
  padding: 0 18px 0 22px !important;
  justify-content: center !important;
  gap: 20px !important;
  border-radius: 12px !important;
}

.promo-banner__content {
  flex: 0 1 auto !important;
  justify-content: center !important;
  gap: 18px !important;
}

.promo-banner__actions {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

.promo-banner__text {
  white-space: nowrap !important;
}

.promo-banner__discount {
  position: relative;
}

.promo-banner__discount::before {
  content: "🔥";
  margin-right: 2px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 64, 42, 0.55));
}

.promo-banner__discount::after {
  content: " ✦";
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.38);
}

.promo-banner__copy {
  width: 184px !important;
  min-width: 184px !important;
}

.promo-banner__copy.is-copied {
  animation: promoCopyPulse 0.55s ease;
}

.promo-copy-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483000;
  display: flex;
  min-width: min(330px, calc(100vw - 32px));
  min-height: 54px;
  padding: 14px 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 207, 95, 0.62);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(255, 207, 95, 0.18), transparent 48%),
    rgba(12, 12, 12, 0.96);
  color: #fff4d8;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(255, 199, 84, 0.22);
  font-size: 15px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(0.94);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.promo-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@keyframes promoCopyPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 0 0 4px rgba(255, 207, 95, 0.22),
      0 12px 24px rgba(244, 188, 72, 0.3);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 1100px) {
  .promo-banner {
    --promo-banner-height: 62px;
    padding: 7px 8px !important;
  }

  .promo-banner__inner {
    width: 100% !important;
    height: 48px !important;
    gap: 10px !important;
  }
}

@media (max-width: 640px) {
  .promo-banner {
    --promo-banner-height: 48px;
    padding: 4px 5px !important;
  }

  .promo-banner__inner {
    height: 40px !important;
    padding: 0 5px 0 7px !important;
    gap: 5px !important;
  }

  .promo-banner__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .promo-banner__tag {
    width: 15px !important;
    height: 15px !important;
  }

  .promo-banner__text:first-of-type {
    font-size: 0 !important;
  }

  .promo-banner__text:first-of-type .promo-banner__code {
    font-size: clamp(9px, 2.9vw, 11px) !important;
  }

  .promo-banner__discount {
    gap: 2px !important;
    font-size: 0 !important;
  }

  .promo-banner__discount::before {
    margin-right: 1px;
    font-size: 11px;
  }

  .promo-banner__discount strong {
    font-size: clamp(11px, 3.6vw, 14px) !important;
  }

  .promo-banner__discount::after {
    content: " на все!";
    font-size: clamp(8px, 2.65vw, 10px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: none;
  }

  .promo-banner__divider {
    height: 20px !important;
  }

  .promo-banner__copy {
    width: 96px !important;
    min-width: 96px !important;
    height: 30px !important;
    padding: 0 6px 0 22px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 360px) {
  .promo-banner__tag {
    display: none !important;
  }

  .promo-banner__content {
    gap: 4px !important;
  }

  .promo-banner__copy {
    width: 92px !important;
    min-width: 92px !important;
    padding-left: 18px !important;
    font-size: 8.5px !important;
  }
}

/* Final promo-banner design: reference-style capsule, non-sticky. */
.promo-banner {
  --promo-banner-height: 78px;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  isolation: isolate;
  display: flex;
  width: calc(100% - 28px);
  max-width: 1480px;
  height: var(--promo-banner-height);
  margin: 12px auto 0;
  padding: 10px clamp(18px, 3.2vw, 46px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(216, 168, 76, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 9% 50%, rgba(255, 68, 28, 0.28), transparent 11%),
    radial-gradient(circle at 91% 50%, rgba(255, 68, 28, 0.28), transparent 11%),
    linear-gradient(90deg, #050505 0%, #111 22%, #090909 50%, #111 78%, #050505 100%);
  box-shadow:
    0 1px 0 rgba(255, 229, 177, 0.18) inset,
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 13px 24px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(216, 168, 76, 0.22);
  color: #f8f1e5;
}

.promo-banner::before,
.promo-banner::after {
  content: "ЗНИЖКА";
  position: absolute;
  top: 50%;
  z-index: 0;
  display: flex;
  width: 176px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 71, 43, 0.92);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 73, 44, 0.45), rgba(115, 8, 8, 0.48)),
    rgba(70, 10, 8, 0.9);
  box-shadow:
    0 0 18px rgba(255, 67, 32, 0.82),
    inset 0 0 18px rgba(255, 77, 36, 0.32);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.38);
  transform: translateY(-50%) rotate(-8deg);
}

.promo-banner::before {
  left: clamp(22px, 3.6vw, 58px);
}

.promo-banner::after {
  right: clamp(22px, 3.6vw, 58px);
}

.promo-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(980px, calc(100% - 400px));
  height: 48px;
  margin: 0 auto;
  padding: 0 16px 0 22px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(216, 168, 76, 0.52);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(24, 24, 24, 0.96), rgba(9, 9, 9, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(216, 168, 76, 0.14);
}

.promo-banner__content {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  gap: 22px;
  overflow: visible;
  white-space: nowrap;
}

.promo-banner__tag {
  width: 26px;
  height: 26px;
  color: #ffcc5f;
  filter: drop-shadow(0 0 9px rgba(255, 199, 84, 0.36));
}

.promo-banner__text {
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
}

.promo-banner__code {
  color: #ffc654;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.025em;
}

.promo-banner__discount strong {
  color: #ee332b;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(238, 51, 43, 0.42);
}

.promo-banner__divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.56), transparent);
}

.promo-banner__actions {
  flex: 0 0 auto;
  gap: 0;
}

.promo-banner__copy {
  position: relative;
  display: inline-flex;
  width: 190px;
  min-width: 190px;
  height: 40px;
  padding: 0 22px 0 52px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd76d 0%, #f4bc48 100%);
  color: #0b0b0b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 20px rgba(244, 188, 72, 0.22);
  font-size: 17px;
  font-weight: 900;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-banner__copy::before,
.promo-banner__copy::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.promo-banner__copy::before {
  left: 27px;
  width: 15px;
  height: 18px;
}

.promo-banner__copy::after {
  left: 21px;
  width: 15px;
  height: 18px;
  background: rgba(255, 215, 109, 0.75);
}

.promo-banner__copy:hover {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc95b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 24px rgba(244, 188, 72, 0.3);
  transform: translateY(-1px);
}

.promo-banner + .belfood-modern-header {
  margin-top: 0 !important;
}

.belfood-modern-header {
  top: 0 !important;
}

@media (max-width: 1100px) {
  .promo-banner {
    --promo-banner-height: 66px;
    width: calc(100% - 18px);
    margin-top: 8px;
    padding: 8px 12px;
  }

  .promo-banner::before,
  .promo-banner::after {
    display: none;
  }

  .promo-banner__inner {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 16px;
    gap: 12px;
  }

  .promo-banner__content {
    justify-content: flex-start;
    gap: 12px;
  }

  .promo-banner__text {
    font-size: 16px;
  }

  .promo-banner__code {
    font-size: 18px;
  }

  .promo-banner__discount strong {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .promo-banner {
    --promo-banner-height: 48px;
    width: calc(100% - 10px);
    margin-top: 5px;
    padding: 4px;
    border-radius: 13px;
  }

  .promo-banner__inner {
    height: 38px;
    padding: 0 5px 0 8px;
    gap: 5px;
    border-radius: 10px;
  }

  .promo-banner__content {
    flex: 1 1 auto;
    gap: 5px;
    overflow: hidden;
  }

  .promo-banner__tag {
    width: 16px;
    height: 16px;
  }

  .promo-banner__text {
    gap: 3px;
    font-size: clamp(8px, 2.7vw, 10px);
  }

  .promo-banner__code {
    font-size: clamp(9px, 3vw, 11px);
  }

  .promo-banner__discount strong {
    font-size: clamp(11px, 3.6vw, 14px);
  }

  .promo-banner__divider {
    height: 22px;
  }

  .promo-banner__copy {
    width: 86px;
    min-width: 86px;
    height: 30px;
    padding: 0 7px 0 24px;
    border-radius: 8px;
    font-size: 10px;
  }

  .promo-banner__copy::before {
    left: 12px;
    width: 10px;
    height: 12px;
    border-width: 1.5px;
  }

  .promo-banner__copy::after {
    left: 8px;
    width: 10px;
    height: 12px;
    border-width: 1.5px;
  }
}

@media (max-width: 360px) {
  .promo-banner__inner {
    padding-left: 5px;
  }

  .promo-banner__content {
    gap: 4px;
  }

  .promo-banner__tag {
    display: none;
  }

  .promo-banner__text:first-of-type {
    font-size: 0;
  }

  .promo-banner__text:first-of-type .promo-banner__code {
    font-size: 9.4px;
  }

  .promo-banner__text {
    font-size: 7.8px;
  }

  .promo-banner__code {
    font-size: 8.6px;
  }

  .promo-banner__discount strong {
    font-size: 11px;
  }

  .promo-banner__copy {
    width: 88px;
    min-width: 88px;
    padding-left: 20px;
    font-size: 8.8px;
  }
}

/* Promo stays in the page flow; only the main header sticks while scrolling. */
.promo-banner {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 10010;
}

.promo-banner + .belfood-modern-header {
  margin-top: 0 !important;
}

.belfood-modern-header {
  top: 0 !important;
}

.promo-banner__inner {
  max-width: 900px;
  padding: 0 14px;
  gap: 16px;
}

.promo-banner__content {
  flex: 0 1 auto;
  overflow: hidden;
}

.promo-banner__actions {
  gap: 0;
}

.promo-banner__copy {
  width: 124px;
  min-width: 124px;
}

@media (max-width: 767px) {
  .promo-banner {
    padding: 4px 5px;
  }

  .promo-banner__inner {
    max-width: none;
    padding: 0 6px;
    justify-content: space-between;
    gap: 6px;
  }

  .promo-banner__content {
    flex: 1 1 auto;
    gap: 5px;
  }

  .promo-banner__tag {
    width: 15px;
    height: 15px;
  }

  .promo-banner__text {
    gap: 3px;
    font-size: clamp(9px, 2.75vw, 10.5px);
  }

  .promo-banner__code {
    font-size: clamp(9.5px, 2.9vw, 11.5px);
  }

  .promo-banner__divider {
    height: 17px;
  }

  .promo-banner__copy {
    width: 88px;
    min-width: 88px;
    height: 28px;
    padding: 0 6px;
    font-size: 9.5px;
  }
}

@media (max-width: 340px) {
  .promo-banner__inner {
    padding: 0 4px;
    gap: 4px;
  }

  .promo-banner__content {
    gap: 4px;
  }

  .promo-banner__text {
    font-size: 8.3px;
  }

  .promo-banner__code {
    font-size: 8.8px;
  }

  .promo-banner__tag {
    width: 13px;
    height: 13px;
  }

  .promo-banner__copy {
    width: 82px;
    min-width: 82px;
    font-size: 8.6px;
  }
}

@media (max-width: 767px) {
  :root {
    --promo-banner-height: 44px;
  }

  .promo-banner {
    padding: 4px 6px;
  }

  .promo-banner__inner {
    max-width: none;
    padding: 0 6px;
    gap: 7px;
    border-radius: 8px;
  }

  .promo-banner__content {
    flex: 1 1 auto;
    gap: 7px;
  }

  .promo-banner__actions {
    gap: 5px;
  }

  .promo-banner__tag {
    width: 17px;
    height: 17px;
  }

  .promo-banner__text {
    gap: 4px;
    font-size: 10.5px;
  }

  .promo-banner__code {
    font-size: 11.5px;
  }

  .promo-banner__divider {
    height: 19px;
  }

  .promo-banner__copy {
    min-width: 84px;
    height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 11px;
  }

  .promo-banner__close {
    width: 22px;
    height: 28px;
    font-size: 22px;
  }
}

.promo-banner + .belfood-modern-header {
  margin-top: var(--promo-banner-height);
}

.belfood-modern-header {
  top: var(--promo-banner-height) !important;
}

body.promo-banner-closed .promo-banner {
  display: none;
}

body.promo-banner-closed .promo-banner + .belfood-modern-header {
  margin-top: 0;
}

body.promo-banner-closed .belfood-modern-header {
  top: 0 !important;
}

@media (max-width: 360px) {
  .promo-banner__inner {
    gap: 5px;
    padding: 0 4px;
  }

  .promo-banner__content {
    gap: 5px;
  }

  .promo-banner__text {
    font-size: 9px;
  }

  .promo-banner__code {
    font-size: 10px;
  }

  .promo-banner__copy {
    min-width: 72px;
    padding: 0 7px;
    font-size: 9.5px;
  }

  .promo-banner__close {
    width: 18px;
  }
}

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  overflow-x: hidden;
}

main,
.page-content,
.hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-header + * {
  margin-top: 0 !important;
}

video {
  width: 100%;
  pointer-events: none;
}

img {
  max-width: 100%;
}

.product-image img,
.product-gallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.product-gallery {
  max-width: 100%;
}

/* HEADER / NAVBAR */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.site-header .mx-auto {
  padding-top: 6px;
  padding-bottom: 6px;
}

.site-header .h-16 {
  height: 40px !important;
}

.site-header .nav-link {
  line-height: 1.1;
}

#cart-toggle {
  padding: 6px 10px !important;
}

#cart-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-link {
  position: relative;
  padding-bottom: 2px;
  color: #64748b;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3e4b5, var(--accent));
  transition: width 0.22s ease;
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-link:hover::after {
  width: 100%;
}

@media (max-width: 767px) {
  .site-header .mx-auto {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .site-header .h-16 {
    height: 40px !important;
  }

  .site-header .nav-link {
    font-size: 11px;
  }

  .site-header nav.md\:hidden {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px !important;
    padding-bottom: 8px !important;
    overflow: hidden;
  }

  .site-header nav.md\:hidden .nav-link {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: 10.5px;
    line-height: 1;
  }

  #cart-toggle {
    padding: 8px 10px !important;
  }

  #cart-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* Shared black header shown before cart.js replaces legacy page headers. */
.site-header,
.belfood-modern-header {
  background: rgba(18, 18, 18, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.belfood-modern-header{
  position:sticky !important;
  top:0 !important;
  z-index:10020 !important;
  width:100%;
  min-height:64px;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.belfood-modern-header *{
  box-sizing:border-box;
}

.belfood-modern-header__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
  width:100%;
  max-width:none;
  height:64px;
  margin:0 auto;
  padding:0 44px;
  align-items:center;
  gap:12px;
}

.belfood-modern-header__left,
.belfood-modern-header__actions{
  display:flex;
  min-width:0;
  align-items:center;
}

.belfood-modern-header__left{
  justify-content:flex-start;
  gap:16px;
}

.belfood-modern-header__actions{
  position:relative;
  grid-column:3;
  justify-content:flex-end;
  gap:8px;
}

.belfood-modern-brand{
  position:absolute;
  left:50%;
  display:inline-flex;
  width:116px;
  height:64px;
  min-height:42px;
  padding:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform:translateX(-50%);
  text-decoration:none;
}

.belfood-modern-brand img{
  display:block;
  width:auto !important;
  max-width:none !important;
  height:124px !important;
  object-fit:contain;
}

.belfood-menu-toggle{
  appearance:none;
  display:inline-flex;
  width:auto;
  height:42px;
  padding:0 6px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.belfood-menu-toggle__label{
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.belfood-menu-toggle svg.belfood-menu-toggle__chevron{
  display:block;
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.belfood-modern-header__actions .auth-account,
.belfood-modern-header__actions .user-menu{
  position:relative;
  display:flex;
  align-items:center;
}

.belfood-modern-header__actions #cart-toggle,
.belfood-modern-header__actions .profile-btn,
.belfood-modern-header__actions .user-trigger{
  display:inline-flex !important;
  width:auto !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 18px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08) !important;
  text-decoration:none;
}

.belfood-modern-header__actions .profile-btn,
.belfood-modern-header__actions .user-trigger{
  min-width:138px !important;
  font-size:16px !important;
  font-weight:700 !important;
}

.belfood-modern-header__actions #cart-toggle{
  position:relative;
  width:52px !important;
  min-width:52px !important;
  padding:0 !important;
  gap:0 !important;
}

.belfood-modern-header__actions #cart-toggle svg{
  display:block;
  width:24px !important;
  height:24px !important;
  color:#fff !important;
  stroke:#fff !important;
}

.belfood-modern-header__actions .profile-btn > svg,
.belfood-modern-header__actions .profile-icon{
  display:inline-flex !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
}

.belfood-modern-header__actions .profile-btn > svg,
.belfood-modern-header__actions .profile-icon svg{
  width:18px !important;
  height:18px !important;
}

.belfood-modern-header__actions .profile-label,
.belfood-modern-header__actions .user-text{
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  clip:auto !important;
  border:0 !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.belfood-modern-header .cart-toggle-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  border:0 !important;
  white-space:nowrap !important;
}

.belfood-modern-header__actions #cart-count{
  position:absolute !important;
  top:-5px !important;
  right:0 !important;
  display:flex !important;
  min-width:23px !important;
  height:23px !important;
  padding:0 5px !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#fff !important;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.belfood-modern-header .belfood-menu-toggle {
  color: #fff !important;
}

.site-header nav.hidden.md\:flex {
  display: none;
}

.site-header nav.md\:hidden {
  display: flex;
}

@media (min-width: 768px) {
  .site-header nav.hidden.md\:flex {
    display: flex;
  }

  .site-header nav.md\:hidden {
    display: none;
  }
}

@media (max-width:640px){
  .belfood-modern-header{
    min-height:58px;
  }

  .belfood-modern-header__inner{
    height:58px;
    padding:0 12px;
    grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto;
    gap:6px;
  }

  .belfood-modern-brand{
    width:92px;
    height:58px;
    min-height:40px;
  }

  .belfood-modern-brand img{
    height:104px !important;
  }

  .belfood-menu-toggle,
  .belfood-modern-header__actions #cart-toggle,
  .belfood-modern-header__actions .profile-btn,
  .belfood-modern-header__actions .user-trigger{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    gap:0 !important;
    border-radius:13px !important;
  }

  .belfood-menu-toggle{
    width:auto !important;
    min-width:0 !important;
    padding:0 6px !important;
    gap:7px !important;
    border-radius:0 !important;
  }

  .belfood-modern-header__actions{
    min-width:max-content;
    gap:4px;
  }

  .belfood-modern-header__actions .profile-label,
  .belfood-modern-header__actions .user-text,
  .belfood-modern-header__actions .cart-toggle-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    border:0 !important;
    white-space:nowrap !important;
  }
}

/* HERO */

.hero-section {
  position: relative;
  background: radial-gradient(circle at top, #fdf5e3 0, #fafafa 45%, #e5edff 100%);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero,
.product-page,
.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  .popcorn-page .site-header {
    height: 56px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .popcorn-page .site-header .h-16 {
    height: 56px !important;
  }

  .popcorn-page .site-header img,
  .popcorn-page .site-header svg {
    transform: scale(0.9);
  }

  body.popcorn-page .max-w-6xl:first-of-type {
    padding-top: 0 !important;
  }
}

body.popcorn-page{
  --popcorn-header-height: 60px;
}

body.popcorn-page .site-header{
  min-height: var(--popcorn-header-height) !important;
}

body.popcorn-page .site-header .max-w-6xl,
body.popcorn-page .site-header .max-w-6xl > div{
  min-height: 60px !important;
  align-items: center !important;
}

body.popcorn-page .site-header .max-w-6xl{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-title {
  letter-spacing: 0;
}

.hero-title__mobile-break{
  display:none;
}

/* CLIENTS */

.clients {
  padding: 80px 0;
  text-align: center;
  background: #f1f5f9;
}

.clients h2 {
  font-size: 32px;
  margin-bottom: 50px;
}

.clients-section {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.clients-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
}

.clients-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 136px;
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  overflow: hidden;
}

.clients-logos img,
.clients-logos div,
.clients-logos * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.clients-logos img {
  width: 100%;
  max-width: 250px;
  height: 66px;
  object-fit: contain;
  display: block;
  padding: 0 !important;
  margin: 0;
  filter: none;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.clients-logo-slot--objora img {
  max-width: 205px;
  height: 72px;
}

.clients-logo-slot--novus img {
  max-width: 195px;
  height: 60px;
}

.clients-logo-slot--hop-hey img {
  max-width: 94px;
  height: 94px;
}

.clients-logo-slot--alcomag img {
  max-width: 286px;
  height: 72px;
}

.clients-logo-slot--silpo img {
  max-width: 190px;
  height: 66px;
}

.clients-logo-slot--avrora img {
  max-width: 220px;
  height: 82px;
}

.clients-logos img:hover {
  transform: scale(1.03);
  filter: none;
}

/* PRODUCT & CATEGORY CARDS */

.product-card,
.category-card {
  border-radius: 18px;
  background: #ffffff;

  /* добавили золотую рамку */
  border: 1px solid rgba(201,164,92,0.18);

  box-shadow:
  0 14px 40px rgba(15, 23, 42, 0.08);

  overflow: hidden;

  transition:
  transform 0.24s ease,
  box-shadow 0.24s ease,
  border-color 0.24s ease;
}

.product-card:hover,
.category-card:hover {

  transform: translateY(-8px);

  /* золотое свечение */
  box-shadow:
  0 26px 70px rgba(15,23,42,0.14),
  0 0 25px rgba(201,164,92,0.25);

  border-color: rgba(201,164,92,0.35);
}

.product-card img,
.category-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img,
.category-card:hover img {
  transform: scale(1.04);
}

.product-card h4 {
  font-size: 1rem;
  font-weight: 600;
}

.product-card p {
  font-weight: 600;
  color: var(--text-main);
}

/* PRIMARY CTA */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #e8c98a, #c9a45f);
  color: #1a1a1a;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f0d79c, #d4b06b);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"],
.btn-primary--disabled {
  background: #e5e7eb;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover,
.btn-primary--disabled:hover {
  background: #e5e7eb;
  transform: none;
}

.product-card--out-of-stock {
  opacity: 0.72;
}

.product-card--out-of-stock:hover {
  transform: none;
}

.product-badge--out-of-stock {
  background: #e5e7eb;
  color: #475569;
}

.product-stock-message {
  color: #64748b;
}

button {
  cursor: pointer;
  border: none;
}

.site-message {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: min(92vw, 320px);
  max-width: min(92vw, 420px);
  padding: 14px 18px;
  border-radius: var(--notification-radius);
  border: 1px solid var(--notification-border);
  background:
    radial-gradient(circle at top right, rgba(201, 164, 92, 0.12), transparent 38%),
    var(--notification-bg);
  color: var(--notification-text);
  box-shadow: var(--notification-shadow);
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease, bottom 0.28s ease;
  z-index: 9999;
}

.site-message.show {
  opacity: 1;
  bottom: 36px;
  transform: translateX(-50%) translateY(0);
}

.hidden {
  display: none;
}

/* CART ICON BUTTON */

#cart-toggle {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.16);
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease;
}

#cart-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.25);
}

/* CART DRAWER CONTROLS */

#cart-items button.minus,
#cart-items button.plus {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#cart-items button.remove {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 1rem;
}

/* SCROLL REVEAL ANIMATION */

.js-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width:768px), (hover:none), (pointer:coarse) {
  .js-reveal,
  .fade-in,
  .product-card,
  .product-card.show,
  .fade-in.show {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.18s !important;
  }

  .product-card img,
  .hero-item img,
  .category-card img {
    transition-duration: 0.2s !important;
  }

  .belfood-page-loader {
    display: none !important;
  }
}

/* FOOTER */

.contacts-card {
  border-radius: 24px;
  border: 1px solid rgba(201, 164, 92, 0.18);
  background: linear-gradient(135deg, rgba(253, 245, 227, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  padding: 2rem;
}

.contacts-heading h2 {
  margin: 0.35rem 0 0;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--text-main);
}

.contacts-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.contacts-copy {
  margin: 0.9rem 0 0;
  max-width: 42rem;
  font-size: 0.95rem;
  color: #64748b;
}

.contacts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.belfood-bestsellers {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  border: 1px solid rgba(201, 164, 92, 0.14);
  background:
    radial-gradient(circle at top, rgba(255, 233, 185, 0.5), transparent 34%),
    radial-gradient(circle at bottom, rgba(226, 236, 255, 0.34), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 246, 0.96));
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
  padding: clamp(28px, 4vw, 52px);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.belfood-bestsellers__decor {
  pointer-events: none;
  position: absolute;
  display: grid;
  gap: 10px;
  opacity: 0.9;
}

.belfood-bestsellers__decor span {
  display: block;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.08));
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.belfood-bestsellers__decor--left {
  top: 42px;
  left: 28px;
}

.belfood-bestsellers__decor--left span:nth-child(1) {
  color: #f2b93b;
  font-size: 28px;
}

.belfood-bestsellers__decor--left span:nth-child(2) {
  margin-left: 18px;
  font-size: 28px;
}

.belfood-bestsellers__decor--left span:nth-child(3) {
  margin-left: 6px;
  font-size: 24px;
}

.belfood-bestsellers__decor--right {
  top: 34px;
  right: 32px;
  justify-items: end;
}

.belfood-bestsellers__decor--right span:nth-child(1) {
  font-size: 36px;
}

.belfood-bestsellers__decor--right span:nth-child(2) {
  margin-right: 22px;
  font-size: 34px;
}

.belfood-bestsellers__decor--right span:nth-child(3) {
  font-size: 28px;
}

.belfood-bestsellers__nav {
  position: absolute;
  top: 58%;
  z-index: 2;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 1.7rem;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.belfood-bestsellers__nav--prev {
  left: 18px;
}

.belfood-bestsellers__nav--next {
  right: 18px;
}

.belfood-bestsellers__header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.belfood-bestsellers__eyebrow {
  margin: 0;
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.belfood-bestsellers__title {
  margin: 14px 0 0;
  color: #0f172a;
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.belfood-bestsellers__copy {
  margin: 18px auto 0;
  max-width: 620px;
  color: #7c8aa5;
  font-size: 1rem;
  line-height: 1.55;
}

.belfood-bestsellers__headline-note {
  position: absolute;
  top: 86px;
  left: -82px;
  color: #efb43f;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  line-height: 1.05;
  transform: rotate(-10deg);
  transition: color 0.28s ease, opacity 0.28s ease;
}

.belfood-bestsellers__headline-note::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -6px;
  width: 54px;
  height: 20px;
  border-bottom: 3px solid #efb43f;
  border-right: 3px solid #efb43f;
  border-radius: 0 0 20px 0;
  transform: rotate(14deg);
}

.belfood-bestsellers__headline-note-secondary {
  position: absolute;
  top: 68px;
  right: -54px;
  color: #efb43f;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  line-height: 1.05;
  transform: rotate(8deg);
  transition: color 0.28s ease, opacity 0.28s ease;
}

.belfood-bestsellers__headline-note-secondary::after {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 12px;
  width: 44px;
  height: 16px;
  border-top: 3px solid #efb43f;
  border-right: 3px solid #efb43f;
  border-radius: 0 18px 0 0;
  transform: rotate(8deg);
}

.belfood-bestsellers__headline-spark {
  position: absolute;
  top: 22px;
  right: -18px;
  color: #efb43f;
  font-size: 1.7rem;
  transition: color 0.28s ease, opacity 0.28s ease;
}

.belfood-bestsellers__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.belfood-bestsellers__tabs::-webkit-scrollbar {
  display: none;
}

.belfood-bestsellers__tab {
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #0f172a;
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 30px;
  transition:
    background-color 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}

.belfood-bestsellers__tab::before {
  content: var(--belfood-tab-icon, "");
  margin-right: 10px;
}

.belfood-bestsellers__tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.belfood-bestsellers__tab.is-active {
  border-color: rgba(239, 180, 63, 0.56);
  background: linear-gradient(135deg, #ffd45f, #f2b93b);
  color: #0f172a;
  box-shadow: 0 14px 34px rgba(242, 185, 59, 0.28);
}

.belfood-bestsellers__panel {
  position: relative;
  z-index: 1;
  margin-top: 30px;
}

.belfood-bestsellers__panel.is-switching {
  pointer-events: none;
}

.belfood-bestsellers__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.belfood-bestsellers__panel.is-switching .belfood-bestsellers__grid {
  opacity: 0;
  transform: translateY(12px);
}

.belfood-bestsellers[data-bestseller-theme="new"] {
  background:
    radial-gradient(circle at top, rgba(255, 223, 148, 0.42), transparent 32%),
    radial-gradient(circle at bottom, rgba(232, 239, 255, 0.34), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.97));
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestsellers__headline-note {
  opacity: 1;
  left: -58px;
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestsellers__headline-note-secondary {
  opacity: 1;
  top: 88px;
  right: -8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5c45, #d61f16);
  color: #fff;
  font-size: 0.96rem;
  box-shadow: 0 16px 30px rgba(214, 31, 22, 0.24);
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestsellers__headline-note-secondary::after {
  display: none;
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestsellers__headline-spark {
  color: #f3b336;
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestseller-card__image-wrap {
  background:
    radial-gradient(circle at top, rgba(255, 235, 196, 0.34), transparent 38%),
    linear-gradient(180deg, #fffdfa, #ffffff 78%);
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestseller-card__badge--blue {
  background: linear-gradient(135deg, #4d8cff, #2f63df);
}

.belfood-bestsellers[data-bestseller-theme="new"] .belfood-bestseller-card__image {
  filter: saturate(1.04) contrast(1.02);
}

.belfood-bestsellers[data-bestseller-theme="kids"] {
  background:
    radial-gradient(circle at top, rgba(255, 229, 156, 0.38), transparent 32%),
    radial-gradient(circle at right, rgba(216, 235, 255, 0.4), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 244, 0.98));
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__headline-note {
  opacity: 1;
  left: -50px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__headline-note-secondary {
  opacity: 1;
  top: 88px;
  right: -8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5c45, #d61f16);
  color: #fff;
  font-size: 0.96rem;
  box-shadow: 0 16px 30px rgba(214, 31, 22, 0.24);
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__headline-note-secondary::after {
  display: none;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__headline-spark {
  color: #f3b336;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__eyebrow {
  color: #efb43f;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__title::before {
  content: "♕";
  display: inline-block;
  margin-right: 12px;
  color: #efb43f;
  font-size: 0.42em;
  transform: translateY(-10px);
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__decor--left {
  top: 18px;
  left: 20px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__decor--right {
  top: 20px;
  right: 16px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestsellers__decor span {
  filter: drop-shadow(0 14px 20px rgba(15, 23, 42, 0.1));
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card {
  border-radius: 34px;
  border-color: rgba(255, 246, 225, 0.92);
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.08);
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__media {
  padding: 20px 20px 4px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image-wrap {
  min-height: 360px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top, rgba(255, 236, 180, 0.25), transparent 34%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 252, 246, 0.96));
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image {
  max-height: 360px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__body {
  padding: 0 22px 26px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge {
  top: 14px;
  left: 18px;
  min-height: 42px;
  max-width: 190px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d84ad2, #8b5cf6);
  box-shadow: 0 16px 30px rgba(216, 74, 210, 0.24);
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge::before {
  content: "⭐";
  margin-right: 8px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title {
  font-size: 1.12rem;
  line-height: 1.14;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__rating {
  margin-top: 10px;
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__old-price {
  font-size: 0.95rem;
}

.belfood-bestsellers[data-bestseller-theme="sale"] {
  background:
    radial-gradient(circle at top, rgba(255, 225, 139, 0.4), transparent 32%),
    radial-gradient(circle at bottom, rgba(231, 241, 222, 0.34), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 245, 0.98));
}

.belfood-bestsellers[data-bestseller-theme="sale"] .belfood-bestsellers__headline-note {
  opacity: 1;
  left: -54px;
  color: #efb43f;
}

.belfood-bestsellers[data-bestseller-theme="sale"] .belfood-bestsellers__headline-note-secondary {
  opacity: 1;
  top: 90px;
  right: -8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5c45, #d61f16);
  color: #fff;
  font-size: 0.96rem;
  box-shadow: 0 16px 30px rgba(214, 31, 22, 0.24);
}

.belfood-bestsellers[data-bestseller-theme="sale"] .belfood-bestsellers__headline-note-secondary::after {
  display: none;
}

.belfood-bestsellers[data-bestseller-theme="sale"] .belfood-bestsellers__headline-spark {
  color: #f3b336;
}

.belfood-bestseller-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(201, 164, 92, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.belfood-bestseller-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 164, 92, 0.24);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
}

.belfood-bestseller-card__media {
  position: relative;
  padding: 18px 18px 8px;
}

.belfood-bestseller-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(255, 238, 201, 0.56), transparent 44%),
    linear-gradient(180deg, #fffdfa, #ffffff);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.belfood-bestseller-card__image {
  width: 100%;
  max-height: 285px;
  object-fit: contain;
  transition: transform 0.38s ease;
}

.belfood-bestseller-card:hover .belfood-bestseller-card__image {
  transform: scale(1.04);
}

.belfood-bestseller-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 148px;
  padding: 8px 14px;
  border-radius: 18px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 16px 30px rgba(59, 130, 246, 0.22);
}

.belfood-bestseller-card__badge--gold {
  background: linear-gradient(135deg, #f4b637, #ef9e1d);
  box-shadow: 0 16px 30px rgba(244, 182, 55, 0.28);
}

.belfood-bestseller-card__badge--blue {
  background: linear-gradient(135deg, #ff5c45, #d61f16);
  box-shadow: 0 16px 30px rgba(214, 31, 22, 0.24);
}

.belfood-bestseller-card__badge--green {
  color: #fff7da;
  background: linear-gradient(135deg, #ffbf22, #f2a100);
  border: 2px dashed rgba(255, 248, 214, 0.92);
  box-shadow: 0 16px 30px rgba(242, 161, 0, 0.24);
}

.belfood-bestseller-card__discount {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff5c45, #d61f16);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 16px 30px rgba(214, 31, 22, 0.26);
}

.belfood-bestseller-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 20px 20px;
}

.belfood-bestseller-card__title {
  text-decoration: none;
  margin: 14px 0 0;
  color: #0f172a;
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  font-weight: 600;
  line-height: 1.1;
}

.belfood-bestseller-card__meta {
  margin-top: 10px;
  color: #7c8aa5;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

.belfood-bestseller-card__title:hover {
  color: #1f3357;
}

.belfood-bestseller-card__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
}

.belfood-bestseller-card__price {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.8rem, 2.2vw, 2.3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.belfood-bestseller-card__price span {
  font-size: 0.58em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.belfood-bestseller-card__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.belfood-bestseller-card__price-block.is-sale {
  gap: 4px;
}

.belfood-bestseller-card__old-price {
  margin: 0;
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.belfood-bestseller-card__old-price span {
  font-size: 0.95em;
}

.belfood-bestseller-card__price.is-sale {
  color: #e3342f;
}

.belfood-bestseller-card__description,
.belfood-bestseller-card__flavor {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.45;
}

.belfood-bestseller-card__button {
  min-width: 148px;
  margin-top: 0 !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  font-size: 0.96rem !important;
  box-shadow: 0 14px 30px rgba(242, 185, 59, 0.24);
}

.belfood-bestsellers__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.belfood-bestsellers__all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font-size: 1rem;
  font-weight: 600;
  padding: 18px 34px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.belfood-bestsellers__all-link:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1024px) {
  .belfood-bestsellers__decor {
    opacity: 0.55;
  }

  .belfood-bestsellers__nav {
    display: none;
  }

  .belfood-bestsellers__headline-note {
    left: -16px;
  }

  .belfood-bestsellers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .belfood-bestsellers {
    border-radius: 28px;
    padding: 24px 10px;
  }

  .belfood-bestsellers__decor {
    display: grid;
    gap: 4px;
    opacity: 0.82;
  }

  .belfood-bestsellers__decor--left {
    top: 16px;
    left: 10px;
  }

  .belfood-bestsellers__decor--right {
    top: 18px;
    right: 10px;
  }

  .belfood-bestsellers__decor span,
  .belfood-bestsellers__decor--left span:nth-child(n),
  .belfood-bestsellers__decor--right span:nth-child(n) {
    margin: 0;
    font-size: 17px;
  }

  .belfood-bestsellers__nav {
    display: none;
  }

  .belfood-bestsellers__header {
    max-width: none;
    padding: 0 28px;
  }

  .belfood-bestsellers__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .belfood-bestsellers__title {
    margin-top: 8px;
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 0.94;
  }

  .belfood-bestsellers__copy {
    max-width: 300px;
    margin-top: 12px;
    font-size: 0.76rem;
    line-height: 1.45;
  }

  .belfood-bestsellers__headline-note,
  .belfood-bestsellers__headline-note-secondary,
  .belfood-bestsellers__headline-spark {
    display: none;
  }

  .belfood-bestsellers__tabs {
    justify-content: flex-start;
    margin-right: -4px;
    margin-left: -4px;
    padding-right: 18px;
    padding-left: 4px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    scroll-padding-right: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .belfood-bestsellers__tab {
    flex-shrink: 0;
    padding: 14px 22px;
    font-size: 0.95rem;
    white-space: nowrap;
    scroll-snap-align: center;
  }

  .belfood-bestseller-card__image-wrap {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 13px;
  }

  .belfood-bestsellers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 10px;
    align-items: start;
  }

  .belfood-bestseller-card {
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: start;
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  }

  .belfood-bestseller-card__media,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__media {
    padding: 7px 7px 0;
  }

  .belfood-bestseller-card__image,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .belfood-bestseller-card__badge,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge {
    top: 7px;
    left: 7px;
    min-height: 27px;
    max-width: calc(100% - 14px);
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 0.66rem;
  }

  .belfood-bestseller-card__discount {
    top: 8px;
    right: 8px;
    min-width: 45px;
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: 0.72rem;
  }

  .belfood-bestseller-card__body,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__body {
    flex: 0 0 auto;
    padding: 0 10px 11px;
  }

  .belfood-bestseller-card__title,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title {
    display: -webkit-box;
    min-height: 34px;
    margin-top: 9px;
    overflow: hidden;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .belfood-bestseller-card__description,
  .belfood-bestseller-card__flavor,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor {
    display: -webkit-box;
    min-height: 28px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 0.67rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .belfood-bestseller-card__rating {
    display: flex !important;
    min-height: 18px;
    margin-top: 5px;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .belfood-bestseller-card__rating .stars {
    font-size: 12px;
    letter-spacing: -1px;
  }

  .belfood-bestseller-card__rating .reviews-count {
    margin-left: 2px;
    font-size: 10px;
  }

  .belfood-bestseller-card__bottom {
    align-items: center;
    flex-direction: row;
    gap: 5px;
    margin-top: 0;
    padding-top: 10px;
  }

  .belfood-bestseller-card__price {
    font-size: clamp(0.9rem, 4.2vw, 1.08rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .belfood-bestseller-card__old-price {
    font-size: 0.67rem;
  }

  .belfood-bestseller-card__button {
    width: auto;
    min-width: 68px;
    height: 36px;
    min-height: 36px;
    margin-left: auto;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(218, 165, 32, 0.28);
  }

  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image-wrap {
    border-radius: 17px;
  }

  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image-wrap {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge::before {
    margin-right: 4px;
  }

  .belfood-bestsellers__all-link {
    width: 100%;
    padding: 16px 24px;
  }
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 220px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.95rem 1rem;
  color: var(--text-main);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 164, 92, 0.35);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.contact-item span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contact-item strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.contact-item small {
  font-size: 0.84rem;
  color: #64748b;
}

.contact-item-muted {
  cursor: default;
}

.contact-item-muted:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: none;
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3e4b5, rgba(201, 164, 92, 0.85));
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(201, 164, 92, 0.28);
}

.contact-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

@media (max-width: 1024px) {
  .clients-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .clients-logos {
    gap: 18px;
  }

  .clients-logo-slot {
    min-height: 112px;
    padding: 12px 10px;
    border-radius: 22px;
  }

  .clients-logos img {
    max-width: 180px;
    height: 58px;
  }

  .clients-logo-slot--objora img {
    max-width: 180px;
    height: 68px;
  }

  .clients-logo-slot--novus img {
    max-width: 145px;
    height: 54px;
  }

  .clients-logo-slot--hop-hey img {
    max-width: 80px;
    height: 82px;
  }

  .clients-logo-slot--alcomag img {
    max-width: 220px;
    height: 60px;
  }

  .clients-logo-slot--silpo img {
    max-width: 150px;
    height: 58px;
  }

  .clients-logo-slot--avrora img {
    max-width: 180px;
    height: 72px;
  }
}

.site-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.site-footer__container{
  width:100%;
  max-width:1500px;
}

.site-footer__inner{
  display:grid !important;
  grid-template-columns:minmax(220px, .8fr) auto auto;
  align-items:center !important;
  width:100%;
  gap:24px 40px !important;
}

.site-footer__links{
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap;
  min-width:0;
  gap:clamp(18px, 2vw, 36px) !important;
}

.site-footer__links a{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

.site-footer__copyright{
  grid-column:1 / -1;
  flex-shrink:0;
  text-align:right;
}

.site-footer__bottom{
  display:contents;
}

@media (max-width:1199px){
  .site-footer__inner{
    grid-template-columns:1fr auto;
  }

  .site-footer__links{
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media (max-width: 767px) {
  .site-footer{
    padding-top:1.5rem !important;
    padding-bottom:1.5rem !important;
    overflow-x:hidden;
    background:
      radial-gradient(circle at 90% 5%, rgba(219,181,91,.12), transparent 32%),
      linear-gradient(180deg, #fff 0%, #fbfaf7 100%) !important;
  }

  .site-footer__inner{
    grid-template-columns:1fr;
    align-items:flex-start !important;
    text-align:left;
    gap:0 !important;
    padding:24px 20px;
    border:1px solid rgba(201,164,92,.2);
    border-radius:24px;
    background:rgba(255,255,255,.82);
    box-shadow:0 14px 36px rgba(15,23,42,.06);
  }

  .site-footer__brand{
    width:100%;
    padding-bottom:18px;
    border-bottom:1px solid rgba(148,163,184,.2);
  }

  .site-footer__brand > p:first-child{
    font-size:1.05rem;
  }

  .site-footer__brand > p:last-child{
    max-width:260px;
    line-height:1.55;
  }

  .site-footer__links{
    display:grid !important;
    grid-column:auto;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:13px 18px !important;
    padding:20px 0;
    border-bottom:1px solid rgba(148,163,184,.2);
    font-size:14px;
    line-height:1.45;
  }

  .site-footer__links a{
    white-space:normal;
  }

  .site-footer__copyright{
    grid-column:auto;
    width:100%;
    padding-top:0;
    text-align:center;
  }

  .site-footer__bottom{
    display:flex;
    width:100%;
    flex-direction:column;
    gap:16px;
    padding-top:18px;
  }

  .site-footer .payment-logos{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    width:100%;
    gap:10px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .site-footer .payment-logos img{
    width:100%;
    height:25px;
    max-width:64px;
    justify-self:center;
  }
}

.cart-footer{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,0.1);
  display:flex;
  flex-direction:column;
  gap:12px;
  }
  
  .cart-total{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  font-weight:600;
  }
  
  .checkout-btn{
  background:linear-gradient(135deg,#e7c98b,#c9a45c);
  padding:14px;
  border-radius:999px;
  font-weight:600;
  border:none;
  cursor:pointer;
  }
  
  .checkout-btn:hover{
  transform:scale(1.03);
  box-shadow:0 10px 25px rgba(201,164,92,.4);
  }
  
  .clear-cart-btn{
  background:#f1f5f9;
  padding:12px;
  border-radius:999px;
  font-size:14px;
  }
  /* ===== BELFOOD GOLD STYLE ===== */

:root{
  --gold-main:#c9a45c;
  --gold-light:#e7c98b;
  --gold-soft:#d6b97a;
  }

  /* ===== BELFOOD PREMIUM UI ===== */

/* SECTION TITLES GOLD LINE */

.section-title{
  position:relative;
  }
  
  .section-title::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-main));
  }
  
  /* PRODUCT BADGE (SALE / TOP) */
  
  .product-badge{
    position:absolute;
    top:12px;
    left:12px;
    padding:6px 14px;
    font-size:13px;
    font-weight:600;
    border-radius:999px;
    
    background:linear-gradient(135deg,#E7C97F,#C9A64E);
    color:#111827;
    
    box-shadow:0 8px 22px rgba(201,164,92,0.45);
    
    letter-spacing:0.02em;
    }

  .product-badge--out-of-stock{
    background:#e5e7eb;
    color:#475569;
    box-shadow:none;
  }
  
  /* PREMIUM PRODUCT MODAL */
  
  #product-modal{
  backdrop-filter:blur(8px);
  }
  
  #product-modal h2{
  font-size:28px;
  font-weight:600;
  }
  
  #product-modal p{
  color:#475569;
  line-height:1.5;
  }
  
  /* PRODUCT THUMBNAILS */
  
  .product-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  }
  
  .product-thumbs div{
  width:60px;
  height:60px;
  border-radius:10px;
  background:#f1f5f9;
  }
  
  /* FLOATING CART */
  
  #floating-cart{
  transition:
  transform .2s ease,
  box-shadow .2s ease;
  }
  
  #floating-cart:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  }
  
  /* FAQ ACCORDION */
  
  .faq-item{
  border-bottom:1px solid rgba(148,163,184,.2);
  padding:16px 0;
  cursor:pointer;
  }
  
  .faq-question{
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  }
  
  .faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  color:#64748b;
  margin-top:8px;
  }
  
  .faq-item.active .faq-answer{
  max-height:200px;
  }
  
  /* CTA SECTION */
  
  .cta-section{
  background:linear-gradient(
  180deg,
  #fff,
  #fff8e6
  );
  border-radius:20px;
  padding:60px 20px;
  text-align:center;
  }
  
  /* PREMIUM BUTTON */
  
  .btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold-main));
  border-radius:999px;
  padding:14px 26px;
  font-weight:600;
  box-shadow:0 10px 30px rgba(201,164,92,.4);
  transition:
  transform .2s ease,
  box-shadow .2s ease;
  }
  
  .btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(201,164,92,.5);
  }
  
  /* PREMIUM CARD HOVER */
  
  .product-card{
  position:relative;
  }
  
  .product-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  opacity:0;
  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,.4),
  transparent
  );
  transition:opacity .4s ease;
  }
  
  .product-card:hover::before{
  opacity:1;
  }
  
  /* DELIVERY ICON STYLE */
  
  .delivery-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  }
  
  .delivery-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-main));
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:600;
  }
  
  /* SMOOTH PREMIUM ANIMATION */
  
  @keyframes floatSoft{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
  }
  
  .hero-badge{
  animation:floatSoft 4s ease-in-out infinite;
  }
.product-rating{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
    font-size:14px;
    margin-top:4px;
    }
    
    .product-rating span{
    color:#64748b;
    font-size:13px;
    margin-left:4px;
    }

    .stars {
    font-size:14px;
    line-height:1;
    color: var(--gold-main) !important;
    }

    .stars.gray {
    color:#ccc !important;
    }

    .stars.gold {
    color:var(--gold-main) !important;
    }

    .reviews-count{
    color:#64748b;
    font-size:13px;
    }

    .review-rating-input{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    }

    .review-rating-label{
    color:#475569;
    font-size:14px;
    font-weight:500;
    }

    .review-rating-stars{
    display:flex;
    align-items:center;
    gap:4px;
    }

    .review-star{
    border:none;
    background:transparent;
    padding:0;
    font-size:22px;
    line-height:1;
    color:#ccc !important;
    cursor:pointer;
    transition:transform .15s ease, color .15s ease;
    }

    .review-star:hover,
    .review-star.is-active{
    color:var(--gold-main) !important;
    }

    .review-star:hover{
    transform:scale(1.06);
    }

.product-page svg,
.product-page svg path,
.product-page .star,
.product-page .rating span,
.product-page .review-stars span,
.product-page .review-star,
.product-page .stars{
color: var(--primary-yellow) !important;
fill: var(--primary-yellow) !important;
stroke: var(--primary-yellow) !important;
}

.star,
.review-stars span,
.rating span,
.stars,
.review-star,
.review-rating-stars .review-star{
color: var(--primary-yellow, var(--gold-main)) !important;
fill: var(--primary-yellow, var(--gold-main)) !important;
}

    /* FLOATING PRODUCTS */

.floating-product{
  animation: float 6s ease-in-out infinite;
}

.delay1{
  animation-delay: 1s;
}

.delay2{
  animation-delay: 2s;
}

.delay3{
  animation-delay: 3s;
}

@keyframes float{

  0%{
    transform: translateY(0px);
  }

  50%{
    transform: translateY(-14px);
  }

  100%{
    transform: translateY(0px);
  }

}

/* ===== PROMO VIDEO SECTION ===== */

.promo-video{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background-color:#0f172a;
}

.video-wrapper{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* ===== VIDEO ===== */

.bg-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  background:transparent;
}

.video-container{
position:relative;
width:100%;
height:auto;
overflow:hidden;
}

.video-container video{
width:100%;
height:auto;
object-fit:cover;
display:block;
}

/* ===== HERO TEXT ===== */

.promo-content{
  position:absolute;
  left:0;
  right:0;
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:2;

  display:flex;
  justify-content:center;
  padding:0 20px;
  pointer-events:none;
}

.promo-video .btn-primary.promo-video__button{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr auto;
  width:min(580px, 88vw);
  min-height:104px;
  margin:0;
  border:2px solid rgba(255,190,70,.9);
  border-radius:52px;
  padding:18px 22px 14px 46px;
  align-items:center;
  gap:22px;
  overflow:visible;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,68,35,.34), transparent 46%),
    linear-gradient(180deg,#83110b 0%,#430605 58%,#240303 100%);
  color:#fff;
  box-shadow:
    0 0 7px rgba(255,238,174,.95),
    0 0 24px rgba(255,101,28,.9),
    0 0 48px rgba(255,53,16,.54),
    inset 0 0 20px rgba(255,80,28,.34),
    inset 0 2px 0 rgba(255,230,174,.48),
    0 16px 40px rgba(0,0,0,.62);
  pointer-events:auto;
  cursor:pointer;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
  animation:promoCtaGlow 3.2s ease-in-out infinite;
}

.promo-video .btn-primary.promo-video__button::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  border-radius:60px;
  padding:3px;
  background:
    conic-gradient(
      from var(--promo-border-angle),
      rgba(184,137,42,.34) 0deg,
      rgba(231,201,127,.42) 250deg,
      rgba(255,246,190,.98) 292deg,
      rgba(255,215,96,1) 310deg,
      rgba(231,201,127,.42) 334deg,
      rgba(184,137,42,.34) 360deg
    );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 8px rgba(255,191,56,.88));
  pointer-events:none;
  animation:promoBorderLight 3.6s linear infinite;
}

.promo-video .btn-primary.promo-video__button::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(
    112deg,
    transparent 18%,
    rgba(255,224,137,0) 35%,
    rgba(255,240,187,.28) 46%,
    rgba(255,255,235,.72) 50%,
    rgba(255,210,94,.2) 55%,
    transparent 70%
  );
  background-position:160% 0;
  background-size:240% 100%;
  opacity:.72;
  pointer-events:none;
  animation:promoCtaShine 3.6s ease-in-out infinite;
}

.promo-video__button-text,
.promo-video__button-arrow{
  position:relative;
  z-index:1;
}

.promo-video__button-offer{
  position:absolute;
  top:-17px;
  left:50%;
  z-index:3;
  display:inline-flex;
  min-width:250px;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 24px;
  transform:translateX(-50%);
  border:1px solid rgba(255,173,54,.76);
  border-radius:999px;
  background:linear-gradient(180deg,#7d130d 0%,#4b0705 100%);
  color:#f4d187;
  font-size:15px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 0 14px rgba(255,86,20,.48), inset 0 1px 0 rgba(255,222,154,.24);
}

.promo-video__button-text{
  color:#fff;
  font-size:clamp(32px,3.6vw,48px);
  font-weight:950;
  line-height:1;
  letter-spacing:-.035em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 4px rgba(0,0,0,.54),0 0 12px rgba(255,255,255,.14);
}

.promo-video__button-arrow{
  display:inline-flex;
  width:66px;
  height:66px;
  flex:0 0 66px;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,181,69,.92);
  border-radius:50%;
  background:linear-gradient(180deg,#a51910 0%,#530706 100%);
  color:#fff;
  font-size:49px;
  font-weight:300;
  line-height:.8;
  box-shadow:0 0 10px rgba(255,190,67,.76),inset 0 0 13px rgba(255,104,31,.48);
}

@property --promo-border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes promoBorderLight{
  to{
    --promo-border-angle:360deg;
  }
}

@keyframes promoCtaShine{
  0%,18%{
    background-position:160% 0;
    opacity:0;
  }
  32%{
    opacity:.78;
  }
  62%,100%{
    background-position:-75% 0;
    opacity:0;
  }
}

@keyframes promoCtaGlow{
  0%,100%{
    box-shadow:
      0 0 7px rgba(255,238,174,.88),
      0 0 22px rgba(255,101,28,.78),
      0 0 42px rgba(255,53,16,.46),
      inset 0 0 20px rgba(255,80,28,.3),
      inset 0 2px 0 rgba(255,230,174,.44),
      0 16px 40px rgba(0,0,0,.62);
  }
  50%{
    box-shadow:
      0 0 11px rgba(255,246,194,1),
      0 0 32px rgba(255,145,37,.96),
      0 0 58px rgba(255,53,16,.62),
      inset 0 0 25px rgba(255,118,34,.42),
      inset 0 2px 0 rgba(255,242,199,.62),
      0 18px 44px rgba(0,0,0,.68);
  }
}

@media (hover:hover) and (pointer:fine){
  .promo-video .btn-primary.promo-video__button:hover{
    background:rgba(10,4,2,.78);
    transform:translateY(-2px) scale(1.03);
    filter:brightness(1.03);
    box-shadow:
      0 0 12px rgba(255,238,174,.98),
      0 0 34px rgba(255,101,28,.94),
      0 0 58px rgba(255,53,16,.66),
      0 14px 40px rgba(0,0,0,.56);
  }

  .promo-video .btn-primary.promo-video__button:hover::before{
    filter:drop-shadow(0 0 8px rgba(255,218,105,.78));
  }
}

.promo-video .btn-primary.promo-video__button:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}

.promo-video .btn-primary.promo-video__button:active{
  transform:scale(.97);
}

@media (max-width:768px){
  .promo-video{
    height:78vh;
    height:78svh;
    min-height:590px;
    max-height:760px;
  }

  .promo-video .bg-video{
    top:auto;
    bottom:0;
    left:50%;
    width:100%;
    height:100%;
    object-position:center 42%;
    transform:translateX(-50%) scale(1.04);
    transform-origin:center center;
  }

  .promo-content{
    bottom:max(12px, env(safe-area-inset-bottom));
    padding:0 16px;
  }

  .promo-video .btn-primary.promo-video__button{
    width:min(350px, 94vw);
    min-height:76px;
    grid-template-columns:1fr auto;
    gap:12px;
    border-radius:40px;
    padding:16px 14px 12px 28px;
  }

  .promo-video .btn-primary.promo-video__button::before{
    border-radius:44px;
  }

  .promo-video__button-offer{
    top:-12px;
    min-width:190px;
    min-height:28px;
    padding:4px 16px;
    font-size:11px;
  }

  .promo-video__button-text{
    font-size:26px;
  }

  .promo-video__button-arrow{
    width:52px;
    height:52px;
    flex-basis:52px;
    font-size:38px;
  }

}

/* Legacy promo text layout */
.promo-content--centered{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  width:90%;
  max-width:900px;

  color:white;

  opacity:0;
  animation:promoText 1.2s ease forwards;
  animation-delay:0.6s;
}

.promo-content h2{
  font-size:52px;
  font-weight:700;
  text-shadow:0 6px 25px rgba(0,0,0,0.4);
}

.promo-content p{
  font-size:20px;
  margin:15px 0 30px;
}

/* ===== BUTTON ===== */

/* ===== TEXT ANIMATION ===== */

@keyframes promoText{
  to{
    opacity:1;
    transform:translate(-50%,-50%);
  }
}

/* Keep catalog card controls aligned regardless of title/description length. */
#products .product-card h4{
  display:-webkit-box;
  height:2.5em;
  min-height:2.5em;
  margin-bottom:0 !important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#products .product-card h4 + p{
  display:-webkit-box;
  height:38px;
  min-height:38px;
  margin-top:4px !important;
  margin-bottom:0 !important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#products .product-card h4 + .product-rating{
  margin-top:46px;
}

#products .product-card .product-rating{
  flex:0 0 24px;
  min-height:24px;
  margin-bottom:0;
  overflow:hidden;
}

#products .product-card .product-rating + p{
  min-height:24px;
  margin-bottom:0 !important;
  line-height:24px;
}

#products .product-card .btn-primary{
  flex:0 0 auto;
  width:100%;
}

.belfood-sale-price{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
}

.belfood-sale-price__old{
  color:#94a3b8;
  font-weight:600;
  text-decoration:line-through;
  text-decoration-thickness:2px;
}

.belfood-sale-price__current{
  color:#e3342f;
  font-weight:800;
}

.belfood-sale-price__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  background:#fee2e2;
  color:#dc2626;
  font-size:0.75rem;
  font-weight:800;
  line-height:1;
}

.belfood-sale-price--catalog{
  min-height:28px;
  margin-top:8px;
  font-size:0.95rem;
  line-height:1.2;
}

.belfood-sale-price--detail{
  font-size:1.25rem;
  line-height:1.2;
}

.belfood-sale-price--detail .belfood-sale-price__current{
  font-size:1.5rem;
}

.belfood-sale-price--detail .belfood-sale-price__badge{
  padding:6px 10px;
  font-size:0.8rem;
}

@media (max-width:768px){
  #products .product-card h4{
    height:32.5px;
    min-height:32.5px;
  }

  #products .product-card h4 + p{
    height:31.2px;
    min-height:31.2px;
    margin-top:3px !important;
  }

  #products .product-card h4 + .product-rating{
    margin-top:36.2px;
  }

  #products .product-card .product-rating{
    flex-basis:18px;
    min-height:18px;
  }

  #products .product-card .product-rating + p{
    min-height:18px;
    line-height:18px;
  }

  .belfood-sale-price--catalog{
    min-height:36px;
    gap:3px 6px;
    margin-top:3px;
    font-size:12px;
  }

  .belfood-sale-price--catalog .belfood-sale-price__current{
    font-size:14px;
  }

  .belfood-sale-price--catalog .belfood-sale-price__badge{
    padding:3px 6px;
    font-size:9px;
  }
}

/* Premium lower homepage sections */
.belfood-bottom-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-top:0 !important;
}

.belfood-benefits,
.belfood-testimonials{
  background:
    radial-gradient(circle at 10% 8%, rgba(247,193,67,.15), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(201,164,92,.13), transparent 30%),
    linear-gradient(180deg, #fffdf8 0%, #f8f5ee 100%) !important;
}

.belfood-benefits{
  margin-top:clamp(24px, 3vw, 44px);
}

.belfood-benefits::before,
.belfood-testimonials::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:340px;
  height:340px;
  border:1px solid rgba(201,164,92,.16);
  border-radius:50%;
  pointer-events:none;
}

.belfood-benefits::before{
  top:-230px;
  right:-110px;
}

.belfood-testimonials::before{
  bottom:-240px;
  left:-120px;
}

.belfood-benefits > div,
.belfood-testimonials > div{
  position:relative;
  z-index:1;
}

.belfood-benefits > div > p,
.belfood-testimonials > div > p{
  color:#b88724 !important;
  font-weight:700 !important;
}

.belfood-benefits > div > h2,
.belfood-testimonials > div > h2{
  font-weight:750;
  letter-spacing:-.035em;
}

.belfood-benefit-card{
  position:relative;
  min-height:265px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,164,92,.24) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.belfood-benefit-card::after{
  content:"";
  position:absolute;
  inset:auto 22% 0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #d3ad5b, transparent);
  opacity:.7;
}

.belfood-benefit-card > div{
  width:58px !important;
  height:58px !important;
  color:#f3c85d !important;
  background:linear-gradient(145deg, #1c2539, #0b1120) !important;
  border:1px solid rgba(239,193,78,.45);
  box-shadow:0 10px 25px rgba(15,23,42,.18);
}

.belfood-benefit-card h3{
  max-width:220px;
  font-size:1.05rem;
}

.belfood-benefit-card p{
  max-width:230px;
  line-height:1.65;
}

.belfood-testimonials{
  padding-top:4rem !important;
}

.belfood-testimonials > div > div{
  align-items:stretch;
}

.belfood-testimonial-card{
  position:relative;
  display:flex;
  min-height:275px;
  flex-direction:column;
  padding:2rem !important;
  overflow:hidden;
  border:1px solid rgba(201,164,92,.2) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.07) !important;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.belfood-testimonial-card::before{
  content:"★★★★★";
  display:block;
  margin-bottom:1rem;
  color:#d5aa4c;
  font-size:.88rem;
  letter-spacing:.12em;
}

.belfood-testimonial-card::after{
  content:"“";
  position:absolute;
  top:-24px;
  right:18px;
  color:rgba(201,164,92,.12);
  font-family:Georgia, serif;
  font-size:8rem;
  line-height:1;
  pointer-events:none;
}

.belfood-testimonial-card blockquote{
  position:relative;
  z-index:1;
  flex:1;
  color:#475569 !important;
  line-height:1.7;
}

.belfood-testimonial-card figcaption{
  margin-top:1.4rem !important;
}

.belfood-final-cta{
  margin:clamp(18px, 3vw, 48px);
  padding:clamp(64px, 8vw, 108px) 0 !important;
  overflow:hidden;
  border:1px solid rgba(231,190,92,.32) !important;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% -30%, rgba(236,190,80,.28), transparent 42%),
    linear-gradient(135deg, #111a2d 0%, #0b1120 52%, #171324 100%) !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.belfood-final-cta::before,
.belfood-final-cta::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.belfood-final-cta::before{
  top:-130px;
  left:-90px;
  width:320px;
  height:320px;
  border:1px solid rgba(240,194,81,.15);
}

.belfood-final-cta::after{
  right:-120px;
  bottom:-190px;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(178,43,25,.16), transparent 65%);
}

.belfood-final-cta > div{
  position:relative;
  z-index:1;
}

.belfood-final-cta h2{
  font-weight:750;
  letter-spacing:-.035em;
}

.belfood-final-cta p{
  max-width:650px;
  margin-right:auto;
  margin-left:auto;
  line-height:1.7;
}

.belfood-final-cta__primary,
.belfood-final-cta__secondary{
  min-width:180px;
  border-radius:999px !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease;
}

.belfood-final-cta__primary{
  color:#111827 !important;
  background:linear-gradient(135deg, #f6d77d, #cfa64e) !important;
  box-shadow:0 12px 28px rgba(216,173,75,.24);
}

.belfood-final-cta__secondary{
  border-color:rgba(246,215,125,.72) !important;
  color:#fff !important;
  background:rgba(255,255,255,.04);
}

@media (hover:hover){
  .belfood-benefit-card:hover,
  .belfood-testimonial-card:hover{
    transform:translateY(-6px);
    border-color:rgba(201,164,92,.52) !important;
    box-shadow:0 26px 60px rgba(15,23,42,.12) !important;
  }

  .belfood-final-cta__primary:hover,
  .belfood-final-cta__secondary:hover{
    transform:translateY(-2px);
  }

  .belfood-final-cta__primary:hover{
    box-shadow:0 16px 36px rgba(225,181,76,.36);
  }

  .belfood-final-cta__secondary:hover{
    color:#111827 !important;
    background:#fff !important;
  }
}

@media (max-width:640px){
  .belfood-benefits{
    margin-top:20px;
  }

  .belfood-benefits,
  .belfood-testimonials{
    padding-top:3.75rem !important;
    padding-bottom:3.75rem !important;
  }

  .belfood-benefits > div > h2,
  .belfood-testimonials > div > h2{
    font-size:1.85rem;
    line-height:1.12;
  }

  .belfood-benefits > div > div,
  .belfood-testimonials > div > div{
    margin-top:2rem !important;
    gap:14px;
  }

  .belfood-benefit-card{
    min-height:220px;
    padding:1.5rem !important;
  }

  .belfood-testimonial-card{
    min-height:0;
    padding:1.5rem !important;
  }

  .belfood-final-cta{
    margin:12px;
    padding:58px 12px !important;
    border-radius:26px;
  }

  .belfood-final-cta h2{
    font-size:1.85rem;
    line-height:1.12;
  }

  .belfood-final-cta > div > div{
    flex-direction:column;
    gap:12px;
  }

  .belfood-final-cta__primary,
  .belfood-final-cta__secondary{
    width:min(100%, 280px);
  }
}

@media (prefers-reduced-motion:reduce){
  .belfood-benefit-card,
  .belfood-testimonial-card,
  .belfood-final-cta__primary,
  .belfood-final-cta__secondary{
    transition:none !important;
  }
}

/* Desktop footer: keep navigation and payment marks in separate rows. */
@media (min-width:1200px){
  .site-footer{
    padding-top:2.25rem !important;
    padding-bottom:2.25rem !important;
    background:
      radial-gradient(circle at 88% 10%, rgba(219,181,91,.11), transparent 25%),
      linear-gradient(180deg, #fff 0%, #fbfaf7 100%) !important;
  }

  .site-footer__inner{
    grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
    grid-template-areas:
      "brand links"
      "brand bottom";
    align-items:start !important;
    gap:22px 48px !important;
    padding:28px 32px;
    border:1px solid rgba(201,164,92,.2);
    border-radius:24px;
    background:rgba(255,255,255,.78);
    box-shadow:0 16px 42px rgba(15,23,42,.055);
  }

  .site-footer__brand{
    grid-area:brand;
    align-self:stretch;
    padding-right:32px;
    border-right:1px solid rgba(148,163,184,.2);
  }

  .site-footer__brand > p:first-child{
    font-size:1.05rem;
  }

  .site-footer__brand > p:last-child{
    max-width:220px;
    line-height:1.6;
  }

  .site-footer__links{
    grid-area:links;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    justify-content:space-between;
    gap:12px 42px !important;
    padding-bottom:20px;
    border-bottom:1px solid rgba(148,163,184,.18);
  }

  .site-footer__links a{
    position:relative;
    width:max-content;
    max-width:100%;
    justify-self:start;
    padding:4px 0;
    transition:color .2s ease;
  }

  .site-footer__links a[href="#products"]{
    grid-column:1;
    grid-row:1;
  }

  .site-footer__links a[href="offer.html"]{
    grid-column:1;
    grid-row:2;
  }

  .site-footer__links a[href="delivery.html"]{
    grid-column:2;
    grid-row:1;
  }

  .site-footer__links a[href="privacy.html"]{
    grid-column:2;
    grid-row:2;
  }

  .site-footer__links a[href="about.html"]{
    grid-column:3;
    grid-row:1;
  }

  .site-footer__links a[href="#why"]{
    grid-column:3;
    grid-row:2;
  }

  .site-footer__links a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:1px;
    background:#c9a45c;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
  }

  .site-footer__bottom{
    grid-area:bottom;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    min-width:0;
    align-items:center;
    gap:30px;
  }

  .site-footer__copyright{
    grid-column:auto;
    margin:0;
    white-space:nowrap;
    text-align:right;
  }

  .site-footer .payment-logos{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    justify-content:stretch;
    gap:14px;
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .site-footer .payment-logos img{
    box-sizing:border-box;
    width:auto !important;
    height:34px !important;
    max-width:112px !important;
    justify-self:center;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    object-fit:contain;
  }
}

@media (min-width:1200px) and (hover:hover){
  .site-footer__links a:hover::after{
    transform:scaleX(1);
  }
}

@media (max-width:768px){
.fade-section video{
width:100% !important;
height:auto !important;
object-fit:cover !important;
display:block;
}
}

/* ===== REMOVE GAP ===== */

.hero{
  margin-bottom:0;
  padding-bottom:0;
}

section{
  margin-top:0;
}
/* ===== PRODUCTS GRID ===== */

.products-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

/* адаптив */

@media (max-width:1200px){
  .products-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:900px){
  .products-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:500px){
  .products-grid{
    grid-template-columns:1fr;
  }
}

.promo-banner{
  grid-column:1 / -1;
}

.lightbox{
position:fixed;
inset:0;
width:100vw;
height:100vh;
height:100dvh;
background:rgba(255,255,255,.15);
backdrop-filter:blur(12px) saturate(1.08);
-webkit-backdrop-filter:blur(12px) saturate(1.08);
display:flex;
align-items:center;
justify-content:center;
z-index:2147483000;
isolation:isolate;
opacity:0;
pointer-events:none;
transition:opacity .24s ease;
}

.lightbox.hidden{
display:none;
}

.lightbox.is-open{
opacity:1;
pointer-events:auto;
}

.lightbox.is-closing{
opacity:0;
pointer-events:none;
}
.promo-content
.lightbox-img{
display:block;
max-width:min(92vw,1200px);
max-height:min(88vh,920px);
max-height:min(88dvh,920px);
border-radius:18px;
object-fit:contain;
box-shadow:0 24px 70px rgba(15,23,42,.22);
opacity:0;
transform:scale(.975);
transition:opacity .24s ease, transform .24s ease;
will-change:opacity, transform;
background:rgba(255,255,255,.04);
overflow:hidden;
touch-action:pan-y;
}

.lightbox.is-open .lightbox-img{
opacity:1;
transform:scale(1);
}

.lightbox.is-closing .lightbox-img{
opacity:0;
transform:scale(.985);
}

.lightbox-close{
position:absolute;
top:max(14px, env(safe-area-inset-top));
right:max(14px, env(safe-area-inset-right));
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border:0;
border-radius:999px;
background:rgba(15,23,42,.62);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
font-size:36px;
color:white;
cursor:pointer;
line-height:1;
transition:transform .18s ease, background .18s ease;
}

.lightbox-close:hover{
transform:translateY(-1px);
background:rgba(15,23,42,.74);
}

.lightbox-prev,
.lightbox-next{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
color:white;
background:rgba(15,23,42,.46);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:none;
cursor:pointer;
padding:10px 15px;
border-radius:50%;
transition:transform .18s ease, background .18s ease;
}

.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }

.lightbox-prev:hover,
.lightbox-next:hover{
background:rgba(15,23,42,.64);
}


/* ===== PRODUCT CARDS ===== */

.product-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  height:100%;
  width:100%;

  background:white;

  opacity:1;
  transform:none;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


/* scroll reveal */

.product-card.show{
  opacity:1;
  transform:translateY(0);
}


/* ===== IMAGE ===== */

.product-card{
  overflow:hidden;
}

.product-card .product-image,
.product-card > img{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.product-card img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:16px 16px 0 0;
  transition:transform .5s ease;
}

.product-card .product-image img,
.product-card > img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* image zoom */

.product-card:hover img{
  transform:scale(1.06);
}


/* ===== GOLD BORDER ===== */

.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:2px;

  background:linear-gradient(135deg,#E7C97F,#C9A64E);

  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:0;
  transition:opacity .35s ease;

  pointer-events:none;
}


/* hover border */

.product-card:hover::after{
  opacity:1;
}


/* mobile tap border */

.product-card.active::after{
  opacity:1;
}


/* ===== HOVER EFFECT ===== */

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    0 0 25px rgba(231,201,127,0.35);
}


/* ===== BUY BUTTON ===== */

.buy-btn{
  margin-top:auto;

  padding:14px 28px;

  border-radius:12px;
  border:none;

  cursor:pointer;

  font-size:16px;
  font-weight:600;

  color:#1a1a1a;

  background:linear-gradient(135deg,#E7C97F,#C9A64E);

  box-shadow:0 6px 18px rgba(201,164,92,0.45);

  transition:all .25s ease;
}


.buy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(201,164,92,0.6);
}


.buy-btn:active{
  transform:scale(.96);
}


/* ===== PRODUCT PAGE BUTTON ===== */

.product-buy-btn{
  background:linear-gradient(135deg,#E7C97F,#C9A64E);
  color:#111;

  padding:16px 40px;

  border-radius:999px;

  font-size:16px;
  font-weight:600;

  border:none;

  cursor:pointer;

  display:inline-block;

  box-shadow:0 12px 30px rgba(201,164,78,0.35);

  transition:all .25s ease;
}


.product-buy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(201,164,78,0.5);
}


/* ===== PRODUCT GALLERY ===== */

.product-gallery{
  position:relative;
  width:400px;
}


.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  background:#E7C97F;
  border:none;

  font-size:24px;

  width:40px;
  height:40px;

  border-radius:50%;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}


.gallery-arrow.left{
  left:-20px;
}


.gallery-arrow.right{
  right:-20px;
}

/* ===== UX UPGRADE OVERRIDES ===== */

.product-card{
  cursor:pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change:transform, box-shadow;
}

.product-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.btn-primary{
  touch-action:manipulation;
  position:relative;
  z-index:10;
}

@media (hover:none){
  .product-card:hover{
    transform:none;
    box-shadow:0 14px 40px rgba(15, 23, 42, 0.08);
  }
}

@media (prefers-reduced-motion:reduce){
  .product-card,
  .btn-primary,
  #cart-toggle{
    transition:none !important;
  }
}

.product-card .product-rating{
  display:flex !important;
}

.product-comments-summary{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  font-size:14px;
  font-weight:600;
  line-height:1;
}

.product-comments-summary__count{
  margin-left:4px;
  color:#64748b;
  font-size:13px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f3f3f3;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  color: #111;
}

.profile-btn svg {
  width: 16px;
  height: 16px;
}

/* Homepage hero/header match */

.home-header.site-header {
  background: rgba(0, 0, 0, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.home-header.site-header .mx-auto {
  max-width: none;
  padding: 10px 44px;
}

.home-header.site-header .h-16 {
  height: 64px !important;
}

.home-header .hero-header-left,
.home-header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-header .belfood-menu-toggle {
  display: inline-flex;
  width:auto;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap:7px;
  padding:0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}

.home-header .belfood-menu-toggle:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}

.home-header .belfood-menu-toggle__label{
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1;
}

.home-header .belfood-menu-toggle svg.belfood-menu-toggle__chevron{
  width:14px;
  height:14px;
  flex:0 0 auto;
  filter:none;
}

.home-header .hero-categories-link {
  display: inline-flex;
  min-width: 164px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 226, 124, .74);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd15a 0%, #f6b72e 100%);
  color: #15120c;
  font-size: 19px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(246, 183, 46, .24), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.home-header .hero-categories-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffd86f 0%, #f7bc3c 100%);
  box-shadow: 0 18px 34px rgba(246, 183, 46, .32), inset 0 1px 0 rgba(255, 255, 255, .58);
}

.home-header .hero-categories-link svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.7px;
}

.home-header a[href="#hero"] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-decoration: none;
}

.home-header a[href="#hero"] span {
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: 0;
}

.home-header .profile-btn {
  min-height: 48px;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .96);
  color: #111827;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.home-header .profile-btn svg {
  width: 19px;
  height: 19px;
}

.home-header #cart-toggle {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 0;
  padding: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #111827 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.home-header #cart-toggle svg {
  width: 24px;
  height: 24px;
}

.home-header .cart-toggle-label {
  display: none;
}

#hero .hero-copy-content > p:first-child {
  max-width: 430px;
  margin: 0 0 30px !important;
  color: #ffd439 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .45);
}

.hero-kicker__desktop-break{
  display:none;
}

@media (min-width:1024px){
  #hero .hero-copy-content > p:first-child{
    width:max-content;
    max-width:none;
    white-space:nowrap;
  }

  .hero-kicker__desktop-break{
    display:inline;
  }
}

#hero .hero-copy .hero-title {
  display: flex;
  flex-direction: column;
  max-width: 560px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(42px, 4.1vw, 58px) !important;
  font-weight: 900 !important;
  line-height: 1.17 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 8px 26px rgba(0, 0, 0, .58);
}

#hero .hero-copy .hero-title::after {
  content: "";
  width: 64px;
  height: 3px;
  margin-top: 31px;
  border-radius: 999px;
  background: #f6c52d;
  box-shadow: 0 0 18px rgba(246, 197, 45, .38);
}

#hero .hero-copy .hero-title span {
  display: block;
}

#hero .hero-copy .hero-title + p {
  max-width: 360px !important;
  margin-top: 31px !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 18px !important;
  font-weight: 500;
  line-height: 1.68 !important;
  text-align: left;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .42);
}

#hero .hero-copy .fade-section {
  max-width: 360px;
  margin-top: 30px !important;
  gap: 26px !important;
}

#hero .hero-copy .fade-section > div {
  min-width: 72px;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

#hero .hero-copy .fade-section svg {
  width: 52px;
  height: 52px;
  padding: 11px;
  border: 2px solid #f6c52d;
  border-radius: 999px;
  color: #f6c52d;
  background: rgba(0, 0, 0, .18);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

#hero .hero-copy .fade-section span {
  display: block;
  color: #fff;
}

@media (max-width: 900px) {
  .home-header.site-header .mx-auto {
    padding: 8px 16px;
  }

  .home-header .hero-categories-link {
    min-width: 54px;
    width: 54px;
    min-height: 48px;
    gap: 0;
    font-size: 0;
  }

  .home-header .hero-categories-link svg {
    width: 24px;
    height: 24px;
  }

  .home-header .profile-btn {
    min-height: 44px;
    padding: 0 13px;
    font-size: 0;
  }

  .home-header .profile-btn svg {
    width: 20px;
    height: 20px;
  }

  .home-header #cart-toggle {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .home-header.site-header .h-16 {
    height: 58px !important;
  }

  .home-header .hero-header-left,
  .home-header .header-actions {
    gap: 8px;
  }

  .home-header .belfood-menu-toggle {
    width:auto;
    height: 42px;
  }

  .home-header .belfood-menu-toggle svg.belfood-menu-toggle__chevron{
    width:14px;
    height:14px;
  }

  .home-header a[href="#hero"] span {
    font-size: 17px !important;
  }

  #hero .hero-copy-content > p:first-child {
    max-width: 315px;
    margin-bottom: 24px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    letter-spacing: 3.4px !important;
  }

  #hero .hero-copy .hero-title {
    max-width: 330px !important;
    font-size: 39px !important;
    line-height: 1.12 !important;
  }

  #hero .hero-copy .hero-title::after {
    margin-top: 25px;
  }

  #hero .hero-copy .hero-title + p {
    max-width: 315px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  #hero .hero-copy .fade-section {
    justify-content: flex-start;
    gap: 18px !important;
  }

  #hero .hero-copy .fade-section svg {
    width: 46px;
    height: 46px;
    padding: 10px;
  }
}

.product-detail-page header:first-of-type .max-w-6xl {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.product-detail-page header:first-of-type {
  min-height: 60px !important;
}

.product-detail-page header:first-of-type > div,
.product-detail-page header:first-of-type .max-w-6xl > div {
  min-height: 40px;
  align-items: center !important;
}

.product-detail-page header:first-of-type .gap-6 {
  gap: 14px !important;
}

.product-detail-page header:first-of-type .text-xl {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#hero #belfood-home-progress{
  position:relative;
  z-index:4;
  display:flex;
  width:100%;
  max-width:580px;
  min-height:66px;
  margin:16px auto 0;
  padding:13px 22px;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1.5px solid #f2c21d;
  border-radius:19px;
  background:rgba(6,7,8,.9);
  color:#fff;
  font-size:clamp(17px,1.45vw,21px);
  font-weight:750;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,213,44,.18),0 0 20px rgba(255,204,25,.62),inset 0 0 18px rgba(255,196,0,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#hero #belfood-home-progress svg{
  width:31px;
  height:31px;
  flex:0 0 auto;
  color:#fff;
}

#hero #belfood-home-progress strong{
  color:#f4c32a;
  font-weight:850;
}

.product-detail-page #product-review-summary {
  margin-top: 0;
  margin-bottom: 12px;
}

.product-detail-page .stars,
.product-detail-page #product-review-summary .stars,
.product-detail-page [data-reviews-list] .stars {
  color: var(--gold-main) !important;
}

.product-detail-page .stars.gray {
  color: #ccc !important;
}

.product-detail-page .review-star,
.product-detail-page .review-star {
  color: #ccc !important;
}

.product-detail-page .review-star.is-active,
.product-detail-page .review-star:hover {
  color: var(--gold-main) !important;
}

.product-page .stars,
.product-page .stars *,
.product-page .review-star{
  color: var(--gold-main) !important;
  fill: var(--gold-main) !important;
}

.product-page .stars.gray{
  color: #ccc !important;
  fill: #ccc !important;
}

.product-page .review-star{
  color: #ccc !important;
  fill: #ccc !important;
}

.product-page .review-star.is-active,
.product-page .review-star:hover{
  color: var(--gold-main) !important;
  fill: var(--gold-main) !important;
}
.payment-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex-wrap: nowrap;
}

.payment-logos img {
  height: 28px;
  width: auto;
  max-width:92px;
  object-fit:contain;
  background:transparent;
}

@media (max-width:767px){
  .payment-logos{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

/* Mobile conversion layout */
.mobile-category-strip{
  display:none;
}

.mobile-hits{
  display:none;
}

@media (max-width:640px){
  #hero.hero-section{
    height:72svh;
    max-height:74svh;
    scroll-margin-top:84px;
  }

  #hero > .relative{
    height:100%;
    min-height:0;
    justify-content:center;
    gap:0 !important;
    padding:24px 16px !important;
  }

  #hero .hero-copy{
    width:100%;
  }

  #hero .hero-copy-content{
    display:flex;
    height:100%;
    flex-direction:column;
    justify-content:center;
  }

  #hero .hero-copy .hero-title + p,
  #hero .hero-hits-wrap,
  #hero #belfood-home-announcement{
    display:none !important;
  }

  #hero #belfood-home-progress{
    position:relative;
    z-index:4;
    display:flex !important;
    width:100%;
    max-width:360px;
    min-height:48px;
    margin:14px auto 0 !important;
    padding:10px 14px;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1.5px solid #f2c21d;
    border-radius:17px;
    background:rgba(6,7,8,.9);
    color:#fff;
    font-size:clamp(12px,3.45vw,14px);
    font-weight:700;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    box-shadow:0 0 0 1px rgba(255,213,44,.18),0 0 18px rgba(255,204,25,.58),inset 0 0 15px rgba(255,196,0,.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  #hero #belfood-home-progress svg{
    width:24px;
    height:24px;
    flex:0 0 auto;
    color:#fff;
  }

  #hero #belfood-home-progress strong{
    color:#f4c32a;
    font-weight:850;
  }

  #hero .hero-copy-content > p:first-child{
    display:block !important;
    max-width:350px;
    margin:0 auto 24px !important;
    color:#ffd439 !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.55 !important;
    letter-spacing:3px !important;
    text-align:left;
  }

  #hero .hero-copy .hero-title{
    max-width:340px !important;
    margin:0 auto !important;
    font-size:clamp(28px, 8.2vw, 34px) !important;
    line-height:1.1 !important;
    text-align:center;
  }

  #hero .hero-copy .hero-title .hero-title__mobile-break{
    display:block;
  }

  #hero .hero-copy .hero-title::after{
    width:54px;
    margin:18px auto 0;
  }

  #hero .hero-copy .fade-section{
    display:flex !important;
    width:100%;
    max-width:360px;
    margin:20px auto 0 !important;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px !important;
  }

  #hero .hero-copy .fade-section > div{
    min-width:0;
    flex:1 1 0;
    gap:8px;
    font-size:12px;
    line-height:1.25;
  }

  #hero .hero-copy .fade-section svg{
    width:46px;
    height:46px;
    padding:9px;
  }

  #hero .hero-cta-row{
    width:100%;
    max-width:360px;
    margin:12px auto 0 !important;
    gap:10px !important;
  }

  #hero .hero-main-link,
  #hero .hero-discount-link{
    min-height:52px !important;
  }

  .mobile-hits{
    display:block;
    margin:12px 12px 24px;
    padding:18px 0 14px;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 32px rgba(15,23,42,.08);
  }

  .mobile-hits__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 18px;
  }

  .mobile-hits__title{
    margin:0;
    color:var(--text);
    font-size:20px;
    font-weight:800;
    line-height:1.2;
  }

  .mobile-hits__header a{
    display:inline-flex;
    flex:0 0 auto;
    min-height:36px;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(244,185,58,.9);
    border-radius:999px;
    padding:0 12px;
    background:#fff;
    color:var(--text);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 6px 16px rgba(244,185,58,.1);
  }

  .mobile-hits__viewport{
    overflow-x:auto;
    padding:16px 18px 10px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-hits__viewport::-webkit-scrollbar{
    display:none;
  }

  .mobile-hits__track{
    display:flex;
    gap:12px;
    width:max-content;
  }

  .mobile-hit-card{
    display:flex;
    flex:0 0 clamp(140px, 40vw, 158px);
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(218,165,32,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 18px rgba(15,23,42,.07);
    scroll-snap-align:start;
  }

  .mobile-hit-card__image-link{
    display:block;
    width:100%;
    aspect-ratio:1.3 / 1;
    overflow:hidden;
    background:#f8f8f8;
  }

  .mobile-hit-card__image-link img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mobile-hit-card__title{
    display:-webkit-box;
    min-height:48px;
    margin:10px 10px 4px;
    overflow:hidden;
    color:var(--text);
    font-size:13px;
    font-weight:750;
    line-height:1.25;
    text-decoration:none;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }

  .mobile-hit-card__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:auto;
    padding:5px 10px 10px;
  }

  .mobile-hit-card__price{
    color:var(--text);
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
  }

  .mobile-hit-card .mobile-hit-card__buy{
    display:inline-grid;
    flex:0 0 48px;
    width:48px;
    min-width:48px;
    height:48px;
    min-height:48px;
    padding:0;
    place-items:center;
    border:0;
    border-radius:50%;
    background:var(--gold);
    color:#111827;
    box-shadow:0 7px 16px rgba(218,165,32,.28);
  }

  .mobile-hit-card__buy svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.8;
  }

  .mobile-hits__pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:10px;
    padding:0 18px;
  }

  .mobile-hits__dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#e6e8ec;
    transition:width .2s ease, background-color .2s ease;
  }

  .mobile-hits__dot.is-active{
    width:24px;
    background:var(--gold);
  }

  #products .product-card .btn-primary,
  .belfood-bestseller-card__button,
  .add-to-cart-btn{
    min-height:48px;
  }

  #products > .mx-auto{
    padding-right:12px !important;
    padding-left:12px !important;
  }

  #products [id^="products-"] > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px 10px !important;
  }

  #products .product-card{
    min-width:0;
    padding:9px !important;
    border-radius:16px;
  }

  #products .product-card > img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    border-radius:12px !important;
    object-fit:cover;
  }

  #products .product-card .product-badge{
    max-width:calc(100% - 14px);
    min-height:26px;
    padding:6px 10px;
    border-radius:999px;
    font-size:10px;
    line-height:1.1;
  }

  #products .product-card h4{
    display:-webkit-box;
    min-height:0;
    margin-top:9px !important;
    margin-bottom:0 !important;
    overflow:hidden;
    font-size:13px;
    line-height:1.25;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #products .product-card > p{
    margin-top:3px !important;
    margin-bottom:0 !important;
    font-size:12px !important;
    line-height:1.3;
  }

  #products .product-card .product-flavor{
    display:-webkit-box;
    min-height:0;
    margin-top:3px !important;
    margin-bottom:0 !important;
    overflow:hidden;
    color:#64748b;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #products .product-card .product-rating{
    min-height:18px;
    margin-top:2px;
    margin-bottom:0;
    overflow:hidden;
    font-size:11px;
    transform:scale(.82);
    transform-origin:left center;
  }

  #products .product-card .product-rating + p{
    margin-top:3px !important;
    font-size:14px !important;
    font-weight:700;
    line-height:1.2;
  }

  #products .product-card .btn-primary{
    width:100%;
    min-height:38px;
    margin-top:9px !important;
    padding:9px 8px !important;
    font-size:12px;
  }
}

/* Compact orange labels used only in the full product catalog. */
#products .product-card .product-badge:not(.product-badge--out-of-stock){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:38px;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;
  background:linear-gradient(135deg,#ffb42d 0%,#f39a0b 100%);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:0.01em;
  white-space:nowrap;
  box-shadow:
    0 5px 12px rgba(171,93,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

@media (max-width:640px){
  #products .product-card .product-badge:not(.product-badge--out-of-stock){
    min-height:28px;
    padding:6px 10px;
    font-size:11px;
    box-shadow:
      0 4px 9px rgba(171,93,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.32);
  }
}

/* Keep every bestseller tab aligned with the full catalog card design. */
.belfood-bestseller-card,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card{
  min-height:0;
  border:1px solid rgba(201,164,92,0.18);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,0.08);
}

.belfood-bestseller-card__media,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__media{
  padding:20px 20px 0;
}

.belfood-bestseller-card__image-wrap,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image-wrap{
  min-height:0;
  aspect-ratio:1 / 1;
  border-radius:16px;
  background:#fff;
}

.belfood-bestseller-card__image,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
}

.belfood-bestseller-card__badge,
.belfood-bestseller-card__badge--gold,
.belfood-bestseller-card__badge--blue,
.belfood-bestseller-card__badge--green,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge{
  top:12px;
  left:12px;
  min-height:38px;
  max-width:calc(100% - 24px);
  padding:8px 16px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;
  background:linear-gradient(135deg,#ffb42d 0%,#f39a0b 100%);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1;
  box-shadow:
    0 5px 12px rgba(171,93,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.belfood-bestsellers[data-bestseller-theme] .belfood-bestseller-card__badge:not(.product-badge--out-of-stock){
  border:1px solid rgba(255,255,255,0.3);
  background:linear-gradient(135deg,#ffb42d 0%,#f39a0b 100%);
  color:#fff;
  box-shadow:
    0 5px 12px rgba(171,93,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge::before{
  display:none;
}

.belfood-bestseller-card__body,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__body{
  flex:1;
  padding:0 20px 20px;
}

.belfood-bestseller-card__title,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title{
  display:-webkit-box;
  min-height:0;
  margin:14px 0 0;
  overflow:hidden;
  color:#0f172a;
  font-size:1rem;
  font-weight:600;
  line-height:1.25;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.belfood-bestseller-card__description,
.belfood-bestseller-card__flavor,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor{
  min-height:0;
  margin:3px 0 0;
  color:#64748b;
  font-size:0.88rem;
  line-height:1.35;
}

.belfood-bestseller-card__rating,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__rating{
  display:flex !important;
  min-height:20px;
  margin-top:3px;
  align-items:center;
  gap:4px;
}

.belfood-bestseller-card__bottom{
  align-items:stretch;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  padding-top:5px;
}

.belfood-bestseller-card__price{
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
}

.belfood-bestseller-card__price span{
  font-size:0.82em;
}

.belfood-bestseller-card__button{
  width:100%;
  min-width:0;
  min-height:48px;
  margin:0 !important;
  padding:14px 24px !important;
  border-radius:999px !important;
  font-size:0.94rem !important;
}

@media (max-width:768px){
  .belfood-bestseller-card,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card{
    border-radius:16px;
  }

  .belfood-bestseller-card__media,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__media{
    padding:9px 9px 0;
  }

  .belfood-bestseller-card__image-wrap,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__image-wrap{
    border-radius:12px;
  }

  .belfood-bestseller-card__badge,
  .belfood-bestseller-card__badge--gold,
  .belfood-bestseller-card__badge--blue,
  .belfood-bestseller-card__badge--green,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__badge{
    top:7px;
    left:7px;
    min-height:28px;
    max-width:calc(100% - 14px);
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
  }

  .belfood-bestseller-card__body,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__body{
    padding:0 9px 9px;
  }

  .belfood-bestseller-card__title,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title{
    min-height:0;
    margin-top:9px;
    font-size:13px;
    line-height:1.25;
  }

  .belfood-bestseller-card__description,
  .belfood-bestseller-card__flavor,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor{
    min-height:0;
    margin-top:3px;
    font-size:12px;
    line-height:1.3;
  }

  .belfood-bestseller-card__rating,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__rating{
    min-height:18px;
    margin-top:2px;
    font-size:11px;
    transform:scale(.82);
    transform-origin:left center;
  }

  .belfood-bestseller-card__bottom{
    gap:8px;
    padding-top:3px;
  }

  .belfood-bestseller-card__price{
    font-size:14px;
    line-height:1.2;
  }

  .belfood-bestseller-card__button{
    width:100%;
    min-width:0;
    min-height:38px;
    height:auto;
    margin:0 !important;
    padding:9px 8px !important;
    font-size:12px !important;
  }
}

/* Final catalog hover override: identical motion to bestseller cards. */
#products .product-card::before,
#products .product-card::after{
  display:none !important;
  opacity:0 !important;
}

#products .product-card .product-badge{
  z-index:3;
}

#products .product-card .product-flavor{
  color:#64748b;
}

#products .product-card h4,
.belfood-bestseller-card__title,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title{
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:normal;
}

#products .product-card .product-flavor,
.belfood-bestseller-card__flavor,
.belfood-bestseller-card__description,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor,
.belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description{
  font-family:inherit;
  font-size:0.88rem;
  font-weight:400;
  line-height:1.35;
  letter-spacing:normal;
}

#products .product-card__image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
}

#products .product-card__image-wrap > img{
  display:block;
  width:100%;
  height:100%;
  border-radius:0;
  object-fit:cover;
  transition:transform 0.38s ease !important;
}

#products .product-card{
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

#products .product-card:hover{
  transform:translateY(-5px);
  border-color:rgba(201,164,92,0.24);
  box-shadow:0 24px 58px rgba(15,23,42,0.12);
}

#products .product-card:hover .product-card__image-wrap > img{
  transform:scale(1.04);
}

#products .product-card:hover .product-flavor{
  color:#64748b;
}

@media (hover:hover){
  #products .product-card:hover{
    transform:translateY(-5px) !important;
    border-color:rgba(201,164,92,0.24);
    box-shadow:0 24px 58px rgba(15,23,42,0.12);
  }

  #products .product-card:hover .product-card__image-wrap > img{
    transform:scale(1.04) !important;
  }
}

@media (hover:none){
  #products .product-card:hover{
    transform:none;
    border-color:rgba(201,164,92,0.18);
    box-shadow:0 14px 40px rgba(15,23,42,0.08);
  }

  #products .product-card:hover .product-card__image-wrap > img{
    transform:none;
  }

  .belfood-bestseller-card:hover,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card:hover{
    transform:none !important;
    border-color:rgba(201,164,92,0.12);
    box-shadow:0 12px 28px rgba(15,23,42,0.08);
  }

  .belfood-bestseller-card:hover .belfood-bestseller-card__image,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card:hover .belfood-bestseller-card__image{
    transform:none !important;
  }
}

@media (max-width:768px){
  .belfood-bestseller-card,
  .belfood-bestseller-card:hover,
  .belfood-bestseller-card:focus-within,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card:hover,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card:focus-within{
    transform:none !important;
  }

  .belfood-bestseller-card__image,
  .belfood-bestseller-card:hover .belfood-bestseller-card__image,
  .belfood-bestseller-card:focus-within .belfood-bestseller-card__image{
    transform:none !important;
  }

  .belfood-bestsellers__grid{
    align-items:stretch;
  }

  .belfood-bestseller-card,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card{
    height:100%;
    align-self:stretch;
  }

  .belfood-bestseller-card__body,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__body{
    flex:1;
  }

  .belfood-bestseller-card__title,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title{
    min-height:32.5px;
  }

  #products .product-card__image-wrap{
    border-radius:12px;
  }

  #products .product-card h4,
  .belfood-bestseller-card__title,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__title{
    font-size:13px;
    font-weight:600;
    line-height:1.25;
  }

  #products .product-card .product-flavor,
  .belfood-bestseller-card__flavor,
  .belfood-bestseller-card__description,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__flavor,
  .belfood-bestsellers[data-bestseller-theme="kids"] .belfood-bestseller-card__description{
    font-size:12px;
    font-weight:400;
    line-height:1.3;
  }
}

.promo-banner + .belfood-modern-header {
  margin-top: var(--promo-banner-height);
}

.belfood-modern-header {
  top: var(--promo-banner-height) !important;
}

body.promo-banner-closed .promo-banner {
  display: none;
}

body.promo-banner-closed .promo-banner + .belfood-modern-header {
  margin-top: 0;
}

body.promo-banner-closed .belfood-modern-header {
  top: 0 !important;
}
/* Scoped welcome offer banner */
:root{
  --promo-offer-banner-height:76px;
}

.promo-offer-banner[hidden]{
  display:none !important;
}

.promo-offer-banner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10030;
  display:flex;
  align-items:center;
  min-height:var(--promo-offer-banner-height);
  padding:10px clamp(12px,2vw,28px);
  background:#161512;
  border-bottom:1px solid rgba(228,177,90,.64);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  color:#fffaf0;
}

.promo-offer-banner__inner{
  width:min(1480px,100%);
  min-height:56px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(360px,1fr) 1px minmax(430px,1.08fr) auto;
  align-items:center;
  gap:28px;
  padding:0 22px;
  border:1px solid rgba(228,177,90,.58);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.promo-offer-banner__timer,
.promo-offer-banner__promo{
  display:flex;
  align-items:center;
  min-width:0;
}

.promo-offer-banner__timer{
  gap:18px;
}

.promo-offer-banner__clock{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  color:#f3c76d;
  border:2px solid currentColor;
  border-radius:50%;
}

.promo-offer-banner__clock svg{
  width:21px;
  height:21px;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  min-width:0;
  color:rgba(255,255,255,.9);
  font-size:clamp(15px,1.28vw,22px);
  font-weight:500;
  line-height:1.1;
  white-space:nowrap;
}

.promo-offer-banner__timer-value{
  color:#f2c365;
  font-size:clamp(24px,2.55vw,38px);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}

.promo-offer-banner__divider{
  width:1px;
  height:40px;
  background:linear-gradient(180deg,transparent,rgba(228,177,90,.7),transparent);
}

.promo-offer-banner__promo{
  gap:24px;
}

.promo-offer-banner__code{
  flex:0 0 auto;
  min-width:220px;
  padding:15px 24px;
  text-align:center;
  color:#f1bd5d;
  font-size:clamp(22px,2vw,32px);
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  border:1px solid rgba(228,177,90,.78);
  border-radius:10px;
  background:rgba(12,12,11,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.promo-offer-banner__button{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:280px;
  min-height:50px;
  padding:0 24px;
  overflow:hidden;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg,#ffd776 0%,#e8af39 100%);
  color:#161512;
  cursor:pointer;
  font:800 clamp(16px,1.32vw,22px)/1.1 inherit;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 18px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.promo-offer-banner__button::before{
  content:"";
  position:absolute;
  inset:-35% auto -35% -55%;
  z-index:-1;
  width:46%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  opacity:.78;
  transform:skewX(-18deg) translateX(0);
  animation:promoOfferButtonShine 3.8s ease-in-out infinite;
}

.promo-offer-banner__button-arrow{
  display:inline-block;
  font-size:1.28em;
  line-height:1;
  transition:transform .2s ease;
}

.promo-offer-banner__button-mobile-text{
  display:none;
}

@media (hover:hover){
  .promo-offer-banner__button:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg,#ffe08c 0%,#efbb4f 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 11px 22px rgba(0,0,0,.2);
  }

  .promo-offer-banner__button:hover .promo-offer-banner__button-arrow{
    transform:translateX(4px);
  }
}

.promo-offer-banner__button:active,
.promo-offer-banner__button.is-pressed{
  transform:scale(.97);
}

.promo-offer-banner__button.is-pressed .promo-offer-banner__button-arrow{
  transform:translateX(4px);
}

.promo-offer-toast{
  position:fixed;
  top:50%;
  left:50%;
  z-index:10080;
  max-width:min(420px,calc(100vw - 32px));
  padding:15px 20px;
  border:1px solid rgba(228,177,90,.72);
  border-radius:14px;
  background:rgba(22,21,18,.96);
  color:#fffaf0;
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  box-shadow:0 18px 45px rgba(0,0,0,.24);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity .25s ease, transform .25s ease;
}

.promo-offer-toast strong{
  color:#e4b15a;
  font-weight:900;
}

.promo-offer-toast.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.promo-offer-banner:not([hidden]) + .belfood-modern-header{
  margin-top:var(--promo-offer-banner-height) !important;
}

html.promo-offer-banner-active .belfood-modern-header{
  top:var(--promo-offer-banner-height) !important;
}

html:not(.promo-offer-banner-active) .belfood-modern-header{
  top:0 !important;
}

@keyframes promoOfferButtonShine{
  0%,58%{
    opacity:0;
    transform:skewX(-18deg) translateX(0);
  }
  68%{
    opacity:.78;
  }
  86%,100%{
    opacity:0;
    transform:skewX(-18deg) translateX(340%);
  }
}

@media (max-width:1180px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(290px,1fr) 1px minmax(320px,1fr) auto;
    gap:18px;
    padding:0 16px;
  }

  .promo-offer-banner__code{
    min-width:176px;
    padding-inline:18px;
  }

  .promo-offer-banner__button{
    min-width:230px;
  }
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:76px;
  }

  .promo-offer-banner{
    padding:6px 8px;
  }

  .promo-offer-banner__inner{
    min-height:64px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "timer timer"
      "code button";
    gap:8px 10px;
    padding:8px 10px;
    border-radius:10px;
  }

  .promo-offer-banner__timer{
    grid-area:timer;
    justify-content:center;
    gap:7px;
  }

  .promo-offer-banner__clock{
    width:20px;
    height:20px;
    border-width:1.5px;
  }

  .promo-offer-banner__clock svg{
    width:13px;
    height:13px;
  }

  .promo-offer-banner__timer-label{
    font-size:13px;
  }

  .promo-offer-banner__timer-value{
    font-size:18px;
  }

  .promo-offer-banner__divider,
  .promo-offer-banner__promo-label{
    display:none;
  }

  .promo-offer-banner__promo{
    grid-area:code;
  }

  .promo-offer-banner__code{
    min-width:0;
    width:100%;
    padding:9px 12px;
    font-size:15px;
    border-radius:8px;
  }

  .promo-offer-banner__button{
    grid-area:button;
    min-width:128px;
    min-height:36px;
    padding:0 12px;
    gap:7px;
    border-radius:8px;
    font-size:13px;
  }

  .promo-offer-banner__button-text{
    display:none;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline;
  }

  .promo-offer-banner__button-arrow{
    font-size:17px;
  }
}

@media (max-width:360px){
  .promo-offer-banner__inner{
    padding-inline:8px;
    gap:7px 8px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px;
  }

  .promo-offer-banner__timer-value{
    font-size:17px;
  }

  .promo-offer-banner__button{
    min-width:116px;
    padding-inline:10px;
    font-size:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .promo-offer-banner__button,
  .promo-offer-banner__button-arrow,
  .promo-offer-toast{
    transition:none;
  }

  .promo-offer-banner__button::before{
    animation:none;
    opacity:0;
  }

}

/* Final compact promo offer override */
:root{
  --promo-offer-banner-height:70px;
}

.promo-offer-banner{
  padding:7px clamp(12px,2vw,28px);
}

.promo-offer-banner__inner{
  min-height:48px;
  gap:22px;
  padding:0 18px;
  border-radius:11px;
}

.promo-offer-banner__clock{
  width:32px;
  height:32px;
  border-width:1.7px;
}

.promo-offer-banner__clock svg{
  width:18px;
  height:18px;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  font-size:clamp(14px,1.14vw,19px);
}

.promo-offer-banner__timer-value{
  font-size:clamp(22px,2.15vw,32px);
}

.promo-offer-banner__divider{
  height:34px;
}

.promo-offer-banner__code{
  min-width:205px;
  padding:12px 22px;
  font-size:clamp(20px,1.75vw,28px);
}

.promo-offer-banner__button{
  min-width:250px;
  min-height:44px;
  overflow:visible;
  font-size:clamp(15px,1.16vw,19px);
}

.promo-offer-banner__button > span{
  position:relative;
  z-index:2;
}

.promo-offer-banner__button::before{
  inset:0 auto 0 -45%;
  z-index:1;
  width:38%;
  border-radius:inherit;
  animation:promoOfferButtonShine 2.7s ease-in-out infinite;
}

.promo-offer-banner__button::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:1px solid rgba(255,215,126,.68);
  border-radius:14px;
  opacity:.36;
  transform:scale(.985);
  box-shadow:0 0 0 0 rgba(228,177,90,.28),0 0 18px rgba(228,177,90,.18);
  animation:promoOfferButtonHalo 2.15s ease-in-out infinite;
  pointer-events:none;
}

@keyframes promoOfferButtonHalo{
  0%,100%{
    opacity:.34;
    transform:scale(.985);
    box-shadow:0 0 0 0 rgba(228,177,90,.22),0 0 14px rgba(228,177,90,.14);
  }
  50%{
    opacity:.82;
    transform:scale(1.045);
    box-shadow:0 0 0 7px rgba(228,177,90,0),0 0 22px rgba(228,177,90,.26);
  }
}

@media (max-width:1180px){
  .promo-offer-banner__button{
    min-width:210px;
  }
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:94px;
  }

  .promo-offer-banner{
    padding:3px 8px;
  }

  .promo-offer-banner__inner{
    min-height:0;
    gap:5px 9px;
    padding:6px 9px;
  }

  .promo-offer-banner__code{
    min-width:0;
    padding:4px 8px 5px;
    font-size:13px;
    line-height:1.05;
  }

  .promo-offer-banner__code::before{
    content:"Промокод";
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.72);
    font-size:8.5px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
    text-transform:none;
  }

  .promo-offer-banner__button{
    min-width:124px;
    min-height:33px;
    font-size:12px;
  }

  .promo-offer-banner__button::after{
    inset:-4px;
    border-radius:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .promo-offer-banner__button::after{
    animation:none;
    opacity:.42;
    transform:none;
  }
}

/* Final mobile/desktop lock for the new discount strip. */
:root{
  --promo-offer-banner-height:84px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:10px clamp(12px,2.4vw,32px) !important;
  background:#111 !important;
  border-bottom:1px solid rgba(255,204,104,.32) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
}

.promo-offer-banner__inner{
  width:min(820px,100%) !important;
  min-height:62px !important;
  display:grid !important;
  grid-template-columns:minmax(216px,.82fr) minmax(310px,1.18fr) !important;
  grid-template-areas:"discount action" !important;
  align-items:center !important;
  gap:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:#111 !important;
  box-shadow:none !important;
}

.promo-offer-banner__timer{
  grid-area:discount !important;
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  min-width:0 !important;
  gap:16px !important;
  column-gap:16px !important;
  row-gap:4px !important;
  padding-left:10px !important;
}

.promo-offer-banner__timer::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:2px;
  height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,202,99,.6),transparent);
  transform:translateY(-50%);
}

.promo-offer-banner__clock{
  grid-row:1 / 3 !important;
  grid-column:1 !important;
  width:54px !important;
  height:54px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  filter:drop-shadow(0 4px 10px rgba(245,189,77,.2)) !important;
}

.promo-offer-banner__clock svg{
  display:none !important;
}

.promo-offer-banner__clock::before{
  content:"%";
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.promo-offer-banner__timer-label{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  color:rgba(255,255,255,.86) !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  margin-top:4px !important;
  color:#f7bd4d !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:.95 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider,
.promo-offer-banner__promo{
  display:none !important;
}

.promo-offer-banner__button{
  grid-area:action !important;
  min-width:0 !important;
  width:100% !important;
  min-height:62px !important;
  padding:0 28px !important;
  gap:18px !important;
  border:1px solid rgba(120,75,10,.3) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:26px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 20px rgba(0,0,0,.22) !important;
}

.promo-offer-banner__button::after{
  display:none !important;
}

.promo-offer-banner__button-arrow{
  font-size:40px !important;
  font-weight:400 !important;
  line-height:.75 !important;
}

@media (max-width:760px){
  :root{
    --promo-offer-banner-height:78px;
  }

  .promo-offer-banner{
    padding:8px 10px !important;
  }

  .promo-offer-banner__inner{
    width:100% !important;
    min-height:58px !important;
    grid-template-columns:minmax(136px,.86fr) minmax(158px,1.14fr) !important;
    grid-template-areas:"discount action" !important;
    gap:10px !important;
    border-radius:12px !important;
  }

  .promo-offer-banner__timer{
    gap:10px !important;
    padding-left:7px !important;
  }

  .promo-offer-banner__timer::before{
    width:1px;
    height:42px;
  }

  .promo-offer-banner__clock{
    width:40px !important;
    height:40px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:21px;
  }

  .promo-offer-banner__timer-label{
    font-size:14px !important;
  }

  .promo-offer-banner__timer-value{
    margin-top:2px !important;
    font-size:28px !important;
  }

  .promo-offer-banner__button{
    min-height:52px !important;
    padding:0 13px !important;
    gap:8px !important;
    border-radius:12px !important;
    font-size:18px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:28px !important;
  }
}

@media (max-width:380px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(118px,.78fr) minmax(138px,1.22fr) !important;
    gap:7px !important;
  }

  .promo-offer-banner__clock{
    width:34px !important;
    height:34px !important;
  }

  .promo-offer-banner__clock::before{
    font-size:18px;
  }

  .promo-offer-banner__timer-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:24px !important;
  }

  .promo-offer-banner__button{
    min-height:48px !important;
    padding:0 10px !important;
    font-size:16px !important;
  }
}

/* Full welcome promo strip: timer + code + discount + CTA. */
:root{
  --promo-offer-banner-height:86px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:10px 12px !important;
  background:#111 !important;
  border-bottom:1px solid rgba(255,204,104,.32) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
}

.promo-offer-banner__inner{
  width:min(1980px,100%) !important;
  min-height:66px !important;
  display:grid !important;
  grid-template-columns:minmax(390px,.9fr) 1px minmax(360px,.9fr) minmax(260px,.62fr) minmax(390px,.9fr) !important;
  grid-template-areas:"timer divider promo discount action" !important;
  align-items:center !important;
  gap:26px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,204,104,.22) !important;
  border-radius:14px !important;
  background:#111 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.promo-offer-banner__timer{
  grid-area:timer !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  padding-left:0 !important;
}

.promo-offer-banner__timer::before,
.promo-offer-banner__discount::before{
  display:none !important;
}

.promo-offer-banner__clock{
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid #f5bd4d !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#f5bd4d !important;
  clip-path:none !important;
  filter:drop-shadow(0 4px 10px rgba(245,189,77,.16)) !important;
}

.promo-offer-banner__clock svg{
  display:block !important;
  width:25px !important;
  height:25px !important;
}

.promo-offer-banner__clock::before{
  content:none !important;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  color:rgba(255,255,255,.86) !important;
  font-size:24px !important;
  font-weight:500 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  margin:0 !important;
  color:#f7bd4d !important;
  font-size:38px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider{
  grid-area:divider !important;
  display:block !important;
  width:1px !important;
  height:50px !important;
  background:linear-gradient(180deg,transparent,rgba(255,204,104,.42),transparent) !important;
}

.promo-offer-banner__promo{
  grid-area:promo !important;
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

.promo-offer-banner__code{
  min-width:214px !important;
  padding:16px 24px !important;
  border:1px solid rgba(255,204,104,.34) !important;
  border-radius:12px !important;
  background:rgba(16,16,16,.7) !important;
  color:#f5bd4d !important;
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.promo-offer-banner__code::before{
  display:none !important;
}

.promo-offer-banner__discount{
  grid-area:discount !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:0 !important;
  padding-left:0 !important;
}

.promo-offer-banner__discount-icon{
  display:grid !important;
  place-items:center !important;
  width:54px !important;
  height:54px !important;
  flex:0 0 auto !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  font-size:28px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.promo-offer-banner__discount-copy{
  display:grid !important;
  gap:2px !important;
}

.promo-offer-banner__discount-label{
  color:rgba(255,255,255,.86) !important;
  font-size:21px !important;
  font-weight:500 !important;
  line-height:1.05 !important;
}

.promo-offer-banner__discount-value{
  color:#f7bd4d !important;
  font-size:36px !important;
  font-weight:900 !important;
  line-height:.95 !important;
}

.promo-offer-banner__button{
  grid-area:action !important;
  width:100% !important;
  min-width:0 !important;
  min-height:62px !important;
  padding:0 30px !important;
  gap:18px !important;
  border:1px solid rgba(120,75,10,.3) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:28px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 20px rgba(0,0,0,.22) !important;
}

.promo-offer-banner__button::after{
  display:none !important;
}

.promo-offer-banner__button-arrow{
  font-size:40px !important;
  font-weight:400 !important;
  line-height:.75 !important;
}

.promo-offer-banner__button-mobile-text{
  display:none !important;
}

@media (max-width:1500px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(318px,.92fr) 1px minmax(286px,.82fr) minmax(216px,.62fr) minmax(300px,.85fr) !important;
    gap:18px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label{
    font-size:20px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:32px !important;
  }

  .promo-offer-banner__code{
    min-width:178px !important;
    font-size:25px !important;
  }

  .promo-offer-banner__button{
    font-size:23px !important;
  }
}

@media (max-width:980px){
  :root{
    --promo-offer-banner-height:132px;
  }

  .promo-offer-banner{
    padding:8px !important;
  }

  .promo-offer-banner__inner{
    min-height:112px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "timer promo"
      "discount action" !important;
    gap:10px 12px !important;
    padding:10px !important;
    border-radius:13px !important;
  }

  .promo-offer-banner__divider{
    display:none !important;
  }

  .promo-offer-banner__timer,
  .promo-offer-banner__promo,
  .promo-offer-banner__discount{
    gap:9px !important;
  }

  .promo-offer-banner__clock,
  .promo-offer-banner__discount-icon{
    width:34px !important;
    height:34px !important;
  }

  .promo-offer-banner__clock svg{
    width:18px !important;
    height:18px !important;
  }

  .promo-offer-banner__discount-icon{
    font-size:18px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label,
  .promo-offer-banner__discount-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value,
  .promo-offer-banner__discount-value{
    font-size:21px !important;
  }

  .promo-offer-banner__promo{
    justify-content:flex-end !important;
  }

  .promo-offer-banner__code{
    min-width:112px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
    font-size:16px !important;
  }

  .promo-offer-banner__button{
    min-height:42px !important;
    padding:0 12px !important;
    gap:8px !important;
    border-radius:10px !important;
    font-size:16px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:26px !important;
  }
}

@media (max-width:380px){
  :root{
    --promo-offer-banner-height:138px;
  }

  .promo-offer-banner__inner{
    gap:8px !important;
    padding:9px 8px !important;
  }

  .promo-offer-banner__timer-label,
  .promo-offer-banner__promo-label,
  .promo-offer-banner__discount-label{
    font-size:11px !important;
  }

  .promo-offer-banner__timer-value,
  .promo-offer-banner__discount-value{
    font-size:19px !important;
  }

  .promo-offer-banner__code{
    min-width:102px !important;
    font-size:14px !important;
  }

  .promo-offer-banner__button{
    font-size:14px !important;
  }
}

/* Compact final promo layout: no overlap on desktop or mobile. */
:root{
  --promo-offer-banner-height:72px;
}

.promo-offer-banner{
  min-height:var(--promo-offer-banner-height) !important;
  padding:7px 12px !important;
  background:#111 !important;
}

.promo-offer-banner__inner{
  width:100% !important;
  max-width:2024px !important;
  min-height:56px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(300px,.78fr) 1px minmax(300px,.72fr) minmax(210px,.48fr) minmax(330px,.7fr) !important;
  grid-template-areas:"timer divider promo discount action" !important;
  align-items:center !important;
  gap:18px !important;
  padding:0 14px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,204,104,.24) !important;
  border-radius:14px !important;
  background:#111 !important;
}

.promo-offer-banner__timer{
  grid-area:timer !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  gap:14px !important;
  padding:0 !important;
}

.promo-offer-banner__clock{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  border:2px solid #f5bd4d !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#f5bd4d !important;
  clip-path:none !important;
}

.promo-offer-banner__clock svg{
  display:block !important;
  width:21px !important;
  height:21px !important;
}

.promo-offer-banner__clock::before{
  content:none !important;
}

.promo-offer-banner__timer-label,
.promo-offer-banner__promo-label{
  flex:0 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:rgba(255,255,255,.84) !important;
  font-size:19px !important;
  font-weight:500 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__timer-value{
  flex:0 0 auto !important;
  margin:0 !important;
  color:#f7bd4d !important;
  font-size:31px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__divider{
  grid-area:divider !important;
  display:block !important;
  width:1px !important;
  height:44px !important;
  background:linear-gradient(180deg,transparent,rgba(255,204,104,.38),transparent) !important;
}

.promo-offer-banner__promo{
  grid-area:promo !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  gap:14px !important;
}

.promo-offer-banner__code{
  min-width:178px !important;
  padding:13px 20px !important;
  border:1px solid rgba(255,204,104,.34) !important;
  border-radius:10px !important;
  background:rgba(16,16,16,.72) !important;
  color:#f5bd4d !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.promo-offer-banner__code::before{
  display:none !important;
}

.promo-offer-banner__discount{
  grid-area:discount !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  gap:12px !important;
}

.promo-offer-banner__discount-icon{
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  background:#f5bd4d !important;
  color:#111 !important;
  clip-path:polygon(50% 0,58% 9%,70% 5%,75% 17%,88% 17%,88% 31%,100% 39%,91% 50%,100% 61%,88% 69%,88% 83%,75% 83%,70% 95%,58% 91%,50% 100%,42% 91%,30% 95%,25% 83%,12% 83%,12% 69%,0 61%,9% 50%,0 39%,12% 31%,12% 17%,25% 17%,30% 5%,42% 9%) !important;
  font-size:24px !important;
  font-weight:900 !important;
}

.promo-offer-banner__discount-copy{
  display:grid !important;
  min-width:0 !important;
  gap:1px !important;
}

.promo-offer-banner__discount-label{
  color:rgba(255,255,255,.84) !important;
  font-size:18px !important;
  font-weight:500 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__discount-value{
  color:#f7bd4d !important;
  font-size:31px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__button{
  grid-area:action !important;
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:0 22px !important;
  gap:14px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffd978 0%,#efb444 100%) !important;
  color:#15110b !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.promo-offer-banner__button-arrow{
  font-size:34px !important;
  line-height:.75 !important;
}

@media (max-width:1500px){
  .promo-offer-banner__inner{
    grid-template-columns:minmax(250px,.76fr) 1px minmax(180px,.5fr) minmax(190px,.48fr) minmax(260px,.68fr) !important;
    gap:12px !important;
  }

  .promo-offer-banner__promo-label{
    display:none !important;
  }
}

@media (max-width:980px){
  :root{
    --promo-offer-banner-height:168px;
  }

  .promo-offer-banner{
    padding:6px 8px !important;
  }

  .promo-offer-banner__inner{
    min-height:154px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "timer timer"
      "promo discount"
      "action action" !important;
    gap:8px 10px !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  .promo-offer-banner__divider,
  .promo-offer-banner__promo-label{
    display:none !important;
  }

  .promo-offer-banner__timer{
    justify-content:center !important;
    padding-bottom:8px !important;
    border-bottom:1px dashed rgba(255,232,184,.42) !important;
  }

  .promo-offer-banner__timer,
  .promo-offer-banner__promo,
  .promo-offer-banner__discount{
    gap:8px !important;
  }

  .promo-offer-banner__promo{
    justify-content:center !important;
    min-height:50px !important;
    padding:6px 8px !important;
    border:1px solid rgba(255,204,104,.3) !important;
    border-right:0 !important;
    border-radius:11px 0 0 11px !important;
  }

  .promo-offer-banner__discount{
    justify-content:center !important;
    min-height:50px !important;
    padding:6px 8px !important;
    border:1px solid rgba(255,204,104,.3) !important;
    border-left:1px solid rgba(255,204,104,.34) !important;
    border-radius:0 11px 11px 0 !important;
  }

  .promo-offer-banner__clock,
  .promo-offer-banner__discount-icon{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }

  .promo-offer-banner__clock svg{
    width:17px !important;
    height:17px !important;
  }

  .promo-offer-banner__discount-icon{
    font-size:17px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:28px !important;
  }

  .promo-offer-banner__discount-value{
    font-size:23px !important;
  }

  .promo-offer-banner__timer-label{
    display:inline !important;
    font-size:15px !important;
  }

  .promo-offer-banner__discount-label{
    font-size:12px !important;
  }

  .promo-offer-banner__code{
    min-width:0 !important;
    width:100% !important;
    max-width:180px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:18px !important;
  }

  .promo-offer-banner__button{
    min-height:44px !important;
    padding:0 12px !important;
    gap:8px !important;
    border-radius:11px !important;
    font-size:18px !important;
  }

  .promo-offer-banner__button-text{
    display:none !important;
  }

  .promo-offer-banner__button-mobile-text{
    display:inline !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:28px !important;
  }
}

@media (max-width:380px){
  :root{
    --promo-offer-banner-height:158px;
  }

  .promo-offer-banner__inner{
    min-height:144px !important;
    gap:7px !important;
    padding:9px 8px !important;
  }

  .promo-offer-banner__timer-label{
    font-size:13px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:25px !important;
  }

  .promo-offer-banner__discount-value{
    font-size:21px !important;
  }

  .promo-offer-banner__discount-label{
    font-size:12px !important;
  }

  .promo-offer-banner__code{
    font-size:16px !important;
  }

  .promo-offer-banner__button{
    font-size:15px !important;
  }
}

/* Tight mobile promo strip with matching header offset. */
@media (max-width:980px){
  :root{
    --promo-offer-banner-height:136px;
  }

  .promo-offer-banner{
    min-height:136px !important;
    padding:5px 8px !important;
  }

  .promo-offer-banner__inner{
    min-height:126px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "timer timer"
      "promo discount"
      "action action" !important;
    gap:6px 8px !important;
    padding:7px 9px !important;
    border-radius:13px !important;
  }

  .promo-offer-banner__timer{
    min-height:29px !important;
    justify-content:center !important;
    gap:8px !important;
    padding:0 0 6px !important;
    border-bottom:1px dashed rgba(255,232,184,.38) !important;
  }

  .promo-offer-banner__clock{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }

  .promo-offer-banner__clock svg{
    width:14px !important;
    height:14px !important;
  }

  .promo-offer-banner__timer-label{
    display:inline !important;
    font-size:13px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:24px !important;
  }

  .promo-offer-banner__promo,
  .promo-offer-banner__discount{
    min-height:38px !important;
    padding:4px 7px !important;
  }

  .promo-offer-banner__code{
    font-size:16px !important;
  }

  .promo-offer-banner__discount-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
    font-size:15px !important;
  }

  .promo-offer-banner__discount-label{
    font-size:11px !important;
  }

  .promo-offer-banner__discount-value{
    font-size:20px !important;
  }

  .promo-offer-banner__button{
    min-height:36px !important;
    padding:0 12px !important;
    border-radius:10px !important;
    font-size:16px !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:24px !important;
  }

  html.promo-offer-banner-active .belfood-modern-header{
    top:136px !important;
  }
}

@media (max-width:380px){
  :root{
    --promo-offer-banner-height:130px;
  }

  .promo-offer-banner{
    min-height:130px !important;
  }

  .promo-offer-banner__inner{
    min-height:120px !important;
    padding:6px 8px !important;
  }

  .promo-offer-banner__timer-label{
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:22px !important;
  }

  html.promo-offer-banner-active .belfood-modern-header{
    top:130px !important;
  }
}

/* Small locked mobile promo: exact height + exact header offset. */
@media (max-width:980px){
  :root{
    --promo-offer-banner-height:122px;
  }

  .promo-offer-banner{
    height:122px !important;
    min-height:122px !important;
    max-height:122px !important;
    padding:4px 8px !important;
    overflow:hidden !important;
  }

  .promo-offer-banner__inner{
    height:114px !important;
    min-height:114px !important;
    max-height:114px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "timer timer"
      "promo discount"
      "action action" !important;
    gap:5px 8px !important;
    padding:6px 9px !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }

  .promo-offer-banner:not([hidden]) + .belfood-modern-header{
    margin-top:122px !important;
  }

  html.promo-offer-banner-active .belfood-modern-header{
    top:122px !important;
  }

  .promo-offer-banner__timer{
    min-height:27px !important;
    gap:8px !important;
    padding:0 0 5px !important;
    border-bottom:1px dashed rgba(255,232,184,.36) !important;
  }

  .promo-offer-banner__clock{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
  }

  .promo-offer-banner__clock svg{
    width:13px !important;
    height:13px !important;
  }

  .promo-offer-banner__timer-label{
    display:inline !important;
    font-size:12px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:22px !important;
  }

  .promo-offer-banner__promo,
  .promo-offer-banner__discount{
    min-height:36px !important;
    height:36px !important;
    padding:3px 7px !important;
  }

  .promo-offer-banner__promo{
    display:grid !important;
    place-items:center !important;
    gap:1px !important;
  }

  .promo-offer-banner__promo-label{
    display:block !important;
    color:rgba(255,255,255,.82) !important;
    font-size:11px !important;
    font-weight:500 !important;
    line-height:1 !important;
  }

  .promo-offer-banner__promo-label{
    color:transparent !important;
    position:relative !important;
  }

  .promo-offer-banner__promo-label::before{
    content:"Промокод";
    position:absolute;
    inset:0;
    color:rgba(255,255,255,.82);
  }

  .promo-offer-banner__code{
    width:auto !important;
    max-width:none !important;
    font-size:15px !important;
    line-height:1 !important;
  }

  .promo-offer-banner__discount{
    gap:7px !important;
  }

  .promo-offer-banner__discount-icon{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    font-size:14px !important;
  }

  .promo-offer-banner__discount-label{
    font-size:10px !important;
  }

  .promo-offer-banner__discount-value{
    font-size:19px !important;
  }

  .promo-offer-banner__button{
    min-height:32px !important;
    height:32px !important;
    padding:0 12px !important;
    border-radius:9px !important;
    font-size:15px !important;
  }

  .promo-offer-banner__button-arrow{
    font-size:22px !important;
  }
}

@media (max-width:380px){
  :root{
    --promo-offer-banner-height:116px;
  }

  .promo-offer-banner{
    height:116px !important;
    min-height:116px !important;
    max-height:116px !important;
  }

  .promo-offer-banner__inner{
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
    padding:5px 8px !important;
  }

  .promo-offer-banner:not([hidden]) + .belfood-modern-header{
    margin-top:116px !important;
  }

  html.promo-offer-banner-active .belfood-modern-header{
    top:116px !important;
  }

  .promo-offer-banner__timer-label{
    font-size:11px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:20px !important;
  }

  .promo-offer-banner__code{
    font-size:14px !important;
  }

  .promo-offer-banner__button{
    font-size:14px !important;
  }
}

/* Join promo code and discount into one mobile pill. */
@media (max-width:980px){
  .promo-offer-banner__inner{
    column-gap:0 !important;
    row-gap:5px !important;
  }

  .promo-offer-banner__promo{
    position:relative !important;
    border:1px solid rgba(255,204,104,.34) !important;
    border-right:0 !important;
    border-radius:10px 0 0 10px !important;
    background:rgba(16,16,16,.42) !important;
  }

  .promo-offer-banner__promo::after{
    content:"";
    position:absolute;
    top:7px;
    right:-1px;
    bottom:7px;
    width:1px;
    background:rgba(255,204,104,.32);
    z-index:2;
  }

  .promo-offer-banner__discount{
    border:1px solid rgba(255,204,104,.34) !important;
    border-left:0 !important;
    border-radius:0 10px 10px 0 !important;
    background:rgba(16,16,16,.42) !important;
  }
}

/* Desktop promo code label restored. */
@media (min-width:981px){
  :root{
    --promo-offer-banner-height:64px;
  }

  .promo-offer-banner{
    min-height:64px !important;
    padding:6px 10px !important;
  }

  .promo-offer-banner__inner{
    min-height:50px !important;
    grid-template-columns:minmax(380px,.9fr) 1px minmax(470px,1.04fr) minmax(190px,.42fr) minmax(300px,.62fr) !important;
    gap:12px !important;
    padding:0 12px !important;
  }

  .promo-offer-banner__timer{
    gap:12px !important;
  }

  .promo-offer-banner__clock{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }

  .promo-offer-banner__clock svg{
    width:18px !important;
    height:18px !important;
  }

  .promo-offer-banner__timer-label{
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:17px !important;
  }

  .promo-offer-banner__timer-value{
    font-size:27px !important;
  }

  .promo-offer-banner__promo-label{
    display:inline-flex !important;
    flex:0 1 auto !important;
    max-width:none !important;
    overflow:visible !important;
    color:rgba(255,255,255,.84) !important;
    font-size:17px !important;
    font-weight:500 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .promo-offer-banner__promo{
    justify-content:flex-start !important;
    gap:14px !important;
  }

  .promo-offer-banner__code{
    flex:0 0 auto !important;
    min-width:154px !important;
    padding:10px 16px !important;
    font-size:21px !important;
  }

  .promo-offer-banner__discount-icon{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    font-size:21px !important;
  }

  .promo-offer-banner__discount-label{
    font-size:16px !important;
  }

  .promo-offer-banner__discount-value{
    font-size:28px !important;
  }

  .promo-offer-banner__button{
    min-height:42px !important;
    padding:0 18px !important;
    font-size:20px !important;
  }
}

/* On mobile, hide promo strip after the user starts scrolling. */
@media (max-width:980px){
  .promo-offer-banner{
    will-change:transform, opacity !important;
    transition:transform .34s cubic-bezier(.22,.72,.22,1), opacity .22s ease !important;
  }

  .belfood-modern-header{
    transition:top .34s cubic-bezier(.22,.72,.22,1), margin-top .34s cubic-bezier(.22,.72,.22,1) !important;
  }

  html.promo-offer-banner-scrolled .promo-offer-banner:not([hidden]){
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(-100%) !important;
  }

  html.promo-offer-banner-scrolled .promo-offer-banner:not([hidden]) + .belfood-modern-header{
    margin-top:0 !important;
  }

  html.promo-offer-banner-scrolled .belfood-modern-header{
    top:0 !important;
  }
}

/* Smooth promo reveal/hide on scroll direction for desktop and mobile. */
.promo-offer-banner{
  will-change:transform, opacity !important;
  transition:transform .36s cubic-bezier(.22,.72,.22,1), opacity .24s ease !important;
}

.belfood-modern-header{
  transition:top .36s cubic-bezier(.22,.72,.22,1), margin-top .36s cubic-bezier(.22,.72,.22,1) !important;
}

html.promo-offer-banner-scrolled .promo-offer-banner:not([hidden]){
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-100%) !important;
}

html.promo-offer-banner-scrolled .promo-offer-banner:not([hidden]) + .belfood-modern-header{
  margin-top:0 !important;
}

html.promo-offer-banner-scrolled .belfood-modern-header{
  top:0 !important;
}

@media (max-width:980px){
  .promo-offer-banner__promo-label{
    width:100% !important;
    text-align:center !important;
  }

  .promo-offer-banner__promo-label::before{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .promo-offer-banner__code{
    text-align:center !important;
  }
}