/* ===========================
   SECO COSMETICS - B2C PRODUCT PAGE
   Strona produktu dla klienta detalicznego
   Wykorzystuje zmienne z głównego styles.css
   =========================== */

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: var(--font-base);
   font-size: var(--fs-body);
   line-height: 1.5;
   color: var(--color-text);
   background: var(--color-bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition-base);
}

button {
   font-family: inherit;
   cursor: pointer;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

.container {
   width: 100%;
   max-width: var(--container-max-width);
   margin: 0 auto;
   padding: 0 var(--space-lg);
}

/* ===========================
   MOBILE HEADER B2C
   =========================== */
.b2c-mobile-header {
   display: none;
}

/* Górny pasek - biały: logo + szukaj */
.b2c-mobile-header__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 16px;
   background: var(--color-bg);
   border-bottom: 1px solid var(--color-border);
}

.b2c-mobile-header__logo {
   display: flex;
   align-items: center;
}

.b2c-mobile-header__logo img {
   height: 24px;
}

.b2c-mobile-header__search {
   background: none;
   border: none;
   color: var(--color-text);
   font-size: 1.125rem;
   cursor: pointer;
   padding: 6px;
}

/* Dolny pasek - czarny: menu + user + akcje */
.b2c-mobile-header__bottom {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 16px;
   background: var(--color-text);
}

