/* =========================================================================
 * Curvita — WooCommerce
 * -------------------------------------------------------------------------
 * All WC-specific styling. Loaded only on WC pages via inc/assets.php.
 *
 * Sections:
 *   1. Wrappers + containers
 *   2. Breadcrumb
 *   3. Shop archive header
 *   4. Shop archive — result count + sort + loop wrapper
 *   5. Product grid
 *   6. Pagination
 *   7. Shop sidebar
 *   8. No-products state
 *   9. Single product — gallery + summary
 *  10. Single product — tabs
 *  11. Single product — related + upsells
 *  12. Notices
 *  13. Responsive tweaks
 * =========================================================================
 */


/* ─── 1. Wrappers + containers ────────────────────────────────────── */

.woocommerce-wrap {
	padding-block: var(--sp-8);
}


/* ─── 2. Breadcrumb ───────────────────────────────────────────────── */

.woocommerce-breadcrumb-wrap {
	margin-block-end: var(--sp-6);
}
.woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}
.woocommerce-breadcrumb a {
	color: var(--c-text-muted);
	transition: color var(--transition-fast);
}
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--c-coral);
}
.woocommerce-breadcrumb__sep {
	color: var(--c-border);
	margin-inline: var(--sp-1);
}


/* ─── 3. Shop archive header ──────────────────────────────────────── */

.woocommerce-products-header {
	margin-block-end: var(--sp-6);
}
.woocommerce-products-header__title {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	margin: 0 0 var(--sp-3);
}
.woocommerce-products-header .term-description {
	color: var(--c-text-dark);
	max-width: 72ch;
}
.woocommerce-products-header .term-description p {
	margin-block-end: var(--sp-3);
}


/* ─── 4. Shop archive layout (main + sidebar) ─────────────────────── */

.shop-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--sp-8);
	align-items: start;
}

/* Sidebar first on mobile reads badly — keep it after the grid on
 * small screens; we collapse it behind a toggle drawer instead. */
.shop-layout__sidebar:empty {
	display: none;   /* Hide the aside when no widgets are assigned */
}

@media (max-width: 1023px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}
	/* Simple stacked sidebar below the grid on tablet/mobile.
	 * Step 7+ can wire a toggle drawer if the client wants one. */
}


/* ─── Shop loop toolbar (result count + ordering) ─────────────────── */

.woocommerce-result-count,
.woocommerce-ordering {
	margin: 0;
}

.woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-result-count {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.woocommerce-ordering select {
	font-size: var(--fs-sm);
	padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
	background: var(--c-white);
	border: var(--border-width-thin) solid var(--c-border);
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23000' d='M0 0h10L5 6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
}

/* The archive places result-count + ordering on the same row by default;
 * we keep WC's markup but guarantee the flex alignment. */
.shop-layout__main > .woocommerce-notices-wrapper ~ .woocommerce-result-count,
.shop-layout__main .woocommerce-result-count {
	float: none;
}
.shop-layout__main .woocommerce-ordering {
	float: none;
}

/* Wrap them in a flex toolbar via our own ::before pseudo — actually
 * simpler to use utility CSS: target both inputs as siblings and
 * give them a common container rendered by WC itself.
 * WC emits them as top-level siblings before the loop, so flex the
 * archive main area's first-row pair via display: contents isn't
 * reliable across WC versions. Use a simple wrap block: */
.shop-layout__main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.shop-layout__main > .woocommerce-notices-wrapper,
.shop-layout__main > .woocommerce-info {
	order: -1;
}


/* ─── 5. Product grid ─────────────────────────────────────────────── */

.curvita-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1023px) { .curvita-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .curvita-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

.curvita-product-grid > li.product {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	list-style: none;
}

/* Grid items ARE the product card — no extra wrapping styles needed.
 * The card itself is styled in home.css (.product-card *) and shared
 * across the homepage carousels and the shop archive. */


/* ─── 6. Pagination ──────────────────────────────────────────────── */

.woocommerce-pagination {
	margin-block-start: var(--sp-8);
	text-align: center;
}
.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--sp-2);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	background: var(--c-white);
	border: var(--border-width-thin) solid var(--c-border);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:focus-visible,
.woocommerce-pagination .page-numbers.current {
	background: var(--c-navy);
	color: var(--c-white);
	border-color: var(--c-navy);
}


/* ─── 7. Shop sidebar ────────────────────────────────────────────── */

.shop-layout__sidebar .widget {
	margin-block-end: var(--sp-6);
	padding-block-end: var(--sp-6);
	border-bottom: var(--border-width-thin) solid var(--c-border);
}
.shop-layout__sidebar .widget:last-child {
	border-bottom: 0;
}

/* Price filter slider — brand it in coral */
.shop-layout__sidebar .price_slider .ui-slider-range {
	background: var(--c-coral);
}
.shop-layout__sidebar .price_slider .ui-slider-handle {
	background: var(--c-navy);
	border: 0;
}
.shop-layout__sidebar .price_slider_amount .button {
	background: var(--c-navy);
	color: var(--c-white);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	padding: var(--sp-2) var(--sp-4);
	border: 0;
}


/* ─── 8. No products state ────────────────────────────────────────── */

.woocommerce-no-products-found,
.woocommerce-info {
	padding: var(--sp-6);
	background: var(--c-surface);
	border-left: 4px solid var(--c-coral);
	color: var(--c-text-dark);
}


/* ─── 9. Single product — gallery + summary ──────────────────────── */

.single-product-layout {
	padding-block-start: var(--sp-4);
}

.single-product-layout__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-10);
	margin-block-end: var(--sp-12);
}

@media (max-width: 1023px) {
	.single-product-layout__top {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* Gallery */
.single-product-layout__gallery {
	position: relative;
}
.single-product-layout__gallery .woocommerce-product-gallery {
	width: 100%;
}
.single-product-layout__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-block-start: var(--sp-3);
	padding: 0;
	list-style: none;
}
.single-product-layout__gallery .flex-control-thumbs li {
	width: calc(25% - var(--sp-2));
	cursor: pointer;
}
.single-product-layout__gallery .flex-control-thumbs img {
	opacity: 0.7;
	transition: opacity var(--transition-fast);
}
.single-product-layout__gallery .flex-control-thumbs img:hover,
.single-product-layout__gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.single-product-layout__gallery .onsale {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	padding: var(--sp-1) var(--sp-3);
	background: var(--c-sale);
	color: var(--c-white);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* Summary (right column) */
.single-product-layout__summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.single-product-layout__summary .product_title {
	font-family: var(--font-heading);
	font-size: var(--fs-single-product-title);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	margin: 0;
}

.single-product-layout__summary .price {
	font-family: var(--font-body);
	font-size: var(--fs-single-product-price);
	font-weight: var(--fw-bold);
	color: var(--c-text);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	flex-wrap: wrap;
}
.single-product-layout__summary .price del {
	color: var(--c-text-muted);
	font-weight: var(--fw-regular);
	text-decoration: line-through;
}
.single-product-layout__summary .price ins {
	color: var(--c-sale);
	text-decoration: none;
}

.single-product-layout__summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-coral);
}
.single-product-layout__summary .woocommerce-review-link {
	color: var(--c-text-muted);
}

.single-product-layout__summary .woocommerce-product-details__short-description {
	color: var(--c-text-dark);
	line-height: var(--lh-base);
}

/* Variation / qty / add-to-cart form */
.single-product-layout__summary form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: 0;
}

.single-product-layout__summary .variations {
	border-collapse: collapse;
	width: 100%;
}
.single-product-layout__summary .variations td,
.single-product-layout__summary .variations th {
	padding: var(--sp-2) 0;
	vertical-align: middle;
	border: 0;
	background: transparent;
}
.single-product-layout__summary .variations label {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	margin: 0;
}
.single-product-layout__summary .variations select {
	width: 100%;
}
.single-product-layout__summary .reset_variations {
	display: inline-block;
	margin-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-coral);
}

