/* ============================================================================
   DOVELYNE COMPONENT LAYER  (Foxiz child)

   Foxiz owns the chrome: header, navigation, breadcrumbs, archive headers,
   footer, pagination and the responsive grid. This file adds only what Foxiz
   has no concept of, because it is specific to how Dovelyne publishes:

     evidence and "how we checked this"     product cards and price states
     affiliate and sponsorship disclosure   comparison tables
     scope limitations                      best-for badges
     staging watermarks                     newsletter capture
     pillar and subcategory navigation      reserved ad slots

   The brand tokens are declared here and consumed by both layers, so Foxiz
   components and Dovelyne components read as one design rather than two.

   Nothing in the Foxiz parent theme is modified. Nothing here duplicates
   business logic: every component is rendered by the Dovelyne Core mu-plugin
   and only styled here.
   ========================================================================== */


/* == tokens + reset essentials =================================== */
/* ============================================================================
   DOVELYNE DESIGN SYSTEM
   One stylesheet, no framework, no webfont request. Tokens are declared once
   here and mirrored into theme.json so the block editor and the front end
   cannot drift apart.

   The --uw-* token names and the uw- class prefix are deliberately unchanged.
   They are internal identifiers, and renaming several hundred of them across
   templates to match a public brand would be pure churn with real breakage
   risk and nothing visible to show for it. The VALUES are what carry the brand.
   ========================================================================== */

:root {
  /* colour ------------------------------------------------------------- */
  /* Warm paper base, a calm deep teal for trust, one warm clay accent for
     warmth. No pink, no primary-bright, nothing childish. The accent appears
     sparingly: calls to action, best-for badges, the focus ring. */
  /* Aligned to the Dovelyne dove mark: sage upper wing, blue-clay middle wing,
     warm-clay lower wing, cream body, near-black wordmark. The logo colours are
     brand accents, not a paint scheme: sage carries navigation and trust,
     blue-clay marks paid relationships and data, clay is reserved for action. */
  --uw-ink:            #17150f;   /* near black, wordmark and headings */
  --uw-body:           #46403a;
  --uw-muted:          #6f675c;
  --uw-brand:          #617150;   /* sage green, primary */
  --uw-brand-dark:     #4f5f40;
  --uw-brand-soft:     #e9ede3;
  --uw-secondary:      #526b7b;   /* blue-clay, secondary */
  --uw-secondary-dark: #3f5765;
  --uw-secondary-soft: #e6ebee;
  --uw-accent:         #a85c33;   /* warm clay, action only */
  --uw-accent-dark:    #8d4a26;
  --uw-accent-soft:    #f7ebe1;
  --uw-sand:           #faf6ee;   /* warm cream paper */
  --uw-surface:        #ffffff;
  --uw-line:           #eae3d6;
  --uw-line-strong:    #c9c0b3;
  --uw-ok:             #2a6a4f;
  --uw-warn:           #7d5100;
  --uw-warn-soft:      #fdf3e0;
  --uw-alert:          #9c3220;
  --uw-alert-soft:     #fbeae6;

  /* type ---------------------------------------------------------------- */
  --uw-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --uw-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --uw-fs-xs:   0.8125rem;
  --uw-fs-sm:   0.9375rem;
  --uw-fs-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --uw-fs-lg:   clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --uw-fs-xl:   clamp(1.35rem, 1.25rem + 0.45vw, 1.6rem);
  --uw-fs-2xl:  clamp(1.65rem, 1.45rem + 0.9vw, 2.1rem);
  --uw-fs-3xl:  clamp(2rem, 1.6rem + 1.8vw, 2.9rem);

  /* space ---------------------------------------------------------------- */
  --uw-s1: 0.5rem;  --uw-s2: 0.75rem; --uw-s3: 1rem;
  --uw-s4: 1.5rem;  --uw-s5: 2rem;    --uw-s6: 3rem;  --uw-s7: 4.5rem;

  /* structure ------------------------------------------------------------ */
  /* Rounded but restrained: enough softness to read as a lifestyle title,
     not so much that cards look like app tiles. */
  --uw-content: 43rem;
  --uw-wide:    72rem;
  --uw-gutter:  clamp(1.15rem, 4.5vw, 2.5rem);
  --uw-radius:  14px;
  --uw-radius-sm: 9px;
  --uw-shadow:    0 1px 2px rgba(29,26,22,.04), 0 8px 24px -14px rgba(29,26,22,.20);
  --uw-shadow-lg: 0 2px 4px rgba(29,26,22,.04), 0 22px 48px -22px rgba(29,26,22,.26);
  --uw-tap: 44px;
}


/* == layout helpers the Dovelyne homepage uses =================== */
/* -------------------------------------------------------------- layout ---- */
.uw-wrap { width: 100%; max-width: var(--uw-wide); margin-inline: auto; padding-inline: var(--uw-gutter); }
.uw-wrap--narrow { max-width: var(--uw-content); }
/* Generous vertical rhythm. A lifestyle title breathes; a magazine crams. */
.uw-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.uw-section--tight { padding-block: var(--uw-s5); }
.uw-section--tint { background: var(--uw-surface); border-block: 1px solid var(--uw-line); }
.uw-stack > * + * { margin-top: var(--uw-s4); }
/* Hidden by moving it UP, never sideways. left:-9999px makes the document
   9999px wide and gives every desktop page a horizontal scrollbar. */
.uw-skip {
  position: absolute; left: 0; top: 0; z-index: 999;
  transform: translateY(-110%);
  background: var(--uw-ink); color: #fff; padding: .75rem 1rem; border-radius: 0 0 var(--uw-radius-sm) 0;
}
.uw-skip:focus { transform: translateY(0); color: #fff; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}

.uw-grid { display: grid; gap: var(--uw-s4); }
.uw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.uw-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.uw-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }

/* section heading ---------------------------------------------------------- */
/* A hairline under the section title gives the page an editorial spine and
   makes nine stacked pillar sections readable as a sequence, not a pile. */
.uw-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--uw-s3); margin-bottom: var(--uw-s5); flex-wrap: wrap;
  padding-bottom: var(--uw-s3); border-bottom: 1px solid var(--uw-line);
}
.uw-sec-head h2 { margin: 0; font-size: var(--uw-fs-2xl); }
.uw-sec-head__more { font-size: var(--uw-fs-sm); font-weight: 600; white-space: nowrap; color: var(--uw-brand); }
.uw-sec-head__intro { flex: 1 1 100%; margin: .35rem 0 0; font-size: var(--uw-fs-sm); color: var(--uw-muted); max-width: 62ch; }
.uw-eyebrow {
  font-family: var(--uw-sans); font-size: var(--uw-fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--uw-accent-dark); margin: 0 0 var(--uw-s1);
}

