/** Shopify CDN: Minification failed

Line 3874:0 Unexpected "}"

**/
/* ==========================================================================
   Louis Pet Co — ground-up section design system (Design Direction v1)
   Used by all sections/lpc-*.liquid. Integrates with Shapes colour schemes
   via rgb(var(--color-scheme-*)) so every section recolours from the editor.
   ========================================================================== */

/* ---- layout primitives ---- */
.lpc-section {
  position: relative;
  overflow: hidden;
}
.lpc-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .lpc-wrap { padding-inline: 2.5rem; }
}
/* ---------- keyboard focus ----------
   The theme default is a 1px dashed currentColor hairline. Two problems: it's a
   generic hairline in an identity built on chunky flat shapes, and it vanishes
   wherever currentColor equals the section background — the roo CTA button sits
   on an ink section with ink text, so its ring was ink-on-ink: the primary
   conversion button had no visible focus at all.
   Two concentric rings in the brand's own colours mean at least one always
   contrasts, on every scheme: ink ring reads on cream/roo/ochre, the roo halo
   reads on ink/red. No scheme can swallow both. */
.lpc-btn:focus-visible,
.lpc-pill:focus-visible,
.lpc-pdp__thumb:focus-visible,
.lpc-rs__arrow:focus-visible,
.lpc-stars:focus-visible,
.lpc-section a:focus-visible,
.lpc-section button:focus-visible,
.lpc-section summary:focus-visible,
.lpc-section input:focus-visible,
.lpc-section select:focus-visible,
.lpc-cd a:focus-visible,
.lpc-cd button:focus-visible {
  outline: 3px solid var(--lpc-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--lpc-roo);
}

/* Section rhythm. A section break has to be visibly bigger than the largest gap
   INSIDE a section or the page reads as one undifferentiated flow. This was
   2.75rem against .lpc-mt-3's 2.5rem, a difference of four pixels, so nothing
   read as a boundary. */
.lpc-py { padding-block: 3.5rem; }
@media (min-width: 768px) {
  .lpc-py { padding-block: 5.5rem; }
}

/* ---- panels (the rounded cream blocks from the packaging) ---- */
.lpc-panel {
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border-radius: 24px;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .lpc-panel { padding: 2.5rem; border-radius: 32px; }
}

/* ---- type ---- */
.lpc-eyebrow {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  display: inline-block;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}
.lpc-h1, .lpc-h2, .lpc-h3 {
  font-family: var(--heading-font-stack);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  margin: 0;
}
/* MOBILE TYPE FLOORS — retuned 2026-07-27.
   Every one of these is clamp(floor, Nvw, ceiling), and on a phone the vw term is
   always the smallest of the three, so the FLOOR is the only value a phone ever
   sees. The old floors were written against a 16px root; this theme's root is
   18px, so they all rendered ~12.5% larger than intended and every h2 on the site
   wrapped to 2-3 lines at 375px ("Most cat food isn't made for how cats eat" took
   three). Lowering a floor cannot touch desktop, which sits on the ceiling —
   the numbers in the comments are the width at which each one stops being flat
   and starts scaling, and all of them are still well inside tablet. */
.lpc-h1 { font-size: clamp(1.85rem, 8.5vw, 4.5rem); }   /* flat below 392px */
.lpc-h2 { font-size: clamp(1.4rem, 5.5vw, 3.25rem); }   /* flat below 458px */
.lpc-h3 { font-size: clamp(1.0625rem, 3.5vw, 1.625rem); } /* flat below 546px */
.lpc-body {
  font-family: var(--main-font-stack);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 38rem;
}
.lpc-display-number {
  font-family: var(--heading-font-stack);
  font-size: clamp(1.95rem, 7vw, 4rem);                 /* flat below 501px */
  line-height: 1;
}

/* ---- buttons ---- */
.lpc-btn {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.0625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  border: 2px solid var(--lpc-ink);
  border-radius: 999px;
  padding: 1rem 2.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--lpc-e-out), color 0.18s var(--lpc-e-out), transform 0.18s var(--lpc-e-out);
}
.lpc-btn:hover {
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  transform: translateY(-2px);
}
/* Press feedback. This is a mobile-first brand, and press is the state people
   actually feel — hover barely exists on a phone. */
.lpc-btn:active { transform: translateY(-1px) scale(0.97); }

/* Hero call to action: one button, and on a phone it spans the column so it
   reads as the obvious next step. */
.lpc-btn--hero { font-size: 1.125rem; padding: 1.1rem 2.5rem; }
@media (max-width: 599px) {
  .lpc-btn--hero { width: 100%; }
}
.lpc-hero__ctanote {
  margin: 0.85rem 0 0;
  font-size: 0.9375rem;
  opacity: 0.75;
}
.lpc-btn--secondary {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.lpc-btn--secondary:hover {
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  border-color: var(--lpc-ink);
}
.lpc-btn--block { width: 100%; }

/* ---- badges ---- */
.lpc-badge {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 10px;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
}
.lpc-badge--beef { background: var(--lpc-beef); color: var(--lpc-cream); }
.lpc-badge--chicken { background: var(--lpc-chicken); color: var(--lpc-ink); }
.lpc-badge--ink { background: var(--lpc-ink); color: var(--lpc-cream); }

/* ---- trust bullets ---- */
.lpc-bullets {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
}
.lpc-bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.lpc-bullets li::before {
  content: "✓";
  font-family: var(--heading-font-stack);
  flex: none;
}

/* ---- star rating ---- */
.lpc-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
}
/* When the star line is a LINK (the PDP's jump to reviews), the 19px text line
   is the whole target. Negative-margin padding grows the touchable box to 44px
   without moving a pixel of layout. */
a.lpc-stars { padding: 12px 0; margin: -12px 0; }
.lpc-stars__icons { letter-spacing: 0.1em; color: var(--lpc-ink); }
[data-color-scheme="scheme6"] .lpc-stars__icons,
[data-color-scheme="scheme2"] .lpc-stars__icons { color: var(--lpc-roo); }

/* ---- image placeholder (until George drops real assets in) ---- */
.lpc-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}
.lpc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lpc-media--square { aspect-ratio: 1; }
.lpc-media--portrait { aspect-ratio: 3/4; }
.lpc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(
    -45deg,
    rgba(18, 18, 18, 0.05),
    rgba(18, 18, 18, 0.05) 14px,
    transparent 14px,
    transparent 28px
  ), rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border: 2px dashed rgba(18, 18, 18, 0.3);
  border-radius: 24px;
}
.lpc-placeholder--square { aspect-ratio: 1; }
.lpc-placeholder--portrait { aspect-ratio: 3/4; }
.lpc-placeholder__label {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  opacity: 0.6;
}

/* ---- ticker / marquee ---- */
.lpc-ticker {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  padding-block: 0.9rem;
}
.lpc-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: lpc-marquee var(--lpc-ticker-speed, 28s) linear infinite;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
}
.lpc-ticker__sep { color: var(--lpc-roo); }
@keyframes lpc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lpc-ticker__track { animation: none; }
}

/* ---- grids ---- */
.lpc-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .lpc-grid--2 { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
  .lpc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lpc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- numbered step cards ---- */
.lpc-step {
  position: relative;
  padding-top: 1rem;
}
.lpc-step__num {
  font-family: var(--heading-font-stack);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--lpc-chicken);
  display: block;
  margin-bottom: 0.75rem;
}
.lpc-step:nth-child(2) .lpc-step__num { color: var(--lpc-beef); }
.lpc-step:nth-child(3) .lpc-step__num { color: var(--lpc-roo); }

/* ---- ingredients label rows (straight off the packaging back) ---- */
.lpc-ing {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.9rem;
}
.lpc-ing + .lpc-ing { border-top: 2px solid rgba(18, 18, 18, 0.08); }

/* openable row (the nutrient mix unpacks in place) */
details.lpc-ing--openable { display: block; padding-block: 0; }
.lpc-ing--openable .lpc-ing__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.9rem;
  cursor: pointer;
  list-style: none;
}
.lpc-ing--openable .lpc-ing__row::-webkit-details-marker { display: none; }
.lpc-ing__hint {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--heading-font-stack);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}
.lpc-ing__chev {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s var(--lpc-e-out);
}
.lpc-ing--openable[open] .lpc-ing__chev { transform: rotate(45deg); }
.lpc-ing--openable[open] .lpc-ing__hint-word { visibility: hidden; }
@media (max-width: 640px) { .lpc-ing__hint-word { display: none; } }
.lpc-ing__detail {
  padding: 0 0 1.1rem calc(64px + 1.25rem);
  font-size: 0.9375rem;
}
@media (max-width: 640px) { .lpc-ing__detail { padding-left: 0; } }
/* mix contents as chips, not bullets */
.lpc-ing__detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lpc-ing__detail li {
  border: 2px solid rgba(18, 18, 18, 0.14);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.35;
}
.lpc-ing__detail li em { opacity: 0.55; font-style: normal; }
.lpc-ing__detail > p:first-child { margin-bottom: 0.7rem; }
.lpc-ing__detail > p:last-child { margin-top: 0.9rem; }
.lpc-ing__detail a { color: inherit; font-weight: bold; }

/* ---- full nutritional information (per recipe) ---- */
.lpc-nip {
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border-radius: 24px;
  overflow: hidden;
}
.lpc-nip__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
  list-style: none;
}
.lpc-nip__summary::-webkit-details-marker { display: none; }
.lpc-nip__title {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}
.lpc-nip__chev {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.2s var(--lpc-e-out);
}
.lpc-nip[open] .lpc-nip__chev { transform: rotate(45deg); }
.lpc-nip__body { padding: 0.25rem 1.5rem 1.6rem; }
@media (min-width: 768px) { .lpc-nip__body { padding-inline: 2.2rem; } }
.lpc-nip__stat { font-size: 1.0625rem; }
.lpc-nip__h {
  font-family: var(--heading-font-stack);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.4rem 0 0.4rem;
}
.lpc-nip__ingredients { font-size: 0.9375rem; line-height: 1.65; max-width: 72ch; }
.lpc-nip__table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.lpc-nip__table th, .lpc-nip__table td { padding: 0.55rem 0.25rem; }
.lpc-nip__table thead th {
  font-family: var(--heading-font-stack);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  text-align: right;
  opacity: 0.65;
}
.lpc-nip__table tbody th { text-align: left; font-weight: 700; }
.lpc-nip__table tbody td {
  text-align: right;
  font-family: var(--heading-font-stack);
  font-size: 1.05rem;
  min-width: 5.2rem;
}
.lpc-nip__table tbody tr { border-top: 2px solid rgba(18, 18, 18, 0.08); }
.lpc-nip__me {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 560px;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px solid rgba(18, 18, 18, 0.16);
}
.lpc-nip__me strong { font-family: var(--heading-font-stack); font-weight: 400; }
.lpc-nip__foot { font-size: 0.8125rem; opacity: 0.65; margin-top: 0.7rem; max-width: 72ch; }
@media (max-width: 640px) {
  .lpc-nip__table { font-size: 0.875rem; }
  .lpc-nip__table tbody td { min-width: 3.4rem; font-size: 0.95rem; }
  .lpc-nip__table th, .lpc-nip__table td { padding-inline: 0.15rem; }
}

/* glossary item icons */
.lpc-nm__icon {
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 18, 0.06);
}
.lpc-nm__icon img { width: 100%; height: 100%; object-fit: cover; }
.lpc-nm__icon--line svg { width: 22px; height: 22px; }

/* ---- cart drawer: value anchoring + upsell + cross-sell (Grüns model) ---- */
.lpc-cd__chip {
  display: inline-block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  margin-top: 0.35rem;
}
.lpc-cd__upsell {
  position: relative;
  border: 3px solid var(--lpc-ink);
  border-radius: 18px;
  padding: 1.4rem 1.1rem 1.1rem;
  margin: 1rem 0;
  background: rgba(243, 213, 78, 0.18);
}
.lpc-cd__upsell-ribbon {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lpc-ink);
  color: var(--lpc-roo);
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
}
/* which cart line a nudge applies to — essential once several boxes share a cart */
.lpc-cd__nudge-which {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0.1rem 0 0.15rem;
}
.lpc-cd__upsell-which {
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin: -0.35rem 0 0.7rem;
}
.lpc-cd__upsell-head {
  font-family: var(--heading-font-stack);
  font-size: 1.15rem;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.6rem;
}
.lpc-cd__upsell-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  font-size: 0.875rem;
}
.lpc-cd__upsell-list li {
  padding: 0.18rem 0 0.18rem 1.3rem;
  position: relative;
}
.lpc-cd__upsell-list li::before {
  content: '✓';
  position: absolute;
  left: 0.15rem;
  color: var(--lpc-chicken);
  font-weight: 700;
}
.lpc-cd__upsell-price {
  text-align: center;
  font-size: 0.9375rem;
  margin-bottom: 0.8rem;
}
.lpc-cd__upsell-price s { opacity: 0.55; }
.lpc-cd__upsell-price strong { font-family: var(--heading-font-stack); font-size: 1.05rem; }
.lpc-cd__xsell { margin: 1.1rem 0 0.4rem; }
.lpc-cd__xsell-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  border: 2px solid rgba(18, 18, 18, 0.14);
  border-radius: 16px;
  padding: 0.8rem;
}
/* On a phone the three-column card crushed its middle column: thumb + text +
   the price pill left the copy wrapping one word per line ("40g of / freeze- /
   dried..."). Two columns, with the button on its own row spanning the card,
   full width, 44px tall — a real target instead of a squeezed oval. */