/* Qty input + add-to-cart row */
.single-product-layout__summary .quantity {
	display: inline-flex;
	align-items: center;
}
.single-product-layout__summary .quantity .qty {
	width: 72px;
	text-align: center;
	padding: var(--sp-3) var(--sp-2);
}

.single-product-layout__summary .single_add_to_cart_button {
	font-family: var(--font-heading);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-normal);
	text-transform: uppercase;
	padding: var(--sp-3) var(--sp-8);
	background: var(--c-navy);
	color: var(--c-surface);
	border: var(--border-width) solid var(--c-navy);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.single-product-layout__summary .single_add_to_cart_button:hover,
.single-product-layout__summary .single_add_to_cart_button:focus-visible {
	background: var(--c-coral);
	border-color: var(--c-coral);
}

.single-product-layout__summary .product_meta {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	border-top: var(--border-width-thin) solid var(--c-border);
	padding-block-start: var(--sp-4);
}
.single-product-layout__summary .product_meta a {
	color: var(--c-text-dark);
}
.single-product-layout__summary .product_meta a:hover {
	color: var(--c-coral);
}


/* ─── 10. Single product — tabs ──────────────────────────────────── */

.single-product-layout__tabs {
	margin-block-end: var(--sp-12);
}

.woocommerce-tabs .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	border-bottom: var(--border-width-thin) solid var(--c-border);
}
.woocommerce-tabs .wc-tabs li {
	margin: 0;
}
.woocommerce-tabs .wc-tabs a {
	display: inline-block;
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-text-muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs a:hover,
.woocommerce-tabs .wc-tabs a:focus-visible {
	color: var(--c-text);
	border-bottom-color: var(--c-coral);
}
.woocommerce-tabs .panel {
	max-width: 72ch;
	line-height: var(--lh-base);
	color: var(--c-text-dark);
}
.woocommerce-tabs .panel h2 {
	font-size: var(--fs-xl);
	margin-block-end: var(--sp-4);
}


/* ─── 11. Related + upsells ──────────────────────────────────────── */

.related.products,
.upsells.products {
	margin-block-end: var(--sp-12);
}
.related.products > h2,
.upsells.products > h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	margin-block-end: var(--sp-6);
}

/* ─── 12. Notices ────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error {
	padding: var(--sp-4) var(--sp-5);
	margin-block-end: var(--sp-4);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	border-left: 4px solid var(--c-coral);
	background: var(--c-surface);
	color: var(--c-text);
	list-style: none;
}
.woocommerce-message {
	border-left-color: var(--c-success);
}
.woocommerce-error {
	border-left-color: var(--c-sale);
	color: var(--c-sale);
}
.woocommerce-message .button,
.woocommerce-error .button {
	float: right;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-navy);
	text-decoration: underline;
	background: transparent;
	padding: 0;
}

/* ─── 13. Responsive tweaks ──────────────────────────────────────── */

@media (max-width: 599px) {
	.woocommerce-products-header__title { font-size: var(--fs-2xl); }
	.single-product-layout__summary .product_title { font-size: var(--fs-2xl); }
	.woocommerce-ordering select { width: 100%; }
	.woocommerce-ordering { width: 100%; }
}


/* =========================================================================
 * Curvita — Shop filters, load-more, quick-view modal, cart toast
 * ========================================================================= */


/* ─── Shop filters sidebar ────────────────────────────────────────── */

.shop-filters {
	position: sticky;
	top: calc(var(--header-height) + var(--sp-4));
	align-self: start;
	max-height: calc(100vh - var(--header-height) - var(--sp-8));
	overflow-y: auto;
	padding: var(--sp-5);
	background: var(--c-white);
	border: var(--border-width-thin) solid var(--c-border);
}
@media (max-width: 1023px) {
	.shop-filters {
		position: static;
		max-height: none;
	}
}

.shop-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--sp-4);
}

.shop-filters__title {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	margin: 0;
}

.shop-filters__reset {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--c-coral);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: var(--sp-1);
}
.shop-filters__reset:hover {
	text-decoration: underline;
}

.shop-filter {
	border: 0;
	padding: var(--sp-4) 0;
	margin: 0;
	border-bottom: var(--border-width-thin) solid var(--c-border);
}
.shop-filter:last-of-type {
	border-bottom: 0;
}

.shop-filter__legend {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	padding: 0;
	margin-block-end: var(--sp-3);
}


/* ─── Popular chip (at the top) ──────────────────────────────────── */

.shop-filter--popular {
	padding-top: 0;
	padding-bottom: var(--sp-4);
}

.shop-filter__chip--popular {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-white);
	border: var(--border-width) solid var(--c-coral);
	color: var(--c-coral);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.shop-filter__chip--popular input {
	appearance: none;
	margin: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.shop-filter__chip--popular:has(input:checked) {
	background: var(--c-coral);
	color: var(--c-white);
}
/* Fallback for browsers without :has — JS toggles .is-checked */
.shop-filter__chip--popular.is-checked {
	background: var(--c-coral);
	color: var(--c-white);
}


/* ─── Toggle rows (on-sale, in-stock) ─────────────────────────────── */

.shop-filter__toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding-block: var(--sp-1);
	cursor: pointer;
	font-size: var(--fs-sm);
}
.shop-filter__toggle input {
	width: 16px;
	height: 16px;
	accent-color: var(--c-coral);
	cursor: pointer;
}


/* ─── Price slider (dual-thumb native range inputs) ──────────────── */

.shop-filter__price-slider {
	position: relative;
	height: 36px;
	margin-bottom: var(--sp-2);
}
.shop-filter__price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--c-border);
	transform: translateY(-50%);
}
.shop-filter__price-fill {
	height: 100%;
	background: var(--c-coral);
	width: 100%;  /* JS updates in future iteration; CSS-only for now. */
}

.shop-filter--price input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 36px;
	background: transparent;
	appearance: none;
	pointer-events: none;      /* The track receives events via thumbs */
}
.shop-filter--price input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-navy);
	border: 2px solid var(--c-white);
	cursor: pointer;
	pointer-events: auto;
}
.shop-filter--price input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-navy);
	border: 2px solid var(--c-white);
	cursor: pointer;
	pointer-events: auto;
}

.shop-filter__price-display {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-align: center;
	color: var(--c-text-dark);
}


/* ─── Category nested list ────────────────────────────────────────── */

.shop-filter__cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.shop-filter__cat-list .shop-filter__cat-list {
	padding-left: var(--sp-5);
	margin-top: var(--sp-1);
	border-left: 1px solid var(--c-border);
}
.shop-filter__cat {
	padding-block: 2px;
}
.shop-filter__check {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	cursor: pointer;
}
.shop-filter__check input {
	width: 16px;
	height: 16px;
	accent-color: var(--c-coral);
	cursor: pointer;
}
.shop-filter__check > span:first-of-type {
	flex: 1 1 auto;
}
.shop-filter__count {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}


/* ─── Color swatches ──────────────────────────────────────────────── */

.shop-filter__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
	gap: var(--sp-2);
}
.shop-filter__swatch {
	position: relative;
	cursor: pointer;
}
.shop-filter__swatch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.shop-filter__swatch-dot {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--c-border);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.shop-filter__swatch:hover .shop-filter__swatch-dot {
	transform: scale(1.1);
}
.shop-filter__swatch:has(input:checked) .shop-filter__swatch-dot,
.shop-filter__swatch.is-checked .shop-filter__swatch-dot {
	border-color: var(--c-coral);
	box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-coral);
}


/* ─── Size chips ──────────────────────────────────────────────────── */

