/*
  Eigenes CSS für den Beauty-Bereich. Die Produkt-/Kategorie-/Suchseiten
  nutzen bewusst dieselben Klassen wie die Parfüm-Seiten (.pkopf, .shops,
  .shop, .g4, .sreihen, .markenlogos, .plkopf, .filterzeile …) aus
  assets/css/pp.css, damit Beauty optisch zur bestehenden Seite passt.
  Hier steht nur, was es dort noch nicht gibt: die Kategorien-Kacheln auf
  der Beauty-Übersicht und der Beauty-Block auf Marken-/Länder-/
  Startseite und der Suchergebnisseite.
*/

.beauty-kacheln {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.beauty-kachel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.beauty-kachel:hover {
	border-color: var(--gold-line);
	transform: translateY(-2px);
}

.beauty-kachel b {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.beauty-kachel span {
	font-size: 12.5px;
	color: var(--ink-2);
}

/* Kleiner Beauty-Teaser-Block auf der Länder-Startseite/"/": eigene,
   dezente Karte statt der großen Hero-Kachel, wie von Hasan am
   29.09.2026 vorgegeben (Düfte bleiben überall vorne, Beauty ist ein
   kleiner Block weiter unten). */
.beauty-teaser {
	background: var(--plum-soft);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.beauty-teaser h2 {
	font-size: 19px;
}

.beauty-teaser p {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 4px;
}

/* "Beauty von <Marke>"-Block auf der Markenseite: gleiche Karten wie
   .g4/.ps, nur mit eigenem Anker-Bezeichner für den Fall künftigen
   Feintunings. */
.beauty-von-marke {
	margin-top: 6px;
}

@media(max-width:940px) {
	.beauty-kacheln {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width:600px) {
	.beauty-teaser {
		flex-direction: column;
		align-items: flex-start;
	}
}