/* =============================================================================
   Seelenheil-Alpakas · Custom CSS für SimplyBook.me
   Stand: 10.10.2026 · Theme "space", Basisfarbe #ffaf2e
   Revision 5: Infotext über die Namenszeile geholt, Überschrift über der
                Zusammenfassung, größere Klickfläche auf "Hinzufügen"
   -----------------------------------------------------------------------------
   EINBAU
     SimplyBook Admin → Custom Features → "Custom CSS" → den kompletten Inhalt
     des Feldes durch diese Datei ersetzen.
     Vorher den bisherigen Inhalt in eine Textdatei sichern.

   WICHTIG
     Dieses CSS wirkt nur auf seelenheilalpakas.simplybook.it (auch wenn die
     Seite als iFrame auf jimdo läuft). Der globale Jimdo-Head greift dort
     nicht – deshalb sind die Markenfarben hier noch einmal definiert.

   ALLE ÄNDERUNGEN WURDEN IM BROWSER GEGEN DIE LIVE-SEITE GEPRÜFT,
   die Kartenaufteilung zusätzlich mit acht Karten gegengetestet.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0 · Marken-Variablen – eine Stelle für alle Farben
       Werte aus marke/design-und-medien.md
   -------------------------------------------------------------------------- */
:root {
  --sa-orange:        #ffaf2e;  /* SimplyBook-Basisfarbe = Marken-Amber        */
  --sa-orange-hover:  #ffc533;
  --sa-orange-tief:   #a35f00;  /* orange Schrift auf Weiß: 4,6:1 statt 1,9:1  */
  --sa-braun:         #382b22;  /* Marken-Textbraun, 13,7:1 auf Weiß           */
  --sa-text:          #2f2f2f;
  --sa-grau:          #6b6b6b;  /* Hilfstexte, 5,4:1 auf Weiß                  */
  --sa-creme:         #f8f5ea;
  --sa-rand:          #ddd3b6;
  --sa-rand-kraeftig: #9a9a9a;  /* Feldrahmen, 3,0:1 – erfüllt WCAG 1.4.11     */
  --sa-header:        78px;     /* Höhe der fixierten Kopfzeile (71px) + Puffer*/
}


/* -----------------------------------------------------------------------------
   1 · Ausblenden (unverändert aus dem bisherigen CSS übernommen)
   -------------------------------------------------------------------------- */
#schedule,
#contacts                { display: none; }
#sb_client_info          { display: none !important; }
#sb_booking_company_time  { display: none !important; }


/* ---- Abschnitt 2 · NEU ---------------------------------------------------
   Gilt nur auf der Vollseite: im Widget fehlen Startbereich und fixierte
   Kopfzeile, dort würde der Versatz die Seite zerschießen.
   -------------------------------------------------------------------------- */
html:has(#main-buttons) { scroll-padding-top: var(--sa-header); }
 
body:has(#main-buttons) #main-content {
  margin-top: -50px !important;          /* unverändert wie im Original-CSS */
}
 
/* Nur die Buchungsstrecke hat eine Schrittleiste. Negativer Außenabstand und
   gleich großer Innenabstand heben sich auf – die Seite sieht aus wie vorher,
   aber die Beschriftungen bleiben beim automatischen Hochscrollen frei. */
body:has(#main-buttons) #steps-nav {
  margin-top: calc(-1 * (var(--sa-header) + 20px)) !important;
  padding-top: calc(var(--sa-header) + 20px) !important;
  margin-bottom: 10px !important;
}


/* -----------------------------------------------------------------------------
   3 · Karten: nichts wird mehr abgeschnitten
       PROBLEM  Die bisherige Regel
                   .content:not(:has(.read-more)) { height: 3rem; }
                hat jeden Karteninhalt auf 48 px gedeckelt. Gemessen: 5 von 6
                Karten liefen über. Folgen: Beschreibungen brachen mitten im
                Wort ab ("… und genießB"), und beim Produkt "Zusätzliche
                Begleitperson" rutschte das Preisschild komplett aus der Karte.
       LÖSUNG   Gleich hohe Karten über Flexbox statt über eine feste Pixelhöhe.
   -------------------------------------------------------------------------- */
#sb_category_step_container,
#sb_service_step_container,
#sb_product_list_container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
}

#sb_category_step_container > .item,
#sb_service_step_container  > .item,
#sb_product_list_container  > .item {
  float: none !important;
  display: flex !important;
}

#sb_category_step_container > .item > .tab,
#sb_service_step_container  > .item > .tab,
#sb_product_list_container  > .item > .tab {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

