/* =========================================================================
   StarFroid — base (typography, reset, layout primitives)
   Applies the design tokens from style.css. Mobile-first (360px up).
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text);
	background-color: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Arabic / RTL: switch the whole stack to Cairo (brief §4, §7). */
html[lang^="ar"] body,
html[dir="rtl"] body,
.starfroid-rtl {
	font-family: var(--font-arabic);
}
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6,
.starfroid-rtl h1, .starfroid-rtl h2, .starfroid-rtl h3,
.starfroid-rtl h4, .starfroid-rtl h5, .starfroid-rtl h6 {
	font-family: var(--font-arabic);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	color: var(--c-primary);
	margin: 0 0 var(--space-4);
	font-weight: 700;
}
h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); }
h3 { font-size: var(--fs-400); }
h4 { font-size: var(--fs-300); }
h5 { font-size: var(--fs-200); }
h6 { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a {
	color: var(--c-secondary);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-primary); }

img { max-width: 100%; height: auto; }

/* ---------- Focus visibility (a11y, brief §9) ---------- */
:focus-visible {
	outline: 3px solid var(--c-fresh);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Layout primitives ---------- */
.sf-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.sf-section {
	padding-block: var(--space-7);
}
.sf-section--alt {
	background-color: var(--c-bg-alt);
}

/* Homepage full-bleed: Astra wraps the front page in .ast-container (max-width
   1240), which boxed the sections and left the hero/trust with white sides (and
   the 1200px .sf-front overflowed it → horizontal scroll). Free the homepage to
   full width so section backgrounds go edge-to-edge; each section's own
   .sf-container still constrains its content. */
.home #content .ast-container {
	max-width: none;
	padding-inline: 0;
	/* Astra makes .ast-container display:flex; as a flex parent it shrank
	   .sf-front to its content width (1200px) instead of filling, leaving a gap
	   on the right. Force block so the homepage fills the full viewport width. */
	display: block;
}

.sf-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-5);
	flex-wrap: wrap;
}
.sf-section__title {
	margin: 0;
	font-size: var(--fs-400);
}
.sf-section__link {
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* ---------- Icons ---------- */
.sf-icon {
	display: inline-block;
	vertical-align: middle;
	flex: none;
}
/* Mirror directional icons under RTL (brief §4, §7). */
.starfroid-rtl .sf-icon--dir {
	transform: scaleX(-1);
}

/* ---------- COD reassurance pill (cyan) — shared (brief §6) ---------- */
.sf-cod-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--c-fresh-soft);
	color: var(--c-primary);
	font-weight: 600;
	font-size: var(--fs-100);
	line-height: 1;
}
.sf-cod-badge .sf-icon { color: var(--c-fresh); }

/* Generic cyan / sale pill */
.sf-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-100);
	font-weight: 600;
	line-height: 1.2;
}
.sf-pill--fresh { background: var(--c-fresh); color: #fff; }
.sf-pill--sale { background: var(--c-accent); color: #fff; }
.sf-pill--success { background: rgba(31, 169, 113, .12); color: var(--c-success); }
.sf-pill--error { background: rgba(224, 65, 62, .12); color: var(--c-error); }

/* ---------- Utilities ---------- */
.sf-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.sf-skip-link {
	position: absolute;
	inset-inline-start: var(--space-4);
	inset-block-start: -100px;
	z-index: var(--z-drawer);
	background: var(--c-primary);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-input);
}
.sf-skip-link:focus { inset-block-start: var(--space-4); color: #fff; }

.sf-overlay {
	position: fixed;
	inset: 0;
	background: var(--c-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
	z-index: var(--z-overlay);
}
.sf-overlay.is-active { opacity: 1; visibility: visible; }

/* ---------- Price ---------- */
.sf-price ins,
.price ins { text-decoration: none; font-weight: 700; color: var(--c-primary); }
.sf-price del,
.price del { color: var(--c-text-muted); font-weight: 400; opacity: .8; margin-inline-end: var(--space-2); }

/* ---------- Responsive type bump ---------- */
@media (min-width: 768px) {
	h1 { font-size: var(--fs-700); }
	h2 { font-size: var(--fs-600); }
	.sf-section__title { font-size: var(--fs-500); }
}

/* ---------- Reduced motion (brief §4) ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}