@media (max-width: 480px) {
  .lpc-cd__xsell-card { grid-template-columns: 56px minmax(0, 1fr); }
  .lpc-cd__xsell-card .lpc-cd__thumb { width: 56px; height: 56px; }
  .lpc-cd__xsell-card .lpc-cd__item-right { grid-column: 1 / -1; }
  .lpc-cd__xsell-card .lpc-btn { width: 100%; min-height: 44px; }
}
.lpc-cd__save-pill {
  display: inline-block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  background: var(--lpc-roo);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ---- entire company (About signature) ---- */
.lpc-company__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.lpc-company__chip {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
  border: 2px solid var(--lpc-ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.lpc-company__chip:last-child {
  background: var(--lpc-roo);
}

/* ---- label duel (Why Fresh signature) ----
   The typography IS the argument: the typical label set in cramped,
   institutional monospace; ours in the brand voice with air to breathe. */
.lpc-duel {
  display: grid;
  gap: 1rem;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 820px) { .lpc-duel { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.lpc-duel__card {
  border-radius: 24px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .lpc-duel__card { padding: 2rem; } }
.lpc-duel__card--theirs {
  background: rgba(18, 18, 18, 0.07);
  color: rgb(var(--color-scheme-text));
}
.lpc-duel__card--ours {
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border: 3px solid var(--lpc-ink);
}
.lpc-duel__tag {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  opacity: 0.6;
  margin-bottom: 0.9rem;
}
.lpc-duel__tag--ours { opacity: 1; }
.lpc-duel__label {
  font-size: 1rem;
  line-height: 1.7;
}
.lpc-duel__label--theirs {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  opacity: 0.75;
}
.lpc-duel__note {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.875rem;
  opacity: 0.65;
}
.lpc-duel__card--ours .lpc-duel__note { opacity: 0.8; }

/* ---- nutrient mix glossary ---- */
.lpc-nm {
  max-width: 780px;
  margin-inline: auto;
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border-radius: 24px;
  padding: 1.4rem 1.5rem 1.6rem;
}
@media (min-width: 768px) { .lpc-nm { padding: 2.2rem 2.5rem 2.4rem; border-radius: 32px; } }
.lpc-nm__group {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  opacity: 0.6;
  margin: 1.6rem 0 0.2rem;
}
.lpc-nm__group:first-child { margin-top: 0; }
.lpc-nm__item + .lpc-nm__item { border-top: 2px solid rgba(18, 18, 18, 0.08); }
.lpc-nm__summary {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.8rem;
  cursor: pointer;
  list-style: none;
}
.lpc-nm__summary::-webkit-details-marker { display: none; }
.lpc-nm__name { font-family: var(--heading-font-stack); font-size: 1.125rem; flex: none; }
.lpc-nm__role { font-size: 0.9375rem; opacity: 0.7; min-width: 0; }
.lpc-nm__chev {
  margin-left: auto;
  flex: none;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s var(--lpc-e-out);
}
.lpc-nm__item[open] .lpc-nm__chev { transform: rotate(45deg); }
.lpc-nm__body { padding: 0 0 1rem; max-width: 56ch; }
.lpc-nm__label {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.6;
  font-style: italic;
}
.lpc-nm__foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid rgba(18, 18, 18, 0.08);
  font-size: 0.875rem;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  .lpc-ing__chev, .lpc-nm__chev { transition: none; }
}
/* Ingredient thumbnails. The grey disc and circular crop are gone now that every
   row carries a real cutout: the photos are transparent PNGs on a padded square
   canvas, so a 50% radius was slicing the corners off the meat and `cover` was
   zooming past the padding into it. `contain` lets each cutout sit at its own
   scale against the panel, which is what a cutout is for. */
.lpc-ing__thumb {
  flex: none;
  width: 64px;
  height: 64px;
}
.lpc-ing__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lpc-ing__pct {
  font-family: var(--heading-font-stack);
  font-size: 1.5rem;
  flex: none;
  min-width: 4.2rem;
}

/* Per-recipe claim badges, the flat equivalent of the pouch-back circles. Ink on
   cream so they read as stamps rather than buttons — nothing here is clickable. */
.lpc-recipe-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
}
.lpc-recipe-badges li {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6875rem;
  line-height: 1.2;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: var(--lpc-ink);
  color: var(--lpc-cream);
}

/* Pouch spec under each recipe heading: fill weight + kcal a pouch, with the
   per-100g density beneath it. Sits above the ingredient rows because "how much
   is a pouch" is the question a reader brings to a recipe page, and it was
   previously answerable nowhere on the site. Display face for the figures so it
   reads as a spec, not body copy. */
.lpc-ing__energy {
  margin: 0.35rem 0 0;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid rgba(18, 18, 18, 0.08);
}
.lpc-ing__energy-main {
  display: block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
}
.lpc-ing__energy-sub {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.6;
  margin-top: 0.1rem;
}
.lpc-ing__name {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.125rem;
}

/* ---- comparison table ---- */
.lpc-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
}
.lpc-compare th {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
  padding: 0.85rem 0.75rem;
  text-align: center;
}
.lpc-compare td,
.lpc-compare tbody th {
  padding: 0.85rem 0.75rem;
  text-align: center;
  border-top: 2px solid rgba(18, 18, 18, 0.08);
}
.lpc-compare td:first-child,
.lpc-compare th:first-child,
.lpc-compare tbody th { text-align: left; }
.lpc-compare .lpc-compare__louis {
  background: var(--lpc-roo);
}
.lpc-compare th.lpc-compare__louis {
  border-radius: 16px 16px 0 0;
}
.lpc-compare tr:last-child td.lpc-compare__louis {
  border-radius: 0 0 16px 16px;
}
.lpc-compare__yes { font-family: var(--heading-font-stack); }
.lpc-compare__no { opacity: 0.45; }
.lpc-compare__hint { display: none; }
/* The mobile swipe-table block that used to live here is GONE. It pinned the
   first two columns sticky and set min-width: 440px, which on a 375px screen
   forced the card layout to overflow and locked every card heading into a
   104px column — and its `.lpc-compare th:first-child` outranked the card
   rules on specificity, so they lost silently. Below 640px the table is now a
   card stack; see the .lpc-compare block near the end of this file. */
@media (max-width: 640px) {
  /* The panel slab goes on a phone. As cards, each row carries its own cream
     fill; keeping the panel's cream behind them painted the identical colour
     through the gaps and past the rounded corners, so the cards read as one
     smeared block — George's "the background leaks over the space in between".
     The slab is only dropped when the table has become cards. */
  .lpc-panel:has(.lpc-compare) { background: transparent; padding: 0; }
}

/* ---- review cards ---- */
.lpc-review {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
}
.lpc-review__quote {
  font-family: var(--main-font-stack);
  font-size: 1.0625rem;
  line-height: 1.55;
  flex: 1;
}
.lpc-review__source {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
}

/* ---- FAQ accordion ---- */
.lpc-faq-item {
  border-top: 2px solid rgba(18, 18, 18, 0.1);
}
.lpc-faq-item:last-child { border-bottom: 2px solid rgba(18, 18, 18, 0.1); }
.lpc-faq-item summary {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.0625rem;
  padding: 1.15rem 2.5rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.lpc-faq-item summary::-webkit-details-marker { display: none; }
.lpc-faq-item summary::after {
  content: "+";
  font-family: var(--heading-font-stack);
  font-size: 1.5rem;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.18s var(--lpc-e-out);
}
.lpc-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lpc-faq-item .lpc-faq-item__answer {
  font-family: var(--main-font-stack);
  line-height: 1.6;
  padding: 0 0 1.25rem;
  max-width: 44rem;
}

/* ---- the peeking cat ---- */
.lpc-peek {
  position: absolute;
  bottom: 0;
  width: clamp(110px, 18vw, 200px);
  line-height: 0;
  pointer-events: none;
}
.lpc-peek--left { left: 6%; }
.lpc-peek--right { right: 6%; }

/* ---- hero ---- */
.lpc-hero__layout {
  display: grid;
  gap: 2rem;
}
/* Mobile leads with the product shot — you see the food before you read about
   it, which is how every strong mobile food page opens. Desktop keeps copy-left,
   image-right, so this only reorders the narrow layout. */
.lpc-hero__media { order: -1; }
@media (min-width: 900px) {
  .lpc-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3.5rem;
  }
  .lpc-hero__media { order: 0; }
}
.lpc-hero__media { position: relative; }

/* ---- utility ---- */
.lpc-center { text-align: center; }
.lpc-mt-1 { margin-top: 0.75rem; }
.lpc-mt-2 { margin-top: 1.5rem; }
.lpc-mt-3 { margin-top: 2.25rem; }   /* stays clearly below .lpc-py */
.lpc-stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   PDP — calculator, box builder, purchase cards, sticky ATC
   ========================================================================== */

.lpc-pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* mobile: single column, constrained to viewport */
  gap: 2rem;
}
/* grid items default to min-width:auto → wide children (thumbs, cards, tables) blow the
   track out past the viewport on mobile. Force them to shrink to the column. */
.lpc-pdp__layout > * { min-width: 0; }
/* The sticky gallery needs no overflow:hidden ancestor. The buy-box section and
   the theme's <main class="overflow-hidden"> both clip it — lift only on PDP pages. */
#lpc-pdp.lpc-section { overflow: visible; }
main.overflow-hidden:has(#lpc-pdp) { overflow: visible; }
@media (min-width: 900px) {
  .lpc-pdp__layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: start;
  }
  /* George's call: the thumbs move OUT of the left rail and underneath, into
     the white space. The rail cost 78px off the width of the hero image and
     put the thumbs in a 520px-tall nested scroll region with no visible
     scrollbar, so images 7 and 8 were effectively undiscoverable. Underneath,
     an auto-fit grid shows every thumb at once and needs no scrolling at all. */
  .lpc-pdp__gallery {
    position: sticky;
    top: 100px;
    align-self: start;
    display: block;
  }
  .lpc-pdp__gallery .lpc-pdp__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
    overflow: visible;        /* nothing to scroll now, so nothing can hide */
  }
  .lpc-pdp__gallery .lpc-pdp__thumb { width: 100%; height: auto; aspect-ratio: 1; }
}

/* gallery — a swipeable scroll-snap track, which is how a phone expects a
   product gallery to behave. Thumbs below are indicators into the same track. */
.lpc-pdp__media-main {
  border-radius: 24px;
  aspect-ratio: 1;
  background: rgb(var(--color-scheme-card));
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lpc-pdp__media-main::-webkit-scrollbar { display: none; }
.lpc-pdp__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: 100%;
}
.lpc-pdp__media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobile: thumbs swipe in a row under the main image, no visible scrollbar. */
.lpc-pdp__thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.lpc-pdp__thumbs::-webkit-scrollbar { display: none; }
.lpc-pdp__thumb { scroll-snap-align: start; }
.lpc-pdp__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: rgb(var(--color-scheme-card));
}
.lpc-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpc-pdp__thumb[aria-current="true"] { border-color: var(--lpc-ink); }

