/* ============================================================
   OCEX Prodtabs - tabbed product block. Layout ONLY, no colours:
   the tab bar skin (.nav-tabs) and the card (.product-thumb) belong to the theme.
   Every rule sits under the module's own full-name container (.ocex-prodtabs).
   ============================================================ */

/* --- tab bar -------------------------------------------------------------
   A plain .nav.nav-tabs WITHOUT the Bootstrap .nav-justified: that one has
   its own colour rules in bootstrap.min.css (#ddd border, #fff bottom line
   on the active tab, bar bottom line 0) which override the theme's tab skin
   with a higher specificity. Here only the layout, no colours:
   <=767 px a stacked list, >=768 px one row with equal tab widths
   (the old 4 x 25 %). */
.ocex-prodtabs .ocex-prodtabs-nav > li > a {
  text-align: center;
}

@media (max-width: 767px) {
  .ocex-prodtabs .ocex-prodtabs-nav > li {
    float: none;
  }

  /* the gap of the old .nav-justified between the stacked tabs */
  .ocex-prodtabs .ocex-prodtabs-nav > li > a {
    margin-right: 0;
    margin-bottom: 5px;
  }
}

@media (min-width: 768px) {
  .ocex-prodtabs .ocex-prodtabs-nav {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  /* the clearfix of .nav would open a separate row inside a table container */
  .ocex-prodtabs .ocex-prodtabs-nav::before,
  .ocex-prodtabs .ocex-prodtabs-nav::after {
    display: none;
  }

  .ocex-prodtabs .ocex-prodtabs-nav > li {
    display: table-cell;
    float: none;
    width: 1%;
  }

  /* in a table cell the stock -1 px bottom margin of the li has no effect: the link
     takes it, so the tab still sits on the bottom line of the bar, as in the stock .nav-tabs */
  .ocex-prodtabs .ocex-prodtabs-nav > li > a {
    margin-right: 0;
    margin-bottom: -1px;
  }
}

/* --- static grid (without a slider, or when there is no owlCarousel) -------
   Column count from the inline variables of the container: c1 desktop
   (per_row), c2 <=1199, c3 <=980, c4 <=768, c5 <=479. The negative margin
   of .row and the padding of .col-* give the gap, as in the stock listings. */
.ocex-prodtabs .ocex-prodtabs-grid {
  display: grid;
  grid-template-columns: repeat(var(--ocex-prodtabs-c1, 5), minmax(0, 1fr));
}

/* the clearfix of .row would add an empty grid cell */
.ocex-prodtabs .ocex-prodtabs-grid::before,
.ocex-prodtabs .ocex-prodtabs-grid::after {
  display: none;
}

.ocex-prodtabs .ocex-prodtabs-grid > .product-layout {
  float: none;
  width: auto;
  min-width: 0;
}

@media (max-width: 1199px) {
  .ocex-prodtabs .ocex-prodtabs-grid {
    grid-template-columns: repeat(var(--ocex-prodtabs-c2, 4), minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .ocex-prodtabs .ocex-prodtabs-grid {
    grid-template-columns: repeat(var(--ocex-prodtabs-c3, 3), minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ocex-prodtabs .ocex-prodtabs-grid {
    grid-template-columns: repeat(var(--ocex-prodtabs-c4, 2), minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .ocex-prodtabs .ocex-prodtabs-grid {
    grid-template-columns: repeat(var(--ocex-prodtabs-c5, 1), minmax(0, 1fr));
  }
}