/* variant-select-v12.css (18.10.2026) - kompaktní výběr odstínu/velikosti ve stylu řádku „Objem“
   v8: bez čáry mezi Odstín a Objem, užší sloupec popisků (110 px) i u tabulky variant Shoptetu
   v9: obsah pole zarovnaný doleva; v10: stejné mezery nad Odstínem a pod Objemem (cca 20 px)
   v11: písmo Exo 2 i v poli Odstín a v nativním výběru varianty (dřív Arial); u produktu bez Objemu mezery 20/20 px
   v12: text v nativním výběru varianty svisle vycentrovaný */
.bp-vs-row {
  order: 1;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 0 0;          /* + vycentrování v 55 px = cca 20 px od čáry, stejně jako pod Objemem */
  border-top: 0.8px solid #dfdfdf;
  min-height: 68px;
  position: relative;
}
/* když pod řádkem není tabulka variant (produkt bez Objemu), dorovnat mezeru i dole */
.p-detail-info .bp-vs-row:not(:has(+ table.detail-parameters)) { padding: 10px 0; min-height: 75px; }

/* nativní výběr varianty Shoptetu (Objem apod.) ve stejném písmu jako zbytek webu */
.p-detail-info .detail-parameters select {
  font-family: "Exo 2", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  /* šablona: padding 9px + line-height 22px => text padal dolů; bez svislého paddingu prohlížeč text vycentruje */
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}
.bp-vs-row + .bp-vs-row { border-top: 0; padding-top: 0; min-height: 55px; }
.p-detail-info .bp-vs-row + table.detail-parameters { border-top: 0 !important; padding-top: 0 !important; }
/* užší sloupec popisků: náš řádek i nativní tabulka parametrů (Objem apod.) */
.p-detail-info .detail-parameters th { width: 110px !important; min-width: 110px !important; max-width: 110px !important; }

.bp-vs-label {
  flex: 0 0 110px;
  font: 500 14px "Exo 2", sans-serif;
  color: #222;
}
.bp-vs-control {
  position: relative;
  flex: 0 1 250px;
  min-width: 0;
}
/* !important kvůli globálním stylům tlačítek a odkazů v šabloně Rubin */
.bp-vs-row .bp-vs-current {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important; /* šablona tlačítka centruje */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 34px 0 8px !important;
  border: 0.8px solid #DCD9E8 !important;
  border-radius: 21px !important;
  background: #fff url(https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/rubin/img/select-ar.png) no-repeat 100% 50% !important;
  font: 400 14px/22px "Exo 2", sans-serif !important;
  color: #000 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left !important;
}
.bp-vs-row .bp-vs-current span { color: #000 !important; }
.bp-vs-current:focus-visible { outline: 2px solid #2CA2C6; outline-offset: 2px; }
.bp-vs-current img,
.bp-vs-item img {
  flex: 0 0 auto;
  width: 34px;
  height: 26px;
  object-fit: contain;
  margin-right: 8px;
}
.bp-vs-current span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bp-vs-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: max(100%, 320px);
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 0.8px solid #DCD9E8;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  padding: 4px 0;
}
.bp-vs-row.is-open .bp-vs-list { display: block; }

.bp-vs-item {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 4px 12px;
  font: 400 14px/1.3 "Exo 2", sans-serif;
  color: #222;
  text-decoration: none;
}
.bp-vs-row a.bp-vs-item,
.bp-vs-row a.bp-vs-item:visited { color: #222 !important; text-decoration: none !important; }
.bp-vs-row a.bp-vs-item:hover,
.bp-vs-row a.bp-vs-item:focus { background: #f4f3f9; color: #2CA2C6 !important; }
.bp-vs-item.is-current { font-weight: 600; background: #f4f3f9; }
.bp-vs-item .bp-vs-name { flex: 1 1 auto; }
.bp-vs-item .bp-vs-av { flex: 0 0 auto; margin-left: 8px; font-size: 12px; color: #999; }
.bp-vs-row a.bp-vs-item.is-soldout .bp-vs-name { color: #888 !important; }

@media (max-width: 575px) {
  .bp-vs-label { flex-basis: 100px; }
  .bp-vs-control { flex: 1 1 auto; }
  .bp-vs-list { width: 100%; }
}