/*
 * wholesale-page.css: the /wholesale/ page (WP page 219206) with the wholesale flag ON
 * (inc/wholesale-contact-on.php, the `.gwp-` classes), built to Chris's Claude Design page
 * "W1 Wholesale page" (docs/mocks/wholesale/, 2026-10-05), and the five segment pages built to
 * "W2 Wholesale segment pages" (inc/wholesale-segment.php), which share W1's parts
 * (inc/wholesale/page-parts.php) and so every rule here; W2's own parts are in section 2b.
 *
 * Enqueued by gerbs_wholesale_page_assets() (inc/wholesale/page.php) on those pages ONLY, flag on,
 * after gerbs-wholesale-contact, whose contact card and Forminator rules the quote section reuses.
 * The flag-off quote page never loads this file, so nothing here can reach the rollback artifact.
 *
 * W1's colours and type map onto gerbs-tokens.css with no new token. W1 drew a 1200px container;
 * the site's is --container-max (1140px, reconciled to the live content column), used here.
 * Breakpoints are W1's: 900px (one column, H1 a step down) and 640px (phone actions, stacked cards).
 *
 * House rules W1's own stylesheet applied, kept: no box-shadow (the .g-btn hover and focus glows
 * are switched off below, and a focus ring is an outline), no left keyline, every heading balanced.
 *
 * 🚨 Scoped !important on heading SIZES and WEIGHTS, the pattern .gkosher-title, .glv3-title and
 * .gerbs-hc__h1 already use: gerbs-skin.css (uploads) forces every h1 to h6 to `font-weight: 400
 * !important`, h1 to 36px / 45px !important (32px / 40px under 980px) and, under 980px only, h2 to
 * 34px / 40px !important. Without these W1's headings set light, the H1 never reaches --fs-44 and
 * every section heading balloons to 34px on a tablet or phone. Retire with the skin rules (D55
 * follow-up in TODOS).
 */

/* ─── Base ───────────────────────────────────────────────────────────────── */

.gwp {
  color: var(--gerbs-ink);
  font-family: var(--ff-body);
  line-height: 1.5;
}

/* Divi gives every <p> `padding-bottom: 1em`; this page spaces its own. */
.gwp p {
  padding-bottom: 0;
}

:where(.gwp) ul,
:where(.gwp) ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Divi gives every heading `padding-bottom: 10px`; the margins below are the whole gap. */
.gwp h1,
.gwp h2,
.gwp h3 {
  padding-bottom: 0;
}

.gwp-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

.gwp .material-symbols-outlined {
  font-size: var(--fs-20);
  flex-shrink: 0;
}

/* One summary carries both arrows; the open state swaps which one shows. */
.gwp details > summary {
  list-style: none;
}

.gwp details > summary::-webkit-details-marker {
  display: none;
}

.gwp .gwp-icon-open,
.gwp details[open] > summary .gwp-icon-closed {
  display: none;
}

.gwp details[open] > summary .gwp-icon-open {
  display: inline-block;
}

/* Text links and summaries get a ring with soft corners. The contact card keeps its own rule. */
.gwp a:not(.g-btn):not(.wholesale-contact-list__value):focus-visible,
.gwp summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* No glow on the buttons (house rule, as W1): hover is a fill change, focus an outline only. */
.gwp .g-btn,
.gwp .g-btn:hover,
.gwp .g-btn:focus-visible {
  box-shadow: none;
}

.gwp .g-btn {
  white-space: normal;
  text-align: center;
}

.gwp .g-btn--primary:hover,
.gwp .g-btn--primary:focus-visible {
  background: var(--gerbs-blue-hover);
  border-color: var(--gerbs-blue-hover);
}

.gwp .g-btn--yellow:hover,
.gwp .g-btn--yellow:focus-visible {
  background: var(--gerbs-gold);
  border-color: var(--gerbs-gold);
}

/* On the brand blue a --gerbs-blue ring is invisible: white there (5.43:1). */
.gwp-hero a:focus-visible,
.gwp-allergens a:focus-visible,
.gwp-hero .g-btn:focus-visible {
  outline-color: #fff;
}