/* calculator */
.lpc-calc {
  border: 2px solid rgba(18,18,18,0.12);
  border-radius: 18px;
  overflow: hidden;
}
.lpc-calc summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  background: rgb(var(--color-scheme-card));
}
.lpc-calc summary::-webkit-details-marker { display: none; }
.lpc-calc summary::after { content: "+"; font-size: 1.25rem; }
.lpc-calc[open] summary::after { content: "–"; }
.lpc-calc__body { padding: 1.1rem; display: grid; gap: 0.9rem; }
.lpc-calc__row { display: grid; gap: 0.35rem; }
.lpc-calc__row label {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.lpc-calc__row output { font-family: var(--heading-font-stack); font-size: 1rem; }
.lpc-calc input[type="range"] { width: 100%; accent-color: var(--lpc-chicken); }
.lpc-calc__pills, .lpc-pdp__sizes, .lpc-pdp__modes, .lpc-pdp__freq {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- half feeding ----
   A single quiet row beside the price. Not a mode to configure up front: it's
   the answer to "that's more than I want to spend", so it stays small and
   price-led until someone needs it. */
/* [hidden] is a UA display:none, and any `display` declaration on the element
   beats it. This block sets display:flex, so the mixed-feeding switch stayed on
   screen and clickable at the cycles where the code deliberately hides it.
   Attribute selector so it outranks the class rule regardless of order. */
.lpc-halve[hidden] { display: none !important; }
.lpc-halve {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  /* No fill — a tinted panel here competed with the purchase cards above it. */
  border: 1px solid var(--lpc-line, rgba(18,18,18,0.14));
}
.lpc-halve__on { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.lpc-halve__title {
  font-size: 0.875rem;
  line-height: 1.25;
  opacity: 0.85;
}
/* The daily rate and the weekly money, side by side — the pair that makes
   "delivered less often" concrete. */
.lpc-halve__rate { font-size: 0.8125rem; opacity: 0.62; line-height: 1.35; }
.lpc-halve__cta,
.lpc-halve__undo {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-left: auto;
  /* 44px regardless of pointer type: a `pointer: coarse` query can't be trusted
     to have caught every touch device, and a 44px button is fine with a mouse. */
  min-height: 44px;
  flex: none;
  transition: background var(--lpc-m-quick) var(--lpc-e-out),
              color var(--lpc-m-quick) var(--lpc-e-out),
              transform var(--lpc-m-tap) var(--lpc-e-out);
}
.lpc-halve__cta {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  opacity: 0.75;
}
.lpc-halve__cta:hover { opacity: 1; background: var(--lpc-ink); color: var(--lpc-cream); }
.lpc-halve__undo {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  opacity: 0.7;
}
.lpc-halve__undo:hover { opacity: 1; }
.lpc-halve__cta:active, .lpc-halve__undo:active { transform: scale(0.97); }

/* ---- frequency: a plain scale, like the cat count ----
   Four across on one row at every width, so it reads as a single scale rather
   than a wrapped list of options. */
.lpc-pdp__freq {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}
.lpc-pill--freq {
  text-align: center;
  padding: 0.6rem 0.3rem;
  white-space: nowrap;
}
.lpc-pill {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9375rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(18,18,18,0.25);
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background 0.15s var(--lpc-e-out), border-color 0.15s var(--lpc-e-out),
              transform var(--lpc-m-tap) var(--lpc-e-out);
}
.lpc-pill:hover { border-color: var(--lpc-ink); }
.lpc-pill:active { transform: scale(0.96); }
.lpc-pill[aria-pressed="true"] {
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  border-color: var(--lpc-ink);
}
.lpc-pill__tag {
  position: absolute;
  top: -0.7rem;
  right: -0.4rem;
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}
.lpc-calc__result {
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  font-family: var(--main-font-stack);
  display: none;
}
.lpc-calc__result.is-visible { display: block; }
.lpc-calc__result strong { font-family: var(--heading-font-stack); text-transform: uppercase; letter-spacing: 0.03em; }

/* builder */
.lpc-pdp__label {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  opacity: 0.8;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.4rem 0 0.55rem;
}
.lpc-stepper-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0;
}
.lpc-stepper-row + .lpc-stepper-row { border-top: 2px solid rgba(18,18,18,0.08); }
.lpc-stepper-row__swatch {
  flex: none;
  width: 14px;
  height: 38px;
  border-radius: 7px;
}
.lpc-stepper-row__name {
  flex: 1;
  min-width: 0;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
}
/* The reason to pick this recipe. Body face, sentence case and quiet, so the
   row still reads name-then-stepper at a glance and the line is there for
   whoever is actually deciding. `min-width: 0` above matters: the name is the
   flex child that has to give, and without it a long note pushes the stepper
   off the row — the same crush that made "Louis nutrient mix" wrap to three
   lines on the recipes page. */
.lpc-stepper-row__note {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--main-font-stack);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.7;
}
@media (max-width: 767px) {
  .lpc-stepper-row__note { font-size: 0.6875rem; }
}
.lpc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.lpc-stepper button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--lpc-ink);
  background: transparent;
  color: inherit;
  font-family: var(--heading-font-stack);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--lpc-e-out), color 0.15s var(--lpc-e-out);
}
.lpc-stepper button:hover:not(:disabled) { background: var(--lpc-ink); color: var(--lpc-cream); }
/* The other sanctioned spring: the stepper is the most-tapped control on the
   site, so its press gets a little life. */
.lpc-stepper button:active:not(:disabled) { transform: scale(0.88); transition: transform var(--lpc-m-tap) var(--lpc-e-spring); }
.lpc-stepper button:disabled { opacity: 0.25; cursor: not-allowed; }
.lpc-stepper output {
  min-width: 2.4rem;
  text-align: center;
  font-family: var(--heading-font-stack);
  font-size: 1.15rem;
}
.lpc-meter { margin-top: 0.85rem; }
.lpc-meter__bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(18,18,18,0.1);
  overflow: hidden;
}
.lpc-meter__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  /* Ochre-to-ink sweep, per the design direction. Sized to the bar so the
     gradient reads as one continuous run rather than repeating per width. */
  background: linear-gradient(90deg, var(--lpc-chicken), var(--lpc-ink));
  background-size: 100vw 100%;
  transition: width 400ms var(--lpc-e-out), background 400ms var(--lpc-e-out);
}
.lpc-meter__fill.is-full { background: var(--lpc-ink); }
.lpc-meter__text {
  font-family: var(--heading-font-stack);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* purchase cards (3 radio cards) */
.lpc-badge[hidden], .lpc-purchase__ribbon-save[hidden], .lpc-purchase__compare[hidden] { display: none !important; }
.lpc-purchase { display: grid; gap: 0.85rem; margin-top: 0.5rem; }
.lpc-purchase__card {
  position: relative;
  border: 2px solid rgba(18,18,18,0.16);
  border-radius: 18px;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  text-align: left;
  background: rgb(var(--color-scheme-card));
  transition: border-color 0.15s var(--lpc-e-out), box-shadow 0.15s var(--lpc-e-out), background 0.15s var(--lpc-e-out);
}
/* clear SELECTED state: ink ring + subtle tint */
.lpc-purchase__card[aria-pressed="true"] {
  border-color: var(--lpc-ink);
  box-shadow: inset 0 0 0 1px var(--lpc-ink);
  background: color-mix(in srgb, var(--lpc-roo) 12%, rgb(var(--color-scheme-card)));
}
.lpc-purchase__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.lpc-purchase__radio {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(18,18,18,0.35);
  position: relative;
  transition: border-color var(--lpc-m-quick) var(--lpc-e-out);
}
.lpc-purchase__card[aria-pressed="true"] .lpc-purchase__radio {
  border-color: var(--lpc-ink);
}
/* The dot is always present so it can scale in. One of only two places in the
   system allowed the spring curve — a little overshoot here confirms the tap. */
.lpc-purchase__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lpc-ink);
  transform: scale(0);
  transition: transform var(--lpc-m-base) var(--lpc-e-spring);
}
.lpc-purchase__card[aria-pressed="true"] .lpc-purchase__radio::after {
  transform: scale(1);
}
.lpc-purchase__title { min-width: 0; }
.lpc-purchase__name {
  display: block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.0625rem;
  line-height: 1.1;
}
.lpc-purchase__meta {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}
.lpc-purchase__price {
  text-align: right;
  font-family: var(--heading-font-stack);
  white-space: nowrap;
}
.lpc-purchase__amount { font-size: 1.3rem; }
/* two units stacked under the price: cost to feed per day (lead) + unit price per
   pouch (quiet). Stacks rather than wrapping, so it holds on a 375px card. */
.lpc-purchase__perday {
  display: block;
  font-family: var(--main-font-stack);
  margin-top: 0.1rem;
  line-height: 1.25;
}
.lpc-purchase__perday-main {
  display: block;
  font-size: 0.75rem;
  color: var(--lpc-beef);
}
.lpc-purchase__perpouch {
  display: block;
  font-size: 0.6875rem;
  opacity: 0.55;
}
.lpc-purchase__compare {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.95rem;
  margin-right: 0.4rem;
}
/* The saving, now a tail on the ribbon instead of a full-width yellow bar.
   Measured against both references before changing anything: Louis's total
   (21.6px) and its per-day at 0.63x the total already matched Maev almost
   exactly (22px, 0.64x), so the numbers were never the problem. The 285x30px
   roo-yellow "You save $19.89 (10%)" banner was — neither brand has anything
   like it, and it made the card talk about money three times over. */
.lpc-purchase__ribbon-save { opacity: 0.75; }
.lpc-purchase__sub {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  opacity: 0.85;
}
.lpc-purchase__list { padding-left: 2.6rem; }

/* ---- trial: subscribe or just once ----
   Sits under the trial card rather than inside it, because the card is a <button>
   and nested buttons are invalid HTML. Deliberately quieter than the three main
   purchase cards: this is a choice WITHIN an option, not a fourth option. */
.lpc-trialmode {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0.6rem;
  border: 2px solid rgba(18, 18, 18, 0.12);
  border-radius: 14px;
}
.lpc-trialmode[hidden] { display: none; }
.lpc-trialmode__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background var(--lpc-m-quick) var(--lpc-e-out);
}
.lpc-trialmode__opt[aria-pressed="true"] { background: rgba(223, 193, 54, 0.22); }
.lpc-trialmode__radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(18, 18, 18, 0.35);
  border-radius: 50%;
  position: relative;
}
.lpc-trialmode__opt[aria-pressed="true"] .lpc-trialmode__radio { border-color: var(--lpc-ink); }
.lpc-trialmode__radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--lpc-ink);
  transform: scale(0);
  transition: transform var(--lpc-m-base) var(--lpc-e-spring);
}
.lpc-trialmode__opt[aria-pressed="true"] .lpc-trialmode__radio::after { transform: scale(1); }
.lpc-trialmode__text { flex: 1 1 auto; min-width: 0; }
.lpc-trialmode__label {
  display: block;
  font-family: var(--main-font-stack);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
}
.lpc-trialmode__note {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.65;
  margin-top: 0.1rem;
}
.lpc-trialmode__price {
  font-family: var(--heading-font-stack);
  font-size: 1.0625rem;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .lpc-trialmode__label { font-size: 0.8125rem; }
  .lpc-trialmode__price { font-size: 0.9375rem; }
}
/* Grüns' pattern: the ✓/✗ list renders only on the SELECTED plan, so the two
   options a reader isn't considering stay one quiet line each. Their card
   heights tell the story — 201px selected, 141px and 69px unselected. It also
   means the one-time card's drawbacks appear at the moment they're relevant
   (you just picked it) rather than as permanent argument.
   display:none rather than visibility/height so the card genuinely collapses;
   the list is not interactive, so nothing focusable is being hidden. */
.lpc-purchase__card[aria-pressed="false"] .lpc-purchase__list { display: none; }

/* ---- treat style ----
   Two picture options rather than a dropdown: crumble vs chunks is a difference
   you understand by looking, not by reading. Sits with the treats add-on because
   that is where treats are already being discussed. */
.lpc-treats { margin-top: 0.9rem; }
.lpc-treats__label {
  display: block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.lpc-treats__opts { display: flex; gap: 0.5rem; }
.lpc-treats__opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border: 2px solid rgba(18, 18, 18, 0.14);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--lpc-m-quick) var(--lpc-e-out),
              background var(--lpc-m-quick) var(--lpc-e-out);
}
.lpc-treats__opt[aria-pressed="true"] {
  border-color: var(--lpc-ink);
  background: rgba(223, 193, 54, 0.18);
}
.lpc-treats__img { flex: 0 0 34px; width: 34px; height: 34px; }
.lpc-treats__img img { width: 100%; height: 100%; object-fit: contain; }
.lpc-treats__name {
  font-family: var(--main-font-stack);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
}
.lpc-treats__note {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.6;
  margin-top: 0.45rem;
}
@media (max-width: 767px) {
  .lpc-treats__name { font-size: 0.8125rem; }
}

/* cat's name field — styled to sit with the pill groups, not like a form */
.lpc-pdp__optional {
  font-family: var(--main-font-stack);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  opacity: 0.55;
}
.lpc-catname {
  width: 100%;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
  padding: 0.65rem 0.9rem;
  border: 2px solid rgba(18, 18, 18, 0.18);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transition: border-color var(--lpc-m-quick) var(--lpc-e-out);
}
.lpc-catname:focus {
  outline: none;
  border-color: var(--lpc-ink);
}
.lpc-catname::placeholder { opacity: 0.45; }

/* trial note (shown when trial selected, builder hidden) */
.lpc-pdp__trial-note {
  background: rgb(var(--color-scheme-card));
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin-top: 1rem;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
}

/* sticky ATC */
.lpc-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform var(--lpc-m-base) var(--lpc-e-out);
}
.lpc-sticky-atc.is-visible { transform: translateY(0); }
.lpc-sticky-atc__info { font-family: var(--heading-font-stack); text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.03em; }
.lpc-sticky-atc__info span { display: block; font-size: 1.05rem; }
.lpc-sticky-atc .lpc-btn { background: var(--lpc-roo); color: var(--lpc-ink); border-color: var(--lpc-roo); padding: 0.75rem 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .lpc-sticky-atc, .lpc-meter__fill { transition: none; }
}

/* ==========================================================================
   Grüns-pattern sections: stat bar, press, value props, quality, timeline
   ========================================================================== */

/* ---- big-number stat bar ---- */
.lpc-statbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .lpc-statbar__grid { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); gap: 1rem; }
}
.lpc-statbar__num {
  font-family: var(--heading-font-stack);
  font-size: clamp(1.85rem, 6vw, 3.6rem);   /* flat below 555px */
  line-height: 1;
}
.lpc-statbar__label {
  font-family: var(--main-font-stack);
  font-size: 0.95rem;
  line-height: 1.3;
  margin-top: 0.5rem;
  opacity: 0.9;
}

/* ---- press / "as loved by" strip ---- */
.lpc-press { text-align: center; }
.lpc-press__label {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  opacity: 0.7;
}
.lpc-press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.75rem;
  margin-top: 1.1rem;
}
.lpc-press__item {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 3vw, 1.6rem);      /* flat below 600px */
  opacity: 0.72;
}
.lpc-press__item img { max-height: 36px; width: auto; display: block; }

/* ---- value-prop cards ---- */
.lpc-vprop { text-align: center; }
.lpc-vprop .lpc-media,
.lpc-vprop .lpc-placeholder { margin-bottom: 1.1rem; }
.lpc-vprop .lpc-body { margin-inline: auto; }

/* ---- quality / testing icon cards ---- */
.lpc-quality__card {
  text-align: center;
  padding: 1.5rem 1rem;
}
.lpc-quality__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.85rem;
  display: block;
}
.lpc-quality__icon svg { width: 100%; height: 100%; display: block; }
.lpc-quality__title {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
}
.lpc-quality__text {
  font-family: var(--main-font-stack);
  font-size: 0.9rem;
  margin-top: 0.35rem;
  opacity: 0.9;
}

