/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 992px) {
    #header .header-top .position-static .bon-nav-bar {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    #header .header-top .position-static {
        flex-direction: row;
    }
}


/* Preis-Hinweis unter dem Produktpreis */
.tax-shipping-delivery-label {
  margin-top: 6px;
  font-size: 13px;
  color: #6c6c6c;
  line-height: 1.4;
}

.tax-shipping-delivery-label .price-note {
  display: inline-block;
  font-style: italic;
  color: #777;
}

.tax-shipping-delivery-label .delivery-link {
  margin-left: 6px;
  font-size: 12px;
  color: #9b5e2e; /* warmes Kaffeebraun passend zum Thema */
  text-decoration: underline;
}

.tax-shipping-delivery-label .delivery-link:hover {
  color: #704422; /* dunkler beim Hover */
}

/* ================================
   🌿 ARABICA PREMIUM PRODUCT STYLE
   ================================ */

/* --- Produktvarianten nebeneinander mit Icons --- */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 16px;
}

.product-variants > div {
  flex: 1 1 45%;
  min-width: 220px;
  background-color: #faf9f8;
  border: 1px solid #e2ddd9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.product-variants > div:hover {
  border-color: #c5a17b;
  box-shadow: 0 3px 8px rgba(197, 161, 123, 0.25);
}

.product-variants label {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #4b3a32;
  margin-bottom: 8px;
  font-size: 14px;
  gap: 8px;
}

.product-variants label::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  color: #c5a17b;
  display: inline-block;
}

/* ⚖️ Waage für Füllmenge */
.product-variants label[for*="group_"]::before {
  content: "\f24e";
}

/* ☕ Kaffeetasse für Mahlgrad */
.product-variants label[for*="mahlgrad"]::before {
  content: "\f0f4";
}

.product-variants select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7d3cf;
  border-radius: 6px;
  background-color: #fff;
  color: #2b2b2b;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-variants select:hover {
  border-color: #c5a17b;
  box-shadow: 0 0 5px rgba(197, 161, 123, 0.3);
}

.product-variants select:focus {
  outline: none;
  border-color: #8b5a3c;
  box-shadow: 0 0 7px rgba(139, 90, 60, 0.25);
}

/* --- Zusatzinfos unter dem Preis (Versand, Frage, Bewertung) --- */
.product-additional-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 22px;
  margin-top: 18px;
}

.product-additional-info a,
.product-additional-info span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4a3b32;
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-additional-info a:hover {
  color: #c5a17b;
}

/* Icons */
.product-additional-info i {
  color: #c5a17b;
  font-size: 15px;
}

/* --- Tabs (Beschreibung, Details, Zubereitung) --- */
.tabs {
  border-top: 1px solid #ece9e6;
  margin-top: 40px;
}

.nav-tabs {
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nav-tabs .nav-link {
  background: #f5f3f1;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  color: #3c302a;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  background: #c5a17b;
  color: #fff;
}

/* --- Tabellen in Artikeldetails / Kennzeichnung --- */
.table,
.product-description table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin-top: 10px;
  border: 1px solid #e2ddd9;
}

.table td,
.table th {
  border: 1px solid #e2ddd9;
  padding: 10px 12px;
}

.table th {
  background: #f7f4f1;
  font-weight: 600;
  color: #3a2d25;
}

.table td {
  color: #5a4d45;
}

/* --- Responsiv --- */
@media (max-width: 768px) {
  .product-variants {
    flex-direction: column;
    gap: 14px;
  }

  .product-additional-info {
    flex-direction: column;
    gap: 10px;
  }

  .nav-tabs .nav-link {
    width: 100%;
    text-align: center;
  }
}



/* =========================================
   Varianten 2-spaltig (überstimmt Theme-Styles)
   ========================================= */

/* Container als Flex-Layout */
#product .product-variants {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 16px;
}

/* Jedes Varianten-Element auf 50% setzen */
@media (min-width: 768px) {
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item,
  #product .product-variants > div.product-variants-item,
  #product .product-variants > div[class*="product-variants-item"] {
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    float: none !important;    /* Theme-Floats neutralisieren */
    clear: none !important;
    display: block !important;
  }
}

