/* =========================================================
   TUMBLER-LOVE – custom.css (aufgeräumt & konsolidiert)
   PrestaShop 1.7.8.6 • Theme: Deo_Axu / NaturalBeauty
   Stand: 2026-02-13

   HINWEIS
   - Diese Datei ist als ERSATZ für deine aktuelle custom.css gedacht.
   - Vorher bitte ein Backup anlegen (z.B. custom.backup.css).
   ========================================================= */


/* =========================================================
   01) FONTS & BASIS
   ========================================================= */

/* Inter lokal (WOFF2) */
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Inter als Standard */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea, select{
  font-family:"Inter", sans-serif !important;
}

/* Search Advanced Button Farbe */
.deo-search-advanced .block_content .deo-advanced-search-top-button{
  background:#7f7b7b;
}


/* =========================================================
   02) TOP-INFO-BAR (Banner)
   ========================================================= */

.top-bar-custom{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:1.2em;
  background:#7f7b7b !important;
  color:#ffffff !important;

  font-size:14px;
  line-height:1.2;
  padding:8px 10px;
  text-align:center;

  margin-bottom:10px;
}

.top-bar-custom > span{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  margin:0 !important;
}

/* Emoji-Fonts zuerst, damit Herzen sauber gerendert werden */
.top-bar-custom .emoji-heart,
.top-bar-custom .emoji-package{
  font-size:1.2em;
  line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Inter",sans-serif !important;
}
.top-bar-custom .emoji-heart{ color:#ff4d4d; }

/* FIX: Paket-Icon (falls Android/Windows das Emoji als ? rendert) */
.top-bar-custom .emoji-package{
  font-size:0 !important;
  width:18px !important;
  height:18px !important;
  display:inline-block !important;
  line-height:0 !important;
  vertical-align:-2px !important;
}
.top-bar-custom .emoji-package::before{
  content:"" !important;
  display:block !important;
  width:18px !important;
  height:18px !important;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 7v16'/%3E%3Cpath d='M12 7c0-2-2-3-3.5-3S6 5 6 7s2 3 6 3'/%3E%3Cpath d='M12 7c0-2 2-3 3.5-3S18 5 18 7s-2 3-6 3'/%3E%3C/svg%3E") !important;
}

/* Mobile/hochkant: Banner kompakter */
@media (max-width:576px){
  .top-bar-custom{
    padding:4px 8px !important;
    font-size:11px !important;
    line-height:1.15 !important;
    gap:1.1em !important;
    margin-bottom:8px !important;
  }
  .top-bar-custom > span{ gap:.3em !important; }
}

/* Querformat mit wenig Höhe: nicht umbrechen */
@media (max-height:480px){
  .top-bar-custom{
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* =========================================================
   03) FORM- & LABEL-STYLES
   ========================================================= */

label, .label{
  color:#4f4f4f;
  font-weight:500;
  font-size:14px;
  text-align:right;
}


/* =========================================================
   04) STARTSEITE
   ========================================================= */

/* HERO */
.tl-hero{ position:relative !important; }
.tl-hero img{ width:100% !important; height:auto !important; display:block !important; }

.tl-hero .tl-hero-text{
  position:absolute !important;
  left:28% !important;
  top:56% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:5 !important;
  max-width:560px !important;
}
.tl-hero .tl-hero-text h2{
  margin:0 0 10px !important;
  font-size:48px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#2e2e2e !important;
  line-height:1.05 !important;
}
.tl-hero .tl-hero-text p{
  margin:0 !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  color:#2e2e2e !important;
}

/* Desktop: H2 bleibt 1-zeilig */
@media (min-width:992px){
  .tl-hero .tl-hero-text{ max-width:none !important; }
  .tl-hero .tl-hero-text h2{ white-space:nowrap !important; }
}

/* Hero: Mobile -> Text aus */
@media (max-width:768px){
  .tl-hero .tl-hero-text{ display:none !important; }
}

/* Hero: Tablet/iPad */
@media (min-width:768px) and (max-width:1024px){
  .tl-hero .tl-hero-text{
    left:6% !important;
    top:54% !important;
    transform:translateY(-50%) !important;
    text-align:left !important;
    width:50% !important;
    max-width:520px !important;
  }
  .tl-hero .tl-hero-text h2{
    font-size:34px !important;
    line-height:1.05 !important;
    letter-spacing:.6px !important;
    white-space:normal !important;
  }
  .tl-hero .tl-hero-text p{
    font-size:16px !important;
    line-height:1.35 !important;
  }
}

/* Introbar – Fullwidth */
.page-home .tl-introbar{
  background:#f4f4f4 !important;
  padding:32px 0 !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.page-home .tl-introbar__inner{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:0 34px !important;
}
.page-home .tl-introbar__inner h2{
  margin:0 0 18px !important;
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#3a3a3a !important;
}
.page-home .tl-introbar__inner p{
  margin:0 0 18px !important;
  font-size:15px !important;
  line-height:1.85 !important;
  font-weight:450 !important;
  color:#6a6a6a !important;
}
.page-home .tl-introbar__inner p:last-child{
  margin-bottom:0 !important;
  font-weight:700 !important;
  color:#3a3a3a !important;
}

/* Abstand zwischen Slideshow und nächstem Block reduzieren */
.page-home .row.box-start.box-slideshow .deo-space.medium_space.DeoSpace{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.page-home .row.box-start.box-slideshow{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.page-home .row.box-categories.box-space-before{
  margin-top:-12px !important;
  padding-top:0 !important;
}

/* USP / Service Row */
#index .row.box-service{ padding:20px 0 !important; }
#index .row.box-service > [class*="col-"]{
  padding-left:8px !important;
  padding-right:8px !important;
}
#index .row.box-service .service.service-style-fourteen{
  margin:0 10px !important;
  text-align:center !important;
}
#index .row.box-service .service.service-style-fourteen img,
#index .row.box-service .service.service-style-fourteen img.img-fluid{
  width:96px !important;
  max-width:96px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto 10px !important;
}
#index .row.box-service .service.service-style-fourteen h3,
#index .row.box-service .service.service-style-fourteen h4,
#index .row.box-service .service.service-style-fourteen .service-title{
  margin:10px 0 6px !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
  color:#2f2f2f !important;
  line-height:1.2 !important;
}
#index .row.box-service .service.service-style-fourteen p{
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  color:#6a6a6a !important;
  margin:0 auto !important;
  max-width:340px !important;

  display:block !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  max-height:none !important;
}

