/* RC Warrior Phase 2.16 - one product card system everywhere.
   Desktop: 3 cards. Mobile: 2 cards. Related products remain a slider. */

/* ===== Grid system ===== */
.product-grid:not(.related-slider-track),
.catalog-products .product-grid:not(.related-slider-track),
.rcw-products .product-grid:not(.related-slider-track),
.wishlist-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:26px 18px!important;
  align-items:stretch!important;
}

/* ===== Shared card shell ===== */
.product-card,
.wishlist-grid .product-card,
.catalog-page .product-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  overflow:hidden!important;
  border:1px solid #e5eaec!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 6px 20px rgba(12,32,41,.045)!important;
  font-family:Inter,Arial,sans-serif!important;
  font-weight:400!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.product-card:hover,
.wishlist-grid .product-card:hover,
.catalog-page .product-card:hover{
  transform:translateY(-2px)!important;
  border-color:#d8e0e3!important;
  box-shadow:0 12px 28px rgba(12,32,41,.075)!important;
}

.product-card .product-media,
.wishlist-grid .product-media,
.catalog-page .product-media{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#fff!important;
}
.product-card .product-media>a:first-child,
.wishlist-grid .product-media>a:first-child,
.catalog-page .product-media>a:first-child{position:absolute!important;inset:0!important}
.product-card .product-media img,
.wishlist-grid .product-media img,
.catalog-page .product-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:14px!important;
  object-fit:contain!important;
  object-position:center!important;
  transition:opacity .28s ease,transform .35s ease!important;
}
.product-card .product-b{opacity:0!important;transform:scale(.985)!important}
@media(hover:hover) and (pointer:fine){
  .product-card:hover .product-a{opacity:0!important;transform:scale(1.015)!important}
  .product-card:hover .product-b{opacity:1!important;transform:scale(1)!important}
}

