/*
 * Ankes Malta Theme — Styles.
 * Quelle aller Werte: Design-Handoff 07/2026 (Richtung 1A), README „Design Tokens".
 * Struktur: Tokens → Basis → Topbar → Nav → Hero → Sektionen → Karten/Chips →
 * Shop → Story → Footer → Seiten → WooCommerce-Overrides → Responsive.
 */

/* ---------- Tokens ---------- */
:root {
  --ams-red: #c11812;
  --ams-red-dark: #8f0f0a;
  --ams-gold: #c9a24a;
  --ams-gold-dark: #7a5713; /* v1.16.2: WCAG-AA als Text auf hellen BG (5,1–6,6:1), war #a5781f (3,1:1); als BG mit Weiss 6,56:1 */
  --ams-gold-bg: #f0e2c8;
  --ams-gold-bg-alt: #f0e6d3;
  --ams-ink: #2b2320;
  --ams-text-2: #6f645b;
  --ams-text-3: #726557; /* v1.16.1: WCAG-AA (5,65:1 auf Weiss), war #8a7d70 (4,0:1) */
  --ams-bg: #f4ecdd;
  --ams-cream: #f9f4ea;
  --ams-honey: #f3e7ce;
  --ams-card: #fffdf8;
  --ams-border: #ece2cf;
  --ams-chip-border: #e0d3ba;
  --ams-outline-border: #d8c9ac;
  --ams-footer-bg: #2b2320;
  --ams-footer-text: #cbbfac;
  --ams-footer-line: #40352f;
  --ams-topbar-text: #e7dccb;
  --ams-serif: 'Cormorant Garamond', Georgia, serif;
  --ams-sans: 'Mulish', system-ui, sans-serif;
  --ams-shadow-hero: 0 24px 60px rgba(80, 55, 30, .2);
  --ams-shadow-card: 0 18px 40px rgba(80, 55, 30, .16);
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ams-bg);
  font-family: var(--ams-sans);
  color: var(--ams-ink);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--ams-red); text-decoration: none; }
