/** Shopify CDN: Minification failed

Line 498:0 Unexpected "}"

**/
/* ========================================
   BK-MEDIA CUSTOM STYLES
   ======================================== */

/* ========================================
   CUSTOM NAVIGATION SELECTED EFFECT
   ======================================== */

/* Selected state for custom navigation items */
.customized-insta-storys-link.is-selected .customized-collection-border > img {
  border-color: #E7246A !important;
}

.customized-insta-storys-link.is-selected .customized-insta-storys-p {
  color: #E7246A !important;
}

/* Hover effect for better UX */
.customized-insta-storys-link:hover .customized-collection-border > img {
  border-color: #E7246A;
  transition: border-color 0.2s ease;
}

.customized-insta-storys-link:hover .customized-insta-storys-p {
  color: #E7246A;
  transition: color 0.2s ease;
}

/* ========================================
   BK-MEDIA ANNOUNCEMENT BAR
   ======================================== */

.bk-media-announcement-bar {
  position: relative;
  z-index: 10;
}

.bk-media-announcement-bar__wrapper {
  width: 100%;
}

.bk-media-announcement-bar__container {
  width: 100%;
}

.bk-media-announcement-bar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding-top: 0.5rem;
}

.bk-media-announcement-bar__column {
  flex: 1;
  padding-inline: 10px;
}

.bk-media-announcement-bar__column:nth-child(2) {
  flex: 2;
}

.bk-media-announcement-bar__pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  background: transparent;
  border: none;
}

.bk-media-announcement-bar__text {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-size: var(--text-sm);
}

.bk-media-announcement-bar__pill-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  background: transparent;
  border: none;
  font-size: var(--text-sm);
}

.bk-media-announcement-bar__image {
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.bk-media-announcement-bar__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 5px;
  flex-shrink: 0;
}

.bk-media-announcement-bar__rating-text {
  font-weight: 500;
  font-size: var(--text-sm);
}