.product-card .sale,
.wishlist-grid .sale,
.catalog-page .sale{
  left:12px!important;top:12px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#0d2f3b!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:0!important;
}
.product-card .heart,
.wishlist-grid .heart,
.catalog-page .heart{
  top:12px!important;right:12px!important;
  width:38px!important;height:38px!important;
  opacity:1!important;transform:none!important;
  border:1px solid #e3e8ea!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.97)!important;
  color:#10252e!important;
  box-shadow:0 4px 13px rgba(12,32,41,.06)!important;
}
.product-card .heart svg,.wishlist-grid .heart svg,.catalog-page .heart svg{width:17px!important;height:17px!important;fill:transparent;stroke:currentColor}
.product-card .heart.active,.wishlist-grid .heart.active,.catalog-page .heart.active,.wishlist-page-item .heart.is-saved{
  color:#ff7023!important;border-color:#ffc9aa!important;background:#fff5ef!important;
}
.product-card .heart.active svg,.wishlist-grid .heart.active svg,.catalog-page .heart.active svg,.wishlist-page-item .heart.is-saved svg{fill:#ff7023!important;stroke:#ff7023!important}

/* ===== Typography / spacing ===== */
.product-card .product-copy,
.wishlist-grid .product-copy,
.catalog-page .product-copy{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-width:0!important;
  padding:14px 15px 15px!important;
  background:#fff!important;
}
.product-card .product-kicker,
.wishlist-grid .product-kicker,
.catalog-page .product-kicker{
  display:block!important;
  margin:0 0 6px!important;
  color:#ff651d!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:650!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.product-card .product-copy h3,
.wishlist-grid .product-copy h3,
.catalog-page .product-copy h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  min-height:2.8em!important;
  max-height:2.8em!important;
  margin:0 0 11px!important;
  overflow:hidden!important;
  color:#10252e!important;
  font-size:14px!important;
  line-height:1.4!important;
  font-weight:550!important;
  letter-spacing:0!important;
}
.product-card .product-copy h3 a,.wishlist-grid .product-copy h3 a,.catalog-page .product-copy h3 a{color:inherit!important;text-decoration:none!important}
.product-card .product-price,
.wishlist-grid .product-price,
.catalog-page .product-price{
  display:flex!important;
  min-height:24px!important;
  align-items:baseline!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin:0 0 13px!important;
  overflow:hidden!important;
}
.product-card .product-price strong,
.wishlist-grid .product-price strong,
.catalog-page .product-price strong{
  display:inline!important;
  margin:0!important;
  color:#103848!important;
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
.product-card .product-price del,
.wishlist-grid .product-price del,
.catalog-page .product-price del{
  display:inline!important;
  margin:0!important;
  overflow:hidden!important;
  color:#9aa5aa!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:400!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* ===== Desktop actions ===== */
.product-actions-desktop,
.product-card .product-actions,
.wishlist-grid .product-actions,
.catalog-page .product-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  margin-top:auto!important;
}
.product-card .product-actions button,
.product-card .product-actions a,
.wishlist-grid .product-actions button,
.wishlist-grid .product-actions a,
.catalog-page .product-actions button,
.catalog-page .product-actions a{
  display:flex!important;
  min-width:0!important;
  height:43px!important;
  min-height:43px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.product-card .product-actions svg,.wishlist-grid .product-actions svg,.catalog-page .product-actions svg{width:14px!important;height:14px!important;flex:none!important}
.product-card .product-add,.wishlist-grid .product-add,.catalog-page .product-add{
  border:1px solid #0c2029!important;
  background:#0c2029!important;
  color:#fff!important;
}
.product-card .product-buy,.wishlist-grid .product-buy,.catalog-page .product-buy{
  border:1px solid #dbe2e5!important;
  background:#fff!important;
  color:#10252e!important;
}
.product-card .product-add:hover,.wishlist-grid .product-add:hover,.catalog-page .product-add:hover{background:#ff7023!important;border-color:#ff7023!important}
.product-card .product-buy:hover,.wishlist-grid .product-buy:hover,.catalog-page .product-buy:hover{border-color:#ff7023!important;color:#ff7023!important}
.product-card .product-out,.wishlist-grid .product-out,.catalog-page .product-out{background:#90999d!important;border-color:#90999d!important;color:#fff!important;cursor:not-allowed!important}
.product-view-mobile{display:none!important}

/* ===== Related products: same card, slider behavior only ===== */
.related-section .related-slider-track{
  gap:16px!important;
  align-items:stretch!important;
}
.related-section .related-slider-track>.product-card{
  /* Phase 2.23: exactly four related cards on desktop.
     This stylesheet loads after the page @stack, so this is the authoritative rule. */
  flex:0 0 calc((100% - 48px)/4)!important;
  width:calc((100% - 48px)/4)!important;
  min-width:0!important;
}

/* ===== Tablet / mobile ===== */
@media(max-width:900px){
  .product-grid:not(.related-slider-track),
  .catalog-products .product-grid:not(.related-slider-track),
  .rcw-products .product-grid:not(.related-slider-track),
  .wishlist-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 12px!important;
  }
  .related-section .related-slider-track>.product-card{
    flex-basis:calc((100% - 12px)/2)!important;
    width:calc((100% - 12px)/2)!important;
  }
}

@media(max-width:700px){
  .product-grid:not(.related-slider-track),
  .catalog-products .product-grid:not(.related-slider-track),
  .rcw-products .product-grid:not(.related-slider-track),
  .wishlist-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px 8px!important;
  }
  .product-card,
  .wishlist-grid .product-card,
  .catalog-page .product-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    border-radius:15px!important;
    box-shadow:0 4px 14px rgba(12,32,41,.04)!important;
  }
  .product-card .product-media,.wishlist-grid .product-media,.catalog-page .product-media{
    width:100%!important;
    aspect-ratio:1/1!important;
    min-height:0!important;
    border:0!important;
  }
  .product-card .product-media img,.wishlist-grid .product-media img,.catalog-page .product-media img{padding:8px!important}
  .product-card .sale,.wishlist-grid .sale,.catalog-page .sale{
    left:8px!important;top:8px!important;padding:5px 8px!important;font-size:9px!important;
  }
  .product-card .heart,.wishlist-grid .heart,.catalog-page .heart{
    top:8px!important;right:8px!important;width:34px!important;height:34px!important;
  }
  .product-card .heart svg,.wishlist-grid .heart svg,.catalog-page .heart svg{width:16px!important;height:16px!important}
  .product-card .product-copy,.wishlist-grid .product-copy,.catalog-page .product-copy{
    padding:10px 9px 11px!important;
  }
  .product-card .product-kicker,.wishlist-grid .product-kicker,.catalog-page .product-kicker{display:none!important}
  .product-card .product-copy h3,.wishlist-grid .product-copy h3,.catalog-page .product-copy h3{
    min-height:2.62em!important;max-height:2.62em!important;
    margin:0 0 8px!important;
    font-size:11.5px!important;line-height:1.31!important;font-weight:550!important;
  }
  .product-card .product-price,.wishlist-grid .product-price,.catalog-page .product-price{
    min-height:20px!important;gap:5px!important;margin:0 0 9px!important;
  }
  .product-card .product-price strong,.wishlist-grid .product-price strong,.catalog-page .product-price strong{
    font-size:15.5px!important;font-weight:650!important;
  }
  .product-card .product-price del,.wishlist-grid .product-price del,.catalog-page .product-price del{font-size:8.5px!important}

  /* Phone cards only show VIEW. Desktop actions are intentionally hidden. */
  .product-card .product-actions-desktop,
  .product-card .product-actions,
  .wishlist-grid .product-actions,
  .catalog-page .product-actions{display:none!important}
  .product-view-mobile{
    display:flex!important;
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    margin-top:auto!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    border-radius:9px!important;
    background:#0b1726!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:.035em!important;
    text-decoration:none!important;
  }
  .product-view-mobile svg{width:13px!important;height:13px!important;color:#fff!important}

  .related-section .related-slider-track{gap:8px!important}
  .related-section .related-slider-track>.product-card{
    flex:0 0 calc((100% - 8px)/2)!important;
    width:calc((100% - 8px)/2)!important;
  }
}

@media(max-width:370px){
  .product-grid:not(.related-slider-track),.catalog-products .product-grid:not(.related-slider-track),.rcw-products .product-grid:not(.related-slider-track),.wishlist-grid{gap:10px 6px!important}
  .product-card .product-copy,.wishlist-grid .product-copy,.catalog-page .product-copy{padding:9px 7px 9px!important}
  .product-card .product-copy h3,.wishlist-grid .product-copy h3,.catalog-page .product-copy h3{font-size:10.5px!important}
  .product-card .product-price strong,.wishlist-grid .product-price strong,.catalog-page .product-price strong{font-size:14px!important}
  .product-view-mobile{height:36px!important;min-height:36px!important}
}


/* ===== Phase 2.17: strict out-of-stock state ===== */
.product-actions.is-out-of-stock{grid-template-columns:1fr!important}
.product-actions.is-out-of-stock .product-out-only{
  width:100%!important;grid-column:1/-1!important;background:#92999c!important;border-color:#92999c!important;color:#fff!important;cursor:not-allowed!important;pointer-events:none!important;
}
.product-stock-mobile{
  border:0!important;background:#92999c!important;color:#fff!important;cursor:not-allowed!important;pointer-events:none!important;
}
.product-card [disabled],.wishlist-grid [disabled]{pointer-events:none!important}


/* ===== Phase 2.32: touch/mobile image-swap safety =====
   The original V47 stylesheet has unconditional :hover image swapping. Mobile
   browsers can keep :hover active after a tap, while rcw-final-mobile hides the
   secondary image. That combination made the primary image opacity 0 and left
   a blank product card. On touch/coarse pointers (and compact layouts), always
   keep the primary product image visible and never activate the desktop hover
   swap. Desktop mouse hover remains unchanged. */
@media (hover:none), (pointer:coarse), (max-width:900px){
  .product-card:hover,
  .wishlist-grid .product-card:hover,
  .catalog-page .product-card:hover{
    transform:none!important;
  }
  .product-card .product-a,
  .product-card:hover .product-a,
  .wishlist-grid .product-card .product-a,
  .wishlist-grid .product-card:hover .product-a,
  .catalog-page .product-card .product-a,
  .catalog-page .product-card:hover .product-a{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .product-card .product-b,
  .product-card:hover .product-b,
  .wishlist-grid .product-card .product-b,
  .wishlist-grid .product-card:hover .product-b,
  .catalog-page .product-card .product-b,
  .catalog-page .product-card:hover .product-b{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:none!important;
    pointer-events:none!important;
  }
}