/* =====================================================
   PWD Elementor Theme Pro — Default Shop & Single Product
   Restyles WooCommerce's own Shop/category/tag archive and
   Single Product templates, shown when no PWD Theme Builder
   template (type_wc_archive / type_wc_single) overrides them.

   Colours: every rule below reads the --pwd-wc-ctx-* variables
   defined right here, never --pwd-active-color-*, --pwd-wc-archive-*
   or --pwd-wc-single-* directly. body.single-product resolves the
   context vars from the Single Product settings (PWD Theme →
   Single Product); every other page this stylesheet applies to
   (Shop, category/tag archives) resolves them from the Shop Archive
   settings. Each falls back to --pwd-active-color-* (which already
   follows Theme/Elementor colour priority) if the admin field is
   left blank, so an unconfigured install looks identical either way
   — this is what lets Shop/Single go fully dark independently of the
   rest of the site without touching the main palette.
   ===================================================== */

body.single-product {
	--pwd-wc-ctx-bg:      var( --pwd-wc-single-bg,      transparent );
	--pwd-wc-ctx-text:    var( --pwd-wc-single-text,    var( --pwd-active-color-text, #1a1a1a ) );
	--pwd-wc-ctx-heading: var( --pwd-wc-single-heading, var( --pwd-active-color-text, #1a1a1a ) );
	--pwd-wc-ctx-price:   var( --pwd-wc-single-price,   var( --pwd-active-color-primary, #5c3d1e ) );
	--pwd-wc-ctx-btn-bg:  var( --pwd-wc-single-btn-bg,  var( --pwd-active-color-primary, #5c3d1e ) );
	--pwd-wc-ctx-btn-text: var( --pwd-wc-single-btn-text, #ffffff );
}
body:not(.single-product) {
	--pwd-wc-ctx-bg:      var( --pwd-wc-archive-bg,      transparent );
	--pwd-wc-ctx-text:    var( --pwd-wc-archive-text,    var( --pwd-active-color-text, #1a1a1a ) );
	--pwd-wc-ctx-heading: var( --pwd-wc-archive-heading, var( --pwd-active-color-text, #1a1a1a ) );
	--pwd-wc-ctx-price:   var( --pwd-wc-archive-price,   var( --pwd-active-color-primary, #5c3d1e ) );
	--pwd-wc-ctx-btn-bg:  var( --pwd-wc-archive-btn-bg,  var( --pwd-active-color-primary, #5c3d1e ) );
	--pwd-wc-ctx-btn-text: var( --pwd-wc-archive-btn-text, #ffffff );
}

.pwd-etp-wc-shop-container.pwd-container {
	max-width: var( --pwd-wc-shop-container-width, 1200px );
	padding-left: var( --pwd-wc-shop-container-padding-x, 24px );
	padding-right: var( --pwd-wc-shop-container-padding-x, 24px );
	padding-top: 40px;
	padding-bottom: 80px;
	background: var( --pwd-wc-ctx-bg );
	/* Set directly on the wrapper we control, not on a nested .woocommerce
	   element — WooCommerce does not reliably wrap the single-product/shop
	   content in an element with that class, so a descendant selector for it
	   silently matched nothing and every child was falling back to the
	   site's own default text colour instead of inheriting this one. */
	color: var( --pwd-wc-ctx-text );
	font-family: var( --pwd-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif );
}

/* ----- Shared notices ----- */
.pwd-etp-wc-shop-container .woocommerce-message,
.pwd-etp-wc-shop-container .woocommerce-error,
.pwd-etp-wc-shop-container .woocommerce-info {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	border: 1px solid transparent;
	border-left-width: 4px;
	padding: 14px 16px;
	margin: 0 0 24px;
	font-size: 14px;
}
.pwd-etp-wc-shop-container .woocommerce-message { background: rgba( 0, 163, 42, 0.06 ); border-color: #00a32a; color: #00501a; }
.pwd-etp-wc-shop-container .woocommerce-error { background: rgba( 214, 54, 56, 0.06 ); border-color: #d63638; color: #7a1518; }
.pwd-etp-wc-shop-container .woocommerce-info { background: rgba( 33, 133, 214, 0.06 ); border-color: #2185d6; color: #103b57; }

/* ----- Shared buttons -----
   !important on background/color only: WooCommerce's own bundled
   woocommerce.css ships a same-or-higher-specificity rule specifically for
   the "add to cart" button's .alt variant (.woocommerce a.button.alt etc,
   wrapped in :where() for the rest but not for that base compound), which
   otherwise wins outright over this rule regardless of load order and
   renders WooCommerce's own hardcoded purple instead of the configured
   colour — confirmed live via getComputedStyle + matched CSS rules. */
.pwd-etp-wc-shop-container a.button,
.pwd-etp-wc-shop-container button.button,
.pwd-etp-wc-shop-container input.button,
.pwd-etp-wc-shop-container #place_order {
	display: inline-block;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	background: var( --pwd-wc-ctx-btn-bg ) !important;
	color: var( --pwd-wc-ctx-btn-text ) !important;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
	text-align: center;
}
.pwd-etp-wc-shop-container a.button:hover,
.pwd-etp-wc-shop-container button.button:hover,
.pwd-etp-wc-shop-container input.button:hover,
.pwd-etp-wc-shop-container #place_order:hover {
	opacity: 0.85;
}
.pwd-etp-wc-shop-container a.button:active,
.pwd-etp-wc-shop-container button.button:active {
	transform: translateY( 1px );
}

/* ----- Shared inputs (quantity, variation selects) ----- */
.pwd-etp-wc-shop-container table input[type="number"],
.pwd-etp-wc-shop-container .quantity .qty,
.pwd-etp-wc-shop-container select {
	border: 1px solid rgba( 128, 128, 128, 0.35 );
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var( --pwd-wc-ctx-text );
	background: transparent;
}
.pwd-etp-wc-shop-container .quantity .qty {
	width: 68px;
	text-align: center;
	padding: 10px 8px;
}

/* ----- Breadcrumb ----- */
.pwd-etp-wc-shop-container .woocommerce-breadcrumb {
	font-size: 13px;
	color: var( --pwd-wc-ctx-text );
	opacity: 0.7;
	margin: 0 0 20px;
}
.pwd-etp-wc-shop-container .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.pwd-etp-wc-shop-container .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* ----- Sale badge & star rating (shared shop + single) ----- */
.pwd-etp-wc-shop-container span.onsale {
	background: var( --pwd-wc-ctx-btn-bg );
	color: var( --pwd-wc-ctx-btn-text );
	font-weight: 600;
	font-size: 12px;
	border-radius: 4px;
	padding: 3px 10px;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}
.pwd-etp-wc-shop-container .star-rating { color: var( --pwd-wc-ctx-price ); }
.pwd-etp-wc-shop-container .star-rating span::before { color: var( --pwd-wc-ctx-price ); }

/* =====================================================
   SHOP / CATEGORY / TAG ARCHIVE — page title
   ===================================================== */

.pwd-etp-wc-shop-container .woocommerce-products-header__title {
	text-align: var( --pwd-wc-archive-title-align, left );
	color: var( --pwd-wc-ctx-heading );
	font-size: 28px;
	margin: 0 0 24px;
}
.pwd-etp-wc-shop-container .woocommerce-products-header {
	margin-bottom: 8px;
}

/* =====================================================
   SHOP / CATEGORY / TAG ARCHIVE — layout row (main + optional sidebar)
   ===================================================== */

.pwd-etp-wc-archive-row {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.pwd-etp-wc-archive-main {
	flex: 1;
	min-width: 0;
}
.pwd-etp-wc-archive-sidebar {
	width: 280px;
	flex-shrink: 0;
}
.pwd-etp-wc-archive-row--sidebar-left .pwd-etp-wc-archive-sidebar {
	order: -1;
}
.pwd-etp-wc-archive-sidebar .widget {
	margin-bottom: 32px;
}
.pwd-etp-wc-archive-sidebar .widget-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var( --pwd-wc-ctx-heading );
}
.pwd-etp-wc-archive-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pwd-etp-wc-archive-sidebar li {
	margin-bottom: 8px;
}
.pwd-etp-wc-archive-sidebar a {
	color: var( --pwd-wc-ctx-text );
	text-decoration: none;
}
.pwd-etp-wc-archive-sidebar a:hover {
	text-decoration: underline;
}
.pwd-etp-wc-archive-sidebar .search-form {
	display: flex;
	gap: 8px;
}
.pwd-etp-wc-archive-sidebar .search-field {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid rgba( 128, 128, 128, 0.35 );
	border-radius: 6px;
	color: var( --pwd-wc-ctx-text );
	background: transparent;
}
.pwd-etp-wc-archive-sidebar .search-submit {
	padding: 8px 14px;
	border: none;
	border-radius: 6px;
	background: var( --pwd-wc-ctx-btn-bg );
	color: var( --pwd-wc-ctx-btn-text );
	cursor: pointer;
}
@media ( max-width: 782px ) {
	.pwd-etp-wc-archive-row { flex-direction: column; }
	.pwd-etp-wc-archive-sidebar { width: 100%; order: 0 !important; }
}

/* ----- Product grid ----- */
.pwd-etp-wc-shop-container ul.products {
	display: grid;
	grid-template-columns: repeat( var( --pwd-wc-archive-columns, 3 ), 1fr );
	gap: 32px 24px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
/* WooCommerce's own bundled CSS applies an old float-layout clearfix to
   ul.products (::before/::after with content:" " and display:table). In a
   float layout those are invisible and harmless; in this theme's CSS Grid
   layout, a pseudo-element with real content and a non-none display becomes
   an actual (invisible) grid item — the ::before was taking the very first
   grid cell, pushing every real product over by one column. Confirmed live
   via getComputedStyle(ul, '::before'). Grids don't need a clearfix at all,
   so this just removes them from layout entirely. */
.pwd-etp-wc-shop-container ul.products::before,
.pwd-etp-wc-shop-container ul.products::after {
	content: none !important;
	display: none !important;
}
@media ( max-width: 900px ) {
	.pwd-etp-wc-shop-container ul.products { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 560px ) {
	.pwd-etp-wc-shop-container ul.products { grid-template-columns: 1fr; }
}

/* !important on width/float/margin: WooCommerce's own bundled
   woocommerce-layout.css ships ".woocommerce ul.products li.product { width:
   22.05%; margin-right: 3.8%; float: left; }" — a percentage-width float
   layout left over from before WooCommerce supported CSS grid. This theme
   never declared its own width for li.product, so that rule was the only
   one in play: with the <ul> as a grid container, the percentage resolved
   against each item's actual ~270px grid cell (confirmed live: 22.05% of
   270px is ~60px, an exact match to the shrunken card width seen live),
   shrinking every product card — image included — to a fraction of its
   column regardless of how many columns were configured. */
.pwd-etp-wc-shop-container ul.products li.product {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}
.pwd-etp-wc-shop-container ul.products li.product a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.pwd-etp-wc-shop-container ul.products li.product img {
	border-radius: 8px;
	margin-bottom: 12px;
	width: 100%;
	height: auto;
}
.pwd-etp-wc-shop-container ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var( --pwd-wc-ctx-heading );
}
.pwd-etp-wc-shop-container ul.products li.product .price {
	font-size: 15px;
	font-weight: 600;
	color: var( --pwd-wc-ctx-price );
}
.pwd-etp-wc-shop-container ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 6px;
}
.pwd-etp-wc-shop-container ul.products li.product .button {
	margin-top: 14px;
}

.pwd-etp-wc-shop-container .woocommerce-result-count,
.pwd-etp-wc-shop-container .woocommerce-ordering {
	margin: 0 0 20px;
	font-size: 14px;
}
.pwd-etp-wc-shop-container .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}
.pwd-etp-wc-shop-container .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 6px;
	border: 1px solid rgba( 128, 128, 128, 0.35 );
	color: var( --pwd-wc-ctx-text );
	text-decoration: none;
}
.pwd-etp-wc-shop-container .woocommerce-pagination .page-numbers.current,
.pwd-etp-wc-shop-container .woocommerce-pagination .page-numbers:hover {
	background: var( --pwd-wc-ctx-btn-bg );
	border-color: var( --pwd-wc-ctx-btn-bg );
	color: var( --pwd-wc-ctx-btn-text );
}

/* =====================================================
   SINGLE PRODUCT
   ===================================================== */

.pwd-etp-wc-shop-container div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-bottom: 48px;
}
@media ( min-width: 782px ) {
	.pwd-etp-wc-shop-container div.product {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
		align-items: start;
	}
}

/* div.product's direct children are NOT just gallery + summary — WooCommerce
   also fires woocommerce_after_single_product_summary (tabs, related products,
   upsells) as further siblings inside the same div.product, after .summary.
   Without this, the 2-column grid above auto-places them as a 3rd/4th grid
   item instead of letting them run full width underneath. */
.pwd-etp-wc-shop-container div.product .woocommerce-tabs,
.pwd-etp-wc-shop-container div.product > .related.products,
.pwd-etp-wc-shop-container div.product > .upsells.products {
	grid-column: 1 / -1;
}

/* Only the outer gallery container is sized here — WooCommerce's own zoom
   feature (zoom.js) actively manipulates the wrapper/image elements one
   level in, so this deliberately leaves those alone (an earlier, more
   aggressive version of this rule forced display/float on them and broke
   hover-to-zoom). CSS Grid items already stretch to fill their column by
   default; the outer container just needs to not be prevented from doing
   that, which is all this does. */
/* !important on width only: the gallery div still carries the legacy
   "images" class for backward compatibility, and WooCommerce's own bundled
   woocommerce-layout.css targets that with ".woocommerce div.product
   div.images { width: 48%; float: left; }" — one more type selector than
   this rule, so it wins the specificity tie outright and computes to 48% of
   the grid column (confirmed live: exactly 320px of a 667px column) instead
   of filling it. float has no effect either way since it is a grid item
   (grid items ignore float per spec), so it is left alone here. */
.pwd-etp-wc-shop-container div.product .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
}
/* Scoped to __wrapper so this never matches the small 🔍 "view full-screen
   gallery" trigger icon, which is also an <img> inside .woocommerce-product-
   gallery but is a sibling of __wrapper, not a descendant of it. */
.pwd-etp-wc-shop-container div.product .woocommerce-product-gallery__wrapper img {
	border-radius: 10px;
	width: 100%;
	height: auto;
}

.pwd-etp-wc-shop-container div.product .summary {
	max-width: none;
}
.pwd-etp-wc-shop-container div.product .product_title {
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var( --pwd-wc-ctx-heading );
}
.pwd-etp-wc-shop-container div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.pwd-etp-wc-shop-container div.product p.price,
.pwd-etp-wc-shop-container div.product span.price {
	font-size: 24px;
	font-weight: 700;
	color: var( --pwd-wc-ctx-price );
	margin-bottom: 16px;
	display: inline-block;
}
.pwd-etp-wc-shop-container div.product .woocommerce-product-details__short-description {
	margin-bottom: 20px;
	line-height: 1.7;
}
.pwd-etp-wc-shop-container div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.pwd-etp-wc-shop-container div.product .product_meta {
	font-size: 13px;
	opacity: 0.75;
	padding-top: 16px;
	border-top: 1px solid rgba( 128, 128, 128, 0.25 );
}
.pwd-etp-wc-shop-container div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}
.pwd-etp-wc-shop-container div.product .product_meta a {
	color: inherit;
}

/* ----- Tabs (description, additional information, reviews) ----- */
.pwd-etp-wc-shop-container .woocommerce-tabs {
	margin-top: 48px;
	clear: both;
}
.pwd-etp-wc-shop-container .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var( --pwd-wc-single-tab-margin, 4px );
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
}
/* !important on background/border: WooCommerce's own bundled woocommerce.css
   ships a folder-tab look for ul.tabs li (light background + visible border,
   #fff on the active tab) that this theme never competed with, so it showed
   through unchanged against a dark page — confirmed live: .woocommerce
   div.product .woocommerce-tabs ul.tabs li computed to rgb(233,230,237)
   background with a visible border. Flattened to transparent so only this
   theme's own underline indicator (below) shows. */
.pwd-etp-wc-shop-container .woocommerce-tabs ul.tabs li,
.pwd-etp-wc-shop-container .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}
/* Configurable via PWD Theme → Single Product → Tabs. Every colour falls
   back to a sane default (ctx-text/ctx-heading/ctx-price) and every size
   falls back to the previous hardcoded value, so an unconfigured install
   still looks exactly as before — these are an explicit override, not a
   requirement to set anything.
   !important on background/color/padding/border-bottom: confirmed live
   (2026-09-25) that WooCommerce's own bundled woocommerce.css carries
   ".woocommerce div.product .woocommerce-tabs ul.tabs li a" — one more
   class+element than this selector, so it wins the specificity tie on
   `color` (fixed grey, not this theme's var) and on `padding` (0.5em 0px,
   i.e. zero horizontal padding — the exact "needs more padding left/right"
   symptom reported). Background/border-bottom weren't actually contested by
   that WC rule, but are flagged !important too for the same reason the
   sibling li/li.active rule above already is: nothing else gets to win this
   fight regardless of load order. */
.pwd-etp-wc-shop-container .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: var( --pwd-wc-single-tab-padding-v, 10px ) var( --pwd-wc-single-tab-padding-h, 18px ) !important;
	border-radius: var( --pwd-wc-single-tab-radius, 0px );
	background: var( --pwd-wc-single-tab-bg, transparent ) !important;
	color: var( --pwd-wc-single-tab-text, var( --pwd-wc-ctx-text ) ) !important;
	border-bottom: var( --pwd-wc-single-tab-border-width, 2px ) solid var( --pwd-wc-single-tab-border, transparent ) !important;
}
.pwd-etp-wc-shop-container .woocommerce-tabs ul.tabs li.active a {
	background: var( --pwd-wc-single-tab-active-bg, transparent ) !important;
	color: var( --pwd-wc-single-tab-active-text, var( --pwd-wc-ctx-heading ) ) !important;
	border-bottom-color: var( --pwd-wc-single-tab-active-border, var( --pwd-wc-ctx-price ) ) !important;
}
.pwd-etp-wc-shop-container .woocommerce-tabs .panel {
	line-height: 1.7;
}

/* ----- Related / upsell products ----- */
.pwd-etp-wc-shop-container .related.products,
.pwd-etp-wc-shop-container .upsells.products {
	margin-top: 56px;
	clear: both;
}
.pwd-etp-wc-shop-container .related.products > h2,
.pwd-etp-wc-shop-container .upsells.products > h2 {
	font-size: 22px;
	margin: 0 0 24px;
	color: var( --pwd-wc-ctx-heading );
}
.pwd-etp-wc-shop-container .related.products ul.products,
.pwd-etp-wc-shop-container .upsells.products ul.products {
	grid-template-columns: repeat( var( --pwd-wc-single-related-columns, 4 ), 1fr );
	margin-bottom: 0;
}
@media ( max-width: 900px ) {
	.pwd-etp-wc-shop-container .related.products ul.products,
	.pwd-etp-wc-shop-container .upsells.products ul.products { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 560px ) {
	.pwd-etp-wc-shop-container .related.products ul.products,
	.pwd-etp-wc-shop-container .upsells.products ul.products { grid-template-columns: 1fr; }
}