/* ============================================================================
   product.css — продуктова страница ( нов фронт-енд )

   Зарежда се само за controller == 'product', през $styles в
   application/controllers/product.php ( същия механизъм като searching.css ).

   Ползва токените от assets/css/global.css — тук НЕ се дефинират цветове и
   разстояния на ръка.

   Секции:
     1.  Трохи
     2.  Скелет на страницата
     3.  Галерия            ( .fd-pgal )
     4.  Глава на продукта  ( .fd-pd__h1 / __meta / __price / __resume )
     5.  Конфигуратор       ( .fd-pcfg / .fd-chip )
     5.1 Резервен списък с варианти ( .fd-vlist / .fd-vrow )
     5.2 Заявка за разновидност     ( .fd-pref )
     6.  Количество + количка
     7.  Лента "доверие"
     8.  Съдържание и спецификация ( .fd-pd__more / .fd-pspec )
     9.  Състояние при зареждане
    10.  Responsive
   ========================================================================= */


/* --- 1. Трохи ------------------------------------------------------------ */
.fd-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding-block:var(--fd-space-3);
  font-size:var(--fd-fs-small);color:var(--fd-text-muted);
}
.fd-crumbs a{color:var(--fd-text-muted)}
.fd-crumbs a:hover{color:var(--fd-leaf)}
.fd-crumbs svg{width:12px;height:12px;flex:none;opacity:.5}
.fd-crumbs span{color:var(--fd-text);font-weight:600}


/* --- 2. Скелет ----------------------------------------------------------- */
.fd-pd{padding-block:0 var(--fd-space-6)}
/* Галерията е ограничената колона, а информацията взима остатъка — така
   конфигураторът има място да разгъне чиповете си на един ред.
   Ширина на галерията: най-малкото от 600px и 40% от съдържанието.
   При wrap 1600px това дава 600 / 912 ( преди беше 947 / 565 ).
   Формулата е responsive сама по себе си, затова по-долу няма override. */
.fd-pd__grid{
  display:grid;
  grid-template-columns:minmax(0,min(600px,40%)) minmax(0,1fr);
  gap:var(--fd-space-6);
  align-items:start;
}
/* min-width:0 и на двете колони — без него автоматичният минимален размер на
   грид елемента е min-content и лентата с тъмбнейли ( .fd-pgal__thumbs ,
   9 x 66px + гапове = 658px ) разпъва трака отвъд viewport-а. */
.fd-pd__media{position:sticky;top:var(--fd-space-4);min-width:0}
.fd-pd__panel{display:flex;flex-direction:column;gap:var(--fd-space-4);min-width:0}


/* --- 3. Галерия ---------------------------------------------------------- */
.fd-pgal{display:flex;flex-direction:column;gap:var(--fd-space-3)}

.fd-pgal__stage{
  position:relative;
  border:1px solid var(--fd-border);border-radius:var(--fd-radius-lg);
  background:var(--fd-mist);overflow:hidden;
}
.fd-pgal__link{display:block;position:relative;aspect-ratio:1/1}
.fd-pgal__img{width:100%;height:100%;object-fit:contain;padding:var(--fd-space-4)}

.fd-pgal__zoom{
  position:absolute;right:14px;bottom:14px;
  width:40px;height:40px;border-radius:50%;
  background:var(--fd-paper);color:var(--fd-leaf);
  display:grid;place-items:center;
  box-shadow:0 8px 20px -10px rgba(4,21,25,.5);
  transition:transform .18s var(--fd-ease);
}
.fd-pgal__zoom svg{width:18px;height:18px}
.fd-pgal__link:hover .fd-pgal__zoom{transform:scale(1.08)}

.fd-pgal__thumbs{
  display:flex;gap:var(--fd-space-2);
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;
}
/* display:flex по-горе бие браузърното [hidden]{display:none} — при продукт
   без допълнителни снимки лентата трябва да остане скрита */
.fd-pgal__thumbs[hidden]{display:none}
.fd-pgal__thumbs li{flex:none}
.fd-pgal__thumb{
  width:78px;height:78px;padding:6px;
  border:1.5px solid var(--fd-border);border-radius:var(--fd-radius);
  background:var(--fd-paper);
  display:grid;place-items:center;
  transition:border-color .16s,box-shadow .16s;
}
.fd-pgal__thumb img{width:100%;height:100%;object-fit:contain}
.fd-pgal__thumb:hover{border-color:var(--fd-leaf-light)}
.fd-pgal__thumb.is-on{border-color:var(--fd-leaf);box-shadow:0 0 0 1px var(--fd-leaf)}

