/*!
 * ANP Market Day — use-case landing pages (grain-free, chicken-free, legume-free, freeze-dried).
 *
 * The page borrows the shop's cards and the brand pages' bands, so there is little here beyond the
 * parts that are its own: the opening, the three claims, the questions and the row of neighbours.
 * Every rule is scoped under .amd-uc.
 */

.amd-uc {
  --paper: #F8F2E3; --beige: #EFE3C6; --white: #FFFDF8;
  --green-ink: #0E4A25; --green: #009639; --green-dk: #0A6B2E;
  --brown: #6B4B2B; --ink-2: #4A3F36; --charcoal: #1A1617;
  --pumpkin: #D48B2E; --line: rgba(107, 75, 43, .28);
  --slab: "Zilla Slab", "Museo Slab", Georgia, serif;
  --sans: "Figtree", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  color: var(--charcoal); font: 400 16px/1.6 var(--sans);
}
.amd-uc *, .amd-uc *::before, .amd-uc *::after { box-sizing: border-box; }
/* Stated against `.amd-uc` because the bands run edge to edge and the theme's own width
   rules reach the wrapper otherwise — it was coming out at the full width of the window. */
.amd-uc .amd-uc-wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* ---------- the opening ---------- */
.amd-uc-hero { background: var(--beige); padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 52px); }
.amd-uc .amd-uc-h1 {
  font-family: var(--slab); color: var(--green-ink); font-weight: 700;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -.015em;
  margin: 14px 0 0; text-wrap: balance;
}
.amd-uc .amd-uc-h1 em {
  display: block; font-style: italic; font-weight: 500; color: var(--brown);
  font-size: .62em; margin-top: 8px; letter-spacing: 0;
}
.amd-uc .amd-uc-lede {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--ink-2);
  max-width: 62ch; margin: 20px 0 0;
}
.amd-uc-count { margin: 16px 0 0; font-weight: 600; color: var(--green-dk); }

/* ---------- the recipes ---------- */
.amd-uc-shop { background: var(--paper); padding-block: clamp(32px, 4vw, 56px); }
/* The shop grid sizes itself to its own page; here it is stated again so the cards do not stretch
   when a category has only two recipes in it. */
.amd-uc .amd-uc-grid {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.amd-uc-all { margin: clamp(24px, 3vw, 34px) 0 0; text-align: center; }
.amd-uc .amd-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  background: transparent; color: var(--green-ink); font: 700 16px/1 var(--sans);
  text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background .2s, color .2s;
}
.amd-uc .amd-btn-ghost:hover, .amd-uc .amd-btn-ghost:focus-visible { background: var(--green-ink); color: #fff; }

/* ---------- the three claims ---------- */
.amd-uc-points { background: var(--white); padding-block: clamp(36px, 5vw, 60px); }
.amd-uc .amd-uc-plist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.amd-uc .amd-uc-plist li { display: grid; gap: 6px; margin: 0; }
.amd-uc-pic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%;
  background: var(--beige); color: var(--brown);
}
.amd-uc-pic .amd-ic { width: 24px; height: 24px; }
.amd-uc .amd-uc-plist b { font: 700 18px/1.3 var(--slab); color: var(--green-ink); }
.amd-uc .amd-uc-plist span:not(.amd-uc-pic) { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---------- the page's own words ---------- */
.amd-uc-prose { background: var(--paper); padding-block: clamp(32px, 4vw, 56px); }

/* ---------- questions ---------- */
.amd-uc-faq { background: var(--white); padding-block: clamp(36px, 5vw, 60px); }
.amd-uc-faq h2, .amd-uc-others h2 {
  font-family: var(--slab); color: var(--green-ink); font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15; margin: 0 0 22px;
}
.amd-uc-qs { display: grid; gap: 10px; max-width: 80ch; margin-inline: auto; }
.amd-uc .amd-uc-q {
  background: var(--paper); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line);
  padding: 0 18px;
}
.amd-uc .amd-uc-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 17px/1.4 var(--sans); color: var(--green-ink);
}
.amd-uc .amd-uc-q summary::-webkit-details-marker { display: none; }
.amd-uc .amd-uc-q summary .amd-ic { flex: none; width: 20px; height: 20px; color: var(--brown); transition: transform .2s; }
.amd-uc .amd-uc-q[open] summary .amd-ic { transform: rotate(180deg); }
.amd-uc .amd-uc-q p { margin: 0; padding: 0 0 18px; color: var(--ink-2); font-size: 16px; line-height: 1.7; max-width: 68ch; }

