/**
 * Paripoorn WooCommerce
 * Visual layer only — structure comes from WooCommerce hooks/templates.
 * We deliberately avoid overriding markup we don't need to; this file
 * restyles WooCommerce's own output to match the brand.
 */

.pp-shop-header {
	background: var(--pp-bg-soft);
	padding-block: var(--pp-space-10);
	margin-bottom: var(--pp-space-10);
	text-align: center;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	/* minmax(0, 1fr), not plain 1fr: a 1fr track has an implicit
	   min-width:auto, so any card whose content refuses to shrink (a long
	   product title, the ADD TO CART button) widens the whole grid past
	   its container and the page scrolls sideways. minmax(0, …) lets the
	   track shrink and the content wrap instead. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pp-space-6);
	margin: 0;
}

/* Same reason, one level down: a grid item is also min-width:auto by
   default, so the card itself must be allowed to shrink. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	min-width: 0;
}

@media (max-width: 1023px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pp-space-4);
	}
}

/*
 * Phones: two columns leave roughly 120px of usable width inside each
 * card once the 20px card padding is removed, which is narrower than the
 * "ADD TO CART" button and pushed the grid past the viewport edge. One
 * column per row instead — minmax(0, 1fr) so a long product title can
 * never force a track wider than its share of the container.
 */
@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pp-space-4);
	}
}

/* WooCommerce's woocommerce-layout.css lays the product loop out with
   floats and percentage widths ("ul.products li.product { float: left;
   width: 22.05%; margin: 0 3.8% 2.992em 0 }", plus .columns-N variants
   going as narrow as 13.5%). Those must be reset explicitly — the grid
   on ul.products above can't size its items while they carry a fixed
   percentage width, which squeezed every card to a fraction of its
   column. Its ::before/::after clearfix (display: table) also becomes a
   real grid item, consuming cells and pushing the 4th card onto a new
   row, so both are removed here too. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	list-style: none;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

/* content-product.php renders .pp-product-card directly, so the legacy
   WooCommerce inner elements are visually neutralized rather than
   duplicated. */
.woocommerce ul.products li.product .pp-product-card {
	height: 100%;
}

.woocommerce-result-count,
.woocommerce-ordering {
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
}

.woocommerce-pagination {
	margin-top: var(--pp-space-12);
	display: flex;
	justify-content: center;
}

.woocommerce-pagination ul {
	display: flex;
	gap: var(--pp-space-2);
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--pp-space-2);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-sm);
	font-size: var(--pp-fs-small);
	transition: color var(--pp-transition), border-color var(--pp-transition), background-color var(--pp-transition);
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
	background: var(--pp-primary);
	color: var(--pp-light-text);
	border-color: var(--pp-primary);
}

/* Single product */
.pp-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pp-space-16);
	padding-block: var(--pp-section-space);
}

@media (max-width: 1023px) {
	.pp-product {
		grid-template-columns: 1fr;
		gap: var(--pp-space-8);
	}
}

/* WooCommerce's own product gallery (flexslider + zoom/lightbox via
   wc-product-gallery-* theme support declared in inc/theme-setup.php),
   restyled rather than reimplemented. */
.woocommerce-product-gallery {
	margin-bottom: var(--pp-space-4);
}

.woocommerce-product-gallery__wrapper {
	border-radius: var(--pp-radius-md);
	overflow: hidden;
	background: var(--pp-bg-soft);
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--pp-radius-md);
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-3);
	margin-top: var(--pp-space-4);
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	width: 76px;
}

.flex-control-thumbs img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: var(--pp-radius-sm);
	border: 1px solid var(--pp-border);
	cursor: pointer;
	transition: border-color var(--pp-transition), opacity var(--pp-transition);
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
	border-color: var(--pp-primary);
}

.pp-product__title {
	margin-bottom: var(--pp-space-3);
}

.pp-product__rating {
	margin-bottom: var(--pp-space-4);
}

.pp-product__price {
	font-size: 1.5rem;
	margin-bottom: var(--pp-space-5);
}

.pp-product__short-description {
	color: var(--pp-text);
	margin-bottom: var(--pp-space-6);
}

/* WooCommerce's own add-to-cart form (form.cart) and quantity input
   (div.quantity, global/quantity-input.php) — restyled, not reimplemented. */
.pp-product__summary form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-6);
	flex-wrap: wrap;
}

.pp-product__summary .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--pp-input-border);
	border-radius: var(--pp-radius-sm);
	overflow: hidden;
}

