/* Organisms: header, footer, hero, browse grid, filter bar, rows, compare, item hero, calendar, forms. */
.de-header { background: var(--color-header-bg); color: var(--color-header-fg); position: relative; }
.de-header-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); min-height: 72px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.de-logo { color: inherit; text-decoration: none; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.de-logo span { color: var(--color-header-mark); }
.de-footer-logo span { color: var(--color-primary); }
.de-nav-toggle { display: none; background: var(--color-header-fg); border: 0; border-radius: var(--radius-sm); padding: var(--space-2); cursor: pointer; }
.de-nav-toggle span { display: block; width: 22px; height: 3px; background: var(--color-header-bg); margin: 4px 0; }
.de-nav-list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

.de-footer { background: var(--color-surface); color: var(--color-text); margin-top: var(--space-8); }
.de-footer-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-5); display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.de-footer-logo { color: inherit; text-decoration: none; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; }
.de-footer-tagline { margin-top: var(--space-2); max-width: 36ch; }
.de-footer-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.de-footer .de-nav-item a:hover { text-decoration-color: var(--color-primary); }
.de-footer-bottom { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4) var(--space-6); font-size: var(--text-sm); }
.de-footer-bottom p { margin: 0; }

.de-hero { background: var(--color-hero-bg); color: var(--color-hero-fg); }
.de-hero-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-8); }
.de-hero-headline { color: inherit; max-width: 18ch; font-size: clamp(var(--text-2xl), 5.5vw, var(--text-4xl)); line-height: 1.02; letter-spacing: -0.03em; }
.de-hero-intro { font-size: var(--text-lg); max-width: 50ch; line-height: 1.4; }
.de-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.de-features-inner { max-width: var(--max-width); margin: var(--space-6) auto 0; padding: 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); }

@media (max-width: 760px) {
    .de-nav-toggle { display: block; }
    .de-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-header-bg); padding: var(--space-4); z-index: 10; }
    .de-nav.is-open { display: block; }
    .de-nav-list { flex-direction: column; gap: var(--space-3); }
}

/* Filter bar */
.de-filter-bar { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-5) 0; }
.de-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.de-filter-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.de-filter-bar .de-btn-ghost { background: var(--color-bg); }
.de-filter-count { margin: 0 0 0 auto; }

/* Listing rows */
.de-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-5) 0; }
.de-empty { padding: var(--space-6); text-align: center; background: var(--color-surface); border-radius: var(--radius-md); font-weight: 600; }

/* Compare tray */
.de-compare-tray { position: fixed; left: 50%; bottom: var(--space-4); transform: translateX(-50%); background: var(--color-text); color: var(--color-bg); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); display: flex; gap: var(--space-4); align-items: center; max-width: 92vw; z-index: 20; }
.de-compare-tray[hidden] { display: none; }
.de-compare-tray .de-btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* Compare table */
.de-compare-wrap { overflow-x: auto; margin: var(--space-5) 0; }
.de-compare { border-collapse: separate; border-spacing: 4px; width: 100%; }
.de-compare th, .de-compare td { padding: var(--space-2) var(--space-3); background: var(--color-surface); text-align: left; vertical-align: top; min-width: 160px; border-radius: var(--radius-sm); }
.de-compare thead th { vertical-align: bottom; font-family: var(--font-heading); font-weight: 800; }
.de-compare thead img { max-height: 120px; width: auto; margin-bottom: var(--space-2); }
.de-compare tbody th { font-weight: 600; }
.de-compare-group th { background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); }
.de-compare td.is-best { background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; }
.de-compare-remove { display: block; font-size: var(--text-sm); margin-top: var(--space-1); }
.de-compare-add { margin: var(--space-4) 0; display: flex; gap: var(--space-3); align-items: center; }
.de-compare-add select { font: inherit; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

/* Item hero */
.de-item-hero { background: var(--color-surface); }
.de-item-hero-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-6) var(--space-4); display: grid; grid-template-columns: minmax(220px, 2fr) 3fr; gap: var(--space-6); align-items: start; }
.de-item-hero-media img { max-height: 360px; width: auto; max-width: 100%; border-radius: var(--radius-md); }
.de-item-hero-media .de-card-placeholder { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.de-item-subtitle { font-size: var(--text-lg); font-weight: 600; }
.de-item-price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-2) 0; }
.de-item-source { margin-top: var(--space-4); }
.de-hub-links h2 { font-size: var(--text-lg); }
.de-hub-links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.de-hub-links a { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; background: var(--color-surface); color: var(--color-text); }
.de-hub-links li:nth-child(6n+1) a { background: var(--color-tile-1); }
.de-hub-links li:nth-child(6n+2) a { background: var(--color-tile-2); }
.de-hub-links li:nth-child(6n+3) a { background: var(--color-tile-3); }
.de-hub-links li:nth-child(6n+4) a { background: var(--color-tile-4); }
.de-hub-links li:nth-child(6n+5) a { background: var(--color-tile-5); }
.de-hub-links li:nth-child(6n+6) a { background: var(--color-tile-6); }
.de-hub-links a:hover { filter: brightness(0.94); }
.de-hp { position: absolute; left: -9999px; }
.de-form label { display: grid; gap: var(--space-1); font-weight: 600; margin-bottom: var(--space-3); }
.de-form input, .de-form textarea, .de-form select { font: inherit; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); width: 100%; }
.de-flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 600; }
.de-flash-good { background: var(--color-success-bg); }
.de-flash-warn { background: var(--color-warning-bg); }
.de-flash-bad { background: var(--color-danger-bg); }
@media (max-width: 700px) { .de-item-hero-inner { grid-template-columns: 1fr; } }

/* Calendar and map */
.de-calendar-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.de-calendar-head h2 { margin: 0; }
.de-calendar-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.de-calendar-grid th { background: var(--color-surface-raised); font-family: var(--font-heading); padding: var(--space-2); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.de-calendar-grid td { vertical-align: top; height: 92px; background: var(--color-surface); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.de-calendar-grid td.is-empty { background: transparent; }
.de-calendar-grid td.has-items { background: var(--color-tile-2); }
.de-calendar-day { display: block; font-weight: 700; }
.de-calendar-item { display: block; margin-top: var(--space-1); padding: 2px var(--space-1); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-map { border-radius: var(--radius-md); overflow: hidden; margin: var(--space-5) 0; }
@media (max-width: 640px) { .de-calendar-grid td { height: 60px; } .de-calendar-item { font-size: 0.7rem; } }

/* Alerts */
.de-alert { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; }
.de-alert h2 { font-size: var(--text-lg); margin-top: 0; }
.de-alert-form { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--space-3); align-items: end; }
.de-alert-form label { display: grid; gap: var(--space-1); font-weight: 600; }
.de-alert-form input, .de-alert-form select { font: inherit; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
@media (max-width: 640px) { .de-alert-form { grid-template-columns: 1fr; } }

/* Partner links */
.de-partner-links { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-md); }
.de-partner-links h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.de-partner-links ul { margin: 0; padding-left: 1.2em; }

/* Filters behind a button (catalogues with filters_collapsed). */
.de-filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.de-filter-summary .de-filter-count { margin: 0; }
.de-filter-bar[hidden] { display: none; }