.fd-pgal__video{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fd-fs-small);font-weight:700;color:var(--fd-leaf);
}
.fd-pgal__video svg{width:20px;height:20px}


/* --- 4. Глава на продукта ------------------------------------------------ */
.fd-pd__head{display:flex;flex-direction:column;gap:var(--fd-space-3)}

.fd-pd__h1{
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);
  line-height:var(--fd-lh-tight);letter-spacing:-.01em;color:var(--fd-text);
}
.fd-pd__h2{
  font-size:var(--fd-fs-h3);font-weight:500;
  color:var(--fd-text-muted);line-height:1.35;
}

.fd-pd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fd-space-3)}
.fd-pd__code{font-size:var(--fd-fs-small);color:var(--fd-text-muted)}
.fd-pd__code b{color:var(--fd-text);font-weight:700}

.fd-pd__stock{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.fd-pd__stock svg{width:13px;height:13px}
.fd-pd__stock.is-in{background:rgba(122,191,24,.16);color:var(--fd-leaf)}
.fd-pd__stock.is-out{background:rgba(4,21,25,.07);color:var(--fd-text-muted)}

.fd-pd__price{
  margin:0;
  font-size:clamp(1.7rem,1.4rem + 1.2vw,2.3rem);
  font-weight:800;color:var(--fd-leaf);line-height:1;
}
.fd-pd__resume{color:var(--fd-text-muted);font-size:14.5px;line-height:1.55}
.fd-pd__resume p{margin:0 0 8px}
.fd-pd__resume :last-child{margin-bottom:0}


/* --- 5. Конфигуратор ----------------------------------------------------- */
.fd-pcfg{
  display:flex;flex-direction:column;gap:var(--fd-space-4);
  padding:var(--fd-space-4);
  border:1px solid var(--fd-border);border-radius:var(--fd-radius-lg);
  background:var(--fd-surface);
}
.fd-pcfg__head{display:flex;flex-direction:column;gap:2px}
.fd-pcfg__h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-text)}
.fd-pcfg__hint{margin:0;font-size:12.5px;color:var(--fd-text-muted)}

.fd-pcfg__axis{display:flex;flex-direction:column;gap:var(--fd-space-2)}
.fd-pcfg__label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--fd-text-muted);
}
.fd-pcfg__label b{color:var(--fd-text);font-weight:700}

.fd-pcfg__opts{display:flex;flex-wrap:wrap;gap:var(--fd-space-2)}

/* --- чип ( една стойност на атрибут ) ---
   Чипът е за КЪСА стойност. max-width + min-width:0 + ellipsis са предпазен
   колан: и да дойде дълга стойност от базата, тя се реже, вместо да разпъне
   реда отвъд viewport-а. Цяло продуктово име не се слага тук - за това е
   .fd-vrow от 5.1. */
.fd-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  max-width:100%;
  min-height:40px;padding:6px 14px;
  border:1.5px solid var(--fd-border);border-radius:999px;
  background:var(--fd-paper);
  font-size:13px;font-weight:600;color:var(--fd-text);
  transition:border-color .16s,background .16s,color .16s;
}
.fd-chip:hover{border-color:var(--fd-leaf-light)}

.fd-chip__sw{
  width:26px;height:26px;border-radius:50%;
  object-fit:cover;flex:none;
  border:1px solid var(--fd-border);
}
.fd-chip__txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fd-chip__ok{width:0;height:14px;flex:none;opacity:0;transition:width .16s var(--fd-ease),opacity .16s}
.fd-chip.is-on{border-color:var(--fd-leaf);background:rgba(69,114,6,.07);color:var(--fd-leaf)}
.fd-chip.is-on .fd-chip__ok{width:14px;opacity:1}

