/*
Theme Name: softlan
Theme URI: https://softlan.com
Author: زیومدیا
Author URI: https://softlan.com
Description: Softlan homepage theme — RTL Persian brand site.
Version: 1.8.4
Text Domain: softlan
*/

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */
:root {
	--gold: #c5a059;
	--gold-deep: #a67c42;
	--gold-soft: #d4b87a;
	--brown: #4a3428;
	--brown-soft: #6b5344;
	--brown-muted: #8a7364;
	--cream: #faf6f0;
	--cream-deep: #f2ebe2;
	--cream-card: #fffdf9;
	--footer: #2f1e14;
	--footer-line: rgba(197, 160, 89, 0.28);
	--white: #ffffff;
	--shadow: 0 10px 28px rgba(74, 52, 40, 0.08);
	--radius: 18px;
	--radius-sm: 12px;
	--container: 1180px;
	--layout-width: min(calc(100% - clamp(2.5rem, 5vw, 4rem)), 1120px);
	--header-h: 84px;
	--nav-gold: #c59c5a;
	--nav-accent: #e07a3a;
	--font: "Vazirmatn", "Tahoma", sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* Reset / base                                                               */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 400;
	color: var(--brown);
	background: var(--cream);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.nav-open {
	overflow: hidden;
}

body.nav-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(15, 10, 6, 0.5);
	z-index: 1190;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
p {
	margin: 0;
}

.container {
	width: var(--layout-width);
	margin-inline: auto;
}

.site-main {
	overflow: clip;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
	padding: 0.65rem 1.45rem;
	border-radius: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0;
	transition: background 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease), transform 0.25s var(--ease);
	white-space: nowrap;
	box-shadow: none;
}

.btn-gold {
	background: linear-gradient(180deg, #c9a968 0%, #a67c42 100%);
	color: var(--white);
	box-shadow: none;
}

.btn-gold:hover {
	transform: translateY(-1px);
	box-shadow: none;
	filter: brightness(1.04);
}

.btn-outline {
	background: transparent;
	color: var(--brown-soft);
	border: 1px solid rgba(166, 124, 66, 0.65);
	border-radius: 8px;
	min-height: 40px;
	padding: 0.45rem 1.1rem;
	font-size: 0.84rem;
	font-weight: 500;
}

.btn-outline:hover {
	background: rgba(197, 160, 89, 0.12);
	border-color: var(--gold-deep);
	color: var(--brown);
}

/* -------------------------------------------------------------------------- */
/* Reveal motion                                                              */
/* -------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	transition-delay: var(--delay, 0s);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 1000;
	overflow: visible;
	--header-h: auto;
	height: auto;
	min-height: 0;
	padding-top: 2.5rem;
	padding-bottom: 0.65rem;
	transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
	position: fixed;
	background: var(--white);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: 0 4px 20px rgba(74, 52, 40, 0.1);
}

.site-header.is-scrolled .nav-menu > li > a {
	color: #c59c5a;
}

.site-header.is-scrolled .nav-menu > li > a:hover,
.site-header.is-scrolled .nav-menu > .current-menu-item > a,
.site-header.is-scrolled .nav-menu > .menu-item-has-children:hover > a {
	color: rgba(51, 51, 51, 0.7);
}

.site-header.is-scrolled .search-toggle {
	color: var(--brown);
}

.site-header.is-scrolled .search-toggle:hover {
	background: rgba(197, 160, 89, 0.12);
	color: var(--gold-deep);
}

.site-header.is-scrolled .nav-toggle span {
	background: var(--brown);
}

.site-header.is-scrolled .site-logo img {
	filter: none;
}

.site-header.is-scrolled .header-search {
	background: var(--white);
	box-shadow: 0 8px 20px rgba(74, 52, 40, 0.08);
}

.site-header.is-scrolled .header-search input {
	background: var(--cream);
	color: var(--brown);
	border-color: rgba(166, 124, 66, 0.35);
}

.site-header.is-scrolled .header-search input::placeholder {
	color: var(--brown-muted);
}

.header-inner {
	width: var(--layout-width);
	margin-inline: auto;
	min-height: 56px;
	height: auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	/* Visual LTR: logo left, search right (nav stays RTL for Persian) */
	direction: ltr;
}

.site-logo {
	justify-self: start;
}

.site-logo img {
	width: clamp(76px, 7vw, 96px);
	height: auto;
	filter: none;
}

.site-header:not(.is-scrolled) .site-logo img {
	filter: none;
}

.site-nav {
	display: flex;
	justify-content: center;
	min-width: 0;
	direction: rtl;
}

.nav-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	gap: 0 1.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu > li {
	position: relative;
	list-style: none;
}

.site-header:not(.is-scrolled) .nav-menu > li > a {
	color: #c59c5a;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	white-space: nowrap;
}

.nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.65rem 0 0.5rem;
	position: relative;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Orange accent bar below top-level links */
.nav-menu > li > a::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: var(--nav-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s var(--ease);
}

.site-header:not(.is-scrolled) .nav-menu > li > a:hover,
.site-header:not(.is-scrolled) .nav-menu > .current-menu-item > a,
.site-header:not(.is-scrolled) .nav-menu > .current-menu-ancestor > a,
.site-header:not(.is-scrolled) .nav-menu > .menu-item-has-children:hover > a,
.site-header:not(.is-scrolled) .nav-menu > .menu-item-has-children:focus-within > a {
	color: rgba(51, 51, 51, 0.7);
}

.nav-menu > li > a:hover::before,
.nav-menu > .current-menu-item > a::before,
.nav-menu > .current-menu-ancestor > a::before,
.nav-menu > .menu-item-has-children:hover > a::before,
.nav-menu > .menu-item-has-children:focus-within > a::before {
	transform: scaleX(1);
}

/* Down chevron on top-level items with children */
.nav-menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-start: 2px;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	transform: none;
	position: static;
	background: none;
	flex-shrink: 0;
}

/* Products cascading dropdown */
.nav-menu > .menu-item-has-children {
	position: relative;
}

/* Invisible bridge so hover is not lost between title and panel */
.nav-menu > .menu-item-has-children::after {
	content: "";
	position: absolute;
	inset-inline: -0.5rem;
	top: 100%;
	height: 1rem;
	pointer-events: auto;
}

/* Level 1 dropdown */
.nav-menu > .menu-item-has-children > .sub-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	inset-inline-start: 0;
	inset-inline-end: auto;
	min-width: 200px;
	max-width: 220px;
	margin: 0;
	padding: 0.55rem 0;
	list-style: none;
	background: #fff;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1200;
}

/* Hit-area above panel so cursor can cross the visual gap */
.nav-menu > .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 0.5rem;
}

.nav-menu > .menu-item-has-children:hover > .sub-menu,
.nav-menu > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.nav-menu .sub-menu li {
	position: relative;
	list-style: none;
	margin: 0;
}

.nav-menu .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0.55rem 0.85rem;
	color: #838383;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	transition: color 0.15s ease;
}

.nav-menu .sub-menu a::before,
.nav-menu .sub-menu a::after {
	display: none;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu .current-menu-item > a {
	color: #eb6d2f;
	background: transparent;
}

/* Left chevron on category rows with flyout */
.nav-menu .sub-menu > .menu-item-has-children > a::after {
	content: "";
	display: block;
	margin-inline-start: auto;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid #a89888;
	border-left: 1.5px solid #a89888;
	transform: rotate(-45deg);
	flex-shrink: 0;
}

.nav-menu .sub-menu > .menu-item-has-children:hover > a::after,
.nav-menu .sub-menu > .menu-item-has-children:focus-within > a::after {
	border-color: var(--nav-accent);
}

/* Hover bridge toward level-2 flyout (inline-start / past 100% in RTL) */
.nav-menu .sub-menu > .menu-item-has-children::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 100%;
	width: 0.65rem;
	pointer-events: auto;
}

/* Level 2 flyout (opens to the left in RTL) */
.nav-menu .sub-menu .sub-menu {
	position: absolute;
	top: -0.65rem;
	inset-inline-start: calc(100% + 0.45rem);
	inset-inline-end: auto;
	min-width: 210px;
	max-width: 240px;
	width: max-content;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1210;
}

/* Hit-area on the parent-facing side of the flyout */
.nav-menu .sub-menu .sub-menu::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 100%;
	width: 0.65rem;
}

.nav-menu .sub-menu > .menu-item-has-children:hover > .sub-menu,
.nav-menu .sub-menu > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.nav-menu .sub-menu .sub-menu a {
	padding: 0.55rem 0.85rem;
	font-size: 13px;
	white-space: normal;
	max-width: 240px;
}

.site-header:not(.is-scrolled) .nav-menu .sub-menu a {
	color: #838383;
	font-size: 14.5px;
}

.site-header.is-scrolled .nav-menu .sub-menu a {
	color: #838383;
}

.site-header.is-scrolled .nav-menu .sub-menu a:hover {
	color: #eb6d2f;
}

.search-toggle {
	justify-self: end;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: var(--nav-gold);
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header:not(.is-scrolled) .search-toggle svg {
	width: 18px;
	height: 18px;
}

.site-header:not(.is-scrolled) .search-toggle:hover {
	color: var(--nav-accent);
	border-color: var(--nav-accent);
	background: rgba(224, 122, 58, 0.08);
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: #c59c5a;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 1200px) {
	.nav-menu {
		gap: 0 0.85rem;
	}

	.nav-menu > li > a {
		font-size: 13px;
	}
}

@media (max-width: 960px) {
	.site-header {
		padding-top: 1.25rem;
		padding-bottom: 0.5rem;
	}
}

.header-search {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: rgba(47, 30, 20, 0.92);
	backdrop-filter: blur(12px);
	padding: 0.85rem 1.25rem 1.1rem;
}

.header-search form {
	width: min(100%, 560px);
	margin-inline: auto;
	display: flex;
	gap: 0.5rem;
}

.header-search input {
	flex: 1;
	border: 1px solid rgba(197, 160, 89, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.1rem;
	font-family: inherit;
	font-size: 0.95rem;
	outline: none;
}

.header-search input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.header-search button {
	border-radius: 999px;
	padding: 0.7rem 1.2rem;
	background: var(--gold);
	color: #fff;
	font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: min(92vh, 860px);
	height: clamp(520px, 78vw, 860px);
	overflow: hidden;
	background: #1a120c;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 12, 6, 0.28) 0%,
		rgba(20, 12, 6, 0.05) 38%,
		rgba(250, 246, 240, 0) 72%,
		rgba(250, 246, 240, 0.55) 100%
	);
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Products                                                                   */
/* -------------------------------------------------------------------------- */
.products-section {
	position: relative;
	z-index: 2;
	padding: 4.25rem 0 1.75rem;
	margin-top: -1.75rem;
	background: transparent;
}

/* Match .header-inner / logo track */
.products-section .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
}

.section-title {
	text-align: center;
	font-size: clamp(1.15rem, 1.7vw, 1.35rem);
	font-weight: 700;
	color: #7C5A3D;
	margin-bottom: 1.35rem;
	letter-spacing: -0.01em;
}

.product-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.75rem;
	width: 100%;
}

.product-card {
	position: relative;
	isolation: isolate;
	flex: 1 1 0;
	width: 0; /* equal flex columns; prevents intrinsic/aspect min-width blowout */
	min-width: 0;
	max-width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	filter: drop-shadow(0 16px 36px rgba(74, 52, 40, 0.36)) drop-shadow(0 6px 14px rgba(74, 52, 40, 0.2));
	aspect-ratio: 731 / 460;
	height: auto;
	transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

.product-card:hover {
	transform: translateY(-4px);
	filter: drop-shadow(0 22px 44px rgba(74, 52, 40, 0.42)) drop-shadow(0 8px 18px rgba(74, 52, 40, 0.24));
}

.product-card__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 108%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: right center;
	transform: translateX(6%);
	z-index: 0;
	pointer-events: none;
}

/* First card from the right (RTL): slight right nudge, keep clear of text */
.product-card:first-child .product-card__media {
	width: 111%;
	transform: translateX(10%);
	object-position: right center;
}

.product-card__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* LTR flex so flex-start = visual left (clear of product art on the right) */
	direction: ltr;
	text-align: right;
	padding: clamp(1.15rem, 2.4vw, 1.75rem) clamp(0.85rem, 1.8vw, 1.2rem);
	padding-left: clamp(0.85rem, 1.8vw, 1.2rem);
	padding-right: clamp(0.65rem, 1.4vw, 0.95rem);
	width: min(58%, 280px);
	/* Physical margins: direction:ltr would flip logical margins vs html[dir=rtl] */
	margin-left: 0;
	margin-right: auto;
	background: none;
}

html[dir="rtl"] .product-card__content {
	/* Same physical-left pin — do not use margin-inline-* while direction:ltr */
	margin-left: 0;
	margin-right: auto;
	direction: ltr;
	align-items: flex-start;
	text-align: right;
	padding-left: clamp(0.85rem, 1.8vw, 1.2rem);
	padding-right: clamp(0.65rem, 1.4vw, 0.95rem);
	background: none;
}

.product-card h3 {
	font-size: clamp(0.78rem, 1.05vw, 0.98rem);
	font-weight: 700;
	color: #7C5A3D;
	line-height: 1.35;
	margin-bottom: 0.45rem;
	white-space: nowrap;
	direction: rtl;
	text-align: right;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
}

.product-card p {
	font-size: clamp(0.7rem, 0.9vw, 0.8rem);
	color: #7C5A3D;
	line-height: 1.55;
	margin-bottom: 0.85rem;
	direction: rtl;
	text-align: right;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
}

.product-card .btn-outline {
	border-width: 1px;
	border-color: #7C5A3D;
	color: #7C5A3D;
	padding: 0.18rem 0.5rem;
	min-height: 28px;
	margin-inline-end: 0;
	margin-inline-start: 0;
	gap: 0.25rem;
	direction: rtl;
	justify-content: flex-start;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	text-align: right;
	box-sizing: border-box;
}

.product-card .btn-outline:hover {
	background: #7C5A3D;
	border-color: #7C5A3D;
	color: #fff;
}

.product-card .btn-outline span {
	display: inline-block;
	direction: ltr;
	unicode-bidi: isolate;
	/* Keep ‹ pointing left (avoid RTL bidi mirroring) */
	transform: none;
}

/* -------------------------------------------------------------------------- */
/* Features                                                                   */
/* -------------------------------------------------------------------------- */
.features-section {
	padding: 1.75rem 0 2.25rem;
	background: #F7EAD8;
}

.features-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	padding: 0.75rem 1.5rem;
	position: relative;
	/* LTR layout so icon stays on visual left in RTL page */
	direction: ltr;
}

/* Physical left edge: in RTL grid, not-last items sit to the right of the next,
   so left borders fall between columns — never on the outer ends. */
.feature-item:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-block: 12%;
	left: 0;
	border-left: 1px dashed rgba(166, 124, 66, 0.35);
}

.feature-icon {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
}

.feature-icon img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.feature-text {
	flex: 1;
	min-width: 0;
	direction: rtl;
	text-align: center;
}

.feature-text h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brown);
	margin-bottom: 0.25rem;
}

.feature-text p {
	font-size: 0.86rem;
	color: var(--brown-muted);
	line-height: 1.7;
}

/* -------------------------------------------------------------------------- */
/* Memories banner                                                            */
/* -------------------------------------------------------------------------- */
.banner-memories {
	padding: 2.25rem 0 0;
	background: #F7EAD8;
}

.banner-memories .container {
	overflow: hidden;
}

.memories-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	width: 100%;
	max-width: 100%;
	border-radius: 22px;
	overflow: hidden;
	min-height: clamp(220px, 22vw, 300px);
	aspect-ratio: 1600 / 295;
	box-shadow: var(--shadow);
}

.memories-card__bg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}

.memories-card__content {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-self: stretch;
	justify-self: start;
	gap: 0.55rem;
	padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 2.8rem);
	width: min(52%, 480px);
	max-width: 100%;
	box-sizing: border-box;
	background: none;
}

html[dir="rtl"] .memories-card__content {
	/* متن روی سمت چپ بنر (فضای خالی تصویر) — end در RTL = چپ بصری */
	justify-self: end;
	align-items: flex-start;
	text-align: right;
	background: none;
}

.memories-card h2 {
	font-size: clamp(0.95rem, 1.75vw, 1.55rem);
	font-weight: 800;
	color: #7C5A3D;
	line-height: 1.35;
	margin-bottom: 0;
	white-space: nowrap;
	max-width: 100%;
}

.memories-card p {
	font-size: clamp(0.78rem, 1vw, 0.92rem);
	color: var(--brown-soft);
	margin-bottom: 0.35rem;
	max-width: 100%;
	line-height: 1.65;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.memories-card .btn {
	margin-top: 0.35rem;
}

/* -------------------------------------------------------------------------- */
/* Story banner                                                               */
/* -------------------------------------------------------------------------- */
.banner-story {
	padding: 1.25rem 0;
	background: #FFFFFF;
}

.story-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	min-height: clamp(440px, 55vw, 680px);
	overflow: hidden;
}

.story-panel__picture {
	grid-area: 1 / 1;
	display: contents;
}

.story-panel__bg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

.story-panel__content {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	width: var(--layout-width);
	margin-inline: auto;
	min-height: inherit;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: 0;
	background: none;
}

html[dir="rtl"] .story-panel__content {
	/* چپ‌چین: متن در سمت چپ بصری بنر */
	align-items: flex-end;
	text-align: right;
}

.story-panel h2 {
	font-size: clamp(1.35rem, 2.5vw, 2.05rem);
	font-weight: 800;
	color: #7C5A3D;
	margin-bottom: 1.25rem;
	max-width: none;
	line-height: 1.4;
	white-space: nowrap;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.site-footer {
	background: var(--footer);
	color: var(--gold-soft);
	padding: 3.25rem 0 0;
	margin-top: 0;
}

.footer-inner {
	width: var(--layout-width);
	margin-inline: auto;
	display: flex;
	flex-direction: row;
	direction: ltr;
	justify-content: space-between;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

.footer-brand {
	flex: 0 0 clamp(200px, 22vw, 260px);
}

.footer-logo {
	display: block;
}

.footer-logo img {
	width: clamp(76px, 7vw, 96px);
	height: auto;
	filter: brightness(1.05);
}

.footer-tagline,
.footer-social {
	direction: rtl;
	text-align: right;
}

.footer-tagline {
	margin-top: 1rem;
	font-size: 0.84rem;
	line-height: 1.85;
	color: rgba(232, 201, 145, 0.88);
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.65rem;
	margin-top: 1.25rem;
}

.footer-social a {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	color: var(--gold-soft);
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
	background: rgba(197, 160, 89, 0.18);
	border-color: var(--gold);
	color: #fff;
}

.footer-cols {
	direction: rtl;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.footer-col h3 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--gold);
	margin-bottom: 0.95rem;
}

.footer-col li + li {
	margin-top: 0.45rem;
}

.footer-col a {
	font-size: 0.82rem;
	color: rgba(245, 230, 200, 0.82);
	transition: color 0.2s ease;
}

.footer-col a:hover {
	color: #fff;
}

.footer-bottom {
	border-top: 1px solid var(--footer-line);
	padding: 1rem 1.25rem;
	text-align: center;
}

.footer-bottom p {
	font-size: 0.78rem;
	color: rgba(232, 201, 145, 0.7);
}

/* -------------------------------------------------------------------------- */
/* Back to top                                                                */
/* -------------------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	inset-inline-start: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--brown);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.back-to-top:hover {
	background: var(--gold);
	color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Products page                                                              */
/* -------------------------------------------------------------------------- */
.products-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(420px, 58vw, 655px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	overflow: hidden;
	background: #e8dfd2;
}

.products-hero__bg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}

.products-hero__overlay {
	grid-area: 1 / 1;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(250, 246, 240, 0.28) 0%,
		rgba(250, 246, 240, 0.08) 42%,
		rgba(20, 12, 6, 0.06) 100%
	);
	pointer-events: none;
}

.products-hero__inner {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	/* Match .header-inner / logo track */
	width: var(--layout-width);
	max-width: var(--layout-width);
	margin-inline: auto;
	padding-block: calc(var(--header-h) + 1.5rem) 3rem;
	padding-inline: 0;
	box-sizing: border-box;
}

html[dir="rtl"] .products-hero__inner {
	/* flex-end در RTL = لبه چپ بصری، هم‌تراز با .container سکشن‌های پایین و لوگو هدر */
	justify-content: flex-end;
}

.products-hero__content {
	width: min(100%, 520px);
	text-align: left;
}

.products-hero__content h1 {
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	font-weight: 400;
	line-height: 1.45;
	color: #7C5A3D;
	margin-bottom: 0.85rem;
	letter-spacing: -0.015em;
}

.products-hero__content p {
	font-size: clamp(0.85rem, 1.1vw, 0.95rem);
	font-weight: 400;
	line-height: 1.9;
	color: #7C5A3D;
	margin-bottom: 1.45rem;
	max-width: 34rem;
}

.products-hero__cta {
	/* Match mobile CTA on all viewports: smaller, rounder, soft white wash */
	min-height: 38px;
	padding: 0.4rem 1.1rem;
	padding-inline: 1.1rem;
	border-radius: 18px;
	font-size: 0.78rem;
	gap: 0.35rem;
	background: linear-gradient(180deg, #c9a968 0%, #b89250 78%, #d8c49a 100%);
	color: #fff;
}

.products-hero__cta-icon {
	display: inline-flex;
	margin-top: 1px;
}

.products-hero__cta-icon svg {
	width: 13px;
	height: 13px;
}

/* Products hero CTA — keep desktop aligned with mobile size/look */
@media (min-width: 961px) {
	.products-hero__cta {
		min-height: 38px;
		padding: 0.4rem 1.1rem;
		padding-inline: 1.1rem;
		border-radius: 18px;
		font-size: 0.78rem;
		gap: 0.35rem;
		background: linear-gradient(180deg, #c9a968 0%, #b89250 78%, #d8c49a 100%);
		color: #fff;
	}

	.products-hero__cta-icon svg {
		width: 13px;
		height: 13px;
	}
}

.product-categories {
	padding: 2rem 0 2.5rem;
	background: var(--cream);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.category-card {
	position: relative;
	isolation: isolate;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.12), 0 2px 8px rgba(74, 52, 40, 0.06);
	aspect-ratio: 365 / 284;
	min-height: clamp(220px, 24vw, 300px);
	background: #f3ebe1;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(74, 52, 40, 0.14);
}

.category-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
	pointer-events: none;
}

.category-card__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: right;
	padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(1.1rem, 2.4vw, 1.75rem);
	width: min(52%, 240px);
	margin-inline-end: auto;
}

html[dir="rtl"] .category-card__content {
	/* Copy-space sits on the visual left of the banner */
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.category-card h3 {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 800;
	color: #7C5A3D;
	line-height: 1.4;
	margin-bottom: 0.45rem;
}

.category-card p {
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	color: #7C5A3D;
	line-height: 1.75;
	margin-bottom: 0.85rem;
}

.category-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: #7C5A3D;
	text-decoration: none;
	padding: 0 0.35rem 0.45rem;
	border-bottom: 1.5px solid #C69E5E;
	transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.category-card__link:hover {
	color: #563923;
	border-bottom-color: #563923;
	gap: 0.6rem;
}

.category-card__link-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform 0.2s ease;
}

.category-card__link:hover .category-card__link-arrow {
	transform: translateX(-3px);
}

.products-about {
	padding: 2.5rem 0 4.5rem;
	background: #F7EAD8;
}

/* Match .header-inner / logo track (.container already uses --layout-width) */
.products-about .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
	box-sizing: border-box;
}

.products-about__inner {
	/* Match .header-inner / logo track */
	max-width: none;
	width: 100%;
	margin-inline: 0;
	text-align: center;
}

.products-about__inner h2 {
	font-size: clamp(1.15rem, 1.65vw, 1.4rem);
	font-weight: 800;
	color: var(--brown);
	line-height: 1.55;
	margin-bottom: 1.1rem;
}

.products-about__inner p {
	font-size: clamp(0.9rem, 1.1vw, 1rem);
	line-height: 2;
	color: var(--brown-muted);
}

/* -------------------------------------------------------------------------- */
/* Fallback pages                                                             */
/* -------------------------------------------------------------------------- */
.page-fallback {
	padding: calc(var(--header-h) + 2rem) 0 3rem;
	min-height: 50vh;
}

.content-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--shadow);
}

.content-card h1 {
	margin-bottom: 1rem;
	font-size: 1.6rem;
}

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Liquid Laundry Subpage (مایع لباسشویی)                                     */
/* -------------------------------------------------------------------------- */
.liquid-page {
	overflow: clip;
}

.liquid-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(480px, 52vw, 620px);
	display: grid;
	align-items: center;
	isolation: isolate;
	background: #f7ede1;
}

.liquid-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

.liquid-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(250, 246, 240, 0.05) 0%,
		rgba(250, 246, 240, 0.22) 60%,
		rgba(250, 246, 240, 0.42) 100%
	);
}

