/* =========================================================
   YepPick — Single CSS bundle (mobile-first)
   Brand: warm orange/yellow accent on neutral background
   ========================================================= */

:root {
  --yp-bg:           #faf7f2;
  --yp-bg-alt:       #ffffff;
  --yp-ink:          #1a1a1a;
  --yp-ink-soft:     #4a4a4a;
  --yp-muted:        #888;
  --yp-line:         #ececec;
  --yp-line-soft:    #f3f1ed;
  --yp-accent:       #f97316;       /* orange-500 */
  --yp-accent-700:   #c2410c;
  --yp-accent-50:    #fff7ed;
  --yp-warning:      #d97706;
  --yp-success:      #15803d;
  --yp-success-50:   #f0fdf4;
  --yp-error:        #dc2626;
  --yp-info:         #2563eb;
  --yp-radius:       12px;
  --yp-radius-sm:    8px;
  --yp-radius-lg:    20px;
  --yp-shadow-sm:    0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --yp-shadow:       0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  --yp-shadow-lg:    0 8px 24px rgba(0,0,0,.08);
  --yp-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", sans-serif;
  --yp-font-display: var(--yp-font);
  --yp-tap:          44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: var(--yp-font);
  font-size: 16px; line-height: 1.55;
  color: var(--yp-ink);
  background: var(--yp-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--yp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--yp-font-display); margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 800; }
h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p  { margin: 0 0 1em; }

/* Layout */
.yp-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .yp-container { padding: 0 24px; } }
.yp-section { padding: 32px 16px; }
@media (min-width: 1024px) { .yp-section { padding: 56px 24px; } }
.yp-section__title { font-size: clamp(20px, 2.5vw, 26px); margin: 0 0 16px; }
.yp-accent { color: var(--yp-accent); }
.yp-link { color: var(--yp-accent); font-weight: 600; }
.yp-muted { color: var(--yp-muted); }
.yp-empty { color: var(--yp-muted); padding: 32px; text-align: center; }
.inline { display: inline; }

/* Buttons */
.yp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: var(--yp-tap);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
  text-decoration: none;
}
.yp-btn--primary { background: var(--yp-accent); color: white; }
.yp-btn--primary:hover { background: var(--yp-accent-700); text-decoration: none; }
.yp-btn--ghost { background: white; color: var(--yp-ink); border-color: var(--yp-line); }
.yp-btn--ghost:hover { background: var(--yp-bg); }
.yp-btn--block { width: 100%; }
.yp-btn--cta { padding: 12px 24px; box-shadow: var(--yp-shadow); }
.yp-btn--sm { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.yp-btn:active { transform: translateY(1px); }

/* Header */
.yp-header { background: white; border-bottom: 1px solid var(--yp-line); position: sticky; top: 0; z-index: 50; }
.yp-header__inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.yp-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--yp-ink); text-decoration: none; }
.yp-logo:hover { text-decoration: none; }
.yp-logo__mark { font-size: 22px; color: var(--yp-accent); }
.yp-logo__text span { color: var(--yp-ink); }
.yp-logo__text strong { color: var(--yp-accent); }
.yp-logo--lg { font-size: 28px; }
.yp-logo--footer { color: white; }
.yp-nav { display: none; gap: 24px; margin-left: 32px; }
.yp-nav a { color: var(--yp-ink); font-weight: 500; }
.yp-nav a:hover { color: var(--yp-accent); text-decoration: none; }
.yp-header .yp-btn--cta { margin-left: auto; }
.yp-burger { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; margin-left: auto; }
.yp-burger span { display: block; width: 22px; height: 2px; background: var(--yp-ink); border-radius: 1px; }
@media (min-width: 1024px) {
  .yp-nav { display: flex; }
  .yp-burger { display: none; }
}