a:hover { color: var(--ams-red-dark); }
::selection { background: #f3c9c4; }
img { max-width: 100%; height: auto; }

.ams-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ---------- Topbar ---------- */
.ams-topbar {
  background: var(--ams-footer-bg);
  color: var(--ams-topbar-text);
  font-size: 13px;
  padding: 9px 0;
}
.ams-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ams-topbar-left { letter-spacing: .03em; }
.ams-topbar-right { display: flex; gap: 22px; align-items: center; }
.ams-topbar-mail { color: var(--ams-topbar-text); }
.ams-topbar-mail:hover { color: #fff; }
.ams-topbar-phone { color: var(--ams-gold); }
.ams-topbar-phone:hover { color: var(--ams-gold); text-decoration: underline; }

/* ---------- Nav ---------- */
.ams-nav {
  background: var(--ams-cream);
  border-bottom: 1px solid var(--ams-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
body.admin-bar .ams-nav { top: 32px; }
.ams-nav-inner {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ams-brand { display: block; line-height: .9; }

/* Ankes Original-Wortmarke (Cataneo BT, als Bild — die Schrift ist kommerziell
   und darf nicht als Webfont eingebettet werden). Höhe = Textvariante. */
.ams-brand-logo .custom-logo-link { display: block; line-height: 0; }
.ams-brand-logo .custom-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 58px;
  max-width: 320px;
}
.ams-brand-name {
  display: block;
  font-family: var(--ams-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 36px;
  color: var(--ams-red);
}
.ams-brand-tag {
  display: block;
  font-family: var(--ams-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ams-gold);
  margin-top: 1px;
}
.ams-brand:hover .ams-brand-name { color: var(--ams-red-dark); }

.ams-nav-links { display: flex; gap: 32px; align-items: center; }
.ams-menu {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 15px;
}
.ams-menu a { color: var(--ams-ink); }
.ams-menu a:hover { color: var(--ams-red); }
.ams-menu .current-menu-item > a,
.ams-menu .current-menu-ancestor > a { color: var(--ams-red); }

/* Kategorien-Dropdown unter „Shop" (dynamisch via inc/nav-shop-categories.php) */
.ams-menu li { position: relative; }
.ams-menu .ams-has-cats > a::after { content: "▾"; margin-left: 5px; font-size: .78em; opacity: .7; }
.ams-menu .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 12px;
  box-shadow: var(--ams-shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 120;
}
/* Hover-Brücke über die Lücke, damit das Dropdown nicht wegflackert */
.ams-menu .ams-has-cats::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.ams-menu .ams-has-cats:hover > .sub-menu,
.ams-menu .ams-has-cats:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ams-menu .sub-menu li { margin: 0; }
.ams-menu .sub-menu a {
  display: block;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  color: var(--ams-ink);
}
.ams-menu .sub-menu a:hover { color: var(--ams-red); background: rgba(193, 24, 18, .06); }
.ams-menu .sub-menu .current-menu-item > a { color: var(--ams-red); }

@media (max-width: 900px) {
  /* Mobil: Kategorien als eingerückte Liste unter „Shop" (kein Hover-Dropdown) */
  .ams-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 6px 0 2px 16px;
    margin: 6px 0 0;
  }
  .ams-menu .sub-menu a { padding: 6px 0; font-weight: 500; font-size: 15px; }
  .ams-menu .ams-has-cats::after { content: none; }
  .ams-menu .ams-has-cats > a::after { content: none; }
}

.ams-cart-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ams-red);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease;
}
.ams-cart-pill:hover { background: var(--ams-red-dark); }

/* Header-Produktsuche (Lupe + Panel) */
.ams-search { position: relative; display: flex; align-items: center; }
.ams-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: none; border: 1.5px solid var(--ams-outline-border, #d8c9ac);
  border-radius: 10px; color: var(--ams-text-1, #2b2320);
  transition: border-color .15s ease, color .15s ease;
}
.ams-search-toggle:hover,
.ams-search.is-open .ams-search-toggle { border-color: var(--ams-red, #c11812); color: var(--ams-red, #c11812); }
.ams-search-panel {
  display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  gap: 6px; align-items: center; min-width: 320px; padding: 8px;
  background: var(--ams-cream, #f9f4ea);
  border: 1px solid var(--ams-outline-border, #d8c9ac);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(80, 55, 30, .18);
}
.ams-search.is-open .ams-search-panel { display: flex; }
.ams-search-field {
  flex: 1 1 auto; min-width: 0; padding: 11px 13px; font-size: 15px;
  color: #2b2320; background: #fff;
  border: 1px solid var(--ams-outline-border, #d8c9ac); border-radius: 8px;
}
.ams-search-field:focus { outline: 2px solid var(--ams-red, #c11812); outline-offset: 1px; }
.ams-search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; cursor: pointer;
  color: #fff; background: var(--ams-red, #c11812);
  border: none; border-radius: 8px;
}
.ams-search-submit:hover { background: var(--ams-red-dark, #8f0f0a); }
.ams-search-empty { font-size: 1.05rem; color: var(--ams-text-3, #726557); margin: 8px 0 20px; }

.ams-nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ams-outline-border);
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  padding: 8px 12px;
  color: var(--ams-ink);
  cursor: pointer;
}

/* ---------- Buttons & Links ---------- */
.ams-btn,
.ams-btn-primary {
  display: inline-block;
  background: var(--ams-red);
  color: #fff !important;
  font-family: var(--ams-sans);
  font-weight: 700;
  border: 0;
  border-radius: 32px;
  cursor: pointer;
  transition: background .15s ease;
  text-align: center;
}
.ams-btn:hover,
.ams-btn-primary:hover { background: var(--ams-red-dark); }
.ams-btn-lg { font-size: 16px; padding: 15px 30px; }
.ams-btn-outline {
  display: inline-block;
  border: 1.5px solid var(--ams-outline-border);
  color: var(--ams-ink);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 32px;
  transition: border-color .15s ease, color .15s ease;
}
.ams-btn-outline:hover { border-color: var(--ams-gold-dark); color: var(--ams-ink); }
.ams-link-more { font-weight: 600; font-size: 15px; }
.ams-link-strong { font-weight: 700; font-size: 16px; }

/* Gold-Label (Hero, Kategorie auf Karte) */
.ams-label-gold {
  display: inline-block;
  background: var(--ams-gold-bg);
  color: var(--ams-gold-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
}
.ams-label-cat {
  display: inline-block;
  margin-top: 12px;
  background: var(--ams-gold-bg-alt);
  color: var(--ams-gold-dark) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 4px;
}

/* ---------- Hero ---------- */
.ams-hero { background: var(--ams-cream); }
.ams-hero-grid {
  padding-top: 56px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.ams-hero-title {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.02;
  color: var(--ams-ink);
  margin: 22px 0 18px;
}
.ams-hero-title em { font-style: italic; color: var(--ams-red); }
.ams-hero-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ams-text-2);
  max-width: 470px;
  margin: 0 0 30px;
}
.ams-hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ams-hero-media {
  position: relative;
  height: 460px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ams-shadow-hero);
}
.ams-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Produkt-Modus: Link füllt den Rahmen, Overlay bleibt klickbar */
.ams-hero-media-link { display: block; width: 100%; height: 100%; }
.ams-hero-media-link:hover .ams-hero-overlay { background: var(--ams-red); }

/* Produkt-Modus: Der Rahmen selbst wird hochkant (2:3) — passend zu Ankes
   Fotos. Dann füllt das Bild ihn randlos mit `cover` und wird trotzdem nicht
   beschnitten (gleiches Seitenverhältnis). Kein Blur-Hintergrund, keine
   Letterbox: Was man sieht, ist zu 100 % scharfes Foto.
   Der Rahmen steht mittig in seiner Spalte, das Creme der Sektion umgibt ihn. */
.ams-hero-media--product {
  height: 520px;
  aspect-ratio: 2 / 3;
  width: auto;
  max-width: 100%;
  justify-self: center;
}
.ams-hero-media--product img { object-fit: cover; }
.ams-hero-overlay {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(43, 35, 32, .9);
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-family: var(--ams-serif);
  font-style: italic;
  font-size: 19px;
}

/* ---------- Sektionen (Startseite) ---------- */
.ams-section .ams-container { padding-top: 52px; padding-bottom: 20px; }
.ams-featured .ams-container { padding-top: 44px; padding-bottom: 60px; }
.ams-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.ams-h2 {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: 36px;
  color: var(--ams-ink);
  margin: 0 0 22px;
}
.ams-section-head .ams-h2 { margin-bottom: 0; }

/* Kategorie-Kacheln — Spaltenzahl kommt als --ams-cat-cols aus dem Block */
.ams-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--ams-cat-cols, 6), 1fr);
  gap: 16px;
}
.ams-cat-tile { display: block; text-align: center; }
/* Kategorie-Kachel: ebenfalls Hochformat, aber flacher (3:4) — sie ist ein
 * Teaser, kein Produktbild. `contain` statt `cover`, damit auch abweichende
 * Kategoriebilder nie angeschnitten werden (Wunsch Anke: Hochformat erhalten). */
.ams-cat-thumb {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ams-border);
}
.ams-cat-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ams-cat-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ams-ink);
  margin-top: 10px;
}

/* ---------- Karten (generisch + Produkt) ---------- */
.ams-card { transition: transform .18s ease, box-shadow .18s ease; }
.ams-card:hover { transform: translateY(-4px); box-shadow: var(--ams-shadow-card); }

.ams-product-card {
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ams-badge-preorder {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  background: var(--ams-red);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 20px;
}
/* Einzelseiten-Variante: statt absolut (Karte) inline oben in der Zusammenfassung */
.ams-badge-preorder-single {
  position: static;
  top: auto;
  left: auto;
  display: inline-block;
  margin: 0 0 10px;
}
/* Bildrahmen im Hochformat 2:3.
 * Der Handoff sah 240px Höhe + cover vor — bei ~243px Kartenbreite ergibt das
 * einen fast quadratischen Rahmen. Ankes Fotos sind aber alle 2:3-Hochformat
 * (300×435–466, Ratio 0,64–0,69); cover hätte davon rund ein Drittel
 * weggeschnitten. Mit 2:3 passt der Rahmen zu ihren Bildern -> Beschnitt < 4 %. */
/* „Ankes Tipp" — Produkte mit persönlicher Notiz (gold, rechts oben,
   damit es nicht mit dem roten Vorbestellung-Badge links kollidiert) */
.ams-badge-tipp {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  background: var(--ams-gold-bg);
  color: var(--ams-gold-dark);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(165, 120, 31, .25);
}

/* Ankes Notiz auf der Produktseite */
.ams-note {
  background: var(--ams-honey);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 22px 0;
}
.ams-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ams-note-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.ams-note-by {
  font-family: var(--ams-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ams-gold-dark);
}
.ams-note-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--ams-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ams-ink);
  font-style: italic;
}

.ams-card-media {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}
.ams-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  margin: 0 !important;
}
.ams-card-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--ams-ink) !important;
  margin: 14px 0 4px;
}
.ams-label-cat + .ams-card-name { margin-top: 8px; }
.ams-card-name:hover { color: var(--ams-red) !important; }
.ams-card-sub { color: var(--ams-text-3); font-size: 13px; }
.ams-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.ams-card-price,
.ams-card-price .price,
.ams-card-price .amount {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ams-red);
  white-space: nowrap;
}
.ams-card-price del,
.ams-card-price del .amount {
  color: var(--ams-text-3);
  font-size: 16px;
  margin-right: 6px;
}
.ams-card-price ins { text-decoration: none; }
/* Preis-Suffix „inkl. MwSt., zzgl. Versandkosten" auf Karten: klein, eigene Zeile,
   umbrechend — sonst sprengt der nowrap-Suffix die Karte (horizontaler Overflow). */