.item .excerpt-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.item .tab-pd       { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Die alte Deckelung ausdrücklich zurücknehmen */
.content { height: auto !important; min-height: 0 !important; }

/* Auswahl-Button bzw. Ankreuzfeld immer am unteren Kartenrand */
.item .btn-bar,
.item .changed-items-num { margin-top: auto; }

.changed-items-num { padding: 0 15px 12px !important; }

/* Kartenrahmen: Schwarz war hart, jetzt weiche Kante in Marken-Grau */
.tab.tab-col.tab-with-popup {
  border: 1px solid var(--sa-rand-kraeftig) !important;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* "Mehr erfahren" lag bisher direkt auf dem Beschreibungstext.
   Jetzt mit weichem weißem Auslauf, damit die Zeile lesbar bleibt. */
.item .txt.short { position: relative; }
.item .txt.short .read-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 10px;
  background: #fff;
  box-shadow: -14px 0 10px #fff;
  color: var(--sa-orange-tief) !important;
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
   4 · Preise wieder lesbar
       PROBLEM  Das Preisschild war Orange #ffaf2e auf Hellgrau #e6e7ec = 1,7:1.
                WCAG AA verlangt 4,5:1. Zusätzlich schob das Theme es mit
                top:52px / right:-25px aus der Karte heraus – deshalb hing
                "29,00 €" auf dem Screenshot außerhalb des Rahmens.
   -------------------------------------------------------------------------- */
.item .bar-service {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.item .bar-service .clearfix {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
}

.item .badge {
  position: static !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  float: none !important;
  margin: 0 !important;
}

.badge.price,
.badge.right,
#sb_product_list_container .badge {
  background: var(--sa-creme) !important;
  border: 1px solid var(--sa-rand);
  border-radius: 6px;
  color: var(--sa-braun) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  white-space: nowrap;
}

/* Orange Links auf Weiß (Zurück, Fußzeile, Gutschein-Hinweise) abdunkeln */
#sb_back_button a,
#footer a,
.gdpr-popup a,
#sb_gdpr_report_module_container a {
  color: var(--sa-orange-tief) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   4b · Zusatzoptionen: kompakte Karten nebeneinander
        PROBLEM  Die Theme-Kachel war 273 x 393 px: 16:9-Bildplatzhalter, viel
                 Leerraum, Preisschild außerhalb des Rahmens. Bei vier und mehr
                 Optionen wurde daraus eine sehr lange Seite.
        LÖSUNG   Feste 300-px-Karten, drei pro Reihe, gleich hoch. Bild 132 px,
                 darunter Name, Preis und – ganz unten bündig – Ankreuzfeld und
                 Mengenwähler.
        HINWEIS  Das Theme baut das Bild mit padding-bottom:56.25% als
                 Seitenverhältnis-Box. Ohne padding-bottom:0 bleibt die Kachel
                 hoch, egal welche height gesetzt wird.
   -------------------------------------------------------------------------- */
#sb_product_container .title-main,
#sb_attribute_container .title-main { margin-bottom: 20px !important; }

#sb_product_list_container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
  max-width: 1000px;
  margin: 6px auto 0 !important;
}

#sb_product_list_container > .item {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
}

#sb_product_list_container > .item > .tab {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  border: 1px solid var(--sa-rand) !important;
  border-radius: 12px !important;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(56,43,34,.06);
}

#sb_product_list_container .excerpt-info {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto;
}

/* Bild */
#sb_product_list_container .preloader {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 132px !important;
  max-height: 132px !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
#sb_product_list_container .preloader .img,
#sb_product_list_container .preloader .user {
  position: static !important;
  width: 100% !important;
  height: 132px !important;
}
#sb_product_list_container .preloader img {
  position: static !important;
  width: 100% !important;
  height: 132px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Name und Preis */
#sb_product_list_container .tab-pd {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  padding: 14px 14px 10px !important;
}
#sb_product_list_container .txt.short { display: none !important; }
#sb_product_list_container .content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
#sb_product_list_container .cap.short {
  flex: 0 0 auto !important;
  height: auto !important;          /* Theme deckelt sonst auf 46px und schneidet ab */
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  margin: 0 !important;
  min-height: 2.7em;                /* zwei Zeilen Platz, damit Karten fluchten */
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
#sb_product_list_container .read-more {
  position: static !important;      /* Theme setzt absolute und legt es auf den Preis */
  top: auto !important;  right: auto !important;
  left: auto !important; bottom: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: flex-start;
  font-size: 14px !important;
}
#sb_product_list_container .bar-service { margin: 0 !important; flex: 0 0 auto; }
#sb_product_list_container .bar-service .clearfix { justify-content: flex-start !important; }
/* Preis ohne Kasten.
   Auf der Aktivitätskarte trennt das Kästchen den Preis von der Dauer – dort
   bleibt es. Hier ist der Preis die einzige Angabe, der Rahmen umreißt also
   nichts, und Creme auf Weiß liest sich obendrein wie "nebensächlich". */
#sb_product_list_container .badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--sa-braun) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Ausgewählte Karte auf einen Blick erkennbar.
   Vorher unterschied sie sich nur durch das kleine Häkchen – bei vier Optionen
   musste man suchen, was man schon dazugebucht hat. */
#sb_product_list_container > .item > .tab {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#sb_product_list_container .tab:has(input.check:checked) {
  border-color: var(--sa-orange) !important;
  background: #fffdf7;
  box-shadow: 0 0 0 2px rgba(255,175,46,.35), 0 1px 4px rgba(56,43,34,.06);
}
#sb_product_list_container .tab:hover {
  border-color: #c9bda0 !important;
  box-shadow: 0 3px 12px rgba(56,43,34,.10);
}
#sb_product_list_container input.check:checked + .product-label {
  color: var(--sa-braun) !important;
  font-weight: 700 !important;
}
@media (prefers-reduced-motion: reduce) {
  #sb_product_list_container > .item > .tab { transition: none; }
}

