/* sp-loop-dd.css
   Кастомный dropdown (без <select>) для выбора размера в каталоге
   Совместим с твоей разметкой .sp-loop-price-row + .sp-dd
*/

.sp-loop-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:2em;
  position:relative;
  z-index:20;
  overflow:visible !important;
}

.sp-loop-price-row [data-role="loop-price"]{
  white-space:nowrap;
  min-width:0;
}

/* контейнер справа (где dropdown) */
.sp-loop-size{
  position:relative;
  flex:0 0 auto;
  min-width:0;
  z-index:30;
  overflow:visible !important;
}

/* ===== Dropdown wrapper ===== */
.sp-dd,
.sp-dd *{
  box-sizing:border-box;
}

.sp-dd{
  position:relative;
  flex:0 0 auto;
  max-width:180px;
  z-index:40;
  overflow:visible !important;
}

/* ===== Кнопка ===== */
.sp-dd__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  width:100%;
  height:40px;

  border:1px solid #d7dbe3;
  background:#f7f8fb;
  border-radius:10px;

  padding:0 12px;
  cursor:pointer;

  -webkit-appearance:none;
  appearance:none;
  text-align:left;

  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.sp-dd__btn:focus{
  outline:none;
  border-color:#6a7cff;
  box-shadow:0 0 0 3px rgba(106,124,255,.18);
}

/* значение */
.sp-dd__value{
  font-size:14px;
  font-weight:600;
  color:#111;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* стрелка */
.sp-dd__chev{
  width:18px;
  height:18px;
  flex:0 0 auto;
  position:relative;
  opacity:.9;
}

.sp-dd__chev:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-35%);
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #333;
}

/* поворот стрелки при открытии */
.sp-dd.is-open .sp-dd__chev:before{
  transform:translate(-50%,-65%) rotate(180deg);
}

/* ===== Список ===== */
.sp-dd__list{
  position:absolute;
  right:0;
  top:calc(100% + 6px);

  width:220px;
  max-height:350px;
  overflow:auto;

  background:#fff;
  border:1px solid #020202;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);

  padding:6px;
  display:none;
  z-index:9999;

  /* чтобы на iOS скролл был “нативным” */
  -webkit-overflow-scrolling:touch;
}

.sp-dd.is-open .sp-dd__list{
  display:block;
}

/* элементы */
.sp-dd__item{
  width:100%;
  text-align:left;

  padding:10px 10px;
  border-radius:10px;

  border:0;
  background:transparent;
  cursor:pointer;

  font-size:14px;
  color:#111;
}

.sp-dd__item:hover{
  background:#f3f5ff;
}

.sp-dd__item.is-active{
  background:#6a7cff;
  color:#fff;
  font-weight:700;
}

/* ===== Мобилки / iPhone ===== */
@media (max-width: 420px){
  .sp-loop-price-row{
    gap:10px;
  }

  .sp-dd{
    max-width:170px;
  }

  .sp-dd__btn{
    height:40px;
    padding:0 10px;
  }

  .sp-dd__list{
    width:210px;
  }
}

/* ===== Мелкие улучшения внешнего вида цен Woo ===== */
.sp-loop-price-row .woocommerce-Price-amount{
  font-weight:700;
}

/* В каталоге принудительно возвращаем размер шрифта/цвет */
.product-card .sp-specs{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:12px 0 12px;
  font-size:14px;
  line-height:1.25;
  color:#111;
}

.product-card .sp-spec{
  display:flex;
  align-items:center;
  gap:10px;
}

.product-card .sp-spec__txt{
  display:flex;
  gap:6px;
  align-items:baseline;
  font-size:14px;     /* на случай font-size:0 у родителя */
  line-height:1.25;
  color:#111;
}

.product-card .sp-spec__label{ opacity:.75; }
.product-card .sp-spec__value{ font-weight:700; }

/* SINGLE: чтобы выглядело как в каталоге, но чуть шире */
.sp-single-size-row{
  margin: 8px 0 10px;
}

.sp-dd--single .sp-dd__btn{
  min-width: 170px;
  max-width: 220px;
    margin-top: 1em;
  margin-block-end: 1em;
}
/* по умолчанию вниз */
.sp-dd__list {
  top: calc(100% + 6px);
  bottom: auto;
}

/* если вверх */
.sp-dd.is-dropup .sp-dd__list {
  top: auto;
  bottom: calc(100% + 6px);
}

.product_meta {
    margin-top: 15px;
    line-height: 1.6;
}

.product_meta .sku_wrapper,
.product_meta .posted_in {
    display: block;
}
.sp-dd {
  position: relative;
}

.sp-dd__list {
  pointer-events: auto;
}