.b2c-mobile-header__bottom .hamburger-btn {
   background: none;
   border: none;
   padding: 6px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.b2c-mobile-header__bottom .hamburger-btn .hamburger-line {
   width: 18px;
   height: 2px;
   background: var(--color-bg);
   display: block;
   transition: all 0.3s ease;
}

.b2c-mobile-header__user {
   display: flex;
   align-items: center;
   gap: 4px;
   color: var(--color-bg);
   font-size: 0.75rem;
   flex: 1;
   white-space: nowrap;
}

.b2c-mobile-header__user span {
   opacity: 0.8;
}

.b2c-mobile-header__user strong {
   font-weight: var(--fw-semibold);
   opacity: 1;
}

.b2c-mobile-header__points {
   background: var(--color-accent);
   color: var(--color-bg) !important;
   padding: 2px 6px;
   border-radius: 10px;
   font-size: 0.6rem;
   font-weight: var(--fw-bold);
   opacity: 1 !important;
   margin-left: 4px;
}

.b2c-mobile-header__icon {
   background: none;
   border: none;
   color: var(--color-bg);
   font-size: 1rem;
   cursor: pointer;
   padding: 6px;
   position: relative;
}

.b2c-mobile-header__badge {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 14px;
   height: 14px;
   background: var(--color-accent);
   color: var(--color-bg);
   font-size: 0.55rem;
   font-weight: var(--fw-bold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* .hamburger-btn styles removed - using styles.css */

/* .icon-btn styles removed - using styles.css */

.cart-badge {
   position: absolute;
   top: 0;
   right: 0;
   background: var(--color-accent);
   color: var(--color-text-inverse);
   font-size: 0.625rem;
   font-weight: var(--fw-bold);
   width: 16px;
   height: 16px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ===========================
   B2C TOPBAR (CZARNY)
   =========================== */
.b2c-topbar {
   background: var(--color-bg-dark);
   padding: var(--space-xs) 0;
}

.b2c-topbar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.b2c-topbar__lang {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   font-size: var(--fs-small);
   color: var(--color-text-inverse);
}

.b2c-topbar__lang-sep {
   opacity: 0.5;
}

.b2c-topbar__loyalty {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   font-size: var(--fs-small);
   color: var(--color-text-inverse);
}

.b2c-topbar__loyalty-points {
   color: var(--color-accent);
   font-weight: var(--fw-bold);
}

.b2c-topbar__loyalty-link {
   color: var(--color-text-inverse);
   text-decoration: underline;
}

.b2c-topbar__links {
   display: flex;
   gap: var(--space-md);
   font-size: var(--fs-small);
}

.b2c-topbar__links a {
   color: var(--color-text-inverse);
}

.b2c-topbar__links a:hover {
   color: var(--color-accent);
}

/* ===========================
   B2C CONTACT BAR (BIAŁY)
   =========================== */
.b2c-contact-bar {
   background: var(--color-bg);
   padding: var(--space-xs) 0;
   border-bottom: 1px solid var(--color-border);
}

.b2c-contact-bar__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   font-size: var(--fs-small);
   color: var(--color-accent);
   font-weight: var(--fw-semibold);
}

.b2c-contact-bar__sep {
   color: var(--color-border);
}

/* ===========================
   B2C HEADER (GŁÓWNY)
   =========================== */
.b2c-header {
   background: var(--color-bg);
   padding: var(--space-md) 0;
   border-bottom: 1px solid var(--color-border);
}

.b2c-header__inner {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
}

.b2c-header__logo {
   flex-shrink: 0;
}

.b2c-header__logo-text {
   font-family: var(--font-base);
   font-size: 1.5rem;
   font-weight: var(--fw-bold);
   color: var(--color-text);
   letter-spacing: 0.05em;
}

.b2c-header__search {
   flex: 1;
   max-width: 500px;
}

.b2c-header__search input {
   width: 100%;
   padding: 12px 20px;
   font-family: var(--font-base);
   font-size: var(--fs-small);
   color: var(--color-text);
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
}

.b2c-header__search input::placeholder {
   color: var(--color-text-muted);
}

.b2c-header__actions {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   margin-left: auto;
}

.b2c-header__profile {
   display: flex;
   align-items: center;
   padding: 10px 20px;
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   border-radius: var(--radius-pill);
   font-size: 0.875rem;
   white-space: nowrap;
}

.b2c-header__profile strong {
   margin-left: 4px;
}

.b2c-header__points {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 6px 12px;
   background: var(--color-bg);
   border: 1px solid var(--color-accent);
   border-radius: var(--radius-pill);
}

.b2c-header__points-value {
   font-size: 0.75rem;
   font-weight: var(--fw-bold);
   color: var(--color-accent);
   line-height: 1;
}

.b2c-header__points-label {
   font-size: 0.625rem;
   color: var(--color-accent);
   line-height: 1;
}

.b2c-header__icon-btn {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--color-text);
   font-size: 1.25rem;
   position: relative;
}

.b2c-header__icon-btn:hover {
   color: var(--color-accent);
}

.b2c-header__cart-badge {
   position: absolute;
   top: 0;
   right: 0;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background: var(--color-accent);
   color: var(--color-text-inverse);
   font-size: 0.625rem;
   font-weight: var(--fw-bold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ===========================
   B2C NAV (MENU)
   =========================== */
.b2c-nav {
   background: var(--color-bg);
   border-bottom: 1px solid var(--color-border);
}

.b2c-nav__list {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-lg);
   list-style: none;
   padding: var(--space-sm) 0;
}

.b2c-nav__link {
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
   color: var(--color-text);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   display: flex;
   align-items: center;
   gap: var(--space-xs);
}

.b2c-nav__link:hover {
   color: var(--color-accent);
}

.b2c-nav__link--active {
   color: var(--color-accent);
}

.b2c-nav__link--new::before,
.b2c-nav__link--promo::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

.b2c-nav__link--new::before {
   background: #4CAF50;
}

.b2c-nav__link--promo::before {
   background: var(--color-accent);
}

/* ===========================
   B2C PROMO BAR
   =========================== */
.b2c-promo-bar {
   background: var(--color-bg-alt);
   padding: var(--space-md) 0;
}

.b2c-promo-bar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.b2c-promo-bar__arrow {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid var(--color-text);
   cursor: pointer;
   color: var(--color-text);
   font-size: 0.875rem;
}

.b2c-promo-bar__arrow:hover {
   background: var(--color-text);
   color: var(--color-text-inverse);
}

.b2c-promo-bar__content {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.b2c-promo-bar__text {
   font-size: 1rem;
   font-weight: var(--fw-bold);
   color: var(--color-text);
}

.b2c-promo-bar__link {
   font-size: 0.875rem;
   color: var(--color-text);
   text-decoration: underline;
}

.b2c-promo-bar__link:hover {
   color: var(--color-accent);
}

/* Promo bar slider */
.b2c-promo-bar__content {
   flex: 1;
   justify-content: center;
}

.b2c-promo-bar__slide {
   display: none;
   align-items: center;
   justify-content: center;
   gap: var(--space-md);
}

.b2c-promo-bar__slide.active {
   display: flex;
}

/* ===========================
   BREADCRUMBS
   =========================== */
.breadcrumbs {
   padding: var(--space-md) 0;
   background: var(--color-bg);
}

.breadcrumbs__list {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-xs);
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: var(--fs-small);
}

.breadcrumbs__item {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
}

.breadcrumbs__item::after {
   content: '→';
   color: var(--color-text-muted);
}

.breadcrumbs__item:last-child::after {
   display: none;
}

.breadcrumbs__item a {
   color: var(--color-text-muted);
}

.breadcrumbs__item a:hover {
   color: var(--color-text);
}

.breadcrumbs__item span {
   color: var(--color-text);
   font-weight: var(--fw-medium);
}

/* ===========================
   PRODUCT PAGE LAYOUT
   =========================== */
.product-page {
   padding: var(--space-lg) 0 var(--space-xl);
   background: var(--color-bg);
}

.product-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-xl);
   margin-bottom: var(--space-xl);
}

/* ===========================
   PRODUCT GALLERY
   =========================== */
.product-gallery__wrapper {
   display: flex;
   gap: var(--space-md);
}

.product-gallery__thumbs {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
   width: 80px;
   flex-shrink: 0;
}

.product-gallery__thumb {
   width: 80px;
   height: 80px;
   padding: var(--space-xs);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
   cursor: pointer;
   transition: var(--transition-base);
}

.product-gallery__thumb:hover,
.product-gallery__thumb.active {
   border-color: var(--color-text);
}

.product-gallery__thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.product-gallery__main {
   flex: 1;
   position: relative;
   background: var(--color-bg);
   border: 1px solid var(--color-text);
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.product-gallery__badges {
   position: absolute;
   top: var(--space-sm);
   left: var(--space-sm);
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   z-index: 10;
}

.product-gallery__points {
   padding: 4px 10px;
   background: var(--color-bg);
   border: 1px solid var(--color-text);
   border-radius: var(--radius-pill);
   font-size: 0.6875rem;
   font-weight: var(--fw-semibold);
   color: var(--color-accent);
}

.product-gallery__badge {
   width: 48px;
   height: 48px;
}

.product-gallery__badge img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.product-gallery__fav {
   position: absolute;
   top: var(--space-sm);
   right: var(--space-sm);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 50%;
   color: var(--color-text-muted);
   cursor: pointer;
   transition: var(--transition-base);
   z-index: 10;
}

.product-gallery__fav:hover {
   color: var(--color-accent);
   border-color: var(--color-accent);
}

.carousel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 50%;
   color: var(--color-text);
   cursor: pointer;
   transition: var(--transition-base);
   z-index: 5;
}

.carousel-arrow:hover {
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   border-color: var(--color-bg-dark);
}

.carousel-arrow--prev {
   left: var(--space-sm);
}

.carousel-arrow--next {
   right: var(--space-sm);
}

.product-gallery__image {
   max-width: 80%;
   max-height: 80%;
   object-fit: contain;
}

.product-gallery__edition-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   text-align: center;
   padding: 8px var(--space-sm);
   font-size: 0.6875rem;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

/* Product Description */
.product-description {
   margin-top: var(--space-lg);
}

.product-description__title {
   font-size: 1.125rem;
   font-weight: var(--fw-bold);
   margin-bottom: var(--space-sm);
}

.product-description__content {
   color: var(--color-text-muted);
   line-height: 1.7;
}

/* ===========================
   PRODUCT INFO (PRAWA KOLUMNA)
   =========================== */
.product-info {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.product-info__status {
   font-size: 0.75rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text);
}

.product-info__title {
   font-size: 1.75rem;
   font-weight: var(--fw-bold);
   line-height: 1.2;
}

.product-info__rating {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   flex-wrap: wrap;
}

.product-info__stars {
   display: flex;
   gap: 2px;
   color: #FFB800;
   font-size: 0.875rem;
}

.product-info__rating-text {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
}

.product-info__rating-link {
   font-size: var(--fs-small);
   color: var(--color-text);
   text-decoration: underline;
}

.product-info__price {
   display: flex;
   align-items: baseline;
   gap: var(--space-sm);
}

.product-info__price-current {
   font-size: 2rem;
   font-weight: var(--fw-bold);
   color: var(--color-text);
}

.product-info__price-old {
   font-size: 1.125rem;
   color: var(--color-text-muted);
   text-decoration: line-through;
}

.product-info__price-details {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-sm) 0;
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
}