/* Ankreuzfeld und Mengenwähler, unten bündig */
#sb_product_list_container .changed-items-num {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-top: auto !important;
  padding: 0 14px 14px !important;
  text-align: left !important;
}
#sb_product_list_container .changed-items-num .wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  width: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;      /* Karte springt nicht, wenn der Zähler erscheint */
  line-height: 1.3 !important;
}
#sb_product_list_container .changed-items-num .product-label,
#sb_product_list_container .changed-items-num .active-count {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#sb_product_list_container .changed-items-num .product-label {
  line-height: 1.3 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
  /* Größere Klickfläche: vorher war nur das 24-px-Kästchen und der Text
     anklickbar. Das Kästchen selbst bleibt an derselben Stelle, weil ::before
     am Innenrand sitzt. */
  padding: 8px 12px 8px 34px !important;
  border-radius: 8px;
}
#sb_product_list_container .changed-items-num .product-label:hover { background: #fff5e6; }

/* In der Karte darf der Zähler etwas kompakter sein */
#sb_product_list_container .active-count .plus,
#sb_product_list_container .active-count .minus {
  flex: 0 0 40px !important;
  width: 40px !important;  height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
}
#sb_product_list_container .active-count .sb-group-counter-input-div {
  min-width: 38px !important;
  height: 40px !important;
}

/* Das Ankreuzkästchen des Themes war 20px in #eee auf #dbdbdb (1,2:1) */
.changed-items-num .product-label {
  position: relative;
  padding-left: 34px !important;
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
}
.changed-items-num .product-label::before {
  width: 24px !important;
  height: 24px !important;
  top: 0 !important;
  background: #fff !important;
  border: 2px solid var(--sa-braun) !important;
  border-radius: 5px !important;
}
.changed-items-num input.check:checked + .product-label::before {
  background: var(--sa-orange) !important;
}
#sb_product_list_container .changed-items-num .product-label::after {
  content: "" !important;
  position: absolute;
  left: 9px !important;  top: 4px !important;
  width: 7px !important; height: 13px !important;
  background: transparent !important;
  border: solid transparent !important;
  border-width: 0 3px 3px 0 !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
}
#sb_product_list_container .changed-items-num input.check:checked + .product-label::after {
  border-color: var(--sa-braun) !important;
}
.changed-items-num input.check:focus-visible + .product-label::before {
  outline: 3px solid var(--sa-braun);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   4c · "Mehr erfahren" nur zeigen, wenn wirklich Text dahintersteckt
        PROBLEM  SimplyBook blendet den Link ein, sobald das Beschreibungsfeld
                 nicht leer ist. Der Editor hinterlässt dort gern ein leeres
                 <p><br></p> – dann öffnet der Link ein leeres Fenster.
        LÖSUNG   Steht im zugehörigen Fenster nichts als ein leerer Absatz,
                 wird der Link ausgeblendet.
        BESSER   Das Beschreibungsfeld in SimplyBook wirklich leeren. Fälle wie
                 <p> </p> kann CSS nicht erkennen.
   -------------------------------------------------------------------------- */
.item .tab:has(.modal .txt.full:empty) .read-more,
.item .tab:has(.modal .txt.full > p:only-child:empty) .read-more,
.item .tab:has(.modal .txt.full > p:only-child > br:only-child) .read-more {
  display: none !important;
}

/* Orange auf Weiß war 1,9:1 – für einen Link zu wenig */
.read-more { color: var(--sa-orange-tief) !important; font-weight: 600; }


/* -----------------------------------------------------------------------------
   5 · Formular: Beschriftungen sichtbar machen
       PROBLEM  Das Theme setzt die Labels "Name:", "E-Mail:", "Telefon:" auf
                display:none – es bleibt nur der Platzhaltertext, und der
                verschwindet beim Tippen. Direkt darunter haben die
                Zusatzfelder ("Straße + Hausnr.") sehr wohl Beschriftungen.
                Diese Inkonsistenz kostet gerade ältere Gäste Sicherheit.
       LÖSUNG   Alle Beschriftungen über dem Feld, links, in einer Zeile.
   -------------------------------------------------------------------------- */
#details .form-horizontal .control-label,
#details .form-group > .control-label {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: var(--sa-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

#sb_client_info_container .col-sm-8,
#sb_client_info_container .col-sm-4 { width: 100% !important; padding: 0 !important; }

/* Das Theme setzt zusätzlich ein zweites, frei schwebendes Sternchen rechts
   neben das Eingabefeld (.col-sm-8::before). Seit die Beschriftung sichtbar
   ist, steht das Sternchen dort schon – das doppelte kann weg. */
#sb_client_info_container .form-group > .col-sm-8::before { content: none !important; }

/* Eingabefelder: sichtbarer Rahmen statt hauchdünner Unterstrich.
   Vorher: 1,5 px #d8d8d8 = 1,4:1 – WCAG 1.4.11 verlangt 3:1. */
#details .form-control,
#details input[type="text"],
#details input[type="email"],
#details input[type="tel"],
#details textarea,
#details select {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1.5px solid var(--sa-rand-kraeftig) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 16px !important;   /* unter 16px zoomt iOS beim Antippen hinein */
}

/* -----------------------------------------------------------------------------
   5b · Telefonfeld: das doppelte Feld ist weg
        PROBLEM  intl-tel-input legt ein zweites Eingabefeld an und schaltet das
                 Original per Inline-Style auf 0x0. Unsere Regel oben hat es mit
                 min-height/padding/border wieder aufgeblasen – daher standen
                 plötzlich zwei Felder nebeneinander.
        LÖSUNG   Original wieder auf 0x0. Falls intl-tel-input einmal nicht
                 lädt, ist das Original das echte Feld – dann greift die zweite
                 Regel und stylt es normal.
   -------------------------------------------------------------------------- */
