/*
 * Paw Spoon MAGAZINE Design System
 * Version: 1.2.9
 * Scope: front-end visual foundation and shared components.
 */

:root {
  color-scheme: light;

  /* Typography */
  --ps-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --ps-font-size-xs: 0.75rem;
  --ps-font-size-sm: 0.875rem;
  --ps-font-size-md: 1rem;
  --ps-font-size-lg: 1.125rem;
  --ps-font-size-xl: clamp(1.35rem, 1.15rem + 0.65vw, 1.75rem);
  --ps-font-size-page: clamp(2rem, 1.55rem + 1.8vw, 3rem);
  --ps-line-height-body: 1.9;
  --ps-line-height-heading: 1.38;
  --ps-letter-spacing-body: 0.015em;
  --ps-letter-spacing-heading: 0.01em;

  /* Color */
  --ps-color-canvas: #fbfaf8;
  --ps-color-surface: #ffffff;
  --ps-color-surface-raised: #ffffff;
  --ps-color-surface-muted: #f4f1ed;
  --ps-color-surface-strong: #ebe5df;
  --ps-color-text: #211b18;
  --ps-color-text-soft: #6e6661;
  --ps-color-text-faint: #958c86;
  --ps-color-border: #e8e2dd;
  --ps-color-border-strong: #d8cfc8;
  --ps-color-accent: #ad5d3f;
  --ps-color-accent-hover: #8e472f;
  --ps-color-accent-soft: #f3dfd5;
  --ps-color-accent-faint: #fbf3ef;
  --ps-color-on-accent: #ffffff;
  --ps-color-success: #5e7958;
  --ps-color-success-soft: #e7f0e4;
  --ps-color-info: #526b86;
  --ps-color-info-soft: #e8eef4;
  --ps-color-warning: #8d681a;
  --ps-color-warning-soft: #fff3cf;
  --ps-color-danger: #a5483e;
  --ps-color-danger-soft: #fbe9e6;
  --ps-color-overlay: rgba(37, 28, 23, 0.42);

  /* Backward-compatible aliases */
  --ps-color-bg: var(--ps-color-canvas);
  --ps-color-muted: var(--ps-color-text-soft);

  /* Spacing */
  --ps-space-1: 0.25rem;
  --ps-space-2: 0.5rem;
  --ps-space-3: 0.75rem;
  --ps-space-4: 1rem;
  --ps-space-5: 1.25rem;
  --ps-space-6: 1.5rem;
  --ps-space-8: 2rem;
  --ps-space-10: 2.5rem;
  --ps-space-12: 3rem;
  --ps-space-14: 3.5rem;
  --ps-space-16: 4rem;
  --ps-space-20: 5rem;
  --ps-space-24: 6rem;

  /* Layout */
  --ps-container-wide: 70rem;
  --ps-container-reading: 45rem;
  --ps-page-gutter: clamp(1rem, 3vw, 1.5rem);
  --ps-section-gap: clamp(3.5rem, 7vw, 5rem);

  /* Shape */
  --ps-radius-sm: 0.5rem;
  --ps-radius-md: 0.75rem;
  --ps-radius-lg: 1rem;
  --ps-radius-xl: 1.25rem;
  --ps-radius-card: 1rem;
  --ps-radius-pill: 999px;

  /* Elevation */
  --ps-shadow-xs: 0 1px 2px rgba(41, 29, 22, 0.035);
  --ps-shadow-sm: 0 5px 16px rgba(41, 29, 22, 0.055);
  --ps-shadow-card: 0 12px 34px rgba(41, 29, 22, 0.075);
  --ps-shadow-modal: 0 28px 80px rgba(37, 28, 23, 0.24);

  /* Motion */
  --ps-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ps-duration-fast: 150ms;
  --ps-duration: 220ms;
  --ps-focus-ring: 0 0 0 4px rgba(182, 108, 71, 0.2);
}

/* =========================================================
   Foundation
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ps-color-canvas);
  color: var(--ps-color-text);
  font-family: var(--ps-font-sans);
  font-size: var(--ps-font-size-md);
  line-height: var(--ps-line-height-body);
  letter-spacing: var(--ps-letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ps-font-sans);
}

::selection {
  background: var(--ps-color-accent-soft);
  color: var(--ps-color-text);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ps-color-accent);
  outline-offset: 3px;
  box-shadow: var(--ps-focus-ring);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe, .dk-my, .dk-fav-page) {
  box-sizing: border-box;
}

:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe) a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

/* Hide parent-theme decoration inside the platform surfaces. */
:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe) img {
  max-width: 100%;
}

/* =========================================================
   Layout
========================================================= */

.ps-container,
.ps-library-home,
.ps-recipe-archive,
.ps-learn-archive,
.ps-food-archive,
.ps-health-list,
.dk-search,
.dk-recipe,
.dk-my,
.dk-fav-page {
  width: min(100%, var(--ps-container-wide));
  margin-inline: auto;
  padding-inline: var(--ps-page-gutter);
}

.ps-content,
.ps-learn-article,
.ps-food-article,
.ps-health-hero,
.ps-health-content {
  width: min(100%, var(--ps-container-reading));
  margin-inline: auto;
}

.ps-library-home,
.ps-recipe-archive,
.ps-learn-archive,
.ps-food-archive,
.ps-health,
.dk-search,
.dk-recipe {
  padding-top: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.ps-section,
.ps-learn-section {
  margin-top: var(--ps-section-gap);
}

.ps-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ps-space-6);
  margin-bottom: var(--ps-space-6);
}

.ps-section-header > div:first-child:last-child {
  width: 100%;
}

.ps-section-title,
.ps-food-info h2,
.ps-food-related-header h2,
.ps-learn-related h2,
.ps-related-recipes h2,
.ps-health-content h2,
.dk-steps h2,
.dk-ingredients h2,
.dk-nutrition-head h2 {
  margin: 0;
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-xl);
  font-weight: 800;
  line-height: var(--ps-line-height-heading);
  letter-spacing: var(--ps-letter-spacing-heading);
}

.ps-section-lead,
.ps-food-related-header p,
.dk-nutrition-head p,
.dk-mineral-lead {
  max-width: var(--ps-container-reading);
  margin: var(--ps-space-2) 0 0;
  color: var(--ps-color-text-soft);
  font-size: var(--ps-font-size-md);
  line-height: 1.8;
}

/* =========================================================
   Page hero
========================================================= */

.ps-library-home > section:first-child,
.ps-recipe-hero,
.ps-learn-hero,
.ps-food-hero,
.ps-health-hero,
.ps-page-hero,
.tx-hero {
  position: relative;
  overflow: visible;
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ps-library-home > section:first-child::after,
.ps-recipe-hero::after,
.ps-learn-hero::after,
.ps-food-hero::after,
.ps-health-hero::after,
.ps-page-hero::after,
.tx-hero::after {
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ps-color-accent);
  content: "";
}

.ps-recipe-hero,
.ps-health-hero {
  max-width: var(--ps-container-reading);
  margin-inline: auto;
}

:where(.ps-library-home > section:first-child, .ps-recipe-hero, .ps-learn-hero, .ps-food-hero, .ps-health-hero, .ps-page-hero, .tx-hero) h1 {
  max-width: 18ch;
  margin: 0 0 var(--ps-space-4);
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-page);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

:where(.ps-library-home > section:first-child, .ps-recipe-hero, .ps-learn-hero, .ps-food-hero, .ps-health-hero, .ps-page-hero, .tx-hero) > p:last-child,
.tx-hero-desc {
  max-width: 42rem;
  margin: 0;
  color: var(--ps-color-text-soft);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.9;
}

.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-2);
  margin: 0 0 var(--ps-space-3);
  color: var(--ps-color-accent);
  font-size: var(--ps-font-size-xs);
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ps-eyebrow::before {
  width: 1.75rem;
  height: 2px;
  border-radius: var(--ps-radius-pill);
  background: currentColor;
  content: "";
}

/* =========================================================
   Buttons and text actions
========================================================= */

.ps-btn,
.dk-btn,
.rc-btn,
.dk-portion-btn,
.ps-learn-search-row button,
.search-submit,
input[type="submit"].search-submit {
  display: inline-flex;
  min-height: 2.875rem;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-2);
  box-sizing: border-box;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--ps-color-border-strong);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-surface-raised);
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-sm);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--ps-duration-fast) var(--ps-ease),
    border-color var(--ps-duration-fast) ease,
    background-color var(--ps-duration-fast) ease,
    box-shadow var(--ps-duration-fast) ease;
}

.ps-btn:hover,
.dk-btn:hover,
.rc-btn:hover,
.dk-portion-btn:hover,
.ps-learn-search-row button:hover,
.search-submit:hover {
  border-color: var(--ps-color-accent);
  background: var(--ps-color-accent-faint);
  transform: translateY(-1px);
}

.ps-btn--primary,
.dk-btn-primary,
.rc-btn-primary,
.dk-portion-btn,
.ps-learn-search-row button,
.search-submit {
  border-color: var(--ps-color-accent);
  background: var(--ps-color-accent);
  color: var(--ps-color-on-accent);
  box-shadow: 0 8px 18px rgba(151, 82, 53, 0.17);
}

