/*
Single product page. WooCommerce's own wrapper (#primary > #main, from
woocommerce_output_content_wrapper()) already supplies our skip-link
target, so this file only styles what's inside it — no template override
needed for the page shell.
*/

/* .woocommerce-breadcrumb styling lives in base.css, shared with the
   theme's own .breadcrumb function used on blog/page templates. */

/* #primary.content-area's padding-block (product-card.css, every
   WooCommerce page) is zeroed here on mobile -- scoped to body.single-product
   only, so the shop/cart/search pages keep their normal top/bottom gap. */
@media (max-width: 1023.98px) {
	body.single-product #primary.content-area {
		padding-block: 0;
	}
}

/* Hero (gallery + title/short description) and sticky sidebar (variations/
   price/quantity/add-to-cart) side by side, tabs/upsells/related full width
   below both -------------------------------------------------------------- */

/* div.product, not plain .product: wc_product_class() puts the bare
   "product" class on EVERY product element WooCommerce renders, including
   the <li class="card product-card product …"> loop cards (content-
   product.php) used in the related/upsell/sale-carousel grids on this same
   page -- an unqualified .product rule would turn every one of those cards
   into a grid container too. The single-product wrapper is the one place
   that class lands on a <div> (woocommerce/content-single-product.php);
   loop cards are always <li>, so the tag alone tells them apart. */
div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	div.product {
		/* Exactly two direct children: .product-main (hero + content) and
		   .product-sidebar. Tabs/upsells/related live inside .product-content
		   now, not as direct children of .product -- that's what lets
		   .product-sidebar's grid cell span the full height of .product-main
		   (hero + content combined) instead of just the hero row, so the
		   sticky sidebar can stay stuck all the way down the page, not just
		   alongside the hero. */
		grid-template-columns: 7fr 4.2fr;
		gap: var(--space-8);
		align-items: start;
	}
}

.product-main {
	min-width: 0;
}

/* Hero: gallery + title/rating/short description/meta ------------------------ */

.product-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.product-hero {
		/* Gallery is first in the DOM; under dir="rtl" that already renders
		   it on the right, so this stays a plain row, not row-reverse. */
		flex-direction: row;
		align-items: flex-start;
	}

	.product-hero__gallery {
		flex: 1 1 30%;
		min-width: 0;
	}

	.product-hero__text {
		flex: 1 1 70%;
		min-width: 0;
	}
}

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



span.onsale {
    background: #ff4040;
    color: #fff;
    padding: 0 10px;
    border-radius: 9px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.product-hero__gallery {
    position: relative;
}


.product-gallery__main {
	aspect-ratio: 1 / 1;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.product-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.product-gallery__thumbs {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
	overflow-x: auto;
}

.product-gallery__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color var(--transition-fast);
}

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

.product-gallery__thumb:hover {
	border-color: var(--color-border);
}

.product-gallery__thumb.is-active {
	border-color: var(--color-primary);
}

/* Hero text: title/rating/short description/meta ----------------------------- */

.product-hero__text .product_title {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-2);
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
}

.woocommerce-review-link {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.woocommerce-product-details__short-description {
	color: var(--color-ink);
	line-height: var(--leading-normal);
	margin-block-end: var(--space-5);
}

.woocommerce-product-details__short-description p {
	max-width: 60ch;
}

.stock {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	margin-block-end: var(--space-4);
}

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

.stock.out-of-stock {
	color: var(--color-sale);
}

/* Sidebar: compact title/hint + variations/price/quantity/add-to-cart -------- */

.product-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
	.product-sidebar {
		position: sticky;
		top: calc(var(--header-h, 0px) + var(--space-4));
	}
}

.product-sidebar__title {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--color-ink);
	margin: 0;
}

