/*
 * Candle Shine — shop styles.
 *
 * Loaded only on routes that need it (see candleshine_needs_shop_assets()).
 * Same authoring rules as theme.css: logical properties only, tokens only,
 * motion under 320ms. WooCommerce's own class names are targeted where plugins
 * depend on them, with the theme's `cs-` classes doing the actual layout work.
 *
 * Sections
 *   01 WooCommerce resets      06 Product gallery       11 Checkout
 *   02 Product card            07 Purchase area         12 My account
 *   03 Product grid            08 Specs & tabs          13 Notices
 *   04 Shop header & toolbar   09 Reviews               14 Quick view
 *   05 Filters                 10 Cart                  15 Sticky buy bar
 *                                                        16 Template composition
 *                                                        17 WooCommerce blocks
 *                                                        18 Very small phones
 */

/* =========================================================================
 * 01 — WooCommerce resets
 * ====================================================================== */

/* WooCommerce ships a handful of layout rules in woocommerce-general that fight
   any custom grid. These neutralise them without dequeuing the sheet, because
   plugins hook onto its selectors. */
.woocommerce .products ul,
.woocommerce ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-products-header {
	display: none;
}

/*
 * WooCommerce's stylesheet puts a clearfix ::before/::after on the product list and the
 * add-to-cart form. On the float layout those templates were written for it is
 * harmless — but on a CSS grid each pseudo-element becomes a real grid item and
 * consumes a cell, pushing the first product out of the first column and leaving a
 * visible hole in the top row.
 *
 * `content: none` alone is not enough: the rule it has to beat is
 * `.woocommerce ul.products::before`, so the selector below carries higher specificity,
 * and `display: none` guarantees no box is generated whatever the source.
 */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce ul.products.cs-products::before,
.woocommerce ul.products.cs-products::after,
ul.products.cs-products::before,
ul.products.cs-products::after,
.cs-products::before,
.cs-products::after {
	content: none;
	display: none;
}

/* WooCommerce buttons that the theme has not explicitly re-classed still need to
   look like theme buttons (plugin-added buttons, endpoint actions, and so on). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-2);
	min-height: 48px;
	padding: var(--cs-3) var(--cs-6);
	border: 1px solid var(--cs-brand);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	font-family: var(--cs-font-sans);
	font-size: var(--cs-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	touch-action: manipulation;
	transition: background-color var(--cs-dur-fast) var(--cs-ease),
		border-color var(--cs-dur-fast) var(--cs-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--cs-brand-dark);
	border-color: var(--cs-brand-dark);
	color: var(--cs-on-brand);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* WooCommerce's "added to cart" tick link next to loop buttons. */
.woocommerce a.added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: var(--cs-2);
	font-size: var(--cs-text-sm);
	font-weight: 700;
}

/* Price markup emitted by WooCommerce. */
.woocommerce del,
.woocommerce del .amount {
	color: var(--cs-ink-4);
	font-weight: 400;
	text-decoration: line-through;
}

.woocommerce ins,
.woocommerce ins .amount {
	text-decoration: none;
	font-weight: 700;
}

/* =========================================================================
 * 02 — Product card
 * ====================================================================== */

/*
 * The card has one link — the product title — and that link's ::after stretches over
 * the whole card, so the entire tile is a click target without a second, duplicate
 * link in the accessibility tree.
 *
 * Stacking: the overlay sits at z-index 1; badges, the wishlist/quick-view controls and
 * the add-to-cart button are lifted above it so they stay independently clickable.
 */
.cs-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cs-product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--cs-radius-md);
}

/* The focus ring must outline the card, not the invisible overlay box. */
.cs-product-card__link:focus-visible {
	outline: none;
}

.cs-product-card:has(.cs-product-card__link:focus-visible) {
	outline: 2px solid var(--cs-brand);
	outline-offset: 4px;
	border-radius: var(--cs-radius-md);
}

.cs-product-card__media-inner {
	display: block;
	width: 100%;
	height: 100%;
}

.cs-product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--cs-radius-md);
	background: var(--cs-sand);
	/* Portrait crop: candles are shot tall, and it gives the grid a calmer rhythm. */
	aspect-ratio: 4 / 5;
}

.cs-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cs-dur-slow) var(--cs-ease),
		opacity var(--cs-dur) var(--cs-ease);
}

/* Second image cross-fades in on hover. Opacity only — no layout work. */
.cs-product-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.cs-product-card:hover .cs-product-card__img--hover {
		opacity: 1;
	}

	.cs-product-card:hover .cs-product-card__img--main {
		opacity: 0;
	}

	/* When there is no second image, zoom the first one slightly instead. */
	.cs-product-card:hover .cs-product-card__img--solo {
		transform: scale(1.045);
	}
}

.cs-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cs-1);
	padding-top: var(--cs-4);
	/* Pushes the price to the bottom so prices align across a row of uneven titles. */
	flex: 1 1 auto;
}

.cs-product-card__cat {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-product-card__title {
	font-family: var(--cs-font-sans);
	font-size: var(--cs-text-base);
	font-weight: 600;
	line-height: 1.65;
	margin: 0;
}

.cs-product-card__title a {
	color: var(--cs-ink);
	/* Two lines max keeps card heights even without hard truncation mid-word. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cs-product-card__title a:hover {
	color: var(--cs-brand);
}

/*
 * Card footer: price and cart button.
 *
 * On a phone the grid is two columns, which leaves roughly 150px per card — not enough
 * for a price and a Persian "add to cart" label side by side. Below 640px the footer
 * therefore stacks and the button goes full width; from 640px up, where the cards are
 * wider, they sit on one row.
 */
.cs-product-card__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--cs-2);
	margin-top: var(--cs-2);
	min-width: 0;
}

@media (min-width: 640px) {
	.cs-product-card__foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--cs-3);
	}
}

/*
 * The label must be allowed to wrap rather than force the card wider than its grid
 * cell — an overflowing button here is what produces horizontal page scroll on mobile.
 */
.cs-product-card__cart {
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

@media (max-width: 639px) {
	.cs-product-card__cart {
		width: 100%;
		padding-inline: var(--cs-2);
		font-size: var(--cs-text-xs);
	}
}

.cs-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--cs-2);
	font-size: var(--cs-text-md);
	font-weight: 700;
	color: var(--cs-ink);
	line-height: 1.5;
}

.cs-price del {
	font-size: var(--cs-text-sm);
}

.cs-price__chip {
	display: inline-flex;
	padding: 1px var(--cs-2);
	border-radius: var(--cs-radius-xs);
	background: rgba(168, 50, 50, 0.1);
	color: var(--cs-sale);
	font-size: var(--cs-text-2xs);
	font-weight: 700;
}

/* Card actions: wishlist + quick view, stacked at the top of the media. */
.cs-product-card__actions {
	position: absolute;
	inset-block-start: var(--cs-3);
	inset-inline-end: var(--cs-3);
	/* Above the title link's full-card overlay. */
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--cs-1);
}

/* Likewise for the cart button, so it is not swallowed by the overlay. */
.cs-product-card__foot {
	position: relative;
	z-index: 2;
}

.cs-product-card__cart {
	position: relative;
	z-index: 2;
}

.cs-product-card__actions > * {
	/* Visible by default on touch, revealed on hover for pointer devices. */
	opacity: 1;
	transform: none;
	transition: opacity var(--cs-dur) var(--cs-ease),
		transform var(--cs-dur) var(--cs-ease);
}

@media (hover: hover) {
	.cs-product-card__actions > * {
		opacity: 0;
		transform: translateY(-4px);
	}

	.cs-product-card:hover .cs-product-card__actions > *,
	.cs-product-card:focus-within .cs-product-card__actions > * {
		opacity: 1;
		transform: none;
	}
}

.cs-wishlist-btn,
.cs-quick-view-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--cs-ink-2);
	box-shadow: var(--cs-shadow-sm);
	cursor: pointer;
	transition: color var(--cs-dur-fast) var(--cs-ease),
		background-color var(--cs-dur-fast) var(--cs-ease),
		transform var(--cs-dur-fast) var(--cs-ease);
}

.cs-wishlist-btn:hover,
.cs-quick-view-btn:hover {
	color: var(--cs-brand);
	transform: scale(1.06);
}