.ps-btn--primary:hover,
.dk-btn-primary:hover,
.rc-btn-primary:hover,
.dk-portion-btn:hover,
.ps-learn-search-row button:hover,
.search-submit:hover {
  border-color: var(--ps-color-accent-hover);
  background: var(--ps-color-accent-hover);
  color: var(--ps-color-on-accent);
}

.ps-more-link,
.ps-back-link,
.ps-food-related-more {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-2);
  color: var(--ps-color-accent-hover);
  font-size: var(--ps-font-size-sm);
  font-weight: 800;
  text-decoration: none;
}

.ps-more-link::after,
.ps-food-related-more::after {
  content: "→";
  transition: transform var(--ps-duration-fast) var(--ps-ease);
}

.ps-back-link::before {
  content: "←";
  transition: transform var(--ps-duration-fast) var(--ps-ease);
}

.ps-more-link:hover::after,
.ps-food-related-more:hover::after {
  transform: translateX(0.2rem);
}

.ps-back-link:hover::before {
  transform: translateX(-0.2rem);
}

/* =========================================================
   Forms
========================================================= */

:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe, .dk-my, .dk-drawer) :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], select, textarea),
.rc-search-input,
.ps-learn-search-row input {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ps-color-border-strong);
  border-radius: var(--ps-radius-sm);
  background: var(--ps-color-surface-raised);
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-md);
  line-height: 1.5;
  box-shadow: var(--ps-shadow-xs);
  transition: border-color var(--ps-duration-fast) ease, box-shadow var(--ps-duration-fast) ease;
}

:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe, .dk-my, .dk-drawer) :where(input, select, textarea)::placeholder,
.rc-search-input::placeholder,
.ps-learn-search-row input::placeholder {
  color: var(--ps-color-text-faint);
}

:where(.ps-library-home, .ps-recipe-archive, .ps-learn-archive, .ps-food-archive, .ps-health, .dk-search, .dk-recipe, .dk-my, .dk-drawer) :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], select, textarea):focus,
.rc-search-input:focus,
.ps-learn-search-row input:focus {
  border-color: var(--ps-color-accent);
  outline: 0;
  box-shadow: var(--ps-focus-ring);
}

.rc-filter,
.ps-learn-search,
.ps-learn-category-filter,
.ps-food-category-filter {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-color-surface);
  box-shadow: var(--ps-shadow-sm);
}

.chip-title,
.ps-learn-search label,
.ps-food-category-filter h2,
.ps-learn-category-filter h2 {
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-sm);
  font-weight: 850;
}

.rc-advanced-search {
  margin-top: var(--ps-space-4);
  border-top: 1px solid var(--ps-color-border);
  padding-top: var(--ps-space-4);
}

.rc-advanced-search > summary {
  width: fit-content;
  color: var(--ps-color-accent-hover);
  font-size: var(--ps-font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

.rc-advanced-search-body {
  padding-top: var(--ps-space-4);
}

/* =========================================================
   Chips and badges
========================================================= */

.ps-chip,
.ps-badge,
.dk-badge,
.rc-chip,
.ps-food-tag,
.ps-learn-category,
.ps-tags .tag,
.ps-food-category-chips a,
.ps-learn-category-chips a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-surface);
  color: var(--ps-color-text-soft);
  font-size: var(--ps-font-size-xs);
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color var(--ps-duration-fast) ease, background-color var(--ps-duration-fast) ease, color var(--ps-duration-fast) ease;
}

.ps-food-tag:hover,
.ps-food-category-chips a:hover,
.ps-learn-category-chips a:hover,
.rc-chip:hover {
  border-color: var(--ps-color-accent);
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
}

.rc-chip-input:checked + .rc-chip,
.ps-food-category-chips a.is-active,
.ps-learn-category-chips a.is-active {
  border-color: var(--ps-color-text);
  background: var(--ps-color-text);
  color: var(--ps-color-on-accent);
  box-shadow: 0 4px 12px rgba(52, 42, 36, 0.14);
}

.tag.protein,
.rc-chip--protein-red,
.rc-chip-input:checked + .rc-chip.rc-chip--protein-red {
  border-color: #e9c6b7;
  background: #f8ebe4;
  color: #79442f;
}

.tag.health,
.rc-chip--hi,
.rc-chip-input:checked + .rc-chip.rc-chip--hi {
  border-color: #c8ddc5;
  background: var(--ps-color-success-soft);
  color: #486443;
}

.tag.life,
.rc-chip--life,
.rc-chip-input:checked + .rc-chip.rc-chip--life {
  border-color: #cad7e3;
  background: var(--ps-color-info-soft);
  color: #405a75;
}

/* =========================================================
   Cards and grids
========================================================= */

.ps-card-grid,
.ps-recipe-grid,
.rc-grid,
.ps-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.ps-card,
.ps-recipe-card,
.ps-health-card,
.ps-category-card,
.rc-card,
.dk-card,
.dk-step-card,
.dk-nutrition-card,
.dk-mineral-panel,
.dk-mineral-card,
.dk-my-card {
  box-sizing: border-box;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-color-surface-raised);
  color: var(--ps-color-text);
  box-shadow: var(--ps-shadow-sm);
}

.ps-card,
.ps-recipe-card,
.ps-category-card,
.ps-health-card {
  overflow: hidden;
}

.ps-card,
.ps-recipe-card,
.ps-category-card,
.ps-health-card,
.dk-card-below {
  transition:
    transform var(--ps-duration) var(--ps-ease),
    border-color var(--ps-duration) ease,
    box-shadow var(--ps-duration) ease;
}

.ps-card:has(a):hover,
.ps-recipe-card:hover,
.ps-category-card:hover,
.ps-health-card:hover,
.dk-card-below:hover {
  border-color: var(--ps-color-border-strong);
  box-shadow: var(--ps-shadow-card);
  transform: translateY(-0.25rem);
}

.ps-card-link,
.ps-recipe-card,
.ps-category-card,
.ps-health-card {
  color: inherit;
  text-decoration: none;
}

.ps-card-image,
.ps-recipe-image,
.rc-thumb {
  overflow: hidden;
  background: var(--ps-color-surface-muted);
}

.ps-card-image img,
.ps-recipe-image img,
.rc-thumb img,
.dk-card-below .rc-thumb-img {
  transition: transform 500ms var(--ps-ease);
}

.ps-card:has(a):hover .ps-card-image img,
.ps-recipe-card:hover .ps-recipe-image img,
.dk-card-below:hover .rc-thumb-img {
  transform: scale(1.025);
}

.ps-card-body,
.ps-recipe-body {
  padding: clamp(1rem, 2.5vw, 1.25rem);
}

.ps-card-title,
.ps-recipe-body h3,
.rc-title,
.rc-title--below {
  color: var(--ps-color-text);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: 0;
}

.ps-card-title,
.ps-recipe-body h3,
.rc-title--below {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ps-card-text,
.ps-recipe-excerpt,
.dk-my-card-copy p,
.dk-list-summary {
  color: var(--ps-color-text-soft);
  font-size: var(--ps-font-size-sm);
  line-height: 1.75;
}

.ps-card-meta {
  color: var(--ps-color-text-faint);
  font-size: var(--ps-font-size-xs);
  font-weight: 700;
}

.ps-recipe-footer {
  border-top-color: var(--ps-color-border);
  color: var(--ps-color-accent-hover);
}

.ps-no-image,
.rc-thumb-ph {
  background:
    linear-gradient(135deg, rgba(182, 108, 71, 0.08), rgba(94, 121, 88, 0.08)),
    var(--ps-color-surface-muted);
  color: var(--ps-color-text-faint);
  font-size: var(--ps-font-size-xs);
  font-weight: 750;
  letter-spacing: 0.06em;
}

/* =========================================================
   Home categories
========================================================= */

.ps-library-home section {
  margin-bottom: var(--ps-section-gap);
}

.ps-library-home > section:first-child {
  margin-bottom: var(--ps-section-gap);
}

.ps-categories > h2,
.ps-latest > h2 {
  margin: 0 0 var(--ps-space-6);
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-xl);
  line-height: var(--ps-line-height-heading);
}

.ps-category-main {
  margin-bottom: var(--ps-space-4);
}

.ps-category-sub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ps-space-4);
}

.ps-category-card {
  min-height: 7.25rem;
  padding: var(--ps-space-6);
  justify-content: center;
  gap: var(--ps-space-3);
  font-size: 1.5rem;
  text-align: center;
}

.ps-category-card span {
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-md);
  font-weight: 850;
}

.ps-category-main .ps-category-card {
  min-height: 8.5rem;
  border-color: #dec4b6;
  background:
    linear-gradient(135deg, rgba(182, 108, 71, 0.12), rgba(255,255,255,0.7)),
    var(--ps-color-surface-raised);
}

/* =========================================================
   Breadcrumb, author, empty and notices
========================================================= */

.ps-breadcrumb {
  margin-bottom: var(--ps-space-8);
  color: var(--ps-color-text-faint);
  font-size: var(--ps-font-size-xs);
  line-height: 1.7;
}

.ps-breadcrumb a {
  color: var(--ps-color-text-soft);
  text-decoration: none;
}

