/* Tiered Pack Pricing – product widget */
.tpp-widget {
	--tpp-primary: #e3262f;
	--tpp-primary-end: #e5521f;
	--tpp-box-bg: #fff;
	--tpp-card-bg: #fff;
	--tpp-card-border: #e5e5e5;
	--tpp-active-bg: #fff6f6;
	--tpp-text: #1d1d1f;
	--tpp-muted: #6e6e73;
	--tpp-badge-bg: #e3262f;
	--tpp-badge-text: #fff;
	--tpp-btn-text: #fff;
	--tpp-radius: 16px;
	--tpp-btn-radius: 24px;
	--tpp-font: inherit;
	--tpp-scale: 1;
	--tpp-cols: 3;
	--tpp-cols-m: 3;
	direction: rtl;
	text-align: right;
	font-family: var(--tpp-font);
	font-size: calc(15px * var(--tpp-scale));
	color: var(--tpp-text);
	margin: 0 0 1.2em;
	width: 100%;
	clear: both;
	line-height: 1.6;
	container-type: inline-size;
}
.tpp-widget { min-width: min(100%, 300px); }
/* Themes that make the add-to-cart wrapper a flex row: give the widget the full row. */
form.cart .tpp-widget { flex: 1 1 100%; max-width: 100%; }
form.cart :has(> .tpp-widget) { flex-wrap: wrap; flex: 1 1 100%; width: 100%; max-width: 100%; }
.tpp-widget.tpp-relocated { margin-top: 1em; }
.tpp-widget *, .tpp-widget *::before, .tpp-widget *::after { box-sizing: border-box; }
.tpp-widget button, .tpp-swatches button { text-decoration: none !important; }
.tpp-widget button { font-family: inherit; letter-spacing: normal; text-transform: none; line-height: 1.4; }

.tpp-inner { display: flex; flex-direction: column; gap: 1em; }
.tpp-inner.tpp-boxed {
	background: var(--tpp-box-bg);
	border-radius: calc(var(--tpp-radius) + 8px);
	padding: 1.25em;
	border: 1px solid rgba(0, 0, 0, .04);
}
.tpp-inner.tpp-boxed.tpp-shadow { box-shadow: 0 6px 28px rgba(17, 17, 26, .07); border-color: transparent; }

/* Header */
.tpp-head { display: flex; flex-direction: column; gap: .15em; }
.tpp-head-label { color: var(--tpp-muted); font-size: .85em; }
.tpp-head-price { display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; }
.tpp-amount { font-size: 2.2em; font-weight: 800; line-height: 1.15; color: var(--tpp-text); }
.tpp-cur { color: var(--tpp-muted); font-size: .9em; }
.tpp-from { color: var(--tpp-muted); font-size: .95em; }
.tpp-old { color: var(--tpp-muted); font-size: .95em; opacity: .8; }
.tpp-pack-line { font-weight: 700; font-size: .9em; color: var(--tpp-text); opacity: .85; }

/* Cards */
.tpp-cards {
	display: grid;
	grid-template-columns: repeat(var(--tpp-cols), minmax(0, 1fr));
	gap: .75em;
	padding-top: .55em;
}
.tpp-widget .tpp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2em;
	min-height: 4.6em;
	margin: 0;
	padding: .85em .5em .7em;
	background: var(--tpp-card-bg);
	color: var(--tpp-text);
	border: 1.5px solid var(--tpp-card-border);
	border-radius: var(--tpp-radius);
	box-shadow: none;
	cursor: pointer;
	text-align: center;
	font-weight: 400;
	font-size: 1em;
	transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
}
.tpp-widget .tpp-card:hover { border-color: var(--tpp-primary); transform: translateY(-1px); background: var(--tpp-card-bg); color: var(--tpp-text); }
.tpp-widget .tpp-card:focus-visible { outline: 2px solid var(--tpp-primary); outline-offset: 2px; }
.tpp-widget .tpp-card.is-active {
	border-color: var(--tpp-primary);
	border-width: 2px;
	background: var(--tpp-active-bg);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--tpp-primary) 14%, transparent);
}
.tpp-widget .tpp-card.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }
.tpp-card-title { font-size: .82em; color: var(--tpp-muted); }
.tpp-card.is-active .tpp-card-title { color: var(--tpp-text); }
.tpp-card-price { font-size: .8em; color: var(--tpp-muted); white-space: nowrap; }
.tpp-card-price b { font-size: 1.3em; font-weight: 800; color: var(--tpp-text); }
.tpp-card-desc { font-size: .7em; color: var(--tpp-primary); }
.tpp-badge {
	position: absolute;
	top: -.75em;
	left: .6em;
	background: var(--tpp-badge-bg);
	color: var(--tpp-badge-text);
	font-size: .72em;
	font-weight: 700;
	line-height: 1;
	padding: .45em .7em;
	border-radius: 999px;
	box-shadow: 0 3px 8px color-mix(in srgb, var(--tpp-badge-bg) 35%, transparent);
	white-space: nowrap;
}

