/* ==========================================================================
   shop.css - продуктова карта, архив на магазина, сайдбар с филтри
   Префикси: .mg-card .mg-shop .mg-filters
   Дизайн: claude-design/02-kategoria (1440 и 390), картата - 01-nachalna,
   празното състояние - 09-prazni-sastoyaniya („Филтър без резултат").
   Копие на magia/makets/final/assets/shop.css (без .mg-maket-note - той е
   само за макета, И8).
   Специфичност: base.css има body.mg p / ul / h1-h4 (0,1,2) и
   body.mg a:any-link (0,2,1). Текстов елемент с margin/цвят в компонент
   се пише с body.mg отпред, линк - body.mg .mg-x a или body.mg a.mg-x.
   ========================================================================== */

/* ---------- Продуктова карта (всички страници) ---------- */
.mg-card{
  display:flex; flex-direction:column;
  background:var(--mg-white); border-radius:var(--mg-r-lg);
  overflow:hidden; box-shadow:var(--mg-sh-sm);
  transition:box-shadow .15s;
}
.mg-card:hover{ box-shadow:var(--mg-sh-lg); }
/* рамката на снимката: 4:5 на пастелен фон (вижда се, докато снимката зарежда) */
.mg-card__media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--mg-p-pink-bg); }
.mg-card:nth-child(4n+2) .mg-card__media{ background:var(--mg-p-teal-bg); }
.mg-card:nth-child(4n+3) .mg-card__media{ background:var(--mg-p-purple-bg); }
.mg-card:nth-child(4n+4) .mg-card__media{ background:var(--mg-p-yellow-bg); }
body.mg .mg-card__media img{ width:100%; height:100%; object-fit:cover; }
.mg-card__badge{ position:absolute; top:12px; left:12px; z-index:2; }
.mg-card__body{ display:flex; flex-direction:column; gap:9px; flex:1 1 auto; padding:18px; }
body.mg .mg-card__eyebrow{
  margin:0; font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mg-teal);
}
body.mg .mg-card__title{ margin:0; font-size:21px; line-height:1.25; text-wrap:pretty; }
body.mg .mg-card__title a{ color:var(--mg-ink); text-decoration:none; }
body.mg .mg-card__title a:hover{ color:var(--mg-ink); text-decoration:none; }
body.mg .mg-card__price{
  margin:0; font-family:var(--mg-font-head); font-size:22px; font-weight:700; line-height:1.3;
  color:var(--mg-pink);
}
.mg-card__price del{ color:var(--mg-meta); font-size:.8em; margin-right:8px; font-weight:400; }
.mg-card__price ins{ text-decoration:none; color:var(--mg-pink); }
.mg-card__foot{ margin-top:auto; }
/* бутонът на картата: 15px 700, min 46px (дизайн 01/02) */
body.mg .mg-card__foot .mg-btn{
  width:100%; min-height:46px; padding:13px 16px;
  font-size:15px; font-weight:700; text-align:center;
}
/* вторичен бутон („Виж повече", вариативен продукт) - бяло с рамка #FF8FBF */
body.mg .mg-card__foot .mg-btn--ghost{ border-color:var(--mg-p-pink); color:var(--mg-pink-text); }
body.mg .mg-card__foot .mg-btn--ghost:hover{ background:var(--mg-p-pink-bg); border-color:var(--mg-p-pink); color:var(--mg-pink-text); }
/* B5.7: „Виж Повече" на картата на албума.
   Плъгинът wc-customer-image-upload подменя бутона с
   `<a class="button view-product">` - без класовете на темата излизаше като
   гол текстов линк. Тук получава вида на `.mg-btn.mg-btn--sm.mg-btn--ghost`
   заедно с размерите от `.mg-card__foot .mg-btn` (селекторът е (0,4,2)). */
body.mg .mg-card__foot a.button.view-product{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:46px; margin-top:auto; padding:13px 16px;
  font-family:var(--mg-font-body); font-size:15px; font-weight:700; line-height:1.2;
  text-align:center; text-decoration:none; cursor:pointer;
  color:var(--mg-pink-text); background:var(--mg-white);
  border:2px solid var(--mg-p-pink); border-radius:var(--mg-r-pill);
  text-transform:none;
  transition:background-color .15s, color .15s, border-color .15s;
}
body.mg .mg-card__foot a.button.view-product:hover{
  background:var(--mg-p-pink-bg); border-color:var(--mg-p-pink); color:var(--mg-pink-text); text-decoration:none;
}