.liquid-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* Same track as .header-inner / logo */
	width: var(--layout-width);
	margin-inline: auto;
	padding-block: calc(var(--header-h) + 1.75rem) 2rem;
	line-height: 1.5;
}

html[dir="rtl"] .liquid-hero__inner {
	justify-content: flex-end;
}

.liquid-hero__content {
	width: min(100%, 360px);
	text-align: left;
	color: #7C5A3D;
}

.liquid-hero__eyebrow {
	margin: 0 0 0.4rem;
	font-size: clamp(0.7rem, 0.9vw, 0.82rem);
	font-weight: 500;
	line-height: 1.5;
	color: #7C5A3D;
}

.liquid-hero__title {
	margin: 0 0 0.65rem;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	font-weight: 800;
	line-height: 1.2;
	color: #7C5A3D;
	letter-spacing: -0.02em;
}

.liquid-hero__desc {
	margin: 0;
	font-size: clamp(0.68rem, 0.85vw, 0.78rem);
	line-height: 1.65;
	color: #7C5A3D;
}

/* Types / Product Cards */
.liquid-types {
	padding: 2.5rem 0 3.75rem;
	background: #FCF3EB;
}

.liquid-types__title {
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	font-weight: 700;
	color: #7C5A3D;
	text-align: center;
	margin-bottom: 2.25rem;
}

/* Match .header-inner / logo track */
.liquid-types .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
}

.liquid-types__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	direction: ltr; /* visual left = first card (like softener-grid) */
}

.liquid-card {
	position: relative;
	isolation: isolate;
	border-radius: 0;
	overflow: hidden;
	/* Full-bleed photo only — no cream/colored letterbox bar */
	background-color: transparent;
	background-image: var(--liquid-bg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.08), 0 2px 6px rgba(74, 52, 40, 0.04);
	aspect-ratio: 365 / 476;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.liquid-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(74, 52, 40, 0.14);
}

.liquid-card__bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover !important;
	object-position: center center !important;
	background: none;
	background-color: transparent;
	z-index: 0;
	pointer-events: none;
	transition: transform 0.45s var(--ease);
}

.liquid-card:hover .liquid-card__bg {
	transform: scale(1.025);
}

.liquid-card__content {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	z-index: 1;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* LTR layout so flex-start = physical left; badge/titles/btn share one column */
	direction: ltr;
	align-items: flex-start;
	text-align: left;
	padding: 1.4rem 1.4rem;
	width: min(60%, 200px);
}

html[dir="rtl"] .liquid-card__content {
	left: 0;
	right: auto;
	direction: ltr;
	align-items: flex-start;
	text-align: left;
}

/* Persian on children; pin to same physical-left column as titles */
.liquid-card__badge,
.liquid-card__titles,
.liquid-card__btn {
	direction: rtl;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	margin-inline: 0;
	text-align: left;
	box-sizing: border-box;
}

html[dir="rtl"] .liquid-card__titles,
html[dir="rtl"] .liquid-card__sub,
html[dir="rtl"] .liquid-card__name {
	text-align: left;
}

.liquid-card__badge {
	font-size: clamp(0.55rem, 1.2vw, 0.65rem);
	font-weight: 600;
	color: #ffffff;
	padding: 0.22em 0.7em;
	border-radius: 0.35em;
	margin-bottom: 0.7rem;
	line-height: 1.45;
	display: inline-block;
	white-space: nowrap;
}

.badge--baby {
	background: #174375;
}

.badge--general {
	background: #c5a059;
}

.badge--rosegold {
	background: #C04870;
}

.liquid-card__titles {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.12rem;
	margin-bottom: 0;
	text-align: left;
}

.liquid-card__sub {
	font-size: clamp(0.88rem, 1.85vw, 1.05rem);
	font-weight: 600;
	color: #5E5449;
	line-height: 1.25;
	width: 100%;
	text-align: left;
}

.liquid-card__sub + .liquid-card__sub {
	margin-top: 0.45rem;
}

.liquid-card__name {
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0.9rem;
	width: 100%;
	text-align: left;
}

.text-baby {
	color: #174375;
}

.text-general {
	color: #9e7238;
	font-weight: 400;
}

.text-rosegold {
	color: #C04870;
	font-weight: 400;
}

/* Baby card (visual left): shift photo right so it clears left copy */
.liquid-card--baby {
	background-position: 28% center;
}

.liquid-card--baby .liquid-card__bg {
	object-position: 28% center !important;
}

.liquid-card__btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.22rem;
	margin-top: 1.15rem;
	font-size: clamp(0.68rem, 1.35vw, 0.8rem);
	font-weight: 600;
	color: #5E5449;
	border: 1px solid #5E5449;
	border-radius: 7px;
	padding: 0.3em 0.82em;
	background: transparent !important;
	background-color: transparent !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.liquid-card__btn:hover {
	background: #5E5449 !important;
	background-color: #5E5449 !important;
	border-color: #5E5449;
	color: #FFFFFF;
}

.liquid-card__btn-arrow {
	font-size: 0.78rem;
	line-height: 1;
	/* btn direction:rtl → arrow after label sits on physical left; keep ‹ pointing left */
	display: inline-block;
	direction: ltr;
	unicode-bidi: isolate;
}

/* Guide Section */
.liquid-guide {
	padding: 1.5rem 0 2.75rem;
	background: #F7EAD8;
}

.liquid-guide__header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.liquid-guide__title {
	font-size: clamp(1.05rem, 1.6vw, 1.28rem);
	font-weight: 400;
	color: #805A3D;
	margin-bottom: 0.45rem;
}

.liquid-guide__subtitle {
	font-size: 0.88rem;
	color: var(--brown-muted);
}

.liquid-guide__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	/* Match .header-inner / logo track (.container already uses --layout-width) */
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	/* Keep mockup LTR column order on RTL pages: General | Rose Gold | Baby */
	direction: ltr;
}

.guide-box {
	background: #FCF3EB;
	border-radius: 0;
	padding: 1.75rem 1.4rem 1.4rem;
	box-shadow: 0 4px 16px rgba(74, 52, 40, 0.05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	min-height: 175px;
	direction: rtl; /* Persian copy stays RTL inside LTR grid */
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.guide-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.09);
}

.guide-box__desc {
	font-size: 0.98rem;
	line-height: 1.85;
	color: #7C5A3D;
	margin-bottom: 1.25rem;
}

.guide-box__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.guide-box__label {
	font-size: 0.8rem;
	color: #7C5A3D;
	font-weight: 500;
}

.guide-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 38px;
	padding-inline: 1.45rem;
	border-radius: 3px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--white);
}

.guide-pill--baby {
	background: #174375;
}

.guide-pill--rosegold {
	background: #b83b5e;
}

.guide-pill--general {
	background: #6e472a;
}

/* About block inside section 3 (under guide boxes) — align with .header-inner / logo */
.liquid-guide .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
	box-sizing: border-box;
}

.liquid-guide__about {
	width: 100%;
	margin-top: 2.5rem;
	text-align: center;
}

.liquid-guide__about-title {
	font-size: 22px;
	font-weight: 500;
	color: #7C5A3D;
	margin: 0 0 1.25rem;
}

.liquid-guide__about-text {
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	line-height: 2.2rem;
	color: #7C5A3D;
	margin: 0;
}

/* FAQ Accordion Section — match softener-faq dimensions/layout */
.liquid-faq {
	width: 100%;
	max-width: none;
	padding: 1.5rem 0 1.25rem;
	background: #C59C5A;
	margin-top: 2.25rem;
	margin-bottom: 2.25rem;
	box-sizing: border-box;
}

.liquid-faq__box {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}

.liquid-faq__title {
	font-size: clamp(1.1rem, 1.55vw, 1.3rem);
	font-weight: 700;
	color: #5D4037;
	text-align: center;
	margin: 0 0 0.95rem;
	background: transparent;
	padding: 0;
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
}

.liquid-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.liquid-faq-item {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width: 100%;
	background: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	overflow: visible;
}

.liquid-faq-btn {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.25rem;
	min-height: 48px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #5D4037;
	background: #FAF1E6;
	border-radius: 14px;
	border: none;
	box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	cursor: pointer;
	text-align: right;
	direction: rtl;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.liquid-faq-btn:hover {
	background: #FAF1E6;
	box-shadow: 0 3px 12px rgba(74, 52, 40, 0.14);
}

.liquid-faq-btn__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
}

.liquid-faq-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5D4037;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	transition: transform 0.3s ease;
}

.liquid-faq-btn__icon svg {
	width: 15px;
	height: 15px;
}

.liquid-faq-btn[aria-expanded="true"] .liquid-faq-btn__icon {
	transform: rotate(180deg);
}

.liquid-faq-body {
	padding: 0 1.25rem 0.15rem;
	background: transparent;
	text-align: right;
}

.liquid-faq-body[hidden] {
	display: none;
}

.liquid-faq-content {
	background: transparent;
}

.liquid-faq-content p {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.9;
	color: #3a271b;
	text-align: right;
	text-shadow: none;
}

/* Liquid FAQ — desktop open state (match softener-faq) */
@media (min-width: 961px) {
	.liquid-faq__list {
		gap: 0.85rem;
	}

	.liquid-faq-item {
		background: transparent;
		border-radius: 0;
		border: none;
		box-shadow: none;
		overflow: visible;
		gap: 0.8rem;
	}

	.liquid-faq-btn {
		background: #F7EAD8;
		border-radius: 12px;
		box-shadow: none;
		min-height: 52px;
		padding: 0.85rem 1.4rem;
		font-size: 0.95rem;
	}

	.liquid-faq-btn:hover {
		background: #F7EAD8;
		box-shadow: none;
	}

	.liquid-faq-btn__icon {
		color: #2a2a2a;
	}

	.liquid-faq-body {
		padding: 0 1.4rem 0.2rem;
		background: transparent;
	}

	.liquid-faq-content {
		background: transparent;
	}

	.liquid-faq-content p {
		background: transparent;
		color: #242424;
		font-size: 0.95rem;
		line-height: 1.95;
	}
}


/* Mobile drawer extras — desktop hidden */
.nav-panel__search,
.nav-panel__back {
	display: none;
}

/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.footer-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.product-card__content {
		width: min(55%, 200px);
		margin-left: 0;
		margin-right: auto;
	}

	.category-card__content {
		width: min(58%, 220px);
	}
}

@media (max-width: 960px) {
	.liquid-types__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.liquid-guide__grid {
		grid-template-columns: 1fr;
		gap: 1.15rem;
	}

	.liquid-hero {
		min-height: 440px;
	}

	.liquid-hero__content {
		width: min(100%, 360px);
	}

	.liquid-faq {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		padding: 1.35rem 0 1.15rem;
		background: #C59C5A;
		margin-top: 1.75rem;
		margin-bottom: 1.75rem;
	}

	.liquid-faq__list {
		gap: 0.7rem;
	}

	.liquid-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.6rem;
	}

	.liquid-faq-btn {
		background: #FAF1E6;
	}

	.liquid-faq-btn:hover {
		background: #FAF1E6;
	}

	.liquid-faq__title {
		padding: 0;
		font-size: 1.1rem;
		margin-bottom: 0.85rem;
	}

	.nav-toggle {
		display: flex;
		position: relative;
		z-index: 1210;
	}

	.header-inner {
		grid-template-columns: auto 1fr auto;
	}

	.site-nav {
		justify-content: flex-start;
	}

	/* Fixed right drawer — white panel matching brand mobile UI */
	.nav-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(86vw, 320px);
		max-width: 320px;
		height: 100%;
		height: 100dvh;
		background: #ffffff;
		padding: 0 0 2rem;
		transform: translate3d(100%, 0, 0);
		transition: transform 0.35s var(--ease), visibility 0.35s var(--ease);
		z-index: 1200;
		direction: rtl;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		pointer-events: none;
		box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
	}

	.nav-panel.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
	}

	.nav-panel__search {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		margin: 0;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid #eeeeee;
		background: #ffffff;
		position: sticky;
		top: 0;
		z-index: 2;
		direction: ltr;
	}

	.nav-panel__search-submit {
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		color: #b0b0b0;
	}

	.nav-panel__search input {
		flex: 1;
		min-width: 0;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		background: #ffffff;
		color: #666666;
		padding: 0.65rem 0.85rem;
		font-family: inherit;
		font-size: 0.9rem;
		outline: none;
		direction: rtl;
		text-align: right;
	}

	.nav-panel__search input::placeholder {
		color: #b0b0b0;
	}

	/* Softlan.com / Woodmart drill-down back: opener on inline-start (right in RTL) */
	.nav-panel__back {
		display: none;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-bottom: 1px solid #eeeeee;
		background: #ffffff;
		color: #c59c5a;
		font-family: inherit;
		font-size: 0.95rem;
		font-weight: 500;
		text-align: right;
		cursor: pointer;
		direction: rtl;
	}

	.nav-panel__back:not([hidden]) {
		display: flex;
	}

	.nav-panel__back-label {
		flex: 1;
		padding: 1rem 1.1rem;
		text-align: right;
		direction: rtl;
	}

	.nav-panel__back-chevron {
		flex-shrink: 0;
		width: 2.75rem;
		align-self: stretch;
		display: grid;
		place-items: center;
		border: 0;
		border-inline-end: 1px solid #eeeeee;
	}

	.nav-panel__back-chevron::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 1.5px solid #c59c5a;
		border-right: 1.5px solid #c59c5a;
		transform: rotate(45deg);
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	.nav-menu > li > a,
	.nav-menu .sub-menu a,
	.nav-menu .sub-menu .sub-menu a {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		max-width: none;
		padding: 1rem 1.1rem;
		border-bottom: 1px solid #eeeeee;
		font-size: 0.95rem;
		font-weight: 500;
		line-height: 1.45;
		color: #c59c5a;
		white-space: normal;
		background: transparent;
	}

	.nav-menu > li:not(.menu-item-has-children) > a::before,
	.nav-menu .sub-menu > li:not(.menu-item-has-children) > a::before {
		display: none;
	}

	.nav-menu > li > a:hover,
	.nav-menu .sub-menu a:hover,
	.nav-menu .sub-menu .current-menu-item > a {
		background: transparent;
		color: #a67c42;
	}

	/* Drill chevron column on the physical left
	   Higher specificity so desktop flyout ::after does not win on .sub-menu rows */
	.nav-menu .menu-item-has-children > a,
	.nav-menu .sub-menu > .menu-item-has-children > a {
		padding-left: 2.75rem;
		padding-right: 1.1rem;
		padding-block: 1rem;
		justify-content: flex-start;
		gap: 0;
	}

	/* Softlan/Woodmart opener column: vertical + bottom border so the
	   separator under category rows (مایع/پودر/نرم‌کننده) runs full width */
	.nav-menu .menu-item-has-children > a::after,
	.nav-menu .sub-menu > .menu-item-has-children > a::after,
	.nav-menu .sub-menu .sub-menu > .menu-item-has-children > a::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: auto;
		top: 0;
		bottom: -1px;
		width: 2.75rem;
		height: auto;
		margin: 0;
		border: 0;
		border-top: 0;
		border-left: 0;
		border-right: 1px solid #eeeeee;
		border-bottom: 1px solid #eeeeee;
		border-radius: 0;
		background: #ffffff;
		transform: none;
		flex-shrink: 0;
		pointer-events: none;
		box-sizing: border-box;
	}

	.nav-menu .menu-item-has-children > a::before,
	.nav-menu .sub-menu > .menu-item-has-children > a::before,
	.nav-menu .sub-menu .sub-menu > .menu-item-has-children > a::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: auto;
		top: 50%;
		width: 7px;
		height: 7px;
		margin: 0;
		transform: translate(calc(2.75rem / 2 - 50%), -50%) rotate(-135deg);
		border: 0;
		border-top: 1.5px solid #c59c5a;
		border-right: 1.5px solid #c59c5a;
		border-left: 0;
		background: none;
		border-radius: 0;
		z-index: 1;
		pointer-events: none;
	}

	/* Kill desktop orange underline / flyout bridge on mobile */
	.nav-menu > li > a::before {
		display: none;
	}

	.nav-menu > .menu-item-has-children::after,
	.nav-menu .sub-menu > .menu-item-has-children::after,
	.nav-menu > .menu-item-has-children > .sub-menu::before,
	.nav-menu .sub-menu .sub-menu::before {
		content: none;
		display: none;
		pointer-events: none;
	}

	/* Leaf rows: no chevron column */
	.nav-menu > li:not(.menu-item-has-children) > a,
	.nav-menu .sub-menu > li:not(.menu-item-has-children) > a {
		padding-left: 1.1rem;
	}

	.nav-menu > li:not(.menu-item-has-children) > a::before,
	.nav-menu > li:not(.menu-item-has-children) > a::after,
	.nav-menu .sub-menu > li:not(.menu-item-has-children) > a::before,
	.nav-menu .sub-menu > li:not(.menu-item-has-children) > a::after {
		content: none;
		display: none;
	}

	/* Accordion/drill panels */
	.nav-menu > .menu-item-has-children > .sub-menu,
	.nav-menu .sub-menu > .menu-item-has-children > .sub-menu,
	.nav-menu .sub-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		min-width: 0;
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #ffffff;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: none;
	}

	/* Drill-down: hide siblings outside the open path */
	.nav-menu.is-drilling > li:not(.is-drill-open) {
		display: none;
	}

	.nav-menu .is-drill-open > a {
		display: none;
	}

	/* Match/exceed hide-rule specificity for nested category sub-menus */
	.nav-menu > .is-drill-open > .sub-menu,
	.nav-menu .sub-menu > .is-drill-open > .sub-menu,
	.nav-menu .sub-menu .is-drill-open > .sub-menu {
		display: block;
	}

	.nav-menu .is-drill-open > .sub-menu > li:not(.is-drill-open) {
		display: list-item;
	}

	.nav-menu .sub-menu.is-drilling > li:not(.is-drill-open) {
		display: none;
	}

	.site-header:not(.is-scrolled) .nav-menu > li > a,
	.site-header.is-scrolled .nav-menu > li > a,
	.site-header:not(.is-scrolled) .nav-menu .sub-menu a,
	.site-header.is-scrolled .nav-menu .sub-menu a,
	.nav-panel .nav-menu > li > a,
	.nav-panel .nav-menu .sub-menu a {
		color: #c59c5a;
		font-size: 0.95rem;
	}

	.product-grid {
		flex-direction: column;
		gap: 1.5rem;
	}

	.product-card {
		width: 100%;
		flex: none;
		aspect-ratio: 731 / 380;
	}

	/*
	 * Homepage section-2 (products) — phone/tablet only (stacked cards).
	 * Native banner ratio so BG shows fully; shared left inset + shadow.
	 * Desktop (>960px) keeps its own rules above.
	 */
	.products-section .product-card {
		aspect-ratio: 731 / 345;
		height: auto;
		/* overflow:hidden clips box-shadow — use drop-shadow */
		box-shadow: none;
		filter: drop-shadow(0 16px 32px rgba(74, 52, 40, 0.38))
			drop-shadow(0 6px 14px rgba(74, 52, 40, 0.22));
	}

	.products-section .product-card:hover {
		filter: drop-shadow(0 20px 38px rgba(74, 52, 40, 0.44))
			drop-shadow(0 8px 16px rgba(74, 52, 40, 0.26));
	}

	.products-section .product-card__media,
	.products-section .product-card:first-child .product-card__media {
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: cover;
		/* Keep product art on physical right so left copy stays clear */
		object-position: right center;
	}

	.products-section .product-card__content,
	html[dir="rtl"] .products-section .product-card__content {
		/* Absolute physical-left column — never overlaps product art on the right */
		position: absolute;
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: min(40%, 168px);
		max-width: 40%;
		margin: 0;
		background: none;
		/* LTR flex so flex-start = physical left */
		direction: ltr;
		align-items: flex-start;
		justify-content: center;
		text-align: right;
		padding: clamp(1.05rem, 3vw, 1.5rem) 0.3rem clamp(1.05rem, 3vw, 1.5rem) 0.65rem;
		padding-left: 0.65rem;
		padding-right: 0.3rem;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 2;
	}

	/*
	 * Homepage section-2 product cards — mobile/tablet only.
	 * Pin title/body/CTA to physical left so copy clears product art.
	 * Desktop (>960px) unchanged.
	 */
	.products-section .product-card h3,
	.products-section .product-card p {
		direction: rtl;
		align-self: flex-start;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		margin-left: 0;
		margin-right: 0;
		text-align: right;
		box-sizing: border-box;
		color: #7C5A3D;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.products-section .product-card h3 {
		white-space: normal;
		font-size: clamp(0.74rem, 2.6vw, 0.9rem);
	}

	.products-section .product-card p {
		font-size: clamp(0.65rem, 2.2vw, 0.76rem);
	}

	.products-section .product-card .btn-outline {
		direction: rtl;
		border: 1px solid #7C5A3D;
		border-color: #7C5A3D;
		background: transparent;
		padding: 0.18rem 0.45rem;
		min-height: 26px;
		font-size: 0.72rem;
		justify-content: flex-end;
		width: max-content;
		max-width: 100%;
		/* Match right-aligned title/body edge inside the left copy column */
		align-self: flex-end;
		margin-inline: 0;
		margin-left: 0;
		margin-right: 0;
		text-align: right;
		box-sizing: border-box;
		color: #7C5A3D;
	}

	.products-section .product-card .btn-outline:hover,
	.products-section .product-card .btn-outline:focus,
	.products-section .product-card .btn-outline:active {
		background: #7C5A3D;
		border-color: #7C5A3D;
		color: #fff;
	}

	.category-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.category-card {
		/* Match media 730×568 so cover shows the full BG on mobile */
		aspect-ratio: 365 / 284;
		min-height: 0;
	}

	/*
	 * Products page categories — mobile/tablet only (راست‌چین).
	 * پودر لباسشویی / مایع لباسشویی / نرم‌کننده لباس / لکه‌بر
	 * Desktop (>960px) unchanged.
	 */
	.category-card__content,
	html[dir="rtl"] .category-card__content {
		width: min(54%, 235px);
		margin-left: 0;
		margin-right: auto;
		background: none;
		direction: rtl;
		align-items: stretch;
		text-align: right;
		/* Keep copy on physical left with breathing room from the box edge */
		padding: clamp(1rem, 2.8vw, 1.45rem) 0.5rem clamp(1rem, 2.8vw, 1.45rem) 0.95rem;
		padding-left: 0.95rem;
		padding-right: 0.5rem;
	}

	.category-card h3,
	.category-card p {
		direction: rtl;
		align-self: stretch;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		margin-left: 0;
		margin-right: 0;
		text-align: right;
		box-sizing: border-box;
	}

	.category-card__link {
		direction: rtl;
		align-self: flex-end;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		margin-left: auto;
		margin-right: 0;
		text-align: right;
		box-sizing: border-box;
	}

	.products-hero {
		min-height: 460px;
	}

	.products-hero__content {
		width: min(100%, 440px);
	}

	/*
	 * Features (section 3) — mobile/tablet only.
	 * Vertical stack: icon → title → subtitle, centered; dashed rules BETWEEN items.
	 * Dashed rules span .header-inner / logo track (--layout-width).
	 * Desktop (>960px) 3-column row stays unchanged.
	 */
	.features-section {
		padding: 1.5rem 0 2rem;
	}

	.features-section .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.features-row {
		grid-template-columns: 1fr;
		gap: 0;
		justify-items: stretch;
		width: 100%;
	}

	.feature-item {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding: 1.35rem 0;
		direction: rtl;
		text-align: center;
	}

	.feature-icon {
		width: 88px;
		height: 88px;
	}

	.feature-icon img {
		width: 88px;
		height: 88px;
	}

	.feature-text {
		width: 100%;
		max-width: 16.5rem;
		margin-inline: auto;
		direction: rtl;
		text-align: center;
	}

	.feature-text h3,
	.feature-text p {
		width: 100%;
		margin-inline: auto;
		text-align: center;
	}

	.feature-text h3 {
		font-size: 1.05rem;
		font-weight: 700;
		margin-bottom: 0.35rem;
	}

	.feature-text p {
		font-size: 0.88rem;
		line-height: 1.75;
	}

	/* Horizontal dashed rules — flush with .header-inner / logo edges */
	.feature-item:not(:last-child)::before {
		content: "";
		display: block;
		position: absolute;
		inset-block: auto;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 0;
		border-left: none;
		border-bottom: 1px dashed rgba(166, 124, 66, 0.45);
	}

	.memories-card__content,
	html[dir="rtl"] .memories-card__content {
		width: 100%;
		max-width: 100%;
		background: none;
	}

	.footer-inner {
		flex-direction: column-reverse;
		gap: 2rem;
	}

	.footer-brand {
		flex-basis: auto;
		width: 100%;
	}

	.footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	/* Section-2 boxes align with .header-inner / logo track */
	.liquid-types .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.liquid-types__grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		width: 100%;
		max-width: 100%;
	}

	/* Guide boxes align with .header-inner / logo track */
	.liquid-guide .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.liquid-guide__grid {
		width: 100%;
		max-width: 100%;
	}

	.liquid-card {
		aspect-ratio: 365 / 476;
		border-radius: 0;
		background-color: transparent;
	}

	/*
	 * Section-2 (liquid-types) — mobile only: pin badge / titles / CTA to one
	 * physical-left column so every card’s copy shares the same alignment.
	 * Desktop rules above stay unchanged.
	 */
	.liquid-types .liquid-card__content {
		width: 65%;
		direction: ltr;
		align-items: flex-start;
		text-align: left;
	}

	.liquid-types .liquid-card__badge,
	.liquid-types .liquid-card__titles,
	.liquid-types .liquid-card__btn,
	.liquid-types .liquid-card__sub,
	.liquid-types .liquid-card__name {
		direction: rtl;
		align-self: flex-start;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		text-align: left;
		box-sizing: border-box;
	}

	.liquid-types .liquid-card__titles {
		align-items: flex-start;
	}

	.liquid-hero {
		min-height: 380px;
	}

	.liquid-hero__title {
		font-size: 1.55rem;
	}

	.liquid-hero__eyebrow {
		font-size: 0.85rem;
	}

	.liquid-hero__desc {
		font-size: 0.82rem;
	}

	.liquid-faq {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		background: #C59C5A;
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		padding: 1.25rem 0 1.1rem;
	}

	.liquid-faq__title {
		margin-bottom: 0.75rem;
		padding: 0;
		font-size: 1.05rem;
	}

	.liquid-faq__list {
		gap: 0.7rem;
	}

	.liquid-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.55rem;
	}

	.liquid-faq-btn {
		padding: 0.65rem 0.8rem;
		font-size: clamp(0.66rem, 2.85vw, 0.78rem);
		gap: 0.4rem;
		min-height: 42px;
		border-radius: 12px;
		background: #FAF1E6;
		box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	}

	.liquid-faq-btn:hover {
		background: #FAF1E6;
	}

	.liquid-faq-btn__text {
		line-height: 1.3;
		white-space: nowrap;
		word-wrap: normal;
		overflow-wrap: normal;
	}

	.liquid-faq-btn__icon,
	.liquid-faq-btn__icon svg {
		width: 13px;
		height: 13px;
	}

	.liquid-faq-body {
		padding: 0 1.05rem 0.1rem;
	}

	:root {
		--header-h: 72px;
	}

	.hero {
		min-height: 62vh;
		height: 62vh;
	}

	.products-hero {
		/* Mobile only: taller hero so copy sits lower on the BG */
		min-height: 740px;
	}

	.products-hero__bg {
		/* Mobile only: slight nudge so hand is fully visible, not cropped */
		object-position: 76% center;
	}

	.products-hero__inner {
		align-items: flex-end;
		/* Mobile only: copy lower; breathing room under CTA */
		padding-block: calc(var(--header-h) + 1.25rem) 1.85rem;
	}

	.products-hero__content h1 {
		font-size: 1.05rem;
	}

	.products-hero__content p {
		font-size: 0.82rem;
	}

	.products-hero__cta {
		/* Mobile only: smaller, rounder CTA — white wash kept very subtle */
		min-height: 38px;
		padding: 0.4rem 1.1rem;
		padding-inline: 1.1rem;
		border-radius: 18px;
		font-size: 0.78rem;
		gap: 0.35rem;
		background: linear-gradient(180deg, #c9a968 0%, #b89250 78%, #d8c49a 100%);
		color: #fff;
	}

	.products-hero__cta-icon svg {
		width: 13px;
		height: 13px;
	}

	.category-card__content,
	html[dir="rtl"] .category-card__content {
		/* Mobile: keep copy on physical left, clear of product bottles */
		width: min(46%, 185px);
		margin-left: 0;
		margin-right: auto;
		direction: rtl;
		align-items: stretch;
		text-align: right;
		padding: clamp(0.95rem, 3.2vw, 1.3rem) 0.35rem clamp(0.95rem, 3.2vw, 1.3rem) 0.7rem;
		padding-left: 0.7rem;
		padding-right: 0.35rem;
	}

	.category-card h3,
	.category-card p {
		direction: rtl;
		text-align: right;
		width: 100%;
		align-self: stretch;
	}

	.category-card h3 {
		font-size: clamp(0.92rem, 3.6vw, 1.1rem);
	}

	.category-card p {
		font-size: clamp(0.74rem, 2.6vw, 0.84rem);
		line-height: 1.65;
	}

	.category-card__link {
		align-self: flex-end;
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}

	.category-card__link {
		font-size: 0.78rem;
	}

	.product-categories {
		padding: 1.5rem 0 1.75rem;
	}

	.products-about {
		padding: 1.75rem 0 3.25rem;
	}

	.products-section {
		margin-top: -0.75rem;
		padding: 3rem 0 1.5rem;
	}

	/* Homepage section-2 — full BG ratio + shared text column on small phones */
	.products-section .product-card {
		aspect-ratio: 731 / 345;
		height: auto;
		box-shadow: none;
		filter: drop-shadow(0 18px 34px rgba(74, 52, 40, 0.4))
			drop-shadow(0 6px 14px rgba(74, 52, 40, 0.24));
	}

	.products-section .product-card:hover {
		filter: drop-shadow(0 22px 40px rgba(74, 52, 40, 0.46))
			drop-shadow(0 8px 16px rgba(74, 52, 40, 0.28));
	}

	.products-section .product-card__content,
	html[dir="rtl"] .products-section .product-card__content {
		/* Small phones: tighter left column so bottles stay clear */
		position: absolute;
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: min(38%, 148px);
		max-width: 38%;
		margin: 0;
		direction: ltr;
		align-items: flex-start;
		justify-content: center;
		text-align: right;
		padding: clamp(0.85rem, 3vw, 1.1rem) 0.25rem clamp(0.85rem, 3vw, 1.1rem) 0.55rem;
		padding-left: 0.55rem;
		padding-right: 0.25rem;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 2;
	}

	.products-section .product-card h3,
	.products-section .product-card p {
		direction: rtl;
		text-align: right;
		width: 100%;
		max-width: 100%;
		align-self: flex-start;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.products-section .product-card h3 {
		white-space: normal;
		font-size: clamp(0.68rem, 2.9vw, 0.84rem);
	}

	.products-section .product-card p {
		font-size: clamp(0.6rem, 2.4vw, 0.72rem);
		margin-bottom: 0.55rem;
	}

	.products-section .product-card .btn-outline {
		/* Same edge as right-aligned copy in the left column */
		align-self: flex-end;
		justify-content: flex-end;
		margin-left: 0;
		margin-right: 0;
		text-align: right;
		max-width: 100%;
		font-size: 0.68rem;
		padding: 0.15rem 0.4rem;
		min-height: 24px;
	}

	.products-section .product-card__media,
	.products-section .product-card:first-child .product-card__media {
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: cover;
		object-position: right center;
	}

	/* Mobile: nudge memories section slightly higher; breathing room under card */
	.banner-memories {
		padding: 0.25rem 0 1.25rem;
	}

	.memories-card {
		min-height: 200px;
		aspect-ratio: auto;
	}

	/* Keep kids in frame on phone crop */
	.memories-card__bg {
		object-position: 70% center;
	}

	.memories-card__content,
	html[dir="rtl"] .memories-card__content {
		width: 100%;
		max-width: 100%;
		justify-self: stretch;
		background: none;
		/* Mobile: lift text so it clears the kids photo */
		justify-content: flex-start;
		padding-top: clamp(0.65rem, 2.8vw, 1rem);
		padding-bottom: clamp(1.6rem, 5.5vw, 2.4rem);
	}

	.memories-card h2 {
		white-space: nowrap;
		font-size: clamp(0.95rem, 4.2vw, 1.25rem);
	}

	.memories-card p {
		white-space: normal;
	}

	/* Smaller CTA, pin to physical left; push lower in the box */
	.memories-card .btn-gold {
		align-self: flex-end;
		margin-top: auto;
		min-height: 34px;
		padding: 0.35rem 0.9rem;
		font-size: 0.78rem;
	}

	/*
	 * Mobile only — last section (story): static copy (no typewriter),
	 * one-line title, white section rails, gold CTA gradient.
	 */
	.banner-story {
		padding: 1.25rem 0;
		background: #FFFFFF;
	}

	.story-panel {
		position: relative;
		display: block;
		width: 100%;
		aspect-ratio: 340 / 221;
		min-height: 0;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.story-panel__picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
	}

	.story-panel__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center center;
		z-index: 0;
		pointer-events: none;
	}

	.story-panel__content,
	html[dir="rtl"] .story-panel__content {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		width: var(--layout-width);
		max-width: 100%;
		min-height: 100%;
		height: 100%;
		margin-inline: auto;
		padding-block: clamp(1.1rem, 4vw, 1.85rem);
		padding-inline: 0;
		text-align: right;
		box-sizing: border-box;
	}

	.story-panel h2 {
		white-space: nowrap;
		max-width: none;
		font-size: clamp(0.92rem, 4vw, 1.2rem);
		font-weight: 800;
		color: #5A4638;
		margin-bottom: 0.7rem;
		line-height: 1.45;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	}

	/* Mobile only: gold CTA — #C0934D top → #AD7C2E */
	.story-panel .btn-gold {
		min-height: 32px;
		padding: 0.32rem 0.88rem;
		font-size: 0.72rem;
		font-weight: 600;
		border-radius: 8px;
		background: #AD7C2E;
		background-image: linear-gradient(180deg, #C0934D 0%, #AD7C2E 100%);
		color: #fff;
		box-shadow: none;
	}

	.footer-cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* --- Powder Page Styles --- */
/* -------------------------------------------------------------------------- */
/* Powder Laundry Page                                                        */
/* -------------------------------------------------------------------------- */
.powder-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	/* Tall enough to keep baked-in hero title text fully visible (source ~2.29:1) */
	height: clamp(480px, 52vw, 680px);
	min-height: 440px;
	overflow: hidden;
	background: #e5d2b7;
}

.powder-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

.powder-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.02);
	pointer-events: none;
}

