/**
 * WPGPL.store — shop archive, product cards, single product and cart.
 */

/* --------------------------------------------------------------------------
 * Product loop — WoodMart's own card markup
 * ----------------------------------------------------------------------- */

/* `.wpgpl-shop-loop` wraps the native WooCommerce product loop. */
.wpgpl-shop-loop {
	display: grid;
	grid-template-columns: repeat(var(--wpgpl-cols, 4), minmax(0, 1fr));
	gap: 22px;
}

.wpgpl-shop-loop > .wd-product,
.wpgpl-shop-loop > .product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

.wpgpl-shop-loop, .woocommerce ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
}

.wpgpl-shop-loop, .woocommerce ul.products li.product,
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

.wpgpl-shop-loop .wd-product .wd-product-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wpgpl-white);
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
	box-shadow: var(--wpgpl-shadow-xs);
	transition: box-shadow var(--wpgpl-dur) var(--wpgpl-ease), transform var(--wpgpl-dur) var(--wpgpl-ease),
		border-color var(--wpgpl-dur) var(--wpgpl-ease);
}

.wpgpl-shop-loop .wd-product:hover .wd-product-wrapper {
	border-color: var(--wpgpl-border-strong);
	box-shadow: var(--wpgpl-shadow-md);
	transform: translateY(-3px);
}

.wpgpl-shop-loop .wd-product .wd-product-thumb {
	aspect-ratio: 4 / 3;
	background: var(--wpgpl-surface-alt);
	border-radius: 0;
	overflow: hidden;
}

.wpgpl-shop-loop .wd-product .wd-product-img-link,
.wpgpl-shop-loop .wd-product .wd-product-img-link img {
	display: block;
	width: 100%;
	height: 100%;
}

.wpgpl-shop-loop .wd-product .wd-product-img-link img {
	object-fit: cover;
	transition: transform 420ms var(--wpgpl-ease);
}

.wpgpl-shop-loop .wd-product:hover .wd-product-img-link img {
	transform: scale(1.04);
}

.wpgpl-shop-loop .wd-product .product-element-bottom {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 16px 18px 18px;
}

.wpgpl-shop-loop .wd-product .wd-entities-title {
	margin: 0;
	padding: 0;
	font-family: var(--wpgpl-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.34;
	color: var(--wpgpl-text);
	text-transform: none;
	letter-spacing: -0.01em;
}

.wpgpl-shop-loop .wd-product .wd-entities-title a {
	color: inherit;
	text-decoration: none;
}

.wpgpl-shop-loop .wd-product .wd-entities-title a:hover {
	color: var(--wpgpl-primary);
}

.wpgpl-shop-loop .wd-product .wd-product-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
	color: var(--wpgpl-text-soft);
}

.wpgpl-shop-loop .wd-product .wd-product-cats a {
	color: inherit;
	text-decoration: none;
}

.wpgpl-shop-loop .wd-product .wd-product-cats a:hover {
	color: var(--wpgpl-primary);
}

.wpgpl-shop-loop .wd-product .price {
	display: block;
	margin: auto 0 0;
	padding: 4px 0 0;
	font-family: var(--wpgpl-font-heading);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--wpgpl-text);
	line-height: 1.25;
}

.wpgpl-shop-loop .wd-product .price del {
	font-size: 0.84rem;
	font-weight: 400;
	color: var(--wpgpl-text-soft);
	margin-right: 6px;
	opacity: 1;
}

.wpgpl-shop-loop .wd-product .price ins {
	text-decoration: none;
	color: var(--wpgpl-accent);
}

/* Hide WooCommerce's decorative noise on cards. */
.wpgpl-shop-loop .wd-product .wd-product-stock,
.wpgpl-shop-loop .wd-product .star-rating,
.wpgpl-shop-loop .wd-product .wd-product-brands,
.wpgpl-shop-loop .wd-product .wd-sku,
.wpgpl-shop-loop .wd-product .wd-product-excerpt,
.wpgpl-shop-loop .wd-product .wd-swatches,
.wpgpl-shop-loop .wd-product .wd-add-btn,
.wpgpl-shop-loop .wd-product .wd-buttons {
	display: none !important;
}

/* My own meta line + membership badge inside the WoodMart card. */
.wpgpl-shop-loop .wd-product .wpgpl-pcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 2px 0 0;
	padding: 0;
}

.wpgpl-shop-loop .wd-product .wpgpl-pcard__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.76rem;
	color: var(--wpgpl-text-muted);
}

.wpgpl-shop-loop .wd-product .wpgpl-pcard__meta svg {
	width: 13px;
	height: 13px;
	opacity: 0.7;
}

.wpgpl-shop-loop .wd-product .wpgpl-badge {
	align-self: flex-start;
	margin-top: 4px;
}