.shop-filter__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.shop-filter__size-chip {
	cursor: pointer;
	position: relative;
}
.shop-filter__size-chip input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.shop-filter__size-chip > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding-inline: var(--sp-3);
	border: var(--border-width) solid var(--c-border);
	background: var(--c-white);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	text-transform: uppercase;
	transition: all var(--transition-fast);
}
.shop-filter__size-chip:hover > span {
	border-color: var(--c-navy);
}
.shop-filter__size-chip:has(input:checked) > span,
.shop-filter__size-chip.is-checked > span {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}


/* ─── Active filter chips ────────────────────────────────────────── */

.shop-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-block-end: var(--sp-3);
	min-height: 0;
}
.shop-filters__active:empty {
	display: none;
}
.shop-filters__chip-active {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-3);
	background: var(--c-surface);
	border: var(--border-width-thin) solid var(--c-border);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	cursor: pointer;
	color: var(--c-text);
	transition: background var(--transition-fast);
}
.shop-filters__chip-active:hover {
	background: var(--c-coral);
	color: var(--c-white);
	border-color: var(--c-coral);
}


/* ─── Results area status + load-more ─────────────────────────────── */

.shop-layout__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	margin-block-end: var(--sp-5);
}

.shop-layout__status {
	text-align: center;
	padding-block: var(--sp-4);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	min-height: 2.5em;
}
.shop-layout__status.is-error {
	color: var(--c-sale);
}
.shop-layout__status.is-empty {
	color: var(--c-text-dark);
	font-style: italic;
}

.shop-layout__sentinel {
	width: 1px;
	height: 1px;
	margin-top: var(--sp-6);
}

.shop-layout__loadmore-wrap {
	text-align: center;
	margin-block-start: var(--sp-4);
}
.shop-layout__loadmore {
	min-width: 260px;
}

/* Loading skeleton — fade the grid on refetch to signal activity */
.shop-layout__results.is-loading ul.products {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--transition-fast);
}


/* ─── Quick-view modal ───────────────────────────────────────────── */

.quickview {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: none;
}
.quickview[aria-hidden="false"] {
	display: block;
}

.quickview__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 60%);
	cursor: pointer;
	animation: curvita-fade-in var(--transition-base);
}

.quickview__panel {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: min(1080px, 92vw);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--c-white);
	color: var(--c-text);
	display: flex;
	flex-direction: column;
	animation: curvita-quickview-in var(--transition-base);
}
/* Mobile rules consolidated below in the v0.8.9 section. */

@keyframes curvita-fade-in {
	from { opacity: 0; } to { opacity: 1; }
}
@keyframes curvita-quickview-in {
	from { opacity: 0; transform: translate(-50%, -48%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes curvita-quickview-slide-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.quickview__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-6);
	border-bottom: var(--border-width-thin) solid var(--c-border);
	position: sticky;
	top: 0;
	background: var(--c-white);
	z-index: 2;
}
.quickview__title {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	margin: 0;
}
.quickview__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-2);
	color: var(--c-text);
	cursor: pointer;
	background: transparent;
	border: 0;
}
.quickview__close:hover { color: var(--c-coral); }

.quickview__body {
	padding: var(--sp-6);
	min-height: 300px;
}


/* Quick-view inner product layout — mirror the single product grid */
.quickview-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-8);
}
@media (max-width: 767px) {
	.quickview-product { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.quickview-product__gallery {
	position: relative;
}
.quickview-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

.quickview-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.quickview-product__summary .product_title {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	margin: 0;
}
.quickview-product__summary .price {
	font-family: var(--font-body);
	font-size: var(--fs-single-product-price);
	font-weight: var(--fw-bold);
}
.quickview-product__summary .single_add_to_cart_button {
	background: var(--c-navy);
	color: var(--c-surface);
	border: var(--border-width) solid var(--c-navy);
	padding: var(--sp-3) var(--sp-8);
	font-family: var(--font-heading);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	cursor: pointer;
}
.quickview-product__summary .single_add_to_cart_button:hover {
	background: var(--c-coral);
	border-color: var(--c-coral);
}

.quickview-product__full-link {
	margin-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-coral);
	font-weight: var(--fw-bold);
	align-self: flex-start;
}

/* Spinner */
.quickview__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}
.quickview__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--c-border);
	border-top-color: var(--c-coral);
	border-radius: 50%;
	animation: curvita-spin 0.8s linear infinite;
}
@keyframes curvita-spin { to { transform: rotate(360deg); } }

/* Body scroll lock while modal open */
.has-quickview-open {
	overflow: hidden;
}


/* ─── Cart toast ─────────────────────────────────────────────────── */

.cart-toast {
	position: fixed;
	bottom: var(--sp-6);
	right: var(--sp-6);
	z-index: var(--z-toast);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-navy);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	transform: translateY(20px);
	opacity: 0;
	transition: transform var(--transition-base), opacity var(--transition-base);
	pointer-events: none;
}
.cart-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.cart-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--c-success);
	color: var(--c-white);
	border-radius: 50%;
	font-size: 12px;
}
@media (max-width: 599px) {
	.cart-toast {
		left: var(--sp-4);
		right: var(--sp-4);
		bottom: var(--sp-4);
		justify-content: center;
	}
}


/* =========================================================================
 * Curvita — v0.8.2 patches
 *   1. Smaller shop typography
 *   2. Tighter product grid (4/3/2)
 *   3. Mobile filter drawer toggle
 *   4. Remove load-more button styles (no longer used)
 *   5. "End of results" status styling
 * ========================================================================= */


/* ─── 1. Shop archive typography — dial it down ─────────────────── */

.woocommerce-products-header__title {
	font-size: var(--fs-2xl);        /* was fs-3xl */
	margin-block-end: var(--sp-2);
}
@media (max-width: 767px) {
	.woocommerce-products-header__title { font-size: var(--fs-xl); }
}

.woocommerce-result-count {
	font-size: var(--fs-xs);         /* was fs-sm */
}
.woocommerce-ordering select {
	font-size: var(--fs-xs);
	padding-block: 6px;
}


/* ─── 2. Tighter product grid ────────────────────────────────────── */

.curvita-product-grid {
	gap: var(--sp-4);                /* was sp-6 */
}
/* Override WC's own .columns-4 which sets conflicting rules */
.curvita-product-grid.columns-4,
ul.products.curvita-product-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--sp-4) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1279px) {
	.curvita-product-grid.columns-4,
	ul.products.curvita-product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 1023px) {
	.curvita-product-grid.columns-4,
	ul.products.curvita-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: var(--sp-3) !important;
	}
}
@media (max-width: 767px) {
	.curvita-product-grid.columns-4,
	ul.products.curvita-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--sp-3) !important;
	}
}

/* Smaller card text on shop archive */
.shop-layout__results .product-card__title {
	font-size: var(--fs-sm);
	letter-spacing: 0;
	line-height: 1.25;
}
.shop-layout__results .product-card__price {
	font-size: var(--fs-xs);
}
.shop-layout__results .product-card__cta {
	padding: 6px var(--sp-3);
	font-size: 10px;
}
.shop-layout__results .product-card__body {
	gap: var(--sp-1);
	padding-block-start: var(--sp-2);
}


/* ─── 3. Mobile filter drawer ────────────────────────────────────── */

.shop-layout__filters-toggle {
	display: none;  /* Shown via media query below */
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-navy);
	color: var(--c-white);
	border: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	cursor: pointer;
}
.shop-layout__filters-toggle:hover {
	background: var(--c-coral);
}

