/* ============================================================================
   Grid Mode v1.0.0 - 4 Listing-Modi mit View-Toggles
   templates/pureistic_4000/css/grid_mode.css

   Wird in general_bottom.css.php geladen, NACH dynamic_filter.css.

   Modi:
     compact   = Mobile 2 / Tablet 3 / Desktop 4
     standard  = Mobile 2 / Tablet 3 / Desktop 5
     wide      = Mobile 2 / Tablet 4 / Desktop 6
     big       = Mobile 1 / Tablet 2 / Desktop 2

   Spaltenanzahl wird vom Container .grid_mode_X (CSS Grid) gesteuert.
   Die V2-Listings nutzen .lb_box_v2 als Karten-Klasse. Damit kein Konflikt
   mit V1-Listings die noch .lb_box_1 nutzen.

   (c) stylepot.de
   ============================================================================ */


/* ============================================================================
   Container Grid - Mobile First, 4 Breakpoints
   600px = Tablet, 1024px = Notebook, 1440px = Desktop M, 1600px = Desktop L

   Spaltenzahl pro Modus & Breakpoint:
                Mobile  Tablet  Notebook  Desktop M  Desktop L
                <600    600     1024      1440       1600+
     big          1       2       2         2          2
     compact      2       3       4         4          5
     standard     2       3       5         6          6
     wide         2       4       6         6          8
   ============================================================================ */

/* --- Mobile (Default) --- */
.flex_listing_container_v2.grid_mode_compact,
.flex_listing_container_v2.grid_mode_standard,
.flex_listing_container_v2.grid_mode_wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 2px;
}

.flex_listing_container_v2.grid_mode_big {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px 2px;
}