/* Hero */
.yp-hero { background: linear-gradient(180deg, white 0%, var(--yp-bg) 100%); padding: 24px 0 64px; position: relative; }
.yp-hero__inner { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 16px; }
@media (min-width: 1024px) {
  .yp-hero__inner { grid-template-columns: 1fr 1fr; padding: 32px 24px; gap: 48px; align-items: center; }
}
.yp-hero__title { font-size: clamp(36px, 6vw, 60px); font-weight: 800; line-height: 1.05; margin-bottom: 16px; }
.yp-hero__sub { font-size: 18px; color: var(--yp-ink-soft); max-width: 460px; }
.yp-hero__art { aspect-ratio: 4/3; border-radius: var(--yp-radius-lg); background: linear-gradient(135deg, #fed7aa, #fef3c7); display: grid; place-items: center; font-size: 80px; }

.yp-trust-row { list-style: none; display: flex; gap: 16px; flex-wrap: wrap; padding: 0; margin: 16px 0; }
.yp-trust-row__item { display: flex; align-items: center; gap: 8px; color: var(--yp-ink-soft); font-size: 14px; }
.yp-trust-row__icon { color: var(--yp-accent); }

/* Finder card on home */
.yp-finder-card { background: white; border-radius: var(--yp-radius-lg); padding: 16px; box-shadow: var(--yp-shadow-lg); margin: -32px 16px 0; max-width: 1200px; }
.yp-finder-card__title { font-size: 18px; margin-bottom: 12px; }
.yp-finder-card__row { display: grid; gap: 12px; }
@media (min-width: 768px) {
  .yp-finder-card { margin: -40px auto 0; padding: 20px 24px; }
  .yp-finder-card__row { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
}

/* Form fields */
.yp-field { display: block; margin-bottom: 12px; }
.yp-field > span { display: block; font-size: 13px; color: var(--yp-ink-soft); margin-bottom: 6px; font-weight: 500; }
.yp-field input, .yp-field select, .yp-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--yp-ink);
  background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.yp-field input:focus, .yp-field select:focus, .yp-field textarea:focus {
  outline: none; border-color: var(--yp-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.yp-field textarea { min-height: 100px; resize: vertical; }
.yp-field--inline { display: flex; align-items: center; gap: 8px; }
.yp-field--inline > span { margin: 0; }

/* Pill / category cards */
.yp-pill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .yp-pill-grid { grid-template-columns: repeat(6, 1fr); } }
.yp-pill-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); color: var(--yp-ink); transition: all .15s; }
.yp-pill-card:hover { border-color: var(--yp-accent); transform: translateY(-2px); text-decoration: none; }
.yp-pill-card__media { width: 64px; height: 64px; border-radius: 50%; background: var(--yp-bg); display: grid; place-items: center; font-size: 28px; }

/* Budget cards */
.yp-budget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .yp-budget-grid { grid-template-columns: repeat(4, 1fr); } }
.yp-budget-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); color: var(--yp-ink); transition: all .15s; }
.yp-budget-card:hover { border-color: var(--yp-accent); text-decoration: none; }
.yp-budget-card__icon { font-size: 28px; color: var(--yp-accent); margin-bottom: 4px; }
.yp-budget-card strong { font-size: 17px; }
.yp-budget-card small { color: var(--yp-muted); font-size: 13px; }

/* Cat grid */
.yp-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .yp-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.yp-cat-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 8px; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); color: var(--yp-ink); }
.yp-cat-card:hover { border-color: var(--yp-accent); text-decoration: none; }
.yp-cat-card__media { font-size: 36px; }

/* Card grid (guides / products) */
.yp-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .yp-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .yp-card-grid { grid-template-columns: repeat(4, 1fr); } }

.yp-feature-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); overflow: hidden; color: var(--yp-ink); transition: all .15s; }
.yp-feature-card:hover { box-shadow: var(--yp-shadow); transform: translateY(-2px); text-decoration: none; }
.yp-feature-card__media { aspect-ratio: 16/10; background: var(--yp-line-soft); }
.yp-feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.yp-feature-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.yp-feature-card__body h3 { font-size: 16px; margin-bottom: 6px; }
.yp-feature-card__body p { color: var(--yp-muted); font-size: 14px; flex: 1; }

