/**
 * COD Theme - WooCommerce styles.
 *
 * Replaces WooCommerce's woocommerce-general, -layout and -smallscreen
 * stylesheets. Mobile first, logical properties only, so it works in
 * RTL and LTR. Cart and Checkout blocks bring their own styles.
 */

/* ==========================================================================
   1. Wrapper, breadcrumb, page header
   ========================================================================== */

.wc-wrap {
	max-inline-size: var(--cod-wide-width);
	margin-inline: auto;
}

.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
	margin-block-end: var(--cod-space-m);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--cod-color-primary);
}

.breadcrumb-sep {
	opacity: 0.5;
}

.woocommerce-products-header {
	margin-block-end: var(--cod-space-m);
}

.woocommerce-products-header__title {
	margin-block-end: var(--cod-space-xs);
}

.term-description {
	color: var(--cod-color-muted);
}

.term-description > :last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   2. Notices
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cod-space-s);
	margin: 0 0 var(--cod-space-m);
	padding: var(--cod-space-s) var(--cod-space-m);
	list-style: none;
	background: var(--cod-color-surface);
	border-inline-start: 4px solid var(--cod-color-primary);
	border-radius: var(--cod-radius);
}

.woocommerce-error {
	flex-direction: column;
	align-items: stretch;
	border-inline-start-color: var(--cod-color-sale);
	background: color-mix(in srgb, var(--cod-color-sale) 8%, var(--cod-color-base));
}

.woocommerce-info {
	border-inline-start-color: var(--cod-color-accent);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	min-block-size: 40px;
	padding-inline: var(--cod-space-m);
}

.woocommerce-store-notice,
p.demo_store {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	margin: 0;
	padding: var(--cod-space-xs) var(--cod-space-m);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-on-primary);
	background: var(--cod-color-primary);
	text-align: center;
}

.woocommerce-store-notice a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   3. Price, sale badge, rating, stock
   ========================================================================== */

.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--cod-space-xs);
	margin: 0;
	font-weight: 800;
	color: var(--cod-color-text);
	font-variant-numeric: tabular-nums;
}

.price del {
	order: 2;
	font-size: 0.85em;
	font-weight: 400;
	color: var(--cod-color-muted);
}

.price ins {
	color: var(--cod-color-sale);
	text-decoration: none;
}

/* Keep "2.500,00 DA" together and in number order inside Arabic text. */
.woocommerce-Price-amount {
	white-space: nowrap;
	unicode-bidi: isolate;
}

.onsale {
	position: absolute;
	inset-block-start: var(--cod-space-xs);
	inset-inline-start: var(--cod-space-xs);
	z-index: 2;
	padding: 2px var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 800;
	line-height: 1.5;
	color: #fff;
	background: var(--cod-color-sale);
	border-radius: 6px;
}

/* Stars drawn with SVG backgrounds, no icon font. */
.star-rating {
	position: relative;
	display: inline-block;
	inline-size: 5.5em;
	block-size: 1.1em;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d1d5db' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") repeat-x;
	background-size: 1.1em 1.1em;
}

.star-rating span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	overflow: hidden;
	text-indent: -9999em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") repeat-x;
	background-size: 1.1em 1.1em;
}

[dir="rtl"] .star-rating,
[dir="rtl"] .star-rating span {
	background-position: right top;
}

.stock {
	margin-block: var(--cod-space-xs);
	font-weight: 700;
}

.stock.in-stock {
	color: var(--cod-color-primary);
}

.stock.out-of-stock,
.stock.available-on-backorder {
	color: var(--cod-color-sale);
}

/* ==========================================================================
   4. Product grid and cards
   ========================================================================== */

/*
 * Cards per row: 2 on phones, up to 3 on tablets, and from 1024px the
 * "Products per row" setting (Customize > WooCommerce > Product Catalog),
 * which WooCommerce prints as a columns-N class.
 */
