/* ==========================================================================
   BMS Tailwind CSS
   Self-contained utility CSS for BMS Plugin
   Inspired by Tailwind CSS design system — pure CSS, no build tool
   All utility styles scoped under .bms to avoid conflicts with host theme
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

.bms {
  /* Colors */
  --bms-color-primary:        #0d6efd;
  --bms-color-primary-hover:  #0b5ed7;
  --bms-color-secondary:      #6c757d;
  --bms-color-secondary-hover:#5c636a;
  --bms-color-outline-border: #ced4da;
  --bms-color-outline-hover:  #0d6efd;
  --bms-color-muted:          #6b7280;
  --bms-color-white:          #ffffff;
  --bms-color-bg:             #f9fafb;
  --bms-color-border:         #dee2e6;
  --bms-color-text:           #212529;
  --bms-color-text-light:     #6c757d;
  --bms-color-link:           #0d6efd;
  --bms-color-highlight:      hotpink;
  --bms-color-shadow:         rgba(0,0,0,0.15);

  /* Badge / Ribbon colors */
  --bms-ribbon-stock:       #198754;  /* green  – lagernd   */
  --bms-ribbon-price:       #dc3545;  /* red    – sonderp.  */
  --bms-ribbon-topartikel:  #0d6efd;  /* blue   – topartikel*/
  --bms-ribbon-bestseller:  #fd7e14;  /* orange – bestseller*/

  /* Spacing scale (4px base — Tailwind) */
  --bms-space-0:  0;
  --bms-space-1:  0.25rem;   /*  4px */
  --bms-space-2:  0.5rem;    /*  8px */
  --bms-space-3:  0.75rem;   /* 12px */
  --bms-space-4:  1rem;      /* 16px */
  --bms-space-5:  1.25rem;   /* 20px */
  --bms-space-6:  1.5rem;    /* 24px */
  --bms-space-8:  2rem;      /* 32px */
  --bms-space-10: 2.5rem;    /* 40px */

  /* Typography */
  --bms-font-size-sm:   0.875rem;
  --bms-font-size-base: 1rem;
  --bms-font-size-lg:   1.125rem;
  --bms-line-height:    1.5;

  /* Border radius */
  --bms-radius-sm:   0.2rem;
  --bms-radius:      0.375rem;
  --bms-radius-lg:   0.5rem;
  --bms-radius-full: 9999px;

  /* Shadows */
  --bms-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --bms-shadow:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --bms-shadow-md: 4px 4px 20px rgba(0,0,0,0.2);

  /* Transitions */
  --bms-transition: 0.15s ease-in-out;

  /* Breakpoints (reference only, used in @media queries below)
     sm:  576px   md:  768px   lg:  992px   xl: 1200px */
}


/* ==========================================================================
   2. BASE RESET for .bms scope
   ========================================================================== */

.bms *,
.bms *::before,
.bms *::after {
  box-sizing: border-box;
}

.bms {
  font-family: inherit;
  font-size: var(--bms-font-size-base);
  line-height: var(--bms-line-height);
  color: var(--bms-color-text);
}

.bms a {
  color: var(--bms-color-link);
  text-decoration: none;
}

.bms a:hover {
  color: var(--bms-color-primary-hover);
}

.bms input,
.bms button,
.bms select,
.bms textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.bms input[type="text"],
.bms input[type="number"],
.bms input[type="search"] {
  font-size: 16px; /* prevent iOS zoom */
}

/* Number input — hide spinners */
.bms input::-webkit-outer-spin-button,
.bms input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bms input[type="number"] {
  -moz-appearance: textfield;
}


/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */

/* --- 3.1 Grid ------------------------------------------------------------ */
/*
 * Gap-based flex grid — no negative margins, no padding hacks.
 * gap: 1rem between columns and rows (Tailwind standard).
 * Column widths use calc() to subtract gap contribution.
 */

.bms .bms_row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Base columns — widths via calc() so gap is included in layout math */
.bms .bms_col      { flex: 1 1 0%; min-width: 0; }
.bms .bms_col-auto { flex: 0 0 auto; width: auto; }
.bms .bms_col-1    { flex: 0 0 auto; width: calc(8.3333%  - 1rem + 1rem/12); }
.bms .bms_col-2    { flex: 0 0 auto; width: calc(16.6667% - 1rem + 1rem/6); }
.bms .bms_col-3    { flex: 0 0 auto; width: calc(25%      - 0.75rem); }
.bms .bms_col-4    { flex: 0 0 auto; width: calc(33.3333% - 0.6667rem); }
.bms .bms_col-5    { flex: 0 0 auto; width: calc(41.6667% - 0.5833rem); }
.bms .bms_col-6    { flex: 0 0 auto; width: calc(50%      - 0.5rem); }
.bms .bms_col-7    { flex: 0 0 auto; width: calc(58.3333% - 0.4167rem); }
.bms .bms_col-8    { flex: 0 0 auto; width: calc(66.6667% - 0.3333rem); }
.bms .bms_col-9    { flex: 0 0 auto; width: calc(75%      - 0.25rem); }
.bms .bms_col-10   { flex: 0 0 auto; width: calc(83.3333% - 0.1667rem); }
.bms .bms_col-11   { flex: 0 0 auto; width: calc(91.6667% - 0.0833rem); }
.bms .bms_col-12   { flex: 0 0 auto; width: 100%; }

/* No gap override for zero-padding special rows */
.bms .bms_row.bms_m-0 { gap: 0; }