.ams-card-price { white-space: normal; }
.ams-card-price .amount { white-space: nowrap; }
/* Preis-Suffix „inkl. MwSt., zzgl. Versandkosten" ÜBERALL: eigene Zeile, klein,
   grau, normal — der Preis selbst bleibt der Blickfang (Karte + Produkt-Detailseite). */
.woocommerce-price-suffix {
  display: block;
  margin-top: 3px;
  font-family: var(--ams-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ams-text-3);
}
.ams-card-price .woocommerce-price-suffix { font-size: 11px; margin-top: 2px; }
.ams-card-foot { flex-wrap: wrap; row-gap: 8px; align-items: flex-end; }

/* ---------- Filter-Chips ---------- */
.ams-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ams-chip {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 26px;
  font-family: var(--ams-sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid var(--ams-chip-border);
  background: var(--ams-card);
  color: var(--ams-text-2);
  transition: border-color .15s ease, color .15s ease;
}
.ams-chip:hover { border-color: var(--ams-red); color: var(--ams-red); }
.ams-chip.is-active {
  border-color: var(--ams-red);
  background: var(--ams-red);
  color: #fff;
}

/* ---------- Shop-Kopf + Grid ---------- */
.ams-shop-head {
  background: var(--ams-cream);
  border-bottom: 1px solid var(--ams-border);
}
.ams-shop-head .ams-container { padding-top: 40px; padding-bottom: 30px; }
.ams-overline {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ams-gold);
}
.ams-shop-title {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 52px);
  color: var(--ams-ink);
  margin: 8px 0 22px;
}
/* Kategorietext (WooCommerce term description) — SEO-relevant, deshalb
   gut lesbar über den Chips statt versteckt unter dem Raster. */