ul.products {
	--cod-cols: 2;

	display: grid;
	grid-template-columns: repeat(var(--cod-cols), minmax(0, 1fr));
	gap: var(--cod-space-m) var(--cod-space-s);
	margin: 0 0 var(--cod-space-l);
	padding: 0;
	list-style: none;
}

ul.products.columns-1 {
	--cod-cols: 1;
}

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

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	text-align: center;
	background: var(--cod-color-base);
	border: 1px solid var(--cod-color-border);
	border-radius: var(--cod-radius-lg);
	overflow: hidden;
	transition: border-color var(--cod-transition), box-shadow var(--cod-transition);
}

ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product-category > a {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding-block-end: var(--cod-space-s);
	color: inherit;
	text-decoration: none;
}

ul.products li.product img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--cod-color-surface);
}

.product-card__category {
	display: block;
	margin: var(--cod-space-s) var(--cod-space-s) 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
	color: var(--cod-color-muted);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-category__title {
	display: -webkit-box;
	margin: var(--cod-space-xs) var(--cod-space-s) 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color var(--cod-transition);
}

ul.products li.product .star-rating {
	margin: var(--cod-space-xs) auto 0;
	font-size: 0.8rem;
}

ul.products li.product .price {
	justify-content: center;
	margin: var(--cod-space-xs) var(--cod-space-s) 0;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--cod-color-primary);
}

ul.products li.product .price ins {
	color: inherit;
}

ul.products li.product .button {
	display: flex;
	margin: 0 var(--cod-space-s) var(--cod-space-s);
	min-block-size: 44px;
	padding-inline: var(--cod-space-s);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

ul.products li.product .added_to_cart {
	margin: 0 var(--cod-space-s) var(--cod-space-s);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-align: center;
}

ul.products li.product .button.loading {
	opacity: 0.6;
}

ul.products li.product-category mark {
	background: none;
	color: var(--cod-color-muted);
}

/* Hover (devices with a mouse): border and title in the primary color, button in the accent color. */
@media (hover: hover) {
	ul.products li.product:hover {
		border-color: var(--cod-color-primary);
		box-shadow: var(--cod-shadow);
	}

	ul.products li.product:hover .woocommerce-loop-product__title,
	ul.products li.product:hover .woocommerce-loop-category__title {
		color: var(--cod-color-primary);
	}

	ul.products li.product:hover .button {
		color: var(--cod-color-on-accent);
		background-color: var(--cod-color-accent);
	}
}

@media (min-width: 768px) {
	ul.products {
		--cod-cols: 3;

		gap: var(--cod-space-l) var(--cod-space-m);
	}

	ul.products.columns-1 {
		--cod-cols: 1;
	}

	ul.products.columns-2 {
		--cod-cols: 2;
	}
}

@media (min-width: 1024px) {
	ul.products.columns-4 {
		--cod-cols: 4;
	}

	ul.products.columns-5 {
		--cod-cols: 5;
	}

	ul.products.columns-6 {
		--cod-cols: 6;
	}
}

/* ==========================================================================
   5. Sorting, result count, pagination
   ========================================================================== */

.woocommerce-result-count {
	margin-block-end: var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
}

.woocommerce-ordering {
	margin-block-end: var(--cod-space-m);
}

.woocommerce-ordering select {
	inline-size: 100%;
}

@media (min-width: 600px) {
	.woocommerce-result-count {
		float: inline-start;
		margin-block: var(--cod-space-s) 0;
	}

	.woocommerce-ordering {
		float: inline-end;
	}

	.woocommerce-ordering select {
		inline-size: auto;
		min-inline-size: 220px;
	}

	ul.products {
		clear: both;
	}
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cod-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--cod-space-s);
	color: var(--cod-color-text);
	border: 1px solid var(--cod-color-border);
	border-radius: var(--cod-radius);
	text-decoration: none;
}

.woocommerce-pagination .page-numbers span.current {
	color: var(--cod-color-on-primary);
	background: var(--cod-color-primary);
	border-color: var(--cod-color-primary);
}