@media (max-width: 1023px) {
	.shop-layout__filters-toggle { display: inline-flex; }

	/* Sidebar turns into a full-screen drawer on the left */
	.shop-filters {
		position: fixed !important;
		inset: 0;
		z-index: var(--z-drawer);
		max-height: none;
		background: rgb(0 0 0 / 45%);    /* Backdrop */
		padding: 0;
		border: 0;
		transform: none;
		display: none;
	}
	.shop-filters.is-open {
		display: block;
	}
	.shop-filters > * {
		/* Drop children into a white inner panel anchored to the left */
		position: relative;
		background: var(--c-white);
		max-width: min(360px, 85vw);
		padding-inline: var(--sp-5);
	}
	.shop-filters > header.shop-filters__header {
		padding-block: var(--sp-4);
		position: sticky;
		top: 0;
		background: var(--c-white);
		z-index: 2;
		border-bottom: 1px solid var(--c-border);
	}
	.shop-filters > form.shop-filters__form {
		padding-block-end: var(--sp-6);
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
	.shop-filters > .shop-filters__active {
		padding-block: var(--sp-3);
	}

	.has-filters-drawer-open {
		overflow: hidden;
	}
}


/* ─── 4. Toolbar layout — button sits beside result count + sort ─── */

.shop-layout__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-block-end: var(--sp-4);
}
.shop-layout__toolbar .woocommerce-result-count {
	margin: 0;
	flex: 1 1 auto;
}
.shop-layout__toolbar .woocommerce-ordering {
	margin: 0;
}

/* ─── 5. End-of-results status ───────────────────────────────────── */

.shop-layout__status.is-end {
	padding-block: var(--sp-6);
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--c-coral);
	letter-spacing: var(--ls-wide);
}

.shop-layout__status.is-loading::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	margin-right: var(--sp-2);
	border: 2px solid var(--c-border);
	border-top-color: var(--c-coral);
	border-radius: 50%;
	animation: curvita-spin 0.8s linear infinite;
}

/* Sentinel element — invisible, just a scroll marker */
.shop-layout__sentinel {
	height: 1px;
	width: 100%;
}

/* ─── 6. Hide any pagination that leaks through via blocks/plugins ─ */

.shop-layout__main .woocommerce-pagination,
.shop-layout__main nav.pagination,
.shop-layout__main .page-numbers {
	display: none !important;
}

/* But not inside the single product page (comments pagination, etc.) */
.single-product-layout .page-numbers {
	display: inline-flex !important;
}


/* =========================================================================
 * v0.8.3 — archive template now runs (woocommerce.php deleted).
 * Force li.product to fill its grid cell, killing WC's legacy
 * float-based width/margin rules that were making cards render at
 * ~22% of the grid CELL (not the row) = ~64px wide.
 * ========================================================================= */

ul.products li.product,
ul.products.curvita-product-grid li.product {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: inherit;
}


/* =========================================================================
 * v0.8.4 — polish patches
 *   1. Kill legacy Ignition .shop-actions duplicate output
 *   2. Remove ugly horizontal borders and focus outlines
 *   3. Beautify filter sidebar (prominent Δημοφιλή, emoji legends)
 *   4. Style the Swiper-based quickview gallery
 * ========================================================================= */


/* ─── 1. Legacy Ignition markup cleanup ──────────────────────────── */

/* The old theme still outputs a '.shop-actions.with-sidebar' row above
 * our content with a duplicate filter toggle + result count + ordering
 * select. Hide it completely. Root-cause (a lingering Code Snippet or
 * plugin) can be hunted later. */
.shop-actions,
.shop-actions.with-sidebar,
.shop-filter-toggle.ignition-icons-bars,
main.main > .container > .row > .col-12 > .shop-actions {
	display: none !important;
}

/* The nested <main class="main"> is also legacy. Unwrap it visually
 * so its internal .container doesn't add another max-width layer. */
main#site-content > main.main {
	display: block;
	padding: 0;
	margin: 0;
}
main#site-content > main.main > .container {
	max-width: none;
	padding: 0;
}
main#site-content > main.main > .container > .row {
	display: block;
	margin: 0;
}
main#site-content > main.main > .container > .row > .col-12 {
	padding: 0;
	width: auto;
}


/* ─── 2. Defensive: no stray borders, focus rings ────────────────── */

.woocommerce-ordering,
.woocommerce-ordering select,
.woocommerce-ordering form {
	outline: none !important;
	box-shadow: none !important;
}
.woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--c-navy) !important;
	outline-offset: 2px;
}

/* Some Ignition leftovers emit <hr>s or ::after borders in the shop */
.woocommerce-wrap hr,
.shop-layout hr {
	display: none;
}


/* ─── 3. Filter sidebar — premium polish ─────────────────────────── */

/* Prominent Δημοφιλή button — fills the width, brand gradient, signals
 * "this is the killer filter". */
.shop-filter--popular {
	padding: 0 0 var(--sp-4) 0;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: var(--sp-2);
}
.shop-filter__chip--popular {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	padding: 14px var(--sp-4) !important;
	background: linear-gradient(135deg, #FFA6C9 0%, #E27C7C 100%) !important;
	color: #fff !important;
	border: 0 !important;
	font-family: var(--font-heading);
	font-size: 13px !important;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}
.shop-filter__chip--popular:hover {
	transform: translateY(-1px);
}
.shop-filter__chip--popular:has(input:checked),
.shop-filter__chip--popular.is-checked {
	background: var(--c-navy) !important;
	color: #fff !important;
}

/* Nicer legend with more confidence */
.shop-filter__legend {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text);
	margin-block-end: var(--sp-3);
	padding: 0;
}

/* Tidier toggles — pill-like rows that highlight on hover */
.shop-filter__toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 8px var(--sp-2);
	margin-inline: calc(var(--sp-2) * -1);
	font-size: 0.875rem;
	color: var(--c-text-dark);
	cursor: pointer;
	transition: background 0.15s;
}
.shop-filter__toggle:hover {
	background: var(--c-surface);
}
.shop-filter__toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--c-coral);
	margin: 0;
}
.shop-filter__toggle:has(input:checked) {
	color: var(--c-coral);
	font-weight: 600;
}


/* Colors — bigger, friendlier swatches with hover lift */
.shop-filter__swatches {
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: var(--sp-3);
}
.shop-filter__swatch-dot {
	width: 30px;
	height: 30px;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}
.shop-filter__swatch:hover .shop-filter__swatch-dot {
	transform: scale(1.15);
}

/* Sizes — chips with more presence */
.shop-filter__sizes {
	gap: 8px;
}
.shop-filter__size-chip > span {
	min-width: 46px;
	padding-inline: var(--sp-4);
	font-size: 13px;
	letter-spacing: 0.05em;
}

/* Categories — lighter checkboxes */
.shop-filter__check {
	padding: 6px 0;
	font-size: 0.875rem;
}
.shop-filter__check input {
	width: 18px;
	height: 18px;
	accent-color: var(--c-coral);
}

/* Active chips — more pill-like, softer */
.shop-filters__active {
	padding: 12px var(--sp-3);
	background: var(--c-surface);
	border: 1px dashed var(--c-border);
	margin-block: var(--sp-2) var(--sp-4);
}
.shop-filters__active:empty {
	display: none;
}
.shop-filters__chip-active {
	padding: 5px 12px;
	font-size: 11px;
	letter-spacing: 0.05em;
	background: #fff;
	border: 1px solid var(--c-coral);
	color: var(--c-coral);
	text-transform: none;
	font-weight: 600;
}
.shop-filters__chip-active:hover {
	background: var(--c-coral);
	color: #fff;
}

/* Overall sidebar — more padding, cleaner */
.shop-filters {
	padding: var(--sp-6) var(--sp-5);
}
.shop-filters__header {
	padding-block-end: var(--sp-3);
	border-bottom: 1px solid var(--c-border);
	margin-block-end: var(--sp-4);
}
.shop-filters__title {
	font-size: 0.9rem;
	letter-spacing: 0.15em;
}


/* ─── 4. Quickview Swiper gallery ────────────────────────────────── */

