/* WooCommerce shop archive + single product: restyled via CSS, with two
   template overrides (woocommerce/content-product.php and
   woocommerce/loop/header.php) so the grid reuses the same .qg-product-card
   component as the homepage instead of WooCommerce's bare default markup. */

#primary.content-area {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: var(--qg-space-4) var(--qg-space-4) var(--qg-space-7);
}

/* Mobile only: the shop archive's side padding is deliberately tighter
   here than the site-wide .qg-container — product cards are the point of
   this page, so they get to use more of a small screen's width instead of
   matching the generous margins editorial pages (About, Contact) use.
   Desktop/tablet are untouched. */
@media (max-width: 639px) {
	#primary.content-area {
		padding-inline: var(--qg-space-2);
	}
}

.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--qg-color-muted);
	margin-bottom: var(--qg-space-4);
}

.woocommerce-breadcrumb a {
	color: var(--qg-color-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.woocommerce-breadcrumb a:hover {
	color: var(--qg-color-accent-dark);
	border-color: currentColor;
}

/* Shop header — quiet and editorial: a small tracked eyebrow, a large
   italic serif heading, a short description. No gradient band, no pill
   chip, no dot pattern — matches the hero/section-head typography used
   everywhere else instead of standing apart as its own "banner". */

.qg-shop-header {
	margin: 0 0 var(--qg-space-5);
	padding-top: var(--qg-space-4);
}

.qg-shop-header__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--qg-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--qg-tracking-label);
	color: var(--qg-color-accent);
}

/* Masthead treatment, not the italic editorial voice used for section
   headings elsewhere — a large, quiet, non-italic display caps line reads
   as "you are here" wayfinding rather than an article headline, and gives
   the page one clear typographic anchor instead of competing with the
   category nav/product names directly beneath it for attention. Compact
   deliberately: a short line, no supporting art, no cards — the catalog
   stays the visual focus. */

.woocommerce-products-header__title.page-title {
	font-family: var(--qg-font-heading);
	font-style: normal;
	text-transform: uppercase;
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--qg-color-ink);
}

.woocommerce-archive-description {
	max-width: 48ch;
	margin: var(--qg-space-3) 0 0;
	color: var(--qg-color-ink-soft);
	font-size: 1rem;
	line-height: 1.6;
}

/* Toolbar: result count + filter trigger + sort popover, one quiet row
   with a single hairline rule underneath — no bordered/boxed bar. */

.qg-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qg-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--qg-space-5);
	padding-bottom: var(--qg-space-3);
	border-bottom: 1px solid var(--qg-color-line);
}

/* "PRODUCTS (N)" — a bold, plain-sans heading rather than small tracked-caps
   micro-copy, so the toolbar reads as a real section header (count) paired
   with a clear action (the Filter & Sort trigger) on the opposite end. */
.woocommerce-result-count {
	margin: 0;
	font-family: var(--qg-font-body);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--qg-color-ink);
	order: -2;
}

/* The real <select> that drives sorting now lives entirely inside the
   Filter & Sort drawer as a flat option list (see .qg-sort-list below,
   built by component.js) — this stays in the document for its value/events
   but never renders in the toolbar. */
form.woocommerce-ordering {
	display: none;
}

/* Sort options — a flat, always-visible list inside the drawer's "Sort By"
   section (see data-qg-sort-slot in inc/shop-filters.php), built by
   component.js from the real <select>, which stays in the DOM and still
   drives the actual sort. */

.qg-sort-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.qg-sort-list__option {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-sharp);
	background: var(--qg-color-surface);
	text-align: left;
	font-family: var(--qg-font-body);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--qg-color-ink-soft);
	cursor: pointer;
	transition: border-color 0.15s var(--qg-ease), color 0.15s var(--qg-ease), background-color 0.15s var(--qg-ease);
}

.qg-sort-list__option:hover {
	border-color: var(--qg-color-ink-soft);
	color: var(--qg-color-ink);
}

.qg-sort-list__option.is-active {
	border-color: var(--qg-color-ink);
	background: var(--qg-color-ink);
	color: var(--qg-color-surface);
	font-weight: 600;
}

/* "On Sale" — a real link (see component.js), not a sort pill, but styled
   into the same list; the accent color (shared with the shop grid's own
   Sale stamps — see components/product-grid/component.css) is what tells
   it apart from an ordinary sort choice. */