.ams-shop-head .term-description,
.ams-shop-head .woocommerce-product-search,
.ams-shop-head .page-description {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--ams-text-2);
  font-size: 17px;
  line-height: 1.65;
}
.ams-shop-head .term-description p:last-child { margin-bottom: 0; }

.ams-shop-main { padding-top: 34px; padding-bottom: 66px; }
.ams-result-count {
  color: var(--ams-text-3);
  font-size: 14px;
  margin-bottom: 20px;
}

/* ---------- Ankes Videos ---------- */
.ams-videos { background: var(--ams-cream); }
.ams-videos .ams-container { padding-top: 52px; padding-bottom: 52px; }
.ams-videos-head { align-items: flex-end; }
.ams-videos-sub {
  font-family: var(--ams-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ams-gold-dark);
  margin: 8px 0 0;
  max-width: 560px;
}
.ams-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ams-video-card {
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 14px;
  padding: 14px;
}
.ams-video-play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ams-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: var(--ams-ink);
}
.ams-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ams-video-icon {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(193, 24, 18, .92);
  color: #fff;
  font-size: 20px;
  padding-left: 4px;
  transition: transform .18s ease, background .18s ease;
}
.ams-video-play:hover .ams-video-icon { transform: translate(-50%, -50%) scale(1.1); background: var(--ams-red); }
.ams-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 9px;
  display: block;
}
.ams-video-title {
  font-family: var(--ams-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ams-ink);
  margin: 14px 0 4px;
  line-height: 1.35;
}
.ams-video-text { color: var(--ams-text-3); font-size: 13px; line-height: 1.5; margin: 0; }
.ams-video-note {
  color: var(--ams-text-3);
  font-size: 12px;
  text-align: center;
  margin: 22px 0 0;
}