.quickview-gallery {
	position: relative;
	width: 100%;
	background: var(--c-surface);
}
.quickview-gallery__swiper {
	width: 100%;
	aspect-ratio: 3 / 4;
}
.quickview-gallery__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-surface);
}
.quickview-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Nav arrows — soft circles, not Swiper's default chunky ones */
.quickview-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	color: var(--c-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}
.quickview-gallery__nav::after {
	content: none;  /* Override Swiper's default ::after arrow */
}
.quickview-gallery__nav--prev { left: 12px; }
.quickview-gallery__nav--next { right: 12px; }
.quickview-gallery__nav:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}
.quickview-gallery__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Pagination dots — subtle, coral for active */
.quickview-gallery__pagination {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.quickview-gallery__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.9);
	opacity: 1;
	border-radius: 0;
	transition: background 0.2s, transform 0.2s;
}
.quickview-gallery__pagination .swiper-pagination-bullet-active {
	background: var(--c-coral);
	transform: scale(1.2);
}

/* Empty gallery placeholder */
.quickview-gallery--empty {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quickview-gallery--empty img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.4;
}


/* =========================================================================
 * v0.8.5 — aggressive polish patch
 *   1. Kill old theme's .ignition-product-summary-wrap layout impact
 *   2. Reset WC's default variation table borders (black 1px boxes)
 *   3. Remove the bordered box around description tab panel
 *   4. Smaller single product H1 (stop the vertical title wrap)
 *   5. Coral focus rings (not system blue)
 *   6. Tighter + modern single product page layout
 * ========================================================================= */


/* ─── 1. Ignition summary wrapper → no-op passthrough ─────────────── */

/* The old theme registered a hook on woocommerce_before_single_product_summary
 * that wraps everything in this div. The hook still fires on our theme
 * (probably from a lingering Code Snippet or plugin). Style it as a
 * layout-neutral wrapper so it doesn't cramp our children. */
.ignition-product-summary-wrap {
	display: contents;
}


/* ─── 2. Variation table — no borders, cleaner vertical rhythm ───── */

table.variations,
table.variations tbody,
table.variations tr,
table.variations td,
table.variations th {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

table.variations {
	display: block;           /* Break out of WC's table layout */
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--sp-3) 0;
}
table.variations tbody,
table.variations tr {
	display: block;
	width: 100%;
	margin-block-end: var(--sp-3);
}
table.variations td.label,
table.variations th.label {
	display: block;
	width: 100%;
	padding-block-end: var(--sp-1) !important;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text);
}
table.variations td.value {
	display: block;
	width: 100%;
}
table.variations td.value select {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border) !important;
}
table.variations td.value select:focus-visible {
	outline: 2px solid var(--c-coral);
	outline-offset: 1px;
	border-color: var(--c-coral) !important;
}


/* ─── 3. Description tab — NO confining border box ───────────────── */

.woocommerce-tabs .wc-tab,
.woocommerce-tabs .panel,
.woocommerce-tabs > .panel {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 var(--sp-6) 0;
	box-shadow: none !important;
}
.woocommerce-tabs .wc-tab p,
.woocommerce-tabs .panel p {
	margin-block-end: var(--sp-3);
	line-height: 1.65;
}

/* Tab headers — modern minimalist */
.woocommerce-tabs ul.tabs {
	margin: 0 0 var(--sp-5) 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--c-border) !important;
	list-style: none;
	display: flex;
	gap: var(--sp-4);
	background: none !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
	display: none !important;
}
.woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--sp-3) 0;
	margin-bottom: -1px;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text-muted);
	border-bottom: 3px solid transparent;
	background: none !important;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--c-text);
	border-bottom-color: var(--c-coral);
}


/* ─── 4. Single product H1 + price + layout — modern scale ───────── */

.single-product-layout__summary .product_title,
.quickview-product__summary .product_title {
	font-family: var(--font-heading);
	font-size: 1.375rem !important;     /* 22px — much smaller than old 32px */
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	margin: 0 0 var(--sp-2) 0 !important;
	color: var(--c-text);
}
@media (min-width: 1024px) {
	.single-product-layout__summary .product_title {
		font-size: 1.625rem !important;  /* 26px on desktop single product */
	}
}


/* Price — right under title, no big gaps */
.single-product-layout__summary .price,
.quickview-product__summary .price {
	font-family: var(--font-body);
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin: 0 0 var(--sp-4) 0 !important;
	color: var(--c-text);
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.single-product-layout__summary .price del,
.quickview-product__summary .price del {
	color: var(--c-text-muted);
	text-decoration: line-through;
	font-weight: 400;
	font-size: 1.1rem;
}
.single-product-layout__summary .price ins,
.quickview-product__summary .price ins {
	color: var(--c-sale);
	text-decoration: none;
}


/* ATC button — refined */
.single_add_to_cart_button,
.quickview-product__summary .single_add_to_cart_button {
	width: 100%;
	padding: 14px var(--sp-6) !important;
	background: var(--c-navy) !important;
	color: #fff !important;
	border: 2px solid var(--c-navy) !important;
	font-family: var(--font-heading);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.single_add_to_cart_button:hover:not(.disabled):not([disabled]) {
	background: var(--c-coral) !important;
	border-color: var(--c-coral) !important;
}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled] {
	opacity: 0.55 !important;
	cursor: not-allowed;
}

/* Qty input — aligned with ATC */
.single-product-layout__summary .quantity,
.quickview-product__summary .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--c-border);
	margin-right: var(--sp-3);
}
.single-product-layout__summary .quantity .qty,
.quickview-product__summary .quantity .qty {
	width: 54px;
	height: 44px;
	border: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}
.single-product-layout__summary .quantity button,
.quickview-product__summary .quantity button {
	width: 36px;
	height: 44px;
	background: transparent;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	color: var(--c-text);
}

/* Qty + ATC row as flex */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}
form.cart .quantity {
	flex: 0 0 auto;
}
form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 200px;
	width: auto;
}


/* ─── 5. Product meta — subtle, no hr ────────────────────────────── */

.product_meta,
.single-product-layout__summary .product_meta,
.quickview-product__summary .product_meta {
	margin-top: var(--sp-4) !important;
	padding-top: var(--sp-4) !important;
	border-top: 1px solid var(--c-border) !important;
	border-bottom: 0 !important;
	font-size: 12px !important;
	color: var(--c-text-muted);
	line-height: 1.6;
}
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
	display: block;
	margin-block-end: 4px;
}
.product_meta a {
	color: var(--c-text-dark);
	text-decoration: underline;
}
.product_meta a:hover {
	color: var(--c-coral);
}


/* ─── 6. Kill decorative hrs + trailing borders on single product ── */

.single-product-layout hr,
.single-product-layout .wp-block-separator,
body.single-product hr:not(.wp-block-separator-marker) {
	display: none !important;
}

/* WC's default product divider */
.woocommerce-product-gallery ~ hr,
.product .entry-summary hr,
.woocommerce-tabs::before,
.woocommerce-tabs::after {
	display: none !important;
}


/* ─── 7. Reset variation 'Clear' link visibility until active ────── */

/* Ensure the ×-looking "Clear" link stays hidden until user picks
 * a variation. WC's default CSS does this but our reset might have
 * unmasked it. */
a.reset_variations {
	visibility: hidden;
	font-size: 12px !important;
	color: var(--c-coral) !important;
	margin-left: var(--sp-2);
}
.variations_form .woocommerce-variation-add-to-cart-disabled .reset_variations,
.variations_form .woocommerce-variation-add-to-cart-enabled .reset_variations {
	visibility: visible;
}


/* ─── 8. Coral focus rings (not system blue) ─────────────────────── */

