/* =========================================================
   RESET
========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   ROOT COLOURS — COCONUT JOWAR
========================================================= */
:root {
  --jowar-brown: #6a4a35;     /* cookie body */
  --jowar-dark: #4a3226;      /* headings */
  --seed-cream: #e6dcc6;      /* sesame seed tone */
  --bg-warm: #f7f0e8;         /* parchment background */
  --text-main: #3a2f28;
  --text-soft: #7a6a60;
}

/* =========================================================
   BASE
========================================================= */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 15%, #f1e7dc 0%, transparent 42%),
    radial-gradient(circle at 80% 35%, #efe3d6 0%, transparent 45%),
    var(--bg-warm);
  color: var(--text-main);
  line-height: 1.6;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
}

/* =========================================================
   HEADER
========================================================= */
.header {
  text-align: center;
  margin-bottom: 32px;
}

/* Heading + veg icon */
.title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.title-wrap h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--jowar-dark);
  line-height: 1.25;
}

/* Veg badge */
.veg-badge {
  display: inline-flex;
  align-items: center;
}

.veg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* Sesame seed cue (decorative) */
.seed-cue {
  width: 14px;
  height: 7px;
  margin: 8px auto 0;
  background: var(--seed-cream);
  border-radius: 60% 40%;
  opacity: 0.85;
}

/* Tagline */
.tagline {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* =========================================================
   CARDS — EARTHY & MATTE
========================================================= */
.card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(79, 53, 42, 0.06);
}

.card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--jowar-brown);
}

.card p {
  font-weight: 450;
  color: var(--text-main);
}

/* Ingredients / Allergen separation */
.allergen-block {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #e1d6cc;
}

/* =========================================================
   LISTS
========================================================= */
.card ul {
  list-style: none;
}

.card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--seed-cream);
  font-weight: bold;
}

/* =========================================================
   TABLE
========================================================= */
table {
  width: 100%;
  border-collapse: collapse;
}

table td {
  padding: 8px 0;
  vertical-align: top;
}

table td:first-child {
  width: 40%;
  font-weight: 600;
}

/* =========================================================
   FSSAI BLOCK
========================================================= */
.fssai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.fssai-logo {
  height: 32px;
  width: auto;
}

.fssai-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Highlight card */
.highlight {
  border-left: 5px solid var(--jowar-brown);
  background-color: #fff9f4;
}

/* =========================================================
   CTA
========================================================= */
.cta {
  text-align: center;
  margin: 34px 0;
}

.cta a {
  display: inline-block;
  background-color: #6b7b3e; /* millet green */
  color: #ffffff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   FOOTER
========================================================= */
.footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 32px;
}

/* =========================================================
   MOBILE OPTIMISATION
========================================================= */
@media (max-width: 480px) {
  .title-wrap h1 {
    font-size: 1.75rem;
  }

  .seed-cue {
    display: none;
  }
}





/* =========================================================
   ✅ PREMIUM RESPONSIVE NUTRITION CARD (MILASTY)
========================================================= */

/* Nutrition Card Container */
.nutrition-card {
  padding: 26px;
}

/* Title Styling */
.nutrition-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #5a3d2b;
  margin-bottom: 10px;
}

.nutrition-title span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #8a6f5c;
}

/* Swipe Note (Mobile Only) */
.scroll-note {
  font-size: 0.82rem;
  color: #8a6f5c;
  margin-bottom: 10px;
  text-align: center;
  display: none; /* hidden on desktop */
}

/* Nutrition Table Outer Box */
.nutrition-table-wrap {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid #e7ddd4;
  background: #fffaf6;
  overflow: visible !important; /* ✅ allow scrolling */
}

/* ✅ Scroll Container */
.nutrition-scroll {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  display: block;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar Styling (Premium) */
.nutrition-scroll::-webkit-scrollbar {
  height: 6px;
}

.nutrition-scroll::-webkit-scrollbar-thumb {
  background: #d8c2b2;
  border-radius: 6px;
}

/* Table Base */
.nutrition-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 680px; /* ✅ perfect for 4 columns */
  font-size: 0.95rem;
}

/* Prevent Column Crushing */
.nutrition-table th,
.nutrition-table td {
  padding: 13px 14px;
  white-space: nowrap; /* ✅ stops wrapping */
}

/* Header Row */
.nutrition-table thead th {
  background: #f3e7dd;
  color: #4b2f1f;
  font-weight: 700;
  text-align: left;
}

/* Center Align Numeric Columns */
.nutrition-table th:nth-child(2),
.nutrition-table td:nth-child(2),
.nutrition-table th:nth-child(3),
.nutrition-table td:nth-child(3),
.nutrition-table th:nth-child(4),
.nutrition-table td:nth-child(4) {
  text-align: center;
}

/* Body Rows */
.nutrition-table tbody td {
  border-top: 1px solid #efe5dc;
  color: #3d2b1f;
}

/* Soft Alternate Rows */
.nutrition-table tbody tr:nth-child(even) td {
  background: #fffdfb;
}

/* Nutrient Name Emphasis */
.nutrition-table tbody td:first-child {
  font-weight: 600;
}

/* Report Link */
.nutrition-report-link {
  margin-top: 14px;
  font-size: 0.92rem;
}

.nutrition-report-link a {
  color: #7a4a2d;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed #c8a68f;
  padding-bottom: 1px;
}

.nutrition-report-link a:hover {
  color: #4b2f1f;
  border-bottom: 1px solid #4b2f1f;
}

/* =========================================================
   ✅ MOBILE OPTIMIZATION
========================================================= */
@media (max-width: 600px) {

  /* Show swipe note only on mobile */
  .scroll-note {
    display: block;
  }

  /* Slightly smaller font */
  .nutrition-table {
    font-size: 0.88rem;
  }

  /* Reduce padding for compact view */
  .nutrition-table th,
  .nutrition-table td {
    padding: 11px 12px;
  }
}