.qg-sort-list__option--sale {
	border-color: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
}

.qg-sort-list__option--sale:hover {
	border-color: var(--qg-color-accent);
	color: var(--qg-color-accent-dark);
}

.qg-sort-list__option--sale.is-active {
	border-color: var(--qg-color-accent);
	background: var(--qg-color-accent);
	color: #fff;
}

/* Grid: the cards themselves (.qg-product-card) come from
   components/product-grid/component.css, shared with the homepage. */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qg-space-4) var(--qg-space-3);
	list-style: none;
	margin: 0 0 var(--qg-space-6);
	padding: 0;
}

/* WooCommerce core gives ul.products a clearfix (content: " "; display:
   table on ::before/::after) for its own float-based grid. Under
   `display: grid`, a pseudo-element with real `content` still counts as an
   actual grid item — this one was silently occupying the very first cell,
   pushing every real product over by one slot (very visible at 2 columns,
   where it looked like half the grid was missing). */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

ul.products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Empty state */

.qg-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--qg-space-3);
	padding: var(--qg-space-7) var(--qg-space-4);
}

.qg-shop-empty__eyebrow {
	margin: 0;
	font-family: var(--qg-font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 500;
	color: var(--qg-color-ink);
}

.qg-shop-empty__text {
	margin: 0;
	max-width: 40ch;
	color: var(--qg-color-ink-soft);
}

.qg-shop-empty__clear {
	margin-top: var(--qg-space-2);
}

.yith-wcwl-add-to-wishlist {
	margin: 0.5rem var(--qg-space-3) 0;
	font-size: 0.8rem;
}

.yith-wcwl-add-to-wishlist a {
	color: var(--qg-color-ink-soft);
	text-decoration: none;
}

.yith-wcwl-add-to-wishlist a:hover {
	color: var(--qg-color-accent-dark);
}

/* Pagination */

nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: var(--qg-space-6) 0 0;
	padding: 0;
	border: 0 !important;
}

nav.woocommerce-pagination ul li {
	border: 0 !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 0.4rem;
	border: 1px solid transparent;
	background: none;
	color: var(--qg-color-ink-soft);
	text-decoration: none;
	font-family: var(--qg-font-body);
	font-size: 0.88rem;
	font-weight: 500;
	transition: border-color 0.2s var(--qg-ease), color 0.2s var(--qg-ease);
}

nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li a:focus-visible {
	border-color: var(--qg-color-ink);
	color: var(--qg-color-ink);
}

/* Load More (see initLoadMore() in component.js) — replaces the numbered
   pagination above once JS confirms it can run. A thin fill-as-you-go
   progress bar (shown/total, the same ratio as the status line) sits above
   one bold gradient CTA — the same .qg-btn--primary every other call-to-
   action on the site uses, so it never reads as a bolted-on widget. */

.qg-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qg-space-3);
	margin: var(--qg-space-7) 0 0;
	padding-top: var(--qg-space-6);
	border-top: 1px solid var(--qg-color-line);
}

.qg-load-more__progress {
	width: min(100%, 320px);
	height: 3px;
	background: var(--qg-color-line);
	border-radius: 999px;
	overflow: hidden;
}

.qg-load-more__progress-fill {
	display: block;
	height: 100%;
	background: var(--qg-gradient-cta);
	border-radius: inherit;
	transition: width 0.5s var(--qg-ease);
}

.qg-load-more__status {
	margin: 0;
	font-family: var(--qg-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--qg-tracking-label);
	color: var(--qg-color-muted);
}

.qg-load-more__status strong {
	font-weight: 700;
	color: var(--qg-color-ink);
}

.qg-load-more__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--qg-space-3);
	margin-top: var(--qg-space-1);
}

/* .qg-btn already supplies the gradient/ghost treatment, padding and hover
   lift (see assets/css/sections.css) — this just tunes sizing/states that
   are specific to this control. */

.qg-load-more__btn {
	min-width: 180px;
	justify-content: center;
}

.qg-load-more__btn.is-loading {
	cursor: wait;
	opacity: 0.85;
}

.qg-load-more__btn:disabled {
	cursor: default;
}

.qg-load-more__btn[hidden] {
	display: none;
}

.qg-load-more__btn--error {
	background: var(--qg-color-surface);
	border-color: var(--qg-color-danger);
	color: var(--qg-color-danger);
}

