/* ==========================================================================
   product.css - продуктова страница: галерия, купуваща колона, карта „Защо…",
   брояч, плочки доверие, акордеон-карта, видео 9:16, табове, свързани,
   лепкава лента (под 768px). Ползва се и от album.html и kolichka.html (.mg-stepper).
   Префикси: .mg-product .mg-gallery .mg-stepper .mg-tiles3 .mg-tabs .mg-video
   Дизайн: claude-design/03-produkt (1440 + 390), 06-album (1440 + 390).

   Копие на magia/makets/final/assets/product.css (без .mg-maket-note и
   .mg-video__ph-* - те са само за макета, И8) + мостът към живия Woo маркъп.
   Woo шаблоните не се презаписват, затова елементите, които нямат класа на
   макета, влизат в СЪЩИТЕ правила като втори селектор („= …" в коментара).
   Всички живи селектори са от design/live/produkt-dom.md и album-dom.md.
   Капан B0.2: `body.mg a:any-link` е (0,2,1) - всеки селектор за <a> тук носи
   `body.mg` отпред; същото за заглавните етикети срещу `body.mg h2/h3/p`.
   ========================================================================== */

.mg-product{ padding-block:clamp(4px,.8vw,10px) clamp(32px,5vw,72px); }

/* Грид на div.product: вляво галерия → табове, вдясно купуващата колона (видеото е в summary за всички).
   Третият ред е 1fr - поема височината на дясната колона, за да няма дупка под галерията. */
.mg-product__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"gallery summary" "tabs summary" "video summary";
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(24px,4vw,56px); row-gap:34px; align-items:start;
}
/* всяко друго пряко дете на div.product (upsell блок, span.onsale) - на цял ред (И8) */
.mg-product__top > *{ grid-column:1 / -1; }
.mg-product__top > .mg-gallery,
.mg-product__top > .woocommerce-product-gallery{ grid-area:gallery; } /* = div.woocommerce-product-gallery.images */
.mg-product__top > .mg-product__summary,
.mg-product__top > .summary{ grid-area:summary; }             /* = div.summary.entry-summary */
.mg-product__top > .mg-tabs,
.mg-product__top > .woocommerce-tabs{ grid-area:tabs; }       /* = div.woocommerce-tabs.wc-tabs-wrapper */
.mg-product__top > .mg-video{ grid-area:video; }

/* ---------- Галерия ---------- */
.mg-gallery{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:start; min-width:0; }
.mg-gallery > *{ min-width:0; }
.mg-gallery__thumbs,
.mg-gallery .flex-control-thumbs{ display:flex; flex-direction:column; gap:12px; max-width:100%; }
.mg-gallery__thumb,
.mg-gallery .flex-control-thumbs li{
  position:relative; display:block; padding:0; cursor:pointer;
  border:2px solid var(--mg-line); border-radius:var(--mg-r-sm);
  overflow:hidden; background:var(--mg-powder);
}
.mg-gallery__thumb img,
.mg-gallery .flex-control-thumbs li img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.mg-gallery__thumb.is-active{ border-color:var(--mg-pink); }
/* без JS класът `is-active` го няма - flexslider маркира миниатюрата с img.flex-active.
   Отделно правило: браузър без :has() не бива да къса горния списък. */
.mg-gallery .flex-control-thumbs li:has(img.flex-active){ border-color:var(--mg-pink); }
.mg-gallery__more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(51,38,43,.55); color:var(--mg-white); font-size:13px; font-weight:700;
}
.mg-gallery__main,
.mg-gallery > .flex-viewport,
.mg-gallery > .woocommerce-product-gallery__wrapper{  /* = главната снимка (със и без flexslider) */
  position:relative; border-radius:20px; overflow:hidden;
  background:var(--mg-p-pink-bg); box-shadow:var(--mg-sh-md);
}
.mg-gallery__main img,
.mg-gallery .woocommerce-product-gallery__image img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.mg-gallery__badge{
  position:absolute; top:16px; left:16px; z-index:2;
  padding:8px 14px; background:var(--mg-pink); color:var(--mg-white);
}

/* ---------- Купуваща колона ---------- */
.mg-product__summary,
.mg-product__top > .summary{ display:flex; flex-direction:column; gap:18px; min-width:0; }
body.mg .mg-product__summary > *,
body.mg .mg-product__top > .summary > *{ margin:0; }
body.mg .mg-product__title,
body.mg .mg-product__top .product_title{ font-size:clamp(28px,1.2rem + 2.2vw,46px); line-height:1.1; margin:0; }
.mg-product__rating,
.mg-product__top .woocommerce-product-rating{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--mg-text); }