.quickview-gallery__nav:focus,
.quickview-gallery__nav:focus-visible {
	outline: 2px solid var(--c-coral) !important;
	outline-offset: 2px;
}
.quickview__close:focus,
.quickview__close:focus-visible {
	outline: 2px solid var(--c-coral);
	outline-offset: 2px;
}

/* Global focus — make all focus rings coral instead of system blue */
*:focus-visible {
	outline-color: var(--c-coral) !important;
}


/* ─── 9. Quickview tweaks — less vertical bloat ──────────────────── */

.quickview-product__summary {
	gap: 0 !important;
	padding-inline-start: var(--sp-4);
}
.quickview-product__summary .woocommerce-product-details__short-description {
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text-dark);
	margin-block: var(--sp-2) var(--sp-3);
}
.quickview-product__full-link {
	margin-top: var(--sp-4) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--c-coral);
}
.quickview-product__full-link:hover {
	color: var(--c-navy);
}


/* =========================================================================
 * v0.8.6 — FORCE-FILL single product layout
 *   Root cause: WC's default .woocommerce div.product rules set
 *   max-width:40% on .images and max-width:60% on .summary. Inside
 *   our grid cells these constraints render each half at 40-60% of
 *   its ALREADY-HALF cell = ~20-25% of the container. Everything
 *   below forces them back to 100% of their own cell.
 * ========================================================================= */


/* ─── 1. Gallery fills its column entirely ───────────────────────── */

.single-product-layout__gallery .woocommerce-product-gallery,
.woocommerce div.product .single-product-layout__gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.single-product-layout__gallery .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* FlexSlider owns the wrapper + slide geometry via INLINE styles
 * (rail width:1000%, per-slide pixel widths, translate3d). v0.8.6
 * force-filled these to width:100% !important, which crushed the
 * rail to one slide wide — the floated slides wrapped VERTICALLY
 * and every thumbnail click translated the viewport into blank
 * space (bug found during launch verification, v0.16.0). Never
 * constrain these two once flexslider has initialised. */
.single-product-layout__gallery .flex-viewport .woocommerce-product-gallery__wrapper,
.single-product-layout__gallery .flex-viewport .woocommerce-product-gallery__image {
	max-width: none !important;
}

/* Pre-init and single-image galleries (wrapper still a direct child
 * of the gallery — flexslider hasn't wrapped it in .flex-viewport)
 * keep the original force-fill so nothing renders at WC's 40%. */
.single-product-layout__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.single-product-layout__gallery .woocommerce-product-gallery__image img,
.single-product-layout__gallery .wp-post-image {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block;
}

/* ─── Thumbnails (v0.16.0) ────────────────────────────────────────
 * Desktop ≥768px: vertical column on the LEFT of the main image —
 * the gallery becomes a 2-col grid, but only when flexslider has
 * actually built thumbs (:has guard keeps single-image products,
 * and the pre-init flash, at full width). Browsers without :has()
 * gracefully keep the mobile layout: a strip below the image.
 * Mobile <768px: roomier horizontal strip below the main image. */

.single-product-layout__gallery .flex-control-thumbs,
.single-product-layout__gallery ol.flex-control-nav {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
	gap: var(--sp-2) !important;
	list-style: none !important;
	margin: var(--sp-3) 0 0 0 !important;
	padding: 0 !important;
	width: 100%;
}
.single-product-layout__gallery .flex-control-thumbs li {
	list-style: none !important;
	margin: 0 !important;
	width: 100% !important;
	/* WC core sizes thumb columns via max-width:25% — a layout
	 * CONSTRAINT that beats any width declaration, even inline
	 * !important. This single line is what kept the thumbs at
	 * 22px through two fix attempts (v0.16.2). */
	max-width: none !important;
	float: none !important;
	cursor: pointer;
}
.single-product-layout__gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.6;
	border: 2px solid transparent;
	transition: opacity 0.2s, border-color 0.2s;
}
.single-product-layout__gallery .flex-control-thumbs img.flex-active,
.single-product-layout__gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--c-navy);
}

@media (min-width: 768px) {
	.single-product-layout__gallery .woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		gap: var(--sp-3);
		align-items: start;
	}
	.single-product-layout__gallery .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-viewport {
		grid-column: 2;
		grid-row: 1;
	}
	.single-product-layout__gallery .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		display: flex !important;
		flex-direction: column;
		/* WC core gives thumbs flex-wrap:wrap + li width:25%. In our
		 * COLUMN direction that 25% becomes the vertical flex-basis,
		 * the five items overflow and wrap into multiple skinny
		 * side-by-side columns (88px / 4 lines = 22px specks). Kill
		 * the wrap here and the basis on the li below. */
		flex-wrap: nowrap !important;
		gap: var(--sp-2) !important;
		margin: 0 !important;
		width: 100%;
	}
	.single-product-layout__gallery .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-control-thumbs li {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}



/* ─── 2. Summary fills its column entirely ───────────────────────── */

.single-product-layout__summary,
.single-product-layout__summary.summary,
.single-product-layout__summary.entry-summary,
.woocommerce div.product .single-product-layout__summary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}


/* ─── 3. Revised grid split — gallery gets more share ────────────── */

.single-product-layout__top {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
	gap: var(--sp-8);
	align-items: start;
}
@media (max-width: 1023px) {
	.single-product-layout__top {
		grid-template-columns: 1fr !important;
		gap: var(--sp-6);
	}
}


/* ─── 4. Description + tabs fill container ───────────────────────── */

.woocommerce-tabs,
.single-product-layout__tabs {
	width: 100% !important;
	max-width: 100% !important;
}
.woocommerce-tabs .panel,
.woocommerce-tabs .wc-tab {
	max-width: none !important;
	width: 100% !important;
}
/* Description text: wider reading measure, fills the 2-col feel */
.woocommerce-tabs .panel p,
.woocommerce-tabs .wc-tab p,
.woocommerce-tabs .panel > div,
.woocommerce-tabs .wc-tab > div {
	max-width: 90ch;
	line-height: 1.7;
	color: var(--c-text-dark);
}
.woocommerce-tabs .panel h2,
.woocommerce-tabs .wc-tab h2 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-block: 0 var(--sp-4);
}
/* If the description has tables (like the "Additional information"
 * tab), style them consistently */
.woocommerce-tabs .shop_attributes,
.woocommerce-tabs table.shop_attributes {
	width: 100%;
	max-width: 600px;
	border-collapse: collapse;
	margin-top: var(--sp-3);
}
.woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .shop_attributes td {
	padding: 10px 14px;
	font-size: 14px;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
}
.woocommerce-tabs .shop_attributes th {
	width: 35%;
	font-weight: 600;
	background: var(--c-surface);
	color: var(--c-text);
}


/* ─── 5. Hide tbi-bank widget inside quickview (modal-in-modal bug) */

.quickview-product__summary .tbicredit,
.quickview-product__summary [class*="tbicredit"],
.quickview-product__summary [class*="tbi-widget"],
.quickview-product__summary [class*="tbibank"],
.quickview-product__summary .tbi-shortcode,
.quickview-product__summary [id*="tbi"],
.quickview-product .tbicredit,
.quickview-product [class*="tbicredit"],
.quickview-product [class*="tbibank"],
.quickview-product [class*="tbi-widget"] {
	display: none !important;
}

/* Inform user via the "see full product page" link that they'll get
 * full installment info there */


/* ─── 6. Breadcrumb border cleanup + vertical rhythm ──────────────── */

.woocommerce-breadcrumb-wrap,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
	border-bottom: 0 !important;
	padding-block-end: var(--sp-3) !important;
	margin-block-end: var(--sp-4) !important;
}

/* Any stray hr that appears right after the breadcrumb (various
 * plugins / Ignition leftovers add these) */
.woocommerce-wrap > hr:first-child,
main#site-content > hr,
.woocommerce-breadcrumb-wrap + hr,
.woocommerce-breadcrumb + hr {
	display: none !important;
}