.gwp-status a:focus-visible {
  outline-color: var(--focus-ring-color);
}

/* ─── Shared section parts ──────────────────────────────────────────────── */

.gwp-sec {
  padding: 72px var(--space-6);
}

.gwp-sec--white {
  background: #fff;
}

.gwp-sec--fog {
  background: var(--gerbs-fog);
}

.gwp-sec--blue {
  background: var(--gerbs-blue);
  color: #fff;
}

.gwp-head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--space-12);
}

.gwp-h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-32) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--gerbs-ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.gwp-lead {
  font-size: var(--fs-18);
  color: var(--gerbs-ink-70);
  margin: 0;
  text-wrap: pretty;
}

/* ─── 1. Hero (brand blue) ──────────────────────────────────────────────── */

.gwp-hero {
  background: var(--gerbs-blue);
  color: #fff;
  padding: var(--space-16) var(--space-6) 56px;
}

.gwp-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.gwp-hero__inner--solo {
  grid-template-columns: minmax(0, 1fr);
}

.gwp-hero__eyebrow {
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.gwp-hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-44) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

.gwp-hero__sub {
  font-size: var(--fs-18);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.gwp-hero__inner--solo .gwp-hero__sub {
  max-width: 64ch;
}

/* Pending, approved and staff: a panel under the subhead (W1-04, W1-05, W1-07). */
.gwp-status {
  margin: var(--space-8) 0 0;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border-radius: var(--radius-md);
  color: var(--gerbs-ink);
  max-width: 52ch;
}

.gwp-status__text,
.gwp-status__discount {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--gerbs-ink);
  margin: 0;
  text-wrap: pretty;
}

/* The approved buyer's own discount line: full ink while live, as on the account card; muted
 * (--gerbs-ink-70, 5.90:1 on white) once spent or expired. */
.gwp-status__discount {
  margin-top: var(--space-2);
}

.gwp-status__discount--muted {
  color: var(--gerbs-ink-70);
}

.gwp-status a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp-status a:hover,
.gwp-status a:focus-visible {
  color: var(--gerbs-blue-hover);
  text-decoration-thickness: 2px;
}

/* Staff: W1's muted panel, white on the deep blue (10.37:1). */
.gwp-status--muted {
  background: var(--gerbs-blue-press);
}

.gwp-status--muted .gwp-status__text {
  color: #fff;
}

.gwp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.gwp-hero__actions .g-btn--ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.gwp-hero__actions .g-btn--ghost:hover,
.gwp-hero__actions .g-btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--gerbs-blue);
}

.gwp-hero__helper {
  font-size: var(--fs-14);
  color: #fff;
  margin: var(--space-3) 0 0;
}

.gwp-proof {
  margin: var(--space-10) 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
}

/* The marker sits on the first line, not the middle of a two-line chip: line height 24px, marker 10px. */
.gwp .gwp-proof li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 24px;
  color: #fff;
}

.gwp .gwp-proof li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--gerbs-yellow);
  flex-shrink: 0;
}