.product-info__price-unit {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
}

.product-info__availability {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   font-size: var(--fs-small);
}

.product-info__availability-badge {
   padding: 2px 8px;
   background: var(--color-bg-alt);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
   font-size: 0.625rem;
   font-weight: var(--fw-bold);
}

.product-info__price-history {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
}

/* Lead / Short Description */
.product-info__lead {
   font-size: 0.9375rem;
   line-height: 1.6;
   color: var(--color-text-muted);
   margin-top: var(--space-md);
   padding-top: var(--space-md);
   border-top: 1px solid var(--color-border);
}

/* Variants */
.product-info__variants {
   padding: var(--space-md) 0;
}

.product-info__variants-label {
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   margin-bottom: var(--space-sm);
}

.product-info__variants-options {
   display: flex;
   gap: var(--space-sm);
}

.product-info__variant {
   flex: 1;
   padding: var(--space-sm) var(--space-md);
   background: var(--color-bg);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition-base);
   text-align: left;
}

.product-info__variant:hover {
   border-color: var(--color-text);
}

.product-info__variant.active {
   border-color: var(--color-text);
   background: var(--color-bg-alt);
}

.product-info__variant-name {
   display: block;
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
}

.product-info__variant-price {
   display: block;
   font-size: 0.75rem;
   color: var(--color-text-muted);
}

