/**
 * WooCommerce overrides — restyles core WooCommerce markup to match the
 * editorial system WITHOUT overriding the underlying templates (see
 * /woocommerce/README.md). Deliberately conservative: enough to make
 * Shop/Product/Cart/Checkout/Account presentable and on-brand in this
 * foundation phase, not a full visual design pass.
 */

/* ---------------------------------------------------------------------
   Shared product-loop base — applies everywhere `ul.products` renders
   (Shop, homepage product rails, single-product related/upsells) so
   every product grid shares the same restrained typography and a
   sensible 2/3-column fallback grid. Shop-page-only rules (the 4-column
   desktop catalog, larger imagery, sale styling, category metadata)
   are scoped under `.shop-catalog` further down and never touch the
   homepage or Product page.
--------------------------------------------------------------------- */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
}

ul.products li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	margin: 0;
}

ul.products li.product .price {
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
}

ul.products li.product .button {
	margin-top: var(--space-2xs);
}

/* ---------------------------------------------------------------------
   Shop page — premium catalog (see /woocommerce/archive-product.php).
   `.shop-catalog` wraps only the Shop/category/tag product loop, so
   these rules never reach the homepage product rails or the
   single-product related/upsell grids.
--------------------------------------------------------------------- */

.shop-header {
	padding-block: var(--space-lg) var(--space-md);
}

.shop-header__title {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	letter-spacing: var(--ls-tight);
	margin: 0;
}

.shop-header .term-description,
.shop-header .woocommerce-products-header__description {
	max-width: 60ch;
	margin-top: var(--space-xs);
	color: var(--color-ink-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

/* Category navigation — plain link list, not a filter UI. */
.shop-category-nav {
	margin-top: var(--space-md);
}

.shop-category-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	list-style: none;
	margin: 0;
	padding-bottom: var(--space-sm);
	border-bottom: var(--border-width) solid var(--color-line);
}

.shop-category-nav__list a {
	display: inline-block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	padding-bottom: var(--space-3xs);
	border-bottom: var(--border-width-md) solid transparent;
}

.shop-category-nav__list a:hover {
	color: var(--color-ink);
}

.shop-category-nav__list li.is-current a {
	color: var(--color-ink);
	border-bottom-color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   Product card — image hover transition, full-card click target, and
   button removal. Scoped to `.shop-catalog` only, so the homepage
   product rails and the single-product related/upsell grids (which
   render the same /woocommerce/content-product.php template) are
   completely unaffected.
--------------------------------------------------------------------- */

/* Whole card is the click target — no separate "view product" control. */
.shop-catalog .product-card a.woocommerce-loop-product__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.shop-catalog .product-card:hover .woocommerce-loop-product__title {
	color: var(--color-accent);
}

/* No quick-add button in the catalog grid — the card itself is the
   only control. (Related/upsell products elsewhere keep their button;
   this rule only removes it inside .shop-catalog.) */
.shop-catalog .product-card .button,
.shop-catalog .product-card .added_to_cart {
	display: none;
}

/* Primary/secondary image stack. The container — not the <img> — now
   owns the aspect ratio so both images can be absolutely positioned on
   top of one another for the cross-fade. */
.shop-catalog .product-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ratio-portrait);
}

.shop-catalog .product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.shop-catalog .product-card__media img.product-card__image--secondary {
	opacity: 0;
}

/* Cross-fade only on pointers that can actually hover — phones/tablets
   always just show the primary image, no hover state to fall into. */
@media (hover: hover) and (pointer: fine) {
	.shop-catalog .product-card__media img {
		transition: opacity var(--duration-base) var(--ease);
	}

	.shop-catalog .product-card:hover .product-card__media img:not(.product-card__image--secondary) {
		opacity: 0;
	}

	.shop-catalog .product-card:hover .product-card__media img.product-card__image--secondary {
		opacity: 1;
	}
}


/* Toolbar — result count + sort dropdown, wrapped by sabeh_shop_toolbar_open()
   / sabeh_shop_toolbar_close() in inc/woocommerce-hooks.php around
   WooCommerce's own woocommerce_result_count / woocommerce_catalog_ordering
   hooks. Kept minimal: a quiet line of meta text, a plain-bordered select —
   consistent with the filter bar's dropdown language rather than a heavier
   toolbar UI. */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 var(--space-sm);
}

.shop-catalog .woocommerce-result-count {
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	margin: 0;
}

.shop-catalog .woocommerce-ordering {
	margin: 0;
}