/* ------------------------------------------------------------- buttons ---- */
.uw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--uw-tap); padding: .6rem 1.25rem;
  font: 600 var(--uw-fs-sm)/1.2 var(--uw-sans);
  border: 1px solid transparent; border-radius: var(--uw-radius-sm);
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.uw-btn--primary   { background: var(--uw-brand); color: #fff; }
.uw-btn--primary:hover { background: var(--uw-brand-dark); color: #fff; }
.uw-btn--cta       { background: var(--uw-accent); color: #fff; }
.uw-btn--cta:hover { background: var(--uw-accent-dark); color: #fff; }
.uw-btn--ghost     { background: transparent; color: var(--uw-brand); border-color: var(--uw-line-strong); }
.uw-btn--ghost:hover { background: var(--uw-brand-soft); }
.uw-btn--block     { width: 100%; }


/* == buttons ===================================================== */
/* ------------------------------------------------------------- buttons ---- */
.uw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--uw-tap); padding: .6rem 1.25rem;
  font: 600 var(--uw-fs-sm)/1.2 var(--uw-sans);
  border: 1px solid transparent; border-radius: var(--uw-radius-sm);
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.uw-btn--primary   { background: var(--uw-brand); color: #fff; }
.uw-btn--primary:hover { background: var(--uw-brand-dark); color: #fff; }
.uw-btn--cta       { background: var(--uw-accent); color: #fff; }
.uw-btn--cta:hover { background: var(--uw-accent-dark); color: #fff; }
.uw-btn--ghost     { background: transparent; color: var(--uw-brand); border-color: var(--uw-line-strong); }
.uw-btn--ghost:hover { background: var(--uw-brand-soft); }
.uw-btn--block     { width: 100%; }


/* == category cards ============================================== */
/* ------------------------------------------------------- category cards ---- */
.uw-pillar {
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 100%; padding: var(--uw-s4);
  background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: var(--uw-radius);
  text-decoration: none; color: var(--uw-ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.uw-pillar:hover { border-color: transparent; box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); color: var(--uw-ink); }
.uw-pillar__icon { width: 30px; height: 30px; color: var(--uw-brand); margin-bottom: .35rem; }
.uw-pillar__name { font-family: var(--uw-serif); font-size: var(--uw-fs-lg); font-weight: 600; }
.uw-pillar__desc { font-size: var(--uw-fs-sm); color: var(--uw-muted); line-height: 1.5; }
.uw-pillar__count { margin-top: auto; padding-top: var(--uw-s2); font-size: var(--uw-fs-xs); color: var(--uw-muted); }

/* subcategory chips: the piece that lets 39 grow past 60 without a redesign */
.uw-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--uw-s4); padding: 0; }
.uw-chips a {
  display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .75rem;
  background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: 999px;
  font-size: var(--uw-fs-sm); color: var(--uw-body); text-decoration: none;
}
.uw-chips a:hover { border-color: var(--uw-brand); background: var(--uw-brand-soft); color: var(--uw-brand-dark); }
.uw-chips a[aria-current="page"] { background: var(--uw-brand); border-color: var(--uw-brand); color: #fff; }
.uw-chips__count { color: var(--uw-muted); font-size: var(--uw-fs-xs); margin-left: .35rem; }

/* On a phone a pillar with eighteen subcategories turns its chip list into six
   stacked rows, and nine of those push the last sections thousands of pixels
   down the page. The first eight are kept as a taste of the topic; the section
   heading already links to the archive, where the full list lives. Nothing is
   removed on tablet or desktop, and nothing is removed from the archive page. */
@media (max-width: 700px) {
  .uw-chips li:nth-child(n+9) { display: none; }
}
/* The archive page is the place to see every topic, so never trim it there. */
.uw-archive-head + .uw-wrap .uw-chips li { display: list-item; }

/* Same reasoning for the cards. Nine pillar sections at three stacked cards
   each is a homepage nobody scrolls to the end of on a phone, so each pillar
   shows two on mobile and its "See all" link carries the rest. The selector is
   scoped to pillar sections by their heading id, so the editorial rows above
   and below, which are the reason to visit, keep all of theirs. */
@media (max-width: 700px) {
  section[aria-labelledby^="uw-p-"] .uw-grid > *:nth-child(n+3) { display: none; }
}
.uw-chips a[aria-current="page"] .uw-chips__count { color: #d3dcc8; }


/* == article cards =============================================== */
/* --------------------------------------------------------- article cards --- */
/* Photography-forward: the image is the card, the border is almost absent, and
   the lift on hover is a shadow rather than a colour change. */
.uw-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: var(--uw-radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.uw-card:hover { border-color: transparent; box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); }
.uw-card__media { display: block; aspect-ratio: 16 / 10; background: var(--uw-brand-soft); overflow: hidden; }
.uw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.uw-card:hover .uw-card__media img { transform: scale(1.03); }
.uw-card__body { display: flex; flex-direction: column; gap: .45rem; padding: var(--uw-s4) var(--uw-s4) var(--uw-s4); flex: 1; }
.uw-card__kicker { font-size: var(--uw-fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--uw-accent-dark); text-decoration: none; }
.uw-card__kicker:hover { text-decoration: underline; }
.uw-card__title { font-family: var(--uw-serif); font-size: var(--uw-fs-lg); line-height: 1.3; margin: 0; }
.uw-card__title a { color: var(--uw-ink); text-decoration: none; }
.uw-card__title a:hover { color: var(--uw-brand); text-decoration: underline; }
.uw-card__excerpt { font-size: var(--uw-fs-sm); color: var(--uw-muted); margin: 0; }
.uw-card__meta { margin-top: auto; padding-top: var(--uw-s2); font-size: var(--uw-fs-xs); color: var(--uw-muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.uw-card--lead .uw-card__title { font-size: var(--uw-fs-2xl); }
.uw-card--wide { flex-direction: row; align-items: stretch; }
.uw-card--wide .uw-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 640px) { .uw-card--wide { flex-direction: column; } .uw-card--wide .uw-card__media { flex: none; aspect-ratio: 16/9; } }

/* compact list, used for latest and related --------------------------------- */
.uw-list { list-style: none; margin: 0; padding: 0; }
.uw-list li { border-bottom: 1px solid var(--uw-line); }
.uw-list li:last-child { border-bottom: 0; }
.uw-list a { display: block; min-height: var(--uw-tap); padding: .7rem 0; color: var(--uw-ink); text-decoration: none; font-weight: 550; line-height: 1.4; }
.uw-list a:hover { color: var(--uw-brand); }
.uw-list span { display: block; font-size: var(--uw-fs-xs); font-weight: 400; color: var(--uw-muted); margin-top: .15rem; }


/* == article furniture =========================================== */
/* ------------------------------------------------------------- article ----- */
.uw-article { background: var(--uw-surface); border-bottom: 1px solid var(--uw-line); }
.uw-article__head { padding-block: var(--uw-s5) var(--uw-s4); }
.uw-article__head h1 { max-width: 22ch; }
.uw-article__standfirst { font-size: var(--uw-fs-lg); color: var(--uw-muted); max-width: 58ch; margin-bottom: var(--uw-s4); }
.uw-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--uw-s3); font-size: var(--uw-fs-xs); color: var(--uw-muted); padding-block: var(--uw-s3); border-block: 1px solid var(--uw-line); }
.uw-byline strong { color: var(--uw-ink); font-weight: 650; }
.uw-byline__sep { color: var(--uw-line-strong); }
.uw-figure { margin: 0 0 var(--uw-s5); }
.uw-figure img { width: 100%; border-radius: var(--uw-radius); }
.uw-figure figcaption { font-size: var(--uw-fs-xs); color: var(--uw-muted); padding-top: .5rem; }

.uw-prose { max-width: var(--uw-content); }
.uw-prose > * { max-width: 100%; }
.uw-prose h2 { margin-top: var(--uw-s6); scroll-margin-top: 5rem; }
.uw-prose h3 { margin-top: var(--uw-s5); scroll-margin-top: 5rem; }
.uw-prose ul, .uw-prose ol { padding-left: 1.25rem; }
.uw-prose li { margin-bottom: .4rem; }
.uw-prose li::marker { color: var(--uw-brand); }
.uw-prose blockquote {
  margin: var(--uw-s5) 0; padding: var(--uw-s3) var(--uw-s4);
  border-left: 3px solid var(--uw-accent); background: var(--uw-accent-soft);
  border-radius: 0 var(--uw-radius-sm) var(--uw-radius-sm) 0; font-size: var(--uw-fs-lg); font-family: var(--uw-serif);
}
.uw-prose blockquote p:last-child { margin-bottom: 0; }
.uw-prose code { background: var(--uw-brand-soft); padding: .1em .35em; border-radius: 3px; font-size: .9em; }
.uw-prose > table { width: 100%; }

/* tables must stay usable on a phone --------------------------------------- */
.uw-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--uw-s5); border: 1px solid var(--uw-line); border-radius: var(--uw-radius); background: var(--uw-surface); }
.uw-tablewrap table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--uw-fs-sm); margin: 0; }
.uw-tablewrap th, .uw-tablewrap td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--uw-line); vertical-align: top; }
.uw-tablewrap thead th { background: var(--uw-secondary-soft); color: var(--uw-secondary-dark); font-weight: 650; }
.uw-tablewrap tbody tr:last-child td { border-bottom: 0; }
.uw-scrollhint { font-size: var(--uw-fs-xs); color: var(--uw-muted); margin: -1rem 0 var(--uw-s5); }
@media (min-width: 700px) { .uw-scrollhint { display: none; } }

/* table of contents -------------------------------------------------------- */
.uw-toc { background: var(--uw-sand); border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: var(--uw-s3) var(--uw-s4); margin-bottom: var(--uw-s5); }
.uw-toc > summary { font-weight: 650; color: var(--uw-ink); cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.uw-toc ol { margin: var(--uw-s2) 0 0; padding-left: 1.2rem; font-size: var(--uw-fs-sm); }
.uw-toc li { margin-bottom: .3rem; }


/* == trust and info blocks ======================================= */
/* ---------------------------------------------------- trust / info blocks -- */
.uw-note { border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: var(--uw-s3) var(--uw-s4); margin: 0 0 var(--uw-s5); background: var(--uw-surface); }
.uw-note__title { display: flex; align-items: center; gap: .5rem; font: 650 var(--uw-fs-sm)/1.3 var(--uw-sans); color: var(--uw-ink); margin: 0 0 .4rem; }
.uw-note__title svg { width: 18px; height: 18px; flex: none; }
.uw-note p:last-child, .uw-note ul:last-child { margin-bottom: 0; }
.uw-note p, .uw-note li { font-size: var(--uw-fs-sm); }

.uw-disclosure { background: var(--uw-accent-soft); border-color: #ecd6c4; }
.uw-disclosure .uw-note__title { color: var(--uw-accent-dark); }
.uw-safety   { background: var(--uw-warn-soft); border-color: #e8d3a2; }
.uw-safety .uw-note__title { color: var(--uw-warn); }
.uw-safety--red { background: var(--uw-alert-soft); border-color: #f0c8bf; }
.uw-safety--red .uw-note__title { color: var(--uw-alert); }
.uw-sponsored { background: var(--uw-secondary-soft); border-color: #cdd8de; }

.uw-evidence { background: var(--uw-brand-soft); border: 1px solid #cfd8c4; border-radius: var(--uw-radius); padding: var(--uw-s4); margin: var(--uw-s5) 0; }
.uw-evidence h2 { font-size: var(--uw-fs-lg); margin: 0 0 .5rem; }
.uw-evidence p { font-size: var(--uw-fs-sm); margin-bottom: .5rem; }
.uw-badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem;
  background: var(--uw-surface); border: 1px solid #cfd8c4; border-radius: 999px;
  font: 650 var(--uw-fs-xs)/1.7 var(--uw-sans); color: var(--uw-brand-dark);
}
.uw-sources { list-style: none; margin: .5rem 0 0; padding: 0; font-size: var(--uw-fs-sm); }
.uw-sources li { padding: .35rem 0; border-top: 1px solid #cfd8c4; }
.uw-retrieved, .uw-verified { color: var(--uw-muted); font-size: var(--uw-fs-xs); }
.uw-source-claim { display: block; color: var(--uw-muted); font-size: var(--uw-fs-xs); }
.uw-source-name { font-weight: 550; color: var(--uw-ink); }
.uw-source-note { color: var(--uw-muted); font-size: var(--uw-fs-xs); font-style: italic; }


/* == products ==================================================== */
/* ------------------------------------------------------------- products ---- */
.uw-product {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--uw-s4);
  background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: var(--uw-radius);
  padding: var(--uw-s4); margin: 0 0 var(--uw-s4);
}
@media (max-width: 560px) { .uw-product { grid-template-columns: 1fr; gap: var(--uw-s3); } }
.uw-product__media { aspect-ratio: 1; background: var(--uw-sand); border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); overflow: hidden; display: grid; place-items: center; }
.uw-product__media img { width: 100%; height: 100%; object-fit: contain; }
.uw-product__media--empty { color: var(--uw-line-strong); font-size: var(--uw-fs-xs); text-align: center; padding: .5rem; }
@media (max-width: 560px) { .uw-product__media { max-width: 9rem; aspect-ratio: 1; } }
.uw-product__rank { font: 700 var(--uw-fs-xs)/1 var(--uw-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--uw-muted); }
.uw-product__name { font-family: var(--uw-serif); font-size: var(--uw-fs-lg); margin: .15rem 0 .3rem; color: var(--uw-ink); }
.uw-product__brand { font: 500 var(--uw-fs-xs)/1 var(--uw-sans); color: var(--uw-muted); }
.uw-bestfor {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; margin-bottom: .5rem;
  background: var(--uw-accent-soft); color: var(--uw-accent-dark); border-radius: 999px;
  font: 650 var(--uw-fs-xs)/1.7 var(--uw-sans);
}
.uw-product__why { font-size: var(--uw-fs-sm); margin-bottom: var(--uw-s2); }
.uw-product__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uw-s2) var(--uw-s3); margin-top: var(--uw-s2); padding-top: var(--uw-s2); border-top: 1px solid var(--uw-line); }
.uw-price { font: 650 var(--uw-fs-base)/1.2 var(--uw-sans); color: var(--uw-ink); }
.uw-price--band, .uw-price--hidden { font-weight: 550; color: var(--uw-muted); font-size: var(--uw-fs-sm); }
.uw-price-date, .uw-checked { display: block; font: 400 var(--uw-fs-xs)/1.4 var(--uw-sans); color: var(--uw-muted); }
.uw-stock { font-size: var(--uw-fs-xs); font-weight: 650; }
.uw-stock--in_stock { color: var(--uw-ok); }
.uw-stock--low_stock, .uw-stock--unknown { color: var(--uw-warn); }
.uw-stock--out_of_stock, .uw-stock--discontinued { color: var(--uw-alert); }
.uw-product--unavailable { background: var(--uw-sand); }
.uw-product__cta { margin-left: auto; }
@media (max-width: 560px) { .uw-product__cta { margin-left: 0; width: 100%; } .uw-product__cta .uw-btn { width: 100%; } }
.uw-retailer { font-size: var(--uw-fs-xs); color: var(--uw-muted); }

/* pros and cons ------------------------------------------------------------ */
.uw-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uw-s3); margin: var(--uw-s3) 0; }
@media (max-width: 560px) { .uw-proscons { grid-template-columns: 1fr; } }
.uw-proscons > div { border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); padding: var(--uw-s3); background: var(--uw-sand); }
.uw-proscons h4 { font-size: var(--uw-fs-sm); margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.uw-proscons ul { list-style: none; margin: 0; padding: 0; font-size: var(--uw-fs-sm); }
.uw-proscons li { position: relative; padding-left: 1.25rem; margin-bottom: .35rem; line-height: 1.5; }
.uw-proscons li::before { position: absolute; left: 0; font-weight: 700; }
.uw-pros h4 { color: var(--uw-ok); }
.uw-pros li::before { content: "+"; color: var(--uw-ok); }
.uw-cons h4 { color: var(--uw-alert); }
.uw-cons li::before { content: "\2212"; color: var(--uw-alert); }

/* comparison --------------------------------------------------------------- */
.uw-compare { margin: 0 0 var(--uw-s5); }
.uw-compare th:first-child, .uw-compare td:first-child { position: sticky; left: 0; background: var(--uw-surface); border-right: 1px solid var(--uw-line); font-weight: 650; }
.uw-compare thead th:first-child { background: var(--uw-secondary-soft); z-index: 2; }
.uw-compare__pick { display: block; font: 650 var(--uw-fs-xs)/1.4 var(--uw-sans); color: var(--uw-accent-dark); margin-top: .2rem; }

/* staging watermark: an unverified record must never read as a real claim --- */
.uw-staging {
  display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; margin-bottom: .4rem;
  background: repeating-linear-gradient(45deg, #fdf2da, #fdf2da 6px, #f7e8c9 6px, #f7e8c9 12px);
  border: 1px dashed #b8892a; border-radius: var(--uw-radius-sm);
  font: 700 10px/1.7 var(--uw-sans); letter-spacing: .1em; text-transform: uppercase; color: #6b4900;
}
.uw-staging-banner {
  background: #fdf2da; border-bottom: 1px solid #e8d3a2; color: #6b4900;
  font-size: var(--uw-fs-xs); text-align: center; padding: .4rem var(--uw-gutter);
}


/* == newsletter ================================================== */
/* ---------------------------------------------------------- newsletter ----- */
.uw-news {
  background: var(--uw-brand-dark); color: #fff; border-radius: var(--uw-radius);
  padding: var(--uw-s5); margin: var(--uw-s5) 0;
}
.uw-news--full { border-radius: 0; margin: 0; }
.uw-news h2, .uw-news h3 { color: #fff; margin-bottom: .4rem; }
.uw-news p { color: #e4ead9; font-size: var(--uw-fs-sm); max-width: 52ch; margin-bottom: 0; }
.uw-news__form { display: flex; flex-wrap: wrap; gap: var(--uw-s2); margin-top: var(--uw-s3); max-width: 32rem; }
.uw-news__form label { flex: 1 1 14rem; }
.uw-news__form input[type="email"] {
  width: 100%; min-height: var(--uw-tap); padding: .5rem .8rem;
  border: 1px solid #6b7a59; border-radius: var(--uw-radius-sm); font: inherit; font-size: var(--uw-fs-sm);
  background: #3e4b34; color: #fff;
}
.uw-news__form input[type="email"]::placeholder { color: #bdcbaf; }
.uw-news__form input[type="email"]:focus-visible { outline-color: #fff; }
.uw-news__note { font-size: var(--uw-fs-xs); color: #cfd9bf; margin: var(--uw-s2) 0 0; }
.uw-news .uw-btn--cta { flex: none; }
.uw-hp { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--uw-s5); align-items: center; }
@media (max-width: 820px) { .uw-hp { grid-template-columns: 1fr; } }
.uw-hp__art { background: #3e4b34; border: 1px solid #6b7a59; border-radius: var(--uw-radius); padding: var(--uw-s4); }
.uw-hp__art ul { list-style: none; margin: 0; padding: 0; font-size: var(--uw-fs-sm); color: #e4ead9; }
.uw-hp__art li { display: flex; gap: .5rem; padding: .35rem 0; align-items: flex-start; }
.uw-hp__art li::before { content: "\2713"; color: #cfd9bf; font-weight: 700; }


/* == ad slots ==================================================== */
/* ------------------------------------------------------------ ad slots ----- */
/* Reserved, measured, and empty. Nothing renders until a real network is wired,
   but the space is held so adding one later does not reflow the page. */
.uw-ad { display: block; margin: var(--uw-s5) auto; text-align: center; }
.uw-ad::before { content: "Advertisement"; display: block; font: 400 10px/1.6 var(--uw-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--uw-line-strong); margin-bottom: .25rem; }
.uw-ad__frame { background: var(--uw-surface); border: 1px dashed var(--uw-line); border-radius: var(--uw-radius-sm); display: grid; place-items: center; color: var(--uw-line-strong); font-size: var(--uw-fs-xs); }
.uw-ad--leader .uw-ad__frame  { min-height: 90px;  max-width: 728px; margin-inline: auto; }
.uw-ad--inline .uw-ad__frame  { min-height: 250px; max-width: 336px; margin-inline: auto; }
.uw-ad--rail .uw-ad__frame    { min-height: 600px; max-width: 300px; }
@media (max-width: 780px) { .uw-ad--leader .uw-ad__frame { min-height: 100px; max-width: 320px; } }
body:not(.uw-ads-enabled) .uw-ad { display: none; }


/* == related ===================================================== */
/* ------------------------------------------------------------- related ----- */
.uw-related { border-top: 1px solid var(--uw-line); margin-top: var(--uw-s6); padding-top: var(--uw-s5); }
.uw-inline-related {
  border-left: 3px solid var(--uw-brand); background: var(--uw-brand-soft);
  padding: var(--uw-s3) var(--uw-s4); border-radius: 0 var(--uw-radius-sm) var(--uw-radius-sm) 0; margin: var(--uw-s5) 0;
}
.uw-inline-related p { margin: 0; font-size: var(--uw-fs-sm); }
.uw-inline-related strong { color: var(--uw-brand-dark); }


/* == tap targets ================================================= */
/* ---------------------------------------------------------- tap targets ---- */
/* A 44px minimum hit area on everything that is a control rather than a piece
   of running text. The negative block margin means the visual rhythm is
   unchanged: only the area a thumb can hit grows. */
.uw-tap,
.uw-card__kicker,
.uw-sec-head__more,
.uw-byline a,
.uw-footer__legal a,
.uw-inline-related a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-block: -.6rem;
}
.uw-logo { min-height: 44px; }
.uw-chips a { min-height: 44px; }
.uw-toc > summary { min-height: 44px; }
.uw-toc a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.uw-sources a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.uw-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.7rem; }
.uw-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.7rem; }
.uw-card__meta { min-height: 24px; }
/* A one-line card title is a 25px tap target. Block display gives it the full
   card width and a 44px floor without changing how a longer title wraps. */
.uw-card__title a { display: block; min-height: 44px; }


/* == brand: the logo slot ==================================================== */
/*
 * Foxiz renders a text logo from the site title, which already reads "Dovelyne"
 * in near black. The dove mark is added beside it from a single SVG file.
 *
 * SWAPPING IN THE FINAL ASSET, in order of preference:
 *   1. Foxiz theme options > Logo. A real logo image replaces the text logo
 *      entirely and the rule below stops applying on its own, because
 *      .is-text-logo is no longer present.
 *   2. Replace assets/img/dovelyne-mark.svg. Same filename, same 40x32 aspect,
 *      nothing else changes.
 * Either route is a swap, not a redesign: no layout depends on the mark.
 */
.logo-wrap.is-text-logo .logo-title a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--uw-ink);
  letter-spacing: -.025em;
}
.logo-wrap.is-text-logo .logo-title a::before {
  content: "";
  flex: none;
  width: 34px;
  height: 27px;
  background: url("../img/dovelyne-mark.svg") no-repeat center / contain;
}
/* The tagline sits beside the wordmark as a quiet rule, never inside the mark. */
.logo-wrap .site-description,
.logo-wrap .logo-tagline {
  color: var(--uw-muted);
  font-size: var(--uw-fs-xs);
  border-left: 1px solid var(--uw-line);
  padding-left: .6rem;
  margin-left: .6rem;
}
@media (max-width: 900px) {
  .logo-wrap .site-description,
  .logo-wrap .logo-tagline { display: none; }
}

/* == typography: the Dovelyne stack, applied to Foxiz ======================== */
/*
 * Foxiz's Google Fonts request is disabled in functions.php, so its font-family
 * declarations would otherwise fall back to whatever the browser picks. These
 * rules point Foxiz's own selectors at the approved Dovelyne stack: an editorial
 * serif for headings, a system sans for everything else. No network request.
 */
body,
.rb-container,
.p-wrap,
input, select, textarea, button {
  font-family: var(--uw-sans);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .block-title, .heading-title,
.archive-title, .page-title, .s-title,
.logo-title, .p-url {
  font-family: var(--uw-serif);
  letter-spacing: -.015em;
}
/* Foxiz uses condensed uppercase for category labels; keep the shape, drop the
   condensed face we no longer load. */
.cat-info a, .meta-label, .block-header .heading-title small {
  font-family: var(--uw-sans);
  letter-spacing: .06em;
}

/* == brand: Foxiz surfaces that must read as Dovelyne ======================= */
body { background: var(--uw-sand); color: var(--uw-body); }
.rb-container a, .entry-content a { color: var(--uw-brand); }
.rb-container a:hover, .entry-content a:hover { color: var(--uw-brand-dark); }
.is-sticky-header, .header-wrap, #site-header { background: var(--uw-surface); }
#footer, .footer-wrap { background: var(--uw-ink); }
.button, .is-btn, input[type="submit"] { background: var(--uw-brand); color: #fff; }
.button:hover, .is-btn:hover { background: var(--uw-brand-dark); }

/* == accessibility: skip link ================================================ */
/* Hidden by moving it up, never sideways: left:-9999px widens the document. */
.uw-skip {
  position: absolute; left: 0; top: 0; z-index: 9999;
  transform: translateY(-120%);
  background: var(--uw-ink); color: #fff;
  padding: .75rem 1rem; border-radius: 0 0 var(--uw-radius-sm) 0;
  text-decoration: none; font: 600 var(--uw-fs-sm)/1 var(--uw-sans);
}
.uw-skip:focus { transform: translateY(0); color: #fff; }

/* == tap targets on Foxiz chrome ============================================= */
/* Foxiz's menu trigger is 43px and its logo link 42px: both one or two pixels
   under the 44px Dovelyne standard. Raised without changing the visual size,
   using the same negative-margin technique as the rest of the design system. */
.uw-skip { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-menu-trigger,
.mobile-toggle-wrap > a,
.logo-title a,
.header-search-icon,
.mobile-search-icon { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.logo-title a { justify-content: flex-start; }

/* A single-line Foxiz card title is a 23px tap target. Block display gives it
   the full card width and a 44px floor without changing how a longer title
   wraps, matching how Dovelyne's own cards already behave. */
.p-url,
.entry-title a,
.block-title a {
  display: block;
  min-height: 44px;
}
@media (min-width: 1001px) {
  /* Desktop is a pointer target, not a thumb, so the floor is unnecessary and
     would add dead space under short titles in a dense grid. */
  .p-url, .entry-title a, .block-title a { min-height: 0; }
}

/* == Foxiz variable overrides ================================================ */
/*
 * Foxiz drives its entire accent system from --g-color, which ships as a hot
 * pink (#ff184e). Retargeting the variable recolours every use at once: the
 * active navigation underline, hover states, category labels and buttons.
 * Doing it here rather than overriding dozens of selectors means a Foxiz update
 * that adds another accent use inherits the Dovelyne colour automatically.
 */
:root,
body {
  --g-color: var(--uw-brand);
  --g-color-90: var(--uw-brand-dark);
  --alt-color: var(--uw-accent);
  --body-fcolor: var(--uw-body);
  --absolute-dark: var(--uw-ink);
  --dark-accent: var(--uw-ink);
  --dark-accent-0: var(--uw-ink);
  --dark-accent-90: var(--uw-ink);
  --awhite: var(--uw-surface);
}

/* == Foxiz card corrections ================================================== */
/*
 * Card titles were inheriting the brand link colour and rendering sage, which
 * reads as a list of links rather than a list of headlines. Titles are ink;
 * sage is reserved for things that behave like links.
 */
.p-url,
.entry-title a,
.block-title a,
.p-featured + .p-content .p-url {
  color: var(--uw-ink);
}
.p-url:hover,
.entry-title a:hover { color: var(--uw-brand); }

/*
 * Foxiz lays archive cards out with flex-wrap, so a card with no featured image
 * is much shorter than its neighbours and leaves a hole in the row. Until every
 * article has its image, a tinted block of the same aspect keeps the grid even.
 * :has() is well supported; where it is not, the layout simply behaves as it
 * does today rather than breaking.
 */
.p-wrap.p-grid:not(:has(.p-featured))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--uw-radius);
  background:
    linear-gradient(135deg, var(--uw-brand-soft), var(--uw-accent-soft));
  margin-bottom: .9rem;
}

/* == subcategory chips on archives =========================================== */
/* Injected after the archive description; spacing only is defined here. */
.archive-header .uw-chips { margin-top: var(--uw-s3); margin-bottom: 0; }

/* The chips sit inside Foxiz's archive description, which styles descendant
   lists and links. Re-assert the chip treatment there specifically. */
.archive-header .uw-chips,
.archive-description .uw-chips,
.uw-chips {
  list-style: none !important;
  margin-left: 0;
  padding-left: 0;
}
.archive-header .uw-chips li,
.uw-chips li { list-style: none !important; margin: 0; }
.archive-header .uw-chips li::marker,
.uw-chips li::marker { content: none; }
.archive-header .uw-chips a,
.uw-chips a { text-decoration: none; border-bottom: 0; }

/* ==========================================================================
   Forms: brand submissions and reader contact
   ==========================================================================
   One set of rules serves both forms. The brand form is long by necessity,
   so the work here is mostly about making a long form feel finishable:
   grouped fieldsets with a visible legend, a single column on narrow screens,
   and required marks that are visible without being shouted.

   The honeypot is positioned off-screen rather than display:none, because a
   field that is display:none is the first thing a bot checks for. It stays
   out of the tab order via tabindex and out of the accessibility tree via
   aria-hidden on the wrapper.
   -------------------------------------------------------------------------- */

.uw-offscreen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.uw-form {
  max-width: 46rem;
  margin: var(--uw-s5) 0;
}

.uw-form__group {
  border: 1px solid var(--uw-line);
  border-radius: var(--uw-radius);
  background: var(--uw-surface);
  padding: var(--uw-s4);
  margin: 0 0 var(--uw-s4);
}

.uw-form__group > legend {
  font-weight: 700;
  color: var(--uw-ink);
  padding: 0 .5rem;
  font-size: var(--uw-fs-sm);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.uw-form__group--consent {
  background: var(--uw-brand-soft);
  border-color: #cdd6c2;
}

.uw-form__intro {
  margin: 0 0 var(--uw-s3);
  color: var(--uw-muted);
  font-size: var(--uw-fs-sm);
}

.uw-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0 0 var(--uw-s3);
}

.uw-field:last-child { margin-bottom: 0; }

.uw-field > label {
  font-weight: 600;
  color: var(--uw-ink);
  font-size: var(--uw-fs-sm);
}

.uw-req { color: var(--uw-accent); margin-left: .15rem; }

.uw-hint {
  color: var(--uw-muted);
  font-size: .85rem;
  line-height: 1.45;
}

.uw-field input[type="text"],
.uw-field input[type="email"],
.uw-field input[type="url"],
.uw-field select,
.uw-field textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--uw-ink);
  background: var(--uw-surface);
  border: 1px solid var(--uw-line-strong);
  border-radius: calc(var(--uw-radius) / 2);
  /* Stops iOS zooming the viewport when a field takes focus. */
  font-size: 16px;
}

.uw-field textarea { resize: vertical; min-height: 6rem; }

.uw-field input:focus-visible,
.uw-field select:focus-visible,
.uw-field textarea:focus-visible {
  outline: 3px solid var(--uw-secondary);
  outline-offset: 1px;
  border-color: var(--uw-secondary);
}

/* The consent tick is the one field that reads as a sentence, so it runs
   inline rather than stacked like the rest. */
.uw-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
}

.uw-field--check input[type="checkbox"] {
  /* A 20px box inside a 44px tap target, which is the minimum that is
     comfortable on a phone. */
  width: 20px;
  height: 20px;
  margin: 12px;
  flex: 0 0 auto;
  accent-color: var(--uw-brand);
}

.uw-field--check > label {
  font-weight: 400;
  font-size: var(--uw-fs-sm);
  line-height: 1.5;
  padding-top: 10px;
}

.uw-form__actions { margin: var(--uw-s4) 0 0; }

@media (min-width: 640px) {
  /* Short related fields pair up once there is room, which takes roughly a
     third off the visual length of the brand form. */
  .uw-form__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--uw-s4);
  }
  .uw-form__group > legend,
  .uw-form__intro,
  .uw-field--textarea,
  .uw-field--select,
  .uw-field--check { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- form feedback */

.uw-formnote {
  border-radius: var(--uw-radius);
  padding: var(--uw-s4);
  margin: 0 0 var(--uw-s4);
  border-left: 4px solid;
}

.uw-formnote h2 { margin: 0 0 .4rem; font-size: var(--uw-fs-lg); }
.uw-formnote p { margin: 0; }

.uw-formnote--ok {
  background: var(--uw-brand-soft);
  border-left-color: var(--uw-brand);
  color: var(--uw-ink);
}

.uw-formnote--error {
  background: var(--uw-accent-soft);
  border-left-color: var(--uw-accent);
  color: var(--uw-ink);
}

/* ==========================================================================
   Site index
   ========================================================================== */

.uw-index__block { margin: 0 0 var(--uw-s6); }

.uw-index__block > h2 {
  border-bottom: 2px solid var(--uw-line);
  padding-bottom: .4rem;
}

.uw-index__block > h3 { margin: var(--uw-s4) 0 .4rem; }

.uw-index__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}

.uw-index__subs li {
  background: var(--uw-sand);
  border: 1px solid var(--uw-line);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: var(--uw-fs-sm);
}

.uw-index__count { color: var(--uw-muted); font-variant-numeric: tabular-nums; }

.uw-index__pages { list-style: none; margin: 0; padding: 0; }

.uw-index__pages li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--uw-line);
}

.uw-index__note {
  display: block;
  color: var(--uw-muted);
  font-size: .85rem;
  margin-top: .15rem;
}

/* ==========================================================================
   Footer
   ==========================================================================
   Four columns on a wide screen, two on a tablet, one on a phone. The brand
   column is wider than the link columns because it carries a sentence rather
   than a list.

   Foxiz applies its own footer padding to .footer-inner, so the Dovelyne rules
   are scoped to .uw-footer and set what they need rather than resetting the
   parent's work.
   -------------------------------------------------------------------------- */

.uw-footer {
  background: var(--uw-ink);
  color: #d9d4c8;
  padding: var(--uw-s6) var(--uw-s4);
}

.uw-footer a { color: #ece7dc; text-decoration: none; }
.uw-footer a:hover { color: #fff; text-decoration: underline; }

.uw-footer a:focus-visible {
  outline: 3px solid var(--uw-sand);
  outline-offset: 2px;
  border-radius: 2px;
}

.uw-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uw-s5);
  max-width: var(--uw-max, 1200px);
  margin: 0 auto;
}

@media (min-width: 620px) {
  .uw-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .uw-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.uw-footer__word {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 .5rem;
}

.uw-footer__line {
  margin: 0;
  font-size: var(--uw-fs-sm);
  line-height: 1.6;
  color: #b8b2a4;
  max-width: 34ch;
}

.uw-footer__h {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9c9689;
  margin: 0 0 .75rem;
  font-weight: 700;
}

.uw-footer__col ul,
.uw-footer__social,
.uw-footer__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uw-footer__col li { margin: 0 0 .45rem; font-size: var(--uw-fs-sm); }

/* Tap targets.
   Keyed to width rather than to (pointer: coarse). Pointer media queries
   depend on the browser reporting a touch device, which emulation and some
   desktop-touch hybrids get wrong, and the failure mode is a footer full of
   39px targets on a real phone. Width is the signal that is always right here:
   below 1000px the footer is one or two columns and the vertical room is
   free. */
@media (max-width: 999px) {
  .uw-footer__col li a,
  .uw-footer__legal li a,
  .uw-footer__social a {
    /* min-height rather than padding. Padding in rem depends on the root font
       size, which Foxiz sets to 15px, so a .5rem pad lands at 38.9px and quietly
       misses the 44px target. An explicit minimum cannot drift with the type
       scale. inline-flex keeps the horizontal legal and social rows inline while
       still allowing the height and the vertical centring. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .uw-footer__col li a { width: 100%; }
  .uw-footer__col li { margin-bottom: 0; }
}

.uw-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: var(--uw-s4);
  font-size: var(--uw-fs-sm);
}

.uw-footer__base {
  max-width: var(--uw-max, 1200px);
  margin: var(--uw-s5) auto 0;
  padding-top: var(--uw-s4);
  border-top: 1px solid #332f26;
  display: flex;
  flex-wrap: wrap;
  gap: var(--uw-s3) var(--uw-s5);
  align-items: baseline;
  justify-content: space-between;
}

.uw-footer__copy {
  margin: 0;
  font-size: .82rem;
  color: #9a9385;
  max-width: 60ch;
}

.uw-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .82rem;
}

/* ==========================================================================
   Tap targets in Foxiz's own templates
   ==========================================================================
   Two controls the parent theme renders below the 44px minimum on a phone: the
   search field in the header and search page, and the "back to home" button on
   the 404 page. Neither is a Dovelyne component, and neither is reachable from
   a filter, so they are corrected here rather than by editing a parent file.

   Scoped to narrow viewports so desktop keeps the parent theme's proportions.
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
  /* The Dovelyne search form, which get_search_form() supplies site-wide. */
  .uw-search input[type="search"],
  .search-form input[type="search"],
  .search-form input[type="text"],
  #search-form input,
  .header-search input[type="search"],
  .search-page-form input {
    min-height: 44px;
  }

  .page404-btn,
  .page404-btn.is-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Posts page header
   ==========================================================================
   Used by the child home.php, which exists because Foxiz renders the blog
   index with no h1. See that file for why.
   -------------------------------------------------------------------------- */

.uw-index-head {
  padding: var(--uw-s5) 0 var(--uw-s4);
  border-bottom: 1px solid var(--uw-line);
  margin-bottom: var(--uw-s5);
}

.uw-index-head__title { margin: 0 0 .4rem; }

.uw-index-head__blurb {
  margin: 0;
  color: var(--uw-muted);
  max-width: 60ch;
}

/* Foxiz meta chips sit well under 44px on a phone. These are the parent's
   category and meta links on cards and articles, not Dovelyne components. */
@media (max-width: 999px) {
  .pagination-wrap a.page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Foxiz card and article meta
   ==========================================================================
   Two parent-theme meta elements that fail accessibility checks and are not
   part of the Dovelyne design.

   The author avatar is a 20px link wrapping a Gravatar with no accessible
   name, repeated once per card, so an archive announced eighteen anonymous
   links. Dovelyne bylines are a name, not a face, and there is no per-author
   photography to show, so the element is removed rather than padded out.

   The category chip is a real navigation link and stays; it only needs enough
   height to be tappable on a phone.
   -------------------------------------------------------------------------- */

.meta-el.meta-avatar,
a.meta-el.meta-avatar { display: none !important; }

@media (max-width: 999px) {
  .p-categories a.p-category,
  a.p-category {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Tap targets on chips and tag lists
   ==========================================================================
   Both are dense rows of small links: the subcategory chips Dovelyne appends to
   pillar archives, and the tag bar Foxiz renders in the article footer. At 24
   to 26px they are comfortably under the 44px minimum on a phone, and they sit
   close enough together that a mis-tap lands on the neighbour.

   Vertical padding only. Adding horizontal padding would push a seven-chip row
   onto three lines on a 360px screen for no accessibility gain.
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
  .uw-chips a,
  .tag-bar a[rel="tag"],
  .efoot-bar.tag-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The rows keep their own spacing; the links now supply the height. */
  .uw-chips { row-gap: 0; }
}

/* Two more parent-theme meta links that sit under 44px on a phone: the
   subcategory list in the archive header, and the author byline on each card.
   Both are real links with real text, so they get height rather than removal. */
@media (max-width: 999px) {
  .subcat-wrap .sub-cat-item a,
  .meta-el.meta-author a,
  a.meta-author-url {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Inline icons
   ==========================================================================
   uw_icon() now carries width and height attributes, which is the real fix.
   This is the second line of defence: Foxiz applies a width:100% rule to
   inline SVG, and an icon that inherits that grows to the width of whatever
   contains it. Being explicit here means a future parent-theme rule cannot
   reintroduce a 1072px tick.
   -------------------------------------------------------------------------- */

.uw-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.15em;
}

.uw-hero__trust .uw-icon { width: 20px; height: 20px; }
.uw-trust__icon .uw-icon,
.uw-trust .uw-icon { width: 28px; height: 28px; }

/* Any Dovelyne component SVG without its own sizing. Deliberately scoped to
   Dovelyne blocks so Foxiz's own icon system is left alone. */
.uw-section svg:not([width]),
.uw-hero svg:not([width]),
.uw-news svg:not([width]),
.uw-footer svg:not([width]) {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Honeypot
   ==========================================================================
   The newsletter honeypot markup was already correct: tabindex -1, aria-hidden
   and autocomplete off. What it never had on this theme was the stylesheet rule
   that hides it, so "Leave this empty" and a text field were rendering in the
   middle of the public newsletter block.

   Clipped rather than display:none, because some bots skip fields that are
   display:none and the field needs to stay fillable by them. It takes no layout
   space, cannot be reached by keyboard, and is already out of the accessibility
   tree via aria-hidden on the wrapper.
   -------------------------------------------------------------------------- */

.uw-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Homepage rhythm
   ==========================================================================
   The pillar sections repeat seven times, so every bit of padding in one is
   paid for seven times over. Sections that carry a full grid keep generous
   spacing; the ones that carry less get less, which is what makes the page
   read as edited rather than as a template applied on a loop.
   -------------------------------------------------------------------------- */

.dovelyne-home .uw-section { padding-block: clamp(2rem, 4vw, 3.25rem); }

/* A pillar with one or two articles. Narrower block, and the grid does not
   stretch two cards across a width meant for three. */
.uw-section--compact { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.uw-section--compact .uw-grid { max-width: 52rem; }

/* Newsletter, trust row and the "also on Dovelyne" line. */
.uw-section--thin { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.dovelyne-home .uw-sec-head { margin-bottom: var(--uw-s4); }

/* Subcategory links now sit BELOW the articles: the articles are the reason to
   stop, the links are where to go next. Quieter treatment to match. */
.uw-section--pillar .uw-chips {
  margin: var(--uw-s4) 0 0;
  padding-top: var(--uw-s3);
  border-top: 1px solid var(--uw-line);
}

.uw-section--pillar .uw-chips a {
  background: transparent;
  border-color: transparent;
  color: var(--uw-secondary-dark);
  padding-inline: 0;
  margin-right: var(--uw-s3);
  font-size: var(--uw-fs-sm);
}

.uw-section--pillar .uw-chips a:hover {
  background: transparent;
  color: var(--uw-brand-dark);
  text-decoration: underline;
}

/* ---------------------------------------------------- pillars still filling */

.uw-soon__title { font-size: var(--uw-fs-lg); margin: 0 0 .25rem; }

.uw-soon__lede {
  margin: 0 0 var(--uw-s3);
  color: var(--uw-muted);
  font-size: var(--uw-fs-sm);
  max-width: 60ch;
}

.uw-chips--soon { margin-bottom: 0; }

/* --------------------------------------------------------------- hero ----- */

.uw-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }

.uw-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--uw-s4);
  align-items: center;
  margin-top: var(--uw-s4);
  font-size: var(--uw-fs-sm);
  color: var(--uw-muted);
}

.uw-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ------------------------------------------------------------- trust row -- */

.uw-trust .uw-note { padding: var(--uw-s4); }

.uw-trust .uw-note__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .4rem;
}

/* ==========================================================================
   Section heading layout
   ==========================================================================
   This was a flex row with the intro set to flex: 1 1 100% to drop it onto its
   own line. It did not: a max-width of 62ch clamps the item's hypothetical size
   before flex decides where lines break, so the intro fitted beside the heading
   and the result read as three unrelated columns.

   Grid states the intention directly. The heading and the "see all" link share
   the first row, the intro always takes a full row of its own, and it keeps its
   62ch measure.
   -------------------------------------------------------------------------- */

.uw-sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--uw-s4);
  row-gap: .35rem;
}

.uw-sec-head h2 { grid-column: 1; }
.uw-sec-head__more { grid-column: 2; }

.uw-sec-head__intro {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 62ch;
}

/* ==========================================================================
   Compact pillar grid
   ==========================================================================
   auto-fit collapses the empty tracks and lets one card stretch across the
   whole row, which is how Family Food ended up as a single 830px-wide card with
   dead space beside it. auto-fill keeps the tracks, so one card stays one card
   wide and simply leaves the rest of the row empty, which is what a section
   with one article should look like.
   -------------------------------------------------------------------------- */

.uw-section--compact .uw-grid {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* ==========================================================================
   Main navigation fit
   ==========================================================================
   Seven pillars plus the wordmark overflowed the bar at 1440 and wrapped, so
   "Shopping & Reviews" sat alone on a second row under an otherwise balanced
   header. Trimming the per-item padding and type a little fits all seven on one
   line without touching Foxiz's header structure.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .main-menu-wrap .navigation > li > a,
  .navbar-wrap .main-menu > li > a,
  #site-navigation .menu-item > a {
    font-size: 0.95rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    white-space: nowrap;
  }

  #site-navigation .menu-item { white-space: nowrap; }
}

/* Hero and first section were each contributing full padding to the same gap,
   leaving about 150px of nothing between the trust line and the first heading.
   The hero closes tighter; the section below keeps its own rhythm. */
.dovelyne-home .uw-hero { padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.dovelyne-home .uw-hero + .uw-section { padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }

/* A compact section's trailing chip row does not need the full section gap
   under it as well. */
.uw-section--compact .uw-chips { margin-bottom: 0; }

/* ==========================================================================
   Hero: text and image
   ==========================================================================
   Roughly 58/42 on desktop. On mobile the text comes first and the image sits
   under it, because the proposition is what a reader needs and the picture is
   what makes them stay.
   -------------------------------------------------------------------------- */

.uw-hero--split .uw-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uw-s5);
  align-items: center;
}

@media (min-width: 900px) {
  .uw-hero--split .uw-hero__inner {
    grid-template-columns: 58fr 42fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.uw-hero__media {
  border-radius: var(--uw-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--uw-brand-soft);
}

.uw-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The placeholder is deliberately a calm branded panel rather than a grey box
   or a borrowed article photo. It reads as intentional until the real asset
   lands, and it disappears the moment one does. */
.uw-hero__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 72% 28%, rgba(168, 92, 51, .10), transparent 55%),
    linear-gradient(150deg, var(--uw-sand) 0%, var(--uw-brand-soft) 58%, var(--uw-secondary-soft) 100%);
  position: relative;
}

.uw-hero__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/dovelyne-mark.svg") no-repeat center / 28% auto;
  opacity: .30;
}

/* ==========================================================================
   Editorial pillar layout
   ==========================================================================
   A lead story with a large image, and the rest as horizontal cards beside it.
   Gives each section a clear subject instead of three interchangeable boxes.
   -------------------------------------------------------------------------- */

.uw-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uw-s4);
}