/* Heart swap: the filled icon is only shown in the active state. */
.cs-wishlist-btn__on {
	display: none;
}

.cs-wishlist-btn.is-active {
	color: var(--cs-sale);
}

.cs-wishlist-btn.is-active .cs-wishlist-btn__on {
	display: block;
}

.cs-wishlist-btn.is-active .cs-wishlist-btn__off {
	display: none;
}

/* Inline variant used on the single product page. */
.cs-wishlist-btn--inline {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	width: auto;
	height: auto;
	min-height: 48px;
	padding: var(--cs-3) var(--cs-5);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	box-shadow: none;
	font-size: var(--cs-text-base);
	font-weight: 600;
}

.cs-wishlist-btn--inline:hover {
	transform: none;
	border-color: var(--cs-ink-4);
}

.cs-product-card__stock {
	font-size: var(--cs-text-xs);
	font-weight: 600;
	color: var(--cs-ink-3);
}

.cs-product-card__stock--low {
	color: var(--cs-warn);
}

.cs-product-card__stock--out {
	color: var(--cs-ink-4);
}

/* Out-of-stock cards are visibly de-emphasised but still browsable. */
.cs-product-card.is-out-of-stock .cs-product-card__media {
	opacity: 0.72;
}

/* =========================================================================
 * 03 — Product grid
 * ====================================================================== */

.cs-products {
	display: grid;
	gap: var(--cs-6) var(--cs-4);
	margin: 0;
	padding: 0;
	list-style: none;
	/* 2 across on the smallest phones: one-per-row wastes the viewport and makes
	   browsing a long catalogue tedious. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-product-cell {
	min-width: 0;
	/* Belt and braces: no card content may widen its own grid cell. */
	max-width: 100%;
	overflow-wrap: anywhere;
}

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

@media (min-width: 1024px) {
	.cs-products {
		gap: var(--cs-8) var(--cs-6);
		grid-template-columns: repeat(var(--cs-cols, 4), minmax(0, 1fr));
	}

	.cs-products--cols-2 { --cs-cols: 2; }
	.cs-products--cols-3 { --cs-cols: 3; }
	.cs-products--cols-4 { --cs-cols: 4; }
	.cs-products--cols-5 { --cs-cols: 5; }
}

/* List layout (toolbar toggle). Media beside the body, description visible. */
@media (min-width: 640px) {
	.cs-products--list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cs-5);
	}

	.cs-products--list .cs-product-card {
		flex-direction: row;
		gap: var(--cs-6);
		padding: var(--cs-4);
		background: var(--cs-surface);
		border: 1px solid var(--cs-line);
		border-radius: var(--cs-radius-md);
	}

	.cs-products--list .cs-product-card__media {
		flex: none;
		width: 200px;
		aspect-ratio: 4 / 5;
	}

	.cs-products--list .cs-product-card__body {
		padding-top: 0;
		justify-content: center;
	}

	.cs-products--list .cs-product-card__title {
		font-size: var(--cs-text-lg);
	}

	.cs-products--list .cs-product-card__desc {
		display: block;
		margin-top: var(--cs-2);
		color: var(--cs-ink-3);
		font-size: var(--cs-text-base);
		line-height: 1.8;
	}
}

.cs-product-card__desc {
	display: none;
}

/* Product sections on the homepage reuse the same grid inside a rail on mobile. */
@media (max-width: 639px) {
	.cs-products--rail {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(56%, 1fr);
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--cs-gutter) * -1);
		padding-inline: var(--cs-gutter);
		padding-block-end: var(--cs-2);
		overscroll-behavior-inline: contain;
	}

	.cs-products--rail::-webkit-scrollbar {
		display: none;
	}

	.cs-products--rail > * {
		scroll-snap-align: start;
	}
}

/* =========================================================================
 * 04 — Shop header & toolbar
 * ====================================================================== */

.cs-shop {
	padding-block-end: var(--cs-section-sm);
}

.cs-shop-hero {
	padding-block: var(--cs-6) var(--cs-7);
}

.cs-shop-hero__title {
	font-size: var(--cs-h1);
}

.cs-shop-hero__desc {
	max-width: 68ch;
	margin-top: var(--cs-4);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-lg);
	line-height: 1.85;
}

.cs-shop-hero__desc p {
	margin: 0;
}

.cs-shop-hero__desc p + p {
	margin-top: var(--cs-3);
}

.cs-shop-hero--banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--cs-radius-lg);
	background: var(--cs-clay);
	color: #f2e9e0;
	padding: var(--cs-9) var(--cs-6);
	margin-block-end: var(--cs-7);
}

.cs-shop-hero--banner .cs-shop-hero__title,
.cs-shop-hero--banner .cs-shop-hero__desc {
	color: #fff;
	position: relative;
}

.cs-shop-hero--banner .cs-shop-hero__desc {
	color: #dacfc4;
}

.cs-shop-hero__media {
	position: absolute;
	inset: 0;
}

.cs-shop-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

/* Category pills under the shop title. */
.cs-cat-pills {
	display: flex;
	gap: var(--cs-2);
	margin: var(--cs-6) 0 0;
	padding: 0 0 var(--cs-2);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	/* Bleeds to the edge so the row can scroll on phones without clipping focus rings. */
	margin-inline: calc(var(--cs-gutter) * -1);
	padding-inline: var(--cs-gutter);
}

.cs-cat-pills::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.cs-cat-pills {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

.cs-cat-pills a {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	flex: none;
	min-height: 40px;
	padding: 0 var(--cs-4);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-pill);
	background: var(--cs-surface);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-sm);
	font-weight: 600;
	white-space: nowrap;
}

.cs-cat-pills a:hover {
	border-color: var(--cs-brand);
	color: var(--cs-brand);
}

.cs-cat-pills .is-current a,
.cs-cat-pills a[aria-current="page"] {
	background: var(--cs-ink);
	border-color: var(--cs-ink);
	color: var(--cs-surface);
}

.cs-cat-pills__count {
	font-size: var(--cs-text-2xs);
	opacity: 0.7;
}

/* Toolbar */
.cs-toolbar {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding-block: var(--cs-4);
	border-block: 1px solid var(--cs-line);
	margin-block-end: var(--cs-7);
	flex-wrap: wrap;
}

.cs-toolbar__count {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
	margin-inline-end: auto;
}

.cs-toolbar__group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cs-2);
	min-width: 0;
}

.cs-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	min-width: 0;
}

.cs-toolbar__sort select {
	min-height: 44px;
	min-width: 170px;
	font-size: var(--cs-text-sm);
	padding-block: 0;
}

.cs-toolbar__label {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
	white-space: nowrap;
}

/*
 * On a small phone the filter button, the sort label and a 170px select do not fit on
 * one row. The count moves to its own line and the two controls share the next one,
 * each free to shrink. The visible sort label is dropped because the select's own value
 * already says what it does — the <label> stays in the markup for screen readers.
 */
@media (max-width: 639px) {
	.cs-toolbar__count {
		flex: 1 0 100%;
		margin-inline-end: 0;
	}

	.cs-toolbar__group {
		flex: 1 1 100%;
		flex-wrap: nowrap;
	}

	.cs-toolbar__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cs-toolbar__sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cs-toolbar__sort select {
		width: 100%;
		min-width: 0;
	}

	.cs-filter-trigger {
		flex: none;
	}
}

/* Layout switch */
.cs-layout-switch {
	display: none;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
}

@media (min-width: 900px) {
	.cs-layout-switch {
		display: inline-flex;
	}
}

.cs-layout-switch a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--cs-radius-xs);
	color: var(--cs-ink-3);
}

.cs-layout-switch a:hover {
	background: var(--cs-sand);
}

.cs-layout-switch a[aria-current="true"] {
	background: var(--cs-ink);
	color: var(--cs-surface);
}

/* Filter trigger (mobile + tablet) */
.cs-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	min-height: 44px;
	padding: 0 var(--cs-4);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	font-size: var(--cs-text-sm);
	font-weight: 600;
	color: var(--cs-ink);
}

@media (min-width: 1024px) {
	.cs-filter-trigger {
		display: none;
	}
}