/* ==========================================================================
   6. Quantity and generic WooCommerce forms
   ========================================================================== */

.quantity .qty {
	inline-size: 5em;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce form .form-row {
	margin: 0 0 var(--cod-space-m);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
}

.woocommerce form .form-row .required {
	color: var(--cod-color-sale);
	text-decoration: none;
}

.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--cod-color-sale);
}

.woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
}

.woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: var(--cod-space-xs);
	font-weight: 400;
}

.woocommerce-form__label-for-checkbox input {
	inline-size: 1.15em;
	block-size: 1.15em;
	min-block-size: 0;
	margin: 0;
}

.password-input {
	position: relative;
	display: block;
}

.show-password-input {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	min-inline-size: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	opacity: 0.6;
}

.show-password-input::after {
	content: "\1F441";
}

.show-password-input.display-password {
	opacity: 1;
}

.col2-set {
	display: grid;
	gap: var(--cod-space-l);
}

@media (min-width: 768px) {
	.col2-set {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		display: inline-block;
		inline-size: calc(50% - var(--cod-space-xs));
		vertical-align: top;
	}

	.woocommerce form .form-row-first {
		margin-inline-end: var(--cod-space-s);
	}
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.checkout_coupon,
.woocommerce-form-login-toggle + form {
	margin-block-end: var(--cod-space-l);
	padding: var(--cod-space-m);
	border: 1px solid var(--cod-color-border);
	border-radius: var(--cod-radius-lg);
}

/* ==========================================================================
   7. Tables (classic cart, checkout review, orders)
   ========================================================================== */

.shop_table {
	inline-size: 100%;
	margin-block-end: var(--cod-space-l);
	border: 1px solid var(--cod-color-border);
	border-radius: var(--cod-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.shop_table th,
.shop_table td {
	padding: var(--cod-space-s);
	vertical-align: middle;
}

.shop_table tr:last-child > * {
	border-block-end: 0;
}

.shop_table tfoot th,
.shop_table thead th {
	background: var(--cod-color-surface);
}

.shop_table .product-thumbnail img {
	inline-size: 64px;
	border-radius: var(--cod-radius);
}

.shop_table .product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	font-size: 1.25rem;
	color: var(--cod-color-sale);
	border-radius: 999px;
	text-decoration: none;
}

.shop_table .product-remove a:hover {
	background: var(--cod-color-surface);
}

.woocommerce-cart-form .actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cod-space-xs);
	margin-block-end: var(--cod-space-s);
}

.woocommerce-cart-form .actions .coupon .input-text {
	flex: 1 1 160px;
	inline-size: auto;
}

/* Stack table rows as cards on phones. */
@media (max-width: 767px) {
	.shop_table_responsive thead {
		display: none;
	}

	.shop_table_responsive tr {
		display: block;
		border-block-end: 1px solid var(--cod-color-border);
	}

	.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		gap: var(--cod-space-s);
		border: 0;
		text-align: end;
	}

	.shop_table_responsive tr td::before {
		content: attr(data-title);
		font-weight: 700;
		text-align: start;
	}

	.shop_table_responsive tr td.product-remove::before,
	.shop_table_responsive tr td.product-thumbnail::before,
	.shop_table_responsive tr td.actions::before {
		content: none;
	}

	.shop_table_responsive tr td.actions {
		display: block;
	}
}

.cart-collaterals .cart_totals {
	max-inline-size: 480px;
	margin-inline-start: auto;
}

.wc-proceed-to-checkout .checkout-button {
	inline-size: 100%;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* ==========================================================================
   8. Classic checkout
   ========================================================================== */

#order_review_heading {
	margin-block-start: var(--cod-space-l);
}

#payment {
	padding: var(--cod-space-m);
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

#payment ul.payment_methods {
	margin: 0 0 var(--cod-space-m);
	padding: 0;
	list-style: none;
}

#payment ul.payment_methods li {
	padding-block: var(--cod-space-xs);
}

