@charset "UTF-8";
/* ==========================================================================
   GENERAL
   ========================================================================== */
/* Imports
   -------------------------------------------------------------------------- */
@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap";
@font-face {
  font-family: 'fontello';
  src: url("/assets-fonts/fontello.woff2") format("woff2"), url("/assets-fonts/fontello.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
/* Fonts
   -------------------------------------------------------------------------- */
/* Base font
   -------------------------------------------------------------------------- */
body {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

input, select, textarea {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

/* Page header
   -------------------------------------------------------------------------- */
.header {
  background-color: #ddd;
  border-bottom-color: #000; }

/* Page footer
   -------------------------------------------------------------------------- */
.footer {
  color: #fff;
  background-color: #212121; }

.footer__credits {
  padding-top: .55em; }

.footer__links {
  padding-top: .2em; }

.footer__link {
  color: #fff; }

.footer__link:hover {
  color: #fff; }

.footer .social-icons__link {
  margin: 0 .2em;
  padding: .5em;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%; }

.footer .social-icons__link:hover {
  color: #ccc;
  border-color: #ccc; }

/* Social icons
   -------------------------------------------------------------------------- */
.social-icons__email:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__facebook:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__google-plus:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__instagram:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__twitter:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__youtube:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.social-icons__tiktok:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.shop-info__social-icons .social-icons__link i:before {
  line-height: 36px;
  font-size: 2rem; }

.footer__nav .social-icons__link i {
  display: inline-block;
  margin: 0 .1em; }

.footer__nav .social-icons__link i:before {
  font-size: 1em; }

/* Scroll up button
   -------------------------------------------------------------------------- */
.scroll-up {
  color: #fff;
  background-color: #212121;
  border-radius: 0em; }

.scroll-up__icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

/* GDPR consent
   -------------------------------------------------------------------------- */
.gdpr-consent {
  padding: 1.5rem 2rem;
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #f7f7f7;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.2); }

.gdpr-consent__title {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  margin: 1.4rem 0 1rem;
  line-height: 1.2; }

.gdpr-consent__button {
  padding: 0 1.5rem;
  height: 3.8rem;
  line-height: 3.8rem;
  color: #fff;
  font-size: 1.4rem;
  background-color: #333; }

/* NiceSelect (used as a <select> replacement)
   -------------------------------------------------------------------------- */
.nice-select {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  border: 1px solid #dbdbdb;
  border-radius: 0em; }

.nice-select .option:hover {
  color: #fff;
  background-color: #212121; }

.nice-select .option.focus {
  color: #212121;
  background-color: #212121; }

.nice-select .option.selected.focus:hover {
  color: #fff;
  background-color: #212121; }

.popup .nice-select .list {
  max-height: 300px;
  overflow: auto; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
/* Desktop navigation:
   * account pages
   * category pages (touch only)
   -------------------------------------------------------------------------- */
.category-navigation {
  background-color: #212121; }

.category-navigation__item {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc; }

.category-navigation__link:hover,
.category-navigation__item_active .category-navigation__link {
  color: #fff;
  background-color: #212121; }

.category-navigation_mobile {
  background-color: #ddd;
  border-top: 1px solid #fff; }

.category-navigation_mobile .category-navigation__item {
  color: #212121; }

.category-navigation_mobile .category-navigation__item_active {
  color: #212121;
  border-bottom: 4px solid #212121; }

.category-navigation_mobile .category-navigation__link:hover, .category-navigation__link:focus,
.category-navigation_mobile .category-navigation__item_active .category-navigation__link {
  color: #212121;
  background-color: #ddd; }

.category-navigation__favourite-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.account-navigation {
  background-color: #212121; }

.account-navigation__item {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc; }

.account-navigation__link:hover,
.account-navigation__item_active .account-navigation__link {
  color: #fff;
  background-color: #212121; }

/* Desktop navigation:
   * category pages (sidetouch only)
   -------------------------------------------------------------------------- */
.category-navigation_sidetouch {
  background-color: transparent; }

.category-navigation_sidetouch .category-navigation__item {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #777;
  font-weight: 700;
  text-transform: uppercase; }

.category-navigation_sidetouch .category-navigation__link:hover,
.category-navigation_sidetouch .category-navigation__item_active .category-navigation__link {
  color: #212121;
  background-color: transparent; }

/* Desktop navigation:
   * checkout pages
   -------------------------------------------------------------------------- */
.checkout-navigation {
  background-color: #212121; }

.checkout-navigation__item {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc; }

.checkout-navigation__item_active {
  color: #fff;
  background-color: #212121; }

.checkout-navigation__item_active:after {
  content: '';
  display: block;
  position: absolute;
  right: -19px;
  top: 0;
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent;
  border-left: 19px solid #212121;
  border-top: 25px solid transparent; }

/* Desktop: user and shop menus
   -------------------------------------------------------------------------- */
.dropdown-menu__header-link {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.dropdown-menu__header-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.dropdown-menu__header-link:hover {
  color: #fff;
  background-color: #212121; }

.dropdown-menu__body {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #efefef;
  border: 1px solid #999; }

.dropdown-menu__body-link {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

.dropdown-menu__item-link {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none; }

.dropdown-menu__item-link:hover {
  color: #fff;
  background-color: #212121;
  text-decoration: none; }

/* Mobile: off-canvas
   -------------------------------------------------------------------------- */
.off-canvas_open {
  background-color: #fff; }

/* Mobile: menu on the left (navigation)
   -------------------------------------------------------------------------- */
.burger-menu__line {
  border-top: 4px solid #212121; }

.mobile-menu__header {
  background-color: #212121; }

.mobile-menu__close-icon {
  color: #fff;
  font-size: 2.5rem; }
  .mobile-menu__close-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.mobile-menu__section_user {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #efefef; }

.mobile-menu__section {
  border-bottom: 1px solid #999; }

.mobile-menu__section-link {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #fff; }

.mobile-menu__section_unfolded .mobile-menu__section-link {
  color: #212121;
  background-color: #ddd; }

.mobile-menu__section-icon {
  -webkit-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  .mobile-menu__section-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.mobile-menu__section_unfolded .mobile-menu__section-icon {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.mobile-menu__item {
  border-top: 1px solid #efefef; }

.mobile-menu__item-link {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #fff; }

.mobile-menu__item_active .mobile-menu__item-link {
  color: #212121;
  background-color: #efefef; }

.mobile-menu__item_favourites .mobile-menu__item-link {
  overflow: hidden; }

.mobile-menu__favourite-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.mobile-menu__favourite-name {
  float: left;
  margin-right: .5rem; }

.mobile-credits {
  color: #212121;
  font-size: .86em;
  line-height: 1;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #999; }

/* Mobile: menu on the right (basket)
   -------------------------------------------------------------------------- */
.basket-menu__basket-icon {
  color: #212121; }
  .basket-menu__basket-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-menu__items {
  background-color: #fff;
  border: 2px solid #212121; }

/* Shop info.
   * desktop: displayed in a popup
   * mobile: displayed in the left menu
   -------------------------------------------------------------------------- */
.shop-info {
  background-color: #efefef; }

.shop-info__title {
  font-size: 2.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  line-height: 1.2; }

.shop-info__feature-title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.shop-info__feature-content {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.shop-info__link {
  color: #212121; }

.shop-info .social-icons__link {
  color: #fff;
  background-color: #999; }

.shop-info .social-icons__link:hover {
  color: #fff;
  background-color: #212121; }

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */
/* Page header
   -------------------------------------------------------------------------- */
.category__title {
  font-size: 2.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  text-transform: uppercase; }

.category__subcategory-title {
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.category__description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

/* Product
   -------------------------------------------------------------------------- */
.product__picture-container {
  width: 100%;
  margin: 0 auto 1rem;
  border-radius: 0;
  position: relative;
  aspect-ratio: 800/580; }

.product__picture {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.product__name {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.product__description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.product__price {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.product__sku-label {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

/* product counter */
.product_with-counter:after {
  background-color: #212121; }

.product__counter {
  color: #212121; }

/* Product zebra. Used in:
   * sidetouch categories page
   * touch & sidetouch favourites page
   -------------------------------------------------------------------------- */
.product_sidetouch {
  background-color: #fafafa; }

.product_sidetouch:nth-child(2n+1) {
  background-color: #f0f0f0; }

.product_favourites {
  background-color: #fafafa; }

.product_favourites:nth-child(2n+1) {
  background-color: #f0f0f0; }

/* Add & customise buttons
   -------------------------------------------------------------------------- */
.product__add {
  color: #fff;
  background-color: #212121;
  border: none;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
  .product__add:hover {
    color: #fff;
    background-color: #555; }

.product__customise {
  color: #fff;
  background-color: #bbb;
  border: none;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
  .product__customise:hover {
    color: #fff;
    background-color: #555; }

/* Favourite icon
   -------------------------------------------------------------------------- */
.product__favourite {
  text-decoration: none; }

.product__favourite_add .product__favourite-icon {
  color: #212121; }
  .product__favourite_add .product__favourite-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product__favourite_remove .product__favourite-icon {
  color: #212121; }
  .product__favourite_remove .product__favourite-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

/* Deal wizard
   -------------------------------------------------------------------------- */
.deal-wizard-navigation {
  background-color: transparent; }

.deal-wizard-navigation__tab {
  background-color: #ccc; }

.deal-wizard-navigation__tab:nth-child(3n),
.deal-wizard-navigation__tab:last-child {
  background-color: transparent; }

/* More accurate active tab shape*/
.deal-wizard-navigation__tab:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 0;
  width: 15px;
  height: 100%; }

.deal-wizard-navigation__tab:nth-child(3n-2):before {
  display: none; }

.deal-wizard-navigation__tab:nth-child(3n) {
  z-index: 7; }

.deal-wizard-navigation__tab:nth-child(3n-1) {
  z-index: 8; }

.deal-wizard-navigation__tab:nth-child(3n-2) {
  z-index: 9; }

.deal-wizard-navigation__tab {
  background-color: transparent; }

.deal-wizard-navigation__tab:before {
  background-color: #ccc; }

.deal-wizard-navigation__tab_active:before {
  background-color: #212121; }

.deal-wizard-navigation__link {
  font-size: 1.6rem;
  color: #000;
  background-color: #ccc; }

.deal-wizard-navigation__tab_active .deal-wizard-navigation__link {
  color: #fff;
  background-color: #212121; }

.deal-wizard-navigation__link:before {
  border-left-color: #aaa; }

.deal-wizard-navigation__link:after {
  border-left-color: #ccc; }

.deal-wizard-navigation__tab_active .deal-wizard-navigation__link:after {
  border-left-color: #212121; }

.deal-wizard-navigation__title:after {
  background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0), #ccc);
  background: linear-gradient(to right, rgba(204, 204, 204, 0), #ccc); }

.deal-wizard-navigation__tab_active .deal-wizard-navigation__title:after {
  background: -webkit-linear-gradient(left, rgba(33, 33, 33, 0), #212121);
  background: linear-gradient(to right, rgba(33, 33, 33, 0), #212121); }

/* Product tags / pictos
   -------------------------------------------------------------------------- */
.product-picto {
  display: inline-block;
  font-size: 2rem; }

.product-picto_vegan {
  color: var(--theme-tag_vegan, #000); }
  .product-picto_vegan:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_vegetarian {
  color: var(--theme-tag_vegetarian, #000); }
  .product-picto_vegetarian:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_spicy {
  color: var(--theme-tag_spicy, #000); }
  .product-picto_spicy:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_lightly-spiced {
  color: var(--theme-tag_lightly_spiced, #000); }
  .product-picto_lightly-spiced:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_moderately-spiced {
  color: var(--theme-tag_moderately_spiced, #000); }
  .product-picto_moderately-spiced:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_highly-spiced {
  color: var(--theme-tag_highly_spiced, #000); }
  .product-picto_highly-spiced:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_gluten-free {
  color: var(--theme-tag_gluten_free, #000); }
  .product-picto_gluten-free:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_organic {
  color: var(--theme-tag_organic, #000); }
  .product-picto_organic:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_porc-free {
  color: var(--theme-tag_porc_free, #000); }
  .product-picto_porc-free:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_halal {
  color: var(--theme-tag_halal, #000); }
  .product-picto_halal:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_nut-free {
  color: var(--theme-tag_nut_free, #000); }
  .product-picto_nut-free:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_lactose-free {
  color: var(--theme-tag_lactose_free, #000); }
  .product-picto_lactose-free:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_sesame {
  color: var(--theme-tag-sesame, #000); }
  .product-picto_sesame:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_soya {
  color: var(--theme-tag-soya, #000); }
  .product-picto_soya:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_nuts {
  color: var(--theme-tag-nuts, #000); }
  .product-picto_nuts:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_milk {
  color: var(--theme-tag-milk, #000); }
  .product-picto_milk:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_eggs {
  color: var(--theme-tag-eggs, #000); }
  .product-picto_eggs:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_lupin {
  color: var(--theme-tag-lupin, #000); }
  .product-picto_lupin:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_sulphites {
  color: var(--theme-tag-sulphites, #000); }
  .product-picto_sulphites:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_mustard {
  color: var(--theme-tag-mustard, #000); }
  .product-picto_mustard:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_molluscs {
  color: var(--theme-tag-molluscs, #000); }
  .product-picto_molluscs:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_crustaceans {
  color: var(--theme-tag-crustaceans, #000); }
  .product-picto_crustaceans:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_fish {
  color: var(--theme-tag-fish, #000); }
  .product-picto_fish:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_gluten {
  color: var(--theme-tag-gluten, #000); }
  .product-picto_gluten:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_celery {
  color: var(--theme-tag-celery, #000); }
  .product-picto_celery:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-picto_peanuts {
  color: var(--theme-tag-peanuts, #000); }
  .product-picto_peanuts:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.product-pictos {
  margin-top: .5rem;
  font-size: 1.8rem; }

.product-pictos .product-picto {
  margin: 0 .2rem .2rem 0; }

.product-legend {
  margin-top: 2rem; }

.product-legend__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  font-size: 0; }

.product-legend__item {
  display: inline-block;
  margin: .5rem .7rem;
  font-size: 1.4rem;
  box-sizing: border-box; }

.product-legend__item-name {
  display: inline-block;
  vertical-align: top;
  line-height: 23px;
  white-space: nowrap; }

.product-legend .product-picto {
  display: inline-block;
  vertical-align: top;
  margin-right: .2rem;
  line-height: 23px; }

/* ==========================================================================
   BASKET
   ========================================================================== */
.basket {
  border: 1px solid #212121; }

/* Basket header
   -------------------------------------------------------------------------- */
.basket__header {
  background-color: #212121; }

.basket__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff; }

.basket__repeat {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff; }

.basket__close-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

/* Basket item
   -------------------------------------------------------------------------- */
.basket__items {
  background-color: #fff; }

.basket-item__title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.basket-item__link:hover {
  color: #000; }

.basket-item__option {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #999; }

.basket-item__quantity-minus-icon {
  color: #999; }
  .basket-item__quantity-minus-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0em;
    margin-left: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-item__quantity-plus-icon {
  color: #999; }
  .basket-item__quantity-plus-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0em;
    margin-left: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-item__delete-icon {
  color: #999; }
  .basket-item__delete-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0em;
    margin-left: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-item__delete:hover .basket-item__delete-icon {
  color: #212121; }

.basket__empty {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #fff; }

/* Basket deal title
   -------------------------------------------------------------------------- */
.basket-deal__header {
  background-color: #777; }

.basket-deal__title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff; }

.basket-deal__details {
  color: #fff; }

.basket-deal__link:hover {
  color: #ccc; }

.basket-deal__delete-icon {
  color: #fff; }
  .basket-deal__delete-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0em;
    margin-left: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-deal__delete:hover .basket-deal__delete-icon {
  color: #212121; }

/* Basket deal item
   -------------------------------------------------------------------------- */
.basket-deal__items {
  background-color: #efefef; }

.basket-deal__item-title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.basket-deal__item-link:hover {
  color: #000; }

.basket-deal__item-option {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #999; }

.basket-deal__item-delete-icon {
  color: #999; }
  .basket-deal__item-delete-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0em;
    margin-left: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.basket-deal__item-delete:hover .basket-deal__item-delete-icon {
  color: #212121; }

.basket__accessory-free-items {
  background-color: #efefef; }

/* Basket accessory
   -------------------------------------------------------------------------- */
.basket__accessory-items__title {
  background-color: #777; }

.basket__accessory-free-items {
  background-color: #efefef; }

/* Delivery method switcher
   -------------------------------------------------------------------------- */
.basket__delivery_radio {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  border: 1px solid #212121;
  border-radius: 0em;
  overflow: hidden; }

.basket__delivery-method {
  background-color: #fff; }

.basket__delivery-radio:checked + .basket__delivery-method {
  color: #fff;
  background-color: #212121; }

/* Basket footer
   -------------------------------------------------------------------------- */
.basket__footer {
  color: #212121;
  background-color: #efefef; }

.basket__footer-red-message {
  color: #fff;
  background-color: #d9230b; }

.basket__error {
  color: #fff;
  background-color: #d9230b; }

.text-below-basket {
  color: #212121;
  background-color: #ffe480; }

.basket__savings {
  color: #fff;
  background-color: #efefef; }

.basket__charge-title,
.basket__charge-amount {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.basket__total-title,
.basket__total-amount {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.basket__button-link {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0px;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; }
  .basket__button-link:hover {
    color: #fff;
    background-color: #555; }

.basket__coupon {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.basket__coupon-link {
  color: #212121; }

.basket-tip__title, .basket-tip__amount {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  line-height: 20px; }
.basket-tip__button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 0 1rem;
  border-radius: 0;
  transition: background-color .2s, color .2s;
  line-height: 20px;
  font-size: 1.4rem;
  font-weight: 400; }
  .basket-tip__button:hover {
    color: #fff;
    background-color: #555; }

.mobile-basket-button__nb-items {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; }

.mobile-basket-button__icon {
  border-bottom-color: #fff; }

.mobile-basket-button__icon:after {
  border-left-color: #fff; }

.mobile-basket-button__link {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0px;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; }
  .mobile-basket-button__link:hover {
    color: #fff;
    background-color: #555; }

/* Basket clickable promotions
   -------------------------------------------------------------------------- */
.basket__clickable-promotions {
  margin: 1rem -0.5rem 0;
  font-size: 0; }

.clickable-promotion {
  display: inline-block;
  vertical-align: top;
  padding: 1rem 0.5rem 0;
  width: 50%;
  box-sizing: border-box; }

.clickable-promotion__form {
  display: block; }

.clickable-promotion__link {
  display: block;
  text-decoration: none; }

.clickable-promotion__image {
  display: block;
  width: 100%;
  border: none; }

@media screen and (max-width: 52.5em) {
  .basket__clickable-promotions {
    margin: 1rem .8rem 0; } }
/* ==========================================================================
   CUSTOMIZATION POPUP
   ========================================================================== */
.popup {
  border-radius: 0px; }

.popup__description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.popup__close-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.popup__title,
.popup__price {
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.popup_improved.popup_scrolled .popup__title {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

.popup_improved .popup__title-mobile-close {
  padding-top: .3rem; }

.popup_improved .popup__title-mobile-close-icon {
  font-size: 2.5rem; }
  .popup_improved .popup__title-mobile-close-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

/* Popup group
   -------------------------------------------------------------------------- */
.popup-group__quantity-field {
  font-size: 1.6rem; }

.popup-group__quantity-minus-icon {
  margin-right: .7em; }
  .popup-group__quantity-minus-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.popup-group__quantity-plus-icon {
  margin-left: .7em; }
  .popup-group__quantity-plus-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

.popup-group__label,
.popup-group__single-choice {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  line-height: 32px; }

/* Popup row
   -------------------------------------------------------------------------- */
.popup-row + .popup-row {
  border-top: 1px solid #ccc; }

.popup-row__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.popup-row__description {
  color: #777; }

/* Popup enum
   -------------------------------------------------------------------------- */
.popup-enum__text {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  color: #212121;
  background-color: #ddd; }

.popup-enum__radio:checked + .popup-enum__text {
  color: #fff;
  background-color: #000; }

.popup-enum__radio:disabled + .popup-enum__text {
  color: #999;
  background-color: #eee; }

/* Popup set
   -------------------------------------------------------------------------- */
.popup-set__group-title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #777;
  font-weight: 700; }

.popup-set__title {
  color: #212121; }

.popup-set__text {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.popup-set__text:before,
.popup-set__option[data-double] .popup-set__label:before {
  border-color: #212121;
  background-color: #fff; }

.popup-set__text:after,
.popup-set__option[data-double] .popup-set__label .popup-set__phantom:after {
  background-color: #212121; }

/* Popup deal line
   -------------------------------------------------------------------------- */
.popup-deal-line__label {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.popup-deal-line__description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.popup-deal-line__single-option {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

/* Popup buttons
   -------------------------------------------------------------------------- */
.popup-buttons__button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
  .popup-buttons__button:hover {
    color: #fff;
    background-color: #555; }

.popup-buttons__button:hover {
  background-color: #555; }

.popup-buttons_improved .popup-buttons__button {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; }

.popup-buttons__link {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.popup-buttons__link:hover {
  color: #000; }

/* ==========================================================================
   CHECKOUT, ACCOUNT & ORDER PAGES
   ========================================================================== */
.checkout__title,
.credit-page__title {
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.checkout-row__label,
.checkout-row__group-label,
.checkout-variant__label,
.checkout-variant__select-label,
.card-entry__label,
.card-entry__saved-card-label {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.checkout-variant__helper,
.checkout-row__field-text,
.checkout-row__field-textarea,
.checkout__description,
.checkout-row__group,
.card-entry__instructions,
.card-entry__cvcode-label {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.checkout-row__field-text[disabled],
.checkout-row__field-textarea[disabled] {
  border-color: rgba(33, 33, 33, 0.36); }

.checkout-row__group_emphisized {
  padding: 1rem;
  color: #000;
  background-color: #f9eeba; }

.checkout-row__group-item_description {
  line-height: 1.3; }

/* Form buttons
   Contain a button on the right and a cancel link on the left.
   -------------------------------------------------------------------------- */
.form-buttons__button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
  .form-buttons__button:hover {
    color: #fff;
    background-color: #555; }

.form-buttons__link {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.form-buttons__link:hover {
  color: #000; }

/* Switcher buttons as radio buttons
   -------------------------------------------------------------------------- */
.switcher-btns {
  margin-top: 1rem;
  display: flex; }

.switcher-btn,
.switcher-btn_active {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #212121;
  cursor: default;
  text-decoration: none; }
  .switcher-btn:hover,
  .switcher-btn_active:hover {
    color: #fff;
    background-color: #212121; }

.switcher-btn:not(.switcher-btn_active) {
  color: #212121;
  background-color: inherit;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  border: 1px solid #212121;
  cursor: pointer; }
  .switcher-btn:not(.switcher-btn_active):hover {
    color: #fff;
    background-color: #555; }

.switcher-btn + .switcher-btn {
  border-left: 0px; }

@media screen and (max-width: 40em) {
  .switcher-btns {
    flex-wrap: wrap; }

  .switcher-btn {
    width: 100%; }

  .switcher-btn + .switcher-btn {
    border-left: 1px solid #212121;
    border-top: 0px; } }
/* Loyalty (step4)
   -------------------------------------------------------------------------- */
.checkout-loyalty__balance {
  font-size: 2rem; }

/* Checkout confirmation page (step5)
   -------------------------------------------------------------------------- */
.checkout-confirm__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.checkout-confirm__content {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.checkout-terms-acceptance_error {
  color: #fff;
  background-color: #d9230b; }

/* Checkout upselling
   -------------------------------------------------------------------------- */
.category_upselling .category__title {
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

/* Facebook login
   -------------------------------------------------------------------------- */
.checkout__facebook-login-button {
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

.checkout__facebook-login-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.checkout__facebook-login-separator {
  margin-top: 1em;
  text-align: center;
  position: relative; }

.checkout__facebook-login-separator:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
  height: 0;
  width: 100%;
  border-top: 1px solid #212121; }

.checkout__facebook-login-separator-text {
  display: inline-block;
  position: relative;
  padding: 0 .5em;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  background-color: #fff; }

/* User registration error (invalid/empty fields)
   -------------------------------------------------------------------------- */
.checkout-error {
  color: #fff;
  background-color: #900; }

/* Account referral program
   -------------------------------------------------------------------------- */
.checkout__referral-program-rules {
  font-size: 1.275rem; }

.checkout__referral-link {
  margin: 1rem 0;
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  min-width: 15rem;
  text-align: center; }
  .checkout__referral-link:hover {
    color: #fff;
    background-color: #555; }

.checkout__referral-link span[data-copied] {
  padding: 1rem 0;
  color: #212121; }

/* Order page
   -------------------------------------------------------------------------- */
.order-table__header {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  background-color: #0a0a0a; }

.order-row:nth-child(even) .order-row__header {
  color: #000;
  background-color: #f4f5f6; }

.order-row__header {
  color: #000;
  font-size: 1.2rem;
  background-color: #fcfcfc;
  border-top: 3px solid #fff; }

.order-row__header:hover {
  color: #000 !important;
  background-color: #ebebeb !important;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }

.order-row__order {
  border-top: 3px solid #fff; }

.order {
  color: #000;
  font-size: 1.2rem;
  background-color: #f4f5f6; }

.order__group-title {
  font-size: 1.2rem;
  font-weight: 600; }

.order__add {
  padding-right: 0; }

.order__add-button, .order__repeat-button {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 1.2;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .order__add-button:hover, .order__repeat-button:hover {
    color: #fff;
    background-color: #555; }

.order__repeat-empty-basket {
  line-height: 2.4rem; }

.order__items-container {
  border-top-color: #a2a2a2; }

.order__items-table {
  color: #000;
  font-size: 1.2rem;
  background-color: #f4f5f6;
  border: none; }

.order__items-deal {
  color: #000;
  background-color: #ebedef; }

.order__items-deal-title {
  color: #000;
  background-color: #c7cbd2; }

.order__items-footer {
  border-top-color: #a2a2a2;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase; }

.order__total {
  border-top-color: #a2a2a2; }

/* Credit
   -------------------------------------------------------------------------- */
.credit-page__main {
  color: #0a0a0a;
  background-color: #f4f5f6; }

.credit-page__status__balance {
  font-size: 2rem;
  font-weight: 400; }

.credit-page__status__balance-amount {
  font-size: 2.4rem;
  margin-top: .5rem; }

.credit-page__status__rules {
  font-size: 1.4rem;
  line-height: 1.4; }

.credit-page__form__teaser {
  font-size: 1.6rem;
  color: #3f3e3e;
  font-weight: 700; }

.credit-page__form__input {
  border: 1px solid #ddd;
  background-color: #fff; }

.credit-page__form__button {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 700;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .credit-page__form__button:hover {
    color: #fff;
    background-color: #555; }

.credit-table__header {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  background-color: #0a0a0a; }

.credit-table__row {
  background-color: #fcfcfc; }

.credit-table__row:nth-child(odd) {
  background-color: #f4f5f6; }

.credit-table__row:hover {
  background-color: #ebebeb; }

.credit-table td {
  font-size: 1.2rem;
  color: #000; }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
/* Transient information message displayed at the top
   Eg. when a product has just been added
   -------------------------------------------------------------------------- */
.message_info {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background-color: #555;
  opacity: 0.9; }

.message_info a,
.message_info a:hover {
  color: #fff; }

@media screen and (max-width: 52.5em) {
  .page_menu.page_improved .message_info {
    bottom: auto;
    top: 0;
    text-align: center;
    background-color: transparent; }
  .page_menu.page_improved .message_info .message__wrapper {
    display: inline-block;
    background-color: #555; } }
/* Important (warning/error) message displayed at the top
   Eg. someone tries to access /account without being logged in
   -------------------------------------------------------------------------- */
.message_error {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background-color: #d9230b;
  opacity: 1; }

.message_error a,
.message_error a:hover {
  color: #fff; }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
.content_index {
  margin-top: 0; }

.content_index .content__wrapper {
  width: 100%;
  max-width: none; }

/* Homepage: slideshow at the top
   -------------------------------------------------------------------------- */
.slider {
  margin-bottom: 3rem; }

.slider__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  width: 100%; }
  .slider__wrapper:before {
    display: table;
    content: ""; }
  .slider__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.unslider-nav ol li {
  background-color: #000;
  border: 2px solid #fff; }

.unslider-nav ol li.unslider-active {
  background-color: #fff;
  border-color: #fff; }

.category-navigation__order-button {
  float: right;
  margin: 6px 0 6px 5px;
  height: 40px;
  line-height: 40px;
  color: #000;
  background-color: #fff;
  border: none;
  padding: 0 2em;
  border-radius: 0em;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .category-navigation__order-button:hover {
    color: #fff;
    background-color: #555; }

.index-slideshow-links__link {
  display: inline-block;
  min-width: 200px;
  margin: .5em .3em;
  box-sizing: border-box;
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .index-slideshow-links__link:hover {
    color: #fff;
    background-color: #555; }

.index-slideshow-links__link:hover {
  color: #000;
  background-color: #fff; }

@media screen and (max-width: 52.5em) {
  .index-slideshow-links__link {
    border: 1px solid #212121; }

  .index-slideshow-links {
    position: static;
    margin-top: 1em; } }
/* Homepage: shop picker above the slideshow
   -------------------------------------------------------------------------- */
.index-locator {
  color: #000;
  background-color: #ddd; }

@media screen and (max-width: 52.5em) {
  .index-locator__wrapper {
    padding-bottom: 2rem; } }
.index-locator__title {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  background-color: #686868; }

.index-locator__method {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #191919;
  font-weight: 600;
  text-transform: uppercase; }

.index-locator__method-name {
  background-color: #b6b6b6; }

.index-locator__method input[type=radio]:checked + span {
  color: #fff;
  background-color: #191919; }

.index-locator__postcode-input {
  font-size: 1.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400;
  border: 1px solid #c6c6c6; }

.index-locator__postcode-button {
  color: #fff;
  background-color: #000;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .index-locator__postcode-button:hover {
    color: #fff;
    background-color: #555; }

.index-locator__postcode-warning {
  color: #191919;
  font-size: 1.3rem; }

.index-locator__text {
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400; }

.index-locator__postcode-selected {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase; }

.index-locator__postcode-link {
  color: #000;
  font-weight: 400; }

.index-locator-restaurant {
  color: #000;
  font-size: 1.4rem;
  border-top: 1px solid #000; }

.index-locator-restaurant__name {
  font-size: 1.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  line-height: 1; }

.index-locator-restaurant__phone {
  font-size: 1.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  line-height: 1; }

.index-locator-restaurant__phone a {
  color: #000;
  text-decoration: none; }

.index-locator-restaurant__button {
  color: #fff;
  background-color: #000;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .index-locator-restaurant__button:hover {
    color: #fff;
    background-color: #555; }

/* Homepage: connected customer
   -------------------------------------------------------------------------- */
.index-connected-customer {
  margin: 2rem 0; }

.index-connected-customer__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .index-connected-customer__wrapper:before {
    display: table;
    content: ""; }
  .index-connected-customer__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-connected-customer__item {
  padding: 1.5rem 2rem;
  text-align: center;
  color: #000;
  background-color: #ddd; }

.index-connected-customer__title {
  margin-bottom: .5em;
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1; }

.index-connected-customer__content {
  min-height: 3.6rem; }

.index-connected-customer__buttons {
  margin-top: 2rem; }

.index-connected-customer__button {
  display: inline-block;
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0;
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .index-connected-customer__button:hover {
    color: #fff;
    background-color: #555; }

.index-connected-customer__item:first-of-type {
  color: #fff;
  text-align: left;
  background-color: #474747; }

.index-connected-customer__item:first-of-type .index-connected-customer__title {
  color: #fff; }

.index-connected-customer__item:first-of-type .index-connected-customer__button {
  min-width: 35%;
  text-align: center;
  padding: 1rem .5rem; }

.index-connected-customer__item:first-of-type .index-connected-customer__button_other {
  margin-left: 1rem;
  background-color: #fff;
  color: #000; }

.index-connected-customer__item:first-of-type .index-connected-customer__button_other:hover {
  color: #fff;
  background-color: #555; }

@media screen and (max-width: 52.5em) {
  .index-connected-customer__content {
    min-height: 0; } }
/* Homepage: microblog - a series of short blocks (image + text)
   -------------------------------------------------------------------------- */
.index-microblog {
  margin-bottom: 5rem; }

.index-microblog__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .index-microblog__wrapper:before {
    display: table;
    content: ""; }
  .index-microblog__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-microblog__post {
  color: #000;
  background-color: #ddd;
  position: relative; }

.index-microblog__title {
  font-size: 2.1rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: .5rem;
  line-height: 1.2; }

.index-microblog__content {
  line-height: 1.5; }

.index-microblog__content p + p {
  margin-top: 1rem; }

.index-microblog__spacer {
  height: 4rem; }

.index-microblog__footer {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  left: 2rem; }

.index-microblog__link {
  display: inline-block;
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0em;
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .index-microblog__link:hover {
    color: #fff;
    background-color: #555; }

/* Homepage: microblog - FD version
   -------------------------------------------------------------------------- */
/* INFO: Can be styled just by variables set, just use the variables which you want from root microblog file */
.lp-index-microblog {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; }

/* Homepage: Follow Us (Instagram feed) - FD version
   -------------------------------------------------------------------------- */
/* INFO: Can be styled just by variables set, just use the variables which you want from root microblog file */
.lp-follow-us {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; }

/* Homepage: About us
   -------------------------------------------------------------------------- */
.index-about {
  margin-bottom: 5rem;
  color: #000; }

.index-about__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  padding: 3rem 5%;
  font-size: 1.8rem;
  text-align: center;
  background-color: #ddd;
  box-sizing: border-box; }
  .index-about__wrapper:before {
    display: table;
    content: ""; }
  .index-about__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-about__title {
  margin-bottom: 2rem;
  font-size: 3.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase; }

@media screen and (max-width: 40em) {
  .index-about__title {
    font-size: 2.5rem; } }
/* Homepage: newsletter signup form
   -------------------------------------------------------------------------- */
.index-newsletter {
  margin-bottom: 5rem;
  padding: 2rem 1rem;
  color: #fff;
  background-color: #474747; }

.index-newsletter__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .index-newsletter__wrapper:before {
    display: table;
    content: ""; }
  .index-newsletter__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-newsletter__title {
  font-size: 1.9rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  margin-left: -300px;
  line-height: 36px; }

.index-newsletter__fieldset {
  padding: 0 120px 0 300px; }

.index-newsletter__field {
  border: 1px solid #c6c6c6;
  height: 36px;
  line-height: 36px; }

.index-newsletter__button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 0;
  border-radius: 0em;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease;
  margin-right: -120px;
  width: 115px;
  height: 36px;
  line-height: 36px; }
  .index-newsletter__button:hover {
    color: #fff;
    background-color: #555; }

/* Homepage: map showing the position of the restaurant
   -------------------------------------------------------------------------- */
.index-map__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .index-map__wrapper:before {
    display: table;
    content: ""; }
  .index-map__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-map__shop {
  width: 350px;
  background-color: #fff;
  border: 1px solid #c6c6c6; }

.index-map__shop-title {
  margin-bottom: .5em;
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1; }

.index-map__shop-phone {
  margin: .5em 0;
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600; }

.index-map__shop-phone a {
  color: #000; }

.index-map__shop .social-icons__link {
  border: 1px solid #000; }

.index-map__order-button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 0.7em 0;
  border-radius: 0em;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease;
  display: block;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box; }
  .index-map__order-button:hover {
    color: #fff;
    background-color: #555; }

.index-map__embed-image {
  left: 50%;
  top: 10%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

@media screen and (max-width: 40em) {
  .index-map__embed-image {
    -ms-transform: translate(-60%, -40%);
    -webkit-transform: translate(-60%, -40%);
    transform: translate(-60%, -40%); } }
/* Homepage: list of restaurants (franchises only)
   -------------------------------------------------------------------------- */
.index-shop-list {
  margin: 4rem 0 1rem; }

.index-shop-list__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .index-shop-list__wrapper:before {
    display: table;
    content: ""; }
  .index-shop-list__wrapper:after {
    display: table;
    content: "";
    clear: both; }

.index-shop-list__header {
  margin-bottom: 3rem;
  text-align: center; }

.index-shop-list__title {
  font-size: 3.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase; }

.index-shop-list__filter {
  display: inline-block; }

.index-shop-list__shop {
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center; }

.index-shop-list__shop-title {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2; }

@media screen and (max-width: 52.5em) {
  .index-shop-list {
    margin: 2rem 0 0; }

  .index-shop-list__header {
    margin-bottom: 2rem; } }
@media screen and (max-width: 40em) {
  .index-shop-list__title {
    font-size: 2.5rem; } }
/* ==========================================================================
   SPECIAL FEATURES
   ========================================================================== */
/* --------------------------------------------------------------------------
   SKU BUTTONS
   (optional feature, available on touch but NOT on sidetouch)
   --------------------------------------------------------------------------
   Shows product sizes (skus) as buttons instead of selects.
   To activate, create a 'size_buttons' tag and set it on the chosen products/categories
   -------------------------------------------------------------------------- */
.sku-buttons {
  border-radius: 0em; }

.sku-buttons__text {
  color: #212121;
  background-color: #ddd;
  border-left: 1px solid #fff; }

.sku-buttons__radio:checked + .sku-buttons__text {
  color: #fff;
  background-color: #212121; }

.sku-buttons__radio:disabled + .sku-buttons__text {
  color: #aaa;
  background-color: #ddd; }

.sku-buttons-summary__name {
  color: #555; }

.sku-buttons-summary__value {
  color: #212121; }

.sku-buttons-summary__icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

/* --------------------------------------------------------------------------
   GROUPED SKUS
   (optional feature)
   --------------------------------------------------------------------------
   Group size selection at the top of the page (instead of for every product).
   To activate, create a 'size_group' tag and set it on one or several main (topmost) categories.
   -------------------------------------------------------------------------- */
.grouped-skus__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.grouped-skus__list {
  border-radius: 0em; }

.grouped-skus__text {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  background-color: #ddd;
  border-left: 1px solid #fff; }

.grouped-skus__item:first-child .grouped-skus__text {
  border-left: none; }

.grouped-skus__radio:checked + .grouped-skus__text {
  color: #fff;
  background-color: #212121; }

.grouped-skus__radio:disabled + .grouped-skus__text {
  color: #aaa;
  background-color: #ddd; }

/* --------------------------------------------------------------------------
   CYO
   (optional page)
   --------------------------------------------------------------------------
   Makes a product editable in its own page instead of a popup.
   To activate, create a 'cyo' tag in theme.xml and set this tag on the product.
   -------------------------------------------------------------------------- */
.cyo__add-button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
  .cyo__add-button:hover {
    color: #fff;
    background-color: #555; }

.cyo__fieldset-title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700; }

.cyo__fieldset-description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.cyo-enum__text {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  color: #212121;
  background-color: #ddd; }

.cyo-enum__radio:checked + .cyo-enum__text {
  color: #fff;
  background-color: #000; }

.cyo-enum__radio:disabled + .cyo-enum__text {
  color: #999;
  background-color: #eee; }

.cyo-set__label input[type=checkbox]:checked + .cyo-set__text:after {
  display: block;
  background-color: #000; }

.cyo-set__group-title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #777;
  font-weight: 700; }

.cyo-set__text {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121; }

.cyo-set__text:before {
  border-color: #212121;
  background-color: #fff; }

.cyo-set__text:after {
  color: #fff;
  background-color: #212121; }

.cyo-icon-enum__text:before {
  width: 65px;
  height: 68px;
  background: url("/assets-images/7df94bc90e222bed816f9cd97b474d58-cyo_sizes.png") no-repeat; }

.cyo-icon-enum__text_small:before {
  background-position: 10px 0; }

.cyo-icon-enum__text_medium:before {
  background-position: -73px 0; }

.cyo-icon-enum__text_large:before {
  background-position: -167px 0; }

/* --------------------------------------------------------------------------
   LOCATOR
   (optional page)
   --------------------------------------------------------------------------
   Page which lets the user pick a restaurant based on his address.
   Functionality is similar to index shop picker, but on its own page.
   -------------------------------------------------------------------------- */
.locator {
  color: #212121;
  background-color: #efefef; }

.locator__title {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2; }

.locator__methods {
  border: 1px solid #212121; }

.locator__method {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #191919;
  font-weight: 600;
  text-transform: uppercase; }

.locator__method-name {
  background-color: #fff;
  height: 40px;
  line-height: 40px; }

.locator__method input[type=radio]:checked + span {
  color: #fff;
  background-color: #212121; }

.locator__postcode-input-wrapper {
  padding-right: 70px; }

.locator__postcode-input {
  font-size: 1.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  border: 1px solid #c6c6c6;
  float: left;
  width: 100%;
  box-sizing: border-box; }

.locator__postcode-input::-webkit-input-placeholder {
  color: #959598;
  font-size: 1.5rem; }

.locator__postcode-input::-moz-placeholder {
  color: #959598;
  font-size: 1.5rem; }

.locator__postcode-input:-ms-input-placeholder {
  color: #959598;
  font-size: 1.5rem; }

.locator__postcode-input[data-locator-error] {
  background-color: #fbd6d2; }

.locator__postcode-button {
  color: #fff;
  background-color: #000;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  float: left;
  margin-right: -70px;
  width: 70px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .locator__postcode-button:hover {
    color: #fff;
    background-color: #555; }

.locator-search {
  width: 100%; }
  .locator-search__input {
    font-size: 1.7rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-weight: 400;
    height: 4rem;
    line-height: 4rem;
    border: 1px solid #c6c6c6;
    width: 100%;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem; }
    .locator-search__input[data-locator-error] {
      background-color: #fbd6d2; }
  .locator-search__input::placeholder {
    color: #959598;
    font-size: 1.5rem; }

.locator__search-icon:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: .2em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }

.locator__postcode-warning {
  color: #191919;
  font-size: 1.4rem; }

.locator__selected {
  font-size: 1.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000; }

.locator__selected-value {
  color: #000;
  font-weight: 600;
  text-transform: uppercase; }

.locator__selected-link {
  font-size: 1.3rem;
  font-weight: 400;
  text-decoration: underline;
  text-transform: none; }

.locator-restaurant {
  background-color: #dadada; }

.locator-restaurant__name {
  font-size: 1.9rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #212121; }

.locator-restaurant__toggle {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.9rem; }

.locator-restaurant__content-name {
  font-size: 1.9rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1; }

.locator-restaurant__opening-times {
  background-color: #c0c0c0; }

.locator-restaurant__address {
  font-size: 1.4rem;
  line-height: 1.2; }

.locator-restaurant__phone {
  font-size: 1.7rem; }

.locator-restaurant__button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 0em;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.9rem;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease; }
  .locator-restaurant__button:hover {
    color: #fff;
    background-color: #555; }

.locator-restaurant__name-distance,
.locator-restaurant__content-name-distance {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  text-transform: uppercase; }

/* --------------------------------------------------------------------------
   RESTAURANTS PAGE
   (optional page)
   -------------------------------------------------------------------------- */
.restaurants__button {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 700;
  background-color: #212121; }

.restaurants-search__input-wrapper {
  border: 1px solid #c6c6c6; }

.restaurants-search__input {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000; }

.restaurants-search__input::placeholder {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #888; }

.restaurants-search__buttons-wrapper:after {
  border-left-color: #212121; }

.restaurants-search__button {
  color: #212121;
  background-color: #fff; }

.restaurants-search__warning {
  color: #d9230b; }

.restaurant-summary {
  color: #212121;
  font-size: 1.4rem;
  line-height: 1.4;
  border-bottom-color: #ebebeb; }

.restaurant-summary:hover {
  color: #212121; }

.restaurant-summary__name {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2; }

.restaurant-summary__distance {
  font-weight: bold; }

.restaurant-details {
  color: #212121;
  font-size: 1.4rem;
  line-height: 1.4; }

.restaurant-details__name {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2; }

.restaurant-details__item_phone {
  color: #212121; }

.restaurant-details__item-icon {
  color: #888; }

.restaurant-details__order-button {
  color: #fff;
  background-color: #212121;
  border: none;
  padding: 1em 2em;
  border-radius: 0em;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 700; }
  .restaurant-details__order-button:hover {
    color: #fff;
    background-color: #555; }

/* --------------------------------------------------------------------------
   PASSWORD STRENGTH CHECKER
   --------------------------------------------------------------------------
   On the 'register' and 'order_step2' pages
   -------------------------------------------------------------------------- */
.password-checker {
  background-color: #fff;
  border-color: #818181; }

.password-checker:before {
  border-left-color: #818181;
  border-right-color: #818181; }

.password-checker:after {
  border-left-color: #fff;
  border-right-color: #fff; }

.password-checker__label {
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff; }

.password-checker__text {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  letter-spacing: -0.2px; }

.password-checker__bar {
  background-color: #e8e8e8; }

.password-checker__score {
  background-color: #c64c4a; }

.password-checker__score.weak {
  width: 30%;
  background-color: #c64c4a; }

.password-checker__score.medium {
  width: 60%;
  background-color: #e1aa17; }

.password-checker__score.strong {
  width: 100%;
  background-color: #558b2f; }

.password-checker__input-message {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background-color: #900; }

/* --------------------------------------------------------------------------
   ADVANCED LOYALTY
   (optional feature)
   --------------------------------------------------------------------------
   Can be activated by setting the "loyalty_page" boolean parameter
   - Adds a /loyalty page
   - Adds links to this page in user, account and mobile menus
   -------------------------------------------------------------------------- */
.loyalty-dropdown {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #0a0a0a;
  font-weight: 300; }

.loyalty-dropdown:before {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: .2; }

.loyalty-dropdown__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #0a0a0a;
  font-weight: 700;
  text-transform: capitilize; }

.loyalty-dropdown__more-link {
  color: #0a0a0a;
  text-decoration: underline; }

.loyalty-dropdown__more-link:hover {
  text-decoration: none; }

.loyalty-page__banner__content {
  font-size: 2.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300; }

.loyalty-page__banner__title {
  font-size: 3.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 700; }

.loyalty-page__banner__p {
  color: #fff;
  font-size: 1.8rem; }

.loyalty-page__banner__points-value {
  color: #fff;
  font-weight: 400; }

.loyalty-page__banner__note {
  color: #fff;
  font-size: 1.2rem; }

.loyalty-page__howto {
  background-color: #f4f5f6; }

.loyalty-page__howto:before {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: .13; }

.loyalty-page__howto__wrapper {
  color: #000;
  font-weight: 300; }

.loyalty-page__howto__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 700; }

.loyalty-table__header {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  background-color: #0a0a0a; }

.loyalty-table__row {
  background-color: #fcfcfc; }

.loyalty-table__row:nth-child(odd) {
  background-color: #f4f5f6; }

.loyalty-table__row:hover {
  background-color: #ebebeb; }

.loyalty-table td {
  font-size: 1.2rem;
  color: #000; }

.loyalty-table__row plus {
  color: #686868;
  font-weight: 400; }

.loyalty-table__row minus {
  color: #686868;
  font-weight: 400; }

/* LOGIN WITH PHONE NUMBER
   -------------------------------------------------------------------------- */
.phone-box {
  text-align: left; }
  .phone-box .checkout-row__group-item_warning {
    display: none; }
    .phone-box .checkout-row__group-item_warning.visible {
      display: block;
      line-height: 1.2;
      margin-top: .5rem;
      color: #ff0000; }
  .phone-box .checkout-row__group-item_info {
    display: block;
    line-height: 1.2;
    margin-top: .5rem; }
    .phone-box .checkout-row__group-item_info.hidden {
      display: none; }
  .phone-box .form-buttons__button {
    display: block;
    box-sizing: border-box;
    line-height: 3rem;
    height: 3rem;
    float: none;
    min-width: auto;
    max-width: 50%;
    padding: 0 1rem;
    margin: 1rem auto 0 0; }
    .phone-box .form-buttons__button.form-buttons__button_disabled {
      color: #000;
      background-color: #c3c3c3;
      cursor: default; }
    @media screen and (max-width: 40em) {
      .phone-box .form-buttons__button {
        max-width: 100%; } }
  .phone-box .phone-box__controls {
    margin-top: 2rem; }
    .phone-box .phone-box__controls .form-buttons__button {
      margin: 0 0 0 auto; }

.checkout-row__group-item_register-phone .checkout-row__field-text {
  display: block; }
.checkout-row__group-item_register-phone .checkout-row__group-label_checkbox {
  margin-top: .5rem;
  display: inline-block;
  vertical-align: top; }
.checkout-row__group-item_register-phone .form-buttons__button {
  display: block;
  box-sizing: border-box;
  line-height: 3rem;
  height: 3rem;
  float: none;
  min-width: auto;
  max-width: 50%;
  padding: 0 1rem;
  margin: 1rem auto 0 0; }
  .checkout-row__group-item_register-phone .form-buttons__button.form-buttons__button_disabled {
    color: #000;
    background-color: #c3c3c3;
    cursor: default; }
  @media screen and (max-width: 40em) {
    .checkout-row__group-item_register-phone .form-buttons__button {
      max-width: 100%; } }

.phone-box__group {
  display: block;
  margin-top: 1rem;
  width: 100%;
  font-size: 0; }
  .phone-box__group .checkout-row__label {
    margin-left: 0;
    font-size: 1.4rem;
    line-height: 2rem;
    padding-top: .5rem;
    width: auto;
    padding-right: 0; }
  .phone-box__group.phone-box__group_guest {
    text-align: left; }
  .phone-box__group .checkout-row__field-text,
  .phone-box__group .checkout-row__group-item .checkout-row__field-text {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    max-width: 15rem;
    margin-left: 1rem;
    text-align: center;
    border: solid 1px;
    height: 3rem;
    line-height: 2.8rem; }
    @media screen and (max-width: 40em) {
      .phone-box__group .checkout-row__field-text,
      .phone-box__group .checkout-row__group-item .checkout-row__field-text {
        margin-left: 0; } }
    @media screen and (max-width: 21.25em) {
      .phone-box__group .checkout-row__field-text,
      .phone-box__group .checkout-row__group-item .checkout-row__field-text {
        max-width: 12rem; } }

.phone-box__set {
  display: block;
  font-size: 0; }
  .phone-box__set .phone-box__dial-code {
    display: inline-block;
    vertical-align: top;
    width: 4rem;
    box-sizing: border-box;
    border: solid 1px #b0afaf;
    margin-right: 1rem; }
    .phone-box__set .phone-box__dial-code ~ .checkout-row__field-text {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 16rem); }

.checkout__fieldset_guest-checkout .form-buttons__button {
  display: block;
  box-sizing: border-box;
  line-height: 3rem;
  height: 3rem;
  float: none;
  min-width: auto;
  max-width: 50%;
  padding: 0 1rem;
  margin: 1rem auto 0 0; }

.checkout-status {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  line-height: normal;
  padding: 0.3em 0; }

/* Basket surcharges */
.basket__surcharges-total {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between; }
  .basket__surcharges-total:before, .basket__surcharges-total:after {
    display: none; }
.basket__surcharges-contents {
  width: 100%;
  display: block; }

/* SURCHARGES */
.surcharges__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%; }
.surcharges__title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 700;
  line-height: 2rem;
  width: calc(100% - 12rem); }
.surcharges__details {
  width: 12rem;
  display: flex;
  justify-content: space-between; }
  .surcharges__details_single {
    justify-content: flex-end; }
    .surcharges__details_single .surcharges__amount {
      margin: 0; }
.surcharges__amount, .surcharges__input {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  line-height: 1.8rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 .5rem;
  border: solid .1rem #212121;
  margin: 0 .5rem; }
  .surcharges__amount.hidden, .surcharges__input.hidden {
    display: none; }
.surcharges__input {
  width: 6rem;
  padding: 0 0 0 .5rem; }
.surcharges__button_minus:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0em;
  margin-left: 0em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }
.surcharges__button_plus:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0em;
  margin-left: 0em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }
.surcharges__button {
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent; }
  .surcharges__button:before {
    border: solid .1rem #212121;
    color: #212121;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2rem;
    border: none; }
  .surcharges__button:hover {
    cursor: pointer; }
.surcharges__description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  line-height: 2rem;
  text-align: center;
  margin-top: 1rem; }
.surcharges__message {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  line-height: 2rem;
  font-style: italic;
  margin-top: 1rem; }
.surcharges.hidden {
  display: none; }

.surcharges-total {
  margin-bottom: 0; }
  .surcharges-total__title, .surcharges-total__amount {
    font-size: 1.6rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #212121;
    font-weight: 700;
    line-height: 3rem; }

/* Surcharges trigger */
.surcharges-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem; }
  .surcharges-trigger.hidden {
    display: none; }
  .surcharges-trigger__label {
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #212121;
    font-weight: 700;
    flex-grow: 1;
    line-height: 2rem;
    margin-bottom: 0; }
  .surcharges-trigger__button {
    float: none;
    flex-shrink: 0;
    color: #fff;
    background-color: #212121;
    border: none;
    padding: 0;
    border-radius: 0em;
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-transition: background-color .2s ease, color .2s ease;
    transition: background-color .2s ease, color .2s ease;
    min-width: 8rem;
    text-align: center;
    line-height: 2rem; }
    .surcharges-trigger__button:hover {
      color: #fff;
      background-color: #555; }
    .surcharges-trigger__button .hidden {
      display: none; }
    .surcharges-trigger__button:hover {
      cursor: pointer; }

/* --------------------------------------------------------------------------
   ORDER TRACKING
   -------------------------------------------------------------------------- */
.order-tracking__row {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: #fafafa;
  border-radius: .4rem;
  box-sizing: border-box;
  padding: 2rem; }

.accordion {
  display: flex;
  flex-direction: column;
  gap: 2rem; }
  .accordion__panel {
    background-color: #fafafa;
    border-radius: .4rem; }
  .accordion__header {
    box-sizing: border-box;
    padding: 2rem;
    margin-bottom: 0;
    background-color: transparent;
    transition: all .4s ease;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    gap: 2rem; }
    .accordion__header:hover {
      cursor: pointer; }
  .accordion__contents {
    padding: 0 2rem 3rem;
    box-sizing: border-box; }
  .accordion__panel[open] .accordion__header {
    margin-bottom: 2rem;
    background-color: #fff; }

.order-delivery-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; }
  .order-delivery-time__range {
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.4rem;
    text-transform: uppercase;
    text-align: center;
    color: #212121; }

.status-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem auto;
  gap: 2rem; }
  .status-indicator__image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem; }
  .status-indicator__image {
    max-width: 25rem; }

.steps-controller {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 34rem; }
  .steps-controller:after {
    content: '';
    display: block;
    width: 98%;
    height: .3rem;
    background-color: #d9d9d9;
    position: absolute;
    left: 1%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 0; }
  .steps-controller__step {
    width: 4rem;
    height: 4rem;
    border: solid 5px #fafafa;
    border-radius: 50%;
    background-color: #d9d9d9;
    position: relative;
    z-index: 1;
    position: relative; }
    .steps-controller__step:before {
      width: 12px;
      height: 12px;
      content: '';
      display: block;
      border-radius: 50%;
      background-color: #d9d9d9;
      border: solid 9px #fafafa;
      position: absolute;
      margin: 5px;
      z-index: 2; }
    .steps-controller__step_active {
      background-color: #15a238; }
      .steps-controller__step_active:before {
        background-color: #15a238; }
    .steps-controller__step_delay {
      background-color: #ff332e; }
      .steps-controller__step_delay:before {
        background-color: #ff332e; }

/* --------------------------------------------------------------------------
   DELIVERY POINTS
   -------------------------------------------------------------------------- */
.index-locator_delivery-points {
  width: 100%;
  max-width: 48rem; }
  .index-locator_delivery-points .index-locator__wrapper {
    width: 100%; }
.index-locator_google .locator__title {
  padding-top: 1.5rem; }

.info-carousel {
  position: relative;
  width: 100%;
  max-width: 60rem;
  margin: auto;
  overflow: hidden;
  border: solid .2rem #212121;
  border-radius: 2.5rem;
  /* case when we have 2 slides */
  /* case when we have 3 slides */ }
  .info-carousel__slider {
    display: flex;
    align-items: center;
    min-height: 10rem;
    width: 100%; }
  .info-carousel__slide {
    flex: 1 0 100%;
    box-sizing: border-box;
    box-sizing: border-box;
    padding: 2rem;
    text-align: center; }
  .info-carousel__slider:has(.info-carousel__slide:nth-child(2):not(.info-carousel__slide_clone)) {
    width: 200%;
    /* Adjust duration according to the number of slides and speed */
    animation: slideDouble 9s infinite; }
    .info-carousel__slider:has(.info-carousel__slide:nth-child(2):not(.info-carousel__slide_clone)) .info-carousel__slide {
      flex: 1 0 50%; }
  .info-carousel__slider:has(.info-carousel__slide:nth-child(3):not(.info-carousel__slide_clone)) {
    width: 300%;
    /* Adjust duration according to the number of slides and speed */
    animation: slideTriple 18s infinite; }
    .info-carousel__slider:has(.info-carousel__slide:nth-child(3):not(.info-carousel__slide_clone)) .info-carousel__slide {
      flex: 1 0 calc(100% / 3); }
  .info-carousel__text {
    display: block;
    max-width: 100%; }

@keyframes slideDouble {
  0% {
    transform: translateX(0%); }
  22.5% {
    transform: translateX(0%); }
  27.5% {
    transform: translateX(-50%); }
  72.5% {
    transform: translateX(-50%); }
  77.5% {
    transform: translateX(-100%); }
  99.99% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@keyframes slideTriple {
  0% {
    transform: translateX(0%); }
  14.665% {
    transform: translateX(0%); }
  18.665% {
    transform: translateX(-33.33%); }
  47.995% {
    transform: translateX(-33.33%); }
  51.995% {
    transform: translateX(-66.66%); }
  81.325% {
    transform: translateX(-66.66%); }
  85.325% {
    transform: translateX(-100%); }
  99.99% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
.order-info__row {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem; }
.order-info__text, .order-info__link {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400; }
.order-info__link {
  color: #212121;
  text-decoration: none;
  text-transform: uppercase; }
  .order-info__link:hover {
    text-decoration: underline; }
.order-info__feedback {
  display: none; }
.order-info_completed .order-info__timer,
.order-info_completed .order-info__promo,
.order-info_completed .order-info__references {
  display: none; }

.locator__methods_delivery-points,
.index-locator__methods_delivery-points {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; }
  .locator__methods_delivery-points:before, .locator__methods_delivery-points:after,
  .index-locator__methods_delivery-points:before,
  .index-locator__methods_delivery-points:after {
    display: none; }
  .locator__methods_delivery-points .order-info__feedback,
  .index-locator__methods_delivery-points .order-info__feedback {
    display: flex; }
  .locator__methods_delivery-points .locator__method,
  .locator__methods_delivery-points .index-locator__method,
  .index-locator__methods_delivery-points .locator__method,
  .index-locator__methods_delivery-points .index-locator__method {
    width: 100%;
    flex-grow: 1; }
    .locator__methods_delivery-points .locator__method ~ .locator__method,
    .locator__methods_delivery-points .locator__method ~ .index-locator__method,
    .locator__methods_delivery-points .index-locator__method ~ .locator__method,
    .locator__methods_delivery-points .index-locator__method ~ .index-locator__method,
    .index-locator__methods_delivery-points .locator__method ~ .locator__method,
    .index-locator__methods_delivery-points .locator__method ~ .index-locator__method,
    .index-locator__methods_delivery-points .index-locator__method ~ .locator__method,
    .index-locator__methods_delivery-points .index-locator__method ~ .index-locator__method {
      border-left: solid 1px #212121; }
  @media screen and (max-width: 30em) {
    .locator__methods_delivery-points .locator__method-name,
    .locator__methods_delivery-points .index-locator__method-name,
    .index-locator__methods_delivery-points .locator__method-name,
    .index-locator__methods_delivery-points .index-locator__method-name {
      white-space: nowrap;
      font-size: 1.4rem; } }

.order-tip {
  display: flex;
  max-width: 34rem;
  flex-direction: row;
  justify-content: center;
  align-items: center; }

.header__tracking-menu {
  float: right; }
  @media screen and (max-width: 52.5em) {
    .header__tracking-menu {
      display: none; } }

.order__follow-button {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 1.2;
  -webkit-transition: background-color .2s ease, color .2s ease;
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
  text-decoration: none;
  padding: .5rem 1rem;
  box-sizing: border-box;
  display: inline-flex; }
  .order__follow-button:hover {
    color: #fff;
    background-color: #555; }

.order-feedback {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center; }

.feedback-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; }

/* TO REMOVE: temporarily usage to display static version */
[data-locator-selected-method="delivery-points"] .locator__restaurants,
[data-locator-selected-method="delivery-points"] .index-locator__restaurants {
  display: none !important; }

/* TO REMOVE: temporarily usage to display static version */
.locator__delivery-points {
  display: none; }

[data-locator-selected-method="delivery-points"] .locator__delivery-points {
  display: flex !important;
  width: 100%;
  flex-direction: column;
  gap: 1rem; }

.delivery-points__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  max-height: 12rem; }
  .delivery-points__container_disabled {
    pointer-events: none;
    opacity: .5; }

.delivery-point {
  background-color: #dadada;
  padding: 0; }
  .delivery-point__button {
    color: #fff;
    background-color: #000;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 2rem;
    -webkit-transition: background-color .2s ease, color .2s ease;
    transition: background-color .2s ease, color .2s ease;
    text-align: center;
    box-sizing: border-box;
    display: block;
    width: 100%; }
    .delivery-point__button:hover {
      color: #fff;
      background-color: #555; }

/* Datepicker */
.ui-datepicker {
  background-color: #f5f5f5;
  border-color: #212121;
  color: #212121; }
  .ui-datepicker-header {
    border-color: #212121;
    background-color: #212121; }
  .ui-datepicker .ui-state-default {
    color: #0d0d0d;
    background-color: #fff;
    border-color: #212121;
    border-radius: .4rem;
    transition: all .3s ease; }
  .ui-datepicker .ui-state-hover,
  .ui-datepicker .ui-state-active,
  .ui-datepicker .ui-state-highlight,
  .ui-datepicker .ui-state-active:not(.ui-state-hover) {
    color: #fff;
    background-color: #212121;
    border-color: #212121; }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    text-indent: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color, border-color, background-color .3s ease;
    top: 50%;
    transform: translate(0, -50%);
    color: #fff;
    border: solid 1px #212121;
    background-color: #212121; }
    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
      display: none; }
    .ui-datepicker .ui-datepicker-prev:before,
    .ui-datepicker .ui-datepicker-next:before {
      display: block;
      width: 100%;
      color: #fff; }
    .ui-datepicker .ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled),
    .ui-datepicker .ui-datepicker-next.ui-state-hover:not(.ui-state-disabled) {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.4);
      border-color: rgba(255, 255, 255, 0.4);
      cursor: pointer; }
      .ui-datepicker .ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled):before,
      .ui-datepicker .ui-datepicker-next.ui-state-hover:not(.ui-state-disabled):before {
        color: #fff; }
  .ui-datepicker .ui-datepicker-prev:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
  .ui-datepicker .ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled) {
    left: 2px; }
  .ui-datepicker .ui-datepicker-next:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
  .ui-datepicker .ui-datepicker-next.ui-state-hover {
    right: 2px; }

/* Index bottom locator feature */
.index-locator__container_bottom {
  padding-right: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 3rem 0;
  width: 100%; }
  .index-locator__container_bottom .index-locator {
    position: relative;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    max-width: 100%; }
    .index-locator__container_bottom .index-locator_delivery-points .index-locator__wrapper {
      width: 52rem; }
    .index-locator__container_bottom .index-locator__wrapper {
      padding: 0;
      position: relative;
      width: 44rem; }
    .index-locator__container_bottom .index-locator__title {
      box-sizing: border-box;
      padding: 0;
      background-color: transparent;
      margin-bottom: 1rem;
      color: inherit; }
    .index-locator__container_bottom .index-locator__methods {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin: 0 auto 1rem;
      border: none; }
      .index-locator__container_bottom .index-locator__methods_delivery-points .locator__method_delivery-points,
      .index-locator__container_bottom .index-locator__methods_delivery-points .index-locator__method {
        border-left: none; }
      @media screen and (max-width: 33.75em) {
        .index-locator__container_bottom .index-locator__methods_delivery-points {
          flex-direction: column; } }
      @media screen and (max-width: 23.75em) {
        .index-locator__container_bottom .index-locator__methods {
          flex-direction: column; } }
      .index-locator__container_bottom .index-locator__methods:before, .index-locator__container_bottom .index-locator__methods:after {
        display: none; }
    .index-locator__container_bottom .index-locator__method:has(input[data-google-locator-method="delivery"]) .index-locator__method-name:before, .index-locator__container_bottom .index-locator__method:has(input[data-locator-method="delivery"]) .index-locator__method-name:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: 0;
      margin-left: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .index-locator__container_bottom .index-locator__method:has(input[data-google-locator-method="delivery"]) .index-locator__method-name:before, .index-locator__container_bottom .index-locator__method:has(input[data-locator-method="delivery"]) .index-locator__method-name:before {
      display: flex; }
    .index-locator__container_bottom .index-locator__method:has(input[data-google-locator-method="collection"]) .index-locator__method-name:before, .index-locator__container_bottom .index-locator__method:has(input[data-locator-method="collection"]) .index-locator__method-name:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: 0;
      margin-left: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .index-locator__container_bottom .index-locator__method:has(input[data-google-locator-method="collection"]) .index-locator__method-name:before, .index-locator__container_bottom .index-locator__method:has(input[data-locator-method="collection"]) .index-locator__method-name:before {
      display: flex; }
    .index-locator__container_bottom .index-locator__method .index-locator__method-name {
      display: block;
      width: 100%;
      cursor: pointer;
      box-sizing: border-box;
      padding: 0 .6rem 0 4.6rem;
      position: relative; }
      .index-locator__container_bottom .index-locator__method .index-locator__method-name:before {
        width: 4.5rem;
        height: 4rem;
        font-size: 2rem;
        border-right: 1px solid;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0; }
      @media screen and (max-width: 23.75em) {
        .index-locator__container_bottom .index-locator__method .index-locator__method-name {
          padding: 0 1rem 0 4.6rem; } }
    @media screen and (max-width: 23.75em) {
      .index-locator__container_bottom .index-locator__method {
        width: 100%; } }
    .index-locator__container_bottom .index-locator input[name=delivery_method] {
      position: absolute;
      margin: 0;
      opacity: 0; }
    .index-locator__container_bottom .index-locator__postcode-button {
      display: none; }
    .index-locator__container_bottom .index-locator__postcode-input:not(:placeholder-shown) ~ .index-locator__postcode-button {
      display: block; }
    .index-locator__container_bottom .index-locator__restaurants {
      margin-top: 0;
      max-height: 24rem;
      overflow: hidden;
      overflow-y: auto; }
    .index-locator__container_bottom .index-locator-restaurant {
      margin-top: 0; }
      + .index-locator__container_bottom .index-locator-restaurant-restaurant {
        margin-top: 1rem; }
    .index-locator__container_bottom .index-locator__postcode-selected {
      text-align: center; }

/* --------------------------------------------------------------------------
   MARKETPLACE
   -------------------------------------------------------------------------- */
/****************************************
  Marketplace page
****************************************/
.marketplace__search-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%; }
  .marketplace__search-wrapper:before {
    display: table;
    content: ""; }
  .marketplace__search-wrapper:after {
    display: table;
    content: "";
    clear: both; }
.marketplace__locator-warning {
  padding: 3rem 0;
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #f00;
  font-weight: 400;
  text-align: center; }
.marketplace__search-filters {
  background-color: #fff; }
.marketplace__no-shops {
  padding: 3rem 0;
  text-align: center;
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase; }
.marketplace__offcanvas-header {
  padding: 1rem;
  background-color: #212121;
  overflow: hidden; }
.marketplace__offcanvas-close-button {
  display: block;
  float: left;
  width: 3.5rem;
  height: 3.2rem;
  color: #fff;
  text-align: center;
  background-color: inherit;
  border: none;
  cursor: pointer; }
.marketplace__offcanvas-close-icon {
  font-size: 2.5rem; }
  .marketplace__offcanvas-close-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

/****************************************
  Marketplace locator
****************************************/
.marketplace-locator__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  text-align: center; }
  .marketplace-locator__wrapper:before {
    display: table;
    content: ""; }
  .marketplace-locator__wrapper:after {
    display: table;
    content: "";
    clear: both; }
.marketplace-locator__header-title {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 600;
  text-transform: uppercase; }
.marketplace-locator__header-description {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 400;
  text-transform: uppercase; }
.marketplace-locator__postcode-input-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  max-width: 400px; }
  .marketplace-locator__postcode-input-wrapper:before {
    display: table;
    content: ""; }
  .marketplace-locator__postcode-input-wrapper:after {
    display: table;
    content: "";
    clear: both; }
.marketplace-locator__postcode-input {
  padding: 1rem 1rem;
  width: 100%;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  border: 1px solid #212121;
  border-radius: 0.5rem;
  box-sizing: border-box; }
.marketplace-locator__postcode-warning {
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #f00; }

/****************************************
  Marketplace categories (carousel)
****************************************/
.marketplace-categories {
  margin-top: 2rem; }
.marketplace-categories__wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  padding: 0 3rem;
  box-sizing: border-box; }
  .marketplace-categories__wrapper:before {
    display: table;
    content: ""; }
  .marketplace-categories__wrapper:after {
    display: table;
    content: "";
    clear: both; }
.marketplace-categories__list-wrapper {
  height: 10rem; }
.marketplace-categories__item {
  margin: 0 .5rem;
  width: 20rem;
  height: 10rem;
  font-size: 0;
  overflow: hidden;
  cursor: pointer; }
.marketplace-categories__item-image {
  width: 100%;
  height: 10rem;
  border-radius: 1rem;
  box-sizing: border-box; }
.selected .marketplace-categories__item-image {
  border: 0.2rem solid #f00; }
.marketplace-categories__item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff; }
.marketplace-categories__navigation-link {
  display: block;
  position: absolute;
  top: 0;
  z-index: 10;
  width: 3rem;
  height: 10rem;
  line-height: 10rem;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
  background-color: #efefef; }
.marketplace-categories__navigation-link_prev {
  left: 0;
  border-radius: 1rem 0 0 1rem; }
.marketplace-categories__navigation-link_next {
  right: 0;
  border-radius: 0 1rem 1rem 0; }
.marketplace-categories__icon-prev:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }
.marketplace-categories__icon-next:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  min-width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }
@media screen and (max-width: 52.5em) {
  .marketplace-categories__wrapper {
    padding: 0; }
  .marketplace-categories__navigation {
    display: flex;
    justify-content: center;
    margin-top: 1rem; }
  .marketplace-categories__navigation-link {
    position: static;
    margin: 0 1rem;
    height: 3rem;
    line-height: 3rem;
    width: 3rem;
    border-radius: 0; } }

/****************************************
  Marketplace categories filter
****************************************/
.marketplace-categories-filter {
  margin: 3rem 0 0; }
.marketplace-categories-filter__wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 96%;
  text-align: center; }
  .marketplace-categories-filter__wrapper:before {
    display: table;
    content: ""; }
  .marketplace-categories-filter__wrapper:after {
    display: table;
    content: "";
    clear: both; }
.marketplace-categories-filter__item {
  display: inline-block;
  margin: 0 0 .3rem;
  cursor: pointer; }
.marketplace-categories-filter__item-name {
  display: block;
  padding: 0 2rem;
  line-height: 3rem;
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box; }
.selected .marketplace-categories-filter__item-name {
  color: #fff;
  background-color: #212121;
  border-color: #212121; }

/****************************************
  Marketplace filter
****************************************/
.marketplace-filters__header {
  margin-bottom: 2rem; }
.marketplace-filters__header-title {
  margin: 0;
  font-size: 5.7rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 700;
  line-height: 1; }
.marketplace-filters__header-description {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2; }
.marketplace-filters__criteria + .marketplace-filters__criteria {
  margin-top: 3rem; }
@media screen and (max-width: 52.5em) {
  .marketplace-filters {
    padding: 1rem; }
  .marketplace-filters__header {
    margin-bottom: 1.5rem; }
  .marketplace-filters__header-title {
    font-size: 3rem; }
  .marketplace-filters__criteria + .marketplace-filters__criteria {
    margin-top: 2.3rem; } }

.marketplace-criteria {
  color: #1c2027; }
.marketplace-criteria__title {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400;
  line-height: 1; }
@media screen and (max-width: 52.5em) {
  .marketplace-criteria__title {
    font-size: 1.6rem;
    font-weight: 500; } }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item {
  margin-bottom: .5rem;
  line-height: 1.4; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-label {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-input {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  clip: rect(0, 0, 0, 0); }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name {
  position: relative;
  display: block; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:before, .marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:after {
  content: "";
  display: block;
  position: absolute;
  left: -25px;
  top: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:before {
  width: 16px;
  height: 16px; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:after {
  display: none;
  margin: 4px;
  width: 8px;
  height: 8px; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-input:checked ~ .marketplace-criteria__item-name:after {
  display: block; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:before {
  background-color: #fff;
  border: 1px solid #000; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-name:after {
  background-color: #000; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-input[type='checkbox'] ~ .marketplace-criteria__item-name:before {
  border-radius: 0; }
.marketplace-criteria__list_filter-display-column .marketplace-criteria__item-input[type='radio'] ~ .marketplace-criteria__item-name:before, .marketplace-criteria__list_filter-display-column .marketplace-criteria__item-input[type='radio'] ~ .marketplace-criteria__item-name:after {
  border-radius: 50%; }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__item {
  display: inline-block;
  vertical-align: top;
  position: relative; }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__item-input {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  clip: rect(0, 0, 0, 0); }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__item {
  margin-bottom: .3rem; }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__item-name {
  display: block;
  position: relative;
  line-height: 3.5rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #a4a3a3;
  font-weight: 600;
  white-space: nowrap;
  background-color: #f2f2f2;
  border: 2px solid #e2e2e2;
  box-sizing: border-box; }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__price-range-rest {
  opacity: .3; }
.marketplace-criteria__list_filter-display-row .marketplace-criteria__item-input:checked ~ .marketplace-criteria__item-name {
  color: #1f1f1f;
  background-color: #fafafa;
  border: 2px solid #212121; }

/****************************************
  Marketplace shops refine
****************************************/
.marketplace-shops-refine {
  margin-bottom: 2rem;
  color: #212121; }
.marketplace-shops-refine__free, .marketplace-shops-refine__sort {
  margin-bottom: .5rem; }
.marketplace-shops-refine__free-label, .marketplace-shops-refine__sort-label, .marketplace-shops-refine__change_address_label {
  margin-right: 1rem;
  min-width: 5rem;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }
.marketplace-shops-refine__free-input {
  padding: 0 .5rem;
  height: 32px;
  max-width: 15rem;
  border: 1px solid #dbdbdb;
  box-sizing: border-box; }
.marketplace-shops-refine__free-button {
  padding: 0;
  width: 60px;
  height: 32px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-left: none;
  cursor: pointer;
  box-sizing: border-box; }
.marketplace-shops-refine__free-icon {
  font-size: 1.7rem; }
  .marketplace-shops-refine__free-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
.marketplace-shops-refine__filter-button {
  padding: 0 1.5rem;
  height: 32px;
  color: #fff;
  background-color: #212121;
  border: none;
  cursor: pointer; }
.marketplace-shops-refine__filter-icon {
  display: inline-block;
  font-size: 2rem; }
  .marketplace-shops-refine__filter-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
.marketplace-shops-refine__filter-icon::before {
  line-height: 30px; }

/****************************************
  Marketplace shop
****************************************/
.marketplace-shop {
  padding: 1rem;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  background-color: #eaeaea; }
.marketplace-shop__image-container {
  margin-bottom: 1.5rem; }
.marketplace-shop__image {
  display: block;
  width: 100%; }
.marketplace-shop__shop-time {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .5rem 1rem;
  font-size: 1.3rem;
  background-color: #fff; }
.marketplace-shop__name {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 400;
  line-height: 1.2; }
.marketplace-shop__description {
  margin-top: 1rem;
  line-height: 1.4; }
.marketplace-shop__promo {
  position: relative;
  float: right;
  margin-left: 1rem;
  padding: 0 1.7rem 0 1rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.1rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #9f9f9f;
  overflow: hidden; }
.marketplace-shop__promo:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -1.5rem;
  width: 2rem;
  height: 2rem;
  background-color: #eaeaea;
  transform: rotate(45deg); }
.marketplace-shop__footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2rem;
  color: #212121;
  font-size: 1.2rem;
  font-weight: 500; }
.marketplace-shop__price, .marketplace-shop__location {
  margin-right: 2rem; }
.marketplace-shop__price {
  padding: 0 1rem;
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  line-height: 2.6rem;
  background-color: #fff;
  border: 1px solid #212121; }
.marketplace-shop__price-range-rest {
  opacity: .3; }
.marketplace-shop__location {
  display: flex;
  align-items: center;
  line-height: 2.8rem; }
.marketplace-shop__location-icon {
  margin-right: .3rem;
  color: #949494;
  font-size: 2rem; }
  .marketplace-shop__location-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
.marketplace-shop__order {
  display: flex;
  align-items: center;
  line-height: 2.8rem; }
.marketplace-shop__order-icon {
  margin-right: .3rem;
  color: #949494;
  font-size: 2rem; }
  .marketplace-shop__order-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: 0;
    margin-left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }

/* DEFAULT THEME COLORING */
/* PAGE, BODY */
/* HEADER */
/* FOOTER */
/* BUTTONS */
/* ORDER ONLINE BUTTON ON HOMEPAGE */
/* MICROBLOGS */
/* TOP MESSAGES */
/* HORIZONTAL NAVIGATION */
/* LEFT HAND SIDE NAVIGATION */
/* PRODUCT */
/* CUSTOMIZATION POPUP */
/* BASKET */
/* MOBILE MENU */
/* ICONS */
/* CHECKOUT */
/* TABLES */
/* FORMS */
/* END OF DEFAULT LIGHT THEME */
/***********************************************************************************************************************************************************/
/* LIGHT CORNFLOWER BLUE THEME (Blue, White, Light blue) */
.color-set-cornflower-blue {
  /* PAGE, BODY */
  --theme-text-color: #072442;
  --theme-title-color: #2d5ad5;
  --theme-link-color: #072442;
  --theme-link-hover-color: #072442;
  --theme-background-color: #e5ecff;
  --theme-section-background-color: #c2d0f7;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #4979fb;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #3b68df;
  --theme-footer-socials-hover-color: #648bf5;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #4672ea;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #82a3fb;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #072442;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #82a3fb;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #79bf59;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #2654cc;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #4672ea;
  --theme-left-nav-link-color: #072442;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #4672ea;
  /* PRODUCT */
  --theme-product-text-color: #070a2b;
  --theme-product-title-color: #0f3397;
  --theme-product-price-color: #5bae35;
  --theme-product-background-color: #d2defd;
  --theme-product-zebra-background-color: #bbcdfd;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #1743b9;
  --theme-product-border-color: #1743b9;
  --theme-product-hover-border-color: rgba(23, 67, 185, 0.3);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #072442;
  --theme-popup-title-color: #2d5ad5;
  --theme-popup-background-color: #d8e1fc;
  /* BASKET */
  --theme-basket-color: #072442;
  --theme-basket-background-color: #e5ecff;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #1c5aff;
  --theme-basket-deal-color: #072442;
  --theme-basket-deal-background-color: #d0ddff;
  --theme-basket-deal-header-background-color: #aac1ff;
  --theme-basket-total-color: #072442;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #aacea4;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #fdc97d;
  --theme-basket-error-message-background-color: #ff8d7e;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #072442;
  --theme-mobile-menu-background-color: #aac1ff;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #1c5aff;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #4672ea;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #98b3ff;
  --theme-mobile-menu-separator-color: #bfd0ff;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #1743b9;
  --theme-favourite-icon-color: #2d5ad5;
  /* CHECKOUT */
  --theme-checkout-background-color: #c4d3fd;
  --theme-checkout-separator-color: #4672ea;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ec7667;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #346cff;
  --theme-table-border-color: #1c5aff;
  --theme-table-row-separator-color: #5181ff;
  --theme-table-row-color: #072442;
  --theme-table-row-background-color: #b9cbfb;
  --theme-table-row-even-color: #072442;
  --theme-table-row-even-background-color: #e5ecff;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #7abaff;
  /* FORMS */
  --theme-input-text-color: #072442;
  --theme-input-background-color: #e5ecff;
  --theme-input-border-color: #7596f0;
  --theme-dropdown-border-color: #2f5bd5; }

/* LIGHT SPRING GRASS THEME (Green, Dark green, White) */
.color-set-spring-grass {
  /* PAGE, BODY */
  --theme-text-color: #042601;
  --theme-title-color: #058c0c;
  --theme-link-color: #042601;
  --theme-link-hover-color: #042601;
  --theme-background-color: #edf7ee;
  --theme-section-background-color: #ceead2;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #53bb58;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #40b346;
  --theme-footer-socials-hover-color: #77ca7c;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #20c22a;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #5dd763;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #042601;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #5dd763;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #72e878;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #042601;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #042601;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #089d0f;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #4ec254;
  --theme-left-nav-link-color: #042601;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #57c85d;
  /* PRODUCT */
  --theme-product-text-color: #042601;
  --theme-product-title-color: #058c0c;
  --theme-product-price-color: #19601c;
  --theme-product-background-color: #d9eedc;
  --theme-product-zebra-background-color: #c5eccb;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #4ec254;
  --theme-product-border-color: #4ec254;
  --theme-product-hover-border-color: rgba(78, 194, 84, 0.3);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #042601;
  --theme-popup-title-color: #058c0c;
  --theme-popup-background-color: #d6f0da;
  /* BASKET */
  --theme-basket-color: #042601;
  --theme-basket-background-color: #e0f5e3;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #34a239;
  --theme-basket-deal-color: #042601;
  --theme-basket-deal-background-color: #b2e8b5;
  --theme-basket-deal-header-background-color: #7dd082;
  --theme-basket-total-color: #042601;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #0dd917;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #fdc97d;
  --theme-basket-error-message-background-color: #f27d6e;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #042601;
  --theme-mobile-menu-background-color: #c5eccb;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #34a239;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #43ac48;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #84ca87;
  --theme-mobile-menu-separator-color: #c2dbc6;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #19601c;
  --theme-favourite-icon-color: #089d0f;
  /* CHECKOUT */
  --theme-checkout-background-color: #c4f2c6;
  --theme-checkout-separator-color: #60c465;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ec7667;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #52b156;
  --theme-table-border-color: #52b156;
  --theme-table-row-separator-color: #52b156;
  --theme-table-row-color: #042601;
  --theme-table-row-background-color: #a9e8ac;
  --theme-table-row-even-color: #042601;
  --theme-table-row-even-background-color: #e9f9eb;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #67bd6b;
  /* FORMS */
  --theme-input-text-color: #042601;
  --theme-input-background-color: #edf7ee;
  --theme-input-border-color: #4dac51;
  --theme-dropdown-border-color: #6eb778; }

/* LIGHT ROYAL OLIVES THEME (Yellow/Gold, Dark Gray/Black, White) */
.color-set-royal-olives {
  /* Primary Soft (Beige / Pastels) */
  /* Important (Greens for price, confirmations, etc.) */
  /* Error (Reds for errors, alerts) */
  /* Neutrals */
  /* PAGE, BODY */
  --theme-text-color: #232323;
  --theme-title-color: #84833d;
  --theme-link-color: #232323;
  --theme-link-hover-color: #232323;
  --theme-background-color: #f5f4cb;
  --theme-section-background-color: #dfdd8b;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #ccac2b;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #bfa640;
  --theme-footer-socials-hover-color: #d5bb51;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #b98a1f;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #dbb359;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #232323;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #cc9e35;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #53c259;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #232323;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #232323;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #b98a1f;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #ccac2b;
  --theme-left-nav-link-color: #232323;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #d3ab53;
  /* PRODUCT */
  --theme-product-text-color: #232323;
  --theme-product-title-color: #84833d;
  --theme-product-price-color: #5bae35;
  --theme-product-background-color: #e8e6b0;
  --theme-product-zebra-background-color: #ecdc9c;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #b98a1f;
  --theme-product-border-color: #b98a1f;
  --theme-product-hover-border-color: rgba(185, 138, 31, 0.3);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #232323;
  --theme-popup-title-color: #84833d;
  --theme-popup-background-color: #f2e6b6;
  /* BASKET */
  --theme-basket-color: #232323;
  --theme-basket-background-color: #e8e6b0;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #cea03a;
  --theme-basket-deal-color: #232323;
  --theme-basket-deal-background-color: #dbcf9e;
  --theme-basket-deal-header-background-color: #bba757;
  --theme-basket-total-color: #232323;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #9dd764;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #fdb64c;
  --theme-basket-error-message-background-color: #f27d6e;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #232323;
  --theme-mobile-menu-background-color: #e8e6b0;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #cea03a;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #d3ab53;
  --theme-mobile-menu-active-color: #232323;
  --theme-mobile-menu-active-background-color: #e6cd98;
  --theme-mobile-menu-separator-color: #ddc89a;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #5bae35;
  --theme-favourite-icon-color: #5bae35;
  /* CHECKOUT */
  --theme-checkout-background-color: #ead996;
  --theme-checkout-separator-color: #bda672;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ec7667;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #cea03a;
  --theme-table-border-color: #bda672;
  --theme-table-row-separator-color: #bda672;
  --theme-table-row-color: #232323;
  --theme-table-row-background-color: #e4e2a7;
  --theme-table-row-even-color: #232323;
  --theme-table-row-even-background-color: #f5f4cb;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #d3bd69;
  /* FORMS */
  --theme-input-text-color: #232323;
  --theme-input-background-color: #f5f4cb;
  --theme-input-border-color: #bda672;
  --theme-dropdown-border-color: #bda672; }

/* LIGHT HOT PEPPER THEME (Red, Dark Gray/Black, Light Pink) */
.color-set-hot-pepper {
  /* Important (Green) */
  /* Error */
  /* Neutrals */
  /* Supporting */
  /* PAGE, BODY */
  --theme-text-color: #232323;
  --theme-title-color: #c00a06;
  --theme-link-color: #232323;
  --theme-link-hover-color: #232323;
  --theme-background-color: #faf2f1;
  --theme-section-background-color: #f2d3ce;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #db5754;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #ce3431;
  --theme-footer-socials-hover-color: #ca6f63;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #d63e39;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #b31e1a;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #232323;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #a4100c;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #53c259;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #232323;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #232323;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #bf110a;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #d63e39;
  --theme-left-nav-link-color: #232323;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #e43731;
  /* PRODUCT */
  --theme-product-text-color: #070a2b;
  --theme-product-title-color: #c00a06;
  --theme-product-price-color: #5bae35;
  --theme-product-background-color: #f5e1de;
  --theme-product-zebra-background-color: #fbd7d2;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #c00a06;
  --theme-product-border-color: #d63e39;
  --theme-product-hover-border-color: rgba(214, 62, 57, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #232323;
  --theme-popup-title-color: #c00a06;
  --theme-popup-background-color: #ffe5e1;
  /* BASKET */
  --theme-basket-color: #232323;
  --theme-basket-background-color: #f5e1de;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #e43731;
  --theme-basket-deal-color: #232323;
  --theme-basket-deal-background-color: #f9ccc9;
  --theme-basket-deal-header-background-color: #f79c96;
  --theme-basket-total-color: #232323;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #9dd764;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #fdb64c;
  --theme-basket-error-message-background-color: #f27d6e;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #232323;
  --theme-mobile-menu-background-color: #f7cdc7;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #e43731;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #e43731;
  --theme-mobile-menu-active-color: #232323;
  --theme-mobile-menu-active-background-color: #fbaaa7;
  --theme-mobile-menu-separator-color: #e48d89;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #c8322e;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #f2d3ce;
  --theme-checkout-separator-color: #e48d89;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ee5643;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #db5754;
  --theme-table-border-color: #e48d89;
  --theme-table-row-separator-color: #e48d89;
  --theme-table-row-color: #232323;
  --theme-table-row-background-color: #f7e1df;
  --theme-table-row-even-color: #232323;
  --theme-table-row-even-background-color: #faf2f1;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #eea9a2;
  /* FORMS */
  --theme-input-text-color: #232323;
  --theme-input-background-color: #faf2f1;
  --theme-input-border-color: #e48d89;
  --theme-dropdown-border-color: #d63e39; }

/* DARK BLACK OLIVE THEME (Green, Black, White, Grey) */
.color-set-black-olive {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #303030;
  --theme-section-background-color: #1c1a1a;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #151515;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #000000;
  --theme-footer-socials-hover-color: #496613;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #698632;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #8b937d;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #232323;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #a1ae8a;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #53c259;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #212121;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #212121;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #95a874;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #698632;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #14a800;
  --theme-product-background-color: #121212;
  --theme-product-zebra-background-color: #1e1e22;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #698632;
  --theme-product-border-color: #698632;
  --theme-product-hover-border-color: rgba(105, 134, 50, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #ffffff;
  --theme-popup-background-color: #242222;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #3e3e3e;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #212121;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #5e6454;
  --theme-basket-deal-header-background-color: #778263;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #6dc815;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #e4702b;
  --theme-basket-error-message-background-color: #ea5f4d;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #3e3e3e;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #212121;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #698632;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #98ae6e;
  --theme-mobile-menu-separator-color: #95a874;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #14a800;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #181717;
  --theme-checkout-separator-color: #95a874;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #900;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #698632;
  --theme-table-border-color: #cccccc;
  --theme-table-row-separator-color: #cccccc;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #7c8668;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #484f3d;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #303529;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #303030;
  --theme-input-border-color: #819165;
  --theme-dropdown-border-color: #698632; }

/* DARK BLACK COAL THEME (Red, Grey, White) */
.color-set-black-coal {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #212121;
  --theme-section-background-color: #121212;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #151515;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #000000;
  --theme-footer-socials-hover-color: #d0021b;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #d0021b;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #6c757d;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #212121;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #6c757d;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #53c259;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #212121;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #212121;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #ffffff;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #d0021b;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #14a800;
  --theme-product-background-color: #3e3e3e;
  --theme-product-zebra-background-color: #181717;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #d0021b;
  --theme-product-border-color: #d0021b;
  --theme-product-hover-border-color: rgba(208, 2, 27, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #ffffff;
  --theme-popup-background-color: #181717;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #3e3e3e;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #212121;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #6c757d;
  --theme-basket-deal-header-background-color: #4f5a64;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #f2b559;
  --theme-basket-error-message-background-color: #ea5f4d;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #3e3e3e;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #212121;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #d0021b;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #c25e6b;
  --theme-mobile-menu-separator-color: #e5e5e5;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #14a800;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #181717;
  --theme-checkout-separator-color: #bbbbbb;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #900;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #d0021b;
  --theme-table-border-color: #cccccc;
  --theme-table-row-separator-color: #cccccc;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #808080;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #424040;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #212121;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #212121;
  --theme-input-border-color: #bbbbbb;
  --theme-dropdown-border-color: #bbbbbb; }

/* DARK ATLANTIC LAKE THEME (Blue, Grey, White) */
.color-set-atlantic-lake {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #242526;
  --theme-section-background-color: #1a1919;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #151515;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #000000;
  --theme-footer-socials-hover-color: #0860f0;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #0860f0;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #9fa3b1;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #212121;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #9fa3b1;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #53c259;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #212121;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #212121;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #9fa3b1;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #0860f0;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #14a800;
  --theme-product-background-color: #3e3e3e;
  --theme-product-zebra-background-color: #181717;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #0860f0;
  --theme-product-border-color: #0860f0;
  --theme-product-hover-border-color: rgba(8, 96, 240, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #ffffff;
  --theme-popup-background-color: #242526;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #3e3e3e;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #212121;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #6c757d;
  --theme-basket-deal-header-background-color: #4f5a64;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #f2b559;
  --theme-basket-error-message-background-color: #ea5f4d;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #3e3e3e;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #212121;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #0860f0;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #6595e4;
  --theme-mobile-menu-separator-color: #9fa3b1;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #14a800;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #181717;
  --theme-checkout-separator-color: #68708f;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #900;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #0860f0;
  --theme-table-border-color: #5f77cc;
  --theme-table-row-separator-color: #5f77cc;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #9ba3c2;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #808ab1;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #5968a0;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #242526;
  --theme-input-border-color: #5f77cc;
  --theme-dropdown-border-color: #6f7eb5; }

/* DARK EMERALD STONE THEME (Green, Dark Grey/Black, White) */
.color-set-emerald-stone {
  /* PAGE, BODY */
  --theme-text-color: #fff;
  --theme-title-color: #fff;
  --theme-link-color: #fff;
  --theme-link-hover-color: #fff;
  --theme-background-color: #242424;
  --theme-section-background-color: #0b1511;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #1c1b1b;
  --theme-header-logo-color: #fff;
  /* FOOTER */
  --theme-footer-color: #fff;
  --theme-footer-background-color: #000;
  --theme-footer-socials-hover-color: #1ab975;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #1ab975;
  --theme-button-hover-color: #fff;
  --theme-button-hover-background-color: #9fa3b1;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #212121;
  --theme-index-order-button-background-color: #fff;
  --theme-index-order-button-hover-color: #fff;
  --theme-index-order-button-hover-background-color: #9fa3b1;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #fff;
  --theme-message-info-background-color: #62b367;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #fff;
  --theme-nav-item-hover-color: #212121;
  --theme-nav-item-hover-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-item-selected-color: #212121;
  --theme-nav-item-selected-background-color: rgba(255, 255, 255, 0.5);
  --theme-nav-background-color: #000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #2c7b5a;
  --theme-left-nav-link-color: #fff;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #1ab975;
  /* PRODUCT */
  --theme-product-text-color: #fff;
  --theme-product-title-color: #fff;
  --theme-product-price-color: #14a800;
  --theme-product-background-color: #132b22;
  --theme-product-zebra-background-color: #0c1c16;
  --theme-product-counter-color: #fff;
  --theme-product-counter-background-color: #1ab975;
  --theme-product-border-color: #1ab975;
  --theme-product-hover-border-color: rgba(26, 185, 117, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #fff;
  --theme-popup-title-color: #fff;
  --theme-popup-background-color: #05110c;
  /* BASKET */
  --theme-basket-color: #fff;
  --theme-basket-background-color: #3e3e3e;
  --theme-basket-header-color: #fff;
  --theme-basket-header-background-color: #0f1e18;
  --theme-basket-deal-color: #fff;
  --theme-basket-deal-background-color: #456658;
  --theme-basket-deal-header-background-color: #204636;
  --theme-basket-total-color: #fff;
  --theme-basket-savings-color: #fff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #f2b559;
  --theme-basket-error-message-background-color: #ea5f4d;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #fff;
  --theme-mobile-menu-background-color: #3e3e3e;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #0f1e18;
  --theme-mobile-menu-unfolded-color: #fff;
  --theme-mobile-menu-unfolded-background-color: #1ab975;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #63bb96;
  --theme-mobile-menu-separator-color: #2c7b5a;
  /* ICONS */
  --theme-burger-icon-color: #fff;
  --theme-basket-icon-color: #fff;
  --theme-basket-count-color: #fff;
  --theme-basket-count-background-color: #14a800;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #081510;
  --theme-checkout-separator-color: #2c7b5a;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #900;
  /* TABLES */
  --theme-table-header-color: #fff;
  --theme-table-header-background-color: #1ab975;
  --theme-table-border-color: #2c7b5a;
  --theme-table-row-separator-color: #2c7b5a;
  --theme-table-row-color: #fff;
  --theme-table-row-background-color: #699582;
  --theme-table-row-even-color: #fff;
  --theme-table-row-even-background-color: #22533e;
  --theme-table-row-hover-color: #fff;
  --theme-table-row-hover-background-color: #1d4635;
  /* FORMS */
  --theme-input-text-color: #fff;
  --theme-input-background-color: #242424;
  --theme-input-border-color: #2c7b5a;
  --theme-dropdown-border-color: #2c7b5a; }

/* DARK MIDNIGHT EMBER THEME (Orange, Green, Black, Grey) */
.color-set-midnight-ember {
  /* PAGE, BODY */
  --theme-text-color: #fff;
  --theme-title-color: #ff9933;
  --theme-link-color: #fff;
  --theme-link-hover-color: #fff;
  --theme-background-color: #000;
  --theme-section-background-color: #26201d;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #000;
  --theme-header-logo-color: #ff9933;
  /* FOOTER */
  --theme-footer-color: #fff;
  --theme-footer-background-color: #26201d;
  --theme-footer-socials-hover-color: #ff9933;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #ff9933;
  --theme-button-hover-color: #fff;
  --theme-button-hover-background-color: #333;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #fff;
  --theme-index-order-button-background-color: #ff9933;
  --theme-index-order-button-hover-color: #fff;
  --theme-index-order-button-hover-background-color: #333;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #fff;
  --theme-message-info-background-color: #54a25d;
  --theme-message-error-background-color: #c43636;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #fff;
  --theme-nav-item-hover-color: #fff;
  --theme-nav-item-hover-background-color: #ff9933;
  --theme-nav-item-selected-color: #fff;
  --theme-nav-item-selected-background-color: #ff9933;
  --theme-nav-background-color: #26201d;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #ff9933;
  --theme-left-nav-link-color: #fff;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #ff9933;
  /* PRODUCT */
  --theme-product-text-color: #000;
  --theme-product-title-color: #000;
  --theme-product-price-color: #000;
  --theme-product-background-color: #fff;
  --theme-product-zebra-background-color: #fff;
  --theme-product-counter-color: #fff;
  --theme-product-counter-background-color: #ff9933;
  --theme-product-border-color: #fff;
  --theme-product-hover-border-color: #ff9933;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #fff;
  --theme-popup-title-color: #ff9933;
  --theme-popup-background-color: #000;
  /* BASKET */
  --theme-basket-color: #000;
  --theme-basket-background-color: #fff;
  --theme-basket-header-color: #000;
  --theme-basket-header-background-color: #fff;
  --theme-basket-deal-color: #fff;
  --theme-basket-deal-background-color: #54a25d;
  --theme-basket-deal-header-background-color: #ff9933;
  --theme-basket-total-color: #000;
  --theme-basket-savings-color: #fff;
  --theme-basket-savings-background-color: #54a25d;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #ff9933;
  --theme-basket-error-message-background-color: #e00000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #fff;
  --theme-mobile-menu-background-color: #000;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #000;
  --theme-mobile-menu-unfolded-color: #fff;
  --theme-mobile-menu-unfolded-background-color: #ff9933;
  --theme-mobile-menu-active-color: #fff;
  --theme-mobile-menu-active-background-color: #54a25d;
  --theme-mobile-menu-separator-color: #493e38;
  /* ICONS */
  --theme-burger-icon-color: #ff9933;
  --theme-basket-icon-color: #ff9933;
  --theme-basket-count-color: #000;
  --theme-basket-count-background-color: #fff;
  --theme-favourite-icon-color: #c43636;
  /* CHECKOUT */
  --theme-checkout-background-color: #26201d;
  --theme-checkout-separator-color: #787975;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #e00000;
  /* TABLES */
  --theme-table-header-color: #fff;
  --theme-table-header-background-color: #ff9933;
  --theme-table-border-color: #797875;
  --theme-table-row-separator-color: #797875;
  --theme-table-row-color: #000;
  --theme-table-row-background-color: #fff;
  --theme-table-row-even-color: #000;
  --theme-table-row-even-background-color: #fff;
  --theme-table-row-hover-color: #fff;
  --theme-table-row-hover-background-color: #54a25d;
  /* FORMS */
  --theme-input-text-color: #000;
  --theme-input-background-color: #fff;
  --theme-input-border-color: #797875;
  --theme-dropdown-border-color: #797875; }

/* DARK ELECTRIC TWILIGHT THEME (Blue, Orange, Dark tones, White) */
.color-set-electric-twilight {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #2d2d2d;
  --theme-section-background-color: #373737;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #373737;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #8b8b8b;
  --theme-footer-background-color: #2d2d2d;
  --theme-footer-socials-hover-color: #00a0e7;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #00a0e7;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #d15c24;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #d15c24;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #00a0e7;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #00a0e7;
  --theme-message-error-background-color: #d15c24;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #00a0e7;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #00a0e7;
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #000000;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #00a0e7;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #ffffff;
  --theme-product-background-color: #373737;
  --theme-product-zebra-background-color: #373737;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #00a0e7;
  --theme-product-border-color: #2d2d2d;
  --theme-product-hover-border-color: #00a0e7;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #00a0e7;
  --theme-popup-background-color: #373737;
  /* BASKET */
  --theme-basket-color: #272727;
  --theme-basket-background-color: #ffffff;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #373737;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #272727;
  --theme-basket-deal-header-background-color: #00a0e7;
  --theme-basket-total-color: #272727;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #d15c24;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #00a0e7;
  --theme-basket-error-message-background-color: #e00000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #2d2d2d;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #373737;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #00a0e7;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #d15c24;
  --theme-mobile-menu-separator-color: #000000;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #00a0e7;
  --theme-favourite-icon-color: #00a0e7;
  /* CHECKOUT */
  --theme-checkout-background-color: #373737;
  --theme-checkout-separator-color: #000000;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #d15c24;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #00a0e7;
  --theme-table-border-color: #373737;
  --theme-table-row-separator-color: #373737;
  --theme-table-row-color: #000000;
  --theme-table-row-background-color: #f1f1f1;
  --theme-table-row-even-color: #000000;
  --theme-table-row-even-background-color: #d9d9d9;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #d15c24;
  /* FORMS */
  --theme-input-text-color: #000000;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #00a0e7;
  --theme-dropdown-border-color: #272727; }

/* LIGHT SKYLINE GLOW THEME (Blue, Yellow, White, Grey) */
.color-set-skyline-glow {
  /* PAGE, BODY */
  --theme-text-color: #565656;
  --theme-title-color: #0090d6;
  --theme-link-color: #565656;
  --theme-link-hover-color: #565656;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #f1f1f1;
  /* HEADER */
  --theme-header-color: #565656;
  --theme-header-background-color: #ffffff;
  --theme-header-logo-color: #0090d6;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #0a171f;
  --theme-footer-socials-hover-color: #0090d6;
  /* BUTTONS */
  --theme-button-color: #000000;
  --theme-button-background-color: #fdd514;
  --theme-button-hover-color: #000000;
  --theme-button-hover-background-color: #e5e5e5;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #000000;
  --theme-index-order-button-background-color: #fdd514;
  --theme-index-order-button-hover-color: #000000;
  --theme-index-order-button-hover-background-color: #e5e5e5;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #000000;
  --theme-message-info-background-color: #dadada;
  --theme-message-error-background-color: #9a2300;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #000000;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #0090d6;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #0090d6;
  --theme-nav-background-color: #f6f6f6;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #565656;
  --theme-left-nav-link-color: #000000;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #0090d6;
  /* PRODUCT */
  --theme-product-text-color: #565656;
  --theme-product-title-color: #0090d6;
  --theme-product-price-color: #0090d6;
  --theme-product-background-color: #f6f6f6;
  --theme-product-zebra-background-color: #f1f1f1;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #0090d6;
  --theme-product-border-color: #f6f6f6;
  --theme-product-hover-border-color: #0090d6;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #565656;
  --theme-popup-title-color: #0090d6;
  --theme-popup-background-color: #f6f6f6;
  /* BASKET */
  --theme-basket-color: #000000;
  --theme-basket-background-color: #f6f6f6;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #212121;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #e0e0e0;
  --theme-basket-deal-header-background-color: #ccc;
  --theme-basket-total-color: #212121;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #0090d6;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #0090d6;
  --theme-basket-error-message-background-color: #9a2300;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #212121;
  --theme-mobile-menu-background-color: #eee;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #212121;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #212121;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #212121;
  --theme-mobile-menu-separator-color: #e5e5e5;
  /* ICONS */
  --theme-burger-icon-color: #212121;
  --theme-basket-icon-color: #212121;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #0090d6;
  --theme-favourite-icon-color: #9a2300;
  /* CHECKOUT */
  --theme-checkout-background-color: #f6f6f6;
  --theme-checkout-separator-color: #e8e8e8;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #9a2300;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #0090d6;
  --theme-table-border-color: #b0b0b0;
  --theme-table-row-separator-color: #b0b0b0;
  --theme-table-row-color: #565656;
  --theme-table-row-background-color: #e5e5e5;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #565656;
  --theme-table-row-hover-color: #000000;
  --theme-table-row-hover-background-color: #fdd514;
  /* FORMS */
  --theme-input-text-color: #565656;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #b0b0b0;
  --theme-dropdown-border-color: #b0b0b0; }

/* LIGHT AUTUMN EMBER THEME (Brown/Beige, White, Dark Green, Dark Gray) */
.color-set-autumn-ember {
  /* PAGE, BODY */
  --theme-text-color: #2e2d2e;
  --theme-title-color: #2e2d2e;
  --theme-link-color: #2e2d2e;
  --theme-link-hover-color: #2e2d2e;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #c5b391;
  /* HEADER */
  --theme-header-color: #c5b391;
  --theme-header-background-color: #222220;
  --theme-header-logo-color: #c5b391;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #212121;
  --theme-footer-socials-hover-color: #b6b6b6;
  /* BUTTONS */
  --theme-button-color: #f9f7f3;
  --theme-button-background-color: #192d06;
  --theme-button-hover-color: #f9f7f3;
  --theme-button-hover-background-color: #3e6014;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #f9f7f3;
  --theme-index-order-button-background-color: #192d06;
  --theme-index-order-button-hover-color: #f9f7f3;
  --theme-index-order-button-hover-background-color: #3e6014;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #5a813f;
  --theme-message-error-background-color: #e00000;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #2e2d2e;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #192d06;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #192d06;
  --theme-nav-background-color: #c5b391;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #2f231b;
  --theme-left-nav-link-color: #2f231b;
  --theme-left-nav-link-hover-color: #c5b391;
  --theme-left-nav-link-hover-background-color: #222220;
  /* PRODUCT */
  --theme-product-text-color: #2e2d2e;
  --theme-product-title-color: #2e2d2e;
  --theme-product-price-color: #2e2d2e;
  --theme-product-background-color: #c5b391;
  --theme-product-zebra-background-color: #f1ede3;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #192d06;
  --theme-product-border-color: #c5b391;
  --theme-product-hover-border-color: #192d06;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #2e2d2e;
  --theme-popup-title-color: #2e2d2e;
  --theme-popup-background-color: #c5b391;
  /* BASKET */
  --theme-basket-color: #2e2d2e;
  --theme-basket-background-color: #c5b391;
  --theme-basket-header-color: #c5b391;
  --theme-basket-header-background-color: #222220;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #192d06;
  --theme-basket-deal-header-background-color: #3e6014;
  --theme-basket-total-color: #2e2d2e;
  --theme-basket-savings-color: #2e2d2e;
  --theme-basket-savings-background-color: #f1ede3;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #3e6014;
  --theme-basket-error-message-background-color: #e00000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #2f231b;
  --theme-mobile-menu-header-color: #c5b391;
  --theme-mobile-menu-header-background-color: #201f1e;
  --theme-mobile-menu-unfolded-color: #222220;
  --theme-mobile-menu-unfolded-background-color: #c5b391;
  --theme-mobile-menu-active-color: #c5b391;
  --theme-mobile-menu-active-background-color: #222220;
  --theme-mobile-menu-separator-color: #2b2b2a;
  /* ICONS */
  --theme-burger-icon-color: #c5b391;
  --theme-basket-icon-color: #c5b391;
  --theme-basket-count-color: #201f1e;
  --theme-basket-count-background-color: #ffffff;
  --theme-favourite-icon-color: #3e6014;
  /* CHECKOUT */
  --theme-checkout-background-color: #c5b391;
  --theme-checkout-separator-color: #63625f;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #e00000;
  /* TABLES */
  --theme-table-header-color: #f9f7f3;
  --theme-table-header-background-color: #192d06;
  --theme-table-border-color: #63625f;
  --theme-table-row-separator-color: #63625f;
  --theme-table-row-color: #2e2d2e;
  --theme-table-row-background-color: #c5b391;
  --theme-table-row-even-color: #2e2d2e;
  --theme-table-row-even-background-color: #c5b391;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #3e6014;
  /* FORMS */
  --theme-input-text-color: #2e2d2e;
  --theme-input-background-color: #c5b391;
  --theme-input-border-color: #63625f;
  --theme-dropdown-border-color: #63625f; }

/* DARK VERDANT NIGHT THEME (Green, Dark Gray, White) */
.color-set-verdant-night {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #000000;
  --theme-section-background-color: #222222;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #48882b;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #48882b;
  --theme-footer-socials-hover-color: #ffffff;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #48882b;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #557731;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #222222;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #48882b;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #25321f;
  --theme-message-error-background-color: #ff0000;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #48882b;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #48882b;
  --theme-nav-background-color: #375812;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #383838;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #48882b;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #48882b;
  --theme-product-background-color: #222222;
  --theme-product-zebra-background-color: #1c1c1c;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #48882b;
  --theme-product-border-color: #222222;
  --theme-product-hover-border-color: #48882b;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #ffffff;
  --theme-popup-background-color: #222222;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #222222;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #222222;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #f6d982;
  --theme-basket-deal-header-background-color: #ffca28;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #375812;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #222222;
  --theme-basket-error-message-background-color: #ff0000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #000000;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #375812;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #375812;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #222222;
  --theme-mobile-menu-separator-color: #222222;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #f57f17;
  --theme-favourite-icon-color: #f57f17;
  /* CHECKOUT */
  --theme-checkout-background-color: #222222;
  --theme-checkout-separator-color: #383838;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ff0000;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #000000;
  --theme-table-border-color: #383838;
  --theme-table-row-separator-color: #383838;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #222222;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #1c1c1c;
  --theme-table-row-hover-color: #1c1c1c;
  --theme-table-row-hover-background-color: #f6d982;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #242424;
  --theme-input-border-color: #383838;
  --theme-dropdown-border-color: #383838; }

/* LIGHT EVERGREEN BLOSSOM THEME (Green, Light green, White) */
.color-set-evergreen-blossom {
  /* PAGE, BODY */
  --theme-text-color: #26201d;
  --theme-title-color: #537a37;
  --theme-link-color: #26201d;
  --theme-link-hover-color: #26201d;
  --theme-background-color: #f3f3f3;
  --theme-section-background-color: #ffffff;
  /* HEADER */
  --theme-header-color: #537a37;
  --theme-header-background-color: #ffffff;
  --theme-header-logo-color: #537a37;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #232323;
  --theme-footer-socials-hover-color: #537a37;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #537a37;
  --theme-button-hover-color: #26201d;
  --theme-button-hover-background-color: #f1f4e3;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #af1e2c;
  --theme-index-order-button-hover-color: #26201d;
  --theme-index-order-button-hover-background-color: #fceded;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #537a37;
  --theme-message-error-background-color: #af1e2c;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #26201d;
  --theme-nav-item-hover-background-color: #f1f4e3;
  --theme-nav-item-selected-color: #26201d;
  --theme-nav-item-selected-background-color: #f1f4e3;
  --theme-nav-background-color: #537a37;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #c9c9c9;
  --theme-left-nav-link-color: #26201d;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #537a37;
  /* PRODUCT */
  --theme-product-text-color: #26201d;
  --theme-product-title-color: #26201d;
  --theme-product-price-color: #26201d;
  --theme-product-background-color: #ffffff;
  --theme-product-zebra-background-color: #efefef;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #537a37;
  --theme-product-border-color: #ffffff;
  --theme-product-hover-border-color: #537a37;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #26201d;
  --theme-popup-title-color: #537a37;
  --theme-popup-background-color: #f3f3f3;
  /* BASKET */
  --theme-basket-color: #26201d;
  --theme-basket-background-color: #f3f3f3;
  --theme-basket-header-color: #26201d;
  --theme-basket-header-background-color: #ffffff;
  --theme-basket-deal-color: #26201d;
  --theme-basket-deal-background-color: #f1f4e3;
  --theme-basket-deal-header-background-color: #fceded;
  --theme-basket-total-color: #26201d;
  --theme-basket-savings-color: #537a37;
  --theme-basket-savings-background-color: #ffffff;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #537a37;
  --theme-basket-error-message-background-color: #af1e2c;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #26201d;
  --theme-mobile-menu-background-color: #ffffff;
  --theme-mobile-menu-header-color: #26201d;
  --theme-mobile-menu-header-background-color: #efefef;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #537a37;
  --theme-mobile-menu-active-color: #26201d;
  --theme-mobile-menu-active-background-color: #f1f4e3;
  --theme-mobile-menu-separator-color: #c9c9c9;
  /* ICONS */
  --theme-burger-icon-color: #537a37;
  --theme-basket-icon-color: #537a37;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #af1e2c;
  --theme-favourite-icon-color: #af1e2c;
  /* CHECKOUT */
  --theme-checkout-background-color: #ffffff;
  --theme-checkout-separator-color: #c9c9c9;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #af1e2c;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #232323;
  --theme-table-border-color: #c9c9c9;
  --theme-table-row-separator-color: #c9c9c9;
  --theme-table-row-color: #26201d;
  --theme-table-row-background-color: #f1f4e3;
  --theme-table-row-even-color: #26201d;
  --theme-table-row-even-background-color: #ffffff;
  --theme-table-row-hover-color: #26201d;
  --theme-table-row-hover-background-color: #fceded;
  /* FORMS */
  --theme-input-text-color: #26201d;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #c9c9c9;
  --theme-dropdown-border-color: #c9c9c9; }

/* DARK MIDNIGHT MINT THEME (Turquoise Green, Dark Gray, White, Black) */
.color-set-midnight-mint {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #6fc7b5;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #000000;
  --theme-section-background-color: #212124;
  /* HEADER */
  --theme-header-color: #74747a;
  --theme-header-background-color: #212124;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #212124;
  --theme-footer-socials-hover-color: #ffffff;
  /* BUTTONS */
  --theme-button-color: #000000;
  --theme-button-background-color: #6fc7b5;
  --theme-button-hover-color: #000000;
  --theme-button-hover-background-color: #4b9082;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #000000;
  --theme-index-order-button-background-color: #6fc7b5;
  --theme-index-order-button-hover-color: #000000;
  --theme-index-order-button-hover-background-color: #4b9082;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #6fc7b5;
  --theme-message-error-background-color: #ee4036;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #000000;
  --theme-nav-item-hover-background-color: #6fc7b5;
  --theme-nav-item-selected-color: #000000;
  --theme-nav-item-selected-background-color: #6fc7b5;
  --theme-nav-background-color: #74747a;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #6fc7b5;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #000000;
  --theme-left-nav-link-hover-background-color: #6fc7b5;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #6fc7b5;
  --theme-product-price-color: #6fc7b5;
  --theme-product-background-color: #141416;
  --theme-product-zebra-background-color: #0a0a0b;
  --theme-product-counter-color: #000000;
  --theme-product-counter-background-color: #6fc7b5;
  --theme-product-border-color: #141416;
  --theme-product-hover-border-color: #6fc7b5;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #6fc7b5;
  --theme-popup-background-color: #141416;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #212124;
  --theme-basket-header-color: #6fc7b5;
  --theme-basket-header-background-color: #212124;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #36363a;
  --theme-basket-deal-header-background-color: #4d4d4f;
  --theme-basket-total-color: #6fc7b5;
  --theme-basket-savings-color: #000000;
  --theme-basket-savings-background-color: #ffe480;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #212124;
  --theme-basket-error-message-background-color: #ee4036;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #141416;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #212124;
  --theme-mobile-menu-unfolded-color: #000000;
  --theme-mobile-menu-unfolded-background-color: #6fc7b5;
  --theme-mobile-menu-active-color: #000000;
  --theme-mobile-menu-active-background-color: #6fc7b5;
  --theme-mobile-menu-separator-color: #4d4d4f;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #ee4036;
  --theme-favourite-icon-color: #ee4036;
  /* CHECKOUT */
  --theme-checkout-background-color: #000000;
  --theme-checkout-separator-color: #4d4d4f;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ee4036;
  /* TABLES */
  --theme-table-header-color: #000000;
  --theme-table-header-background-color: #6fc7b5;
  --theme-table-border-color: #4d4d4f;
  --theme-table-row-separator-color: #4d4d4f;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #36363a;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #141416;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #000000;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #000000;
  --theme-input-border-color: #4d4d4f;
  --theme-dropdown-border-color: #4d4d4f; }

/* LIGHT FRESH POP THEME (Green, Black, White, Red) */
.color-set-fresh-pop {
  /* PAGE, BODY */
  --theme-text-color: #000000;
  --theme-title-color: #689b2f;
  --theme-link-color: #000000;
  --theme-link-hover-color: #000000;
  --theme-background-color: #ebebeb;
  --theme-section-background-color: #f7f7f7;
  /* HEADER */
  --theme-header-color: #000000;
  --theme-header-background-color: #ffffff;
  --theme-header-logo-color: #000000;
  /* FOOTER */
  --theme-footer-color: #cccccc;
  --theme-footer-background-color: #1c1c1c;
  --theme-footer-socials-hover-color: #689b2f;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #689b2f;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #4b7b17;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #689b2f;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #4b7b17;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #000000;
  --theme-message-info-background-color: #d0d0d0;
  --theme-message-error-background-color: #d61e1e;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #689b2f;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #689b2f;
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #d61e1e;
  --theme-left-nav-link-color: #d61e1e;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #689b2f;
  /* PRODUCT */
  --theme-product-text-color: #000000;
  --theme-product-title-color: #689b2f;
  --theme-product-price-color: #d61e1e;
  --theme-product-background-color: #ffffff;
  --theme-product-zebra-background-color: #f7f7f7;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #000000;
  --theme-product-border-color: #ffffff;
  --theme-product-hover-border-color: #000000;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #000000;
  --theme-popup-title-color: #689b2f;
  --theme-popup-background-color: #f7f7f7;
  /* BASKET */
  --theme-basket-color: #000000;
  --theme-basket-background-color: #ffffff;
  --theme-basket-header-color: #000000;
  --theme-basket-header-background-color: #ffffff;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #1c1c1c;
  --theme-basket-deal-header-background-color: #000000;
  --theme-basket-total-color: #000000;
  --theme-basket-savings-color: #000000;
  --theme-basket-savings-background-color: #e5f9cf;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #000000;
  --theme-basket-error-message-background-color: #d61e1e;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #000000;
  --theme-mobile-menu-background-color: #ffffff;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #0a0a0a;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #689b2f;
  --theme-mobile-menu-active-color: #000000;
  --theme-mobile-menu-active-background-color: #e5f9cf;
  --theme-mobile-menu-separator-color: #eaeaea;
  /* ICONS */
  --theme-burger-icon-color: #000000;
  --theme-basket-icon-color: #000000;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #689b2f;
  --theme-favourite-icon-color: #d61e1e;
  /* CHECKOUT */
  --theme-checkout-background-color: #ffffff;
  --theme-checkout-separator-color: #d1d1d1;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #d61e1e;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #689b2f;
  --theme-table-border-color: #d1d1d1;
  --theme-table-row-separator-color: #d1d1d1;
  --theme-table-row-color: #cccccc;
  --theme-table-row-background-color: #1c1c1c;
  --theme-table-row-even-color: #1c1c1c;
  --theme-table-row-even-background-color: #f7f7f7;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #d61e1e;
  /* FORMS */
  --theme-input-text-color: #2a2a2a;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #b9b9b9;
  --theme-dropdown-border-color: #b9b9b9; }

/* LIGHT GOLDEN GROVE THEME (Dark Green, Light Yellow, Light Gray, Dark Brown/Black, White) */
.color-set-golden-grove {
  /* PAGE, BODY */
  --theme-text-color: #666666;
  --theme-title-color: #1c1c1c;
  --theme-link-color: #666666;
  --theme-link-hover-color: #666666;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #f2f2f2;
  /* HEADER */
  --theme-header-color: #efdd7f;
  --theme-header-background-color: #005845;
  --theme-header-logo-color: #efdd7f;
  /* FOOTER */
  --theme-footer-color: #f7e782;
  --theme-footer-background-color: #005845;
  --theme-footer-socials-hover-color: #a8976b;
  /* BUTTONS */
  --theme-button-color: #efdd7f;
  --theme-button-background-color: #005845;
  --theme-button-hover-color: #efdd7f;
  --theme-button-hover-background-color: #a8976b;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #1c1c1c;
  --theme-index-order-button-background-color: #efdd7f;
  --theme-index-order-button-hover-color: #efdd7f;
  --theme-index-order-button-hover-background-color: #a8976b;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #1c1c1c;
  --theme-message-info-background-color: #dcdcdc;
  --theme-message-error-background-color: #dca414;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #efdd7f;
  --theme-nav-item-hover-color: #05342a;
  --theme-nav-item-hover-background-color: #efdd7f;
  --theme-nav-item-selected-color: #05342a;
  --theme-nav-item-selected-background-color: #efdd7f;
  --theme-nav-background-color: #043e31;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #043e31;
  --theme-left-nav-link-color: #043e31;
  --theme-left-nav-link-hover-color: #efdd7f;
  --theme-left-nav-link-hover-background-color: #043e31;
  /* PRODUCT */
  --theme-product-text-color: #666666;
  --theme-product-title-color: #1c1c1c;
  --theme-product-price-color: #1c1c1c;
  --theme-product-background-color: #f2f2f2;
  --theme-product-zebra-background-color: #f2f2f2;
  --theme-product-counter-color: #efdd7f;
  --theme-product-counter-background-color: #005845;
  --theme-product-border-color: #f2f2f2;
  --theme-product-hover-border-color: #005845;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #666666;
  --theme-popup-title-color: #1c1c1c;
  --theme-popup-background-color: #f2f2f2;
  /* BASKET */
  --theme-basket-color: #1c1c1c;
  --theme-basket-background-color: #f2f2f2;
  --theme-basket-header-color: #efdd7f;
  --theme-basket-header-background-color: #005845;
  --theme-basket-deal-color: #1c1c1c;
  --theme-basket-deal-background-color: #efdd7f;
  --theme-basket-deal-header-background-color: #a8976b;
  --theme-basket-total-color: #1c1c1c;
  --theme-basket-savings-color: #05342a;
  --theme-basket-savings-background-color: #efdd7f;
  --theme-basket-message-text-color: #f7e782;
  --theme-basket-important-message-background-color: #005845;
  --theme-basket-error-message-background-color: #900000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #666666;
  --theme-mobile-menu-background-color: #ffffff;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #043e31;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #005845;
  --theme-mobile-menu-active-color: #666666;
  --theme-mobile-menu-active-background-color: #e0e0e0;
  --theme-mobile-menu-separator-color: #dfdfdf;
  /* ICONS */
  --theme-burger-icon-color: #f7e782;
  --theme-basket-icon-color: #f7e782;
  --theme-basket-count-color: #1c1c1c;
  --theme-basket-count-background-color: #f2f2f2;
  --theme-favourite-icon-color: #dca414;
  /* CHECKOUT */
  --theme-checkout-background-color: #f9f9f9;
  --theme-checkout-separator-color: #e1e1e1;
  --theme-checkout-error-color: #f7e782;
  --theme-checkout-error-background-color: #900000;
  /* TABLES */
  --theme-table-header-color: #efdd7f;
  --theme-table-header-background-color: #043e31;
  --theme-table-border-color: #c2c2c2;
  --theme-table-row-separator-color: #c2c2c2;
  --theme-table-row-color: #1c1c1c;
  --theme-table-row-background-color: #e1e1e1;
  --theme-table-row-even-color: #1c1c1c;
  --theme-table-row-even-background-color: #c2c2c2;
  --theme-table-row-hover-color: #1c1c1c;
  --theme-table-row-hover-background-color: #a8976b;
  /* FORMS */
  --theme-input-text-color: #666666;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #c2c2c2;
  --theme-dropdown-border-color: #c2c2c2; }

/* DARK CITRUS PHANTOM THEME (Black, White, Orange) */
.color-set-citrus-phantom {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #ffffff;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #121212;
  --theme-section-background-color: #c2b7a5;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #000000;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #000000;
  --theme-footer-socials-hover-color: #ffa206;
  /* BUTTONS */
  --theme-button-color: #000000;
  --theme-button-background-color: #ffa206;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #ffa206;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #000000;
  --theme-index-order-button-background-color: #ffa206;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #ffa206;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #c2b7a5;
  --theme-message-error-background-color: #ff0000;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #000000;
  --theme-nav-item-hover-background-color: #ffa206;
  --theme-nav-item-selected-color: #000000;
  --theme-nav-item-selected-background-color: #ffa206;
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #292929;
  --theme-left-nav-link-color: #ffffff;
  --theme-left-nav-link-hover-color: #000000;
  --theme-left-nav-link-hover-background-color: #ffa206;
  /* PRODUCT */
  --theme-product-text-color: #ffffff;
  --theme-product-title-color: #ffffff;
  --theme-product-price-color: #ffffff;
  --theme-product-background-color: #000000;
  --theme-product-zebra-background-color: #212121;
  --theme-product-counter-color: #000000;
  --theme-product-counter-background-color: #ffa206;
  --theme-product-border-color: #000000;
  --theme-product-hover-border-color: #ffa206;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #ffffff;
  --theme-popup-background-color: #212121;
  /* BASKET */
  --theme-basket-color: #ffffff;
  --theme-basket-background-color: #212121;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #000000;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #292929;
  --theme-basket-deal-header-background-color: #121212;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #000000;
  --theme-basket-savings-background-color: #0ef01a;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #212121;
  --theme-basket-error-message-background-color: #ff0000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #ffffff;
  --theme-mobile-menu-background-color: #121212;
  --theme-mobile-menu-header-color: #ffa206;
  --theme-mobile-menu-header-background-color: #000000;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #ffa206;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #212121;
  --theme-mobile-menu-separator-color: #292929;
  /* ICONS */
  --theme-burger-icon-color: #ffa206;
  --theme-basket-icon-color: #ffa206;
  --theme-basket-count-color: #000000;
  --theme-basket-count-background-color: #ffffff;
  --theme-favourite-icon-color: #ff0000;
  /* CHECKOUT */
  --theme-checkout-background-color: #000000;
  --theme-checkout-separator-color: #292929;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ff0000;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #000000;
  --theme-table-border-color: #000000;
  --theme-table-row-separator-color: #000000;
  --theme-table-row-color: #ffffff;
  --theme-table-row-background-color: #000000;
  --theme-table-row-even-color: #ffffff;
  --theme-table-row-even-background-color: #000000;
  --theme-table-row-hover-color: #000000;
  --theme-table-row-hover-background-color: #ffa206;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #000000;
  --theme-input-border-color: #292929;
  --theme-dropdown-border-color: #292929; }

/* LIGHT PUMPKIN SPICE THEME (Orange, Grey, White, Black) */
.color-set-pumpkin-spice {
  /* PAGE, BODY */
  --theme-text-color: #000000;
  --theme-title-color: #000000;
  --theme-link-color: #000000;
  --theme-link-hover-color: #000000;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #e3e3e3;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #fc9012;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #000000;
  --theme-footer-socials-hover-color: #fc9012;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #fc9012;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #6d757d;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #000000;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #fc9012;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #e3e3e3;
  --theme-message-error-background-color: #ff0000;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #fc9012;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #fc9012;
  --theme-nav-background-color: #6d757d;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #747474;
  --theme-left-nav-link-color: #000000;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #fc9012;
  /* PRODUCT */
  --theme-product-text-color: #000000;
  --theme-product-title-color: #000000;
  --theme-product-price-color: #fc9012;
  --theme-product-background-color: #e3e3e3;
  --theme-product-zebra-background-color: #f1f1f1;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #fc9012;
  --theme-product-border-color: #e3e3e3;
  --theme-product-hover-border-color: #000000;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #000000;
  --theme-popup-title-color: #000000;
  --theme-popup-background-color: #ffffff;
  /* BASKET */
  --theme-basket-color: #000000;
  --theme-basket-background-color: #ffffff;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #6d757d;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #e3e3e3;
  --theme-basket-deal-header-background-color: #f1f1f1;
  --theme-basket-total-color: #000000;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #14a800;
  --theme-basket-message-text-color: #000000;
  --theme-basket-important-message-background-color: #e3e3e3;
  --theme-basket-error-message-background-color: #ff0000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #000000;
  --theme-mobile-menu-background-color: #ffffff;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #6d757d;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #fc9012;
  --theme-mobile-menu-active-color: #000000;
  --theme-mobile-menu-active-background-color: #fc9012;
  --theme-mobile-menu-separator-color: #747474;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #000000;
  --theme-favourite-icon-color: #fc9012;
  /* CHECKOUT */
  --theme-checkout-background-color: #e3e3e3;
  --theme-checkout-separator-color: #747474;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ff0000;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #000000;
  --theme-table-border-color: #747474;
  --theme-table-row-separator-color: #747474;
  --theme-table-row-color: #000000;
  --theme-table-row-background-color: #e3e3e3;
  --theme-table-row-even-color: #000000;
  --theme-table-row-even-background-color: #ffffff;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #14a800;
  /* FORMS */
  --theme-input-text-color: #000000;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #747474;
  --theme-dropdown-border-color: #747474; }

/* DARK URBAN PULSE THEME (Orange, Blue, Grey) */
.color-set-urban-pulse {
  /* PAGE, BODY */
  --theme-text-color: #F4F1EC;
  --theme-title-color: #E68A20;
  --theme-link-color: #E0E0E0;
  --theme-link-hover-color: #E0E0E0;
  --theme-background-color: #2C3E50;
  --theme-section-background-color: #34495E;
  /* HEADER */
  --theme-header-color: #D35400;
  --theme-header-background-color: #233344;
  --theme-header-logo-color: #D35400;
  /* FOOTER */
  --theme-footer-color: #E0E0E0;
  --theme-footer-background-color: #1D2F40;
  --theme-footer-socials-hover-color: #F39C12;
  /* BUTTONS */
  --theme-button-color: #2C3E50;
  --theme-button-background-color: #F39C12;
  --theme-button-hover-color: #F4F1EC;
  --theme-button-hover-background-color: #D35400;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #2C3E50;
  --theme-index-order-button-background-color: #F39C12;
  --theme-index-order-button-hover-color: #F4F1EC;
  --theme-index-order-button-hover-background-color: #D35400;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #F4F1EC;
  --theme-message-info-background-color: #82b155;
  --theme-message-error-background-color: #db4d45;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #F4F1EC;
  --theme-nav-item-hover-color: #27a1f0;
  --theme-nav-item-hover-background-color: #2C3E50;
  --theme-nav-item-selected-color: #27a1f0;
  --theme-nav-item-selected-background-color: #2C3E50;
  --theme-nav-background-color: #2980b9;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #0f5eae;
  --theme-left-nav-link-color: #FF6F00;
  --theme-left-nav-link-hover-color: #E0E0E0;
  --theme-left-nav-link-hover-background-color: #E68A20;
  /* PRODUCT */
  --theme-product-text-color: #BDC3C7;
  --theme-product-title-color: #7FB3D5;
  --theme-product-price-color: #F39C12;
  --theme-product-background-color: #1C2833;
  --theme-product-zebra-background-color: #2C3E50;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #064c93;
  --theme-product-border-color: #7A94A6;
  --theme-product-hover-border-color: rgba(122, 148, 166, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #F4F1EC;
  --theme-popup-title-color: #E68A20;
  --theme-popup-background-color: #2C3E50;
  /* BASKET */
  --theme-basket-color: #F4F1EC;
  --theme-basket-background-color: #34495E;
  --theme-basket-header-color: #F4F1EC;
  --theme-basket-header-background-color: #146ea8;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #9cbbce;
  --theme-basket-deal-header-background-color: #7594bd;
  --theme-basket-total-color: #F4F1EC;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #F4F1EC;
  --theme-basket-important-message-background-color: #5E80AC;
  --theme-basket-error-message-background-color: #db4d45;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #F4F1EC;
  --theme-mobile-menu-background-color: #34495E;
  --theme-mobile-menu-header-color: #F4F1EC;
  --theme-mobile-menu-header-background-color: #146ea8;
  --theme-mobile-menu-unfolded-color: #F4F1EC;
  --theme-mobile-menu-unfolded-background-color: #F39C12;
  --theme-mobile-menu-active-color: #F4F1EC;
  --theme-mobile-menu-active-background-color: #dd9d53;
  --theme-mobile-menu-separator-color: #2980b9;
  /* ICONS */
  --theme-burger-icon-color: #D35400;
  --theme-basket-icon-color: #D35400;
  --theme-basket-count-color: #F4F1EC;
  --theme-basket-count-background-color: #3897D5;
  --theme-favourite-icon-color: #E74C3C;
  /* CHECKOUT */
  --theme-checkout-background-color: #34495E;
  --theme-checkout-separator-color: #2980b9;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #db4d45;
  /* TABLES */
  --theme-table-header-color: #F4F1EC;
  --theme-table-header-background-color: #146ea8;
  --theme-table-border-color: #6baee8;
  --theme-table-row-separator-color: #6baee8;
  --theme-table-row-color: #F4F1EC;
  --theme-table-row-background-color: #3f566c;
  --theme-table-row-even-color: #F4F1EC;
  --theme-table-row-even-background-color: #2C3E50;
  --theme-table-row-hover-color: #F4F1EC;
  --theme-table-row-hover-background-color: #5993b9;
  /* FORMS */
  --theme-input-text-color: #F4F1EC;
  --theme-input-background-color: #2C3E50;
  --theme-input-border-color: #7FB3D5;
  --theme-dropdown-border-color: #146ea8; }

/* LIGHT OCEAN BREEZE THEME (Blue, Orange, White) */
.color-set-ocean-breeze {
  /* PAGE, BODY */
  --theme-text-color: #191919;
  --theme-title-color: #0121a2;
  --theme-link-color: #000000;
  --theme-link-hover-color: #000000;
  --theme-background-color: #ECF5F9;
  --theme-section-background-color: #aad2f7;
  /* HEADER */
  --theme-header-color: #e0f1f7;
  --theme-header-background-color: #0033ff;
  --theme-header-logo-color: #e0f1f7;
  /* FOOTER */
  --theme-footer-color: #e0f1f7;
  --theme-footer-background-color: #003366;
  --theme-footer-socials-hover-color: #ff8a00;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #ff8a00;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #6db2f0;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ff8a00;
  --theme-index-order-button-background-color: #0c31c4;
  --theme-index-order-button-hover-color: #0c31c4;
  --theme-index-order-button-hover-background-color: #7cbbf4;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #ff8a00;
  --theme-message-error-background-color: #ee4036;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #0121a2;
  --theme-nav-item-hover-color: #ECF5F9;
  --theme-nav-item-hover-background-color: #0121a2;
  --theme-nav-item-selected-color: #ECF5F9;
  --theme-nav-item-selected-background-color: #0121a2;
  --theme-nav-background-color: #94c9f9;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #1f3db7;
  --theme-left-nav-link-color: #003366;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #ff8a00;
  /* PRODUCT */
  --theme-product-text-color: #000000;
  --theme-product-title-color: #003366;
  --theme-product-price-color: #ff8a00;
  --theme-product-background-color: #C9E0EE;
  --theme-product-zebra-background-color: #BAD5E6;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #1f3db7;
  --theme-product-border-color: #8ca7ca;
  --theme-product-hover-border-color: rgba(140, 167, 202, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #191919;
  --theme-popup-title-color: #0121a2;
  --theme-popup-background-color: #D0E4F1;
  /* BASKET */
  --theme-basket-color: #000000;
  --theme-basket-background-color: #D0E4F1;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #0121a2;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #b7d1e1;
  --theme-basket-deal-header-background-color: #8ca7ca;
  --theme-basket-total-color: #000000;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #7cbbf4;
  --theme-basket-error-message-background-color: #ee4036;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #000000;
  --theme-mobile-menu-background-color: #D0E4F1;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #0121a2;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #ff8a00;
  --theme-mobile-menu-active-color: #000000;
  --theme-mobile-menu-active-background-color: #eaa85c;
  --theme-mobile-menu-separator-color: #b0c4de;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #ff8a00;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #D9E6EE;
  --theme-checkout-separator-color: #1f3db7;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ee4036;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #0121a2;
  --theme-table-border-color: #6baee8;
  --theme-table-row-separator-color: #6baee8;
  --theme-table-row-color: #000000;
  --theme-table-row-background-color: #bed6e6;
  --theme-table-row-even-color: #000000;
  --theme-table-row-even-background-color: #e0f1f7;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #7cbbf4;
  /* FORMS */
  --theme-input-text-color: #000000;
  --theme-input-background-color: #e0f1f7;
  --theme-input-border-color: #3886cc;
  --theme-dropdown-border-color: #064c93; }

/* DARK VINTAGE CHARM THEME (Red, Violet, White) */
.color-set-vintage-charm {
  /* PAGE, BODY */
  --theme-text-color: #ffffff;
  --theme-title-color: #a80b3a;
  --theme-link-color: #ffffff;
  --theme-link-hover-color: #ffffff;
  --theme-background-color: #2d1c22;
  --theme-section-background-color: #29171d;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #221419;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #f1f1f1;
  --theme-footer-background-color: #1f1217;
  --theme-footer-socials-hover-color: #95012e;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #95012e;
  --theme-button-hover-color: #1c1b1b;
  --theme-button-hover-background-color: #c25173;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #95012e;
  --theme-index-order-button-background-color: #ffffff;
  --theme-index-order-button-hover-color: #1c1b1b;
  --theme-index-order-button-hover-background-color: #c25173;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #f1f1f1;
  --theme-message-info-background-color: #e6af2e;
  --theme-message-error-background-color: #991b1e;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #1c1b1b;
  --theme-nav-item-hover-background-color: #c25173;
  --theme-nav-item-selected-color: #1c1b1b;
  --theme-nav-item-selected-background-color: #c25173;
  --theme-nav-background-color: #95012e;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #aaa;
  --theme-left-nav-link-color: #a80b3a;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #95012e;
  /* PRODUCT */
  --theme-product-text-color: #f1f1f1;
  --theme-product-title-color: #a80b3a;
  --theme-product-price-color: #ffffff;
  --theme-product-background-color: #221419;
  --theme-product-zebra-background-color: #29171d;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #95012e;
  --theme-product-border-color: #a9a9a9;
  --theme-product-hover-border-color: rgba(169, 169, 169, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #a80b3a;
  --theme-popup-background-color: #29151b;
  /* BASKET */
  --theme-basket-color: #f1f1f1;
  --theme-basket-background-color: #2d1c22;
  --theme-basket-header-color: #a80b3a;
  --theme-basket-header-background-color: #221419;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #6a2f41;
  --theme-basket-deal-header-background-color: #4f1a2a;
  --theme-basket-total-color: #ffffff;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #dc7007;
  --theme-basket-error-message-background-color: #c90c0c;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #f1f1f1;
  --theme-mobile-menu-background-color: #2d1c22;
  --theme-mobile-menu-header-color: #a80b3a;
  --theme-mobile-menu-header-background-color: #221419;
  --theme-mobile-menu-unfolded-color: #1c1b1b;
  --theme-mobile-menu-unfolded-background-color: #95012e;
  --theme-mobile-menu-active-color: #a80b3a;
  --theme-mobile-menu-active-background-color: #1a1013;
  --theme-mobile-menu-separator-color: #684c56;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #95012e;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #29171d;
  --theme-checkout-separator-color: #684c56;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #c90c0c;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #95012e;
  --theme-table-border-color: #bbb;
  --theme-table-row-separator-color: #aaa;
  --theme-table-row-color: #f1f1f1;
  --theme-table-row-background-color: #3e262e;
  --theme-table-row-even-color: #f1f1f1;
  --theme-table-row-even-background-color: #2d1c22;
  --theme-table-row-hover-color: #000000;
  --theme-table-row-hover-background-color: #c28094;
  /* FORMS */
  --theme-input-text-color: #f1f1f1;
  --theme-input-background-color: #2d1c22;
  --theme-input-border-color: #886b76;
  --theme-dropdown-border-color: #aaa; }

/* DARK SCARLET ECLIPSE THEME (Black, Red, White) */
.color-set-scarlet-eclipse {
  /* PAGE, BODY */
  --theme-text-color: #fff;
  --theme-title-color: #fff;
  --theme-link-color: #fff;
  --theme-link-hover-color: #fff;
  --theme-background-color: #000;
  --theme-section-background-color: #121212;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #000;
  --theme-header-logo-color: #fff;
  /* FOOTER */
  --theme-footer-color: #fff;
  --theme-footer-background-color: #121212;
  --theme-footer-socials-hover-color: #fff;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #d0021b;
  --theme-button-hover-color: #fff;
  --theme-button-hover-background-color: #d0021b;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #fff;
  --theme-index-order-button-background-color: #6c757d;
  --theme-index-order-button-hover-color: #fff;
  --theme-index-order-button-hover-background-color: #6c757d;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #fff;
  --theme-message-info-background-color: #6c757d;
  --theme-message-error-background-color: #d0021b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #fff;
  --theme-nav-item-hover-color: #fff;
  --theme-nav-item-hover-background-color: #d0021b;
  --theme-nav-item-selected-color: #fff;
  --theme-nav-item-selected-background-color: #d0021b;
  --theme-nav-background-color: #3f3f3f;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #595a5c;
  --theme-left-nav-link-color: #fff;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #d0021b;
  /* PRODUCT */
  --theme-product-text-color: #fff;
  --theme-product-title-color: #fff;
  --theme-product-price-color: #14a800;
  --theme-product-background-color: #121212;
  --theme-product-zebra-background-color: #3f3f3f;
  --theme-product-counter-color: #fff;
  --theme-product-counter-background-color: #d0021b;
  --theme-product-border-color: #121212;
  --theme-product-hover-border-color: #8c8e91;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #fff;
  --theme-popup-title-color: #fff;
  --theme-popup-background-color: #121212;
  /* BASKET */
  --theme-basket-color: #fff;
  --theme-basket-background-color: #3f3f3f;
  --theme-basket-header-color: #fff;
  --theme-basket-header-background-color: #121212;
  --theme-basket-deal-color: #fff;
  --theme-basket-deal-background-color: #595a5c;
  --theme-basket-deal-header-background-color: #6c757d;
  --theme-basket-total-color: #fff;
  --theme-basket-savings-color: #14a800;
  --theme-basket-savings-background-color: #121212;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #3f3f3f;
  --theme-basket-error-message-background-color: #d0021b;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #fff;
  --theme-mobile-menu-background-color: #121212;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #3f3f3f;
  --theme-mobile-menu-unfolded-color: #fff;
  --theme-mobile-menu-unfolded-background-color: #d0021b;
  --theme-mobile-menu-active-color: #fff;
  --theme-mobile-menu-active-background-color: #14a800;
  --theme-mobile-menu-separator-color: #dee2e6;
  /* ICONS */
  --theme-burger-icon-color: #fff;
  --theme-basket-icon-color: #fff;
  --theme-basket-count-color: #fff;
  --theme-basket-count-background-color: #14a800;
  --theme-favourite-icon-color: #d0021b;
  /* CHECKOUT */
  --theme-checkout-background-color: #121212;
  --theme-checkout-separator-color: #595a5c;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #d0021b;
  /* TABLES */
  --theme-table-header-color: #fff;
  --theme-table-header-background-color: #6c757d;
  --theme-table-border-color: #dee2e6;
  --theme-table-row-separator-color: #dee2e6;
  --theme-table-row-color: #fff;
  --theme-table-row-background-color: #121212;
  --theme-table-row-even-color: #fff;
  --theme-table-row-even-background-color: #3f3f3f;
  --theme-table-row-hover-color: #fff;
  --theme-table-row-hover-background-color: #14a800;
  /* FORMS */
  --theme-input-text-color: #fff;
  --theme-input-background-color: #3f3f3f;
  --theme-input-border-color: #dee2e6;
  --theme-dropdown-border-color: #dee2e6; }

/* LIGHT FLAME BLOOM THEME (Red, Black, White) */
.color-set-flame-bloom {
  /* PAGE, BODY */
  --theme-text-color: #12171a;
  --theme-title-color: #e51c20;
  --theme-link-color: #12171a;
  --theme-link-hover-color: #12171a;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #ebebeb;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #12171a;
  --theme-header-logo-color: #e51c20;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #12171a;
  --theme-footer-socials-hover-color: #e51c20;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #e51c20;
  --theme-button-hover-color: #ffffff;
  --theme-button-hover-background-color: #c21a1d;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #12171a;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #1f2528;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #75a400;
  --theme-message-error-background-color: #c21a1d;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #12171a;
  --theme-nav-item-hover-background-color: #ffffff;
  --theme-nav-item-selected-color: #12171a;
  --theme-nav-item-selected-background-color: #ffffff;
  --theme-nav-background-color: #e51c20;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #ebebeb;
  --theme-left-nav-link-color: #12171a;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #e51c20;
  /* PRODUCT */
  --theme-product-text-color: #12171a;
  --theme-product-title-color: #12171a;
  --theme-product-price-color: #e51c20;
  --theme-product-background-color: #ebebeb;
  --theme-product-zebra-background-color: #ccc;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #75a400;
  --theme-product-border-color: #ebebeb;
  --theme-product-hover-border-color: #12171a;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #12171a;
  --theme-popup-title-color: #12171a;
  --theme-popup-background-color: #ebebeb;
  /* BASKET */
  --theme-basket-color: #12171a;
  --theme-basket-background-color: #ffffff;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #12171a;
  --theme-basket-deal-color: #12171a;
  --theme-basket-deal-background-color: #d0d0d0;
  --theme-basket-deal-header-background-color: #b3b3b3;
  --theme-basket-total-color: #12171a;
  --theme-basket-savings-color: #75a400;
  --theme-basket-savings-background-color: #ebebeb;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #12171a;
  --theme-basket-error-message-background-color: #c21a1d;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #12171a;
  --theme-mobile-menu-background-color: #ebebeb;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #12171a;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #e51c20;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #c21a1d;
  --theme-mobile-menu-separator-color: #b3b3b3;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #75a400;
  --theme-favourite-icon-color: #75a400;
  /* CHECKOUT */
  --theme-checkout-background-color: #ebebeb;
  --theme-checkout-separator-color: #b3b3b3;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #c21a1d;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #12171a;
  --theme-table-border-color: #b3b3b3;
  --theme-table-row-separator-color: #b3b3b3;
  --theme-table-row-color: #12171a;
  --theme-table-row-background-color: #ccc;
  --theme-table-row-even-color: #12171a;
  --theme-table-row-even-background-color: #ebebeb;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #c21a1d;
  /* FORMS */
  --theme-input-text-color: #12171a;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #b3b3b3;
  --theme-dropdown-border-color: #b3b3b3; }

/* DARK VERDANT BLAZE THEME (Red, Green, White, Black) */
.color-set-verdant-blaze {
  /* PAGE, BODY */
  --theme-text-color: #eaeaea;
  --theme-title-color: #c10c17;
  --theme-link-color: #eaeaea;
  --theme-link-hover-color: #eaeaea;
  --theme-background-color: #121212;
  --theme-section-background-color: #1a202c;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #a3121a;
  --theme-header-logo-color: #fff;
  /* FOOTER */
  --theme-footer-color: #f4f0f0;
  --theme-footer-background-color: #1a202c;
  --theme-footer-socials-hover-color: #2f855a;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #a3121a;
  --theme-button-hover-color: #a3121a;
  --theme-button-hover-background-color: #e1aeae;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #a3121a;
  --theme-index-order-button-background-color: #f1f1f1;
  --theme-index-order-button-hover-color: #f4f1ec;
  --theme-index-order-button-hover-background-color: #f57c00;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #f4f1ec;
  --theme-message-info-background-color: #82b155;
  --theme-message-error-background-color: #db4d45;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #fff;
  --theme-nav-item-hover-color: #eaeaea;
  --theme-nav-item-hover-background-color: #121212;
  --theme-nav-item-selected-color: #eaeaea;
  --theme-nav-item-selected-background-color: #121212;
  --theme-nav-background-color: #2f855a;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #2f855a;
  --theme-left-nav-link-color: #2f855a;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #2f855a;
  /* PRODUCT */
  --theme-product-text-color: #eaeaea;
  --theme-product-title-color: #c10c17;
  --theme-product-price-color: #078a60;
  --theme-product-background-color: #11151c;
  --theme-product-zebra-background-color: #1a202c;
  --theme-product-counter-color: #eaeaea;
  --theme-product-counter-background-color: #2f855a;
  --theme-product-border-color: #a9a9a9;
  --theme-product-hover-border-color: rgba(169, 169, 169, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #eaeaea;
  --theme-popup-title-color: #c10c17;
  --theme-popup-background-color: #1a202c;
  /* BASKET */
  --theme-basket-color: #eaeaea;
  --theme-basket-background-color: #1a202c;
  --theme-basket-header-color: #fff;
  --theme-basket-header-background-color: #2f855a;
  --theme-basket-deal-color: #212121;
  --theme-basket-deal-background-color: #62ceb1;
  --theme-basket-deal-header-background-color: #14c193;
  --theme-basket-total-color: #eaeaea;
  --theme-basket-savings-color: #fff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #fdbe5f;
  --theme-basket-error-message-background-color: #db4d45;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #eaeaea;
  --theme-mobile-menu-background-color: #1a202c;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #2f855a;
  --theme-mobile-menu-unfolded-color: #dddddd;
  --theme-mobile-menu-unfolded-background-color: #2f855a;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #69bd93;
  --theme-mobile-menu-separator-color: #686868;
  /* ICONS */
  --theme-burger-icon-color: #eaeaea;
  --theme-basket-icon-color: #eaeaea;
  --theme-basket-count-color: #eaeaea;
  --theme-basket-count-background-color: #2f855a;
  --theme-favourite-icon-color: #d32f2f;
  /* CHECKOUT */
  --theme-checkout-background-color: #1a202c;
  --theme-checkout-separator-color: #2d3748;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #db4d45;
  /* TABLES */
  --theme-table-header-color: #f1f1f1;
  --theme-table-header-background-color: #a3121a;
  --theme-table-border-color: #2f855a;
  --theme-table-row-separator-color: #f1f1f1;
  --theme-table-row-color: #f1f1f1;
  --theme-table-row-background-color: #0e170f;
  --theme-table-row-even-color: #f6f9f8;
  --theme-table-row-even-background-color: #1a1c1b;
  --theme-table-row-hover-color: #fff;
  --theme-table-row-hover-background-color: #2f855a;
  /* FORMS */
  --theme-input-text-color: #eaeaea;
  --theme-input-background-color: #181e28;
  --theme-input-border-color: #2f855a;
  --theme-dropdown-border-color: #007a53; }

/* LIGHT BURGUNDY MIST THEME (Red, Green, White) */
.color-set-burgundy-mist {
  /* PAGE, BODY */
  --theme-text-color: #212121;
  --theme-title-color: #c10c17;
  --theme-link-color: #262626;
  --theme-link-hover-color: #262626;
  --theme-background-color: #fff;
  --theme-section-background-color: #eef0ee;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #078a60;
  --theme-header-logo-color: #fff;
  /* FOOTER */
  --theme-footer-color: #F4F0F0;
  --theme-footer-background-color: #007a53;
  --theme-footer-socials-hover-color: #299d31;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #0f9675;
  --theme-button-hover-color: #0f9675;
  --theme-button-hover-background-color: #cfe3df;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #fff;
  --theme-index-order-button-background-color: #F57C00;
  --theme-index-order-button-hover-color: #F4F1EC;
  --theme-index-order-button-hover-background-color: #a3121a;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #F4F1EC;
  --theme-message-info-background-color: #82b155;
  --theme-message-error-background-color: #db4d45;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #a3121a;
  --theme-nav-item-hover-color: #fff;
  --theme-nav-item-hover-background-color: #a3121a;
  --theme-nav-item-selected-color: #fff;
  --theme-nav-item-selected-background-color: #a3121a;
  --theme-nav-background-color: #ddd;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #b71c1c;
  --theme-left-nav-link-color: #317636;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #d32f2f;
  /* PRODUCT */
  --theme-product-text-color: #262626;
  --theme-product-title-color: #c10c17;
  --theme-product-price-color: #078a60;
  --theme-product-background-color: #f6f9f8;
  --theme-product-zebra-background-color: #f1f1f1;
  --theme-product-counter-color: #fff;
  --theme-product-counter-background-color: #d32f2f;
  --theme-product-border-color: #ddd;
  --theme-product-hover-border-color: rgba(221, 221, 221, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #212121;
  --theme-popup-title-color: #c10c17;
  --theme-popup-background-color: #f5f5f5;
  /* BASKET */
  --theme-basket-color: #212121;
  --theme-basket-background-color: #f1f1f1;
  --theme-basket-header-color: #fff;
  --theme-basket-header-background-color: #0b9372;
  --theme-basket-deal-color: #212121;
  --theme-basket-deal-background-color: #cae8e0;
  --theme-basket-deal-header-background-color: #88c8b6;
  --theme-basket-total-color: #212121;
  --theme-basket-savings-color: #fff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #FDBE5F;
  --theme-basket-error-message-background-color: #db4d45;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #212121;
  --theme-mobile-menu-background-color: #f1f1f1;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #0b9372;
  --theme-mobile-menu-unfolded-color: #fff;
  --theme-mobile-menu-unfolded-background-color: #0f9675;
  --theme-mobile-menu-active-color: #212121;
  --theme-mobile-menu-active-background-color: #59c1a8;
  --theme-mobile-menu-separator-color: #ddd;
  /* ICONS */
  --theme-burger-icon-color: #fff;
  --theme-basket-icon-color: #fff;
  --theme-basket-count-color: #fff;
  --theme-basket-count-background-color: #de1632;
  --theme-favourite-icon-color: #d32f2f;
  /* CHECKOUT */
  --theme-checkout-background-color: #f1f1f1;
  --theme-checkout-separator-color: #ddd;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #db4d45;
  /* TABLES */
  --theme-table-header-color: #f1f1f1;
  --theme-table-header-background-color: #0b9372;
  --theme-table-border-color: #ddd;
  --theme-table-row-separator-color: #ddd;
  --theme-table-row-color: #212121;
  --theme-table-row-background-color: #fff;
  --theme-table-row-even-color: #212121;
  --theme-table-row-even-background-color: #f6f9f8;
  --theme-table-row-hover-color: #0f9675;
  --theme-table-row-hover-background-color: #cfe3df;
  /* FORMS */
  --theme-input-text-color: #212121;
  --theme-input-background-color: #f5f5f5;
  --theme-input-border-color: #0f9675;
  --theme-dropdown-border-color: #007a53; }

/* LIGHT SAFFRON SHADE THEME (Red, Yellow, Green, White) */
.color-set-saffron-shade {
  /* PAGE, BODY */
  --theme-text-color: #7f8187;
  --theme-title-color: #508919;
  --theme-link-color: #7f8187;
  --theme-link-hover-color: #7f8187;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #edf5e7;
  /* HEADER */
  --theme-header-color: #e1361e;
  --theme-header-background-color: #ffffff;
  --theme-header-logo-color: #e1361e;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #848484;
  --theme-footer-socials-hover-color: #e1361e;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #e34d26;
  --theme-button-hover-color: #333333;
  --theme-button-hover-background-color: #fcd57d;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #508919;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #e34d26;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #7cac3e;
  --theme-message-error-background-color: #d9230b;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #e1361e;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #e1361e;
  --theme-nav-background-color: #7cac3e;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #508919;
  --theme-left-nav-link-color: #000000;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #508919;
  /* PRODUCT */
  --theme-product-text-color: #525252;
  --theme-product-title-color: #282828;
  --theme-product-price-color: #508919;
  --theme-product-background-color: #edf5e7;
  --theme-product-zebra-background-color: #edf5e7;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #e1361e;
  --theme-product-border-color: #edf5e7;
  --theme-product-hover-border-color: #e1361e;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #525252;
  --theme-popup-title-color: #282828;
  --theme-popup-background-color: #edf5e7;
  /* BASKET */
  --theme-basket-color: #525252;
  --theme-basket-background-color: #edf5e7;
  --theme-basket-header-color: #525252;
  --theme-basket-header-background-color: #fcd57b;
  --theme-basket-deal-color: #525252;
  --theme-basket-deal-background-color: #f8fbf5;
  --theme-basket-deal-header-background-color: #dfedd4;
  --theme-basket-total-color: #525252;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #508919;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #7cac3e;
  --theme-basket-error-message-background-color: #d9230b;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #282828;
  --theme-mobile-menu-background-color: #ffffff;
  --theme-mobile-menu-header-color: #585858;
  --theme-mobile-menu-header-background-color: #f1f1f1;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #3c6618;
  --theme-mobile-menu-active-color: #282828;
  --theme-mobile-menu-active-background-color: #edf5e7;
  --theme-mobile-menu-separator-color: #e3e3e3;
  /* ICONS */
  --theme-burger-icon-color: #e1361e;
  --theme-basket-icon-color: #e1361e;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #60a02c;
  --theme-favourite-icon-color: #e34d26;
  /* CHECKOUT */
  --theme-checkout-background-color: #ffffff;
  --theme-checkout-separator-color: #bababa;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #d9230b;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #e1361e;
  --theme-table-border-color: #bababa;
  --theme-table-row-separator-color: #bababa;
  --theme-table-row-color: #282828;
  --theme-table-row-background-color: #ffffff;
  --theme-table-row-even-color: #282828;
  --theme-table-row-even-background-color: #edf5e7;
  --theme-table-row-hover-color: #ffffff;
  --theme-table-row-hover-background-color: #7cac3e;
  /* FORMS */
  --theme-input-text-color: #282828;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #4f4f4f;
  --theme-dropdown-border-color: #4f4f4f; }

/* DARK GARNET ASH THEME (Red, Black, White) */
.color-set-garnet-ash {
  /* PAGE, BODY */
  --theme-text-color: #faf8eb;
  --theme-title-color: #f7394e;
  --theme-link-color: #faf8eb;
  --theme-link-hover-color: #faf8eb;
  --theme-background-color: #201f1f;
  --theme-section-background-color: #2d2a26;
  /* HEADER */
  --theme-header-color: #ffffff;
  --theme-header-background-color: #201f1f;
  --theme-header-logo-color: #ffffff;
  /* FOOTER */
  --theme-footer-color: #ffffff;
  --theme-footer-background-color: #201f1f;
  --theme-footer-socials-hover-color: #f7394e;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #f7394e;
  --theme-button-hover-color: #f7394e;
  --theme-button-hover-background-color: #ffffff;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #201f1f;
  --theme-index-order-button-hover-color: #201f1f;
  --theme-index-order-button-hover-background-color: #ffffff;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #292929;
  --theme-message-info-background-color: #bdead5;
  --theme-message-error-background-color: #d7b208;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffffff;
  --theme-nav-item-hover-color: #f7394e;
  --theme-nav-item-hover-background-color: #ffffff;
  --theme-nav-item-selected-color: #f7394e;
  --theme-nav-item-selected-background-color: #ffffff;
  --theme-nav-background-color: #f7394e;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #f7394e;
  --theme-left-nav-link-color: #f7394e;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #f7394e;
  /* PRODUCT */
  --theme-product-text-color: #292929;
  --theme-product-title-color: #f7394e;
  --theme-product-price-color: #f7394e;
  --theme-product-background-color: #ffffff;
  --theme-product-zebra-background-color: #faf8eb;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #f7394e;
  --theme-product-border-color: #ffffff;
  --theme-product-hover-border-color: #f7394e;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #ffffff;
  --theme-popup-title-color: #f7394e;
  --theme-popup-background-color: #2d2a26;
  /* BASKET */
  --theme-basket-color: #292929;
  --theme-basket-background-color: #faf8eb;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #f7394e;
  --theme-basket-deal-color: #292929;
  --theme-basket-deal-background-color: #bdead5;
  --theme-basket-deal-header-background-color: #d7b208;
  --theme-basket-total-color: #f7394e;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #f7394e;
  --theme-basket-message-text-color: #292929;
  --theme-basket-important-message-background-color: #bdead5;
  --theme-basket-error-message-background-color: #d7b208;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #292929;
  --theme-mobile-menu-background-color: #faf8eb;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #f7394e;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #f7394e;
  --theme-mobile-menu-active-color: #ffffff;
  --theme-mobile-menu-active-background-color: #f7394e;
  --theme-mobile-menu-separator-color: #f7394e;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #f7394e;
  --theme-favourite-icon-color: #f7394e;
  /* CHECKOUT */
  --theme-checkout-background-color: #2d2a26;
  --theme-checkout-separator-color: #f7394e;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #f7394e;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #f7394e;
  --theme-table-border-color: #f7394e;
  --theme-table-row-separator-color: #f7394e;
  --theme-table-row-color: #292929;
  --theme-table-row-background-color: #ffffff;
  --theme-table-row-even-color: #292929;
  --theme-table-row-even-background-color: #ece9df;
  --theme-table-row-hover-color: #f7394e;
  --theme-table-row-hover-background-color: #bcead4;
  /* FORMS */
  --theme-input-text-color: #ffffff;
  --theme-input-background-color: #2d2a26;
  --theme-input-border-color: #f7394e;
  --theme-dropdown-border-color: #f7394e; }

/* LIGHT CRIMSON STONE THEME (Red, Grey, White) */
.color-set-crimson-stone {
  /* PAGE, BODY */
  --theme-text-color: #505356;
  --theme-title-color: #505356;
  --theme-link-color: #505356;
  --theme-link-hover-color: #505356;
  --theme-background-color: #ebebeb;
  --theme-section-background-color: #fff;
  /* HEADER */
  --theme-header-color: #fff;
  --theme-header-background-color: #af1e2c;
  --theme-header-logo-color: #fff;
  /* FOOTER */
  --theme-footer-color: #fff;
  --theme-footer-background-color: #505356;
  --theme-footer-socials-hover-color: #af1e2c;
  /* BUTTONS */
  --theme-button-color: #fff;
  --theme-button-background-color: #af1e2c;
  --theme-button-hover-color: #fff;
  --theme-button-hover-background-color: #000;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #fff;
  --theme-index-order-button-background-color: #af1e2c;
  --theme-index-order-button-hover-color: #fff;
  --theme-index-order-button-hover-background-color: #000;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #fff;
  --theme-message-info-background-color: #505356;
  --theme-message-error-background-color: #ff0000;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #fff;
  --theme-nav-item-hover-color: #fff;
  --theme-nav-item-hover-background-color: #af1e2c;
  --theme-nav-item-selected-color: #fff;
  --theme-nav-item-selected-background-color: #af1e2c;
  --theme-nav-background-color: #505356;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #a5a5a5;
  --theme-left-nav-link-color: #505356;
  --theme-left-nav-link-hover-color: #fff;
  --theme-left-nav-link-hover-background-color: #af1e2c;
  /* PRODUCT */
  --theme-product-text-color: #505356;
  --theme-product-title-color: #505356;
  --theme-product-price-color: #af1e2c;
  --theme-product-background-color: #fff;
  --theme-product-zebra-background-color: #636668;
  --theme-product-counter-color: #fff;
  --theme-product-counter-background-color: #af1e2c;
  --theme-product-border-color: #fff;
  --theme-product-hover-border-color: #af1e2c;
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #505356;
  --theme-popup-title-color: #505356;
  --theme-popup-background-color: #fff;
  /* BASKET */
  --theme-basket-color: #fff;
  --theme-basket-background-color: #505356;
  --theme-basket-header-color: #fff;
  --theme-basket-header-background-color: #505356;
  --theme-basket-deal-color: #fff;
  --theme-basket-deal-background-color: #a5a5a5;
  --theme-basket-deal-header-background-color: #636668;
  --theme-basket-total-color: #fff;
  --theme-basket-savings-color: #505356;
  --theme-basket-savings-background-color: #fae0aa;
  --theme-basket-message-text-color: #fff;
  --theme-basket-important-message-background-color: #505356;
  --theme-basket-error-message-background-color: #ff0000;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #fff;
  --theme-mobile-menu-background-color: #505356;
  --theme-mobile-menu-header-color: #fff;
  --theme-mobile-menu-header-background-color: #28292b;
  --theme-mobile-menu-unfolded-color: #fff;
  --theme-mobile-menu-unfolded-background-color: #af1e2c;
  --theme-mobile-menu-active-color: #fff;
  --theme-mobile-menu-active-background-color: #3a3c3e;
  --theme-mobile-menu-separator-color: #5d6062;
  /* ICONS */
  --theme-burger-icon-color: #fff;
  --theme-basket-icon-color: #fff;
  --theme-basket-count-color: #fff;
  --theme-basket-count-background-color: #f5be4e;
  --theme-favourite-icon-color: #af1e2c;
  /* CHECKOUT */
  --theme-checkout-background-color: #fff;
  --theme-checkout-separator-color: #a5a5a5;
  --theme-checkout-error-color: #fff;
  --theme-checkout-error-background-color: #ff0000;
  /* TABLES */
  --theme-table-header-color: #fff;
  --theme-table-header-background-color: #af1e2c;
  --theme-table-border-color: #a5a5a5;
  --theme-table-row-separator-color: #a5a5a5;
  --theme-table-row-color: #fff;
  --theme-table-row-background-color: #505356;
  --theme-table-row-even-color: #fff;
  --theme-table-row-even-background-color: #636668;
  --theme-table-row-hover-color: #505356;
  --theme-table-row-hover-background-color: #fae0aa;
  /* FORMS */
  --theme-input-text-color: #505356;
  --theme-input-background-color: #fff;
  --theme-input-border-color: #a5a5a5;
  --theme-dropdown-border-color: #a5a5a5; }

/* DARK SEARING SUNSET THEME (Red, Orange, Dark Gray/Black) */
.color-set-searing-sunset {
  /* PAGE, BODY */
  --theme-text-color: #f1f1f1;
  --theme-title-color: #e80808;
  --theme-link-color: #f1f1f1;
  --theme-link-hover-color: #f1f1f1;
  --theme-background-color: #1e1e1e;
  --theme-section-background-color: #151515;
  /* HEADER */
  --theme-header-color: #f1f1f1;
  --theme-header-background-color: #e80808;
  --theme-header-logo-color: #f1f1f1;
  /* FOOTER */
  --theme-footer-color: #f1f1f1;
  --theme-footer-background-color: #c2723f;
  --theme-footer-socials-hover-color: #ff8c42;
  /* BUTTONS */
  --theme-button-color: #f1f1f1;
  --theme-button-background-color: #ff8c42;
  --theme-button-hover-color: #ff8c42;
  --theme-button-hover-background-color: #ffd4b8;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #e80808;
  --theme-index-order-button-hover-color: #e80808;
  --theme-index-order-button-hover-background-color: #ffffff;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #f1f1f1;
  --theme-message-info-background-color: #4caf50;
  --theme-message-error-background-color: #f44336;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ff8c42;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #ff8c42;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #ff8c42;
  --theme-nav-background-color: #151515;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #777777;
  --theme-left-nav-link-color: #ff8c42;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #ff8c42;
  /* PRODUCT */
  --theme-product-text-color: #f1f1f1;
  --theme-product-title-color: #e80808;
  --theme-product-price-color: #ff4444;
  --theme-product-background-color: #292828;
  --theme-product-zebra-background-color: #242323;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #e80808;
  --theme-product-border-color: #a9a9a9;
  --theme-product-hover-border-color: rgba(169, 169, 169, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #f1f1f1;
  --theme-popup-title-color: #e80808;
  --theme-popup-background-color: #1e1e1e;
  /* BASKET */
  --theme-basket-color: #f7f7f7;
  --theme-basket-background-color: #2d2d2d;
  --theme-basket-header-color: #f7f7f7;
  --theme-basket-header-background-color: #e80808;
  --theme-basket-deal-color: #000;
  --theme-basket-deal-background-color: #fde6d7;
  --theme-basket-deal-header-background-color: #f6c8aa;
  --theme-basket-total-color: #f7f7f7;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #f7f7f7;
  --theme-basket-important-message-background-color: #fbaf40;
  --theme-basket-error-message-background-color: #ee4036;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #f7f7f7;
  --theme-mobile-menu-background-color: #2d2d2d;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #e80808;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #ff8c42;
  --theme-mobile-menu-active-color: #000;
  --theme-mobile-menu-active-background-color: #f6c8aa;
  --theme-mobile-menu-separator-color: #555555;
  /* ICONS */
  --theme-burger-icon-color: #f1f1f1;
  --theme-basket-icon-color: #f1f1f1;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #ff8a00;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #2d2d2d;
  --theme-checkout-separator-color: #a9a9a9;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ee4036;
  /* TABLES */
  --theme-table-header-color: #f1f1f1;
  --theme-table-header-background-color: #e80808;
  --theme-table-border-color: #f6c8aa;
  --theme-table-row-separator-color: #555555;
  --theme-table-row-color: #f1f1f1;
  --theme-table-row-background-color: #292828;
  --theme-table-row-even-color: #f1f1f1;
  --theme-table-row-even-background-color: #1e1e1e;
  --theme-table-row-hover-color: #000;
  --theme-table-row-hover-background-color: #f6c8aa;
  /* FORMS */
  --theme-input-text-color: #f1f1f1;
  --theme-input-background-color: #1e1e1e;
  --theme-input-border-color: #a9a9a9;
  --theme-dropdown-border-color: #a9a9a9; }

/* LIGHT COPPER DAWN THEME (Red, Orange, Light grey, White) */
.color-set-copper-dawn {
  /* PAGE, BODY */
  --theme-text-color: #333333;
  --theme-title-color: #e80808;
  --theme-link-color: #333333;
  --theme-link-hover-color: #333333;
  --theme-background-color: #ffffff;
  --theme-section-background-color: #f7f7f7;
  /* HEADER */
  --theme-header-color: #f1f1f1;
  --theme-header-background-color: #e80808;
  --theme-header-logo-color: #f1f1f1;
  /* FOOTER */
  --theme-footer-color: #f1f1f1;
  --theme-footer-background-color: #c2723f;
  --theme-footer-socials-hover-color: #ff8c42;
  /* BUTTONS */
  --theme-button-color: #ffffff;
  --theme-button-background-color: #ff8c42;
  --theme-button-hover-color: #ff8c42;
  --theme-button-hover-background-color: #ffd4b8;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #ffffff;
  --theme-index-order-button-background-color: #e80808;
  --theme-index-order-button-hover-color: #ffffff;
  --theme-index-order-button-hover-background-color: #ff6b6b;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #ffffff;
  --theme-message-info-background-color: #4caf50;
  --theme-message-error-background-color: #f44336;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #000000;
  --theme-nav-item-hover-color: #ffffff;
  --theme-nav-item-hover-background-color: #ff8c42;
  --theme-nav-item-selected-color: #ffffff;
  --theme-nav-item-selected-background-color: #ff8c42;
  --theme-nav-background-color: #ffedd5;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #bebebe;
  --theme-left-nav-link-color: #000000;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #ff8c42;
  /* PRODUCT */
  --theme-product-text-color: #333333;
  --theme-product-title-color: #e80808;
  --theme-product-price-color: #ff4444;
  --theme-product-background-color: #f7f7f7;
  --theme-product-zebra-background-color: #f0f0f0;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #e80808;
  --theme-product-border-color: #bebebe;
  --theme-product-hover-border-color: rgba(190, 190, 190, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #333333;
  --theme-popup-title-color: #e80808;
  --theme-popup-background-color: #f7f7f7;
  /* BASKET */
  --theme-basket-color: #333333;
  --theme-basket-background-color: #f0f0f0;
  --theme-basket-header-color: #ffffff;
  --theme-basket-header-background-color: #e80808;
  --theme-basket-deal-color: #000000;
  --theme-basket-deal-background-color: #fde6d7;
  --theme-basket-deal-header-background-color: #f6c8aa;
  --theme-basket-total-color: #000000;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #fbaf40;
  --theme-basket-error-message-background-color: #ee4036;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #333333;
  --theme-mobile-menu-background-color: #f7f7f7;
  --theme-mobile-menu-header-color: #ffffff;
  --theme-mobile-menu-header-background-color: #e80808;
  --theme-mobile-menu-unfolded-color: #ffffff;
  --theme-mobile-menu-unfolded-background-color: #ff8c42;
  --theme-mobile-menu-active-color: #000000;
  --theme-mobile-menu-active-background-color: #f6c8aa;
  --theme-mobile-menu-separator-color: #dddddd;
  /* ICONS */
  --theme-burger-icon-color: #ffffff;
  --theme-basket-icon-color: #ffffff;
  --theme-basket-count-color: #ffffff;
  --theme-basket-count-background-color: #ff8a00;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #f0f0f0;
  --theme-checkout-separator-color: #dddddd;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #ee4036;
  /* TABLES */
  --theme-table-header-color: #ffffff;
  --theme-table-header-background-color: #e80808;
  --theme-table-border-color: #f6c8aa;
  --theme-table-row-separator-color: #dddddd;
  --theme-table-row-color: #000000;
  --theme-table-row-background-color: #f7f7f7;
  --theme-table-row-even-color: #000000;
  --theme-table-row-even-background-color: #ececec;
  --theme-table-row-hover-color: #000000;
  --theme-table-row-hover-background-color: #f6c8aa;
  /* FORMS */
  --theme-input-text-color: #333333;
  --theme-input-background-color: #ffffff;
  --theme-input-border-color: #c4b6b6;
  --theme-dropdown-border-color: #bebebe; }

/* DARK OBSIDIAN ECHO THEME (Yellow, Black, Grey) */
.color-set-obsidian-echo {
  /* PAGE, BODY */
  --theme-text-color: #d5d5d5;
  --theme-title-color: #ffcd00;
  --theme-link-color: #ffcd00;
  --theme-link-hover-color: #ffcd00;
  --theme-background-color: #303030;
  --theme-section-background-color: #1d1c1c;
  /* HEADER */
  --theme-header-color: #000000;
  --theme-header-background-color: #e4b700;
  --theme-header-logo-color: #000000;
  /* FOOTER */
  --theme-footer-color: #d5d5d5;
  --theme-footer-background-color: #1c1b1b;
  --theme-footer-socials-hover-color: #ffcd00;
  /* BUTTONS */
  --theme-button-color: #1c1b1b;
  --theme-button-background-color: #ffcd00;
  --theme-button-hover-color: #1c1b1b;
  --theme-button-hover-background-color: #fdeca5;
  /* ORDER ONLINE BUTTON ON HOMEPAGE */
  --theme-index-order-button-color: #1c1b1b;
  --theme-index-order-button-background-color: #ffcd00;
  --theme-index-order-button-hover-color: #1c1b1b;
  --theme-index-order-button-hover-background-color: #ffffff;
  /* MICROBLOGS */
  --theme-microblog-color: var(--theme-text-color);
  --theme-microblog-title-color: var(--theme-title-color);
  --theme-microblog-link-color: var(--theme-button-color);
  --theme-microblog-link-background-color: var(--theme-button-background-color);
  --theme-microblog-link-hover-color: var(--theme-button-hover-color);
  --theme-microblog-link-hover-background-color: var(--theme-button-hover-background-color);
  --theme-microblog-post-background-color: var(--theme-section-background-color);
  --theme-microblog-background-color: transparent;
  --theme-microblog-shadow-color: var(--theme-text-color);
  /* TOP MESSAGES */
  --theme-message-color: #f1f1f1;
  --theme-message-info-background-color: #5a813f;
  --theme-message-error-background-color: #991b1e;
  /* HORIZONTAL NAVIGATION */
  --theme-nav-item-color: #ffcd00;
  --theme-nav-item-hover-color: #000000;
  --theme-nav-item-hover-background-color: #ffcd00;
  --theme-nav-item-selected-color: #000000;
  --theme-nav-item-selected-background-color: #ffcd00;
  --theme-nav-background-color: #000000;
  /* LEFT HAND SIDE NAVIGATION */
  --theme-left-nav-border-color: #8c8c8c;
  --theme-left-nav-link-color: #ffcd00;
  --theme-left-nav-link-hover-color: #ffffff;
  --theme-left-nav-link-hover-background-color: #ffcd00;
  /* PRODUCT */
  --theme-product-text-color: #d5d5d5;
  --theme-product-title-color: #ffcd00;
  --theme-product-price-color: #d5d5d5;
  --theme-product-background-color: #292828;
  --theme-product-zebra-background-color: #242323;
  --theme-product-counter-color: #ffffff;
  --theme-product-counter-background-color: #ffcd00;
  --theme-product-border-color: #a9a9a9;
  --theme-product-hover-border-color: rgba(169, 169, 169, 0.2);
  /* CUSTOMIZATION POPUP */
  --theme-popup-color: #d5d5d5;
  --theme-popup-title-color: #ffcd00;
  --theme-popup-background-color: #282828;
  /* BASKET */
  --theme-basket-color: #d5d5d5;
  --theme-basket-background-color: #222121;
  --theme-basket-header-color: #ffcd00;
  --theme-basket-header-background-color: #1d1c1c;
  --theme-basket-deal-color: #ffffff;
  --theme-basket-deal-background-color: #373634;
  --theme-basket-deal-header-background-color: #766c5e;
  --theme-basket-total-color: #d5d5d5;
  --theme-basket-savings-color: #ffffff;
  --theme-basket-savings-background-color: #82b155;
  --theme-basket-message-text-color: #ffffff;
  --theme-basket-important-message-background-color: #f07a05;
  --theme-basket-error-message-background-color: #c90c0c;
  /* MOBILE MENU */
  --theme-mobile-menu-color: #d5d5d5;
  --theme-mobile-menu-background-color: #282828;
  --theme-mobile-menu-header-color: #ffcd00;
  --theme-mobile-menu-header-background-color: #1c1b1b;
  --theme-mobile-menu-unfolded-color: #1c1b1b;
  --theme-mobile-menu-unfolded-background-color: #ffcd00;
  --theme-mobile-menu-active-color: #ffcd00;
  --theme-mobile-menu-active-background-color: #1d1c1c;
  --theme-mobile-menu-separator-color: #525252;
  /* ICONS */
  --theme-burger-icon-color: #000000;
  --theme-basket-icon-color: #000000;
  --theme-basket-count-color: #000000;
  --theme-basket-count-background-color: #f1f1f1;
  --theme-favourite-icon-color: #d9230b;
  /* CHECKOUT */
  --theme-checkout-background-color: #1d1c1c;
  --theme-checkout-separator-color: #383838;
  --theme-checkout-error-color: #ffffff;
  --theme-checkout-error-background-color: #c90c0c;
  /* TABLES */
  --theme-table-header-color: #ffcd00;
  --theme-table-header-background-color: #000000;
  --theme-table-border-color: #1d1c1c;
  --theme-table-row-separator-color: #111111;
  --theme-table-row-color: #f1f1f1;
  --theme-table-row-background-color: #2d2c2c;
  --theme-table-row-even-color: #f1f1f1;
  --theme-table-row-even-background-color: #222121;
  --theme-table-row-hover-color: #000000;
  --theme-table-row-hover-background-color: #caae3a;
  /* FORMS */
  --theme-input-text-color: #d5d5d5;
  --theme-input-background-color: #1d1c1c;
  --theme-input-border-color: #383838;
  --theme-dropdown-border-color: #a9a9a9; }

/* PREDEFINED FONTS LIST */
/* DEFAULT SETTINGS */
/* END OF DEFAULT SETTINGS */
:root {
  --extended-theme-primary-border-radius: 0;
  --extended-theme-secondary-border-radius: 0;
  --extended-theme-navigation-item-border-radius: 0; }

/*  FONT MIXINS
    -------------------------------------------------------------------------- */
.extended-mode {
  /*  Extended reset
      -------------------------------------------------------------------------- */
  /*  Rounding mode
      -------------------------------------------------------------------------- */
  /*  Common styles
  -------------------------------------------------------------------------- */
  font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
  font-size: 1.4rem;
  font-weight: var(--theme-text-font-weight, 400);
  text-transform: var(--theme-text-transform, none);
  line-height: 1.8rem;
  color: var(--theme-text-color, #212121);
  background-color: var(--theme-background-color, #fff);
  background-position: center;
  background-repeat: repeat;
  background-size: 100%;
  /*  Layouts
      -------------------------------------------------------------------------- */
  /*  Page header
      -------------------------------------------------------------------------- */
  /*  Social icons - new default
      -------------------------------------------------------------------------- */
  /*  Page footer
      -------------------------------------------------------------------------- */
  /*  Social icons - footer
      -------------------------------------------------------------------------- */
  /*  Scroll up button
      -------------------------------------------------------------------------- */
  /*  GDPR consent
      -------------------------------------------------------------------------- */
  /*  NiceSelect (used as a select replacement)
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      NAVIGATION
      ========================================================================== */
  /*  Desktop navigation: */
  /* -------------------------------------------------------------------------- */
  /*  Account navigation
      -------------------------------------------------------------------------- */
  /*  Desktop navigation: */
  /* -------------------------------------------------------------------------- */
  /*  Desktop: user and shop menus
      -------------------------------------------------------------------------- */
  /*  Basket in the header - case when we display it like a popup
  -------------------------------------------------------------------------- */
  /*  Mobile: off-canvas
      -------------------------------------------------------------------------- */
  /*  Mobile: menu on the left (navigation)
      -------------------------------------------------------------------------- */
  /*  Mobile menu credits info
      -------------------------------------------------------------------------- */
  /*  Mobile: menu on the right (basket)
      -------------------------------------------------------------------------- */
  /*  Shop info. */
  /* -------------------------------------------------------------------------- */
  /*  Social icons - shop info
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      CATEGORY PAGE
      ========================================================================== */
  /*  Categories
      -------------------------------------------------------------------------- */
  /*  Product
      -------------------------------------------------------------------------- */
  /*  Product zebra. Used in: */
  /* -------------------------------------------------------------------------- */
  /*  Add & customise buttons
      -------------------------------------------------------------------------- */
  /*  Favourite icon
      -------------------------------------------------------------------------- */
  /*  Deal wizard
      -------------------------------------------------------------------------- */
  /*  Product tags / pictos
      -------------------------------------------------------------------------- */
  /*  Allergen tags
      -------------------------------------------------------------------------- */
  /*  Product tags
      -------------------------------------------------------------------------- */
  /*  Product pictos
      -------------------------------------------------------------------------- */
  /*  Product pictos
      -------------------------------------------------------------------------- */
  /*  Product legend
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      BASKET
      ========================================================================== */
  /*  Basket header
      -------------------------------------------------------------------------- */
  /*  Basket item
      -------------------------------------------------------------------------- */
  /*  Basket deal title
      -------------------------------------------------------------------------- */
  /*  Basket deal item
      -------------------------------------------------------------------------- */
  /*  Basket accessory
      -------------------------------------------------------------------------- */
  /*  Delivery method switcher
      -------------------------------------------------------------------------- */
  /*  Basket in the header - fixes to display basket features
  -------------------------------------------------------------------------- */
  /*  Basket footer
      -------------------------------------------------------------------------- */
  /*  Basket order button
      -------------------------------------------------------------------------- */
  /*  Mobile basket button
      -------------------------------------------------------------------------- */
  /*  Basket savings
      -------------------------------------------------------------------------- */
  /*  Basket tip
      -------------------------------------------------------------------------- */
  /*  Basket coupon
      -------------------------------------------------------------------------- */
  /*  Basket messages
      -------------------------------------------------------------------------- */
  /*  Basket clickable promotions
      -------------------------------------------------------------------------- */
  /*  Basket upsellings
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      CUSTOMIZATION POPUP
      ========================================================================== */
  /*  Popup group
      -------------------------------------------------------------------------- */
  /*  Popup row
      -------------------------------------------------------------------------- */
  /*  Popup enum
      -------------------------------------------------------------------------- */
  /*  Popup set
      -------------------------------------------------------------------------- */
  /*  Popup buttons
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      CHECKOUT, ACCOUNT & ORDER PAGES
      ========================================================================== */
  /*  Phone field validation (LP-1843)
      -------------------------------------------------------------------------- */
  /*  Radio button on step3
      -------------------------------------------------------------------------- */
  /*  Checkbox on login section
      -------------------------------------------------------------------------- */
  /*  Contact free delivery
      -------------------------------------------------------------------------- */
  /*  Checkout atoms
      -------------------------------------------------------------------------- */
  /*  Labels above input field in forms (desktop mode)
      -------------------------------------------------------------------------- */
  /*  Form buttons
      Contain a button on the right and a cancel link on the left.
      -------------------------------------------------------------------------- */
  /*  Switcher buttons as radio buttons
      -------------------------------------------------------------------------- */
  /*  Loyalty (step4)
      -------------------------------------------------------------------------- */
  /*  Checkout confirmation page (step5)
      -------------------------------------------------------------------------- */
  /*  Checkout upselling
      -------------------------------------------------------------------------- */
  /*  User registration error (invalid/empty fields)
      -------------------------------------------------------------------------- */
  /*  Checkout/Account referral program
      -------------------------------------------------------------------------- */
  /*  Thank you page referrence banner link
      -------------------------------------------------------------------------- */
  /*  Order page
      -------------------------------------------------------------------------- */
  /*  Order row
      -------------------------------------------------------------------------- */
  /*  Order
      -------------------------------------------------------------------------- */
  /*  Credit
      -------------------------------------------------------------------------- */
  /*  Credit table
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      MESSAGES
      ========================================================================== */
  /*  Important (warning/error) message displayed at the top
      Eg. someone tries to access /account without being logged in
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      HOMEPAGE
      ========================================================================== */
  /*  Homepage: slideshow at the top
      -------------------------------------------------------------------------- */
  /*  Homepage: shop picker above the slideshow
      -------------------------------------------------------------------------- */
  /*  Homepage: connected customer
      -------------------------------------------------------------------------- */
  /*  Homepage: microblog - a series of short blocks (image + text)
      -------------------------------------------------------------------------- */
  /* Homepage: microblog - FD version
  -------------------------------------------------------------------------- */
  /*  Homepage: About us
      -------------------------------------------------------------------------- */
  /*  Homepage: newsletter signup form
      -------------------------------------------------------------------------- */
  /*  Homepage: map showing the position of the restaurant
      -------------------------------------------------------------------------- */
  /*  Social icons - index shop info
      -------------------------------------------------------------------------- */
  /*  Homepage: list of restaurants (franchises only)
      -------------------------------------------------------------------------- */
  /*  ==========================================================================
      SPECIAL FEATURES
      ========================================================================== */
  /*  --------------------------------------------------------------------------
      SKU BUTTONS
      (optional feature, available on touch but NOT on sidetouch)
      --------------------------------------------------------------------------
      Shows product sizes (skus) as buttons instead of selects.
      To activate, create a 'size_buttons' tag and set it on the chosen products/categories
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      GROUPED SKUS
      (optional feature)
      --------------------------------------------------------------------------
      Group size selection at the top of the page (instead of for every product).
      To activate, create a 'size_group' tag and set it on one or several main (topmost) categories.
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      CYO
      (optional page)
      --------------------------------------------------------------------------
      Makes a product editable in its own page instead of a popup.
      To activate, create a 'cyo' tag in theme.xml and set this tag on the product.
      -------------------------------------------------------------------------- */
  /*  Fixes for the case when basket is not in the header
  -------------------------------------------------------------------------- */
  /*  Cyo enum
      -------------------------------------------------------------------------- */
  /*  Cyo set
      -------------------------------------------------------------------------- */
  /*  Fixes for the case when basket is not in the header
  -------------------------------------------------------------------------- */
  /*  Cyo icon enum
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      Half and Half
      (optional page)
      --------------------------------------------------------------------------*/
  /*  Fixes for the case when basket is not in the header
      --------------------------------------------------------------------------*/
  /*  --------------------------------------------------------------------------
      LOCATOR
      (optional page)
      --------------------------------------------------------------------------
      Page which lets the user pick a restaurant based on his address.
      Functionality is similar to index shop picker, but on its own page.
      -------------------------------------------------------------------------- */
  /*  Locator restaurant
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      RESTAURANTS PAGE
      (optional page)
      -------------------------------------------------------------------------- */
  /*  Restaurant search
      -------------------------------------------------------------------------- */
  /*  Restaurant board
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      PASSWORD STRENGTH CHECKER
      --------------------------------------------------------------------------
      On the 'register' and 'order_step2' pages
      -------------------------------------------------------------------------- */
  /*  --------------------------------------------------------------------------
      ADVANCED LOYALTY
      (optional feature)
      --------------------------------------------------------------------------
      Can be activated by setting the "loyalty_page" boolean parameter
      - Adds a /loyalty page
      - Adds links to this page in user, account and mobile menus
      -------------------------------------------------------------------------- */
  /*  Loyalty dropdown
      -------------------------------------------------------------------------- */
  /*  Loyalty page - loyalty banner
      -------------------------------------------------------------------------- */
  /*  Loyalty page - How to
      -------------------------------------------------------------------------- */
  /*  Loyalty rewards
      -------------------------------------------------------------------------- */
  /*  Loyalty page table
      -------------------------------------------------------------------------- */
  /*  LOGIN WITH PHONE NUMBER
      -------------------------------------------------------------------------- */
  /*  Left hand side categories
      -------------------------------------------------------------------------- */
  /*  Images in categories titles and categories menus
      -------------------------------------------------------------------------- */
  /* ============================================================
     Mobile: icon-forward category navigation (LP-1951)
     Large circular icon on top, smaller label below. Active item =
     filled accent circle. Categories without a thumbnail fall back to a
     generic 'food' glyph so the row stays aligned.
     NB: PNG thumbnails can't be recoloured, so on the active item the
     image is left as-is — the accent circle + bold label carry the state.
     Placed after .category-navigation_icons so it wins same-specificity
     ties for the shared icon rules. Desktop (.category-navigation_icons
     without _mobile) and the non-icon mobile pill nav are untouched.
     Gated on :has(.category-navigation__link-icon): the circle layout only
     kicks in when at least one category actually has an icon — otherwise a
     row of identical fallback glyphs would look broken, so we keep the pills. */
  /*  PRODUCT MONOBLOCK
      -------------------------------------------------------------------------- */
  /*  THEME ROUNDED VIEW
      -------------------------------------------------------------------------- */
  /*  FULLSCREEN MODE FIXES
      -------------------------------------------------------------------------- */
  /*  WIDE PRODUCT VIEW
      -------------------------------------------------------------------------- */
  /*  BASKET IN THE HEADER
      -------------------------------------------------------------------------- */
  /*  Category banner
      -------------------------------------------------------------------------- */
  /*  Header banner
      -------------------------------------------------------------------------- */
  /* Datepicker */ }
  .extended-mode * {
    box-sizing: border-box; }
  .extended-mode .account-navigation:before, .extended-mode .account-navigation:after, .extended-mode .account-navigation__list:before, .extended-mode .account-navigation__list:after, .extended-mode .basket__header:before, .extended-mode .basket__header:after, .extended-mode .basket__delivery:before, .extended-mode .basket__delivery:after, .extended-mode .basket__time:before, .extended-mode .basket__time:after, .extended-mode .basket__coupon-form-wrapper:before, .extended-mode .basket__coupon-form-wrapper:after, .extended-mode .basket__button-link:before, .extended-mode .basket__button-link:after, .extended-mode .basket__footer-row:before, .extended-mode .basket__footer-row:after,
  .extended-mode .basket-deal__header:before,
  .extended-mode .basket-deal__header:after, .extended-mode .basket-deal__item-title:before, .extended-mode .basket-deal__item-title:after, .extended-mode .basket-deal__item-option:before, .extended-mode .basket-deal__item-option:after, .extended-mode .basket-item__title:before, .extended-mode .basket-item__title:after, .extended-mode .basket-item__option:before, .extended-mode .basket-item__option:after, .extended-mode .card-entry__row:before, .extended-mode .card-entry__row:after, .extended-mode .card-entry__saved-card:before, .extended-mode .card-entry__saved-card:after, .extended-mode .category__description:before, .extended-mode .category__description:after,
  .extended-mode .category__products:before,
  .extended-mode .category__products:after, .extended-mode .category-navigation:before, .extended-mode .category-navigation:after, .extended-mode .category-navigation__list:before, .extended-mode .category-navigation__list:after, .extended-mode .checkout-loyalty:before, .extended-mode .checkout-loyalty:after, .extended-mode .checkout-navigation:before, .extended-mode .checkout-navigation:after, .extended-mode .checkout-navigation__list:before, .extended-mode .checkout-navigation__list:after, .extended-mode .checkout-row:before, .extended-mode .checkout-row:after, .extended-mode .checkout-variant__select:before, .extended-mode .checkout-variant__select:after,
  .extended-mode .checkout-variant__select-set:before,
  .extended-mode .checkout-variant__select-set:after, .extended-mode .content:before, .extended-mode .content:after, .extended-mode .deal-wizard-navigation__wrapper:before, .extended-mode .deal-wizard-navigation__wrapper:after, .extended-mode .form-buttons:before, .extended-mode .form-buttons:after, .extended-mode .grouped-skus__part:before, .extended-mode .grouped-skus__part:after, .extended-mode .grouped-skus__list:before, .extended-mode .grouped-skus__list:after, .extended-mode .hh-side__product:before, .extended-mode .hh-side__product:after, .extended-mode .index-connected-customer__items:before, .extended-mode .index-connected-customer__items:after,
  .extended-mode .index-locator__methods:before,
  .extended-mode .index-locator__methods:after, .extended-mode .index-locator-restaurant__header:before, .extended-mode .index-locator-restaurant__header:after, .extended-mode .index-microblog__wrapper:before, .extended-mode .index-microblog__wrapper:after, .extended-mode .index-newsletter__fieldset:before, .extended-mode .index-newsletter__fieldset:after, .extended-mode .index-shop-list__header:before, .extended-mode .index-shop-list__header:after, .extended-mode .index-shop-list__shops:before, .extended-mode .index-shop-list__shops:after, .extended-mode .locator__methods:before, .extended-mode .locator__methods:after,
  .extended-mode .locator__postcode-input-wrapper:before,
  .extended-mode .locator__postcode-input-wrapper:after, .extended-mode .locator-restaurant__header:before, .extended-mode .locator-restaurant__header:after, .extended-mode .locator-restaurant__content-header:before, .extended-mode .locator-restaurant__content-header:after, .extended-mode .mobile-basket-button .mobile-basket-button__items:before, .extended-mode .mobile-basket-button .mobile-basket-button__items:after, .extended-mode .mobile-menu__header:before, .extended-mode .mobile-menu__header:after,
  .extended-mode .order__group_columns:before,
  .extended-mode .order__group_columns:after, .extended-mode .order-row__header:before, .extended-mode .order-row__header:after, .extended-mode .order-table__header:before, .extended-mode .order-table__header:after, .extended-mode .popup__header:before, .extended-mode .popup__header:after, .extended-mode .popup__buttons:before, .extended-mode .popup__buttons:after, .extended-mode .popup-deal-line:before, .extended-mode .popup-deal-line:after, .extended-mode .popup-deal-line__details:before, .extended-mode .popup-deal-line__details:after, .extended-mode .popup-enum:before, .extended-mode .popup-enum:after, .extended-mode .popup-group__line:before, .extended-mode .popup-group__line:after,
  .extended-mode .popup-group__quantity:before,
  .extended-mode .popup-group__quantity:after, .extended-mode .popup-set__wrapper:before, .extended-mode .popup-set__wrapper:after, .extended-mode .product__bottom:before, .extended-mode .product__bottom:after, .extended-mode .product__buttons:before, .extended-mode .product__buttons:after, .extended-mode .product__form:before, .extended-mode .product__form:after, .extended-mode .product__order-level-deal:before, .extended-mode .product__order-level-deal:after, .extended-mode .product_favourites .product__form:before, .extended-mode .product_favourites .product__form:after,
  .extended-mode .product_improved .product__wrapper:before,
  .extended-mode .product_improved .product__wrapper:after, .extended-mode .restaurants:before, .extended-mode .restaurants:after, .extended-mode .shop-info__header:before, .extended-mode .shop-info__header:after, .extended-mode .shop-info__card-icons:before, .extended-mode .shop-info__card-icons:after, .extended-mode .shop-info__feature:before, .extended-mode .shop-info__feature:after, .extended-mode .sku-buttons__part:before, .extended-mode .sku-buttons__part:after, .extended-mode .sku-buttons__list:before, .extended-mode .sku-buttons__list:after,
  .extended-mode .social-icons:before,
  .extended-mode .social-icons:after, .extended-mode .cyo__header:before, .extended-mode .cyo__header:after, .extended-mode .cyo__footer:before, .extended-mode .cyo__footer:after, .extended-mode .cyo-enum:before, .extended-mode .cyo-enum:after, .extended-mode .cyo-set:before, .extended-mode .cyo-set:after, .extended-mode .hh-side__product:before, .extended-mode .hh-side__product:after {
    display: none; }
  .extended-mode .account-navigation__wrapper, .extended-mode .category-navigation__wrapper, .extended-mode .checkout-error__wrapper, .extended-mode .checkout-navigation__wrapper, .extended-mode .content__wrapper, .extended-mode .footer__wrapper, .extended-mode .header__wrapper,
  .extended-mode .index-map__wrapper, .extended-mode .slider__wrapper, .extended-mode .index-connected-customer__wrapper, .extended-mode .index-microblog__wrapper, .extended-mode .index-about__wrapper, .extended-mode .index-newsletter__wrapper,
  .extended-mode .index-shop-list__wrapper, .extended-mode .message__wrapper {
    max-width: 120rem; }
    .extended-mode .account-navigation__wrapper:before, .extended-mode .account-navigation__wrapper:after, .extended-mode .category-navigation__wrapper:before, .extended-mode .category-navigation__wrapper:after, .extended-mode .checkout-error__wrapper:before, .extended-mode .checkout-error__wrapper:after, .extended-mode .checkout-navigation__wrapper:before, .extended-mode .checkout-navigation__wrapper:after, .extended-mode .content__wrapper:before, .extended-mode .content__wrapper:after, .extended-mode .footer__wrapper:before, .extended-mode .footer__wrapper:after, .extended-mode .header__wrapper:before, .extended-mode .header__wrapper:after,
    .extended-mode .index-map__wrapper:before,
    .extended-mode .index-map__wrapper:after, .extended-mode .slider__wrapper:before, .extended-mode .slider__wrapper:after, .extended-mode .index-connected-customer__wrapper:before, .extended-mode .index-connected-customer__wrapper:after, .extended-mode .index-microblog__wrapper:before, .extended-mode .index-microblog__wrapper:after, .extended-mode .index-about__wrapper:before, .extended-mode .index-about__wrapper:after, .extended-mode .index-newsletter__wrapper:before, .extended-mode .index-newsletter__wrapper:after,
    .extended-mode .index-shop-list__wrapper:before,
    .extended-mode .index-shop-list__wrapper:after, .extended-mode .message__wrapper:before, .extended-mode .message__wrapper:after {
      display: none; }
  .extended-mode.page_fullscreen .account-navigation__wrapper, .extended-mode.page_fullscreen .category-navigation__wrapper, .extended-mode.page_fullscreen .checkout-error__wrapper, .extended-mode.page_fullscreen .checkout-navigation__wrapper, .extended-mode.page_fullscreen .content__wrapper, .extended-mode.page_fullscreen .footer__wrapper,
  .extended-mode.page_fullscreen .header__wrapper, .extended-mode.page_fullscreen .index-map__wrapper, .extended-mode.page_fullscreen .slider__wrapper, .extended-mode.page_fullscreen .index-connected-customer__wrapper, .extended-mode.page_fullscreen .index-microblog__wrapper, .extended-mode.page_fullscreen .index-about__wrapper, .extended-mode.page_fullscreen .index-newsletter__wrapper,
  .extended-mode.page_fullscreen .index-shop-list__wrapper, .extended-mode.page_fullscreen .message__wrapper {
    max-width: 100%; }
  .extended-mode .message__content, .extended-mode .basket__coupon-enable, .extended-mode .basket__coupon-enabled, .extended-mode .form-buttons__link, .extended-mode .footer__nav, .extended-mode .footer__credits, .extended-mode .footer__links,
  .extended-mode .category-navigation_mobile .category-navigation__list, .extended-mode .product__counter, .extended-mode .product_improved .product__counter, .extended-mode .product_favourites .product__customise, .extended-mode .product__customise,
  .extended-mode .basket__delivery-method, .extended-mode .clickable-promotion, .extended-mode .category_upselling .product, .extended-mode .index-newsletter__fieldset, .extended-mode .index-newsletter__field-wrapper,
  .extended-mode .product, .extended-mode .product_wide .product__top, .extended-mode .product_wide .product__buttons, .extended-mode .basket-deal__delete-icon, .extended-mode .cyo-set__label, .extended-mode .popup-set__label {
    padding: 0; }
  .extended-mode .basket__coupon-add-button, .extended-mode .index-newsletter__button, .extended-mode .index-microblog__post:nth-child(2), .extended-mode .header__burger-menu, .extended-mode .social-icons__link i, .extended-mode .social-icons__link i:before,
  .extended-mode .footer__nav .social-icons__link i, .extended-mode .footer__nav .social-icons__link i:before, .extended-mode .basket__repeat, .extended-mode .basket__time .nice-select__container, .extended-mode .nice-select__container,
  .extended-mode .popup-group__quantity-minus-icon, .extended-mode .popup-group__quantity-plus-icon, .extended-mode .popup-group__quantity-minus-icon:before, .extended-mode .popup-group__quantity-plus-icon:before,
  .extended-mode .index-newsletter__title, .extended-mode .index-connected-customer__item, .extended-mode .checkout-row__group-atom, .extended-mode .index-map__shop, .extended-mode .cyo-enum__option, .extended-mode .basket__close, .extended-mode .category__products,
  .extended-mode .category__products_favourites, .extended-mode .shop-info__title, .extended-mode .popup-set__option[data-double], .extended-mode .gdpr-consent__button {
    margin: 0; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .footer__links, .extended-mode .index-newsletter .index-newsletter__title, .extended-mode .index-newsletter .index-newsletter__button {
      margin: 0; } }
  .extended-mode .social-icons__link, .extended-mode .footer .social-icons__link, .extended-mode .basket__clickable-promotions, .extended-mode .checkout-variant__label .checkout-variant__radio,
  .extended-mode .checkout-row__group-label_checkbox .checkout-row__field-checkbox, .extended-mode .credit-page__history .credit-page__history {
    padding: 0;
    margin: 0; }
  .extended-mode .basket__coupon-add-button, .extended-mode .form-buttons__button, .extended-mode .index-newsletter__button, .extended-mode .header__loyalty-menu, .extended-mode .header__user-menu, .extended-mode .header__shop-menu, .extended-mode .header__ordering-menu, .extended-mode .header__language-menu,
  .extended-mode .header__burger-menu, .extended-mode .header__basket-menu, .extended-mode .header__logo, .extended-mode .header__burger-menu, .extended-mode .header .header__wrapper .header__burger-menu, .extended-mode .header__basket-menu:has(.basket-menu),
  .extended-mode .header .header__wrapper .header__basket-menu:has(.basket-menu), .extended-mode .footer__nav, .extended-mode .footer__credits, .extended-mode .footer__links, .extended-mode .footer .social-icons, .extended-mode .nice-select, .extended-mode .shop-info_mobile .shop-info__title,
  .extended-mode .shop-info_mobile .shop-info__social-icons, .extended-mode .product__picture-container, .extended-mode .product_improved .product__picture-container, .extended-mode .product_favourites .product__picture-container,
  .extended-mode .product_favourites .product__buttons, .extended-mode .basket__title, .extended-mode .basket__repeat, .extended-mode .basket__close, .extended-mode .checkout-row__group-label_atom,
  .extended-mode .checkout-row__group-atom:first-child .checkout-row__group-label_atom, .extended-mode .category_upselling .product, .extended-mode .index-connected-customer__item, .extended-mode .index-newsletter__title,
  .extended-mode .index-newsletter__field-wrapper, .extended-mode .index-newsletter .index-newsletter__button, .extended-mode .cyo-enum__option, .extended-mode .cyo-set__option, .extended-mode .hh-side__product-left, .extended-mode .phone-box .form-buttons__button,
  .extended-mode .checkout-row__group-item_register-phone .form-buttons__button, .extended-mode .checkout__fieldset_guest-checkout .form-buttons__button, .extended-mode .product_wide, .extended-mode .product_wide .product__bottom,
  .extended-mode .product_wide .sku-buttons__item, .extended-mode .product_wide .product__customise, .extended-mode .index-microblog__post, .extended-mode .content__main, .extended-mode .product, .extended-mode .shop-info__title, .extended-mode .shop-info__social-icons,
  .extended-mode .shop-info_desktop .shop-info__feature-title, .extended-mode .shop-info_desktop .shop-info__feature-content, .extended-mode .mobile-menu__close, .extended-mode .basket-deal__delete, .extended-mode .basket-deal__item-name,
  .extended-mode .basket-deal__item-details, .extended-mode .basket-deal__item-option-details, .extended-mode .basket-item__name, .extended-mode .basket-item__details, .extended-mode .basket-item__wrapper_price, .extended-mode .basket__delivery-option,
  .extended-mode .basket__time .nice-select__container, .extended-mode .basket__total-title, .extended-mode .basket__total-amount, .extended-mode .basket__charge-title, .extended-mode .basket__charge-amount, .extended-mode .content__secondary,
  .extended-mode .content__secondary.floater-fixed, .extended-mode .popup__picture, .extended-mode .popup-enum__option, .extended-mode .popup-set__option, .extended-mode .popup-buttons__button, .extended-mode .popup-buttons__link, .extended-mode .order-table__header-item,
  .extended-mode .order-row__header-item, .extended-mode .order__group_col-2, .extended-mode .gdpr-consent__button, .extended-mode .mobile-menu__favourite-name, .extended-mode .product__sku-label, .extended-mode .deal-wizard-navigation__tab,
  .extended-mode .popup.popup_improved .popup__title-mobile-close, .extended-mode .popup.popup_improved .popup__title-mobile-close-icon, .extended-mode .popup.popup_improved .popup__title-mobile-close-icon:before,
  .extended-mode .product__customise, .extended-mode .product__add, .extended-mode .content__side, .extended-mode .sku-buttons__item, .extended-mode .locator__postcode-input, .extended-mode .locator__postcode-button, .extended-mode .index-locator__postcode-input,
  .extended-mode .index-locator__postcode-button {
    float: none; }
  .extended-mode.page_header-basket .content .content__side,
  .extended-mode.page_header-basket .content .content__side.floater-fixed,
  .extended-mode.page_header-basket .content__primary .content__side,
  .extended-mode.page_header-basket .content__primary .content__side.floater-fixed {
    float: none; }
  .extended-mode.rounded-view {
    --extended-theme-primary-border-radius: .5rem;
    --extended-theme-secondary-border-radius: 1rem;
    --extended-theme-navigation-item-border-radius: 2rem; }
  .extended-mode textarea {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 2.8rem;
    height: 3rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0); }
    .extended-mode textarea::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .content__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
  .extended-mode .content__main {
    width: calc(100% - 33.3rem);
    order: -1; }
  .extended-mode .content__side {
    width: 31.8rem; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .content__wrapper {
      flex-direction: column; }
    .extended-mode .content__main {
      width: 100%; } }
  .extended-mode .header {
    position: relative;
    /* LP-2175 (D-1): contain children + stop overlap from page-flow CTAs below the band. Additive — safe across clients. */
    background-color: var(--theme-header-background-color, #ccc);
    border-bottom: 0; }
    .extended-mode .header__wrapper {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: min-content 1fr;
      grid-template-areas: "burger logo tracking ordering lang shop loyalty account basket"; }
    .extended-mode .header__loyalty-menu, .extended-mode .header__user-menu, .extended-mode .header__shop-menu, .extended-mode .header__ordering-menu, .extended-mode .header__language-menu, .extended-mode .header__burger-menu, .extended-mode .header__basket-menu, .extended-mode .header__logo, .extended-mode .header__tracking {
      align-self: center; }
    .extended-mode .header__loyalty-menu {
      grid-area: loyalty; }
    .extended-mode .header__user-menu {
      grid-area: account; }
    .extended-mode .header__shop-menu {
      grid-area: shop; }
    .extended-mode .header__ordering-menu {
      grid-area: ordering; }
    .extended-mode .header__language-menu {
      grid-area: lang; }
    .extended-mode .header__tracking-menu {
      grid-area: tracking; }
    .extended-mode .header__burger-menu {
      grid-area: burger;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
    .extended-mode .header__basket-menu {
      grid-area: basket; }
      .extended-mode .header__basket-menu:has(.basket-menu) {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin-top: .4rem; }
    .extended-mode .header__logo {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 3rem;
      color: var(--theme-header-logo-color, #212121);
      white-space: nowrap;
      display: inline-flex;
      grid-area: logo; }
      .extended-mode .header__logo-link {
        display: inline-flex; }
      .extended-mode .header__logo-image {
        max-height: 9rem;
        width: auto;
        max-width: none; }
      .extended-mode .header__logo-image_mobile {
        max-height: 6rem;
        width: auto;
        display: none; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .header__wrapper {
        min-height: 5rem;
        position: relative; }
      .extended-mode .header__logo {
        text-align: center;
        justify-content: center; }
        .extended-mode .header__logo-image {
          display: none; }
        .extended-mode .header__logo-image_mobile {
          display: block; } }
  .extended-mode .social-icons {
    display: flex;
    gap: 1rem; }
    .extended-mode .social-icons__icon, .extended-mode .social-icons__link, .extended-mode .social-icons__link i {
      display: flex;
      align-items: center;
      justify-content: center; }
    .extended-mode .social-icons__link {
      width: 2.8rem;
      height: 2.8rem;
      font-size: 1.6rem;
      color: var(--theme-footer-color, #fff);
      background-color: transparent;
      border: solid 1px var(--theme-footer-color, #fff);
      border-radius: 50%;
      transition: all .3s ease; }
      .extended-mode .social-icons__link:hover {
        color: var(--theme-footer-socials-hover-color, #b6b6b6);
        background-color: transparent;
        border: solid 1px var(--theme-footer-socials-hover-color, #b6b6b6); }
      .extended-mode .social-icons__link i:before {
        display: block; }
  .extended-mode .footer {
    color: var(--theme-footer-color, #fff);
    background-color: var(--theme-footer-background-color, #212121); }
    .extended-mode .footer__wrapper {
      padding: 1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      @media screen and (max-width: 60em) {
        .extended-mode .footer__wrapper {
          flex-direction: column; } }
    .extended-mode .footer__nav, .extended-mode .footer__credits, .extended-mode .footer__links {
      display: flex;
      align-items: center; }
    .extended-mode .footer__nav {
      order: 2; }
      @media screen and (max-width: 60em) {
        .extended-mode .footer__nav {
          order: 1;
          flex-direction: column; } }
      @media screen and (max-width: 52.5em) {
        .extended-mode .footer__nav ~ .footer__credits {
          margin-top: 0; } }
    .extended-mode .footer__credits {
      order: 1; }
      @media screen and (max-width: 60em) {
        .extended-mode .footer__credits {
          order: 2; } }
    .extended-mode .footer__credits, .extended-mode .footer__credits .footer__link {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-footer-color, #fff); }
    .extended-mode .footer__credits-copyright, .extended-mode .footer__credits-powered-by {
      display: inline-flex; }
    .extended-mode .footer__credits .footer__link, .extended-mode .footer__credits-powered-by {
      margin-left: .3rem; }
    .extended-mode .footer__credits-copyright {
      margin-right: .3rem; }
    .extended-mode .footer__links {
      flex-wrap: wrap;
      justify-content: end; }
      .extended-mode .footer__links li {
        margin: 0 .5rem; }
      @media screen and (max-width: 60em) {
        .extended-mode .footer__links {
          justify-content: center; }
          .extended-mode .footer__links li {
            margin-bottom: 1rem; } }
    .extended-mode .footer__link {
      display: block;
      transition: color .3s ease;
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 2rem;
      color: var(--theme-footer-color, #fff);
      text-decoration: underline;
      transition: all .3s ease; }
      .extended-mode .footer__link:hover {
        color: var(--theme-footer-color, #fff);
        text-decoration: none; }
  .extended-mode .footer .social-icons {
    margin: 0 0 0 1rem; }
    @media screen and (max-width: 60em) {
      .extended-mode .footer .social-icons {
        margin-left: 0;
        margin-bottom: 1rem; } }
    .extended-mode .footer .social-icons__icon:first-child {
      margin-left: 0; }
    .extended-mode .footer .social-icons__link {
      color: var(--theme-footer-color, #fff);
      background-color: transparent;
      border: solid 1px var(--theme-footer-color, #fff); }
      .extended-mode .footer .social-icons__link:hover {
        color: var(--theme-footer-socials-hover-color, #b6b6b6);
        background-color: transparent;
        border: solid 1px var(--theme-footer-socials-hover-color, #b6b6b6); }
  .extended-mode .scroll-up {
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border-radius: var(--extended-theme-primary-border-radius);
    bottom: 6.1rem; }
    .extended-mode .scroll-up__icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
  .extended-mode .gdpr-consent {
    padding: 1.5rem 2rem;
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.3rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.9rem;
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-section-background-color, #efefef);
    box-shadow: 0 -0.3rem 0.6rem color-mix(in srgb, var(--theme-text-color, #212121) 20%, transparent);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem; }
    .extended-mode .gdpr-consent__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-text-color, #212121);
      margin: .7rem auto .7rem 0;
      order: -1; }
    .extended-mode .gdpr-consent__content {
      width: 100%; }
    .extended-mode .gdpr-consent__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.9rem 1.5rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .gdpr-consent__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .gdpr-consent {
        justify-content: center; }
        .extended-mode .gdpr-consent__title, .extended-mode .gdpr-consent__content {
          width: 100%; } }
  .extended-mode .nice-select {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    border: 1px solid var(--theme-input-border-color, #bbb);
    border-radius: var(--extended-theme-primary-border-radius);
    background-color: var(--theme-background-color, #fff);
    text-overflow: ellipsis;
    height: 3.2rem;
    line-height: 3rem;
    padding-left: 1.5rem;
    padding-right: 3rem; }
    .extended-mode .nice-select:hover {
      border-color: var(--theme-input-border-color, #bbb); }
    .extended-mode .nice-select:active, .extended-mode .nice-select.open, .extended-mode .nice-select:focus {
      border-color: var(--theme-input-border-color, #bbb); }
    .extended-mode .nice-select > .current {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--theme-text-color, #212121); }
    .extended-mode .nice-select:after {
      border-bottom: 2px solid var(--theme-input-border-color, #bbb);
      border-right: 2px solid var(--theme-input-border-color, #bbb);
      height: .5rem;
      width: .5rem;
      margin-top: -.4rem;
      right: 1.2rem; }
    .extended-mode .nice-select.disabled {
      border-color: color-mix(in srgb, var(--theme-input-border-color, #bbb) 20%, transparent);
      color: color-mix(in srgb, var(--theme-text-color, #212121) 20%, transparent); }
      .extended-mode .nice-select.disabled:after {
        border-color: color-mix(in srgb, var(--theme-input-border-color, #bbb) 20%, transparent); }
    .extended-mode .nice-select .list {
      width: calc(100% + 2px);
      background-color: var(--theme-background-color, #fff);
      box-shadow: none;
      border: solid 1px var(--theme-input-border-color, #bbb);
      margin-top: 1px;
      margin-left: -1px;
      max-height: 26rem; }
      .extended-mode .nice-select .list:hover .option:not(:hover) {
        background-color: var(--theme-background-color, #fff) !important; }
        .extended-mode .nice-select .list:hover .option:not(:hover).selected {
          background-color: color-mix(in srgb, var(--theme-button-hover-background-color, #b6b6b6) 20%, transparent) !important; }
      .extended-mode .nice-select .list:hover .option.disabled:not(:hover) {
        background-color: var(--theme-background-color, #fff) !important;
        color: color-mix(in srgb, var(--theme-text-color, #212121) 20%, transparent); }
    .extended-mode .nice-select.open .list {
      margin-top: 1px;
      border-radius: 0 0 var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius); }
    .extended-mode .nice-select .option {
      font-weight: var(--theme-text-font-weight, 400);
      padding-left: 1.5rem;
      padding-right: 2.9rem;
      min-height: 3.2rem;
      line-height: 3rem;
      color: var(--theme-text-color, #212121);
      background-color: var(--theme-background-color, #fff); }
      .extended-mode .nice-select .option:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .nice-select .option.selected {
        font-weight: bold; }
      .extended-mode .nice-select .option.focus {
        color: var(--theme-text-color, #212121);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .nice-select .option.focus.selected {
        color: var(--theme-background-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
        .extended-mode .nice-select .option.focus.selected:hover {
          color: var(--theme-background-color, #fff);
          background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .nice-select .option.disabled, .extended-mode .nice-select .option.disabled:hover, .extended-mode .nice-select .option.disabled.focus, .extended-mode .nice-select .option.disabled.focus:hover, .extended-mode .nice-select .option.disabled.selected, .extended-mode .nice-select .option.disabled.selected:hover, .extended-mode .nice-select .option.disabled.selected.focus, .extended-mode .nice-select .option.disabled.selected.focus:hover {
        background-color: color-mix(in srgb, var(--theme-background-color, #fff) 20%, transparent);
        color: color-mix(in srgb, var(--theme-text-color, #212121) 20%, transparent); }
  .extended-mode .popup .nice-select .list {
    max-height: 16.2rem;
    overflow: auto; }
  .extended-mode .category-navigation {
    background-color: var(--theme-nav-background-color, #212121);
    position: relative;
    /* Horizontal gutter that aligns the scrollable items, the side fades and
       the scroll arrows with the header content (logo on the left, basket on
       the right). Mirrors the __wrapper centering: width 96% capped at 120rem
       (1200px), so the gutter is 2% until the cap kicks in at 1250px.
       NB: the breakpoint is in px on purpose — media-query rem uses the 16px
       browser default, not the theme's html{font-size:62.5%}. */
    --nav-gutter: 2%;
    /* Reveal a side fade only when the matching arrow is shown, i.e. when
       there are items disappearing in that direction. */ }
    @media screen and (min-width: 1250px) {
      .extended-mode .category-navigation {
        --nav-gutter: calc((100% - 120rem) / 2); } }
    .extended-mode .category-navigation::after, .extended-mode .category-navigation::before {
      content: "";
      display: block;
      width: 6rem;
      height: 100%;
      position: absolute;
      top: 0;
      left: var(--nav-gutter);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
      background: linear-gradient(to right, color-mix(in srgb, var(--theme-nav-background-color, #212121) 100%, transparent) 0%, color-mix(in srgb, var(--theme-nav-background-color, #212121) 0%, transparent) 100%);
      z-index: 1; }
    .extended-mode .category-navigation::after {
      right: var(--nav-gutter);
      left: auto;
      background: linear-gradient(to left, color-mix(in srgb, var(--theme-nav-background-color, #212121) 100%, transparent) 0%, color-mix(in srgb, var(--theme-nav-background-color, #212121) 0%, transparent) 100%); }
    .extended-mode .category-navigation:not(.category-navigation_mobile):has(.category-navigation__icon--left.category-navigation__icon--visible)::before {
      opacity: 1; }
    .extended-mode .category-navigation:not(.category-navigation_mobile):has(.category-navigation__icon--right.category-navigation__icon--visible)::after {
      opacity: 1; }
    .extended-mode .category-navigation__wrapper {
      /* Centering and max-width come from @include wrapper (base) +
         extended-wrapper, exactly like .header__wrapper — so the items line
         up with the header content (logo on the left, basket on the right).
         This block only owns the horizontal scrolling. */
      padding: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; }
      .extended-mode .category-navigation__wrapper::-webkit-scrollbar {
        display: none; }
    .extended-mode .category-navigation__list {
      display: flex;
      padding-bottom: .9rem;
      padding-top: .9rem;
      gap: .5rem .8rem;
      position: relative; }
    .extended-mode .category-navigation__indicator {
      position: absolute;
      left: 0;
      top: .9rem;
      height: 4rem;
      border-radius: var(--extended-theme-navigation-item-border-radius);
      background: linear-gradient(to right, color-mix(in srgb, var(--theme-nav-item-selected-background-color, #b6b6b6) 95%, #fff), color-mix(in srgb, var(--theme-nav-item-selected-background-color, #b6b6b6) 90%, #fff) 50%, color-mix(in srgb, var(--theme-nav-item-selected-background-color, #b6b6b6) 98%, #000));
      transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1), width 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
    .extended-mode .category-navigation__item {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.4rem;
      color: var(--theme-nav-item-color, #fff);
      border-bottom: none;
      flex-shrink: 0; }
      .extended-mode .category-navigation__item_active .category-navigation__link {
        color: var(--theme-nav-item-selected-color, #212121);
        background-color: transparent; }
        .extended-mode .category-navigation__item_active .category-navigation__link:hover, .extended-mode .category-navigation__item_active .category-navigation__link:focus {
          color: var(--theme-nav-item-selected-color, #212121);
          background-color: transparent; }
    .extended-mode .category-navigation__link {
      transition: all .3s ease;
      line-height: 4rem;
      height: 4rem;
      padding-top: 0;
      padding-bottom: 0;
      border-radius: var(--extended-theme-navigation-item-border-radius); }
      .extended-mode .category-navigation__link:hover {
        color: var(--theme-nav-item-hover-color, #212121);
        background-color: var(--theme-nav-item-hover-background-color, #b6b6b6); }
        .extended-mode .category-navigation__link:hover .category-navigation__link-text,
        .extended-mode .category-navigation__link:hover .category-navigation__favourite-name,
        .extended-mode .category-navigation__link:hover .category-navigation__favourite-icon {
          transform: translateY(-1px); }
      .extended-mode .category-navigation__link:focus {
        color: currentColor;
        background-color: transparent; }
    .extended-mode .category-navigation__favourite-icon, .extended-mode .category-navigation__favourite-name, .extended-mode .category-navigation__link-text {
      position: relative;
      display: inline-flex;
      transition: transform .3s ease; }
    .extended-mode .category-navigation__icon--left {
      left: var(--nav-gutter);
      border-radius: 0 var(--extended-theme-navigation-item-border-radius) var(--extended-theme-navigation-item-border-radius) 0; }
      .extended-mode .category-navigation__icon--left:before {
        font-family: 'fontello';
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        min-width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-right: 0;
        margin-left: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: ""; }
    .extended-mode .category-navigation__icon--right {
      right: var(--nav-gutter);
      border-radius: var(--extended-theme-navigation-item-border-radius) 0 0 var(--extended-theme-navigation-item-border-radius); }
      .extended-mode .category-navigation__icon--right:before {
        font-family: 'fontello';
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        min-width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-right: 0;
        margin-left: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: ""; }
    .extended-mode .category-navigation__icon {
      display: none;
      width: 2rem;
      height: 5.8rem;
      background-color: var(--theme-nav-background-color, #212121);
      position: absolute;
      z-index: 2;
      top: 0;
      cursor: pointer;
      padding: 0;
      border: none;
      outline: none; }
      .extended-mode .category-navigation__icon:before {
        line-height: 5.8rem;
        color: var(--theme-nav-item-color, #fff);
        font-size: 1.6rem;
        font-weight: 700;
        width: 2rem;
        transition: all .3s ease; }
      .extended-mode .category-navigation__icon:hover:before, .extended-mode .category-navigation__icon:focus:before {
        color: var(--theme-nav-item-selected-background-color, #b6b6b6); }
      .extended-mode .category-navigation__icon--visible {
        display: block; }
    .extended-mode .category-navigation_mobile {
      background-color: var(--theme-nav-background-color, #212121);
      border-top: none;
      height: 5rem;
      position: relative;
      /* Side fades, re-enabled on mobile and pinned to the 2rem wrapper
         gutter (the nav scrolls within a centered calc(100% - 4rem) wrapper).
         Hidden by default (opacity 0 from the base rule); revealed per side
         below via the scroll-state classes from _menu_mobile_scroll.js.
         Extended to the edge (left/right: 0) so the fade sits BEHIND the
         transparent arrow. The solid plateau (0–45%) covers the 2rem gutter
         up to the wrapper's overflow-clip edge — hiding the hard clip "line"
         next to the arrow — and only then fades out over the items. */
      /* Non-icon mobile nav keeps the horizontal text-pill layout.
         The icon-forward layout (circle on top, label below) lives in the
         dedicated .category-navigation_mobile.category-navigation_icons block. */
      /* Reveal an arrow + its side fade only when items are scrolled off
         that edge. _menu_mobile_scroll.js toggles these classes on the nav. */ }
      .extended-mode .category-navigation_mobile::before, .extended-mode .category-navigation_mobile::after {
        width: 5rem; }
      .extended-mode .category-navigation_mobile::before {
        left: 0;
        background: linear-gradient(to right, var(--theme-nav-background-color, #212121) 0%, var(--theme-nav-background-color, #212121) 45%, color-mix(in srgb, var(--theme-nav-background-color, #212121) 0%, transparent) 100%); }
      .extended-mode .category-navigation_mobile::after {
        left: auto;
        right: 0;
        background: linear-gradient(to left, var(--theme-nav-background-color, #212121) 0%, var(--theme-nav-background-color, #212121) 45%, color-mix(in srgb, var(--theme-nav-background-color, #212121) 0%, transparent) 100%); }
      .extended-mode .category-navigation_mobile .category-navigation__wrapper {
        /* Full-width so the overflow clip sits at the screen edge (hidden by
           the fade + arrow) instead of an inset 2rem line. Items keep their
           rest breathing room from the link's own horizontal padding. */
        width: 100%;
        padding: 0; }
      .extended-mode .category-navigation_mobile .category-navigation__list {
        flex-wrap: nowrap;
        gap: 0; }
      .extended-mode .category-navigation_mobile .category-navigation__item {
        color: var(--theme-nav-item-color, #fff);
        margin: .5rem .25rem;
        border-bottom: none; }
      .extended-mode .category-navigation_mobile .category-navigation__item_active {
        color: var(--theme-nav-item-selected-color, #212121);
        border-bottom: none;
        background-color: transparent; }
        .extended-mode .category-navigation_mobile .category-navigation__item_active .category-navigation__link {
          color: var(--theme-nav-item-selected-color, #212121); }
      .extended-mode .category-navigation_mobile .category-navigation__indicator {
        top: .5rem; }
      .extended-mode .category-navigation_mobile .category-navigation__link {
        line-height: 4rem;
        padding: 0 1.5rem; }
      .extended-mode .category-navigation_mobile-icon-left {
        left: 0; }
        .extended-mode .category-navigation_mobile-icon-left:before {
          font-family: 'fontello';
          font-style: normal;
          font-weight: normal;
          speak: none;
          display: inline-block;
          text-decoration: inherit;
          min-width: 1em;
          text-align: center;
          font-variant: normal;
          text-transform: none;
          line-height: 1em;
          margin-right: 0;
          margin-left: 0;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          content: ""; }
      .extended-mode .category-navigation_mobile-icon-right {
        right: 0; }
        .extended-mode .category-navigation_mobile-icon-right:before {
          font-family: 'fontello';
          font-style: normal;
          font-weight: normal;
          speak: none;
          display: inline-block;
          text-decoration: inherit;
          min-width: 1em;
          text-align: center;
          font-variant: normal;
          text-transform: none;
          line-height: 1em;
          margin-right: 0;
          margin-left: 0;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          content: ""; }
      .extended-mode .category-navigation_mobile-icon-left, .extended-mode .category-navigation_mobile-icon-right {
        display: none;
        width: 1.9rem;
        height: 5rem;
        background-color: transparent;
        position: absolute;
        top: 0;
        z-index: 2;
        /* above the side fade (z-index 1) so the chevron stays visible */
        cursor: pointer; }
        .extended-mode .category-navigation_mobile-icon-left:before, .extended-mode .category-navigation_mobile-icon-right:before {
          line-height: 5rem;
          color: var(--theme-nav-item-color, #fff);
          font-size: 1.6rem;
          font-weight: 700;
          width: 1.9rem;
          transition: all .3s ease; }
        .extended-mode .category-navigation_mobile-icon-left:hover:before, .extended-mode .category-navigation_mobile-icon-right:hover:before {
          color: var(--theme-nav-item-selected-background-color, #b6b6b6); }
      .extended-mode .category-navigation_mobile.category-navigation_mobile-hidden-left::before {
        opacity: 1; }
      .extended-mode .category-navigation_mobile.category-navigation_mobile-hidden-left .category-navigation_mobile-icon-left {
        display: block; }
      .extended-mode .category-navigation_mobile.category-navigation_mobile-hidden-right::after {
        opacity: 1; }
      .extended-mode .category-navigation_mobile.category-navigation_mobile-hidden-right .category-navigation_mobile-icon-right {
        display: block; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .category-navigation_index-mobile {
        padding: 1rem 0; }
        .extended-mode .category-navigation_index-mobile::before, .extended-mode .category-navigation_index-mobile::after {
          display: none; } }
  .extended-mode .account-navigation {
    background-color: var(--theme-nav-background-color, #212121); }
    .extended-mode .account-navigation__item {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.4rem;
      color: var(--theme-nav-item-color, #fff); }
      .extended-mode .account-navigation__item_active .account-navigation__link {
        color: var(--theme-nav-item-selected-color, #212121);
        background-color: var(--theme-nav-item-selected-background-color, #b6b6b6); }
    .extended-mode .account-navigation__link:hover {
      color: var(--theme-nav-item-selected-color, #212121);
      background-color: var(--theme-nav-item-selected-background-color, #b6b6b6); }
  .extended-mode .checkout-navigation {
    background-color: var(--theme-nav-background-color, #212121); }
    .extended-mode .checkout-navigation__list {
      display: flex; }
    .extended-mode .checkout-navigation__item {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 5rem;
      color: var(--theme-nav-item-color, #fff);
      padding: 0 1rem; }
      .extended-mode .checkout-navigation__item_active {
        color: var(--theme-nav-item-selected-color, #212121);
        background-color: var(--theme-nav-item-selected-background-color, #b6b6b6); }
        .extended-mode .checkout-navigation__item_active:after {
          content: '';
          display: block;
          position: absolute;
          right: -19px;
          top: 0;
          width: 0;
          height: 0;
          border-bottom: 25px solid transparent;
          border-left: 19px solid var(--theme-nav-item-selected-background-color, #b6b6b6);
          border-top: 25px solid transparent; }
        .extended-mode .checkout-navigation__item_active + .checkout-navigation__item {
          padding-left: 3rem; }
  .extended-mode .dropdown-menu__header-link {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-header-color, #212121);
    padding: 1.1rem 1.6rem;
    transition: all .3s ease;
    border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .dropdown-menu__header-link:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .dropdown-menu[data-dropdown-open] .dropdown-menu__header-link {
    color: var(--theme-button-hover-color, #fff);
    background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .dropdown-menu[data-dropdown-open] .dropdown-menu__body {
    height: auto; }
  .extended-mode .dropdown-menu__header-icon:before {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    min-width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-right: .2em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: ""; }
  .extended-mode .dropdown-menu__body {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-background-color, #fff);
    border: 1px solid var(--theme-dropdown-border-color, #bbb);
    border-radius: var(--extended-theme-primary-border-radius);
    height: 0; }
    .extended-mode .dropdown-menu__body .shop-info {
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .dropdown-menu__body_loyalty {
      background-color: var(--theme-popup-background-color, #f1f1f1); }
  .extended-mode .dropdown-menu__body-link {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .dropdown-menu__items {
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
  .extended-mode .dropdown-menu__item-link {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--theme-text-color, #212121);
    transition: all .3s ease; }
    .extended-mode .dropdown-menu__item-link:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6);
      text-decoration: none; }
  .extended-mode .dropdown-menu_shop .dropdown-menu__body {
    transform-origin: 100% 0; }
  .extended-mode .dropdown-menu_loyalty .dropdown-menu__body {
    width: 43rem; }
  .extended-mode.page_header-basket .dropdowns-popup-mode .dropdown-menu_shop .dropdown-menu__body,
  .extended-mode.page_header-basket .dropdowns-popup-mode .dropdown-menu_loyalty .dropdown-menu__body {
    position: fixed;
    z-index: 1001;
    top: -100%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
    opacity: 0;
    transform-origin: 0 0;
    transition: all 0.4s ease-out; }
  .extended-mode.page_header-basket .dropdowns-popup-mode .dropdown-menu_shop[data-dropdown-open] .dropdown-menu__body,
  .extended-mode.page_header-basket .dropdowns-popup-mode .dropdown-menu_loyalty[data-dropdown-open] .dropdown-menu__body {
    top: 50%;
    opacity: 1;
    transform: scale(1) translate(-50%, -50%); }
  .extended-mode .off-canvas_open {
    background-color: var(--theme-mobile-menu-background-color, #eee); }
  .extended-mode .off-canvas_left {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-mobile-menu-background-color, #eee); }
  .extended-mode .off-canvas_right.off-canvas_open {
    background-color: var(--theme-mobile-menu-background-color, #eee); }
  @media screen and (max-width: 52.5em) {
    .extended-mode .off-canvas_right .off-canvas__wrapper {
      padding-bottom: 0; } }
  .extended-mode .burger-menu__button {
    padding: 1.2rem 0 .5rem; }
  .extended-mode .burger-menu__link {
    vertical-align: top; }
  .extended-mode .burger-menu__line {
    height: 6px;
    border-top: 2px solid var(--theme-burger-icon-color, #212121); }
  .extended-mode .mobile-menu__header {
    background-color: var(--theme-mobile-menu-header-background-color, #212121);
    padding: 1.3rem 1.2rem; }
  .extended-mode .mobile-menu__close-icon {
    color: var(--theme-mobile-menu-header-color, #fff);
    font-size: 2.5rem;
    display: flex; }
    .extended-mode .mobile-menu__close-icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .extended-mode .mobile-menu__close-icon:before {
      margin: 0; }
  .extended-mode .mobile-menu__section-link {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-mobile-menu-color, #212121);
    background-color: var(--theme-mobile-menu-background-color, #eee); }
  .extended-mode .mobile-menu__section {
    border-bottom: 1px solid var(--theme-mobile-menu-separator-color, #e5e5e5); }
    .extended-mode .mobile-menu__section_user {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-mobile-menu-header-color, #fff);
      background-color: color-mix(in srgb, var(--theme-mobile-menu-header-background-color, #212121) 40%, transparent); }
    .extended-mode .mobile-menu__section_unfolded .mobile-menu__section-link {
      color: var(--theme-mobile-menu-unfolded-color, #fff);
      background-color: var(--theme-mobile-menu-unfolded-background-color, #212121); }
    .extended-mode .mobile-menu__section_unfolded .mobile-menu__submenu .mobile-menu__item-link {
      padding-left: 3rem; }
  .extended-mode .mobile-menu__favourite-name {
    margin-right: .5rem; }
  .extended-mode .mobile-menu__item {
    border-top: 1px solid var(--theme-mobile-menu-separator-color, #e5e5e5); }
    .extended-mode .mobile-menu__item_active .mobile-menu__item-link {
      color: var(--theme-mobile-menu-active-color, #fff);
      background-color: var(--theme-mobile-menu-active-background-color, #bbb); }
    .extended-mode .mobile-menu__item_favourites .mobile-menu__item-link {
      display: flex;
      flex-direction: row-reverse;
      justify-content: start; }
  .extended-mode .mobile-menu__item-link {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-mobile-menu-color, #212121);
    background-color: var(--theme-mobile-menu-background-color, #eee); }
  .extended-mode .mobile-credits {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.2rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.2rem;
    color: var(--theme-mobile-menu-color, #212121);
    text-align: center;
    background-color: var(--theme-mobile-menu-background-color, #eee);
    border-top: 1px solid var(--theme-mobile-menu-separator-color, #e5e5e5); }
  .extended-mode .basket-menu__basket-icon {
    color: var(--theme-basket-icon-color, #212121); }
  .extended-mode .basket-menu__items {
    color: var(--theme-basket-count-color, #fff);
    background-color: var(--theme-basket-count-background-color, #212121);
    border: 2px solid var(--theme-basket-count-background-color, #212121);
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    top: -.5rem; }
  .extended-mode .shop-info {
    background-color: var(--theme-popup-background-color, #f1f1f1);
    padding: 2rem; }
    .extended-mode .shop-info__header {
      margin-bottom: 1.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .extended-mode .shop-info__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 2.3rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.8rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .shop-info__google-maps {
      margin-bottom: 1.6rem; }
    .extended-mode .shop-info__feature {
      margin-top: 1.6rem;
      display: flex;
      justify-content: space-between;
      gap: 1rem; }
    .extended-mode .shop-info__feature-title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .shop-info__feature-content {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.8rem;
      color: var(--theme-text-color, #212121); }
      .extended-mode .shop-info__feature-content p + p {
        margin-top: .5rem; }
    .extended-mode .shop-info__link {
      color: var(--theme-text-color, #212121); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .shop-info_mobile .shop-info__header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start; }
      .extended-mode .shop-info_mobile .shop-info__google-maps iframe {
        width: 100%; }
      .extended-mode .shop-info_mobile .shop-info__feature {
        margin-top: 1.6rem; }
      .extended-mode .shop-info_mobile .shop-info__feature-title {
        margin-bottom: 0;
        width: 30%; }
      .extended-mode .shop-info_mobile .shop-info__feature-content {
        width: calc(70% - 1rem); } }
    .extended-mode .shop-info_desktop .shop-info__feature-content {
      width: calc(70% - 1rem); }
  .extended-mode .shop-info__social-icons .social-icons__link {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.6rem;
    color: var(--theme-text-color, #212121);
    background-color: transparent;
    border: solid 1px var(--theme-text-color, #212121); }
    .extended-mode .shop-info__social-icons .social-icons__link:hover {
      color: var(--theme-footer-socials-hover-color, #b6b6b6);
      border: solid 1px var(--theme-footer-socials-hover-color, #b6b6b6);
      background-color: transparent; }
    .extended-mode .shop-info__social-icons .social-icons__link i:before {
      line-height: 1.6rem;
      font-size: inherit; }
  .extended-mode .category__products {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; }
    @media screen and (max-width: 23.75em) {
      .extended-mode .category__products {
        gap: .5rem; } }
  .extended-mode .category__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2.3rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 3.3rem;
    color: var(--theme-title-color, #212121);
    margin-bottom: 1rem; }
  .extended-mode .category__subcategory-title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-title-color, #212121);
    margin-bottom: 1rem; }
  .extended-mode .category__description {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    margin-bottom: 1rem; }
  @media screen and (max-width: 32em) {
    .extended-mode .category__products {
      width: 100%; } }
  .extended-mode .product {
    width: calc(33.33% - 1rem);
    margin-bottom: 0;
    background-color: transparent; }
    .extended-mode .product.product_improved .product__wrapper {
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .product.product_improved.product_with-counter:after {
      display: none; }
    .extended-mode .product__wrapper {
      background-color: var(--theme-product-background-color, #f1f1f1);
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .product.product_universal-image .product__picture-container {
      width: 100%;
      margin: 0 auto 1rem;
      border-radius: var(--extended-theme-secondary-border-radius);
      position: relative;
      aspect-ratio: 800/580; }
    .extended-mode .product.product_universal-image .product__picture {
      position: absolute;
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .extended-mode .product__picture-container {
      width: 100%;
      margin: 0 auto 1rem;
      border-radius: var(--extended-theme-secondary-border-radius);
      position: relative;
      aspect-ratio: unset; }
    .extended-mode .product__picture {
      position: static;
      transform: none;
      margin: 0 auto; }
      .extended-mode .product__picture_placeholder {
        opacity: 0; }
    .extended-mode .product__name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-product-title-color, #212121);
      word-break: break-word; }
    .extended-mode .product__description {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.8rem;
      color: var(--theme-product-text-color, #212121);
      clear: none; }
    .extended-mode .product__price {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-product-price-color, #212121); }
    .extended-mode .product__sku {
      display: flex; }
    .extended-mode .product__sku-value, .extended-mode .product__sku-label {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 3rem;
      color: var(--theme-product-text-color, #212121);
      display: inline-flex; }
    .extended-mode .product__sku-value {
      font-weight: bold; }
    .extended-mode .product .nice-select__container {
      display: inline-flex; }
    .extended-mode .product__sku-select {
      height: 3rem;
      line-height: 2.8rem; }
      .extended-mode .product__sku-select .current {
        line-height: 2.8rem; }
    .extended-mode .product__sku-buttons {
      margin: 0 auto; }
    .extended-mode .product__counter {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 3.6rem;
      color: var(--theme-product-counter-color, #fff);
      width: 3.6rem;
      height: 3.6rem;
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--theme-product-counter-background-color, #212121);
      text-align: center;
      border-radius: var(--extended-theme-secondary-border-radius) 0 var(--extended-theme-secondary-border-radius) 0; }
    .extended-mode .product__mobile-price {
      color: var(--theme-product-price-color, #212121); }
    .extended-mode .product_with-counter:after {
      display: none; }
    .extended-mode .product__top, .extended-mode .product__bottom, .extended-mode .product__buttons {
      padding: 0 1rem; }
    .extended-mode .product__buttons {
      padding-bottom: 1rem;
      display: flex;
      justify-content: space-between; }
    .extended-mode .product__bottom .product__price {
      display: none; }
    .extended-mode .product_greyed-out .product__wrapper:after {
      display: block;
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .product_without-image .product__top {
      padding-top: 1rem; }
    @media screen and (max-width: 60em) {
      .extended-mode .product {
        width: calc(50% - 0.75rem); } }
    @media screen and (max-width: 52.5em) {
      .extended-mode .product {
        width: calc(33.33% - 1rem);
        margin-bottom: 0; }
        .extended-mode .product__top {
          margin-bottom: 2.9rem; }
          .extended-mode .product__top:has(~ .product__mobile-price) {
            margin-bottom: 1rem; }
        .extended-mode .product__buttons {
          display: none; }
        .extended-mode .product_improved .product__wrapper {
          padding: 0 0 1rem; }
        .extended-mode .product_improved .product__picture-container {
          margin: 0 auto 1rem;
          width: initial; }
        .extended-mode .product_improved .product__mobile-price {
          padding: 0 1rem;
          margin-top: 1rem; }
        .extended-mode .product__picture {
          width: 100%;
          height: auto; } }
    @media screen and (max-width: 35em) {
      .extended-mode .product {
        width: calc(50% - .75rem); } }
    @media screen and (max-width: 25em) {
      .extended-mode .product {
        width: calc(50% - .75rem); } }
    @media screen and (max-width: 23.75em) {
      .extended-mode .product {
        width: calc(50% - .25rem); } }
  .extended-mode .product_favourites {
    background-color: transparent; }
    .extended-mode .product_favourites.product_greyed-out .product__wrapper {
      margin: 0;
      padding: 0; }
    .extended-mode .product_favourites:nth-child(2n+1) {
      background-color: transparent; }
    .extended-mode .product_favourites .product__picture-container {
      width: 100%;
      margin: 0 auto 1rem; }
      .extended-mode .product_favourites .product__picture-container ~ * {
        margin-left: 0; }
    .extended-mode .product_favourites .product__buttons {
      margin-top: 1rem; }
    .extended-mode .product_favourites .product__add {
      width: 100%;
      padding: .5rem 1.5rem; }
    .extended-mode .product_favourites .product__customise + .product__add {
      width: 50%; }
  .extended-mode .product__add {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    height: auto; }
    .extended-mode .product__add:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .product__customise {
    font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-links-font-weight, 400);
    text-transform: var(--theme-links-transform, none);
    line-height: 3rem;
    color: var(--theme-product-text-color, #212121);
    text-decoration: underline;
    transition: all .3s ease;
    width: auto;
    height: 3rem;
    background-color: transparent; }
    .extended-mode .product__customise:hover {
      color: var(--theme-product-text-color, #212121);
      text-decoration: none; }
    .extended-mode .product__customise:hover {
      background-color: transparent; }
  .extended-mode .product__favourite .product__favourite-icon {
    color: var(--theme-favourite-icon-color, #212121); }
  .extended-mode .deal-wizard__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2.3rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 3.3rem;
    color: var(--theme-title-color, #212121); }
  .extended-mode .deal-wizard-navigation {
    background-color: transparent;
    margin: 2rem 0 2.8rem; }
    .extended-mode .deal-wizard-navigation__wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem 0; }
    .extended-mode .deal-wizard-navigation__tab {
      margin-bottom: 0;
      background-color: transparent; }
      .extended-mode .deal-wizard-navigation__tab:nth-child(3n), .extended-mode .deal-wizard-navigation__tab:last-child {
        background-color: transparent; }
      .extended-mode .deal-wizard-navigation__tab:before {
        content: '';
        display: block;
        position: absolute;
        right: 100%;
        top: 0;
        width: 15px;
        height: 100%;
        background-color: var(--theme-button-background-color, #212121); }
      .extended-mode .deal-wizard-navigation__tab:nth-child(3n-2):before {
        display: none; }
      .extended-mode .deal-wizard-navigation__tab:nth-child(3n) {
        z-index: 7; }
      .extended-mode .deal-wizard-navigation__tab:nth-child(3n-1) {
        z-index: 8; }
      .extended-mode .deal-wizard-navigation__tab:nth-child(3n-2) {
        z-index: 9; }
      .extended-mode .deal-wizard-navigation__tab_active:before {
        background-color: var(--theme-button-background-color, #212121); }
      .extended-mode .deal-wizard-navigation__tab_active .deal-wizard-navigation__link {
        color: var(--theme-button-color, #fff);
        background-color: var(--theme-button-background-color, #212121); }
        .extended-mode .deal-wizard-navigation__tab_active .deal-wizard-navigation__link:after {
          margin-left: -1px; }
        .extended-mode .deal-wizard-navigation__tab_active .deal-wizard-navigation__link:before {
          display: block; }
      .extended-mode .deal-wizard-navigation__tab_active .deal-wizard-navigation__title:after {
        background: none; }
      .extended-mode .deal-wizard-navigation__tab_active ~ .deal-wizard-navigation__tab:before {
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .deal-wizard-navigation__tab_active ~ .deal-wizard-navigation__tab .deal-wizard-navigation__link {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
        .extended-mode .deal-wizard-navigation__tab_active ~ .deal-wizard-navigation__tab .deal-wizard-navigation__link:before {
          background-color: var(--theme-button-color, #fff); }
        .extended-mode .deal-wizard-navigation__tab_active ~ .deal-wizard-navigation__tab .deal-wizard-navigation__link:after {
          background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .deal-wizard-navigation__link {
      font-size: 1.4rem;
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      white-space: initial;
      height: 100%;
      display: flex;
      align-items: center;
      padding-top: .2rem;
      padding-bottom: .2rem; }
      .extended-mode .deal-wizard-navigation__link:before {
        border: none;
        width: 15px;
        height: 100%;
        background-color: var(--theme-button-color, #fff);
        clip-path: polygon(0 0, 100% 50%, 0 100%); }
      .extended-mode .deal-wizard-navigation__link:after {
        border: none;
        top: 1px;
        width: 14px;
        height: calc(100% - 2px);
        background-color: var(--theme-button-background-color, #212121);
        clip-path: polygon(0 0, 100% 50%, 0 100%); }
    .extended-mode .deal-wizard-navigation__title {
      line-height: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: initial;
      min-height: 3.6rem; }
      .extended-mode .deal-wizard-navigation__title:after {
        background: none; }
    @media screen and (max-width: 26.5em) {
      .extended-mode .deal-wizard-navigation__tab {
        width: 50%; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(2n) {
          background-color: transparent; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(3n-2):before {
          display: block; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(2n-1):before {
          display: none; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(3n) {
          z-index: 4; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(3n-1) {
          z-index: 5; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(3n-2) {
          z-index: 6; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(2n) {
          z-index: 7; }
        .extended-mode .deal-wizard-navigation__tab:nth-child(2n-1) {
          z-index: 8; } }
  @media screen and (min-width: 52.51em) and (max-width: 65.5em) {
    .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab {
      width: 50%; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(2n) {
        background-color: transparent; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(3n-2):before {
        display: block; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(2n-1):before {
        display: none; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(3n) {
        z-index: 4; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(3n-1) {
        z-index: 5; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(3n-2) {
        z-index: 6; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(2n) {
        z-index: 7; }
      .extended-mode:not(.page_header-basket) .content_menu-leftside .deal-wizard-navigation__tab:nth-child(2n-1) {
        z-index: 8; } }
  .extended-mode .product-picto {
    display: inline-block;
    font-size: 2rem; }
    .extended-mode .product-picto_vegan {
      color: var(--theme-tag_vegan, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_vegetarian {
      color: var(--theme-tag_vegetarian, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_spicy {
      color: var(--theme-tag_spicy, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_lightly-spiced {
      color: var(--theme-tag_lightly_spiced, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_moderately-spiced {
      color: var(--theme-tag_moderately_spiced, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_highly-spiced {
      color: var(--theme-tag_highly_spiced, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_gluten-free {
      color: var(--theme-tag_gluten_free, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_organic {
      color: var(--theme-tag_organic, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_porc-free {
      color: var(--theme-tag_porc_free, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_halal {
      color: var(--theme-tag_halal, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_nut-free {
      color: var(--theme-tag_nut_free, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_lactose-free {
      color: var(--theme-tag_lactose_free, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_gluten {
      color: var(--theme-tag-gluten, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_crustaceans {
      color: var(--theme-tag-crustaceans, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_eggs {
      color: var(--theme-tag-eggs, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_fish {
      color: var(--theme-tag-fish, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_peanuts {
      color: var(--theme-tag-peanuts, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_soya {
      color: var(--theme-tag-soya, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_milk {
      color: var(--theme-tag-milk, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_nuts {
      color: var(--theme-tag-nuts, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_celery {
      color: var(--theme-tag-celery, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_mustard {
      color: var(--theme-tag-mustard, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_sesame {
      color: var(--theme-tag-sesame, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_sulphites {
      color: var(--theme-tag-sulphites, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_lupin {
      color: var(--theme-tag-lupin, var(--theme-text-color, #212121)); }
    .extended-mode .product-picto_molluscs {
      color: var(--theme-tag-molluscs, var(--theme-text-color, #212121)); }
  .extended-mode .product-pictos {
    margin-top: .5rem;
    font-size: 1.8rem; }
    .extended-mode .product-pictos .product-picto {
      margin: 0 .2rem .2rem 0; }
  .extended-mode .product-legend {
    margin-top: 2rem; }
    .extended-mode .product-legend__item-name {
      display: inline-flex;
      line-height: 23px;
      white-space: nowrap; }
    .extended-mode .product-legend .product-picto {
      display: inline-flex;
      margin-right: .5rem;
      line-height: 23px; }
  .extended-mode .basket {
    border: 1px solid var(--theme-dropdown-border-color, #bbb);
    border-radius: var(--extended-theme-secondary-border-radius); }
  .extended-mode .basket__header {
    background-color: var(--theme-basket-header-background-color, #212121);
    border-radius: var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0 0;
    display: flex;
    justify-content: space-between; }
  .extended-mode .basket__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-header-color, #fff);
    order: 1; }
  .extended-mode .basket__repeat {
    font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
    font-size: 1.2rem;
    font-weight: var(--theme-links-font-weight, 400);
    text-transform: var(--theme-links-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-header-color, #fff);
    text-decoration: underline;
    transition: all .3s ease;
    order: 2; }
    .extended-mode .basket__repeat:hover {
      color: var(--theme-basket-header-color, #fff);
      text-decoration: none; }
  .extended-mode .basket__close {
    color: var(--theme-basket-header-color, #fff); }
  .extended-mode .basket__close-icon:before {
    margin: 0; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .basket {
      border: none; }
      .extended-mode .basket__header {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
        padding: 0.6rem 1rem;
        border-radius: 0; }
      .extended-mode .basket__repeat {
        padding-left: 0;
        padding-top: 0;
        line-height: 1.8rem; }
      .extended-mode .basket__close {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%); } }
  .extended-mode .basket__items {
    background-color: var(--theme-basket-background-color, #f1f1f1); }
    .extended-mode .basket__items .basket-item:first-child {
      padding-top: .7rem; }
  .extended-mode .basket__empty {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-color, #212121);
    background-color: var(--theme-section-background-color, #efefef); }
  .extended-mode .basket-item + .basket-item {
    margin-top: .7rem; }
  .extended-mode .basket-item__title {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-color, #212121);
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket-item__link {
    color: var(--theme-basket-color, #212121);
    word-break: break-word; }
    .extended-mode .basket-item__link:hover {
      color: var(--theme-basket-color, #212121); }
  .extended-mode .basket-item__details {
    width: calc(41% - .5rem);
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket-item__wrapper_price {
    display: flex;
    gap: 0 .2rem; }
  .extended-mode .basket-item__options {
    margin-top: 0; }
  .extended-mode .basket-item__option {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.2rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.6rem;
    color: color-mix(in srgb, var(--theme-basket-color, #212121) 60%, transparent);
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
    .extended-mode .basket-item__option:first-child {
      margin-top: .3rem; }
  .extended-mode .basket-item__option-name {
    padding-left: 0;
    flex-grow: 1; }
  .extended-mode .basket-item__option-details {
    display: flex;
    flex-shrink: 0;
    width: calc(35% - .5rem); }
  .extended-mode .basket-item__quantity {
    flex-shrink: 0; }
  .extended-mode .basket-item__quantity-minus-icon, .extended-mode .basket-item__quantity-plus-icon {
    color: var(--theme-basket-color, #212121);
    transition: all .3s ease; }
    .extended-mode .basket-item__quantity-minus-icon:hover, .extended-mode .basket-item__quantity-plus-icon:hover {
      color: var(--theme-basket-color, #212121); }
  .extended-mode .basket-item__delete-icon {
    color: var(--theme-basket-color, #212121);
    transition: all .3s ease; }
  .extended-mode .basket-item__delete:hover .basket-item__delete-icon {
    color: var(--theme-basket-color, #212121); }
  .extended-mode .basket-deal__header {
    background-color: var(--theme-basket-deal-header-background-color, #ccc);
    padding: .7rem 1.2rem;
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket-deal__title {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-deal-color, #212121);
    flex-grow: 1;
    order: 1; }
  .extended-mode .basket-deal__link {
    color: var(--theme-basket-deal-color, #212121); }
    .extended-mode .basket-deal__link:hover {
      color: var(--theme-basket-deal-color, #212121); }
  .extended-mode .basket-deal__delete-icon {
    color: var(--theme-basket-deal-color, #212121); }
    .extended-mode .basket-deal__delete-icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: 0em;
      margin-left: 0em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
  .extended-mode .basket-deal__delete {
    display: flex;
    align-items: center;
    order: 2;
    flex-shrink: 0; }
    .extended-mode .basket-deal__delete:hover .basket-deal__delete-icon {
      color: var(--theme-basket-deal-color, #212121); }
  .extended-mode .basket-deal__items {
    background-color: var(--theme-basket-deal-background-color, #e0e0e0);
    padding: .7rem 1.2rem; }
  .extended-mode .basket-deal__item + .extended-mode .basket-deal__item {
    margin-top: .7rem; }
  .extended-mode .basket-deal__item-title {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-deal-color, #212121);
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket-deal__item-details {
    width: calc(35% - .5rem);
    flex-shrink: 0; }
  .extended-mode .basket-deal__item-link {
    color: var(--theme-basket-deal-color, #212121);
    word-break: break-word; }
    .extended-mode .basket-deal__item-link:hover {
      color: var(--theme-basket-deal-color, #212121); }
  .extended-mode .basket-deal__item-option {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.2rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.6rem;
    color: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 60%, transparent);
    display: flex;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket-deal__item-option-name {
    padding-left: 0;
    flex-grow: 1; }
  .extended-mode .basket-deal__item-option-details {
    display: flex;
    flex-shrink: 0;
    width: calc(35% - .5rem); }
  .extended-mode .basket-deal__item-delete-icon {
    color: var(--theme-basket-deal-color, #212121);
    transition: all .3s ease; }
  .extended-mode .basket-deal__item-delete:hover .basket-deal__item-delete-icon {
    color: var(--theme-basket-deal-color, #212121); }
  .extended-mode .basket__accessory-items__title {
    background-color: var(--theme-basket-deal-background-color, #e0e0e0); }
  .extended-mode .basket__accessory-free-items {
    background-color: var(--theme-basket-deal-background-color, #e0e0e0); }
  .extended-mode .basket__delivery_radio {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 3.2rem;
    color: var(--theme-button-color, #fff);
    border: 1px solid var(--theme-button-background-color, #212121);
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden;
    display: flex; }
  .extended-mode .basket__delivery-method {
    line-height: 3.2rem;
    background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent); }
  .extended-mode .basket__delivery-radio:checked + .basket__delivery-method {
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121); }
  .extended-mode .basket__delivery_select:has(+ .basket__time_advanced-orders) .nice-select__container {
    width: 49%; }
  .extended-mode .basket__time {
    margin-top: 1rem; }
    .extended-mode .basket__time .nice-select .list {
      width: calc(100% + 2px); }
    .extended-mode .basket__time_advanced-orders {
      display: flex;
      gap: 2%; }
      .extended-mode .basket__time_advanced-orders .nice-select__container ~ .nice-select__container {
        margin: 0; }
  .extended-mode.page_header-basket .basket__time .nice-select.open .list,
  .extended-mode.page_header-basket .basket__time .nice-select .list {
    max-height: 8.5rem; }
  .extended-mode.page_header-basket .basket:has(~ .basket__clickable-promotions .clickable-promotion:not([data-clickable-promotion])) .basket__time .nice-select.open .list {
    max-height: 15rem; }
  .extended-mode.page_header-basket .basket:has(~ .text-below-basket) .basket__time .nice-select.open .list,
  .extended-mode.page_header-basket .basket:has(~ .basket__clickable-promotions .clickable-promotion[data-clickable-promotion]) .basket__time .nice-select.open .list,
  .extended-mode.page_header-basket .basket:has(~ .basket__upselling .basket-upselling) .basket__time .nice-select.open .list {
    max-height: 19rem; }
  .extended-mode .basket__footer {
    padding-bottom: 1rem;
    color: var(--theme-basket-color, #212121);
    background-color: var(--theme-basket-background-color, #f1f1f1);
    border-radius: 0 0 var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius); }
  .extended-mode .basket__charge-title, .extended-mode .basket__charge-quantity, .extended-mode .basket__charge-amount {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-total-color, #212121); }
  .extended-mode .basket__extra-charge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem; }
  .extended-mode .basket__charge__details {
    width: calc(41% - .5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem; }
  .extended-mode .basket__total-title, .extended-mode .basket__total-amount {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.8rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.8rem;
    color: var(--theme-basket-total-color, #212121); }
  .extended-mode .basket__total, .extended-mode .basket__charge {
    display: flex;
    justify-content: space-between; }
  .extended-mode .basket__button-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease; }
    .extended-mode .basket__button-link:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .mobile-basket-button {
    border-radius: var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0 0;
    overflow: hidden; }
    .extended-mode .mobile-basket-button__icon {
      border-bottom-color: var(--theme-button-color, #fff); }
      .extended-mode .mobile-basket-button__icon:before, .extended-mode .mobile-basket-button__icon:after {
        border-left-color: var(--theme-button-color, #fff); }
    .extended-mode .mobile-basket-button .mobile-basket-button__link {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0 0;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      /* INFO: border radius we set to zero here, because its hidden by overflow inside parent element */
      border-radius: 0; }
      .extended-mode .mobile-basket-button .mobile-basket-button__link:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .mobile-basket-button__basket-icon {
      color: var(--theme-basket-icon-color, #212121); }
    .extended-mode .mobile-basket-button__link_full .mobile-basket-button__items {
      color: var(--theme-basket-count-color, #fff);
      background-color: var(--theme-basket-count-background-color, #212121);
      border-color: var(--theme-basket-count-background-color, #212121); }
  .extended-mode .basket__savings {
    font-size: 1.4rem;
    color: var(--theme-basket-savings-color, #fff);
    background-color: var(--theme-basket-savings-background-color, #bbb); }
  .extended-mode .basket-tip__title, .extended-mode .basket-tip__amount {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-total-color, #212121); }
  .extended-mode .basket-tip__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0 1rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease; }
    .extended-mode .basket-tip__button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .basket__coupon {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-color, #212121); }
  .extended-mode .basket__coupon-enable {
    line-height: 3rem; }
  .extended-mode .basket__coupon-enabled {
    line-height: 3rem;
    margin-bottom: .5rem; }
  .extended-mode .basket__coupon-form, .extended-mode .basket__coupon-form-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem; }
    .extended-mode .basket__coupon-form form, .extended-mode .basket__coupon-form-wrapper form {
      width: 100%; }
  .extended-mode .basket__coupon-form-wrapper {
    justify-content: space-between; }
    .extended-mode .basket__coupon-form-wrapper .nice-select__container {
      width: 65%; }
    .extended-mode .basket__coupon-form-wrapper .option {
      padding-right: 1.5rem;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis; }
  .extended-mode .basket__coupon-input {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 2.8rem;
    height: 3rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0); }
    .extended-mode .basket__coupon-input::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .basket__coupon-link {
    font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-links-font-weight, 400);
    text-transform: var(--theme-links-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-color, #212121);
    text-decoration: underline;
    transition: all .3s ease; }
    .extended-mode .basket__coupon-link:hover {
      color: var(--theme-basket-color, #212121);
      text-decoration: none; }
  .extended-mode .basket__coupon-validate {
    font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-links-font-weight, 400);
    text-transform: var(--theme-links-transform, none);
    line-height: 2rem;
    color: var(--theme-basket-color, #212121);
    text-decoration: underline;
    transition: all .3s ease; }
    .extended-mode .basket__coupon-validate:hover {
      color: var(--theme-basket-color, #212121);
      text-decoration: none; }
  .extended-mode .basket__coupon-add-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.6rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    width: calc(35% - 1rem); }
    .extended-mode .basket__coupon-add-button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .text-below-basket {
    font-size: 1.4rem;
    color: var(--theme-basket-message-text-color, #212121);
    background-color: var(--theme-basket-important-message-background-color, #ccc);
    border-radius: var(--extended-theme-secondary-border-radius); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .text-below-basket {
        border-radius: 0; } }
  .extended-mode .basket__footer-red-message {
    font-size: 1.4rem;
    color: var(--theme-basket-message-text-color, #212121);
    background-color: var(--theme-basket-error-message-background-color, #f0705f); }
  .extended-mode .basket__error {
    font-size: 1.4rem;
    color: var(--theme-basket-message-text-color, #212121);
    background-color: var(--theme-basket-error-message-background-color, #f0705f); }
  .extended-mode .basket__clickable-promotions {
    background-color: var(--theme-basket-background-color, #f1f1f1); }
    .extended-mode .basket__clickable-promotions:has(.clickable-promotion) {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem;
      border: 1px solid var(--theme-dropdown-border-color, #bbb);
      border-radius: var(--extended-theme-secondary-border-radius);
      overflow: hidden; }
      @media screen and (max-width: 52.5em) {
        .extended-mode .basket__clickable-promotions:has(.clickable-promotion) {
          border: none;
          border-radius: 0; } }
    .extended-mode .basket__clickable-promotions:has(.clickable-promotion:not([style="display: none;"]) ~ .clickable-promotion:not([style="display: none;"])) .clickable-promotion {
      width: calc(50% - .5rem); }
  .extended-mode .clickable-promotion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
    .extended-mode .clickable-promotion__form {
      display: block; }
    .extended-mode .clickable-promotion__link {
      display: block;
      text-decoration: none; }
    .extended-mode .clickable-promotion__image {
      display: block;
      width: 100%;
      border: none; }
    .extended-mode .clickable-promotion:not([data-clickable-promotion=""]) {
      background-color: var(--theme-basket-error-message-background-color, #f0705f); }
    .extended-mode .clickable-promotion__error {
      font-size: 1.4rem;
      text-align: center;
      color: var(--theme-basket-message-text-color, #212121);
      background-color: var(--theme-basket-error-message-background-color, #f0705f);
      padding: .5rem; }
  .extended-mode .basket-upselling {
    display: block;
    margin: 2rem auto 0;
    border: 1px solid var(--theme-dropdown-border-color, #bbb);
    border-radius: var(--extended-theme-secondary-border-radius);
    background-color: var(--theme-basket-background-color, #f1f1f1);
    padding: 1rem; }
    .extended-mode .basket-upselling__image {
      display: block;
      margin: 0 auto;
      border-radius: var(--extended-theme-primary-border-radius);
      overflow: hidden; }
    .extended-mode .basket-upselling__image-wrapper {
      margin-bottom: 1rem; }
    .extended-mode .basket-upselling__header {
      margin-bottom: 1rem; }
    .extended-mode .basket-upselling__title {
      margin-top: .5rem;
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .basket-upselling__description {
      margin-top: .5rem;
      color: var(--theme-basket-color, #212121); }
    .extended-mode .basket-upselling__footer-wrapper {
      display: flex;
      justify-content: space-between; }
    .extended-mode .basket-upselling .nice-select__container {
      width: 65%; }
    .extended-mode .basket-upselling .nice-select .list {
      overflow-y: auto;
      max-height: 16rem; }
    .extended-mode .basket-upselling .nice-select .option {
      padding-right: 1.5rem;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis; }
    .extended-mode .basket-upselling__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2.4rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.4rem 1rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      width: calc(35% - 1rem); }
      .extended-mode .basket-upselling__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .basket-upselling {
        border: none;
        border-radius: 0; }
        .extended-mode .basket-upselling__image-wrapper {
          border-radius: 0; }
        .extended-mode .basket-upselling .list {
          top: auto;
          bottom: 100%;
          transform-origin: 50% 100%;
          transform: scale(0.75) translateY(21px); }
        .extended-mode .basket-upselling.open .list {
          margin-top: 0;
          margin-bottom: 1px;
          border-radius: var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius) 0 0;
          transform: scale(1) translateY(0); } }
  .extended-mode.page_header-basket .basket-upselling .nice-select .list {
    top: auto;
    bottom: 100%;
    transform-origin: 50% 100%;
    transform: scale(0.75) translateY(21px); }
  .extended-mode.page_header-basket .basket-upselling .nice-select.open .list {
    margin-top: 0;
    margin-bottom: 1px;
    border-radius: var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius) 0 0;
    transform: scale(1) translateY(0); }
  .extended-mode .popup {
    border-radius: var(--extended-theme-secondary-border-radius);
    background-color: var(--theme-popup-background-color, #f1f1f1); }
    .extended-mode .popup_improved .popup__description {
      margin-top: 0; }
    .extended-mode .popup_improved.popup_delete-acccount {
      padding: 0; }
      .extended-mode .popup_improved.popup_delete-acccount .popup__wrapper {
        padding-top: 2rem; }
    .extended-mode .popup__description {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-popup-color, #212121);
      grid-area: popup_description; }
    .extended-mode .popup__title, .extended-mode .popup__price {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-popup-title-color, #212121); }
    .extended-mode .popup__close-icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .extended-mode .popup__header {
      grid-area: popup_header; }
    .extended-mode .popup__top {
      display: grid;
      grid-template-columns: 28% 70%;
      grid-template-rows: min-content 1fr;
      grid-column-gap: 2%;
      align-items: start;
      grid-template-areas: "popup_img popup_header" "popup_img popup_description"; }
    .extended-mode .popup__picture {
      width: 100%;
      margin-right: 0;
      grid-area: popup_img; }
    .extended-mode .popup form:has(.popup-group .nice-select):not(form:has(.popup-row)) {
      padding-bottom: 16rem; }
    .extended-mode .popup form:has(.popup-group .nice-select):has(.popup-row):not(form:has(.popup-row ~ .popup-row)) {
      padding-bottom: 5rem; }
    .extended-mode .popup.popup_improved:not(.popup_delete-acccount) {
      border-radius: var(--extended-theme-secondary-border-radius); }
      .extended-mode .popup.popup_improved:not(.popup_delete-acccount) .popup__title-wrapper {
        display: flex; }
      .extended-mode .popup.popup_improved:not(.popup_delete-acccount) .popup__title-mobile-close {
        padding-top: 0;
        margin-top: 0; }
      .extended-mode .popup.popup_improved:not(.popup_delete-acccount).popup_scrolled .popup__title {
        background-color: var(--theme-popup-background-color, #f1f1f1);
        border-bottom: 1px solid var(--theme-dropdown-border-color, #bbb);
        box-shadow: 0 0 5px color-mix(in srgb, var(--theme-text-color, #212121) 50%, transparent);
        padding: 1rem 2rem; }
      .extended-mode .popup.popup_improved:not(.popup_delete-acccount).popup_scrolled .popup__header {
        margin-bottom: 4.8rem; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .popup__top {
        display: block; }
      .extended-mode .popup.popup_improved:not(.popup_delete-acccount) {
        height: 100%;
        border-radius: 0; }
        .extended-mode .popup.popup_improved:not(.popup_delete-acccount).popup_scrolled .popup__title {
          padding: 1rem 1.5rem; } }
  .extended-mode .popup-holder-improved {
    display: block;
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    max-width: 100%;
    height: 100%;
    z-index: 1200; }
    .extended-mode .popup-holder-improved .popup {
      display: block;
      opacity: 0;
      top: -100%;
      transition: all .4s ease-out; }
    .extended-mode .popup-holder-improved__overlay {
      opacity: 0;
      transition: all .5s ease-out; }
    .extended-mode .popup-holder-improved.popup_animation {
      top: 0; }
      .extended-mode .popup-holder-improved.popup_animation .popup {
        opacity: 1;
        top: 50%; }
      .extended-mode .popup-holder-improved.popup_animation:not(.popup-holder-improved_visible) .popup {
        top: -100%; }
      .extended-mode .popup-holder-improved.popup_animation:not(.popup-holder-improved_visible) .popup-holder-improved__overlay {
        opacity: 0; }
      .extended-mode .popup-holder-improved.popup_animation .popup-holder-improved__overlay {
        display: block;
        opacity: 1; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .popup-holder-improved .popup {
        transition: none; } }
  .extended-mode .page__overlay {
    transition: all .5s ease-out; }
  .extended-mode.page_popup-visible {
    overflow: hidden; }
    .extended-mode.page_popup-visible .page__overlay {
      opacity: 0;
      display: block !important; }
  .extended-mode.page.popup_animation .page__overlay {
    display: block !important;
    opacity: 1; }
  .extended-mode.page.popup_animation:not(.page_popup-visible) .page__overlay {
    opacity: 0; }
  .extended-mode .popup__close {
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    transition: all .3s ease; }
    .extended-mode .popup__close:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .popup-group__line {
    display: flex; }
    .extended-mode .popup-group__line + .popup-group__line {
      margin-top: 1rem; }
  .extended-mode .popup-group__quantity-field {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 3rem;
    height: 3.2rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    width: 5.2rem; }
    .extended-mode .popup-group__quantity-field::placeholder {
      font-size: 1.6rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .popup-group__quantity-minus-icon:before, .extended-mode .popup-group__quantity-plus-icon:before {
    line-height: 2.4rem; }
  .extended-mode .popup-group__quantity-button {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .4rem 1rem .4rem 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2.4rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0 0;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    border-radius: 50%; }
    .extended-mode .popup-group__quantity-button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .popup-group__quantity-button ~ .popup-group__quantity-button {
      margin: .4rem 0 .4rem 1rem; }
  .extended-mode .popup-group__label, .extended-mode .popup-group__single-choice {
    display: inline-flex;
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 3.2rem;
    color: var(--theme-popup-color, #212121); }
  .extended-mode .popup-group_improved .popup-group__single-choice {
    line-height: 3.2rem; }
  .extended-mode .popup-group .nice-select__container {
    display: inline-flex;
    min-width: 12rem; }
    .extended-mode .popup-group .nice-select__container .nice-select {
      width: 100%; }
  .extended-mode .popup-group_improved .popup-group__label {
    line-height: 3.2rem; }
  .extended-mode .popup-group_improved .nice-select {
    line-height: 3rem;
    height: 3.2rem; }
  .extended-mode .popup-row__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2rem;
    color: var(--theme-popup-title-color, #212121);
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--theme-dropdown-border-color, #bbb); }
  .extended-mode .popup-row__description {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-popup-color, #212121);
    margin-bottom: 1.5rem; }
  .extended-mode .popup-row + .popup-row {
    border-top: none; }
  .extended-mode .popup-row .nice-select .list {
    height: 1rem; }
  .extended-mode .popup-row .nice-select.open .list,
  .extended-mode .popup-row .nice-select .list {
    max-height: 9rem;
    overflow-x: hidden; }
  .extended-mode .popup-row .nice-select .option {
    padding-right: 1.5rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis; }
  .extended-mode .popup-row[data-side]:has(.popup-set .popup-set__option:nth-of-type(7)) .nice-select.open .list,
  .extended-mode .popup-row[data-side]:has(.popup-set .popup-set__option:nth-of-type(7)) .nice-select .list {
    max-height: 12rem; }
  .extended-mode .popup-row[data-side]:last-of-type {
    padding-bottom: 7rem; }
    .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(1)) {
      padding-bottom: 4.5rem; }
    .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(4)) {
      padding-bottom: 2rem; }
    .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(7)) {
      padding-bottom: 1.4rem; }
      .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(7)) .nice-select.open .list,
      .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(7)) .nice-select .list {
        max-height: 9rem; }
    .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(10)) .nice-select.open .list,
    .extended-mode .popup-row[data-side]:last-of-type:has(.popup-set .popup-set__option:nth-of-type(10)) .nice-select .list {
      max-height: 12rem; }
  .extended-mode .popup-enum {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; }
    .extended-mode .popup-enum__option {
      margin-right: 0;
      margin-bottom: 0; }
    .extended-mode .popup-enum__text {
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      line-height: 1.8rem;
      color: var(--theme-button-color, #fff);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 20%, transparent);
      border: 1px solid var(--theme-button-background-color, #212121);
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .popup-enum__radio:checked + .popup-enum__text {
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: 1px solid var(--theme-button-background-color, #212121);
      cursor: default; }
    .extended-mode .popup-enum__radio:disabled + .popup-enum__text {
      color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 20%, transparent);
      border: 1px solid color-mix(in srgb, var(--theme-button-background-color, #212121) 20%, transparent); }
  .extended-mode .popup-set__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0; }
    .extended-mode .popup-set__wrapper_double-title {
      display: none;
      margin-bottom: 1.5rem; }
      @media screen and (max-width: 40em) {
        .extended-mode .popup-set__wrapper_double-title .popup-set__option {
          display: block; }
          .extended-mode .popup-set__wrapper_double-title .popup-set__option:nth-child(3) {
            display: none; } }
      @media screen and (max-width: 30em) {
        .extended-mode .popup-set__wrapper_double-title .popup-set__option:nth-child(2) {
          display: none; } }
  .extended-mode .popup-set:has(.set__wrapper_label .popup-set__label + .popup-set__label) .popup-set__wrapper_double-title {
    display: flex; }
  .extended-mode .popup-set__group-title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-popup-title-color, #212121); }
  .extended-mode .popup-set__title {
    color: var(--theme-popup-title-color, #212121); }
  .extended-mode .popup-set__text {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.6rem;
    color: var(--theme-popup-color, #212121);
    padding-left: 2.7rem;
    /* INFO: Possible types: check, radio, tick */ }
    .extended-mode .popup-set__text:before, .extended-mode .popup-set__text:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      margin: 0; }
    .extended-mode .popup-set__text:before {
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      border-style: solid;
      border-width: 1px;
      border-color: var(--theme-button-background-color, #212121);
      border-radius: 0;
      background-color: var(--theme-popup-background-color, #f1f1f1); }
    .extended-mode .popup-set__text:after {
      display: none;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0;
      background-color: var(--theme-button-background-color, #212121);
      margin: 0.4rem; }
  .extended-mode .popup-set__label {
    display: inline-block;
    vertical-align: top;
    padding-right: 1rem; }
  .extended-mode .popup-set__option[data-double] .popup-set__label:before {
    border: 1px solid var(--theme-button-background-color, #212121);
    background-color: var(--theme-popup-background-color, #f1f1f1); }
  .extended-mode .popup-set__option[data-double] .popup-set__label .popup-set__phantom:after {
    margin: .4rem;
    width: .8rem;
    height: .8rem;
    background-color: var(--theme-button-background-color, #212121); }
  .extended-mode .popup-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; }
    .extended-mode .popup-buttons__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.7rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .popup-buttons__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .popup-buttons__link {
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 4.6rem;
      color: var(--theme-popup-color, #212121);
      text-decoration: underline;
      transition: all .3s ease; }
      .extended-mode .popup-buttons__link:hover {
        color: var(--theme-popup-color, #212121);
        text-decoration: none; }
    .extended-mode .popup-buttons_improved .popup-buttons__button {
      border-radius: var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0 0; }
  .extended-mode .popup_delete-acccount .popup-buttons {
    flex-direction: row;
    justify-content: center; }
  .extended-mode .checkout {
    padding: 2rem;
    background-color: var(--theme-checkout-background-color, #e5e5e5);
    border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .checkout__section + .checkout__section {
      margin-top: 3rem;
      padding-top: 2.5rem;
      border-top: 1px solid var(--theme-checkout-separator-color, #ebebeb); }
    .extended-mode .checkout__section_account .checkout-row {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      padding-left: 0; }
      .extended-mode .checkout__section_account .checkout-row__label {
        flex: 0 0 15rem;
        float: none;
        margin-left: 0;
        padding-top: 0; }
      .extended-mode .checkout__section_account .checkout-row__group {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 2rem; }
      @media screen and (max-width: 40em) {
        .extended-mode .checkout__section_account .checkout-row {
          flex-direction: column;
          gap: .3rem; }
          .extended-mode .checkout__section_account .checkout-row__label {
            flex-basis: auto; } }
    .extended-mode .checkout__footer {
      margin-top: 3rem; }
  .extended-mode .checkout__title,
  .extended-mode .credit-page__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-title-color, #212121); }
  .extended-mode .checkout-row__label,
  .extended-mode .checkout-row__group-label,
  .extended-mode .checkout-variant__label,
  .extended-mode .checkout-variant__select-label,
  .extended-mode .card-entry__label,
  .extended-mode .card-entry__saved-card-label {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .checkout-variant__helper,
  .extended-mode .checkout__description,
  .extended-mode .checkout-row__group,
  .extended-mode .card-entry__instructions,
  .extended-mode .card-entry__cvcode-label {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .card-entry__cvcode-input,
  .extended-mode .card-entry__input {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 2.8rem;
    height: 3rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0); }
    .extended-mode .card-entry__cvcode-input::placeholder,
    .extended-mode .card-entry__input::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .checkout-row__field-text,
  .extended-mode .checkout-row__field-textarea {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 2.8rem;
    height: 3rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0); }
    .extended-mode .checkout-row__field-text::placeholder,
    .extended-mode .checkout-row__field-textarea::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
    .extended-mode .checkout-row__field-text[disabled],
    .extended-mode .checkout-row__field-textarea[disabled] {
      border-color: color-mix(in srgb, var(--theme-input-border-color, #bbb) 20%, transparent); }
  .extended-mode .checkout-row__field-textarea {
    resize: none;
    height: 7.5rem; }
  .extended-mode .checkout-row__group.checkout-row__group_postal-code .nice-select__container {
    vertical-align: top;
    min-width: 50%; }
  .extended-mode .checkout-row__message {
    color: var(--theme-checkout-error-background-color, #900); }
  .extended-mode .checkout-row[data-form-row-invalid] .checkout-row__field-text {
    border-color: var(--theme-checkout-error-background-color, #900); }
  .extended-mode .checkout-variant__label {
    position: relative;
    cursor: pointer;
    line-height: 1.6rem; }
    .extended-mode .checkout-variant__label .checkout-variant__radio {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
      .extended-mode .checkout-variant__label .checkout-variant__radio:checked + .checkout-variant__text:after {
        display: block; }
    .extended-mode .checkout-variant__label .checkout-variant__text {
      padding-left: 2.7rem;
      position: relative;
      display: inline-block;
      vertical-align: top;
      /* INFO: Possible types: check, radio, tick */ }
      .extended-mode .checkout-variant__label .checkout-variant__text:before, .extended-mode .checkout-variant__label .checkout-variant__text:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        margin: 0; }
      .extended-mode .checkout-variant__label .checkout-variant__text:before {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        border-style: solid;
        border-width: 1px;
        border-color: var(--theme-button-background-color, #212121);
        border-radius: 50%;
        background-color: var(--theme-button-color, #fff); }
      .extended-mode .checkout-variant__label .checkout-variant__text:after {
        display: none;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background-color: var(--theme-button-background-color, #212121);
        margin: 0.4rem; }
  .extended-mode .checkout-row__group-label_checkbox {
    font-size: 1.4rem;
    position: relative;
    cursor: pointer; }
    .extended-mode .checkout-row__group-label_checkbox .checkout-row__field-checkbox {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0; }
      .extended-mode .checkout-row__group-label_checkbox .checkout-row__field-checkbox:checked + .checkout-row__label-text:after {
        display: block; }
    .extended-mode .checkout-row__group-label_checkbox .checkout-row__label-text {
      padding-left: 2.7rem;
      line-height: 1.6rem;
      display: inline-block;
      vertical-align: top;
      position: relative;
      /* INFO: Possible types: check, radio, tick */ }
      .extended-mode .checkout-row__group-label_checkbox .checkout-row__label-text:before, .extended-mode .checkout-row__group-label_checkbox .checkout-row__label-text:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        margin: 0; }
      .extended-mode .checkout-row__group-label_checkbox .checkout-row__label-text:before {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        border-style: solid;
        border-width: 1px;
        border-color: var(--theme-button-background-color, #212121);
        border-radius: 0;
        background-color: var(--theme-button-color, #fff); }
      .extended-mode .checkout-row__group-label_checkbox .checkout-row__label-text:after {
        display: none;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 0;
        background-color: var(--theme-button-background-color, #212121);
        margin: 0.4rem; }
  .extended-mode .checkout-row__group_emphisized {
    padding: 0;
    color: var(--theme-text-color, #212121);
    background-color: transparent; }
  .extended-mode .checkout-row__group-item_description {
    line-height: 1.3; }
  .extended-mode .checkout-row__group-item_atoms {
    display: flex;
    gap: 1rem;
    justify-content: space-between; }
  .extended-mode .checkout-row__group-atom {
    display: flex; }
    .extended-mode .checkout-row__group-atom .checkout-row__group-label {
      flex-shrink: 0; }
    .extended-mode .checkout-row__group-atom .checkout-row__field-text_small {
      width: 100%;
      max-width: 8rem; }
  @media screen and (max-width: 40em) {
    .extended-mode .checkout-row__group-atom:first-child .checkout-row__group-label_atom, .extended-mode .checkout-row__group-label_atom {
      padding: 0;
      margin-left: 0;
      margin-bottom: .5rem;
      width: auto; }
    .extended-mode .checkout-row__group-atom {
      display: flex;
      flex-direction: column; }
      .extended-mode .checkout-row__group-atom .checkout-row__field-text_small {
        max-width: none; } }
  .extended-mode.page_checkout-columns .checkout-row {
    padding-left: 0; }
    .extended-mode.page_checkout-columns .checkout-row__label {
      width: initial;
      float: none;
      padding: 0;
      margin: 0 0 .5rem 0; }
    .extended-mode.page_checkout-columns .checkout-row__group-atom:first-child .checkout-row__group-label_atom, .extended-mode.page_checkout-columns .checkout-row__group-label_atom {
      padding: 0;
      float: none;
      margin-left: 0;
      margin-bottom: .5rem;
      width: auto; }
    .extended-mode.page_checkout-columns .checkout-row__group-atom {
      flex-direction: column; }
      .extended-mode.page_checkout-columns .checkout-row__group-atom .checkout-row__field-text_small {
        max-width: none; }
  .extended-mode.page_checkout-columns .checkout__section_account .checkout-row {
    padding-left: 15rem; }
    .extended-mode.page_checkout-columns .checkout__section_account .checkout-row__label {
      width: 15rem;
      float: left;
      padding: .3em .5em 0 0;
      margin: 0 0 0 -15rem; }
    @media screen and (max-width: 40em) {
      .extended-mode.page_checkout-columns .checkout__section_account .checkout-row {
        padding: 0; }
        .extended-mode.page_checkout-columns .checkout__section_account .checkout-row__label {
          width: initial;
          float: none;
          margin: 0 0 .5rem 0; } }
  .extended-mode .form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; }
    .extended-mode .form-buttons__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.9rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      text-transform: none;
      order: 2; }
      .extended-mode .form-buttons__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .form-buttons__button[disabled] {
        cursor: default;
        pointer-events: none;
        color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
        background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 50%, transparent); }
    .extended-mode .form-buttons__link {
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 2rem;
      color: var(--theme-link-color, #212121);
      text-decoration: underline;
      transition: all .3s ease;
      order: 1; }
      .extended-mode .form-buttons__link:hover {
        color: var(--theme-link-hover-color, #212121);
        text-decoration: none; }
  .extended-mode.page_order_step5 .form-buttons__link {
    order: -1; }
  .extended-mode .switcher-btns {
    display: flex;
    gap: 1rem;
    width: 100%; }
    @media screen and (max-width: 40em) {
      .extended-mode .switcher-btns {
        flex-wrap: wrap; } }
  .extended-mode .switcher-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    flex-grow: 1; }
    .extended-mode .switcher-btn:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .switcher-btn_active {
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent); }
    .extended-mode .switcher-btn:not(.switcher-btn_active) {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 1rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .switcher-btn:not(.switcher-btn_active):hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 40em) {
      .extended-mode .switcher-btn {
        width: 100%; } }
  .extended-mode .checkout-loyalty__balance {
    font-size: 2rem; }
  .extended-mode .checkout-loyalty__teaser {
    margin-bottom: 1.5rem;
    font-weight: 700; }
  .extended-mode .checkout-loyalty__rewards {
    width: 14rem;
    height: 14rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); }
  .extended-mode .checkout-loyalty:has(.checkout-loyalty__rewards) {
    min-height: 14rem;
    padding-left: 16rem;
    position: relative; }
  @media screen and (max-width: 26.5em) {
    .extended-mode .checkout-loyalty__rewards {
      position: static;
      transform: none;
      margin: 0 auto 1rem;
      width: 12rem;
      height: 12rem; }
      .extended-mode .checkout-loyalty__rewards .rewards__value {
        font-size: 3rem;
        line-height: 1; }
      .extended-mode .checkout-loyalty__rewards .rewards__label {
        font-size: 1.8rem; }
    .extended-mode .checkout-loyalty:has(.checkout-loyalty__rewards) {
      padding-left: 0; } }
  .extended-mode .checkout-confirm__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .checkout-confirm__content {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .checkout-terms-acceptance_error {
    color: var(--theme-checkout-error-color, #fff);
    background-color: var(--theme-checkout-error-background-color, #900); }
  .extended-mode .category_upselling .category__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-title-color, #212121); }
  .extended-mode .category_upselling .category__products {
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    gap: 2rem; }
  .extended-mode .category_upselling .product {
    width: calc(33.33% - 4rem / 3);
    margin-bottom: 0;
    margin-left: 0; }
    .extended-mode .category_upselling .product_monoblock .product__wrapper, .extended-mode .category_upselling .product__wrapper {
      background-color: var(--theme-product-background-color, #f1f1f1); }
  @media screen and (max-width: 64em) {
    .extended-mode .category_upselling:not(.basket-in-the-header) .category__products {
      flex-wrap: wrap; }
    .extended-mode .category_upselling:not(.basket-in-the-header) .product {
      width: calc(50% - 1rem); } }
  @media screen and (max-width: 52.5em) {
    .extended-mode .category_upselling:not(.basket-in-the-header) .product {
      width: calc(33.33% - 4rem / 3); } }
  @media screen and (max-width: 42.5em) {
    .extended-mode .category_upselling .category__products {
      flex-wrap: wrap;
      gap: 1rem; }
    .extended-mode .category_upselling .product {
      width: calc(50% - .5rem); } }
  @media screen and (max-width: 22.5em) {
    .extended-mode .category_upselling .product {
      width: 100%; } }
  .extended-mode .checkout-error {
    color: var(--theme-checkout-error-color, #fff);
    background-color: var(--theme-checkout-error-background-color, #900);
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
  .extended-mode .checkout__referral-banner {
    color: var(--theme-text-color, #212121); }
  .extended-mode .checkout__referral-program-rules {
    font-size: 1.275rem; }
  .extended-mode .checkout__referral-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    margin: 1rem 0;
    min-width: 15rem;
    text-align: center; }
    .extended-mode .checkout__referral-link:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .checkout__referral-link span[data-copied] {
      padding: 1rem 0;
      color: var(--theme-text-color, #212121); }
  .extended-mode .checkout-confirm__referral-banner {
    color: var(--theme-button-color, #fff);
    box-shadow: none;
    background-color: var(--theme-button-background-color, #212121);
    text-decoration: none;
    transition: all .3s ease; }
    .extended-mode .checkout-confirm__referral-banner:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .checkout-confirm__referral-banner .referral-banner {
      text-shadow: none; }
  .extended-mode .order-table {
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
    .extended-mode .order-table__header {
      display: flex;
      background-color: var(--theme-table-header-background-color, #212121); }
    .extended-mode .order-table__header-item {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-table-header-color, #fff); }
    @media screen and (max-width: 40em) {
      .extended-mode .order-table {
        overflow-x: auto; }
        .extended-mode .order-table .order-row, .extended-mode .order-table__header {
          width: 58rem; } }
  .extended-mode .order-row__header {
    display: flex;
    color: var(--theme-table-row-color, #212121);
    font-size: 1.2rem;
    background-color: var(--theme-table-row-background-color, #ccc);
    border-top: 1px solid var(--theme-table-row-separator-color, #ccc);
    transition: all .3s ease; }
    .extended-mode .order-row__header:hover {
      color: var(--theme-table-row-hover-color, #fff) !important;
      background-color: var(--theme-table-row-hover-background-color, #212121) !important; }
  .extended-mode .order-row__order {
    border-top: 3px solid var(--theme-table-row-separator-color, #ccc); }
  .extended-mode .order-row:nth-child(even) .order-row__header {
    color: var(--theme-table-row-even-color, #212121);
    background-color: var(--theme-table-row-even-background-color, #ebebeb); }
  .extended-mode .order-row.order-table__show-more .order-row__header {
    color: var(--theme-table-row-color, #212121);
    background-color: var(--theme-table-row-background-color, #ccc); }
  .extended-mode .order {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-background-color, #fff);
    border-top: solid 1px var(--theme-table-row-separator-color, #ccc); }
    .extended-mode .order__group-title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .order__group_columns {
      display: flex; }
    .extended-mode .order__add {
      padding-right: 0; }
    .extended-mode .order__add-button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0 1rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .order__add-button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .order__repeat-button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2.4rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .order__repeat-button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .order__repeat-empty-basket {
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 2.4rem;
      color: var(--theme-link-color, #212121);
      text-decoration: underline;
      transition: all .3s ease; }
      .extended-mode .order__repeat-empty-basket:hover {
        color: var(--theme-link-hover-color, #212121);
        text-decoration: none; }
    .extended-mode .order__items-container {
      border-top-color: var(--theme-table-border-color, #212121);
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .order__items-table {
      color: var(--theme-text-color, #212121);
      background-color: var(--theme-background-color, #fff);
      border: none; }
    .extended-mode .order__items-deal {
      color: var(--theme-basket-deal-color, #212121);
      background-color: var(--theme-basket-deal-background-color, #e0e0e0); }
    .extended-mode .order__items-deal-title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-basket-deal-color, #212121);
      background-color: var(--theme-basket-deal-header-background-color, #ccc); }
    .extended-mode .order__items-footer {
      border-top-color: var(--theme-table-border-color, #212121);
      font-weight: var(--theme-titles-font-weight, 700); }
    .extended-mode .order__total {
      border-top-color: var(--theme-table-border-color, #212121); }
  .extended-mode .credit-page__main {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-checkout-background-color, #e5e5e5);
    border-radius: var(--extended-theme-secondary-border-radius);
    overflow: hidden; }
  .extended-mode .credit-page__status__balance-amount {
    margin-top: 1rem; }
  .extended-mode .credit-page__form__teaser {
    color: var(--theme-text-color, #212121); }
  .extended-mode .credit-page__form__input {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 2.8rem;
    height: 3rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0); }
    .extended-mode .credit-page__form__input::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .credit-page__form__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.7rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    max-width: 30rem;
    width: 100%; }
    .extended-mode .credit-page__form__button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .credit-page__history {
    padding: 2rem;
    border-radius: var(--extended-theme-secondary-border-radius);
    overflow: hidden;
    background-color: var(--theme-checkout-background-color, #e5e5e5); }
    .extended-mode .credit-page__history .credit-page__history {
      border-radius: 0; }
      @media screen and (max-width: 30em) {
        .extended-mode .credit-page__history .credit-page__history {
          overflow-x: auto; } }
  .extended-mode .credit-table {
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
    .extended-mode .credit-table__header {
      color: var(--theme-table-header-color, #fff);
      font-weight: var(--theme-titles-font-weight, 700);
      background-color: var(--theme-table-header-background-color, #212121); }
    .extended-mode .credit-table__row {
      background-color: var(--theme-table-row-background-color, #ccc); }
      .extended-mode .credit-table__row:nth-child(odd) {
        background-color: var(--theme-table-row-even-background-color, #ebebeb); }
      .extended-mode .credit-table__row:hover {
        background-color: var(--theme-table-row-background-color, #ccc); }
        .extended-mode .credit-table__row:hover:nth-child(odd) {
          background-color: var(--theme-table-row-even-background-color, #ebebeb); }
    .extended-mode .credit-table td {
      color: var(--theme-table-row-color, #212121);
      border-top: 1px solid var(--theme-table-row-separator-color, #ccc); }
  .extended-mode .message_info {
    padding: 1rem;
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-message-color, #fff);
    background-color: var(--theme-message-info-background-color, #555);
    opacity: 0.9; }
    .extended-mode .message_info a,
    .extended-mode .message_info a:hover {
      color: var(--theme-message-color, #fff); }
  @media screen and (max-width: 52.5em) {
    .extended-mode.page_menu.page_improved .message_info {
      bottom: auto;
      top: 0;
      text-align: center;
      background-color: transparent; }
    .extended-mode.page_menu.page_improved .message_info .message__wrapper {
      display: inline-block;
      background-color: var(--theme-message-info-background-color, #555); } }
  .extended-mode .message_error {
    padding: 1rem;
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-message-color, #fff);
    background-color: var(--theme-message-error-background-color, #d9230b);
    opacity: 1; }
    .extended-mode .message_error a,
    .extended-mode .message_error a:hover {
      color: var(--theme-message-color, #fff); }
  .extended-mode .content_index {
    margin-top: 0; }
    .extended-mode .content_index .content__wrapper {
      width: 100%;
      max-width: none; }
  .extended-mode .category-navigation_index.category-navigation_hide-on-desktop {
    display: none; }
  .extended-mode .slider {
    margin-bottom: 3rem; }
  .extended-mode .unslider-nav ol li {
    background-color: var(--theme-button-color, #fff);
    border: 2px solid var(--theme-button-background-color, #212121); }
    .extended-mode .unslider-nav ol li.unslider-active {
      background-color: var(--theme-button-background-color, #212121);
      border-color: var(--theme-button-background-color, #212121); }
  .extended-mode .category-navigation__order-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-index-order-button-color, #212121);
    background-color: var(--theme-index-order-button-background-color, #fff);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    float: none;
    margin: 0 0 0 auto;
    flex-shrink: 0; }
    .extended-mode .category-navigation__order-button:hover {
      color: var(--theme-index-order-button-hover-color, #fff);
      background-color: var(--theme-index-order-button-hover-background-color, #b6b6b6); }
  .extended-mode .category-navigation_index-mobile .category-navigation__order-button {
    float: none;
    margin: .6rem 0; }
  .extended-mode .index-slideshow-links {
    display: flex;
    justify-content: center;
    gap: 2rem; }
    .extended-mode .index-slideshow-links__link {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 1.3rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      flex: 0 0 20rem; }
      .extended-mode .index-slideshow-links__link:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .index-slideshow-links {
        position: static;
        margin-top: 3rem; } }
    @media screen and (max-width: 30em) {
      .extended-mode .index-slideshow-links {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem; }
        .extended-mode .index-slideshow-links__link {
          flex-basis: auto;
          max-width: 20rem;
          width: 100%; } }
  .extended-mode .index-slideshow {
    border-radius: var(--extended-theme-secondary-border-radius);
    overflow: hidden; }
  .extended-mode .index-locator {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-section-background-color, #efefef); }
    .extended-mode .index-locator__container .index-locator {
      border-radius: 0 var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0; }
      .extended-mode .index-locator__container .index-locator ~ .index-slideshow {
        border-radius: var(--extended-theme-secondary-border-radius) 0 0 var(--extended-theme-secondary-border-radius);
        overflow: hidden; }
    .extended-mode .index-locator__container .index-locator__title {
      border-radius: 0 var(--extended-theme-secondary-border-radius) 0 0; }
    .extended-mode .index-locator__container_bottom .index-locator, .extended-mode .index-locator__container_centered .index-locator {
      border-radius: var(--extended-theme-secondary-border-radius); }
      .extended-mode .index-locator__container_bottom .index-locator ~ .index-slideshow, .extended-mode .index-locator__container_centered .index-locator ~ .index-slideshow {
        border-radius: var(--extended-theme-secondary-border-radius);
        overflow: hidden; }
    .extended-mode .index-locator__container_bottom .index-locator__title, .extended-mode .index-locator__container_centered .index-locator__title {
      border-radius: var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0 0; }
    .extended-mode .index-locator__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121);
      text-align: center;
      background-color: var(--theme-section-background-color, #efefef); }
    .extended-mode .index-locator__methods {
      border-radius: var(--extended-theme-primary-border-radius);
      border: 1px solid var(--theme-button-background-color, #212121);
      overflow: hidden; }
    .extended-mode .index-locator__container_bottom .index-locator__methods {
      border: initial; }
    .extended-mode .index-locator__method {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.5rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.1rem;
      color: var(--theme-button-color, #fff); }
      .extended-mode .index-locator__method input[type="radio"] {
        opacity: 0; }
        .extended-mode .index-locator__method input[type="radio"]:checked + span {
          color: var(--theme-button-color, #fff);
          background-color: var(--theme-button-background-color, #212121); }
    .extended-mode .index-locator__method-name {
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent); }
    .extended-mode .index-locator__postcode-input-wrapper {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-right: 0; }
    .extended-mode .index-locator__postcode-input {
      font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
      font-size: 1.7rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: var(--theme-input-text-color, #212121);
      text-transform: var(--theme-inputs-transform, none);
      line-height: 3.8rem;
      height: 4rem;
      background-color: var(--theme-input-background-color, #fff);
      border: solid 1px var(--theme-input-border-color, #bbb);
      padding: 0 .5rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      width: 100%;
      margin-bottom: 0; }
      .extended-mode .index-locator__postcode-input::placeholder {
        font-size: 1.7rem;
        font-weight: var(--theme-inputs-font-weight, 400);
        color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
        text-transform: var(--theme-inputs-transform, none); }
    .extended-mode .index-locator__postcode-button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.7rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      width: 100%; }
      .extended-mode .index-locator__postcode-button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .index-locator__postcode-warning {
      color: var(--theme-message-error-background-color, #d9230b);
      font-size: 1.3rem; }
    .extended-mode .index-locator__text {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.3rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.7rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .index-locator__postcode-selected {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.5rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.9rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .index-locator__postcode-link {
      color: var(--theme-link-color, #212121);
      font-weight: var(--theme-links-font-weight, 400); }
  .extended-mode .index-locator-restaurant {
    color: var(--theme-text-color, #212121);
    font-size: 1.4rem;
    border-top: 1px solid var(--theme-text-color, #212121); }
    .extended-mode .index-locator-restaurant__name {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.7rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.1rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .index-locator-restaurant__phone {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.7rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.1rem;
      color: var(--theme-text-color, #212121); }
      .extended-mode .index-locator-restaurant__phone a {
        color: var(--theme-text-color, #212121);
        text-decoration: none; }
    .extended-mode .index-locator-restaurant__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 1rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .index-locator-restaurant__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  @media screen and (max-width: 52.5em) {
    .extended-mode .index-locator__wrapper {
      padding-bottom: 2rem; } }
  .extended-mode .index-connected-customer {
    margin: 2rem 0; }
    .extended-mode .index-connected-customer__items {
      display: flex;
      justify-content: space-between;
      gap: 2.4rem; }
    .extended-mode .index-connected-customer__item {
      display: flex;
      flex-direction: column;
      flex: 0 0 calc(33.33% - 1.6rem);
      gap: 1rem;
      padding: 1.5rem 2rem;
      color: var(--theme-text-color, #212121);
      background-color: var(--theme-section-background-color, #efefef);
      border-radius: var(--extended-theme-secondary-border-radius); }
      .extended-mode .index-connected-customer__item:first-child {
        color: var(--theme-nav-item-color, #fff);
        background-color: color-mix(in srgb, var(--theme-nav-background-color, #212121) 40%, transparent); }
      .extended-mode .index-connected-customer__item_variant {
        align-items: center;
        background-color: var(--theme-section-background-color, #efefef); }
        .extended-mode .index-connected-customer__item_variant .index-connected-customer__buttons {
          justify-content: center; }
    .extended-mode .index-connected-customer__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .index-connected-customer__content {
      margin-bottom: 1rem; }
    .extended-mode .index-connected-customer__buttons {
      margin: auto auto 0;
      display: flex;
      gap: 1rem;
      width: 100%; }
    .extended-mode .index-connected-customer__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.5rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 1rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .index-connected-customer__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .index-connected-customer__item:first-of-type .index-connected-customer__button {
      min-width: auto;
      padding: 1rem 2rem; }
    .extended-mode .index-connected-customer__item:first-of-type .index-connected-customer__button_other {
      margin-left: 0;
      color: var(--theme-button-color, #fff);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent); }
      .extended-mode .index-connected-customer__item:first-of-type .index-connected-customer__button_other:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .index-connected-customer__items {
        gap: 2rem;
        flex-direction: column; }
      .extended-mode .index-connected-customer__item + .extended-mode .index-connected-customer__item {
        margin-top: 0; } }
  .extended-mode .index-microblog {
    margin: 3rem auto;
    background-color: var(--theme-microblog-background-color, transparent);
    padding: 4rem 0; }
    .extended-mode .index-microblog__wrapper {
      display: flex;
      justify-content: space-between; }
    .extended-mode .index-microblog__post {
      flex: 0 0 calc(33.33% - 1.6rem);
      color: var(--theme-microblog-color, #212121);
      background-color: var(--theme-microblog-post-background-color, #efefef);
      position: relative;
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .index-microblog__image {
      border-radius: var(--extended-theme-secondary-border-radius);
      max-width: 60rem;
      width: 100%; }
    .extended-mode .index-microblog__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 2.1rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.7rem;
      color: var(--theme-microblog-title-color, #212121);
      margin-bottom: .5rem; }
    .extended-mode .index-microblog__content p + p {
      margin-top: 1rem; }
    .extended-mode .index-microblog__spacer {
      height: 4rem; }
    .extended-mode .index-microblog__footer {
      position: absolute;
      bottom: 1.5rem;
      right: 2rem;
      left: 2rem; }
    .extended-mode .index-microblog__link {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2.1rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.5rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-microblog-link-color, #fff);
      background-color: var(--theme-microblog-link-background-color, #212121);
      border: none;
      padding: 0.8rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .index-microblog__link:hover {
        color: var(--theme-microblog-link-hover-color, #fff);
        background-color: var(--theme-microblog-link-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .index-microblog__wrapper {
        flex-direction: column;
        align-items: center;
        gap: 2rem 0; }
      .extended-mode .index-microblog__post {
        max-width: 60rem; }
      .extended-mode .index-microblog__post + .index-microblog__post {
        margin-top: 0; } }
  .extended-mode .lp-index-microblog {
    --microBorderRadius: var(--extended-theme-secondary-border-radius);
    --microBgColor: var(--theme-microblog-background-color, transparent);
    --microPostBgColor: var(--theme-microblog-post-background-color, #efefef);
    --microPostShadow: color-mix(in srgb, var(--theme-microblog-shadow-color, #212121) 20%, transparent) 0px 0px 10px;
    --microPostHoverShadow: color-mix(in srgb, var(--theme-microblog-shadow-color, #212121) 20%, transparent) 0px 10px 20px;
    --microTitleFw: var(--theme-titles-font-weight, 700);
    --microTitleColor: var(--theme-microblog-title-color, #212121);
    --microContentFw: var(--theme-text-font-weight, 400);
    --microContentColor: var(--theme-microblog-color, #212121);
    --microLinkFw: var(--theme-buttons-font-weight, 700);
    --microLinkBorderRadius: var(--extended-theme-primary-border-radius);
    --microLinkColor: var(--theme-microblog-link-color, #fff);
    --microLinkBgColor: var(--theme-microblog-link-background-color, #212121);
    --microLinkHoverColor: var(--theme-microblog-link-hover-color, #fff);
    --microLinkHoverBgColor: var(--theme-microblog-link-hover-background-color, #b6b6b6); }
  .extended-mode .index-about {
    margin-bottom: 3rem;
    color: var(--theme-text-color, #212121); }
    .extended-mode .index-about__wrapper {
      padding: 3rem 5%;
      font-size: 1.8rem;
      text-align: center;
      background-color: var(--theme-section-background-color, #efefef);
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .index-about__title {
      margin-bottom: 2rem;
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 3.5rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 4.5rem;
      color: var(--theme-title-color, #212121); }
      @media screen and (max-width: 40em) {
        .extended-mode .index-about__title {
          font-size: 2.5rem; } }
  .extended-mode .index-newsletter {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 2.5rem 0;
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-section-background-color, #efefef); }
    .extended-mode .index-newsletter__fieldset {
      display: flex;
      gap: 1rem;
      align-items: center; }
    .extended-mode .index-newsletter__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121);
      display: flex;
      flex: 2 1 30%;
      flex-wrap: wrap;
      line-height: 2.4rem; }
    .extended-mode .index-newsletter__field-wrapper {
      flex: 2 1 30%;
      width: auto; }
    .extended-mode .index-newsletter__field {
      font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: var(--theme-input-text-color, #212121);
      text-transform: var(--theme-inputs-transform, none);
      line-height: 3.4rem;
      height: 3.6rem;
      background-color: var(--theme-input-background-color, #fff);
      border: solid 1px var(--theme-input-border-color, #bbb);
      padding: 0 .5rem;
      border-radius: var(--extended-theme-primary-border-radius, 0); }
      .extended-mode .index-newsletter__field::placeholder {
        font-size: 1.4rem;
        font-weight: var(--theme-inputs-font-weight, 400);
        color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
        text-transform: var(--theme-inputs-transform, none); }
    .extended-mode .index-newsletter__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.8rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      flex-shrink: 0;
      height: auto;
      width: auto; }
      .extended-mode .index-newsletter__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .index-newsletter__fieldset {
        flex-wrap: wrap; }
      .extended-mode .index-newsletter .index-newsletter__title {
        flex: 0 0 100%;
        text-align: center;
        line-height: 2.4rem; }
      .extended-mode .index-newsletter__field-wrapper {
        flex: 0 0 calc(50% - .5rem); }
      .extended-mode .index-newsletter .index-newsletter__button {
        flex: 0 0 100%;
        width: 100%; } }
    @media screen and (max-width: 40em) {
      .extended-mode .index-newsletter__field-wrapper {
        flex: 0 0 100%; }
      .extended-mode .index-newsletter__field-wrapper + .extended-mode .index-newsletter__field-wrapper {
        margin-top: 0; } }
  .extended-mode .index-map__wrapper {
    max-width: 120rem; }
    .extended-mode .index-map__wrapper:before, .extended-mode .index-map__wrapper:after {
      display: none; }
  .extended-mode .index-map__shop {
    background-color: var(--theme-section-background-color, #efefef);
    border: 1px solid var(--theme-dropdown-border-color, #bbb);
    border-radius: var(--extended-theme-secondary-border-radius); }
  .extended-mode .index-map__embed {
    border-radius: 0;
    position: absolute;
    width: 100%;
    background-color: var(--theme-section-background-color, #efefef); }
  .extended-mode .index-map__embed-image {
    min-height: auto;
    left: 50%;
    top: 50%; }
  .extended-mode .index-map__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    overflow: hidden; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .index-map__wrapper {
      flex-direction: column;
      align-items: center; }
    .extended-mode .index-map__shop {
      width: 100%;
      max-width: none;
      border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .index-map__embed {
      margin-top: 2rem;
      position: relative;
      border-radius: 0; } }
  @media screen and (max-width: 40em) {
    .extended-mode .index-map__embed-image {
      transform: translate(-50%, -50%); } }
  .extended-mode .index-map__shop .social-icons__link {
    color: var(--theme-text-color, #212121);
    border: solid 1px var(--theme-text-color, #212121); }
    .extended-mode .index-map__shop .social-icons__link:hover {
      color: var(--theme-footer-socials-hover-color, #b6b6b6);
      border: solid 1px var(--theme-footer-socials-hover-color, #b6b6b6); }
  .extended-mode .index-map__shop-title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.8rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-text-color, #212121);
    margin-bottom: 1rem; }
  .extended-mode .index-map__shop-address, .extended-mode .index-map__shop-open, .extended-mode .index-map__shop-info {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .index-map__shop-phone {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.8rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.4rem;
    color: var(--theme-text-color, #212121);
    margin: 1rem 0; }
    .extended-mode .index-map__shop-phone a {
      color: var(--theme-link-color, #212121); }
  .extended-mode .index-map__order-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 1rem 1rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    display: block;
    margin-top: 1.3rem; }
    .extended-mode .index-map__order-button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .index-map__shop-image {
    margin-top: 1.3rem; }
    .extended-mode .index-map__shop-image img {
      display: block;
      margin: 0 auto;
      border-radius: var(--extended-theme-primary-border-radius); }
  .extended-mode .index-map__shop-info {
    margin-top: 1.3rem; }
  .extended-mode .index-shop-list {
    margin: 3rem 0 1rem; }
    .extended-mode .index-shop-list__wrapper {
      padding: 3rem 5% 1rem;
      background-color: var(--theme-section-background-color, #efefef);
      border-radius: var(--extended-theme-secondary-border-radius);
      overflow: hidden; }
    .extended-mode .index-shop-list__header {
      margin-bottom: 3rem;
      text-align: center; }
      @media screen and (max-width: 52.5em) {
        .extended-mode .index-shop-list__header {
          margin-bottom: 2rem; } }
    .extended-mode .index-shop-list__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 3.5rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 4.1rem;
      color: var(--theme-title-color, #212121); }
      @media screen and (max-width: 40em) {
        .extended-mode .index-shop-list__title {
          font-size: 2.5rem; } }
    .extended-mode .index-shop-list__filter {
      display: inline-block; }
    .extended-mode .index-shop-list__shops {
      display: flex;
      justify-content: center; }
    .extended-mode .index-shop-list__shop {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.4rem;
      color: var(--theme-text-color, #212121);
      text-align: center;
      float: none; }
    .extended-mode .index-shop-list__shop-title {
      margin-bottom: 1rem;
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .index-shop-list__shop-link {
      color: var(--theme-link-color, #212121); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .index-shop-list {
        margin: 2rem 0 0; }
        .extended-mode .index-shop-list__shop {
          width: 50%; }
        .extended-mode .index-shop-list__shops {
          flex-wrap: wrap; } }
    @media screen and (max-width: 30em) {
      .extended-mode .index-shop-list__shop {
        width: 100%; } }
  .extended-mode .sku-buttons {
    border-radius: 0;
    padding: .3rem 0; }
    .extended-mode .sku-buttons__text {
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border-left: none; }
    .extended-mode .sku-buttons__list {
      border-radius: var(--extended-theme-primary-border-radius);
      display: flex;
      width: 100%; }
    .extended-mode .sku-buttons__radio:checked + .sku-buttons__text {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6);
      cursor: default; }
    .extended-mode .sku-buttons__radio:disabled + .sku-buttons__text {
      color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 50%, transparent); }
  .extended-mode .sku-buttons-summary {
    color: var(--theme-product-text-color, #212121); }
    .extended-mode .sku-buttons-summary__name {
      color: var(--theme-product-text-color, #212121); }
    .extended-mode .sku-buttons-summary__value {
      color: var(--theme-product-text-color, #212121); }
    .extended-mode .sku-buttons-summary__icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
  .extended-mode .grouped-skus__title {
    float: none;
    flex-shrink: 0;
    display: inline-flex;
    margin-left: 0;
    width: 6rem;
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 3.4rem;
    color: var(--theme-title-color, #212121); }
  .extended-mode .grouped-skus__part {
    float: none;
    display: flex;
    gap: 0 1rem;
    padding-left: 0; }
  .extended-mode .grouped-skus__list {
    border-radius: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
  .extended-mode .grouped-skus__text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.7rem 0.5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    background-color: var(--theme-button-background-color, #212121);
    border-left: none;
    width: 100%;
    height: 100%; }
    .extended-mode .grouped-skus__text:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .grouped-skus__label {
    height: 100%; }
  .extended-mode .grouped-skus__item {
    float: none;
    padding-left: .5rem; }
  .extended-mode .grouped-skus__item:first-child .grouped-skus__text {
    border-left: none; }
  .extended-mode .grouped-skus__radio:checked + .grouped-skus__text {
    color: var(--theme-button-hover-color, #fff);
    background-color: var(--theme-button-hover-background-color, #b6b6b6);
    cursor: default; }
  .extended-mode .grouped-skus__radio:disabled + .grouped-skus__text {
    color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
    background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 50%, transparent); }
  .extended-mode .cyo__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem; }
  .extended-mode .cyo__header-title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2.3rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 4rem;
    color: var(--theme-title-color, #212121);
    margin-top: 0;
    word-break: break-word; }
  .extended-mode .cyo__add-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    min-width: 22rem;
    display: flex;
    align-self: flex-start; }
    .extended-mode .cyo__add-button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .cyo__add-button-price, .extended-mode .cyo__add-button-text {
    display: block;
    padding: 0 .5rem;
    flex: 0 1 50%; }
  .extended-mode .cyo__add-button-price {
    margin-right: 0; }
    .extended-mode .cyo__add-button-price:after {
      right: -.1rem; }
  .extended-mode .cyo__fieldset-title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 1.6rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2rem;
    color: var(--theme-popup-color, #212121); }
  .extended-mode .cyo__fieldset-description {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-popup-color, #212121); }
  @media screen and (max-width: 30em) {
    .extended-mode .cyo__header {
      flex-direction: column;
      margin-bottom: 2rem; } }
  @media screen and (min-width: 52.51em) and (max-width: 60em) {
    .extended-mode.page:not(.page_header-basket) .content_menu-leftside .cyo__header {
      flex-direction: column;
      margin-bottom: 2rem; } }
  .extended-mode .cyo-enum {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem; }
    .extended-mode .cyo-enum__text {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: 1px solid var(--theme-button-background-color, #212121);
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .cyo-enum__radio:checked + .cyo-enum__text {
      color: var(--theme-button-color, #fff);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent);
      cursor: default; }
    .extended-mode .cyo-enum__radio:disabled + .cyo-enum__text {
      color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 20%, transparent);
      cursor: default; }
  .extended-mode .cyo-set {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem .5rem; }
    .extended-mode .cyo-set__option {
      flex: 0 1 calc(33.33% - 1rem/3);
      width: initial; }
      @media screen and (max-width: 40em) {
        .extended-mode .cyo-set__option {
          flex-basis: calc(50% - .5rem); } }
      @media screen and (max-width: 26.25em) {
        .extended-mode .cyo-set__option {
          flex-basis: 100%; } }
    .extended-mode .cyo-set__label {
      display: inline-block;
      vertical-align: top;
      line-height: 1.6rem; }
      .extended-mode .cyo-set__label input[type=checkbox]:checked + .cyo-set__text:after {
        display: block;
        background-color: var(--theme-button-background-color, #212121); }
    .extended-mode .cyo-set__fieldset-title, .extended-mode .cyo-set__group-title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-popup-title-color, #212121); }
    .extended-mode .cyo-set__text {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.6rem;
      color: var(--theme-popup-color, #212121);
      display: inline-block;
      vertical-align: top;
      padding-left: 2.7rem; }
      .extended-mode .cyo-set__text:before, .extended-mode .cyo-set__text:after {
        top: 0;
        left: 0; }
    .extended-mode .cyo-set__price {
      display: inline-block;
      vertical-align: top; }
  @media screen and (min-width: 52.51em) and (max-width: 65em) {
    .extended-mode.page:not(.page_header-basket) .content_menu-leftside .cyo-set .cyo-set__option {
      flex-basis: calc(50% - .5rem); } }
  @media screen and (min-width: 52.51em) and (max-width: 55em) {
    .extended-mode.page:not(.page_header-basket) .content_menu-leftside .cyo-set .cyo-set__option {
      flex-basis: 100%; } }
  .extended-mode .cyo-icon-enum__text:before {
    width: 65px;
    height: 68px;
    background: url("/assets-images/cyo_sizes.png") no-repeat; }
  .extended-mode .cyo-icon-enum__text_small:before {
    background-position: 10px 0; }
  .extended-mode .cyo-icon-enum__text_medium:before {
    background-position: -73px 0; }
  .extended-mode .cyo-icon-enum__text_large:before {
    background-position: -167px 0; }
  .extended-mode .hh-side {
    margin-top: 3rem; }
    .extended-mode .hh-side__label {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-popup-title-color, #212121); }
    .extended-mode .hh-side__product {
      display: flex; }
      .extended-mode .hh-side__product-left {
        flex-shrink: 0; }
      .extended-mode .hh-side__product-right {
        width: 62%; }
      .extended-mode .hh-side__product .nice-select__container {
        max-width: 100%; }
      .extended-mode .hh-side__product .nice-select .option {
        padding-right: 1.5rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis; }
      .extended-mode .hh-side__product .nice-select.open .list {
        overflow-y: auto; }
      .extended-mode .hh-side__product .nice-select .list {
        max-height: 20rem; }
    .extended-mode .hh-side__product-name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-popup-title-color, #212121);
      margin-top: 1rem;
      word-break: break-word; }
    .extended-mode .hh-side__product-description {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-popup-color, #212121);
      margin-top: 1rem; }
    .extended-mode .hh-side__product-picture {
      border-radius: var(--extended-theme-primary-border-radius); }
      .extended-mode .hh-side__product-picture img {
        display: block; }
    @media screen and (max-width: 30em) {
      .extended-mode .hh-side__product-right {
        width: 100%; }
      .extended-mode .hh-side__product .nice-select__container {
        width: 100%; }
      .extended-mode .hh-side__product .nice-select .list {
        max-height: 12rem; } }
  @media screen and (min-width: 52.51em) and (max-width: 65em) {
    .extended-mode.page:not(.page_header-basket) .content_menu-leftside .hh-side__product {
      flex-direction: column; }
      .extended-mode.page:not(.page_header-basket) .content_menu-leftside .hh-side__product-left {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem; }
      .extended-mode.page:not(.page_header-basket) .content_menu-leftside .hh-side__product-right {
        width: 100%; } }
  @media screen and (min-width: 52.51em) and (max-width: 55em) {
    .extended-mode.page:not(.page_header-basket) .content_menu-leftside .hh-side__product .nice-select__container {
      display: block; } }
  .extended-mode .locator {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-section-background-color, #efefef);
    border-radius: var(--extended-theme-secondary-border-radius);
    overflow: hidden; }
    .extended-mode .locator__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.2rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .locator__methods {
      border: 1px solid var(--theme-button-background-color, #212121);
      border-radius: var(--extended-theme-primary-border-radius);
      overflow: hidden; }
    .extended-mode .locator__method {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.5rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.1rem;
      color: var(--theme-button-color, #fff); }
      .extended-mode .locator__method input[type=radio]:checked + span {
        color: var(--theme-button-color, #fff);
        background-color: var(--theme-button-background-color, #212121); }
    .extended-mode .locator__method-name {
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent);
      height: 4rem;
      line-height: 4rem; }
    .extended-mode .locator__postcode-input-wrapper {
      display: flex;
      justify-content: space-between;
      padding-right: 0; }
      .extended-mode .locator__postcode-input-wrapper_no-button > div {
        width: 100%; }
    .extended-mode .locator__postcode-input {
      font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: var(--theme-input-text-color, #212121);
      text-transform: var(--theme-inputs-transform, none);
      line-height: 3.8rem;
      height: 4rem;
      background-color: var(--theme-input-background-color, #fff);
      border: solid 1px var(--theme-input-border-color, #bbb);
      padding: 0 .5rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      width: 100%; }
      .extended-mode .locator__postcode-input::placeholder {
        font-size: 1.4rem;
        font-weight: var(--theme-inputs-font-weight, 400);
        color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
        text-transform: var(--theme-inputs-transform, none); }
      .extended-mode .locator__postcode-input[data-locator-error] {
        background-color: var(--theme-message-error-background-color, #d9230b); }
    .extended-mode .locator:has(.locator__postcode-button) .locator__postcode-input {
      border-radius: var(--extended-theme-primary-border-radius) 0 0 var(--extended-theme-primary-border-radius);
      overflow: hidden; }
    .extended-mode .locator__postcode-button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.7rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      margin-right: 0;
      border-radius: 0 var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius) 0;
      transition: all .3s ease; }
      .extended-mode .locator__postcode-button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .locator__search-icon:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .extended-mode .locator__postcode-warning {
      color: var(--theme-message-color, #fff);
      font-size: 1.4rem;
      background-color: var(--theme-message-error-background-color, #d9230b);
      padding: .5rem;
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .locator__selected {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.7rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.1rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .locator__selected-value {
      color: var(--theme-link-color, #212121);
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: uppercase; }
    .extended-mode .locator__selected-link {
      font-weight: var(--theme-links-font-weight, 400);
      text-decoration: underline;
      text-transform: none; }
  .extended-mode .locator-restaurant {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-section-background-color, #efefef); }
    .extended-mode .locator-restaurant__header {
      display: flex;
      align-items: center; }
    .extended-mode .locator-restaurant__name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.9rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.3rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .locator-restaurant__toggle {
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 2rem;
      color: var(--theme-text-color, #212121);
      text-decoration: underline;
      transition: all .3s ease;
      margin-right: auto; }
      .extended-mode .locator-restaurant__toggle:hover {
        color: var(--theme-text-color, #212121);
        text-decoration: none; }
    .extended-mode .locator-restaurant__content-name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.9rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 3rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .locator-restaurant__opening-times {
      background-color: var(--theme-background-color, #fff);
      border-radius: var(--extended-theme-primary-border-radius);
      overflow: hidden; }
    .extended-mode .locator-restaurant__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.5rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .locator-restaurant__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .locator-restaurant__name-distance, .extended-mode .locator-restaurant__content-name-distance {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.8rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .locator-restaurant[data-google-locator-restaurant-selected] .locator-restaurant__header, .extended-mode .locator-restaurant_open .locator-restaurant__header {
      display: none; }
    @media screen and (max-width: 40em) {
      .extended-mode .locator-restaurant__header {
        flex-direction: column; }
      .extended-mode .locator-restaurant__name {
        text-align: center; }
      .extended-mode .locator-restaurant__toggle {
        margin-right: 0;
        margin-bottom: 1rem; } }
  .extended-mode .restaurants {
    display: flex;
    flex-direction: row-reverse;
    width: 100%; }
    .extended-mode .restaurants__panel {
      margin-right: 0;
      flex-shrink: 0;
      float: none; }
    .extended-mode .restaurants__map {
      float: none;
      padding-left: 0; }
    .extended-mode .restaurants__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.7rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      display: none; }
      .extended-mode .restaurants__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    @media screen and (max-width: 48em) {
      .extended-mode .restaurants {
        display: block; }
        .extended-mode .restaurants__panel {
          margin-right: auto; }
        .extended-mode .restaurants__button {
          display: block;
          border-radius: var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius) 0 0; } }
  .extended-mode .restaurants-search__input-wrapper {
    border: 1px solid var(--theme-input-border-color, #bbb);
    border-radius: var(--extended-theme-primary-border-radius);
    overflow: hidden; }
  .extended-mode .restaurants-search__input {
    font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-inputs-font-weight, 400);
    color: var(--theme-input-text-color, #212121);
    text-transform: var(--theme-inputs-transform, none);
    line-height: 3.8rem;
    height: 4rem;
    background-color: var(--theme-input-background-color, #fff);
    border: solid 1px var(--theme-input-border-color, #bbb);
    padding: 0 .5rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    border: none; }
    .extended-mode .restaurants-search__input::placeholder {
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
      text-transform: var(--theme-inputs-transform, none); }
  .extended-mode .restaurants-search__buttons-wrapper:after {
    border-left-color: var(--theme-text-color, #212121); }
  .extended-mode .restaurants-search__button {
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-background-color, #fff); }
  .extended-mode .restaurants-search__warning {
    color: var(--theme-message-color, #fff);
    background-color: var(--theme-message-error-background-color, #d9230b);
    padding: .5rem; }
  .extended-mode .restaurant-summary {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    border-bottom-color: var(--theme-text-color, #212121); }
    .extended-mode .restaurant-summary:hover {
      color: var(--theme-title-color, #212121); }
    .extended-mode .restaurant-summary__name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .restaurant-summary__distance {
      font-weight: bold; }
  .extended-mode .restaurant-details {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121); }
    .extended-mode .restaurant-details__name {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.8rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .restaurant-details__item_phone {
      color: var(--theme-text-color, #212121); }
    .extended-mode .restaurant-details__item-icon {
      color: var(--theme-text-color, #212121); }
    .extended-mode .restaurant-details__order-button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.5rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease; }
      .extended-mode .restaurant-details__order-button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .password-checker {
    background-color: var(--theme-section-background-color, #efefef);
    border-color: var(--theme-input-border-color, #bbb); }
    .extended-mode .password-checker:before {
      border-left-color: var(--theme-input-border-color, #bbb);
      border-right-color: var(--theme-input-border-color, #bbb); }
    .extended-mode .password-checker:after {
      border-left-color: var(--theme-section-background-color, #efefef);
      border-right-color: var(--theme-section-background-color, #efefef); }
    .extended-mode .password-checker__label {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.2rem;
      color: var(--theme-text-color, #212121);
      transition: width 0.6s ease;
      text-align: center; }
    .extended-mode .password-checker__text {
      letter-spacing: -0.2px;
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.6rem;
      color: var(--theme-text-color, #212121); }
    .extended-mode .password-checker__bar {
      background-color: var(--theme-background-color, #fff); }
    .extended-mode .password-checker__score {
      background-color: #c64c4a; }
      .extended-mode .password-checker__score.weak {
        width: 30%;
        background-color: #c64c4a; }
        .extended-mode .password-checker__score.weak + .password-checker__label {
          width: 30%; }
      .extended-mode .password-checker__score.medium {
        width: 60%;
        background-color: #e1aa17; }
        .extended-mode .password-checker__score.medium + .password-checker__label {
          width: 60%; }
      .extended-mode .password-checker__score.strong {
        width: 100%;
        background-color: #558b2f; }
        .extended-mode .password-checker__score.strong + .password-checker__label {
          width: 100%; }
    .extended-mode .password-checker__input-message {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2rem;
      color: var(--theme-checkout-error-color, #fff);
      border-radius: var(--extended-theme-primary-border-radius);
      background-color: var(--theme-checkout-error-background-color, #900);
      margin: .5rem 0 0; }
  .extended-mode .loyalty-dropdown {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    padding: 2rem 10rem 2rem 2rem;
    min-height: 11rem; }
    .extended-mode .loyalty-dropdown__badge {
      float: right;
      margin-left: 2rem; }
    .extended-mode .loyalty-dropdown__title {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.6rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2.4rem;
      color: var(--theme-title-color, #212121); }
    .extended-mode .loyalty-dropdown__more-link {
      font-family: var(--theme-links-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-links-font-weight, 400);
      text-transform: var(--theme-links-transform, none);
      line-height: 2rem;
      color: var(--theme-link-color, #212121);
      text-decoration: underline;
      transition: all .3s ease; }
      .extended-mode .loyalty-dropdown__more-link:hover {
        color: var(--theme-link-hover-color, #212121);
        text-decoration: none; }
    .extended-mode .loyalty-dropdown__rewards {
      width: 10rem;
      height: 10rem;
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%); }
      .extended-mode .loyalty-dropdown__rewards .rewards__value {
        font-size: 3rem;
        line-height: 1; }
      .extended-mode .loyalty-dropdown__rewards .rewards__label {
        font-size: 1.6rem; }
    .extended-mode .loyalty-dropdown_extended {
      padding-right: 2rem; }
      .extended-mode .loyalty-dropdown_extended:before {
        display: none; }
      .extended-mode .loyalty-dropdown_extended:has(.loyalty-dropdown__rewards) {
        padding-right: 13rem; }
  .extended-mode .loyalty-page__banner {
    border-radius: var(--extended-theme-secondary-border-radius);
    background-color: var(--theme-section-background-color, #efefef); }
  .extended-mode .loyalty-page__banner__content {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.8rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2.4rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .loyalty-page__banner__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.8rem;
    color: var(--theme-text-color, #212121); }
  .extended-mode .loyalty-page__banner__p {
    color: var(--theme-text-color, #212121);
    font-size: 1.8rem; }
  .extended-mode .loyalty-page__banner__points-value {
    color: var(--theme-text-color, #212121);
    font-weight: var(--theme-text-font-weight, 400); }
  .extended-mode .loyalty-page__banner__note {
    color: var(--theme-text-color, #212121);
    font-size: 1.2rem; }
  .extended-mode .loyalty-page .loyalty-page__banner__content,
  .extended-mode .loyalty-page .loyalty-page__banner__title,
  .extended-mode .loyalty-page .loyalty-page__banner__p,
  .extended-mode .loyalty-page .loyalty-page__banner__points-value,
  .extended-mode .loyalty-page .loyalty-page__banner__note {
    color: var(--theme-loyalty-extended-banner-text-color, #fff); }
  .extended-mode .loyalty-page .loyalty-page__banner {
    background-color: var(--theme-section-background-color, #efefef);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
  .extended-mode .loyalty-page__history {
    padding: 2rem;
    border-radius: var(--extended-theme-secondary-border-radius);
    background-color: var(--theme-checkout-background-color, #e5e5e5); }
  .extended-mode .loyalty-page__howto {
    padding: 2rem 2rem 7rem;
    color: var(--theme-text-color, #212121);
    background-color: var(--theme-checkout-background-color, #e5e5e5);
    border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .loyalty-page__howto ul,
    .extended-mode .loyalty-page__howto ol {
      margin: 1rem 0; }
      .extended-mode .loyalty-page__howto ul li,
      .extended-mode .loyalty-page__howto ol li {
        margin-bottom: .5rem; }
    @media screen and (max-width: 40em) {
      .extended-mode .loyalty-page__howto {
        text-align: center; } }
  .extended-mode .loyalty-page__howto__wrapper {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 2rem;
    color: var(--theme-text-color, #212121);
    padding-right: 0; }
  .extended-mode .loyalty-page__howto__title {
    font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
    font-size: 2rem;
    font-weight: var(--theme-titles-font-weight, 700);
    text-transform: var(--theme-titles-transform, none);
    line-height: 2.8rem;
    color: var(--theme-title-color, #212121); }
  .extended-mode .loyalty-page__howto-badge {
    float: right;
    width: 24rem; }
    @media screen and (max-width: 40em) {
      .extended-mode .loyalty-page__howto-badge {
        float: none;
        margin: 3rem 0;
        width: 100%; } }
  .extended-mode .loyalty-page__rewards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 15rem;
    height: 15rem;
    transform: translateY(-50%); }
  @media screen and (max-width: 30em) {
    .extended-mode .loyalty-page__howto__title {
      margin-bottom: 1.5rem; }
    .extended-mode .loyalty-page__rewards {
      position: static;
      margin: 0 auto 1rem;
      transform: none; } }
  .extended-mode .loyalty-page_extended .loyalty-page__howto {
    padding-bottom: 2rem; }
    .extended-mode .loyalty-page_extended .loyalty-page__howto:before {
      display: none; }
  .extended-mode .loyalty-page_extended:has(.loyalty-page__rewards) .loyalty-page__howto__wrapper {
    padding-right: 15.5rem; }
    @media screen and (max-width: 30em) {
      .extended-mode .loyalty-page_extended:has(.loyalty-page__rewards) .loyalty-page__howto__wrapper {
        padding-right: 0; } }
  .extended-mode .rewards {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
    .extended-mode .rewards__value {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 3.5rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 4.5rem;
      color: var(--theme-title-color, #212121);
      display: block;
      text-align: center;
      text-shadow: 1px 2px 4px color-mix(in srgb, var(--theme-text-color, #212121) 40%, transparent); }
    .extended-mode .rewards__label {
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 2rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 2.8rem;
      color: var(--theme-text-color, #212121);
      text-shadow: 1px 2px 4px color-mix(in srgb, var(--theme-text-color, #212121) 40%, transparent); }
  .extended-mode .loyalty-table {
    border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .loyalty-table__header {
      background-color: var(--theme-table-header-background-color, #212121); }
    .extended-mode .loyalty-table__row {
      background-color: var(--theme-table-row-background-color, #ccc); }
      .extended-mode .loyalty-table__row:nth-child(odd) {
        background-color: var(--theme-table-row-even-background-color, #ebebeb); }
      .extended-mode .loyalty-table__row plus {
        color: var(--theme-table-row-color, #212121);
        font-weight: var(--theme-text-font-weight, 400); }
      .extended-mode .loyalty-table__row minus {
        color: var(--theme-table-row-color, #212121);
        font-weight: var(--theme-text-font-weight, 400); }
    .extended-mode .loyalty-table thead tr {
      background-color: var(--theme-table-header-background-color, #212121); }
    .extended-mode .loyalty-table tbody tr {
      background-color: var(--theme-table-row-background-color, #ccc); }
      .extended-mode .loyalty-table tbody tr:hover {
        background-color: var(--theme-table-row-background-color, #ccc); }
      .extended-mode .loyalty-table tbody tr:nth-child(2n + 1) {
        background-color: var(--theme-table-row-even-background-color, #ebebeb); }
        .extended-mode .loyalty-table tbody tr:nth-child(2n + 1) plus,
        .extended-mode .loyalty-table tbody tr:nth-child(2n + 1) minus,
        .extended-mode .loyalty-table tbody tr:nth-child(2n + 1) td {
          color: var(--theme-table-row-even-color, #212121); }
      .extended-mode .loyalty-table tbody tr.loyalty-table__row_show-more {
        background-color: var(--theme-table-row-background-color, #ccc); }
      .extended-mode .loyalty-table tbody tr td {
        border-top: 1px solid var(--theme-table-row-separator-color, #ccc); }
    .extended-mode .loyalty-table th {
      font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
      font-size: 1.2rem;
      font-weight: var(--theme-titles-font-weight, 700);
      text-transform: var(--theme-titles-transform, none);
      line-height: 2rem;
      color: var(--theme-table-header-color, #fff); }
    .extended-mode .loyalty-table td {
      font-size: 1.2rem;
      color: var(--theme-table-row-color, #212121); }
  .extended-mode .phone-box {
    text-align: left; }
    .extended-mode .phone-box .checkout-row__group-item_warning {
      display: none; }
      .extended-mode .phone-box .checkout-row__group-item_warning.visible {
        display: block;
        line-height: 1.2;
        margin-top: .5rem;
        color: var(--theme-message-error-background-color, #d9230b); }
    .extended-mode .phone-box .checkout-row__group-item_info {
      display: block;
      line-height: 1.2;
      margin-top: .5rem; }
      .extended-mode .phone-box .checkout-row__group-item_info.hidden {
        display: none; }
    .extended-mode .phone-box .form-buttons__button {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      line-height: 2rem;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      text-align: center;
      font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-buttons-font-weight, 700);
      text-transform: var(--theme-buttons-transform, none);
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border: none;
      padding: 0.7rem 2rem;
      border-radius: var(--extended-theme-primary-border-radius, 0);
      transition: all .3s ease;
      height: auto;
      min-width: auto;
      max-width: 50%;
      margin: 1rem auto 0 0; }
      .extended-mode .phone-box .form-buttons__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
      .extended-mode .phone-box .form-buttons__button.form-buttons__button_disabled {
        color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
        background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 50%, transparent);
        cursor: default; }
      @media screen and (max-width: 40em) {
        .extended-mode .phone-box .form-buttons__button {
          max-width: 100%; } }
    .extended-mode .phone-box .phone-box__controls {
      margin-top: 2rem; }
      .extended-mode .phone-box .phone-box__controls .form-buttons__button {
        margin: 0 0 0 auto; }
  .extended-mode .checkout-row__group-item_register-phone .checkout-row__field-text {
    display: block; }
  .extended-mode .checkout-row__group-item_register-phone .checkout-row__group-label_checkbox {
    margin-top: .8rem;
    display: inline-block;
    vertical-align: top; }
  .extended-mode .checkout-row__group-item_register-phone .form-buttons__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.7rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    height: auto;
    min-width: auto;
    max-width: 50%;
    margin: 1rem auto 0 0; }
    .extended-mode .checkout-row__group-item_register-phone .form-buttons__button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .checkout-row__group-item_register-phone .form-buttons__button.form-buttons__button_disabled {
      color: color-mix(in srgb, var(--theme-button-color, #fff) 50%, transparent);
      background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 50%, transparent);
      cursor: default; }
    @media screen and (max-width: 40em) {
      .extended-mode .checkout-row__group-item_register-phone .form-buttons__button {
        max-width: 100%; } }
  .extended-mode .phone-box__group {
    display: block;
    margin-top: 1rem;
    width: 100%;
    font-size: 0; }
    .extended-mode .phone-box__group .checkout-row__label {
      margin-left: 0;
      font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-text-font-weight, 400);
      text-transform: var(--theme-text-transform, none);
      line-height: 1.8rem;
      color: var(--theme-text-color, #212121);
      padding-top: .5rem;
      width: auto;
      padding-right: 0; }
    .extended-mode .phone-box__group.phone-box__group_guest {
      text-align: left; }
    .extended-mode .phone-box__group .checkout-row__field-text,
    .extended-mode .phone-box__group .checkout-row__group-item .checkout-row__field-text {
      max-width: 15rem;
      margin-left: 1rem;
      text-align: center;
      font-family: var(--theme-inputs-font, Arial, Helvetica, sans-serif);
      font-size: 1.4rem;
      font-weight: var(--theme-inputs-font-weight, 400);
      color: var(--theme-input-text-color, #212121);
      text-transform: var(--theme-inputs-transform, none);
      line-height: 2.8rem;
      height: 3rem;
      background-color: var(--theme-input-background-color, #fff);
      border: solid 1px var(--theme-input-border-color, #bbb);
      padding: 0 .5rem;
      border-radius: var(--extended-theme-primary-border-radius, 0); }
      .extended-mode .phone-box__group .checkout-row__field-text::placeholder,
      .extended-mode .phone-box__group .checkout-row__group-item .checkout-row__field-text::placeholder {
        font-size: 1.4rem;
        font-weight: var(--theme-inputs-font-weight, 400);
        color: color-mix(in srgb, var(--theme-input-text-color, #212121) 80%, transparent);
        text-transform: var(--theme-inputs-transform, none); }
      @media screen and (max-width: 40em) {
        .extended-mode .phone-box__group .checkout-row__field-text,
        .extended-mode .phone-box__group .checkout-row__group-item .checkout-row__field-text {
          margin-left: 0; } }
      @media screen and (max-width: 21.25em) {
        .extended-mode .phone-box__group .checkout-row__field-text,
        .extended-mode .phone-box__group .checkout-row__group-item .checkout-row__field-text {
          max-width: 12rem; } }
  .extended-mode .phone-box__set {
    display: block;
    font-size: 0; }
    .extended-mode .phone-box__set .phone-box__dial-code {
      display: inline-block;
      vertical-align: top;
      width: 4rem;
      border: solid 1px var(--theme-input-border-color, #bbb);
      margin-right: 1rem; }
      .extended-mode .phone-box__set .phone-box__dial-code ~ .checkout-row__field-text {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 16rem); }
  .extended-mode .checkout__fieldset_guest-checkout .form-buttons__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: var(--theme-buttons-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-buttons-font-weight, 700);
    text-transform: var(--theme-buttons-transform, none);
    color: var(--theme-button-color, #fff);
    background-color: var(--theme-button-background-color, #212121);
    border: none;
    padding: 0.7rem 2rem;
    border-radius: var(--extended-theme-primary-border-radius, 0);
    transition: all .3s ease;
    height: auto;
    min-width: auto;
    max-width: 50%;
    margin: 1rem auto 0 0; }
    .extended-mode .checkout__fieldset_guest-checkout .form-buttons__button:hover {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6); }
  .extended-mode .checkout-status {
    font-family: var(--theme-text-font, Arial, Helvetica, sans-serif);
    font-size: 1.4rem;
    font-weight: var(--theme-text-font-weight, 400);
    text-transform: var(--theme-text-transform, none);
    line-height: 1.8rem;
    color: var(--theme-text-color, #212121);
    padding: 0.5rem 0; }
  .extended-mode .content_menu-leftside {
    /* this media for case when basket is not in the header */
    /* this media for case when basket is not in the header */
    /* this media for case when basket is not in the header */ }
    .extended-mode .content_menu-leftside .content__main {
      width: calc(100% - 31.8rem);
      padding: 0 1rem; }
    .extended-mode .content_menu-leftside .content__side,
    .extended-mode .content_menu-leftside .content__side.floater-fixed {
      width: 31.8rem !important; }
    .extended-mode .content_menu-leftside .content__side.floater-fixed {
      position: sticky !important; }
    .extended-mode .content_menu-leftside .content__side_hidden-on-desktop {
      display: none; }
    .extended-mode .content_menu-leftside .content__primary,
    .extended-mode .content_menu-leftside .content__secondary {
      display: inline-flex; }
    .extended-mode .content_menu-leftside .content__primary {
      width: calc(100% - 20rem);
      justify-content: space-between;
      align-items: flex-start; }
    .extended-mode .content_menu-leftside .content__secondary,
    .extended-mode .content_menu-leftside .content__secondary.floater-fixed {
      margin: 0;
      flex-shrink: 0;
      width: 20rem !important;
      border-right: solid 1px var(--theme-left-nav-border-color, #bbb); }
      .extended-mode .content_menu-leftside .content__secondary .category-navigation__wrapper,
      .extended-mode .content_menu-leftside .content__secondary.floater-fixed .category-navigation__wrapper {
        width: 100%; }
    .extended-mode .content_menu-leftside .content__secondary.floater-fixed {
      margin-top: .5rem;
      margin-bottom: 1rem; }
      .extended-mode .content_menu-leftside .content__secondary.floater-fixed + .content__primary {
        margin-left: 20rem; }
        @media screen and (max-width: 52.5em) {
          .extended-mode .content_menu-leftside .content__secondary.floater-fixed + .content__primary {
            margin-left: 0; } }
    .extended-mode .content_menu-leftside .category-navigation {
      margin-right: 1rem;
      background-color: transparent;
      max-width: 19rem; }
      .extended-mode .content_menu-leftside .category-navigation::before, .extended-mode .content_menu-leftside .category-navigation::after {
        display: none; }
      .extended-mode .content_menu-leftside .category-navigation__wrapper {
        padding: 0; }
      .extended-mode .content_menu-leftside .category-navigation__icon, .extended-mode .content_menu-leftside .category-navigation__indicator {
        display: none; }
      .extended-mode .content_menu-leftside .category-navigation__list {
        gap: 0;
        padding-top: 0;
        flex-wrap: wrap; }
      .extended-mode .content_menu-leftside .category-navigation__item {
        width: 100%;
        margin-top: 0; }
      .extended-mode .content_menu-leftside .category-navigation__item + .category-navigation__item {
        margin-top: .6rem; }
      .extended-mode .content_menu-leftside .category-navigation__link {
        display: flex;
        color: var(--theme-left-nav-link-color, #212121);
        line-height: 2rem;
        height: initial;
        min-height: 4rem;
        align-items: center;
        gap: .5rem;
        border-radius: var(--extended-theme-primary-border-radius); }
        .extended-mode .content_menu-leftside .category-navigation__link:focus {
          background-color: transparent; }
      .extended-mode .content_menu-leftside .category-navigation .category-navigation__link {
        line-height: 2rem; }
      .extended-mode .content_menu-leftside .category-navigation .category-navigation__link:hover,
      .extended-mode .content_menu-leftside .category-navigation .category-navigation__item_active .category-navigation__link {
        color: var(--theme-left-nav-link-hover-color, #fff);
        background-color: var(--theme-left-nav-link-hover-background-color, #212121);
        box-shadow: none; }
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__link-icon,
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__favourite-icon {
        width: 3.6rem;
        height: 3.6rem;
        left: .2rem; }
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__list:has(.category-navigation__link-icon) .category-navigation__link {
        padding: .5rem 1.5rem .5rem 4.6rem; }
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__link:hover .category-navigation__link-icon,
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__link:hover .category-navigation__favourite-icon {
        transform: translateY(-50%);
        top: 50%; }
      .extended-mode .content_menu-leftside .category-navigation_icons .category-navigation__link:hover .category-navigation__link-text {
        transform: none; }
    @media screen and (max-width: 88.5em) {
      .extended-mode .content_menu-leftside .product {
        width: calc(33.33% - 1rem); }
        .extended-mode .content_menu-leftside .product_wide {
          width: 100%; } }
    @media screen and (max-width: 75em) {
      .extended-mode .content_menu-leftside .product {
        width: calc(50% - 0.75rem); }
        .extended-mode .content_menu-leftside .product_wide {
          width: 100%; } }
    @media screen and (max-width: 60.5em) {
      .extended-mode .content_menu-leftside .product {
        width: 100%; } }
    @media screen and (max-width: 52.5em) {
      .extended-mode .content_menu-leftside .product {
        width: calc(50% - .75rem);
        margin-bottom: 0;
        margin-left: 0; }
        .extended-mode .content_menu-leftside .product_wide {
          width: 100%; }
      .extended-mode .content_menu-leftside .content__primary {
        margin-left: 0;
        width: 100%;
        flex-direction: column; }
      .extended-mode .content_menu-leftside .content__secondary {
        display: none; }
      .extended-mode .content_menu-leftside .content__main {
        width: 100%;
        padding: 0; }
      .extended-mode .content_menu-leftside .content__side_hidden-on-desktop {
        display: block;
        height: auto;
        overflow: visible; } }
    @media screen and (max-width: 23.75em) {
      .extended-mode .content_menu-leftside .product {
        width: calc(50% - .25rem); } }
  @media screen and (max-width: 88.5em) {
    .extended-mode.page_header-basket .content_menu-leftside .product {
      width: calc(25% - 1.125rem); }
      .extended-mode.page_header-basket .content_menu-leftside .product_wide {
        width: 100%; } }
  @media screen and (max-width: 75em) {
    .extended-mode.page_header-basket .content_menu-leftside .product {
      width: calc(33.33% - 1rem); }
      .extended-mode.page_header-basket .content_menu-leftside .product_wide {
        width: 100%; } }
  @media screen and (max-width: 60em) {
    .extended-mode.page_header-basket .content_menu-leftside .product {
      width: calc(50% - 0.75rem); }
      .extended-mode.page_header-basket .content_menu-leftside .product_wide {
        width: 100%; } }
  .extended-mode .category-navigation_icons .category-navigation__list:has(.category-navigation__link-icon) {
    /* Reserve the icon slot only on links that actually have an icon, so
       a category without a thumbnail keeps normal padding instead of an
       empty gap. The favourites link's icon is absolute here too, so pad it. */ }
    .extended-mode .category-navigation_icons .category-navigation__list:has(.category-navigation__link-icon) .category-navigation__link {
      padding: .7rem 2rem;
      position: relative;
      display: flex;
      align-items: center; }
    .extended-mode .category-navigation_icons .category-navigation__list:has(.category-navigation__link-icon) .category-navigation__link:has(.category-navigation__link-icon),
    .extended-mode .category-navigation_icons .category-navigation__list:has(.category-navigation__link-icon) .category-navigation__link:has(.category-navigation__favourite-icon) {
      padding-left: 5.8rem; }
  .extended-mode .category-navigation_icons .category-navigation__link:hover .category-navigation__link-icon,
  .extended-mode .category-navigation_icons .category-navigation__link:hover .category-navigation__favourite-icon {
    transform: translateY(-50%) scale(1.1) rotate(-6deg); }
  .extended-mode .category-navigation_icons .category-navigation__list:not(.category-navigation__list:has(.category-navigation__link-icon)) .category-navigation__favourite-icon {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
    transform: none;
    margin-right: .5rem; }
  .extended-mode .category-navigation_icons .category-navigation__link-icon,
  .extended-mode .category-navigation_icons .category-navigation__favourite-icon {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: var(--extended-theme-primary-border-radius);
    transition: transform .3s ease, top .3s ease; }
  .extended-mode .category-navigation_icons .category-navigation__favourite-icon {
    display: flex;
    align-items: center;
    justify-content: center; }
  .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) {
    height: auto;
    /* Circle holder shared by the image thumbnail and the favourite icon */
    /* Fallback 'food' glyph circle, rendered on every link then hidden when
       the link already has an image thumbnail or the favourites icon.
       (Uses the :has() suffix form — libsass mishandles :not(:has()).) */
    /* Labels: small, centred, below the circle */
    /* Cancel the desktop hover lift (it assumes an absolutely centred icon) */
    /* Active item: filled accent circle + bold label */
    /* Keep the scroll arrows centred on the circle row of the taller nav */ }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__wrapper {
      padding: 1rem 0 .8rem; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__list {
      align-items: flex-start; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__indicator {
      display: none; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item {
      margin: 0; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__list .category-navigation__link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: .6rem;
      padding: 0 1.3rem;
      height: auto;
      line-height: 1.15; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link-icon,
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__favourite-icon {
      box-sizing: border-box;
      width: 4.8rem;
      height: 4.8rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--theme-nav-item-selected-background-color, #b6b6b6) 12%, var(--theme-nav-background-color, #212121));
      display: flex;
      align-items: center;
      justify-content: center;
      position: static;
      top: auto;
      left: auto;
      transform: none;
      transition: background-color .25s ease, color .25s ease; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link-icon {
      padding: .3rem;
      object-fit: contain; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__favourite-icon {
      font-size: 2.4rem;
      color: var(--theme-nav-item-color, #fff); }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link:before {
      font-family: 'fontello';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      min-width: 1em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-right: .2em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: ""; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link::before {
      box-sizing: border-box;
      width: 4.8rem;
      height: 4.8rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--theme-nav-item-selected-background-color, #b6b6b6) 12%, var(--theme-nav-background-color, #212121));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.4rem;
      color: var(--theme-nav-item-color, #fff);
      margin: 0;
      transition: background-color .25s ease, color .25s ease; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link:has(.category-navigation__link-icon)::before,
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link:has(.category-navigation__favourite-icon)::before {
      display: none; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link-text,
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__favourite-name {
      display: block;
      position: static;
      transform: none;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      color: var(--theme-nav-item-color, #fff); }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link:hover .category-navigation__link-icon,
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__link:hover .category-navigation__favourite-icon {
      transform: none; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active {
      /* Fallback glyph circle (only visible on icon-less categories — it's
         display:none elsewhere) takes the accent fill on the active item. */ }
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__link-icon,
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__favourite-icon {
        background: var(--theme-nav-item-selected-background-color, #b6b6b6); }
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__favourite-icon {
        color: var(--theme-nav-item-selected-color, #212121); }
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__link::before {
        background: var(--theme-nav-item-selected-background-color, #b6b6b6);
        color: var(--theme-nav-item-selected-color, #212121); }
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__link-text,
      .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation__item_active .category-navigation__favourite-name {
        font-weight: 700; }
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation_mobile-icon-left,
    .extended-mode .category-navigation_mobile.category-navigation_icons:has(.category-navigation__link-icon) .category-navigation_mobile-icon-right {
      height: 5.6rem;
      top: 1rem; }
  .extended-mode .mobile-menu_icons .mobile-menu__submenu:has(.mobile-menu__item-link-icon) .mobile-menu__item-link {
    padding-left: 5.7rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 3.8rem;
    position: relative; }
  .extended-mode .mobile-menu_icons .mobile-menu__favourite-icon,
  .extended-mode .mobile-menu_icons .mobile-menu__item-link-icon {
    display: block;
    position: absolute;
    height: 3.2rem;
    width: 3.2rem;
    left: 1.7rem;
    top: 50%;
    transform: translateY(-50%);
    object-fit: contain;
    border-radius: var(--extended-theme-primary-border-radius); }
  .extended-mode .mobile-menu_icons .mobile-menu__favourite-icon {
    display: flex;
    justify-content: center;
    align-items: center; }
  .extended-mode .category_icons .category__title-text {
    line-height: 4rem;
    display: flex;
    align-items: center; }
  .extended-mode .category_icons .category__title-icon {
    width: 3.6rem;
    height: 3.6rem;
    object-fit: contain;
    margin-right: 1rem;
    border-radius: var(--extended-theme-primary-border-radius); }
  .extended-mode .product_monoblock .product__wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--theme-product-background-color, #f1f1f1);
    border: 2px solid var(--theme-product-border-color, #212121);
    transition: all .4s ease;
    border-radius: var(--extended-theme-secondary-border-radius); }
    .extended-mode .product_monoblock .product__wrapper:hover {
      border-color: var(--theme-product-hover-border-color, #ccc);
      transform: translate(0, -0.4rem);
      box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-text-color, #212121) 40%, transparent); }
  .extended-mode .product_monoblock.product_greyed-out .product__wrapper:hover {
    border-color: var(--theme-product-border-color, #212121);
    transform: none;
    box-shadow: none; }
  .extended-mode .product_monoblock.product_greyed-out .product__wrapper:hover {
    border-color: var(--theme-product-border-color, #212121);
    transform: none;
    box-shadow: none; }
  .extended-mode .product_monoblock .product__picture-container {
    border-radius: 0; }
  .extended-mode .product_monoblock.product_with-counter .product__wrapper {
    border-color: var(--theme-product-counter-background-color, #212121); }
  .extended-mode .product_monoblock.product_with-counter .product__counter {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--theme-product-counter-color, #fff);
    background-color: var(--theme-product-counter-background-color, #212121);
    border-radius: 0 0 0 var(--extended-theme-secondary-border-radius); }
  .extended-mode .product_monoblock .product__bottom,
  .extended-mode .product_monoblock .product__buttons {
    display: none; }
  .extended-mode .product_monoblock .product__mobile-button {
    display: block; }
  .extended-mode .product_monoblock .product__top {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .extended-mode .product_monoblock .product__name {
    order: -1;
    margin-bottom: 1rem;
    text-align: center; }
  .extended-mode .product_monoblock .product__description {
    text-align: center; }
  .extended-mode .product_monoblock.product_improved .product__favourite {
    position: relative;
    z-index: 10; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .product_monoblock.product_with-counter .product__counter {
      margin-right: 0; }
    .extended-mode .product_monoblock.product_with-counter:after {
      display: none; }
    .extended-mode .product_monoblock .product__top {
      display: block;
      margin-bottom: 2.9rem; }
      .extended-mode .product_monoblock .product__top:has(~ .product__mobile-price) {
        margin-bottom: 1rem; }
    .extended-mode .product_monoblock .product__name,
    .extended-mode .product_monoblock .product__description {
      text-align: left; } }
  .extended-mode.rounded-view .content__side.basket-dropdown-open,
  .extended-mode.rounded-view .product_wide .sku-buttons__item,
  .extended-mode.rounded-view .sku-buttons__list,
  .extended-mode.rounded-view .hh-side__product-picture,
  .extended-mode.rounded-view .product__picture-container,
  .extended-mode.rounded-view .product__buttons,
  .extended-mode.rounded-view .loyalty-table,
  .extended-mode.rounded-view .order__items-container {
    overflow: hidden; }
  .extended-mode .product_fullscreen {
    width: calc(20% - 1.2rem); }
    @media screen and (max-width: 115em) {
      .extended-mode .product_fullscreen {
        width: calc(25% - 1.125rem); } }
    @media screen and (max-width: 88.5em) {
      .extended-mode .product_fullscreen {
        width: calc(33.33% - 1rem); } }
    @media screen and (max-width: 60em) {
      .extended-mode .product_fullscreen {
        width: calc(50% - .75rem); } }
    @media screen and (max-width: 23.75em) {
      .extended-mode .product_fullscreen {
        width: calc(50% - .25rem); } }
  .extended-mode .product_wide {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
    position: relative; }
    .extended-mode .product_wide:nth-child(3n+1) {
      margin-left: 0; }
    .extended-mode .product_wide:nth-child(2n+1) {
      margin-left: 0; }
      .extended-mode .product_wide:nth-child(2n+1) .product__wrapper {
        background-color: var(--theme-product-zebra-background-color, #ccc); }
    .extended-mode .product_wide.product_favourites .product__add {
      width: auto; }
    .extended-mode .product_wide.product_without-image .product__top {
      padding-top: 0; }
    .extended-mode .product_wide .product__wrapper {
      padding: 1rem;
      background-color: var(--theme-product-background-color, #f1f1f1);
      display: flex; }
      .extended-mode .product_wide .product__wrapper .product__form {
        width: 100%; }
    .extended-mode .product_wide .product__picture-container {
      float: left;
      margin-right: -15rem;
      margin-bottom: 0;
      width: 15rem; }
      .extended-mode .product_wide .product__picture-container ~ * {
        margin-left: 16.2rem; }
      .extended-mode .product_wide .product__picture-container ~ .product__mobile-button {
        margin-left: 0; }
    .extended-mode .product_wide .product__bottom {
      margin-top: .7rem;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 3rem; }
    .extended-mode .product_wide:not(.product_monoblock) .product__buttons {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      margin: 0;
      text-align: right;
      display: flex;
      justify-content: space-between;
      gap: 1rem; }
    .extended-mode .product_wide .product__sku {
      height: 3rem; }
    .extended-mode .product_wide .product__sku-list,
    .extended-mode .product_wide .product__sku-buttons {
      padding-bottom: 1rem; }
    .extended-mode .product_wide .sku-buttons {
      padding: 0; }
      .extended-mode .product_wide .sku-buttons__list {
        display: flex;
        gap: .5rem; }
      .extended-mode .product_wide .sku-buttons__item {
        border-radius: var(--extended-theme-primary-border-radius); }
        .extended-mode .product_wide .sku-buttons__item:nth-last-child(2):first-child, .extended-mode .product_wide .sku-buttons__item:nth-last-child(2):first-child ~ .sku-buttons__item {
          width: auto; }
      .extended-mode .product_wide .sku-buttons__text {
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem;
        text-align: center; }
    .extended-mode .product_wide .product__sku-value {
      padding-left: 1.5rem;
      padding-right: 3rem; }
    .extended-mode .product_wide .product__add {
      width: auto; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .product_wide:not(.product_monoblock) .product__buttons,
      .extended-mode .product_wide .product__buttons {
        display: none; }
      .extended-mode .product_wide .product__mobile-price {
        padding: 0; }
      .extended-mode .product_wide .product__name {
        padding-right: 2rem; }
      .extended-mode .product_wide.product_improved .product__top {
        padding-bottom: 2.5rem; }
      .extended-mode .product_wide.product_improved .product__mobile-price {
        position: absolute;
        bottom: 1rem;
        left: 1rem; }
      .extended-mode .product_wide.product_improved.product_with-counter:after {
        left: 0; }
      .extended-mode .product_wide.product_favourites .product__picture-container {
        float: left;
        margin-right: -15rem;
        margin-bottom: .7rem;
        width: 15rem; }
        .extended-mode .product_wide.product_favourites .product__picture-container ~ * {
          margin-left: 16.2rem; }
        .extended-mode .product_wide.product_favourites .product__picture-container ~ .product__mobile-button {
          margin-left: 0; } }
    @media screen and (max-width: 23.75em) {
      .extended-mode .product_wide .product__picture-container {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem; }
      .extended-mode .product_wide .product__top,
      .extended-mode .product_wide .product__mobile-price {
        margin-left: 0; } }
    @media screen and (max-width: 20em) {
      .extended-mode .product_wide.product_favourites.product_improved .product__picture-container, .extended-mode .product_wide.product_favourites .product__picture-container {
        display: none; }
        .extended-mode .product_wide.product_favourites.product_improved .product__picture-container ~ *, .extended-mode .product_wide.product_favourites .product__picture-container ~ * {
          margin-left: 0; } }
  .extended-mode .category_menu-leftside .product_wide {
    /* case when basket is not in the header, need to check how it will work (maybe we will need to rewrite when basket in the header) */
    /* case when basket is not in the header, need to check how it will work (maybe we will need to rewrite when basket in the header) */ }
    @media screen and (max-width: 88.5em) {
      .extended-mode .category_menu-leftside .product_wide {
        width: 100%; } }
    @media screen and (max-width: 75em) {
      .extended-mode .category_menu-leftside .product_wide {
        width: 100%; } }
    @media screen and (max-width: 72.5em) {
      .extended-mode .category_menu-leftside .product_wide .sku-buttons__text {
        padding: 0 .5rem; } }
    @media screen and (min-width: 52.51em) and (max-width: 58.5em) {
      .extended-mode .category_menu-leftside .product_wide .product__picture-container {
        float: none;
        margin-right: 0;
        margin-bottom: 1rem;
        width: 100%; }
        .extended-mode .category_menu-leftside .product_wide .product__picture-container ~ * {
          margin-left: 0; }
      .extended-mode .category_menu-leftside .product_wide .product__bottom {
        padding-bottom: 0; }
      .extended-mode .category_menu-leftside .product_wide:not(.product_monoblock) .product__buttons {
        position: static;
        margin-top: 1rem;
        display: flex; }
      .extended-mode .category_menu-leftside .product_wide .product__add {
        width: 100%;
        text-align: center; } }
    @media screen and (max-width: 52.5em) {
      .extended-mode .category_menu-leftside .product_wide:nth-child(3n+1) {
        margin-left: 0; } }
  .extended-mode.page_header-basket {
    /* Basket dropdown when basket in the header */ }
    .extended-mode.page_header-basket .header__basket-menu {
      margin: 0;
      display: block;
      color: var(--theme-header-color, #212121); }
      .extended-mode.page_header-basket .header__basket-menu .mobile-basket-button,
      .extended-mode.page_header-basket .header__basket-menu .basket-menu {
        display: none; }
        @media screen and (max-width: 52.5em) {
          .extended-mode.page_header-basket .header__basket-menu .mobile-basket-button,
          .extended-mode.page_header-basket .header__basket-menu .basket-menu {
            display: block; } }
    .extended-mode.page_header-basket .header-basket__link {
      text-decoration: none;
      position: relative;
      display: flex;
      align-items: center;
      padding: 1.1rem 1.6rem;
      transition: all .3s ease;
      border-radius: var(--extended-theme-primary-border-radius); }
      .extended-mode.page_header-basket .header-basket__link:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
        .extended-mode.page_header-basket .header-basket__link:hover .header-basket__icon {
          color: var(--theme-button-hover-color, #fff); }
    .extended-mode.page_header-basket .header-basket__icon {
      color: var(--theme-header-color, #212121);
      font-size: 1.8rem; }
      .extended-mode.page_header-basket .header-basket__icon:before {
        font-family: 'fontello';
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        min-width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-right: .2em;
        margin-left: .2em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: ""; }
      .extended-mode.page_header-basket .header-basket__icon:before {
        transition: color .2s ease; }
    .extended-mode.page_header-basket .header-basket__count {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.7rem;
      height: 1.7rem;
      position: absolute;
      top: .6rem;
      right: .6rem;
      font-size: 1.1rem;
      color: var(--theme-basket-count-color, #fff);
      background-color: var(--theme-basket-count-background-color, #212121);
      border-radius: 50%; }
    @media screen and (max-width: 52.5em) {
      .extended-mode.page_header-basket .header-basket {
        display: none; } }
    .extended-mode.page_header-basket .product {
      width: calc(25% - 1.125rem); }
      .extended-mode.page_header-basket .product.product_fullscreen {
        width: calc(20% - 1.2rem); }
        @media screen and (max-width: 72em) {
          .extended-mode.page_header-basket .product.product_fullscreen {
            width: calc(25% - 1.125rem); } }
      .extended-mode.page_header-basket .product.product_wide {
        width: 100%; }
      @media screen and (max-width: 60em) {
        .extended-mode.page_header-basket .product {
          width: calc(33.33% - 1rem); } }
      @media screen and (max-width: 42.5em) {
        .extended-mode.page_header-basket .product {
          width: calc(50% - .75rem); } }
      @media screen and (max-width: 23.75em) {
        .extended-mode.page_header-basket .product {
          width: calc(50% - .25rem); } }
    .extended-mode.page_header-basket .content .content__main {
      width: 100%; }
    .extended-mode.page_header-basket .content .content__side,
    .extended-mode.page_header-basket .content .content__side.floater-fixed,
    .extended-mode.page_header-basket .content__primary .content__side,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed {
      background-color: var(--theme-section-background-color, #efefef);
      z-index: -100;
      opacity: 0;
      position: fixed !important;
      left: auto !important;
      top: 0;
      -webkit-transform: scale(0.75) translateY(-20px);
      -ms-transform: scale(0.75) translateY(-20px);
      transform: scale(0.75) translateY(-20px);
      -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
      transform-origin: 50% 0;
      transition: all 0.15s ease-out, opacity 0.15s ease-out;
      width: 40rem; }
      .extended-mode.page_header-basket .content .content__side .content__side-wrapper,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .content__side-wrapper,
      .extended-mode.page_header-basket .content__primary .content__side .content__side-wrapper,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .content__side-wrapper {
        overflow-y: auto; }
      .extended-mode.page_header-basket .content .content__side.basket-dropdown-open,
      .extended-mode.page_header-basket .content .content__side.floater-fixed.basket-dropdown-open,
      .extended-mode.page_header-basket .content__primary .content__side.basket-dropdown-open,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed.basket-dropdown-open {
        margin: 0;
        border: 1px solid var(--theme-dropdown-border-color, #bbb);
        border-radius: var(--extended-theme-secondary-border-radius);
        opacity: 1;
        z-index: 991;
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0); }
      .extended-mode.page_header-basket .content .content__side .off-canvas__wrapper,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .off-canvas__wrapper,
      .extended-mode.page_header-basket .content__primary .content__side .off-canvas__wrapper,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .off-canvas__wrapper {
        padding-bottom: 0; }
      @media screen and (max-width: 52.5em) {
        .extended-mode.page_header-basket .content .content__side,
        .extended-mode.page_header-basket .content .content__side.floater-fixed,
        .extended-mode.page_header-basket .content__primary .content__side,
        .extended-mode.page_header-basket .content__primary .content__side.floater-fixed {
          position: static !important;
          float: none;
          z-index: 1000;
          opacity: 1;
          transform: none;
          transition: none; } }
    .extended-mode.page_header-basket .content__side-wrapper {
      padding: .5rem; }
      @media screen and (max-width: 52.5em) {
        .extended-mode.page_header-basket .content__side-wrapper {
          padding: 0; } }
  .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side,
  .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed,
  .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side,
  .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed, .extended-mode.page_header-basket.page_header-top-banner .content .content__side,
  .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed,
  .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side,
  .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed {
    z-index: 1000;
    transform: translate(50%, -100%);
    top: -100% !important;
    right: 50% !important;
    left: auto !important;
    width: 400px !important;
    max-width: 100%;
    transition: all 0.4s ease-out; }
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.basket-dropdown-open,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed.basket-dropdown-open,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.basket-dropdown-open,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed.basket-dropdown-open, .extended-mode.page_header-basket.page_header-top-banner .content .content__side.basket-dropdown-open,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed.basket-dropdown-open,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.basket-dropdown-open,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed.basket-dropdown-open {
      z-index: 1000;
      top: 50% !important;
      right: 50% !important;
      left: auto !important;
      transform: translate(50%, -50%); }
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper, .extended-mode.page_header-basket.page_header-top-banner .content .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper {
        max-height: 96vh !important; }
    @media screen and (max-width: 52.5em) {
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed, .extended-mode.page_header-basket.page_header-top-banner .content .content__side,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed {
        position: static !important;
        float: none;
        z-index: 1000;
        opacity: 1;
        transform: none;
        transition: none; } }
  .extended-mode .category-banner__image {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; }
    .extended-mode .category-banner__image_mobile {
      display: none; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .category-banner__image {
      display: none; }
      .extended-mode .category-banner__image_mobile {
        display: block; } }
  .extended-mode .header-banner {
    display: block;
    width: 100%; }
    .extended-mode .header-banner .header-banner__image {
      display: block;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden; }
      .extended-mode .header-banner .header-banner__image_mobile {
        display: none; }
      @media screen and (max-width: 52.5em) {
        .extended-mode .header-banner .header-banner__image {
          display: none; }
          .extended-mode .header-banner .header-banner__image_mobile {
            display: block; } }
  .extended-mode .ui-datepicker {
    background-color: var(--theme-popup-background-color, #f1f1f1);
    border-color: var(--theme-button-background-color, #212121);
    color: var(--theme-popup-color, #212121); }
    .extended-mode .ui-datepicker-header {
      border-color: var(--theme-button-background-color, #212121);
      background-color: var(--theme-button-background-color, #212121); }
    .extended-mode .ui-datepicker .ui-state-default {
      color: var(--theme-button-color, #fff);
      background-color: var(--theme-button-background-color, #212121);
      border-color: var(--theme-button-background-color, #212121); }
    .extended-mode .ui-datepicker .ui-state-hover,
    .extended-mode .ui-datepicker .ui-state-active,
    .extended-mode .ui-datepicker .ui-state-highlight,
    .extended-mode .ui-datepicker .ui-state-active:not(.ui-state-hover) {
      color: var(--theme-button-hover-color, #fff);
      background-color: var(--theme-button-hover-background-color, #b6b6b6);
      border-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .ui-datepicker .ui-datepicker-prev,
    .extended-mode .ui-datepicker .ui-datepicker-next {
      color: var(--theme-button-color, #fff);
      border: solid 1px var(--theme-button-background-color, #212121);
      background-color: var(--theme-button-background-color, #212121); }
      .extended-mode .ui-datepicker .ui-datepicker-prev:before,
      .extended-mode .ui-datepicker .ui-datepicker-next:before {
        color: var(--theme-button-color, #fff); }
      .extended-mode .ui-datepicker .ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled),
      .extended-mode .ui-datepicker .ui-datepicker-next.ui-state-hover:not(.ui-state-disabled) {
        color: var(--theme-button-color, #fff);
        background-color: color-mix(in srgb, rgba(255, 255, 255, 0.4) 40%, transparent);
        border-color: color-mix(in srgb, rgba(255, 255, 255, 0.4) 40%, transparent); }
        .extended-mode .ui-datepicker .ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled):before,
        .extended-mode .ui-datepicker .ui-datepicker-next.ui-state-hover:not(.ui-state-disabled):before {
          color: var(--theme-button-color, #fff); }

.static-page__title {
  font-family: var(--theme-titles-font, Arial, Helvetica, sans-serif);
  font-size: 2.3rem;
  font-weight: var(--theme-titles-font-weight, 700);
  text-transform: var(--theme-titles-transform, none);
  line-height: 3.3rem;
  color: var(--theme-title-color, #212121); }

.hybrid_app.page_order_step2 .mobile-basket-button, .hybrid_app.page_order_step3 .mobile-basket-button, .hybrid_app.page_order_step4 .mobile-basket-button, .hybrid_app.page_order_step5 .mobile-basket-button {
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  overflow: initial; }

.show-password__icon {
  color: var(--theme-input-text-color, #212121); }

.lp-follow-us {
  --followColor: var(--theme-text-color);
  --followBgColor: var(--theme-section-background-color);
  --followContentBgColor: transparent;
  --followTitleColor: var(--theme-title-color);
  --followTitleDecorationColor: var(--theme-title-color); }

.hybrid_app .burger-menu {
  display: none; }
@media screen and (max-width: 52.5em) {
  .hybrid_app .header__burger-menu--app-visible .burger-menu {
    display: block; } }

/* --------------------------------------------------------------------------
   BASIC TOUCH ADDITIONS (LP-2186 / D-12, restructured LP-2175)
   --------------------------------------------------------------------------
   Single aggregator entrypoint. `_basic_touch.scss` imports the D-12
   foundation (tokens, breakpoints, typography, layout, utilities) and
   each Stream-D component partial in dependency order.

   The aggregator pattern was originally avoided because RE's custom Sass
   importer (`rs_sass_importer.rb`) built each nested `Sass::Engine`
   without `:filename` — triggering a false-positive
   `An @import loop has been found:  imports itself` for any chain deeper
   than `theme.scss → partial`, and breaking cross-partial mixin lookups
   past a few sibling imports. LP-2192 fixed the importer (passes
   `:filename` + propagates parent `options` to each nested engine), so
   nested aggregator chains compile cleanly.

   The LP-2175 polish iteration (refinement #3) temporarily reverted to
   a flat-import chain + a consolidated `_basic_header_chrome.scss`
   because the dev container's RE branch (`epic/LP-2164-basic-touch`,
   phase-1) didn't include LP-2192. The phase-2 epic branch
   (`epic/LP-2164-basic-touch-phase-2`) has LP-2192 merged in, so the
   aggregator + 6 sub-partials are restored. See basic-touch/README.md
   and ai_pipeline/docs/basic_touch.md for the full history. */
/* ==========================================================================
   BASIC TOUCH — AGGREGATOR ENTRYPOINT (LP-2186 / D-12, reinstated LP-2175)
   ==========================================================================
   Single aggregator that imports every Basic Touch partial in dependency
   order. `theme.scss` does ONE `@import 'basic_touch';` and gets the full
   stack.

   History:
     - D-12 (LP-2186) shipped this file as documentation-only because RE's
       custom Sass importer triggered a false-positive
       `An @import loop has been found:  imports itself` whenever the chain
       went two levels deep (`theme.scss → aggregator → partial`). Root
       cause: `Sass::Engine` built without `:filename`, so loop detection
       conflated unrelated files.
     - D-1 (LP-2175) also hit a cumulative-cross-partial mixin-lookup
       failure ("Undefined mixin '<name>'") past ~3-4 sibling imports —
       same underlying importer bug. Original D-1 split was consolidated
       into one `_basic_header_chrome.scss` to dodge it.
     - LP-2192 fixed the importer (`rs_sass_importer.rb` now passes
       `:filename` and propagates parent `options` to each nested
       `Sass::Engine`). Aggregator + sub-partials are safe again.
     - LP-2175 polish iteration (refinement #3) was developed against an
       RE branch (`epic/LP-2164-basic-touch`) that did NOT include
       LP-2192, so the previously-split 6 D-1 sub-partials were re-
       consolidated as a workaround.
     - LP-2175 final iteration runs against `epic/LP-2164-basic-touch-phase-2`,
       which has LP-2192 merged in. The aggregator + 6 sub-partials are
       restored.

   Dependency order (must be preserved):
     1. _tokens             — :root CSS vars + SCSS palette/spacing aliases.
     2. _breakpoints        — responsive mixins (consumed by typography +
                              utilities + every Stream-D component partial).
     3. _typography         — type-scale mixins.
     4. _layout             — bt-stack / bt-cluster / bt-sidebar.
     5. _utilities          — aspect-ratio, missing-asset, hide-on-X,
                              spacing utility classes.

   Stream D component partials — must come AFTER the D-12 foundation:

     6. LP-2175 (D-1) — Header & site chrome (split into 6 sub-partials):
        _basic_header           — band layout, cluster grouping, banner.
        _basic_header_logo      — outlined holder + image + text fallback.
        _basic_header_menus     — generic dropdown triggers + glyphs.
        _basic_header_cta       — primary "Our menu" / "Order online" CTA.
        _basic_header_basket    — header basket pill (page_header-basket).
        _basic_header_mobile    — burger + off-canvas + mobile-credits.

   The `_basic_header*` prefix avoids the partial-name collision with
   parent `themes/touch/stylesheets/_header.scss` (Stream-D SCSS gotcha
   #4 in basic_touch.md).

   `_probe.scss` is opt-in for dev verification — never imported here.
   ========================================================================== */
/* ----- D-12 foundation ---------------------------------------------------- */
/* ==========================================================================
   BASIC TOUCH — DESIGN TOKENS (LP-2186 / D-12)
   ==========================================================================
   Palette, spacing, radius scales emitted as :root CSS custom properties so
   they're reachable from .rhtml inline `style` attributes and from B1's
   postMessage live preview. Mirrors corporate_server's backoffice-design-base.

   Convention: --bt-* namespace, collision-free with --theme-* and
   --extended-theme-*. SCSS variables follow the existing var()-fallback shim
   pattern (see _theme_extended_coloring.scss L21+).
   ========================================================================== */
:root {
  /* Accent ramp (orange) */
  --bt-accent-100: #ffedd5;
  --bt-accent-200: #fed7aa;
  --bt-accent-300: #fdba74;
  --bt-accent-400: #fb923c;
  --bt-accent-500: #f97316;
  --bt-accent-600: #ea580c;
  /* Ink ramp (near-black for body text + dark surfaces) */
  --bt-ink-700: #1a0f09;
  --bt-ink-800: #171210;
  --bt-ink-850: #15110f;
  --bt-ink-900: #0f0c0b;
  --bt-ink-950: #0b0908;
  /* Paper (light backgrounds) */
  --bt-paper-0: #ffffff;
  --bt-paper-50: #fff7ed;
  --bt-paper-100: #f8fafc;
  /* Warm accents + structural neutrals */
  --bt-soft: #fff2e2;
  --bt-border: #eadfd4;
  --bt-muted: #746b63;
  --bt-panel: #fffaf4;
  /* Stateful */
  --bt-state-success: #16a34a;
  --bt-state-warning: #f59e0b;
  --bt-state-danger: #dc2626;
  --bt-state-info: #475569;
  /* Spacing scale (1rem = 10px per touch _base.scss `html { font-size: 62.5% }`) */
  --bt-space-4: 0.4rem;
  --bt-space-6: 0.6rem;
  --bt-space-8: 0.8rem;
  --bt-space-10: 1.0rem;
  --bt-space-12: 1.2rem;
  --bt-space-14: 1.4rem;
  --bt-space-16: 1.6rem;
  --bt-space-18: 1.8rem;
  --bt-space-20: 2.0rem;
  --bt-space-24: 2.4rem;
  --bt-space-28: 2.8rem;
  --bt-space-32: 3.2rem;
  /* Radius scale */
  --bt-radius-pill: 999px;
  --bt-radius-sm: 10px;
  --bt-radius-md: 12px;
  --bt-radius-lg: 16px;
  --bt-radius-xl: 18px;
  --bt-radius-xxl: 22px; }

/* SCSS semantic shim — components consume THESE, not raw palette tokens.
   Retheming = set the semantic var; palette stays stable. */
/* Spacing aliases — used by mixins/utilities. Pure rem values so SCSS math works. */
/* ==========================================================================
   BASIC TOUCH — BREAKPOINTS (LP-2186 / D-12)
   ==========================================================================
   Standardised three-tier responsive system. 52.5em is the de-facto primary
   breakpoint in touch (~85% of existing @media usage); the rest are derived.
   Escape-hatch mixins (`bt-at-most`, `bt-at-least`) allow ad-hoc values when
   matching legacy widget breakpoints.
   ========================================================================== */
/* Tier boundaries (em-based — honour user font-size; max-width semantics use
   the upper edge of each tier). */
/*  640px */
/*  840px — primary, matches touch's 85%-used breakpoint */
/*  960px */
/* "tablet-down" = tablet AND below; reads as "the condensed layout side".
   Disambiguates vs. `tablet` alone which is often misread as "only tablet". */
/* Escape hatches for legacy / ad-hoc breakpoints (32em, 23.75em, 60em, etc.) */
/* ==========================================================================
   BASIC TOUCH — TYPOGRAPHY MIXINS (LP-2186 / D-12)
   ==========================================================================
   Type-scale mixins matching backoffice-design-base's rhythm: eyebrow /
   page-title / section-title / card-title / body / micro.

   Body font reuses the parent's already-loaded "Helvetica Neue" stack (Basic
   Touch locks `touch_extended_fonts=false` per A1, so no new font load).
   Display sizes pair with the parent's `Montserrat` import in
   `touch/stylesheets/theme.scss` L16.
   ========================================================================== */
/* ==========================================================================
   BASIC TOUCH — LAYOUT PRIMITIVES (LP-2186 / D-12)
   ==========================================================================
   Every-Layout-inspired primitives. Mixins are the canonical API; helper
   classes are convenience for direct .rhtml authoring.

   - bt-stack:   vertical flow with consistent gap.
   - bt-cluster: horizontal wrap (chips, button rows).
   - bt-sidebar: 2-column responsive split that collapses when content
     under-flows ~50% of container width.
   ========================================================================== */
.bt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-16); }

.bt-stack-8 {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-8); }

.bt-stack-24 {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-24); }

.bt-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bt-space-12);
  align-items: center; }

.bt-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bt-space-24); }
  .bt-sidebar > :first-child {
    flex-basis: 32rem;
    flex-grow: 1; }
  .bt-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%; }

/* ==========================================================================
   PAGE SHELL — sticky footer on the menu page (LP-2281)
   ==========================================================================
   The menu page height is driven by the product list, so when the menu filter
   narrows it to a handful of items the page becomes shorter than the viewport
   and the breadcrumb + footer "pop up" into the middle of the screen. Make the
   page a flex column that is at least viewport-tall and let the main content
   region absorb the slack, so the breadcrumb + footer stay pinned to the bottom.

   Scoped to `.page_menu` (the <body> class) so other page types keep their
   existing layout. The `.page__header` is position:sticky — flex layout does not
   affect its pinning. */
.page_menu .page__wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* track mobile browser chrome where supported */ }

.page_menu .page__content {
  /* grow to fill the slack on short pages → pushes breadcrumb + footer down.
     flex-shrink:0 so a tall product list keeps its natural height (wrapper
     simply grows past the viewport and scrolls). */
  flex: 1 0 auto; }

.page_menu .page__header,
.page_menu .breadcrumbs,
.page_menu .page__footer {
  flex: 0 0 auto;
  /* natural height; never grow or shrink */ }

/* ==========================================================================
   BASIC TOUCH — UTILITIES (LP-2186 / D-12)
   ==========================================================================
   Tailwind-equivalent utility layer. Includes:
   - aspect-ratio holders (eliminates CLS)
   - missing-asset placeholder (Stream D's first-class visual state)
   - hide-on-X
   - spacing utilities (logical properties — RTL-safe; `ar` is supported)

   The naming uses double-dashes for size suffix (`.bt-aspect--1-1`) to keep
   selectors valid CSS class names without backslash escaping. The mixin layer
   is the primary API; classes are convenience for direct .rhtml use.
   ========================================================================== */
/* --------------------------------------------------------------------------
   ASPECT-RATIO HOLDER — reserves space before image loads (CLS = 0)
   -------------------------------------------------------------------------- */
.bt-aspect {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block; }
  .bt-aspect > img,
  .bt-aspect > picture,
  .bt-aspect > svg,
  .bt-aspect > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.bt-aspect--1-1 {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block; }
  .bt-aspect--1-1 > img,
  .bt-aspect--1-1 > picture,
  .bt-aspect--1-1 > svg,
  .bt-aspect--1-1 > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.bt-aspect--4-3 {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: block; }
  .bt-aspect--4-3 > img,
  .bt-aspect--4-3 > picture,
  .bt-aspect--4-3 > svg,
  .bt-aspect--4-3 > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.bt-aspect--16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: block; }
  .bt-aspect--16-9 > img,
  .bt-aspect--16-9 > picture,
  .bt-aspect--16-9 > svg,
  .bt-aspect--16-9 > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.bt-aspect--3-2 {
  aspect-ratio: 3 / 2;
  width: 100%;
  display: block; }
  .bt-aspect--3-2 > img,
  .bt-aspect--3-2 > picture,
  .bt-aspect--3-2 > svg,
  .bt-aspect--3-2 > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.bt-aspect--3-4 {
  aspect-ratio: 3 / 4;
  width: 100%;
  display: block; }
  .bt-aspect--3-4 > img,
  .bt-aspect--3-4 > picture,
  .bt-aspect--3-4 > svg,
  .bt-aspect--3-4 > .bt-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

/* --------------------------------------------------------------------------
   MISSING-ASSET PLACEHOLDER — Stream D owns this pattern
   --------------------------------------------------------------------------
   Soft warm fill (--bt-soft) + centred 32px accent-tinted glyph at 0.55
   opacity. Triggered by:
     1. explicit class `.is-missing` — set from .rhtml via a
        product:if_not_image-style conditional (most reliable path).
     2. `:has()` progressive enhancement — newer Safari/Chrome only.
   Composes with `bt-aspect()` to keep symmetric grids on missing assets.
   -------------------------------------------------------------------------- */
.bt-placeholder--image {
  background: var(--bt-soft);
  position: relative; }
  .bt-placeholder--image::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    background: var(--bt-accent-500);
    opacity: 0.55;
    -webkit-mask: url("/assets-images/placeholder-image.svg") center/contain no-repeat;
    mask: url("/assets-images/placeholder-image.svg") center/contain no-repeat;
    pointer-events: none; }

.bt-placeholder--logo {
  background: var(--bt-soft);
  position: relative; }
  .bt-placeholder--logo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    background: var(--bt-accent-500);
    opacity: 0.55;
    -webkit-mask: url("/assets-images/placeholder-logo.svg") center/contain no-repeat;
    mask: url("/assets-images/placeholder-logo.svg") center/contain no-repeat;
    pointer-events: none; }

/* --------------------------------------------------------------------------
   PILL EDGE — header dropdown triggers (pizzan-inspired)
   --------------------------------------------------------------------------
   Soft-rounded rectangle, transparent fill, transparent border at rest so
   the band shows through. The transparent border reserves layout so the
   hover state can light up the edge without shifting siblings (the
   `:hover` rule in `_basic_header_menus.scss` paints the border to
   `currentColor`). Pairs with `bt-dropdown-edge` on the body.

   Radius uses `em` (ratio) instead of `px` so it scales with the link's
   font-size. At the default 1.4rem font-size, `0.65em` resolves to ~9px,
   which sits around 25% of the 4.8rem pill height — the pizzan-style
   rounded-rectangle proportion. Works for any pill size: bigger font
   → proportionally bigger radius, same visual feel.

   `--theme-header-pill-radius` lets a theme override the ratio if it
   wants a softer or sharper look without rewriting the mixin.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   DROPDOWN EDGE — dropdown body surface (pizzan-inspired)
   --------------------------------------------------------------------------
   White surface, thin neutral border, gentle elevation. The dropdown
   body sits on its own light surface so a dark hairline reads cleanly
   (kept as a soft rgba so it doesn't compete with the pizzan vibe).
   `bt-radius-md` corners read as friendly without competing with the
   pill trigger.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   HIDE-ON-X
   --------------------------------------------------------------------------
   Breakpoint flips around 52.5em — the touch primary. */
@media screen and (max-width: 52.5em) {
  .bt-hide-on-mobile {
    display: none !important; } }

@media screen and (min-width: 60em) {
  .bt-hide-on-desktop {
    display: none !important; } }

@media screen and (min-width: 60em) {
  .bt-show-on-mobile-only {
    display: none !important; } }

/* --------------------------------------------------------------------------
   SPACING UTILITIES — logical properties (RTL-safe)
   --------------------------------------------------------------------------
   Generated via @each over $bt-space-list. Output ~700 bytes minified.
   Properties used:
     padding-block-{start,end}, padding-inline-{start,end} → logical;
     margin equivalents likewise. `gap` is already logical. */
.bt-pt-4 {
  padding-block-start: 0.4rem; }

.bt-pb-4 {
  padding-block-end: 0.4rem; }

.bt-pl-4 {
  padding-inline-start: 0.4rem; }

.bt-pr-4 {
  padding-inline-end: 0.4rem; }

.bt-px-4 {
  padding-inline: 0.4rem; }

.bt-py-4 {
  padding-block: 0.4rem; }

.bt-mt-4 {
  margin-block-start: 0.4rem; }

.bt-mb-4 {
  margin-block-end: 0.4rem; }

.bt-ml-4 {
  margin-inline-start: 0.4rem; }

.bt-mr-4 {
  margin-inline-end: 0.4rem; }

.bt-mx-4 {
  margin-inline: 0.4rem; }

.bt-my-4 {
  margin-block: 0.4rem; }

.bt-gap-4 {
  gap: 0.4rem; }

.bt-pt-6 {
  padding-block-start: 0.6rem; }

.bt-pb-6 {
  padding-block-end: 0.6rem; }

.bt-pl-6 {
  padding-inline-start: 0.6rem; }

.bt-pr-6 {
  padding-inline-end: 0.6rem; }

.bt-px-6 {
  padding-inline: 0.6rem; }

.bt-py-6 {
  padding-block: 0.6rem; }

.bt-mt-6 {
  margin-block-start: 0.6rem; }

.bt-mb-6 {
  margin-block-end: 0.6rem; }

.bt-ml-6 {
  margin-inline-start: 0.6rem; }

.bt-mr-6 {
  margin-inline-end: 0.6rem; }

.bt-mx-6 {
  margin-inline: 0.6rem; }

.bt-my-6 {
  margin-block: 0.6rem; }

.bt-gap-6 {
  gap: 0.6rem; }

.bt-pt-8 {
  padding-block-start: 0.8rem; }

.bt-pb-8 {
  padding-block-end: 0.8rem; }

.bt-pl-8 {
  padding-inline-start: 0.8rem; }

.bt-pr-8 {
  padding-inline-end: 0.8rem; }

.bt-px-8 {
  padding-inline: 0.8rem; }

.bt-py-8 {
  padding-block: 0.8rem; }

.bt-mt-8 {
  margin-block-start: 0.8rem; }

.bt-mb-8 {
  margin-block-end: 0.8rem; }

.bt-ml-8 {
  margin-inline-start: 0.8rem; }

.bt-mr-8 {
  margin-inline-end: 0.8rem; }

.bt-mx-8 {
  margin-inline: 0.8rem; }

.bt-my-8 {
  margin-block: 0.8rem; }

.bt-gap-8 {
  gap: 0.8rem; }

.bt-pt-10 {
  padding-block-start: 1rem; }

.bt-pb-10 {
  padding-block-end: 1rem; }

.bt-pl-10 {
  padding-inline-start: 1rem; }

.bt-pr-10 {
  padding-inline-end: 1rem; }

.bt-px-10 {
  padding-inline: 1rem; }

.bt-py-10 {
  padding-block: 1rem; }

.bt-mt-10 {
  margin-block-start: 1rem; }

.bt-mb-10 {
  margin-block-end: 1rem; }

.bt-ml-10 {
  margin-inline-start: 1rem; }

.bt-mr-10 {
  margin-inline-end: 1rem; }

.bt-mx-10 {
  margin-inline: 1rem; }

.bt-my-10 {
  margin-block: 1rem; }

.bt-gap-10 {
  gap: 1rem; }

.bt-pt-12 {
  padding-block-start: 1.2rem; }

.bt-pb-12 {
  padding-block-end: 1.2rem; }

.bt-pl-12 {
  padding-inline-start: 1.2rem; }

.bt-pr-12 {
  padding-inline-end: 1.2rem; }

.bt-px-12 {
  padding-inline: 1.2rem; }

.bt-py-12 {
  padding-block: 1.2rem; }

.bt-mt-12 {
  margin-block-start: 1.2rem; }

.bt-mb-12 {
  margin-block-end: 1.2rem; }

.bt-ml-12 {
  margin-inline-start: 1.2rem; }

.bt-mr-12 {
  margin-inline-end: 1.2rem; }

.bt-mx-12 {
  margin-inline: 1.2rem; }

.bt-my-12 {
  margin-block: 1.2rem; }

.bt-gap-12 {
  gap: 1.2rem; }

.bt-pt-14 {
  padding-block-start: 1.4rem; }

.bt-pb-14 {
  padding-block-end: 1.4rem; }

.bt-pl-14 {
  padding-inline-start: 1.4rem; }

.bt-pr-14 {
  padding-inline-end: 1.4rem; }

.bt-px-14 {
  padding-inline: 1.4rem; }

.bt-py-14 {
  padding-block: 1.4rem; }

.bt-mt-14 {
  margin-block-start: 1.4rem; }

.bt-mb-14 {
  margin-block-end: 1.4rem; }

.bt-ml-14 {
  margin-inline-start: 1.4rem; }

.bt-mr-14 {
  margin-inline-end: 1.4rem; }

.bt-mx-14 {
  margin-inline: 1.4rem; }

.bt-my-14 {
  margin-block: 1.4rem; }

.bt-gap-14 {
  gap: 1.4rem; }

.bt-pt-16 {
  padding-block-start: 1.6rem; }

.bt-pb-16 {
  padding-block-end: 1.6rem; }

.bt-pl-16 {
  padding-inline-start: 1.6rem; }

.bt-pr-16 {
  padding-inline-end: 1.6rem; }

.bt-px-16 {
  padding-inline: 1.6rem; }

.bt-py-16 {
  padding-block: 1.6rem; }

.bt-mt-16 {
  margin-block-start: 1.6rem; }

.bt-mb-16 {
  margin-block-end: 1.6rem; }

.bt-ml-16 {
  margin-inline-start: 1.6rem; }

.bt-mr-16 {
  margin-inline-end: 1.6rem; }

.bt-mx-16 {
  margin-inline: 1.6rem; }

.bt-my-16 {
  margin-block: 1.6rem; }

.bt-gap-16 {
  gap: 1.6rem; }

.bt-pt-18 {
  padding-block-start: 1.8rem; }

.bt-pb-18 {
  padding-block-end: 1.8rem; }

.bt-pl-18 {
  padding-inline-start: 1.8rem; }

.bt-pr-18 {
  padding-inline-end: 1.8rem; }

.bt-px-18 {
  padding-inline: 1.8rem; }

.bt-py-18 {
  padding-block: 1.8rem; }

.bt-mt-18 {
  margin-block-start: 1.8rem; }

.bt-mb-18 {
  margin-block-end: 1.8rem; }

.bt-ml-18 {
  margin-inline-start: 1.8rem; }

.bt-mr-18 {
  margin-inline-end: 1.8rem; }

.bt-mx-18 {
  margin-inline: 1.8rem; }

.bt-my-18 {
  margin-block: 1.8rem; }

.bt-gap-18 {
  gap: 1.8rem; }

.bt-pt-20 {
  padding-block-start: 2rem; }

.bt-pb-20 {
  padding-block-end: 2rem; }

.bt-pl-20 {
  padding-inline-start: 2rem; }

.bt-pr-20 {
  padding-inline-end: 2rem; }

.bt-px-20 {
  padding-inline: 2rem; }

.bt-py-20 {
  padding-block: 2rem; }

.bt-mt-20 {
  margin-block-start: 2rem; }

.bt-mb-20 {
  margin-block-end: 2rem; }

.bt-ml-20 {
  margin-inline-start: 2rem; }

.bt-mr-20 {
  margin-inline-end: 2rem; }

.bt-mx-20 {
  margin-inline: 2rem; }

.bt-my-20 {
  margin-block: 2rem; }

.bt-gap-20 {
  gap: 2rem; }

.bt-pt-24 {
  padding-block-start: 2.4rem; }

.bt-pb-24 {
  padding-block-end: 2.4rem; }

.bt-pl-24 {
  padding-inline-start: 2.4rem; }

.bt-pr-24 {
  padding-inline-end: 2.4rem; }

.bt-px-24 {
  padding-inline: 2.4rem; }

.bt-py-24 {
  padding-block: 2.4rem; }

.bt-mt-24 {
  margin-block-start: 2.4rem; }

.bt-mb-24 {
  margin-block-end: 2.4rem; }

.bt-ml-24 {
  margin-inline-start: 2.4rem; }

.bt-mr-24 {
  margin-inline-end: 2.4rem; }

.bt-mx-24 {
  margin-inline: 2.4rem; }

.bt-my-24 {
  margin-block: 2.4rem; }

.bt-gap-24 {
  gap: 2.4rem; }

.bt-pt-28 {
  padding-block-start: 2.8rem; }

.bt-pb-28 {
  padding-block-end: 2.8rem; }

.bt-pl-28 {
  padding-inline-start: 2.8rem; }

.bt-pr-28 {
  padding-inline-end: 2.8rem; }

.bt-px-28 {
  padding-inline: 2.8rem; }

.bt-py-28 {
  padding-block: 2.8rem; }

.bt-mt-28 {
  margin-block-start: 2.8rem; }

.bt-mb-28 {
  margin-block-end: 2.8rem; }

.bt-ml-28 {
  margin-inline-start: 2.8rem; }

.bt-mr-28 {
  margin-inline-end: 2.8rem; }

.bt-mx-28 {
  margin-inline: 2.8rem; }

.bt-my-28 {
  margin-block: 2.8rem; }

.bt-gap-28 {
  gap: 2.8rem; }

.bt-pt-32 {
  padding-block-start: 3.2rem; }

.bt-pb-32 {
  padding-block-end: 3.2rem; }

.bt-pl-32 {
  padding-inline-start: 3.2rem; }

.bt-pr-32 {
  padding-inline-end: 3.2rem; }

.bt-px-32 {
  padding-inline: 3.2rem; }

.bt-py-32 {
  padding-block: 3.2rem; }

.bt-mt-32 {
  margin-block-start: 3.2rem; }

.bt-mb-32 {
  margin-block-end: 3.2rem; }

.bt-ml-32 {
  margin-inline-start: 3.2rem; }

.bt-mr-32 {
  margin-inline-end: 3.2rem; }

.bt-mx-32 {
  margin-inline: 3.2rem; }

.bt-my-32 {
  margin-block: 3.2rem; }

.bt-gap-32 {
  gap: 3.2rem; }

/* ----- LP-2175 (D-1) — Header & site chrome ------------------------------- */
/* ==========================================================================
   BASIC TOUCH — HEADER BAND + CLUSTER GROUPING + BANNER (LP-2175 / D-1)
   ==========================================================================
   Single-band header — top-level band styling (background, padding,
   position containment, inset margin + rounded corners on desktop /
   full-bleed collapse on mobile), `__wrapper` flex layout, sibling-order
   cluster grouping (logo / centre / right / basket / burger), and the
   optional `header_banner` / `header_top_banner` light pass.

   Refinement #3 (mockup-aligned — `lp-2175-mockup-76005|76006|76004`):
   the band is INSET from all 4 page edges (1.2rem) with large rounded
   corners (--bt-radius-xxl, 22px) on desktop; collapses to full-bleed
   (margin 0, radius 0) on `bt-tablet-down`.

   Wrapped in `.extended-mode { ... }` to match the parent's specificity —
   touch/_theme_extended_mode.scss declares `.header { ... }` inside an
   outer `.extended-mode` selector. Basic Touch locks
   `touch_extended_mode=true` (A1) so the wrapper is always present.

   Cross-references:
     - tokens, breakpoints mixins → D-12 partials (loaded first via
       _basic_touch aggregator).
     - layout-vars CSS-var emissions → touch/widgets/layout_vars.rhtml
       (D-1 only references vars; D-16 declares the new ones).

   Naming: the `_basic_header*` prefix avoids the partial-name collision
   with parent `themes/touch/stylesheets/_header.scss` documented in
   basic_touch.md Stream-D SCSS gotcha #4.
   ========================================================================== */
.extended-mode {
  /* =====================================================================
     1. HEADER BAND — INSET + ROUNDED (mockup `76005.jpg`)
     =====================================================================
     Single horizontal row, floating band inset from the page edges with
     large rounded corners on desktop. Mobile collapses to full-bleed.
     Flex `justify-content: space-between + gap` collapses hidden items
     naturally (vs. parent grid which leaves empty tracks).
     `position: relative` + z-index keeps the band over the homepage's
     floating CTAs. Inset margin does NOT break sticky behaviour —
     neither parent `_theme_extended_mode.scss` nor the page layout
     declares `position: sticky` on `.header`.
  */
  /* ---------------------------------------------------------------------
     HEADER POSITIONING (LP-2175 refactor — v2)
     =====================================================================
     DESKTOP: `.page__header` is sticky at viewport top (the "fixed
              bar"). The burger icon flows naturally inside the header
              so it's always reachable on scroll.
     MOBILE : `.page__header` stays in normal flow — scrolls away with
              the page (M1). The mobile cat-nav (`.category-navigation_mobile`)
              gets pinned by FixedTopbar after scrolling past it (M2).
              Trade-off: burger icon scrolls away too — user scrolls
              back to top to re-open the menu.
     The burger panel sits BELOW the header when open (A5), so the
     header (and the burger icon morphed to X) remains visible. */
    /* DESKTOP cat-nav pins via pure CSS `position: sticky` — NO JS.
       Pinning JS (FixedTopbar) created a brief gap during the
       scroll-past handoff. Sticky transitions smoothly: cat-nav stays
       in flow until its `top: <header-height>` position is reached,
       then pins. Header + cat-nav stack seamlessly with no flicker.

       Box-shadow mirrors the parent's `.fixed-topbar` shadow so the
       pinned cat-nav has the same subtle elevation hint on desktop as
       it does on mobile (where FixedTopbar JS adds `.fixed-topbar`
       which carries the shadow). Without this, desktop reads as flat.

       Mobile uses FixedTopbar JS for `.category-navigation_mobile`
       (lives inside `.page__header` which scrolls away, so it can't
       sticky-pin to viewport on its own). */
    /* =====================================================================
       HYBRID-APP MODE — hide the web header (LP-2175 / LP-2165 A1)
       =====================================================================
       When the shop is being rendered inside its hybrid mobile app
       webview, the native app provides its own chrome (top bar,
       burger, navigation). The web `.header` band (logo + pills +
       burger trigger + off-canvas) is therefore redundant — hide it.

       Detection lives in RE: `tags/rendering.rb` adds the body class
       `hybrid_app` (and a platform-specific variant like
       `android_hybrid_app` / `ios_hybrid_app` / `mobile_hybrid_app`) when:
         1. `rs_shop.has_mobile_hybrid_app = true` (per-shop DB flag)
         2. user agent matches /.*(android_hybrid_app|ios_hybrid_app|mobile_hybrid_app)$/
       Both conditions must hold — see
       app/controllers/application_controller.rb#L260.

       Scope rules carefully so the fixed topbar (category navigation)
       keeps working:
         - Hide `.header` (the band) only — NOT `.page__header`. The
           mobile `.category-navigation_mobile` is a SIBLING of `.header`
           inside `.page__header`; collapsing `.header` lets the cat-nav
           sit at the top of the page where FixedTopbar can still pin it.
         - Desktop `.category-navigation:not(_mobile)` uses
           `position: sticky; top: var(--bt-desktop-header-height, 7rem)`
           — reset the var to 0 so the cat-nav sticks to the viewport
           top instead of an invisible header offset.
         - Off-canvas top (`var(--bt-mobile-header-height)`) also resets
           to 0 so any stray burger interaction opens cleanly from the
           top edge.
    */
    /* =====================================================================
       2. CLUSTER GROUPING
       =====================================================================
       The parent emits 9 sibling divs under `.header__wrapper` (loyalty,
       user, shop, ordering, lang, tracking, burger, basket, logo).
       Three-cluster rhythm — left / centre / right — via flex `order:`
       rules + auto-margin on each cluster's first sibling.

       Design feedback 2026-05-23 (revised):
         - Language stays pinned next to the logo.
         - Restaurant info joins the CENTRE cluster (with tracking,
           ordering, loyalty).
         - Account (welcome back) joins the RIGHT cluster next to the
           basket.

       Order:
         logo, language               (left cluster   — 1, 2)
         tracking, ordering, loyalty, shop  (centre cluster — 3..6)
         user, basket                 (right cluster  — 7, 8)
         burger                       (leftmost on mobile only — 0)
    */
    /* TRUE-CENTERING the middle cluster, ROBUST to absent items.
       Anchor the auto-margins on the cluster boundaries themselves
       (language-menu on the left, user-menu on the right). Both are
       always rendered, so the centering survives every logged-in /
       logged-out / franchise / index vs. menu page combination:

         logo lang [auto-space] [centre items, any subset] [auto-space] user basket

       Earlier we put the auto-margins on `tracking` and `shop` — when
       `tracking` was absent (logged-out user, no `order_tracking`
       feature), the start-margin disappeared with it and the centre
       cluster slid against the language pill. */
  /* =====================================================================
     6. BANNERS — header_top_banner + header_banner (light pass)
     =====================================================================
     `header_top_banner` is OFF by default in Basic Touch (A1 locks
     it). Top-banner image is emitted by `header.rhtml` as a `<style>`
     block setting `background-image`. When the image is missing, the
     property resolves to `none` and the band falls back to its solid
     background — no broken-image icon, no layout jump.
  */ }
  .extended-mode .header {
    /* Position handled on `.page__header` (the parent) — see rule
       outside this block. `.header` itself stays in normal flow
       inside its sticky parent. (Sticky on `.header` directly
       failed because `.page__header` is the same height as
       `.header`, so the sticky's containing block scrolls out at
       the same moment the header would.) */
    margin: 0;
    padding-block: var(--bt-space-10);
    background-color: var(--theme-header-background-color, #ccc);
    border-radius: 0;
    border-block-end: 0; }
    .extended-mode .header__wrapper {
      display: flex;
      align-items: center;
      /* `flex-start` + auto-margins on the cluster boundaries gives
         us a true three-cluster split: left pinned to start, right
         pinned to end, centre cluster mathematically centered in
         the remaining space. `space-between` doesn't centre — it
         only spaces siblings, so we drop it. */
      justify-content: flex-start;
      gap: var(--bt-space-16);
      min-height: 5rem;
      padding-inline: var(--bt-space-16);
      /* Defensive: parent re-`position: absolute`s burger and basket
         outside the flex track flow. Override back to static so
         `justify-content: space-between` collapses them naturally. */ }
      .extended-mode .header__wrapper .header__burger-menu,
      .extended-mode .header__wrapper .header__basket-menu {
        position: static;
        transform: none; }
      .extended-mode .header__wrapper .header__basket-menu:has(.basket-menu) {
        position: static;
        transform: none;
        margin-block-start: 0; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .header {
        padding-block: var(--bt-space-8); }
        .extended-mode .header__wrapper {
          gap: var(--bt-space-12);
          min-height: 5rem;
          /* Symmetric inline padding so burger (left) and language
             pill (right) sit at equal distances from the screen
             edges. The wrapper's padding alone defines that gap. */
          padding-inline: var(--bt-space-12); } }
  .extended-mode .page__header {
    position: sticky;
    top: 0;
    /* Sit in the SAME stacking band as the parent's pinned header
       (`.fixed-topbar` = z-index 900) — deliberately BELOW the
       overlay/popup/off-canvas layer so the sticky band never draws
       over open surfaces:
         page__overlay 999 < customization popup 1210 < off-canvas
         basket 3333.
       The earlier 9999 made the header cover the customization popup
       and the basket panel. Keep this < 999; the cat-nav below uses
       899 so the header still stacks above it. */
    z-index: 900; }
  @media screen and (max-width: 52.5em) {
    .extended-mode {
      /* Neutralise the JS-driven `.fixed-topbar` class — we don't want
         the page__header itself pinned on mobile (M1). FixedTopbar
         still pins the mobile cat-nav (passed separately as its
         "mobile topbar" — see scripts_bottom_fixed_topbar override). */
        /* When the burger menu is open, pin the header at viewport top
           so the same header chrome (logo, language, X close) stays
           visible above the off-canvas. The burger menu reads as a
           continuation of the header — they belong together. The
           off-canvas top offset (set in _basic_header_mobile.scss)
           matches the header height so the panel starts just below.

           Hairline at the header's bottom edge — separates header from
           the burger content that opens below it. */ }
      .extended-mode .page__header {
        position: relative; }
      .extended-mode .page__header.fixed-topbar {
        position: relative !important;
        top: auto !important;
        box-shadow: none !important; }
      .extended-mode.sidr-open .page__header, .extended-mode.main-menu-ofc-open .page__header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        border-block-end: 1px solid rgba(255, 255, 255, 0.12); } }
  .extended-mode .category-navigation:not(.category-navigation_mobile) {
    position: sticky;
    top: var(--bt-desktop-header-height, 7rem);
    /* One below the header band (900) so the cat-nav slides under it
       when it pins, and — like the header — stays BELOW the
       overlay/popup/off-canvas layer (see `.page__header` above). */
    z-index: 899;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    /* Always-on divider between the category nav and the header band
       above it (LP-2164). Driven by the `ext_header_nav_divider_color`
       colour key (Design Editor). The fallback is a NEUTRAL grey at
       moderate alpha so the divider stays visible on BOTH light and
       dark headers when a shop has no explicit value (the dark
       predefined datasets ship their own tuned white-alpha value).
       There is NO on/off toggle — to hide the divider, set the colour
       key to the header background colour. */
    border-block-start: 1px solid var(--theme-header-nav-divider-color, rgba(128, 128, 128, 0.32)); }
  .extended-mode.hybrid_app {
    --bt-desktop-header-height: 0;
    --bt-mobile-header-height: 0;
        /* Collapse the header band to zero height WITHOUT using
           `display: none`. The parent FixedTopbar JS detects mobile
           via `$j('.header__burger-menu').is(':visible')` — and the
           burger lives inside .header. Display-none cascades to the
           burger, jQuery reports false, FixedTopbar assigns the
           desktop topbar (null in basic-touch), and the mobile cat-nav
           never gets `.fixed-topbar` added on scroll — so it doesn't
           pin.

           `visibility: hidden` + `height: 0` + `overflow: hidden`
           collapses the band visually but keeps descendants in DOM
           with their own offsetWidth/Height, so jQuery's :visible
           check still returns true for the burger and FixedTopbar
           correctly recognises mobile mode.

           Sidr's off-canvas inside .header inherits visibility:hidden
           — that's intended; the hybrid app provides its own burger
           menu so the web off-canvas shouldn't open in this mode. */ }
    .extended-mode.hybrid_app .page__header .header {
      visibility: hidden;
      height: 0;
      min-height: 0;
      padding: 0;
      overflow: hidden; }
  .extended-mode .header__logo {
    order: 1; }
  .extended-mode .header__language-menu {
    order: 2; }
  .extended-mode .header__tracking-menu {
    order: 3; }
  .extended-mode .header__ordering-menu {
    order: 4; }
  .extended-mode .header__loyalty-menu {
    order: 5; }
  .extended-mode .header__shop-menu {
    order: 6; }
  .extended-mode .header__user-menu {
    order: 7; }
  .extended-mode .header__basket-menu {
    order: 8; }
  .extended-mode .header__burger-menu {
    order: 0; }
  .extended-mode .header__wrapper > .header__language-menu {
    margin-inline-end: auto; }
  .extended-mode .header__wrapper > .header__user-menu {
    margin-inline-start: auto; }
  .extended-mode .header-banner {
    display: block;
    width: 100%; }
    .extended-mode .header-banner__image {
      display: block;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 0; }

/* ==========================================================================
   BASIC TOUCH — HEADER LOGO (LP-2175 / D-1)
   ==========================================================================
   Logo block: either an uploaded logo image, or a bold-uppercase shop-name
   text fallback (the parent header widget falls back to the shop name
   when no logo image is uploaded). No placeholder circle, no tagline —
   design feedback (2026-05-23) locked this to "logo OR bold name,
   nothing else".

   NOTE: never write radius custom-tag tokens (the r-colon syntax) inside
   SCSS comments — the radius preprocessor parses comments and chokes on
   unclosed start tags. See basic_touch.md Stream-D SCSS gotcha #3.

   Sizes:
     desktop: 5rem reserved height — wordmark 2.0rem, image up to 5rem.
     mobile:  4rem reserved height — wordmark 1.6rem, image up to 4rem
              (centred via `.header__logo-image_mobile`).

   Colour keys (referenced; existing):
     --theme-header-logo-color
   ========================================================================== */
.extended-mode .header__logo {
  min-height: 5rem;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-inline-size: 36rem;
  /* Text-fallback variant (shop:if_not_shop_logo → shop name). */
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 2.0rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--theme-header-logo-color, #212121);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Very narrow phones (<= 23em) — drop one more notch so a 3-word
     shop name still fits on a single line next to the pills. */ }
  .extended-mode .header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis; }
  .extended-mode .header__logo-image {
    display: block;
    max-height: 5rem;
    width: auto;
    max-width: 100%; }
  .extended-mode .header__logo-image_mobile {
    display: none; }
  @media screen and (max-width: 52.5em) {
    .extended-mode .header__logo {
      min-height: 4rem;
      font-size: 1.5rem;
      letter-spacing: 0.01em;
      text-align: center;
      justify-content: center;
      flex: 1 1 0;
      /* `0` basis = shrink past content
         width before cropping kicks in */
      min-inline-size: 0;
      max-inline-size: none;
      /* Mobile: prefer wrapping over ellipsis. The shop name is the
         only thing in this cluster and is typically 1-3 short words
         ("NEW OLIV PIZZ", "BASILE", ...) — a 2-line wrap is more
         readable than truncation. */
      white-space: normal;
      word-break: break-word;
      overflow: visible;
      text-overflow: clip;
      /* The default parent widget (`header_banner_logo.rhtml`)
         only emits ONE `<img class="header__logo-image">` — there
         is no `_mobile` variant in the DOM unless a child theme
         overrides the widget (e.g. zing-kitchen). So on mobile
         we keep the single logo image visible, just resized.
         Earlier we hid `&-image` and tried to show a `_mobile`
         that didn't exist → 0x0 collapsed image. */
      /* When a child theme DOES emit both variants, hide the
         desktop one on mobile and show the dedicated mobile one. */ }
      .extended-mode .header__logo-link {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-inline-size: 100%; }
      .extended-mode .header__logo-image {
        display: block;
        max-height: 4rem;
        width: auto;
        margin-inline: auto; }
      .extended-mode .header__logo-link:has(.header__logo-image_mobile) .header__logo-image {
        display: none; }
      .extended-mode .header__logo-image_mobile {
        display: block;
        max-height: 4rem;
        width: auto;
        margin-inline: auto; } }
  @media (max-width: 23em) {
    .extended-mode .header__logo {
      font-size: 1.3rem;
      letter-spacing: 0; } }

/* ==========================================================================
   BASIC TOUCH — HEADER MENUS / DROPDOWNS (LP-2175 / D-1, refinement #3)
   ==========================================================================
   Generic dropdown trigger styling — compact pill with hover state —
   plus per-variant decorations:
     - `_loyalty`  : outlined `☆` (U+2606) prefix + "Vous avez 0 point"
     - `_language` : globe `🌐` (U+1F310) prefix + full localised name
     - `_tracking` : clipboard / paper-with-lines SVG-mask glyph
     - `_shop`     : circled-`ⓘ` SVG-mask glyph
     - `_user`     : person SVG-mask glyph + logged-out two-line stack

   The `_ordering` "Our menu" filled-button CTA variant lives in a
   separate partial (`_basic_header_cta.scss`) — visually distinct, the
   only filled button in the band; specificity-isolated and most likely
   to evolve. Splitting it keeps churn from cascading into the other
   menu rules.

   Colour fallbacks (every new key falls back via nested `var()` per
   the Basic Touch epic rule, D-16 / LP-2167):
     --theme-header-link-color
       → var(--theme-header-color, $dfcBlack)
     --theme-header-link-hover-color
       → var(--theme-button-hover-color, $dfcWhite)
     --theme-header-link-hover-background-color
       → var(--theme-button-hover-background-color, $dfcBlack)
     --theme-header-loyalty-badge-color
       → var(--theme-header-color, $dfcBlack)
     --theme-header-loyalty-badge-icon-color (NEW — D-16 this PR)
       → var(--theme-header-loyalty-badge-color,
          var(--theme-header-color, $dfcBlack))
     --theme-header-tracking-icon-color (NEW — D-16 this PR)
       → var(--theme-header-link-color,
          var(--theme-header-color, $dfcBlack))
   ========================================================================== */
.extended-mode {
  /* =====================================================================
     4. HEADER MENUS / DROPDOWNS (mockup `76005.jpg` / `76006.jpg` / `76004.jpg`)
     =====================================================================
     Generic dropdown trigger styling — compact pill with hover state —
     plus per-variant decorations: outlined `☆` for loyalty, globe for
     language, clipboard SVG-mask for tracking, circled-`ⓘ` for shop
     info, person SVG-mask for user account.
  */ }
  .extended-mode .dropdown-menu {
    /* Caret — a small down-chevron, sized to match the link text and
       themed via `currentColor`. Inline SVG-mask so it follows the
       link colour on hover / active state. */
    /* ---- LOYALTY — outlined ☆ + "0 points" (basic-touch widget
       override points the underlying `r:buyer:you_have_x_points` tag at
       the shorter `loyalty.x_points` key — "%{points} points").
       NOTE on Sass `&`: both `&_loyalty` and `&__header-link` would
       each expand to the FULL parent chain, producing a nested
       `.extended-mode .dropdown-menu_loyalty .extended-mode
        .dropdown-menu__header-link` selector that doesn't match the
       DOM. Use a literal class on the second segment. */
        /* ---- LANGUAGE — SVG flag + 2-letter code --------------------
           Compact pill sitting next to the logo (cluster order 2). The
           flag is an inline SVG asset served from
           `/assets-images/flag-<cc>.svg` (sourced from lipis/flag-icons,
           4x3 ratio). The `data-locale-code` attribute is emitted by the
           basic-touch widget override (value = `locale:language_code` →
           "en", "fr", ...). Unknown codes silently drop the flag —
           layout never breaks.

           The flag rules below target ANY descendant of `_language` with
           the attribute, so the same mapping styles BOTH the trigger
           (`__header-link`) and the dropdown items (`__item-link`). */
    /* Compact pill — hide the full localised name, show the 2-letter
       code only. Both spans stay in DOM (parent widget) but only the
       short one renders. */
    /* The parent rule `.dropdown-menu_language .dropdown-menu__body
       { width: 100%; }` ties the dropdown body width to the trigger
       (~6rem with the new compact pill). Force a usable min-width
       so the localised language names render in full. */
    /* ---- TRACKING — clipboard SVG-mask ------------------------------ */
        /* ---- SHOP / INFO RESTAURANT — circled-ⓘ + label + chevron --------
           Design feedback 2026-05-23 (revised): keep the full label, but
           move the pill into the CENTRE cluster (next to tracking /
           ordering / loyalty) — order rule lives in `_basic_header.scss`.

           The basic-touch widget still wraps the label text in a span +
           sets `aria-label`, but here the span is visible (just like the
           other dropdown pills). */
    /* ---- USER ACCOUNT ----------------------------------------------
       Logged-out (mockup `76004.jpg`): two-line stack with person
       SVG-mask prefix. Requires the override at
       `basic-touch/widgets/header_user_menu.rhtml` to wrap the
       logged-out r-colon-t translation tokens in `_line_primary` /
       `_line_secondary` spans. Logged-in stays single line (mockup
       `76005.jpg`).
       (Note: the radius preprocessor parses SCSS comments — never
       write a literal `r:t` start-tag here; sanitise per
       basic_touch.md Stream-D gotcha #3.) */
    /* ---- USER DROPDOWN BODY — burger-aligned spacing + hover.
       Scope is `_user .dropdown-menu__body` (and descendants) — no
       rules leak to the shared `__body` / `__items` / `__item-link`
       selectors used by the other dropdowns (language, loyalty,
       shop, tracking). Icon tiles mirror the burger menu pattern
       (tinted square + brand-coloured glyph), just sized down for
       the compact dropdown rows. */
    /* ---- Dropdown bodies — pizzan-style edge --------------------------
       Uniform surface treatment across every header dropdown (language,
       loyalty, user, shop, tracking). Mixin centralises the look so
       future pills inherit automatically. */ }
    .extended-mode .dropdown-menu__header-link {
      /* Uniform pill height. The two-line account stack sits inside
         this same `min-height` so all pills line up visually. The
         em-based radius in `bt-pill-edge` scales with the
         font-size, giving a consistent rounded-rectangle shape. */
      min-height: 4.8rem;
      padding: var(--bt-space-8) var(--bt-space-16);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      color: var(--theme-header-link-color, var(--theme-header-color, #212121));
      transition: color .2s ease, background-color .2s ease, border-color .2s ease;
      display: inline-flex;
      align-items: center;
      gap: var(--bt-space-8);
      white-space: nowrap;
      box-sizing: border-box;
      border: 1px solid var(--theme-header-pill-border-color, transparent);
      border-radius: var(--theme-header-pill-radius, 0.65em);
      background-color: var(--theme-header-pill-background-color, transparent); }
      .extended-mode .dropdown-menu__header-link:hover, .extended-mode .dropdown-menu__header-link:focus-visible {
        color: var(--theme-header-link-hover-color, var(--theme-button-hover-color, #fff));
        background-color: var(--theme-header-link-hover-background-color, var(--theme-button-hover-background-color, #212121));
        /* Hover lights up the edge — the mixin already reserved a
           1px transparent border at rest, so no layout shift. */
        border-color: var(--theme-header-pill-hover-border-color, currentColor); }
    .extended-mode .dropdown-menu__header-icon {
      display: inline-block;
      width: 0.9rem;
      height: 0.9rem;
      flex: 0 0 auto;
      background-color: currentColor;
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      opacity: 0.7; }
    .extended-mode .dropdown-menu[data-dropdown-open] .dropdown-menu__header-link {
      color: var(--theme-header-link-hover-color, var(--theme-button-hover-color, #fff));
      background-color: var(--theme-header-link-hover-background-color, var(--theme-button-hover-background-color, #212121));
      border-color: var(--theme-header-pill-hover-border-color, currentColor); }
    .extended-mode .dropdown-menu_loyalty .dropdown-menu__header-link {
      color: var(--theme-header-loyalty-badge-color, var(--theme-header-color, #212121));
      background-color: var(--theme-header-loyalty-badge-background-color, transparent);
      border-color: var(--theme-header-loyalty-border-color, var(--theme-header-pill-border-color, transparent));
      /* Border inherited from `bt-pill-edge` (transparent at rest,
         currentColor on hover). The old explicit 1px border that
         lived here was the only pill always showing an edge — drop
         it so the loyalty pill matches the rest. */ }
      .extended-mode .dropdown-menu_loyalty .dropdown-menu__header-link::before {
        content: "\2606";
        /* Outlined star — U+2606 */
        display: inline-block;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-loyalty-badge-color, var(--theme-header-color, #212121))); }
    .extended-mode .dropdown-menu_language {
      /* Dropdown items — flag + localised name. The item links get
         the same `data-locale-code` attribute via the widget
         override, so they share the flag mapping above. */ }
      .extended-mode .dropdown-menu_language [data-locale-code]::before {
        content: "";
        display: inline-block;
        width: 2.0rem;
        height: 1.5rem;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 2px;
        flex: 0 0 auto;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
      .extended-mode .dropdown-menu_language [data-locale-code="en"]::before {
        background-image: url("/assets-images/flag-gb.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="fr"]::before {
        background-image: url("/assets-images/flag-fr.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="it"]::before {
        background-image: url("/assets-images/flag-it.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="de"]::before {
        background-image: url("/assets-images/flag-de.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="es"]::before {
        background-image: url("/assets-images/flag-es.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="pt"]::before {
        background-image: url("/assets-images/flag-pt.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="nl"]::before {
        background-image: url("/assets-images/flag-nl.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="ar"]::before {
        background-image: url("/assets-images/flag-sa.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="pl"]::before {
        background-image: url("/assets-images/flag-pl.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="ru"]::before {
        background-image: url("/assets-images/flag-ru.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="bg"]::before {
        background-image: url("/assets-images/flag-bg.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="ga"]::before {
        background-image: url("/assets-images/flag-ie.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="is"]::before {
        background-image: url("/assets-images/flag-is.svg"); }
      .extended-mode .dropdown-menu_language [data-locale-code="sk"]::before {
        background-image: url("/assets-images/flag-sk.svg"); }
      .extended-mode .dropdown-menu_language .dropdown-menu__header-link {
        text-transform: uppercase;
        color: var(--theme-header-language-color, var(--theme-header-link-color, var(--theme-header-color, #212121)));
        background-color: var(--theme-header-language-background-color, var(--theme-header-pill-background-color, transparent));
        border-color: var(--theme-header-language-border-color, var(--theme-header-pill-border-color, transparent)); }
      .extended-mode .dropdown-menu_language .dropdown-menu__item-link {
        display: flex;
        align-items: center;
        gap: var(--bt-space-10);
        text-transform: none;
        font-size: 1.4rem; }
    .extended-mode .dropdown-menu__header-language-full {
      display: none; }
    .extended-mode .dropdown-menu__header-language-short {
      display: inline; }
    .extended-mode .dropdown-menu_language .dropdown-menu__body {
      min-width: 18rem;
      padding: var(--bt-space-6); }
    .extended-mode .dropdown-menu_tracking .dropdown-menu__header-link::before {
      content: "";
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      vertical-align: -2px;
      flex: 0 0 auto;
      background-color: var(--theme-header-tracking-icon-color, var(--theme-header-link-color, var(--theme-header-color, #212121)));
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center; }
    .extended-mode .dropdown-menu_shop .dropdown-menu__header-link::before {
      content: "";
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      vertical-align: -2px;
      flex: 0 0 auto;
      background-color: var(--theme-header-link-color, var(--theme-header-color, #212121));
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='11' x2='12' y2='17'/><circle cx='12' cy='8' r='0.5' fill='black' stroke='black'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='11' x2='12' y2='17'/><circle cx='12' cy='8' r='0.5' fill='black' stroke='black'/></svg>");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center; }
    .extended-mode .dropdown-menu_user .dropdown-menu__header-link {
      color: var(--theme-header-account-color, var(--theme-header-link-color, var(--theme-header-color, #212121)));
      background-color: var(--theme-header-account-background-color, var(--theme-header-pill-background-color, transparent));
      border-color: var(--theme-header-account-border-color, var(--theme-header-pill-border-color, transparent)); }
      .extended-mode .dropdown-menu_user .dropdown-menu__header-link::before {
        content: "";
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        vertical-align: middle;
        flex: 0 0 auto;
        background-color: var(--theme-header-account-color, var(--theme-header-link-color, var(--theme-header-color, #212121)));
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat; }
      .extended-mode .dropdown-menu_user .dropdown-menu__header-link:has(.dropdown-menu__header-link_line_primary) {
        flex-direction: row;
        align-items: center; }
        .extended-mode .dropdown-menu_user .dropdown-menu__header-link:has(.dropdown-menu__header-link_line_primary) .dropdown-menu__header-link_line_primary,
        .extended-mode .dropdown-menu_user .dropdown-menu__header-link:has(.dropdown-menu__header-link_line_primary) .dropdown-menu__header-link_line_secondary {
          display: block;
          line-height: 1.1;
          /* tight — two lines must fit
             in the shared 4.8rem
             min-height without
             overflowing siblings */ }
        .extended-mode .dropdown-menu_user .dropdown-menu__header-link:has(.dropdown-menu__header-link_line_primary) .dropdown-menu__header-link_line_primary {
          font-size: 1.25rem;
          font-weight: 700; }
        .extended-mode .dropdown-menu_user .dropdown-menu__header-link:has(.dropdown-menu__header-link_line_primary) .dropdown-menu__header-link_line_secondary {
          font-size: 0.9rem;
          font-weight: 500;
          opacity: 0.85; }
    .extended-mode .dropdown-menu_user .dropdown-menu__header-link_lines {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start; }
    .extended-mode .dropdown-menu_user .dropdown-menu__body {
      padding: var(--bt-space-6);
      /* Logout row — hairline divider above to read as a secondary
         action separated from the destination links. */ }
      .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__items {
        display: flex;
        flex-direction: column;
        gap: 2px; }
      .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-link {
        display: flex;
        align-items: center;
        gap: var(--bt-space-12);
        padding: var(--bt-space-8) var(--bt-space-10);
        border-radius: var(--bt-radius-md);
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.2;
        transition: background-color .15s ease; }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-link:hover, .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-link:focus-visible {
          background-color: color-mix(in srgb, var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))) 8%, transparent); }
      .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon {
        flex: 0 0 auto;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: var(--bt-radius-md);
        background-color: color-mix(in srgb, var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))) 14%, transparent);
        position: relative;
        /* Glyphs mirror the burger menu `section-icon` mask-image
           set so the two surfaces share the exact iconography. */
        /* Logout — door + outbound arrow. */ }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon::before {
          content: "";
          position: absolute;
          inset: 0;
          margin: auto;
          width: 1.5rem;
          height: 1.5rem;
          background-color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))));
          -webkit-mask-size: contain;
          mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center; }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_tracking::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>"); }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_orders::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l5 5v15a0 0 0 0 1 0 0H6a0 0 0 0 1 0 0V2a0 0 0 0 1 0 0z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='15' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l5 5v15a0 0 0 0 1 0 0H6a0 0 0 0 1 0 0V2a0 0 0 0 1 0 0z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='15' y2='17'/></svg>"); }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_loyalty::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"); }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_credit::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h16'/><path d='M3 7v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/><circle cx='17' cy='14' r='1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h16'/><path d='M3 7v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/><circle cx='17' cy='14' r='1.5'/></svg>"); }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_account::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>"); }
        .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item-icon_logout::before {
          -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>"); }
      .extended-mode .dropdown-menu_user .dropdown-menu__body .dropdown-menu__item_logout {
        margin-block-start: var(--bt-space-4);
        padding-block-start: var(--bt-space-4);
        border-block-start: 1px solid rgba(0, 0, 0, 0.08); }
    .extended-mode .dropdown-menu__body {
      background-color: var(--theme-header-dropdown-background-color, var(--bt-paper-0, #ffffff));
      border: 1px solid var(--theme-header-dropdown-border-color, rgba(0, 0, 0, 0.12));
      border-radius: var(--bt-radius-md);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
    .extended-mode .dropdown-menu__items {
      border-radius: var(--bt-radius-md); }

/* ==========================================================================
   BASIC TOUCH — HEADER PRIMARY CTA (LP-2175 / D-1, refinement #3)
   ==========================================================================
   The "Order online" / "Our menu" filled-button CTA in the header band —
   emitted by the `index_header_order_link` widget as
   `.dropdown-menu.dropdown-menu_ordering`. Visually distinct (the only
   filled button in the band, pizzan.is-style), so kept in its own partial
   even though it lives under the same `.dropdown-menu` class as the
   other header menus.

   Splitting CTA from `_basic_header_menus.scss` keeps churn isolated:
   the CTA is the most-likely-to-evolve element of the band (button
   shape, hover treatment, A/B tests), so it gets its own specificity
   scope and its own file.

   Colour keys (referenced; declared in D-16):
     --theme-header-cta-color
       → var(--theme-index-order-button-color, $dfcWhite)
     --theme-header-cta-background-color
       → var(--theme-index-order-button-background-color, $dfcBlack)
   ========================================================================== */
.extended-mode .dropdown-menu {
  /* ---- PRIMARY CTA — "Our menu" filled-button --------------------
     The only filled button in the band (pizzan.is-style). NOTE on
     Sass `&`: same caveat as `_loyalty` in `_basic_header_menus`
     — use a literal class on the second segment, not nested `&`. */ }
  .extended-mode .dropdown-menu_ordering .dropdown-menu__header-link {
    color: var(--theme-header-cta-color, var(--theme-index-order-button-color, #fff));
    background-color: var(--theme-header-cta-background-color, var(--theme-index-order-button-background-color, #212121));
    padding-inline: var(--bt-space-16); }
    .extended-mode .dropdown-menu_ordering .dropdown-menu__header-link:hover, .extended-mode .dropdown-menu_ordering .dropdown-menu__header-link:focus-visible {
      color: var(--theme-header-cta-color, var(--theme-index-order-button-color, #fff));
      background-color: var(--theme-header-cta-background-color, var(--theme-index-order-button-background-color, #212121));
      filter: brightness(0.92); }

/* ==========================================================================
   BASIC TOUCH — HEADER BASKET PILL (LP-2175 / D-1, refinement #3)
   ==========================================================================
   The `header_basket_button` cart pill that appears on menu/order
   pages when `basket_header=true` (locked on in Basic Touch — A1).

   Refinement #3 (mockup `76005.jpg`): dark glassy pill with cart icon +
   price + red count badge anchored to the top-right. 4 new chip-specific
   colour keys (independent of the floating-panel `ext_basket_*`
   namespace, so the chip can be themed without disturbing the
   off-canvas basket panel).

   Outer `&.page_header-basket` wrapper is the touch convention — the
   parent declares `.header-basket` only when `basket_header=true` is
   on, so this rule only fires for menu/order pages with a basket pill.

   The 1.9rem red count badge is anchored top-right via
   `position: absolute` + `inset-inline-end: -.5rem`, with a 2px
   `box-shadow` of the band background colour to "lift" it off the band
   (matching the mockup's hovering-chip look).

   Colour keys (referenced; declared in D-16):
     --theme-header-basket-chip-color (NEW)
       → var(--theme-header-link-color,
          var(--theme-header-color, $dfcBlack))
     --theme-header-basket-chip-background-color (NEW)
       → linear-gradient(135deg, rgba(255,255,255,0.08),
                                 rgba(255,255,255,0.02))
     --theme-header-basket-chip-badge-color (NEW)
       → var(--theme-basket-count-background-color, $dfcRed)
     --theme-header-basket-chip-badge-text-color (NEW)
       → var(--theme-basket-count-color, $dfcWhite)
   ========================================================================== */
.extended-mode {
  /* =====================================================================
     5. HEADER BASKET CHIP (mockup `76005.jpg` — rightmost element)
     =====================================================================
     Dark glassy pill with cart icon + price + red count badge anchored
     to the top-right. 4 new chip-specific colour keys (independent of
     the floating-panel `ext_basket_*` namespace).
  */ }
  .extended-mode.page_header-basket .header-basket__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bt-space-12);
    min-height: 4.8rem;
    padding: var(--bt-space-8) var(--bt-space-20);
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    box-sizing: border-box;
    transition: color .2s ease, background .2s ease, transform .15s ease;
    /* Distinct CTA — solid accent background, white text,
       rounded-rectangle corners. Shares the same em-based radius
       ratio (0.65em) as every other pill so the whole row reads
       as a single family of shapes. The fill is the affordance;
       no border needed. */
    border: 0;
    border-radius: var(--theme-header-pill-radius, 0.65em);
    color: var(--theme-header-basket-chip-color, var(--theme-basket-count-color, #ffffff));
    background: var(--theme-header-basket-chip-background-color, var(--theme-header-basket-chip-badge-color, var(--theme-basket-count-background-color, #d62300))); }
    .extended-mode.page_header-basket .header-basket__link:hover, .extended-mode.page_header-basket .header-basket__link:focus-visible {
      /* Stay on the same accent fill on hover; nudge slightly
         so the CTA still feels responsive without dropping the
         distinct red. The default uses CSS `filter: brightness`
         so the chip's own background is respected regardless
         of which colour the theme set. */
      filter: brightness(0.92);
      transform: translateY(-1px); }
      .extended-mode.page_header-basket .header-basket__link:hover .header-basket__icon, .extended-mode.page_header-basket .header-basket__link:focus-visible .header-basket__icon {
        color: inherit; }
  .extended-mode.page_header-basket .header-basket__total {
    white-space: nowrap;
    color: inherit; }
  .extended-mode.page_header-basket .header-basket__icon {
    font-size: 2rem;
    color: inherit;
    line-height: 1; }
    .extended-mode.page_header-basket .header-basket__icon:before {
      margin: 0; }
  .extended-mode.page_header-basket .header-basket__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    position: absolute;
    top: -.5rem;
    inset-inline-end: -.5rem;
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--theme-header-basket-chip-badge-text-color, var(--theme-basket-count-color, #fff));
    background-color: var(--theme-header-basket-chip-badge-color, var(--theme-basket-count-background-color, #d62300));
    border-radius: 50%;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--theme-header-background-color, #212121); }
  @media screen and (max-width: 52.5em) {
    .extended-mode.page_header-basket .header-basket {
      display: none; } }

/* ==========================================================================
   BASIC TOUCH — HEADER MOBILE: BURGER + OFF-CANVAS (LP-2175 / D-1)
   ==========================================================================
   Mobile chrome (`bt-tablet-down`):

     - Visible header bar: `burger | logo | language | basket`. The other
       dropdown pills (loyalty / user / shop / tracking / ordering) stay
       hidden — their content moves into the off-canvas burger menu.

     - Burger trigger uses the basic-touch SVG override (asymmetric three
       lines, themed via `currentColor`).

     - Off-canvas occupies the full viewport width — no right-gap.

     - Off-canvas content order (per design feedback 2026-05-23):
         1. Account block (welcome back + sub-items merged, OR
            logged-out login/register), rendered via the basic-touch
            `mobile_menu_user.rhtml` override.
         2. Categories / links.
         3. Restaurant info — expanded by default, no "Restaurant info"
            title (basic-touch `mobile_menu_shop.rhtml` override + the
            `.mobile-menu__section_unfolded` modifier added here).
         4. Visible divider.
         5. Footer content (copyright + nav + social icons), rendered
            inside the off-canvas by the basic-touch
            `mobile_menu.rhtml` override.

     - Page-level footer (`.page__footer`) hidden on mobile — the content
       lives inside the burger menu, so there's no need to repeat it
       under the page.

   Colour keys (referenced; existing, unchanged):
     --theme-burger-icon-color
     --theme-mobile-menu-color
     --theme-mobile-menu-background-color
     --theme-mobile-menu-header-color
     --theme-mobile-menu-header-background-color
     --theme-mobile-menu-separator-color

   NOTE: never write radius custom-tag tokens (r-colon syntax) inside
   SCSS comments — the radius preprocessor parses comments and chokes on
   unclosed start tags. See basic_touch.md Stream-D SCSS gotcha #3.
   ========================================================================== */
.extended-mode {
  /* =====================================================================
     7a. HEADER BAR — MOBILE VISIBLE ELEMENTS
     =====================================================================
     Parent hides language on mobile (display: none). Bring it back so
     the language pill stays in the top bar, anchored to the right next
     to the basket. Push it right with auto-margin so the layout becomes
     `burger | logo | (gap) | language | basket`.
  */
  /* =====================================================================
     7b. BURGER TRIGGER
     =====================================================================
     Override style for the SVG variant emitted by the basic-touch
     `header_burger_menu.rhtml` widget. Parent's `.burger-menu__button` /
     `.burger-menu__line` rules become dead code (no DOM match) but
     are harmless.
  */
  /* Burger ↔ close icon swap. Sidr adds a GENERIC `.sidr-open` to <body>
     for EVERY off-canvas — the burger (`main-menu-ofc`) AND the basket
     sidebar (`sidebar-ofc`). Key the swap ONLY on the burger-specific
     `.main-menu-ofc-open`, otherwise opening the BASKET morphs the burger
     icon into an X; tapping that X (thinking it closes the basket) toggles
     the burger and opens the menu. (LP-2164 mobile fix.) */
    /* =====================================================================
       7c. OFF-CANVAS — BELOW-HEADER PANEL (LP-2175 refactor v2)
       =====================================================================
       Per A5: the burger panel must NOT cover the header. Panel starts
       below the header (on desktop, sticky header sits at top:0 with the
       burger-X visible; on mobile, header is in normal flow but the
       panel still anchors to the header's "natural" top-of-page
       position).

       `--bt-mobile-header-height` = the header bar height. CSS-only
       fallback for now; can be refined with JS later.

       Sidebar (`.off-canvas_right` — the basket panel) sits at
       `right: -350px` by default. On phones around 360-420px wide, the
       panel's left edge can sit at or right inside the viewport's
       right edge (because `max-width: 90%` clamps width), intercepting
       taps on the language pill. Push it fully off with `right: -100vw`.
    */
  /* Burger overlay: body scroll lock + hide the mobile category-nav
     row inside the page__header so the off-canvas can sit directly
     below the header bar (no Pizza/Drinks/Deals stripe between the
     header and the burger content). Header bar itself stays visible,
     the category-nav slot is dropped. */
    /* =====================================================================
       7d. OFF-CANVAS CONTENT — header design system
       =====================================================================
       Burger panel adopts the same colour tokens and pill geometry as
       the header band so the two surfaces read as one design family:
         - background, foreground = `--theme-header-*` (falls back to
           the parent's `--theme-mobile-menu-*` if a shop has overridden
           those explicitly).
         - hover state uses the same em-based pill radius as the header
           pills (`--theme-header-pill-radius`, 0.65em).

       Sections — no horizontal separators (we drop the previous 1px
       hairlines for a quieter list). Vertical rhythm comes from
       padding-block instead.

       The basic-touch `mobile_menu_shop.rhtml` widget adds the
       `_expanded` modifier; SCSS below shows its submenu directly.
    */
  /* =====================================================================
     7e. HIDE PAGE FOOTER ON MOBILE
     =====================================================================
     Footer content now lives inside the burger menu — the page-level
     `<footer>` should never render on mobile, regardless of page type.
     Parent emits `footer_hide-on-mobile` only on non-index/static
     pages; we widen the rule to apply everywhere.
  */ }
  @media screen and (max-width: 52.5em) {
    .extended-mode {
      /* Burger and basket already visible on mobile via parent rules. */
      /* Mobile language pill: flag glyph only — no 2-letter code, no
         chevron. The expanded dropdown still shows the full localised
         names + flags (handled in `_basic_header_menus.scss`).
         Padding is `var(--bt-space-6)` symmetric so the pill matches
         the burger icon's square 6px padding — both clusters end up
         equidistant from their respective screen edges via the
         wrapper's symmetric `padding-inline`. */
      /* Drop wrapper's right padding so the language pill sits flush
         right (the only visible right-cluster item on mobile). Left
         padding stays so burger has breathing room from the screen
         edge — symmetric with the language pill's own left padding. */
      /* Keep the pill above its neighbours so the tap registers on the
         link, not on the basket / language wrapper edge. */
      /* Mobile dropdown body: anchor to the right edge of the language
         pill but cap at viewport width so locale names render in full
         without overflowing the screen. */
      /* Burger trigger is part of the header — it flows naturally
         inside `.header__wrapper` and scrolls away with the header on
         mobile. Users scroll back to top to re-open the menu (standard
         mobile-web pattern; consistent with M1).
         (Path Q — independent floating burger — was dropped: the icon
         reads as dissociated from the header when it floats on its
         own.) */ }
      .extended-mode .header__language-menu {
        display: block; }
      .extended-mode .header__wrapper > .header__language-menu {
        margin-inline-start: auto; }
      .extended-mode .dropdown-menu_language .dropdown-menu__header-link {
        padding: var(--bt-space-6);
        gap: 0;
        min-width: 4.4rem;
        /* Apple HIG min touch target: 44px. */
        min-height: 4rem;
        justify-content: center; }
        .extended-mode .dropdown-menu_language .dropdown-menu__header-link .dropdown-menu__header-language-short {
          display: none; }
        .extended-mode .dropdown-menu_language .dropdown-menu__header-link .dropdown-menu__header-icon {
          display: none; }
      .extended-mode .header__wrapper {
        padding-inline-end: 0; }
      .extended-mode .header__language-menu {
        position: relative;
        z-index: 6; }
      .extended-mode .dropdown-menu_language .dropdown-menu__body {
        min-width: 18rem;
        max-width: calc(100vw - var(--bt-space-16)); } }
  @media screen and (max-width: 52.5em) {
    .extended-mode .header__burger-menu {
      display: flex;
      align-items: center;
      flex: 0 0 auto; } }
  .extended-mode .burger-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-decoration: none;
    color: var(--theme-burger-icon-color, var(--theme-header-link-color, var(--theme-header-color, #212121)));
    padding: var(--bt-space-6); }
  .extended-mode .burger-menu__svg {
    display: block;
    width: 2.4rem;
    height: 2.4rem; }
    .extended-mode .burger-menu__svg_close {
      display: none;
      /* close icon revealed when burger open */ }
  .extended-mode.main-menu-ofc-open .burger-menu__svg_burger {
    display: none; }
  .extended-mode.main-menu-ofc-open .burger-menu__svg_close {
    display: block; }
  @media screen and (max-width: 52.5em) {
    .extended-mode {
        /* `--bt-mobile-header-height` covers the FULL `.page__header`
           height. On a page WITHOUT a mobile cat-nav (home, static),
           `.page__header` is just `.header` (~5rem). With cat-nav (menu,
           etc.), `.page__header` height is ~11.6rem (70 + 46 = 116).

           Declared on `&` (the `.extended-mode` class, which sits on
           `<body>`). Earlier we tried `:root` inside this nested block;
           Sass compiled it to `.extended-mode :root`, which never
           matches because <html> isn't inside `.extended-mode`. Using
           `&` puts the custom property on the body element where every
           descendant (incl. the off-canvas) inherits it. */ }
      .extended-mode {
        --bt-mobile-header-height: 5rem; }
      .extended-mode:has(.page__header .category-navigation_mobile) {
        --bt-mobile-header-height: 11.6rem; }
      .extended-mode .off-canvas_left {
        width: 100%;
        left: -100%;
        top: var(--bt-mobile-header-height, 5rem);
        height: calc(100% - var(--bt-mobile-header-height, 5rem)); }
      .extended-mode .off-canvas {
        width: 100%;
        max-width: 100%; }
      .extended-mode .off-canvas_right {
        right: -100vw;
        top: var(--bt-mobile-header-height, 5rem);
        height: calc(100% - var(--bt-mobile-header-height, 5rem)); } }
  @media screen and (max-width: 52.5em) {
    .extended-mode {
      /* Lock body scroll while burger is open.
         `overflow: hidden` alone does NOT stop touch-scroll on
         iOS Safari. Adding `position: fixed; inset: 0; width: 100%`
         pins the body in place — the only reliable way to fully lock
         background scroll on mobile. The off-canvas itself is also
         position: fixed (Sidr) so this doesn't affect the panel. */
      /* Off-canvas (#main-menu-ofc) lives INSIDE `.header` now (A1) —
         so it shares `.page__header`'s stacking context. Its
         `z-index: 3333` from the parent theme would draw OVER any
         open dropdown inside the header (language switcher, etc.).
         Bump language menu z above the off-canvas z so its expanded
         dropdown body floats on top of the burger panel when the
         user pops the language switcher with burger open. */ }
      .extended-mode.sidr-open, .extended-mode.main-menu-ofc-open {
        overflow: hidden;
        position: fixed;
        inset: 0;
        width: 100%; }
      .extended-mode.sidr-open .page__header .category-navigation_mobile, .extended-mode.main-menu-ofc-open .page__header .category-navigation_mobile {
        display: none; }
      .extended-mode.sidr-open, .extended-mode.main-menu-ofc-open {
        --bt-mobile-header-height: 6.6rem !important; }
      .extended-mode.sidr-open .header__language-menu, .extended-mode.main-menu-ofc-open .header__language-menu {
        z-index: 10000; } }
  .extended-mode .mobile-menu {
    background-color: var(--theme-mobile-menu-background-color, var(--theme-header-background-color, #212121));
    color: var(--theme-mobile-menu-color, var(--theme-header-color, #ffffff));
    /* Internal X close bar is dropped — the page header (with the
       burger icon) stays visible above the off-canvas and Sidr
       toggles open/close on the same icon. The `.mobile-menu__header`
       div stays in the DOM (parent widget emits it) but renders
       invisibly so it doesn't consume vertical space. */
    /* ---- Short-row inner pieces (icon tile + title + summary + chevron)
       Renders for both `_loyalty` and `_shop` sections inside burger. */
    /* Simple menu rows with a leading icon (orders, tracking, credit).
       The icon is the same tinted-tile as the toggle rows but the row
       itself is a plain link (no chevron, no submenu). */
    /* Inline phone summary line in the shop short-row: small phone
       glyph + phone number text. Keeps the row compact while making
       the phone visible without expanding. */
    /* Short-row hover: subtle tint highlight on the link. The
       inner pieces (icon, chevron) inherit via currentColor. */
    /* Single-line menu rows — rounded hover state matching the
       header pills (same em-based radius). Slight inset so the
       highlight reads as a "card" rather than full-bleed. */
    /* Two-line login/register stack (mobile_menu_user.rhtml
       logged-out branch). Mirrors the desktop logged-out pill. */
        /* -----------------------------------------------------------------
           USER CARD (logged-in) — a modern pinned-at-top block packing
           "Hello, Pierre" + the two key actions (account / logout) per
           design feedback 2026-05-25.

           Card surface:
             - rounded edges (same ratio as header pills, scaled up via
               `--bt-radius-lg` so the card reads as a single unit)
             - inset margin so it floats inside the panel
             - subtle border + light-alpha background so it stands apart
               from the rest of the list without competing with the
               header band's colour
        */
    /* Divider between content and footer was removed per design
       feedback 2026-05-25 — the footer block's own spacing
       separates it visually without a hairline. */
    /* Footer-content block hosted inside the off-canvas — stays
       visually distinct from the regular nav. */ }
    .extended-mode .mobile-menu__header {
      display: none; }
    .extended-mode .mobile-menu__close-icon {
      display: none; }
    .extended-mode .mobile-menu__section {
      /* No more 1px separators — modern list, vertical rhythm
         from padding only. */
      /* `_has-submenu` sections (loyalty, shop info) render as a
         two-state row: SHORT (icon + title + summary + chevron)
         by default; the user taps to expand, then `_unfolded`
         reveals the submenu. The toggle is wired in
         `_off_canvas.js` (parent JS). */
      /* Chevron rotates 180° when the section is unfolded. */
      /* Active page subtle accent on the link. */ }
      .extended-mode .mobile-menu__section_user-card {
        padding: var(--bt-space-12) var(--bt-space-16);
        /* Hairline divider between the user card (greeting +
           actions) and the navigation content beneath it. */
        border-block-end: 1px solid rgba(255, 255, 255, 0.12);
        margin-block-end: var(--bt-space-8);
        padding-block-end: var(--bt-space-16); }
      .extended-mode .mobile-menu__section_has-submenu > .mobile-menu__section-link {
        display: flex;
        align-items: center;
        gap: var(--bt-space-12); }
      .extended-mode .mobile-menu__section_has-submenu .mobile-menu__submenu {
        display: none; }
      .extended-mode .mobile-menu__section_unfolded > .mobile-menu__submenu, .extended-mode .mobile-menu__section_unfolded .mobile-menu__submenu {
        display: block; }
      .extended-mode .mobile-menu__section_unfolded .mobile-menu__section-chevron {
        transform: rotate(180deg); }
      .extended-mode .mobile-menu__section_active > .mobile-menu__section-link {
        font-weight: 700; }
    .extended-mode .mobile-menu__section-icon {
      flex: 0 0 auto;
      width: 3.6rem;
      height: 3.6rem;
      border-radius: var(--bt-radius-md);
      background-color: color-mix(in srgb, var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))) 14%, transparent);
      position: relative;
      /* Order tracking: clipboard glyph */
      /* Your orders: receipt / list glyph */
      /* Credit balance: wallet glyph */
      /* Menu (food categories): fork and knife glyph */ }
      .extended-mode .mobile-menu__section-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.8rem;
        height: 1.8rem;
        background-color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))));
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center; }
      .extended-mode .mobile-menu__section-icon_shop::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
      .extended-mode .mobile-menu__section-icon_loyalty::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"); }
      .extended-mode .mobile-menu__section-icon_tracking::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 3h6v3H9z'/><line x1='8' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='16' y2='14'/><line x1='8' y1='18' x2='13' y2='18'/></svg>"); }
      .extended-mode .mobile-menu__section-icon_orders::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l5 5v15a0 0 0 0 1 0 0H6a0 0 0 0 1 0 0V2a0 0 0 0 1 0 0z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='15' y2='17'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l5 5v15a0 0 0 0 1 0 0H6a0 0 0 0 1 0 0V2a0 0 0 0 1 0 0z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='15' y2='17'/></svg>"); }
      .extended-mode .mobile-menu__section-icon_credit::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h16'/><path d='M3 7v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/><circle cx='17' cy='14' r='1.5'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h16'/><path d='M3 7v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/><circle cx='17' cy='14' r='1.5'/></svg>"); }
      .extended-mode .mobile-menu__section-icon_menu::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V2'/><line x1='5' y1='11' x2='5' y2='22'/><path d='M16 2v15h3l-1 5'/><line x1='16' y1='17' x2='16' y2='22'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V2'/><line x1='5' y1='11' x2='5' y2='22'/><path d='M16 2v15h3l-1 5'/><line x1='16' y1='17' x2='16' y2='22'/></svg>"); }
    .extended-mode .mobile-menu__section-link_with-icon {
      display: flex !important;
      align-items: center;
      gap: var(--bt-space-12); }
    .extended-mode .mobile-menu__section-summary_phone {
      display: inline-flex;
      align-items: center;
      gap: var(--bt-space-4);
      color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))));
      font-weight: 600;
      opacity: 0.9; }
    .extended-mode .mobile-menu__section-summary-icon {
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      flex: 0 0 auto;
      background-color: currentColor;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center; }
      .extended-mode .mobile-menu__section-summary-icon_phone {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
    .extended-mode .mobile-menu__section-text {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--bt-space-4); }
    .extended-mode .mobile-menu__section-title {
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.15; }
    .extended-mode .mobile-menu__section-summary {
      font-size: 1.2rem;
      line-height: 1.3;
      opacity: 0.7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .extended-mode .mobile-menu__section-chevron {
      flex: 0 0 auto;
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      background-color: currentColor;
      opacity: 0.6;
      transition: transform .2s ease;
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center; }
    .extended-mode .mobile-menu__section_has-submenu > .extended-mode .mobile-menu__section-link:hover, .extended-mode .mobile-menu__section_has-submenu > .extended-mode .mobile-menu__section-link:focus-visible {
      background-color: rgba(255, 255, 255, 0.06); }
    .extended-mode .mobile-menu__section-link, .extended-mode .mobile-menu__item-link {
      display: block;
      padding-block: var(--bt-space-12);
      padding-inline: var(--bt-space-16);
      margin-inline: var(--bt-space-8);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      color: inherit;
      border-radius: var(--theme-header-pill-radius, 0.65em);
      transition: background-color .15s ease, color .15s ease; }
      .extended-mode .mobile-menu__section-link:hover, .extended-mode .mobile-menu__section-link:focus-visible, .extended-mode .mobile-menu__item-link:hover, .extended-mode .mobile-menu__item-link:focus-visible {
        background-color: var(--theme-header-link-hover-background-color, rgba(255, 255, 255, 0.08));
        color: var(--theme-header-link-hover-color, currentColor); }
    .extended-mode .mobile-menu__section-link_lines {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.15; }
    .extended-mode .mobile-menu__section-link_line_primary {
      font-size: 1.6rem;
      font-weight: 700; }
    .extended-mode .mobile-menu__section-link_line_secondary {
      font-size: 1.1rem;
      font-weight: 500;
      opacity: 0.85;
      margin-block-start: var(--bt-space-4); }
    .extended-mode .mobile-menu__user-card {
      display: flex;
      flex-direction: column;
      gap: var(--bt-space-12);
      padding: var(--bt-space-16);
      border-radius: var(--bt-radius-lg);
      border: 1px solid var(--theme-header-pill-border-color, rgba(255, 255, 255, 0.18));
      background-color: rgba(255, 255, 255, 0.04); }
    .extended-mode .mobile-menu__user-greeting {
      display: flex;
      align-items: center;
      gap: var(--bt-space-10);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.1; }
    .extended-mode .mobile-menu__user-avatar {
      display: inline-block;
      width: 2.4rem;
      height: 2.4rem;
      flex: 0 0 auto;
      background-color: currentColor;
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat; }
    .extended-mode .mobile-menu__user-name {
      flex: 1 1 auto; }
    .extended-mode .mobile-menu__user-actions {
      display: flex;
      gap: var(--bt-space-8);
      flex-wrap: wrap; }
    .extended-mode .mobile-menu__user-action {
      flex: 1 1 0;
      min-width: 0;
      padding: var(--bt-space-10) var(--bt-space-12);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-align: center;
      text-decoration: none;
      border: 1px solid currentColor;
      border-radius: var(--theme-header-pill-radius, 0.65em);
      color: inherit;
      background-color: transparent;
      transition: background-color .15s ease, color .15s ease; }
      .extended-mode .mobile-menu__user-action:hover, .extended-mode .mobile-menu__user-action:focus-visible {
        background-color: var(--theme-header-link-hover-background-color, rgba(255, 255, 255, 0.1)); }
      .extended-mode .mobile-menu__user-action_logout {
        /* Distinct destructive action — accent border so the
           pill visually separates from the neutral "your
           account" sibling. */
        color: var(--theme-header-basket-chip-badge-color, var(--bt-state-danger, #dc2626));
        border-color: currentColor; }
    .extended-mode .mobile-menu__footer {
      padding: var(--bt-space-12) var(--bt-space-16) var(--bt-space-20);
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
      font-size: 1.3rem;
      /* Credits — stack `© year shop` and `Powered by LivePepper`
         on separate lines and hide the stray "-" text node that
         sits between them. `font-size: 0` on the wrapper hides
         text-nodes; child divs restore an explicit size. */ }
      .extended-mode .mobile-menu__footer .footer__wrapper {
        display: block; }
      .extended-mode .mobile-menu__footer .footer__nav,
      .extended-mode .mobile-menu__footer .footer__links {
        display: block; }
      .extended-mode .mobile-menu__footer .footer__links {
        padding: 0;
        margin: 0 0 var(--bt-space-12); }
        .extended-mode .mobile-menu__footer .footer__links li {
          display: block;
          margin: 0; }
      .extended-mode .mobile-menu__footer .footer__link {
        display: block;
        padding-block: var(--bt-space-8);
        text-decoration: none;
        color: inherit;
        opacity: 0.9; }
      .extended-mode .mobile-menu__footer .footer__credits {
        opacity: 0.75;
        margin-block-start: var(--bt-space-8); }
      .extended-mode .mobile-menu__footer .footer__credits-wrapper {
        font-size: 0;
        line-height: 1.4; }
      .extended-mode .mobile-menu__footer .footer__credits-copyright,
      .extended-mode .mobile-menu__footer .footer__credits-powered-by {
        display: block;
        font-size: 1.2rem; }
  .extended-mode .mobile-credits {
    padding-block: var(--bt-space-14);
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 1.1rem; }
  @media screen and (max-width: 52.5em) {
    .extended-mode {
      /* HIDE BASKET FROM HEADER ON MOBILE — design feedback
         2026-05-25 ("basket should never show in header, always at
         bottom in mobile"). The basket pill (`.header-basket`) and the
         inline mobile-basket icon (`.basket-menu`) both live inside
         `.header__basket-menu`. The sticky bottom `mobile-basket-button`
         also lives there but uses `position: fixed; bottom: 0` so it
         floats to the bottom of the viewport regardless of its DOM
         parent — hiding the SIBLINGS keeps the bottom button intact. */
      /* ...but DO hide the sticky bottom `mobile-basket-button` while the
         basket itself is open. It is `position: fixed; z-index: 777`, so when
         the basket off-canvas (`.off-canvas_right`) slides open the button
         floats ON TOP of the expanded panel — redundant (the panel has its
         own "Commander" button) and blocking the lower rows. Scope to the
         RIGHT (basket) off-canvas only; the burger (`.off-canvas_left`) is
         unaffected. `&` = `.extended-mode` (body), so `:has()` stays scoped
         to this document; specificity (0,5,0) beats the parent show rule. */ }
      .extended-mode .page__footer {
        display: none; }
      .extended-mode .header__basket-menu .header-basket,
      .extended-mode .header__basket-menu .basket-menu {
        display: none; }
      .extended-mode:has(.off-canvas_right.off-canvas_open) .header__basket-menu .mobile-basket-button {
        display: none; } }

/* ==========================================================================
   BASIC TOUCH — RESTAURANT INFO DROPDOWN (LP-2175 / mockup-aligned)
   ==========================================================================
   Layout for the basic-touch `shop_info.rhtml` override:

     ┌──────────────────────────────────────────┐
     │ [📍]  Restaurant info                    │
     │       Everything you need to know…       │
     ├──────────────────────────────────────────┤
     │  [map embed]                             │
     ├──────────────────────────────────────────┤
     │  [📍] Address                            │
     │       06560 Valbonne, France             │
     │  [🕐] Opening hours                      │
     │       Every day · 18:00 – 23:00          │
     │  [📞] Contact                            │
     │       +33 4 93 00 00 00                  │
     │       contact@…                          │
     ├──────────────────────────────────────────┤
     │ [ Open in Google Maps ]  [Call Rest.]   │
     └──────────────────────────────────────────┘

   Icons rendered via SVG-mask `::before` pseudo-elements so they tint
   with `currentColor` — keeps the orange tint configurable via the
   header pill border-color (or via a dedicated key later).

   NOTE: never write radius custom-tag tokens (r-colon syntax) inside
   SCSS comments — the radius preprocessor parses comments and chokes on
   unclosed start tags. See basic_touch.md Stream-D SCSS gotcha #3.
   ========================================================================== */
.extended-mode {
  /* The shop dropdown body inherits `bt-dropdown-edge` (white surface,
     border, soft shadow). Widen + cap for the richer content. The
     40rem (~400 px) width leaves room for two side-by-side action
     buttons ("Open in Google Maps" + "Call restaurant") without
     overflow at the 1.3rem text + icon + padding budget. */
  /* ---------- HEADER ---------- */
    /* ---------------------------------------------------------------------
       MOBILE BURGER CONTEXT — shop info reuses the same component but
       sits on the burger panel's dark surface (not on a white dropdown
       body).

       Background: explicitly set to the burger menu / header background
       so the shop_info section reads as continuous with the rest of the
       burger panel (no white card, no transparent gap).

       Overrides:
         - icon tile background → light-alpha (visible on dark)
         - feature row separators → light-alpha (visible on dark)
         - outlined "Open in Google Maps" border → light-alpha
    */
    /* ---------------------------------------------------------------------
       DARK CONTEXTS — desktop dropdown body + mobile burger panel.
       Both render shop_info on a dark surface that matches the header
       background (continuous chrome). Parent
       `_theme_extended_mode.scss` forces dark text via
       `@include extended-title` / `@include extended-text`, which is
       wrong on a dark surface. Force text back to inherit (the
       cream/light header colour) so it stays readable.

       The dropdown body for `.dropdown-menu_shop` gets the same dark
       background instead of the `bt-dropdown-edge` white default so
       shop_info has nowhere to leak a white edge through. */ }
  .extended-mode .dropdown-menu_shop .dropdown-menu__body {
    width: 40rem;
    max-width: calc(100vw - var(--bt-space-16) * 2); }
  .extended-mode .shop-info {
    /* ---------- MAP ---------- */
    /* ---------- FEATURE ROWS ---------- */
    /* Address pin */
    /* Opening hours clock */
    /* Contact phone */
    /* ---------- BOTTOM ACTIONS ---------- */ }
    .extended-mode .shop-info_desktop, .extended-mode .shop-info_mobile {
      padding: var(--bt-space-16); }
    .extended-mode .shop-info__header {
      display: flex;
      align-items: flex-start;
      gap: var(--bt-space-12);
      margin: 0 0 var(--bt-space-16); }
    .extended-mode .shop-info__title-icon {
      flex: 0 0 auto;
      width: 4rem;
      height: 4rem;
      border-radius: var(--bt-radius-md);
      /* Subtle tint of the brand accent so the tile reads as a
         soft orange/red wash on both light (white dropdown) and
         dark (burger panel) surfaces. `color-mix` is supported in
         all evergreen browsers. */
      background-color: color-mix(in srgb, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))) 14%, transparent);
      position: relative; }
      .extended-mode .shop-info__title-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 2rem;
        height: 2rem;
        background-color: var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))));
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center; }
    .extended-mode .shop-info__title-block {
      flex: 1 1 auto;
      min-width: 0; }
    .extended-mode .shop-info__title {
      margin: 0;
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.15;
      float: none;
      /* override parent .shop-info__title float */ }
    .extended-mode .shop-info__subtitle {
      margin: var(--bt-space-4) 0 0;
      font-size: 1.3rem;
      line-height: 1.3;
      opacity: 0.7; }
    .extended-mode .shop-info__google-maps {
      margin: 0 0 var(--bt-space-16);
      border-radius: var(--bt-radius-md);
      overflow: hidden; }
      .extended-mode .shop-info__google-maps iframe {
        display: block;
        width: 100% !important;
        height: 20rem !important;
        border: 0; }
    .extended-mode .shop-info__features {
      list-style: none;
      margin: 0 0 var(--bt-space-16);
      padding: 0; }
    .extended-mode .shop-info__feature {
      display: flex;
      align-items: flex-start;
      gap: var(--bt-space-12);
      padding: var(--bt-space-12) 0;
      border-block-end: 1px solid var(--theme-header-pill-border-color, rgba(0, 0, 0, 0.08));
      margin: 0;
      float: none;
      /* override parent's `float` defaults */ }
      .extended-mode .shop-info__feature:last-child {
        border-block-end: 0; }
    .extended-mode .shop-info__feature-icon {
      flex: 0 0 auto;
      width: 3.6rem;
      height: 3.6rem;
      border-radius: var(--bt-radius-md);
      /* Same tinted-accent tile as `__title-icon` — keeps the
         whole shop info readable as one design family across
         desktop (white) and mobile burger (dark) surfaces. */
      background-color: color-mix(in srgb, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))) 14%, transparent);
      position: relative; }
      .extended-mode .shop-info__feature-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.8rem;
        height: 1.8rem;
        background-color: var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))));
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center; }
    .extended-mode .shop-info__feature_address .shop-info__feature-icon::before {
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
    .extended-mode .shop-info__feature_hours .shop-info__feature-icon::before {
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
    .extended-mode .shop-info__feature_contact .shop-info__feature-icon::before {
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
      mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
    .extended-mode .shop-info__feature-body {
      flex: 1 1 auto;
      min-width: 0; }
    .extended-mode .shop-info__feature-title {
      display: block;
      float: none;
      /* override parent .shop-info__feature-title float */
      width: auto;
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 var(--bt-space-4); }
    .extended-mode .shop-info__feature-content {
      float: none;
      /* override parent */
      width: auto;
      font-size: 1.3rem;
      line-height: 1.45;
      opacity: 0.85; }
      .extended-mode .shop-info__feature-content p {
        margin: 0; }
      .extended-mode .shop-info__feature-content p + p {
        margin-block-start: var(--bt-space-4); }
    .extended-mode .shop-info__feature-phone {
      color: var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))));
      font-weight: 600;
      text-decoration: none; }
    .extended-mode .shop-info__feature-email {
      color: inherit;
      text-decoration: none; }
    .extended-mode .shop-info__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--bt-space-12); }
    .extended-mode .shop-info__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--bt-space-8);
      min-width: 0;
      /* allow the flex grid track to
         shrink the button below its
         content size so long labels
         don't push past the body. */
      min-height: 4.4rem;
      padding: var(--bt-space-10) var(--bt-space-12);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: center;
      text-decoration: none;
      border-radius: var(--bt-radius-md);
      transition: background-color .15s ease, color .15s ease, transform .15s ease; }
      .extended-mode .shop-info__action:hover, .extended-mode .shop-info__action:focus-visible {
        transform: translateY(-1px); }
      .extended-mode .shop-info__action_outline {
        border: 1px solid var(--theme-header-pill-border-color, currentColor);
        background-color: transparent;
        color: inherit; }
      .extended-mode .shop-info__action_primary {
        border: 0;
        background-color: var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))));
        color: var(--theme-header-basket-chip-badge-text-color, #ffffff); }
    .extended-mode .shop-info__action-icon {
      flex: 0 0 auto;
      display: inline-block;
      width: 1.6rem;
      height: 1.6rem;
      background-color: currentColor;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center; }
      .extended-mode .shop-info__action-icon_map {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
      .extended-mode .shop-info__action-icon_phone {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
  .extended-mode .dropdown-menu_shop .dropdown-menu__body {
    background-color: var(--theme-header-background-color, #212121);
    color: var(--theme-header-color, #ffffff); }
  .extended-mode .shop-info_desktop,
  .extended-mode .mobile-menu .shop-info {
    background-color: var(--theme-mobile-menu-background-color, var(--theme-header-background-color, #212121));
    color: var(--theme-mobile-menu-color, var(--theme-header-color, #ffffff)); }
    .extended-mode .shop-info_desktop.shop-info__title, .extended-mode .shop-info_desktop .shop-info__title, .extended-mode .shop-info_desktop .shop-info__feature-title, .extended-mode .shop-info_desktop .shop-info__feature-content, .extended-mode .shop-info_desktop .shop-info__subtitle,
    .extended-mode .mobile-menu .shop-info.shop-info__title,
    .extended-mode .mobile-menu .shop-info .shop-info__title,
    .extended-mode .mobile-menu .shop-info .shop-info__feature-title,
    .extended-mode .mobile-menu .shop-info .shop-info__feature-content,
    .extended-mode .mobile-menu .shop-info .shop-info__subtitle {
      color: inherit; }
    .extended-mode .shop-info_desktop .shop-info__feature,
    .extended-mode .mobile-menu .shop-info .shop-info__feature {
      border-block-end: 1px solid rgba(255, 255, 255, 0.12); }
    .extended-mode .shop-info_desktop .shop-info__action_outline,
    .extended-mode .mobile-menu .shop-info .shop-info__action_outline {
      border-color: rgba(255, 255, 255, 0.22);
      color: inherit; }

/* ==========================================================================
   BASIC TOUCH — LOYALTY DROPDOWN (LP-2175 / mockup-aligned)
   ==========================================================================
   Modern loyalty card matching the shop_info redesign:

     ┌──────────────────────────────────────────┐
     │ [⭐]  Loyalty points                     │
     │       Order more, earn more.             │
     ├──────────────────────────────────────────┤
     │             35  points                   │   ← big rewards banner
     ├──────────────────────────────────────────┤
     │ Earn 1 point for every €1 spent.         │
     │ Redeem 50 points for a free pizza…       │
     ├──────────────────────────────────────────┤
     │ [    Loyalty details    ]                │
     └──────────────────────────────────────────┘

   Dark dropdown body (matches `.dropdown-menu_shop` treatment) so the
   loyalty surface reads as continuous with the header band.

   NOTE: never write radius custom-tag tokens (r-colon syntax) inside
   SCSS comments — the radius preprocessor parses comments and chokes on
   unclosed start tags. See basic_touch.md Stream-D SCSS gotcha #3.
   ========================================================================== */
.extended-mode {
  /* Dark dropdown body, same treatment as shop_info. Widen for the
     richer content (header + banner + rules + CTA). */ }
  .extended-mode .dropdown-menu_loyalty .dropdown-menu__body {
    width: 36rem;
    max-width: calc(100vw - var(--bt-space-16) * 2);
    background-color: var(--theme-header-background-color, #212121);
    color: var(--theme-header-color, #ffffff); }
  .extended-mode .loyalty-dropdown {
    padding: var(--bt-space-16);
    background-color: var(--theme-header-background-color, #212121);
    color: inherit;
    /* Parent `_theme_extended_mode.scss` sets dark titles via
       `@include extended-title`. On the dark dropdown surface that
       reads as invisible — force inherit. */
    /* ---------- HEADER ---------- */
    /* ---------- REWARDS BANNER ---------- */
    /* ---------- RULES ---------- */
    /* ---------- BOTTOM CTA ---------- */ }
    .extended-mode .loyalty-dropdown__title {
      color: inherit;
      margin: 0;
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.15; }
    .extended-mode .loyalty-dropdown__header {
      display: flex;
      align-items: flex-start;
      gap: var(--bt-space-12);
      margin: 0 0 var(--bt-space-16); }
    .extended-mode .loyalty-dropdown__title-icon {
      flex: 0 0 auto;
      width: 4rem;
      height: 4rem;
      border-radius: var(--bt-radius-md);
      background-color: color-mix(in srgb, var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))) 14%, transparent);
      position: relative; }
      .extended-mode .loyalty-dropdown__title-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 2rem;
        height: 2rem;
        background-color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))));
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center; }
    .extended-mode .loyalty-dropdown__title-block {
      flex: 1 1 auto;
      min-width: 0; }
    .extended-mode .loyalty-dropdown__subtitle {
      margin: var(--bt-space-4) 0 0;
      font-size: 1.3rem;
      line-height: 1.3;
      opacity: 0.7;
      color: inherit; }
    .extended-mode .loyalty-dropdown__rewards {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--bt-space-6);
      padding: var(--bt-space-20) var(--bt-space-16);
      margin: 0 0 var(--bt-space-16);
      border-radius: var(--bt-radius-md);
      background-color: color-mix(in srgb, var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))) 14%, transparent);
      background-size: cover;
      background-position: center;
      text-align: center;
      color: inherit;
      min-height: 10rem; }
    .extended-mode .loyalty-dropdown__rewards-value {
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 4.8rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300)))); }
    .extended-mode .loyalty-dropdown__rewards-label {
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.85; }
    .extended-mode .loyalty-dropdown__rules {
      margin: 0 0 var(--bt-space-16);
      padding: var(--bt-space-12) var(--bt-space-14);
      border-radius: var(--bt-radius-md);
      background-color: rgba(255, 255, 255, 0.04);
      font-size: 1.3rem;
      line-height: 1.5;
      color: inherit; }
      .extended-mode .loyalty-dropdown__rules p {
        margin: 0;
        color: inherit; }
      .extended-mode .loyalty-dropdown__rules p + p {
        margin-block-start: var(--bt-space-6); }
      .extended-mode .loyalty-dropdown__rules strong,
      .extended-mode .loyalty-dropdown__rules b {
        color: var(--theme-header-loyalty-badge-icon-color, var(--theme-header-basket-chip-badge-color, var(--theme-link-color, var(--theme-button-background-color, #d62300))));
        font-weight: 700; }
    .extended-mode .loyalty-dropdown__more-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 4.4rem;
      padding: var(--bt-space-10) var(--bt-space-16);
      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-decoration: none;
      text-align: center;
      border-radius: var(--bt-radius-md);
      border: 1px solid rgba(255, 255, 255, 0.22);
      background-color: transparent;
      color: inherit;
      transition: background-color .15s ease, transform .15s ease; }
      .extended-mode .loyalty-dropdown__more-link:hover, .extended-mode .loyalty-dropdown__more-link:focus-visible {
        background-color: rgba(255, 255, 255, 0.06);
        transform: translateY(-1px); }

/* ----- LP-2281 (RE slice of LP-2271) — Menu filter bar -------------------- */
/* ==========================================================================
   BASIC TOUCH — MENU FILTER BAR (LP-2281 / RE slice of LP-2271)
   ==========================================================================
   Burger-King-style multi-select filter bar rendered by
   widgets/menu_filter_bar.rhtml. A SINGLE horizontal band that pins directly
   under the (already-sticky) category nav:
     - Left: the include group — a leading "Tous" (All) chip + the include
       filters as rounded icon+label pills, on ONE horizontally-scrollable line
       (mirrors the cat-nav scroller). Active pill / active "Tous" use the
       theme's primary button colour (--theme-button-background-color — the
       shop's brand red) so they are on-brand and track the shop's palette;
       inactive = outlined (subtle border, transparent bg).
     - Right: the "Sans" / free-from group as plain checkbox + label controls.

   Consumes the --bt-* semantic shim tokens (_tokens.scss) and the responsive
   mixins (_breakpoints.scss). NO new colour keys — the active states reuse the
   existing theme button colour key (--theme-button-background-color), the rest
   reuse the existing shim, so the bar inherits the shop's palette and any B1
   live-preview restyle. NOTE the active states deliberately do NOT use
   $bt-accent: that token has no wired colour key and falls through to the
   orange palette default (#f97316), which is off-brand.

   Sticky offset: the desktop header pins at `top: 0` (z 900) and the cat-nav
   pins just below it at `top: var(--bt-desktop-header-height, 7rem)` (z 899,
   see _basic_header.scss). The cat-nav has no height variable of its own, so
   we introduce --bt-cat-nav-height (default tuned to the cat-nav link height)
   and pin this bar at header + cat-nav. Stay BELOW the header band (z 900) and
   well below popups/off-canvas/basket so the pinned bar never draws over them.

   Prefixed `_basic_menu_filter` to avoid the name-collision importer gotcha
   (basic_touch.md Stream-D gotcha #4) — there is no parent `_menu_filter.scss`,
   but the prefix keeps the convention.

   Badges are out of scope (deferred); this partial styles the control surface
   only and never a card overlay.
   ========================================================================== */
/* Height of the desktop category-nav band. The cat-nav has no height var of
   its own (its links self-size), so this is the one tunable used to compose
   the filter bar's sticky offset. Measured at 1728px / Basic Touch defaults the
   pinned cat-nav band is ~5.9rem tall (link box + 1px top border); the filter
   bar pins at header (7rem) + this so it sits flush just below the nav. */
:root {
  --bt-cat-nav-height: 5.9rem;
  /* Mobile category-nav band height (FixedTopbar-pinned). The include pill
     row pins just below it on mobile. ~50px measured at 390px. */
  --bt-mobile-cat-nav-height: 5rem; }

/* Active-state brand colour for the filter controls. Follows the THEME's
   primary button colour (`--theme-button-background-color` — a real Design
   Editor colour key, the shop's brand red), so the active pill / "All" chip /
   "Sans" checkbox is on-brand and tracks the palette. NOT the orange $bt-accent
   default, NOT the dark $navigation default. */
/* Same spacing pinned vs at rest: the menu content area normally sits ~21px
   below the sticky cat-nav (`.content { margin-top }`), but the PINNED filter
   bar sits flush under the nav — so at rest the bar looked 21px lower than when
   pinned. Zero that gap on the menu page so the bar (and the content) is flush
   under the nav at rest too; pinned and rest now read identically. Scoped to
   `.page_menu` so other pages keep their normal top spacing. */
.page_menu .content {
  margin-top: 0; }

/* INCLUDE band — the leading "Tous" chip + the include pills, on one
   horizontally-scrollable line. This is its OWN <section> (a sibling of the
   "Sans" band, NOT a parent of it) so it can pin on its own: a position:sticky
   element only stays pinned while its OWN box scrolls past, so the include and
   "Sans" rows must be separate siblings — a sticky parent wrapping both would
   drag the "Sans" row along, and a sticky child of a short wrapper would unpin
   the moment that wrapper scrolled out. Sits flush (no card chrome) with a
   full-bleed background, and pins under the cat-nav. */
.menu-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--bt-space-12) var(--bt-space-16);
  /* FULL-BLEED band: stretch edge-to-edge across the viewport (100vw via
     symmetric negative inline margins) so the BACKGROUND spans the whole
     screen width, while the CONTENT is re-inset with matching inline padding
     so the pills stay aligned to the product grid (container width). The pill
     scroller keeps its own leading inset on top of this. overflow-x:clip below
     still contains the pill scroller within the now-viewport-wide band. */
  margin: 0 calc(50% - 50vw) var(--bt-space-12);
  padding: var(--bt-space-14) calc(50vw - 50%);
  /* Opaque background, now painted across the full viewport width (the band is
     100vw wide). Menu content scrolls cleanly underneath when pinned. */
  background: var(--theme-background-color, var(--bt-surface, var(--bt-paper-0)));
  /* Contain the pill scroller. The pill row is wider than the viewport and its
     overflow was widening the document on mobile; clipping it on the band is
     the reliable fix (the inner overflow-x:auto scroller still scrolls). clip
     (not hidden) keeps the vertical axis visible and does NOT establish a
     scroll container that would break the band's own position:sticky. */
  overflow-x: clip;
  /* Sticky, pinned just beneath the sticky header + cat-nav. */
  position: sticky;
  top: calc(var(--bt-desktop-header-height, 7rem) + var(--bt-cat-nav-height, 5.9rem));
  z-index: 898; }
  @media screen and (max-width: 52.5em) {
    .menu-filter {
      /* Pin below the (FixedTopbar-pinned) mobile cat-nav. BLOCK, not flex: a
         flex band sized the include group to the pill row's max-content width;
         block keeps it at container width. Combined with the band's
         overflow-x:clip, the pill scroller is fully contained — no mobile
         horizontal overflow. */
      display: block;
      top: var(--bt-mobile-cat-nav-height, 5rem);
      /* Keep the full-bleed inline padding from the base rule; only the
         block padding differs on mobile. */
      padding-block: var(--bt-space-10);
      margin-block-end: var(--bt-space-8); } }

/* "Sans"/free-from band — a SEPARATE <section> in normal flow, NOT sticky, so
   it scrolls away while the include band stays pinned above it. No background
   bleed (it sits on the page), no sticky offset. It shares the `.menu-filter`
   class for layout, so reset the sticky + bleed here. */
.menu-filter_free {
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  margin: 0 0 var(--bt-space-24);
  padding: 0; }
  @media screen and (max-width: 52.5em) {
    .menu-filter_free {
      margin-block-end: var(--bt-space-16); } }

/* Include group fills its band; min-width:0 lets the pill row shrink + scroll.
   Containment of the pill overflow is handled by the band's overflow-x:clip. */
.menu-filter__group_include {
  flex: 1 1 auto;
  min-width: 0; }

.menu-filter__group_exclude {
  flex: 1 1 auto;
  min-width: 0; }

/* --- Include pills (left) ----------------------------------------------- */
.menu-filter__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bt-space-8);
  margin: 0;
  padding: 0;
  list-style: none; }

/* Fix 4 — horizontal pill scroller. ONE line, no wrap, on desktop AND mobile,
   mirroring the cat-nav scroller (`.category-navigation__wrapper`:
   overflow-x:auto; -webkit-overflow-scrolling:touch; flex nowrap). The pill
   row scrolls horizontally instead of wrapping or overflowing the band. */
/* Both lanes (include pills AND the "Sans" controls) share one horizontal peek
   scroller. It works at any chip size / label length because it's overflow-
   driven, not width-tuned: each control is white-space:nowrap, the lane never
   wraps, and whatever control lands at the right edge clips/peeks — the overflow
   boundary is the "more filters, scroll" affordance (no fade, no arrow; the
   cat-nav already owns those). A 16px leading inset sits the first control in
   from the edge (M3 style); scroll-padding keeps it clear when scrolled
   programmatically. If the controls fit, there's simply no overflow and nothing
   to peek. */
.menu-filter__list_pills,
.menu-filter__list_checks {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox — hide the scrollbar like the cat-nav */
  padding-inline-start: var(--bt-space-16);
  scroll-padding-inline-start: var(--bt-space-16); }
  .menu-filter__list_pills::-webkit-scrollbar,
  .menu-filter__list_checks::-webkit-scrollbar {
    display: none;
    /* WebKit — hairline scroller hidden, swipe/drag only */ }

.menu-filter__item {
  margin: 0;
  padding: 0;
  flex: 0 0 auto; }

/* The pill is the whole affordance (label wrapping a hidden checkbox, or the
   "Tous" button). Inactive = outlined neutral (transparent bg + subtle border +
   normal text). Active = the SAME theme colour as the active category-nav item
   (see the active rules below — Fix 1). */
.menu-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-6);
  margin: 0;
  padding: var(--bt-space-8) var(--bt-space-14);
  background: transparent;
  border: 2px solid var(--bt-border-color, var(--bt-border));
  border-radius: var(--bt-radius-pill);
  /* Unselected pill text: the real, Design-Editor-settable page text key
     (ext_text_color). $bt-text was an undeclared --bt-text shim = not a
     theme key. Falls back to that shim's ink so unset shops are unchanged. */
  color: var(--theme-text-color, var(--bt-text, var(--bt-ink-900)));
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .menu-filter__pill:hover {
    border-color: var(--theme-button-background-color); }

/* Visually-hidden native checkbox — the pill itself is the affordance. The
   input stays in the DOM/focusable for keyboard + screen-reader use. */
.menu-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }

/* Optional pill icon (LP-2281) — small inline image before the label. Rendered
   only when the filter setting has an icon_binary_resource_id; label-only
   otherwise. Sits in the pill's flex gap, so no extra margin needed. */
.menu-filter__icon {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain; }

.menu-filter__name {
  display: inline-block; }

/* Selected (checked) include pill — filled with the theme's primary button
   colour (the shop's brand red) so it is on-brand and tracks the palette
   (Fix 1): background $mf-active-bg, text $mf-active-text. */
.menu-filter__pill:has(.menu-filter__input:checked) {
  background: var(--theme-button-background-color);
  border-color: var(--theme-button-background-color);
  color: var(--theme-button-color);
  /* No weight change on select — bold text is wider and reflowed the pill row
     (items "jumped" as you checked them). The brand fill is signal enough. */ }

/* "Tous" (All) chip active state — same nav-active fill. JS toggles .is-active
   when no include filter is selected; the include pills can never be active at
   the same moment, so the two never both read as filled. */
.menu-filter__pill_all.is-active {
  background: var(--theme-button-background-color);
  border-color: var(--theme-button-background-color);
  color: var(--theme-button-color); }

/* Keyboard focus ring on the hidden checkbox surfaces on the pill. Uses the
   nav-active colour to stay on-brand (not the orange $bt-accent default). */
.menu-filter__input:focus-visible + .menu-filter__icon,
.menu-filter__input:focus-visible + .menu-filter__name {
  outline: 2px solid var(--theme-button-background-color);
  outline-offset: 3px; }

.menu-filter__pill_all:focus-visible {
  outline: 2px solid var(--theme-button-background-color);
  outline-offset: 2px; }

/* --- "Sans" group (right) ----------------------------------------------- */
/* Plain checkbox + label controls (NOT pills), matching BK's "Sans bacon".
   Scroller + peek behaviour comes from the shared rule above; here we only set
   the inter-control gap (no wrap — the Sans line peeks/scrolls like the pills). */
.menu-filter__list_checks {
  gap: var(--bt-space-8) var(--bt-space-16); }

.menu-filter__check {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-6);
  margin: 0;
  /* Same real page-text key as the pills (was the undeclared $bt-text shim). */
  color: var(--theme-text-color, var(--bt-text, var(--bt-ink-900)));
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none; }

/* Custom checkbox — a rounded square that fills with the theme's primary button
   colour and shows a drawn tick when checked. The plain native box read as
   unfinished; appearance:none + a CSS checkmark keeps it identical across
   browsers and on-brand. Used by the "Sans" group on mobile AND desktop.
   Scoped under .menu-filter__check (specificity 0,2,0) so the border beats the
   base `input[type="checkbox"]` reset (0,1,1) that was zeroing border-width. */
.menu-filter__check .menu-filter__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  /* Strong 2px border in the muted ink (NOT the pale $bt-border-color beige,
     which had too little contrast on the warm background when unchecked). */
  border: 2px solid var(--bt-text-muted, var(--bt-muted));
  border-radius: var(--bt-space-4);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  /* Drawn tick (rotated box border), coloured with the button text colour so
     it reads on the filled brand background. */ }
  .menu-filter__check .menu-filter__checkbox:hover {
    border-color: var(--theme-button-background-color); }
  .menu-filter__check .menu-filter__checkbox:checked {
    background: var(--theme-button-background-color);
    border-color: var(--theme-button-background-color); }
  .menu-filter__check .menu-filter__checkbox:checked::after {
    content: "";
    position: absolute;
    left: 0.72rem;
    top: 0.3rem;
    width: 0.45rem;
    height: 0.95rem;
    border: solid var(--theme-button-color);
    border-width: 0 0.2rem 0.2rem 0;
    transform: rotate(45deg); }
  .menu-filter__check .menu-filter__checkbox:focus-visible {
    outline: 2px solid var(--theme-button-background-color);
    outline-offset: 2px; }

/* Selected "Sans" label — colour only, NO weight change (bold is wider and
   reflowed the row). The filled checkbox carries the selected signal. */
.menu-filter__check:has(.menu-filter__checkbox:checked) .menu-filter__name {
  color: var(--theme-button-background-color); }

/* --- Client-side filter hide hooks (LP-2281) ---------------------------- */
/* _menu_filter.js toggles this class on product cards, emptied (sub)category
   blocks, and their category-nav <li>s to show/hide them instantly with no page
   reload. !important so it wins over the element's own display rules
   (flex/grid product grids, nav flex items). */
.menu-filter-hidden {
  display: none !important; }

/* Category-nav "unavailable" state (LP-2281). When the active filter empties a
   category, its nav entry is NOT hidden — it is dimmed and made non-interactive
   so the full category list stays visible and the user can see, at a glance,
   which categories have nothing under the current filter. _menu_filter.js
   toggles this on the nav <li>; cleared when products reappear. */
.category-navigation__item_unavailable {
  opacity: 0.35;
  pointer-events: none;
  /* disabled: clicking would jump to a hidden block */ }
  .category-navigation__item_unavailable a {
    cursor: default;
    text-decoration: line-through; }

/* ----- LP-2182 (D-8) — Product card (Type 1 / 2 / 3) --------------------- */
/* ==========================================================================
   BASIC TOUCH - PRODUCT CARD (LP-2182 / D-8)
   ==========================================================================
   Reskins the menu product card for Basic Touch into three visually distinct
   types, driven by basic-touch/widgets/{product,product_deal,product_picture,
   product_top}.rhtml:

     Type 1 - Simple inline   (.product_inline-simple)
       image -> name+price row -> optional SKU dropdown -> stepper + ADD TO CART.
       Direct add (Basket.createItem). No popup, no card-body click.

     Type 2 - Customizable    (.product_customizable)
       image (+ <=2 top-left badges) -> name + inline pictos -> CLAMPED
       description -> from-price + red circular "+". Card body click AND "+"
       both open the popup (Basket.newItem). Quick-add removed.

     Type 3 - Deal card       (.product_deal-banner)
       3 per row (Pizzan OFFER look): a landscape banner image on top, name +
       deal price + short description as text BELOW. No-image deals render the
       NAME as the banner. Whole-card click -> deal builder.

   Constraints (Stream D): no CLS (image holders reserved via bt-aspect;
   description clamped to a fixed line count), graceful missing-asset
   (bt-placeholder--image holder, badge/dropdown absence never shifts layout),
   new colour keys fall back via nested var() and ship dataset values
   (ext_product_badge_{background_,}color).

   Prefixed _basic_product (NOT _product) to avoid the name-collision importer
   gotcha with parent touch/stylesheets/_product.scss (basic_touch.md Stream-D
   gotcha #4). Wired via the _basic_touch.scss aggregator.

   Scoped under .extended-mode to match the parent's specificity (Basic Touch
   locks touch_extended_mode on); this partial only ships in the basic-touch
   compiled CSS, so it never reaches other client themes.

   Colour keys (all with nested var() fallback to existing frozen keys):
     --theme-product-background-color   -> card surface
     --theme-product-border-color       -> card border
     --theme-product-hover-border-color -> card hover border
     --theme-product-title-color        -> name
     --theme-product-text-color         -> description
     --theme-product-price-color        -> price
     --theme-button-background-color    -> ADD / "+" / stepper accents
     --theme-button-color               -> ADD / "+" text
     --theme-product-badge-background-color (NEW) -> badge fill
     --theme-product-badge-color            (NEW) -> badge text/icon
     --theme-product-customizable-image-background-color (NEW, review #11)
     --theme-product-simple-image-background-color       (NEW, review #11)
     --theme-product-deal-image-background-color         (NEW, review #11)
     --theme-product-counter-{,background-}color -> basket-qty badge (review #12)
     --theme-basket-deal-header-background-color -> deal name-fallback band

   Review revisions (2026-06-24) applied here:
     #1 grid 4/3 desktop, 1/2 mobile     #2 mobile horizontal cards
     #3 image fit by source ratio        #4/#5/#6 deal banner + name fallback
     #7 white full-width SKU dropdown     #8 no Type-2 "+"
     #9 single-SKU card-click adds        #10 dropdown overflows the card
     #11 three image-background keys       #12 basket-qty indicator top-right
   ========================================================================== */
/* Local semantic shims - nested var() fallback chains so an unset key never
   breaks the card (the new badge keys are guarded in
   basic_touch_layout_vars.rhtml so they are truly unset, not empty). */
/* Quantity stepper (number + / −) — its own key so a shop can colour the
   stepper independently of the product name; unset ⇒ falls back to the title
   key (its historical default). Shared by the card + popup steppers. */
/* No-image deal: the name-fallback band is driven by the DEAL IMAGE background
   key (so that key actually does something - previously the band used the
   basket deal-header key and the deal-image key was dead). Falls back to the
   accent so the white deal name stays readable when the key is unset. */
/* The Type-1 SKU dropdown must be a genuinely WHITE control (review revision
   #7) - it must NOT inherit the (possibly tinted) card surface or input var
   (some shops tint --theme-input-background-color). Hard white by design;
   the thin border + chevron carry the theming. */
/* Per-card-type IMAGE BACKGROUND (review revision #11): the colour painted
   behind the product image inside the (reserved) holder. Shows through when a
   landscape source is shown whole (object-fit: contain leaves letterbox bands)
   or while an image is still loading / missing. Each falls back through the
   soft surface token so an unset key never breaks the card.
     - customizable / simple -> the square image holder background.
     - deal                  -> the landscape banner band + name-fallback band. */
.extended-mode {
  /* ----------------------------------------------------------------------
     GRID - deals and products NEVER share a row (review revision #12). The
     category renders TWO independent 12-column grids stacked vertically: the
     DEALS block on top, the PRODUCTS block below. Separate grids mean a deal
     (span 4 -> 3/row) can never backfill a product row (span 3 -> 4/row) or
     vice-versa - the "pop down on mismatch" is structural, not a heuristic.
       Products (Type 1 & 2): desktop span 3  -> 4 per row;  mobile span 12 -> 1.
       Deals    (Type 3):     desktop span 4  -> 3 per row;  mobile span 6  -> 2.
     Tablet sits between: products 2/row (span 6), deals 2/row (span 6).
     Cards stretch so rows stay aligned (clamped description does the rest).
     ---------------------------------------------------------------------- */
  /* Each block defaults to COLLAPSED (display:none) so an empty deals/products
     block adds no stray vertical gap; the populated block opts back into the
     grid via :has(.product). The block always carries template whitespace (the
     products:each leaves newlines even when it emits nothing), so :empty can't
     be used to detect emptiness.

     CRITICAL: do NOT write `:not(:has(.product))` - the Ruby Sass compiler here
     strips the :has() argument out of :not(), collapsing the selector to a bare
     `.category__items { display:none }` that hides EVERY product. Standalone
     :has() compiles correctly (used elsewhere in this file), so we invert the
     logic instead (review revision #12). */
  /* Reset legacy float/width product rules so the grid owns layout. */
  /* ----------------------------------------------------------------------
     SHARED CARD SHELL
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     DROPDOWN OVERFLOW (review revision #10). Only Type 1 (Simple) has the SKU
     dropdown; let its open list escape the card bounds instead of being
     clipped. The wrapper/form/controls must NOT clip; the rounded image
     corners are preserved by clipping on the picture-container itself. The
     open `.nice-select .list` is absolutely positioned with a high z-index so
     it paints above sibling cards.
     ---------------------------------------------------------------------- */
  /* The list's own z-index only orders it WITHIN this card's stacking context -
     sibling cards (later grid items) still paint over the overflowing list (it
     was appearing BEHIND the next row). So while the dropdown is open, lift the
     WHOLE card above its neighbours. */
  /* The image fills the holder edge-to-edge as a clean rectangle with NO
     independent rounding. But the Type-1 wrapper is overflow:visible (so the
     SKU dropdown can escape the card, revision #10), so the card itself can't
     clip the image - a square image would poke past the card's rounded frame.
     We therefore clip the holder to the CARD radius ONLY on the corners that
     sit on the card's outer edge, leaving the interior corners square. Desktop
     (image on top): the two TOP corners. Mobile overrides to the LEFT corners
     (the image moves to the left column). Net effect: the image is flush inside
     the card, never overflowing, and never looks like a rounded thumbnail. */
  /* Square image holder - reserved BEFORE load (CLS = 0). The extra `.product`
     + `.product_universal-image` classes lift specificity above the parent
     `.extended-mode .product.product_universal-image .product__picture-container`
     rule (which forces an 800/580 ratio + object-fit: contain).

     The holder box is ALWAYS a consistent square (no CLS). Only the FIT of the
     image inside changes with the source aspect ratio (review revision #3),
     driven by a JS-added class on the holder:
       (default / .is-square)  square-ish source -> object-fit: cover (crop;
                               a round pizza is partially cut off).
       .is-landscape          wide source       -> object-fit: contain (whole
                               dish visible inside the square holder). */
  /* Type 1 (Simple) image holder background. */
  /* Landscape source: show the whole dish (contain) inside the same square. */
  /* Missing-image: the div placeholder fills the reserved square. */
  /* ----------------------------------------------------------------------
     MOBILE = HORIZONTAL product cards (review revision #2).
     On mobile, Type 1 & Type 2 product cards switch to a horizontal layout:
       image LEFT (~40%) | name + desc/price (+ Type-1 controls) RIGHT.
     Deal cards (.product_deal-banner) keep their own image-on-top layout.
     Desktop/tablet stay vertical (rules above own that).

     IMPORTANT: the parent `touch/_product.scss` has `.product_improved`
     `@media (max-width: 52.5em)` rules that float the image right, hide
     `.product__price` / `.product__sku-list`, and swap in a mobile-price/
     button variant. Those would break this layout, so the rules below run at
     `bt-mobile` (<=40em) AFTER the parent (later in the compiled CSS) and at
     >= specificity, re-asserting the horizontal grid and re-showing the price
     + inline SKU dropdown that Basic Touch wants inline.
     ---------------------------------------------------------------------- */
  /* Unified card header (review revision #14), shared by Type 1 & Type 2:
       [ name ................ cal | prep ]   <- one row
       [ price                            ]   <- below the name, left
     .product__head is the row; .product__head-main is the left column that
     stacks name then price; the meta cells sit on the right, top-aligned with
     the name. */
  /* Meta on the right of the name line: drop its default top margin and keep the
     cells on one line so they read as a compact cal | prep cluster. */
  /* Name + description shared. */
  /* Price sits below the name in the left column for both card types. */
  /* Clamp description to a fixed 2 lines across ALL cards so rows align. */
  /* Base-ingredient CHIPS (LP-2182): the option-list `__ingredients_removed`
     items as small pills - DISTINCT from the plain-text description. The chip
     area is height-capped to ~2 rows so a long ingredient list can't overload
     the card; overflowing chips are clipped. */
  /* ONE line of base-ingredient chips - PURE CSS limit (RE yields all). nowrap +
     overflow:hidden clips the row to one line; an overflowing chip is sliced at
     the edge (the "peek"), which signals there are more - plus a right-edge fade
     for polish. No JS / no RE counting. */
  /* Inline dietary pictos - small icons next to the name (unchanged source). */
  /* Card meta line (LP-2182): calories + prep time (mockup parity). A small
     muted row; empty cells collapse so a product missing one (or both) shows no
     stray gap. */
  /* Default COLLAPSED. The meta line carries template whitespace even when both
     cells are absent, so :empty can't detect "no data"; instead we show the line
     only when it actually contains a cell, via a standalone :has() below. (Do
     NOT use :not(:has()) - this Ruby Sass strips the :has() arg out of :not(),
     collapsing the selector to a bare always-on rule. See basic_touch.md
     Stream-D SCSS gotcha #9.) */
  /* The cells are emitted only when they have real data (if_calories_value /
     if_preparation_time), so a present cell means the line has something to
     show - reveal it. */
  /* Leading glyph on prep only (calories shows no icon - review revision #15). */
  /* ⏱ */
  /* Safety: if a calories cell is emitted but its JS-filled value is still empty
     (e.g. selected size has none), hide the cell so no lone 🔥 shows. Standalone
     :has(:empty) compiles fine. */
  /* ----------------------------------------------------------------------
     FAVOURITES HEART (unified card, review revision #23). Both flows put the
     whole-card click layer (.product__card-click_add, z-index 1) over the card;
     keep the heart clickable above it so it keeps its own action.
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     BADGE SLOT - top-left over the image, max 2 (LP-2284 data). 0 badges ->
     nothing rendered (the widget emits nothing), so no reserved gap / shift.
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     BASKET-QUANTITY INDICATOR (review revision #12). Restores the "how many
     of this product are already in the basket" count, top-RIGHT over the
     image. Reuses the existing data plumbing: product_counter.rhtml emits
     `<span.product__counter data-basket-counter>` and ProductCounter.init()
     fills it from the live basket + toggles `.product_with-counter` on the
     card. Hidden (no reserved gap, no shift) until the JS sets a count.
     Sits above the Type-2 whole-card click layer (z-index 2) so it stays
     visible. pointer-events:none so a tap still hits the card/controls.
     ---------------------------------------------------------------------- */
  /* The JS sets `.product_with-counter` on the card only when quantity > 0. */
  /* ----------------------------------------------------------------------
     TYPE 1 - SIMPLE INLINE
     ---------------------------------------------------------------------- */
  /* Lift the whole card while its description popover is open so the popover
     paints above later (sibling) grid items. */
  /* ----------------------------------------------------------------------
     TYPE 3 - DEAL CARD (Pizzan OFFER section: 3 per row).
     NOT an explicit card (review revision #22): no border, no surface, no box.
     A STANDALONE fully-rounded banner image on top, with the name + price +
     short description "painted" directly on the page body below it (flush to
     the image's edges, no card chrome). No "+", no controls. No-image deals
     render the NAME as the banner (revision #6).
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     HOVER (desktop only - avoid sticky hover on touch).
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     SNOOZED / SOLD-OUT - keep the parent greyed-out treatment readable.
     ---------------------------------------------------------------------- */ }
  .extended-mode .category__products {
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-20, 2rem); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .category__products {
        gap: var(--bt-space-14, 1.4rem); } }
    @media screen and (max-width: 40em) {
      .extended-mode .category__products {
        gap: var(--bt-space-12, 1.2rem); } }
  .extended-mode .category__deals,
  .extended-mode .category__items {
    display: none; }
    .extended-mode .category__deals:has(.product),
    .extended-mode .category__items:has(.product) {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--bt-space-20, 2rem);
      align-items: stretch; }
      @media screen and (max-width: 52.5em) {
        .extended-mode .category__deals:has(.product),
        .extended-mode .category__items:has(.product) {
          gap: var(--bt-space-14, 1.4rem); } }
      @media screen and (max-width: 40em) {
        .extended-mode .category__deals:has(.product),
        .extended-mode .category__items:has(.product) {
          gap: var(--bt-space-12, 1.2rem); } }
  .extended-mode .product.product_basic {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    clear: none;
    display: flex;
    /* Products: 4 / 2 / 1 per row. */
    grid-column: span 3;
    /* Deals: 3 / 2 / 2 per row. */ }
    @media screen and (max-width: 52.5em) {
      .extended-mode .product.product_basic {
        grid-column: span 6; } }
    @media screen and (max-width: 40em) {
      .extended-mode .product.product_basic {
        grid-column: span 12; } }
    .extended-mode .product.product_basic.product_deal-banner {
      grid-column: span 4; }
      @media screen and (max-width: 52.5em) {
        .extended-mode .product.product_basic.product_deal-banner {
          grid-column: span 6; } }
      @media screen and (max-width: 40em) {
        .extended-mode .product.product_basic.product_deal-banner {
          grid-column: span 6; } }
  .extended-mode .product_basic .product__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--theme-product-background-color, var(--bt-surface, #ffffff));
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
    border-radius: var(--bt-radius-lg, 16px);
    /* Default: clip children to the rounded corners (image, deal banner).
       Type 1 overrides to `visible` so its SKU dropdown can overflow the card
       (review revision #10) - there the image corners are clipped on the
       holder itself instead. */
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .extended-mode .product_inline-simple .product__wrapper,
  .extended-mode .product_inline-simple .product__form,
  .extended-mode .product_inline-simple .product__inline-controls,
  .extended-mode .product_inline-simple .product__inline-sku {
    overflow: visible; }
  .extended-mode .product_inline-simple:has(.nice-select.open) {
    position: relative;
    z-index: 60; }
  .extended-mode .product_inline-simple.product_universal-image .product__picture-container {
    overflow: hidden;
    border-radius: 0;
    /* Match the CARD's actual corner (--bt-radius-sm = 10px) inset by the 1px
       border so the image nests EXACTLY inside the frame - no white crescent,
       no overflow. The image itself stays square (radius 0); the holder just
       clips it to the card's corner. Desktop = top corners. */
    border-top-left-radius: calc(var(--bt-radius-sm, 10px) - 1px);
    border-top-right-radius: calc(var(--bt-radius-sm, 10px) - 1px); }
  .extended-mode .product_basic .product__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%; }
  .extended-mode .product.product_basic.product_universal-image .product__picture-container {
    /* Definite (length) height, NOT aspect-ratio (review revision #16). Chrome's
       CSS-grid intrinsic ROW sizing undercounts an aspect-ratio (or padding-%)
       image whose natural size is smaller than its rendered size: the row is
       sized from the image's NATURAL height, so a short card (e.g. a single
       snoozed product with no controls, like O'Croque on oliv-pizza) renders
       taller than its grid track and spills onto the next category's title.
       A length height is the only value the grid honours up front, so the track
       always contains the card. ~square at desktop (1rem = 10px here). Mobile's
       horizontal layout overrides this with height:100% further down. */
    height: 26rem;
    width: 100%;
    display: block;
    position: relative;
    margin: 0;
    /* Per-card-type image background (review revision #11). Customizable is the
       default here; Type 1 overrides below. Deal cards use their own band. */
    background: var(--theme-product-customizable-image-background-color, var(--bt-soft)); }
    @media screen and (max-width: 52.5em) {
      .extended-mode .product.product_basic.product_universal-image .product__picture-container {
        height: 30rem; } }
  .extended-mode .product.product_basic.product_inline-simple.product_universal-image
  .product__picture-container {
    background: var(--theme-product-simple-image-background-color, var(--bt-soft)); }
  .extended-mode .product.product_basic.product_universal-image .product__picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* default until JS classifies, and for square src */
    object-position: center;
    display: block; }
  .extended-mode .product.product_basic.product_universal-image
  .product__picture-container.is-landscape .product__picture {
    object-fit: contain; }
  .extended-mode .product.product_basic.product_universal-image .product__picture_placeholder {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    display: block; }
  @media screen and (max-width: 40em) {
    .extended-mode {
      /* Right column: name+price row, then dropdown (simple-multi-SKU only), then
         stepper+ADD, stacked SNUG in column 2 (Pizzan stacks them tight under the
         name, no push-to-bottom — margin-top:auto here would re-open the gap now
         that the image spans the full height). Tighter padding for the narrow
         column. Shared by every non-deal card (all carry product_inline-simple). */ }
      .extended-mode .product.product_basic:not(.product_deal-banner) {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        position: relative;
        /* positioning context for counter + card-click */
      /* Pizzan mobile card: image LEFT (full card height), all info + controls
         stacked in the RIGHT column on ONE card line.

         A 2-column GRID (not flex-wrap) is what makes this robust: the image is
         a single tall cell spanning every row, and name/desc/price/controls
         stack in column 2. The old flex-wrap pushed the controls onto a
         full-width SECOND row, which overflowed 360px. The <script> setter
         widgets are display:none (not grid items); counter-slot + card-click are
         position:absolute (out of flow), so the only in-flow grid items are the
         picture + the right-column blocks. */
        /* Image = left column, spanning BOTH right-column rows => full card
           height. `1 / -1` would only span EXPLICIT grid lines (there are none,
           so it collapses to row 1, leaving dead space under the image). Both
           product types have exactly two right-column blocks (top + controls /
           top + customizable-bottom), so `span 2` spans the whole card. */
        /* Right column: every text/control block sits in column 2 and stacks.
           min-width:0 lets long names / nowrap controls shrink instead of
           widening the column past the card (the 360px overflow). */
        /* Image is on the LEFT now: clip the holder to the card radius on the
           corners that meet the card's LEFT edge (top-left + bottom-left); the
           right side is interior, so it stays square. */
        /* The basket-qty chip slot shrinks to 0x0 in the grid; its default
           overflow:hidden then clips the chip away. Let it overflow so the chip
           paints (this is why the count was invisible on mobile). */
        /* Re-show what the parent mobile rules hid - Basic Touch keeps the price
           and the single inline SKU dropdown visible on mobile. */
        /* The right column is too narrow to fit name + meta on one line - keeping
           them side by side crushed the name to ~37px (it wrapped letter-by-letter
           and looked centered). STACK the header on mobile: name, price, then the
           meta, all flush left, each on its own full-width row. */ }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__wrapper {
          flex-direction: column;
          padding: 0;
          position: relative; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__form {
          display: grid;
          grid-template-columns: 46% 1fr;
          /* image gets back its larger share */
          align-items: stretch;
          width: 100%;
          max-width: 100%; }
        .extended-mode .product.product_basic:not(.product_deal-banner).product_universal-image .product__picture-container {
          grid-column: 1;
          grid-row: 1 / span 2;
          aspect-ratio: auto;
          /* fill the card height, not a forced square */
          width: 100%;
          max-width: 100%;
          height: 100%;
          margin: 0;
          float: none;
          align-self: stretch; }
        .extended-mode .product.product_basic:not(.product_deal-banner).product_universal-image .product__picture, .extended-mode .product.product_basic:not(.product_deal-banner).product_universal-image .product__picture_placeholder {
          height: 100%;
          width: 100%; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__top,
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__customize,
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__inline-controls {
          grid-column: 2;
          min-width: 0;
          max-width: none;
          overflow: visible; }
        .extended-mode .product.product_basic:not(.product_deal-banner).product_inline-simple.product_universal-image .product__picture-container {
          border-radius: 0;
          border-top-left-radius: calc(var(--bt-radius-sm, 10px) - 1px);
          border-bottom-left-radius: calc(var(--bt-radius-sm, 10px) - 1px); }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__counter-slot {
          overflow: visible; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__price {
          display: block; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__sku-list {
          display: block; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__mobile-price,
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__mobile-button {
          display: none; }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__head {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--bt-space-4, 0.4rem); }
        .extended-mode .product.product_basic:not(.product_deal-banner) .product__head .product__meta {
          justify-content: flex-start;
          text-align: left; }
      .extended-mode .product_inline-simple .product__top {
        padding: var(--bt-space-10, 1rem) var(--bt-space-12, 1.2rem) 0; }
      .extended-mode .product_inline-simple .product__inline-controls {
        margin-top: 0;
        padding: var(--bt-space-8, 0.8rem) var(--bt-space-12, 1.2rem) var(--bt-space-12, 1.2rem); } }
  .extended-mode .product_basic .product__head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bt-space-10, 1rem);
    width: 100%; }
  .extended-mode .product_basic .product__head-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bt-space-4, 0.4rem);
    /* price tucked just under the name */
    flex: 1 1 auto;
    /* TAKE the spare width so the name isn't
       crushed into a narrow, centered-looking
       column by the meta beside it */
    min-width: 0;
    /* allow it to shrink, not overflow */
    text-align: left;
    /* name reads left, matching the price */ }
  .extended-mode .product_basic .product__head .product__meta {
    margin-top: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    text-align: right; }
  .extended-mode .product_basic .product__name {
    margin: 0;
    text-align: left;
    /* both wrapped lines flush left, never centered */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--theme-product-title-color, var(--bt-text, #15110f)); }
  .extended-mode .product_basic .product__name-wrapper {
    display: inline; }
  .extended-mode .product_basic .product__head-main .product__price {
    float: none;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-600, #ea580c)));
    white-space: nowrap; }
  .extended-mode .product_basic .product__description {
    margin: 0;
    text-align: left;
    /* match the left-aligned header (name + price) */
    color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
    font-size: 1.3rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve the 2-line height so a 1-line / no-desc card matches a 2-line
       card (no CLS, aligned bottom rows). */
    min-height: calc(1.4em * 2); }
  .extended-mode .product_basic .product__ingredients {
    list-style: none;
    margin: var(--bt-space-8, 0.8rem) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--bt-space-6, 0.6rem);
    overflow: hidden;
    /* min-width:0 (vs the flex default `auto`) lets the nowrap row shrink to the
       card width and clip instead of growing to its content (which overflowed
       both card edges). width/max-width pin it to the card. */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent); }
    .extended-mode .product_basic .product__ingredients:empty {
      display: none; }
  .extended-mode .product_basic .product__ingredient {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 var(--bt-space-8, 0.8rem);
    border-radius: 999px;
    background: #f4efe9;
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
    color: var(--theme-product-title-color, var(--bt-text, #15110f));
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap; }
  .extended-mode .product_basic .product-pictos {
    margin-top: var(--bt-space-6, 0.6rem); }
  .extended-mode .product_basic .product__meta {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bt-space-6, 0.6rem) var(--bt-space-12, 1.2rem);
    margin-top: var(--bt-space-6, 0.6rem);
    color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
    font-size: 1.2rem;
    font-weight: 600; }
  .extended-mode .product_basic .product__meta:has(.product__meta-cal),
  .extended-mode .product_basic .product__meta:has(.product__meta-prep) {
    display: flex; }
  .extended-mode .product_basic .product__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem; }
    .extended-mode .product_basic .product__meta-item:empty {
      display: none; }
  .extended-mode .product_basic .product__meta-prep::before {
    content: "\23F1"; }
  .extended-mode .product_basic .product__meta-cal:has([data-product-calories]:empty) {
    display: none; }
  .extended-mode .product_basic .product__favourite,
  .extended-mode .product_basic .product__favourites {
    position: relative;
    z-index: 3; }
  .extended-mode .product__badges {
    position: absolute;
    top: var(--bt-space-8, 0.8rem);
    left: var(--bt-space-8, 0.8rem);
    z-index: 2;
    /* One badge per line, stacked top-left (review revision #18). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bt-space-6, 0.6rem);
    max-width: calc(100% - 1.6rem);
    pointer-events: none; }
  .extended-mode .product__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--theme-product-badge-background-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316)));
    color: var(--theme-product-badge-color, var(--theme-button-color, var(--bt-on-accent, #ffffff)));
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    max-width: 100%; }
  .extended-mode .product__badge-icon {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    display: block; }
  .extended-mode .product__badge-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .extended-mode .product__counter-slot {
    position: absolute;
    top: var(--bt-space-8, 0.8rem);
    right: var(--bt-space-8, 0.8rem);
    z-index: 4;
    pointer-events: none;
    /* The slot shrink-wraps to 0x0 and a parent rule gives it overflow:hidden,
       which clips the chip away (it was invisible on mobile). Force visible so
       the chip always paints regardless of the slot's collapsed box. */
    overflow: visible; }
  .extended-mode .product__counter {
    display: none;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .6rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--theme-product-counter-background-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316)));
    color: var(--theme-product-counter-color, var(--theme-button-color, var(--bt-on-accent, #ffffff)));
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); }
  .extended-mode .product_with-counter .product__counter {
    display: inline-flex; }
  .extended-mode .product_inline-simple {
    /* A COLUMN now: the name/price/meta layout is owned by .product__head (the
       shared header row); pictos and description stack below it full width. */
    /* pictos and description each take the FULL card width on their own row.
       Explicit width + clear/float reset because the parent improved-layout
       floats the description and sets clear:none. */
    /* Expandable description (Type-1 only, review #19 → #21). A small "+" CHIP is
       added by JS at the END of the clamped 2nd line; clicking it opens the full
       text as a POPOVER floating over the card (rather than expanding in place,
       which overflowed onto the controls with no background since the grid row
       doesn't always grow). The chip sits ABOVE the whole-card add layer (z 1)
       and controls (z 2) so a tap opens the popover instead of adding to basket.
       The description is wrapped (.product__description-wrap, position:relative)
       so the chip can anchor to its bottom-right corner. */
    /* A subtle bold "…" at the end of the clamped 2nd line - NOT a standout chip.
       A left fade lets the truncated text blend into it (like "text… "). */
    /* The full-description popover (JS-positioned over the description). Solid
       surface + shadow so it reads as a floating card above the controls. */ }
    .extended-mode .product_inline-simple .product__top {
      display: flex;
      flex-direction: column;
      gap: var(--bt-space-6, 0.6rem);
      padding: var(--bt-space-12, 1.2rem) var(--bt-space-14, 1.4rem) 0; }
    .extended-mode .product_inline-simple .product-pictos,
    .extended-mode .product_inline-simple .product__description {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      float: none;
      clear: both; }
    .extended-mode .product_inline-simple .product__description-wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box; }
    .extended-mode .product_inline-simple .product__description-toggle {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 3;
      border: 0;
      margin: 0;
      padding: 0 .2rem 0 2.8rem;
      /* left padding = room for the fade + cover */
      /* Short fade then SOLID, so the button's background hides the native
         line-clamp "…" (avoids a double ellipsis) and only the bold one shows. */
      background: linear-gradient(to right, transparent, var(--theme-product-background-color, var(--bt-surface, #ffffff)) 1.4rem);
      color: var(--theme-product-title-color, var(--bt-text, #15110f));
      font-size: 1.3rem;
      /* match the description text */
      font-weight: 700;
      line-height: 1.4;
      /* sit on the description's line */
      cursor: pointer;
      transition: color .12s ease;
      /* brand tint on hover, subtle at rest */ }
      .extended-mode .product_inline-simple .product__description-toggle:hover {
        color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-600, #ea580c))); }
    .extended-mode .product_inline-simple .product__description-popover {
      position: absolute;
      z-index: 61;
      /* above the card-click (1) / controls (2); the
         whole card is lifted to z 60 below so it also
         clears sibling cards. */
      box-sizing: border-box;
      padding: var(--bt-space-12, 1.2rem) var(--bt-space-14, 1.4rem);
      background: var(--theme-product-background-color, var(--bt-surface, #ffffff));
      border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
      border-radius: var(--bt-radius-sm, 10px);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
      color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
      font-size: 1.3rem;
      line-height: 1.4;
      max-width: 100%; }
  .extended-mode .product_inline-simple.product_desc-open {
    position: relative;
    z-index: 60; }
  .extended-mode .product_inline-simple {
    /* Single-SKU card: whole-card click adds to basket (review revision #9).
       Sits BELOW the controls (z-index 1) so the stepper +/- still works and
       only empty-area taps fall through to the add. The name/price/image have
       no interactive children so a tap there hits this add layer. */
    /* ------------------------------------------------------------------
       Single full-width SKU dropdown (review revision #7).

       The native <select data-nice-select> is replaced at runtime by the
       NiceSelect plugin with:
         <div.nice-select__container> > <div.nice-select.product__sku-select>
       The base touch _nice_select.scss sets `.nice-select { float:left;
       width:auto; height:32px; display:block }` and the container to
       `display:inline-block`, so the control shrink-wraps to a cramped grey
       pill. We override BOTH the container (force a full-width block) and the
       inner .nice-select (float:none, width:100%, white surface, comfortable
       height, chevron right) with selectors specific enough to win.
       ------------------------------------------------------------------ */
    /* Quantity stepper - a soft rounded pill (− value +). */ }
    .extended-mode .product_inline-simple .product__inline-controls {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: var(--bt-space-10, 1rem);
      padding: var(--bt-space-12, 1.2rem) var(--bt-space-14, 1.4rem) var(--bt-space-14, 1.4rem);
      position: relative;
      z-index: 2;
      /* above the single-SKU card-click add layer */ }
    .extended-mode .product_inline-simple .product__card-click_add {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none; }
    .extended-mode .product_inline-simple .product__inline-sku {
      width: 100%;
      /* The plugin wrapper: must be a full-width block, not inline-block. */
      /* The visible custom control. */
      /* Native fallback (no JS / plugin not yet run) is full-width too. */ }
      .extended-mode .product_inline-simple .product__inline-sku .product__sku-list {
        margin: 0; }
      .extended-mode .product_inline-simple .product__inline-sku .product__sku {
        display: block;
        margin: 0; }
      .extended-mode .product_inline-simple .product__inline-sku .product__sku-label {
        display: none; }
      .extended-mode .product_inline-simple .product__inline-sku .nice-select__container {
        display: block;
        width: 100%; }
      .extended-mode .product_inline-simple .product__inline-sku .nice-select {
        position: relative;
        /* anchor for the overflowing .list */
        float: none;
        clear: none;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        height: 4.4rem;
        line-height: normal;
        padding: 0 3.4rem 0 1.4rem;
        background-color: #ffffff;
        border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
        border-radius: var(--bt-radius-sm, 10px);
        color: var(--theme-product-title-color, var(--bt-text, #15110f));
        font-size: 1.4rem;
        font-weight: 600;
        white-space: nowrap;
        /* Chevron on the right (the base ::after sits at right:12px - fine). */
        /* Dropdown list panel - full width of the control, absolutely
           positioned so it OVERFLOWS the card bounds (review revision #10)
           rather than being clipped. High z-index paints it above sibling
           cards in the grid. The parent nice-select plugin already toggles
           visibility on .open; we just guarantee it is never clipped. */ }
        .extended-mode .product_inline-simple .product__inline-sku .nice-select:hover {
          border-color: var(--theme-product-hover-border-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))); }
        .extended-mode .product_inline-simple .product__inline-sku .nice-select.open, .extended-mode .product_inline-simple .product__inline-sku .nice-select:focus {
          border-color: var(--theme-product-hover-border-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))); }
        .extended-mode .product_inline-simple .product__inline-sku .nice-select:after {
          right: 1.4rem;
          border-color: var(--theme-product-title-color, var(--bt-text, #15110f)); }
        .extended-mode .product_inline-simple .product__inline-sku .nice-select .current {
          display: block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          /* Selected-value text follows the quantity-stepper colour key; unset
             ⇒ falls back to the product-title colour (its prior default). */
          color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, #15110f))); }
        .extended-mode .product_inline-simple .product__inline-sku .nice-select .list {
          position: absolute;
          left: 0;
          right: 0;
          top: calc(100% + .4rem);
          width: 100%;
          z-index: 50;
          max-height: 26rem;
          overflow-y: auto;
          background: #ffffff;
          border-radius: var(--bt-radius-sm, 10px);
          border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
      .extended-mode .product_inline-simple .product__inline-sku select.product__sku-select {
        width: 100%;
        box-sizing: border-box;
        height: 4.4rem;
        border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
        border-radius: var(--bt-radius-sm, 10px);
        padding: 0 1.4rem;
        background: #ffffff; }
    .extended-mode .product_inline-simple .product__inline-actions {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      /* a long ADD label wraps to its own line, never clips */
      gap: var(--bt-space-10, 1rem); }
    .extended-mode .product_inline-simple .product__stepper {
      display: inline-flex;
      align-items: stretch;
      flex: 0 0 auto;
      background: #f4efe9;
      border: 1px solid var(--theme-product-border-color, var(--bt-border-color, #eadfd4));
      border-radius: 999px;
      overflow: hidden; }
    .extended-mode .product_inline-simple .product__stepper-btn {
      width: 3.8rem;
      border: 0;
      background: transparent;
      /* Number + / − share the dedicated stepper key (falls back to title). */
      color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, #15110f)));
      font-size: 1.8rem;
      line-height: 1;
      cursor: pointer;
      border-radius: 999px;
      transition: background .12s ease, opacity .12s ease;
      /* At the limit (minus at qty 1, plus at qty 99) the button is disabled:
         greyed, no hover, not interactive. JS toggles disabled + the class. */ }
      .extended-mode .product_inline-simple .product__stepper-btn:hover {
        background: rgba(0, 0, 0, 0.06); }
      .extended-mode .product_inline-simple .product__stepper-btn:disabled, .extended-mode .product_inline-simple .product__stepper-btn.product__stepper-btn_disabled {
        opacity: .35;
        cursor: default;
        pointer-events: none; }
    .extended-mode .product_inline-simple .product__stepper-value {
      width: 3rem;
      border: 0;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      /* Same dedicated stepper key as the +/- glyphs. */
      color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, #15110f)));
      background: transparent;
      -moz-appearance: textfield; }
      .extended-mode .product_inline-simple .product__stepper-value:focus {
        outline: none; }
    .extended-mode .product_inline-simple .product__add_inline {
      /* Width is variable: grows to share the row, but min-width:max-content
         means it NEVER shrinks below its own label - so the text always fits,
         in any language. Combined with the wrapping row above, a label too long
         to sit beside the stepper drops onto its own full-width line instead of
         being clipped. */
      flex: 1 1 auto;
      min-width: max-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: auto;
      min-height: 4rem;
      width: auto;
      padding: 0 1.8rem;
      border: 0;
      border-radius: var(--bt-radius-sm, 10px);
      background: var(--theme-button-background-color, var(--bt-accent-500, #f97316));
      color: var(--theme-button-color, var(--bt-on-accent, #ffffff));
      font-size: 1.4rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .02em;
      white-space: nowrap;
      cursor: pointer;
      transition: filter .15s ease, transform .1s ease; }
      .extended-mode .product_inline-simple .product__add_inline:hover {
        filter: brightness(0.92); }
      .extended-mode .product_inline-simple .product__add_inline:active {
        transform: scale(0.99); }
  .extended-mode .product_deal-banner {
    /* Strip the shared card shell - the deal is image + free-standing text, not
       a bordered box. Transparent so the page background shows through; overflow
       visible so nothing is clipped to a (now absent) card frame. */
    /* Landscape banner media - ALWAYS a wide band regardless of source ratio.
       cover-crops a square or portrait source into the band. STANDALONE image:
       ALL FOUR corners rounded (it's no longer nested inside a clipping card),
       so it reads as a floating rounded picture (Pizzan reference). */
    /* No-image fallback: the deal name stylized as the picture, on the deal
       colour band. Fills the same bander band so the card never shows an empty
       box (no CLS - same aspect-ratio holder). */
    /* Text body BELOW the banner, painted directly on the page (no box). Flush
       to the image's left/right edges (horizontal padding 0) so name/price/desc
       line up with the rounded picture above - just a little breathing room on
       top. */
    /* Name shares one line with the price (title left, price right - Pizzan
       reference) at every width: it shrinks and ellipsises rather than wrapping
       or pushing the price onto a second line. */
    /* Transparent submit button filling the picture, INSIDE the media (which is
       lifted above the whole-card overlay). Catches clicks on the image so it
       still opens the deal, while the media being on top lets the hover-lift
       fire on the picture only. */ }
    .extended-mode .product_deal-banner .product__wrapper {
      flex-direction: column;
      align-items: stretch;
      border: 0;
      background: transparent;
      border-radius: 0;
      overflow: visible; }
    .extended-mode .product_deal-banner .product__form {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      height: 100%; }
    .extended-mode .product_deal-banner .product__deal-banner-media {
      position: relative;
      /* Above the whole-card click overlay (z-index 2) so the PICTURE is the
         topmost element in its own region - that's what makes the hover-lift
         scope to the image alone (hovering the name/price/description below
         never touches the media). Its own transparent submit button (below)
         keeps a click on the picture opening the deal. */
      z-index: 3;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: var(--bt-radius-lg, 16px);
      transition: box-shadow .15s ease, transform .15s ease;
      /* Image background behind the banner (review revision #11) - shows in the
         cover-crop gutter / while loading. The no-image fallback below paints
         the branded deal band on top of this. */
      background: var(--theme-product-deal-image-background-color, var(--bt-soft)); }
    .extended-mode .product_deal-banner .product__deal-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* always cover-crop to the band */
      object-position: center;
      display: block; }
    .extended-mode .product_deal-banner .product__deal-banner-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--bt-space-14, 1.4rem);
      background: var(--theme-product-deal-image-background-color, var(--theme-button-background-color, var(--bt-accent-600, #ea580c))); }
    .extended-mode .product_deal-banner .product__deal-banner-fallback-name {
      color: var(--theme-basket-deal-header-color, #ffffff);
      font-size: 2.6rem;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .01em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    .extended-mode .product_deal-banner .product__deal-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: var(--bt-space-6, 0.6rem);
      padding: var(--bt-space-12, 1.2rem) 0 0;
      color: var(--theme-product-title-color, var(--bt-text, #15110f)); }
    .extended-mode .product_deal-banner .product__deal-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--bt-space-10, 1rem); }
    .extended-mode .product_deal-banner .product__deal-name {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--theme-product-title-color, var(--bt-text, #15110f));
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .extended-mode .product_deal-banner .product__deal-price {
      /* The deal price shares the .product__price class, which the parent
         hides on mobile (display:none). Re-assert it (higher specificity, so it
         shows on every viewport) - the deal price is core deal-card data. */
      display: inline-block;
      float: none;
      margin: 0;
      flex: 0 0 auto;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-600, #ea580c)));
      white-space: nowrap; }
    .extended-mode .product_deal-banner .product__deal-description {
      color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
      -webkit-line-clamp: 2;
      min-height: 0; }
    .extended-mode .product_deal-banner .product__card-click {
      position: absolute;
      inset: 0;
      z-index: 2;
      border: 0;
      background: transparent;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none; }
    .extended-mode .product_deal-banner .product__deal-media-click {
      position: absolute;
      inset: 0;
      z-index: 1;
      /* above the img within the media's stacking context */
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none; }
    @media screen and (max-width: 40em) {
      .extended-mode .product_deal-banner {
        /* Keep title + price on ONE line on mobile too (Pizzan reference). The
           name ellipsises (rules above); the price never wraps to a second line. */ }
        .extended-mode .product_deal-banner .product__deal-banner-fallback-name {
          font-size: 1.8rem; }
        .extended-mode .product_deal-banner .product__deal-name,
        .extended-mode .product_deal-banner .product__deal-price {
          font-size: 1.4rem; }
        .extended-mode .product_deal-banner .product__deal-head {
          flex-wrap: nowrap; } }
  @media screen and (min-width: 60em) {
    .extended-mode {
      /* Type 1 & 2 only - the whole card lifts. Deals are NOT a card (no box) and
         get ONLY the picture hover below, so exclude them here or they'd lift
         twice (card + picture). */
      /* Cancel the PARENT monoblock card-lift on a deal wrapper (extended-mode's
         `.product_monoblock .product__wrapper:hover` lifts the whole box with a
         shadow). A deal is not a box, so without this it would lift TWICE - the
         parent card-lift AND the picture-lift below. The extra `.product_deal-
         banner` class out-specifies the parent rule. */
      /* No card box to lift now - raise the STANDALONE rounded image, and ONLY
         when the IMAGE itself is hovered (not anywhere on the card body). */ }
      .extended-mode .product_basic:not(.product_greyed-out):not(.product_deal-banner) .product__wrapper:hover {
        border-color: var(--theme-product-hover-border-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316)));
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px); }
      .extended-mode .product_deal-banner.product_monoblock .product__wrapper:hover {
        transform: none;
        box-shadow: none;
        border-color: transparent; }
      .extended-mode .product_deal-banner:not(.product_greyed-out) .product__deal-banner-media:hover {
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
        transform: translateY(-2px); } }
  .extended-mode .product_greyed-out .product__wrapper {
    opacity: .6; }
  .extended-mode .product_greyed-out .product__add_inline,
  .extended-mode .product_greyed-out .product__card-click {
    pointer-events: none; }

/* ----- LP-2285 (D-8b) — Customization popup ------------------------------ */
/* ==========================================================================
   BASIC TOUCH — CUSTOMIZATION POPUP (LP-2285 / D-8b)
   ==========================================================================
   Redesign of the add-to-basket / customization popup (Basket.newItem, target
   popup). Everything is scoped under .popup_basic so the parent touch
   .popup_improved rules are cleanly overridden and other themes are untouched.

   Layout:
     - Desktop (>= tablet): two columns — full-height image (.popup__media) on
       the left, scrollable body + sticky footer on the right. (UberEats /
       Pizzan desktop.)
     - Mobile (<= tablet): bottom sheet — image hero on top that scrolls away
       with the content, footer pinned. (UberEats / Pizzan mobile.)

   References: pizzan.is customizer (size/crust selector, minus icons) +
   the LP-2182 card look for visual continuity.

   COLOURS: reuse the SAME shop-configurable keys the product card uses
   (--theme-button-* for interactive, --theme-product-* for surfaces) — NO new
   colour keys. Each falls back through the existing $bt-* token (which itself
   falls back to the palette), preserving the epic's nested-var() rule.
   ========================================================================== */
/* warm-neutral soft surface */
/* Quantity stepper (number + / −) — dedicated key shared with the card stepper;
   unset ⇒ falls back to the product-title key (its historical default). */
/* Scoped under the #popup id so these rules out-specify the parent
   extended-mode popup styling (which is class-only — it paints
   .popup-enum__text as a button pill and .popup-set__text with a
   pseudo-element checkbox). An id beats any number of classes, so this wins
   cleanly without per-property !important whack-a-mole. */
#popup.popup_basic {
  /* DO NOT override position / top / left / transform here.
     The parent .popup_improved is position:relative inside the
     .popup-holder-improved, centred via top:50% + translateY(-50%) +
     margin:0 auto, and the holder's open/close animation slides it to
     top:-100% and sets the popup opacity:0 on close. Overriding position to
     fixed escaped the holder, so the closed (opacity:0) popup stayed pinned
     at centre and kept capturing clicks — an invisible "ghost" that blocked
     reopening. We only override the visual look + size; positioning and the
     show/hide animation stay with the parent.
     width 96rem capped at 94vw — written as width + max-width because Ruby
     Sass 3.4.19 evaluates min()/max()/clamp() as Sass functions and errors
     on mixed units (vw vs rem) instead of passing the CSS through. */
  width: 96rem;
  max-width: 94vw;
  height: 82vh;
  max-height: 92vh;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 0;
  /* parent reserves room for absolute buttons; ours is in-flow */
  background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
  border-radius: var(--bt-radius-xl);
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.28);
  overflow: hidden;
  /* ---- two-column desktop layout -------------------------------------- */
  /* Full product image (not cropped); neutral surface behind it (no coloured
     filler band). Magnify-glass zoom on hover is JS-driven: transform-origin
     follows the cursor and the image scales up, clipped by overflow:hidden.
     Scaling around the cursor point keeps that pixel fixed (true magnify),
     so object-fit:contain letterboxing doesn't throw the alignment off. */
  /* crisp tracking */
  /* ---- close button --------------------------------------------------- */
  /* NB: named popup-basic__close — the parent hides .popup__close with
     `display:none !important` (improved layout uses its own close). */
  /* ---- header (UberEats-style: left title, price, description) --------- */
  /* ---- segmented size / crust selector -------------------------------- */
  /* selected pill — drive the whole label off :checked via :has fallback.
     Ruby Sass 3.4.19 passes standalone :has() through verbatim (gotcha #9). */
  /* ---- option rows (enum + set) --------------------------------------- */
  /* Dividers BETWEEN option sections only. The header already carries the
     single top divider (its border-bottom), so the first section after it
     gets none — fixes the "divider too much at the top". */
  /* full-width topping/ingredient rows — large tap targets (ticket req) */
  /* parent paints the checked/disabled enum text black — keep the selected
     visual on the .popup-enum__label wrapper instead (text stays on the
     stepper key). */
  /* ---- extra-topping rows: UberEats-style +/- stepper ----------------- */
  /* These rows opt out of the card look; they're a name+price row with a
     stepper on the right and a light divider between them. */
  /* free topping: strike the price + append the "(Gratuit)" chip from the
     price element's checked-free-label attribute (existing i18n key). */
  /* Fade the struck price with colour, not `opacity`: opacity creates a group
     that composites the ::after label too, and a child's `opacity: 1` can't
     undo it. Colour is per-element, so the label keeps its own accent colour. */
  /* partial free (double topping: only some of a row's units are free, e.g.
     1 of 2). Hide the per-unit price and show the JS-filled breakdown:
     full row price struck + charged remainder in red. */
  /* Neutralise the parent's free-topping display (_popup_set.scss hides the
     price + shows a :before "(Gratuit)" on .free_topping — a class the old
     _product.js toggles unreliably). Basic Touch owns free display via
     .is-free-topping (cheapest-N, add+remove), so keep the price visible and
     drop the legacy :before. */
  /* hide the count + minus until something is selected (show only "+") */
  /* ---- sticky footer: stepper + add ----------------------------------- */
  /* The +/- glyphs are CONTROLS on the quantity stepper, so they take the
     dedicated stepper key ($pop-stepper, which falls back to the title key
     when unset) — independent of the product-text/title. The topping "+"
     sits on an accent-filled button and overrides these bars to
     $pop-on-accent above. */
  /* parent floats/positions these so they overlap — force normal flex items
     so label sits left and price right (space-between). */
  /* parent appends a '|' separator after the price — drop it in our layout */
  /* ====================================================================
     MOBILE — bottom sheet
     ==================================================================== */ }
  #popup.popup_basic .popup__wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden; }
  #popup.popup_basic #popup_form,
  #popup.popup_basic .popup__layout {
    height: 100%; }
  #popup.popup_basic .popup__layout {
    display: flex;
    align-items: stretch;
    overflow: hidden; }
  #popup.popup_basic .popup__media {
    position: relative;
    flex: 0 0 44%;
    max-width: 44%;
    overflow: hidden;
    cursor: zoom-in;
    /* magnify-glass affordance */
    /* neutral fallback only shown if the image is missing — no decorative
       filler band (reuses the product background colour key). */
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0))); }
  #popup.popup_basic .popup__media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.12s ease-out;
    will-change: transform; }
  #popup.popup_basic .popup__media_zooming .popup__media-image {
    transition: none; }
  #popup.popup_basic .popup__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  #popup.popup_basic .popup__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* never scroll sideways (guards against overhangs) */
    -webkit-overflow-scrolling: touch;
    padding: var(--bt-space-28) var(--bt-space-28) var(--bt-space-20); }
  #popup.popup_basic .popup-basic__close {
    position: absolute;
    top: var(--bt-space-14);
    right: var(--bt-space-14);
    z-index: 6;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bt-radius-pill);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18);
    text-decoration: none; }
  #popup.popup_basic .popup-basic__close-icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem; }
    #popup.popup_basic .popup-basic__close-icon::before, #popup.popup_basic .popup-basic__close-icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 0.2rem;
      background: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
      border-radius: 0.2rem; }
    #popup.popup_basic .popup-basic__close-icon::before {
      transform: rotate(45deg); }
    #popup.popup_basic .popup-basic__close-icon::after {
      transform: rotate(-45deg); }
  #popup.popup_basic .popup__top {
    /* parent makes .popup__top a grid (its image+header layout); we moved
       the image out to .popup__media, so force plain block flow. */
    display: block;
    margin-bottom: var(--bt-space-20);
    padding-bottom: var(--bt-space-20);
    border-bottom: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    /* the single divider under the header */ }
  #popup.popup_basic .popup__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bt-space-10);
    padding-right: 4rem;
    /* clear the close button on desktop */ }
  #popup.popup_basic .popup__title {
    margin: 0;
    font-size: 2.8rem;
    line-height: 1.12;
    font-weight: 800;
    text-align: left;
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup__price {
    /* parent .popup__price is float:right WITH margin-right:-105px (legacy
       overhang) — that negative margin made the block 105px wider than its
       column and caused a HORIZONTAL scrollbar. Reset float + all margins. */
    float: none;
    clear: both;
    margin: var(--bt-space-10) 0 0;
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
    color: var(--theme-product-price-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup__price:empty {
    display: none; }
  #popup.popup_basic .popup__description {
    margin-top: var(--bt-space-12);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    text-align: left;
    /* UNCLAMPED — show the full description/ingredients (card clamps). */ }
  #popup.popup_basic .product__calories {
    margin-top: var(--bt-space-8);
    font-size: 1.3rem;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-group_sku {
    border: 0;
    margin: 0 0 var(--bt-space-20);
    padding: 0; }
  #popup.popup_basic .popup-segment + #popup.popup_basic .popup-segment {
    margin-top: var(--bt-space-16); }
  #popup.popup_basic .popup-segment__label {
    display: block;
    margin-bottom: var(--bt-space-8);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-segment__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-segment__item {
    margin: 0;
    flex: 1 1 auto;
    min-width: 9rem;
    list-style: none; }
  #popup.popup_basic .popup-segment__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.6rem;
    padding: var(--bt-space-8) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }
  #popup.popup_basic .popup-segment__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0; }
  #popup.popup_basic .popup-segment__option:hover {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__radio:checked + .popup-segment__text,
  #popup.popup_basic .popup-segment__radio:checked ~ .popup-segment__text {
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__option:has(.popup-segment__radio:checked) {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft);
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__radio:disabled + .popup-segment__text {
    opacity: 0.35; }
  #popup.popup_basic .popup-row {
    border: 0;
    margin: 0 0 var(--bt-space-20);
    padding: var(--bt-space-20) 0 0; }
  #popup.popup_basic .popup-row + .popup-row,
  #popup.popup_basic .popup-group_sku + .popup-row {
    border-top: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border))); }
  #popup.popup_basic .popup-row__title {
    margin: 0 0 var(--bt-space-12);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-row__description {
    margin: -0.4rem 0 var(--bt-space-12);
    font-size: 1.3rem;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-set__option {
    margin: 0;
    list-style: none;
    /* parent floats these at 33.33% — full-width rows instead */
    float: none;
    width: 100%; }
  #popup.popup_basic .popup-set__label {
    display: flex;
    align-items: center;
    gap: var(--bt-space-12);
    width: 100%;
    min-height: 4.8rem;
    margin: 0;
    padding: var(--bt-space-10) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease; }
    #popup.popup_basic .popup-set__label:hover {
      border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-set__option:has(input:checked) .popup-set__label {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft); }
  #popup.popup_basic .popup-set__label input[type="checkbox"] {
    flex: 0 0 auto;
    /* re-show the real checkbox the parent custom-input mixin hides */
    position: static;
    opacity: 1;
    -webkit-appearance: auto;
    appearance: auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: var(--theme-button-background-color, var(--bt-accent-500));
    cursor: pointer; }
  #popup.popup_basic .popup-set__text {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bt-space-10);
    min-width: 0;
    /* parent draws a pseudo-element checkbox at left:-21px + padding-left;
       we render a real checkbox in the flex row, so drop both. */
    padding-left: 0;
    background: transparent; }
  #popup.popup_basic .popup-set__text::before,
  #popup.popup_basic .popup-set__text::after {
    display: none; }
  #popup.popup_basic .popup-set__name {
    font-size: 1.5rem;
    font-weight: 600;
    /* Ingredient / non-stepper option names take the stepper colour key.
       Topping/supplement rows (.popup-set__option_stepper .popup-set__name)
       override this back to $pop-text below — they are the +/- button rows,
       deliberately styled differently, and stay unchanged. */
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum {
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-enum__option {
    margin: 0;
    list-style: none; }
  #popup.popup_basic .popup-enum__label {
    display: flex;
    align-items: center;
    gap: var(--bt-space-12);
    width: 100%;
    min-height: 4.8rem;
    padding: var(--bt-space-10) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    cursor: pointer; }
    #popup.popup_basic .popup-enum__label:hover {
      border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-enum__option:has(input:checked) .popup-enum__label {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft); }
  #popup.popup_basic .popup-enum__radio {
    flex: 0 0 auto;
    /* re-show the radio the parent hides (position:absolute; opacity:0) */
    position: static;
    opacity: 1;
    -webkit-appearance: auto;
    appearance: auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: var(--theme-button-background-color, var(--bt-accent-500));
    cursor: pointer; }
  #popup.popup_basic .popup-enum__text {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bt-space-10);
    /* neutralise the parent extended-mode button-pill treatment */
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.5rem;
    font-weight: 600;
    /* Enum option (variant) text follows the stepper colour key too. */
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum__radio:checked + .popup-enum__text,
  #popup.popup_basic .popup-enum__radio:disabled + .popup-enum__text {
    background: transparent;
    border: 0;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum__price,
  #popup.popup_basic .popup-set__name + [data-option-price],
  #popup.popup_basic [data-option-price] {
    font-weight: 700;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    white-space: nowrap; }
  #popup.popup_basic .popup-set__group-title {
    margin: var(--bt-space-12) 0 var(--bt-space-8);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper {
    margin: 0;
    list-style: none; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bt-space-12);
    min-height: 4.4rem;
    padding: var(--bt-space-10) 0;
    border-bottom: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border))); }
  #popup.popup_basic .popup-set__option_stepper:last-child .popup-set__line {
    border-bottom: 0; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
    background: transparent;
    padding: 0; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-set__priceline {
    font-size: 1.4rem;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__priceline .popup-set__price {
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper.is-free-topping .popup-set__price {
    text-decoration: line-through;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper.is-free-topping .popup-set__price::after {
    content: attr(checked-free-label);
    /* atomic inline: stops the parent's line-through from being drawn across
       the free label — a child's `text-decoration: none` can't remove an
       ancestor's decoration line, but an inline-block isn't crossed at all. */
    display: inline-block;
    margin-left: var(--bt-space-6);
    text-decoration: none;
    font-weight: 700;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    white-space: nowrap; }
  #popup.popup_basic .popup-set__price-breakdown {
    display: none; }
  #popup.popup_basic .popup-set__option_stepper.is-partial-free .popup-set__price {
    display: none; }
  #popup.popup_basic .popup-set__option_stepper.is-partial-free .popup-set__price-breakdown {
    display: inline; }
  #popup.popup_basic .popup-set__price-breakdown .popup-set__price-full {
    text-decoration: line-through;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__price-breakdown .popup-set__price-charged {
    margin-left: var(--bt-space-6);
    color: var(--bt-state-danger);
    font-weight: 700;
    white-space: nowrap; }
  #popup.popup_basic .free_topping .popup-set__price {
    visibility: visible; }
  #popup.popup_basic .free_topping .popup-set__price::before {
    content: none; }
  #popup.popup_basic .popup-topping-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--bt-space-8); }
  #popup.popup_basic .popup-set__option_stepper:not(.popup-set__option_active) .popup-topping-stepper__count,
  #popup.popup_basic .popup-topping-stepper__minus.is-hidden {
    display: none; }
  #popup.popup_basic .popup-topping-stepper__count {
    min-width: 1.6rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    /* The topping quantity number sits on the popup BACKGROUND (not inside a
       button), so it reads as plain text → product-text key, not the stepper
       key. Only the count; the +/- topping buttons keep their own colours. */
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-topping-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--bt-radius-pill);
    background: var(--bt-soft);
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
    text-decoration: none;
    transition: filter 0.12s ease, opacity 0.12s ease; }
    #popup.popup_basic .popup-topping-stepper__btn:hover {
      filter: brightness(0.95); }
  #popup.popup_basic .popup-topping-stepper__plus {
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__minus::before,
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__plus::before,
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__plus::after {
    background: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }
  #popup.popup_basic .popup-topping-stepper__plus.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed; }
  #popup.popup_basic .popup-buttons_basic {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bt-space-8);
    margin: 0;
    padding: var(--bt-space-16) var(--bt-space-28);
    border-top: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    position: static; }
  #popup.popup_basic .popup-buttons__controls {
    display: flex;
    align-items: center;
    gap: var(--bt-space-14); }
  #popup.popup_basic .popup__budget-hint {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    text-align: center; }
  #popup.popup_basic .popup__budget-hint[hidden] {
    display: none; }
  #popup.popup_basic .popup-buttons__button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed; }
  #popup.popup_basic .popup-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-pill);
    overflow: hidden;
    /* Soft fill so the bottom quantity stepper matches the topping stepper
       buttons ($pop-soft). Text/glyphs keep their own key ($pop-stepper). */
    background: var(--bt-soft); }
  #popup.popup_basic .popup-stepper__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4.4rem;
    text-decoration: none;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
    /* container is now $pop-soft, so darken slightly on hover (matches the
       topping stepper button hover) rather than filling with the same soft. */ }
    #popup.popup_basic .popup-stepper__button:hover {
      filter: brightness(0.95); }
  #popup.popup_basic .popup-stepper__field {
    width: 3.4rem;
    height: 4.4rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-stepper__minus,
  #popup.popup_basic .popup-stepper__plus {
    position: relative;
    width: 1.4rem;
    height: 1.4rem; }
    #popup.popup_basic .popup-stepper__minus::before,
    #popup.popup_basic .popup-stepper__plus::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 0.2rem;
      margin-top: -0.1rem;
      background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
      border-radius: 0.2rem; }
  #popup.popup_basic .popup-stepper__plus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.2rem;
    height: 100%;
    margin-left: -0.1rem;
    background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
    border-radius: 0.2rem; }
  #popup.popup_basic .popup-buttons__button {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* parent sets wrap → price drops to a clipped 2nd line */
    align-items: center;
    justify-content: space-between;
    gap: var(--bt-space-12);
    min-height: 4.8rem;
    padding: var(--bt-space-12) var(--bt-space-20);
    border-radius: var(--bt-radius-pill);
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0)));
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    transition: filter 0.12s ease;
    /* base bg already = button colour; darken slightly on hover (no separate
       "button hover" colour key exists, so reuse the same key + brightness) */ }
    #popup.popup_basic .popup-buttons__button:hover {
      filter: brightness(0.93); }
  #popup.popup_basic .popup-buttons__button-text,
  #popup.popup_basic .popup-buttons__button-price {
    position: static;
    float: none;
    width: auto;
    display: inline-block;
    white-space: nowrap; }
  #popup.popup_basic .popup-buttons__button-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis; }
  #popup.popup_basic .popup-buttons__button-price {
    flex: 0 0 auto; }
  #popup.popup_basic .popup-buttons__button-price::after {
    content: none; }
  @media screen and (max-width: 52.5em) {
    #popup.popup_basic {
      /* position:absolute (NOT fixed) — anchored to the .popup-holder-improved,
         so it slides off-screen WITH the holder on close (no ghost). */
      position: absolute;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 92vh;
      margin: 0;
      border-radius: var(--bt-radius-xl) var(--bt-radius-xl) 0 0;
      /* the whole sheet scrolls: image hero + body scroll together,
         footer pinned via sticky. */
      /* tighten so the full "Add to basket" label + price fit beside the
         stepper without ellipsis on narrow screens */ }
      #popup.popup_basic .popup__wrapper {
        height: auto;
        max-height: 92vh; }
      #popup.popup_basic #popup_form,
      #popup.popup_basic .popup__layout {
        height: auto;
        max-height: 92vh; }
      #popup.popup_basic .popup__layout {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
      #popup.popup_basic .popup__media {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 28vh;
        min-height: 18rem; }
      #popup.popup_basic .popup__body {
        display: block;
        overflow: visible; }
      #popup.popup_basic .popup__scroll {
        overflow: visible;
        padding: var(--bt-space-20) var(--bt-space-18) var(--bt-space-16); }
      #popup.popup_basic .popup-basic__close {
        top: var(--bt-space-12);
        left: var(--bt-space-12);
        right: auto; }
      #popup.popup_basic .popup-buttons_basic {
        position: sticky;
        bottom: 0;
        gap: var(--bt-space-10);
        padding: var(--bt-space-12) var(--bt-space-14);
        box-shadow: 0 -0.2rem 1.2rem rgba(0, 0, 0, 0.08); }
      #popup.popup_basic .popup-buttons__button {
        padding-left: var(--bt-space-14);
        padding-right: var(--bt-space-16);
        font-size: 1.5rem; }
      #popup.popup_basic .popup-stepper__button {
        width: 3.4rem; }
      #popup.popup_basic .popup-stepper__field {
        width: 2.6rem; } }

/* ----- LP-2286 (D-8c) — Deal builder / wizard ---------------------------- */
/* ==========================================================================
   BASIC TOUCH — DEAL BUILDER / WIZARD (LP-2286 / D-8c)
   ==========================================================================
   Single-page, side-panel deal builder (Pizzan model). Pairs with
   basic-touch/pages/deal_wizard.rhtml + widgets/bt_deal_wizard_script.rhtml.

   Layout:
     .bt-deal            single-page builder (slot list + header).
     .bt-deal__slots     vertical list; one .bt-deal-slot row per deal line.
     .bt-deal-panel      product selector: right side-panel (desktop) / full
                         overlay (mobile). CSS-toggled via .bt-deal-panel_open.
     .bt-deal-bar        always-visible running total + Add-to-basket bar.

   CLS: slot rows reserve their height up front; the panel is position:fixed and
   the bar is sticky-pinned, so neither opening the panel nor a total update
   reflows the slot list.

   COLOURS: wired to the SAME shop-configurable theme keys the LP-2285 popup
   (`$pop-*`) and the product card (`$bp-*`) use — product keys for surfaces /
   text / borders (the deal slots + picker cards are product-context surfaces),
   button keys for the primary CTAs (Choose / Add). Each falls back through the
   existing `--bt-*` token (which itself falls back to the palette), so a shop
   with NO custom colours renders IDENTICALLY to before — this only ADDS
   responsiveness to a shop's configured product / button colours. The picker
   cards reuse `.product__*` classes, so they resolve to the SAME product keys
   as the menu cards. No theme key exists for a tint or for a menu-surface, so
   soft tints keep the `--bt-*` tints and the overlay scrim / semantic danger
   stay literal (the popup leaves its equivalents alone too).
   ========================================================================== */
/* role → theme key (mirrors $pop-* / $bp-*) */
/* card / panel / bar surface */
/* filled-slot tint — no theme key for a tint */
/* index chip / customise tint — no theme key */
/* body / name text */
/* description / progress */
/* price / premium / total */
/* card / slot / bar border */
/* slot hover / filled border */
/* Choose / Add FILL bg + active borders (accent-500) */
/* accent TEXT (slot index/Choose label/Customise) — preserves accent-600 default, mirrors $dw-price */
/* Choose / Add text */
.bt-deal {
  max-width: 96rem;
  margin: 0 auto;
  padding: var(--bt-space-20, 2rem) var(--bt-space-16, 1.6rem) 12rem;
  color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
  .bt-deal__header {
    margin-bottom: var(--bt-space-20, 2rem); }
  .bt-deal__title {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15; }
  .bt-deal__description {
    margin: var(--bt-space-8, 0.8rem) 0 0;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.5rem; }
  .bt-deal__slots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-12, 1.2rem); }

/* ----- slot row ----------------------------------------------------------- */
.bt-deal-slot {
  /* the preloaded product source is hidden; only the row button shows */
  /* "Choose" by default, "Change" once filled */
  /* filled state: accent rail + tinted index */ }
  .bt-deal-slot__source {
    display: none; }
  .bt-deal-slot__open {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--bt-space-14, 1.4rem);
    padding: var(--bt-space-16, 1.6rem) var(--bt-space-18, 1.8rem);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-lg, 16px);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease; }
    .bt-deal-slot__open:hover {
      border-color: var(--theme-product-hover-border-color, var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))));
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
  .bt-deal-slot__index {
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bt-radius-pill, 999px);
    background: var(--bt-soft);
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-deep, var(--bt-accent-600))));
    font-weight: 800;
    font-size: 1.5rem; }
  .bt-deal-slot__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem; }
  .bt-deal-slot__label {
    font-weight: 700;
    font-size: 1.6rem; }
  .bt-deal-slot__selection {
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .bt-deal-slot__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--bt-space-8, 0.8rem);
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-deep, var(--bt-accent-600))));
    font-weight: 700;
    font-size: 1.5rem; }
  .bt-deal-slot__action-change {
    display: none; }
  .bt-deal-slot.bt-deal-slot_filled .bt-deal-slot__action-choose {
    display: none; }
  .bt-deal-slot.bt-deal-slot_filled .bt-deal-slot__action-change {
    display: inline; }
  .bt-deal-slot__chevron {
    width: 1rem;
    height: 1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); }
  .bt-deal-slot_filled .bt-deal-slot__open {
    border-color: var(--theme-product-hover-border-color, var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))));
    background: var(--bt-surface-warm, var(--bt-panel)); }
  .bt-deal-slot_filled .bt-deal-slot__index {
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }

/* ----- side panel --------------------------------------------------------- */
/* The panel is position:fixed; inset:0 (full viewport box) BUT its `top` is set
   INLINE by the JS (BasicDealWizard.dockPanelBelowHeader) to the header's live
   bottom edge — measured at runtime so it is correct on every shop AND every
   viewport (desktop / mobile / banners), with no hardcoded header/cat-nav
   guesswork. That inline `top` overrides the `inset:0` top, so the panel spans
   from the header bottom to the viewport bottom; the overlay (inset:0) + sheet
   (height:100%) fill that area while the header stays fully visible above it.
   z-index sits BELOW the header band (`.page__header` = z-index 900) so the
   header + its dropdowns always stay on top. Desktop = right dock ~40vw wide;
   mobile = full-width slide-up sheet (also docked below the header, not over it). */
.bt-deal-panel {
  position: fixed;
  inset: 0;
  /* `top` is overridden inline by JS to the header bottom */
  z-index: 850;
  /* below header (900) so the header stays on top */
  display: none;
  /* DESKTOP (>= breakpoint): the sheet is ~40% of the viewport width. The
     vertical offset (top) is owned by the JS runtime measurement above. */
  /* mobile: full-screen overlay sheet that slides up */ }
  .bt-deal-panel_open {
    display: block; }
  .bt-deal-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 9, 8, 0.45); }
  .bt-deal-panel__sheet {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 42rem;
    /* mobile/base fallback; desktop overrides to 40vw */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform .22s ease; }
  .bt-deal-panel_open .bt-deal-panel__sheet {
    transform: translateX(0); }
  @media screen and (min-width: 60em) {
    .bt-deal-panel__sheet {
      width: 40vw; } }
  .bt-deal-panel__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bt-space-12, 1.2rem);
    padding: var(--bt-space-16, 1.6rem) var(--bt-space-18, 1.8rem);
    border-bottom: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border))); }
  .bt-deal-panel__title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800; }
  .bt-deal-panel__close {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--bt-radius-pill, 999px);
    background: var(--bt-soft);
    cursor: pointer; }
  .bt-deal-panel__close-icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem; }
    .bt-deal-panel__close-icon::before, .bt-deal-panel__close-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
    .bt-deal-panel__close-icon::before {
      transform: rotate(45deg); }
    .bt-deal-panel__close-icon::after {
      transform: rotate(-45deg); }
  .bt-deal-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--bt-space-16, 1.6rem); }
  @media screen and (max-width: 52.5em) {
    .bt-deal-panel__sheet {
      width: 100%;
      transform: translateY(100%); }
    .bt-deal-panel_open .bt-deal-panel__sheet {
      transform: translateY(0); } }

/* lock body scroll while the panel is open */
body.bt-deal-locked {
  overflow: hidden; }

/* ----- product list inside the panel -------------------------------------- */
/* The picker products render the base deal_wizard_product_single / _many markup
   (image = .product__picture-container, text = .product__top, controls =
   .product__buttons / .product__sku-list). We restyle them — CSS-only, no markup
   change, so all DEAL handlers (DealWizard.createItem / .newItem on the form
   onsubmit), single-choice auto-skip, multi-SKU select and premium display stay
   intact — into the SAME one-per-line HORIZONTAL card as the mobile MENU card
   (_basic_product.scss @include bt-mobile): a 2-column grid, image fixed-width on
   the LEFT spanning the full card height, the text + controls stacked in the
   RIGHT column. This layout applies at ALL widths inside the panel (desktop 40vw
   AND mobile full-width) — there is NO vertical fallback. */
.bt-deal-panel {
  /* Force the whole card chain to the panel width. The base extended-mode
     product card has its own (higher-specificity) width sizing it to ~16.4rem,
     which collapsed the grid's `1fr` content column — override it explicitly in
     this isolated panel context. */
  /* Horizontal row card: image LEFT (fixed share, full card height), the
     text+controls column RIGHT. Mirrors the mobile-menu grid (image gets the
     larger share there; in the narrower panel a fixed image column reads
     cleaner). The deal forms emit the setter <script>s (display:none) +
     product_picture + product__top + product__bottom + product__buttons; the
     only in-flow items are the picture and the right-column blocks. */
  /* Image = left column, spanning every right-column row => full card height.
     height:100% fills the grid row (NOT `auto`, which collapses to the image's
     natural/aspect height and leaves a gap under it); min-height is the floor
     for very short cards. Override the menu card's fixed 26/30rem. */
  /* Right column: name + description + premium, then the add/select controls,
     stacked flush-left in column 2. min-width:0 lets long names ellipsise
     instead of widening the column. */
  /* deal premium supplement (data-product-premium-price), shown by _product.js */
  /* per-slot size/SKU select (deal_wizard_product_many) stays in the right col */
  /* Controls row: bottom of the right column, add/select on the right. */
  /* the redundant mobile-only price/button widgets the deal card emits are not
     used in this layout (premium shows via .product__price above). */
  /* snoozed / no-ordering greying preserved from the base product styles */ }
  .bt-deal-panel .category__products {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* every card fills the panel width */
    gap: var(--bt-space-12, 1.2rem);
    width: 100%; }
  .bt-deal-panel .category__products .product,
  .bt-deal-panel .product {
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    float: none;
    display: block; }
  .bt-deal-panel .category__products .product .product__wrapper,
  .bt-deal-panel .product__wrapper {
    width: 100% !important;
    max-width: 100%;
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md, 12px);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    overflow: hidden;
    /* clip the image to the card's left corners */ }
  .bt-deal-panel .product__form {
    display: grid;
    grid-template-columns: 11rem 1fr;
    /* image | content */
    align-items: stretch;
    width: 100%; }
  .bt-deal-panel .product__picture-container {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100% !important;
    min-height: 11rem;
    width: 100%;
    margin: 0;
    align-self: stretch; }
  .bt-deal-panel .product__picture,
  .bt-deal-panel .product__picture_placeholder {
    height: 100% !important;
    width: 100%;
    object-fit: cover; }
  .bt-deal-panel .product__top,
  .bt-deal-panel .product__bottom,
  .bt-deal-panel .product__buttons,
  .bt-deal-panel .product__sku-list {
    grid-column: 2;
    min-width: 0; }
  .bt-deal-panel .product__top {
    padding: var(--bt-space-12, 1.2rem) var(--bt-space-14, 1.4rem) 0; }
  .bt-deal-panel .product__bottom {
    padding: 0 var(--bt-space-14, 1.4rem); }
  .bt-deal-panel .product__name {
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)));
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25; }
  .bt-deal-panel .product__description {
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.3rem;
    margin-top: var(--bt-space-4, 0.4rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .bt-deal-panel .product__price[data-product-premium-price],
  .bt-deal-panel .product__mobile-price-value[data-product-premium-price] {
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-deep, var(--bt-accent-600))));
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: var(--bt-space-6, 0.6rem); }
  .bt-deal-panel .product__sku-list {
    padding: var(--bt-space-8, 0.8rem) var(--bt-space-14, 1.4rem) 0; }
  .bt-deal-panel .product__buttons {
    display: flex;
    gap: var(--bt-space-10, 1rem);
    align-items: center;
    justify-content: flex-end;
    padding: var(--bt-space-10, 1rem) var(--bt-space-14, 1.4rem) var(--bt-space-12, 1.2rem); }
  .bt-deal-panel .product__add,
  .bt-deal-panel .product__customise {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--bt-radius-pill, 999px);
    padding: var(--bt-space-10, 1rem) var(--bt-space-18, 1.8rem);
    font-weight: 700;
    font-size: 1.5rem;
    white-space: nowrap; }
  .bt-deal-panel .product__add {
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }
    .bt-deal-panel .product__add:disabled {
      opacity: .5;
      cursor: not-allowed; }
  .bt-deal-panel .product__customise {
    background: var(--bt-soft);
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-deep, var(--bt-accent-600))));
    text-decoration: none; }
  .bt-deal-panel .product__mobile-price,
  .bt-deal-panel .product__mobile-button {
    display: none; }
  .bt-deal-panel .product_greyed-out {
    opacity: .55; }

/* ----- running total + Add bar (net-new) ---------------------------------- */
.bt-deal-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  /* Cancel + summary sit together on the left; Add is pushed to the right
     (margin-auto on &__add) so the order reads: Cancel | total … Add. */
  gap: var(--bt-space-16, 1.6rem);
  padding: var(--bt-space-12, 1.2rem) var(--bt-space-20, 2rem);
  background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
  border-top: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
  /* Quit/abandon the deal builder — a plain TEXT control, deliberately NOT the
     filled accent pill the Add button uses, with a vertical separator between
     it and the price. Shown on mobile + desktop (it's just a flex child). */ }
  .bt-deal-bar__cancel {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    padding: var(--bt-space-8, 0.8rem) var(--bt-space-16, 1.6rem) var(--bt-space-8, 0.8rem) 0;
    border-inline-end: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    /* separator vs the price */
    transition: color .15s ease; }
    .bt-deal-bar__cancel:hover {
      color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
  .bt-deal-bar__summary {
    display: flex;
    flex-direction: column;
    line-height: 1.2; }
  .bt-deal-bar__filled {
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.3rem;
    font-weight: 600; }
  .bt-deal-bar__total {
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-deep, var(--bt-accent-600))));
    /* running total = headline price */
    font-size: 2rem;
    font-weight: 800; }
  .bt-deal-bar__add {
    margin-inline-start: auto;
    /* push Add to the right edge */
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--bt-radius-pill, 999px);
    padding: var(--bt-space-14, 1.4rem) var(--bt-space-28, 2.8rem);
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0)));
    font-weight: 800;
    font-size: 1.6rem;
    transition: opacity .15s ease; }
    .bt-deal-bar__add.is-disabled, .bt-deal-bar__add:disabled {
      opacity: .45;
      cursor: not-allowed; }

/* ----- half-&-half multiside (LP-2286) ------------------------------------ */
/* The deal-edition popup wraps each side in fieldset[data-side]; the basic-touch
   popup_product_set_multiside renders the side's toppings as the standard
   .popup-set grid (stepper rows come from popup_product_set_const). Each side is
   visually delineated so the customer sees the two halves clearly; the per-side
   min/max + double-topping budgets are enforced independently by the stepper JS
   in popup_item_improved (scope = the [data-side] ancestor). */
.popup_basic [data-side] {
  border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
  border-radius: var(--bt-radius-md, 12px);
  padding: var(--bt-space-12, 1.2rem);
  margin-bottom: var(--bt-space-12, 1.2rem); }
  .popup_basic [data-side] + [data-side] {
    margin-top: 0; }
.popup_basic .popup-row_multiside {
  margin: 0; }

/* ----- LP-2316 — Checkout upselling modal (OPC) -------------------------- */
/* ==========================================================================
   BASIC TOUCH — CHECKOUT UPSELLING MODAL (LP-2316)
   ==========================================================================
   Tag-driven checkout upselling (theme setting `checkout_upselling` +
   `checkout_upselling_N_products` menu tags). In the one-page checkout (OPC)
   it renders as a Vue `.popup-modal` holding
   `.checkout__upselling > .category_upselling` with the SAME reused `.product`
   markup the menu grid uses. That modal is teleported INSIDE `.one-page-checkout`.

   Parent touch skins this under `.one-page-checkout .checkout__upselling`
   (`_checkout_upselling.scss`) — flex-centred products, absolutely-positioned
   buttons, generic image sizing. We re-skin to the Basic Touch product-card
   language (card grid, brand type, accent CTA). Because the parent rules are
   scoped `.one-page-checkout .checkout__upselling …` (specificity 0,3,0), we
   MUST match that same prefix so our declarations win on source order (this
   partial compiles after the parent stack). OPC-only.

   COLOURS: reuse the SAME shop-configurable keys as the product card
   (`--theme-product-*` surfaces, `--theme-button-*` interactive) — NO new
   colour keys — each with the epic's nested-var() fallback. This shop's
   `--theme-button-background-color` is a brand red, so the CTA renders red;
   that is the configured accent, not a hard-coded colour.
   ========================================================================== */
/* Container chrome — only the modal that actually holds the upselling. The
   parent caps it at max-width:90rem; add Basic Touch padding + rounded corners
   so it reads as a soft card, not a full-bleed sheet. */
.one-page-checkout .popup-modal__content:has(.checkout__upselling) {
  /* Widen past the parent's 90rem cap (still 90vw-bounded) so three cards
     have room to breathe. */
  max-width: 104rem;
  border-radius: var(--bt-radius-lg, 16px);
  padding: var(--bt-space-24, 2.4rem); }
  @media screen and (max-width: 40em) {
    .one-page-checkout .popup-modal__content:has(.checkout__upselling) {
      border-radius: var(--bt-radius-md, 12px);
      padding: var(--bt-space-16, 1.6rem); } }

.one-page-checkout .checkout__upselling {
  /* Title and dismiss share the first row (vertically centred); the product
     grid spans the full width below. Title, `.popup-modal__buttons` and
     `.category__products` are all direct children of `.category_upselling`. */
  /* Header — brand heading, no rule/margins from the parent category style. */
  /* "No, thanks" dismiss — a Basic Touch secondary (bordered) pill, on the
     title's row, right aligned. Overrides the parent plain underlined link. */
  /* Suggestions — a real responsive card grid (3 / 2 / 1), replacing the
     parent flex-centre row. */
  /* Card — mirror the Basic Touch menu card (_basic_product.scss): full-bleed
     rounded-top image, then a padded content zone (name → price → CTA). The
     upsell DOM is flatter than the menu card (Vue checkout bundle: no <form>,
     no stepper/description/badges), so `padding:0` on the wrapper + per-item
     padding reproduces the same look, and `order` sequences the flat
     children (DOM order is img, price, name, buttons) into name-above-price
     like the menu card. */
  /* NB: no `overflow: hidden` — the image is inset by its own padding (never
     touches the rounded corners), and clipping here would crop the open
     size-select dropdown (`.list`), which must overflow the card. */
  /* Description — mirrors the menu card `.product__description`: 2-line
     clamp so uneven cards keep aligned rows. */
  /* Size selector (e.g. Fanta) — mirror the menu card nice-select
     (_basic_product.scss `.product__inline-sku`): full-width white control,
     chevron right, dropdown panel that overflows the card. The checkout
     `nice_select.vue` emits the SAME classes (.nice-select__container >
     .nice-select > .current + .list > .option), so the menu look transfers
     directly. It sits inside `.product__price` (which supplies side padding);
     needs its own top margin to clear the name/price above. */
  /* CTA in normal flow, pinned to the card bottom so uneven cards stay
     aligned (the parent absolutely-positions it). */ }
  .one-page-checkout .checkout__upselling .category_upselling {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title dismiss" "products products";
    align-items: center;
    column-gap: var(--bt-space-16, 1.6rem);
    row-gap: var(--bt-space-16, 1.6rem);
    margin: 0; }
  .one-page-checkout .checkout__upselling .category__header {
    grid-area: title;
    margin: 0;
    padding: 0; }
  .one-page-checkout .checkout__upselling .category__title {
    margin: 0; }
  .one-page-checkout .checkout__upselling .category__title-text {
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)));
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2; }
  .one-page-checkout .checkout__upselling .popup-modal__buttons {
    grid-area: dismiss;
    justify-content: flex-end;
    margin: 0; }
  .one-page-checkout .checkout__upselling .popup-modal__button_close {
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-pill, 999px);
    background: transparent;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease; }
    .one-page-checkout .checkout__upselling .popup-modal__button_close:hover {
      background: var(--bt-soft);
      color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)));
      text-decoration: none; }
  .one-page-checkout .checkout__upselling .category__products {
    grid-area: products;
    /* width:100% so the grid stretches to fill its area — as a nested grid
       item it otherwise sizes to its `1fr` columns' content (~163px each)
       and clusters left instead of filling the modal. Also neutralises the
       parent extended-mode `max-width:90rem; margin:0 auto`. */
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bt-space-16, 1.6rem);
    justify-content: initial;
    /* Grid items fill their column. Nested here (0,4,0) so it out-specifies
       the parent's per-breakpoint `.product { width: 33%/50% }` overrides
       (0,3,0) at every width, not just where source order happens to help. */ }
    @media screen and (max-width: 52.5em) {
      .one-page-checkout .checkout__upselling .category__products {
        grid-template-columns: repeat(2, 1fr); } }
    @media screen and (max-width: 40em) {
      .one-page-checkout .checkout__upselling .category__products {
        grid-template-columns: 1fr; } }
    .one-page-checkout .checkout__upselling .category__products .product {
      width: auto;
      margin: 0;
      float: none; }
  .one-page-checkout .checkout__upselling .product__wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-sm, 10px);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    box-sizing: border-box; }
  .one-page-checkout .checkout__upselling .product img {
    order: 0;
    display: block;
    width: 100%;
    height: 15rem;
    object-fit: contain;
    margin: 0;
    padding: var(--bt-space-14, 1.4rem) var(--bt-space-14, 1.4rem) 0;
    box-sizing: border-box; }
  .one-page-checkout .checkout__upselling .product__name {
    order: 1;
    margin: 0;
    padding: var(--bt-space-14, 1.4rem) var(--bt-space-14, 1.4rem) 0;
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)));
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25; }
  .one-page-checkout .checkout__upselling .product__price {
    order: 2;
    margin: 0;
    padding: var(--bt-space-4, 0.4rem) var(--bt-space-14, 1.4rem) 0;
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-text, var(--bt-ink-900))));
    font-weight: 700;
    font-size: 1.6rem; }
  .one-page-checkout .checkout__upselling .product__description {
    order: 3;
    margin: 0;
    padding: var(--bt-space-6, 0.6rem) var(--bt-space-14, 1.4rem) 0;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    font-size: 1.3rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .one-page-checkout .checkout__upselling .nice-select__container {
    display: block;
    width: 100%;
    margin-top: var(--bt-space-10, 1rem); }
  .one-page-checkout .checkout__upselling .nice-select {
    position: relative;
    /* anchor for the overflowing .list */
    float: none;
    clear: none;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 4.4rem;
    line-height: normal;
    margin: 0;
    padding: 0 3.4rem 0 1.4rem;
    background-color: var(--bt-paper-0, #ffffff);
    border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-sm, 10px);
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)));
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    /* Dropdown panel — full width, absolutely positioned so it overflows
       the card instead of being clipped; high z-index paints over siblings.
       Option colours are intentionally NOT overridden: the extended-mode
       `.option` styling (normal + paired hover text/background) is exactly
       what the menu uses, so leaving it untouched keeps the two identical.
       Overriding only the hover background here (as an earlier pass did)
       breaks the paired hover text colour → unreadable. */ }
    .one-page-checkout .checkout__upselling .nice-select:hover, .one-page-checkout .checkout__upselling .nice-select.open {
      border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
    .one-page-checkout .checkout__upselling .nice-select:after {
      right: 1.4rem;
      border-color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
    .one-page-checkout .checkout__upselling .nice-select .current {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
    .one-page-checkout .checkout__upselling .nice-select .list {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + .4rem);
      width: 100%;
      margin: 0;
      z-index: 50;
      max-height: 26rem;
      overflow-y: auto;
      background: var(--bt-paper-0, #ffffff);
      border: 1px solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
      border-radius: var(--bt-radius-sm, 10px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
  .one-page-checkout .checkout__upselling .product__buttons {
    order: 4;
    position: static;
    bottom: auto;
    width: auto;
    margin-top: auto;
    padding: var(--bt-space-14, 1.4rem); }
  .one-page-checkout .checkout__upselling .product__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4rem;
    padding: 0 1.8rem;
    border: 0;
    border-radius: var(--bt-radius-sm, 10px);
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0)));
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease; }
    .one-page-checkout .checkout__upselling .product__add:hover {
      filter: brightness(0.92); }
    .one-page-checkout .checkout__upselling .product__add:active {
      transform: scale(0.99); }