/* ─── 7. Related products — not wasted full-width block ──────────── */

.related.products,
.woocommerce-tabs ~ .related.products {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: var(--sp-12) !important;
	padding-top: var(--sp-8) !important;
	border-top: 1px solid var(--c-border);
}
.related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--sp-4) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1023px) {
	.related.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 767px) {
	.related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--sp-3) !important;
	}
}
.related.products > h2 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block-end: var(--sp-5);
}


/* ─── 8. Responsive single product ────────────────────────────────── */

@media (max-width: 767px) {
	.single-product-layout__summary .product_title {
		font-size: 1.25rem !important;
	}
	.single-product-layout__summary .price {
		font-size: 1.25rem !important;
	}
	.woocommerce-tabs ul.tabs {
		overflow-x: auto;
		white-space: nowrap;
		gap: var(--sp-3);
	}
	.woocommerce-tabs ul.tabs li a {
		padding: var(--sp-2) 0;
		font-size: 10px;
	}
	.single-product-layout__gallery .flex-control-thumbs,
	.single-product-layout__gallery ol.flex-control-nav {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	form.cart {
		flex-wrap: wrap;
	}
	form.cart .single_add_to_cart_button {
		width: 100%;
	}
}


/* =========================================================================
 * v0.8.7 — polish trio
 *   1. Nuke WC's default tab borders + pseudo-element "ears"
 *   2. Bigger gallery thumbnails
 *   3. Transparent quickview nav arrows (no pill background)
 * ========================================================================= */


/* ─── 1. Tab borders — completely flat ───────────────────────────── */

/* WC's default tabs have the "rounded tab with ears" look via
 * pseudo-elements ::before and ::after. Even when I zero out the
 * border on the <li> itself, the pseudo-elements render tiny corner
 * borders that look like a box around each tab. Explicitly kill
 * both pseudo-elements and any inherited border. */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.wc-tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.wc-tabs li::before,
.woocommerce-tabs ul.wc-tabs li::after {
	display: none !important;
	content: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}


/* ─── 2. Bigger product thumbnails ───────────────────────────────── */

/* Was 6 columns, too small. 5 is roomier. */
.single-product-layout__gallery .flex-control-thumbs,
.single-product-layout__gallery ol.flex-control-nav {
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 10px !important;
	margin-top: var(--sp-4) !important;
}

/* Make the active thumb clearly marked */
.single-product-layout__gallery .flex-control-thumbs img.flex-active {
	box-shadow: 0 0 0 2px var(--c-coral);
}

@media (max-width: 767px) {
	.single-product-layout__gallery .flex-control-thumbs,
	.single-product-layout__gallery ol.flex-control-nav {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px !important;
	}
}


/* ─── 3. Transparent quickview nav arrows ────────────────────────── */

.quickview-gallery__nav,
.quickview-gallery__nav--prev,
.quickview-gallery__nav--next {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff;
	font-size: 48px !important;
	line-height: 1;
	width: 48px;
	height: 48px;
	/* Drop shadow on the glyph itself so it stays visible against
	 * both light and dark product photography */
	text-shadow: 0 2px 8px rgb(0 0 0 / 40%), 0 0 2px rgb(0 0 0 / 60%);
	transition: transform 0.15s, text-shadow 0.15s;
}
.quickview-gallery__nav:hover,
.quickview-gallery__nav:focus-visible {
	background: transparent !important;
	transform: translateY(-50%) scale(1.15);
	text-shadow: 0 2px 12px rgb(0 0 0 / 60%), 0 0 2px rgb(0 0 0 / 80%);
}
.quickview-gallery__nav--prev:hover,
.quickview-gallery__nav--prev:focus-visible,
.quickview-gallery__nav--next:hover,
.quickview-gallery__nav--next:focus-visible {
	transform: translateY(-50%) scale(1.15);
}


/* =========================================================================
 * v0.8.8 — Custom sort widget
 * ========================================================================= */

.shop-sort {
	position: relative;
	margin-left: auto;       /* Push to the right of the toolbar */
	font-family: var(--font-body);
}

/* Hide WC's legacy ordering form if it slips through anywhere */
.woocommerce-ordering {
	display: none !important;
}

.shop-sort__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--c-border);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	min-width: 220px;
	justify-content: space-between;
}
.shop-sort__trigger:hover {
	border-color: var(--c-coral);
	color: var(--c-coral);
}
.shop-sort.is-open .shop-sort__trigger {
	border-color: var(--c-navy);
	background: var(--c-surface);
}

.shop-sort__icon {
	flex-shrink: 0;
	color: var(--c-coral);
}
.shop-sort__current-label {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shop-sort__chevron {
	flex-shrink: 0;
	transition: transform 0.2s;
	color: var(--c-text-muted);
}
.shop-sort.is-open .shop-sort__chevron {
	transform: rotate(180deg);
	color: var(--c-navy);
}


/* Dropdown menu */
.shop-sort__menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 280px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--c-border);
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%), 0 2px 4px rgb(0 0 0 / 4%);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	z-index: var(--z-dropdown);
	animation: shop-sort-fade-in 0.15s ease-out;
}
@keyframes shop-sort-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.shop-sort__menu[hidden] {
	display: none !important;
}

.shop-sort__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	font-size: 14px;
	color: var(--c-text);
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
	user-select: none;
}
.shop-sort__option:hover {
	background: var(--c-surface);
	color: var(--c-coral);
}
.shop-sort__option.is-active {
	color: var(--c-coral);
	font-weight: 700;
	background: rgb(226 124 124 / 5%);     /* Very faint coral wash */
}
.shop-sort__option.is-active:hover {
	background: rgb(226 124 124 / 10%);
}
.shop-sort__check {
	flex-shrink: 0;
	color: var(--c-coral);
}


/* ─── Mobile responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
	.shop-sort {
		margin-left: 0;
		flex: 1 1 auto;
	}
	.shop-sort__trigger {
		min-width: 0;
		width: 100%;
		padding: 9px 12px;
		font-size: 12px;
	}
	.shop-sort__menu {
		left: 0;
		right: 0;
		min-width: 0;
	}
}

/* Restack toolbar on mobile so filters button + sort sit nicely */
@media (max-width: 767px) {
	.shop-layout__toolbar {
		gap: var(--sp-2);
	}
	.shop-layout__toolbar .woocommerce-result-count {
		flex: 0 0 100%;
		order: -1;
	}
}


/* =========================================================================
 * v0.8.9 — Quickview modal: mobile fixes
 *
 * Problems on iPhone Safari (≤767px):
 *   1. Panel was display:flex column with no explicit body flex → 1,
 *      so on tall viewports the body didn't fill, and gallery
 *      aspect-ratio 3/4 pushed content below the visible area.
 *   2. <html> kept scrolling under the modal because we only locked
 *      <body>. iOS treats the document scroll independently of body.
 *   3. Sticky header inside a scroll container that doesn't actually
 *      scroll (because content overflows the panel, not the body).
 * ========================================================================= */


/* ─── Mobile panel: real bottom-sheet behavior ────────────────────── */