/* Powder Types Grid */
.powder-types-section {
	padding: 1.5rem 0 1rem;
	background: var(--cream);
}

.powder-section-title {
	font-size: 18px;
	font-weight: 700;
	color: #7C5A3D;
	text-align: center;
	margin-bottom: 1.5rem;
	letter-spacing: 0;
	word-spacing: normal;
}

.powder-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 1120px;
	margin-inline: auto;
}

.powder-card {
	position: relative;
	isolation: isolate;
	border-radius: 0;
	overflow: hidden;
	background: #f3ebe0;
	aspect-ratio: 365 / 284;
	box-shadow: 0 4px 18px rgba(74, 52, 40, 0.08), 0 1px 4px rgba(74, 52, 40, 0.04);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.powder-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(74, 52, 40, 0.13);
}

.powder-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
	transition: transform 0.4s var(--ease);
}

.powder-card:hover .powder-card__bg {
	transform: scale(1.025);
}

.powder-card__content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 48%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1.25rem 0.75rem;
}

html[dir="rtl"] .powder-card__content {
	left: 0;
	right: auto;
}

.powder-card__badge {
	font-size: 0.72rem;
	font-weight: 600;
	color: #ffffff;
	padding: 3px 10px;
	border-radius: 4px;
	line-height: 1.35;
	display: inline-block;
	margin-bottom: 0.75rem;
}

.powder-card__badge--green {
	background: #479730;
}

.powder-card__badge--gold {
	background: #8e5e34;
}

.powder-card__badge--blue {
	background: #104882;
}

.powder-card__title {
	font-size: clamp(0.95rem, 1.25vw, 1.15rem);
	font-weight: 700;
	color: #362317;
	line-height: 1.45;
	margin-bottom: 0.85rem;
}

.powder-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	font-size: 0.76rem;
	font-weight: 600;
	color: #4a3428;
	border: 1px solid #705848;
	border-radius: 6px;
	padding: 3px 12px;
	/* Default: no fill — desktop + mobile stay outline */
	background: none;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.powder-card__btn:hover {
	background: none;
	background-color: transparent;
	border-color: var(--gold-deep);
	color: var(--gold-deep);
}

/*
 * Desktop only — powder types cards:
 * Raise text/CTA, color #7C5A46, no button fill, left-align, arrow left.
 * Mobile (max-width:640) keeps its own rules unchanged.
 */
@media (min-width: 961px) {
	.powder-card__content {
		direction: ltr;
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
		padding-top: 1.35rem;
		padding-bottom: 0.5rem;
		padding-inline-start: 0.85rem;
		padding-inline-end: 0.5rem;
	}

	.powder-card__badge,
	.powder-card__title,
	.powder-card__btn {
		direction: rtl;
		align-self: flex-start;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		text-align: left;
		box-sizing: border-box;
	}

	.powder-card__title {
		color: #7C5A46;
		text-align: left;
	}

	.powder-card__btn {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		justify-content: flex-start;
		color: #7C5A46;
		border-color: #7C5A46;
	}

	.powder-card__btn:hover,
	.powder-card__btn:focus,
	.powder-card__btn:active {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		color: #7C5A46;
		border-color: #7C5A46;
	}

	.powder-card__arrow {
		display: inline-block;
		direction: ltr;
		unicode-bidi: isolate;
		transform: none;
	}
}

.powder-card__arrow {
	font-size: 0.9rem;
	line-height: 1;
}

/* Recommendations Section */
.powder-rec-section {
	padding: 1.5rem 0 3.5rem;
	background: #F7EAD8;
}

.powder-rec-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.powder-rec-title {
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	font-weight: 700;
	color: #7C5A3D;
	margin-bottom: 0.45rem;
}

.powder-rec-subtitle {
	font-size: 0.88rem;
	color: #887467;
}

.powder-rec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	/* Match .header-inner / logo track (.container already uses --layout-width) */
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}

.powder-rec-card {
	background: #FCF3EB;
	border-radius: 0;
	padding: 1.85rem 1.4rem 1.5rem;
	box-shadow: 0 2px 12px rgba(74, 52, 40, 0.04);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	min-height: 190px;
	border: 1px solid rgba(74, 52, 40, 0.05);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.powder-rec-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(74, 52, 40, 0.08);
}

.powder-rec-card__text {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.85;
	color: #7C5A3D;
	margin-bottom: 1.25rem;
	max-width: 290px;
}

.powder-rec-card__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
}

.powder-rec-card__label {
	font-size: 0.74rem;
	color: #9c897c;
	font-weight: 500;
}

.powder-rec-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	height: 32px;
	padding-inline: 1.35rem;
	border-radius: 2px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #ffffff;
}

.powder-rec-card__tag--green {
	background: #479730;
}

.powder-rec-card__tag--blue {
	background: #0f4c81;
}

.powder-rec-card__tag--gold {
	background: #7a502c;
}

/* Powder rec boxes — desktop: selectable text (hover lift breaks selection) */
@media (min-width: 961px) {
	.powder-rec-card {
		user-select: text;
		-webkit-user-select: text;
	}

	.powder-rec-card:hover {
		transform: none;
	}

	.powder-rec-card__text,
	.powder-rec-card__label,
	.powder-rec-card__tag {
		user-select: text;
		-webkit-user-select: text;
	}
}

/* About text under recommendation boxes (same section as «کدام پودر…») */
.powder-about__inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	text-align: center;
}

.powder-about__inner--under-rec {
	margin-top: 3rem;
	padding-top: 0.25rem;
}

.powder-about__title {
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	font-weight: 800;
	color: #2e1d14;
	margin-bottom: 1rem;
}

.powder-about__desc {
	font-size: clamp(0.88rem, 1.1vw, 0.98rem);
	line-height: 2.1;
	color: #6b584a;
	width: 100%;
	max-width: none;
}

/* FAQ Accordion Section — match softener-faq dimensions/layout */
.powder-faq-section {
	width: 100%;
	max-width: none;
	padding: 1.5rem 0 1.25rem;
	background: #C59C5A;
	margin-top: 2.25rem;
	margin-bottom: 2.25rem;
	box-sizing: border-box;
}

.powder-faq-box {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}

.powder-faq-title {
	font-size: clamp(1.1rem, 1.55vw, 1.3rem);
	font-weight: 700;
	color: #5D4037;
	text-align: center;
	margin: 0 0 0.95rem;
	background: transparent;
	padding: 0;
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
}

.powder-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.powder-faq-item {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width: 100%;
	background: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	overflow: visible;
}

.powder-faq-btn {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.25rem;
	min-height: 48px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #5D4037;
	background: #FAF1E6;
	border-radius: 14px;
	border: none;
	box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	cursor: pointer;
	text-align: right;
	direction: rtl;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.powder-faq-btn:hover {
	background: #FAF1E6;
	box-shadow: 0 3px 12px rgba(74, 52, 40, 0.14);
}

.powder-faq-btn__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
}

.powder-faq-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5D4037;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	transition: transform 0.3s ease;
}

.powder-faq-btn__icon svg {
	width: 15px;
	height: 15px;
}

.powder-faq-btn[aria-expanded="true"] .powder-faq-btn__icon {
	transform: rotate(180deg);
}

.powder-faq-body {
	padding: 0 1.25rem 0.15rem;
	background: transparent;
	text-align: right;
}

.powder-faq-body[hidden] {
	display: none;
}

.powder-faq-content {
	background: transparent;
}

.powder-faq-content p {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.9;
	color: #3a271b;
	text-align: right;
	text-shadow: none;
}

/* Powder FAQ — desktop open state (match softener-faq) */
@media (min-width: 961px) {
	.powder-faq-list {
		gap: 0.85rem;
	}

	.powder-faq-item {
		background: transparent;
		border-radius: 0;
		border: none;
		box-shadow: none;
		overflow: visible;
		gap: 0.8rem;
	}

	.powder-faq-btn {
		background: #F7EAD8;
		border-radius: 12px;
		box-shadow: none;
		min-height: 52px;
		padding: 0.85rem 1.4rem;
		font-size: 0.95rem;
	}

	.powder-faq-btn:hover {
		background: #F7EAD8;
		box-shadow: none;
	}

	.powder-faq-btn__icon {
		color: #2a2a2a;
	}

	.powder-faq-body {
		padding: 0 1.4rem 0.2rem;
		background: transparent;
	}

	.powder-faq-content {
		background: transparent;
	}

	.powder-faq-content p {
		background: transparent;
		color: #242424;
		font-size: 0.95rem;
		line-height: 1.95;
	}
}

/* Responsive adjustments for Powder Page */
@media (max-width: 960px) {
	.powder-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.powder-rec-grid {
		grid-template-columns: 1fr;
		gap: 1.15rem;
	}

	/* Mobile only: swap rec box 1 ↔ 3 (desktop order unchanged) */
	.powder-rec-grid .powder-rec-card:nth-child(1) {
		order: 3;
	}

	.powder-rec-grid .powder-rec-card:nth-child(2) {
		order: 2;
	}

	.powder-rec-grid .powder-rec-card:nth-child(3) {
		order: 1;
	}

	.powder-hero {
		min-height: 400px;
		height: clamp(400px, 58vw, 520px);
	}

	/* Tablet/mobile: outline CTA — no fill (desktop unchanged via min-width:961) */
	.powder-card__btn {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		border-radius: 6px !important;
	}

	.powder-card__btn:hover,
	.powder-card__btn:focus,
	.powder-card__btn:active {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
	}

	.powder-faq-section {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		padding: 1.35rem 0 1.15rem;
		background: #C59C5A;
		margin-top: 1.75rem;
		margin-bottom: 1.75rem;
	}

	.powder-faq-list {
		gap: 0.7rem;
	}

	.powder-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.6rem;
	}

	.powder-faq-btn {
		background: #FAF1E6;
	}

	.powder-faq-btn:hover {
		background: #FAF1E6;
	}

	.powder-faq-title {
		padding: 0;
		font-size: 1.1rem;
		margin-bottom: 0.85rem;
	}
}

@media (max-width: 640px) {
	.powder-section-title {
		font-size: 16px;
		margin-bottom: 1rem;
	}

	.powder-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Mobile only: swap types box 1 ↔ 3 (desktop order unchanged) */
	.powder-grid .powder-card:nth-child(1) {
		order: 3;
	}

	.powder-grid .powder-card:nth-child(2) {
		order: 2;
	}

	.powder-grid .powder-card:nth-child(3) {
		order: 1;
	}

	/*
	 * Mobile only — powder types cards (section after hero):
	 * Match native BG image ratio (365×284) so cover shows the full photo.
	 * Desktop / tablet rules above stay unchanged.
	 */
	.powder-card {
		aspect-ratio: 365 / 284;
		height: auto;
	}

	.powder-card__bg {
		object-fit: cover;
		object-position: center center;
	}

	/*
	 * Pin badge / title / CTA to one physical-left column (same pattern as liquid-types).
	 * LTR on the content shell so flex-start = left; RTL on children for Persian.
	 * Mobile only: stack higher + text/CTA color #7C5A46 (desktop unchanged).
	 */
	.powder-card__content {
		width: 58%;
		direction: ltr;
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
		padding-top: 1.45rem;
		padding-bottom: 0.5rem;
	}

	.powder-card__badge,
	.powder-card__title,
	.powder-card__btn {
		direction: rtl;
		align-self: flex-start;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		text-align: left;
		box-sizing: border-box;
	}

	.powder-card__title {
		text-align: left;
		color: #7C5A46;
	}

	/* Mobile only: no CTA fill; match title color */
	.powder-card__btn {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		border-radius: 6px !important;
		justify-content: flex-start;
		color: #7C5A46;
		border-color: #7C5A46;
	}

	.powder-card__btn:hover,
	.powder-card__btn:focus,
	.powder-card__btn:active {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
	}

	/* Keep ‹ pointing left (avoid RTL bidi mirroring) */
	.powder-card__arrow {
		display: inline-block;
		direction: ltr;
		unicode-bidi: isolate;
		transform: none;
	}

	.powder-faq-section {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		background: #C59C5A;
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		padding: 1.25rem 0 1.1rem;
	}

	.powder-faq-title {
		margin-bottom: 0.75rem;
		padding: 0;
		font-size: 1.05rem;
	}

	.powder-faq-list {
		gap: 0.7rem;
	}

	.powder-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.55rem;
	}

	.powder-faq-btn {
		padding: 0.65rem 0.8rem;
		font-size: clamp(0.66rem, 2.85vw, 0.78rem);
		gap: 0.4rem;
		min-height: 42px;
		border-radius: 12px;
		background: #FAF1E6;
		box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	}

	.powder-faq-btn:hover {
		background: #FAF1E6;
	}

	.powder-faq-btn__text {
		line-height: 1.3;
		white-space: nowrap;
		word-wrap: normal;
		overflow-wrap: normal;
	}

	.powder-faq-btn__icon,
	.powder-faq-btn__icon svg {
		width: 13px;
		height: 13px;
	}

	.powder-faq-body {
		padding: 0 1.05rem 0.1rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Stain remover page (مایع لکه‌بر لباس) — colors from softlan.com            */
/* -------------------------------------------------------------------------- */
.stain-page {
	background: #fff;
	--stain-aligned-width: var(--layout-width);
}

.stain-hero {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 0;
	overflow: hidden;
	background: #f4e6d7;
	line-height: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
}

.stain-hero__video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center center;
	max-width: 100%;
	vertical-align: top;
	border: 0;
	outline: 0;
}

.stain-hero__overlay {
	display: none;
}

.stain-summary {
	padding: 2rem 0 2.5rem;
	background: #FCF3EB;
	border: 0;
	box-shadow: none;
}

.stain-summary .container {
	/* Match .header-inner / logo track */
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
}

.stain-summary__heading {
	text-align: center;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	color: #7C5A3D;
	margin: 0 0 1.5rem;
}

.stain-product-card {
	display: grid;
	grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
	direction: ltr;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	background: #F7EAD8;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	height: 300px;
	min-height: 300px;
	overflow: hidden;
	align-items: stretch;
}

.stain-product-card__info {
	direction: rtl;
	text-align: center;
	height: 100%;
	min-height: 0;
	padding: 0 clamp(2.5rem, 7vw, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.stain-product-card__title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.375rem, 1.85vw, 1.625rem);
	font-weight: 800;
	color: #5C4634;
	line-height: 1.3;
}

.stain-product-card__subtitle {
	margin: 0;
	font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
	font-weight: 400;
	color: #7C5A3D;
	line-height: 1.65;
}

.stain-product-card__weight-label {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.4;
}

.stain-product-card__weights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 2.25rem;
}

.stain-weight-btn {
	appearance: none;
	background: #7B5D41;
	color: #fff;
	border: 1px solid #7B5D41;
	border-radius: 0;
	padding: 0.55rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.stain-weight-btn:hover,
.stain-weight-btn.btn-active,
.stain-weight-btn[aria-pressed="true"] {
	background: #5f432c;
	border-color: #5f432c;
	box-shadow: 0 4px 12px rgba(124, 90, 61, 0.25);
}

.stain-product-card__media {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: stretch;
	justify-content: flex-start; /* desktop: flush image to header logo (left) edge */
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: #F7EAD8;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.stain-product-card__media img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	object-position: left bottom;
	background: transparent;
	margin: 0;
	margin-left: 0;
	margin-right: auto;
	padding: 0;
}

/* Desktop-only: keep image on logo track; mobile rules below remain unchanged */
@media (min-width: 641px) {
	.stain-product-card__media {
		justify-content: flex-start;
		padding: 0;
	}

	.stain-product-card__media img {
		object-position: left bottom;
		margin-left: 0;
		margin-right: auto;
	}
}

.stain-details {
	padding: 2.75rem 0 3rem;
	background: #F7EAD8;
}

.stain-details__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 2rem 2.5rem;
	align-items: start;
	max-width: 1120px;
	width: min(92%, 1120px);
	margin-inline: auto;
}