/* ---------- Anke-Story ---------- */
.ams-story { background: var(--ams-honey); }
.ams-story-grid {
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.ams-story-media img,
.ams-story-placeholder {
  width: 100%;
  height: 380px;
  border-radius: 14px;
  object-fit: cover;
}
.ams-story-placeholder {
  background: repeating-linear-gradient(45deg, #e8dabb, #e8dabb 11px, #e0d0ab 11px, #e0d0ab 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a08a5c;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  text-align: center;
}
.ams-story-kicker {
  font-family: var(--ams-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ams-gold);
}
.ams-story-title {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.08;
  color: var(--ams-ink);
  margin: 10px 0 18px;
}
.ams-story-text {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ams-text-2);
  max-width: 580px;
  margin: 0 0 22px;
}

/* Ankes Bücher — Teil ihrer Geschichte, nicht Randkategorie */
.ams-story-books { margin-top: 30px; }
.ams-story-books-label {
  font-family: var(--ams-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ams-gold-dark);
  margin-bottom: 12px;
}
.ams-story-books-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ams-story-book {
  display: block;
  width: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(80, 55, 30, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ams-story-book:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(80, 55, 30, .26); }
.ams-story-book img { width: 100%; height: auto; display: block; }

/* ---------- Footer ---------- */
.ams-footer { background: var(--ams-footer-bg, #2b2320); color: var(--ams-footer-text, #cbbfac); } /* v1.16.3: Fallbacks — WP-Rocket-RUCSS strippt sonst die Footer-Custom-Props → heller BG, unlesbarer Text */
.ams-footer-grid {
  padding-top: 48px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
}
.ams-footer-wordmark {
  font-family: var(--ams-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  color: #fff;
}
.ams-footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 250px;
}
.ams-footer-col { font-size: 14px; line-height: 2; }
.ams-footer-col strong { color: #fff; display: block; margin-bottom: 8px; }
.ams-footer-menu { list-style: none; margin: 0; padding: 0; }
.ams-footer-menu a { color: var(--ams-footer-text, #cbbfac); }
.ams-footer-menu a:hover { color: #fff; }
.ams-footer-bottom {
  border-top: 1px solid var(--ams-footer-line, #40352f);
  padding: 18px 40px;
  text-align: center;
  font-size: 12px;
  color: #a89a86; /* v1.16.2: WCAG-AA auf dunklem Footer #2b2320 (5,6:1); --ams-text-3 ist ein Hell-BG-Token und wuerde hier nur 2,7:1 liefern */
}

/* ---------- Über Anke: Intro + Welten-Kacheln ---------- */
.ams-intro { background: var(--ams-cream); }
.ams-intro-grid {
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 48px;
  align-items: center;
}
.ams-intro-media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--ams-shadow-hero);
  display: block;
}
.ams-intro-title {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  color: var(--ams-ink);
  margin: 12px 0 18px;
}
.ams-intro-title em { font-style: italic; color: var(--ams-red); }
.ams-intro-text { font-size: 18px; line-height: 1.65; color: var(--ams-text-2); margin: 0 0 16px; }

.ams-welten { padding-top: 52px; padding-bottom: 56px; }
.ams-welten-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.ams-welt {
  display: block;
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 14px;
  padding: 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ams-welt:hover { transform: translateY(-4px); box-shadow: var(--ams-shadow-card); }
.ams-welt-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.ams-welt-title {
  font-family: var(--ams-serif);
  font-size: 24px;
  color: var(--ams-ink);
  margin: 0 0 6px;
}
.ams-welt-text { font-size: 14px; line-height: 1.55; color: var(--ams-text-3); margin: 0 0 10px; }
.ams-welt-link { font-weight: 700; font-size: 14px; color: var(--ams-red); }

@media (max-width: 900px) {
  .ams-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .ams-welten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ams-welten-grid { grid-template-columns: 1fr; }
}

/* ---------- Inhaltsseiten ---------- */
.ams-page { padding-top: 40px; padding-bottom: 60px; }
.ams-page-card {
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 14px;
  padding: 32px;
}
.ams-page-title {
  font-family: var(--ams-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  margin: 0 0 18px;
}
.ams-prose { color: var(--ams-text-2); }
.ams-prose h2, .ams-prose h3 { font-family: var(--ams-serif); color: var(--ams-ink); }
.ams-teaser { margin-bottom: 32px; }
.ams-teaser-title { font-family: var(--ams-serif); font-size: 28px; margin: 0 0 4px; }
.ams-teaser-meta { color: var(--ams-text-3); font-size: 13px; margin-bottom: 8px; }

/* ---------- WooCommerce-Overrides ---------- */

/* Produkt-Grid: WC-Floats → CSS-Grid */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0 !important;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 16px; /* WC-Default padding:0 (höhere Spezifität) hebelte .ams-product-card{padding:16px} aus → Inhalt klebte am Kartenrand */
  text-align: left;
}

/* Spaltenzahl aus dem Block bzw. loop_shop_columns (WooCommerce setzt .columns-N) */
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* „+ Warenkorb"-Button auf der Karte: roter Pill */
.ams-card-foot .button,
.ams-card-foot .add_to_cart_button {
  background: var(--ams-red) !important;
  color: #fff !important;
  font-family: var(--ams-sans);
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 15px !important;
  border-radius: 24px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  border: 0;
  transition: background .15s ease;
}
.ams-card-foot .button:hover { background: var(--ams-red-dark) !important; }
.ams-card-foot .added_to_cart {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Generische WC-Buttons (Warenkorb, Kasse, Einzelprodukt) im CI */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wc-block-components-button {
  background-color: var(--ams-red);
  color: #fff;
  border-radius: 24px;
  font-family: var(--ams-sans);
  font-weight: 700;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--ams-red-dark);
  color: #fff;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ams-red);
  font-family: var(--ams-serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.15;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { font-size: .6em; font-weight: 400; opacity: .6; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; }
.woocommerce span.onsale {
  background: var(--ams-gold-dark);
  border-radius: 20px;
  font-family: var(--ams-sans);
}

/* WC-Seiten-Wrapper (Einzelprodukt etc.) */
.ams-wc-page { padding-top: 40px; padding-bottom: 60px; }

/* Store-Notice im CI */
.woocommerce-store-notice { background: var(--ams-red); }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 34px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: inline-flex;
  gap: 8px;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: hidden;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 10px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--ams-chip-border);
  background: var(--ams-card);
  color: var(--ams-text-2);
  font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--ams-red);
  border-color: var(--ams-red);
  color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ams-cat-grid { grid-template-columns: repeat(3, 1fr); }
  /* Spezifität muss die .columns-N-Regeln oben schlagen — sonst bleibt das
     Raster auf Tablet/Mobile vierspaltig (Startseite hat kein body.woocommerce). */
  ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .ams-hero-grid,
  .ams-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .ams-hero-media { height: 380px; }
  /* Einspaltig darf das Produktbild größer werden — sonst steht ein
     200px-Bildchen verloren auf dem Display. Breite führt, Höhe folgt (2:3). */
  .ams-hero-media--product { height: auto; width: 100%; max-width: 340px; }
  .ams-footer-grid { grid-template-columns: 1fr 1fr; }

  /* Touch: Mindest-Tapfläche 44px (Apple HIG / Google Material 48dp).
     Auf dem Desktop bleiben die schlanken Pillen aus dem Design. */
  .ams-card-foot .button,
  .ams-card-foot .add_to_cart_button {
    padding: 12px 18px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .ams-nav-toggle { min-height: 44px; min-width: 44px; }
  .ams-chip { padding: 12px 18px; }

  /* Mobile Nav */
  .ams-nav-toggle { display: block; }
  .ams-nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ams-cream);
    border-bottom: 1px solid var(--ams-border);
    padding: 20px 40px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 18px 40px rgba(80, 55, 30, .12);
  }
  .ams-nav { position: sticky; }
  .ams-nav-inner { position: relative; }
  .ams-nav-links.is-open { display: flex; }
  .ams-menu { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Suche im aufgeklappten Mobile-Menü: Panel in den Fluss, volle Breite */
  .ams-search { width: 100%; }
  .ams-search-panel { position: static; right: auto; min-width: 0; width: 100%; margin-top: 10px; box-shadow: none; }
}

@media (max-width: 600px) {
  .ams-container { padding-left: 20px; padding-right: 20px; }
  .ams-topbar-inner { flex-direction: column; gap: 4px; align-items: flex-start; }
  .ams-brand-name { font-size: 28px; }
  .ams-cat-grid { grid-template-columns: repeat(2, 1fr); }
  ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4 { grid-template-columns: 1fr; }
  .ams-hero-grid { padding-top: 36px; padding-bottom: 44px; }
  .ams-hero-media { height: 300px; }
  .ams-hero-media--product { height: auto; width: 100%; max-width: 300px; }
  .ams-footer-grid { grid-template-columns: 1fr; }
  .ams-nav-links { padding: 20px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ams-card, .ams-btn, .ams-chip { transition: none; }
  .ams-card:hover { transform: none; }
}

/* ---------- Freunde & Partner (Live-Parität, v1.10.0) ---------- */
.ams-partners { background: var(--ams-cream); border-top: 1px solid var(--ams-border); }
.ams-partners .ams-container { padding-bottom: 56px; }
.ams-partners-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
}
.ams-partners-grid li { display: flex; }
.ams-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 150px;
  max-width: 190px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.ams-partner-card:hover { transform: translateY(-2px); box-shadow: var(--ams-shadow-card); }
.ams-partner-card img {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ams-partner-name {
  font-family: var(--ams-sans);
  font-size: 12px;
  color: var(--ams-text-2);
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .ams-partner-card { min-width: 122px; padding: 12px 14px; }
  .ams-partner-card img { max-height: 44px; }
}