@charset "UTF-8"; html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { margin: 0.67em 0; font-size: 2em; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-size: 1em; font-family: monospace, monospace; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-size: 1em; font-family: monospace, monospace; } small { font-size: 80%; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { margin: 0; font-size: 100%; line-height: 1.15; font-family: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { display: table; box-sizing: border-box; padding: 0; max-width: 100%; color: inherit; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } :root { --font-main: "DM Sans", sans-serif; --font-code: "JetBrains Mono", monospace; --font-fa: "Font Awesome 7 Pro"; --outline-bg: 96%; --outline-bg-hover: 84%; --outline-border: 82%; --color-text: #0f234a; --color-text-light: color-mix(in oklch, var(--color-text), white 40%); --color-text-disabled: color-mix(in oklch, var(--color-text), white 60%); --color-bg: color-mix(in oklch, var(--color-text), white var(--outline-bg)); --color-border: color-mix(in oklch, var(--color-text), white var(--outline-border)); --color-accent: #2d8540; --color-info: #0d73ad; --color-warning: #ed9521; --color-error: #b8240e; --color-success: #3b8003; --color-pink: #ce0f69; --color-orange: #ed9521; --color-accent-bg: color-mix(in oklch, var(--color-accent), white var(--outline-bg)); --color-accent-border: color-mix(in oklch, var(--color-accent), white var(--outline-border)); --color-info-bg: color-mix(in oklch, var(--color-info), white var(--outline-bg)); --color-info-border: color-mix(in oklch, var(--color-info), white var(--outline-border)); --color-warning-bg: color-mix(in oklch, var(--color-warning), white var(--outline-bg)); --color-warning-border: color-mix(in oklch, var(--color-warning), white var(--outline-border)); --color-error-bg: color-mix(in oklch, var(--color-error), white var(--outline-bg)); --color-error-border: color-mix(in oklch, var(--color-error), white var(--outline-border)); --color-success-bg: color-mix(in oklch, var(--color-success), white var(--outline-bg)); --color-success-border: color-mix(in oklch, var(--color-success), white var(--outline-border)); --color-promo: var(--color-pink); --color-promo-bg: color-mix(in oklch, var(--color-promo), white var(--outline-bg)); --color-promo-border: color-mix(in oklch, var(--color-promo), white var(--outline-border)); --color-promo-orange: #ed9521; --color-promo-orange-bg: color-mix(in oklch, var(--color-promo-orange), white var(--outline-bg)); --color-promo-orange-border: color-mix(in oklch, var(--color-promo-orange), white var(--outline-border)); --layout-mw: 1224px; --layout-mw-narrow: 808px; --layout-spacing: 12px; --layout-gap: calc(var(--layout-spacing) * 2); --layout-column-gap: calc(var(--layout-spacing) * 2); --layout-row-gap: calc(var(--layout-spacing) * 3); --layout-padding: max( calc(var(--layout-spacing) * 2), calc((100% - var(--layout-mw)) / 2) ); --layout-padding-narrow: max( calc(var(--layout-spacing) * 2), calc((100% - var(--layout-mw-narrow)) / 2) ); --border-radius: 6px; --border-radius-small: 4px; --border-radius-input: 6px; --box-shadow: 0 2px 4px 0 rgba(15, 35, 74, 0.24); --card-border-radius: 6px; --card-box-shadow: 0 6px 12px rgba(15, 35, 74, 0.06), 0 3px 3px rgba(15, 35, 74, 0.06); } @media (max-width: 768px) { :root { --layout-spacing: 8px; --layout-column-gap: 8px; --border-radius: 4px; --border-radius-small: 3px; --border-radius-input: 4px; --card-border-radius: 4px; } } body { --promo-height: 0px; --header-top-height: calc(var(--layout-spacing) * 3); --header-main-height: calc(var(--layout-spacing) * 8); --header-nav-height: calc(var(--layout-spacing) * 4); --header-height: calc( var(--header-top-height) + var(--header-main-height) + var(--header-nav-height) ); } @media (max-width: 1024px) { body { --header-top-height: 0; --header-main-height: calc(var(--layout-spacing) * 8 + 48px); --header-nav-height: 0; } } :focus-visible { outline-color: color-mix(in oklch, var(--color-text), white 60%); } .screenReaderText { position: absolute; clip-path: inset(50%); margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .screenReaderText:focus { display: block; top: 5px; left: 5px; z-index: 999; clip-path: none; background-color: #eee; padding: 15px 23px 14px; width: auto; height: auto; color: #444; font-size: 1em; line-height: normal; text-decoration: none; } :where([aria-busy=true]) { opacity: 0.5; pointer-events: none; } .accessibilityMenu { position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 9000 !important; display: none; flex-direction: column; border: 1px solid #131212; background: #131212; width: auto !important; } @media (max-width: 992px) { .accessibilityMenu { display: none !important; } } .accessibilityActive .accessibilityMenu { display: flex; } .accessibilityActive .accessibilityMenu a, .accessibilityActive .accessibilityMenu button { pointer-events: all; } .accessibilityMenu a, .accessibilityMenu button { display: inline-flex; position: relative; justify-content: center; align-items: center; border: 0; border-radius: 3px; background: #000; padding: 0 5px; width: 50px; height: 50px; pointer-events: none; color: #fff; font-size: 1.5em; outline: 0 !important; } .accessibilityMenu a:focus-visible, .accessibilityMenu a:hover, .accessibilityMenu button:focus-visible, .accessibilityMenu button:hover { color: #fff; } .accessibilityMenu a:focus-visible span, .accessibilityMenu a:hover span, .accessibilityMenu button:focus-visible span, .accessibilityMenu button:hover span { display: flex; } .accessibilityMenu a span, .accessibilityMenu button span { display: none; position: absolute; top: 50%; left: 110%; flex-wrap: nowrap; transform: translateY(-50%); border: 0; border-radius: 3px; background: #000; padding: 0 5px; width: auto; pointer-events: none; color: #fff; font-size: 0.933em; white-space: nowrap; } .bind-invisibleTabButton { display: inline-block !important; position: absolute !important; left: 255px; z-index: 999 !important; margin-top: -32px; border: 0; background: transparent; padding: 0 !important; width: 21px; height: 21px; } .bind-invisibleTabButton:after { display: none !important; } .bnuProductNav__title .bind-invisibleTabButton { float: right; position: relative; right: 12px; left: initial; margin-top: 0; width: 20px; height: 20px; pointer-events: none; } html.home .bnuProductNav__title .bind-invisibleTabButton { display: none; } .bind-focusOnElement.alwaysAccessible { display: none; opacity: 0; pointer-events: none; } @media (max-width: 992px) { .bind-focusOnElement.alwaysAccessible { height: 0; } } @media (min-width: 992px) { .bind-focusOnElement.alwaysAccessible { font-size: 80%; } } .bind-focusOnElement.alwaysAccessible:focus-visible { display: block; opacity: 1; } html.accessibilityContrast .bind-focusOnElement.alwaysAccessible { display: none; } html.accessibilityActive .bnuProductNav .bnuProductNav__menu.bnuProductNav__menu--many > li:nth-child(n+11) { display: block; } html.accessibilityActive .bnuProductNav .bnuProductNav__menu.bnuProductNav__menu--many > li:nth-child(10):after { display: none; } html.accessibilityActive .bnuSingleProduct__contentTabs .bind-untruncateContent { display: none !important; } html.accessibilityActive .bnuSingleProduct__contentTabs .contentTab.contentTab--truncated .contentTab__content { max-height: initial !important; line-clamp: initial; -webkit-line-clamp: initial; } html.accessibilityActive .bnuSingleProduct__contentTabs .contentTab.contentTab--truncated .contentTab__content:after { display: none; } html.accessibilityActive .bind-topNotificationHolder .bnuHeader__attention { position: relative !important; background-color: #fff; width: 100%; white-space: normal; } html.accessibilityActive .bind-topNotificationHolder .bnuHeader__attention:after { display: none; } @media (max-width: 992px) { html.accessibilityActive .bind-topNotificationHolder .bnuHeader__attention { position: inherit; top: inherit; background: none; } } .bnuPageContent p a { text-decoration: underline; text-underline-offset: 2px; } .broken-link { cursor: default; pointer-events: none; text-decoration: none; } .broken-link.active { display: block; border: 2px dotted red; pointer-events: initial; } html.accessibilityContrast .button--green { color: #fff; } html.accessibilityContrast .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html.accessibilityContrast.userProfile .countBubble { background-color: #99300A; } html.accessibilityContrast .bnProductCard__price .price--new { color: #99300A; } html.accessibilityContrast.benu-eshop-lt .bnMainMenu__categories li.module-2277 a.subMenuLink, html.accessibilityContrast.benu-eshop-lt .bnMainMenu__categories li.module-10232 a.subMenuLink, html.accessibilityContrast.benu-eshop-ee .bnMainMenu__categories li.module-2277 a.subMenuLink, html.accessibilityContrast.benu-eshop-ee .bnMainMenu__categories li.module-10232 a.subMenuLink { color: #99300A; } html.accessibilityContrast .menuItemDeco--orange { color: #99300A !important; } html.accessibilityContrast .bnPriceBox__outOfStockText { color: #99300A; } html.accessibilityContrast .bnAttentionBubble { background-color: #99300A; } html.accessibilityContrast .bnProductDiscount { background-color: #99300A; } html.accessibilityContrast .bnPriceBox__price .price--new { color: #99300A; } html.accessibilityContrast .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html.accessibilityContrast .bnMainMenu__menuClientCart .lvl-1 > a { color: #325D0E; } html.accessibilityContrast .bnStep.complete .bnStep__heading h2, html.accessibilityContrast .bnStep.complete .bnStep__heading .h2, html.accessibilityContrast .bnStep.complete .bnStep__heading .icon { color: #325D0E; } html.accessibilityContrast .bnPageTitle.bnPageTitle--green { color: #325D0E; } html.accessibilityContrast .bnProductCard__price .price--card { color: #325D0E; } html.accessibilityContrast .bnFooter__logoWrap .loyaltyCards a.benu { color: #325D0E; } html.accessibilityContrast .bnPriceBox__price .price--card { color: #325D0E; } html.accessibilityContrast .bnPriceBox__price .price--card span.cardInfo a { color: #325D0E; } html.accessibilityContrast .menuItemDeco--green { color: #325D0E !important; } html.accessibilityContrast .bnPriceBoxSticky__price .price--card { color: #325D0E; } html.accessibilityContrast .bnShopSummary tr.promo td { color: #325D0E; } html.accessibilityContrast .bnShopSummary tr.discount td { color: #99300A; } html.accessibilityContrast .bnShopSummary tr td p { color: #131212; } html.accessibilityContrast .bnCheckbox label p span.bnGreen { color: #325D0E; } html.accessibilityContrast .section--account .loyaltyCard__data .loyaltyCardData__value.loyaltyCashback { color: #325D0E; } html.accessibilityContrast .bnMainMenu__categoriesTitle { background-color: #325D0E; } html.accessibilityContrast .bnDiscount.bnDiscount--green, html.accessibilityContrast .bnDiscount.bnDiscount--card { background-color: #325D0E; } html.accessibilityContrast .button.button--green { background-color: #325D0E; } html.accessibilityContrast .bnProductDiscount--card { background-color: #325D0E; } html.accessibilityContrast .header__wishlistButton .dataBox.qnt { background-color: #325D0E; } html.accessibilityContrast .accountIcon .userNotificationBubble.userNotificationBubble--success { background-color: #325D0E; } html.accessibilityContrast .bnButton.bnButton--green { background-color: #325D0E; color: #fff; } html.accessibilityContrast .bnButton.bnButton--green:hover { background-color: #325D0E; color: #fff; } html.accessibilityContrast .bnMultiQnt__content .discount { background-color: #99300A; } html.accessibilityContrast .block-reservations .calendar .ui-datepicker-calendar tbody td.open.ui-datepicker-current-day a { background-color: #325D0E !important; } html.accessibilityContrast .block-reservations .times .times-item input:checked + label { background-color: #325D0E; } html.accessibilityContrast .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__price.bnProductDeliveryOptionsGroup__price--free { color: #325D0E; } html.accessibilityContrast.bnProductCard__price .price--text { color: #325D0E; } html.accessibilityContrast .benuBadge.benuBadge--green, html.accessibilityContrast .benuBadge.benuBadge--eprice, html.accessibilityContrast .benuBadge.benuBadge--lightgreen { background: #325D0E; } html.accessibilityContrast .bnPriceBox__priceInfoSoft, html.accessibilityContrast .bnPriceBox__priceInfo { color: #131212; } html.accessibilityContrast .bnPriceBox__priceInfoSoft .color-red, html.accessibilityContrast .bnPriceBox__priceInfo .color-red { color: #AD0000; } html.accessibilityContrast .bnPriceBox__priceInfoSoft .color-green, html.accessibilityContrast .bnPriceBox__priceInfo .color-green { color: #325D0E; } html.accessibilityContrast .bind-reviewsCount, html.accessibilityContrast .bnAnswerItem__header .date, html.accessibilityContrast .bnReviewItem__header .date { color: #131212; } html.accessibilityContrast .footerWidget table p, html.accessibilityContrast .footerWidget table a { color: #131212; } html.accessibilityContrast .footerWidget.footerWidget--text p, html.accessibilityContrast .footerWidget.footerWidget--text a, html.accessibilityContrast .footerWidget.footerWidget--certificates p, html.accessibilityContrast .footerWidget.footerWidget--certificates a { color: #131212; } html.accessibilityContrast .bnLogo .slogan { color: #131212; } html.accessibilityContrast .bnPriceBox__oldPricePeriod { color: #131212; } html.accessibilityContrast .bnShopTableRx tbody td.rxProduct .prescription { color: #131212; } html.accessibilityContrast .bnShopTableRx tbody td.rxProduct .info p { color: #131212; } html.accessibilityContrast .bnBox--rx table p:first-child { color: #131212; } html.accessibilityContrast .bnPriceBox__measurePrice { color: #131212; } html.accessibilityContrast .bnOrderConfirmation p { color: #131212; } html.accessibilityContrast .bnMultiQnt__content .price .units { color: #131212; } html.accessibilityContrast .cartTable__productRow .cart_prBitsWrap, html.accessibilityContrast .cartTable__product .cart_prBitsWrap { color: #131212; } html.accessibilityContrast .pr_filterGroup .sliderWrap .valuesWrap .values .separator { color: #131212; } html.accessibilityContrast .footerWidget table .footerWidget.footerWidget--text a { color: #131212; } html.accessibilityContrast .productItem__category { color: #131212; } html.accessibilityContrast .bnProductCard__rating .count { color: #131212; } html.accessibilityContrast .bnFooter__logoWrap .contacts a span { color: #131212; } html.accessibilityContrast .bnFooter__info { color: #131212; } html.accessibilityContrast .bnMobileMenu__header ul li a.inactive { color: #131212; } html.accessibilityContrast .bnBreadcrumbs > div a.active { color: #131212; } html.accessibilityContrast .bnBreadcrumbs > div span.active.active { color: #131212; } html.accessibilityContrast .bnSingleProduct__rating a { color: #131212; } html.accessibilityContrast .bnSingleProduct__category { color: #131212; } html.accessibilityContrast .bnBoughtTogether.bnBoughtTogether--desktop .contentBox .boughtTogetherProduct__kitPrice p { color: #131212; } html.accessibilityContrast .productPage_innerPlaceholder { color: #131212; } html.accessibilityContrast .bnPriceBox__price .price--card span.cardInfo { color: #131212; } html.accessibilityContrast .bnReviewsBox .count { color: #131212; } html.accessibilityContrast .bnReviewsList__sort .noItems { color: #131212; } html.accessibilityContrast .bnAnswersList__sort .noItems { color: #131212; } html.accessibilityContrast .tabs__links a.inactive { color: #131212; } html.accessibilityContrast .articleDefault__category { color: #131212; } html.accessibilityContrast .articleDefault__date { color: #131212; } html.accessibilityContrast .bnSingleProductGallery .bnSingleProductGallery__info { color: #131212; } html.accessibilityContrast .bnProduct__category { color: #131212; } html.accessibilityContrast .boughtTogetherProduct__kitPrice p { color: #131212; } html.accessibilityContrast .productControl__count { color: #131212; } html.accessibilityContrast .bnProductControl__right .productControl__grouping .groupingLabel, html.accessibilityContrast .bnProductControl__right .productControl__sorting .sortingLabel { color: #131212; } html.accessibilityContrast .bnMobileWidgetButtons__button .buttonLabel { color: #131212; } html.accessibilityContrast .block-reservations .reservationFormNew .datePickerButton > .button { color: #131212; opacity: 1; } html.accessibilityContrast .block-reservations .calendarPopupWrap .bottomWrap .selectedDate { color: #131212; } html.accessibilityContrast .block-reservations .times .times-item label.closed { color: #fff; background-color: #AD0000; } html.accessibilityContrast .formItem--date div .placeholder { color: #131212; } html.accessibilityContrast .bnShopHeading.bnShopHeading--gray h2, html.accessibilityContrast .bnShopHeading.bnShopHeading--gray .h2 { color: #131212; } html.accessibilityContrast .bnShopTable thead { color: #131212; } html.accessibilityContrast .bnFieldset legend { color: #131212; } html.accessibilityContrast .bnRadio label p small { color: #131212; } html.accessibilityContrast .bnStep.inactive .bnStep__heading h2, html.accessibilityContrast .bnStep.inactive .bnStep__heading .h2 { color: #325D0E; } html.accessibilityContrast .bnStep.inactive .bnStep__heading .icon { color: #131212; } html.accessibilityContrast label { color: #131212; } html.accessibilityContrast .bnStepBubbles li[data-stepbubbletitle]:not(:nth-child(1)) .icon { color: #131212; } html.accessibilityContrast .bnStep__info { color: #131212; } html.accessibilityContrast .articleSidebar__date { color: #131212; } html.accessibilityContrast.brands .brandsPage .alphabetBig { color: #131212; } html.accessibilityContrast .questionWrap .categories span { color: #131212; } html.accessibilityContrast .block-contactForm .contactsPage .contactItem span.day { color: #131212; } html.accessibilityContrast.BENULogin .BENULoginLineSectionHeader, html.accessibilityContrast.BENULogin .BENULoginSectionHeader { color: #131212; } html.accessibilityContrast .loyaltyCard__infoText { color: #131212; } html.accessibilityContrast .bnLabelText { color: #131212; } html.accessibilityContrast .block-text table tr:first-child th, html.accessibilityContrast .block-text table tr:first-child td, html.accessibilityContrast .block-loyaltyCard table tr:first-child th, html.accessibilityContrast .block-loyaltyCard table tr:first-child td, html.accessibilityContrast .block-cookieDeclaration table tr:first-child th, html.accessibilityContrast .block-cookieDeclaration table tr:first-child td, html.accessibilityContrast .section--webTickets table tr:first-child th, html.accessibilityContrast .section--webTickets table tr:first-child td { color: #131212; } html.accessibilityContrast .infoWrap { color: #131212; } html.accessibilityContrast .textColor--gray { color: #131212 !important; } @media (max-width: 768px) { html.accessibilityContrast .articleHomepage__date { color: #131212; } } html.accessibilityContrast .bnShopTable__sum .cartTable__oldPriceValue, html.accessibilityContrast .bnShopTable__price .cartTable__oldPriceValue { color: #131212; } html.accessibilityContrast .cartTable__remove, html.accessibilityContrast .cartTable__delete { color: #131212 !important; } html.accessibilityContrast .bnProduct__price del { color: #131212; } html.accessibilityContrast .latestOrder__orderInfoText p { color: #131212; } html.accessibilityContrast .webTickets_comment .webTickets_comment__date { color: #131212; opacity: 1; } html.accessibilityContrast .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__days { color: #131212; } html.accessibilityContrast .bnProductCard__price .price--old { color: #131212; } html.accessibilityContrast .cartTable__heading { color: #131212; } html.accessibilityContrast .bnProductReminder table tbody td p { color: #131212; } html.accessibilityContrast.productCart .bnRadio.inactiveOption label p, html.accessibilityContrast.productCart .bnRadio.inactiveOption .bnRadio__price .bnRadio--priceValue { color: #131212; } html.accessibilityContrast .bnProduct__removeItemQuickOverview { color: #131212; } html.accessibilityContrast .bnPriceBox__price .price--old { color: #131212; } html.accessibilityContrast .boughtTogetherProduct__priceOld { color: #131212; } @media (max-width: 768px) { html.accessibilityContrast .articleHeader__date { color: #131212; } } html.accessibilityContrast .block-reservations .calendar .ui-datepicker-calendar tbody td.closed a, html.accessibilityContrast .block-reservations .calendar .ui-datepicker-calendar tbody td.closed span { color: #ffffff; background: #AD0000; } html.accessibilityContrast .singleProduct__discountInfo, html.accessibilityContrast .bnSingleProduct .col--priceBox .singleProduct__priceWrap .singleProduct__toggleDiscountInfo { color: #AD0000; } html.accessibilityContrast .bnProduct__badges .benuBadge.benuBadge--red { background-color: #AD0000; } html.accessibilityContrast table.latestOrder__summary td p.bnLabelText.bnLabelText--medium { color: #AD0000 !important; } html.accessibilityContrast label .cart_mandatoryMarker { color: #131212; } html.accessibilityContrast .alert--primary .alert__heading { color: #AD0000; } html.accessibilityContrast .bnFldWrap .bnFldWrap__errorBox { color: #AD0000; } html.accessibilityContrast .bnFldWrap.error label { color: #AD0000 !important; } html.accessibilityContrast .bnFldWrap.error .bnInput, html.accessibilityContrast .bnFldWrap.error .bnTextArea { border-color: #AD0000; } html.accessibilityContrast .farms .farm .workHours span { color: #131212; } html.accessibilityContrast .farms .farm .workHours span.time .closed { color: #AD0000; } html.accessibilityContrast .formItem--block .error-msg { color: #131212; } html.accessibilityContrast .bnFldWrapbnFldWrap--error label { color: #AD0000 !important; } html.accessibilityContrast .bnFldWrapbnFldWrap--error .bnInput, html.accessibilityContrast .bnFldWrapbnFldWrap--error .bnTextArea { border-color: #AD0000; } html.accessibilityContrast .bnButtonSmall.bnButtonSmall--red { color: #AD0000; } html.accessibilityContrast .bnAttentionBox.bnAttentionBox--red .bnAttentionBox__bubble { background: #AD0000; } html.accessibilityContrast .block-contactForm .contactsPage form { color: #AD0000 !important; } html.accessibilityContrast .block-contactForm .contactsPage form .required { border-color: #AD0000; } html.accessibilityContrast .block-contactForm .contactsPage form .error { border-color: #AD0000 !important; } html.accessibilityContrast .block-contactForm .contactsPage form .bnFldWrap.error label { color: #AD0000 !important; } html.accessibilityContrast input.error ~ .float-label { color: #AD0000 !important; } html.accessibilityContrast label .required { color: #AD0000; } html.accessibilityContrast .bnDiscount.bnDiscount--red { background-color: #AD0000; } html.accessibilityContrast .benuBadge.benuBadge--orangered { background-color: #AD0000; } html.accessibilityContrast .bnFooter__logoWrap .loyaltyCards a.rimi { color: #AD0000; } html.accessibilityContrast .benuBadge--darkpink, html.accessibilityContrast .benuBadge--pink { background: #9D0B4F; } html.accessibilityContrast.benuBadge--top, html.accessibilityContrast.benuBadge--blue { background-color: #002664; } html.accessibilityContrast.benuBadge--new, html.accessibilityContrast.benuBadge--green { background-color: #325D0E; } html.accessibilityContrast.benuBadge--eprice, html.accessibilityContrast.benuBadge--lightgreen { background-color: #325D0E; } html.accessibilityContrast.benuBadge--pink { background-color: #9D0B4F; } html.accessibilityContrast.benuBadge--darkpink { background-color: #9D0B4F; } html.accessibilityContrast.benuBadge--orangered { background-color: #99300A; } html.accessibilityContrast.benuBadge--express { background-color: #99300A; } html.accessibilityContrast .benuBadge--stockOut { color: #AD0000; } html.accessibilityContrast .bnCaptchaDisclaimer, html.accessibilityContrast .bnCaptchaDisclaimer span, html.accessibilityContrast .bnCaptchaDisclaimer a { color: #131212; } html.accessibilityContrast .badge--top { background-color: #002664; } html.accessibilityContrast .badge--new { background-color: #325D0E; } html.accessibilityContrast .badge--eprice { background-color: #325D0E; } @media (prefers-reduced-motion) { html .button--green { color: #fff; } html .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html.userProfile .countBubble { background-color: #99300A; } html .bnProductCard__price .price--new { color: #99300A; } html.benu-eshop-lt .bnMainMenu__categories li.module-2277 a.subMenuLink, html.benu-eshop-lt .bnMainMenu__categories li.module-10232 a.subMenuLink, html.benu-eshop-ee .bnMainMenu__categories li.module-2277 a.subMenuLink, html.benu-eshop-ee .bnMainMenu__categories li.module-10232 a.subMenuLink { color: #99300A; } html .menuItemDeco--orange { color: #99300A !important; } html .bnPriceBox__outOfStockText { color: #99300A; } html .bnAttentionBubble { background-color: #99300A; } html .bnProductDiscount { background-color: #99300A; } html .bnPriceBox__price .price--new { color: #99300A; } html .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html .bnMainMenu__menuClientCart .lvl-1 > a { color: #325D0E; } html .bnStep.complete .bnStep__heading h2, html .bnStep.complete .bnStep__heading .h2, html .bnStep.complete .bnStep__heading .icon { color: #325D0E; } html .bnPageTitle.bnPageTitle--green { color: #325D0E; } html .bnProductCard__price .price--card { color: #325D0E; } html .bnFooter__logoWrap .loyaltyCards a.benu { color: #325D0E; } html .bnPriceBox__price .price--card { color: #325D0E; } html .bnPriceBox__price .price--card span.cardInfo a { color: #325D0E; } html .menuItemDeco--green { color: #325D0E !important; } html .bnPriceBoxSticky__price .price--card { color: #325D0E; } html .bnShopSummary tr.promo td { color: #325D0E; } html .bnShopSummary tr.discount td { color: #99300A; } html .bnShopSummary tr td p { color: #131212; } html .bnCheckbox label p span.bnGreen { color: #325D0E; } html .section--account .loyaltyCard__data .loyaltyCardData__value.loyaltyCashback { color: #325D0E; } html .bnMainMenu__categoriesTitle { background-color: #325D0E; } html .bnDiscount.bnDiscount--green, html .bnDiscount.bnDiscount--card { background-color: #325D0E; } html .button.button--green { background-color: #325D0E; } html .bnProductDiscount--card { background-color: #325D0E; } html .header__wishlistButton .dataBox.qnt { background-color: #325D0E; } html .accountIcon .userNotificationBubble.userNotificationBubble--success { background-color: #325D0E; } html .bnButton.bnButton--green { background-color: #325D0E; color: #fff; } html .bnButton.bnButton--green:hover { background-color: #325D0E; color: #fff; } html .bnMultiQnt__content .discount { background-color: #99300A; } html .block-reservations .calendar .ui-datepicker-calendar tbody td.open.ui-datepicker-current-day a { background-color: #325D0E !important; } html .block-reservations .times .times-item input:checked + label { background-color: #325D0E; } html .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__price.bnProductDeliveryOptionsGroup__price--free { color: #325D0E; } html.bnProductCard__price .price--text { color: #325D0E; } html .benuBadge.benuBadge--green, html .benuBadge.benuBadge--eprice, html .benuBadge.benuBadge--lightgreen { background: #325D0E; } html .bnPriceBox__priceInfoSoft, html .bnPriceBox__priceInfo { color: #131212; } html .bnPriceBox__priceInfoSoft .color-red, html .bnPriceBox__priceInfo .color-red { color: #AD0000; } html .bnPriceBox__priceInfoSoft .color-green, html .bnPriceBox__priceInfo .color-green { color: #325D0E; } html .bind-reviewsCount, html .bnAnswerItem__header .date, html .bnReviewItem__header .date { color: #131212; } html .footerWidget table p, html .footerWidget table a { color: #131212; } html .footerWidget.footerWidget--text p, html .footerWidget.footerWidget--text a, html .footerWidget.footerWidget--certificates p, html .footerWidget.footerWidget--certificates a { color: #131212; } html .bnLogo .slogan { color: #131212; } html .bnPriceBox__oldPricePeriod { color: #131212; } html .bnShopTableRx tbody td.rxProduct .prescription { color: #131212; } html .bnShopTableRx tbody td.rxProduct .info p { color: #131212; } html .bnBox--rx table p:first-child { color: #131212; } html .bnPriceBox__measurePrice { color: #131212; } html .bnOrderConfirmation p { color: #131212; } html .bnMultiQnt__content .price .units { color: #131212; } html .cartTable__productRow .cart_prBitsWrap, html .cartTable__product .cart_prBitsWrap { color: #131212; } html .pr_filterGroup .sliderWrap .valuesWrap .values .separator { color: #131212; } html .footerWidget table .footerWidget.footerWidget--text a { color: #131212; } html .productItem__category { color: #131212; } html .bnProductCard__rating .count { color: #131212; } html .bnFooter__logoWrap .contacts a span { color: #131212; } html .bnFooter__info { color: #131212; } html .bnMobileMenu__header ul li a.inactive { color: #131212; } html .bnBreadcrumbs > div a.active { color: #131212; } html .bnBreadcrumbs > div span.active.active { color: #131212; } html .bnSingleProduct__rating a { color: #131212; } html .bnSingleProduct__category { color: #131212; } html .bnBoughtTogether.bnBoughtTogether--desktop .contentBox .boughtTogetherProduct__kitPrice p { color: #131212; } html .productPage_innerPlaceholder { color: #131212; } html .bnPriceBox__price .price--card span.cardInfo { color: #131212; } html .bnReviewsBox .count { color: #131212; } html .bnReviewsList__sort .noItems { color: #131212; } html .bnAnswersList__sort .noItems { color: #131212; } html .tabs__links a.inactive { color: #131212; } html .articleDefault__category { color: #131212; } html .articleDefault__date { color: #131212; } html .bnSingleProductGallery .bnSingleProductGallery__info { color: #131212; } html .bnProduct__category { color: #131212; } html .boughtTogetherProduct__kitPrice p { color: #131212; } html .productControl__count { color: #131212; } html .bnProductControl__right .productControl__grouping .groupingLabel, html .bnProductControl__right .productControl__sorting .sortingLabel { color: #131212; } html .bnMobileWidgetButtons__button .buttonLabel { color: #131212; } html .block-reservations .reservationFormNew .datePickerButton > .button { color: #131212; opacity: 1; } html .block-reservations .calendarPopupWrap .bottomWrap .selectedDate { color: #131212; } html .block-reservations .times .times-item label.closed { color: #fff; background-color: #AD0000; } html .formItem--date div .placeholder { color: #131212; } html .bnShopHeading.bnShopHeading--gray h2, html .bnShopHeading.bnShopHeading--gray .h2 { color: #131212; } html .bnShopTable thead { color: #131212; } html .bnFieldset legend { color: #131212; } html .bnRadio label p small { color: #131212; } html .bnStep.inactive .bnStep__heading h2, html .bnStep.inactive .bnStep__heading .h2 { color: #325D0E; } html .bnStep.inactive .bnStep__heading .icon { color: #131212; } html label { color: #131212; } html .bnStepBubbles li[data-stepbubbletitle]:not(:nth-child(1)) .icon { color: #131212; } html .bnStep__info { color: #131212; } html .articleSidebar__date { color: #131212; } html.brands .brandsPage .alphabetBig { color: #131212; } html .questionWrap .categories span { color: #131212; } html .block-contactForm .contactsPage .contactItem span.day { color: #131212; } html.BENULogin .BENULoginLineSectionHeader, html.BENULogin .BENULoginSectionHeader { color: #131212; } html .loyaltyCard__infoText { color: #131212; } html .bnLabelText { color: #131212; } html .block-text table tr:first-child th, html .block-text table tr:first-child td, html .block-loyaltyCard table tr:first-child th, html .block-loyaltyCard table tr:first-child td, html .block-cookieDeclaration table tr:first-child th, html .block-cookieDeclaration table tr:first-child td, html .section--webTickets table tr:first-child th, html .section--webTickets table tr:first-child td { color: #131212; } html .infoWrap { color: #131212; } html .textColor--gray { color: #131212 !important; } } @media (prefers-reduced-motion) and (max-width: 768px) { html .articleHomepage__date { color: #131212; } } @media (prefers-reduced-motion) { html .bnShopTable__sum .cartTable__oldPriceValue, html .bnShopTable__price .cartTable__oldPriceValue { color: #131212; } html .cartTable__remove, html .cartTable__delete { color: #131212 !important; } html .bnProduct__price del { color: #131212; } html .latestOrder__orderInfoText p { color: #131212; } html .webTickets_comment .webTickets_comment__date { color: #131212; opacity: 1; } html .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__days { color: #131212; } html .bnProductCard__price .price--old { color: #131212; } html .cartTable__heading { color: #131212; } html .bnProductReminder table tbody td p { color: #131212; } html.productCart .bnRadio.inactiveOption label p, html.productCart .bnRadio.inactiveOption .bnRadio__price .bnRadio--priceValue { color: #131212; } html .bnProduct__removeItemQuickOverview { color: #131212; } html .bnPriceBox__price .price--old { color: #131212; } html .boughtTogetherProduct__priceOld { color: #131212; } } @media (prefers-reduced-motion) and (max-width: 768px) { html .articleHeader__date { color: #131212; } } @media (prefers-reduced-motion) { html .block-reservations .calendar .ui-datepicker-calendar tbody td.closed a, html .block-reservations .calendar .ui-datepicker-calendar tbody td.closed span { color: #ffffff; background: #AD0000; } html .singleProduct__discountInfo, html .bnSingleProduct .col--priceBox .singleProduct__priceWrap .singleProduct__toggleDiscountInfo { color: #AD0000; } html .bnProduct__badges .benuBadge.benuBadge--red { background-color: #AD0000; } html table.latestOrder__summary td p.bnLabelText.bnLabelText--medium { color: #AD0000 !important; } html label .cart_mandatoryMarker { color: #131212; } html .alert--primary .alert__heading { color: #AD0000; } html .bnFldWrap .bnFldWrap__errorBox { color: #AD0000; } html .bnFldWrap.error label { color: #AD0000 !important; } html .bnFldWrap.error .bnInput, html .bnFldWrap.error .bnTextArea { border-color: #AD0000; } html .farms .farm .workHours span { color: #131212; } html .farms .farm .workHours span.time .closed { color: #AD0000; } html .formItem--block .error-msg { color: #131212; } html .bnFldWrapbnFldWrap--error label { color: #AD0000 !important; } html .bnFldWrapbnFldWrap--error .bnInput, html .bnFldWrapbnFldWrap--error .bnTextArea { border-color: #AD0000; } html .bnButtonSmall.bnButtonSmall--red { color: #AD0000; } html .bnAttentionBox.bnAttentionBox--red .bnAttentionBox__bubble { background: #AD0000; } html .block-contactForm .contactsPage form { color: #AD0000 !important; } html .block-contactForm .contactsPage form .required { border-color: #AD0000; } html .block-contactForm .contactsPage form .error { border-color: #AD0000 !important; } html .block-contactForm .contactsPage form .bnFldWrap.error label { color: #AD0000 !important; } html input.error ~ .float-label { color: #AD0000 !important; } html label .required { color: #AD0000; } html .bnDiscount.bnDiscount--red { background-color: #AD0000; } html .benuBadge.benuBadge--orangered { background-color: #AD0000; } html .bnFooter__logoWrap .loyaltyCards a.rimi { color: #AD0000; } html .benuBadge--darkpink, html .benuBadge--pink { background: #9D0B4F; } html.benuBadge--top, html.benuBadge--blue { background-color: #002664; } html.benuBadge--new, html.benuBadge--green { background-color: #325D0E; } html.benuBadge--eprice, html.benuBadge--lightgreen { background-color: #325D0E; } html.benuBadge--pink { background-color: #9D0B4F; } html.benuBadge--darkpink { background-color: #9D0B4F; } html.benuBadge--orangered { background-color: #99300A; } html.benuBadge--express { background-color: #99300A; } html .benuBadge--stockOut { color: #AD0000; } html .bnCaptchaDisclaimer, html .bnCaptchaDisclaimer span, html .bnCaptchaDisclaimer a { color: #131212; } html .badge--top { background-color: #002664; } html .badge--new { background-color: #325D0E; } html .badge--eprice { background-color: #325D0E; } } @media (prefers-contrast: more) { html .button--green { color: #fff; } html .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html.userProfile .countBubble { background-color: #99300A; } html .bnProductCard__price .price--new { color: #99300A; } html.benu-eshop-lt .bnMainMenu__categories li.module-2277 a.subMenuLink, html.benu-eshop-lt .bnMainMenu__categories li.module-10232 a.subMenuLink, html.benu-eshop-ee .bnMainMenu__categories li.module-2277 a.subMenuLink, html.benu-eshop-ee .bnMainMenu__categories li.module-10232 a.subMenuLink { color: #99300A; } html .menuItemDeco--orange { color: #99300A !important; } html .bnPriceBox__outOfStockText { color: #99300A; } html .bnAttentionBubble { background-color: #99300A; } html .bnProductDiscount { background-color: #99300A; } html .bnPriceBox__price .price--new { color: #99300A; } html .bnHeader__icons ul li.cartIcon a .cartCount { background-color: #99300A; } html .bnMainMenu__menuClientCart .lvl-1 > a { color: #325D0E; } html .bnStep.complete .bnStep__heading h2, html .bnStep.complete .bnStep__heading .h2, html .bnStep.complete .bnStep__heading .icon { color: #325D0E; } html .bnPageTitle.bnPageTitle--green { color: #325D0E; } html .bnProductCard__price .price--card { color: #325D0E; } html .bnFooter__logoWrap .loyaltyCards a.benu { color: #325D0E; } html .bnPriceBox__price .price--card { color: #325D0E; } html .bnPriceBox__price .price--card span.cardInfo a { color: #325D0E; } html .menuItemDeco--green { color: #325D0E !important; } html .bnPriceBoxSticky__price .price--card { color: #325D0E; } html .bnShopSummary tr.promo td { color: #325D0E; } html .bnShopSummary tr.discount td { color: #99300A; } html .bnShopSummary tr td p { color: #131212; } html .bnCheckbox label p span.bnGreen { color: #325D0E; } html .section--account .loyaltyCard__data .loyaltyCardData__value.loyaltyCashback { color: #325D0E; } html .bnMainMenu__categoriesTitle { background-color: #325D0E; } html .bnDiscount.bnDiscount--green, html .bnDiscount.bnDiscount--card { background-color: #325D0E; } html .button.button--green { background-color: #325D0E; } html .bnProductDiscount--card { background-color: #325D0E; } html .header__wishlistButton .dataBox.qnt { background-color: #325D0E; } html .accountIcon .userNotificationBubble.userNotificationBubble--success { background-color: #325D0E; } html .bnButton.bnButton--green { background-color: #325D0E; color: #fff; } html .bnButton.bnButton--green:hover { background-color: #325D0E; color: #fff; } html .bnMultiQnt__content .discount { background-color: #99300A; } html .block-reservations .calendar .ui-datepicker-calendar tbody td.open.ui-datepicker-current-day a { background-color: #325D0E !important; } html .block-reservations .times .times-item input:checked + label { background-color: #325D0E; } html .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__price.bnProductDeliveryOptionsGroup__price--free { color: #325D0E; } html.bnProductCard__price .price--text { color: #325D0E; } html .benuBadge.benuBadge--green, html .benuBadge.benuBadge--eprice, html .benuBadge.benuBadge--lightgreen { background: #325D0E; } html .bnPriceBox__priceInfoSoft, html .bnPriceBox__priceInfo { color: #131212; } html .bnPriceBox__priceInfoSoft .color-red, html .bnPriceBox__priceInfo .color-red { color: #AD0000; } html .bnPriceBox__priceInfoSoft .color-green, html .bnPriceBox__priceInfo .color-green { color: #325D0E; } html .bind-reviewsCount, html .bnAnswerItem__header .date, html .bnReviewItem__header .date { color: #131212; } html .footerWidget table p, html .footerWidget table a { color: #131212; } html .footerWidget.footerWidget--text p, html .footerWidget.footerWidget--text a, html .footerWidget.footerWidget--certificates p, html .footerWidget.footerWidget--certificates a { color: #131212; } html .bnLogo .slogan { color: #131212; } html .bnPriceBox__oldPricePeriod { color: #131212; } html .bnShopTableRx tbody td.rxProduct .prescription { color: #131212; } html .bnShopTableRx tbody td.rxProduct .info p { color: #131212; } html .bnBox--rx table p:first-child { color: #131212; } html .bnPriceBox__measurePrice { color: #131212; } html .bnOrderConfirmation p { color: #131212; } html .bnMultiQnt__content .price .units { color: #131212; } html .cartTable__productRow .cart_prBitsWrap, html .cartTable__product .cart_prBitsWrap { color: #131212; } html .pr_filterGroup .sliderWrap .valuesWrap .values .separator { color: #131212; } html .footerWidget table .footerWidget.footerWidget--text a { color: #131212; } html .productItem__category { color: #131212; } html .bnProductCard__rating .count { color: #131212; } html .bnFooter__logoWrap .contacts a span { color: #131212; } html .bnFooter__info { color: #131212; } html .bnMobileMenu__header ul li a.inactive { color: #131212; } html .bnBreadcrumbs > div a.active { color: #131212; } html .bnBreadcrumbs > div span.active.active { color: #131212; } html .bnSingleProduct__rating a { color: #131212; } html .bnSingleProduct__category { color: #131212; } html .bnBoughtTogether.bnBoughtTogether--desktop .contentBox .boughtTogetherProduct__kitPrice p { color: #131212; } html .productPage_innerPlaceholder { color: #131212; } html .bnPriceBox__price .price--card span.cardInfo { color: #131212; } html .bnReviewsBox .count { color: #131212; } html .bnReviewsList__sort .noItems { color: #131212; } html .bnAnswersList__sort .noItems { color: #131212; } html .tabs__links a.inactive { color: #131212; } html .articleDefault__category { color: #131212; } html .articleDefault__date { color: #131212; } html .bnSingleProductGallery .bnSingleProductGallery__info { color: #131212; } html .bnProduct__category { color: #131212; } html .boughtTogetherProduct__kitPrice p { color: #131212; } html .productControl__count { color: #131212; } html .bnProductControl__right .productControl__grouping .groupingLabel, html .bnProductControl__right .productControl__sorting .sortingLabel { color: #131212; } html .bnMobileWidgetButtons__button .buttonLabel { color: #131212; } html .block-reservations .reservationFormNew .datePickerButton > .button { color: #131212; opacity: 1; } html .block-reservations .calendarPopupWrap .bottomWrap .selectedDate { color: #131212; } html .block-reservations .times .times-item label.closed { color: #fff; background-color: #AD0000; } html .formItem--date div .placeholder { color: #131212; } html .bnShopHeading.bnShopHeading--gray h2, html .bnShopHeading.bnShopHeading--gray .h2 { color: #131212; } html .bnShopTable thead { color: #131212; } html .bnFieldset legend { color: #131212; } html .bnRadio label p small { color: #131212; } html .bnStep.inactive .bnStep__heading h2, html .bnStep.inactive .bnStep__heading .h2 { color: #325D0E; } html .bnStep.inactive .bnStep__heading .icon { color: #131212; } html label { color: #131212; } html .bnStepBubbles li[data-stepbubbletitle]:not(:nth-child(1)) .icon { color: #131212; } html .bnStep__info { color: #131212; } html .articleSidebar__date { color: #131212; } html.brands .brandsPage .alphabetBig { color: #131212; } html .questionWrap .categories span { color: #131212; } html .block-contactForm .contactsPage .contactItem span.day { color: #131212; } html.BENULogin .BENULoginLineSectionHeader, html.BENULogin .BENULoginSectionHeader { color: #131212; } html .loyaltyCard__infoText { color: #131212; } html .bnLabelText { color: #131212; } html .block-text table tr:first-child th, html .block-text table tr:first-child td, html .block-loyaltyCard table tr:first-child th, html .block-loyaltyCard table tr:first-child td, html .block-cookieDeclaration table tr:first-child th, html .block-cookieDeclaration table tr:first-child td, html .section--webTickets table tr:first-child th, html .section--webTickets table tr:first-child td { color: #131212; } html .infoWrap { color: #131212; } html .textColor--gray { color: #131212 !important; } } @media (prefers-contrast: more) and (max-width: 768px) { html .articleHomepage__date { color: #131212; } } @media (prefers-contrast: more) { html .bnShopTable__sum .cartTable__oldPriceValue, html .bnShopTable__price .cartTable__oldPriceValue { color: #131212; } html .cartTable__remove, html .cartTable__delete { color: #131212 !important; } html .bnProduct__price del { color: #131212; } html .latestOrder__orderInfoText p { color: #131212; } html .webTickets_comment .webTickets_comment__date { color: #131212; opacity: 1; } html .bnProductDeliveryOptionsGroup .bnProductDeliveryOptionsGroup__days { color: #131212; } html .bnProductCard__price .price--old { color: #131212; } html .cartTable__heading { color: #131212; } html .bnProductReminder table tbody td p { color: #131212; } html.productCart .bnRadio.inactiveOption label p, html.productCart .bnRadio.inactiveOption .bnRadio__price .bnRadio--priceValue { color: #131212; } html .bnProduct__removeItemQuickOverview { color: #131212; } html .bnPriceBox__price .price--old { color: #131212; } html .boughtTogetherProduct__priceOld { color: #131212; } } @media (prefers-contrast: more) and (max-width: 768px) { html .articleHeader__date { color: #131212; } } @media (prefers-contrast: more) { html .block-reservations .calendar .ui-datepicker-calendar tbody td.closed a, html .block-reservations .calendar .ui-datepicker-calendar tbody td.closed span { color: #ffffff; background: #AD0000; } html .singleProduct__discountInfo, html .bnSingleProduct .col--priceBox .singleProduct__priceWrap .singleProduct__toggleDiscountInfo { color: #AD0000; } html .bnProduct__badges .benuBadge.benuBadge--red { background-color: #AD0000; } html table.latestOrder__summary td p.bnLabelText.bnLabelText--medium { color: #AD0000 !important; } html label .cart_mandatoryMarker { color: #131212; } html .alert--primary .alert__heading { color: #AD0000; } html .bnFldWrap .bnFldWrap__errorBox { color: #AD0000; } html .bnFldWrap.error label { color: #AD0000 !important; } html .bnFldWrap.error .bnInput, html .bnFldWrap.error .bnTextArea { border-color: #AD0000; } html .farms .farm .workHours span { color: #131212; } html .farms .farm .workHours span.time .closed { color: #AD0000; } html .formItem--block .error-msg { color: #131212; } html .bnFldWrapbnFldWrap--error label { color: #AD0000 !important; } html .bnFldWrapbnFldWrap--error .bnInput, html .bnFldWrapbnFldWrap--error .bnTextArea { border-color: #AD0000; } html .bnButtonSmall.bnButtonSmall--red { color: #AD0000; } html .bnAttentionBox.bnAttentionBox--red .bnAttentionBox__bubble { background: #AD0000; } html .block-contactForm .contactsPage form { color: #AD0000 !important; } html .block-contactForm .contactsPage form .required { border-color: #AD0000; } html .block-contactForm .contactsPage form .error { border-color: #AD0000 !important; } html .block-contactForm .contactsPage form .bnFldWrap.error label { color: #AD0000 !important; } html input.error ~ .float-label { color: #AD0000 !important; } html label .required { color: #AD0000; } html .bnDiscount.bnDiscount--red { background-color: #AD0000; } html .benuBadge.benuBadge--orangered { background-color: #AD0000; } html .bnFooter__logoWrap .loyaltyCards a.rimi { color: #AD0000; } html .benuBadge--darkpink, html .benuBadge--pink { background: #9D0B4F; } html.benuBadge--top, html.benuBadge--blue { background-color: #002664; } html.benuBadge--new, html.benuBadge--green { background-color: #325D0E; } html.benuBadge--eprice, html.benuBadge--lightgreen { background-color: #325D0E; } html.benuBadge--pink { background-color: #9D0B4F; } html.benuBadge--darkpink { background-color: #9D0B4F; } html.benuBadge--orangered { background-color: #99300A; } html.benuBadge--express { background-color: #99300A; } html .benuBadge--stockOut { color: #AD0000; } html .bnCaptchaDisclaimer, html .bnCaptchaDisclaimer span, html .bnCaptchaDisclaimer a { color: #131212; } html .badge--top { background-color: #002664; } html .badge--new { background-color: #325D0E; } html .badge--eprice { background-color: #325D0E; } } html.accessibilitySize .bnMobileCategory p { line-height: 1.5; } html.accessibilitySize .bnTopNav > ul > li { line-height: 44px; min-width: 44px; } html.accessibilitySize .bnCloseButton { height: 44px; width: 44px; } html.accessibilitySize .bnProduct__removeItemQuickOverview { height: 44px; width: 44px; min-width: 44px; } html.accessibilitySize .bnLogo { height: 44px; } html.accessibilitySize .bnMainMenu__menu > ul > li > a { min-height: 44px; min-width: 44px; } html.accessibilitySize .bind-invisibleTabButton { height: 44px; width: 44px; margin-top: -44px; left: 242px; } html.accessibilitySize .bnMainMenu__categoriesTitle .bind-invisibleTabButton { margin-top: -12px; } html.accessibilitySize .bnSlider__dots li button { height: 44px; width: 44px; } html.accessibilitySize .bnSlider__arrow, html.accessibilitySize .bnCarousel__arrow { height: 44px; width: 44px; } html.accessibilitySize .bnProductCard a { min-height: 44px; } html.accessibilitySize .bnFooter__logoWrap .contacts a { min-height: 44px; } html.accessibilitySize .footerSocial ul a.roundButton { height: 44px; line-height: 44px; width: 44px; } html.accessibilitySize .bnFooter__logoWrap .loyaltyCards a.benu, html.accessibilitySize .bnFooter__logoWrap .loyaltyCards a.rimi { min-height: 44px; display: inline-flex; min-width: 44px; } html.accessibilitySize .footerWidget.footerWidget--menu a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } html.accessibilitySize .footerWidget.footerWidget--text a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } html.accessibilitySize .bnFilters .filterHolder .pr_filterGroup ul li a { min-height: 44px; display: inline-flex; align-items: center; } html.accessibilitySize .bnProductControl .productControl__count, html.accessibilitySize .productControl__count { line-height: 1.5; } html.accessibilitySize .bnFilters .filterHolder .pr_filterGroup ul li label { min-height: 44px; display: inline-flex; align-items: center; } html.accessibilitySize .bnFilters .filterHolder .pr_filterGroup ul li label .checkbox__mark { top: 50%; transform: translateY(-50%); } html.accessibilitySize .bnBreadcrumbs > div a, html.accessibilitySize .bnBreadcrumbs > div span.active { line-height: 44px; } html.accessibilitySize .bnSingleProduct__rating a { line-height: 44px; display: inline-block; } html.accessibilitySize .bnSingleProduct__category { line-height: 44px; } html.accessibilitySize .bnSingleProduct__category .leafletLink { line-height: 44px; } html.accessibilitySize .bnFlagsHolder a, html.accessibilitySize .bnFlagsHolder img { line-height: 44px; min-width: 44px; min-height: 44px; } html.accessibilitySize .bnPriceBox a { line-height: 44px; min-width: 44px; min-height: 44px; } html.accessibilitySize .pr_starRateBoxWrap .starsWrap { height: 44px; } html.accessibilitySize .bnSingleProduct .brandText--noButton h4 a, html.accessibilitySize .bnSingleProduct .brandText--noButton .h4 a { min-height: 44px; min-width: 44px; display: flex; justify-content: center; align-items: center; } html.accessibilitySize .bnAttentionBox .bind-closeBox { height: 44px; width: 44px; line-height: 44px; } html.accessibilitySize .bnAttentionBox.bnAttentionBox--truncated .bind-untruncate { line-height: 44px; } html.accessibilitySize .bnAttentionBox a { line-height: 44px; } html.accessibilitySize .articleDefault__category, html.accessibilitySize .articleDefault__date { line-height: 44px; } html.accessibilitySize .articleDefault__title a { min-height: 44px; min-width: 44px; display: inline-block; } html.accessibilitySize .bnPriceBoxSticky__product p { line-height: 1.5; } html.accessibilitySize .bnAttentionBox__bubble, html.accessibilitySize .bnAttentionBubble { line-height: 1.5; } html.accessibilitySize .bnProductCard .bnButton { min-height: 44px; } html.accessibilitySize .bnButtonSmall { min-height: 44px; display: inline-block; } html.accessibilitySize .button--mini { min-height: 44px; } html.accessibilitySize .bnSubCategoriesMobile ul li a { min-height: 44px; padding-top: 13px; } html.accessibilitySize .bnMobileWidgetButtons__button .buttonValue { line-height: 1.5; } @media (max-width: 768px) { html.accessibilitySize .bnButton.bnButton--outline.bnButton--small { min-height: 44px; padding-top: 14px; } } html.accessibilitySize .brandLogo .brandLogo__link { min-height: 44px; display: flex; justify-content: center; align-items: center; } html.accessibilitySize .farms .farm a.phone, html.accessibilitySize .farms .farm a.email { line-height: 44px; } html.accessibilitySize .contactsPage .contactItem a { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; } @media (max-width: 576px) { html.accessibilitySize .contactsPage form.contactForm .button { min-height: 44px; } } html.accessibilitySize .sibebarWidget ul li a { min-height: 44px; min-width: 44px; display: inline-flex; justify-content: left; align-items: start; } html.accessibilitySize .bnFilters .filterHolder .pr_filterGroup.pr_filterGroup--categories button { min-height: 44px; display: inline-block; } html.accessibilitySize.brands .brandsPage .col--2 a { line-height: 44px; } html.accessibilitySize.brands .brandsPage .alphabet { min-height: 44px; min-width: 44px; } html.accessibilitySize.BENULogin .socialLogins .button { min-height: 44px; min-width: 44px; } html.accessibilitySize.BENULogin .BENURegistrationSection a.button { line-height: 17px; height: 44px; } html.accessibilitySize .bnProduct__category { line-height: 1.5; } html.accessibilitySize .bnAttentionBox__content { line-height: 44px; } html.accessibilitySize .bind-cartQuickOverviewContent .bnProduct__content .bnProduct__title a { min-height: 44px; display: inline-block; } html.accessibilitySize.userProfile .profileMenu li .profileExtensionBtn.profileExtensionBtn--single { min-height: 44px; display: block; } html.accessibilitySize.userProfile .profileMenu li .profileExtensionBtn { min-height: 44px; display: block; } html.accessibilitySize .latestOrder__orderInfoText h5 a, html.accessibilitySize .latestOrder__orderInfoText .h5 a { display: inline-block; min-height: 44px; } html.accessibilitySize table.latestOrder__summary td p:first-child { line-height: 1.5; } html.accessibilitySize table.latestOrder__summary td p:last-child { line-height: 1.5; } html.accessibilitySize .latestOrder__orderInfoText p, html.accessibilitySize .latestOrder p.bnLabelText { line-height: 1.5; } html.accessibilitySize .bnAppointment table .bnAppointment__contentText a { min-height: 44px; display: inline-flex; align-items: center; } html.accessibilitySize .bnCustomerReminder__top .bnCustomerReminder__title { display: inline-flex; min-height: 44px; } html.accessibilitySize .cartTable__remove, html.accessibilitySize .cartTable__delete { width: 44px; height: 44px; } html.accessibilitySize.productCart .bnRadio label p, html.accessibilitySize.productCart .bnRadio .bnRadio__price .bnRadio--priceValue { line-height: 1.5; } html.accessibilitySize .bnProductCarousel__background .bnCarousel__arrow[data-target=next] { right: -35px; } html.accessibilitySize .bnProductCarousel__background .bnCarousel__arrow[data-target=prev] { left: -35px; } html.accessibilitySize .bnCheckbox label p { line-height: 1.5; } html.accessibilitySize .bnProductReminder table tbody td p { line-height: 1.5; } @media (max-width: 768px) { html.accessibilitySize .btnAddFromSaved.btnAddFromSaved--mobile { min-height: 44px; } } html.accessibilitySize .bnSelect.bnSelect--small { height: 44px; min-height: 44px; } html.accessibilitySize .bnProduct.bnProduct--sideCart .bnProduct__title { width: calc(100% - 30px); } html.accessibilitySize .bnShopTableRx tbody td.rxProduct .prescription { line-height: 1.5; } html.accessibilitySize .bnShopTableRx tbody td.rxProduct .info p { line-height: 1.5; } html.accessibilitySize .bnShopTableRx tbody td p { line-height: 1.5; } html.accessibilitySize .block-offers .offerItem__wrap a { line-height: 1.5; } html.accessibilitySize .bnPriceBox__priceInfo { line-height: 1.5; } html.accessibilitySize .block-textButton .title a { height: 1.5; min-height: 44px; } html { scroll-behavior: smooth; } body.overflowHidden { overflow: hidden; } .hidden { display: none !important; } .bnuHidden { display: none !important; } .grecaptcha-badge { visibility: hidden; } @font-face { font-style: normal; font-weight: 400; src: url(../fonts/dm-sans/DM-Sans-Regular.eot); src: url(../fonts/dm-sans/DM-Sans-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-Regular.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-Regular.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-Regular.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-Regular.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: normal; font-weight: 500; src: url(../fonts/dm-sans/DM-Sans-500.eot); src: url(../fonts/dm-sans/DM-Sans-500.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-500.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-500.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-500.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-500.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: normal; font-weight: 600; src: url(../fonts/dm-sans/DM-Sans-600.eot); src: url(../fonts/dm-sans/DM-Sans-600.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-600.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-600.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-600.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-600.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: normal; font-weight: 700; src: url(../fonts/dm-sans/DM-Sans-700.eot); src: url(../fonts/dm-sans/DM-Sans-700.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-700.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-700.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-700.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-700.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: italic; font-weight: 400; src: url(../fonts/dm-sans/DM-Sans-Italic.eot); src: url(../fonts/dm-sans/DM-Sans-Italic.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-Italic.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-Italic.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-Italic.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-Italic.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: italic; font-weight: 500; src: url(../fonts/dm-sans/DM-Sans-500italic.eot); src: url(../fonts/dm-sans/DM-Sans-500italic.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-500italic.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-500italic.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-500italic.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-500italic.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: italic; font-weight: 600; src: url(../fonts/dm-sans/DM-Sans-600italic.eot); src: url(../fonts/dm-sans/DM-Sans-600italic.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-600italic.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-600italic.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-600italic.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-600italic.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } @font-face { font-style: italic; font-weight: 700; src: url(../fonts/dm-sans/DM-Sans-700italic.eot); src: url(../fonts/dm-sans/DM-Sans-700italic.eot?#iefix) format("embedded-opentype"), url(../fonts/dm-sans/DM-Sans-700italic.woff2) format("woff2"), url(../fonts/dm-sans/DM-Sans-700italic.woff) format("woff"), url(../fonts/dm-sans/DM-Sans-700italic.ttf) format("truetype"), url(../fonts/dm-sans/DM-Sans-700italic.svg#DMSans) format("svg"); font-family: "DM Sans"; font-display: swap; } body { color: var(--color-text); font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.666; font-family: var(--font-main); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } @media (max-width: 768px) { body { font-size: 0.9375rem; } } :where(p, ul, ol) { margin: 0.75em 0; } :where(p):first-child { margin-block-start: 0; } :where(p):last-child { margin-block-end: 0; } :where(a) { color: var(--color-text); } h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.25em; font-weight: 600; line-height: 1.333; font-family: var(--font-main); } h1 { font-size: clamp(1.88rem, 1.31rem + 1.88vw, 2.75rem); margin: 0; line-height: 1.2; letter-spacing: -0.01em; } h1.bnuProductTitle { font-size: clamp(1.75rem, 1.59rem + 0.54vw, 2rem); } h2 { font-size: clamp(1.5rem, 1.18rem + 1.08vw, 2rem); } h3 { font-size: clamp(1.13rem, 0.88rem + 0.81vw, 1.5rem); } h4 { font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); } h4, h5, h6 { font-weight: 700; font-size: 16px; } @media (max-width: 768px) { h4, h5, h6 { font-size: 15px; } } h1.page-title, h2.section-title { margin: 0; } b, strong { font-weight: 600; } .large { font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); font-weight: 500; } small, .small { font-size: 14px; } @media (max-width: 768px) { small, .small { font-size: 13px; } } .tiny, .tiny { font-size: 13px; } @media (max-width: 768px) { .tiny, .tiny { font-size: 12px; } } code, .code { font-weight: 400; } time.updated { color: var(--color-accent); font-weight: 600; } figure { margin: 0; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .mx-0 { margin-left: 0; margin-right: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .px-0 { padding-left: 0; padding-right: 0; } .py-0 { padding-top: 0; padding-bottom: 0; } .m-1 { margin: 1px; } .mt-1 { margin-top: 1px; } .mr-1 { margin-right: 1px; } .mb-1 { margin-bottom: 1px; } .ml-1 { margin-left: 1px; } .mx-1 { margin-left: 1px; margin-right: 1px; } .my-1 { margin-top: 1px; margin-bottom: 1px; } .p-1 { padding: 1px; } .pt-1 { padding-top: 1px; } .pr-1 { padding-right: 1px; } .pb-1 { padding-bottom: 1px; } .pl-1 { padding-left: 1px; } .px-1 { padding-left: 1px; padding-right: 1px; } .py-1 { padding-top: 1px; padding-bottom: 1px; } .m-2 { margin: 2px; } .mt-2 { margin-top: 2px; } .mr-2 { margin-right: 2px; } .mb-2 { margin-bottom: 2px; } .ml-2 { margin-left: 2px; } .mx-2 { margin-left: 2px; margin-right: 2px; } .my-2 { margin-top: 2px; margin-bottom: 2px; } .p-2 { padding: 2px; } .pt-2 { padding-top: 2px; } .pr-2 { padding-right: 2px; } .pb-2 { padding-bottom: 2px; } .pl-2 { padding-left: 2px; } .px-2 { padding-left: 2px; padding-right: 2px; } .py-2 { padding-top: 2px; padding-bottom: 2px; } .m-3 { margin: 3px; } .mt-3 { margin-top: 3px; } .mr-3 { margin-right: 3px; } .mb-3 { margin-bottom: 3px; } .ml-3 { margin-left: 3px; } .mx-3 { margin-left: 3px; margin-right: 3px; } .my-3 { margin-top: 3px; margin-bottom: 3px; } .p-3 { padding: 3px; } .pt-3 { padding-top: 3px; } .pr-3 { padding-right: 3px; } .pb-3 { padding-bottom: 3px; } .pl-3 { padding-left: 3px; } .px-3 { padding-left: 3px; padding-right: 3px; } .py-3 { padding-top: 3px; padding-bottom: 3px; } .m-4 { margin: 4px; } .mt-4 { margin-top: 4px; } .mr-4 { margin-right: 4px; } .mb-4 { margin-bottom: 4px; } .ml-4 { margin-left: 4px; } .mx-4 { margin-left: 4px; margin-right: 4px; } .my-4 { margin-top: 4px; margin-bottom: 4px; } .p-4 { padding: 4px; } .pt-4 { padding-top: 4px; } .pr-4 { padding-right: 4px; } .pb-4 { padding-bottom: 4px; } .pl-4 { padding-left: 4px; } .px-4 { padding-left: 4px; padding-right: 4px; } .py-4 { padding-top: 4px; padding-bottom: 4px; } .m-5 { margin: 5px; } .mt-5 { margin-top: 5px; } .mr-5 { margin-right: 5px; } .mb-5 { margin-bottom: 5px; } .ml-5 { margin-left: 5px; } .mx-5 { margin-left: 5px; margin-right: 5px; } .my-5 { margin-top: 5px; margin-bottom: 5px; } .p-5 { padding: 5px; } .pt-5 { padding-top: 5px; } .pr-5 { padding-right: 5px; } .pb-5 { padding-bottom: 5px; } .pl-5 { padding-left: 5px; } .px-5 { padding-left: 5px; padding-right: 5px; } .py-5 { padding-top: 5px; padding-bottom: 5px; } .m-6 { margin: 6px; } .mt-6 { margin-top: 6px; } .mr-6 { margin-right: 6px; } .mb-6 { margin-bottom: 6px; } .ml-6 { margin-left: 6px; } .mx-6 { margin-left: 6px; margin-right: 6px; } .my-6 { margin-top: 6px; margin-bottom: 6px; } .p-6 { padding: 6px; } .pt-6 { padding-top: 6px; } .pr-6 { padding-right: 6px; } .pb-6 { padding-bottom: 6px; } .pl-6 { padding-left: 6px; } .px-6 { padding-left: 6px; padding-right: 6px; } .py-6 { padding-top: 6px; padding-bottom: 6px; } .m-7 { margin: 7px; } .mt-7 { margin-top: 7px; } .mr-7 { margin-right: 7px; } .mb-7 { margin-bottom: 7px; } .ml-7 { margin-left: 7px; } .mx-7 { margin-left: 7px; margin-right: 7px; } .my-7 { margin-top: 7px; margin-bottom: 7px; } .p-7 { padding: 7px; } .pt-7 { padding-top: 7px; } .pr-7 { padding-right: 7px; } .pb-7 { padding-bottom: 7px; } .pl-7 { padding-left: 7px; } .px-7 { padding-left: 7px; padding-right: 7px; } .py-7 { padding-top: 7px; padding-bottom: 7px; } .m-8 { margin: 8px; } .mt-8 { margin-top: 8px; } .mr-8 { margin-right: 8px; } .mb-8 { margin-bottom: 8px; } .ml-8 { margin-left: 8px; } .mx-8 { margin-left: 8px; margin-right: 8px; } .my-8 { margin-top: 8px; margin-bottom: 8px; } .p-8 { padding: 8px; } .pt-8 { padding-top: 8px; } .pr-8 { padding-right: 8px; } .pb-8 { padding-bottom: 8px; } .pl-8 { padding-left: 8px; } .px-8 { padding-left: 8px; padding-right: 8px; } .py-8 { padding-top: 8px; padding-bottom: 8px; } .m-9 { margin: 9px; } .mt-9 { margin-top: 9px; } .mr-9 { margin-right: 9px; } .mb-9 { margin-bottom: 9px; } .ml-9 { margin-left: 9px; } .mx-9 { margin-left: 9px; margin-right: 9px; } .my-9 { margin-top: 9px; margin-bottom: 9px; } .p-9 { padding: 9px; } .pt-9 { padding-top: 9px; } .pr-9 { padding-right: 9px; } .pb-9 { padding-bottom: 9px; } .pl-9 { padding-left: 9px; } .px-9 { padding-left: 9px; padding-right: 9px; } .py-9 { padding-top: 9px; padding-bottom: 9px; } .m-10 { margin: 10px; } .mt-10 { margin-top: 10px; } .mr-10 { margin-right: 10px; } .mb-10 { margin-bottom: 10px; } .ml-10 { margin-left: 10px; } .mx-10 { margin-left: 10px; margin-right: 10px; } .my-10 { margin-top: 10px; margin-bottom: 10px; } .p-10 { padding: 10px; } .pt-10 { padding-top: 10px; } .pr-10 { padding-right: 10px; } .pb-10 { padding-bottom: 10px; } .pl-10 { padding-left: 10px; } .px-10 { padding-left: 10px; padding-right: 10px; } .py-10 { padding-top: 10px; padding-bottom: 10px; } .m-11 { margin: 11px; } .mt-11 { margin-top: 11px; } .mr-11 { margin-right: 11px; } .mb-11 { margin-bottom: 11px; } .ml-11 { margin-left: 11px; } .mx-11 { margin-left: 11px; margin-right: 11px; } .my-11 { margin-top: 11px; margin-bottom: 11px; } .p-11 { padding: 11px; } .pt-11 { padding-top: 11px; } .pr-11 { padding-right: 11px; } .pb-11 { padding-bottom: 11px; } .pl-11 { padding-left: 11px; } .px-11 { padding-left: 11px; padding-right: 11px; } .py-11 { padding-top: 11px; padding-bottom: 11px; } .m-12 { margin: 12px; } .mt-12 { margin-top: 12px; } .mr-12 { margin-right: 12px; } .mb-12 { margin-bottom: 12px; } .ml-12 { margin-left: 12px; } .mx-12 { margin-left: 12px; margin-right: 12px; } .my-12 { margin-top: 12px; margin-bottom: 12px; } .p-12 { padding: 12px; } .pt-12 { padding-top: 12px; } .pr-12 { padding-right: 12px; } .pb-12 { padding-bottom: 12px; } .pl-12 { padding-left: 12px; } .px-12 { padding-left: 12px; padding-right: 12px; } .py-12 { padding-top: 12px; padding-bottom: 12px; } .m-13 { margin: 13px; } .mt-13 { margin-top: 13px; } .mr-13 { margin-right: 13px; } .mb-13 { margin-bottom: 13px; } .ml-13 { margin-left: 13px; } .mx-13 { margin-left: 13px; margin-right: 13px; } .my-13 { margin-top: 13px; margin-bottom: 13px; } .p-13 { padding: 13px; } .pt-13 { padding-top: 13px; } .pr-13 { padding-right: 13px; } .pb-13 { padding-bottom: 13px; } .pl-13 { padding-left: 13px; } .px-13 { padding-left: 13px; padding-right: 13px; } .py-13 { padding-top: 13px; padding-bottom: 13px; } .m-14 { margin: 14px; } .mt-14 { margin-top: 14px; } .mr-14 { margin-right: 14px; } .mb-14 { margin-bottom: 14px; } .ml-14 { margin-left: 14px; } .mx-14 { margin-left: 14px; margin-right: 14px; } .my-14 { margin-top: 14px; margin-bottom: 14px; } .p-14 { padding: 14px; } .pt-14 { padding-top: 14px; } .pr-14 { padding-right: 14px; } .pb-14 { padding-bottom: 14px; } .pl-14 { padding-left: 14px; } .px-14 { padding-left: 14px; padding-right: 14px; } .py-14 { padding-top: 14px; padding-bottom: 14px; } .m-15 { margin: 15px; } .mt-15 { margin-top: 15px; } .mr-15 { margin-right: 15px; } .mb-15 { margin-bottom: 15px; } .ml-15 { margin-left: 15px; } .mx-15 { margin-left: 15px; margin-right: 15px; } .my-15 { margin-top: 15px; margin-bottom: 15px; } .p-15 { padding: 15px; } .pt-15 { padding-top: 15px; } .pr-15 { padding-right: 15px; } .pb-15 { padding-bottom: 15px; } .pl-15 { padding-left: 15px; } .px-15 { padding-left: 15px; padding-right: 15px; } .py-15 { padding-top: 15px; padding-bottom: 15px; } .m-16 { margin: 16px; } .mt-16 { margin-top: 16px; } .mr-16 { margin-right: 16px; } .mb-16 { margin-bottom: 16px; } .ml-16 { margin-left: 16px; } .mx-16 { margin-left: 16px; margin-right: 16px; } .my-16 { margin-top: 16px; margin-bottom: 16px; } .p-16 { padding: 16px; } .pt-16 { padding-top: 16px; } .pr-16 { padding-right: 16px; } .pb-16 { padding-bottom: 16px; } .pl-16 { padding-left: 16px; } .px-16 { padding-left: 16px; padding-right: 16px; } .py-16 { padding-top: 16px; padding-bottom: 16px; } .m-17 { margin: 17px; } .mt-17 { margin-top: 17px; } .mr-17 { margin-right: 17px; } .mb-17 { margin-bottom: 17px; } .ml-17 { margin-left: 17px; } .mx-17 { margin-left: 17px; margin-right: 17px; } .my-17 { margin-top: 17px; margin-bottom: 17px; } .p-17 { padding: 17px; } .pt-17 { padding-top: 17px; } .pr-17 { padding-right: 17px; } .pb-17 { padding-bottom: 17px; } .pl-17 { padding-left: 17px; } .px-17 { padding-left: 17px; padding-right: 17px; } .py-17 { padding-top: 17px; padding-bottom: 17px; } .m-18 { margin: 18px; } .mt-18 { margin-top: 18px; } .mr-18 { margin-right: 18px; } .mb-18 { margin-bottom: 18px; } .ml-18 { margin-left: 18px; } .mx-18 { margin-left: 18px; margin-right: 18px; } .my-18 { margin-top: 18px; margin-bottom: 18px; } .p-18 { padding: 18px; } .pt-18 { padding-top: 18px; } .pr-18 { padding-right: 18px; } .pb-18 { padding-bottom: 18px; } .pl-18 { padding-left: 18px; } .px-18 { padding-left: 18px; padding-right: 18px; } .py-18 { padding-top: 18px; padding-bottom: 18px; } .m-19 { margin: 19px; } .mt-19 { margin-top: 19px; } .mr-19 { margin-right: 19px; } .mb-19 { margin-bottom: 19px; } .ml-19 { margin-left: 19px; } .mx-19 { margin-left: 19px; margin-right: 19px; } .my-19 { margin-top: 19px; margin-bottom: 19px; } .p-19 { padding: 19px; } .pt-19 { padding-top: 19px; } .pr-19 { padding-right: 19px; } .pb-19 { padding-bottom: 19px; } .pl-19 { padding-left: 19px; } .px-19 { padding-left: 19px; padding-right: 19px; } .py-19 { padding-top: 19px; padding-bottom: 19px; } .m-20 { margin: 20px; } .mt-20 { margin-top: 20px; } .mr-20 { margin-right: 20px; } .mb-20 { margin-bottom: 20px; } .ml-20 { margin-left: 20px; } .mx-20 { margin-left: 20px; margin-right: 20px; } .my-20 { margin-top: 20px; margin-bottom: 20px; } .p-20 { padding: 20px; } .pt-20 { padding-top: 20px; } .pr-20 { padding-right: 20px; } .pb-20 { padding-bottom: 20px; } .pl-20 { padding-left: 20px; } .px-20 { padding-left: 20px; padding-right: 20px; } .py-20 { padding-top: 20px; padding-bottom: 20px; } .m-21 { margin: 21px; } .mt-21 { margin-top: 21px; } .mr-21 { margin-right: 21px; } .mb-21 { margin-bottom: 21px; } .ml-21 { margin-left: 21px; } .mx-21 { margin-left: 21px; margin-right: 21px; } .my-21 { margin-top: 21px; margin-bottom: 21px; } .p-21 { padding: 21px; } .pt-21 { padding-top: 21px; } .pr-21 { padding-right: 21px; } .pb-21 { padding-bottom: 21px; } .pl-21 { padding-left: 21px; } .px-21 { padding-left: 21px; padding-right: 21px; } .py-21 { padding-top: 21px; padding-bottom: 21px; } .m-22 { margin: 22px; } .mt-22 { margin-top: 22px; } .mr-22 { margin-right: 22px; } .mb-22 { margin-bottom: 22px; } .ml-22 { margin-left: 22px; } .mx-22 { margin-left: 22px; margin-right: 22px; } .my-22 { margin-top: 22px; margin-bottom: 22px; } .p-22 { padding: 22px; } .pt-22 { padding-top: 22px; } .pr-22 { padding-right: 22px; } .pb-22 { padding-bottom: 22px; } .pl-22 { padding-left: 22px; } .px-22 { padding-left: 22px; padding-right: 22px; } .py-22 { padding-top: 22px; padding-bottom: 22px; } .m-23 { margin: 23px; } .mt-23 { margin-top: 23px; } .mr-23 { margin-right: 23px; } .mb-23 { margin-bottom: 23px; } .ml-23 { margin-left: 23px; } .mx-23 { margin-left: 23px; margin-right: 23px; } .my-23 { margin-top: 23px; margin-bottom: 23px; } .p-23 { padding: 23px; } .pt-23 { padding-top: 23px; } .pr-23 { padding-right: 23px; } .pb-23 { padding-bottom: 23px; } .pl-23 { padding-left: 23px; } .px-23 { padding-left: 23px; padding-right: 23px; } .py-23 { padding-top: 23px; padding-bottom: 23px; } .m-24 { margin: 24px; } .mt-24 { margin-top: 24px; } .mr-24 { margin-right: 24px; } .mb-24 { margin-bottom: 24px; } .ml-24 { margin-left: 24px; } .mx-24 { margin-left: 24px; margin-right: 24px; } .my-24 { margin-top: 24px; margin-bottom: 24px; } .p-24 { padding: 24px; } .pt-24 { padding-top: 24px; } .pr-24 { padding-right: 24px; } .pb-24 { padding-bottom: 24px; } .pl-24 { padding-left: 24px; } .px-24 { padding-left: 24px; padding-right: 24px; } .py-24 { padding-top: 24px; padding-bottom: 24px; } .m-25 { margin: 25px; } .mt-25 { margin-top: 25px; } .mr-25 { margin-right: 25px; } .mb-25 { margin-bottom: 25px; } .ml-25 { margin-left: 25px; } .mx-25 { margin-left: 25px; margin-right: 25px; } .my-25 { margin-top: 25px; margin-bottom: 25px; } .p-25 { padding: 25px; } .pt-25 { padding-top: 25px; } .pr-25 { padding-right: 25px; } .pb-25 { padding-bottom: 25px; } .pl-25 { padding-left: 25px; } .px-25 { padding-left: 25px; padding-right: 25px; } .py-25 { padding-top: 25px; padding-bottom: 25px; } .bnuLogo { margin-inline-end: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuLogo { margin-inline-end: 0; } } .bnuLogo > img { display: block; width: 135px; height: 36px; } @media (max-width: 768px) { .bnuLogo > img { width: 105px; height: 28px; } } .bnuTooltip > button { transition: color 0.2s ease; cursor: pointer; border: none; background-color: transparent; padding: 0; width: 24px; height: 24px; color: var(--color-text-light); font-size: 14px; } .bnuTooltip > button:hover { color: var(--color-text); } .bnuTooltip > .bnuTooltip__popover { position: fixed; inset: auto; margin: 0; position-area: top center; box-shadow: var(--box-shadow); border: none; border: 1px solid var(--color-border); border-radius: var(--border-radius-input); padding: 0.5em 0.75em; width: max-content; max-width: 240px; color: var(--color-text); font-size: 14px; line-height: 1.333; } a.bnuButton, button.bnuButton { --button-height: 48px; --button-color: var(--color-text); display: inline-flex; column-gap: 6px; justify-content: center; align-items: center; vertical-align: top; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; outline-offset: 1px; border: none; border-radius: var(--border-radius-input); background-color: var(--button-color); padding-inline: 18px; height: var(--button-height); color: white; font-weight: 600; font-size: 14px; line-height: 16px; text-decoration: none; text-transform: uppercase; white-space: nowrap; } @media (max-width: 768px) { a.bnuButton, button.bnuButton { --button-height: 44px; column-gap: 4px; padding-inline: 16px; font-size: 13px; } } a.bnuButton:focus-visible, button.bnuButton:focus-visible { outline: 2px solid color-mix(in oklch, var(--button-color), white 60%); } a.bnuButton:hover, button.bnuButton:hover { background-color: var(--color-accent); } a.bnuButton:active, button.bnuButton:active { background-color: color-mix(in oklch, var(--color-accent), black 25%); } a.bnuButton:disabled, a.bnuButton[disabled], a.bnuButton.swiper-button-lock, button.bnuButton:disabled, button.bnuButton[disabled], button.bnuButton.swiper-button-lock { opacity: 0.5; cursor: not-allowed; pointer-events: none; } a.bnuButton.bnuButton--secondary, a.bnuButton.bnuButton--secondaryLight, a.bnuButton.bnuButton--secondarySolid, a.bnuButton.bnuButton--secondaryWhite, a.bnuButton.bnuButton--nav, button.bnuButton.bnuButton--secondary, button.bnuButton.bnuButton--secondaryLight, button.bnuButton.bnuButton--secondarySolid, button.bnuButton.bnuButton--secondaryWhite, button.bnuButton.bnuButton--nav { --color: var(--color-text); --outline: 1px; border: var(--outline) solid var(--button-color); background-color: transparent; color: var(--button-color); } a.bnuButton.bnuButton--secondary:hover, a.bnuButton.bnuButton--secondaryLight:hover, a.bnuButton.bnuButton--secondarySolid:hover, a.bnuButton.bnuButton--secondaryWhite:hover, a.bnuButton.bnuButton--nav:hover, button.bnuButton.bnuButton--secondary:hover, button.bnuButton.bnuButton--secondaryLight:hover, button.bnuButton.bnuButton--secondarySolid:hover, button.bnuButton.bnuButton--secondaryWhite:hover, button.bnuButton.bnuButton--nav:hover { background-color: color-mix(in oklch, var(--button-color), white var(--outline-bg)); } a.bnuButton.bnuButton--secondary:focus-visible, a.bnuButton.bnuButton--secondaryLight:focus-visible, a.bnuButton.bnuButton--secondarySolid:focus-visible, a.bnuButton.bnuButton--secondaryWhite:focus-visible, a.bnuButton.bnuButton--nav:focus-visible, button.bnuButton.bnuButton--secondary:focus-visible, button.bnuButton.bnuButton--secondaryLight:focus-visible, button.bnuButton.bnuButton--secondarySolid:focus-visible, button.bnuButton.bnuButton--secondaryWhite:focus-visible, button.bnuButton.bnuButton--nav:focus-visible { outline: 2px solid color-mix(in oklch, var(--button-color), white 80%); } a.bnuButton.bnuButton--secondary:active, a.bnuButton.bnuButton--secondaryLight:active, a.bnuButton.bnuButton--secondarySolid:active, a.bnuButton.bnuButton--secondaryWhite:active, a.bnuButton.bnuButton--nav:active, button.bnuButton.bnuButton--secondary:active, button.bnuButton.bnuButton--secondaryLight:active, button.bnuButton.bnuButton--secondarySolid:active, button.bnuButton.bnuButton--secondaryWhite:active, button.bnuButton.bnuButton--nav:active { background-color: color-mix(in oklch, var(--button-color), white var(--outline-bg-hover)); color: color-mix(in oklch, var(--button-color), black 30%); } a.bnuButton.bnuButton--secondaryLight, a.bnuButton.bnuButton--secondaryWhite, a.bnuButton.bnuButton--nav, button.bnuButton.bnuButton--secondaryLight, button.bnuButton.bnuButton--secondaryWhite, button.bnuButton.bnuButton--nav { border: var(--outline) solid var(--color-border); } a.bnuButton.bnuButton--secondaryWhite, button.bnuButton.bnuButton--secondaryWhite { background-color: white; } a.bnuButton.bnuButton--secondaryWhite:hover, button.bnuButton.bnuButton--secondaryWhite:hover { background-color: color-mix(in oklch, var(--color-border), white 60%); } a.bnuButton.bnuButton--secondaryWhite:active, button.bnuButton.bnuButton--secondaryWhite:active { background-color: color-mix(in oklch, var(--color-border), white 40%); } a.bnuButton.bnuButton--secondarySolid, button.bnuButton.bnuButton--secondarySolid { --outline: 0; } a.bnuButton.bnuButton--nav, button.bnuButton.bnuButton--nav { background-color: white; padding: 0; width: calc(var(--layout-spacing) * 3); font-size: 16px; } @media (max-width: 768px) { a.bnuButton.bnuButton--nav, button.bnuButton.bnuButton--nav { font-size: 14px; } } @media (max-width: 480px) { a.bnuButton.bnuButton--nav, button.bnuButton.bnuButton--nav { --button-height: 36px; } } a.bnuButton.bnuButton--nav svg, button.bnuButton.bnuButton--nav svg { display: none; } a.bnuButton.bnuButton--cart, button.bnuButton.bnuButton--cart { position: relative; padding: 8px; width: var(--button-height); } a.bnuButton.bnuButton--cart i, button.bnuButton.bnuButton--cart i { font-size: 32px; } @media (max-width: 768px) { a.bnuButton.bnuButton--cart i, button.bnuButton.bnuButton--cart i { font-size: 24px; } } a.bnuButton.bnuButton--cart .bnuCartCount, button.bnuButton.bnuButton--cart .bnuCartCount { position: absolute; top: 0; right: 0; outline: 2px solid white; border-radius: 50%; background-color: var(--color-accent); width: 20px; height: 20px; color: #fff; font-weight: 700; font-size: 13px; line-height: 20px; text-align: center; } @media (max-width: 768px) { a.bnuButton.bnuButton--cart .bnuCartCount, button.bnuButton.bnuButton--cart .bnuCartCount { width: 18px; height: 18px; font-size: 12px; line-height: 18px; } } a.bnuButton.bnuButton--full, button.bnuButton.bnuButton--full { display: flex; width: 100%; } a.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav), button.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav) { flex-shrink: 0; padding: 8px; width: var(--button-height); } a.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav) i, button.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav) i { font-size: 24px; } @media (max-width: 768px) { a.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav) i, button.bnuButton:has(i:only-child):not(.bnuButton--cart):not(.bnuButton--nav) i { font-size: 20px; } } a.bnuButton > span, button.bnuButton > span { transition: opacity 0.2s ease; } a.bnuButton > i, button.bnuButton > i { font-size: 16px; } @media (max-width: 768px) { a.bnuButton > i, button.bnuButton > i { font-size: 14px; } } a.bnuButton:not(.bnuButton--iconOnly) > i:first-child, button.bnuButton:not(.bnuButton--iconOnly) > i:first-child { margin-inline-start: -4px; } a.bnuButton:not(.bnuButton--iconOnly) > i:last-child, button.bnuButton:not(.bnuButton--iconOnly) > i:last-child { margin-inline-end: -4px; } a.bnuButton:before, button.bnuButton:before { display: block; transition: opacity 0.2s ease; opacity: 0; position: absolute; } a.bnuButton[aria-busy=true], button.bnuButton[aria-busy=true] { pointer-events: none; } a.bnuButton[aria-busy=true]:before, button.bnuButton[aria-busy=true]:before { animation: button-loader 1s linear infinite; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: white; border-radius: 50%; width: 12px; height: 12px; content: ""; opacity: 1; } a.bnuButton[aria-busy=true] > span, button.bnuButton[aria-busy=true] > span { opacity: 0; } .bnuButtonAsTextLink { display: inline; -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; background: none; padding: 0; color: var(--color-text); font: inherit; font-weight: 500; line-height: inherit; text-align: inherit; text-decoration: underline; text-underline-offset: 2px; } .bnuButtonAsTextLink.hidden { display: none; } .bnuButtonAsTextLink.bnuButtonAsTextLink--red { color: var(--color-error); } .bnuButtonAsTextLink:hover { opacity: 0.7; cursor: pointer; } @keyframes button-loader { 100% { rotate: 360deg; } } a.bnuMenuButton { --height: 36px; display: inline-flex; column-gap: 4px; align-items: center; transition: background-color 0.2s ease; border-radius: var(--border-radius-input); padding-inline: calc(var(--height) * 0.25); min-height: var(--height); line-height: 1.25; text-decoration: none; } a.bnuMenuButton > i:first-child, a.bnuMenuButton > img:first-child { flex-shrink: 0; margin-inline-end: 4px; } li:hover > a.bnuMenuButton { background-color: var(--color-bg); } li:hover > a.bnuMenuButton .bnuMenuButton__hoverHelper { display: block; transition: width 0s linaer; } li:hover > a.bnuMenuButton .bnuMenuButton__hoverHelper:hover { transition-delay: 0.25s; width: 0; } li:has(ul) > a.bnuMenuButton:after { content: "\f107"; font-weight: 400; font-size: 14px; line-height: 1; font-family: var(--font-fa); } a.bnuMenuButton.bnuMenuButton--small { --height: 24px; border-radius: var(--border-radius-small); padding-block: 4px; font-size: 14px; line-height: 16px; } li:has(ul) > a.bnuMenuButton.bnuMenuButton--small:after { font-size: 12px; } a.bnuMenuButton.bnuMenuButton--accent:hover { background-color: var(--color-accent-bg); } a.bnuMenuButton.bnuMenuButton--child { display: flex; border-radius: 0; padding-inline: calc(var(--height) * 0.5); padding-block: calc(var(--height) * 0.25); line-height: 1.5; } a.bnuMenuButton--orange { color: var(--color-promo-orange); } a.bnuMenuButton--green { color: var(--color-accent); } a.bnuMenuButton--red { color: var(--color-error); } a.bnuMenuButton--pink { color: var(--color-promo); } a.bnuMenuButton--bold { font-weight: 600; } .bnuMenuButton__hoverHelper { display: none; position: absolute; top: 0; right: 0; z-index: 99; width: 30%; height: 100%; pointer-events: none; } .bnuMenuButton__hoverHelper:before, .bnuMenuButton__hoverHelper:after { position: absolute; background: transparent; width: 100%; height: 150%; pointer-events: auto; content: ""; } .bnuMenuButton__hoverHelper:before { top: -150%; } .bnuMenuButton__hoverHelper:after { top: 100%; } @media (max-width: 1200px) { .bnuMenuButton__text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-width: 1024px) { .bnuMenuButton__text { display: initial; } } .bnuInputWrap { display: inline-flex; position: relative; row-gap: calc(var(--layout-spacing) * 0.5); flex-direction: column; min-width: 0; max-width: 100%; } .bnuInputWrap .bnuInput::placeholder { opacity: 0; } .bnuInputWrap.bnuInputWrap--showPlaceholder .bnuInput::placeholder { opacity: 1; } .bnuInputWrap.bnuInputWrap--errNoClamp .bnuInputInfoBox { white-space: nowrap; -webkit-line-clamp: unset; line-clamp: unset; } .bnuInputWrap.bnuInputWrap--floatingLabel { position: relative; } .bnuInputWrap.bnuInputWrap--floatingLabel .bnuInput + .bnuInputWrap__label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; transition: top 0.2s ease, transform 0.2s ease, margin-inline-start 0.2s ease, font-size 0.2s ease, background-color 0.2s ease; margin: 0; margin-inline-start: 12px; border-radius: var(--border-radius-small); background-color: white; padding-inline: 4px; pointer-events: none; font-weight: 500; font-size: 15px; line-height: 1.2; } .bnuInputWrap.bnuInputWrap--floatingLabel .bnuInput:focus + .bnuInputWrap__label, .bnuInputWrap.bnuInputWrap--floatingLabel .bnuInput:not(:placeholder-shown) + .bnuInputWrap__label, .bnuInputWrap.bnuInputWrap--floatingLabel select.bnuInput:valid + .bnuInputWrap__label, .bnuInputWrap.bnuInputWrap--floatingLabel:has(.bnuInputWrap__prepend) .bnuInput + .bnuInputWrap__label, .bnuInputWrap.bnuInputWrap--floatingLabel.bnuInputWrap--showPlaceholder .bnuInput + .bnuInputWrap__label { top: 0; transform: translateY(-50%); margin-inline-start: 12px; box-shadow: 0 0 0 1px var(--color-bg); font-size: 13px; line-height: 16px; } .bnuInputWrap:has(> .bnuTooltip) .bnuInput { padding-inline-end: 36px; } .bnuInputWrap:has(> .bnuTooltip) .bnuTooltip { position: absolute; right: 8px; bottom: 12px; width: 24px; height: 24px; pointer-events: auto; } .bnuInputWrap:has(> .bnuTooltip):has(select) .bnuTooltip { right: 24px; } .bnuInputWrap:has(> .bnuTooltip):has(select) select.bnuInput { padding-inline-end: 60px; } .bnuInputWrap:has(> .bnuInputWrap__passwordToggle) .bnuInput { padding-inline-end: 44px; } .bnuInputWrap:has(> .bnuInputWrap__passwordToggle):has(> .bnuTooltip) .bnuInput { padding-inline-end: 72px; } .bnuInputWrap:has(> .bnuInputWrap__passwordToggle):has(> .bnuTooltip) .bnuTooltip { right: 40px; } .bnuInputWrap:has(.bnuInput[type=search]):before { position: absolute; bottom: 12px; left: 12px; width: 24px; height: 24px; content: "\f002"; font-weight: 400; font-size: 1rem; font-family: var(--font-fa); text-align: center; z-index: 1; } .bnuInputWrap .bnuInputWrap__prepend { position: absolute; bottom: 12px; left: 16px; line-height: 1.2; } .bnuInputWrap:has(.bnuInput:disabled) { opacity: 0.5; cursor: not-allowed; } .bnuInputWrap:has(.bnuInput:disabled) .bnuInput, .bnuInputWrap:has(.bnuInput:disabled) .bnuInputWrap__label, .bnuInputWrap:has(.bnuInput:disabled) .bnuInputWrap__passwordToggle { pointer-events: none; } .bnuInputWrap__passwordToggle { position: absolute; right: 8px; bottom: 12px; transition: color 0.2s ease; cursor: pointer; border: none; background-color: transparent; padding: 0; width: 24px; height: 24px; color: var(--color-text-light); font-size: 14px; } .bnuInputWrap__passwordToggle:hover { color: var(--color-text); } .bnuPasswordStrength__value { font-weight: 700; } .bnuPasswordInfo { position: absolute; bottom: 100%; left: 0; z-index: 3; margin-bottom: 12px; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: white; padding: 16px 20px; width: max-content; max-width: min(320px, 100%); color: var(--color-text); font-size: 14px; line-height: 1.4; } .bnuPasswordInfo[hidden] { display: none; } .bnuPasswordInfo:after { position: absolute; top: 100%; left: 24px; border: 8px solid transparent; border-top-color: white; content: ""; } .bnuPasswordInfo__title { margin: 0 0 8px; font-weight: 600; } .bnuPasswordInfo__list { margin: 0; padding: 0; list-style: none; } .bnuPasswordInfo__item { position: relative; padding-inline-start: 24px; line-height: 1.7; } .bnuPasswordInfo__item:before { position: absolute; left: 0; font-weight: 900; font-family: var(--font-fa); } .bnuPasswordInfo__item.is-valid { color: var(--color-success); } .bnuPasswordInfo__item.is-valid:before { content: "\f00c"; } .bnuPasswordInfo__item.is-invalid { color: var(--color-error); } .bnuPasswordInfo__item.is-invalid:before { content: "\f00d"; } .bnuInputWrap__label { display: inline-flex; position: relative; column-gap: 2px; align-items: center; font-weight: 500; font-size: 15px; line-height: 1.2; } @media (max-width: 768px) { .bnuInputWrap__label { font-size: 14px; line-height: 18px; } } .bnuInputWrap__label .bnuTooltip > button { height: 18px; } .bnuInputWrap__mandatory { color: var(--color-error); } .bnuInput { --color: var(--color-text); --outline: 1px; --height: 48px; --padding-inline: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline-offset: 1px; border: var(--outline) solid color-mix(in oklch, var(--color), white 60%); border-radius: var(--border-radius-input); background-color: white; padding-inline: var(--padding-inline); padding-inline-start: max(var(--padding-inline), var(--prepend, 0px)); width: 100%; min-width: 0; max-width: 100%; height: var(--height); color: var(--color-text); font-size: 16px; } @media (max-width: 768px) { .bnuInput { --height: 44px; } } .bnuInput:hover { border-color: var(--color); } .bnuInput:focus-visible { outline: 2px solid; outline-color: color-mix(in oklch, var(--color), white 80%); border-color: var(--color); } .bnuInput[aria-invalid=true] { border-color: var(--color-error); color: var(--color-error); } .bnuInput[type=search] { padding-inline-start: 36px; } .bnuInput:disabled { cursor: not-allowed; background-color: white; } select.bnuInput { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49219 11.8398C6.21875 12.0859 5.80859 12.0859 5.5625 11.8398L1.1875 7.46484C0.914062 7.21875 0.914062 6.78125 1.1875 6.53516C1.43359 6.28906 1.84375 6.28906 2.08984 6.53516L6 10.4453L9.91016 6.53516C10.1836 6.28906 10.5938 6.28906 10.8398 6.53516C11.1133 6.80859 11.1133 7.21875 10.8398 7.46484L6.46484 11.8398H6.49219Z' fill='%230F234A'/%3E%3C/svg%3E"); background-position: right 8px center; background-repeat: no-repeat; padding-inline: 12px; padding-inline-end: 28px; } textarea.bnuInput { align-items: flex-start; padding-block: 0.8em; height: auto; line-height: 1.5; } .bnuChoiceWrap { position: relative; } .bnuChoiceWrap:has(.bnuChoice:disabled) { opacity: 0.5; cursor: not-allowed; } .bnuChoiceWrap:has(.bnuChoice:disabled) .bnuChoiceWrap__label { pointer-events: none; } .bnuChoiceWrap__label { display: inline-block; position: relative; padding-inline-start: 24px; line-height: 1.5; } .bnuChoiceWrap__label .bnuChoice { position: absolute; top: 1px; left: 0; margin: 2px; width: 16px; height: 16px; accent-color: var(--color-accent); } .bnuChoiceWrap__label:has(.bnuChoice[aria-invalid=true]) { color: var(--color-error); } .bnuChoiceWrap__label .bnuInputWrap__mandatory { margin-inline-start: 2px; } .bnuChoiceWrap__labelText a { text-decoration: underline; font-weight: 500; } .bnuChoiceWrap__after { padding-inline-start: 24px; line-height: 1.5; } .bnuChoicesGroup { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); flex-wrap: wrap; } .bnuChoicesGroup.bnuChoicesGroup--nowrap { flex-wrap: nowrap; } @media (max-width: 768px) { .bnuChoicesGroup.bnuChoicesGroup--nowrap { flex-direction: column; align-items: flex-start; } } .bnuInputInfoBox { position: absolute; bottom: 0; border-radius: var(--border-radius-small); background-color: var(--color-border); padding-inline: 4px; overflow: hidden; color: white; font-weight: 500; font-size: 13px; line-height: 16px; } .bnuInputInfoBox.bnuInputInfoBox--error { background-color: var(--color-error); color: white; } .bnuInputInfoBox.bnuInputInfoBox--warning { background-color: var(--color-warning); color: white; } .bnuInputInfoBox.bnuInputInfoBox--success { background-color: var(--color-success); color: white; } .bnuInputInfoBox[hidden] { display: none; } .bnuInputWrap .bnuInputInfoBox { right: 12px; left: auto; transform: translateY(50%); margin-inline-start: 12px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .bnuInputWrap .bnuInputInfoBox:not([hidden]) { display: -webkit-box; } .bnuChoiceWrap .bnuInputInfoBox { left: 24px; transform: translateY(75%); } .bnuErrorBox { color: var(--color-error); } .bnuInputBirthdate { display: flex; column-gap: 8px; flex-direction: row; width: 100%; } .bnuInputBirthdate .bnuInputWrap.bnuInputBirthdate__year { width: 100px; } .bnuInputBirthdate .bnuInputWrap.bnuInputBirthdate__month { width: calc(100% - 180px); } .bnuInputBirthdate .bnuInputWrap.bnuInputBirthdate__day { width: 80px; } .customSelect { position: relative; cursor: default; min-width: 80px; } .customSelect.error { border: 1px solid var(--color-error); } .customSelect.error .customSelectVisible, .customSelect.error .optionsWrap { border-color: var(--color-error); } .customSelect .mainInput { display: none; } .customSelect.readonly { pointer-events: none; cursor: not-allowed; } .customSelect .customSelectVisible { position: relative; border: 1px solid color-mix(in oklch, var(--color-text), white 60%); border-radius: var(--border-radius-input); background: #fff; padding: 15px 1em; min-height: 48px; height: 54px; line-height: 1.5; transition: border-color 0.2s ease-in-out; } .customSelect .customSelectVisible:after { position: absolute; top: 50%; right: 15px; margin-top: -7px; width: 15px; height: 14px; color: var(--color-text); font-weight: 900; font-family: var(--font-fa); line-height: 14px; text-align: center; content: "\f107"; } .customSelect .customSelectVisible .customSelectText { overflow: hidden; padding-right: 1.5em; font-size: 16px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .customSelect .customSelectVisible .customSelectText.placeholder { color: var(--color-text-light); } .customSelect.customSelectMulti .customSelectVisible { height: auto; min-height: 48px; } .customSelect.customSelectMulti .customSelectText { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding-right: 2em; text-overflow: unset; white-space: normal; } .customSelect.customSelectMulti .customSelectChip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border-radius: var(--border-radius-small); background: var(--color-bg); padding: 4px 8px; color: var(--color-text); font-size: 14px; line-height: 1.2; } .customSelect.customSelectMulti .customSelectChipLabel { overflow: hidden; text-overflow: ellipsis; } .customSelect.customSelectMulti .customSelectChipRemove { border: none; background: transparent; padding: 0 0 0 2px; color: var(--color-text); cursor: pointer; font-size: 16px; line-height: 1; } .customSelect.customSelectMulti .customSelectChipRemove:hover { opacity: 0.75; } .customSelect.theX .customSelectVisible:after { color: var(--color-text); font-family: var(--font-fa); line-height: 1; content: "\f00d"; } .customSelect .optionsWrap { display: none; position: absolute; left: 0; z-index: 10; margin-top: -1px; border: 1px solid color-mix(in oklch, var(--color-text), white 60%); background: #fff; width: 100%; min-width: 100%; max-height: 300px; height: auto; overflow-x: hidden; overflow-y: auto; } .customSelect .optionsWrap .customOption { padding: 8px 1em; } .customSelect .optionsWrap .customOption.active, .customSelect .optionsWrap .customOption:hover { background: var(--color-bg); } .customSelect .optionsWrap .customOption.disabled { display: none; } .customSelect .optionsWrap .customOption.customOptionMessage { display: block; color: var(--color-text-light); cursor: default; } .customSelect .optionsWrap .customOption.customOptionMessage:hover { background: transparent; } .customSelect .optionsWrap .customOption:focus { background-color: var(--color-bg); } .customSelect .optionsWrap .customOption:focus-visible { outline: none; } .customSelect .optionsWrap .customOption.customOption--placeholder { display: none; } .customSelect .optionsWrap .customSelectSearch { width: 100%; border: none; border-bottom: 1px solid color-mix(in oklch, var(--color-text), white 60%); border-radius: 0; } .customSelect.open .optionsWrap { display: block; } .bnuProductSearch { display: block; } .bnuProductSearch .tt-menu { display: none; position: absolute; top: calc(100% + var(--layout-spacing) * 0.5); left: 0; z-index: 100; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: white; width: 100%; max-height: 320px; overflow-y: auto; } .bnuProductSearch .tt-menu.tt-open:not(.tt-empty) { display: block; } .bnuProductSearch .noResults { padding: var(--layout-gap); color: var(--color-text-light); } .bnuProductSearch.bnuProductSearch--multiple > .bnuInputWrap__label { display: flex; margin-bottom: calc(var(--layout-spacing) * 0.5); } .bnuProductSearch.bnuProductSearch--multiple .bnuInputWrap { --color: var(--color-text); --outline: 1px; --height: 48px; --padding-inline: 12px; flex-flow: row wrap; align-items: center; gap: 6px; transition: border-color 0.2s ease, box-shadow 0.2s ease; border: var(--outline) solid color-mix(in oklch, var(--color), white 60%); border-radius: var(--border-radius-input); background-color: white; padding: 6px var(--padding-inline); padding-inline-start: 36px; width: 100%; min-height: var(--height); } @media (max-width: 768px) { .bnuProductSearch.bnuProductSearch--multiple .bnuInputWrap { --height: 44px; } } .bnuProductSearch.bnuProductSearch--multiple .bnuInputWrap:hover, .bnuProductSearch.bnuProductSearch--multiple .bnuInputWrap:focus-within { border-color: var(--color); } .bnuProductSearch.bnuProductSearch--multiple .bnuInputWrap:has(.bnuInput[type=search]):before { top: 12px; bottom: auto; left: 6px; } .bnuProductSearch.bnuProductSearch--multiple .bnuInput { flex: 1 1 8rem; border: none; background-color: transparent; padding: 0; width: auto; min-width: 6rem; height: auto; } .bnuProductSearch.bnuProductSearch--multiple .bnuInput:focus-visible { outline: none; } .bnuProductSearch.bnuProductSearch--multiple .bnuProductSearch__selected { display: contents; } .bnuProductSearch.bnuProductSearch--multiple .bnuProductSearch__chip { order: -1; } .bnuProductSearch .bnuProductSearch__chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--border-radius-small); background: var(--color-bg); padding: 4px 8px; color: var(--color-text); font-size: 14px; line-height: 1.2; max-width: 100%; } .bnuProductSearch .bnuProductSearch__chipLabel { overflow: hidden; text-overflow: ellipsis; } .bnuProductSearch .bnuProductSearch__chipRemove { border: none; background: transparent; cursor: pointer; padding: 0 0 0 2px; color: var(--color-text); font-size: 16px; line-height: 1; } .bnuProductSearch .bnuProductSearch__chipRemove:hover { opacity: 0.75; } .bnuProductSearch .searchProduct { display: flex; align-items: flex-start; column-gap: var(--layout-spacing); cursor: pointer; padding: var(--layout-spacing); color: var(--color-text); text-decoration: none; } .bnuProductSearch .searchProduct.tt-cursor, .bnuProductSearch .searchProduct:hover { background-color: var(--color-bg); } .bnuProductSearch .searchProduct__image { flex: 0 0 auto; width: 48px; } .bnuProductSearch .searchProduct__image img { display: block; width: 100%; height: auto; } .bnuProductSearch .searchProduct__body { display: flex; flex: 1 1 auto; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.5); min-width: 0; font-size: 15px; } .bnuProductSearch .searchProduct__name { margin: 0; } .bnuProductSearch .searchProduct__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); row-gap: calc(var(--layout-spacing) * 0.5); min-width: 0; width: 100%; } .bnuProductSearch .searchProduct__badges { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .bnuProductSearch .searchProduct__badges .bnuProductBadge { flex: 0 1 auto; max-width: 100%; height: 16px; padding-inline: 0.35em; font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .bnuProductSearch .searchProduct__price { display: flex; flex: 0 0 auto; align-items: baseline; column-gap: calc(var(--layout-spacing) * 0.5); margin-inline-start: auto; white-space: nowrap; } .bnuProductSearch .searchProduct__priceOld { color: var(--color-text-light); text-decoration: line-through; } .bnuProductSearch .searchProduct__drugProduct { flex: 0 0 auto; margin-inline-start: auto; color: var(--color-text-light); white-space: nowrap; } .bnuNumberSpinner { --spinner-btn-size: 42px; --spinner-input-width: 48px; display: inline-flex; align-items: stretch; vertical-align: top; } .bnuNumberSpinner .bnuNumberSpinner__btn { display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; outline: none; border: 1px solid color-mix(in oklch, var(--color-text), white 60%); background: color-mix(in oklch, var(--color-text-light), white 90%); width: var(--spinner-btn-size); height: var(--spinner-btn-size); color: color-mix(in oklch, var(--color-text), white 60%); font-size: 16px; cursor: pointer; transition: background-color 0.2s ease-in-out; } .bnuNumberSpinner .bnuNumberSpinner__btn:hover { background: color-mix(in oklch, var(--color-text-light), white 85%); } .bnuNumberSpinner .bnuNumberSpinner__btn:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-info), white 60%); outline-offset: 1px; z-index: 1; } .bnuNumberSpinner .bnuNumberSpinner__btn:first-child { border-right: 0; border-radius: var(--border-radius-input) 0 0 var(--border-radius-input); } .bnuNumberSpinner .bnuNumberSpinner__btn:last-child { border-left: 0; border-radius: 0 var(--border-radius-input) var(--border-radius-input) 0; } .bnuNumberSpinner .bnuNumberSpinner__btn:disabled, .bnuNumberSpinner .bnuNumberSpinner__btn[disabled], .bnuNumberSpinner .bnuNumberSpinner__btn.disabledQntChange { cursor: not-allowed; } .bnuNumberSpinner .bnuNumberSpinner__btn:disabled:hover, .bnuNumberSpinner .bnuNumberSpinner__btn[disabled]:hover, .bnuNumberSpinner .bnuNumberSpinner__btn.disabledQntChange:hover { background: var(--color-info-bg); } .bnuNumberSpinner .bnuNumberSpinner__btn:disabled i, .bnuNumberSpinner .bnuNumberSpinner__btn[disabled] i, .bnuNumberSpinner .bnuNumberSpinner__btn.disabledQntChange i { opacity: 0.7; color: var(--color-text-disabled); } .bnuNumberSpinner .bnuNumberSpinner__input { display: block; flex-shrink: 0; box-shadow: none; outline: none; border: 1px solid color-mix(in oklch, var(--color-text), white 60%); border-radius: 0; background: #ffffff; padding: 0; width: var(--spinner-input-width); height: var(--spinner-btn-size); min-height: var(--spinner-btn-size); color: var(--color-text); font-weight: 500; font-size: 16px; text-align: center; -webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield; } .bnuNumberSpinner .bnuNumberSpinner__input::-webkit-outer-spin-button, .bnuNumberSpinner .bnuNumberSpinner__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .bnuNumberSpinner .bnuNumberSpinner__input:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-info), white 60%); outline-offset: 1px; z-index: 1; position: relative; } @media (max-width: 1024px) { .bnuNumberSpinner { --spinner-btn-size: 30px; --spinner-input-width: 34px; } } .bnuNumberSpinner.bnuNumberSpinner--small { --spinner-btn-size: 32px; --spinner-input-width: 38px; } @media (max-width: 1024px) { .bnuNumberSpinner.bnuNumberSpinner--small { --spinner-btn-size: 30px; --spinner-input-width: 34px; } } hr { margin-block: calc(var(--layout-spacing) * 2); border: none; background-color: var(--color-border); width: 100%; height: 1px; } :where([popover]) { box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--layout-gap); max-width: 480px; margin-inline: var(--layout-spacing); font-size: 15px; position-area: top; } :where([popover]) button[popovertargetaction=hide] { position: absolute; top: 4px; right: 4px; cursor: pointer; border: none; background-color: transparent; padding: 0; width: 24px; height: 24px; color: initial; font-size: 16px; } .bnuBreadcrumbs { margin-block-end: calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); font-size: 13px; line-height: 1.333; } .bnuBreadcrumbs ul { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--layout-spacing) * 0.75); margin: 0; padding: 0; list-style: none; } .bnuBreadcrumbs ul > li { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.75); } .bnuBreadcrumbs a { color: var(--color-text); text-decoration: none; } .bnuBreadcrumbs a:hover { text-decoration: underline; } .bnuBreadcrumbs i { width: 8px; font-size: 12px; } .bnuTabs { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuTabs.bnuTabs--end .bnuTabs__list { justify-content: flex-end; } .bnuTabs.bnuTabs--end .bnuTab--alt:first-child { margin-inline-start: 0; } .bnuTabs.bnuTabs--end .bnuTab--alt:last-child { margin-inline-end: 0; } .bnuTab { display: flex; align-items: center; transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; cursor: pointer; border: none; background-color: transparent; padding-block: calc(var(--layout-spacing) * 0.5); padding-inline: var(--layout-spacing); width: 100%; max-width: 288px; min-height: 48px; color: var(--color-text-light); font-weight: 600; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; } @media (max-width: 768px) { .bnuTab { min-height: 40px; } } .bnuTab[aria-selected=true] { box-shadow: inset 0 -2px 0 0 var(--color-text); color: var(--color-text); } .bnuTab.bnuTab--alt { justify-content: center; margin-inline-start: -1px; box-shadow: none; border: 1px solid var(--color-border); border-top-right-radius: var(--border-radius-input); border-top-left-radius: var(--border-radius-input); background-color: var(--color-bg); text-align: center; } .bnuTab.bnuTab--alt[aria-selected=true] { border-bottom: 1px solid transparent; background-color: white; } .bnuTab.bnuTab--alt:first-child { margin-inline-start: var(--layout-spacing); } .bnuTab.bnuTab--alt:last-child { margin-inline-end: var(--layout-spacing); } .bnuTab.bnuTab--alt:hover { color: var(--color-text); } .bnuTabs__list { display: flex; box-shadow: inset 0 -1px 0 0 var(--color-border); } .bnuQuote { padding: calc(var(--layout-spacing) * 1.5); } .bnuQuote blockquote { display: flex; position: relative; column-gap: var(--layout-spacing); align-items: baseline; font-weight: 500; font-size: 18px; } .bnuQuote blockquote:before { display: block; flex-shrink: 0; width: calc(var(--layout-spacing) * 2); content: "\f10e"; font-style: initial; font-weight: 400; font-size: 20px; line-height: 1; font-family: var(--font-fa); } @media (max-width: 768px) { .bnuQuote blockquote:before { font-size: 18px; } } .bnuQuote figcaption { padding-inline: calc(var(--layout-spacing) * 3); } blockquote { margin: 0; margin-block-end: var(--layout-spacing); font-style: italic; } @media (max-width: 768px) { blockquote { font-size: 16px; } } figcaption { font-size: 15px; } @media (max-width: 768px) { figcaption { font-size: 14px; } } figcaption:before { margin-right: 0.5em; content: "\2014"; } .bnuNotice { display: flex; position: relative; column-gap: var(--layout-spacing); align-items: baseline; margin: 1em 0; border-radius: var(--border-radius); background-color: var(--color-info-bg); padding: calc(var(--layout-spacing) * 1.5); color: var(--color-info); font-weight: 500; border: 1px solid var(--color-border); } .bnuNotice:first-child { margin-top: 0; } .bnuNotice:last-child { margin-bottom: 0; } .bnuNotice.bnuNotice--error { background-color: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-border); } .bnuNotice.bnuNotice--warning { background-color: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); } .bnuNotice.bnuNotice--success { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); } .bnuNotice p, .bnuNotice ul, .bnuNotice ol { margin-block: 0.5em; } .bnuNotice p:first-child, .bnuNotice ul:first-child, .bnuNotice ol:first-child { margin-block-start: 0; } .bnuNotice p:last-child, .bnuNotice ul:last-child, .bnuNotice ol:last-child { margin-block-end: 0; } .bnuNotice a { color: inherit; } .bnuNotice i { transform: translateY(2px); font-size: 20px; color: inherit; } @media (max-width: 768px) { .bnuNotice i { font-size: 18px; } } .bnuNotice.bnuNotice--small { flex-direction: column; } .bnuNotice.bnuNotice--small i { font-size: 16px; } .bnuNotice.bnuNotice--small .bnuNotice__content { margin-block-start: var(--layout-spacing); font-size: 14px; line-height: 1.5; } .bnuNotice.bnuNotice--small .bnuNotice__content > header { position: absolute; top: calc(var(--layout-spacing) * 1.75); left: calc(var(--layout-spacing) * 1.5 + 24px); font-size: 12px; } .bnuNotice__content { display: flex; row-gap: calc(var(--layout-spacing) * 0.5); flex-direction: column; flex: 1 1 auto; min-width: 0; } .bnuNotice__content > header { font-weight: 700; font-size: 14px; line-height: 1.333; text-transform: uppercase; } @media (max-width: 768px) { .bnuNotice__content > header { font-size: 13px; } } .bnuPageContent .bnuNotice i { color: inherit; } .bnuNotice--dismissible { padding-right: calc(var(--layout-spacing) * 4); } .bnuNotice__close { position: absolute; top: var(--layout-spacing); right: var(--layout-spacing); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .bnuNotice__close i { transform: none; font-size: 16px; } .bnuPromoBoxWrap { margin-bottom: var(--layout-spacing); } .bnuPromoBoxWrap .bnuPromoBox { margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .bnuPromoBox__media { overflow: hidden; border: 1px dashed var(--color-border); border-bottom: 0; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } .bnuPromoBox__media a { display: block; } .bnuPromoBox__media img { display: block; width: 100%; height: auto; } .bnuPromoBox { display: flex; position: relative; align-items: center; gap: var(--layout-gap); margin-bottom: var(--layout-spacing); border: 1px dashed var(--color-border); border-radius: var(--border-radius-small); background-color: var(--color-bg); padding: var(--layout-gap) calc(var(--layout-spacing) * 1.67); } @media (max-width: 768px) { .bnuPromoBox { gap: var(--layout-spacing); padding: calc(var(--layout-spacing) * 1.17) var(--layout-spacing); } } .bnuPromoBox__meta { display: flex; position: absolute; top: var(--layout-spacing); right: var(--layout-spacing); column-gap: var(--layout-spacing); align-items: center; } .bnuPromoBox__metaText { color: var(--color-text-light); font-size: 12px; line-height: 1.2; } .bnuPromoBox__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; width: 48px; height: 48px; background-color: var(--color-border); color: var(--color-text); } .bnuPromoBox__icon i { font-size: 24px; line-height: 1; } @media (max-width: 768px) { .bnuPromoBox__icon i { font-size: 20px; } } @media (max-width: 1024px) { .bnuPromoBox__icon { width: 40px; height: 40px; } } @media (max-width: 768px) { .bnuPromoBox__icon { width: 32px; height: 32px; } } .bnuPromoBox__body { display: flex; flex: 1 1 auto; flex-direction: column; row-gap: calc(var(--layout-spacing) / 2); min-width: 0; } .bnuPromoBox__title { color: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; } .bnuPromoBox__text { color: inherit; font-size: 14px; line-height: 1.4; word-wrap: break-word; } .bnuPromoBox__text strong { font-weight: 700; } @media (max-width: 768px) { .bnuPromoBox__text { font-size: 13px; } } .bnuPromoBox__info { margin-left: auto; } .bnuPromoBox__code { display: inline-flex; position: relative; align-items: center; gap: calc(var(--layout-spacing) / 2); margin-top: calc(var(--layout-spacing) / 2); border-radius: 999px; background-color: white; padding: calc(var(--layout-spacing) / 2) var(--layout-spacing); padding-right: calc(var(--layout-spacing) * 2.5); width: fit-content; max-width: 100%; font-size: 14px; cursor: pointer; } .bnuPromoBox__codeValue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnuPromoBox__codeIcon { display: inline-flex; position: absolute; top: 50%; right: calc(var(--layout-spacing) / 2); align-items: center; justify-content: center; transform: translateY(-50%); color: var(--color-text-light); } .bnuPromoBox__progress { display: flex; position: relative; align-items: center; justify-content: center; border-radius: 50%; width: 48px; height: 48px; } @media (max-width: 768px) { .bnuPromoBox__progress { width: 32px; height: 32px; } } .bnuPromoBox__progressInner { position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border-radius: 50%; background-color: white; } .bnuPromoBox__progressLabel { position: relative; z-index: 1; margin: 0; font-size: 11px; font-weight: 700; line-height: 1; } .bnuPromoBox__progressWrap { position: relative; } .bnuPromoBox--orange { border-color: var(--color-promo-orange-border); background-color: var(--color-promo-orange-bg); color: var(--color-promo-orange); } .bnuPromoBox--orange .bnuPromoBox__title, .bnuPromoBox--orange .bnuPromoBox__text { color: var(--color-promo-orange); font-weight: 600; } .bnuPromoBox--orange .bnuPromoBox__icon { background-color: var(--color-promo-orange-border); color: var(--color-promo-orange); } .bnuPromoBox--blue { border-color: var(--color-border); background-color: var(--color-bg); color: var(--color-text); } .bnuPromoBox--blue .bnuPromoBox__icon { background-color: var(--color-info-bg); color: var(--color-info); } .bnuPromoBox--pink { border-color: var(--color-promo-border); background-color: var(--color-promo-bg); color: var(--color-promo); } .bnuPromoBox--pink .bnuPromoBox__title, .bnuPromoBox--pink .bnuPromoBox__text { color: var(--color-promo); font-weight: 600; } .bnuPromoBox--pink .bnuPromoBox__icon { background-color: var(--color-promo-border); color: var(--color-promo); } .bnuPromoBox--small { padding: var(--layout-spacing) calc(var(--layout-spacing) * 1.17); } .bnuPromoBox--small .bnuPromoBox__icon { width: 32px; height: 32px; } .bnuPromoBox--small .bnuPromoBox__icon i { font-size: 16px; } .bnuPromoBox--small .bnuPromoBox__title { font-size: 14px; } .bnuPromoBox--small .bnuPromoBox__text { font-size: 13px; } dialog.bnuDialog { display: none; flex-direction: column; transform: translateY(12px) scale(0.98); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete; margin: auto; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: white; padding: 0; width: min(808px, 100% - var(--layout-padding)); max-width: calc(100% - var(--layout-padding)); max-height: calc(100svh - var(--layout-padding)); overflow: hidden; color: var(--color-text); } dialog.bnuDialog.bnuDialog--small { width: min(600px, 100% - var(--layout-padding)); } dialog.bnuDialog.bnuDialog--large { width: min(var(--layout-mw), 100% - var(--layout-padding)); } dialog.bnuDialog > [data-dialog-close] { position: absolute; top: var(--layout-spacing); right: var(--layout-spacing); z-index: 1; margin: 0; } @media (max-width: 768px) { dialog.bnuDialog > [data-dialog-close] .bnuButton { --button-height: 32px; } } dialog.bnuDialog[open] { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: fit-content; max-height: calc(100svh - var(--layout-padding)); margin: auto; transform: translateY(0) scale(1); opacity: 1; } dialog.bnuDialog:focus { outline: none; } dialog.bnuDialog::backdrop { transition: background-color 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete; background-color: color-mix(in oklch, var(--color-text), transparent 100%); } dialog.bnuDialog[open]::backdrop { background-color: color-mix(in oklch, var(--color-text), transparent 40%); } @starting-style { dialog.bnuDialog[open] { transform: translateY(12px) scale(0.98); opacity: 0; } dialog.bnuDialog[open]::backdrop { background-color: rgba(15, 35, 74, 0); } } dialog.bnuDialog > header { display: flex; position: relative; column-gap: var(--layout-gap); justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding: var(--layout-spacing); padding-inline-start: var(--layout-gap); padding-inline-end: calc(var(--layout-spacing) + 3rem); min-height: calc(var(--layout-spacing) * 6); } dialog.bnuDialog > header > h2 { font-size: clamp(1.13rem, 0.88rem + 0.81vw, 1.5rem); margin: 0; } dialog.bnuDialog > section { flex: 1 1 auto; min-height: 0; padding: var(--layout-gap); overflow: auto; font-size: 16px; line-height: 1.5; } dialog.bnuDialog > section > :first-child { margin-top: 0; } dialog.bnuDialog > section > :last-child { margin-bottom: 0; } dialog.bnuDialog > footer { display: flex; column-gap: var(--layout-spacing); justify-content: flex-end; border-top: 1px solid var(--color-border); padding: var(--layout-gap); } dialog.bnuDialog > footer:empty { display: none; } @media (prefers-reduced-motion: reduce) { dialog.bnuDialog { transform: none; transition: none; } dialog.bnuDialog::backdrop { transition: none; } } .bnuAccordion { display: flex; row-gap: calc(var(--layout-spacing) * 2); flex-direction: column; } .bnuAccordion__item { border-bottom: 1px solid var(--color-border); } .bnuAccordion__summary { display: flex; column-gap: var(--layout-spacing); align-items: baseline; transition: color 0.2s ease; cursor: pointer; padding-block: var(--layout-spacing); font-weight: 600; font-size: 18px; line-height: 1.5; list-style: none; } .bnuAccordion__summary::-webkit-details-marker { display: none; } .bnuAccordion:not(.bnuAccordion--chevron) .bnuAccordion__icon { width: calc(var(--layout-spacing) * 2); height: calc(var(--layout-spacing) * 2); font-weight: 400; font-size: 16px; line-height: calc(var(--layout-spacing) * 2); } .bnuAccordion:not(.bnuAccordion--chevron) .fa-minus { display: none; } .bnuAccordion:not(.bnuAccordion--chevron) .bnuAccordion__item[open] .bnuAccordion__summary .fa-minus { display: block; } .bnuAccordion:not(.bnuAccordion--chevron) .bnuAccordion__item[open] .bnuAccordion__summary .fa-plus { display: none; } .bnuAccordion--chevron { width: 100%; } .bnuAccordion--chevron .bnuAccordion__item { width: 100%; } .bnuAccordion--chevron .bnuAccordion__summary { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; column-gap: calc(var(--layout-spacing) * 2); } .bnuAccordion--chevron .bnuAccordion__title { flex: 0 1 auto; min-width: 0; font-size: clamp(1.13rem, 0.88rem + 0.81vw, 1.5rem); } .bnuAccordion--chevron .bnuAccordion__chevron { flex: 0 0 auto; margin-inline-start: auto; font-weight: 400; font-size: 14px; line-height: 1; color: var(--color-text-light); transition: transform 0.2s ease; } .bnuAccordion--chevron .bnuAccordion__item[open] .bnuAccordion__chevron { transform: rotate(180deg); } .bnuAccordion__content { padding-inline-start: calc(var(--layout-spacing) * 3); padding-block-end: calc(var(--layout-spacing) * 2); } .bnuAccordion--chevron .bnuAccordion__content { padding-inline-start: 0; } .bnuArticlesSlider .swiper-slide { height: auto; } .bnuArticles { display: flex; row-gap: calc(var(--layout-spacing) * 2); flex-direction: column; container-type: inline-size; } .bnuArticles.bnuArticles--grid { --columns: 3; display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); } @media (max-width: 1024px) { .bnuArticles.bnuArticles--grid { grid-template-columns: repeat(2, 1fr); } } .bnuArticleCard { display: flex; row-gap: var(--layout-spacing); flex-direction: column; container-type: inline-size; height: 100%; } .bnuArticleCard:not(.bnuArticleCard--small) { transition: box-shadow 0.2s ease; border: 1px solid var(--color-border); border-radius: var(--card-border-radius); padding: calc(var(--layout-spacing) * 1.5); overflow: hidden; } .bnuArticleCard:not(.bnuArticleCard--small):hover { box-shadow: var(--card-box-shadow); } @media (max-width: 768px) { .bnuArticleCard:not(.bnuArticleCard--small):hover { box-shadow: none; } } @media (max-width: 768px) { .bnuArticleCard:not(.bnuArticleCard--small) { border: none; border-radius: 0; padding: 0; } } .bnuArticleCard.bnuArticleCard--small { row-gap: calc(var(--layout-spacing) * 0.5); max-width: 600px; } .bnuArticleCard.bnuArticleCard--small .bnuArticleCard__updated { margin-inline-start: initial; } .bnuArticleCard.bnuArticleCard--small .bnuArticleCard__thumbnail { display: none; } .bnuArticleCard a { text-decoration: none; } .bnuArticleCard a:hover { text-decoration: underline; } .bnuArticleCard__thumbnail { margin: calc(var(--layout-spacing) * -1.5); margin-block-end: 0; overflow: hidden; } @media (max-width: 768px) { .bnuArticleCard__thumbnail { margin: 0; } } .bnuArticleCard__thumbnail img { display: block; transform: scale(1.04); transition: transform 0.4s ease; aspect-ratio: 16/9; width: 100%; height: auto; object-fit: cover; } @media (max-width: 768px) { .bnuArticleCard__thumbnail img { transform: none; border-radius: var(--border-radius); } } .bnuArticleCard__thumbnail:hover img { transform: scale(1.01); } @media (max-width: 768px) { .bnuArticleCard__thumbnail:hover img { transform: none; } } h3.bnuArticleCard__title { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.5; text-wrap: pretty; } @media (max-width: 768px) { h3.bnuArticleCard__title { font-size: 14px; line-height: 1.333; } } .bnuArticleCard__meta { display: flex; column-gap: var(--layout-spacing); row-gap: calc(var(--layout-spacing) * 0.5); flex-wrap: wrap; font-size: 13px; line-height: 1.333; } @media (max-width: 768px) { .bnuArticleCard__meta { font-size: 12px; } } .bnuArticleCard__date { color: var(--color-text-light); } .bnuArticleCard__updated { color: var(--color-accent); font-weight: 600; } .bnuArticleCard:not(.bnuArticleCard--small) .bnuArticleCard__updated { margin-inline-start: auto; } @container (max-width: 287px) { .bnuArticleCard:not(.bnuArticleCard--small) .bnuArticleCard__updated { margin-inline-start: initial; width: 100%; } } @media (max-width: 768px) { .bnuArticleCard:not(.bnuArticleCard--small) .bnuArticleCard__updated { margin-inline-start: initial; width: 100%; } } .bnuCard { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuCard { padding: calc(var(--layout-spacing) * 1.5); } } .bnuCard__header { display: flex; gap: var(--layout-spacing); justify-content: space-between; align-items: flex-start; } .bnuCard__header:not(:last-child) { margin-block-end: var(--layout-spacing); } .bnuCard__meta { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.5) calc(var(--layout-spacing) * 0.67); align-items: center; min-width: 0; } .bnuCard__date, .bnuCard__author { font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuCard__date { color: var(--color-text-light); } .bnuCard__author { color: var(--color-text); } .bnuCard__body, .bnuCard__question, .bnuCard__answerBody { margin: 0; color: var(--color-text); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuCard__body p, .bnuCard__question p, .bnuCard__answerBody p { margin: 0 0 0.5em; } .bnuCard__body p:last-child, .bnuCard__question p:last-child, .bnuCard__answerBody p:last-child { margin-bottom: 0; } .bnuCard .bnuButtonAsTextLink { font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuCard > .bnuButtonAsTextLink { margin-block-start: var(--layout-spacing); } .bnuCard__footer { margin: 0; margin-block-start: var(--layout-spacing); } .bnuCard__useful { display: inline-flex; flex-shrink: 0; gap: 4px; align-items: center; margin: 0; border: 0; background: transparent; padding: 0; color: var(--color-text); font-weight: 600; font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; white-space: nowrap; cursor: pointer; } .bnuCard__useful i { font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); } .bnuCard__useful.active { color: var(--color-accent); } .bnuCard--answer { margin: 0; border: 0; border-radius: 0; background-color: transparent; padding: calc(var(--layout-spacing) * 1.17) 0 0 36px; border-top: 1px solid var(--color-border); } .bnuCard--answer.bnuCard--truncated .bnuCard__answerBody { position: relative; display: -webkit-box; overflow: hidden; width: 100%; min-height: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; max-height: 5.7142857143em; text-overflow: ellipsis; line-break: after-white-space; } .bnuCard--answer.bnuCard--truncated .bnuCard__answerBody::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2.8em; background: linear-gradient( to top, var(--color-bg) 0%, color-mix(in oklch, var(--color-bg), transparent 35%) 55%, transparent 100%); pointer-events: none; } .bnuCard--answer.bnuCard--truncated > .bind-expandQAAnswer { align-self: flex-start; } .bnuCard--answer:not(.bnuCard--truncated) > .bind-expandQAAnswer { display: none; } .bnuCard__answers .bnuCard--answer:first-child { margin-top: calc(var(--layout-spacing) * 0.33); padding-top: calc(var(--layout-spacing) * 1.17); padding-left: 36px; } .bnuCard__answers--nested .bnuCard--answer { border-top: 0; padding-top: calc(var(--layout-spacing) * 0.67); padding-left: 36px; } .bnuCard__verified { display: inline-flex; gap: 4px; align-items: center; color: var(--color-text); font-weight: 600; font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); line-height: 1.3333333333; } .bnuCard__verified i { color: var(--color-success); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); } .bnuCard__answers { display: flex; flex-direction: column; gap: var(--layout-spacing); margin: 0; margin-block-start: calc(var(--layout-spacing) * 2); padding: 0; list-style: none; } .bnuTags { display: flex; gap: 6px; padding-top: var(--layout-spacing); padding-bottom: calc(var(--layout-spacing) * 2); } .bnuTag { display: inline-flex; border-radius: var(--border-radius-input); padding-inline: calc(var(--layout-spacing) * 0.75); color: var(--color-text-light); text-decoration: none; font-weight: 500; border: 1px solid var(--color-border); } .bnuPromoBanner picture { display: inline-block; vertical-align: top; background-color: var(--color-bg); } .bnuPromoBanner .bnuPromoBanner__image { display: block; border: 1px solid var(--color-border); border-radius: var(--border-radius); } .bnuStars { display: inline-flex; align-items: center; column-gap: 4px; } .bnuStars i { width: 1em; line-height: 1; font-size: 15px; } @media (max-width: 768px) { .bnuStars i { font-size: 13px; } } .bnuStars i.fa-solid { color: var(--color-promo-orange); } .bnuStars i.fa-regular { color: var(--color-text-disabled); } .bnuStarRate__star { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; line-height: 1; } .bnuStarRate__star:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } #bnuPromoBarNotification { color: #fff; } #bnuPromoBarNotification #bnuPromoBarMessage { color: inherit; } #bnuPromoBar > .bnuPromoBarSlider { position: initial; animation: none; } .bnuPromoBar .bnuPromoBar__message { color: #fff; } .bnuSkeletonHost[aria-busy=true] { opacity: 1; } .bnuSkeletonHost[aria-busy=true] > *:not(.bnuSkeleton) { display: none; } .bnuSkeleton { pointer-events: none; box-sizing: border-box; } .bnuSkeleton.bnuCard { width: 100%; } .bnuSkeleton__bone { border-radius: var(--border-radius); background-color: var(--color-border); animation: bnuSkeletonPulse 1.4s ease-in-out infinite; } .bnuSkeleton__bone--title { width: min(50%, 280px); height: 1.5em; } .bnuSkeleton__bone--line { width: min(75%, 420px); height: 0.85em; animation-delay: 0.08s; } .bnuSkeleton__bone--lineShort { width: min(55%, 300px); height: 0.85em; animation-delay: 0.08s; } .bnuSkeleton__bone--field { width: 100%; height: 48px; animation-delay: 0.16s; } .bnuSkeleton__bone--button { width: min(40%, 200px); height: 48px; animation-delay: 0.24s; } .bnuSkeleton__row { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); } @media (max-width: 768px) { .bnuSkeleton__row { flex-direction: column; } } .bnuSkeleton__group { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.5); } .bnuSkeleton__row .bnuSkeleton__bone--field { flex: 1 1 0; min-width: 0; } @keyframes bnuSkeletonPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } } dialog.bnuDialog.bnuBannerDialog { width: min(808px, 100% - var(--layout-padding)); } dialog.bnuDialog.bnuBannerDialog--image { width: min(600px, 100% - var(--layout-padding)); } dialog.bnuDialog.bnuBannerDialog > section { padding: 0; } dialog.bnuDialog.bnuBannerDialog > footer { flex-wrap: wrap; row-gap: var(--layout-spacing); } dialog.bnuDialog.bnuBannerDialog > footer form { margin: 0; } dialog.bnuDialog.bnuBannerDialog:not(:has(> header)):has(.bnuBannerDialog__imageLink) > [data-dialog-close] .bnuButton { background-color: color-mix(in oklch, white, transparent 30%); } dialog.bnuDialog.bnuBannerDialog:not(:has(> header)):has(.bnuBannerDialog__imageLink) > [data-dialog-close] .bnuButton:hover { background-color: color-mix(in oklch, white, transparent 10%); } .bnuBannerDialog__media, .bnuBannerDialog__imageLink { display: block; } .bnuBannerDialog__imageLink img { display: block; width: 100%; height: auto; } .bnuBannerDialog__content, .bnuBannerDialog__form, .bnuBannerDialog__message { padding: var(--layout-gap); } .bnuBannerDialog__content > :first-child, .bnuBannerDialog__message > :first-child { margin-top: 0; } .bnuBannerDialog__content > :last-child, .bnuBannerDialog__message > :last-child { margin-bottom: 0; } .bnuBannerDialog__products { display: grid; gap: var(--layout-spacing); padding: var(--layout-gap); } .bnuBannerDialog__product { box-shadow: none; border: 1px solid var(--color-border); } .bnuBannerDialog--newsletter .bnuBannerDialog__imageLink { border-bottom: 1px solid var(--color-border); } .bnuBannerDock { position: fixed; right: var(--layout-spacing); bottom: calc(var(--layout-spacing) * 8); z-index: 1001; width: min(420px, 100% - var(--layout-gap)); pointer-events: none; } .bnuBannerDock:has(.bnuBannerCard.active) { pointer-events: auto; } .bnuBannerDock.liveChatOpen { right: 3px; bottom: 55vh; } .bnuBannerDock.liveChatOpen.mobile { right: 0; bottom: calc(var(--layout-spacing) * 8); z-index: 1; } .bnuBannerCard { position: relative; transform: translateY(50%); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; visibility: hidden; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg); max-height: min(560px, 100svh - var(--layout-gap)); overflow: auto; pointer-events: none; } .bnuBannerCard.active { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .bnuBannerCard__close { position: absolute; top: var(--layout-spacing); right: var(--layout-spacing); z-index: 2; pointer-events: auto; } .bnuBannerCard .bind-copyPromoCode { pointer-events: auto; } .bnuBannerCard__imageLink { display: block; } .bnuBannerCard__imageLink img { display: block; width: 100%; height: auto; } .bnuBannerCard__content { padding: var(--layout-gap); } .bnuBannerCard__content h2 { margin: 0 0 var(--layout-spacing); font-size: 20px; } .bnuBannerCard__text > :first-child { margin-top: 0; } .bnuBannerCard__text > :last-child { margin-bottom: 0; } .bnuBannerCard__promo { display: grid; gap: var(--layout-spacing); margin-top: var(--layout-gap); } .bnuBannerCard__promoCode { border: 1px dashed var(--color-border); border-radius: var(--border-radius-small); background: var(--color-accent-bg); padding: var(--layout-spacing); overflow-wrap: anywhere; color: var(--color-text); font-size: 20px; text-align: center; text-transform: uppercase; } @media (max-width: 768px) { dialog.bnuDialog.bnuBannerDialog > footer { display: grid; grid-template-columns: 1fr; row-gap: var(--layout-spacing); } dialog.bnuDialog.bnuBannerDialog > footer > * { width: 100%; } dialog.bnuDialog.bnuBannerDialog > footer .bnuButton { width: 100%; } .bnuBannerDock { right: var(--layout-spacing); bottom: var(--layout-gap); } } @media (prefers-reduced-motion: reduce) { .bnuBannerCard { transform: none; transition: none; } } .ui-helper-hidden { display: none; } .ui-helper-clearfix::before, .ui-helper-clearfix::after { display: table; border-collapse: collapse; content: ""; } .ui-helper-clearfix::after { clear: both; } .ui-helper-reset { margin: 0; border: 0; padding: 0; outline: 0; list-style: none; line-height: 1.3; font-size: 100%; text-decoration: none; } .ui-corner-all { border-radius: var(--border-radius-small); } .ui-widget { font-family: inherit; font-size: 1em; } .ui-widget.ui-widget-content, .ui-widget-content { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); } .ui-widget-header { border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-weight: 600; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font-weight: 400; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: var(--color-accent); background: var(--color-accent); color: #fff; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; background-image: none; cursor: default !important; pointer-events: none; } .ui-datepicker { display: none; width: 17em; padding: 0.2em 0.2em 0; } .ui-datepicker.ui-datepicker-inline { display: block; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; cursor: pointer; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { margin: 1px 0; font-size: 1em; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; margin: 0 0 0.4em; border-collapse: collapse; font-size: 0.9em; } .ui-datepicker th { border: 0; padding: 0.7em 0.3em; font-weight: 700; text-align: center; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: 0.2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { margin: 0.7em 0 0; border-right: 0; border-bottom: 0; border-left: 0; background-image: none; padding: 0 0.2em; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; width: auto; overflow: visible; cursor: pointer; padding: 0.2em 0.6em 0.3em; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } #ui-datepicker-div.ui-datepicker { z-index: 1000; padding: 15px !important; width: 19em !important; box-shadow: var(--box-shadow); } #ui-datepicker-div.ui-datepicker.ui-widget-content { background: #fff; color: var(--color-text); } #ui-datepicker-div.ui-datepicker .ui-widget-header { color: var(--color-text); font-weight: 400; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar { table-layout: fixed; margin: 0; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td { text-align: center; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td a, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td span { display: inline-block; width: 35px; height: 35px; border-radius: 50%; color: var(--color-text); font-weight: 500; line-height: 30px; text-align: center; box-shadow: initial; transition: background-color 0.2s ease, color 0.2s ease; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-default { border: 0; background: transparent; color: var(--color-text); } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-disabled { opacity: 0.5; cursor: not-allowed; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-active, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-focus, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-hover { background: var(--color-accent) !important; color: #fff; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-active.ui-datepicker-next-hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-active.ui-datepicker-prev-hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-focus.ui-datepicker-next-hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-focus.ui-datepicker-prev-hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-hover.ui-datepicker-next-hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-hover.ui-datepicker-prev-hover span::after { color: #fff; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar thead th { padding: 15px 0 0; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header { position: relative; border: none; background: inherit; padding: 0 15px 0 !important; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header::after { display: block; position: absolute; right: -15px; bottom: 0; left: -15px; border-bottom: 1px solid var(--color-border); content: ""; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-title { color: var(--color-text); font-weight: 600; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-title select { margin: 0; padding: 5px; min-height: 40px; height: 40px; line-height: normal; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-title select:first-of-type { margin-right: 20px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { left: -10px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover { left: -10px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { right: -10px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover { right: -10px; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev, #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { top: 0; bottom: 0; margin: auto 0; border: none; border-radius: 50%; background: none; cursor: pointer; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span, #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span { margin-left: -5px; background-image: none; background-position: initial; color: transparent; font-size: 0.1px; line-height: normal; text-indent: initial; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; color: var(--color-text); font-weight: 900; font-family: var(--font-fa); content: "\f053"; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover { outline: none; border: none; background: none; } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover span::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover span::after { color: var(--color-accent); } #ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span::after { content: "\f054"; } .bnuPagination { display: flex; justify-content: center; align-items: center; width: 100%; } .bnuPagination__list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .bnuPagination__ellipsis { display: flex; align-items: center; justify-content: center; min-width: 36px; height: var(--height, 48px); color: var(--color-text-light); font-size: 14px; line-height: 1; } .bnuPagination__button { --height: 40px; min-width: var(--height); padding-inline: 12px; font-size: 14px; } @media (max-width: 768px) { .bnuPagination__button { --height: 36px; padding-inline: 10px; font-size: 13px; } } @media (max-width: 480px) { .bnuPagination__button { --height: 34px; padding-inline: 8px; font-size: 12px; } } .bnuPagination__button.bnuButton:has(i:only-child) { padding: 0; width: var(--button-height); } .bnuPagination__button.bnuButton:has(i:only-child) > i { font-size: 14px; } @media (max-width: 768px) { .bnuPagination__button.bnuButton:has(i:only-child) > i { font-size: 12px; } } @media (max-width: 480px) { .bnuPagination__button.bnuButton:has(i:only-child) > i { font-size: 11px; } } .bnuPagination__button--active { cursor: default; pointer-events: none; } .bnuPagination__button--active:hover, .bnuPagination__button--active:active, .bnuPagination__button--active:focus-visible { background-color: transparent; color: var(--color-text); border-color: var(--color-text); } .bnuPagination__button--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } @media (max-width: 768px) { .bnuPagination__item--ellipsis .bnuPagination__ellipsis { min-width: 30px; height: 36px; font-size: 13px; } } @media (max-width: 480px) { .bnuPagination__item--ellipsis .bnuPagination__ellipsis { min-width: 26px; height: 34px; font-size: 11px; } } .bnuHeader { position: sticky; top: var(--promo-height, 0px); left: 0; z-index: 99; transition: transform 0.2s ease; will-change: transform; background-color: white; width: 100%; } .isScrolledDown .bnuHeader { transform: translateY(-100%); } @media (max-width: 1024px) { .isScrolledDown .bnuHeader { transform: translateY(0); } } .bnuHeader__main { display: flex; column-gap: var(--layout-column-gap); align-items: center; padding-inline: var(--layout-padding); height: var(--header-main-height); } @media (max-width: 1024px) { .bnuHeader__main { position: relative; column-gap: var(--layout-spacing); padding-block-end: 48px; } } .bnuHeader__search, .bnuQASearch { position: relative; flex-grow: 1; } @media (max-width: 1024px) { .bnuHeader__search, .bnuQASearch { position: absolute; bottom: 0; left: 0; order: 999; width: 100%; } } .bnuHeader__search .bnuInputWrap, .bnuQASearch .bnuInputWrap { width: 100%; } .bnuHeader__search .bnuInputWrap:has(.bnuInput[type=search]):before, .bnuQASearch .bnuInputWrap:has(.bnuInput[type=search]):before { display: none; content: none; } .bnuHeader__search .bnuInput[type=search], .bnuQASearch .bnuInput[type=search] { --outline: 2px; --height: 48px; padding-inline-start: 16px; padding-inline-end: 48px; } @media (max-width: 1024px) { .bnuHeader__search .bnuInput[type=search], .bnuQASearch .bnuInput[type=search] { --outline: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0; padding-inline-start: 60px; } } .bnuHeader__search .bnuInputWrap > .bnuButton, .bnuQASearch .bnuInputWrap > .bnuButton { --button-height: 38px; position: absolute; top: 4px; right: 4px; border-radius: var(--border-radius-small); } .bnuHeader__actions { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); margin-left: auto; } @media (max-width: 768px) { .bnuHeader__actions { column-gap: 0; } } @media (max-width: 768px) { .bnuHeader__actions .bnuButton { --button-height: 36px; } } .bnuHeader__account > ul { margin: 0; padding: 0; list-style: none; } .bnuHeader__account > ul > li { position: relative; } .bnuHeader__account .loggedin .bnuHeader__accountButton { pointer-events: none; touch-action: none; cursor: default; } .bnuHeader__account .loggedin:hover .bnuHeader__accountButton, .bnuHeader__account .loggedin:focus-within .bnuHeader__accountButton { background-color: color-mix(in oklch, var(--button-color), white var(--outline-bg)); } .bnuHeader__account .bnuSubMenu { right: 0; left: auto; } .bnuHeader__accountUser { margin-bottom: calc(var(--layout-spacing) * 0.5); font-weight: 600; } .bnuHeader__accountUser a.bnuMenuButton:hover { background-color: transparent; } .bnuHeader__accountBubble { display: flex; position: absolute; top: 2px; right: 2px; justify-content: center; align-items: center; border-radius: 50%; width: 16px; height: 16px; color: #fff; font-weight: 500; font-size: 10px; line-height: 1; pointer-events: none; } .bnuHeader__accountBubble--success { background-color: var(--color-success, #58a618); } .bnuHeader__accountBubble--warning { background-color: var(--color-warning, #e6a700); } .bnuHeader__nav { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--layout-column-gap); align-items: flex-start; border-bottom: 1px solid var(--color-border); padding-inline: var(--layout-padding); width: 100%; height: var(--header-nav-height); } @media (max-width: 1024px) { .bnuHeader__nav { display: none; } } .bnuHeader__nav > .bnuProductNav { grid-column: span 1; } .bnuHeader__nav > .bnuMainNav { grid-column: span 3; } @media (max-width: 768px) { .bnuHeader__cart { margin-inline-end: calc(var(--layout-padding) * -0.5); } } .bnuHeader__main > .bnuMobileMenuToggle { display: none; } @media (max-width: 1024px) { .bnuHeader__main > .bnuMobileMenuToggle { --button-height: 48px; display: flex; position: absolute; bottom: 0; left: 0; z-index: 2; border-radius: 0; } } .bnuHeaderSearch__mobileBar { display: none; } .bnuHeaderSearch__mobileTitle { font-size: 18px; line-height: 24px; } .bnuHeaderSearch__close { position: absolute; top: 0; right: 0; z-index: 2; cursor: pointer; border: none; background: transparent; width: 48px; height: 48px; } @media (max-width: 1024px) { html.bnuHeaderSearchActive { overflow: hidden; } html.bnuHeaderSearchActive .bnuHeaderSearch__close { display: block; } } @media (max-width: 1024px) { .bnuHeader__search--active { z-index: 99; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; padding-top: 48px; background-color: #fff; } .bnuHeader__search--active .bnuHeaderSearch__mobileBar { display: flex; position: absolute; top: 0; left: 0; align-items: center; width: 100%; height: 48px; padding: 12px 48px 12px 16px; white-space: nowrap; } .bnuHeader__search--active form { position: absolute; width: 100%; border-bottom: 1px solid var(--color-border); } } .bnuHeader__search .twitter-typeahead, .bnuQASearch .twitter-typeahead { display: block !important; width: 100%; } .bnuHeader__search .tt-menu, .bnuQASearch .tt-menu { display: none; position: absolute; left: 0; top: calc(100% + 1px); z-index: 100; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: #fff; padding: 0; width: 100%; } @media (max-width: 1024px) { .bnuHeader__search .tt-menu, .bnuQASearch .tt-menu { top: 49px; box-shadow: none; border-radius: 0; max-height: calc(100vh - 98px); overflow-y: auto; } } .bnuHeader__search .tt-menu.tt-open, .bnuQASearch .tt-menu.tt-open { display: block; } .bnuHeader__search .bnuHeaderSearch__resultsHeading, .bnuQASearch .bnuHeaderSearch__resultsHeading { margin: 0; padding: var(--layout-spacing) var(--layout-spacing) calc(var(--layout-spacing) * 0.5); } .bnuHeader__search .bnuHeaderSearch__resultsHeading h4, .bnuQASearch .bnuHeaderSearch__resultsHeading h4 { margin: 0; padding-bottom: calc(var(--layout-spacing) * 0.5); border-bottom: 1px solid var(--color-border); } .bnuHeader__search .tt-dataset:not(:first-child):not(.tt-empty), .bnuQASearch .tt-dataset:not(:first-child):not(.tt-empty) { border-top: 1px solid var(--color-border); } .bnuHeader__search .noResults, .bnuQASearch .noResults, .bnuHeader__search .loading, .bnuQASearch .loading { padding: var(--layout-spacing); color: var(--color-text-light); } .bnuHeader__search .tt-suggestion, .bnuQASearch .tt-suggestion { margin: 0; padding: 0; } .bnuHeader__search .searchResult, .bnuQASearch .searchResult { display: flex; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); cursor: pointer; padding: calc(var(--layout-spacing) * 0.75) var(--layout-spacing); width: 100%; color: var(--color-text); text-decoration: none; } .bnuHeader__search .tt-suggestion.tt-cursor .searchResult, .bnuQASearch .tt-suggestion.tt-cursor .searchResult, .bnuHeader__search .searchResult:hover, .bnuQASearch .searchResult:hover { background-color: var(--color-bg); } .bnuHeader__search .searchResult__text, .bnuQASearch .searchResult__text { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .bnuHeader__search .searchResult__text .tt-highlight, .bnuQASearch .searchResult__text .tt-highlight { color: var(--color-accent); font-weight: inherit; } .bnuHeader__search .searchResult__cateogry, .bnuQASearch .searchResult__cateogry { flex: 0 0 auto; padding-inline-start: var(--layout-spacing); color: var(--color-text-light); font-size: 13px; white-space: nowrap; } .bnuHeader__search .searchProduct, .bnuQASearch .searchProduct { display: flex; align-items: flex-start; column-gap: var(--layout-spacing); cursor: pointer; padding: var(--layout-spacing); color: var(--color-text); text-decoration: none; } .bnuHeader__search .tt-suggestion.tt-cursor .searchProduct, .bnuQASearch .tt-suggestion.tt-cursor .searchProduct, .bnuHeader__search .searchProduct:hover, .bnuQASearch .searchProduct:hover { background-color: var(--color-bg); } .bnuHeader__search .searchProduct__image, .bnuQASearch .searchProduct__image { flex: 0 0 auto; width: 48px; } .bnuHeader__search .searchProduct__image img, .bnuQASearch .searchProduct__image img { display: block; width: 100%; height: auto; } .bnuHeader__search .searchProduct__body, .bnuQASearch .searchProduct__body { display: flex; flex: 1 1 auto; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.5); min-width: 0; font-size: 15px; } .bnuHeader__search .searchProduct__name, .bnuQASearch .searchProduct__name { margin: 0; } .bnuHeader__search .searchProduct__meta, .bnuQASearch .searchProduct__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); row-gap: calc(var(--layout-spacing) * 0.5); min-width: 0; width: 100%; } .bnuHeader__search .searchProduct__badges, .bnuQASearch .searchProduct__badges { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .bnuHeader__search .searchProduct__badges .bnuProductBadge, .bnuQASearch .searchProduct__badges .bnuProductBadge, .bnuHeader__search .searchProduct__badges .benuBadge, .bnuQASearch .searchProduct__badges .benuBadge { flex: 0 1 auto; max-width: 100%; height: 16px; padding-inline: 0.35em; font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .bnuHeader__search .searchProduct__price, .bnuQASearch .searchProduct__price { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: calc(var(--layout-spacing) * 0.5); row-gap: calc(var(--layout-spacing) * 0.25); margin-inline-start: auto; white-space: nowrap; } .bnuHeader__search .searchProduct__priceOld, .bnuQASearch .searchProduct__priceOld { color: var(--color-text-light); text-decoration: line-through; } .bnuHeader__search .searchProduct__priceLc, .bnuQASearch .searchProduct__priceLc { display: inline-flex; align-items: center; column-gap: 4px; } .bnuHeader__search .searchProduct__priceRegular--lc, .bnuQASearch .searchProduct__priceRegular--lc { color: var(--color-success); } .bnuHeader__search .searchProduct__drugProduct, .bnuQASearch .searchProduct__drugProduct { flex: 0 0 auto; margin-inline-start: auto; color: var(--color-text-light); white-space: nowrap; } .bnuFooter { position: relative; overflow-x: clip; padding-block-end: calc(var(--layout-spacing) * 2.5); background: linear-gradient( 180deg, #ffffff 0%, var(--color-bg) 100%); } @media (max-width: 768px) { .bnuFooter { padding-block-end: calc(var(--layout-spacing) * 3); } } .bnuFooter > hr { margin-block: calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bnuFooter > hr { margin-block: calc(var(--layout-spacing) * 3); } } .bnuFooter__main { position: relative; padding-block: calc(var(--layout-spacing) * 8) calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bnuFooter__main { padding-block: calc(var(--layout-spacing) * 8) 0; } } @media (max-width: 768px) { .bnuFooter__main + hr { display: none; } } .bnuFooter__lines { position: absolute; top: 0; left: 0; overflow: visible; width: 100%; max-width: none; height: 35px; pointer-events: none; } .bnuFooter__top { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuFooter__top { flex-direction: column; } } .bnuFooter__logoWrap { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2.5); width: 33.333%; min-width: 0; } @media (max-width: 768px) { .bnuFooter__logoWrap { row-gap: calc(var(--layout-spacing) * 3); width: 100%; } } .bnuFooter__logoWrap .bnuLogo { margin-inline-end: 0; } .bnuFooter__menus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); flex: 1; min-width: 0; } @media (max-width: 768px) { .bnuFooter__menus { grid-template-columns: minmax(0, 1fr); width: 100%; } } .bnuFooter__contacts { display: flex; flex-wrap: wrap; column-gap: calc(var(--layout-spacing) * 1.5); row-gap: calc(var(--layout-spacing) * 0.75); margin: 0; padding: 0; list-style: none; } .bnuFooter__contacts a { position: relative; display: inline-block; padding-inline-start: 24px; color: var(--color-text); font-weight: 500; line-height: 24px; text-decoration: none; white-space: nowrap; } .bnuFooter__contacts a span { display: block; margin-block-start: 4px; color: var(--color-text-light); font-size: 12px; line-height: 1; } .bnuFooter__contacts a i { position: absolute; top: 0; left: 0; width: 20px; color: var(--color-text); font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; } .bnuFooter__contactsHelp { width: 100%; margin: 0; color: var(--color-text); font-weight: 500; } .bnuFooter__loyaltyCards { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.75); margin-block-start: calc(var(--layout-spacing) * -0.75); } .bnuFooter__loyaltyCard { display: flex; column-gap: calc(var(--layout-spacing) * 0.75); align-items: center; font-weight: 500; line-height: 24px; text-decoration: none; } .bnuFooter__loyaltyCard img { display: block; border-radius: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 25px; height: 16px; } .bnuFooter__loyaltyCard--benu { color: var(--color-accent); } .bnuFooter__loyaltyCard--rimi { color: #ed1c24; } .bnuFooter__appIcons { display: flex; gap: calc(var(--layout-spacing) * 0.75); } .bnuFooter__appIcons img { display: block; width: 108px; height: 32px; } .bnuFooter__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 2.5); align-items: end; } .bnuFooter__body:not(:has(.bnuFooter__social)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 1200px) { .bnuFooter__body { grid-template-columns: minmax(0, 1fr) auto; } .bnuFooter__body:not(:has(.bnuFooter__social)) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .bnuFooter__body { grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: stretch; } } .bnuFooter__middlePrimary { grid-column: 1; grid-row: 1; min-width: 0; } @media (max-width: 1200px) { .bnuFooter__middlePrimary { grid-column: 1; } } @media (max-width: 768px) { .bnuFooter__middlePrimary { grid-column: 1; grid-row: 1; } } .bnuFooter__disclaimer { display: flex; grid-column: 2; grid-row: 1; align-items: flex-end; min-width: 0; } @media (max-width: 1200px) { .bnuFooter__disclaimer { grid-column: 1/-1; grid-row: 2; } } @media (max-width: 768px) { .bnuFooter__disclaimer { grid-column: 1; grid-row: 2; align-items: center; border-block-start: 1px solid var(--color-border); margin-block-start: calc(var(--layout-spacing) * 3); padding-block-start: calc(var(--layout-spacing) * 3); } } .bnuFooter__captchaDisclaimer { display: flex; column-gap: calc(var(--layout-spacing) * 0.75); align-items: center; } .bnuFooter__captchaDisclaimer span { margin: 0; color: var(--color-text-light); font-weight: 400; font-size: 13px; } @media (max-width: 768px) { .bnuFooter__captchaDisclaimer span { font-size: 12px; } } .bnuFooter__captchaDisclaimer span a { color: var(--color-text-light); text-decoration: underline; } .bnuFooter__captchaDisclaimer img { width: 20px; height: auto; } .bnuFooter__social { grid-column: 3; grid-row: 1; text-align: right; } @media (max-width: 1200px) { .bnuFooter__social { grid-column: 2; grid-row: 1; justify-self: end; } } @media (max-width: 768px) { .bnuFooter__social { grid-column: 1/-1; grid-row: 4; justify-self: stretch; width: 100%; border-block: 1px solid var(--color-border); margin-block: calc(var(--layout-spacing) * 3); padding-block: calc(var(--layout-spacing) * 3); text-align: center; } } .bnuFooter__social h3, .bnuFooter__social .h3 { display: block; margin: 0 0 calc(var(--layout-spacing) * 1.5); color: var(--color-text); font-weight: 500; font-size: 15px; line-height: 1.333; } @media (max-width: 768px) { .bnuFooter__social h3, .bnuFooter__social .h3 { display: none; } } .bnuFooter__social ul { display: flex; gap: calc(var(--layout-spacing) * 1.5); justify-content: flex-end; margin: 0; padding: 0; list-style: none; } @media (max-width: 768px) { .bnuFooter__social ul { justify-content: center; } } .bnuFooter__socialLink.bnuButton { --button-height: 40px; border-radius: 50%; } @media (max-width: 768px) { .bnuFooter__socialLink.bnuButton { --button-height: 32px; } } .bnuFooter__socialLink.bnuButton > i { font-size: 16px; } @media (max-width: 768px) { .bnuFooter__socialLink.bnuButton > i { font-size: 14px; } } .bnuFooter__extras { display: flex; grid-column: 1/-1; grid-row: 2; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); justify-content: space-between; align-items: flex-start; border-block-start: 1px solid var(--color-border); padding-block-start: calc(var(--layout-spacing) * 2.5); } @media (max-width: 1200px) { .bnuFooter__extras { grid-row: 3; } } @media (max-width: 768px) { .bnuFooter__extras { grid-column: 1; grid-row: 3; flex-direction: column; margin-block-start: calc(var(--layout-spacing) * 3); padding-block-start: calc(var(--layout-spacing) * 3); } } .bnuFooter__extrasPrimary { flex: 1 1 50%; min-width: 0; } @media (max-width: 768px) { .bnuFooter__extrasPrimary { width: 100%; } } .bnuFooter__extrasSecondary { flex: 1 1 41.666%; min-width: 0; } @media (max-width: 768px) { .bnuFooter__extrasSecondary { width: 100%; } } .bnuFooter__extrasSecondary--narrow { flex-basis: 33.333%; } .bnuFooter__bottom { display: flex; grid-column: 1/-1; grid-row: 3; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); justify-content: space-between; align-items: center; padding-block-start: calc(var(--layout-spacing) * 2.5); } @media (max-width: 1200px) { .bnuFooter__bottom { grid-row: 4; } } @media (max-width: 768px) { .bnuFooter__bottom { grid-column: 1; grid-row: 5; flex-direction: column-reverse; align-items: stretch; padding-block-start: 0; } } .bnuFooter__info { color: var(--color-text-disabled); font-size: 13px; } @media (max-width: 768px) { .bnuFooter__info { font-size: 12px; } .bnuFooter__info span { display: block; } } @media (max-width: 768px) { .bnuFooter__bottomLogos { order: -1; } } .bnuFooterWidget { color: var(--color-text-light); font-size: 13px; line-height: 1.333; } .bnuFooterWidget h3, .bnuFooterWidget .h3 { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 calc(var(--layout-spacing) * 1.5); color: var(--color-text); font-weight: 500; font-size: 15px; line-height: 1.333; } .bnuFooterWidget ul { margin: 0; padding: 0; list-style: none; } .bnuFooterWidget ul li:not(:last-child) { margin-block-end: calc(var(--layout-spacing) * 0.75); } .bnuFooterWidget a { text-decoration: none; } .bnuFooterWidget table { display: block; border: none; table-layout: fixed; width: auto !important; height: auto !important; } .bnuFooterWidget table tbody { display: block; width: auto !important; height: auto !important; } .bnuFooterWidget table tr { display: flex; gap: calc(var(--layout-spacing) * 2); width: auto !important; height: auto !important; min-height: 0 !important; } @media (max-width: 768px) { .bnuFooterWidget table tr { gap: calc(var(--layout-spacing) * 1.5); } } .bnuFooterWidget table tr td, .bnuFooterWidget table tr th { flex: 1 1 0; min-width: 0; min-height: 0 !important; border: none; width: auto !important; height: auto !important; vertical-align: top; } .bnuFooterWidget--text, .bnuFooterWidget--certificates { font-size: 13px; } .bnuFooterWidget--text h3, .bnuFooterWidget--text .h3, .bnuFooterWidget--certificates h3, .bnuFooterWidget--certificates .h3 { margin: 0 0 calc(var(--layout-spacing) * 0.75); color: var(--color-text); font-size: 14px; } @media (max-width: 768px) { .bnuFooterWidget--text h3, .bnuFooterWidget--text .h3, .bnuFooterWidget--certificates h3, .bnuFooterWidget--certificates .h3 { margin-block-end: calc(var(--layout-spacing) * 0.5); font-size: 13px; } } .bnuFooterWidget--text p, .bnuFooterWidget--certificates p { margin: 0; color: var(--color-text-light); font-weight: 400; font-size: 0.866em; } @media (max-width: 768px) { .bnuFooterWidget--text p, .bnuFooterWidget--certificates p { font-size: 0.93em; } } .bnuFooterWidget--text a, .bnuFooterWidget--certificates a { color: var(--color-text-light); text-decoration: underline; } @media (max-width: 768px) { .bnuFooterWidget--menu { position: relative; margin-inline: calc(var(--layout-padding) * -1); margin-block-end: calc(var(--layout-spacing) * -3); } } .bnuFooterWidget--menu .bnuAccordion { row-gap: 0; } .bnuFooterWidget--menu .bnuAccordion__item { border-bottom: none; } .bnuFooterWidget--menu .bnuAccordion__summary { column-gap: 0; align-items: center; padding-block: 0; font-weight: 500; font-size: 15px; line-height: 1.333; color: var(--color-text); cursor: default; pointer-events: none; } @media (max-width: 768px) { .bnuFooterWidget--menu .bnuAccordion__summary { cursor: pointer; pointer-events: auto; border-block-end: 1px solid var(--color-border); padding: 14px var(--layout-padding); } } .bnuFooterWidget--menu .bnuAccordion__title { margin: 0; font: inherit; color: inherit; } .bnuFooterWidget--menu .bnuAccordion__chevron { display: none; } @media (max-width: 768px) { .bnuFooterWidget--menu .bnuAccordion__chevron { display: block; color: var(--color-text); } } .bnuFooterWidget--menu .bnuAccordion__content { padding: 0; margin-block-start: calc(var(--layout-spacing) * 1.5); } @media (max-width: 768px) { .bnuFooterWidget--menu .bnuAccordion__content { margin-block-start: 0; padding: calc(var(--layout-spacing) * 2) var(--layout-padding); } } .bnuFooterWidget--menu .bnuAccordion__item::details-content { content-visibility: visible; height: auto; } @media (max-width: 768px) { .bnuFooterWidget--menu .bnuAccordion__item:not([open])::details-content { content-visibility: hidden; height: 0; overflow: clip; } .bnuFooterWidget--menu .bnuAccordion__item[open]::details-content { content-visibility: visible; height: auto; } } .bnuFooterWidget--menu ul { margin: 0; padding: 0; list-style: none; } .bnuFooterWidget--menu ul li:not(:last-child) { margin-block-end: calc(var(--layout-spacing) * 0.75); } .bnuFooterWidget--menu a { color: var(--color-text); font-size: 14px; text-decoration: none; } .bnuFooterWidget--menu a:hover { text-decoration: underline; } @media (max-width: 768px) { .bnuFooter__menus .widget:last-child .bnuFooterWidget--menu { margin-block-end: calc(var(--layout-spacing) * 3); } } .bnuFooterWidget--newsletter .bnuFooterWidget__newsletterInputs { display: flex; gap: calc(var(--layout-spacing) * 0.75); align-items: center; } .bnuFooterWidget--newsletter .bnuFooterWidget__newsletterInputs .bnuInputWrap { flex: 1; min-width: 0; } .bnuFooterWidget--newsletter .bnuFooterWidget__newsletterInputs .bnuInput { --height: 40px; } .bnuFooterWidget--newsletter .bnuFooterWidget__newsletterInputs .bnuButton { --button-height: 40px; align-self: center; } .bnuFooterWidget--newsletter .privacyPolicy { display: none; margin-block-start: 10px; } .bnuFooterWidget--newsletter .privacyPolicy a { text-decoration: underline; } .bnuFooterWidget--newsletter .sendmsgsuccess { display: none; margin-block-start: calc(var(--layout-spacing) * 1.5); } .bnuFooterWidget--newsletter .sendmsgsuccess p { margin: 0; color: var(--color-accent); font-weight: 700; } .bnuFooterWidget--newsletter .sendmsgsuccess.active { display: block; } .bnuFooterWidget__certificatesLayout { display: flex; column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 1.5); justify-content: space-between; align-items: flex-start; } @media (max-width: 768px) { .bnuFooterWidget__certificatesLayout { flex-direction: column-reverse; } } .bnuFooterWidget__certificatesContent { flex: 1; min-width: 0; } .bnuFooterWidget__certificatesImages { display: flex; flex-shrink: 0; gap: calc(var(--layout-spacing) * 0.75); } .bnuFooterWidget__certificatesImages picture img { display: block; margin-inline-end: calc(var(--layout-spacing) * 0.75); width: 100%; max-width: 120px; height: auto; } @media (max-width: 768px) { .bnuFooterWidget__certificatesImages picture img { max-width: 96px; } } .bnuFooterWidget__certificatesImages picture.smallImage img { max-width: 108px; } .bnuFooterWidget__certificatesImages picture:last-child img { margin-inline-end: 0; } html.benu-eshop-lt .bnuFooterWidget--certificates .bnuFooterWidget__certificatesContent { flex: 1; } .bnuFooterWidget--logos { display: flex; column-gap: calc(var(--layout-spacing) * 2); align-items: center; } @media (max-width: 768px) { .bnuFooterWidget--logos { justify-content: center; } } .bnuFooterWidget--logos img { display: block; width: auto; max-height: 24px; } .bnuFooterWidget--eshops { display: flex; gap: calc(var(--layout-spacing) * 0.75); margin-block-start: calc(var(--layout-spacing) * 1.5); } .bnuFooterWidget--eshops img { width: 20px; height: auto; } @media (max-width: 768px) { .bnuFooterWidget .splitMobileFooterWidgets { flex-wrap: wrap; } .bnuFooterWidget .splitMobileFooterWidgets td.fullWidth { width: 100% !important; } } @media (max-width: 1024px) { .cart .bnuFooter { display: none; } } .bnuPageLayout { align-items: flex-start; margin-block: calc(var(--layout-spacing) * 2); margin-block-end: calc(var(--layout-spacing) * 6); } .bnuPageLayout:has(.bnuAside) { display: flex; position: relative; column-gap: var(--layout-column-gap); justify-content: space-between; align-items: flex-start; } .bnuPageLayout:has(.bnuAside) .bnuPageContent { width: min(100%, 808px); } @media (max-width: 768px) { .bnuPageLayout:has(.bnuAside) .bnuPageContent { width: 100%; } } .bnuPageLayout:has(.bnuAside) > .bnuUserProfile { flex: 1 1 100%; width: 100%; min-width: 0; } .bnuAside { position: sticky; top: calc(var(--promo-height) + var(--header-height)); flex-shrink: 0; transition: top 0.2s ease; padding-block-start: calc(var(--layout-spacing) * 2.5); width: 288px; } @media (max-width: 768px) { .bnuAside { display: none; } } .isScrolledDown .bnuAside { top: var(--promo-height); } * { box-sizing: border-box; } .bnuContainer { padding-inline: var(--layout-padding); } .bnuTopNav { position: relative; align-content: center; z-index: 2; border-bottom: 1px solid var(--color-border); padding-inline: var(--layout-padding); height: var(--header-top-height); font-weight: 500; } @media (max-width: 1024px) { .bnuTopNav { display: none; } } .bnuTopNav ul { margin: 0; padding: 0; list-style: none; } .bnuTopNav > ul { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); justify-content: flex-end; } .bnuTopNav > ul > li { position: relative; } .bnuTopNav > ul > li:has(ul):hover ul, .bnuTopNav > ul > li:has(ul):focus-within ul { visibility: visible; pointer-events: auto; } .bnuTopNav > ul > li:nth-last-child(-n+2) ul.bnuSubMenu { right: 0; } .bnuTopNav .bnuMenuButton.active { font-weight: 600; } .bnuProductNav { position: relative; z-index: 9; font-weight: 500; } .bnuProductNav ul { margin: 0; padding: 0; list-style: none; } .bnuProductNav.bnuProductNav--isHome .bnuProductNav__menu.bnuProductNav__menu--many:not(:hover) > li:nth-child(n+11) { display: none; } .bnuProductNav.bnuProductNav--isHome .bnuProductNav__menu.bnuProductNav__menu--many:not(:hover) > li:nth-child(10):after { display: block; margin: 0 auto; content: "\f107"; font-family: var(--font-fa); text-align: center; } .bnuProductNav__toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; outline: none; border: none; border-top-right-radius: var(--border-radius-input); border-top-left-radius: var(--border-radius-input); background-color: var(--color-text); padding-inline-start: 18px; padding-inline-end: 8px; width: 100%; height: 48px; pointer-events: auto; color: white; font-weight: 600; text-align: left; } .bnuProductNav__toggle[aria-disabled=true] { cursor: default; } .bnuProductNav__toggle[aria-disabled=true] > i { visibility: hidden; } .bnuProductNav__toggle[aria-expanded=true] > i { transform: rotate(180deg); } .bnuProductNav__toggle:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-accent), white 70%); } .bnuProductNav__menu { margin-top: -1px; outline: 1px solid var(--color-border); outline-offset: -1px; box-shadow: var(--box-shadow); border-bottom-right-radius: var(--border-radius-input); border-bottom-left-radius: var(--border-radius-input); background-color: white; } .bnuProductNav__menu[aria-hidden=true] { visibility: hidden; height: 0; } .bnuProductNav__menu:hover { outline: none; box-shadow: none; } .bnuProductNav__menu > li.bnuProductNav__menuSpacer { height: 6px; } .bnuProductNav__menu > li { display: block; border-left: 1px solid var(--color-border); width: calc(100% - 1px); } .bnuProductNav__menu > li a.bnuMenuButton { position: relative; column-gap: 12px; z-index: 2; padding-inline-end: 8px; min-height: 48px; } .bnuProductNav__menu > li:has(.bnuProductNav__subMenu:not(.bnuProductNav__subMenu--placeholder)) > a.bnuMenuButton { border-top-right-radius: var(--border-radius-input); border-bottom-right-radius: var(--border-radius-input); } .bnuProductNav__menu > li:has(.bnuProductNav__subMenu:not(.bnuProductNav__subMenu--placeholder)) > a.bnuMenuButton:after { flex-shrink: 0; margin-left: auto; width: 12px; content: "\f105"; text-align: center; } .bnuProductNav__menu > li:hover > a { position: relative; z-index: 99; } .bnuProductNav__menu > li:hover > ul.bnuProductNav__subMenu { display: flex; outline: 1px solid var(--color-border); box-shadow: var(--box-shadow); } .bnuProductNav__menu > li > .bnuProductNav__subMenu { display: none; position: absolute; top: calc(var(--layout-spacing) * 4); border-bottom-right-radius: var(--border-radius-input); border-bottom-left-radius: var(--border-radius-input); background-color: white; padding-inline-start: calc(100% + var(--layout-spacing) * 2); padding-inline-end: calc(var(--layout-spacing) * 1.5); padding-block: calc(var(--layout-spacing) * 1.5); width: calc(400% + var(--layout-spacing) * 6); height: max-content; min-height: calc(100% - var(--layout-spacing) * 4 - 1px); } .bnuProductNav__menu > li > .bnuProductNav__subMenu[aria-hidden=false] { display: flex; outline: 1px solid var(--color-border); box-shadow: var(--box-shadow); } .bnuProductNav__menu > li > .bnuProductNav__subMenu.bnuProductNav__subMenu--placeholder { padding: 0; width: calc(100% - 2px); } .bnuProductNav__menu > li > .bnuProductNav__subMenu a { text-decoration: none; } .bnuProductNav__menu > li > .bnuProductNav__subMenu a:hover { text-decoration: underline; } .bnuProductNav__menu > li > .bnuProductNav__subMenu .bnuSubMenu__columns > ul > li > a { font-weight: 600; } .bnuProductNav__subMenuToggle { position: absolute; position-area: center end; z-index: 0; z-index: 100; border: none; background: transparent; padding: 0; width: 24px; height: 24px; pointer-events: none; font-size: 14px; } .bnuProductNav__subMenu[data-lvl="1"] { flex-wrap: wrap; gap: var(--layout-column-gap); } .bnuProductNav__subMenu[data-lvl="2"] { font-size: 15px; } .bnuProductNav__subMenu[data-lvl="2"] > li { margin-block: 0.25em; } .bnuSubMenu__columns { flex: 1 1 0; min-width: 0; } .bnuSubMenu__columns > ul { columns: 4; gap: var(--layout-column-gap); } .bnuSubMenu__columns > ul > li { display: inline-block; margin-block-end: calc(var(--layout-spacing) * 2); width: 100%; } .bnuProductNav__subMenu[data-lvl="1"]:has(> li.bnuSubMenu__banners:not(:empty)) > li.bnuSubMenu__columns > ul { columns: 3; } .bnuProductNav__subMenu[data-lvl="1"] > li.bnuSubMenu__banners { display: flex; flex: 0 0 calc(25% - var(--layout-column-gap) * 0.75); flex-direction: column; gap: var(--layout-column-gap); } .bnuProductNav__subMenu[data-lvl="1"] > li.bnuSubMenu__banners:empty { display: none; } .bnuSubMenu__banner picture, .bnuSubMenu__banner img { display: block; border-radius: var(--border-radius); width: 100%; height: auto; } .bnuProductNav__subMenu[data-lvl="1"] > li.bnuSubMenu__logos { flex: 0 0 100%; border-block-start: 1px solid var(--color-border); padding-block-start: calc(var(--layout-spacing) * 1.5); } .bnuSubMenu__logosItems { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: var(--layout-spacing); } .bnuSubMenu__logo { display: flex; justify-content: center; align-items: center; transition: background-color 0.2s ease; border-radius: var(--border-radius-small); padding: var(--layout-spacing); } .bnuSubMenu__logo picture, .bnuSubMenu__logo img { display: block; width: 100%; height: auto; } .bnuSubMenu__logo img { aspect-ratio: 2; object-fit: contain; } a.bnuSubMenu__logo:hover { background-color: var(--color-bg); } .bnuSubMenu__logosText { margin-block: calc(var(--layout-spacing) * 1.5) 0; color: var(--color-text-light); font-size: 12px; } .bnuMainNav { position: relative; top: 4px; max-width: 100%; font-weight: 600; } .bnuMainNav > ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .bnuMainNav > ul > li > a.bnuMenuButton { white-space: nowrap; } .bnuMainNav > ul > li:hover > a.bnuMenuButton:not(.bnuMenuButton--accent) { background-color: var(--color-bg); } .bnuMainNav > ul > li.benuPlus { margin-left: auto; } .bnuMobileNav { position: relative; background-color: white; } .bnuMobileNav__title { display: flex; align-items: center; margin: 0; border-bottom: 1px solid var(--color-border); padding-inline: calc(var(--layout-spacing) * 2); height: calc(var(--layout-spacing) * 6); font-weight: 500; font-size: 18px; } .bnuMobileNav__scroll { height: calc(100dvh - 120px); padding-block-end: calc(var(--layout-spacing) * 6); overflow-y: auto; } .bnuMobileNav__list { margin: 0; padding: 0; list-style: none; } .bnuMobileNav__item { display: block; border-bottom: 1px solid var(--color-border); } .bnuMobileNav__link { display: flex; column-gap: var(--layout-spacing); align-items: center; transition: background-color 0.2s ease; padding-inline: calc(var(--layout-spacing) * 2); padding-block: calc(var(--layout-spacing) * 1.5); color: var(--color-text); text-decoration: none; } .bnuMobileNav__link:hover { background-color: var(--color-bg); } .bnuMobileNav__link > i { flex-shrink: 0; width: 24px; font-size: 16px; text-align: center; } .bnuMobileNav__link--parent:after { margin-inline-start: auto; content: "\f105"; font-weight: 400; font-size: 16px; line-height: 1; font-family: var(--font-fa); } .bnuMobileNav__link--bold { font-weight: 600; } .bnuMobileNav__panel { position: absolute; top: 0; left: 0; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1); background-color: white; width: 100%; } .bnuMobileNav__panel[data-lvl="2"] { z-index: 2; } .bnuMobileNav__panel[data-lvl="3"] { z-index: 3; } .bnuMobileNav__panel--active { transform: translateX(0); } .bnuMobileNav__back { display: flex; column-gap: var(--layout-spacing); align-items: center; cursor: pointer; border: none; border-bottom: 1px solid var(--color-border); background-color: white; padding-inline: calc(var(--layout-spacing) * 2); width: 100%; height: calc(var(--layout-spacing) * 6); color: var(--color-text); font-weight: 500; font-size: 18px; font-family: inherit; text-align: start; } .bnuMobileNav__back:before { content: "\f104"; font-weight: 400; font-size: 16px; line-height: 1; font-family: var(--font-fa); } .bnuMobileNav__logos { display: none; background-color: var(--color-bg); padding-block: calc(var(--layout-spacing) * 2); } .bnuMobileNav__panel--active .bnuMobileNav__logos { display: block; } .bnuMobileNav__logosTitle { margin: 0; margin-block-end: var(--layout-spacing); padding-inline: calc(var(--layout-spacing) * 2); font-weight: 500; } .bnuMobileNav__logosItems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background-color: var(--color-border); padding: 0; list-style: none; } .bnuMobileNav__logosItems > li { background-color: white; } .bnuMobileNav__logosItems a, .bnuMobileNav__logosItems span { display: flex; justify-content: center; align-items: center; padding-block: var(--layout-spacing); height: 96px; } .bnuMobileNav__logosItems img { width: 128px; max-height: 72px; object-fit: contain; } .bnuMobileNav__logosText { margin: 0; padding: var(--layout-spacing) calc(var(--layout-spacing) * 2) 0; font-size: 13px; } .bnuMobileNav__footer { background-color: var(--color-bg); } .bnuMobileNav__footerMenu { margin: 0; padding: calc(var(--layout-spacing) * 2) 0; list-style: none; } .bnuMobileNav__footerMenu a { display: flex; column-gap: var(--layout-spacing); align-items: center; padding-inline: calc(var(--layout-spacing) * 2); padding-block: calc(var(--layout-spacing) * 1.5); color: var(--color-text); text-decoration: none; } .bnuMobileNav__footerMenu i { flex-shrink: 0; width: 24px; font-size: 16px; text-align: center; } .bnuMobileNav__social { display: flex; justify-content: center; gap: var(--layout-spacing); margin: 0; border-top: 1px solid var(--color-border); padding: calc(var(--layout-spacing) * 1.5) 0; list-style: none; } .bnuMobileNav__social a { display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: white; width: 40px; height: 40px; color: var(--color-text); text-decoration: none; } .bnuMobileNav--simple .bnuMobileNav__link--toggle { cursor: pointer; border: none; background-color: transparent; width: 100%; font: inherit; text-align: start; } .bnuMobileNav--simple .bnuMobileNav__link--toggle:after { margin-inline-start: auto; transition: transform 0.2s ease; content: "\f107"; font-weight: 400; font-size: 16px; line-height: 1; font-family: var(--font-fa); } .bnuMobileNav--simple .bnuMobileNav__link--toggle[aria-expanded=true]:after { transform: rotate(180deg); } .bnuMobileNav--simple .bnuMobileNav__subList { display: none; margin: 0; padding: 0 0 calc(var(--layout-spacing) * 1.5); list-style: none; } .bnuMobileNav--simple .bnuMobileNav__item--open > .bnuMobileNav__subList { display: block; } .bnuMobileNav--simple .bnuMobileNav__link--child { padding-block: calc(var(--layout-spacing) * 0.75); font-size: 14px; } .bnuMobileNav--simple .bnuMobileNav__subList .bnuMobileNav__item { border-bottom: none; } .bnuMobileMenu { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; transform: translate3d(-100%, 0, 0); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1); z-index: 1099; background-color: #fff; width: 100%; height: 100dvh; max-height: 100dvh; overflow: hidden; box-shadow: var(--box-shadow); pointer-events: none; } @media (max-width: 1024px) { .bnuMobileMenu { display: flex; flex-direction: column; } } .bnuMobileMenu__header { display: flex; position: relative; flex-shrink: 0; align-items: stretch; border-bottom: 1px solid var(--color-border); padding-inline-start: 48px; } .bnuMobileMenu__header .bnuMobileMenuToggle { display: flex; position: absolute; top: 0; bottom: auto; left: 0; z-index: 1; border-radius: 0; --height: 48px; } .bnuMobileMenu__tabs { display: flex; flex: 1; margin: 0; padding: 0; list-style: none; } .bnuMobileMenu__tabs li { flex: 1; text-align: center; } .bnuMobileMenu__tabs a { display: block; transition: color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; color: var(--color-text); font-size: 16px; line-height: 48px; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 0 var(--color-accent); } .bnuMobileMenu__tabs a.inactive { color: var(--color-text-light); box-shadow: inset 0 0 0 0 var(--color-accent); } .bnuMobileMenu__content { flex: 1 1 auto; min-height: 0; overflow: hidden; } .bnuMobileMenu__panel { height: 100%; overflow: hidden; } @media (max-width: 1024px) { body.mobileMenuOpened { overflow: hidden; } } @media (max-width: 1024px) { body.mobileMenuOpened .bnuHeader { top: 0; transform: none; will-change: auto; z-index: 1099; } } body.mobileMenuOpened .bnuHeader__main > .bnuMobileMenuToggle { visibility: hidden; pointer-events: none; } .mobileMenuOpened .bnuMobileMenu { pointer-events: auto; transform: translate3d(0, 0, 0); } @supports (-webkit-touch-callout: none) { .bnuMobileNav__panel { transition: none !important; } .bnuMobileMenu { transition: none !important; } } nav li:has(.bnuSubMenu) { position: relative; } nav li:has(.bnuSubMenu):hover .bnuSubMenu, nav li:has(.bnuSubMenu):focus-within .bnuSubMenu { visibility: visible; opacity: 1; pointer-events: auto; } nav li:has(.bnuSubMenu) .bnuSubMenu { position: absolute; top: 100%; visibility: hidden; visibility: hidden; opacity: 0; z-index: 2; transition: opacity 0.2s ease, visibility 0.2s ease; margin: 0; box-shadow: var(--box-shadow); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: white; padding: 0; padding-block: calc(var(--layout-spacing) * 0.5); width: max-content; max-width: 240px; pointer-events: none; pointer-events: none; font-weight: 500; list-style: none; } nav li:has(.bnuSubMenu--brands) { position: initial; } nav li:has(.bnuSubMenu--brands) .bnuSubMenu.bnuSubMenu--brands { display: grid; right: 0; grid-template-columns: repeat(6, 1fr); gap: var(--layout-spacing); z-index: 9; padding: calc(var(--layout-spacing) * 1.5); width: calc(133.3333333333% + var(--layout-spacing) * 1 / 3); max-width: initial; } .bnuSubMenu.bnuSubMenu--brands a { display: flex; justify-content: center; align-items: center; transition: background-color 0.2s ease; border-radius: var(--border-radius-small); padding: calc(var(--layout-spacing) * 2); } .bnuSubMenu.bnuSubMenu--brands a:hover { background-color: var(--color-bg); } .bnuSubMenu.bnuSubMenu--brands img { aspect-ratio: 2; width: 100%; height: auto; object-fit: contain; } .bnuSliderBanner__text--blue, .bnuPromoBarSlider__text--blue, .sliderBanner span.blue { color: var(--color-text); } .bnuSliderBanner__text--green, .bnuPromoBarSlider__text--green, .sliderBanner span.green { color: var(--color-accent); } .bnuSliderBanner__text--lightgreen, .bnuPromoBarSlider__text--lightgreen, .sliderBanner span.lightgreen { color: #92d400; } .bnuSliderBanner__text--black, .bnuPromoBarSlider__text--black, .sliderBanner span.black { color: #000; } .bnuSliderBanner__text--pink, .bnuPromoBarSlider__text--pink, .sliderBanner span.pink { color: #f17fb2; } .bnuSliderBanner__text--darkpink, .bnuPromoBarSlider__text--darkpink, .sliderBanner span.darkpink { color: var(--color-promo); } .bnuSliderBanner__text--white, .bnuPromoBarSlider__text--white, .sliderBanner span.white { color: #fff; } .bnuSliderBanner__item--bg-blue, .bnuPromoBarSlider--bg-blue, .sliderBanner-wBg.bg--blue, .sliderBannerWrap.bg--blue { background-color: var(--color-text); } .bnuSliderBanner__item--bg-green, .bnuPromoBarSlider--bg-green, .sliderBanner-wBg.bg--green, .sliderBannerWrap.bg--green { background-color: var(--color-accent); } .bnuSliderBanner__item--bg-lightgreen, .bnuPromoBarSlider--bg-lightgreen, .sliderBanner-wBg.bg--lightgreen, .sliderBannerWrap.bg--lightgreen { background-color: #92d400; } .bnuSliderBanner__item--bg-black, .bnuPromoBarSlider--bg-black, .sliderBanner-wBg.bg--black, .sliderBannerWrap.bg--black { background-color: #212121; } .bnuSliderBanner__item--bg-pink, .bnuPromoBarSlider--bg-pink, .sliderBanner-wBg.bg--pink, .sliderBannerWrap.bg--pink { background-color: #f17fb2; } .bnuSliderBanner__item--bg-darkpink, .bnuPromoBarSlider--bg-darkpink, .sliderBanner-wBg.bg--darkpink, .sliderBannerWrap.bg--darkpink { background-color: var(--color-promo); } .bnuPromoBarContainer { display: flex; flex-direction: column; position: sticky; top: 0; left: 0; right: 0; z-index: 100; } .bnuPromoBar { --color: var(--color-promo); position: sticky; top: 0; left: 0; align-content: center; z-index: 101; background-color: var(--color); width: 100%; height: var(--promo-height); overflow: hidden; color: white; text-align: center; white-space: nowrap; } .bnuPromoBarContainer .bnuPromoBar { position: relative; top: auto; height: calc(var(--layout-spacing) * 3); flex-shrink: 0; } .bnuPromoBarSliderWrap { position: relative; flex-shrink: 0; width: 100%; min-height: 100px; background-color: #fff; overflow: hidden; } .bnuPromoBarSliderWrap > .bnuPromoBar__close { z-index: 2; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); color: var(--color-text); transition: background-color 0.2s ease; } .bnuPromoBarSliderWrap > .bnuPromoBar__close:hover { background-color: #fff; } .bnuPromoBar__message { display: inline-block; margin: 0; font-weight: 600; font-size: 14px; line-height: 1.2; text-align: center; } @media (max-width: 768px) { .bnuPromoBar__message { animation: bnuMarquee 8s linear infinite; padding-left: 100%; font-size: 12px; } } .bnuPromoBar__close { position: absolute; top: 6px; right: 6px; cursor: pointer; border: none; background-color: var(--color); padding: 0; width: 24px; height: 24px; color: white; } @media (max-width: 768px) { .bnuPromoBar__close { top: 0; right: 0; } } .bnuPromoBarSlider { position: relative; z-index: 1; width: 100%; min-height: 100px; } .bnuPromoBarSlider__track, .sliderBannerWrap .sliderBanner, ul.sliderBanner.sliderBanner--top, ul.sliderBanner.sliderBanner--bottom, ul.bind-sliderBanner--top, ul.bind-sliderBanner--bottom { list-style: none; display: flex; flex-direction: row; margin: 0; padding: 0; } .bnuPromoBarSlider__slide, .sliderBannerSlide { flex-shrink: 0; } .bnuPromoBarSlider__track img, .sliderBannerWrap .sliderBanner img, ul.sliderBanner img { display: block; max-height: 100px; width: auto; } .bnuPromoBarSlider__slide a, .sliderBannerSlide a { display: block; } .bnuPromoBarSlider__text, .sliderBanner span { white-space: pre; } .bnuPromoBarSlider__item--withImage, .sliderBanner.sliderBanner-wImg { position: relative; display: inline-block; } .bnuPromoBarSlider__item--withImage img, .sliderBanner.sliderBanner-wImg img { display: block; } .bnuPromoBarSlider__item--withImage .bnuPromoBarSlider__text, .bnuPromoBarSlider__item--withImage span, .sliderBanner.sliderBanner-wImg .bnuPromoBarSlider__text, .sliderBanner.sliderBanner-wImg span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .sliderBannerWrap { position: relative; z-index: 999; width: 100%; } .sliderBannerWrap .bnCloseButton { position: absolute; top: 0; right: 0; z-index: 999; } .sliderBannerWrap.sliderBannerWrap--bottom, .bnuPromoBarSlider--bottom { position: fixed; bottom: 0; z-index: 1001; } .bnuPromoBarSliderWrap .bnuPromoBarSlider--top, .bnuPromoBarSlider--top { min-height: 100px; } .sliderBannerWrap.sliderBannerWrap--top { min-height: 100px; } @media (max-width: 768px) { .sliderBannerWrap.sliderBannerWrap--top { display: none; } } .sliderBannerWrap.text-w-bg, .bnuPromoBarSlider--textWithBg { padding-block: var(--layout-spacing); } .sliderBannerWrap.text-w-bg .bnCloseButton, .bnuPromoBarSlider--textWithBg .bnCloseButton { width: 30px; height: 30px; font-size: 18px; line-height: 30px; top: calc(var(--layout-spacing) * 0.5); right: calc(var(--layout-spacing) * 0.5); } .sliderBanner-wBg { padding-block: calc(var(--layout-spacing) * 0.333); } .bnuPromoBarSliderWrap .infiniteslide_wrap { width: 100%; overflow: hidden; } @keyframes bnuMarquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } .bnuPageHeader { margin-block-end: calc(var(--layout-spacing) * 3); } .chainWrap { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 3); margin-block-end: calc(var(--layout-spacing) * 3); } .bnuSection--onlyMobile { display: none; } @media (max-width: 1024px) { .bnuSection--onlyMobile { display: block; } } .bnChainWrap > .chainWrap, .chainWrap--noMarginEnd { margin-block-end: 0; } html.home .chainWrap { row-gap: calc(var(--layout-spacing) * 6); margin-block-end: calc(var(--layout-spacing) * 3); } .chainWrap .bnuPageSection { margin-block: 0; } .bnuPageSection { margin-block: calc(var(--layout-spacing) * 8); margin-block-start: calc(var(--layout-spacing) * 4); } .bnuPageSection > h2 { margin-block-end: calc(var(--layout-spacing) * 2); } @media (max-width: 1024px) { .bnuPageSection:has(.bnuPageSection__header > .bnuButton) { position: relative; padding-block-end: calc(var(--layout-spacing) * 8); } } .bnuPageSection.bnuPageSection--bg { border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: clamp(var(--layout-spacing) * 3, 6%, var(--layout-spacing) * 6); } .bnuPageSection__header { display: flex; column-gap: var(--layout-column-gap); justify-content: space-between; align-items: center; margin-block-end: calc(var(--layout-spacing) * 2); } @media (max-width: 1024px) { .bnuPageSection__header { justify-content: flex-end; } } .bnuPageSection__header:not(:has(> h2)) { justify-content: flex-end; } .bnuPageSection__header > h2 { flex-grow: 1; margin: 0; } .bnuPageSection__header > .bnuButton { flex-shrink: 0; } @media (max-width: 1024px) { .bnuPageSection__header > .bnuButton { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } } .bnuCardSection, .bnuNewsletterSection { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: center; } @media (max-width: 768px) { .bnuCardSection, .bnuNewsletterSection { flex-direction: column; align-items: flex-start; } } .bnuCardSection > div, .bnuNewsletterSection > div { width: 50%; } @media (max-width: 768px) { .bnuCardSection > div, .bnuNewsletterSection > div { width: 100%; } } .bnuCardSection h2, .bnuNewsletterSection h2 { margin: 0; margin-block-end: var(--layout-spacing); } .bnuCardSection img, .bnuNewsletterSection img { display: block; margin-inline: auto; max-width: 100%; height: auto; } .bnuCardSection ul { display: flex; gap: var(--layout-gap); margin: 0; padding: 0; list-style: none; } @media (max-width: 768px) { .bnuCardSection ul { flex-direction: column; align-items: flex-start; } } .bnuCardSection ul li { width: 50%; } @media (max-width: 768px) { .bnuCardSection ul li { width: 100%; } } .bnuCardSection ul strong { color: var(--color-accent); font-weight: 600; font-size: 18px; } @media (max-width: 768px) { .bnuCardSection ul strong { font-size: 16px; } } .bnuCardSection .bnuButton { margin-block-start: var(--layout-gap); } .bnuNewsletterSection form { margin-block-start: var(--layout-gap); } .bnuNewsletterSection form > div { display: flex; gap: var(--layout-spacing); } @media (max-width: 768px) { .bnuNewsletterSection form > div { flex-direction: column; } } .bnuNewsletterSection form > div:not(:first-child) { margin-block-start: var(--layout-spacing); } .bnuNewsletterSection form > div .bnuInputWrap { flex-grow: 1; } .bnuArticleMeta { display: flex; column-gap: var(--layout-column-gap); justify-content: space-between; margin-block: calc(var(--layout-spacing) * 2); align-items: center; } .bnuArticleMeta__author { display: flex; column-gap: var(--layout-spacing); align-items: center; } .bnuArticleMeta__author img { display: block; border-radius: 50%; width: calc(var(--layout-spacing) * 5); height: calc(var(--layout-spacing) * 5); object-fit: cover; } .bnuArticleMeta__author > div > * { display: block; } .bnuArticleMeta__author > div time:not(:last-child) { margin-inline-end: var(--layout-spacing); } @media (max-width: 768px) { .bnuArticleMeta__author > div time.updated { display: block; } } .bnuMainGrid { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 2); } .bnuMainGrid .bnuMainGridArticle { width: 100%; } @media (min-width: 768px) { .bnuMainGrid .bnuMainGridArticle { width: calc(50% - var(--layout-spacing)); } } .bnuMainGrid .bnuMobileSecondaryGridArticle { width: calc(50% - var(--layout-spacing)); } @media (min-width: 768px) { .bnuMainGrid .bnuMobileSecondaryGridArticle:not(.bnuMainGridArticle) { width: calc(33.33% - var(--layout-spacing) * 1.35); } } .bnuForm { --row-gap: calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bnuForm { --row-gap: calc(var(--layout-spacing) * 3); } } .bnuForm { display: flex; row-gap: var(--row-gap); flex-direction: column; } .bnuForm.bnuForm--bg { border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: calc(var(--layout-gap)); } .bnuForm + .bnuForm { margin-block-start: var(--layout-row-gap); } .bnuForm fieldset { display: flex; row-gap: var(--row-gap); flex-direction: column; margin: 0; border: none; padding: 0; } .bnuForm legend { float: left; margin: 0; font-weight: 600; line-height: 1.333; font-family: var(--font-main); font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); } .bnuForm.isLoading .bnuInputWrap, .bnuForm.isLoading .bnuSelectWrap, .bnuForm.isLoading .bnuChoiceWrap, .bnuForm.isLoading .bnuChoicesGroup { opacity: 0.5; pointer-events: none; } .bnuForm__row { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--row-gap); align-items: center; } .bnuForm__row.bnuForm__row--alignTop { align-items: flex-start; } .bnuForm__row.bnuForm__row--narrowGap { column-gap: var(--layout-spacing); } .bnuForm__row:has(.bnuInputWrap--floatingLabel) { align-items: flex-end; } @media (max-width: 768px) { .bnuForm__row:has(.bnuInputWrap--floatingLabel) { align-items: flex-start; } } @media (max-width: 768px) { .bnuForm__row { flex-direction: column; align-items: flex-start; } } .bnuForm__row.bnuForm__row--choice { align-items: flex-start; } .bnuForm .bnuForm__row--choice + .bnuForm__row--choice { margin-block-start: calc(var(--layout-spacing) * -1.5); } @media (max-width: 768px) { .bnuForm .bnuForm__row--choice + .bnuForm__row--choice { margin-block-start: calc(var(--layout-spacing) * -2); } } .bnuForm__col { flex: 1 1 0; min-width: 0; max-width: 100%; } .bnuForm__col:where(.bnuForm__col--10) { flex: 0 0 10%; max-width: 10%; } .bnuForm__col:where(.bnuForm__col--15) { flex: 0 0 15%; max-width: 15%; } .bnuForm__col:where(.bnuForm__col--20) { flex: 0 0 20%; max-width: 20%; } .bnuForm__col:where(.bnuForm__col--25) { flex: 0 0 25%; max-width: 25%; } .bnuForm__col:where(.bnuForm__col--33) { flex: 0 0 33.3333%; max-width: 33.3333%; } .bnuForm__col:where(.bnuForm__col--50) { flex: 0 0 50%; max-width: 50%; } .bnuForm__col:where(.bnuForm__col--75) { flex: 0 0 75%; max-width: 75%; } .bnuForm__col:where(.bnuForm__col--80) { flex: 0 0 80%; max-width: 80%; } .bnuForm__col:where(.bnuForm__col--auto) { flex: 0 0 auto; max-width: 100%; } @media (max-width: 768px) { .bnuForm__col { flex: 0 0 100%; width: 100%; max-width: 100%; } } .bnuForm__col .bnuInputWrap { width: 100%; } .bnuErrorBox.globalErrors:empty, .globalErrors:empty { display: none; } .bnuForm__row:has(> .bnuForm__col > .bnuErrorBox.globalErrors:empty:only-child), .bnuForm__row:has(> .bnuForm__col > .globalErrors:empty:only-child) { display: none; } .bnuHeroWrap { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); column-gap: var(--layout-column-gap); margin-block-start: var(--layout-gap); margin-block-end: calc(var(--layout-spacing) * 6); } @media (max-width: 1024px) { .bnuHeroWrap { display: block; margin-inline: calc(var(--layout-padding) * -1); margin-block-start: 0; margin-block-end: calc(var(--layout-spacing) * 6); } } .bnuHero { grid-column: 2/-1; width: 100%; } .bnuHero img { display: block; border-radius: 0; width: 100%; height: auto; } .bnuHero .swiper { outline: 1px solid var(--color-border); border-radius: var(--border-radius); } @media (max-width: 1024px) { .bnuHero .swiper { border-radius: 0; outline: none; border-bottom: 1px solid var(--color-border); } } .bnuHero .bnuPromoBanner picture { width: 100%; } .bnuHero .bnuPromoBanner img { border: none; border-radius: 0; width: 100%; } .bnuHero .bnuCarousel + .bnuCarouselNav { width: 100%; translate: 0 -50%; } @media (max-width: 1024px) { .bnuHero .bnuCarousel + .bnuCarouselNav { overflow: hidden; } } .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { box-shadow: inset 0 0 0 2px white; border: none; } @media (max-width: 1024px) { .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { border: 1px solid var(--color-border); } } @media (max-width: 768px) { .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { width: 16px; box-shadow: none; } } .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav.bnuButton--prev { border-top-left-radius: 0; border-bottom-left-radius: 0; translate: -50% 0; } @media (max-width: 1024px) { .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav.bnuButton--prev { border-left: 0; translate: none; } } .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav.bnuButton--next { border-top-right-radius: 0; border-bottom-right-radius: 0; translate: 50% 0; } @media (max-width: 1024px) { .bnuHero .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav.bnuButton--next { border-right: 0; translate: none; } } .bnuHero .swiper-pagination { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border: 1px solid var(--color-border); border-bottom: none; border-top-right-radius: var(--border-radius-input); border-top-left-radius: var(--border-radius-input); background-color: white; padding-inline: 12px; padding-block-start: 8px; width: auto; } @media (max-width: 1024px) { .bnuHero .swiper-pagination { display: none; } } .bnuCarouselWrap { position: relative; } .bnuCarousel { position: relative; } .bnuCarousel .swiper-slide { height: auto; } .swiper-pagination { display: flex; position: relative; top: 0; row-gap: 8px; flex-wrap: wrap; justify-content: center; margin-block-start: calc(var(--layout-spacing) * 2); width: 100%; } .swiper-pagination > span.swiper-pagination-bullet { z-index: 3; transition: background-color 0.2s ease; margin: 0; border-radius: 4px; background-color: var(--color-text); width: 24px; height: 4px; } @media (max-width: 768px) { .swiper-pagination > span.swiper-pagination-bullet { width: 16px; } } .swiper-pagination.swiper-pagination-lock { display: none; } .bnuCarouselNav { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); z-index: 2; justify-content: space-between; pointer-events: none; } .bnuCarouselNav button { pointer-events: auto; } @media (max-width: 768px) { .bnuCarouselNav { position: absolute; top: anchor(center); left: anchor(left); translate: calc(var(--layout-padding) * -0.75) -50%; flex-shrink: 0; width: calc(anchor-size(width) + var(--layout-padding) * 1.5); } .bnuCarouselNav .bnuButton.bnuButton--nav { width: 28px; border-radius: var(--border-radius-small); } } @media (max-width: 768px) and (max-width: 768px) { .bnuCarouselNav .bnuButton.bnuButton--nav { width: 24px; } } @media (max-width: 768px) and (max-width: 480px) { .bnuCarouselNav .bnuButton.bnuButton--nav { width: 18px; } } .bnuCarousel + .bnuCarouselNav { position: absolute; top: anchor(center); left: anchor(left); translate: calc(var(--layout-padding) * -0.75) -50%; flex-shrink: 0; width: calc(anchor-size(width) + var(--layout-padding) * 1.5); } .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { width: 28px; border-radius: var(--border-radius-small); } @media (max-width: 768px) { .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { width: 24px; } } @media (max-width: 480px) { .bnuCarousel + .bnuCarouselNav .bnuButton.bnuButton--nav { width: 18px; } } @media (max-width: 768px) { .bnuPageSection:has(.bnuPageSection__header .bnuCarouselNav) .bnuPageSection__header > .bnuCarouselNav { display: none; } } .bnuPageSection:has(.bnuPageSection__header .bnuCarouselNav) .bnuCarousel + .bnuCarouselNav { display: none; } @media (max-width: 768px) { .bnuPageSection:has(.bnuPageSection__header .bnuCarouselNav) .bnuCarousel + .bnuCarouselNav { display: flex; } } .bnuProductCarouselHost { display: contents; } .bnuProductCarousel { position: relative; } .bnuProductCarousel .swiper { height: 100%; } .bnuProductCarousel .swiper-wrapper { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: flex-start; } .bnuProductCarousel .swiper-wrapper:not(:has(.bnuProduct__promo)) .bnuProduct { grid-row: span 1; } .bnuProductCarousel:has(.bnuProductCarousel__banner) { display: grid; position: relative; grid-template-columns: repeat(12, 1fr); column-gap: var(--layout-column-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuProductCarousel:has(.bnuProductCarousel__banner) { grid-template-columns: repeat(2, 1fr); } } .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuProductCarousel__banner { grid-column: span 3; min-width: 0; min-height: 0; } @media (max-width: 1024px) { .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuProductCarousel__banner { grid-column: span 4; } } @media (max-width: 768px) { .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuProductCarousel__banner { grid-column: span 1; } } .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuCarousel { grid-column: span 9; width: 100%; } @media (max-width: 1024px) { .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuCarousel { grid-column: span 8; } } @media (max-width: 768px) { .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuCarousel { grid-column: span 1; } } .bnuProductCarousel:has(.bnuProductCarousel__banner) > .bnuCarouselNav { grid-column: 1/-1; } .bnuProductCarousel__banner { height: 100%; } .bnuProductCarousel__banner .bnuPromoBanner picture, .bnuProductCarousel__banner .bnuPromoBanner img { width: 100%; height: 100%; object-fit: cover; object-position: left; } .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner { position: absolute; top: calc(var(--layout-spacing) * -2); left: 0; z-index: 1; width: auto; height: calc(100% + var(--layout-spacing) * 4); } @media (max-width: 768px) { .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner { top: calc(var(--layout-spacing) * -3); width: calc(100% - var(--layout-column-gap) * 4); height: auto; height: calc(100% + var(--layout-spacing) * 4); } } .bnuPageSection:has(.bnuPageSection__header) .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner { top: calc(var(--layout-spacing) * -6); height: calc(100% + var(--layout-spacing) * 8); } @media (max-width: 768px) { .bnuPageSection:has(.bnuPageSection__header) .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner { top: calc(var(--layout-spacing) * -3); height: calc(100% + var(--layout-spacing) * 4); } } .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner picture, .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner img { width: auto; height: 100%; } @media (max-width: 768px) { .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner picture, .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner img { width: auto; height: 100%; } } .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner picture { max-width: 100%; } .bnuProductCarousel__banner.bnuProductCarousel__banner--large .bnuPromoBanner picture img { max-width: 100%; object-fit: cover; object-position: left; } .bnuBlogGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--layout-gap); } @media (max-width: 768px) { .bnuBlogGrid { grid-template-columns: repeat(2, 1fr); } } .bnuBlogGrid.bnuBlogGrid--featured { grid-template-columns: repeat(6, 1fr); } .bnuBlogGrid.bnuBlogGrid--featured > * { grid-column: span 2; } .bnuBlogGrid.bnuBlogGrid--featured > :nth-child(-n+2) { grid-column: span 3; } @media (max-width: 768px) { .bnuBlogGrid.bnuBlogGrid--featured { grid-template-columns: repeat(2, 1fr); } .bnuBlogGrid.bnuBlogGrid--featured > * { grid-column: span 1; } .bnuBlogGrid.bnuBlogGrid--featured > :nth-child(-n+2) { grid-column: span 1; } .bnuBlogGrid.bnuBlogGrid--featured > :first-child { grid-column: 1/-1; } } .bnuEmptyState { text-align: center; margin-block: calc(var(--layout-spacing) * 8); margin-block-start: calc(var(--layout-spacing) * 4); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: clamp(var(--layout-spacing) * 3, 6%, var(--layout-spacing) * 6); } .bnuEmptyState > h2 { margin: 0; margin-block-end: var(--layout-spacing); } .bnuEmptyState > .bnuButton { margin-block-start: var(--layout-spacing); } #templateHTMLCode .size, .bnuGiftCard__voucherPreview .size { width: 100% !important; height: initial !important; left: 0 !important; } #templateHTMLCode .couponTemplate-messageSection .message-container, .bnuGiftCard__voucherPreview .couponTemplate-messageSection .message-container { font-size: 14px !important; width: 62%; } @media (max-width: 768px) { #templateHTMLCode .couponTemplate-messageSection .message-container, .bnuGiftCard__voucherPreview .couponTemplate-messageSection .message-container { height: 120px !important; font-size: 2.5vw !important; } } #templateHTMLCode .couponTemplate-additionalSection .additional-info, .bnuGiftCard__voucherPreview .couponTemplate-additionalSection .additional-info { font-size: 10px; line-height: 15px; width: 65%; } #templateHTMLCode .couponTemplate-additionalSection .additional-info p, .bnuGiftCard__voucherPreview .couponTemplate-additionalSection .additional-info p { color: inherit; } @media (max-width: 768px) { #templateHTMLCode .couponTemplate-additionalSection .additional-info p, .bnuGiftCard__voucherPreview .couponTemplate-additionalSection .additional-info p { font-size: 1.7vw !important; } } #templateHTMLCode .couponTemplate-titleSection .title, .bnuGiftCard__voucherPreview .couponTemplate-titleSection .title { font-size: 25px; } #templateHTMLCode .couponTemplate-codeSection img, .bnuGiftCard__voucherPreview .couponTemplate-codeSection img { width: 17%; border-radius: 10px; } #templateHTMLCode .couponTemplate-codeSection .upper-qr-text, #templateHTMLCode .couponTemplate-codeSection .coupon-number, #templateHTMLCode .couponTemplate-expirationSection, .bnuGiftCard__voucherPreview .couponTemplate-codeSection .upper-qr-text, .bnuGiftCard__voucherPreview .couponTemplate-codeSection .coupon-number, .bnuGiftCard__voucherPreview .couponTemplate-expirationSection { display: none; } #templateHTMLCode .couponTemplate-amountSection .price-container, .bnuGiftCard__voucherPreview .couponTemplate-amountSection .price-container { padding: 11px 28px; border-radius: 15px; font-size: 28px; } #templateHTMLCode .couponTemplate-messageSection, .bnuGiftCard__voucherPreview .couponTemplate-messageSection { top: 36% !important; } .bnuGiftCard { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 1024px) { .bnuGiftCard { flex-direction: column; } } .bnuGiftCard__preview { width: 45%; } @media (max-width: 1024px) { .bnuGiftCard__preview { width: 100%; order: 1; } } .bnuGiftCard__previewImage { position: relative; display: block; max-width: 500px; } .bnuGiftCard__previewImage img { border: 1px solid var(--color-border); box-shadow: var(--card-box-shadow); border-radius: var(--border-radius); max-width: 100%; } .bnuGiftCard__form { width: 55%; } @media (max-width: 1024px) { .bnuGiftCard__form { width: 100%; } } .bnuGiftCard__title { font-weight: 700; line-height: 1.333; color: var(--color-text); font-size: clamp(1.5rem, 1.18rem + 1.08vw, 2rem); } .bnuGiftCard__field { position: relative; } .bnuGiftCard__fieldError { margin-block-start: 4px; color: var(--color-error); font-size: 13px; line-height: 1.4; } .bnuGiftCard__fieldError:empty { display: none; } .bnuGiftCard__amounts { align-items: stretch; } .bnuGiftCard__amountChoice { flex: 1 1 auto; min-width: 60px; } .bnuGiftCard__amountChoice .bnuChoiceWrap__label { display: flex; justify-content: center; align-items: center; width: 100%; height: 52px; padding-inline-start: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-input); color: var(--color-text); font-size: 14px; line-height: 20px; text-transform: uppercase; cursor: pointer; } .bnuGiftCard__amountChoice .bnuChoiceWrap__label .bnuChoice { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .bnuGiftCard__amountChoice .bnuChoiceWrap__label:has(.bnuChoice:checked) { border-color: var(--color-accent); color: var(--color-accent); } .bnuGiftCard__amountChoice .bnuChoiceWrap__label:has(.bnuChoice[aria-invalid=true]) { border-color: var(--color-error); color: var(--color-error); } .bnuGiftCard__customAmount { flex: 1 1 auto; min-width: 80px; } .bnuGiftCard__customAmountInput { width: 100%; } .bnuGiftCard__customAmountInput input { text-align: center; text-transform: uppercase; } .bnuGiftCard__anotherAddress { display: flex; row-gap: var(--layout-spacing); flex-direction: column; } .bnuGiftCard__charCount { margin-block-start: 4px; color: var(--color-text-light); font-size: 12px; } .bnuGiftCard__voucherLink { display: none; text-align: center; text-transform: uppercase; } @media (max-width: 1024px) { .bnuGiftCard__voucherLink { display: block; } } .bnuGiftCard__actions { display: flex; flex-direction: column; align-items: flex-start; } @media (max-width: 768px) { .bnuGiftCard__actions .bnuButton { width: 100%; } } .bnuGiftCard__additional { margin-block-start: calc(var(--layout-spacing) * 4); } .bnuGiftCard__additionalTitle { margin-block-end: 8px; color: var(--color-text); font-size: 15px; line-height: 1.5; } .bnuGiftCard__additionalText { color: var(--color-text-light); font-size: 15px; line-height: 1.5; } .bnuGiftCard__voucherDialog .bnuGiftCard__voucherPreview { max-width: 500px; } .bnuGiftCard__voucherDialog .bnuGiftCard__voucherPreview img { max-width: 100%; border-radius: var(--border-radius); } .snrgames-widget { position: fixed; bottom: 20px; left: 20px; z-index: 999; } .snrgames-trigger:focus-visible, .snrgames-tab-nav-item:focus-visible, .snrgames-nav-item:focus-visible { outline: 2px solid #002664; } .checkbox__input:focus-visible + .checkbox__mark, .bnuChoice:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } .snrgames-trigger { display: flex; align-items: center; position: relative; z-index: 10001; } .snrgames-trigger__icon-wrap { width: 60px; height: 60px; background: linear-gradient( 90deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(252, 176, 69) 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 2; } .snrgames-trigger__icon-wrap:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .snrgames-trigger__text-bubble { position: relative; background: white; padding: 16px 16px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); margin-left: 15px; max-width: 200px; display: flex; align-items: center; z-index: 1; transform-origin: left center; animation: bubblePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .snrgames-trigger__text-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 18px solid white; } .snrgames-trigger__message { font-weight: 500; font-size: 14px; color: #212121; line-height: 1.4; cursor: pointer; } .snrgames-trigger__close { position: absolute; top: -10px; right: -10px; z-index: 2; width: 24px; height: 24px; min-width: 0; padding: 0; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #002664; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; } .snrgames-trigger__close > i { margin: 0; font-size: 14px; } .snrgames-trigger__close:hover { background: #f0f0f0; transform: scale(1.1); } .snrgames-trigger__close:active { background: #e8e8e8; transform: scale(1.05); } .snrgames-trigger__close:focus-visible { outline: 2px solid color-mix(in oklch, #002664, white 60%); } @keyframes bubblePop { from { opacity: 0; transform: scale(0.8) translateX(-10px); } to { opacity: 1; transform: scale(1) translateX(0); } } .snrgames-widget.active .snrgames-trigger { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .snrgames-step { width: 100%; } .snrgames-emailIntro { --row-gap: var(--layout-spacing); } .snrgames-emailIntro__text { margin: 0; text-align: center; } .snrgames-sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; visibility: hidden; opacity: 0; } .snrgames-widget.active .snrgames-sidebar, .snrgames-widget.snrgames-animating .snrgames-sidebar { transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear; } .snrgames-widget.snrgames-animating:not(.active) .snrgames-sidebar { transition-delay: 0s, 0.4s; } .snrgames-widget.active .snrgames-sidebar { visibility: visible; opacity: 1; } .snrgames-sidebar__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.4s ease; } .snrgames-widget.active .snrgames-sidebar__overlay { opacity: 1; } .snrgames-sidebar__content { position: absolute; top: 0; left: 0; width: 1218px; max-width: 100%; height: 100%; background: #F7F8FA; box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1); transform: translateX(-110%); padding: 0; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; overflow: hidden; } .snrgames-widget.active .snrgames-sidebar__content, .snrgames-widget.snrgames-animating .snrgames-sidebar__content { transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .snrgames-widget.active .snrgames-sidebar__content { transform: translateX(0); } .snrgames-widget button.bnuButton.snrgames-sidebar__close.snrgames-closeBtn--desktop { display: inline-flex; position: absolute; top: 20px; right: 20px; z-index: 50; } .snrgames-widget button.bnuButton.snrgames-sidebar__close.snrgames-closeBtn--mobile { display: none; } @media (max-width: 900px) { .snrgames-widget button.bnuButton.snrgames-sidebar__close.snrgames-closeBtn--mobile { display: inline-flex; position: absolute; top: 8px; right: 8px; z-index: 400; } .snrgames-widget button.bnuButton.snrgames-sidebar__close.snrgames-closeBtn--desktop { display: none; } } .snrgames-copyBtnWrap { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; } .snrgames-sidebar__close:not(.bnuButton) { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 30px; cursor: pointer; color: #333; z-index: 30; } .snrgames-title { font-size: 24px; margin-bottom: 30px; text-align: center; color: #333; } .snrgames-wheel-column { position: absolute; top: 50%; width: 70%; height: 0; padding-top: 70%; left: -35%; transform: translateY(-50%); } .snrgames-wheel-column canvas { transform: rotate(-1.5708rad); position: absolute; left: 0px; top: 0px; width: 100% !important; height: 100% !important; } .snrgames-form-column { flex: 1; max-width: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; margin-left: 370px; } .snrgames-form-column .checkbox { margin-bottom: 0; } .snrgames-spin-title { font-size: 32px; font-weight: 700; color: #003366; text-align: left; } .snrgames-form-container { width: 100%; margin-top: calc(var(--layout-spacing) * 1.67); } @media (max-width: 900px) { .snrgames-form-container { margin-top: calc(var(--layout-spacing) * 3); max-height: 100%; } } .snrgames-form-container:not(.bnuForm) { display: flex; flex-direction: column; gap: var(--layout-row-gap); } .snrgames-banner { width: 100%; text-align: center; } .snrgames-banner img { max-width: 280px; height: auto; border-radius: 8px; display: inline-block; } @media (max-width: 900px) { .snrgames-banner img { max-width: 200px; } } .snrgames-form-group { display: flex; flex-direction: column; } .snrgames-form-group label { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px; } .snrgames-form-group label .required { color: #d32f2f; } .snrgames-email-input { width: 100%; padding: 12px 16px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; transition: border-color 0.3s ease; } .snrgames-email-input:focus { outline: none; border-color: #003366; } .snrgames-email-input::placeholder { color: #999; } .snrgames-login-req { text-align: center; margin-top: 20px; width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; } .snrgames-login-req p { font-size: 16px; margin-bottom: 0; color: #333; } .snrgames-centered-content { margin: 0 auto !important; max-width: 500px !important; } .snrgames-error { color: #d32f2f; font-size: 14px; margin-top: 4px; } .snrgames-terms-text { font-size: 14px; line-height: 1.5; color: #666; } .snrgames-link { color: #003366; text-decoration: underline; } .snrgames-link:hover { color: #0055aa; } .snrgames-play-btn { width: 100%; padding: 14px 24px; background: #002664; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .snrgames-play-btn:hover { background: #00358b; transform: translateY(-2px); } .snrgames-play-btn:active { transform: translateY(0); } .snrgames-play-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; } #wheel { display: block; border-radius: 50%; width: 98% !important; height: 98% !important; top: 1% !important; left: 1% !important; z-index: 5; } .snrgames-wheel-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( from 135deg at 50% 50%, #B1B1B1 0deg, #F1F1F1 90deg, #B1B1B1 180deg, #F1F1F1 270deg, #B1B1B1 360deg); padding: 4px; z-index: 1; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } #spin { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; background: conic-gradient( from 135deg at 50% 50%, #B1B1B1 0deg, #F1F1F1 90deg, #B1B1B1 180deg, #F1F1F1 270deg, #B1B1B1 360deg); border-radius: 50%; box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.3); z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; } #wheelOfFortune::after { content: ""; position: absolute; z-index: 20; top: 68px; right: 84px; margin-top: -24px; transform: rotate(45deg); width: 50px; height: 68px; background-image: url(../../../modules/SNRGames/images/arrow.svg); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.25)); } .snrgames-result.bnuForm { text-align: center; margin-top: 0; align-items: center; justify-content: center; height: 100%; } .snrgames-result__text { --row-gap: var(--layout-spacing); align-items: center; width: 100%; } .snrgames-result__title { font-size: 28px; font-weight: 700; color: #002664; margin: 0 0 10px 0; } .snrgames-prize-text { font-size: 24px; font-weight: 700; color: #68AE2F; } .snrgames-result__description { font-size: 14px; color: #333; max-width: 300px; } .snrgames-emptyPrizes { text-align: center; padding: var(--layout-gap); color: var(--color-text-light); } .snrgames-ineligible { text-align: center; } .snrgames-scratch.bnuForm { width: 100%; height: 100%; text-align: center; padding-inline: var(--layout-gap); align-items: center; justify-content: center; } @media (max-width: 900px) { .snrgames-scratch.bnuForm { justify-content: flex-start; height: auto; min-height: 100%; } } .snrgames-scratch__form { width: 100%; max-width: 400px; margin-inline: auto; justify-content: center; } .snrgames-code-section.bnuForm { width: 100%; text-align: center; margin-top: var(--layout-row-gap); } .snrgames-code-label { font-size: 14px; color: #333; margin-bottom: 8px; } .snrgames-input-wrapper { position: relative; width: 100%; max-width: 280px; margin: 0 auto; } .snrgames-code-input { width: 100%; padding: 12px 40px 12px 16px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-weight: 700; font-size: 16px; color: #333; background: #fff; cursor: text; } .snrgames-copy-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #002664; font-size: 18px; cursor: pointer; padding: 5px; transition: color 0.2s; } .snrgames-copy-btn:hover { color: #0055aa; } .snrgames-coupon-code, .snrgames-sidebar__close-btn { display: none !important; } .snrgames-spin-title { font-size: 32px; text-align: center; margin-bottom: 0; } .snrgames-widget .bnuForm, .snrgames-widget .bnuInputWrap, .snrgames-widget .bnuChoiceWrap { margin-bottom: 0; } .snrgames-widget .bnuForm { gap: calc(var(--layout-spacing) * 1.5); } .snrgames-widget button.bnuButton.snrgames-submitBtn { background: var(--snr-btn-bg, var(--color-accent)); color: var(--snr-btn-text, #fff); border-color: transparent; } .snrgames-widget button.bnuButton.snrgames-submitBtn:hover { background: var(--snr-btn-bg, var(--color-accent)); filter: brightness(0.92); color: var(--snr-btn-text, #fff); } .snrgames-widget button.bnuButton.snrgames-submitBtn:active { background: var(--snr-btn-bg, var(--color-accent)); filter: brightness(0.85); color: var(--snr-btn-text, #fff); } .snrgames-widget button.bnuButton.snrgames-submitBtn:disabled, .snrgames-widget button.bnuButton.snrgames-submitBtn[disabled] { background: var(--color-border); filter: none; color: var(--color-text-disabled); } .snrgames-widget .snrgames-error.bnuNotice { margin-top: calc(var(--layout-spacing) * 1.5); } .snrgames-widget .snrgames-code-section .bnuInputWrap { position: relative; max-width: 280px; margin-inline: auto; } .snrgames-widget .snrgames-lots-carousel .bnuCarouselNav { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .snrgames-widget .snrgames-lots-carousel .bnuCarouselNav > * { pointer-events: auto; } @media (max-width: 900px) { .snrgames-widget .snrgames-lots-carousel .swiper-pagination { display: flex; position: relative; z-index: 3; margin-block-start: var(--layout-gap); } } @media (max-width: 900px) { .snrgames-sidebar__content { width: 100%; } .snrgames-wheel-layout { display: flex; gap: 40px; align-items: center; justify-content: flex-start; width: 100%; max-width: 700px; position: relative; flex-direction: column; gap: 30px; } .snrgames-wheel-column { position: relative; left: auto; top: auto; width: 100%; padding-top: 0; transform: none; display: flex; justify-content: center; align-items: center; min-height: 350px; } .snrgames-wheel-column canvas { position: relative !important; width: 100% !important; height: auto !important; max-width: 400px; left: auto !important; top: auto !important; transform: rotate(-1.5708rad); } .snrgames-form-column { max-width: 100%; width: 100%; margin-left: 0; } .snrgames-widget[data-game-type=wheel] .snrgames-form-column { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); background: #fff; padding: 24px; } .snrgames-spin-title { text-align: center; font-size: 28px; margin-bottom: 24px; } } @media (max-width: 900px) { .snrgames-sidebar__content { padding: 30px 20px; } #wheel { width: 350px; height: 350px; border-radius: 50%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important; } #wheelOfFortune::after { font-size: 42px; top: 42px; right: 42px; margin-top: -24px; width: 42px; height: 42px; } } .scratch-container { position: relative; width: 300px; height: 300px; margin: 0 auto 0 auto; border: none; background: transparent; display: inline-block; } .scratch-container .text { margin: 0 0 var(--layout-gap); } @media (max-width: 900px) { .scratch-container { width: 240px; height: 240px; margin-bottom: 10px; } } .scratch-pad-wrapper { position: relative; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); background: #fff; margin: 0 auto; } @media (max-width: 900px) { .scratch-pad-wrapper { width: 240px; height: 240px; } } #scratchCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; z-index: 2; } .scratch-instruction { margin-bottom: 15px; font-size: 16px; color: #333; font-weight: 600; } .scratch-hidden-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 100px; color: #009639; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } @media (max-width: 900px) { .scratch-hidden-icon { font-size: 70px; } } .scratch-result-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.05); animation: fadeIn 0.5s ease; } .scratch-result-content { text-align: center; padding: 20px; } .snrgames-img-contain { max-width: 100%; max-height: 100%; object-fit: contain; } .scratch-prize-text { font-size: 28px; font-weight: 700; color: #68AE2F; margin-bottom: 10px; } .scratch-prize-desc { font-size: 14px; color: #333; line-height: 1.4; } .scratch-step-container { width: 100%; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .scratch-teaser-visual { position: relative; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-bottom: 24px; } .snrgames-layout { display: flex; width: 100%; height: 100%; overflow: hidden; } .snrgames-area { flex: 0 1 850px; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 72px 60px 0; overflow: hidden; background: #F7F8FA; } .snrgames-content-wrapper { display: contents; } .snrgames-widget[data-game-type=scratch] .snrgames-area { padding: 0 0 24px 0; } .snrgames-info-panel { flex: 0 0 368px; min-width: 368px; max-width: 368px; border-left: 1px solid #eee; display: flex; flex-direction: column; height: 100%; z-index: 20; transition: transform 0.3s ease; } @media (min-width: 901px) and (max-width: 1186px) { .snrgames-info-panel { flex: 0 0 300px; min-width: 300px; max-width: 300px; } .snrgames-form-column { margin-left: 326px; } .snrgames-area { padding-right: 40px; } } @media (max-width: 900px) { .snrgames-layout { position: relative; } .snrgames-area, .snrgames-info-panel { width: 100%; height: 100%; position: relative; top: auto; left: auto; background: #F7F8FA; } .snrgames-area { display: flex !important; flex-direction: column; justify-content: flex-start; overflow: hidden; padding-top: 0; } .snrgames-visual-section { flex: 0 0 auto; width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 10px 0; z-index: 10; min-height: auto; position: relative; overflow: visible; margin-top: 0; } .snrgames-visual-section .snrgames-wheel-column { position: relative; left: auto; top: auto; transform: none; width: 350px !important; height: 350px !important; max-width: 100%; padding-top: 0 !important; padding-bottom: 0; margin: 0 auto; display: block; } #wheel { width: 100% !important; height: 100% !important; } #wheelOfFortune::after { top: 14.5% !important; right: 14.5% !important; width: 50px; height: 50px; font-size: 50px; margin-top: -25px; margin-right: -25px; } .snrgames-visual-section canvas { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none; } .snrgames-form-column { flex: 1; overflow-y: auto; width: 100%; padding: 12px; padding-bottom: 80px; background: #F7F8FA; margin-top: -175px; position: relative; z-index: 200; height: 65vh; margin-left: 0; overflow-y: auto; } .snrgames-info-panel { display: none !important; } .snrgames-info-panel { border-left: none; padding-bottom: 70px; } .snrgames-area { padding: 0 0 60px 0; } .snrgames-gap-lg { gap: 12px !important; } .snrgames-gap-md { gap: 8px !important; } #benuGamesEmailAfterForm { margin-top: 0 !important; } } .snrgames-tabs-header { display: flex; border-bottom: 2px solid #f0f0f0; } .snrgames-tab-nav-item { flex: 1; text-align: center; padding: 15px; font-weight: 600; color: #666; cursor: pointer; position: relative; font-size: 16px; background: #fff; } .snrgames-tab-nav-item.active { color: #002664; background: #fff; } .snrgames-tab-nav-item.active::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #002664; } .snrgames-info-content { flex: 1; overflow-y: auto; padding: 20px; background: #fff; } .snrgames-tab-content { display: none; animation: fadeIn 0.3s ease; } .snrgames-tab-content.active { display: block; } @media (min-width: 901px) { .snrgames-prizes-list { display: flex; flex-direction: column; gap: var(--layout-spacing); } } .snrgames-prize-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 30px 0; border-bottom: 1px solid #f5f5f5; } .snrgames-prize-item:last-child { border-bottom: none; } .snrgames-prize-img { width: 180px; height: 180px; background: #e0e0e0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 60px; color: #999; } .snrgames-prize-details { width: 100%; } .snrgames-prize-name { font-weight: 700; font-size: 18px; color: #002664; margin-bottom: 8px; } .snrgames-prize-desc { font-size: 14px; color: #555; line-height: 1.5; max-width: 280px; margin: 0 auto; } .snrgames-rules-text { font-size: 14px; line-height: 1.6; color: #555; } .snrgames-mobile-nav { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); z-index: 300; justify-content: space-around; align-items: center; } .benu-mobile-tab-content { display: none; animation: fadeIn 0.3s ease; } .benu-mobile-tab-content.active { display: block; } .snrgames-form { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 901px) { .benu-mobile-tab-content.benu-mobile-play { display: flex !important; flex-direction: column; gap: 24px; } .benu-mobile-tab-content.benu-mobile-lots, .benu-mobile-tab-content.benu-mobile-rules { display: none !important; } } .scratch-prize-desc { font-size: 14px; color: #333; text-align: center; margin-top: 5px; line-height: 1.4; } .scratch-prize-text { font-weight: bold; font-size: 20px; color: #68AE2F; text-align: center; } .snrgames-widget[data-game-type=scratch] .snrgames-form { gap: 12px; } .snrgames-widget[data-game-type=scratch] .snrgames-code-section { margin-top: 12px !important; } @media (max-width: 900px) { .snrgames-widget[data-game-type=scratch] .snrgames-area { overflow-y: auto !important; display: flex !important; flex-direction: column; justify-content: flex-start !important; min-height: 100%; width: 100%; } .snrgames-widget[data-game-type=scratch] .snrgames-content-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; margin: auto 0; } .snrgames-widget[data-game-type=scratch] .snrgames-form-column { margin-top: 0 !important; height: auto !important; overflow: visible !important; padding: 20px !important; min-height: auto !important; margin: 0 !important; display: flex; flex-direction: column; align-items: center; width: 100%; } .snrgames-widget[data-game-type=scratch] .snrgames-form-column.snrgames-hidden { display: none !important; } .snrgames-widget[data-game-type=scratch] .snrgames-area:not(.active) .snrgames-form-column.snrgames-hidden { display: flex !important; } .snrgames-widget[data-game-type=scratch] .snrgames-area:not(.active) .snrgames-visual-section { display: none !important; } .snrgames-widget[data-game-type=scratch] .snrgames-area:not(.active) { justify-content: flex-start !important; } .snrgames-widget[data-game-type=wheel] .snrgames-area:not(.active) .snrgames-rules-text { max-height: 60dvh; display: block; padding-bottom: 80px; } .benu-mobile-tab-content.benu-mobile-rules { margin-top: -24px; } .snrgames-widget[data-game-type=wheel] .benu-mobile-tab-content.benu-mobile-rules.active { display: block !important; } .snrgames-rules-text { background: transparent; padding: 0 20px 60px 20px; } .snrgames-widget[data-game-type=wheel] .snrgames-rules-text { padding: 0 24px 80px 24px; } .snrgames-widget[data-game-type=scratch] .snrgames-visual-section canvas { position: absolute !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; margin: 0; border-radius: 0; box-shadow: none; } .snrgames-widget[data-game-type=scratch] .snrgames-visual-section { padding: 10px 0; display: flex; justify-content: center; align-items: center; width: 100%; height: auto !important; position: relative; } .snrgames-layout { width: 100%; display: flex; flex-direction: column; } } @media (max-width: 900px) { .snrgames-mobile-nav { display: flex; } .snrgames-info-panel .snrgames-tabs-header { display: none; } } .snrgames-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #999; cursor: pointer; flex: 1; height: 100%; } .snrgames-nav-item i { font-size: 20px; margin-bottom: 4px; } .snrgames-nav-item.active { color: #002664; } .snrgames-sidebar__content { width: 1218px; background: #fff; } @media (max-width: 900px) { .snrgames-sidebar__content { width: 100%; padding: 0; flex-direction: column; } .snrgames-layout { flex-direction: column; flex: 1; height: auto; overflow: hidden; } .snrgames-info-panel { flex: 0 0 auto; width: 100%; } } @media (max-width: 900px) { .snrgames-prizes-list.keen-slider { gap: 0; } .snrgames-prize-item.keen-slider__slide { flex-shrink: 0; margin: 0 !important; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 !important; gap: 0 !important; border-bottom: none; } .snrgames-prize-item.keen-slider__slide .snrgames-prize-img { width: 50%; height: auto; font-size: 50px; margin-bottom: 20px; } .snrgames-prize-item.keen-slider__slide .snrgames-prize-details { width: 100%; } .snrgames-prize-item.keen-slider__slide .snrgames-prize-name { font-size: 18px; margin-bottom: 10px; } .snrgames-lots-carousel { position: relative; width: 100%; } .snrgames-lots-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.9); border: 1px solid #eee; border-radius: 50%; color: #002664; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .snrgames-lots-arrow:hover { background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); color: #007bff; } .snrgames-lots-arrow--prev { left: 6px; } .snrgames-lots-arrow--next { right: 6px; } } @media (min-width: 901px) { .snrgames-lots-arrow { display: none !important; } } #benuGamesResultText { font-size: 24px; font-weight: bold; color: #68AE2F; text-align: center; margin: 0; } .snrgames-result-desc { font-size: 14px; color: #4a4a4a; text-align: center; } #benuGamesResultTitle { margin-top: 0; } #benuGamesResultText { margin: 0; line-height: normal; } .snrgames-widget p { margin: 0; line-height: normal; } .snrgames-code-label { margin-bottom: 8px !important; } .snrgames-flex { display: flex !important; } .snrgames-flex-col { flex-direction: column !important; } .snrgames-flex-row { flex-direction: row !important; } .snrgames-justify-center { justify-content: center !important; } .snrgames-justify-center-desktop { justify-content: center !important; } .snrgames-justify-start { justify-content: flex-start !important; } .snrgames-justify-between { justify-content: space-between !important; } .snrgames-align-center { align-items: center !important; } .snrgames-align-start { align-items: flex-start !important; } .snrgames-align-stretch { align-items: stretch !important; } .snrgames-flex.snrgames-psides-24 { padding: 0 24px !important; } .snrgames-w-full { width: 100% !important; } .snrgames-h-full { height: 100% !important; } .snrgames-max-w-400 { max-width: 400px !important; } .snrgames-gap-xs { gap: 4px !important; } .snrgames-gap-sm { gap: 8px !important; } .snrgames-gap-md { gap: 16px !important; } .snrgames-gap-lg { gap: 24px !important; } @media (max-width: 900px) { .snrgames-gap-lg { gap: 12px !important; } .snrgames-gap-md { gap: 8px !important; } .snrgames-justify-center-desktop { justify-content: flex-start !important; } .snrgames-h-full { height: auto !important; min-height: 100% !important; } .snrgames-banner img { max-width: 150px !important; } } .snrgames-m-0 { margin: 0 !important; } .snrgames-m-auto { margin: 0 auto !important; } .snrgames-mt-sm { margin-top: 12px !important; } .snrgames-mt-md { margin-top: 24px !important; } .snrgames-mb-sm { margin-bottom: 12px !important; } .snrgames-mb-md { margin-bottom: 24px !important; } .snrgames-p-md { padding: 24px !important; } .snrgames-text-center { text-align: center !important; } .snrgames-text-left { text-align: left !important; } .snrgames-text-gray { color: #999 !important; } .snrgames-text-error { color: #d32f2f !important; font-size: 12px !important; } .snrgames-hidden { display: none !important; } .snrgames-block { display: block !important; } .snrgames-inline-block { display: inline-block !important; } .snrgames-font-size-md { font-size: 16px !important; } .snrgames-font-size-lg { font-size: 18px !important; } body.snrgames-no-scroll { overflow: hidden !important; height: 100vh; } .block-heroBanner:has(.bnuHeroBanner) { position: relative; left: auto; right: auto; display: block; justify-content: initial; align-items: initial; width: 100vw; max-width: 100vw; min-height: 0; margin-inline: calc(50% - 50vw); padding: 0; } .block-heroBanner:has(.bnuHeroBanner) img { position: static; top: auto; width: auto; max-width: 100%; height: auto; } .bnuHeroBanner { width: 100%; background-color: var(--hero-banner-bg, var(--color-bg)); padding-block: calc(var(--layout-spacing) * 4); } @media (max-width: 1024px) { .bnuHeroBanner { padding-block: calc(var(--layout-spacing) * 3); } } .bnuHeroBanner__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--layout-gap) * 2); align-items: center; } @media (max-width: 768px) { .bnuHeroBanner__grid { grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); } } .bnuHeroBanner__grid:not(:has(.bnuHeroBanner__media)) { grid-template-columns: minmax(0, 1fr); } @media (max-width: 768px) { .bnuHeroBanner__content { text-align: center; } } .bnuHeroBanner__title { color: var(--hero-banner-title-color, inherit); } .bnuHeroBanner__text { margin-block-start: var(--layout-spacing); color: var(--hero-banner-text-color, inherit); } @media (max-width: 768px) { .bnuHeroBanner__clamp { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } } .bnuHeroBanner__clamp.is-expanded { overflow: visible; display: block; -webkit-line-clamp: unset; line-clamp: unset; } .bnuHeroBanner__readMore { display: inline-flex; margin-block-start: var(--layout-spacing); cursor: pointer; border: none; border-radius: var(--border-radius-input); background: transparent; padding: 0; color: var(--color-accent); font-weight: 600; font-size: 14px; line-height: 1.4; text-decoration: underline; text-underline-offset: 2px; } .bnuHeroBanner__readMore:hover { color: color-mix(in oklch, var(--color-accent), black 20%); } .bnuHeroBanner__cta { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuHeroBanner__cta { width: 100%; } } .bnuHeroBanner__media picture, .bnuHeroBanner__media img { display: block; position: static; margin-inline: auto; width: auto; max-width: 100%; height: auto; } .block-demo-content .block-heroBanner:has(.bnuHeroBanner) { width: auto; max-width: none; margin-inline: 0; } .block-demo-content .bnuHeroBanner { width: 100%; } .block-demo-content .bnuHeroBanner .bnuContainer { padding-inline: 0; } @media (max-width: 768px) { .block-heroSection { margin-inline: calc(var(--layout-padding) * -1); } } .bnuHeroSection { display: flex; position: relative; align-items: center; justify-content: space-between; border-radius: var(--border-radius); background-image: var(--hero-section-bg-image, none); background-size: cover; background-position: center; padding-inline: calc(var(--layout-spacing) * 5); width: 100%; max-height: var(--hero-section-height, 482px); min-height: var(--hero-section-height, 482px); } @media (max-width: 768px) { .bnuHeroSection { flex-direction: column; border-radius: 0; background-image: none; padding: 0; max-height: none; min-height: 0; } } .bnuHeroSection::after { display: none; position: absolute; opacity: var(--hero-section-overlay-opacity, 0.3); z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( 90deg, rgba(33, 33, 33, 0.5) 0%, rgba(33, 33, 33, 0) 100%); pointer-events: none; content: ""; } @media (min-width: 769px) { .bnuHeroSection::after { display: block; } } .bnuHeroSection > * { z-index: 2; } .bnuHeroSection__mobileImg { display: none; object-fit: cover; width: 100%; max-height: var(--hero-section-height-mobile, 320px); min-height: var(--hero-section-height-mobile, 320px); } @media (max-width: 768px) { .bnuHeroSection__mobileImg { display: block; } } .bnuHeroSection__content { max-width: 50%; color: var(--hero-section-text-color, #fff); } .bnuHeroSection__content h2, .bnuHeroSection__content h3, .bnuHeroSection__content p { color: inherit; } .bnuHeroSection__content h2, .bnuHeroSection__content h3 { margin-block-end: var(--layout-spacing); } .bnuHeroSection__content p { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuHeroSection__content .bnuButton { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuHeroSection__content { order: 3; padding: calc(var(--layout-spacing) * 2); width: 100%; max-width: 100%; color: var(--hero-section-text-color-mobile, var(--color-text)); } } @media (min-width: 769px) { .bnuHeroSection__content--bg { border-radius: var(--border-radius); background-color: var(--hero-section-text-bg, transparent); padding: calc(var(--layout-spacing) * 3); min-width: 368px; } } @media (max-width: 768px) { .bnuHeroSection__content--bg { background-color: var(--hero-section-text-bg-mobile, var(--hero-section-text-bg, transparent)); } } .bnuHeroSection__countdown { position: absolute; top: calc(var(--layout-spacing) * 4); right: calc(var(--layout-spacing) * 4); } .bnuHeroSection__countdown .bnProductCard__countdown, .bnuHeroSection__countdown .bnuProductCard__countdown { height: auto; margin-block: 0 12px; } .bnuHeroSection__countdown .bnProductCard__countdown__label, .bnuHeroSection__countdown .bnuProductCard__countdown__label { margin-block-end: var(--layout-spacing); color: var(--hero-section-countdown-color, #002664); font-size: 16px; } .bnuHeroSection__countdown .countdown__clock span, .bnuHeroSection__countdown .countdown__clock p { color: var(--hero-section-countdown-color, #002664); } @media (max-width: 768px) { .bnuHeroSection__countdown { display: flex; position: relative; justify-content: center; align-items: center; order: 2; inset: unset; padding-block: var(--layout-spacing) calc(var(--layout-spacing) * 2); width: 100%; } .bnuHeroSection__countdown .bnProductCard__countdown, .bnuHeroSection__countdown .bnuProductCard__countdown { margin: 0; } .bnuHeroSection__countdown .bnProductCard__countdown__label, .bnuHeroSection__countdown .bnuProductCard__countdown__label, .bnuHeroSection__countdown .countdown__clock span, .bnuHeroSection__countdown .countdown__clock p { color: var(--hero-section-countdown-color-mobile, var(--hero-section-countdown-color, #002664)); } } @media (min-width: 769px) { .bnuHeroSection__countdown--bottom { top: unset; bottom: calc(var(--layout-spacing) * 4); } } @media (min-width: 769px) { .bnuHeroSection__countdown--bg { border-radius: var(--border-radius); background-color: var(--hero-section-countdown-bg, transparent); padding: var(--layout-spacing); } } @media (max-width: 768px) { .bnuHeroSection__countdown--bg { background-color: var(--hero-section-countdown-bg-mobile, var(--hero-section-countdown-bg, transparent)); } } @media (min-width: 769px) { .bnuHeroSection--right { flex-direction: row-reverse; padding-inline: calc(var(--layout-spacing) * 4) calc(var(--layout-spacing) * 5); } .bnuHeroSection--right .bnuHeroSection__countdown { right: unset; left: calc(var(--layout-spacing) * 4); } } table.bnuProductsReturnTable { border-collapse: collapse; } table.bnuProductsReturnTable .bnuProductsReturnTable__header th { padding-left: 10px; text-align: left; font-weight: normal; color: var(--color-text-light); } table.bnuProductsReturnTable .bnuProductsReturnTable__header th:first-child { padding-left: 0; } @media (max-width: 768px) { table.bnuProductsReturnTable .bnuProductsReturnTable__header { display: none; } } @media (max-width: 768px) { table.bnuProductsReturnTable tr { display: flex; flex-wrap: wrap; } } table.bnuProductsReturnTable td { padding: 10px; border-bottom: 1px solid var(--color-border); } @media (max-width: 768px) { table.bnuProductsReturnTable td.bnuProductsReturnTable__name { flex: 0 0 100%; border: none; padding-top: 20px; padding-right: 0; } } table.bnuProductsReturnTable td.bnuProductsReturnTable__price { white-space: nowrap; } @media (max-width: 768px) { table.bnuProductsReturnTable td.bnuProductsReturnTable__price { line-height: 31px; padding: 0; flex: 0 0 50%; border: none; } } table.bnuProductsReturnTable td.bnuProductsReturnTable__quantity { width: 100px; } @media (max-width: 768px) { table.bnuProductsReturnTable td.bnuProductsReturnTable__quantity { text-align: right; padding: 0; flex: 0 0 50%; border: none; } } table.bnuProductsReturnTable td.bnuProductsReturnTable__reason { width: 300px; } table.bnuProductsReturnTable td.bnuProductsReturnTable__reason .bnuInputWrap, table.bnuProductsReturnTable td.bnuProductsReturnTable__reason select { width: 300px; } @media (max-width: 768px) { table.bnuProductsReturnTable td.bnuProductsReturnTable__reason { max-width: 100%; padding: 5px 0 20px 0; flex: 0 0 100%; } table.bnuProductsReturnTable td.bnuProductsReturnTable__reason .bnuInputWrap, table.bnuProductsReturnTable td.bnuProductsReturnTable__reason select { width: 100%; } } table.bnuProductsReturnTable td:first-child { padding-left: 0; } table.bnuProductsReturnTable td:last-child { padding-right: 0; } .returnMethodChoicesRow { min-height: 48px; } .bnuContactsPage__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuContactsPage__layout { flex-direction: column; } } .bnuContactsPage__layout--center { justify-content: center; } .bnuContactsPage__info { width: 58.33333%; min-width: 0; } @media (max-width: 768px) { .bnuContactsPage__info { width: 100%; } } .bnuContactsPage__form { width: 41.66666%; min-width: 0; } @media (max-width: 768px) { .bnuContactsPage__form { width: 100%; } } .bnuContactsPage__form--wide { width: 58.33333%; } @media (max-width: 768px) { .bnuContactsPage__form--wide { width: 100%; } } .bnuContactsPage__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); margin-block-end: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuContactsPage__items { grid-template-columns: minmax(0, 1fr); } } .bnuContactItem { min-width: 0; } .bnuContactItem h2 { margin-block: 0 calc(var(--layout-spacing) * 2); } .bnuContactItem p { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); align-items: flex-start; margin-block: calc(var(--layout-spacing) * 0.75); } .bnuContactItem p i { flex-shrink: 0; margin-block-start: 0.2em; color: var(--color-text-light); } .bnuContactItem p a { text-decoration: underline; } .bnuContactItem__workHours { margin-block-start: calc(var(--layout-spacing) * 1.5); width: 100%; border-collapse: collapse; } .bnuContactItem__workHours td { padding: 0; border: 0; vertical-align: top; } .bnuContactItem__day { display: inline-block; margin-inline-end: calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); } .bnuContactsPage__pharmacyFinder { margin-block-start: calc(var(--layout-spacing) * 1.5); min-width: 230px; } @media (max-width: 768px) { .bnuContactsPage__pharmacyFinder { margin-block: 0 calc(var(--layout-spacing) * 3); min-width: 0; width: 100%; } } .bnuContactsPage form.contactForm { position: relative; } .bnuContactsPage form.contactForm #website { display: none; } .bnuContactsPage form.contactForm [name=file] { display: none; } html.pharmacyFinder .bnuPageHeader { margin-block-end: calc(var(--layout-spacing) * 2); } @media (min-width: 769px) { html.pharmacyFinder .bnuPharmacyFinder__mobileWidgets { display: none; } } html.pharmacyFinder .bnuPharmacyFinder__mobileWidgets .viewMapBtn { display: none; } html.pharmacyFinder .bnuPharmacyFinder__viewSelector { cursor: pointer; display: flex; justify-content: center; align-items: center; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 89; width: 100vw; background-color: #fff; color: var(--color-text); box-shadow: 0 0 3px rgba(0, 0, 0, 0.05), 0 0 24px rgba(33, 33, 33, 0.1); } html.pharmacyFinder .bnuPharmacyFinder__viewSelector .mobileWidget__button { flex: 1 1 50%; max-width: 50%; padding: calc(var(--layout-spacing) * 1.25) calc(var(--layout-spacing) * 1.5); font-size: 1rem; font-weight: 400; text-align: center; cursor: pointer; } html.pharmacyFinder .bnuPharmacyFinder__viewSelector .mobileWidget__button i { margin-inline-end: calc(var(--layout-spacing) * 0.35); } @media (min-width: 769px) { html.pharmacyFinder .bnuPharmacyFinder__mobileSearch { display: none; } } html.pharmacyFinder .bnuPharmacyFinder__mobileSearch .country { margin-block-end: calc(var(--layout-spacing) * 0.75); } html.pharmacyFinder .bnuPharmacyFinder__mobileSearch .filterAddress { margin-block-end: calc(var(--layout-spacing) * 1); } html.pharmacyFinder #widget-pharmacyFinderMessage, html.pharmacyFinder .widget-pharmacyFinderMessage { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { html.pharmacyFinder #widget-pharmacyFinderMessage, html.pharmacyFinder .widget-pharmacyFinderMessage { margin-block-start: var(--layout-spacing); } } html.pharmacyFinder.benu-eshop-ee .bnuPharmacyFinder #map.firstInit, html.pharmacyFinder.benu-eshop-lv .bnuPharmacyFinder #map.firstInit { zoom: 1; } .bnuPharmacyFinder__layout .filterMenu { display: flex; align-items: flex-start; } .bnuPharmacyFinder__layout .filterMenu .mobileWidget__header { display: none; position: relative; padding: calc(var(--layout-spacing) * 0.75) calc(var(--layout-spacing) * 3); border-block-end: 1px solid var(--color-border); color: var(--color-text); font-size: 1.125rem; font-weight: 500; text-transform: uppercase; } .bnuPharmacyFinder__layout .filterMenu .mobileWidget__header i { margin-inline-end: calc(var(--layout-spacing) * 0.35); } .bnuPharmacyFinder__layout .filterMenu .mobileWidget__close { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--color-text); font-size: 1.75rem; cursor: pointer; } .bnuPharmacyFinder__layout .filterMenu .country { min-width: 270px; max-width: 270px; margin-inline-end: calc(var(--layout-spacing) * 3); margin-block-start: calc(var(--layout-spacing) * 0.75); } @media (max-width: 768px) { .bnuPharmacyFinder__layout .filterMenu { display: block; position: fixed; inset-inline-start: 0; inset-block-start: 0; width: 100%; height: 100%; z-index: 1350; padding-block-end: calc(var(--layout-spacing) * 3); background-color: #fff; border-block-start: 1px solid var(--color-border); box-shadow: var(--box-shadow); opacity: 0; pointer-events: none; transform: translate3d(-100%, 0, 0); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .bnuPharmacyFinder__layout .filterMenu.opened { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); } .bnuPharmacyFinder__layout .filterMenu .mobileWidget__header { display: block; } .bnuPharmacyFinder__layout .filterMenu.opened .country { width: 100%; max-width: none; margin: calc(var(--layout-spacing) * 3) calc(var(--layout-spacing) * 2); padding-inline: calc(var(--layout-spacing) * 2); } } .bnuPharmacyFinder__mapContent { position: relative; display: flex; margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuPharmacyFinder__mapContent { margin-block-start: 0; } } .bnuPharmacyFinder__sidebar { position: relative; flex: 1 0 370px; height: 600px; padding: calc(var(--layout-spacing) * 0.35); background: #fff; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { .bnuPharmacyFinder__sidebar { display: none; } } .bnuPharmacyFinder__sidebar .servicesWrap.textBox { display: none; } .bnuPharmacyFinder__sidebar .textBoxWrap { height: 100%; padding: calc(var(--layout-spacing) * 1.25); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-text) #e0e0e0; } .bnuPharmacyFinder__sidebar .textBoxWrap::-webkit-scrollbar { width: 3px; } .bnuPharmacyFinder__sidebar .textBoxWrap::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 1px; } .bnuPharmacyFinder__sidebar .textBoxWrap::-webkit-scrollbar-thumb { background: var(--color-text); } .bnuPharmacyFinder__sidebar .country { margin-block-end: calc(var(--layout-spacing) * 1); } .bnuPharmacyFinder__sidebar .filterAddress input { width: 100%; } .bnuPharmacyFinder__mapWrap { position: relative; flex: 0 1 100%; min-width: 0; height: 600px; margin-inline-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuPharmacyFinder__mapWrap { height: calc(100vh - 170px); margin-inline-start: 0; margin-block-end: -90px; overflow: hidden; } } .bnuPharmacyFinder__mapWrap #map { height: 100%; } @media (max-width: 768px) { .bnuPharmacyFinder__mapWrap #map { height: calc(100% - 180px); } } @media screen and (orientation: landscape) and (max-width: 768px) { .bnuPharmacyFinder__mapWrap { height: 100vh; } .bnuPharmacyFinder__mapWrap #map { height: 268px; } } .bnuPharmacyFinder__mapWrap #map.firstInit { zoom: 0.8; } .bnuPharmacyFinder__mapContent.mobile { margin-block-start: 0; } .bnuPharmacyFinder__mapContent.mobile .country { display: none; } .bnuPharmacyFinder__mapContent.mobile #map { visibility: hidden; opacity: 0; } .bnuPharmacyFinder__mapContent.mobile .bnuPharmacyFinder__sidebar { z-index: 2; display: block; position: inherit; inset: inherit; flex: 1 0 100%; width: 100%; height: auto; padding: 0; box-shadow: none; } .bnuPharmacyFinder__mapContent.mobile .bnuPharmacyFinder__sidebar .textBoxWrap { overflow: visible; padding: 0; } .bnuPharmacyFinder__mapContent.mobile .bnuPharmacyFinder__sidebar .filterAddress { display: none; } html.pharmacyFinder .bnuPharmacyFinder .pharmacyFinder .mapContent.mobile .scrollWrap .servicesWrap.textBox.bnuPharmacyFinder__services { display: flex; flex-flow: row nowrap; white-space: nowrap; margin-inline-start: 0; margin-block-end: var(--layout-spacing); width: 100%; } @media (max-width: 768px) { .bnuPharmacyFinder__mapContent:not(.mobile) { width: 100vw; margin-inline-start: calc((100% - 100vw) / 2); } .bnuPharmacyFinder__mapContent.mobile .mapSingle { width: calc(100% + 40px); margin-inline-start: calc((100% - 100vw) / 2); } } .bnuPharmacyFinder .pharmacyInfo { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding: calc(var(--layout-spacing) * 1.25); background: #fff; overflow-x: hidden; overflow-y: auto; } @media (max-width: 768px) { .bnuPharmacyFinder .pharmacyInfo { position: inherit; height: auto; padding: 0; overflow: visible; } } .bnuPharmacyFinder__detail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: calc(var(--layout-spacing) * 0.75); row-gap: calc(var(--layout-spacing) * 1); min-width: 0; } .bnuPharmacyFinder__detail .goBack { grid-column: 1; grid-row: 1; align-self: center; flex-shrink: 0; line-height: 1; text-decoration: none; cursor: pointer; } .bnuPharmacyFinder__detail .openTill { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; color: var(--color-accent); font-weight: 500; font-size: 1rem; line-height: 1.25; } .bnuPharmacyFinder__detail .openTill .closed { margin: 0; color: var(--color-error); } .bnuPharmacyFinder__detail .iconmarker { grid-column: 3; grid-row: 1; flex-shrink: 0; line-height: 0; } .bnuPharmacyFinder__detail .iconmarker img { display: block; width: 24px; max-width: 24px; } .bnuPharmacyFinder__detail .goBack .fa-arrow-left { font-size: 1.5rem; color: var(--color-text); } .bnuPharmacyFinder__detail .address, .bnuPharmacyFinder__detail .phone, .bnuPharmacyFinder__detail .email, .bnuPharmacyFinder__detail .title, .bnuPharmacyFinder__detail .workHours, .bnuPharmacyFinder__detail .mapSingle { grid-column: 1/-1; } .bnuPharmacyFinder__detail .address, .bnuPharmacyFinder__detail .phone, .bnuPharmacyFinder__detail .email { display: flex; align-items: flex-start; gap: calc(var(--layout-spacing) * 1); margin: 0; min-width: 0; } .bnuPharmacyFinder__detail .address > a, .bnuPharmacyFinder__detail .phone > a, .bnuPharmacyFinder__detail .email > a { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--layout-spacing) * 0.75); flex: 1 1 auto; min-width: 0; color: var(--color-text); font-weight: 500; font-size: 1rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; } .bnuPharmacyFinder__detail .address > a:hover, .bnuPharmacyFinder__detail .phone > a:hover, .bnuPharmacyFinder__detail .email > a:hover { color: var(--color-accent); } .bnuPharmacyFinder__detail .address > a > span:first-child { flex: 1 1 auto; min-width: 0; } .bnuPharmacyFinder__detail .address > a > span:last-child { flex-shrink: 0; line-height: 1; } .bnuPharmacyFinder__detail .address > a i { font-size: 1.25rem; color: var(--color-accent); } .bnuPharmacyFinder__detail .postCode { margin-block-start: calc(var(--layout-spacing) * 0.25); color: var(--color-text-light); font-weight: 400; font-size: 0.8125rem; line-height: 1.3; } .bnuPharmacyFinder__detail .icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 100%; background: rgba(15, 35, 74, 0.05); color: var(--color-text); font-size: 1rem; } .bnuPharmacyFinder__detail .title { margin: calc(var(--layout-spacing) * 0.5) 0 0; color: var(--color-text); font-weight: 500; font-size: 1rem; line-height: 1.4; } .bnuPharmacyFinder__detail .workHours { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--layout-spacing) * 1); margin: 0; min-width: 0; } .bnuPharmacyFinder__detail .workHours span { min-width: 0; color: var(--color-text-light); font-size: 0.875rem; line-height: 1.3; } .bnuPharmacyFinder__detail .workHours span:first-child { flex: 1 1 auto; padding-inline-end: calc(var(--layout-spacing) * 0.5); } .bnuPharmacyFinder__detail .workHours span.time { flex-shrink: 0; text-align: end; color: var(--color-text); white-space: nowrap; } .bnuPharmacyFinder__detail .workHours span.time .closed { margin: 0; color: var(--color-error); } .bnuPharmacyFinder__detail .mapSingle { display: none; width: 100%; height: 540px; margin-block-start: calc(var(--layout-spacing) * 1); } @media (max-width: 768px) { .bnuPharmacyFinder .pharmacyInfo .bnuPharmacyFinder__detail .mapSingle { display: block; } } .bnuPharmacyFinder__services { display: flex; flex-flow: row wrap; gap: calc(var(--layout-spacing) * 0.5); align-items: center; min-width: 0; max-width: 100%; -ms-overflow-style: none; scrollbar-width: none; } @media (max-width: 768px) { .bnuPharmacyFinder__services { flex-flow: row nowrap; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-block: calc(var(--layout-spacing) * 0.5); margin-block: calc(var(--layout-spacing) * -0.5); } } .bnuPharmacyFinder__services::-webkit-scrollbar { display: none; } @media (min-width: 769px) { .bnuPharmacyFinder__services.map { position: absolute; z-index: 1; inset-inline-start: calc(var(--layout-spacing) * 1.5); inset-block-start: calc(var(--layout-spacing) * 2); max-width: calc(100% - var(--layout-spacing) * 3); } } @media (max-width: 768px) { .bnuPharmacyFinder__services.map { position: relative; margin-block: calc(var(--layout-spacing) * 2.5) calc(var(--layout-spacing) * 1.5); margin-inline: calc(var(--layout-spacing) * 2.5); width: calc(100% - var(--layout-spacing) * 5); max-width: calc(100% - var(--layout-spacing) * 5); } } .bnuPharmacyFinder__service { flex: 0 0 auto; display: flex; } .bnuPharmacyFinder__service .bnuChoiceWrap__label { padding-inline-start: 0; box-shadow: var(--box-shadow); border-radius: var(--border-radius-small); background: #fff; cursor: pointer; display: flex; align-items: center; padding: calc(var(--layout-spacing) * 0.65) var(--layout-spacing); color: var(--color-text); font-size: 0.875rem; line-height: 1.25; white-space: nowrap; } .bnuPharmacyFinder__service .bnuChoice { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .bnuPharmacyFinder__service .bnuChoiceWrap__label:has(.bnuChoice:checked) { color: #fff; background-color: var(--color-text); } .bnuPharmacyFinder__service .bnuChoiceWrap__label:has(.bnuChoice:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } .bnuPharmacyFinder__list { margin-inline: calc(var(--layout-spacing) * 2); } .bnuPharmacyFinder__list .noPharmacies { margin-block-start: calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); } .bnuPharmacyFinder__item { position: relative; padding-block-end: calc(var(--layout-spacing) * 2); border-block-end: 2px solid var(--color-border); } .bnuPharmacyFinder__item:last-child { padding-block-end: 0; border-block-end: 0; } .bnuPharmacyFinder__item .showSingle { cursor: pointer; } .bnuPharmacyFinder__item .showSingle img { max-width: 24px; } .bnuPharmacyFinder__item .title, .bnuPharmacyFinder__item .region { display: none; } .bnuPharmacyFinder__item .icon { position: absolute; inset-block-start: calc(var(--layout-spacing) * 1.25); inset-inline-end: 0; color: var(--color-accent); } .bnuPharmacyFinder__item .icon span { position: absolute; top: 0; right: 0; bottom: 10px; left: 0; margin: auto; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.625rem; line-height: 1.5; } .bnuPharmacyFinder__item .icon i { font-size: 2rem; line-height: 2rem; } .bnuPharmacyFinder__item .address { display: inline-block; margin-block: calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * 1.25); padding-inline-end: calc(var(--layout-spacing) * 2); color: var(--color-text); font-weight: 500; font-size: 1.125rem; line-height: 1.2; cursor: pointer; } .bnuPharmacyFinder__item a.phone, .bnuPharmacyFinder__item a.email { display: inline-block; margin-block-end: calc(var(--layout-spacing) * 2); color: var(--color-text); font-size: 0.875rem; line-height: 1; text-decoration: none; } .bnuPharmacyFinder__item a.phone:hover, .bnuPharmacyFinder__item a.email:hover { color: var(--color-accent); } .bnuPharmacyFinder__item a.phone i, .bnuPharmacyFinder__item a.email i { margin-inline-end: calc(var(--layout-spacing) * 0.35); } .bnuPharmacyFinder__item a.phone { margin-inline-end: calc(var(--layout-spacing) * 2); } .bnuPharmacyFinder__item .workHours { margin-block-end: calc(var(--layout-spacing) * 0.35); } .bnuPharmacyFinder__item .workHours span { display: inline-block; min-width: 180px; margin-inline-end: calc(var(--layout-spacing) * 0.75); color: var(--color-text-light); font-size: 0.875rem; line-height: 1.15; } .bnuPharmacyFinder__item .workHours span.time { min-width: 0; margin-inline-end: 0; color: var(--color-text); } .bnuPharmacyFinder__item .workHours span.time .closed { margin: 0; color: var(--color-error); } @media (max-width: 768px) { .bnuPharmacyFinder__item:first-child .address { margin-block-start: 0; } } .bnuLicensedPharmacyList__mapContent { display: flex; align-items: stretch; margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuLicensedPharmacyList__mapContent { flex-direction: column-reverse; margin-block-start: 0; } } .bnuLicensedPharmacyList__sidebar { position: relative; flex: 0 0 288px; height: auto; padding: calc(var(--layout-spacing) * 0.5); border: 1px solid var(--color-border, rgb(204, 212, 224)); border-radius: var(--border-radius); background: #fff; } @media (max-width: 768px) { .bnuLicensedPharmacyList__sidebar { flex: 1 1 auto; border: 0; padding: 0; } } .bnuLicensedPharmacyList__sidebarBody { margin-block-start: calc(var(--layout-spacing) * 1.5); } .bnuLicensedPharmacyList__mapWrap { flex: 1 1 auto; align-self: stretch; min-height: 350px; margin-inline-start: calc(var(--layout-spacing) * 2); border: 1px solid var(--color-border, rgb(204, 212, 224)); border-radius: var(--border-radius); overflow: hidden; } @media (max-width: 768px) { .bnuLicensedPharmacyList__mapWrap { flex: 0 0 auto; min-height: 350px; height: 350px; margin-inline-start: 0; border: 0; border-radius: 0; } } .bnuLicensedPharmacyList__map { height: 100%; } .bnuLicensedPharmacyList__featuredList { margin-inline: calc(var(--layout-spacing) * 2); } .bnuLicensedPharmacyList__featuredList .bnuLicensedPharmacyList__services { display: none; } .bnuLicensedPharmacyList__featuredList .bnuLicensedPharmacyList__links--main { display: flex; } .bnuLicensedPharmacyList__featuredList .bnuLicensedPharmacyList__links--list { display: none; } .bnuLicensedPharmacyList__featuredList .bnuLicensedPharmacyList__contacts { margin-block-end: 0; } .bnuLicensedPharmacyList__item { padding-block-end: calc(var(--layout-spacing) * 2); } .bnuLicensedPharmacyList__title { display: flex; align-items: center; gap: calc(var(--layout-spacing) * 0.75); margin-block-end: calc(var(--layout-spacing) * 1); } .bnuLicensedPharmacyList__marker { flex-shrink: 0; color: var(--color-accent); cursor: pointer; line-height: 0; } .bnuLicensedPharmacyList__name { flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; color: var(--color-text); font-weight: 500; text-decoration: none; } .bnuLicensedPharmacyList__contacts { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 1); margin-inline-start: calc(var(--layout-spacing) * 0.25); margin-block-end: calc(var(--layout-spacing) * 2); color: var(--color-text); } .bnuLicensedPharmacyList__contactRow { display: flex; align-items: flex-start; } .bnuLicensedPharmacyList__contactIcon { display: inline-flex; flex-shrink: 0; width: 23px; margin-block-start: 3px; color: var(--color-text-light); } .bnuLicensedPharmacyList__licenseLink { color: var(--color-text); text-decoration: underline; margin-inline-start: 3px; overflow-wrap: anywhere; } .bnuLicensedPharmacyList__hours { display: flex; align-items: flex-start; } .bnuLicensedPharmacyList__hoursLines { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.35); } .bnuLicensedPharmacyList__manager { display: block; } .bnuLicensedPharmacyList__managerName { margin-inline-start: 23px; color: var(--color-text); font-size: 1rem; white-space: nowrap; } .bnuLicensedPharmacyList__managerDetails { margin-inline-start: 23px; color: var(--color-text-light); font-size: 0.85em; white-space: nowrap; } .bnuLicensedPharmacyList__links { display: none; flex-direction: column; gap: calc(var(--layout-spacing) * 2); margin-block-start: calc(var(--layout-spacing) * 1.5); } .bnuLicensedPharmacyList__links a { position: relative; display: inline-flex; width: 100%; color: var(--color-text); font-weight: 500; font-size: 1rem; line-height: 1.5; text-decoration: none; } .bnuLicensedPharmacyList__links a i { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); } .bnuLicensedPharmacyList__links a + a::before { content: ""; display: block; width: 100%; position: absolute; top: calc(var(--layout-spacing) * -1); left: 0; border-top: 1px solid var(--color-border, rgb(204, 212, 224)); } .bnuLicensedPharmacyList__others { margin-block-start: calc(var(--layout-spacing) * 4); } .bnuLicensedPharmacyList__othersTitle { margin-block: 0 calc(var(--layout-spacing) * 2); font-size: 1.65rem; } .bnuLicensedPharmacyList__grid { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 2); margin: 0; } .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__item { display: flex; flex-direction: column; width: 100%; padding: calc(var(--layout-spacing) * 2); border: 1px solid var(--color-border, rgba(0, 38, 100, 0.1)); border-radius: var(--border-radius); } @media (min-width: 640px) { .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__item { width: calc(50% - var(--layout-spacing)); } } @media (min-width: 768px) { .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__item { width: calc(33.333% - var(--layout-spacing) * 4 / 3); } } @media (min-width: 1024px) { .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__item { width: calc(25% - var(--layout-spacing) * 1.5); } } .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__links--main { display: none !important; } .bnuLicensedPharmacyList__grid .bnuLicensedPharmacyList__links--list { display: flex; margin-block-start: calc(var(--layout-spacing) * 2); } .bnuLicensedPharmacyList__services { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.35); margin-block-start: auto; position: relative; } .bnuLicensedPharmacyList__serviceBadge { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: calc(var(--layout-spacing) * 0.4) calc(var(--layout-spacing) * 1); border-radius: var(--border-radius-small, var(--border-radius)); background: var(--color-bg-muted, #e6eaf0); color: var(--color-text); font-weight: 500; cursor: help; } .bnuLicensedPharmacyList__serviceBadge:hover .bnuLicensedPharmacyList__serviceTooltip, .bnuLicensedPharmacyList__serviceBadge:focus .bnuLicensedPharmacyList__serviceTooltip { opacity: 1; } .bnuLicensedPharmacyList__serviceTooltip { position: absolute; top: -33px; left: 0; padding: calc(var(--layout-spacing) * 0.4) calc(var(--layout-spacing) * 0.8); border-radius: var(--border-radius-small, var(--border-radius)); background: var(--color-bg-muted, #e6eaf0); font-size: 0.85em; opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; z-index: 1; } .bnuLicensedPharmacyList__wolt { color: var(--color-text); } .bnuLicensedPharmacyList__empty { color: var(--color-text-light); } .bnuLicensedPharmacyList__dialogPharmacy { margin-block: calc(var(--layout-spacing) * 0.5) 0; color: var(--color-text-light); font-size: 0.9375rem; } #pharmacyContactForm form.contactForm { position: relative; } #pharmacyContactForm form.contactForm #website { display: none; } #pharmacyContactForm form.contactForm .error { border-color: var(--color-error); } #widget-licensedPharmacyListMessageTop, #widget-licensedPharmacyListMessageMiddle, #widget-licensedPharmacyListMessageBottom { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { #widget-licensedPharmacyListMessageTop, #widget-licensedPharmacyListMessageMiddle, #widget-licensedPharmacyListMessageBottom { margin-block-start: var(--layout-spacing); } } #widget-licensedPharmacyListMessageMiddle + .bnuLicensedPharmacyList__others { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { #widget-licensedPharmacyListMessageMiddle + .bnuLicensedPharmacyList__others { margin-block-start: var(--layout-spacing); } } html.licensedPharmacyList .bnuPageHeader { margin-block-end: calc(var(--layout-spacing) * 0.5); } @media (min-width: 768px) { html.licensedPharmacyList .bnuPageHeader { margin-block-start: calc(var(--layout-spacing) * 3); } } @media (max-width: 768px) { html.licensedPharmacyList .bnuPageHeader { margin-block-start: calc(var(--layout-spacing) * 1.5); } } .bnuPharmacyNotFound { max-width: 36rem; margin-block: calc(var(--layout-spacing) * 3); } .bnuPharmacyNotFound h1 { margin: 0 0 calc(var(--layout-spacing) * 1.5); } .bnuPharmacyNotFound p { margin: 0 0 calc(var(--layout-spacing) * 2); } .bnuPharmacyNotFound__home { margin-block-start: calc(var(--layout-spacing) * 0.5); } .bnuQAPage { margin-block-end: calc(var(--layout-spacing) * 5); } @media (max-width: 768px) { .bnuQAPage { margin-block-end: calc(var(--layout-spacing) * 4); } } .bnuQAPage__hero { position: relative; display: flex; align-items: center; justify-content: center; height: 420px; margin-block-end: calc(var(--layout-spacing) * 5); padding-inline: var(--layout-padding); background: url(../../../images/bgTop.png) center/cover no-repeat; } @media (max-width: 768px) { .bnuQAPage__hero { height: auto; margin-block-end: calc(var(--layout-spacing) * 3.5); padding-block: calc(var(--layout-spacing) * 9) calc(var(--layout-spacing) * 5); } } .bnuQAPage__hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 38, 100, 0.35); } .bnuQAPage__heroInner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 48rem; } .bnuQAPage__title { margin-block: 0 calc(var(--layout-spacing) * 3.5); text-align: center; color: #fff; } @media (max-width: 768px) { .bnuQAPage__title { margin-block-end: calc(var(--layout-spacing) * 5); } } .bnuQAPage__search { width: 100%; margin-block-end: calc(var(--layout-spacing) * 2); } .bnuQAPage__keywords { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.75); justify-content: center; } .bnuQAPage__keywords .bnuButton { --height: 36px; padding-inline: calc(var(--layout-spacing) * 0.9); font-size: 0.8125rem; text-transform: none; } .bnuQAPage__keywords .bnuButton.active { --color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-accent); color: #fff; } .bnuQAPage__keywords .bnuButton.moreKeywordsV2 { width: 100%; } .bnuQAPage__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuQAPage__layout { flex-direction: column; } } .bnuQAPage__main { width: 66.666%; min-width: 0; } @media (max-width: 768px) { .bnuQAPage__main { width: 100%; } } .bnuQAPage__aside { width: 33.333%; min-width: 0; } @media (max-width: 768px) { .bnuQAPage__aside { width: 100%; } } .bnuQAPage__questions { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuQAPage__empty { margin: 0; color: var(--color-text-light); } .bnuQAPage__more { margin-block-start: var(--layout-spacing); } @media (max-width: 768px) { .bnuQAPage__more { width: 100%; } } .bnuQAPage__ask { padding: calc(var(--layout-spacing) * 2); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); } .bnuQAPage__askTitle { margin-block: 0 var(--layout-spacing); } .bnuQAPage__askText { margin-block: 0 calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); } .bnuProductBacklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); margin-block-start: calc(var(--layout-spacing) * 1.5); } @media (max-width: 768px) { .bnuProductBacklinks { grid-template-columns: minmax(0, 1fr); } } .productItem--backlink { min-width: 0; } .productItem--backlink .productItem__wrapList { display: flex; align-items: flex-start; column-gap: calc(var(--layout-spacing)); min-height: 108px; height: 108px; padding: calc(var(--layout-spacing)); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: #fff; } @media (max-width: 768px) { .productItem--backlink .productItem__wrapList { min-height: 88px; height: 88px; } } .productItem--backlink .productItem__image { flex-shrink: 0; max-width: 60px; } .productItem--backlink .productItem__image img { display: block; width: 100%; height: auto; } .productItem--backlink .productItem__infoMiddle { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; } .productItem--backlink .productItem__title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-text); font-size: 0.875rem; font-weight: 400; line-height: 1.4; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } @media (max-width: 768px) { .productItem--backlink .productItem__title { -webkit-line-clamp: 2; line-clamp: 2; } } .productItem--backlink .productItem__infoMiddle > a { text-decoration: none; } .productItem--backlink .productItem__backlinkPriceWrap { display: flex; align-items: center; column-gap: calc(var(--layout-spacing) * 0.65); margin-block-start: auto; } .productItem--backlink .productItem__price { font-size: 0.875rem; line-height: 1.15; font-weight: 600; color: var(--color-text); } .productItem--backlink .productItem__priceOld { color: var(--color-text-light); font-weight: 400; text-decoration: line-through; } .productItem--backlink .productItem__priceRegular--orange { color: var(--color-warning); } .askQuestionForm { position: relative; } .thanks { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; padding: var(--layout-spacing); background: #fff; color: var(--color-success); font-size: 1.25rem; text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; } .thanks.showMessage { visibility: visible; opacity: 1; } .bnuDialog section:has(.askQuestionForm) { position: relative; } .bnuProductQAForm__disclaimer, .bnuProductQAForm__questionLead, .bnuProductQAForm__questionText { margin: 0 0 var(--layout-spacing); color: var(--color-text-light); font-size: 0.9375rem; line-height: 1.5; } .bnuProductQAForm__questionLead { margin-block-end: calc(var(--layout-spacing) * 0.5); color: var(--color-text); } .bnuProductQAForm__questionText { margin-block-end: calc(var(--layout-spacing) * 1.5); color: var(--color-text); } .bnuProductQAForm__form { --row-gap: calc(var(--layout-spacing) * 1.5); } @media (max-width: 768px) { .bnuProductQAForm__form { --row-gap: calc(var(--layout-spacing) * 2); } } .bnuFaqPage { margin-block-end: calc(var(--layout-spacing) * 5); } @media (max-width: 768px) { .bnuFaqPage { margin-block-end: calc(var(--layout-spacing) * 4); } } .bnuFaqPage__hero { position: relative; display: flex; align-items: center; justify-content: center; height: 260px; margin-block-end: calc(var(--layout-spacing) * 5); padding-inline: var(--layout-padding); background: url(../../../images/bgTop.png) center/cover no-repeat; } @media (max-width: 768px) { .bnuFaqPage__hero { margin-block-end: calc(var(--layout-spacing) * 2.5); } } .bnuFaqPage__hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 38, 100, 0.35); } .bnuFaqPage__heroInner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 48rem; } .bnuFaqPage__title { margin: 0; text-align: center; color: #fff; } .bnuFaqPage__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuFaqPage__layout { flex-direction: column; } } .bnuFaqPage__aside { position: sticky; top: calc(var(--promo-height) + var(--header-height) + var(--layout-spacing) * 2); flex: 0 0 25%; width: 25%; min-width: 0; } @media (max-width: 768px) { .bnuFaqPage__aside { display: none; } } .bnuFaqPage__navList { list-style: none; margin: 0; padding: 0; } .bnuFaqPage__navLink { display: block; padding: calc(var(--layout-spacing) * 1.1) calc(var(--layout-spacing) * 1.5); border-left: 1px solid var(--color-border); background-color: #fff; color: var(--color-text); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bnuFaqPage__navLink:hover, .bnuFaqPage__navLink:focus-visible { background-color: var(--color-bg); color: var(--color-text); text-decoration: none; } .bnuFaqPage__navLink.active { border-left: 3px solid var(--color-text); background-color: var(--color-bg); color: var(--color-text); } .bnuFaqPage__main { flex: 1 1 0; min-width: 0; width: 75%; } @media (max-width: 768px) { .bnuFaqPage__main { width: 100%; } } .bnuFaqPage__group { margin-block-end: calc(var(--layout-spacing) * 5); scroll-margin-top: calc(var(--promo-height) + var(--header-height) + var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuFaqPage__group { margin-block-end: calc(var(--layout-spacing) * 3.5); } } .bnuFaqPage__group:last-child { margin-block-end: 0; } .bnuFaqPage__groupTitle { margin-block: 0 calc(var(--layout-spacing) * 2); } html.scrolled .luigi-ac-heromobile { position: fixed !important; top: 80px !important; } html.scrolled.sliderBannerTopVisible .luigi-ac-heromobile { top: 162px !important; } .luigi-ac { display: block; width: 100% !important; margin-right: auto !important; margin-left: auto !important; max-width: var(--layout-mw) !important; padding-right: calc(var(--layout-spacing) * 2) !important; padding-left: calc(var(--layout-spacing) * 2) !important; } @media (max-width: 1024px) { .luigi-ac { max-width: 100% !important; } } .luigi-ac .luigi-ac-caret, .luigi-ac .luigi-ac-ribbon { display: none; } .luigi-ac-footer { display: none; } .luigi-ac-open:before { background: white !important; } @media (max-width: 1020px) { .luigi-ac-open { padding-left: 16px !important; padding-right: 16px !important; } .luigi-ac-heromobile-input-wrap { position: absolute !important; top: 0 !important; margin-left: -16px !important; width: 100vw !important; padding: 0 !important; border-bottom: 1px solid var(--color-border); background: white; } .luigi-ac-heromobile-input-wrap .luigi-ac-heromobile-input { top: 49px !important; height: 48px !important; padding-left: 16px !important; border-bottom: 1px solid var(--color-border) !important; background: white; color: var(--color-text) !important; } .luigi-ac-heromobile-input-wrap .allResultsBtn { position: absolute; top: 62px; right: 12px; font-size: 13px; font-weight: 500; color: var(--color-text); } .luigi-ac-heromobile-input-wrap .allResultsBtn i { margin-left: 8px; font-size: 16px; } .luigi-ac-heromobile-input-clear { display: none !important; } .luigi-ac-inner { padding-top: 0 !important; } } .luigi-ac-close { display: none !important; } .bnuLuigisSearch__container { width: 100%; padding: 24px 24px 20px; border-radius: var(--border-radius); background: white; } @media (min-width: 1020px) { .bnuLuigisSearch__container { box-shadow: var(--card-box-shadow, 0 12px 24px rgba(0, 0, 0, 0.1)); } } @media (max-width: 1020px) { .bnuLuigisSearch__container { padding: 0; } } .bnuLuigisSearch__mobileHeader { display: none; } @media (max-width: 1020px) { .bnuLuigisSearch__mobileHeader { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-right: -16px; margin-left: -16px; padding-left: 16px; border-bottom: 1px solid var(--color-border); background: white; color: var(--color-text); font-size: 18px; line-height: 48px; } } .bnuLuigisSearch { display: flex; flex-wrap: wrap; padding-right: 0; } @media (max-width: 1020px) { .bnuLuigisSearch { max-height: calc(100vh - 112px); margin: 48px -15px 0; padding-right: 15px; padding-left: 15px; overflow-x: hidden; overflow-y: auto; } } .bnuLuigisSearch h4 { margin-bottom: 8px; color: var(--color-text); font-weight: 500; font-size: 15px; } @media (max-width: 1020px) { .bnuLuigisSearch h4 { display: none; } } .bnuLuigisSearch__sidebar { flex: 0 0 25%; max-width: 294px; margin-top: -20px; margin-bottom: -24px; margin-left: calc(var(--layout-spacing, 12px) * -0.75); padding: 20px 24px 24px; border-right: 1px solid var(--color-border); border-radius: var(--border-radius) 0 0 var(--border-radius); background: var(--color-bg, #f7f8fa); color: var(--color-text); } @media (max-width: 1020px) { .bnuLuigisSearch__sidebar { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0 0 12px; padding: 0; border: none; background: none; } } .bnuLuigisSearch__sidebarQuery { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 15px; } .bnuLuigisSearch__sidebarQuery span { display: flex; align-items: center; } .bnuLuigisSearch__sidebarQuery span i { display: flex; align-items: center; justify-content: center; width: 20px; height: 16px; margin-right: 4px; font-size: 14px; line-height: 16px; } .bnuLuigisSearch__sidebarQuery a { display: flex; align-items: center; font-weight: 500; font-size: 12px; color: var(--color-text); } .bnuLuigisSearch__sidebarQuery a i { margin-left: 4px; } @media (max-width: 1020px) { .bnuLuigisSearch__sidebarQuery { display: none; } } @media (min-width: 1020px) { .bnuLuigisSearch__results { margin-top: 20px; } } .bnuLuigisSearch__results ul { padding-left: 0; list-style: none; } @media (max-width: 1020px) { .bnuLuigisSearch__results ul { margin-right: -16px; margin-left: -16px; } } .bnuLuigisSearch__results li { list-style: none; font-size: 14px; line-height: 16px; } .bnuLuigisSearch__results li:hover { background-color: var(--color-bg-hover, color-mix(in oklch, var(--color-text), transparent 96%)); } @media (min-width: 1020px) { .bnuLuigisSearch__results li { margin-right: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; } } .bnuLuigisSearch__results li.query { font-weight: 700; } @media (max-width: 1020px) { .bnuLuigisSearch__results li.query { padding: 8px 16px; border-bottom: 1px solid var(--color-border); } } .bnuLuigisSearch__results li a { display: inline-block; width: 100%; padding-top: 6px; padding-bottom: 6px; color: var(--color-text); } .bnuLuigisSearch__results li a span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; text-overflow: ellipsis; } .bnuLuigisSearch__results li em { font-weight: 400; font-style: normal; } @media (max-width: 1020px) { .bnuLuigisSearch__results.queriesResults { margin-bottom: 16px; } } .bnuLuigisSearch__separator { margin-top: -20px; margin-bottom: -24px; border-left: 1px solid var(--color-border); } @media (max-width: 1020px) { .bnuLuigisSearch__separator { display: none; } } .bnuLuigisSearch__topProduct { flex: 0 0 25%; padding: 0 24px 24px; } .bnuLuigisSearch__topProduct h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-weight: 400; font-size: 15px; text-overflow: ellipsis; } .bnuLuigisSearch__topProduct .bnuProduct__price.wrap { flex-wrap: wrap; } @media (max-width: 1020px) { .bnuLuigisSearch__topProduct { display: none; } } .bnuLuigisSearch__products { flex: 1 1 0; min-width: 0; padding-left: 23px; } @media (max-width: 1020px) { .bnuLuigisSearch__products { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0 0 12px; padding: 0; } } .bnuLuigisSearch__itemsWrap { display: none; flex-wrap: wrap; gap: 12px; margin-left: 0; } .bnuLuigisSearch__itemsWrap.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1020px) { .bnuLuigisSearch__itemsWrap { margin-right: -17px; } } @media (max-width: 1020px) { .bnuLuigisSearch__itemsWrap { margin-right: 0; } .bnuLuigisSearch__itemsWrap.active { grid-template-columns: 1fr; } } .bnuLuigisSearch__tabs { display: flex; margin-bottom: 12px; } @media (min-width: 1020px) { .bnuLuigisSearch__tabs { display: none; } } @media (max-width: 1020px) { .bnuLuigisSearch__tabs { margin-right: -16px; margin-left: -16px; } } .bnuLuigisSearch__tabs--extended { flex-wrap: nowrap; overflow: auto; } .bnuLuigisSearch__tabs--extended .bnuLuigisSearch__tab { padding-right: 24px; padding-left: 24px; } .bnuLuigisSearch__tab { display: flex; flex-grow: 1; align-items: center; justify-content: center; padding: 12px 0; border: none; border-bottom: 1px solid var(--color-border); background: none; color: var(--color-text-light); font-size: 16px; line-height: 24px; white-space: nowrap; cursor: pointer; } .bnuLuigisSearch__tab.active { border-bottom: 3px solid var(--color-accent); color: var(--color-text); } .bnuLuigisSearch__tabPanel { display: none; } .bnuLuigisSearch__tabPanel.active { display: block; } .bnuLuigisSearch__tabPanel.bnuLuigisSearch__itemsWrap.active { display: grid; } @media (min-width: 1020px) { .bnuLuigisSearch__tabPanel:not(.bnuLuigisSearch__itemsWrap) { display: none; } } .bnuLuigisSearch__tabPanel .bnuLuigisSearch__results { display: block; } .bnuLuigisSearch__tabPanel .bnuLuigisSearch__results:empty { display: none; } .bnuLuigisSearch__tabPanel .bnuLuigisSearch__results li { display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--color-border); } .bnuLuigisSearch__showAll { grid-column: 1/-1; width: 100%; margin-top: 12px; } @media (min-width: 1020px) { .bnuLuigisSearch__showAll { display: flex; justify-content: flex-end; } } @media (max-width: 1020px) { .bnuLuigisSearch__showAll { margin-top: 8px; } .bnuLuigisSearch__showAll .bnuButton { width: 100%; } } .bnuLuigisSearch__noResults, .bnuLuigisSearch__empty { margin-top: 8px; color: var(--color-text); } .bnuLuigisSearch__empty { margin-top: 16px; margin-bottom: 16px; } .bnuLuigisSearch__products .bnuLuigisSearch__empty { grid-column: 1/-1; margin-top: 8px; } .bnuLuigisSearch__priceNote { width: 100%; margin: 0; font-size: 10px; font-weight: 500; line-height: 1.2; text-transform: uppercase; } .bnuLuigisSearch__priceNote--promo { color: var(--color-promo); } .bnuLuigisSearch__priceNote--lc { color: var(--color-accent); } .bnuLuigisSearch__voucherPrice { display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 2px; align-items: center; width: 100%; flex: 1 0 100%; margin-top: 4px; font-size: 13px; font-weight: 500; } .bnuLuigisSearch__voucherPrice > .bnuProductBadge { flex: 0 0 auto; height: 16px; padding-inline: 0.25em; font-size: 11px; } .bnuLuigisSearch__voucherPrice > ins { color: var(--color-promo); font-weight: 700; text-decoration: none; white-space: nowrap; } .bnuLuigisSearch__voucherPrice > img { height: 14px; width: auto; } .bnuLuigisSearch__voucherPrice > p { flex: 1 0 100%; margin: 0; color: var(--color-promo); font-size: 10px; font-weight: 500; line-height: 1.2; text-transform: uppercase; } .bnuLuigisSearch__voucherPrice > p strong { font-weight: 700; } .bnuLuigisSearch__voucherPrice--lc > ins { color: var(--color-accent); } .bnuLuigisSearch__voucherPrice--lc > p { color: var(--color-accent); } .bnuProduct.bnuProduct--luigis .bnuProduct__bottom, .bnuProduct.bnuProduct--luigisTop .bnuProduct__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .bnuLuigisSearch__multiQnt { margin-left: 4px; } .bnuProduct.bnuProduct--luigis .bnuProduct__price, .bnuProduct.bnuProduct--luigisTop .bnuProduct__price { font-size: clamp(0.75rem, 0.67rem + 0.27vw, 0.88rem); column-gap: 4px; flex-wrap: wrap; row-gap: 2px; } .bnuProduct.bnuProduct--luigis .bnuProduct__price > del, .bnuProduct.bnuProduct--luigisTop .bnuProduct__price > del { font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); } .bnuProduct.bnuProduct--luigis .bnuProduct__price > img, .bnuProduct.bnuProduct--luigisTop .bnuProduct__price > img { height: 14px; } .bnuProduct.bnuProduct--luigis .bnuProduct__price > .bnuProductBadge, .bnuProduct.bnuProduct--luigisTop .bnuProduct__price > .bnuProductBadge { height: 16px; padding-inline: 0.25em; font-size: 11px; } .bnuLuigisSearch__specialIcon { display: inline-flex; position: relative; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--border-radius-small, 4px); } .bnuLuigisSearch__specialIcon i { font-size: 16px; } .bnuLuigisSearch__badge--small { transform: scale(0.85); transform-origin: center; } .bnuProduct.bnuProduct--luigisTop { display: block; grid-row: auto; height: auto; max-height: 480px; gap: 0; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__main { display: flex; flex-direction: column; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__top { display: flex; flex-direction: column; } .bnuProduct.bnuProduct--luigisTop figure { position: relative; margin: 0 0 16px; height: 216px; } .bnuProduct.bnuProduct--luigisTop figure .product__image { width: 100%; height: 100%; object-fit: contain; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges { margin: 0; padding: 0; list-style: none; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--bl { bottom: 0; left: 0; right: auto; align-items: flex-start; } .bnuProduct.bnuProduct--luigis { display: block; position: relative; grid-row: auto; width: 100%; max-width: none; min-width: 0; height: auto; min-height: 132px; padding: 0; border: none; border-radius: 0; background: transparent; gap: 0; } @media (max-width: 1020px) { .bnuProduct.bnuProduct--luigis { min-height: auto; } } .bnuProduct.bnuProduct--luigis .bnuProduct__main { display: block; position: relative; row-gap: 0; min-height: 132px; padding: var(--bnu-luigis-card-pad, 12px); border: 1px solid var(--color-border); border-radius: var(--card-border-radius, var(--border-radius)); background-color: white; --bnu-luigis-card-pad: 12px; --bnu-luigis-card-pad-x: 12px; } @media (max-width: 1020px) { .bnuProduct.bnuProduct--luigis .bnuProduct__main { min-height: auto; --bnu-luigis-card-pad: 8px; --bnu-luigis-card-pad-x: 20px; padding: var(--bnu-luigis-card-pad) var(--bnu-luigis-card-pad-x); } } .bnuProduct.bnuProduct--luigis .bnuProduct__top { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; row-gap: 0; } .bnuProduct.bnuProduct--luigis .bnuProduct__top > figure { position: relative; top: auto; left: auto; flex: 0 0 96px; width: 96px; height: 96px; margin: 0; overflow: visible; } @media (max-width: 1020px) { .bnuProduct.bnuProduct--luigis .bnuProduct__top > figure { flex-basis: 80px; width: 80px; height: 80px; } } .bnuProduct.bnuProduct--luigis .bnuProduct__top > figure a, .bnuProduct.bnuProduct--luigis .bnuProduct__top > figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .bnuLuigisSearch__productBody { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; min-width: 0; } .bnuProduct.bnuProduct--luigis h2 { flex: 0 1 auto; margin: 0; font-weight: 400; font-size: 13px; line-height: 1.3; } .bnuProduct.bnuProduct--luigis h2 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: var(--color-text); text-overflow: ellipsis; word-break: break-word; } .bnuProduct.bnuProduct--luigis .bnuProduct__bottom { margin-top: auto; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__buttons { width: 100%; margin-block-start: 8px; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__buttons .bnuButton { --button-height: 40px; padding-inline: 10px; font-size: 13px; } .bnuLuigisSearch__addToCart { width: 100%; margin-block-start: 8px; } .bnuLuigisSearch__addToCart .bnuButton { --button-height: 36px; padding-inline: 10px; font-size: 12px; } .bnuLuigisSearch__addToCart .bnuButton > i { display: none; } @media (min-width: 1020px) { .bnuLuigisSearch__addToCart { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: auto; margin-block-start: 0; } .bnuLuigisSearch__addToCart .bnuButton { padding: 8px; width: var(--button-height); } .bnuLuigisSearch__addToCart .bnuButton > span { display: none; } .bnuLuigisSearch__addToCart .bnuButton > i { display: inline-block; margin: 0; font-size: 20px; } } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--tl { position: absolute; top: 0; left: 0; right: auto; z-index: 1; align-items: flex-start; row-gap: 2px; } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--bl { position: absolute; left: 0; right: auto; bottom: 0; z-index: 1; align-items: flex-start; row-gap: 2px; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--tl { position: absolute; top: 0; left: 0; right: auto; z-index: 1; align-items: flex-start; row-gap: 2px; } .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--bl { position: absolute; left: 0; right: auto; bottom: 0; z-index: 1; align-items: flex-start; row-gap: 2px; } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--tl .bnuProductBadge--pill, .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--tl .bnuProductBadge--pill, .bnuProductBadge.bnuProductBadge--pill { width: auto; height: auto; aspect-ratio: auto; padding: 0 3px; border-radius: var(--border-radius-small, 4px); font-size: 10px; line-height: 16px; white-space: nowrap; } .bnuProductBadge.bnuProductBadge--pill.bnuProductBadge--card { padding-right: 10px; } .bnuProductBadge.bnuProductBadge--pill.bnuProductBadge--card img.card { top: -1px; right: -12px; height: 12px; transform: none; } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--bl .bnuProductBadge, .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--bl .bnuProductBadge { margin: 0; padding: 0 4px; height: auto; min-height: 0; font-size: 10px; font-weight: 600; line-height: 16px; } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--bl .bnuCampaignSticker, .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--bl .bnuCampaignSticker { width: 40px; height: 40px; } .bnuProduct.bnuProduct--luigis .bnuProduct__badges--bl .bnuCampaignSticker img, .bnuProduct.bnuProduct--luigisTop .bnuProduct__badges--bl .bnuCampaignSticker img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProduct.bnuProduct--luigis.bnuLuigisSearch__productRow--multiQntLC .bnuProduct__top { padding-right: 40px; } @media (max-width: 1020px) { .bnuLuigisSearch__topProduct, .brandsResults, .categoriesResults, .articlesResults, .pharmaciesResults, .pagesResults { display: none; } .bnuLuigisSearch h4 { display: none; } } .bnuMinCartPromo__textOnly { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; } .bnuMinCartPromo__textOnly.bnuMinCartPromo--promo { color: var(--color-promo); } .bnuMinCartPromo__textOnly.bnuMinCartPromo--lc { color: var(--color-accent); } .bnuLuigisResults { margin-bottom: calc(var(--layout-spacing) * 4); font-family: var(--font-main) !important; padding-top: 0; color: var(--color-text); } .bnuLuigisResults.lb-search, #lb-search-element, #lb-search-element .lb-search, #lb-search-element .bnuLuigisResults { font-family: var(--font-main) !important; } .bnuLuigisResults button, .bnuLuigisResults input, .bnuLuigisResults select, .bnuLuigisResults textarea, .bnuLuigisResults .lb-checkbox__text, .bnuLuigisResults .lb-facet__title, .bnuLuigisResults .lb-facet__search input, .bnuLuigisResults .lb-pagination__btn, #lb-search-element button, #lb-search-element input, #lb-search-element select, #lb-search-element textarea, #lb-search-element .lb-checkbox__text, #lb-search-element .lb-facet__title, #lb-search-element .lb-facet__search input, #lb-search-element .lb-pagination__btn { font-family: var(--font-main) !important; } .bnuLuigisResults__body { color: var(--color-text); } .bnuLuigisResults .bnuProductListing__toolbar { justify-content: flex-end; } .bnuLuigisResults .bnuProductListing__pageTitle span { color: var(--color-accent); } .bnuLuigisResults .bnuProduct h2, #lb-search-element .bnuProduct h2, .lb-search .bnuProduct h2 { font-size: clamp(0.81rem, 0.69rem + 0.4vw, 1rem); } .bnuLuigisResults__tabs { margin-bottom: calc(var(--layout-spacing) * 2); } .bnuLuigisResults.lb-search .lb-container.bnuProductListing, .bnuLuigisResults .lb-container.bnuProductListing { padding: 0; width: auto; float: none; } .bnuLuigisResults .lb-search__main { padding-left: 0; width: auto; min-width: 0; float: none; } .bnuLuigisResults .bnuProductFiltersSidebar .lb-aside-border { border: 0; padding: 0; } .bnuLuigisResults .bnuProductFiltersSidebar .lb-aside-heading { display: none; } .bnuLuigisResults__activeFilters { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.5); margin-bottom: var(--layout-spacing); } .bnuLuigisResults .lb-active-filter { cursor: pointer; } .bnuLuigisResults .lb-active-filter__value span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--border-radius-small); background: var(--color-bg); color: var(--color-text); font-size: 12px; line-height: 16px; } .bnuLuigisResults .lb-active-filter:hover .lb-active-filter__value span { background: var(--color-accent-bg, color-mix(in oklch, var(--color-accent), transparent 88%)); } .bnuLuigisResults .lb-active-filters__cancel, .bnuLuigisResults .lb-query-understanding__cancel, .bnuLuigisResults .lb-search-text-color-primary-clickable { color: var(--color-accent) !important; } .bnuLuigisResults .lb-active-filters__cancel:hover, .bnuLuigisResults .lb-query-understanding__cancel:hover, .bnuLuigisResults .lb-search-text-color-primary-clickable:hover { color: var(--color-accent) !important; text-decoration: underline; } .bnuLuigisResults .bnuProductFilters .lb-aside-section, #lb-search-element .bnuProductFilters .lb-aside-section { margin: 0 0 calc(var(--layout-spacing) * 1.5); padding: 0 0 calc(var(--layout-spacing) * 1.5); border: 0; border-bottom: 1px solid var(--color-border); max-width: none !important; } .bnuLuigisResults .bnuProductFilters .lb-facet, #lb-search-element .bnuProductFilters .lb-facet { margin: 0; padding: 0; border: 0 !important; border-bottom: none !important; max-width: none !important; } .bnuLuigisResults .bnuProductFilters .lb-facet__header, .bnuLuigisResults .bnuProductFilters .lb-facet__title { margin: 0 0 var(--layout-spacing); padding: 0; color: var(--color-text) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 24px !important; font-family: var(--font-main) !important; } .bnuLuigisResults .bnuProductFilters .lb-facet__title:before, .bnuLuigisResults .bnuProductFilters .lb-facet__title:after { content: none !important; display: none !important; } .bnuLuigisResults .bnuProductFilters .lb-facet__list { margin: 0; padding: 0; list-style: none; } .bnuLuigisResults .bnuProductFilters .lb-facet__search { margin-bottom: var(--layout-spacing); } .bnuLuigisResults .bnuProductFilters .lb-facet__search input { width: 100% !important; min-height: 42px !important; height: 42px !important; padding: 10px 12px !important; border: 1px solid var(--color-border) !important; border-radius: var(--border-radius-small) !important; background: #fff !important; color: var(--color-text) !important; font-size: 14px !important; font-family: var(--font-main) !important; box-shadow: none !important; } .bnuLuigisResults .bnuProductFilters .lb-facet__search input:focus { outline: none; border-color: var(--color-accent) !important; } .bnuLuigisResults .bnuProductFilters .lb-facet__more, .bnuLuigisResults .bnuProductFilters .lb-facet__show-more, .bnuLuigisResults .bnuProductFilters a.lb-facet__more { margin-top: 10px; color: var(--color-accent) !important; font-size: 14px; text-decoration: none; cursor: pointer; } .bnuLuigisResults .bnuProductFilters .lb-facet__more:hover, .bnuLuigisResults .bnuProductFilters .lb-facet__show-more:hover, .bnuLuigisResults .bnuProductFilters a.lb-facet__more:hover { text-decoration: underline; } .bnuLuigisResults .bnuProductFilters .lb-checkbox, #lb-search-element .bnuProductFilters .lb-checkbox, #lb-search-element .lb-checkbox { position: relative; display: block; margin: 0 0 8px !important; padding: 1px 0 0 24px !important; cursor: pointer; color: var(--color-text); } @media (max-width: 768px) { .bnuLuigisResults .bnuProductFilters .lb-checkbox, #lb-search-element .bnuProductFilters .lb-checkbox, #lb-search-element .lb-checkbox { margin-bottom: 10px !important; } } .bnuLuigisResults .bnuProductFilters .lb-checkbox__input, #lb-search-element .lb-checkbox__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__check, .bnuLuigisResults .bnuProductFilters .lb-checkbox__element, #lb-search-element .lb-checkbox__check, #lb-search-element .lb-checkbox__element { position: absolute !important; top: 1px !important; left: 0 !important; display: block !important; width: 16px !important; height: 16px !important; margin: 2px !important; border: 1px solid var(--color-border) !important; border-radius: var(--border-radius-small) !important; background-color: #fff !important; background-image: none !important; background-repeat: no-repeat !important; background-position: center !important; box-shadow: none !important; transform: none !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__check, #lb-search-element .lb-checkbox__check { z-index: 2; border-color: transparent !important; background-color: transparent !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__element, #lb-search-element .lb-checkbox__element { z-index: 1; } .bnuLuigisResults .bnuProductFilters .lb-checkbox:hover .lb-checkbox__element, #lb-search-element .lb-checkbox:hover .lb-checkbox__element { border-color: var(--color-accent) !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__input:checked + .lb-checkbox__check, .bnuLuigisResults .bnuProductFilters .lb-checkbox__check.lb-search-bg-color-primary, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__check, #lb-search-element .lb-checkbox__check.lb-search-bg-color-primary, #lb-search-element .bnuLuigisResults .lb-checkbox__check.lb-search-bg-color-primary, #lb-search-element .bnuProductFilters .lb-checkbox__check.lb-search-bg-color-primary { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M4.378 7.604c-.052.052-.122.052-.174 0L.04 3.44c-.053-.052-.053-.122 0-.174l1.443-1.444c.052-.052.122-.052.174 0L4.03 4.195c.035.035.07.035.105 0L8.291.04c.052-.052.121-.052.174 0l1.652 1.652c.052.052.052.121 0 .174l-5.739 5.74z'/%3E%3C/svg%3E") !important; } #lb-search-element .lb-checkbox__check.lb-search-bg-color-primary:after, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__check:after, #lb-search-element .bnuLuigisResults .lb-checkbox__check.lb-search-bg-color-primary:after, .bnuLuigisResults .lb-checkbox__check.lb-search-bg-color-primary:after, .bnuLuigisResults .lb-checkbox__input:checked + .lb-checkbox__check:after { content: none !important; display: none !important; color: #fff !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__input:checked + .lb-checkbox__element, .bnuLuigisResults .bnuProductFilters .lb-checkbox__input:checked + .lb-checkbox__check + .lb-checkbox__element, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__element, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__check + .lb-checkbox__element { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__input:checked + .lb-checkbox__element, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__element { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M4.378 7.604c-.052.052-.122.052-.174 0L.04 3.44c-.053-.052-.053-.122 0-.174l1.443-1.444c.052-.052.122-.052.174 0L4.03 4.195c.035.035.07.035.105 0L8.291.04c.052-.052.121-.052.174 0l1.652 1.652c.052.052.052.121 0 .174l-5.739 5.74z'/%3E%3C/svg%3E") !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__input:checked + .lb-checkbox__check + .lb-checkbox__element, #lb-search-element .lb-checkbox__input:checked + .lb-checkbox__check + .lb-checkbox__element { background-image: none !important; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__text, #lb-search-element .lb-checkbox__text { display: inline-block; padding-top: 0 !important; color: var(--color-text) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 20px !important; word-break: break-word; } .bnuLuigisResults .bnuProductFilters .lb-checkbox__hits, .bnuLuigisResults .bnuProductFilters .lb-facet__hits, #lb-search-element .lb-checkbox__hits, #lb-search-element .lb-facet__hits { color: var(--color-text-light, #767676); font-size: 13px; } .bnuLuigisResults .lb-search-bg-color-primary:not(.lb-checkbox__check), .bnuLuigisResults .lb-search-bg-color-primary-clickable, .bnuLuigisResults .lb-search-bg-color-secondary, .bnuLuigisResults .lb-search-bg-color-secondary-clickable, #lb-search-element .lb-search-bg-color-primary:not(.lb-checkbox__check), #lb-search-element .lb-search-bg-color-primary-clickable, #lb-search-element .lb-search-bg-color-secondary, #lb-search-element .lb-search-bg-color-secondary-clickable { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } .bnuLuigisResults .lb-search-bg-color-primary-clickable:hover, .bnuLuigisResults .lb-search-bg-color-secondary-clickable:hover { filter: brightness(0.92); } .bnuLuigisResults .lb-search-text-color-primary { color: var(--color-text) !important; } .bnuLuigisResults .bnuProductFiltersSidebar__footer { display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 11; width: 100%; margin: 0; padding: 12px 12px 24px; background: #fff; border-top: 1px solid var(--color-border); } @media (max-width: 768px) { .bnuLuigisResults .bnuProductFiltersSidebar__footer { display: block; } } .bnuLuigisResults .bnuProductFiltersSidebar__footer .bnuButton { width: 100%; } @media (max-width: 768px) { .bnuLuigisResults .bnuProductFiltersSidebar .bnuProductFilters__panel { padding-bottom: 100px; } } @media (max-width: 768px) { .bnuLuigisResults__sortDesktop { display: none; } } .bnuLuigisResults__sortMobile { display: none; } @media (max-width: 768px) { .bnuLuigisResults__sortMobile { display: flex; } } .bnuLuigisResults .bnuProductListing__sortDrawer .bnuLuigisResults__sortDesktop { display: none; } .bnuLuigisResults .bnuProductListing__sortDrawer .bnuLuigisResults__sortMobile { display: flex; } .bnuLuigisResults .bnuProductListing__toolbar .bnuLuigisResults__sortMobile { display: none; } .bnuLuigisResults .bnuProductListing__toolbar .bnuProductListing__viewOptionSelect { width: 220px; max-width: 220px; } .bnuLuigisResults .lb-pagination__pager, #lb-search-element .lb-pagination__pager { display: none; } .bnuLuigisResults .lb-pagination, #lb-search-element .lb-pagination { display: flex; justify-content: center; width: 100%; flex-direction: column; align-items: center; } .bnuLuigisResults .lb-pagination__btn, .bnuLuigisResults .lb-pagination__btn.lb-search-bg-color-primary-clickable, #lb-search-element .lb-pagination__btn, #lb-search-element .lb-pagination__btn.lb-search-bg-color-primary-clickable { --height: 48px; --color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; column-gap: 6px; height: var(--height); min-height: var(--height); padding-inline: 18px; border: none !important; border-radius: var(--border-radius-input); background-color: var(--color) !important; color: #fff !important; font-weight: 600; font-size: 14px; line-height: 16px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } @media (max-width: 768px) { .bnuLuigisResults .lb-pagination__btn, .bnuLuigisResults .lb-pagination__btn.lb-search-bg-color-primary-clickable, #lb-search-element .lb-pagination__btn, #lb-search-element .lb-pagination__btn.lb-search-bg-color-primary-clickable { --height: 44px; padding-inline: 16px; font-size: 13px; } } .bnuLuigisResults .lb-pagination__btn:hover, .bnuLuigisResults .lb-pagination__btn:focus-visible, .bnuLuigisResults .lb-pagination__btn.lb-search-bg-color-primary-clickable:hover, .bnuLuigisResults .lb-pagination__btn.lb-search-bg-color-primary-clickable:focus-visible, #lb-search-element .lb-pagination__btn:hover, #lb-search-element .lb-pagination__btn:focus-visible, #lb-search-element .lb-pagination__btn.lb-search-bg-color-primary-clickable:hover, #lb-search-element .lb-pagination__btn.lb-search-bg-color-primary-clickable:focus-visible { background-color: color-mix(in oklch, var(--color), black 25%) !important; color: #fff !important; filter: none; } .bnuLuigisResults .lb-pagination__btn:active, .bnuLuigisResults .lb-pagination__btn.lb-search-bg-color-primary-clickable:active, #lb-search-element .lb-pagination__btn:active, #lb-search-element .lb-pagination__btn.lb-search-bg-color-primary-clickable:active { background-color: color-mix(in oklch, var(--color), black 35%) !important; color: #fff !important; } .bnuLuigisResults .lb-no-results { padding: calc(var(--layout-spacing) * 2) 0; color: var(--color-text); } .bnuLuigisResults .lb-query-understanding { margin-bottom: var(--layout-spacing); } .bnuLuigisResults .lb-query-understanding__item { display: inline-block; margin: 0 4px 4px 0; padding: 4px 8px; border-radius: var(--border-radius-small); background: var(--color-accent-bg, color-mix(in oklch, var(--color-accent), transparent 90%)); color: var(--color-text); font-size: 12px; } .bnuLuigisResults[aria-busy=true] .bnuProductListing__products { opacity: 0.55; pointer-events: none; } #search-ui .bnuProductListing__productsGrid > .bnuProduct, #search-ui .bnuProductListing__productsGrid > .lb-product { min-width: 0; } .bnuLuigisResults .vue-slider { height: 4px !important; } .bnuLuigisResults .vue-slider-rail { background: var(--color-border) !important; } .bnuLuigisResults .vue-slider-process { background-color: var(--color-text) !important; height: 4px !important; } .bnuLuigisResults .vue-slider-dot { width: 16px !important; height: 16px !important; background: #fff !important; border: 2px solid var(--color-text) !important; border-radius: 50% !important; box-shadow: none !important; outline: 0 !important; cursor: pointer !important; } .bnuLuigisResults .vue-slider__text--top, .bnuLuigisResults .vue-slider__text { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; color: var(--color-text); font-size: 14px; } .bnuLuigisResults .vue-slider__text--top { justify-content: center; gap: 8px; } .bnuOldBrowserDialog__browsers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--layout-spacing); margin-block: var(--layout-spacing); } .bnuOldBrowserDialog__logo { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; } .bnuOldBrowserDialog__logo--opera { max-width: 100px; } .bnuOldBrowserDialog > footer { justify-content: flex-end; } .bnuTextBlock--narrow { max-width: 75%; } @media (max-width: 768px) { .bnuTextBlock--narrow { max-width: 100%; } } .bnuVideo__text { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuVideo__wrap iframe { max-width: 100%; } @media (max-width: 1024px) { .bnuVideo__wrap { position: relative; height: 0; padding-block-start: 25px; padding-block-end: 56.25%; } .bnuVideo__wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .bnuCta { display: block; margin: 0 0 calc(var(--layout-spacing) * 3) 0; color: var(--color-text); text-align: center; text-decoration: none; } .bnuCta__image { display: inline-block; position: relative; transition: background-size 0.3s; background-position: center center; background-size: 100%; background-repeat: no-repeat; width: 200px; height: 200px; } .bnuCta__overlay { display: flex; position: absolute; top: 0; left: 0; transition: opacity 0.4s; opacity: 0; background: color-mix(in srgb, var(--color-bg) 70%, transparent); padding: calc(var(--layout-spacing) * 1.5); width: 100%; height: 100%; overflow: hidden; align-items: center; } .bnuCta__overlayText { padding: 0 0 0 calc(var(--layout-spacing) * 0.5); color: var(--color-text); font-size: 16px; } .bnuCta__overlayTitle { margin: 0 0 calc(var(--layout-spacing) * 2) 0; font-family: var(--font-main); font-size: 20px; } .bnuCta__title { display: block; opacity: 1; margin: 0; font-family: var(--font-main); font-size: 20px; } .bnuCta:hover .bnuCta__image { background-size: 110%; } .bnuCta:hover .bnuCta__overlay { opacity: 1; } .bnuCta:hover .bnuCta__title { opacity: 0; } .bnuTextButton { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; padding-block: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuTextButton { flex-direction: column; text-align: center; } } .bnuTextButton--align-top { align-items: flex-start; } .bnuTextButton--align-center { align-items: center; } .bnuTextButton--align-bottom { align-items: flex-end; } .bnuTextButton--imageRight { flex-direction: row; } @media (max-width: 768px) { .bnuTextButton--imageRight { flex-direction: column-reverse; } } .bnuTextButton--imageLeft { flex-direction: row-reverse; } @media (max-width: 768px) { .bnuTextButton--imageLeft { flex-direction: column-reverse; } } .bnuTextButton__media, .bnuTextButton__content { width: 50%; min-width: 0; } @media (max-width: 768px) { .bnuTextButton__media, .bnuTextButton__content { width: 100%; } } @media (max-width: 768px) { .bnuTextButton__imgWrap { margin-block-end: calc(var(--layout-spacing) * 2); } } .bnuTextButton__imgWrap img { display: block; margin: 0 auto; width: 100%; max-width: 500px; height: auto; } .bnuTextButton__textWrap { position: relative; overflow: hidden; } .bnuTextButton__textWrap h3 { margin-block-end: 1em; max-width: 360px; font-weight: 700; font-size: clamp(1.5rem, 1.26rem + 0.81vw, 1.88rem); } @media (max-width: 768px) { .bnuTextButton__textWrap h3 { margin-inline: auto; } } .bnuTextButton__textWrap--clamped::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--color-bg) 0%, transparent) 0%, var(--color-bg) 75%); width: 100%; height: 150px; pointer-events: none; } .bnuTextButton__textWrap--expanded { overflow: visible; } .bnuTextButton .bnuButtonAsTextLink { margin-block-start: var(--layout-spacing); } .bnuTextButton__buttonWrap { margin-block-start: calc(var(--layout-spacing) * 2); } .bnuTextButton__buttonWrap--left { text-align: left; } @media (max-width: 768px) { .bnuTextButton__buttonWrap--left { text-align: center; } } .bnuTextButton__buttonWrap--center { text-align: center; } .bnuTextButton__buttonWrap--right { text-align: right; } @media (max-width: 768px) { .bnuTextButton__buttonWrap--right { text-align: center; } } .bnuTextColumns { display: grid; grid-template-columns: var(--bnuTextColumns-template, 1fr); column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-row-gap) * 1.5); } @media (max-width: 768px) { .bnuTextColumns { grid-template-columns: minmax(0, 1fr); row-gap: var(--layout-row-gap); } } .bnuTextColumns--align-center { align-items: center; } .bnuTextColumns--align-start { align-items: start; } .bnuTextColumns--align-end { align-items: end; } .bnuTextColumns__col > *:first-child { margin-block-start: 0; } .bnuTextColumns__col > *:last-child { margin-block-end: 0; } .bnuTextColumns__col--align-center { align-self: center; } .bnuTextColumns__col--align-start { align-self: start; } .bnuTextColumns__col--align-end { align-self: end; } .bnuBannerCarousel picture, .bnuBannerCarousel img { display: block; width: 100%; height: auto; object-fit: contain; } .bnuBannerCarousel a { display: block; } @media (max-width: 480px) { .block-bnr-100:has(.bnuBannerCarousel--fullWidth) .bnuBannerCarousel--fullWidth { width: 100vw; margin-inline: calc(50% - 50vw); } } @media (max-width: 768px) { .block-bnr-33-66 .bnuContainer .row.regular .col:first-child { margin-block-end: var(--layout-gap); } } @media (max-width: 768px) { .block-bnr-33-66 .bnuContainer .row.reversed .col:nth-child(2) { margin-block-end: var(--layout-gap); } } .bnuSliderBanner { list-style: none; margin: 0; padding: 0; overflow: hidden; } .bnuSliderBanner__slide { list-style: none; } .bnuSliderBanner__slide a { display: block; } .bnuSliderBanner img { max-height: 256px; object-fit: contain; } .bnuSliderBanner__item--withBg { padding-block: calc(var(--layout-spacing) * 0.333); } .bnuSliderBanner__text { white-space: pre; } .bnuSliderBanner__item--withImage { position: relative; display: inline-block; } .bnuSliderBanner__item--withImage img { display: block; } .bnuSliderBanner__item--withImage .bnuSliderBanner__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .bnuBrandCarousel__title { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuBrandCarousel__slide { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } @media (max-width: 768px) { .bnuBrandCarousel__slide { align-items: center; text-align: center; } } .bnuBrandCarousel__slide img { width: 100%; max-width: 278px; border-radius: var(--border-radius-small); } .bnuBrandCarousel__imageLink { display: block; } .bnuBrandCarousel__slideTitle { margin-block-start: calc(var(--layout-spacing) * 1.5); color: var(--color-text); font-weight: 700; font-size: clamp(1.25rem, 1.09rem + 0.54vw, 1.5rem); } .bnuBrandCarousel__slideDescription { margin-block-start: calc(var(--layout-spacing) * 0.5); } .bnuBrandCarousel__slideDescription p { margin: 0; color: var(--color-text); font-weight: 400; line-height: 1.6; font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); } .bnuBrandCarousel__cta { margin-block-start: calc(var(--layout-spacing) * 1.5); max-width: fit-content; } .bnuLinksCarousel__item { display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); padding: calc(var(--layout-spacing) * 1.25) calc(var(--layout-spacing) * 0.5); height: 100%; color: inherit; text-align: center; text-decoration: none; } .bnuLinksCarousel__item p { margin: 0; color: var(--color-text); font-weight: 500; line-height: 1.066em; font-size: 0.866em; } .bnuLinksCarousel__item i { width: 32px; height: 32px; color: color-mix(in srgb, var(--color-text) 40%, transparent); font-size: 24px; line-height: 1; } .bnuLinksCarousel__item--image { padding: 0; } .bnuLinksCarousel__item--image img { display: block; width: 100%; height: auto; } .bnuLinksCarousel__item--image .bnuLinksCarousel__title { padding: calc(var(--layout-spacing) * 0.5) calc(var(--layout-spacing) * 0.75); height: 2.8em; } .bnuLinksCarousel__title { display: flex; justify-content: center; align-items: center; height: 2.1em; } .bnuLinksCarousel__title p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; } .chainWrap > *:has(.bnuExpandBox--noSpacing) { margin-block: calc(var(--layout-spacing) * -1.5); } .bnuContentCards__intro { margin-block-end: calc(var(--layout-spacing) * 2.5); } .bnuContentCards__intro h2 { margin: 0 0 0.5em; font-size: clamp(1.13rem, 0.88rem + 0.81vw, 1.5rem); } .bnuContentCards__grid { display: flex; flex-wrap: wrap; column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bnuContentCards__grid { row-gap: calc(var(--layout-spacing) * 1.5); } } .bnuContentCards__grid--fitHeadings .bnuContentCards__item { flex-basis: max-content; } .bnuContentCards__item { min-width: 0; } .bnuContentCards__item--auto { flex: 1 1 auto; } .bnuContentCards__item--3 { width: calc(25% - var(--layout-column-gap) * 0.75); } .bnuContentCards__item--4 { width: calc(33.333% - var(--layout-column-gap) * 0.67); } .bnuContentCards__item--6 { width: calc(50% - var(--layout-column-gap) * 0.5); } .bnuContentCards__item--12 { width: 100%; } @media (max-width: 768px) { .bnuContentCards__item--3, .bnuContentCards__item--4, .bnuContentCards__item--6, .bnuContentCards__item--12, .bnuContentCards__item--auto { width: 100%; } } .bnuContentCard { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bnuContentCard { gap: calc(var(--layout-spacing) * 1.25); } } .bnuContentCard__image { border-radius: var(--border-radius-small); object-fit: cover; } .bnuContentCard__image--icon { width: 64px; height: 64px; } @media (max-width: 768px) { .bnuContentCard__image--icon { width: 32px; height: 32px; } } .bnuContentCard--layout1.bnuContentCard--center .bnuContentCard__content { align-items: center; } .bnuContentCard--layout2 { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .bnuContentCard--layout2 .bnuContentCard__content, .bnuContentCard--layout2 .bnuContentCard__image { width: calc(50% - 12px); } @media (max-width: 768px) { .bnuContentCard--layout2 .bnuContentCard__content, .bnuContentCard--layout2 .bnuContentCard__image { width: 100%; } } .bnuContentCard--layout2 .bnuContentCard__image:only-child { width: 100%; } .bnuContentCard--layout2.bnuContentCard--center { align-items: center; } .bnuContentCard--icon { flex-wrap: nowrap; } .bnuContentCard--icon .bnuContentCard__content { flex-grow: 1; } .bnuContentCard--icon .bnuContentCard__image { width: 64px; } @media (max-width: 768px) { .bnuContentCard--icon .bnuContentCard__image { width: 32px; } } .bnuContentCard--smallImage .bnuContentCard__image { flex: 0 0 160px; width: 160px; max-width: 100%; } @media (max-width: 768px) { .bnuContentCard--smallImage .bnuContentCard__image { flex-basis: 120px; width: 120px; } } .bnuContentCard--smallImage.bnuContentCard--layout2 .bnuContentCard__content { flex: 1 1 0; width: auto; } @media (max-width: 768px) { .bnuContentCard--smallImage.bnuContentCard--layout2 .bnuContentCard__content { flex-basis: 100%; width: 100%; } } .bnuContentCard--center { height: 100%; } .bnuContentCard--verticalCenter { align-items: center; } .bnuContentCard--paddings { border: 1px solid var(--color-border); border-radius: var(--border-radius-small); padding: calc(var(--layout-spacing) * 2.5); height: 100%; } @media (max-width: 768px) { .bnuContentCard--paddings { padding: calc(var(--layout-spacing) * 1.5); } } a.bnuContentCard--paddings { transition: box-shadow 0.16s ease; color: inherit; text-decoration: none; } a.bnuContentCard--paddings:hover { box-shadow: 0 6px 12px color-mix(in srgb, var(--color-text) 5%, transparent), 0 3px 3px color-mix(in srgb, var(--color-text) 2.5%, transparent); } .bnuContentCard__content { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.75); } .bnuContentCard__content h3 { margin: 0; line-height: 1.333; font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); } .bnuContentCard__content p { margin: 0; } @media (max-width: 768px) { .bnuContentCard__content p { font-size: 14px; line-height: 1.333; } } .bnuContentCard__action { margin-block-start: calc(var(--layout-spacing) * 0.75); } .bnuDiscountCalculator__title { margin-block-end: calc(var(--layout-spacing) * 2); text-align: center; } .bnuDiscountCalculator__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuDiscountCalculator__layout { flex-direction: column; } } .bnuDiscountCalculator--centered .bnuDiscountCalculator__layout { justify-content: center; } .bnuDiscountCalculator__info { width: 33.333%; min-width: 0; } @media (max-width: 768px) { .bnuDiscountCalculator__info { width: 100%; } } .bnuDiscountCalculator__form { width: 66.666%; min-width: 0; } @media (max-width: 768px) { .bnuDiscountCalculator__form { width: 100%; } } .bnuDiscountCalculator--centered .bnuDiscountCalculator__form { width: min(100%, 640px); } .bnuDiscountCalculator__field { position: relative; } .bnuDiscountCalculator__suffix { display: flex; position: absolute; top: 0; right: 0; justify-content: center; align-items: center; width: 52px; height: 52px; color: var(--color-text-light); pointer-events: none; } .bnuDiscountCalculator__field .bnuInput { padding-inline-end: 55px; } .bnuDiscountCalculator__field input[readonly] { pointer-events: none; } html.BENUEERxLandingPage .bnuPageHeader { margin-block-end: var(--layout-gap); } .bnuEeRxLanding__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--layout-spacing); margin-block: var(--layout-row-gap) var(--layout-gap); padding-inline-end: 0; } @media (max-width: 768px) { .bnuEeRxLanding__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap) var(--layout-column-gap); padding-inline-end: var(--layout-spacing); } } .bnuEeRxLanding__step { display: flex; position: relative; flex-direction: row; align-items: center; gap: var(--layout-spacing); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--layout-spacing); min-width: 0; } @media (max-width: 768px) { .bnuEeRxLanding__step { flex-direction: column; align-items: flex-start; border-color: transparent; padding: 0; } } .bnuEeRxLanding__step:after { display: flex; position: absolute; top: calc(var(--layout-spacing) * 0.25); left: calc(var(--layout-spacing) * 0.4); align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-accent); width: calc(var(--layout-spacing) * 1.5); height: calc(var(--layout-spacing) * 1.5); color: #fff; font-size: 0.6875rem; font-weight: 600; content: attr(data-step); } @media (max-width: 768px) { .bnuEeRxLanding__step:after { top: calc(var(--layout-spacing) * 0.4); width: 16px; height: 16px; font-size: 0.625rem; } } .bnuEeRxLanding__stepIcon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; margin: 0; border-radius: var(--border-radius); background-color: var(--color-accent-bg); color: var(--color-accent); width: calc(var(--layout-spacing) * 4); height: calc(var(--layout-spacing) * 4); } @media (max-width: 768px) { .bnuEeRxLanding__stepIcon { margin-block-start: var(--layout-spacing); margin-inline-start: var(--layout-spacing); width: 36px; height: 36px; } } .bnuEeRxLanding__stepIcon img { display: block; width: 60%; height: 60%; object-fit: contain; } .bnuEeRxLanding__stepIcon i { font-size: 1.375rem; line-height: 1; } @media (max-width: 768px) { .bnuEeRxLanding__stepIcon i { font-size: 1.125rem; } } .bnuEeRxLanding__stepText { flex: 1 1 auto; min-width: 0; padding-inline: 0; color: var(--color-text); font-size: 0.9375em; font-weight: 500; line-height: 1.33; text-align: start; } @media (max-width: 768px) { .bnuEeRxLanding__stepText { padding-inline: calc(var(--layout-spacing) * 0.9) var(--layout-spacing); font-size: 0.75rem; } } .bnuEeRxLanding__sideContentWrapper { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; gap: var(--layout-gap); min-width: 0; } @media (max-width: 768px) { .bnuEeRxLanding__sideContentWrapper { grid-template-columns: minmax(0, 1fr); } } .bnuEeRxLanding__sideContent { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg); padding: var(--layout-row-gap); } .bnuEeRxLanding__sideContentButtons { display: flex; flex-direction: column; gap: var(--layout-spacing); margin-block-start: var(--layout-gap); } .bnuEeRxLanding__sideContentImage { display: block; width: 100%; min-width: 0; height: 100%; border-radius: var(--border-radius); object-fit: cover; } @media (max-width: 768px) { .bnuEeRxLanding__sideContentImage { height: auto; } } .bnuEeRxLanding__chainContentInner { display: flex; justify-content: center; margin-block-start: var(--layout-gap); } .bnuEeRxLanding__chainContentInner > .chainContentInner { width: 100%; max-width: var(--layout-mw-narrow); } .bnuEeRxLanding__chainContentInner > .chainContentInner .chainWrap { margin-block-end: 0; } .bnuEeRxLanding__chatDescription { margin-block-start: var(--layout-row-gap); } @media (max-width: 768px) { .bnuEeRxLanding__chatDescription { margin-block-start: 0; } } .bnuEeRxLanding__chatWrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap); margin-block-start: var(--layout-gap); } @media (max-width: 768px) { .bnuEeRxLanding__chatWrapper { grid-template-columns: minmax(0, 1fr); } } .bnuEeRxLanding__chatContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg); padding: calc(var(--layout-spacing) * 3); min-width: 0; } @media (max-width: 768px) { .bnuEeRxLanding__chatContainer { padding: var(--layout-row-gap); } } .bnuEeRxLanding__chatContainer .bnuEeRxLanding__chatDescription { margin-block: var(--layout-spacing) auto; } .bnuEeRxLanding__chatContainer .bnuEeRxLanding__chatButton { margin-block-start: var(--layout-gap); } @media (max-width: 768px) { .bnuEeRxLanding__chatContainer .bnuEeRxLanding__chatButton { margin-block-start: var(--layout-row-gap); } } .bnuOffers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 6); } @media (max-width: 768px) { .bnuOffers__grid { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--layout-spacing) * 4); } } .bnuOffers__grid--big { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { .bnuOffers__grid--big { grid-template-columns: minmax(0, 1fr); } } .bnuOfferItem { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); height: 100%; overflow: hidden; transition: border-color 0.2s ease-in-out; } .bnuOfferItem:hover { border-color: var(--color-border-strong, var(--color-text-light)); } .bnuOfferItem__imageLink { display: block; } .bnuOfferItem__image { display: block; width: 100%; height: auto; } .bnuOfferItem__text { padding: calc(var(--layout-spacing) * 2); } .bnuOfferItem__text h3 { margin: 0; font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); } .bnuOfferItem__text h3 a { color: inherit; text-decoration: none; } .bnuOfferItem__date { margin: calc(var(--layout-spacing) * 0.75) 0 0; color: var(--color-text-light); } .bnuReservations__intro { margin-block-end: var(--layout-spacing); } .bnuReservations__title { margin: 0; } .bnuReservations__description { margin-block: calc(var(--layout-spacing) * 0.5) 0; } .bnuReservations__fieldset { margin: 0; border: none; padding: 0; } .bnuReservations__fieldset + .bnuReservations__fieldset, .bnuReservations__fieldset + .bnuReservations__confirm { padding-block-start: calc(var(--layout-spacing) * 2); border-block-start: 1px solid var(--color-border); } .bnuReservations__field.error .bind-selectPharmacy, .bnuReservations__field.error .bind-datePicker { outline: 1px solid var(--color-error); } .bnuReservations__field[data-field=pharmacy], .bnuReservations__field[data-field=dateTime] { position: relative; overflow: visible; } .bnuForm__row:has(.bnuReservations__datePicker) { align-items: flex-start; overflow: visible; } .bnuReservations__field[data-field=pharmacy] > .bnuInputInfoBox--error, .bnuReservations__field[data-field=dateTime] > .bnuInputInfoBox--error, .bnuReservations__field[data-field=birthDate] .bnuInputBirthdate > .bnuInputInfoBox--error { right: 12px; left: auto; transform: translateY(50%); } .bnuReservations__field[data-field=birthDate] .bnuInputBirthdate { position: relative; } .bnuReservations__datePicker { position: relative; overflow: visible; } .bnuReservations__datePicker .calendarPopupWrap { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: calc(100% + var(--layout-spacing)); left: 0; z-index: 20; cursor: default; padding: calc(var(--layout-spacing) * 2.5); width: auto; min-width: min(100%, 620px); max-width: min(100vw - 2rem, 720px); background: var(--color-bg-elevated, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1); visibility: hidden; opacity: 0; pointer-events: none; } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap { right: 0; left: auto; min-width: 0; width: calc(100% + 2 * var(--layout-gap, 1rem)); } } .bnuReservations__datePicker .calendarPopupWrap.active { visibility: visible; opacity: 1; pointer-events: auto; } .bnuReservations__datePicker .calendarPopupWrap > hr { flex: 0 0 auto; margin: calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * -2.5); width: auto; } .bnuReservations__datePicker .calendarPopupWrap .topWrap { display: flex; flex-wrap: nowrap; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .leftWrap, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap { position: relative; flex: 1 1 0; flex-grow: 1; width: 300px; max-width: 300px; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .leftWrap { padding-right: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap .topWrap .leftWrap { padding-right: calc(var(--layout-spacing) * 0.75); } } .bnuReservations__datePicker .calendarPopupWrap .topWrap .leftWrap::after { display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: var(--color-border); content: ""; } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap .topWrap .leftWrap::after { display: none; } } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap { padding-left: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap { padding-left: calc(var(--layout-spacing) * 0.75); } } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap .time-slider-prev, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap .time-slider-next, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap .time-slider-scrollbar { display: none; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider { flex: 0 0 100px; width: 100px; max-width: 100px; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .noTime { display: none; } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider { flex: 0 0 65px; width: 65px; max-width: 65px; } } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .timesWrap { margin-top: 32px; height: 192px; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .times .times-item { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next { display: block; position: absolute; left: 0; width: 100%; padding-left: calc(var(--layout-spacing) * 2); color: color-mix(in oklch, var(--color-text), transparent 35%); font-weight: 400; line-height: 28px; text-align: center; pointer-events: auto; cursor: pointer; } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next { padding-left: calc(var(--layout-spacing) * 0.5); } } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev i, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next i { margin: 0; font-weight: 400; font-size: 18px; line-height: 28px; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev.disabled, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next.disabled { opacity: 0.25; pointer-events: none; cursor: default; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev:hover, .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next:hover { color: var(--color-text); } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-prev { top: 0; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-next { bottom: -28px; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-scrollbar { display: block; position: absolute; top: 32px; right: 0; width: 6px; height: 190px; border-radius: 3px; background: transparent; line-height: 0; } .bnuReservations__datePicker .calendarPopupWrap .topWrap .rightWrap.time-slider .time-slider-scrollbar .handle { width: 100%; border-radius: 3px; background-color: var(--color-text); } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; min-width: 0; } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .selectedDate { flex: 0 0 auto; width: auto; max-width: 100%; padding-right: calc(var(--layout-spacing) * 2); white-space: nowrap; font-size: 15px; color: var(--color-text-light); } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .selectedDate p { margin: 0.25em 0 0; height: 16px; color: var(--color-text); } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .selectedDate p.previewTime .error { color: var(--color-error); } @media (max-width: 1024px) { .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .selectedDate { display: block; flex: 0 0 100%; width: 100%; margin-bottom: var(--layout-spacing); } } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .buttonsWrap { display: flex; position: relative; flex: 1 1 0; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--layout-spacing); width: 100%; max-width: 100%; min-width: 0; } .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .buttonsWrap .bnuButton { flex: 1 1 0; max-width: 160px; min-width: 0; } @media (max-width: 1024px) { .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .buttonsWrap .bnuButton { max-width: calc(50% - var(--layout-spacing) * 0.5); } } @media (max-width: 768px) { .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .buttonsWrap .bnuButton { flex: 1 1 100%; max-width: 100%; } } @media (max-width: 1024px) { .bnuReservations__datePicker .calendarPopupWrap > .bottomWrap .buttonsWrap { flex: 0 0 100%; width: 100%; } } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker { width: 100%; padding: 0; border: none; color: var(--color-text); font-size: 14px; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker.ui-widget-content { background: none; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-header { margin: 0 0 2px; border: 0; padding: 0; height: 28px; background: none; color: var(--color-text); font-size: 16px; font-weight: 500; line-height: 28px; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next { display: block; width: 28px; height: 28px; pointer-events: auto; cursor: pointer; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev > span, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next > span { display: none; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev::after, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next::after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: color-mix(in oklch, var(--color-text), transparent 35%); font-weight: 400; font-family: var(--font-fa); font-size: 18px; line-height: 28px; text-align: center; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev:hover::after, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next:hover::after { color: var(--color-text); } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev.ui-state-disabled, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next.ui-state-disabled { opacity: 0.25; pointer-events: none; cursor: default; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev { left: 0; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-prev::after { content: "\f104"; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next { right: 0; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-next::after { content: "\f105"; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar { margin: 0; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar thead th { padding: 6px 0 10px; color: var(--color-text); font-weight: 600; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td { opacity: 1; border: none; padding: 2px; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td span, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td a { border: none; border-radius: 2px; padding: 0 6px 0 0; background-color: var(--color-bg); background-image: none; color: var(--color-text-light); font-size: 14px; font-weight: 400; line-height: 28px; white-space: nowrap; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.closed a, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.closed span { background-color: color-mix(in oklch, var(--color-error), white 80%) !important; color: var(--color-text-light) !important; pointer-events: none; cursor: default; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.open a { background-color: color-mix(in oklch, var(--color-accent), white 80%) !important; color: var(--color-text) !important; pointer-events: auto; cursor: pointer; transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.open a:hover { box-shadow: inset 0 0 0 2px var(--color-accent) !important; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.open.ui-datepicker-current-day a { background-color: var(--color-accent) !important; color: #fff !important; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-today span, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-today a { box-shadow: none; } .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-other-month span, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-other-month a, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-unselectable span, .bnuReservations__datePicker .calendarPopupWrap .calendar .ui-datepicker-calendar tbody td.ui-datepicker-unselectable a { opacity: 0.65; } .bnuReservations__datePicker .calendarPopupWrap .times { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item { flex: 0 0 25%; max-width: 25%; margin-bottom: 4px; padding-right: 2px; padding-left: 2px; } @media (max-width: 1024px) { .bnuReservations__datePicker .calendarPopupWrap .times .times-item { flex: 0 0 50%; max-width: 50%; } } .bnuReservations__datePicker .calendarPopupWrap .times .times-item input { display: none; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item input:checked + label { background-color: var(--color-accent); color: #fff; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item label { display: block; width: 100%; margin: 0; border-radius: 2px; background-color: var(--color-bg); color: var(--color-text-light); font-size: 14px; height: 28px; line-height: 28px; text-align: center; white-space: nowrap; pointer-events: none; cursor: default; transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item label.closed { background-color: color-mix(in oklch, var(--color-error), white 80%); color: var(--color-text-light); pointer-events: none; cursor: default; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item label.open { background-color: color-mix(in oklch, var(--color-accent), white 80%); color: var(--color-text); pointer-events: auto; cursor: pointer; } .bnuReservations__datePicker .calendarPopupWrap .times .times-item label.open:hover { box-shadow: inset 0 0 0 2px var(--color-accent); } .bnuReservations__anotherPerson { display: flex; flex-direction: column; row-gap: var(--row-gap); width: 100%; } .bnuReservations__anotherPerson.hidden { display: none; } @media (max-width: 768px) { .bnuReservations__colSpacer { display: none; } } .bnuReservations__confirm { align-items: center; } @media (max-width: 768px) { .bnuReservations__confirm { align-items: stretch; } } .bnuReservations__confirm .bnuForm__col--auto { min-width: 220px; } @media (max-width: 768px) { .bnuReservations__confirm .bnuForm__col--auto { min-width: 0; width: 100%; } } .bnuServiceRegistrationSuccess__title { margin: 0; color: var(--color-success); } .bnuServiceRegistrationSuccess__idHeading { margin-block: calc(var(--layout-spacing) * 3) var(--layout-spacing); padding-block-end: calc(var(--layout-spacing) * 0.75); border-block-end: 1px solid var(--color-border); font-size: 1.25em; font-weight: 500; } .bnuServiceRegistrationSuccess__idHeading strong { font-weight: 700; } .bnuServiceRegistrationSuccess__details { margin-block-end: calc(var(--layout-spacing) * 3); row-gap: var(--layout-row-gap); } .bnuServiceRegistrationSuccess__details h3 { margin-block: 0 calc(var(--layout-spacing) * 0.5); font-size: 1em; font-weight: 500; color: var(--color-text); } .bnuServiceRegistrationSuccess__details p { margin: 0; color: var(--color-text-light); } .bnuServiceRegistrationSuccess__documentsCta { margin-block: var(--layout-spacing); } .bnuServiceRegistrationSuccess__documents { margin-block: var(--layout-spacing); padding-inline-start: 1.25em; } .bnuServiceRegistrationSuccess__banners { margin-block-start: var(--layout-spacing); } .bnuServiceRegistrationSuccess .bnuNotice a.bnuButtonAsTextLink { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; cursor: pointer; } .bnuMyAppointments__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuMyAppointments__title { margin: 0; } .bnuMyAppointments__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuMyAppointments__layout { flex-direction: column; } } .bnuMyAppointments__aside { width: 25%; min-width: 0; } @media (max-width: 768px) { .bnuMyAppointments__aside { width: 100%; } } .bnuMyAppointments__asideTitle { margin: 0 0 var(--layout-spacing); } .bnuMyAppointments__asideText { margin: 0 0 calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); } .bnuMyAppointments__main { flex: 1 1 0; min-width: 0; } .bnuAppointment + .bnuAppointment { margin-block-start: var(--layout-row-gap); } .bnuAppointment__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuAppointment__title { margin: 0; font-size: 1.125em; font-weight: 500; } .bnuAppointment__label { margin: 0 0 calc(var(--layout-spacing) * 0.35); color: var(--color-text-light); font-size: 0.875em; font-weight: 500; } .bnuAppointment__value { margin: 0; color: var(--color-text); } .bnuAppointment__status--success { color: var(--color-accent); } .bnuAppointment__status--error { color: var(--color-error); } .bnuAppointment__details { margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuAppointment__documents { margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuAppointment__documentsList { margin: 0; padding-inline-start: 1.25em; } .bnuAppointment__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); padding-block-start: var(--layout-spacing); border-block-start: 1px solid var(--color-border); } .bnuAppointment__meta { color: var(--color-text-light); font-size: 0.875em; } .bnuAppointment__cancel { color: var(--color-error); } .bnuServiceRegistrationSuccess .bnAppointment_popover, .bnuAppointment .bnAppointment_popover { display: none; margin-block-start: calc(var(--layout-spacing) * 0.25); } .bnuServiceRegistrationSuccess .bnAppointment_popover.active, .bnuAppointment .bnAppointment_popover.active { display: block; } .bnuServiceRegistrationSuccess .bnAppointment_popover ul, .bnuAppointment .bnAppointment_popover ul { list-style: none; margin: 0; padding: 0; background-color: #fff; border-radius: var(--border-radius); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .bnuServiceRegistrationSuccess .bnAppointment_popover a, .bnuAppointment .bnAppointment_popover a { display: flex; padding: 12px 16px; line-height: 1; color: var(--color-text); text-decoration: none; } .bnuServiceRegistrationSuccess .bnAppointment_popover a:hover, .bnuAppointment .bnAppointment_popover a:hover { background-color: var(--color-bg-light, #f5f7fb); } html.BENULogin, html.BENUAppLogin { --bnuLogin-page-bg: #f2f2f2; --bnuLogin-panel-bg: #ffffff; --bnuLogin-divider: color-mix(in oklch, var(--color-text), transparent 90%); background: var(--bnuLogin-page-bg); } html.BENULogin #ui-datepicker-div, html.BENUAppLogin #ui-datepicker-div { z-index: 10 !important; } html.BENULogin .bnuLogin .bind-showRegistrationWithCard, html.BENUAppLogin .bnuLogin .bind-showRegistrationWithCard { margin-inline-start: 0; min-width: 0; } html.BENULogin .bnuLogin .bnuLogin__title, html.BENUAppLogin .bnuLogin .bnuLogin__title { margin-bottom: var(--layout-spacing); font-size: clamp(1.5rem, 1.18rem + 1.08vw, 2rem); } html.BENUAppLogin .bnuLogin, .bnuLogin--centered { justify-content: center; } html.BENUAppLogin .bnuLogin .bnuLogin__formWrap, .bnuLogin--centered .bnuLogin__formWrap { min-height: 100%; } html.BENUAppLogin .bnuLogin .bnuLogin__content, .bnuLogin--centered .bnuLogin__content { margin-top: -70px; min-height: calc(100vh - 150px); padding-top: 0; } html.BENUAppLogin .bnuLogin .bnuLogin__env, .bnuLogin--centered .bnuLogin__env { padding-inline-start: calc(var(--layout-spacing) * 4); } @media (max-width: 850px) { html.BENUAppLogin .bnuLogin .bnuLogin__env, .bnuLogin--centered .bnuLogin__env { padding-inline-start: calc(var(--layout-spacing) * 2); } } html.BENUAppLogin .bnuLogin .bnuLogin__benefits, .bnuLogin--centered .bnuLogin__benefits { margin-bottom: calc(var(--layout-spacing) * 3); } @media (max-width: 850px) { html.BENUAppLogin .bnuLogin .bnuLogin__content, .bnuLogin--centered .bnuLogin__content { margin-top: 0; min-height: 0; } } @media (max-height: 800px) { html.BENUAppLogin .bnuLogin .bnuLogin__content, .bnuLogin--centered .bnuLogin__content { margin-top: 0; min-height: 0; } } .bnuLogin { display: flex; min-height: 100vh; } @media (max-width: 850px) { .bnuLogin { flex-direction: column; } } .bnuLogin__formWrap { display: flex; position: relative; flex-direction: column; background-color: var(--bnuLogin-panel-bg); width: 40%; min-width: 450px; min-height: 100vh; } @media (max-width: 850px) { .bnuLogin__formWrap { width: 100%; min-width: auto; min-height: auto; background-color: transparent; } } .bnuLogin__logo { flex-shrink: 0; margin: 0; padding: calc(var(--layout-spacing) * 3) calc(var(--layout-spacing) * 4) 0; max-width: 50%; } @media (max-width: 850px) { .bnuLogin__logo { padding-inline: calc(var(--layout-spacing) * 2); } } .bnuLogin__logo a { display: inline-block; } .bnuLogin__logo img { display: block; width: 149px; height: auto; } .bnuLogin__content { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; margin: 0 auto; padding: calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * 4); width: 100%; max-width: 380px; min-height: 0; } @media (max-height: 800px) { html.benu-eshop-ee .bnuLogin__content { padding-top: calc(var(--layout-spacing) * 4); } } @media (max-height: 580px) { html.benu-eshop-ee .bnuLogin__content { padding-top: calc(var(--layout-spacing) * 2); } } .bnuLogin__title { margin-top: 0; } .bnuLogin__text { margin-block: 0; } .bnuLogin__subView { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 3); width: 100%; } .bnuLogin__subView .bnuLogin__title { margin-block-end: 0; } .bnuLogin__subView .bnuTabs { margin-block-end: 0; } .bnuLogin__tabPanel { width: 100%; } .bnuLogin__form { --row-gap: calc(var(--layout-spacing) * 2); } .bnuLogin__actionsGroup { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2); } .bnuLogin__rememberRow { flex-direction: row; justify-content: space-between; align-items: center; column-gap: var(--layout-spacing); } @media (max-width: 768px) { .bnuLogin__rememberRow { flex-direction: row; align-items: center; } } .bnuLogin__rememberCol { flex: 0 1 auto; width: auto; max-width: none; } @media (max-width: 768px) { .bnuLogin__rememberCol { flex: 0 1 auto; width: auto; max-width: none; } } .bnuLogin__secondaryAction { justify-content: center; text-align: center; } .bnuLogin__forgotPassword { justify-content: center; align-items: center; text-align: center; } .bnuLogin__forgotPassword .bnuButtonAsTextLink { font-weight: 400; } .bnuLogin__formActions { flex-direction: row; justify-content: space-between; align-items: center; column-gap: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuLogin__formActions { flex-direction: row; align-items: center; } } .bnuLogin__formBack { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.75); flex: 0 0 auto; text-decoration: none; text-transform: none; font-size: 14px; font-weight: 400; } .bnuLogin__formBack i { text-decoration: none; } .bnuLogin__formActionsSubmit { flex: 0 0 auto; margin-inline-start: auto; text-align: end; } .bnuLogin__sessionErrors { margin-block-end: 0; } .bnuLogin__errors:empty { display: none; } .bnuLogin__errors:not(:empty) { border: 1px solid var(--color-error-border); border-radius: var(--border-radius); background-color: var(--color-error-bg); padding: calc(var(--layout-spacing) * 1.5); color: var(--color-error); font-weight: 500; font-size: 0.875rem; line-height: 1.4; } .bnuLogin__lineSectionHeader { display: block; position: relative; margin-top: 0; margin-bottom: calc(var(--layout-spacing) * 1.5); width: 100%; overflow: hidden; color: var(--color-text-light); font-weight: normal; font-size: 13px; line-height: 1.4; text-align: center; } .bnuLogin__lineSectionHeader::before, .bnuLogin__lineSectionHeader::after { display: inline-block; position: relative; vertical-align: middle; background-color: var(--bnuLogin-divider); width: 50%; height: 1px; content: ""; } .bnuLogin__lineSectionHeader::before { right: 0.5em; margin-left: -50%; } .bnuLogin__lineSectionHeader::after { left: 0.5em; margin-right: -50%; } .bnuLogin__sectionHeader { margin-top: 0; margin-bottom: var(--layout-spacing); width: 100%; color: var(--color-text-light); font-weight: normal; font-size: 1em; text-align: center; } .bnuLogin__content > .bind-emailLogin + .bnuLogin__lineSectionHeader, .bnuLogin__content > .bind-emailLogin + .bnuLogin__socialLogins, .bnuLogin__content > .bind-emailLogin + .bnuLogin__secureLogins, .bnuLogin__content > .bind-emailLogin + .bnuLogin__registration, .bnuLogin__content > .bnuLogin__socialLogins + .bnuLogin__secureLogins, .bnuLogin__content > .bnuLogin__socialLogins + .bnuLogin__registration, .bnuLogin__content > .bnuLogin__secureLogins + .bnuLogin__registration { margin-top: calc(var(--layout-spacing) * 2); } .bnuLogin__socialLogins { display: flex; justify-content: center; gap: calc(var(--layout-spacing) * 0.75); } .bnuLogin__socialLogins .bnuButton { width: 64px; min-height: 42px; padding: 8px 10px; } .bnuLogin__secureLogins { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--layout-spacing); column-gap: calc(var(--layout-spacing) * 0.75); text-align: center; } .bnuLogin__secureLogins .bnuLogin__sectionHeader { flex: 0 0 100%; margin-bottom: 0; } @media (max-width: 768px) { .bnuLogin__secureLogins .bind-openIDCardLoginForm { display: none; } } .bnuLogin__secureAuth { width: 100%; } .bnuSecureAuthWait { text-align: center; } .bnuSecureAuthWait__title { margin: 0 0 calc(var(--layout-spacing) * 0.75); } .bnuSecureAuthWait__code { margin: 0 0 calc(var(--layout-spacing) * 1.25); } .bnuSecureAuthWait__status { display: flex; justify-content: center; align-items: center; min-height: 48px; margin: 0 0 calc(var(--layout-spacing) * 1.25); font-size: 2rem; color: var(--color-text-muted, #585858); } .bnuSecureAuthWait__status .fa-circle-notch { animation: bnuSecureAuthWaitSpin 2s linear infinite; } .bnuSecureAuthWait--success .bnuSecureAuthWait__status .fa-circle-notch, .bnuSecureAuthWait--failed .bnuSecureAuthWait__status .fa-circle-notch { animation: none; } .bnuSecureAuthWait--success .bnuSecureAuthWait__status { color: var(--color-success, #2e7d32); } .bnuSecureAuthWait--failed .bnuSecureAuthWait__status { color: var(--color-error, #c62828); } .bnuSecureAuthWait__disclaimer { margin: 0 0 calc(var(--layout-spacing) * 1.5); text-align: left; } .bnuSecureAuthWait__actions { display: flex; justify-content: flex-start; } @keyframes bnuSecureAuthWaitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .bnuLogin__registration .bnuLogin__lineSectionHeader { margin-top: 0; } .bnuLogin__registrationButtons { display: flex; flex-direction: row; flex-wrap: nowrap; gap: calc(var(--layout-spacing) * 1.5); align-items: stretch; } .bnuLogin__registrationButtons .bnuButton { flex: 0 1 auto; justify-content: center; width: auto; min-width: 0; min-height: 42px; text-align: center; text-transform: none; white-space: nowrap; } .bnuLogin__registrationButtons .bind-showRegistrationWithCard { flex: 1 1 auto; } @media (max-width: 850px) { .bnuLogin__registrationButtons { flex-direction: column; gap: calc(var(--layout-spacing) * 1.5); } .bnuLogin__registrationButtons .bnuButton { flex: 1 1 auto; width: 100%; } } .bnuLogin__forceSecureLogins { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 2); } .bnuLogin__banners { display: flex; position: fixed; right: 0; flex-direction: column; justify-content: center; background: radial-gradient( 50% 131.67% at 50% 50%, var(--bnuLogin-panel-bg) 0%, var(--bnuLogin-page-bg) 100%); width: 60%; min-height: 100%; text-align: center; } @media (max-width: 1135px) { .bnuLogin__banners { width: calc(100% - 450px); } } @media (max-width: 850px) { .bnuLogin__banners { position: relative; justify-content: flex-start; width: 100%; min-height: auto; } } .bnuLogin__banners a.bnuButton.bnuLogin__back { position: absolute; top: var(--layout-spacing); right: var(--layout-spacing); z-index: 1; } @media (max-width: 850px) { .bnuLogin__banners a.bnuButton.bnuLogin__back { display: none; } } .bnuLogin__carouselScope { position: relative; width: 100%; } .bnuLogin__carousel { position: relative; height: 470px; } .bnuLogin__carousel .swiper-slide { text-align: center; } .bnuLogin__carouselImage { display: block; margin: 0 auto calc(var(--layout-spacing) * 3); } .bnuLogin__carouselImage img { max-height: 300px; margin: 0 auto; } .bnuLogin__carouselTitle { color: var(--color-text); font-weight: 700; font-size: clamp(1.5rem, 1.18rem + 1.08vw, 2rem); } .bnuLogin__carouselContent { margin: calc(var(--layout-spacing) * 1) auto 0; max-width: 440px; } .bnuLogin__carouselScope .swiper-pagination { position: absolute; bottom: 4px; margin-block-start: 0; } .bnuLoginExpandBox { margin-bottom: calc(var(--layout-spacing) * 2); } .bnuLoginExpandBox__title { color: var(--color-text); font-weight: normal; font-size: 14px; cursor: pointer; } .bnuLoginExpandBox__title::before { margin-right: 4px; font-family: var(--font-fa), "Font Awesome 6 Pro", "Font Awesome 5 Pro"; content: "\f107"; } .bnuLoginExpandBox__content { overflow: hidden; transition: max-height 0.15s ease-in; padding-top: 5px; max-height: 0; color: var(--color-text-light); font-size: 14px; } .bnuLoginExpandBox--active .bnuLoginExpandBox__title::before { content: "\f106"; } .bnuLoginExpandBox--active .bnuLoginExpandBox__content { max-height: 200px; } .bnuUserProfile { width: 100%; margin-block-end: calc(var(--layout-spacing) * 5); } @media (max-width: 768px) { .bnuUserProfile { margin-block-end: calc(var(--layout-spacing) * 4); } } .bnuUserProfile__layout { display: flex; width: 100%; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuUserProfile__layout { flex-direction: column; } } .bnuUserProfile__main { flex: 1 1 0; min-width: 0; width: 100%; } .bnuUserProfile__main > section, .bnuUserProfile__main > .bnuOrdersHistory, .bnuUserProfile__main > .bnuMyAppointments, .bnuUserProfile__main > .bnuMyFeedback, .bnuUserProfile__main > .bnuWebTickets, .bnuUserProfile__main > .bnuWebTicketDetails, .bnuUserProfile__main > .bnuCustomerReminders, .bnuUserProfile__main > .bnuPersonalVouchers { width: 100%; max-width: none; } .bnuUserProfile__main .bnuSkeletonHost, .bnuUserProfile__main .bnuOrdersHistory__listWrap, .bnuUserProfile__main .bnuMyAppointments__listWrap, .bnuUserProfile__main .bnuCustomerReminders__listWrap { width: 100%; max-width: none; } .bnuUserProfile__navList { list-style: none; margin: 0; padding: 0; } .bnuUserProfile__navLink { display: flex; position: relative; align-items: center; column-gap: calc(var(--layout-spacing) * 0.75); padding: calc(var(--layout-spacing) * 1.1) calc(var(--layout-spacing) * 1.5); border-left: 1px solid var(--color-border); background-color: #fff; color: var(--color-text); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bnuUserProfile__navLink i { flex-shrink: 0; width: 1.25em; text-align: center; } .bnuUserProfile__navLink:hover, .bnuUserProfile__navLink:focus-visible { background-color: var(--color-bg); color: var(--color-text); text-decoration: none; } .bnuUserProfile__navLink.active { border-left: 3px solid var(--color-text); background-color: var(--color-bg); color: var(--color-text); } .bnuUserProfile__navText { flex: 1 1 auto; min-width: 0; } .bnuUserProfile__countBubble { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: var(--color-accent); color: #fff; padding-inline: 0.35rem; font-size: 0.75rem; font-weight: 700; line-height: 1; } .bnuUserProfile__mobileMenu { display: none; margin-block-end: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuUserProfile__mobileMenu { display: block; width: 100%; } } .bnuUserProfile__mobileTrigger { display: flex; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); width: 100%; padding: calc(var(--layout-spacing) * 1.1) calc(var(--layout-spacing) * 1.5); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); color: var(--color-text); text-decoration: none; } .bnuUserProfile__mobileTrigger:hover, .bnuUserProfile__mobileTrigger:focus-visible { color: var(--color-text); text-decoration: none; } .bnuUserProfile__mobileTriggerLabel { display: inline-flex; align-items: center; column-gap: calc(var(--layout-spacing) * 0.75); min-width: 0; } .bnuUserProfile__mobileTriggerChevron { flex-shrink: 0; transition: transform 0.2s ease; } .bnuUserProfile__mobileTrigger.is-open .bnuUserProfile__mobileTriggerChevron { transform: rotate(180deg); } .bnuUserProfile__countBubble--trigger { margin-inline-start: calc(var(--layout-spacing) * 0.5); } .bnuUserProfile__menuDialog { display: none; } @media (max-width: 768px) { .bnuUserProfile__menuDialog { position: fixed; bottom: 0; left: 0; z-index: 2147483699; width: 100%; max-height: min(80vh, 100%); overflow: auto; background: #fff; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); } } .bnuUserProfile__menuDialogHeader { display: flex; align-items: center; justify-content: space-between; padding-block: var(--layout-spacing); padding-inline: calc(var(--layout-spacing) * 1.5) var(--layout-spacing); border-block-end: 1px solid var(--color-border); } .bnuUserProfile__menuDialogTitle { font-size: 1.125rem; font-weight: 500; } .bnuUserProfile__menuDialogClose { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; background: transparent; color: var(--color-text); cursor: pointer; } .bnuUserProfile__nav--dialog .bnuUserProfile__navLink { border-left: 0; border-block-end: 1px solid var(--color-border); } .bnuOrdersHistory__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuOrdersHistory__title { margin: 0; } .bnuOrdersHistory__meta { margin-block-end: var(--layout-spacing); } .bnuOrdersHistory__count { margin: 0; color: var(--color-text-light); } .bnuOrdersHistory__actions { display: flex; justify-content: flex-start; margin-block-start: calc(var(--layout-spacing) * 2); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuOrdersHistory__actions[hidden] { display: none; } .bnuOrdersHistory__disclaimer { margin: 0; color: var(--color-text-light); font-size: 0.875rem; } .bnuPersonalVouchers { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuPersonalVouchers__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuPersonalVouchers__title { margin: 0; } .bnuPersonalVouchers__list { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuPersonalVouchers__list { gap: calc(var(--layout-spacing) * 1.35); } } .bnuPersonalVouchers__list > .bnuPromoBox, .bnuPersonalVouchers__list > .bnuPromoBoxWrap { flex: 0 0 calc(50% - var(--layout-spacing)); min-width: 200px; margin-bottom: 0; } @media (max-width: 768px) { .bnuPersonalVouchers__list > .bnuPromoBox, .bnuPersonalVouchers__list > .bnuPromoBoxWrap { flex: 1 1 100%; } } .bnuPersonalVouchers__list > .bnuPromoBoxWrap .bnuPromoBox { margin-bottom: 0; } .bnuPersonalVouchers__empty { margin: 0; flex: 1 1 100%; color: var(--color-text-light); } .bnuPersonalVouchers__actions { display: flex; justify-content: flex-start; margin-block-start: calc(var(--layout-spacing) * 1.5); } @media (max-width: 768px) { .bnuPersonalVouchers__actions { justify-content: center; } } .bnuLoyaltyCardWrap { margin-block-end: calc(var(--layout-spacing) * 3); } .bnuLoyaltyCard { border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 3); } @media (max-width: 768px) { .bnuLoyaltyCard { padding: calc(var(--layout-spacing) * 2); } } .bnuLoyaltyCard__layout { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuLoyaltyCard__layout { flex-direction: column; align-items: stretch; } } .bnuLoyaltyCard__media { flex: 0 0 42%; width: 42%; min-width: 0; } @media (max-width: 768px) { .bnuLoyaltyCard__media { flex: 1 1 auto; width: 100%; } } .bnuLoyaltyCard__details { flex: 1 1 0; min-width: 0; } .bnuLoyaltyCard__card { position: relative; margin-inline: auto; max-width: 420px; } .bnuLoyaltyCard__card--inactive .bnuLoyaltyCard__image, .bnuLoyaltyCard__card--inactive .bnuLoyaltyCard__barcode, .bnuLoyaltyCard__card--inactive .bnuLoyaltyCard__cardTitle { opacity: 0.3; } .bnuLoyaltyCard__image { display: block; width: 100%; height: auto; border-radius: var(--border-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .bnuLoyaltyCard__barcodeWrap { display: flex; position: absolute; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; padding: calc(var(--layout-spacing) * 2.5) calc(var(--layout-spacing) * 2.8) calc(var(--layout-spacing) * 1.3); } .bnuLoyaltyCard__barcodeWrap--lt { padding: calc(var(--layout-spacing) * 2.5) calc(var(--layout-spacing) * 4.3) calc(var(--layout-spacing) * 0.7); } .bnuLoyaltyCard__barcode { width: 100%; max-width: 100%; } .bnuLoyaltyCard__cardMeta { display: flex; position: absolute; top: 30%; right: 0; left: 0; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); padding-inline: calc(var(--layout-spacing) * 1.9); } .bnuLoyaltyCard__cardTitle { margin: 0; font-size: 1rem; font-weight: 600; } .bnuLoyaltyCard__status { display: inline-flex; flex-shrink: 0; align-items: center; border-radius: var(--border-radius-small); padding: calc(var(--layout-spacing) * 0.35) calc(var(--layout-spacing) * 0.7); font-size: 0.75rem; font-weight: 600; line-height: 1.2; } .bnuLoyaltyCard__status--active { background-color: var(--color-success-bg); color: var(--color-success); } .bnuLoyaltyCard__status--inactive { background-color: var(--color-error-bg); color: var(--color-error); } .bnuLoyaltyCard__wallets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--layout-spacing); margin-block-start: var(--layout-spacing); } .bnuLoyaltyCard__wallets img { display: block; max-height: 2.25rem; } .bnuLoyaltyCard__info { margin-block: calc(var(--layout-spacing) * 1.3) 0; color: var(--color-text-light); font-size: 0.875rem; text-align: center; } .bnuLoyaltyCard__name { margin: 0 0 calc(var(--layout-spacing) * 2); font-size: 1.125rem; font-weight: 500; } .bnuLoyaltyCard__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuLoyaltyCard__stats { grid-template-columns: minmax(0, 1fr); } } .bnuLoyaltyCard__statLabel { margin: 0 0 calc(var(--layout-spacing) * 0.35); color: var(--color-text-light); font-size: 0.875rem; } .bnuLoyaltyCard__statValue { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; } .bnuLoyaltyCard__statValue--cashback { color: var(--color-accent); } .bnuLoyaltyCard__cashback { display: flex; align-items: center; column-gap: calc(var(--layout-spacing) * 0.5); } .bnuLoyaltyCard__cashback .infoWrap { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--color-text-light); font-size: 1rem; } .bnuLoyaltyCard__cashback .infoWrap i { transition: color 0.2s ease; cursor: pointer; } .bnuLoyaltyCard__cashback .infoWrap .infoContent { display: block; visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-5px); z-index: 99; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; transition-delay: 0s; border: 1px solid var(--color-border); border-radius: var(--border-radius-input); box-shadow: var(--box-shadow); background: var(--color-bg); padding: 1rem 1.25rem; width: 320px; max-width: min(320px, 90vw); color: var(--color-text); font-size: 0.875rem; line-height: 1.35; pointer-events: none; } .bnuLoyaltyCard__cashback .infoWrap .infoContent::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-top: 10px solid var(--color-bg); border-right: 10px solid transparent; border-left: 10px solid transparent; width: 0; height: 0; } .bnuLoyaltyCard__cashback .infoWrap:hover i, .bnuLoyaltyCard__cashback .infoWrap:focus-within i { color: var(--color-accent); } .bnuLoyaltyCard__cashback .infoWrap:hover .infoContent, .bnuLoyaltyCard__cashback .infoWrap:focus-within .infoContent { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; pointer-events: auto; } @media (max-width: 768px) { .bnuLoyaltyCard__cashback .infoWrap .infoContent { left: -50px; transform: translateX(0) translateY(-5px); } .bnuLoyaltyCard__cashback .infoWrap .infoContent::after { left: 47px; transform: none; } .bnuLoyaltyCard__cashback .infoWrap:hover .infoContent, .bnuLoyaltyCard__cashback .infoWrap:focus-within .infoContent { transform: translateX(0) translateY(0); } } .bnuLoyaltyCard__pendingText { margin: 0 0 calc(var(--layout-spacing) * 2); } .bnuLoyaltyCard__linkForm { max-width: 28rem; } .bnuMyProfile__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuMyProfile__title { margin: 0; } .bnuMyProfile__communication { margin-block-start: calc(var(--layout-spacing) * 2); } .bnuUserProfile__notice { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuOrdersHistory__listWrap { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2); } .bnuOrderCard + .bnuOrderCard { margin-block-start: 0; } .bnuOrderCard__summary { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 2.1fr); column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); align-items: start; } @media (max-width: 768px) { .bnuOrderCard__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bnuOrderCard__summary .bnuOrderCard__summaryItem--status:not(.bnuOrderCard__summaryItem--completed) { grid-column: 1/-1; } } .bnuOrderCard__summaryItem:not(.bnuOrderCard__summaryItem--status) { min-width: 0; } .bnuOrderCard__summaryItem:not(.bnuOrderCard__summaryItem--status) .bnuOrderCard__value { font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; } .bnuOrderCard__label { margin: 0 0 calc(var(--layout-spacing) * 0.25); color: var(--color-text-light); font-size: 0.8125rem; } .bnuOrderCard__value { margin: 0; font-weight: 500; } .bnuOrderCard__summaryItem--status { min-width: 0; } .bnuOrderCard__summaryItem--completed { text-align: right; } @media (max-width: 768px) { .bnuOrderCard__summaryItem--completed { text-align: left; } } .bnuOrderCard__status { color: var(--color-success); } .bnuOrderCard__timeline { --bnu-order-progress: 0%; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; width: 100%; padding-block-start: 0.5rem; } .bnuOrderCard__timelineTrack { position: absolute; top: calc(0.5rem + 2px); left: 12.5%; width: 75%; height: 2px; background-color: var(--color-border); overflow: hidden; } .bnuOrderCard__timelineProgress { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--bnu-order-progress); max-width: 100%; height: 100%; background-color: var(--color-accent); } .bnuOrderCard__timelineStep { position: relative; display: flex; justify-content: center; width: 25%; padding-block-start: 0.75rem; color: var(--color-text); font-size: 0.6875rem; line-height: 1.15; text-align: center; } .bnuOrderCard__timelineStep::before { content: ""; position: absolute; top: -3px; left: 50%; width: 12px; height: 12px; border: 2px solid var(--color-border); border-radius: 50%; background-color: var(--color-bg); transform: translateX(-50%); z-index: 1; } .bnuOrderCard__timelineStep.is-active::before { border-color: var(--color-accent); background-color: var(--color-accent); } .bnuOrderCard__details { padding-block-start: calc(var(--layout-spacing) * 2); border-block-start: 1px solid var(--color-border); } .bnuOrderCard--folded .bnuOrderCard__details, .bnuOrderCard--folded .bnuOrderCard__hideWhenFolded, .bnuOrderCard--folded .bnuOrderCard__showWhenOpen { display: none; } .bnuOrderCard:not(.bnuOrderCard--folded) .bnuOrderCard__hideWhenFolded { display: inline-flex; } .bnuOrderCard__productsHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: var(--layout-spacing); } .bnuOrderCard__productsTitle { margin: 0; font-size: 1.125rem; font-weight: 500; } .bnuOrderCard__products { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuOrderCard__product { display: flex; column-gap: var(--layout-gap); align-items: flex-start; } @media (max-width: 768px) { .bnuOrderCard__product { flex-direction: column; } } .bnuOrderCard__productMedia { flex: 0 0 5.5rem; width: 5.5rem; } .bnuOrderCard__productMedia img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-small); } .bnuOrderCard__productBody { display: flex; flex: 1 1 auto; flex-wrap: wrap; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); min-width: 0; width: 100%; } .bnuOrderCard__productInfo { flex: 1 1 12rem; min-width: 0; } .bnuOrderCard__productName { margin: 0 0 calc(var(--layout-spacing) * 0.35); font-size: 1rem; font-weight: 500; } .bnuOrderCard__productName a { color: inherit; text-decoration: none; } .bnuOrderCard__productMeta { flex: 1 1 14rem; min-width: 0; } .bnuOrderCard__productStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--layout-spacing); margin-block-end: var(--layout-spacing); } .bnuOrderCard__oldPrice { text-decoration: line-through; color: var(--color-text-light); } .bnuOrderCard__productActions { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); } .bnuOrderCard__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: calc(var(--layout-spacing) * 2); padding-block-start: calc(var(--layout-spacing) * 2); border-block-start: 1px solid var(--color-border); } @media (max-width: 768px) { .bnuOrderCard__info { grid-template-columns: minmax(0, 1fr); } } .bnuOrderCard__info h4 { margin: 0 0 calc(var(--layout-spacing) * 0.5); font-size: 1rem; font-weight: 500; } .bnuOrderCard__info p { margin: 0 0 var(--layout-spacing); } .bnuOrderCard__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-start: calc(var(--layout-spacing) * 2); padding-block-start: calc(var(--layout-spacing) * 2); border-block-start: 1px solid var(--color-border); } .bnuOrderCard__actionButtons { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); } .bnuWebTickets__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuWebTickets__title { margin: 0; } .bnuWebTickets__listWrap { margin-block-end: calc(var(--layout-spacing) * 3); overflow-x: auto; } .bnuWebTickets__table { width: 100%; border-collapse: collapse; table-layout: fixed; } .bnuWebTickets__table th, .bnuWebTickets__table td { padding: calc(var(--layout-spacing) * 0.75) calc(var(--layout-spacing) * 0.5); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: top; word-break: break-word; } .bnuWebTickets__table th { color: var(--color-text-light); font-size: 0.8125rem; font-weight: 500; } .bnuWebTickets__date { white-space: nowrap; } .bnuWebTickets__tableActionCol { width: 7rem; text-align: end; } @media (max-width: 768px) { .bnuWebTickets__detailsBtn { display: none; } } .bnuWebTickets__detailsLinkMobile { display: none; color: inherit; text-decoration: none; } @media (max-width: 768px) { .bnuWebTickets__detailsLinkMobile { display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; font-size: 1rem; } } .bnuWebTickets__formWrap { max-width: 48rem; } .bnuWebTickets__formTitle { margin: 0 0 calc(var(--layout-spacing) * 1.5); font-size: 1.25rem; font-weight: 500; } .bnuWebTickets__formActions { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--layout-spacing); } @media (max-width: 768px) { .bnuWebTickets__formActions { flex-direction: column; align-items: stretch; } } .bnuWebTickets__submit { flex: 0 0 auto; margin-inline-start: auto; } @media (max-width: 768px) { .bnuWebTickets__submit { margin-inline-start: 0; } .bnuWebTickets__submit .bnuButton { width: 100%; } } .bnuWebTickets__uploads { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 10rem); } @media (max-width: 768px) { .bnuWebTickets__uploads { max-width: none; } } .bnuWebTickets__uploads .bnuWebTickets__fileUpload { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--layout-spacing) * 0.75); } .bnuWebTickets__uploads .js-webTicketFileUploader { display: contents; } .bnuWebTickets__uploads .ajax-file-upload { display: none; } .bnuWebTickets__uploads .ajax-file-upload-container { margin-block-start: calc(var(--layout-spacing) * 0.75); } .bnuWebTickets__uploads .ajax-file-upload-statusbar { display: flex; align-items: center; gap: calc(var(--layout-spacing) * 0.5); margin: 0 0 calc(var(--layout-spacing) * 0.5); width: 100%; line-height: 1.25; } .bnuWebTickets__uploads .ajax-file-upload-filename { flex: 1 1 auto; min-width: 0; margin: 0; word-break: break-word; font-size: 0.875rem; } .bnuWebTickets__uploads .ajax-file-upload-red { flex: 0 0 auto; margin: 0; padding: 0; background: none; color: var(--color-text-light); font-size: 0; line-height: 1; } .bnuWebTickets__uploads .ajax-file-upload-red::after { content: "\d7"; font-size: 1.25rem; } .bnuWebTickets__uploads .ajax-file-upload-red:hover { color: var(--color-text); } .bnuWebTickets__uploads .ajax-file-upload-error { color: var(--color-error); font-size: 0.8125rem; } .bnuWebTickets__uploads .error-msg.files { display: block; margin-block-start: calc(var(--layout-spacing) * 0.5); color: var(--color-error); font-size: 0.8125rem; } .bnuWebTicketDetails__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuWebTicketDetails__title { margin: 0; } .bnuWebTicketDetails__download { margin: 0 0 calc(var(--layout-spacing) * 1.5); } .bnuWebTicketDetails__meta { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuWebTicketDetails__label { margin: 0 0 calc(var(--layout-spacing) * 0.35); color: var(--color-text-light); font-size: 0.875em; font-weight: 500; } .bnuWebTicketDetails__value { margin: 0; color: var(--color-text); } .bnuWebTicketDetails__files { margin: 0; padding: 0; list-style: none; } .bnuWebTicketDetails__thread { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuWebTicketDetails__comments { display: flex; flex-direction: column; gap: var(--layout-spacing); min-height: 6rem; max-height: 32rem; overflow-y: auto; padding: var(--layout-spacing); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); } .bnuWebTicketComment__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--layout-spacing) * 0.5); margin-block-end: calc(var(--layout-spacing) * 0.35); } .bnuWebTicketComment__from { font-weight: 500; } .bnuWebTicketComment__date { color: var(--color-text-light); font-size: 0.875em; } .bnuWebTicketComment__text { margin: 0; } .bnuWebTicketComment--system .bnuWebTicketComment__text { color: var(--color-text-light); } .bnuWebTicketComment__files { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.75); margin: calc(var(--layout-spacing) * 0.75) 0 0; padding: 0; list-style: none; } .bnuWebTicketComment__files img { display: block; max-width: 8rem; height: auto; border-radius: var(--border-radius-small); } .bnuCustomerReminders__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuCustomerReminders__title { margin: 0; } .bnuCustomerReminders__notice { margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuCustomerReminders__listWrap > .bnuButton { margin-block-start: calc(var(--layout-spacing) * 2); } .bnuCustomerReminder + .bnuCustomerReminder { margin-block-start: var(--layout-row-gap); } .bnuCustomerReminder__errorBox { margin-block-end: var(--layout-spacing); } .bnuCustomerReminder__header { display: flex; align-items: flex-start; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuCustomerReminder__media { flex: 0 0 5.5rem; width: 5.5rem; } .bnuCustomerReminder__media img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-small); } .bnuCustomerReminder__product { min-width: 0; flex: 1 1 auto; } .bnuCustomerReminder__title { margin: 0 0 calc(var(--layout-spacing) * 0.35); font-size: 1.125em; font-weight: 500; } .bnuCustomerReminder__title a { color: inherit; text-decoration: none; } .bnuCustomerReminder__price { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.25); } .bnuCustomerReminder__price p { margin: 0; } .bnuCustomerReminder__cardPrice span, .bnuCustomerReminder__price .price--text { color: var(--color-text-light); font-size: 0.875em; } .bnuCustomerReminder__oldPrice { margin-inline-start: calc(var(--layout-spacing) * 0.5); color: var(--color-text-light); text-decoration: line-through; } .bnuCustomerReminder__outOfStock { margin-inline-start: calc(var(--layout-spacing) * 0.5); color: var(--color-error); } .bnuCustomerReminder__rows { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuCustomerReminder__row { padding-block-start: var(--layout-spacing); border-block-start: 1px solid var(--color-border); } .bnuCustomerReminder__row--inactive { opacity: 0.6; } .bnuCustomerReminder__label { margin: 0 0 calc(var(--layout-spacing) * 0.35); color: var(--color-text-light); font-size: 0.875em; font-weight: 500; } .bnuCustomerReminder__value { margin: 0; color: var(--color-text); } .bnuCustomerReminder__switch { margin: 0; } .bnuCustomerReminder__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-start: calc(var(--layout-spacing) * 1.5); padding-block-start: var(--layout-spacing); border-block-start: 1px solid var(--color-border); } .bnuCustomerReminder__meta { color: var(--color-text-light); font-size: 0.875em; } .bnuMyFeedback__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--layout-spacing); margin-block-end: calc(var(--layout-spacing) * 2); } .bnuMyFeedback__title { margin: 0; } .bnuMyFeedback__dateFilter { flex: 0 1 16rem; min-width: min(100%, 14rem); } .bnuMyFeedback__successNotice { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuMyFeedback__list { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2); width: 100%; } .bnuMyFeedback__list > .bnuCard { width: 100%; max-width: none; min-width: 0; } .bnuMyFeedback__product, .bnuMyFeedback__rateProduct { --bnu-feedback-media-width: 5.5rem; } @media (max-width: 768px) { .bnuMyFeedback__product, .bnuMyFeedback__rateProduct { --bnu-feedback-media-width: 4rem; } } .bnuMyFeedback__product { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: calc(var(--layout-spacing) * 1.5); padding-block-end: calc(var(--layout-spacing) * 2); border-block-end: 1px solid var(--color-border); } .bnuMyFeedback__product:last-child { padding-block-end: 0; border-block-end: none; } .bnuMyFeedback__productRow { display: flex; column-gap: var(--layout-gap); align-items: flex-start; width: 100%; } @media (max-width: 768px) { .bnuMyFeedback__productRow { column-gap: var(--layout-spacing); } } .bnuMyFeedback__product .bnuOrderCard__productMedia, .bnuMyFeedback__rateProduct .bnuOrderCard__productMedia { flex: 0 0 var(--bnu-feedback-media-width); width: var(--bnu-feedback-media-width); } .bnuMyFeedback__product .bnuOrderCard__productBody, .bnuMyFeedback__rateProduct .bnuOrderCard__productBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); align-items: start; } @media (max-width: 768px) { .bnuMyFeedback__product .bnuOrderCard__productBody, .bnuMyFeedback__rateProduct .bnuOrderCard__productBody { grid-template-columns: minmax(0, 1fr); } } .bnuMyFeedback__rating { display: flex; flex-direction: column; align-items: flex-end; row-gap: var(--layout-spacing); } @media (max-width: 768px) { .bnuMyFeedback__rating { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); row-gap: calc(var(--layout-spacing) * 0.75); width: 100%; } } @media (max-width: 768px) { .bnuMyFeedback__rating .bnuButton { width: 100%; } } .bnuMyFeedback__reviewPanel { display: none; position: relative; margin-inline-start: calc(var(--bnu-feedback-media-width) + var(--layout-gap)); } @media (max-width: 768px) { .bnuMyFeedback__reviewPanel { margin-inline-start: 0; } } .bnuMyFeedback__thanks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); text-align: start; } .bnuMyFeedback__thanks.hidden { visibility: hidden; opacity: 0; } .bnuMyFeedback__rateForm { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 1.5); } .bnuMyFeedback__existingReview { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--layout-spacing) calc(var(--layout-column-gap) * 2); align-items: start; } @media (max-width: 768px) { .bnuMyFeedback__existingReview { grid-template-columns: minmax(0, 1fr); } } .bnuMyFeedback__reviewStatus { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.25); } .bnuMyFeedback__reviewStatusLabel { margin: 0; color: var(--color-text-light); font-size: 0.8125rem; } .bnuMyFeedback__visibility { margin-block-start: calc(var(--layout-spacing) * 0.5); } .bnuMyFeedback .errorsBox { color: var(--color-error); font-size: 0.875rem; } .bnuMyFeedback .bind-reviewText.error, .bnuMyFeedback .bnuInput.error { border-color: var(--color-error); } .bnuMyFeedback__panel:not([hidden]) + .bnuMyFeedback__panel { margin-block-start: 0; } .bnuMyFeedback--rateProduct .bnuMyFeedback__rateCard { width: 100%; } .bnuMyFeedback__rateSection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--layout-spacing); margin-block: calc(var(--layout-spacing) * 2); } .bnuMyFeedback__rateLabel { margin: 0; font-weight: 500; } .bnuMyFeedback__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--layout-spacing) * 0.5); margin-block-start: calc(var(--layout-spacing) * 0.5); } .bnuMyFeedback__priceOld { color: var(--color-text-light); text-decoration: line-through; } .bnuMyFeedback__priceCurrent { font-size: 1.25rem; font-weight: 600; } .bnuMyFeedback__purchased { margin-block-start: var(--layout-spacing); text-align: end; } @media (max-width: 768px) { .bnuMyFeedback__purchased { text-align: start; } } .bnuProduct { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; border-radius: var(--card-border-radius); height: 100%; min-width: 0; padding-bottom: 0; line-height: 1.333; } .bnuProduct:hover .bnuProduct__main { box-shadow: var(--card-box-shadow); } .bnuProduct:has(.bnuProduct__promo) { margin-bottom: 0; } .bnuProduct:has(.bnuProduct__promo) .bnuProduct__main { box-shadow: none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .bnuProduct:has(.bnuProduct__promo):hover { box-shadow: var(--card-box-shadow); } .bnuProduct img { display: block; max-width: 100%; height: auto; } .bnuProduct h2 { font-size: clamp(0.81rem, 0.69rem + 0.4vw, 1rem); margin: 0; margin-block-start: calc(var(--layout-spacing) * 0.5); font-weight: 600; } .bnuProduct p { margin: 0; line-height: 1.333; } .bnuProduct a:not(.bnuButton) { color: var(--color-text); text-decoration: none; } .bnuProduct .bnBtn { white-space: nowrap; } @media (max-width: 768px) { .bnuProduct.bnuProduct--list-mobile { display: flex; flex-direction: column; width: 100%; } .bnuProduct.bnuProduct--list-mobile .bnuProduct__main { position: relative; padding-inline-start: calc(min(8%, var(--layout-spacing) * 2) + var(--layout-spacing) * 12); } .bnuProduct.bnuProduct--list-mobile .bnuProduct__top > figure { position: absolute; top: min(4%, var(--layout-spacing)); left: min(4%, var(--layout-spacing)); width: calc(var(--layout-spacing) * 12); } .bnuProduct.bnuProduct--list-mobile .bnuProduct__buttons .bind-add-to-wishlist { display: flex; } } .bnuProduct.bnuProduct--plain.bnuProduct--list-row { display: flex; flex-direction: column; grid-row: auto; width: 100%; height: auto; } .bnuProduct.bnuProduct--plain.bnuProduct--list-row .bnuProduct__main { position: relative; min-height: calc(var(--layout-spacing) * 12 + var(--layout-spacing) * 2); padding-inline-start: calc(min(8%, var(--layout-spacing) * 2) + var(--layout-spacing) * 12); } .bnuProduct.bnuProduct--plain.bnuProduct--list-row .bnuProduct__top > figure { position: absolute; top: min(4%, var(--layout-spacing)); left: min(4%, var(--layout-spacing)); width: calc(var(--layout-spacing) * 12); height: calc(var(--layout-spacing) * 12); overflow: hidden; } .bnuProduct.bnuProduct--plain.bnuProduct--list-row .bnuProduct__top > figure a, .bnuProduct.bnuProduct--plain.bnuProduct--list-row .bnuProduct__top > figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .bnuProduct__main { display: flex; row-gap: var(--layout-spacing); flex-direction: column; align-self: stretch; min-width: 0; min-height: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-input); background-color: white; padding: min(5%, var(--layout-spacing)); position: relative; } .bnuProduct__skeleton { display: flex; flex-grow: 1; flex-direction: column; row-gap: var(--layout-spacing); width: 100%; } .bnuProduct__skeletonImage { width: 100%; height: auto; aspect-ratio: 1; } .bnuProduct__skeleton .bnuSkeleton__bone--title { width: 85%; } .bnuProduct__skeletonButton { width: 100%; margin-block-start: auto; } .bnuProduct__top { display: flex; row-gap: calc(var(--layout-spacing) * 0.5); flex-direction: column; align-items: flex-start; } .bnuProduct__top > figure { position: relative; margin: 0; width: 100%; } .bnuProduct__top > h2 > a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; -webkit-box-orient: vertical; color: var(--color-text); } .bnuProduct__top > p { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; margin: 0; overflow: hidden; font-weight: 400; font-size: clamp(0.69rem, 0.61rem + 0.27vw, 0.81rem); } .bnuProduct__image img { aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; object-position: center; } .bnuProduct__badges { display: flex; position: absolute; row-gap: 4px; flex-direction: column; } .bnuProduct__badges.bnuProduct__badges--tl { top: 0; left: 0; align-items: flex-start; } .bnuProduct__badges.bnuProduct__badges--tl .bnuProductBadge--round { width: calc(var(--layout-spacing) * 4); font-size: clamp(0.88rem, 0.63rem + 0.81vw, 1.25rem); } @media (max-width: 768px) { .bnuProduct__badges.bnuProduct__badges--tl .bnuProductBadge--round { width: 40px; height: 40px; font-size: 12px; } } .bnuProduct__badges.bnuProduct__badges--tr { top: 0; right: 0; align-items: flex-end; } .bnuProduct__badges.bnuProduct__badges--tr .bnuProductBadge--round { width: calc(var(--layout-spacing) * 6); font-size: clamp(0.88rem, 0.63rem + 0.81vw, 1.25rem); } @media (max-width: 768px) { .bnuProduct__badges.bnuProduct__badges--tr .bnuProductBadge--round { width: 40px; height: 40px; font-size: 12px; } } .bnuProduct__badges.bnuProduct__badges--bl { bottom: 0; left: 0; align-items: flex-start; } .bnuProduct__badges.bnuProduct__badges--bl .bnuCampaignSticker { position: relative; width: 72px; height: 72px; pointer-events: auto; } @media (max-width: 768px) { .bnuProduct__badges.bnuProduct__badges--bl .bnuCampaignSticker { width: 32px; height: 32px; } } .bnuProduct__badges.bnuProduct__badges--bl .bnuCampaignSticker img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProduct__badges.bnuProduct__badges--bl .bnuCampaignSticker:hover > .bnuProductTooltip { display: block; } @media (max-width: 768px) { .bnuProduct__badges.bnuProduct__badges--bl .bnuCampaignSticker:hover > .bnuProductTooltip { bottom: 40px; } } .bnuProduct__badges.bnuProduct__badges--br { right: 0; bottom: 0; align-items: flex-end; } .bnuProduct__badges--bl { max-width: calc(100% - 36px); } .bnuProduct__badges--bl .bnuProductBadge:not(.bnuProductBadge--round):not(.bnuProductBadge--promo) { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } p.bnuProduct__rating { margin-block-start: calc(var(--layout-spacing) * 0.5); } p.bnuProduct__rating > span { display: inline-flex; column-gap: 4px; align-items: center; } @media (max-width: 768px) { p.bnuProduct__rating > span:last-child span { display: none; } } .bnuProduct__bottom { display: flex; row-gap: calc(var(--layout-spacing) * 0.5); flex-direction: column; margin-top: auto; } .bnuProduct__bottom .add-to-cart { flex-grow: 1; } .bnuProduct__buttons { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); margin-block-start: calc(var(--layout-spacing) * 0.5); } .bnuProduct__buttons .bnuButton--favorites.active i { color: var(--color-text); font-weight: 700; } @media (max-width: 768px) { .bnuProduct__buttons .bind-add-to-wishlist { display: none; } } .bnuProduct__price { display: flex; column-gap: calc(var(--layout-spacing) * 0.5); align-items: center; line-height: 1; font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); font-weight: 500; } .bnuProduct__price > img { display: inline-block; width: auto; height: 20px; } @media (max-width: 768px) { .bnuProduct__price > img { height: 16px; } } .bnuProduct__price > ins { color: var(--color-promo); font-weight: 700; text-decoration: none; } .bnuProduct__price > ins.card { color: var(--color-accent); } .bnuProduct__price > ins, .bnuProduct__price > del { white-space: nowrap; } .bnuProduct__price > del { font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); font-weight: 400; } .bnuProduct__price > p { width: 100%; font-size: clamp(0.44rem, 0.36rem + 0.27vw, 0.56rem); color: var(--color-promo); line-height: 1; text-transform: uppercase; } .bnuProduct__price > p strong { display: block; font-weight: 700; font-size: clamp(0.56rem, 0.48rem + 0.27vw, 0.69rem); } .bnuProduct__price .bnuProductBadge { padding-inline: 0.25em; } .bnuProduct__price-info p { font-size: clamp(0.63rem, 0.58rem + 0.13vw, 0.69rem); } .bnuProduct__price-info p.starting-price { color: var(--color-text-light); } .bnuProduct__promo { display: flex; column-gap: var(--layout-spacing); align-items: center; border: 1px solid var(--color-border); border-top: none; border-bottom-right-radius: var(--card-border-radius); border-bottom-left-radius: var(--card-border-radius); background-color: white; font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); padding: 3%; font-weight: 500; } @media (max-width: 768px) { .bnuProduct__promo p { line-height: 1.1; } } .bnuProduct__promo figure { position: relative; flex-shrink: 0; margin: 0; } .bnuProduct__promo figure .gift { display: flex; position: absolute; top: calc(var(--layout-spacing) * -0.5); left: calc(var(--layout-spacing) * -0.5); justify-content: center; align-items: center; border-radius: calc(var(--card-border-radius) * 0.5); background-color: var(--color-promo); width: calc(var(--layout-spacing) * 2); height: calc(var(--layout-spacing) * 2); color: white; font-size: clamp(0.75rem, 0.67rem + 0.27vw, 0.88rem); } .bnuProduct__promo figure .gift i { color: white; } .bnuProduct__promo figure img { display: block; border: 1px solid var(--color-border); border-radius: calc(var(--card-border-radius) * 0.5); background-color: #ffffff; width: calc(var(--layout-spacing) * 4); height: calc(var(--layout-spacing) * 4); object-fit: contain; cursor: pointer; } .bnuProductBadge { display: flex; position: relative; justify-content: center; align-items: center; border-radius: calc(var(--card-border-radius) * 0.5); background-color: var(--color-promo); padding-inline: 0.5em; padding-block: 0.25em; height: 20px; color: white; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; white-space: nowrap; } @media (max-width: 768px) { .bnuProductBadge { height: 16px; font-size: 11px; } } .bnuProductBadge i { color: white; } .bnuProductBadge.bnuProductBadge--round { border-radius: 50%; padding-inline: 0; aspect-ratio: 1; height: 100%; text-align: center; } @media (max-width: 768px) { .bnuProductBadge.bnuProductBadge--round { height: auto; } } .bnuProductBadge.bnuProductBadge--round + .bnuProductBadge--round { transform: translateY(-25%); } .bnuProductBadge.bnuProductBadge--card { background-color: var(--color-accent); } .bnuProductBadge.bnuProductBadge--card img { display: block; position: absolute; top: 0; right: 0; transform: rotate(-15deg); width: auto; height: 20px; } @media (max-width: 768px) { .bnuProductBadge.bnuProductBadge--card img { top: -4px; right: -4px; height: 16px; } } .bnuProductBadge.bnuProductBadge--blue { background-color: var(--color-text); } .bnuProductBadge.bnuProductBadge--green { background-color: var(--color-accent); } .bnuProductBadge.bnuProductBadge--eprice { background-color: #92d400; } .bnuProductBadge.bnuProductBadge--pink { background-color: #f17fb2; } .bnuProductBadge.bnuProductBadge--darkpink { background-color: var(--color-promo); } .bnuProductBadge.bnuProductBadge--orangered { background-color: #fc4c02; } .bnuProductBadge.bnuProductBadge--red { background-color: #f15922; } .bnuProductBadge.bnuProductBadge--black { background-color: #000; } .bnuProductBadge.bnuProductBadge--express { background-color: #f18d22; } .bnuProductBadge.bnuProductBadge--neutral { background-color: var(--color-text); } .bnuProductBadge.bnuProductBadge--orange { background-color: #fc4c02; } .bnuPageContent .bnuProductBadge i, .bnuPageContent .bnuProduct__promo i { color: white; } .bnuProductTooltip { display: none; position: absolute; z-index: 2; bottom: 62px; left: -16px; width: max-content; min-width: 72px; max-width: 180px; padding: 8px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 0 1px var(--color-border); color: var(--color-text); font-size: 13px; line-height: 14px; text-align: center; overflow-wrap: break-word; pointer-events: none; opacity: 1; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } @media (max-width: 768px) { .bnuProductTooltip { left: -8px; } } .bnuProductTooltip::after { content: ""; position: absolute; bottom: -9px; left: 35px; width: 0; height: 0; border-top: 10px solid #ffffff; border-right: 10px solid transparent; border-left: 10px solid transparent; } @media (max-width: 768px) { .bnuProductTooltip::after { right: auto; left: 22px; margin: 0; } } .bnuProductTooltip::before { content: ""; position: absolute; bottom: -10px; left: 35px; width: 0; height: 0; border-top: 10px solid var(--color-border); border-right: 10px solid transparent; border-left: 10px solid transparent; } @media (max-width: 768px) { .bnuProductTooltip::before { right: auto; left: 22px; margin: 0; } } .bnuPageLayout--product:has(.bnuProductInner) { display: block; } .bnuPageLayout--product .bnuPageContent--product { width: 100%; max-width: var(--layout-mw); } .bnuPageLayout--product .bnAttentionBox a, .bnuPageLayout--product .bnAttentionBox--red a { color: inherit; } .bnuPageHeader--product { margin-block-end: calc(var(--layout-spacing) * 2); } .bnuProductInner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--layout-gap); row-gap: var(--layout-row-gap); align-items: start; width: 100%; max-width: var(--layout-mw); } .bnuProductInner__gallery { grid-column: 1/span 4; grid-row: 1; min-width: 0; } @media (max-width: 1024px) { .bnuProductInner__gallery { grid-column: 1/span 5; } } @media (max-width: 768px) { .bnuProductInner__gallery { grid-column: 1/-1; grid-row: 1; } } .bnuProductInner__intro { grid-column: 5/span 5; grid-row: 1; min-width: 0; } @media (max-width: 1024px) { .bnuProductInner__intro { grid-column: 6/-1; } } @media (max-width: 768px) { .bnuProductInner__intro { grid-column: 1/-1; grid-row: 2; } } .bnuProductInner__aside { display: flex; flex-direction: column; gap: var(--layout-spacing); grid-column: 10/span 3; grid-row: 1/span 2; align-self: start; position: sticky; top: calc(var(--promo-height) + var(--header-height) + var(--layout-spacing) * 2); min-width: 0; } @media (max-width: 1024px) { .bnuProductInner__aside { grid-column: 1/-1; grid-row: 3; align-self: stretch; position: static; top: auto; } } .isScrolledDown .bnuProductInner__aside { top: calc(var(--promo-height) + var(--layout-spacing) * 2); } @media (max-width: 1024px) { .isScrolledDown .bnuProductInner__aside { top: auto; } } .bnuProductInner__aside .bnuProductBrand { display: flex; align-items: center; gap: calc(var(--layout-spacing) * 1.5); margin: 0; } .bnuProductInner__aside .bnuProductBrand__image img { display: block; width: 100%; max-width: 164px; height: auto; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); background-color: #fff; } .bnuProductInner__aside .bnuProductBrand__link { font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.285; text-decoration: underline; text-underline-offset: 2px; } .bnuProductInner__aside .bnuProductBrand--text { border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.5); } .bnuProductInner__aside .bnuProductBrand__name { margin: 0; width: 164px; color: var(--color-text); font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1.25; text-transform: uppercase; } .bnuProductInner__aside .bnuProductBrand__name a { color: inherit; text-decoration: none; } .bnuProductInner__body { display: flex; flex-direction: column; gap: var(--layout-row-gap); grid-column: 1/span 9; grid-row: 2; min-width: 0; } @media (max-width: 1024px) { .bnuProductInner__body { grid-column: 1/-1; grid-row: 4; } } .bnuProductNotices { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuProductNotices .bnuNotice { margin: 0; } .bnuProductGallery { position: relative; --gallery-thumb-size: calc(var(--layout-spacing) * 4 + var(--layout-spacing) / 2); --gallery-thumb-padding: calc(var(--layout-spacing) / 2); } .bnuProductGallery__media { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 1); } .bnuProductGallery__main { position: relative; width: 100%; aspect-ratio: 1/1; border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing)); box-sizing: border-box; overflow: hidden; } .bnuProductGallery__main.loader-animation-product-gallery > .bnuProductGallery__carouselWrap { background-color: #fff; } .bnuProductGallery__main img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProductGallery__main--single { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1; border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 2); box-sizing: border-box; } .bnuProductGallery__main--single img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProductGallery__carouselWrap { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; } .bnuProductGallery__mainSlider { width: 100%; height: 100%; } .bnuProductGallery__mainSlider .swiper, .bnuProductGallery__mainSlider .swiper-wrapper { height: 100%; } .bnuProductGallery__mainSlider .swiper-slide { display: flex; align-items: center; justify-content: center; height: 100%; } .bnuProductGallery__mainSlider .swiper-slide > span, .bnuProductGallery__mainSlider .swiper-slide > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .bnuProductGallery__carouselWrap .swiper-pagination { display: none; } .bnuProductGallery__thumbs { display: block; width: 100%; } .bnuProductGallery__thumbsSlider { width: 100%; } .bnuProductGallery__thumbsSlider .swiper-slide { width: var(--gallery-thumb-size); } .bnuProductGallery__thumbButton { display: block; width: var(--gallery-thumb-size); height: var(--gallery-thumb-size); padding: var(--gallery-thumb-padding); box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: #fff; box-shadow: none; cursor: pointer; overflow: hidden; } .bnuProductGallery__thumbButton picture, .bnuProductGallery__thumbButton img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProductGallery__thumbButton:focus, .bnuProductGallery__thumbButton:focus-visible, .bnuProductGallery__thumbButton:active { box-shadow: none; outline: none; } .bnuProductGallery__thumbsSlider .swiper-slide-thumb-active > .bnuProductGallery__thumbButton { border: 1px solid var(--color-text); box-shadow: none; } .bnuProductGallery__thumbsSlider .swiper-slide-thumb-active > .bnuProductGallery__thumbButton:focus, .bnuProductGallery__thumbsSlider .swiper-slide-thumb-active > .bnuProductGallery__thumbButton:focus-visible, .bnuProductGallery__thumbsSlider .swiper-slide-thumb-active > .bnuProductGallery__thumbButton:active { border-color: var(--color-text); box-shadow: none; } .bnuProductGallery__info { margin: 0; } .bnuProductGallery__figure { position: relative; margin: 0; width: 100%; height: 100%; min-height: 0; } .bnuProductGallery__figure .bnuProduct__badges { z-index: 3; } .bnuProductGallery__figure:has(.bnuProduct__badges--br) .bnuProduct__badges--br { bottom: 36px; } .bnuProductGallery__figure .bnuCampaignSticker { position: relative; width: 56px; height: 56px; } .bnuProductGallery__figure .bnuCampaignSticker img { display: block; width: 100%; height: 100%; object-fit: contain; } .bnuProductGallery__figure .bnuCampaignSticker:hover > .bnuProductTooltip { display: block; right: 0; bottom: 56px; left: auto; } .bnuProductGallery__figure .bnuCampaignSticker:hover > .bnuProductTooltip::after { right: 20px; left: auto; } .bnuProductGallery__figure .bnuCampaignSticker:hover > .bnuProductTooltip::before { right: 20px; bottom: -10px; left: auto; } .bnuProductGallery__figure .bnuProductGallery__info { position: absolute; z-index: 3; right: 0; bottom: 0; max-width: min(100%, 24em); color: var(--color-text-light); font-size: 9px; line-height: 1.3; text-align: right; pointer-events: none; } @media (max-width: 768px) { .bnuProductGallery__figure .bnuProductGallery__info { max-width: min(100%, 14em); font-size: 10px; } } .bnuProductGallery__figure:has(.bnuProduct__badges--br) .bnuProductGallery__info { max-width: min(100% - 56px - var(--layout-spacing), 14em); padding-inline-end: var(--layout-spacing); } .bnuProductIntro .bnuProductTitle { color: var(--color-text); } .bnuProductIntro__category { margin: calc(var(--layout-spacing) * 2 / 3) 0 var(--layout-spacing); color: var(--color-text-light); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4; } .bnuProductIntro__meta { margin-top: calc(var(--layout-spacing) * 1.5); } .bnuProductIntro__category + .bnuProductIntro__meta { margin-top: 0; } .bnuProductIntro__rating { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--layout-spacing) * 1.25); color: var(--color-text-light); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4; } .bnuProductIntro__features { margin-block-start: calc(var(--layout-spacing) * 2); } .bnuProductIntro__featureList { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.67); margin: 0; padding: 0; list-style: none; } .bnuProductIntro__feature { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.67); padding: calc(var(--layout-spacing) * 2 / 3) var(--layout-spacing); border: 1px solid #d0e3d2; border-radius: var(--border-radius); background-color: color-mix(in oklch, var(--color-accent), transparent 92%); color: var(--color-accent); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuProductIntro__featureIcon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; color: var(--color-accent); font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1; } .bnuProductIntro__featureIcon img { display: block; width: 22px; height: auto; } .bnuProductIntro__featureIcon > i, .bnuPageContent .bnuProductIntro__featureIcon > i { color: inherit; } .bnuProductIntro__featureLabel { color: var(--color-accent); } .bnuProductIntro__features--accordion { margin-block: 0 calc(var(--layout-spacing) * 1.5); } .bnuProductIntro__description { margin-block-start: var(--layout-spacing); color: var(--color-text); font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1.666; } .bnuProductIntro__substance { margin-top: calc(var(--layout-spacing) * 1.5); color: var(--color-text-light); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); } .bnuProductIntro__actions { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 1.5); margin-top: calc(var(--layout-spacing) * 3); } .bnuProductIntro__variants { margin-top: calc(var(--layout-spacing) * 2); } .bnuVariants ul { margin: 0; padding: 0; list-style: none; } .bnuVariants__item:not(:last-child) { margin-block-end: var(--layout-spacing); } .bnuVariants__label { display: inline-block; margin-block-end: calc(var(--layout-spacing) * 2 / 3); color: var(--color-text); font-weight: 500; font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuVariants__select { display: block; position: relative; } .bnuVariants__select.active .bnuVariants__toggle.current { position: relative; z-index: 2; border-bottom-color: transparent; border-end-end-radius: 0; border-end-start-radius: 0; background-color: #fff; } .bnuVariants__select.active .bnuVariants__toggle.current::after { content: "\f106"; } .bnuVariants__select.active .bnuVariants__list { display: block; pointer-events: auto; } .bnuVariants__select.active .bnuVariants__list::before { content: ""; display: block; position: absolute; z-index: -1; top: calc(var(--layout-spacing) * -4); left: 0; width: 100%; height: calc(100% + var(--layout-spacing) * 4); border-radius: var(--border-radius-small); background-color: #fff; box-shadow: var(--card-box-shadow); pointer-events: none; } .bnuVariants__select.active .bnuVariants__list .bnuVariants__option:first-child .bnuVariants__toggle { border-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; } .bnuVariants__select .price { margin-inline-end: calc(var(--layout-spacing) * 2 / 3); white-space: nowrap; font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuVariants__select .price:last-child { margin-inline-end: 0; } .bnuVariants__select .price--group { display: flex; align-items: center; } .bnuVariants__select .price--regular { color: var(--color-text); font-weight: 500; } .bnuVariants__select .price--card { display: inline-flex; align-items: center; color: var(--color-accent); font-weight: 500; } .bnuVariants__select .price--card img { margin-inline-end: 4px; box-shadow: var(--box-shadow); } .bnuVariants__select .price--old { color: var(--color-text-light); font-weight: 400; text-decoration: line-through; } .bnuVariants__select .price--discount, .bnuVariants__select .price--new { color: var(--color-promo); font-weight: 500; } .bnuVariants__toggle { display: flex; flex-wrap: nowrap; justify-content: space-between; border: 1px solid var(--color-border); background-color: #fff; padding: calc(var(--layout-spacing) * 1.08) calc(var(--layout-spacing) * 2.67) calc(var(--layout-spacing) * 1.08) var(--layout-spacing); color: var(--color-text); text-decoration: none; transition: background-color 0.1s ease-in-out; cursor: pointer; font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4285714286; } .bnuVariants__toggle:hover:not(.current) { background-color: color-mix(in oklch, var(--color-text), white 96%); } .bnuVariants__toggle.current { position: relative; border-radius: var(--border-radius-small); } .bnuVariants__toggle.current::after { content: "\f107"; position: absolute; top: calc(var(--layout-spacing) * 1.25); right: calc(var(--layout-spacing) * 2 / 3); width: var(--layout-spacing); font-weight: 400; font-size: 14px; line-height: calc(var(--layout-spacing) * 4 / 3); font-family: var(--font-fa); text-align: center; } .bnuVariants__title { flex-grow: 1; overflow: hidden; max-width: calc(100% - 50px); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .bnuVariants__title--suppressed { max-width: calc(100% - 135px); } .bnuVariants__title--suppressed-2 { max-width: calc(100% - 185px); } .bnuVariants__list { display: none; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; background-color: #fff; pointer-events: none; } .bnuVariants__option { display: block; } .bnuVariants__option:last-child .bnuVariants__toggle { border-top: 0; border-end-end-radius: var(--border-radius-small); border-end-start-radius: var(--border-radius-small); } .bnuVariants__option .bnuVariants__title { overflow: visible; text-overflow: initial; white-space: normal; } .bnuProductInner__sectionsInner { display: flex; flex-direction: column; gap: var(--layout-row-gap); } .bnuProductInner__sectionsInner .productBanner__top:empty { display: none; } .bnuProductAccordions { width: 100%; } .bnuProductAccordions .bnuProductAccordion .bnuAccordion__title { margin: 0; } .bnuProductAccordions .bnuProductAccordion__body { color: var(--color-text); font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1.666; } .bnuProductAccordions .bnuProductAccordion__body--truncated { position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; max-height: 150px; line-break: after-white-space; } .bnuProductAccordions .bnuProductAccordion__body--truncated::after { content: ""; display: block; position: absolute; width: 100%; height: 40px; left: 0; bottom: 0; background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); } .bnuProductAccordions .bnuButtonAsTextLink { margin-top: calc(var(--layout-spacing) * 1.5); } .bnuProductAccordions .bnuAccordion__item--truncated .bnuButtonAsTextLink { margin-top: 4px; } .bnuProductAccordions .productPage_innerPlaceholder { display: block; margin-top: calc(var(--layout-spacing) * 1.5); } .bnuProductInner__reportError { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.75); color: var(--color-text); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); } .bnuProductInner__reviews { padding-top: 0; border-top: 0; } .bnuProductInner__related { width: 100%; min-width: 0; } .bnuProductRelated { width: 100%; min-width: 0; } .bnuProductRelated__skeleton { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuProductRelated__skeleton .bnuSkeleton__row { flex-direction: row; } } .bnuProductRelated__skeletonCard { height: 400px; } @media (max-width: 768px) { .bnuProductRelated__skeletonCard { height: 280px; } } @media (max-width: 768px) { .bnuProductRelated__skeleton .bnuSkeleton__row > .bnuProductRelated__skeletonCard:nth-child(n+3) { display: none; } } .bnuProductTabs { width: 100%; min-width: 0; } .bnuBoughtTogether { position: relative; width: 100%; min-width: 0; } @media (max-width: 768px) { .bnuBoughtTogether--mobile { display: block; } } @media (min-width: 768px) { .bnuBoughtTogether--mobile { display: none; } } @media (max-width: 768px) { .bnuBoughtTogether--desktop { display: none; } } @media (min-width: 768px) { .bnuBoughtTogether--desktop { display: block; } } .bnuBoughtTogether__skeletonTitle { margin-block-end: calc(var(--layout-spacing) * 1.5); } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonTitle { display: none; } .bnuBoughtTogether__skeletonPanel { width: 100%; } .bnuBoughtTogether--mobile .bnuBoughtTogether__skeletonPanel { border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.25); box-shadow: var(--card-box-shadow); } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonPanel { border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.5); box-shadow: var(--card-box-shadow); } .bnuBoughtTogether__skeleton { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 1.5); width: 100%; } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeleton { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: calc(var(--layout-spacing) * 1.25); row-gap: calc(var(--layout-spacing) * 1.25); } .bnuBoughtTogether__skeletonProduct { height: 72px; } @media (max-width: 768px) { .bnuBoughtTogether__skeletonProduct { height: 80px; } } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonProduct { width: min(180px, 100%); height: 72px; } .bnuBoughtTogether__skeletonPlus { width: 24px; height: 18px; margin-inline: auto; } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonPlus { display: none; } .bnuBoughtTogether__skeletonKit { flex: 0 1 auto; min-width: 120px; } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonKit { flex: 0 0 auto; } .bnuBoughtTogether__skeletonButton { width: 100%; flex-shrink: 0; } .bnuBoughtTogether--desktop .bnuBoughtTogether__skeletonButton { width: min(176px, 100%); } .bnuBoughtTogether__title { margin: 0 0 calc(var(--layout-spacing) * 1.5); color: var(--color-text); font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); line-height: 1.25; font-weight: 500; } .bnuBoughtTogether--desktop .bnuBoughtTogether__title { display: none; } .bnuBoughtTogether__panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .bnuBoughtTogether--mobile .bnuBoughtTogether__panel { border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.25); box-shadow: var(--card-box-shadow); } .bnuBoughtTogether--desktop .bnuBoughtTogether__panel { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: calc(var(--layout-spacing) * 1.25); border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.5); box-shadow: var(--card-box-shadow); } .bnuBoughtTogether__productsRow { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .bnuBoughtTogether--desktop .bnuBoughtTogether__productsRow { display: contents; } .bnuBoughtTogether--mobile .bnuBoughtTogether__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: calc(var(--layout-spacing) * 1.25); align-items: center; width: 100%; min-width: 0; } .bnuBoughtTogether--desktop .bnuBoughtTogether__item { display: flex; flex: 0 1 auto; align-items: center; gap: calc(var(--layout-spacing) * 1.25); min-width: 0; } .bnuBoughtTogether--mobile .bnuBoughtTogether__plus { display: flex; align-items: center; justify-content: center; width: 100%; padding: calc(var(--layout-spacing) * 1.25) 0; } .bnuBoughtTogether--mobile .bnuBoughtTogether__plus::after { content: "\f067"; color: var(--color-accent); font-family: var(--font-fa); font-size: 18px; line-height: 1; } .bnuBoughtTogether--desktop .bnuBoughtTogether__plus { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: calc(var(--layout-spacing) * 4); } .bnuBoughtTogether--desktop .bnuBoughtTogether__plus::after { content: "\f067"; color: var(--color-accent); font-family: var(--font-fa); font-size: 18px; line-height: 1; } .bnuBoughtTogether__image { display: block; object-fit: contain; } .bnuBoughtTogether--mobile .bnuBoughtTogether__image { grid-column: 1; grid-row: 1; width: 64px; height: 64px; } .bnuBoughtTogether--desktop .bnuBoughtTogether__image { flex-shrink: 0; width: 60px; height: 60px; } @media (max-width: 1024px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__image { width: 56px; height: 56px; } } .bnuBoughtTogether__info { min-width: 0; } .bnuBoughtTogether--mobile .bnuBoughtTogether__info { grid-column: 2; grid-row: 1; } .bnuBoughtTogether--desktop .bnuBoughtTogether__info { flex: 1 1 auto; max-width: 190px; } @media (max-width: 1248px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__info { max-width: 128px; } } .bnuBoughtTogether__name { display: block; margin-block-end: calc(var(--layout-spacing) * 0.75); color: var(--color-text); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.35; text-decoration: none; } .bnuBoughtTogether__name:hover { text-decoration: underline; } .bnuBoughtTogether--mobile .bnuBoughtTogether__name { overflow-wrap: anywhere; word-break: normal; } .bnuBoughtTogether--desktop .bnuBoughtTogether__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; } @media (max-width: 1248px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__name { font-size: 13px; } } .bnuBoughtTogether__prices { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--layout-spacing) * 0.5); } .bnuBoughtTogether__prices--nowrap { white-space: nowrap; } .bnuBoughtTogether--mobile .bnuBoughtTogether__prices--nowrap { white-space: normal; } .bnuBoughtTogether__price { color: var(--color-text); font-weight: 500; font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1.25; } .bnuBoughtTogether__price--old { color: var(--color-text-light); font-weight: 400; text-decoration: line-through; } @media (max-width: 1248px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__price--old { font-size: 12px; } } .bnuBoughtTogether__price--promo { color: var(--color-promo); } .bnuBoughtTogether__price--card { color: var(--color-accent); } .bnuBoughtTogether__price--total { color: var(--color-text); } .bnuBoughtTogether--desktop .bnuBoughtTogether__price--total { font-size: 20px; line-height: 1.2; } @media (max-width: 1248px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__price--total { font-size: 16px; } } .bnuBoughtTogether__prices--nowrap .LCCardPriceBox { display: inline-flex; align-items: center; gap: 4px; } .bnuBoughtTogether__prices--nowrap .LCCardPriceBox img { width: 20px; height: 20px; } .bnuBoughtTogether--desktop .bnuBoughtTogether__prices--nowrap .LCCardPriceBox { display: inline-block; } .bnuBoughtTogether__footer { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--layout-spacing) * 1.25); width: 100%; } .bnuBoughtTogether--mobile .bnuBoughtTogether__footer { margin-block-start: calc(var(--layout-spacing) * 1.5); gap: calc(var(--layout-spacing) * 1.25); } .bnuBoughtTogether--desktop .bnuBoughtTogether__footer { display: contents; } .bnuBoughtTogether__kitPrice { margin: 0; width: 100%; } .bnuBoughtTogether--desktop .bnuBoughtTogether__kitPrice { flex: 0 0 auto; width: auto; margin-inline: calc(var(--layout-spacing) * 1) calc(var(--layout-spacing) * 1.25); white-space: nowrap; } .bnuBoughtTogether__kitPriceLabel { margin: 0; color: var(--color-text-light); font-size: clamp(0.81rem, 0.77rem + 0.13vw, 0.88rem); line-height: 1.4; } .bnuBoughtTogether--desktop .bnuBoughtTogether__kitPriceLabel { font-size: 13px; } @media (max-width: 1248px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__kitPriceLabel { font-size: 12px; } } .bnuBoughtTogether--mobile .bnuBoughtTogether__kitPriceLabel { display: block; } .bnuBoughtTogether__kitPriceBreak { display: none; } .bnuBoughtTogether--desktop .bnuBoughtTogether__kitPriceBreak { display: block; } @media (max-width: 480px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__kitPriceBreak { display: none; } } .bnuBoughtTogether__kitPriceCard { display: inline-flex; align-items: center; } .bnuBoughtTogether__addAll { width: auto; max-width: none; white-space: nowrap; } .bnuBoughtTogether--mobile .bnuBoughtTogether__price--total { display: block; margin-block-start: calc(var(--layout-spacing) * 0.5); font-size: 20px; line-height: 1.2; } .bnuBoughtTogether--mobile .bnuBoughtTogether__addAll { width: 100%; } .bnuBoughtTogether--desktop .bnuBoughtTogether__addAll { flex: 0 0 auto; max-width: 176px; } @media (max-width: 1024px) { .bnuBoughtTogether--desktop .bnuBoughtTogether__addAll { padding-inline: calc(var(--layout-spacing) * 1.5); font-size: 13px; } } .bnuProductInner .bnuBoughtTogether { margin: 0; } .bnuProductInner .bnuBoughtTogether--desktop { margin: 0; } .bnuProductDeliveryOptions { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuProductDeliveryOptions__intro { margin: 0; color: var(--color-text-light); } .bnuProductDeliveryOptions__group { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg); } .bnuProductDeliveryOptions__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--layout-spacing); padding: calc(var(--layout-spacing) * 1.5) var(--layout-gap); border-top: 1px solid var(--color-border); } .bnuProductDeliveryOptions__row:first-child { border-top: 0; } .bnuProductDeliveryOptions__row--heading { border-bottom: 1px solid var(--color-border); } .bnuProductDeliveryOptions__title { display: flex; flex: 1 1 12rem; align-items: center; gap: calc(var(--layout-spacing) * 0.75); min-width: 0; font-weight: 500; } .bnuProductDeliveryOptions__title i { flex-shrink: 0; color: var(--color-text-light); } .bnuProductDeliveryOptions__title--logos { gap: calc(var(--layout-spacing) * 0.5); } .bnuProductDeliveryOptions__title--logos img { width: auto; max-height: 20px; } .bnuProductDeliveryOptions__link { margin-inline-start: calc(var(--layout-spacing) * 0.5); } .bnuProductDeliveryOptions__badge { flex-shrink: 0; white-space: nowrap; } .bnuProductDeliveryOptions__days { flex-shrink: 0; color: var(--color-text-light); white-space: nowrap; } .bnuProductDeliveryOptions__price { flex-shrink: 0; margin-inline-start: auto; font-weight: 700; white-space: nowrap; text-align: right; } .bnuProductDeliveryOptions__price--free { color: var(--color-success); text-transform: uppercase; } @media (max-width: 768px) { .bnuProductDeliveryOptions__row:not(.bnuProductDeliveryOptions__row--heading) { row-gap: calc(var(--layout-spacing) * 0.5); } .bnuProductDeliveryOptions__title { flex-basis: 100%; } .bnuProductDeliveryOptions__price { margin-inline-start: 0; } } .bnuPharmaciesQnts { display: flex; flex-direction: column; gap: var(--layout-gap); } .bnuPharmaciesQnts__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--layout-spacing); } .bnuPharmaciesQnts__filters .bnuInputWrap { flex: 1 1 16rem; margin: 0; } .bnuPharmaciesQnts__onDutyFilter { flex: 0 0 auto; margin: 0; } .bnuPharmaciesQnts__results { min-width: 0; } .bnuPharmaciesQnts__tableWrap { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--border-radius); max-height: 50vh; } .bnuPharmaciesQnts__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; } .bnuPharmaciesQnts__table tr:last-child td { border-bottom: 0; } .bnuPharmaciesQnts__table td { border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 1.5) var(--layout-gap) calc(var(--layout-spacing) * 1.5) 0; } .bnuPharmaciesQnts__table td:first-child { padding-left: var(--layout-gap); } .bnuPharmaciesQnts__table a { color: var(--color-info); text-decoration: none; } .bnuPharmaciesQnts__table a:hover { text-decoration: underline; } .bnuPharmaciesQnts__region { font-weight: 700; } .bnuPharmaciesQnts__updated { color: var(--color-text-light); font-size: 14px; white-space: nowrap; } .bnuPharmaciesQnts__quantity { font-weight: 600; white-space: nowrap; text-align: right; } .bnuPharmaciesQnts__onDutyIcon { margin-inline-start: calc(var(--layout-spacing) * 0.5); color: var(--color-success); } .bnuPharmaciesQnts__onDutyLegend { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.5); margin: 0; color: var(--color-text-light); font-size: 14px; } .bnuPharmaciesQnts__onDutyLegend i { color: var(--color-success); } @media (max-width: 768px) { .bnuPharmaciesQnts__table { font-size: 14px; } .bnuPharmaciesQnts__table td { display: block; padding: 0 var(--layout-spacing); border-bottom: 0; } .bnuPharmaciesQnts__table .bnuPharmaciesQnts__region { padding-top: var(--layout-spacing); } .bnuPharmaciesQnts__table .bnuPharmaciesQnts__updated, .bnuPharmaciesQnts__table .bnuPharmaciesQnts__quantity { display: inline-block; width: 50%; padding-bottom: var(--layout-spacing); border-bottom: 1px solid var(--color-border); } .bnuPharmaciesQnts__table .bnuPharmaciesQnts__updated--full { width: 100%; } .bnuPharmaciesQnts__table .bnuPharmaciesQnts__quantity { text-align: right; } } .bnuMinCartPromo { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--layout-spacing) * 0.67); margin-block-end: var(--layout-spacing); padding: calc(var(--layout-spacing) * 0.5) calc(var(--layout-spacing) * 1.17); border: 1px dashed; border-radius: var(--border-radius-small); width: 100%; } .bnuMinCartPromo--promo { border-color: var(--color-promo); background-color: color-mix(in oklch, var(--color-promo), transparent 92%); color: var(--color-promo); } .bnuMinCartPromo--lc { border-color: var(--color-accent); background-color: color-mix(in oklch, var(--color-accent), transparent 92%); color: var(--color-accent); } .bnuMinCartPromo--small { margin-block-end: 0; padding: calc(var(--layout-spacing) * 0.5) calc(var(--layout-spacing) * 0.83); } .bnuMinCartPromo--small .bnuMinCartPromo__text { font-size: 12px; } .bnuMinCartPromo__text { flex: 1; padding-inline-end: calc(var(--layout-spacing) * 2); font-size: 11px; font-weight: 500; line-height: 1.2727272727; } @media (max-width: 768px) { .bnuMinCartPromo__text { padding-inline-end: 0; } } .bnuMinCartPromo__sum { white-space: nowrap; } .bnuMinCartPromo__info { display: flex; flex-shrink: 0; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; } @media (max-width: 768px) { .bnuMinCartPromo__info { display: none; } } .bnuMinCartPromo__tooltip { position: fixed; z-index: 9999; display: none; width: min(280px, 90vw); padding: calc(var(--layout-spacing) * 1.33) calc(var(--layout-spacing) * 1.67); border: 1px solid var(--color-border); border-radius: var(--border-radius-small); background: var(--color-bg); box-shadow: var(--box-shadow); color: var(--color-text); font-size: 14px; line-height: 1.35; } .bnuProduct__price--minCartValue { gap: calc(var(--layout-spacing) * 0.67); } .bnuProduct__price--minCartValue .bnuProduct__price--promo { font-weight: 700; color: var(--color-promo); } .bnuProduct__price--minCartValue .price--card ins.card { color: var(--color-accent); font-weight: 700; text-decoration: none; } .bnuProduct__price--minCartValue .bnuProduct__price--regular { color: var(--color-text); font-weight: 500; } .bnuProductPriceCard .bnuProduct__price--minCartValue .bnuProduct__price--promo { font-size: 24px; line-height: 1.1666666667; } .bnuProductPriceCard .bnuProduct__price--minCartValue .price--card ins.card { font-size: 24px; line-height: 1.1666666667; } .bnuProductPriceCard .bnuProduct__price--minCartValue .bnuProduct__price--regular { font-size: 16px; line-height: 1.125; } .bnuProduct .bnuProduct__price--minCartValue { flex-wrap: wrap; width: 100%; } .bnuProduct .bnuProduct__price--minCartValue .price--card { display: flex; align-items: center; column-gap: calc(var(--layout-spacing) * 0.5); } .bnuProduct .bnuProduct__price--minCartValue .price--card img { display: inline-block; width: auto; height: 20px; } @media (max-width: 768px) { .bnuProduct .bnuProduct__price--minCartValue .price--card img { height: 16px; } } .bnuProduct .bnuProduct__price--minCartValue .bnuProduct__price--regular { font-weight: 400; font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); } .bnuProductPriceCard { border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 1.5); box-shadow: var(--card-box-shadow); } .bnuProductPriceCard .bnuProductPriceBox { width: 100%; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: 14px; line-height: 1.4285714286; color: var(--color-text); } .bnuProductPriceCard .bnuProductPriceBox hr { margin: calc(var(--layout-spacing) * 1.5) 0; border: 0; border-top: 1px solid var(--color-border); } .bnuProductPriceCard .bnuProductPriceBox strong { font-weight: 700; } .bnuProductPriceCard .bnuProductPriceBox a:not(.bnuButton, .bnuButtonAsTextLink) { display: inline-block; color: inherit; text-decoration: none; cursor: pointer; } .bnuProductPriceCard .bnuProductPriceBox a:not(.bnuButton, .bnuButtonAsTextLink):hover { text-decoration: underline; } .bnuProductPriceCard .bnuProductPriceBox .textColor--blue { color: var(--color-text); } .bnuProductPriceCard .bnuProductPriceBox__price { position: relative; display: flex; flex-direction: column; margin-block-end: calc(var(--layout-spacing) * 1.5); font-size: 0; } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price { font-size: 0; } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price > ins { color: var(--color-text); font-size: 24px; line-height: 1.1666666667; white-space: nowrap; } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price > ins.card { color: var(--color-accent); } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price.price--group:has(> del) > ins:not(.card) { color: var(--color-promo); } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price.price--card > ins:not(.card) { color: var(--color-promo); } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price > del { font-size: 16px; font-weight: 500; line-height: 1.125; } .bnuProductPriceCard .bnuProductPriceBox__price > .bnuProduct__price > .bnuProduct__price { font-size: 24px; line-height: 1.1666666667; white-space: nowrap; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card, .bnuProductPriceCard .bnuProductPriceBox__price .price--group, .bnuProductPriceCard .bnuProductPriceBox__price .bnuProduct__price--minCartValue { flex-wrap: wrap; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card { display: flex; align-items: center; white-space: normal; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card span { white-space: nowrap; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card img { display: inline-block; position: relative; width: 35px; height: 22px; vertical-align: top; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card span.cardInfo { color: var(--color-text-light); font-size: 11px; font-weight: 400; line-height: 1.2727272727; white-space: normal; } .bnuProductPriceCard .bnuProductPriceBox__price .price--card span.cardInfo a { color: var(--color-accent); text-decoration: underline; } .bnuProductPriceCard .bnuProductPriceBox__price .price--group { display: flex; align-items: baseline; width: 100%; margin-block-start: calc(var(--layout-spacing) * 0.67); } .bnuProductPriceCard .bnuProductPriceBox__price .price--group:first-child { margin-block-start: 0; } .bnuProductPriceCard .bnuProductPriceBox__price .price--withCode { margin-block-start: calc(var(--layout-spacing) * 0.33); font-size: 14px; font-weight: 500; line-height: 1; color: var(--color-promo); } .bnuProductPriceCard .bnuProductPriceBox__price .price--withCode b { font-weight: 700; } .bnuProductPriceCard .bnuProductPriceBox__oldPricePeriod { display: flex; flex-basis: 100%; flex-direction: column; color: var(--color-text-light); font-size: 11px; font-weight: 400; line-height: 1.2727272727; } .bnuProductPriceCard .bnuProductPriceBox__priceAdditional { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.33); margin-block-start: calc(var(--layout-spacing) * 0.33); color: var(--color-text-light); font-size: 11px; font-weight: 400; line-height: 1.2727272727; } .bnuProductPriceCard .bnuProductPriceBox__priceAdditional .bnPriceBox__measurePrice { font-size: inherit; font-weight: inherit; line-height: inherit; } .bnuProductPriceCard .bnuProductPriceBox__oldPricePeriodTitle, .bnuProductPriceCard .bnuProductPriceBox__oldPricePeriodValue { display: block; } .bnuProductPriceCard .bnuProductPriceBox__priceInfoWrap { margin-block-start: var(--layout-spacing); } .bnuProductPriceCard .bnuProductPriceBox__priceInfo, .bnuProductPriceCard .bnuProductPriceBox__priceInfoSoft { margin: 0 0 calc(var(--layout-spacing) * 0.67); color: var(--color-text-light); font-size: 12px; line-height: 1.1666666667; } .bnuProductPriceCard .bnuProductPriceBox__priceInfo:last-child, .bnuProductPriceCard .bnuProductPriceBox__priceInfoSoft:last-child { margin-block-end: 0; } .bnuProductPriceCard .bnuProductPriceBox__priceInfo i, .bnuProductPriceCard .bnuProductPriceBox__priceInfoSoft i { margin-inline-end: calc(var(--layout-spacing) * 0.33); font-size: inherit; } .bnuProductPriceCard .bnuProductPriceBox__priceInfo .lowestPrice, .bnuProductPriceCard .bnuProductPriceBox__priceInfoSoft .lowestPrice { color: inherit; } .bnuProductPriceCard .bnuProductPriceBox__priceInfoSoft { margin-block-start: 2px; font-size: 10px; line-height: 1.2; } .bnuProductPriceCard .bnuProductPriceBox__splittedPayment { color: var(--color-text); font-size: 12px; font-weight: 500; } .bnuProductPriceCard .bnuProductPriceBox__priceWithCode { display: flex; position: relative; align-items: baseline; justify-content: space-between; border-radius: var(--border-radius-small); background-color: #fff; padding: 6px 4px 6px 8px; } .bnuProductPriceCard .bnuProductPriceBox__priceWithCode .priceText { max-width: 85%; color: var(--color-promo); font-size: 14px; font-weight: 700; line-height: 1.4285714286; } .bnuProductPriceCard .bnuProductPriceBox__priceWithCode .copyIcon { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); cursor: pointer; } .bnuProductPriceCard .bnuProductPriceBox__priceWithCode .copyIcon i { color: var(--color-text); font-size: 14px; } .bnuProductPriceCard .bnuProductPriceBox__outOfStockText { margin-block-end: calc(var(--layout-spacing) * 0.67); color: var(--color-error); } .bnuProductPriceCard .bnuProductPriceBox__promo { margin-block: calc(var(--layout-spacing) * 1.5); } .bnuProductPriceCard .bnuProductPriceBox__promo:empty { display: none; } .bnuProductPriceCard .bnuProductPriceBox__addToCartInner { display: flex; align-items: stretch; gap: calc(var(--layout-spacing) / 2); } .bnuProductPriceCard .bnuProductPriceBox__quantity { display: flex; flex-shrink: 0; align-items: stretch; } .bnuProductPriceCard .bnuProductPriceBox__quantity > .bnuInputWrap { display: flex; flex-direction: column; justify-content: stretch; width: auto; } .bnuProductPriceCard .bnuProductPriceBox__quantity select.bnuInput { width: auto; min-width: calc(var(--layout-spacing) * 6); } .bnuProductPriceCard .bnuProductPriceBox__addToCartAction { flex: 1; min-width: 0; } .bnuProductPriceCard .bnuProductPriceBox__deliveryInfo { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.67); margin: 0 0 calc(var(--layout-spacing) * 1.5); padding: 0; list-style: none; line-height: 1.4285714286; } @media (max-width: 768px) { .bnuProductPriceCard .bnuProductPriceBox__deliveryInfo { gap: var(--layout-spacing); } } .bnuProductPriceCard .bnuProductPriceBox__deliveryItem { display: flex; gap: 8px; align-items: center; } .bnuProductPriceCard .bnuProductPriceBox__deliveryItem > i { flex-shrink: 0; width: 24px; font-size: 16px; line-height: 24px; text-align: center; } .bnuProductPriceCard .bnuProductPriceBox__deliveryText { min-width: 0; } .bnuProductPriceCard .bnuProductPriceBox__deliveryText strong { white-space: nowrap; } .bnuProductPriceCard .bnuProductPriceBox__deliveryMethods { margin-block-start: calc(var(--layout-spacing) * 0.67); } .bnuProductPriceCard .bnuProductPriceBox__actions { display: flex; gap: calc(var(--layout-spacing) * 0.5); align-items: center; justify-content: flex-end; } .bnuProductPriceCard .bnuProductPriceBox__actions .bnuButton--favorites.active i { color: var(--color-text); font-weight: 700; } .bnuProductPriceCard .bnuProductPriceBox__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--layout-spacing) * 0.67); } .bnuProductPriceCard .bnuProductPriceBox__footerStock { min-width: 0; } .bnuProductPriceCard .bnuProduct__promo { border: 0; border-radius: 0; background-color: transparent; padding: 0; } .bnuProductPriceCard .bnuProduct__promo p { margin: 0; } .bnuProductPriceCard .bnuProductPriceBox__promoTextWrap { margin-block-start: calc(var(--layout-spacing) * 1.5); } .bnuProductPriceCard .bnuProductPriceBox__promoTextWrap .bnuButtonAsTextLink { margin-block-start: calc(var(--layout-spacing) * 0.67); } .bnuProductPriceCard .bnuProductPriceBox__promoText { position: relative; max-width: 100%; color: var(--color-promo); font-size: 14px; line-height: 1.4285714286; } .bnuProductPriceCard .bnuProductPriceBox__promoText a { color: inherit; text-decoration: underline; } .bnuProductPriceCard .bnuProductPriceBox__promoText--truncated { overflow: hidden; max-height: 60px; line-break: after-white-space; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } @media (max-width: 768px) { .bnuProductPriceCard .bnuProductPriceBox__promoText--desktop { display: none; } } @media (min-width: 769px) { .bnuProductPriceCard .bnuProductPriceBox__promoText--desktop.bnuProductPriceBox__promoText--truncated { display: -webkit-box; } } .bnuProductPriceCard .bnuProductPriceBox__promoText--mobile { display: none; } @media (max-width: 768px) { .bnuProductPriceCard .bnuProductPriceBox__promoText--mobile { display: block; } .bnuProductPriceCard .bnuProductPriceBox__promoText--mobile.bnuProductPriceBox__promoText--truncated { display: -webkit-box; } } .bnuProductPriceCard .bnMultiQnt { position: relative; margin-inline: -2px; } .bnuProductPriceCard .bnMultiQnt__carousel { margin-block: -2px; padding-block: 2px; } .bnuProductPriceCard .bnMultiQnt__arrow { position: absolute; top: 50%; width: 20px; height: 20px; margin-block-start: -10px; border: 0; outline: none; background: none; color: var(--color-text); font-size: 14px; line-height: 20px; text-align: center; } .bnuProductPriceCard .bnMultiQnt__arrow.disabled { color: var(--color-border); pointer-events: none; } .bnuProductPriceCard .bnMultiQnt__arrow--prev { left: -18px; } .bnuProductPriceCard .bnMultiQnt__arrow--next { right: -18px; } .bnuProductPriceCard .bnMultiQnt__option { padding-inline: 2px; } .bnuProductPriceCard .bnMultiQnt__option:hover .bnMultiQnt__content, .bnuProductPriceCard .bnMultiQnt__option.active .bnMultiQnt__content { border-color: var(--color-text); } .bnuProductPriceCard .bnMultiQnt__option.active .bnMultiQnt__content { box-shadow: 0 0 0 2px var(--color-border); } .bnuProductPriceCard .bnMultiQnt__content { position: relative; transition: background 0.1s ease-in-out, border 0.1s ease-in-out, box-shadow 0.1s ease-in-out; cursor: pointer; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); padding: 6px; } .bnuProductPriceCard .bnMultiQnt__content .discount { display: inline-block; position: absolute; top: 6px; right: 6px; border-radius: var(--border-radius-small); background-color: var(--color-promo); padding-inline: 4px; color: #fff; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; } .bnuProductPriceCard .bnMultiQnt__content .count { margin-block-end: 2px; color: var(--color-text); font-size: 13px; font-weight: 400; line-height: 18px; white-space: nowrap; } .bnuProductPriceCard .bnMultiQnt__content .price { color: var(--color-text); font-size: 15px; font-weight: 500; line-height: 18px; white-space: nowrap; } .bnuProductPriceCard .bnMultiQnt__content .price .units { color: var(--color-text-light); font-size: 14px; font-weight: 400; } .bnuProductFeedback { scroll-margin-top: calc(var(--promo-height) + var(--header-height) + var(--layout-spacing) * 2); } .bnuProductFeedback__title { margin: 0 0 calc(var(--layout-spacing) * 2); color: var(--color-text); font-size: clamp(1.25rem, 1.09rem + 0.54vw, 1.5rem); font-weight: 700; line-height: 1.1666666667; } .bnuProductFeedback__layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); column-gap: calc(var(--layout-spacing) * 3); align-items: start; } @media (max-width: 1024px) { .bnuProductFeedback__layout { grid-template-columns: 1fr; row-gap: calc(var(--layout-spacing) * 2); } } .bnuProductFeedback__aside { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 1.5); } .bnuProductFeedback__summary { display: flex; flex-direction: column; } .bnuProductFeedback__ratingRow { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--layout-spacing); row-gap: calc(var(--layout-spacing) * 0.5); align-items: center; } .bnuProductFeedback__ratingLead { display: contents; } .bnuProductFeedback__ratingLead .bnuStars { grid-column: 1; grid-row: 1; } .bnuProductFeedback__ratingLead .bnuStars i { font-size: 24px; } @media (max-width: 768px) { .bnuProductFeedback__ratingLead .bnuStars i { font-size: 16px; } } .bnuProductFeedback__score { grid-column: 2; grid-row: 1; margin: 0; color: var(--color-text); font-size: 20px; font-weight: 700; line-height: 1.2; } .bnuProductFeedback__score span { font-weight: 700; } .bnuProductFeedback__count { grid-column: 1/-1; grid-row: 2; margin: 0; color: var(--color-text-light); font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); line-height: 1.3333333333; } .bnuProductFeedback__histogram { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.5); } .bnuProductFeedback__histogram.active .bnuProductFeedback__histogramItem:not(.active) { opacity: 0.5; } .bnuProductFeedback__histogramItem { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: calc(var(--layout-spacing) * 0.5); align-items: center; border: 0; background: transparent; padding: 0; color: var(--color-text); text-align: left; cursor: pointer; } .bnuProductFeedback__histogramItem.active { color: var(--color-text); } .bnuProductFeedback__histogramLabel { display: flex; align-items: center; gap: 4px; width: 100%; } .bnuProductFeedback__histogramValue { font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } .bnuProductFeedback__histogramLabel i { color: var(--color-text-light); font-size: 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .bnuProductFeedback__histogramPercent { font-size: 14px; font-weight: 500; line-height: 1.4285714286; text-align: right; } .bnuProductFeedback__histogramBar { display: block; border-radius: 999px; background-color: color-mix(in oklch, var(--color-text), white 92%); height: 8px; overflow: hidden; } .bnuProductFeedback__histogramBar span { display: block; border-radius: inherit; background-color: var(--color-promo-orange); height: 100%; } .bnuProductFeedback__note, .bnuProductFeedback__intro { margin: 0; color: var(--color-text-light); font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); line-height: 1.3333333333; } .bnuProductFeedback__ask { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 1.17); } .bnuProductFeedback__main { min-width: 0; } .bnuFeedbackList > ul.bind-list { display: flex; flex-direction: column; gap: var(--layout-spacing); margin: 0; padding: 0; list-style: none; } .bnuFeedbackList > ul.bind-list.desc { flex-direction: column-reverse; } .bnuFeedbackList > ul.bind-list > li { display: block; width: 100%; } .bnuFeedbackList.bnuFeedbackList--shortList > ul.bind-list > li.bind-item { display: none; } .bnuFeedbackList.bnuFeedbackList--shortList > ul.bind-list > li.bind-item:nth-child(-n+2) { display: block; } .bnuFeedbackList.bnuFeedbackList--shortList > ul.bind-list.desc > li.bind-item { display: none; } .bnuFeedbackList.bnuFeedbackList--shortList > ul.bind-list.desc > li.bind-item:nth-last-child(-n+2) { display: block; } .bnuFeedbackList__toolbar { display: flex; gap: calc(var(--layout-spacing) * 0.67); justify-content: space-between; align-items: flex-start; margin-block-end: var(--layout-spacing); } .bnuFeedbackList__count { align-self: flex-end; color: var(--color-text-light); font-size: clamp(0.69rem, 0.65rem + 0.13vw, 0.75rem); line-height: 1.3333333333; } .bnuFeedbackList__sort { flex-shrink: 0; min-width: 140px; } .bnuFeedbackList__sort select.bnuInput { width: 100%; min-width: 140px; } .bnuFeedbackList__empty { margin-block: 0; padding: calc(var(--layout-spacing) * 3); color: var(--color-text-light); font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); line-height: 1.4; } .bnuFeedbackList__empty > p { margin: 0; } .bnuFeedbackList__more { margin-block-start: calc(var(--layout-spacing) * 2); } .bnuProductInner__feedback { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 6); grid-column: 1/-1; margin-block-start: calc(var(--layout-spacing) * 4); } .bnuProductFiltersSidebar { padding-right: var(--layout-column-gap); } @media (max-width: 1400px) { .bnuProductFiltersSidebar { padding-right: 0; } } @media (max-width: 768px) { .bnuProductFiltersSidebar { display: block; padding-top: 48px; padding-bottom: 0; position: fixed; width: 100%; height: 100%; height: 100vh; top: 0; left: 0; background-color: #fff; z-index: 2001; transform: translate3d(-100%, 0, 0); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1) !important; } } @media (max-width: 768px) { .bnuProductFiltersSidebar.opened { pointer-events: auto; transform: translate3d(0, 0, 0); } } .bnuProductFiltersSidebar[aria-busy=true] { opacity: 1; } .bnuProductFiltersSidebar[aria-busy=true] > .bnuProductFilters__panel { opacity: 0.5; pointer-events: none; } .bnuProductFiltersSidebar__header { display: none; } @media (max-width: 768px) { .bnuProductFiltersSidebar__header { display: flex; } } .bnuProductFiltersSidebar__header { align-items: center; justify-content: space-between; gap: var(--layout-spacing); position: absolute; width: 100%; top: 0; left: 0; padding: 12px 60px 12px 20px; font-size: 18px; line-height: 24px; border-bottom: 1px solid var(--color-border); background-color: #fff; color: var(--color-text); } .bnuProductFiltersSidebar__title { color: var(--color-text); font-weight: 600; } .bnuProductFiltersSidebar__close.bnuButton, .bnuProductListing__sortDrawerClose.bnuButton { position: absolute; top: 0; right: 0; width: 48px; height: 48px; --button-height: 48px; padding: 0; } .bnuProductFiltersSidebar__close.bnuButton > i, .bnuProductListing__sortDrawerClose.bnuButton > i { margin: 0; font-size: 20px; } .bnuProductFiltersSidebar__clear { float: right; font-size: 16px; color: var(--color-accent); margin-right: 20px; cursor: pointer; } @media (max-width: 768px) { .bnuProductFilters__panel { padding: 12px 20px 100px; max-height: calc(100vh - 48px); overflow: auto; } } .bnuProductFilters__form { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 1.5); } .bnuProductFilters__groups, .bnuProductFilters__holder { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 1.5); } .bnuProductFilters__group { margin: 0; padding: 0; border: none; } .bnuProductFilters__group:before, .bnuProductFilters__group:after { display: none; } .bnuProductFilters__group .bnuAccordion { row-gap: 0; } @media (max-width: 768px) { .bnuProductFilters__group--categories { display: none; } } .bnuProductFilters__group--categories button { color: var(--color-text); } .bnuProductFiltersSidebar, .bnuProductFilters__form, .bnuProductFilters__wrap, .bnuProductFilters__panel { color: var(--color-text); } .bnuProductFilters__panel .bnuInput { --color: var(--color-text); color: var(--color-text); } .bnuProductFilters__panel .bnuInputWrap__prepend { color: var(--color-text); } .bnuProductFilters__panel label, .bnuProductFilters__panel .bnuChoiceWrap__label, .bnuProductFilters__panel .bnuChoiceWrap__labelText, .bnuProductFilters__panel .bnuAccordion__summary, .bnuProductFilters__panel .bnuAccordion__title, .bnuProductFilters__panel .bnuButtonAsTextLink, .bnuProductFilters__panel .bnuProductFilters__categoryList a, .bnuProductFilters__panel .bnuProductFilters__categoryList button { color: var(--color-text); } .bnuProductFilters__panel .label, .bnuProductFilters__panel .bnuChoiceWrap__label { word-break: break-word; } .bnuProductFilters__search { width: 100%; margin-top: 12px; margin-bottom: var(--layout-spacing); } .bnuProductFilters__search .bnuInputWrap { flex: 1 1 auto; width: 100%; min-width: 0; } .bnuProductFilters__search .bnuInputWrap:has(.bnuInput[type=search])::before { z-index: 1; color: var(--color-text-light); line-height: 24px; } .bnuProductFilters__more { margin-top: 10px; } .bnuProductFilters__categoryList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.75); } .bnuProductFilters__categoryList a, .bnuProductFilters__categoryList button { text-align: left; } .bnuProductFilters__categoryList .hiddenOption { display: none; } .bnuProductFilters__choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bnuProductFilters__choices > li { font-size: 15px; line-height: 20px; margin: 0 0 8px; } @media (max-width: 768px) { .bnuProductFilters__choices > li { margin: 0 0 10px; } } .bnuProductFilters__choices > li:last-child { margin-bottom: 0; } .bnuProductFilters__choices > li.hiddenOption { display: none; } .bnuProductFilters__choices > li.hideVisible .bnuChoiceWrap__labelText { opacity: 0.5; } .bnuProductFilters__choice { width: 100%; } .bnuProductFilters__tags { display: none; } @media (max-width: 768px) { .bnuProductFilters__tags:not(:empty) { display: block; margin-top: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); padding-bottom: var(--layout-spacing); } } .bnuProductFilters__group--price .bnuProductFilters__content, .bnuProductFilters__group--price .bnuProductFilters__sliderWrap { display: block; width: 100%; } .bnuProductFilters__group--price .bnuProductFilters__priceInputs { margin-bottom: 20px; } .bnuProductFilters__group--price .bnuProductFilters__priceValues { display: flex; align-items: center; justify-content: space-between; column-gap: var(--layout-spacing); } .bnuProductFilters__group--price .bnuProductFilters__priceInput { flex: 1 1 0; min-width: 0; max-width: 140px; } .bnuProductFilters__group--price .bnuProductFilters__priceInput .bnuInput { --color: var(--color-text); --height: 42px; --prepend: 0px; color: var(--color-text); text-align: center; padding-inline-end: 28px; } .bnuProductFilters__group--price .bnuProductFilters__priceInput .bnuInputWrap__prepend { top: 0; right: 12px; bottom: 0; left: auto; display: flex; align-items: center; z-index: 1; color: var(--color-text); font-size: 15px; line-height: 1.2; pointer-events: none; } .bnuProductFilters__group--price .bnuProductFilters__priceSeparator { flex: 0 0 auto; color: var(--color-text); font-size: 15px; line-height: 1.2; text-align: center; } @media (max-width: 768px) { .bnuProductFilters__group--price .bnuProductFilters__priceSeparator { padding-inline: calc(var(--layout-spacing) * 0.5); } } .bnuProductFilters__group--price .bnuProductFilters__range, .bnuProductFilters__group--price .filterRange { position: relative; width: 100%; height: 4px; border: none; border-radius: 999px; background: var(--color-border); margin: 15px auto; } .bnuProductFilters__group--price .bnuProductFilters__range.ui-slider, .bnuProductFilters__group--price .filterRange.ui-slider { display: block; text-align: left; } .bnuProductFilters__group--price .bnuProductFilters__range .ui-slider-range, .bnuProductFilters__group--price .filterRange .ui-slider-range { position: absolute; z-index: 1; display: block; height: 100%; border: 0; border-radius: 999px; background: var(--color-text); } .bnuProductFilters__group--price .bnuProductFilters__range.ui-slider-horizontal .ui-slider-range, .bnuProductFilters__group--price .filterRange.ui-slider-horizontal .ui-slider-range { top: 0; left: 0; } .bnuProductFilters__group--price .bnuProductFilters__range .ui-slider-handle, .bnuProductFilters__group--price .filterRange .ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; top: -6px; margin-left: -2px; cursor: pointer; background: #ffffff; border: 2px solid var(--color-text); border-radius: 50%; outline: none; } .bnuProductFilters__group--price .bnuProductFilters__range .ui-slider-handle:last-child, .bnuProductFilters__group--price .filterRange .ui-slider-handle:last-child { margin-left: -14px; margin-right: 0; } .bnuProductFilters__stars { display: flex; flex-direction: column; row-gap: 8px; } .bnuProductFilters__ratingOption { display: flex; align-items: center; column-gap: 6px; cursor: pointer; margin: 0; border-radius: var(--border-radius-small); padding: 4px 8px; margin-inline: -8px; transition: background-color 0.2s ease; } .bnuProductFilters__ratingOption.active { background-color: var(--color-accent-bg); } .bnuProductFilters__ratingSuffix { line-height: 1; color: var(--color-text); font-size: 15px; } .bnuProductFilters__ratingOption.active .bnuProductFilters__ratingSuffix { font-weight: 600; } .bnuProductFilters__mobileResults { display: none; } @media (max-width: 768px) { .bnuProductFilters__mobileResults { display: block; } } .bnuProductFilters__mobileResults { position: fixed; bottom: 0; left: 0; width: 100%; padding: 12px 12px 24px; border-top: 1px solid var(--color-border); background-color: #fff; z-index: 11; } .bnuProductFilters__showResults { width: 100%; } .bnuProductFilters__activeFilter { margin-bottom: 16px; } .bnuProductFilters__activeFilterLabel { font-size: 13px; line-height: 20px; color: var(--color-text); text-transform: uppercase; font-weight: 500; margin-bottom: 8px; } .bnuProductFilters__activeFilterList ul { list-style: none; margin: 0; padding: 0; font-size: 0; line-height: 0; } .bnuProductFilters__activeFilterList ul li { display: inline-block; margin: 0 8px 8px 0; cursor: default; } .bnuProductFilters__activeFilterList ul li span { display: block; position: relative; font-size: 14px; line-height: 24px; white-space: nowrap; padding: 0 32px 0 12px; background-color: var(--color-bg); border-radius: 12px; color: var(--color-text); } .bnuProductFilters__activeFilterList ul li span i { display: block; position: absolute; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background-color: var(--color-border); top: 0; right: 0; text-align: center; cursor: pointer; } .bnuProductFilters__activeFilterList ul li span i:hover { background-color: var(--color-border); } .bnuProductListing { display: flex; flex-wrap: wrap; column-gap: var(--layout-column-gap); margin-bottom: calc(var(--layout-spacing) * 4); } @media (max-width: 768px) { .bnuProductListing { row-gap: var(--layout-column-gap); } } .bnuProductListing__sidebarCol { flex: 0 0 calc(var(--layout-spacing) * 19); max-width: calc(var(--layout-spacing) * 19); width: calc(var(--layout-spacing) * 19); } @media (max-width: 768px) { .bnuProductListing__sidebarCol { flex: 0 0 100%; max-width: 100%; width: 100%; } } .bnuProductListing__contentCol { flex: 1 1 0; min-width: 0; } @media (max-width: 768px) { .bnuProductListing__contentCol { flex: 0 0 100%; max-width: 100%; width: 100%; } } .bnuProductListing__products .bnuProducts.productsList { margin-bottom: calc(var(--layout-spacing) * 3); } .bnuProductListing__products .bnuProducts.productsList .bnuProduct { min-width: 0; } .bnuProductListing__products .bnuProducts.productsList > .bnuProduct.bnuProduct--banner, .bnuProductListing__products .bnuProducts.productsList > .bnuProductListing__inlineBanner, .bnuProductListing__products .bnuProducts.productsList > .productItem.productItem--hasBanner { grid-column: span 1; min-width: 0; min-height: 0; padding-bottom: 0; } .bnuProductListing__products .bnuProducts.productsList > .bnuProductListing__inlineBanner--list { grid-column: 1/-1; grid-row: auto; } .bnuProduct.bnuProduct--banner { overflow: hidden; } .bnuProduct.bnuProduct--banner .bnuProduct__main { grid-row: 1/-1; padding: 0; overflow: hidden; background: none; border: none; box-shadow: none; min-height: 0; } .bnuProduct.bnuProduct--banner:hover .bnuProduct__main { box-shadow: none; } .bnuProduct.bnuProduct--banner .bannerLink { display: block; height: 100%; min-height: 0; text-decoration: none; line-height: 0; } .bnuProduct.bnuProduct--banner picture { display: block; background: none; width: 100%; height: 100%; } .bnuProduct.bnuProduct--banner img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; border: none; border-radius: var(--border-radius); } .bnuProducts:not(.bnuProducts--list-mobile) .bnuProduct.bnuProduct--banner picture, .bnuProducts:not(.bnuProducts--list-mobile) .bnuProduct.bnuProduct--banner img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } @media (min-width: 769px) { .bnuProducts.bnuProducts--list-mobile .bnuProduct.bnuProduct--banner picture, .bnuProducts.bnuProducts--list-mobile .bnuProduct.bnuProduct--banner img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } html.benu-eshop-lv .bnuProductListing__products .bnuProducts.productsList .productItem.productItem--hasBanner .banner.pageBanner__grid, html.benu-eshop-lv .bnuProductListing__products .bnuProducts.productsList .productItem.productItem--hasBanner .bannerLink.pageBanner__grid { display: block; } @media (max-width: 768px) { .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProduct.bnuProduct--banner, .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProductListing__inlineBanner, .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .productItem.productItem--hasBanner { width: 100%; grid-row: auto; height: auto; } .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProduct.bnuProduct--banner picture, .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProduct.bnuProduct--banner img { position: static; height: auto; } .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProduct.bnuProduct--banner.no-mobile { display: none; } html.benu-eshop-lv .bnuProductListing__products .bnuProducts.bnuProducts--list-mobile > .bnuProduct.bnuProduct--banner.no-mobile { display: block; } } .bnuProductListing__subcategories { display: none; } @media (max-width: 768px) { .bnuProductListing__subcategories { display: block; margin-left: calc(var(--layout-spacing) * -2); margin-right: calc(var(--layout-spacing) * -2); } } .bnuProductListing__subcategories ul { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; padding: calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * 2) calc(var(--layout-spacing) * 1.5); list-style: none; margin: 0; margin-top: calc(var(--layout-spacing) * -2); margin-bottom: var(--layout-spacing); font-size: 0; line-height: 0; overflow: auto; } .bnuProductListing__subcategories ul::-webkit-scrollbar { scrollbar-width: thin; width: 4px; height: 4px; } .bnuProductListing__subcategories ul::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 2px; } .bnuProductListing__subcategories ul li { display: inline-block; margin-right: var(--layout-spacing); } .bnuProductListing__subcategories ul li:last-child { margin-right: 0; } .bnuProductListing__subcategories ul li a { display: block; font-size: 14px; line-height: 16px; padding: var(--layout-spacing) calc(var(--layout-spacing) * 1.5); color: var(--color-text); border-radius: var(--border-radius-small); background-color: var(--color-bg); white-space: nowrap; } .bnuProductListing__subcategories ul li a.active { background-color: var(--color-accent); color: #fff; } .bnuProductListing__sortDrawer { display: none; } @media (max-width: 768px) { .bnuProductListing__sortDrawer { display: block; padding-top: 48px; padding-bottom: 0; position: fixed; width: 100%; height: 100%; height: 100vh; top: 0; left: 0; background-color: #fff; z-index: 2001; transform: translate3d(-100%, 0, 0); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1) !important; } } @media (max-width: 768px) { .bnuProductListing__sortDrawer.visible, .bnuProductListing__sortDrawer.opened { pointer-events: auto; transform: translate3d(0, 0, 0); } } .bnuProductListing__sortDrawerHeader { display: none; } @media (max-width: 768px) { .bnuProductListing__sortDrawerHeader { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-spacing); } } .bnuProductListing__sortDrawerHeader { position: absolute; width: 100%; top: 0; left: 0; padding: 12px 60px 12px 20px; font-size: 18px; line-height: 24px; border-bottom: 1px solid var(--color-border); background-color: #fff; color: var(--color-text); } .bnuProductListing__sortDrawerTitle { color: var(--color-text); font-weight: 600; } .bnuProductListing__sortDrawerBody { padding: 12px 20px 40px; max-height: calc(100vh - 48px); overflow: auto; } .bnuProductFilters__sortChoices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bnuProductFilters__sortOption { display: block; line-height: 24px; font-size: 15px; padding: 8px 0; color: var(--color-text); cursor: pointer; } .bnuProductFilters__sortOption.active { font-weight: 500; color: var(--color-accent); } .bnuProductListing__sorting, .bnuProductListing__grouping { display: flex; align-items: center; column-gap: var(--layout-spacing); } .bnuProductListing__viewOptionLabel { color: var(--color-text-light); font-size: 14px; line-height: 1.4; white-space: nowrap; } @media (max-width: 768px) { .bnuProductListing__viewOptionLabel { display: none; } } .bnuProductListing__viewOptionSelect { width: 160px; max-width: 160px; flex-shrink: 0; } @media (max-width: 768px) { .bnuProductListing__viewOptionSelect { width: auto; max-width: 100%; } } .bnuProductListing__viewOptionSelect .bnuInput { --color: var(--color-text); --padding-inline: 8px; color: var(--color-text); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnuProductListing__viewOptionField { min-width: 0; max-width: 100%; width: 100%; } .bnuProductListing__mobileBar { display: none; margin-bottom: 16px; position: sticky; top: calc(var(--promo-height, 0px) + var(--header-main-height, 48px)); z-index: 1; } @media (max-width: 768px) { .bnuProductListing__mobileBar { display: block; } } .bnuProductListing__mobileBarInner { display: flex; flex-wrap: nowrap; width: calc(100% + var(--layout-padding) * 2); max-width: none; margin-inline: calc(var(--layout-padding) * -1); background: #fff; box-shadow: var(--box-shadow); } .bnuProductListing__mobileBarInner .bnuProductListing__mobileBarButton { border-top: none; } .bnuProductListing__mobileBarSide { width: 50%; } .bnuProductListing__mobileBarSide--start .bnuProductListing__mobileBarButton { border-right: 1px solid var(--color-border); } .bnuProductListing__mobileBarButton { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; width: 100%; height: 48px; border: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: #fff; padding: 0 20px; font: inherit; font-size: 1em; line-height: 24px; position: relative; cursor: pointer; text-align: left; color: var(--color-text); } .bnuProductListing__mobileBarButton .bnuProductListing__mobileBarButtonLabel { display: block; font-size: 11px; line-height: 16px; color: var(--color-text-light); } .bnuProductListing__mobileBarButton .bnuProductListing__mobileBarButtonValue { font-size: 1em; line-height: 1.2; margin: 0; color: var(--color-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .bnuProductListing__mobileBarButton .bnuProductListing__mobileBarButtonCount { position: absolute; top: 11px; right: 20px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-border); color: var(--color-text-light); text-align: center; line-height: 24px; font-size: 13px; font-weight: 500; } .bnuProductListing__mobileBarButton .bnuProductListing__mobileBarButtonCount:empty { display: none; } .bnuProductListing__toolbar { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 20px; } .bnuProductListing__toolbarStart, .bnuProductListing__toolbarEnd { flex: 0 0 auto; width: auto; max-width: 100%; min-width: 0; } .bnuProductListing__resultsCount { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35em; padding: 0; margin: 0; font-size: 14px; line-height: 1.4; } .bnuProductListing__resultsCountLabel { color: var(--color-text-light); font-weight: 400; } .bnuProductListing__resultsCountRange, .bnuProductListing__resultsCountTotal { color: var(--color-text); font-weight: 600; } .bnuProductListing__resultsCount--bottom { display: inline-block; margin: 16px 0 0; } .bnuProductListing__resultsCount--bottom.notPulled { margin-left: 0; } .bnuProductListing .bnuProductListing__pagination { color: var(--color-text-light); } .bnuProductListing .bnuProductListing__pagination .bnuProductListing__resultsCount--bottom { margin: 16px 0 0 24px; } .bnuProductListing .bnuProductListing__pagination .bnuProductListing__resultsCount--bottom.notPulled { margin-left: 0; } @media (max-width: 768px) { .bnuProductListing .bnuProductListing__pagination .bnuProductListing__resultsCount--bottom { display: block; margin-left: 0; } } .bnuProductListing .bnuProductListing__pagination--hasPages .bnuProductListing__resultsCount--bottom { margin: 0; text-align: center; } .bnuProductListing__pageHeader { margin-bottom: calc(var(--layout-spacing) * 2); } .bnuProductListing__pageTitle { margin: 0; color: var(--color-text); } .bnuProductListing__banner { margin-bottom: calc(var(--layout-spacing) * 2); } .bnuProductListing__banner--bottom { margin-block-start: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuProductListing__banner--bottom { margin-block-start: var(--layout-spacing); } } .bnuProductListing__banner.pageBannerWrap .pageBanner--productsTop img, .bnuProductListing__banner.pageBannerWrap .pageBanner--productsBottom img { width: 100%; } .bnuProductListing__banner.pageBannerWrap .bnuProductListing__categoryBanner .swiper-slide .bannerLink { display: block; } .bnuProductListing__banner.pageBannerWrap .bnuProductListing__categoryBanner .swiper-slide .bannerLink img { width: 100%; } .bnuProductListing__description { margin-bottom: calc(var(--layout-spacing) * 2); color: var(--color-text); } .bnuProductListing__description--collapsed { max-height: 200px; overflow: hidden; } .bnuProductListing__description--expanded { max-height: none; overflow: visible; } .bnuProductListing__readMore { margin-top: var(--layout-spacing); } .bnuProductListing__productsGrid { width: 100%; } .bnuProductListing__pagination { width: 100%; } .bnuProductListing__pagination--hasPages { display: flex; flex-direction: column; align-items: center; gap: var(--layout-spacing); } .bnuProductListing__toolbarEnd { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; column-gap: 12px; } .bnuProductListing__toolbarEnd .bnuProductListing__sorting, .bnuProductListing__toolbarEnd .bnuProductListing__grouping { display: flex; align-items: center; flex-shrink: 0; min-width: 0; margin: 0; } @media (max-width: 768px) { .bnuProductListing__toolbarEnd .bnuProductListing__sorting { display: none; } } .bnuProductListing__toolbarEnd .pr_viewOptionWrap { min-width: 0; } .section--topInnerContent .bnuProduct__buttons .bnuButton--favorites { display: none; } .bnuProductListing__typeTabs { display: flex; flex-wrap: wrap; overflow-x: auto; padding-bottom: 20px; margin-bottom: calc(var(--layout-spacing) * 2); gap: var(--layout-spacing); } .bnuProductListing__typeTabs .bnuButton { flex-shrink: 0; } .bnuProductListing__typeTabs::-webkit-scrollbar { scrollbar-width: thin; width: 4px; height: 4px; } .bnuProductListing__typeTabs::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 2px; } @media (max-width: 768px) { .bnuProductListing__typeTabs { flex-wrap: nowrap; padding-bottom: 12px; margin-bottom: var(--layout-spacing); } } .bnuProductOutOfStock__products { display: flex; flex-direction: column; row-gap: var(--layout-gap); } .bnuProductsDialog { display: flex; flex-direction: column; row-gap: var(--layout-gap); } .bnuProductsDialog__item .bnuProduct__buttons { display: flex; column-gap: var(--layout-spacing); align-items: center; } #chooseUserCartDialog > footer { flex-direction: column; align-items: stretch; row-gap: var(--layout-spacing); } #chooseUserCartDialog > footer .bnuButton { width: 100%; } #selectPharmacyDialog > section { display: flex; flex-direction: column; min-height: 0; } .bnuCartLocationSelect { display: flex; flex-direction: column; gap: var(--layout-spacing); min-height: 0; } .bnuCartLocationSelect .disabledSearch { display: none !important; } .bnuCartLocationSelect .bnuCartLocationSelect__providers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--layout-spacing); margin: 0; padding: 0 0 var(--layout-spacing); } .bnuCartLocationSelect .bnuCartLocationSelect__disclaimer { flex: 1 1 12rem; min-width: 0; } @media (max-width: 768px) { .bnuCartLocationSelect .bnuCartLocationSelect__disclaimer { flex-basis: 100%; } } .bnuCartLocationSelect .bnuCartLocationSelect__twoSelects { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); margin: 0; } .bnuCartLocationSelect .bnuCartLocationSelect__twoSelects > .bnuCartLocationSelect__locationSelect { flex: 1 1 12rem; min-width: 0; } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem { display: flex; position: relative; flex: 0 1 calc(25% - var(--layout-spacing) * 0.75); justify-content: space-between; align-items: center; gap: calc(var(--layout-spacing) * 0.5); width: auto; max-width: calc(25% - var(--layout-spacing) * 0.75); min-width: 9rem; height: 48px; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: 0 calc(var(--layout-spacing) * 0.75); cursor: pointer; transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem:hover, .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem.active { border-color: var(--color-info); background-color: #fff; } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem.active { box-shadow: 0 0 0 3px var(--color-border); } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem.active img { filter: none; opacity: 1; } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem img { display: block; width: auto; max-height: 28px; margin-right: 4px; filter: grayscale(1); opacity: 0.8; } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem span { font-weight: 500; font-size: 16px; color: var(--color-text); white-space: nowrap; } @media (max-width: 768px) { .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem { flex: 0 1 calc(50% - var(--layout-spacing) * 0.5); max-width: calc(50% - var(--layout-spacing) * 0.5); min-width: 0; } } .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem .bnuCartLocationSelect__pickupInfo { display: inline-block; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-radius: 12px; background-color: var(--color-border); padding: 2px 8px; font-weight: 400; font-size: 13px; line-height: 16px; color: var(--color-text); white-space: nowrap; } @media (max-width: 768px) { .bnuCartLocationSelect .bnuCartLocationSelect__pickupItem .bnuCartLocationSelect__pickupInfo { top: -6px; padding: 2px 6px; font-size: 11px; line-height: 12px; } } .bnuCartLocationSelect .bnuCartLocationSelect__radioMarker { display: block; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; border: 1px solid var(--color-border); border-radius: 50%; background-color: #fff; } .bnuCartLocationSelect .bnuCartLocationSelect__groupTitle { position: relative; width: auto; min-width: 10rem; padding: 0 var(--layout-gap) 0 calc(var(--layout-gap) + 1rem); font-size: 15px; line-height: 20px; } .bnuCartLocationSelect .bnuCartLocationSelect__groupTitle b { font-weight: 700; } .bnuCartLocationSelect .customOption { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--layout-spacing) * 0.5); margin-top: 0; background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 0.85) var(--layout-gap); cursor: pointer; } @media (min-width: 769px) { .bnuCartLocationSelect .customOption { flex-direction: row; align-items: center; } } .bnuCartLocationSelect .customOption + .customOption { border-top: 1px solid var(--color-border); } .bnuCartLocationSelect .customOption:hover { background-color: color-mix(in oklch, var(--color-bg), var(--color-text) 4%); } .bnuCartLocationSelect .customOption.active { background-color: color-mix(in oklch, var(--color-bg), var(--color-text) 8%); } .bnuCartLocationSelect .customOption.active .bnuCartLocationSelect__radioMarker { border-color: var(--color-success); } .bnuCartLocationSelect .customOption.active .bnuCartLocationSelect__radioMarker::after { display: block; content: ""; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-success); } .bnuCartLocationSelect .customOption .customOption__leftCol { display: flex; flex-direction: row; gap: var(--layout-spacing); min-width: 0; } @media (max-width: 768px) { .bnuCartLocationSelect .customOption .customOption__leftCol { flex-direction: column; padding-left: 30px; } .bnuCartLocationSelect .customOption .customOption__leftCol .bnuCartLocationSelect__groupTitle { left: -32px; } } .bnuCartLocationSelect .customOption .customOption__rightCol { flex-shrink: 0; color: var(--color-text-light); white-space: nowrap; } @media (max-width: 768px) { .bnuCartLocationSelect .customOption .customOption__rightCol { padding-left: 30px; } } .bnuCartLocationSelect .bnuCartLocationSelect__viewToggle { margin: 0; } .bnuCartLocationSelect .bnuCartLocationSelect__viewToggleLink { color: var(--color-info); text-decoration: underline; } .bnuCartLocationSelect .bnuCartLocationSelect__viewToggleLink:hover { text-decoration: none; } .bnuCartLocationSelect .bnuCartLocationSelect__viewToggleLink--list { display: none; } .bnuCartLocationSelect:has(.bnuCartLocationSelect__locationSelect.view-map) .bnuCartLocationSelect__viewToggleLink--map { display: none; } .bnuCartLocationSelect:has(.bnuCartLocationSelect__locationSelect.view-map) .bnuCartLocationSelect__viewToggleLink--list { display: inline; } .bnuCartLocationSelect .delivery-price-map-popup { display: inline-flex; flex-grow: 1; flex-shrink: 1; justify-content: flex-end; align-items: center; color: var(--color-text); font-weight: 500; font-size: 18px; line-height: normal; text-align: right; } .bnuCartLocationSelect .map-row { display: flex; flex-wrap: nowrap; gap: var(--layout-spacing); margin: var(--layout-spacing) 0; } .bnuCartLocationSelect .map-row .col { padding: 0; } .bnuCartLocationSelect .map-row .provider-logo { position: relative; width: 68px; max-width: 68px; height: 28px; overflow: hidden; } .bnuCartLocationSelect .map-row .provider-logo img { position: absolute; top: 50%; left: 50%; max-width: 100% !important; object-fit: contain; transform: translate(-50%, -50%); } .bnuCartLocationSelect .bnuForm__row { margin-bottom: 0; } .bnuCartLocationSelect__locationSelect { width: 100%; min-width: 0; } .bnuCartLocationSelect__locationSelect.customSelect .customSelectVisible { border: 1px solid var(--color-border); border-radius: var(--border-radius); background: #fff; min-height: 48px; height: auto; padding: var(--layout-spacing) var(--layout-gap); } .bnuCartLocationSelect__locationSelect.customSelect.error .customSelectVisible { border-color: var(--color-error); } .bnuCartLocationSelect__locationSelect.customSelect.error .optionsWrap { border-color: var(--color-error); } .bnuCartLocationSelect__locationSelect.view-list.customSelect .optionsWrap { display: block; position: static; border: 0; background: transparent; height: auto; max-height: 332px; margin-top: var(--layout-spacing); overflow-y: auto; overflow-x: hidden; z-index: auto; } @media (min-width: 769px) { .bnuCartLocationSelect__locationSelect.view-list.customSelect .optionsWrap { max-height: 348px; } } .bnuCartLocationSelect__locationSelect.view-list .customSelectSearch[value=""] + .optionsWrap .customOption, .bnuCartLocationSelect__locationSelect.view-list .bnuForm__row:has(.customSelectSearch[value=""]) + .optionsWrap .customOption { display: flex; } .bnuCartLocationSelect__locationSelect.view-map .optionsWrap { max-height: 332px; visibility: hidden; } @media (min-width: 769px) { .bnuCartLocationSelect__locationSelect.view-map .optionsWrap { max-height: 348px; } } .bnuCartLocationSelect__locationSelect.view-map .optionsWrap:hover, .bnuCartLocationSelect__locationSelect.view-map .optionsWrap:focus { visibility: visible !important; } .bnuCartLocationSelect__locationSelect.view-map:has(.customSelectSearch:hover:not([value=""])) .optionsWrap, .bnuCartLocationSelect__locationSelect.view-map:has(.customSelectSearch:focus:not([value=""])) .optionsWrap { visibility: visible !important; } .bnuCartLocationSelect__map { width: 100%; height: 332px; max-height: 332px; margin-top: var(--layout-spacing); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; } @media (min-width: 769px) { .bnuCartLocationSelect__map { height: 348px; max-height: 348px; } } .bnuCartLocationSelect__map .gm-style div[role=dialog] { max-width: 300px !important; } .bnuCartLocationSelect:has(.bnuCartLocationSelect__viewToggle):not(:has(.view-map)) .bnuCartLocationSelect__map { visibility: hidden; height: 0; max-height: 0; margin: 0; border: 0; } #selectPharmacyDialog:has(.bnuCartLocationSelect) > footer .bnuButton, #selectPharmacyDialog:has(.bnuCartLocationSelect) > footer form { flex: 1 1 auto; } #selectPharmacyDialog:has(.bnuCartLocationSelect) > footer form { display: flex; margin: 0; } @media (max-width: 768px) { #selectPharmacyDialog:has(.bnuCartLocationSelect) > footer { flex-direction: column-reverse; align-items: stretch; row-gap: var(--layout-spacing); } } .bnuDialog#addedToCartDialog { height: min(720px, 100svh - var(--layout-padding)); max-height: min(720px, 100svh - var(--layout-padding)); } @media (max-width: 768px) { .bnuDialog#addedToCartDialog { height: auto; max-height: calc(80svh - var(--layout-padding)); } } .bnuDialog#addedToCartDialog > section { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; } .bnuAddedToCartDialog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; position: relative; flex: 1 1 auto; min-height: 0; background-color: var(--color-bg); } @media (max-width: 768px) { .bnuAddedToCartDialog { grid-template-columns: minmax(0, 1fr); } } .bnuAddedToCartDialog__scroll { grid-column: 1/-1; grid-row: 1/-1; min-height: 0; overflow: hidden; } @media (max-width: 768px) { .bnuAddedToCartDialog__scroll { grid-row: 1; overflow: auto; } } .bnuAddedToCartDialog__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); position: relative; height: 100%; min-height: 0; } @media (max-width: 768px) { .bnuAddedToCartDialog__layout { grid-template-columns: minmax(0, 1fr); height: auto; } } .bnuAddedToCartDialog__float { display: none; grid-column: 1/-1; grid-row: 1; z-index: 4; align-self: end; justify-content: center; align-items: flex-end; pointer-events: none; background: linear-gradient( 180deg, color-mix(in oklch, var(--color-bg), transparent 100%) 0%, var(--color-bg) 100%); padding-block: var(--layout-spacing); min-height: calc(var(--layout-spacing) * 4); } @media (max-width: 768px) { .bnuAddedToCartDialog__float.bnuAddedToCartDialog__float--active { display: flex; } } .bnuButton.bnuAddedToCartDialog__floatBtn { --height: 36px; --color: var(--color-text); pointer-events: auto; border-radius: 24px; padding-inline: 24px; font-weight: 500; font-size: 12px; } .bnuAddedToCartDialog__cart { display: flex; position: relative; flex-direction: column; background-color: white; min-height: 0; } .bnuAddedToCartDialog__cartItems { flex: 1 1 auto; padding: var(--layout-gap); min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--color-text-light) var(--color-bg); } .bnuAddedToCartDialog__cartItems::-webkit-scrollbar { width: 6px; } .bnuAddedToCartDialog__cartItems::-webkit-scrollbar-track { background: var(--color-bg); } .bnuAddedToCartDialog__cartItems::-webkit-scrollbar-thumb { background-color: var(--color-text-light); border-radius: var(--border-radius); } .bnuAddedToCartDialog__actions { display: flex; grid-column: 1; grid-row: 2; position: relative; z-index: 3; justify-content: center; align-items: center; gap: var(--layout-spacing); border-top: 1px solid var(--color-border); background-color: white; padding: var(--layout-spacing); width: auto; min-width: 0; } .bnuAddedToCartDialog__actions > .bnuButton, .bnuAddedToCartDialog__actions > form { flex: 1 1 0; margin: 0; min-width: 0; } .bnuAddedToCartDialog__actions .bnuButton { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .bnuAddedToCartDialog__side { display: flex; flex-direction: column; border-left: 1px solid var(--color-border); background-color: var(--color-bg); min-height: 0; } .bnuAddedToCartDialog__sideHeader { display: flex; flex-direction: column; row-gap: var(--layout-gap); border-bottom: 1px solid var(--color-border); padding: var(--layout-gap); } @media (max-width: 768px) { .bnuAddedToCartDialog__sideHeader { padding: var(--layout-spacing); border-bottom: none; } } .bnuAddedToCartDialog__sideHeader h3 { font-size: clamp(1rem, 0.92rem + 0.27vw, 1.13rem); margin: 0; color: var(--color-text); font-weight: 700; line-height: 1.2; } .bnuAddedToCartDialog__sideProducts { flex: 1 1 auto; padding: var(--layout-spacing) var(--layout-gap); min-height: 0; overflow: auto; } @media (max-width: 768px) { .bnuAddedToCartDialog__sideProducts { padding: 0 var(--layout-spacing) var(--layout-spacing); } } .bnuAddedToCartDialog__sideProducts .bnuEmptyState { margin-block: var(--layout-spacing); padding: var(--layout-spacing); font-size: 14px; } .bnuAddedToCartDialog__sideProducts .bnuEmptyState > p { margin: 0; } .bnuAddedToCartDialog__sideProductList { display: flex; flex-direction: column; row-gap: var(--layout-spacing); } .bnuAddedToCartDialog__showMore { display: flex; justify-content: center; margin-top: var(--layout-spacing); } .bnuAddedToCartDialogSideProduct { display: flex; align-items: center; column-gap: var(--layout-gap); row-gap: var(--layout-spacing); margin: 0; border: 0; background: transparent; padding: 0; box-shadow: none; } .bnuAddedToCartDialogSideProduct__image { display: block; position: relative; flex-shrink: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); background-color: white; width: 80px; height: 80px; overflow: hidden; } .bnuAddedToCartDialogSideProduct__image img { display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 768px) { .bnuAddedToCartDialogSideProduct__image { width: 56px; height: 56px; } } .bnuAddedToCartDialogSideProduct__content { flex: 1 1 auto; min-width: 0; } .bnuAddedToCartDialogSideProduct__title { font-size: clamp(0.75rem, 0.67rem + 0.27vw, 0.88rem); margin: 0 0 calc(var(--layout-spacing) / 3); font-weight: 600; line-height: 1.35; } .bnuAddedToCartDialogSideProduct__title a { color: var(--color-text); text-decoration: none; } .bnuAddedToCartDialogSideProduct__category { margin: 0; color: var(--color-text-light); font-size: 13px; line-height: 1.2; } @media (max-width: 768px) { .bnuAddedToCartDialogSideProduct__category { font-size: 11px; } } .bnuAddedToCartDialogSideProduct__actions { display: grid; flex-shrink: 0; grid-template-columns: minmax(0, auto) auto; align-items: center; column-gap: var(--layout-gap); row-gap: calc(var(--layout-spacing) / 2); } .bnuAddedToCartDialogSideProduct__actions > .bnuButton { grid-column: 2; grid-row: 1/-1; align-self: center; } @media (max-width: 768px) { .bnuAddedToCartDialogSideProduct__actions { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: end; row-gap: var(--layout-spacing); } .bnuAddedToCartDialogSideProduct__actions > .bnuButton { grid-column: 1; grid-row: auto; } } .bnuAddedToCartDialogSideProduct__price { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; font-weight: 700; white-space: nowrap; } .bnuAddedToCartDialogSideProduct__price del, .bnuAddedToCartDialogSideProduct__price ins { display: block; } .bnuAddedToCartDialogSideProduct__price del { color: var(--color-text-light); font-weight: 500; font-size: 13px; } .bnuAddedToCartDialogSideProduct__price ins { text-decoration: none; } .bnuAddedToCartDialogSideProduct__badges { display: flex; grid-column: 1; grid-row: 2; flex-wrap: wrap; justify-content: flex-end; justify-self: end; gap: calc(var(--layout-spacing) / 2); margin: 0; max-width: 140px; padding: 0; list-style: none; } @media (max-width: 768px) { .bnuAddedToCartDialogSideProduct__badges { max-width: 100%; } } .bnuAddedToCartDialogSideProduct__divider { margin: var(--layout-spacing) 0; border: 0; border-top: 1px solid var(--color-border); } .bnuAddedToCartDialogSideProduct__divider:last-child { display: none; } .bnuAddedToCartDialog .bnuPromoBox { margin-top: var(--layout-spacing); margin-bottom: 0; } .bnuAddedToCartDialog .bnuPromoBox__text { max-width: 60%; } @media (max-width: 768px) { .bnuAddedToCartDialog .bnuPromoBox__text { max-width: 50%; } } .bnuAddedToCartDialogCartItem { display: flex; position: relative; flex-direction: column; gap: var(--layout-spacing); margin: 0 0 var(--layout-spacing); border: 1px solid var(--color-border); border-radius: var(--border-radius-small); background-color: white; padding: var(--layout-spacing); } .bnuAddedToCartDialogCartItem:last-child { margin-bottom: 0; } .bnuAddedToCartDialogCartItem__remove { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; margin-inline-start: auto; border: 0; background: transparent; width: 24px; height: 24px; color: var(--color-text-light); text-decoration: none; cursor: pointer; } .bnuAddedToCartDialogCartItem__remove i { font-size: 16px; line-height: 1; } .bnuAddedToCartDialogCartItem__remove:hover { color: var(--color-error); } .bnuAddedToCartDialogCartItem__main { display: flex; align-items: flex-start; column-gap: var(--layout-spacing); } .bnuAddedToCartDialogCartItem__image { flex-shrink: 0; margin: 0; width: 80px; } .bnuAddedToCartDialogCartItem__image img { display: block; width: 80px; height: 80px; object-fit: contain; } .bnuAddedToCartDialogCartItem__info { flex: 1 1 auto; min-width: 0; padding-inline-end: var(--layout-spacing); } .bnuAddedToCartDialogCartItem__title { font-size: clamp(0.88rem, 0.79rem + 0.27vw, 1rem); margin: 0; font-weight: 600; overflow-wrap: anywhere; } .bnuAddedToCartDialogCartItem__title a { color: var(--color-text); text-decoration: none; } .bnuAddedToCartDialogCartItem__category { margin: calc(var(--layout-spacing) / 2) 0 0; color: var(--color-text-light); font-size: 14px; } .bnuAddedToCartDialogCartItem__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--layout-spacing); } .bnuAddedToCartDialogCartItem__price { display: flex; align-items: baseline; gap: calc(var(--layout-spacing) / 2); font-weight: 700; white-space: nowrap; } .bnuAddedToCartDialogCartItem__price del { color: var(--color-text-light); font-weight: 500; } .bnuAddedToCartDialogCartItem__price ins { text-decoration: none; } .bnuAddedToCartDialogCartItem__badges { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) / 2); margin: 0; padding: 0; list-style: none; } .bnuAddedToCartDialogCartItem__qnt { margin-left: auto; } .bnuAddedToCartDialogGiftProduct__media { position: relative; flex-shrink: 0; margin: 0; } .bnuAddedToCartDialogGiftProduct__media .gift { display: flex; position: absolute; top: calc(var(--layout-spacing) * -0.5); left: calc(var(--layout-spacing) * -0.5); z-index: 1; justify-content: center; align-items: center; border-radius: calc(var(--card-border-radius) * 0.5); background-color: var(--color-promo); width: calc(var(--layout-spacing) * 2); height: calc(var(--layout-spacing) * 2); color: white; font-size: clamp(0.75rem, 0.67rem + 0.27vw, 0.88rem); } .bnuAddedToCartDialogGiftProduct__media .gift i { color: white; } .bnuAddedToCartDialogGiftProduct__media img { display: block; border: 1px solid var(--color-border); border-radius: calc(var(--card-border-radius) * 0.5); background-color: white; width: 80px; height: 80px; object-fit: contain; } @media (max-width: 768px) { .bnuAddedToCartDialogGiftProduct__media img { width: 56px; height: 56px; } } .bnuDialog#addedToCartDialog .bnuAddedToCartDialog__cartItems { padding-bottom: calc(var(--layout-gap) * 5); } @media (max-width: 768px) { .bnuDialog#addedToCartDialog .bnuAddedToCartDialog__cartItems { padding-bottom: var(--layout-gap); } } .bnuProducts { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; column-gap: var(--layout-column-gap); row-gap: var(--layout-row-gap); } @media (max-width: 1024px) { .bnuProducts { grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--layout-spacing) * 0.5); } } @media (max-width: 768px) { .bnuProducts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .bnuProducts.bnuProducts--list-mobile { display: flex; flex-direction: column; } } .bnuOverlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } body.overlay .bnuOverlay, body.overlayMobile .bnuOverlay, body.overlayLg .bnuOverlay, body.overlayMd .bnuOverlay { opacity: 1; pointer-events: auto; } .bnuSideCart { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 1101; flex-direction: column; width: 100%; max-width: 420px; height: 100%; margin: 0; padding: 0; border: 0; background-color: #fff; box-shadow: var(--box-shadow); transform: translate3d(100%, 0, 0); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1); } .bnuSideCart.bnuSideCart--open, .bnuSideCart.visible { transform: translate3d(0, 0, 0); } .bnuSideCart__heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--layout-spacing); border-bottom: 1px solid var(--color-border); background-color: white; padding: calc(var(--layout-spacing) * 2); width: 100%; } .bnuSideCart__heading h2 { margin: 0; font-size: 24px; line-height: 1.25; } .bnuSideCart__close { flex-shrink: 0; } .bnuSideCart__content { flex: 1 1 auto; outline: 0; padding: calc(var(--layout-spacing) * 2); min-height: 0; overflow: auto; overscroll-behavior: contain; } .bnuSideCart__items { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuSideCart__empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: var(--layout-spacing); min-height: 50vh; text-align: center; } .bnuSideCart__empty img { display: block; max-width: 160px; height: auto; } .bnuSideCart__empty p { margin: 0; font-size: 20px; font-weight: 600; } .bnuSideCart__levels { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuSideCart__levels .bnuPromoBox { margin-bottom: 0; } .bnuSideCart__foldable { display: none; } .bnuSideCart__foldable .bnuPromoBox:last-child { margin-bottom: 0; } .bnuSideCart__product { margin: 0; } .bnuSideCart__actions { flex-shrink: 0; border-top: 1px solid var(--color-border); background-color: white; padding: calc(var(--layout-spacing) * 2); width: 100%; } .bnuSideCart__summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--layout-spacing); margin-bottom: calc(var(--layout-spacing) * 1.5); } .bnuSideCart__summary > span { font-weight: 600; } .bnuSideCart__summary > strong { color: var(--color-accent); font-size: 20px; } .bnuSideCart__summary--withLevels > span { margin-top: auto; } .bnuSideCart__reachedBonuses { display: flex; flex: 0 0 100%; flex-direction: column; gap: calc(var(--layout-spacing) / 2); margin: 0; padding: 0; list-style: none; } .bnuSideCart__reachedBonuses li { display: flex; align-items: center; gap: calc(var(--layout-spacing) / 2); color: var(--color-success); font-size: 13px; font-weight: 600; } .bnuSideCart__reachedBonuses i { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-success); width: 16px; height: 16px; color: white; font-size: 10px; } @media (max-width: 768px) { .bnuSideCart { max-width: 100%; } .bnuSideCart__heading, .bnuSideCart__content, .bnuSideCart__actions { padding: var(--layout-padding); } .bnuSideCart__heading h2 { font-size: 20px; } } .bind-benuCartGiftsWrap:not(:empty) { padding-top: calc(var(--layout-spacing) * 2.5); margin-bottom: calc(var(--layout-spacing) * 2.5); } @media (max-width: 768px) { .bind-benuCartGiftsWrap:not(:empty) { padding-top: calc(var(--layout-spacing) * 3); margin-bottom: calc(var(--layout-spacing) * 3); } } .bnuCartGifts { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 3); min-width: 0; } .bnuCartGifts__header { display: flex; align-items: center; } .bnuCartGifts__header h2 { display: flex; align-items: center; gap: var(--layout-spacing); margin: 0; } .bnuCartGifts--listView > .bnuCartGifts__header { display: none; } .bnuCartGifts__progress { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 2); min-width: 0; } .bnuCartGifts__tiers { display: flex; gap: var(--layout-column-gap); padding-block: var(--layout-spacing); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-color: var(--color-border) transparent; } .bnuCartGifts__tiers:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--border-radius-small); } .bnuGiftTier { --gift-tier-padding: calc(var(--layout-spacing) * 2); --gift-tier-node-radius: 20px; --gift-tier-connector-offset: 8px; display: flex; position: relative; flex: 1 0 260px; flex-direction: column; gap: var(--layout-spacing); border: 1px solid var(--color-border); border-radius: var(--card-border-radius); background-color: transparent; padding: var(--gift-tier-padding); min-width: 0; max-width: 292px; scroll-snap-align: start; } .bnuGiftTier--unlocked { border-color: var(--color-success-border); } .bnuGiftTier__header { display: flex; align-items: center; justify-content: center; gap: var(--layout-spacing); text-align: center; } .bnuGiftTier__threshold { font-size: 18px; text-align: center; } .bnuGiftTier__level, .bnuGiftTier__status { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .bnuGiftTier__milestone { display: flex; position: relative; align-items: center; justify-content: center; min-height: 40px; } .bnuGiftTier__node { display: inline-flex; position: relative; z-index: 2; flex-shrink: 0; align-items: center; justify-content: center; border: 2px solid var(--color-border); border-radius: 50%; background-color: var(--color-bg); width: 40px; height: 40px; color: var(--color-text-light); } .bnuGiftTier--unlocked .bnuGiftTier__node, .bnuPageContent .bnuGiftTier--unlocked .bnuGiftTier__node { border-color: var(--color-success); background-color: var(--color-success); color: #fff; } .bnuPageContent .bnuGiftTier--unlocked .bnuGiftTier__node i { color: #fff; } .bnuGiftTier__connector { position: absolute; top: 50%; left: calc(50% + var(--gift-tier-node-radius) + var(--gift-tier-connector-offset)); z-index: 1; transform: translateY(-50%); border-radius: var(--border-radius-small); background-color: var(--color-border); width: calc(100% + var(--layout-column-gap) + var(--gift-tier-padding) * 2 - var(--gift-tier-node-radius) - var(--gift-tier-node-radius) - var(--gift-tier-connector-offset) - var(--gift-tier-connector-offset)); height: 8px; overflow: hidden; } .bnuGiftTier__connector > span { display: block; background-color: var(--color-success); height: 100%; transition: width 0.2s ease; } .bnuGiftTier__status, .bnuPageContent .bnuGiftTier__status { margin: 0; min-height: 32px; color: var(--color-error); text-align: center; } .bnuGiftTier--unlocked .bnuGiftTier__status, .bnuPageContent .bnuGiftTier--unlocked .bnuGiftTier__status { color: var(--color-success); } .bnuGiftTier__gifts { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.5); } .bnuGiftTier__gift { display: flex; align-items: center; gap: var(--layout-spacing); border-radius: var(--border-radius-small); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 0.5); min-height: 56px; font-size: 13px; font-weight: 600; } .bnuGiftTier__gift > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .bnuGiftTier--unlocked .bnuGiftTier__gift { background-color: var(--color-success-bg); } .bnuGiftTier__gift[hidden] { display: none; } .bnuGiftTier__gift img { flex-shrink: 0; border-radius: var(--border-radius-small); width: 48px; height: 48px; object-fit: contain; } .bnuGiftTier__toggle { align-self: flex-start; margin-top: auto; } .bnuGiftTier__toggle i { transition: transform 0.2s ease; } .bnuGiftTier__toggle[aria-expanded=true] i { transform: rotate(180deg); } .bnuCartGifts__tierPagination { display: none; justify-content: center; gap: calc(var(--layout-spacing) * 0.5); } .bnuCartGifts__tierPagination button { cursor: pointer; border: 0; border-radius: var(--border-radius-small); background-color: var(--color-border); padding: 0; width: 24px; height: 4px; } .bnuCartGifts__tierPagination button[aria-current=true] { background-color: var(--color-text); } .bnuCartGifts__notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-column-gap); } .bnuCartGifts__notices .bnuNotice { margin: 0; } .bnuCartGifts__notices .bnuNotice--warning, .bnuPageContent .bnuCartGifts__notices .bnuNotice--warning { background-color: var(--color-promo-orange-bg); border: 1px solid var(--color-promo-orange-border); color: var(--color-promo-orange); } .bnuCartGifts__notices .bnuCartGifts__noticeArrow { align-self: center; margin-left: auto; transform: none; font-size: 32px; } .bnuCartGifts__products { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 2); min-width: 0; } .bnuCartGifts__carousel .swiper-slide { height: auto; } .bnuCartGifts__item { height: 100%; } .bnuCartGifts__item .bnuProduct__main { height: 100%; } .bnuCartGifts__item .bnuProduct__top > h2 { padding-inline-end: calc(var(--layout-spacing) * 2.5); } .bnuCartGifts__tooltip { position: absolute; top: min(4%, var(--layout-spacing)); right: min(4%, var(--layout-spacing)); z-index: 2; } .bnuCartGifts__tooltip > .bnuTooltip__popover { position-area: bottom span-left; } .bnuCartGifts__item .bnuProduct__stock { margin: auto 0 0; color: var(--color-error); font-size: 13px; font-weight: 600; } @media (max-width: 1024px) { .bnuCartGifts__tierPagination { display: flex; } .bnuCartGifts__notices { grid-template-columns: 1fr; } } @media (max-width: 768px) { .bnuGiftTier { flex-basis: 82%; } } .bnuCartSummary { color: var(--color-text); } .bnuCartSummary__title h3 { margin: 0 0 calc(var(--layout-spacing) * 1.5); font-size: 20px; color: var(--color-text); } .bnuCartSummary__lines { display: flex; flex-direction: column; gap: var(--layout-spacing); margin: 0; } .bnuCartSummary__line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--layout-spacing); margin: 0; color: var(--color-text); line-height: 1.25; } .bnuCartSummary__line dt, .bnuCartSummary__line > span { flex: 1 1 auto; min-width: 0; margin: 0; } .bnuCartSummary__line dd, .bnuCartSummary__line > strong { flex: 0 0 auto; margin: 0; text-align: right; white-space: nowrap; } .bnuCartSummary__line strong { color: inherit; } .bnuCartSummary__line--muted { color: var(--color-text-light); } .bnuCartSummary__line--discount { color: var(--color-promo); } .bnuCartSummary__line--promo { color: var(--color-accent); } .bnuCartSummary__line--total { align-items: baseline; font-size: inherit; } .bnuCartSummary__line--total > strong { color: var(--color-text); font-size: 24px; } .bnuCartSummary__delivery { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.5); min-width: 0; color: var(--color-text); } .bnuCartSummary__delivery--warning { color: var(--color-warning); } .bnuCartSummary__deliveryMain { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--layout-spacing); min-width: 0; } .bnuCartSummary__deliveryLabel { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: calc(var(--layout-spacing) * 0.5); min-width: 0; line-height: 1.375; overflow-wrap: anywhere; } .bnuCartSummary__deliveryLabel .benuBadge, .bnuCartSummary__deliveryLabel li.benuBadge { flex-shrink: 0; } .bnuCartSummary__deliveryPrice { flex: 0 0 auto; color: inherit; white-space: nowrap; } .bnuCartSummary__deliveryMeta { margin: 0; min-width: 0; color: var(--color-text-light); font-size: 0.933em; line-height: 1.4; overflow-wrap: anywhere; } .bnuCartSummary__separator { display: block; width: 100%; height: 1px; margin: calc(var(--layout-spacing) * 2) 0; border: none; background-color: var(--color-border); } .bnuCartSummary__lcSave { margin: var(--layout-spacing) 0 0; color: var(--color-text); font-size: 0.933em; line-height: 1.4; } .bnuCartSummary__lcSave a { color: var(--color-accent); } .bnuCartSummary__lcSave b, .bnuCartSummary__lcSave strong { color: var(--color-accent); } .bnuCartSummary .bnuButton { margin-top: calc(var(--layout-spacing) * 2); } .bnuAside--cart > .bnuCartSummary { margin-bottom: var(--layout-spacing); } .bnuAside--cart > *:last-child { margin-bottom: 0; } .bnuCartNotificationMobile { display: none; } @media (max-width: 768px) { .bnuCartNotificationMobile { display: block; margin-block: calc(var(--layout-spacing) * 2); } } .bnuCartMemberStatus { margin: 16px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--color-border); } @media (max-width: 768px) { .bnuCartMemberStatus { margin-top: var(--layout-spacing); } } .bnuCartMemberStatus__layout { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-spacing); } @media (max-width: 768px) { .bnuCartMemberStatus__layout { flex-wrap: wrap; } } .bnuCartMemberStatus__main { position: relative; flex: 0 0 auto; padding-left: 60px; min-height: 48px; } @media (max-width: 768px) { .bnuCartMemberStatus__main { padding-left: 52px; min-height: 40px; } } .bnuCartMemberStatus__icon { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; border: 2px solid var(--color-border); border-radius: 50%; background-color: var(--color-bg); width: 48px; height: 48px; color: var(--color-text-light); font-size: 18px; } @media (max-width: 768px) { .bnuCartMemberStatus__icon { width: 40px; height: 40px; font-size: 16px; } } .bnuCartMemberStatus__title { margin: 12px 0; color: var(--color-text-light); font-size: 20px; font-weight: 500; line-height: 1.2; } @media (max-width: 768px) { .bnuCartMemberStatus__title { margin: 8px 0; font-size: 18px; line-height: 1.333; } } .bnuCartMemberStatus__message { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--color-text); font-size: 15px; line-height: 1.2; text-align: right; } @media (max-width: 768px) { .bnuCartMemberStatus__message { flex: 1 1 100%; font-size: 14px; line-height: 1.5; text-align: left; } } .bnuCartMemberStatus__message br { display: none; } @media (max-width: 480px) { .bnuCartMemberStatus__message br { display: block; } } .bnuCartMemberStatus__message a { text-decoration: underline; } .bnuCartMemberStatus__message a:first-of-type { margin-left: 8px; } @media (max-width: 768px) { .bnuCartMemberStatus__message a:first-of-type { margin-left: 0; } } .bnuPageLayout:has(.bnuAside--cart) { column-gap: calc(var(--layout-spacing) * 2); } .bnuPageLayout:has(.bnuAside--cart) .bnuPageContent.checkoutContent { flex: 1 1 auto; width: auto; min-width: 0; } .bnuPageLayout:has(.bnuAside--cart) .bnuPageContent.checkoutContent .bnuPageHeader { margin-block-end: 0; } .bnuCartSummaryMobile { display: none; position: fixed; right: 0; bottom: 0; left: 0; z-index: 1101; border-radius: var(--border-radius) var(--border-radius) 0 0; background-color: #fff; box-shadow: var(--box-shadow); padding: calc(var(--layout-spacing) * 2) var(--layout-padding) var(--layout-padding); width: 100%; color: var(--color-text); } .bnuCartSummaryMobile__handle { display: flex; position: absolute; top: 0; left: 50%; z-index: 3; align-items: center; justify-content: center; transform: translateX(-50%); border: 0; background: transparent; padding: 0; width: 48px; height: 48px; color: var(--color-text-light); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .bnuCartSummaryMobile__handle i { font-size: 14px; line-height: 1; pointer-events: none; transition: transform 0.2s ease; } .bnuCartSummaryMobile--open .bnuCartSummaryMobile__handle i { transform: rotate(180deg); } .bnuCartSummaryMobile__content { margin-bottom: var(--layout-spacing); } .bnuCartSummaryMobile__content[hidden] { display: none !important; } .bnuCartSummaryMobile .bnuCartSummary__line--total { margin-bottom: calc(var(--layout-spacing) * 0.5); } .bnuCartSummaryMobile .bnuButton { position: relative; z-index: 2; margin-top: var(--layout-spacing); } @media (max-width: 1024px) { .bnuCartSummaryMobile { display: block; } } @media (max-width: 768px) { .bnuCartSummary__deliveryMeta { font-size: 0.866em; } } .bnuCheckout[hidden] { display: none !important; } .bnuCheckout:not([hidden]) { display: block; } .bnuStep.bnuStep--rx { margin-bottom: calc(var(--layout-spacing) * 3.5); } @media (max-width: 1024px) { .bnuStep.bnuStep--rx { margin-bottom: calc(var(--layout-spacing) * 3); } } .bnuStep.inactive .bnuStep__heading { pointer-events: none; margin-bottom: 0; margin-top: calc(var(--layout-spacing) * 3.5); } .bnuStep.inactive .bnuStep__headingMain h2, .bnuStep.inactive .bnuStep__headingMain .h2, .bnuStep.inactive .bnuStep__headingMain .bnuStep__icon { color: var(--color-text-light); } .bnuStep.current .bnuStep__content { display: block; } .bnuStep.complete .bnuStep__heading { pointer-events: auto; } .bnuStep.complete .bnuStep__headingMain h2, .bnuStep.complete .bnuStep__headingMain .h2, .bnuStep.complete .bnuStep__headingMain .bnuStep__icon { color: var(--color-success); } .bnuStep.complete .bnuStep__info { display: block; margin-top: calc(var(--layout-spacing) * 0.35); } .bnuStep.complete .bnuStep__change { display: block; } .bnuStep.complete .bnuStep__icon--number span { display: none; } .bnuStep.complete .bnuStep__icon--number::after { content: "\f00c"; font-family: var(--font-fa); font-weight: 400; line-height: 1; } .bnuStep.complete.current .bnuStep__headingMain h2, .bnuStep.complete.current .bnuStep__headingMain .h2 { margin-bottom: var(--layout-spacing); } .bnuStep.complete.current .bnuStep__info { display: none; } .bnuStep__heading { scroll-margin-top: calc(var(--promo-height) + var(--header-height) + var(--layout-spacing)); margin: calc(var(--layout-spacing) * 3.5) 0 calc(var(--layout-spacing) * 1.15); padding-bottom: var(--layout-spacing); border-bottom: 2px solid var(--color-border); } .bnuStep__heading--icon { position: relative; } .bnuStep__headingRow { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); align-items: baseline; justify-content: flex-start; width: 100%; flex-wrap: nowrap; } .bnuStep__headingMain { position: relative; min-width: 0; flex: 1 1 auto; } .bnuStep__heading--icon .bnuStep__headingMain { padding-left: 60px; } @media (max-width: 768px) { .bnuStep__heading--icon .bnuStep__headingMain { padding-left: 52px; } } .bnuStep__heading--icon .bnuStep__icon { position: absolute; left: 0; top: 0; } .bnuStep__headingMain h2, .bnuStep__headingMain .h2 { margin: var(--layout-spacing) 0; font-size: 20px; font-weight: 500; line-height: 1.2; } @media (max-width: 768px) { .bnuStep__headingMain h2, .bnuStep__headingMain .h2 { margin: calc(var(--layout-spacing) * 0.65) 0; font-size: 18px; line-height: 1.3334; } } .bnuStep__headingAction, .bnuStep__change { flex: 0 0 auto; margin-inline-start: auto; align-self: flex-end; } .bnuStep__headingAction .bnuButton, .bnuStep__change .bnuButton { margin-top: 0; margin-bottom: 0; min-width: 160px; } @media (max-width: 1024px) { .bnuStep__heading { margin-top: calc(var(--layout-spacing) * 2.5); margin-bottom: calc(var(--layout-spacing) * 2.5); padding-bottom: calc(var(--layout-spacing) * 2); } .bnuStep__heading--icon .bnuStep__headingMain { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: calc(var(--layout-spacing) * 1.5); row-gap: calc(var(--layout-spacing) * 0.5); align-items: center; padding-left: 0; } .bnuStep.complete .bnuStep__heading--icon .bnuStep__headingMain { align-items: start; } .bnuStep__heading--icon .bnuStep__icon { position: static; grid-column: 1; grid-row: 1; } .bnuStep__headingMain h2, .bnuStep__headingMain .h2 { margin: 0; grid-column: 2; grid-row: 1; min-width: 0; } .bnuStep__headingMain .bnuStep__info { grid-column: 2; grid-row: 2; } .bnuStep__headingRow { flex-direction: column; align-items: stretch; row-gap: calc(var(--layout-spacing) * 1.5); } .bnuStep__headingAction, .bnuStep__change { flex: 1 1 auto; margin-inline-start: 0; align-self: stretch; text-align: center; } .bnuStep__headingAction .bnuButton, .bnuStep__change .bnuButton { width: 100%; min-width: 0; } } .bnuStep__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 2px solid var(--color-border); border-radius: 50%; background-color: var(--color-bg); width: 48px; height: 48px; font-size: 20px; font-weight: 500; line-height: 1; } @media (max-width: 768px) { .bnuStep__icon { width: 40px; height: 40px; font-size: 18px; } } .bnuStep__icon--number { color: var(--color-accent); } .bnuStep__info { display: none; width: 100%; margin: 0; color: var(--color-text-light); font-size: 15px; line-height: 1.2; } @media (max-width: 768px) { .bnuStep__info { font-size: 14px; line-height: 1.5; } } .bnuStep__change { display: none; } .bnuStep__content { display: none; } .bnuStep__continue { margin-top: calc(var(--layout-spacing) * 0.65); text-align: right; } @media (max-width: 768px) { .bnuStep__continue { margin-top: var(--layout-spacing); } } .bnuStep__continue--left { text-align: left; } .bnuStep__continue--left a { margin-right: calc(var(--layout-spacing) * 0.65); } .bnuStep__continue--left a:last-child { margin-right: 0; } .bnuStep__continue .bnuButton { margin-top: 0; margin-bottom: 0; min-width: 160px; } @media (max-width: 768px) { .bnuStep__continue .bnuButton { min-width: 100%; } } @media (max-width: 768px) { .bnuStep__continue .bnuButton:not(:only-child) { margin-bottom: calc(var(--layout-spacing) * 0.65); } } .bnuStep__continue .bnuButton:last-child { margin-bottom: 0; } .bnuStep__complete { margin-top: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuStep__complete { margin-top: calc(var(--layout-spacing) * 1.65); } } .bnuStep__complete .bnuButton { max-width: 230px; } @media (max-width: 480px) { .bnuStep__complete .bnuButton { max-width: 100%; } } .bnuStepBubblesWrap { display: none; } .bnuStepBubblesWrap--side:not([hidden]) { display: block; } @media (max-width: 1024px) { .bnuStepBubblesWrap--side:not([hidden]) { display: none; } } .bnuStepBubblesWrap--mobile { display: none; } @media (max-width: 1024px) { .bnuCheckoutIntro:not([hidden]) .bnuStepBubblesWrap--mobile { display: block; margin-bottom: calc(var(--layout-spacing) * 1.5); } } .bnuCheckoutIntro[hidden] { display: none !important; } .bnuCheckoutIntro__title { margin: calc(var(--layout-spacing) * 2) 0 calc(var(--layout-spacing) * 1.5); font-size: 30px; font-weight: 500; line-height: 1.2; } @media (max-width: 768px) { .bnuCheckoutIntro__title { font-size: 24px; } } .bnuStepBubblesWrap[hidden] { display: none !important; } .bnuStepBubbles { display: flex; margin: 0 0 calc(var(--layout-spacing) * 2.65); padding: 0; list-style: none; } .bnuStepBubblesWrap--side .bnuStepBubbles { margin-inline: calc(var(--layout-spacing) * -1); } .bnuStepBubblesWrap--summary .bnuStepBubbles { margin: 0 calc(var(--layout-spacing) * -1) calc(var(--layout-spacing) * 0.35); } .bnuStepBubblesWrap--summary .bnuStepBubbles__icon { box-shadow: 0 0 0 4px var(--color-bg); } .bnuStepBubbles__item { position: relative; flex: 1 1 0; min-width: 0; text-align: center; } .bnuStepBubbles__item::before { content: ""; position: absolute; top: 14px; left: -50%; z-index: 1; background-color: var(--color-success); width: 100%; height: 2px; transition: background-color 0.1s ease-in-out; } .bnuStepBubbles__item:first-child::before { display: none; } .bnuStepBubbles__icon { display: flex; position: relative; z-index: 2; align-items: center; justify-content: center; margin: 0 auto calc(var(--layout-spacing) * 0.5); border: 2px solid var(--color-success); border-radius: 50%; background-color: var(--color-bg); box-shadow: 0 0 0 4px var(--color-bg); width: 28px; height: 28px; color: var(--color-success); font-size: 14px; font-weight: 700; line-height: 1; transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out; } .bnuStepBubbles__item p, .bnuPageContent .bnuStepBubbles__item p { margin: 0; color: var(--color-text); font-size: 0.8em; font-weight: 500; line-height: 1.1; } .bnuStepBubbles--step0 .bnuStepBubbles__item, .bnuStepBubbles--step1 .bnuStepBubbles__item:not(:nth-child(1)), .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(n+3), .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(n+4) { pointer-events: none; } .bnuStepBubbles--step0 .bnuStepBubbles__item::before, .bnuStepBubbles--step1 .bnuStepBubbles__item:not(:nth-child(1))::before, .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(n+3)::before, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(n+4)::before { background-color: var(--color-border); } .bnuStepBubbles--step0 .bnuStepBubbles__item .bnuStepBubbles__icon, .bnuStepBubbles--step1 .bnuStepBubbles__item:not(:nth-child(1)) .bnuStepBubbles__icon, .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(n+3) .bnuStepBubbles__icon, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(n+4) .bnuStepBubbles__icon { border-color: var(--color-border); background-color: var(--color-bg); color: var(--color-text-light); } .bnuStepBubbles--step0 .bnuStepBubbles__item p, .bnuStepBubbles--step1 .bnuStepBubbles__item:not(:nth-child(1)) p, .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(n+3) p, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(n+4) p { color: var(--color-text-light); } .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(1) .bnuStepBubbles__icon, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(-n+2) .bnuStepBubbles__icon, .bnuStepBubbles--step4 .bnuStepBubbles__item:nth-child(-n+3) .bnuStepBubbles__icon, .bnuStepBubbles--completed .bnuStepBubbles__item .bnuStepBubbles__icon { border-color: var(--color-success); background-color: var(--color-success); color: #fff; } .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(1) .bnuStepBubbles__icon span, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(-n+2) .bnuStepBubbles__icon span, .bnuStepBubbles--step4 .bnuStepBubbles__item:nth-child(-n+3) .bnuStepBubbles__icon span, .bnuStepBubbles--completed .bnuStepBubbles__item .bnuStepBubbles__icon span { display: none; } .bnuStepBubbles--step2 .bnuStepBubbles__item:nth-child(1) .bnuStepBubbles__icon::after, .bnuStepBubbles--step3 .bnuStepBubbles__item:nth-child(-n+2) .bnuStepBubbles__icon::after, .bnuStepBubbles--step4 .bnuStepBubbles__item:nth-child(-n+3) .bnuStepBubbles__icon::after, .bnuStepBubbles--completed .bnuStepBubbles__item .bnuStepBubbles__icon::after { content: "\f00c"; font-family: var(--font-fa); font-weight: 400; line-height: 1; } .bnuStepBubbles--4 .bnuStepBubbles__item { flex-basis: 25%; } .bnuCartOptions { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.65); } .bnuCartOption { display: block; position: relative; margin: 0; } .bnuCartOption__input.bnuChoice { grid-column: 1; grid-row: 1; align-self: center; z-index: 1; margin: 0; width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; } .bnuCartOption__label { display: block; position: relative; container-type: inline-size; container-name: bnu-cart-option; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: transparent; padding: calc(var(--layout-spacing) * 1.5) calc(var(--layout-spacing) * 1.65); cursor: pointer; transition: border-color 0.1s ease-in-out; } @media (max-width: 1024px) { .bnuCartOption__label { padding: var(--layout-spacing); } } .bnuCartOption__label:hover { border-color: color-mix(in oklch, var(--color-text), white var(--outline-border)); } .bnuCartOption:has(.bnuCartOption__input:checked) .bnuCartOption__label { border-color: var(--color-accent); } .bnuCartOption__layout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); align-items: center; } .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 16rem) auto; } .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-template-columns: auto minmax(0, 1fr) auto; } .bnuCartOption__layout:has(.bnuCartOption__description) { align-items: start; } .bnuCartOption__layout:has(.bnuCartOption__description) .bnuCartOption__input, .bnuCartOption__layout:has(.bnuCartOption__description) .bnuCartOption__marker--blocked { align-self: start; margin-top: 4px; } .bnuCartOption__layout:has(.bnuCartOption__description) .bnuCartOption__price, .bnuCartOption__layout:has(.bnuCartOption__description) .bnuCartOption__suboptions:not(:has(.bnuCartOptionBanks, .bnuCartOptionCards)) { align-self: start; } .bnuCartOption__main { display: flex; column-gap: calc(var(--layout-spacing) * 1.25); align-items: center; grid-column: 2; grid-row: 1; min-width: 0; } .bnuCartOption__marker--blocked { display: flex; grid-column: 1; grid-row: 1; align-self: center; align-items: center; justify-content: center; overflow: visible; } .bnuCartOption__marker--blocked i { font-size: 20px; line-height: 1; color: var(--color-text-disabled); } .bnuPageContent .bnuCartOption__marker--blocked i { color: var(--color-text-disabled); } .bnuCartOption__body { display: flex; flex-direction: column; align-items: stretch; min-width: 0; flex: 1 1 auto; } .bnuCartOption__title, .bnuCartOption__badges { margin: 0; overflow-wrap: break-word; word-break: normal; } .bnuCartOption__badges { display: flex; align-items: center; } .bnuCartOption__badges ul { margin: 0; padding: 0; list-style: none; } .bnuCartOption__description { margin: calc(var(--layout-spacing) * 0.35) 0 0; color: var(--color-text-light); } .bnuCartOption__price { grid-column: 3; grid-row: 1; text-align: right; } .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])) .bnuCartOption__price { grid-column: 4; } .bnuCartOption__priceValue { color: var(--color-accent); font-size: 15px; font-weight: 700; white-space: nowrap; } .bnuCartOption__timing { margin: calc(var(--layout-spacing) * 0.35) 0 0; color: var(--color-success); } .bnuCartOption__suboptions { display: none; width: auto; } .bnuCartOption__suboptions:not(:has(.bnuCartOptionBanks, .bnuCartOptionCards)) { grid-column: 3; grid-row: 1; align-self: center; min-width: 0; max-width: 100%; } .bnuCartOption__suboptions:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-column: 2/-1; grid-row: 2; width: 100%; } .bnuCartOption:has(.bnuCartOption__input:checked) .bnuCartOption__suboptions:not([hidden]), .bnuCartOption__suboptions--active:not([hidden]), .bnuCartOption__suboptions--alwaysVisible { display: block; } .bnuCartOption__suboptions .bnuButton { width: auto; min-width: 0; max-width: 100%; height: auto; min-height: var(--button-height); padding-block: calc((var(--button-height) - 16px) / 2); overflow: hidden; white-space: normal; overflow-wrap: break-word; } .bnuCartOption__suboptions .bnuButton > span { min-width: 0; white-space: normal; overflow-wrap: break-word; } .bnuCartOption__badges .benuBadge--express { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.35); margin: 0; border-radius: var(--border-radius-small); background-color: var(--color-warning); color: #fff; font-style: italic; font-weight: 700; font-size: 13px; line-height: 1.2; padding: calc(var(--layout-spacing) * 0.35) calc(var(--layout-spacing) * 0.65); list-style: none; } .bnuCartOption__badges .benuBadge--express i { color: #fff; } .bnuCartOption--inactive { pointer-events: none; } .bnuCartOption--inactive .bnuCartOption__label { cursor: default; border-color: color-mix(in oklch, var(--color-border), var(--color-bg) 35%); color: var(--color-text-disabled); } .bnuCartOption--inactive .bnuCartOption__label:hover { border-color: color-mix(in oklch, var(--color-border), var(--color-bg) 35%); } .bnuCartOption--inactive .bnuCartOption__title, .bnuCartOption--inactive .bnuCartOption__description { color: var(--color-text-disabled); } .bnuCartOption--inactive .bnuCartOption__priceValue { color: var(--color-text-disabled); } .bnuCartOption--inactive .bnuCartOption__timing { color: var(--color-text-disabled); } .bnuCartOption--inactive .bnuCartOption__badges .benuBadge--express { background-color: #b1b1b1; color: #fff; } .bnuCartOption--inactive .bnuCartOption__badges .benuBadge--express i { color: #fff; opacity: 0.85; } .bnuCartOptionSuboptions { width: 100%; } .bnuCartOptionBanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: calc(var(--layout-spacing) * 0.65); width: 100%; } .bnuCartOptionBanks--compact { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .bnuCartOptionBanks__item { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); padding: calc(var(--layout-spacing) * 0.5); min-height: 44px; text-decoration: none; } .bnuCartOptionBanks__item img { display: block; max-width: 100%; max-height: 28px; object-fit: contain; } .bnuCartOptionBanks__item--active, .bnuCartOptionBanks__item.active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .bnuCartOptionBanks__label { font-size: 13px; line-height: 1.2; text-align: center; } .bnuCartOptionCards { display: flex; flex-direction: column; row-gap: calc(var(--layout-spacing) * 0.65); width: 100%; } .bnuCartOptionCards__item { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--layout-column-gap); align-items: center; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 1.25); color: inherit; text-decoration: none; } .bnuCartOptionCards__item img { display: block; max-height: 28px; } .bnuCartOptionCards__item--active, .bnuCartOptionCards__item.active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .bnuCartOptionCards__title { font-weight: 500; } .bnuCartOptionCards__title--rtl { direction: rtl; unicode-bidi: bidi-override; text-align: left; } .bnuCartOptionCards__details { display: block; color: var(--color-text-light); font-size: 13px; } .bnuCartOptionCards__delete { color: var(--color-text-light); cursor: pointer; } .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) .bnuCartOption__price { grid-column: 3; grid-row: 1; } @container bnu-cart-option (max-width: 40rem) { .bnuCartOption__layout, .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])), .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-template-columns: auto minmax(0, 1fr); } .bnuCartOption__price, .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])) .bnuCartOption__price, .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) .bnuCartOption__price { grid-column: 2; grid-row: 2; text-align: left; } .bnuCartOption__suboptions:not(:has(.bnuCartOptionBanks, .bnuCartOptionCards)), .bnuCartOption__suboptions:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-column: 1/-1; grid-row: 3; width: 100%; align-self: stretch; } .bnuCartOption__suboptions .bnuButton { width: 100%; min-width: 0; } } @media (max-width: 1024px) { .bnuCartOption__layout, .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])), .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-template-columns: auto minmax(0, 1fr); } .bnuCartOption__price, .bnuCartOption__layout:has(> .bnuCartOption__suboptions:not([hidden])) .bnuCartOption__price, .bnuCartOption__layout:has(.bnuCartOptionBanks, .bnuCartOptionCards) .bnuCartOption__price { grid-column: 2; grid-row: 2; text-align: left; } .bnuCartOption__suboptions:not(:has(.bnuCartOptionBanks, .bnuCartOptionCards)), .bnuCartOption__suboptions:has(.bnuCartOptionBanks, .bnuCartOptionCards) { grid-column: 1/-1; grid-row: 3; width: 100%; align-self: stretch; } .bnuCartOption__suboptions .bnuButton { width: 100%; min-width: 0; } } .cart_cartDataAboveCounter { display: block; padding: 16px 0 10px; line-height: 1.2; } @media (max-width: 768px) { .cart_cartDataAboveCounter { padding: 12px 0 8px; font-size: 14px; line-height: 1.5; } } .bnuCartTable { width: 100%; margin: 0 0 calc(var(--layout-spacing) * 2.5); color: var(--color-text); } @media (max-width: 768px) { .bnuCartTable { margin: 0 0 calc(var(--layout-spacing) * 2); font-size: 14px; } } .bnuCartTable__heading { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9.5rem 6.5rem; column-gap: var(--layout-spacing); align-items: end; margin-bottom: var(--layout-spacing); padding: 0 0 var(--layout-spacing) calc(108px + var(--layout-spacing)); border-bottom: 2px solid var(--color-border); color: var(--color-text-light); font-size: 14px; font-weight: 400; line-height: 1; } @media (max-width: 1024px) { .bnuCartTable__heading { grid-template-columns: minmax(0, 1fr) 7rem 7.5rem 6rem; } } @media (max-width: 768px) { .bnuCartTable__heading { display: none; } } .bnuCartTable__headingPrice, .bnuCartTable__headingQnt, .bnuCartTable__headingSum { white-space: nowrap; } .bnuCartTable__headingSum { text-align: right; } .bnuCartTable__body { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuCartTable__row { display: grid; position: relative; grid-template-columns: 108px minmax(0, 1fr) 7rem 9.5rem 6.5rem; column-gap: var(--layout-spacing); align-items: start; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: #fff; padding: calc(var(--layout-spacing) * 1.5); } @media (max-width: 1024px) { .bnuCartTable__row { grid-template-columns: 108px minmax(0, 1fr) 44px; grid-template-rows: auto auto; row-gap: calc(var(--layout-spacing) * 1.5); } } @media (max-width: 480px) { .bnuCartTable__row { grid-template-columns: 88px minmax(0, 1fr) 44px; } } .bnuCartTable a:not(.bnuCartTable__productTitle, .bnuButtonAsTextLink) { color: var(--color-info); font-weight: 500; text-decoration: none; } .bnuCartTable__image { grid-column: 1; grid-row: 1; width: 108px; max-width: 100%; min-width: 0; } @media (max-width: 480px) { .bnuCartTable__image { width: 88px; } } .bnuCartTable__imageWrap { position: relative; overflow: hidden; width: 100%; max-width: 108px; aspect-ratio: 1/1; } @media (max-width: 480px) { .bnuCartTable__imageWrap { max-width: 88px; } } .bnuCartTable__image img { display: block; object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .bnuCartTable__image .bnuProduct__badges { z-index: 2; gap: 4px; } .bnuCartTable__image .bnuProduct__badges--tr { top: 0; right: 0; } .bnuCartTable__image .bnuProduct__badges--tl { top: 0; left: 0; } .bnuCartTable__image .bnuProductBadge { max-width: 100%; } .bnuCartTable__image .bnuProductBadge--round { width: calc(var(--layout-spacing) * 3); height: calc(var(--layout-spacing) * 3); font-size: 12px; } .bnuCartTable__image .bnuProductBadge--card img { width: auto; height: 16px; max-height: 16px; } .bnuCartTable__title { grid-column: 2; grid-row: 1; min-width: 0; color: var(--color-text); line-height: 1.5; overflow-wrap: anywhere; } .bnuCartTable a.bnuCartTable__productTitle, .bnuCartTable__productTitle { color: var(--color-text); font-weight: 500; } .bnuCartTable__bits { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.25); margin-top: calc(var(--layout-spacing) * 0.5); color: var(--color-text-light); font-size: 0.933em; font-weight: 400; line-height: 1.4; } .bnuCartTable__bit { min-width: 0; } .bnuCartTable__row > .bnuCartTable__alert { grid-column: 1/-1; min-width: 0; margin-top: var(--layout-spacing); } @media (max-width: 1024px) { .bnuCartTable__row > .bnuCartTable__alert { margin-top: 0; } } .bnuCartTable__row > .bnuCartTable__alert:last-child { margin-bottom: calc(var(--layout-spacing) * 3); } @media (max-width: 1024px) { .bnuCartTable__row > .bnuCartTable__alert:last-child { margin-bottom: 0; } } .bnuCartTable__price { grid-column: 3; min-width: 0; padding-bottom: calc(var(--layout-spacing) * 3); } @media (max-width: 1024px) { .bnuCartTable__price { display: none; } } .bnuCartTable__qnt { grid-column: 4; min-width: 0; padding-bottom: calc(var(--layout-spacing) * 3); } @media (max-width: 1024px) { .bnuCartTable__qnt { grid-column: 2/-1; grid-row: 2; justify-self: end; align-self: end; padding: 0; } } .bnuCartTable__sum { grid-column: 5; min-width: 0; padding-bottom: calc(var(--layout-spacing) * 3); text-align: right; white-space: nowrap; } @media (max-width: 1024px) { .bnuCartTable__sum { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; padding: 0; text-align: left; } } @media (max-width: 1024px) { .bnuCartTable__sum::after { content: attr(data-pcs); display: block; margin-top: 4px; color: var(--color-text-light); font-size: 13px; line-height: 1; white-space: nowrap; } } .bnuCartTable__oldPrice { display: inline-block; margin-right: 4px; color: var(--color-text-light); font-size: 0.933em; text-decoration: line-through; white-space: nowrap; } .bnuCartTable__priceValue, .bnuCartTable__subtotalValue { color: var(--color-text); font-size: 1.067em; font-weight: 500; white-space: nowrap; } .bnuCartTable__actions { position: absolute; right: calc(var(--layout-spacing) * 1.5); bottom: calc(var(--layout-spacing) * 1.5); z-index: 2; } @media (max-width: 1024px) { .bnuCartTable__actions { display: none; } } .bnuCartTable__actionsInner { position: relative; } .bnuCartTable__actionList { display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; list-style: none; } .bnuCartTable__actionList li { display: inline-block; margin-left: 20px; } .bnuCartTable__actionList .bnuButtonAsTextLink { font-size: 14px; line-height: 24px; white-space: nowrap; } .bnuCartTable__remove { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; width: 24px; height: 24px; color: var(--color-text-light); font-size: 16px; cursor: pointer; } .bnuCartTable__remove:hover { color: var(--color-text); } .bnuCartTable__mobileActions { display: none; position: relative; z-index: 3; } @media (max-width: 1024px) { .bnuCartTable__mobileActions { display: block; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; } } .bnuCartTable__mobileMenuToggle { display: flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; width: 44px; height: 44px; color: var(--color-text); font-size: 20px; cursor: pointer; touch-action: manipulation; } .bnuCartTable__mobileMenuToggle i, .bnuPageContent .bnuCartTable__mobileMenuToggle i { color: inherit; font-size: inherit; line-height: 1; } .bnuCartTable__mobileMenuList { display: none; position: absolute; top: 100%; right: 0; z-index: 9; margin: 0; border-radius: var(--border-radius-small); background-color: #fff; box-shadow: var(--box-shadow); padding: 5px 0; min-width: 100px; list-style: none; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } @media (max-width: 1024px) { .bnuCartTable__mobileMenuList { display: block; } } .bnuCartTable__mobileMenuList--open { opacity: 1; visibility: visible; pointer-events: auto; } .bnuCartTable__mobileMenuList--open a, .bnuCartTable .bnuCartTable__mobileMenuList li > a, .bnuPageContent .bnuCartTable__mobileMenuList li > a { display: block; padding: 8px 20px; color: var(--color-text); font-size: 0.867rem; font-weight: 400; line-height: 1.5; pointer-events: auto; cursor: pointer; } .bnuCartTable__mobileMenuList li > a:hover { background-color: var(--color-bg); } .bnuCartTable__alert { min-width: 0; } .bnuCartTable__row:has(> .bnuCartTable__alert) .bnuCartTable__price, .bnuCartTable__row:has(> .bnuCartTable__alert) .bnuCartTable__qnt, .bnuCartTable__row:has(> .bnuCartTable__alert) .bnuCartTable__sum { padding-bottom: 0; } .bnuCartTable__alert .bnuNotice { margin: 0; } .bnuCartTable__alert .bnuNotice a { text-decoration: underline; } .bnuCartTable__option { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); justify-content: space-between; align-items: baseline; padding: var(--layout-spacing) 0; border-top: 1px solid var(--color-border); } .bnuCartTable__optionTitle { flex: 1 1 auto; min-width: 0; } .bnuCartTable__optionValue { flex: 0 0 auto; font-weight: 500; white-space: nowrap; } .bnuCartTable__option--total { font-weight: 700; } .bnuCartTable__empty { padding: calc(var(--layout-spacing) * 2) 0; } .benuCartRecommendations[hidden] { display: none !important; } .benuCartRecommendations:not(:has(*)) { display: none; } .bnuCartEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-block: calc(var(--layout-spacing) * 6); text-align: center; } .bnuCartEmpty img { margin-bottom: calc(var(--layout-spacing) * 2); } .bnuCartEmpty__title { margin: 0; color: var(--color-text); font-size: 1.5rem; font-weight: 600; line-height: 1.3; } .bind-paymentStep, #bnuPayment { --bnuPayment-option-padding-block: calc(var(--layout-spacing) * 2); --bnuPayment-option-padding-inline: calc(var(--layout-spacing) * 1.5); --bnuPayment-option-control-offset: calc(var(--layout-spacing) * 0.15); --bnuPayment-option-control-inset: calc(var(--bnuPayment-option-padding-block) + var(--bnuPayment-option-control-offset)); --bnuPayment-option-label-inset: calc(var(--layout-spacing) * 5.5); --bnuPayment-option-gap: calc(var(--layout-spacing) * 2); } @media (max-width: 1024px) { .bind-paymentStep, #bnuPayment { --bnuPayment-option-padding-block: calc(var(--layout-spacing) * 1.5); --bnuPayment-option-padding-inline: var(--layout-spacing); --bnuPayment-option-control-offset: 0px; --bnuPayment-option-control-inset: var(--bnuPayment-option-padding-block); --bnuPayment-option-label-inset: calc(var(--layout-spacing) * 4.75); } } .bnuCheckoutPayment__intro { margin: 0 0 var(--layout-spacing); color: var(--color-text-light); font-size: 15px; line-height: 1.2; } @media (max-width: 768px) { .bnuCheckoutPayment__intro { font-size: 14px; line-height: 1.5; } } .bnuCheckoutPayment__section { display: block; margin: 0 0 var(--layout-spacing); border: none; padding: 0; background: none; } .bnuCheckoutPayment__section > legend { display: none; } .bnuCheckoutPayment__complete .bnuForm__row { margin-bottom: var(--layout-spacing); } .bnuCheckoutPayment__complete .bnuForm__row:last-of-type { margin-bottom: calc(var(--layout-spacing) * 1.5); } .bnuCheckoutPayment__complete .bnuForm__col.error .bnuChoiceWrap__label { color: var(--color-error); } .bnuCheckoutPayment__complete .bnuForm__col.error .bnuChoice { outline: 1px solid var(--color-error-border); outline-offset: 1px; } #bnuPayment .cartErrorHolder.active { margin-top: var(--layout-spacing); color: var(--color-error); font-size: 14px; line-height: 1.5; } #bnuPayment .cartErrorHolder.active.minimumOrderValue { margin-top: calc(var(--layout-spacing) * 1.5); font-weight: 500; } .bnuCheckoutPayment__complete.error .cartErrorHolder.active { display: block; } .bind-paymentStep .bnuCartOptions, #bnuPayment .bnuCartOptions { row-gap: var(--bnuPayment-option-gap); } .bind-paymentStep .bnuCartOption__label, #bnuPayment .bnuCartOption__label { padding-block: var(--bnuPayment-option-padding-block); padding-inline: calc(var(--bnuPayment-option-padding-inline) * 1.1); } @media (max-width: 1024px) { .bind-paymentStep .bnuCartOption__label, #bnuPayment .bnuCartOption__label { padding: var(--bnuPayment-option-padding-block) var(--bnuPayment-option-padding-inline); } } .bnuCheckoutPayment__option { position: relative; margin-bottom: var(--bnuPayment-option-gap); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: #fff; padding-block: var(--bnuPayment-option-padding-block); padding-inline: var(--bnuPayment-option-padding-inline); transition: border-color 0.1s ease-in-out; } .bnuCheckoutPayment__option .bnuInputWrap, .bnuCheckoutPayment__option .bnuInput, .bnuCheckoutPayment__option .bnuButton, .bnuCheckoutPayment__option .bnuForm__col { float: none; } .bnuCheckoutPayment__option.bind-giftCardSection, .bnuCheckoutPayment__option.bind-benuMoneyWrap { cursor: pointer; } .bnuCheckoutPayment__option.bind-giftCardSection input:not([type=checkbox]):not([type=radio]), .bnuCheckoutPayment__option.bind-giftCardSection textarea, .bnuCheckoutPayment__option.bind-giftCardSection .bnuInput, .bnuCheckoutPayment__option.bind-benuMoneyWrap input:not([type=checkbox]):not([type=radio]), .bnuCheckoutPayment__option.bind-benuMoneyWrap textarea, .bnuCheckoutPayment__option.bind-benuMoneyWrap .bnuInput { cursor: text; } .bnuCheckoutPayment__option.bind-giftCardSection button, .bnuCheckoutPayment__option.bind-giftCardSection .bnuButton, .bnuCheckoutPayment__option.bind-giftCardSection a[href], .bnuCheckoutPayment__option.bind-benuMoneyWrap button, .bnuCheckoutPayment__option.bind-benuMoneyWrap .bnuButton, .bnuCheckoutPayment__option.bind-benuMoneyWrap a[href] { cursor: pointer; } .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow { align-items: flex-start; } .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow > .bnuCheckoutPayment__inlineRowToggle { flex: 0 0 auto; align-self: flex-start; } .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--amountStep), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--applied), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-giftCardSectionContent:not([hidden])), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-benuMoneySectionContent:not([hidden])) { flex-wrap: nowrap; } .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--amountStep) > .bnuCheckoutPayment__giftCardActions, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--amountStep) > .bind-giftCardSectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--amountStep) > .bind-benuMoneySectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--applied) > .bnuCheckoutPayment__giftCardActions, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--applied) > .bind-giftCardSectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--applied) > .bind-benuMoneySectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-giftCardSectionContent:not([hidden])) > .bnuCheckoutPayment__giftCardActions, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-giftCardSectionContent:not([hidden])) > .bind-giftCardSectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-giftCardSectionContent:not([hidden])) > .bind-benuMoneySectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-benuMoneySectionContent:not([hidden])) > .bnuCheckoutPayment__giftCardActions, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-benuMoneySectionContent:not([hidden])) > .bind-giftCardSectionContent, .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-benuMoneySectionContent:not([hidden])) > .bind-benuMoneySectionContent { align-self: center; } @media (max-width: 1024px) { .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--amountStep), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bnuCheckoutPayment__giftCardActions--applied), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-giftCardSectionContent:not([hidden])), .bnuCheckoutPayment__inlineRow.bnuCheckoutPayment__giftCardRow:has(.bind-benuMoneySectionContent:not([hidden])) { flex-wrap: wrap; } } .bnuCheckoutPayment__giftCardRow { width: 100%; margin: 0; gap: var(--layout-spacing); flex-wrap: wrap; } .bnuCheckoutPayment__giftCardRow > .bnuCheckoutPayment__inlineRowToggle { flex: 0 0 auto; } .bnuCheckoutPayment__option:has([name=GiftCardActive]:checked), .bnuCheckoutPayment__option:has([name=BENUPointsActive]:checked) { border-color: var(--color-accent); } .bnuCheckoutPayment__option .checkbox__activeBg, .bnuCheckoutPayment__option .checkbox__mark { display: none; } .bnuCheckoutPayment__option .bnuCheckoutPayment__toggle { margin: 0; } .bnuCheckoutPayment__giftCardActions { display: flex; align-items: center; flex: 0 0 auto; justify-content: flex-end; gap: calc(var(--layout-spacing) * 0.75); margin-inline-start: auto; min-width: 0; } .bnuCheckoutPayment__giftCardActions[hidden] { display: none !important; } .bnuCheckoutPayment__giftCardActions > .bnuForm__col { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; } .bnuCheckoutPayment__giftCardActions > .bnuCheckoutPayment__inlineRowInput { flex: 0 0 auto; width: 240px; min-width: 160px; max-width: 280px; } .bnuCheckoutPayment__giftCardActions > .bnuCheckoutPayment__inlineRowInput .bnuInputWrap { width: 100%; } .bnuCheckoutPayment__giftCardActions > .bnuForm__col--auto { flex: 0 0 auto; } .bnuCheckoutPayment__giftCardActions--applied { flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: flex-end; margin-inline-start: auto; padding-inline-start: 0; gap: calc(var(--layout-spacing) * 0.75); min-width: 0; } @media (max-width: 768px) { .bnuCheckoutPayment__giftCardActions--applied { flex: 1 1 100%; margin-inline-start: 0; padding-inline-start: calc(var(--layout-spacing) * 2.5); } } .bnuCheckoutPayment__giftCardMeta--applied .bnuCheckoutPayment__giftCardMetaValue { color: var(--color-success); } .bnuCheckoutPayment__giftCardActions--amountStep { flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: nowrap; margin-inline-start: auto; padding-inline-start: 0; gap: calc(var(--layout-spacing) * 0.75) calc(var(--layout-spacing) * 1.25); min-width: 0; } @media (max-width: 768px) { .bnuCheckoutPayment__giftCardActions--amountStep { flex: 1 1 100%; flex-direction: column; align-items: stretch; flex-wrap: wrap; margin-inline-start: 0; padding-inline-start: calc(var(--layout-spacing) * 2.5); gap: calc(var(--layout-spacing) * 1.25); } } .bnuCheckoutPayment__giftCardMeta { display: grid; grid-template-columns: repeat(2, auto); column-gap: calc(var(--layout-spacing) * 1.5); row-gap: calc(var(--layout-spacing) * 0.25); flex: 0 1 auto; color: var(--color-text); font-size: 0.933em; line-height: 1.3; } @media (max-width: 768px) { .bnuCheckoutPayment__giftCardMeta { grid-template-columns: 1fr; width: 100%; } } .bnuCheckoutPayment__giftCardMetaItem { display: grid; grid-template-rows: auto auto; gap: calc(var(--layout-spacing) * 0.15); min-width: 0; } .bnuCheckoutPayment__giftCardMetaLabel { white-space: nowrap; } .bnuCheckoutPayment__giftCardMetaValue { font-weight: 600; white-space: nowrap; } .bnuCheckoutPayment__giftCardFields { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; flex-wrap: nowrap; gap: calc(var(--layout-spacing) * 0.75); } .bnuCheckoutPayment__giftCardFields > .bnuForm__col { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; } .bnuCheckoutPayment__giftCardFields > .bnuCheckoutPayment__inlineRowAmount, .bnuCheckoutPayment__giftCardFields > .bnuCheckoutPayment__inlineRowCvv { flex: 0 0 auto; width: 100px; max-width: 120px; } .bnuCheckoutPayment__giftCardFields > .bnuForm__col--auto { flex: 0 0 auto; } @media (max-width: 768px) { .bnuCheckoutPayment__giftCardFields { flex-direction: column; align-items: stretch; width: 100%; } .bnuCheckoutPayment__giftCardFields > .bnuForm__col, .bnuCheckoutPayment__giftCardFields > .bnuCheckoutPayment__inlineRowAmount, .bnuCheckoutPayment__giftCardFields > .bnuCheckoutPayment__inlineRowCvv, .bnuCheckoutPayment__giftCardFields > .bnuForm__col--auto { flex: 1 1 100%; width: 100%; max-width: none; } .bnuCheckoutPayment__giftCardFields .bnuInputWrap { width: 100%; } .bnuCheckoutPayment__giftCardFields > .bnuForm__col--auto .bnuButton { width: 100%; } } .bnuCheckoutPayment__option .bnuCheckoutPayment__toggle.bnuChoiceWrap { position: static; } .bnuCheckoutPayment__option .bnuCheckoutPayment__giftCardRow .bnuCheckoutPayment__toggle .bnuChoiceWrap__label, .bnuCheckoutPayment__option .bnuCheckoutPayment__toggle .bnuChoiceWrap__label { display: inline-flex; align-items: center; min-height: 20px; position: static; padding-inline-start: calc(var(--bnuPayment-option-label-inset) - var(--bnuPayment-option-padding-inline)); font-weight: 500; line-height: 1.5; cursor: pointer; } .bnuCheckoutPayment__option .bnuCheckoutPayment__giftCardRow .bnuCheckoutPayment__toggle .bnuChoiceWrap__label { white-space: nowrap; } .bnuCheckoutPayment__option .bnuCheckoutPayment__toggle .bnuChoiceWrap__label .bnuChoice { position: absolute; top: var(--bnuPayment-option-control-inset); left: var(--bnuPayment-option-control-inset); opacity: 1; margin: 2px; width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; } .bnuCheckoutPayment__inlineRow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--layout-spacing); } .bnuCheckoutPayment__inlineRow > .bnuForm__col { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } .bnuCheckoutPayment__inlineRow > .bnuForm__col--auto { flex: 0 0 auto; } .bnuCheckoutPayment__inlineRowMeta { flex: 1 1 auto; color: var(--color-text); font-size: 0.933em; line-height: 1.4; white-space: nowrap; } .bnuCheckoutPayment__inlineRowMeta span + span { margin-inline-start: calc(var(--layout-spacing) * 1.5); } .bnuCheckoutPayment__inlineRowInput { flex: 1 1 0; min-width: 140px; } .bnuCheckoutPayment__inlineRowAmount, .bnuCheckoutPayment__inlineRowCvv { flex: 0 0 100px; max-width: 120px; } .bnuCheckoutPayment__inputWrap { margin: 0; } .bnuCheckoutPayment__giftCardErrors { margin-top: var(--layout-spacing); width: 100%; } .bnuCheckoutPayment__giftCardRow .bnuCheckoutPayment__giftCardApplied { flex: 0 1 auto; width: auto; min-width: 0; max-width: none; margin-bottom: 0; } .bnuCheckoutPayment__giftCardApplied p { margin: 0; } .bnuCheckoutPayment__giftCardApplied i { margin-right: calc(var(--layout-spacing) * 0.35); color: var(--color-success); } .bnuCheckoutForm__buyer { width: 100%; } #bnuBilling .bnuSectionBorder { display: block; margin: 0 0 var(--layout-spacing); padding: calc(var(--layout-spacing) * 3); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); } @media (max-width: 768px) { #bnuBilling .bnuSectionBorder { padding: calc(var(--layout-spacing) * 2.5); } } .bnuCheckoutDelivery__section { display: block; margin: 0 0 var(--layout-spacing); border: none; padding: 0; background: none; } .bnuCheckoutDelivery__section > legend { display: none; } .bnuCheckoutDelivery__package { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); align-items: center; justify-content: space-between; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .bnuCheckoutDelivery__package { align-items: flex-start; flex-direction: column; } } .bnuCheckoutDelivery__packageBody { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); align-items: flex-start; min-width: 0; flex: 1 1 auto; } .bnuCheckoutDelivery__packageThumb { flex: 0 0 auto; } .bnuCheckoutDelivery__packageThumb img { display: block; border-radius: var(--border-radius-small); width: 60px; height: 60px; object-fit: cover; } .bnuCheckoutDelivery__packagePrice { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } .bnuCheckoutDelivery__package .bnuChoiceWrap__after p { margin: calc(var(--layout-spacing) * 0.5) 0 0; color: var(--color-text-muted, inherit); font-size: 13px; line-height: 1.4; } .bnuCheckoutForm__requiredHeader { display: flex; justify-content: flex-end; margin-bottom: var(--layout-spacing); width: 100%; } .bnuCheckoutForm__requiredNote { float: none; margin: 0; text-align: right; } .bnuCheckoutForm__account, .bnuCheckoutForm__comments { width: 100%; } .bnuCheckoutForm__account .bnuForm__col, .bnuCheckoutForm__comments .bnuForm__col { width: 100%; } .bnuCheckoutForm__fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--layout-column-gap); row-gap: var(--row-gap); align-items: end; } @media (max-width: 768px) { .bnuCheckoutForm__fields { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--layout-column-gap); } } .bnuCheckoutForm__field { grid-column: span 6; width: 100%; max-width: none; order: 50; } .bnuCheckoutForm__field--companyName, .bnuCheckoutForm__field--birthDate, .bnuCheckoutForm__field--differentDeliveryAddress { grid-column: span 12; } .bnuCheckoutForm__field--companyName { order: 5; } .bnuCheckoutForm__field--companyCode, .bnuCheckoutForm__field--vatCode { order: 6; } .bnuCheckoutForm__field--firstName, .bnuCheckoutForm__field--lastName, .bnuCheckoutForm__field--delivery_firstName, .bnuCheckoutForm__field--delivery_lastName { order: 10; } .bnuCheckoutForm__field--address, .bnuCheckoutForm__field--houseNo, .bnuCheckoutForm__field--flatNo, .bnuCheckoutForm__field--delivery_address, .bnuCheckoutForm__field--delivery_houseNo, .bnuCheckoutForm__field--delivery_flatNo { order: 20; } .bnuCheckoutForm__field--houseNo, .bnuCheckoutForm__field--flatNo, .bnuCheckoutForm__field--delivery_houseNo, .bnuCheckoutForm__field--delivery_flatNo { grid-column: span 3; } .bnuCheckoutForm__field--city, .bnuCheckoutForm__field--postCode, .bnuCheckoutForm__field--delivery_city, .bnuCheckoutForm__field--delivery_postCode { order: 30; } .bnuCheckoutForm__phoneGroup { display: flex; flex-wrap: nowrap; align-items: flex-end; column-gap: calc(var(--layout-column-gap) * 1.5); grid-column: span 6; order: 40; width: 100%; min-width: 0; } @media (max-width: 768px) { .bnuCheckoutForm__phoneGroup { flex: 0 0 100%; width: 100%; max-width: 100%; } } .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix { flex: 0 0 104px; width: 104px; max-width: 104px; grid-column: auto; } @media (max-width: 768px) { .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix { flex: 0 0 96px; width: 96px; max-width: 96px; } } .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix .bnuInputWrap, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix .bnuInputWrap { width: 100%; } .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix select.bnuInput, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix .bnuInput, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix select.bnuInput, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix .bnuInput { --padding-inline: 12px; padding-inline-end: 28px; } .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phone, .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phone { flex: 1 1 0; min-width: 0; width: auto; max-width: none; grid-column: auto; } .bnuCheckoutForm__field--email, .bnuCheckoutForm__field--delivery_email { order: 40; } .bnuCheckoutForm__field--phone, .bnuCheckoutForm__field--delivery_phone { grid-column: span 5; min-width: 0; } .bnuCheckoutForm__field--birthDate { display: flex; row-gap: calc(var(--layout-spacing) * 0.5); flex-direction: column; order: 45; } @media (max-width: 768px) { .bnuCheckoutForm__fields .bnuCheckoutForm__field { flex: 0 0 100%; width: 100%; max-width: 100%; } } @media (max-width: 768px) { .bnuCheckoutForm__fields .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phonePrefix, .bnuCheckoutForm__fields .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phonePrefix { flex: 0 0 96px; width: 96px; max-width: 96px; } } @media (max-width: 768px) { .bnuCheckoutForm__fields .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--phone, .bnuCheckoutForm__fields .bnuCheckoutForm__phoneGroup > .bnuCheckoutForm__field--delivery_phone { flex: 1 1 0; width: auto; min-width: 0; max-width: none; } } .bnuCheckoutForm__field .bnuInputBirthdate { position: relative; } .bnuCheckoutForm__field .bnuInputBirthdate > .bnuInputInfoBox--error { right: 12px; left: auto; transform: translateY(50%); } .bnuCheckoutForm__addressError { width: 100%; color: var(--color-error); font-weight: 500; font-size: 13px; line-height: 16px; } .bnuCheckoutForm__addressError:empty { display: none; } .bnuCheckoutForm__addressRow { display: flex; column-gap: var(--layout-column-gap); row-gap: var(--layout-spacing); align-items: flex-start; margin-bottom: calc(var(--layout-spacing) * 1.5); } @media (max-width: 768px) { .bnuCheckoutForm__addressRow { flex-direction: column; } } .bnuCheckoutForm__diffAddress { margin-top: var(--layout-spacing); } .bnuCheckoutForm__buyer .deliveryAddressForm { display: flex; flex-direction: column; row-gap: var(--layout-spacing); } .bnuPromoCode { margin-block: calc(var(--layout-spacing) * 2); } .bnuPromoCode__header { margin-bottom: var(--layout-spacing); } .bnuPromoCode__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; } .bnuPromoCode__body { display: flex; flex-direction: column; gap: var(--layout-spacing); } .bnuPromoCode__row { align-items: center; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.75); margin: 0; } .bnuPromoCode__inputCol { flex: 1 1 280px; min-width: 160px; max-width: 420px; } .bnuPromoCode__inputWrap { width: 100%; margin: 0; } .bnuPromoCode__notice { width: 100%; } .bnuPromoCode__codes { display: flex; flex-wrap: wrap; gap: calc(var(--layout-spacing) * 0.75); margin: 0; padding: 0; list-style: none; } .bnuPromoCode__code { display: inline-flex; align-items: center; gap: calc(var(--layout-spacing) * 0.5); border-radius: var(--border-radius-small); background-color: var(--color-bg); padding: calc(var(--layout-spacing) * 0.35) calc(var(--layout-spacing) * 0.75); color: var(--color-success); font-size: 0.933rem; font-weight: 500; line-height: 1.4; cursor: pointer; } .bnuPromoCode__code--automated { cursor: default; padding-inline: calc(var(--layout-spacing) * 0.75); } .bnuPromoCode__codeLabel { white-space: nowrap; } .bnuPromoCode__codeRemove { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-border); width: 24px; height: 24px; color: var(--color-text); line-height: 1; } .bnuPromoCode__code:not(.bnuPromoCode__code--automated):hover .bnuPromoCode__codeRemove { background-color: color-mix(in oklch, var(--color-border), var(--color-text) 12%); } .bnuPromoCode__codeRemove i { font-size: 14px; } @media (max-width: 768px) { .bnuPromoCode__inputCol { flex: 1 1 100%; max-width: none; } .bnuPromoCode__row > .bnuForm__col--auto { flex: 1 1 100%; } .bnuPromoCode__row > .bnuForm__col--auto .bnuButton { width: 100%; } } .bnuOrderThankYou__title { margin: 0; color: var(--color-success); } .bnuOrderThankYou__idHeading { margin-block: calc(var(--layout-spacing) * 3) var(--layout-spacing); padding-block-end: calc(var(--layout-spacing) * 0.75); border-block-end: 1px solid var(--color-border); font-size: 1.25em; font-weight: 500; } .bnuOrderThankYou__idHeading a { color: inherit; text-decoration: none; } .bnuOrderThankYou__idHeading strong { font-weight: 700; } .bnuOrderThankYou__details { margin-block-end: calc(var(--layout-spacing) * 3); row-gap: var(--layout-row-gap); } .bnuOrderThankYou__details h3 { margin-block: 0 calc(var(--layout-spacing) * 0.5); font-size: 1em; font-weight: 500; color: var(--color-text); } .bnuOrderThankYou__details p { margin: 0; color: var(--color-text-light); } .bnuOrderThankYou__summary { margin-block: calc(var(--layout-spacing) * 3) 0; } .bnuOrderThankYou__summaryTitle { margin: 0 0 calc(var(--layout-spacing) * 2); font-size: 1.25em; font-weight: 500; } .bnuOrderThankYou__summaryHeading { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 5rem 6.5rem; column-gap: var(--layout-spacing); padding: 0 0 var(--layout-spacing) calc(72px + var(--layout-spacing)); border-bottom: 2px solid var(--color-border); color: var(--color-text-light); font-size: 14px; } @media (max-width: 768px) { .bnuOrderThankYou__summaryHeading { display: none; } } .bnuOrderThankYou__summaryHeading span:last-child { text-align: right; } .bnuOrderThankYou__items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .bnuOrderThankYou__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 6.5rem 5rem 6.5rem; column-gap: var(--layout-spacing); align-items: start; padding: calc(var(--layout-spacing) * 1.5) 0; border-bottom: 1px solid var(--color-border); } @media (max-width: 768px) { .bnuOrderThankYou__item { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--layout-spacing); } } .bnuOrderThankYou__itemImage { width: 72px; max-width: 100%; min-width: 0; } @media (max-width: 768px) { .bnuOrderThankYou__itemImage { width: 64px; } } .bnuOrderThankYou__itemImage img { display: block; object-fit: contain; width: 100%; height: auto; aspect-ratio: 1/1; } .bnuOrderThankYou__itemTitle { min-width: 0; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; } .bnuOrderThankYou__itemMobileMeta { display: none; margin-top: calc(var(--layout-spacing) * 0.5); color: var(--color-text-light); font-size: 14px; font-weight: 400; } @media (max-width: 768px) { .bnuOrderThankYou__itemMobileMeta { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); justify-content: space-between; } } .bnuOrderThankYou__itemPrice, .bnuOrderThankYou__itemQnt, .bnuOrderThankYou__itemSum { min-width: 0; } @media (max-width: 768px) { .bnuOrderThankYou__itemPrice, .bnuOrderThankYou__itemQnt, .bnuOrderThankYou__itemSum { display: none; } } .bnuOrderThankYou__itemSum { text-align: right; } .bnuOrderThankYou__oldPrice { display: block; color: var(--color-text-light); font-size: 0.933em; text-decoration: line-through; } .bnuOrderThankYou__price { color: var(--color-text); font-weight: 500; } .bnuOrderThankYou__totals { display: flex; flex-direction: column; gap: calc(var(--layout-spacing) * 0.75); margin: calc(var(--layout-spacing) * 2) 0 0; } .bnuOrderThankYou__totalLine { display: flex; flex-wrap: wrap; gap: var(--layout-spacing); justify-content: space-between; align-items: baseline; margin: 0; } .bnuOrderThankYou__totalLine dt, .bnuOrderThankYou__totalLine dd { margin: 0; } .bnuOrderThankYou__totalLine dd { font-weight: 500; white-space: nowrap; } .bnuOrderThankYou__totalLine--grand { margin-top: var(--layout-spacing); padding-top: var(--layout-spacing); border-top: 1px solid var(--color-border); font-size: 1.067em; font-weight: 700; } .bnuOrderThankYou__banners { margin-block-start: var(--layout-spacing); } .isDev .bnContainer, .isDev .bnButton { outline: 2px dashed rgba(255, 0, 0, 0.5); outline-offset: 2px; } .isDev .lazy-load-picture { outline: 2px dashed rgba(255, 0, 0, 0.5); outline-offset: 2px; } .isDev .lazy-load-picture::before { content: "OLD LAZY LOAD"; color: white; font-weight: 700; position: absolute; top: 0; left: 0; z-index: 999999999; display: block !important; background: red; padding: 5px; } .isDev .keen-slider { outline: 2px dashed rgba(255, 0, 0, 0.5); outline-offset: 2px; } .isDev .keen-slider::before { content: "KEEN SLIDER"; color: white; font-weight: 700; position: absolute; top: 0; left: 0; z-index: 999999999; display: block !important; background: red; padding: 5px; } .cells-per-line-1 { grid-template-columns: repeat(1, 1fr); } .swiper-slide-height-auto .swiper-slide { height: auto; } button.bnuButton.bnuButton--nav.swiper-button-lock { display: none; } a.bnuButton.bnuButton--secondaryLight.bnuBackground-white:not(:hover) { background-color: #fff; } .bnuCarousel ~ .bnuCarouselNav .bnuButton--nav::after { height: 100%; } @media (min-width: 768px) { .bnuSectionBorder, .bnuSectionBorder.bnSection--bg, .bnuSectionBorder.section--blueBg { border: 1px solid rgb(197, 204, 219); border-radius: var(--border-radius); } } .bnuSectionBorder .customSelectVisible { border: 1px solid rgb(197, 204, 219); border-radius: var(--border-radius); } #bnuBilling .bnuSectionBorder { border: 1px solid rgb(197, 204, 219); border-radius: var(--border-radius); } .bnuResetProductsPadding > .products { padding: 0; } .bnuContainer .col--lg-only { display: none; } .bnuContainer .row--justify-start { justify-content: flex-start; } .bnuContainer .row--justify-end { justify-content: flex-end; } .bnuContainer .row--justify-center { justify-content: center; } .bnuContainer .row--justify-around { justify-content: space-around; } .bnuContainer .row--justify-between { justify-content: space-between; } .bnuContainer .row--justify-evenly { justify-content: space-evenly; } .bnuContainer .row--align-start { align-items: flex-start; } .bnuContainer .row--align-center { align-items: center; } .bnuContainer .row--align-end { align-items: flex-end; } .bnuContainer .row--align-baseline { align-items: baseline; } .scrolled body, .scrolled.sliderBannerTopVisible body { padding-top: 0 !important; } .block-heroBanner { left: 0; } .chainPage .bnuContainer .chainWrap.fullWidth .chainLink:not(.block-carouselInner, .block-productsCarousel2, .block-bnr-33x3, .block-bnr-33-66, .block-bnr-50x2, .block-bnr-100, .block-loyaltyCard, .block-heroSection) { padding-left: 0; padding-right: 0; } .chainPage .bnuContainer .chainWrap.fullWidth .block-heroSection { padding-left: 0; padding-right: 0; } #mobileMenuCats, #mobileMenu { background: #fff; } .bnuQASearch { position: relative; bottom: initial; left: initial; order: initial; width: 100%; z-index: 1; flex-grow: 0; margin-bottom: var(--layout-spacing); } @media (max-width: 1024px) { .bnuQASearch { margin-bottom: calc(var(--layout-spacing) * 2); } } .bnuPageContent p, .bnuPageContent strong, .bnuPageContent i, .bnuPageContent em, .bnuPageContent u { color: var(--color-text); } .bnuPageContent .bnuQuote blockquote, .bnuPageContent .bnuQuote p, .bnuPageContent .bnuQuote strong, .bnuPageContent .bnuQuote i, .bnuPageContent .bnuQuote em, .bnuPageContent .bnuQuote u { color: var(--color-text); } .benuBadge--express i, .bnuPageContent .benuBadge--express i { color: #fff; } .sibebarWidget > h2 { font-size: 1.2rem; } .bnuContainer.bnuPageLayout.widgets { margin-top: calc(var(--layout-spacing) * 2); } @media (max-width: 768px) { .scrolled .bnSearch { padding-left: 0; } } .bnuButtonPlaceholder { width: 100%; } .markedLinks { -webkit-hyphens: auto; hyphens: auto; } .markedLinks a { color: #2D8540; text-decoration: underline; }