/* qamer-theme.css – nur Ergänzungen zu den Design-Tokens/Komponenten (05-design). Keine festen Farben/Abstände. */
.site-footer .wrap > * + * { margin-top: var(--sp-3); }
.small { font-size: var(--fs-sm); }
.alert:empty { display: none; }
.layout-2 > section + section { margin-top: var(--sp-5); }
@media (min-width: 768px) { .layout-2 > section + section { margin-top: 0; } }
/* Logo: hell/dunkel */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: inline-block; } }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline-block; }
.logo-img { height: auto; max-width: 100%; }
.pay-icon { max-height: 24px; }
.pay .pay-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
/* KI-Berater */
.berater { position: fixed; left: var(--sp-4); bottom: calc(var(--sp-4) + 56px + env(safe-area-inset-bottom)); z-index: 31; max-width: calc(100vw - 2 * var(--sp-4)); }
@media (min-width: 768px) { .berater { bottom: var(--sp-5); } }
.berater-panel { position: absolute; left: 0; bottom: calc(100% + var(--sp-2)); width: min(380px, calc(100vw - 2 * var(--sp-4))); max-height: min(70vh, 560px); overflow: auto; display: grid; gap: var(--sp-3); box-shadow: var(--shadow-2); }
.berater-panel[hidden], .berater-sub[hidden] { display: none; }
.berater-head { display: flex; justify-content: space-between; align-items: start; gap: var(--sp-3); }
.berater-head h2 { margin: 0; font-size: var(--fs-lg); }
.berater-log { display: grid; gap: var(--sp-2); max-height: 240px; overflow: auto; padding: var(--sp-1); }
.berater .msg { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-alt); }
.berater .msg-me { background: var(--c-primary); color: var(--c-on-primary); justify-self: end; }
.berater .msg p { margin: 0; }
.berater .rec { margin-top: var(--sp-2); }
.berater-form { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.berater-sub { display: grid; gap: var(--sp-2); }
.berater-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }

/* Start: Beliebte Düfte – Passepartout-Rahmen mit Bogenfenster (R7) */
.popular-grid{align-items:stretch}
.popular-grid>.card-product{position:relative;gap:var(--sp-2);padding:var(--sp-3);border-radius:22px;border:1px solid var(--c-line);background:var(--c-surface);box-shadow:inset 0 0 0 5px var(--c-surface),inset 0 0 0 6px var(--c-line)}
.popular-grid>.card-product>a:first-child{display:block;overflow:hidden;margin:var(--sp-2) var(--sp-2) var(--sp-1);border-radius:999px 999px 10px 10px;background:radial-gradient(120% 90% at 50% 18%,#fffaf0 0%,var(--c-surface-alt) 78%)}
.popular-grid>.card-product .photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;background:transparent;border-radius:0}
.popular-grid>.card-product h3{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:6px;min-height:2.3em;margin:var(--sp-1) var(--sp-2) 0!important;text-align:center;font-size:var(--fs-lg);line-height:1.15}
.popular-grid>.card-product h3 a{color:var(--c-ink);text-decoration:none}
.popular-grid>.card-product h3 .badge{position:absolute;top:calc(var(--sp-3) + var(--sp-3));left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap}
.popular-grid>.card-product .small{text-align:center;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--fs-xs)}
.popular-grid>.card-product .price{margin:auto var(--sp-2) 0!important;padding-top:var(--sp-2);border-top:1px solid var(--c-line);text-align:center}
.popular-grid>.card-product:hover{border-color:var(--c-line-strong)}
.popular-grid>.card-product:hover .photo{transform:scale(1.04)}
@media(max-width:479px){.popular-grid>.card-product{padding:var(--sp-2);border-radius:18px}.popular-grid>.card-product h3{font-size:var(--fs-base)}}
@media(prefers-reduced-motion:reduce){.popular-grid>.card-product:hover,.popular-grid>.card-product:hover .photo{transform:none}}
