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

/* =========================================================
   ROOT COLOURS (FROM COOKIE)
========================================================= */
:root {
  --cocoa-brown: #3e2721;
  --grain-brown: #5a3a2e;
  --seed-green: #6f823a;
  --bg-warm: #f4ede6;
}

/* =========================================================
   BASE
========================================================= */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #f1e7dc 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, #efe2d5 0%, transparent 45%),
    var(--bg-warm);
  color: #2d2d2d;
  line-height: 1.6;
}

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

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

.title-wrap {
  position: relative;
  display: inline-block;
}

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

/* Pumpkin-seed visual cue */
.title-wrap::after {
  content: "";
  display: block;
  width: 11px;
  height: 7px;
  margin: 8px auto 0;
  background: var(--seed-green);
  border-radius: 50%;
  opacity: 0.85;
}

/* Veg badge */
.veg-badge {
  position: absolute;
  top: 0.15em;
  right: -4.8rem;
}

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

/* Tagline */
.tagline {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #7a6a60;
}

/* =========================================================
   CARDS
========================================================= */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #faf6f2 100%);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow:
    0 8px 18px rgba(62, 39, 33, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

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

.card p {
  font-weight: 450;
  color: #3a2f28;
}

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

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

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

.card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--seed-green);
  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: 10px;
  margin-bottom: 10px;
}

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

.fssai-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3a2f28;
}


/* =========================================================
   HIGHLIGHT (FSSAI)
========================================================= */
.highlight {
  border-left: 5px solid var(--grain-brown);
  background: #fff8f5;
}

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

.cta a {
  display: inline-block;
  background-color: #4f6f3a;
  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: #7a6a60;
  margin-top: 32px;
}

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

  .veg-badge {
    right: -2.2rem;
  }
}





/* =========================================================
   ✅ 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;
  }
}