/* --- недостъпна комбинация: маркира се, но НЕ се заключва --- */
.fd-chip.is-off{color:var(--fd-txt-fade);border-style:dashed;border-color:#dfe6d8;background-color:#f5f5f5;}
.fd-chip.is-off .fd-chip__txt{
  background-image:linear-gradient(to bottom right,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%);
  background-image:none;
}
.fd-chip.is-off .fd-chip__sw{opacity:.55}
.fd-chip.is-off:hover{color:var(--fd-text);border-color:var(--fd-leaf-light)}


/* --- 5.1 Резервен списък с варианти --------------------------------------
   Рисува се от {else} клона на public/product/section/configurator.htm -
   когато вариантите не се различават по нито един атрибут и няма оси, по
   които да се сглоби чипов избор. Носителят е цялото име на продукта, а не
   къса стойност, затова формата е РЕД, а не чип.

   Три неща държат хоризонталния скрол невъзможен:
     1. minmax(0,1fr) на колоната с името - без нулевия минимум автоматичният
        минимален размер на грид елемента е min-content и тракът се разпъва
        колкото целия текст ( точно това чупеше .fd-chip тук );
     2. overflow-wrap:anywhere - дълга непрекъсваема дума ( код, латиница )
        се пренася вместо да излезе навън;
     3. цената е на СОБСТВЕН ред под името до 560px - не се бори с него за
        място на тесен екран.
   ------------------------------------------------------------------------ */
.fd-vlist{display:flex;flex-direction:column;gap:6px;min-width:0}

.fd-vrow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "ph name ok"
    "ph price ok";
  align-items:center;
  column-gap:var(--fd-space-3);row-gap:2px;
  padding:10px var(--fd-space-3);
  border:1px solid var(--fd-border);border-radius:var(--fd-radius);
  background:var(--fd-paper);
  color:var(--fd-text);
  transition:border-color .16s,background .16s;
}
.fd-vrow:hover{border-color:var(--fd-leaf-light);background:var(--fd-surface)}

.fd-vrow__ph{
  grid-area:ph;
  width:48px;height:48px;flex:none;
  object-fit:cover;
  border:1px solid var(--fd-border);border-radius:8px;
  background:var(--fd-mist);
}
.fd-vrow__ph--void{background:var(--fd-mist)}

/* Името се пренася и се реже на два реда - редът е с предвидима височина,
   а списъкът остава четим и при 20 варианта. */
.fd-vrow__name{
  grid-area:name;
  min-width:0;
  font-size:var(--fd-fs-small);font-weight:600;line-height:1.35;
  white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fd-vrow__price{
  grid-area:price;
  font-size:var(--fd-fs-small);font-weight:800;color:var(--fd-leaf);
  white-space:nowrap;
}

.fd-vrow__ok{grid-area:ok;width:0;height:16px;flex:none;opacity:0;transition:width .16s var(--fd-ease),opacity .16s}

/* Текущият вариант: ляв акцент + чекче. Рамката не се пипа, за да не скача
   геометрията на реда при смяна. */
.fd-vrow.is-on{
  border-color:var(--fd-leaf);
  background:rgba(69,114,6,.06);
  box-shadow:inset 3px 0 0 var(--fd-leaf);
}
.fd-vrow.is-on .fd-vrow__name{color:var(--fd-leaf)}
.fd-vrow.is-on .fd-vrow__ok{width:16px;opacity:1}

/* От 560px нагоре има място за един ред: цената отива вдясно. */
@media (min-width:560px){
  .fd-vrow{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"ph name price ok";
    row-gap:0;
  }
}


/* --- 5.2 Заявка за разновидност ( НЕсвързан продукт ) ---------------------
   Показва се на мястото на конфигуратора, когато продуктът няма свързани
   продукти. Двата блока никога не са едновременно на страницата.
   Разгъваем панел; вътре чипове ( до $max_chip_values стойности ) или
   падащо меню. Контракт: docs/product-preferences.md
   ------------------------------------------------------------------------ */
.fd-pref{
  border:1px solid var(--fd-border);border-radius:var(--fd-radius-lg);
  background:var(--fd-surface);
  overflow:hidden;
}

/* --- заглавие / превключвател --- */
.fd-pref__toggle{
  align-items:center;gap:var(--fd-space-3);
  width:100%;padding:var(--fd-space-4);
  text-align:left;color:var(--fd-text);
  transition:background .16s;
}
.fd-pref__toggle:hover{background:var(--fd-mist)}
.fd-pref__ico{width:20px;height:20px;flex:none;color:var(--fd-leaf)}

.fd-pref__title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.fd-pref__title b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.fd-pref__title em{
  font-style:normal;font-size:12.5px;font-weight:600;color:var(--fd-leaf);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* без избор редът просто не заема място */
.fd-pref__title em:empty{display:none}

.fd-pref__chev{
  width:16px;height:16px;flex:none;color:var(--fd-text-muted);
  transition:transform .18s var(--fd-ease);
}
.fd-pref__toggle[aria-expanded="true"] .fd-pref__chev{transform:rotate(180deg)}

/* Панелът се рисува ОТВОРЕН и БЕЗ бутон - свиването е работа на product.js,
   който слага .is-ready. Така при изключен JavaScript няма бутон, който да не
   работи, а тялото остава видимо. */
.fd-pref__toggle{display:none}
.fd-pref.is-ready .fd-pref__toggle{display:flex}

/* --- тяло --- */
.fd-pref__body{
  display:flex;flex-direction:column;gap:var(--fd-space-4);
  padding:var(--fd-space-4);
}
.fd-pref.is-ready .fd-pref__body{border-top:1px solid var(--fd-border)}

.fd-pref__note{margin:0;font-size:12.5px;color:var(--fd-text-muted)}

/* --- един атрибут --- */
.fd-pref__row{display:flex;flex-direction:column;gap:var(--fd-space-2)}
.fd-pref__label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--fd-text-muted);
}
.fd-pref__label b{color:var(--fd-text);font-weight:700}

