/* Article banner — thin hero strip above the H1 on listicles + buying guides.
 * 5:1 aspect on desktop, 4:1 on mobile. Photos must be composed for this
 * crop — subjects in the central horizontal band, empty backdrop above
 * and below — otherwise object-fit: cover slices the subject. */
.article-banner {width: 100%; margin: 0 0 24px; overflow: hidden; border-radius: 8px; aspect-ratio: 5 / 1; background: #fbfaf7;}
.article-banner .article-banner-image {width: 100%; height: 100%; object-fit: cover; object-position: center 85%; display: block;}
@media (max-width: 767px) {
    .article-banner {aspect-ratio: 4 / 1; margin-bottom: 16px;}
}

/* Review dev sandbox — experimental product-block-style ATF rebuild.
 * Single bordered card, image left in a fixed 280×280 well so portrait
 * bottles don't stretch the frame, body right with the editorial facts
 * (labeled price + cost-per-wash + S&S badge + verdict + CTA). Same visual
 * vocabulary as the listicle product-block. NOT live yet — only renders on
 * the private /review-dev-preview/ page that uses this template. */
.review-dev .dev-banner {margin: 0 0 16px; padding: 8px 14px; background: #fff3cd; border: 1px dashed #d4a017; border-radius: 4px; color: #5a4a10; font-size: 13px;}
.review-dev .review-dev-block {display: flex; flex-direction: column; gap: 16px; padding: 16px; margin: 16px 0; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px;}
.review-dev .review-dev-block-image {flex-shrink: 0; width: 100%; max-width: 360px; height: 360px; align-self: center; background: #fbfaf7; border-radius: 4px; padding: 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.review-dev .review-dev-block-image img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;}
.review-dev .review-dev-block-body {flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0;}
.review-dev .review-dev-block-facts {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.review-dev .review-dev-block-price {font-size: 26px; font-weight: 800; color: #1a1a1a; line-height: 1;}
.review-dev .review-dev-block-price-where {font-size: 14px; font-weight: 500; color: #666; margin-left: 4px;}
.review-dev .review-dev-block-cost {display: inline-block; padding: 4px 10px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 14px;}
.review-dev .review-dev-block-ss {display: inline-block; padding: 4px 10px; background: #fbf6e5; color: #5a4a10; border-radius: 4px; font-weight: 700; font-size: 13px;}
.review-dev .review-dev-block-verdict {background: #f0f9f3; border-left: 4px solid #0d8048; border-radius: 4px; padding: 12px 16px;}
.review-dev .review-dev-block-verdict-label {display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #0a6238; margin-bottom: 4px;}
.review-dev .review-dev-block-verdict p {margin: 0; font-size: 15px; line-height: 1.5; color: #1a1a1a;}
.review-dev .review-dev-block-cta {display: flex; flex-wrap: wrap; align-items: center; gap: 14px;}
.review-dev .review-dev-block-cta .affiliate-link {display: inline-block; padding: 12px 22px; background: #0d8048; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: 700; font-size: 15px;}
.review-dev .review-dev-block-cta .affiliate-link:hover {background: #0a6238; color: #ffffff;}
.review-dev .review-dev-block-checked {font-size: 13px; color: #777;}
@media (min-width: 768px) {
    .review-dev .review-dev-block {flex-direction: row; gap: 24px; padding: 20px; align-items: flex-start;}
    .review-dev .review-dev-block-image {align-self: flex-start; width: 360px; height: 360px; max-width: 360px;}
}

/* Shared template chrome — breadcrumbs, section titles, disclosure callout */
.breadcrumb {margin: 0 0 16px;}
.breadcrumb .breadcrumb-list {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px;}
.breadcrumb .breadcrumb-item {color: #666;}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {content: '/'; margin-right: 8px; color: #c8c8c8;}
.breadcrumb .breadcrumb-item a {color: #666; text-decoration: none;}
.breadcrumb .breadcrumb-item a:hover {color: #0d8048;}
.breadcrumb .breadcrumb-current {color: #1a1a1a; font-weight: 500;}
.section-title {margin: 32px 0 16px;}
.disclosure-callout {margin: 16px 0 24px; padding: 12px 16px; background: #fbf6e5; border-left: 3px solid #d4a017; border-radius: 4px; font-size: 13px; color: #5a4a10; max-width: none;}
.disclosure-callout a {color: #5a4a10; text-decoration: underline;}
.not-found-links {list-style: none; padding: 0; margin: 24px 0;}
.not-found-links li {margin-bottom: 8px;}

/* Homepage */
.home-hero {padding: 48px 0 32px; background: #ffffff; border-bottom: 1px solid #e5e5e5;}
.home-hero .home-hero-inner {display: flex; flex-direction: column; gap: 24px; align-items: flex-start;}
.home-hero .home-hero-text {flex: 1; min-width: 0;}
.home-hero .home-hero-image {flex: 0 0 100%; max-width: 100%;}
.home-hero .home-hero-image img {width: 100%; height: auto; border-radius: 8px; display: block;}
@media (min-width: 768px) {
    .home-hero.home-hero-has-image .home-hero-inner {flex-direction: row; align-items: center; gap: 40px;}
    .home-hero.home-hero-has-image .home-hero-image {flex: 0 0 45%; max-width: 45%;}
}
.home-hero .home-hero-title {margin: 0 0 12px; max-width: 720px;}
.home-hero .home-hero-sub {font-size: 18px; color: #444; max-width: 640px; margin-bottom: 24px;}
.home-hero .home-hero-ctas {display: flex; gap: 12px; flex-wrap: wrap;}
.home-hero .home-hero-cta {display: inline-block; padding: 12px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px;}
.home-hero .home-hero-cta-primary {background: #0d8048; color: #ffffff;}
.home-hero .home-hero-cta-primary:hover {background: #0a6238; color: #ffffff;}
.home-hero .home-hero-cta-secondary {background: #ffffff; color: #1a1a1a; border: 1px solid #c8c8c8;}
.home-hero .home-hero-cta-secondary:hover {background: #fbfaf7;}
.home-categories {padding: 32px 0;}
.home-categories .home-categories-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
.home-categories .category-card {display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; text-decoration: none;}
.home-categories .category-card:hover {border-color: #0d8048; box-shadow: 0 2px 8px rgba(13, 128, 72, 0.08);}
.home-categories .category-card-title {margin: 0; font-size: 16px; color: #1a1a1a;}
.home-categories .category-card-count {font-size: 13px; color: #777;}
@media (min-width: 600px) {
    .home-categories .home-categories-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1024px) {
    .home-hero {padding: 72px 0 48px;}
    .home-categories .home-categories-grid {grid-template-columns: repeat(5, 1fr);}
}
.home-featured {padding: 32px 0; background: #fbfaf7;}
.home-featured .home-featured-grid {display: grid; grid-template-columns: 1fr; gap: 16px;}
.home-featured .featured-card {padding: 16px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; display: flex; flex-direction: column; gap: 8px;}
.home-featured .featured-card-image {display: block;}
.home-featured .featured-card-image {width: 100%; height: 200px; background: #fbfaf7; border-radius: 4px; padding: 12px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden;}
.home-featured .featured-card-image img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;}
.home-featured .featured-card-title {margin: 0; font-size: 16px;}
.home-featured .featured-card-title a {color: #1a1a1a; text-decoration: none;}
.home-featured .featured-card-title a:hover {color: #0d8048;}
.home-featured .featured-card-cost {display: inline-block; padding: 4px 8px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 13px; align-self: flex-start;}
.home-featured .affiliate-link {display: inline-block; padding: 8px 14px; background: #0d8048; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: 600; font-size: 13px; text-align: center; margin-top: auto;}
.home-featured .affiliate-link:hover {background: #0a6238; color: #ffffff;}
@media (min-width: 768px) {
    .home-featured .home-featured-grid {grid-template-columns: repeat(3, 1fr);}
}
.home-howwework {padding: 32px 0;}
.home-howwework p {max-width: 720px; font-size: 16px;}

/* Category hub */
.category-hub .category-hub-header {margin-bottom: 24px;}
.category-hub .category-hub-intro {color: #333; max-width: 720px;}
.category-hub .category-cornerstones-grid {display: grid; grid-template-columns: 1fr; gap: 16px;}
.category-hub .cornerstone-card {display: block; padding: 20px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; text-decoration: none; color: #1a1a1a; transition: border-color 0.18s ease;}
.category-hub .cornerstone-card:hover {border-color: #0d8048;}
.category-hub .cornerstone-card-title {margin: 0 0 8px; font-size: 18px; color: #1a1a1a;}
.category-hub .cornerstone-card-excerpt {margin: 0; font-size: 14px; color: #555;}
.category-hub .cornerstone-card-arrow {display: inline-block; margin-top: 12px; color: #0d8048; font-weight: 700;}
.category-hub .category-top-picks-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.category-hub .product-card {display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; text-decoration: none; color: #1a1a1a;}
.category-hub .product-card:hover {border-color: #0d8048;}
.category-hub .product-card-image {width: 100%; height: 140px; background: #fbfaf7; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; overflow: hidden;}
.category-hub .product-card-image img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;}
.category-hub .product-card-title {margin: 0; font-size: 14px; line-height: 1.3;}
.category-hub .product-card-cost {display: inline-block; padding: 2px 6px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 12px; align-self: flex-start;}
.category-hub .category-guides-list {list-style: none; padding: 0;}
.category-hub .category-guides-list li {margin-bottom: 8px;}
.category-hub .category-guides-list a {color: #0d8048;}
@media (min-width: 768px) {
    .category-hub .category-cornerstones-grid {grid-template-columns: repeat(3, 1fr);}
    .category-hub .category-top-picks-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1024px) {
    .category-hub .category-top-picks-grid {grid-template-columns: repeat(6, 1fr);}
}

/* Cornerstone listicle */
.listicle .listicle-header {margin-bottom: 16px;}
.listicle .listicle-meta {color: #666; font-size: 14px;}
.listicle .listicle-meta-sep {margin: 0 6px; color: #c8c8c8;}
.listicle .related-guides {margin-top: 32px;}
.listicle .related-guides-list {list-style: none; padding: 0;}
.listicle .related-guides-list li {margin-bottom: 8px;}
.listicle .related-guides-list a {color: #0d8048;}

/* Buying guide */
.guide .guide-header {margin-bottom: 24px;}
.guide .guide-meta {color: #666; font-size: 14px;}
.guide .guide-meta-sep {margin: 0 6px; color: #c8c8c8;}
.guide .guide-children {margin-top: 40px;}
.guide .guide-children .section-title {margin-bottom: 20px;}
.guide .guide-children-list {list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px;}
.guide .guide-children-item {margin: 0;}
.guide .guide-children-link {display: flex; flex-direction: column; height: 100%; padding: 24px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; text-decoration: none; color: #1a1a1a; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;}
.guide .guide-children-link:hover {border-color: #0d8048; box-shadow: 0 8px 20px rgba(13, 128, 72, 0.10); color: #1a1a1a; transform: translateY(-2px);}
.guide .guide-children-title {margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.3;}
.guide .guide-children-excerpt {margin: 0; font-size: 14px; line-height: 1.5; color: #555;}
.guide .guide-children-arrow {display: inline-block; margin-top: auto; padding-top: 16px; color: #0d8048; font-weight: 700; font-size: 14px;}
@media (min-width: 768px) {
    .guide .guide-children-list {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1024px) {
    .guide .guide-children-list {grid-template-columns: repeat(3, 1fr);}
}

/* Product review */
.product-review .product-review-header {margin-bottom: 16px;}
.product-review .product-review-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px;}
.product-review .product-review-cost-badge {display: inline-block; padding: 4px 10px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 14px;}
.product-review .product-review-brand {color: #555; font-size: 14px;}
.product-review .product-review-author {color: #555; font-size: 14px;}
.product-review .product-review-hero {display: grid; grid-template-columns: 1fr; gap: 20px; margin: 24px 0;}
.product-review .product-review-hero-image {background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: center;}
.product-review .product-review-hero-image img {max-width: 100%; height: auto; max-height: 360px; object-fit: contain;}
.product-review .product-review-buybox {background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 10px;}
.product-review .product-review-buybox-price {margin: 0; font-size: 22px; font-weight: 700; color: #1a1a1a;}
.product-review .product-review-buybox-cost {margin: 0; display: inline-block; align-self: flex-start; padding: 4px 10px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 14px;}
.product-review .product-review-buybox-date {margin: 0; font-size: 13px; color: #777;}
.product-review .product-review-buybox .affiliate-link {display: block; padding: 14px 20px; background: #0d8048; color: #ffffff; text-align: center; text-decoration: none; border-radius: 4px; font-weight: 700; font-size: 16px;}
.product-review .product-review-buybox .affiliate-link:hover {background: #0a6238; color: #ffffff;}
.product-review .product-review-buybox-ss {margin: 0; font-size: 13px; color: #0a6238;}
.product-review .product-review-proscons {display: grid; grid-template-columns: 1fr; gap: 16px; margin: 32px 0;}
.product-review .product-review-pros, .product-review .product-review-cons {padding: 16px 20px; border-radius: 8px;}
.product-review .product-review-pros {background: #f0f9f3;}
.product-review .product-review-cons {background: #fdf5f5;}
.product-review .product-review-pros .section-title {color: #0a6238; margin-top: 0;}
.product-review .product-review-cons .section-title {color: #b34040; margin-top: 0;}
.product-review .product-review-pros ul, .product-review .product-review-cons ul {margin: 0; padding-left: 20px;}
.product-review .product-review-body {margin: 32px 0;}
.product-review .product-review-related-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.product-review .product-review-related .product-card {display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; text-decoration: none; color: #1a1a1a;}
.product-review .product-review-related .product-card:hover {border-color: #0d8048;}
.product-review .product-review-related .product-card-image {width: 100%; height: 140px; background: #fbfaf7; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; overflow: hidden;}
.product-review .product-review-related .product-card-image img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;}
.product-review .product-review-related .product-card-title {margin: 0; font-size: 14px; line-height: 1.3;}
.product-review .product-review-related .product-card-cost {display: inline-block; padding: 2px 6px; background: #e8f5ee; color: #0a6238; border-radius: 4px; font-weight: 700; font-size: 12px; align-self: flex-start;}
@media (min-width: 768px) {
    .product-review .product-review-hero {grid-template-columns: 1fr 320px;}
    .product-review .product-review-proscons {grid-template-columns: 1fr 1fr;}
    .product-review .product-review-related-grid {grid-template-columns: repeat(3, 1fr);}
}