.cs-filter-trigger__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	font-size: 11px;
	font-weight: 700;
}

/* Active filter chips */
.cs-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-2);
	margin-block-end: var(--cs-5);
}

.cs-active-filters__label {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
}

.cs-active-filters a {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	min-height: 36px;
	padding: 0 var(--cs-3);
	border-radius: var(--cs-radius-pill);
	background: var(--cs-sand-deep);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-xs);
	font-weight: 600;
}

.cs-active-filters a:hover {
	background: var(--cs-ink);
	color: var(--cs-surface);
}

.cs-active-filters__clear {
	font-size: var(--cs-text-xs);
	font-weight: 700;
	color: var(--cs-sale);
	text-decoration: underline;
}

/* =========================================================================
 * 05 — Filters (sidebar on desktop, drawer on mobile)
 * ====================================================================== */

.cs-shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cs-8);
	align-items: start;
}

@media (min-width: 1024px) {
	.cs-shop-layout--sidebar {
		grid-template-columns: 268px minmax(0, 1fr);
		gap: var(--cs-9);
	}
}

.cs-filters {
	display: grid;
	gap: var(--cs-5);
}

/* On small screens the filter panel lives inside a bottom sheet. */
@media (max-width: 1023px) {
	.cs-filters-aside {
		display: none;
	}

	.cs-filters-aside.is-in-drawer {
		display: grid;
	}
}

.cs-filters .cs-widget {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	border-block-end: 1px solid var(--cs-line);
	padding-block-end: var(--cs-5);
}

.cs-filters .cs-widget:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.cs-filters .cs-widget__title {
	margin-bottom: var(--cs-3);
	padding-bottom: 0;
	border: 0;
	font-size: var(--cs-text-base);
	font-weight: 700;
}

/* WooCommerce layered-nav and price-filter widgets. */
.woocommerce .widget_layered_nav ul,
.woocommerce .widget_product_categories ul,
.woocommerce .widget_rating_filter ul {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_product_categories ul li a,
.woocommerce .widget_rating_filter ul li a {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	min-height: 40px;
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
}

.woocommerce .widget_layered_nav ul li.chosen a,
.woocommerce .widget_layered_nav ul li.woocommerce-widget-layered-nav-list__item--chosen a {
	color: var(--cs-brand);
	font-weight: 700;
}

.woocommerce .widget_layered_nav ul li .count {
	color: var(--cs-ink-4);
	font-size: var(--cs-text-xs);
}

/* Price slider */
.woocommerce .price_slider_wrapper {
	padding-top: var(--cs-2);
}

.woocommerce .price_slider_wrapper .ui-slider {
	position: relative;
	height: 4px;
	margin-block: var(--cs-5) var(--cs-6);
	border-radius: var(--cs-radius-pill);
	background: var(--cs-line);
	border: 0;
}

.woocommerce .price_slider_wrapper .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-brand);
}

.woocommerce .price_slider_wrapper .ui-slider .ui-slider-handle {
	position: absolute;
	/* 20px visual handle; the slider row itself is 44px tall for touch. */
	top: -8px;
	width: 20px;
	height: 20px;
	margin-inline-start: -10px;
	border-radius: 50%;
	background: var(--cs-surface);
	border: 2px solid var(--cs-brand);
	box-shadow: var(--cs-shadow-sm);
	cursor: grab;
}

.woocommerce .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-3);
	font-size: var(--cs-text-sm);
}

.woocommerce .price_slider_amount .price_label {
	order: 1;
	color: var(--cs-ink-2);
	font-variant-numeric: tabular-nums;
}

.woocommerce .price_slider_amount .button {
	order: 2;
	margin-inline-start: auto;
	min-height: 40px;
	padding-inline: var(--cs-4);
	font-size: var(--cs-text-sm);
}

/* =========================================================================
 * 06 — Product gallery
 * ====================================================================== */

.cs-product-hero {
	display: grid;
	gap: var(--cs-7);
	align-items: start;
	padding-block: var(--cs-5) var(--cs-9);
}

@media (min-width: 900px) {
	.cs-product-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
		gap: var(--cs-10);
	}
}

@media (min-width: 1024px) {
	/* The purchase column tracks the page while the gallery scrolls. */
	.cs-product-hero > .summary {
		position: sticky;
		top: calc(var(--cs-header-h) + var(--cs-5));
	}
}

.woocommerce div.product div.images,
.cs-gallery {
	display: grid;
	gap: var(--cs-3);
	margin: 0;
	float: none;
	width: auto;
}

@media (min-width: 640px) {
	/*
	 * Thumbnail rail beside the main image, on the inline-start side — but only when a
	 * rail was actually rendered. With one image there is no rail, and a fixed two-track
	 * grid would place the main image in the 82px thumbnail column.
	 */
	.cs-gallery--has-thumbs {
		grid-template-columns: 82px minmax(0, 1fr);
	}
}

.cs-gallery--single {
	grid-template-columns: minmax(0, 1fr);
}

.cs-gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: var(--cs-radius-lg);
	background: var(--cs-sand);
	order: 2;
}

.cs-gallery__main img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Zoom affordance. The button opens the lightbox; hover only hints at it. */
.cs-gallery__zoom {
	position: absolute;
	inset-block-end: var(--cs-3);
	inset-inline-end: var(--cs-3);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--cs-ink);
	box-shadow: var(--cs-shadow-sm);
}

.cs-gallery__zoom:hover {
	color: var(--cs-brand);
}

.cs-gallery__thumbs {
	order: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 64px;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.cs-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

@media (min-width: 640px) {
	.cs-gallery__thumbs {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-auto-rows: 100px;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 520px;
	}
}

.cs-gallery__thumb {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-sand);
	cursor: pointer;
	transition: border-color var(--cs-dur-fast) var(--cs-ease);
}

.cs-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-gallery__thumb:hover {
	border-color: var(--cs-ink-4);
}

.cs-gallery__thumb[aria-current="true"] {
	border-color: var(--cs-brand);
	border-width: 2px;
}

/* Lightbox */
.cs-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--cs-z-drawer);
	display: grid;
	place-items: center;
	padding: var(--cs-5);
	background: rgba(28, 23, 20, 0.92);
	opacity: 0;
	transition: opacity var(--cs-dur) var(--cs-ease);
}

.cs-lightbox.is-open {
	opacity: 1;
}

.cs-lightbox img {
	max-width: min(100%, 1100px);
	max-height: 88vh;
	width: auto;
	border-radius: var(--cs-radius-md);
	object-fit: contain;
}

.cs-lightbox__close,
.cs-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--cs-dur-fast) var(--cs-ease);
}

.cs-lightbox__close:hover,
.cs-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}

.cs-lightbox__close {
	inset-block-start: var(--cs-5);
	inset-inline-end: var(--cs-5);
}

.cs-lightbox__nav--prev {
	inset-inline-start: var(--cs-4);
}

.cs-lightbox__nav--next {
	inset-inline-end: var(--cs-4);
}

.cs-lightbox__counter {
	position: absolute;
	inset-block-end: var(--cs-5);
	inset-inline: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--cs-text-sm);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * 07 — Purchase area
 * ====================================================================== */

.woocommerce div.product .summary,
.cs-product-hero > .summary {
	display: flex;
	flex-direction: column;
	gap: var(--cs-4);
	margin: 0;
	float: none;
	width: auto;
}

.cs-product__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-3);
	font-size: var(--cs-text-xs);
}

.cs-product__eyebrow a {
	color: var(--cs-brand);
	font-weight: 600;
}

.woocommerce div.product .product_title,
.cs-product__title {
	font-size: var(--cs-h1);
	line-height: 1.3;
	margin: 0;
}

.cs-product__rating-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-4);
}

.cs-product__reviews-link {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
	text-decoration: underline;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.cs-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--cs-3);
	margin: 0;
	color: var(--cs-ink);
	font-size: var(--cs-h3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price del {
	font-size: var(--cs-text-lg);
}

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

.cs-product__save {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--cs-3);
	border-radius: var(--cs-radius-xs);
	background: rgba(168, 50, 50, 0.1);
	color: var(--cs-sale);
	font-size: var(--cs-text-xs);
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.cs-product__excerpt {
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	line-height: 1.9;
}

/* Quick spec chips under the price. */
.cs-quick-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Stock pill */
.cs-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	font-size: var(--cs-text-sm);
	font-weight: 600;
}

