/*
 * Mashin Irani — Shop skin. Restyles the default WooCommerce shop/product-category archive to the design
 * system: designed hero, card-style product tiles, navy buy buttons, styled price/rating/sale badge, clean
 * result-count + sort row. Short --* tokens with hex fallbacks. Scoped to WooCommerce archive pages.
 */

/* Replace the default «Shop» header with our designed hero. */
.woocommerce-products-header { display: none !important; }

.mi-shop-hero { padding-block: var(--space-6, 24px) var(--space-2, 8px); }
.mi-shop-hero .eyebrow { font-size: .8125rem; font-weight: 600; color: var(--gold-text, #7f6220); margin: 0 0 var(--space-2, 8px); }
.mi-shop-hero h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.2; margin: 0 0 var(--space-3, 12px); color: var(--navy-900, #102134); }
.mi-shop-lede { max-width: 60ch; color: var(--text-secondary, #404751); line-height: 1.85; margin: 0; font-size: 1.02rem; }
.mi-shop-hero + .truststrip { margin-top: var(--space-5, 20px); margin-bottom: var(--space-6, 24px); }

/* Result count + ordering row. */
.woocommerce .woocommerce-result-count { color: var(--text-tertiary, #6e6a66); font-size: .875rem; margin: 0 0 var(--space-4, 16px); }
.woocommerce .woocommerce-ordering { margin: 0 0 var(--space-5, 20px); }
.woocommerce .woocommerce-ordering select {
	font: inherit; font-size: .9rem; padding: 10px 14px; border-radius: var(--radius-md, 8px);
	border: 1px solid var(--border-strong, #c0b2a6); background: var(--bg-elevated, #fff); color: var(--navy-900, #102134); cursor: pointer;
}

/* Product grid — override WC floats with a responsive grid. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--space-5, 20px);
	margin: 0 !important; padding: 0 !important; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; padding: var(--space-4, 16px) !important;
	background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); display: flex; flex-direction: column; position: relative;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-e3, 0 8px 24px rgba(16,33,52,.1)); border-color: var(--gold-300, #e0c58f); }

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; text-decoration: none; }
.woocommerce ul.products li.product img {
	margin: 0 0 var(--space-3, 12px) !important; border-radius: var(--radius-md, 8px);
	aspect-ratio: 1 / 1; object-fit: contain; background: var(--bg-sunken, #ece4da); width: 100%; padding: 10px; box-sizing: border-box;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-size: 1rem !important; font-weight: 700 !important; color: var(--navy-900, #102134); padding: 0 !important; margin: 0 0 var(--space-2, 8px) !important; line-height: 1.5;
}
.woocommerce ul.products li.product .star-rating { margin: 0 0 var(--space-2, 8px); font-size: .8em; }
.woocommerce .star-rating span::before { color: var(--gold-500, #896f3d); }
.woocommerce ul.products li.product .price {
	color: var(--navy-900, #102134) !important; font-weight: 700; font-size: 1.05rem; margin: 0 0 var(--space-3, 12px);
}
.woocommerce ul.products li.product .price del { color: var(--text-tertiary, #6e6a66); font-weight: 400; opacity: 1; margin-inline-end: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--navy-900, #102134); }

/* Sale badge — gold pill. */
.woocommerce span.onsale {
	background: var(--gold-500, #896f3d) !important; color: #fff !important; border-radius: 999px !important;
	min-height: 0 !important; min-width: 0 !important; line-height: 1 !important; padding: 6px 12px !important;
	font-weight: 700; font-size: .78rem; inset-inline-start: 12px; inset-block-start: 12px; top: 12px; margin: 0 !important;
}

/* Add-to-cart → navy buy button, full width, pinned to card bottom. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
	margin-top: auto !important; width: 100%; text-align: center; box-sizing: border-box;
	background: var(--action-buy, #112250) !important; color: #fff !important; border: 0 !important;
	border-radius: var(--radius-md, 8px) !important; padding: 12px 16px !important; font-weight: 600 !important; font-size: .95rem !important;
	transition: background-color .2s;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover { background: var(--navy-900, #102134) !important; }
.woocommerce ul.products li.product .button.loading::after { color: #fff; }
.woocommerce ul.products li.product a.added_to_cart { margin-top: var(--space-2, 8px) !important; }

@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-4, 16px); } }
@media (max-width: 420px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } .woocommerce ul.products li.product { padding: var(--space-3, 12px) !important; } }