/* =============================================================================
 * wp-product.css — карточка товара WP в стиле лендинга (гибрид twinfly.space)
 * Стандартный шаблон WooCommerce (Elementor Pro WooCommerce Builder отключён),
 * блоки добавляет mu-plugin twinfly-product-page.php.
 * Токены (--primary-teal, --accent-red, --font-heading…) — из wp-chrome.css.
 * ========================================================================== */

/* Контент начинается вплотную к фикс-шапке — даём воздух сверху */
body.single-product #main.site-main {
  padding-top: var(--space-6);
  display: block;
}

/* ===== Контейнер карточки ===== */
body.single-product .woocommerce-breadcrumb,
body.single-product div.product,
body.single-product .twf-product-faq {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

body.single-product div.product {
  font-family: var(--font-heading);
  color: var(--black);
}

/* ===== Хлебные крошки =====
   Штатные .woocommerce-breadcrumb тема схлопывает в 0 — прячем совсем,
   mu-plugin выводит свои .twf-crumbs (стиль как shop-hero__crumbs лендинга). */
body.single-product .woocommerce-breadcrumb { display: none; }

body.single-product .twf-crumbs {
  max-width: var(--container-max);
  margin: 0 auto var(--space-5);
  padding-inline: var(--container-padding);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--gray-text);
}
body.single-product .twf-crumbs a {
  color: var(--accent-red);
  text-decoration: none;
}
body.single-product .twf-crumbs a:hover,
body.single-product .twf-crumbs a:focus-visible { text-decoration: underline; outline: none; }
body.single-product .twf-crumbs__sep,
body.single-product .twf-crumbs__current { color: var(--gray-text); }

/* ===== Заголовок ===== */
body.single-product h1.product_title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 1.5rem + 1vw, 34px);
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 var(--space-4);
}

/* ===== Краткое описание и примечание «После оплаты…» ===== */
body.single-product .woocommerce-product-details__short-description {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--black);
}
.twf-product-note {
  margin: var(--space-4) 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gray-text);
}
.twf-product-note strong { color: var(--black); }

/* ===== Цена ===== */
body.single-product .summary .price {
  display: block;
  margin: var(--space-5) 0 var(--space-4);
}
body.single-product .summary .price .woocommerce-Price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 1.6rem + 0.8vw, 34px);
  color: var(--black);
}

/* ===== Форма покупки: количество + кнопка ===== */
body.single-product form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
body.single-product form.cart .quantity input.qty {
  height: 50px;
  width: 72px;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-button);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: var(--black);
  background: var(--white);
}
body.single-product form.cart .button,
body.single-product form.cart button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 32px;
  background: var(--accent-red);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-btn);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
body.single-product form.cart .button:hover,
body.single-product form.cart button.single_add_to_cart_button:hover {
  background: var(--dark-red);
  color: var(--white);
}
body.single-product form.cart .button:active { transform: scale(0.97); }

/* ===== Вкладки (Описание) ===== */
body.single-product .woocommerce-tabs {
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  padding-inline: var(--container-padding);
}
body.single-product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  border-bottom: 2px solid var(--light-gray);
}
body.single-product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--gray-text);
  text-decoration: none;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary-teal);
  box-shadow: inset 0 -2px 0 var(--primary-teal);
}
body.single-product .woocommerce-tabs .panel {
  padding: var(--space-5) 0;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--black);
}
body.single-product .woocommerce-tabs .panel > h2:first-of-type { display: none; }

/* ===== FAQ (аккордеон mu-plugin) ===== */
.twf-product-faq {
  margin: var(--space-10) auto var(--space-12);
}
.twf-product-faq__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 1.3rem + 0.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--black);
  margin: 0 0 var(--space-5);
}
.twf-product-faq__item {
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-small);
  margin-bottom: var(--space-3);
  background: var(--white);
  overflow: hidden;
}
.twf-product-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--dark-teal);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.twf-product-faq__item summary::-webkit-details-marker { display: none; }
.twf-product-faq__item summary::after {
  content: '';
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.25s ease;
}
.twf-product-faq__item[open] summary::after { transform: rotate(180deg); }
.twf-product-faq__item[open] summary { color: var(--primary-teal); }
.twf-product-faq__body {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--gray-text);
}

/* ===== Мобильная вёрстка ===== */
@media (max-width: 767px) {
  body.single-product form.cart .button,
  body.single-product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
  }
}
