/* ============================================================================
   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); }
/* Buy Now keeps its dark label on hover. A global button:hover rule from the
   Elementor kit was flipping the text (and its icon, via currentColor) to white
   against the gold fill, which all but disappeared. Pinned on every state. */
.rex-loop-buy,
.rex-loop-btns .rex-loop-buy:hover,
.rex-loop-btns .rex-loop-buy:focus,
.rex-loop-btns .rex-loop-buy:active { color:#16233F !important; }
.rex-loop-buy { background:#FCCA06; }
.rex-loop-buy:hover { background:#E9BB05; box-shadow:0 6px 16px rgba(252,202,6,.4); }
.rex-loop-buy .rex-btn-ic { color:#16233F; }

/* 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; }
}

/* Customizable belts show a single route to the product page instead of the
   Add to Cart / Buy Now pair — they cannot be configured from a card. */
.rex-loop-btns-custom { grid-template-columns: 1fr; }
/* This CTA is an <a> (it navigates to the product page) while Add to Cart is a
   <button>, so it inherits the site's global link colour and rendered orange
   against the navy fill. The colour is forced here, on every link state, so the
   label and its icon match Add to Cart exactly; the SVG follows via currentColor. */
.rex-loop-customize,
.rex-loop-btns .rex-loop-customize:link,
.rex-loop-btns .rex-loop-customize:visited,
.rex-loop-btns .rex-loop-customize:hover,
.rex-loop-btns .rex-loop-customize:focus,
.rex-loop-btns .rex-loop-customize:active { color:#fff !important; text-decoration:none; }
.rex-loop-customize { background:#233A77; }
.rex-loop-customize:hover { background:#16233F; box-shadow:0 6px 16px rgba(35,58,119,.28); }
.rex-loop-customize .rex-btn-ic { color:#fff; stroke:currentColor; }

/* ============================================================
   Home — "Shop By Collections"
   The Elementor loop grid is configured for 4 columns. With the catalogue cut
   down to two categories that left roughly 615px of dead space on the right
   while the heading stayed centred across the full 1200px container, so the
   tiles read as misaligned rather than deliberate. Two centred cards instead,
   styled to match the product cards. Scoped to this one section (element id
   28326a9) so no other loop grid is affected.
   ============================================================ */

.elementor-element-28326a9 .elementor-loop-container.elementor-grid {
	grid-template-columns: repeat(2, minmax(0, 400px)) !important;
	justify-content: center;
	gap: 34px;
}

/* the whole tile is one <a> container */
.elementor-element-28326a9 .e-loop-item > a.e-con {
	background: #fff;
	border: 1px solid var(--line-2, #e2e6ee);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.elementor-element-28326a9 .e-loop-item > a.e-con:hover {
	transform: translateY(-4px);
	border-color: #233A77;
	box-shadow: 0 14px 30px rgba(35, 58, 119, .16);
}

/* image edge-to-edge at the top of the card */
.elementor-element-28326a9 .e-loop-item .e-con-inner {
	padding: 0;
	gap: 0;
}

.elementor-element-28326a9 .e-loop-item .elementor-widget-image,
.elementor-element-28326a9 .e-loop-item .elementor-widget-image .elementor-widget-container {
	margin: 0;
	line-height: 0;
}

.elementor-element-28326a9 .e-loop-item img {
	display: block;
	width: 100%;
	/* Elementor sets an explicit 280px height on this image widget. That was
	   square back when the grid gave each tile 277px; at 400px wide it became an
	   accidental 1.42:1 crop. Released to auto so the ratio below governs, which
	   also trims the empty margin above and below the belt in the square source. */
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.elementor-element-28326a9 .e-loop-item > a.e-con:hover img {
	transform: scale(1.04);
}

/* label sits in its own band under the image */
.elementor-element-28326a9 .e-loop-item .elementor-widget-heading {
	width: 100%;
	margin: 0;
	padding: 15px 14px 17px;
	border-top: 1px solid var(--line-2, #e2e6ee);
}

.elementor-element-28326a9 .e-loop-item .elementor-heading-title {
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #233A77;
	transition: color .18s ease;
}

.elementor-element-28326a9 .e-loop-item > a.e-con:hover .elementor-heading-title {
	color: #16233F;
}

@media (max-width: 1024px) {
	.elementor-element-28326a9 .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 22px;
	}
}

@media (max-width: 600px) {
	.elementor-element-28326a9 .elementor-loop-container.elementor-grid {
		gap: 14px;
	}
	.elementor-element-28326a9 .e-loop-item .elementor-widget-heading {
		padding: 11px 8px 13px;
	}
	.elementor-element-28326a9 .e-loop-item .elementor-heading-title {
		font-size: 14px;
	}
}