.qg-load-more__btn--error:hover {
	background: var(--qg-color-danger);
	color: #fff;
}

.qg-load-more__spinner {
	animation: qg-load-more-spin 0.8s linear infinite;
}

@keyframes qg-load-more-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qg-load-more__progress-fill {
		transition: none;
	}

	.qg-load-more__spinner {
		animation-duration: 2.4s;
	}
}

/* Result count / notices row */

.woocommerce-notices-wrapper ~ .woocommerce-order {
	margin-bottom: var(--qg-space-4);
}

/* Single product page: the summary column (title, price, quantity, add to
   cart, wishlist, meta) had no theme styling at all, so it fell back to
   WooCommerce's own default purple button and 3px corners — visibly
   off-brand next to the rest of the site. */

.woocommerce div.product {
	display: grid;
	gap: var(--qg-space-6);
	margin-bottom: var(--qg-space-6);
}

@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
	}
}

/* WooCommerce's own default CSS (woocommerce-layout.css) still gives these
   two a classic float-based `width: 48%; float: left/right` for its
   non-grid 2-column layout — switching the parent to `display: grid` above
   never cancels that, so each child was rendering at 48% of its OWN grid
   cell (roughly a quarter of the actual row) with a wide dead gap between
   them, instead of filling its column. Reset back to the grid's own sizing. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: auto;
	float: none;
}

.woocommerce div.product div.images {
	border-radius: var(--qg-radius-lg);
	overflow: hidden;
	background: #fff;
}

.woocommerce div.product div.images img {
	border-radius: var(--qg-radius-lg);
}

/* Product gallery: WooCommerce's own JS makes the first image the large
   "main" photo and lays the rest out as a 25%-wide thumbnail row beneath it
   (see .woocommerce-product-gallery__image:nth-child(n+2) in its core CSS)
   — restyled here only, no template/JS changes, so zoom/lightbox keep
   working exactly as WooCommerce wires them up. */

.woocommerce-product-gallery__wrapper {
	border-radius: var(--qg-radius-lg);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--qg-color-line);
	background: #fff;
}

.woocommerce-product-gallery__image:first-child img {
	border-radius: 0;
}

.woocommerce-product-gallery__image:nth-child(n+2) {
	padding: 4px;
	box-sizing: border-box;
}

.woocommerce-product-gallery__image:nth-child(n+2) img {
	border-radius: var(--qg-radius);
	border: 1px solid var(--qg-color-line);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s var(--qg-ease), transform 0.2s var(--qg-ease);
}

.woocommerce-product-gallery__image:nth-child(n+2) img:hover {
	border-color: var(--qg-color-ink);
	transform: scale(1.03);
}

.woocommerce-product-gallery__trigger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	top: var(--qg-space-3) !important;
	right: var(--qg-space-3) !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--qg-shadow-md);
	transition: transform 0.2s var(--qg-ease);
}

.woocommerce-product-gallery__trigger:hover {
	transform: scale(1.06);
}

/* Sticky summary was tried here and dropped: WooCommerce prints "Related
   products" as a further child of the same grid-container div (after the
   summary, before the closing </div> of div.product), so the sticky
   column's box kept painting over the related-products row beneath it once
   scrolled — not worth the fragility for a nice-to-have. */

/* Trust row under the add-to-cart button (see qg_single_product_trust_row
   in inc/woocommerce.php) — the same three commitments as the hero/footer,
   repeated where reassurance matters most: right after "Add to cart". */

.qg-product-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qg-space-4);
	list-style: none;
	margin: var(--qg-space-5) 0 0;
	padding-top: var(--qg-space-4);
	border-top: 1px solid var(--qg-color-line);
}

.qg-product-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--qg-color-ink-soft);
}

.qg-product-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--qg-color-ink);
	color: #fff;
	flex-shrink: 0;
}

.qg-product-trust__icon .qg-icon {
	width: 16px;
	height: 16px;
}

/* "Related products" — WooCommerce prints a bare <h2>, styled here to match
   the homepage's section-head treatment instead of looking like leftover
   default theme typography. */

.related.products {
	grid-column: 1 / -1;
	margin-top: var(--qg-space-7);
	padding-top: var(--qg-space-6);
	border-top: 1px solid var(--qg-color-line);
}

.related.products > h2 {
	font-family: var(--qg-font-heading);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	margin: 0 0 var(--qg-space-5);
}