.product-sidebar__hint {
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.product-sidebar__buy {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.product-sidebar .price {
	display: block;
	font-size: var(--text-xl);
	margin: 0;
}

.product-sidebar .price .woocommerce-Price-amount {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

.product-sidebar .price del {
	margin-inline-end: var(--space-3);
	font-size: var(--text-lg);
	font-weight: var(--font-regular);
	color: var(--color-muted);
}

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

/* Add to cart form ------------------------------------------------------------- */

.cart {
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-bg);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	transition: background-color var(--transition-fast);
}

.single_add_to_cart_button:hover {
	background: var(--color-primary-hover);
}

.single_add_to_cart_button.disabled {
	background: var(--color-surface);
	color: var(--color-muted);
	cursor: not-allowed;
}

/* Quantity stepper (single product + cart) -------------------------------------- */

.qty-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.qty-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	color: var(--color-ink);
}

.qty-stepper__btn:hover {
	background: var(--color-surface);
}

.qty-stepper__btn:disabled {
	color: var(--color-muted);
	cursor: not-allowed;
}

.qty-stepper input.qty {
	width: 48px;
	height: 100%;
	border: none;
	border-inline: 1px solid var(--color-border);
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

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

/* Variations --------------------------------------------------------------------- */

.variations {
	
	margin-block-end: var(--space-4);
}

/* Stack each attribute row as label-above / choices-below, rather than the
   default table layout of label-beside-choices. */
.variations tbody,
.variations tr {
	display: block;
}

.variations tr {
	margin-block-end: var(--space-3);
}

.variations tr:last-child {
	margin-block-end: 0;
}

.variations th,
.variations td {
	display: block;
	width: 100%;
	padding-inline-end: 0;
}

.variations th {
	text-align: start;
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	padding-block: 0 var(--space-2);
	vertical-align: top;
}

.variations td {
	padding-block: 0;
}

.variations select {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-size: var(--text-sm);
	font-family: inherit;
}

.variations select:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
	outline: none;
}

/* Swatch buttons (variation-swatches.js): the attribute <select>s (or,
   for a variable product with a full combination list, the whole
   .variations table) are the real control WooCommerce's own variation
   script reads from and submits -- this just presents their options as
   buttons instead of dropdowns, so every choice (and, per button, its
   own price) is visible at once. Hidden via the sr-only utility
   (base.css) rather than display:none, so it stays reachable for
   keyboard/screen-reader users; the .is-active button on the JS side
   always mirrors the underlying select(s). */

.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.variation-swatches__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 72px;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-ink);
	font-size: var(--text-sm);
	text-align: center;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

/* Combo swatches (one row per full variation, buildComboSwatches()) are a
   vertical list of full-width rows instead of the wrapped grid the plain
   single-attribute swatches use, each row's own attribute labels grouped
   on the value side (right in RTL) and its price/discount on the
   trailing side (left), so both are scannable at a glance down the list. */
.variation-swatches--combo {
	flex-direction: column;
	flex-wrap: nowrap;
}

.variation-swatches--combo .variation-swatches__btn {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-width: 0;
	text-align: start;
}

.variation-swatches__btn-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--space-3);
}

.variation-swatches__btn-label {
	font-weight: var(--font-medium);
}

.variation-swatches__btn-price {
	font-size: var(--text-xs);
	font-weight: var(--font-regular);
	color: var(--color-muted);
	white-space: nowrap;
}

.variation-swatches__btn-price:empty {
	display: none;
}

.variation-swatches__btn-price .woocommerce-Price-amount {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

.variation-swatches__btn-price del {
	margin-inline-end: 4px;
	opacity: 0.7;
}

.variation-swatches__btn-price ins {
	text-decoration: none;
	color: var(--color-sale);
	font-weight: var(--font-medium);
}

.variation-swatches__btn:hover {
	border-color: color-mix(in srgb, var(--color-border) 40%, var(--color-ink));
}

.variation-swatches__btn.is-active {
	border-color: var(--color-primary);
	background: var(--color-primary-tint);
	color: var(--color-primary);
	font-weight: var(--font-medium);
}

.variation-swatches__btn.is-active .variation-swatches__btn-price {
	color: var(--color-primary);
}

.variation-swatches__btn:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
	outline: none;
}