.ps-breadcrumb a:hover {
  color: var(--ps-color-accent-hover);
}

.ps-breadcrumb-sep {
  margin-inline: 0.55rem;
  color: var(--ps-color-border-strong);
}

.ps-author-card {
  gap: var(--ps-space-6);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-color-surface);
  box-shadow: var(--ps-shadow-sm);
}

.ps-author-photo img {
  border-radius: var(--ps-radius-md);
}

.ps-author-role,
.ps-author-card p {
  color: var(--ps-color-text-soft);
}

.ps-empty {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px dashed var(--ps-color-border-strong);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-color-surface);
  color: var(--ps-color-text-soft);
  font-size: var(--ps-font-size-sm);
  line-height: 1.8;
  text-align: center;
}

.ps-notice,
.dk-nutrition-message,
.recipe-faq {
  padding: 1rem 1.125rem;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-color-surface);
  color: var(--ps-color-text-soft);
}

.dk-nutri-card {
  margin-block: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-color-surface);
}

.dk-nutri-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   Pagination
========================================================= */

.ps-pagination,
.dk-pagination,
.rc-pagination {
  margin-top: var(--ps-space-12);
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) .page-numbers li {
  margin: 0;
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) :where(a.page-numbers, span.page-numbers) {
  display: inline-flex;
  min-width: 2.625rem;
  min-height: 2.625rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-surface-raised);
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--ps-shadow-xs);
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) a.page-numbers:hover {
  border-color: var(--ps-color-accent);
  background: var(--ps-color-accent-faint);
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) span.page-numbers.current {
  border-color: var(--ps-color-text);
  background: var(--ps-color-text);
  color: var(--ps-color-on-accent);
}

:where(.ps-pagination, .dk-pagination, .rc-pagination) span.page-numbers.dots {
  min-width: 1.75rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* =========================================================
   Learn and Food reading surfaces
========================================================= */

.ps-learn-single,
.ps-food-single {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.ps-learn-single-header h1,
.ps-food-header h1 {
  margin: var(--ps-space-3) 0 var(--ps-space-4);
  color: var(--ps-color-text);
  font-size: clamp(1.9rem, 1.55rem + 1.25vw, 2.75rem);
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.ps-learn-lead,
.ps-food-lead,
.ps-health-hero p {
  color: var(--ps-color-text-soft);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.9;
}

.ps-learn-featured,
.ps-food-featured {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-sm);
}

.ps-learn-content,
.ps-food-content,
.ps-health-text {
  color: var(--ps-color-text);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 2;
  letter-spacing: 0.02em;
}

:where(.ps-learn-content, .ps-food-content, .ps-health-text) h2 {
  margin: clamp(3.5rem, 8vw, 5rem) 0 var(--ps-space-6);
  padding: 0 0 var(--ps-space-3) var(--ps-space-4);
  border: 0;
  border-left: 4px solid var(--ps-color-accent);
  border-bottom: 1px solid var(--ps-color-border);
  color: var(--ps-color-text);
  font-size: clamp(1.45rem, 1.25rem + 0.65vw, 1.85rem);
  line-height: 1.5;
}

:where(.ps-learn-content, .ps-food-content, .ps-health-text) h3 {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 var(--ps-space-4);
  color: var(--ps-color-text);
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.45rem);
  line-height: 1.55;
}

.ps-learn-content strong {
  padding: 0.06em 0.25em;
  background: linear-gradient(transparent 45%, var(--ps-color-warning-soft) 45%);
}

.ps-learn-content blockquote {
  margin: var(--ps-space-10) 0;
  padding: var(--ps-space-6);
  border: 1px solid #d8e4d5;
  border-left: 4px solid var(--ps-color-success);
  border-radius: var(--ps-radius-md);
  background: var(--ps-color-success-soft);
  color: var(--ps-color-text-soft);
}

.ps-learn-toc,
.ps-learn-points {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-color-surface);
  box-shadow: var(--ps-shadow-xs);
}

.ps-learn-toc a {
  color: var(--ps-color-text-soft);
}

.ps-learn-toc a:hover {
  color: var(--ps-color-accent-hover);
}

.ps-food-info,
.ps-food-related,
.ps-learn-related,
.ps-related-recipes,
.ps-health-content {
  border-top-color: var(--ps-color-border);
}

/* =========================================================
   Recipe detail
========================================================= */

.dk-recipe {
  max-width: var(--ps-container-wide);
}

.dk-hero {
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: var(--ps-space-14);
}

.dk-hero-media,
.dk-hero-content {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-xl);
  box-shadow: var(--ps-shadow-card);
}

.dk-hero-media {
  background: var(--ps-color-surface-muted);
}

.dk-hero-content {
  background: var(--ps-color-surface-raised);
}

.dk-title {
  color: var(--ps-color-text);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.dk-excerpt,
.dk-current-weight-label,
.dk-portion-action p,
.dk-nutrition-note,
.dk-mineral-lead {
  color: var(--ps-color-text-soft);
}

.dk-feature-card,
.dk-portion-action {
  border: 1px solid var(--ps-color-border);
  background: linear-gradient(145deg, var(--ps-color-accent-faint), var(--ps-color-surface));
}

.dk-steps,
.dk-ingredients,
.dk-nutrition {
  margin-top: var(--ps-section-gap);
}

.dk-step-list {
  gap: var(--ps-space-4);
}

.dk-step-card,
.dk-card,
.dk-nutrition-card,
.dk-mineral-panel,
.dk-mineral-card {
  box-shadow: var(--ps-shadow-sm);
}

.dk-step-number {
  border: 1px solid #e8c9ba;
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
}

.dk-step-text,
.ing-name,
.dk-mineral-card h4,
.dk-mineral-panel h3 {
  color: var(--ps-color-text);
}

.dk-step-tip {
  border: 1px solid #ecdca9;
  background: var(--ps-color-warning-soft);
  color: var(--ps-color-warning);
}

.dk-step-notice {
  border: 1px solid #e9c5c0;
  background: var(--ps-color-danger-soft);
  color: var(--ps-color-danger);
}

.dk-ingredient-list li {
  border-bottom-color: var(--ps-color-border);
}

.dots {
  border-bottom-color: var(--ps-color-border-strong);
}

.ing-qty {
  color: var(--ps-color-text-soft);
}

.dk-nutri-toggle {
  border-color: var(--ps-color-border);
  background: var(--ps-color-surface-muted);
  box-shadow: none;
}

.dk-nutri-toggle button {
  min-height: 2.75rem;
  color: var(--ps-color-text-soft);
}

.dk-nutri-toggle button.is-active {
  background: var(--ps-color-accent);
  color: var(--ps-color-on-accent);
  box-shadow: var(--ps-shadow-sm);
}

.dk-nutrition-card .icon {
  background: var(--ps-color-accent-faint);
}

.dk-nutrition-card strong,
.dk-bar-row b {
  color: var(--ps-color-text);
}

.dk-nutrition-card .label,
.dk-nutrition-card .unit,
.dk-bar-row {
  color: var(--ps-color-text-soft);
}

.dk-nutrition-message {
  border-color: #ead9a4;
  background: var(--ps-color-warning-soft);
  color: var(--ps-color-warning);
}

.dk-bar {
  background: var(--ps-color-surface-strong);
}

.dk-bar i {
  background: var(--ps-color-text-faint);
}

.dk-bar.is-supp i {
  background: var(--ps-color-success);
}

.dk-portion-modal-bg {
  background: var(--ps-color-overlay);
  backdrop-filter: blur(4px);
}

.dk-portion-modal-card {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-xl);
  background: var(--ps-color-surface-raised);
  box-shadow: var(--ps-shadow-modal);
}

.dk-portion-close {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--ps-radius-pill);
  color: var(--ps-color-text-soft);
}

.dk-portion-close:hover {
  background: var(--ps-color-surface-muted);
  color: var(--ps-color-text);
}

.dk-weight-options button {
  min-height: 2.75rem;
  border-color: var(--ps-color-border);
  background: var(--ps-color-surface);
  color: var(--ps-color-text);
}

.dk-weight-options button:hover,
.dk-weight-options button.is-active {
  border-color: var(--ps-color-accent);
  background: var(--ps-color-accent-soft);
  color: var(--ps-color-accent-hover);
}

/* =========================================================
   Favorites, My page, FAQ and drawer
========================================================= */

