/* ==========================================================================
   Single product
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gallery: thumbnail strip beside the main image.
   Astra enables wc-product-gallery-slider, so thumbs render through FlexSlider,
   which writes inline widths on each <li>. Overriding those is the one place
   !important is unavoidable -- flagged rather than hidden.
   Falls back to a normal stacked gallery under 900px.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .woocommerce div.product .woocommerce-product-gallery {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .woocommerce div.product .woocommerce-product-gallery__wrapper { flex: 1 1 auto; min-width: 0; }

  .woocommerce div.product .flex-control-thumbs { /* ASTRA-DEP/FlexSlider markup */
    flex: 0 0 84px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
  }
  .woocommerce div.product .flex-control-thumbs li {
    width: 100% !important; /* FlexSlider sets an inline px width; nothing else overrides it */
    margin: 0;
    list-style: none;
  }
  .woocommerce div.product .flex-control-thumbs img {
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .75;
    transition: opacity .15s ease, border-color .15s ease;
  }
  .woocommerce div.product .flex-control-thumbs img.flex-active,
  .woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--millet-green); }
}

.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: 14px; }

/* --------------------------------------------------------------------------
   Summary column
   -------------------------------------------------------------------------- */
.millet-product-tagline {
  margin: 2px 0 14px;
  color: var(--millet-body);
  font-size: 1.05rem;
  line-height: 1.5;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--millet-ink);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

/* Buy box: qty + Add to Cart on one row, Buy Now full width beneath. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.woocommerce div.product form.cart div.quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--millet-border);
  border-radius: var(--millet-radius);
  overflow: hidden;
  margin: 0;
  background: var(--millet-card);
}
/* Astra's native stepper. If the filter enabling it ever stops working the bare
   input below still renders correctly, so the buy box degrades rather than breaks. */
.woocommerce div.product form.cart .ast-qty-placeholder { /* ASTRA-DEP */
  width: 38px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--millet-ink);
  user-select: none;
}
.woocommerce div.product form.cart div.quantity input.qty {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  color: var(--millet-ink);
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1 1 200px;
  height: 46px;
  background: var(--millet-green);
  color: var(--millet-cream);
  text-transform: uppercase;
  border: 0;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--millet-green-dark); }

/* Outlined secondary action. Selector is scoped through .woocommerce div.product
   form.cart because Astra's own .button rules would otherwise win on specificity and
   paint this solid green, making it indistinguishable from Add to Cart. */
.woocommerce div.product form.cart button.millet-buy-now,
.woocommerce div.product form.cart button.millet-buy-now:visited {
  flex: 1 0 100%;
  height: 46px;
  background: transparent;
  background-color: transparent;
  color: var(--millet-green);
  border: 2px solid var(--millet-green);
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
.woocommerce div.product form.cart button.millet-buy-now:hover,
.woocommerce div.product form.cart button.millet-buy-now:focus {
  background-color: var(--millet-green);
  color: var(--millet-cream);
}

/* --------------------------------------------------------------------------
   Why you'll love it
   auto-fit, not repeat(4,...): the field is freeform, so 2 or 3 items must look
   deliberate rather than leaving holes in a fixed four-column grid.
   -------------------------------------------------------------------------- */
.millet-benefits { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--millet-border); }
.millet-benefits-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--millet-ink);
}
.millet-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.millet-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 0;
}
.millet-benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--millet-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.millet-benefit-label { font-size: .78rem; line-height: 1.35; color: var(--millet-body); }

/* --------------------------------------------------------------------------
   Nutritional breakdown
   -------------------------------------------------------------------------- */
.millet-nutrition { max-width: var(--millet-max-width); margin: var(--millet-section-space) auto 0; padding-top: 32px; border-top: 1px solid var(--millet-border); }
.millet-nutrition-title { font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; margin: 0 0 22px; color: var(--millet-ink); }
.millet-nutrition-serving { font-size: .85rem; font-weight: 400; color: var(--millet-body); }

.millet-nutrition-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
/* Fewer than two numeric macros: chips take the full width instead of leaving a gap. */
.millet-nutrition-no-chart .millet-nutrition-body { grid-template-columns: 1fr; }
@media (max-width: 780px) { .millet-nutrition-body { grid-template-columns: 1fr; gap: 26px; } }

.millet-nutrition-chart {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  min-height: 180px;
  border-bottom: 1px solid var(--millet-border);
}
.millet-nutrition-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.millet-nutrition-bar-value { font-size: .72rem; font-weight: 700; color: var(--millet-body); }
.millet-nutrition-bar {
  width: 100%;
  max-width: 56px;
  background: var(--millet-green);
  border-radius: 4px 4px 0 0;
  display: block;
}
.millet-nutrition-bar-label { font-size: .75rem; color: var(--millet-body); text-align: center; padding-bottom: 8px; }

.millet-nutrition-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.millet-nutrition-fact { background: var(--millet-cream-deep); border-radius: 8px; padding: 12px 14px; margin: 0; }
.millet-nutrition-fact-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--millet-body); }
.millet-nutrition-fact-value { display: block; font-size: 1.05rem; font-weight: 800; margin-top: 2px; color: var(--millet-ink); }

/* --------------------------------------------------------------------------
   Product details accordion (native <details>)
   -------------------------------------------------------------------------- */
.millet-product-details { max-width: var(--millet-max-width); margin: var(--millet-section-space) auto 0; }
.millet-product-details-title { font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; margin: 0 0 8px; color: var(--millet-ink); }
.millet-detail { border-bottom: 1px solid var(--millet-border); }
.millet-detail-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--millet-ink);
  list-style: none;
}
.millet-detail-summary::-webkit-details-marker { display: none; }
.millet-detail-summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--millet-body);
  line-height: 1;
}
.millet-detail[open] > .millet-detail-summary::after { content: "\2212"; }
.millet-detail-summary:focus-visible { outline: 2px solid var(--millet-green); outline-offset: 3px; }
.millet-detail-panel { padding: 0 0 20px; color: var(--millet-body); line-height: 1.7; }
/* List indentation for editor HTML lives in base.css, shared with the other
   editor-content wrappers. */
.millet-detail-panel :where(p, li):last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Why MilletStory / The Promise band
   -------------------------------------------------------------------------- */
/* Full-bleed band on a page whose container must stay capped at 1140.
   This is the only viewport breakout in the theme: the product page's content
   column is deliberately constrained, so the band cannot simply inherit a
   full-width parent the way the homepage sections do.

   100vw includes the scrollbar, so base.css pairs this with overflow-x:clip
   on #content. The padding formula re-creates the 1140 content column inside
   the full-width band, falling back to 20px on narrow viewports. */
.millet-promise-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--millet-cream-deep);
  margin-top: var(--millet-section-space);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(20px, calc((100vw - var(--millet-max-width)) / 2));
}
.millet-promise-cell { padding: clamp(30px, 4vw, 56px) 0; }
.millet-promise-cell + .millet-promise-cell { padding-left: clamp(24px, 4vw, 56px); }
.millet-promise-cell + .millet-promise-cell { border-left: 1px solid var(--millet-border); }
@media (max-width: 900px) {
  /* Stacked: drop the divider and the left gutter that separated the columns. */
  .millet-promise-cell + .millet-promise-cell {
    border-left: 0;
    border-top: 1px solid var(--millet-border);
    padding-left: 0;
  }
}
.millet-promise-label { font-size: .75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--millet-green); margin: 0 0 12px; }
.millet-promise-body { color: var(--millet-ink); line-height: 1.7; }
.millet-promise-body :where(p, li):last-child { margin-bottom: 0; }