/* ==========================================================
   Growshop365 v2.0 – Smooth Scroll + Responsive Safety
   Lädt als zz-Datei nach den normalen Template-Stylesheets.
   ========================================================== */

/* ----------------------------------------------------------
   1. Globale Scroll-Performance
   ---------------------------------------------------------- */

html{
  scroll-behavior:auto !important;
  overflow-x:hidden !important;
}

body{
  overflow-x:hidden !important;
  background:
    linear-gradient(135deg, #052e26 0%, #020617 52%, #071a33 100%)
    !important;
  background-attachment:scroll !important;
}

/*
 * Die große fixed Vollbild-Glow-Ebene muss beim Scrollen permanent neu
 * zusammengesetzt werden. Der statische Body-Verlauf ersetzt sie.
 */
.gr-page-bg,
.gr-page-gradient{
  display:none !important;
}

/* Teure Echtzeit-Unschärfe auf großen/festen Flächen entfernen. */
.gr-topbar,
.gr-header .bar,
.gr-search-drawer .panel,
#grOffcanvasMask,
#grOffcanvas,
#topCategoriesBar .dropdown-menu,
.cookie-consent-banner,
.cookie-consent-content,
.zca-banner,
#navColumnOneWrapper,
#navColumnTwoWrapper,
#indexProductList.gr21-index,
#productsListing.gr21-wrap,
.gr21-seo-filter-box,
.gr21-filter-toolbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Blend-Modi und große flächige Pseudoeffekte vermeiden. */
.zca-banner::before,
#navColumnOneWrapper::before,
#navColumnTwoWrapper::before{
  mix-blend-mode:normal !important;
  opacity:.08 !important;
}

/* Schatten reduzieren, ohne das Dark-Card-Design zu verlieren. */
.gr-header .bar,
#productsListing.gr21-wrap,
#gr21SeoFilterPage .gr21-filter-hero,
#gr21SeoFilterPage .gr21-filter-content-block,
#gr21SeoFilterPage .gr21-filter-benefit-card,
#gr21SeoFilterPage .gr21-filter-link-card,
.gr21-seo-filter-box,
.gr21-filter-toolbar{
  box-shadow:0 7px 18px rgba(2,6,23,.34) !important;
}

/* Während des Scrollens unnötige GPU-Layer vermeiden. */
#productsListing img,
#gr21SeoFilterPage img{
  transform:none !important;
  backface-visibility:visible !important;
  will-change:auto !important;
  filter:none !important;
}

#productsListing .gr21-card,
#productsListing .gr21-frame,
#gr21SeoFilterPage .gr21-filter-hero,
#gr21SeoFilterPage .gr21-filter-content-block,
#gr21SeoFilterPage .gr21-filter-benefit-card,
#gr21SeoFilterPage .gr21-filter-link-card{
  will-change:auto !important;
}

/* Große Hover-Bewegungen vermeiden. */
#productsListing .gr21-card:hover,
#productsListing .gr21-frame:hover,
#gr21SeoFilterPage .gr21-filter-link-card:hover,
#gr21SeoFilterPage .gr21-filter-link-card:focus{
  transform:none !important;
}

/* Animationen nur für essenzielle Interaktionen; Seitencontainer statisch. */
#productsListing .gr21-card,
#productsListing .gr21-frame,
#gr21SeoFilterPage .gr21-filter-hero,
#gr21SeoFilterPage .gr21-filter-content-block,
#gr21SeoFilterPage .gr21-filter-benefit-card,
#gr21SeoFilterPage .gr21-filter-link-card{
  transition:border-color .15s ease, background-color .15s ease !important;
}

/* ----------------------------------------------------------
   2. Allgemeiner Schutz vor horizontalem Abschneiden
   ---------------------------------------------------------- */

#mainWrapper,
#mainWrapper main,
#mainWrapper > main > .row,
#mainWrapper .centerColumn,
#mainWrapper .listingCenterColumn{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#mainWrapper .row{
  max-width:100% !important;
}

#mainWrapper .row > [class*="col-"],
#mainWrapper .row > .col{
  min-width:0 !important;
  max-width:100%;
}

.centerColumn,
.listingCenterColumn{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere;
}

img,
video,
iframe,
svg,
canvas{
  max-width:100%;
}

/* ----------------------------------------------------------
   3. SEO-Filterseite vollständig responsive
   ---------------------------------------------------------- */

#gr21SeoFilterPage{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 10px 24px !important;
  overflow:visible !important;
}

#gr21SeoFilterPage *,
#gr21SeoFilterPage *::before,
#gr21SeoFilterPage *::after{
  min-width:0;
  max-width:100%;
}

#gr21SeoFilterPage .row{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:-6px !important;
  margin-right:-6px !important;
}

#gr21SeoFilterPage .row > [class*="col-"],
#gr21SeoFilterPage .row > .col{
  min-width:0 !important;
  max-width:100% !important;
  padding-left:6px !important;
  padding-right:6px !important;
}

#gr21SeoFilterPage .gr21-filter-hero,
#gr21SeoFilterPage .gr21-filter-content-block,
#gr21SeoFilterPage .gr21-filter-benefits,
#gr21SeoFilterPage .gr21-filter-benefit-card,
#gr21SeoFilterPage .gr21-filter-toolbar,
#gr21SeoFilterPage #productsListing,
#gr21SeoFilterPage .gr21-filter-internal-links,
#gr21SeoFilterPage .gr21-filter-links-head,
#gr21SeoFilterPage .gr21-filter-link-grid,
#gr21SeoFilterPage .gr21-filter-link-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#gr21SeoFilterPage .gr21-filter-hero,
#gr21SeoFilterPage .gr21-filter-content-block{
  overflow:visible !important;
}

