/* ==== WW / PDP mobile tweaks ==== */
@media (max-width: 576px){

  /* 1) Назва в ДВІ строки (обрізка з трикрапкою) */
  .single-product .product .entry-summary .product_title,
  .single-product .summary .product_title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    max-height:calc(1.2em * 2 + 6px); /* підкоригуй при іншому line-height */
    line-height:1.2;
    margin-bottom:8px;
  }

  /* 2) SKU відразу під назвою.
     Якщо елементи в одному блоці (.summary), ставимо грід і переупорядковуємо */
  .single-product .entry-summary,
  .single-product .summary{
    display:grid;
    grid-auto-flow:row;
    grid-row-gap:10px;
  }
  /* призначаємо області (назва -> sku -> решта) */
  .single-product .summary .product_title{ order: 10; }
  .single-product .summary .product_meta .sku,
  .single-product .summary .product_meta .sku_wrapper{ order: 20; }
  /* щоб увесь .product_meta не ліз угору, не-складові лишаємо нижче */
  .single-product .summary .product_meta{ order: 20; }
  /* легкий стиль для SKU */
  .single-product .summary .product_meta .sku,
  .single-product .summary .product_meta .sku_wrapper{
    display:inline-block;
    font-weight:600;
    background:#f1f3f5;
    padding:6px 10px;
    border-radius:8px;
  }

  /* Якщо тема не обгортає SKU в .sku_wrapper — підстрахуємось */
  .single-product .summary .product_meta .sku:before{
    content: attr(data-label);
  }

  /* 3) «Зебра» для таблиці характеристик */
  .single-product table.shop_attributes,
  .single-product .woocommerce-product-attributes{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:12px;
  }
  /* рядки-зебра */
  .single-product table.shop_attributes tr:nth-child(odd),
  .single-product .woocommerce-product-attributes tr:nth-child(odd){
    background:#f7f8fa;
  }
  .single-product table.shop_attributes tr:nth-child(even),
  .single-product .woocommerce-product-attributes tr:nth-child(even){
    background:#ffffff;
  }
  /* клітинки */
  .single-product table.shop_attributes th,
  .single-product table.shop_attributes td,
  .single-product .woocommerce-product-attributes th,
  .single-product .woocommerce-product-attributes td{
    padding:12px 14px !important;
    border:0 !important;
    vertical-align:middle;
  }
  /* ключі ліворуч менш яскраві */
  .single-product table.shop_attributes th,
  .single-product .woocommerce-product-attributes th{
    color:#6c757d;
    font-weight:600;
    width:38%;
  }
}
@media (max-width:576px){

  /* 1) Порядок блоків: Назва → SKU → Атрибути */
  .single-product .summary{ display:grid; grid-row-gap:10px; }

  .single-product .summary .product_title{ order: 1 !important; }
  .single-product .summary .product_meta .sku_wrapper,
  .single-product .summary .product_meta .sku{ order: 2 !important; }

  /* атрибути (обидва варіанти розмітки) */
  .single-product .summary .woocommerce-product-attributes,
  .single-product .summary table.shop_attributes{ order: 3 !important; }

  /* 2) Прибрати обрізання назви — дозволити повний перенос */
  .single-product .summary .product_title{
    display:block !important;          /* відміняємо -webkit-box */
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    max-height:none !important;
    line-height:1.25;
    margin-bottom:6px;
  }
}