/* sm ≥ 576px */
@media (min-width: 576px) {
  .bms .bms_col-sm-auto { flex: 0 0 auto; width: auto; }
  .bms .bms_col-sm-1    { flex: 0 0 auto; width: calc(8.3333%  - 0.9167rem); }
  .bms .bms_col-sm-2    { flex: 0 0 auto; width: calc(16.6667% - 0.8333rem); }
  .bms .bms_col-sm-3    { flex: 0 0 auto; width: calc(25%      - 0.75rem); }
  .bms .bms_col-sm-4    { flex: 0 0 auto; width: calc(33.3333% - 0.6667rem); }
  .bms .bms_col-sm-6    { flex: 0 0 auto; width: calc(50%      - 0.5rem); }
  .bms .bms_col-sm-12   { flex: 0 0 auto; width: 100%; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .bms .bms_col-md-auto { flex: 0 0 auto; width: auto; }
  .bms .bms_col-md-1    { flex: 0 0 auto; width: calc(8.3333%  - 0.9167rem); }
  .bms .bms_col-md-2    { flex: 0 0 auto; width: calc(16.6667% - 0.8333rem); }
  .bms .bms_col-md-3    { flex: 0 0 auto; width: calc(25%      - 0.75rem); }
  .bms .bms_col-md-4    { flex: 0 0 auto; width: calc(33.3333% - 0.6667rem); }
  .bms .bms_col-md-6    { flex: 0 0 auto; width: calc(50%      - 0.5rem); }
  .bms .bms_col-md-12   { flex: 0 0 auto; width: 100%; }
  .bms .bms_col-md      { flex: 1 1 0%; min-width: 0; }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .bms .bms_col-lg-auto { flex: 0 0 auto; width: auto; }
  .bms .bms_col-lg-2    { flex: 0 0 auto; width: calc(16.6667% - 0.8333rem); }
  .bms .bms_col-lg-3    { flex: 0 0 auto; width: calc(25%      - 0.75rem); }
  .bms .bms_col-lg-4    { flex: 0 0 auto; width: calc(33.3333% - 0.6667rem); }
  .bms .bms_col-lg-6    { flex: 0 0 auto; width: calc(50%      - 0.5rem); }
  .bms .bms_col-lg-12   { flex: 0 0 auto; width: 100%; }
  .bms .bms_col-lg      { flex: 1 1 0%; min-width: 0; }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .bms .bms_col-xl-auto { flex: 0 0 auto; width: auto; }
  .bms .bms_col-xl-3    { flex: 0 0 auto; width: calc(25%      - 0.75rem); }
  .bms .bms_col-xl-4    { flex: 0 0 auto; width: calc(33.3333% - 0.6667rem); }
  .bms .bms_col-xl-6    { flex: 0 0 auto; width: calc(50%      - 0.5rem); }
  .bms .bms_col-xl-12   { flex: 0 0 auto; width: 100%; }
}


/* --- 3.2 Display --------------------------------------------------------- */

.bms .bms_flex         { display: flex; }
.bms .bms_inline-flex  { display: inline-flex; }
.bms .bms_block        { display: block; }
.bms .bms_inline       { display: inline; }
.bms .bms_inline-block { display: inline-block; }
.bms .bms_hidden       { display: none !important; }

/* Responsive display — md ≥ 768px */
@media (min-width: 768px) {
  .bms .bms_md-flex    { display: flex !important; }
  .bms .bms_md-inline  { display: inline-block !important; }
  .bms .bms_md-block   { display: block !important; }
  .bms .bms_md-hidden  { display: none !important; }
}

/* Responsive display — lg ≥ 992px: SHOW at desktop */
@media (min-width: 992px) {
  .bms .bms_lg-flex    { display: flex !important; }
  .bms .bms_lg-inline  { display: inline-flex !important; }  /* inline-flex for icon+text buttons */
  .bms .bms_lg-block   { display: block !important; }
  .bms .bms_lg-hidden  { display: none !important; }         /* hide on desktop */
}

/* bms_lg-none: visible on mobile, HIDDEN on desktop ≥ 992px */
@media (min-width: 992px) {
  .bms .bms_lg-none    { display: none !important; }
}

/* Hide below md (< 768px) */
@media (max-width: 767.98px) {
  .bms .bms_md-none    { display: none !important; }
}


/* --- 3.3 Flexbox --------------------------------------------------------- */

.bms .bms_flex-col         { flex-direction: column; }
.bms .bms_flex-row         { flex-direction: row; }
.bms .bms_flex-wrap        { flex-wrap: wrap; }
.bms .bms_flex-nowrap      { flex-wrap: nowrap; }
.bms .bms_flex-1           { flex: 1 1 0%; }
.bms .bms_flex-auto        { flex: 1 1 auto; }
.bms .bms_flex-none        { flex: none; }
.bms .bms_flex-grow        { flex-grow: 1; }
.bms .bms_flex-shrink-0    { flex-shrink: 0; }

/* Align items */
.bms .bms_align-start      { align-items: flex-start; }
.bms .bms_align-center     { align-items: center; }
.bms .bms_align-end        { align-items: flex-end; }
.bms .bms_align-stretch    { align-items: stretch; }

/* Align self */
.bms .bms_align-self-start   { align-self: flex-start; }
.bms .bms_align-self-center  { align-self: center; }
.bms .bms_align-self-end     { align-self: flex-end; }
.bms .bms_align-self-stretch { align-self: stretch; }

/* Justify content */
.bms .bms_justify-start    { justify-content: flex-start; }
.bms .bms_justify-center   { justify-content: center; }
.bms .bms_justify-end      { justify-content: flex-end; }
.bms .bms_justify-between  { justify-content: space-between; }
.bms .bms_justify-around   { justify-content: space-around; }


/* --- 3.4 Sizing ---------------------------------------------------------- */

.bms .bms_w-full    { width: 100%; }
.bms .bms_w-auto    { width: auto; }
.bms .bms_h-full    { height: 100%; }
.bms .bms_h-auto    { height: auto; }
.bms .bms_min-w-0   { min-width: 0; }


/* --- 3.5 Spacing --------------------------------------------------------- */

/* Padding all */
.bms .bms_p-0  { padding: var(--bms-space-0); }
.bms .bms_p-1  { padding: var(--bms-space-1); }
.bms .bms_p-2  { padding: var(--bms-space-2); }
.bms .bms_p-3  { padding: var(--bms-space-3); }
.bms .bms_p-4  { padding: var(--bms-space-4); }
.bms .bms_p-5  { padding: var(--bms-space-5); }

/* Padding x-axis */
.bms .bms_px-0 { padding-left: var(--bms-space-0); padding-right: var(--bms-space-0); }
.bms .bms_px-1 { padding-left: var(--bms-space-1); padding-right: var(--bms-space-1); }
.bms .bms_px-2 { padding-left: var(--bms-space-2); padding-right: var(--bms-space-2); }
.bms .bms_px-3 { padding-left: var(--bms-space-3); padding-right: var(--bms-space-3); }
.bms .bms_px-4 { padding-left: var(--bms-space-4); padding-right: var(--bms-space-4); }
.bms .bms_px-5 { padding-left: var(--bms-space-5); padding-right: var(--bms-space-5); }

/* Padding y-axis */
.bms .bms_py-0 { padding-top: var(--bms-space-0); padding-bottom: var(--bms-space-0); }
.bms .bms_py-1 { padding-top: var(--bms-space-1); padding-bottom: var(--bms-space-1); }
.bms .bms_py-2 { padding-top: var(--bms-space-2); padding-bottom: var(--bms-space-2); }
.bms .bms_py-3 { padding-top: var(--bms-space-3); padding-bottom: var(--bms-space-3); }
.bms .bms_py-4 { padding-top: var(--bms-space-4); padding-bottom: var(--bms-space-4); }

/* Padding individual */
.bms .bms_pt-0 { padding-top: var(--bms-space-0); }
.bms .bms_pt-1 { padding-top: var(--bms-space-1); }
.bms .bms_pt-2 { padding-top: var(--bms-space-2); }
.bms .bms_pt-3 { padding-top: var(--bms-space-3); }
.bms .bms_pb-0 { padding-bottom: var(--bms-space-0); }
.bms .bms_pb-1 { padding-bottom: var(--bms-space-1); }
.bms .bms_pb-2 { padding-bottom: var(--bms-space-2); }
.bms .bms_pb-3 { padding-bottom: var(--bms-space-3); }
.bms .bms_pl-0 { padding-left: var(--bms-space-0); }
.bms .bms_pl-2 { padding-left: var(--bms-space-2); }
.bms .bms_pr-0 { padding-right: var(--bms-space-0); }
.bms .bms_pr-2 { padding-right: var(--bms-space-2); }

/* Responsive padding — md ≥ 768px */
@media (min-width: 768px) {
  .bms .bms_p-md-5   { padding: var(--bms-space-5) !important; }
  .bms .bms_px-md-2  { padding-left: var(--bms-space-2) !important; padding-right: var(--bms-space-2) !important; }
  .bms .bms_py-md-3  { padding-top: var(--bms-space-3) !important; padding-bottom: var(--bms-space-3) !important; }
  .bms .bms_pl-md-2  { padding-left: var(--bms-space-2) !important; }
  .bms .bms_pr-md-2  { padding-right: var(--bms-space-2) !important; }
}

/* Margin all */
.bms .bms_m-0  { margin: var(--bms-space-0); }
.bms .bms_m-1  { margin: var(--bms-space-1); }
.bms .bms_m-2  { margin: var(--bms-space-2); }

/* Margin x-axis */
.bms .bms_mx-0    { margin-left: var(--bms-space-0); margin-right: var(--bms-space-0); }
.bms .bms_mx-1    { margin-left: var(--bms-space-1); margin-right: var(--bms-space-1); }
.bms .bms_mx-2    { margin-left: var(--bms-space-2); margin-right: var(--bms-space-2); }
.bms .bms_mx-auto { margin-left: auto; margin-right: auto; }

/* Margin y-axis */
.bms .bms_my-0 { margin-top: var(--bms-space-0); margin-bottom: var(--bms-space-0); }
.bms .bms_my-1 { margin-top: var(--bms-space-1); margin-bottom: var(--bms-space-1); }
.bms .bms_my-2 { margin-top: var(--bms-space-2); margin-bottom: var(--bms-space-2); }

/* Margin individual */
.bms .bms_mt-0    { margin-top: var(--bms-space-0); }
.bms .bms_mt-1    { margin-top: var(--bms-space-1); }
.bms .bms_mt-2    { margin-top: var(--bms-space-2); }
.bms .bms_mt-auto { margin-top: auto; }
.bms .bms_mb-0    { margin-bottom: var(--bms-space-0); }
.bms .bms_mb-1    { margin-bottom: var(--bms-space-1); }
.bms .bms_mb-2    { margin-bottom: var(--bms-space-2); }
.bms .bms_mr-0    { margin-right: var(--bms-space-0); }
.bms .bms_mr-1    { margin-right: var(--bms-space-1); }
.bms .bms_mr-2    { margin-right: var(--bms-space-2); }
.bms .bms_ml-0    { margin-left: var(--bms-space-0); }
.bms .bms_ml-auto { margin-left: auto; }

/* Responsive margin — md ≥ 768px */
@media (min-width: 768px) {
  .bms .bms_pr-md-2 { padding-right: var(--bms-space-2) !important; }
  .bms .bms_pl-md-2 { padding-left: var(--bms-space-2) !important; }
}

/* Position */
.bms .bms_relative { position: relative; }
.bms .bms_absolute { position: absolute; }
.bms .bms_fixed    { position: fixed; }


/* ==========================================================================
   4. TYPOGRAPHY UTILITIES
   ========================================================================== */

.bms .bms_text-left   { text-align: left; }
.bms .bms_text-center { text-align: center; }
.bms .bms_text-right  { text-align: right; }

.bms .bms_text-sm   { font-size: var(--bms-font-size-sm); }
.bms .bms_text-base { font-size: var(--bms-font-size-base); }
.bms .bms_text-lg   { font-size: var(--bms-font-size-lg); }

.bms .bms_fw-normal { font-weight: 400; }
.bms .bms_fw-bold   { font-weight: 700; }

.bms .bms_leading-tight  { line-height: 1.25; }
.bms .bms_leading-normal { line-height: 1.5; }

.bms .bms_truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bms .bms_line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   5. COLOR UTILITIES
   ========================================================================== */

.bms .bms_text-primary { color: var(--bms-color-primary); }
.bms .bms_text-muted   { color: var(--bms-color-muted); }
.bms .bms_text-white   { color: var(--bms-color-white); }
.bms .bms_text-dark    { color: var(--bms-color-text); }

.bms .bms_bg-white     { background-color: var(--bms-color-white); }
.bms .bms_bg-light     { background-color: var(--bms-color-bg); }


/* ==========================================================================
   6. COMPONENT CLASSES
   ========================================================================== */

/* --- 6.1 Buttons --------------------------------------------------------- */
/*
 * Tailwind-standard button height: 2.5rem (h-10).
 * Base:  py-2.5 px-5  →  0.625rem 1.25rem
 * Small: py-2   px-4  →  0.5rem   1rem
 * Uses gap instead of margin for icon spacing.
 */

.bms .bms_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--bms-radius);
  transition: background-color var(--bms-transition),
              border-color var(--bms-transition),
              color var(--bms-transition),
              box-shadow var(--bms-transition);
}