/* Überschriften und lange Wörter dürfen niemals abgeschnitten werden. */
#gr21SeoFilterPage h1,
#gr21SeoFilterPage h2,
#gr21SeoFilterPage h3,
#gr21SeoFilterPage h4,
#gr21SeoFilterPage .gr21-filter-subheadline,
#gr21SeoFilterPage p,
#gr21SeoFilterPage li,
#gr21SeoFilterPage strong,
#gr21SeoFilterPage a,
#gr21SeoFilterPage span{
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto;
}

#gr21SeoFilterPage .gr21-filter-hero h1{
  font-size:clamp(1.75rem, 4vw, 2.75rem) !important;
  line-height:1.12 !important;
}

#gr21SeoFilterPage .gr21-filter-content-block h2,
#gr21SeoFilterPage .gr21-filter-links-head h2{
  font-size:clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height:1.22 !important;
}

/* Vorteilskarten: Textteil darf schrumpfen und umbrechen. */
#gr21SeoFilterPage .gr21-filter-benefit-card{
  align-items:flex-start !important;
}

#gr21SeoFilterPage .gr21-filter-benefit-card > div{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
}

#gr21SeoFilterPage .gr21-filter-benefit-icon{
  flex:0 0 44px !important;
  width:44px !important;
  max-width:44px !important;
}

/* Interne Links ohne feste Mindestbreiten. */
#gr21SeoFilterPage .gr21-filter-link-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

#gr21SeoFilterPage .gr21-filter-link-card{
  overflow:visible !important;
}

/* Tabellen nur innerhalb ihres Containers horizontal scrollen. */
#gr21SeoFilterPage table{
  display:block;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

#gr21SeoFilterPage iframe,
#gr21SeoFilterPage video{
  width:100% !important;
  height:auto;
}

/* ----------------------------------------------------------
   4. Produktlisting: flüssigere Darstellung
   ---------------------------------------------------------- */

#productsListing .gs-columnar-display,
#productsListing .gs-grid,
#productsListing .gs-row{
  min-width:0 !important;
  max-width:100% !important;
}

#productsListing .gr21-card{
  contain:layout paint style;
}

#productsListing .gr21-frame{
  contain:layout paint;
}

/* Rating-Badge ohne Blur. */
#productsListing .gr21-rating-badge{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ----------------------------------------------------------
   5. Tablet / Smartphone
   ---------------------------------------------------------- */

@media (max-width:991.98px){
  body{
    background:linear-gradient(155deg, #052e26 0%, #020617 58%, #071a33 100%)
      !important;
  }

  #gr21SeoFilterPage{
    padding-inline:8px !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefits,
  #gr21SeoFilterPage .gr21-filter-link-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  /* Mobile Geräte profitieren besonders von reduzierten Schatten. */
  .gr-header .bar,
  #productsListing.gr21-wrap,
  #gr21SeoFilterPage .gr21-filter-hero,
  #gr21SeoFilterPage .gr21-filter-content-block,
  #gr21SeoFilterPage .gr21-filter-benefit-card,
  #gr21SeoFilterPage .gr21-filter-link-card{
    box-shadow:0 4px 12px rgba(2,6,23,.30) !important;
  }
}

@media (max-width:767.98px){
  #mainWrapper{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #mainWrapper > main > .row{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #mainWrapper > main > .row > [class*="col-"],
  #mainWrapper > main > .row > .col{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #gr21SeoFilterPage{
    padding:0 4px 18px !important;
  }

  #gr21SeoFilterPage .gr21-filter-hero,
  #gr21SeoFilterPage .gr21-filter-content-block,
  #gr21SeoFilterPage .gr21-filter-links-head{
    padding:15px !important;
    border-radius:14px !important;
  }

  #gr21SeoFilterPage .gr21-filter-hero h1{
    font-size:clamp(1.55rem, 7vw, 2.05rem) !important;
    letter-spacing:-.015em !important;
  }

  #gr21SeoFilterPage .gr21-filter-content-block h2,
  #gr21SeoFilterPage .gr21-filter-links-head h2{
    font-size:clamp(1.25rem, 5.7vw, 1.65rem) !important;
  }

  #gr21SeoFilterPage .gr21-filter-subheadline{
    font-size:1rem !important;
  }

  #gr21SeoFilterPage .gr21-filter-intro,
  #gr21SeoFilterPage .gr21-filter-intro p,
  #gr21SeoFilterPage .gr21-filter-content-block p,
  #gr21SeoFilterPage .gr21-filter-content-block li{
    font-size:.96rem !important;
    line-height:1.58 !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefits,
  #gr21SeoFilterPage .gr21-filter-link-grid{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:10px !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefit-card{
    display:grid !important;
    grid-template-columns:42px minmax(0, 1fr) !important;
    gap:11px !important;
    padding:14px !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefit-icon{
    flex-basis:42px !important;
    width:42px !important;
    max-width:42px !important;
    height:42px !important;
  }

  #gr21SeoFilterPage .gr21-filter-back a{
    width:auto !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  #gr21SeoFilterPage .gr21-filter-toolbar{
    overflow:visible !important;
  }
}

/* Sehr schmale Displays */
@media (max-width:420px){
  #gr21SeoFilterPage .gr21-filter-hero h1{
    font-size:1.5rem !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefit-card{
    grid-template-columns:38px minmax(0, 1fr) !important;
    padding:12px !important;
  }

  #gr21SeoFilterPage .gr21-filter-benefit-icon{
    width:38px !important;
    max-width:38px !important;
    height:38px !important;
  }
}

/* Respektiert zusätzlich die Systemeinstellung. */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}