.shop-catalog .woocommerce-ordering select.orderby {
	/* QA fix: 44px meets the standard touch-target minimum (WCAG 2.5.5 /
	   mobile HIG) — this control sits right next to the equally-sized
	   .shop-filters__toggle, and 40px read as a mismatch under touch. */
	min-height: 44px;
	padding: var(--space-2xs) var(--space-lg) var(--space-2xs) var(--space-sm);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	cursor: pointer;
}

.shop-catalog .woocommerce-ordering select.orderby:hover {
	border-color: var(--color-ink);
}

/* Responsive grid: 2 mobile / 3 tablet (>=768px) / 4 desktop (>=1280px),
   with more generous gutters than the shared base above. */
.shop-catalog ul.products {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg) var(--space-md);
}

@media (min-width: 768px) {
	.shop-catalog ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-xl) var(--space-lg);
	}
}

@media (min-width: 1280px) {
	.shop-catalog ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Larger imagery — pairs with the `woocommerce_get_image_size_thumbnail`
   filter in inc/woocommerce-setup.php that generates bigger source
   files (900x1125) for this grid to display at full quality. The
   portrait ratio itself is now owned by `.product-card__media` (see
   the primary/secondary image stack rules above) so both images can
   be layered for the hover cross-fade. */

/* Sale badge — restyle WooCommerce's default `.onsale` circle into a
   quiet rectangular label matching the theme's .badge language.
   (`.product-card__media` already has `position: relative` from the
   image-stack rules above.) */
.shop-catalog .product-card__media .onsale {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1;
	min-height: 0;
	min-width: 0;
	border-radius: var(--radius-sm);
	background: var(--color-ink);
	color: var(--color-paper);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	line-height: 1;
	padding: var(--space-3xs) var(--space-xs);
	display: inline-flex;
	align-items: center;
}

/* Subtle per-product collection/category metadata, above the title. */
.shop-catalog .product-card__meta {
	display: block;
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	margin-bottom: var(--space-3xs);
}

.shop-catalog ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--fs-md);
}

/* QA fix: a CSS Grid item's default min-width is `auto`, which sizes to
   its content's min-content width. A long, unbroken product name (common
   in this catalog — "Hand-Embroidered..." style titles) can otherwise
   force a mobile 2-up/tablet 3-up card wider than its track, blowing out
   the grid into horizontal overflow. Matches the same `min-width: 0`
   defensive pattern already used for grid/flex items elsewhere in this
   theme (layout.css, homepage.css). Scoped to `.shop-catalog` only. */
.shop-catalog ul.products li.product {
	min-width: 0;
}

.shop-catalog ul.products li.product .woocommerce-loop-product__title,
.shop-catalog ul.products li.product .price {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Sale price emphasis — regular price muted/struck, sale price in ink. */
.shop-catalog ul.products li.product .price del {
	color: var(--color-ink-muted);
	text-decoration: line-through;
	opacity: 0.7;
	font-weight: var(--fw-regular);
}

.shop-catalog ul.products li.product .price ins {
	color: var(--color-ink);
	text-decoration: none;
	font-weight: var(--fw-medium);
	margin-left: var(--space-2xs);
}

/* Single product */
.single-product div.product .woocommerce-product-gallery {
	margin-bottom: var(--space-lg);
}

.single-product div.product .product_title {
	font-size: var(--fs-2xl);
}

.single-product div.product p.price {
	font-size: var(--fs-lg);
	color: var(--color-ink);
}

.single-product div.product form.cart {
	margin-block: var(--space-md);
}

.single-product div.product .variations select {
	max-width: 320px;
}

/* Cart & Checkout tables */
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--space-lg);
}

table.shop_table th,
table.shop_table td {
	padding: var(--space-sm);
	border-bottom: 1px solid var(--color-line);
	text-align: left;
}

.woocommerce-cart-form .product-thumbnail img {
	width: 96px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

#payment .payment_methods {
	border: 1px solid var(--color-line);
	padding: var(--space-md);
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.woocommerce-MyAccount-navigation a {
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--color-accent);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--color-accent) !important;
	background: var(--color-paper-alt);
	padding: var(--space-sm) var(--space-md);
	list-style: none;
}

/* Buttons — align core WC buttons with the theme .btn look */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	background: var(--color-ink);
	color: var(--color-paper);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	padding: var(--space-xs) var(--space-lg);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* Star ratings — leave WooCommerce's own star-rating font/markup intact,
   just align color to the accent token. */
.star-rating span::before {
	color: var(--color-accent);
}