.pp-product__summary .quantity input.qty {
	width: 56px;
	height: 48px;
	border: 0;
	text-align: center;
	padding: 0;
}

.pp-product__meta-row {
	display: flex;
	gap: var(--pp-space-6);
	padding-top: var(--pp-space-5);
	border-top: 1px solid var(--pp-border);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
}

/* Product data tabs — WooCommerce's own markup/JS (wc-single-product),
   restyled to match the brand rather than reimplemented. */
.woocommerce-tabs {
	margin-block: var(--pp-space-4) 0;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--pp-space-8);
	border-bottom: 1px solid var(--pp-border);
	margin-bottom: var(--pp-space-8);
	list-style: none;
	padding: 0;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: var(--pp-space-4);
	font-family: var(--pp-font-heading);
	font-size: 1.0625rem;
	color: var(--pp-muted);
	border-bottom: 2px solid transparent;
	transition: color var(--pp-transition), border-color var(--pp-transition);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--pp-heading);
	border-color: var(--pp-primary);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	color: var(--pp-text);
	line-height: 1.7;
}

.pp-related-products {
	padding-block: var(--pp-section-space);
	border-top: 1px solid var(--pp-border);
}

/* Cart */
.pp-cart-table {
	width: 100%;
}

.pp-cart-table th {
	text-align: left;
	font-family: var(--pp-font-body);
	font-weight: var(--pp-weight-label);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: var(--pp-space-4);
	border-bottom: 1px solid var(--pp-border);
}

.pp-cart-table td {
	padding-block: var(--pp-space-5);
	border-bottom: 1px solid var(--pp-border);
	vertical-align: middle;
}

.pp-cart-table img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--pp-radius-sm);
}

.pp-cart-totals {
	background: var(--pp-bg-soft);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-8);
}

.pp-cart-totals table {
	width: 100%;
}

.pp-cart-totals td, .pp-cart-totals th {
	padding-block: var(--pp-space-3);
}

/* Mini cart */
.widget_shopping_cart_content .woocommerce-mini-cart {
	max-height: 60vh;
	overflow-y: auto;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item {
	display: flex;
	gap: var(--pp-space-3);
	padding-block: var(--pp-space-3);
	border-bottom: 1px solid var(--pp-border);
}

/* Checkout */
.woocommerce-checkout .form-row label {
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	margin-bottom: var(--pp-space-2);
	display: block;
}

#order_review {
	background: var(--pp-bg-soft);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-8);
}

/* My account */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	border-right: 1px solid var(--pp-border);
	padding-right: var(--pp-space-6);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--pp-space-3) var(--pp-space-4);
	border-radius: var(--pp-radius-sm);
	font-size: 0.9375rem;
	transition: background-color var(--pp-transition), color var(--pp-transition);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
	background: var(--pp-bg-soft);
	color: var(--pp-primary);
}

.woocommerce-MyAccount-content {
	padding-left: var(--pp-space-8);
}

@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid var(--pp-border);
		padding-right: 0;
		padding-bottom: var(--pp-space-4);
		margin-bottom: var(--pp-space-4);
	}

	.woocommerce-MyAccount-content {
		padding-left: 0;
	}
}

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	background: var(--pp-bg-soft);
	border-left: 3px solid var(--pp-primary);
	border-radius: var(--pp-radius-sm);
	padding: var(--pp-space-4) var(--pp-space-5);
	list-style: none;
	margin-bottom: var(--pp-space-6);
	font-size: var(--pp-fs-small);
	display: flex;
	align-items: center;
	/* flex-start, not space-between: the latter pushed a notice's button
	   to the opposite edge from its text, reading as two unrelated
	   elements rather than one message. */
	justify-content: flex-start;
	gap: var(--pp-space-3);
	flex-wrap: wrap;
}

.woocommerce-error {
	border-left-color: var(--pp-sale);
}

/*
 * Buttons keep their authored position in the notice.
 *
 * `order: 2` used to force every notice button to the end regardless of
 * where WooCommerce put it. That broke notices built as
 * "<button> text" — most visibly the account "Confirm email address"
 * notice — by tearing the action away from the sentence it belongs to.
 * Source order is already correct in every WooCommerce notice, so
 * nothing needs reordering here.
 */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	flex-shrink: 0;
}

/* Star rating (WooCommerce default markup, restyled) */
.star-rating {
	color: var(--pp-accent);
	font-size: var(--pp-fs-small);
}

.stock.out-of-stock {
	color: var(--pp-out-of-stock);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
}

.stock.in-stock {
	color: var(--pp-success);
	font-size: var(--pp-fs-small);
}