.bms .bms_btn:focus-visible {
  outline: 2px solid var(--bms-color-primary);
  outline-offset: 2px;
}

/* Primary */
.bms .bms_btn--primary {
  color: var(--bms-color-white);
  background-color: var(--bms-color-primary);
  border-color: var(--bms-color-primary);
}
.bms .bms_btn--primary:hover {
  color: var(--bms-color-white);
  background-color: var(--bms-color-primary-hover);
  border-color: var(--bms-color-primary-hover);
}

/* Secondary */
.bms .bms_btn--secondary {
  color: var(--bms-color-white);
  background-color: var(--bms-color-secondary);
  border-color: var(--bms-color-secondary);
}
.bms .bms_btn--secondary:hover {
  color: var(--bms-color-white);
  background-color: var(--bms-color-secondary-hover);
  border-color: var(--bms-color-secondary-hover);
}

/* Outline */
.bms .bms_btn--outline {
  color: var(--bms-color-secondary);
  background-color: transparent;
  border-color: var(--bms-color-outline-border);
}
.bms .bms_btn--outline:hover {
  color: var(--bms-color-white);
  background-color: var(--bms-color-secondary);
  border-color: var(--bms-color-secondary);
}

/* Outline primary */
.bms .bms_btn--outline-primary {
  color: var(--bms-color-primary);
  background-color: transparent;
  border-color: var(--bms-color-primary);
}
.bms .bms_btn--outline-primary:hover {
  color: var(--bms-color-white);
  background-color: var(--bms-color-primary);
  border-color: var(--bms-color-primary);
}

/* Small — Tailwind py-2 px-4 */
.bms .bms_btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--bms-radius);
}

/* Active state (view selector) */
.bms a.bms_view.active,
.bms .bms_btn.active {
  border-color: var(--bms-color-text) !important;
}
.bms a.bms_view.active svg {
  color: var(--bms-color-text);
}


/* --- 6.2 Inputs ---------------------------------------------------------- */
/*
 * Tailwind-standard: h-10 (2.5rem) via py-2.5 + line-height 1.25.
 * Matches button height for inline alignment.
 */

.bms .bms_input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bms-color-text);
  background-color: var(--bms-color-white);
  background-clip: padding-box;
  border: 1px solid var(--bms-color-outline-border);
  border-radius: var(--bms-radius);
  transition: border-color var(--bms-transition), box-shadow var(--bms-transition);
  -webkit-appearance: none;
  appearance: none;
}

.bms .bms_input:focus {
  outline: none;
  border-color: var(--bms-color-primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.bms .bms_input::placeholder {
  color: var(--bms-color-text-light);
  opacity: 1;
}

/* Small input */
.bms .bms_input--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--bms-radius);
}


/* --- 6.3 Tags (Badge) ---------------------------------------------------- */
/*
 * Tailwind-style badge: rounded-full, font-medium, ring-inset for border effect.
 */

.bms .bms_tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bms-color-text);
  background-color: #f1f3f5;
  border-radius: var(--bms-radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

.bms .bms_tag--primary {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.bms .bms_tag--success {
  background-color: #dcfce7;
  color: #166534;
}
.bms .bms_tag--warning {
  background-color: #fef9c3;
  color: #854d0e;
}
.bms .bms_tag--danger {
  background-color: #fee2e2;
  color: #991b1b;
}


/* --- 6.4 Table ----------------------------------------------------------- */

.bms .bms_table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  font-size: var(--bms-font-size-sm);
}

.bms .bms_table > :not(caption) > * > * {
  padding: 0.5rem;
  background-color: transparent;
  border-bottom: 1px solid var(--bms-color-border);
}

.bms .bms_table > thead {
  vertical-align: bottom;
}

.bms .bms_table--sm > :not(caption) > * > * {
  padding: 0.25rem 0.5rem;
}

.bms .bms_table--hover > tbody > tr:hover > * {
  background-color: rgba(0,0,0,0.04);
  cursor: pointer;
}

.bms .bms_table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* --- 6.5 Panel ----------------------------------------------------------- */

.bms .bms_panel {
  background-color: var(--bms-color-white);
  border: 1px solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  margin-bottom: 1rem;
  overflow: hidden;
}

.bms .bms_panel-heading {
  padding: 0;
  font-size: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid var(--bms-color-border);
}

.bms .bms_panel-body {
  padding: 0.75rem;
}


/* --- 6.6 Ribbon (Badge overlays on article images) ----------------------- */

.bms .bms_badge_container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bms .bms_ribbon {
  position: absolute;
  left: -1px;
  top: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bms-color-white);
  line-height: 1.4;
  border-radius: 0 var(--bms-radius-sm) var(--bms-radius-sm) 0;
  z-index: 2;
  white-space: nowrap;
  box-shadow: var(--bms-shadow-sm);
}

