<?php
/**
 * Shop toolbar + sidebar layout styles.
 */
.shop-layout { display: block; }
.shop-toolbar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: var(--space-sm); margin-bottom: var(--space-md);
}
.shop-toolbar .woocommerce-result-count,
.shop-toolbar .woocommerce-ordering { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.shop-toolbar .woocommerce-ordering select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text); }
.shop-archive-head { padding: var(--space-lg) 0 var(--space-sm); }
.shop-archive-desc { color: var(--muted); max-width: 70ch; }
.woocommerce ul.products { list-style: none; margin: 0; padding: 0; }
.woocommerce .woocommerce-breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--space-sm); }
/* Breadcrumb links are only ~16px tall, which is hard to tap and easy to miss. */
.woocommerce .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Pagination ----------------------------------------------------------------
   WooCommerce's stylesheet is dequeued, so the page numbers render as bare text
   links about 9x21px. Two different markup shapes need the same treatment:
     - shop/category: .woocommerce-pagination ul.page-numbers
     - blog/search:   .aurelia-pagination .nav-links .page-numbers
   Both rule sets live in components.css so the shared pagination also covers the
   blog and search archives. */

/* Product tab links and the category links in .product_meta were ~19px tall. */
.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.single-product .product_meta a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.single-product .product_meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }

/* WooCommerce notices --------------------------------------------------------
 * The add-to-cart notice is rendered by `woocommerce_output_all_notices()` in
 * single-product.php after a full-page form POST, so it lands above the product as
 * a bare `.woocommerce-message`. WooCommerce's stylesheet is dequeued, which left it
 * completely unstyled. These rules follow the contact form's notice treatment
 * (`.form-notice` in components.css) so it matches the rest of the site. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin: 0 0 var(--space-md);
	padding: .85rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: 1.5;
	list-style: none;
	box-shadow: 0 6px 20px -18px rgba(0, 0, 0, .5);
}
.woocommerce-message { background: #eef7ef; border-color: #c6e3ca; color: #245c2c; }
.woocommerce-info { background: #f2f4f8; border-color: #d3dae6; color: #2f3a4d; }
.woocommerce-error { background: #fdeeee; border-color: #f2c9c9; color: #8a2b2b; }
.woocommerce-notices-wrapper ul { margin: 0; padding: 0; }
.woocommerce-notices-wrapper li + li { margin-top: .35rem; }
/* "View cart" / "Continue shopping" inside the notice. WooCommerce marks this up
   as `.button`, which the shop-wide button rule would otherwise render as a solid
   primary pill competing with the message text. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	padding: .5rem .95rem;
	margin: 0;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: currentColor;
	color: #fff;
	opacity: 1;
}
@media (max-width: 560px) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error { flex-direction: column; align-items: flex-start; }
}

/* Single product */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; position: relative; }
@media (max-width: 900px) { .single-product div.product { grid-template-columns: minmax(0, 1fr); } }
/* WooCommerce prints the sale flash at priority 10 and the gallery at priority 20,
   so on every discounted product the `.onsale` block lands as the first grid child
   and pushes the gallery into the second column. Its own stylesheet (which makes it
   absolutely positioned) is dequeued, so it is taken out of flow here instead. */
.single-product .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .45rem .75rem;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-contrast);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55);
}
/* Grid items default to `min-width: auto`, which resolves to the intrinsic width of
   the 600px+ gallery image. That alone forces the columns wider than the viewport. */
.single-product .woocommerce-product-gallery, .single-product .summary { min-width: 0; }
/* The gallery scrolls with the page. An earlier version made it sticky, but a sticky
   box taller than the space left below the header can never be scrolled past its own
   bottom, so it read as the product image sticking to the viewport and then snapping
   free further down the page. */
.single-product .aurelia-gallery { position: static; align-self: start; width: 100%; min-width: 0; }
/* Product gallery: one large image with a row of thumbnails underneath. */
.aurelia-gallery__stage { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface, #f7f5f2); }
.aurelia-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.aurelia-gallery__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	backdrop-filter: blur(4px);
}
.aurelia-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.aurelia-gallery__thumb {
	flex: 0 0 auto;
	width: 74px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: none;
	cursor: pointer;
	overflow: hidden;
	opacity: .55;
	transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.aurelia-gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.aurelia-gallery__thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.aurelia-gallery__thumb.is-active,
.aurelia-gallery__thumb[aria-pressed="true"] {
	opacity: 1;
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}
.aurelia-gallery__thumb-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 520px) {
	.aurelia-gallery__thumb { width: 62px; }
}
/* The old WooCommerce gallery is no longer rendered (see inc/woocommerce.php), but
   guard against plugin overrides leaving it on the page and overflowing the column. */