.cs-stock--in {
	color: var(--cs-success);
}

.cs-stock--low {
	color: var(--cs-warn);
}

.cs-stock--out {
	color: var(--cs-danger);
}

/* WooCommerce's own stock paragraph. */
.woocommerce div.product .stock {
	color: var(--cs-success);
	font-weight: 600;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--cs-danger);
}

/* Add to cart form */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-3);
	margin: var(--cs-2) 0 0;
}

.woocommerce div.product form.cart .cs-qty {
	flex: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 56px;
	font-size: var(--cs-text-lg);
}

.cs-buy-now {
	flex: 1 1 100%;
}

@media (min-width: 560px) {
	.cs-buy-now {
		flex: 1 1 160px;
	}
}

/* Variations table → stacked, labelled rows. The default table layout is unusable
   on a phone and reads badly in RTL. */
.woocommerce div.product form.cart .variations {
	display: grid;
	gap: var(--cs-4);
	width: 100%;
	margin: 0;
	border: 0;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr {
	display: contents;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart .variations .label label {
	display: block;
	margin-bottom: var(--cs-2);
	font-size: var(--cs-text-sm);
	font-weight: 700;
	color: var(--cs-ink-2);
}

.woocommerce div.product form.cart .variations .value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-2);
}

.woocommerce div.product form.cart .variations select {
	flex: 1 1 200px;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--cs-text-xs);
	font-weight: 600;
	color: var(--cs-sale);
	text-decoration: underline;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-block: var(--cs-3);
}

.woocommerce div.product .woocommerce-variation-availability {
	margin-block-end: var(--cs-2);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-3);
	width: 100%;
}

/* Secondary actions row */
.cs-product__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-3);
}

/* Product meta (SKU / categories / tags) */
.woocommerce div.product .product_meta,
.cs-product__meta {
	display: grid;
	gap: var(--cs-2);
	padding-block: var(--cs-4);
	border-block: 1px solid var(--cs-line);
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
}

.cs-product__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2);
}

.cs-product__meta-label {
	font-weight: 600;
	color: var(--cs-ink-2);
}

/* Trust list */
.cs-product__trust {
	display: grid;
	gap: var(--cs-3);
	margin: 0;
	padding: var(--cs-5);
	list-style: none;
	background: var(--cs-sand);
	border-radius: var(--cs-radius-md);
}

.cs-product__trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-3);
	font-size: var(--cs-text-sm);
	line-height: 1.75;
	color: var(--cs-ink-2);
}

.cs-product__trust svg {
	flex: none;
	margin-top: 3px;
	color: var(--cs-brand);
}

.cs-product__trust strong {
	display: block;
	color: var(--cs-ink);
}

/* =========================================================================
 * 08 — Specs & tabs
 * ====================================================================== */

.woocommerce div.product .woocommerce-tabs {
	padding-block: var(--cs-8) 0;
	border-block-start: 1px solid var(--cs-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-1);
	margin: 0 0 var(--cs-7);
	padding: 0;
	list-style: none;
	border: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--cs-5);
	border-radius: var(--cs-radius-pill);
	color: var(--cs-ink-3);
	font-family: var(--cs-font-heading);
	font-size: var(--cs-text-base);
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--cs-dur-fast) var(--cs-ease),
		color var(--cs-dur-fast) var(--cs-ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	background: var(--cs-sand);
	color: var(--cs-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--cs-ink);
	color: var(--cs-surface);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	max-width: 900px;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* Spec table */
.cs-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cs-text-base);
}

.cs-specs th,
.cs-specs td {
	padding: var(--cs-3) var(--cs-4);
	border-block-end: 1px solid var(--cs-line);
	text-align: start;
	vertical-align: top;
	line-height: 1.8;
}

.cs-specs th {
	width: 38%;
	color: var(--cs-ink-2);
	font-weight: 600;
	background: var(--cs-sand);
	white-space: nowrap;
}

.cs-specs td {
	color: var(--cs-ink);
}

.cs-specs__icon {
	display: inline-flex;
	margin-inline-end: var(--cs-2);
	color: var(--cs-brand);
	vertical-align: -3px;
}

@media (max-width: 559px) {
	/* Stack the table on very narrow screens instead of forcing a scroll. */
	.cs-specs th,
	.cs-specs td {
		display: block;
		width: auto;
		white-space: normal;
	}

	.cs-specs th {
		border-block-end: 0;
		padding-block-end: var(--cs-1);
	}
}

/* Section of extra prose blocks inside the spec tab. */
.cs-spec-notes {
	display: grid;
	gap: var(--cs-6);
	margin-top: var(--cs-7);
}

.cs-spec-note__title {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	margin-bottom: var(--cs-2);
	font-size: var(--cs-text-md);
}

.cs-spec-note__title svg {
	color: var(--cs-brand);
}

.cs-spec-note p {
	color: var(--cs-ink-2);
	line-height: 1.9;
}

/* Upsells / related / recently viewed */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells,
.cs-product-section {
	padding-block: var(--cs-9) 0;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-bottom: var(--cs-6);
	font-size: var(--cs-h3);
}

/* =========================================================================
 * 09 — Reviews
 * ====================================================================== */

.woocommerce #reviews #comments > h2 {
	margin-bottom: var(--cs-6);
	font-size: var(--cs-h4);
}

.woocommerce #reviews ol.commentlist {
	display: grid;
	gap: var(--cs-4);
	margin: 0 0 var(--cs-8);
	padding: 0;
	list-style: none;
}

.woocommerce #reviews ol.commentlist li {
	margin: 0;
	padding: 0;
}

.woocommerce #reviews ol.commentlist li .comment_container {
	display: flex;
	gap: var(--cs-4);
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.woocommerce #reviews ol.commentlist li img.avatar {
	position: static;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cs-sand);
	flex: none;
}

.woocommerce #reviews ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce #reviews .comment-text p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-1) var(--cs-3);
	margin-bottom: var(--cs-2);
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
}

.woocommerce #reviews .comment-text p.meta strong {
	color: var(--cs-ink);
	font-weight: 700;
}

.woocommerce #reviews .comment-text .description {
	color: var(--cs-ink-2);
	line-height: 1.9;
}

/* WooCommerce star rating (loop + reviews). Replaced with an SVG-free bar that
   still uses WooCommerce's own markup so plugins keep working. */
.woocommerce .star-rating {
	position: relative;
	overflow: hidden;
	width: 5.4em;
	height: 1.2em;
	font-size: var(--cs-text-sm);
	line-height: 1.2;
	font-family: star;
	color: var(--cs-gold);
	direction: ltr;
}

.woocommerce .star-rating::before {
	content: "sssss";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--cs-line);
}

.woocommerce .star-rating span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.woocommerce .star-rating span::before {
	content: "SSSSS";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

/* Review form rating selector: buttons, not a hover-only star strip. */
.woocommerce #review_form #respond {
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.woocommerce #review_form #respond p.stars {
	display: flex;
	gap: var(--cs-1);
	margin-bottom: var(--cs-4);
}

.woocommerce #review_form #respond p.stars a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--cs-radius-xs);
	color: var(--cs-gold);
	text-indent: 0;
}

.woocommerce #review_form #respond p.stars a:hover {
	background: var(--cs-sand);
}

.woocommerce #review_form #respond .comment-form-rating label {
	display: block;
	margin-bottom: var(--cs-2);
	font-size: var(--cs-text-sm);
	font-weight: 600;
}

.woocommerce-noreviews {
	padding: var(--cs-5);
	background: var(--cs-sand);
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink-2);
}

/* =========================================================================
 * 10 — Cart
 * ====================================================================== */