/* Each chip links to its proof, drawn like the eyebrow link: white, underlined, 44px tap height. */
.gwp .gwp-proof a {
  padding-block: 10px;
  margin-block: -10px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp .gwp-proof a:hover,
.gwp .gwp-proof a:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* Three photos (/wholesale/ only, 2026-10-09): a school, a camp and a kitchen, the three the H1 names
 * (gerbs_wholesale_page_hero_trio()). Measured on the square masters: only the kitchen survives a 2:3
 * portrait crop with everyone whole; all three survive 4:3. So the kitchen is one tall 2:3 tile beside
 * the school over the camp, each 4:3, above 900px and on a phone; from 641 to 900px the three sit in
 * one row, each 4:3, which keeps the hero short under its one-column text. The kitchen's column is 8px
 * wider than the other (calc(50% - 10px) beside 1fr, 12px gap), which is what makes it exactly 2:3
 * beside two 4:3 tiles: 248px tiles and a 256 x 384 kitchen at the 1140px container.
 * 🚨 page.php's `sizes` for each tile is measured from these numbers: change one, change both.
 * Each tile's object-position frames its people: the school's lunch server's hairnet sits at the top
 * edge, the camp's table fills the bottom, and the kitchen in the row keeps the cook's cap and hands. */

.gwp-hero__media.gwp-hero__media--trio {
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  background: none;
}

.gwp-hero__trio {
  display: grid;
  grid-template-columns: calc(50% - 10px) minmax(0, 1fr);
  gap: var(--space-3);
}

.gwp-hero__tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.gwp-hero__tile--kitchen {
  grid-column: 2;
  grid-row: 1 / span 2;
  aspect-ratio: auto;
}

/* Out of flow, so a tile's size is its grid area's, never its file's. */
.gwp-hero__media--trio .gwp-hero__tile picture,
.gwp-hero__media--trio .gwp-hero__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gwp-hero__tile--school img {
  object-position: 50% 10%;
}

.gwp-hero__tile--camp img {
  object-position: 50% 40%;
}

.gwp-hero__tile--kitchen img {
  object-position: 50% 30%;
}

@media (max-width: 900px) {
  .gwp-hero__trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gwp-hero__tile--kitchen {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .gwp-hero__trio {
    grid-template-columns: calc(50% - 10px) minmax(0, 1fr);
  }

  .gwp-hero__tile {
    border-radius: var(--radius-md);
  }

  .gwp-hero__tile--kitchen {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }
}

.gwp-hero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.gwp-hero__media picture,
.gwp-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.gwp-hero__media img {
  object-fit: cover;
}

/* ─── 1b. Bulk boxes (approved buyers, PR F of the bulk-box plan) ───────── */
/* The boxes on sale, under the hero, for an approved buyer only (gerbs_wholesale_page_part_boxes()).
 * The cards are the canonical buy card (category-archive-v2.css, enqueued for this viewer alone);
 * this file lays out only their grid. Three across in the 1140px wrap (364px tiles), two on a phone.
 * The card image's `sizes` in page-parts.php is measured from these numbers: change one, change both. */

.gwp-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

/* ─── 2. Who orders ─────────────────────────────────────────────────────── */
/* W1's segment cards carry a square photo above the text: the segment's scene (2026-10-06), once its
 * page is published and the scene is set (.gwp-seg--photo). Without one the card is its text alone
 * (title, line, and the link once that segment page is published). The text sits in .gwp-seg__body,
 * a column laid out exactly as the card itself was, so a card with no photo looks as it did at launch.
 * The photo box shares the segment pages' category-card box (.gwp-pick__img, section 2b). */

.gwp-segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}

.gwp-seg {
  display: flex;
  flex-direction: column;
}

.gwp-seg--photo {
  gap: 14px;
}

.gwp-seg__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gwp-seg__title {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  font-weight: 600 !important;
  line-height: 1.4;
  color: var(--gerbs-ink);
  margin: 0;
  text-wrap: balance;
}

.gwp-seg__desc {
  font-size: var(--fs-14);
  color: var(--gerbs-ink-70);
  margin: var(--space-1) 0 0;
  text-wrap: pretty;
}

.gwp-seg__link {
  align-self: flex-start;
  margin-top: 4px;
  /* 12px above and below a 21px line: a 45px tap target, as every other link here. */
  padding: 12px 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp-seg__link:hover,
.gwp-seg__link:focus-visible {
  color: var(--gerbs-blue-hover);
  text-decoration-thickness: 2px;
}

/* ─── 2b. Segment pages (W2) ────────────────────────────────────────────── */
/* The hero's eyebrow carries a link back to /wholesale/. "What <segment> order" is W1's segment card,
 * four to a row, under W2's square photo: the category's own thumbnail where the shop has one, a card
 * of text alone where it has none (beside a phone's text, 112px). "Wholesale for other kitchens" is a
 * row of chips: the design system's .g-chip, which the site does not ship, drawn here at a 44px tap
 * height. */

.gwp-hero__crumb {
  /* An inline link in the eyebrow: the padding widens its tap area to 44px without moving the line. */
  padding-block: 14px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp-hero__crumb:hover,
.gwp-hero__crumb:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* Six categories, three across (two rows); two across at 900 px, one at 640. */
.gwp-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.gwp-pick--photo {
  gap: 14px;
}

.gwp-pick__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gwp-pick__img,
.gwp-seg__img {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gerbs-hairline);
  background: #fff;
}

.gwp-pick__img picture,
.gwp-pick__img img,
.gwp-seg__img picture,
.gwp-seg__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.gwp-pick__img img,
.gwp-seg__img img {
  object-fit: cover;
}

.gwp-head--tight {
  margin-bottom: var(--space-6);
}

.gwp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.gwp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--gerbs-hairline);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--gerbs-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.gwp-chip:hover,
.gwp-chip:focus-visible {
  border-color: var(--gerbs-ink);
  color: var(--gerbs-ink);
}

/* The page's text-link ring (top of file) rounds to --radius-sm; a chip's follows its pill. */
.gwp a.gwp-chip:not(.g-btn):focus-visible {
  border-radius: var(--radius-pill);
}

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

/* ─── 3. Wholesale account benefits ─────────────────────────────────────── */
/* W1 sets the benefits beside a photo (gerbs_wholesale_page_benefits_photo()): 0.9 to 1.1, the photo
 * first, 4:3 with a hairline, as W1 draws it. Without one, the column centres at a reading measure. */

.gwp-account__inner {
  max-width: 720px;
}

.gwp-account__inner--media {
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.gwp-account__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gerbs-hairline);
  background: #fff;
}