.single-product .woocommerce-product-gallery { width: 100%; max-width: 100%; min-width: 0; }
.single-product .woocommerce-product-gallery__wrapper { overflow: hidden; }
.single-product .woocommerce-product-gallery .zoomImg { max-width: none; }
@media (hover: none) {
	.single-product .woocommerce-product-gallery .zoomImg { display: none; }
}
.single-product .summary .product_title { font-size: var(--fs-xl); margin-bottom: .35rem; }
.single-product .summary .price { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.single-product .summary .price del { font-size: var(--fs-md); opacity: .6; margin-right: .5rem; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .summary .woocommerce-product-details__short-description { color: var(--muted); margin-bottom: var(--space-md); }
.single-product form.cart { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-md) 0; }
.single-product form.cart .quantity input { width: 82px; padding: .65rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.single-product .product_meta { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-lg); }
.single-product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-md); border-bottom: 1px solid var(--border); padding: 0; margin-bottom: var(--space-md); list-style: none; }
.single-product .woocommerce-tabs ul.tabs li { padding: .5rem 0; }
.single-product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--primary); }
.single-product .woocommerce-tabs ul.tabs li a { font-size: var(--fs-sm); }
.single-product .related.products, .single-product .up-sells { grid-column: 1 / -1; margin-top: var(--space-lg); }
/* Related / up-sells heading: matched to the site-wide section heading rhythm
   (`.section-head` + `.section-title` in components.css) so it reads as part of the
   page rather than a raw WooCommerce <h2>. */
.single-product .related.products > h2,
.single-product .up-sells > h2 {
	margin: 0 0 var(--space-md);
	padding: 0 0 var(--space-sm);
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
}
.single-product .related.products ul.products,
.single-product .up-sells ul.products { margin: 0; }
.star-rating { color: var(--primary); }

/* Cart / checkout / account */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: .8rem .6rem; border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-sm); }
.woocommerce table.shop_table th { color: var(--muted); font-weight: 600; }
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button { border-radius: var(--radius); padding: .7rem 1.2rem; font-weight: 600; background: var(--button-bg, var(--primary)); color: var(--button-text, var(--primary-contrast)); }
.woocommerce .button:hover { background: var(--button-hover-bg, var(--primary)); color: var(--button-text, var(--primary-contrast)); opacity: 1; }
/* The "View cart" / "Continue shopping" link inside an add-to-cart notice is marked up
   as `.button`, so the shop-wide rule above would paint it as a solid primary pill
   competing with the message text. These selectors are more specific than
   `.woocommerce .button` and deliberately keep it an outlined ghost button.
   (Placed after that rule so it also wins on equal specificity.)

   The hover fill uses the notice's own text colour captured as a custom property.
   Using `background: currentColor` with `color: #fff` here fails, because
   `currentColor` resolves to the *new* (white) colour, giving white-on-white. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error { --notice-ink: #245c2c; }
.woocommerce .woocommerce-info { --notice-ink: #2f3a4d; }
.woocommerce .woocommerce-error { --notice-ink: #8a2b2b; }
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}
.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--notice-ink, var(--primary));
	border-color: var(--notice-ink, var(--primary));
	color: #fff;
}
.woocommerce .cart_totals, .woocommerce .checkout { font-size: var(--fs-sm); }
.woocommerce .cart_totals h2, .woocommerce .checkout h3 { font-size: var(--fs-md); }
.woocommerce .cart-collaterals .cart_totals { float: right; width: 48%; }
.woocommerce form .form-row { margin-bottom: var(--space-sm); display: flex; flex-direction: column; }
.woocommerce form .form-row label { font-size: var(--fs-xs); margin-bottom: .3rem; color: var(--muted); }
.woocommerce .select2-container .select2-selection--single { height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: .55rem .6rem; }
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); }
.woocommerce ul.payment_methods { padding: 0; list-style: none; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { border-radius: var(--radius); }
/* WooCommerce renders the "show password" control as a 4x4 button with a
   background image. Enlarge the hit area and keep it centred on the field. */
.woocommerce .show-password-input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -44px;
	padding: 0;
	border: 0;
	background: transparent no-repeat center;
	background-size: 16px 16px;
	cursor: pointer;
	text-indent: -9999px;
	overflow: hidden;
}
@media (max-width: 700px) { .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; } }