/* Stacking: each ribbon below the previous */
.bms .bms_ribbon.order-1 { top: 0.5rem; }
.bms .bms_ribbon.order-2 { top: 2.0rem; }
.bms .bms_ribbon.order-3 { top: 3.5rem; }
.bms .bms_ribbon.order-4 { top: 5.0rem; }

/* Colors by type */
.bms .bms_ribbon--1 { background-color: var(--bms-ribbon-bestseller); }  /* Bestseller */
.bms .bms_ribbon--2 { background-color: var(--bms-ribbon-price); }       /* Sonderpreis */
.bms .bms_ribbon--4 { background-color: var(--bms-ribbon-topartikel); }  /* Topartikel */
.bms .bms_ribbon--8 { background-color: var(--bms-ribbon-stock); }       /* Lagernd */


/* --- 6.7 Spinner --------------------------------------------------------- */

.bms .bms_spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid rgba(0,0,0,0.1);
  border-top-color: var(--bms-color-primary);
  border-radius: 50%;
  animation: bms-spin 0.75s linear infinite;
}

@keyframes bms-spin {
  to { transform: rotate(360deg); }
}


/* --- 6.8 Screen-reader only --------------------------------------------- */

.bms .bms_sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   7. PLUGIN-SPECIFIC STYLES
   ========================================================================== */

/* --- 7.1 Root & Visibility ----------------------------------------------- */

#bms {
  display: none;
  min-height: 100%;
}

html.bms_started #bms {
  display: block;
}

/* JS-controlled visibility — never remove this rule */
.bms_hide {
  display: none !important;
}

/* Popup mode */
html.bms_started.bms_targetPopup {
  overflow: hidden;
}

html.bms_started.bms_targetPopup #bms {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1050;
  overflow-y: scroll;
  background: #000;
}

html.bms_started.bms_targetPopup .bms_loadMore {
  display: none;
}

/* Content mode */
html.bms_started.bms_targetContent .bms_hideContent { display: none !important; }
html.bms_started.bms_targetContent .bms_hidePopup   { display: none !important; }
html.bms_started.bms_targetContent .opc-Container   { display: none; }

.bms_targetContent .fixed-search { display: none; }


/* --- 7.2 Layout ---------------------------------------------------------- */

#bms_search {
  min-height: 100%;
}

#bms:not(.nova) .bms_container {
  overflow: hidden;
}

#bms .bms_container {
  background: var(--bms-color-white);
}

/* Two-column layout: filter sidebar + content */
.bms_content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}

/* -----------------------------------------------------------------------
   FILTER SIDEBAR
   Mobile  (< 992px): overlay — slides in from left over content
   Desktop (≥ 992px): pushes content — takes flex width, content shrinks
   ----------------------------------------------------------------------- */


/* Base sidebar styles */
#bms_filter {
  flex-shrink: 0;
  width: 280px;
  background: var(--bms-color-white);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- MOBILE: overlay behaviour ---------------------------------------- */
@media (max-width: 991px) {
  #bms_filter {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
  }

  /* open state */
  #bms_search.bms_filter #bms_filter {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }

}

/* ---- DESKTOP: push-content behaviour ---------------------------------- */
@media (min-width: 992px) {
  #bms_filter {
    position: relative;
    height: auto;
    min-height: 100%;
    /* hidden by default — zero width, not display:none so transitions work */
    width: 0;
    border-right-width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
  }

  /* filter open: give it its full width, pushing content aside */
  #bms_search.bms_filter #bms_filter,
  #bms_search.bms_filter_always #bms_filter {
    width: 280px;
    border-right-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Content container — always flex-grow, no max-width hack needed */
.bms_contentContainer {
  flex: 1 1 0%;
  min-width: 0;       /* allow shrinking below content size */
  min-height: 600px;
}

/* Filter close button */
.bms_closeFilter { cursor: pointer; }

/* Filter toggle icon states */
.bms_changeFilter .toggle-on { display: none; }
#bms_search.bms_filter .bms_changeFilter .toggle-on  { display: inline-block; }
#bms_search.bms_filter .bms_changeFilter .toggle-off { display: none; }


/* --- 7.3 Header & Search Input ------------------------------------------ */

#bms_header {
  background-color: rgba(255,255,255,0.31);
  position: relative;
}

#bms_close_top {
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px 12px;
  display: flex;
}

.bms_close {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

#bms_close:hover { color: red; }

#bms_inputContainer {
  position: relative;
}

#bms_inputSuggest {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  color: #ccc;
  border: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.bms .bms_input {
  z-index: 1;
  position: relative;
}


/* --- 7.4 Suggest Dropdown ----------------------------------------------- */

#bms_suggestContainer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bms-color-white);
  border: 1px solid #b9d0de;
  border-radius: var(--bms-radius-lg);
  z-index: 9999;
  cursor: pointer;
}

#bms_suggestContainer .active {
  border-left: 3px solid green;
  background: #efefef;
}

.bms_suggestItem:hover {
  background: #ccc !important;
}

/* Nova suggest */
.bms_nova #bms_inputSuggest      { background-color: transparent; }
.bms_nova #bms_suggestContainer  { color: #000; }


/* --- 7.5 Filter Bar & Active Filters ------------------------------------ */

/* Main filter bar */
.bms .bms_filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 3rem;
}

/* Left side: toggle + chips */
.bms .bms_filterbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

/* Right side: view selector icons */
.bms .bms_filterbar-views {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Filter toggle button — pill chip style matching bms_af */
.bms .bms_filterbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.625rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--bms-radius-full);
  color: var(--bms-color-text-light);
  background: #f0f0f0;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
  transition: background var(--bms-transition), color var(--bms-transition);
}

.bms .bms_filterbar-btn:hover {
  color: var(--bms-color-text);
  background: #e2e2e2;
}

/* Filter toggle active state */
.bms #bms_search.bms_filter .bms_filterbar-btn.bms_changeFilter,
.bms #bms_search.bms_filter_always .bms_filterbar-btn.bms_changeFilter {
  background: #e8f0ff;
  color: var(--bms-color-primary);
}

/* Filter label: hidden on mobile, shown on desktop */
.bms .bms_filterbar-label {
  display: none;
}
@media (min-width: 992px) {
  .bms .bms_filterbar-label {
    display: inline;
  }
}

/* Clear search chip — same pill style */
.bms .bms_filterbar-btn--clear {
  background: #f0f0f0;
  color: var(--bms-color-text-light);
  font-size: 0.875rem;
}

.bms .bms_filterbar-btn--clear:hover {
  background: #ffeaea;
  color: #dc3545;
}

/* Mobile backdrop — covers page behind filter, closes on click */
.bms_filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1049;
  background: rgba(0,0,0,0.35);
}

@media (max-width: 991.98px) {
  #bms_search.bms_filter .bms_filter-backdrop {
    display: block;
  }

  /* Remove row gap on mobile — filter is fixed, gap causes left offset */
  .bms .bms_content {
    gap: 0;
  }
}

/* Scroll lock: prevent page scroll when mobile filter is open.
   Target both html and body — browsers differ on which element controls scroll. */
@media (max-width: 991.98px) {
  html:has(#bms_search.bms_filter),
  body:has(#bms_search.bms_filter) {
    overflow: hidden;
    height: 100%;
  }
}

/* Active filter chips container — inline in filterbar-controls */
.bms #bms_active_filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

/* Alle aktiven Filter-Chips: einheitlich, kein bms_mr-2 nötig */
.bms_af {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--bms-radius-full);
  background: #f0f4ff;
  color: var(--bms-color-primary);
  white-space: nowrap;
  line-height: 1.4;
}

.bms_af:hover {
  background: var(--bms-color-primary);
  color: #fff;
}

