/**
 * Damavand Child — WooCommerce template styles
 * =============================================
 *
 * Covers the product grid/card (archive-product.php + content-product.php),
 * the single product layout (content-single-product.php +
 * single-product/*.php) and the shared "no image yet" / "no price yet" /
 * availability-badge / inquiry-CTA visual language between them.
 *
 * Consumes ONLY the design tokens and breakpoints already defined in
 * ../rtl-foundation.css (--dv-color-*, --dv-space-*, --dv-font-*,
 * --dv-radius-*, --dv-container-*) — no new tokens or colors are
 * introduced here, and no left/right physical properties are used
 * (logical properties throughout, matching the foundation file's RTL
 * approach). Mobile-first: base rules are the phone layout, each
 * breakpoint below only adds — never overrides back down.
 *
 * Breakpoints mirror rtl-foundation.css exactly: 30em / 48em / 64em / 80em.
 */

/* ==========================================================================
   1. Product grid (archive-product.php)
   ========================================================================== */

.dv-shop__header {
	margin-block-end: var(--dv-space-6);
}

.dv-shop__title {
	margin-block-end: var(--dv-space-2);
}

/* Base = 1 column (narrow phones). */
.dv-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-5);
	list-style: none;
	margin: 0 0 var(--dv-space-6);
	padding: 0;
}

/* ~480px — large phones / small tablets: 2 columns. */
@media (min-width: 30em) {
	.dv-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ~768px — tablet: 3 columns. */
@media (min-width: 48em) {
	.dv-product-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--dv-space-6);
	}
}

/* ~1280px — wide desktop: 4 columns. */
@media (min-width: 80em) {
	.dv-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   2. Product card (content-product.php)
   ========================================================================== */

.dv-card {
	display: flex;
	flex-direction: column;
	background-color: var(--dv-color-bg);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
	overflow: hidden;
	transition: border-color 0.15s ease-in-out;
}

.dv-card:hover {
	border-color: var(--dv-color-secondary);
}

.dv-card__media-link {
	position: relative;
	display: block;
	text-decoration: none;
}

.dv-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--dv-color-bg-subtle);
	overflow: hidden;
}

.dv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dv-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
	padding: var(--dv-space-4);
	flex-grow: 1;
}

.dv-card__title {
	font-size: var(--dv-font-size-md);
	margin: 0;
}

.dv-card__title a {
	color: var(--dv-color-text);
	text-decoration: none;
}

.dv-card__title a:hover,
.dv-card__title a:focus {
	color: var(--dv-color-accent);
}

.dv-card__price {
	margin-block-start: auto;
	padding-block-start: var(--dv-space-2);
	font-weight: 700;
}

.dv-card__cta {
	margin-block-start: var(--dv-space-2);
}

/* ==========================================================================
   3. "No image yet" fallback — shared by the card and the single product
   image, deliberately plain/geometric so it never reads as a real photo.
   ========================================================================== */

.dv-media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--dv-color-bg-subtle);
	border: 1px dashed var(--dv-color-border);
}

.dv-media-fallback__glyph {
	font-size: var(--dv-font-size-2xl);
	color: var(--dv-color-secondary);
	font-weight: 700;
}

.dv-media-fallback--large {
	aspect-ratio: 1 / 1;
	border-radius: var(--dv-radius-md);
}

/* ==========================================================================
   4. Availability badge + honest "price on inquiry" label — shared by the
   card and the single product's per-item rows.
   ========================================================================== */

.dv-badge {
	position: absolute;
	inset-block-start: var(--dv-space-2);
	inset-inline-end: var(--dv-space-2);
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-xs);
	font-weight: 700;
	color: #fff;
	background-color: var(--dv-color-secondary);
}

/* Inline variant used on the single-product item rows, where the badge sits
   next to the item name rather than floating over an image. */
.dv-variant__head .dv-badge {
	position: static;
	inset: auto;
}

.dv-badge--available {
	background-color: #3a7d44; /* a real, distinct "in stock" green — not one of the 4 locked brand colors, used ONLY for this one semantic state, never decoratively. */
}

.dv-badge--fast_supply {
	background-color: var(--dv-color-accent);
	color: var(--dv-color-primary);
}

.dv-badge--inquiry_required {
	background-color: var(--dv-color-secondary);
}

.dv-badge--temp_unavailable {
	background-color: var(--dv-color-accent-supporting);
}

.dv-price-inquiry {
	display: inline-block;
	font-size: var(--dv-font-size-sm);
	color: var(--dv-color-text-muted);
	font-weight: 400;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.dv-btn {
	display: inline-block;
	padding: var(--dv-space-2) var(--dv-space-4);
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-sm);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--dv-color-primary);
	cursor: pointer;
}