/* Actions */
.product-info__actions {
   display: flex;
   align-items: stretch;
   gap: var(--space-sm);
}

.product-add-form {
   display: flex;
   align-items: stretch;
   gap: var(--space-sm);
   flex: 1;
}

.product-info__quantity {
   display: flex;
   flex-direction: row;
   align-items: center;
   border: 2px solid var(--color-text);
   border-radius: var(--radius-sm);
}

.product-info__quantity-btn {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
   font-size: 1.25rem;
   cursor: pointer;
}

.product-info__quantity-input {
   width: 50px;
   text-align: center;
   border: none;
   font-family: var(--font-base);
   font-size: 1rem;
   font-weight: var(--fw-semibold);
}

.product-info__quantity-input:focus {
   outline: none;
}

.product-info__add-to-cart {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-lg);
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: var(--fw-bold);
   cursor: pointer;
   transition: var(--transition-base);
}

.product-info__add-to-cart:hover {
   background: var(--color-accent);
}

.product-info__add-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.product-info__add-main {
   font-size: 0.875rem;
   font-weight: var(--fw-bold);
}

.product-info__add-sub {
   font-size: 0.625rem;
   font-weight: var(--fw-regular);
   opacity: 0.8;
}

.product-info__wishlist {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border: 2px solid var(--color-text);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font-size: 1.25rem;
   cursor: pointer;
   transition: var(--transition-base);
}

.product-info__wishlist:hover {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: var(--color-text-inverse);
}

/* Points info */
.product-info__points-info {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-md);
   background: var(--color-bg-alt);
   border-radius: var(--radius-sm);
   font-size: var(--fs-small);
}

.product-info__points-info i {
   color: var(--color-accent);
}

.product-info__points-info strong {
   color: var(--color-accent);
}

/* Delivery */
.product-info__delivery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-sm);
   padding-top: var(--space-md);
   border-top: 1px solid var(--color-border);
}

.product-info__delivery-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   border: none;
   background: transparent;
}

.product-info__delivery-item i {
   font-size: 1.25rem;
   color: var(--color-text);
   margin-top: 2px;
}

.product-info__delivery-text {
   display: flex;
   flex-direction: column;
}

.product-info__delivery-text strong {
   font-size: 0.75rem;
   font-weight: var(--fw-semibold);
}

.product-info__delivery-text span {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
}

/* ===========================
   PRODUCT TABS
   =========================== */
.product-tabs {
   margin-top: var(--space-lg);
}

.product-tabs__nav {
   display: flex;
   gap: 0;
   border-bottom: 2px solid var(--color-border);
}

.product-tabs__btn {
   padding: var(--space-md) var(--space-lg);
   background: transparent;
   border: none;
   font-family: var(--font-base);
   font-size: 0.9375rem;
   font-weight: var(--fw-semibold);
   color: var(--color-text-muted);
   cursor: pointer;
   position: relative;
   transition: var(--transition-base);
}

.product-tabs__btn:hover {
   color: var(--color-text);
}

.product-tabs__btn.active {
   color: var(--color-text);
}

.product-tabs__btn.active::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--color-text);
}

.product-tabs__panels {
   padding: var(--space-xl) 0;
}

.product-tabs__panel {
   display: none;
}

.product-tabs__panel.active {
   display: block;
}

/* Tab Content Styles */
.tab-content__title {
   font-size: 1.5rem;
   font-weight: var(--fw-bold);
   margin-bottom: var(--space-md);
}

.tab-content__subtitle {
   font-size: 1rem;
   font-weight: var(--fw-semibold);
   margin-top: var(--space-lg);
   margin-bottom: var(--space-sm);
}

.tab-content__text {
   color: var(--color-text-muted);
   line-height: 1.7;
   margin-bottom: var(--space-md);
}

.tab-content__list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.tab-content__list li {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) 0;
   color: var(--color-text);
}

.tab-content__list li i {
   color: #4CAF50;
   font-size: 0.875rem;
}

.tab-content__note {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-md);
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
   margin-top: var(--space-lg);
   font-size: var(--fs-small);
}

.tab-content__note i {
   color: #FFB800;
}

/* Ingredients Grid */
.ingredients-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-md);
}

.ingredient-card {
   display: flex;
   gap: var(--space-md);
   padding: var(--space-md);
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
}

.ingredient-card__icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border-radius: var(--radius-sm);
   font-size: 1.25rem;
   color: var(--color-accent);
   flex-shrink: 0;
}

.ingredient-card__info {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.ingredient-card__info strong {
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
}

.ingredient-card__info span {
   font-size: 0.75rem;
   color: var(--color-accent);
   font-weight: var(--fw-medium);
}

.ingredient-card__info p {
   font-size: 0.75rem;
   color: var(--color-text-muted);
   margin: 0;
}

/* Steps Grid */
.steps-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-md);
}