/* изчерпан продукт: „Извести ме при наличност" (сив, по дизайна) */
.mg-card--out{ opacity:.9; }
body.mg .mg-card--out .mg-card__price{ color:var(--mg-meta); }
body.mg .mg-card__foot .mg-card__notify{ background:#B8A6AC; border-color:#B8A6AC; color:var(--mg-white); }
body.mg .mg-card__foot .mg-card__notify:hover{ background:#A08E95; border-color:#A08E95; color:var(--mg-white); }

/* ---------- Архив: розов блок с H1 ---------- */
.mg-shop__head{ padding-block:6px 36px; }
.mg-shop__intro{
  display:flex; flex-direction:column; gap:12px;
  padding:32px 36px; border-radius:20px; background:var(--mg-p-pink-bg);
}
body.mg .mg-shop__title{ margin:0; font-size:clamp(28px,1.2rem + 2.2vw,44px); line-height:1.1; color:#4A1230; }
body.mg .mg-shop__desc{ margin:0; font-size:18px; line-height:1.6; color:#6B2545; }
body.mg .mg-shop__count{ margin:0; font-size:15px; font-weight:600; line-height:1.4; color:var(--mg-pink-text); }

/* ---------- Архив: сайдбар + колона ---------- */
.mg-shop__body{ padding-bottom:var(--mg-section); }
.mg-shop__layout{ display:grid; grid-template-columns:268px 1fr; gap:36px; align-items:start; }
.mg-shop__layout > *{ min-width:0; }
.mg-shop__main{ display:flex; flex-direction:column; gap:22px; }

/* лента: брояч + сортиране (бяла „хапка") */
.mg-shop__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  padding:12px 22px; border-radius:var(--mg-r-pill);
  background:var(--mg-white); box-shadow:var(--mg-sh-sm);
}
body.mg .mg-shop__result{ margin:0; font-size:16px; line-height:1.5; color:var(--mg-text); }
.mg-shop__result strong{ color:var(--mg-ink); font-weight:700; }
.mg-shop__sort{ display:flex; align-items:center; gap:10px; }
.mg-shop__sort label{ font-size:15px; color:var(--mg-meta); white-space:nowrap; }
body.mg .mg-shop__sort .woocommerce-ordering{ margin:0; float:none; display:flex; align-items:center; }
body.mg .mg-shop__sort select{
  width:auto; min-width:220px; min-height:44px; padding:10px 44px 10px 18px;
  font-size:15px; font-weight:600; color:var(--mg-ink);
  background-color:var(--mg-cream); border-radius:var(--mg-r-pill);
}

/* мрежа */
.mg-shop__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--mg-gap); align-items:stretch; }
.mg-shop__grid--4{ grid-template-columns:repeat(4,1fr); }

/* пагинация: ← 1 2 → + „Страница 1 от 2" */
.mg-shop__pager{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-top:10px; }
.mg-shop__pager .mg-pager{ margin-top:0; justify-content:flex-start; }
body.mg .mg-shop__pager .mg-shop__prev{ color:#E0C4BB; cursor:default; }
body.mg .mg-shop__page{ margin:0; font-size:15px; color:var(--mg-meta); }

/* ---------- Сайдбар: три бели карти ---------- */
.mg-filters{ display:flex; flex-direction:column; gap:14px; }
.mg-filters__block{
  display:flex; flex-direction:column; gap:12px;
  padding:22px; border-radius:var(--mg-r-lg);
  background:var(--mg-white); box-shadow:var(--mg-sh-sm);
}
.mg-filters__block--price{ gap:16px; }
/* надзаглавие 13px (и на faq.html) - body.mg бие body.mg h2 */
body.mg .mg-filters__title{
  font-family:var(--mg-font-body); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mg-teal);
  line-height:1.4; margin:0 0 14px;
}
body.mg .mg-filters__block > .mg-filters__title{ margin:0; }

body.mg .mg-filters__list{ display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0; }
body.mg .mg-filters__list li{ margin:0; }
body.mg .mg-filters__list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px; padding:11px 16px; border-radius:var(--mg-r-pill);
  font-size:16px; line-height:1.3; color:var(--mg-text); text-decoration:none;
  transition:background-color .15s, color .15s;
}
body.mg .mg-filters__list a:hover{ background:var(--mg-powder); color:var(--mg-ink); text-decoration:none; }
body.mg .mg-filters__list a.is-active{ background:var(--mg-p-pink-bg); color:var(--mg-pink-text); font-weight:700; }
.mg-filters__count{ flex:0 0 auto; color:var(--mg-meta); }
.mg-filters__list .is-active .mg-filters__count{ color:inherit; }