@media (min-width: 900px) {
  /* stretch, not start: with a tall lead and two supporting cards the right
     column finished early and left a visible hole beside the lead. Letting the
     supporting cards share the column height closes it and gives them a taller
     image at the same time. */
  .uw-editorial { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .uw-editorial__rest .uw-card { flex: 1 1 0; }
}

.uw-editorial__rest {
  display: flex;
  flex-direction: column;
  gap: var(--uw-s4);
  height: 100%;
}

/*
 * Let every track and card shrink.
 *
 * Grid and flex children default to min-width:auto, which means they refuse to
 * go below their max-content width. A card containing a 1200px image therefore
 * sized itself to the image: 1322px wide inside a 390px viewport, clipped by an
 * ancestor so the page reported no overflow while the text ran off the screen.
 * min-width:0 is what lets the image obey its container instead of the reverse.
 */
.uw-editorial,
.uw-editorial__lead,
.uw-editorial__rest,
.uw-editorial__rest .uw-card,
.uw-stack > * { min-width: 0; }

.uw-card__media img { max-width: 100%; }

/* Supporting cards are horizontal ONLY where there is room for two columns.
   Below that the base stylesheet turns them into stacked cards, and this rule
   must not override that: flex-basis in a column direction sets height, so a
   40% basis on a stacked card is meaningless and fought the mobile layout. */
@media (min-width: 641px) {
  .uw-editorial__rest .uw-card--wide .uw-card__media { flex: 0 0 40%; }
}

.uw-editorial__rest .uw-card--wide .uw-card__title { font-size: var(--uw-fs-base); }

/* The lead image is the largest on the page after the hero, so it gets the
   16:9 crop it was actually generated at. */
.uw-card--lead .uw-card__media { aspect-ratio: 16 / 9; }

/* Card media is cropped to 16:9 at every registered size. Matching the
   container to that ratio means object-fit has nothing left to trim, so faces
   and subjects stay where the image lane framed them. */
.uw-card__media { aspect-ratio: 16 / 9; }

/* Compact pillars: a single horizontal card, not a stretched grid cell. */
.uw-section--compact .uw-stack .uw-card--wide { max-width: 100%; }

/* ==========================================================================
   Mobile: one image per section, not four
   ==========================================================================
   Stacked full-width heroes on every card turned the phone page into 13,000px
   of photographs with the text pushed between them. The lead keeps its image so
   each section still has a visual anchor; the supporting stories become compact
   rows, which is faster to scan and roughly halves the section height.

   Desktop is unaffected: there the supporting cards sit beside the lead and
   their images cost no extra vertical space.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .uw-editorial__rest .uw-card--wide .uw-card__media { display: none; }

  .uw-editorial__rest .uw-card--wide {
    border-radius: 0;
    border-width: 0 0 1px;
    background: transparent;
  }

  .uw-editorial__rest .uw-card--wide:last-child { border-bottom: 0; }

  .uw-editorial__rest .uw-card--wide .uw-card__body {
    padding-inline: 0;
    padding-block: var(--uw-s3);
  }

  .uw-editorial__rest { gap: 0; }
}

/* Supporting cards stretch to match the lead column, so their body should fill
   from the top rather than pushing the metadata to the floor and leaving a band
   of air under the headline. */
@media (min-width: 900px) {
  .uw-editorial__rest .uw-card--wide .uw-card__body { justify-content: flex-start; }
  .uw-editorial__rest .uw-card--wide .uw-card__meta { margin-top: auto; }
  .uw-editorial__rest .uw-card--wide .uw-card__excerpt { font-size: var(--uw-fs-sm); }
}

/* The hero placeholder earns its space on desktop, where it balances a
   two-column hero. Stacked on a phone it is 230px of branded nothing above the
   first real story, so it stands down until a genuine hero image exists. A real
   image is never hidden: this targets the placeholder only. */
@media (max-width: 899px) {
  .uw-hero__media:has(.uw-hero__placeholder) { display: none; }
}