/* Wishlist - VERSION: V.2025-12-02.9:32:03 / prod */

/* ------------------ */
/* OVERALL + DESKTOP */
/* ---------------- */
:root {
 --fizz-div-background: white;
 --fizz-text-negated: white;
 --fizz-background: #F7F7F7;
 --fizz-grey-200: #EBEBEB;
 --fizz-grey-500: #A6A6A6;
 --fizz-grey-600: #505050;
 --fizz-grey-700: #808080;
 --fizz-grey-800: #1B1F27;
 --fizz-grey-900: #0D0F13;
 --fizz-grey-disabled: #CCCCCC;
 --fizz-grey-overlay: #1b1f27b8;
 --fizz-text-default: black;

 --fizz-spinner-background: rgba(255, 255, 255, 0.97);

 --fizz-background-green: #52AE30;
 --fizz-background-green-hover: #469728;
 --fizz-price-green: #006648;
 --fizz-error-red: #FF001F;
 --fizz-purple-light: #E4D4FD;
 --fizz-purple: #8036F5;
 --fizz-purple-hover: #995ef7;

 --fizz-discount-gradient: linear-gradient(
  99.63deg,
  rgba(255, 51, 76, 1) 5.96%,
  rgba(255, 0, 31, 1) 49.32%,
  rgba(204, 0, 25, 1) 80%,
  rgba(153, 40, 54, 1) 100%
 );

 /* COUPON CARD STYLES: */
 --fizz-yellow-coupon-dark: #FC0;
 --fizz-yellow-coupon-dark-text: #1B1F27;
 --fizz-yellow-coupon-light: #FFF7D9;
 --fizz-yellow-coupon-code-text: #0D0F13;
 --fizz-yellow-coupon-text: #1B1F27;

 --fizz-purple-coupon-dark: #8036F5;
 --fizz-purple-coupon-dark-text: white;
 --fizz-purple-coupon-light: #F3F1F7;
 --fizz-purple-coupon-code-text: #8036F5;
 --fizz-purple-coupon-text: #5D20BD;

 --fizz-green-coupon-dark: #52AE30;
 --fizz-green-coupon-dark-text: white;
 --fizz-green-coupon-light: #E4EDE1;
 --fizz-green-coupon-code-text: #52AE30;
 --fizz-green-coupon-text: #006648;

 --fizz-blue-coupon-dark: #1668B6;
 --fizz-blue-coupon-dark-text: white;
 --fizz-blue-coupon-light: #E8F3FC;
 --fizz-blue-coupon-code-text: #1668B6;
 --fizz-blue-coupon-text: #1668B6;

 --fizz-red-coupon-dark: var(--fizz-discount-gradient);
 --fizz-red-coupon-dark-text: white;
 --fizz-red-coupon-light: #F8E3E6;
 --fizz-red-coupon-code-text: var(--fizz-discount-gradient);
 --fizz-red-coupon-text: var(--fizz-discount-gradient);

 /* PRODUCT ITEM CARD WIDTH: */
 /* NOTE: some of these are hardcoded and cannot be changed via variables */
 --fizz-item-grid-gap: 15px;
 --fizz-item-card-width: 258px;
 --fizz-item-card-padding: 16px;

 /* DESKTOP HEADER MARGINS: */
 --desktop-header-height: 84px;
 --desktop-carousel-height-no-scrollbar: calc(24px + 122px + 8px); /* padding-top + height + padding-bottom */
 --desktop-categories-height-no-scrollbar: calc(16px + 46px + 16px); /* padding-top + height + padding-bottom */
 --desktop-scrollbar-height: 12px;
 --desktop-carousel-track-container-margin-bottom: 16px;
 --desktop-category-container-margin-bottom: 16px;
 --dekstop-category-line-margin: 8px;
}

/* Black theme colors */
:root body.black {
 --fizz-spinner-background: #1b1f27EF;

 /* --fizz-div-background: #0D0F13;
 --fizz-text-negated: white;
 --fizz-background: #1B1F27;
 --fizz-grey-200: #505050;
 --fizz-grey-500: #808080;
 --fizz-grey-600: #A6A6A6;
 --fizz-grey-700: #CCCCCC;
 --fizz-grey-800: #EBEBEB;
 --fizz-grey-900: #F7F7F7;
 --fizz-grey-disabled: #505050;
 --fizz-grey-overlay: #0d0f13b8;
 --fizz-text-default: white;

 --fizz-background-green: #52AE30;
 --fizz-price-green: #52AE30;
 --fizz-error-red: #FF001F;
 --fizz-purple-light: #E4D4FD;
 --fizz-purple: #8036F5;
 --fizz-purple-hover: #995ef7; */
}

/* COUPON CARD STYLES: */
body, body.yellow-coupons {
 --fizz-coupon-background-dark: var(--fizz-yellow-coupon-dark);
 --fizz-coupon-dark-text: var(--fizz-yellow-coupon-dark-text);
 --fizz-coupon-background-light: var(--fizz-yellow-coupon-light);
 --fizz-coupon-code-text: var(--fizz-yellow-coupon-code-text);
 --fizz-coupon-text: var(--fizz-yellow-coupon-text);
}

body.purple-coupons {
 --fizz-coupon-background-dark: var(--fizz-purple-coupon-dark);
 --fizz-coupon-dark-text: var(--fizz-purple-coupon-dark-text);
 --fizz-coupon-background-light: var(--fizz-purple-coupon-light);
 --fizz-coupon-code-text: var(--fizz-purple-coupon-code-text);
 --fizz-coupon-text: var(--fizz-purple-coupon-text);
}

body.green-coupons {
 --fizz-coupon-background-dark: var(--fizz-green-coupon-dark);
 --fizz-coupon-dark-text: var(--fizz-green-coupon-dark-text);
 --fizz-coupon-background-light: var(--fizz-green-coupon-light);
 --fizz-coupon-code-text: var(--fizz-green-coupon-code-text);
 --fizz-coupon-text: var(--fizz-green-coupon-text);
}

body.blue-coupons {
 --fizz-coupon-background-dark: var(--fizz-blue-coupon-dark);
 --fizz-coupon-dark-text: var(--fizz-blue-coupon-dark-text);
 --fizz-coupon-background-light: var(--fizz-blue-coupon-light);
 --fizz-coupon-code-text: var(--fizz-blue-coupon-code-text);
 --fizz-coupon-text: var(--fizz-blue-coupon-text);
}

body.red-coupons {
 --fizz-coupon-background-dark: var(--fizz-red-coupon-dark);
 --fizz-coupon-dark-text: var(--fizz-red-coupon-dark-text);
 --fizz-coupon-background-light: var(--fizz-red-coupon-light);
 --fizz-coupon-code-text: var(--fizz-red-coupon-code-text);
 --fizz-coupon-text: var(--fizz-red-coupon-text);
}

/* Page styles (set in config)
 * body.black - black november theme
 * body.green - white with green accents
*/