.fd-pref__opts{display:flex;flex-wrap:wrap;gap:var(--fd-space-2)}

/* Чиповете са <button>, а не <a> - тук никъде не се навигира. Нищо не се
   пре-дефинира: .fd-chip от секция 5 дава вида, а button{font:inherit;
   background:none;border:0;cursor:pointer} от global.css дава основата. */

/* --- обобщение --- */
.fd-pref__foot{
  display:flex;align-items:baseline;gap:var(--fd-space-3);flex-wrap:wrap;
  padding-top:var(--fd-space-3);
  border-top:1px dashed var(--fd-border);
}
.fd-pref__foot.is-empty{display:none}

.fd-pref__chosen{margin:0;flex:1 1 auto;font-size:13px;color:var(--fd-text-muted)}
.fd-pref__chosen b{color:var(--fd-text);font-weight:700}

.fd-pref__clear{
  font-size:12.5px;font-weight:600;color:var(--fd-text-muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .16s;
}
.fd-pref__clear:hover{color:var(--fd-leaf)}


/* --- 6. Количество + количка --------------------------------------------- */
.fd-pd__buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fd-space-3)}

.fd-qty{
  display:inline-flex;align-items:center;gap:0;
  height:50px;padding:0 5px;
  border:1.5px solid var(--fd-border);border-radius:999px;
  background:var(--fd-paper);overflow:hidden;
  transition:border-color .16s,box-shadow .16s;
}
/* фокус в полето — същият език като .fd-input в global.css */
.fd-qty:focus-within{
  border-color:var(--fd-sprout);
  box-shadow:0 0 0 3px rgba(122,191,24,.22);
}

/* Бутоните са КРЪГЛИ, а не запълващи целия ъгъл на пилюлата — така hover-ът е
   ясно очертан жест, а не правоъгълник, отрязан от border-radius на родителя. */
