/* ==========================================================================
   Guimaras Wonder's Farm — components: nav, footer, product plate, cards
   ========================================================================== */

/* ---- Nav ---------------------------------------------------------------- */

.gwf-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--gwf-green);
  padding: 14px var(--gwf-gutter);
}
.gwf-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gwf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.gwf-brand__mark {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--gwf-bone);
  display: grid; place-items: center;
  padding: 5px;
  flex-shrink: 0;
}
.gwf-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.gwf-brand__name {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' 105, 'wght' 700;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  color: var(--gwf-bone);
  letter-spacing: 0.005em;
}

.gwf-menu { display: flex; align-items: center; gap: 8px; }
.gwf-menu__list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.gwf-menu__list a {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* touch target — the old site shipped 17px */
  padding: 0 14px;
  color: var(--gwf-bone);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  border-radius: var(--gwf-radius);
}
.gwf-menu__list a:hover { background: rgba(247, 248, 241, 0.12); color: var(--gwf-bone); }
.gwf-menu__list .current-menu-item > a {
  box-shadow: inset 0 -2px 0 var(--gwf-gold);
}

.gwf-cart {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  margin-left: 8px;
  border: 1px solid rgba(247, 248, 241, 0.45);
  border-radius: var(--gwf-radius);
  color: var(--gwf-bone);
  text-decoration: none;
  font-weight: 700; font-size: 0.875rem;
}
.gwf-cart:hover { background: rgba(247, 248, 241, 0.12); color: var(--gwf-bone); }
.gwf-cart__count {
  background: var(--gwf-gold);
  color: var(--gwf-ink);
  font-size: 0.6875rem; font-weight: 800;
  border-radius: var(--gwf-radius-pill);
  padding: 2px 7px; min-width: 20px; text-align: center;
}

.gwf-burger { display: none; }

@media (max-width: 820px) {
  .gwf-nav { padding-left: var(--gwf-gutter-sm); padding-right: var(--gwf-gutter-sm); }

  .gwf-burger {
    display: grid; place-content: center; gap: 5px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(247, 248, 241, 0.45);
    border-radius: var(--gwf-radius);
    cursor: pointer;
  }
  .gwf-burger span {
    display: block; width: 20px; height: 2px;
    background: var(--gwf-bone);
    transition: transform var(--gwf-dur) var(--gwf-ease),
                opacity var(--gwf-dur) var(--gwf-ease);
  }
  [aria-expanded="true"].gwf-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [aria-expanded="true"].gwf-burger span:nth-child(2) { opacity: 0; }
  [aria-expanded="true"].gwf-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gwf-menu {
    position: fixed;
    inset: 70px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px var(--gwf-gutter-sm) 40px;
    background: var(--gwf-green);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--gwf-dur) var(--gwf-ease);
    visibility: hidden;
  }
  .gwf-menu-open .gwf-menu { transform: translateX(0); visibility: visible; }
  .gwf-menu-open { overflow: hidden; }

  .gwf-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gwf-menu__list a {
    min-height: 56px;
    padding: 0 8px;
    font-size: 1.125rem;
    border-bottom: 1px solid rgba(247, 248, 241, 0.15);
    border-radius: 0;
  }
  .gwf-cart { margin: 24px 0 0; justify-content: center; min-height: 52px; }
}

/* ---- Product plate ------------------------------------------------------
   4:5 portrait. Every product is a tall jar or bottle; a landscape crop loses
   the lid and the base. Four SKUs have no photograph and are set in type — in
   a manifest, an entry without a plate is normal. */

.gwf-plate {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gwf-sage);
  transition: clip-path var(--gwf-dur) var(--gwf-ease);
}
.gwf-plate__img { width: 100%; height: 100%; object-fit: cover; }

.gwf-plate--typeset {
  background: var(--gwf-green);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.gwf-plate--typeset span {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-expanded), 'wght' 800;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--gwf-bone);
}

/* ---- Product card: structured as a manifest entry, not a soft tile ------ */

.gwf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
  list-style: none; margin: 0; padding: 0;
}