/* Auf Mobil wieder einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Container als Flex-Layout */
#product .product-variants {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Kinder zwangsweise halbe Breite ab 768px */
@media (min-width: 768px) {
  #product .product-variants > * {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    float: none !important;
    clear: none !important;
    display: block !important;
  }
}

/* Unter 768px wieder 100% */
@media (max-width: 767.98px) {
  #product .product-variants > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/********  🔧 VARIANTEN ZWEISPALTIG – HARDFIX  ********/
/* Ab Tablet: 2 Spalten mit Grid – unabhängig von Bootstrap-Floats/Breiten */
@media (min-width: 768px) {
  /* Container erzwingen */
  .page-product #product .product-variants,
  .page-product #content #product .product-variants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* zwei Spalten */
    column-gap: 24px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }

  /* Alle direkten Kinder normalisieren (Breite/Floats entfernen) */
  .page-product #product .product-variants > *,
  .page-product #content #product .product-variants > *,
  .page-product #product .product-variants > .product-variants-item,
  .page-product #product .product-variants > .clearfix.product-variants-item {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

/* Unter 768px wieder einspaltig (Default) */
@media (max-width: 767.98px) {
  .page-product #product .product-variants,
  .page-product #content #product .product-variants {
    display: block !important;
  }
}

/****************************************************
 * Varianten nebeneinander – Clearfix neutralisieren
 * und 2 Spalten ab 768px erzwingen
 ****************************************************/

/* Ab Tablet/Desktop: 2 Spalten */
@media (min-width: 768px) {

  /* Container als Flex */
  #product .product-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;     /* Abstand */
    align-items: flex-start !important;
  }

  /* WICHTIG: Clearfix auf den Items deaktivieren,
     sonst räumt sich jede Box selbst nach unten */
  #product .product-variants > .clearfix.product-variants-item {
    clear: none !important;
  }
  #product .product-variants > .clearfix.product-variants-item::after,
  #product .product-variants > .clearfix.product-variants-item::before {
    content: none !important;
    display: none !important;
  }

  /* Jede Varianten-Box: halbe Breite */
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    float: none !important;                         /* evtl. Theme-Floats neutralisieren */
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    display: block !important;
  }
}

/* Unter 768 px wieder einspaltig */
@media (max-width: 767.98px) {
  #product .product-variants {
    display: block !important;
  }
  #product .product-variants > .product-variants-item,
  #product .product-variants > .clearfix.product-variants-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/******************************
 * Produkt-Tabs – Eifelsüchtig
 * Pill-Look, mehr Luft, helles Braun
 ******************************/

/* Tab-Leiste aufräumen */
#product .tabs .nav-tabs,
.product-tabs .nav-tabs {
  border-bottom: 0 !important;
  gap: 10px;                 /* moderner Abstand */
  flex-wrap: wrap;
}

/* Standard-Tab (nicht aktiv) */
#product .tabs .nav-link,
.product-tabs .nav-link,
#product .tabs .nav-tabs li a,
.product-tabs .nav-tabs li a {
  padding: 10px 18px !important;       /* mehr Abstand zu den Buchstaben */
  line-height: 1.2 !important;
  border: 1px solid #d9cbbd !important;/* zartes Braun für Rahmen */
  border-radius: 9999px !important;    /* „Pill“-Form */
  background: #ffffff !important;
  color: #333 !important;
  font-weight: 500;
  letter-spacing: .2px;                /* leicht luftiger */
  text-transform: none;                /* bleibt wie in der Spracheinstellung */
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: none !important;
}

/* Hover/Fokus */
#product .tabs .nav-link:hover,
.product-tabs .nav-link:hover {
  background: #f7f1ea !important;      /* ganz leichtes Creme */
  border-color: #cdb9a3 !important;
}

#product .tabs .nav-link:focus-visible,
.product-tabs .nav-link:focus-visible {
  outline: 2px solid #cdb9a3;
  outline-offset: 2px;
}

/* Aktiver Tab – gut sichtbar */
#product .tabs .nav-link.active,
.product-tabs .nav-link.active,
#product .tabs .nav-tabs li.active a,
.product-tabs .nav-tabs li.active a {
  background: #eadfd3 !important;      /* helles Braun/Beige */
  border-color: #c8b49b !important;
  color: #412611 !important;           /* dunkles Kaffee-Braun */
  font-weight: 600 !important;
}