/* Product card */
.yp-product-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); overflow: hidden; }
.yp-product-card__media { aspect-ratio: 1/1; background: var(--yp-line-soft); padding: 16px; display: grid; place-items: center; }
.yp-product-card__media img { max-height: 100%; width: auto; object-fit: contain; }
.yp-product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.yp-product-card__title { font-size: 15px; margin: 0; }
.yp-product-card__sum { color: var(--yp-muted); font-size: 13px; flex: 1; }
.yp-product-card__bestfor { background: var(--yp-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: var(--yp-ink-soft); }
.yp-product-price { display: inline-flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--yp-success-50); border: 1px solid #bbf7d0; border-radius: var(--yp-radius-sm); padding: 8px 10px; color: var(--yp-ink); }
.yp-product-price span { color: var(--yp-ink-soft); font-size: 12px; font-weight: 600; }
.yp-product-price strong { color: var(--yp-success); font-size: 20px; line-height: 1; }
.yp-product-price--compact { width: 100%; margin: 4px 0 8px; }
.yp-product-price--compact strong, .yp-product-price--inline strong { font-size: 17px; }
.yp-product-price--inline { width: fit-content; margin: 0 0 8px; }
.yp-product-price--hero { width: 100%; margin: 0 0 12px; padding: 12px 14px; }
.yp-product-price--hero strong { font-size: 26px; }

/* Rating */
.yp-rating { color: #fbbf24; font-size: 14px; }
.yp-rating small { color: var(--yp-ink-soft); font-size: 12px; margin-left: 4px; }
.yp-rating--lg { font-size: 18px; }
.yp-rating-stars { color: #fbbf24; }

/* How it works */
.yp-how__steps { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .yp-how__steps { grid-template-columns: repeat(3, 1fr); } }
.yp-how__step { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 24px; text-align: center; }
.yp-how__num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yp-accent-50); color: var(--yp-accent); font-weight: 700; margin-bottom: 8px; }
.yp-how__step strong { display: block; font-size: 17px; margin-bottom: 8px; }
.yp-how__step p { color: var(--yp-muted); font-size: 14px; margin: 0; }

/* Footer */
.yp-footer { background: var(--yp-ink); color: #ddd; padding: 48px 0 0; margin-top: 48px; }
.yp-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; padding: 0 16px; }
@media (min-width: 768px) { .yp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 2fr; padding: 0 24px; } }
.yp-footer h4 { color: white; margin: 0 0 12px; }
.yp-footer ul { list-style: none; padding: 0; margin: 0; }
.yp-footer li { margin-bottom: 6px; }
.yp-footer a { color: #ccc; }
.yp-footer a:hover { color: white; }
.yp-footer__about p { color: #aaa; font-size: 14px; }
.yp-social { display: flex; gap: 8px; margin-top: 12px; }
.yp-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); }
.yp-footer__disclosure p { font-size: 12px; color: #999; }
.yp-footer__copy { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; margin-top: 32px; color: #999; font-size: 13px; }

/* Listing header */
.yp-listing__header { margin-bottom: 32px; }
.yp-listing__header h1 { margin-bottom: 8px; }
.yp-listing__header p { color: var(--yp-muted); }

/* Breadcrumb */
.yp-breadcrumb { font-size: 14px; color: var(--yp-muted); margin-bottom: 12px; }
.yp-breadcrumb a { color: var(--yp-muted); }
.yp-breadcrumb a:hover { color: var(--yp-accent); }

/* Article */
.yp-article { padding: 32px 0; }
.yp-article__hero { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 1024px) { .yp-article__hero { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.yp-article__lead { font-size: 17px; color: var(--yp-ink-soft); }
.yp-article__hero-media img { border-radius: var(--yp-radius-lg); aspect-ratio: 4/3; object-fit: cover; }
.yp-article__disclosure { background: var(--yp-bg); padding: 12px 16px; border-radius: var(--yp-radius-sm); margin: 16px 0 24px; color: var(--yp-muted); font-size: 13px; }
.yp-article__body > .yp-block { margin-bottom: 32px; }

/* Generic block */
.yp-block { margin-bottom: 32px; }
.yp-block__title { font-size: 22px; margin-bottom: 16px; }
.yp-block__subtitle { font-size: 17px; margin-bottom: 12px; }

/* Blocks */
.yp-block-intro p { font-size: 17px; line-height: 1.7; color: var(--yp-ink-soft); }
.yp-block-trust_badges .yp-trust-row { background: white; padding: 12px 16px; border-radius: var(--yp-radius); border: 1px solid var(--yp-line); }

/* Quick picks */
.yp-quick-picks { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .yp-quick-picks { grid-template-columns: repeat(3, 1fr); } }
.yp-quick-pick { background: var(--yp-accent-50); border: 1px solid #ffe6cc; border-radius: var(--yp-radius); overflow: hidden; position: relative; padding: 16px; }
.yp-quick-pick__badge { display: inline-block; background: var(--yp-accent); color: white; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.yp-quick-pick__media { display: block; aspect-ratio: 4/3; background: white; border-radius: var(--yp-radius-sm); padding: 16px; margin-bottom: 12px; }
.yp-quick-pick__media img { width: 100%; height: 100%; object-fit: contain; }
.yp-quick-pick__title { font-size: 16px; margin: 0 0 6px; }

/* Comparison table */
.yp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yp-compare-table { width: 100%; border-collapse: collapse; min-width: 600px; background: white; border-radius: var(--yp-radius); overflow: hidden; border: 1px solid var(--yp-line); }
.yp-compare-table th, .yp-compare-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--yp-line-soft); font-size: 14px; }
.yp-compare-table th { background: var(--yp-bg); font-weight: 600; color: var(--yp-ink-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.yp-compare-table__cell { display: flex; align-items: center; gap: 8px; }
.yp-compare-table__cell img { border-radius: 4px; }

/* Product list (ranked) */
.yp-product-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.yp-product-list__item { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 16px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .yp-product-list__item { grid-template-columns: 140px 1fr 200px; align-items: start; }
}
.yp-product-list__media { position: relative; aspect-ratio: 1/1; background: var(--yp-line-soft); border-radius: var(--yp-radius-sm); padding: 12px; }
.yp-product-list__media img { width: 100%; height: 100%; object-fit: contain; }
.yp-product-list__rank { position: absolute; top: 8px; left: 8px; background: var(--yp-accent); color: white; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.yp-product-list__title { font-size: 17px; margin: 0 0 6px; }
.yp-product-list__why { background: var(--yp-bg); padding: 8px 12px; border-radius: var(--yp-radius-sm); font-size: 14px; margin: 8px 0; }
.yp-product-list__reason { color: var(--yp-ink-soft); font-size: 14px; margin: 0 0 8px; }

/* Pros / Cons box */
.yp-procons { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .yp-procons { grid-template-columns: 1fr 1fr; } }
.yp-procons__col { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-sm); padding: 12px; }
.yp-procons__col h3, .yp-procons__col strong { font-size: 14px; }
.yp-procons__col--pros h3, .yp-procons__col--pros strong { color: var(--yp-success); }
.yp-procons__col--cons h3, .yp-procons__col--cons strong { color: var(--yp-error); }
.yp-procons__col ul { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.yp-procons__col li { margin-bottom: 4px; }

/* Info box */
.yp-info-box { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 16px; }
.yp-info-box__title { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.yp-info-box__title span { color: var(--yp-accent); }
.yp-info-box--positive { background: var(--yp-success-50); border-color: #bbf7d0; }
.yp-info-box--positive .yp-info-box__title { color: var(--yp-success); }
.yp-info-box--warning { background: #fffbeb; border-color: #fde68a; }
.yp-info-box--warning .yp-info-box__title { color: var(--yp-warning); }
.yp-info-box--accent { background: var(--yp-accent-50); border-color: #fed7aa; }
.yp-info-box--accent .yp-info-box__title { color: var(--yp-accent-700); }

/* Tag chips */
.yp-tag { display: inline-block; background: white; border: 1px solid var(--yp-line); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin-right: 4px; }

/* Feature list */
.yp-feature-list { list-style: none; padding: 0; margin: 0; }
.yp-feature-list li { padding: 6px 0; display: flex; gap: 8px; }
.yp-feature-list__check { color: var(--yp-success); font-weight: 700; }

/* Buying guide */
.yp-buying-guide { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .yp-buying-guide { grid-template-columns: repeat(4, 1fr); } }
.yp-buying-guide__card { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 16px; }
.yp-buying-guide__title { font-size: 15px; }
.yp-buying-guide__card p { color: var(--yp-muted); font-size: 14px; margin: 0; }

/* FAQ */
.yp-faq { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); }
.yp-faq__item { border-bottom: 1px solid var(--yp-line-soft); }
.yp-faq__item:last-child { border-bottom: 0; }
.yp-faq__q { padding: 14px 16px; font-weight: 600; cursor: pointer; min-height: var(--yp-tap); display: flex; align-items: center; }
.yp-faq__q::-webkit-details-marker { display: none; }
.yp-faq__q::after { content: "▼"; margin-left: auto; font-size: 12px; color: var(--yp-muted); transition: transform .15s; }
.yp-faq__item[open] .yp-faq__q::after { transform: rotate(180deg); }
.yp-faq__a { padding: 0 16px 16px; color: var(--yp-ink-soft); }

/* Related cards */
.yp-related-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .yp-related-grid { grid-template-columns: repeat(3, 1fr); } }
.yp-related-card { display: flex; gap: 12px; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 12px; color: var(--yp-ink); }
.yp-related-card:hover { text-decoration: none; border-color: var(--yp-accent); }
.yp-related-card__media { width: 64px; height: 64px; flex-shrink: 0; background: var(--yp-line-soft); border-radius: var(--yp-radius-sm); }
.yp-related-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--yp-radius-sm); }
.yp-related-card__body h4 { font-size: 14px; margin: 0 0 4px; }

/* Final verdict */
.yp-verdict { display: flex; gap: 16px; align-items: flex-start; background: var(--yp-accent-50); border: 1px solid #fed7aa; border-radius: var(--yp-radius); padding: 20px; }
.yp-verdict__icon { font-size: 32px; }
.yp-verdict__title { color: var(--yp-accent-700); }

/* User feedback */
.yp-feedback { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 20px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .yp-feedback { grid-template-columns: 200px 1fr 1fr; } }
.yp-feedback__avg { font-size: 36px; font-weight: 700; }
.yp-feedback__bars { display: flex; flex-direction: column; gap: 4px; }
.yp-feedback__bar { display: grid; grid-template-columns: 30px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.yp-feedback__track { background: var(--yp-line-soft); border-radius: 999px; height: 8px; overflow: hidden; }
.yp-feedback__fill { display: block; height: 100%; background: var(--yp-accent); }
.yp-feedback__quote { background: var(--yp-bg); border-radius: var(--yp-radius-sm); padding: 12px; font-size: 14px; font-style: italic; margin: 0; }
.yp-feedback__quote cite { display: block; margin-top: 6px; font-size: 12px; color: var(--yp-muted); font-style: normal; }

/* Review hero */
.yp-review { padding-bottom: 96px; }
.yp-review__hero { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 16px 0 24px; }
@media (min-width: 1024px) { .yp-review__hero { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.yp-review__media { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-lg); overflow: hidden; padding: 32px; }
.yp-review__main-img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.yp-review__sidebar { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-lg); padding: 24px; position: sticky; top: 80px; }
.yp-review__title { margin: 0 0 12px; }
.yp-review__lead { color: var(--yp-ink-soft); }
.yp-review__disclosure { display: block; color: var(--yp-muted); font-size: 12px; margin-top: 12px; text-align: center; }

/* Sticky mobile CTA */
.yp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--yp-line); padding: 12px 16px; box-shadow: 0 -4px 12px rgba(0,0,0,.06); z-index: 40; }
@media (min-width: 1024px) { .yp-sticky-cta { display: none; } }

/* Gift Finder wizard */
.yp-finder { max-width: 900px; margin: 0 auto; }
.yp-finder__header { text-align: center; margin-bottom: 32px; }
.yp-stepper { list-style: none; counter-reset: step; padding: 0; margin: 0 0 32px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.yp-stepper li { display: flex; align-items: center; gap: 8px; color: var(--yp-muted); font-size: 14px; }
.yp-stepper li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yp-line); color: var(--yp-muted); font-weight: 700; }
.yp-stepper li.is-active { color: var(--yp-accent); font-weight: 600; }
.yp-stepper li.is-active span { background: var(--yp-accent); color: white; }
.yp-finder-wizard { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-lg); padding: 24px; }
.yp-step { border: 0; padding: 0; margin: 0; display: none; }
.yp-step.is-active { display: block; }
.yp-step legend { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.yp-hint { color: var(--yp-muted); margin-bottom: 16px; }
.yp-options-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .yp-options-grid { grid-template-columns: repeat(4, 1fr); } }
.yp-option-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: white; border: 2px solid var(--yp-line); border-radius: var(--yp-radius); cursor: pointer; align-items: center; text-align: center; }
.yp-option-card:hover { border-color: var(--yp-accent); }
.yp-option-card input { position: absolute; opacity: 0; }
.yp-option-card:has(input:checked) { border-color: var(--yp-accent); background: var(--yp-accent-50); }
.yp-option-card__media { font-size: 32px; }
.yp-finder__actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }

/* ===== Admin ===== */
.yp-admin { background: var(--yp-bg); display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 1023px) { .yp-admin { grid-template-columns: 1fr; } }
.yp-sidebar { background: white; border-right: 1px solid var(--yp-line); padding: 16px; }
@media (max-width: 1023px) { .yp-sidebar { border-right: 0; border-bottom: 1px solid var(--yp-line); } }
.yp-sidebar__brand { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; padding: 8px; margin-bottom: 16px; }
.yp-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.yp-sidebar__nav a { padding: 10px 12px; border-radius: var(--yp-radius-sm); color: var(--yp-ink); font-size: 14px; }
.yp-sidebar__nav a:hover { background: var(--yp-bg); text-decoration: none; }
.yp-sidebar__nav a.is-active { background: var(--yp-accent-50); color: var(--yp-accent); font-weight: 600; }

.yp-admin__main { padding: 16px; }
@media (min-width: 768px) { .yp-admin__main { padding: 24px 32px; } }
.yp-admin__top { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.yp-admin__top-actions { display: flex; align-items: center; gap: 16px; }
.yp-admin__user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.yp-admin__user small { color: var(--yp-muted); font-size: 12px; }
.yp-admin__page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.yp-admin__page-header h1 { margin: 0; }
.yp-admin__page-actions { display: flex; gap: 8px; }
.yp-admin__sub { color: var(--yp-muted); margin: 4px 0 0; }

/* Cards */
.yp-card { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 20px; margin-bottom: 16px; }
.yp-card h2 { font-size: 17px; margin-bottom: 12px; }
.yp-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.yp-card__header h2 { margin: 0; }

/* Stat row */
.yp-stat-row { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 768px) { .yp-stat-row { grid-template-columns: repeat(5, 1fr); } }
.yp-stat { display: flex; align-items: center; gap: 12px; background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); padding: 16px; }
.yp-stat__icon { font-size: 24px; width: 40px; height: 40px; background: var(--yp-accent-50); display: grid; place-items: center; border-radius: 50%; }
.yp-stat__label { display: block; color: var(--yp-muted); font-size: 12px; }
.yp-stat strong { font-size: 22px; }

/* AI banner */
.yp-ai-banner { background: linear-gradient(90deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa; border-radius: var(--yp-radius); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.yp-ai-banner__icon { font-size: 24px; }
.yp-ai-banner small { display: block; color: var(--yp-ink-soft); }

/* Action grid */
.yp-action-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .yp-action-grid { grid-template-columns: repeat(4, 1fr); } }
.yp-action-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--yp-line); border-radius: var(--yp-radius); background: var(--yp-bg); color: var(--yp-ink); }
.yp-action-card:hover { border-color: var(--yp-accent); text-decoration: none; }
.yp-action-card__icon { font-size: 24px; }
.yp-action-card small { color: var(--yp-muted); font-size: 13px; }

/* Tables */
.yp-table { width: 100%; border-collapse: collapse; }
.yp-table th, .yp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--yp-line-soft); font-size: 14px; vertical-align: middle; }
.yp-table th { background: var(--yp-bg); font-weight: 600; color: var(--yp-ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.yp-table__product { display: flex; align-items: center; gap: 8px; }
.yp-table__product img { border-radius: 4px; }

/* Badges */
.yp-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.yp-badge--success { background: var(--yp-success-50); color: var(--yp-success); }
.yp-badge--warning { background: #fef3c7; color: var(--yp-warning); }
.yp-badge--error   { background: #fee2e2; color: var(--yp-error); }
.yp-badge--info    { background: #dbeafe; color: var(--yp-info); }
.yp-badge--neutral { background: var(--yp-line-soft); color: var(--yp-ink-soft); }

/* Grid 2 */
.yp-grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .yp-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Edit grid (2-column with sticky aside) */
.yp-edit-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .yp-edit-grid { grid-template-columns: 1fr 380px; align-items: start; } }
.yp-edit-grid__side > .yp-card { position: sticky; top: 16px; }
.yp-form-grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .yp-form-grid-2 { grid-template-columns: 1fr 1fr; } }
.yp-field--span2 { grid-column: 1/-1; }

/* Block editor */
.yp-block-card { background: var(--yp-bg); border: 1px solid var(--yp-line); border-radius: var(--yp-radius-sm); padding: 12px; margin-bottom: 8px; }
.yp-block-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.yp-block-card__actions { display: flex; gap: 4px; }
.yp-block-card__actions button { background: white; border: 1px solid var(--yp-line); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.yp-block-card textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; padding: 8px; border: 1px solid var(--yp-line); border-radius: 4px; }
.yp-block-adder { display: flex; gap: 8px; padding: 12px; background: var(--yp-accent-50); border-radius: var(--yp-radius-sm); border: 1px dashed var(--yp-accent); }
.yp-block-adder select { flex: 1; min-height: 36px; }

/* Filters */
.yp-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.yp-filters input, .yp-filters select { flex: 1; min-width: 200px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-sm); }

/* Flash */
.yp-flash { padding: 12px 16px; border-radius: var(--yp-radius-sm); margin-bottom: 16px; font-weight: 500; }
.yp-flash--success { background: var(--yp-success-50); color: var(--yp-success); border: 1px solid #bbf7d0; }
.yp-flash--error { background: #fee2e2; color: var(--yp-error); border: 1px solid #fecaca; }

/* Login */
.yp-login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.yp-login { width: 100%; max-width: 400px; }
.yp-login__card { background: white; border-radius: var(--yp-radius-lg); padding: 32px; box-shadow: var(--yp-shadow-lg); }
.yp-login__card h1 { font-size: 22px; margin: 16px 0 24px; }
.yp-login__back { text-align: center; margin-top: 16px; }

/* Preview pane */
.yp-preview { background: var(--yp-bg); border-radius: var(--yp-radius-sm); padding: 16px; }
.yp-preview__img { aspect-ratio: 1/1; object-fit: contain; background: white; border-radius: var(--yp-radius-sm); padding: 12px; }
.yp-preview__placeholder { aspect-ratio: 1/1; display: grid; place-items: center; background: white; border-radius: var(--yp-radius-sm); color: var(--yp-muted); font-size: 14px; }

/* Bar chart (analytics) */
.yp-bar-chart { display: flex; gap: 4px; align-items: flex-end; height: 160px; padding: 16px 0; }
.yp-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.yp-bar__fill { width: 100%; background: var(--yp-accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.yp-bar small { font-size: 10px; color: var(--yp-muted); }

/* Misc */
.yp-pre { background: var(--yp-bg); padding: 12px; border-radius: var(--yp-radius-sm); overflow-x: auto; font-size: 12px; font-family: ui-monospace, monospace; }
.yp-kv { width: 100%; }
.yp-kv th { text-align: left; padding: 6px 12px; color: var(--yp-muted); font-weight: 500; width: 200px; }
.yp-kv td { padding: 6px 0; }
.yp-revisions { list-style: none; padding: 0; margin: 0; }
.yp-revisions li { padding: 8px 0; border-bottom: 1px solid var(--yp-line-soft); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.yp-media-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .yp-media-grid { grid-template-columns: repeat(6, 1fr); } }
.yp-media-tile { background: white; border: 1px solid var(--yp-line); border-radius: var(--yp-radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.yp-media-tile img { aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; }
.yp-media-tile__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.yp-error { text-align: center; padding: 80px 16px; }
.yp-error__art { font-size: 96px; font-weight: 800; color: var(--yp-accent); }

/* Prose pages */
.yp-prose { max-width: 720px; }
.yp-prose h1 { margin-bottom: 16px; }
.yp-prose ul { padding-left: 20px; }
.yp-prose li { margin-bottom: 6px; }

/* ========================================================
   Site Assets — replace emoji with <img>
   Asset images sit inside their original spans/divs;
   ensure consistent sizing + circular crop where needed.
   ======================================================== */

/* generic img inside icon containers */
.yp-stat__icon img,
.yp-action-card__icon img,
.yp-ai-banner__icon img,
.yp-trust-row__icon img,
.yp-verdict__icon img,
.yp-info-box__title img,
.yp-logo__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* logo mark — keep crisp */
.yp-logo__mark { width: 28px; height: 28px; display: inline-flex; }
.yp-logo__mark img { width: 28px; height: 28px; }

/* hero art — full-bleed photo */
.yp-hero__art {
  aspect-ratio: 4/3;
  border-radius: var(--yp-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #fed7aa, #fef3c7);
  display: block;
}
img.yp-hero__art { width: 100%; height: auto; object-fit: cover; }

/* recipient pill card — circular */
.yp-pill-card__media { overflow: hidden; }
.yp-pill-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* category card — landscape photo */
.yp-cat-card__media {
  width: 100%; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--yp-radius); background: var(--yp-bg);
}
.yp-cat-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* placeholder while asset is generating */
.yp-asset-placeholder {
  display: inline-block;
  width: 1em; height: 1em;
  background: var(--yp-accent-50);
  border-radius: 4px;
  vertical-align: middle;
}