/* ----------------------------------------------------------------------
 * Cart page — premium redesign
 * woocommerce/cart/cart.php is a theme override (card layout instead of
 * a <table> per item) but keeps every WooCommerce hook, field name, and
 * nonce unchanged, so quantity updates/coupons/AJAX totals work exactly
 * as WooCommerce ships them. cart-totals.php, cross-sells.php, and the
 * checkout button are WooCommerce's own unmodified templates, styled
 * here by their default class names only.
 *
 * Every selector below is prefixed with .woocommerce-cart (the body
 * class WooCommerce adds on this page) specifically to out-rank
 * WooCommerce's own plugin CSS — its default button/table rules
 * (assets/css/woocommerce.css) use long combined selectors like
 * ".woocommerce a.button.alt" that otherwise win over a plain
 * ".checkout-button" rule despite loading first, which is why the
 * checkout button kept rendering in WooCommerce's default purple
 * (#7f54b3) instead of the theme's primary color no matter what this
 * file said — this was a specificity loss, not a caching issue.
 * -------------------------------------------------------------------- */

.woocommerce-cart .pp-cart-form {
	margin-bottom: var(--pp-space-10);
}

.woocommerce-cart .pp-cart-items {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-4);
}

.woocommerce-cart .pp-cart-item {
	display: grid;
	grid-template-columns: 108px 1fr auto auto;
	align-items: center;
	gap: var(--pp-space-6);
	background: var(--pp-bg-card);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-5);
	position: relative;
	box-shadow: var(--pp-shadow-sm);
	transition: box-shadow var(--pp-transition), border-color var(--pp-transition);
}

.pp-animations-on.woocommerce-cart .pp-cart-item:hover {
	box-shadow: var(--pp-shadow-md);
	border-color: var(--pp-accent);
}

.woocommerce-cart .pp-cart-item__thumbnail img {
	width: 108px;
	height: 108px;
	object-fit: cover;
	border-radius: var(--pp-radius-md);
	display: block;
}

.woocommerce-cart .pp-cart-item__details {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	min-width: 0;
}

.woocommerce-cart .pp-cart-item__name {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-h6);
	color: var(--pp-heading);
	line-height: 1.3;
}

.woocommerce-cart .pp-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-cart .pp-cart-item__name a:hover {
	color: var(--pp-primary);
}

.woocommerce-cart .pp-cart-item__price {
	color: var(--pp-muted);
	font-size: var(--pp-fs-small);
}

.woocommerce-cart .pp-cart-item__quantity .quantity {
	display: flex;
	align-items: center;
	width: fit-content;
	border: 1px solid var(--pp-input-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--pp-bg);
}

.woocommerce-cart .pp-cart-item__quantity .quantity input.qty {
	width: 52px;
	height: 40px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--pp-font-body);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
	padding: 0;
}

.woocommerce-cart .pp-cart-item__subtotal {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-weight-price);
	color: var(--pp-price);
	white-space: nowrap;
}

.woocommerce-cart .pp-cart-item__remove {
	display: flex;
	align-items: center;
}

.woocommerce-cart .pp-cart-item__remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--pp-muted);
	font-size: 1.2rem;
	line-height: 1;
	text-decoration: none;
	transition: color var(--pp-transition), background-color var(--pp-transition);
}

.woocommerce-cart .pp-cart-item__remove a.remove:hover {
	color: var(--pp-light-text);
	background-color: var(--pp-primary);
}

.woocommerce-cart .pp-cart-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pp-space-4);
	margin-top: var(--pp-space-6);
	padding-top: var(--pp-space-6);
	border-top: 1px solid var(--pp-border);
}

.woocommerce-cart .pp-cart-actions .coupon {
	display: flex;
	gap: var(--pp-space-2);
	flex-wrap: wrap;
}

.woocommerce-cart .pp-cart-actions .coupon input#coupon_code {
	height: 48px;
	padding: 0 var(--pp-space-4);
	border: 1px solid var(--pp-input-border);
	border-radius: 999px;
	background: var(--pp-input-bg);
	min-width: 200px;
	font-family: var(--pp-font-body);
}

.woocommerce-cart .pp-cart-actions .coupon input#coupon_code:focus {
	border-color: var(--pp-primary);
	outline: none;
}

.woocommerce-cart .pp-cart-actions button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pp-font-button);
	font-weight: var(--pp-weight-button);
	font-size: var(--pp-fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: transparent;
	color: var(--pp-heading);
	border: 1px solid var(--pp-border);
	border-radius: 999px;
	padding: 14px 28px;
	cursor: pointer;
	transition: border-color var(--pp-transition), color var(--pp-transition);
}