.mg-product__pricerow{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; }
body.mg .mg-product__price,
body.mg .mg-product__pricerow > .price{                        /* = p.price на Woo */
  margin:0; font-family:var(--mg-font-head); font-size:clamp(32px,1.4rem + 1.2vw,40px);
  font-weight:700; line-height:1; color:var(--mg-pink);
}
.mg-product__price del,
.mg-product__pricerow > .price del{ color:var(--mg-meta); font-weight:400; font-size:.6em; margin-right:10px; }
.mg-product__price ins,
.mg-product__pricerow > .price ins{ text-decoration:none; color:var(--mg-pink-text); }
/* чип наличност / срок (не е бутон - затова отделен клас, без hover на .mg-chip) */
.mg-product__tag{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:var(--mg-r-pill);
  font-size:14px; font-weight:700; line-height:1.2;
}
.mg-product__tag--stock{ background:var(--mg-p-teal-bg); color:var(--mg-teal-text); }
.mg-product__tag--out{ background:var(--mg-line); color:var(--mg-ink); }
.mg-product__tag--make{ background:var(--mg-p-yellow-bg); color:#6B4400; }

/* кратко описание (div.woocommerce-product-details__short-description) */
.mg-product__excerpt,
.mg-product__top .woocommerce-product-details__short-description{ font-size:clamp(16px,.9rem + .4vw,18px); line-height:1.65; color:var(--mg-text); }
body.mg .mg-product__excerpt > p,
body.mg .mg-product__top .woocommerce-product-details__short-description > p{ margin:0 0 18px; }
body.mg .mg-product__excerpt > :last-child,
body.mg .mg-product__top .woocommerce-product-details__short-description > :last-child{ margin-bottom:0; }

/* списък в краткото описание (E1.2: „Пристига в подаръчна опаковка с:") */
body.mg .mg-product__top .woocommerce-product-details__short-description > ul{ margin:0 0 18px; padding:0 0 0 22px; list-style:disc; }
body.mg .mg-product__top .woocommerce-product-details__short-description > ul li{ margin:0 0 4px; }

/* карта „Защо ще обикнете…" - сглобява се от редовете с ✅ в краткото описание */
.mg-product__why{
  display:flex; flex-direction:column; gap:14px; padding:22px 24px;
  background:var(--mg-white); border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm);
}
body.mg .mg-product__why-title{
  margin:0; font-family:var(--mg-font-head); font-size:20px; font-weight:700; line-height:1.3; color:var(--mg-ink);
}
body.mg .mg-product__checks{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
.mg-product__checks li{ position:relative; margin:0; padding-left:34px; font-size:16px; line-height:1.55; color:var(--mg-ink); }
.mg-product__checks li::before{
  content:'\2713'; position:absolute; left:0; top:2px;
  width:22px; height:22px; border-radius:50%;
  background:var(--mg-p-teal-bg); color:var(--mg-teal-text);
  font-size:13px; font-weight:700; line-height:22px; text-align:center;
}
body.mg .mg-product__why-foot{ margin:0; font-size:16px; line-height:1.6; color:var(--mg-text); }
.mg-product__checks + .mg-product__why-foot{ padding-top:14px; border-top:1px solid var(--mg-powder); }

/* ---------- Вариации ---------- */
.mg-product__variations{ margin-bottom:20px; }
.mg-product__variations .mg-field{ margin-bottom:14px; }

/* ---------- Форма и брояч ---------- */
.mg-product__form,
.mg-product__top form.cart{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* B6.3: clearfix-ът на Woo (`form.cart::before{content:" "; display:table}`) е
   флекс елемент и изяждаше едно разстояние - броячът тръгваше на 14px навътре. */
body.mg .mg-product__top.product form.cart::before,
body.mg .mg-product__top.product form.cart::after{ content:none; display:none; }
body.mg .mg-product__form .mg-btn{
  flex:1 1 280px; min-width:0; min-height:58px; padding:16px 32px;
  font-size:18px; font-weight:700;
}

/* Брояч - хапче с кръгли бутони (дизайн 03). Количката го пребоядисва контекстно
   (.mg-cartpage__row .mg-stepper в cart-checkout.css - дизайн 04).
   Класът `mg-stepper` и двата бутона идват от product.js върху div.quantity. */
.mg-stepper{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:6px;
  background:var(--mg-white); border:1px solid var(--mg-line); border-radius:var(--mg-r-pill);
}
.mg-stepper button{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:var(--mg-cream); color:var(--mg-pink-text); cursor:pointer;
  font-family:var(--mg-font-body); font-size:20px; font-weight:700; line-height:1;
}
.mg-stepper button:hover{ background:var(--mg-p-pink-bg); }
/* base.css има body.mg input[type=number] (0,2,2) - затова същата специфичност тук */
body.mg .mg-stepper input{
  flex:0 0 auto; width:36px; height:44px; min-height:0; padding:0;
  border:0; border-radius:0; background:transparent; text-align:center;
  font-size:18px; font-weight:700; color:var(--mg-ink); -moz-appearance:textfield;
}
.mg-stepper input::-webkit-outer-spin-button,
.mg-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* B6.3: `.woocommerce .quantity .qty{width:3.631em}` (0,3,0) бие
   `body.mg .mg-stepper input` (0,2,2) и полето ставаше 65px - броячът 179px.
   Само на продукта: броячът в количката е в cart-checkout.css (B6.1). */
body.mg .mg-product__top .mg-stepper input.qty{ width:36px; }

/* ---------- Три плочки доверие (цвят по реда: розово, тюркоазено, лилаво) ---------- */
.mg-tiles3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mg-tiles3__item{ display:flex; flex-direction:column; gap:3px; padding:16px; border-radius:14px; }
body.mg .mg-tiles3__title{ margin:0; font-family:var(--mg-font-body); font-size:16px; font-weight:700; line-height:1.3; }
body.mg .mg-tiles3__text{ margin:0; font-size:14px; line-height:1.45; }
.mg-tiles3__item:nth-child(3n+1){ background:var(--mg-p-pink-bg); color:#6B2545; }
.mg-tiles3__item:nth-child(3n+1) .mg-tiles3__title{ color:#7A1E49; }
.mg-tiles3__item:nth-child(3n+2){ background:var(--mg-p-teal-bg); color:#14514D; }
.mg-tiles3__item:nth-child(3n+2) .mg-tiles3__title{ color:var(--mg-teal-text); }
.mg-tiles3__item:nth-child(3n+3){ background:var(--mg-p-purple-bg); color:#4A2E85; }
.mg-tiles3__item:nth-child(3n+3) .mg-tiles3__title{ color:#4A2E85; }

/* ---------- Акордеон като бяла карта („Доставка и плащане", акордеоните на албума и на 390) ---------- */
.mg-product__acc{ background:var(--mg-white); border:0; border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm); }
.mg-product__acc > summary{
  min-height:56px; padding:16px 22px;
  font-family:var(--mg-font-body); font-size:16px; font-weight:600; line-height:1.35; color:var(--mg-ink);
}
.mg-product__acc > summary::after{ font-size:22px; color:var(--mg-meta); }
.mg-product__acc[open] > summary{ border-bottom:1px solid var(--mg-powder); }
.mg-product__acc[open] > summary::after{ color:var(--mg-pink); }
.mg-product__acc > .mg-acc__body{ padding:16px 22px 20px; font-size:16px; line-height:1.7; color:var(--mg-text); }
.mg-product__accs{ display:flex; flex-direction:column; gap:10px; }

/* ---------- Видео 9:16 ---------- */
.mg-video{ min-width:0; }
.mg-video__frame{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  max-width:400px; aspect-ratio:9/16; border-radius:20px;
  background:repeating-linear-gradient(135deg,#FBE2D8 0 10px,#FFF1EA 10px 20px);
}
.mg-video__frame video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ---------- Табове (вляво под галерията) ---------- */
.mg-tabs,
.mg-product__top > .woocommerce-tabs{ min-width:0; }
.mg-tabs__nav,
.mg-product__top .wc-tabs{                                     /* = ul.tabs.wc-tabs */
  display:flex; gap:6px; max-width:100%; overflow-x:auto; border-bottom:1px solid var(--mg-line);
}
body.mg .mg-product__top .wc-tabs{ margin:0; padding:0; list-style:none; }
body.mg .mg-product__top .wc-tabs li{ margin:0; }
.mg-tabs__nav button,
body.mg .mg-product__top .wc-tabs li a{                        /* линк (0,3,3) - бие body.mg a:any-link (0,2,1) */
  display:block; min-height:48px; padding:12px 16px; cursor:pointer; white-space:nowrap;
  border:0; border-bottom:3px solid transparent; background:transparent;
  font-family:var(--mg-font-body); font-size:16px; font-weight:600; color:var(--mg-meta); text-decoration:none;
}
.mg-tabs__nav button:hover,
body.mg .mg-product__top .wc-tabs li a:hover{ color:var(--mg-pink-text); text-decoration:none; }
.mg-tabs__nav button.is-active,
body.mg .mg-product__top .wc-tabs li.active a{ color:var(--mg-pink); font-weight:700; border-bottom-color:var(--mg-pink); }
.mg-tabs__panel,
.mg-product__top .woocommerce-Tabs-panel{ padding-top:22px; font-size:17px; line-height:1.75; }
body.mg .mg-tabs__panel h2,
body.mg .mg-product__top .woocommerce-Tabs-panel h2{ font-size:28px; line-height:1.2; margin-top:0; }
.mg-tabs__acc{ display:none; }

/* ---------- Свързани продукти (фон на пълна ширина) ---------- */
/* E5 Р52: въздух между края на продукта и секцията */
.mg-product__related{ margin-top:clamp(32px,4vw,56px); padding-block:72px; background:var(--mg-powder); }
body.mg .mg-product__related-title{ margin:0 0 28px; font-size:clamp(24px,1rem + 1.6vw,36px); line-height:1.15; }

/* ---------- Отзив на продукт (само при реални Woo отзиви) ---------- */
.mg-product__review{ padding:20px 0; border-bottom:1px solid var(--mg-line); }
.mg-product__review:last-child{ border-bottom:0; }
body.mg .mg-product__review h4{ font-family:var(--mg-font-body); font-size:16px; margin:0 0 4px; }

/* ---------- Лепкава лента (само под 768px) ---------- */
.mg-product__sticky{ display:none; }

/* ==========================================================================
   Албум (div.product получава клас mg-product--album): снимки 3:4,
   акордеоните и видеото в лявата колона.
   Живо класът е върху СЪЩИЯ елемент като .mg-product__top (woocommerce_post_class),
   затова първото правило има и вариант без интервал.
   ========================================================================== */
.mg-product--album.mg-product__top,
.mg-product--album .mg-product__top{ column-gap:clamp(24px,3.4vw,48px); row-gap:22px; }
.mg-product--album .mg-gallery{ grid-template-columns:84px minmax(0,1fr); }
.mg-product--album .mg-gallery__thumb img,
.mg-product--album .mg-gallery__main img,
.mg-product--album .mg-gallery .flex-control-thumbs li img,
.mg-product--album .mg-gallery .woocommerce-product-gallery__image img{ aspect-ratio:3/4; }
.mg-product--album .mg-gallery__main,
.mg-product--album .mg-gallery > .flex-viewport,
.mg-product--album .mg-gallery > .woocommerce-product-gallery__wrapper{ background:var(--mg-p-yellow-bg); }
.mg-product--album .mg-product__acc > summary{ padding-block:18px; font-size:17px; }
.mg-product--album .mg-product__acc > .mg-acc__body{ padding:18px 22px 22px; font-size:17px; line-height:1.8; color:var(--mg-ink); }

/* ==========================================================================
   Таблет
   ========================================================================== */
@media (max-width:1023px){
  .mg-gallery,
  .mg-product--album .mg-gallery{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .mg-gallery__main,
  .mg-gallery > .flex-viewport,
  .mg-gallery > .woocommerce-product-gallery__wrapper{ order:-1; }
  .mg-gallery__thumbs,
  .mg-gallery .flex-control-thumbs{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .mg-gallery__thumb,
  .mg-gallery .flex-control-thumbs li{ flex:0 0 84px; scroll-snap-align:start; }
  .mg-tiles3{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Мобилно (дизайн 03-produkt-390 / 06-album-390). Купуващата колона става
   display:contents, за да се подредят видеото и акордеоните както в дизайна.
   ========================================================================== */
@media (max-width:767px){
  .mg-product{ padding-top:0; }
  .mg-product__top{ display:flex; flex-direction:column; align-items:stretch; gap:14px; }
  .mg-product__summary,
  .mg-product__top > .summary{ display:contents; }
  .mg-product__delivery{ order:1; }

  .mg-gallery__main,
  .mg-gallery > .flex-viewport,
  .mg-gallery > .woocommerce-product-gallery__wrapper{ margin-inline:calc(var(--mg-gutter) * -1); border-radius:0; box-shadow:none; }
  .mg-gallery__thumbs,
  .mg-gallery .flex-control-thumbs{ gap:8px; }
  .mg-gallery__thumb,
  .mg-gallery .flex-control-thumbs li{ flex:0 0 62px; border-radius:10px; }
  .mg-gallery__badge{ top:12px; left:12px; padding:6px 11px; font-size:12px; }

  body.mg .mg-product__title,
  body.mg .mg-product__top .product_title{ font-size:28px; line-height:1.15; }
  body.mg .mg-product__price,
  body.mg .mg-product__pricerow > .price{ font-size:32px; }
  .mg-product__tag{ padding:7px 12px; font-size:13px; }
  .mg-product__excerpt,
  .mg-product__top .woocommerce-product-details__short-description{ font-size:16px; line-height:1.6; }
  body.mg .mg-product__excerpt > p,
  body.mg .mg-product__top .woocommerce-product-details__short-description > p{ margin-bottom:14px; }
  body.mg .mg-product__top .woocommerce-product-details__short-description > ul{ margin-bottom:14px; }
  .mg-product__why{ gap:12px; padding:18px; border-radius:var(--mg-r-md); }
  body.mg .mg-product__why-title{ font-size:18px; }
  body.mg .mg-product__checks{ gap:12px; }
  .mg-product__checks li{ padding-left:30px; font-size:15px; }
  .mg-product__checks li::before{ width:20px; height:20px; font-size:12px; line-height:20px; }
  body.mg .mg-product__why-foot{ font-size:15px; }
  .mg-product__checks + .mg-product__why-foot{ padding-top:12px; }

  .mg-product__form,
  .mg-product__top form.cart{ flex-wrap:nowrap; gap:10px; }
  body.mg .mg-product__form .mg-btn{ flex:1 1 auto; min-height:52px; padding:12px; font-size:16px; }
  .mg-stepper{ gap:4px; padding:5px; }
  .mg-stepper button{ width:40px; height:40px; font-size:18px; }
  body.mg .mg-stepper input{ width:28px; height:40px; font-size:17px; }
  body.mg .mg-product__top .mg-stepper input.qty{ width:28px; }

  .mg-tiles3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mg-tiles3__item{ padding:12px; border-radius:var(--mg-r-sm); }
  body.mg .mg-tiles3__title{ font-size:14px; line-height:1.4; }
  body.mg .mg-tiles3__text{ font-size:13px; }
  .mg-tiles3__item:nth-child(3){ display:none; }

  .mg-product__acc{ border-radius:14px; }
  .mg-product__acc > summary{ min-height:52px; padding:14px 16px; }
  .mg-product__acc > .mg-acc__body{ padding:14px 16px 16px; font-size:15px; }

  .mg-video{ margin-top:6px; }
  .mg-video__frame{ max-width:none; margin-inline:calc(var(--mg-gutter) * -1); gap:12px; border-radius:16px; }

  .mg-tabs__nav,
  .mg-tabs__panel{ display:none; }
  /* живо: лентата с табовете се крие САМО когато product.js е построил акордеона
     (без JS панелите остават на мястото си и текстът не изчезва) */
  .mg-product__top .woocommerce-tabs.is-acc .wc-tabs{ display:none; }
  .mg-tabs__acc{ display:flex; flex-direction:column; gap:10px; }

  .mg-product__related{ margin-top:24px; padding-block:24px 28px; }
  body.mg .mg-product__related-title{ margin-bottom:16px; }

  .mg-product__sticky{
    position:sticky; bottom:0; z-index:50;
    display:flex; flex-direction:column; gap:8px; padding:12px var(--mg-gutter);
    background:var(--mg-white); border-top:1px solid var(--mg-line);
    box-shadow:0 -6px 20px rgba(51,38,43,.10);
  }
  .mg-product__sticky-row{ display:flex; align-items:center; gap:12px; }
  .mg-product__sticky-price{
    flex:0 0 auto; font-family:var(--mg-font-head); font-size:20px; font-weight:700; line-height:1.1; color:var(--mg-pink);
  }
  body.mg .mg-product__sticky .mg-btn{ flex:1 1 auto; min-width:0; min-height:50px; padding:12px 16px; font-weight:700; }
  body.mg .mg-product__sticky .mg-btn[disabled]{ background:#B8A6AC; border-color:#B8A6AC; color:var(--mg-white); }
  body.mg .mg-product__sticky-hint{ margin:0; font-size:13px; line-height:1.4; text-align:center; color:var(--mg-text); }

  /* албум 390: акордеоните между „Как да подготвиш" и качването, видеото най-отдолу, без плочки */
  .mg-product--album .mg-tabs,
  .mg-product--album .mg-product__accs{ order:1; }
  .mg-product--album .mg-album__form,
  .mg-product--album form.cart,
  .mg-product--album .mg-album__form ~ *,
  .mg-product--album form.cart ~ *{ order:2; }
  .mg-product--album .mg-video{ order:3; }
  .mg-product--album .mg-tiles3{ display:none; }
  body.mg .mg-product--album .mg-product__title,
  body.mg .mg-product--album .product_title{ font-size:27px; }
  body.mg .mg-product--album .mg-product__price,
  body.mg .mg-product--album .mg-product__pricerow > .price{ font-size:30px; }
  .mg-product--album .mg-product__acc > summary{ padding-block:14px; font-size:16px; }
  .mg-product--album .mg-product__acc > .mg-acc__body{ padding:14px 16px 16px; font-size:15px; line-height:1.75; }
}

/* ==========================================================================
   Живият Woo маркъп: подредба и вид на елементите, които нямат двойник в
   макета, и неутрализиране на woocommerce.css. Селекторите са от
   design/live/produkt-dom.md и album-dom.md.
   Специфичност: woocommerce.css пише с `.woocommerce div.product …` (до 0,4,3),
   затова тукашните правила тръгват с `body.mg .mg-product__top.product` -
   четири класа. Правила с удивителна (important) няма в целия файл.
   ========================================================================== */

/* известията на Woo са извън .mg-container (woocommerce.php не обвива продукта) */
.mg-product > .woocommerce-notices-wrapper{
  width:100%; max-width:calc(var(--mg-container) + var(--mg-gutter) * 2);
  margin-inline:auto; padding-inline:var(--mg-gutter);
}

/* ---------- Галерия ---------- */
/* flexslider слага .flex-viewport и ol.flex-control-thumbs като преки деца на
   галерията, а редът им е обратен на макета - затова изрично място в грида */
.mg-gallery > .flex-control-thumbs{ grid-column:1; grid-row:1; }
.mg-gallery > .flex-viewport,
.mg-gallery > .woocommerce-product-gallery__wrapper{ grid-column:2; grid-row:1; }
body.mg .mg-product__top.product .mg-gallery{ margin:0; }
body.mg .mg-product__top.product .flex-control-thumbs{ margin:0; padding:0; list-style:none; overflow:visible; }
body.mg .mg-product__top.product .flex-control-thumbs li{ width:auto; float:none; margin:0; list-style:none; }

/* B5.5: двете колони на продукта.
   `woocommerce-layout.css` ги плава с `.woocommerce div.product div.images`
   и `div.summary` (0,3,2) - `width:48%; float:left|right` - и гридът горе
   остава с две колони по 275px вместо по 572px. Тези два селектора са (0,4,1). */
body.mg .mg-product__top.product .woocommerce-product-gallery,
body.mg .mg-product__top.product .summary{ width:auto; float:none; margin:0; }
/* миниатюрите: `.woocommerce div.product div.images .flex-control-thumbs li`
   (0,4,3) дава `width:25%` и ги смалява до 22px - тук (0,5,3) */
body.mg .mg-product__top.product div.images .flex-control-thumbs li{ width:auto; float:none; }

/* B5.5: баджът върху главната снимка (`woo-product.php`) */
body.mg .mg-product__top.product .woocommerce-product-gallery__image{ position:relative; }

/* B5.5: „В наличност" на Woo не се показва - наличността е чипът до цената
   (макет `produkt.html`). „Изчерпан" (`p.stock.out-of-stock`) остава (R5). */
body.mg .mg-product__top.product .summary p.stock.in-stock{ display:none; }
body.mg .mg-product__top.product .flex-control-thumbs li img{ margin:0; opacity:1; cursor:pointer; }
/* правилото „5 миниатюри, петата с +N" (produkt-dom.md р.3) - броячът е от product.js */
body.mg .mg-product__top.product .flex-control-thumbs li:nth-child(n+6){ display:none; }
/* „+N" разгъва миниатюрите (E5, Р53). Разрешено в PLAN.md: max-height върху списък със снимки. */
body.mg .mg-product__top.product .flex-control-thumbs.is-expanded li:nth-child(n+6){ display:block; }
body.mg .mg-product__top.product .flex-control-thumbs.is-expanded li{ flex-shrink:0; } /* E6: разгънатите не се свиват, колоната скролва */
body.mg .mg-product__top.product .flex-control-thumbs.is-expanded{
  max-height:var(--mg-thumbs-h, 600px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:4px;
}
/* атрибут без етикет (E5, Р54): редът на етикета пада */
body.mg .mg-product__top.product .variations th.label:has(> label:empty){ display:none; }
body.mg .mg-product__top.product .woocommerce-product-gallery__trigger{ z-index:3; text-decoration:none; }

/* span.onsale: единственото пряко дете на div.product без област в грида.
   Woo го прави position:absolute без позициониран родител - тук е в реда. */
body.mg .mg-product__top.product > .onsale{
  position:static; justify-self:start; margin:0;
  padding:6px 11px; border-radius:var(--mg-r-pill);
  background:var(--mg-pink); color:var(--mg-white);
  font-size:12px; font-weight:700; line-height:1.2;
}

/* ---------- Купуваща колона ---------- */
body.mg .mg-product__top.product > .summary{ margin:0; }
body.mg .mg-product__top.product .mg-product__pricerow > .price{
  color:var(--mg-pink); font-size:clamp(32px,1.4rem + 1.2vw,40px);
}
body.mg .mg-product__top.product .stock{ margin:0; font-size:16px; font-weight:600; color:var(--mg-meta); }

/* формата: без марджините на Woo; количеството е брояч чак след product.js */
body.mg .mg-product__top.product form.cart{ margin:0; }
body.mg .mg-product__top.product form.cart .quantity{ flex:0 0 auto; margin:0; }

/* бутонът „Добавяне в количката" не може да получи класа .mg-btn (шаблонът не се
   презаписва) - тук носи неговия вид от base.css */
body.mg .mg-product__top.product .single_add_to_cart_button,
body.mg .mg-product__top.product a.single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 280px; min-width:0; min-height:58px; padding:16px 32px;
  font-family:var(--mg-font-body); font-size:18px; font-weight:700; line-height:1.2;
  color:var(--mg-white); background:var(--mg-pink);
  border:2px solid var(--mg-pink); border-radius:var(--mg-r-pill);
  text-decoration:none; cursor:pointer; float:none;
  transition:background-color .15s, color .15s, box-shadow .15s;
}
body.mg .mg-product__top.product .single_add_to_cart_button:hover,
body.mg .mg-product__top.product a.single_add_to_cart_button:hover{
  background:var(--mg-pink-hover); border-color:var(--mg-pink-hover); color:var(--mg-white); text-decoration:none;
}
body.mg .mg-product__top.product .single_add_to_cart_button.disabled,
body.mg .mg-product__top.product .single_add_to_cart_button[disabled]{
  background:var(--mg-line); border-color:var(--mg-line); color:var(--mg-meta); cursor:not-allowed; opacity:1;
}

/* вариативен продукт: таблицата с вариациите е над реда с брояча и бутона */
body.mg .mg-product__top.product .variations_form{ display:block; }
body.mg .mg-product__top.product .variations{ width:100%; margin:0 0 18px; border-collapse:collapse; }
body.mg .mg-product__top.product .variations th,
body.mg .mg-product__top.product .variations td{ display:block; padding:0; border:0; text-align:left; }
body.mg .mg-product__top.product .variations th label{
  display:block; margin-bottom:6px; font-size:15px; font-weight:600; color:var(--mg-ink);
}
body.mg .mg-product__top.product .variations td{ margin-bottom:14px; }
body.mg .mg-product__top.product .reset_variations{ display:inline-block; margin-top:8px; font-size:14px; font-weight:600; }
body.mg .mg-product__top.product .woocommerce-variation-add-to-cart{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
body.mg .mg-product__top.product .woocommerce-variation-price{ margin-bottom:14px; font-size:20px; font-weight:700; color:var(--mg-pink); }

/* плочки с миниатюри за опциите на атрибут (E2, Р38-Р40).
   Разрешено в PLAN.md E2: position:absolute само за визуалното скриване на select-а;
   width/height 64px върху миниатюрата. */
.mg-swatches{ position:relative; }
body.mg .mg-product__top.product .variations .mg-swatches > select{
  position:absolute; left:0; top:0; width:1px; height:1px; min-width:0; min-height:0; margin:0; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); opacity:0; pointer-events:none;
}
.mg-swatches__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body.mg .mg-swatch{
  display:flex; align-items:center; gap:12px; margin:0; padding:8px 12px 8px 8px; text-align:left;
  background:var(--mg-white); border:2px solid var(--mg-line); border-radius:var(--mg-r-sm); box-shadow:none;
  font-family:var(--mg-font-body); font-size:14px; font-weight:600; line-height:1.3; color:var(--mg-ink);
  cursor:pointer; transition:border-color .15s, background .15s;
}
body.mg .mg-swatch:hover{ border-color:var(--mg-p-pink); }
body.mg .mg-swatch.is-active{ border-color:var(--mg-pink); background:var(--mg-p-pink-bg); }
body.mg .mg-swatch[disabled]{ opacity:.45; cursor:not-allowed; }
body.mg .mg-swatch:focus-visible{ outline:2px solid var(--mg-pink); outline-offset:2px; }
.mg-swatch__img{ flex:0 0 64px; width:64px; height:64px; object-fit:cover; border-radius:10px; }
.mg-swatch__name{ min-width:0; }
@media (max-width:767px){
  .mg-swatches__list{ grid-template-columns:1fr; gap:8px; }
  .mg-swatch__img{ flex-basis:56px; width:56px; height:56px; }
}

/* ---------- Табове ----------
   B6.3: стойностите са същите (`.mg-tabs__nav button` от макета), но пътят носи
   `.woocommerce-tabs ul.wc-tabs`. Без него правилата са (0,4,2) / (0,4,3) и губят
   от `.woocommerce div.product .woocommerce-tabs ul.tabs li` (0,4,3) и
   `… li a` (0,4,4) - затова табовете оставаха сивите кутийки на WooCommerce. */
body.mg .mg-product__top.product .woocommerce-tabs{ margin:0; padding:0; }
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs{
  margin:0; padding:0; list-style:none; overflow:auto hidden;
  background:transparent; border:0; border-radius:0;
}
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs::before,
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs::after{ content:none; border:0; }
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li{
  display:block; float:none; z-index:auto; margin:0; padding:0;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li::before,
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li::after{ content:none; border:0; box-shadow:none; }
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li a{
  display:block; min-height:48px; padding:12px 16px;
  background:transparent; border:0; border-bottom:3px solid transparent;
  font-family:var(--mg-font-body); font-size:16px; font-weight:600; color:var(--mg-meta);
  text-decoration:none; text-shadow:none;
}
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li a:hover{ color:var(--mg-pink-text); text-decoration:none; }
body.mg .mg-product__top.product .woocommerce-tabs ul.wc-tabs li.active a{ color:var(--mg-pink); font-weight:700; border-bottom-color:var(--mg-pink); }
body.mg .mg-product__top.product .woocommerce-Tabs-panel{ margin:0; }

/* акордеонът на 390: product.js мести панелите в details (Woo ги крие с .wc-tab) */
body.mg .mg-tabs__acc .mg-acc__body .wc-tab{ display:block; padding-top:0; }
body.mg .mg-tabs__acc .mg-acc__body > .woocommerce-Tabs-panel{ padding-top:0; }

/* таблицата в „Допълнителна информация" (product.js я обвива в .mg-table-wrap) */
body.mg .mg-product__top.product .shop_attributes{ width:100%; border-collapse:collapse; font-size:16px; }
body.mg .mg-product__top.product .shop_attributes th,
body.mg .mg-product__top.product .shop_attributes td{
  padding:10px 14px; border:1px solid var(--mg-line); text-align:left; font-style:normal;
}
body.mg .mg-product__top.product .shop_attributes th{ background:var(--mg-cream); font-weight:600; color:var(--mg-ink); }
body.mg .mg-product__top.product .shop_attributes p{ margin:0; }

/* ---------- Upsell (wpc-smart-upsell-funnel) и up-sells на Woo: само базата ---------- */
.mg-product .up-sells,
.mg-product .upsells{ margin-top:34px; }
body.mg .mg-product .up-sells > h2,
body.mg .mg-product .upsells > h2{ font-size:clamp(22px,1rem + 1.2vw,30px); margin:0 0 20px; }
body.mg .mg-product ul.products{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--mg-gap);
  margin:0; padding:0; list-style:none;
}
body.mg .mg-product ul.products > li.product{ width:auto; float:none; margin:0; }

/* ---------- Албумът: зоната за качване е над бутона (album-dom.md т.1) ----------
   Видът на самото качване е задача B2.2 (assets/css/album.css). */
body.mg .mg-product--album.product form.cart{ display:flex; flex-direction:column; align-items:stretch; gap:14px; }
body.mg .mg-product--album.product form.cart .wc-ciup-container{ order:-1; }

/* ---------- Отзиви (E17) ---------- */
body.mg .mg-reviews-box .commentlist{ list-style:none; margin:0 0 28px; padding:0; }
body.mg .mg-reviews-box .commentlist > li{ padding:18px 0; border-bottom:1px solid var(--mg-line); }
body.mg .mg-reviews-box .commentlist > li:last-child{ border-bottom:0; }
body.mg .mg-reviews-box .avatar{ display:none; }
body.mg .mg-reviews-box .comment-text{ margin:0; }
body.mg .mg-reviews-box .woocommerce-review__author{ font-family:var(--mg-font-body); font-weight:600; color:var(--mg-ink); }
body.mg .mg-reviews-box .woocommerce-review__published-date{ color:var(--mg-meta); font-size:14px; }
body.mg .mg-reviews-box p.stars a{ color:var(--mg-yellow); }
body.mg .mg-reviews-box__title{ font-size:22px; margin:0 0 16px; }
body.mg .mg-reviews-box__notice{ padding:14px 16px; border:1px solid var(--mg-line); margin:0 0 20px; }
body.mg .mg-reviews-box__empty{ color:var(--mg-meta); margin:0 0 24px; }
body.mg .mg-reviews-box__hp{ display:none; }
body.mg .mg-reviews-box input[type=text], body.mg .mg-reviews-box input[type=email], body.mg .mg-reviews-box select, body.mg .mg-reviews-box textarea{ width:100%; }
body.mg .mg-reviews-box .comment-form > p, body.mg .mg-reviews-box .comment-form-rating{ margin:0 0 16px; }
body.mg .mg-reviews-box .comment-form label{ display:block; margin-bottom:6px; font-weight:600; color:var(--mg-ink); }
/* woocommerce.css бие горните правила с id селектори:
   `#reviews #comments ol.commentlist li` (2,1,2) и `... li .comment-text` (2,2,2) дават кутия с рамка и отстъп 50 px;
   `.woocommerce #review_form #respond p` (2,1,1) дава 10 px между полетата;
   бутонът на формата (`.woocommerce #respond` + id на input-а, 2,1,1) бие `.mg-btn` (0,1,0) и е сив.
   Тук е (2,3,3) / (2,4,3) / (2,3,2) / (2,2,2) - стойностите на бутона са на `.mg-btn` от base.css. */
body.mg #reviews.mg-reviews-box #comments ol.commentlist > li{ margin:0; padding:18px 0; border:0; border-bottom:1px solid var(--mg-line); background:none; }
body.mg #reviews.mg-reviews-box #comments ol.commentlist > li:last-child{ border-bottom:0; }
body.mg #reviews.mg-reviews-box #comments ol.commentlist li .comment-text{ margin:0; padding:0; border:0; border-radius:0; }
body.mg .mg-reviews-box #review_form #respond .comment-form > p{ margin:0 0 16px; }
body.mg .mg-reviews-box #respond input#submit{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 28px;
  font-family:var(--mg-font-body); font-size:16px; font-weight:700; line-height:1.2;
  color:var(--mg-white); background:var(--mg-pink);
  border:2px solid var(--mg-pink); border-radius:var(--mg-r-pill);
  box-shadow:none; text-shadow:none; cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s;
}
body.mg .mg-reviews-box #respond input#submit:hover{ background:var(--mg-pink-hover); border-color:var(--mg-pink-hover); color:var(--mg-white); }

/* ==========================================================================
   Живият маркъп - таблет и мобилно (същите точки на пречупване като горе)
   ========================================================================== */
@media (max-width:1023px){
  body.mg .mg-product__top.product .flex-control-thumbs{ overflow:auto hidden; }
  body.mg .mg-product__top.product .flex-control-thumbs.is-expanded{ max-height:none; overflow:auto hidden; padding-right:0; }
  body.mg .mg-product__top.product .flex-control-thumbs li{ flex:0 0 84px; }
  body.mg .mg-product ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px){
  body.mg .mg-product__top.product .flex-control-thumbs li{ flex:0 0 62px; }
  body.mg .mg-product__top.product .single_add_to_cart_button,
  body.mg .mg-product__top.product a.single_add_to_cart_button{ flex:1 1 auto; min-height:52px; padding:12px; font-size:16px; }
  body.mg .mg-product ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}