/* Imported from: ../../sub-components/ProductCard/styles.css */
.cc_jtahuabn_aC0okcMcIL .product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f2f2f2;
}

.cc_jtahuabn_aC0okcMcIL .product-card-media-link {
  display: block;
  width: 100%;
  height: 100%;
  /* Tells the browser only vertical panning is its native gesture here —
     horizontal movement is ours (JS swipe), so it doesn't have to spend a
     frame or two disambiguating the gesture before committing to one,
     which otherwise reads as input lag on the first pixels of a swipe. */
  touch-action: pan-y;
}

.cc_jtahuabn_aC0okcMcIL .product-card-image-track {
  position: relative;
  width: 100%;
  height: 100%;
  /* Drag transform target (see index.tsx) — moves the whole stack below as
     one rigid body during a swipe, so the live drag-follow only ever costs
     a single transform write, never a re-render. */
  will-change: transform;
}

/* All of a card's images are mounted at once (see index.tsx), absolutely
   stacked on top of each other, and switch via opacity only — no <img src>
   swap, so navigating (arrows/dots/swipe) never re-fetches or re-decodes an
   image that's already loaded. GPU-accelerated opacity transition only,
   nothing that triggers layout. */
.cc_jtahuabn_aC0okcMcIL .product-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cc_jtahuabn_aC0okcMcIL .product-card-image.is-active {
  opacity: 1;
}

/* Hover crossfade to the second image: same stacking, one layer higher so
   it wins over whichever image is currently .is-active underneath. Desktop
   only — index.tsx doesn't even render this <img> on touch devices, and
   .is-visible is JS-driven from real isHovering state (not a bare CSS
   :hover), which is what previously made a mobile tap get stuck "hovered"
   and jump to the second image. */
.cc_jtahuabn_aC0okcMcIL .product-card-image-hover {
  z-index: 1;
}

.cc_jtahuabn_aC0okcMcIL .product-card-image-hover.is-visible {
  opacity: 1;
}

.cc_jtahuabn_aC0okcMcIL .product-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: #e5e5e5;
}

/* Out-of-stock: fade the imagery so the card visibly reads as unavailable
   at a glance, without hiding it from the grid entirely. Must target only
   the currently-shown layer (.is-active / hover .is-visible) — the other
   stacked images in the track sit at opacity: 0 by design (see comment
   above), and fading ".product-card-image" unconditionally would have
   pulled every one of them up to 0.4 at once, showing as a ghosted
   double-exposure of two photos instead of one faded photo. */
.cc_jtahuabn_aC0okcMcIL .product-card-media.is-out-of-stock .product-card-image.is-active, .cc_jtahuabn_aC0okcMcIL .product-card-media.is-out-of-stock .product-card-image-hover.is-visible, .cc_jtahuabn_aC0okcMcIL .product-card-media.is-out-of-stock .product-card-image-placeholder {
  opacity: 0.4;
}

.cc_jtahuabn_aC0okcMcIL .product-card-out-of-stock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Decorative only — never blocks the favorite/quick-add/nav controls or
     the underlying product link. */
  pointer-events: none;
}

