/*!
 * 7Saber – Flavors UI (v1.6.1)
 * Индикация прокрутки только мигающими прямоугольниками по краям. Без стрелок.
 */

:root{
  --sfn-gold:#d4af37;--sfn-gold-light:#e6c45e;
  --sfn-chip-bg:rgba(255,255,255,.03);
  --sfn-chip-brd:rgba(255,255,255,.12);
  --sfn-gap:8px;--sfn-pad:7px 12px;--sfn-dot:14px;
}

body.sfn-no-select{user-select:none}

/* обёртка внутри карточки */
.sfn-flavors-wrapper{
  position:relative; width:100%; margin:14px 0 10px; --sfn-pad-x:18px;
  padding:0 var(--sfn-pad-x);
}
@media(max-width:767.98px){
  .sfn-flavors-wrapper{ --sfn-pad-x:14px; padding:0 var(--sfn-pad-x); }
}

.sfn-title{margin:0 0 8px;font:600 16px/1 'Montserrat',sans-serif;color:#fff}

/* лента вкусов */
.sfn-flavors{
  position:relative; display:flex; align-items:center; gap:var(--sfn-gap);
  padding:6px 0; cursor:grab; flex-wrap:wrap;
}
.sfn-flavors.dragging{cursor:grabbing}

/* горизонтальная лента в мини-карточках */
.product-grid-item .sfn-flavors,
.wd-products-holder .product .sfn-flavors,
li.product .sfn-flavors{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.product-grid-item .sfn-flavors::-webkit-scrollbar,
.wd-products-holder .product .sfn-flavors::-webkit-scrollbar,
li.product .sfn-flavors::-webkit-scrollbar{display:none}

/* мигающие прямоугольники по краям, только когда есть куда скроллить */
@keyframes sfnBlink{0%,100%{opacity:.35}50%{opacity:1}}
.sfn-flavors-wrapper.sfn-can-scroll:not(.sfn-at-start)::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--sfn-gold); border-radius:2px; pointer-events:none; z-index:2; animation:sfnBlink 1.4s infinite;
}
.sfn-flavors-wrapper.sfn-can-scroll:not(.sfn-at-end)::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:var(--sfn-gold); border-radius:2px; pointer-events:none; z-index:2; animation:sfnBlink 1.4s infinite;
}

/* чипсы */
.sfn-flavor{
  --clr:var(--flavor-color,#f5c84c);
  display:inline-flex; align-items:center; gap:6px;
  padding:var(--sfn-pad); border:1px solid var(--sfn-chip-brd);
  border-radius:999px; background:var(--sfn-chip-bg);
  cursor:pointer; font-family:'Montserrat',sans-serif; white-space:nowrap; transition:.2s;
}
.sfn-flavor:hover{border-color:var(--clr); box-shadow:0 0 0 2px color-mix(in srgb,var(--clr) 40%, transparent)}
.sfn-flavor input{display:none}
.sfn-color{width:var(--sfn-dot); height:var(--sfn-dot); border-radius:50%; background:var(--clr); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}
.sfn-name{font-size:14px; font-weight:500; color:#fff}
.sfn-extra{font-size:12px; opacity:.55}
.sfn-flavor:has(input:checked){border-color:var(--clr); background:rgba(255,255,255,.08); box-shadow:0 0 0 2px var(--clr)}
.sfn-flavor input:checked~.sfn-color{box-shadow:0 0 0 2px var(--clr)}
.sfn-flavor input:checked~.sfn-name,.sfn-flavor input:checked~.sfn-extra{font-weight:600; opacity:1}

/* кнопка «в корзину» – как было */
@media(min-width:768px){
  .product-grid-item,.wd-products-holder .product{display:flex;flex-direction:column}
  .product-grid-item .wd-add-btn.wd-add-btn-replace{order:99;margin-top:auto;width:100%;padding:0;background:transparent}
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button{
    display:flex;align-items:center;justify-content:center;width:100%;height:56px;background:var(--sfn-gold);border:none;border-radius:0 0 38px 38px;color:#000;font:600 16px 'Montserrat',sans-serif;text-transform:uppercase;transition:background .25s}
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button:hover{background:var(--sfn-gold-light)}
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button i,
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button svg{display:none}
}
@media(max-width:767.98px){
  .product-grid-item,.wd-products-holder .product{display:flex;flex-direction:column}
  .product-grid-item .wd-add-btn.wd-add-btn-replace{order:99;margin-top:auto;width:100%;padding:0;background:transparent}
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button{
    display:flex;align-items:center;justify-content:center;width:100%;height:48px;background:var(--sfn-gold);border:none;border-radius:0 0 24px 24px;color:#000;font:600 16px 'Montserrat',sans-serif;text-transform:uppercase}
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button i,
  .product-grid-item .wd-add-btn.wd-add-btn-replace .add_to_cart_button svg{display:none}
}