.dk-my,
.dk-fav-page {
  padding-top: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.dk-my-head {
  gap: var(--ps-space-4);
  margin-bottom: var(--ps-space-8);
}

.dk-my-av {
  width: 4rem;
  height: 4rem;
  border: 3px solid var(--ps-color-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

.dk-my-hello {
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-xl);
  font-weight: 850;
}

.dk-my-note {
  color: var(--ps-color-text-soft);
}

.dk-my-card {
  margin: var(--ps-space-4) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.dk-my-favorites-card {
  gap: var(--ps-space-6);
}

.dk-faq {
  display: grid;
  gap: var(--ps-space-3);
}

.dk-faq__item {
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--ps-color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dk-faq__item:first-child {
  border-top: 1px solid var(--ps-color-border);
}

.dk-faq__q {
  padding: 1rem 1.125rem;
  color: var(--ps-color-text);
  font-weight: 800;
  cursor: pointer;
}

.dk-faq__a {
  padding: 0 1.125rem 1.125rem;
  color: var(--ps-color-text-soft);
}

.dk-nav-btn {
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(10px);
  transition: transform var(--ps-duration-fast) var(--ps-ease), box-shadow var(--ps-duration-fast) ease;
}

.dk-nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.dk-nav-btn span,
.dk-nav-btn span::before,
.dk-nav-btn span::after {
  background: var(--ps-color-text);
}

.dk-drawer .shade {
  background: var(--ps-color-overlay);
  backdrop-filter: blur(4px);
}

.dk-drawer .panel {
  border-left: 0;
  background: var(--ps-color-surface-raised);
  box-shadow: var(--ps-shadow-modal);
}

.dk-drawer h3 {
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-xl);
  font-weight: 850;
}

.dk-drawer nav a {
  min-height: 2.875rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ps-color-text);
  font-weight: 750;
}

.dk-drawer nav a:hover,
.dk-drawer nav a:focus-visible,
.dk-drawer nav a[aria-current="page"] {
  border: 0;
  background: transparent;
  color: var(--ps-color-accent-hover);
  transform: translateX(0.2rem);
}

.dk-nav-section,
.dk-nav-legal {
  border-top-color: var(--ps-color-border);
}

.dk-nav-label,
.dk-nav-note,
.dk-nav-legal a {
  color: var(--ps-color-text-faint);
}

.dk-nav-shop {
  border: 1px solid var(--ps-color-accent);
  background: var(--ps-color-accent);
  color: var(--ps-color-on-accent);
  box-shadow: 0 8px 20px rgba(151, 82, 53, 0.17);
}

.dk-nav-shop:hover,
.dk-nav-shop:focus-visible {
  background: var(--ps-color-accent-hover);
  opacity: 1;
}

.dk-card-below .rc-thumb {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-color-surface-muted);
  box-shadow: var(--ps-shadow-xs);
}

.rc-fav .dk-fav-pill,
.dk-actions .dk-fav-pill {
  border: 1px solid var(--ps-color-border);
  background: rgba(255, 253, 249, 0.95);
  box-shadow: var(--ps-shadow-sm);
}

.rc-fav .dk-fav-pill::before,
.dk-actions .dk-fav-pill::before {
  color: var(--ps-color-accent);
}


/* =========================================================
   Paw Spoon MAGAZINE brand lockup
========================================================= */

.ps-brand-logo {
  margin: 0;
  line-height: 1;
}

.ps-brand-logo__link,
.ps-brand-logo__lockup {
  display: inline-flex;
  align-items: flex-end;
  color: var(--ps-color-text);
  text-decoration: none;
}

.ps-brand-logo__lockup {
  gap: clamp(0.6rem, 1.4vw, 1rem);
}

.ps-brand-logo__image {
  display: block;
  width: clamp(10rem, 18vw, 14.25rem);
  height: auto;
}

.ps-brand-logo__magazine {
  padding-bottom: 0.38rem;
  color: var(--ps-color-text-faint);
  font-size: clamp(0.7rem, 0.62rem + 0.18vw, 0.86rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
}

.ps-brand-logo--footer .ps-brand-logo__image {
  width: clamp(8.5rem, 15vw, 11rem);
}

.ps-brand-logo--footer .ps-brand-logo__magazine {
  font-size: 0.68rem;
}

.ps-home-intro h1 {
  max-width: 15ch;
}

.dk-nav-brand {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 1.25rem;
  border-bottom: 1px solid var(--ps-color-border);
}

.dk-nav-brand img {
  display: block;
  width: min(12rem, 58vw);
  height: auto;
}

.dk-nav-brand span {
  padding-bottom: 0.3rem;
  color: var(--ps-color-text-faint);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
}

@media (max-width: 680px) {
  .ps-brand-logo__image {
    width: clamp(8.75rem, 43vw, 11rem);
  }

  .ps-brand-logo__magazine {
    padding-bottom: 0.24rem;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }
}

/* =========================================================
   Parent theme shell – intentionally light-touch
========================================================= */

#header-container,
.header-container {
  border-bottom: 1px solid var(--ps-color-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

#header-in,
.header-in {
  box-sizing: border-box;
  padding-top: clamp(0.8rem, 2vw, 1.25rem);
  padding-bottom: clamp(0.8rem, 2vw, 1.25rem);
}

#header .site-name,
.header .site-name {
  color: var(--ps-color-text);
  text-decoration: none;
}

#footer,
.footer {
  border-top: 1px solid var(--ps-color-border);
  background: var(--ps-color-surface);
  color: var(--ps-color-text-soft);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {
  .ps-card-grid,
  .ps-recipe-grid,
  .rc-grid,
  .ps-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-category-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ps-space-3);
  }
}

@media (max-width: 680px) {
  :root {
    --ps-page-gutter: 1rem;
    --ps-section-gap: 3.5rem;
  }

  .ps-library-home,
  .ps-recipe-archive,
  .ps-learn-archive,
  .ps-food-archive,
  .ps-health,
  .dk-search,
  .dk-recipe,
  .dk-my,
  .dk-fav-page {
    padding-top: 1.75rem;
    padding-bottom: 4.5rem;
  }

  .ps-library-home > section:first-child,
  .ps-recipe-hero,
  .ps-learn-hero,
  .ps-food-hero,
  .ps-health-hero,
  .ps-page-hero,
  .tx-hero {
    padding: 1.5rem 0 1.25rem;
    border-radius: 0;
  }

  .ps-card-grid,
  .ps-recipe-grid,
  .rc-grid,
  .ps-health-grid {
    grid-template-columns: 1fr;
  }

  .ps-category-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-category-card {
    min-height: 6.5rem;
    padding: 1.15rem 0.75rem;
  }

  .ps-learn-search-row {
    display: grid;
    gap: var(--ps-space-3);
  }

  .ps-learn-search-row button {
    width: 100%;
    margin-top: 0;
  }

  .dk-nutri-list {
    grid-template-columns: 1fr;
  }

  .dk-weight-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dk-portion-modal-card {
    margin: 5vh var(--ps-page-gutter);
    padding: 1.5rem;
  }

  .dk-nav-btn {
    right: 0.75rem;
    top: 0.75rem;
  }
}

@media (max-width: 420px) {
  .ps-category-sub {
    grid-template-columns: 1fr;
  }

  :where(.ps-pagination, .dk-pagination, .rc-pagination) :where(a.page-numbers, span.page-numbers) {
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   UI refinements 1.2.2
========================================================= */

/* Brand balance: Paw Spoon remains primary while MAGAZINE is clearly legible. */
.ps-brand-logo__magazine,
.dk-nav-brand span {
  color: var(--ps-color-text-soft);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Home title: prevent accidental Japanese line breaks and control mobile wrapping. */
.ps-home-intro .ps-home-title {
  max-width: none;
  white-space: nowrap;
}

.ps-home-title > span {
  display: inline;
}

/* My page: remove the parent-theme article-card look and provide an editorial surface. */
.dk-my-page #main,
.dk-my-page .main,
.dk-my-page article.article,
.dk-my-page .entry-content,
.dk-my-page .content-in {
  background: transparent;
  box-shadow: none;
}

.dk-my-page article.article {
  padding: 0;
  border: 0;
}

.dk-my-page .entry-title,
.dk-my-page .date-tags,
.dk-my-page .sns-share,
.dk-my-page .sns-follow,
.dk-my-page .author-box {
  display: none !important;
}

.dk-my-page .entry-content {
  margin: 0;
}

.dk-my {
  width: min(100%, 58rem);
}

.dk-my-hero {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--ps-color-border);
}

.dk-my-eyebrow,
.dk-my-welcome {
  margin: 0 0 0.55rem;
  color: var(--ps-color-accent);
  font-size: var(--ps-font-size-xs);
  font-weight: 850;
  letter-spacing: 0.16em;
}

.dk-my-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-page);
  font-weight: 850;
  line-height: 1.2;
}

.dk-my-hero > p:last-child {
  max-width: 38rem;
  margin: 0;
  color: var(--ps-color-text-soft);
  line-height: 1.85;
}

.dk-my-profile {
  display: flex;
  align-items: center;
  gap: var(--ps-space-4);
  margin-bottom: var(--ps-space-7);
}

.dk-my-grid {
  display: grid;
  gap: var(--ps-space-4);
}

.dk-my-card {
  margin: 0;
}

.dk-my-favorites-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.dk-my-card-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
  font-size: 1.15rem;
}

.dk-my-login-card {
  display: grid;
  gap: var(--ps-space-4);
}

/* Recipe search mirrors the clean Learn search surface. */
.ps-recipe-archive .rc-filter {
  max-width: 50rem;
  margin-inline: auto;
}

.rc-filter-heading {
  margin-bottom: var(--ps-space-5);
}

.rc-filter-kicker {
  margin: 0 0 0.4rem;
  color: var(--ps-color-accent);
  font-size: var(--ps-font-size-xs);
  font-weight: 850;
  letter-spacing: 0.15em;
}

.rc-search-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ps-color-text);
  font-size: var(--ps-font-size-sm);
  font-weight: 850;
}