.cc_jtahuabn_aC0okcMcIL .product-card-out-of-stock-label {
  background: #ffffff;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: var(--font-weight-emphasis, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-badges {
  position: absolute;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

/* Both badges stack in the same top-left corner (low stock above new)
   instead of opposite corners, so neither ever sits near the favorite/
   heart button in the top-right. */
.cc_jtahuabn_aC0okcMcIL .product-card-badges-left {
  left: 10px;
  align-items: flex-start;
}

.cc_jtahuabn_aC0okcMcIL .product-card-badge {
  color: #ffffff;
  font-size: 8px;
  font-weight: var(--font-weight-emphasis, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 6px;
  line-height: 1.2;
}

/* Outline, not solid — same size/padding as the (solid) low-stock badge,
   so the two read as one consistent badge system while staying visually
   distinguishable at a glance. border-color/color come from the
   newBadgeColor prop inline; these are just the black fallback. */
.cc_jtahuabn_aC0okcMcIL .product-card-badge-new {
  background: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  box-sizing: border-box;
}

.cc_jtahuabn_aC0okcMcIL .product-card-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #000000;
}

.cc_jtahuabn_aC0okcMcIL .product-card-favorite-active {
  color: #000000;
}

.cc_jtahuabn_aC0okcMcIL .product-card-quick-add {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #000000;
  transition: opacity 0.2s ease;
}

/* .is-open is set purely from JS (index.tsx) — real mouseenter/mouseleave
   on non-touch devices, one-way tap-to-open on touch devices (detected via
   'ontouchstart' in window || navigator.maxTouchPoints > 0). No CSS
   (hover: hover) media query involved, since hover feature detection can
   be unreliable across browsers/test environments. */
.cc_jtahuabn_aC0okcMcIL .product-card-quick-add.is-open {
  opacity: 0;
  pointer-events: none;
}

/* Size row: a flat, semi-transparent strip pinned to the bottom of the
   media box (not pushed below the image), so opening it never changes the
   card's height or disturbs the grid. Visibility is driven entirely by the
   JS-computed .is-open class (see index.tsx) — never CSS :hover. */
.cc_jtahuabn_aC0okcMcIL .product-card-sizes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.cc_jtahuabn_aC0okcMcIL .product-card-sizes.is-open {
  max-height: 46px;
  opacity: 1;
}

.cc_jtahuabn_aC0okcMcIL .product-card-size-btn {
  background: none;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0 9px;
  margin: 0;
  font-size: 11px;
  font-weight: var(--font-weight-base, 500);
  font-family: inherit;
  line-height: 1;
  color: #1a1a1a;
  cursor: pointer;
  /* Tap-to-add flash (index.tsx sets/clears .is-just-added + an inline
     accentColor background for ~400ms) fades in and back out through this
     same transition instead of needing a separate keyframe animation. */
  transition: background-color 0.25s ease, color 0.25s ease;
}

.cc_jtahuabn_aC0okcMcIL .product-card-size-btn:last-child {
  border-right: none;
}

.cc_jtahuabn_aC0okcMcIL .product-card-size-btn.is-out-of-stock {
  color: #b0b0b0;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Touch-only prev/next arrows (see index.tsx's isTouchDevice gate) —
   desktop keeps the existing hover crossfade instead of these. Semi-
   transparent circular chip so the image stays legible underneath. */
.cc_jtahuabn_aC0okcMcIL .product-card-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 999px;
  padding: 0;
  color: #000000;
  cursor: pointer;
}

.cc_jtahuabn_aC0okcMcIL .product-card-nav-arrow-prev {
  left: 8px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-nav-arrow-next {
  right: 8px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 5px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.cc_jtahuabn_aC0okcMcIL .product-card-dot-active {
  background: #ffffff;
}

.cc_jtahuabn_aC0okcMcIL .product-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.cc_jtahuabn_aC0okcMcIL .product-card-name {
  margin: 0;
  font-size: 13px;
  font-weight: var(--font-weight-emphasis, 600);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000000;
}

.cc_jtahuabn_aC0okcMcIL .product-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cc_jtahuabn_aC0okcMcIL .product-card-price-final {
  font-size: 14px;
  font-weight: var(--font-weight-emphasis, 600);
  color: #000000;
}

.cc_jtahuabn_aC0okcMcIL .product-card-price-original {
  font-size: 13px;
  font-weight: var(--font-weight-base, 500);
  color: #9c9c9c;
  text-decoration: line-through;
}

/* End import: ../../sub-components/ProductCard/styles.css */

.cc_jtahuabn_aC0okcMcIL .recommended-products {
  width: 100%;
  padding: 48px 24px;
  font-family: var(--font-family, system-ui, -apple-system, sans-serif);
}

.cc_jtahuabn_aC0okcMcIL .recommended-products-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.cc_jtahuabn_aC0okcMcIL .recommended-products-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: var(--font-weight-base, 500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000;
}

/* Horizontal, free-scrolling slider — same per-card width math as
   ProductListing's slider layout, kept in sync for a consistent look
   between the two bottom-of-product-page sections. */
.cc_jtahuabn_aC0okcMcIL .recommended-products-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 24px 16px;
}

.cc_jtahuabn_aC0okcMcIL .recommended-products-slider::-webkit-scrollbar {
  display: none;
}

.cc_jtahuabn_aC0okcMcIL .recommended-products-slider .product-card {
  flex: 0 0 auto;
  width: calc((100% - 4 * 16px) / 5);
  scroll-snap-align: start;
}

/* Visible scroll affordance — the native scrollbar is hidden
   (scrollbar-width: none above), so without this the row gives no visual
   hint that it scrolls sideways. Thumb width/position are driven by inline
   styles set in index.tsx from the row's real scroll metrics. */
.cc_jtahuabn_aC0okcMcIL .recommended-products-scrollbar-track {
  position: relative;
  height: 3px;
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.cc_jtahuabn_aC0okcMcIL .recommended-products-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #000000;
  border-radius: 2px;
}

/* Theme breakpoint: "Tablet/Mobile (1024px)" */
@media (max-width: 1024px) {
  .cc_jtahuabn_aC0okcMcIL .recommended-products {
    padding: 32px 16px;
  }

  .cc_jtahuabn_aC0okcMcIL .recommended-products-title {
    font-size: 17px;
  }

  .cc_jtahuabn_aC0okcMcIL .recommended-products-slider {
    gap: 20px 12px;
  }

  .cc_jtahuabn_aC0okcMcIL .recommended-products-slider .product-card {
    width: calc((100% - 2 * 12px) / 3);
  }
}

/* Theme breakpoint: "Tablet/Mobile (768px)" — exactly 2 cards fill the
   screen at a time (sized off the container's own width, not the
   viewport); swiping right snaps to reveal the next 2, never wrapping
   into a new row underneath. */
@media (max-width: 768px) {
  .cc_jtahuabn_aC0okcMcIL .recommended-products-slider {
    gap: 12px;
  }

  .cc_jtahuabn_aC0okcMcIL .recommended-products-slider .product-card {
    width: calc((100% - 12px) / 2);
  }
}