#payment .payment_box {
	margin-block-start: var(--cod-space-xs);
	padding: var(--cod-space-s);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	background: var(--cod-color-base);
	border-radius: var(--cod-radius);
}

#payment .payment_box p:last-child {
	margin: 0;
}

#place_order {
	inline-size: 100%;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block-end: var(--cod-space-m);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.woocommerce-order-overview {
	display: grid;
	gap: var(--cod-space-xs);
	margin: 0 0 var(--cod-space-l);
	padding: var(--cod-space-m);
	list-style: none;
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

/* ==========================================================================
   9. My account
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--cod-space-l);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--cod-space-xs);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--cod-space-xs) var(--cod-space-s);
	font-weight: 600;
	color: var(--cod-color-text);
	white-space: nowrap;
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--cod-color-on-primary);
	background: var(--cod-color-primary);
}

.woocommerce-Addresses .woocommerce-Address {
	padding: var(--cod-space-m);
	border: 1px solid var(--cod-color-border);
	border-radius: var(--cod-radius-lg);
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 240px 1fr;
		align-items: start;
	}

	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
	}
}

/* ==========================================================================
   10. Single product
   ========================================================================== */

.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cod-space-xl);
}

.single-product div.product > * {
	min-inline-size: 0;
}

/*
 * .product-main holds two rows: the columns box (gallery | summary and
 * description) and the reviews at full width. The sticky gallery is
 * limited to the columns box, so it never slides over the reviews.
 */
.product-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cod-space-xl);
}

.product-main__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cod-space-l);
}

.product-main > *,
.product-main__columns > * {
	min-inline-size: 0;
}

/* Full-bleed gallery on phones: images are the product page's best seller. */
@media (max-width: 767px) {
	.single-product .site-main {
		padding-block-start: 0;
	}

	.single-product .woocommerce-breadcrumb {
		display: none;
	}

	.single-product div.product .product-gallery {
		margin-inline: calc(var(--cod-gutter) * -1);
	}

	.single-product div.product .product-gallery .product-gallery__track,
	.single-product div.product .product-gallery__slide img {
		border-radius: 0;
	}
}

@media (min-width: 768px) {
	.product-main__columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--cod-space-xl);
		align-items: start;
	}

	/* Gallery in the first column beside the summary and the description sections. */
	.product-main__columns > .product-gallery {
		grid-row: 1 / span 2;
		grid-column: 1;
		position: sticky;
		inset-block-start: calc(var(--cod-header-height) + var(--cod-space-m) + var(--wp-admin--admin-bar--height, 0px));
	}

	.product-main__columns > .summary,
	.product-main__columns > .product-sections--details {
		grid-column: 2;
	}
}

@media (min-width: 1024px) {
	/* Gallery a little narrower than the summary, so the image does not dominate. */
	.product-main__columns {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

/* Gallery ---------------------------------------------------------------- */

.product-gallery {
	position: relative;
}

.product-gallery__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

.product-gallery__track::-webkit-scrollbar {
	display: none;
}

.product-gallery__track:focus-visible {
	outline-offset: -3px;
}

.product-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.product-gallery__slide img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--cod-radius-lg);
}

.product-gallery__counter {
	position: absolute;
	inset-block-start: var(--cod-space-s);
	inset-inline-end: var(--cod-space-s);
	z-index: 2;
	padding: 0 var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	color: #fff;
	background: rgb(0 0 0 / 0.55);
	border-radius: 999px;
}

.product-gallery__arrow {
	position: absolute;
	inset-block-start: calc(50% - 60px);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	color: var(--cod-color-text);
	background: rgb(255 255 255 / 0.9);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--cod-shadow);
}

.product-gallery__arrow--prev {
	inset-inline-start: var(--cod-space-s);
}

.product-gallery__arrow--next {
	inset-inline-end: var(--cod-space-s);
}

.product-gallery__thumbs {
	display: flex;
	gap: var(--cod-space-xs);
	margin-block-start: var(--cod-space-xs);
	padding-inline: var(--cod-gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

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

.product-gallery__thumb {
	/* Contain the absolutely positioned screen reader text inside the scrolling row. */
	position: relative;
	flex: 0 0 64px;
	padding: 0;
	overflow: hidden;
	background: var(--cod-color-surface);
	border: 2px solid transparent;
	border-radius: var(--cod-radius);
	opacity: 0.7;
	transition: opacity var(--cod-transition), border-color var(--cod-transition);
}

.product-gallery__thumb[aria-current="true"] {
	border-color: var(--cod-color-primary);
	opacity: 1;
}

.product-gallery__thumb img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

@media (min-width: 768px) {
	.product-gallery__arrow {
		display: inline-flex;
	}

	.product-gallery__thumbs {
		padding-inline: 0;
	}

	.product-gallery__thumb {
		flex-basis: 76px;
	}
}

/* Opens the full-screen viewer (shown by product.js when the viewer works). */
.product-gallery.has-viewer .product-gallery__slide img {
	cursor: zoom-in;
}

/* Corner opposite the sale badge, under the image counter. */
.product-gallery__zoom {
	position: absolute;
	inset-block-start: calc(var(--cod-space-s) + 35px);
	inset-inline-end: var(--cod-space-s);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	color: var(--cod-color-text);
	background: rgb(255 255 255 / 0.9);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--cod-shadow);
	cursor: pointer;
}

/* One image: no counter above the button, so it sits in the corner. */
.product-gallery--single .product-gallery__zoom {
	inset-block-start: var(--cod-space-s);
}

.product-gallery__zoom[hidden] {
	display: none;
}

.product-gallery__zoom:hover {
	color: var(--cod-color-primary);
}

/* Full-screen viewer ------------------------------------------------------ */

.has-gallery-viewer {
	overflow: hidden;
}

.gallery-viewer {
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: 0;
	color: #fff;
	background: #000;
	border: 0;
	overflow: hidden;
}

.gallery-viewer::backdrop {
	background: #000;
}

.gallery-viewer__track {
	display: flex;
	block-size: 100%;
	overflow-x: auto;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gallery-viewer__track::-webkit-scrollbar {
	display: none;
}

/* While zoomed, swiping pans the image instead of changing it. */
.gallery-viewer.is-zoomed .gallery-viewer__track {
	overflow: hidden;
}

/*
 * Each slide scrolls on its own when zoomed. LTR scrolling keeps the pan
 * maths the same in both directions; grid + auto margins centre the image
 * while it fits and let it overflow evenly once zoomed.
 */
.gallery-viewer__slide {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	flex: 0 0 100%;
	block-size: 100%;
	overflow: hidden;
	direction: ltr;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	scrollbar-width: none;
}

.gallery-viewer__slide::-webkit-scrollbar {
	display: none;
}

.gallery-viewer__slide img {
	max-inline-size: 100%;
	max-block-size: 100dvh;
	margin: auto;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.gallery-viewer__slide.is-zoomed {
	overflow: auto;
}

.gallery-viewer__slide.is-zoomed img {
	max-inline-size: none;
	max-block-size: none;
	block-size: auto;
	cursor: zoom-out;
}

.gallery-viewer__button {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	color: #fff;
	background: rgb(0 0 0 / 0.55);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.gallery-viewer__button:hover {
	background: rgb(0 0 0 / 0.75);
}

.gallery-viewer__close {
	inset-block-start: var(--cod-space-s);
	inset-inline-end: var(--cod-space-s);
}

.gallery-viewer__arrow {
	inset-block-start: calc(50% - 22px);
}

.gallery-viewer__arrow--prev {
	inset-inline-start: var(--cod-space-s);
}

.gallery-viewer__arrow--next {
	inset-inline-end: var(--cod-space-s);
}

.gallery-viewer.is-zoomed .gallery-viewer__arrow,
.gallery-viewer.is-zoomed .gallery-viewer__hint {
	display: none;
}

.gallery-viewer__counter {
	position: absolute;
	inset-block-start: var(--cod-space-s);
	inset-inline-start: var(--cod-space-s);
	z-index: 2;
	padding: 6px var(--cod-space-s);
	font-weight: 700;
	background: rgb(0 0 0 / 0.55);
	border-radius: 999px;
}

.gallery-viewer__hint {
	position: absolute;
	inset-block-end: var(--cod-space-m);
	inset-inline-start: 50%;
	margin: 0;
	padding: 4px var(--cod-space-s);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	white-space: nowrap;
	background: rgb(0 0 0 / 0.55);
	border-radius: 999px;
	transform: translateX(-50%);
	pointer-events: none;
}

[dir="rtl"] .gallery-viewer__hint {
	transform: translateX(50%);
}

/* Summary ---------------------------------------------------------------- */

.single-product .summary > * + * {
	margin-block-start: var(--cod-space-m);
}

.single-product .summary > *:empty {
	display: none;
}

.single-product .product_title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large, 2rem);
	line-height: 1.3;
}

/* Short highlight next to the name ("Exclusive"), set per product. */
.product-label {
	display: inline-block;
	margin-inline-start: var(--cod-space-xs);
	padding: 2px 10px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--cod-color-on-accent);
	vertical-align: middle;
	background: var(--cod-color-accent);
	border-radius: 6px;
	white-space: nowrap;
}

.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--cod-space-xs);
	margin-block-start: var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.single-product .woocommerce-review-link {
	color: var(--cod-color-muted);
}