.rc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.rc-search-input {
  width: 100%;
  min-height: 3rem;
}

.rc-search-submit {
  min-width: 6.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--ps-color-accent);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-accent);
  color: var(--ps-color-on-accent);
  font-weight: 800;
  cursor: pointer;
}

.rc-search-submit:hover,
.rc-search-submit:focus-visible {
  border-color: var(--ps-color-accent-hover);
  background: var(--ps-color-accent-hover);
}

.rc-advanced-search {
  margin-top: var(--ps-space-5);
  padding-top: var(--ps-space-4);
}

.rc-advanced-search > summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-3);
  padding: 0.35rem 0;
  list-style: none;
}

.rc-advanced-search > summary::-webkit-details-marker {
  display: none;
}

.rc-advanced-search > summary::after {
  color: var(--ps-color-accent);
  content: "+";
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.rc-advanced-search[open] > summary::after {
  content: "−";
}

.rc-selected-count {
  margin-left: auto;
  padding: 0.25rem 0.55rem;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
  font-size: var(--ps-font-size-xs);
  font-weight: 800;
}

.rc-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ps-space-4);
}

.rc-filter-group {
  min-width: 0;
  margin: 0;
  padding: var(--ps-space-4);
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-color-surface-raised);
}

.rc-filter-group .chip-title {
  padding: 0 0.35rem;
}

.rc-filter-group .chip-group {
  align-content: flex-start;
  margin-top: 0.5rem;
}

.rc-filter-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: var(--ps-space-5);
}

/* FAQ uses editorial dividers instead of boxed cards. */
.dk-faq__q {
  padding: 1.15rem 0.15rem;
}

.dk-faq__a {
  padding: 0 0.15rem 1.25rem;
}

/* Drawer: no framed trigger, panel, logo, or menu items. */
.dk-nav-btn,
.dk-nav-btn:hover,
.dk-nav-btn:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dk-drawer .panel,
.dk-nav-brand,
.dk-nav-section,
.dk-nav-legal,
.dk-drawer nav a,
.dk-drawer nav a:hover,
.dk-drawer nav a:focus-visible,
.dk-drawer nav a[aria-current="page"] {
  border: 0 !important;
}

.dk-nav-brand {
  padding-bottom: 0.5rem;
}

.dk-nav-section {
  padding-top: 0;
}

.dk-nav-legal {
  padding-top: 0;
}

.dk-drawer nav a {
  padding-inline: 0;
}

@media (max-width: 680px) {
  .ps-home-intro .ps-home-title {
    white-space: normal;
  }

  .ps-home-title > span {
    display: block;
    white-space: nowrap;
  }

  .dk-my-favorites-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dk-my-favorites-card .dk-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .rc-search-row {
    grid-template-columns: 1fr;
  }

  .rc-search-submit {
    width: 100%;
  }

  .rc-advanced-grid {
    grid-template-columns: 1fr;
  }

  .rc-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .rc-filter-actions > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* =========================================================
   Visual refinement 1.2.3
   - dog-led visual heroes
   - parent-theme author/TOC cleanup
   - footer logo aspect-ratio protection
   - unified primary actions and My Page surface
========================================================= */

/* Primary actions must always follow the Paw Spoon accent palette. */
.rc-btn.rc-btn-primary,
.rc-filter-actions .rc-btn-primary,
.dk-my .dk-btn-primary {
  border-color: var(--ps-color-accent) !important;
  background: var(--ps-color-accent) !important;
  color: var(--ps-color-on-accent) !important;
  box-shadow: 0 8px 18px rgba(151, 82, 53, 0.17) !important;
}

.rc-btn.rc-btn-primary:hover,
.rc-btn.rc-btn-primary:focus-visible,
.rc-filter-actions .rc-btn-primary:hover,
.rc-filter-actions .rc-btn-primary:focus-visible,
.dk-my .dk-btn-primary:hover,
.dk-my .dk-btn-primary:focus-visible {
  border-color: var(--ps-color-accent-hover) !important;
  background: var(--ps-color-accent-hover) !important;
  color: var(--ps-color-on-accent) !important;
}

/* Author name is not part of the public editorial UI. */
.author-name.fn,
.post-author,
.entry-card .author-name,
.related-entry-card .author-name {
  display: none !important;
}

/* Protect the official logo from parent-theme fixed-height rules. */
.ps-brand-logo--footer,
.ps-brand-logo--footer .ps-brand-logo__link,
.ps-brand-logo--footer .ps-brand-logo__lockup {
  width: auto !important;
  height: auto !important;
}

.ps-brand-logo--footer .ps-brand-logo__image,
.footer .ps-brand-logo__image,
.footer-bottom-logo .ps-brand-logo__image {
  display: block !important;
  width: clamp(9rem, 18vw, 12rem) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  aspect-ratio: 948 / 227;
}

/* Dog-led visual hero shared by Home, Recipe, Learn, Food and Health. */
.ps-home-intro,
.ps-recipe-hero,
.ps-learn-hero,
.ps-food-hero,
.ps-health-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  max-width: var(--ps-container-wide) !important;
  min-height: clamp(21rem, 45vw, 34rem);
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto clamp(3rem, 7vw, 5rem) !important;
  padding: clamp(1.5rem, 4vw, 3.5rem) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #d8d3cc !important;
  background-image: url("../img/pawspoon-dog-hero-placeholder.webp") !important;
  background-repeat: no-repeat !important;
  background-position: 52% 48% !important;
  background-size: cover !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.ps-home-intro {
  min-height: clamp(28rem, 55vw, 42rem);
  background-position: 50% 46% !important;
}

.ps-recipe-hero { background-position: 55% 48% !important; }
.ps-learn-hero  { background-position: 44% 48% !important; }
.ps-food-hero   { background-position: 62% 48% !important; }
.ps-health-hero { background-position: 36% 48% !important; }

.ps-home-intro::before,
.ps-recipe-hero::before,
.ps-learn-hero::before,
.ps-food-hero::before,
.ps-health-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(29, 24, 21, 0.66) 0%, rgba(29, 24, 21, 0.34) 42%, rgba(29, 24, 21, 0.04) 72%);
  content: "";
}

.ps-home-intro::after,
.ps-recipe-hero::after,
.ps-learn-hero::after,
.ps-food-hero::after,
.ps-health-hero::after {
  display: none !important;
  content: none !important;
}

.ps-home-intro > *,
.ps-recipe-hero > *,
.ps-learn-hero > *,
.ps-food-hero > *,
.ps-health-hero > * {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.ps-home-intro .ps-eyebrow,
.ps-recipe-hero .ps-eyebrow,
.ps-learn-hero .ps-eyebrow,
.ps-food-hero .ps-eyebrow,
.ps-health-hero .ps-eyebrow {
  margin-bottom: 0.55rem;
  color: rgba(255,255,255,0.84) !important;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.22);
}

.ps-home-intro .ps-eyebrow::before,
.ps-recipe-hero .ps-eyebrow::before,
.ps-learn-hero .ps-eyebrow::before,
.ps-food-hero .ps-eyebrow::before,
.ps-health-hero .ps-eyebrow::before {
  background: rgba(255,255,255,0.72);
}

.ps-home-intro h1,
.ps-recipe-hero h1,
.ps-learn-hero h1,
.ps-food-hero h1,
.ps-health-hero h1 {
  max-width: 18ch !important;
  margin: 0 0 0.7rem !important;
  color: #fff !important;
  font-size: clamp(1.8rem, 1.3rem + 1.7vw, 3rem) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.28);
}

.ps-home-intro .ps-home-title {
  max-width: 20ch !important;
  white-space: normal !important;
}

.ps-home-intro .ps-home-title > span {
  display: inline !important;
  white-space: normal !important;
}

.ps-home-intro > p:last-child,
.ps-recipe-hero > p:last-child,
.ps-learn-hero > p:last-child,
.ps-food-hero > p:last-child,
.ps-health-hero > p:last-child {
  max-width: 31rem !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.94rem) !important;
  font-weight: 500;
  line-height: 1.8 !important;
  text-shadow: 0 1px 14px rgba(0,0,0,0.32);
}

/* My Page: suppress parent article furniture and use the same editorial language as other screens. */
.dk-my-page .toc,
.dk-my-page #toc,
.dk-my-page .toc-content,
.dk-my-page .toc-widget-box,
.dk-my-page .widget_toc,
.dk-my-page .outline,
.dk-my-page .outline-box {
  display: none !important;
}

.dk-my-page .entry-content h2,
.dk-my-page .entry-content h3,
.dk-my-page .dk-my-card-copy h2,
.dk-my-page .dk-my-card-copy h3,
.dk-my-page .dk-my-payment-card h3 {
  margin: 0 0 0.55rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ps-color-text) !important;
  box-shadow: none !important;
}

.dk-my-page .entry-content::before,
.dk-my-page .entry-content::after {
  content: none !important;
}

.dk-my {
  max-width: var(--ps-container-wide) !important;
  padding-top: clamp(2rem, 5vw, 4rem) !important;
}

