/* ============================================================
   GLOBAL STYLES — StoreSystem
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
	--color-primary:     #e30613;
	--color-text-primary: #2a2a2a;

	--color-primary-hover: #b91c1c;
	--color-dark:        #0f0f0f;
	--color-dark-soft:   #1a1a1a;
	--color-text:        #111111;
	--color-text-muted:  #6b7280;
	--color-border:      #e5e7eb;
	--color-bg:          #ffffff;
	--color-bg-soft:     #f9fafb;

	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-full: 100px;

	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* ── Typography ──────────────────────────────────────────── */
h2, h3, h4, h5, h6 {
	font-weight: 600;
}

/* ── Container ───────────────────────────────────────────── */
.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 768px) {
	
}

/* ── Section heading ─────────────────────────────────────── */
.section-heading {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 32px;
}

.section-heading .eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--color-primary);
}

.section-heading .section-title {
	font-size: clamp(24px, 4.2vw, 36px);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.5px;
	margin-top: 0;
	margin-bottom: 12px;
	color: var(--color-text-primary);
}

.section-heading .section-description {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	max-width: 630px;
	margin: auto;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn,
.primary-button,
.secondary-button,
.ghost-button {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .08s ease, background .2s ease;
	line-height: 1;
	
}
.btn span,
.primary-button span,
.secondary-button span,
.ghost-button span {
	font-size: 1rem;
}

.primary-button,
.btn--primary {
	padding: 18px 28px;
	font-size: 17px;
	height: 100%;
}

.btn:hover,
.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
	opacity: 0.88;
}

.primary-button,
.btn--primary {
	background: var(--color-primary);
	color: #fff !important;
	box-shadow: none !important;
	font-weight: 700;
}

.primary-button:hover,
.btn--primary:hover {
	background: #b80410;
	box-shadow: none;
	opacity: 1;
	color:white;
	transition: linear 0.2s all;
}

.secondary-button,
.btn--secondary {
	background: var(--color-dark);
	color: #fff;
}

.ghost-button,
.btn--ghost {
	background: transparent;
	border: 2px solid var(--color-border);
	color: var(--color-text);
}

.ghost-button:hover,
.btn--ghost:hover {
	border-color: var(--color-text);
	opacity: 1;
}

.ghost-button--light,
.btn--ghost-light {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 1);
	color: #fff !important;
	font-weight: 700;
	font-size: 17px;
}

.ghost-button--light:hover,
.btn--ghost-light:hover {
	border-color: #fff;
	opacity: 1;
	color:white;
}

/* ── Badge / pill ────────────────────────────────────────── */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.badge--red   { background: var(--color-primary); color: #fff; }
.badge--green { background: #dcfce7; color: #15803d; }
.badge--gray  { background: var(--color-bg-soft); color: var(--color-text-muted); }