.toilets-hero { padding: var(--space-64) 0 var(--space-48); background: radial-gradient(circle at top left, var(--color-primary-light) 0, #f5f8fc 45%, #f5f8fc 100%); }
.toilets-hero-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr); gap: var(--space-32); align-items: center; }
.toilets-breadcrumbs { font-size: var(--font-size-sm); margin-bottom: var(--space-16); color: var(--color-text-muted); }
.toilets-breadcrumbs ol { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.toilets-breadcrumbs li+li::before { content: "/"; margin-right: var(--space-8); color: var(--gray-400); }
.toilets-hero h1 { margin-bottom: var(--space-16); }
.toilets-hero p { max-width: 40rem; }
.toilets-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); margin-bottom: var(--space-24); }
.toilets-hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); font-size: var(--font-size-sm); }
.toilets-hero-meta-label { display: block; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.toilets-hero-meta-value { font-weight: 500; color: var(--color-text); }
.toilets-hero-media figure { max-width: 480px; margin-left: auto; }
.toilets-hero-media figcaption { margin-top: var(--space-8); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.toilets-section-header { text-align: left; margin-bottom: var(--space-24); max-width: 48rem; }
.toilets-section-header h2 { margin-bottom: var(--space-8); }
.toilets-why { padding: var(--space-48) 0; }
.toilets-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-products { padding: var(--space-48) 0; background-color: #eaf4ff; }
.toilets-products-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr); gap: var(--space-32); align-items: center; }
.toilets-products-media figcaption { margin-top: var(--space-8); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.toilets-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-products-cta { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.toilets-installation { padding: var(--space-48) 0; }
.toilets-installation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-installation a { font-weight: 500; }
.toilets-comparison { padding: var(--space-48) 0; background-color: var(--color-surface); }
.toilets-comparison-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr); gap: var(--space-24); align-items: flex-start; }
.toilets-comparison-list { margin-bottom: var(--space-24); color: var(--color-text-muted); }
.toilets-comparison-list li { margin-bottom: var(--space-8); }
.toilets-comparison-cta { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.toilets-comparison-highlight { background-color: var(--color-primary-light); border-color: rgba(37, 99, 235, 0.15); }
.toilets-reviews { padding: var(--space-48) 0; }
.toilets-reviews-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr); gap: var(--space-32); align-items: center; }
.toilets-reviews-media figcaption { margin-top: var(--space-8); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.toilets-reviews-cta { margin-top: var(--space-16); }
.toilets-water { padding: var(--space-48) 0; background-color: #f0f5ff; }
.toilets-water-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-delivery { padding: var(--space-48) 0; }
.toilets-delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-accessories { padding: var(--space-48) 0; background-color: var(--color-surface); }
.toilets-accessories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-accessories-cta { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.toilets-support { padding: var(--space-48) 0; }
.toilets-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-brands { padding: var(--space-48) 0; background-color: #eef3fb; }
.toilets-brands-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.toilets-final-cta { padding: var(--space-48) 0 var(--space-64); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #ffffff; }
.toilets-final-cta-inner { display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: center; justify-content: space-between; }
.toilets-final-cta h2 { color: #ffffff; margin-bottom: var(--space-8); }
.toilets-final-cta p { color: #e0f2ff; max-width: 36rem; margin-bottom: 0; }
.toilets-final-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.toilets-final-cta .btn-secondary { background-color: #ffffff; color: var(--color-primary-dark); border-color: transparent; }
.toilets-final-cta .btn-secondary:hover { background-color: #e0f2ff; }
.toilets-final-cta .btn-ghost { color: #ffffff; }
.toilets-final-cta .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.12); }
@media (max-width: 1024px) { .toilets-hero-inner { grid-template-columns: minmax(0, 1.2fr); } .toilets-hero-media figure { margin: 0 auto; } .toilets-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toilets-products-layout { grid-template-columns: minmax(0, 1fr); } .toilets-products-media { order: -1; } .toilets-reviews-layout { grid-template-columns: minmax(0, 1fr); } .toilets-comparison-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .toilets-hero { padding: var(--space-40) 0 var(--space-32); } .toilets-hero-meta { grid-template-columns: minmax(0, 1fr); } .toilets-why-grid, .toilets-products-grid, .toilets-installation-grid, .toilets-water-grid, .toilets-delivery-grid, .toilets-accessories-grid, .toilets-support-grid, .toilets-brands-grid { grid-template-columns: minmax(0, 1fr); } .toilets-section-header { text-align: left; } .toilets-final-cta-inner { align-items: flex-start; } }