.dk-my-hero {
  max-width: var(--ps-container-reading);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem) !important;
  padding: 0 !important;
  border: 0 !important;
}

.dk-my-profile {
  max-width: var(--ps-container-reading);
  margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ps-color-border);
}

.dk-my-grid {
  max-width: var(--ps-container-reading);
  gap: 0 !important;
}

.dk-my-card {
  padding: clamp(1.35rem, 3vw, 2rem) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ps-color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dk-my-grid > .dk-my-card:first-child {
  border-top: 0 !important;
}

.dk-my-favorites-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 1.25rem !important;
}

.dk-my-card-icon {
  display: none !important;
}

@media (max-width: 680px) {
  .ps-home-intro,
  .ps-recipe-hero,
  .ps-learn-hero,
  .ps-food-hero,
  .ps-health-hero {
    min-height: 27rem;
    padding: 1.4rem !important;
    background-position: 53% 50% !important;
  }

  .ps-home-intro {
    min-height: 32rem;
  }

  .ps-home-intro::before,
  .ps-recipe-hero::before,
  .ps-learn-hero::before,
  .ps-food-hero::before,
  .ps-health-hero::before {
    background: linear-gradient(0deg, rgba(29,24,21,0.72) 0%, rgba(29,24,21,0.24) 55%, rgba(29,24,21,0.02) 84%);
  }

  .ps-home-intro .ps-home-title > span {
    display: block !important;
  }

  .dk-my-favorites-card {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Visual heroes and compact recipe cards 1.2.4
========================================================= */

/* The five visual landing pages begin directly below the header line. */
.ps-has-visual-hero #content,
.ps-has-visual-hero .content-in,
.ps-has-visual-hero #main,
.ps-has-visual-hero .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ps-library-home,
.ps-recipe-archive,
.ps-health,
.ps-food-archive,
.ps-learn-archive {
  padding-top: 0 !important;
}

/* Full-bleed image area: 4:1 on desktop, 3:2 on phones. */
.ps-home-intro,
.ps-recipe-hero,
.ps-health-hero,
.ps-food-hero,
.ps-learn-hero {
  width: 100vw !important;
  max-width: none !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 1;
  margin: 0 calc(50% - 50vw) clamp(2.5rem, 6vw, 4.5rem) !important;
  padding: clamp(1rem, 2.4vw, 2rem) max(1.25rem, calc((100vw - var(--ps-container-wide)) / 2)) !important;
  justify-content: flex-end !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: cover !important;
}

.ps-home-intro {
  background-image: url("../img/hero-home-desktop.webp") !important;
}
.ps-recipe-hero {
  background-image: url("../img/hero-recipe-desktop.webp") !important;
}
.ps-health-hero {
  background-image: url("../img/hero-health-desktop.webp") !important;
}
.ps-food-hero {
  background-image: url("../img/hero-food-desktop.webp") !important;
}
.ps-learn-hero {
  background-image: url("../img/hero-learn-desktop.webp") !important;
}

/* Keep copy readable while leaving the illustration as the dominant element. */
.ps-home-intro::before,
.ps-recipe-hero::before,
.ps-health-hero::before,
.ps-food-hero::before,
.ps-learn-hero::before {
  z-index: 0 !important;
  background: linear-gradient(90deg, rgba(250,247,242,.98) 0%, rgba(250,247,242,.88) 30%, rgba(250,247,242,.2) 62%, rgba(250,247,242,0) 76%) !important;
}

.ps-home-intro > *,
.ps-recipe-hero > *,
.ps-health-hero > *,
.ps-food-hero > *,
.ps-learn-hero > * {
  max-width: 29rem !important;
}

.ps-home-intro .ps-eyebrow,
.ps-recipe-hero .ps-eyebrow,
.ps-health-hero .ps-eyebrow,
.ps-food-hero .ps-eyebrow,
.ps-learn-hero .ps-eyebrow {
  margin-bottom: .35rem !important;
  color: var(--ps-color-text-soft) !important;
  font-size: .58rem !important;
  letter-spacing: .13em !important;
  text-shadow: none !important;
}

.ps-home-intro .ps-eyebrow::before,
.ps-recipe-hero .ps-eyebrow::before,
.ps-health-hero .ps-eyebrow::before,
.ps-food-hero .ps-eyebrow::before,
.ps-learn-hero .ps-eyebrow::before {
  background: var(--ps-color-accent) !important;
}

.ps-home-intro h1,
.ps-recipe-hero h1,
.ps-health-hero h1,
.ps-food-hero h1,
.ps-learn-hero h1 {
  max-width: 20ch !important;
  margin: 0 0 .4rem !important;
  color: var(--ps-color-text) !important;
  font-size: clamp(1.2rem, .95rem + 1vw, 2rem) !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

.ps-home-intro > p:last-child,
.ps-recipe-hero > p:last-child,
.ps-health-hero > p:last-child,
.ps-food-hero > p:last-child,
.ps-learn-hero > p:last-child {
  max-width: 29rem !important;
  color: var(--ps-color-text-soft) !important;
  font-size: clamp(.7rem, .66rem + .12vw, .82rem) !important;
  line-height: 1.7 !important;
  text-shadow: none !important;
}

/* Compact illustrated category navigation. */
.ps-categories {
  margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
}

.ps-categories > h2 {
  margin-bottom: 1rem !important;
}

.ps-category-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(.6rem, 1.4vw, 1rem) !important;
}

.ps-category-card {
  display: flex !important;
  min-width: 0;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  justify-content: center;
  gap: .35rem !important;
  padding: clamp(.55rem, 1.5vw, .9rem) !important;
  border: 1px solid var(--ps-color-border) !important;
  border-radius: 1rem !important;
  background: var(--ps-color-surface) !important;
  box-shadow: none !important;
}

.ps-category-card__icon {
  display: block;
  width: clamp(3.2rem, 6vw, 4.5rem);
  height: clamp(3.2rem, 6vw, 4.5rem);
  object-fit: contain;
}

.ps-category-card span {
  color: var(--ps-color-text) !important;
  font-size: clamp(.68rem, .62rem + .2vw, .82rem) !important;
  line-height: 1.35;
  text-align: center;
}

/* All recipe list cards keep a strict 4:5 footprint. */
.ps-recipe-card {
  display: grid !important;
  grid-template-rows: minmax(0, 54%) minmax(0, 46%);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

.ps-recipe-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
}

.ps-recipe-body {
  min-height: 0;
  padding: clamp(.7rem, 1.4vw, 1rem) !important;
  overflow: hidden;
}

.ps-recipe-footer {
  display: none !important;
}

.ps-recipe-body h3 {
  display: -webkit-box;
  margin: 0 0 .4rem !important;
  overflow: hidden;
  font-size: clamp(.88rem, .78rem + .35vw, 1.08rem) !important;
  line-height: 1.45 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ps-recipe-excerpt {
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  color: var(--ps-color-text-soft) !important;
  font-size: clamp(.68rem, .63rem + .16vw, .78rem) !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ps-recipe-card .ps-tags {
  flex-wrap: nowrap !important;
  gap: .3rem !important;
  min-height: 1.25rem;
  margin: 0 0 .45rem !important;
  padding: 0 !important;
  overflow: hidden;
}

.ps-recipe-card .ps-tags .tag {
  max-width: 50%;
  padding: .25rem .45rem !important;
  overflow: hidden;
  font-size: clamp(.56rem, .52rem + .12vw, .67rem) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .ps-home-intro,
  .ps-recipe-hero,
  .ps-health-hero,
  .ps-food-hero,
  .ps-learn-hero {
    aspect-ratio: 3 / 2;
    margin-bottom: 2.25rem !important;
    padding: 1rem !important;
  }

  .ps-home-intro { background-image: url("../img/hero-home-mobile.webp") !important; }
  .ps-recipe-hero { background-image: url("../img/hero-recipe-mobile.webp") !important; }
  .ps-health-hero { background-image: url("../img/hero-health-mobile.webp") !important; }
  .ps-food-hero { background-image: url("../img/hero-food-mobile.webp") !important; }
  .ps-learn-hero { background-image: url("../img/hero-learn-mobile.webp") !important; }

  .ps-home-intro::before,
  .ps-recipe-hero::before,
  .ps-health-hero::before,
  .ps-food-hero::before,
  .ps-learn-hero::before {
    background: linear-gradient(0deg, rgba(250,247,242,.98) 0%, rgba(250,247,242,.88) 30%, rgba(250,247,242,.12) 64%, rgba(250,247,242,0) 78%) !important;
  }

  .ps-home-intro h1,
  .ps-recipe-hero h1,
  .ps-health-hero h1,
  .ps-food-hero h1,
  .ps-learn-hero h1 {
    max-width: 17ch !important;
    font-size: clamp(1.05rem, 4.9vw, 1.4rem) !important;
  }

  .ps-home-intro > p:last-child,
  .ps-recipe-hero > p:last-child,
  .ps-health-hero > p:last-child,
  .ps-food-hero > p:last-child,
  .ps-learn-hero > p:last-child {
    max-width: 24rem !important;
    font-size: .68rem !important;
    line-height: 1.6 !important;
  }

  .ps-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }

  .ps-category-card {
    padding: .42rem !important;
    border-radius: .8rem !important;
  }

  .ps-category-card__icon {
    width: 2.7rem;
    height: 2.7rem;
  }

  .ps-category-card span {
    font-size: .64rem !important;
  }

  .ps-recipe-grid,
  .rc-grid,
  .ps-food-related .ps-recipe-grid,
  .ps-health-related .ps-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
  }

  .ps-recipe-card {
    border-radius: .85rem !important;
  }

  .ps-recipe-body {
    padding: .55rem !important;
  }

  .ps-recipe-body h3 {
    margin-bottom: 0 !important;
    font-size: .76rem !important;
    line-height: 1.38 !important;
  }

  .ps-recipe-excerpt {
    display: none !important;
  }

  .ps-recipe-card .ps-tags {
    min-height: 1rem;
    margin-bottom: .3rem !important;
  }

  .ps-recipe-card .ps-tags .tag {
    padding: .18rem .3rem !important;
    font-size: .5rem !important;
  }
}

body.ps-has-visual-hero {
  overflow-x: clip;
}

/* =========================================================
   Compact mobile grids and readable recipe cards 1.2.5
========================================================= */

/* Home category navigation: the label is primary, illustration secondary. */
.ps-category-card {
  gap: .25rem !important;
}

.ps-category-card__icon {
  width: clamp(2.25rem, 4vw, 3rem) !important;
  height: clamp(2.25rem, 4vw, 3rem) !important;
}

.ps-category-card span {
  font-size: clamp(.86rem, .78rem + .25vw, 1rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em;
}

/* Recipe cards contain only taxonomy tags and the recipe title. */
.ps-recipe-card {
  grid-template-rows: minmax(0, 56%) minmax(0, 44%) !important;
}

.ps-recipe-body {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: .5rem;
  padding: clamp(.8rem, 1.6vw, 1.1rem) !important;
  overflow: hidden;
}

.ps-recipe-excerpt {
  display: none !important;
}

.ps-recipe-card .ps-tags {
  display: flex !important;
  min-width: 0;
  min-height: 0 !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  align-content: flex-start;
  gap: .3rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.ps-recipe-card .ps-tags:empty {
  display: none !important;
}

.ps-recipe-card .ps-tags .tag {
  display: inline-flex;
  align-items: center;
  max-width: 100% !important;
  min-height: 1.55rem;
  padding: .2rem .5rem !important;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: clamp(.68rem, .63rem + .16vw, .78rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-recipe-body h3 {
  align-self: start;
  margin: 0 !important;
  font-size: clamp(1rem, .9rem + .35vw, 1.22rem) !important;
  font-weight: 900 !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 2;
}

/* Health cards remain compact enough for two columns on phones. */
@media (max-width: 680px) {
  .ps-category-card__icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
  }

  .ps-category-card span {
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  .ps-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  .ps-health-card {
    min-width: 0;
    padding: .85rem !important;
    border-radius: .9rem !important;
  }

  .ps-health-card h3 {
    margin-bottom: .35rem !important;
    font-size: .88rem !important;
    line-height: 1.4 !important;
  }

  .ps-health-card p {
    display: -webkit-box;
    margin: 0 !important;
    overflow: hidden;
    font-size: .66rem !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ps-health-card .ps-health-meta {
    flex-wrap: wrap;
    gap: .2rem .45rem;
    margin-top: .55rem;
    font-size: .61rem;
  }

  /* Food and Learn listing surfaces use two compact columns. */
  .ps-food-archive .ps-card-grid,
  .ps-learn-archive .ps-card-grid,
  .ps-learn-search-page .ps-card-grid,
  body.tax-learn_category .ps-card-grid,
  body.tax-learn_tag .ps-card-grid,
  .ps-learn-single .ps-learn-related .ps-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  .ps-food-card,
  .ps-learn-card {
    min-width: 0;
    border-radius: .9rem !important;
  }

  .ps-food-card .ps-card-body,
  .ps-learn-card .ps-card-body {
    padding: .65rem !important;
  }

  .ps-food-card .ps-card-meta,
  .ps-learn-card .ps-card-meta {
    margin-bottom: .28rem;
    font-size: .62rem !important;
    line-height: 1.35;
  }

  .ps-food-card .ps-card-title,
  .ps-learn-card .ps-card-title {
    font-size: .8rem !important;
    line-height: 1.42 !important;
  }

  .ps-food-card .ps-card-text,
  .ps-learn-card .ps-card-text {
    display: none !important;
  }

  /* Readable tag/title composition within the fixed 4:5 recipe footprint. */
  .ps-recipe-card {
    grid-template-rows: minmax(0, 54%) minmax(0, 46%) !important;
  }

  .ps-recipe-body {
    gap: .38rem;
    padding: .62rem !important;
  }

  .ps-recipe-card .ps-tags {
    gap: .22rem !important;
  }

  .ps-recipe-card .ps-tags .tag {
    min-height: 1.35rem;
    padding: .16rem .4rem !important;
    font-size: .64rem !important;
    line-height: 1.12 !important;
  }

  .ps-recipe-body h3 {
    font-size: .9rem !important;
    line-height: 1.34 !important;
  }
}

/* =========================================================
   Recipe detail and reading-surface refinement 1.2.6
   - compact mobile rhythm
   - editorial cooking steps
   - readable nutrition controls
   - stacked FAQ
   - compact supervisor card
   - subtle supplement CTA
========================================================= */

/* Recipe badges are text-only on the detail screen. */
.dk-recipe .dk-badges {
  gap: .4rem;
}

.dk-recipe .dk-badge {
  min-height: 1.75rem;
  padding: .28rem .65rem;
  border-color: var(--ps-color-border);
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-text-soft);
  font-size: .75rem;
  line-height: 1.2;
}

/* Cooking steps: calm, editorial and aligned with the Paw Spoon palette. */
.dk-steps h2,
.dk-ingredients h2,
.dk-nutrition-head h2,
.recipe-faq h2 {
  color: var(--ps-color-text);
  letter-spacing: .01em;
}

.dk-step-card {
  padding: clamp(1.15rem, 2.8vw, 1.65rem);
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-color-surface);
  box-shadow: none;
}

.dk-step-number {
  margin-bottom: .85rem;
  padding: .3rem .62rem;
  border: 0;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
  font-size: .72rem;
  letter-spacing: .08em;
}

.dk-step-tip,
.dk-step-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  margin-top: .9rem;
  padding: .8rem .9rem;
  border: 0;
  border-left: 3px solid var(--ps-color-accent);
  border-radius: 0 var(--ps-radius-sm) var(--ps-radius-sm) 0;
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-text-soft);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.7;
}

.dk-step-notice {
  border-left-color: var(--ps-color-text-faint);
  background: var(--ps-color-surface-muted);
}

.dk-step-note-label {
  color: var(--ps-color-accent-hover);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.dk-step-notice .dk-step-note-label {
  color: var(--ps-color-text-soft);
}

/* Nutrition controls and summary cards. */
.dk-nutri-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 24rem);
}

.dk-nutri-toggle button {
  min-width: 0;
  padding-inline: .7rem;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
}

.dk-nutrition-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dk-nutrition-card {
  min-width: 0;
}

/* Recipe FAQ is separated from the preceding section and always stacks Q above A. */
.recipe-faq {
  margin-top: clamp(2.75rem, 7vw, 4.5rem);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ps-color-border);
  border-radius: 0;
  background: transparent;
}

.recipe-faq > h2 {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 1rem;
}

.recipe-faq .faq-list {
  border-bottom: 1px solid var(--ps-color-border);
}

.recipe-faq .faq-item {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ps-color-border);
  background: transparent;
}