/* Farbige Chips je Filtertyp */
.bms_af_stock       { background: #e8f7ee; color: #198754; }
.bms_af_topartikel  { background: #e8f0ff; color: #0d6efd; }
.bms_af_bestseller  { background: #fff3e6; color: #c85f00; }
.bms_af_sonderpreis { background: #ffeaea; color: #dc3545; }
.bms_af_minPrice,
.bms_af_maxPrice    { background: #f0f0f0; color: #495057; }

/* × remove indicator inside chip */
.bms_af .bms_chip-x {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.6;
}
.bms_af:hover .bms_chip-x {
  opacity: 1;
}

.bms_clearSearch {
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
}

.bms_clearSearch .bms_currentSearch {
  font-weight: 700;
  font-style: normal;
}


/* --- 7.6 Result Grid ---------------------------------------------------- */

/*
 * #bms_resultList is the container JS appends article cards into.
 * JS adds layout-gallery or layout-list class depending on view mode.
 * We use CSS Grid (gallery) or flex column (list) — no Bootstrap columns.
 */

/* Base: hidden until JS shows it */
.bms_result-grid {
  display: none;
}

/* Gallery view — CSS Grid, 1rem gap (Tailwind gap-4) */
.bms_result-grid.layout-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) {
  .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  #bms_search.bms_filter .bms_result-grid.layout-gallery,
  #bms_search.bms_filter_always .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(5, 1fr);
  }
  #bms_search.bms_filter .bms_result-grid.layout-gallery,
  #bms_search.bms_filter_always .bms_result-grid.layout-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* List view: single column, 1rem gap */
.bms_result-grid.layout-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Article item fills its grid cell */
.bms_result-grid.layout-gallery .bms_article_item {
  display: block;
  height: 100%;
  min-width: 0;
}

/* List item full width */
.bms_result-grid.layout-list .bms_article_item {
  display: block;
  width: 100%;
}


/* --- 7.6 Article Items -------------------------------------------------- */

/* Highlight search term — fett + Primärfarbe, kein kursiv */
.bms_article_item em {
  font-style: normal;
  font-weight: 700;
  color: var(--bms-color-primary);
}

/* Base article item (anchor) */
.bms_article_item {
  text-decoration: none;
  color: inherit;
  display: block;
}

.bms_article_item:hover {
  color: inherit;
  text-decoration: none;
}

/* Table view: rows are clickable */
.bms_viewTable .bms_article_item {
  cursor: pointer;
}

/* =========================================================================
   LIST ITEM — horizontal card layout
   Structure: .bms_listContainer > flex row > [image] [flex-col content]
                content > .bms_list-body + .bms_list-footer
   ========================================================================= */

.bms_listContainer {
  background: var(--bms-color-white);
  border: 1px solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  overflow: hidden;
  transition: border-color var(--bms-transition), box-shadow var(--bms-transition);
}

.bms_article_item:hover .bms_listContainer {
  border-color: var(--bms-color-primary);
  box-shadow: 0 2px 8px rgba(13,110,253,0.08);
}

/* Square image — same background as gallery card */
.bms_listContainer .bms_image {
  width: 120px;
  min-width: 120px;
  height: 120px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 0;
  display: block;
  flex-shrink: 0;
}

/* Body: padding 1rem, grows to fill */
.bms_list-body {
  padding: 0.75rem 1rem 0.5rem;
  flex: 1;
  min-width: 0;
}

/* Title row: manufacturer + title, bold */
.bms_list-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bms-color-text);
  line-height: 1.4;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tags row: gap-based, no margin hacks */
.bms_list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

/* Description in list */
.bms_list-body .bms_desc_container {
  font-size: 0.8125rem;
  color: var(--bms-color-text-light);
  margin-top: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.bms_list-desc-label {
  font-weight: 500;
  margin-right: 0.25rem;
}

/* Footer: price left, actions right */
.bms_list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.75rem;
  flex-wrap: wrap;
}

.bms_list-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bms-color-text);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.bms_list-price .bms_price_pre {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bms-color-text-light);
}

/* Actions: cart + goto buttons side by side */
.bms_list-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Category links */
.bms_cat_container a {
  display: inline-block;
}
.bms_cat_container div > a + a::before {
  content: "»";
  padding: 0 5px;
  color: #606060;
}

/* Description */
.bms_desc_container {
  line-height: 1.1;
  font-size: 90%;
}

/* Price per unit */
.bms_ppu {
  font-weight: 100;
  font-size: 0.6rem;
  line-height: initial;
}

/* CMS / News: hide product-specific fields */
.bms_cms .bms_availability_container,
.bms_cms .bms_artnr_container,
.bms_cms .bms_han_container,
.bms_cms .bms_ean_container,
.bms_cms .bms_price_container,
.bms_cms .bms_cart_container,
.bms_news .bms_availability_container,
.bms_news .bms_artnr_container,
.bms_news .bms_han_container,
.bms_news .bms_ean_container,
.bms_news .bms_price_container,
.bms_news .bms_cart_container {
  visibility: hidden;
}

/* View mode switches: hide irrelevant containers */
.bms_viewGallery .bms_resultContainerTable,
.bms_viewList .bms_resultContainerTable,
.bms_viewGallery #bms_tableContainer,
.bms_viewList #bms_tableContainer {
  display: none !important;
}

.bms_viewTable #bms_resultList {
  display: none !important;
}

/* Nova: article height */
#bms.nova .bms_article_item { height: auto !important; }

/* Nova: title height in list view */
#bms.nova .bms_viewList .bms_title { height: 3em; }

/* Nova: ribbon stacking */
#bms.nova .bms_badge_container .bms_ribbon.order-1 { top: 1rem; }
#bms.nova .bms_badge_container .bms_ribbon.order-2 { top: 3rem; }
#bms.nova .bms_badge_container .bms_ribbon.order-3 { top: 5rem; }
#bms.nova .bms_badge_container .bms_ribbon.order-4 { top: 7rem; }


/* --- 7.7 Error / Results ------------------------------------------------ */

#bms_errorList {
  padding: 0.5rem;
}

.bms_noHits,
.bms_noExactHits,
.bms_noServerResponse {
  padding: 0.5rem 1rem;
  border-radius: var(--bms-radius);
}

/* Load More button — via JS: disabled class entfernt wenn remaining > 0 */
.bms_loadMore {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625rem 2rem;
}

.bms_loadMore.disabled {
  display: none;
}


/* --- 7.8 Category filter list ------------------------------------------- */

#bms .bms_panel .list-group-item {
  border-left: none;
  border-right: none;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bms-color-border);
  display: block;
  background-color: var(--bms-color-white);
  color: var(--bms-color-text);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}

#bms .bms_panel .list-group-item:hover {
  background-color: #f0f4ff;
  color: var(--bms-color-primary);
}

#bms .bms_panel .list-group-item.active {
  background-color: var(--bms-color-primary);
  color: var(--bms-color-white);
}

#bms .bms_panel .list-group-item.lvl_1 { margin-left: 5px;  border-left: 4px solid #d0d7e3; }
#bms .bms_panel .list-group-item.lvl_2 { margin-left: 10px; border-left: 4px solid #bcc5d6; }
#bms .bms_panel .list-group-item.lvl_3 { margin-left: 15px; border-left: 4px solid #a8b3c9; }
#bms .bms_panel .list-group-item.lvl_4 { margin-left: 20px; border-left: 4px solid #94a1bc; }

/* --- Filter Panel Header ------------------------------------------------- */

.bms_filter-hd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.bms_filter-hd-title {
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
  color: var(--bms-color-text);
}

.bms_filter-hd-hits {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--bms-color-text-light);
  white-space: nowrap;
}

.bms_filter-hd-close {
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bms-color-text-light);
  flex-shrink: 0;
  padding: 0.25rem;
  border-radius: var(--bms-radius);
  transition: color var(--bms-transition), background var(--bms-transition);
}

.bms_filter-hd-close:hover {
  color: var(--bms-color-text);
  background: #f0f0f0;
}

/* --- Filter Sections ----------------------------------------------------- */

.bms_filter-section {
  margin-bottom: 0.75rem;
}