.gwf-card {
  display: flex;
  flex-direction: column;
  background: var(--gwf-bone);
  border: 1px solid var(--gwf-hairline);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--gwf-notch-md)) 0, 100% var(--gwf-notch-md), 100% 100%, 0 100%);
  transition: transform var(--gwf-dur) var(--gwf-ease);
}
.gwf-card:hover .gwf-plate__img { transform: scale(1.02); }
.gwf-plate__img { transition: transform var(--gwf-dur) var(--gwf-ease); }

.gwf-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gwf-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gwf-card__name {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
}
.gwf-card__name a { text-decoration: none; color: var(--gwf-ink); }
.gwf-card__name a:hover { color: var(--gwf-green); }

.gwf-card__meta {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-condensed), 'wght' 600;
  font-size: var(--gwf-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gwf-moss);
  display: flex; flex-wrap: wrap; gap: 0 10px;
}
.gwf-card__meta .is-export { color: var(--gwf-green); font-variation-settings: 'wdth' var(--gwf-w-condensed), 'wght' 700; }

.gwf-card__desc { font-size: var(--gwf-small); line-height: 1.55; margin: 0; }
.gwf-card__price { font-size: 1.375rem; margin-top: auto; padding-top: 6px; }

.gwf-card__cta {
  display: block; width: 100%;
  border: none;
  background: var(--gwf-gold);
  color: var(--gwf-ink);
  font-family: var(--gwf-body);
  font-weight: 800; font-size: 0.9375rem;
  padding: 16px 12px;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.gwf-card__cta:hover { background: #d0a31d; color: var(--gwf-ink); }
.gwf-card__cta[aria-disabled="true"],
.gwf-card__cta:disabled { background: var(--gwf-sage); color: var(--gwf-moss); cursor: not-allowed; }

/* ---- The dated certification record -------------------------------------
   A record, not a sequence — so no numbering, and not four identical pills.
   The dates carry the story: three years of work for the first, then three
   accreditations in three years. */

.gwf-record { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gwf-record li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 12rem) minmax(0, 1fr);
  gap: 0 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--gwf-hairline);
}
.gwf-record li:last-child { border-bottom: 1px solid var(--gwf-hairline); }
.gwf-record__year { font-size: 1.5rem; color: var(--gwf-green); }
.gwf-record__name {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-normal), 'wght' 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
}
.gwf-record__body { font-size: var(--gwf-small); color: var(--gwf-moss); margin: 0; }

@media (max-width: 700px) {
  .gwf-record li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .gwf-record__body { grid-column: 2 / -1; margin-top: 4px; }
}

/* ---- To-be-confirmed marker ---------------------------------------------
   Unknowns render visibly rather than being estimated. Shipping lead times,
   per-SKU shelf life and bulk terms are genuinely unknown, and shelf life is a
   regulated claim that belongs to the product label. */

.gwf-tbc {
  display: inline-block;
  background: var(--gwf-warn-bg);
  color: var(--gwf-warn);
  border: 1px solid var(--gwf-gold);
  border-radius: var(--gwf-radius);
  padding: 1px 8px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ---- Footer ------------------------------------------------------------- */

.gwf-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 48px;
  margin-bottom: 40px;
}
.gwf-footer__brand { display: flex; gap: 14px; align-items: flex-start; }
.gwf-footer__name {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1rem;
  color: var(--gwf-bone);
  margin-bottom: 6px;
}
.gwf-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; }
.gwf-footer__cols h3 {
  font-variation-settings: 'wdth' var(--gwf-w-condensed), 'wght' 700;
  font-size: var(--gwf-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gwf-lime);
  margin-bottom: 12px;
}
.gwf-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.gwf-footer__cols li { font-size: var(--gwf-small); line-height: 1.7; color: rgba(247, 248, 241, 0.78); }
.gwf-footer__cols a { color: rgba(247, 248, 241, 0.9); text-decoration: none; }
.gwf-footer__cols a:hover { color: var(--gwf-bone); text-decoration: underline; }

.gwf-footer__legal {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--gwf-hairline-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 0.75rem; color: rgba(247, 248, 241, 0.62);
}

@media (max-width: 820px) {
  .gwf-footer__top { grid-template-columns: 1fr; gap: 36px; }
}