/**
 * Ghost Note — WooCommerce layer.
 *
 * WooCommerce loads its own stylesheets (woocommerce-layout, -smallscreen and
 * woocommerce.css), which already handle most presentation. This file only
 * replaces the float-based product grid with CSS Grid and adds the few bits of
 * structure the theme's own markup introduces. Nothing here is decorative.
 */

/* Header cart link. */
.gn-cart-link {
	text-decoration: none;
	white-space: nowrap;
}

.gn-cart-count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 0.4em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-align: center;
	font-size: 0.75em;
	line-height: 1.6;
}

/*
 * Product grid. Replaces WooCommerce's float/percentage columns so the number
 * of columns follows loop_shop_columns without brittle width math.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(var(--gn-product-columns, 4), minmax(0, 1fr));
	gap: var(--gn-product-gap, 32px);
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
	clear: none;
}

.woocommerce ul.products.columns-1 { --gn-product-columns: 1; }
.woocommerce ul.products.columns-2 { --gn-product-columns: 2; }
.woocommerce ul.products.columns-3 { --gn-product-columns: 3; }
.woocommerce ul.products.columns-4 { --gn-product-columns: 4; }
.woocommerce ul.products.columns-5 { --gn-product-columns: 5; }
.woocommerce ul.products.columns-6 { --gn-product-columns: 6; }

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--gn-product-columns: 3;
	}
}

@media (max-width: 782px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--gn-product-columns: 2;
		--gn-product-gap: 20px;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--gn-product-columns: 1;
	}
}

/* -------------------------------------------------------------------------
 * Product card
 *
 * White card, hairline ring and soft shadow, 10px radius. Title + category
 * pills on top, tinted image panel in the middle, price + cart in a footer row.
 * ---------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: var(--gn-radius);
	box-shadow: var(--gn-ring);
	text-align: left;
	transition: box-shadow var(--gn-dur) var(--gn-ease), transform var(--gn-dur) var(--gn-ease);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--gn-ring-hover);
	transform: translateY(-4px);
}

/* WooCommerce wraps the head/media in one anchor; make it the card column. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* Head: title + category pills */
.gn-card__head {
	padding: 18px 20px 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: var(--gn-tracking-tight);
	color: var(--gn-text);
}

.gn-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 9px;
}

.gn-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--gn-radius-sm);
	background: rgba(9, 30, 56, 0.05);
	color: var(--gn-text);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Media panel */
.gn-card__media {
	position: relative;
	overflow: hidden;
	background: var(--gn-panel);
	border-top: 1px solid rgba(9, 30, 56, 0.06);
	border-bottom: 1px solid rgba(9, 30, 56, 0.06);
}

.woocommerce ul.products li.product .gn-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 6 / 7;
	object-fit: cover;
	margin: 0;
	transition: transform var(--gn-dur) var(--gn-ease);
}

.woocommerce ul.products li.product:hover .gn-card__media img {
	transform: scale(1.04);
}

/* Footer: price left, cart right */
.gn-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px 16px;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 7px;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--gn-tracking-tight);
	color: var(--gn-text);
}

.woocommerce ul.products li.product .price del {
	margin: 0;
	opacity: 0.45;
	font-size: 0.85em;
	font-weight: 500;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--gn-accent-dark);
}

/*
 * Footer controls become compact circular icon buttons, as in the reference.
 * Labels are pushed out of view with text-indent rather than display:none so
 * screen readers still announce "Add to cart" / "Add to Wishlist".
 */
.gn-card__foot > .price {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce ul.products li.product .gn-card__foot .button,
.woocommerce ul.products li.product .gn-card__foot .added_to_cart {
	flex: 0 0 auto;
	display: inline-block;
	width: 40px;
	height: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--gn-radius-pill);
	background-color: rgba(9, 30, 56, 0.05);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091e38' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.55L21 7H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	color: transparent;
	font-size: 0;
	text-indent: -999em;
	white-space: nowrap;
	transition: background-color var(--gn-dur-micro) ease-in-out;
}

.woocommerce ul.products li.product .gn-card__foot .button:hover,
.woocommerce ul.products li.product .gn-card__foot .added_to_cart:hover {
	background-color: var(--gn-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.55L21 7H6'/%3E%3C/svg%3E");
}

.woocommerce ul.products li.product .gn-card__foot .button.loading::after {
	top: 50%;
	right: auto;
	left: 50%;
	margin: -8px 0 0 -8px;
	color: var(--gn-text);
}

/*
 * On narrow cards the price has almost no room beside two 40px controls, so
 * give it its own row and let the buttons sit beneath it.
 */
@media (max-width: 600px) {
	.gn-card__foot {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 10px;
	}

	.gn-card__foot > .price {
		flex: 1 0 100%;
	}
}

/* Wishlist control from TI, matched to the cart button. */
.gn-card__foot .tinv-wraper {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.gn-card__foot .tinvwl_add_to_wishlist_button {
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--gn-radius-pill);
	background: rgba(9, 30, 56, 0.05);
	color: var(--gn-text);
	font-size: 16px;
	line-height: 1;
	transition: background var(--gn-dur-micro) ease-in-out, color var(--gn-dur-micro) ease-in-out;
}

.gn-card__foot .tinvwl_add_to_wishlist_button:hover {
	background: var(--gn-accent);
	color: #fff;
}

/*
 * TI puts its label in .tinvwl_add_to_wishlist-text. The anchor already carries
 * aria-label="Add to Wishlist", so hiding the visible span costs nothing for
 * assistive tech and keeps the control to a clean 40px circle.
 */
.gn-card__foot .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text,
.gn-card__foot .tinvwl_add_to_wishlist_button .tinvwl-txt {
	display: none !important;
}

.gn-card__foot .tinvwl-wishlist-clear,
.gn-card__foot .tinv-wishlist-clear {
	display: none;
}

/* Rating sits quietly under the title. */
.woocommerce ul.products li.product .star-rating {
	margin: 8px 20px 0;
	font-size: 0.78rem;
	color: var(--gn-accent);
}

/* Sale flash */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	/* WooCommerce pins this to `right: 0`; without resetting it the badge is
	   anchored to both edges and stretches across the card. */
	right: auto;
	bottom: auto;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 4px 11px;
	border-radius: var(--gn-radius-sm);
	background: var(--gn-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.6;
}

/* Wishlist / quick-view buttons that plugins drop into the footer. */
.gn-card__foot .tinvwl_add_to_wishlist_button {
	margin: 0 !important;
	color: var(--gn-muted);
}

/* Keep product images from jumping before they load. */
.woocommerce ul.products li.product .gn-card__media img {
	margin-bottom: 0;
}

/*
 * Elementor's WooCommerce widgets render their own product grids and manage
 * their own columns. Do not impose the theme grid on them.
 */
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-archive-products ul.products {
	display: block;
}