/**
 * Canvas WooCommerce Styles
 *
 * Extends the base product/cart CSS in style.css with
 * WooCommerce-specific adjustments. Conditionally loaded
 * only on shop, cart, checkout, and account pages.
 *
 * @package Canvas
 * @since 1.0.0
 */

/* ── Shop Loop ─────────────────────────────────────────────────── */

.woocommerce .products {
	display: flex;
	flex-wrap: wrap;
}

.woocommerce .product .grid-inner {
	margin-bottom: 30px;
}

/*
 * A row that states its own vertical spacing already separates its cards, so
 * the card must not add a second gap on top of it. A carousel slide holds one
 * card and is spaced by the carousel's own margin, so the same applies there:
 * the gap would otherwise be dead space under the last row of the slide.
 */
.woocommerce [class*="gutter-"] > .product > .grid-inner,
.woocommerce [class*="col-mb-"] > .product > .grid-inner,
.woocommerce .oc-item > .product > .grid-inner,
.woocommerce .owl-item > .product > .grid-inner {
	margin-bottom: 0;
}

/* Result count + ordering bar */
.woocommerce .woocommerce-result-count {
	float: left;
	margin: 0 0 20px;
	line-height: 36px;
	font-size: 14px;
	color: var(--cnvs-contrast-600, #777);
}

.woocommerce .woocommerce-ordering {
	float: right;
	margin: 0 0 20px;
}

.woocommerce .woocommerce-ordering select {
	padding: 6px 12px;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: 4px;
	font-size: 14px;
}

/* ── Product Card Image ────────────────────────────────────────── */

/* A store thumbnail is emitted with `width`/`height` ATTRIBUTES. Those are
   presentational hints, and since nothing else in the cascade declares a
   height for a loop card, the raw stored pixel height wins, while
   `.product .product-image img { width: 100% }` (style.css) stretches the
   image to the column width. The card image therefore renders squashed or
   stretched, at a height that has nothing to do with the layout (the single
   product page is already exempt: style.css releases its height). `height:
   auto` hands sizing back to the image's own proportions.

   `--cnvs-product-card-ratio` then lets a design pin the card box to a fixed
   ratio, so the card keeps its geometry whatever product-thumbnail size and
   cropping the site generates (both are per-site settings that travel with
   the store, not with the design). Set it on any ancestor of the cards:

       .my-shop { --cnvs-product-card-ratio: 400 / 467; }

   WHERE TO PIN IT: a design's product card is not only on the design's own
   shop PAGE. A store also has the canonical WooCommerce surfaces: the product
   archive (`/shop/`, product category/tag archives) and the product single's
   related/upsell carousels. Those render through the site's GLOBAL templates
   and therefore carry NO page wrapper class, so a pin scoped only to a page
   wrapper (`.my-shop`) silently stops at the archive and leaves the design's
   canonical store surface un-pinned. Pin on all three scopes:

       .my-shop,                          <- the design's own shop page/band
       .my-archive.canvas-woocommerce,    <- /shop/ + product term archives
       .my-single .product { … }          <- related/upsell carousel cards

   `<slug>-archive` and `<slug>-single` are the demo body classes added by
   inc/demos.php; `canvas-woocommerce` is added by the WooCommerce integration
   on `is_woocommerce()`, so the compound narrows `<slug>-archive` (which is on
   EVERY archive, including the blog) to the store archives only.

   The `revert-layer` FALLBACK is load-bearing, not decoration. Written bare,
   `var(--cnvs-product-card-ratio)` with the property unset is invalid at
   computed-value time, so `aspect-ratio` computes to its initial `auto`, and
   an author `aspect-ratio: auto` OVERRIDES the `aspect-ratio: auto <width> /
   <height>` presentational hint the browser derives from the image's own
   width/height attributes. That is harmless while the image supplies a
   natural ratio, but WordPress marks lazy images `sizes="auto"`, and the
   rendering spec size-CONTAINS those (`contain: size`), which strips their
   natural ratio permanently, before AND after they load. With the natural
   ratio and the attribute hint both gone, `height: auto` resolves against
   `contain-intrinsic-size`, which WordPress sets to `3000px 1500px`, so a
   square thumbnail renders as a 1500px-tall column.

   `revert-layer` rolls the property back to that presentational-hint layer,
   so an UNPINNED card is
   sized by its own width/height attributes: the correct per-image ratio,
   whatever thumbnail geometry the store generates. A pinned ratio still wins
   outright (the fallback is never reached), and a browser without cascade
   layers simply lands back on the previous `auto` behaviour.

   `object-fit` only bites once a ratio IS imposed (until then the box already
   matches the intrinsic ratio, making it a no-op), so `cover` is a safe
   default; `--cnvs-product-card-fit: contain` covers designs that letterbox
   the photo instead of cropping it. */
.product .product-image img {
	height: auto;
	aspect-ratio: var(--cnvs-product-card-ratio, revert-layer);
	object-fit: var(--cnvs-product-card-fit, cover);
}

/* Last line of defence for the `sizes="auto"` case above: an attachment with
   no width/height attributes (missing or broken metadata) leaves
   `revert-layer` nothing to recover, so a size-contained card image would
   still fall back to WordPress's 3000x1500 placeholder. Restate that
   placeholder as a card-sized square. It can only ever apply to a
   size-contained image that has no ratio at all (any ratio, pinned or
   attribute-derived, sizes the box instead) so it changes nothing that
   already renders correctly. The selector mirrors WordPress's own, at higher
   specificity, so stylesheet order does not matter. */
.product .product-image img:is([sizes="auto" i], [sizes^="auto," i]) {
	contain-intrinsic-size: 300px 300px;
}

/* ── Product Card Hover Overlay ────────────────────────────────── */

.product-image .bg-overlay .btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 16px;
	border-radius: 50%;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.3s ease;
}