.cs-cart-layout {
	display: grid;
	/*
	 * Explicit minmax(0, 1fr) rather than the implicit `auto` track: an auto track sizes
	 * to its widest item's max-content and will happily grow past the container, which
	 * is what produces horizontal page scroll at 320px.
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cs-7);
	align-items: start;
	padding-block-end: var(--cs-section-sm);
}

@media (min-width: 1024px) {
	.cs-cart-layout {
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: var(--cs-9);
	}

	.cs-cart-layout__aside {
		position: sticky;
		top: calc(var(--cs-header-h) + var(--cs-5));
	}
}

/* Cart items as cards, not a table: a 6-column table is unreadable on a phone. */
.cs-cart-items {
	display: grid;
	gap: var(--cs-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-cart-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--cs-4);
	padding: var(--cs-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	transition: opacity var(--cs-dur) var(--cs-ease);
}

.cs-cart-item.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

@media (min-width: 700px) {
	.cs-cart-item {
		grid-template-columns: 104px minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--cs-5);
	}
}

.cs-cart-item__media {
	overflow: hidden;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-sand);
	aspect-ratio: 4 / 5;
}

.cs-cart-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-cart-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--cs-2);
	min-width: 0;
}

.cs-cart-item__title {
	font-size: var(--cs-text-base);
	font-weight: 600;
	line-height: 1.6;
}

.cs-cart-item__title a {
	color: var(--cs-ink);
}

.cs-cart-item__variation {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-cart-item__variation p {
	margin: 0;
}

.cs-cart-item__unit {
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
}

.cs-cart-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-3);
	margin-top: var(--cs-1);
}

.cs-cart-item__remove {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	min-height: 44px;
	padding-inline: var(--cs-2);
	color: var(--cs-ink-3);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	cursor: pointer;
}

.cs-cart-item__remove:hover {
	color: var(--cs-danger);
}

.cs-cart-item__total {
	font-size: var(--cs-text-md);
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 699px) {
	.cs-cart-item__total {
		grid-column: 2;
	}
}

/* Cart actions row (coupon + update). */
.cs-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--cs-3);
	margin-top: var(--cs-5);
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--cs-2);
	flex: 1 1 300px;
}

.cs-coupon .cs-field {
	flex: 1 1 160px;
}

/* Cart / order totals panel */
.cs-totals {
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.cs-totals__title {
	margin-bottom: var(--cs-5);
	font-size: var(--cs-h4);
}

.cs-totals table,
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}

.cs-totals th,
.cs-totals td,
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--cs-3) 0;
	border: 0;
	border-block-end: 1px solid var(--cs-line-soft);
	text-align: start;
	font-size: var(--cs-text-base);
	vertical-align: top;
}

.cs-totals th,
.woocommerce .cart_totals table th,
.woocommerce-checkout-review-order-table th {
	color: var(--cs-ink-3);
	font-weight: 500;
	background: none;
}

.cs-totals td,
.woocommerce .cart_totals table td,
.woocommerce-checkout-review-order-table td {
	text-align: end;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals table tr.order-total th,
.woocommerce .cart_totals table tr.order-total td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	padding-block: var(--cs-4);
	border-block-end: 0;
	color: var(--cs-ink);
	font-size: var(--cs-text-lg);
	font-weight: 700;
}

/* Shipping method list inside the totals. */
.woocommerce ul#shipping_method {
	display: grid;
	gap: var(--cs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-2);
	margin: 0;
	padding: var(--cs-2);
	border-radius: var(--cs-radius-xs);
	text-indent: 0;
	font-size: var(--cs-text-sm);
	line-height: 1.7;
}

.woocommerce ul#shipping_method li:hover {
	background: var(--cs-sand);
}

.woocommerce ul#shipping_method input[type="radio"] {
	margin-top: 4px;
	accent-color: var(--cs-brand);
	width: 18px;
	height: 18px;
}

.woocommerce .shipping-calculator-button {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	text-decoration: underline;
}

.cs-totals .cs-btn--block {
	margin-top: var(--cs-5);
}

.cs-totals__continue {
	display: block;
	margin-top: var(--cs-3);
	text-align: center;
	font-size: var(--cs-text-sm);
	font-weight: 600;
	color: var(--cs-ink-3);
}

/* Free shipping progress bar */
.cs-ship-progress {
	margin-bottom: var(--cs-5);
	padding: var(--cs-4);
	background: var(--cs-sand);
	border-radius: var(--cs-radius-sm);
}

.cs-ship-progress__text {
	display: flex;
	align-items: center;
	gap: var(--cs-2);
	margin: 0 0 var(--cs-3);
	font-size: var(--cs-text-sm);
	line-height: 1.7;
	color: var(--cs-ink-2);
}

.cs-ship-progress__text svg {
	flex: none;
	color: var(--cs-brand);
}

.cs-ship-progress__track {
	height: 6px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-sand-deep);
	overflow: hidden;
}

.cs-ship-progress__bar {
	display: block;
	height: 100%;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-brand);
	transition: width var(--cs-dur-slow) var(--cs-ease);
}

.cs-ship-progress.is-complete .cs-ship-progress__bar {
	background: var(--cs-success);
}

.cs-ship-progress.is-complete .cs-ship-progress__text svg {
	color: var(--cs-success);
}

/* Mini-cart drawer */
.cs-mini-cart__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.cs-mini-cart__list {
	display: grid;
	gap: var(--cs-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-mini-cart__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--cs-3);
	align-items: start;
	padding-block-end: var(--cs-3);
	border-block-end: 1px solid var(--cs-line-soft);
}

.cs-mini-cart__item:last-child {
	border-block-end: 0;
}

.cs-mini-cart__thumb {
	overflow: hidden;
	border-radius: var(--cs-radius-xs);
	background: var(--cs-sand);
	aspect-ratio: 4 / 5;
}

.cs-mini-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-mini-cart__name {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	line-height: 1.6;
	color: var(--cs-ink);
}

.cs-mini-cart__meta {
	margin-top: 2px;
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	font-variant-numeric: tabular-nums;
}

.cs-mini-cart__remove {
	color: var(--cs-ink-4);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--cs-radius-xs);
	cursor: pointer;
}

.cs-mini-cart__remove:hover {
	background: var(--cs-sand);
	color: var(--cs-danger);
}

.cs-mini-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cs-3);
	margin-bottom: var(--cs-4);
	font-size: var(--cs-text-md);
}

.cs-mini-cart__subtotal strong {
	font-size: var(--cs-text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cs-mini-cart__note {
	margin-top: var(--cs-3);
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	text-align: center;
}

/* =========================================================================
 * 11 — Checkout
 * ====================================================================== */

.cs-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cs-7);
	align-items: start;
	padding-block-end: var(--cs-section-sm);
}

@media (min-width: 1024px) {
	.cs-checkout-layout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: var(--cs-9);
	}

	.cs-checkout-layout__aside {
		position: sticky;
		top: calc(var(--cs-header-h) + var(--cs-5));
	}
}

.woocommerce-checkout .cs-card,
.cs-checkout-card {
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
}

.cs-checkout-card + .cs-checkout-card {
	margin-top: var(--cs-5);
}

.cs-checkout-card__title {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	margin-bottom: var(--cs-5);
	font-size: var(--cs-h4);
}

/* Numbered step badge, so a long checkout still reads as a sequence. */
.cs-checkout-card__step {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cs-ink);
	color: var(--cs-surface);
	font-size: var(--cs-text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* WooCommerce form rows → CSS grid. */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: grid;
	gap: var(--cs-2);
	margin: 0 0 var(--cs-4);
	padding: 0;
	float: none;
	width: auto;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	margin: 0;
	font-size: var(--cs-text-sm);
	font-weight: 600;
	color: var(--cs-ink-2);
	line-height: 1.6;
}

.woocommerce form .form-row .required {
	color: var(--cs-danger);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row .optional {
	color: var(--cs-ink-4);
	font-weight: 400;
}

.woocommerce form .form-row span.description,
.woocommerce form .form-row .description {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	line-height: 1.7;
}

/* Two-up rows on wider screens. */
@media (min-width: 640px) {
	.woocommerce form .woocommerce-billing-fields__field-wrapper,
	.woocommerce form .woocommerce-shipping-fields__field-wrapper,
	.woocommerce form .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--cs-4);
	}

	.woocommerce form .form-row-wide,
	.woocommerce form .form-row.notes {
		grid-column: 1 / -1;
	}
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--cs-danger);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: rgba(47, 122, 85, 0.5);
}

