@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --font-head: "Source Serif 4", "Georgia", serif;
  --font-body: "Karla", "Helvetica Neue", "Helvetica", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-2xs: 11px; --text-xs: 13px; --text-sm: 15px; --text-md: 17px;
  --text-lg: 19px; --text-xl: 23px; --text-2xl: 28px; --text-3xl: 34px;
  --text-4xl: 42px; --text-5xl: 54px;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.6; --leading-loose: 1.75;
  --tracking-wide: 0.12em; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;
  --color-page: #fafaf8; --color-surface: #ffffff; --color-surface-warm: #f0f1ee;
  --color-ink: #14161a; --color-ink-soft: #3d434b; --color-ink-faint: #5f666f;
  --color-ink-chrome: #8b929b; --color-line: #e3e4e1; --color-line-strong: #c8cac6;
  --color-accent: #0d5f6d; --color-accent-dark: #094651; --color-accent-soft: #e2eef0;
  --color-on-accent: #ffffff;
  --color-cta: #f5a524; --color-cta-dark: #d98c0b; --color-cta-line: #b9760a; --color-on-cta: #14161a;
  --color-star: #a8710a; --color-star-empty: #d5d7d3;
  --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px;
  --space-10: 96px; --space-11: 128px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --border-thin: 1px; --border-thick: 2px; --border-rule: 4px;
  --shadow-card: 0 1px 2px rgba(36, 31, 26, 0.04), 0 8px 24px rgba(36, 31, 26, 0.06);
  --measure-page: 1180px; --measure-text: 680px; --media-review: 300px; --star-size: 17px;
}

/* ---- dhs-roundup: curated comparison table, category hub pages ---- */
.dhs-roundup { font-family: var(--font-body); color: var(--color-ink); }
.dhs-roundup-note {
  font-size: var(--text-sm); color: var(--color-ink-faint);
  margin: 0 0 var(--space-4);
}
.dhs-roundup-table {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dhs-roundup-head {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 1.3fr 1fr 1.3fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-chrome);
}
.dhs-roundup-row {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 1.3fr 1fr 1.3fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.dhs-roundup-row:last-child { border-bottom: none; }
.dhs-roundup-product {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--color-ink); min-width: 0;
}
.dhs-roundup-product img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm);
  background: var(--color-surface-warm); flex: 0 0 auto;
}
.dhs-roundup-product .dhs-ph {
  width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-chrome);
  background: var(--color-surface-warm); border-radius: var(--radius-sm);
}
.dhs-roundup-product-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dhs-roundup-pick-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  color: var(--color-accent); font-weight: var(--weight-semibold);
}
.dhs-roundup-title {
  font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); line-height: var(--leading-snug);
}
.dhs-roundup-product:hover .dhs-roundup-title { color: var(--color-accent); }
.dhs-roundup-cell { font-size: var(--text-sm); color: var(--color-ink-soft); }
.dhs-roundup-rating { display: flex; align-items: center; gap: var(--space-1); }
.dhs-roundup-rating .dhs-star { font-size: 14px; }
.dhs-roundup-cta {
  justify-self: start;
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs);
  color: var(--color-on-cta); background: var(--color-cta); border: 1px solid var(--color-cta-line);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  text-decoration: none; white-space: nowrap;
}
.dhs-roundup-cta:hover { background: var(--color-cta-dark); }
.dhs-roundup-footnote { font-size: var(--text-xs); color: var(--color-ink-chrome); margin: var(--space-3) 0 0; }
@media (max-width: 780px) {
  .dhs-roundup-head { display: none; }
  .dhs-roundup-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .dhs-roundup-cell::before { content: attr(data-label) ": "; font-weight: var(--weight-semibold); }
  .dhs-roundup-cta { justify-self: stretch; text-align: center; }
}

/* ---- dhs-trust-row: hub-page stat pills rendered via [dhs_hub_stats] ----
   (these classes pre-exist in the page design; the layout rules were only
   ever defined per-element by Elementor's own atomic style system, so a
   shortcode-rendered instance with plain HTML needs its own CSS here) */
.dhs-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: var(--font-body);
}
.dhs-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dhs-dot, .dhs-dot-sage {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex: 0 0 auto;
}
.dhs-trust-item-text {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* ---- dhs-button-secondary: pill outline button (also borrowed, same
   Elementor-atomic-only-styling gap as .dhs-trust-row above) ---- */
.dhs-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  background: transparent;
}
.dhs-button-secondary:hover { border-color: var(--color-ink-chrome); }