.single-product .summary .price {
	font-size: var(--wp--preset--font-size--xx-large, 2rem);
	line-height: 1.3;
}

.single-product .summary .price del {
	font-size: 0.6em;
}

.woocommerce-product-details__short-description {
	color: var(--cod-color-muted);
}

.woocommerce-product-details__short-description > :last-child {
	margin-block-end: 0;
}

/* WooCommerce Add to cart form (shown when no order form is hooked). */
.single-product form.cart:not(.cod-form) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cod-space-s);
	padding: var(--cod-space-m);
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

.single-product form.cart:not(.cod-form) .single_add_to_cart_button {
	flex: 1 1 auto;
	min-block-size: 52px;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--cod-color-on-accent);
	background-color: var(--cod-color-accent);
}

.single-product form.cart:not(.cod-form) .single_add_to_cart_button:hover {
	filter: brightness(0.95);
}

.single-product form.cart .quantity .qty {
	min-block-size: 52px;
}

form.cart.variations_form {
	flex-direction: column;
}

table.variations {
	margin: 0;
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	border: 0;
}

table.variations th {
	padding-block-end: var(--cod-space-xs);
}

table.variations td {
	padding-block-end: var(--cod-space-s);
}

.reset_variations {
	display: inline-block;
	margin-block-start: var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.single_variation_wrap {
	display: grid;
	gap: var(--cod-space-s);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	gap: var(--cod-space-s);
}

table.group_table {
	margin: 0;
}

table.group_table td {
	padding: var(--cod-space-xs);
}

.product_meta {
	display: grid;
	gap: var(--cod-space-xs);
	padding-block-start: var(--cod-space-m);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
	border-block-start: 1px solid var(--cod-color-border);
}

/* Stacked sections (description, additional information, reviews) -------- */

.product-sections {
	display: grid;
	gap: var(--cod-space-xl);
	max-inline-size: var(--cod-content-width);
	margin-inline: auto;
	inline-size: 100%;
}

/* Reviews span the full width of the product area. */
.product-sections--reviews {
	max-inline-size: none;
	margin-inline: 0;
}

/* Description sections fill the details column under the summary. */
.product-sections--details {
	max-inline-size: none;
	margin-inline: 0;
	padding-block-start: var(--cod-space-l);
	border-block-start: 1px solid var(--cod-color-border);
}

.product-section > h2:first-child {
	margin-block-end: var(--cod-space-m);
	padding-block-end: var(--cod-space-xs);
	border-block-end: 2px solid var(--cod-color-border);
}

.product-section--description img {
	border-radius: var(--cod-radius);
}

.woocommerce-product-attributes th {
	inline-size: 40%;
}

.woocommerce-product-attributes p {
	margin: 0;
}

/* Reviews */
#reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#reviews .commentlist li {
	margin-block-end: var(--cod-space-m);
}

