.mdd-chips {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Chips container */
.mdd-chips-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* One scrollable row on mobile; the soft right edge shows there is more to scroll */
.glider-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0 24px 2px 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* Desktop: wrap instead of scrolling */
@media (min-width: 768px) {
  .glider-chips {
    flex-wrap: wrap;
    padding-right: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.glider-chips::-webkit-scrollbar {
  display: none;
}
.mdd-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.mdd-chip__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px 0 11px;
  border: 1px solid #e5dfd6;
  border-radius: 999px;
  background: #fff;
  color: #3a3631;
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Chip icon styling */
.mdd-chip__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.mdd-chip__link:hover {
  border-color: #cfc7bb;
  background: #f6f3ee;
  text-decoration: none;
}

.mdd-chip__link:hover .mdd-chip__icon {
  opacity: 1;
}

.mdd-chip__link:focus-visible {
  outline: 2px solid #1f4a40;
  outline-offset: 2px;
}

.mdd-chip__link:active {
  background: #efe9e0;
}

/* Loading skeleton states */
.mdd-chip-skeleton {
  width: 80px;
  height: 32px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 999px;
  margin: 0 0.2rem;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mdd-chip__link {
    border: 2px solid;
    background: ButtonFace;
    color: ButtonText;
  }
  
  .mdd-chip__link:focus {
    outline: 3px solid Highlight;
  }
  
  .mdd-tag__link {
    border: 2px solid;
    background: ButtonFace;
    color: ButtonText;
  }
}

.mdd-tags { margin-top: 1.5rem; }
.mdd-tags__heading { font-weight: 600; margin-bottom: .5rem; font-size: 1.125rem; }
.mdd-tags__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding-left: 0; }
.mdd-tag { list-style: none; }
.mdd-tag__link { 
  display: inline-flex; 
  align-items: center; 
  white-space: nowrap; 
  padding: .4rem .75rem;
  border: 1px solid #e5dfd6;
  border-radius: 999px;
  background: #faf8f5;
  color: inherit; 
  text-decoration: none;
  transition: all 0.2s ease;
  transform-origin: center;
  gap: 0.35rem; /* Space between icon and text */
  font-size: 0.83rem;
}

/* Tag icon styling */
.mdd-tag__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.mdd-tag__link:hover {
  border-color: #cfc7bb;
  background: #f6f3ee;
  text-decoration: none;
}

.mdd-tag__link:hover .mdd-tag__icon {
  opacity: 1;
}

.mdd-tag__link:focus { 
  outline: none; /* Remove default blue outline */
  background: #f0f0f0; /* Neutral background */
  border-color: #999;
}

.mdd-tag__link:active {
  transform: scale(0.98);
  background: #e8e8e8; /* Slightly darker neutral on click */
  border-color: #777;
}

/* Server-rendered breadcrumbs styling */
.breadcrumbs.mdd-server-rendered {
  /* Ensure server-rendered breadcrumbs match existing styles */
  padding-top: .7rem;
}

/* Make breadcrumbs horizontally scrollable to stay on one row */
.breadcrumbs.mdd-server-rendered .items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.breadcrumbs.mdd-server-rendered .items::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.breadcrumbs.mdd-server-rendered .item {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Hide Home link in breadcrumbs (keep in JSON-LD for SEO) */
.breadcrumbs.mdd-server-rendered .item.home {
  display: none !important;
}

/* Mobile: category path only (the product name is the page title right below), left-aligned,
   with a soft right edge when the path is longer than the screen */
@media screen and (max-width: 767px) {
  .catalog-product-view .breadcrumbs ul.items {
    justify-content: flex-start !important;
    padding: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .breadcrumbs.mdd-server-rendered .item:last-child {
    display: none;
  }
  .breadcrumbs.mdd-server-rendered .item:nth-last-child(2)::after {
    display: none;
  }
  .breadcrumbs.mdd-server-rendered .item:nth-last-child(2) {
    padding-right: 24px;
  }
}