/* --- Tablet ab 600px --- */
@media (min-width: 600px) {
  .flex_listing_container_v2.grid_mode_compact,
  .flex_listing_container_v2.grid_mode_standard {
    grid-template-columns: repeat(3, 1fr);
  }
  .flex_listing_container_v2.grid_mode_wide {
    grid-template-columns: repeat(4, 1fr);
  }
  .flex_listing_container_v2.grid_mode_big {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Notebook ab 1024px --- */
@media (min-width: 1024px) {
  .flex_listing_container_v2.grid_mode_compact {
    grid-template-columns: repeat(4, 1fr);
  }
  .flex_listing_container_v2.grid_mode_standard {
    grid-template-columns: repeat(5, 1fr);
  }
  .flex_listing_container_v2.grid_mode_wide {
    grid-template-columns: repeat(6, 1fr);
  }
  .flex_listing_container_v2.grid_mode_big {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Desktop M ab 1440px --- */
@media (min-width: 1440px) {
  .flex_listing_container_v2.grid_mode_standard {
    grid-template-columns: repeat(6, 1fr);
  }
  /* compact bleibt 4, wide bleibt 6 in diesem Bereich */
}

/* --- Desktop L ab 1600px --- */
@media (min-width: 1600px) {
  .flex_listing_container_v2.grid_mode_compact {
    grid-template-columns: repeat(5, 1fr);
  }
  .flex_listing_container_v2.grid_mode_wide {
    grid-template-columns: repeat(8, 1fr);
  }
  /* standard bleibt 6 */
}


/* ============================================================================
   Produktkachel V2 (.lb_box_v2)
   ============================================================================ */

.lb_box_v2 {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.flex_listing_container_v2.grid_mode_wide .lb_box_v2 { margin-bottom: 0; }
.flex_listing_container_v2.grid_mode_compact .lb_box_v2 { margin-bottom: 24px; }
.flex_listing_container_v2.grid_mode_standard .lb_box_v2 { margin-bottom: 28px; }
.flex_listing_container_v2.grid_mode_big .lb_box_v2 { margin-bottom: 40px; }

.lb_box_v2 .lb_box_inner {
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Bild-Container - Aspect Ratio 128.6173% (Portrait wie V1) */
.lb_box_v2 .lb_image {
  margin: 0;
  text-align: center;
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  background: #fafafa;
}
.lb_box_v2 .lb_image:before {
  content: "";
  display: block;
  padding-top: 128.6173%;
}
.lb_box_v2 .lb_image img {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  font-size: 0.1px;
  top: 0; left: 0; bottom: 0; right: 0;
  object-fit: cover;
}

/* Hover-Bildwechsel Ganzkoerper -> Anschnitt
   transition macht's smooth, hover-Media-Query schliesst Touch-only Geraete aus
   (sonst kann es auf Touch sein dass nach Tap das Hover-Bild stehen bleibt) */
.lb_box_v2 .lb_image .lb_image_main,
.lb_box_v2 .lb_image .lb_image_alternate {
  transition: opacity 0.25s ease;
}
.lb_box_v2 .lb_image .lb_image_main { opacity: 1; }
.lb_box_v2 .lb_image .lb_image_alternate { opacity: 0; }

@media (hover: hover) {
  .lb_box_v2 .lb_image:hover .lb_image_main { opacity: 0; }
  .lb_box_v2 .lb_image:hover .lb_image_alternate { opacity: 1; }
}


/* ============================================================================
   Content unter dem Bild
   ============================================================================ */

.lb_box_v2 .lb_content {
  position: relative;
  padding: 10px 4px 0 4px;
}

.lb_box_v2 .lb_title {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.8rem;
  padding: 1px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.lb_box_v2 .lb_title a {
  color: #000;
  text-decoration: none;
}
.lb_box_v2 .lb_title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lb_box_v2 .lb_price {
  padding: 1px 0;
  font-size: 1.2rem;
  line-height: 2.0rem;
  color: #000;
  font-weight: 400;
  white-space: nowrap;
}

/* Typografie pro Modus skalieren */
.flex_listing_container_v2.grid_mode_wide .lb_box_v2 .lb_title,
.flex_listing_container_v2.grid_mode_wide .lb_box_v2 .lb_price {
  font-size: 1.1rem;
  line-height: 1.6rem;
}
.flex_listing_container_v2.grid_mode_big .lb_box_v2 .lb_title {
  font-size: 1.4rem;
  line-height: 2.2rem;
}
.flex_listing_container_v2.grid_mode_big .lb_box_v2 .lb_price {
  font-size: 1.4rem;
  line-height: 2.0rem;
}


/* ============================================================================
   Save-Badge, New-Badge, Tag-Images
   ============================================================================ */

.lb_box_v2 .lb_save {
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #000;
  letter-spacing: 0.02em;
}
.flex_listing_container_v2.grid_mode_wide .lb_box_v2 .lb_save {
  font-size: 0.9rem;
  line-height: 1.2rem;
}

.lb_box_v2 .lb_new {
  display: block;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.9rem;
  line-height: 1.1rem;
  padding: 10px 10px 0 0;
  color: #000;
  margin: 0 0 -10px 0;
}

.lb_box_v2 .tags-images {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 3;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none;
}
.lb_box_v2 .tags-images img.tag_image {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  object-fit: contain;
  position: relative;
  display: block;
}

/* Pills oben links: SALE / NEU - dezent mit backdrop-blur */
.lb_box_v2 .pills-left {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 3;
  pointer-events: none;
}
.lb_box_v2 .pills-left .pill {
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
  color: #111;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
}
/* Pill-Typen einheitlich - SALE und NEU */
.lb_box_v2 .pills-left .pill-sale,
.lb_box_v2 .pills-left .pill-new {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #111;
  border: none;
}

/* Mobile: kompakter */
@media (max-width: 600px) {
  .lb_box_v2 .pills-left { top: 8px; left: 8px; gap: 4px; }
  .lb_box_v2 .pills-left .pill { font-size: 8px; padding: 2px 6px; }
  .lb_box_v2 .tags-images { top: 8px; right: 8px; gap: 3px; }
  .lb_box_v2 .tags-images img.tag_image { width: 34px !important; height: 34px !important; }
}


/* ============================================================================
   Wishlist-Heart Overlay
   ============================================================================ */

.lb_box_v2 .wishlist-heart-change {
  z-index: 999;
  width: 30px;
  height: 30px;
  background: transparent;
  position: absolute;
  right: 10px;
  top: 10px;
}
.lb_box_v2 .wishlist-heart-change > form,
.lb_box_v2 .wishlist-heart-change .addtobasket_wish {
  display: flex;
  height: 100%;
  width: 100%;
}
.lb_box_v2 .wishlist-heart-change .addtobasket_wish a {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.lb_box_v2 .wishlist-heart-change .addtobasket_wish .cssButton {
  margin: 0;
  padding: 0;
  display: flex;
  min-height: initial;
  height: 100%;
  width: 100%;
  border: 0 !important;
}
.lb_box_v2 .wishlist-heart-change .addtobasket_wish .cssButton i {
  font-size: 14px;
}
.lb_box_v2 .wishlist-heart-change .cssButtonColor1,
.lb_box_v2 .wishlist-heart-change .cssButtonColor1 * {
  color: #000;
  background: #fff;
}
.lb_box_v2 .wishlist-heart-change .cssButtonColor1:hover,
.lb_box_v2 .wishlist-heart-change .cssButtonColor1:hover * {
  background: #000;
  color: #fff;
}


/* ============================================================================
   Quick-Buy Overlay (Groesse-Buttons beim Hover)
   Identisch zu V1, da die quick_buy_form.html Klassen wiederverwendet
   ============================================================================ */

.lb_box_v2 .lb_attributes {
  display: none;
  position: absolute;
  z-index: 1;
  background: rgba(255,255,255,0.80);
  padding: 25px 10px 20px 10px;
  text-align: center;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
  transform: translate3d(0, 100%, 0);
}
.lb_box_v2 .lb_image:hover .lb_attributes {
  transform: translate3d(0, 0, 0);
}
@media (min-width: 1024px) {
  .lb_box_v2 .lb_attributes { display: block; }
}

.lb_box_v2 .size_button {
  border: none;
  width: 30px !important;
  height: 30px;
  outline: none;
  appearance: none;
  background: transparent;
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lb_box_v2 .size_button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.lb_box_v2 .size_button > span > img {
  width: 20px;
  height: 20px;
}
.lb_box_v2 .size_button:hover > span > img {
  filter: invert(1);
}


/* ============================================================================
   Multibuy-Bilder unten (Farbvarianten)
   ============================================================================ */

.lb_box_v2 .lb_images_small {
  display: flex;
  flex-wrap: wrap;
  margin: 6px -3px 0 -3px;
}
.lb_box_v2 .lbis_item {
  width: auto;
  margin: 0;
  padding: 1px;
  max-width: 40px;
}
.lb_box_v2 .lbis_item a { display: block; }
.lb_box_v2 .lbis_item a:hover { text-decoration: none; }
.lb_box_v2 .lbis_item img {
  width: 100%;
  height: auto;
  vertical-align: top;
}


/* ============================================================================
   View-Toggle Icons - Mobile-Anpassung
   Auf Mobile: Big (2 Sp.), Compact (2 Sp.) und Wide (Lookbook 2 Sp. ohne Text).
   Standard wird ausgeblendet weil es auf Mobile identisch zu Compact aussieht.
   ============================================================================ */

@media (max-width: 599px) {
  .df-view--standard {
    display: none;
  }
}


/* ============================================================================
   LOOKBOOK-MODUS (wide) - nur Bilder, alles andere ausblenden
   6 Spalten Desktop, kein Text, keine Badges, keine Quick-Buy-Overlays.
   Hover-Bild bleibt erhalten (Ganzkoerper -> Anschnitt). Klick aufs Bild
   funktioniert weiterhin (geht zur PDP).
   ============================================================================ */

.flex_listing_container_v2.grid_mode_wide .lb_content,
.flex_listing_container_v2.grid_mode_wide .lb_save,
.flex_listing_container_v2.grid_mode_wide .lb_new,
.flex_listing_container_v2.grid_mode_wide .pills-left,
.flex_listing_container_v2.grid_mode_wide .tags-images,
.flex_listing_container_v2.grid_mode_wide .wishlist-heart-change,
.flex_listing_container_v2.grid_mode_wide .lb_attributes,
.flex_listing_container_v2.grid_mode_wide .size_button {
  display: none !important;
}

/* Box-Margin = 0 - Lookbook lebt vom dichten Raster */
.flex_listing_container_v2.grid_mode_wide .lb_box_v2 {
  margin-bottom: 0;
}

/* Sehr enges Raster, aber sichtbare Trennung (1px) */
.flex_listing_container_v2.grid_mode_wide {
  gap: 1px;
}


/* ============================================================================
   Color-Variants als Text-Hint (statt Mini-Bilder) im 5er-Grid
   Wird bei standard-Modus ausgegeben, wenn das Produkt Farbvarianten hat.
   ============================================================================ */

.lb_box_v2 .lb_color_hint {
  font-size: 1rem;
  line-height: 1.4rem;
  color: #888;
  padding: 4px 0 0;
  letter-spacing: 0.01em;
}


/* ============================================================================
   View-Toggle Icons - COS-Stil (klein, dezent grau)
   Ueberschreibt Styles aus dynamic_filter.css (kommt nach diesem geladen).
   Aktiver Zustand: schwarz + duenner Unterstrich.
   ============================================================================ */

.df-view {
  width: 24px;
  height: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: #999;
}
.df-view svg {
  width: 11px;
  height: 11px;
  display: block;
}
.df-view:hover {
  color: #000;
}
.df-view.is-active {
  color: #000;
  border-bottom-color: #000;
}