/* select2 (WooCommerce state/country dropdowns) */
.woocommerce .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-inline: var(--cs-4);
	color: var(--cs-ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	inset-inline-end: var(--cs-2);
	inset-inline-start: auto;
}

.select2-dropdown {
	border-color: var(--cs-line);
	border-radius: var(--cs-radius-sm);
	box-shadow: var(--cs-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--cs-brand);
	color: var(--cs-on-brand);
}

/* Mobile order peek (accordion above the form) */
.cs-checkout-peek {
	margin-bottom: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

@media (min-width: 1024px) {
	/* Redundant once the sticky summary column is visible. */
	.cs-checkout-peek {
		display: none;
	}
}

.cs-checkout-peek__summary {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-4) var(--cs-5);
	min-height: 56px;
	cursor: pointer;
	list-style: none;
	font-size: var(--cs-text-base);
}

.cs-checkout-peek__summary::-webkit-details-marker {
	display: none;
}

.cs-checkout-peek__label {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-2);
	font-weight: 600;
}

.cs-checkout-peek__total {
	margin-inline-start: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cs-checkout-peek__chevron {
	transition: transform var(--cs-dur-fast) var(--cs-ease);
	color: var(--cs-ink-3);
}

.cs-checkout-peek[open] .cs-checkout-peek__chevron {
	transform: rotate(180deg);
}

.cs-checkout-peek__items {
	display: grid;
	gap: var(--cs-3);
	margin: 0;
	padding: 0 var(--cs-5) var(--cs-5);
	list-style: none;
}

.cs-checkout-peek__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: var(--cs-3);
	align-items: center;
	font-size: var(--cs-text-sm);
}

.cs-checkout-peek__thumb img {
	border-radius: var(--cs-radius-xs);
	width: 44px;
	height: 55px;
	object-fit: cover;
	background: var(--cs-sand);
}

.cs-checkout-peek__name em {
	font-style: normal;
	color: var(--cs-ink-3);
	font-variant-numeric: tabular-nums;
}

.cs-checkout-peek__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Review order table product rows */
.woocommerce-checkout-review-order-table .product-name {
	line-height: 1.7;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--cs-ink-3);
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table .variation {
	margin: var(--cs-1) 0 0;
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout-review-order-table .variation dd {
	display: inline;
	margin: 0;
}

/* Payment methods */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: var(--cs-2);
	margin: 0 0 var(--cs-5);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each gateway is a selectable card. Works for any Iranian gateway plugin. */
.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	min-height: 56px;
	padding: var(--cs-3) var(--cs-4);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	cursor: pointer;
	font-size: var(--cs-text-base);
	font-weight: 600;
	transition: border-color var(--cs-dur-fast) var(--cs-ease),
		background-color var(--cs-dur-fast) var(--cs-ease);
}

.woocommerce-checkout #payment ul.payment_methods li > label:hover {
	border-color: var(--cs-ink-4);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--cs-brand);
	flex: none;
}

/* The checked card is outlined; :has keeps it to CSS with no extra JS, and the
   radio itself remains the accessible source of truth either way. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) > label {
	border-color: var(--cs-brand);
	background: var(--cs-brand-tint);
}

.woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 26px;
	width: auto;
	margin-inline-start: auto;
}

.woocommerce-checkout #payment div.payment_box {
	margin: var(--cs-1) 0 var(--cs-2);
	padding: var(--cs-4);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-sand);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-sm);
	line-height: 1.8;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	min-height: 56px;
	font-size: var(--cs-text-lg);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--cs-4);
	font-size: var(--cs-text-sm);
}

.woocommerce-privacy-policy-text {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	line-height: 1.8;
}

/* Login / coupon toggles above the checkout form */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
	margin-bottom: var(--cs-4);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 var(--cs-5);
	padding: var(--cs-5);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	background: var(--cs-surface);
}

/* Order received / thank you */
.woocommerce-order {
	display: grid;
	gap: var(--cs-6);
}

.woocommerce ul.order_details {
	display: grid;
	gap: var(--cs-4);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
	padding: var(--cs-6);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-lg);
	list-style: none;
}

.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
	text-transform: none;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--cs-1);
	font-size: var(--cs-text-md);
	color: var(--cs-ink);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * 12 — My account
 * ====================================================================== */

.cs-account {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cs-7);
	align-items: start;
	padding-block-end: var(--cs-section-sm);
}

@media (min-width: 900px) {
	.cs-account {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: var(--cs-9);
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
}

.cs-account-nav {
	padding: var(--cs-3);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
}

.cs-account-nav ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-account-nav a {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	min-height: 46px;
	padding: 0 var(--cs-3);
	border-radius: var(--cs-radius-sm);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	font-weight: 600;
}

.cs-account-nav a:hover {
	background: var(--cs-sand);
	color: var(--cs-ink);
}

.cs-account-nav a svg {
	color: var(--cs-ink-4);
}

.cs-account-nav li.is-active a,
.cs-account-nav li.is-active a svg {
	background: var(--cs-ink);
	color: var(--cs-surface);
}

/* Logout is separated from the rest so it cannot be hit by accident. */
.cs-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--cs-3);
	padding-top: var(--cs-3);
	border-block-start: 1px solid var(--cs-line);
}

.cs-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--cs-danger);
}

.cs-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a svg {
	color: currentColor;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

.cs-account-cards {
	display: grid;
	gap: var(--cs-3);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 0 0 var(--cs-7);
	padding: 0;
	list-style: none;
}

.cs-account-card__link {
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-4);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	color: var(--cs-ink);
	min-height: 76px;
}

.cs-account-card__link:hover {
	border-color: var(--cs-brand);
}

.cs-account-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-brand-tint);
	color: var(--cs-brand);
}

.cs-account-card__meta {
	display: grid;
	min-width: 0;
}

.cs-account-card__label {
	font-size: var(--cs-text-xs);
	color: var(--cs-ink-3);
}

.cs-account-card__value {
	font-size: var(--cs-text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cs-account-card__arrow {
	margin-inline-start: auto;
	color: var(--cs-ink-4);
	flex: none;
}

/* Orders table → cards on small screens. */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	overflow: hidden;
	margin: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--cs-4);
	border-block-end: 1px solid var(--cs-line-soft);
	text-align: start;
	font-size: var(--cs-text-base);
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--cs-sand);
	color: var(--cs-ink-2);
	font-weight: 700;
	font-size: var(--cs-text-sm);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-block-end: 0;
}

@media (max-width: 767px) {
	/* Each row becomes a card with the column name as an inline label. */
	.woocommerce table.shop_table.my_account_orders,
	.woocommerce table.shop_table.woocommerce-orders-table {
		border: 0;
	}

	.woocommerce table.shop_table.my_account_orders thead,
	.woocommerce table.shop_table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce table.shop_table.my_account_orders tr,
	.woocommerce table.shop_table.woocommerce-orders-table tr {
		display: grid;
		gap: var(--cs-1);
		margin-bottom: var(--cs-3);
		padding: var(--cs-4);
		background: var(--cs-surface);
		border: 1px solid var(--cs-line);
		border-radius: var(--cs-radius-md);
	}

	.woocommerce table.shop_table.my_account_orders td,
	.woocommerce table.shop_table.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cs-3);
		padding: var(--cs-1) 0;
		border: 0;
	}

	.woocommerce table.shop_table.my_account_orders td::before,
	.woocommerce table.shop_table.woocommerce-orders-table td::before {
		content: attr(data-title) ":";
		color: var(--cs-ink-3);
		font-size: var(--cs-text-xs);
		font-weight: 600;
	}
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .cs-btn {
	min-height: 40px;
	padding-inline: var(--cs-4);
	font-size: var(--cs-text-sm);
}

/* Addresses */
.woocommerce-Addresses {
	display: grid;
	gap: var(--cs-4);
}

@media (min-width: 640px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-Address {
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	width: auto;
	float: none;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-3);
	margin-bottom: var(--cs-3);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: var(--cs-text-lg);
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.9;
	color: var(--cs-ink-2);
}

/* Downloads */
.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file {
	font-weight: 600;
}

/* =========================================================================
 * 13 — Notices
 * ====================================================================== */

