@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 header
   -------------------------------------------------------------------------- */
.basket__title {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif; }

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

/* Basket item
   -------------------------------------------------------------------------- */
.basket-item__title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

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

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

/* Basket deal title
   -------------------------------------------------------------------------- */
.basket-deal__title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

/* Basket deal item
   -------------------------------------------------------------------------- */
.basket-deal__item-title {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

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

/* Delivery method switcher
   -------------------------------------------------------------------------- */
.basket__delivery_radio {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

/* Basket footer
   -------------------------------------------------------------------------- */
.basket__charge-title,
.basket__charge-amount {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; }

.basket__total-title,
.basket__total-amount {
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif; }

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

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

.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; }
  .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; }

.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;
    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
      -------------------------------------------------------------------------- */
  /*  Delivery method switcher
      -------------------------------------------------------------------------- */
  /*  Basket in the header - fixes to display basket features
  -------------------------------------------------------------------------- */
  /*  Basket footer
      -------------------------------------------------------------------------- */
  /*  Basket order button
      -------------------------------------------------------------------------- */
  /*  Mobile basket button
      -------------------------------------------------------------------------- */
  /*  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 .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 .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 .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 .cyo-set__label, .extended-mode .popup-set__label {
    padding: 0; }
  .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 .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 .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 .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__basket-menu, .extended-mode .header__burger-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 .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 .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: flex-end;
    align-items: flex-start; }
  .extended-mode .content__main {
    width: calc(100% - 42rem);
    order: 2;
    flex-grow: initial; }
  .extended-mode .content_no-ordering .content__side {
    display: none; }
  .extended-mode .content_no-ordering .content__main {
    width: 100%; }
  @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;
    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: none;
    border-radius: var(--extended-theme-secondary-border-radius);
    /* COLORING basket */
    --basket: var(--theme-basket-color, #212121);
    --basket-bg: var(--theme-basket-background-color, #f1f1f1);
    /* COLORING basket header */
    --basket-header-bg: var(--theme-basket-header-background-color, #212121);
    --basket-header-text: var(--theme-basket-header-color, #fff);
    --basket-header-icon: var(--theme-basket-header-background-color, #212121);
    --basket-header-icon-bg: var(--theme-basket-header-color, #fff);
    --basket-header-icon-shadow: color-mix(in srgb, var(--theme-basket-header-color, #fff) 8%, transparent);
    --basket-header-close-bg: var(--theme-basket-header-color, #fff);
    --basket-header-close-bg-hover: var(--theme-basket-header-color, #fff);
    --basket-header-close-icon: var(--theme-basket-header-background-color, #212121);
    --basket-header-close-icon-hover: var(--theme-basket-header-background-color, #212121);
    --basket-header-title: var(--theme-basket-header-color, #fff);
    --basket-header-busy: var(--theme-basket-header-color, #fff);
    --basket-header-repeat: var(--theme-basket-header-color, #fff);
    --basket-header-repeat-hover: var(--theme-basket-header-color, #fff);
    /* COLORING basket empty */
    --basket-empty-text: var(--theme-basket-color, #212121);
    --basket-empty-bg: transparent;
    /* COLORING basket quantity */
    --basket-quantity: var(--theme-basket-color, #212121);
    --basket-quantity-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 95%, var(--theme-basket-color, #212121));
    --basket-quantity-border: var(--theme-basket-color, #212121);
    --basket-quantity-icon: var(--theme-basket-color, #212121);
    --basket-quantity-icon-bg: color-mix(in srgb, var(--theme-basket-color, #212121) 12%, transparent);
    --basket-quantity-icon-hover: var(--theme-basket-color, #212121);
    --basket-quantity-icon-bg-hover: color-mix(in srgb, var(--theme-basket-color, #212121) 24%, transparent);
    /* COLORING basket cust */
    --basket-cust-chevron: var(--theme-basket-color, #212121);
    --basket-cust-border: var(--theme-basket-color, #212121);
    --basket-cust-title: var(--theme-basket-color, #212121);
    --basket-cust-step: var(--theme-button-color, #fff);
    --basket-cust-step-bg: var(--theme-button-background-color, #212121);
    --basket-cust-step-label: color-mix(in srgb, var(--theme-basket-color, #212121) 90%, transparent);
    --basket-cust-step-value: var(--theme-basket-color, #212121);
    /* COLORING basket pill */
    --basket-pill: var(--theme-button-color, #fff);
    --basket-pill-bg: var(--theme-button-background-color, #212121);
    --basket-pill-border: var(--theme-button-background-color, #212121);
    /* COLORING basket addons */
    --basket-addons-border: var(--theme-basket-color, #212121);
    --basket-addons-summary: var(--theme-basket-color, #212121);
    --basket-addons-icon: var(--theme-button-color, #fff);
    --basket-addons-icon-bg: var(--theme-button-background-color, #212121);
    --basket-addons-total: var(--theme-basket-color, #212121);
    --basket-addons-chevron: var(--theme-basket-color, #212121);
    --basket-addons-item: color-mix(in srgb, var(--theme-basket-color, #212121) 90%, transparent);
    --basket-addons-item-icon: #67aa40;
    --basket-addons-item-icon-removed: #d9230b;
    --basket-addons-item-title: color-mix(in srgb, var(--theme-basket-color, #212121) 90%, transparent);
    --basket-addons-item-price: var(--theme-basket-color, #212121);
    --basket-addons-item-title-removed: #d9230b;
    /* COLORING basket footer */
    --basket-footer-bg: var(--theme-basket-background-color, #f1f1f1);
    /* COLORING basket delivery */
    --basket-delivery-label: var(--theme-basket-color, #212121);
    --basket-delivery-title: var(--theme-basket-color, #212121);
    --basket-delivery-color: var(--theme-button-color, #fff);
    --basket-delivery-border-color: var(--theme-button-background-color, #212121);
    --basket-delivery-background-color: color-mix(in srgb, var(--theme-button-background-color, #212121) 40%, transparent);
    --basket-delivery-checked-color: var(--theme-button-color, #fff);
    --basket-delivery-checked-background-color: var(--theme-button-background-color, #212121);
    /* COLORING basket dropdown */
    --basket-dropdown: var(--theme-basket-color, #212121);
    --basket-dropdown-bg: transparent;
    --basket-dropdown-border: var(--theme-basket-color, #212121);
    --basket-dropdown-chevron: var(--theme-basket-color, #212121);
    --basket-dropdown-list-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-dropdown-option: var(--theme-basket-color, #212121);
    --basket-dropdown-option-bg: transparent;
    --basket-dropdown-option-hover: var(--theme-button-hover-color, #fff);
    --basket-dropdown-option-bg-hover: var(--theme-button-hover-background-color, #b6b6b6);
    --basket-dropdown-option-selected: var(--theme-button-hover-color, #fff);
    --basket-dropdown-option-selected-bg: var(--theme-button-hover-background-color, #b6b6b6);
    /* COLORING basket summary */
    --basket-summary: var(--theme-basket-total-color, #212121);
    --basket-summary-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-charge: var(--theme-basket-total-color, #212121);
    --basket-total: var(--theme-basket-total-color, #212121);
    --basket-total-border: var(--theme-basket-total-color, #212121);
    /* COLORING basket coupon link */
    --basket-coupon-link: var(--theme-basket-color, #212121);
    --basket-coupon-link-hover: var(--theme-basket-color, #212121);
    --basket-coupon: var(--theme-basket-color, #212121);
    --basket-coupon-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-coupon-border: var(--theme-basket-color, #212121);
    --basket-coupon-focus-border: var(--theme-basket-color, #212121);
    --basket-coupon-focus-shadow: 0 0 4px 2px color-mix(in srgb, var(--theme-basket-color, #212121) 30%, transparent);
    --basket-coupon-validate: var(--theme-basket-color, #212121);
    /* COLORING basket errors and messages */
    --basket-error: var(--theme-basket-message-text-color, #212121);
    --basket-error-bg: var(--theme-basket-error-message-background-color, #f0705f);
    --basket-error-border: var(--theme-basket-error-message-background-color, #f0705f);
    /* COLORING basket order button */
    --basket-button: var(--theme-button-color, #fff);
    --basket-button-bg: var(--theme-button-background-color, #212121);
    --basket-button-shadow: 0 3px 10px color-mix(in srgb, var(--theme-button-background-color, #212121) 30%, transparent);
    --basket-button-hover: var(--theme-button-hover-color, #fff);
    --basket-button-bg-hover: var(--theme-button-hover-background-color, #b6b6b6);
    --basket-button-shadow-hover: 0 4px 14px color-mix(in srgb, var(--theme-button-hover-background-color, #b6b6b6) 40%, transparent);
    /* COLORING basket discounts */
    --basket-discount: var(--theme-basket-savings-color, #fff);
    --basket-discount-bg: var(--theme-basket-savings-background-color, #bbb);
    /* COLORING basket savings */
    --basket-savings: var(--theme-basket-savings-color, #fff);
    --basket-savings-bg: var(--theme-basket-savings-background-color, #bbb);
    /* COLORING basket item */
    --basket-items-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-item-bg: transparent;
    --basket-item-border: var(--theme-basket-color, #212121);
    --basket-item-link: var(--theme-basket-color, #212121);
    --basket-item-link-hover: var(--theme-basket-color, #212121);
    --basket-item-price: var(--theme-basket-color, #212121);
    --basket-item-free: var(--theme-button-color, #fff);
    --basket-item-free-bg: var(--theme-button-background-color, #212121);
    --basket-item-free-shadow: 0 2px 6px color-mix(in srgb, var(--theme-button-background-color, #212121) 28%, transparent);
    --basket-item-delete: var(--theme-basket-color, #212121);
    --basket-item-delete-bg: color-mix(in srgb, var(--theme-basket-color, #212121) 12%, transparent);
    --basket-item-delete-hover: var(--theme-basket-color, #212121);
    --basket-item-delete-bg-hover: color-mix(in srgb, var(--theme-basket-color, #212121) 24%, transparent);
    --basket-item-option: color-mix(in srgb, var(--theme-basket-color, #212121) 90%, transparent);
    --basket-item-option-price: #67aa40;
    --basket-item-option-removed: #d9230b;
    /* COLORING basket deal */
    --basket-deal-bg: var(--theme-basket-deal-background-color, #e0e0e0);
    --basket-deal-header: var(--theme-basket-deal-color, #212121);
    --basket-deal-header-bg: var(--theme-basket-deal-header-background-color, #ccc);
    --basket-deal-header-hover: var(--theme-basket-deal-color, #212121);
    --basket-deal-delete: var(--theme-basket-deal-color, #212121);
    --basket-deal-delete-bg: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 12%, transparent);
    --basket-deal-delete-hover: var(--theme-basket-deal-color, #212121);
    --basket-deal-delete-bg-hover: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 24%, transparent);
    /* COLORING basket deal toggle*/
    --basket-deal-toggle: var(--theme-basket-deal-color, #212121);
    --basket-deal-toggle-bg: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 12%, transparent);
    --basket-deal-toggle-hover: var(--theme-basket-deal-color, #212121);
    --basket-deal-toggle-bg-hover: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 24%, transparent);
    /* COLORING basket deal item */
    --basket-deal-items-bg: var(--theme-basket-deal-background-color, #e0e0e0);
    --basket-deal-item-border: var(--theme-basket-deal-color, #212121);
    --basket-deal-item-link: var(--theme-basket-deal-color, #212121);
    --basket-deal-item-link-hover: var(--theme-basket-deal-color, #212121);
    --basket-deal-item-option: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 90%, transparent);
    --basket-deal-item-option-removed: #d9230b;
    --basket-deal-item-option-price: #67aa40;
    /* COLORING basket tips */
    --basket-tip: var(--theme-basket-color, #212121);
    --basket-tip-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-tip-details: var(--theme-basket-color, #212121);
    --basket-tip-details-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 90%, transparent);
    --basket-tip-details-border: var(--theme-basket-color, #212121);
    /* Deal rows reuse the item price, stepper and delete variables but sit on the deal background */ }
    .extended-mode .basket .basket-deal {
      --basket-item-price: var(--theme-basket-deal-color, #212121);
      --basket-item-delete: var(--theme-basket-deal-color, #212121);
      --basket-item-delete-bg: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 12%, transparent);
      --basket-item-delete-hover: var(--theme-basket-deal-color, #212121);
      --basket-item-delete-bg-hover: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 24%, transparent);
      --basket-quantity: var(--theme-basket-deal-color, #212121);
      --basket-quantity-bg: color-mix(in srgb, var(--theme-basket-deal-background-color, #e0e0e0) 95%, var(--theme-basket-deal-color, #212121));
      --basket-quantity-border: var(--theme-basket-deal-color, #212121);
      --basket-quantity-icon: var(--theme-basket-deal-color, #212121);
      --basket-quantity-icon-bg: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 12%, transparent);
      --basket-quantity-icon-hover: var(--theme-basket-deal-color, #212121);
      --basket-quantity-icon-bg-hover: color-mix(in srgb, var(--theme-basket-deal-color, #212121) 24%, transparent); }
  .extended-mode .basket__header {
    border-radius: var(--extended-theme-secondary-border-radius) var(--extended-theme-secondary-border-radius) 0 0; }
  .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-title-color, #212121);
    color: var(--basket-header-text); }
  .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-link-color, #212121);
    text-decoration: underline;
    transition: all .3s ease;
    color: var(--basket-header-text); }
    .extended-mode .basket__repeat:hover {
      color: var(--theme-link-hover-color, #212121);
      text-decoration: none; }
  .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-text-color, #212121);
    background-color: transparent;
    color: var(--basket); }
  .extended-mode .basket.basket_empty .basket__content + .basket__footer {
    padding-top: 0; }
  .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-text-color, #212121); }
  .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: var(--theme-text-color, #212121); }
  .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-text-color, #212121); }
  .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-text-color, #212121);
    color: var(--basket-deal-item-link); }
  .extended-mode .basket-deal__item-link, .extended-mode .basket-deal__item-details {
    color: var(--basket-deal-item-link); }
  .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: var(--theme-text-color, #212121);
    color: var(--basket-deal-item-link); }
  .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-text-color, #212121);
    border-radius: var(--extended-theme-primary-border-radius); }
  .extended-mode .basket .nice-select {
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    color: var(--basket-dropdown);
    border-bottom-color: var(--basket-dropdown-border); }
    .extended-mode .basket .nice-select:after {
      width: 1.2rem;
      height: 1.2rem;
      margin-top: 0;
      right: 0; }
    .extended-mode .basket .nice-select > .current {
      color: var(--basket-dropdown); }
  .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__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; }
  .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; }
  .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;
      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-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-title-color, #212121); }
  .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-text-color, #212121);
    color: var(--basket); }
  .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-link-color, #212121);
    text-decoration: underline;
    transition: all .3s ease;
    color: var(--basket); }
    .extended-mode .basket__coupon-link:hover {
      color: var(--theme-link-hover-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-link-color, #212121);
    text-decoration: underline;
    transition: all .3s ease;
    color: var(--basket); }
    .extended-mode .basket__coupon-validate:hover {
      color: var(--theme-link-hover-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 {
    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__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 {
    background-color: var(--theme-basket-background-color, #f1f1f1);
    border-radius: var(--extended-theme-secondary-border-radius);
    /* COLORING basket upsellings */
    --basket-upsellings-border: var(--theme-basket-background-color, #f1f1f1);
    --basket-upsellings-shadow: var(--theme-basket-background-color, #f1f1f1);
    --basket-upsellings-title: var(--theme-basket-color, #212121);
    --basket-upsellings-subtitle: var(--theme-basket-color, #212121);
    --basket-upsellings-description: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-color: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-bg: transparent;
    --basket-upsellings-dropdown-border: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-chevron: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-list-bg: color-mix(in srgb, var(--theme-basket-background-color, #f1f1f1) 85%, var(--theme-basket-color, #212121));
    --basket-upsellings-dropdown-list-border: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-list-shadow: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-option: var(--theme-basket-color, #212121);
    --basket-upsellings-dropdown-option-bg: transparent;
    --basket-upsellings-dropdown-option-hover: var(--theme-button-color, #fff);
    --basket-upsellings-dropdown-option-bg-hover: var(--theme-button-background-color, #212121);
    --basket-upsellings-dropdown-option-selected: var(--theme-button-hover-color, #fff);
    --basket-upsellings-dropdown-option-selected-bg: var(--theme-button-hover-background-color, #b6b6b6);
    --basket-upsellings-button: var(--theme-button-color, #fff);
    --basket-upsellings-button-bg: var(--theme-button-background-color, #212121);
    --basket-upsellings-button-hover: var(--theme-button-hover-color, #fff);
    --basket-upsellings-button-bg-hover: var(--theme-button-hover-background-color, #b6b6b6);
    --basket-upsellings-button-shadow: var(--theme-button-background-color, #212121);
    --basket-upsellings-button-shadow-hover: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .basket-upselling__image {
      border-radius: var(--extended-theme-primary-border-radius); }
    .extended-mode .basket-upselling__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); }
    .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: 100%; }
      .extended-mode .basket-upselling__button:hover {
        color: var(--theme-button-hover-color, #fff);
        background-color: var(--theme-button-hover-background-color, #b6b6b6); }
    .extended-mode .basket-upselling .nice-select::after {
      border: none;
      height: 1.2rem;
      width: 1.2rem;
      margin-top: 0;
      right: 1rem; }
    @media screen and (max-width: 52.5em) {
      .extended-mode .basket-upselling.open .list {
        border-radius: var(--extended-theme-primary-border-radius) var(--extended-theme-primary-border-radius) 0 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__wrapper {
      gap: 0; }
    .extended-mode .content_menu-leftside .content__main {
      width: calc(100% - 40rem);
      padding: 0 1rem; }
    .extended-mode .content_menu-leftside.content_no-ordering .content__main {
      width: 100%; }
    .extended-mode .content_menu-leftside .content__side,
    .extended-mode .content_menu-leftside .content__side.floater-fixed {
      width: 40rem !important;
      order: 3; }
    .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);
      order: 1; }
      .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 5.8rem; }
      .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 {
    /* overflow hidden would cut the open time list and the room _basket.scss adds for it under the card */ }
    .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.rounded-view .content__side.basket-dropdown-open:has(.basket .nice-select.open) {
      overflow: visible; }
  .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.extended-mode.page_order .mobile-basket-button, .hybrid_app.extended-mode.page_order_step2 .mobile-basket-button, .hybrid_app.extended-mode.page_order_step3 .mobile-basket-button, .hybrid_app.extended-mode.page_order_step4 .mobile-basket-button, .hybrid_app.extended-mode.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); }

/* --------------------------------------------------------------------------
   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 ----------------------------------------------------
   _tokens + _breakpoints now live in touch/stylesheets/ (moved by LP-2404 so
   the standalone popup_basic.scss entry can consume them). The Sass importer
   resolves partials by NAME across the ancestor chain, so these two lines are
   unchanged and still resolve — from the parent theme now. */
/* ==========================================================================
   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-2562 — measured chrome heights (fallbacks + variable table) ------ */
/* ==========================================================================
   BASIC TOUCH — CHROME HEIGHTS (LP-2562)
   ==========================================================================
   The heights of the top chrome are measured in the browser, never summed
   by hand. The chrome-heights script in widgets/scripts_bottom_additional.rhtml
   observes each element below with ResizeObserver and writes its border-box
   height (px, rounded to 0.1) as an inline custom property on <html>. A
   hidden or absent element measures 0.

   Element                               Variable                  Consumers
   ------------------------------------- ------------------------- ---------------------------------------------
   `.page__header .header` (the band)    --bt-header-height        desktop cat-nav sticky top (_basic_header),
                                                                   desktop include band top (_basic_menu_filter)
   `.page__header` (band + mobile nav)   --bt-page-header-height   mobile burger panel `.off-canvas_left`
                                                                   top / height (_basic_header_mobile)
   visible category nav: the mobile      --bt-cat-nav-height       include band top (_basic_menu_filter)
   `.category-navigation_mobile`, else
   the desktop `.category-navigation`
   `.menu-filter:not(.menu-filter_free)` --bt-filter-band-height    the stack below only
   derived: chrome pinned at the top     --bt-pinned-stack-height  category anchor scroll-margin-top
   once scrolled                                                   (_basic_menu_filter)

   Pinned stack = cat-nav + band where `.page__header` scrolls away (mobile),
   header + cat-nav + band where it is sticky (desktop). The `.page__header`
   height follows the page type (with or without the mobile nav) and the
   burger state (the nav is hidden while the burger is open), so no CSS
   variant per page or per state is needed.

   The script only observes elements whose size never depends on these
   variables (they feed sticky `top` and off-canvas boxes), so a write cannot
   trigger another resize.

   The SCSS values below are the no-JS fallbacks, used only as the second
   argument of var(). They are the Basic Touch default measurements (390px
   and 1280px); keep them here and nowhere else.
   ========================================================================== */
/* Desktop header band: 5rem wrapper + 2 x 1rem padding. */
/* Mobile header band alone (5rem + 2 x .8rem): the `.page__header` height
   while the burger is open, the only time the off-canvas is on screen. */
/* Desktop category nav: link box + 1px divider. */
/* Mobile category nav, text layout. */
/* ----- 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 (LP-2562): no override here on purpose. The app
     webview shows the same header as the mobile browser: band displayed,
     scrolls away, cat-nav pinned by FixedTopbar, floating basket pill.
     The burger follows the back-office checkbox `app_show_burger`
     ("Show burger button on mobile application"): checked, the header
     widget adds `header__burger-menu--app-visible` and the base
     `_hybrid_app.scss` shows `.burger-menu`; unchecked, it hides
     `.burger-menu` but keeps the `.header__burger-menu` box, so FixedTopbar's
     `$j('.header__burger-menu').is(':visible')` mobile check still holds.
     Never hide or collapse `.header` / `.header__burger-menu` with
     `display: none` or inherited `visibility: hidden`: the first breaks
     the cat-nav pin, the second hid the basket pill in the app.
     The kept burger box is empty but still takes the wrapper's flex gap,
     which pushed the logo to 24px; a negative end margin of one gap
     cancels it while the box stays in the DOM for that check. */
    /* =====================================================================
       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;
    /* measured, see _basic_chrome_heights.scss */
    top: var(--bt-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)); }
  @media screen and (max-width: 52.5em) {
    .extended-mode.hybrid_app .header__burger-menu:not(.header__burger-menu--app-visible) {
      margin-inline-end: calc(-1 * var(--bt-space-12)); } }
  .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-page-header-height` = the measured `.page__header` height
       (see _basic_chrome_heights.scss). It already follows the page type
       (with or without the mobile cat-nav) and the burger state (the
       cat-nav is hidden while the burger is open, below).

       The basket (`#sidebar-ofc.off-canvas_right`) is not placed here: it
       covers the whole screen, see _basic_basket_drawer.scss.
    */
  /* 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 .off-canvas_left {
      width: 100%;
      left: -100%;
      top: var(--bt-page-header-height, 6.6rem);
      height: calc(100% - var(--bt-page-header-height, 6.6rem)); }
    .extended-mode .off-canvas {
      width: 100%;
      max-width: 100%; } }
  @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 .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. The accent
   tint leads with the link (foreground) colour so it stays legible on
   both the white desktop dropdown and the dark mobile burger surface
   (LP-2360 item 1 — was the basket-chip badge BACKGROUND colour, which
   could be a light value that vanished as a foreground).

   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. The border
       keeps the mixin default instead of the header dropdown border key
       (LP-2561): this body is header chrome, so neither dropdown key
       reaches it. Same pairing in _basic_loyalty.scss. */ }
  .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. */
      /* LP-2360 item 1: base the tile wash on a text-safe FOREGROUND
         accent (link colour), NOT the basket-chip badge BACKGROUND
         colour — a light badge colour produced an invisible tile +
         glyph on the white dropdown / dark burger surface. */
      background-color: color-mix(in srgb, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))) 14%, transparent);
      position: relative; }
      .extended-mode .shop-info__title-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 2rem;
        height: 2rem;
        /* LP-2360 item 1: surface-safe foreground — see tile note. */
        background-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. */
      /* LP-2360 item 1: base the tile wash on a text-safe FOREGROUND
         accent (link colour), NOT the basket-chip badge BACKGROUND
         colour — a light badge colour produced an invisible tile +
         glyph on the white dropdown / dark burger surface. */
      background-color: color-mix(in srgb, var(--theme-link-color, var(--theme-button-background-color, var(--bt-accent-500, #f97316))) 14%, transparent);
      position: relative; }
      .extended-mode .shop-info__feature-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.8rem;
        height: 1.8rem;
        /* LP-2360 item 1: surface-safe foreground — see tile note. */
        background-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 {
      /* LP-2360 item 1: link (foreground) colour first — not the
         basket-chip badge background — so the number stays legible. */
      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;
        /* The "Call restaurant" CTA is a filled button, so it keeps
           the basket-chip badge BACKGROUND colour (paired with
           --theme-header-basket-chip-badge-text-color for contrast).
           This is the reverse of the tile washes / phone link above,
           which need a FOREGROUND accent — see the tile note. */
        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);
    border-color: rgba(0, 0, 0, 0.12);
    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). Like shop_info,
     neither header dropdown key reaches this body: the border keeps
     the bt-dropdown-edge default (LP-2561). */ }
  .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);
    border-color: rgba(0, 0, 0, 0.12);
    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-header-height)` (z 899, see
   _basic_header.scss); this bar pins at header + cat-nav on desktop and at
   the cat-nav height on mobile. All three heights are measured, see
   _basic_chrome_heights.scss. 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.
   ========================================================================== */
/* 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; }

/* Native anchor jumps (`/menu#category_x` on load, links outside the nav
   script) land below the pinned chrome, like the nav click, which measures
   the same stack in _one_page_menu.js and scrolls with explicit coordinates. */
.category__subcategory[id^=category_] {
  scroll-margin-top: var(--bt-pinned-stack-height, calc(7rem + 5.9rem)); }
  @media screen and (max-width: 52.5em) {
    .category__subcategory[id^=category_] {
      scroll-margin-top: var(--bt-pinned-stack-height, 5rem); } }

/* 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-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-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 - Product card    (.product_inline-simple, every non-deal product)
       LP-2566 option C2. Mobile: photo left at full card height, body right
       (name, 2-line description, attribute line, price + round "+").
       Desktop: photo on top, name + price row, description, attribute line,
       full-width ADD. The add slot becomes the in-place stepper once the
       product is in the basket (_basic_product_stepper.js toggles
       product_in-basket / product_qty-many / product_stepper-open on the
       card, plus product_size-label on an open multi-size card); on a
       customizable product its "+" opens the popup.

     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. In the
       basket it shows the Type 1 stepper (LP-2566).

     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
     --theme-deal-{title,text,price,background,border,hover-border}-color (LP-2360)
     --theme-deal-image-placeholder-background-color                   (LP-2360)
     --theme-deal-placeholder-title-color                              (LP-2360)
       -> deal-card family; each falls back to its product-card equivalent or
          the deal element's prior value, so an unset key is zero-change.

   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 is a form control: background and text follow the
   input pair (ext_input_background_color / ext_input_text_color), white and
   the product title colour when unset. LP-2561 replaced the hard white of
   review revision #7: the select text is keyed, so a fixed white surface made
   it invisible on a palette with light product text (electric_twilight). */
/* 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. */
/* Deal-card colour family (LP-2360 item 2). Menu-page deal cards render as a
   banner image on top + name / price / description below (no card chrome), and
   conflicted with the page background (esp. dark themes) — the reported bug.
   Own keys so a shop can colour the deal card independently of product cards;
   each falls back to its product-card equivalent (or the deal's CURRENT value)
   via nested var() so an unset key leaves existing shops unchanged. The keys
   are guarded in basic_touch_layout_vars.rhtml so they are truly unset (not
   empty), keeping these fallback chains intact. */
/* Surface defaults to the deal card's CURRENT look (transparent) so unset =
   zero change; a shop opts into a carded look by setting the background key.
   Deal cards are free-standing (banner image + painted text), so there is
   deliberately no border/ring — LP-2360 dropped the deal border keys. */
/* Placeholder background = the banner letterbox gutter AND the no-image band.
   Leads with the new deal key, then the existing per-card-type deal-image key,
   then each element's prior fallback tail (soft neutral for the letterbox,
   accent for the no-image band so the white placeholder title stays readable). */
.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. */
  /* Name: shared by every non-deal card. */
  /* Clamp description to a fixed 2 lines across ALL cards so rows align. */
  /* ----------------------------------------------------------------------
     CARD BODY (LP-2566, option C2). product.rhtml renders the body itself:
       .product__head (name + favourites heart), .product__price,
       .product__description (wrapped in .product__description-wrap by the JS
       when the clamp truncates), .product__attrs, .product__inline-sku
       (simple multi-SKU only), .product__action (add button + stepper pill).
     One grid, two area maps: desktop puts the price beside the name and the
     action full width at the bottom; mobile (below) puts the price beside
     the action on the last row. Vertical spacing is item margin, not
     row-gap, so an absent item (no SKU list, empty attribute line) leaves no
     gap. The last row takes the spare height so the action sits at the
     bottom of a stretched desktop card.
     ---------------------------------------------------------------------- */
  /* Selected size above the price: mobile open pill only (see the mobile
     action block). Desktop keeps the dropdown on its own row. */
  /* ----------------------------------------------------------------------
     MOBILE CARD (LP-2566, canvas board C2). Photo LEFT at full card height,
     edge to edge (42 %), body RIGHT. The card height comes from the body:
     the photo is absolutely positioned inside its cell, so its natural size
     never sizes the row. At 390 px on shop 1396 a card is 145px with an
     attribute line and 123px without (LP-2566).

     The parent touch/_product.scss `.product_improved` rules at <=52.5em
     float the image right, hide .product__price / .product__sku-list and set
     `.product__picture-container ~ * { overflow: hidden }`; the rules below
     run later at >= specificity and re-assert the grid.

     The card keeps overflow visible (the SKU list and the description popover
     escape it), so the photo cell clips itself to the card's left corners.
     Deal cards (.product_deal-banner) keep their own layout.
     ---------------------------------------------------------------------- */
  /* 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. */
  /* Attribute line (LP-2566): prep time, calories, then the dietary pictos
     right-aligned. Every item is emitted only when it has data
     (if_preparation_time / if_calories_value / product_top_pictos), so the
     line is display:none by default and revealed by a standalone :has() when
     it holds one. A product without attributes gets a shorter card. (Do NOT
     use :not(:has()) - this Ruby Sass strips the :has() argument out of
     :not(), collapsing the selector to an always-on rule; themes.md.) */
  /* The pictos take what the meta cells leave and never wrap: the group is
     clipped, and _basic_product_stepper.js (BasicCardPictos) hides the pictos
     that do not fit whole behind a "+N" chip (4+ allergens on a 390 px card). */
  /* Icon-font pictos are 2rem in the base theme; keep them on the 12px line. */
  /* Meta cells (product_card_meta): collapsed unless a cell is present. */
  /* Prep time first (canvas order), with its glyph; calories without icon. */
  /* ⏱ */
  /* Safety: if a calories cell is emitted but its JS-filled value is still empty
     (e.g. selected size has none), hide the cell. 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 CHIP (review revision #12). The menu product card no
     longer renders it (LP-2566: the quantity reads in the action slot
     instead, see ACTION SLOT); this pill look stays for the other
     product_counter nodes Basic Touch inherits (deal wizard products).
     ProductCounter.init() fills `<span.product__counter data-basket-counter>`
     and toggles `.product_with-counter`; hidden until the JS sets a count.
     ---------------------------------------------------------------------- */
  /* 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. */
  /* Mobile action (canvas board F + LP-2566 requirement change): the round
     "+" adds one and opens the pill in place; 3 s after the last tap the pill
     folds back to a round button reading the quantity, which reopens it. */
  /* ----------------------------------------------------------------------
     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__body,
  .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; }
  .extended-mode .product_basic .product__name {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    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__description {
    margin: 0;
    text-align: left;
    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_inline-simple .product__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "name   price" "desc   desc" "attrs  attrs" "sku    sku" "action action";
    column-gap: var(--bt-space-10, 1rem);
    align-items: start;
    min-width: 0;
    padding: var(--bt-space-12, 1.2rem) var(--bt-space-14, 1.4rem) var(--bt-space-14, 1.4rem);
    text-align: left; }
  .extended-mode .product_inline-simple .product__head {
    grid-area: name;
    display: flex;
    align-items: flex-start;
    gap: var(--bt-space-6, 0.6rem);
    min-width: 0; }
  .extended-mode .product_inline-simple .product__body > .product__price {
    grid-area: price;
    display: block;
    float: none;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--theme-product-price-color, var(--theme-button-background-color, var(--bt-accent-600, #ea580c)));
    white-space: nowrap;
    text-align: right; }
  .extended-mode .product_inline-simple .product__body > .product__description,
  .extended-mode .product_inline-simple .product__description-wrap {
    grid-area: desc;
    margin-top: var(--bt-space-6, 0.6rem); }
  .extended-mode .product_inline-simple .product__attrs {
    grid-area: attrs; }
  .extended-mode .product_inline-simple .product__inline-sku {
    grid-area: sku;
    margin-top: var(--bt-space-10, 1rem); }
  .extended-mode .product_inline-simple .product__action {
    grid-area: action;
    align-self: end;
    margin-top: var(--bt-space-12, 1.2rem);
    position: relative;
    z-index: 2;
    /* above the whole-card click (z-index 1) */ }
  .extended-mode .product_inline-simple .product__size-label {
    display: none; }
  @media screen and (max-width: 40em) {
    .extended-mode .product.product_basic.product_inline-simple {
      width: 100%;
      max-width: 100%;
      margin: 0;
      box-sizing: border-box;
      position: relative;
      /* positioning context for the card-click */
      /* Bottom row = price | SKU dropdown (simple multi-SKU only) | action, so
         a size dropdown does not add a row to the card. */
      /* Re-show what the parent mobile rules hid. */ }
      .extended-mode .product.product_basic.product_inline-simple .product__wrapper {
        flex-direction: column;
        padding: 0;
        position: relative;
        border-radius: 14px; }
      .extended-mode .product.product_basic.product_inline-simple .product__form {
        display: grid;
        grid-template-columns: 42% minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        max-width: 100%; }
      .extended-mode .product.product_basic.product_inline-simple.product_universal-image .product__picture-container {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        margin: 0;
        float: none;
        align-self: stretch;
        /* Card radius (14px) minus its 1px border, left corners only. */
        border-radius: 13px 0 0 13px; }
      .extended-mode .product.product_basic.product_inline-simple.product_universal-image .product__picture, .extended-mode .product.product_basic.product_inline-simple.product_universal-image .product__picture_placeholder {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        /* The parent improved-layout centres the image with
           translate(-50%, -50%) at <=52.5em; inset:0 already places it. */
        transform: none; }
      .extended-mode .product.product_basic.product_inline-simple .product__body {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "name   name   name" "desc   desc   desc" "attrs  attrs  attrs" "price  sku    action";
        column-gap: .8rem;
        padding: 1rem 1rem 1rem 1.2rem;
        overflow: visible; }
      .extended-mode .product.product_basic.product_inline-simple .product__name {
        font-size: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .extended-mode .product.product_basic.product_inline-simple .product__body > .product__description,
      .extended-mode .product.product_basic.product_inline-simple .product__description-wrap {
        margin-top: .2rem; }
      .extended-mode .product.product_basic.product_inline-simple .product__body > .product__price {
        align-self: end;
        font-size: 1.5rem;
        line-height: 3.8rem;
        /* vertically centred on the 38px action */
        text-align: left; }
      .extended-mode .product.product_basic.product_inline-simple .product__inline-sku {
        align-self: end;
        margin-top: .6rem;
        min-width: 0; }
        .extended-mode .product.product_basic.product_inline-simple .product__inline-sku .nice-select {
          height: 3.8rem;
          padding: 0 2.6rem 0 1rem;
          font-size: 1.3rem; }
          .extended-mode .product.product_basic.product_inline-simple .product__inline-sku .nice-select:after {
            right: 1rem; }
          .extended-mode .product.product_basic.product_inline-simple .product__inline-sku .nice-select .list {
            left: auto;
            right: 0;
            width: max-content;
            min-width: 100%; }
        .extended-mode .product.product_basic.product_inline-simple .product__inline-sku select.product__sku-select {
          height: 3.8rem;
          padding: 0 1rem; }
      .extended-mode .product.product_basic.product_inline-simple .product__action {
        align-self: end;
        margin-top: .6rem; }
      .extended-mode .product.product_basic.product_inline-simple .product__price {
        display: block; }
      .extended-mode .product.product_basic.product_inline-simple .product__sku-list {
        display: block; }
      .extended-mode .product.product_basic.product_inline-simple .product__mobile-price,
      .extended-mode .product.product_basic.product_inline-simple .product__mobile-button {
        display: none; } }
  .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;
    /* Card surface tinted toward the chip text (LP-2561), not a fixed beige. */
    background: color-mix(in srgb, var(--theme-product-background-color, var(--bt-surface, #ffffff)) 92%, var(--theme-product-title-color, var(--bt-text, #15110f)));
    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__attrs {
    display: none;
    align-items: center;
    gap: var(--bt-space-6, 0.6rem) var(--bt-space-10, 1rem);
    margin-top: var(--bt-space-6, 0.6rem);
    min-width: 0;
    color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3; }
  .extended-mode .product_basic .product__attrs:has(.product__meta-item),
  .extended-mode .product_basic .product__attrs:has(.product-picto) {
    display: flex; }
  .extended-mode .product_basic .product__attrs .product__meta {
    flex: 0 0 auto; }
  .extended-mode .product_basic .product__attrs .product-pictos {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    width: auto;
    min-width: 0;
    overflow: hidden;
    margin: 0 0 0 auto;
    float: none;
    clear: none; }
  .extended-mode .product_basic .product__attrs .product-picto {
    flex: 0 0 auto;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1; }
  .extended-mode .product_basic .product__attrs .product-picto_hidden {
    display: none; }
  .extended-mode .product_basic .product__attrs .product-pictos__more {
    flex: 0 0 auto;
    color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap; }
  .extended-mode .product_basic .product__meta {
    display: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bt-space-10, 1rem);
    margin: 0;
    min-width: 0; }
  .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;
    white-space: nowrap; }
    .extended-mode .product_basic .product__meta-item:empty {
      display: none; }
  .extended-mode .product_basic .product__meta-prep {
    order: -1; }
  .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 {
    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 {
    /* The description takes the full body width. 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__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 {
    /* Whole-card click (review revision #9): adds one (inline-simple) or opens
       the popup (customizable). Sits BELOW the action (z-index 1 vs 2) so the
       add button, the stepper and the trash keep their own taps and only
       empty-area taps fall through. The name/price/image have no interactive
       children so a tap there hits this 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.
       ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------
       ACTION SLOT (LP-2566, canvas boards C1/C2 desktop + F).
       Desktop / tablet: full-width ADD. Once a product is in
       the basket (.product_in-basket, set by _basic_product_stepper.js) a
       full-width stepper of the same height replaces it, open as long as
       the line exists. Mobile (further down): round "+" of 38px; in the
       basket, a 100 x 36px pill while .product_stepper-open, otherwise a
       38px round button reading the quantity (.product__qty-btn).
       Colours: ADD / "+" = ext_button_* ($bp-accent / $bp-on-accent). The
       stepper FILL is ext_product_stepper_color ($bp-stepper) and its glyphs
       take the product surface colour: the stepper key was the glyph colour
       on the card before LP-2566, picked per palette to contrast with the
       product surface, so swapping the two keeps the contrast in every preset.
       ------------------------------------------------------------------ */
    /* Trash at quantity 1, minus above (the JS sets product_qty-many). */
    /* Folded mobile pill only (shown in the mobile block below). Same fill
       and glyph colours as the pill it opens. */ }
    .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: var(--theme-input-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-input-text-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-input-text-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 pairs with the input background; without an
             input text key it keeps the quantity-stepper key, then the
             product-title colour (its prior defaults). */
          color: var(--theme-input-text-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: var(--theme-input-background-color, #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: var(--theme-input-background-color, #ffffff);
        color: var(--theme-input-text-color, var(--theme-product-title-color, var(--bt-text, #15110f))); }
    .extended-mode .product_inline-simple .product__action {
      display: flex;
      min-width: 0; }
    .extended-mode .product_inline-simple .product__add_inline {
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 4rem;
      width: 100%;
      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: inherit;
      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_inline-simple .product__add-label {
      overflow: hidden;
      text-overflow: ellipsis; }
    .extended-mode .product_inline-simple .product__stepper {
      display: none;
      flex: 1 1 auto;
      align-items: stretch;
      justify-content: space-between;
      min-height: 4rem;
      border-radius: 8px;
      background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, #15110f)));
      color: var(--theme-product-background-color, var(--bt-surface, #ffffff));
      overflow: hidden; }
    .extended-mode .product_inline-simple .product__stepper-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 4.4rem;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background .12s ease; }
      .extended-mode .product_inline-simple .product__stepper-btn:hover {
        background: rgba(127, 127, 127, 0.22); }
    .extended-mode .product_inline-simple .product__stepper-value {
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
      font-size: 1.5rem;
      font-weight: 700; }
    .extended-mode .product_inline-simple .product__stepper-trash {
      display: block; }
    .extended-mode .product_inline-simple .product__stepper-minus {
      display: none; }
    .extended-mode .product_inline-simple .product__qty-btn {
      display: none;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 3.8rem;
      height: 3.8rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, #15110f)));
      color: var(--theme-product-background-color, var(--bt-surface, #ffffff));
      font: inherit;
      font-size: 1.6rem;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: filter .15s ease, transform .1s ease; }
      .extended-mode .product_inline-simple .product__qty-btn:hover {
        filter: brightness(0.92); }
      .extended-mode .product_inline-simple .product__qty-btn:active {
        transform: scale(0.96); }
  .extended-mode .product_inline-simple.product_qty-many .product__stepper-trash {
    display: none; }
  .extended-mode .product_inline-simple.product_qty-many .product__stepper-minus {
    display: inline; }
  .extended-mode .product_inline-simple.product_in-basket .product__add_inline {
    display: none; }
  .extended-mode .product_inline-simple.product_in-basket .product__stepper {
    display: flex; }
  @media screen and (max-width: 40em) {
    .extended-mode {
      /* The slot keeps the 38px of the round buttons while the 36px pill is
         open, so opening or folding never moves the card height. */
      /* The ADD label stays in the DOM for screen readers. */
      /* Open pill on a multi-size card (requirement change 3, canvas O1). The
         dropdown leaves the bottom row (still in the DOM: the form's data-sku
         drives the slot), the pill spans its column and the action column, and
         the selected size sits as an 11px label above the price. The price
         box keeps the 38px of the folded row, so the card height is the same
         in both states. Folded (no product_size-label): price, full dropdown,
         quantity button. */ }
      .extended-mode .product_inline-simple .product__action {
        justify-content: flex-end;
        align-items: center;
        min-height: 3.8rem; }
      .extended-mode .product_inline-simple .product__add_inline {
        flex: 0 0 auto;
        width: 3.8rem;
        height: 3.8rem;
        min-height: 0;
        padding: 0;
        border-radius: 50%; }
        .extended-mode .product_inline-simple .product__add_inline::before {
          content: "+";
          font-size: 2.4rem;
          font-weight: 800;
          line-height: 1; }
      .extended-mode .product_inline-simple .product__add-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0; }
      .extended-mode .product_inline-simple .product__stepper {
        flex: 0 0 auto;
        width: 10rem;
        height: 3.6rem;
        min-height: 0;
        border-radius: 999px; }
      .extended-mode .product_inline-simple .product__stepper-btn {
        width: 3.4rem;
        font-size: 1.8rem; }
      .extended-mode .product_inline-simple .product__stepper-trash {
        width: 1.6rem;
        height: 1.6rem; }
      .extended-mode .product_inline-simple.product_in-basket .product__qty-btn {
        display: inline-flex; }
      .extended-mode .product_inline-simple.product_in-basket .product__stepper {
        display: none; }
      .extended-mode .product_inline-simple.product_in-basket.product_stepper-open .product__qty-btn {
        display: none; }
      .extended-mode .product_inline-simple.product_in-basket.product_stepper-open .product__stepper {
        display: inline-flex; }
      .extended-mode .product.product_basic.product_inline-simple.product_in-basket.product_size-label .product__inline-sku {
        display: none; }
      .extended-mode .product.product_basic.product_inline-simple.product_in-basket.product_size-label .product__action {
        grid-column: 2 / -1; }
      .extended-mode .product.product_basic.product_inline-simple.product_in-basket.product_size-label .product__stepper {
        flex: 1 1 auto;
        width: auto; }
      .extended-mode .product.product_basic.product_inline-simple.product_in-basket.product_size-label .product__size-label {
        display: block;
        grid-area: price;
        align-self: end;
        max-width: 8rem;
        margin-bottom: 2rem;
        color: var(--theme-product-text-color, var(--bt-text-muted, #746b63));
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.4rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .extended-mode .product.product_basic.product_inline-simple.product_in-basket.product_size-label .product__body > .product__price {
        line-height: 1.8rem;
        padding-top: 1.8rem;
        padding-bottom: .2rem; } }
  .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;
      /* LP-2360 item 2: only the card SURFACE is themable — deal cards are
         free-standing (banner image + painted text), so there is no border/ring
         (the deal border keys were dropped). Surface defaults to transparent so
         an unset shop is unchanged; a shop opts into a carded deal by setting
         ext_deal_background_color. Radius is invisible on a transparent surface
         and rounds the card once a background is set. */
      background: var(--theme-deal-background-color, transparent);
      /* Strip the shared card shell's `border: 1px solid $bp-border` (set on
         `.product_basic .product__wrapper`) — a deal is free-standing, not a
         bordered box, so it must draw NO product border at rest OR on hover.
         Without this the deal inherits ext_product_border_color and its red
         hover. Same specificity as the shell rule, but declared later so it
         wins for every deal variant (monoblock / universal-image / improved). */
      border: 0;
      border-radius: var(--bt-radius-lg, 16px);
      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. LP-2360 item 2: leads with the
         new deal placeholder key, then the prior deal-image key. */
      background: var(--theme-deal-image-placeholder-background-color, 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-deal-image-placeholder-background-color, 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-deal-placeholder-title-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-deal-title-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-deal-title-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-deal-price-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-deal-text-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;
        /* Cancels BOTH the parent card-lift drop-shadow and the deal ring
           (now a box-shadow, LP-2360 item 2) — a monoblock deal must not
           highlight on body hover, only its image lifts (rule below). */
        box-shadow: none; }
      .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 ------------------------------
   Moved to base touch by LP-2404 and shipped as the standalone popup_basic.css
   entry, linked from layout_css.rhtml when the basic_popup setting is on
   (locked true for Basic Touch in design-locks.json). Do NOT re-import it here:
   it would emit the popup CSS twice on every Basic Touch shop. */
/* ----- 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 */
/* progress / secondary text */
/* deal description — own key (LP-2360 item 3), separate from the popup description; falls back to muted so unset = no change */
/* wizard titles — own key (LP-2360 follow-up), separate from ext_product_title_color; falls back to $dw-text so unset = no change */
/* 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;
    color: var(--theme-deal-wizard-title-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  .bt-deal__description {
    margin: var(--bt-space-8, 0.8rem) 0 0;
    color: var(--theme-deal-wizard-description-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 {
    /* <button> gets `color: buttontext` / `font: -webkit-small-control` from
       the UA stylesheet, which blocks inheritance of $dw-text from .bt-deal */
    color: inherit;
    font: inherit;
    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;
    color: var(--theme-deal-wizard-title-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  .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-family: inherit;
    /* UA `-webkit-small-control` otherwise wins on <button> */
    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-family: inherit;
    /* UA `-webkit-small-control` otherwise wins on <button> */
    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; }

/* ----- 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); }

/* ----- LP-2248 follow-up — Basket drawer (desktop) / full-screen (mobile) - */
/* ==========================================================================
   BASIC TOUCH — BASKET DRAWER (LP-2248 follow-up, 2026-10-01)
   ==========================================================================
   Desktop: the retractable basket (`basket_header`, locked on in Basic Touch)
   is no longer a dropdown hanging under the header pill, nor a Floater that
   follows the scroll and could end up pinned at the bottom of the page. It is
   a full-height panel docked to the right edge over a dimmed page, like the
   Uber Eats cart. Mobile: the Sidr off-canvas basket takes the whole screen.

   DropdownBasket (touch/javascripts/_basket_dropdown.js) still toggles
   `basket-dropdown-open` on `.content__side` and writes inline top / right /
   max-height; Floater writes inline position / left / width / top / bottom.
   The `!important`s below neutralise both without touching the shared JS.
   widgets/scripts_bottom_additional.rhtml adds the page overlay, the body
   scroll lock, Esc and the in-panel close button.

   Breakpoint: the base theme switches the basket to the off-canvas at
   max-width 52.5em (`_off_canvas.scss`, `_theme_extended_mode.scss`), so the
   drawer starts right above it rather than at `bt-desktop-up` (60em).
   ========================================================================== */
/* one 1/16 em above the base 52.5em mobile cut */
/* `dropdowns_popup_mode` and `header_top_banner` are franchise-editable and add
   `page_dropdowns-popup-mode` / `page_header-top-banner` to the body; the parent
   styles those variants as a centred popup with its own !important top/right/
   width at specificity 0,5,0. The nested variants below match that specificity
   and come later, so the drawer wins whatever the two settings say. */
@media screen and (min-width: 52.5625em) {
  .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, .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: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 48rem !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    opacity: 1;
    z-index: 1200;
    transform: translateX(100%);
    transform-origin: 100% 50%;
    transition: transform .28s ease, box-shadow .28s ease;
    pointer-events: none;
    box-shadow: none;
    /* The card fills the drawer: no 46rem width, outer radius or shadow */
    /* "Go to checkout" stays in view while the items scroll */
    /* The × of the mobile off-canvas doubles as the drawer close button;
       the parent only draws its two bars inside the mobile media query */ }
    .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, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .content__side-wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .content__side-wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .content__side-wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .content__side-wrapper, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .content__side-wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .content__side-wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .content__side-wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .content__side-wrapper {
      height: 100%;
      max-height: none !important;
      overflow-y: auto;
      padding: 0;
      box-sizing: border-box; }
    .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, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .off-canvas__wrapper, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .off-canvas__wrapper,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .off-canvas__wrapper {
      min-height: 100%;
      display: flex;
      flex-direction: column; }
    .extended-mode.page_header-basket .content .content__side .off-canvas__content,
    .extended-mode.page_header-basket .content .content__side #basket-holder,
    .extended-mode.page_header-basket .content .content__side .basket,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket .content .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket .content__primary .content__side .off-canvas__content,
    .extended-mode.page_header-basket .content__primary .content__side #basket-holder,
    .extended-mode.page_header-basket .content__primary .content__side .basket,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .off-canvas__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side #basket-holder,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .off-canvas__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side #basket-holder,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .off-canvas__content,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side #basket-holder,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .off-canvas__content,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side #basket-holder,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .off-canvas__content,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed #basket-holder,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column; }
    .extended-mode.page_header-basket .content .content__side .basket__content,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__content,
    .extended-mode.page_header-basket .content__primary .content__side .basket__content,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__content, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__content,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__content, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__content,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__content,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__content,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__content {
      flex: 1 0 auto; }
    .extended-mode.page_header-basket .content .content__side .basket,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket .content__primary .content__side .basket,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket {
      width: 100%;
      max-width: none;
      border-radius: 0;
      box-shadow: none; }
    .extended-mode.page_header-basket .content .content__side .basket__header,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__header,
    .extended-mode.page_header-basket .content__primary .content__side .basket__header,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__header, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__header,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__header,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__header,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__header, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__header,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__header,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__header,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__header {
      border-radius: 0; }
    .extended-mode.page_header-basket .content .content__side #sidebar-ofc,
    .extended-mode.page_header-basket .content .content__side.floater-fixed #sidebar-ofc,
    .extended-mode.page_header-basket .content__primary .content__side #sidebar-ofc,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed #sidebar-ofc, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side #sidebar-ofc,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed #sidebar-ofc,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side #sidebar-ofc,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed #sidebar-ofc, .extended-mode.page_header-basket.page_header-top-banner .content .content__side #sidebar-ofc,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed #sidebar-ofc,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side #sidebar-ofc,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed #sidebar-ofc {
      min-height: 100%;
      background: var(--basket-bg, transparent); }
    .extended-mode.page_header-basket .content .content__side .basket__footer,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__footer,
    .extended-mode.page_header-basket .content__primary .content__side .basket__footer,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__footer, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__footer,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__footer,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__footer,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__footer, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__footer,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__footer,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__footer,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__footer {
      position: sticky;
      bottom: 0;
      background: var(--basket-footer-bg);
      border-radius: 0; }
    .extended-mode.page_header-basket .content .content__side .basket__close,
    .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__close,
    .extended-mode.page_header-basket .content__primary .content__side .basket__close,
    .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__close, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__close,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__close,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__close,
    .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__close, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__close,
    .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__close,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__close,
    .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__close {
      display: inline-flex;
      position: relative; }
      .extended-mode.page_header-basket .content .content__side .basket__close:before, .extended-mode.page_header-basket .content .content__side .basket__close:after,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__close:after, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__close:before, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__close:after, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__close:before, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__close:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 2px;
        background: var(--basket-header-close-icon);
        border-radius: 1px; }
      .extended-mode.page_header-basket .content .content__side .basket__close:before,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__close:before, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__close:before, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__close:before,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__close:before {
        transform: translate(-50%, -50%) rotate(45deg); }
      .extended-mode.page_header-basket .content .content__side .basket__close:after,
      .extended-mode.page_header-basket .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed .basket__close:after, .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_dropdowns-popup-mode .content__primary .content__side.floater-fixed .basket__close:after, .extended-mode.page_header-basket.page_header-top-banner .content .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content .content__side.floater-fixed .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side .basket__close:after,
      .extended-mode.page_header-basket.page_header-top-banner .content__primary .content__side.floater-fixed .basket__close:after {
        transform: translate(-50%, -50%) rotate(-45deg); }
    .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, .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 {
      transform: none;
      pointer-events: auto;
      border: 0;
      border-radius: 0;
      box-shadow: -1.2rem 0 3.2rem rgba(0, 0, 0, 0.25);
      /* the parent's open rule sets 991, below its own #page-overlay (999) */
      z-index: 1200 !important;
      /* the popup variants' open rule re-centres with its own !important */
      top: 0 !important;
      right: 0 !important;
      width: 48rem !important;
      /* ...and caps the open scroll area at 96vh (7-class selector) */ }
      .extended-mode.page_header-basket .content .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket .content .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket .content__primary .content__side.basket-dropdown-open .content__side-wrapper,
      .extended-mode.page_header-basket .content__primary .content__side.floater-fixed.basket-dropdown-open .content__side-wrapper, .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: none !important; } }

/* Dim and lock the page behind the open drawer (body class set by
   scripts_bottom_additional.rhtml, overlay element is the parent's #page-overlay) */
@media screen and (min-width: 52.5625em) {
  body.bt-basket-drawer-open {
    overflow: hidden; }
    body.bt-basket-drawer-open .page__overlay {
      display: block;
      z-index: 1100; } }

/* Mobile: the off-canvas basket takes the whole screen, header included,
   and is left through its own × (the base `.off-canvas` z-index is 3333).
   `right: -100vw` keeps the closed panel fully off-screen so no sliver
   intercepts right-edge taps (the language pill). Only the burger panel
   (`.off-canvas_left`) is anchored below the header, in
   _basic_header_mobile.scss. */
@media screen and (max-width: 52.5em) {
  .extended-mode #sidebar-ofc.off-canvas_right {
    width: 100% !important;
    max-width: 100% !important;
    right: -100vw;
    top: 0 !important;
    height: 100% !important;
    z-index: 10001;
    /* Full screen: the card is the screen, no outer corners or shadow */ }
    .extended-mode #sidebar-ofc.off-canvas_right .basket,
    .extended-mode #sidebar-ofc.off-canvas_right .basket__header,
    .extended-mode #sidebar-ofc.off-canvas_right .basket__footer {
      border-radius: 0; }
    .extended-mode #sidebar-ofc.off-canvas_right .basket {
      width: 100%;
      max-width: none;
      box-shadow: none; }

  /* The panel lives inside the page content's stacking context, so no
     z-index of its own gets it over the fixed header (9999): hide the
     header while the basket is open (`sidebar-ofc-open` is Sidr's body class) */
  body.sidebar-ofc-open .page__header {
    visibility: hidden;
    pointer-events: none; } }
/* ==========================================================================
   BASIC TOUCH — MOBILE BASKET BAR (LP-2248 follow-up, 2026-10-01)
   ==========================================================================
   The sticky bottom basket button becomes a floating pill, Burger King
   style: inset from the screen edges, fully rounded, one centred line
   "<basket title> (N) • total" with the basket bag icon. Markup:
   widgets/mobile_basket_button.rhtml (this theme's override). The parent's
   `_mobile_basket_button.scss` and the extended-mode rules still apply to
   `.mobile-basket-button` / `__link`, hence the resets below.

   Colours follow the desktop header basket chip, so the two CTAs match.
   ========================================================================== */
/* Pill placement and size, shared with the hybrid-app rule at the bottom of
   this file so the two cannot drift apart. */
.extended-mode .mobile-basket-button.bt-basket-bar {
  /* Hugs its content, centred, never wider than the screen minus the gutters */
  left: 50%;
  right: auto;
  bottom: var(--bt-space-16);
  /* Burger King proportions measured on a 390px screen: 85 % wide, 45px tall */
  width: 85%;
  transform: translateX(-50%);
  /* same corners as the header basket chip and the product Add button */
  border-radius: var(--theme-header-pill-radius, 0.65em);
  max-width: calc(100% - 2 * var(--bt-space-16));
  overflow: visible;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.28); }
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bt-space-8);
    width: 100%;
    min-height: 5.2rem;
    padding: var(--bt-space-8) var(--bt-space-24);
    border-radius: var(--theme-header-pill-radius, 0.65em);
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--theme-header-basket-chip-color, var(--theme-basket-count-color, #ffffff));
    /* Flat chip colour, no border: the drop shadow on the container is
       what lifts it off the page. */
    background: var(--theme-header-basket-chip-background-color, var(--theme-header-basket-chip-badge-color, var(--theme-basket-count-background-color, #d62300)));
    border: 0;
    box-shadow: none;
    transition: filter .15s ease, transform .15s ease;
    /* Hover only where a pointer can hover (not on touch), press on all */
    /* the parent draws a vertical separator between its two halves */ }
    @media (hover: hover) {
      .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__link:hover {
        filter: brightness(1.05);
        transform: translateY(-1px); } }
    .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__link:active {
      filter: brightness(0.94);
      transform: translateY(1px) scale(0.985);
      transition-duration: .06s; }
    .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__link:after {
      display: none; }
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9h18l-2 11H5L3 9z'/><path d='M8 9V6a4 4 0 0 1 8 0v3'/></svg>") no-repeat center/contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9h18l-2 11H5L3 9z'/><path d='M8 9V6a4 4 0 0 1 8 0v3'/></svg>") no-repeat center/contain; }
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__count,
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__dot,
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__total {
    display: inline;
    margin: 0;
    padding: 0;
    line-height: inherit; }
  .extended-mode .mobile-basket-button.bt-basket-bar .bt-basket-bar__dot {
    opacity: .7; }

/* Hybrid app (LP-2562). The PIZZFO-98 rules (touch `_hybrid_app.scss` and the
   `.hybrid_app.extended-mode` block of `_theme_extended_mode.scss`) turn the
   button into a header icon on the order / order_step2..5 pages: static or
   absolute, centred in the header band. This pill has no icon mode (no
   `__part` / `__basket-icon` markup), so it lands full width over the logo.
   Keep the floating pill there instead, as in the mobile browser. The
   selector matches every page in hybrid mode; off the checkout pages it
   re-applies what the pill already has there, so it changes nothing. (0,5,0)
   beats the extended-mode (0,4,0) placement whatever the stylesheet order. */
.hybrid_app.extended-mode .header__basket-menu .mobile-basket-button.bt-basket-bar {
  position: fixed;
  top: auto;
  margin-top: 0;
  /* Hugs its content, centred, never wider than the screen minus the gutters */
  left: 50%;
  right: auto;
  bottom: var(--bt-space-16);
  /* Burger King proportions measured on a 390px screen: 85 % wide, 45px tall */
  width: 85%;
  transform: translateX(-50%);
  /* same corners as the header basket chip and the product Add button */
  border-radius: var(--theme-header-pill-radius, 0.65em); }

/* ----- LP-2561 — Design Editor keys on base surfaces (basket, form labels,
   basic popup checked rows and steppers) ---------------------------------- */
/* ==========================================================================
   BASIC TOUCH — COLOUR-KEY REMAPS OF BASE SURFACES (LP-2561)
   ==========================================================================
   Base-theme surfaces whose colour must follow a Design Editor key on Basic
   Touch. The base rules stay untouched because every extended Touch shop
   shares them (_theme_extended_mode.scss, _popup_basic.scss). This partial
   loads after _theme_extended_mode.scss, so an equal-specificity selector
   wins on Basic Touch only.
   ========================================================================== */
.extended-mode {
  /* ---- Basket: one background key for the whole drawer ----------------
     ext_basket_background_color reached only the card (--basket-bg) and
     the footer. The inner blocks were an 85/15 tint of basket background
     and basket text, and the unchecked collection / delivery option was
     the button colour at 40 %. They now read --basket-bg, which already
     carries the basket key with its base fallback. The unchecked option
     takes the basket text colour so it stays readable on that surface; the
     checked option keeps the button pair. Deal blocks keep their own key
     (ext_basket_deal_background_color). */
  /* ---- Form text: own text key ------------------------------------------
     Login, account and checkout text shared ext_text_color with the home
     address card, but the card sits on the section background and the
     forms on the page background, so one value could not suit both on a
     dark palette. ext_form_text_color dissociates them; unset, the forms
     keep the body text colour. Same selector lists as the two base rules
     (labels, then values / hints / help text: the account page values sit
     in .checkout-row__group), plus the phone-box label, which the base
     styles one class deeper. */
  /* ---- Section cards: own text and title keys -------------------------
     The cards painted with ext_section_background_color read the body
     text key although they sit on another background than the page: a
     dark page with a light card left no text value that fits both (home
     address card on Pizz'Alchimie). Each card rebinds --theme-text-color
     to the section key, else to the body text colour captured here on
     the body (--bt-body-text), so a shop without the key renders exactly
     as before. Rebinding the variable reaches every text, link and border
     of the card that reads the text key and nothing else (buttons and
     inputs have their own keys). Titles get the same treatment: the title
     key was read on both the checkout and the card backgrounds ("Vérifier
     votre adresse" green on beige on Pizz'Alchimie), so
     ext_section_title_color rebinds --theme-title-color inside the cards,
     falling back on --bt-body-title. The rule names both section keys
     itself so the Design Editor hover inspector (design_preview_listener)
     points the card at them.
     Left out: .content__side (holds the basket, whose text falls back to
     the body key), the loyalty banner (own banner text key) and
     .index-about__wrapper (the about text inherits from .index-about). */
  /* The captures sit in @media all on purpose: design_preview_listener
     indexes top-level style rules only, and a body rule reading
     var(--theme-title-color) would make the hover inspector offer the
     title key on every element of every page. */
  /* The cards above that have no colour rule of their own. Their bare text
     inherits the colour computed on the body and never sees the rebound
     variable. The other cards already declare color: var(--theme-text-color)
     in the base; .short-code-card is left out on purpose, its colour reads
     the wallet foreground set inline on the card. */
  /* The opening-times panel inside a locator card is painted with the
     page background: its text and titles go back to the body keys. */
  /* ---- Menu categories: own title and description keys -----------------
     Category headings read the body title key and their descriptions the
     body text key, so the menu could not be tuned without moving every
     other title and text of the site. The one-page menu titles its
     categories with .category__subcategory-title (h3), the classic menu
     and the favourites page with .category__title (h2): both are listed.
     Same specificity as the base rules, which this partial follows. The
     checkout upselling title keeps the title key: the base
     `.category_upselling .category__title` rule is one class stronger, and
     on the OPC the upselling sits in a white modal styled with the product
     keys (_basic_checkout_upselling.scss), not on the checkout background. */
  /* ---- Checkout background: own text key -------------------------------
     The one-page checkout mounts inside .checkout (pages/order.rhtml) and
     takes its text colour from the theme, like the classic checkout, the
     login, register and account pages, all wrapped in .checkout. The credit
     and loyalty panels below are painted with the same background. Each
     rebinds --theme-text-color to ext_checkout_text_color, else to the body
     text colour captured above, so a shop without the key renders as
     before and every text, value and border reading the text key follows
     the checkout key. The color declaration is for text without a colour
     rule of its own (payable total, loyalty balance, map comment): the
     body colour is resolved on <body> and inherited as a computed value,
     so rebinding the variable alone never reaches it. Titles keep the
     title key (green titles sit well on a dark checkout, see the section
     cards above). The rule names the checkout key so the Design Editor
     hover inspector offers it. */
  /* Form labels and values on the checkout background: checkout key first,
     then the form key, then the body text. --bt-form-text is read by the
     form rule above, so its specificity and the base state rules stay as
     they are; outside .checkout it is unset and the form rule falls
     through to the form key. In @media all for the hover inspector: as a
     top-level rule it would offer the form key on every element of the
     checkout, titles and links included. */
  /* The OPC surcharge prompt (address step, floating_extra_charge.vue) has
     a fixed #212121 label from theme.scss, unreadable on a dark checkout.
     It takes the checkout key when set and keeps #212121 otherwise. */
  /* Blocks inside .checkout painted with another background go back to
     the body text: the select replacement (OPC time slots, classic
     checkout selects) and the order cards of the orders page (page
     background, own colour rule). */
  /* Light surfaces with text that has no colour rule of its own, so the
     color declaration is needed as well: the OPC modal (white, upselling
     and loyalty rewards), the order-tracking panels (#fafafa, open header
     #fff, theme.scss), and two white dropdowns whose "no results" line
     has no colour: the OPC address autocomplete and the phone country
     list (intl-tel-input, inline on desktop). */
  /* Form labels on these light surfaces go back to the form key, else the
     body text, as before the checkout key. In @media all for the hover
     inspector, like the .checkout declaration above. */ }
  .extended-mode .basket {
    --basket-items-bg: var(--basket-bg);
    --basket-summary-bg: var(--basket-bg);
    --basket-coupon-bg: var(--basket-bg);
    --basket-tip-bg: var(--basket-bg);
    --basket-dropdown-list-bg: var(--basket-bg);
    --basket-delivery-background-color: var(--basket-bg);
    --basket-delivery-color: var(--basket);
    /* The generic `.extended-mode .nice-select` block of
       _theme_extended_mode.scss paints the list and its options with
       the page background and text colour. It ties with the
       `.basket .nice-select` rules of _basket.scss and loads later, so
       the delivery-time list stayed on the page background whatever
       the basket key. The extra `.extended-mode` puts the basket
       values back. Every state the base colours from the page pair must
       be restated here, or it lands on the basket surface with page
       colours (white on white on electric_twilight). The hovered option
       keeps the base button-hover pair; the idle focused option keeps
       the page text colour on the button-hover background. */
    /* Also covers the keyboard-focused option (arrow keys move .focus)
       once the pointer is on the list: the base drops its button-hover
       fill but keeps its page text colour. */
    /* Ties at (0,7,0) with the base 20 % button-hover tint, which loads
       later and was meant for the page background. */
    /* Disabled slots (overloaded, before prep time): the base 20 % ratio,
       taken from the basket text. Same state list as the base rule. */
    /* A selected slot that later turned disabled keeps the selected rule
       above: at the same specificity this one would win by source order
       and drop the selected fill under the selected text colour. */ }
    .extended-mode .basket .nice-select .list {
      background-color: var(--basket-dropdown-list-bg); }
    .extended-mode .basket .nice-select .option:not(:hover):not(.focus):not(.selected):not(.disabled) {
      color: var(--basket-dropdown-option);
      background-color: var(--basket-dropdown-option-bg); }
    .extended-mode .basket .nice-select .list:hover .option:not(:hover):not(.selected):not(.disabled) {
      color: var(--basket-dropdown-option);
      background-color: var(--basket-dropdown-option-bg) !important; }
    .extended-mode .basket .nice-select .list:hover .option.selected:not(:hover) {
      background-color: var(--basket-dropdown-option-selected-bg) !important; }
    .extended-mode .basket .nice-select .option.disabled, .extended-mode .basket .nice-select .option.disabled:hover, .extended-mode .basket .nice-select .option.disabled.focus, .extended-mode .basket .nice-select .option.disabled.focus:hover, .extended-mode .basket .nice-select .option.disabled.selected, .extended-mode .basket .nice-select .option.disabled.selected:hover, .extended-mode .basket .nice-select .option.disabled.selected.focus, .extended-mode .basket .nice-select .option.disabled.selected.focus:hover {
      color: color-mix(in srgb, var(--basket-dropdown-option) 20%, transparent);
      background-color: var(--basket-dropdown-option-bg); }
    .extended-mode .basket .nice-select .list:hover .option.disabled:not(.selected):not(:hover) {
      color: color-mix(in srgb, var(--basket-dropdown-option) 20%, transparent);
      background-color: var(--basket-dropdown-option-bg) !important; }
  .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,
  .extended-mode .phone-box__group .checkout-row__label,
  .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 {
    color: var(--bt-form-text, var(--theme-form-text-color, var(--theme-text-color, #212121))); }
  @media all {
    .extended-mode {
      --bt-body-text: var(--theme-text-color, #212121);
      --bt-body-title: var(--theme-title-color, #212121); } }
  .extended-mode .gdpr-consent,
  .extended-mode .index-locator,
  .extended-mode .index-connected-customer__item:not(:first-child),
  .extended-mode .index-about,
  .extended-mode .index-newsletter,
  .extended-mode .index-map__shop,
  .extended-mode .index-shop-list__wrapper,
  .extended-mode .locator,
  .extended-mode .locator-restaurant,
  .extended-mode .password-checker,
  .extended-mode .short-code-card,
  .extended-mode .wallet-account-actions,
  .extended-mode .lp-follow-us {
    --theme-text-color: var(--theme-section-text-color, var(--bt-body-text));
    --theme-title-color: var(--theme-section-title-color, var(--bt-body-title)); }
  .extended-mode .index-map__shop,
  .extended-mode .index-shop-list__wrapper,
  .extended-mode .password-checker,
  .extended-mode .wallet-account-actions,
  .extended-mode .lp-follow-us {
    color: var(--theme-section-text-color, var(--bt-body-text)); }
  .extended-mode .locator-restaurant__opening-times {
    --theme-text-color: var(--bt-body-text);
    --theme-title-color: var(--bt-body-title);
    color: var(--bt-body-text); }
  .extended-mode .category__title,
  .extended-mode .category__subcategory-title {
    color: var(--theme-category-title-color, var(--theme-title-color, #212121)); }
  .extended-mode .category__description {
    color: var(--theme-category-description-color, var(--theme-text-color, #212121)); }
  .extended-mode .checkout,
  .extended-mode .credit-page__main,
  .extended-mode .credit-page__history,
  .extended-mode .loyalty-page__history,
  .extended-mode .loyalty-page__howto {
    --theme-text-color: var(--theme-checkout-text-color, var(--bt-body-text));
    color: var(--theme-checkout-text-color, var(--bt-body-text)); }
  @media all {
    .extended-mode .checkout {
      --bt-form-text: var(--theme-checkout-text-color, var(--theme-form-text-color, var(--bt-body-text))); } }
  .extended-mode .checkout .surcharges-trigger__label {
    color: var(--theme-checkout-text-color, #212121); }
  .extended-mode .checkout .nice-select,
  .extended-mode .checkout .order {
    --theme-text-color: var(--bt-body-text); }
  .extended-mode .checkout .popup-modal__content,
  .extended-mode .checkout .accordion__panel,
  .extended-mode .checkout .selector-results,
  .extended-mode .checkout .iti__country-selector {
    --theme-text-color: var(--bt-body-text);
    color: var(--bt-body-text); }
  @media all {
    .extended-mode .checkout .popup-modal__content,
    .extended-mode .checkout .accordion__panel,
    .extended-mode .checkout .selector-results,
    .extended-mode .checkout .iti__country-selector {
      --bt-form-text: var(--theme-form-text-color, var(--bt-body-text)); } }

/* ---- Basic popup: soft surfaces under keyed text --------------------------
   The base file fills the checked rows and both steppers with the fixed
   --bt-soft peach, under product-keyed text and stepper-keyed glyphs: white
   on peach on a dark palette (electric_twilight). Here each fill is the
   product surface tinted toward the colour it must stand out from: the
   accent for a checked row, the stepper key for a stepper (same recipe as
   .product__stepper in _basic_product.scss). popup_basic.css is linked after
   theme.css, so the leading .extended-mode adds the class that makes these
   rules win. Not done in the base file: Yard Sale imports _popup_basic.scss
   too. The $pop-* variables of that file are not in scope here (separate CSS
   entry), hence the local copies of the three chains. */
.extended-mode #popup.popup_basic {
  /* Footer quantity stepper and the topping "−" button. The topping "+"
     keeps its accent fill: this selector outranks the base __plus rule. */ }
  .extended-mode #popup.popup_basic .popup-set__option:has(input:checked) .popup-set__label,
  .extended-mode #popup.popup_basic .popup-enum__option:has(input:checked) .popup-enum__label {
    background: color-mix(in srgb, var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0))) 92%, var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)))); }
  .extended-mode #popup.popup_basic .popup-stepper,
  .extended-mode #popup.popup_basic .popup-topping-stepper__btn:not(.popup-topping-stepper__plus) {
    background: color-mix(in srgb, var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0))) 92%, var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))))); }