.product_title.entry-title {
	font-family: var(--qg-font-heading);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--qg-space-3);
	color: var(--qg-color-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--qg-color-accent-dark);
	margin: 0 0 var(--qg-space-4);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	font-size: 0.7em;
	font-weight: 400;
	color: var(--qg-color-muted);
	opacity: 1;
	margin-right: 0.5rem;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qg-space-3);
	margin: 0 0 var(--qg-space-4);
}

.woocommerce div.product .quantity {
	margin: 0;
}

.woocommerce div.product .quantity .qty,
.quantity .qty {
	width: 84px;
	height: 52px;
	padding: 0 var(--qg-space-3);
	border: 1px solid var(--qg-color-line);
	border-radius: 999px;
	background: var(--qg-color-surface);
	color: var(--qg-color-ink);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
}

.woocommerce div.product .quantity .qty:focus-visible,
.quantity .qty:focus-visible {
	outline: none;
	border-color: var(--qg-color-ink);
}

/* Quantity stepper (see components/shop/component.js): once the JS wraps a
   .quantity with the qg-qty class, the input becomes a borderless center
   piece flanked by −/+ buttons inside one pill, instead of a bare number
   field with the browser's own spinner. Falls back cleanly to the plain
   pill input above if the script doesn't run. */

.qg-qty {
	display: inline-flex;
	align-items: center;
	height: 52px;
	border: 1px solid var(--qg-color-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--qg-color-surface);
	transition: border-color 0.2s var(--qg-ease);
}

.qg-qty:focus-within {
	border-color: var(--qg-color-ink);
}

.qg-qty .qty {
	width: 42px !important;
	height: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	-moz-appearance: textfield;
}

.qg-qty .qty::-webkit-outer-spin-button,
.qg-qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qg-qty .qty:focus-visible {
	outline: none;
}

.qg-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 100%;
	flex-shrink: 0;
	background: none;
	border: 0;
	color: var(--qg-color-ink-soft);
	cursor: pointer;
	transition: background-color 0.2s var(--qg-ease), color 0.2s var(--qg-ease);
}

.qg-qty__btn:hover {
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-ink);
}

.qg-qty__btn:active {
	background: var(--qg-color-accent-soft);
}

.qg-qty__btn .qg-icon {
	width: 15px;
	height: 15px;
}

.woocommerce div.product .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 52px;
	padding: 0 var(--qg-space-5);
	border-radius: 999px;
	border: 0;
	background: var(--qg-gradient-cta);
	color: #fff;
	font-family: var(--qg-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s var(--qg-ease), transform 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--qg-gradient-cta-hover);
	color: #fff;
	box-shadow: var(--qg-shadow-md);
	transform: translateY(-2px);
}

.woocommerce div.product .single_add_to_cart_button.disabled {
	background: var(--qg-color-line);
	color: var(--qg-color-muted);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.woocommerce div.product .yith-wcwl-add-to-wishlist-button-block {
	margin: 0 0 var(--qg-space-4);
}

.woocommerce div.product a.yith-wcwl-add-to-wishlist-button--single {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--qg-color-ink-soft);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition: color 0.2s var(--qg-ease);
}

.woocommerce div.product a.yith-wcwl-add-to-wishlist-button--single:hover {
	color: var(--qg-color-accent-dark);
}

.woocommerce div.product a.yith-wcwl-add-to-wishlist-button--single .yith-wcwl-icon-svg {
	width: 19px;
	height: 19px;
}

.woocommerce div.product .product_meta {
	margin: 0 0 var(--qg-space-3);
	padding-top: var(--qg-space-3);
	border-top: 1px solid var(--qg-color-line);
	font-size: 0.85rem;
	color: var(--qg-color-ink-soft);
}

.woocommerce div.product .product_meta a {
	color: var(--qg-color-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--qg-color-line);
}

.woocommerce div.product .product_meta a:hover {
	border-color: var(--qg-color-ink);
}

.woocommerce div.product .custom-share-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.woocommerce div.product .custom-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	color: #fff !important;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.woocommerce div.product .custom-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--qg-shadow-sm);
}