.bk-media-announcement-bar__customer-text {
  font-size: var(--text-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.bk-media-announcement-bar__stars {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-media-announcement-bar__star {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.bk-media-announcement-bar__rating-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  white-space: nowrap;
  min-width: 0;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-announcement-bar__container {
    padding-inline: 0;
  }
  
  /* Hide left and right columns on mobile */
  .bk-media-announcement-bar__column:first-child,
  .bk-media-announcement-bar__column:last-child {
    display: none;
  }
  
  /* Show only the center column */
  .bk-media-announcement-bar__column:nth-child(2) {
    display: flex;
    flex: none;
    width: auto;
    padding-inline: var(--spacing-4);
  }
  
  .bk-media-announcement-bar__row {
    justify-content: center;
    gap: 0;
  }
  
  .bk-media-announcement-bar__text {
    font-size: var(--text-xs);
    gap: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  .bk-media-announcement-bar__rating-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }
  
  .bk-media-announcement-bar__stars {
    display: flex;
    align-items: center;
  }
  
  .bk-media-announcement-bar__rating-text {
    font-size: var(--text-xs);
  }
  
  .bk-media-announcement-bar__customer-text {
    font-size: var(--text-xs);
    margin-left: var(--spacing-1);
  }
  
  .bk-media-announcement-bar__star {
    width: 18px;
    height: 18px;
  }
}

/* ========================================
   BUTTON DESKTOP HIDING
   ======================================== */

/* Hide button on desktop when hide_on_desktop setting is enabled */
@media screen and (min-width: 700px) {
  .bk-media-button-hide-desktop {
    display: none !important;
  }
}

/* ========================================
   PRODUCT CARD PIECE PRICE BADGE STYLING
   ======================================== */

.product-card__piece-price-badge {
  background: #FEF6F8 !important;
  color: #E7246A !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: var(--rounded) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
}

/* Mobile: Hide unit text (Kuchen/Box) on mobile devices */
@media screen and (max-width: 699px) {
  .product-card__piece-price-badge {
    font-size: var(--text-xs) !important;
  }
  
  /* Hide the unit text on mobile */
  .product-card__piece-unit {
    display: none !important;
  }
}

/* Desktop font size and show full text */
@media screen and (min-width: 700px) {
  .product-card__piece-price-badge {
    font-size: var(--text-sm) !important;
  }
}

/* ========================================
   CUSTOM PRODUCT BADGES STYLING
   ======================================== */

/* Ensure custom badges are properly positioned like theme badges */
.product-card__badge-list {
  display: grid !important;
  gap: var(--spacing-2) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: var(--spacing-6) !important;
  left: var(--spacing-6) !important;
}

/* Custom badge styling with specific colors - match theme badge sizing */
.product-card__badge-list .badge--primary {
  background: #E7246A !important;
  color: #FEF6F8 !important;
  font-weight: bold !important;
  font-size: 9px !important;
  padding: 3px var(--spacing-2) !important;
  border-radius: var(--rounded-button) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-1-5) !important;
  width: max-content !important;
}

/* Mobile responsive badge sizing */
@media screen and (max-width: 699px) {
  .product-card__badge-list {
    top: var(--spacing-3) !important;
    left: var(--spacing-3) !important;
  }
  
  .product-card__badge-list .badge--primary {
    font-size: 9px !important;
    padding: 3px var(--spacing-2) !important;
  }
  
  .product-card__excerpt {
    display: none !important;
  }
}

/* Desktop badge sizing - match theme */
@media screen and (min-width: 700px) {
  .product-card__badge-list .badge--primary {
    font-size: var(--text-xs) !important;
    padding: var(--spacing-0-5) var(--spacing-2) !important;
  }
}

/* ========================================
   PRODUCT INFO BADGES STYLING
   ======================================== */

/* Ensure product info badges match theme badge styling */
.product-info__badge-list .badge--primary {
  background: #E7246A !important;
  color: #FEF6F8 !important;
  font-weight: bold !important;
  font-size: 9px !important;
  padding: 3px var(--spacing-2) !important;
  border-radius: var(--rounded-button) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-1-5) !important;
  width: max-content !important;
}

/* Desktop product info badge sizing - match theme */
@media screen and (min-width: 700px) {
  .product-info__badge-list .badge--primary {
    font-size: var(--text-xs) !important;
    padding: var(--spacing-0-5) var(--spacing-2) !important;
  }
}

/* ========================================
   CLICKABLE OFFER BLOCK STYLING
   ======================================== */

/* Make clickable offer blocks look interactive */
.offer--clickable {
  cursor: pointer !important;
}

/* ========================================
   OFFER BLOCK PDP STYLING
   ======================================== */

/* Mobile styling for offer blocks on PDP */
.product-info .offer {
  padding-block: var(--spacing-2) !important;
  margin-block: 0 !important;
}

/* Remove margin from product info block item containing offer */
.product-info__block-item[data-block-type="offer"] {
  margin-block: 0 !important;
}

.product-info .offer .prose {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
}

.product-info .offer .bold {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
}

/* Desktop styling for offer blocks on PDP */
@media screen and (min-width: 700px) {
  .product-info .offer .prose {
    font-size: var(--text-base) !important;
    line-height: 1.5 !important;
  }
  
  .product-info .offer .bold {
    font-size: var(--text-base) !important;
    line-height: 1.5 !important;
  }
}

/* ========================================
   PRODUCT INFO BACKGROUND STYLING
   ======================================== */

/* Add background styling to product info on PDP */
.product-info {
  background-color: #FFFEFC !important;
  padding: var(--spacing-6) !important;
  border-radius: var(--rounded) !important;
}

/* Product info description text size - only on mobile screens */
@media (max-width: 767px) {
  .product-info__description .prose {
    font-size: var(--text-sm) !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 767px) {
  .bk-media-usp-table__item {
    font-size: var(--text-xs) !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   CART COUNT BUBBLE FIX
   ======================================== */

/* Ensure cart count bubble is properly visible and overflows */
.header__cart-count {
  overflow: visible !important;
  z-index: 10 !important;
}

.header__cart-count .count-bubble {
  overflow: visible !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

/* Ensure the cart icon container allows overflow */
.header__icon-list a[aria-controls="cart-drawer"] {
  overflow: visible !important;
}

/* ========================================
   VARIANT OPTIONS COMPACT STYLING
   ======================================== */

/* Ensure variant picker container is visible and properly displayed */
.variant-picker {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

.variant-picker__options {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  gap: var(--spacing-2) !important;
}

/* Desktop: Keep 3 columns with colors like mobile */
@media screen and (min-width: 700px) {
  .variant-picker__options {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    gap: var(--spacing-1-5) !important;
  }
  
  .variant-picker__option {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure desktop block swatches have the same colors as mobile */
  .variant-picker__option-values .block-swatch {
    background-color: #F6D4E5 !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: var(--rounded) !important;
    transition: all 0.2s ease !important;
  }
  
  .variant-picker__option-values .block-swatch span {
    color: #783049 !important;
  }
  
  .variant-picker__option-values input:checked + .block-swatch,
  .variant-picker__option-values .block-swatch.is-selected {
    background-color: #E7246A !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
  }
  
  .variant-picker__option-values input:checked + .block-swatch span,
  .variant-picker__option-values .block-swatch.is-selected span {
    color: #FFFEFC !important;
  }
}

  .variant-picker__option--block {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Make variant option text smaller */
.variant-picker__option-text {
  font-size: 0.75rem !important;
  padding: var(--spacing-2) var(--spacing-1-5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Make swatch variants smaller */
.variant-picker__option--swatch {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Desktop variant picker styling - match mobile with colors */
.variant-picker {
  grid-template-columns: 1fr !important;
  display: grid !important;
  gap: var(--spacing-4) !important;
  --container-outer-width: 0px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.variant-picker__options {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-1-5) !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  --container-outer-width: 0px !important;
  overflow: visible !important;
}

/* Mobile responsive - 3 columns on mobile for better visibility */
@media screen and (max-width: 699px) {
  .variant-picker {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: var(--spacing-4) !important;
    --container-outer-width: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .variant-picker__options {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-1-5) !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    --container-outer-width: 0px !important;
    overflow: visible !important;
  }
  
  .variant-picker__option {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    --container-outer-width: 0px !important;
    overflow: visible !important;
  }
  
  .variant-picker__option--block {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .variant-picker__option-values {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-1-5) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: unset !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  .variant-picker__option--swatch {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    max-width: 1.75rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .variant-picker__option-text {
    font-size: var(--text-sm) !important;
    padding: var(--spacing-2) var(--spacing-2) !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure block swatches fit properly in 3-column grid */
  .variant-picker__option-values .block-swatch {
    overflow: visible !important;
  }
  
  /* Override theme's block swatch styling with higher specificity */
  .variant-picker__option-values .block-swatch {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    background-color: #F6D4E5 !important;
    color: #783049 !important;
    border-radius: var(--rounded) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
  }
  
  .variant-picker__option-values .block-swatch:before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .variant-picker__option-values .block-swatch span {
    color: #783049 !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100% !important;
    font-size: var(--text-sm) !important;
    padding: var(--spacing-2) var(--spacing-2) !important;
    box-sizing: border-box !important;
  }
  
  /* Override theme's checked state styling */
  .variant-picker__option-values input:checked + .block-swatch,
  .variant-picker__option-values .block-swatch.is-selected {
    background-color: #E7246A !important;
    color: #FFFEFC !important;
    box-shadow: none !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
  }
  
  .variant-picker__option-values input:checked + .block-swatch:before,
  .variant-picker__option-values .block-swatch.is-selected:before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .variant-picker__option-values input:checked + .block-swatch span,
  .variant-picker__option-values .block-swatch.is-selected span {
    color: #FFFEFC !important;
  }
  
  /* Ensure variant picker container takes full width */
  .variant-picker__option {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure the entire variant picker takes full width */
  .variant-picker {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Override scroll-area behavior for variant picker */
  .variant-picker .scroll-area {
    scrollbar-width: none !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: unset !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  /* If more than 3 options, stack them in rows */
  .variant-picker__option-values:has(.block-swatch:nth-child(4)) {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
  }
}

/* ========================================
   IMAGE BORDER RADIUS & CONSISTENT ROUNDING
   ======================================== */

/* Ensure product images have consistent radius */
.product-card__image img,
.product-gallery__image img,
.product-gallery__media img,
.product-info__image img,
.horizontal-product__image img {
  border-radius: var(--rounded) !important;
}

/* Ensure product gallery media container also has border radius during transitions */
.product-gallery__media {
  border-radius: var(--rounded) !important;
  overflow: hidden !important;
}

/* Ensure all product gallery images maintain border radius during transitions */
.product-gallery__media img,
.product-gallery__media picture,
.product-gallery__media picture img {
  border-radius: var(--rounded) !important;
  transition: border-radius 0s !important;
}



/* Ensure form elements maintain their specific radius */
.input,
.select,
.textarea,
.button {
  border-radius: var(--rounded-button) !important;
}

/* Ensure product cards maintain their specific radius */
.product-card {
  border-radius: var(--rounded-lg) !important;
}

/* ========================================
   USP TABLE STYLING
   ======================================== */

.bk-media-usp-table {
  margin-block-start: var(--spacing-4);
  border-radius: var(--rounded);
  overflow: hidden;
  background: white;
  border: 1px solid rgb(var(--border-color) / 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 8px 40px rgba(0, 0, 0, 0.04);
}

.bk-media-usp-table__tabs {
  display: flex;
  background: #F6D4E5;
  border-bottom: 1px solid rgb(var(--border-color) / 0.2);
}

.bk-media-usp-table__tab {
  flex: 1;
  padding: var(--spacing-3) var(--spacing-4);
  background: transparent;
  border: none;
  color: #783049;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: center;
  font-size: 0.875rem;
  border-radius: var(--rounded) var(--rounded) 0 0;
}

.bk-media-usp-table__tab:hover {
  background: rgba(236, 72, 153, 0.1);
}

.bk-media-usp-table__tab.active {
  background: #E7246A;
  color: white;
}

.bk-media-usp-table__content {
  background: #FEF6F8;
  padding: var(--spacing-4);
}

.bk-media-usp-table__panel {
  display: none;
}

.bk-media-usp-table__panel.active {
  display: block;
}

.bk-media-usp-table__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  font-size:var(--text-sm);
}

.bk-media-usp-table__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.bk-media-usp-table__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-usp-table__tabs {
    flex-wrap: wrap;
  }
  
  .bk-media-usp-table__tab {
    flex: 1 1 50%;
    font-size: 0.75rem;
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  /* Corner border radius for mobile tabs */
  .bk-media-usp-table__tab:nth-child(1) {
    border-radius: 0 0 var(--rounded) 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(2) {
    border-radius: 0 0 0 var(--rounded) !important;
  }
  
  .bk-media-usp-table__tab:nth-child(3) {
    border-radius: 0 var(--rounded) 0 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(4) {
    border-radius: var(--rounded) 0 0 0 !important;
  }
  
  /* Active state corner border radius */
  .bk-media-usp-table__tab:nth-child(1).active {
    border-radius: 0 0 var(--rounded) 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(2).active {
    border-radius: 0 0 0 var(--rounded) !important;
  }
  
  .bk-media-usp-table__tab:nth-child(3).active {
    border-radius: 0 var(--rounded) 0 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(4).active {
    border-radius: var(--rounded) 0 0 0 !important;
  }
  
  /* Hover state corner border radius */
  .bk-media-usp-table__tab:nth-child(1):hover {
    border-radius: 0 0 var(--rounded) 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(2):hover {
    border-radius: 0 0 0 var(--rounded) !important;
  }
  
  .bk-media-usp-table__tab:nth-child(3):hover {
    border-radius: 0 var(--rounded) 0 0 !important;
  }
  
  .bk-media-usp-table__tab:nth-child(4):hover {
    border-radius: var(--rounded) 0 0 0 !important;
  }
  
  .bk-media-usp-table__content {
    padding: var(--spacing-3);
  }
}

/* ========================================
   USP TABLE NEW COMPONENTS STYLING
   ======================================== */

/* Rich text content styling */
.bk-media-usp-table__rich-text {
  line-height: 1.5;
  font-size: var(--text-sm);
}

.bk-media-usp-table__rich-text p {
  margin-block-end: var(--spacing-3);
  font-size: var(--text-sm);
}

.bk-media-usp-table__rich-text p:last-child {
  margin-block-end: 0;
}

/* Zutaten list container styling */
.bk-media-usp-table__zutaten-list {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
  --zutaten-item-width: 300px;
}

.bk-media-usp-table__zutaten {
  flex: 0 0 var(--zutaten-item-width);
  min-width: var(--zutaten-item-width);
}

/* Zutaten layout styling */
.bk-media-usp-table__zutaten {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-3);
  border: 1px solid rgb(var(--border-color) / 0.1);
  border-radius: var(--rounded);
  background: #FFFEFC;
  flex: 0 0 var(--zutaten-item-width);
  min-width: var(--zutaten-item-width);
}

.bk-media-usp-table__zutaten-image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--rounded);
  overflow: hidden;
}

.bk-media-usp-table__zutaten-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-media-usp-table__zutaten-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  min-width: 0;
  overflow: hidden;
}

.bk-media-usp-table__zutaten-title {
  font-size: var(--text-base);
  color: #783049;
  margin: 0;
}

.bk-media-usp-table__zutaten-text {
  line-height: 1.5;
  color: #4a4a4a;
  font-size: var(--text-xs);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.bk-media-usp-table__zutaten-text.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.bk-media-usp-table__zutaten-button {
  align-self: flex-start;
  background: #E7246A;
  color: white;
  border: none;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--rounded);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-xs);
}

.bk-media-usp-table__zutaten-button:hover {
  background: #c61e5a;
  transform: translateY(-1px);
}

/* Questions accordion styling */
.bk-media-usp-table__questions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.bk-media-usp-table__question {
  border: 1px solid rgb(var(--border-color) / 0.2);
  border-radius: var(--rounded);
  background: #FFFEFC;
  overflow: hidden;
}

.bk-media-usp-table__question-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  background: #FFFEFC;
  cursor: pointer;
  transition: all 0.2s ease;
  list-style: none;
}

.bk-media-usp-table__question-summary:hover {
  background: #e9ecef;
}

.bk-media-usp-table__question-summary::-webkit-details-marker {
  display: none;
}

.bk-media-usp-table__question-text {
  font-weight: 700;
  color: #783049;
  font-size: var(--text-sm);
}

.bk-media-usp-table__question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #783049;
  transition: transform 0.2s ease;
}

.bk-media-usp-table__question[open] .bk-media-usp-table__question-icon {
  transform: rotate(180deg);
}

.bk-media-usp-table__question-answer {
  padding: var(--spacing-3) var(--spacing-4);
  background: #fffefc;
  line-height: 1.5;
  color: #4a4a4a;
  font-size: var(--text-sm);
}

/* Scroll area styling for zutaten */
.bk-media-usp-table__panel .scroll-area {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

.bk-media-usp-table__panel .scroll-area.is-scrollable {
  overflow-x: auto;
}

/* Force exact width calculation for zutaten scroll area */
.bk-media-usp-table__panel .scroll-area .bk-media-usp-table__zutaten-list {
  flex-shrink: 0;
  width: calc(var(--zutaten-item-width) * var(--zutaten-count) + var(--spacing-4) * (var(--zutaten-count) - 1)) !important;
  max-width: none;
}

.scrollable-with-controls {
  gap: var(--spacing-2);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}

/* Zutaten link styling */
.bk-media-usp-table__zutaten-link {
  text-align: left !important;
  display: none !important;
}

.bk-media-usp-table__zutaten-link-text {
  color: #ec4899 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: color 0.2s ease !important;
}

.bk-media-usp-table__zutaten-link-text:hover {
  color: #c61e5a !important;
}

/* Mobile responsive adjustments for USP table zutaten */
@media screen and (max-width: 699px) {
  .bk-media-usp-table__zutaten-list {
    --zutaten-item-width: 280px;
  }
  
  .bk-media-usp-table__zutaten {
    --zutaten-item-width: 280px;
  }
  
  .bk-media-usp-table__zutaten-link {
    display: block !important;
  }
  
  .bk-media-usp-table__zutaten-link-text {
    font-size: 0.75rem !important;
  }
}

/* Mobile responsive adjustments for new components */
@media screen and (max-width: 699px) {
  .bk-media-usp-table__zutaten-image {
    width: 80px;
    height: 80px;
  }
  
  .bk-media-usp-table__zutaten-content {
    gap: var(--spacing-2);
  }
  
  .bk-media-usp-table__zutaten-title {
    font-size: var(--text-xs);
  }
  
  .bk-media-usp-table__question-summary {
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .bk-media-usp-table__question-answer {
    padding: var(--spacing-2) var(--spacing-3);
  }
}

/* ========================================
   PAYMENT ICONS STYLING
   ======================================== */

.bk-media-payment-icons {
  width: 100%;
  margin-block-start: var(--spacing-2);
}

.bk-media-payment-icons__container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: center;
  align-items: center;
  width: 100%;
}

.bk-media-payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-media-payment-icon svg {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.2s ease;
  height: 24px;
  width: auto;
}

.bk-media-payment-icon:hover svg {
  filter: grayscale(0%);
  opacity: 1;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-payment-icon svg {
    height: 20px;
  }
}

/* ========================================
   CUSTOM QUANTITY SELECTOR STYLING
   ======================================== */

.bk-media-quantity-selector {
  margin-block-start: var(--spacing-3);
}

.bk-media-quantity-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
  margin-block-start: var(--spacing-2);
}

.bk-media-quantity-option {
  cursor: pointer;
  transition: all 0.2s ease;
}

.bk-media-quantity-option:hover {
  transform: translateY(-2px);
}

.bk-media-quantity-card {
  background: #FCE7F3;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.bk-media-quantity-option--selected .bk-media-quantity-card {
  border-color: #E7246A;
  background: #FCE7F3;
}

.bk-media-quantity-image {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.bk-media-quantity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bk-media-quantity-badge {
  position: absolute;
  bottom: var(--spacing-2);
  left: var(--spacing-2);
  background: #E7246A;
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--rounded);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.bk-media-quantity-label {
  padding: var(--spacing-3);
  text-align: center;
  font-weight: 500;
  color: #783049;
  background: #FCE7F3;
  border-top: 1px solid rgba(120, 48, 73, 0.1);
}

.bk-media-quantity-option--selected .bk-media-quantity-label {
  background: #E7246A;
  color: white;
}

.bk-media-quantity-input {
  display: none;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-quantity-options {
    gap: var(--spacing-2);
  }
  
  .bk-media-quantity-image {
    height: 100px;
  }
  
  .bk-media-quantity-label {
    padding: var(--spacing-2);
    font-size: 0.875rem;
  }
  
  .bk-media-quantity-badge {
    font-size: 0.625rem;
    padding: var(--spacing-1) var(--spacing-1-5);
  }
}

/* ========================================
   QUANTITY VARIANT DISCOUNT STYLING
   ======================================== */

.bk-media-quantity-variant-discount {
  margin-block-start: var(--spacing-3);
}

.bk-media-quantity-variant-discount__heading {
  margin-block-end: var(--spacing-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: #783049 !important;
  text-align: start;
}

.bk-media-quantity-variant-discount__selector {
  margin-block-start: var(--spacing-2);
}

.bk-media-quantity-variant-discount__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  margin-block-start: var(--spacing-1);
  width: 100%;
}

@media screen and (min-width: 700px) {
  .bk-media-quantity-variant-discount__options {
    gap: var(--spacing-3);
    max-width: 300px;
    margin-inline-start: 0;
  }
}

.bk-media-quantity-variant-discount__option {
  cursor: pointer;
  transition: all 0.2s ease;
}

.bk-media-quantity-variant-discount__option:hover {
  transform: translateY(-1px);
}

.bk-media-quantity-variant-discount__card {
  background: #F6D4E5;
  border-radius: var(--rounded);
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  border-top-left-radius: var(--rounded-input);
  border-top-right-radius: var(--rounded-input);
}

.bk-media-quantity-variant-discount__option--selected .bk-media-quantity-variant-discount__card {
  border-color: #E7246A;
  background: #E7246A;
}

.bk-media-quantity-variant-discount__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  height: 0;
  padding-bottom: 100%;
  border-radius: var(--rounded-input);
}

.bk-media-quantity-variant-discount__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--rounded-input);
}

.bk-media-quantity-variant-discount__badge {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  background: #E7246A;
  color: white;
  padding: 4px var(--spacing-2);
  border-radius: var(--rounded);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  transform: translate(-50%, 50%);
}

.bk-media-quantity-variant-discount__label {
  padding: var(--spacing-2);
  text-align: center;
  font-weight: 500;
  color: #783049;
  background: #F6D4E5;
  border-top: 1px solid rgba(120, 48, 73, 0.1);
  font-size: var(--text-sm);
}

.bk-media-quantity-variant-discount__option--selected .bk-media-quantity-variant-discount__label {
  background: #E7246A;
  color: white;
  font-size: var(--text-sm);
}

.bk-media-quantity-variant-discount__input {
  display: none;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-quantity-variant-discount__options {
    gap: var(--spacing-4);
    width: 100%;
  }
  
  .bk-media-quantity-variant-discount__image {
    aspect-ratio: 1 / 1;
  }
  
  .bk-media-quantity-variant-discount__label {
    padding: var(--spacing-1);
    font-size: var(--text-sm);
  }
  
  .bk-media-quantity-variant-discount__badge {
    font-size: var(--text-xs);
    padding: var(--spacing-1) var(--spacing-2);
    bottom: var(--spacing-4);
    left: 50%;
    transform: translate(-50%,50%);
  }
  
  .bk-media-quantity-variant-discount__heading {
    font-size: var(--text-sm);
  }
}

/* ========================================
   VARIANT PICKER IMAGE STYLING
   ======================================== */

/* Override thumbnail-swatch for variant images to match Quantity Variant Discount styling */
.variant-picker__option-values .thumbnail-swatch {
  --swatch-size: auto;
  width: 100%;
  height: auto;
  border-radius: var(--rounded);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #F6D4E5;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  overflow: hidden;
  cursor: pointer;
}


.variant-picker__option-values .thumbnail-swatch:before {
  content: "";
  border-radius: inherit;
  opacity: 0;
  will-change: transform;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(.95);
  box-shadow: 0 0 0 2px #E7246A;
  z-index: 2;
}

.variant-picker__option-values .thumbnail-swatch__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rounded-input);
  z-index: 1;
}

.variant-picker__option-values .thumbnail-swatch__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--rounded-input);
}

/* Add variant name below image */
.variant-picker__option-values .thumbnail-swatch__label {
  padding: var(--spacing-2);
  text-align: center;
  font-weight: 500;
  color: #783049;
  background: #F6D4E5;
  border-top: 1px solid rgba(120, 48, 73, 0.1);
  font-size: var(--text-sm);
  line-height: 1.2;
  z-index: 1;
  position: relative;
}

/* Selected state - override theme styling */
.variant-picker__option-values input:checked + .thumbnail-swatch:before,
.variant-picker__option-values .thumbnail-swatch.is-selected:before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.variant-picker__option-values input:checked + .thumbnail-swatch,
.variant-picker__option-values .thumbnail-swatch.is-selected {
  border-color: #E7246A !important;
  background: #E7246A !important;
  box-shadow: none !important;
}

.variant-picker__option-values input:checked + .thumbnail-swatch .thumbnail-swatch__label,
.variant-picker__option-values .thumbnail-swatch.is-selected .thumbnail-swatch__label {
  background: #E7246A !important;
  color: #FFFEFC !important;
}

/* Disabled state */
.variant-picker__option-values .thumbnail-swatch.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .variant-picker__option-values .thumbnail-swatch__label {
    padding: var(--spacing-1);
    font-size: var(--text-sm);
  }
}

/* ========================================
   PRODUCT CARD VISIBILITY FIXES
   ======================================== */

/* Ensure product cards are visible */
.product-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #FFFEFC !important;
  padding: var(--spacing-2) !important;
  border-radius: var(--rounded) !important;
}

/* ========================================
   PRODUCT CARD IMAGE HOVER FIX
   ======================================== */

/* Fix product card image display - show first image by default, second on hover */
.product-card__image--secondary {
  display: block !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transition: opacity 0.3s ease !important;
}

.product-card__image--primary {
  position: relative !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
}

/* Ensure product card figure has proper positioning context */
.product-card__figure {
  position: relative !important;
}

/* Show secondary image on hover */
@media screen and (pointer: fine) {
  .product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary {
    opacity: 0 !important;
  }

  .product-card--show-secondary-media .product-card__figure:hover .product-card__image--secondary {
    opacity: 1 !important;
  }
}

@media screen and (min-width: 700px) {
  .product-card {
    padding: var(--spacing-3) !important;
  }
}

/* Ensure product lists are visible */
.product-list {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure collection results are visible */
.collection__results {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for product list grid layout - removed hardcoded grid to allow theme settings to work */
.product-list {
  gap: var(--spacing-4) !important;
}

@media screen and (min-width: 700px) {
  .product-list {
    gap: var(--spacing-6) !important;
  }
}

/* Ensure product card images are visible */
.product-card__image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure product card info is visible */
.product-card__info {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for reveal-items component */
reveal-items {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for scroll-carousel component */
scroll-carousel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* ========================================
   IMAGE LINK BLOCKS VISIBILITY FIXES
   ======================================== */

/* Ensure image link blocks are visible */
.shopify-section--image-link-blocks .image-link-blocks {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.shopify-section--image-link-blocks .image-link-blocks__item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile scrolling - start from left edge */
@media screen and (max-width: 699px) {
  .shopify-section--image-link-blocks .image-link-blocks {
    justify-content: start !important;
    justify-items: start !important;
    scroll-snap-type: x mandatory !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
  }
  
  .shopify-section--image-link-blocks .image-link-blocks__item {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* Desktop centering - keep centered on larger screens */
@media screen and (min-width: 700px) {
  .shopify-section--image-link-blocks .image-link-blocks {
    display: grid !important;
    justify-content: start !important;
    justify-items: start !important;
    margin-inline: auto !important;
    max-width: var(--container-max-width) !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
  }
  
  .shopify-section--image-link-blocks .image-link-blocks__item {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* ========================================
   HEADING COLOR OVERRIDE
   ======================================== */

/* Global heading color override */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="heading"],
[class*="title"] {
  color: #E7246A !important;
}

/* Specific heading class targeting */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {
  color: #E7246A !important;
}

/* Product page headings */
.product-info h1, .product-info h2, .product-info h3,
.product-card h1, .product-card h2, .product-card h3,
.collection h1, .collection h2, .collection h3 {
  color: #E7246A !important;
}

/* Blog and article headings */
.article h1, .article h2, .article h3,
.blog h1, .blog h2, .blog h3,
.post h1, .post h2, .post h3 {
  color: #E7246A !important;
}

/* Page headings */
.page h1, .page h2, .page h3,
.main-page h1, .main-page h2, .main-page h3 {
  color: #E7246A !important;
}

/* ========================================
   HEADER CUSTOMIZATIONS
   ======================================== */

/* Floating Header - Comprehensive targeting */
html body [id*="shopify-section-header"] .store-header.header {
  border-radius: 50px !important;
  margin-inline-start: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  margin-inline-end: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  z-index: 100 !important;
}

html body [id*="shopify-section-header"] .store-header.header .header__wrapper {
  padding: 1.25rem 1.75rem !important;
}



/* Remove conflicting section styles */
html body [id*="shopify-section-header"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Height-observer spacing override */
height-observer {
  padding-top: var(--spacing-6) !important;
}

/* Alternative targeting methods */
html body [id^="shopify-section-header"] .store-header.header {
  border-radius: 50px !important;
  margin-inline-start: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  margin-inline-end: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  z-index: 100 !important;
}

html body [id^="shopify-section-header"] .store-header.header .header__wrapper {
  padding: 1.25rem 1.75rem !important;
}



/* Direct targeting of store-header */
html body store-header.header {
  border-radius: 50px !important;
  margin-inline-start: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  margin-inline-end: max(var(--container-gutter), 50% - calc(var(--container-max-width) * 0.9) / 2) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Mobile header width adjustment */
@media screen and (max-width: 699px) {
  html body store-header.header {
    margin-inline-start: 10% !important;
    margin-inline-end: 10% !important;
  }
}

/* Header link list spacing for desktop */
@media screen and (min-width: 1150px) {
  .header__link-list {
    gap: var(--spacing-2) var(--spacing-3);
    display: flex;
  }
}

/* Override header spacing changes at 1400px */
@media screen and (min-width: 1400px) {
  html body [id*="shopify-section-header"] .store-header.header,
  html body [id^="shopify-section-header"] .store-header.header,
  html body store-header.header {
    --header-part-gap: var(--spacing-6) !important;
    --header-link-list-spacing: var(--spacing-6) !important;
  }
}




/* Override any inline styles */
html body [id*="shopify-section-header"][style*="position"] {
  position: relative !important;
}

html body [id*="shopify-section-header"][style*="background"] {
  background: transparent !important;
}

/* ========================================
   HEADER BACKGROUND OPACITY FIX
   ======================================== */

/* Make header truly transparent when background opacity is 0% */
.bk-media-header-transparent {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body [id*="shopify-section-header"][style*="margin"] {
  margin: 0 !important;
}

html body [id*="shopify-section-header"][style*="padding"] {
  padding: 0 !important;
}

/* Hide Search Icon */
.header .tap-area[aria-controls="search-drawer"],
.header a[aria-controls="search-drawer"] {
  display: none !important;
}

/* Navigation Menu Pills Styling */
.header__link-list a {
  background: #FEF6F8 !important;
  border-radius: 25px !important;
  padding: var(--spacing-2) var(--spacing-4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* Active Menu Item Styling */
.header__link-list a.active,
.header__link-list a[aria-current="page"] {
  background: #E7246A !important;
  color: #FFFEFC !important;
}

.header__link-list a::before {
  content: '';
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

/* Custom menu pill images - will be applied via inline styles */
.header__link-list a[data-pill-image="1"]::before {
  background-image: var(--pill-image-1) !important;
}

.header__link-list a[data-pill-image="2"]::before {
  background-image: var(--pill-image-2) !important;
}

.header__link-list a[data-pill-image="3"]::before {
  background-image: var(--pill-image-3) !important;
}

.header__link-list a[data-pill-image="4"]::before {
  background-image: var(--pill-image-4) !important;
}

.header__link-list a[data-pill-image="5"]::before {
  background-image: var(--pill-image-5) !important;
}

/* Cart Styling with Round Background */
.header__icon-list li:last-child a[href*="/cart"] {
  background: #E7246A;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.header__icon-list li:last-child a[href*="/cart"] svg {
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 0 !important;
}

/* Profile Icon Styling with Round Background */
.header__icon-list li:nth-last-child(2) a[href*="/account"],
.header__icon-list li:nth-last-child(2) a[href*="/login"] {
  background: #E7246A;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.header__icon-list li:nth-last-child(2) a[href*="/account"] svg,
.header__icon-list li:nth-last-child(2) a[href*="/login"] svg {
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 0 !important;
}

/* Cart Count Badge Styling */
.header__icon-list li:last-child .header__cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
}

.header__icon-list li:last-child .count-bubble {
  background: white;
  color: #E7246A;
  border: 2px solid #E7246A;
  font-weight: 600;
  font-size: 12px;
  min-width: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* BK-Media specific utility classes */
.bk-media-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.bk-media-section {
  margin-block-start: var(--calculated-section-spacing-block-start);
  margin-block-end: var(--calculated-section-spacing-block-end);
}

.bk-media-block {
  margin-block-start: var(--spacing-4);
  margin-block-end: var(--spacing-4);
}

/* ========================================
   COMPONENT STYLES
   ======================================== */

/* Social Trust Pill Component */
.social-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--rounded-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--background, var(--surface-secondary));
  color: var(--text-color, var(--text-primary));
}

.social-trust-pill img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* Material Tabs Component */
.material-tabs-container {
  margin-block: var(--spacing-6);
}

.material-tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.material-tab {
  position: relative;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.material-tab:hover {
  transform: translateY(-2px);
}

.material-tab-background {
  position: relative;
  aspect-ratio: 16/9;
}

.material-tab-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-tab-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.material-tab-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-4);
  color: white;
}

.material-tab-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-block-end: var(--spacing-2);
}

.material-tab-text {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Wirkung Block Component */
.wirkung-block-content {
  background: #F4F4F4;
  border-radius: var(--rounded-lg);
  border: 1px solid rgb(var(--border-color) / 0.2);
  overflow: hidden;
  padding: var(--spacing-4);
  text-align: left;
}

.wirkung-block-content img {
  border-radius: var(--rounded);
  margin-block-end: var(--spacing-3);
  width: 100%;
  height: auto;
}

.wirkung-block-content h1,
.wirkung-block-content h2,
.wirkung-block-content h3,
.wirkung-block-content h4,
.wirkung-block-content h5,
.wirkung-block-content h6,
.wirkung-block-content p {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media screen and (min-width: 700px) {
  .material-tabs-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-6);
  }
  
  .material-tab-content {
    padding: var(--spacing-6);
  }
  
  /* Larger cart button on desktop */
  .header__icon-list li:last-child a[href*="/cart"] {
    width: 36px;
    height: 36px;
  }
  
  .header__icon-list li:last-child a[href*="/cart"] svg {
    width: 18px;
    height: 18px;
  }
  
  /* Larger profile button on desktop */
  .header__icon-list li:nth-last-child(2) a[href*="/account"],
  .header__icon-list li:nth-last-child(2) a[href*="/login"] {
    width: 36px;
    height: 36px;
  }
  
  .header__icon-list li:nth-last-child(2) a[href*="/account"] svg,
  .header__icon-list li:nth-last-child(2) a[href*="/login"] svg {
    width: 18px;
    height: 18px;
  }
  
  /* Profile icon color on desktop */
  .sm\:block {
    display: block;
    color: #E7246A;
  }
}

@media screen and (min-width: 1000px) {
  .material-tabs-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Focus states for interactive elements */
.material-tab:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Cart focus state */
.header__icon-list li:last-child a[href*="/cart"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Profile focus state */
.header__icon-list li:nth-last-child(2) a[href*="/account"]:focus-visible,
.header__icon-list li:nth-last-child(2) a[href*="/login"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .material-tab {
    transition: none;
  }
  
  .material-tab:hover {
    transform: none;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .material-tab {
    break-inside: avoid;
  }
}

/* ========================================
   HERO LAYOUT MOBILE RESPONSIVE
   ======================================== */

/* Hide right column on mobile */
@media screen and (max-width: 699px) {
  .bk-media-hero-layout__right-column {
    display: none !important;
  }
}

/* ========================================
   BK-MEDIA HERO LAYOUT SECTION
   ======================================== */

/* Ensure section container doesn't overflow */
.shopify-section--bk-media-hero-layout {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Hero Layout Grid */
.bk-media-hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  align-items: center;
  max-width: var(--container-max-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
  .bk-media-hero-layout {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* Extra large screens - maintain proportions */
@media screen and (min-width: 1400px) {
  .bk-media-hero-layout {
    max-width: 1400px;
  }
}

/* Column Layouts */
.bk-media-hero-layout__left-column,
.bk-media-hero-layout__center-column,
.bk-media-hero-layout__right-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

@media screen and (min-width: 1000px) {
  .bk-media-hero-layout__left-column {
    max-width: 280px;
    justify-self: end;
  }
  
  .bk-media-hero-layout__right-column {
    max-width: 280px;
    justify-self: start;
  }
}

/* Mobile and Tablet: Stack center column first, then left, then right (1000px and smaller) */
@media screen and (max-width: 1000px) {
  .bk-media-hero-layout__left-column {
    order: 2;
  }

  .bk-media-hero-layout__center-column {
    order: 1;
  }

  .bk-media-hero-layout__right-column {
    order: 3;
  }
}

/* Vertical Center Alignment for Side Columns */
.bk-media-hero-layout__left-column,
.bk-media-hero-layout__right-column {
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  /* Desktop: Reset order and use grid positioning */
  .bk-media-hero-layout__left-column,
  .bk-media-hero-layout__center-column,
  .bk-media-hero-layout__right-column {
    order: unset;
  }
  
  .bk-media-hero-layout__left-column {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  
  .bk-media-hero-layout__center-column {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  
  .bk-media-hero-layout__right-column {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* Image Block Styling */
.bk-media-image-block {
  position: relative;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  background: #FFFEFC;
  padding: var(--spacing-1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Image Block Alignment */
.bk-media-image-block--align-left {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.bk-media-image-block--align-center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.bk-media-image-block--align-right {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* Full Width for Center Column */
.bk-media-hero-layout__center-column .bk-media-image-block {
  width: 100%;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.bk-media-image-block__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--rounded-lg);
}

.bk-media-image-block__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
}

/* Image Block Placeholder */
.bk-media-image-block__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px dashed #d1d5db;
  color: #6b7280;
  padding: var(--spacing-4);
  text-align: center;
  border-radius: var(--rounded-lg);
}

.bk-media-image-block__placeholder-icon {
  margin-bottom: var(--spacing-2);
  opacity: 0.6;
}

.bk-media-image-block__placeholder-text {
  font-size: var(--text-sm);
  font-weight: 500;
}

.bk-media-image-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: var(--spacing-4);
  gap: var(--spacing-3);
  z-index: 2;
  pointer-events: none;
}

.bk-media-image-block__overlay-text {
  font-size: var(--text-h6);
  font-weight: var(--heading-font-weight);
  font-family: var(--heading-font-family);
  color: #FEF6F8 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: var(--heading-line-height);
}

/* More specific selector to override theme heading colors */
.shopify-section--bk-media-hero-layout .bk-media-image-block__overlay-text {
  color: #FEF6F8 !important;
}

/* Image Block Button */
.bk-media-image-block__button-wrapper {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

/* Video Block Styling */
.bk-media-video-block {
  position: relative;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  background: #FFFEFC;
  padding: var(--spacing-1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
}

/* Video Block Alignment */
.bk-media-video-block--align-left {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.bk-media-video-block--align-center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.bk-media-video-block--align-right {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* Video blocks use theme's video-media element for proper functionality */
.bk-media-video-block video-media {
  width: 100%;
  height: 100%;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  display: block;
}

.bk-media-video-block video-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rounded-lg);
}

/* Video Block Placeholder */
.bk-media-video-block__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px dashed #d1d5db;
  color: #6b7280;
  padding: var(--spacing-4);
  text-align: center;
  border-radius: var(--rounded-lg);
}

.bk-media-video-block__placeholder-icon {
  margin-bottom: var(--spacing-2);
  opacity: 0.6;
}

.bk-media-video-block__placeholder-text {
  font-size: var(--text-sm);
  font-weight: 500;
}

.bk-media-video-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: var(--spacing-4);
  gap: var(--spacing-3);
  pointer-events: none;
  z-index: 1;
}

.bk-media-video-block__overlay-text {
  font-size: var(--text-h6);
  font-weight: var(--heading-font-weight);
  font-family: var(--heading-font-family);
  color: #FEF6F8 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: var(--heading-line-height);
}

/* More specific selector to override theme heading colors */
.shopify-section--bk-media-hero-layout .bk-media-video-block__overlay-text {
  color: #FEF6F8 !important;
}

/* Video Block Button */
.bk-media-video-block__button-wrapper {
  display: flex;
  align-items: center;
  pointer-events: auto;
  z-index: 2;
}

.bk-media-video-block__button-wrapper--left {
  justify-content: flex-start;
}

.bk-media-video-block__button-wrapper--center {
  justify-content: center;
}

.bk-media-video-block__button-wrapper--right {
  justify-content: flex-end;
}

/* Mobile video controls accessibility */
@media screen and (max-width: 699px) {
  .bk-media-video-block__overlay {
    justify-content: center;
    padding: var(--spacing-4);
    align-items: center;
    pointer-events: none; /* Allow video controls to work */
  }
  
  .bk-media-video-block__button-wrapper {
    display: none; /* Hide button on mobile */
  }
  
  /* Ensure video controls are accessible */
  .bk-media-video-block video-media {
    z-index: 3;
  }
  
  .bk-media-video-block video-media video {
    z-index: 3;
  }
}

.bk-media-image-block__button-wrapper--left {
  justify-content: flex-start;
}

.bk-media-image-block__button-wrapper--center {
  justify-content: center;
}

.bk-media-image-block__button-wrapper--right {
  justify-content: flex-end;
}

/* Product Pill Styling */
.bk-media-product-pill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: #FEF6F8;
  border: var(--spacing-1) solid #FFFEFC;
  border-radius: var(--rounded);
  transition: transform 0.2s ease;
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: 100%;
  padding: var(--spacing-2);
  box-sizing: border-box;
  overflow: hidden;
}

/* Product Pill Alignment */
.bk-media-product-pill--align-left {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.bk-media-product-pill--align-center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.bk-media-product-pill--align-right {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* Removed hover effect from product pills */

/* Mobile and Tablet Visibility Controls (1000px and smaller) */
.bk-media-image-block--hide-mobile,
.bk-media-video-block--hide-mobile,
.bk-media-product-pill--hide-mobile {
  display: none;
}

@media screen and (min-width: 1000px) {
  .bk-media-image-block--hide-mobile,
  .bk-media-video-block--hide-mobile,
  .bk-media-product-pill--hide-mobile {
    display: block;
  }
  
  .bk-media-product-pill--hide-mobile {
    display: flex;
  }
}

.bk-media-product-pill__image-wrapper {
  position: relative;
  flex-shrink: 0;
}

.bk-media-product-pill__image {
  width: 72px;
  height: 72px;
  border-radius: var(--rounded);
  object-fit: cover;
  flex-shrink: 0;
}

.bk-media-product-pill__discount-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: #E7246A;
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 12px;
  font-size: var(--text-xs);
  font-weight: bold;
  white-space: nowrap;
  z-index: 1;
}

.bk-media-product-pill__content {
  flex: 1;
  min-width: 0;
}

.bk-media-product-pill__title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-1);
  color: #783049 !important;
}

.bk-media-product-pill__subtitle {
  font-size: var(--text-xs);
  color: #783049 !important;
  opacity: 0.5;
  text-decoration: underline;
}

/* Product Pill Placeholder */
.bk-media-product-pill--placeholder {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px dashed #d1d5db;
  color: #6b7280;
  cursor: default;
  border-radius: var(--rounded-full);
}

.bk-media-product-pill--placeholder:hover {
  transform: none;
}

.bk-media-product-pill__placeholder-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(107, 114, 128, 0.1);
  border-radius: var(--rounded);
  flex-shrink: 0;
  opacity: 0.6;
}

/* ========================================
   COLLAPSIBLE PRODUCT PILLS
   ======================================== */

/* Hidden pills by default */
.bk-media-product-pill--hidden {
  display: none !important;
}

/* Show hidden pills when expanded */
.bk-media-hero-layout--expanded .bk-media-product-pill--hidden {
  display: flex !important;
}

/* Show all hidden pills when show_all_mobile is enabled - outside media query for higher specificity */
.shopify-section--bk-media-hero-layout[data-show-all-mobile="true"] .bk-media-product-pill--hidden {
  display: flex !important;
}

/* Hide toggle button on mobile when show_all_mobile is enabled */
@media screen and (max-width: 699px) {
  .shopify-section--bk-media-hero-layout[data-show-all-mobile="true"] .bk-media-product-pills-toggle {
    display: none !important;
  }
}

/* Ensure mobile shows all pills when setting is enabled */
@media screen and (max-width: 699px) {
  .shopify-section--bk-media-hero-layout[data-show-all-mobile="true"] .bk-media-product-pill--hidden {
    display: flex !important;
  }
}

/* Hide pills on desktop when show_all_mobile is enabled (only show on mobile) */
@media screen and (min-width: 700px) {
  .shopify-section--bk-media-hero-layout[data-show-all-mobile="true"] .bk-media-product-pill--hidden {
    display: none !important;
  }
}

/* Toggle button styling */
.bk-media-product-pills-toggle {
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.bk-media-product-pills-toggle__button {
  background: #FEF6F8;
  border: var(--spacing-1) solid #FFFEFC;
  border-radius: var(--rounded);
  color: #783049;
  padding: var(--spacing-1) var(--spacing-4);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  white-space: nowrap;
}

/* Removed hover effects */

.bk-media-product-pills-toggle__button--hidden {
  display: none;
}

.bk-media-hero-layout--expanded .bk-media-product-pills-toggle__button[data-toggle="expand"] {
  display: none;
}

.bk-media-hero-layout--expanded .bk-media-product-pills-toggle__button[data-toggle="collapse"] {
  display: flex;
}

/* Chevron icon styling */
.bk-media-product-pills-toggle__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.bk-media-product-pills-toggle__button[data-toggle="expand"] .bk-media-product-pills-toggle__chevron {
  transform: rotate(0deg);
}

.bk-media-product-pills-toggle__button[data-toggle="collapse"] .bk-media-product-pills-toggle__chevron {
  transform: rotate(180deg);
}

/* Mobile responsive fixes for hero layout and product pills */
@media screen and (max-width: 699px) {
  /* Section-level mobile containment */
  .shopify-section--bk-media-hero-layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }
  
  .bk-media-hero-layout {
    max-width: 100%;
    margin-inline: 0;
    width: 100%;
    overflow-x: hidden;
  }
  
  .bk-media-hero-layout__left-column,
  .bk-media-hero-layout__center-column,
  .bk-media-hero-layout__right-column {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }
  
  .bk-media-product-pill {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-3);
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .bk-media-product-pill__content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .bk-media-product-pill__title,
  .bk-media-product-pill__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .bk-media-product-pills-toggle {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .bk-media-product-pills-toggle__button {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    box-sizing: border-box;
  }
  
  /* Mobile-specific rules are handled by the main rules outside this media query */
}

/* Image Block Size Variations - All 1:1 aspect ratio */
.bk-media-image-block--tiny {
  aspect-ratio: 1;
  max-width: 80px;
}

.bk-media-image-block--xs {
  aspect-ratio: 1;
  max-width: 120px;
}

.bk-media-image-block--sm {
  aspect-ratio: 1;
  max-width: 160px;
}

.bk-media-image-block--small {
  aspect-ratio: 1;
  max-width: 200px;
}

.bk-media-image-block--medium {
  aspect-ratio: 1;
  max-width: 300px;
}

.bk-media-image-block--large {
  aspect-ratio: 1;
  max-width: 400px;
}

.bk-media-image-block--xlarge {
  aspect-ratio: 1;
  max-width: 500px;
}

.bk-media-image-block--full {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
}

/* Mobile image block constraints - all sizes respect container width */
@media screen and (max-width: 699px) {
  /* All image blocks on mobile should respect container width and maintain 1:1 aspect ratio */
  .bk-media-image-block--tiny,
  .bk-media-image-block--xs,
  .bk-media-image-block--sm,
  .bk-media-image-block--small,
  .bk-media-image-block--medium,
  .bk-media-image-block--large,
  .bk-media-image-block--xlarge,
  .bk-media-image-block--full {
    width: 100%;
    max-width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
    aspect-ratio: 1;
  }
}

@media screen and (min-width: 700px) {
  .bk-media-image-block--tiny {
    max-width: 100px;
  }
  
  .bk-media-image-block--xs {
    max-width: 150px;
  }
  
  .bk-media-image-block--sm {
    max-width: 200px;
  }
  
  .bk-media-image-block--small {
    max-width: 250px;
  }
  
  .bk-media-image-block--medium {
    max-width: 350px;
  }
  
  .bk-media-image-block--large {
    max-width: 450px;
  }
  
  .bk-media-image-block--xlarge {
    max-width: 550px;
  }
  
  .bk-media-image-block--full {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 1000px) {
  .bk-media-image-block--tiny {
    max-width: 120px;
  }
  
  .bk-media-image-block--xs {
    max-width: 180px;
  }
  
  .bk-media-image-block--sm {
    max-width: 230px;
  }
  
  .bk-media-image-block--small {
    max-width: 280px;
  }
  
  .bk-media-image-block--medium {
    max-width: 380px;
  }
  
  .bk-media-image-block--large {
    max-width: 480px;
  }
  
  .bk-media-image-block--xlarge {
    max-width: 580px;
  }
  
  .bk-media-image-block--full {
    width: 100%;
    max-width: 100%;
  }
}

/* Video Block Size Variations - 1:1 aspect ratio */
.bk-media-video-block--tiny {
  aspect-ratio: 1/1;
  max-width: 80px;
  width: 80px;
}

.bk-media-video-block--xs {
  aspect-ratio: 1/1;
  max-width: 120px;
  width: 120px;
}

.bk-media-video-block--sm {
  aspect-ratio: 1/1;
  max-width: 160px;
  width: 160px;
}

.bk-media-video-block--small {
  aspect-ratio: 1/1;
  max-width: 200px;
  width: 200px;
}

.bk-media-video-block--medium {
  aspect-ratio: 1/1;
  max-width: 300px;
  width: 300px;
}

.bk-media-video-block--large {
  aspect-ratio: 1/1;
  max-width: 400px;
  width: 400px;
}

.bk-media-video-block--xlarge {
  aspect-ratio: 1/1;
  max-width: 500px;
  width: 500px;
}

.bk-media-video-block--full {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1/1;
}

/* Mobile video block constraints - all sizes respect container width */
@media screen and (max-width: 699px) {
  /* All video blocks on mobile should respect container width and maintain 1:1 aspect ratio */
  .bk-media-video-block--tiny,
  .bk-media-video-block--xs,
  .bk-media-video-block--sm,
  .bk-media-video-block--small,
  .bk-media-video-block--medium,
  .bk-media-video-block--large,
  .bk-media-video-block--xlarge,
  .bk-media-video-block--full {
    width: 100%;
    max-width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
    aspect-ratio: 1/1;
  }
  
  /* Ensure video element respects full width constraints */
  .bk-media-video-block--tiny video-media,
  .bk-media-video-block--xs video-media,
  .bk-media-video-block--sm video-media,
  .bk-media-video-block--small video-media,
  .bk-media-video-block--medium video-media,
  .bk-media-video-block--large video-media,
  .bk-media-video-block--xlarge video-media,
  .bk-media-video-block--full video-media,
  .bk-media-video-block--tiny video-media video,
  .bk-media-video-block--xs video-media video,
  .bk-media-video-block--sm video-media video,
  .bk-media-video-block--small video-media video,
  .bk-media-video-block--medium video-media video,
  .bk-media-video-block--large video-media video,
  .bk-media-video-block--xlarge video-media video,
  .bk-media-video-block--full video-media video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media screen and (min-width: 700px) {
  .bk-media-video-block--tiny {
    max-width: 100px;
    width: 100px;
  }
  
  .bk-media-video-block--xs {
    max-width: 150px;
    width: 150px;
  }
  
  .bk-media-video-block--sm {
    max-width: 200px;
    width: 200px;
  }
  
  .bk-media-video-block--small {
    max-width: 250px;
    width: 250px;
  }
  
  .bk-media-video-block--medium {
    max-width: 350px;
    width: 350px;
  }
  
  .bk-media-video-block--large {
    max-width: 450px;
    width: 450px;
  }
  
  .bk-media-video-block--xlarge {
    max-width: 550px;
    width: 550px;
  }
  
  .bk-media-video-block--full {
    width: 100%;
    max-width: 100%;
  }
  
  /* Video blocks use 1:1 aspect ratio on desktop */
  .bk-media-video-block--tiny,
  .bk-media-video-block--xs,
  .bk-media-video-block--sm,
  .bk-media-video-block--small,
  .bk-media-video-block--medium,
  .bk-media-video-block--large,
  .bk-media-video-block--xlarge,
  .bk-media-video-block--full {
    aspect-ratio: 1/1;
  }
}

@media screen and (min-width: 1000px) {
  .bk-media-video-block--tiny {
    max-width: 120px;
    width: 120px;
  }
  
  .bk-media-video-block--xs {
    max-width: 180px;
    width: 180px;
  }
  
  .bk-media-video-block--sm {
    max-width: 230px;
    width: 230px;
  }
  
  .bk-media-video-block--small {
    max-width: 280px;
    width: 280px;
  }
  
  .bk-media-video-block--medium {
    max-width: 380px;
    width: 380px;
  }
  
  .bk-media-video-block--large {
    max-width: 480px;
    width: 480px;
  }
  
  .bk-media-video-block--xlarge {
    max-width: 580px;
    width: 580px;
  }
  
  .bk-media-video-block--full {
    width: 100%;
    max-width: 100%;
  }
}

/* ========================================
   INGREDIENTS CAROUSEL SECTION STACK GAP REMOVAL
   ======================================== */

/* Remove gap from section-stack in ingredients carousel */
.shopify-section--ingredients-carousel .section-stack {
  gap: 0 !important;
}

/* ========================================
   NEWSLETTER IMAGE BORDER RADIUS
   ======================================== */

/* Main newsletter section image */
.newsletter img {
  border-radius: var(--rounded-lg) !important;
}

/* Newsletter popup image */
.newsletter-drawer img {
  border-radius: var(--rounded-lg) !important;
}

/* Footer newsletter block image */
.footer__block--newsletter img {
  border-radius: var(--rounded-lg) !important;
}

/* Pill-style announcements container */
.bk-pill-announcements {
  margin-left: max(var(--container-gutter), 50% - var(--container-max-width) / 2) !important;
  margin-right: max(var(--container-gutter), 50% - var(--container-max-width) / 2) !important;
  width: calc(100% - 2 * max(var(--container-gutter), 50% - var(--container-max-width) / 2)) !important;
  padding: var(--spacing-4) var(--spacing-6);
  overflow: hidden;
  position: relative;
}

/* Individual announcement pill */
.bk-announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--pill-background-color, #161618);
  border: 1px solid rgb(var(--border-color) / 0.3);
  border-radius: 9999px;
  padding: var(--spacing-2) var(--spacing-4);
  margin-right: var(--spacing-6);
  white-space: nowrap;
  min-width: max-content;
  cursor: var(--pill-clickable, default);
  transition: var(--pill-transition, none);
}

.bk-announcement-pill:hover {
  cursor: var(--pill-clickable, default);
}

.bk-announcement-pill:hover * {
  cursor: var(--pill-clickable, default);
}

.bk-announcement-pill:hover {
  transform: var(--pill-hover-transform, none);
  border-color: var(--pill-hover-border, rgb(var(--border-color) / 0.3));
  box-shadow: var(--pill-hover-shadow, none);
}

/* Pill image styling */
.bk-announcement-pill__image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgb(var(--border-color) / 0.2);
}

/* Pill text styling */
.bk-announcement-pill__text {
  font-size: var(--text-sm);
  font-weight: normal;
  color: var(--pill-text-color, #FAFAFA);
  text-decoration: none;
  line-height: 1.2;
  cursor: var(--pill-clickable, default);
}

.bk-announcement-pill__text:hover {
  color: var(--pill-text-color, #FAFAFA);
  cursor: var(--pill-clickable, default);
}

/* Scrolling container */
.bk-pill-announcements__scroller {
  display: flex;
  align-items: center;
  animation: bkPillScroll var(--pill-scroll-duration, 30s) linear infinite;
  width: max-content;
  will-change: transform;
}

/* Scroll animation - adjusted for seamless infinite scrolling */
@keyframes bkPillScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 3));
  }
}

/* Pause animation on hover */
.bk-pill-announcements:hover .bk-pill-announcements__scroller {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
  .bk-pill-announcements {
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .bk-announcement-pill {
    padding: var(--spacing-2) var(--spacing-4);
    margin-right: var(--spacing-4);
  }
  
  .bk-announcement-pill__image {
    width: 28px;
    height: 28px;
  }
}

@media screen and (max-width: 699px) {
  .bk-pill-announcements {
    padding: var(--spacing-4) var(--spacing-3);
  }
  
  .bk-announcement-pill {
    padding: var(--spacing-2) var(--spacing-4);
    margin-right: var(--spacing-3);
    gap: var(--spacing-2);
  }
  
  .bk-announcement-pill__image {
    width: 24px;
    height: 24px;
  }
  
  .bk-announcement-pill__text {
    font-size: var(--text-xs);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bk-pill-announcements__scroller {
    animation: none;
  }
  
  .bk-pill-announcements {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Custom scrollbar for reduced motion */
.bk-pill-announcements::-webkit-scrollbar {
  height: 4px;
}

.bk-pill-announcements::-webkit-scrollbar-track {
  background: rgb(var(--border-color) / 0.1);
  border-radius: 2px;
}

.bk-pill-announcements::-webkit-scrollbar-thumb {
  background: rgb(var(--accent) / 0.3);
  border-radius: 2px;
}

.bk-pill-announcements::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--accent) / 0.5);
}

/* ========================================
   FOOTER HEADING STYLING
   ======================================== */

/* Footer headings and menu titles color */
.footer .footer__block--text .bold,
.footer .footer__block--menu .bold,
.footer .footer__block--newsletter h3,
.footer .footer__block--newsletter h4,
.footer .footer__block--newsletter h5,
.footer .footer__block--newsletter h6 {
  color: #E7246A !important;
}

/* ========================================
   FLOATING FOOTER STYLING
   ======================================== */

/* Floating footer container */
.bk-media-footer-floating {
  margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2) !important;
  margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2) !important;
  margin-block-end: var(--spacing-4) !important;
  border-radius: var(--rounded) !important;
  background: rgb(var(--footer-background)) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}

/* Footer wrapper styling for floating footer */
.bk-media-footer-floating .footer__wrapper {
  /* padding: var(--spacing-6) var(--spacing-6) !important; */
  border-radius: var(--rounded) !important;
  padding-block-start: var(--spacing-6);
  padding-block-end: var(--spacing-6);
}

/* Responsive adjustments for floating footer */
@media screen and (min-width: 700px) {
  .bk-media-footer-floating .footer__wrapper {
    /* padding: var(--spacing-8) var(--spacing-8) !important; */
  }
}

@media screen and (min-width: 1000px) {
  .bk-media-footer-floating .footer__wrapper {
    /* padding: var(--spacing-10) var(--spacing-10) !important; */
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
  }
}

/* ========================================
   COMMUNITY VIDEOS STYLING
   ======================================== */

/* Community Videos Styling - Wider videos with reduced gaps */
.community-videos-grid {
  gap: var(--spacing-4) !important;
  margin-inline: 0 !important;
  max-width: none !important;
  padding-inline: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

/* Footer Image Link Blocks Styling */
.footer__image-link-blocks {
  margin-block-end: var(--spacing-4);
  border-bottom: 1px solid rgb(var(--border-color) / 0.2);
}

.footer__image-link-blocks-header {
  margin-block-end: var(--spacing-6);
  text-align: center;
}

.footer__image-link-blocks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  align-items: start;
  justify-items: center;
}

.footer__image-link-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  position: relative;
}

.footer__image-link-block-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.footer__image-link-block-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFF7EF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

@media screen and (max-width: 699px) {
  .footer__image-link-blocks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
  }
}

/* Multi-column Mobile Horizontal Scroll */
@media screen and (max-width: 699px) {
  .multi-column {
    display: flex !important;
    flex-direction: row !important;
    grid: unset !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    padding-inline: var(--container-gutter) !important;
    padding-block: 20px !important;
    margin-inline: calc(-1 * var(--container-gutter)) !important;
    scroll-padding-inline: var(--container-gutter) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  
  .multi-column::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  
  .multi-column__item {
    flex: 0 0 auto !important;
    width: 280px !important;
    max-width: 280px !important;
    scroll-snap-align: start !important;
    grid: unset !important;
    grid-column: unset !important;
    margin-inline: 10px !important;
  }
}

.community-video-item {
  gap: var(--spacing-4) !important;
}

.community-video-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
}

/* Remove section padding for community videos */
.shopify-section--community-videos .section {
  padding-block-start: 0 !important;
  padding-block-end: var(--calculated-section-spacing-block-end) !important;
}

/* Mobile: Horizontal scrollable layout */
@media screen and (max-width: 699px) {
  .community-videos-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: unset !important;
    gap: var(--spacing-4) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    padding-inline: var(--container-gutter) !important;
    margin-inline: calc(-1 * var(--container-gutter)) !important;
    scroll-padding-inline: var(--container-gutter) !important;
  }
  
  .community-videos-grid::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  
  .community-video-item {
    flex: 0 0 auto !important;
    width: 60vw !important;
    max-width: 60vw !important;
    scroll-snap-align: start !important;
  }
  
  .community-video-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    aspect-ratio: 4/5 !important;
    border-radius: var(--rounded) !important;
  }
}

/* Tablet: 3 columns with spacing-4 gap */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .community-videos-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-4) !important;
  }
}



/* Before After Media - Content and Image Layout */
.before-after-media {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
 
}

.before-after-media__content {
  max-width: 600px !important;
  flex-shrink: 0 !important;
}

.before-after-media__media {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 999px) {
  .before-after-media {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .before-after-media__content {
    max-width: 100% !important;
    text-align: center !important;
    order: 1 !important;
  }
  
  .before-after-media__button {
    align-self: center !important;
  }
  
  .before-after-media__media {
    justify-content: center !important;
    order: 2 !important;
  }
}

/* ========================================
   FOOTER WRAPPER GAP REMOVAL
   ======================================== */

/* Remove gap from footer wrapper */
.footer__wrapper {
  /* gap: var(--footer-part-gap); */
  display: grid;
}

/* ========================================
   FOOTER MOBILE OVERRIDES
   ======================================== */

/* Hide entire footer aside section on mobile */
@media screen and (max-width: 699px) {
  .footer__aside {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .footer__aside-top, .footer__aside-bottom {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .footer {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }
}

/* ========================================
   PRODUCT GALLERY MAIN IMAGE MOBILE MARGIN FIX
   ======================================== */


/* Custom Mobile Navigation CSS */
/* This file contains all the styling for the custom mobile burger menu with thumbnails */

/* ========================================
   MOBILE NAVIGATION CLOSE BUTTON STYLING
   ======================================== */



/* Only show navigation drawer close button when it's open */
.navigation-drawer[open] > button[is="close-button"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: var(--spacing-4) !important;
  right: var(--spacing-4) !important;
  z-index: 20 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  background: #E7246A !important;
  color: white !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}



.navigation-drawer[open] > button[is="close-button"] svg {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  color: white !important;
  flex-shrink: 0 !important;
}



/* Mobile responsive adjustments for close button */
@media screen and (max-width: 699px) {
  .navigation-drawer[open] > button[is="close-button"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
  
  .navigation-drawer[open] > button[is="close-button"] svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}

/* Ensure close button maintains aspect ratio during screen size changes */
@media screen and (min-width: 700px) and (max-width: 1150px) {
  .navigation-drawer[open] > button[is="close-button"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
  
  .navigation-drawer[open] > button[is="close-button"] svg {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
  }
}

/* ========================================
   MOBILE MENU IMAGE STYLING
   ======================================== */

/* Hide mobile menu image by default */
.navigation-drawer .mobile-menu-image-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Only show navigation drawer menu image when it's open */
.navigation-drawer[open] .mobile-menu-image-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: var(--spacing-4) !important;
  left: var(--spacing-4) !important;
  z-index: 20 !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-menu-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: var(--rounded) !important;
}

/* Mobile responsive adjustments for menu image */
@media screen and (max-width: 699px) {
  .navigation-drawer[open] .mobile-menu-image-container {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  
  .navigation-drawer[open] .panel__scroller {
    padding-top: calc(var(--spacing-4) + 44px) !important;
  }
}

/* Navigation Menu Styling - Applied whenever dropdown is used (up to 1150px) */
@media screen and (max-width: 1150px) {
  /* Ensure panel maintains original size */
  .panel-list__wrapper,
  .panel,
  .panel__wrapper,
  .panel__scroller {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Ensure navigation drawer maintains proper dimensions */
  .navigation-drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
  }
  /* Remove horizontal scroll completely */
  body.drawer-is-open {
    overflow: hidden !important;
  }

  /* Override default gap for mobile menu */
  .panel__scroller .v-stack.gap-4 {
    gap: 0 !important;
  }

  /* Add extra space above the first menu item */
  .panel__scroller .v-stack.gap-4:first-child {
    padding-top: var(--spacing-4) !important;
  }

  .navigation-drawer {
    width: 100% !important;
    overflow-x: hidden !important;
    position: fixed !important;
  }

  .panel-list__wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  .panel__wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .panel {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .panel__scroller {
    width: 100% !important;
    padding-bottom: var(--spacing-6) !important;
    overflow-x: hidden !important;
  }

  .panel__scroller ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .panel__scroller li,
  .panel__scroller .mobile-nav__item {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 var(--spacing-2) !important;
    padding: 0;
    border-radius: var(--rounded);
    background-color: var(--custom-mobile-menu-bg-color, #FFFEFC);
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
  }

  /* Remove the old background image styling */
  .mobile-nav__item {
    background-image: none !important;
    background-size: unset !important;
    background-position: unset !important;
    background-repeat: unset !important;
  }

  /* Remove the overlay since we're not using background images */
  .mobile-nav__item::before {
    display: none;
  }

  /* Menu item thumbnail styling */
  .mobile-nav__thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.5rem;
    height: 100%;
    border-radius: var(--rounded) 0 0 var(--rounded);
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
  }

  /* Ensure minimum width for the menu item */
  .panel__scroller li,
  .panel__scroller .mobile-nav__item {
    min-height: 3.5rem;
  }

  /* Menu item content wrapper */
  .mobile-nav__content {
    position: relative;
    min-height: 3.5rem;
  }

  .mobile-nav__content > a,
  .mobile-nav__content > button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.5rem;
    padding: 1rem;
    padding-left: calc(3.5rem + 1rem); /* thumbnail width + padding */
    color: rgb(var(--text-color));
    text-decoration: none;
    z-index: 2;
    background-color: transparent;
    transition: background-color 0.2s ease;
    font-size: var(--text-h5) !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }

  /* Ensure text content inside mobile nav uses h5 size */
  .mobile-nav__content span,
  .mobile-nav__content .reversed-link {
    font-size: var(--text-h5) !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }

  /* Ensure all submenu items use h5 font size */
  .mobile-nav__submenu-item button,
  .mobile-nav__submenu-item a,
  .mobile-nav__submenu-item span,
  .mobile-nav__submenu-item .reversed-link {
    font-size: var(--text-h5) !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }

  /* Ensure back buttons in submenus also use h5 size */
  .mobile-nav__submenu-item .text-with-icon.h6 {
    font-size: var(--text-h5) !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }

  .mobile-nav__item a:hover,
  .mobile-nav__item button:hover {
    text-decoration: none;
    background-color: rgba(var(--text-color), 0.04);
  }

  /* Container for the mobile nav */
  .mobile-nav__inner {
    border-radius: var(--rounded);
    overflow: hidden;
    width: 100%;
  }

  /* Ensure proper dropdown behavior at all widths */
  .navigation-drawer {
    --drawer-content-max-width: 100%;
    --drawer-content-max-height: 100vh;
  }

  .navigation-drawer[open-from="left"] {
    --drawer-content-max-width: min(400px, 100vw);
    --drawer-content-max-height: 100vh;
  }

  .navigation-drawer[open-from="bottom"] {
    --drawer-content-max-width: 100vw;
    --drawer-content-max-height: 100vh;
  }

  /* Ensure proper panel transitions */
  .panel-list__wrapper {
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  /* Ensure proper panel sizing */
  .panel__wrapper {
    min-height: var(--drawer-content-max-height);
    display: flex;
    flex-direction: column;
  }

  /* Ensure proper panel content scrolling */
  .panel__scroller {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .panel__scroller > * {
    flex-shrink: 0;
  }
}

/* Mobile Menu Messages */
.bk-media-mobile-menu-messages {
  padding-bottom: var(--spacing-4);
  gap: 0;
  display: flex;
  flex-direction: column;
  background: rgb(var(--background));
  border-top: 1px solid rgb(var(--border-color) / 0.2);
}

/* Add bottom padding to mobile menu panel */
@media screen and (max-width: 1150px) {
  .navigation-drawer .panel__wrapper {
    padding-bottom: var(--spacing-4);
  }
}

.bk-media-liked-from {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding: var(--spacing-2);
  background: #DCE664;
  border: 1px solid #DCE664;
  border-radius: var(--rounded-full);
  font-size: 14px;
  line-height: 14px;
  overflow: hidden;
  max-width: 100%;
  text-align: center;
}

.bk-media-liked-from span {
  max-width: 76ch;
  font-weight: bold;
}

.bk-media-mobile-menu-message {
  border-radius: var(--rounded);
  background-color: #fafafa;
  padding: var(--spacing-4);
  box-sizing: border-box;
}

.bk-media-mobile-menu-message p:first-child {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}

.bk-media-mobile-menu-message p:last-child {
  font-size: 14px;
  margin: 0;
}

.bk-media-mobile-menu-message a {
  text-decoration: underline;
}

/* ========================================
   FOOTER PADDING OVERRIDE
   ======================================== */

/* Apply spacing 4 to footer top and bottom padding */
.footer {
  --footer-padding-block: var(--spacing-4) !important;
  padding-block-start: var(--spacing-4) !important;
  padding-block-end: var(--spacing-4) !important;
}

/* Ensure footer wrapper maintains proper spacing */
.footer__wrapper {
  padding-block: var(--spacing-4) !important;
}

/* ========================================
   PANEL FOOTER PADDING
   ======================================== */

/* Add extra padding below panel footer */
.panel-footer {
  padding-bottom: var(--spacing-6) !important;
}

/* ========================================
   PRODUCT INFO PRICE SPACING FIX
   ======================================== */

/* Add consistent bottom margin to price section to prevent page shifting */
.product-info__price {
  margin-block-end: var(--spacing-4);
}

/* Ensure price list has consistent height */
.product-info__price .price-list {
  min-height: 2rem;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .product-info__price {
    margin-block-end: var(--spacing-3);
  }
  
  .product-info__price .price-list {
    min-height: 1.75rem;
  }
}

/* Buy button container */
.buy-button-container {
  background: #f4f4f4;
  border-radius: 0 0 var(--rounded-lg) var(--rounded-lg);
}

.buy-button-container .button {
  width: 100%;
  margin: 0;
  border-radius: var(--rounded) !important;
}

/* Custom XXL button size */
.button--xxl {
  font-size: var(--text-base);
  padding-block-start: var(--spacing-6);
  padding-block-end: var(--spacing-6);
  padding-inline-start: var(--spacing-8);
  padding-inline-end: var(--spacing-8);
}

.button--xxl .buy-button-price,
.button--xxl .buy-button-compare-price,
.button--xxl .buy-button-text {
  font-size: var(--text-base);
}

@media screen and (min-width: 700px) {
  .button--xxl {
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
    padding-inline-start: var(--spacing-10);
    padding-inline-end: var(--spacing-10);
  }
}

/* Buy button with price */
.buy-button-with-price {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-4);
}

.buy-button-price-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

.button--xxl .buy-button-with-price {
  font-size: var(--text-sm) !important;
}

.button--xxl .buy-button-price {
  font-weight: 600;
  font-size: inherit !important;
  white-space: nowrap;
}

.button--xxl .buy-button-compare-price {
  font-size: inherit !important;
  text-decoration: line-through;
  opacity: 0.7;
  white-space: nowrap;
}

.button--xxl .buy-button-text {
  font-weight: 500;
  font-size: inherit !important;
  text-align: center;
}

.buy-button-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-left: var(--spacing-2);
}

.buy-button-badges .badge {
  font-size: var(--text-xs);
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
}

/* ========================================
   BUY BOX TOP FEATURE BANNER
   ======================================== */

.buy-box-top-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--rounded) var(--rounded) 0 0;
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
}

.buy-box-top-feature__centered-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  flex: 0 1 auto;
}

.buy-box-top-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.buy-box-top-feature__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.buy-box-top-feature__text {
  text-align: center;
  color: #783049;
}

.buy-box-top-feature__right-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: var(--spacing-2);
}

.buy-box-top-feature__right-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .buy-box-top-feature {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-xs);
  }
  
  .buy-box-top-feature__icon {
    width: 20px;
    height: 20px;
  }
  
  .buy-box-top-feature__right-icon {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
   PRODUCT PAGE COLLAPSIBLE TEXT STYLING
   ======================================== */

/* Remove separators from product page accordions */
.product-info__accordion {
  border-block-start-width: 0 !important;
  border-block-end-width: 0 !important;
}

.product-info__accordion + .product-info__accordion {
  border-block-start-width: 0 !important;
}

/* Add background styling to product page accordions */
.product-info__accordion {
  background: #FEF6F8 !important;
  padding: var(--spacing-4) !important;
  border-radius: var(--rounded) !important;
  margin-block: var(--spacing-2) !important;
}

/* Remove padding from accordion toggle */
.product-info__accordion .accordion__toggle {
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

/* Ensure accordion content has proper spacing */
.product-info__accordion .accordion__content {
  margin-block-end: 0 !important;
  padding-inline-end: 0 !important;
}

/* ========================================
   NUTRITION TABLE STYLING
   ======================================== */

/* Style nutrition tables within accordion content */
.product-info__accordion .accordion__content .prose {
  font-size: var(--text-xs) !important;
  line-height: 1.5 !important;
}

/* Target nutrition tables specifically */
.product-info__accordion .accordion__content .prose table {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin-block: var(--spacing-3) !important;
}

.product-info__accordion .accordion__content .prose table th,
.product-info__accordion .accordion__content .prose table td {
  padding: var(--spacing-2) var(--spacing-3) !important;
  text-align: left !important;
  border-bottom: 1px solid rgb(var(--border-color) / 0.2) !important;
  vertical-align: top !important;
}

.product-info__accordion .accordion__content .prose table th {
  font-weight: 600 !important;
  background-color: rgb(var(--border-color) / 0.05) !important;
  font-size: var(--text-xs) !important;
}

.product-info__accordion .accordion__content .prose table td {
  font-size: var(--text-xs) !important;
}

/* Style nutrition table headers */
.product-info__accordion .accordion__content .prose h1,
.product-info__accordion .accordion__content .prose h2,
.product-info__accordion .accordion__content .prose h3,
.product-info__accordion .accordion__content .prose h4,
.product-info__accordion .accordion__content .prose h5,
.product-info__accordion .accordion__content .prose h6 {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  margin-block: var(--spacing-3) var(--spacing-2) !important;
  color: #783049 !important;
}

/* Style paragraphs in nutrition content */
.product-info__accordion .accordion__content .prose p {
  font-size: var(--text-xs) !important;
  line-height: 1.5 !important;
  margin-block: var(--spacing-2) !important;
}

/* Style lists in nutrition content */
.product-info__accordion .accordion__content .prose ul,
.product-info__accordion .accordion__content .prose ol {
  font-size: var(--text-xs) !important;
  line-height: 1.5 !important;
  margin-block: var(--spacing-2) !important;
  padding-inline-start: var(--spacing-4) !important;
}

.product-info__accordion .accordion__content .prose li {
  margin-block: var(--spacing-1) !important;
}

/* Mobile responsive adjustments for nutrition tables */
@media screen and (max-width: 699px) {
  .product-info__accordion .accordion__content .prose table th,
  .product-info__accordion .accordion__content .prose table td {
    padding: var(--spacing-1) var(--spacing-2) !important;
  }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .product-info__accordion {
    padding: var(--spacing-4) !important;
  }
}

/* ========================================
   VARIANT PICKER BORDER OVERRIDE
   ======================================== */

/* Force remove borders from variant picker options without images */
.variant-picker__option-values .block-swatch,
.variant-picker__option-values input:checked + .block-swatch,
.variant-picker__option-values .block-swatch.is-selected {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Hide the :before pseudo-element that creates the border effect */
.variant-picker__option-values .block-swatch:before,
.variant-picker__option-values input:checked + .block-swatch:before,
.variant-picker__option-values .block-swatch.is-selected:before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========================================
   VARIANT PICKER DISCOUNT BADGES
   ======================================== */

.bk-media-discount-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  z-index: 10;
  min-width: 24px;
  text-align: center;
  line-height: 1.2;
}

/* Badge colors for unselected variants - use selected variant colors */
.variant-picker__option-values .bk-media-discount-badge {
  background-color: #E7246A;
  color: #FFFEFC;
}

/* Badge colors for selected variants - use unselected variant colors */
.variant-picker__option-values input:checked + .block-swatch .bk-media-discount-badge,
.variant-picker__option-values .block-swatch.is-selected .bk-media-discount-badge,
.variant-picker__option-values input:checked + .thumbnail-swatch .bk-media-discount-badge,
.variant-picker__option-values .thumbnail-swatch.is-selected .bk-media-discount-badge,
.variant-picker__option-values input:checked + .color-swatch .bk-media-discount-badge,
.variant-picker__option-values .color-swatch.is-selected .bk-media-discount-badge {
  background-color: #F6D4E5;
  color: #783049;
}

/* Ensure parent containers have relative positioning for absolute positioning to work */
.thumbnail-swatch,
.block-swatch,
.color-swatch {
  position: relative;
}

/* Specific positioning for thumbnail swatches */
.thumbnail-swatch__image {
  position: relative;
}

/* Ensure discount badges are visible on all variant types */
.variant-picker__option-values .bk-media-discount-badge {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .bk-media-discount-badge {
    font-size: 0.7rem;
    padding: 1px 4px;
    min-width: 20px;
    top: -4px;
    right: -4px;
  }
}

/* ========================================
   BENEFITS GRID STYLING
   ======================================== */

.bk-media-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px !important;
  margin-bottom: 9px !important;
}

.bk-media-benefit-item {
  padding: var(--spacing-2) var(--spacing-6);
  border-radius: 1rem !important;
  font-size: var(--text-sm) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  color: #291B16 !important;
}

.bk-media-benefit-item img {
  width: 24px !important;
  margin-right: var(--spacing-3);
}

.bk-media-benefit-item p {
  margin: 0px !important;
  color: #783049 !important;
}
/* Mobile responsive adjustments for benefits grid */
@media screen and (max-width: 699px) {
  .bk-media-benefit-item {
    flex-direction: column !important;
    text-align: center !important;
    padding: var(--spacing-3) var(--spacing-2) !important;
  }
  
  .bk-media-benefit-item img {
    margin-right: 0 !important;
    margin-bottom: var(--spacing-2) !important;
  }
  
  .bk-media-benefit-item p {
    font-size: var(--text-xs) !important;
  }
}

/* ========================================
   JUDGE.ME RATING STYLING
   ======================================== */

.product-card__judge-me-rating {
  margin-bottom: var(--spacing-1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-card__judge-me-rating .jdgm-widget {
  font-size: 0.875rem;
  line-height: 1.2;
}

.product-card__judge-me-rating .jdgm-preview-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Center alignment for product cards with center text alignment */
.product-card__info--center .product-card__judge-me-rating {
  justify-content: center;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 699px) {
  .product-card__judge-me-rating {
    margin-bottom: var(--spacing-0.5);
  }
  
  .product-card__judge-me-rating .jdgm-widget {
    font-size: 0.75rem;
  }
}

/* ========================================
   PRODUCT PILL JUDGE.ME RATING STYLING
   ======================================== */

.bk-media-product-pill__judge-me-rating {
  margin-bottom: var(--spacing-1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.bk-media-product-pill__judge-me-rating .jdgm-widget {
  font-size: 0.75rem;
  line-height: 1.2;
}

.bk-media-product-pill__judge-me-rating .jdgm-preview-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-0.5);
}

/* Left align Judge.me ratings for all product pill alignments */
.bk-media-product-pill--align-center .bk-media-product-pill__judge-me-rating,
.bk-media-product-pill--align-right .bk-media-product-pill__judge-me-rating {
  justify-content: flex-start;
}

/* Mobile responsive adjustments for product pills */
@media screen and (max-width: 699px) {
  .bk-media-product-pill__judge-me-rating {
    margin-bottom: var(--spacing-0.5);
  }
  
  .bk-media-product-pill__judge-me-rating .jdgm-widget {
    font-size: 0.625rem;
  }
}