/* PawPicks shared component styles.
   Loaded LAST in <head> on every article so it wins over per-page inline <style>.
   Anything in here is the single source of truth for a component's look —
   do not re-declare these rules inside an article again. */

/* ── FAQ accordion ───────────────────────────────────────────────
   Canonical markup:
     <div class="faq-item">
       <button type="button" class="faq-q" onclick="toggleFaq(this)" aria-expanded="false">
         Question text<span class="faq-icon" aria-hidden="true">+</span>
       </button>
       <div class="faq-a">Answer text</div>
     </div>
*/
.faq-item {
  border: 1.5px solid var(--gray-100, #f1f5f9);
  border-radius: var(--radius, 14px);
  margin-bottom: 1rem;
  overflow: hidden;
  background: #fff;
  padding: 0;
}

.faq-q {
  /* reset the <button> so it reads as content, not a form control */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: #fff;
  width: 100%;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--gray-900, #0f172a);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background .2s;
}

.faq-q:hover { background: var(--off-white, #f8faff); }
.faq-q:focus-visible { outline: 2px solid var(--pp-accent, #C47A0F); outline-offset: -2px; }

.faq-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pp-accent, #C47A0F);
  transition: transform .2s ease;
}

.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

.faq-a {
  padding: 0 1.2rem 1rem;
  font-size: .9rem;
  color: var(--gray-700, #334155);
  line-height: 1.8;
  display: none;
  margin: 0;
}

.faq-a.open { display: block; }

/* Never let a scroll-reveal animation strand a FAQ at opacity 0. */
.faq-item, .faq-section { opacity: 1 !important; }

/* ── Pinterest save pill ─────────────────────────────────────── */
.pp-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E60023;
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1.2rem;
  transition: background .2s, transform .2s;
}

.pp-pin-btn:hover { background: #ad081b; transform: translateY(-1px); }
.pp-pin-btn svg { flex-shrink: 0; }

/* ── Author / byline accent ──────────────────────────────────────
   Each article sets --pp-accent (and --pp-accent-soft) on :root to match
   its category. Everything accent-coloured reads from those two vars. */
.pp-author-card,
.author-box { border-left-color: var(--pp-accent, #C47A0F) !important; }

.pp-author-card a,
.author-box a { color: var(--pp-accent, #C47A0F); }

/* ── Article byline ──────────────────────────────────────────────
   Sits directly after the <h1>. Three variants, rotated across the site
   so pages vary without any single page looking inconsistent:

     <div class="pp-byline pp-byline--verified"> …  (trust: sourcing)
     <div class="pp-byline pp-byline--profile">  …  (trust: the person)
     <div class="pp-byline pp-byline--card">     …  (trust: prominence)

   Link colour is deliberately #9A5E08, not the brand #C47A0F: at this
   text size the brand amber measures ~3.4:1 on white and fails WCAG AA,
   which design-tokens.css documents in its own comment. The darker tone
   reads as the same colour family at 5.3:1. */
.pp-byline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500, #6B7280);
  margin: 0 0 22px;
}

.pp-byline a { color: #9A5E08; font-weight: 600; text-decoration: none; }
.pp-byline a:hover { text-decoration: underline; }
.pp-byline img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.pp-byline .pp-sep { opacity: .4; }
.pp-byline .pp-check { color: #15803D; font-weight: 600; white-space: nowrap; }

/* C2 — verified: states what the recommendation rests on */
.pp-byline--verified {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(26, 14, 6, .08);
}
.pp-byline--verified .pp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pp-byline--verified img { width: 32px; height: 32px; }
.pp-byline--verified .pp-verify {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 13px;
  color: #15803D;
  font-weight: 500;
}

/* C3 — profile: puts a person behind the recommendation */
.pp-byline--profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 14, 6, .08);
}
.pp-byline--profile img { width: 44px; height: 44px; }
.pp-byline--profile .pp-name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--gray-900, #1A0E06);
  letter-spacing: -.01em;
}
.pp-byline--profile .pp-name a { color: inherit; font-weight: 700; }
.pp-byline--profile .pp-role { font-weight: 400; color: var(--gray-500, #6B7280); font-size: 14px; }
.pp-byline--profile .pp-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
}

/* C5 — card: lifts the byline out of the text flow, in brand cream.
   Also the replacement for the hardcoded #f8faff author cards. */
.pp-byline--card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pp-accent-soft, #FFF9EE);
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(196, 122, 15, .14);
}
.pp-byline--card img { width: 40px; height: 40px; }
.pp-byline--card .pp-name { font-weight: 700; font-size: 15px; }
.pp-byline--card .pp-name a { color: var(--gray-900, #1A0E06); font-weight: 700; }
.pp-byline--card .pp-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
}

/* Never let a scroll-reveal animation strand a byline at opacity 0. */
.pp-byline { opacity: 1 !important; }

/* ── Contrast fix: table headers & rank badge ─────────────────────
   65 pages carry their own inline copy of `.comparison-table th {
   background: var(--blue); color: var(--white) }` (white on brand amber,
   ~3.4:1 — design-tokens.css documents that amber fails WCAG AA at this
   size). The `.product-rank.gold` badge is worse, ~2.15:1. Rather than
   editing 65 duplicated inline <style> blocks, override here — this
   file loads last, so !important wins regardless of the per-page copy.
   Dark ink on the same amber/gold background clears AA comfortably. */
.comparison-table th,
table th {
  background: #FFF0CC !important;
  color: #1A0E06 !important;
}
.product-rank.gold {
  background: #f59e0b !important;
  color: #1A0E06 !important;
}

@media (max-width: 600px) {
  /* theme.css raises mobile body copy to 16px via `p, li`; the byline is
     supporting text and stays deliberately below that. */
  .pp-byline { font-size: 13.5px !important; }
  .pp-byline--profile img { width: 40px; height: 40px; }
  .pp-byline--card { padding: 12px 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026-08-16 — sitewide fixes and the component layer.
   Everything below was proven on cheapest-place-to-buy-cat-litter.html
   before being lifted here. This file loads last, so these win over a
   page's own inline <style> without needing !important.
   ══════════════════════════════════════════════════════════════════ */

/* ── Anchor targets must clear the sticky nav ──────────────────────
   Without this a table-of-contents click scrolls the heading behind the
   header and reads as "the link does nothing". Was present on 1 of 33
   two-column pages. */
.article-content h2[id],
.article-content h3[id],
.article-content [id^="product"],
.article-content [id^="pick-"] { scroll-margin-top: 96px; }

/* ── Sidebar keeps one slim styled scrollbar ───────────────────────
   A tall sidebar with overflow-y:auto renders a second full-width system
   scrollbar right next to the page one. */
.sidebar {
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,122,15,.45) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(196,122,15,.35); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(196,122,15,.6); }
.toc-list {
  max-height: 46vh; overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(196,122,15,.45) transparent;
}
.toc-list::-webkit-scrollbar { width: 5px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb { background: rgba(196,122,15,.35); border-radius: 999px; }

/* ── CTA buttons must keep their label ─────────────────────────────
   `.article-content a` (0,1,1) outranks `.btn-amazon` (0,1,0), so inside an
   article the button text inherits the amber link colour and disappears
   against the amber hover background. This restores it for every existing
   button on the site. */
.article-content a.btn-amazon,
.article-content a.btn-zooplus,
.article-content a.cl-btn {
  text-decoration: none;
  border-bottom: 0;
}
.article-content a.btn-amazon { color: #fff; }
.article-content a.btn-amazon:hover { color: #fff; background: #a8640a; }
.article-content a.btn-zooplus { color: var(--pp-ink, #1a0e06); }
.article-content a.btn-zooplus:hover { color: var(--pp-cream, #fff9ee); }

/* ── Never scroll the page sideways ────────────────────────────────
   Wide tables scroll inside their own container instead. */
body { overflow-x: hidden; }
.article-content table { max-width: 100%; }

/* ── Product photo, the one component ──────────────────────────────
   Fifty product blocks shipped with a name, a verdict and an orange button
   and no picture at all: you could not see what you were being sold. There
   is one photo component so that a change to how a product looks lands on
   every page at once.

   `contain` rather than `cover` because a bag of dog food cropped to fill a
   square loses the brand on the front, which is the one thing a buyer scans
   for. The fixed box keeps rows aligned whatever shape the photo is. */
.pp-shot {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 1rem;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(26, 14, 6, .08);
  border-radius: 12px;
}

/* Beside a heading on pages built as heading + verdict + button, where a
   centred photo would push the text down the screen. */
.pp-shot-inline {
  float: right;
  margin: .15rem 0 .9rem 1.25rem;
}

/* On a phone the float would squeeze the verdict into a column two words
   wide, so the photo goes back to sitting on its own line. */
@media (max-width: 620px) {
  .pp-shot-inline {
    float: none;
    margin: 0 auto 1rem;
  }
}

/* ── The article column may not push the page sideways ─────────────
   A grid column declared `1fr` keeps `min-width: auto`, which means a single
   wide child (a comparison table set to nowrap, a long unbroken word) can
   force the whole column past the viewport. The page then scrolls sideways
   on a phone, which is where most of the traffic is.

   Measured on best-budget-cat-litter.html: the article column rendered 765px
   wide inside a 390px window, and every paragraph, list and heading inherited
   that width. `minmax(0, 1fr)` plus an explicit `min-width: 0` is the fix. */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout > *,
  .article-content,
  .sidebar { min-width: 0; }
}

/* A long URL or product code with no spaces in it is the other way a column
   gets forced open. Wrapping it is always better than a sideways page. */
.article-content p,
.article-content li,
.article-content td,
.article-content h1,
.article-content h2,
.article-content h3 { overflow-wrap: break-word; }

/* ── Navigation on the older pages ─────────────────────────────────
   Six pages predate the responsive template and carry no width media query
   at all, so their nav row stays on one line and pushes the page to 522px
   inside a 390px window. They have no menu button either, so hiding the nav
   would strand a phone visitor with no way to navigate. Wrapping keeps every
   link reachable and stops the overflow.

   On the newer pages this rule is inert: there the nav is already display:none
   below 900px and becomes the drop-down menu instead. */
@media (max-width: 900px) {
  .nav-links {
    flex-wrap: wrap;
    gap: .6rem 1.1rem;
    row-gap: .6rem;
  }
}

/* ── Star rating, rebuilt from measured numbers ────────────────────
   396 star widgets across 88 pages showed the reader nothing usable: 216 were
   empty and 95 rendered the single character "½", the leftover half-star from
   an edit that lost the whole stars. 197 of them told a screen reader "5 out
   of 5 stars", a number nobody had measured.

   Five glyphs are always rendered, filled or hollow, so a row of cards keeps
   its alignment whatever the score is. The count beside them is the honest
   part: 4.4 from six ratings and 4.4 from seventy thousand are not the same
   recommendation, and the reader deserves to see which one this is. */
.stars {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--pp-amber, #c47a0f);
  font-size: .95rem;
  letter-spacing: .04em;
  line-height: 1;
}
.stars-count {
  color: var(--pp-ink-60, rgba(26, 14, 6, .6));
  font-size: .78rem;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── Numbered check list ───────────────────────────────────────────
   Used where a passage says "check these four things" and then delivers them
   as four bolded paragraphs. Making it the list it already is gives the eye
   four anchors instead of one 414-word block. */
.pp-checks {
  margin: var(--pp-s5, 1.25rem) 0;
  padding-left: 1.4rem;
}
.pp-checks li {
  margin-bottom: var(--pp-s4, 1rem);
  padding-left: .35rem;
}
.pp-checks li strong { color: var(--pp-ink, #1a0e06); }

/* Small qualifier under a name in a comparison table, so "the value leader"
   sits with the brand instead of eating a column of its own. */
.cell-note {
  display: block;
  font-size: .82em;
  color: var(--pp-ink-60, rgba(26, 14, 6, .6));
  font-weight: 400;
}

/* ── At a glance ───────────────────────────────────────────────────
   Sits under a section heading and names, in one line each, the concerns the
   paragraphs below then explain. It exists to give the eye somewhere to land
   in a long stretch of prose, so it must never repeat the paragraphs: every
   line is the topic sentence of the paragraph it points at. */
.pp-glance {
  background: var(--pp-cream, #fff9ee);
  border: 1px solid rgba(196, 122, 15, .22);
  border-radius: 12px;
  padding: 1.1rem 1.3rem .9rem;
  margin: 1.2rem 0 1.6rem;
}
.pp-glance-title {
  font-weight: 700;
  color: var(--pp-ink, #1a0e06);
  margin: 0 0 .6rem;
  font-size: .95rem;
  letter-spacing: .01em;
}
.pp-glance ul { margin: 0; padding-left: 1.15rem; }
.pp-glance li { margin-bottom: .45rem; line-height: 1.6; }
.pp-glance li:last-child { margin-bottom: 0; }

/* ── Reader tools ──────────────────────────────────────────────────
   The four reusable tools (requirement C5). Behaviour lives in
   /pawpicks-tools.js, the markup contract in docs/tools-components.md.
   A page writes only markup: no page ever declares these rules again, and no
   page ships its own tool CSS or JS.

   Canonical markup:
     <div class="pp-tool" data-pp-tool="cost" data-checked="2026-08-16">
       <span data-tier="Budget" data-low="18" data-high="26" data-days="30"></span>
     </div>

   The layout is deliberately flex-wrap with min-width:0 on the fields. A fixed
   grid put a 2-column form inside a 390px column on 2026-08-16 and produced
   exactly the sideways scroll that P1 forbids. */
.pp-tool { margin: 1.6rem 0 2rem; }

.pp-tool-box {
  background: var(--pp-cream, #fff9ee);
  border: 1px solid rgba(196, 122, 15, .28);
  border-radius: var(--radius, 14px);
  padding: 1.2rem 1.3rem 1.3rem;
  max-width: 100%;
}

.pp-tool-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pp-ink, #1a0e06);
  margin: 0 0 .35rem;
}
.pp-tool-sub {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--gray-600, #475569);
  margin: 0 0 1rem;
}

.pp-tool-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  margin-bottom: 1rem;
}
.pp-tool-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 9.5rem;
  min-width: 0;               /* without this a long option name pushes the
                                 flex item wider than the article column */
}
.pp-tool-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-600, #475569);
}
.pp-tool-select,
.pp-tool-input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .92rem;
  padding: .55rem .7rem;
  border: 1.5px solid rgba(196, 122, 15, .35);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-900, #0f172a);
}
.pp-tool-select { padding-right: 1.6rem; background-image: none; }
.pp-tool-select:focus-visible,
.pp-tool-input:focus-visible {
  outline: 2px solid var(--pp-accent, #C47A0F);
  outline-offset: 1px;
}

.pp-tool-out {
  border-top: 1px solid rgba(196, 122, 15, .22);
  padding-top: .9rem;
}
.pp-tool-big {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pp-accent, #C47A0F);
  margin: 0 0 .45rem;
  overflow-wrap: break-word;
}
.pp-tool-note {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--gray-700, #334155);
  margin: 0 0 .5rem;
}
.pp-tool-note:last-child { margin-bottom: 0; }
.pp-tool-stamp {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--gray-600, #475569);
  margin: .6rem 0 0;
}
.pp-tool-out .btn-amazon { margin-top: .5rem; display: inline-block; }

/* A tool that found no usable data hides itself in JS. This is the belt to
   that braces: an unrendered tool must never show as an empty box. */
.pp-tool:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════
   Mobiele koopbalk — 2026-09-02
   ------------------------------------------------------------------
   Gemeten met `python audits/mobile_first_buy.py` op 390x844: van de 73
   artikelpagina's moesten er 71 meer dan een heel scherm scrollen voor de
   eerste koopknop, mediaan 2,36 schermen, en 27 pagina's meer dan drie.
   Dat is de omzetrij van het scorebord: wie afhaakt voor de eerste knop
   kan niet klikken, hoe goed de pagina verder ook is.

   De balk dupliceert geen inhoud. Hij wijst naar de EERSTE affiliate-link
   die de pagina zelf al heeft (de #1-keuze), en hij verbergt zichzelf zodra
   een echte koopknop in beeld staat, zodat er nooit twee CTA's tegelijk
   zijn. Alleen onder 768px; op een desktop is het probleem er niet.

   De klik gaat door dezelfde gedelegeerde listener in tracking.js als elke
   andere affiliate-link - geen tweede handler, zoals CLAUDE.md voorschrijft.
   ══════════════════════════════════════════════════════════════════ */
.pp-buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-top: 1px solid #E8E2D9;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
  transform: translateY(110%);
  transition: transform .22s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.pp-buybar[data-shown="1"] { transform: translateY(0); }

.pp-buybar__text { flex: 1 1 auto; min-width: 0; }
.pp-buybar__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1A0E06;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Een regel, altijd. Een prijszin als "Price range: $45-$70 (3-month supply)"
   liep over drie regels en plakte tegen de onderrand van het scherm
   (gemeten op 390px, best-flea-treatment, 2026-09-02). Afkappen met een
   beletselteken is netter dan een balk die blijft groeien. */
.pp-buybar__meta {
  display: block;
  font-size: 11px;
  color: #7A6A57;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-buybar__ad {
  display: inline-block;
  border: 1px solid #C9BCA8;
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 5px;
  font-size: 10px;
  letter-spacing: .04em;
  color: #7A6A57;
}
.pp-buybar__cta {
  flex: 0 0 auto;
  background: #ff9900;
  color: #1A0E06;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 50px;
  white-space: nowrap;
}
.pp-buybar__cta:hover,
.article-content a.pp-buybar__cta { color: #1A0E06; }
.pp-buybar__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #9A8B78;
  font-size: 20px;
  line-height: 1;
  padding: 6px 2px 6px 4px;
  cursor: pointer;
}
/* De hoogte wordt door tracking.js gemeten en in --pp-buybar-h gezet: een
   productnaam van twee regels maakt de balk hoger dan de 74px die hier
   als terugval staat, en dan zou de balk de onderkant van de footer
   afsnijden. */
body[data-buybar="1"] { padding-bottom: var(--pp-buybar-h, 74px); }

@media (min-width: 769px) { .pp-buybar { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   Vroege #1-keuze (.pp-pick) — 2026-09-02
   ------------------------------------------------------------------
   audits/mobile_first_buy.py mat dat op 65 van de 73 gidsen de eerste
   koopknop meer dan anderhalf scherm onder de vouw staat. Op zo'n pagina
   krijgt een mobiele lezer vlak na de intro een compact blok met de
   #1-keuze: naam, sterren, prijs en verdict komen letterlijk uit de eerste
   .product-card op de pagina, de knop is dezelfde merchant-link als in die
   kaart. Er wordt dus geen cijfer of bewering verzonnen — alles is hergebruik.

   De knop van dit blok is een echte merchant-link, dus de koopbalk
   (.pp-buybar) observeert hem en schuift weg zolang hij in beeld staat:
   nooit twee CTA's tegelijk. Alleen onder 768px, want op een desktop is het
   probleem er niet; de markup wordt alleen door tracking.js ingebracht.
   ══════════════════════════════════════════════════════════════════ */
.pp-pick {
  background: var(--pp-cream, #fff9ee);
  border: 1px solid rgba(196, 122, 15, .35);
  border-left: 4px solid var(--pp-amber, #c47a0f);
  border-radius: 12px;
  padding: .85rem 1rem 1rem;
  margin: 1.3rem 0 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.pp-pick__rank {
  display: inline-block;
  background: #f59e0b;
  color: #1a0e06;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: .45rem;
}
.pp-pick__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--pp-ink, #1a0e06);
  line-height: 1.3;
}
.pp-pick__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .9rem;
  margin: .4rem 0 .5rem;
  font-size: .8rem;
  color: var(--pp-ink-60, rgba(26, 14, 6, .65));
}
.pp-pick__stars .stars { color: var(--pp-amber, #c47a0f); }
.pp-pick__verdict {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--pp-ink-80, rgba(26, 14, 6, .8));
  margin: 0 0 .6rem;
}
.pp-pick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.pp-pick__ad {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-ink-60, rgba(26, 14, 6, .6));
  border: 1px solid rgba(26, 14, 6, .3);
  border-radius: 4px;
  padding: 2px 6px;
}
.pp-pick__cta {
  display: inline-block;
  background: #ff9900;
  color: #1a0e06;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 0;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  white-space: nowrap;
}
.article-content a.pp-pick__cta:hover { color: #1a0e06; background: #e58d00; }
@media (min-width: 769px) { .pp-pick { display: none; } }
