/* ==========================================================================
   Guimaras Wonder's Farm — base layer: reset, typography, bands, buttons
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--gwf-body);
  font-size: var(--gwf-body-sz);
  line-height: 1.6;
  color: var(--gwf-ink);
  background: var(--gwf-bone);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gwf-green); }
a:hover { color: #0d2a1c; }

:focus-visible {
  outline: 2px solid var(--gwf-green);
  outline-offset: 2px;
}
.gwf-band--ink :focus-visible,
.gwf-band--green :focus-visible { outline-color: var(--gwf-gold); }

.gwf-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gwf-skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 12px 20px; background: var(--gwf-gold);
  color: var(--gwf-ink); font-weight: 700; border-radius: var(--gwf-radius);
}

/* ---- Typography ---------------------------------------------------------
   Autour One has one weight (400) — headings differ by size only. */

h1, h2, h3, h4 {
  font-family: var(--gwf-display);
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--gwf-green);
  text-wrap: balance;
  line-height: 1.2;
}
h1 { font-size: var(--gwf-h1); }
h2 { font-size: var(--gwf-h2); }
h3 { font-size: var(--gwf-h3); }
h4 { font-size: var(--gwf-h4); }
/* Figma's larger "statement" heading — see --gwf-h2-lg in tokens.css. */
h2.gwf-h2--statement { font-size: var(--gwf-h2-lg); }
/* The three intermediate sizes Figma uses on the Our Story / Contact frames.
   Written without an element prefix on purpose: the size is a visual step, and
   the heading LEVEL is decided by the document outline, not by the size. The
   Contact card titles are h2 (they sit directly under the page h1) at the 28px
   step, which the h3 tag would otherwise imply. */
.gwf-h2--md { font-size: var(--gwf-h2-md); }
.gwf-h3--md { font-size: var(--gwf-h3-md); }
.gwf-h3--lg { font-size: var(--gwf-h3-lg); }
.gwf-band--ink h1, .gwf-band--ink h2, .gwf-band--ink h3, .gwf-band--ink h4,
.gwf-band--green h1, .gwf-band--green h2, .gwf-band--green h3, .gwf-band--green h4 {
  color: var(--gwf-white);
}

p { margin: 0 0 18px; max-width: var(--gwf-measure); }
p:last-child { margin-bottom: 0; }

.gwf-lead {
  font-size: var(--gwf-lead);
  line-height: 1.55;
  max-width: var(--gwf-measure-lead);
}
/* Long-form body copy. Figma sets the running paragraphs of the Our Story
   frame's three prose sections at 16px/25.6 — a step up from the 14px this
   system uses for card and caption text, which is the dominant size elsewhere
   in the file (23 of the homepage's text nodes). Scoped to a class so it lifts
   only the sections Figma actually sets larger.
   `:not([class])` matters: .gwf-badge and .gwf-lead are <p> elements too, and
   a bare `.gwf-prose p` (0,1,1) outranks both of their single-class rules —
   which silently blew the 12px section badges up to 16px and shrank the 18px
   homeland lede. Only unclassed running paragraphs are meant here. */
.gwf-prose p:not([class]) {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;   /* Figma's gap between the two story paragraphs */
}

.gwf-small { font-size: var(--gwf-small); color: var(--gwf-ink); opacity: 0.75; }
.gwf-band--ink .gwf-small,
.gwf-band--green .gwf-small { color: var(--gwf-bone); opacity: 0.78; }
.gwf-band--ink p, .gwf-band--green p { color: var(--gwf-bone); opacity: 0.9; }

/* ---- Eyebrow label -------------------------------------------------------
   Uppercase, zero letter-spacing (the Figma file never tracks its caps). */
.gwf-eyebrow {
  font-family: var(--gwf-body);
  font-weight: 700;
  font-size: var(--gwf-micro);
  text-transform: uppercase;
  color: var(--gwf-sage);
  margin: 0 0 12px;
  /* It is a <p>, so it inherited the 476px reading measure above. On a
     centred section head that capped the label to the left 476px of the
     column and "centred" it inside that, leaving it visibly off-centre
     under its own heading. A four-word label never needs a measure. */
  max-width: none;
}
.gwf-band--ink .gwf-eyebrow,
.gwf-band--green .gwf-eyebrow { color: var(--gwf-gold); }

/* ---- Badge pill -----------------------------------------------------------
   The rounded outline chip above a heading ("AUTHENTIC GUIMARAS CARABAO
   MANGOES", "THE SWEETEST HERITAGE"). Replaces the old .gwf-manifest
   hairline-rule device, which depended on the retired carton-notch motif. */
.gwf-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--gwf-sage);
  border-radius: var(--gwf-radius-pill);
  font-family: var(--gwf-body);
  font-weight: 700;
  font-size: var(--gwf-micro);
  text-transform: uppercase;
  color: var(--gwf-sage);
  margin: 0 0 16px;
  /* Inside a column flex parent (.gwf-card, .gwf-hero__card) the default
     stretch alignment blew the pill out to the full column width — Figma's
     pills always hug their label (e.g. 165px for "THE SWEETEST HERITAGE",
     node 4:49). Ignored outside a flex container. */
  align-self: flex-start;
}
.gwf-band--ink .gwf-badge,
.gwf-band--green .gwf-badge {
  border-color: rgba(247, 243, 232, 0.4);
  color: var(--gwf-gold);
}
/* A badge pill used as a centred section head. .gwf-badge is inline-flex, so
   text-align on an ancestor cannot centre it once it is its own block — give
   it a shrink-to-fit box and auto side margins instead. Must stay after
   .gwf-badge: same specificity, so source order decides the display value. */