.recipe-faq .faq-q,
.recipe-faq .faq-a {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr);
  width: 100%;
  gap: .75rem;
  align-items: start;
  box-sizing: border-box;
}

.recipe-faq .faq-q {
  padding: 1rem 0;
  color: var(--ps-color-text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.recipe-faq .faq-q::-webkit-details-marker {
  display: none;
}

.recipe-faq .faq-a {
  padding: 0 0 1.15rem;
  color: var(--ps-color-text-soft);
  line-height: 1.8;
}

.recipe-faq .faq-label {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ps-color-accent-faint);
  color: var(--ps-color-accent-hover);
  font-size: .75rem;
  font-weight: 900;
}

.recipe-faq .faq-answer,
.recipe-faq .faq-answer p {
  margin: 0;
}

/* Subtle product invitation placed after nutrition information. */
.dk-supplement-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(14rem, .9fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(3rem, 8vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  overflow: hidden;
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-xl);
  background: linear-gradient(135deg, #fbf7f1 0%, #f5ecdf 100%);
}

.dk-supplement-cta-copy {
  position: relative;
  z-index: 1;
}

.dk-supplement-cta-kicker {
  margin: 0 0 .55rem;
  color: var(--ps-color-accent-hover);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dk-supplement-cta h2 {
  margin: 0 0 .75rem;
  color: var(--ps-color-text);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem);
  line-height: 1.45;
}

.dk-supplement-cta-copy > p:not(.dk-supplement-cta-kicker) {
  max-width: 36rem;
  margin: 0;
  color: var(--ps-color-text-soft);
  font-size: .95rem;
  line-height: 1.85;
}

.dk-supplement-cta-link {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.15rem;
  padding: .7rem 1.15rem;
  border: 1px solid var(--ps-color-text);
  border-radius: var(--ps-radius-pill);
  color: var(--ps-color-text);
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.dk-supplement-cta-link:hover,
.dk-supplement-cta-link:focus-visible {
  background: var(--ps-color-text);
  color: var(--ps-color-on-accent);
  transform: translateY(-1px);
}

.dk-supplement-cta-media {
  align-self: stretch;
  min-height: 14rem;
}

.dk-supplement-cta-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 20rem;
  object-fit: contain;
}

/* Supervisor block: use the available area without a tall empty column. */
.ps-learn-author {
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

.ps-learn-author h2 {
  margin-bottom: 1rem;
}

.ps-author-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: none;
}

.ps-author-photo {
  width: 5.5rem;
  min-width: 0;
}

.ps-author-photo img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--ps-radius-md);
}