/* Филтър по цена = маркъпът на WC_Widget_Price_Filter след jQuery UI.
   position:absolute на плъзгача и дръжките го изисква jQuery UI (left:% inline) -
   това е контрола, не подредба на съдържание. */
.mg-filters .price_slider_wrapper{ display:flex; flex-direction:column; gap:12px; }
.mg-filters .price_slider{
  position:relative; height:5px; margin:8px 10px 0;
  border-radius:var(--mg-r-pill); background:var(--mg-powder);
}
.mg-filters .ui-slider-range{ position:absolute; top:0; bottom:0; z-index:1; border-radius:var(--mg-r-pill); background:var(--mg-pink); }
.mg-filters .ui-slider-handle{
  position:absolute; top:-8px; z-index:2; width:20px; height:20px; margin-left:-10px;
  border-radius:50%; background:var(--mg-white); border:3px solid var(--mg-pink);
  cursor:ew-resize; touch-action:none;
}
.mg-filters .ui-slider-handle:focus-visible{ outline:3px solid var(--mg-yellow); outline-offset:3px; }
.mg-filters .price_slider_amount{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
/* „Цена: <from> — <to>" на Woo → две стойности в краищата, без „Цена:" и тирето
   (текстовите възли са анонимни flex елементи с нулев размер; .from бута .to вдясно) */
.mg-filters .price_label{ order:-1; align-self:stretch; display:flex; font-size:0; }
.mg-filters .price_label span{ font-size:15px; line-height:1.4; color:var(--mg-text); }
.mg-filters .price_label .from{ margin-right:auto; }
/* бутонът „Филтрирай" на Woo - дискретен (дизайнът е без бутон) */
.mg-filters .price_slider_amount .button{
  min-height:40px; padding:8px 16px;
  font-family:var(--mg-font-body); font-size:14px; font-weight:700; line-height:1.2;
  color:var(--mg-text); background:transparent; border:1px solid #F0CFC4; border-radius:var(--mg-r-pill);
  cursor:pointer; transition:color .15s, border-color .15s;
}
.mg-filters .price_slider_amount .button:hover{ color:var(--mg-pink-text); border-color:var(--mg-pink); }

/* карта „Имате въпрос" (и на faq.html) */
.mg-filters__help{
  display:flex; flex-direction:column; gap:10px;
  padding:22px; border-radius:var(--mg-r-lg); background:var(--mg-p-teal-bg);
}
body.mg .mg-filters__help h3{ margin:0; font-family:var(--mg-font-head); font-size:20px; line-height:1.3; color:#0E2F2D; }
body.mg .mg-filters__help p{ margin:0; font-size:15px; line-height:1.55; color:#14514D; }
body.mg .mg-filters__help .mg-btn{ width:100%; min-height:46px; margin-top:4px; padding:13px; font-size:15px; font-weight:700; text-align:center; }

/* мобилният бутон „Филтри · N" (правило R3) - скрит на десктоп */
.mg-filters--mobile{ display:none; }

/* ---------- Празно състояние „Филтър без резултат" (#prazno) ---------- */
.mg-shop__empty{
  display:flex; flex-direction:column; gap:18px;
  padding:28px; border-radius:var(--mg-r-lg);
  background:var(--mg-white); box-shadow:var(--mg-sh-md);
}
.mg-shop__bar--soft{ background:var(--mg-cream); box-shadow:none; }
body.mg .mg-shop__bar--soft .mg-shop__sort select{ background-color:var(--mg-white); }
.mg-shop__chips{ display:flex; gap:10px; flex-wrap:wrap; }
body.mg a.mg-shop__chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:10px 16px; border-radius:var(--mg-r-pill);
  font-size:14px; font-weight:700; line-height:1.2; color:var(--mg-white); background:var(--mg-pink);
  text-decoration:none;
}
body.mg a.mg-shop__chip:hover{ background:var(--mg-pink-hover); color:var(--mg-white); text-decoration:none; }
body.mg a.mg-shop__clear{
  display:inline-flex; align-items:center;
  min-height:44px; padding:10px 16px; border-radius:var(--mg-r-pill);
  font-size:14px; font-weight:700; line-height:1.2; color:var(--mg-text);
  background:transparent; border:1px solid #F0CFC4; text-decoration:none;
}
body.mg a.mg-shop__clear:hover{ color:var(--mg-pink-text); border-color:var(--mg-pink); text-decoration:none; }
.mg-shop__empty .mg-empty{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-block:16px; }
.mg-shop__empty .mg-empty__icon{ width:64px; height:64px; margin:0; background:var(--mg-p-teal-bg); color:var(--mg-teal-text); }
body.mg .mg-shop__empty-title{ margin:0; font-size:26px; line-height:1.2; }
body.mg .mg-shop__empty-text{ margin:0; font-size:17px; line-height:1.6; color:var(--mg-text); }
.mg-shop__empty .mg-empty__actions{ margin-top:4px; }
body.mg .mg-shop__empty .mg-empty__actions .mg-btn{ min-height:50px; padding:13px 26px; font-weight:700; }
body.mg .mg-shop__empty .mg-empty__actions .mg-btn--ghost{ border-color:var(--mg-p-pink); }

/* „Може да ви харесат" - 3 малки карти */
.mg-shop__like{ display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px solid var(--mg-powder); }
body.mg .mg-shop__like-title{ margin:0; font-family:var(--mg-font-body); font-size:15px; font-weight:700; line-height:1.4; color:var(--mg-ink); }
.mg-shop__like-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
body.mg a.mg-shop__like-item{
  display:flex; flex-direction:column;
  border-radius:14px; background:var(--mg-cream); color:var(--mg-ink); text-decoration:none;
}
body.mg a.mg-shop__like-item:hover{ text-decoration:none; box-shadow:var(--mg-sh-md); }
.mg-shop__like-media{ display:block; aspect-ratio:4/5; overflow:hidden; border-radius:14px 14px 0 0; background:var(--mg-p-pink-bg); }
.mg-shop__like-item:nth-child(3n+2) .mg-shop__like-media{ background:var(--mg-p-teal-bg); }
.mg-shop__like-item:nth-child(3n+3) .mg-shop__like-media{ background:var(--mg-p-yellow-bg); }
body.mg .mg-shop__like-media img{ width:100%; height:100%; object-fit:cover; }
.mg-shop__like-body{ display:flex; flex-direction:column; gap:4px; padding:12px; }
.mg-shop__like-name{ font-size:15px; font-weight:600; line-height:1.3; color:var(--mg-ink); }
.mg-shop__like-price{ font-family:var(--mg-font-head); font-size:17px; font-weight:700; line-height:1.3; color:var(--mg-pink); }

/* ==========================================================================
   Таблет: сайдбарът става бутон „Филтри · N" над мрежата (R3)
   ========================================================================== */
@media (max-width:1023px){
  .mg-shop__layout{ grid-template-columns:1fr; gap:0; }
  .mg-shop__side{ display:none; }
  .mg-shop__grid,.mg-shop__grid--4{ grid-template-columns:repeat(3,1fr); }

  /* лентата: „Филтри · N" | „Подреди" в един ред, на пълна ширина */
  .mg-shop__main > .mg-shop__bar{
    display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10px;
    margin-inline:calc(var(--mg-gutter) * -1); padding:10px var(--mg-gutter);
    border-radius:0; background:var(--mg-cream);
    border-bottom:1px solid var(--mg-line); box-shadow:0 2px 10px rgba(51,38,43,.05);
  }
  .mg-shop__main > .mg-shop__bar > .mg-filters--mobile{ display:block; grid-column:1 / -1; grid-row:1; }
  .mg-shop__main > .mg-shop__bar > .mg-shop__sort{ grid-column:2; grid-row:1; }
  .mg-shop__main > .mg-shop__bar > .mg-shop__result{ grid-column:1 / -1; }
  .mg-shop__main > .mg-shop__bar .mg-shop__sort label{ display:none; }
  body.mg .mg-shop__main > .mg-shop__bar .mg-shop__sort select{
    min-width:0; width:100%; min-height:46px; padding:10px 40px 10px 16px;
    color:var(--mg-text); background-color:var(--mg-white);
  }
  /* summary = левата половина (дясната е под select-а) */
  .mg-filters--mobile > summary{
    display:flex; align-items:center; justify-content:center;
    margin-inline-end:calc(50% + 5px); min-height:46px; padding:12px;
    border-radius:var(--mg-r-pill); background:var(--mg-pink); color:var(--mg-white);
    font-size:15px; font-weight:700; line-height:1.2; cursor:pointer; list-style:none;
    transition:background-color .15s;
  }
  .mg-filters--mobile > summary:hover{ background:var(--mg-pink-hover); }
  .mg-filters--mobile > summary::-webkit-details-marker{ display:none; }
  .mg-filters--mobile > .mg-filters{ padding-top:14px; }
}

/* ==========================================================================
   Мобилно - дизайн 02-kategoria-390 (R3)
   ========================================================================== */
@media (max-width:767px){
  /* карта: радиус 16, без сянка, без надзаглавие, 16/18/13px */
  .mg-card{ border-radius:var(--mg-r-md); box-shadow:none; }
  .mg-card:hover{ box-shadow:var(--mg-sh-md); }
  .mg-card__badge{ top:8px; left:8px; padding:5px 9px; font-size:11px; }
  .mg-card__body{ gap:7px; padding:12px; }
  body.mg .mg-card__eyebrow{ display:none; }
  body.mg .mg-card__title{ font-size:16px; }
  body.mg .mg-card__price{ font-size:18px; }
  body.mg .mg-card__foot .mg-btn,
  body.mg .mg-card__foot a.button.view-product{ min-height:44px; padding:12px 8px; font-size:13px; }

  .mg-shop__grid,.mg-shop__grid--4{ grid-template-columns:repeat(2,1fr); gap:12px; }

  .mg-shop__head{ padding-block:0 18px; }
  .mg-shop__intro{ gap:8px; padding:20px; border-radius:var(--mg-r-md); }
  body.mg .mg-shop__title{ font-size:28px; line-height:1.12; }
  body.mg .mg-shop__desc{ font-size:15px; line-height:1.55; }
  body.mg .mg-shop__count{ font-size:14px; }
  .mg-shop__count-tail{ display:none; }

  .mg-shop__body{ padding-bottom:28px; }
  .mg-shop__main{ gap:16px; }
  .mg-shop__main > .mg-shop__bar > .mg-shop__result{ display:none; }

  .mg-shop__pager{ justify-content:center; padding-top:0; }
  .mg-shop__pager .mg-pager{ justify-content:center; }
  body.mg .mg-shop__pager .mg-shop__prev,
  body.mg .mg-shop__page{ display:none; }

  .mg-shop__empty{ gap:16px; padding:18px 16px; }
  .mg-shop__bar--soft{ border-radius:var(--mg-r-md); padding:12px 16px; }
  .mg-shop__bar--soft .mg-shop__sort{ flex:1 1 100%; }
  body.mg .mg-shop__bar--soft .mg-shop__sort select{ min-width:0; width:100%; }
  body.mg .mg-shop__empty-title{ font-size:22px; }
  body.mg .mg-shop__empty-text{ font-size:16px; }
  .mg-shop__empty .mg-empty__actions .mg-btn{ flex:1 1 100%; }
  .mg-shop__like-grid{ gap:8px; }
  .mg-shop__like-body{ padding:8px; }
  .mg-shop__like-name{ font-size:13px; }
  .mg-shop__like-price{ font-size:15px; }
}