#reviews .comment_container {
	display: flex;
	gap: var(--cod-space-s);
	padding: var(--cod-space-m);
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

#reviews .comment_container img.avatar {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 999px;
}

#reviews .comment-text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

#reviews .comment-text .star-rating {
	float: inline-end;
}

#reviews .meta {
	margin-block-end: var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
}

#reviews .description > :last-child {
	margin-block-end: 0;
}

#review_form_wrapper {
	margin-block-start: var(--cod-space-l);
}

#review_form .comment-reply-title {
	display: block;
	margin-block-end: var(--cod-space-s);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
}

.comment-form-rating select {
	max-inline-size: 220px;
}

/* Related and up-sell products */
.related.products > h2,
.upsells.products > h2 {
	margin-block-end: var(--cod-space-m);
}

/* ==========================================================================
   11. Blocks compatibility (Cart / Checkout blocks keep their own styles)
   ========================================================================== */

.wc-block-components-button:not(.is-link) {
	min-block-size: var(--cod-tap-size);
	border-radius: var(--cod-radius);
}

/* ==========================================================================
   12. Helpers
   ========================================================================== */

.woocommerce .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.clear {
	clear: both;
}

/* ==========================================================================
   13. Product card extras and front page
   ========================================================================== */

.product-card__badge {
	position: absolute;
	inset-block-start: var(--cod-space-xs);
	inset-inline-end: var(--cod-space-xs);
	z-index: 2;
	padding: 2px var(--cod-space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	background: rgb(17 24 39 / 0.75);
	border-radius: 6px;
}

ul.products li.outofstock img {
	opacity: 0.6;
}

ul.products li.product-category .woocommerce-loop-category__title {
	margin-block-end: var(--cod-space-s);
	text-align: center;
}

.front-page-content {
	max-inline-size: var(--cod-wide-width);
	margin-block-end: var(--cod-space-xl);
}

.home-section + .home-section {
	margin-block-start: var(--cod-space-xl);
}

.home-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cod-space-xs);
	margin-block-end: var(--cod-space-l);
	text-align: center;
}

.home-section__title {
	margin: 0;
	text-align: center;
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	margin: 0 0 var(--cod-space-l);
	text-align: center;
}

.home-section__more {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	text-decoration: none;
}

.home-section .woocommerce ul.products {
	margin-block-end: 0;
}

/* ==========================================================================
   14. Rating summary (stars, average, number of reviews)
   ========================================================================== */

.rating-summary {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
}

.rating-summary .star-rating {
	margin: 0;
}

.rating-summary__average {
	font-weight: 800;
	color: var(--cod-color-text);
}

.rating-summary__count {
	color: var(--cod-color-muted);
}

.rating-summary--compact {
	gap: 0 4px;
	font-size: 0.75rem;
}

.rating-summary--compact .star-rating {
	font-size: 0.7rem;
}

.rating-summary--compact .rating-summary__count {
	text-decoration: none;
}

.rating-summary--empty .rating-summary__count {
	color: var(--cod-color-primary);
}

/* ==========================================================================
   15. Reviews: summary, star input, photos, photo viewer
   ========================================================================== */

/* The theme prints its own heading and summary above WooCommerce's list. */
.product-section--reviews .woocommerce-Reviews-title {
	display: none;
}

.reviews-summary {
	display: grid;
	gap: var(--cod-space-m);
	margin-block-end: var(--cod-space-l);
	padding: var(--cod-space-m);
	background: var(--cod-color-surface);
	border-radius: var(--cod-radius-lg);
}

.reviews-summary__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cod-space-xs);
	text-align: center;
}

.reviews-summary__average {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--cod-color-text);
}