/* 2 Bild-Kacheln (box-categories) – Desktop kleiner */
#index .page-home .row.box-categories.box-space-before .block.DeoImage a.image{
  display:flex !important;
  justify-content:center !important;
}
#index .page-home .row.box-categories.box-space-before .block.DeoImage img{
  width:80% !important;
  max-width:620px !important;
  height:auto !important;
  display:block !important;
}

/* Mobile: volle Breite + untereinander */
@media (max-width:768px){
  #index .page-home .row.box-categories.box-space-before .block.DeoImage img{
    width:100% !important;
    max-width:100% !important;
  }
  #index .page-home .row.box-categories.box-space-before.DeoRow{
    display:flex !important;
    flex-wrap:wrap !important;
  }
  #index .page-home .row.box-categories.box-space-before.DeoRow > .col-xs-6,
  #index .page-home .row.box-categories.box-space-before.DeoRow > .col-sm-6,
  #index .page-home .row.box-categories.box-space-before.DeoRow > .col-sp-6{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    float:none !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  #index .page-home .row.box-categories.box-space-before .block.DeoImage{ margin-bottom:14px !important; }
  #index .page-home .row.box-categories.box-space-before.DeoRow > [class*="col-"]:last-of-type .block.DeoImage{ margin-bottom:0 !important; }
}

/* Storybar – Vollbreite */
#index .tl-storybar{
  background:#4a4a4a;
  padding:34px 0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#index .tl-storybar__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 34px;
  color:#e9e9e9;
}
#index .tl-story-h2{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:#ffffff;
}
#index .tl-story-h3{
  margin:0 0 14px;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  color:#f1f1f1;
}
#index .tl-storybar__inner p{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.65;
  font-weight:400;
  color:#e2e2e2;
}
#index .tl-storybar__inner strong{ font-weight:700; color:#ffffff; }
#index .tl-storybar__inner p:last-child{ margin-bottom:0; }
#index .tl-story-cta{ margin-top:10px; font-weight:700; color:#ffffff; }
#index .tl-story-cta::before{ content:"👉 "; }

