/* Golf Cart Battery Source v1.0.5: rotating header images + dynamic brand lists. Loaded after mobile-104.css. */

/* ---------- Rotating header images (inc/hero-rotator.php) ---------- */
/* The box keeps a fixed square aspect ratio, so swapping images never shifts layout. */
.gcbs-rot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.gcbs-rot__link { display: block; width: 100%; height: 100%; }
.gcbs-rot__img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease; }
.gcbs-rot__img.is-swapping { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .gcbs-rot__img, .gcbs-rot__img.is-swapping { transition: none; opacity: 1; } }


/* Page headers (category, brand, shop, About, guides): 13rem square on desktop,
   and now a small square beside the title on phones too (it was hidden ≤859px). */
.gcbs-phero__media.gcbs-rot { border-radius: 0.9rem; }
@media (max-width: 859px) {
  .gcbs-phero--has-img .gcbs-phero__inner { grid-template-columns: minmax(0, 1fr) 5.5rem; align-items: start; column-gap: 0.9rem; }
  .gcbs-phero--has-img .gcbs-phero__media { display: block; width: 5.5rem; border-radius: 0.6rem; margin-top: 0.35rem; }
  .gcbs-phero--has-img .gcbs-phero__copy { min-width: 0; }
}

/* ---------- Dynamic brand lists ---------- */
.gcbs-logos .gcbs-brand-grid { margin-top: 0.25rem; }
.gcbs-brands-section { margin: 2rem 0 1.5rem; }
.gcbs-brands-section h2 { margin-bottom: 1rem; }
.gcbs-prose .gcbs-brand-grid { padding: 0 !important; }
.gcbs-prose .gcbs-brand-grid li { margin: 0 !important; padding: 0 !important; }
.gcbs-prose .gcbs-brand-grid li::before { content: none !important; }

/* Footer: 5 columns from 1024px (logo/about + cart + type + brands + help). */
@media (min-width: 1024px) {
  .gcbs-footer__grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)) !important; }
}
.gcbs-footer__links--brands .gcbs-brand-links__all a { font-weight: 600; }

/* Mega menu: full-width "Shop by brand" row under the category columns. */
.gcbs-mega__col--brands { grid-column: 1 / -1; padding-top: 0.75rem; border-top: 1px solid var(--gcbs-border, #e5e7eb); }
.gcbs-mega__brands { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.gcbs-mega__brands a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0.25rem 0.7rem;
  border: 1px solid var(--gcbs-border, #e5e7eb); border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: var(--gcbs-title, #18212A); text-decoration: none;
}
.gcbs-mega__brands a:hover, .gcbs-mega__brands a:focus-visible { border-color: var(--gcbs-green-700, #16703A); color: var(--gcbs-green-700, #16703A); }
.gcbs-mega__brands .gcbs-brand-links__all a { border-color: transparent; color: var(--gcbs-green-700, #16703A); }

/* Mobile drawer brand list reuses the category list styles. */
.gcbs-drawer__brands { margin-top: 0.5rem; }

/* ---------- Brands index (/brands/, [gcbs_brand_index]) ----------
   v1.0.4 bug: the link was height:100% of the tile while the summary and count sat outside it, so text spilled
   under the next row, and ".gcbs-prose--wide > ul { max-width: 48rem }" squeezed the grid into the left half.
   Now each card is a single link with a fixed-height logo panel; the grid uses the full content width. */
.gcbs-prose .gcbs-brand-index, .gcbs-brand-index {
  list-style: none !important; max-width: none !important; margin: 1.5rem 0 2rem !important; padding: 0 !important;
  display: grid !important; gap: 0.75rem;
}
.gcbs-brand-index { grid-template-columns: 1fr; }
@media (min-width: 600px) { .gcbs-brand-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 900px) { .gcbs-brand-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gcbs-brand-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gcbs-prose .gcbs-brand-index__item, .gcbs-brand-index__item { margin: 0 !important; padding: 0 !important; min-width: 0; }
.gcbs-prose .gcbs-brand-index__item::before, .gcbs-prose .gcbs-brand-index__item::marker { content: none !important; }
.gcbs-brand-index__card {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.85rem; align-items: center; height: 100%;
  padding: 0.75rem; border: 1px solid var(--gcbs-border, #e3e8e5); border-radius: 12px; background: #fff;
  color: var(--gcbs-body-text, #3a434b) !important; text-decoration: none !important; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gcbs-brand-index__card:hover, .gcbs-brand-index__card:focus-visible { border-color: var(--gcbs-green-400, #67B160); box-shadow: 0 6px 18px rgba(24,33,42,.08); }
.gcbs-brand-index__media {
  display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: 0.5rem;
  border-radius: 8px; background: #f6f8f7; overflow: hidden;
}
.gcbs-brand-index__media.is-dark { background: var(--gcbs-charcoal, #18212A); }
.gcbs-brand-index__logo { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; margin: 0 !important; }
.gcbs-brand-index__word { font-size: 1.05rem; font-weight: 800; line-height: 1.1; text-align: center; color: var(--gcbs-charcoal, #18212A); }
.gcbs-brand-index__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gcbs-brand-index__name { font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--gcbs-title, #18212A); }
.gcbs-brand-index__desc {
  font-size: 0.85rem; line-height: 1.45; color: var(--gcbs-body-text, #3a434b);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gcbs-brand-index__count { font-size: 0.8rem; font-weight: 600; color: var(--gcbs-green-700, #16703A); margin-top: 0.15rem; }
@media (min-width: 600px) {
  .gcbs-brand-index__card { grid-template-columns: 1fr; align-items: stretch; align-content: start; padding: 0.9rem; }
  .gcbs-brand-index__media { height: 5.5rem; }
  .gcbs-brand-index__desc { -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) { .gcbs-brand-index__card { transition: none; } }

/* Brand archive footer links ("official website · Fitment Guide · All brands"): tappable chips instead of a run-on line. */
.gcbs-brand-page__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gcbs-brand-page__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--gcbs-green-100, #D3EAD7); background: var(--gcbs-green-50, #EEF7F0);
  color: var(--gcbs-green-800, #125a2f) !important; font-size: 0.875rem; line-height: 1.2; font-weight: 600; text-decoration: none !important;
}
.gcbs-brand-page__links a:hover { border-color: var(--gcbs-green-700, #16703A); }

/* ---------- Font-swap layout shift ----------
   Poppins loads with display=swap; the first visit used to reflow text when it arrived (CLS up to 0.32 on long
   category pages, also on v1.0.4 staging). A metric-matched local fallback keeps line breaks nearly identical. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 112.16%; ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%;
}
:root { --gcbs-font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Block checkout order summary: WooCommerce's quantity badge and item description are 11.4px at 360px. */
.wc-block-components-order-summary-item__quantity, .wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description p { font-size: 0.75rem !important; }