.bms_filter-section:last-child {
  margin-bottom: 0;
}

.bms_filter-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Spezialfilter-Labels (Lager, Topartikel, Bestseller, Sonderpreis) --- */

.bms_filter-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--bms-radius);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  transition: background-color var(--bms-transition), color var(--bms-transition);
}

.bms_filter-label input[type=checkbox] {
  display: none;
}

.bms_filter-label-text {
  flex: 1;
}

/* Lagerfilter — grün */
.bms_filter-label--stock {
  color: #198754;
  background-color: #e8f7ee;
}
.bms_filter-label--stock:hover,
.bms_filter-label--stock:has(input:checked) {
  background-color: #198754;
  color: #fff;
}

/* Topartikel — blau */
.bms_filter-label--topartikel {
  color: #0d6efd;
  background-color: #e8f0ff;
}
.bms_filter-label--topartikel:hover,
.bms_filter-label--topartikel:has(input:checked) {
  background-color: #0d6efd;
  color: #fff;
}

/* Bestseller — orange */
.bms_filter-label--bestseller {
  color: #c85f00;
  background-color: #fff3e6;
}
.bms_filter-label--bestseller:hover,
.bms_filter-label--bestseller:has(input:checked) {
  background-color: #fd7e14;
  color: #fff;
}

/* Sonderpreis — rot */
.bms_filter-label--sonderpreis {
  color: #dc3545;
  background-color: #ffeaea;
}
.bms_filter-label--sonderpreis:hover,
.bms_filter-label--sonderpreis:has(input:checked) {
  background-color: #dc3545;
  color: #fff;
}

/* --- Sort dropdown: read-only (no typing allowed) ----------------------- */

/* TomSelect generates .ts-wrapper right after the hidden <select>.
   We target the text input inside the sort widget to prevent keyboard input. */
#bms_select_sort + .ts-wrapper .ts-control > input {
  pointer-events: none;
  caret-color: transparent;
  user-select: none;
}


/* --- 7.9 Banner + Cube Animation ---------------------------------------- */

#bms_banner {
  position: relative;
  width: 502px;
  height: 82px;
  perspective: 1200px;
  z-index: 2;
}

#bms_banner div img {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 500px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
}

#bms_banner div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  transform-style: preserve-3d;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.2);
}

#bms_banner div:hover {
  box-shadow: 0 0 5px #337ab7;
  border: 1px solid #337ab7;
}

#bms_banner div.logo {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 991.98px) {
  #bms_banner,
  #bms_banner div img { width: 339px; height: 55.5px; }
  #bms_banner div img { width: 337px; height: 54.5px; }
}

@media (min-width: 992px) and (max-width: 1231px) {
  #bms_banner { width: 339px; height: 55.5px; }
  #bms_banner div img { width: 337px; height: 54.5px; }
}

/* Cube rotation animations */
.rotateCubeTopOut {
  transform-origin: 50% 100%;
  animation: rotateCubeTopOut 0.6s both ease-in;
}
.rotateCubeTopIn {
  transform-origin: 50% 0%;
  animation: rotateCubeTopIn 0.6s both ease-in;
}
.rotateCubeBottomOut {
  transform-origin: 50% 0%;
  animation: rotateCubeBottomOut 0.6s both ease-in;
}
.rotateCubeBottomIn {
  transform-origin: 50% 100%;
  animation: rotateCubeBottomIn 0.6s both ease-in;
}
.top { z-index: 9999; }

@keyframes rotateCubeTopOut {
  50%  { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
  100% { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateCubeTopIn {
  0%   { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); }
  50%  { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}
@keyframes rotateCubeBottomOut {
  50%  { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
  100% { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeBottomIn {
  0%   { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); }
  50%  { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}


/* --- 7.10 Spinner overlay ----------------------------------------------- */

#bms_spinner {
  position: absolute;
  background: #000;
  padding-top: 100px;
  top: 0; right: 0; left: 0; bottom: 0;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  display: none;
  text-align: center;
}

#bms_spinner.bms_spinner_show {
  display: block;
  visibility: visible;
  opacity: 0.5;
  animation: bms_spinner_fade 1s;
}

@keyframes bms_spinner_fade {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 0.5; }
}


/* --- 7.10b bms.scss Override — neutralisiert Styles aus der alten SCSS-Datei
   bms.scss wird von JTL parallel geladen und hat eigene Filter/Shadow-Regeln.
   Diese Regeln überschreiben mit höherer Spezifität.                        */

/* Shadow aus bms.scss entfernen */
#bms:not(.nova) #bms_search.bms_filter #bms_filter,
#bms:not(.nova) #bms_search.bms_filter_always #bms_filter {
  box-shadow: none !important;
}

/* Desktop: Filter ist ein Flex-Element (push), kein absolutes Overlay */
@media (min-width: 992px) {
  #bms:not(.nova) #bms_search #bms_filter {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  #bms:not(.nova) #bms_search.bms_filter #bms_filter,
  #bms:not(.nova) #bms_search.bms_filter_always #bms_filter {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 280px !important;
    overflow-y: auto !important;
  }
  #bms:not(.nova) #bms_search:not(.bms_filter):not(.bms_filter_always) #bms_filter {
    width: 0 !important;
    overflow: hidden !important;
    border-right-width: 0 !important;
  }
}


/* --- 7.11 Theme-specific overrides -------------------------------------- */

/* Snackys theme */
html.bms_started .snackys .bms_tag {
  background: none;
  color: inherit;
}
html.bms_started .snackys .bms_btn--outline {
  background: none;
  border: 1px solid #ccc;
}
html.bms_started .snackys .bms_btn--outline:hover {
  color: inherit;
}
html.bms_started .container.snackys {
  padding: 0;
}

/* Avia theme SVG alignment */
html.bms_started.avia svg {
  vertical-align: middle;
}

/* Snackys: bms_started #search overflow fix */
.bms_snackys.bms_targetContent.bms_started #search {
  overflow: inherit;
}

/* Easytemplate360 suggest width */
.bms_targetContent.bms_easytemplate360 #bms_inputSuggest {
  width: 90%;
}

/* Popup: hide header search at narrow widths */
@media (max-width: 1231.98px) {
  html.bms_targetPopup .et-widget-headermain .et-header-main-search {
    display: none !important;
  }
}

/* Content mode: hide shop header bar */
@media only screen and (max-width: 767px) {
  html.bms_started #content-wrapper {
    padding: 0;
  }
}


/* ==========================================================================
   7.12 Container — Tailwind-style responsive max-widths
   Mirrors Tailwind CSS container utility: full-width base, capped per
   breakpoint. Uses our bms_container selector (bms_* prefix everywhere).
   ========================================================================== */

/* bms_container: mirrors Tailwind's container utility */
.bms .bms_container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: var(--bms-radius-lg);
  overflow: hidden;
}

@media (min-width: 640px)  { .bms .bms_container { max-width: 640px; } }
@media (min-width: 768px)  { .bms .bms_container { max-width: 768px; } }
@media (min-width: 1024px) { .bms .bms_container { max-width: 1024px; } }
@media (min-width: 1280px) { .bms .bms_container { max-width: 1280px; } }
@media (min-width: 1536px) { .bms .bms_container { max-width: 1536px; } }

