/* ============================================================================
   Store — 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 .store-drawer) and don't reach li.product.
   ========================================================================== */
ul.products li.product,
.elementor-grid li.product {
  --store-navy:#233A77; --store-navy-deep:#16233F;
  --store-gold:#FCCA06; --store-gold-deep:#E9BB05;
  --store-ink:#14181F; --store-muted:#7B8494; --store-line:#E6E9EF;

  background:#fff;
  border:1px solid var(--store-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 product shown (contain) with padding so it's zoomed out, not
   touching the card edges. Source is 1000x1000 square with the product 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 .store-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(--store-gold); color:var(--store-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(--store-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(--store-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 .store-typical,
ul.products li.product .price .woocommerce-price-suffix { color:var(--store-muted); font-weight:600; font-size:.7em; }

/* ---- Add to Cart / Buy Now buttons ---- */
.store-loop-btns {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.store-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;
}
.store-loop-btn:active { filter:brightness(.94); }
.store-loop-btn .store-btn-ic { flex:none; position:relative; top:-0.5px; }
.store-loop-add { background:#233A77; color:#fff; }
.store-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. */
.store-loop-buy,
.store-loop-btns .store-loop-buy:hover,
.store-loop-btns .store-loop-buy:focus,
.store-loop-btns .store-loop-buy:active { color:#16233F !important; }
.store-loop-buy { background:#FCCA06; }
.store-loop-buy:hover { background:#E9BB05; box-shadow:0 6px 16px rgba(252,202,6,.4); }
.store-loop-buy .store-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 .store-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; }
  .store-loop-btn { height:42px; font-size:13px; }
}

/* Products with a single action (external or grouped products) show one
   full-width button instead of the Add to Cart / Buy Now pair. */
.store-loop-btns-custom { grid-template-columns: 1fr; }

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


/* ============================================================
   SIMPLE / NON-VARIABLE PRODUCTS
   ============================================================
   Variable products render Add to Cart as a <button>. Simple products need a
   real add-to-cart <a href> instead, and an <a> inherits the site's global
   orange link colour straight through the navy fill. Forced on every link
   state; the SVG icons follow via currentColor. */
.store-loop-btns a.store-loop-add,
.store-loop-btns a.store-loop-add:link,
.store-loop-btns a.store-loop-add:visited,
.store-loop-btns a.store-loop-add:hover,
.store-loop-btns a.store-loop-add:focus,
.store-loop-btns a.store-loop-add:active { color:#fff !important; text-decoration:none; }
.store-loop-btns a.store-loop-add .store-btn-ic { color:#fff; stroke:currentColor; }

.store-loop-btns a.store-loop-buy,
.store-loop-btns a.store-loop-buy:link,
.store-loop-btns a.store-loop-buy:visited,
.store-loop-btns a.store-loop-buy:hover,
.store-loop-btns a.store-loop-buy:focus,
.store-loop-btns a.store-loop-buy:active { color:#16233F !important; text-decoration:none; }
.store-loop-btns a.store-loop-buy .store-btn-ic { color:#16233F; }

/* WooCommerce skins .add_to_cart_button itself, which would repaint the fill.
   Keep the card's own navy on every state. */
ul.products li.product a.store-loop-add.add_to_cart_button,
ul.products li.product a.store-loop-add.added,
ul.products li.product a.store-loop-add.loading { background:#233A77; border:0; }
ul.products li.product a.store-loop-add.add_to_cart_button:hover { background:#16233F; }

/* REGULAR (NON-SALE) PRICE
   Only .price ins was ever given the brand navy, because every product in the
   original catalogue carried a sale price. A product with no sale price has no
   <ins> at all and fell through to WooCommerce's default green. Match the navy
   used for sale prices so both cases look the same.
   Weight matters as much as colour here: the Elementor kit sets .price to
   weight 600, and the original design only beat that on `.price ins`, so a
   product with no sale price rendered thin as well as green. Both are matched
   to the sale-price treatment so the price still catches the eye. */
ul.products li.product .price,
ul.products li.product span.price,
ul.products li.product .price > bdi,
ul.products li.product .price > .amount,
ul.products li.product .price > .woocommerce-Price-amount,
ul.products li.product .price > .woocommerce-Price-amount bdi {
  color:#233A77 !important; font-weight:800 !important;
}
/* The struck-through original price stays muted grey and lighter, so re-assert
   both after the blanket rule above, which would otherwise turn it navy and
   bold to match the current price. */
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 !important; }