#details #sb_client_phone {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#details .input-group:not(:has(.iti)) #sb_client_phone {
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1.5px solid var(--sa-rand-kraeftig) !important;
  border-radius: 8px !important;
}

#details .form-client-phone .input-group { display: block !important; }
#details .form-control.iti__tel-input    { padding-left: 58px !important; }
.iti                                     { width: 100% !important; }

#details .form-control:focus {
  border-color: var(--sa-braun) !important;
  outline: 3px solid var(--sa-orange) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

#details ::placeholder { color: #767676 !important; opacity: 1; }
#details .form-group   { margin-bottom: 18px !important; }

/* Hinweistexte deutlich von Eingabefeldern unterscheiden:
   weißes Feld mit Rahmen = hier tippen, Creme-Box = hier nur lesen. */
#details .form-group__static-html {
  margin: 6px 0 20px !important;
  background: var(--sa-creme) !important;
  border: 1px solid var(--sa-rand) !important;
  border-radius: 10px !important;
}
#details .form-group__static-html > .col-sm-12 { padding: 12px 14px !important; }
#details .form-group__static-html p            { margin: 0 0 6px !important; line-height: 1.5; }
#details .form-group__static-html p:last-child { margin-bottom: 0 !important; }


/* -----------------------------------------------------------------------------
   5c · Infotext über die Namenszeile holen
        PROBLEM  SimplyBook rendert Zusatzfelder grundsätzlich unterhalb von
                 Name, E-Mail und Telefon – in einem eigenen Container. Der
                 Hinweis "Wir benötigen nur die Kontaktdaten der buchenden
                 Person" stand damit erst da, wenn der Gast längst getippt hat.
        LÖSUNG   display:contents nimmt den reinen Layout-Hüllen ihre Box.
                 Dadurch stehen alle Formularzeilen als Geschwister in einer
                 Flex-Spalte und lassen sich mit order frei sortieren.
        ⚠️ Der Selektor hängt an der Feld-ID aus SimplyBook. Wird das Feld dort
           gelöscht und neu angelegt, ändert sich die ID und die Regel greift
           ins Leere (der Text steht dann wieder an seiner alten Stelle –
           es geht nichts kaputt).
   -------------------------------------------------------------------------- */
#details .left-side .add-details { display: flex; flex-direction: column; }

#details .left-side .add-details > .custom-form,
#details .left-side .custom-form > .form-horizontal,
#details .left-side #sb_client_info_container,
#details .left-side .custom-form > .row,
#details .left-side .custom-form > .row > .col-sm-12,
#details .left-side .custom-form > .row > .col-sm-12 > .form-horizontal,
#details .left-side #sb_additional_fields_container,
#details .left-side #sb_additional_fields_container > div,
#details .left-side #sb_additional_fields {
  display: contents !important;
}

/* "Wir benötigen nur die Kontaktdaten der buchenden Person …" */
#details .form-group__static-html[data-field="72bb42130d36f8976e1d83f56a50ae37"] { order: -2; }
/* Namenszeile direkt darunter, alles Übrige behält seine Reihenfolge */
#details .left-side .form-group.form-client-name { order: -1; }


/* -----------------------------------------------------------------------------
   6 · AGB-Zeile und Ankreuzfelder
       PROBLEM  Der AGB-Link stand in Orange #ffaf2e auf Weiß = 1,9:1 bei 13 px.
                Ausgerechnet die eine Zeile, die der Gast anhaken muss.
   -------------------------------------------------------------------------- */
#sb_terms_and_conditions a,
#sb_user_terms_link,
#sb_simplybook_terms_link,
#sb_privacy_policy_link,
#sb_cancellation_terms_link {
  color: var(--sa-braun) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.promotions-letter-flag label,
.form-group--terms label {
  color: var(--sa-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.form-group--terms { margin-bottom: 12px; }

.custom-checkbox .custom-label {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--sa-braun) !important;
  border-radius: 5px !important;
}
.custom-checkbox input:checked + .custom-label {
  background: var(--sa-orange) !important;
  border-color: var(--sa-braun) !important;
}
.custom-checkbox input:focus-visible + .custom-label {
  outline: 3px solid var(--sa-braun) !important;
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   7 · Button-Hierarchie
       PROBLEM  "Weitere Buchungen hinzufügen" war 273 px breit, der eigentliche
                Weiter-Button nur 200 px. Der Nebenweg sah wichtiger aus als der
                Hauptweg – und stand außerdem davor.
   -------------------------------------------------------------------------- */
#sb_book_btn,
#sb_cart_checkout_btn,
#sb_pay_btn {
  background: var(--sa-orange) !important;
  border: 2px solid var(--sa-orange) !important;
  color: var(--sa-braun) !important;       /* 8,6:1 auf Orange                 */
  font-size: 17px !important;
  font-weight: 700 !important;
  min-height: 54px !important;
  min-width: 240px !important;
  padding: 0 28px !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(255,175,46,.35);
}
#sb_book_btn:hover,
#sb_cart_checkout_btn:hover,
#sb_pay_btn:hover {
  background: var(--sa-orange-hover) !important;
  border-color: var(--sa-orange-hover) !important;
}