/* Inhalt etwas Luft nach oben */
#product .tabs .tab-content,
.product-tabs .tab-content {
  margin-top: 14px;
}

/* Falls dein Theme die Tabs anders markiert – Sicherheitsnetz */
#product .tabs li a.active,
.product-tabs li a.active {
  background: #eadfd3 !important;
  border-color: #c8b49b !important;
  color: #412611 !important;
}


/* ===========================
   Warenkorb Styling Eifelsüchtig
   =========================== */

/* Gesamtkarte rechts (Zusammenfassung / Checkout) */
.page-cart .cart-summary {
    border: 3px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    overflow: hidden;
    background: #fff;
    padding-bottom: 1rem;
}

/* Zeilen in der Zusammenfassung dezenter */
.page-cart .cart-summary .cart-summary-line {
    font-size: 0.95rem;
    color: #2f2f2f;
    padding: .5rem .75rem;
    line-height: 1.4;
}
.page-cart .cart-summary .cart-summary-line + .cart-summary-line {
    border-top: 1px solid #eee;
}

/* Gesamtsumme Zeile etwas hervorheben */
.page-cart .cart-summary .cart-total {
    font-weight: 600;
    color: #000;
}

/* "Zur Kasse"-Button: als klarer CTA */
.page-cart .cart-summary .checkout .btn-primary,
.page-cart .cart-summary .btn-primary {
    background: #4b321c !important;
    border-color: #4b321c !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.3;
}
.page-cart .cart-summary .checkout .btn-primary:hover,
.page-cart .cart-summary .btn-primary:hover {
    background: #9e826a !important;
    border-color: #9e826a !important;
}

/* PayPal-Buttons darunter sollen optisch als "Alternative" wirken:
   bisschen Abstand nach oben */
.page-cart .cart-summary .payment-options,
.page-cart .cart-summary .checkout ~ * {
    margin-top: 0.75rem;
}

/* Einzelne Produktzeilen im Warenkorb */
.page-cart .cart-items .cart-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Produktname klarer */
.page-cart .cart-items .cart-item .product-line-info .label,
.page-cart .cart-items .cart-item .product-line-info > .label {
    font-weight: 600;
    color: #3a2d25;
    font-size: .9rem;
    margin-right: .25rem;
}
.page-cart .cart-items .cart-item .product-line-info .value {
    color: #444;
    font-size: .9rem;
}

/* Menge-Spinner hübscher */
.page-cart .cart-items .bootstrap-touchspin {
    display: inline-flex;
    align-items: center;
}
.page-cart .cart-items .bootstrap-touchspin input.form-control {
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    min-width: 3rem;
    max-width: 3rem;
    text-align: center;
    height: 34px;
    padding: 0 .5rem;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #333;
}
.page-cart .cart-items .bootstrap-touchspin .btn-touchspin {
    background: #f8f8f8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    border-radius: 4px !important;
    height: 34px;
    width: 34px;
    padding: 0;
    line-height: 34px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}
.page-cart .cart-items .bootstrap-touchspin .btn-touchspin:hover {
    background: #ececec !important;
}

/* Icon "Papierkorb"/Löschen dezenter, nicht knallhart */
.page-cart .cart-items .remove-from-cart,
.page-cart .cart-items .remove-from-cart .material-icons {
    color: #888;
    font-size: 18px;
    line-height: 1;
}
.page-cart .cart-items .remove-from-cart:hover,
.page-cart .cart-items .remove-from-cart .material-icons:hover {
    color: #000;
}

/* "Einkauf fortsetzen"-Link am Anfang links unten:
   kleiner, weniger dominant */
.page-cart .cart-overview .label,
.page-cart a.cart-summary-btn-continue,
.page-cart a[href*="continue"] {
    font-size: .9rem;
    color: #444;
}
.page-cart a.cart-summary-btn-continue:hover,
.page-cart a[href*="continue"]:hover {
    color: #000;
    text-decoration: underline;
}

/* Überschrift "Warenkorb" etwas stärker */
.page-cart #main h1,
.page-cart #main .h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2b2b2b;
    margin-bottom: 1rem;
}

/* ===============================
   Kundenvertrauen – Eifelsüchtig Look
   =============================== */

