/*
 * Mashin Irani — home section restyles (compact loyalty, reviews carousel, blog).
 * Front page only. Tokens from tokens.css.
 */

/* ---------- Compact loyalty strip ---------- */
#loyalty.section { padding-block: var(--space-8, 32px); }
#loyalty .mi-loyalty-mini {
	display: flex;
	align-items: center;
	gap: var(--space-5, 20px);
	flex-wrap: wrap;
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border, #d9cbc2);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16, 33, 52, .06));
	padding: var(--space-4, 16px) var(--space-5, 20px);
}
#loyalty .mi-loyalty-mini .ml-ico {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: var(--radius-pill, 999px);
	background: linear-gradient(135deg, var(--gold-500, #896f3d), var(--gold-300, #e0c58f));
	display: flex;
	align-items: center;
	justify-content: center;
}
#loyalty .mi-loyalty-mini .ml-ico svg { width: 24px; height: 24px; fill: var(--navy-900, #102134); }
#loyalty .mi-loyalty-mini .ml-txt { flex: 1 1 240px; min-width: 0; }
#loyalty .mi-loyalty-mini .ml-txt b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy-900, #102134); }
#loyalty .mi-loyalty-mini .ml-txt span { display: block; font-size: .84rem; color: var(--text-secondary, #404751); margin-top: 2px; line-height: 1.6; }
#loyalty .mi-loyalty-mini .ml-cta { flex: none; }
@media (max-width: 640px) {
	#loyalty.section { padding-block: var(--space-6, 24px); }
	#loyalty .mi-loyalty-mini { flex-direction: column; align-items: stretch; text-align: start; gap: var(--space-3, 12px); }
	/* In the column layout, flex:1 1 240px made 240px a HEIGHT basis (huge empty strip); size to content instead. */
	#loyalty .mi-loyalty-mini .ml-txt { flex: none; }
	#loyalty .mi-loyalty-mini .ml-cta { width: 100%; }
}

/* ---------- Reviews carousel (real product reviews) ---------- */
#reviews.section { padding-block: var(--space-10, 40px); }
#reviews .rev-mini { display: flex; align-items: center; gap: var(--space-2, 8px); }
#reviews .rev-mini .big { font-size: 2rem; font-weight: 800; color: var(--gold-500, #896f3d); line-height: 1; }
#reviews .rev-mini .stars { display: inline-flex; gap: 1px; }
#reviews .rev-mini .stars svg { width: 15px; height: 15px; fill: var(--gold-500, #896f3d); }
#reviews .rev-mini .rev-count { font-size: .8rem; color: var(--text-secondary, #404751); }
#reviews .carousel { position: relative; }
#reviews .carousel .rail {
	display: flex;
	gap: var(--space-4, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-2, 8px);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
#reviews .carousel .rail::-webkit-scrollbar { display: none; }
#reviews .carousel .rail .rev {
	flex: 0 0 300px;
	scroll-snap-align: start;
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border, #d9cbc2);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16, 33, 52, .06));
	padding: var(--space-5, 20px);
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}
#reviews .rail .rev .who { display: flex; align-items: center; gap: var(--space-2, 8px); }
#reviews .rail .rev .who > div { display: flex; flex-direction: column; min-width: 0; }
#reviews .rail .rev .who .av { width: 36px; height: 36px; border-radius: var(--radius-pill, 999px); background: var(--navy-900, #102134); color: var(--gold-300, #e0c58f); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
#reviews .rail .rev .who b { font-size: .9rem; font-weight: 700; color: var(--navy-900, #102134); display: flex; align-items: center; gap: 4px; }
#reviews .rail .rev .who .verified svg { width: 14px; height: 14px; fill: var(--success, #2e7d5b); }
#reviews .rail .rev .who .vtag { font-size: .74rem; color: var(--text-tertiary, #6e6a66); }
#reviews .rail .rev .stars { display: inline-flex; gap: 1px; }
#reviews .rail .rev .stars svg { width: 15px; height: 15px; fill: var(--gold-500, #896f3d); }
#reviews .rail .rev p { font-size: .88rem; line-height: 1.85; color: var(--text-secondary, #404751); margin: 0; flex: 1; }
#reviews .rail .rev .rtime { font-size: .74rem; color: var(--text-tertiary, #6e6a66); }
@media (max-width: 640px) {
	#reviews .carousel .rail .rev { flex-basis: 82vw; }
	#reviews .sec-head { flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); }
}

/* ---------- Blog carousel (last section · responsive 4/2/1-up + 3s autoplay) ---------- */
#blog.section { padding-block: var(--space-10, 40px); }
#blog .chips { margin-bottom: var(--space-5, 20px); }
#blog .carousel { position: relative; }
#blog .carousel .rail {
	display: flex;
	gap: var(--space-4, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-2, 8px);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
#blog .carousel .rail::-webkit-scrollbar { display: none; }
#blog .carousel .rail .post {
	flex: 0 0 calc(25% - (var(--space-4, 16px) * 3 / 4));
	scroll-snap-align: start;
	margin: 0;
}
@media (max-width: 1024px) {
	#blog .carousel .rail .post { flex-basis: calc(50% - (var(--space-4, 16px) / 2)); }
}
@media (max-width: 720px) {
	#blog .carousel .rail .post { flex-basis: 82vw; }
	#blog .sec-head { flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); }
}

/* ---------- Bestseller rail arrows: point OUTWARD (match the mi-railnav carousels) ---------- */
/* The frozen .car-nav chevrons pointed inward (prev on the left → ►, next on the right → ◄);
   swap the scaleX flips so the left arrow points ◄ and the right arrow ►, like every other carousel. */
.car-nav.prev svg { transform: scaleX(1) !important; }
.car-nav.next svg { transform: scaleX(-1) !important; }

/* ---------- Wholesale form: submit feedback + success state ---------- */
.wform .mi-ws-msg {
	margin: var(--space-2, 8px) 0 0;
	font-size: .82rem;
	line-height: 1.7;
	padding: var(--space-2, 8px) var(--space-3, 12px);
	border-radius: var(--radius-md, 8px);
}
.wform .mi-ws-msg[data-kind="err"] { color: var(--clay-error, #b4402e); background: rgba(180, 64, 46, .08); }
.wform .mi-ws-msg[data-kind="ok"] { color: var(--success, #2e7d5b); background: rgba(46, 125, 91, .08); }
.wform button[disabled] { opacity: .6; cursor: progress; }
.mi-ws-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2, 8px);
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border, #d9cbc2);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16, 33, 52, .06));
	padding: var(--space-7, 28px) var(--space-5, 20px);
}
.mi-ws-done svg { width: 44px; height: 44px; fill: var(--success, #2e7d5b); }
.mi-ws-done b { font-size: 1.05rem; color: var(--navy-900, #102134); }
.mi-ws-done span { font-size: .85rem; color: var(--text-secondary, #404751); line-height: 1.7; }