.stain-details__desc p {
	margin: 0;
	font-size: clamp(0.9rem, 1.15vw, 1rem);
	line-height: 2.05;
	color: #7C5A3D;
	text-align: justify;
}

.stain-details__features-title {
	margin: 0 0 0.85rem;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 800;
	color: #805300;
}

.stain-features-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.stain-features-list li {
	position: relative;
	padding-inline-start: 1.1rem;
	font-size: 0.92rem;
	line-height: 1.85;
	color: #7C5A3D;
}

.stain-features-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #7C5A3D;
}

.stain-section-gap {
	height: clamp(1.25rem, 2.5vw, 1.75rem);
}

.stain-shop-band > .stain-section-gap:first-of-type {
	background: #FFFFFF;
}

.stain-shop-band > .stain-section-gap:last-of-type {
	background: #FCF3EB;
}

.stain-shop-band {
	margin: 0;
	padding: 0;
}

.stain-shop-band__inner {
	background: #F7EAD8;
}

.stain-shop {
	padding: 1.15rem 0 3.25rem;
	background: transparent;
}

.stain-shop[hidden],
.stain-shop:not(.active) {
	display: none;
}

.stain-shop.active {
	display: block;
}

.stain-shop .container {
	width: min(100% - clamp(2rem, 12vw, 220px), 1527px);
	max-width: 1527px;
}

.stain-shop__title {
	text-align: center;
	margin: 0 0 25px;
	font-size: clamp(1.15rem, 1.85vw, 1.42rem);
	font-weight: 800;
	color: #7C5A3D;
}

.stain-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 26px);
	width: var(--stain-aligned-width);
	max-width: var(--stain-aligned-width);
	margin-inline: auto;
}

.stain-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	gap: 0;
}

.stain-shop-card__logo {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

.stain-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	width: auto;
	max-width: 82%;
	object-fit: contain;
	margin-inline: auto;
}

.stain-shop-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 28px);
	max-width: 100%;
	text-align: center;
	min-height: 42px;
	padding: 0.5rem 0.65rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #7C5A3D;
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	line-height: 1.5;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.stain-shop-card__btn:hover {
	background: #F7EAD8;
	border-color: #C59C5A;
}

.stain-shop-card__btn--hint {
	cursor: pointer;
	color: #8a7364;
	white-space: nowrap;
}

.stain-faq {
	padding: 1.35rem 0 1.5rem;
	background: #C59C5A;
	margin-bottom: 2.75rem;
}

.stain-faq__box {
	max-width: 1040px;
	width: 100%;
	margin-inline: auto;
}

.stain-faq__title {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	font-weight: 700;
	color: #7C5A3D;
	text-align: center;
	margin: 0 0 0.85rem;
}

.stain-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.stain-faq-item {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: visible;
}

.stain-faq-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 1.15rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: #3a271b;
	background: #F7EAD8;
	border-radius: 10px;
	border: 1px solid rgba(124, 90, 61, 0.12);
	cursor: pointer;
	text-align: right;
	gap: 1rem;
	transition: background 0.2s ease;
}

.stain-faq-btn:hover {
	background: rgba(255, 255, 255, 0.85);
}

.stain-faq-btn__icon {
	display: inline-flex;
	color: #7C5A3D;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.stain-faq-btn[aria-expanded="true"] .stain-faq-btn__icon {
	transform: rotate(180deg);
}

.stain-faq-body {
	padding: 0;
	padding-inline-start: 1.15rem;
	background: transparent;
	text-align: right;
}

.stain-faq-body[hidden] {
	display: none;
}

.stain-faq-content {
	background: transparent;
}

.stain-faq-content p {
	margin: 0;
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	font-weight: 600;
	line-height: 1.85;
	color: #000;
	text-align: right;
	text-shadow: none;
}

@media (max-width: 960px) {
	.stain-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stain-details__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.stain-product-card {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	/* Section-2 box/image align with .header-inner / logo track */
	.stain-summary {
		padding-inline: 0;
	}

	.stain-summary .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.stain-product-card {
		display: flex;
		flex-direction: column;
		direction: rtl;
		text-align: center;
		padding: 0;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
		height: auto;
		min-height: 0;
		background: #F7EAD8;
	}

	.stain-product-card__info {
		text-align: center;
		order: 2;
		height: auto;
		min-height: 0;
		padding: 1.25rem 1rem 1.5rem;
		align-items: center;
	}

	.stain-product-card__media {
		position: relative;
		inset: auto;
		order: 1;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		background: #F7EAD8;
		padding: 0;
		box-sizing: border-box;
		overflow: visible;
	}

	.stain-product-card__media img {
		position: static;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: center bottom;
		align-self: flex-end;
		margin: 0 auto;
	}

	.stain-product-card__weights {
		justify-content: center;
	}

	/* Shop boxes align with .header-inner / logo track (mobile only) */
	.stain-shop .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.stain-shop__grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
	}

	.stain-shop__title {
		font-size: 1.05rem;
		margin-bottom: 18px;
	}

	.stain-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	.stain-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(14px, 2vw, 22px);
		transform: translateY(-18px);
	}

	.stain-shop-card__logo img {
		max-height: clamp(100px, 28vw, 140px);
		max-width: 90%;
	}

	.stain-faq {
		padding: 1.15rem 0 1.25rem;
		margin-bottom: 2rem;
	}

	.stain-faq-btn {
		padding: 0.65rem 1rem;
		font-size: 0.82rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Softener page (نرم‌کننده لباس) — colors/fonts from softlan.com + mockup BGs  */
/* -------------------------------------------------------------------------- */
.softener-page {
	background: #FCF3EB;
	--softener-aligned-width: var(--layout-width);
	--softener-grid-gap: clamp(0.9rem, 1.6vw, 1.55rem);
	--softener-brown: #7C5A3D;
	--softener-cream: #FCF3EB;
	--softener-peach: #F7EAD8;
	--softener-gold: #C59C5A;
	--softener-rosegold: #C64E71;
	--softener-gold-dark: #805B31;
}

.softener-page .softener-types .container,
.softener-page .softener-rec .container,
.softener-page .softener-about .container,
.softener-page .softener-faq .container {
	width: var(--softener-aligned-width);
	max-width: var(--softener-aligned-width);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

.softener-page.site-main {
	overflow-x: visible;
}

.softener-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: clamp(420px, 52vw, 640px);
	min-height: 400px;
	overflow: hidden;
	background: #F7EAD8;
}

.softener-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

.softener-hero__overlay {
	display: none;
}

/* Section 2 — three products */
.softener-types {
	padding: 2.75rem 0 3.5rem;
	background: #FCF3EB;
}

.softener-types__title {
	font-size: 18px;
	font-weight: 700;
	color: #7C5A3D;
	text-align: center;
	margin: 0 0 2.25rem;
}

.softener-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	justify-items: stretch;
	gap: var(--softener-grid-gap);
	width: 100%;
	direction: ltr; /* desktop order via card order below */
}

.softener-card {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 484 / 695;
	background-color: #F5ECE1;
	box-shadow: none;
	transition: transform 0.35s var(--ease), opacity 0.2s ease;
}

.softener-card:hover {
	transform: translateY(-3px);
	opacity: 0.96;
}

.softener-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

/* Overlay cards (rosegold / nabati) — full product photo + HTML text overlay (left), bottle shifted right */
.softener-card--rosegold .softener-card__img,
.softener-card--nabati .softener-card__img,
.softener-card--gold .softener-card__img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 92% center;
	background-color: #F5ECE1;
}

.softener-card__overlay {
	position: absolute;
	z-index: 1;
	top: clamp(1.1rem, 4.2%, 1.85rem);
	left: clamp(0.85rem, 5.5%, 1.55rem);
	right: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.55rem, 1.5vw, 0.85rem);
	max-width: 52%;
	pointer-events: none;
	direction: rtl;
	text-align: right;
}

.softener-card__badge {
	display: inline-block;
	padding: 0.22em 0.7em;
	border-radius: 0.35em;
	background: #C64E71;
	color: #fff;
	font-size: clamp(0.62rem, 1.55vw, 0.78rem);
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
}

.softener-card__title {
	display: block;
	margin-top: 0.35rem;
	color: #7E5D3F;
	font-size: clamp(1.05rem, 2.7vw, 1.45rem);
	font-weight: 700;
	line-height: 1.55;
}

/* Overlay card titles: left-align both lines (نرم‌کننده / حوله و لباس) */
.softener-card--rosegold .softener-card__title,
.softener-card--nabati .softener-card__title,
.softener-card--gold .softener-card__title {
	width: max-content;
	max-width: 100%;
	text-align: left;
}

.softener-card__series {
	display: block;
	color: #C64E71;
	font-size: clamp(0.95rem, 2.35vw, 1.2rem);
	font-weight: 400;
	line-height: 1.35;
}

/* Nabati accent (badge + series) */
.softener-card--nabati .softener-card__badge {
	background: #C59C5A;
}

.softener-card--nabati .softener-card__series {
	color: #C59C5A;
}

/* Gold accent (badge + series) */
.softener-card--gold .softener-card__badge {
	background: #805B31;
}

.softener-card--gold .softener-card__series {
	color: #805B31;
}

.softener-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	margin-top: clamp(0.35rem, 1.2vw, 0.65rem);
	padding: 0.38em 0.95em;
	border: 1px solid #7E5D3F;
	border-radius: 999px;
	background: #fff;
	color: #7E5D3F;
	font-size: clamp(0.68rem, 1.6vw, 0.82rem);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.softener-card--rosegold:hover .softener-card__cta,
.softener-card--nabati:hover .softener-card__cta,
.softener-card--gold:hover .softener-card__cta {
	background: #7E5D3F;
	color: #fff;
	border-color: #7E5D3F;
}

@media (max-width: 960px) {
	/* Mobile/tablet: image fills box — no cream letterbox bars */
	.softener-card--rosegold,
	.softener-card--nabati,
	.softener-card--gold {
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__img,
	.softener-card--nabati .softener-card__img,
	.softener-card--gold .softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: transparent;
	}

	.softener-card__overlay {
		top: clamp(0.85rem, 3.8%, 1.25rem);
		left: clamp(0.7rem, 4.5%, 1.1rem);
		max-width: 54%;
		gap: 0.28rem;
	}

	.softener-card__title {
		font-size: clamp(0.95rem, 3.4vw, 1.2rem);
	}

	.softener-card__series {
		font-size: clamp(0.85rem, 3vw, 1.05rem);
	}
}

@media (max-width: 640px) {
	.softener-card--rosegold,
	.softener-card--nabati,
	.softener-card--gold {
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__img,
	.softener-card--nabati .softener-card__img,
	.softener-card--gold .softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: transparent;
	}

	.softener-card__overlay {
		top: clamp(1rem, 4%, 1.5rem);
		left: clamp(0.9rem, 5%, 1.35rem);
		max-width: 50%;
	}

	.softener-card__badge {
		font-size: clamp(0.7rem, 2.8vw, 0.85rem);
	}

	/*
	 * Mobile only: pin badge «حاوی اسانس کپسوله» to the same physical-left
	 * column as title / series / CTA. Use LTR on the overlay for layout so
	 * flex-start is unambiguously left; keep RTL on children for Persian text.
	 * Desktop (min-width: 961px) is unchanged.
	 */
	.softener-card--rosegold .softener-card__overlay,
	.softener-card--nabati .softener-card__overlay,
	.softener-card--gold .softener-card__overlay {
		direction: ltr;
		align-items: flex-start;
		text-align: left;
	}

	.softener-card--rosegold .softener-card__badge,
	.softener-card--nabati .softener-card__badge,
	.softener-card--gold .softener-card__badge,
	.softener-card--rosegold .softener-card__title,
	.softener-card--nabati .softener-card__title,
	.softener-card--gold .softener-card__title,
	.softener-card--rosegold .softener-card__series,
	.softener-card--nabati .softener-card__series,
	.softener-card--gold .softener-card__series,
	.softener-card--rosegold .softener-card__cta,
	.softener-card--nabati .softener-card__cta,
	.softener-card--gold .softener-card__cta {
		direction: rtl;
		align-self: flex-start;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		text-align: left;
		box-sizing: border-box;
	}

	/* Slightly smaller «نرم‌کننده حوله و لباس» on mobile */
	.softener-card__title {
		font-size: clamp(0.98rem, 4.4vw, 1.22rem);
		/* Mobile: more space below badge «حاوی اسانس کپسوله» */
		margin-top: 0.85rem;
	}

	.softener-card--rosegold .softener-card__title,
	.softener-card--nabati .softener-card__title,
	.softener-card--gold .softener-card__title {
		text-align: left;
	}

	.softener-card__series {
		font-size: clamp(1rem, 4.4vw, 1.2rem);
		/* Mobile: space series (طلایی / رُزگلد / نباتی) away from title */
		margin-top: 0.75rem;
	}

	/* Series was full-width + text-align:right — pull into same left column as badge */
	.softener-card--rosegold .softener-card__series,
	.softener-card--nabati .softener-card__series,
	.softener-card--gold .softener-card__series {
		width: max-content;
		max-width: 100%;
		text-align: left;
	}

	.softener-card__cta {
		font-size: clamp(0.75rem, 3.2vw, 0.9rem);
		padding: 0.42em 1em;
		background: transparent;
		/* Mobile: more space under series label (طلایی / رُزگلد / نباتی) */
		margin-top: 0.95rem;
		/* Mobile: less pill-like than base 999px — match desktop softener CTA */
		border-radius: 8px;
	}

	.softener-card--rosegold:hover .softener-card__cta,
	.softener-card--nabati:hover .softener-card__cta,
	.softener-card--gold:hover .softener-card__cta {
		background: transparent;
		color: #7E5D3F;
		border-color: #7E5D3F;
	}
}

/* Desktop only: equal boxes + LTR order طلایی | نباتی | رُزگلد */
@media (min-width: 961px) {
	.softener-page {
		--softener-grid-gap: clamp(0.9rem, 1.6vw, 1.55rem);
	}

	.softener-grid {
		align-items: stretch;
		grid-auto-rows: 1fr;
	}

	.softener-card {
		height: 100%;
		min-height: 0;
		aspect-ratio: 484 / 695;
		background-color: #F5ECE1;
	}

	.softener-card__img {
		object-fit: cover;
		object-position: center center;
	}

	.softener-card--gold { order: 1; }
	.softener-card--nabati { order: 2; }
	.softener-card--rosegold { order: 3; }

	/* Overlay boxes (gold left, nabati middle, rosegold right): image bg + HTML text */
	.softener-card--rosegold,
	.softener-card--nabati,
	.softener-card--gold {
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__img,
	.softener-card--nabati .softener-card__img,
	.softener-card--gold .softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__overlay,
	.softener-card--nabati .softener-card__overlay,
	.softener-card--gold .softener-card__overlay {
		left: clamp(0.55rem, 4.2%, 1.15rem);
		/* Desktop: enable hit-testing so overlay copy can be selected */
		pointer-events: auto;
		user-select: text;
		-webkit-user-select: text;
	}

	/* Desktop: allow selecting overlay copy; keep CTA clickable */
	.softener-card--rosegold,
	.softener-card--nabati,
	.softener-card--gold {
		-webkit-user-drag: none;
		user-select: text;
		-webkit-user-select: text;
	}

	.softener-card--rosegold .softener-card__badge,
	.softener-card--rosegold .softener-card__title,
	.softener-card--rosegold .softener-card__series,
	.softener-card--nabati .softener-card__badge,
	.softener-card--nabati .softener-card__title,
	.softener-card--nabati .softener-card__series,
	.softener-card--gold .softener-card__badge,
	.softener-card--gold .softener-card__title,
	.softener-card--gold .softener-card__series {
		pointer-events: auto;
		cursor: text;
		user-select: text;
		-webkit-user-select: text;
	}

	/* Avoid hover lift stealing text selection on the overlay */
	.softener-card--rosegold:hover,
	.softener-card--nabati:hover,
	.softener-card--gold:hover {
		transform: none;
	}

	.softener-card--rosegold .softener-card__title,
	.softener-card--nabati .softener-card__title,
	.softener-card--gold .softener-card__title {
		/* Desktop: slightly smaller «نرم‌کننده حوله و لباس» */
		font-size: clamp(0.84rem, 2.05vw, 1.1rem);
		/* چپ‌چین: دو خط «نرم‌کننده» / «حوله و لباس» از لبه چپ */
		align-self: flex-end;
		width: max-content;
		max-width: 100%;
		text-align: left;
		transform: none;
		/* More space between the two lines + clear badge above */
		line-height: 1.55;
		margin-top: 0.55rem;
		margin-bottom: 0.35rem;
	}

	.softener-card--rosegold .softener-card__series,
	.softener-card--nabati .softener-card__series,
	.softener-card--gold .softener-card__series {
		/* Desktop: slightly larger series label */
		font-size: clamp(1.05rem, 2.55vw, 1.38rem);
	}

	.softener-card--rosegold .softener-card__cta,
	.softener-card--nabati .softener-card__cta,
	.softener-card--gold .softener-card__cta {
		pointer-events: auto;
		background: transparent;
		border-radius: 8px;
		/* Desktop: slightly smaller button */
		font-size: clamp(0.62rem, 1.4vw, 0.74rem);
		padding: 0.3em 0.8em;
	}

	.softener-card--rosegold:hover .softener-card__cta,
	.softener-card--nabati:hover .softener-card__cta,
	.softener-card--gold:hover .softener-card__cta {
		background: transparent;
		color: #7E5D3F;
		border-color: #7E5D3F;
	}

	.softener-card--rosegold .softener-card__cta:hover,
	.softener-card--nabati .softener-card__cta:hover,
	.softener-card--gold .softener-card__cta:hover {
		background: #7E5D3F;
		color: #fff;
		border-color: #7E5D3F;
	}
}

/* Section 3 — recommendations + about on #F7EAD8 */
.softener-rec {
	padding: 3.5rem 0 2rem;
	background: #F7EAD8;
	margin-bottom: 0;
}

.softener-rec__header {
	text-align: center;
	margin-bottom: 2.25rem;
}

.softener-rec__title {
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	color: #7C5A3D;
	margin: 0 0 0.4rem;
}

.softener-rec__subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 2rem;
	color: #7C5A3D;
	margin: 0;
}

.softener-rec__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--softener-grid-gap);
	width: 100%;
	direction: ltr; /* desktop order via softener-rec-card--* below */
}

.softener-rec-card {
	min-width: 0;
	height: 100%;
	background: #FCF3EB;
	border-radius: 0;
	padding: clamp(1rem, 1.8vw, 1.35rem) clamp(0.9rem, 1.6vw, 1.25rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	min-height: 100%;
	gap: clamp(0.85rem, 1.4vw, 1.15rem);
	box-sizing: border-box;
	box-shadow: none;
	border: none;
}

.softener-rec-card__text {
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	color: #7C5A3D;
	margin: 0;
	max-width: 100%;
}

.softener-rec-card__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: auto;
	gap: 0.65rem;
}

.softener-rec-card__label {
	font-size: 14px;
	font-weight: 400;
	line-height: 2rem;
	color: #7C5A3D;
}

.softener-rec-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 7rem;
	padding: 10px 30px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 500;
	color: #FFFFFF;
}

.softener-rec-card__tag--rosegold {
	background: #C64E71;
}

.softener-rec-card__tag--nabati {
	background: #C59C5A;
}

.softener-rec-card__tag--gold {
	background: #805B31;
}

/* Softener rec cards — desktop only: compact height, 2-line body text (mockup) */
@media (min-width: 961px) {
	/* Swap left/right vs prior LTR: طلایی | نباتی | رُزگلد */
	.softener-rec-card--gold { order: 1; }
	.softener-rec-card--nabati { order: 2; }
	.softener-rec-card--rosegold { order: 3; }

	.softener-rec__header {
		margin-bottom: 1.5rem;
	}

	.softener-rec-card {
		height: auto;
		min-height: 0;
		padding: 1.15rem 1rem 1.1rem;
		justify-content: center;
		gap: 0.55rem;
		user-select: text;
		-webkit-user-select: text;
	}

	.softener-rec-card__text {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		max-width: 100%;
		user-select: text;
		-webkit-user-select: text;
	}

	.softener-rec-card__action {
		margin-top: 0;
		gap: 0.45rem;
	}

	.softener-rec-card__label {
		font-size: 13px;
		line-height: 1.4;
		user-select: text;
		-webkit-user-select: text;
	}

	.softener-rec-card__tag {
		padding: 8px 26px;
		font-size: 14px;
		min-width: 6.5rem;
		user-select: text;
		-webkit-user-select: text;
	}
}

/* Legacy nested about (kept for safety) */
.softener-rec__about {
	display: none;
}

.softener-about {
	padding: 1.35rem 0 2.25rem;
	background: #F7EAD8;
}

.softener-about__inner {
	width: 100%;
	text-align: center;
}

.softener-about__title {
	font-size: 22px;
	font-weight: 500;
	color: #7C5A3D;
	margin: 0 0 1.25rem;
}

.softener-about__text {
	width: 100%;
}

.softener-about__text p {
	font-size: 16px;
	font-weight: 400;
	line-height: 2.2rem;
	color: #7C5A3D;
	margin: 0;
}

.softener-about__text p + p {
	margin-top: 0.25rem;
}

/* Section 4 — FAQ: full-bleed gold band; white question bars; answer on gold (mockup) */
.softener-faq {
	width: 100%;
	max-width: none;
	padding: 1.5rem 0 1.25rem;
	background: #C59C5A;
	margin-top: 2.25rem; /* فاصله بالا #FCF3EB (از .softener-page) */
	margin-bottom: 2.25rem; /* فاصله پایین #FCF3EB قبل فوتر */
	box-sizing: border-box;
}

.softener-faq__box {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}

.softener-faq__title {
	font-size: clamp(1.1rem, 1.55vw, 1.3rem);
	font-weight: 700;
	color: #5D4037;
	text-align: center;
	margin: 0 0 0.95rem;
	background: transparent;
	padding: 0;
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
}

.softener-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.softener-faq-item {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width: 100%;
	background: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	overflow: visible;
}

.softener-faq-btn {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.25rem;
	min-height: 48px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #5D4037;
	background: #FAF1E6;
	border-radius: 14px;
	border: none;
	box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	cursor: pointer;
	text-align: right;
	direction: rtl;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.softener-faq-btn:hover {
	background: #FAF1E6;
	box-shadow: 0 3px 12px rgba(74, 52, 40, 0.14);
}

.softener-faq-btn__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
}

.softener-faq-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5D4037;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	transition: transform 0.3s ease;
}

.softener-faq-btn__icon svg {
	width: 15px;
	height: 15px;
}

.softener-faq-btn[aria-expanded="true"] .softener-faq-btn__icon {
	transform: rotate(180deg);
}

.softener-faq-body {
	padding: 0 1.25rem 0.15rem;
	background: transparent;
	text-align: right;
}

.softener-faq-body[hidden] {
	display: none;
}

.softener-faq-content {
	background: transparent;
}

.softener-faq-content p {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.9;
	color: #3a271b;
	text-align: right;
	text-shadow: none;
}

/* Softener FAQ — desktop open state (cream bars; answer on gold; mobile unchanged) */
@media (min-width: 961px) {
	.softener-faq__list {
		gap: 0.85rem;
	}

	.softener-faq-item {
		background: transparent;
		border-radius: 0;
		border: none;
		box-shadow: none;
		overflow: visible;
		gap: 0.8rem;
	}

	.softener-faq-btn {
		background: #F7EAD8;
		border-radius: 12px;
		box-shadow: none;
		min-height: 52px;
		padding: 0.85rem 1.4rem;
		font-size: 0.95rem;
	}

	.softener-faq-btn:hover {
		background: #F7EAD8;
		box-shadow: none;
	}

	.softener-faq-btn__icon {
		color: #2a2a2a;
	}

	.softener-faq-body {
		padding: 0 1.4rem 0.2rem;
		background: transparent;
	}

	.softener-faq-content {
		background: transparent;
	}

	.softener-faq-content p {
		background: transparent;
		color: #242424;
		font-size: 0.95rem;
		line-height: 1.95;
	}
}