.gwp-account__media picture,
.gwp-account__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.gwp-account__media img {
  object-fit: cover;
}

.gwp-account .gwp-h2 {
  margin-bottom: var(--space-6);
}

.gwp-benefits {
  display: grid;
  gap: var(--space-5);
}

.gwp-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.gwp-check {
  flex-shrink: 0;
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--gerbs-blue-tint);
}

.gwp-check::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--gerbs-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.gwp-benefit__title {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  font-weight: 600 !important;
  line-height: 1.5;
  color: var(--gerbs-ink);
  margin: 0 0 2px;
}

.gwp-benefit__desc {
  font-size: var(--fs-16);
  color: var(--gerbs-ink-70);
  margin: 0;
  text-wrap: pretty;
}

.gwp-scope {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--gerbs-hairline);
  font-size: var(--fs-14);
  color: var(--gerbs-ink-70);
  text-wrap: pretty;
}

/* An inline link in a sentence: vertical padding widens its tap area to 44px without moving the line. */
.gwp-scope a {
  padding-block: 14px;
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp-scope a:hover,
.gwp-scope a:focus-visible {
  color: var(--gerbs-blue-hover);
  text-decoration-thickness: 2px;
}

.gwp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: 28px;
}

.gwp-actions--how {
  justify-content: center;
  margin-top: var(--space-10);
}

/* ─── 4. The allergen band (navy silhouettes on brand blue, W1) ─────────── */

.gwp-allergens .gwp-h2 {
  color: #fff;
  text-align: center;
  margin: 0 0 var(--space-10);
}

.gwp-allergens__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-4);
}

.gwp-allergens__grid > .gwp-allergen {
  flex: 0 0 calc((100% - 96px) / 7);
  min-width: 0;
}

.gwp-allergen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.gwp-allergen img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.gwp-allergen span {
  font-size: var(--fs-14);
  font-weight: 600;
  color: #fff;
}

/* ─── 5. How it works ───────────────────────────────────────────────────── */

.gwp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.gwp-step {
  background: #fff;
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  padding: 28px 28px var(--space-8);
}

.gwp-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--gerbs-yellow);
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--gerbs-ink);
}