/* ---------- the other pages ---------- */
.amd-uc-others { background: var(--paper); padding-block: clamp(36px, 5vw, 60px); }
.amd-uc-olist { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.amd-uc .amd-uc-other {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px;
  padding: 18px 20px; border-radius: 16px; text-decoration: none;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s, transform .2s;
}
.amd-uc .amd-uc-other:hover, .amd-uc .amd-uc-other:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--green-dk); transform: translateY(-2px);
}
.amd-uc .amd-uc-other b { font: 700 17px/1.3 var(--slab); color: var(--green-ink); }
.amd-uc .amd-uc-other span { grid-column: 1; color: var(--ink-2); font-size: 14px; }
.amd-uc .amd-uc-other .amd-ic { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--brown); }

/* ---------- buy it in person ---------- */
.amd-uc-store { background: var(--green-ink); color: #E9E1CB; padding-block: clamp(32px, 4vw, 52px); }
.amd-uc-store .amd-uc-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.amd-uc-store p { margin: 0; font-size: clamp(17px, 2vw, 21px); font-family: var(--slab); max-width: 46ch; }
.amd-uc .amd-uc-store .amd-btn-green {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 999px; white-space: nowrap;
  background: var(--green); color: #fff; font: 700 16px/1 var(--sans); text-decoration: none;
  transition: background .2s;
}
.amd-uc .amd-uc-store .amd-btn-green:hover, .amd-uc .amd-uc-store .amd-btn-green:focus-visible { background: var(--pumpkin); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .amd-uc .amd-uc-other, .amd-uc .amd-uc-q summary .amd-ic { transition: none; }
}

/* ---------- the shelf as the hero ------------------------------------------------------------
   The stand is the homepage's, rendered here with this line's recipes on it, so almost nothing is
   needed: it brings its own styles. What it does not bring is the page's own heading. The stand's
   headline is an `h2` because on the homepage it sits beneath the site's; here the page has to say
   what it is once, in the words someone searched for, and that line belongs directly under the
   shelf, and it is the stand's own headline that carries it — so nothing is added here. */
/* ---------- the recipes: a heading, not just a grid ---------- */
.amd-uc-shophead { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
.amd-uc-shophead h2 {
  font-family: var(--slab); color: var(--green-ink); font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.15; margin: 0;
}
.amd-uc-shophead p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }

/* The question's own text takes the room, the chevron keeps its corner. */
.amd-uc .amd-uc-q summary > span { flex: 1 1 auto; min-width: 0; }

/* ==============================================================================================
   Landing page polish
   ============================================================================================== */

/* ---------- the recipes, denser ---------------------------------------------------------------
   The shop's card is built for the shop, where browsing is the job and a card can afford room.
   Here the visitor has already chosen a line and is comparing recipes inside it, so the cards are
   tightened: a shorter photo, the name and the claims closer together, and the price beside the
   buy strip rather than above it. More of the line fits on one screen, which is the whole point of
   a page about that line. */
.amd-uc .amd-uc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.amd-uc .amd-uc-grid .amd-sp-card { border-radius: 16px; }
.amd-uc .amd-uc-grid .amd-sp-shot { aspect-ratio: 5 / 4; }
.amd-uc .amd-uc-grid .amd-sp-shot img { object-fit: contain; padding: 10px; }
.amd-uc .amd-uc-grid .amd-sp-body-in { padding: 14px 16px 16px; gap: 8px; }
.amd-uc .amd-uc-grid .amd-sp-body-in h2 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; margin: 0; }
.amd-uc .amd-uc-grid .amd-sp-line { font-size: 11px; letter-spacing: .14em; }
.amd-uc .amd-uc-grid .amd-sp-tags { gap: 6px; }
.amd-uc .amd-uc-grid .amd-sp-tag { font-size: 11.5px; padding: 4px 9px; }
.amd-uc .amd-uc-grid .amd-sp-foot { margin-top: 2px; padding-top: 10px; }