@media (max-width: 960px) {
	.softener-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
		align-items: stretch;
	}

	.softener-types {
		padding: 1.75rem 0 2rem;
	}

	.softener-types__title {
		margin-bottom: 0.85rem;
	}

	.softener-card {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		height: auto;
		margin-inline: 0;
		aspect-ratio: 484 / 695;
	}

	.softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: #F5ECE1;
	}

	.softener-card--rosegold {
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: transparent;
	}

	/* Center the orphan third card so it matches sibling width */
	.softener-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: calc((100% - 0.65rem) / 2);
		justify-self: center;
	}

	.softener-rec__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.softener-rec-card {
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 1.35rem 1.15rem;
	}

	.softener-rec-card__text {
		font-size: 16px;
	}

	.softener-rec-card__tag {
		font-size: 12px;
	}

	.softener-rec {
		padding: 2.5rem 0 2.75rem;
		background: #F7EAD8;
	}

	.softener-rec__header {
		margin-bottom: 1.5rem;
	}

	.softener-about {
		padding: 2.25rem 0 1.75rem;
		background: #F7EAD8;
	}

	.softener-faq {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		padding: 1.35rem 0 1.15rem;
		background: #C59C5A;
		margin-top: 1.75rem;
		margin-bottom: 1.75rem;
	}

	.softener-faq__list {
		gap: 0.7rem;
	}

	.softener-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.6rem;
	}

	.softener-faq-btn {
		background: #FAF1E6;
	}

	.softener-faq-btn:hover {
		background: #FAF1E6;
	}

	.softener-faq__title {
		padding: 0;
		font-size: 1.1rem;
		margin-bottom: 0.85rem;
	}

	.softener-hero {
		min-height: 360px;
		height: clamp(360px, 55vw, 480px);
	}
}

@media (max-width: 640px) {
	.softener-grid {
		grid-template-columns: 1fr;
		/* Mobile: slightly more space between section-2 product boxes */
		gap: 1.45rem;
	}

	.softener-card {
		width: 100%;
		max-width: none;
		height: auto;
		margin-inline: 0;
		aspect-ratio: 484 / 695;
	}

	.softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: #F5ECE1;
	}

	.softener-card--rosegold {
		background-color: transparent;
	}

	.softener-card--rosegold .softener-card__img {
		object-fit: cover;
		object-position: center center;
		background-color: transparent;
	}

	.softener-card:last-child:nth-child(odd) {
		grid-column: auto;
		width: 100%;
		justify-self: stretch;
	}

	.softener-hero {
		min-height: 280px;
		height: 300px;
	}

	.softener-types {
		background: #FCF3EB;
		padding: 1.15rem 0 1.35rem;
	}

	.softener-types__title {
		font-size: 16px;
		margin-bottom: 0.55rem;
	}

	.softener-rec {
		margin-bottom: 0;
		padding: 2rem 0 2.25rem;
		background: #F7EAD8;
	}

	.softener-rec__title {
		font-size: 16px;
	}

	.softener-about {
		padding: 1.75rem 0 1.5rem;
		background: #F7EAD8;
	}

	.softener-faq {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-radius: 0;
		background: #C59C5A;
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		padding: 1.25rem 0 1.1rem;
	}

	.softener-faq__title {
		margin-bottom: 0.75rem;
		padding: 0;
		font-size: 1.05rem;
	}

	.softener-faq__list {
		gap: 0.7rem;
	}

	.softener-faq-item {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		gap: 0.55rem;
	}

	.softener-faq-btn {
		padding: 0.65rem 0.8rem;
		font-size: clamp(0.66rem, 2.85vw, 0.78rem);
		gap: 0.4rem;
		min-height: 42px;
		border-radius: 12px;
		background: #FAF1E6;
		box-shadow: 0 2px 10px rgba(74, 52, 40, 0.1);
	}

	.softener-faq-btn:hover {
		background: #FAF1E6;
	}

	.softener-faq-btn__text {
		line-height: 1.3;
		white-space: nowrap;
		word-wrap: normal;
		overflow-wrap: normal;
	}

	.softener-faq-btn__icon,
	.softener-faq-btn__icon svg {
		width: 13px;
		height: 13px;
	}

	.softener-faq-body {
		padding: 0 1.05rem 0.1rem;
	}
}


/* -------------------------------------------------------------------------- */
.gold-page {
	background: #fff;
}

.gold-hero {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 0;
	overflow: hidden;
	background: #f4e6d7;
	line-height: 0;
	border: 0;
	border-bottom: 1px solid #C9A87C;
	outline: 0;
	box-shadow: none;
}

.gold-hero__video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center center;
	max-width: 100%;
	vertical-align: top;
	border: 0;
	outline: 0;
}

.gold-hero__overlay {
	display: none;
}

.gold-summary {
	padding: 3rem 0 3.25rem;
	background: #F7EAD8;
	border: 0;
	border-top: 1px solid #C9A87C;
	box-shadow: none;
}

.gold-summary__heading {
	text-align: center;
	font-size: 1.05rem;
	font-weight: 600;
	color: #805300;
	margin: 0 0 2rem;
	line-height: 1.5;
}

.gold-product-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	align-items: stretch;
	width: var(--layout-width);
	max-width: var(--layout-width);
	margin-inline: auto;
	background: #FCF3EB;
	border: none;
	border-top: 1px solid #C9A87C;
	border-bottom: 1px solid #C9A87C;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	height: 284px;
	min-height: 284px;
	max-height: 284px;
}

.gold-product-card__info {
	text-align: center;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.gold-product-card__sub {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.45;
}

.gold-product-card__name {
	margin: 0 0 1.65rem;
	font-size: 2.65rem;
	font-weight: 700;
	color: #805B31;
	line-height: 1.1;
}

.gold-product-card__weight-label {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.4;
}

.gold-product-card__weights {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	justify-content: center;
}

.gold-weight-btn {
	appearance: none;
	background: #FCF3EB;
	color: #7C5A3D;
	border: 1px solid #7C5A3D;
	border-radius: 3px;
	padding: 0.5rem 1.35rem;
	font-size: 0.88rem;
	font-weight: 700;
	min-width: 6.75rem;
	text-align: center;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.gold-weight-btn:hover,
.gold-weight-btn.btn-active,
.gold-weight-btn[aria-pressed="true"] {
	background: #7C5A3D;
	color: #FCF3EB;
	border-color: #7C5A3D;
	box-shadow: 0 4px 12px rgba(124, 90, 61, 0.25);
}

.gold-product-card__media {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	height: 100%;
	overflow: hidden;
	background: #FCF3EB;
	padding: 0;
	padding-left: clamp(1.75rem, 3.5vw, 2.75rem);
}

.gold-product-card__media img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

.gold-details {
	padding: 2.75rem 0 3rem;
	background: #F2E7D5;
}

.gold-details__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 2rem 2.5rem;
	align-items: start;
	max-width: 1120px;
	width: min(92%, 1120px);
	margin-inline: auto;
}

.gold-details__desc p {
	margin: 0;
	font-size: clamp(0.9rem, 1.15vw, 1rem);
	line-height: 2.05;
	color: #6B665C;
	text-align: right;
}

.gold-details__features-title {
	margin: 0 0 0.85rem;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 800;
	color: #9B7A2D;
	text-align: right;
}

.gold-features-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.gold-features-list li {
	position: relative;
	padding-inline-start: 1.1rem;
	font-size: 0.92rem;
	line-height: 1.85;
	color: #6B665C;
	text-align: right;
}

.gold-features-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6B665C;
}

.gold-section-gap {
	height: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #F2DDCB;
}

.gold-section-gap--white {
	background: #FFFFFF;
}

.gold-shop-band {
	margin: 0;
	padding: 0;
}

.gold-shop-band__inner {
	background: #F8EBE0;
}

.gold-shop {
	padding: 2.75rem 0 3.25rem;
	background: transparent;
}

.gold-shop[hidden],
.gold-shop:not(.active) {
	display: none;
}

.gold-shop.active {
	display: block;
}

.gold-shop__title {
	text-align: center;
	margin: 0 0 1.75rem;
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	font-weight: 800;
	color: #7C5A3D;
}

.gold-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	max-width: 1120px;
	width: min(92%, 1120px);
	margin-inline: auto;
}

.gold-shop-card {
	background: #FFFAF5;
	border: 1px solid #E8D1B1;
	border-radius: 12px;
	padding: 1.15rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	box-shadow: 0 4px 14px rgba(124, 90, 61, 0.05);
	min-height: 100%;
}

.gold-shop-card__logo {
	width: 100%;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gold-shop-card__logo img {
	max-height: 64px;
	width: auto;
	max-width: 85%;
	object-fit: contain;
	margin-inline: auto;
}

.gold-shop-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	padding: 0.65rem 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #7C5A3D;
	background: #FFFAF5;
	border: 1px solid #E8D1B1;
	border-radius: 8px;
	line-height: 1.5;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.gold-shop-card__btn:hover {
	background: #F7EAD8;
	border-color: #C59C5A;
}

.gold-shop-card__btn--hint {
	cursor: pointer;
	color: #8a7364;
}

@media (max-width: 960px) {
	.gold-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gold-details__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

}

@media (max-width: 640px) {
	.gold-summary {
		padding: 2rem 0 2.25rem;
	}

	.gold-summary__heading {
		margin-bottom: 1.25rem;
		font-size: 0.95rem;
	}

	.gold-product-card {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 0;
		height: auto;
		min-height: 0;
		max-height: none;
		gap: 0;
	}

	.gold-product-card__info {
		text-align: center;
		order: 2;
		padding: 1.25rem 1rem 1.5rem;
		align-items: center;
		height: auto;
	}

	.gold-product-card__name {
		font-size: 2.15rem;
		margin-bottom: 1.25rem;
	}

	.gold-product-card__media {
		order: 1;
		height: 240px;
		min-height: 240px;
		padding-left: 0;
		justify-content: center;
	}

	.gold-product-card__media img {
		height: 100%;
		object-position: center center;
	}

	.gold-product-card__weights {
		justify-content: center;
	}

	.gold-shop__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- */
/* Liquid Rose Gold product page — colors/content from softlan.com            */
/* -------------------------------------------------------------------------- */
.liquid-rosegold-page {
	background: #fff;
}

.liquid-rosegold-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f4e6d7;
	line-height: 0;
}

.liquid-rosegold-hero__video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center center;
	max-width: 100%;
	vertical-align: top;
}

.liquid-rosegold-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(244, 230, 215, 0.72) 0%,
		rgba(244, 230, 215, 0.35) 42%,
		rgba(244, 230, 215, 0.05) 100%
	);
}

.liquid-rosegold-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* Same track as .header-inner / logo */
	width: var(--layout-width);
	margin-inline: auto;
	padding-block: calc(var(--header-h) + 1.75rem) 2rem;
	line-height: 1.5;
}

html[dir="rtl"] .liquid-rosegold-hero__inner {
	justify-content: flex-end;
}

.liquid-rosegold-hero__content {
	width: min(100%, 360px);
	text-align: left;
	color: #7C5A3D;
}

.liquid-rosegold-hero__eyebrow {
	margin: 0 0 0.4rem;
	font-size: clamp(0.7rem, 0.9vw, 0.82rem);
	font-weight: 500;
	color: #7C5A3D;
	line-height: 1.5;
}

.liquid-rosegold-hero__title {
	margin: 0 0 0.65rem;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	font-weight: 800;
	line-height: 1.2;
	color: #7C5A3D;
	letter-spacing: -0.02em;
}

.liquid-rosegold-hero__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.liquid-rosegold-hero__bullets li {
	font-size: clamp(0.68rem, 0.85vw, 0.78rem);
	line-height: 1.65;
	color: #7C5A3D;
}

/* Liquid Rose Gold — section 2 product summary (mockup) */
main.gold-page.liquid-rosegold-page {
	overflow: visible;
}

main.gold-page.liquid-rosegold-page .gold-summary {
	padding: 2rem 0 0;
	background: #FCF3EB;
	border: 0;
	overflow: visible;
}

main.gold-page.liquid-rosegold-page .gold-summary__heading {
	margin-bottom: 0.75rem;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.5;
}

main.gold-page.liquid-rosegold-page .gold-summary__band {
	background: #FCF3EB;
	padding: 0.75rem 0 1.25rem;
	margin-top: 0.5rem;
	overflow: visible;
}

main.gold-page.liquid-rosegold-page .liquid-rosegold-products {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	width: 100%;
	max-width: 100%;
}

main.gold-page.liquid-rosegold-page .gold-product-card {
	background: #F7EAD8;
	border: 0;
	width: 100%;
	max-width: 100%;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
	height: auto;
	min-height: 284px;
	max-height: none;
	overflow: visible;
}

main.gold-page.liquid-rosegold-page .gold-product-card__info {
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	height: 100%;
}

main.gold-page.liquid-rosegold-page .gold-product-card__sub {
	margin: 0 0 0.7rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #7C5A3D;
}

main.gold-page.liquid-rosegold-page .gold-product-card__name {
	margin: 0 0 1.05rem;
	font-size: clamp(1.1rem, 1.9vw, 1.32rem);
	font-weight: 700;
	color: #805B31;
	line-height: 1.15;
}

main.gold-page.liquid-rosegold-page .gold-product-card__variant {
	margin: 0 0 1.9rem;
	font-size: clamp(0.85rem, 1.05vw, 0.95rem);
	font-weight: 500;
	color: #7C5A3D;
	line-height: 1.55;
}

main.gold-page.liquid-rosegold-page .gold-product-card__weight-label {
	margin: 0 0 1.15rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #7C5A3D;
}

main.gold-page.liquid-rosegold-page .gold-product-card__media {
	background: #F7EAD8;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 0;
	min-height: 284px;
	height: 100%;
}

html[dir="rtl"] main.gold-page.liquid-rosegold-page .gold-product-card__media {
	justify-content: flex-end;
}

main.gold-page.liquid-rosegold-page .gold-product-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-height: 300px;
	max-width: none;
	object-fit: contain;
	object-position: left bottom;
	flex-shrink: 0;
	align-self: flex-end;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
}

main.gold-page.liquid-rosegold-page .gold-product-card__weights {
	justify-content: center;
	width: 100%;
	max-width: min(100%, 36rem);
	gap: 0;
}

main.gold-page.liquid-rosegold-page .gold-weight-btn {
	background: #7C5A3D;
	color: #FCF3EB;
	border-color: #7C5A3D;
	border-radius: 0;
	font-size: 0.8rem;
}

main.gold-page.liquid-rosegold-page .gold-weight-btn:hover,
main.gold-page.liquid-rosegold-page .gold-weight-btn.btn-active,
main.gold-page.liquid-rosegold-page .gold-weight-btn[aria-pressed="true"] {
	background: #7C5A3D;
	color: #FCF3EB;
	border-color: #7C5A3D;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 960px) {
	.liquid-rosegold-hero__content {
		width: 100%;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

@media (max-width: 640px) {
	.liquid-rosegold-hero__inner {
		padding-block: calc(var(--header-h, 84px) + 0.35rem) 0.85rem;
		padding-inline: 0;
	}

	.liquid-rosegold-hero__content {
		width: 100%;
		max-width: 100%;
	}

	.liquid-rosegold-hero__title {
		font-size: 1.2rem;
		white-space: normal;
		overflow-wrap: break-word;
	}

	.liquid-rosegold-hero__eyebrow {
		font-size: 0.68rem;
		white-space: normal;
		overflow-wrap: break-word;
	}

	.liquid-rosegold-hero__bullets li {
		font-size: 0.65rem;
		line-height: 1.55;
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* Section 2 mobile base (shared with liquid-hd): stack cards */
	main.gold-page.liquid-rosegold-page .gold-summary__band {
		padding-inline: 0;
		width: 100%;
		max-width: none;
	}

	main.gold-page.liquid-rosegold-page .gold-summary__band .container {
		width: 100%;
		max-width: none;
		padding-inline: 0;
		margin-inline: 0;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		min-height: 0;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__info {
		align-items: center;
		text-align: center;
		padding: 1.25rem calc((100% - var(--layout-width)) / 2) 1.5rem;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__media {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 0;
		overflow: visible;
	}

	html[dir="rtl"] main.gold-page.liquid-rosegold-page .gold-product-card__media {
		justify-content: flex-end;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__media img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: left bottom;
		align-self: flex-end;
		margin: 0;
		margin-right: auto;
		margin-bottom: 0;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__weights {
		justify-content: center;
		max-width: min(100%, 22rem);
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__name {
		font-size: 1.15rem;
	}

	/* Liquid Rose Gold + Liquid HD/Baby — boxes + images align with .header-inner / logo track */
	main.gold-page.liquid-rosegold-page .gold-summary__band .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__info {
		padding: 1.25rem 1rem 1.5rem;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__media {
		justify-content: center;
		width: 100%;
	}

	html[dir="rtl"] main.gold-page.liquid-rosegold-page .gold-product-card__media {
		justify-content: center;
	}

	main.gold-page.liquid-rosegold-page .gold-product-card__media img {
		width: 100%;
		max-width: 100%;
		object-position: center bottom;
		margin-left: auto;
		margin-right: auto;
	}
}

main.gold-page.liquid-rosegold-page .gold-summary + .gold-section-gap {
	background: #FCF3EB;
	height: clamp(0.5rem, 1vw, 0.75rem);
}

main.gold-page.liquid-rosegold-page .gold-details {
	background: #F7EAD8;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2rem, 4vw, 2.5rem);
}

main.gold-page.liquid-rosegold-page .gold-shop-band > .gold-section-gap:first-child {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.liquid-rosegold-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.liquid-rosegold-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.liquid-rosegold-page .gold-shop {
	padding: 1.15rem 0 0.65rem;
}

main.gold-page.liquid-rosegold-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.liquid-rosegold-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
}

main.gold-page.liquid-rosegold-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page.liquid-rosegold-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.liquid-rosegold-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.liquid-rosegold-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.liquid-rosegold-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
}

main.gold-page.liquid-rosegold-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(0.75rem, 1.5vw, 1.15rem);
}

/* Mobile only: shop height = softener rosegold; icons a bit larger (must follow base rules) */
@media (max-width: 640px) {
	main.gold-page.liquid-rosegold-page .gold-shop {
		padding: 1.15rem 0 1.35rem;
	}

	main.gold-page.liquid-rosegold-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.liquid-rosegold-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.liquid-rosegold-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}

	main.gold-page.liquid-rosegold-page .gold-shop-band > .gold-section-gap:last-child {
		height: clamp(2.5rem, 5vw, 3.25rem);
	}
}

/* Nabati softener — section 2 product summary (mockup) */
main.gold-page.nabati-page {
	overflow: visible;
}

main.gold-page.nabati-page .gold-summary {
	padding: 3rem 0 0;
	background: #FCF3EB;
	border: 0;
	overflow: visible;
}

main.gold-page.nabati-page .gold-summary__heading {
	margin-bottom: 0.75rem;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.5;
}

main.gold-page.nabati-page .gold-summary__band {
	background: #FCF3EB;
	padding: 0.75rem 0 2.75rem;
	margin-top: 0.5rem;
	overflow: visible;
}

main.gold-page.nabati-page .gold-product-card {
	background: #F7EAD8;
	border: 0;
	width: 100%;
	max-width: 100%;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
	height: auto;
	min-height: 284px;
	max-height: none;
	overflow: visible;
}

main.gold-page.nabati-page .gold-product-card__info {
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
	width: 100%;
}

main.gold-page.nabati-page .gold-product-card__sub {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #7C5A3D;
}

main.gold-page.nabati-page .gold-product-card__name {
	margin: 0 0 1.65rem;
	font-size: clamp(1.65rem, 2.8vw, 1.95rem);
	font-weight: 700;
	color: #805B31;
}

main.gold-page.nabati-page .gold-product-card__weight-label {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #7C5A3D;
}

main.gold-page.nabati-page .gold-product-card__media {
	background: #F7EAD8;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 0;
	min-height: 284px;
	height: 100%;
}

html[dir="rtl"] main.gold-page.nabati-page .gold-product-card__media {
	justify-content: flex-end;
}

main.gold-page.nabati-page .gold-product-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-height: 300px;
	max-width: min(100%, 380px);
	object-fit: contain;
	object-position: left bottom;
	flex-shrink: 0;
	align-self: flex-end;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
}

main.gold-page.nabati-page .gold-product-card__weights {
	justify-content: space-between;
	width: 100%;
	max-width: min(100%, 24rem);
	gap: clamp(2rem, 4vw, 3rem);
}

main.gold-page.nabati-page .gold-weight-btn {
	background: transparent;
}

main.gold-page.nabati-page .gold-weight-btn:hover,
main.gold-page.nabati-page .gold-weight-btn.btn-active,
main.gold-page.nabati-page .gold-weight-btn[aria-pressed="true"] {
	background: #7C5A3D;
	color: #FCF3EB;
}

main.gold-page.nabati-page .gold-details {
	background: #F7EAD8;
}

main.gold-page.nabati-page .gold-summary + .gold-section-gap {
	background: #FCF3EB;
	height: clamp(1.25rem, 2.5vw, 1.75rem);
}

main.gold-page.nabati-page .gold-shop-band > .gold-section-gap:first-child {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.nabati-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.nabati-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.nabati-page .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page.nabati-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.nabati-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
}

main.gold-page.nabati-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page.nabati-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.nabati-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.nabati-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.nabati-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
	color: #7C5A3D;
}

main.gold-page.nabati-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(2.5rem, 5vw, 3.25rem);
}

@media (max-width: 640px) {
	/* Nabati mobile: section-1 title on cream, gap #FCF3EB, section-2 product #F7EAD8 */
	main.gold-page.nabati-page .gold-summary {
		padding: 1.75rem 0 0;
		background: #FCF3EB;
		width: 100%;
	}

	main.gold-page.nabati-page .gold-summary__heading {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		border: 0;
		font-size: 0.95rem;
	}

	main.gold-page.nabati-page .gold-summary > .container {
		padding-bottom: clamp(1.25rem, 4vw, 1.75rem);
	}

	main.gold-page.nabati-page .gold-summary__band {
		padding-inline: 0;
		padding-block: 0;
		margin-top: 0;
		width: 100%;
		max-width: none;
		background: #FCF3EB;
	}

	main.gold-page.nabati-page .gold-summary__band .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	main.gold-page.nabati-page .gold-product-card {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
		min-height: 0;
		background: #F7EAD8;
	}

	/* Section 1: image + strip below image #F7EAD8 (mobile only) */
	main.gold-page.nabati-page .gold-product-card__media {
		order: 1;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		padding: 0;
		margin-top: 0;
		box-sizing: border-box;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
		background: #F7EAD8;
	}

	html[dir="rtl"] main.gold-page.nabati-page .gold-product-card__media {
		justify-content: center;
	}

	main.gold-page.nabati-page .gold-product-card__media img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: center bottom;
		align-self: flex-end;
		margin: 0 auto;
		margin-bottom: 0;
	}

	/* Section 2: «نرم‌کننده حوله و لباس» + نباتی + weights (#F7EAD8) */
	main.gold-page.nabati-page .gold-product-card__info {
		order: 2;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		margin-top: clamp(1.5rem, 4vw, 2rem);
		box-sizing: border-box;
		padding: 1.35rem 1rem 1.35rem;
		background: #F7EAD8;
		text-align: center;
		align-items: center;
	}

	/* More space between «نرم‌کننده حوله و لباس» and «نباتی» */
	main.gold-page.nabati-page .gold-product-card__sub {
		margin: 0 0 0.85rem;
	}

	main.gold-page.nabati-page .gold-product-card__name {
		margin-top: 0;
	}

	main.gold-page.nabati-page .gold-product-card__weights {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		max-width: min(100%, var(--layout-width));
		gap: 0.75rem;
		margin-bottom: 0;
		margin-inline: auto;
	}

	main.gold-page.nabati-page .gold-weight-btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Cream gap between section 2 (info/weights) and section 3 (description) */
	main.gold-page.nabati-page .gold-summary {
		padding-bottom: 0;
	}

	main.gold-page.nabati-page .gold-summary__band {
		padding-bottom: 0;
	}

	main.gold-page.nabati-page .gold-section-gap {
		background: #FCF3EB;
	}

	main.gold-page.nabati-page .gold-summary + .gold-section-gap {
		background: #FCF3EB;
		height: clamp(1.25rem, 2.5vw, 1.75rem);
		overflow: visible;
	}

	/* Section 3: description / features */
	main.gold-page.nabati-page .gold-details {
		background: #F7EAD8;
		width: 100%;
		padding-top: 1.35rem;
	}

	main.gold-page.nabati-page .gold-details .container,
	main.gold-page.nabati-page .gold-details__grid {
		background: transparent;
	}

	main.gold-page.nabati-page .gold-shop-band > .gold-section-gap:first-child {
		background: #FCF3EB;
	}

	/* Gap between online shop and footer — mobile only */
	main.gold-page.nabati-page .gold-shop-band > .gold-section-gap:last-child {
		background: #F7EAD8;
	}

	/* Shop boxes and icons match powder-hand on mobile */
	main.gold-page.nabati-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.nabati-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.nabati-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}
}

/* Rosegold softener — section 2 product summary (mockup) */
main.gold-page.rosegold-page {
	overflow: visible;
}

main.gold-page.rosegold-page .gold-summary {
	padding: 3rem 0 0;
	background: #FCF3EB;
	border: 0;
	overflow: visible;
}