.woocommerce-notices-wrapper:not(:empty) {
	margin-block-end: var(--cs-5);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-3);
	margin: 0 0 var(--cs-4);
	padding: var(--cs-4) var(--cs-5);
	border: 0;
	border-inline-start: 3px solid var(--cs-success);
	border-radius: var(--cs-radius-sm);
	background: rgba(47, 122, 85, 0.08);
	color: var(--cs-ink-2);
	font-size: var(--cs-text-base);
	line-height: 1.75;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	/* WooCommerce uses its own icon font; the theme supplies its own icons instead. */
	display: none;
}

.woocommerce-info,
.woocommerce .woocommerce-info {
	border-inline-start-color: var(--cs-brand);
	background: var(--cs-brand-tint);
}

.woocommerce-error,
.woocommerce .woocommerce-error {
	border-inline-start-color: var(--cs-danger);
	background: rgba(179, 38, 30, 0.07);
	display: grid;
	gap: var(--cs-1);
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	min-height: 40px;
	padding-inline: var(--cs-4);
	font-size: var(--cs-text-sm);
}

/* Store notice */
.cs-demo-notice {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--cs-z-toast);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-4);
	margin: 0;
	padding: var(--cs-3) var(--cs-5);
	background: var(--cs-clay);
	color: #f0e7dd;
	font-size: var(--cs-text-sm);
	text-align: center;
}

.cs-demo-notice__close {
	color: var(--cs-gold);
	font-weight: 700;
	cursor: pointer;
}

/* =========================================================================
 * 14 — Quick view
 * ====================================================================== */

.cs-quick-view {
	display: grid;
	gap: var(--cs-6);
	padding: var(--cs-6);
}

@media (min-width: 700px) {
	.cs-quick-view {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: var(--cs-7);
		padding: var(--cs-7);
	}
}

.cs-quick-view__media {
	overflow: hidden;
	border-radius: var(--cs-radius-md);
	background: var(--cs-sand);
	aspect-ratio: 4 / 5;
}

.cs-quick-view__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-quick-view__body {
	display: flex;
	flex-direction: column;
	gap: var(--cs-4);
	min-width: 0;
}

.cs-quick-view__title {
	font-size: var(--cs-h3);
	line-height: 1.35;
}

.cs-quick-view__title a {
	color: var(--cs-ink);
}

.cs-quick-view__full {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================================
 * 15 — Sticky buy bar (mobile single product)
 * ====================================================================== */

.cs-sticky-buy {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--cs-z-sticky);
	display: flex;
	align-items: center;
	gap: var(--cs-3);
	padding: var(--cs-3) var(--cs-4);
	padding-block-end: max(var(--cs-3), env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-block-start: 1px solid var(--cs-line);
	/* Hidden until the main add-to-cart button scrolls out of view. */
	transform: translateY(110%);
	transition: transform var(--cs-dur-slow) var(--cs-ease-out);
}

.cs-sticky-buy.is-visible {
	transform: none;
}

@media (min-width: 1024px) {
	.cs-sticky-buy {
		display: none;
	}
}

/* When the bottom nav is present, the buy bar replaces it rather than stacking. */
.cs-has-bottom-nav .cs-sticky-buy.is-visible ~ .cs-bottom-nav,
body:has(.cs-sticky-buy.is-visible) .cs-bottom-nav {
	transform: translateY(100%);
	transition: transform var(--cs-dur-slow) var(--cs-ease-out);
}

.cs-sticky-buy__media {
	flex: none;
	width: 44px;
	height: 54px;
	border-radius: var(--cs-radius-xs);
	overflow: hidden;
	background: var(--cs-sand);
}

.cs-sticky-buy__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-sticky-buy__info {
	flex: 1 1 auto;
	min-width: 0;
}

.cs-sticky-buy__name {
	font-size: var(--cs-text-sm);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cs-sticky-buy__price {
	font-size: var(--cs-text-sm);
	font-weight: 700;
	color: var(--cs-brand);
	font-variant-numeric: tabular-nums;
}

.cs-sticky-buy .cs-btn {
	flex: none;
	min-height: 46px;
}

/* =========================================================================
 * 16 — Shop template composition
 *
 * Styles for the markup introduced by the theme's WooCommerce overrides and shop
 * template parts.
 * ====================================================================== */

.cs-shop-main {
	min-width: 0;
}

.cs-shop-hero__title,
.cs-shop-hero--banner .cs-shop-hero__title {
	position: relative;
}

/* Product heading block on the single product page. */
.cs-product__heading {
	display: grid;
	gap: var(--cs-3);
}



/* -- Checkout summary column -------------------------------------------- */

/*
 * Below the two-column breakpoint the collapsible order peek above the form already
 * shows the same information, so the aside is hidden rather than duplicated.
 */
.cs-checkout-summary {
	display: none;
}

@media (min-width: 1024px) {
	.cs-checkout-summary {
		display: block;
	}
}

.cs-checkout-summary .cs-mini-cart__list {
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline-end: var(--cs-1);
}

/* Reassurance row under the place-order button. */
.cs-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-2) var(--cs-5);
	margin: var(--cs-4) 0 0;
	padding: 0;
	list-style: none;
}

.cs-checkout-trust li {
	display: inline-flex;
	align-items: center;
	gap: var(--cs-1);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	color: var(--cs-ink-3);
}

.cs-checkout-trust svg {
	color: var(--cs-success);
}

/* -- Login / register ---------------------------------------------------- */

/* Supporting sentence under the page title on the account/login routes. */
.cs-auth__intro,
.cs-account__greeting {
	max-width: 60ch;
	margin-block: 0 var(--cs-6);
	text-align: center;
}

.cs-account__greeting {
	text-align: start;
	margin-block-end: var(--cs-5);
}

.cs-auth {
	display: grid;
	gap: var(--cs-5);
	max-width: 520px;
	margin-inline: auto;
	padding-block-end: var(--cs-section-sm);
}

.cs-auth--split {
	max-width: var(--cs-container);
}

@media (min-width: 860px) {
	.cs-auth--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cs-6);
		align-items: start;
	}
}

.cs-auth .cs-checkout-card {
	min-width: 0;
}

.cs-auth .woocommerce-LostPassword {
	margin: var(--cs-2) 0 0;
	font-size: var(--cs-text-sm);
	text-align: center;
}

/* -- Coupon / cart actions ---------------------------------------------- */

.cs-coupon .cs-field label {
	font-size: var(--cs-text-sm);
}

/* -- Grouped products --------------------------------------------------- */

/*
 * Grouped products render a table of child rows. Same treatment as the variations
 * table: stacked rows with visible labels rather than a table that overflows.
 */
.woocommerce div.product form.cart table.woocommerce-grouped-product-list {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--cs-4);
}

.woocommerce div.product form.cart table.woocommerce-grouped-product-list td {
	padding: var(--cs-3) var(--cs-2);
	border-block-end: 1px solid var(--cs-line-soft);
	vertical-align: middle;
}

.woocommerce div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__label a {
	font-weight: 600;
	color: var(--cs-ink);
}

@media (max-width: 559px) {
	.woocommerce div.product form.cart table.woocommerce-grouped-product-list tr {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--cs-1) var(--cs-3);
		align-items: center;
		padding-block: var(--cs-3);
		border-block-end: 1px solid var(--cs-line-soft);
	}

	.woocommerce div.product form.cart table.woocommerce-grouped-product-list td {
		padding: 0;
		border: 0;
	}

	.woocommerce div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__label {
		grid-column: 2;
	}

	.woocommerce div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__price {
		grid-column: 2;
	}
}

/* -- Shipping calculator ------------------------------------------------- */

.woocommerce .shipping-calculator-form {
	display: grid;
	gap: var(--cs-3);
	margin-top: var(--cs-3);
}

.woocommerce .shipping-calculator-form .form-row {
	margin: 0;
}

/* -- Variation price / availability ------------------------------------- */

.woocommerce div.product .woocommerce-variation-description p {
	margin: 0;
	font-size: var(--cs-text-sm);
	color: var(--cs-ink-3);
	line-height: 1.8;
}

/* -- Order details (thank-you page, order view) ------------------------- */

.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	margin-top: var(--cs-7);
}

.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-customer-details h2 {
	margin-bottom: var(--cs-4);
	font-size: var(--cs-h4);
}

