/* FC Ecom Suite 6.0.269 — tablet-only Customer Review Images card.
   6.0.267 update: custom rail keeps the Ingredients rail height (4px), removes native arrows,
   uses a fixed Ingredients-like 80px thumb instead of a ratio-sized thumb, remains colourable,
   and keeps the Best-Sellers-style flash-then-hide behaviour. */
.fcc-customer-review-images,
.fcc-customer-review-images * {
  box-sizing: border-box;
}

@keyframes fccCriRailTrackHint {
  0% { opacity: 0; }
  18% { opacity: 1; }
  58% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fccCriRailThumbHint {
  0% { opacity: 0; transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1); }
  18% { opacity: 1; transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1.18); }
  58% { opacity: 1; transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1.18); }
  100% { opacity: 0; transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1); }
}

.fcc-customer-review-images {
  --fcc-cri-rail-h: 4px;
  --fcc-cri-rail-space: 14px;
  --fcc-cri-rail-thumb-w: 80px;
  --fcc-cri-rail-thumb-current-w: 80px;
  --fcc-cri-rail-thumb-x: 0px;
  --fcc-cri-rail-track-color: var(--fcc-cri-track, transparent);
  --fcc-cri-rail-thumb-color: var(--fcc-cri-thumb, rgba(0, 89, 79, 0.28));
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  flex: 0 0 auto;
  /* Keep this normal (no !important) so Bricks Style > Spacing > Margin can override it. */
  margin-top: var(--fcc-cri-card-margin-top, 14px);
  padding-top: 0;
  background: transparent !important;
  color: var(--fcc-cri-title, #00594F);
  overflow: visible;
  contain: layout;
}

@media (min-width: 768px) and (max-width: 1179px) {
  .fcc-customer-review-images {
    display: block;
  }

  /* 7.0.349: Product Hero geometry decides whether Customer Photos can fit
     completely above the natural bottom of the right Product Card. The
     transient measure state is invisible and exists only inside one layout
     calculation; hide removes the whole block from flow. */
  .fcc-customer-review-images[data-fcc-tablet-fit="hide"],
  .fcc-customer-review-images-element[data-fcc-tablet-fit="hide"] {
    display: none !important;
  }

  .fcc-customer-review-images[data-fcc-tablet-fit="measure"],
  .fcc-customer-review-images-element[data-fcc-tablet-fit="measure"] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  /* Hide the Bricks wrapper as well as its inner Customer Photos section so a
     saved wrapper margin cannot leave a blank mobile gap. */
  .fcc-customer-review-images-element {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1180px) {
  /* Customer photos are tablet-only; do not let the Bricks wrapper margin create a false desktop stop height. */
  .fcc-customer-review-images-element {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

.fcc-cri-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--fcc-cri-card-padding-y, 14px) var(--fcc-cri-card-padding-x, 16px) var(--fcc-cri-card-padding-bottom, 16px);
  background: var(--fcc-cri-card-bg, #ffffff);
  border: var(--fcc-cri-card-border-width, 0px) solid var(--fcc-cri-card-border, transparent);
  border-radius: var(--fcc-cri-card-radius, 7px);
  overflow: hidden;
}

.fcc-cri-title {
  margin: 0 0 var(--fcc-cri-title-gap, 10px);
  color: var(--fcc-cri-title, #00594F);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

.fcc-cri-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--fcc-cri-radius, 0px);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;
  scrollbar-gutter: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
  -ms-overflow-style: none !important;
}

.fcc-cri-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.fcc-cri-viewport::-webkit-scrollbar-track,
.fcc-cri-viewport::-webkit-scrollbar-thumb,
.fcc-cri-viewport::-webkit-scrollbar-corner,
.fcc-cri-viewport::-webkit-scrollbar-button,
.fcc-cri-viewport::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.fcc-cri-rail {
  display: none;
  position: relative;
  width: 100%;
  height: var(--fcc-cri-rail-h, 4px);
  min-height: var(--fcc-cri-rail-h, 4px);
  max-height: var(--fcc-cri-rail-h, 4px);
  margin: calc(var(--fcc-cri-rail-h, 4px) * -1) 0 0;
  border-radius: 999px;
  background: var(--fcc-cri-rail-track-color, transparent);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  transition: opacity 180ms ease;
}

.fcc-cri-rail__thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(var(--fcc-cri-rail-thumb-current-w, var(--fcc-cri-rail-thumb-w, 80px)), 100%);
  border-radius: 999px;
  background: var(--fcc-cri-rail-thumb-color, rgba(0, 89, 79, 0.28));
  transform: translateX(var(--fcc-cri-rail-thumb-x, 0px));
  transition: transform 120ms ease;
}

.fcc-customer-review-images[data-fcc-cri-scrollable="1"] .fcc-cri-rail {
  display: block;
}

.fcc-customer-review-images[data-fcc-cri-rail="show"] .fcc-cri-rail {
  opacity: 1;
  pointer-events: auto;
}

.fcc-customer-review-images[data-fcc-cri-rail="hint"] .fcc-cri-rail {
  display: block;
  animation: fccCriRailTrackHint 1800ms ease-in-out 3 both;
}

.fcc-customer-review-images[data-fcc-cri-rail="hint"] .fcc-cri-rail__thumb {
  animation: fccCriRailThumbHint 1800ms ease-in-out 3 both;
}

.fcc-customer-review-images[data-fcc-cri-scrollable="1"] .fcc-cri-viewport {
  cursor: grab;
}

.fcc-customer-review-images[data-fcc-cri-dragging="1"] .fcc-cri-viewport {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.fcc-customer-review-images[data-fcc-cri-dragging="1"] .fcc-cri-slide,
.fcc-customer-review-images[data-fcc-cri-dragging="1"] .fcc-cri-slide * {
  user-select: none;
  -webkit-user-select: none;
}

.fcc-cri-track {
  display: flex;
  align-items: flex-start;
  gap: var(--fcc-cri-gap, 4px);
  width: max-content;
  min-width: 100%;
  padding: 0 0 var(--fcc-cri-rail-space, 14px);
}

.fcc-cri-slide {
  flex: 0 0 min(var(--fcc-cri-image-width, 132px), 100%);
  width: min(var(--fcc-cri-image-width, 132px), 100%);
  height: var(--fcc-cri-image-height, 120px);
  max-width: 100%;
  aspect-ratio: var(--fcc-cri-aspect, 1.1 / 1);
  margin: 0;
  overflow: hidden;
  border-radius: var(--fcc-cri-radius, 0px);
  background: #fff;
  scroll-snap-align: start;
}

.fcc-cri-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.fcc-cri-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(0, 89, 79, .35);
  border-radius: var(--fcc-cri-radius, 0px);
  color: var(--fcc-cri-title, #00594F);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}


/* 7.0.351 — Customer Photos scrollbar opacity parity with compact gallery.
   Keep the custom rail at 30% when idle. The existing controller sets
   data-fcc-cri-rail="show" on hover/focus/drag/scroll, which raises it to 100%. */
@keyframes fccCriRailTrackHintIdle30 {
  0%, 100% { opacity: .30; }
  18%, 58% { opacity: 1; }
}

@keyframes fccCriRailThumbHintIdle30 {
  0%, 100% {
    opacity: 1;
    transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1);
  }
  18%, 58% {
    opacity: 1;
    transform: translateX(var(--fcc-cri-rail-thumb-x, 0px)) scaleY(1.18);
  }
}

.fcc-customer-review-images[data-fcc-cri-scrollable="1"] .fcc-cri-rail {
  opacity: .30;
}

.fcc-customer-review-images[data-fcc-cri-rail="show"] .fcc-cri-rail {
  opacity: 1;
}

.fcc-customer-review-images[data-fcc-cri-rail="hint"] .fcc-cri-rail {
  animation: fccCriRailTrackHintIdle30 1800ms ease-in-out 3 both;
}

.fcc-customer-review-images[data-fcc-cri-rail="hint"] .fcc-cri-rail__thumb {
  animation: fccCriRailThumbHintIdle30 1800ms ease-in-out 3 both;
}

/* 7.0.353 — Customer Photos smooth end-to-end horizontal scrolling.
   Native overflow owns the motion; snapping and transform easing are removed so
   the visible cards and custom thumb remain exactly synchronized. */
.fcc-cri-viewport {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
}

.fcc-cri-slide {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

.fcc-cri-rail__thumb {
  transition: none !important;
  will-change: transform;
}

.fcc-customer-review-images[data-fcc-cri-scrollable="1"] .fcc-cri-rail {
  pointer-events: auto;
  cursor: pointer;
}

.fcc-customer-review-images[data-fcc-cri-dragging="1"] .fcc-cri-viewport {
  scroll-snap-type: none !important;
  cursor: grabbing;
}

.fcc-customer-review-images[data-fcc-cri-wheel="1"] .fcc-cri-rail,
.fcc-customer-review-images[data-fcc-cri-dragging="1"] .fcc-cri-rail {
  opacity: 1;
}

/* 7.0.353 — direct Customer Photos rail hover is active state. */
.fcc-customer-review-images[data-fcc-cri-scrollable="1"] .fcc-cri-rail:hover {
  opacity: 1;
}