/* ---- dhs-sort-btn: functional "Sort by price" toggle ---- */
.dhs-sort-btn { cursor: pointer; }

/* ---- dhs-ph-hero: real photo for the Home/About hero placeholder ---- */
.dhs-ph.dhs-ph-hero {
  background-image: url('https://dailyhomesolvers.com/wp-content/uploads/2026/09/hero-kitchen-counter.jpg');
  background-size: cover;
  background-position: center;
}
.dhs-ph-hero .dhs-ph-label { display: none; }

/* ---- dhs-featured-grid: homepage "Featured this month" ---- */
.dhs-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.dhs-featured-grid .dhs-pick-body { gap: var(--space-2); }
@media (max-width: 900px) {
  .dhs-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dhs-featured-grid { grid-template-columns: 1fr; }
}

/* ---- dhs-articles-grid: homepage "Latest articles" ---- */
.dhs-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  font-family: var(--font-body);
}
.dhs-article-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  text-decoration: none; color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.dhs-article-media {
  aspect-ratio: 1 / 1;
  background: var(--color-surface-warm);
  overflow: hidden;
}
.dhs-article-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhs-article-media .dhs-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-chrome);
}
.dhs-article-cat {
  margin: var(--space-3) var(--space-4) 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent); font-weight: var(--weight-semibold);
}
.dhs-article-title {
  margin: 0 var(--space-4);
  font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-ink);
}
.dhs-article-card:hover .dhs-article-title { color: var(--color-accent); }
.dhs-article-meta {
  margin: 0 var(--space-4) var(--space-4);
  font-size: var(--text-xs); color: var(--color-ink-chrome);
}
@media (max-width: 900px) {
  .dhs-articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dhs-articles-grid { grid-template-columns: 1fr; }
}

/* ---- dhs-picks grid: real published reviews, category hub pages ---- */
.dhs-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
  font-family: var(--font-body);
  color: var(--color-ink);
}
.dhs-pick-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dhs-pick-media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-warm);
  overflow: hidden;
}
.dhs-pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhs-pick-media .dhs-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-chrome);
}
.dhs-pick-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.dhs-pick-title {
  font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: var(--text-md); line-height: var(--leading-snug);
  color: var(--color-ink); text-decoration: none;
}
.dhs-pick-title:hover { color: var(--color-accent); }
.dhs-pick-rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-faint); }
.dhs-pick-rating .dhs-star { font-size: var(--star-size); line-height: 1; }
.dhs-pick-rating .dhs-star-full { color: var(--color-star); }
.dhs-pick-rating .dhs-star-empty { color: var(--color-star-empty); }
.dhs-pick-rating-num { font-weight: var(--weight-semibold); color: var(--color-ink); }
.dhs-pick-teaser {
  font-size: var(--text-sm); line-height: var(--leading-body);
  color: var(--color-ink-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dhs-pick-footer {
  margin-top: auto; padding-top: var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.dhs-pick-price { font-family: var(--font-head); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-ink); }
.dhs-pick-cta {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs);
  color: var(--color-on-cta); background: var(--color-cta); border: 1px solid var(--color-cta-line);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  text-decoration: none; white-space: nowrap;
}
.dhs-pick-cta:hover { background: var(--color-cta-dark); }
@media (max-width: 560px) {
  .dhs-picks-grid { grid-template-columns: 1fr; }
}

.dhs-review-wrap * { box-sizing: border-box; }
.dhs-review-wrap a { color: var(--color-accent); text-decoration: none; }
.dhs-review-wrap a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.dhs-review-wrap h1, .dhs-review-wrap h2, .dhs-review-wrap h3 {
  margin: 0; font-family: var(--font-head); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: -0.01em;
}

.dhs-review-wrap { background: var(--color-page); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); }
.dhs-review-main { display: flex; flex-direction: column; gap: var(--space-9); padding: var(--space-9) var(--space-7) var(--space-10); }
.dhs-section-inner { width: 100%; max-width: var(--measure-page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }

.dhs-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-faint); }
.dhs-breadcrumb a { color: var(--color-ink-faint); }