.step-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: var(--space-lg);
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
}

.step-card__number {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   border-radius: 50%;
   font-size: 1.25rem;
   font-weight: var(--fw-bold);
   margin-bottom: var(--space-md);
}

.step-card__content strong {
   display: block;
   font-size: var(--fs-body);
   margin-bottom: var(--space-xs);
}

.step-card__content p {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
   margin: 0;
}

/* Delivery Grid */
.delivery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-md);
   margin-bottom: var(--space-xl);
}

.delivery-card {
   display: flex;
   gap: var(--space-md);
   padding: var(--space-lg);
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
}

.delivery-card__icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border-radius: var(--radius-sm);
   font-size: 1.25rem;
   color: var(--color-text);
   flex-shrink: 0;
}

.delivery-card__content {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.delivery-card__content strong {
   font-size: var(--fs-body);
}

.delivery-card__content span {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
}

.delivery-card__content p {
   font-size: var(--fs-small);
   color: var(--color-accent);
   font-weight: var(--fw-semibold);
   margin: 0;
}

/* Returns Info */
.returns-info {
   padding: var(--space-lg);
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
}

.returns-info h4 {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-size: 1rem;
   margin-bottom: var(--space-sm);
}

.returns-info h4 i {
   color: var(--color-accent);
}

.returns-info p {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
   margin: 0;
   line-height: 1.6;
}

/* ===========================
   REVIEWS SECTION
   =========================== */
.reviews-section {
   padding: var(--space-xl) 0;
   background: var(--color-bg-alt);
}

.reviews-section__title {
   font-size: 1.5rem;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   margin-bottom: var(--space-lg);
}

.reviews-layout {
   display: flex;
   gap: var(--space-xl);
}

.reviews-grid {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-md);
}

.review-card {
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.review-card__rating {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
}

.review-card__stars {
   display: flex;
   gap: 2px;
   color: #FFB800;
   font-size: 0.75rem;
}

.review-card__score {
   font-size: var(--fs-small);
   font-weight: var(--fw-bold);
}

.review-card__text {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
   line-height: 1.5;
   flex: 1;
}

.review-card__author {
   display: flex;
   flex-direction: column;
}

.review-card__author strong {
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
}

.review-card__author span {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
}

/* Reviews Summary */
.reviews-summary {
   width: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: var(--space-lg);
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
}

.reviews-summary__score {
   font-size: 3rem;
   font-weight: var(--fw-bold);
   line-height: 1;
}

.reviews-summary__stars {
   display: flex;
   gap: 2px;
   color: #FFB800;
   margin: var(--space-xs) 0;
}

.reviews-summary__label {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
   margin-bottom: var(--space-sm);
}

.reviews-summary__count {
   font-size: var(--fs-small);
   margin-bottom: var(--space-sm);
}

.reviews-summary__count strong {
   font-weight: var(--fw-bold);
}

.reviews-summary__link {
   font-size: var(--fs-small);
   color: var(--color-text);
   text-decoration: underline;
}

/* Reviews Nav */
.reviews-nav {
   display: flex;
   justify-content: center;
   margin-top: var(--space-lg);
}

.reviews-nav__dots {
   display: flex;
   gap: var(--space-sm);
}

.reviews-nav__dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--color-border);
   border: none;
   cursor: pointer;
   transition: var(--transition-base);
}

.reviews-nav__dot.active,
.reviews-nav__dot:hover {
   background: var(--color-text);
}

/* ===========================
   RELATED PRODUCTS
   =========================== */
.related-products {
   padding: var(--space-xl) 0;
   background: var(--color-bg);
}

.related-products__title {
   font-size: 1.5rem;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   margin-bottom: var(--space-lg);
}

.related-products__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-lg);
}

/* Carousel dots - hidden on desktop */
.related-products__dots {
   display: none;
}

/* B2C Product Card (from lista) */
.b2c-product-card {
   background: var(--color-bg);
   border-radius: var(--radius-md);
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.b2c-product-card__image-area {
   position: relative;
   background: var(--color-bg);
   border: 1px solid var(--color-text);
   border-radius: var(--radius-lg);
   margin: var(--space-xs);
   overflow: hidden;
}

.b2c-product-card__points {
   position: absolute;
   top: var(--space-sm);
   left: var(--space-sm);
   z-index: 10;
   padding: 4px 10px;
   background: var(--color-bg);
   border: 1px solid var(--color-text);
   border-radius: var(--radius-pill);
   font-size: 0.6875rem;
   font-weight: var(--fw-semibold);
   color: var(--color-accent);
}

.b2c-product-card__badge {
   position: absolute;
   top: var(--space-sm);
   right: var(--space-sm);
   z-index: 10;
   width: 48px;
   height: 48px;
}

.b2c-product-card__badge img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.b2c-product-card__image {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
   padding: var(--space-md);
}

.b2c-product-card__image img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform var(--transition-base);
}