.dv-btn--outline {
	background-color: transparent;
	color: var(--dv-color-primary);
}

.dv-btn--outline:hover,
.dv-btn--outline:focus {
	background-color: var(--dv-color-primary);
	color: #fff;
}

.dv-btn--primary,
.dv-variant__form .single_add_to_cart_button {
	background-color: var(--dv-color-primary);
	color: #fff;
	border-color: var(--dv-color-primary);
}

.dv-btn--primary:hover,
.dv-btn--primary:focus,
.dv-variant__form .single_add_to_cart_button:hover,
.dv-variant__form .single_add_to_cart_button:focus {
	background-color: var(--dv-color-accent-deep);
	border-color: var(--dv-color-accent-deep);
}

/* The inquiry form's own submit button (damavand-hybrid-commerce shortcode
   markup) — same visual language as the rest of this file's CTAs, applied
   from here since that plugin's own output is intentionally unstyled. */
.damavand-inquiry-form button[type="submit"] {
	display: inline-block;
	padding: var(--dv-space-2) var(--dv-space-4);
	border-radius: var(--dv-radius-sm);
	font-size: var(--dv-font-size-sm);
	font-weight: 700;
	background-color: var(--dv-color-accent);
	color: var(--dv-color-primary);
	border: 1px solid var(--dv-color-accent);
	cursor: pointer;
}

.damavand-inquiry-form button[type="submit"]:hover,
.damavand-inquiry-form button[type="submit"]:focus {
	background-color: var(--dv-color-accent-deep);
	border-color: var(--dv-color-accent-deep);
	color: #fff;
}

.damavand-inquiry-form {
	margin-block-start: var(--dv-space-3);
	padding: var(--dv-space-4);
	background-color: var(--dv-color-bg-subtle);
	border-radius: var(--dv-radius-md);
}

.damavand-inquiry-form p {
	margin-block-end: var(--dv-space-3);
}

.damavand-inquiry-form input,
.damavand-inquiry-form textarea {
	width: 100%;
	padding: var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
}

.damavand-inquiry-form .damavand-success {
	color: #3a7d44;
	font-weight: 700;
}

.damavand-inquiry-form .damavand-error {
	color: var(--dv-color-accent-supporting);
	font-weight: 700;
}

/* ==========================================================================
   6. Single product layout (content-single-product.php)
   ========================================================================== */

.dv-product {
	display: grid;
	/* minmax(0, 1fr), never bare 1fr: the single column's automatic min
	   width is otherwise the max-content size of its children — and
	   .dv-product-media below is an aspect-ratio box with no explicit
	   width, so its intrinsic contribution can force this track (and
	   therefore .dv-product-media itself, and .dv-product__summary next
	   to it, which is where #dv-selector lives) wider than the real
	   viewport on narrow phones. Found and fixed in Phase E's mobile
	   Browser QA: at 375px this silently rendered the whole product
	   column — media, summary AND the Cascading Selector — at 418px,
	   causing real horizontal scroll (see
	   docs/DS-MASTER-CATALOG-09-phase-e-final-audit-report.md, "Browser
	   QA" / mobile overflow). minmax(0, 1fr) keeps the track's floor at
	   0 so it only ever grows to fill real available space, never past
	   it. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dv-space-6);
	margin-block-end: var(--dv-space-7);
}

@media (min-width: 48em) {
	.dv-product {
		grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
		align-items: start;
	}
}

.dv-product-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--dv-color-bg-subtle);
	border-radius: var(--dv-radius-md);
	overflow: hidden;
}

.dv-product-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* WooCommerce's own generic attribute-overview table. */
.woocommerce-product-attributes {
	width: 100%;
	margin-block-end: var(--dv-space-5);
	border-collapse: collapse;
}

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

.woocommerce-product-attributes th {
	color: var(--dv-color-text-muted);
	font-weight: 500;
	width: 40%;
}

.dv-product__variants-heading {
	margin-block: var(--dv-space-5) var(--dv-space-3);
	font-size: var(--dv-font-size-md);
}

/* ==========================================================================
   7. Per-variant rows (single-product/dv-item-row.php)
   ========================================================================== */

.dv-variant-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-4);
}

.dv-variant {
	padding: var(--dv-space-4);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
}

.dv-variant__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dv-space-2);
	margin-block-end: var(--dv-space-2);
}

.dv-variant__name {
	font-weight: 700;
}

.dv-variant__attrs {
	margin: 0 0 var(--dv-space-2);
	color: var(--dv-color-text-muted);
	font-size: var(--dv-font-size-sm);
}

.dv-variant__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-space-4);
	margin: 0 0 var(--dv-space-2);
	font-size: var(--dv-font-size-sm);
}