/* ---------- "See the whole shop" --------------------------------------------------------------
   It was sitting flush against the last row of cards — the gap measured zero, because the theme
   zeroes the margin on a paragraph and this is one. Stated at a weight that holds, with room that
   reads as a break between the line and the rest of the shop. */
/* Three classes and a tag: the theme's `.amd-page .entry-content p` is one class and one tag more
   specific than two classes alone, which is why the first attempt at this changed nothing. */
.amd-uc .amd-uc-shop p.amd-uc-all { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; text-align: center; }
@media (hover: none) {
  .amd-uc .amd-uc-copy .gb-grid-wrapper img { filter: none; opacity: 1; }
}

/* ==============================================================================================
   The rebuilt landing page
   ----------------------------------------------------------------------------------------------
   Everything below belongs to the sections that replaced the page builder's output. The page reads
   as one argument from top to bottom: the shelf, the reassurance, the recipes, why this line, what
   people say, the page's own writing, the questions, where else to buy.
   ============================================================================================== */

/* ---------- reassurance, directly under the shelf --------------------------------------------- */
.amd-uc-trust { background: var(--white); border-block: 1px solid var(--line); padding-block: clamp(18px, 2.2vw, 26px); }
.amd-uc .amd-uc-trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.amd-uc .amd-uc-trust li {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 12px; row-gap: 0; margin: 0;
}
.amd-uc .amd-uc-trust .amd-ic { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--green-dk); }
.amd-uc .amd-uc-trust b { font: 700 15px/1.25 var(--sans); color: var(--green-ink); }
.amd-uc .amd-uc-trust span { font-size: 13px; color: var(--ink-2); }

/* ---------- the recipes ------------------------------------------------------------------------ */
.amd-uc-shophead .amd-eyebrow { display: block; margin-bottom: 8px; }

/* ---------- why this line ---------------------------------------------------------------------- */
.amd-uc-points .amd-eyebrow { display: block; margin-bottom: 14px; }

/* ---------- reviews, the home page's band ------------------------------------------------------
   home.css draws this; only the spacing around it belongs to this page. */
.amd-uc-revwrap { background: var(--paper); }
.amd-uc-revwrap .amdh-band { padding-block: clamp(36px, 5vw, 64px); }

/* ---------- the page's own writing -------------------------------------------------------------
   Read out of the old markup by Prose and laid out here. Bands alternate so a long read has a
   rhythm; the measure is held to something comfortable rather than the full width of the page. */
.amd-uc-read { background: var(--paper); padding-block: clamp(34px, 4.5vw, 58px); }
.amd-uc-read.is-alt { background: var(--white); }
/* The heading and the words under it are one centred column.
 *
 * They were not: the heading centred itself with automatic margins while the paragraphs kept to a
 * 74ch measure hard against the left of a 1240px band, so on a wide screen the text sat in the
 * left two-thirds with a heading floating over the middle of it and 480px of empty paper to the
 * right. Both are centred now and share an axis; the text stays left-aligned inside the column,
 * which is what makes a paragraph easy to read. */
