:root {
  --cream: #f4f2ee;
  --sand: #efe5d8;
  --walnut: #2a2d34;
  --ink: #1f2a44;
  --sage: #1f2a44;
  --clay: #c58b45;
  --mist: #f5f2ed;
  --outline: #e4dcd1;
  --surface: #ffffff;
  --surface-alt: #faf7f2;
  --muted: #6f6a63;
  --muted-light: #9a9288;
  --brand: #1f2a44;
  --brand-strong: #151d2f;
  --brand-warm: #c58b45;
  --font-body: "Tajawal", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --font-display: "Tajawal", "Noto Sans Arabic", "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 12% 18%, #ffffff 0%, transparent 45%),
    radial-gradient(circle at 88% 10%, #efe5d8 0%, transparent 42%),
    linear-gradient(120deg, #f4f2ee 0%, #efe5d8 55%, #f5f2ed 100%);
  color: var(--ink);
  font-family: var(--font-body);
}

.font-display {
  font-family: var(--font-display);
}

.text-muted-light {
  color: var(--muted-light);
}

.thika-header {
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
}

.thika-nav a {
  color: #3b3f48;
  font-weight: 600;
  text-decoration: none;
}

.thika-nav a:hover {
  color: var(--brand);
}

.thika-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #f9f6f0;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(31, 42, 68, 0.2);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.thika-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--brand-strong);
  color: #fff;
}

.thika-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c1ab92;
  color: var(--brand);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.thika-btn-outline:hover {
  transform: translateY(-2px);
  border-color: var(--brand-warm);
  color: var(--brand-warm);
}

.thika-card {
  border: 1px solid var(--outline);
  border-radius: 26px;
  background: var(--surface);
}

.thika-card-soft {
  border: 1px dashed var(--outline);
  border-radius: 26px;
  background: var(--surface-alt);
}

.thika-page-header {
  border: 1px solid var(--outline);
  border-radius: 28px;
  background: var(--surface-alt);
  padding: 2rem;
}

.thika-pill {
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.thika-product-card {
  border: 1px solid var(--outline);
  border-radius: 26px;
  background: var(--surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.thika-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(31, 42, 68, 0.12);
}

.thika-product-image {
  height: 230px;
  background: linear-gradient(135deg, #efe5d8 0%, #e9ddcf 55%, #e3d6c6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.thika-product-image img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}

.thika-hero-card {
  border: 1px solid var(--outline);
  border-radius: 30px;
  background: var(--surface-alt);
  padding: 2rem;
}

.thika-gradient-card {
  border: 1px solid var(--outline);
  border-radius: 30px;
  background: linear-gradient(135deg, #e9ddcf 0%, #f1ebe2 50%, #fbf8f3 100%);
  padding: 2rem;
}

.thika-footer {
  border-top: 1px solid var(--outline);
  background: var(--mist);
}

.thika-footer-link {
  color: var(--muted);
  text-decoration: none;
}

.thika-footer-link:hover {
  color: var(--brand);
}

.thika-color-btn {
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}

.thika-color-btn.active,
.thika-color-btn:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.thika-variant-card {
  border-radius: 20px;
  border: 1px solid var(--outline);
  padding: 0.75rem 1rem;
  background: #fff;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.thika-variant-card.active {
  border-color: var(--brand);
  background: rgba(31, 42, 68, 0.05);
}

.thika-order-summary {
  border-radius: 28px;
  border: 1px solid var(--outline);
  background: #fff;
  padding: 1.5rem;
}

.thika-success {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
  border-radius: 16px;
  padding: 1rem;
}

.thika-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 16px;
  padding: 1rem;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade {
  animation: fade 0.35s ease-out both;
}

@keyframes press {
  0% { transform: scale(1); }
  45% { transform: scale(0.94); }
  75% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.animate-press {
  animation: press 0.18s ease-out both;
}

@media (max-width: 992px) {
  .thika-nav { display: none; }
}