main.gold-page.rosegold-page .gold-summary__heading {
	margin-bottom: 0.75rem;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.5;
}

main.gold-page.rosegold-page .gold-summary__band {
	background: #FCF3EB;
	padding: 0.75rem 0 2.75rem;
	margin-top: 0.5rem;
	overflow: visible;
}

main.gold-page.rosegold-page .gold-product-card {
	background: #F7EAD8;
	border: 0;
	width: 100%;
	max-width: 100%;
	grid-template-columns: minmax(0, 1fr) auto;
	height: 284px;
	min-height: 284px;
	max-height: 284px;
	overflow: hidden;
}

main.gold-page.rosegold-page .gold-product-card__info {
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 0;
}

main.gold-page.rosegold-page .gold-product-card__sub {
	margin: 0 0 0.55rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #7C5A3D;
	align-self: center;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	transform: none;
	line-height: 1.45;
}

main.gold-page.rosegold-page .gold-product-card__sub-gap {
	display: none;
}

main.gold-page.rosegold-page .gold-product-card__name {
	margin: 0 0 1.15rem;
	font-size: clamp(1.85rem, 3vw, 2.15rem);
	font-weight: 700;
	color: #7C5A3D;
	line-height: 1.1;
}

main.gold-page.rosegold-page .gold-product-card__weight-label {
	margin: 0 0 1.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.4;
}

main.gold-page.rosegold-page .gold-product-card__media {
	background: #F7EAD8;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0;
	min-height: 0;
	height: 100%;
}

html[dir="rtl"] main.gold-page.rosegold-page .gold-product-card__media {
	justify-content: flex-start;
}

main.gold-page.rosegold-page .gold-product-card__media img {
	display: block;
	width: auto;
	height: 100%;
	max-height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: left center;
	flex-shrink: 0;
	align-self: stretch;
	margin: 0;
}

main.gold-page.rosegold-page .gold-product-card__weights {
	justify-content: center;
	width: 100%;
	max-width: min(100%, 36rem);
	gap: 0;
}

main.gold-page.rosegold-page .gold-weight-btn {
	background: #F7EAD8;
	color: #7C5A3D;
	border: 1px solid #7C5A3D;
	border-radius: 4px;
	box-shadow: 0 10px 22px rgba(124, 90, 61, 0.2);
	min-width: 10.5rem;
	padding: 0.55rem 1.6rem;
	font-weight: 700;
}

main.gold-page.rosegold-page .gold-weight-btn:hover,
main.gold-page.rosegold-page .gold-weight-btn.btn-active,
main.gold-page.rosegold-page .gold-weight-btn[aria-pressed="true"] {
	background: #7C5A3D;
	color: #FCF3EB;
	border-color: #7C5A3D;
	box-shadow: 0 10px 22px rgba(124, 90, 61, 0.28);
}

main.gold-page.rosegold-page .gold-details {
	background: #F7EAD8;
}

main.gold-page.rosegold-page .gold-shop-band > .gold-section-gap:first-child {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.rosegold-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.rosegold-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.rosegold-page .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page.rosegold-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.rosegold-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
}

main.gold-page.rosegold-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page.rosegold-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.rosegold-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.rosegold-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.rosegold-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
}

main.gold-page.rosegold-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(2.5rem, 5vw, 3.25rem);
}

@media (max-width: 640px) {
	main.gold-page.rosegold-page .gold-summary__band {
		padding-inline: 0;
		width: 100%;
		max-width: none;
	}

	main.gold-page.rosegold-page .gold-summary__band .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	main.gold-page.rosegold-page .gold-product-card {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	main.gold-page.rosegold-page .gold-product-card__info {
		align-items: center;
		text-align: center;
		padding: 1.25rem 1rem 1.5rem;
		height: auto;
	}

	main.gold-page.rosegold-page .gold-product-card__sub {
		text-align: center;
		transform: none;
	}

	main.gold-page.rosegold-page .gold-product-card__name {
		font-weight: 700;
	}

	main.gold-page.rosegold-page .gold-product-card__media {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 0;
		overflow: visible;
	}

	html[dir="rtl"] main.gold-page.rosegold-page .gold-product-card__media {
		justify-content: center;
	}

	main.gold-page.rosegold-page .gold-product-card__media img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: center bottom;
		align-self: flex-end;
		margin: 0 auto;
		margin-bottom: 0;
	}

	main.gold-page.rosegold-page .gold-weight-btn {
		min-width: min(100%, 10.5rem);
	}

	main.gold-page.rosegold-page .gold-product-card__weights {
		justify-content: center;
	}

	/* Shop cards match powder-hand sizes on mobile */
	main.gold-page.rosegold-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.rosegold-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.rosegold-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}
}

/* Gold softener (طلایی) — product band, features gap, shop band */
main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary {
	padding: 3rem 0 0;
	background: #FCF3EB;
	border: 0;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary__heading {
	margin-bottom: 0.75rem;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary__band {
	background: #FCF3EB;
	padding: 0.75rem 0 2.75rem;
	margin-top: 0.5rem;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card {
	background: #F7EAD8;
	border: 0;
	width: 100%;
	max-width: 100%;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media {
	background: #F7EAD8;
}

main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media {
	background: #F7EAD8;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 0;
	min-height: 284px;
	height: 100%;
}

html[dir="rtl"] main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media {
	justify-content: flex-end;
}

main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-height: 300px;
	max-width: min(100%, 380px);
	object-fit: contain;
	object-position: left bottom;
	flex-shrink: 0;
	align-self: flex-end;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__weights {
	justify-content: space-between;
	width: min(100%, 18rem);
	gap: 2.5rem;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary + .gold-section-gap {
	background: #FCF3EB;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-details {
	background: #F7EAD8;
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-details__grid {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-details__features-title {
	color: #9B7A2D;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-details__desc p,
main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-features-list li {
	color: #6B665C;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-features-list li::before {
	background: #6B665C;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-band > .gold-section-gap {
	background: #F7EAD8;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
}

/* Softener gold — slightly smaller «طلایی» title in section 2 product card */
main.gold-page.softener-gold-page .gold-product-card__name {
	font-size: 1.5rem;
}

/* Softener gold — mobile only: section-2 image width = .header-inner / logo track.
   Parent gets a definite layout-width so img width:100% resolves. */
@media (max-width: 640px) {
	main.gold-page.softener-gold-page .gold-product-card__name {
		font-size: 1.2rem;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary__band {
		padding-inline: 0;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-summary__band .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__info {
		padding: 1.25rem 1rem 1.5rem;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	html[dir="rtl"] main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media {
		justify-content: center;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-product-card__media img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: center bottom;
		align-self: flex-end;
		margin: 0 auto;
		margin-bottom: 0;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.softener-gold-page:not(.nabati-page):not(.rosegold-page):not(.liquid-rosegold-page):not(.powder-hand-page):not(.powder-machine-page):not(.powder-hd-page) .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}
}

/* Powder hand washing — section 2 mockup layout */
main.gold-page.powder-hand-page .ph-intro {
	padding: clamp(2.5rem, 6vw, 3.5rem) 0 clamp(2rem, 4vw, 2.75rem);
	background: #FCF3EB;
}

main.gold-page.powder-hand-page .ph-intro__title {
	margin: 0 0 clamp(1.5rem, 4.5vw, 2.5rem);
	text-align: center;
	font-size: clamp(0.95rem, 3.6vw, 1.125rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.6;
	padding: 0 1.25rem;
}

main.gold-page.powder-hand-page .ph-intro__showcase {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 10vw, 3.5rem);
}

main.gold-page.powder-hand-page .ph-intro__visual {
	display: block;
	width: clamp(200px, 23.9vw, 459px);
	max-width: min(459px, 100%);
	height: auto;
	aspect-ratio: 365 / 284;
	object-fit: contain;
	margin-inline: auto;
}

main.gold-page.powder-hand-page .ph-intro__weight {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 7.5rem;
	margin: clamp(1.25rem, 4vw, 2rem) 0 0;
	padding: 0.55rem 1.85rem;
	font-size: clamp(0.875rem, 3.2vw, 1rem);
	font-weight: 600;
	text-align: center;
	color: #FCF3EB;
	background: #7C5A3D;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

main.gold-page.powder-hand-page .ph-intro__weight:hover,
main.gold-page.powder-hand-page .ph-intro__weight.btn-active,
main.gold-page.powder-hand-page .ph-intro__weight[aria-pressed="true"] {
	background: #7C5A3D;
	color: #FCF3EB;
	box-shadow: none;
}

main.gold-page.powder-hand-page .ph-intro + .gold-section-gap {
	display: none;
}

main.gold-page.powder-hand-page .gold-details {
	background: #F7EAD8;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2rem, 4vw, 2.5rem);
}

main.gold-page.powder-hand-page .gold-details__features-title {
	color: #805300;
}

main.gold-page.powder-hand-page .gold-details__desc p,
main.gold-page.powder-hand-page .gold-features-list li {
	color: #6B665C;
}

main.gold-page.powder-hand-page .gold-features-list li::before {
	background: #6B665C;
}

main.gold-page.powder-hand-page .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.powder-hand-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.powder-hand-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.powder-hand-page .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page.powder-hand-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.powder-hand-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: clamp(1.15rem, 2.2vw, 1.5rem);
	color: #7C5A3D;
}

main.gold-page.powder-hand-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page.powder-hand-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.powder-hand-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.powder-hand-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.powder-hand-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
	color: #7C5A3D;
}

main.gold-page.powder-hand-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(0.75rem, 1.5vw, 1.15rem);
}

@media (max-width: 640px) {
	main.gold-page.powder-hand-page .gold-shop {
		padding: 1.15rem 0 1.35rem;
	}

	main.gold-page.powder-hand-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.powder-hand-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.powder-hand-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}

	main.gold-page.powder-hand-page .gold-shop-band > .gold-section-gap:last-child {
		height: clamp(2.5rem, 5vw, 3.25rem);
	}

	main.gold-page.powder-hand-page .ph-intro {
		padding: clamp(2.25rem, 7vw, 3rem) 0 clamp(1.75rem, 5vw, 2.25rem);
	}

	main.gold-page.powder-hand-page .ph-intro__title {
		margin-bottom: clamp(1.75rem, 6vw, 2.5rem);
		font-size: clamp(0.9rem, 3.8vw, 1rem);
		line-height: 1.65;
	}

	main.gold-page.powder-hand-page .ph-intro__showcase {
		padding-inline: clamp(2rem, 14vw, 4rem);
	}

	main.gold-page.powder-hand-page .ph-intro__visual {
		width: min(459px, calc(100% - 2rem));
		max-width: min(459px, 100%);
	}

	main.gold-page.powder-hand-page .ph-intro__weight {
		margin-top: clamp(1.5rem, 5vw, 2.25rem);
		padding: 0.5rem 1.65rem;
		font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
	}
}

/* Powder machine washing — colors/content from softlan.com/product-category/پودر-ماشین-لباسشویی */
main.gold-page.powder-machine-page .pm-sizes {
	padding: clamp(2rem, 4vw, 2.2rem) 0 clamp(1.5rem, 3vw, 2.2rem);
	background: #FCF3EB;
}

main.gold-page.powder-machine-page .pm-sizes__title {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	text-align: center;
	font-size: 1.125rem;
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.5;
}

main.gold-page.powder-machine-page .pm-sizes .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.powder-machine-page .pm-sizes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

main.gold-page.powder-machine-page .pm-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

main.gold-page.powder-machine-page .pm-size-card__visual {
	width: 100%;
	min-height: clamp(280px, 42vh, 420px);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

main.gold-page.powder-machine-page .pm-size-card__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 7.5rem;
	max-width: calc(100% - 2rem);
	margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
	padding: 0.55rem 1.85rem;
	font-size: clamp(0.875rem, 1.1vw, 1rem);
	font-weight: 600;
	text-align: center;
	color: #FCF3EB;
	background: #7C5A3D;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	box-shadow: none;
}

main.gold-page.powder-machine-page .pm-size-card__btn:hover,
main.gold-page.powder-machine-page .pm-size-card__btn.btn-active,
main.gold-page.powder-machine-page .pm-size-card__btn[aria-pressed="true"] {
	background: #7C5A3D;
	color: #E8D1B1;
	box-shadow: none;
}

main.gold-page.powder-machine-page .pm-details {
	background: #F7EAD8;
	padding: clamp(2rem, 4vw, 2.2rem) 0 clamp(2rem, 4vw, 2.2rem);
	margin-top: 0;
}

main.gold-page.powder-machine-page .pm-details .gold-details__grid {
	width: var(--layout-width);
	max-width: var(--layout-width);
	align-items: center;
}

main.gold-page.powder-machine-page .pm-details__desc {
	margin-top: clamp(-8rem, -12vw, -13.25rem);
}

main.gold-page.powder-machine-page .gold-details__desc p,
main.gold-page.powder-machine-page .gold-features-list li {
	color: #6B665C;
	font-size: 1rem;
	line-height: 1.8;
}

main.gold-page.powder-machine-page .gold-details__features-title {
	color: #805300;
	font-weight: 700;
}

main.gold-page.powder-machine-page .gold-features-list li::before {
	background: #6B665C;
}

main.gold-page.powder-machine-page .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.powder-machine-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.powder-machine-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.powder-machine-page .gold-shop {
	padding: 1.15rem 0 0.65rem;
}

main.gold-page.powder-machine-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.powder-machine-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
	color: #7C5A3D;
}

main.gold-page.powder-machine-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

/* Match liquid-rosegold shop box + icon sizes (desktop) */
main.gold-page.powder-machine-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.powder-machine-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.powder-machine-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.powder-machine-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
	color: #7C5A3D;
}

main.gold-page.powder-machine-page .gold-shop-card__btn:hover {
	background: #7C5A3D;
	color: #E8D1B1;
	border-color: #7C5A3D;
}

main.gold-page.powder-machine-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(0.75rem, 1.5vw, 1.15rem);
}

@media (max-width: 960px) {
	main.gold-page.powder-machine-page .pm-sizes__grid {
		grid-template-columns: 1fr;
		gap: clamp(1.25rem, 4vw, 2rem);
	}

	main.gold-page.powder-machine-page .pm-size-card__visual {
		min-height: clamp(240px, 50vw, 360px);
	}

	main.gold-page.powder-machine-page .pm-size-card__btn {
		margin-top: clamp(0.875rem, 3vw, 1.25rem);
		padding: 0.5rem 1.65rem;
		font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
	}

	main.gold-page.powder-machine-page .pm-details__desc {
		margin-top: 0;
	}

	main.gold-page.powder-machine-page .gold-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: match liquid-rosegold shop height + larger icons */
@media (max-width: 640px) {
	main.gold-page.powder-machine-page .gold-shop {
		padding: 1.15rem 0 1.35rem;
	}

	main.gold-page.powder-machine-page .gold-shop__grid {
		grid-template-columns: 1fr;
	}

	main.gold-page.powder-machine-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.powder-machine-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.powder-machine-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}

	main.gold-page.powder-machine-page .gold-shop-band > .gold-section-gap:last-child {
		height: clamp(2.5rem, 5vw, 3.25rem);
	}
}

/* Powder HD — colors/content from softlan.com/product-category/پودر-ماشین-لباسشویی-سری-hd */
main.gold-page.powder-hd-page {
	background: #fff;
}

main.gold-page.powder-hd-page .phd-intro {
	padding: clamp(2.5rem, 6vw, 3.5rem) 0 clamp(2rem, 4vw, 2.75rem);
	background: #FCF3EB;
}

main.gold-page.powder-hd-page .phd-intro__title {
	margin: 0 0 clamp(1.5rem, 4.5vw, 2.5rem);
	text-align: center;
	font-size: clamp(0.95rem, 3.6vw, 1.125rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.6;
	padding: 0 1.25rem;
}

main.gold-page.powder-hd-page .phd-intro__showcase {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 10vw, 3.5rem);
}

main.gold-page.powder-hd-page .phd-intro__visual {
	display: block;
	width: clamp(200px, 23.9vw, 459px);
	max-width: min(459px, 100%);
	height: auto;
	aspect-ratio: 365 / 284;
	object-fit: contain;
	margin-inline: auto;
}

main.gold-page.powder-hd-page .phd-intro__weight {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 7.5rem;
	margin: clamp(1.25rem, 4vw, 2rem) 0 0;
	padding: 0.55rem 1.85rem;
	font-size: clamp(0.875rem, 3.2vw, 1rem);
	font-weight: 600;
	text-align: center;
	color: #FCF3EB;
	background: #7C5A3D;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	box-shadow: none;
}

main.gold-page.powder-hd-page .phd-intro__weight:hover,
main.gold-page.powder-hd-page .phd-intro__weight.btn-active,
main.gold-page.powder-hd-page .phd-intro__weight[aria-pressed="true"] {
	background: #7C5A3D;
	color: #E8D1B1;
	box-shadow: none;
}

main.gold-page.powder-hd-page .phd-details {
	background: #F7EAD8;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2rem, 4vw, 2.5rem);
	margin-top: 0;
}

main.gold-page.powder-hd-page .phd-details .gold-details__grid {
	width: var(--layout-width);
	max-width: var(--layout-width);
	align-items: start;
}

main.gold-page.powder-hd-page .phd-details__desc {
	margin-top: 0;
}

main.gold-page.powder-hd-page .gold-details__desc p,
main.gold-page.powder-hd-page .gold-features-list li {
	color: #6B665C;
	font-size: 1rem;
	line-height: 1.8;
}

main.gold-page.powder-hd-page .gold-details__features-title {
	color: #805300;
	font-weight: 700;
}

main.gold-page.powder-hd-page .gold-features-list li::before {
	background: #805300;
}

main.gold-page.powder-hd-page .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.powder-hd-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.powder-hd-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.powder-hd-page .gold-shop {
	padding: 1.15rem 0 0.65rem;
}

main.gold-page.powder-hd-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.powder-hd-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: 0.6rem;
	color: #7C5A3D;
}

main.gold-page.powder-hd-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

/* Match liquid-rosegold shop box + icon sizes (desktop) */
main.gold-page.powder-hd-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.powder-hd-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.powder-hd-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.powder-hd-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #7C5A3D;
	white-space: nowrap;
}

main.gold-page.powder-hd-page .gold-shop-card__btn:hover {
	background: #7C5A3D;
	color: #E8D1B1;
	border-color: #7C5A3D;
}

main.gold-page.powder-hd-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(0.75rem, 1.5vw, 1.15rem);
}

@media (max-width: 960px) {
	main.gold-page.powder-hd-page .gold-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	main.gold-page.powder-hd-page .phd-intro {
		padding: clamp(2.25rem, 7vw, 3rem) 0 clamp(1.75rem, 5vw, 2.25rem);
	}

	main.gold-page.powder-hd-page .phd-intro__title {
		margin-bottom: clamp(1.75rem, 6vw, 2.5rem);
		font-size: clamp(0.9rem, 3.8vw, 1rem);
		line-height: 1.65;
	}

	main.gold-page.powder-hd-page .phd-intro__showcase {
		padding-inline: clamp(2rem, 14vw, 4rem);
	}

	main.gold-page.powder-hd-page .phd-intro__visual {
		width: min(459px, calc(100% - 2rem));
		max-width: min(459px, 100%);
	}

	main.gold-page.powder-hd-page .phd-intro__weight {
		margin-top: clamp(1.5rem, 5vw, 2.25rem);
		padding: 0.5rem 1.65rem;
		font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
	}

	main.gold-page.powder-hd-page .gold-shop__grid {
		grid-template-columns: 1fr;
	}

	/* Match liquid-rosegold shop height + larger icons */
	main.gold-page.powder-hd-page .gold-shop {
		padding: 1.15rem 0 1.35rem;
	}

	main.gold-page.powder-hd-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.powder-hd-page .gold-shop-card__logo {
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.powder-hd-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}

	main.gold-page.powder-hd-page .gold-shop-band > .gold-section-gap:last-child {
		height: clamp(2.5rem, 5vw, 3.25rem);
	}
}

/* -------------------------------------------------------------------------- */
/* Site-wide hero header — match مایع-لکه-بر-لباس (stain) page banner         */
/* Mobile only: flat video layout (desktop keeps per-component hero styles)   */
/* -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.hero,
	.powder-hero,
	.liquid-hero,
	.softener-hero,
	.liquid-rosegold-hero,
	.stain-hero,
	.gold-hero {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 0;
		overflow: hidden;
		background: #f4e6d7;
		line-height: 0;
		border: 0;
		outline: 0;
		box-shadow: none;
	}

	.hero-video,
	.powder-hero__video,
	.liquid-hero__video,
	.softener-hero__video,
	.liquid-rosegold-hero__video,
	.stain-hero__video,
	.gold-hero__video {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center center;
		max-width: 100%;
		vertical-align: top;
		border: 0;
		outline: 0;
		inset: auto;
		z-index: auto;
		pointer-events: auto;
		grid-area: auto;
	}

	.hero-overlay,
	.powder-hero__overlay,
	.liquid-hero__overlay,
	.softener-hero__overlay,
	.stain-hero__overlay,
	.gold-hero__overlay {
		display: none;
	}

	/* Liquid Laundry: text ON video on mobile — taller hero so copy fits under logo */
	.liquid-hero {
		position: relative;
		display: block;
		min-height: clamp(560px, 160vw, 720px);
		height: auto;
		overflow: hidden;
	}

	.liquid-hero__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		max-width: none;
		pointer-events: none;
	}

	.liquid-hero__overlay {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
	}

	.liquid-hero__inner {
		display: flex;
		position: absolute;
		inset: 0;
		z-index: 2;
		width: var(--layout-width);
		max-width: var(--layout-width);
		margin-inline: auto;
		/* Clear absolute header (pad-top + logo); extra top space so copy sits lower on mobile */
		padding-block: calc(2.5rem + clamp(76px, 7vw, 96px) + 15rem) 1.25rem;
		padding-inline: 0;
		align-items: flex-start;
		justify-content: flex-start;
		line-height: 1.5;
		background: transparent;
	}

	html[dir="rtl"] .liquid-hero__inner {
		justify-content: flex-end;
	}

	.liquid-hero__content {
		width: 100%;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.liquid-hero__eyebrow,
	.liquid-hero__title,
	.liquid-hero__desc {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Liquid Rose Gold: text ON video on mobile — logo track; no below-video band */
	.liquid-rosegold-hero {
		position: relative;
		display: block;
	}

	.liquid-rosegold-hero__overlay {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
	}

	.liquid-rosegold-hero__inner {
		display: flex;
		position: absolute;
		inset: 0;
		z-index: 2;
		width: var(--layout-width);
		max-width: var(--layout-width);
		margin-inline: auto;
		padding-block: calc(var(--header-h, 84px) + 0.5rem) 1rem;
		padding-inline: 0;
		align-items: center;
		justify-content: flex-start;
		line-height: 1.5;
		background: transparent;
	}

	html[dir="rtl"] .liquid-rosegold-hero__inner {
		justify-content: flex-end;
	}

	.liquid-rosegold-hero__content {
		width: 100%;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.liquid-rosegold-hero__eyebrow,
	.liquid-rosegold-hero__title,
	.liquid-rosegold-hero__bullets li {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* Liquid General HD — colors/content from softlan.com/product-category/مایع-لباسشویی-جنرال */
main.gold-page.liquid-hd-page .gold-summary {
	padding-top: clamp(2rem, 4vw, 2.75rem);
}

main.gold-page.liquid-hd-page .gold-summary__heading {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	color: #7C5A3D;
	line-height: 1.55;
}

main.gold-page.liquid-hd-page .gold-product-card__name {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

/* Liquid HD + Baby — section 2: pin product image flush bottom-left of media box */
main.gold-page.liquid-hd-page .gold-product-card__media {
	position: relative;
	overflow: hidden;
	display: block;
	direction: ltr;
	padding: 0;
	min-height: 284px;
	height: 100%;
}

main.gold-page.liquid-hd-page .gold-product-card__media img {
	position: absolute;
	left: 0;
	bottom: 0;
	right: auto;
	top: auto;
	display: block;
	width: auto;
	height: 100%;
	max-height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: left bottom;
	margin: 0;
}

@media (max-width: 640px) {
	/* Liquid HD + Baby — section-2 box/image width = .header-inner / logo track */
	main.gold-page.liquid-hd-page .gold-summary__band .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	main.gold-page.liquid-hd-page .gold-product-card {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	main.gold-page.liquid-hd-page .gold-product-card__info {
		padding: 1.25rem 1rem 1.5rem;
	}

	main.gold-page.liquid-hd-page .gold-product-card__media {
		position: relative;
		display: flex;
		direction: ltr;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 0;
		overflow: visible;
	}

	html[dir="rtl"] main.gold-page.liquid-hd-page .gold-product-card__media {
		justify-content: center;
	}

	main.gold-page.liquid-hd-page .gold-product-card__media img {
		position: static;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		object-position: center bottom;
		align-self: flex-end;
		margin: 0 auto;
		margin-bottom: 0;
	}
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-product-card__weights {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(2rem, 4.5vw, 3.25rem) !important;
	width: 100%;
	max-width: min(100%, 34rem);
}

@media (max-width: 960px) {
	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-product-card__weights {
		max-width: min(100%, 28rem);
		gap: 2rem !important;
	}
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-weight-btn {
	background: #F7EAD8;
	color: #7C5B3E;
	border-color: #7C5B3E;
	border-radius: 0;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-weight-btn:hover,
main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-weight-btn.btn-active,
main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-weight-btn[aria-pressed="true"] {
	background: #7C5B3E;
	color: #FCF3EB;
	border-color: #7C5B3E;
	border-radius: 0;
	box-shadow: none;
}

/* Liquid HD — white gap outside shop band (match powder-machine-page section height) */
main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

/* Liquid HD shop band — shared chrome; size overrides split desktop/mobile below */
main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: clamp(1.15rem, 2.2vw, 1.5rem);
	color: #7C5A3D;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

/* Liquid HD shop boxes — match powder-hand-page sizes */
main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.35rem 0 0.75rem;
	box-shadow: none;
	aspect-ratio: 363 / 252;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	transform: none;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__logo img {
	max-height: clamp(72px, 6.8vw, 118px);
	max-width: 82%;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 38px;
	padding: 0.45rem 0.5rem;
	font-size: 0.72rem;
	white-space: nowrap;
	color: #7C5A3D;
}

main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__btn:hover {
	background: #7C5A3D;
	color: #E8D1B1;
	border-color: #7C5A3D;
}

/* Liquid HD shop — mobile only: identical to liquid-rosegold mobile shop */
@media (max-width: 640px) {
	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop {
		padding: 1.15rem 0 1.35rem;
	}

	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card {
		padding: 1.25rem 0 0.65rem;
		aspect-ratio: 363 / 198;
	}

	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__logo {
		flex: 1 1 auto;
		min-height: 0;
		align-items: flex-start;
		margin-bottom: clamp(10px, 1.2vw, 16px);
		transform: translateY(-8px);
	}

	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__logo img {
		max-height: clamp(118px, 34vw, 162px);
		max-width: 96%;
	}

	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-card__btn {
		min-height: 38px;
		padding: 0.45rem 0.5rem;
		font-size: 0.72rem;
	}

	main.gold-page.liquid-rosegold-page.liquid-hd-page .gold-shop-band > .gold-section-gap:last-child {
		height: clamp(2.5rem, 5vw, 3.25rem);
	}
}

/* Liquid Baby — colors from softlan.com/product-category/baby-laundry-detergent */
/* Hero copy: left edge flush with header logo track */
main.gold-page.liquid-baby-page .liquid-rosegold-hero__content {
	text-align: left;
}

main.gold-page.liquid-baby-page .gold-summary__heading {
	color: #7C5A3D;
}

main.gold-page.liquid-baby-page .gold-details {
	background: #F7EAD8;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2rem, 4vw, 2.5rem);
}

main.gold-page.liquid-baby-page .gold-details__features-title {
	color: #805300;
}

main.gold-page.liquid-baby-page .gold-details__desc p,
main.gold-page.liquid-baby-page .gold-features-list li {
	color: #6B665C;
}

main.gold-page.liquid-baby-page .gold-features-list li::before {
	background: #6B665C;
}

/* Liquid Baby shop band — exact height match to powder-machine-page */
main.gold-page.liquid-baby-page .gold-details + .gold-section-gap--white {
	background: #FFFFFF;
	height: clamp(1.5rem, 3vw, 2.25rem);
}

main.gold-page.liquid-baby-page .gold-shop-band {
	background: #F7EAD8;
}

main.gold-page.liquid-baby-page .gold-shop-band__inner {
	background: #F7EAD8;
}

main.gold-page.liquid-baby-page .gold-shop {
	padding: 1.15rem 0 1.35rem;
}

main.gold-page.liquid-baby-page .gold-shop .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
}

main.gold-page.liquid-baby-page .gold-shop__title {
	font-size: clamp(1.05rem, 1.55vw, 1.25rem);
	font-weight: 400;
	margin-bottom: clamp(1.15rem, 2.2vw, 1.5rem);
	color: #7C5A3D;
}

main.gold-page.liquid-baby-page .gold-shop__grid {
	width: 100%;
	max-width: 100%;
	gap: clamp(12px, 1.5vw, 18px);
}

main.gold-page.liquid-baby-page .gold-shop-card {
	background: #FCF3EB;
	border: none;
	border-radius: 0;
	padding: 1.25rem 0 0.65rem;
	box-shadow: none;
	aspect-ratio: 363 / 198;
	min-height: 0;
	justify-content: space-between;
	gap: 0;
}

main.gold-page.liquid-baby-page .gold-shop-card__logo {
	flex: 1 1 auto;
	min-height: 0;
	align-items: flex-start;
	margin-bottom: clamp(10px, 1.2vw, 16px);
	transform: translateY(-18px);
}

main.gold-page.liquid-baby-page .gold-shop-card__logo img {
	max-height: clamp(64px, 6vw, 115px);
	max-width: 88%;
}

main.gold-page.liquid-baby-page .gold-shop-card__btn {
	background: #FCF3EB;
	border: 1px solid #785A3C;
	border-radius: 0;
	width: calc(100% - 28px);
	min-height: 44px;
	padding: 0.5rem 0.6rem;
	font-size: 0.8rem;
	white-space: nowrap;
	color: #7C5A3D;
}

main.gold-page.liquid-baby-page .gold-shop-card__btn:hover {
	background: #7C5A3D;
	color: #E8D1B1;
	border-color: #7C5A3D;
}

main.gold-page.liquid-baby-page .gold-shop-band > .gold-section-gap:last-child {
	display: block;
	background: #F7EAD8;
	height: clamp(2.5rem, 5vw, 3.25rem);
}

main.gold-page.liquid-baby-page .gold-summary__band {
	background: #FCF3EB;
}

main.gold-page.liquid-baby-page .gold-product-card {
	background: #F7EAD8;
}

main.gold-page.liquid-baby-page .gold-summary + .gold-section-gap {
	background: #FCF3EB;
}


/* -------------------------------------------------------------------------- */
/* Contact page                                                               */
/* -------------------------------------------------------------------------- */
.contact-page {
	padding-top: 0;
	background: #f7f1e8;
}

.contact-hero {
	position: relative;
	/* Clear gap below absolute header (~40–60px) so form never overlaps logo/nav */
	padding: calc(var(--header-h) + clamp(1.5rem, 2.6vw, 2.35rem)) 0 clamp(4.25rem, 7.5vw, 5.75rem);
	background-color: #f5ece1;
	background-image: var(--contact-fabric);
	background-size: cover;
	background-position: center top;
	overflow: visible;
}

.contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 42% 55% at 12% 8%, rgba(90, 70, 50, 0.12) 0%, transparent 62%),
		radial-gradient(ellipse 55% 70% at 78% 42%, rgba(255, 250, 242, 0.28) 0%, transparent 70%),
		linear-gradient(180deg, rgba(247, 241, 232, 0.35) 0%, rgba(247, 241, 232, 0.08) 45%, rgba(247, 241, 232, 0.55) 100%);
	pointer-events: none;
	border-radius: inherit;
}

/* Softlan wordmark — mobile hero only (desktop uses fabric watermark) */
.contact-hero__brand {
	display: none;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.contact-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* RTL: end = visual left — Softlan watermark stays open on the right */
	justify-items: end;
	gap: 0;
	/* Top-align under nav (mockup); fabric fills space down to info bar */
	align-items: start;
}

.contact-form-stack {
	width: min(100%, 360px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	animation: contact-card-in 0.7s var(--ease) both;
}

.contact-form-card {
	width: 100%;
	background: #F7EAD8;
	/* Softlan CRM form system (golrang-crm-form / gcf) */
	--gcf-ink: #1c1914;
	--gcf-muted: #6f6a60;
	--gcf-line: #e4dfd4;
	--gcf-fill: #f3efe6;
	--gcf-bg: #fffcf7;
	--gcf-accent: #b0893e;
	--gcf-ok: #2d6a46;
	--gcf-ok-bg: #eef6f0;
	--gcf-err: #9b2c2c;
	--gcf-err-bg: #f8eeee;
	color: var(--gcf-ink);
	color-scheme: light;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(47, 30, 20, 0.12);
	overflow: hidden;
	padding: clamp(0.75rem, 1.5vw, 0.95rem) clamp(0.65rem, 1.3vw, 0.85rem) clamp(0.65rem, 1.3vw, 0.85rem);
}

@keyframes contact-card-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.contact-form-card__title {
	margin: 0;
	padding: 0.1rem 0.4rem 0.65rem;
	text-align: center;
	font-size: clamp(0.88rem, 1.2vw, 1rem);
	font-weight: 700;
	color: #7C5A3D;
	line-height: 1.55;
	background: transparent;
}

.contact-form-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.3rem;
	margin: 0 0 0.55rem;
	padding: 0.25rem;
	background: var(--gcf-fill);
	border-radius: 8px;
}

.contact-form-tab {
	padding: 0.55rem 0.65rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--gcf-muted);
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form-tab.is-active {
	background: var(--gcf-bg);
	color: var(--gcf-ink);
	box-shadow: 0 2px 8px rgba(74, 52, 40, 0.08);
}

.contact-form-panel {
	padding: clamp(0.75rem, 1.6vw, 0.95rem) clamp(0.7rem, 1.5vw, 0.9rem) clamp(0.8rem, 1.6vw, 1rem);
	background: var(--gcf-bg);
	border: 1px solid var(--gcf-line);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(47, 30, 20, 0.04);
	color-scheme: light;
}

.contact-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 0.35rem;
}

.contact-steps__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: lining-nums;
	color: var(--gcf-muted);
	background: var(--gcf-fill);
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.contact-steps__dot.is-active {
	background: var(--gcf-ink);
	color: #fff;
	transform: scale(1.04);
}

.contact-steps__line {
	width: 56px;
	height: 1.5px;
	background: var(--gcf-line);
	margin-inline: 0.35rem;
}

.contact-steps__label {
	text-align: center;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--gcf-muted);
	margin-bottom: 0.7rem;
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
	margin-bottom: 0.6rem;
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	margin-bottom: 0.6rem;
}

.contact-form-row .contact-field {
	margin-bottom: 0;
}

.contact-field label {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gcf-ink);
}

.contact-field__hint {
	font-weight: 500;
	color: var(--gcf-muted);
	font-size: 0.78rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	width: 100%;
	border: 1px solid var(--gcf-line);
	border-radius: 8px;
	background-color: #fff;
	background: #fff;
	padding: 0.55rem 0.75rem;
	font-family: inherit;
	font-size: 0.82rem;
	color: var(--gcf-ink);
	-webkit-text-fill-color: var(--gcf-ink);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	color-scheme: light;
}

.contact-field select {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236f6a60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1rem center;
	padding-left: 2.25rem;
}

.contact-field textarea {
	resize: vertical;
	min-height: 72px;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	border-color: var(--gcf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gcf-accent) 25%, transparent);
}

.contact-field input:disabled,
.contact-field select:disabled {
	background: var(--gcf-fill);
	background-color: var(--gcf-fill);
	color: var(--gcf-muted);
	-webkit-text-fill-color: var(--gcf-muted);
	cursor: not-allowed;
	border-color: var(--gcf-line);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: var(--gcf-muted);
	-webkit-text-fill-color: var(--gcf-muted);
	opacity: 1;
}

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus,
.contact-field textarea:-webkit-autofill,
.contact-field select:-webkit-autofill {
	-webkit-text-fill-color: var(--gcf-ink);
	caret-color: var(--gcf-ink);
	box-shadow: 0 0 0 1000px #fff inset;
	transition: background-color 99999s ease-out;
}

.contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.contact-btn--primary {
	background: var(--gcf-ink);
	background-color: var(--gcf-ink);
	color: #fff;
	-webkit-text-fill-color: #fff;
	margin-top: 0.2rem;
}

.contact-btn--primary:hover {
	background: #2a261f;
	background-color: #2a261f;
	transform: translateY(-1px);
}

.contact-btn--ghost {
	background: #fff;
	background-color: #fff;
	color: var(--gcf-ink);
	-webkit-text-fill-color: var(--gcf-ink);
	border: 1px solid var(--gcf-line);
}

.contact-form-actions {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.contact-form-actions .contact-btn {
	margin-top: 0;
}

.contact-track-intro {
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--gcf-muted);
	margin-bottom: 0.65rem;
}

.contact-form-status {
	margin-top: 0.55rem;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.6;
	background: var(--gcf-fill);
	color: var(--gcf-ink);
}

.contact-form-status.is-error {
	background: var(--gcf-err-bg);
	color: var(--gcf-err);
}

.contact-form-status.is-ok {
	background: var(--gcf-ok-bg);
	color: var(--gcf-ok);
}

/* Info bar — floating card; all four corners rounded per mockup */
.contact-info {
	position: relative;
	z-index: 3;
	/* Beige band below the card (#F7EAD8) — matches mockup gap before process */
	padding: 0 0 clamp(1.1rem, 2.4vw, 1.75rem);
	/* Pull up so ~half the bar sits on fabric, half on cream (per mockup) */
	margin-top: clamp(-3.75rem, -6.5vw, -2.75rem);
	/* Transparent top lets fabric show around rounded corners; cream continues below */
	background: linear-gradient(
		to bottom,
		transparent 0,
		transparent clamp(2rem, 3.5vw, 2.75rem),
		#F7EAD8 clamp(2rem, 3.5vw, 2.75rem)
	);
}

/* Section boxes — same track as .header-inner / logo */
.contact-page .contact-info > .container,
.contact-page .contact-process > .container,
.contact-page .contact-map > .container,
.contact-page .contact-faq > .container,
.contact-page .contact-closing > .container {
	width: var(--layout-width);
	max-width: var(--layout-width);
	padding-inline: 0;
	margin-inline: auto;
}

.contact-page .contact-info__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
	background: #F7EAD8 !important;
	background-color: #F7EAD8 !important;
	/* All four corners soft — matches mockup card */
	border-radius: 16px;
	box-shadow: 0 -10px 32px rgba(74, 52, 40, 0.12), 0 8px 24px rgba(74, 52, 40, 0.08);
	overflow: hidden;
	border: 0;
	transform: none;
}

.contact-info__item {
	padding: clamp(1.55rem, 2.8vw, 2.15rem) clamp(1.35rem, 2.6vw, 2.35rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	min-width: 0;
	border-inline-start: 1px dashed rgba(122, 96, 74, 0.42);
}

.contact-info__item:first-child {
	border-inline-start: 0;
}

.contact-info__icon {
	color: #7a604a;
	margin-bottom: 0.1rem;
	display: inline-flex;
}

.contact-info__title {
	font-size: 0.98rem;
	font-weight: 700;
	color: #3a2a20;
}

.contact-info__text {
	font-size: 0.86rem;
	line-height: 1.85;
	color: #6b584a;
	max-width: 18ch;
}

.contact-info__text--address {
	max-width: 16rem;
	white-space: normal;
}

/* Process — white card containing centered title and flowchart diagram; aligns with .header-inner / logo track */
.contact-process {
	padding: clamp(1.15rem, 2.5vw, 1.85rem) 0;
	margin: 0;
	background: #F7EAD8;
	position: relative;
	z-index: 4;
	box-shadow: none;
	border-radius: 0;
	box-sizing: border-box;
}

.contact-process__inner,
.contact-process__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 8px 26px rgba(74, 52, 40, 0.09);
	border: 0;
	box-sizing: border-box;
}

.contact-process__title {
	width: 100%;
	text-align: center;
	font-family: var(--font);
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	font-weight: 700;
	color: #183871;
	line-height: 1.4;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) 0;
	letter-spacing: -0.01em;
}

.contact-process__card {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

.contact-process__img {
	width: 100%;
	max-width: 960px;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	border: 0;
}

/* Map — equal halves, map visual-left / title visual-right, inset dashed divider */
.contact-map {
	/* No top gap — process strip overlaps this band with its bottom shadow */
	padding: clamp(1.1rem, 2.4vw, 1.75rem) 0 clamp(2.5rem, 4vw, 3.5rem);
	background: #F7EAD8;
}

.contact-map__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
	background: #F7EAD8;
	border-radius: 22px;
	box-shadow: 0 10px 36px rgba(74, 52, 40, 0.16);
	overflow: hidden;
	/* Compact height — map fills left half; extra for top/bottom inset */
	height: clamp(308px, calc(30vw + 28px), 368px);
	min-height: 308px;
	border: 1px solid rgba(210, 190, 165, 0.35);
}

.contact-map__text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-map__text::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.85rem;
	top: 1.15rem;
	bottom: 1.15rem;
	width: 0;
	border-inline-end: 1px dashed rgba(122, 96, 74, 0.4);
	pointer-events: none;
}