/* ---- "what to expect" timeline ---- */
.lpc-timeline__track { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .lpc-timeline__track {
    grid-template-columns: repeat(var(--tl-cols, 3), 1fr);
    gap: 1.5rem;
  }
}
.lpc-timeline__step {
  position: relative;
  padding-top: 2.6rem;
}
@media (min-width: 768px) {
  .lpc-timeline__step::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(18, 18, 18, 0.15);
  }
  .lpc-timeline__step:first-child::before { left: 50%; }
  .lpc-timeline__step:last-child::before { right: 50%; }
}
.lpc-timeline__dot {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--lpc-chicken);
  border: 3px solid rgb(var(--color-scheme-background));
}
@media (min-width: 768px) {
  .lpc-timeline__dot { left: 50%; transform: translateX(-50%); }
}
.lpc-timeline__step:nth-child(2) .lpc-timeline__dot { background: var(--lpc-beef); }
.lpc-timeline__step:nth-child(3) .lpc-timeline__dot { background: var(--lpc-roo); }
.lpc-timeline__step:nth-child(4) .lpc-timeline__dot { background: var(--lpc-ink); }
.lpc-timeline__when {
  display: inline-block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  border-radius: 8px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.6rem;
}
.lpc-timeline__title {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.15rem;
}
.lpc-timeline__text {
  font-family: var(--main-font-stack);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.35rem;
}

/* ---- hero trust-stat line ---- */
.lpc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8125rem;
}
.lpc-hero__trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lpc-hero__trust b { font-size: 1.05rem; }

/* ---- PDP Grüns cards: ✓/✗ lists, trust triplet, reassurance ---- */
.lpc-purchase__card--sub { border-color: rgba(18,18,18,0.35); }
.lpc-purchase__list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--main-font-stack);
  font-size: 0.875rem;
  text-align: left;
}
.lpc-purchase__list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  line-height: 1.35;
}
.lpc-purchase__list li::before {
  font-family: var(--heading-font-stack);
  flex: none;
  font-size: 0.85rem;
}
.lpc-purchase__list--yes li::before { content: "✓"; color: var(--lpc-chicken); }
.lpc-purchase__list--no li { opacity: 0.7; }
.lpc-purchase__list--no li::before { content: "✕"; color: var(--lpc-beef); }

.lpc-pdp__reassure {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  text-align: center;
  margin-top: 0.6rem;
  opacity: 0.75;
}

.lpc-trust-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.1rem;
  text-align: center;
}
.lpc-trust-triplet > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.6875rem;
  line-height: 1.2;
}
.lpc-trust-triplet__icon { width: 28px; height: 28px; }
.lpc-trust-triplet__icon svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   PDP Grüns additions: key benefits, cats, most-popular ribbon, free gifts,
   in-buybox accordions, packed-with, large stat card
   ========================================================================== */

/* key benefits under title */
.lpc-keybenefits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-family: var(--main-font-stack);
  font-size: 1rem;
}
.lpc-keybenefits li { display: flex; align-items: baseline; gap: 0.6rem; }
.lpc-keybenefits li::before {
  content: "✓";
  font-family: var(--heading-font-stack);
  color: var(--lpc-chicken);
  flex: none;
}

/* how many cats */
.lpc-pdp__cats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lpc-pdp__cats .lpc-pill { min-width: 3.2rem; }
.lpc-pdp__cats-note {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* most-popular ribbon */
.lpc-purchase__card--sub { padding-top: 2.4rem; }
.lpc-purchase__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--lpc-ink);
  color: var(--lpc-roo);
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 16px 16px 0 0;
}

/* ---- what's included ----------------------------------------------------
   Replaces the old free-gifts panel, which was a dark inset inside the
   subscribe card: three image cards with FREE tags on a near-black ground.
   It was the loudest thing in the buy box and it argued discount at the moment
   the page has to argue worth.

   This is the quiet version, and it earns "premium" by restraint: no fill, no
   shadow, one hairline rule between rows, the roo yellow used only as a 2px
   left edge. Rows not cards, so each item gets a real sentence. */
.lpc-included {
  margin-top: 1.75rem;
  border-top: 2px solid rgba(18, 18, 18, 0.1);
  padding-top: 1.1rem;
}
.lpc-included__head {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  opacity: 0.6;
  margin: 0 0 0.85rem;
}
.lpc-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--lpc-roo);
}
.lpc-included__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0 0.7rem 1rem;
}
.lpc-included__item + .lpc-included__item {
  border-top: 2px solid rgba(18, 18, 18, 0.08);
}
/* Sized for a real product photo (the treats jar) to read, not just an icon.
   Icons stay smaller inside the same box so rows align whichever is used. */
.lpc-included__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lpc-ink);
}
.lpc-included__icon svg { width: 26px; height: 26px; opacity: 0.75; }
.lpc-included__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.lpc-included__text { min-width: 0; }
.lpc-included__name {
  display: block;
  font-family: var(--main-font-stack);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
}
.lpc-included__note {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.65;
  margin-top: 0.1rem;
}
.lpc-included__foot {
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  opacity: 0.55;
  margin: 0.85rem 0 0;
  padding-left: 1rem;
}

/* in-buybox accordions + packed with */
.lpc-pdp__accordions { margin-top: 1.75rem; }
.lpc-packed { margin-top: 1.75rem; }
.lpc-packed__head {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}
.lpc-packed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 500px) {
  .lpc-packed__list { grid-template-columns: 1fr 1fr; }
}
.lpc-packed__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
}
.lpc-packed__icon {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.06);
}
.lpc-packed__icon svg { width: 100%; height: 100%; }

/* large stat card */
.lpc-statcard {
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  gap: 0;
}
@media (min-width: 900px) {
  .lpc-statcard { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
}
.lpc-statcard__body { padding: 2rem; }
@media (min-width: 768px) { .lpc-statcard__body { padding: 3rem; } }
.lpc-statcard__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  margin-top: 1.5rem;
}
.lpc-statcard__num {
  font-family: var(--heading-font-stack);
  font-size: clamp(1.95rem, 6vw, 3.75rem);  /* flat below 585px */
  line-height: 1;
  color: var(--lpc-beef);
}
.lpc-statcard__label {
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 15rem;
  margin-top: 0.5rem;
}
.lpc-statcard__foot {
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 1.25rem;
}
.lpc-statcard__media { min-height: 260px; }
.lpc-statcard__media .lpc-media,
.lpc-statcard__media .lpc-placeholder { height: 100%; border-radius: 0; aspect-ratio: auto; }

/* ==========================================================================
   Cart drawer (Grüns model) — lpc-cart-drawer.liquid
   ========================================================================== */
.lpc-cd__overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--lpc-e-out);
}
.lpc-cd {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  z-index: 91;
  background: var(--lpc-paper, #fffaf2);
  color: var(--lpc-ink);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform var(--lpc-m-base) var(--lpc-e-out);
  box-shadow: -12px 0 40px rgba(18, 18, 18, 0.18);
}
.lpc-cd.is-open { transform: translateX(0); }
.lpc-cd__overlay.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .lpc-cd, .lpc-cd__overlay { transition: none; }
}

.lpc-cd__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 2px solid rgba(18, 18, 18, 0.08);
}
.lpc-cd__title {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.25rem;
  margin: 0;
}
.lpc-cd__peek {
  position: absolute;
  top: -1px;
  right: 64px;
  width: 54px;
  line-height: 0;
  transform: translateY(-38%);
  pointer-events: none;
}
.lpc-cd__close {
  background: none;
  border: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
}
.lpc-cd__close:hover { background: rgba(18, 18, 18, 0.07); }

/* shipping progress */
.lpc-cd__ship {
  padding: 0.9rem 1.25rem;
  background: rgb(253, 240, 221);
  border-bottom: 2px solid rgba(18, 18, 18, 0.06);
}
.lpc-cd__ship-msg {
  font-family: var(--main-font-stack);
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
}
.lpc-cd__ship-msg strong { font-family: var(--heading-font-stack); text-transform: uppercase; letter-spacing: 0.03em; }
.lpc-cd__ship-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.1);
  overflow: hidden;
}
.lpc-cd__ship-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--lpc-chicken);
  transition: width 0.3s var(--lpc-e-out);
}
.lpc-cd__ship-fill.is-unlocked { background: var(--lpc-ink); }

/* promo strip */
.lpc-cd__promo {
  background: var(--lpc-ink);
  color: var(--lpc-roo);
  text-align: center;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  padding: 0.45rem 1rem;
}

/* body */
.lpc-cd__body { flex: 1; overflow-y: auto; padding: 0 1.25rem 1.25rem; }
.lpc-cd__group {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.25rem;
}
.lpc-cd__group::after { content: ""; flex: 1; height: 2px; background: rgba(18, 18, 18, 0.08); }

.lpc-cd__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 2px solid rgba(18, 18, 18, 0.06);
}
.lpc-cd__thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lpc-cream);
}
.lpc-cd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpc-cd__item-name {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.lpc-cd__item-mix, .lpc-cd__item-meta {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.8;
  margin-top: 0.2rem;
}
.lpc-cd__tag {
  display: inline-block;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.625rem;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  margin-top: 0.35rem;
}
.lpc-cd__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.5rem;
  border: 2px solid rgba(18, 18, 18, 0.18);
  border-radius: 999px;
}
.lpc-cd__qty button {
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--heading-font-stack);
  font-size: 1rem;
  color: inherit;
}
.lpc-cd__qty output {
  min-width: 1.6rem;
  text-align: center;
  font-family: var(--heading-font-stack);
  font-size: 0.9375rem;
}
.lpc-cd__item-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.lpc-cd__price { font-family: var(--heading-font-stack); font-size: 1rem; white-space: nowrap; }
.lpc-cd__compare { text-decoration: line-through; opacity: 0.5; font-size: 0.8125rem; margin-right: 0.3rem; }
/* The included jar. Reads as a word, not a price, so the eye doesn't stop on it
   the way it stops on a number — it's the one line in the cart that isn't part
   of the total. */
.lpc-cd__free { font-family: var(--main-font-stack); font-size: 0.8125rem; letter-spacing: 0.03em; opacity: 0.75; }

/* ---- /pages/cat-name ----
   One field and nothing else, as briefed. Narrow measure so it reads as a single
   question rather than a form: at full width a lone input looks like the first
   of several that failed to load. */