.woocommerce-cart .pp-cart-actions button.button:hover {
	border-color: var(--pp-heading);
	color: var(--pp-primary);
}

/* Cart totals + cross-sells — WooCommerce's own unmodified markup. */
.woocommerce-cart .cart-collaterals {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: var(--pp-space-8);
	align-items: start;
	margin-top: var(--pp-space-8);
}

.woocommerce-cart .cart-collaterals .cross-sells {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-cart .cart_totals {
	grid-column: 2;
	grid-row: 1;
	background: var(--pp-bg-section);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-8);
	box-shadow: var(--pp-shadow-sm);
	position: sticky;
	top: var(--pp-space-8);
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h5);
	color: var(--pp-heading);
	margin: 0 0 var(--pp-space-5);
}

.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: var(--pp-space-3) 0;
	border-bottom: 1px solid var(--pp-border);
	font-size: var(--pp-fs-small);
	color: var(--pp-text);
	text-align: left;
	font-weight: var(--pp-weight-body);
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-bottom: none;
	padding-top: var(--pp-space-4);
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-h5);
	font-weight: var(--pp-weight-price);
	color: var(--pp-price);
}

.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--pp-space-6);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--pp-font-button);
	font-weight: var(--pp-weight-button);
	font-size: var(--pp-fs-small);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background-color: var(--pp-btn-bg, var(--pp-primary));
	color: var(--pp-btn-text, var(--pp-light-text));
	border: 1px solid var(--pp-btn-bg, var(--pp-primary));
	border-radius: 999px;
	padding: 18px 32px;
	text-decoration: none;
	transition: background-color var(--pp-transition), transform var(--pp-transition), box-shadow var(--pp-transition);
	box-shadow: var(--pp-shadow-sm);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover {
	background-color: var(--pp-btn-hover-bg, var(--pp-primary-dark));
	border-color: var(--pp-btn-hover-bg, var(--pp-primary-dark));
	color: var(--pp-btn-hover-text, var(--pp-light-text));
	box-shadow: var(--pp-shadow-md);
}

.pp-animations-on.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover {
	transform: translateY(-2px);
}

/* Empty cart state — WooCommerce's own unmodified cart-empty.php. */
.woocommerce-cart .woocommerce-info {
	background: var(--pp-bg-section);
	border: none;
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-10) var(--pp-space-6);
	color: var(--pp-heading);
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h6);
	text-align: center;
	list-style: none;
	margin-bottom: var(--pp-space-5);
}

.woocommerce-cart .woocommerce-info::before {
	display: none;
}

.woocommerce-cart p.return-to-shop {
	text-align: center;
}

.woocommerce-cart p.return-to-shop a.button.wc-backward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pp-font-button);
	font-weight: var(--pp-weight-button);
	font-size: var(--pp-fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background-color: var(--pp-btn-bg, var(--pp-primary));
	color: var(--pp-btn-text, var(--pp-light-text));
	border: 1px solid var(--pp-btn-bg, var(--pp-primary));
	border-radius: 999px;
	padding: 14px 32px;
	text-decoration: none;
	transition: background-color var(--pp-transition), transform var(--pp-transition);
}

.woocommerce-cart p.return-to-shop a.button.wc-backward:hover {
	background-color: var(--pp-btn-hover-bg, var(--pp-primary-dark));
	border-color: var(--pp-btn-hover-bg, var(--pp-primary-dark));
}

@media (max-width: 1023px) {
	.woocommerce-cart .cart-collaterals {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart .cart_totals {
		position: static;
	}

	.woocommerce-cart .cart_totals {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .cart-collaterals .cross-sells {
		grid-row: 1;
	}
}

@media (max-width: 767px) {
	.woocommerce-cart .pp-cart-item {
		grid-template-columns: 72px 1fr;
		grid-template-rows: auto auto;
	}

	.woocommerce-cart .pp-cart-item__thumbnail img {
		width: 72px;
		height: 72px;
	}

	.woocommerce-cart .pp-cart-item__subtotal {
		grid-column: 2;
	}

	.woocommerce-cart .pp-cart-item__remove {
		position: absolute;
		top: var(--pp-space-3);
		right: var(--pp-space-3);
	}

	.woocommerce-cart .pp-cart-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart .pp-cart-actions .coupon {
		flex-direction: column;
	}

	.woocommerce-cart .pp-cart-actions .coupon input#coupon_code {
		width: 100%;
	}
}