/* ============================================================================
   Rex — branded product-listing cards (Shop, category archives, Homepage grid)
   Loaded site-wide. Design tokens are re-declared here because the per-file
   tokens elsewhere are scoped (e.g. to .rex-drawer) and don't reach li.product.
   ========================================================================== */
ul.products li.product,
.elementor-grid li.product {
  --rex-navy:#233A77; --rex-navy-deep:#16233F;
  --rex-gold:#FCCA06; --rex-gold-deep:#E9BB05;
  --rex-ink:#14181F; --rex-muted:#7B8494; --rex-line:#E6E9EF;

  background:#fff;
  border:1px solid var(--rex-line);
  border-radius:16px;
  padding:13px 13px 15px;
  box-shadow:0 1px 2px rgba(23,33,64,.04), 0 6px 18px rgba(23,33,64,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
  position:relative;
  text-align:left;
}
ul.products li.product:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(23,33,64,.14);
  border-color:#D7DCE7;
}

/* Link that wraps image + title + price */
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-loop-product__link {
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
}

/* Image — full belt shown (contain) with padding so it's zoomed out, not
   touching the card edges. Source is 1000x1000 square with the belt centred. */
ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail {
  width:100%; height:auto; aspect-ratio:1/1;
  object-fit:contain; padding:6% 8%; box-sizing:border-box;
  border-radius:12px; background:#FAFBFD;
  margin:0 0 10px !important;   /* WC default is 1em(16px); tighten the gap above the title */
}
/* gallery hover image overlays the same frame with identical fit */
ul.products li.product .rex-hover-image {
  position:absolute; top:0; left:0; width:100%; aspect-ratio:1/1; height:auto;
  object-fit:contain; padding:6% 8%; box-sizing:border-box;
  border-radius:12px; background:#FAFBFD;
}

/* Sale badge → brand pill, top-right over the image */
ul.products li.product .onsale {
  position:absolute; top:12px !important; right:12px !important; left:auto !important; bottom:auto !important; margin:0 !important;
  min-height:0; min-width:0; height:auto; line-height:1;
  padding:6px 11px; border-radius:999px;
  background:var(--rex-gold); color:var(--rex-navy-deep);
  font-size:12px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 3px 10px rgba(23,33,64,.18); z-index:2;
}

/* Title */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  font-size:16px; font-weight:800; line-height:1.3; color:var(--rex-ink);
  margin:0 0 6px; padding:0 14px !important;   /* horizontal padding — card's own padding is zeroed by Elementor, image stays full-bleed (theme forces 8px 0, so !important) */
  min-height:2.6em;               /* reserve 2 lines so short titles still align; longer titles wrap fully (no clamp) */
  overflow:visible;
}

/* Price — struck regular + bold sale, like the product page */
ul.products li.product .price {
  font-size:18px; color:var(--rex-ink); font-weight:800; margin:0 !important; padding:0 14px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
ul.products li.product .price del,
ul.products li.product .price del .amount,
ul.products li.product .price del bdi {
  color:#7B8494 !important; font-weight:600; opacity:1;
  text-decoration:line-through;
}
ul.products li.product .price del { font-size:.82em; }
/* Beat the theme's green sale colour → brand navy, matching the product page */
ul.products li.product .price ins,
ul.products li.product .price ins .amount,
ul.products li.product .price ins bdi {
  color:#233A77 !important; font-weight:800; text-decoration:none;
}
ul.products li.product .price .rex-typical,
ul.products li.product .price .woocommerce-price-suffix { color:var(--rex-muted); font-weight:600; font-size:.7em; }

/* ---- Add to Cart / Buy Now buttons ---- */
.rex-loop-btns {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.rex-loop-btn {
  flex:1 1 120px; min-width:0;
  height:44px; border:0; border-radius:11px;
  font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  cursor:pointer; white-space:nowrap; line-height:1;
  transition:filter .15s ease, box-shadow .15s ease, background .15s ease;
}
.rex-loop-btn:active { filter:brightness(.94); }
.rex-loop-btn .rex-btn-ic { flex:none; position:relative; top:-0.5px; }
.rex-loop-add { background:#233A77; color:#fff; }
.rex-loop-add:hover { background:#16233F; box-shadow:0 6px 16px rgba(35,58,119,.28); }
.rex-loop-buy { background:#FCCA06; color:#16233F; }
.rex-loop-buy:hover { background:#E9BB05; box-shadow:0 6px 16px rgba(252,202,6,.4); }

/* Push the button row to the card bottom so rows line up across a grid row;
   horizontal + bottom padding since the card's own padding is zeroed by Elementor. */
ul.products li.product .rex-loop-btns { margin-top:auto; padding:9px 14px 14px; }

/* Small screens: comfortable tap targets; buttons wrap to full width if a card
   gets too narrow (flex-basis 120px handles this automatically). */
@media (max-width:600px){
  ul.products li.product { border-radius:13px; padding:11px 11px 13px; }
  ul.products li.product .woocommerce-loop-product__title { font-size:15px; }
  .rex-loop-btn { height:42px; font-size:13px; }
}