.lpc-catpage { max-width: 30rem; }
.lpc-catpage__head { margin-bottom: 0.75rem; }
.lpc-catpage__intro { margin-bottom: 1.5rem; opacity: 0.85; }
.lpc-catpage__label {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.lpc-catpage__input { width: 100%; margin-bottom: 1rem; }
.lpc-catpage__save { display: inline-block; }
.lpc-catpage__msg { margin-top: 1rem; font-size: 0.9375rem; }
/* Confirmation takes the roo edge, the same quiet marker the inclusions strip
   uses. A failure has to look different from a success or the page is lying by
   styling. */
.lpc-catpage__msg.is-ok { padding-left: 0.6rem; border-left: 2px solid var(--lpc-roo, #dfc136); }
.lpc-catpage__msg.is-warn { padding-left: 0.6rem; border-left: 2px solid var(--lpc-beef, #c83b23); }
.lpc-cd__remove {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.5;
  color: inherit;
  padding: 0.15rem;
}
.lpc-cd__remove:hover { opacity: 1; }

/* gift rows */
/* Free-gift chips. These used to render as three full cart-item rows — 64px thumb,
   name, "Included in every box", a struck value and a FREE tag each — which meant
   the things the customer is actually BUYING were pushed below the fold by the
   things they're getting anyway. Now one row of three, about a quarter the height. */
.lpc-cd__gifts {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
}
.lpc-cd__giftchip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 0.6rem 0.35rem;
  border-radius: 10px;
  background: rgba(18, 18, 18, 0.04);
}
.lpc-cd__giftchip-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lpc-ink);
  opacity: 0.75;
}
.lpc-cd__giftchip-icon svg { width: 100%; height: 100%; }
.lpc-cd__giftchip-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.lpc-cd__giftchip-label {
  font-family: var(--main-font-stack);
  font-size: 0.6875rem;
  line-height: 1.25;
  /* two lines then ellipsis, so one long label can't make the row tall again */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* nudges */
.lpc-cd__nudge {
  background: var(--lpc-cream);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.lpc-cd__nudge-text { font-family: var(--main-font-stack); font-size: 0.875rem; line-height: 1.35; }
.lpc-cd__nudge-text strong { font-family: var(--heading-font-stack); text-transform: uppercase; letter-spacing: 0.02em; display: block; font-weight: 400; }
.lpc-cd__nudge .lpc-btn { padding: 0.55rem 1.1rem; font-size: 0.8125rem; flex: none; }

/* summary */
.lpc-cd__summary { padding-top: 1.1rem; font-family: var(--main-font-stack); font-size: 0.9375rem; }
.lpc-cd__summary-row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.lpc-cd__summary-row .is-free { color: var(--lpc-chicken); font-family: var(--heading-font-stack); text-transform: uppercase; font-size: 0.8125rem; }

/* footer */
.lpc-cd__foot {
  border-top: 2px solid rgba(18, 18, 18, 0.08);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--lpc-paper, #fffaf2);
}
.lpc-cd__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}
.lpc-cd__total-amount { font-size: 1.35rem; }
.lpc-cd__trust {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.625rem;
  opacity: 0.8;
  text-align: center;
}
.lpc-cd__empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--main-font-stack);
}
.lpc-cd__empty .lpc-h3 { margin-bottom: 0.75rem; }
.lpc-cd[aria-busy="true"] .lpc-cd__body { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   Reviews showcase (Grüns model) — carousel of text / photo / video cards
   ========================================================================== */
.lpc-rs__head { text-align: center; margin-bottom: 2rem; }
.lpc-rs__agg {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-family: var(--main-font-stack);
  font-size: 1rem;
}
.lpc-rs__agg .lpc-stars__icons { font-size: 1.15rem; }

/* Seamless marquee: two identical sets side by side, translated by exactly one
   set + one gap so the wrap is invisible. Duration is set in JS from the set
   width (constant speed regardless of how many reviews exist). */
.lpc-rs__viewport { position: relative; overflow: hidden; }
.lpc-rs__marquee {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding: 0.5rem 0 1rem;
  animation: lpc-rs-marquee 60s linear infinite;
}
.lpc-rs__set { display: flex; gap: 1rem; }
.lpc-rs__marquee.is-paused { animation-play-state: paused; }
@keyframes lpc-rs-marquee {
  to { transform: translateX(calc(-50% - 0.5rem)); }
}
@media (prefers-reduced-motion: reduce) {
  /* no motion: fall back to a normal swipeable rail, single set */
  .lpc-rs__viewport { overflow-x: auto; scrollbar-width: none; }
  .lpc-rs__viewport::-webkit-scrollbar { display: none; }
  .lpc-rs__marquee { animation: none; width: auto; }
  .lpc-rs__set + .lpc-rs__set { display: none; }
}

.lpc-rs__card {
  /* 76vw on small screens leaves a clear peek of the next card — swipe affordance */
  flex: 0 0 min(320px, 76vw);
  scroll-snap-align: start;
  background: rgb(var(--color-scheme-card));
  color: rgb(var(--color-scheme-card-text));
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lpc-rs__media {
  aspect-ratio: 4/3;
  background: rgba(18, 18, 18, 0.06);
  position: relative;
}
.lpc-rs__media img,
.lpc-rs__media video,
.lpc-rs__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.lpc-rs__media--video { aspect-ratio: 9/12; }
.lpc-rs__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.lpc-rs__quote {
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1;
}
.lpc-rs__who {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lpc-rs__verified {
  font-family: var(--heading-font-stack);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  border-radius: 6px;
  padding: 0.12rem 0.4rem;
}
.lpc-rs__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--lpc-ink);
  background: var(--lpc-paper, #fffaf2);
  color: var(--lpc-ink);
  font-family: var(--heading-font-stack);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  display: none;
}
@media (min-width: 900px) {
  .lpc-rs__arrow { display: block; }
}
.lpc-rs__arrow:hover { background: var(--lpc-ink); color: var(--lpc-cream); }
.lpc-rs__arrow--prev { left: -12px; }
.lpc-rs__arrow--next { right: -12px; }

.lpc-rs__appwrap { margin-top: 2.25rem; }
.lpc-rs__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 18, 18, 0.25);
  border: 0;
  cursor: pointer;
}
.lpc-rs__play span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  padding-left: 4px;
}

/* ==========================================================================
   ADD-ON CARD (double treats) — Maev-style, bottom of the buy box
   ========================================================================== */
.lpc-addon {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  border: 2px solid rgba(18,18,18,0.16);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--lpc-m-quick) var(--lpc-e-out),
              background var(--lpc-m-quick) var(--lpc-e-out),
              transform var(--lpc-m-tap) var(--lpc-e-out);
}
.lpc-addon:active { transform: scale(0.99); }
.lpc-addon[aria-pressed="true"] {
  border-color: var(--lpc-ink);
  background: color-mix(in srgb, var(--lpc-roo) 20%, transparent);
}
/* Reads as a checkbox because that's the mental model: tick it on, tick it off. */
.lpc-addon__check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(18,18,18,0.35);
  position: relative;
}
.lpc-addon__check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lpc-ink);
  border-radius: 5px;
  transform: scale(0);
  transition: transform var(--lpc-m-base) var(--lpc-e-spring);
}
.lpc-addon[aria-pressed="true"] .lpc-addon__check { border-color: var(--lpc-ink); }
.lpc-addon[aria-pressed="true"] .lpc-addon__check::after { transform: scale(0.62); }
.lpc-addon__img { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; }
.lpc-addon__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpc-addon__text { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.lpc-addon__name {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9375rem;
  line-height: 1.15;
}
.lpc-addon__sub { font-size: 0.8125rem; opacity: 0.72; line-height: 1.3; }
.lpc-addon__price {
  flex: none;
  font-family: var(--heading-font-stack);
  font-size: 1rem;
}

/* ==========================================================================
   MOBILE-NATIVE PASS
   Touch is the primary input on this store, so the phone gets first-class
   behaviour rather than a shrunken desktop page.
   ========================================================================== */

/* Kill the 300ms tap delay and the grey flash iOS/Android paint over taps —
   every control here already has its own :active state to replace them. */
.lpc-pill,
.lpc-btn,
.lpc-addon,
.lpc-halve__cta,
.lpc-halve__undo,
.lpc-purchase__card,
.lpc-stepper button,
.lpc-cd__item button,
.lpc-pdp__thumb {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Apple's 44px minimum: anything smaller is a mis-tap waiting to happen. */
@media (pointer: coarse) {
  .lpc-pill,
  .lpc-addon,
  .lpc-halve__cta,
  .lpc-halve__undo { min-height: 44px; }
  .lpc-stepper button { min-width: 44px; min-height: 44px; }
  .lpc-cd__remove { min-width: 40px; min-height: 40px; }
  .lpc-pdp__thumb { min-width: 56px; min-height: 56px; }
}

/* Hover styling belongs to devices that can hover. On a phone these stick after
   a tap and leave controls looking permanently half-pressed. */
@media (hover: none) {
  .lpc-btn:hover { background: var(--lpc-ink); color: var(--lpc-cream); transform: none; }
  .lpc-btn--secondary:hover { background: transparent; color: currentColor; }
  .lpc-pill:hover { border-color: rgba(18,18,18,0.25); }
  .lpc-pill[aria-pressed="true"]:hover { border-color: var(--lpc-ink); }
  .lpc-halve__cta:hover { background: var(--lpc-ink); color: var(--lpc-cream); }
  .lpc-stepper button:hover:not(:disabled) { background: transparent; color: inherit; }
}

/* iOS bumps font sizes on rotate unless told not to. */
html { -webkit-text-size-adjust: 100%; }

/* The drawer should scroll like a native sheet: momentum inside, and no
   scroll-chaining that drags the page behind it. */
.lpc-cd__body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Respect the home-indicator area so the drawer footer and sticky bar aren't
   sitting under it. */
.lpc-cd__foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Sticky add-to-cart is the main mobile control: give it a comfortable target
   and keep it clear of the home indicator. */
@media (pointer: coarse) {
  .lpc-sticky-atc .lpc-btn { min-height: 48px; }
}

/* ---- mixed-feeding row ----
   Findable, not tempting. Half feeding halves the revenue per customer, so this
   is the one place on the page where we deliberately do NOT sell: no bold, no
   accent colour, no struck-through drama. Just a small line and a button that
   names the interval. */

/* ---- trial card: list price struck beside the first-box price ---- */
.lpc-purchase__was {
  display: block;
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.875rem;
  font-family: var(--body-font-stack, inherit);
  line-height: 1.1;
}

/* The condition attached to the special. It has to be legible rather than
   fine print — a price this one qualifies is only honest if the qualification
   reads as easily as the number does — but it is not a selling line, so it
   sits at the weight of a label and takes the roo edge instead of a fill. */
.lpc-purchase__promo {
  display: block;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--lpc-roo, #dfc136);
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

/* A horizontally scrolling panel needs to LOOK scrollable, or nobody swipes it.
   The comparison table is the main one: a fade on the right edge is the standard
   native cue, and it disappears once you reach the end. */
.lpc-panel[style*="overflow"],
.lpc-cmp__scroll,
.lpc-panel.lpc-mt-3 {
  scrollbar-width: none;
}
.lpc-scrollcue {
  position: relative;
}
.lpc-scrollcue::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--color-scheme-background)));
  opacity: 1;
  transition: opacity var(--lpc-m-quick) var(--lpc-e-out);
}
.lpc-scrollcue.is-end::after { opacity: 0; }

/* ==========================================================================
   MOBILE TYPE FIT
   Lines that are meant to read as one row were wrapping at phone widths. Each
   of these is sized to the string it actually has to hold, not shrunk globally.
   ========================================================================== */
@media (max-width: 599px) {
  /* "4.7/5.0 — 1000+ Sydney cats fed" sat 221px wide next to the stars and
     tipped onto a second row. */
  .lpc-stars { gap: 0.4rem; }
  .lpc-stars > span:not(.lpc-stars__icons) { font-size: 0.8125rem; }
  .lpc-stars__icons { font-size: 0.875rem; letter-spacing: -0.02em; }

  /* Same string in the reviews header, which was running to two lines. */
  .lpc-rs__agg span { font-size: 0.9375rem; line-height: 1.3; }

  /* Timeline copy was 17px and running to four lines per step. */
  .lpc-timeline__text { font-size: 0.9375rem; line-height: 1.5; }
  .lpc-timeline__step { padding-bottom: 0.2rem; }

  /* The trust triplet under add-to-cart: "Fussy-cat guarantee" was breaking
     across two lines while its neighbours sat on one, so the row looked ragged.
     Stack icon over label instead and let all three share the width evenly. */
  .lpc-trust-triplet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    align-items: start;
  }
  .lpc-trust-triplet > span {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  /* Savings pill sits on one line at this width. */
}

/* ==========================================================================
   TIMELINE ON MOBILE
   The connecting rail was min-width:768px only, so on a phone the timeline lost
   the one thing that makes it a timeline and became four loose text blocks.
   Below 768px it becomes a vertical rail with the dots sitting on it.
   ========================================================================== */
@media (max-width: 767px) {
  .lpc-timeline__track { gap: 0; }
  .lpc-timeline__step {
    position: relative;
    padding: 0 0 1.4rem 1.9rem;
  }
  /* The rail. Stops short on the last step so the line doesn't dangle. */
  .lpc-timeline__step::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.5rem;
    bottom: 0;
    width: 2px;
    background: rgba(18, 18, 18, 0.15);
  }
  .lpc-timeline__step:last-child { padding-bottom: 0; }
  .lpc-timeline__step:last-child::before { bottom: auto; height: 0.6rem; }
  /* Dot sits on the rail rather than floating above the text. */
  .lpc-timeline__dot {
    position: absolute;
    left: 0;
    top: 0.35rem;
    margin: 0;
  }
  .lpc-timeline__when { margin-bottom: 0.25rem; }
  .lpc-timeline__text { font-size: 0.8125rem; line-height: 1.5; }
}



/* ==========================================================================
   REVIEW WALL — paginated row list at the bottom of the page
   Rows separated by rules, meta on the left, review on the right, live totals in
   the header. Distinct from the curated photo/video showcase mid-page.
   ========================================================================== */
.lpc-rw__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
}

/* Live totals: big count, big score, stars. */
.lpc-rw__totals {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lpc-rw__total-num,
.lpc-rw__total-score {
  font-family: var(--heading-font-stack);
  font-size: 2rem;
  line-height: 1;
}
.lpc-rw__total-lbl {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-right: 0.8rem;
}
.lpc-rw__total-stars { letter-spacing: 0.08em; font-size: 1rem; }

/* ---- rows ---- */
.lpc-rw__list { border-top: 1px solid rgba(18,18,18,0.16); }
.lpc-rw__row {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(18,18,18,0.16);
  align-items: start;
}
@media (min-width: 800px) {
  .lpc-rw__row { grid-template-columns: 15rem 8rem 1fr; }
}

.lpc-rw__who { display: flex; align-items: flex-start; gap: 0.6rem; }
.lpc-rw__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lpc-cream);
  border: 1px solid rgba(18,18,18,0.14);
  font-family: var(--heading-font-stack);
  font-size: 0.8125rem;
  line-height: 1;
}
.lpc-rw__whotext { display: grid; gap: 0.1rem; min-width: 0; }
.lpc-rw__name {
  font-family: var(--heading-font-stack);
  font-size: 0.9375rem;
  line-height: 1.2;
}
.lpc-rw__loc,
.lpc-rw__date { font-size: 0.75rem; opacity: 0.62; line-height: 1.35; }

.lpc-rw__verified {
  display: inline-block;
  font-size: 0.75rem;
  opacity: 0.72;
}