.ps-author-name {
  margin-bottom: .45rem;
  font-size: 1.15rem;
}

.ps-author-card p {
  font-size: .9rem;
  line-height: 1.75;
}

/* Reading pages: normalize excessive gaps on compact screens. */
@media (max-width: 768px) {
  .dk-recipe {
    padding: 1.25rem 1rem 4rem;
  }

  .dk-hero {
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .dk-hero-media {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--ps-radius-lg);
  }

  .dk-hero-content {
    min-height: 0;
    padding: 1.1rem;
    border-radius: var(--ps-radius-lg);
  }

  .dk-title {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .dk-feature-card {
    padding: .95rem;
  }

  .dk-recipe .dk-body {
    margin-top: 0;
  }

  .dk-recipe .dk-ingredients {
    margin-top: 0;
  }

  .dk-recipe .dk-steps,
  .dk-recipe .dk-nutrition {
    margin-top: 2.5rem;
  }

  .dk-steps h2,
  .dk-ingredients h2,
  .dk-nutrition-head h2,
  .recipe-faq h2 {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }

  .dk-step-list {
    gap: .8rem;
  }

  .dk-step-card {
    padding: 1rem;
  }

  .dk-step-text {
    font-size: .96rem;
    line-height: 1.8;
  }

  .dk-step-tip,
  .dk-step-notice {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding: .75rem .8rem;
  }

  .dk-nutrition-head {
    gap: .8rem;
    margin-bottom: 1rem;
  }

  .dk-nutrition-head p {
    margin-top: .3rem;
  }

  .dk-nutri-toggle {
    width: 100%;
  }

  .dk-nutri-toggle button {
    min-height: 2.6rem;
    padding: .65rem .25rem;
    font-size: clamp(.7rem, 3.35vw, .82rem);
  }

  .dk-nutrition-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }

  .dk-nutrition-card {
    min-height: 7.75rem;
    padding: .9rem;
    border-radius: var(--ps-radius-md);
  }

  .dk-nutrition-card .icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: .55rem;
    font-size: .9rem;
  }

  .dk-nutrition-card .label {
    margin-bottom: .35rem;
    font-size: .72rem;
  }

  .dk-nutrition-card strong {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }

  .dk-mineral-panel {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: var(--ps-radius-lg);
  }

  .recipe-faq {
    margin-top: 2.75rem;
  }

  .recipe-faq .faq-q,
  .recipe-faq .faq-a {
    display: block !important;
  }

  .recipe-faq .faq-label {
    margin-bottom: .5rem;
  }

  .recipe-faq .faq-question,
  .recipe-faq .faq-answer {
    display: block;
    width: 100%;
  }

  .dk-supplement-cta {
    grid-template-columns: 1fr;
    gap: .25rem;
    margin-top: 3rem;
    padding: 1.25rem;
  }

  .dk-supplement-cta-media {
    min-height: 11rem;
    order: -1;
  }

  .dk-supplement-cta-media img {
    max-height: 13.5rem;
  }

  .ps-learn-single,
  .ps-food-single {
    padding-top: 1.25rem;
    padding-bottom: 4rem;
  }

  .ps-breadcrumb {
    margin-bottom: 1.25rem;
  }

  .ps-learn-single-header,
  .ps-food-header {
    margin-bottom: 1.5rem;
  }

  .ps-learn-featured,
  .ps-food-featured {
    margin-bottom: 1.75rem;
  }

  :where(.ps-learn-content, .ps-food-content, .ps-health-text) h2 {
    margin-top: 2.75rem;
  }

  :where(.ps-learn-content, .ps-food-content, .ps-health-text) h3 {
    margin-top: 2rem;
  }

  .ps-food-info,
  .ps-food-related,
  .ps-learn-related,
  .ps-related-recipes,
  .ps-health-content,
  .ps-learn-single .ps-section,
  .ps-food-single .ps-section,
  body.tax-health_issue .ps-health > .ps-section {
    margin-top: 3rem;
  }

  .ps-learn-author {
    margin-top: 3rem;
  }

  .ps-author-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
  }

  .ps-author-photo,
  .ps-author-photo img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .ps-author-role {
    margin-bottom: .15rem;
    font-size: .7rem;
  }

  .ps-author-name {
    margin-bottom: .35rem;
    font-size: 1rem;
  }

  .ps-author-card p {
    font-size: .82rem;
    line-height: 1.65;
  }
}

@media (max-width: 900px) {
  .dk-recipe .dk-supplement-cta {
    order: 4;
  }
}


/* =========================================================
   Related-card, breadcrumb and supplement callout refinement 1.2.7
========================================================= */

/* Breadcrumbs are available on every primary archive/detail route. */
.ps-breadcrumb {
  width: min(calc(100% - (var(--ps-page-gutter) * 2)), var(--ps-container-wide));
  margin: clamp(1rem, 2.5vw, 1.5rem) auto clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-recipe-article > .ps-breadcrumb,
.ps-food-article > .ps-breadcrumb,
.ps-learn-article > .ps-breadcrumb {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

/* Health archive labels are the primary information. */
.ps-health-card h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem) !important;
  line-height: 1.35 !important;
}

/* Supplement CTA sits directly before nutrition and visually points to
   the supplement side of the nutrition toggle. */
.dk-supplement-cta {
  position: relative;
  grid-template-columns: minmax(10rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin: clamp(2rem, 5vw, 3.25rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  overflow: visible;
  background: linear-gradient(135deg, #fffdfa 0%, #f5ecdf 100%);
}

.dk-supplement-cta-media {
  min-height: 9rem;
}

.dk-supplement-cta-media img {
  max-height: 12rem;
}

.dk-supplement-cta h2 {
  font-size: clamp(1.2rem, 1rem + .75vw, 1.65rem);
}

/* All reusable content-card grids remain two columns on phones. */
@media (max-width: 680px) {
  .ps-card-grid,
  .ps-recipe-grid,
  .rc-grid,
  .ps-health-grid,
  .ps-learn-grid,
  .ps-food-grid,
  .ps-food-related-grid,
  .ps-related-grid,
  .ps-health-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  :where(.ps-card, .ps-recipe-card, .ps-health-card, .ps-food-card, .ps-learn-card) {
    min-width: 0;
  }

  .ps-health-card h3 {
    margin-bottom: .3rem !important;
    font-size: 1rem !important;
  }

  .ps-health-card p {
    font-size: .68rem !important;
  }

  .ps-breadcrumb {
    margin-top: .8rem;
    margin-bottom: 1.35rem;
    font-size: .68rem;
  }

  .dk-recipe .dk-supplement-cta {
    display: grid;
    aspect-ratio: 4 / 1;
    min-height: 5.5rem;
    grid-template-columns: 31% minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    margin: 1.6rem 0 1rem;
    padding: .45rem .7rem;
    border-radius: .85rem;
  }

  .dk-recipe .dk-supplement-cta::after {
    position: absolute;
    right: 23%;
    bottom: -.55rem;
    width: 0;
    height: 0;
    border-top: .6rem solid #f5ecdf;
    border-right: .55rem solid transparent;
    border-left: .55rem solid transparent;
    content: "";
  }

  .dk-supplement-cta-media {
    min-height: 0;
    height: 100%;
    order: 0;
  }

  .dk-supplement-cta-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }

  .dk-supplement-cta-copy {
    min-width: 0;
    overflow: hidden;
  }

  .dk-supplement-cta-kicker {
    margin-bottom: .08rem;
    font-size: .48rem;
    letter-spacing: .06em;
  }

  .dk-supplement-cta h2 {
    margin: 0;
    overflow: hidden;
    font-size: clamp(.78rem, 3.6vw, .94rem);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dk-supplement-cta-copy > p:not(.dk-supplement-cta-kicker) {
    display: none;
  }

  .dk-supplement-cta-link {
    min-height: 0;
    margin-top: .25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ps-color-accent-hover);
    font-size: .61rem;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  .dk-supplement-cta-link:hover,
  .dk-supplement-cta-link:focus-visible {
    background: transparent;
    color: var(--ps-color-accent);
    transform: none;
  }

  .dk-recipe .dk-nutrition {
    margin-top: 0 !important;
  }
}