#sb_multiple_booking_btn {
  background: #fff !important;
  border: 2px solid var(--sa-braun) !important;
  color: var(--sa-braun) !important;
  font-size: 14px !important;
  min-height: 44px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 18px !important;
  box-shadow: none !important;
}
#sb_multiple_booking_btn:hover { background: #f3ead2 !important; }

.buttons-container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.buttons-container .sb-book-btn-container { order: -1; }   /* Hauptaktion zuerst */

.btn.select.custom { font-weight: 700 !important; }

/* Sichtbarer Fokusring – Tastatur und 150-%-Zoom */
.btn:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 3px solid var(--sa-braun) !important;
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   8 · Rechte Zusammenfassung
        PROBLEM  Cremefarbene Fläche, darauf graue Streifen (#f6f6f6) hinter
                 Mehrwertsteuer und Gesamtbetrag und ein weißer Kasten mit
                 Dropdown-Pfeil, der wie ein deaktiviertes Auswahlfeld aussah.
                 Drei Flächentöne auf engem Raum, ohne dass einer etwas bedeutet.
        LÖSUNG   Weiße Karte mit warmem Rand. Creme bekommt nur noch der
                 Summenblock – die eine Stelle, auf die der Gast schaut.
   -------------------------------------------------------------------------- */
/* Die Formularspalte braucht einen eigenen Rahmen: ohne ihn schwimmen die
   Felder auf weißem Grund, und gerade ältere Gäste sehen nicht auf Anhieb,
   wo sie etwas eintragen sollen. Gleiche Kontur wie rechts, aber ohne
   Schatten – das Gewicht bleibt bei der Zusammenfassung. */
.left-side {
  background: #fff !important;
  border: 1px solid #e6ded0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

.right-side {
  background: #fff !important;
  border: 1px solid #e6ded0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(56,43,34,.07);
  padding: 24px !important;
}

/* Überschrift über der Zusammenfassung. Vorher stand dort ohne Einleitung
   der Name des Erlebnisses – man musste raten, was die Spalte sein soll.
   ⚠️ Der Text steht hier im CSS. Wenn die Buchungsseite je mehrsprachig
   werden soll, muss er stattdessen als Übersetzung in SimplyBook hinterlegt
   werden – CSS kann nicht übersetzen. */
.right-side .confirm-details::before {
  content: "Zusammenfassung der Buchung";
  display: block;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6ded0;
  color: var(--sa-braun);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* Der Erlebnisname ist jetzt Unterzeile, nicht mehr Überschrift */
.right-side .cap.mg {
  margin-bottom: 14px !important;
  color: var(--sa-braun) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.right-side .booking-overview .label {
  padding-right: 14px;
  color: var(--sa-grau) !important;
  font-size: 14px !important;
}
.right-side .booking-overview .info {
  color: var(--sa-braun) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Kategorie-Zeile ist redundant – der Name steht schon in der Überschrift */
#sb_booking_info .booking-info--item_category-name { display: none !important; }

/* Die grauen Streifen des Themes entfernen */
.right-side .full-price,
.right-side .full-info-price,
.right-side .full-info-price--total,
.right-side .full-info-price--tax,
.right-side .booking-price {
  background: transparent !important;
  border-top: 0 !important;
}

/* Summenblock als eigener Kasten */
.right-side .full-info-price--wrapper {
  margin-top: 4px;
  padding: 14px 16px !important;
  background: var(--sa-creme) !important;
  border: 1px solid var(--sa-rand) !important;
  border-radius: 10px !important;
}
.right-side .full-info-price {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 3px 0 !important;
}
.right-side .full-info-price--tax { color: var(--sa-grau) !important; font-size: 13px !important; }

.right-side .full-info-price--total {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--sa-rand) !important;
}
.right-side .full-info-price--total .full-info-price--caption {
  color: var(--sa-braun) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.right-side .full-info-price--total .full-info-price--value {
  color: var(--sa-braun) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* Akkordeon: Textschalter statt Auswahlfeld-Attrappe */
.right-side .accordion { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.right-side .accordion a.title {
  padding: 10px 0 !important;
  border-bottom: 1px solid #e6ded0 !important;
  color: var(--sa-orange-tief) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.right-side .accordion .collapse { padding: 10px 0 0 !important; }
a.title.collapsed { color: var(--sa-orange-tief) !important; }

/* Datums-Kachel in Markenfarbe */
.right-side .booking-calendar .calendar {
  border: 1px solid var(--sa-rand) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.right-side .booking-calendar .header { background: var(--sa-orange) !important; color: var(--sa-braun) !important; font-weight: 700 !important; }
.right-side .booking-calendar .body   { background: #fff !important;            color: var(--sa-braun) !important; font-weight: 700 !important; }

/* AGB-Block sichtbar abtrennen */
#sb_terms_and_conditions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #efe8da;
}


/* -----------------------------------------------------------------------------
   9 · Kalender & Zeitraster (aus dem bisherigen CSS übernommen, entrümpelt)
       Entfernt wurden: die doppelte .six-items-Regel (die zweite überschrieb
       die erste, im Kommentar stand "7 Elemente"), die leeren Platzhalter-
       Regeln der SimplyBook-Vorlage und die nth-child-Selektoren, die beim
       nächsten Produkt ins Leere greifen.
   -------------------------------------------------------------------------- */
.top-date-select .row,
.top-date-select .col-xs-3,
.top-date-select .col-xs-6,
.top-date-select .col-md-4 { padding: 0 !important; margin: 0 !important; }

.top-date-select .date,
.top-date-select .name { font-size: 1rem !important; line-height: 1.8 !important; }

#sb_dateview_container > div                                   { padding: 10px 20px !important; }
#sb_dateview_container .calendar                               { padding-top: 5px !important; }
#sb_dateview_container .calendar .weeks-name > div > div > div { padding: 0 !important; }

/* --- Monatskalender einspaltig --------------------------------------------
   PROBLEM  Das Theme verteilt die Wochen auf drei Spalten nebeneinander und
            wiederholt dabei die Kopfzeile MO DI MI DO FR SA SO dreimal. Auf
            dem Desktop liest sich das wie ein endloser Zahlenstreifen, nicht
            wie ein Kalender – gerade ältere Gäste suchen dort lange.
   LÖSUNG   Nur die erste Kopfzeile zeigen, alle Wochen untereinander. Ergibt
            den Monatskalender, den jeder kennt.
   ------------------------------------------------------------------------ */
.top-date-select { max-width: 720px; margin: 0 auto; }

#sb_dateview_container .weeks-name > div:not(:first-child) { display: none !important; }
#sb_dateview_container .weeks-name > div:first-child,
#sb_dateview_container .weeks-date > div { width: 100% !important; float: none !important; }

#sb_dateview_container .weeks-name > div > .inner,
#sb_dateview_container .weeks-date > div > .inner {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
#sb_dateview_container .weeks-name .name,
#sb_dateview_container .weeks-date .date {
  flex: 0 0 56px !important;
  width: 56px !important;
}
#sb_dateview_container .weeks-name .name { font-size: 14px !important; font-weight: 700 !important; }
#sb_dateview_container .weeks-date .date {
  height: 56px !important;                /* quadratisch, damit der gewählte
                                             Tag ein Kreis bleibt und kein Oval */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#sb_dateview_container .weeks-date .date .day-on,
#sb_dateview_container .weeks-date .date .day-off {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#sb_timeview_container .timeline-wrapper .tab-pd { padding: 10px !important; }
#sb_timeview_container .header                   { padding-bottom: 5px !important; }
#sb_time_slots_weekly_container .time-container  { margin-top: 5px !important; }
#sb_time_slots_weekly_container .data-col        { min-width: 0 !important; }
#sb_datetime_step_container > div > div > div    { border: 2px solid #e7e7e7; }

[class~="day"] { font-weight: bold; }
a.day-on.sb-available-date { font-weight: 700; font-size: 16px; }

/* Ruhetag im gewählten Monat: vorher #b17f3d = 3,4:1, jetzt 4,8:1 */
.datetime-step .calendar .weeks-date .date.selected .day-off        { color: #8a6420 !important; }
.datetime-step .calendar .weeks-date .prev-or-next-month .day-off   { opacity: 0; }

/* Buchbare Zeitfenster als klare Kacheln (vorher: grelles Gelb, 1 Spalte) */
#sb_time_slots_container { display: flex !important; flex-wrap: wrap; gap: 10px; }
#sb_time_slots_container .slot {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

.sb_time_slots_weekly_day_container .time-slot a,
#sb_time_slots_container .slot a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 160px;
  min-height: 56px !important;
  padding: 8px 12px;
  background: #fff5e6 !important;
  border: 2px solid var(--sa-orange) !important;
  border-radius: 10px !important;
  color: var(--sa-braun) !important;
  font-size: 17px !important;
  font-weight: 600;
}
.sb_time_slots_weekly_day_container .time-slot a:hover,
#sb_time_slots_container .slot a:hover { background: #ffe3b3 !important; }

.slot--available-slot { color: var(--sa-braun) !important; font-size: 13px !important; font-weight: 600; }

/* Legende an die neue Kachelfarbe angleichen */
.time-legend { font-size: 14px !important; color: var(--sa-grau) !important; }
.time-legend .available .circle {
  background: #fff5e6 !important;
  border: 2px solid var(--sa-orange) !important;
}

/* Gewählter Tag pulsiert dezent */
.date.selected { animation: sa-pulse 1.5s infinite; }
@keyframes sa-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(255,175,46,.7); }
  50%  { box-shadow: 0 0 0 12px rgba(255,175,46,0);  }
  100% { box-shadow: 0 0 0 0    rgba(255,175,46,0);  }
}
@media (prefers-reduced-motion: reduce) {
  .date.selected { animation: none; }
}


/* -----------------------------------------------------------------------------
   10 · Mengenwähler:  −  1  +
        PROBLEM  Das Theme stapelt zwei winzige Dreiecke übereinander, die Zahl
                 klebt direkt daneben. Niemand erkennt das als Plus und Minus.
                 Erschwerend: Produktzähler und Personenzähler zeichnen ihre
                 Pfeile auf unterschiedlichen Pseudo-Elementen – deshalb werden
                 hier beide (::before und ::after) neutralisiert.
        LÖSUNG   Eine Pille mit zwei 46-px-Flächen und echten Zeichen.
   -------------------------------------------------------------------------- */
.active-count {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 2px solid var(--sa-braun) !important;
  border-radius: 999px !important;
  background: #fff !important;
  overflow: hidden;
}

/* DOM-Reihenfolge ist Zahl → Plus → Minus, angezeigt wird  −  Zahl  +  */
.active-count .minus                     { order: 1; }
.active-count .sb-group-counter-input-div { order: 2; }
.active-count .plus                      { order: 3; }

.active-count .plus,
.active-count .minus {
  position: static !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: #fff5e6 !important;
  opacity: 1 !important;
  cursor: pointer;
}
.active-count .plus:hover,
.active-count .minus:hover { background: #ffe3b3 !important; }

/* Die Theme-Dreiecke entfernen und eigene Zeichen setzen */
.active-count .plus::before,
.active-count .minus::before { display: none !important; content: none !important; }

.active-count .plus::after,
.active-count .minus::after {
  display: block !important;
  position: static !important;
  width: auto !important;  height: auto !important;
  min-width: 0 !important;  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  color: var(--sa-braun) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
.active-count .plus::after  { content: "+" !important; }
.active-count .minus::after { content: "\2212" !important; }   /* echtes Minus */

.active-count .sb-group-counter-input-div {
  min-width: 52px !important;
  height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 19px !important;
  font-weight: 700 !important;
}

/* Personenzähler auf den Aktivitätskarten: Abstand zum Personen-Symbol */
.plugin-group-booking .active-count { margin-left: 8px; }

.changed-items-num .product-label {
  color: var(--sa-braun) !important;
  font-size: 15px !important;
}


/* -----------------------------------------------------------------------------
   11 · Überschriften & Abstände
   -------------------------------------------------------------------------- */
.title-main { margin-bottom: 8px !important; color: var(--sa-text); }
.tab-pd     { padding: 15px !important; }
.section-pd { padding: 0 15px !important; }


/* -----------------------------------------------------------------------------
   12 · Nur die drei Gruppen-Kategorien zeigen
   -----------------------------------------------------------------------------
   ⚠️  ACHTUNG – BITTE PRÜFEN
   SimplyBook liefert im ersten Schritt alle 24 Kategorien aus. Die bisherige
   Regel blendet alles außer den ersten drei aus:
       Wandertouren gemischte Gruppen / Erlebnisse auf der Weide /
       Private Aktivitäten (geschlossene Gruppe)
   An vierter Stelle steht "Übernachtungen" – die ist damit im normalen
   Buchungseinstieg nicht erreichbar. Falls das nicht gewollt ist, unten die 4
   statt der 3 freischalten (Zeile ist vorbereitet).

   Sauberer wäre, die Kategorien in SimplyBook selbst zu deaktivieren, statt
   sie per CSS zu verstecken – dann kippt hier nichts, wenn ihr eine neue
   Kategorie anlegt.
   -------------------------------------------------------------------------- */
/* Die Selektoren tragen bewusst die Container-ID: Abschnitt 3 setzt
   #sb_category_step_container > .item auf display:flex, das würde eine
   Regel ohne ID überstimmen und alle 24 Kategorien einblenden. */
#sb_category_step_container > .category-item.item { display: none !important; }

#sb_category_step_container > .category-item.item:nth-of-type(-n+3) {
  display: flex !important;
}

/* Für "Übernachtungen" die 3 oben auf 4 erhöhen. */


/* -----------------------------------------------------------------------------
   13 · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #steps-nav { padding-top: calc(var(--sa-header) + 10px) !important; }

  #sb_category_step_container > .item,
  #sb_service_step_container  > .item,
  #sb_product_list_container  > .item { width: 100% !important; }

  #sb_book_btn,
  #sb_multiple_booking_btn { width: 100% !important; min-width: 0 !important; }

  .buttons-container { flex-direction: column; align-items: stretch; }

  /* Zusatzoptionen: eine Karte pro Zeile */
  #sb_product_list_container > .item {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 420px !important;
  }
  #sb_product_list_container .cap.short { min-height: 0; }

  /* Kalender: schmalere Felder, damit die Woche aufs Display passt */
  #sb_dateview_container .weeks-name .name,
  #sb_dateview_container .weeks-date .date { flex: 0 0 13.9% !important; width: 13.9% !important; }
  #sb_dateview_container .weeks-date .date { height: 46px !important; }

  #sb_time_slots_container .slot,
  #sb_time_slots_container .slot a { width: 100% !important; min-width: 0 !important; }
}








/* =============================================================================
   Seelenheil-Alpakas - Custom CSS fuer den GUTSCHEIN-SHOP in SimplyBook
   Version 2.1 - Stand: 10.10.2026 - live gegen das Widget auf
   seelenheil-alpakas.de/alpaka-shop/gutscheine/ gestestet
   -----------------------------------------------------------------------------
   EINBAU
     SimplyBook Admin -> Custom Features -> "Custom CSS" -> Bereich WIDGET.
     Den alten Gutschein-Block (Version 1, beginnt mit "Custom CSS fuer den
     GUTSCHEIN-SHOP") komplett durch diesen ersetzen. Alles andere bleibt.
     Wenn alles passt: denselben Block auch im Bereich WEBSEITE ans Ende haengen
     (dort fehlt er noch - wer direkt auf simplybook.it landet, sieht sonst das
     alte Design).

   Alle Regeln beginnen mit #sb_promotion_items_container - Buchungsstrecke und
   Kalender bleiben unberuehrt. Nur ASCII, Umlaute als CSS-Escape (\00fc = ue).

   NEU IN VERSION 2
     - blauer Punkt vor dem Preis wirklich weg (sass an .promo-label::before)
     - Karten weich gerahmt wie auf der Website statt schwarzer Kasten
     - Beschreibung vollstaendig sichtbar, "Mehr erfahren" ueberdeckt keinen Text mehr
     - Titel kraeftiger, Button-Text groesser
     - Bestseller (98 EUR) mit Plakette "Am liebsten verschenkt"
     - Button nur noch "Gutschein kaufen" - der Preis steht gross darueber
     (Version 2.1, 10.10.2026: unterschiedlich hohe Bilder wieder entfernt)
   ========================================================================== */

/* --- 1 - Karte: weicher Rahmen, Rundung, leichter Schatten -------------- */
#sb_promotion_items_container .promotion-item .tab {
  border: 1px solid #ddd3b6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .06) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
#sb_promotion_items_container .promotion-item .tab:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10) !important;
  transform: translateY(-3px);
}

/* --- 2 - "Rabatt"-Plakette auf dem Bild weg ------------------------------ */
#sb_promotion_items_container .promotion-item__tag--on-image { display: none !important; }

/* --- 3 - Titel kraeftiger ------------------------------------------------ */
#sb_promotion_items_container .promotion-item h4.cap {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #382b22 !important;
  height: auto !important;
  overflow: visible !important;
}

/* --- 4 - Beschreibung ganz zeigen, "Mehr erfahren" weg ------------------- */
/*     (der Text ist kurz; das Popup wiederholt nur dasselbe)               */
#sb_promotion_items_container .promotion-item .txt.short {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #4b4b4b !important;
}
#sb_promotion_items_container .promotion-item .read-more { display: none !important; }
/* Beschreibungen einheitlich - einige sind in SimplyBook mit groesserer Schrift gespeichert */
#sb_promotion_items_container .promotion-item .txt.short,
#sb_promotion_items_container .promotion-item .txt.short * {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* --- 5 - Preiszeile: nur noch grosser Preis + "x Jahre gueltig" ---------- */
#sb_promotion_items_container .bar-service__item-promo-label small,
#sb_promotion_items_container .promo-label--icon,
#sb_promotion_items_container .bar-service__item-promo-label .promo-label::before {
  display: none !important;
  content: none !important;
}
#sb_promotion_items_container .bar-service__item-promo-label .promo-label {
  padding-left: 0 !important;
}
#sb_promotion_items_container .bar-service__item-promo-label .price-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #382b22 !important;
  line-height: 1.2 !important;
}
#sb_promotion_items_container .bar-service__row { align-items: center !important; }
#sb_promotion_items_container .bar-service__item-promo-time .bar-service__item-txt::after {
  content: " g\00fcltig";
}
#sb_promotion_items_container .bar-service__item-promo-time {
  color: #5c5c5c !important;
  font-size: 14px !important;
}