.reviews-summary__score .star-rating {
	font-size: 1.1rem;
}

.reviews-summary__based {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
}

.reviews-summary__bars {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reviews-summary__bar {
	display: grid;
	grid-template-columns: 6em 1fr 2.5em;
	align-items: center;
	gap: var(--cod-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* "نجمة واحدة" (1 star) is the longest label; keep every label on one line. */
.reviews-summary__label {
	white-space: nowrap;
}

.reviews-summary__track {
	block-size: 8px;
	overflow: hidden;
	background: var(--cod-color-border);
	border-radius: 999px;
}

.reviews-summary__fill {
	display: block;
	block-size: 100%;
	background: #f59e0b;
	border-radius: inherit;
}

.reviews-summary__count {
	color: var(--cod-color-muted);
	text-align: end;
}

.reviews-summary__write {
	justify-self: center;
}

@media (min-width: 600px) {
	.reviews-summary {
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: var(--cod-space-xl);
	}

	.reviews-summary__write {
		grid-column: 1 / -1;
	}
}

/* Star rating input: DOM order 5..1, shown reversed so 1 star is at the start. */
.review-stars {
	margin: 0 0 var(--cod-space-m);
	padding: 0;
	border: 0;
}

.review-stars__legend {
	margin-block-end: var(--cod-space-xs);
	padding: 0;
	font-weight: 600;
}

.review-stars__options {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.review-stars__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

.review-stars__star {
	display: inline-flex;
	margin: 0;
	padding: 4px;
	color: #d1d5db;
	cursor: pointer;
	transition: color var(--cod-transition), transform var(--cod-transition);
}

.review-stars__input:checked ~ .review-stars__star {
	color: #f59e0b;
}

@media (hover: hover) {
	.review-stars__options:hover .review-stars__star {
		color: #d1d5db;
	}

	.review-stars__options .review-stars__star:hover,
	.review-stars__options .review-stars__star:hover ~ .review-stars__star {
		color: #f59e0b;
	}
}

.review-stars__star:active {
	transform: scale(0.9);
}

.review-stars__input:focus-visible + .review-stars__star {
	outline: 2px solid var(--cod-color-primary);
	outline-offset: 1px;
	border-radius: var(--cod-radius);
}

/* Photo field */
.comment-form-images input[type="file"] {
	display: block;
	inline-size: 100%;
	padding: var(--cod-space-s);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	background: var(--cod-color-base);
	border: 1px dashed var(--cod-color-border);
	border-radius: var(--cod-radius);
	cursor: pointer;
}

.comment-form-images__hint {
	display: block;
	margin-block-start: 4px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--cod-color-muted);
}

.comment-form-images__preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cod-space-xs);
	margin-block-start: var(--cod-space-xs);
}

.comment-form-images__preview:empty {
	display: none;
}

.comment-form-images__preview img {
	inline-size: 64px;
	block-size: 64px;
	object-fit: cover;
	border-radius: var(--cod-radius);
}

.comment-form-images__error {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	color: var(--cod-color-sale);
}

/* Photos under a review */
.review-images {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cod-space-xs);
	margin: var(--cod-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.review-images__link {
	position: relative;
	display: block;
}

.review-images img {
	inline-size: 72px;
	block-size: 72px;
	object-fit: cover;
	border-radius: var(--cod-radius);
}

/* Photo viewer (native <dialog>) */
.photo-viewer {
	max-inline-size: min(92vw, 900px);
	max-block-size: 92vh;
	padding: 0;
	background: transparent;
	border: 0;
}

.photo-viewer::backdrop {
	background: rgb(0 0 0 / 0.85);
}

.photo-viewer img {
	max-inline-size: 100%;
	max-block-size: 86vh;
	margin-inline: auto;
	border-radius: var(--cod-radius);
}

.photo-viewer__close {
	position: fixed;
	inset-block-start: var(--cod-space-s);
	inset-inline-end: var(--cod-space-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	color: #fff;
	background: rgb(255 255 255 / 0.15);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}