/* Standard WooCommerce card styling (used when the theme loop is bypassed). */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wpgpl-white);
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
	box-shadow: var(--wpgpl-shadow-xs);
	transition: box-shadow var(--wpgpl-dur) var(--wpgpl-ease), transform var(--wpgpl-dur) var(--wpgpl-ease),
		border-color var(--wpgpl-dur) var(--wpgpl-ease);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wpgpl-border-strong);
	box-shadow: var(--wpgpl-shadow-md);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wpgpl-surface-alt);
	transition: transform 420ms var(--wpgpl-ease);
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 16px 18px 0;
	margin: 0;
	font-family: var(--wpgpl-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.34;
	color: var(--wpgpl-text);
	text-transform: none;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 18px 16px;
	margin: 0;
	color: var(--wpgpl-text);
	font-family: var(--wpgpl-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
}

.woocommerce ul.products li.product .price del {
	color: var(--wpgpl-text-soft);
	font-weight: 400;
	font-size: 0.85rem;
	margin-right: 6px;
	opacity: 1;
}

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

.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin: 14px 16px 18px;
	width: calc(100% - 32px);
	padding: 11px 16px;
	font-family: var(--wpgpl-font-heading);
	font-weight: 600;
	font-size: 0.82rem;
	border-radius: var(--wpgpl-radius-sm);
	text-align: center;
}

@media (max-width: 1280px) {
	.woodmart-products-loop,
	.wpgpl-shop-loop, .woocommerce ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.woodmart-products-loop,
	.wpgpl-shop-loop, .woocommerce ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
 * Product placeholder (no image)
 * ----------------------------------------------------------------------- */

.wpgpl-pcard__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(135deg, var(--wpgpl-primary-light) 0%, var(--wpgpl-surface) 100%);
	color: var(--wpgpl-primary);
}

.wpgpl-pcard__placeholder svg {
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
 * Shop header / toolbar
 * ----------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb,
.woodmart-breadcrumbs {
	margin-bottom: 8px;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
	font-family: var(--wpgpl-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wpgpl-text);
}

.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0 22px;
	margin: 0;
}

.woocommerce .woocommerce-ordering select,
.wd-toolbar .wd-select {
	border-radius: var(--wpgpl-radius-sm);
	border-color: var(--wpgpl-border-strong);
	font-size: 0.88rem;
	color: var(--wpgpl-text);
}

.woodmart-product-grid-layout,
.woocommerce .wd-shop-tools {
	gap: 10px;
}

/* Sidebar */
.woocommerce .wd-sidebar,
.woocommerce-page .wd-sidebar {
	font-size: 0.92rem;
}

.woocommerce .widget {
	padding: 20px;
	margin-bottom: 18px;
	background: var(--wpgpl-white);
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
	box-shadow: var(--wpgpl-shadow-xs);
}

.woocommerce .widget .widget-title,
.woocommerce .widget h2,
.woocommerce .widget h3 {
	font-family: var(--wpgpl-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wpgpl-text);
	margin: 0 0 14px;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
 * Single product
 * ----------------------------------------------------------------------- */

.single-product div.product .woocommerce-product-gallery {
	margin-bottom: 0;
}

.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--wpgpl-radius);
	background: var(--wpgpl-surface-alt);
}

.single-product div.product .summary > .product_title,
.single-product .wd-single-product .product_title {
	font-family: var(--wpgpl-font-heading);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.18;
	color: var(--wpgpl-text);
	margin: 0 0 14px;
}

.single-product div.product .summary > .price,
.single-product .wd-single-product .price {
	font-family: var(--wpgpl-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--wpgpl-text);
	margin: 16px 0;
}

.single-product div.product .summary > .price del {
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--wpgpl-text-soft);
	margin-right: 10px;
}

.single-product div.product .summary > .price ins {
	text-decoration: none;
	color: var(--wpgpl-accent);
}

/* Meta strip under the title */
.wpgpl-summary-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.wpgpl-summary-meta li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.85rem;
	color: var(--wpgpl-text-muted);
}

.wpgpl-summary-meta li svg {
	width: 16px;
	height: 16px;
	color: var(--wpgpl-text-soft);
	flex: none;
}

.wpgpl-summary-meta li.wpgpl-summary-meta__member {
	color: var(--wpgpl-primary);
	font-weight: 600;
}

.wpgpl-summary-meta li.wpgpl-summary-meta__member svg {
	color: var(--wpgpl-primary);
}

/* Tabs */
.single-product div.product .woocommerce-tabs,
.wd-single-product .wd-tabs {
	margin-top: 46px;
}

.single-product div.product .woocommerce-tabs ul.tabs,
.woocommerce .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0;
	border-bottom: 1px solid var(--wpgpl-border);
}

.single-product div.product .woocommerce-tabs ul.tabs li,
.woocommerce .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce .woocommerce-tabs ul.tabs li::before,
.woocommerce .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li a,
.woocommerce .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 18px;
	border-radius: var(--wpgpl-radius-sm) var(--wpgpl-radius-sm) 0 0;
	font-family: var(--wpgpl-font-heading);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wpgpl-text-muted);
	text-decoration: none;
	transition: color var(--wpgpl-dur) var(--wpgpl-ease), background-color var(--wpgpl-dur) var(--wpgpl-ease);
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce .woocommerce-tabs ul.tabs li.active a {
	color: var(--wpgpl-primary);
	background: var(--wpgpl-primary-light);
}