/* --- 6 - Kauf-Button ----------------------------------------------------- */
#sb_promotion_items_container .btn.select {
  min-height: 56px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: #ffaf2e !important;
  border: 2px solid #ffaf2e !important;
  color: #382b22 !important;
  box-shadow: 0 4px 14px rgba(255, 175, 46, .45) !important;
  justify-content: center !important;
  align-items: center !important;
  transition: background .2s ease, transform .2s ease !important;
}
#sb_promotion_items_container .btn.select:hover,
#sb_promotion_items_container .btn.select:focus-visible {
  background: #ffc533 !important;
  border-color: #ffc533 !important;
  transform: translateY(-2px);
}
#sb_promotion_items_container .btn.select:focus-visible {
  outline: 3px solid #a35f00 !important;
  outline-offset: 3px;
}
/* "Auswaehlen" ausblenden - der Text kommt ueber ::before */
#sb_promotion_items_container .btn.select .promotion-item__select-txt { display: none !important; }
#sb_promotion_items_container .btn.select .promotion-item__price {
  height: auto !important;
  font-size: 0 !important;              /* Betrag im Button ausblenden - er steht gross darueber */
  line-height: 0 !important;
  padding: 0 !important;
  color: #382b22 !important;
}
#sb_promotion_items_container .btn.select .promotion-item__price::before {
  content: "Gutschein kaufen";
  font-size: 18px;
  font-weight: 700;                     /* Roboto hat kein 800 - 700 ist das fetteste */
  letter-spacing: .02em;
  line-height: 1.25;
  color: #382b22;
}

/* --- 7 - Bestseller-Plakette (Typ 6 = Wanderung zu zweit, 98 EUR) -------- */
/*     Haengt an der Gutschein-ID, nicht an der Reihenfolge.                */
#sb_promotion_items_container .promotion-item:has(a[href$="gift-card/buy/6"]) .tab {
  position: relative;
  border: 2px solid #ffaf2e !important;
}
#sb_promotion_items_container .promotion-item:has(a[href$="gift-card/buy/6"]) .tab::before {
  content: "Am liebsten verschenkt";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: #382b22;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* --- 8 - Handy ----------------------------------------------------------- */
@media (max-width: 400px) {
  #sb_promotion_items_container .btn.select .promotion-item__price::before { font-size: 17px; }
}