.contact-map__title {
	font-size: clamp(1.2rem, 2.2vw, 1.65rem);
	font-weight: 700;
	color: #7a604a;
	line-height: 1.6;
	margin: 0;
}

.contact-map__address {
	margin: 0;
	font-size: clamp(0.82rem, 1.35vw, 0.95rem);
	font-weight: 600;
	line-height: 1.85;
	color: #6b584a;
	max-width: 18rem;
}

.contact-map__embed {
	position: relative;
	align-self: stretch;
	min-height: 0;
	height: 100%;
	width: 100%;
	background: #F7EAD8;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 0;
}

.contact-map__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	border-radius: 0;
	display: block;
}

.contact-map__open {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #fff;
	color: #1a73e8;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.4rem 0.65rem;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	font-family: system-ui, sans-serif;
	direction: ltr;
}

/* Gap between map and FAQ */
.contact-section-gap {
	height: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #FCF3EB;
}

/* FAQ — match contact mockup: compact section, slim bars, answer on gold */
.contact-faq {
	padding: clamp(0.75rem, 1.5vw, 1.1rem) 0;
	background: #C59C5A;
}

.contact-faq__box {
	/* Match .header-inner / logo track (.container already uses --layout-width) */
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.contact-faq__title {
	font-size: clamp(1.15rem, 1.75vw, 1.45rem);
	font-weight: 700;
	color: #7C5A3D;
	text-align: center;
	margin-bottom: 0.75rem;
}

.contact-faq .powder-faq-list {
	gap: 0.85rem;
}

.contact-faq .powder-faq-item {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.contact-faq .powder-faq-btn {
	color: #7C5A3D;
	background: #f7ead8;
	border-radius: 8px;
	border: 1px solid rgba(124, 90, 61, 0.12);
	box-shadow: 0 1px 3px rgba(74, 52, 40, 0.05);
	padding: 0.78rem 1.1rem;
	font-size: 0.82rem;
	font-weight: 600;
	min-height: 3rem;
	line-height: 1.45;
}

.contact-faq .powder-faq-btn:hover {
	background: #faf1e4;
}

.contact-faq .powder-faq-btn__icon {
	width: 14px;
	height: 14px;
}

.contact-faq .powder-faq-btn__icon svg {
	width: 14px;
	height: 14px;
}

.contact-faq .powder-faq-body {
	padding: 0.7rem 1.35rem 0.25rem;
	background: transparent;
}

.contact-faq .powder-faq-content p {
	text-align: right;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.9;
	color: #7C5A3D;
	margin: 0;
}

/* Closing */
.contact-closing {
	padding: clamp(2.25rem, 4vw, 3.25rem) 0;
	background: #faf6f0;
}

.contact-closing__text {
	/* Full .container / --layout-width track — same as .header-inner / logo */
	max-width: none;
	width: 100%;
	margin-inline: 0;
	text-align: center;
	font-size: clamp(0.8rem, 1.1vw, 0.92rem);
	line-height: 2.15;
	color: #6b584a;
}

@media (max-width: 960px) {
	.contact-hero {
		/* Mobile/tablet fabric — distinct from desktop Contact-us header art */
		padding: calc(var(--header-h) + clamp(1.25rem, 3.5vw, 2.1rem)) 0 clamp(1.35rem, 3.5vw, 2.25rem);
		overflow: visible;
		min-height: clamp(26rem, 72vw, 34rem);
		background-image: var(--contact-fabric-mobile, var(--contact-fabric));
		background-size: cover;
		background-position: center top;
	}

	.contact-hero__brand {
		display: none;
	}

	.contact-hero__inner {
		grid-template-columns: 1fr;
		/* Match desktop: form on visual left (RTL end), fabric open on the right */
		justify-items: end;
		align-items: start;
		width: 100%;
		max-width: none;
		padding-inline: clamp(0.85rem, 4vw, 1.35rem);
		/* Leave fabric band visible above the form on tablet/mobile */
		padding-top: clamp(3.25rem, 12vw, 6.5rem);
		margin-top: 0;
	}

	.contact-form-stack {
		width: min(100%, 360px);
		max-width: 360px;
		margin-top: 0;
		position: relative;
		z-index: 2;
	}

	.contact-form-card {
		width: 100%;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(47, 30, 20, 0.12);
		padding: clamp(0.75rem, 1.5vw, 0.95rem) clamp(0.65rem, 1.3vw, 0.85rem) clamp(0.65rem, 1.3vw, 0.85rem);
		background: #F7EAD8;
		background-color: #F7EAD8;
		--gcf-ink: #1c1914;
		--gcf-muted: #6f6a60;
		--gcf-line: #e4dfd4;
		--gcf-fill: #f3efe6;
		--gcf-bg: #fffcf7;
		--gcf-accent: #b0893e;
		--gcf-ok: #2d6a46;
		--gcf-ok-bg: #eef6f0;
		--gcf-err: #9b2c2c;
		--gcf-err-bg: #f8eeee;
		color: #1c1914;
		color-scheme: light only;
	}

	.contact-form-card__title {
		text-align: center;
		padding: 0.1rem 0.4rem 0.65rem;
		font-size: clamp(0.88rem, 3vw, 1rem);
		color: #7C5A3D;
	}

	.contact-form-tabs {
		border-radius: 8px;
		padding: 0.25rem;
		background: #f3efe6;
		background-color: #f3efe6;
	}

	.contact-form-tab {
		color: #6f6a60;
		background: transparent;
	}

	.contact-form-tab.is-active {
		background: #fffcf7;
		background-color: #fffcf7;
		color: #1c1914;
	}

	.contact-form-panel {
		border-radius: 10px;
		background: #fffcf7;
		background-color: #fffcf7;
		border: 1px solid #e4dfd4;
		color-scheme: light only;
	}

	.contact-steps__dot {
		color: #6f6a60;
		background: #f3efe6;
		background-color: #f3efe6;
	}

	.contact-steps__dot.is-active {
		background: #1c1914;
		background-color: #1c1914;
		color: #fff;
	}

	.contact-steps__line {
		background: #e4dfd4;
	}

	.contact-steps__label {
		color: #6f6a60;
	}

	.contact-field label {
		color: #1c1914;
	}

	.contact-field__hint {
		color: #6f6a60;
	}

	.contact-field input,
	.contact-field select,
	.contact-field textarea {
		border-color: #e4dfd4;
		background: #fff;
		background-color: #fff;
		color: #1c1914;
		-webkit-text-fill-color: #1c1914;
		color-scheme: light only;
	}

	.contact-field select {
		background-color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236f6a60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: left 1rem center;
	}

	.contact-field input:disabled,
	.contact-field select:disabled {
		background: #f3efe6;
		background-color: #f3efe6;
		color: #6f6a60;
		-webkit-text-fill-color: #6f6a60;
		border-color: #e4dfd4;
	}

	.contact-field input::placeholder,
	.contact-field textarea::placeholder {
		color: #6f6a60;
		-webkit-text-fill-color: #6f6a60;
		opacity: 1;
	}

	.contact-btn--primary {
		background: #1c1914;
		background-color: #1c1914;
		color: #fff;
		-webkit-text-fill-color: #fff;
	}

	.contact-btn--ghost {
		background: #fff;
		background-color: #fff;
		color: #1c1914;
		-webkit-text-fill-color: #1c1914;
		border: 1px solid #e4dfd4;
	}

	.contact-track-intro {
		color: #6f6a60;
	}

	.contact-form-status {
		background: #f3efe6;
		color: #1c1914;
	}

	.contact-form-status.is-error {
		background: #f8eeee;
		color: #9b2c2c;
	}

	.contact-form-status.is-ok {
		background: #eef6f0;
		color: #2d6a46;
	}

	.contact-info {
		/* Clear gap under form — do not stick to hero card.
		   Use padding-top (not margin) so #F7EAD8 paints the gap between hero & info. */
		margin-top: 0;
		padding: clamp(0.85rem, 2.5vw, 1.35rem) 0 clamp(1.1rem, 2.4vw, 1.75rem);
		background: #F7EAD8;
	}

	/* Section-2: match desktop unified bar exactly */
	.contact-page .contact-info__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		align-items: stretch;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		margin-bottom: 0;
		background: #F7EAD8 !important;
		background-color: #F7EAD8 !important;
		border-radius: 16px;
		box-shadow: 0 -10px 32px rgba(74, 52, 40, 0.12), 0 8px 24px rgba(74, 52, 40, 0.08);
		overflow: hidden;
		border: 0;
		transform: none;
	}

	.contact-info__item {
		padding: clamp(1.15rem, 2.4vw, 1.85rem) clamp(0.55rem, 1.8vw, 1.65rem);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 0.55rem;
		min-width: 0;
		border-inline-start: 1px dashed rgba(122, 96, 74, 0.42);
		border-top: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		width: auto;
		box-sizing: border-box;
	}

	.contact-info__item:first-child {
		border-inline-start: 0;
	}

	.contact-info__item:nth-child(n + 3) {
		border-top: 0;
	}

	.contact-info__title {
		font-size: clamp(0.72rem, 2.1vw, 0.98rem);
	}

	.contact-info__text {
		font-size: clamp(0.68rem, 1.9vw, 0.86rem);
		max-width: none;
	}

	.contact-process {
		padding: clamp(0.9rem, 2.2vw, 1.35rem) 0;
		margin: 0;
		background: #F7EAD8;
		border-radius: 0;
		box-shadow: none;
	}

	.contact-process__inner,
	.contact-process__panel {
		flex-direction: column;
		align-items: center;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 1.25rem 1rem 1.75rem;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 6px 20px rgba(74, 52, 40, 0.08);
	}

	.contact-process__title {
		font-size: clamp(0.95rem, 3.2vw, 1.15rem);
		margin-bottom: 1rem;
		text-align: center;
	}

	.contact-process__card {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		background: transparent;
	}

	.contact-process__img {
		border-radius: 0;
		box-shadow: none;
		width: 100%;
		max-width: 100%;
	}

	.contact-map__card {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.contact-map__text {
		border-inline-end: 0;
		justify-content: center;
		text-align: center;
		padding: 1.5rem 1.25rem 1.85rem;
		gap: 0.75rem;
	}

	.contact-map__title {
		font-size: clamp(1.15rem, 4.2vw, 1.35rem);
		color: #5c3d2a;
	}

	.contact-map__address {
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.9;
		max-width: 22rem;
		padding: 0.65rem 0.9rem;
		color: #3a2a20;
		background: rgba(255, 252, 247, 0.92);
		border: 1px solid rgba(122, 96, 74, 0.22);
		border-radius: 10px;
	}

	.contact-map__text::after {
		inset-inline-end: auto;
		inset-inline-start: 1.15rem;
		right: 1.15rem;
		left: 1.15rem;
		top: auto;
		bottom: 0.85rem;
		width: auto;
		height: 0;
		border-inline-end: 0;
		border-bottom: 1px dashed rgba(122, 96, 74, 0.4);
	}

	.contact-map__embed {
		height: 340px;
		min-height: 340px;
		border-radius: 0;
	}

	.contact-map__embed iframe {
		inset: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.contact-map__open {
		top: 12px;
		left: 12px;
	}

}

@media (max-width: 640px) {
	.contact-hero {
		/* Taller hero so fabric band fills the upper viewport above the form */
		min-height: clamp(34rem, 110vw, 46rem);
		/* Gap below form is painted by .contact-info (#F7EAD8) — no fabric strip */
		padding-bottom: 0;
	}

	.contact-hero__brand {
		display: none;
	}

	.contact-hero__inner {
		/* Same track as section-2 / .header-inner / logo (--layout-width) */
		width: var(--layout-width);
		max-width: var(--layout-width);
		margin-inline: auto;
		padding-top: clamp(9.5rem, 52vw, 17rem);
		padding-inline: 0;
		justify-items: stretch;
	}

	.contact-form-stack {
		width: 100%;
		max-width: none;
		margin-top: 0;
	}

	.contact-form-card {
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(47, 30, 20, 0.12);
		padding: clamp(0.75rem, 3vw, 0.95rem) clamp(0.65rem, 3vw, 0.85rem) clamp(0.7rem, 3vw, 0.9rem);
		background: #F7EAD8;
		background-color: #F7EAD8;
		--gcf-ink: #1c1914;
		--gcf-muted: #6f6a60;
		--gcf-line: #e4dfd4;
		--gcf-fill: #f3efe6;
		--gcf-bg: #fffcf7;
		--gcf-accent: #b0893e;
		color: #1c1914;
		color-scheme: light only;
	}

	.contact-form-card__title {
		color: #7C5A3D;
	}

	.contact-form-tabs {
		background: #f3efe6;
		background-color: #f3efe6;
	}

	.contact-form-tab {
		color: #6f6a60;
	}

	.contact-form-tab.is-active {
		background: #fffcf7;
		background-color: #fffcf7;
		color: #1c1914;
	}

	.contact-form-panel {
		background: #fffcf7;
		background-color: #fffcf7;
		border-color: #e4dfd4;
		color-scheme: light only;
	}

	.contact-field input,
	.contact-field select,
	.contact-field textarea {
		background: #fff;
		background-color: #fff;
		color: #1c1914;
		-webkit-text-fill-color: #1c1914;
		border-color: #e4dfd4;
		color-scheme: light only;
	}

	.contact-btn--primary {
		background: #1c1914;
		background-color: #1c1914;
		color: #fff;
		-webkit-text-fill-color: #fff;
	}

	.contact-btn--ghost {
		background: #fff;
		background-color: #fff;
		color: #1c1914;
		-webkit-text-fill-color: #1c1914;
		border-color: #e4dfd4;
	}

	.contact-form-row,
	.contact-form-actions {
		grid-template-columns: 1fr;
	}

	/* Section-2: vertical stack + dashed dividers; box on .header-inner / logo track */
	.contact-page .contact-info > .container {
		width: var(--layout-width);
		max-width: var(--layout-width);
		padding-inline: 0;
		margin-inline: auto;
	}

	.contact-page .contact-info__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		align-items: stretch;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		background: #F7EAD8 !important;
		background-color: #F7EAD8 !important;
		box-shadow: 0 -10px 32px rgba(74, 52, 40, 0.12), 0 8px 24px rgba(74, 52, 40, 0.08);
		border-radius: 16px;
		overflow: hidden;
	}

	.contact-info {
		/* Mobile: uniform #F7EAD8 gap between form (section 1) and info (section 2) */
		margin-top: 0;
		padding-top: clamp(0.85rem, 2.5vw, 1.25rem);
		padding-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
		background: #F7EAD8;
		background-color: #F7EAD8;
	}

	.contact-info__item {
		border: 0;
		border-inline-start: 0;
		border-inline-end: 0;
		border-top: 1px dashed rgba(122, 96, 74, 0.42);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		padding: clamp(1.15rem, 4vw, 1.55rem) clamp(1rem, 4vw, 1.35rem);
		gap: 0.45rem;
	}

	.contact-info__item:first-child {
		border-inline-start: 0;
		border-top: 0;
	}

	.contact-info__item:nth-child(n + 3) {
		border-top: 1px dashed rgba(122, 96, 74, 0.42);
	}

	.contact-info__icon svg {
		width: 26px;
		height: 26px;
	}

	.contact-info__title {
		font-size: clamp(0.9rem, 3.4vw, 1.05rem);
	}

	.contact-info__text {
		max-width: 22ch;
		font-size: clamp(0.8rem, 3vw, 0.92rem);
		line-height: 1.75;
	}

	.contact-info__text--address {
		max-width: 18rem;
	}

	/* Contact FAQ: keep long question text inside button (mobile only) */
	.contact-faq .powder-faq-btn {
		height: auto;
		min-height: 2.75rem;
		align-items: center;
		white-space: normal;
	}

	.contact-faq .powder-faq-btn__text {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
		line-height: 1.45;
	}

}

/* -------------------------------------------------------------------------- */
/* About / History timeline (softlan.com/about-us)                            */
/* -------------------------------------------------------------------------- */
.about-page {
	--about-cream: #f4e6d7;
	--about-title: #5c3a1d;
	--about-text: #7c5a3d;
	--about-gold: #c59c5a;
	background: var(--about-cream);
}

.page-about.site-main {
	overflow: visible;
}

.about-timeline {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 100vh;
	width: 100%;
}

/* Match agency-board__nav (نمایندگی فروش city rail) */
.about-timeline__years {
	order: 2;
	flex: 0 0 clamp(11rem, 20%, 17rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.45rem;
	padding: calc(var(--header-h) + 1.35rem) 0.85rem 1.75rem 0.55rem;
	background: #f4e6d7;
	position: relative;
	z-index: 2;
	align-self: stretch;
	height: 100%;
	min-height: 0;
	min-width: 0;
	max-width: clamp(11rem, 20%, 17rem);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	box-sizing: border-box;
}

@media (min-width: 961px) {
	.about-timeline__years {
		align-self: stretch;
		justify-content: space-evenly;
		margin-top: 0;
		max-height: none;
		height: 100%;
		gap: 0.55rem;
		padding-top: calc(var(--header-h) + 1.5rem);
		padding-bottom: 2rem;
	}
}

.about-timeline__year {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.7rem;
	padding: 0.4rem 0.45rem;
	color: var(--about-text);
	font-size: clamp(0.98rem, 1.3vw, 1.2rem);
	font-weight: 600;
	line-height: 1.3;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.25s var(--ease), font-size 0.25s var(--ease);
	position: relative;
	text-align: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	white-space: nowrap;
}

.about-timeline__year:hover,
.about-timeline__year:focus-visible {
	color: var(--about-gold);
	outline: none;
}

.about-timeline__year.is-active {
	color: var(--about-gold);
	font-size: clamp(1.12rem, 1.5vw, 1.4rem);
	font-weight: 800;
}

.about-timeline__dot {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--about-text);
	opacity: 0.55;
	transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}

.about-timeline__year.is-active .about-timeline__dot,
.about-timeline__year:hover .about-timeline__dot {
	width: 18px;
	height: 18px;
	flex-basis: 18px;
	background: var(--about-gold);
	opacity: 1;
	transform: scale(1.05);
}

.about-timeline__year-label {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.about-timeline__panels {
	order: 1;
	flex: 1 1 auto;
	align-self: stretch;
	position: relative;
	min-width: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #efe3d4;
	overflow: hidden;
}

.about-timeline__panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* LTR shell so flex-start = physical left for every year (same as 1380) */
	direction: ltr;
	justify-content: flex-start;
	padding: calc(var(--header-h) + 1.5rem) clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
	background-image: var(--about-bg);
	/* Bias toward right-side product/frame so the ornate frame stays inside the panel */
	background-position: 72% bottom;
	background-repeat: no-repeat;
	/* Fill panel; keep aspect — no stretch/distortion */
	background-size: cover;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}

.about-timeline__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: relative;
	inset: auto;
	flex: 1 1 auto;
	width: 100%;
	/* Match full panels column height (years strip / section), not just content */
	height: 100%;
	min-height: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

/* Year 1380 mockup: full composite as section background (fabric + frame + bottle) */
.about-timeline__panel[data-about-panel="1380"] {
	background-image: var(--about-bg);
	background-position: 78% bottom;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.about-timeline__copy {
	position: relative;
	z-index: 2;
	/* Persian copy inside LTR panel; pinned to physical left like 1380 */
	direction: rtl;
	width: min(38%, 26rem);
	max-width: 100%;
	margin-left: clamp(1.25rem, 5vw, 4rem);
	margin-right: auto;
	margin-block-start: clamp(1.75rem, 4.5vh, 3.25rem);
	text-align: center;
	background: transparent;
}

.about-timeline__title,
.about-timeline__body {
	direction: rtl;
}

.about-timeline__title {
	color: var(--about-title);
	font-size: clamp(1.15rem, 2.1vw, 1.65rem);
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 1rem;
}

.about-timeline__body {
	color: var(--about-text);
	font-size: 15px;
	line-height: 2;
	text-align: justify;
}

.about-timeline__body p + p {
	margin-top: 0.85rem;
}

@media (max-width: 960px) {
	.about-timeline {
		flex-direction: column;
		min-height: 100svh;
		height: 100svh;
		max-height: 100svh;
		overflow: hidden;
	}

	/* Match agency-board__nav mobile rail */
	.about-timeline__years {
		order: 2;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.1rem;
		width: 100%;
		max-width: none;
		max-height: none;
		min-height: 0;
		height: auto;
		padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
		background: #f4e6d7;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		z-index: 3;
	}

	.about-timeline__year {
		flex: 0 0 auto;
		flex-direction: column;
		gap: 0.3rem;
		padding: 0.4rem 0.65rem;
		font-size: 0.9rem;
		width: auto;
		max-width: none;
	}

	.about-timeline__year-label {
		overflow: visible;
		text-overflow: unset;
	}

	.about-timeline__dot {
		width: 8px;
		height: 8px;
		flex-basis: 8px;
	}

	.about-timeline__year.is-active .about-timeline__dot,
	.about-timeline__year:hover .about-timeline__dot {
		width: 11px;
		height: 11px;
		flex-basis: 11px;
	}

	.about-timeline__panels {
		order: 1;
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #ffffff;
	}

	.about-timeline__panel {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: calc(var(--header-h) + 0.35rem) 0 0;
		direction: ltr;
		background-color: #ffffff;
		background-image: var(--about-bg);
		background-position: center top;
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.about-timeline__panel.is-active {
		height: 100%;
		min-height: 0;
	}

	.about-timeline__panel[data-about-panel="1380"] {
		background-position: center top;
		background-size: cover;
	}

	.about-timeline__copy {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: none;
		margin: 0;
		margin-top: auto;
		/* ~half text overlays image; lower half sits on white fade */
		flex: 0 0 auto;
		max-height: min(52%, 20rem);
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(197, 156, 90, 0.45) transparent;
		text-align: center;
		padding: 2.25rem 1.15rem 1.65rem;
		border-radius: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		/* Transparent over photo → solid white underneath */
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.22) 28%,
			rgba(255, 255, 255, 0.72) 58%,
			rgba(255, 255, 255, 0.95) 78%,
			#ffffff 100%
		);
	}

	.about-timeline__copy::-webkit-scrollbar {
		width: 3px;
	}

	.about-timeline__copy::-webkit-scrollbar-track {
		background: transparent;
	}

	.about-timeline__copy::-webkit-scrollbar-thumb {
		background: rgba(197, 156, 90, 0.45);
		border-radius: 3px;
	}

	.about-timeline__title {
		font-size: clamp(1.05rem, 4.2vw, 1.3rem);
	}

	.about-timeline__body {
		font-size: 0.92rem;
		line-height: 1.9;
		text-align: justify;
	}
}


/* -------------------------------------------------------------------------- */
/* Agency / Sales representation (softlan.com/نمایندگی-فروش)                 */
/* -------------------------------------------------------------------------- */
.agency-page {
	--agency-cream: #f4e6d7;
	--agency-text: #7c5a3d;
	--agency-gold: #c59c5a;
	--agency-ink: #2c1e1e;
	background: var(--agency-cream);
}

.agency-board {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	/* Two columns: city nav (physical left) + content panels (physical right) */
	height: 100vh;
	max-height: 100vh;
	width: 100%;
	background: var(--agency-cream);
	direction: rtl;
	overflow: hidden;
}

.agency-board__nav {
	order: 2;
	flex: 0 0 clamp(11rem, 20%, 17rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.45rem;
	padding: calc(var(--header-h) + 1.35rem) 0.85rem 1.75rem 0.55rem;
	background: #f4e6d7; /* mockup: solid cream left column */
	position: relative;
	z-index: 2;
	align-self: stretch;
	height: 100%;
	min-height: 0;
	min-width: 0;
	max-width: clamp(11rem, 20%, 17rem);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	box-sizing: border-box;
}

/* Desktop: full-height city rail (mockup) — larger type + spacing; scroll if needed */
@media (min-width: 961px) {
	.agency-board__nav {
		align-self: stretch;
		justify-content: space-evenly;
		margin-top: 0;
		max-height: none;
		height: 100%;
		gap: 0.55rem;
		padding-top: calc(var(--header-h) + 1.5rem);
		padding-bottom: 2rem;
	}
}

.agency-board__city {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.7rem;
	padding: 0.4rem 0.45rem;
	color: var(--agency-text);
	font-size: clamp(0.98rem, 1.3vw, 1.2rem);
	font-weight: 600;
	line-height: 1.3;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.25s var(--ease), font-size 0.25s var(--ease);
	position: relative;
	text-align: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	white-space: nowrap;
}

.agency-board__city:hover,
.agency-board__city:focus-visible {
	color: var(--agency-gold);
	outline: none;
}

.agency-board__city.is-active {
	color: var(--agency-gold);
	font-size: clamp(1.12rem, 1.5vw, 1.4rem);
	font-weight: 800;
}

.agency-board__dot {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--agency-text);
	opacity: 0.55;
	transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}

.agency-board__city.is-active .agency-board__dot,
.agency-board__city:hover .agency-board__dot {
	width: 18px;
	height: 18px;
	flex-basis: 18px;
	background: var(--agency-gold);
	opacity: 1;
	transform: scale(1.05);
}

.agency-board__city-label {
	letter-spacing: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.agency-board__panels {
	order: 1;
	flex: 1 1 auto;
	align-self: stretch;
	position: relative;
	inset: auto;
	width: auto;
	height: 100%;
	min-width: 0;
	min-height: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--agency-cream);
	display: flex;
	flex-direction: column;
}

.agency-board__panel {
	position: absolute;
	inset: 0;
	/* LTR grid matches artwork: text zone left, golden frame right */
	direction: ltr;
	display: grid;
	grid-template-columns: minmax(16rem, 46%) minmax(0, 1fr);
	align-items: center;
	justify-items: center;
	padding: calc(var(--header-h) + 1.5rem) clamp(1.25rem, 3.5vw, 3rem) 2.5rem;
	background-color: var(--agency-cream);
	background-image: var(--agency-bg);
	background-position: center center;
	background-repeat: no-repeat;
	/* Fill panel column; preserve aspect — never stretch/distort */
	background-size: cover;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.agency-board__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: relative;
	inset: auto;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

.agency-board__copy {
	/* Centered in the gap between city nav and golden frame */
	grid-column: 1;
	direction: rtl;
	width: min(100%, 28rem);
	max-width: 100%;
	max-height: calc(100% - 1rem);
	overflow-x: hidden;
	overflow-y: auto;
	text-align: right;
	color: var(--agency-ink);
	position: relative;
	z-index: 1;
	/* Bias copy upward so title sits at ~1/3 of the golden ring */
	align-self: center;
	transform: translateY(clamp(-2.5rem, -4vh, -1rem));
}

.agency-board__title {
	color: var(--agency-ink);
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 1.15rem;
}

.agency-board__branch + .agency-board__branch {
	margin-top: 1.15rem;
}

.agency-board__branch-title {
	color: #000000;
	font-size: 0.92rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	line-height: 1.5;
}

.agency-board__address,
.agency-board__phones {
	color: var(--agency-ink);
	font-size: 0.85rem;
	line-height: 2;
	margin: 0;
}

.agency-board__label {
	font-weight: 500;
}

.agency-board__phones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: 0.15rem;
}

.agency-board__phone {
	color: inherit;
	display: block;
	line-height: 2;
	direction: ltr;
	unicode-bidi: plaintext;
	text-align: right;
	width: 100%;
}

.agency-board__phone:hover {
	color: var(--agency-gold);
}


@media (max-width: 960px) {
	.agency-board {
		flex-direction: column;
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
		/* Mobile: no cream strip above BG — image bleeds under absolute header */
		padding-top: 0;
	}

	.agency-board__nav {
		order: 2;
		flex: none;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.1rem;
		width: 100%;
		max-width: none;
		max-height: none;
		min-height: 0;
		padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
		background: #f4e6d7;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.agency-board__city {
		flex: 0 0 auto;
		flex-direction: column;
		gap: 0.3rem;
		padding: 0.4rem 0.65rem;
		font-size: 0.9rem;
		width: auto;
		max-width: none;
	}

	.agency-board__city-label {
		overflow: visible;
		text-overflow: unset;
	}

	.agency-board__dot {
		width: 8px;
		height: 8px;
		flex-basis: 8px;
	}

	.agency-board__city.is-active .agency-board__dot,
	.agency-board__city:hover .agency-board__dot {
		width: 11px;
		height: 11px;
		flex-basis: 11px;
	}

	.agency-board__panels {
		order: 1;
		position: relative;
		inset: auto;
		width: 100%;
		/* Mobile art is 500×800 — size box to full BG (no cover crop) */
		min-height: 0;
		height: auto;
		aspect-ratio: 500 / 800;
		overflow: hidden;
	}

	.agency-board__panel {
		/* LTR shell; mobile copy pins to physical right (search icon) */
		direction: ltr;
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		justify-items: stretch;
		/* Match .header-inner / search-toggle inset; low bottom pad keeps copy under landmark */
		padding: calc(var(--header-h) + 0.35rem) calc((100% - var(--layout-width)) / 2) 0.25rem;
		align-items: flex-end;
		justify-content: flex-end;
		background-image: var(--agency-bg-mobile);
		background-position: center top;
		/* Exact fit to panel aspect — full mobile landmark visible */
		background-size: 100% 100%;
		overflow: hidden;
	}

	.agency-board__panel.is-active {
		position: absolute;
		inset: 0;
	}

	.agency-board__copy {
		grid-column: auto;
		/* Physical-right — clears Azadi; compact so block sits lower */
		direction: rtl;
		width: min(72%, 19rem);
		max-width: 100%;
		margin-left: auto;
		margin-right: 0;
		margin-top: auto;
		padding: 0.05rem 0.1rem 0;
		background: none;
		border-radius: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		/* Fit full copy without inner scroll on mobile */
		max-height: none;
		overflow: visible;
		overflow-y: visible;
		-webkit-overflow-scrolling: auto;
		transform: none;
		align-self: flex-end;
		text-align: right;
	}

	/* Tehran (first panel): extra-compact so copy clears Azadi Tower */
	.agency-board__panel[data-agency-panel="tehran"] .agency-board__copy {
		width: min(78%, 20.5rem);
	}

	.agency-board__panel[data-agency-panel="tehran"] .agency-board__title {
		margin-bottom: 0.28rem;
	}

	.agency-board__panel[data-agency-panel="tehran"] .agency-board__branch + .agency-board__branch {
		margin-top: 0.32rem;
	}

	.agency-board__title,
	.agency-board__branch-title,
	.agency-board__address,
	.agency-board__phones,
	.agency-board__phone {
		text-align: right;
	}

	.agency-board__phones {
		align-items: stretch;
	}

	.agency-board__title {
		font-size: clamp(1.05rem, 3.8vw, 1.3rem);
		margin-bottom: 0.35rem;
	}

	.agency-board__branch + .agency-board__branch {
		margin-top: 0.4rem;
	}

	.agency-board__branch-title {
		font-size: 0.84rem;
		margin-bottom: 0.18rem;
	}

	.agency-board__address,
	.agency-board__phones {
		font-size: 0.65rem;
		line-height: 1.4;
	}

	/* Full address on a single line (mobile only) */
	.agency-board__address {
		white-space: nowrap;
		font-size: clamp(0.52rem, 2.35vw, 0.68rem);
		letter-spacing: -0.01em;
	}
}

/* -------------------------------------------------------------------------- */
/* Campaign page (/campaign/)                                                 */
/* -------------------------------------------------------------------------- */
body.is-campaign-landing,
body.is-campaign-landing .page-campaign {
	background: var(--cream);
	background-color: var(--cream);
}

body.is-campaign-landing .site-header,
body.is-campaign-landing .site-footer {
	display: none !important;
}

.page-campaign {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp(1.5rem, 4vw, 2.5rem) 0;
	box-sizing: border-box;
}

.campaign-banner {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0 1rem;
}

.campaign-banner picture {
	display: block;
	width: 100%;
	max-width: 970px;
}

.campaign-banner__img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(74, 52, 40, 0.1);
}

.campaign-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1rem 0;
	text-align: center;
}