.single-product div.product .woocommerce-tabs .panel,
.woocommerce .woocommerce-tabs .panel {
	padding: 26px 0 0;
	font-size: 0.96rem;
	line-height: 1.72;
	color: var(--wpgpl-text);
}

.wpgpl-info-table {
	width: 100%;
	border-collapse: collapse;
}

.wpgpl-info-table th,
.wpgpl-info-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--wpgpl-border);
	font-size: 0.92rem;
}

.wpgpl-info-table th {
	width: 210px;
	font-weight: 600;
	color: var(--wpgpl-text-muted);
	font-family: var(--wpgpl-font-heading);
	background: var(--wpgpl-surface);
}

.wpgpl-info-table tr:last-child th,
.wpgpl-info-table tr:last-child td {
	border-bottom: 0;
}

/* Buy buttons */
.single-product form.cart .single_add_to_cart_button {
	padding: 15px 30px;
	font-family: var(--wpgpl-font-heading);
	font-weight: 600;
	border-radius: var(--wpgpl-radius-sm);
	background: var(--wpgpl-primary);
	border-color: var(--wpgpl-primary);
}

.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--wpgpl-primary-dark);
	border-color: var(--wpgpl-primary-dark);
}

/*
 * WoodMart's secondary "Buy now" button (add to cart + straight to checkout).
 * The demo install left it on the accent green, which is off-brand next to the
 * primary blue, so it is re-skinned as a quiet outlined secondary action.
 */
.single-product form.cart .wd-buy-now-btn {
	padding: 15px 26px;
	font-family: var(--wpgpl-font-heading);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	border-radius: var(--wpgpl-radius-sm);
	color: var(--wpgpl-primary);
	background: transparent;
	border: 1px solid var(--wpgpl-border-strong);
	box-shadow: none;
	transition: border-color var(--wpgpl-dur) var(--wpgpl-ease), color var(--wpgpl-dur) var(--wpgpl-ease), background-color var(--wpgpl-dur) var(--wpgpl-ease);
}

.single-product form.cart .wd-buy-now-btn:hover,
.single-product form.cart .wd-buy-now-btn:active {
	color: var(--wpgpl-primary-dark);
	background: var(--wpgpl-primary-light);
	border-color: var(--wpgpl-primary);
	box-shadow: none;
}

.single-product .product_meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--wpgpl-border);
	font-size: 0.84rem;
	color: var(--wpgpl-text-muted);
}

/* --------------------------------------------------------------------------
 * Cart & checkout
 * ----------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--wpgpl-shadow-xs);
}

.woocommerce table.shop_table th {
	padding: 15px 18px;
	background: var(--wpgpl-surface);
	font-family: var(--wpgpl-font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpgpl-text-muted);
	border-bottom: 1px solid var(--wpgpl-border);
}

.woocommerce table.shop_table td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--wpgpl-border);
	font-size: 0.92rem;
	color: var(--wpgpl-text);
}

.woocommerce table.shop_table td.product-thumbnail img {
	border-radius: var(--wpgpl-radius-sm);
	width: 72px;
}

.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce .cart-collaterals .cart_totals {
	padding: 26px;
	background: var(--wpgpl-surface);
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
}

.cart_totals h2,
#order_review_heading {
	font-family: var(--wpgpl-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wpgpl-text);
}

.woocommerce .cart_totals table th,
.woocommerce-checkout-review-order-table th {
	font-weight: 500;
	color: var(--wpgpl-text-muted);
}

.woocommerce .cart_totals table td,
.woocommerce-checkout-review-order-table td {
	font-weight: 600;
	color: var(--wpgpl-text);
}

.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 12px 14px;
}

@media (max-width: 768px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--wpgpl-border);
	}

	.woocommerce table.shop_table td {
		border: 0;
		padding: 6px 16px;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		display: block;
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wpgpl-text-soft);
	}

	.woocommerce table.shop_table td.product-thumbnail::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Buttons used by our cards
 * ----------------------------------------------------------------------- */

.wpgpl-add-to-cart {
	position: relative;
}

.wpgpl-add-to-cart.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.wpgpl-add-to-cart.is-added {
	background: var(--wpgpl-success);
	border-color: var(--wpgpl-success);
}

.wpgpl-btn.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Toasts
 * ----------------------------------------------------------------------- */

.wpgpl-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.wpgpl-toast {
	padding: 14px 20px;
	border-radius: var(--wpgpl-radius-sm);
	background: var(--wpgpl-dark);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: var(--wpgpl-shadow-lg);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 240ms var(--wpgpl-ease), transform 240ms var(--wpgpl-ease);
}

.wpgpl-toast--error {
	background: var(--wpgpl-accent);
}

.wpgpl-toast--success {
	background: var(--wpgpl-success);
}

.wpgpl-toast.is-out {
	opacity: 0;
	transform: translateY(8px);
}

@media (max-width: 480px) {
	.wpgpl-toasts {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
}

/* --------------------------------------------------------------------------
 * Wishlist / compare leftovers
 * ----------------------------------------------------------------------- */

.wd-compare-container,
.wd-compare-trigger {
	display: none;
}