@media (max-width:767px){
  #index .tl-storybar{ padding:22px 0; }
  #index .tl-storybar__inner{ padding:0 18px; }
}

/* Theme-Variante has-bg: weniger Luft oben */
#index .tl-storybar.DeoRow.has-bg{
  padding-top:22px !important;
  padding-bottom:34px !important;
}
#index .tl-storybar.DeoRow.has-bg .block_content{ padding-top:0 !important; }
#index .tl-storybar.DeoRow.has-bg h2,
#index .tl-storybar.DeoRow.has-bg h3{ margin-top:0 !important; }

/* Untertitel im Product Carousel */
.page-home .DeoProductCarousel.has-sub-title .box-title .sub-title-widget{
  font-size:15px !important;
  line-height:1.4 !important;
  font-weight:450 !important;
  margin-top:6px !important;
}


/* =========================================================
   05) KATEGORIE-SEITEN
   ========================================================= */

body#category.layout-left-column #left-column{ display:none !important; }
body#category.layout-left-column #content-wrapper{
  flex:0 0 100% !important;
  max-width:100% !important;
  width:100% !important;
}
body#category.layout-left-column #content-wrapper[class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* =========================================================
   06) PRODUKTSEITE – TYPO, TABS & BILDER
   ========================================================= */

.description-short{
  font-size:15px;
  line-height:1.6;
  margin-top:15px;
  margin-bottom:30px;
}

/* Produkt-Text (Tab-Inhalt) – konsolidiert */
body#product #main .product-description.product-page-description,
body#product .tab-content .product-description.product-page-description{
  max-width:980px;
  margin:0 auto;

  font-size:16px;
  line-height:1.65;

  color:#3a3a3a !important;
}
body#product #main .product-description.product-page-description p,
body#product #main .product-description.product-page-description li,
body#product .tab-content .product-description.product-page-description p,
body#product .tab-content .product-description.product-page-description li{
  font-size:16px !important;
  line-height:1.65 !important;
  color:#444444 !important;
  margin:0 0 12px !important;
}

body#product #main .product-description.product-page-description h1,
body#product .tab-content .product-description.product-page-description h1{
  font-size:26px !important;
  line-height:1.2 !important;
  margin:0 0 14px !important;
  font-weight:700 !important;
  padding-bottom:10px !important;
  border-bottom:1px solid #e7e2de !important;
  color:#2f2f2f !important;
}

/* weil bei dir das H1 ein STRONG enthält */
body#product #main .product-description.product-page-description h1 strong,
body#product .tab-content .product-description.product-page-description h1 strong{
  font-weight:700 !important;
}

body#product #main .product-description.product-page-description h2,
body#product .tab-content .product-description.product-page-description h2{
  font-size:19px !important;
  margin:16px 0 10px !important;
  font-weight:700 !important;
  color:#2f2f2f !important;
}
body#product #main .product-description.product-page-description h3,
body#product .tab-content .product-description.product-page-description h3{
  font-size:16px !important;
  margin:16px 0 10px !important;
  font-weight:700 !important;
  color:#2f2f2f !important;
}

body#product .tab-content .product-description.product-page-description small{
  color:#5a5a5a !important;
}

/* Tabs-Nav */
.product-tabs.tabs{
  font-size:14px;
  margin-top:40px;
  margin-bottom:40px;
}
body#product #main .product-tabs.tabs .nav.nav-tabs > li > a,
body#product #main .product-tabs.tabs .nav-tabs .nav-link{
  color:#4f4f4f !important;
}
body#product #main .product-tabs.tabs .nav.nav-tabs > li > a:hover,
body#product #main .product-tabs.tabs .nav-tabs .nav-link:hover{
  color:#ffffff !important;
}
body#product #main .product-tabs.tabs .nav.nav-tabs > li.active > a,
body#product #main .product-tabs.tabs .nav-tabs .nav-link.active{
  color:#ffffff !important;
}

/* Subline unter "Ähnliche Produkte" */
.category-products .sub-title-widget{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Inter",sans-serif !important;
  font-size:15px !important;
  line-height:1.4 !important;
  font-weight:450 !important;
  margin-top:6px !important;
}

/* Produktbilder auf Mobil kleiner (nur <=767px) */
@media (max-width:767px){
  #product #content .images-container{
    max-width:440px;
    margin:0 auto;
  }
  #product #content .images-container .product-cover img,
  #product #content .images-container .product-cover picture img{
    max-height:360px;
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }
}

/* Tablet: Bildspalte minimal breiter (2 Spalten bleiben) */
@media (min-width:768px) and (max-width:1399px){
  body#product section#main.product-detail > .row:first-of-type > [class*="col-"]:first-child{
    flex:0 0 58% !important;
    max-width:58% !important;
  }
  body#product section#main.product-detail > .row:first-of-type > [class*="col-"]:last-child{
    flex:0 0 42% !important;
    max-width:42% !important;
  }

  body#product section#main.product-detail img.deo-js-qv-product-cover,
  body#product section#main.product-detail .product-cover img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  body#product section#main.product-detail .images-container,
  body#product section#main.product-detail .deo-carousel.product-images{
    max-width:none !important;
  }
}


/* =========================================================
   07) TRUST / REASSURANCE – PRODUKT & WARENKORB
   ========================================================= */

/* Produkt: 2x2 Grid, mobil 1 Spalte, Tablet 1 Spalte (ruhiger) */
body#product .blockreassurance_product{
  background:transparent !important;
  padding:0 !important;
  margin-top:14px !important;

  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
}
body#product .blockreassurance_product > .clearfix,
body#product .blockreassurance_product > div:empty{ display:none !important; }

body#product .blockreassurance_product > div,
body#product .blockreassurance_product > li{
  background:#f3ece6 !important;
  border:1px solid #e7ddd6 !important;
  border-radius:10px !important;

  padding:9px 12px !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:34px 1fr !important;
  grid-template-rows:min-content min-content !important;
  column-gap:14px !important;
  row-gap:2px !important;

  align-content:center !important;
  align-items:center !important;
  min-height:0 !important;
  min-width:0 !important;
}
body#product .blockreassurance_product .item-product{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;

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

  padding:2px 0 4px !important;
  margin:0 !important;
}
body#product .blockreassurance_product .item-product img,
body#product .blockreassurance_product .item-product svg{
  width:26px !important;
  height:auto !important;
  display:block !important;
}
body#product .blockreassurance_product .block-title,
body#product .blockreassurance_product .title{
  grid-column:2 !important;
  margin:0 !important;
  padding:0 !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.15 !important;
}
body#product .blockreassurance_product p{
  grid-column:2 !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.25 !important;
  overflow-wrap:break-word !important;
  hyphens:none !important;
}

/* Mobile */
@media (max-width:576px){
  body#product .blockreassurance_product{ grid-template-columns:1fr !important; }
}
/* Tablet & schmale Laptops (wenn gewünscht): 1 Spalte */
@media (min-width:768px) and (max-width:1399px){
  body#product .blockreassurance_product{ grid-template-columns:1fr !important; }
}

/* Falls dein Theme stattdessen #block-reassurance rendert: gleiches Grid */
body#product #block-reassurance ul{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
body#product #block-reassurance li{
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  width:auto !important;
}
@media (max-width:576px){
  body#product #block-reassurance ul{ grid-template-columns:1fr !important; }
}
@media (min-width:768px) and (max-width:1399px){
  body#product #block-reassurance ul{ grid-template-columns:1fr !important; }
}

/* Warenkorb: untereinander */
body#cart .blockreassurance_product{
  background:transparent !important;
  padding:0 !important;
  margin-top:14px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
body#cart .blockreassurance_product > .clearfix,
body#cart .blockreassurance_product > div:empty{ display:none !important; }

body#cart .blockreassurance_product > div,
body#cart .blockreassurance_product > li{
  background:#f3ece6 !important;
  border:1px solid #e7ddd6 !important;
  border-radius:10px !important;

  padding:9px 12px !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:34px 1fr !important;
  grid-template-rows:min-content min-content !important;
  column-gap:14px !important;
  row-gap:2px !important;

  align-content:center !important;
  align-items:center !important;
  min-height:0 !important;
  min-width:0 !important;
}
body#cart .blockreassurance_product .item-product{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;

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

  padding:2px 0 4px !important;
  margin:0 !important;
}
body#cart .blockreassurance_product .block-title,
body#cart .blockreassurance_product .title{
  grid-column:2 !important;
  margin:0 !important;
  padding:0 !important;

  font-weight:700 !important;
  font-size:12px !important;
  line-height:1.15 !important;

  white-space:nowrap !important;
}
body#cart .blockreassurance_product p{
  grid-column:2 !important;
  margin:0 !important;
  padding:0 !important;

  font-size:13px !important;
  line-height:1.25 !important;
}


/* =========================================================
   08) WARENKORB / CHECKOUT – KLEINERE FIXES
   ========================================================= */

body#cart .checkout.cart-detailed-actions a.btn + *{
  margin-top:10px !important;
}
.shopping-cart-description .product-title span{
  font-size:14px;
  line-height:1;
  display:inline-block;
  width:100%;
}
.total-price-text, .cart-product-price{
  font-size:13px;
  text-align:right;
}
span.cart-product-price span{ font-size:13px; }


/* =========================================================
   09) SUPERCHECKOUT (Module)
   ========================================================= */

/* Links im OPC (ruhige Farbe) */
.opc-container a,
.opc-container a:hover,
.opc-container a:focus{
  color:#474747 !important;
}
#confirmCheckout .remove-from-cart{ color:#474747 !important; }

/* Abstand unter Newsletter-Hinweis */
#customer_person_information_table .input-box{
  margin-bottom:20px !important;
}

/* Newsletter-Checkbox + Text sauber nebeneinander */
body#module-supercheckout-supercheckout #customer_personal_newsletter,
body[id*="supercheckout"] #customer_personal_newsletter{
  float:left !important;
  margin:2px 5px 0 0 !important;
}
body#module-supercheckout-supercheckout label[for="customer_personal_newsletter"],
body[id*="supercheckout"] label[for="customer_personal_newsletter"]{
  display:block !important;
  overflow:hidden !important;
  padding-left:0 !important;
  margin:0 !important;
  line-height:1.25 !important;
}

/* Menge: NUR die Zahl im Kästchen */
body#module-supercheckout-supercheckout .quantity-section .input-group.bootstrap-touchspin > .input-group,
body[id*="supercheckout"] .quantity-section .input-group.bootstrap-touchspin > .input-group{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body#module-supercheckout-supercheckout .quantity-section .input-group.bootstrap-touchspin,
body[id*="supercheckout"] .quantity-section .input-group.bootstrap-touchspin,
body#module-supercheckout-supercheckout .quantity-section .input-group,
body[id*="supercheckout"] .quantity-section .input-group,
body#module-supercheckout-supercheckout .quantity-section span.input-group-btn,
body[id*="supercheckout"] .quantity-section span.input-group-btn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_down,
body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_up,
body[id*="supercheckout"] .quantity-section button.cart_quantity_down,
body[id*="supercheckout"] .quantity-section button.cart_quantity_up{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  font-size:inherit !important;
  line-height:inherit !important;
  color:#474747 !important;
}
body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_down::before,
body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_up::before,
body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_down::after,
body#module-supercheckout-supercheckout .quantity-section button.cart_quantity_up::after,
body[id*="supercheckout"] .quantity-section button.cart_quantity_down::before,
body[id*="supercheckout"] .quantity-section button.cart_quantity_up::before,
body[id*="supercheckout"] .quantity-section button.cart_quantity_down::after,
body[id*="supercheckout"] .quantity-section button.cart_quantity_up::after{
  content:none !important;
}

body#module-supercheckout-supercheckout .quantity-section input.quantitybox,
body#module-supercheckout-supercheckout .quantity-section input#quantity,
body[id*="supercheckout"] .quantity-section input.quantitybox,
body[id*="supercheckout"] .quantity-section input#quantity{
  width:44px !important;
  height:34px !important;
  margin:0 !important;
  text-align:center !important;

  background:#ffffff !important;
  border:1px solid #d3d3d3 !important;
  border-radius:6px !important;
  box-shadow:none !important;

  color:#474747 !important;
}

body#module-supercheckout-supercheckout .quantity-section a.remove-from-cart,
body#module-supercheckout-supercheckout .quantity-section a[id*="deleteProductFromCart"],
body[id*="supercheckout"] .quantity-section a.remove-from-cart,
body[id*="supercheckout"] .quantity-section a[id*="deleteProductFromCart"]{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  margin-left:8px !important;
  padding:0 !important;
  display:inline-block !important;
  text-decoration:none !important;
}

/* PayPal Button unten kleiner (Iframe begrenzen) */
body#module-supercheckout-supercheckout iframe[name^="__zoid__paypal_buttons"],
body[id*="supercheckout"] iframe[name^="__zoid__paypal_buttons"],
body#module-supercheckout-supercheckout iframe[src*="paypal.com"][title*="PayPal"],
body[id*="supercheckout"] iframe[src*="paypal.com"][title*="PayPal"]{
  max-width:520px !important;
  width:100% !important;
  display:block !important;
  margin:10px auto 0 !important;
}
body#module-supercheckout-supercheckout .js-additional-information{
  padding:0 !important;
  font-size:100% !important;
}

/* SuperCheckout: weißen Rand über der Top-Bar entfernen */
body#module-supercheckout-supercheckout #header .header-nav{
  padding-top:0 !important;
}

/* Clean-Checkout: dunklen Menü-Balken entfernen */
body#module-supercheckout-supercheckout .nav-fullwidth,
body#module-supercheckout-supercheckout .header-bottom,
body#module-supercheckout-supercheckout #header .deo-horizontal-menu{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
/* Suche + Account/Cart im Checkout Header ausblenden */
body#module-supercheckout-supercheckout #_desktop_search_widget,
body#module-supercheckout-supercheckout .search-widget,
body#module-supercheckout-supercheckout .user-info,
body#module-supercheckout-supercheckout .cart-preview{
  display:none !important;
}
/* Logo-Bereich flacher */
body#module-supercheckout-supercheckout .header-top{
  padding-top:10px !important;
  padding-bottom:10px !important;
  min-height:0 !important;
}


/* =========================================================
   10) HEADER / MOBILE HEADER
   ========================================================= */

@media (max-width:767px){

  #header .header-container,
  #header .header-top,
  #header .header-top .inner{
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  #header .box-middle-header{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    padding:6px 10px !important;
  }

  #header .box-middle-header > .DeoColumn{
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #header .box-middle-header > .center-middle-header.DeoColumn{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }

  #header .logo.block.DeoLogoStore,
  #header .logo.block.DeoLogoStore .media{
    padding:0 !important;
    margin:0 !important;
    line-height:0 !important;
  }
  #header .logo.block.DeoLogoStore a.image{
    display:block !important;
    padding:0 !important;
    margin:0 !important;
  }
  #header .logo.block.DeoLogoStore img{
    display:block !important;
    width:auto !important;
    max-height:56px !important;
    margin:0 !important;
  }

  #header .box-middle-header > .right-middle-header.DeoColumn{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
  }

  #header .box-middle-header > .right-middle-header.DeoColumn:nth-child(2){
    margin-left:auto !important;
  }
  #header .box-middle-header > .right-middle-header.DeoColumn:nth-child(3){
    margin-left:12px !important;
  }

  /* Mobile: Suchlupe ausblenden */
  #header .DeoAdvancedSearch,
  #header .deo-search-advanced{
    display:none !important;
  }
  /* Falls die Lupe als eigene Spalte kommt: ganze Spalte weg */
  #header .box-middle-header > .right-middle-header.DeoColumn:nth-child(2){
    display:none !important;
  }
  /* Konto/Warenkorb ganz nach rechts */
  #header .box-middle-header > .right-middle-header.DeoColumn:nth-child(3){
    margin-left:auto !important;
  }
}


/* =========================================================
   11) NAV / MENÜ – HAMBURGER + DROPDOWN FARBE (Mobile)
   ========================================================= */

/* Rahmen um das horizontale Megamenu entfernen */
.deo-horizontal-menu{
  border:0 !important;
  box-shadow:none !important;
}
.deo-horizontal-menu .navbar-nav,
.deo-horizontal-menu .megamenu-content{
  box-shadow:none !important;
}

