.site-header { position: sticky; inset-block-start: 0; z-index: 30; background: var(--saarbon-header); backdrop-filter: blur(16px); padding-block: var(--saarbon-space-3); transition: background var(--saarbon-transition), box-shadow var(--saarbon-transition); }
.site-header.is-scrolled { background: var(--saarbon-surface); box-shadow: var(--saarbon-shadow-sm); }
.admin-bar .site-header { inset-block-start: 32px; }
.header-inner { gap: var(--saarbon-space-3); flex-wrap: nowrap; }
.header-tools { display: flex; gap: var(--saarbon-space-1); margin-inline-start: auto; }
.icon-button, .favorite-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .4rem; background: var(--saarbon-surface); color: var(--saarbon-accent); border: 1px solid var(--saarbon-border); border-radius: var(--saarbon-radius-pill); font-size: 1.4rem; text-decoration: none; }
[data-favorite-count] { position: absolute; inset-inline-end: -.2rem; inset-block-start: -.3rem; font-size: .65rem; color: var(--saarbon-on-brand); background: var(--saarbon-green); border-radius: 1rem; min-width: 1.25rem; }
.menu { margin-block: 0; gap: var(--saarbon-space-4); font-size: var(--saarbon-text-sm); }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.menu li { position: relative; }
@media (min-width: 64.01rem) {
  .site-header .sub-menu { position: absolute; inset-block-start: 100%; min-width: 12rem; background: var(--saarbon-surface); border: 1px solid var(--saarbon-border); padding: 1rem; visibility: hidden; }
  .site-header li:hover > .sub-menu, .site-header li:focus-within > .sub-menu { visibility: visible; }
}
.search-panel { background: var(--saarbon-surface); padding-block: var(--saarbon-space-6); border-block-end: 1px solid var(--saarbon-border); }
.search-panel form { display: flex; flex-wrap: wrap; gap: var(--saarbon-space-3); }
.search-panel input { flex: 1 1 14rem; }
.search-panel[role="dialog"] { position: fixed; inset: 0; z-index: 100; overflow-y: auto; display: grid; align-content: start; padding-block-start: min(15vh, 8rem); background: var(--saarbon-cream); }
.search-close { margin-block-start: 1.5rem; }
body.search-open, body.menu-open { overflow: hidden; }
.secondary, .catalog-button.secondary { background: var(--saarbon-surface); color: var(--saarbon-accent); border: 1px solid var(--saarbon-border); }
.catalog-button { display: inline-block; background: var(--saarbon-green); color: var(--saarbon-on-brand); padding: .8rem 1.5rem; border-radius: var(--saarbon-radius-pill); text-decoration: none; font-weight: 700; }
.catalog-link { color: var(--saarbon-accent); padding-block: .6rem; display: inline-block; text-underline-offset: .35em; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--saarbon-space-4); margin-block-end: var(--saarbon-space-5); }
.section-heading h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.eyebrow { color: var(--saarbon-muted); font-size: var(--saarbon-text-sm); margin-block-end: .6rem; }
.catalog-heading { padding-block: var(--saarbon-space-5); border-block-end: 1px solid var(--saarbon-border); }
.footer-grid { display: grid; gap: var(--saarbon-space-7); }
.site-footer { padding-block: var(--saarbon-space-8) var(--saarbon-space-5); }
.site-footer h2 { font-size: var(--saarbon-text-lg); }
.site-footer .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block-start: 1.5rem; margin-block-start: 3rem; border-block-start: 1px solid var(--saarbon-border); color: var(--saarbon-muted); }
.social-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--saarbon-space-5); }
.blog-card { background: var(--saarbon-surface); border: 1px solid var(--saarbon-border); border-radius: var(--saarbon-radius-lg); overflow: hidden; }
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.blog-card-body { padding: var(--saarbon-space-5); }
.blog-card h2 { font-size: var(--saarbon-text-lg); }
.blog-card h2 a { text-decoration: none; }
.entry-content { margin-block: var(--saarbon-space-6); }
.entry-content p { margin-block: 1.3rem; }
.error-page { text-align: center; max-width: 46rem; margin-inline: auto; padding-block: var(--saarbon-space-8); }
.error-number { color: var(--saarbon-accent); font-size: clamp(5rem, 18vw, 10rem); line-height: 1; opacity: .5; }
.error-page .product-actions { justify-content: center; }
@media (min-width: 50rem) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (max-width: 64rem) {
 .header-inner { flex-wrap: wrap; }
 .brand { font-size: 1.4rem; }
 .brand-logo, .custom-logo { max-width: 7rem; }
 .menu-toggle:not([hidden]) { display: inline-flex; }
 #site-navigation { order: 5; flex-basis: 100%; max-height: calc(100dvh - 8rem); overflow-y: auto; }
 #site-navigation .menu { flex-direction: column; align-items: stretch; padding-block: 1rem; }
 .site-header .sub-menu { padding-inline-start: 1.5rem; }
 .site-main { padding-block-start: var(--saarbon-space-5); }
 .admin-bar .site-header { inset-block-start: 46px; }
}
@media (prefers-reduced-motion: no-preference) {
 .has-entered { animation: saarbon-enter 450ms ease-out both; }
 @keyframes saarbon-enter { from { transform: translateY(10px); } to { transform: translateY(0); } }
}
input, textarea, select { color: var(--saarbon-text); background: var(--saarbon-surface); }
.results-grid { display: grid; gap: var(--saarbon-space-5); margin-block: var(--saarbon-space-6); }
.results-grid > * { min-width: 0; }
.entry-content { margin-inline: auto; }
.entry-content img { border-radius: var(--saarbon-radius-md); }
@media (min-width: 48rem) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }