/* ---- ff-cards.css ---- */
/* FoodFestival UI · product cards (category, home tabs, related, search).
   Keeps the Technics layout: gutters, fixed card height (custom.css 37/40rem), hover lift, action revealed on hover.
   Mega-menu promo cards (.products__item--dual) are left as they are.
   Loaded after the theme's inline settings <style>, so no  is needed. */

/* Manufacturer: quiet line instead of purple */
.products__item:not(.products__item--dual) .products__item-category{
  font-size:12px;line-height:16px;font-weight:400;color:#5A6477;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Title: medium weight (500 is loaded; 600 falls back to 700), two lines, no inner scrollbar */
.products__item:not(.products__item--dual) .products__item-title{
  font-size:14px;line-height:18px;font-weight:500;color:#22283A;letter-spacing:0;
  white-space:normal;max-height:none;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  margin:0;
}
@media (min-width:480px){
  .products__item:not(.products__item--dual) .products__item-title{font-size:15px;line-height:18px;margin:0}
}
/* Fits the theme's fixed card height (custom.css: 37rem / 40rem): ~90 px below the photo */
.products__item:not(.products__item--dual) .products__item-desc{row-gap:6px}
.products__item:not(.products__item--dual) .products__item-title:hover{color:#3660BC}

/* Price: ink, not link blue; sale price red, old price grey struck through */
.products__item:not(.products__item--dual) .products__item-price{
  font-size:18px;line-height:22px;font-weight:700;color:#22283A;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.products__item:not(.products__item--dual) .products__item-price:has(u){color:#C0262D}
.products__item:not(.products__item--dual) .products__item-price u{
  font-size:13px;line-height:18px;font-weight:400;color:#5A6477;
  text-decoration:line-through;margin:0 8px 0 0;
}
.products__item:not(.products__item--dual) .products__item-price u:after{display:none}

/* Narrow cards (<480 px, two per row): smaller type, old price on its own line */
@media (max-width:479px){
  .products__item:not(.products__item--dual) .products__item-title{font-size:13px;line-height:17px}
  .products__item:not(.products__item--dual) .products__item-price{font-size:16px;line-height:20px;white-space:normal}
  .products__item:not(.products__item--dual) .products__item-price u{display:block;font-size:12px;line-height:16px;margin:0}
}

/* Badges: sentence case, colour by meaning */
.products__item:not(.products__item--dual) .products__item-mark{
  text-transform:none;letter-spacing:0;font-size:12px;line-height:22px;font-weight:500;
  border-radius:999px;padding:0 10px;
}
.products__item:not(.products__item--dual) .products__item-mark--hit{background:#E6EAF6;color:#1A2870}
.products__item:not(.products__item--dual) .products__item-mark--new{background:#E8F5EE;color:#1E7A4B}
.products__item:not(.products__item--dual) .products__item-mark--sale,
.products__item:not(.products__item--dual) .products__item-mark--discount{background:#C0262D;color:#fff}
.products__item:not(.products__item--dual) .products__item-mark--popular{background:#E3EBFA;color:#2A4E9A}
.products__item:not(.products__item--dual) .products__item-mark--reward,
.products__item:not(.products__item--dual) .products__item-mark--catch,
.products__item:not(.products__item--dual) .products__item-mark--nocatch{background:#EEF1F6;color:#5A6477}
.products__item:not(.products__item--dual) .products__item-rating{font-size:12px;font-weight:500;color:#5A6477}

/* Buy button: purchase colour, theme's pill shape and icon; no caps.
   Beats the theme settings rule .btn--cart{background:#92c3e5} by specificity and order. */
.products__item .btn--cart{
  background:#A33F0C;color:#fff;border-color:transparent;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;
}
.products__item .btn--cart:hover,
.products__item .btn--cart:focus-visible{background:#8A3700;color:#fff}
.products__item .btn--cart:active{background:#6C2B00}
/* Unavailable product: grey, not an active-looking purchase colour */
.products__item .btn--cart:disabled,.products__item .btn--cart.disabled{background:#EEF1F6;color:#5A6477;cursor:not-allowed}
.products__item .btn--preview{border-color:#CDD4E0;color:#5A6477}
.products__item .btn--preview:hover{border-color:#7A8599;color:#22283A}

/* Keyboard: the same reveal as hover when focus is inside the card */
.products__item .btn:focus-visible,
.products__item:not(.products__item--dual) .products__item-title:focus-visible,
.products__item-images a:focus-visible{
  outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #3660BC;border-radius:8px;
}
@media (min-width:992px){
  /* products-ui-fix.css hides the action with visibility:hidden, which also removes it from Tab order.
     Hide it with opacity only; clicks stay blocked until the card is hovered or focused. */
  .products__item-action{visibility:visible;pointer-events:none}
  .products__item:hover .products__item-action,
  .products__item:focus-within .products__item-action{pointer-events:auto}
  .products__item:focus-within{z-index:15;overflow:visible;border-color:transparent}
  .products__item:focus-within .products__item-in:after{opacity:1;visibility:visible}
  .products__item:focus-within .products__item-action{opacity:1;visibility:visible;transform:translate(0,0)}
}

@media (prefers-reduced-motion:reduce){
  .products__item-in:after,
  .products__item-action{transition:none}
}

/* ---------- product blocks from modules on phones (product tabs, featured, bestsellers, specials, "Рекомендуємо") ----------
   Theme: .products{padding:5.4rem 0 4.4rem} → 49 px empty above every heading and ~90 px between two blocks in a row;
   the heading also keeps 63 px on the right for slider arrows that phones do not show, so short titles wrapped. */
@media (max-width:767px){
  .products{padding-top:24px;padding-bottom:8px}
  .products__heading{padding-right:0;margin-bottom:12px;font-size:20px;line-height:26px;font-weight:700;color:#22283A}
}
/* ---- ff-notice.css ---- */
/* FoodFestival UI · compact site notice (alert module).
   Shown at once as one line fixed to the bottom: no delay, no entrance animation, no layout shift.
   "Детальніше" opens the full text inside the same card (native <details>). */
.ff-notice{
  --ff-notice-bg:#F1F5FD;--ff-notice-border:#E3EBFA;--ff-notice-icon:#3660BC;
  position:fixed;z-index:1001;left:50%;transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:min(560px,calc(100vw - 48px));box-sizing:border-box;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:10px;
  padding:0 4px 0 14px;border-radius:14px;
  background:var(--ff-notice-bg);box-shadow:inset 0 0 0 1px var(--ff-notice-border),0 8px 24px rgba(26,40,112,.14);
  color:#22283A;font:400 14px/20px Roboto,"Helvetica Neue",Arial,sans-serif;
}
.ff-notice[hidden]{display:none}
.ff-notice--warning{--ff-notice-bg:#FFF6DB;--ff-notice-border:#F1DFA6;--ff-notice-icon:#A86B00}
.ff-notice--success{--ff-notice-bg:#E8F5EE;--ff-notice-border:#BFE3CE;--ff-notice-icon:#1E7A4B}

.ff-notice__icon{width:20px;height:20px;margin-top:14px;fill:none;stroke:var(--ff-notice-icon);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ff-notice__details{min-width:0}
.ff-notice__summary{
  display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:6px 0;
  list-style:none;cursor:pointer;border-radius:8px;
}
.ff-notice__summary::-webkit-details-marker{display:none}
.ff-notice__summary--static{cursor:default}
.ff-notice__title{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-notice__details[open] .ff-notice__title{white-space:normal}
.ff-notice__toggle{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;color:#3660BC;font-weight:500}
.ff-notice__less,.ff-notice__details[open] .ff-notice__more{display:none}
.ff-notice__details[open] .ff-notice__less{display:inline}
.ff-notice__chevron{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.ff-notice__details[open] .ff-notice__chevron{transform:rotate(180deg)}
.ff-notice__summary:hover .ff-notice__toggle{color:#2A4E9A}
.ff-notice__summary:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #3660BC}

/* Expanded: the card grows upwards; long text scrolls inside so it never covers the whole screen */
.ff-notice__body{
  max-height:min(50vh,360px);overflow:auto;overscroll-behavior:contain;
  padding:0 8px 14px 0;color:#3D4557;font-size:14px;line-height:21px;
}
.ff-notice__link{color:#3660BC;font-weight:500;text-decoration:underline;text-underline-offset:2px}

.ff-notice__close{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:2px;padding:0;
  border:0;border-radius:50%;background:transparent;color:#5A6477;cursor:pointer;
}
.ff-notice__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ff-notice__close:hover{color:#22283A;background:rgba(34,40,58,.06)}
.ff-notice__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #3660BC}

@media (max-width:767px){
  .ff-notice{
    left:12px;right:12px;transform:none;width:auto;
    bottom:calc(12px + var(--sku-sticky-mobile-shift,0px) + env(safe-area-inset-bottom,0px));
    border-radius:12px;font-size:13px;line-height:18px;
  }
  .ff-notice__body{font-size:14px;line-height:20px}
  /* Two lines on phones so the key words are not cut off */
  .ff-notice__title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .ff-notice__details[open] .ff-notice__title{display:block;-webkit-line-clamp:unset;line-clamp:none}
}
/* Folded state: the phone purchase bar is on screen (html.is-product-sticky-buy-active is set only below 992 px).
   The notice becomes a 44 px icon button above the bar; a tap unfolds it (.is-open) until the bar hides again. */
.ff-notice__peek{display:none}
html.is-product-sticky-buy-active .ff-notice:not(.is-open){
  left:12px;right:auto;width:auto;transform:none;padding:0;
  grid-template-columns:auto;border-radius:999px;
}
html.is-product-sticky-buy-active .ff-notice:not(.is-open) > :not(.ff-notice__peek){display:none}
html.is-product-sticky-buy-active .ff-notice:not(.is-open) .ff-notice__peek{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
}
html.is-product-sticky-buy-active .ff-notice:not(.is-open) .ff-notice__peek .ff-notice__icon{margin:0}
.ff-notice__peek:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #3660BC}
@media (prefers-reduced-motion:reduce){.ff-notice__chevron{transition:none}}
/* ---- ff-texts.css ---- */
/* FoodFestival UI · texts and headings (category and product pages).
   Only page headings and long-read blocks: category SEO text (.seo .editor), its FAQ (.sp-seo-faq),
   product description and attributes (.details__tabs-content), breadcrumbs, product tabs, product code.
   Sizes are in px: the theme shrinks the root rem to 9px below 480px, which made body text 12.6px. */

/* ---------- page headings ---------- */
.catalog__heading{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em;color:#22283A;margin:0 0 20px}
/* product.twig prints .sku__heading h1{font-size:1.8rem} inside <body>, after this file: both block classes win without !important */
.sku__page-heading.sku__heading h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.01em;color:#22283A;margin:0}
@media (max-width:767px){
  .catalog__heading{font-size:24px;line-height:30px;margin:0 0 16px}
  .sku__page-heading.sku__heading h1{font-size:22px;line-height:28px}
}

/* ---------- breadcrumbs, tabs, product code ---------- */
.breadcrumbs__link{font-size:13px;line-height:20px;color:#3660BC}
.breadcrumbs__link:hover{color:#2A4E9A}
.breadcrumbs__link.is-active,.breadcrumbs__link.is-active:hover{color:#5A6477}
.details__tabs-btn{font-size:15px;line-height:20px;font-weight:500;color:#5A6477}
.details__tabs-btn:hover{color:#3660BC}
.details__tabs-btn.is-active{color:#22283A}
.sku__id{color:#5A6477;font-variant-numeric:tabular-nums}

/* ---------- long reads ---------- */
.seo .editor,
.details__tabs-content{color:#22283A}
/* Category text keeps the full width of its column (≈840 px at 1440) */
/* Product description panel is 120rem wide (theme Custom CSS): centre the text column inside it */
.details__tabs-content > p,.details__tabs-content > ul,.details__tabs-content > ol,.details__tabs-content > h2,
.details__tabs-content > h3,.details__tabs-content > h4,.details__tabs-content > blockquote,.details__tabs-content > table{
  max-width:880px;margin-left:auto;margin-right:auto
}

.seo .editor p,.seo .editor li,
.details__tabs-content p,.details__tabs-content li{font-size:16px;line-height:26px}
.seo .editor p,.details__tabs-content p{margin-top:0;margin-bottom:16px}
.seo .editor ul,.seo .editor ol,.details__tabs-content ul,.details__tabs-content ol{margin-top:0;margin-bottom:16px;padding-left:22px}
.seo .editor li,.details__tabs-content li{margin-bottom:8px}
.seo .editor li:last-child,.details__tabs-content li:last-child{margin-bottom:0}
.seo .editor strong,.seo .editor b,.details__tabs-content strong,.details__tabs-content b{font-weight:700}
.seo .editor a,.details__tabs-content a{color:#3660BC;text-decoration:underline;text-underline-offset:2px}
.seo .editor a:hover,.details__tabs-content a:hover{color:#2A4E9A}

/* Headings group with the text below: more space above, less below */
.seo .editor h2,.details__tabs-content h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.005em;color:#22283A;margin-top:32px;margin-bottom:12px}
.seo .editor h3,.details__tabs-content h3{font-size:18px;line-height:24px;font-weight:700;color:#22283A;margin-top:24px;margin-bottom:8px}
.seo .editor h4,.details__tabs-content h4{font-size:16px;line-height:24px;font-weight:700;color:#22283A;margin-top:20px;margin-bottom:6px}
.seo .editor > :first-child,.details__tabs-content > :first-child{margin-top:0}

.seo .editor table,.details__tabs-content table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:15px;line-height:22px}
.seo .editor th,.seo .editor td,.details__tabs-content th,.details__tabs-content td{padding:8px 12px 8px 0;border-bottom:1px solid #E3E8F0;text-align:left;vertical-align:top}
.seo .editor th,.details__tabs-content th{font-weight:500;color:#5A6477}

@media (max-width:767px){
  /* Theme pads the description panel by 4rem/3rem: give the text the width back on phones */
  .details__tabs-content{padding-left:16px;padding-right:16px}
  .seo .editor p,.seo .editor li,.details__tabs-content p,.details__tabs-content li{font-size:15px;line-height:24px}
  .seo .editor h2,.details__tabs-content h2{font-size:20px;line-height:26px;margin-top:28px;margin-bottom:10px}
  .seo .editor h3,.details__tabs-content h3{font-size:17px;line-height:22px}
}

/* "Читати далі" */
.seo__readmore-link{font-size:14px;font-weight:500;color:#3660BC}
.seo__readmore-link:hover{color:#2A4E9A}

/* ---------- attributes (dl) ---------- */
.details__info-heading{font-size:18px;line-height:24px;font-weight:700;color:#22283A}
.details__info-dl{font-size:15px;line-height:22px}
.details__info-dl dt{font-size:13px;line-height:18px;color:#5A6477} /* was #d1d1d1, 1.5:1 */
.details__info-dl dd{color:#22283A;margin-bottom:16px}

/* ---------- category FAQ (sp_auto_seo_faq) ---------- */
.sp-seo-faq-block{max-width:880px}
/* On the product page the FAQ sits directly in <main>, with no container: centre it like the description */
main > .sp-seo-faq > .sp-seo-faq-block{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.sp-seo-faq .faq-title{font-size:22px;line-height:28px;font-weight:700;color:#22283A;text-align:left;margin:32px 0 12px}
.sp-seo-faq .faq-question{margin-top:8px;padding:16px 20px;border-radius:12px;box-shadow:inset 0 0 0 1px #E3E8F0}
.sp-seo-faq .faq-question:hover{box-shadow:inset 0 0 0 1px #CDD4E0,0 2px 8px rgba(26,40,112,.06)}
.sp-seo-faq .faq-link{margin:-16px -20px;padding:16px 48px 16px 20px;font-size:16px;line-height:24px;font-weight:500;color:#22283A}
.sp-seo-faq .faq-link:after{top:22px;right:22px}
/* Product FAQ wraps each question in <h3> (theme: 25px): keep the heading tag for SEO, look like a question */
.sp-seo-faq .faq-link h2,.sp-seo-faq .faq-link h3,.sp-seo-faq .faq-link h4{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.sp-seo-faq .faq-text p{margin:0 0 8px}
.sp-seo-faq .faq-text p:last-child{margin-bottom:0}
.sp-seo-faq .faq-text{font-size:15px;line-height:24px;color:#3D4557;padding-top:12px}
@media (max-width:767px){
  .sp-seo-faq .faq-title{font-size:20px;line-height:26px}
  .sp-seo-faq .faq-link{font-size:15px;line-height:22px}
}
/* ---- ff-home.css ---- */
/* FoodFestival UI · home page: category tiles (technics_category, .category__grid) and promo catalog (technics_promo).
   CSS over the modules' own markup: links, images, texts and module settings keep working. */

/* =====================================================================
   Categories (main > .category): the module's own layout, made even
   Module settings are respected:
   - "Блок в 2 раза шире" is printed as col-lg-6/col-xl-6 (else col-lg-3/col-xl-3) → the tile spans 2 of 4 columns;
   - image size per tile (e.g. 540×200) comes from the img width/height attributes, not from this file;
   - sort order, names and links stay as the module renders them.
   Breakpoints follow the theme: 4 columns from 992 px (col-lg), 2 columns 768–991 (col-sm-6), a swipe row on phones.
   ===================================================================== */
main > .category .category__grid .row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;align-items:start;
}
main > .category .category__grid .row > [class*="col-"]{width:auto;max-width:none;flex:none;padding:0;min-width:0;grid-column:span 1}
@media (min-width:992px){
  main > .category .category__grid .row > [class*="col-lg-6"]{grid-column:span 2}
  main > .category .category__grid .row > [class*="col-lg-9"]{grid-column:span 3}
  main > .category .category__grid .row > [class*="col-lg-12"]{grid-column:span 4}
}
@media (min-width:1200px){
  main > .category .category__grid .row > [class*="col-xl-3"]{grid-column:span 1}
  main > .category .category__grid .row > [class*="col-xl-6"]{grid-column:span 2}
  main > .category .category__grid .row > [class*="col-xl-9"]{grid-column:span 3}
  main > .category .category__grid .row > [class*="col-xl-12"]{grid-column:span 4}
}
@media (min-width:768px) and (max-width:991px){
  main > .category .category__grid .row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
main > .category .category__item{
  position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;box-sizing:border-box;
  min-height:0;height:auto; /* theme: min-height 36.6rem + height 100% left empty space under every banner */
  padding:10px 10px 12px;border:1px solid #E3E8F0;border-radius:16px;background:#fff;color:#22283A;text-decoration:none;
  transition:box-shadow .2s ease,border-color .2s ease;
}
main > .category .category__item:hover{border-color:#CDD4E0;box-shadow:0 8px 24px rgba(26,40,112,.10)}
main > .category .category__item:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px #3660BC}
/* Proportions come from the module's image size (width/height attributes): banners are never cropped */
main > .category .category__item-image{margin:0;border-radius:10px;overflow:hidden;background:#F6F7FA;flex:none}
main > .category .category__item-image img{display:block;width:100%;height:auto;transition:transform .3s ease}
main > .category .category__item:hover .category__item-image{transform:none} /* theme scales the whole figure by 1.1 */
main > .category .category__item:hover .category__item-image img{transform:scale(1.03)}
main > .category .category__item-title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:0 4px;
  font-size:15px;line-height:20px;font-weight:500;color:#22283A;text-transform:none;letter-spacing:0;
}
main > .category .category__item-title:after{
  content:"";flex:none;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233660BC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .2s ease;
}
main > .category .category__item:hover .category__item-title:after{transform:translateX(3px)}
main > .category .category__head{margin-bottom:16px}
main > .category .category__heading{font-size:24px;line-height:30px;font-weight:700;color:#22283A}

/* Phones: the theme makes every tile full width here (col-12), so "2× wider" has no effect — one swipeable row */
@media (max-width:767px){
  main > .category .category__grid{margin:0 -16px}
  main > .category .category__grid .row{
    display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding:2px 16px 8px;scroll-padding:0 16px;scrollbar-width:none;align-items:stretch;
  }
  main > .category .category__grid .row::-webkit-scrollbar{display:none}
  main > .category .category__grid .row > [class*="col-"]{flex:0 0 78%;scroll-snap-align:start}
  main > .category .category__item{border-radius:14px;height:100%}
  main > .category .category__item-title{font-size:14px;line-height:18px;margin-top:auto}
}

/* =====================================================================
   Promo catalog (.promo): gaps, rounded tiles, readable text on a scrim
   Module settings are respected: column width (col-xl-N), text position (top/bottom, left/right)
   and "black text" (light scrim, dark text).
   ===================================================================== */
.promo .row{gap:16px;flex-wrap:nowrap}
.promo .row > [class*="col-"]{flex:1 1 0;width:auto;max-width:none;min-width:0;gap:16px}
/* From 1200 px the module's banner width setting (col-xl-N) sets the share of the row */
@media (min-width:1200px){
  .promo .row > .col-xl-2{flex-grow:2}.promo .row > .col-xl-3{flex-grow:3}.promo .row > .col-xl-4{flex-grow:4}
  .promo .row > .col-xl-5{flex-grow:5}.promo .row > .col-xl-6{flex-grow:6}.promo .row > .col-xl-7{flex-grow:7}
  .promo .row > .col-xl-8{flex-grow:8}.promo .row > .col-xl-9{flex-grow:9}.promo .row > .col-xl-10{flex-grow:10}
  .promo .row > .col-xl-12{flex-grow:12}
}
.promo .promo__item{border-radius:16px;isolation:isolate;box-shadow:none;transition:box-shadow .2s ease}
.promo .promo__item:before{padding-top:41.667%} /* small tiles 12:5 instead of 2:1 — the block is ~15% lower */
.promo .promo__item:hover{box-shadow:0 8px 24px rgba(26,40,112,.18)}
.promo .promo__item:hover .promo__item-image{transform:scale(1.04)}
.promo .promo__item:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px #3660BC}
@media (min-width:992px){
  .promo{padding:48px 0 16px}
}
.promo .promo__item-desc{
  top:auto;right:0;bottom:0;left:0;max-width:none;text-align:left;color:#fff;
  padding:56px 76px 20px 24px;
  background:linear-gradient(0deg,rgba(18,27,79,.84) 0%,rgba(18,27,79,.58) 48%,rgba(18,27,79,0) 100%);
}
.promo .promo__item-title{
  display:block;margin:0;color:#fff;
  font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.01em;text-transform:none;
}
.promo .promo__item:only-child .promo__item-title{font-size:32px;line-height:38px}
.promo .promo__item-title b{font-size:inherit}
.promo .promo__item-price{
  display:block;margin:4px 0 0;color:rgba(255,255,255,.9);
  font-size:15px;line-height:22px;font-weight:400;letter-spacing:0;white-space:normal;
}
.promo .promo__item-desc .btn{margin-top:12px;text-transform:none;letter-spacing:0;font-weight:500}
/* Text position from the module: the scrim follows the text */
.promo .promo__item-desc--top-left,.promo .promo__item-desc--top-right{
  top:0;bottom:auto;padding:20px 76px 56px 24px;
  background:linear-gradient(180deg,rgba(18,27,79,.84) 0%,rgba(18,27,79,.58) 48%,rgba(18,27,79,0) 100%);
}
.promo .promo__item-desc--top-right,.promo .promo__item-desc--bottom-right{text-align:right;padding-left:24px;padding-right:24px}
.promo .promo__item-desc--bottom-right{padding-left:76px}
.promo .promo__item:has(.promo__item-desc--bottom-right):after{right:auto;left:20px}
/* "Black text": light scrim, dark text */
.promo .promo__item-desc--black{background:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 48%,rgba(255,255,255,0) 100%);color:#22283A}
.promo .promo__item-desc--black.promo__item-desc--top-left,.promo .promo__item-desc--black.promo__item-desc--top-right{
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 48%,rgba(255,255,255,0) 100%)
}
.promo .promo__item-desc--black .promo__item-title{color:#22283A}
.promo .promo__item-desc--black .promo__item-price{color:#3D4557}
.promo .promo__item:after{
  content:"";position:absolute;z-index:11;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322283A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .2s ease;
}
.promo .promo__item:hover:after{transform:translateX(3px)}
@media (max-width:767px){
  .promo{margin:0}
  .promo .row{flex-direction:column;gap:12px}
  .promo .row > [class*="col-"]{flex:none;width:100%;gap:12px}
  .promo .row > [class*="col-"]:has(> .promo__item + .promo__item){flex-direction:row}
  .promo .promo__item{border-radius:12px}
  .promo .promo__item:before{padding-top:56.25%}
  .promo .row > [class*="col-"]:has(> .promo__item + .promo__item) .promo__item{flex:1 1 0;min-width:0}
  .promo .row > [class*="col-"]:has(> .promo__item + .promo__item) .promo__item:before{padding-top:80%}
  .promo .promo__item-desc{padding:40px 52px 14px 16px}
  .promo .promo__item-desc--top-left,.promo .promo__item-desc--top-right{padding:14px 16px 40px}
  .promo .promo__item-desc--bottom-right{padding:40px 16px 14px 52px}
  .promo .promo__item:has(.promo__item-desc--bottom-right):after{left:12px}
  .promo .promo__item-title,.promo .promo__item:only-child .promo__item-title{font-size:22px;line-height:28px}
  .promo .row > [class*="col-"]:has(> .promo__item + .promo__item) .promo__item-title{font-size:18px;line-height:22px}
  .promo .promo__item-price{font-size:13px;line-height:18px;margin-top:2px}
  .promo .promo__item:after{right:12px;bottom:12px;width:32px;height:32px;background-size:15px}
}
@media (prefers-reduced-motion:reduce){
  main > .category .category__item,main > .category .category__item-image img,
  .promo .promo__item,.promo .promo__item-image,.promo .promo__item:after{transition:none}
}
/* ---- ff-catalog.css ---- */
/* FoodFestival UI · category page: subcategory tiles, OCFilter panel, category tree, OCFilter landing pages.
   CSS only, no markup or module changes. OCFilter prints its own stylesheet inside <body> (after this file),
   so its rules are matched with one extra container class instead of !important.
   The OCFilter off-canvas panel on phones (<768 px) is left as the module draws it. */

/* ---------- 1. subcategories: small photo tiles instead of 250 px cards ---------- */
/* Desktop and tablet: 6 in a row at 1440 (photo 88 px, name under it), two rows for Бакалія */
.catalog__category{margin:0 0 24px}
.catalog__category .category__grid .row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin:0;
}
.catalog__category .category__grid .row > [class*="col-"]{flex:none;width:auto;max-width:none;min-width:0;margin:0;padding:0}
.catalog__category .category__item{
  flex-direction:column;flex-wrap:nowrap;align-items:center;gap:10px;
  min-height:0;height:100%;padding:14px 10px 12px;text-align:center;
  border:1px solid #E3E8F0;border-radius:14px;background:#fff;color:#22283A;
  transition:border-color .2s,box-shadow .2s,color .2s;
}
.catalog__category .category__item:hover{border-color:#CDD4E0;box-shadow:0 4px 12px rgba(26,40,112,.08);color:#3660BC}
.catalog__category .category__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #3660BC}
.catalog__category .category__item-image,
.catalog__category .category__item:not(:has(.category__item-image))::before{
  flex:0 0 auto;width:min(88px,100%);height:auto;aspect-ratio:1;margin:0;border-radius:12px;overflow:hidden;background:#F6F7FA;transition:none;
}
/* Filter column beside: 6 in a row from 1200 px (5 would give Бакалія a third row), 5 at 992-1199 px */
@media (min-width:1200px){.catalog__category .category__grid .row{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:992px) and (max-width:1199px){.catalog__category .category__grid .row{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Titles keep a fixed 2-line box: Roboto arrives after the first paint, and a name that wrapped differently in the
   fallback font moved everything below the tiles (CLS up to 0.12-0.15 on desktop). The box never changes height;
   before Roboto arrives a long name may show an ellipsis for a moment. */
/* a subcategory without an image gets an empty photo place, so its name lines up with the others */
.catalog__category .category__item:not(:has(.category__item-image))::before{content:"";display:block}
.catalog__category .category__item:hover .category__item-image{transform:none}
.catalog__category .category__item-image img{width:100%;height:100%;object-fit:contain}
.catalog__category .category__item-title{
  flex:0 0 auto;min-width:0;max-width:100%;min-height:36px;margin:0;font-size:14px;line-height:18px;font-weight:500;color:inherit;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
/* Narrower columns: 13 px, slimmer side padding and gaps keep the longest names ("Кетчуп, майонез, гірчиця") in two
   lines; below 1200 px five tiles a row instead of six */
@media (min-width:768px) and (max-width:1399px){
  .catalog__category .category__grid .row{gap:8px}
  .catalog__category .category__item{padding-left:6px;padding-right:6px}
  .catalog__category .category__item-title{font-size:13px;line-height:17px;min-height:34px}
}
/* Phones: one swipe row, products stay on the first screen.
   The row runs to the screen edges and fades out on the right, and equal tiles leave the third one half visible:
   together they show that the row scrolls. calc(50% - 50vw) works because the content column is centred on phones. */
@media (max-width:767px){
  .catalog__category{margin:0 0 16px}
  .catalog__category .category__grid .row{
    display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:0 calc(50vw - 50% + 24px) 4px calc(50vw - 50%);
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
  }
  .catalog__category .category__grid .row::-webkit-scrollbar{display:none}
  .catalog__category .category__grid .row > [class*="col-"]{flex:0 0 152px}
  .catalog__category .category__item{flex-direction:row;align-items:center;text-align:left;min-height:56px;gap:8px;padding:6px 10px 6px 6px;border-radius:12px}
  .catalog__category .category__item-image,
  .catalog__category .category__item:not(:has(.category__item-image))::before{flex:0 0 40px;width:40px;height:40px;aspect-ratio:auto;border-radius:8px}
  .catalog__category .category__item-title{flex:1;min-height:0;font-size:13px;line-height:16px;-webkit-line-clamp:3;line-clamp:3}
}

/* ---------- 4. category tree ---------- */
/* On a parent category the tiles above the products already list the subcategories: the tree only repeats them */
.catalog:has(.catalog__category .category__item) .catalog__nav{display:none}
.catalog__nav{border:1px solid #E3E8F0;border-radius:16px;overflow:hidden;margin:0 0 24px;font-size:14px;line-height:20px}
.catalog__nav-heading{font-size:15px;line-height:22px;font-weight:600;color:#22283A;padding:14px 20px}
.catalog__nav-menu > li:after{border-bottom-color:#E3E8F0}
.catalog__nav-link{color:#22283A;padding:9px 56px 9px 20px}
.catalog__nav-link:hover{color:#3660BC}
.catalog__nav-counter{color:#5A6477;padding:9px 20px 9px 0}

/* ---------- 4. OCFilter panel (desktop and tablet) ---------- */
@media (min-width:768px){
  .ocf-container.ocf-theme-light-block .ocf-content{
    border:1px solid #E3E8F0;border-radius:16px;overflow:hidden;margin:0 0 24px;background:#fff;
  }
  .ocf-container.ocf-theme-light-block.ocf-vertical .ocf-filter{
    margin:0;padding:16px 20px;border-radius:0;background:transparent;border-top:1px solid #E3E8F0;
  }
  .ocf-container.ocf-theme-light-block.ocf-vertical .ocf-filter-list > .ocf-filter:first-child{border-top:0}
  .ocf-container.ocf-theme-light-block.ocf-vertical .ocf-active{background:#FFF4EC}
  .ocf-container.ocf-theme-light-block .ocf-filter-header .ocf-filter-name{font-size:15px;line-height:20px;font-weight:600;color:#22283A}
  .ocf-container.ocf-theme-light-block .ocf-filter-header .ocf-active-label{font-size:13px;line-height:18px;color:#5A6477}
  .ocf-container.ocf-theme-light-block .ocf-active .ocf-filter-header,
  .ocf-container.ocf-theme-light-block .ocf-active .ocf-filter-header .ocf-filter-name{color:#6C2B00}
  .ocf-container.ocf-theme-light-block .ocf-value{font-size:14px;line-height:20px;color:#22283A}
  .ocf-container.ocf-theme-light-block .ocf-value.ocf-disabled{color:#8A93A5}
  /* counts: quiet text, not grey pills */
  .ocf-container.ocf-theme-light-block .ocf-value-count{background:none;padding:0;border-radius:0;font-size:12px;color:#5A6477;font-variant-numeric:tabular-nums}
  .ocf-container.ocf-theme-light-block .ocf-disabled .ocf-value-count{color:#8A93A5}
  .ocf-container .ocf-value-input::before{border-color:#7A8599}
  .ocf-container .ocf-value:focus-visible{outline:none}
  .ocf-container .ocf-value:focus-visible .ocf-value-input::before{box-shadow:0 0 0 2px #fff,0 0 0 4px #3660BC}
  /* "Показати ще 21": a plain link. Link, checkbox and slider colours stay with the theme Custom CSS (#497bc2 !important) */
  .ocf-container .ocf-btn-show-values{margin-top:8px;font-size:14px;line-height:20px;font-weight:500}
  /* the value list scroll shadows are painted with the old block colour: repaint them for white and tint */
  .ocf-container.ocf-theme-light-block .ocf-scroll-y{background-image:linear-gradient(#fff 30%,transparent),linear-gradient(transparent,#fff 70%),radial-gradient(farthest-side at 50% 0,rgb(0 0 0 / 10%),transparent),radial-gradient(farthest-side at 50% 100%,rgb(0 0 0 / 10%),transparent)}
  .ocf-container.ocf-theme-light-block .ocf-active .ocf-scroll-y{background-image:linear-gradient(#FFF4EC 30%,transparent),linear-gradient(transparent,#FFF4EC 70%),radial-gradient(farthest-side at 50% 0,rgb(0 0 0 / 10%),transparent),radial-gradient(farthest-side at 50% 100%,rgb(0 0 0 / 10%),transparent)}
  .ocf-container .ocf-scroll-y::-webkit-scrollbar-thumb{background-color:#CDD4E0}
  /* price inputs */
  .ocf-container.ocf-theme-light-block .ocf-form-control{border:1px solid #7A8599;border-radius:8px;color:#22283A}
  .ocf-container.ocf-theme-light-block .ocf-form-control:focus{border-color:#3660BC;box-shadow:0 0 0 3px rgba(54,96,188,.2);outline:none}
}

/* ---------- 6. OCFilter landing pages under the listing ---------- */
.ocf-page-list-bottom{margin-top:32px;padding:20px 24px;border:1px solid #E3E8F0;border-radius:16px;background:#F6F7FA}
.ocf-page-list-bottom::before{content:"Популярні підбірки";display:block;margin:0 0 16px;font-size:18px;line-height:24px;font-weight:700;color:#22283A}
.ocf-page-list-bottom:lang(ru)::before{content:"Популярные подборки"}
.ocf-page-list-bottom:lang(en)::before{content:"Popular selections"}
.ocf-page-list-bottom .ocf-page-group{margin-bottom:12px}
.ocf-page-list-bottom .ocf-page-group:last-child{margin-bottom:0}
.ocf-page-list-bottom .ocf-page-group-name{font-size:13px;line-height:18px;font-weight:500;color:#5A6477;margin-top:8px;flex-basis:160px;width:160px}
.ocf-page-list-bottom .ocf-category-page-list{max-height:132px;margin:0 -4px}
.ocf-page-list-bottom .ocf-category-page-list li{margin-bottom:8px}
.ocf-page-list-bottom .ocf-category-page-list a{
  margin:0 4px;padding:6px 14px;border:1px solid #CDD4E0;border-radius:999px;background:#fff;
  font-size:14px;line-height:20px;color:#22283A;transition:border-color .2s,color .2s;
}
.ocf-page-list-bottom .ocf-category-page-list a:hover{border-color:#3660BC;color:#3660BC}
.ocf-page-list-bottom .ocf-category-page-list a:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #3660BC}
.ocf-page-list-bottom .ocf-category-page-list .ocf-page-selected a{border-color:#1A2870;background:#1A2870;color:#fff}
@media (max-width:767px){
  .ocf-page-list-bottom{padding:16px}
  .ocf-page-list-bottom .ocf-page-group-name{flex-basis:100%;width:100%;margin:0 0 8px}
}
@media (prefers-reduced-motion:reduce){
  .catalog__category .category__item,.ocf-page-list-bottom .ocf-category-page-list a{transition:none}
}
/* ---- ff-purchase.css ---- */
/* FoodFestival UI · purchase block and sticky bar on the product page.
   !important is used only where the theme's Custom CSS setting uses it (#product button, .ui-size__btn).
   After that Custom CSS is cleaned up (see README), those !important can be removed. */
#product,#sku-sticky-buy{--ff-buy:#A33F0C;--ff-buy-hover:#8A3700;--ff-buy-tint:#FFF4EC;--ff-sale:#C0262D;--ff-choice:#3660BC;--ff-ink:#22283A;--ff-muted:#5A6477;font-family:Roboto,Arial,sans-serif;color:var(--ff-ink)}
#product .sku__settings{font-size:16px;line-height:24px}
#product .sku__settings .ui-label{font-size:14px;line-height:20px}
#product .sku__settings .ui-size__btn{background:#fff!important;border:1px solid #7A8599;color:var(--ff-ink);min-height:44px;min-width:52px;padding:0 16px;border-radius:999px;font-size:15px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
/* Selected pack = purchase accent (tint), not a second colour in the block. Overrides the theme's #8A3700!important. */
#product .sku__settings .ui-size__input:checked~.ui-size__btn{background:var(--ff-buy-tint)!important;border:2px solid var(--ff-buy);padding:0 15px;color:var(--ff-buy-hover);font-weight:700}
#product .sku__settings .ui-size__input:disabled~.ui-size__btn{background:#F6F7FA!important;border:1px dashed #CDD4E0;color:var(--ff-muted);text-decoration:line-through;cursor:not-allowed}
#product .sku__settings .ui-size__input:focus-visible~.ui-size__btn{outline:3px solid var(--ff-choice);outline-offset:3px}
#product #button-cart,#sku-sticky-buy #button-cart-sticky{background:var(--ff-buy)!important;color:#fff;text-transform:none;letter-spacing:0;font-weight:500;border-radius:999px;min-height:48px;font-size:16px;line-height:20px;white-space:normal}
#product #button-cart:hover,#sku-sticky-buy #button-cart-sticky:hover{background:var(--ff-buy-hover)!important}
#product #button-cart:disabled,#sku-sticky-buy #button-cart-sticky:disabled{background:#EEF1F6!important;color:var(--ff-muted);cursor:not-allowed}
/* Loading keeps the purchase colour; the theme sets disabled + loading text at the same time */
#product #button-cart.ff-loading:disabled,#sku-sticky-buy #button-cart-sticky.ff-loading:disabled{background:var(--ff-buy)!important;color:#fff;opacity:.85;cursor:progress}
#product .sku__action .jq-number{min-height:48px;border-color:#7A8599;border-radius:999px}
#product .sku__action input[name=quantity]{font-size:16px;font-variant-numeric:tabular-nums;min-height:44px}
#product .sku__price{font-size:28px;line-height:36px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:8px}
#product .sku__price:has(u),#sku-sticky-buy .sku-sticky-buy__price:has(.sku-sticky-buy__price-old){color:var(--ff-sale)}
#sku-sticky-buy .sku-sticky-buy__price-old{color:var(--ff-muted)}
#product .sku__price u,#sku-sticky-buy .sku-sticky-buy__price-old{color:var(--ff-muted);font-weight:400;font-size:14px;text-decoration:line-through}
#product .sku__action .btn--dashed{color:var(--ff-choice);font-size:14px}
#product .ff-purchase-summary,#sku-sticky-buy .ff-purchase-summary{font-size:14px;line-height:20px;margin:6px 0;color:var(--ff-muted);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#product .ff-purchase-price-label,#sku-sticky-buy .ff-purchase-price-label{display:block;font-size:13px;line-height:18px;color:var(--ff-muted)}
#sku-sticky-buy .ff-purchase-change{background:transparent;border:0;padding:6px 0;color:var(--ff-choice);font-size:14px;line-height:20px;text-decoration:underline;min-height:32px}
#sku-sticky-buy .ff-purchase-change:disabled{opacity:.5}
#sku-sticky-buy .sku-sticky-buy__meta{flex:1;min-width:0}
#sku-sticky-buy .sku-sticky-buy__price{flex-wrap:wrap;font-size:22px;line-height:28px;font-variant-numeric:tabular-nums}
#sku-sticky-buy .sku-sticky-buy__btn{max-width:45%;flex-shrink:0}
#product :focus-visible,#sku-sticky-buy :focus-visible{outline:3px solid var(--ff-choice);outline-offset:3px}
#product .sku__type,#product .sku__action{scroll-margin-top:160px}
@media(max-width:991px){#sku-sticky-buy .sku-sticky-buy__inner{align-items:center;gap:12px}#sku-sticky-buy .sku-sticky-buy__btn{min-width:120px;padding:10px 14px}#sku-sticky-buy .sku-sticky-buy__title{font-size:13px;line-height:18px}#product .sku__price{font-size:26px;line-height:32px}}
/* Desktop: keep the decision and action in one readable, centred group. */
@media(min-width:992px){
  #sku-sticky-buy{padding:0 24px}
  #sku-sticky-buy .sku-sticky-buy__inner{max-width:960px;margin:0 auto;padding:12px 20px;gap:24px}
  #sku-sticky-buy .sku-sticky-buy__meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,auto);grid-template-rows:auto auto;column-gap:32px;align-items:center}
  #sku-sticky-buy .sku-sticky-buy__title{grid-column:1;grid-row:1;font-size:14px;line-height:20px}
  #sku-sticky-buy .ff-purchase-summary{grid-column:1;grid-row:2;margin:4px 0 0}
  #sku-sticky-buy .ff-purchase-price-label{grid-column:2;grid-row:1;align-self:start}
  #sku-sticky-buy .sku-sticky-buy__price{grid-column:2;grid-row:2;align-self:start}
  #sku-sticky-buy .ff-purchase-change{grid-column:1;grid-row:3;justify-self:start;padding:2px 0;min-height:24px}
  #sku-sticky-buy .sku-sticky-buy__btn{min-width:156px;max-width:200px}
}

/* Server-rendered container (OCMOD): ff-purchase.js always fills it (at least "Кількість: 1") right after the first paint,
   so its line is reserved up front; hiding it while empty moved the buy button by 26 px (CLS ≈ 0.03–0.05 on desktop). */
#product .ff-purchase-summary{min-height:20px}
/* Phone bar: two compact lines — "0,5 кг × 2 · Змінити", then total — with the button on the right */
@media(max-width:991px){
  #sku-sticky-buy .sku-sticky-buy__title{display:none}
  #sku-sticky-buy .sku-sticky-buy__meta{display:grid;grid-template-columns:minmax(0,auto) auto;justify-content:start;align-items:center;column-gap:8px;row-gap:0}
  #sku-sticky-buy .ff-purchase-summary{grid-column:1;grid-row:1;margin:0;font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #sku-sticky-buy .ff-purchase-change{grid-column:2;grid-row:1;min-height:24px;padding:0;font-size:13px;line-height:18px}
  #sku-sticky-buy .ff-purchase-price-label{grid-column:1/-1;grid-row:2;margin-top:2px;font-size:12px;line-height:16px}
  #sku-sticky-buy .sku-sticky-buy__price{grid-column:1/-1;grid-row:3;font-size:20px;line-height:24px}
}

/* Product gallery before Slick starts. With "Швидкість: скрипти" the page is painted before the theme scripts run:
   all slides stood one under another (empty 380 px placeholders) and the buy block jumped by 637 px (CLS 0.21 on phones).
   Only the first slide and a row of thumbnails are shown until Slick adds .slick-initialized. */
.js-gallery-slides:not(.slick-initialized) > :not(:first-child){display:none}
.js-gallery-thumbs:not(.slick-initialized){display:flex;overflow:hidden}
.js-gallery-thumbs:not(.slick-initialized) > *{flex:0 0 7rem;width:7rem;height:7rem}