/* bms_container-fluid: always full width, small gutters */
.bms .bms_container-fluid {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Legacy: .container / .container-fluid from $view_container_css Smarty var
   Map them to our scoped equivalents so no Bootstrap dependency needed */
.bms .container        { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.bms .container-fluid  { width: 100%; padding-left: 1rem; padding-right: 1rem; }

@media (min-width: 640px)  { .bms .container { max-width: 640px; } }
@media (min-width: 768px)  { .bms .container { max-width: 768px; } }
@media (min-width: 1024px) { .bms .container { max-width: 1024px; } }
@media (min-width: 1280px) { .bms .container { max-width: 1280px; } }
@media (min-width: 1536px) { .bms .container { max-width: 1536px; } }


/* ==========================================================================
   7.13 Flex order & additional utilities
   ========================================================================== */

.bms .bms_order-1  { order: 1; }
.bms .bms_order-2  { order: 2; }
.bms .bms_order-3  { order: 3; }

.bms .bms_gap-1    { gap: var(--bms-space-1); }
.bms .bms_gap-2    { gap: var(--bms-space-2); }
.bms .bms_gap-3    { gap: var(--bms-space-3); }
.bms .bms_gap-4    { gap: var(--bms-space-4); }
.bms .bms_gap-x-2  { column-gap: var(--bms-space-2); }
.bms .bms_gap-x-4  { column-gap: var(--bms-space-4); }
.bms .bms_gap-y-2  { row-gap: var(--bms-space-2); }
.bms .bms_gap-y-4  { row-gap: var(--bms-space-4); }

.bms .bms_overflow-hidden  { overflow: hidden; }
.bms .bms_overflow-x-auto  { overflow-x: auto; }

/* Cursor */
.bms .bms_cursor-pointer { cursor: pointer; }


/* ==========================================================================
   8. TOMSELECT — vollständiges Widget-CSS
   ========================================================================== */

/* Versteckt Original-<select> */
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* Outer wrapper */
.ts-wrapper {
  position: relative;
  display: flex;
  min-height: 38px;
}

/* Control (visible input area) */
.ts-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bms-color-text);
  background: var(--bms-color-white);
  border: 1px solid var(--bms-color-outline-border);
  border-radius: var(--bms-radius);
  cursor: pointer;
  box-sizing: border-box;
  gap: 0.25rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--bms-color-primary);
  outline: 2px solid var(--bms-color-primary);
  outline-offset: -1px;
}

/* Single: arrow indicator */
.ts-wrapper.single .ts-control {
  padding-right: 2rem;
}
.ts-wrapper.single .ts-control::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bms-color-secondary);
  margin-top: 3px;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  border-top-color: transparent;
  border-bottom-color: var(--bms-color-secondary);
  margin-top: -3px;
}

/* Selected item chip */
.ts-control .item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Multi: selected tags */
.ts-wrapper.multi .ts-control .item {
  background: var(--bms-color-primary);
  color: #fff;
  border-radius: var(--bms-radius-sm);
  padding: 0.1rem 0.4rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Typing input inside control */
.ts-control > input {
  flex: 1 1 auto;
  min-width: 4rem;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem;
  color: var(--bms-color-text);
  line-height: 1.5;
}

/* Hide typing input when item selected (single mode) */
.ts-wrapper.input-hidden .ts-control > input {
  position: absolute;
  left: -10000px;
  opacity: 0;
}

/* Dropdown */
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bms-color-white);
  border: 1px solid var(--bms-color-outline-border);
  border-top: 0;
  border-radius: 0 0 var(--bms-radius) var(--bms-radius);
  margin-top: 1px;
}

.ts-dropdown-content {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ts-dropdown .option {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--bms-color-text);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: #f0f4ff;
  color: var(--bms-color-primary);
}

.ts-dropdown .option.selected {
  font-weight: 600;
}

/* Placeholder */
.ts-control > input::placeholder {
  color: var(--bms-color-text-light);
}


/* ==========================================================================
   9. SELECT2 (third-party dropdown library — embedded, do not modify)
   ========================================================================== */

.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:#fff;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container{display:block}.select2-container *:focus{outline:0}.select2-container--bootstrap4 .select2-selection{width:100%;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection{cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;box-shadow:none}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below{border-top:none;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top:1px solid #ced4da;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{color:#212529;background-color:#f2f2f2}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{color:#fff;background-color:#007bff}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{display:list-item;padding:6px;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{float:right;width:.9em;height:.9em;padding-left:.15em;margin-top:.7em;margin-right:.3em;line-height:.75em;color:#f8f9fa;background-color:#c8c8c8;border-radius:100%}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#afafaf}.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{line-height:calc(1.5em + .75rem);color:#6c757d}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{position:absolute;top:60%;left:50%;width:0;height:0;margin-top:-2px;margin-left:-4px;border-color:#343a40 transparent transparent transparent;border-style:solid;border-width:5px 4px 0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{padding-left:.75rem;line-height:calc(1.5em + .75rem);color:#495057}.select2-search--dropdown .select2-search__field{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;width:100%;padding:0 .375rem;margin:0;list-style:none}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{float:left;padding:0;padding-right:.75rem;margin-top:calc(.375rem - 2px);margin-right:.375rem;color:#495057;cursor:pointer;border:1px solid #bdc6d0;border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field{color:#495057}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice+.select2-search{width:0}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{float:left;padding-right:3px;padding-left:3px;margin-right:1px;margin-left:3px;font-weight:700;color:#bdc6d0}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{position:absolute!important;top:0;right:.7em;float:none;margin-right:0}

/* ==========================================================================
   10. GALLERY CARD — Flowbite-faithful (vollständige Tailwind-Übersetzung)
   Tailwind config: primary = blue-* (#eff6ff…#172554), font = Inter
   ========================================================================== */

/* font-family: body/sans = Inter stack */
.bms .bms_card,
.bms .bms_card * {
  font-family: inherit;
  box-sizing: border-box;
}

.bms .bms_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bms .bms_article_item:hover .bms_card {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgb(59 130 246 / 0.1);
}

.bms .bms_card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

.bms .bms_card-img-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bms .bms_card-img-wrap .bms_image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.bms .bms_card-toprow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.bms .bms_card-discount-badge {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.625rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Sonderpreis — rot */
.bms .bms_badge_price.bms_card-discount-badge {
  background: #fee2e2;
  color: #991b1b;
}

/* Bestseller — orange */
.bms .bms_badge_bestseller.bms_card-discount-badge {
  background: #ffedd5;
  color: #9a3412;
}

/* Topartikel — blau */
.bms .bms_badge_topartikel.bms_card-discount-badge {
  background: #dbeafe;
  color: #1e40af;
}

.bms .bms_card-top-ribbon {
  position: absolute;
  top: 0.5rem;
  right: 0;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.625rem;
  border-radius: 0.25rem;
  z-index: 2;
  white-space: nowrap;
}

.bms .bms_card-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* Toprow ausblenden wenn keine Badges sichtbar und Actions leer */
.bms .bms_card-toprow:has(.bms_card-actions:empty):not(:has(.bms_card-toprow-badges > :not(.bms_hide))) {
  display: none;
}

/* --- Top-Zeile: mb-4 flex items-center justify-between gap-4 ----------- */
.bms .bms_card-toprow {
  display: flex;                   /* flex */
  align-items: center;             /* items-center */
  justify-content: space-between;  /* justify-between */
  gap: 1rem;                       /* gap-4 */
  margin-bottom: 1rem;             /* mb-4 */
  position: static;                /* override bms_badge_container position:relative */
  overflow: visible;               /* override bms_badge_container overflow:hidden */
  width: auto;                     /* override bms_badge_container width:100% */
}

/* Badge-Chips im Toprow (me-2 rounded bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-800) */
.bms .bms_card-toprow .bms_card-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
}

.bms .bms_card-bestseller-chip {
  display: inline-block;
  margin-inline-end: 0.5rem;       /* me-2 */
  border-radius: 0.25rem;          /* rounded */
  background: #dbeafe;             /* bg-primary-100 */
  padding: 0.125rem 0.625rem;      /* py-0.5 px-2.5 */
  font-size: 0.75rem;              /* text-xs */
  line-height: 1rem;
  font-weight: 500;                /* font-medium */
  color: #1e40af;                  /* text-primary-800 */
  white-space: nowrap;
}

/* Action-Button-Gruppe: flex items-center justify-end gap-1 */
.bms .bms_card-actions {
  display: flex;                   /* flex */
  align-items: center;             /* items-center */
  justify-content: flex-end;       /* justify-end */
  gap: 0.25rem;                    /* gap-1 */
  flex-shrink: 0;
  margin-left: auto;               /* always push right even when badge hidden */
}

/* Quick Look / Wishlist: rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 */
.bms .bms_card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;           /* rounded-lg */
  padding: 0.5rem;                 /* p-2 */
  color: #6b7280;                  /* text-gray-500 */
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bms .bms_card-action-btn:hover {
  background: #f3f4f6;             /* hover:bg-gray-100 */
  color: #111827;                  /* hover:text-gray-900 */
}

/* h-5 w-5 on action icons */
.bms .bms_card-action-btn svg {
  width: 1.25rem;                  /* h-5 */
  height: 1.25rem;                 /* w-5 */
  flex-shrink: 0;
}

/* --- Titel: text-lg font-semibold leading-tight text-gray-900 hover:underline */
.bms a.bms_card-title,
.bms .bms_card-title {
  display: block;
  font-size: 1.2rem;             /* text-lg */
  line-height: 1.2;               /* leading-tight */
  font-weight: 600;                /* font-semibold */
  color: #000000;                  /* text-gray-900 */
  text-decoration: none;
}

.bms a.bms_card-title:hover {
  text-decoration: none;      /* hover:underline */
}

/* --- Rating-Zeile: mt-2 flex items-center gap-2 ------------------------ */
.bms .bms_card-rating {
  margin-top: 0.5rem;              /* mt-2 */
  display: flex;                   /* flex */
  align-items: center;             /* items-center */
  gap: 0.5rem;                     /* gap-2 */
  flex-wrap: wrap;
}

.bms .bms_card-stars {
  display: flex;
  align-items: center;
}

/* h-4 w-4 text-yellow-400 */
.bms .bms_card-stars svg {
  width: 1rem;                     /* h-4 */
  height: 1rem;                    /* w-4 */
  color: #facc15;                  /* text-yellow-400 */
  fill: #facc15;
  flex-shrink: 0;
}

/* text-sm font-medium text-gray-900 */
.bms .bms_card-rating-value {
  font-size: 0.875rem;             /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;                /* font-medium */
  color: #111827;                  /* text-gray-900 */
}

/* text-sm font-medium text-gray-500 */
.bms .bms_card-rating-count {
  font-size: 0.875rem;             /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;                /* font-medium */
  color: #6b7280;                  /* text-gray-500 */
}

/* --- Warenkorb-Block-Button im card-content ----------------------------- */
.bms .bms_card-content .bms_btn--block {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* --- Feature-Liste: mt-2 flex items-center gap-4 ----------------------- */
.bms .bms_card-features {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}

/* Feature-Item als Pill wie .bms_af */
.bms .bms_card-feature {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.90rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--bms-radius-full);
  background: #f0f4ff;
  color: var(--bms-color-primary);
  white-space: nowrap;
  line-height: 1.4;
}

.bms .bms_card-feature svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--bms-color-primary);
  flex-shrink: 0;
}

/* Lagernd: grün */
.bms .bms_card-feature.bms_badge_stock {
  background: #f0fdf4;
  color: #166534;
}
.bms .bms_card-feature.bms_badge_stock svg {
  color: #166534;
}

/* Nicht lagernd: solid rot */
.bms .bms_card-feature.bms_nostock {
  background: #ef4444;
  color: #ffffff;
}
.bms .bms_card-feature.bms_nostock svg {
  color: #ffffff;
}
.bms .bms_badge_stock:not(.bms_hide) + .bms_nostock {
  display: none;
}

/* SKU/HAN/EAN-Chips */
.bms .bms_card-chips {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bms .bms_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--bms-radius-full);
  background: #f0f4ff;
  color: var(--bms-color-primary);
  white-space: nowrap;
  line-height: 1.4;
}

/* Stock chip: green tones */
.bms .bms_chip--stock {
  color: #065f46;
  background: #d1fae5;
  border-color: #a7f3d0;
}

/* --- Beschreibung (2-line clamp) --------------------------------------- */
.bms .bms_card-meta {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bms .bms_card-meta .bms_card-meta-label {
  font-weight: 500;
  color: #374151;
}

/* --- Footer: mt-4 flex items-center justify-between gap-4 -------------- */
.bms .bms_card-footer {
  margin-top: 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: none;
  flex-wrap: wrap;
}

/* Preis: text-2xl font-extrabold leading-tight text-gray-900 */
.bms .bms_card-footer .bms_price_container {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  text-align: right;
}

.bms .bms_card-footer .bms_price {
  font-size: 1.5rem;               /* text-2xl */
  line-height: 2rem;
  font-weight: 800;                /* font-extrabold */
  line-height: 1.25;               /* leading-tight */
  color: #f96058;                  /* text-gray-900 */
}

.bms .bms_card-footer .bms_price_after {
  font-size: 0.75rem;              /* text-xs */
  color: #6b7280;
}

.bms .bms_card-footer .bms_ppu {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

/* Footer-Buttons-Gruppe */
.bms .bms_card-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Cart-Button: inline-flex items-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white */
/* hover:bg-primary-800  focus:outline-none focus:ring-4 focus:ring-primary-300 */
.bms .bms_card-footer .bms_article_toCart,
.bms .bms_card-content .bms_article_toCart {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  background: #000000;
  padding: 0.5rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.2rem;
  font-weight: 400;
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.bms .bms_card-footer .bms_article_toCart:hover,
.bms .bms_card-content .bms_article_toCart:hover {
  background: #f96058;             /* hover:bg-primary-800 */
}

.bms .bms_card-footer .bms_article_toCart:focus,
.bms .bms_card-content .bms_article_toCart:focus {
  outline: none;                   /* focus:outline-none */
  box-shadow: 0 0 0 4px #93c5fd;   /* focus:ring-4 focus:ring-primary-300 */
}

/* -ms-2 me-2 on cart icon (h-5 w-5) */
.bms .bms_card-footer .bms_article_toCart svg,
.bms .bms_card-content .bms_article_toCart svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Goto-Offer Button */
.bms .bms_card-footer .bms_btn--outline {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: 1px solid #d1d5db;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bms .bms_card-footer .bms_btn--outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Zum Artikel: standard versteckt, Design wie Kaufen aber grau */
.bms .bms_zum_artikel {
  display: none;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  background: #6b7280;
  padding: 0.5rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.2rem;
  font-weight: 500;
  color: #ffffff!important;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}
.bms .bms_zum_artikel:hover {
  background: #4b5563;
  color: #ffffff;
  text-decoration: none;
}

/* Kein Lager: Kaufen weg, Zum Artikel zeigen */
.bms .bms_card-content:has(.bms_badge_stock.bms_hide) .bms_article_toCart {
  display: none;
}
.bms .bms_card-content:has(.bms_badge_stock.bms_hide) .bms_zum_artikel {
  display: inline-flex;
}

/* Vaterartikel: Kaufen weg, Zum Artikel zeigen */
.bms .bms_card-content:has(.bms_price_is_parent:not(.d-none)) .bms_article_toCart {
  display: none;
}
.bms .bms_card-content:has(.bms_price_is_parent:not(.d-none)) .bms_zum_artikel {
  display: inline-flex;
}

/* === mt-3 flex items-center gap-2 — Estimated Delivery row ============= */
.bms .bms_card-delivery {
  margin-top: 0.75rem;             /* mt-3 */
  display: flex;
  align-items: center;             /* items-center */
  gap: 0.5rem;                     /* gap-2 */
}

.bms .bms_card-delivery svg {
  width: 1rem;                     /* h-4 w-4 */
  height: 1rem;
  color: #6b7280;                  /* text-gray-500 */
  flex-shrink: 0;
}

.bms .bms_card-delivery p {
  font-size: 0.875rem;             /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;                /* font-medium */
  color: #6b7280;                  /* text-gray-500 */
  margin: 0;
}

.bms .bms_card-delivery-date {
  font-weight: 600;                /* font-semibold */
  color: #111827;                  /* text-gray-900 */
}