/**
 * Category Archive V2 — Seeds archive styles.
 * Enqueued only on allowlisted product_category pages.
 *
 * Token source: gerbs-tokens.css (declared as dependency in enqueue).
 * All colour references use CSS custom properties — no hardcoded hex.
 *
 * Rail: text-only pill buttons (replaced image-chip rail, v1.1.1.62).
 *
 * @since 1.1.1.48
 */

/* ─── Inter (self-hosted, variable 400-700, latin subset, 48KB) ──────────────
   Used for card titles. Self-hosted in the child theme per the established
   pattern (see material-symbols) — never via Google Fonts link (WP Rocket
   local-font hosting desyncs on version bumps). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── H1 restyle — existing post_title module on allowlisted pages ─────────── */
.gcat-active .entry-title,
.gcat-active .page-title,
.gcat-active h1.category-title {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--ls-tight, -0.02em);
  color: var(--gerbs-ink);
  margin-bottom: 4px;
}

/* ─── Masthead band ─────────────────────────────────────────────────────────── */
.gcat-masthead {
  padding: 12px 0 16px;
}

.gcat-masthead__desc {
  font-size: var(--fs-14);
  color: color-mix(in srgb, var(--gerbs-ink) 70%, transparent);
  line-height: 1.5;
  margin-bottom: 20px; /* breathing room — blurb floats above the rail, not on it */
  /* No truncation — full blurb shown on all viewports. */
}

/* ─── Pill rail ─────────────────────────────────────────────────────────────── */
.gcat-rail {
  /* Reserve height for webfont swap — single pill row (36px pill + 8px scroll pad). */
  min-height: 44px;
}

.gcat-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.gcat-rail__item {
  flex: 0 0 auto;
  /* Divi's ul li bullet styles leak through — kill markers explicitly. */
  list-style: none;
}

.gcat-rail__item::marker {
  content: none;
}

.gcat-rail__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 18px;
  background: var(--gerbs-yellow);
  color: var(--gerbs-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background .14s, color .14s;
}

.gcat-rail__chip:hover         { background: var(--gerbs-gold); }
.gcat-rail__chip.is-active     { background: var(--gerbs-blue); color: #fff; }
.gcat-rail__chip:focus-visible {
  outline: 2px solid var(--gerbs-blue);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .gcat-rail {
    position: relative;
  }
  .gcat-rail__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    padding-right: 40px; /* clear the 36px ::after fade so last pill is fully legible */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gcat-rail__list::-webkit-scrollbar {
    display: none;
  }
  .gcat-rail__chip {
    flex: 0 0 auto;
    min-height: 40px; /* keeps a comfortable touch target while trimming bulk */
    padding: 8px 16px;
    font-size: var(--fs-14);
  }
  .gcat-rail__chip:focus-visible {
    scroll-margin-inline: 12px;
  }
  /* D5 — edge fade signals horizontal scroll on mobile. */
  .gcat-rail::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 8px;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--color-page-bg, #fff));
  }
}

/* Reserve height for 2-row pill wrap between 901px and 1140px content width. */
@media (min-width: 901px) and (max-width: 1140px) {
  .gcat-rail { min-height: 80px; } /* 2 rows of 36px pills + 8px gap */
}

@media (prefers-reduced-motion: reduce) {
  .gcat-rail__chip { transition: none; }
}

/* ─── Toolbar: result count + sort ─────────────────────────────────────────── */
.woocommerce-products-header + .woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-result-count {
  font-size: var(--fs-14);
}

.woocommerce-ordering select {
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  border: 1px solid color-mix(in srgb, var(--gerbs-ink) 20%, transparent);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 28px 6px 10px;
  background: #fff;
  color: var(--gerbs-ink);
  /* Visible focus ring — prototype's outline:none must NOT ship (a11y). */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--gerbs-blue);
  outline-offset: 2px;
}

/* ─── Product grid ──────────────────────────────────────────────────────────── */
/* Override Divi + WooCommerce loop column count on allowlisted pages only.      */
/* Scoped with .gcat-active on <body> (added in functions.php on allowlisted pages). */
/* Column-class AGNOSTIC: Divi's shop module emits .columns-3 regardless of our  */
/* intent — targeting ul.products directly means a Divi setting change can never */
/* silently kill the grid (the V1 .columns-4 selector never matched on staging). */

.gcat-active ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