.campaign-cta__btn {
	position: relative;
	direction: ltr;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	min-height: 52px;
	padding: 0.75rem 1.6rem 0.75rem 1.75rem;
	border: none;
	border-radius: 10px;
	font-family: var(--font);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: #ef394e;
	text-decoration: none;
	box-shadow: none;
	animation: campaign-pulse 1.8s ease-in-out infinite;
	transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
	z-index: 1;
}

.campaign-cta__label {
	direction: rtl;
	unicode-bidi: plaintext;
}

.campaign-cta__smile {
	flex-shrink: 0;
	display: block;
	color: #fff;
}

.campaign-cta__btn:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	animation-play-state: paused;
	color: #fff;
}

.campaign-cta__btn:focus-visible {
	outline: 2px solid #ef394e;
	outline-offset: 3px;
}

.campaign-cta__hint {
	margin: 0;
	max-width: 28rem;
	font-size: clamp(0.92rem, 1.8vw, 1.05rem);
	font-weight: 500;
	line-height: 1.9;
	color: var(--brown);
}

@keyframes campaign-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 57, 78, 0.55);
	}
	70% {
		box-shadow: 0 0 0 18px rgba(239, 57, 78, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 57, 78, 0);
	}
}

@media (max-width: 767px) {
	.campaign-banner picture {
		max-width: 350px;
	}

	.campaign-cta__btn {
		width: min(100%, 320px);
	}
}