.dhs-eyebrow { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); }
.dhs-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent); }

.dhs-h1 { font-size: var(--text-4xl); max-width: var(--measure-text); }
.dhs-byline { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }

.dhs-note-affiliate { display: flex; gap: var(--space-3); max-width: var(--measure-page); padding: var(--space-3) var(--space-4); background: var(--color-surface-warm); border-left: var(--border-rule) solid var(--color-accent); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-ink-soft); }

.dhs-quickfacts { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; width: 100%; padding: var(--space-5); background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.dhs-quickfacts-media { flex: 0 0 auto; width: 220px; }
.dhs-quickfacts-media img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.dhs-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  padding: var(--space-4);
  background-color: var(--color-surface-warm);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(138, 128, 115, 0.16) 0px,
    rgba(138, 128, 115, 0.16) 1px,
    rgba(138, 128, 115, 0) 1px,
    rgba(138, 128, 115, 0) 9px
  );
  border: var(--border-thin) dashed var(--color-line-strong);
  border-radius: var(--radius-md);
}
.dhs-ph-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-chrome);
  text-align: center;
}
.dhs-quickfacts-body { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dhs-price-row { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.dhs-price { font-family: var(--font-head); font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.dhs-price-note { font-size: var(--text-xs); color: var(--color-ink-faint); }

.dhs-stars { display: flex; align-items: center; gap: var(--space-2); }
.dhs-stars-glyphs { display: flex; gap: 4px; }
.dhs-star { font-size: var(--star-size); color: var(--color-star); }
.dhs-star-empty { color: var(--color-star-empty); }
.dhs-stars-value { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.dhs-stars-count { font-size: var(--text-xs); color: var(--color-ink-faint); }

.dhs-button-amazon { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-pill); font-weight: var(--weight-semibold); font-size: var(--text-sm); background: var(--color-cta); border: var(--border-thin) solid var(--color-cta-line); color: var(--color-on-cta); align-self: flex-start; }
.dhs-button-amazon:hover { background: var(--color-cta-dark); color: var(--color-on-cta); text-decoration: none; }

.dhs-prose { max-width: var(--measure-text); display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--color-ink-soft); }
.dhs-prose h2 { font-size: var(--text-2xl); color: var(--color-ink); margin-top: var(--space-3); }
.dhs-prose h3 { font-size: var(--text-lg); color: var(--color-ink); }
.dhs-prose p { margin: 0; }

.dhs-box-disclosure { width: 100%; max-width: var(--measure-page); margin: 0 auto; padding: var(--space-5); background: var(--color-accent-soft); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-ink); }

.dhs-review-post .entry-title {
  font-family: var(--font-head);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  max-width: var(--measure-text);
  margin-left: auto;
  margin-right: auto;
}

.dhs-box-proscons { display: flex; flex-wrap: wrap; gap: var(--space-5); width: 100%; max-width: var(--measure-text); padding: var(--space-5); background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); }
.dhs-proscons-col { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 240px; min-width: 0; }
.dhs-proscons-title { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: var(--border-thin) solid var(--color-line); font-family: var(--font-head); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.dhs-proscons-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dhs-proscons-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--color-ink-soft); }
.dhs-mark-pro, .dhs-mark-con { display: flex; align-items: center; justify-content: center; width: var(--space-5); height: var(--space-5); flex: 0 0 auto; margin-top: var(--space-1); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.dhs-mark-pro { background: #e6f1e9; color: #1c6634; }
.dhs-mark-con { background: #fbe8e5; color: #9c2b1c; }

@media (max-width: 900px) {
  .dhs-review-main { padding: var(--space-7) var(--space-5) var(--space-9); }
  .dhs-h1 { font-size: var(--text-3xl); }
}

@media (max-width: 560px) {
  .dhs-review-main { padding: var(--space-6) var(--space-4) var(--space-8); }
  .dhs-h1 { font-size: var(--text-2xl); }
  .dhs-quickfacts { flex-direction: column; align-items: stretch; }
  .dhs-quickfacts-media { width: 100%; }
  .dhs-button-amazon { width: 100%; }
}

/* Logo image already carries the wordmark + tagline, so hide the
   redundant text title/tagline Astra renders next to it in the header. */
.ast-site-identity .ast-site-title-wrap { display: none; }
.ast-site-identity .site-logo-img img { height: auto; }