.gwp-step__title {
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: 600 !important;
  line-height: 1.35;
  color: var(--gerbs-ink);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

.gwp-step__desc {
  font-size: var(--fs-16);
  color: var(--gerbs-ink-70);
  margin: 0;
  text-wrap: pretty;
}

/* ─── 6. Frequently asked questions ────────────────────────────────────── */

.gwp-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-12);
}

.gwp-faq__col {
  display: flex;
  flex-direction: column;
}

.gwp-q {
  border-bottom: 1px solid var(--gerbs-hairline);
}

.gwp-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: 14px 0;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--gerbs-ink);
  cursor: pointer;
}

/* The chevron is drawn, not an icon-font glyph (W1): down when shut, up when open. */
.gwp-q > summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: var(--space-1);
  border: solid var(--gerbs-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.gwp-q[open] > summary::after {
  transform: rotate(-135deg);
}

.gwp-q > summary:hover {
  color: var(--gerbs-blue);
}

.gwp-q__a {
  font-size: var(--fs-16);
  color: var(--gerbs-ink-70);
  margin: 0;
  padding: 0 var(--space-8) 18px 0;
  text-wrap: pretty;
}

.gwp-q__a a {
  padding-block: 13px;
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gwp-q__a a:hover,
.gwp-q__a a:focus-visible {
  color: var(--gerbs-blue-hover);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gwp-q > summary::after {
    transition: none;
  }
}

/* ─── 7. Browse the range ───────────────────────────────────────────────── */
/* W1 sets each category under a round photo. The photo is the category's homepage macro photo
 * (gerbs_wholesale_page_category_image()); a category without one is its label alone.
 * Either way the card is a link the size of the card. */

.gwp-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Every card the height of its row, so a two-line label does not stand taller than the rest. */
.gwp-cat {
  display: flex;
}

.gwp-cat__link {
  flex: 1 1 auto;
}

.gwp-cat__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--gerbs-ink);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.gwp-cat__link:hover,
.gwp-cat__link:focus-visible {
  border-color: var(--gerbs-blue);
  color: var(--gerbs-blue);
}

/* A card with a photo: W1's round photo over the label, from the top of the card, so the photos in a
 * row line up whether a label takes one line or two. */
.gwp-cat__link--photo {
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: var(--space-4);
}

.gwp-cat__img {
  display: block;
  width: min(150px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gerbs-hairline);
  background: #fff;
}

.gwp-cat__img picture,
.gwp-cat__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.gwp-cat__img img {
  object-fit: cover;
}

.gwp-actions--range {
  justify-content: center;
  margin-top: var(--space-10);
}

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

/* ─── 8. Larger or custom orders ────────────────────────────────────────── */
/* W1's form card beside the contact card, on fog. The quote form stays behind its disclosure
 * (<details id="quote">, assets/js/wholesale-page.js). The shared card rules live in
 * wholesale-contact.css; the flag-off page keeps them as they are, and this page drops their glow. */

.gwp-quote {
  background: var(--gerbs-fog);
  padding: 56px var(--space-6) var(--space-20);
}

.gwp-quote__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.gwp .wholesale-form-card {
  box-shadow: none;
}

.gwp-quote__title {
  font-family: var(--ff-display);
  font-size: var(--fs-24) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--gerbs-ink);
  margin: 0 0 6px;
  text-wrap: balance;
}

.gwp-quote__intro {
  font-size: var(--fs-16);
  color: var(--gerbs-ink);
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}

.gwp-quote__terms {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--gerbs-fog);
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--gerbs-ink);
}

.gwp-quote__terms strong {
  font-weight: 600;
}

.gwp-quote__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 2px solid var(--gerbs-blue);
  border-radius: var(--radius-pill);
  color: var(--gerbs-blue);
  font-size: var(--fs-16);
  font-weight: 600;
  cursor: pointer;
}

.gwp-quote__summary:hover {
  background: var(--gerbs-blue-tint);
}

.gwp-quote__form {
  margin-top: var(--space-6);
}