.product-image:hover .bg-overlay .btn {
	opacity: 1;
	transform: translateY(0);
}

.product-image .bg-overlay .btn:nth-child(2) {
	transition-delay: 0.05s;
}

/*
 * The sale badge is styled entirely by style.css `.sale-flash` (placement) and
 * Bootstrap's `.badge` (typography); everything else (colour, padding, casing)
 * is stated per badge by the utility classes the card emits.
 */

/* ── Star Rating (Bootstrap Icons) ─────────────────────────────── */

.product-rating i {
	color: #f5c518;
	font-size: 14px;
}

.product-rating .bi-star {
	color: var(--cnvs-contrast-300, #ccc);
}

.woocommerce-product-rating .product-rating {
	display: inline-flex;
	gap: 1px;
}

/* ── Quantity Selector (+/- buttons) ───────────────────────────── */

/* The base .quantity component (style.css, token-driven via
   --cnvs-cart-quantity-*) owns display:inline-flex, cursor, border reset,
   .qty width (50px token default), text-align, the bg-color transition
   (with its prefers-reduced-motion guard), the 1rem button font-size, and
   the number-input spin-button reset. Only the compact-size overrides and
   the container border chrome are declared here. */
.woocommerce .quantity {
	align-items: center;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: 4px;
	overflow: hidden;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
	width: 36px;
	height: 36px;
	background: var(--cnvs-contrast-100, #f5f5f5);
	font-weight: 600;
	line-height: 1;
	color: var(--cnvs-contrast-700, #555);
}

.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover {
	background: var(--cnvs-contrast-200, #e5e5e5);
}

.woocommerce .quantity .qty {
	height: 36px;
	border-left: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-right: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	font-size: 14px;
	font-weight: 600;
	-moz-appearance: textfield;
}

/* ── Single Product ────────────────────────────────────────────── */

/* The meta card's own layout, colour and size come from `.product-meta` in
   style.css: one inline-block run of SKU / category / tags. Only the link
   colour is restated, because the category and tag links are WordPress term
   links and pick up the editor's link colour otherwise. */
.single-product .product-meta .card-body a {
	color: var(--cnvs-themecolor, #1abc9c);
}

.woocommerce-tabs .tab-pane table.shop_attributes {
	width: 100%;
}

.woocommerce-tabs .tab-pane table.shop_attributes th {
	font-weight: 600;
	padding: 8px 12px;
	width: 150px;
}

.woocommerce-tabs .tab-pane table.shop_attributes td {
	padding: 8px 12px;
}

/* ── Quick View Modal ──────────────────────────────────────────── */

.shop-quick-view-ajax .modal-padding {
	padding: 30px;
}

.shop-quick-view-ajax .product-image {
	position: relative;
}

.shop-quick-view-ajax .product-desc {
	padding-top: 0;
}

.shop-quick-view-ajax .product-price {
	font-size: 20px;
}

.shop-quick-view-ajax .cart {
	display: flex;
	align-items: center;
	gap: 10px;
}

.shop-quick-view-ajax .add-to-cart.button {
	white-space: nowrap;
}

/* ── Cart Page ─────────────────────────────────────────────────── */

.woocommerce table.cart .product-remove a {
	color: #c00;
	font-size: 18px;
}

.woocommerce table.cart .product-thumbnail img {
	width: 64px;
	height: auto;
}

.woocommerce table.cart td {
	vertical-align: middle;
}

/* ── Checkout ──────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce-input-wrapper {
	width: 100%;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: 4px;
}

/* ── Notices ───────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 12px 20px;
	margin-bottom: 20px;
	border-radius: 4px;
	border-left: 4px solid;
}

.woocommerce-message {
	background: #f0faf4;
	border-left-color: #1abc9c;
}

.woocommerce-info {
	background: #f0f6ff;
	border-left-color: #3498db;
}

.woocommerce-error {
	background: #fdf2f2;
	border-left-color: #e74c3c;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		text-align: center;
	}

	.woocommerce .woocommerce-ordering {
		margin-top: 10px;
	}
}

/* ── WooCommerce-generated Forms ───────────────────────────────────
 *
 * Canvas owns 100% of the shop's presentation: WooCommerce's own
 * stylesheets are dequeued (see WooCommerce\Integration::
 * dequeue_woocommerce_styles()). Canvas blocks style the shop, cart and
 * checkout themselves, but pages rendered from WooCommerce's OWN templates
 * (My Account login/register/lost-password, and any core form markup) ship
 * bare `.form-row` / `.input-text` markup. These rules give that markup the
 * Canvas form treatment, reusing the same tokens as the theme's own inputs.
 */

.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 20px;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--cnvs-contrast-800, #333);
}

.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
	border: 0;
	color: var(--bs-danger, #dc3545);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: var(--cnvs-form-control-radius, var(--bs-border-radius));
	background-color: var(--cnvs-contrast-0, #fff);
	color: var(--cnvs-contrast-800, #333);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea {
	min-height: 120px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 0.2rem rgba(var(--cnvs-themecolor-rgb), 0.15);
	outline: 0;
}

/* Inline checkbox rows (Remember me, consent…) sit on one line. */
.woocommerce form .form-row.woocommerce-form-login__rememberme,
.woocommerce-page form .form-row.woocommerce-form-login__rememberme,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-page form .form-row label.woocommerce-form__label-for-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	font-weight: 400;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce-page form .form-row input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* Two-column rows on wider screens (First/Last name, City/Postcode…). */
@media (min-width: 768px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-first,
	.woocommerce-page form .form-row-last {
		display: inline-flex;
		width: calc(50% - 10px);
		vertical-align: top;
	}

	.woocommerce form .form-row-first,
	.woocommerce-page form .form-row-first {
		margin-right: 16px;
	}
}

/* Auth panels (login / register / lost password). */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 480px;
	padding: 30px;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: var(--wp--custom--canvas--radius--xl, 0.4rem);
	background-color: var(--cnvs-contrast-0, #fff);
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
	margin: 16px 0 0;
}

/* Account dashboard: navigation beside the panel content. */
@media (min-width: 992px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 25%;
		padding-right: 30px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 75%;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cnvs-contrast-200, #e5e5e5);
	border-radius: var(--wp--custom--canvas--radius--xl, 0.4rem);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--cnvs-contrast-200, #e5e5e5);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	color: var(--cnvs-contrast-700, #555);
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--cnvs-contrast-100, #f5f5f5);
	color: var(--cnvs-themecolor);
}

/* WooCommerce's own submit buttons adopt the Canvas button look. */
.woocommerce form button.button,
.woocommerce form input.button,
.woocommerce-page form button.button,
.woocommerce-page form input.button {
	padding: 10px 22px;
	border: 0;
	border-radius: var(--bs-border-radius);
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-contrast-0, #fff);
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.woocommerce form button.button:hover,
.woocommerce form input.button:hover,
.woocommerce-page form button.button:hover,
.woocommerce-page form input.button:hover {
	opacity: 0.85;
	color: var(--cnvs-contrast-0, #fff);
}

/* Password visibility toggle: WooCommerce injects
 * `<span class="password-input"><input …><span class="show-password-input">`
 * with JS and normally paints the eye from its own sprite. Canvas owns the
 * shop's CSS, so draw it from the theme's Bootstrap Icons font instead. */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	position: relative;
	display: block;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	color: var(--cnvs-contrast-500, #999);
	cursor: pointer;
	line-height: 1;
}

.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	content: "\f341"; /* bi-eye */
	font-family: bootstrap-icons;
	font-size: 1rem;
}

.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
	content: "\f340"; /* bi-eye-slash */
}

.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover {
	color: var(--cnvs-themecolor);
}