.b2c-product-card:hover .b2c-product-card__image img {
   transform: scale(1.05);
}

.b2c-product-card__content {
   padding: var(--space-xs) var(--space-sm) var(--space-sm);
   flex: 1;
   display: flex;
   flex-direction: column;
}

.b2c-product-card__meta {
   font-size: 0.6875rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--color-text);
   min-height: 1em;
}

.b2c-product-card__name {
   font-size: 0.9375rem;
   font-weight: var(--fw-bold);
   margin-bottom: var(--space-xs);
   line-height: 1.3;
}

.b2c-product-card__name a {
   color: var(--color-text);
}

.b2c-product-card__price {
   display: flex;
   align-items: baseline;
   gap: var(--space-sm);
   margin-bottom: var(--space-xs);
}

.b2c-product-card__price-current {
   font-size: 1.375rem;
   font-weight: var(--fw-bold);
   color: var(--color-text);
}

.b2c-product-card__price-old {
   font-size: 0.875rem;
   color: var(--color-text-muted);
   text-decoration: line-through;
}

.b2c-product-card__rating {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2px 0;
   margin-bottom: var(--space-xs);
}

.b2c-product-card__rating-left {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
}

.b2c-product-card__stars {
   display: flex;
   gap: 1px;
   color: #FFB800;
   font-size: 0.625rem;
}

.b2c-product-card__reviews {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
}

.b2c-product-card__actions {
   display: flex;
   align-items: stretch;
   gap: var(--space-xs);
   margin-top: auto;
}

.b2c-product-card__cta {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-sm);
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.b2c-product-card__cta:hover {
   background: var(--color-accent);
}

.b2c-product-card__cta-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.b2c-product-card__cta-main {
   font-size: 0.75rem;
   font-weight: var(--fw-bold);
}

.b2c-product-card__cta-sub {
   font-size: 0.5rem;
   opacity: 0.8;
}

.b2c-product-card__cta-icon {
   font-size: 1rem;
}

.b2c-product-card__fav {
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg);
   border: 1px solid var(--color-text);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   cursor: pointer;
   transition: var(--transition-base);
}

.b2c-product-card__fav:hover {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: var(--color-text-inverse);
}

/* ===========================
   FOOTER B2C
   =========================== */
.b2c-footer {
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
   padding: var(--space-xl) 0 var(--space-lg);
}

.b2c-footer__grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: var(--space-xl);
   margin-bottom: var(--space-xl);
}

.b2c-footer__title {
   font-size: 1rem;
   font-weight: var(--fw-bold);
   margin-bottom: var(--space-md);
}

.b2c-footer__text {
   font-size: var(--fs-small);
   color: rgba(255,255,255,0.7);
   line-height: 1.6;
   margin-bottom: var(--space-md);
}

.b2c-footer__social {
   display: flex;
   gap: var(--space-sm);
}

.b2c-footer__social a {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255,255,255,0.1);
   border-radius: 50%;
   color: var(--color-text-inverse);
   transition: var(--transition-base);
}

.b2c-footer__social a:hover {
   background: var(--color-accent);
}

.b2c-footer__links {
   list-style: none;
}

.b2c-footer__links li {
   margin-bottom: var(--space-xs);
}

.b2c-footer__links a {
   font-size: var(--fs-small);
   color: rgba(255,255,255,0.7);
}

.b2c-footer__links a:hover {
   color: var(--color-text-inverse);
}

.b2c-footer__contact {
   font-size: var(--fs-small);
   color: rgba(255,255,255,0.7);
}

.b2c-footer__contact p {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   margin-bottom: var(--space-xs);
}

.b2c-footer__contact i {
   width: 16px;
}

.b2c-footer__bottom {
   text-align: center;
   padding-top: var(--space-lg);
   border-top: 1px solid rgba(255,255,255,0.1);
}

.b2c-footer__bottom p {
   font-size: var(--fs-small);
   color: rgba(255,255,255,0.5);
}

/* ===========================
   MOBILE MENU
   =========================== */
.mobile-menu-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,0.5);
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-base);
}

.mobile-menu-overlay.open {
   opacity: 1;
   visibility: visible;
}

.mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 300px;
   height: 100%;
   background: var(--color-bg);
   z-index: 1000;
   transform: translateX(-100%);
   transition: transform 0.3s ease;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
}

.mobile-menu.open {
   transform: translateX(0);
}

.mobile-menu-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-md);
   border-bottom: 1px solid var(--color-border);
}

.mobile-menu-logo {
   font-weight: var(--fw-bold);
   font-size: 0.875rem;
   letter-spacing: 0.05em;
}