.lpc-rw__body { display: grid; gap: 0.3rem; min-width: 0; }
.lpc-rw__rating { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lpc-rw__stars { letter-spacing: 0.04em; font-size: 0.9375rem; }
.lpc-rw__star.is-empty { opacity: 0.22; }
.lpc-rw__score { font-size: 0.8125rem; opacity: 0.65; }
.lpc-rw__title {
  font-family: var(--heading-font-stack);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0.1rem 0 0;
}
.lpc-rw__quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- pager ---- */
.lpc-rw__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.lpc-rw__nav {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--lpc-m-quick) var(--lpc-e-out),
              color var(--lpc-m-quick) var(--lpc-e-out),
              opacity var(--lpc-m-quick) var(--lpc-e-out),
              transform var(--lpc-m-tap) var(--lpc-e-out);
}
.lpc-rw__nav:hover:not(:disabled) { background: var(--lpc-ink); color: var(--lpc-cream); }
.lpc-rw__nav:active:not(:disabled) { transform: scale(0.97); }
.lpc-rw__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.lpc-rw__pageof {
  font-family: var(--heading-font-stack);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

@media (max-width: 799px) {
  .lpc-rw__head { align-items: flex-start; }
  .lpc-rw__total-num, .lpc-rw__total-score { font-size: 1.5rem; }
  /* Badge tucks under the name rather than taking its own row. */
  .lpc-rw__badge { margin-top: -0.3rem; padding-left: 2.3rem; }
  .lpc-rw__quote { font-size: 0.875rem; }
}

/* ==========================================================================
   MOBILE TYPE REBALANCE (added 2026-07-27)

   Companion to the retuned clamp() floors up top. Those fixed the fluid
   headings; these are the fixed-size items that were also sized against a
   16px root and so ran ~12.5% large on a phone. Each one below was measured
   wrapping at 375px, not guessed:

     .lpc-btn              "Add to cart" broke onto two lines in the sticky bar
     .lpc-purchase__name   "Subscribe & save" broke onto two
     .lpc-purchase__meta   "Your 28-pouch box · 4 week subscription" took three
     .lpc-ing__name        "Chicken thigh" took two, "Louis nutrient mix" three
     .lpc-body             19.1px body copy on a 375px screen

   Kept as a max-width block on purpose. The base values ARE the desktop
   values, so scoping the change here means desktop cannot regress — the
   alternative (lowering the base, restoring at min-width) touches every
   breakpoint to fix one.
   ========================================================================== */
@media (max-width: 767px) {
  .lpc-body { font-size: 0.9375rem; }
  .lpc-btn { font-size: 0.9375rem; }
  .lpc-purchase__name { font-size: 0.9375rem; }
  .lpc-purchase__meta { font-size: 0.75rem; }
  .lpc-purchase__amount { font-size: 1.2rem; }
  .lpc-ing__name { font-size: 0.9375rem; }
  .lpc-ing__pct { font-size: 1.25rem; }
  .lpc-timeline__title { font-size: 1rem; }
  .lpc-packed__head { font-size: 1rem; }
  .lpc-cd__title { font-size: 1.125rem; }
  .lpc-eyebrow { font-size: 0.75rem; }

  /* Tiny uppercase in the display face turns to mush below ~11px. Both of
     these sat at 10.1px; the pill tag also overflowed its pill by 8px. */
  .lpc-pill__tag { font-size: 0.625rem; }
  .lpc-rs__verified { font-size: 0.625rem; }

  /* Ingredient rows: the name was being flex-shrunk to 91px of a 276px row, so
     "Louis nutrient mix" wrapped onto three lines and even "Chicken thigh" took
     two. Type size was never the cause — the thumb (64px), the percentage's
     4.2rem min-width and two 1.25rem gaps were eating 185px before the name got
     a look in. Reclaiming ~56px is what actually fixes it. */
  /* The name is the one thing in this row a reader is scanning for, so it gets
     the leftover width and everything else gives ground. min-width on the
     percentage is a floor, not a cap — it still grows for "37%" if it needs to. */
  /* .lpc-ing--openable .lpc-ing__row sets gap: 1.25rem at two-class specificity,
     which outranks a bare .lpc-ing__row — a media query adds no specificity of
     its own, so the selector has to be matched here or the openable rows (every
     recipe's "Louis nutrient mix") keep the wide gap. */
  .lpc-ing, .lpc-ing--openable .lpc-ing__row { gap: 0.6rem; }
  .lpc-ing__thumb { width: 44px; height: 44px; }
  .lpc-ing__pct { min-width: 2.4rem; }
  .lpc-ing__name { flex: 1 1 auto; min-width: 0; }

  /* On the Recipes page the flex container is .lpc-ing__row (a <summary>), NOT
     .lpc-ing — so the rule above missed it and those rows kept the 1.25rem gap.
     They also carry a fifth child, the "What's inside" hint, which flex had
     already crushed to ZERO width: the label was invisible on every phone and
     only its chevron survived. Hiding the word outright costs nothing that was
     readable and hands ~26px back to the ingredient name. The chevron still
     signals the row opens. */
  .lpc-ing__hint-word { display: none; }

  /* Nutrient-mix rows: icon 40 + name 179 (flex 0 0 auto, unshrinkable) +
     chevron 26 + gaps 38 = 283px in a 276px row, so .lpc-nm__role — the only
     shrinkable item — collapsed to 0 and "keeps the food fresh" rendered as
     nothing at all. Content silently invisible, not merely cramped.
     Two rows in a grid instead: name over role, icon and chevron spanning
     both. Same name-over-detail stack as .lpc-included__item. */
  .lpc-nm__summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.7rem;
    row-gap: 0.1rem;
    align-items: center;
  }
  .lpc-nm__icon { grid-column: 1; grid-row: 1 / span 2; }
  .lpc-nm__name { grid-column: 2; grid-row: 1; }
  .lpc-nm__role { grid-column: 2; grid-row: 2; }
  .lpc-nm__chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---- trial offer block (Tyga model) ----
   A receipt, not a price tag. The trial's job is to make the first box feel
   small, and a single figure invites comparison with the subscription; rows that
   show delivery at zero and name the discount as a discount argue for
   themselves. Image and card share the row so the box is visible while the
   number is read. */
.lpc-trialo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.lpc-trialo__img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
}
/* "Go on, have a sniff" was rendering as small body text: an h2 with only a
   margin, no type treatment, sitting over a receipt card full of Bobby Jones.
   The heading is the invitation; it should sound like one. */
