/* Smartphone-Design nach Entwurf: Kopfzeile Menü | Logo mittig | Warenkorb, auf der Startseite großes Bild,
   Suche, vier Vorteile und Majolika-Band. Am Desktop ändert sich nichts. */
.m-home { display: none; }

@media (max-width: 768px) {
  /* Kopfzeile auf allen Seiten */
  .nav { background: #fff; border-bottom: none !important; box-shadow: none !important; }
  .nav-inner { display: grid !important; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 0 8px !important; padding: 10px 0 !important; }
  .nav-burger { grid-column: 1; color: #1E5C8C; }
  .nav-burger svg { width: 30px; height: 30px; }
  .nav-logo { grid-column: 2; justify-self: center; flex: none !important; }
  .nav-logo img { height: 76px !important; }
  .nav-icons { grid-column: 3; justify-self: end; margin: 0 !important; }
  .nav-icon:not(.cart-btn) { display: none !important; }
  .nav-icon span { display: none !important; }
  .cart-btn { position: relative; color: #1E5C8C; }
  .cart-btn svg { width: 30px; height: 30px; }
  .cart-btn .cart-badge[hidden] { display: none !important; }
  .cart-btn .cart-badge:not([hidden]) {
    display: flex !important; position: absolute; top: -4px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: #D2232A; color: #fff; font: 700 12px/22px 'Inter', system-ui, sans-serif;
    align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
  }
  .nav-search { grid-column: 1 / -1; margin-top: 8px; }

  /* Startseite */
  body:has(.m-home) { background: #FEFCF8; }
  body:has(.m-home) .top-banner,
  body:has(.m-home) .hero,
  body:has(.m-home) .trust-row { display: none !important; }
  .m-home { display: block; background: #FEFCF8; }
  .m-hero, .m-hero img { display: block; width: 100%; height: auto; }
  .m-search-slot { padding: 18px 16px 8px; }
  .m-search-slot .nav-search {
    display: flex !important; align-items: center; gap: 12px; width: 100% !important; height: 56px !important; margin: 0;
    padding: 0 18px; border: 1.5px solid #D9CFBC; border-radius: 12px; background: #FEFCF8; box-sizing: border-box;
  }
  .m-search-slot .nav-search svg { width: 22px; height: 22px; flex-shrink: 0; }
  .m-search-slot .nav-search svg circle, .m-search-slot .nav-search svg path { stroke: #7A7266; }
  .m-search-slot .nav-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: 400 17px 'Inter', system-ui, sans-serif; color: #201C19; }
  .m-search-slot .nav-search input::placeholder { color: #9A9184; }

  .m-trust { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 22px 6px 24px; }
  .m-trust li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; min-width: 0; }
  .m-trust li + li { border-left: 1px solid #E4DAC6; }
  .m-trust svg { width: 38px; height: 38px; color: #1E5C8C; margin-bottom: 8px; }
  .m-trust b { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; color: #C8962E; text-transform: uppercase; font-size: 11px; line-height: 1.2; letter-spacing: .03em; }
  .m-trust b.m-big { font-size: 26px; line-height: 1; letter-spacing: 0; margin-bottom: 4px; }
  .m-trust span { margin-top: 3px; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; color: #1E5C8C; text-transform: uppercase; font-size: 10px; line-height: 1.25; letter-spacing: .05em; }
  .m-trust b.m-big + span { margin-top: 0; font-size: 10.5px; }
  .m-strip { height: 34px; background: url('../img/majolica-strip.webp?v=1') center / auto 100% repeat-x; }
}

@media (max-width: 360px) {
  .m-trust b { font-size: 10px; }
  .m-trust span { font-size: 9px; }
  .m-trust b.m-big { font-size: 22px; }
}