/* Floréa — продуктовата страница на букетите: цвят на розите + декорация (inc/bouquet-options.php)
   и по-подредена дясна колона. 19.10 v2 — компактно: кръгчета за цветовете, редове за декорациите. */

/* снимката остава пред очите, докато човек избира (десктоп) */
@media (min-width:981px){
  .product-detail-grid > div:first-child{ position:sticky; top:110px; align-self:start; }
}

.fl-bq{ margin-bottom:22px; }
.fl-bq-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-bottom:10px; }
.fl-bq-title{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.fl-bq-chosen{ font-size:14px; font-weight:700; color:var(--text); }
.fl-bq-hint{ margin-left:auto; font-size:12px; color:var(--text-faint); }

/* цветовете — кръгчета */
.fl-bq-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-option .fl-bq-sw{ display:block; margin:0; position:relative; cursor:pointer; text-transform:none; letter-spacing:normal; }
.fl-bq-sw input{ position:absolute; opacity:0; pointer-events:none; }
.fl-bq-sw__img{ display:block; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff; border:1.5px solid var(--line); box-shadow:0 0 0 2px #fff inset; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.fl-bq-sw__img img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.15); }
.fl-bq-sw:hover .fl-bq-sw__img{ border-color:var(--pink-300); transform:translateY(-1px); }
.fl-bq-sw input:checked + .fl-bq-sw__img{ border-color:var(--pink-600); box-shadow:0 0 0 2px #fff inset, 0 0 0 2px var(--pink-600); }
.fl-bq-sw input:focus-visible + .fl-bq-sw__img{ outline:2px solid var(--pink-400); outline-offset:3px; }

/* декорациите — малки хоризонтални карти по две на ред */
.fl-bq-deco{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.pd-option .fl-bq-dc{ display:flex; align-items:center; gap:10px; margin:0; padding:7px 10px 7px 7px; position:relative;
  border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); cursor:pointer;
  text-transform:none; letter-spacing:normal; font-weight:400; transition:border-color .2s var(--ease), background .2s var(--ease); }
.fl-bq-dc:hover{ border-color:var(--pink-300); }
.fl-bq-dc input{ position:absolute; opacity:0; pointer-events:none; }
.fl-bq-dc__img{ flex:0 0 44px; width:44px; height:44px; border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.fl-bq-dc__img img{ display:block; width:100%; height:100%; object-fit:contain; }
.fl-bq-dc__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.fl-bq-dc__name{ font-size:13px; font-weight:600; line-height:1.25; color:var(--text); }
.fl-bq-dc__price{ font-size:12.5px; font-weight:700; color:var(--pink-600); }
.fl-bq-dc:has(input:checked){ border-color:var(--pink-600); background:var(--pink-50); }
.fl-bq-dc:has(input:checked)::after{ content:""; position:absolute; top:50%; right:10px; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  background:var(--pink-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.fl-bq-dc:has(input:checked) .fl-bq-dc__txt{ padding-right:22px; }
.fl-bq-dc:has(input:focus-visible){ outline:2px solid var(--pink-400); outline-offset:2px; }

/* общите добавки — свити по подразбиране, за да не дърпат вниманието */
.pd-addons-more{ margin-bottom:22px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); }
.pd-addons-more > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; cursor:pointer; font-size:14px; font-weight:600; color:var(--text); }
.pd-addons-more > summary::-webkit-details-marker{ display:none; }
.pd-addons-more > summary::after{ content:"+"; font-size:20px; line-height:1; color:var(--pink-600); }
.pd-addons-more[open] > summary::after{ content:"–"; }
.pd-addons-more > summary small{ font-weight:500; color:var(--text-faint); margin-left:6px; }
.pd-addons-more .pd-addons{ margin:0; padding:0 12px 12px; }
.pd-addons-more .pd-addons > label{ display:none; }

@media (max-width:560px){
  .fl-bq-sw__img{ width:42px; height:42px; }
  .fl-bq-swatches{ gap:7px; }
  .fl-bq-dc__name{ font-size:12.5px; }
}
@media (max-width:360px){ .fl-bq-deco{ grid-template-columns:1fr; } }
.fl-bq-sw .screen-reader-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:560px){ .pd-addons-more > summary small{ display:none; } }

/* „Добави към подаръка“ — истински продукти (inc/extras.php) */
.fl-ex-tabs{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.fl-ex-tab{ padding:7px 14px; border:1.5px solid var(--line); border-radius:var(--pill); background:var(--paper); font:inherit; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.fl-ex-tab:hover{ border-color:var(--pink-300); }
.fl-ex-tab.is-active{ border-color:var(--pink-600); background:var(--pink-600); color:#fff; }
.fl-ex-tab__n:empty{ display:none; }
.fl-ex-row{ display:grid; grid-auto-flow:column; grid-auto-columns:116px; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.fl-ex-row[hidden]{ display:none; }
.pd-option .fl-ex-item{ position:relative; display:flex; flex-direction:column; gap:5px; margin:0; padding:6px 6px 8px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); cursor:pointer; scroll-snap-align:start; text-transform:none; letter-spacing:normal; font-weight:400; transition:border-color .2s var(--ease), background .2s var(--ease); }
.fl-ex-item:hover{ border-color:var(--pink-300); }
.fl-ex-item input{ position:absolute; opacity:0; pointer-events:none; }
.fl-ex-item__img{ display:block; aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.fl-ex-item__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.fl-ex-item__name{ font-size:12px; font-weight:600; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.fl-ex-item__price{ font-size:12.5px; font-weight:700; color:var(--pink-600); }
.fl-ex-item:has(input:checked){ border-color:var(--pink-600); background:var(--pink-50); }
.fl-ex-item:has(input:checked)::after{ content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 2px #fff;
  background:var(--pink-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.fl-ex-item:has(input:focus-visible){ outline:2px solid var(--pink-400); outline-offset:2px; }
.fl-ex-note{ margin:4px 0 0; font-size:12px; color:var(--text-faint); }
.fl-ex{ min-width:0; }
.product-detail-grid > div{ min-width:0; }

/* 22.10 — „Добави към подаръка“ е скрито зад въпрос */
.fl-ex-ask{ display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border:1.5px dashed var(--pink-300); border-radius:16px; background:var(--pink-50); }
.fl-ex-ask[hidden]{ display:none; }
.fl-ex-ask__ic{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--pink-600); box-shadow:0 8px 16px -12px rgba(196,44,107,.6); }
.fl-ex-ask__ic .icon{ width:19px; height:19px; }
.fl-ex-ask__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.fl-ex-ask__txt b{ font-size:14px; color:var(--text); font-weight:700; }
.fl-ex-ask__txt span{ font-size:12.5px; color:var(--text-soft); }
.fl-ex-ask__btn{ flex:none; padding:9px 16px; border:1.5px solid var(--pink-600); border-radius:var(--pill); background:#fff; color:var(--pink-600); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); white-space:nowrap; }
.fl-ex-ask__btn:hover{ background:var(--pink-600); color:#fff; }
.fl-ex-body[hidden]{ display:none; }
.fl-ex.is-open .fl-ex-body{ animation:flExIn .35s var(--ease); }
@keyframes flExIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.fl-ex-hide{ margin-left:auto; padding:4px 10px; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper); font:inherit; font-size:12px; font-weight:600; color:var(--text-soft); cursor:pointer; }
.fl-ex-hide:hover{ color:var(--pink-600); border-color:var(--pink-300); }
@media (max-width:420px){
  .fl-ex-ask{ flex-wrap:wrap; }
  .fl-ex-ask__txt{ flex-basis:calc(100% - 52px); }
  .fl-ex-ask__btn{ width:100%; padding:11px 16px; }
}