.lpc-trialo__head {
  margin: 0 0 1.25rem;
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.lpc-trialo__card {
  border: 2px solid var(--lpc-ink, #0a0a0a);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  position: relative;
}
.lpc-trialo__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Pull the pill and badge onto the card's own border, the way Tyga hangs
     them, so the card reads as a labelled object rather than a plain panel. */
  margin: -2.15rem -0.35rem 0.9rem;
}
.lpc-trialo__pill {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--lpc-ink, #0a0a0a);
  border-radius: 999px;
  background: var(--lpc-paper, #fffaf2);
}
/* The per-pouch figure. Roo yellow, because this is the one number on the card
   that is a fact rather than an offer. */
.lpc-trialo__burst {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 5.2rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  background: var(--lpc-roo, #dfc136);
  border: 2px solid var(--lpc-ink, #0a0a0a);
  line-height: 1.05;
}
.lpc-trialo__burst strong { font-family: var(--heading-font-stack); font-size: 1.05rem; }
.lpc-trialo__burst span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; }

.lpc-trialo__rows { margin: 0; }
.lpc-trialo__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
}
.lpc-trialo__row dt, .lpc-trialo__row dd { margin: 0; }
.lpc-trialo__row dt { opacity: 0.8; }
.lpc-trialo__was { text-decoration: line-through; opacity: 0.45; }
.lpc-trialo__free { font-family: var(--heading-font-stack); letter-spacing: 0.04em; }
.lpc-trialo__row--total {
  border-top: 2px solid rgba(10,10,10,0.1);
  margin-top: 0.35rem;
  padding-top: 0.7rem;
}
.lpc-trialo__row--total dt { opacity: 1; }
/* The saving is highlighted rather than coloured: it has to be findable without
   turning the card into a sale banner. */
.lpc-trialo__mark {
  background: var(--lpc-roo, #dfc136);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.lpc-trialo__pay { font-family: var(--heading-font-stack); font-size: 1.4rem; }

.lpc-trialo__note { margin: 0.9rem 0 0; text-align: center; opacity: 0.75; font-size: 0.875rem; }
.lpc-trialo__cta { display: block; width: 100%; margin-top: 0.9rem; text-align: center; }
.lpc-trialo__err { margin: 0.6rem 0 0; font-size: 0.875rem; }
.lpc-trialo__cond {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--main-font-stack);
  font-size: 0.75rem;
  opacity: 0.75;
}

@media (max-width: 899px) {
  .lpc-trialo__grid { grid-template-columns: 1fr; }
  /* Product shot first on a phone, same call as the hero. */
  .lpc-trialo__media { order: -1; }
  .lpc-trialo__toprow { margin-top: -2rem; }
  .lpc-trialo__pay { font-size: 1.25rem; }
}

/* ---- email unlock popup ----
   A sheet on a phone and a small centred card on desktop. Deliberately not
   full-screen either way: it is a trade being offered, not a gate. */
.lpc-pop { position: fixed; inset: 0; z-index: 60; }
.lpc-pop__scrim {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.45);
  opacity: 0; transition: opacity 260ms cubic-bezier(0.22,1,0.36,1);
}
.lpc-pop.is-open .lpc-pop__scrim { opacity: 1; }
.lpc-pop__panel {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: min(30rem, 100%);
  background: var(--lpc-paper, #fffaf2);
  border-top: 2px solid var(--lpc-ink, #0a0a0a);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.5rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
  max-height: 88vh; overflow-y: auto;
}
/* The mascot peeks over the panel's top edge, the same gesture as the pack.
   He rides OUTSIDE the panel box, so the panel must not clip upward: on the
   phone sheet overflow-y stays auto for scrolling and the cat instead tucks
   inside the top edge; on desktop, where the panel never scrolls, he breaks
   the border properly. */
.lpc-pop__cat { width: 84px; margin: -0.3rem auto 0.4rem; pointer-events: none; }
@media (min-width: 700px) {
  .lpc-pop__cat { position: absolute; top: -58px; left: 50%; transform: translateX(-50%); margin: 0; }
}
.lpc-pop.is-open .lpc-pop__panel { transform: translate(-50%, 0); }
@media (min-width: 700px) {
  .lpc-pop__panel {
    bottom: auto; top: 50%;
    transform: translate(-50%, -46%) scale(0.98);
    border: 2px solid var(--lpc-ink, #0a0a0a);
    border-radius: 1.25rem;
    opacity: 0;
    padding: 2rem 1.9rem 1.6rem;
  }
  .lpc-pop.is-open .lpc-pop__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .lpc-pop__panel { overflow: visible; max-height: none; }
}
.lpc-pop__x {
  position: absolute; top: 0.6rem; right: 0.7rem;
  width: 44px; height: 44px;      /* full tap target, not a 12px cross */
  background: none; border: 0; cursor: pointer; font-size: 1rem; opacity: 0.55;
}
.lpc-pop__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--main-font-stack);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; opacity: 0.6;
}
.lpc-pop__title { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 4.5vw, 1.75rem); line-height: 1.1; }
.lpc-pop__price { margin: 0 0 0.6rem; display: flex; align-items: baseline; gap: 0.5rem; }
.lpc-pop__price strong { font-family: var(--heading-font-stack); font-size: 1.85rem; }
/* The offer as a ticket: roo yellow, tilted a degree, the one loud thing on
   the sheet. Everything else stays quiet so this is what the eye lands on. */
.lpc-pop__ticket {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--lpc-roo);
  border-radius: 0.7rem;
  padding: 0.55rem 0.9rem;
  transform: rotate(-1deg);
  margin: 0.2rem 0 0.9rem;
}
.lpc-pop__ticket strong { font-size: 2.1rem; line-height: 1; }
.lpc-pop__ticket-note {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) { .lpc-pop__ticket { transform: none; } }
.lpc-pop__was { text-decoration: line-through; opacity: 0.45; }
.lpc-pop__body { margin: 0 0 1rem; font-size: 0.9375rem; opacity: 0.85; }
.lpc-pop__label {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--main-font-stack);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem;
}
.lpc-pop__input { width: 100%; margin-bottom: 0.75rem; }
.lpc-pop__cta { display: block; width: 100%; text-align: center; }
.lpc-pop__err { margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--lpc-beef, #c83b23); }
.lpc-pop__fine { margin: 0.8rem 0 0; font-size: 0.6875rem; opacity: 0.6; }
.lpc-pop__no {
  display: block; margin: 0.6rem auto 0;
  background: none; border: 0; cursor: pointer;
  font-size: 0.8125rem; opacity: 0.55; text-decoration: underline;
  min-height: 44px;
}
/* The code has to be readable and copyable at a glance, so it gets the roo
   block treatment rather than being another line of body text. */
.lpc-pop__code {
  display: inline-block;
  margin: 0.2rem 0 0.9rem;
  padding: 0.5rem 1rem;
  background: var(--lpc-roo, #dfc136);
  border: 2px dashed var(--lpc-ink, #0a0a0a);
  border-radius: 0.5rem;
  font-family: var(--heading-font-stack);
  font-size: 1.35rem; letter-spacing: 0.06em;
  user-select: all;
}
@media (prefers-reduced-motion: reduce) {
  .lpc-pop__scrim, .lpc-pop__panel { transition: none; }
}
/* Landed rather than animated: a hidden tab freezes transitions, so an opened
   popup would otherwise sit at its off-screen start position. */
.lpc-pop.is-instant .lpc-pop__scrim,
.lpc-pop.is-instant .lpc-pop__panel { transition: none; }

/* Gallery position counter. On a phone the thumbs fall below the fold of the
   image itself, so without this there is nothing to say the gallery holds
   more. Sits on the image rather than under it, where it would push the buy
   box down. */
/* Positioning context for the counter, MOBILE ONLY.
   This was unscoped, and being later in the file at equal specificity it beat
   the `position: sticky` set at line ~958 — which killed the desktop behaviour
   where the image holds still while the buy box scrolls past it. Desktop needs
   nothing here: a sticky element is already a containing block for absolutely
   positioned children, and the counter is hidden above 900px anyway. */
@media (max-width: 899px) {
  .lpc-pdp__gallery { position: relative; }
}
.lpc-pdp__count {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.62);
  color: #fff;
  font-family: var(--main-font-stack);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}
@media (min-width: 900px) {
  /* Desktop shows every thumb at once, so a counter would be noise. */
  .lpc-pdp__count { display: none; }
}
/* Bigger thumbs on a phone: 72px was under the 44px minimum once the 2px
   border and the gap were taken off, and these are the control for changing
   image. */
@media (max-width: 899px) {
  .lpc-pdp__thumb { width: 64px; height: 64px; }
}

/* ---- comparison table: a real card stack on a phone ----
   George asked for diagrams to go vertical on mobile. This was five columns in
   a horizontal scroller, which on a 375px screen shows Louis and about half of
   Kibble — you cannot compare what you cannot see side by side, so the section
   did nothing on the device most people use.

   Below 640px the same markup reflows: one card per feature, the feature name
   as its heading, then the four answers stacked as label/value rows with Louis
   first and highlighted. No duplicated markup, so the two presentations cannot
   drift apart. Above 640px the table is untouched. */
@media (max-width: 640px) {
  .lpc-compare__wrap { overflow-x: visible; }
  .lpc-compare, .lpc-compare tbody, .lpc-compare tr, .lpc-compare td, .lpc-compare th {
    display: block;
    width: auto;
  }
  /* The header row's job is done by the per-cell labels below. */
  .lpc-compare thead { display: none; }
  .lpc-compare tr {
    background: var(--lpc-cream);
    border: 2px solid rgba(10, 10, 10, 0.12);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem 0.6rem;
    margin-bottom: 0.85rem;
  }
  .lpc-compare tr:last-child { margin-bottom: 0; }
  .lpc-compare__rowhead {
    font-family: var(--heading-font-stack);
    font-size: 1rem;
    text-align: left;
    padding: 0 0 0.6rem;
    border-bottom: 2px solid rgba(10, 10, 10, 0.08);
    margin-bottom: 0.5rem;
  }
  .lpc-compare td {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: baseline;
    gap: 0.75rem;
    text-align: left;
    padding: 0.3rem 0;
    border: 0;
  }
  .lpc-compare td::before {
    content: attr(data-col);
    font-family: var(--main-font-stack);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
  }
  /* Louis leads the card and keeps its emphasis without the desktop fill,
     which at card width would read as a highlighted row rather than a column. */
  .lpc-compare td.lpc-compare__louis {
    order: -1;
    background: none;
    border-radius: 0;
    padding-bottom: 0.45rem;
  }
  .lpc-compare td.lpc-compare__louis::before { opacity: 1; font-weight: 700; }
  .lpc-compare tr:last-child td.lpc-compare__louis { border-radius: 0; }
  /* Nothing scrolls sideways any more, so the swipe hint would be a lie. */
  .lpc-compare__hint { display: none; }
}

/* ---- hero on a phone: get the CTA above the fold ----
   Measured at 375x812 before this: the primary CTA sat at 917px, 1.13
   viewports down, so nobody saw the one button the page exists for without
   scrolling. Two causes, both fixable without losing anything.

   The stars and the trust row sat ABOVE the headline, pushing everything down
   by ~130px to say things that land better as reassurance AFTER the ask than
   as a preamble before it. The copy column was display:block so nothing could
   be reordered; it becomes a flex column here only.

   And the product shot took 330px before the headline had started. Capped, and
   cropped rather than letterboxed so it stays a photograph and not a band. */
@media (max-width: 899px) {
  .lpc-hero__layout > *:not(.lpc-hero__media) {
    display: flex;
    flex-direction: column;
  }
  .lpc-hero__layout .lpc-bullets { order: 1; }
  .lpc-hero__layout .lpc-stars,
  .lpc-hero__layout .lpc-hero__trust { order: 2; }
  .lpc-hero__layout .lpc-stars { margin-top: 1.25rem; }

  .lpc-hero__media {
    max-height: 34vh;
    overflow: hidden;
    border-radius: 20px;
  }
  .lpc-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---- late fixes from the audit ---- */

/* iOS Safari zooms into any input under 16px on focus and never zooms back
   out. At 15px this was doing it on the buy box's cat-name field and on the
   one-field cat-name page, which is opened straight from an email. */
@media (max-width: 767px) {
  .lpc-catname { font-size: 1rem; }
}

/* Touch targets that the existing coarse-pointer rules missed. The drawer's
   minus button at quantity 1 DELETES the line, so it being under 44px is the
   most expensive small target on the site. */
@media (pointer: coarse) {
  .lpc-cd__close,
  .lpc-cd__qty button { min-width: 44px; min-height: 44px; }
}

/* The per-day price was rendered in --lpc-beef, which is this theme's error
   and ✗ colour. A price is not a warning. */
.lpc-purchase__perday-main { color: inherit; opacity: 0.75; }
.lpc-compare__note {
  margin: 0.6rem 0 0;
  font-family: var(--main-font-stack);
  font-size: 0.6875rem;
  opacity: 0.6;
  text-align: center;
}

/* Headline price, directly under the product title. It exists for one job: on a
   phone the first money figure used to be inside the purchase cards, below the
   fold, so "how much is it" went unanswered until you had scrolled past the
   whole box builder.

   It is deliberately NOT the loud one. At 1.75rem of Bobby Jones it was the
   biggest number on the page, and it was quoting the same $179.00 that the
   subscribe card quotes a few hundred pixels below — except the card is where
   the figure is actually a choice (subscribe vs one-time vs trial), where the
   struck anchor and the saving live, and where the control you have to press
   sits. Two loud identical numbers, with the wrong one shouting louder. Now it
   is one quiet line in the body font: an answer, not a price tag. */
.lpc-pdp__headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.lpc-pdp__headline-amount {
  font-family: var(--main-font-stack);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.lpc-pdp__headline-meta {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* ============================================================
   LPC Bowl Features — bowl in the middle, callouts either side.
   Every selector here is new (grepped before appending; appending a
   declaration to a selector that is already styled earlier in this file is
   what silently killed the sticky gallery).
   ============================================================ */
.lpc-bowlf__head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}
.lpc-bowlf__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.lpc-bowlf__col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---- the bowl ---- */
.lpc-bowlf__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: var(--lpc-bowlf-max, 520px);
}
/* `contain`, not `cover`: this is a subject on a background, not a crop into a
   frame. A bowl shot square-on loses its rim to `cover` at any other ratio. */
.lpc-bowlf__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
/* The glow. A pseudo-element rather than a box-shadow, because a box-shadow
   traces the rectangular <img> and would print a hard-edged rectangle under a
   cutout bowl. This is a blurred ellipse sitting behind the image, so it reads
   as the bowl's own contact shadow. */
.lpc-bowlf__media--glow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: var(--lpc-bowlf-glow-w, 62%);
  aspect-ratio: 4 / 1;
  background: radial-gradient(ellipse at center,
              var(--lpc-bowlf-glow-c, #0a0a0a) 0%,
              transparent 70%);
  opacity: var(--lpc-bowlf-glow-o, 0.4);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}
.lpc-bowlf__media .lpc-placeholder { aspect-ratio: 1; }

/* ---- a callout ---- */
.lpc-bowlf__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.lpc-bowlf__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--lpc-chicken);
}
.lpc-bowlf__icon svg,
.lpc-bowlf__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* min-width: 0 is load-bearing. Without it a long title refuses to wrap and
   pushes the row wider than its column — the same flex crush that rendered
   `.lpc-nm__role` at zero width on the recipes page. */
.lpc-bowlf__body { min-width: 0; }
.lpc-bowlf__title {
  font-family: var(--heading-font-stack);
  font-size: 1.0625rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}
.lpc-bowlf__text {
  font-family: var(--main-font-stack);
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 0.78;
  margin: 0;
}
.lpc-bowlf__foot {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.6;
  text-align: center;
  margin: 2.5rem auto 0;
}

/* ---- phone: bowl on top, callouts underneath, one per row ----
   Not two columns. These blocks carry a heading plus a sentence, and this
   theme's root is 18px so everything renders ~12% larger than it reads in the
   stylesheet. Two columns at 375px is how the icon row got crushed last time. */
.lpc-bowlf__media { order: -1; }
.lpc-bowlf__col { gap: 1.5rem; }

@media (min-width: 640px) {
  .lpc-bowlf__col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

@media (min-width: 900px) {
  /* The middle track is sized from the setting, not from its content. `auto`
     around a width:100% child resolves to that child's min-content and
     collapsed the bowl to 94px. */
  .lpc-bowlf__grid {
    grid-template-columns: 1fr minmax(0, var(--lpc-bowlf-max, 520px)) 1fr;
    gap: 3rem;
  }
  .lpc-bowlf__media { order: 0; }
  .lpc-bowlf__col { display: flex; gap: 2.75rem; }
  .lpc-bowlf__col--left { order: -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .lpc-bowlf__media--glow::before { transition: opacity var(--lpc-m-slow, 520ms) var(--lpc-e-out); }
}

/* ============================================================
   LPC Hero Lick — full-bleed landing hero.
   All selectors new (grepped before appending).

   MOBILE FIRST here, unlike most of this file. This section's phone layout is
   the awkward one — the copy has to sit above a cat that fills the lower half
   without either overlapping his face or pushing the button off screen — so it
   is the base case and desktop is the override.
   ============================================================ */
.lpc-lick {
  position: relative;
  width: 100%;
  background: var(--lpc-lick-bg, #e29a2a);
  overflow: hidden;
  isolation: isolate;
  /* svh, not vh. On iOS Safari 100vh is the height WITHOUT the address bar, so a
     100vh hero is taller than the screen on load and the button lands below the
     fold — the exact fault the old hero had at 1.13 viewports. svh is the small
     viewport height: what you can actually see. */
  min-height: 92svh;
  /* Phones: two bands, copy above and art below, NOT copy over art. Overlaying
     worked while the copy was a headline, a line of body and a button. Adding
     the rating above and three ticks below took it to about 190px more, and the
     tick list came to rest on the cat's face and tongue — three lines of dark
     text over the busiest part of the photograph. The answer was NOT to split
     the section into two bands — George saw that and called it: it stops being
     a hero and becomes a coloured panel with a photo stuck underneath. Ollie
     keeps one photograph and lays the copy over it, and so does this. The
     ticks are dropped on a phone instead, which is the thing that did not fit.
     They are still there from 750px up. */
  display: grid;
}
@supports not (height: 1svh) {
  .lpc-lick { min-height: 88vh; }
}

.lpc-lick__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The wash. Sits between the photograph and the copy, fading out before the
   cat so he is never behind text. Same hex as the artwork's flat background, so
   there is no seam to see — it reads as more ochre, not as a filter. */
.lpc-lick__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--lpc-lick-scrim-o, 1);
  /* Full opacity, and the GRADIENT does the fading. The top stop is the exact
     hex already in the photograph, so at 100% it is invisible there — 85% was
     worse, because it greyed the flat ochre everywhere while still erasing his
     ears. The fade runs over 40% of the height rather than 38, with a midpoint
     stop, so there is no band edge to see cutting across his forehead. */
  /* Stops are matched to the artwork, not guessed. The cat's ear tips begin at
     35% of the mobile file and the copy ends at about 47% of the band, so the
     wash has an 12-point gap to cover and then must get out of the way. Fading
     to 80% protected nothing extra and erased his whole face. */
  background: linear-gradient(
    180deg,
    var(--lpc-lick-scrim, #d08a2b) 0%,
    var(--lpc-lick-scrim, #d08a2b) 40%,
    rgba(208, 138, 43, 0.5) 49%,
    transparent 58%
  );
}

/* Absolutely positioned so the image can never contribute height to its
   container. In flow, `height: 100%` against an indefinite row falls back to
   the intrinsic height, which once made the phone hero 1014px tall. */
.lpc-lick__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lpc-lick-x-mobile, 50%) var(--lpc-lick-y-mobile, 100%);
  display: block;
}

.lpc-lick__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 3rem);
}
.lpc-lick__copy { max-width: 34rem; }