.dv-variant__price {
	margin-block-end: var(--dv-space-2);
	font-weight: 700;
}

.dv-variant__reference {
	margin-block-start: var(--dv-space-1);
	font-size: var(--dv-font-size-xs);
	font-weight: 400;
	color: var(--dv-color-text-muted);
	font-style: italic;
}

.dv-variant__reason {
	margin: 0 0 var(--dv-space-2);
	font-size: var(--dv-font-size-sm);
	color: var(--dv-color-accent-supporting);
}

.dv-variant__cta {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
}

.dv-variant__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
}

.dv-variant__qty {
	width: 4.5rem;
	padding: var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
}

/* ==========================================================================
   8. Misc
   ========================================================================== */

.dv-notice {
	color: var(--dv-color-text-muted);
}

/* ==========================================================================
   9. Variant filter (prototype — single product page, JS-driven, client-side)
   ========================================================================== */

.dv-variant-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-3);
	margin: var(--dv-space-3) 0 var(--dv-space-4);
	padding: var(--dv-space-3);
	background: var(--dv-color-surface-muted, #f7f7f7);
	border-radius: var(--dv-radius-sm);
}

.dv-variant-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
}

.dv-variant-filter__label {
	font-weight: 600;
}

.dv-variant-filter__btn {
	padding: var(--dv-space-1) var(--dv-space-2);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
	background: #fff;
	cursor: pointer;
	font: inherit;
}

.dv-variant-filter__btn.is-active {
	background: var(--dv-color-primary, #1f4e78);
	color: #fff;
	border-color: var(--dv-color-primary, #1f4e78);
}

.dv-variant-filter__reset {
	margin-inline-start: auto;
}

.dv-variant-filter__count {
	color: var(--dv-color-text-muted);
	font-size: 0.9em;
}

/* ==========================================================================
   10. Cascading Variation Selector (Phase C, 9-10 مهر ۱۴۰۵) — the FINAL
   display/selection UI for every Variable Product, replacing section 9's
   prototype filter bar above (left in place, unused, per this project's
   "never delete without review" convention — see
   docs/DS-MASTER-CATALOG-07-phase-c-ui-report.md). Mobile-first throughout:
   base rules are the phone layout; each breakpoint below only adds.
   ========================================================================== */

.dv-selector {
	margin: var(--dv-space-4) 0 var(--dv-space-6);
}

.dv-selector__body.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.dv-selector__summary {
	margin-block-end: var(--dv-space-3);
}

.dv-selector__summary--ambiguous,
.dv-selector__summary--invalid {
	padding: var(--dv-space-3);
	border-radius: var(--dv-radius-sm);
	background: var(--dv-color-bg-subtle);
	border-inline-start: 3px solid var(--dv-color-accent-supporting);
}

.dv-selector__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dv-space-2);
	margin-block-end: var(--dv-space-2);
}

.dv-selector__chip {
	display: inline-block;
	padding: var(--dv-space-1) var(--dv-space-3);
	border-radius: 999px;
	background: var(--dv-color-secondary-light);
	color: var(--dv-color-text);
	font-size: var(--dv-font-size-sm);
}

.dv-selector__change,
.dv-selector__reset {
	font-size: var(--dv-font-size-sm);
}

.dv-selector__count {
	color: var(--dv-color-text-muted);
	font-size: var(--dv-font-size-sm);
}

.dv-selector__fieldset {
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
	padding: var(--dv-space-4);
	margin: 0 0 var(--dv-space-4);
}

.dv-selector__fieldset legend {
	padding: 0 var(--dv-space-2);
	font-weight: 600;
}

/* Base = 1 column (narrow phones) — every option gets its own full-width,
   easily tappable row (minimum 44px touch target per common a11y guidance). */
.dv-selector__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-2);
	margin-block-start: var(--dv-space-2);
}

/* ~480px — large phones/small tablets: options can sit two to a row. */
@media (min-width: 30em) {
	.dv-selector__options {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	}
}

.dv-selector__option {
	min-height: 44px;
	padding: var(--dv-space-2) var(--dv-space-3);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-sm);
	background: #fff;
	color: var(--dv-color-text);
	font: inherit;
	cursor: pointer;
	text-align: center;
}

.dv-selector__option:hover,
.dv-selector__option:focus-visible {
	border-color: var(--dv-color-accent);
	color: var(--dv-color-accent-deep);
}

.dv-selector__option:focus-visible {
	outline: 2px solid var(--dv-color-accent);
	outline-offset: 2px;
}

.dv-selector__ambiguous-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-2);
}

.dv-selector__option--ambiguous {
	width: 100%;
	text-align: start;
}

.dv-variant-list--resolved {
	margin: 0;
}