/** Shopify CDN: Minification failed

Line 113:9 Expected ":"

**/
/* Assets/section-nutrition-label.css */

.nutrition-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
  align-items: flex-start;
  color:rgb(0, 0, 0); /* Adjust to your brand's dark blue/black */
}

.nutrition-info-text {
  flex: 1;
  min-width: 320px;
}

.nutrition-info-text h1 {
  font-family: 'Brandon Grotesque', Arial, sans-serif; /* Replace with your brand font */
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-block-start: 0px !important;
  margin-bottom: 1rem;
}

.nutrition-box {
  flex: 0 0 340px;
  border: 2px solid currentColor;
  border-radius: 12px;
  padding: 15px;
  font-family: "Brandon Grotesque";
  line-height: 1.1;
}

.nutrition-box h2 {
  margin: 0;
  font-size: 2.5rem;
  border-bottom: 10px solid currentColor;
  line-height: 0.85;
  padding-bottom: 4px;
  font-weight: 900;
}

.nutrition-line {
  border-bottom: 1px solid currentColor;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  font-size: 1.75rem;
}

.nutrition-line.thick { border-bottom: 10px solid currentColor; }
.nutrition-line.medium { border-bottom: 5px solid currentColor; }
.nutrition-line.no-border { border: none; padding-bottom: 0; }

.cal-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 8px solid currentColor;
  padding: 4px 0;
}

.cal-row .label { font-weight: 900; font-size: 1.3rem; }
.cal-row .value {
  font-size: 5rem !important; /* Increased significantly to test */
  line-height: 0 !important;
  font-family: "brandon-grotesque", sans-serif !important;
  font-weight: 900 !important;
  display: block !important;
  margin: 0 !important;
}

.dv-text {
  font-size: 1.25rem;
  text-align: right;
  padding: 6px 0;
  font-weight: bold;
}

.indent { padding-left: 15px; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .nutrition-container {
    flex-direction: column;
    padding: 5px 15px;
  }
  .nutrition-box {
    width: 100%;
    flex: 1 1 auto;
  }
}
/* --- 1. THE MAIN CONTAINER LAYOUT --- */
.nutrition-master-container {
  width: 100%;
}

.nutrition-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding right:20px;
  padding-left: 15px;
  padding-top: 40px;
  padding-bottom: 20px;
  ;
}

/* Left side (Description & Ingredients) */
.nutrition-info-text {
  flex: 1;
  min-width: 320px;
}

/* Right side (The Label) */
.nutrition-box {
  flex: 0 0 340px;
  border: 1px solid #000;
  padding: 15px;
  background-color: transparent; /* Inherits section background */
}

/* --- 2. THE INGREDIENTS BOX --- */
.ingredients-box {
  margin-top: 30px;
  width: 100%;
  display: block;
}

.ingredients-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}

.ingredient-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(25% - 20px); /* 4 icons per row on desktop */
  text-align: center;
}

.ingredient-icon {
  width: 60px; /* Adjust based on your icon size */
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

.ingredient-text {
  font-family: "brandon-grotesque", sans-serif !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F7F3E4;
  line-height: 1.2;
}

/* --- 3. THE NUTRITION LABEL TYPOGRAPHY --- */
.nutrition-box h2 {
  font-family: "brandon-grotesque", sans-serif !important;
  font-size: 3.2rem;
  font-weight: 900;
  border-bottom: 10px solid #000;
  margin-bottom: 4px;
  line-height: 0.8;
}

.cal-row .label {
  font-family: "brandon-grotesque", sans-serif !important;
  font-weight: 900;
  font-size: 1.4rem;
}

/* Custom spacing for the vitamins you added */
.nutrition-line {
  border-bottom: 1px solid #000;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
}

/* --- 4. RESPONSIVE (MOBILE) --- */
@media (max-width: 768px) {
  .nutrition-container {
    flex-direction: column;
  }
  
  .nutrition-box {
    width: 100%;
    flex: none;
  }

  .ingredient-item {
    width: calc(33.33% - 15px); /* 3 icons per row on mobile */
  }
}
.ingredients-box-title {
  font-family: "brandon-grotesque", sans-serif !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px; /* Space between heading and icons */
  margin-top: 0px;
  color: #F7F3E4;
  text-align: center; /* Or 'center' if you prefer */
}