.lpc-lick__head {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  /* Floor is what a phone sees: the vw term never wins at 375px, so the floor is
     the only number that matters there, and this theme's root is 18px. */
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.lpc-lick__name {
  color: var(--lpc-lick-name, var(--lpc-paper));
  /* inline-block so the JS-set min-width is honoured; bottom keeps the baseline
     aligned with the rest of the sentence when the width is reserved. */
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
  white-space: pre;
}
.lpc-lick__caret {
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.04em;
  vertical-align: baseline;
  background: currentColor;
  opacity: 0.85;
  animation: lpc-lick-blink 1.05s steps(1) infinite;
}
@keyframes lpc-lick-blink { 0%, 49% { opacity: 0.85; } 50%, 100% { opacity: 0; } }
.lpc-lick__caret[hidden] { display: none !important; }

.lpc-lick__sub {
  font-family: var(--main-font-stack);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.5;
  margin: 1.1rem 0 0;
  max-width: 30rem;
  opacity: 0.9;
}
.lpc-lick__actions { margin-top: 1.6rem; }
.lpc-lick__note {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.72;
  margin: 0.7rem 0 0;
}
.lpc-lick__cta { min-height: 48px; display: inline-flex; align-items: center; }

/* Light-on-dark variant. */
.lpc-lick--light { color: var(--lpc-paper); }
.lpc-lick--light .lpc-lick__name { color: var(--lpc-ink); }

.lpc-lick .lpc-placeholder { height: 100%; aspect-ratio: auto; }

/* ---- desktop: copy left, cat right, one row ---- */
@media (min-width: 750px) {
  /* Vertical anchor, not `center`.

     The art is 16:9. A 1280px laptop shows it in a 1280x688 band, which is
     1.86:1, so cover crops about 30px and nothing is lost. A 1894px screen
     shows it in a 1894x760 band, which is 2.49:1 — cover has to scale the
     image to 1065px tall and throw away 305px, and centred that takes 152px
     off the top, which is Louis's ears.

     So the crop is anchored near the top instead of being shared equally.
     Everything below his chin is background; the ears are the picture. */
  .lpc-lick__img {
    object-position: var(--lpc-lick-x-desktop, 50%) var(--lpc-lick-y-desktop, 15%);
  }
  .lpc-lick {
    /* Capped rather than viewport-driven: on a short wide laptop a percentage
       height crops the cat's head off. */
    min-height: min(86svh, 760px);
    grid-template-rows: minmax(0, 1fr);
  }
  /* Back to an overlay, and back OUT of the grid. As a grid item with
     `height: 100%` in an auto row the sizing is circular, so the row fell back
     to the image's aspect ratio: at 1000px wide the 4:5 art made this 1232px
     tall and put the button 1.37 viewports down. */
  .lpc-lick__media {
    position: absolute;
    inset: 0;
    grid-row: auto;
    min-height: 0;
    /* `height: auto` is load-bearing. The phone rule sets an explicit
       `height: 38svh` to pin the art band, and that is a base declaration, so
       without resetting it here the desktop overlay inherited it and the cat
       filled only the top 342px of a 760px hero with flat ochre underneath.
       Absolute with inset: 0 needs auto to let the insets do the sizing. */
    height: auto;
  }
  /* Half the width, not a rem cap. The art is a fixed composition with the cat
     hard right, so the copy column has to track the picture proportionally: a
     40rem cap is 720px, which at a 1000px viewport ran the headline straight
     across his face.

     This lived inside the 1500px block for a while by accident — adding the
     wide-screen height closed this media query one rule early, so every desktop
     between 750 and 1499 fell back to the phone's 34rem cap and the headline
     ran over the cat again. Braces, not logic. */
  .lpc-lick__inner {
    align-items: center;
    padding-inline: clamp(2rem, 6vw, 6rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lpc-lick__media { grid-row: auto; }
  .lpc-lick__copy { grid-column: 1; max-width: 40rem; }
  .lpc-lick__scrim {
    background: linear-gradient(
      90deg,
      var(--lpc-lick-scrim, #d08a2b) 0%,
      var(--lpc-lick-scrim, #d08a2b) 24%,
      rgba(208, 138, 43, 0.5) 44%,
      transparent 66%
    );
  }
}

/* Very wide screens get a taller band as well, which is the other half of the
   ears fix: the crop shrinks from 305px to about 200px before the anchor even
   applies, so there is less to lose in the first place. */
@media (min-width: 1500px) {
  .lpc-lick { min-height: min(88svh, 880px); }
}

@media (prefers-reduced-motion: reduce) {
  .lpc-lick__caret { animation: none; opacity: 0; }
}

/* ---- hero lick: rating above the headline, ticks below the button ----
   The components themselves (.lpc-stars, .lpc-hero__trust, .lpc-keybenefits)
   are lpc-hero's and the PDP's, reused unmodified. Only spacing and the
   phone-density problem are handled here. */
.lpc-lick__stars { margin-bottom: 0.6rem; }
.lpc-lick__trust { margin-bottom: 1.4rem; }
.lpc-lick__ticks { margin-top: 1.5rem; }

/* Phones. Adding a rating above the headline and three ticks below the button
   put roughly 190px of new copy into a hero that already filled the screen, and
   the bottom of the list ran into the cat's face. Three things give that back
   without cutting anything George asked for:
   the trust row stacks instead of wrapping mid-phrase, the ticks tighten, and
   the section is allowed to grow past the viewport rather than overlapping the
   art. A hero that is 104svh on a phone is normal; a hero whose last line sits
   on a cat's nose is not. */
/* The tick ✓ inherits --lpc-chicken from the PDP, which is #cc8243 on a
   #e29a2a background: the same colour family two shades apart, effectively
   invisible. Here it takes the cream the cat's name uses. */
.lpc-lick__ticks li::before { color: var(--lpc-lick-name, var(--lpc-paper)); }

/* ---- phones ----
   Ollie's model: one photograph, copy laid over the empty top of it, and the
   whole thing inside a single screen. Everything here exists to make the copy
   short enough that it clears the cat's face rather than sitting on it.

   Measured on a 375x812 phone before this: stars, a three-line trust stack, a
   three-line headline, a three-line paragraph, a 60px button and three ticks
   came to roughly 500px of copy against about 300px of empty ochre above the
   cat. The ticks are the part that does not fit, so on a phone they go — they
   repeat what the trust row above already says, and they return at 750px. */
@media (max-width: 749px) {
  /* Shorter. At 92svh the bottom third was cat chest with nothing happening in
     it, which is what read as "far too long" — a hero should end where the
     picture stops earning its space. */
  .lpc-lick { min-height: 82svh; }
  .lpc-lick__inner { align-items: start; padding-top: clamp(1.25rem, 4vw, 2rem); }

  .lpc-lick__ticks { display: none; }

  .lpc-lick__stars { font-size: 0.8125rem; margin-bottom: 0.4rem; }
  .lpc-lick__stars .lpc-stars__icons { font-size: 0.9375rem; }

  /* Trim the chest so the whole face clears the copy.

     On a phone, cover crops the 4:5 art HORIZONTALLY only — the band shows the
     file top to bottom, chest included, which parked the eyes at 48% of the
     band, exactly under where the copy ends (47%). No object-position value can
     move them: there is no vertical spare to shift.

     So the image is drawn TALLER than the band (100/(100-trim)), pinned to the
     top, and the section's own overflow: hidden clips what hangs below — the
     chest. At the default 25% trim the eyes land at 64% of the band, clear of
     the wash, and what got cut is the part George named: the lower-down Louis
     portion that did not need to extend that low. */
  .lpc-lick__img {
    height: var(--lpc-lick-zoom-m, 100%);
    bottom: auto;
  }

  /* Rating only on a phone.
     The other two lines are "Cooked in Sydney, delivered frozen" and "Free
     Sydney delivery, every order" — and the announcement bar directly above
     this already says FREE SYDNEY DELIVERY ON EVERY ORDER. Three stacked lines
     of 10px caps cost 48px, and 48px is the difference between the copy ending
     above the cat's eyes and ending across them. They are all still there from
     750px up, where there is room. */
  .lpc-lick__trust {
    display: block;
    font-size: 0.6875rem;
    margin-bottom: 0.85rem;
  }
  .lpc-lick__trust span + span { display: none; }

  .lpc-lick__head { font-size: 1.75rem; line-height: 1.05; }
  .lpc-lick__sub {
    font-size: 0.8125rem;
    line-height: 1.38;
    margin-top: 0.6rem;
    max-width: 20rem;
  }

  .lpc-lick__actions { margin-top: 0.95rem; }
  /* Smaller, but not below 44px. That minimum is a tap target, not a style
     choice, and it is checked on every control in this theme. */
  .lpc-lick__cta {
    min-height: 46px;
    padding: 0.6rem 1.4rem;
    font-size: 0.8125rem;
  }
}
@supports not (height: 1svh) {
  @media (max-width: 749px) { .lpc-lick { min-height: 82vh; } }
}
}

/* ============================================================
   LPC Trio / Pullquote / Tiers — the three blocks from George's
   louis-landing mockup, in the theme's own language. All selectors new
   (grepped before appending — appending to an already-styled selector is
   what killed the sticky gallery).
   ============================================================ */
.lpc-trio__head {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}
.lpc-trio__col {
  background: var(--lpc-cream);
  border-radius: 24px;
  padding: 1.8rem 1.6rem 2rem;
}
.lpc-trio__num {
  display: block;
  color: var(--lpc-chicken);
  margin-bottom: 0.8rem;
}
.lpc-trio__title {
  font-family: var(--heading-font-stack);
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.lpc-trio__text {
  font-family: var(--main-font-stack);
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.8;
  margin: 0;
}

/* ---- pullquote: ink panel, cream text ---- */
.lpc-pq {
  background: var(--lpc-ink);
  color: var(--lpc-cream);
}
.lpc-pq__grid { display: grid; gap: 2.5rem; }
.lpc-pq__eyebrow {
  color: var(--lpc-roo);
  display: block;
  margin-bottom: 1.1rem;
}
/* The one place the body italic earns its keep: a review in Bobby Jones caps
   would shout, and the wall renders review text in the body face too. */
.lpc-pq__quote {
  font-family: var(--main-font-stack);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.35;
  max-width: 26ch;
  margin: 0;
}
.lpc-pq__attrib {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin: 1.4rem 0 0;
}
.lpc-pq__stats { display: grid; gap: 1.6rem; align-content: end; }
.lpc-pq__stat b {
  display: block;
  font-family: var(--heading-font-stack);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--lpc-chicken);
}
.lpc-pq__stat span {
  display: block;
  font-family: var(--main-font-stack);
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 0.4rem;
  max-width: 24rem;
}
@media (min-width: 900px) {
  .lpc-pq__grid { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 3.5rem; }
}

/* ---- tiers ---- */
.lpc-tierc {
  position: relative;
  border: 2px solid rgba(18, 18, 18, 0.15);
  border-radius: 24px;
  padding: 1.7rem 1.5rem 1.8rem;
}
.lpc-tierc--featured {
  border-color: var(--lpc-ink);
  background: var(--lpc-cream);
}
.lpc-tierc__badge {
  position: absolute;
  top: -0.8rem;
  left: 1.3rem;
  background: var(--lpc-roo);
  color: var(--lpc-ink);
  font-family: var(--heading-font-stack);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.lpc-tierc__qty {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  opacity: 0.65;
}
.lpc-tierc__day {
  font-family: var(--heading-font-stack);
  font-size: 1.9rem;
  line-height: 1;
  margin: 0.6rem 0 0.2rem;
}
.lpc-tierc__day em {
  font-style: normal;
  font-family: var(--main-font-stack);
  font-size: 0.875rem;
  opacity: 0.7;
}
.lpc-tierc__total {
  font-family: var(--main-font-stack);
  font-size: 0.9rem;
  opacity: 0.75;
}
.lpc-tierc__line {
  font-family: var(--main-font-stack);
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 0.8;
  margin: 0.8rem 0 0;
}
.lpc-tiers__cta { margin-top: 1.8rem; }
.lpc-tiers__foot {
  font-family: var(--main-font-stack);
  font-size: 0.8125rem;
  opacity: 0.65;
  margin: 1.2rem 0 0;
  max-width: 46rem;
}

/* ============================================================
   LPC Page Hero + Signed Note. All selectors new (grepped first).
   ============================================================ */
.lpc-ph { overflow: hidden; }
.lpc-ph__grid {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.lpc-ph__head {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0;
  text-wrap: balance;
  max-width: 16ch;
}
.lpc-ph__sub {
  font-family: var(--main-font-stack);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.5;
  opacity: 0.82;
  margin: 0.9rem 0 0;
  max-width: 34rem;
}
.lpc-ph__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.3rem 0 0;
  padding: 0;
}
.lpc-ph__chips li {
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  /* currentColor at reduced strength, so the chips follow whichever scheme the
     hero wears — ink on paper, cream on the beef red — without a rule per scheme. */
  border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.lpc-ph__media { justify-self: center; width: min(100%, 21rem); }
@media (min-width: 900px) { .lpc-ph__media { width: min(100%, 30rem); } }
.lpc-ph__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}
/* Type-only heroes get the mascot peeking over the band's bottom edge,
   trimmed by the section's own overflow — the packaging gesture. */
.lpc-ph__peek {
  width: clamp(120px, 18vw, 190px);
  justify-self: end;
  align-self: end;
  margin-bottom: calc(-1 * clamp(2rem, 5vw, 4rem));
}
@media (min-width: 900px) {
  .lpc-ph__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; }
  .lpc-ph__grid--solo { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---- signed note ---- */
.lpc-note__wrap { display: grid; justify-items: center; }
.lpc-note {
  position: relative;
  background: var(--lpc-cream);
  border-radius: 6px;
  padding: 2.2rem 2rem 1.8rem;
  max-width: 33rem;
  transform: rotate(-1.2deg);
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.1);
}
.lpc-note__tag {
  position: absolute;
  top: -0.85rem;
  left: 1.6rem;
  transform: rotate(1.2deg);
  background: var(--lpc-ink);
  color: var(--lpc-cream);
  font-family: var(--heading-font-stack);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.lpc-note__body {
  font-family: var(--main-font-stack);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.lpc-note__body p { margin: 0 0 0.9rem; }
.lpc-note__body p:last-child { margin-bottom: 0; }
.lpc-note__sign {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--heading-font-stack);
  font-size: 1.5rem;
  transform: rotate(-1deg);
}
@media (prefers-reduced-motion: reduce) {
  .lpc-note, .lpc-note__tag, .lpc-note__sign { transform: none; }
}