.tpp-note { font-size: .78em; color: var(--tpp-muted); }

/* Actions */
.tpp-actions { display: flex; gap: .75em; align-items: stretch; }
.tpp-stepper {
	flex: 0 0 auto;
	min-width: 10.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1.5px solid var(--tpp-card-border);
	border-radius: var(--tpp-btn-radius);
	padding: .25em .5em;
	background: var(--tpp-card-bg);
}
.tpp-widget .tpp-step {
	width: 2.2em;
	height: 2.2em;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tpp-text);
	font-size: 1.3em;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}
.tpp-widget .tpp-step:hover:not(:disabled) { background: var(--tpp-active-bg); color: var(--tpp-primary); }
.tpp-widget .tpp-step:disabled { opacity: .3; cursor: default; }
.tpp-step-val { display: flex; flex-direction: column; align-items: center; line-height: 1.25; padding: 0 .4em; }
.tpp-step-val b { font-weight: 800; font-size: 1em; white-space: nowrap; }
.tpp-step-val small { font-size: .72em; color: var(--tpp-muted); white-space: nowrap; }

.tpp-widget .tpp-add {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 3.3em;
	margin: 0;
	padding: .7em 1.2em;
	border: 0;
	border-radius: var(--tpp-btn-radius);
	background: linear-gradient(90deg, var(--tpp-primary-end), var(--tpp-primary));
	color: var(--tpp-btn-text);
	font-size: 1em;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--tpp-primary) 32%, transparent);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.tpp-widget .tpp-add:hover { filter: brightness(1.05); transform: translateY(-1px); color: var(--tpp-btn-text); }
.tpp-widget .tpp-add:active { transform: translateY(0); }
.tpp-widget .tpp-add.is-loading { opacity: .7; pointer-events: none; }
.tpp-widget .tpp-add.is-loading svg { animation: tpp-pulse .8s infinite alternate; }
@keyframes tpp-pulse { to { opacity: .3; } }

.tpp-msg {
	font-size: .82em;
	color: var(--tpp-primary);
	background: var(--tpp-active-bg);
	border-radius: calc(var(--tpp-radius) / 2);
	padding: .5em .8em;
}

/* Footer */
.tpp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-top: .9em;
	border-top: 1px solid var(--tpp-card-border);
}
.tpp-hint { font-size: .8em; color: var(--tpp-muted); }
.tpp-total { white-space: nowrap; }
.tpp-total b { font-size: 1.45em; font-weight: 800; }
.tpp-total span { font-size: .95em; font-weight: 700; }

/* Native form controls */
form.cart.tpp-native-hidden .quantity,
form.cart.tpp-native-hidden .single_add_to_cart_button,
form.cart.tpp-assort-on .quantity,
form.cart.tpp-assort-on .single_add_to_cart_button,
form.cart.tpp-assort-on .variations,
form.cart.tpp-assort-on .single_variation,
form.cart.tpp-assort-on .reset_variations,
form.cart.tpp-multi-on .variations,
form.cart.tpp-multi-on .single_variation,
form.cart.tpp-multi-on .reset_variations,
form.cart.tpp-multi-on .quantity,
form.cart.tpp-multi-on .single_add_to_cart_button { display: none !important; }

form.cart .tpp-bar-hidden { display: none !important; }

/* Cart */
.tpp-locked-qty { display: inline-block; min-width: 2.5em; text-align: center; font-weight: 700; }