/* HAMBURGER */
@media (max-width:991px){
  .deo-horizontal-menu .navbar-header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  .deo-horizontal-menu .navbar-header .text-menu-toggler{ display:none !important; }

  .deo-horizontal-menu .navbar-header .navbar-toggler{
    position:relative !important;
    float:none !important;

    width:40px !important;
    height:35px !important;
    padding:0 !important;

    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;

    border:1px solid rgba(255,255,255,.85) !important;
    border-radius:4px !important;

    font-size:0 !important;
    overflow:hidden !important;
    outline:none !important;

    margin:0 12px 0 12px !important;
  }

  .deo-horizontal-menu .navbar-header .navbar-toggler > *{ display:none !important; }

  .deo-horizontal-menu .navbar-header .navbar-toggler::before{
    content:"" !important;
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    top:10px !important;
    height:2px !important;

    background:rgba(255,255,255,.85) !important;
    box-shadow:0 6px 0 rgba(255,255,255,.85), 0 12px 0 rgba(255,255,255,.85) !important;
  }

  .deo-horizontal-menu .navbar-header .navbar-toggler:focus{
    box-shadow:0 0 0 2px rgba(255,255,255,.18) !important;
  }
}

/* Aufgeklapptes Menü NICHT dunkel */
@media (max-width:991px){
  .deo-horizontal-menu .megamenu-content{
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#2e2e2e !important;
  }
  .deo-horizontal-menu .megamenu-content[style]{
    background:#ffffff !important;
    background-color:#ffffff !important;
  }
  .deo-horizontal-menu .megamenu-content .navbar-nav{ background:transparent !important; }
  .deo-horizontal-menu .megamenu-content .nav-item > a,
  .deo-horizontal-menu .megamenu-content .nav-item > a:visited{
    color:#2e2e2e !important;
  }
  .deo-horizontal-menu .megamenu-content .horizontal-menu-title{
    background:transparent !important;
    color:#2e2e2e !important;
  }
  .deo-horizontal-menu .megamenu-content .nav-item{
    background:transparent !important;
  }
  .deo-horizontal-menu .megamenu-content .nav-item > a:hover,
  .deo-horizontal-menu .megamenu-content .nav-item > a:focus{
    background:#f3ece6 !important;
    color:#2e2e2e !important;
  }
}


/* =========================================================
   12) FOOTER – NEWSLETTER & KLEINIGKEITEN
   ========================================================= */

/* Newsletter-Block (nur dieser Bereich) heller */
#footer .block_newsletter{
  background:#3b3f46 !important;
  padding:18px 16px !important;
  border-radius:12px !important;
}

/* Inputs: keine Hintergrundfüllung */
#footer .block_newsletter .input-wrapper{
  background:transparent !important;
}
#footer .block_newsletter input[type="email"],
#footer .block_newsletter input[type="text"]{
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none;
  color:#fff !important;
}
#footer .block_newsletter input[type="email"]::placeholder,
#footer .block_newsletter input[type="text"]::placeholder{
  color:rgba(255,255,255,.75) !important;
}

/* Chrome/Edge Autofill neutralisieren */
#footer .block_newsletter input:-webkit-autofill,
#footer .block_newsletter input:-webkit-autofill:hover,
#footer .block_newsletter input:-webkit-autofill:focus,
#footer .block_newsletter input:-webkit-autofill:active{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0px 1000px transparent inset !important;
  box-shadow:0 0 0px 1000px transparent inset !important;
  transition:background-color 9999s ease-out 0s;
}

/* DSGVO-Checkbox: Abstand + Lesbarkeit */
#footer .block_newsletter .gdpr_consent{
  border-top:0 !important;
  margin-top:12px !important;
  padding-top:12px !important;
}
#footer .block_newsletter label.psgdpr_consent_message{
  color:#c9cdd3 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  margin:0 !important;
}
#footer .block_newsletter label.psgdpr_consent_message input[type="checkbox"]{
  margin-top:2px !important;
}
#footer .block_newsletter label.psgdpr_consent_message a{
  color:#e2e6ee !important;
  text-decoration:underline;
}
#footer .block_newsletter label.psgdpr_consent_message a:hover{
  color:#ffffff !important;
}

/* Somacom-Link im Copyright heller */
#footer .block.copyright a[href*="somacom"]{
  color:#d7d7d7 !important;
}
#footer .block.copyright a[href*="somacom"]:hover,
#footer .block.copyright a[href*="somacom"]:focus{
  color:#ffffff !important;
}