.gcat-active ul.products::before,
.gcat-active ul.products::after {
  display: none !important; /* WC clearfix pseudo-elements break grid layout */
}

@media (max-width: 1100px) {
  .gcat-active ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .gcat-active ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ─── Product card ──────────────────────────────────────────────────────────── */
li.gcat-card {
  list-style: none;
  background: #fff;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  /* Neutralize WC/Divi loop-item float layout — we're a grid child now. */
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  li.gcat-card {
    transition: none;
  }
}

li.gcat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Media box — 1:1 aspect ratio, white-fade masks top + bottom per spec. */
.gcat-card__media-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gerbs-fog, #f5f5f0);
}

.gcat-card__media-wrap::before,
.gcat-card__media-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  z-index: 1;
  pointer-events: none;
}

.gcat-card__media-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
}

.gcat-card__media-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.6), transparent);
}

.gcat-card__img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.gcat-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gcat-card__img--placeholder {
  width: 100%;
  height: 100%;
  background: var(--gerbs-fog, #f5f5f0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flags */
.gcat-card__flags {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gcat-card__flag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
}

.gcat-card__flag--bestseller { background: var(--gerbs-yellow, #F5C518); color: var(--gerbs-ink); }
.gcat-card__flag--new        { background: var(--gerbs-blue); color: #fff; }
.gcat-card__flag--oos        { background: var(--gerbs-ink); color: #fff; }

/* Card body */
.gcat-card__body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Name — Inter bold 14px, 2-line clamp, fixed height so cards align.
   !important beats Divi's TB h2 sizing (#et-boc-scoped, ID specificity). */
.gcat-card__name {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  min-height: calc(14px * 1.35 * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 0 !important;
}

.gcat-card__name-link,
.gcat-card__name * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.gcat-card__name-link {
  color: var(--gerbs-ink);
  text-decoration: none;
}

.gcat-card__name-link:hover {
  color: var(--gerbs-blue);
}

/* Meta row — stars + price inline below the ATC button (D1). */
.gcat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 18px;
  margin-top: 4px;
}

.gcat-card__rating {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: color-mix(in srgb, var(--gerbs-ink) 60%, transparent);
}

.gcat-star--full,
.gcat-star--half { color: var(--gerbs-yellow, #F5C518); }
.gcat-star--empty { color: color-mix(in srgb, var(--gerbs-ink) 20%, transparent); }

@media (max-width: 480px) {
  .gcat-card__rating { display: none; }
}

.gcat-card__price {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--gerbs-ink);
}

/* ATC area — directly beneath the title; fixed height, no layout shift. */
.gcat-card__atc-area {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
}

.gcat-card__atc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm, 6px);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .gcat-card__atc-btn { transition: none; }
}

@media (max-width: 480px) {
  .gcat-card__atc-btn { font-size: var(--fs-12); }
}

/* Add state — solid gerbs-blue */
.gcat-atc--add {
  background: var(--gerbs-blue);
  color: #fff;
}

.gcat-atc--add:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gerbs-blue) 85%, #000);
}

/* In-flight */
.gcat-atc--inflight {
  background: var(--gerbs-blue);
  color: #fff;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Success */
.gcat-atc--success {
  background: var(--gerbs-success, #2e7d32);
  color: #fff;
}

/* Choose options — outlined */
.gcat-atc--choose {
  background: transparent;
  color: var(--gerbs-blue);
  border: 2px solid var(--gerbs-blue);
}

.gcat-atc--choose:hover {
  background: color-mix(in srgb, var(--gerbs-blue) 8%, transparent);
}

/* OOS — fog, disabled */
.gcat-atc--oos {
  background: var(--gerbs-fog, #f0ede8);
  color: color-mix(in srgb, var(--gerbs-ink) 40%, transparent);
  cursor: not-allowed;
}

/* Error */
.gcat-atc--error {
  background: var(--gerbs-blue);
  color: #fff;
}

.gcat-card__atc-msg {
  font-size: var(--fs-12);
  color: var(--gerbs-error, #c62828);
  min-height: 16px;
  line-height: 1.4;
}

/* X2b — defensive hide: legacy frontend-dist.js injects .product-btn-category
   into .woocommerce-LoopProduct-link. Our new card does NOT use that class so
   the injector won't match; this belt-and-braces rule ensures visibility:none
   if something changes in the future. */
.gcat-card .product-btn-category {
  display: none !important;
}

/* ─── Legacy gerbs-skin.css neutralization (X8) ──────────────────────────────
   uploads/gerbs-skin/css/gerbs-skin.css (IHAF footer — loads AFTER this file)
   styles `.category-section .category-products .woocommerce .products .product`
   (0,5,0 specificity, !important) for the OLD card design: 3-col calc width,
   gray #F7F9FA tile on every <a>, img height 234px. These selectors must
   out-specific (0,5,0) so the V2 card survives. Scoped to body.gcat-active —
   non-allowlisted categories keep the legacy skin untouched. */

body.gcat-active .woocommerce ul.products li.product.gcat-card {
  width: 100% !important;
  margin: 0 !important;
}

/* Skin paints every <a> as a gray flex tile — strip it from our card links. */
body.gcat-active .woocommerce ul.products li.product.gcat-card a {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  text-align: inherit !important;
}

body.gcat-active .woocommerce ul.products li.product.gcat-card .gcat-card__img-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.gcat-active .woocommerce ul.products li.product.gcat-card .gcat-card__name-link {
  display: inline !important;
}

/* Re-assert the choose-options button (an <a>) after the generic link reset. */
body.gcat-active .woocommerce ul.products li.product.gcat-card a.gcat-card__atc-btn {
  display: flex !important;
  width: 100% !important;
  padding: 0 10px !important;
  text-align: center !important;
  border-radius: var(--radius-sm, 6px) !important;
}

/* Skin forces a img { height: 234px !important; 10px radius; margins }. */
body.gcat-active .woocommerce ul.products li.product.gcat-card .gcat-card__img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
}

/* ─── Hide redundant YITH "Type" filter on gcat-active pages ────────────────────
   The pill rail in the masthead already exposes the same seed-type taxonomy
   (data-filter-id="5" = Type filter within YITH preset 218969). The other
   filters (Variety, Composition, Flavor) remain visible. */
.gcat-active [data-filter-id="5"] {
  display: none !important;
}

/* ─── Collapse the filter sidebar on no-filter categories ─────────────────────
   The Divi Theme Builder body template renders a 1/4 (YITH filter) + 3/4
   (product grid) row on every gcat-active archive. We hide the "Type" filter
   (data-filter-id="5", above) site-wide because the pill rail already exposes
   that taxonomy. On categories whose ONLY YITH filter is Type (e.g.
   snack-trail-mixes) — or that have no YITH filter at all (e.g. grains) — hiding
   Type leaves the 1/4 column empty, producing a ~238px void that shoves the grid
   into the right 3/4 (the "weird empty rail" bug). When the row contains no YITH
   filter other than the hidden Type filter, collapse the filter column and let
   the grid span the full content width. Categories with real filters (Seeds,
   Dried Fruit, Granola, Baking — Variety/Composition/Flavor) keep their sidebar.
   Scoped to >=981px (Divi's column-stack breakpoint); below that the columns
   stack and the empty column already collapses to nothing. Requires :has()
   (all evergreen browsers); older browsers fall back to the reserved-but-empty
   column — no breakage, just the prior look. */
@media (min-width: 981px) {
  body.gcat-active .et_pb_row_1-4_3-4:not(:has(.yith-wcan-filter:not([data-filter-id="5"]))) > .et_pb_column_1_4 {
    display: none !important;
  }
  body.gcat-active .et_pb_row_1-4_3-4:not(:has(.yith-wcan-filter:not([data-filter-id="5"]))) > .et_pb_column_3_4 {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }
}

/* ─── Pagination restyle ─────────────────────────────────────────────────────── */
.gcat-active .woocommerce-pagination {
  margin-top: 32px;
}

.gcat-active .woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gcat-active .woocommerce-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gerbs-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gcat-active .woocommerce-pagination .page-numbers { transition: none; }
}

.gcat-active .woocommerce-pagination .page-numbers:hover {
  background: var(--gerbs-fog, #f5f5f0);
}

.gcat-active .woocommerce-pagination .page-numbers.current {
  background: var(--gerbs-blue);
  color: #fff;
}

/* Empty loop state */
.gcat-empty {
  padding: 48px 0;
  text-align: center;
}

.gcat-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.gcat-empty__text {
  font-size: var(--fs-16);
  color: color-mix(in srgb, var(--gerbs-ink) 60%, transparent);
  margin-bottom: 20px;
}

.gcat-empty__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--gerbs-blue);
  color: #fff;
  border-radius: var(--radius-sm, 6px);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--fs-14);
}