/*
 * Gemeinsame Stile aller 6 Layouts (Build A, 3.11.2026).
 *
 * Cookie-Hinweis – für alle Layouts gleich, unten,
 * klein, neutral. Stil im Backend (Seitenaufbau): dunkel, hell oder
 * transparent (Seite scheint beim Scrollen deutlich durch).
 * Sichtbar macht ihn front.js nur, wenn noch keine Entscheidung (sd_ck) da ist.
 */
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  font: 400 12.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: rgba(32, 33, 36, .88); color: #f1f1f1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.ck[hidden] { display: none; }
.ck p { margin: 0; flex: 1; min-width: 0; }
.ck a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck-bt { display: flex; gap: 8px; flex-shrink: 0; }
.ck button { font: inherit; font-weight: 600; border-radius: 6px; padding: 6px 16px; min-height: 36px; min-width: 64px; cursor: pointer; }
.ck .ck-ok { background: #fff; color: #202124; border: 0; }
.ck .ck-no { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .45); }
.ck button:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }

/* hell */
.ck.ck-hell { background: rgba(255, 255, 255, .92); color: #2a2b2e; box-shadow: 0 -1px 0 rgba(0, 0, 0, .1); }
.ck.ck-hell .ck-ok { background: #202124; color: #fff; }
.ck.ck-hell .ck-no { border-color: rgba(0, 0, 0, .3); }
.ck.ck-hell button:focus-visible { outline-color: #1a73e8; }

/* transparent: deutlich durchsichtig, wenig Weichzeichner, Schrift mit Schatten lesbar */
.ck.ck-transparent { background: rgba(20, 21, 24, .55); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); box-shadow: none; }
.ck.ck-transparent button { text-shadow: none; }
.ck.ck-transparent .ck-ok { background: rgba(255, 255, 255, .95); color: #202124; }
.ck.ck-transparent .ck-no { border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .15); }

@media (max-width: 900px) {
  .ck { flex-wrap: wrap; gap: 8px; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ck p { flex-basis: 100%; }
  .ck-bt { width: 100%; }
  .ck button { flex: 1; min-height: 40px; }
  /* Kaufleiste unten nicht verdecken: solange der Hinweis steht, rückt sie nicht nach – der Hinweis liegt darüber */
}
@media print { .ck { display: none !important; } }

/*
 * Suchfeld am Handy: Der aufklappende Bereich (.sp) schneidet überstehende
 * Schatten ab (overflow: hidden). Der 2-px-Fokusrahmen aus klassik/frisch sah
 * dadurch wie ein halber, schiefer Rand aus. Am Handy kein Schattenrahmen.
 */
@media (max-width: 900px) {
  .sp .sf:focus-within { box-shadow: none; }
}

/*
 * Listenansicht (Knopf „Liste“, .grid.list / .grid.mlist): Titel immer
 * höchstens 2 Zeilen mit „…“, in allen Layouts. Ohne die Begrenzung lief
 * er in der Zeilenansicht unter Bewertung und Preis weiter.
 */
.grid.list .c-title, .grid.mlist .c-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; min-height: 0; flex: none; }

/*
 * Handy-Kopf: Seit das Herz neben der Lupe steht, ist die Zeile voller.
 * Die Zeile bricht um statt zu schrumpfen (flex-wrap). Bisher blendeten die
 * Layouts den Aktions-Hinweis („BLACK WEEK in 24 Tagen“) unter 370 px aus;
 * mit dem Herz reicht der Platz erst ab etwa 440 px. Darunter fehlt nur
 * dieser kleine Hinweis – Herz und Lupe bleiben rechts in derselben Zeile.
 */
@media (max-width: 440px) {
  .hd-in > .ev { display: none; }
}
@media (max-width: 900px) {
  .hd-in > .hd-favm, .hd-in > .lupe { flex: none; }
}

/* Merkliste-Herz im Handy-Kopf (alle Layouts, front/partials/fav-mob) */
.hd-favm { position: relative; color: inherit; text-decoration: none; }
.hd-favn { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #E1251B; color: #fff; font: 700 10.5px/17px system-ui, sans-serif; text-align: center; box-sizing: border-box; }
.hd-favn:empty { display: none; }