.gwf-badge--center { display: flex; width: fit-content; margin-inline: auto; align-self: center; }
/* Over a photograph the outline-only pill disappears. Figma fills its badges
   with sand (#EFEBE0) everywhere — invisible against the bone page ground, so
   the pill reads as outline-only on light bands, but on the Our Story hero
   (node 11:446) that fill is the whole point. */
.gwf-badge--solid { background: var(--gwf-sand); }

/* ---- Manifest stat line ---------------------------------------------------
   gwf_manifest() prints its segments as bare adjacent <span>s. Its styling was
   dropped when the badge pill above replaced the old hairline-rule device, but
   the function still runs on the shop archive, so the segments were rendering
   run together: "Twelve productsFourteen sizesFour cleared for export". */
.gwf-manifest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--gwf-small);
  color: var(--gwf-ink);
  opacity: 0.75;
  max-width: none;
}
.gwf-manifest span + span::before {
  content: '·';
  margin-right: 14px;
  opacity: 0.5;
}

/* ---- Editor content: pages, Cart/Checkout/My Account blocks ------------- */

.gwf-entry { margin-top: 32px; }
.gwf-entry > * + * { margin-top: 20px; }
.gwf-entry h2 { margin-top: 44px; }
.gwf-entry h3 { margin-top: 32px; }
.gwf-entry ul, .gwf-entry ol {
  max-width: var(--gwf-measure);
  padding-left: 1.25em;
  margin-bottom: 18px;
}
.gwf-entry li { margin-bottom: 8px; line-height: 1.6; }
.gwf-entry a { color: var(--gwf-green); text-underline-offset: 3px; }
.gwf-entry img { max-width: 100%; height: auto; border-radius: var(--gwf-radius-card); }
.gwf-entry blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--gwf-sand);
  border-radius: var(--gwf-radius-card);
  font-style: italic;
}
.gwf-entry :where(figure.wp-block-table, .wp-block-table) { overflow-x: auto; }
.gwf-entry table { border-collapse: collapse; width: 100%; font-size: var(--gwf-small); }
.gwf-entry th, .gwf-entry td { padding: 10px 12px; border-bottom: 1px solid var(--gwf-hairline); text-align: left; }

/* ---- Bands: full-bleed ground, contents held to the column -------------- */

.gwf-band {
  padding: var(--gwf-band-y) var(--gwf-gutter);
  background: var(--gwf-bone);
}
.gwf-band--bone  { background: var(--gwf-bone); }
.gwf-band--sand  { background: var(--gwf-sand); }
.gwf-band--white { background: var(--gwf-white); }
.gwf-band--ink   { background: var(--gwf-green); } /* one dark ground in this system, not two */
.gwf-band--green { background: var(--gwf-green); }
.gwf-band--tight { padding-top: 32px; padding-bottom: 32px; }

.gwf-wrap {
  max-width: var(--gwf-column);
  margin-inline: auto;
}

/* ---- Buttons -------------------------------------------------------------
   Pill-shaped, per the Figma file's CTAs (radius: 999px, not the old 6px). */

.gwf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--gwf-radius-pill);
  font-family: var(--gwf-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gwf-dur) var(--gwf-ease),
              color var(--gwf-dur) var(--gwf-ease),
              border-color var(--gwf-dur) var(--gwf-ease);
}
.gwf-btn--primary { background: var(--gwf-green); color: var(--gwf-white); }
.gwf-btn--primary:hover { background: #0d2a1c; color: var(--gwf-white); }
.gwf-btn--gold { background: var(--gwf-gold); color: var(--gwf-ink); }
.gwf-btn--gold:hover { background: #d99a1c; color: var(--gwf-ink); }
.gwf-btn--ghost {
  background: var(--gwf-white);
  color: var(--gwf-green);
  border-color: var(--gwf-green);
}
.gwf-btn--ghost:hover { background: var(--gwf-green); color: var(--gwf-white); }
.gwf-band--ink .gwf-btn--ghost,
.gwf-band--green .gwf-btn--ghost {
  background: transparent;
  color: var(--gwf-white);
  border-color: rgba(247, 243, 232, 0.6);
}
.gwf-band--ink .gwf-btn--ghost:hover,
.gwf-band--green .gwf-btn--ghost:hover { background: rgba(247, 243, 232, 0.12); }
.gwf-btn:disabled, .gwf-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed;
}

.gwf-textlink {
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.gwf-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--gwf-hairline);
  border-radius: var(--gwf-radius-pill);
  font-size: var(--gwf-small);
  font-weight: 700;
  color: var(--gwf-green);
  background: var(--gwf-white);
  text-decoration: none;
}
.gwf-pill:hover { background: var(--gwf-green); color: var(--gwf-white); border-color: var(--gwf-green); }
.gwf-pill.is-active { background: var(--gwf-green); color: var(--gwf-white); border-color: var(--gwf-green); }

/* ---- Icon badge -----------------------------------------------------------
   A bare stroke icon, used in the standards bands (Home + PDP). Figma has no
   fill/background behind it (fills: [] on the wrapper on every instance) --
   this used to be a filled gold circle, which was never in the design. */
.gwf-icon-badge {
  display: grid;
  place-items: center;
}
.gwf-icon-badge svg { width: 28px; height: 28px; }

/* ---- Responsive ----------------------------------------------------------*/

@media (max-width: 560px) {
  .gwf-band {
    padding-left: var(--gwf-gutter-sm);
    padding-right: var(--gwf-gutter-sm);
    padding-top: var(--gwf-band-y-sm);
    padding-bottom: var(--gwf-band-y-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}