.fd-qty__btn{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:18px;line-height:1;font-weight:700;
  color:var(--fd-text-muted);
  transition:background .16s,color .16s,transform .12s var(--fd-ease);
}
.fd-qty__btn:hover{background:var(--fd-mist);color:var(--fd-leaf)}
.fd-qty__btn:active{background:#e3ecd6;color:var(--fd-leaf);transform:scale(.9)}
.fd-qty__btn:focus-visible{outline:2px solid var(--fd-sprout);outline-offset:-2px}
.fd-qty__btn[disabled]{opacity:.35;pointer-events:none}
.fd-qty__in{
  width:52px;height:100%;border:0;text-align:center;
  font:inherit;font-weight:700;color:var(--fd-text);
  background:transparent;-moz-appearance:textfield;
}
.fd-qty__in::-webkit-outer-spin-button,
.fd-qty__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* фокусът се показва от пилюлата ( .fd-qty:focus-within ), а не от полето —
   иначе се получава правоъгълен контур в кръгла рамка */
.fd-qty__in:focus,
.fd-qty__in:focus-visible{outline:none}

/* Защитна мрежа: легаси core.js ( в js/jquery.min.js ) прави на window load
   $("input[name='quantity']").TouchSpin(...) и обвива полето в Bootstrap 3
   маркъп. Затова полето #fdQty НЯМА name="quantity" — а ако някой го върне,
   тези два реда пазят пилюлата да не се срути. */
.fd-qty .bootstrap-touchspin{display:contents}
.fd-qty .input-group-btn-vertical,
.fd-qty .bootstrap-touchspin-up,
.fd-qty .bootstrap-touchspin-down{display:none}

.fd-pd__cart{flex:1 1 220px}
.fd-pd__cart[disabled]{opacity:.45;cursor:not-allowed}
.fd-pd__cart[disabled]:hover{background:var(--fd-leaf)}


/* --- 7. Лента "доверие" -------------------------------------------------- */
.fd-pd__trust{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.fd-pd__trust li{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--fd-text-muted);
}
.fd-pd__trust svg{width:18px;height:18px;flex:none;color:var(--fd-leaf)}


/* --- 8. Съдържание и спецификация ---------------------------------------- */
.fd-pd__more{background:var(--fd-surface);padding-block:var(--fd-space-6)}
.fd-pd__block{margin-bottom:var(--fd-space-6)}
.fd-pd__block:last-child{margin-bottom:0}
.fd-pd__block.is-empty{display:none}
.fd-pd__blockh{
  font-size:var(--fd-fs-h3);font-weight:800;color:var(--fd-text);
  margin-bottom:var(--fd-space-4);
}

/* текст от редактора */
.fd-editor{/*max-width:var(--fd-read);*/color:var(--fd-text);font-size:15px;line-height:1.7}
.fd-editor h2,.fd-editor h3,.fd-editor h4{margin:var(--fd-space-4) 0 var(--fd-space-2);font-weight:700}
.fd-editor p{margin:0 0 var(--fd-space-3)}
.fd-editor ul,.fd-editor ol{margin:0 0 var(--fd-space-3);padding-left:20px;list-style:revert}
.fd-editor li{margin-bottom:4px}
.fd-editor a{color:var(--fd-leaf);text-decoration:underline}
.fd-editor img{border-radius:var(--fd-radius);margin-block:var(--fd-space-3)}
.fd-editor table{width:100%;border-collapse:collapse;margin-bottom:var(--fd-space-3)}
.fd-editor th,.fd-editor td{border:1px solid var(--fd-border);padding:8px 10px;text-align:left}

/* --- спецификация: карти --- */
.fd-pspec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fd-space-3)}
.fd-pspec__item{
  display:flex;align-items:center;gap:var(--fd-space-3);
  padding:var(--fd-space-3) var(--fd-space-4);
  border:1px solid var(--fd-border);border-radius:var(--fd-radius);
  background:var(--fd-paper);
}
.fd-pspec__ico{
  width:44px;height:44px;flex:none;border-radius:12px;
  background:var(--fd-mist);color:var(--fd-leaf);
  display:grid;place-items:center;
}
.fd-pspec__ico svg{width:22px;height:22px}
.fd-pspec__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.fd-pspec__label{font-size:12px;color:var(--fd-text-muted)}
.fd-pspec__value{font-size:14px;font-weight:700;color:var(--fd-text);word-break:break-word}


/* --- 9. Състояние при зареждане ------------------------------------------ */
.fd-pd.is-loading [data-pd-gallery-slot],
.fd-pd.is-loading [data-pd-head]{opacity:.45;transition:opacity .18s}
.fd-pd.is-loading{cursor:progress}


/* --- 10. Responsive ------------------------------------------------------ */
@media (max-width:1200px){
  .fd-pd__grid{gap:var(--fd-space-5)}
  .fd-pspec{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  /* minmax(0,1fr) , а не 1fr — виж бележката при .fd-pd__media */
  .fd-pd__grid{grid-template-columns:minmax(0,1fr);gap:var(--fd-space-4)}
  .fd-pd__media{position:static}
  .fd-pgal__link{aspect-ratio:4/3}
  .fd-pspec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .fd-pd__buy{gap:var(--fd-space-2)}
  .fd-pd__cart{flex:1 1 100%}
  .fd-qty{width:100%;justify-content:space-between;padding:0 6px}
  .fd-qty__in{flex:1}
  .fd-pgal__thumb{width:66px;height:66px}
  .fd-pcfg{padding:var(--fd-space-3)}
  .fd-pspec{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .fd-pgal__zoom,.fd-chip,.fd-chip__ok,.fd-qty__btn{transition:none}
  .fd-pgal__link:hover .fd-pgal__zoom{transform:none}
}