.woocommerce .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	gap: var(--cs-5);
}

@media (min-width: 640px) {
	.woocommerce .woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce .woocommerce-customer-details address {
	padding: var(--cs-5);
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-md);
	font-style: normal;
	line-height: 1.9;
}

/* Order status column in the account orders table. */
.woocommerce-orders-table__cell-order-status {
	font-weight: 600;
}

/* -- Password strength meter -------------------------------------------- */

.woocommerce .woocommerce-password-strength {
	margin-top: var(--cs-1);
	padding: var(--cs-1) var(--cs-3);
	border-radius: var(--cs-radius-xs);
	font-size: var(--cs-text-xs);
	font-weight: 600;
	text-align: start;
}

.woocommerce .woocommerce-password-strength.short,
.woocommerce .woocommerce-password-strength.bad {
	background: rgba(179, 38, 30, 0.1);
	color: var(--cs-danger);
}

.woocommerce .woocommerce-password-strength.good {
	background: rgba(138, 100, 16, 0.12);
	color: var(--cs-warn);
}

.woocommerce .woocommerce-password-strength.strong {
	background: rgba(47, 122, 85, 0.1);
	color: var(--cs-success);
}

/* =========================================================================
 * 17 — WooCommerce cart/checkout blocks
 *
 * Since WooCommerce 8.3 a new install's Cart and Checkout pages contain the
 * `woocommerce/cart` and `woocommerce/checkout` blocks, which render from JavaScript
 * and cannot be overridden by a PHP template. The theme therefore ships its classic
 * templates *and* maps the blocks onto the same design tokens, so a store that stays
 * on the block checkout still looks like the rest of the theme.
 *
 * inc/woocommerce/cart-checkout-mode.php detects which mode a store is in and offers a
 * one-click switch to the classic shortcode on the theme setup screen — relevant here
 * because most Iranian gateway and shipping plugins still target classic checkout.
 *
 * Only tokens and spacing are touched. No attempt is made to restructure the blocks:
 * their internal DOM is not a public API, and fighting it would break on every
 * WooCommerce release.
 * ====================================================================== */

/* The blocks read a handful of their own custom properties; pointing them at the
   theme's tokens is the supported way to restyle them. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-form,
.wc-block-checkout {
	--wc-blue: var(--cs-brand);
	--wc-green: var(--cs-success);
	--wc-red: var(--cs-danger);
	--wc-yellow: var(--cs-warn);
	--wc-primary: var(--cs-brand);
	--wc-primary-text: var(--cs-on-brand);
	--wc-secondary: var(--cs-sand);
	--wc-secondary-text: var(--cs-ink);
	--wc-highlight: var(--cs-brand);
	--wc-content-bg: var(--cs-surface);
	--wc-surface: var(--cs-surface);
	--wc-form-border-radius: var(--cs-radius-sm);
	--wc-form-color-background: var(--cs-surface);
	--wc-form-border-color: var(--cs-line);
	font-family: var(--cs-font-sans);
}

/* Give the block pages the theme's page gutter and rhythm. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: var(--cs-container);
	margin-inline: auto;
	padding-inline: var(--cs-gutter);
	padding-block: var(--cs-6) var(--cs-section-sm);
}

/* Headings */
.wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wc-block-cart__submit-container + *,
.wc-block-components-order-summary__title {
	font-family: var(--cs-font-heading);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--cs-ink);
}

/* Buttons */
.wc-block-components-button:not(.is-link) {
	min-height: 48px;
	border-radius: var(--cs-radius-sm);
	background-color: var(--cs-brand);
	color: var(--cs-on-brand);
	font-family: var(--cs-font-sans);
	font-weight: 600;
	border: 1px solid var(--cs-brand);
	transition: background-color var(--cs-dur-fast) var(--cs-ease);
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--cs-brand-dark);
	border-color: var(--cs-brand-dark);
	color: var(--cs-on-brand);
}

.wc-block-components-button.outlined,
.wc-block-cart__submit-button.outlined {
	background-color: transparent;
	border-color: var(--cs-ink);
	color: var(--cs-ink);
}

.wc-block-components-button.is-link {
	color: var(--cs-brand);
	font-weight: 600;
}

/* Inputs */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox-control input {
	min-height: 48px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	color: var(--cs-ink);
	/* 16px keeps iOS from zooming the viewport on focus. */
	font-size: max(16px, var(--cs-text-base));
	font-family: var(--cs-font-sans);
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--cs-brand);
	box-shadow: 0 0 0 3px rgba(var(--cs-brand-rgb), 0.14);
	outline: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	font-family: var(--cs-font-sans);
	color: var(--cs-ink-3);
}

/* Cards / panels */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary {
	border-radius: var(--cs-radius-md);
	border-color: var(--cs-line);
	background: var(--cs-surface);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--cs-ink);
}

/* Radio / payment option cards, matching the classic checkout's treatment. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: var(--cs-radius-sm);
	border-color: var(--cs-line);
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--cs-brand);
	background: var(--cs-brand-tint);
}

/* Notices */
.wc-block-components-notice-banner {
	border-radius: var(--cs-radius-sm);
	font-family: var(--cs-font-sans);
}

/* Product thumbnails in the summary */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
	border-radius: var(--cs-radius-xs);
}

/*
 * The blocks manage their own RTL mirroring, so the theme does not add direction rules
 * here — doing so would double-flip them. Only the typography, colour and shape tokens
 * above are overridden.
 */

/* -- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cs-product-card__img,
	.cs-product-card__img--hover,
	.cs-sticky-buy,
	.cs-lightbox,
	.cs-ship-progress__bar {
		transition: none !important;
	}

}

/*
 * Flattened rather than nested inside the block above, so it works in browsers without
 * CSS nesting support. The hover cross-fade becomes an instant swap rather than being
 * removed, so the second product image stays reachable.
 */
@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.cs-product-card:hover .cs-product-card__img--solo {
		transform: none;
	}
}

/* -- Print -------------------------------------------------------------- */

@media print {
	.cs-product-card__actions,
	.cs-gallery__thumbs,
	.cs-gallery__zoom,
	.cs-lightbox,
	.cs-sticky-buy,
	.cs-filter-trigger,
	.cs-layout-switch,
	.cs-toolbar__sort,
	.woocommerce div.product form.cart,
	.cs-filters-aside {
		display: none !important;
	}

	/* An order confirmation is the one shop page people actually print. */
	.woocommerce ul.order_details,
	.woocommerce table.shop_table,
	.woocommerce .woocommerce-customer-details address {
		border-color: #999;
		background: transparent;
	}
}

/* =========================================================================
 * 18 — Very small phones (<= 400px)
 *
 * At this width the standard 24px card padding plus the page gutter consumes a
 * meaningful share of the viewport. Tightening the chrome buys back room for the
 * content itself rather than letting form fields and cart rows force page scroll.
 * ====================================================================== */

@media (max-width: 400px) {
	.cs-checkout-card,
	.cs-totals,
	.woocommerce #review_form #respond,
	.woocommerce form.checkout_coupon,
	.woocommerce form.login,
	.woocommerce form.register {
		padding: var(--cs-4);
	}

	.cs-cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--cs-3);
		padding: var(--cs-3);
	}

	.cs-cart-actions {
		padding: var(--cs-4);
	}

	/* The coupon field and its button stack rather than competing for one row. */
	.cs-coupon,
	.cs-coupon .cs-field,
	.cs-coupon .cs-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.cs-checkout-card__title {
		font-size: var(--cs-text-lg);
	}

	/*
	 * The totals table's two columns have a combined min-content width slightly wider
	 * than a 320px viewport once a long shipping-method label is in play. Letting the
	 * cells wrap keeps the table inside the page instead of scrolling it.
	 */
	.cs-totals th,
	.cs-totals td,
	.woocommerce .cart_totals table th,
	.woocommerce .cart_totals table td,
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.cs-totals th,
	.woocommerce .cart_totals table th {
		width: 42%;
	}

	.woocommerce ul#shipping_method li {
		flex-wrap: wrap;
	}

	.woocommerce ul#shipping_method label {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.cs-quick-view {
		padding: var(--cs-4);
	}
}