
/* Product gallery: vertical scroll on md+, horizontal swipe on small screens */
.product-gallery { width: 100%; }

/* Flex overflow fix: allow long unbroken strings to shrink instead of forcing horizontal scroll */
.product-details {
  min-width: 0;
}
.product-details > .w-100 {
  min-width: 0;
}

/* Prevent long names from overflowing (mobile-safe) */
.product-name {
  text-transform: uppercase;
  font-weight: 700;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 575.98px) {
  .product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* Product description toggle (Show more / Show less): black + bold */
#descToggleBtn {
  color: #000 !important;
  font-weight: 700;
  text-decoration: none !important;
}

#descToggleBtn:hover,
#descToggleBtn:focus {
  color: #000 !important;
  text-decoration: none !important;
}

.similar-slider .product-title {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Product CTAs (match "ADD TO BAG" bar style) */
.product-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-cta-btn {
  width: 100%;
  background: #000;
  border: 1px solid #000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
  padding: 0.65rem 1rem;
  border-radius: 0;
}

.product-cta-btn:hover,
.product-cta-btn:focus {
  background: #111;
  border-color: #111;
  color: #fff;
}

.product-cta-btn:disabled {
  opacity: 0.7;
}

/* Ensure wishlist icon stays left-aligned even if a parent applies text-align:center */
.wishlist-wrap {
  justify-content: flex-start;
  text-align: left;
}

.wishlist-wrap #wishlistBtn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* QUALITY chips (transparent with black border, like size pills) */
.product-quality {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-quality-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  color: #111;
}

.availability-label {
  font-weight: 700;
}

.product-quality-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product-quality-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

/* .view-images-btn has transparent border-color !important in other CSS; force black border here */
.product-quality .product-quality-chip.view-images-btn {
  border: 1px solid #000 !important;
  border-color: #000 !important;
}

.product-quality-chip:hover,
.product-quality-chip:focus {
  outline: none;
  background: rgba(0,0,0,0.04);
}

.product-quality-chip.is-active {
  background: rgba(0,0,0,0.08);
}

.product-quality-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #111;
}

.gallery-scroll {
  width: 100%;
  overflow: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

/* Simple accordion rows for product details (thin rows with + icon) */
.product-accordion .accordion-heading {
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #222;
}

.accordion-simple {
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* row */
.accordion-simple .acc-row {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* button acting as row header */
.accordion-simple .acc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.5rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  color: #111;
  gap: 1rem;
}

/* title on left */
.accordion-simple .acc-title {
  flex: 1 1 auto;
}

/* icon on right */
.accordion-simple .acc-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform .18s ease, background .18s ease, color .18s ease;
  background: transparent;
}

/* expanded state styling (icon becomes minus and slightly filled) */
.accordion-simple .acc-toggle[aria-expanded="true"] .acc-icon {
  background: rgba(0,0,0,0.06);
  transform: rotate(0deg);
}

/* body */
.accordion-simple .acc-body {
  padding: 0.75rem 0.5rem 1rem 0.5rem;
  color: #555;
  font-size: .95rem;
  line-height: 1.45;
}

/* subtle hover effect on row header */
.accordion-simple .acc-toggle:hover {
  background: rgba(0,0,0,0.01);
}

.main-image-wrapper {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.main-image-wrapper #mainProductImg {
  transform-origin: center center;
  transition: transform 160ms ease;
  will-change: transform;
}

/* Hover zoom (desktop only). JS sets transform-origin to mouse position. */
@media (hover: hover) and (pointer: fine) {
  .main-image-wrapper {
    cursor: zoom-in;
  }

  .main-image-wrapper.is-zooming #mainProductImg {
    transform: scale(1.8);
  }

  /* Fallback if JS fails: still zoom a bit on hover */
  .main-image-wrapper:hover #mainProductImg {
    transform: scale(1.35);
  }
}
.gallery-thumb {
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s;
}
.gallery-thumb.active, .gallery-thumb:hover {
  border-color: #bfa46d;
}

/* Hide horizontal scrollbar for similar products carousel */
.similar-slider .viewport {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.similar-slider .viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}
@media (max-width: 767.98px) {
  .main-image-wrapper img#mainProductImg {
    max-height: 180px;
  }
  .gallery-thumb {
    width: 48px;
    height: 40px;
  }
}

.similar-slider { position: relative; overflow: hidden; }
.similar-slider .viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  scroll-behavior: smooth;
  /* Allow page to scroll vertically even when swiping on the slider */
  touch-action: pan-x pan-y;
}
.similar-slider .viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}
.similar-slider .track { display: flex; will-change: transform; }
.similar-slider .product-card-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.similar-slider .product-card-item { flex: 0 0 25%; max-width: 25%; }
@media (max-width: 991.98px) {
  .similar-slider .product-card-item { flex: 0 0 50%; max-width: 50%; }
}