/* ==========================================================================
   Homepage blocks. Card styling itself lives in woo-loop.css (shared with the
   archive); this file only carries grid/spacing deltas and the home-only bands.
   ========================================================================== */

/* Trust bar -- [ms_trust_bar]
   The band's background now lives on the Elementor container so it bleeds to the
   viewport edges; this element only lays out the items inside the 1140 column.
   Kept transparent rather than removing the rule, so the shortcode still reads
   correctly if it is ever placed somewhere without a container background. */
.millet-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 26px 0;
  background: transparent;
}
.millet-trust-item { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--millet-ink); }
.millet-trust-item .millet-icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Customer reviews -- [ms_testimonials]

   A scroll-snap row, not a JS-driven carousel. Touch swipe, momentum and keyboard
   scrolling all come from the browser; review-slider.js only layers on autoplay,
   arrows and dots. With JS off this stays a perfectly usable scrollable row.
   -------------------------------------------------------------------------- */
.millet-review-viewport { overflow: hidden; }

.millet-review-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--millet-gap)) / 3);
  gap: var(--millet-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* the dots and arrows are the affordance */
  -webkit-overflow-scrolling: touch;
}
.millet-review-track::-webkit-scrollbar { display: none; }
.millet-review-track > * { scroll-snap-align: start; }

@media (max-width: 900px) {
  .millet-review-track { grid-auto-columns: calc((100% - var(--millet-gap)) / 2); }
}
@media (max-width: 560px) {
  .millet-review-track { grid-auto-columns: 100%; }
}
.millet-review-card { background: var(--millet-cream-deep); border-radius: 14px; padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.millet-review-text { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--millet-ink); border: 0; padding: 0; font-style: normal; quotes: none; }
.millet-review-author { margin-top: auto; font-size: .85rem; font-weight: 700; font-style: normal; color: var(--millet-ink); }

/* Homepage product grid: [products class="millet-featured-products"].
   No grid-template-columns here on purpose -- the column count now comes from Woo's
   .columns-N wrapper class in woo-loop.css. An auto-fit override here would silently
   win and put back the "asked for 4, rendered 3" problem. */

/* --------------------------------------------------------------------------
   Section heading row: title left, "View All Products →" right, on one baseline.
   Applied via a millet-section-head CSS class on the Elementor inner container.
   -------------------------------------------------------------------------- */
.millet-section-head {
  align-items: baseline !important; /* Elementor sets align-items on .e-con inline */
}
.millet-section-head .elementor-heading-title { margin: 0; }

/* The "View All" action is a Button widget stripped back to a text link, so it stays
   editable in Elementor without needing a Pro widget.

   Black rather than the brand green: on the cream band the green read as body copy.
   The hover fills green because the requested white text would otherwise be invisible
   against cream -- the padding gives that fill somewhere to paint. */
.millet-section-link .elementor-button {
  background: #103d20;
  color: #000;
  padding: 7px 10px;
  font-size: .9rem;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.millet-section-link .elementor-button:hover,
.millet-section-link .elementor-button:focus-visible {
  background: var(--millet-green);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 560px) {
  .millet-section-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
}

/* --------------------------------------------------------------------------
   Green band: eyebrow + stats
   -------------------------------------------------------------------------- */
.millet-eyebrow .elementor-heading-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--millet-gold);
  margin: 0;
}

.millet-highlight-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.millet-highlight-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.millet-highlight-figure { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.1; }
.millet-highlight-caption { font-size: .78rem; opacity: .8; }

/* On the green band the widgets inherit dark theme colours, so force light type there. */
.millet-promise-band-dark .millet-highlight-stats { color: var(--millet-footer-text); }

/* --------------------------------------------------------------------------
   Testimonial stars -- WooCommerce's own .star-rating glyphs, gold like the cards.
   -------------------------------------------------------------------------- */
.millet-review-card .millet-stars {
  color: var(--millet-gold);
  margin: 0;
  float: none;
}

/* --------------------------------------------------------------------------
   CTA buttons (SHOP NOW, Our Story) -- fixed width, vertical padding only.
   Scoped to Elementor button widgets and excludes .millet-section-link, which is the
   "View All Products" text link and must stay auto-width with no box.
   -------------------------------------------------------------------------- */
.elementor-widget-button:not(.millet-section-link) .elementor-button {
  width: 190px;
  max-width: 100%;
  padding: 10px 0;
  text-align: center;
  display: inline-block;
}

@media (max-width: 420px) {
  /* Below the fixed width the button would overflow its gutter. */
  .elementor-widget-button:not(.millet-section-link) .elementor-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   Review slider controls.
   Hidden until review-slider.js adds .is-enhanced, so they never appear as dead
   buttons when JS is unavailable.
   -------------------------------------------------------------------------- */
.millet-review-controls { display: none; }
.millet-review-slider.is-enhanced .millet-review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* Deliberately understated: a thin chevron in a light circle, so the controls read as
   navigation rather than competing with the CTA buttons. */
.millet-review-prev,
.millet-review-next {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--millet-border);
  background: transparent;
  color: var(--millet-ink);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.millet-review-prev svg,
.millet-review-next svg { display: block; }
.millet-review-prev:hover,
.millet-review-next:hover,
.millet-review-prev:focus-visible,
.millet-review-next:focus-visible {
  background: var(--millet-green);
  border-color: var(--millet-green);
  color: #fff;
}

.millet-review-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.millet-review-dots li { margin: 0; }
.millet-review-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--millet-border);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.millet-review-dots button[aria-current="true"] {
  background: var(--millet-green);
  transform: scale(1.3);
}
.millet-review-dots button:focus-visible {
  outline: 2px solid var(--millet-green);
  outline-offset: 2px;
}