/* =========================================================================
   Компактные свотчи вариаций WooCommerce/Woodmart — ТОЛЬКО ДЛЯ МОБИЛЬНЫХ
   Реальная разметка сайта (проверено на странице /product/грядка/):

   <div class="wd-swatches-product wd-swatches-single ..." data-id="pa_dlina">
     <div class="wd-swatch wd-text wd-active" data-value="2" data-title="2 м">
       <span class="wd-swatch-text">2 м</span>
     </div>
     ...
   </div>

   Цвет:
   <div class="wd-swatches-product wd-swatches-single ..." data-id="pa_color">
     <div class="wd-swatch wd-bg wd-tooltip wd-active" data-value="cink" data-title="Цинк">
       <span class="wd-swatch-bg" style="background-color:rgb(...)"></span>
       <span class="wd-swatch-text">Цинк</span>
     </div>
     ...
   </div>

   Вставить в: Woodmart-child -> new-swatches/sw.css (уже подключен темой)

   Брейкпоинт 767px ниже — стандартная граница "телефон/планшет" в вёрстке.
   Если нужно другое значение (например 576px только для узких телефонов),
   поменяйте его тут и в JS-файле (переменная MOBILE_BREAKPOINT).
   ========================================================================= */

@media (max-width: 767px) {

  body.single-product .variations_form .variations td.label,
  body.single-product .variations_form .variations tr {
    padding-bottom: 4px;
  }
  body.single-product .variations_form .variations label,
  body.single-product .variations_form-linked label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-block;
  }

  /* =======================================================================
     0) Подпись всегда над значением для ВСЕХ групп атрибутов.
     По умолчанию тема кладёт подпись и кнопки в одну строку и переносит
     только когда не хватает места по ширине — из-за этого короткие группы
     (Тип грядки: 2 кнопки) не переносились, а остальные переносились
     "случайно". Плюс центрируем сами группы кнопок.
     ======================================================================= */
  body.single-product .variations_form table.variations .cell,
  body.single-product .variations_form-linked table.variations .cell {
    display: block !important;
    width: 100% !important;
  }
  /* центрируем ТОЛЬКО Тип грядки / Высота / Ширина - у Длины и Цвета
     свои кастомные блоки (слайдер на всю ширину, список подписей слева) */
  body.single-product .variations_form table.variations td.value.cell:not(.wd-length-cell):not(.wd-color-cell),
  body.single-product .variations_form-linked table.variations td.value.cell:not(.wd-length-cell):not(.wd-color-cell) {
    text-align: center;
  }

  /* =======================================================================
     1) СЕГМЕНТИРОВАННЫЕ ПЕРЕКЛЮЧАТЕЛИ
     Работает сразу для всех текстовых свотчей: Тип грядки, Высота, Ширина
     (Длина визуально прячется и заменяется слайдером через sw.js)
     ======================================================================= */
  body.single-product .wd-swatches-product {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
  }

  body.single-product .wd-swatches-product .wd-swatch.wd-text {
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid #cfd8e3 !important;
    border-radius: 0 !important;
    padding: 7px 14px !important;
    min-height: unset !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    background: #fff;
    color: #1c2b39;
    cursor: pointer;
    width: auto !important;
  }
  body.single-product .wd-swatches-product .wd-swatch.wd-text:last-child {
    border-right: none !important;
  }
  body.single-product .wd-swatches-product .wd-swatch.wd-text.wd-active {
    background: #16325c !important;
  }
  body.single-product .wd-swatches-product .wd-swatch.wd-text.wd-active .wd-swatch-text {
    color: #fff !important;
  }

  /* =======================================================================
     2) ЦВЕТ: кружок + подпись (RAL-код), список в столбик
     Оригинальные .wd-bg свотчи темы прячут подпись через CSS
     (.wd-swatch.wd-bg .wd-swatch-text{display:none} в теме) и показывают
     её только как tooltip по наведению - переопределять это через CSS
     ненадёжно (плюс фиксированные размеры через CSS-переменные и оверлей
     с галочкой). Поэтому woodmart-swatches.js строит рядом свой список
     (.wd-color-list), а клики по нему кликают по спрятанному оригиналу.
     ======================================================================= */
  .wd-color-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .wd-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
  }
  .wd-color-row.wd-active {
    border-color: #cfd8e3;
    background: #f4f6f8;
  }
  .wd-color-row.wd-disabled {
    opacity: .4;
    cursor: not-allowed;
  }
  .wd-color-dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    display: inline-block;
  }
  .wd-color-label {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
  }

  /* =======================================================================
     3) СЛАЙДЕР ДЛИНЫ (создаётся sw.js, тут только внешний вид)
     ======================================================================= */
  /* тема сжимает td.value по контенту на мобильном (класс формы
     wd-label-side-md -> "table.variations .value{width:auto}") -
     растягиваем именно ячейку длины, чтобы слайдер занял всю ширину */
  td.value.wd-length-cell {
    display: block !important;
    width: 100% !important;
  }
  .wd-length-slider {
    width: 100%;
    margin-top: 4px;
  }
  .wd-length-slider-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .wd-length-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wd-length-btn:hover { background: #f4f6f8; }
  .wd-length-value {
    font-size: 14px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
  }
  .wd-length-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #dfe6ec;
    outline: none;
  }
  .wd-length-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #16325c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #16325c;
  }
  .wd-length-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #16325c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #16325c;
  }
  .wd-length-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8a97a3;
    margin-top: 2px;
  }

  /* прячем исходный блок свотчей (длина/цвет), но НЕ удаляем из DOM -
     на нём держится логика Woodmart (клики -> select -> цена/variation_id) */
  .wd-source-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  /* =======================================================================
     4) Компактный блок цены и кнопки "в корзину"
     ======================================================================= */
  body.single-product .price ins { text-decoration: none; }
  body.single-product .price del { font-size: 13px; opacity: .6; }
  body.single-product form.cart .quantity { margin-right: 8px; }
  body.single-product form.cart .single_add_to_cart_button {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

}