.woocommerce div.product .custom-share-btn::before {
	content: '';
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce div.product .custom-share-btn.btn-fb::before {
	-webkit-mask-image: url(../../assets/icons/facebook.svg);
	mask-image: url(../../assets/icons/facebook.svg);
}

.woocommerce div.product .custom-share-btn.btn-wa::before {
	-webkit-mask-image: url(../../assets/icons/whatsapp.svg);
	mask-image: url(../../assets/icons/whatsapp.svg);
}

.woocommerce div.product .custom-share-btn.btn-tg::before {
	-webkit-mask-image: url(../../assets/icons/telegram.svg);
	mask-image: url(../../assets/icons/telegram.svg);
}

/* Product tabs (Description / Reviews) — WooCommerce prints these as a
   further child of the same grid as the gallery/summary (see the related
   products comment above), so without an explicit span they'd be squeezed
   into the gallery's column alone. Full-span gives the actual content room
   to breathe instead of wrapping in a narrow strip. */

.woocommerce-tabs {
	grid-column: 1 / -1;
	max-width: 760px;
	margin-top: var(--qg-space-4);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--qg-space-2);
	list-style: none;
	margin: 0 0 var(--qg-space-5);
	padding: 0;
	border-bottom: 1px solid var(--qg-color-line);
}

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

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.1rem;
	color: var(--qg-color-ink-soft);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.2s var(--qg-ease), border-color 0.2s var(--qg-ease);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--qg-color-ink);
	border-bottom-color: var(--qg-color-ink);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-family: var(--qg-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 var(--qg-space-3);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	color: var(--qg-color-ink-soft);
	font-size: 0.98rem;
	line-height: 1.75;
}

.woocommerce-tabs .woocommerce-Tabs-panel p {
	margin: 0 0 var(--qg-space-3);
}

/* Catch-all for every generic WooCommerce button this stylesheet doesn't
   already give a bespoke treatment — "Update cart", "Proceed to checkout",
   "Place order", "Apply coupon", "Log in" / "Register", etc. Without this,
   each one falls back to WooCommerce's own default (a pale lavender/purple
   with grey or barely-there text) wherever we haven't styled it by name,
   which is exactly the low-contrast, off-brand button this rule fixes —
   consistently, everywhere, in one place instead of one page at a time.
   WooCommerce's own core CSS wraps its selector in :where(), which counts
   as zero specificity, but still out-classes a bare ".woocommerce .button"
   because it also carries the "a.button"/"button.button" type selector —
   so this is qualified with the body's own theme class to win outright,
   the same pattern already used in style.css for the Elementor button
   box-shadow override. */
body.theme-qedami .woocommerce a.button,
body.theme-qedami .woocommerce button.button,
body.theme-qedami .woocommerce input.button,
body.theme-qedami .woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	background: var(--qg-gradient-cta);
	color: #fff;
	font-family: var(--qg-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.25s var(--qg-ease), transform 0.2s var(--qg-ease), box-shadow 0.25s var(--qg-ease);
}

body.theme-qedami .woocommerce a.button:hover,
body.theme-qedami .woocommerce button.button:hover,
body.theme-qedami .woocommerce input.button:hover,
body.theme-qedami .woocommerce #place_order:hover {
	background: var(--qg-gradient-cta-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--qg-shadow-md);
}

body.theme-qedami .woocommerce a.button:disabled,
body.theme-qedami .woocommerce a.button.disabled,
body.theme-qedami .woocommerce button.button:disabled,
body.theme-qedami .woocommerce button.button.disabled,
body.theme-qedami .woocommerce input.button:disabled,
body.theme-qedami .woocommerce input.button.disabled {
	background: var(--qg-color-line);
	color: var(--qg-color-muted);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (max-width: 767px) {
	.qg-shop-header {
		margin-bottom: var(--qg-space-4);
		padding: var(--qg-space-4) var(--qg-space-3) 0;
	}

	.woocommerce-products-header__title.page-title {
		font-size: clamp(2rem, 12vw, 2.6rem);
	}

	.woocommerce-archive-description {
		font-size: 0.92rem;
	}

	.qg-shop-chips {
		margin-bottom: var(--qg-space-3);
	}

	.qg-shop-toolbar {
		flex-wrap: nowrap;
		gap: var(--qg-space-2);
		margin-bottom: var(--qg-space-4);
	}

	.woocommerce-result-count {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.92rem;
	}

	.qg-filter-trigger {
		flex-shrink: 0;
	}
}

@media (max-width: 359px) {
	.woocommerce-result-count {
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	nav.woocommerce-pagination ul li a,
	nav.woocommerce-pagination ul li span {
		transition: none;
	}
}