/* House rules on the reused Forminator skin, this page only: a focused field shows an outline,
 * never the shared rules' tinted glow, and the submit is W1's 48px pill. */
#wholesale-contact-page.gwp .forminator-custom-form .forminator-input:focus,
#wholesale-contact-page.gwp .forminator-custom-form .forminator-textarea:focus,
#wholesale-contact-page.gwp .forminator-custom-form .select2-container--open .select2-selection--single,
#wholesale-contact-page.gwp .forminator-custom-form .select2-container--focus .select2-selection--single {
  box-shadow: none;
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

#wholesale-contact-page.gwp .forminator-custom-form .forminator-button-submit {
  min-height: 48px;
}

/* The reused contact card's heading, here only: the same 980px skin rule as above. */
.gwp-contact .wholesale-contact-card__heading {
  font-size: var(--fs-20) !important;
  line-height: 1.3 !important;
}

/* ─── ≤900px: one column, the H1 a step down ────────────────────────────── */

@media (max-width: 900px) {
  .gwp-hero {
    padding: var(--space-12) var(--space-6) 44px;
  }

  .gwp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .gwp-hero__title {
    font-size: var(--fs-32) !important;
    line-height: 1.15 !important;
  }

  .gwp-hero__media {
    aspect-ratio: 16 / 9;
  }

  .gwp-account__inner--media {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .gwp-account__media {
    aspect-ratio: 16 / 9;
  }

  .gwp-sec {
    padding: var(--space-12) var(--space-6);
  }

  .gwp-head {
    margin-bottom: var(--space-8);
  }

  .gwp-segments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .gwp-segments > .gwp-seg {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
  }

  .gwp-allergens__grid > .gwp-allergen {
    flex-basis: calc((100% - 48px) / 4);
  }

  .gwp-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gwp-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .gwp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .gwp-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gwp-quote {
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  .gwp-quote__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .gwp-contact .wholesale-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
  }
}

/* ─── ≤640px: phone ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .gwp-hero {
    padding: var(--space-10) var(--space-5) 36px;
  }

  .gwp-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .gwp-hero__actions .g-btn,
  .gwp-actions .g-btn {
    width: 100%;
  }

  .gwp-hero__helper {
    text-align: center;
  }

  .gwp-proof {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .gwp-sec {
    padding: var(--space-10) var(--space-5);
  }

  .gwp-h2 {
    font-size: var(--fs-24) !important;
    line-height: 1.25 !important;
  }

  .gwp-segments {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-5);
  }

  .gwp-segments > .gwp-seg {
    flex: none;
  }

  /* W1 on a phone: the scene beside the text, 112px square. */
  .gwp-segments > .gwp-seg--photo {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .gwp-seg--photo .gwp-seg__img {
    flex: 0 0 112px;
    width: 112px;
  }

  .gwp-seg--photo .gwp-seg__body {
    flex: 1 1 auto;
  }

  .gwp-picks {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .gwp-pick--photo {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .gwp-pick--photo .gwp-pick__img {
    flex: 0 0 112px;
    width: 112px;
  }

  .gwp-pick--photo .gwp-pick__body {
    flex: 1 1 auto;
  }

  .gwp-allergens__grid {
    gap: var(--space-6) var(--space-2);
  }

  .gwp-allergens__grid > .gwp-allergen {
    flex-basis: calc((100% - 16px) / 3);
  }

  .gwp-allergen img {
    width: 44px;
    height: 44px;
  }

  .gwp-step {
    padding: 22px var(--space-5) var(--space-6);
  }

  .gwp-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .gwp-cat__img {
    width: min(120px, 100%);
  }

  .gwp-quote {
    padding: var(--space-10) var(--space-5) var(--space-12);
  }

  .gwp .gwp-quote__card {
    padding: var(--space-6) var(--space-5) 28px;
  }

  .gwp-quote__summary {
    display: flex;
    justify-content: center;
  }

  .gwp-contact .wholesale-contact-list {
    display: flex;
    gap: var(--space-3);
  }
}