/* ============================================
   MITHOOOS — Global Styles
   ============================================ */
/* NOTE: Google Fonts are loaded via <link> in each HTML <head>.
   Do NOT @import them here — that causes a duplicate HTTP request. */
@import 'variables.css';

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-body);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }

/* ── Container ── */
.container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 768px) { .container { padding: 0 var(--space-4); } }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--color-ink); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, var(--text-6xl)); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, var(--text-4xl)); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, var(--text-3xl)); font-weight: 600; }
h4 { font-size: var(--text-xl); font-weight: 600; }
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
  border-radius: var(--radius-full);
  transition: all var(--transition-spring);
  letter-spacing: .3px; white-space: nowrap;
  min-height: 44px;
}
.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--color-primary-dark); box-shadow: 0 12px 40px rgba(122,31,43,.28); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-outline {
  border: 2px solid var(--color-ink); color: var(--color-ink);
  background: transparent;
}
.btn-outline:hover { background: var(--color-ink); color: white; transform: translateY(-2px); }
.btn-ghost { color: var(--color-primary); background: transparent; padding: var(--space-2) var(--space-4); }
.btn-ghost:hover { background: var(--color-surface-alt); }
.btn-lg { padding: var(--space-4) var(--space-10); font-size: var(--text-base); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .3px;
}
.badge-new   { background: #D1FAE5; color: #065F46; }
.badge-sale  { background: #FEE2E2; color: #991B1B; }
.badge-hot   { background: #FEF3C7; color: #92400E; }
.badge-pct   { background: var(--color-primary); color: white; }

/* ── Cards ── */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── Section Titles ── */
.section-label {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.section-title { margin-bottom: var(--space-4); }
.section-desc { font-size: var(--text-lg); color: var(--color-body); max-width: 520px; }
.ui-icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; flex: 0 0 auto; }
.rating-inline-icon { width: .9em; height: .9em; vertical-align: -0.05em; color: var(--color-accent); }
.inline-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--color-accent); }
.inline-rating svg { width: 13px; height: 13px; }

/* ── Grid ── */
.grid-products { display: grid; gap: var(--space-6); }
@media (min-width: 480px)  { .grid-products { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px)  { .grid-products { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4,1fr); } }

/* ── Star Rating ── */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.star-filled { color: #F59E0B; }
.star-empty  { color: var(--color-border); }

/* ── Toast ── */
.toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-ink); color: white;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  font-size: var(--text-sm); font-weight: 500;
  animation: slideInRight .35s cubic-bezier(.34,1.56,.64,1);
  max-width: 360px;
}
.toast.success { border-left: 4px solid var(--color-success); }
.toast.error   { border-left: 4px solid var(--color-error); }
.toast.info    { border-left: 4px solid var(--color-info); }

/* ── Spinner ── */
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }

/* ── Skeleton ── */
.skeleton { background: linear-gradient(90deg, var(--color-border-soft) 25%, #e8ecf0 50%, var(--color-border-soft) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); }

/* ── Overlay ── */
.overlay { position: fixed; inset: 0; background: rgba(26,26,46,.55); backdrop-filter: blur(4px); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.overlay.active { opacity: 1; pointer-events: all; }

/* ── Animations ── */
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes shimmer     { to { background-position: -200% 0; } }
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight{ from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse       { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── Utility ── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.flex-center { display:flex;align-items:center;justify-content:center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.mb-0   { margin-bottom: 0; }
.mt-auto { margin-top: auto; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Footer legal links (replaces inline onmouseover handlers) ── */
.footer-legal-link {
  color: rgba(255,255,255,.4);
  transition: color var(--transition-fast);
}
.footer-legal-link:hover { color: var(--color-primary); }

/* ── Skip to main content (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 9999;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Utility: hide an element while its JS-driven counterpart is shown ──
   Used via classList.add/remove('hidden') across cart.js, admin product
   pages, etc. Kept !important so it always wins over inline display styles. */
.hidden { display: none !important; }

/* ── Print styles ── */
@media print {
  .navbar, .promo-banner, .mobile-nav, .overlay,
  .newsletter-section, .toast-container { display: none !important; }
  body { padding-top: 0 !important; }
  .hero { min-height: auto; padding: 2rem 0; }
}