.mdd-chips { 
  width: 100%;
  max-width: 100vw; /* Never exceed viewport width */
  overflow: hidden; /* Container should not overflow */
  box-sizing: border-box;
  /* Position in grid layout using grid-area */
  grid-area: chips;
  margin-bottom: .5rem;
}

/* Update the grid template for the wrapper to include chips area */
.product-info-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
	"media chips"
    "media brand"
    "media title"
    "media main"
    "media ." !important;
  grid-template-rows: auto !important;
}
/* Removed mdd-chips__heading - no longer used */

/* Chips container */
.mdd-chips-container { 
  position: relative; 
  width: 100%;
  max-width: 100vw; /* Never exceed viewport width */
  overflow: hidden; /* Container should not overflow */
}

/* Removed fade effect - no longer needed with wrapping on desktop */
.glider-chips { 
  display: flex;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0 0 .25rem 0;
  /* Mobile: horizontal scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  flex-wrap: nowrap;
  overscroll-behavior-x: contain;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Desktop: Allow wrapping to 2 rows */
@media (min-width: 769px) {
  .glider-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    gap: 0.25rem 0; /* Vertical gap between rows */
  }
}
.glider-chips::-webkit-scrollbar { 
  display: none; /* Chrome/Safari */
}
.mdd-chip { 
  padding: 0 .2rem; /* Space between chips */
  flex: 0 0 auto;
  box-sizing: border-box;
  scroll-snap-align: start;
  min-width: max-content; /* Prevent shrinking */
}

/* Remove left padding from first chip */
.mdd-chip:first-child {
  padding-left: 0;
}
.mdd-chip__link { 
  display: inline-flex; 
  align-items: center; 
  white-space: nowrap; 
  padding: clamp(0.25rem, 1vw, 0.3rem) clamp(0.5rem, 2vw, 0.6rem);
  border: 1px solid #ddd; 
  border-radius: 999px; 
  background: #fff; 
  color: inherit; 
  text-decoration: none; 
  font-size: 0.83rem;
  min-width: max-content;
  width: max-content;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.2s ease;
  transform-origin: center;
  gap: 0.35rem; /* Space between icon and text */
}

/* Chip icon styling */
.mdd-chip__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.mdd-chip__link:hover {
  border-color: #bbb;
  background: #f8f9fa;
}

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

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

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

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

/* Mobile optimizations */
@media (max-width: 768px) {
  .mdd-chip__link { 
    padding: .2rem .4rem; 
    font-size: .95rem; 
  }
}

/* Mobile grid layout - stack everything vertically */
@media (max-width: 767px) {
  .catalog-product-view .product-info-wrapper {
    grid-template-areas:
      "media"
	  "chips"
      "brand"
      "title"
      "main" !important;
    grid-template-columns: 1fr !important;
  }
}

.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: .25rem .5rem; 
  border: 1px dashed #ddd; 
  border-radius: 999px; 
  background: #fafafa; 
  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: #bbb;
  background: #f0f0f0;
}

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

/* Override theme centering of breadcrumbs on product pages - keep left-aligned */
@media screen and (max-width: 767px) {
  .catalog-product-view .breadcrumbs ul.items {
    justify-content: flex-start !important;
    margin-left: 7px;
  }
}