.variation-swatches__btn:disabled {
	color: var(--color-muted);
	border-color: var(--color-border);
	background: var(--color-bg);
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce-variation-price {
	font-weight: var(--font-semibold);
	margin-block: var(--space-2);
}

/* Redundant on desktop -- the combo swatches (variation-swatches.js) already
   show each option's own price (regular + struck-through sale) before it's
   even selected, so repeating the same price again here is just noise.
   Kept on mobile, where .single_variation_wrap is the whole buy box shown
   right after the hero (see the .product-main display:contents rule below)
   rather than sitting next to the swatches. */
@media (min-width: 1024px) {
	.woocommerce-variation-price {
		display: none;
	}
}

.woocommerce-variation-add-to-cart {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
}

.reset_variations {
	font-size: var(--text-xs);
	color: var(--color-muted);
	text-decoration: underline;
}

/* Meta ---------------------------------------------------------------------------- */

.product_meta {
	/* Hidden for now (SKU/category line) -- revisit later. */
	display: none;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-start: var(--space-5);
	padding-block-start: var(--space-5);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

.product_meta a {
	color: var(--color-muted);
}

.product_meta a:hover {
	color: var(--color-primary);
}

/* Content section: sticky in-page nav + stacked (always-open) sections ------- */

.product-content {
	margin-block-start: var(--space-8);
}

.product-content__nav {
	position: sticky;
	top: var(--header-h, 0px);
	z-index: 30;
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	margin-block-end: var(--space-6);
}

/* The site header itself isn't sticky on mobile anymore (header.css), so
   there's nothing above this to offset below -- top: var(--header-h) would
   otherwise leave a gap the header used to fill. */
@media (max-width: 1023.98px) {
	.product-content__nav {
		top: 0;
	}
}

.product-content__nav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	padding-block: var(--space-3);
	border-bottom: 2px solid transparent;
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	white-space: nowrap;
}

.product-content__nav-link .icon {
	width: 1.1em;
	height: 1.1em;
}

.product-content__nav-link:hover {
	color: var(--color-ink);
}

.product-content__nav-link.is-active {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.product-content__section {
	padding-block-end: var(--space-6);
	border-bottom: 1px solid var(--color-border);
	line-height: var(--leading-normal);
	/* Keeps a section's top clear of the sticky header + sticky content nav
	   when jumped to, whether via product-tabs-nav.js's scrollIntoView() or
	   a plain #tab-x hash link. */
	scroll-margin-top: calc(var(--header-h, 0px) + var(--content-nav-h, 56px) + var(--space-3));
}

.product-content__section:last-of-type {
	border-bottom: 0;
}

/* Each section's own visible title is just the nav link above it (tabs.php
   has no on-page heading of its own anymore). Three of WooCommerce's own
   tab callbacks still print their own visible heading inside the panel
   though (description's plain "Description" <h2>, additional-information's
   static "Additional information" <h2>, reviews' .woocommerce-Reviews-title),
   which would otherwise show up as a second, stale-text title -- hidden
   here instead of overriding those whole templates just to drop one
   heading. */
.woocommerce-Tabs-panel--description > h2:first-child,
.woocommerce-Tabs-panel--additional_information > h2:first-child {
	display: none;
}

.woocommerce-Tabs-panel--reviews .woocommerce-Reviews-title {
	display: none;
}

.product-content__section p {
	/* max-width: 65ch; */
	margin-block-end: var(--space-3);
}

/* FAQ tab accordion (.product-faq*) moved to prose.css -- it's shared
   with the post/page FAQ section (new_ubit_render_post_faqs() in
   inc/template-tags.php) and prose.css is enqueued on every page anyway,
   unlike this stylesheet which only loads on the product/cart pages. */

.woocommerce-product-attributes {
	width: 100%;
	/* max-width: 60ch; */
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-sm);
	text-align: start;
}

.woocommerce-product-attributes th {
	color: var(--color-muted);
	font-weight: var(--font-medium);
	width: 40%;
	flex-direction: column;
}

/* Reviews: .commentlist / .comment-form / #review_form styling lives in
   comments.css — WooCommerce reviews are built on WordPress's own comment
   system, so blog comments (single.php) use the exact same markup. */

/* Related / upsells ------------------------------------------------------------------ */

.up-sells h2,
.related h2 {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-5);
}

/* Below 1024px: no fixed/sticky buy bar -- .product-sidebar (title/hint +
   price/variations/add-to-cart) instead renders in normal page flow, right
   after .product-hero (gallery + title/excerpt/rating/meta) and before
   .product-content (tabs/upsells/related). .product-main is the DOM parent
   of .product-hero and .product-content but isn't itself a visual box we
   need here, so `display: contents` unwraps it, letting its two children
   become direct grid items of div.product alongside .product-sidebar --
   only then can `order` interleave .product-sidebar between them, since
   CSS order can't reach into a nested container otherwise. */
@media (max-width: 1023.98px) {
	.product-main {
		display: contents;
	}

	.product-hero {
		order: 1;
	}

	.product-sidebar {
		order: 2;
	}

	.product-content {
		order: 3;
	}
}


.h_iframe-aparat_embed_frame iframe {
    border: unset;
    border-radius: 36px;
}


/* Gallery lightbox (assets/js/product-gallery.js) -----------------------------
   Markup is injected once by JS, appended directly to <body> -- same overlay
   pattern as #new-ubit-otp-modal (assets/css/otp-login.css): fixed, centered,
   dark backdrop. */

.product-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: rgb(4 11 60 / 92%);
}

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

/* Stops the page scrolling behind the open lightbox. */
body.has-lightbox-open {
	overflow: hidden;
}

.product-gallery-lightbox__stage {
	max-width: min(90vw, 1100px);
	max-height: calc(100vh - var(--space-8));
}

.product-gallery-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - var(--space-8));
	object-fit: contain;
	margin-inline: auto;
}

.product-gallery-lightbox__close {
	position: absolute;
	top: var(--space-4);
	inset-inline-end: var(--space-4);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.product-gallery-lightbox__close:hover {
	background: rgb(255 255 255 / 0.2);
}

.product-gallery-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.product-gallery-lightbox__nav:hover {
	background: rgb(255 255 255 / 0.2);
}

.product-gallery-lightbox__nav .icon {
	width: 22px;
	height: 22px;
}

.product-gallery-lightbox__nav--prev {
	inset-inline-start: var(--space-4);
}

.product-gallery-lightbox__nav--prev .icon {
	transform: rotate(-90deg);
}

.product-gallery-lightbox__nav--next {
	inset-inline-end: var(--space-4);
}

.product-gallery-lightbox__nav--next .icon {
	transform: rotate(90deg);
}

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

@media (max-width: 480px) {
	.product-gallery-lightbox__nav {
		width: 40px;
		height: 40px;
	}
}