/* Shop badge */
.tpp-loop-badge {
	display: block;
	margin-top: .3em;
	font-size: .8em;
	font-weight: 700;
	color: var(--tpp-primary, #e3262f);
	font-family: var(--tpp-font, inherit);
}

@media (max-width: 600px) {
	.tpp-cards { grid-template-columns: repeat(var(--tpp-cols-m), minmax(0, 1fr)); gap: .6em; }
	.tpp-inner.tpp-boxed { padding: 1em; }
	.tpp-amount { font-size: 1.9em; }
	.tpp-stepper { min-width: 7.6em; padding: .2em .3em; }
	.tpp-widget .tpp-add { padding: .6em .7em; font-size: .88em; white-space: nowrap; gap: .35em; }
	.tpp-foot { flex-wrap: wrap; }
}
@media (max-width: 360px) {
	.tpp-actions { flex-direction: column; }
}

/* Narrow containers (sidebars, quick-view popups, preview) */
@container (max-width: 480px) {
	.tpp-cards { grid-template-columns: repeat(var(--tpp-cols-m), minmax(0, 1fr)); gap: .6em; }
	.tpp-inner.tpp-boxed { padding: 1em; }
	.tpp-amount { font-size: 1.9em; }
	.tpp-stepper { min-width: 7.6em; padding: .2em .3em; }
	.tpp-widget .tpp-step { width: 1.9em; height: 1.9em; }
	.tpp-widget .tpp-add { padding: .6em .7em; font-size: .88em; white-space: nowrap; gap: .35em; }
	.tpp-foot { flex-wrap: wrap; }
}
@container (max-width: 330px) {
	.tpp-actions { flex-direction: column; }
	.tpp-widget .tpp-add svg { display: none; }
}

/* Swatches (colour & size) */
.tpp-sw-original { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: 0 !important; }
form.tpp-has-swatches .variations select.tpp-sw-original + .select2,
form.tpp-has-swatches .variations select.tpp-sw-original ~ .nice-select { display: none !important; }
.tpp-swatches { display: flex; flex-wrap: wrap; gap: .55em; margin: .35em 0 .2em; direction: rtl; font-family: var(--tpp-font, inherit); }
.tpp-swatches .tpp-sw {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	margin: 0;
	padding: .5em .95em;
	min-width: 3.1em;
	min-height: 2.6em;
	background: var(--tpp-card-bg, #fff);
	color: var(--tpp-text, #1d1d1f);
	border: 1.5px solid var(--tpp-card-border, #e5e5e5);
	border-radius: var(--tpp-btn-radius, 24px);
	font-size: .92em;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.tpp-swatches .tpp-sw:hover { border-color: var(--tpp-primary, #e3262f); transform: translateY(-1px); background: var(--tpp-card-bg, #fff); color: var(--tpp-text, #1d1d1f); }
.tpp-swatches .tpp-sw.is-selected {
	border-color: var(--tpp-primary, #e3262f);
	border-width: 2px;
	background: var(--tpp-active-bg, #fff6f6);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--tpp-primary, #e3262f) 18%, transparent);
}
.tpp-swatches .tpp-sw.is-selected::after {
	content: "✓";
	position: absolute;
	top: -.55em;
	left: -.35em;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: var(--tpp-primary, #e3262f);
	color: #fff;
	font-size: .72em;
	line-height: 1.35em;
	text-align: center;
}
.tpp-swatches .tpp-sw.is-disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; transform: none; }
.tpp-swatches--color .tpp-sw { padding: .4em .5em .4em .9em; }
.tpp-sw-dot {
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.tpp-sw-dot.is-light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tpp-sw-current { font-weight: 700; color: var(--tpp-primary, #e3262f); }
form.tpp-has-swatches .variations td.value { padding-bottom: .6em; }

/* Tier colour (e.g. green «۲ عددی») */
.tpp-widget .tpp-card.has-accent { border-color: color-mix(in srgb, var(--tpp-c) 45%, var(--tpp-card-border)); }
.tpp-widget .tpp-card.has-accent .tpp-badge { background: var(--tpp-c); box-shadow: 0 3px 8px color-mix(in srgb, var(--tpp-c) 35%, transparent); }
.tpp-widget .tpp-card.has-accent .tpp-card-title { color: var(--tpp-c); font-weight: 700; }
.tpp-widget .tpp-card.has-accent:hover { border-color: var(--tpp-c); }
.tpp-widget .tpp-card.has-accent.is-active {
	border-color: var(--tpp-c);
	background: color-mix(in srgb, var(--tpp-c) 9%, var(--tpp-card-bg));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--tpp-c) 22%, transparent);
}
.tpp-inner.has-accent .tpp-add { background: linear-gradient(90deg, var(--tpp-primary-end), var(--tpp-primary)); }

/* Per-piece choice */
.tpp-picks { display: flex; flex-direction: column; gap: .7em; }
.tpp-picks-title { font-size: .85em; font-weight: 700; color: var(--tpp-text); }
.tpp-pick {
	border: 1.5px dashed var(--tpp-card-border);
	border-radius: var(--tpp-radius);
	padding: .7em .85em .55em;
	background: var(--tpp-card-bg);
	transition: border-color .15s, background-color .15s;
}
.tpp-pick.is-done { border-style: solid; border-color: var(--tpp-primary); background: var(--tpp-active-bg); }
.tpp-pick-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .35em; }
.tpp-pick-head b { font-size: .9em; }
.tpp-pick-sum { font-size: .78em; color: var(--tpp-primary); font-weight: 700; }
.tpp-pick-attr { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin-top: .25em; }
.tpp-pick-label { font-size: .78em; color: var(--tpp-muted); min-width: 3.6em; }
.tpp-pick .tpp-swatches { margin: 0; gap: .45em; }
.tpp-pick .tpp-swatches .tpp-sw { min-height: 2.25em; padding: .35em .8em; font-size: .85em; }
.tpp-pick .tpp-swatches--color .tpp-sw { padding: .3em .45em .3em .75em; }
.tpp-pick .tpp-sw-dot { width: 1.35em; height: 1.35em; }