/* Plasko single product mobile layout — Figma nodes 10244:38257, 10335:32979, 10349:38002, 10344:37353. */

.plasko-mobile-purchase,
.plasko-product-gallery__mobile-progress {
	display: none;
}

@media (max-width: 767px) {
	:root {
		--plasko-mobile-purchase-height: 0px;
	}

	body.single-product {
		overflow-x: hidden;
	}

	.single-product .site-main.site-container {
		padding-bottom: calc(var(--plasko-mobile-purchase-height) + 24px);
	}

	.plasko-product__breadcrumb .woocommerce-breadcrumb {
		width: 100%;
		padding: 12px;
		overflow: hidden;
		font-size: 12px;
		line-height: 16px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.plasko-product__breadcrumb-separator {
		margin-inline: 4px;
	}

	/* Mobile hero follows the gallery -> info -> purchase-meta order from Figma. */
	.plasko-product-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"gallery"
			"summary"
			"purchase";
		width: 100%;
		margin: 0;
		gap: 0;
	}

	.plasko-product-hero__gallery {
		grid-area: gallery;
		width: 100vw;
		min-height: 0;
		margin-inline: calc((100% - 100vw) / 2);
		overflow: hidden;
		padding-block: 0;
	}

	.plasko-product-hero__summary {
		grid-area: summary;
		min-height: 0;
		padding: 16px 12px 0;
		border-radius: 24px 24px 0 0;
		background: #fff;
	}

	.plasko-product-hero__purchase {
		grid-area: purchase;
		min-height: 0;
		padding: 20px 12px 24px;
		background: #fff;
	}

	/* Main gallery: 340px visual card + 4px rail gutters = 348px step, with side peeks. */
	.plasko-product-gallery {
		width: 100%;
		overflow: visible;
	}

	.plasko-product-gallery__stage {
		width: min(348px, calc(100vw - 48px));
		margin-inline: auto;
		overflow: visible;
		border-radius: 0;
		background: transparent;
	}

	.plasko-product-gallery__slide {
		padding-inline: 4px;
	}

	.plasko-product-gallery__main-image,
	.plasko-product-gallery__video-player {
		border-radius: 12px;
		background: var(--plasko-color-surface, #f6f6f6);
	}

	.plasko-product-gallery__variation-image {
		inset: 0 4px;
		border-radius: 12px;
	}

	.plasko-product-gallery__thumbs,
	.plasko-product-gallery__actions {
		display: none !important;
	}

	.plasko-product-gallery__mobile-progress {
		position: absolute;
		z-index: 5;
		bottom: 16px;
		left: 50%;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px 6px;
		border: 0;
		border-radius: 9999px;
		background: rgba(0, 20, 48, 0.8);
		transform: translateX(-50%);
		cursor: pointer;
		appearance: none;
	}

	.plasko-product-gallery__mobile-progress-track {
		position: relative;
		display: block;
		width: 40px;
		height: 3px;
		border-radius: 9999px;
		background: rgba(255, 255, 255, 0.3);
	}

	.plasko-product-gallery__mobile-progress-active {
		position: absolute;
		top: 0;
		left: 0;
		width: 14px;
		height: 3px;
		border-radius: 9999px;
		background: #fff;
		transform: translateX(var(--plasko-gallery-progress-x, 0px));
		transition: transform 240ms ease;
	}

	.plasko-product-gallery__mobile-progress-icon {
		display: block;
		width: 12px;
		height: 12px;
		background: url("../../icons/product/gallery.svg") center / contain no-repeat;
	}

	/* Product information card. */
	.plasko-product-summary {
		min-height: 0;
	}

	.plasko-product-summary__taxonomy {
		gap: 8px;
		min-height: 16px;
		font-size: 13px;
		line-height: 16px;
	}

	.plasko-product-summary__title {
		margin-top: 12px;
		font-size: 18px;
		line-height: 30px;
	}

	.plasko-product-summary__metrics {
		gap: 8px;
		margin-top: 12px;
	}

	.plasko-product-summary__rating,
	.plasko-product-summary__reviews,
	.plasko-product-summary__sales {
		min-height: 28px;
		padding: 6px 8px;
	}

	.plasko-product-variations {
		gap: 20px;
		margin-top: 20px;
	}

	.plasko-variation-group {
		gap: 16px;
	}

	.plasko-variation-group__heading {
		gap: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	.plasko-variation-group__options {
		gap: 8px;
		justify-content: flex-start;
	}

	.plasko-variation-option {
		height: 32px;
		min-width: 56px;
		padding: 8px;
		font-size: 12px;
		line-height: 16px;
	}

	/* Figma mobile color pills contain both the label and 22px color dot. */
	.plasko-variation-group--color .plasko-variation-option {
		width: auto;
		height: 32px;
		min-width: 0;
		gap: 4px;
		padding: 4px;
		border-radius: 24px;
		flex-direction: row-reverse;
		color: #4b4b4b;
	}

	.plasko-variation-group--color .plasko-variation-option::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
	}

	.plasko-variation-group--color .plasko-variation-option__color {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
	}

	.plasko-variation-group--color .plasko-variation-option.is-disabled,
	.plasko-variation-group--color .plasko-variation-option.is-out-of-stock {
		color: #818181;
		opacity: 0.6;
	}

	.plasko-variation-group--color .plasko-variation-option.is-disabled::after,
	.plasko-variation-group--color .plasko-variation-option.is-out-of-stock::after {
		width: 32px;
	}

	/* Six feature cards retain Figma's 160px width in two horizontally scrollable rows. */
	.plasko-product-features {
		margin-top: 0;
		padding-top: 20px;
		overflow: hidden;
	}

	.plasko-product-features__title {
		margin-bottom: 16px;
	}

	.plasko-product-features__grid {
		display: grid;
		grid-template-columns: repeat(3, 160px);
		grid-template-rows: repeat(2, auto);
		gap: 8px;
		width: 100%;
		overflow-x: auto;
		padding-bottom: 2px;
		direction: rtl;
		scrollbar-width: none;
	}

	.plasko-product-features__grid::-webkit-scrollbar {
		display: none;
	}

	.plasko-product-feature {
		width: 160px;
		min-height: 64px;
		gap: 8px;
		padding: 12px;
		border-radius: 16px;
	}

	.plasko-product-feature span {
		font-size: 10px;
		line-height: 14px;
	}

	.plasko-product-feature strong {
		font-size: 12px;
		line-height: 16px;
	}

	/* The desktop purchase card becomes the non-sticky policy/installment portion of mobile Info. */
	.plasko-product-hero__purchase .plasko-purchase {
		gap: 16px;
	}

	.plasko-product-hero__purchase .plasko-purchase__offer {
		display: none !important;
	}

	.plasko-product-hero__purchase .plasko-purchase-card {
		gap: 20px;
		padding: 0;
		overflow: visible;
		border: 0;
		border-radius: 0;
	}

	.plasko-product-hero__purchase .plasko-purchase.is-timed-offer .plasko-purchase__offer + .plasko-purchase-card {
		margin-top: 0;
		padding-top: 0;
		border: 0;
		border-radius: 0;
	}

	.plasko-product-hero__purchase .plasko-purchase-card__price-wrap,
	.plasko-product-hero__purchase .plasko-purchase-card__low-stock,
	.plasko-product-hero__purchase .plasko-purchase-card__native-cart {
		display: none !important;
	}

	.plasko-product-hero__purchase .plasko-purchase-card__policies {
		gap: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	.plasko-product-hero__purchase .plasko-purchase-card__policies > div {
		padding-bottom: 12px;
	}

	.plasko-product-hero__purchase .plasko-purchase-card__installments {
		gap: 16px;
		padding: 16px;
	}

	.plasko-product-hero__purchase .plasko-purchase__trust {
		min-height: 0;
		padding: 16px;
		border-radius: 16px;
		font-size: 14px;
		line-height: 20px;
	}

	/* Out-of-stock messaging lives only in the fixed bar on mobile. */
	.plasko-product-hero__purchase .plasko-purchase.is-out-of-stock .plasko-purchase-card {
		display: none;
	}

	/* The four desktop trust cards are not part of the supplied mobile product composition. */
	.plasko-product-trust {
		display: none;
	}

	.plasko-product__native-content {
		width: 100%;
		margin-top: 24px;
		padding-inline: 12px;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		margin: 0 -12px 24px !important;
		padding: 0 12px !important;
		border-bottom: 1px solid var(--plasko-color-border) !important;
		background: #fff;
		scrollbar-width: none;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs::before,
	.plasko-product__native-content .woocommerce-tabs ul.tabs li::before,
	.plasko-product__native-content .woocommerce-tabs ul.tabs li::after {
		display: none !important;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs li a {
		display: block;
		padding: 12px 8px !important;
		color: var(--plasko-color-primary) !important;
		font-size: 14px;
		font-weight: 800 !important;
		line-height: 20px;
		white-space: nowrap;
	}

	.plasko-product__native-content .woocommerce-tabs ul.tabs li.active {
		border-bottom: 3px solid var(--plasko-color-accent) !important;
	}

	/* Fixed mobile purchase component shared by normal, out-of-stock and timed-offer states. */
	.plasko-mobile-purchase {
		position: fixed;
		z-index: 9990;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		border-top: 1px solid var(--plasko-color-border);
		background: #fff;
		box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.06);
		direction: rtl;
	}

	.plasko-mobile-purchase [hidden] {
		display: none !important;
	}

	.plasko-mobile-purchase__offer {
		display: flex;
		min-height: 36px;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		border-top: 0.5px solid var(--plasko-color-danger);
		color: var(--plasko-color-danger);
		background: var(--plasko-product-danger-soft, #fef4f5);
	}

	.plasko-mobile-purchase__offer strong {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		font-weight: 800;
		line-height: 16px;
	}

	.plasko-mobile-purchase__offer img {
		display: block;
		width: 20px;
		height: 20px;
		max-width: none;
	}

	.plasko-mobile-purchase__countdown {
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
	}

	.plasko-mobile-purchase__available,
	.plasko-mobile-purchase__out {
		padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
	}

	.plasko-mobile-purchase__available {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.plasko-mobile-purchase__views {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		color: var(--plasko-color-primary);
		font-size: 12px;
		font-weight: 600;
		line-height: 20px;
	}

	.plasko-mobile-purchase__views strong {
		font-size: 14px;
		font-weight: 700;
	}

	.plasko-mobile-purchase__eye {
		position: relative;
		display: block;
		width: 16px;
		height: 16px;
		flex: 0 0 16px;
	}

	.plasko-mobile-purchase__eye::before {
		position: absolute;
		top: 3px;
		left: 1px;
		width: 14px;
		height: 9px;
		border: 1.5px solid currentColor;
		border-radius: 50% / 60%;
		content: "";
	}

	.plasko-mobile-purchase__eye::after {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: currentColor;
		content: "";
	}

	.plasko-mobile-purchase__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		direction: ltr;
	}

	.plasko-mobile-purchase__price-side {
		display: grid;
		min-width: 0;
		grid-template-columns: auto auto;
		grid-template-areas:
			"current current"
			"discount regular";
		align-items: center;
		justify-content: start;
		gap: 8px 10px;
		direction: rtl;
	}

	.plasko-mobile-purchase__price {
		display: contents;
	}

	.plasko-mobile-purchase__price .plasko-purchase-card__current-price,
	.plasko-mobile-purchase__price > .woocommerce-Price-amount,
	.plasko-mobile-purchase__price ins {
		grid-area: current;
		color: var(--plasko-color-primary);
		font-size: 20px;
		font-weight: 800;
		line-height: 32px;
		text-decoration: none;
	}

	.plasko-mobile-purchase__price .plasko-purchase-card__regular-price,
	.plasko-mobile-purchase__price del {
		grid-area: regular;
		color: #8293ab;
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
		opacity: 1;
	}

	.plasko-mobile-purchase__price .woocommerce-Price-currencySymbol {
		display: none;
	}

	.plasko-mobile-purchase__price .plasko-purchase-card__current-price .woocommerce-Price-amount,
	.plasko-mobile-purchase__price ins .woocommerce-Price-amount,
	.plasko-mobile-purchase__price > .woocommerce-Price-amount {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	.plasko-mobile-purchase__price .plasko-purchase-card__current-price .woocommerce-Price-amount::before,
	.plasko-mobile-purchase__price ins .woocommerce-Price-amount::before,
	.plasko-mobile-purchase__price > .woocommerce-Price-amount::before {
		display: block;
		width: 17px;
		height: 14px;
		flex: 0 0 17px;
		background: url("../../icons/product/purchase/toman.svg") center / contain no-repeat;
		content: "";
	}

	.plasko-mobile-purchase__discount {
		grid-area: discount;
		display: inline-flex;
		align-items: center;
		gap: 0;
		justify-self: start;
		padding: 4px;
		border-radius: 9999px;
		color: #fff;
		background: var(--plasko-color-danger);
		font-size: 14px;
		font-weight: 600;
		line-height: 18px;
	}

	.plasko-mobile-purchase__discount img {
		display: block;
		width: 12px;
		height: 12px;
		max-width: none;
	}

	.plasko-mobile-purchase__cart,
	.plasko-mobile-purchase__notify {
		display: inline-flex;
		min-height: 56px;
		align-items: center;
		justify-content: center;
		padding: 16px;
		border: 0;
		border-radius: 9999px;
		color: #fff;
		font-family: var(--plasko-font-body);
		font-size: 16px;
		font-weight: 800;
		line-height: 24px;
		cursor: pointer;
	}

	.plasko-mobile-purchase__cart {
		width: min(42vw, 166px);
		min-width: 142px;
		background: var(--plasko-color-primary);
	}

	.plasko-mobile-purchase__cart:disabled,
	.plasko-mobile-purchase.is-variation-unavailable .plasko-mobile-purchase__cart {
		color: #767676;
		background: #e5e5e5;
		cursor: not-allowed;
	}

	.plasko-mobile-purchase__out {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.plasko-mobile-purchase__out p {
		margin: 0;
		color: #4b4b4b;
		font-size: 12px;
		font-weight: 600;
		line-height: 20px;
		text-align: right;
	}

	.plasko-mobile-purchase__divider {
		height: 1px;
		background: var(--plasko-color-border);
	}

	.plasko-mobile-purchase__notify {
		width: 100%;
		gap: 8px;
		background: #4b4b4b;
	}

	.plasko-mobile-purchase__notify img {
		display: block;
		width: 24px;
		height: 24px;
		max-width: none;
	}

	.plasko-mobile-purchase__notify:disabled {
		cursor: not-allowed;
		opacity: 0.72;
	}
}

@media (max-width: 360px) {
	.plasko-mobile-purchase__cart {
		width: 138px;
		min-width: 138px;
		padding-inline: 10px;
		font-size: 14px;
	}

	.plasko-mobile-purchase__price .plasko-purchase-card__current-price,
	.plasko-mobile-purchase__price > .woocommerce-Price-amount,
	.plasko-mobile-purchase__price ins {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plasko-product-gallery__mobile-progress-active {
		transition: none;
	}
}