@media (max-width: 767px) {

	/* Lock body scroll only — DO NOT set position:fixed on <html>,
	 * that breaks position:fixed for all descendants on iOS Safari.
	 * The JS layer adds the class and saves+restores scrollY. */
	body.has-quickview-open {
		overflow: hidden !important;
		position: fixed !important;
		left: 0;
		right: 0;
		width: 100%;
		/* `top` is set via JS to -scrollY so the page doesn't jump */
	}

	/* The modal itself sits OUTSIDE body.has-quickview-open's fixed
	 * positioning context because it's already position:fixed. But
	 * to be safe on iOS, ensure it stays anchored to the viewport. */
	.quickview[aria-hidden="false"] {
		position: fixed !important;
		inset: 0 !important;
	}

	/* Panel: real flex column that fills the viewport */
	.quickview__panel {
		position: absolute !important;
		inset: 0 !important;
		transform: none !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;     /* dynamic viewport — accounts for iOS chrome */
		max-height: 100vh !important;
		max-height: 100dvh !important;
		overflow: hidden !important;   /* The body scrolls, not the panel */
		display: flex !important;
		flex-direction: column !important;
	}

	/* Header — fixed at top, doesn't scroll, doesn't shrink */
	.quickview__header {
		flex: 0 0 auto !important;
		position: relative !important;  /* No need for sticky inside flex column */
		top: auto !important;
	}

	/* Body — fills remaining space, scrolls internally */
	.quickview__body {
		flex: 1 1 auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
		min-height: 0 !important;            /* Critical for flex-basis to work in column */
		padding: var(--sp-4) !important;
	}

	/* Stack gallery + summary vertically inside the scrolling body */
	.quickview-product {
		grid-template-columns: 1fr !important;
		gap: var(--sp-4) !important;
	}

	/* Gallery: dial back the aspect ratio so it doesn't dominate
	 * the screen on first scroll. 4:5 is a more compact portrait. */
	.quickview-gallery__swiper {
		aspect-ratio: 4 / 5 !important;
	}

	/* Summary needs no left padding (was inset-only on desktop) */
	.quickview-product__summary {
		padding-inline-start: 0 !important;
	}

	/* Title smaller on mobile */
	.quickview-product__summary .product_title {
		font-size: 1.125rem !important;
	}
}


/* Cart toast — respect iOS safe area at the bottom */
.cart-toast {
	bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0px) + var(--sp-3));
}
@media (max-width: 599px) {
	.cart-toast {
		bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px) + var(--sp-2));
	}
}


/* =========================================================================
 * v0.8.11 — Quickview disabled on mobile
 *
 * Variable-product cards now render <a href={permalink}> with two
 * label spans: 'Γρήγορη προβολή' (desktop) and 'Δες το προϊόν' (mobile).
 * CSS picks the visible one. JS only attaches click-to-modal behavior
 * at viewport ≥1024px (laptop and up).
 * ========================================================================= */

.product-card__cta-label--mobile { display: none; }
.product-card__cta-label--desktop { display: inline; }

@media (max-width: 1023px) {
	.product-card__cta-label--mobile { display: inline; }
	.product-card__cta-label--desktop { display: none; }
}


/* =========================================================================
 * Product description — enforced calm typography (v0.20.0)
 * Legacy store descriptions arrive authored as h3/h4 "paragraphs"
 * (every line a heading) plus inline font sizes — the page shouts.
 * Normalise everything inside the description panels to body text;
 * only the panel's own h2 tab title stays a modest heading.
 * ========================================================================= */

.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4,
.woocommerce-Tabs-panel--description h5,
.woocommerce-Tabs-panel--description h6,
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description h4,
.woocommerce-product-details__short-description h5,
.woocommerce-product-details__short-description h6 {
	font-family: var(--font-body) !important;
	font-size: var(--fs-base) !important;
	font-weight: 400 !important;
	line-height: 1.625 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--c-text) !important;
	margin: 0 0 var(--sp-3) !important;
}

.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li,
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description li {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.625;
	color: var(--c-text);
}

/* The tab's own heading ("Περιγραφή") — modest, on-brand. */
.woocommerce-Tabs-panel--description > h2:first-child {
	font-family: var(--font-heading) !important;
	font-size: 20px !important;
	font-weight: var(--fw-semibold) !important;
	margin: 0 0 var(--sp-4) !important;
}

/* Inline font sizes pasted with the content lose the fight. */
.woocommerce-Tabs-panel--description [style*="font-size"],
.woocommerce-product-details__short-description [style*="font-size"],
.woocommerce-Tabs-panel--description font {
	font-size: inherit !important;
}

/* Emoji images embedded by WP stay text-sized. */
.woocommerce-Tabs-panel--description img.emoji {
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
}


/* =========================================================================
 * Single product — mobile layout (v0.20.0)
 * The page never had a mobile pass: the 2-col desktop grid persisted
 * on phones, the summary escaped its container (574px wide on a
 * 500px viewport, zero padding, button adrift). Stack and contain.
 * ========================================================================= */

@media (max-width: 767px) {

	.single-product-layout__top {
		display: block;
		margin-block-end: var(--sp-8);
		/* FlexSlider can hold stale desktop slide widths after a
		 * viewport change; never let the gallery push the page
		 * sideways on phones. */
		overflow-x: clip;
	}

	.single-product-layout__gallery {
		margin-block-end: var(--sp-6);
	}

	/* Heavyweight selector required (v0.20.2): the v0.8.6 force-fill
	 * uses `.woocommerce div.product .single-product-layout__summary`
	 * (0,2,1) with padding:0 !important — a bare class with
	 * !important still LOSES on specificity. Match its weight; this
	 * block is later in the file, so the tie breaks our way. */
	.woocommerce div.product .single-product-layout__summary,
	.single-product-layout__summary.summary,
	.single-product-layout__summary {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-inline: var(--sp-4) !important;
		margin: 0 !important;
	}

	/* Quantity + CTA: tidy row that wraps into a full-width button. */
	.single-product-layout__summary form.cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-3);
	}
	.single-product-layout__summary form.cart .quantity {
		margin: 0;
	}
	.single-product-layout__summary .single_add_to_cart_button {
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
		padding-block: 14px;
	}
	.single-product-layout__summary table.variations {
		width: 100%;
	}
}


/* =========================================================================
 * Sale badge vs the thumbnail rail (v0.20.1)
 * span.onsale is absolutely positioned at the gallery column's
 * top-left (left:15px) — which, since the v0.16.0 thumbnail rail,
 * is the THUMBS, not the photo. On desktop with a rail present,
 * shift it right past the rail (88px) + grid gap so it sits on the
 * main image. Mobile keeps the original position (thumbs live
 * below the image there).
 * ========================================================================= */

@media (min-width: 768px) {
	/* v0.20.3: an external stylesheet (old-theme relic, not ours)
	 * declares `.single-product div.product .onsale { left:15px }`
	 * at (0,3,1) — one element selector heavier than the :has rule's
	 * (0,3,0). Prefix .single-product → (0,4,0) and outrank it. */
	.single-product .single-product-layout__gallery:has(.flex-control-thumbs) > .onsale,
	.single-product .single-product-layout__gallery:has(.flex-control-thumbs) .woocommerce-product-gallery > .onsale,
	.single-product-layout__gallery:has(.flex-control-thumbs) > .onsale,
	.single-product-layout__gallery:has(.flex-control-thumbs) .woocommerce-product-gallery > .onsale {
		left: calc(88px + var(--sp-3) + 15px) !important;
	}
}


/* =========================================================================
 * Related products — calm card typography (v0.21.0)
 * The 20px card text overrides are scoped to .shop-layout__results,
 * which the related section doesn't have — so its cards fell back
 * to raw heading sizes (32px/600 titles: shouting). Mirror the shop
 * grid's scale, and dress the section heading like a homepage
 * products-section title.
 * ========================================================================= */

.related.products > h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	margin: 0 0 var(--sp-6);
}

.related.products .product-card__title {
	font-size: var(--fs-sm);
	letter-spacing: 0;
	line-height: 1.25;
}
.related.products .product-card__price {
	font-size: var(--fs-xs);
}
.related.products .product-card__cta {
	padding: 6px var(--sp-3);
	font-size: 10px;
}
.related.products .product-card__body {
	gap: var(--sp-1);
	padding-block-start: var(--sp-2);
}

@media (max-width: 767px) {
	.related.products > h2 {
		font-size: var(--fs-xl);
		margin-block-end: var(--sp-4);
	}
}