body {
 margin: 0;
 padding: 0;
 width: 100%;
 table-layout: fixed;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 font-family: Inter, Tahoma, sans-serif;
 background-color: var(--fizz-background, #F7F7F7);

 display: grid;
 min-height: calc(100vh);
 grid-template-rows: auto auto 1fr auto;
}

body.no-scroll {
 margin: 0;
 height: 100%;
 overflow: hidden;
}

body.black {
 background-color: var(--fizz-grey-900, #0D0F13);
}

.not-displayed {
 display: none !important;
}

@media screen and (min-width: 800px) {
 /* needs to work on desktop only, and not interfere with mobile! */
 .not-on-desktop {
  display: none !important;
 } 
}


.content {
 width: 100%;
 max-width: 1400px;
 margin: 32px auto 0;
 /*background-color: var(--fizz-background, #F7F7F7);*/
 display: grid;
 gap:32px;
}

body.black .content {
 background-color: var(--fizz-grey-900, #0D0F13);
}

.container {
 width: calc(100vw - 64px);
 max-width: calc(1400px - 64px);
 margin: 0 auto;
 /* contain: layout; */
}

/* TEXT CUTTING: */
.max-lines-cut {
 font-size: var(--text-font-size, 14px);
 line-height: calc(var(--text-line-height-ratio, 1.4) * var(--text-font-size, 14px));
 height: calc(var(--max-lines, 2) * calc(var(--text-line-height-ratio, 1.4) * var(--text-font-size, 14px)));
 
 overflow: hidden;
 display: -webkit-box;
 -line-clamp: var(--max-lines, 2);
 -webkit-line-clamp: var(--max-lines, 2);
 -webkit-box-orient: vertical;
}

p.max-lines-cut.lines-cut-1 {
 --max-lines: 1;
}

p.max-lines-cut.lines-cut-2 {
 --max-lines: 2;
}

p.max-lines-cut.lines-cut-3 {
 --max-lines: 3;
}

/* IMAGE CONTAINER: to ensure image fills available space */
.image-container {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

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

/* BUTTONS: */
.primary-button {
 display: flex;
 justify-content: center;
 align-items: center;

 padding: 10.5px 16px;
 border-radius: 8px;

 border: 2px solid var(--fizz-purple, #8036F5);
 background-color: var(--fizz-purple, #8036F5);

 font-family: Arial;
 text-decoration: none;
 font-size: 14px;
 font-style: normal;
 font-weight: 700;
 line-height: 17px; /* 120% ~ 16.78px */
 letter-spacing: 0.32px;

 color: var(--fizz-text-negated, white);
 cursor: pointer;
 transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.green header .primary-button,
body.green .content .primary-button:not(.product-filter .primary-button) {
 background-color: var(--fizz-background-green, #52AE30);
 border: 2px solid var(--fizz-background-green, #52AE30);
}

.primary-button:hover {
 background-color: var(--fizz-purple-hover, #995ef7);
 border: 2px solid var(--fizz-purple-hover, #995ef7);
}

body.green header .primary-button:hover,
body.green .content .primary-button:not(.product-filter .primary-button):hover {
 background-color: var(--fizz-background-green-hover, #469728);
 border: 2px solid var(--fizz-background-green-hover, #469728);
}

.primary-button.bttn-disabled {
 background-color: var(--fizz-grey-disabled, #CCCCCC);
 border: 2px solid var(--fizz-grey-disabled, #CCCCCC);
}

.secondary-button {
 display: flex;
 padding: 12.5px 16px;
 justify-content: center;
 align-items: center;
 border-radius: 8px;

 text-decoration: none;
 font-size: 14px;
 font-weight: 600;
 color: var(--fizz-text-default, black);

 align-items: center;
  border-radius: 8px;
 background-color: var(--fizz-div-background, white);
 border: 2px solid var(--fizz-purple, #8036F5);
 cursor: pointer;

 transition: background-color 0.3s ease, border-color 0.3s ease;
}

.secondary-button:hover {
 background-color: var(--fizz-purple-light, #E4D4FD);
 border: 2px solid var(--fizz-purple-light, #E4D4FD);
}

a.default-link {
 color: var(--fizz-text-default, black);
}

a.default-link:hover {
 color: var(--fizz-purple, #8036F5);
 text-decoration: underline;
}

.secondary-button svg path {
 stroke: var(--fizz-text-default, black);
}

body.black .secondary-button svg path {
 stroke: var(--fizz-text-negated, white);
}

/* HEADER POSITIONING: */
/* default: */
header {
  position: sticky;
  top: 0px;
 /* transition: top 0.3s ease-in-out, position 0.3s ease-in-out; */
}

.carousel {
  position: sticky;
 top: var(--desktop-header-height, 84px);
 /* transition: top 0.3s ease-in-out, position 0.3s ease-in-out; */
}

#categories {
  position: sticky;
 top: calc(
  var(--desktop-header-height, 84px)
  + var(--desktop-carousel-height-no-scrollbar, 154px)
  + var(--desktop-scrollbar-height, 12px)
  + var(--desktop-category-container-margin-bottom, 16px)
 );
}

.carousel:has(.fizz_scrollbar.hidden) .carousel__track-container {
 margin-bottom: 0px;
}

#categories:has(.fizz_scrollbar.hidden) #category-container {
 margin-bottom: 0px;
}

body:has(.carousel .fizz_scrollbar.hidden) #categories {
 top: calc(
  var(--desktop-header-height, 84px)
  + var(--desktop-carousel-height-no-scrollbar, 154px)
 );
}

/* Header scroll states */
body.scroll-down header {
 position: relative;
 top: calc(370px - 84px);
 /* transition: top 0.3s ease-in-out, position 0.3s ease-in-out; */
}

body.scroll-down .carousel {
 position: relative;
 top: 0px;
 /* transition: top 0.3s ease-in-out, position 0.3s ease-in-out; */
}

body.scroll-down #categories {
 top: 0px;
 /* transition: top 0.2s ease-in-out, position 0.2s ease-in-out; */
}

/* Header scroll-change */
body.scroll-change header {
 position: relative;
}

body.scroll-change .carousel {
 position: relative;
}

body.scroll-change #categories {
 position: relative;
}


/* HEADER */
header {
 background-color: var(--fizz-div-background, white);
 width: 100vw;
 z-index: 10;
}

body.black header {
 background-color: var(--fizz-grey-800, #1B1F27);
}

body.red-header header{
 background: linear-gradient(100deg, #FF334C 5.96%, #FF001F 49.32%, #CC0019 93.2%);
}

body.green-header header{
 background: #006648;
}

body.purple-header header{
 background:#8036F5;
}

.header {
 display: flex;
 justify-content: space-between;
 align-items: center;

 padding: 16px 0;
 margin: 0 auto;

 width: calc(100vw - 2* 32px - 2* 32px);
 max-width: calc(1400px - 2* 32px - 2* 32px);
}

body.header-align-wide .header {
 width: calc(100vw - 64px);
 max-width: calc(1400px - 64px);
}

.logo img {
 height: 48px;
 display: block;
}

.logo .fizz-logo,
footer .fizz-logo {
 display: block;
}

.logo .fizz-logo-negated,
footer .fizz-logo-negated {
 display: none;
}

body.black .logo .fizz-logo,
body.black footer .fizz-logo {
 display: none;
}

body.black .logo .fizz-logo-negated,
body.black footer .fizz-logo-negated {
 display: block;
}

body.no-header-button .header a.primary-button {
 display: none;
}

.header .primary-button span {
 font-weight: 600;
 letter-spacing: 0.28px;
 line-height: 17px;
 padding: 3px 0;
 margin-left: 10px;
}

.header .primary-button img {
 width: 16px;
 height: 16px;
 margin-right: 10px;
}

#show-categories-button {
 gap: 8px;
 padding: 6px 14px;
 border-radius: 4px;
}

#show-categories-button span {
 margin: 0;
 font-size: 12px;
 font-weight: 500;
 line-height: 150%;
 padding: 0;
}

.cta {
 display: flex;
 align-items: center;
 border-radius: 8px;
 padding: 0px 10px;
 color: var(--fizz-text-negated, white);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.28px;
 line-height: 17px;
}

.cta p {
 margin: 0 0 !important;
}

.cta img {
 width: 16px;
 height: 16px;
 display: block;
 margin-left: 6.72px;
}

.gradient {
 position: -webkit-sticky;
  position: sticky;
  top: 80px;
 z-index: 10;
}

.gradient img {
 width: 100%;
 height: 4px;
 display: block;
}

.hide-when-sliding {
 display: none;
}

/* PROMO */
.top-banner {
 --banner-side-ratio: 267 / 1400;
 
 position: relative;
 width: 100%;
 height: calc((100vw - 2*32px) * var(--banner-side-ratio));
 max-height: calc((1400px - 2*32px) * var(--banner-side-ratio));
 /* Minimum height to prevent layout shift on small screens */
 min-height: 160px;
 overflow: hidden;
 border-radius: 24px;

 background-image: 
    linear-gradient(
        268deg, 
        rgba(0, 0, 0, 0.00) 54.43%, 
        rgba(0, 0, 0, 0.40) 100.04%
    ), 
    linear-gradient(
        0deg, 
        rgba(0, 0, 0, 0.16) 0%, 
        rgba(0, 0, 0, 0.16) 100%
    ), 
    url(https://image.mail.fizz.hu/lib/fe3211737364047e731575/m/1/f661c20a-3552-42f4-a88d-bd1c832a8485.png);
 background-color: lightgray;
 background-repeat: no-repeat;
 /* POSITION OF THE IMAGE: */
}

.top-banner.hidden {
 display: none;
 margin: 0;
}

.top-banner-text {
 position: absolute;
 color: var(--fizz-text-negated, white);
 text-shadow: 0px 4px 4px rgba(0, 0, 0, 1);

 text-align: left;
 font-family: "Space Grotesk";
 font-size: 3.2vw;
 font-style: normal;
 font-weight: 700;
 line-height: 120%;
 letter-spacing: 0.8px;

 top: 20px;
 font-size: 2.8vw;
 width: 500px;
 right: 3%;
}

.top-banner-logo {
 width: 150px;
 position: absolute;
 top: calc(40%);
 left: 10%;
}

.top-banner-p {
 position: absolute;
 top: 70%;
 right: 10%;

 color: var(--fizz-text-negated, white);
 text-align: center;
 font-family: "Space Grotesk";
 font-size: 13px;
 font-style: normal;
 /* font-weight: 700; */
 line-height: 110%;
 letter-spacing: 0.8px;

 text-align: justify;
 top: calc(25px + 3.2vw);
 max-width: 600px;
}

@media screen and (min-width: 1400px) {
  .top-banner-text {
    font-size: 50px;
  }
}

.banner-loading {
 height: 250px;

 display: flex;
 justify-content: center;
 align-items: center;

 background: var(--fizz-spinner-background, rgba(255, 255, 255, 0.97));
 border-radius: 16px;
}

svg.spinner-icon-fizz {
  width: 50px;
  height: auto;

 animation: spin 2s linear infinite;
}

svg.spinner-icon-fizz path {
 fill: var(--fizz-background-green, #52AE30);
}

body.black svg.spinner-icon-fizz path {
 fill: var(--fizz-text-negated, white);
}

/* CAROUSEL-MENU */
.carousel {
 --carousel-top-padding: 24px;

 display: inline-block;
  width: calc(100vw - 64px);
 max-width: calc(1400px - 64px);
 /* Reserve space to prevent layout shift */
 min-height: 122px;

 background-color: var(--fizz-background, #F7F7F7);
 margin: 0px auto 0;
 padding: var(--carousel-top-padding) 0 8px;
 box-shadow: 0px 16px 14px -9px rgba(0, 0, 0, 0.10);

 z-index: 5;
}

body.black .carousel {
 background-color: var(--fizz-grey-900, #0D0F13);
}

.carousel__button {
 height: 24px;
 justify-content: center;
 align-items: center;
 flex-shrink: 0;
 position: absolute;
 top: calc(122px / 2 + var(--carousel-top-padding));
 transform: translateY(-50%);
 z-index: 1;

 display: flex;
 width: 40px;
 height: 40px;
 justify-content: center;
 align-items: center;
 border-radius: 16px;
 border: none;
 background: var(--fizz-grey-200, #EBEBEB);
 transition: background-color 0.3s ease;
}

.top-banner .carousel__button {
 top: 50%;
}

body.black .carousel__button {
 background: var(--fizz-grey-600, #505050);
}

body.black .carousel__button svg path {
 stroke: var(--fizz-text-negated, white);
}

.carousel__button:hover {
 cursor: pointer;
 background: var(--fizz-grey-300, #D9D9D9);
 transition: background-color 0.3s ease;
}

body.black .carousel__button:hover {
 background: var(--fizz-grey-700, #808080);
}

.carousel__button--left {
  left: -16px;
}

.carousel__button--right {
  right: -16px;
}

.carousel__track-container {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
 width: calc(100vw - 64px);
 max-width: calc(1400px - 64px);
 margin: auto;
 scrollbar-width: none;

 position: relative;
 margin-bottom: var(--desktop-carousel-track-container-margin-bottom, 16px);
}

.carousel__track {
  display: flex;
 gap: 8px;
  scroll-snap-type: x mandatory;
 padding-left: 0px;
 width: fit-content;
 margin: 0px auto 0px;
 overflow-x: hidden;
}

.carousel__item {
 list-style: none;
}

.carousel__item_link {
 text-decoration: none;
 transition: background-color 0.3s ease, opacity 0.3s ease;
}

.carousel__item_link:hover {
 background-color: var(--fizz-grey-200, #EBEBEB);
}

body.black .carousel__item_link:hover {
 background-color: var(--fizz-grey-600, #505050);
}

.carousel__item a {
 display: flex;
 height: 110px;
 width: 110px;
 padding: 4px 8px 8px 8px;
 margin: 0;

 flex-direction: column;
 align-items: center;
 gap: 10px;
 flex: 0 0 auto;
 scroll-snap-align: start;

 border-radius: 16px;
 background: var(--fizz-div-background, white);

 transition: background-color 0.3s ease, opacity 0.3s ease;
}

.carousel__item_image {
 max-width: 85%;
 height: 56px; 
}

.carousel__item img {
 border: none;
}

.carousel__item p {
 --max-lines: 3;
 --text-font-size: 12px;
 --text-line-height-ratio: 1.3;

 /* font-size: 12px; */
 /* line-height: 15.6px; */
 /* width: 110px; */
 font-weight: 500;
 text-align: center;
 color: var(--fizz-grey-900, #0D0F13);
 margin: 0;
 padding: 0;
}

body.black .carousel__item p {
 color: var(--fizz-text-negated, white);
}

.carousel__item.selected a {
 background: var(--fizz-grey-200, #EBEBEB);
}

body.black .carousel__item a {
 background: var(--fizz-grey-800, #1B1F27);
}

body.black .carousel__item.selected a {
 background: var(--fizz-grey-600, #505050);
 border: 1px solid #EBEBEB;
 padding: 3px 7px 7px 7px;
}

.carousel__item.selected a p {
 font-weight: 700;
 font-size: 13px;
}

body.black .carousel__item.selected a p {
 font-weight: 500;
 font-size: 12px;
}

/* CAROUSEL ITEM STYLES */
.carousel__item.red .carousel__item_link {
 background: var(--fizz-discount-gradient, linear-gradient(100deg, #FF334C 5.96%, #FF001F 49.32%, #CC0019 93.2%, #992836 100%));
}

.carousel__item.yellow .carousel__item_link {
 background: var(--fizz-yellow-coupon-dark, #FC0);
}


body.black .carousel__item.red .carousel__item_link,
body.black .carousel__item.yellow .carousel__item_link {
 background-color: var(--fizz-grey-800, #1B1F27);
 background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='red' stroke-width='2' stroke-dasharray='3%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.carousel__item.red .carousel__item_link:hover,
.carousel__item.yellow .carousel__item_link:hover {
 opacity: 0.8;
}

body.black .carousel__item.red .carousel__item_link:hover,
body.black .carousel__item.yellow .carousel__item_link:hover {
 background-color: var(--fizz-grey-600, #505050);
 opacity: 1;
}

.carousel__item.red p,
.carousel__item.yellow p {
 color: var(--fizz-text-negated, white);
}

.carousel__item.red.selected a {
 background: var(--fizz-discount-gradient, linear-gradient(100deg, #FF334C 5.96%, #FF001F 49.32%, #CC0019 93.2%, #992836 100%));
}


.carousel__item.yellow.selected a {
 background: var(--fizz-yellow-coupon-dark, #FC0);
}

.carousel__item.red.selected a p,
.carousel__item.yellow.selected a p {
 color: var(--fizz-text-negated, white);
}


.carousel__item.yellow .carousel__item_link {
 background: var(--fizz-yellow-coupon-dark, #FC0);
}

.carousel__item.yellow .carousel__item_link {
 border-radius: 16px;
 background: var(--fizz-yellow-coupon-dark, #FC0);
}

body.black .carousel__item.yellow .carousel__item_link {
 background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23FC0' stroke-width='2' stroke-dasharray='3%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

body.black .carousel__item.red.selected .carousel__item_link,
body.black .carousel__item.yellow.selected .carousel__item_link {
 background: var(--fizz-grey-600, #505050);
 background-image: unset;
}

/*  */
.carousel__image {
  width: 100%;
  height: auto;
}

.carousel__text {
  text-align: center;
}

/* HEADER */
.category-line {
 margin: var(--dekstop-category-line-margin, 8px) 0;
}

.category-header {
 font-family: 'Space Grotesk', Tahoma, sans-serif;
 font-size: 20px;
 font-weight: 500;
 color: var(--fizz-text-default, black);
 padding: 0;
 line-height: 28px;
 mso-line-height-alt: 28px;
}

body.black .category-header {
 color: var(--fizz-text-negated, white);
}

body.no-category-header .category-line {
 margin-bottom: 0px;
}

body.no-category-header .category-header {
 display: none;
}

/*PRODUCT LIST HEADER */
.rounded-top{
  border-radius: 128px 128px 0 0;
}

.rounded-full{
  border-radius:128px;
}

/* CATEGORY PICKER: */
#categories {
 --categories-top-padding: 16px;

 display: inline-block;
 width: 100%;
 background-color: var(--fizz-background, #F7F7F7);
 padding: var(--categories-top-padding) 0px 16px;
 /* Reserve space to prevent layout shift */
 min-height: 40px;
 z-index: 3;
}

body.black #categories {
 background-color: var(--fizz-grey-900, #0D0F13);
}

#category-container {
 position: relative;
 overflow: scroll;
 scrollbar-width: none;
 margin-bottom: var(--desktop-category-container-margin-bottom, 16px);
}

.category-picker {
 position: relative;
 display: flex;
 flex-wrap: nowrap; /* This allows the items to wrap onto new lines if necessary */
 gap: 8px;
 width: max-content;
 padding: 0px;
 margin-right: 0px;
 border: 0;
 border-spacing: 0;
 border-collapse: separate;
}

body.black .category-picker {
 background-color: var(--fizz-grey-900, #0D0F13);
}

#categories .carousel__button {
 top: calc(46px / 2 + var(--categories-top-padding));
}

/* @media screen and (min-width: 1250px) {
 #categories {
  top: 229px;
 }
} */

/* @media screen and (max-width: 900px) {
 .carousel {
  top: 82px;
 }
} */

.category-picker__item {
 margin: 0;
 width: max-content;
 list-style: none;
}

.category-picker__item_link {
 text-decoration: none;
}

.category-picker__item a {
 --category-picker-vertical-padding: calc(8px + 9px / 2);
 --category-picker-horizontal-padding: 16px;

 display: flex;
 width: max-content;

 padding: var(--category-picker-vertical-padding) var(--category-picker-horizontal-padding);
 align-items: center;
 gap: 8px;
 border-radius: 16px;
 background: var(--fizz-div-background, white);
 transition: background-color 0.3s ease;
}

.category-picker__item_image {
 display: none;
}

.category-picker__item .category-picker__item_name {
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
 color: var(--fizz-grey-900, #0D0F13);
 text-overflow: ellipsis;

 font-family: Inter;
 font-size: 14px;
 font-style: normal;
 font-weight: 400;
 line-height: 150%;
}

body.black .category-picker__item a {
 background: var(--fizz-grey-800, #1B1F27);
}

body.black .category-picker__item .category-picker__item_name {
 color: var(--fizz-text-negated, white);
}

.category-picker__item a:hover {
 background-color: var(--fizz-grey-200, #EBEBEB) !important;
}

body.black .category-picker__item a:hover {
 background-color: var(--fizz-grey-600, #505050) !important;
}

.category-picker__item.selected a {
 font-weight: 700;
}

body.black .category-picker__item.selected a {
 font-weight: 500;
 background-color: var(--fizz-grey-600, #505050) !important;

 padding: calc(var(--category-picker-vertical-padding) - 1px) calc(var(--category-picker-horizontal-padding) - 1px);
 border: 1px solid var(--fizz-div-background, white);
}

/* PRODUCT-CONTAINER */
.product-corner-img{
  width:90px;
  height:90px;
}
.product-container {
 display: flex;
 position: relative;
}

/* PRODUCT-FILTER */
.product-column-one {
 display: flex;
 flex: 0 0 var(--fizz-item-card-width, 258px);
 flex-direction: column;
 margin-right: 10px;
}

.product-column-one.hidden {
 display: none !important;
}

.product-column-one-items-wrapper {
 position: relative;
 height: 100%;

 --product-column-one-items-wrapper-base-top: calc(
  var(--desktop-header-height, 84px)
  + var(--desktop-carousel-height-no-scrollbar, 154px)
  + var(--desktop-categories-height-no-scrollbar, 78px)
 );

 --product-column-one-items-wrapper-single-scrollbar-top: calc(
  var(--product-column-one-items-wrapper-base-top)
  + var(--desktop-scrollbar-height, 12px)
  + var(--desktop-category-container-margin-bottom, 16px)
 );

 --product-column-one-items-wrapper-two-scrollbar-top: calc(
  var(--product-column-one-items-wrapper-base-top)
  + 2 * var(--desktop-scrollbar-height, 12px)
  + 2 * var(--desktop-category-container-margin-bottom, 16px)
 );
}

.product-column-one-item {
 height: fit-content;
 margin-bottom: 16px;
 max-width: 100%;
}

.product-filter {
 display: flex;
 height: fit-content;
 width: calc(
  var(--fizz-item-card-width, 258px)
  - 2 * var(--fizz-item-card-padding, 16px)
  - 2*1px);

 padding: 16px;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 gap: 16px;
 border-radius: 8px;

 background-color: var(--fizz-div-background, white);
 border: 1px solid var(--fizz-grey-200, #EBEBEB);
 color: var(--fizz-grey-900, #0D0F13);
}

.product-list-banner.product-column-one-item {
 position: sticky;
 top: var(--product-column-one-items-wrapper-two-scrollbar-top);
}

body:has(.carousel .fizz_scrollbar.hidden) .product-list-banner.product-column-one-item,
body:has(#categories .fizz_scrollbar.hidden) .product-list-banner.product-column-one-item {
 top: var(--product-column-one-items-wrapper-single-scrollbar-top);
}
body:has(.carousel .fizz_scrollbar.hidden):has(#categories .fizz_scrollbar.hidden) .product-list-banner.product-column-one-item {
 top: var(--product-column-one-items-wrapper-base-top);
}

@media screen and (min-height: 1080px) and (min-width: 800px) {
 .product-filter.product-column-one-item {
  position: relative;
  top: unset;
 }

 .product-column-one-items-wrapper {
  position: sticky;
  height: unset;

  top: var(--product-column-one-items-wrapper-two-scrollbar-top);
 }

 body:has(.carousel .fizz_scrollbar.hidden) .product-column-one-items-wrapper,
 body:has(#categories .fizz_scrollbar.hidden) .product-column-one-items-wrapper {
  top: var(--product-column-one-items-wrapper-single-scrollbar-top);
 }

 body:has(.carousel .fizz_scrollbar.hidden):has(#categories .fizz_scrollbar.hidden) .product-column-one-items-wrapper {
  top: var(--product-column-one-items-wrapper-base-top);
 }
}

body.black .product-filter {
 background-color: var(--fizz-grey-800, #1B1F27);
 border: 1px none;
 color: var(--fizz-text-negated, white);
}

.product-filter-title {
 display: none;
 background-color: var(--fizz-div-background, white);
}

body.black .product-filter-title {
 background-color: var(--fizz-grey-800, #1B1F27);
}

.close-slider {
 display: none;

}

.close-popup {
 display: flex;
 width: 32px;
 height: 32px;
 justify-content: center;
 align-items: center;
 border-radius: 68px;
 background: var(--fizz-grey-600, #505050);
}

.product-filter-content {
 width: 100%;
 margin-bottom: 16px;
}

.filter-footer {
 display: none;
}

#clear-filter {
 color: var(--fizz-text-default, black);
}

body.black #clear-filter {
 color: var(--fizz-text-negated, white);
}

/* PRODUCT-FILTER - RANGE-SLIDER */
.range-slider {
  height: 5px;
  position: relative;
  background-color: var(--fizz-grey-200, #EBEBEB);
  border-radius: 2px;
}
.range-selected {
  height: 100%;
  left: 30%;
  right: 30%;
  position: absolute;
  border-radius: 5px;
  background-color: var(--fizz-purple, #8036F5);
}

.range-input {
  position: relative;
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
 margin: 0px;
 cursor: pointer;
}

.range-price input {
 color: var(--fizz-grey-900, #0D0F13);
}

body.black .range-price input {
 color: var(--fizz-text-negated, white);
}

.range-input input::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 3px solid var(--fizz-purple, #8036F5);
  background-color: var(--fizz-purple, #8036F5);
  pointer-events: auto;
  -webkit-appearance: none;
}
.range-input input::-moz-range-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 3px solid var(--fizz-purple, #8036F5);
  background-color: var(--fizz-div-background, white);
  pointer-events: auto;
  -moz-appearance: none;
}

.range-price {
  margin: 16px 0 24px;
  width: 100%;
  justify-content: center;
  align-items: center;

 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 4px;
 flex: 1 0 0;
}

.range-price-item {
 display: flex;
 padding: 10px 8px;
 justify-content: flex-end;
 align-items: center;
 flex: 1 0 0;
 border-radius: 4px;
 border: 1px solid var(--fizz-grey-600, #505050);
 max-width: 40%;
}

.range-price input {
 text-align: right;
  background:transparent;
 border: none;
 -webkit-appearance: none;
 appearance: none;
 padding: 0px;
 margin-right: 4px;

 font-family: Inter;
 font-size: 12px;
 font-style: normal;
 font-weight: 400;
 line-height: 150%;
}

.range-price input:focus,
.range-price input:focus-visible,
.range-price input:hover,
.range-price input::-webkit-outer-spin-button,
.range-price input::-webkit-inner-spin-button {
  background:transparent;
 outline: none;
 border: none;
 -webkit-appearance: none;
 appearance: none;
}

.range-price-item span {
 padding-left: 4px;
 border-left: 1px solid;
 font-family: Inter;
 font-size: 12px;
 font-style: normal;
 font-weight: 400;
 line-height: 150%;
}

/* ITEMS-LIST */
.no-products {
 color: var(--fizz-text-default, black);
 font-size: 20px;
 flex: 1;

 width: calc(100% - var(--fizz-item-card-width, 258px) - var(--fizz-item-grid-gap, 10px));
 margin: 0;

 /* Fixed height to prevent layout shift when shown/hidden */
 height: 400px;
 min-height: 400px;
 display: flex;
 flex: none;
 flex-direction: column;
 align-items: center;
}

.no-products-content {
 width: 70%;
 max-width: 600px;
 height: 400px;

 border-radius: 16px;
 background: var(--fizz-div-background, white);

 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

body.black .no-products {
 color: var(--fizz-text-negated, white);
}

.no-products-text {
 width: max-content;
 font-family: 'Space Grotesk', Tahoma, sans-serif;
 font-size: 20px;
 font-weight: 500;
 color: var(--fizz-text-default, black);
 margin: 24px 0;
 padding: 0;
 line-height: 28px;
 mso-line-height-alt: 28px;

 
 width: max-content;
 margin-left: auto;
 margin-right: auto;
 display: block;

}

body.black .no-products-text {
 color: var(--fizz-text-default, black);
}

.items-list-container {
 width: 100%;
 display: flex;
 flex: 1 1 var(--fizz-item-card-width, 258px);
 flex-direction: column;
 align-items:center;
  gap:16px;
}

.items-list-text{
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
   width: 100%;
   max-width:1074px;
   display: flex;
  justify-content:center;
  color: var(--default-dark-primary, #1B1F27);
  text-align: center;
  font-family: "Space Grotesk";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
 /* position:sticky; */
 /* top:100px; */
  z-index:5;
  line-height: 120%; /* 28.8px */
}

.content,
.container,
.product-container,
.items-list-container {
  overflow: visible !important;
}


.product-list, .coupon-category-items-list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(var(--fizz-item-card-width, 258px), var(--fizz-item-card-width, 258px)));

 gap: var(--fizz-item-grid-gap, 15px);
 justify-content: center;
 padding: 0;
 max-width: 100%;
 min-width: 50%;
 margin: 0 0;
 /* Reserve minimum height for content loading to prevent layout shift */
 min-height: 300px;
}

.coupon-category-item .coupon-category-more-offers {
 display: none;
}

body.black .coupon-category-item .coupon-category-more-offers .secondary-button {
 background: var(--fizz-grey-800, #1B1F27);
 color: var(--fizz-text-negated, white);
 border: 2px solid var(--fizz-text-negated, white);
}

@media screen and (min-width: 800px) {
 .items-list-container.centered {
  margin-left: auto;
  margin-right: auto;
 }

 .items-list-container.centered .product-list {
  justify-content: center;
 } 
}

#products-list {
 margin-bottom: 10px;
  position: relative;
 
}

.product-list-banner {
 grid-column: 1 / -1;
 height: max-content;
}

#loading-products-list {
 margin-bottom: 8px;
}

.product-card {
 display: flex;
 justify-content: center;

 width: 224px;
 /* Fixed height to prevent layout shift during loading */
 /* min-height: 380px; */
 padding: var(--fizz-item-card-padding, 16px);
 flex-direction: column;
 align-items: flex-start;
 border-radius: 16px;
 /*border: 1px solid var(--fizz-grey-200, #EBEBEB);*/
 border: 2px dashed #FF334C;
 background: var(--fizz-div-background, white);
 transition: clip-path 0.1s linear;
 transition: box-shadow 0.3s ease;
}

.product-card:hover {
 box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.04), 0px 8px 10px -6px rgba(0, 0, 0, 0.04);
 transition: box-shadow 0.3s ease;
}

@media screen and (min-width: 800px) and (max-width: 900px) {
 .product-column-one {
  flex: 0 0 232px;
 }

 /* .product-filter {
  width: calc(100% - 2*16px);
 } */

 .items-list-container {
  flex: 1 1 240px;
 }

 .product-list, .coupon-category-items-list {
  --fizz-item-card-width: 229px;
  margin: 0 auto;
 }

 .product-card {
  width: 197px;
  flex: 0 0 197px;
 }
}

.product-card-link {
 width: 100%;
  height: 100%;
}

.product-card.product-card-lazy .product-card-link {
 pointer-events: none;
}

.product-image {
 position: relative;
 width: 100%;
 height: 156px;

 display: flex;
 align-items: center;
 justify-content: center;
}

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

.product-card a {
 text-decoration-line: none;
}

.product-discount {
 background: var(--fizz-discount-gradient,
  linear-gradient(100deg, #FF334C 5.96%, #FF001F 49.32%, #CC0019 93.2%, #992836 100%)
 );
 
 position: absolute;
 left: 0px;
 top: 0px;

 display: flex;
 padding: 4px 12px;
 align-items: center;
 gap: 10px;

 border-radius: 64px;

 color: var(--fizz-text-negated, white);
 font-family: "Space Grotesk";
 font-size: 20px;
 font-style: normal;
 font-weight: 700;
 line-height: 120%; /* 24px */
}

.product-info {
 margin: 16px 0px 0;
 width: 100%;
}

.product-title {
 font-family: Inter, Tahoma, sans-serif;
 font-weight: 500;
 color: var(--fizz-grey-900, #0D0F13);
 margin: 0 0 8px;
 width: 100%;

 --text-font-size: 14px;
 --text-line-height-ratio: 1.4;
 --max-lines: 3;
}

.product-merchant {
 color: var(--fizz-grey-700, #808080);
 font-family: Inter;
 font-style: italic;
 font-weight: 400;

 --text-font-size: 10px;
 --text-line-height-ratio: 1.4;
 --max-lines: 2;
}

.product-voucher-text {
 background-color: var(--fizz-coupon-background-dark, #FC0);
 padding: 8px;
 margin-bottom: 8px;
 border-radius: 4px;
 overflow: hidden;
 display: flex;
 align-items: center;
}

.product-voucher-text p {
 color: var(--fizz-grey-800, #1B1F27);
 font-family: Arial;
 font-size: 12px;
 font-style: normal;
 font-weight: 700;
 line-height: 140%;
 margin: 0;

 max-height: 100%;
 overflow: hidden;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 text-overflow: ellipsis;
 display: -webkit-box;
}

.product-old-price {
 color: var(--fizz-grey-700, #808080);
 font-family: "Space Grotesk";
 font-size: 12px;
 font-style: normal;
 font-weight: 400;
 line-height: 120%;
 text-decoration-line: line-through;
 margin: 0px;
}

.product-old-price.hidden,
.product-voucher-text.hidden {
 visibility: hidden;
}

.product-old-price.row-hidden,
.product-voucher-text.row-hidden {
 display: none !important;
}

.product-price {
 color: var(--fizz-price-green, #006648);
 font-family: "Space Grotesk";
 font-size: 22px;
 font-style: normal;
 font-weight: 700;
 /*line-height: 120%; */ /* 26.4px */ 
 margin: 0px 0 8px;
}

.product-price p {
  margin:0;
}

.product-new-price {
 color: var(--fizz-error-red, #FF001F);
}

.product-details {
 gap: 8px;
 margin-bottom: 0px;
 margin-block-start: 14px;
 justify-content: center;
 align-self: stretch;

 text-align: center;
 font-weight: 600;
}

.product-details img {
 width: 16px;
 height: 16px;
 display: inline-block;
 margin-left: 0px;
}

.product-details.secondary-button{
  margin-top:8px;
}

.product-loading {
 background: linear-gradient(90deg, rgba(217, 217, 217, 1) 0%, var(--fizz-div-background, white) 100%);
 border-radius: 8px;

 display: flex;
 animation: wave1 2s infinite ease-in-out;
}

@keyframes wave1 {
 0%, 100% {
   width: 100%;
 }
 50% {
   width: 70%;
 }
}

.product-image.product-loading {
 width: 100%;
}

.product-title-line {
 font-size: 14px;
 line-height: 19.6px;
 margin: 0 0 8px;
 width: 90%;
 height: 15px;
 border-radius: 4px;
}

.product-title-line:nth-child(2) {
 width: 70%;
 animation: wave3 2s infinite ease-in-out;
}

@keyframes wave3 {
 0%, 100% {
   width: 80%;
 }
 50% {
   width: 60%;
 }
}

.product-price.product-loading {
 width: 50%;
 animation: wave2 2s infinite ease-in-out;
}

@keyframes wave2 {
 0%, 100% {
   width: 80%;
 }
 50% {
   width: 40%;
 }
}

.product-details.product-loading {
 height: 42px;
 padding: 0px;
 width: 80%;
}

/* COUPON LIST: */
.coupon-categories-list {
 display: flex;
 flex-direction: column;
 gap: 32px;
 justify-content: center;
 max-width: calc(
   var(--fizz-item-card-width, 258px) * 4
   + var(--fizz-item-grid-gap, 10px) * 3);
 width: 100%;
}


@media screen and (min-width: 800px) and (max-width: 900px) {
 :root {
  --fizz-item-card-width: 229px;
 }
}

@media screen and (min-width: 800px)
  and (max-width: calc(
   258px * 4
   + 10px * 3
   + 2 * 32px
  ))
{
 .coupon-categories-list.centered {
  max-width: calc(
   var(--fizz-item-card-width, 258px) * 3
   + var(--fizz-item-grid-gap, 10px) * 2);
 }
}


.coupon-categories-list.centered {
 margin: 0 auto;
}

#coupon-category-item-template {
 display: none;
}

.coupon-category-item {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.coupon-category-item .coupon-list-category-title h3 {
 color: var(--fizz-text-default, black);
 font-family: "Space Grotesk";
 font-size: 20px;
 font-style: normal;
 font-weight: 500;
 line-height: 140%;
 margin: 0;
}

body.black .coupon-category-item .coupon-list-category-title h3 {
 color: var(--fizz-text-negated, white);
}

/* COUPON CARD: */
.coupon-card {
 display: flex;
 flex-direction: column;
 align-items: flex-start;

 color: var(--fizz-text-default, black);
}

.coupon-card p, .coupon-card span, .coupon-card a {
 margin: 0;
 padding: 0;

 font-family: Inter, Tahoma;
 color: var(--fizz-grey-900, #0D0F13);
 font-size: 12px;
 font-style: normal;
 font-weight: 700;
 line-height: 150%;
}

.coupon-card-main-link {
 width: 100%;
 height: 100%;
}

.coupon-card:hover .coupon-card-header,
.coupon-card:hover .coupon-card-content {
 box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.04), 0px 8px 10px -6px rgba(0, 0, 0, 0.04);
 transition: box-shadow 0.3s ease;
}

.coupon-card .coupon-card-header,
.coupon-card .coupon-card-content {
 transition: box-shadow 0.3s ease;
}

.coupon-card-header {
 display: flex;
 flex-direction: column;
 
 border-radius: 16px;
 background-color: var(--fizz-div-background, white);
 overflow: hidden;
}

.coupon-card-header .coupon-card-header-image {
 --coupon-card-image-margin: 12px;

 display: flex;
 align-items: center;
 justify-content: center;
 width: calc(100% - 2 * var(--coupon-card-image-margin));
 height: calc(188px - var(--coupon-card-image-margin));
 max-height: 188px;
 margin: var(--coupon-card-image-margin);
 margin-bottom: 0px;
}

.coupon-card-header .coupon-card-header-image img {
 max-width: 100%;
 max-height: 100%;

 width: auto;
 height: auto;
 max-height: 100%;
 object-fit: contain;
}

.coupon-card-header-content {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin: 8px 12px;
 gap: 2px;
}

.coupon-card-header-content .coupon-card-title {
 --coupon-card-name-lines: 1;

 font-size: 14px;
 font-weight: 500;

 max-width: 100%;
 height: calc(var(--coupon-card-name-lines) * 14px * 1.5);
 overflow: hidden;
 -webkit-line-clamp: var(--coupon-card-name-lines);
 -webkit-box-orient: vertical;
 text-overflow: ellipsis;
 display: -webkit-box;
 text-align: center;
}

.coupon-card-header-content .coupon-card-min-order-value {
 font-weight: 400;

 overflow: hidden;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 text-overflow: ellipsis;
 display: -webkit-box;
 text-align: center;
}

.coupon-card-content {
 border-radius: 16px;
}

.coupon-card-discount-title {
 display: flex;
 flex-direction: row;
 gap: 8px;
 justify-content: center;
 align-items: center;
 padding: 8px 12px;

 border-radius: 16px 16px 0px 0px;
 background: var(--fizz-coupon-background-dark, #FC0);
}

.coupon-card-discount-title > span {
 font-size: 14px;
 font-weight: 600;

 color: var(--fizz-coupon-dark-text, #1B1F27);
}

.coupon-card-discount-title .coupon-card-discount-value {
 font-family: "Space Grotesk";
 font-size: 24px;
 font-weight: 700;
 line-height: 120%;

 color: var(--fizz-coupon-dark-text, #1B1F27);
}

.coupon-card-discount-body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 8px;

 border-radius: 0px 0px 16px 16px;
 border: 1px dashed var(--fizz-coupon-background-dark, #FC0);
 background-color: var(--fizz-coupon-background-light, #FFF7D9);

 gap: 6px;
}

.coupon-card-discount-body .coupon-card-voucher-code-label {
 font-size: 14px;
 font-weight: 400;

 color:transparent;
  background:var(--fizz-coupon-code-text, #0D0F13);
  background-clip:text;
  -webkit-background-clip:text;
}

.coupon-card-discount-body .coupon-card-voucher-code-value {
 font-size: 16px;
 font-weight: 700;

 color:transparent;
  background:var(--fizz-coupon-text, #FC0);
  background-clip:text;
  -webkit-background-clip:text;
}

.coupon-card-discount-body .coupon-card-links {
 display: flex;
 flex-direction: row;
 gap: 12px;
}

.coupon-card-discount-body .coupon-card-link {
 font-weight: 700;
 line-height: 150%; /* 18px */
 text-transform: uppercase;
 text-decoration: none;
 cursor: pointer;
}

.coupon-card-discount-body .coupon-card-link:hover {
 color: var(--fizz-grey-600);
}

body.no-coupon-discount-body .coupon-card-discount-title {
 border-radius: 16px;
}

body.no-coupon-discount-body .coupon-card-discount-body {
 display: none;
}

/* COUPON CARD - LOADING: */
div.coupon-card.product-card-lazy .coupon-card-header-image {
 justify-content: start;
 margin: 0 12px;
 width: calc(100% - 2 * 12px);
}

div.coupon-card.product-card-lazy .coupon-card-header-image div {
 height: 80%;
}

div.coupon-card.product-card-lazy .coupon-card-header-content {
 align-items: start;
}

div.coupon-card.product-card-lazy .coupon-card-discount-title,
div.coupon-card.product-card-lazy .coupon-card-discount-body,
div.coupon-card.product-card-lazy .coupon-card-links {
 background-color: var(--fizz-coupon-background-light, #FFF7D9);
 justify-content: start;
 border: none;
 align-items: start;
}

div.coupon-card.product-card-lazy .coupon-card-content .product-loading {
 background: linear-gradient(90deg, rgba(217, 217, 217, 1) 0%, transparent 100%);
}

div.coupon-card.product-card-lazy .coupon-card-title {
 width: 70%;
 animation: wave3 1.5s infinite ease-in-out;
}

div.coupon-card.product-card-lazy .coupon-card-discount-body .coupon-card-voucher-code-value {
 width: 90%;
 animation: wave2 2s infinite ease-in-out;
}

div.coupon-card.product-card-lazy .coupon-card-discount-body .coupon-card-voucher-code-label {
 width: 30%;
 animation: wave3 2.1s infinite ease-in-out;
}

div.coupon-card.product-card-lazy .coupon-card-discount-body .coupon-card-links {
 width: 75%;
 animation: wave1 1.5s infinite ease-in-out;
}

div.coupon-card.product-card-lazy .coupon-card-discount-body .coupon-card-link {
 width: 80%;
 animation: wave3 1.7s infinite ease-in-out;
}

/* ERROR CONTENT: */
.error-content {
 width: calc(100% - 64px);
 max-width: 512px;
 margin: 64px auto;
 padding: 64px;
 padding: 32px;
 border-radius: 16px;
 background-color: var(--fizz-div-background, white);
 color: var(--fizz-text-default, black);
}

body.black .error-content {
 color: var(--fizz-text-negated, white);
}

.error-text {
 width: fit-content;
 margin: 0 auto;
 text-align: center;
}

.error-text svg {
 display: block;
 margin: auto;
}

.error-text h2 {
 margin-top: 32px
}

.error-text h3 {
 margin-top: 16px;
 margin-bottom: 16px;
}

.error-text .prefooter-cta {
 width: fit-content;
 margin: 32px auto 0;
}

.error-text .prefooter-cta .primary-button span {
 padding: 3px 8px;
}

/* PREFOOTER */
.prefooter-cta {
 display: block;

 margin: 32px 8px 0 auto;

 max-width: calc(
   var(--fizz-item-card-width, 258px) * 4
   + var(--fizz-item-grid-gap, 10px) * 3
  );
 width: calc(
   var(--fizz-item-card-width, 258px) * 4
   + var(--fizz-item-grid-gap, 10px) * 3
  );
}

#more-offers-button-products-list {
 grid-column: 1 / -1;
 display: block;
 margin-top: calc(32px - 10px);
}

/* The whole width version */
#more-offers-button-prefooter {
 margin-top: 32px;
}

.more-offers-buttons .primary-button {
 font-weight: 600;
}


.cta-button {
 color: var(--fizz-text-negated, white);
 font-weight: 600;
 background-color: var(--fizz-purple, #8036F5);
 text-align: center;

 display: block;
 width: calc(100% - 32px);
 border-radius: 8px;
 padding: 12.5px 16px;
 
 font-size: 14px;
 line-height: 21px;
}

.cta-button p {
 margin: 0px;
}

.prefooter {
 display: grid;
 grid-template-columns: auto auto auto 1fr auto;
 align-items: center;
 width: auto;
 padding: 32px;
 background-color: var(--fizz-div-background, white);
 border-radius: 16px;
 margin-top: 64px;
}

body.black .prefooter {
 background-color: var(--fizz-grey-800, #1B1F27);
}

.prefooter-icon {
 margin-right: 24px;
}

.prefooter-icon img {
 width: 24px;
 height: 24px;
 display: block;
}

body.black .prefooter-icon svg path {
 stroke: var(--fizz-text-negated, white);
}

.preefooter-title {
 color: var(--fizz-grey-900, #0D0F13);
 /* Space Grotesk Medium/H4 */
 font-family: "Space Grotesk";
 font-size: 24px;
 font-style: normal;
 font-weight: 500;
 line-height: 120%; /* 28.8px */
 width: fit-content;
 max-width: 210px;
}

body.black .preefooter-title {
 color: var(--fizz-text-negated, white);
}

.prefooter-item img {
 max-width: initial;
 width: 126px;
 display: block;
}

.prefooter-divider {
 height: 32px;
 border-left: 3px solid var(--fizz-purple, #8036F5);
 width: 3px;
 margin: 0 32px;
}

body.black .prefooter-divider {
 border-left: 3px solid var(--fizz-grey-600, #505050);
}

.prefooter-text{
 font-size: 14px;
 font-weight: 400;
 text-align: left;
 line-height: 21px;
 color: var(--fizz-grey-600, #505050);
 margin-right: 32px;
}

body.black .prefooter-text {
 color: var(--fizz-text-negated, white);
}

.content-details {
 display: flex;
 padding: 12.5px 16px;
 justify-content: center;
 align-items: center;
 border-radius: 8px;
 background: var(--fizz-purple, #8036F5);
 font-size: 14px;
 font-weight: 600;
}

body.black #prefooter-conditions-url.secondary-button {
 background: transparent;
 color: var(--fizz-text-negated, white);
 border: 2px solid var(--fizz-text-negated, white);
}

body.black #prefooter-conditions-url.secondary-button:hover {
 background: var(--fizz-grey-600, #505050);
}

/* FOOTER */
.footer {
 background-color: var(--fizz-div-background, white);
 border-radius: 320px 320px 0px 0px;
 padding: 47.85px 0;
 text-align: center;
 font-family: Inter, Tahoma, sans-serif;
 margin-top: 64px;
}

body.black .footer {
 background-color: var(--fizz-grey-800, #1B1F27);
}

.footer-secondary .footer {
 background: var(--fizz-background-green, #52AE30);
 color: var(--fizz-text-negated, white);
}

.footer-content {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 width: min-content;
 margin: 0 auto;
}

@media (width < 1141px){
     .items-list-text {
        max-width:800px;
       }
}

@media (width < 1024px) {
 .footer-content {
  flex-wrap: wrap;
 }
}

.footer-logo {
 width: 102px;
 height: auto;
 margin-right: 8px;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.footer .footer-logo.footer-logo-inverted {
 display: none;
}

.footer-secondary .footer-logo {
 display: none;
}

.footer-secondary .footer-logo.footer-logo-inverted {
 display: block;
}

.footer-legal-links {
 display: flex;
 flex-direction: row;
 gap: 16px;
 align-items: center;
 justify-content: center;
}

.footer-text {
 font-size: 12px;
 color: var(--fizz-grey-500, #A6A6A6);
 margin: 0;
 padding: 0;
 /* line-height: 40px; */
 text-decoration: none;
 white-space: nowrap;
}

/* #legal-docs-url.footer-text {
 margin-left: 16px;
} */

body.black .footer-text {
 color: var(--fizz-text-negated, white) !important;
}

a.footer-text:hover {
 color: var(--fizz-purple-hover, #995ef7) !important;
}

body.black .footer-text:hover {
 color: var(--fizz-grey-500, #A6A6A6) !important;
}

#copyright-year {
 margin-right: 16px;
}

.footer-divider {
 height: 8px;
 border-left: 1px solid var(--fizz-grey-500, #A6A6A6);
 margin: 0px;
}

.footer-secondary .footer-text {
 color: var(--fizz-text-negated, white);
}

.footer-secondary  .footer-divider {
 border-left: 1px solid var(--fizz-div-background, white);
}

/* RECAPTCHA */
.footer-secondary .recaptcha-footer {
 display: none;
}

.recaptcha-footer {
 background-color: var(--fizz-background, #F7F7F7);
 width: 100%;
 font-family: Inter, Tahoma, sans-serif;
 text-align: center;
 padding: 8px 0;
}

body.black .recaptcha-footer {
 background-color: var(--fizz-grey-900, #0D0F13);
}

.recaptcha-text {
 font-size: 11px;
 font-weight: 400;
 color: var(--fizz-grey-500, #A6A6A6);
 margin: 0;
 padding: 0;
 line-height: 15.94px;
}

body.black .recaptcha-text,
body.black .recaptcha-text a {
 color: var(--fizz-grey-500, #A6A6A6);
}

.recaptcha-link {
 text-decoration: underline;
 color: var(--fizz-grey-500, #A6A6A6) !important;
}

body.black .recaptcha-text a:hover {
 color: var(--fizz-text-negated, white) !important;
}

/* SIDE BUTTON: */
.side-button {
 /* display: none; */
 color: var(--fizz-purple, #8036F5);
 font-weight: 700;
 background: var(--fizz-background, #F7F7F7);

 display: none; /* hide on desktop */
 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 opacity: 1;
}

body.black .side-button {
 color: var(--fizz-text-negated, white);
 background: var(--fizz-grey-800, #1B1F27);
}

.side-button.hidden {
 transform: translateX(calc(-100% - 50px));
 opacity: 0;
}

.side-button svg path {
 stroke: var(--fizz-purple, #8036F5);
}

body.black .side-button svg path {
 stroke: var(--fizz-text-negated, white);
}

/* SPINNER (LOADING): */
#spinner {
 /* display: none; */
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--fizz-spinner-background, rgba(255, 255, 255, 0.97));
 z-index: 999;

 transition: opacity 0.7s ease, background-color 0.7s ease;
}

body.black #spinner {
 transition: opacity 0.25s ease, background-color 0.25s ease;
}

.spinner-hidden {
 opacity: 0;
 pointer-events: none;
}

.spinner-logo img {
 width: 150px;
 text-align: center;
 margin-top: calc(50vh - 80px);
 margin-bottom: 0;
 margin-left: auto;
 margin-right: auto;
 display: block;
}

.spinner-icon {
  border: 16px solid #f3f3f3;
 border-top: 16px solid var(--fizz-background-green, #52AE30);
 border-radius: 50%;
 width: 64px;
 height: 64px;
 animation: spin 2s linear infinite;
 display: block;
 margin: 30px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* NO SCRIPT: */
.noscript-banner {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: var(--fizz-div-background, white);
 z-index: 9999;
}

.noscript-text {
 padding: 0;
 width: fit-content;
 margin: 0 auto;
 position: relative;
 top: 40%;
}

.noscript-text img {
 display: block;
 width: 150px;
 margin: 0 auto 30px;
}

.noscript-text p {
 font-size: 14px;
 font-weight: 400;
 color: var(--fizz-grey-600, #505050);
 line-height: 21px;
 text-align: center;
}

/* COOKIES OPENER: */
.cookies-opener {
 position: relative;
 display: inline-block;
 /* width: 16px;
 height: 16px; */
 /* margin-left: 6px; */
 cursor: pointer;
}

.cookies-opener a {
 width: 100%;
 height: 100%;
 display: block;
 /* margin: 10%; */
}

/* .cookies-opener svg {
 width: 100%;
 height: 100%;
}

.cookies-opener svg:hover {
 opacity: 0.8;
}

.cookies-opener svg path {
 fill: var(--fizz-purple, #8036F5);
} */

/* ---------------- */
/* MOBILE CHANGES: */
/* -------------- */
@media (width < 800px) {
 /* since iOS26 makes our lives much simpler... */
 /* html {
    height: 110dvh;
    overflow: hidden;
  }
  body {
    height: 100dvh;
    overscroll-behavior: contain;
    overflow: scroll;
  } */

 /* and normal styling: */
 body {
  box-sizing: border-box;
  --mobile-side-margin: 16px;
 }

 .not-on-mobile {
  display: none !important;
 }

 .content {
  display: block;
  max-width: 100vw;
  margin-top: 0px;
 }

 /* FIZZ NOTIFICATION: */
 #fizz-notification-center {
  top: 20px;
  right: 12px;
 }

 .mobile-only-centering {
  margin: 0 var(--mobile-side-margin);
  width: calc(100% - 2*var(--mobile-side-margin));
 }

 /* HEADER: */
 header {
  position: inherit;
 }
 
 .header {
  height: 40px;
  padding: 8px 16px;
  width: calc(100% - 32px);
 }

 .header .primary-button {
  padding: 6.5px 16px;
 }

 .logo img {
  height: 30px;
  width: auto;
 }
 .cta p {
  margin: 8px;
 }

 .gradient {
  display: none;
 }

 .container {
  /* width: calc(100% - 32px); */
  width: 100%;
 }

 /* PROMO: */
 .top-banner {
  width: 100%;
    border-radius: unset;
    position: relative;
  height: calc(100vw*(160 / 390));
    max-height: none;
  /* Ensure minimum height to prevent layout shift */
  min-height: 120px;

  /* margin-top: 16px; */
 }

 .top-banner-text {
  width: fit-content;
  text-align: right;
  font-size: 50px;
  margin: 0 32px;
  top: calc(50% - 25px);
  right: 0;
 }

 /* CAROUSEL: */
 .carousel {
  --carousel-top-padding: 16px;

  position: relative;
  top: 0;
  box-shadow: none;
  width: 100%;
  margin-bottom: 0px;
  /* Maintain consistent height on mobile */
  min-height: 96px;
 }

 .carousel__button {
  display: none;
 }

 .carousel__track {
  --show-items: 4;
  --item-gap: 8px;
  --item-width-height: calc(((100vw - 2 * var(--mobile-side-margin)) - (var(--show-items) - 1) * var(--item-gap)) / var(--show-items));

  margin: 8px 0px 0px;
  overflow: hidden;
  width: 100%;
  max-height: var(--item-width-height);
  display: grid;

    grid-template-columns: repeat(auto-fit, var(--item-width-height));
 }

 .carousel__track-container {
  margin: 0 16px;
  width: calc(100% - 2*var(--mobile-side-margin));
  overflow: hidden;
 }

 .carousel__item {
  width: 100%;
  height: var(--item-width-height);
 }

 .carousel__item.selected a,
 body.black .carousel__item.selected a {
  padding: 4px 4px 6px;
 }

 a.carousel__item_link {  
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px 4px 6px;
 }

 .carousel__item_name {
  --max-lines: 2;
 }

 .carousel__item_image {
  max-width: 85%;
    max-height: calc(100% - 42px);
  height: 100%;
 }

 a.carousel__item_link p {
  height: 31px;
    overflow: hidden;
  width: 100%;
 }

 #show-categories-button-in-page {
  margin-top: 16px;
  gap: 8px;
 }

 #show-categories-button-in-page svg path {
  stroke: var(--fizz-text-negated, white);
  stroke-width: 1.5px;
 }

 /* CATEGORIES OVERLAY: */
 .categories-overlay-content {
  height: auto;
  max-height: 3000px;
  height: 100%;
 }

 .categories-overlay-content-main {
  display: flex;
  flex-direction: column;
  gap: 16px;

  padding-top: 16px;
  width: calc(100% - 32px);
    margin: auto;

  max-height: 1000px;
  height: 100%;
  transition: max-height 0.3s ease-in;
 }

 #categories-overlay .carousel__track {
    margin-top: 0px;
    max-height: unset;
  overflow: scroll;
 }

 #categories-overlay .carousel__track.new-items-loading .carousel__item {
  opacity: 0;
  transition: opacity 0.4s ease-in;
 }

 #categories-overlay .carousel__track .carousel__item {
  opacity: 1;
  transition: opacity 0.4s ease-in;
 }

 #categories-overlay .categories-overlay-footer {
  margin-top: 16px;
  padding: 16px 16px 24px;
  background-color: var(--fizz-div-background, white);
 }

 body.black #categories-overlay .categories-overlay-footer {
  background-color: var(--fizz-grey-800, #1B1F27);
 }

 #categories-overlay .categories-overlay-footer .primary-button {
  width: 100%;
 }

 .categories-overlay-navigation {
  display: flex;
 }

 .categories-overlay-navigation button.invisible-button span {
  font-weight: 600;
 }

 .invisible-button {
  padding: 0px;
  background-color: transparent;
  border: none;
  color: var(--fizz-text-default, black);
 }

 body.black .invisible-button {
  color: var(--fizz-text-negated, white);
 }

 .invisible-button svg path {
  stroke: var(--fizz-text-default, black);
 }

 .categories-overlay-navigation-button {
  display: flex;
 }

 body.black .invisible-button svg path {
  stroke: var(--fizz-text-negated, white);
 }

 .text-divider {
  margin: 0 8px;
  border-left: 1px solid var(--fizz-text-default, black);
 }

 body.black .text-divider  {
  border-left: 1px solid var(--fizz-text-negated, white);
 }

 .categories-overlay-navigation span {
  color: var(--fizz-text-default, black);
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
 }

 body.black .categories-overlay-navigation span {
  color: var(--fizz-text-negated, white);
 }
 
 /* CATEGORIES: */
 #categories {
  --categories-top-padding: 8px;
  padding-bottom: 8px;
  top: 0px !important;
  /* Maintain consistent height on mobile */
  min-height: 47px;
 }

 .category-picker {
  flex-wrap: nowrap;
  scrollbar-width: 2px;
  margin: 0 0px;
  padding: 0px 0 0px;
 }

 .category-picker__item:nth-child(2) {
  margin-left: 16px;
 }

 .category-picker__item:last-child {
  margin-right: 16px;
 }

 a.category-picker__item_link {
  --category-picker-vertical-padding: 4px;
    --category-picker-horizontal-padding: 8px;
  display: flex;
    width: max-content;

  /* padding: 4px 8px; */
  gap: 4px;
  border-radius: 8px;
 }

 body.black .category-picker__item.selected a {
  
 }

 .category-picker__item_image {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
 }

 /* PRODUCT-FILTER */
 .product-column-one {
  position: absolute;
 }

 .product-column-one-item {
  margin-bottom: 0px;
 }

 .product-filter {
  display: flex;
  width: 100vw;
    height: 100vh;
  padding: 0 0;
  justify-content: flex-end;
  gap: 0px;

  z-index: 888;

  position: fixed;
  top: unset;
    bottom: 0px;
  left: 0px;

  border-radius: 0;

  background-color: var(--fizz-grey-overlay, #1b1f27b8) !important;
  backdrop-filter: blur(2px);
  border: none;

  transform: translateY(0);
    transition: transform 0.33s;
 }

 .product-filter.hidden {
  transform: translateY(100%);
 }

 .product-filter-title {
  display: block;
  padding: 16px;
  width: calc(100% - 32px);
    border-radius: 16px 16px 0px 0px;  
 }

 .product-filter-title > div {
    display: block;
    width: 100%;
 }

 .range-input input::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 3px solid var(--fizz-purple, #8036F5);
  background-color: var(--fizz-purple, #8036F5);
  pointer-events: auto;
  -webkit-appearance: none;
 }
 .range-input input::-moz-range-thumb {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid var(--fizz-purple, #8036F5);
  background-color: var(--fizz-div-background, white);
  pointer-events: auto;
  -moz-appearance: none;
 }

 .close-slider {
  width: 48px;
    height: 4px;
    position: relative;
    left: calc(50% - 24px);
    top: -6px;
    display: block;
    border-radius: 2px;
    background-color: var(--fizz-grey-600, #505050);
 }

 .product-filter-title div span {
  line-height: 30px;
 }

 .close-popup {
  float: right;
 }

 .product-filter-content {
  background-color: var(--fizz-background, #F7F7F7);
  padding: 16px 16px 24px 16px;
    width: calc(100% - 32px);
  margin-bottom: 0px;
 }

 body.black .product-filter-content {
  background-color: var(--fizz-grey-900, #0D0F13);
 }

 .product-filter-content .product-filter-header span {
  width: fit-content;
 }

 .filter-footer {
  display: flex;
    padding: 12px 12px 16px;
    width: calc(100% - 2* 12px);
  background-color: var(--fizz-background, #F7F7F7);
 }

 body.black .filter-footer {
  background-color: var(--fizz-grey-900, #0D0F13);
 }


 #apply-filter {
  position: relative;
  width: 100%;
 }

 #apply-filter.loading {
  pointer-events: none;
  font-size: 0px;
 }

 #apply-filter.loading::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 10px;
 }

 #apply-filter.loading::after {
  content: '...';
  display: inline-block;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 10px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 5px;
  animation: loadingDots 1s infinite;
 }

 @keyframes loadingDots {
  0%, 20% {
   content: '.';
  }
  40% {
   content: '..';
  }
  60% {
   content: '...';
  }
  80%, 100% {
   content: '';
  }
 }

 .filter-footer-reset {
    margin-right: 24px;
    margin-top: 12px;
    font-size: 14px;
  color: var(--fizz-text-negated, white);
 }

 .range-price {
  /* width: fit-content; */
  width: 100%;
  justify-content: center;
    align-items: center;
 }

 /* PRODUCTS: */
  .product-corner-img{
  width:72px;
  height:72px;
}
 .product-container {
  position: inherit;
  flex-direction: column;
  margin: 0 16px;
 }

 .items-list-container {
  flex: unset;
 }

 .category-line {
  margin: 16px;
 }

 .tab-header-line {
  margin-top: 16px;
  margin-bottom: 8px;
 }

 .tab-header-line h2 {
  color: var(--fizz-text-default, black);
  /* Header | Space Grotesk/H6 medium */
  font-family: "Space Grotesk";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
 }

 body.black .tab-header-line h2 {
  margin: 0;
  color: var(--fizz-text-negated, white);
 }

 .product-list, .coupon-category-items-list {
  padding: 0px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, calc(50% - var(--fizz-item-grid-gap, 8px) / 2) calc(50% - var(--fizz-item-grid-gap, 8px) / 2));
  gap:8px !important;

  width: 100%;
  max-width: calc(
    224px* 2
    + var(--fizz-item-grid-gap, 10px));
  margin: 0 auto;
 }

 /* Ensure coupon category items are centered on mobile */
 .coupon-category-items-list {
  justify-content: center;
 }

 body.single-coupon-left-align .coupon-category-items-list {
  justify-content: left;
 }

 /* COUPON CATEGORY (COLLAPSIBLE): */
 .coupon-category-item.items-list-collapsible {
  gap: 8px;
 }

 .coupon-category-item.items-list-collapsible .coupon-category-items-list {
  max-height: 1050px;
  padding-bottom: 0px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s cubic-bezier(.87,0,.13,1),
    padding 0.3s cubic-bezier(.87,0,.13,1);
 }

 .coupon-category-item.items-list-collapsible.opened .coupon-category-items-list {
  max-height: 10000px;
  padding-bottom: 16px;
  transition: max-height 0.3s cubic-bezier(.87,0,.13,1),
    padding 0.3s cubic-bezier(.87,0,.13,1);
 }

 .coupon-category-item.items-list-collapsible:not(.opened) .coupon-category-items-list::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(247, 247, 247, 0.00) 0%, #F7F7F7 100%);
  pointer-events: none;
 }
 
 body.black  .coupon-category-item.items-list-collapsible:not(.opened) .coupon-category-items-list::after {
  background: linear-gradient(180deg, rgba(247, 247, 247, 0.00) 0%, #0D0F13 100%);
 }

 .coupon-category-item.items-list-collapsible .coupon-category-more-offers {
  display: flex;
 }
 
 .coupon-category-item .coupon-category-more-offers .secondary-button {
  width: 100%;
  gap: 8px;
  max-width: calc(224px * 2 + var(--fizz-item-grid-gap, 10px));
  margin: auto;
  box-sizing: border-box;
 }

 .coupon-category-item .coupon-category-more-offers .secondary-button svg {
  transition: transform 0.3s ease;
 }

 div.opened > .coupon-category-item .coupon-category-more-offers {
  max-height: 0px !important;
  transition: max-height 0.3s ease;
  overflow: hidden;
 }

 /* Keep title aligned with first column position on mobile */
 .coupon-list-category-title {
  width: 100%;
  max-width: calc(
    224px* 2
    + var(--fizz-item-grid-gap, 10px));
  margin: 0 auto;
  padding-left: 0;
 }

 .product-card {
  display: block;
  width: auto;
  max-width: 224px;
  flex: 0 0 35%;
  /* Maintain consistent height on mobile */
  min-height: 350px;
  border-radius:8px;
 }

 .product-image.product-loading {
  width: 100%;
 }

 .product-voucher-text {
  height: calc(12px * 3 * 1.4);
  display: flex;
  align-items: center;
 }

 .product-voucher-text p {
    max-height: 100%;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
 }

 .no-products {
  width: 100%;
  margin-left: 0;
 }

 .no-products-content {
  max-width: 100%;
    width: 100%;
 }

 /* COUPON CARD: */
 .coupon-card-header-content .coupon-card-title {
  --coupon-card-name-lines: 2;
 }
 
 
 .coupon-card-discount-title {
  flex-direction: column;
  gap: 0px;
 }

 /* COUPON CARD - LOADING: */


 /* ERROR CONTENT: */
 .error-content {
  width: calc(100vw - 64px - 32px);
  margin: 16px auto 0;
  padding: 32px;
 }

 .coupon-card-discount-title > span {
  font-size: 12px;
 }

 .coupon-card-discount-title .coupon-card-discount-value {
  font-size: 18px;
  line-height: 130%;
 }

 .coupon-card-discount-body .coupon-card-voucher-code-value {
  font-size: 14px;
 }

 .coupon-card-discount-body .coupon-card-links {
  flex-direction: column;
  align-items: center;
  gap: 4px;
 }

 .coupon-card-discount-body .coupon-card-link {
  font-size: 12px;
 }

 /* PREFOOTER: */
 .prefooter-cta {
    width: calc(100% - 32px);
    margin: 32px auto 0;

 }

 #more-offers-button-prefooter {
  margin-left: 16px;
  margin-right: 16px;
 }

 .prefooter {
  display: block;
  width: calc(100% - 64px);
  padding: 16px;
  flex-direction: column;
  margin: 32px 16px 0;
 }

 .prefooter-icon {
  width: fit-content;
    float: left;
 }

 .prefooter-item {
  width: fit-content;
    float: left;
 }

 div.prefooter-item:last-child {
  width: 100%;
    float: none;
 }

 p.preefooter-title {
  margin: 0 !important;
  max-width: unset;
 }

 .prefooter-divider {
  display: none;
 }

 .footer {
  width: calc(100% - 2* 12px);
  padding: 32px 12px;
  border-radius: 64px 64px 0px 0px;
 }

 div.footer-content {
  display: block;
  width: 100%;
 }

 .footer-divider {
  display: inline-block;
  width: min-content;
  height: 10px;
  margin: 0px 4px;
 }

 #copyright-year {
  margin: 16px 0 24px;
 }

 .footer-legal-links {
  display: block;
 }

 .footer-secondary .footer-divider {
  margin: 0 8px;
 }

 /* SIDE BUTTON: */
 .side-button {
  display: inline-flex;
  height: 26px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: fit-content;
  position: fixed;
  left: 24px;
  bottom: 16px;
  z-index: 2;

  border-radius: 8px;
  border: 2px solid var(--fizz-purple, #8036F5);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10),
    0px 4px 6px -4px rgba(0, 0, 0, 0.10);
 }

 body.black .side-button {
  border: 2px solid var(--fizz-grey-800, #1B1F27);
 }

 .side-button.item-number-1 {
  bottom: 16px;
 }

 .side-button.item-number-2 {
  bottom: calc(16px + 8px + 46px);
 }

 .side-button.item-number-3 {
  bottom: calc(16px + 2 * (8px + 46px));
 }
}

@media (width <= 480px) {
     .primary-button {
         padding: 12px 8px;
       }
   .product-info {
     margin: 8px 0px 0;
     width: 100%;
}
   .items-list-text{
      max-width:100% !important;   
      font-size:16px !important;
      line-height:130% !important;
      top:0;
    }
 .carousel__track {
  --show-items: 3;
 }
}

@media (300px <= width < 450px) {
 .coupon-card-voucher-code {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
 }
}

@media (width < 350px) {
 .header {
  flex-direction: column;
  gap: 8px;
  height: fit-content;
 }

 .header .primary-button {
  padding: 6px;
 }

 .header .primary-button span {
    margin-left: 0px;
 }

 .header .primary-button img {
  margin-right: 0px;
 }

 p.prefooter-text {
  margin-right: 0px;
 } 

 .product-filter-content .product-filter-header {
  float: none;
  margin-top: 0px;
 }
}

@media (width < 300px) {
 .product-list, .coupon-category-items-list {
  grid-template-columns: 100%;
 }
}


.fizz_scrollbar {
  position: relative;
  left: 0;
  width: calc(100% - 8px);
  height: 4px;
 padding: 4px 4px;
 background: transparent;
 border-radius: 2px;
  top: 0px;
  margin: 0px;

  border-radius: 8px;
  background: var(--fizz-div-background);
}

body.black .fizz_scrollbar {
  background: var(--fizz-grey-800, #1B1F27);
}

.fizz_scrollbar_thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: 4px;
  width: 10%;
  background: var(--fizz-grey-disabled, #CCCCCC);
  border-radius: 2px;
 cursor: grab;
  transition: height 0.075s ease-out, top 0.075s ease-out;

  margin: 0px 4px;
}

body.black .fizz_scrollbar_thumb {
  background: var(--fizz-grey-600, #505050);  
}

.fizz_scrollbar.hidden {
  /* background: transparent !important; */
  display: none !important;
}

.fizz_scrollbar.hidden .fizz_scrollbar_thumb {
  display: none;
}

.fizz_scrollbar_thumb:hover,
.fizz_scrollbar_thumb.dragging {
  top: 2px;
  height: 8px;
  transition: height 0.075s ease-out, top 0.075s ease-out;

  border-radius: 6px;
}

.fizz_scrollbar_thumb.dragging {
  cursor: grabbing;
}

@media screen and (max-width: 768px) {
 .fizz_scrollbar {
  margin: 4px 8px;
  width: calc(100% - 16px);
 }
}

@media screen and (max-width: 800px) {
 .fizz_scrollbar {
  margin: 4px 8px;
  width: calc(100% - 16px);
 }
}

/* FIZZ NOTIFICATION: */
#fizz-notification-center {
 width: fit-content;
 position: fixed;
 top: 48px;
 right: 40px;
 z-index: 1000;
}

#fizz-notification-center-content {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.fizz-notification {
 width: fit-content;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 16px;

 border-radius: 8px;
 
 background: #006648;
 box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.fizz-notification.fadeIn {
 animation: fadeIn 0.2s ease;
}

.fizz-notification.fadeOut {
 animation: fadeOut 0.5s ease;
}

@keyframes fadeIn {
 from {
  opacity: 0;
  transform: translateY(100%);
 }
}

@keyframes fadeOut {
 to {
  opacity: 0;
  transform: translateX(100%);
 }
}

.fizz-notification p {
 color: var(--default-white, #FFF);
 font-family: Inter;
 font-size: 14px;
 font-style: normal;
 font-weight: 500;
 line-height: 140%;
 margin: 0;
}

.fizz-notification svg {
 width: 16px;
 height: 16px;

 padding-left: 12px;
 border-left: 1px solid #A8CCAB;
 cursor: pointer;
}

#fizz-notification-template {
 display: none;
}

@media (width <= 768px) {
 #fizz-notification-center {
  top: 20px;
  right: 12px;
 }
}

/* OVERLAY PANEL STYLES: */
.overlay-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

 z-index: 100;

  transform: translateY(0%);

 z-index: 12;
}

/* .overlay-panel::before {
 display: block;
 content: '';
 width: 100%;
 height: 100%;
 backdrop-filter: blur(2px);
 background-color: var(--fizz-grey-overlay, rgba(27, 31, 39, 0.9));
 transition: background-color 0.33s, backdrop-filter 0.33s;
} */

.overlay-ios26-underlay.overlay-hidden {
 /* display: none !important; */
 background-color: transparent;
 transition: background-color 0.33s;
 backdrop-filter: none;
}

.overlay-ios26-underlay-content {
 height: 100vh;
 z-index: 11;

 backdrop-filter: blur(2px);
 background-color: var(--fizz-grey-overlay, rgba(27, 31, 39, 0.9));
 transition: background-color 0.33s, backdrop-filter 0.33s;
}

/* .overlay-panel.overlay-hidden::before {
 background-color: transparent;
 transition: background-color 0.33s;
 backdrop-filter: none;
} */

.overlay-panel.overlay-hidden {
  transform: translateY(100%);
 transition-delay: .33s;
}

/* base content style: */
.overlay-panel-content-container {
 position: absolute;
 z-index: 15;
 width: 100%;
 bottom: 0px;
 left: 0px;

 max-height: 95vh;

 transform: translateY(0%);
 transition: transform 0.33s;
}

.overlay-panel.overlay-hidden .overlay-panel-content-container {
 transform: translateY(100%);
 transition: transform 0.33s;
}

.overlay-panel-header-hidden .overlay-panel-header {
 display: none;
}

.overlay-panel-header-hidden .overlay-panel-content {
 background-color: transparent !important;
}

/* base header style: */
.overlay-panel-header {
 display: block;
 padding: 16px;
 width: calc(100% - 32px);
 border-radius: 16px 16px 0px 0px;
 background: var(--fizz-background, white);
}

body.black .overlay-panel-header {
 background: var(--fizz-grey-800, #1B1F27);
}

.overlay-panel-header-content {
 display: flex;
 justify-content: space-between;
 align-items: anchor-center;
}

.overlay-panel-header-title {
 font-family: "Space Grotesk";
 font-size: 18px;
 font-style: normal;
 font-weight: 700;
 line-height: 130%;
 color: var(--fizz-text-default, black);
}

body.black .overlay-panel-header-title {
 color: var(--fizz-text-negated, white);
}

/* base content: */
.overlay-panel-content {
 width: 100%;
 height: 100%;
 background: var(--fizz-background, white);
 color: var(--fizz-text-default, black);
}

body.black .overlay-panel-content {
 background: var(--fizz-grey-900, #0D0F13);
 color: var(--fizz-text-negated, white);
}


.close-slider {
 width: 48px;
 height: 4px;
 position: relative;
 left: calc(50% - 24px);
 top: -6px;
 display: block;
 border-radius: 2px;
 background-color: var(--fizz-grey-600, #505050);
}

.close-popup {
 display: flex;
 width: 32px;
 height: 32px;
 justify-content: center;
 align-items: center;
 border-radius: 68px;
 background: var(--fizz-grey-600, #505050);
}

/* Dragging styles */
.overlay-panel.dragging .overlay-panel-content-container {
 transition: none !important;
}

.overlay-panel-header {
 cursor: grab;
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 /* Stretch effect: */
 transform-origin: top center;
 will-change: transform, border-radius;
 transition: transform 0.2s ease-out, border-radius 0.2s ease-out, background-color 0.2s ease-out;
}

.overlay-panel.dragging .overlay-panel-header {
 cursor: grabbing;
}

/* Prevent text selection during drag */
.overlay-panel.dragging * {
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}

.overlay-panel-header.stretched {
 transform: scaleY(var(--scale-y-stretch));
 transition: none;
 opacity: 0.9;
 transition: transform 0.33s ease-out, opacity 0.33s ease-out;
}

/* COOKIES: */

.cookies-content {
 width: calc(100% - 128px);
 padding: 64px;
 background: white;
 border-radius: 64px 64px 0 0;
 color: black;
 display: block;
}

.cookies-main-content {
 display: flex;
 width: 100%;
 max-width: 1312px;
 margin: 0 auto;
 gap: 24px;

}

.cookie-image {
 flex: 0 0 128px;
 width: 80%;
 margin: 0px 0px;
}

.cookie-text {
 flex: 0 0 1;
 display: block;
 /* flex-direction: column; */
}

.cookie-text.cookie-text-more-details {
 flex: 1;
}

.cookie-text h2 {
 font-size: 24px;
 margin: 0 0 19.5px 0;
}

.cookie-text p,
.cookies-selector-tab p,
.cookies-selector-tab li {
 font-size: 14px;
 font-weight: 400;
 color: #505050;
 line-height: 21px;
}

.cookie-buttons {
 flex: 0 0 300px;
 margin: 0;
}

.cookies-content .primary-button,
.cookies-content .secondary-button {
 line-height: 21px;
}

#cookie-accept {
 margin-bottom: 6px;
 padding: 14px;
 width: 100%;
}

.cookies-overlay .cookie-link,
.cookies-overlay .cookie-link:focus,
.cookies-overlay .cookie-link:active,
.cookies-overlay .cookie-link:visited {
 display: block;
 width: calc(100% - 32px);
 padding: 8px 16px;
 text-align: center;
 color: #505050;
 text-decoration: underline;
 font-size: 14px;
}

.cookies-overlay .cookie-link:hover {
 color: var(--fizz-purple, #8036F5);
 cursor: pointer;
}

.cookies-selection-main {
 border-top: 1px solid var(--fizz-grey-disabled, #CCCCCC);
 max-width: 1312px;
 margin: 24px auto 0;
 padding-top: 24px;

 font-size: 14px;
 font-weight: 400;
 color: #505050;
 line-height: 21px;

 transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cookies-selection-main.hidden {
 height: 0;
 opacity: 0;
 pointer-events:  none;
 overflow: hidden;
 padding: 0;
 margin: 0;
}

.cookies-selector-tab {
 height: 0;
 opacity: 0;
 pointer-events:  none;
}

.cookies-selector-tab.selected-tab {
 display: flex;
 height: fit-content;
 opacity: 1;
 transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
 pointer-events: all;
}

.cookies-selector-tab > div {
 flex: 1;
 margin-right: 24px;
}

.cookies-selector-tab h3 {
 font-size: 16px;
 margin: 16.5px 0;
 color: var(--fizz-text-default, black);
}

.cookies-selector-tab ul {
 margin-left: 40px;
 padding-left: 0;
}

.cookies-selector-tab .cookies-conditions-link {
 display: block;
 margin-top: 8px;
 text-decoration: underline;
 color: #505050;
}

.cookie-checkbox-div {
 margin: 36px 0;
}

input[type="checkbox"] {
 width: 22px;
 height: 22px;
 margin: 0;
}

input[type="checkbox"] + label {
 font-size: 14px;
 font-weight: 400;
 color: #505050;
 line-height: 21px;
 vertical-align: super;
}

.cookie-selection-buttons {
 border-top: 1px solid var(--fizz-grey-disabled, #CCCCCC);
 margin-top: 24px;
 padding-top: 24px;

 display: flex;
 justify-content: space-between;
 gap: 32px;
}

.cookie-selection-handler .cookie-button {
 width: calc(50% - 60px);
 border: 1px solid #8036F5;
 padding: 12px 16px;

 flex: 1;
    /* margin: 0 10px; */
    text-align: center;
}

.cookie-selection-handler .cookie-button:first-child {
 margin-right: 32px; 
}

.cookie-page-counter {
 display: inline-block;
 vertical-align: super;
 display: inline-block;
 border: 1px solid var(--fizz-grey-disabled, #CCCCCC);
 border-radius: 4px;
 padding: 2px 8px;
 width: fit-content;
}

.cookie-page-counter-text {
 margin-right: 4px;
}

.cookie-page-counter-dot {
 display: inline-block;
 width: 10px;
 height: 10px;
 background-color: var(--fizz-grey-disabled, #CCCCCC);
 border-radius: 5px;
 margin: 0 2px;
 transition: width .3s ease-in-out;
}

.cookie-page-counter-dot:hover {
 background-color: #505050;
 cursor: pointer;
}

.cookie-page-counter-dot.selected {
 display: inline-block;
 background-color: var(--fizz-purple, #8036F5);
 border-radius: 5px;
 width: 26px;
 vertical-align: middle;
 height: 10px;
 margin-bottom: 4px;
 transition: width .3s ease-in-out;
}

.cookie-arrow {
 display: inline-block;
 background-color: var(--fizz-div-background, white);
 border: 1px solid var(--fizz-grey-disabled, #CCCCCC);
 border-radius: 4px;
 padding: .5px 0;
 line-height: 0;
}

.cookie-arrow:hover {
 background-color: var(--fizz-grey-disabled, #CCCCCC);
 cursor: pointer;
}

#cookie-accept-some {
 width: 50%;
}

#cookie-accept-2 {
 width: 50%;
}

@media (width > 768px) and (width < 820px) {
 .cookie-buttons {
  flex: 0 0 258px;
 }
}

/* ---------------- */
/* MOBILE CHANGES: */
/* -------------- */
@media (width <= 768px) {
 /* COOKIES: */
 .cookies-content {
  width: calc(100% - 64px);
  padding: 32px 32px 16px;
  border-radius: 32px 32px 0 0;
  display: block;
  
  font-size: .75rem;

  max-height: calc(95vh - 48px);
  overflow: scroll;
 }

 .cookies-content a:not(.primary-button) {
  color: #505050;
 }

 .cookies-main-content{
  display: block;
 }
 
 .cookie-image {
  width: 88px;
  margin: 0 auto 16px;
 }
 
 .cookie-text {
  display: block;
 }
 
 .cookie-text h1 {
  font-size: 1.125rem;
  line-height: 1.463rem;
 }
 
 .cookie-text p {
  font-weight: 400;
  color: #505050;
  line-height: 21px;
 }
 
 .cookie-buttons {
  display: flex;
  flex-direction: column;
  margin: 24px 0 0 0px;
  width: 100%;
  gap: 16px;
 }

 #cookie-accept {
  order: 3;
  margin: 0 auto 0px;
 }

 #cookie-set-details {
  order: 2;
  padding-top: 0px
 }
 
 .cookies-overlay .cookie-link {
  padding: 0;
  margin: 0 auto;
 }

 .cookies-selector-tab {
  display: none;
  font-size: .75rem;
 }

 .cookies-selector-tab.selected-tab {
  display: block;
 }
 
 .cookies-selector-tab > div:not(:first-child) {
  margin-top: 16px;
 }

 .cookies-selector-tab h3 {
  margin-top: 0px;
 }

 .cookies-selector-tab ul {
  margin-bottom: 14px;
 }

 .cookie-checkbox-div {
  margin: 16px 0;
 }

 .cookies-selection-main {
  margin-top: 16px;
  padding-top: 16px;
 }

 .cookie-page-counter {
  padding: 10px;
 }

 .cookie-arrow {
  padding: 8px;
  margin-left: 8px;
 }

 .cookie-selection-buttons {
  display: block;
  margin-top: 16px;
  padding-top: 16px;
 }

 .cookie-selection-buttons .cookie-button.button-link {
  width: calc(100% - 34px);
 }

 #cookie-accept-some,
 #cookie-accept-2 {
  width: 100%;
    margin-right: 0;
 }

 #cookie-accept-some {
    margin-bottom: 8px;
 }
}

@media (width <= 300px) {
 .cookie-arrow {
  margin-left: 0px;
 }
}