.block-reassurance {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: flex-start;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.block-reassurance-item {
  flex: 1 1 30%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}

.block-reassurance-item img,
.block-reassurance-item i {
  background: #f5f0eb;
  color: #b38855; /* warmes Goldbraun */
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.block-reassurance-item i:hover {
  background: #eadfd3;
  color: #7a5530;
}

.block-reassurance-item .block-title {
  font-weight: 600;
  color: #2e2a25;
  font-size: 15px;
  margin-bottom: 4px;
}

.block-reassurance-item p {
  margin: 0;
  color: #6b5b4d;
  font-size: 13px;
  line-height: 1.4;
}

/* Responsiv */
@media (max-width: 768px) {
  .block-reassurance {
    flex-direction: column;
    gap: 14px;
  }
  .block-reassurance-item {
    flex: 1 1 100%;
  }
}

/* ===============================
   Kundenvertrauen im Warenkorb – Eifelsuechtig Look (final)
   =============================== */

/* 1. Wrapper unter der Zusammenfassung rechts:
   Wir zielen auf das Element direkt UNTER der .cart-summary Box.
   Das ist da, wo deine drei Texte stehen. */
.page-cart .cart-summary + div {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 16px;
    display: block;
}

/* 2. Jede einzelne "Policy"-Zeile (Icon + Text) */
.page-cart .cart-summary + div .cart-summary-line,
.page-cart .cart-summary + div .custom-reassure-item,
.page-cart .cart-summary + div .reassure-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 0;
    border-top: 1px solid #eee;

    font-size: 14px;
    line-height: 1.4;
    color: #4a3b32;
}

/* erstes Element ohne Linie oben */
.page-cart .cart-summary + div .cart-summary-line:first-child,
.page-cart .cart-summary + div .custom-reassure-item:first-child,
.page-cart .cart-summary + div .reassure-line:first-child {
    border-top: none;
    padding-top: 0;
}

/* 3. Icon links (Material Icon, Font Awesome, Bild) */
.page-cart .cart-summary + div .cart-summary-line .material-icons,
.page-cart .cart-summary + div .custom-reassure-item .material-icons,
.page-cart .cart-summary + div .reassure-line .material-icons,
.page-cart .cart-summary + div .cart-summary-line i,
.page-cart .cart-summary + div .custom-reassure-item i,
.page-cart .cart-summary + div .reassure-line i,
.page-cart .cart-summary + div .cart-summary-line img,
.page-cart .cart-summary + div .custom-reassure-item img,
.page-cart .cart-summary + div .reassure-line img {
    background: #f5f0eb;
    color: #b38855;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all .2s ease;
    object-fit: contain; /* falls img verwendet wird */
}

/* Hover-Effekt auf Icon */
.page-cart .cart-summary + div .cart-summary-line .material-icons:hover,
.page-cart .cart-summary + div .custom-reassure-item .material-icons:hover,
.page-cart .cart-summary + div .reassure-line .material-icons:hover,
.page-cart .cart-summary + div .cart-summary-line i:hover,
.page-cart .cart-summary + div .custom-reassure-item i:hover,
.page-cart .cart-summary + div .reassure-line i:hover {
    background: #eadfd3;
    color: #7a5530;
}

/* 4. Text rechts vom Icon */
.page-cart .cart-summary + div .cart-summary-line .cart-summary-line-label,
.page-cart .cart-summary + div .custom-reassure-item .cart-summary-line-label,
.page-cart .cart-summary + div .reassure-line .cart-summary-line-label,
.page-cart .cart-summary + div .cart-summary-line .reassure-text-wrap,
.page-cart .cart-summary + div .custom-reassure-item .reassure-text-wrap,
.page-cart .cart-summary + div .reassure-line .reassure-text-wrap {
    display: block;
    font-size: 13px;
    color: #6b5b4d;
    line-height: 1.45;
}

/* 5. Headline/Fettschrift innerhalb des Textes */
.page-cart .cart-summary + div .cart-summary-line .reassure-headline,
.page-cart .cart-summary + div .custom-reassure-item .reassure-headline,
.page-cart .cart-summary + div .reassure-line .reassure-headline {
    font-weight: 600;
    color: #2e2a25;
    font-size: 15px;
    margin-bottom: 3px;
    display: block;
}

/* 6. Mobile: einfach untereinander */
@media (max-width: 768px) {
    .page-cart .cart-summary + div .cart-summary-line,
    .page-cart .cart-summary + div .custom-reassure-item,
    .page-cart .cart-summary + div .reassure-line {
        align-items: flex-start;
    }
}



/* Produktbild verkleinern */
.page-cart .cart-items .cart-item .product-line-grid-left img,
.page-cart .cart-items .cart-item .product-image img,
.page-cart .cart-items .cart-item img {
  max-width: 130px !important;
  height: auto !important;
}

/* --- Linke Warenkorb-Box umranden (Überschrift + Produkte) --- */
.page-cart .cart-grid-body .cart-container {
  border: 3px solid #ddd;        /* #4b321c Braun, nimm #ddd wenn du hellgrau willst */
  border-radius: 6px;
  background: #fff;
  padding: 1.5rem;                  /* etwas Innenabstand, wirkt hochwertiger */
  box-shadow: none;                 /* falls Theme Schatten drauflegt */
}

/* Trennlinie unter "Warenkorb" entfernen (das <hr class="separator">) */
.page-cart .cart-grid-body .cart-container .separator {
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Interner Kasten (.cart-overview) nicht nochmal einrahmen */
.page-cart .cart-grid-body .cart-container .cart-overview {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Einzelne Cart-Items ohne eigene Randbox außenrum */
.page-cart .cart-grid-body .cart-container .cart-items .cart-item {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Optional dünne Trennlinie zwischen Produkten (falls mehrere Artikel) */
.page-cart .cart-grid-body .cart-container .cart-items .cart-item + .cart-item {
  border-top: 1px solid #e5e5e5 !important;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Den Block unter dem Warenkorb (cart-grid-body-content) NICHT mit einrahmen */
.page-cart .cart-grid-body .cart-grid-body-content,
.page-cart .cart-grid-body .cart-grid-body-content * {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0;
}

/* Dünne Linie unter der Überschrift "Warenkorb" */
.page-cart .cart-grid-body .cart-container .card-body {
  border-bottom: 1px solid #e5e5e5;   /* hellgraue Linie */
  padding-bottom: 0.75rem;            /* etwas Abstand nach unten */
  margin-bottom: 1rem;                /* Luft bis zum ersten Produkt */
}

/* Falls du sie etwas wärmer willst, leicht beige/braun-ton: */
/* border-bottom: 1px solid #d8c4af;  */


/* ============================================
   🪶 Dezenter Hover-Effekt für Warenkorb-Zeilen
   ============================================ */

.page-cart .cart-items .cart-item {
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Beim Hover leicht hervorheben */
.page-cart .cart-items .cart-item:hover {
  background: #fafafa; /* leichtes Grau, sehr dezent */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border-radius: 4px;
}

/* Optional: etwas mehr Abstand bei Hover für "Tiefe" */
.page-cart .cart-items .cart-item:hover img {
  transform: scale(1.02);
  transition: transform 0.25s ease;
}

/* ============================================
   Checkout / Bestellung – Rahmenstil
   ============================================ */

.page-order .card,
.page-order .checkout-step,
.page-order .cart-summary,
.page-order .checkout-block {
  border: 3px solid #ddd !important;
  border-radius: 6px 6px 6px 6px !important; /* leicht gerundet */
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

/* obere und untere Linie leicht betont, Seiten etwas klarer */
.page-order .card,
.page-order .checkout-step {
  border-top-width: 3px !important;
  border-bottom-width: 3px !important;
  border-left-width: 3px !important;
  border-right-width: 3px !important;
}

/* Zwischenlinien dünner halten */
.page-order .card hr,
.page-order .checkout-step hr,
.page-order .cart-summary hr {
  border-top: 1px solid #e5e5e5 !important;
  margin: 0.75rem 0;
}

/* dezenter Schatten, damit der 3px-Rahmen nicht zu schwer wirkt */
.page-order .card:hover,
.page-order .checkout-step:hover,
.page-order .checkout-block:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease;
}

/* Abstand zwischen Boxen */
.page-order .card + .card,
.page-order .checkout-step + .checkout-step {
  margin-top: 1.25rem !important;
}