.amd-uc-read h2 {
  font-family: var(--slab); color: var(--green-ink); font-weight: 700;
  font-size: clamp(23px, 2.7vw, 32px); line-height: 1.18; letter-spacing: -.01em;
  margin: 0 auto 18px; max-width: 30ch; text-align: center;
}
.amd-uc-readin { max-width: 76ch; margin-inline: auto; }
.amd-uc-readin p { margin: 0 0 1.05em; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.amd-uc-readin p:last-child { margin-bottom: 0; }

/* A list on these pages is nearly always a list of things that are true of the food, so it is set
   as a row of ticks rather than bullets — quicker to scan and it looks like a claim, not prose. */
/* A short list the old copy wrote as one line of pipes, set as chips.
 *
 * Centred on the reading column's axis like everything else in the band, and sized so a six-item
 * list settles into two tidy rows on a phone rather than one ragged column. The crossed variant
 * carries the brown the rest of the site uses for "not this"; the plain variant is green, because
 * then it is a list of things the food does have. */
.amd-uc .amd-uc-chips {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.amd-uc .amd-uc-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 14.5px/1 var(--sans); color: var(--charcoal);
}
.amd-uc .amd-uc-chips .amd-ic { width: 15px; height: 15px; flex: none; color: var(--green-dk); }
.amd-uc .amd-uc-chips.is-deny .amd-ic { color: var(--brown); }
.amd-uc .amd-uc-chips.is-deny li { box-shadow: inset 0 0 0 1px rgba(122, 92, 62, .3); }
@media (max-width: 520px) {
  .amd-uc .amd-uc-chips { gap: 8px; }
  .amd-uc .amd-uc-chips li { padding: 8px 13px 8px 11px; font-size: 13.5px; }
}

.amd-uc .amd-uc-ticks {
  list-style: none; margin: 18px 0 4px; padding: 0;
  display: grid; gap: 10px 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.amd-uc .amd-uc-ticks li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0;
  font-size: 16px; line-height: 1.55; color: var(--charcoal);
}
.amd-uc .amd-uc-ticks .amd-ic {
  width: 20px; height: 20px; margin-top: 2px; flex: none;
  color: var(--green); background: rgba(0, 150, 57, .1); border-radius: 50%; padding: 3px;
}

/* ---------- the questions ---------------------------------------------------------------------- */
.amd-uc-faq .amd-eyebrow { display: block; margin-bottom: 8px; }

/* ---------- where else to buy -------------------------------------------------------------------
   One row, all of them the same height, greyed back so they support the page rather than compete
   with it. A shop that would rather be recognised in colour gets that on hover, and on a touch
   screen — where there is no hover — they are simply in colour. */
.amd-uc-stockists { background: var(--paper); padding-block: clamp(30px, 4vw, 48px); }
.amd-uc-stockists h2 {
  font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown); text-align: center; margin: 0 0 22px;
}
.amd-uc .amd-uc-stockists ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 52px);
}
.amd-uc .amd-uc-stockists li { margin: 0; }
/* In their own colours. These are brands a shopper recognises at a glance, and greyed back they
   were just grey shapes — the recognition is the entire reason the row is on the page. */
.amd-uc .amd-uc-stockists img {
  display: block; height: clamp(28px, 3.4vw, 42px); width: auto; max-width: 160px;
  object-fit: contain;
}



/* ---------- the shelf, edge to edge -------------------------------------------------------------
   The stand is printed outside the `.amd` wrapper so the page's own rules cannot reach into it (see
   the note in usecase.php). That puts it directly inside the article, which the theme caps at
   1600px — so on a 2560px screen it sat in a 1600px box with 473px of empty paper either side while
   every band under it ran the full width. It gets the same bleed the other full-width blocks use.
   ------------------------------------------------------------------------------------------------ */
.amd-usecase .amd-st {
  --amd-bleed: calc(100vw - var(--amd-sbw, 0px));
  width: var(--amd-bleed); max-width: var(--amd-bleed);
  margin-left: calc(50% - var(--amd-bleed) / 2);
  margin-right: calc(50% - var(--amd-bleed) / 2);
}


/* The FAQ shares the same centre line as the reading column above it. */
.amd-uc-faq .amd-uc-wrap > .amd-eyebrow,
.amd-uc-faq .amd-uc-wrap > h2 { text-align: center; }
.amd-uc-faq h2 { max-width: 30ch; margin-inline: auto; }
.amd-uc-points .amd-eyebrow { text-align: center; }

/* Stockist logos are links again. */
.amd-uc .amd-uc-stockists a { display: block; text-decoration: none; transition: transform .18s ease; }
.amd-uc .amd-uc-stockists a:hover, .amd-uc .amd-uc-stockists a:focus-visible { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .amd-uc .amd-uc-stockists a { transition: none; } }