.mobile-menu-close {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: none;
   border: none;
   cursor: pointer;
}

.mobile-menu-user {
   padding: var(--space-md);
   background: var(--color-bg-alt);
}

.mobile-menu-user__greeting {
   font-size: var(--fs-small);
}

.mobile-menu-user__points {
   font-size: var(--fs-small);
   color: var(--color-accent);
   font-weight: var(--fw-semibold);
   margin-top: 4px;
}

.mobile-menu-search {
   padding: var(--space-md);
}

.mobile-menu-search input {
   width: 100%;
   padding: 10px 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
   font-family: var(--font-base);
   font-size: var(--fs-small);
}

.mobile-menu-nav {
   flex: 1;
}

.mobile-menu-nav ul {
   list-style: none;
}

.mobile-menu-nav > ul > li > a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-sm) var(--space-md);
   font-weight: var(--fw-medium);
   border-bottom: 1px solid var(--color-border);
}

.mobile-menu-nav .mobile-submenu {
   display: none;
   background: var(--color-bg-alt);
}

.mobile-menu-nav .has-submenu.open .mobile-submenu {
   display: block;
}

.mobile-menu-nav .mobile-submenu li a {
   display: block;
   padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);
   font-size: var(--fs-small);
   border-bottom: 1px solid var(--color-border);
}

.mobile-menu-extra {
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   border-top: 1px solid var(--color-border);
}

.mobile-menu-extra a {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
}

.mobile-menu-social {
   padding: var(--space-md);
   display: flex;
   gap: var(--space-md);
   justify-content: center;
}

.mobile-menu-social a {
   font-size: 1.25rem;
   color: var(--color-text-muted);
}

/* ===========================
   MOBILE SEARCH OVERLAY
   =========================== */
.mobile-search-overlay {
   position: fixed;
   inset: 0;
   background: var(--color-bg);
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-base);
}

.mobile-search-overlay.open {
   opacity: 1;
   visibility: visible;
}

.mobile-search-container {
   padding: var(--space-md);
}

.mobile-search-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-md);
}

.mobile-search-header span {
   font-weight: var(--fw-semibold);
}

.mobile-search-close {
   background: none;
   border: none;
   cursor: pointer;
}

.mobile-search-input {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
   margin-bottom: var(--space-lg);
}

.mobile-search-input input {
   flex: 1;
   border: none;
   font-family: var(--font-base);
   font-size: var(--fs-body);
}

.mobile-search-input input:focus {
   outline: none;
}

.mobile-search-popular p {
   font-size: var(--fs-small);
   color: var(--color-text-muted);
   margin-bottom: var(--space-sm);
}

.popular-tags {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-xs);
}

.popular-tags a {
   padding: var(--space-xs) var(--space-sm);
   background: var(--color-bg-alt);
   border-radius: var(--radius-pill);
   font-size: var(--fs-small);
}

/* ===========================
   MOBILE CART SIDEBAR
   =========================== */
.mobile-cart-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,0.5);
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-base);
}

.mobile-cart-overlay.open {
   opacity: 1;
   visibility: visible;
}

.mobile-cart-sidebar {
   position: fixed;
   top: 0;
   right: 0;
   width: 320px;
   height: 100%;
   background: var(--color-bg);
   z-index: 1000;
   transform: translateX(100%);
   transition: transform 0.3s ease;
   display: flex;
   flex-direction: column;
}

.mobile-cart-sidebar.open {
   transform: translateX(0);
}

.mobile-cart-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-md);
   background: var(--color-bg-dark);
   color: var(--color-text-inverse);
}

.mobile-cart-close {
   background: none;
   border: none;
   cursor: pointer;
}

.mobile-cart-items {
   flex: 1;
   overflow-y: auto;
   padding: var(--space-md);
}

.cart-item {
   display: flex;
   gap: var(--space-sm);
   padding: var(--space-sm) 0;
   border-bottom: 1px solid var(--color-border);
}

.cart-item img {
   width: 60px;
   height: 60px;
   object-fit: contain;
}

.cart-item-info {
   flex: 1;
}

.cart-item-info h4 {
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
   margin-bottom: 4px;
}

.cart-item-qty {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
}

.cart-item-qty button {
   width: 24px;
   height: 24px;
   background: var(--color-bg-alt);
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.cart-item-price {
   font-weight: var(--fw-semibold);
   align-self: center;
}

.mobile-cart-summary {
   padding: var(--space-md);
   border-top: 1px solid var(--color-border);
}

.cart-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--space-xs);
}

.cart-shipping .free {
   color: #4CAF50;
   font-weight: var(--fw-semibold);
}

.mobile-cart-actions {
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.mobile-cart-actions .btn {
   display: block;
   text-align: center;
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-sm);
   font-weight: var(--fw-semibold);
   font-size: var(--fs-small);
}

