/**
 * AminH Volume Price — size & price selector for single variable products.
 * RTL first; sizing follows the theme's own font scale.
 */

.aminh-vp {
	margin: 0 0 18px;
	direction: rtl;
	text-align: right;
}

/* -------- Summary line (final price + per-unit + volume) -------- */

.aminh-vp-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
	line-height: 1.6;
}

.aminh-vp-summary-main {
	font-size: 22px;
	font-weight: 700;
	color: var(--wd-primary-color, #212121);
	white-space: nowrap;
}

.aminh-vp-summary-main .aminh-vp-currency {
	font-size: 14px;
	font-weight: 700;
	margin-right: 3px;
}

.aminh-vp-summary-perunit,
.aminh-vp-summary-volume {
	font-size: 13px;
	color: #767676;
	white-space: nowrap;
}

.aminh-vp-summary-volume::before {
	content: "\00B7";
	margin-left: 6px;
	color: #c4c4c4;
}

.aminh-vp-summary-placeholder {
	font-size: 14px;
	color: #767676;
}

.aminh-vp-summary--filled .aminh-vp-summary-placeholder,
.aminh-vp-summary:not(.aminh-vp-summary--filled) .aminh-vp-summary-main,
.aminh-vp-summary:not(.aminh-vp-summary--filled) .aminh-vp-summary-perunit,
.aminh-vp-summary:not(.aminh-vp-summary--filled) .aminh-vp-summary-volume {
	display: none;
}

/* -------- Option boxes -------- */

/*
 * Two boxes per row, so a four-size perfume reads as one compact block instead
 * of four full-width bars with a long empty gap beside every price.
 * `minmax(0, 1fr)` rather than `1fr`: a grid track's automatic minimum is the
 * content, so without it a long price would push the column past half the row.
 */
.aminh-vp-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/*
 * Inside a box: the size and the discount share the first line, the price owns
 * the second. Named areas keep that stable whether or not the option is on sale
 * and whether it is in stock, so every box in a row lines up.
 */
.aminh-vp-option {
	display: grid;
	align-content: start;
	grid-template-areas:
		"label old"
		"price price";
	grid-template-columns: auto minmax(0, 1fr);
	gap: 5px 6px;
	padding: 9px 11px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.aminh-vp-option:hover:not(.aminh-vp-option--disabled) {
	border-color: #9e9e9e;
}

.aminh-vp-option:focus-visible {
	outline: 2px solid var(--wd-primary-color, #212121);
	outline-offset: 2px;
}

.aminh-vp-option--active {
	border-color: var(--wd-primary-color, #212121);
	box-shadow: inset 0 0 0 1px var(--wd-primary-color, #212121);
	background: #fafafa;
}

.aminh-vp-option--disabled {
	cursor: not-allowed;
	opacity: .55;
	background: #f7f7f7;
}

/*
 * The size is a chip, like the discount badge opposite it — the first line of a
 * box otherwise ran "100ml 5.600.000 35%" as one uninterrupted string and the
 * volume was read as part of the price. A tinted plate gives it its own edge, so
 * the eye separates what is being bought from what it costs at a glance.
 *
 * `justify-self: start` keeps the plate the width of "100ml" rather than of its
 * grid track; the track is `auto`, but a disabled box or a long price can make
 * the row negotiate, and a stretched chip would drift wider than its neighbour.
 */
.aminh-vp-option-label {
	grid-area: label;
	justify-self: start;
	padding: 1px 9px;
	border-radius: 20px;
	background: #f0f0f0;
	color: #212121;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.65;
	white-space: nowrap;
}

/* The selected box is already tinted, so its chip needs one step more contrast. */
.aminh-vp-option--active .aminh-vp-option-label {
	background: #ececec;
}

.aminh-vp-final {
	grid-area: price;
	font-size: 15px;
	font-weight: 700;
	color: #212121;
	white-space: nowrap;
}

/*
 * "تومان" carries the unit for the whole number beside it, so it is set only
 * two steps below the price rather than as fine print: at 10px against a 15px
 * price it read as noise on a phone.
 */
.aminh-vp-final .aminh-vp-currency {
	font-size: 12px;
	font-weight: 700;
	color: #424242;
	margin-right: 3px;
}

/* Badge and the struck original share the first line, opposite the size. */
.aminh-vp-old {
	display: flex;
	grid-area: old;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
	line-height: 1.25;
}

.aminh-vp-badge {
	display: inline-block;
	flex: none;
	padding: 0 5px;
	border-radius: 20px;
	background: #ef394e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/*
 * The struck original is what makes the discount legible, so it is sized to be
 * read rather than merely present: 12px and a darker grey still sit clearly
 * below the final price without competing with it. It remains the first thing
 * to give way in a narrow box.
 */
.aminh-vp-regular {
	overflow: hidden;
	color: #757575;
	font-size: 12px;
	text-decoration: line-through;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aminh-vp-out {
	grid-area: price;
	color: #9e9e9e;
	font-size: 12px;
	white-space: nowrap;
}

/*
 * The single-product template of this shop caps the add-to-cart widget at 90%
 * of its column below 768px, which leaves the selector — and the engraving row
 * under it — inset from the product image. The script tags that one ancestor;
 * the width is handed back here, so the block lines up with the image as the
 * design asks and the desktop layout is left alone.
 *
 * The class is repeated rather than marked !important: the builder's own rule
 * is `#<template> .elementor-element.elementor-element-<id>` (three classes),
 * and it is printed after this file, so only a higher score can win the tie.
 */
@media (max-width: 768px) {
	.aminh-vp-stretch-host.aminh-vp-stretch-host.aminh-vp-stretch-host.aminh-vp-stretch-host {
		width: 100%;
		max-width: 100%;
	}
}

/* -------- Native selector -------- */

/* Only hidden once the JS selector is live, so no-JS visitors keep the original UI. */
form.variations_form.aminh-vp-hide-native table.variations,
form.variations_form.aminh-vp-hide-native .wd-reset-var {
	display: none !important;
}

/* Avoid showing the price twice: the summary above already states it.
   The theme's price node is tagged from JS, since themes nest it differently. */
.aminh-vp-price-hidden,
form.variations_form.aminh-vp-hide-price .woocommerce-variation-price {
	display: none !important;
}

@media (max-width: 480px) {
	.aminh-vp-summary-main {
		font-size: 19px;
	}
}

/* Keep the two columns on the smallest phones by giving up type size, not layout. */
@media (max-width: 360px) {
	.aminh-vp-option {
		padding: 8px 9px;
	}

	.aminh-vp-option-label {
		font-size: 13px;
	}

	.aminh-vp-final {
		font-size: 14px;
	}
}