.bn-formulas { display: block; background: #00254c; color: #fff; padding: clamp(44px,5vw,80px) 0; }
.bn-formulas__inner { max-width: 1680px; margin: auto; padding: 0 clamp(24px,4vw,64px); }
.bn-formulas__heading { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin: 0 auto 38px; max-width: 760px; }
.bn-theme .bn-formulas h2 { margin: 0; color: #fff; font-size: clamp(32px,3.5vw,52px) !important; max-width: 760px; }
.bn-formulas__heading p { margin: 0; max-width: 580px; color: #d1dfea; font-size: 16px; line-height: 1.65; }
.bn-formulas__footer a { color: #fff; font-size: 14px; font-weight: 650; text-underline-offset: 6px; white-space: nowrap; }
.bn-formulas__footer a span { display: inline-block; margin-left: 12px; }
.bn-formulas__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px)/4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0; }
.bn-formulas__track::-webkit-scrollbar { display: none; }
.bn-formula { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 30px 20px 26px; background: linear-gradient(160deg,#f4f7fa,#dbe6f0); border: 1px solid #ffffff60; border-radius: 28px; text-align: center; scroll-snap-align: start; }
.bn-formula--featured { background: linear-gradient(160deg,#fff,#e4edf5); border-color: #fff; }
.bn-formula__title { display: grid; grid-template-rows: 28px auto; justify-items: center; align-content: start; gap: 14px; width: 100%; min-height: 94px; }
.bn-formula__focus { grid-row: 1; display: inline-block; padding: 4px 12px; border: 1px solid #b6c8d8; border-radius: 30px; color: #3a5b75; font-size: 12px; line-height: 1.4; }
.bn-theme .bn-formula h3 { grid-row: 2; margin: 0; font-size: clamp(20px,1.7vw,26px) !important; color: #00254c; }
.bn-formula h3 a { color: inherit; text-decoration: none; }
.bn-formula__image { --bottle-height: 270px; position: relative; width: 100%; height: var(--bottle-height); margin: 12px 0 22px; }
.bn-formula__image img { position: absolute; left: 50%; top: 50%; width: auto; height: calc(var(--bottle-height) * var(--image-scale, 1)); max-width: none; max-height: none; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 12px 12px #00172d30); transition: transform .25s ease; }
.bn-formula:hover .bn-formula__image img { transform: translate(-50%, calc(-50% - 5px)); }
.bn-formula__button { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 56px; margin-top: auto; padding: 10px 40px; border: 1px solid #00254c; border-radius: 14px; background: #00254c; color: #fff; text-align: center; text-decoration: none; font-size: 18px; font-weight: 650; box-shadow: 0 4px 10px #00254c14; transition: background .2s ease,box-shadow .2s ease; }
.bn-formula__button span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff16; font-size: 20px; }
.bn-formula__button:hover { background: #194767; color: #fff; box-shadow: 0 6px 14px #00254c24; }
.bn-formulas .bn-formula__price { font-size: 12px; line-height: 1.5; color: #425d74; margin: 14px 0 0; }
.bn-formulas__carousel { position: relative; }
.bn-formulas__navigation { position: absolute; inset: 0 -22px; pointer-events: none; display: flex; align-items: center; justify-content: space-between; }
.bn-formulas__footer { text-align: center; margin-top: 30px; }
.bn-formulas__navigation button { width: 44px; height: 44px; border: 1px solid #c4d4e2; border-radius: 50%; background: #fff; color: #00254c; font-size: 20px; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 16px #00172d33; }
.bn-formulas__navigation button:disabled { opacity: .55; cursor: default; }
.bn-formulas :is(a,button,[tabindex]):focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 1199px) { .bn-formulas__track { grid-auto-columns: calc((100% - 48px)/3); } }
@media (min-width: 750px) and (max-width: 989px) { .bn-formula__button span { right: 8px; width: 24px; height: 24px; font-size: 18px; } }
@media (max-width: 749px) {
  .bn-formulas__heading { gap: 16px; margin-bottom: 24px; }
  .bn-formulas__navigation { inset-inline: -16px; }
  .bn-formulas__navigation button { width: 40px; height: 40px; }
  .bn-formulas__track { grid-auto-columns: 84%; gap: 16px; }
  .bn-formula { padding: 26px 20px; }
  .bn-formula__image { --bottle-height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .bn-formula__image img { transition: none; } .bn-formula:hover .bn-formula__image img { transform: translate(-50%, -50%); } }

.bn-formula :is(a,button):focus-visible { outline-color: #316e9c; }