.mobile-cart-actions .btn-outline {
   background: transparent;
   border: 2px solid var(--color-bg-dark);
   color: var(--color-text);
}

.mobile-cart-actions .btn-primary {
   background: var(--color-bg-dark);
   border: 2px solid var(--color-bg-dark);
   color: var(--color-text-inverse);
}

/* ===========================
   RESPONSIVE - TABLET
   =========================== */
@media (max-width: 1024px) {
   .product-layout {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }

   .product-gallery__wrapper {
      max-width: 600px;
      margin: 0 auto;
   }

   .reviews-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .related-products__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .b2c-footer__grid {
      grid-template-columns: 1fr 1fr;
   }
}

/* ===========================
   RESPONSIVE - MOBILE
   =========================== */
@media (max-width: 768px) {
   .b2c-topbar,
   .b2c-contact-bar,
   .b2c-header,
   .b2c-nav,
   .b2c-promo-bar {
      display: none;
   }

   .b2c-mobile-header {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
   }

   /* Padding for fixed header */
   body {
      padding-top: 82px;
   }

   .breadcrumbs {
      padding: var(--space-sm) 0;
   }

   .breadcrumbs__list {
      font-size: 0.6875rem;
   }

   .product-page {
      padding: var(--space-md) 0;
   }

   .product-gallery__wrapper {
      flex-direction: column-reverse;
   }

   .product-gallery__thumbs {
      flex-direction: row;
      width: 100%;
      justify-content: center;
   }

   .product-gallery__thumb {
      width: 60px;
      height: 60px;
   }

   .product-gallery__main {
      aspect-ratio: 1;
   }

   .product-gallery__badge {
      width: 40px;
      height: 40px;
   }

   .product-info__title {
      font-size: 1.375rem;
   }

   .product-info__price-current {
      font-size: 1.5rem;
   }

   .product-info__lead {
      font-size: 0.875rem;
      margin-top: var(--space-sm);
      padding-top: var(--space-sm);
   }

   .product-info__delivery {
      grid-template-columns: 1fr;
      gap: var(--space-md);
   }

   /* Tabs Mobile */
   .product-tabs__nav {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .product-tabs__nav::-webkit-scrollbar {
      display: none;
   }

   .product-tabs__btn {
      padding: var(--space-sm) var(--space-md);
      font-size: 0.8125rem;
      white-space: nowrap;
   }

   .product-tabs__panels {
      padding: var(--space-lg) 0;
   }

   .tab-content__title {
      font-size: 1.25rem;
   }

   .ingredients-grid {
      grid-template-columns: 1fr;
   }

   .steps-grid {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
   }

   .step-card {
      flex-direction: row;
      text-align: left;
      padding: var(--space-md);
   }

   .step-card__number {
      width: 36px;
      height: 36px;
      font-size: 1rem;
      margin-bottom: 0;
      margin-right: var(--space-md);
      flex-shrink: 0;
   }

   .delivery-grid {
      grid-template-columns: 1fr;
   }

   .reviews-layout {
      flex-direction: column;
   }

   /* Reviews carousel on mobile */
   .reviews-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: var(--space-md);
      padding-bottom: var(--space-md);
      margin: 0 calc(-1 * var(--space-md));
      padding-left: var(--space-md);
      padding-right: var(--space-md);
      scrollbar-width: none;
   }

   .reviews-grid::-webkit-scrollbar {
      display: none;
   }

   .reviews-grid .review-card {
      flex: 0 0 85%;
      min-width: 280px;
      scroll-snap-align: start;
   }

   /* Hide reviews summary on mobile - takes too much space */
   .reviews-summary {
      display: none;
   }

   /* Related products carousel on mobile */
   .related-products__grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: var(--space-md);
      padding-bottom: var(--space-md);
      margin: 0 calc(-1 * var(--space-md));
      padding-left: var(--space-md);
      padding-right: var(--space-md);
      scrollbar-width: none;
   }

   .related-products__grid::-webkit-scrollbar {
      display: none;
   }

   .related-products__grid .b2c-product-card {
      flex: 0 0 70%;
      min-width: 200px;
      max-width: 280px;
      scroll-snap-align: start;
   }

   /* Carousel dots for related products */
   .related-products__dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: var(--space-md);
   }

   .related-products__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-border);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
   }

   .related-products__dot.active {
      background: var(--color-accent);
      transform: scale(1.25);
   }

   .b2c-product-card__badge {
      width: 32px;
      height: 32px;
   }

   .b2c-product-card__name {
      font-size: 0.75rem;
   }

   .b2c-product-card__price-current {
      font-size: 1rem;
   }

   .b2c-product-card__cta-sub {
      display: none;
   }

   .b2c-footer__grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }
}