/* Footer (Desktop): Newsletter etwas schmaler, Link-Spalten breiter */
@media (min-width:992px){
  #footer .box-top-footer{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
  }
  #footer .box-top-footer > .DeoColumn{
    flex:1 1 0 !important;
    max-width:none !important;
    min-width:0 !important;
  }
  #footer .box-top-footer > .DeoColumn:first-child{
    flex:0 0 28% !important;
    max-width:45% !important;
  }
  #footer .box-top-footer > .DeoColumn:nth-child(2){
    flex:1.3 1 0 !important;
  }
}


/* =========================================================
   13) CMS / FAQ / IMPRESSUM – Layout wie bei Linomino
   ========================================================= */

body#cms #content.page-cms.page-content{
  max-width:980px;
  margin:0 auto 60px;
  padding:34px 28px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

body#cms #content.page-cms.page-content h1{
  font-size:34px;
  line-height:1.15;
  margin:0 0 18px;
  letter-spacing:.2px;
}

body#cms #content.page-cms.page-content,
body#cms #content.page-cms.page-content p,
body#cms #content.page-cms.page-content li{
  font-size:15px;
  line-height:1.75;
  color:#2b2b2b;
}

/* Zwischenüberschriften mit Accent-Bar */
body#cms #content.page-cms.page-content h2,
body#cms #content.page-cms.page-content h3{
  position:relative;
  margin:34px 0 12px;
  padding-left:14px;
  text-decoration:none !important;
}
body#cms #content.page-cms.page-content h2:before,
body#cms #content.page-cms.page-content h3:before{
  content:"";
  position:absolute;
  left:0;
  top:.25em;
  width:4px;
  height:1.15em;
  border-radius:6px;
  background:#8b6969;
}

/* Trenner */
body#cms #content.page-cms.page-content hr{
  border:0;
  border-top:1px solid #e7e2de;
  margin:22px 0;
}

/* Links */
body#cms #content.page-cms.page-content a{
  color:#8b6969;
  text-decoration:none;
  border-bottom:1px solid rgba(139,105,105,.35);
}
body#cms #content.page-cms.page-content a:hover{
  border-bottom-color:rgba(139,105,105,.75);
}

/* Hinweise/Boxen */
body#cms #content.page-cms.page-content .alert,
body#cms #content.page-cms.page-content .warning,
body#cms #content.page-cms.page-content blockquote{
  background:#f3ece6;
  border:1px solid #eadfd8;
  border-left:5px solid #8b6969;
  border-radius:12px;
  padding:14px 16px;
  margin:18px 0;
  color:#2b2b2b;
}

/* Listen */
body#cms #content.page-cms.page-content ul,
body#cms #content.page-cms.page-content ol{
  margin:10px 0 16px 20px;
}
body#cms #content.page-cms.page-content li{
  margin:6px 0;
}

/* Tabellen */
body#cms #content.page-cms.page-content table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 20px;
  font-size:14px;
}
body#cms #content.page-cms.page-content th,
body#cms #content.page-cms.page-content td{
  border:1px solid #e7e2de;
  padding:10px 12px;
  vertical-align:top;
}
body#cms #content.page-cms.page-content th{
  background:#faf7f5;
}

/* Buttons (dezent) */
body#cms #content.page-cms.page-content .button,
body#cms #content.page-cms.page-content .btn{
  border-radius:10px;
}

/* Mobile Feinheiten */
@media (max-width:767px){
  body#cms #content.page-cms.page-content{
    padding:22px 16px;
    border-radius:14px;
  }
  body#cms #content.page-cms.page-content h1{
    font-size:26px;
  }
}

/* ===== Produktseite: Trust-Symbole IMMER untereinander + kompakter Abstand ===== */
body#product .blockreassurance_product{
  background: transparent !important;
  padding: 0 !important;
  margin-top: 14px !important;

  /* statt Grid 2 Spalten -> IMMER 1 Spalte */
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;              /* Regler: 4–10 */
}

/* Kinder: keine Extra-Leerzeilen durch Margins/Paddings */
body#product .blockreassurance_product > *{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Häufige Übeltäter im Inneren */
body#product .blockreassurance_product p,
body#product .blockreassurance_product .block-title,
body#product .blockreassurance_product span{
  margin: 0 !important;
}

/* falls ein Theme dem Item selbst unten Luft gibt */
body#product .blockreassurance_product .blockreassurance_item,
body#product .blockreassurance_product .item,
body#product .blockreassurance_product li{
  margin-bottom: 0 !important;
}

