/* ==========================================================================
   FUN THEME — OpenCart 3.0.5.0 presentation theme
   Brand: магазин товарів для свята (FUNFAN)
   Loaded AFTER default/stylesheet/stylesheet.css — overrides only.
   Sections:
     1. Variables (palette, light/dark, layout tokens)
     2. Base & typography
     3. Buttons & forms
     4. Topbar (#top)
     5. Header (logo, search, cart, theme toggle)
     6. Main menu (#menu)
     7. Breadcrumb
     8. Product cards (.product-thumb)
     9. Product page
    9b. Home promo grid (hero banner + tiles)
    10. Catalog / panels / filter / pagination
    11. Footer
    12. Dark theme
    13. Responsive
   ========================================================================== */

/* 1. VARIABLES ============================================================ */
:root {
  /* Brand palette (from brief) */
  --fn-primary:        #79beb1;   /* mint  — main */
  --fn-primary-700:    #5fa99b;   /* mint hover */
  --fn-primary-50:     #eaf5f2;   /* mint tint */
  --fn-accent:         #836dad;   /* purple — accent */
  --fn-accent-700:     #6f5a99;
  --fn-accent-50:      #efecf5;
  --fn-pink:           #dc74ab;   /* pink — accent 2 */
  --fn-pink-700:       #cc5d98;
  --fn-pink-50:        #fbecf4;
  --fn-peach:          #e0995f;   /* peach — accent 3, home promo tiles only */
  --fn-peach-700:      #c97f45;
  --fn-peach-50:       #fbf0e4;
  --fn-gradient:       linear-gradient(135deg, #79beb1 0%, #836dad 55%, #dc74ab 100%);
  --fn-gradient-green: linear-gradient(135deg, #8fcabe 0%, #79beb1 45%, #5fa99b 100%); /* buttons */

  /* Semantic */
  --fn-success: #2fae7a;
  --fn-danger:  #e0586b;
  --fn-warning: #efb04a;
  --fn-star:    #f5b301;

  /* Surfaces — light theme */
  --fn-bg:        #ffffff;
  --fn-surface:   #f6f8f9;
  --fn-surface-2: #eef2f3;
  --fn-text:      #2b2f36;
  --fn-heading:   #20242b;
  --fn-muted:     #6b7280;
  --fn-border:    #e7eaee;
  --fn-shadow:    0 14px 38px rgba(40, 44, 60, .09);
  --fn-shadow-sm: 0 4px 16px rgba(40, 44, 60, .06);

  /* Frosted glass — one recipe shared by the bottom bar, off-canvas drawers,
     filters and the cart, so every panel reads as the same material.
     Less transparent than the pill (.6) so the effect stays crisp, not washed out. */
  --fn-glass-bg:     rgba(255, 255, 255, .78);
  --fn-glass-border: rgba(255, 255, 255, .55);
  --fn-glass-blur:   blur(22px) saturate(120%);
  --fn-glass-shadow: 0 12px 40px rgba(30, 34, 48, .18);

  /* Tokens */
  --fn-radius:    16px;
  --fn-radius-sm: 12px;
  --fn-radius-pill: 999px;
  --fn-font:      'Inter', 'Open Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fn-font-head: 'Manrope', 'Inter', 'Open Sans', Arial, sans-serif;
  --fn-maxw:      1320px;
}

/* 16. ACCOUNT DASHBOARD + TARGETED MOBILE FIXES ========================= */
.fn-related-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -6px;
  margin-right: -6px;
}
.fn-related-item {
  display: flex;
  padding: 6px;
  margin: 0;
}
.fn-related-item > .product-thumb {
  width: 100%;
  margin-bottom: 0;
}
.fn-related-item .fn-rating-slot { min-height: 30px; }
.fn-related-item .fn-rating-slot--empty { visibility: hidden; }

.fn-account { padding-bottom: 56px; }
.fn-account__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 38px;
  margin-bottom: 34px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  background: var(--fn-surface);
  box-shadow: var(--fn-shadow-sm);
}
.fn-account__hero h1 {
  margin: 5px 0 3px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}
.fn-account__kicker {
  display: inline-block;
  color: var(--fn-primary-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.fn-account__name {
  margin: 0 0 8px;
  color: var(--fn-pink-700);
  font-family: var(--fn-font-head);
  font-size: 20px;
  font-weight: 800;
}
.fn-account__intro {
  max-width: 610px;
  margin: 0;
  color: var(--fn-muted);
  font-size: 15px;
}
.fn-account__logout {
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-pill);
  color: var(--fn-heading);
  font-weight: 700;
  white-space: nowrap;
}
.fn-account__logout .fa { margin-right: 7px; color: var(--fn-pink-700); }
.fn-account__logout:hover,
.fn-account__logout:focus { border-color: var(--fn-pink-700); color: var(--fn-pink-700); text-decoration: none; }
.fn-account__logout:focus-visible,
.fn-account a:focus-visible { outline: 3px solid rgba(121, 190, 177, .45); outline-offset: 3px; }

.fn-account__section { margin-bottom: 34px; }
.fn-account__section > h2 {
  margin: 0 0 15px;
  font-size: 22px;
}
.fn-account__quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.fn-account__quick-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg);
  color: var(--fn-heading);
  font-family: var(--fn-font-head);
  font-weight: 700;
  box-shadow: var(--fn-shadow-sm);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.fn-account__quick-item:hover {
  border-color: var(--fn-primary);
  color: var(--fn-heading);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--fn-shadow);
}
.fn-account__quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(121, 190, 177, .15);
  color: var(--fn-primary-700);
  font-size: 18px;
}
.fn-account__quick-item > .fa { color: var(--fn-muted); }
.fn-account__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 42px;
}
.fn-account__group:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fn-account__list {
  border-top: 1px solid var(--fn-border);
}
.fn-account__list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 12px 3px;
  border-bottom: 1px solid var(--fn-border);
  color: var(--fn-heading);
  font-weight: 600;
}
.fn-account__list > a:hover { color: var(--fn-primary-700); text-decoration: none; }
.fn-account__list > a > span { display: flex; align-items: center; gap: 12px; }
.fn-account__list > a > span > .fa { width: 22px; color: var(--fn-primary-700); text-align: center; }
.fn-account__list > a > .fa { color: var(--fn-muted); }

.fn-toast {
  position: fixed;
  z-index: 1100;
  top: 92px;
  right: 18px;
  width: min(420px, calc(100vw - 36px));
  margin: 0;
  box-shadow: var(--fn-shadow);
}

.fn-news { padding-bottom: 70px; }
.fn-news__header { max-width: 760px; margin: 8px 0 34px; }
.fn-news__header > span {
  color: var(--fn-primary-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.fn-news__header h1 { margin: 4px 0 0; font-size: clamp(34px, 5vw, 56px); }
.fn-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px;
  border-top: 1px solid var(--fn-border);
}
.fn-news-card {
  min-width: 0;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--fn-border);
}
.fn-news-card time,
.fn-news-article__header time { color: var(--fn-muted); font-size: 12px; font-weight: 700; }
.fn-news-card h2 { margin: 9px 0 12px; font-size: 21px; line-height: 1.35; }
.fn-news-card h2 a { color: var(--fn-heading); }
.fn-news-card h2 a:hover { color: var(--fn-primary-700); }
.fn-news-card p { color: var(--fn-muted); }
.fn-news-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 800; }
.fn-news__pagination { margin-top: 28px; }
.fn-news__empty { padding: 40px 0; border-top: 1px solid var(--fn-border); color: var(--fn-muted); }
.fn-news--article #content { float: none; max-width: 900px; margin: 0 auto; }
.fn-news-article__header { margin: 10px 0 34px; }
.fn-news-article__header h1 { margin: 8px 0 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; }
.fn-news-article__body { font-size: 16px; line-height: 1.75; }
.fn-news-article__body img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: var(--fn-radius-sm); }
.fn-news-article__body table { display: block; max-width: 100%; overflow-x: auto; }
.fn-news-article__body h2,
.fn-news-article__body h3 { margin-top: 34px; }
.fn-news-article__back { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 38px; font-weight: 800; }

@media (max-width: 991px) {
  .fn-account__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  #menu .navbar-collapse.in .fn-drawer-account__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 16px 8px;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-pill);
    color: var(--fn-heading);
    font-weight: 700;
  }
  #menu .navbar-collapse.in .fn-drawer-account__logout .fa { color: var(--fn-pink-700); }
  #menu .navbar-collapse.in.fn-cat-open .fn-drawer-account__logout { display: none; }

  .fn-account { padding-bottom: 110px; }
  .fn-account .breadcrumb { margin-bottom: 7px; }
  .fn-account__hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding: 25px 21px;
    margin-bottom: 28px;
  }
  .fn-account__hero h1 { font-size: 34px; }
  .fn-account__logout { width: 100%; text-align: center; }
  .fn-account__groups { grid-template-columns: 1fr; gap: 0; }
  .fn-account__group:last-child:nth-child(odd) { grid-column: auto; }
  .fn-account__section { margin-bottom: 30px; }
  .fn-toast { top: 76px; right: 12px; width: calc(100vw - 24px); }
  .fn-news { padding-bottom: 110px; }
  .fn-news__header { margin-bottom: 22px; }
  .fn-news__grid { grid-template-columns: 1fr; }
  .fn-news-card { padding: 22px 0 25px; }
  .fn-news__pagination .text-right { margin-top: 12px; text-align: left; }
  .fn-news-article__body { font-size: 15px; }
}

@media (max-width: 359px) {
  .fn-account__quick { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-account__quick-item { transition: none; }
}

/* 2. BASE & TYPOGRAPHY ==================================================== */
body {
  font-family: var(--fn-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fn-text);
  background: var(--fn-bg);
  -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: var(--fn-maxw); } /* override Bootstrap fixed widths */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fn-font-head);
  color: var(--fn-heading);
  font-weight: 800;
  letter-spacing: -.01em;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

a { color: var(--fn-accent); transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a:hover, a:focus { color: var(--fn-pink-700); text-decoration: none; }

/* kill the default black focus box on click + the mobile tap flash;
   keep an accessible themed outline only for keyboard users */
* { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, .btn:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus, .thumbnail:focus, #logo a:focus, .mfp-close:focus, .mfp-arrow:focus { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fn-primary); outline-offset: 2px; border-radius: 4px;
}

#content { min-height: 380px; }
#content h1, #content h2 { margin-top: 8px; }

img { max-width: 100%; height: auto; }

/* Utility */
.fn-gradient-text {
  background: var(--fn-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3. BUTTONS & FORMS ===================================================== */
.btn {
  border-radius: var(--fn-radius-pill);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-sm { padding: 6px 14px; }
.btn-xs { padding: 3px 9px; border-radius: var(--fn-radius-sm); }

.btn-primary,
.btn-primary:focus {
  background: var(--fn-primary);
  border-color: var(--fn-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(121, 190, 177, .30);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active,
.btn-primary.disabled, .btn-primary[disabled] {
  background: var(--fn-primary-700);
  border-color: var(--fn-primary-700);
  background-position: initial;
  color: #fff;
}
.btn-default,
.btn-default:focus {
  background: var(--fn-bg);
  border-color: var(--fn-border);
  color: var(--fn-text);
  text-shadow: none;
}
.btn-default:hover {
  background: var(--fn-surface);
  border-color: var(--fn-primary);
  color: var(--fn-primary-700);
}
.btn-info,
.btn-info:focus {
  background: var(--fn-accent);
  border-color: var(--fn-accent);
  color: #fff;
}
.btn-info:hover { background: var(--fn-accent-700); border-color: var(--fn-accent-700); }
.btn-danger { background: var(--fn-danger); border-color: var(--fn-danger); }
.btn-success { background: var(--fn-success); border-color: var(--fn-success); }
.btn-warning { background: var(--fn-warning); border-color: var(--fn-warning); }
.btn-link { color: var(--fn-accent); }
.btn-link:hover { color: var(--fn-pink-700); }

/* gradient call-to-action helper */
.btn-fn-gradient {
  background: var(--fn-gradient-green);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(121, 190, 177, .32);
}
.btn-fn-gradient:hover, .btn-fn-gradient:focus { color: #fff; filter: brightness(1.04); }

.form-control {
  border-radius: var(--fn-radius-sm);
  border: 1px solid var(--fn-border);
  box-shadow: none;
  color: var(--fn-text);
  background: var(--fn-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--fn-primary);
  box-shadow: 0 0 0 3px rgba(121, 190, 177, .18);
}
legend { border-bottom: 1px solid var(--fn-border); color: var(--fn-heading); font-weight: 800; }
.input-group-addon { background: var(--fn-surface); border-color: var(--fn-border); }

/* 4. TOPBAR (#top) ======================================================= */
#top {
  background: var(--fn-surface);
  border-bottom: 1px solid var(--fn-border);
  min-height: 0;
  margin: 0;
  padding: 2px 0;
  font-size: 13px;
}
#top .container { padding: 0 20px; }
#top-links { padding-top: 0; }
#top #form-currency, #top #form-language { margin: 2px 0; }
#top-links .list-inline { margin-bottom: 0; }
#top-links .list-inline > li { padding-top: 4px; padding-bottom: 4px; }
#top .btn-link, #top-links li, #top-links a { color: var(--fn-muted); text-shadow: none; }
#top .btn-link:hover, #top-links a:hover { color: var(--fn-primary-700); }
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
  background: var(--fn-primary);
  background-image: none;
  text-shadow: none;
}
#top .dropdown-menu li > a:hover,
.dropdown-menu li > a:hover {
  background: var(--fn-primary);
  background-image: none;
}

/* theme toggle button in topbar */
.fn-theme-toggle {
  background: transparent;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-pill);
  color: var(--fn-muted);
  width: 32px; height: 32px;
  line-height: 1;
  cursor: pointer;
  margin-left: 12px;
  vertical-align: middle;
  transition: color .15s ease, border-color .15s ease;
}
.fn-theme-toggle:hover { color: var(--fn-accent); border-color: var(--fn-accent); }
.fn-theme-toggle .fa-sun-o { display: none; }
[data-theme="dark"] .fn-theme-toggle .fa-moon-o { display: none; }
[data-theme="dark"] .fn-theme-toggle .fa-sun-o { display: inline; }

/* 5. HEADER ============================================================== */
header.fn-header {
  background: var(--fn-bg);
  border-bottom: 1px solid var(--fn-border);
  padding: 0;
  position: relative;
  z-index: 1010;
  overflow-x: clip;
}
header.fn-stuck {
  position: sticky;
  top: 0;
  box-shadow: var(--fn-shadow-sm);
  animation: fnSlideDown .25s ease;
}
@keyframes fnSlideDown { from { transform: translateY(-6px); opacity: .6; } to { transform: none; opacity: 1; } }

/* header: one compact row — logo, then (unwrapped) ☰/search/icon-cluster/cart
   interleaved via `order`. .fn-head__main is display:contents so its children
   sit as direct flex items of .fn-head, next to the icon cluster (mirrors the
   same unwrap technique the mobile block below already used). */
.fn-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}
#logo.fn-head__logo {
  z-index: 3; margin: 0;
  display: flex; align-items: center;
  padding-right: 4px;
}
#logo img, #logo svg { height: 54px; width: auto; max-width: 100%; }
.fn-logo-text { font-family: var(--fn-font-head); font-weight: 800; font-size: 28px; color: var(--fn-heading); }
.fn-logo-link { display: flex; align-items: center; }
/* compact icon-only mark — swapped in for the full logo on mobile (see below) */
.fn-logo-icon { display: none; }

/* icon cluster (wishlist/phone/msg/account) — a compact block between search and cart */
.fn-head__topbar { order: 3; flex: 0 0 auto; }

.fn-head__main { display: contents; }
.fn-head__search { order: 2; flex: 0 1 380px; }
.fn-head__cart { order: 4; flex: 0 0 220px; max-width: 220px; }
.fn-head__cat { order: 1; display: none; } /* mobile-only by default; also shown on desktop when the header is stuck */

/* desktop: once the header is stuck (scrolled), the category bar has scrolled
   away — reveal the ☰ left of the search. The ☰ pins the NORMAL mega-menu
   bar just below the sticky header. */
@media (min-width: 768px) {
  /* logo hugs the left; this absorbs all the free space so search/icons/cart
     stay grouped tight and the cart pill ends up flush against the right edge */
  #logo.fn-head__logo { margin-right: auto; }

  header.fn-stuck .fn-head__cat {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 46px; width: 46px; height: 46px; padding: 0; cursor: pointer;
    border: none; border-radius: var(--fn-radius-sm);
    background: var(--fn-gradient-green); color: #fff; font-size: 19px;
  }
  header.fn-stuck .fn-head__cat:active { transform: translateY(1px); }
  /* search keeps its own width when stuck — the burger button just eats into
     the flexible gap after the logo (margin-right:auto), there's room to spare */

  body.fn-cat-pinned .fn-menu-wrap {
    position: fixed; left: 0; right: 0; z-index: 1009; margin: 0 auto;
    animation: fnSlideDown .2s ease;
  }
  body.fn-cat-pinned #menu { box-shadow: var(--fn-shadow-sm); }
}

/* top links: account, wishlist, language (right), currency, theme */
.fn-toplinks { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: 0; padding: 0; }
.fn-toplinks > li { padding: 2px 11px; font-size: 14px; line-height: 1.3; }
.fn-toplinks > li + li { border-left: 1px solid rgba(40, 44, 60, .12); }
.fn-toplinks a { color: var(--fn-text); }
.fn-toplinks a:hover { color: var(--fn-primary-700); }
.fn-toplinks form, .fn-toplinks .form-group { margin: 0; }
.fn-toplinks .btn-group > .btn, .fn-toplinks form .btn {
  background: transparent; border: none; box-shadow: none; text-shadow: none;
  color: var(--fn-text); padding: 2px 4px; font-size: 14px; font-weight: 600; line-height: 1.3;
}
.fn-toplinks .btn-group > .btn:hover { color: var(--fn-primary-700); }
[data-theme="dark"] .fn-toplinks > li + li { border-left-color: rgba(255, 255, 255, .12); }

/* visually hidden but still in the DOM/a11y tree — screen readers + the
   wishlist-count JS (targets "#wishlist-total span") still see it */
.fn-iconbtn__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* wishlist count, floated over the heart icon — mirrors .fn-mbar__badge */
.fn-wishlist-item { position: relative; }
.fn-iconbtn__badge {
  position: absolute; top: -7px; right: 1px;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: var(--fn-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fn-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; text-align: center;
  border: 2px solid var(--fn-bg);
  pointer-events: none;
}
.fn-iconbtn__badge[hidden] { display: none; }
/* heart turns pink once the wishlist actually holds something (class set by
   fun_theme.js alongside the badge) — beats .fn-toplinks a.fn-iconbtn's
   color:#fff via the ID selector, no !important needed */
#wishlist-total.fn-has-items .fa { color: var(--fn-pink); }

/* dropdowns hanging off the top-link icons (account, phones) — themed to
   match the rest of the site instead of Bootstrap's bare default popover.
   margin:0 kills Bootstrap's default 2px gap above the menu — with a gap,
   moving the mouse down from the toggle crosses a dead zone where neither
   element is :hover'd, so the menu closes before the cursor reaches it
   (intermittent depending on the exact mouse path). Flush = no dead zone. */
.fn-toplinks .dropdown-menu {
  margin: 0;
  border-color: var(--fn-border);
  border-radius: var(--fn-radius-sm);
  box-shadow: var(--fn-shadow-sm);
  padding: 6px 0;
  min-width: 170px;
}
.fn-toplinks .dropdown-menu > li > a { padding: 8px 16px; color: var(--fn-text); outline: none; }
/* :focus/:active too — mobile taps don't trigger :hover, they'd otherwise
   fall back to the browser's plain gray focus/tap highlight instead of this */
.fn-toplinks .dropdown-menu > li > a:hover,
.fn-toplinks .dropdown-menu > li > a:focus,
.fn-toplinks .dropdown-menu > li > a:active {
  background: var(--fn-primary-50); color: var(--fn-primary-700);
}
/* desktop: open on hover, same as the phone numbers below — no reason the
   account menu alone should need a click when everything else is hover */
@media (min-width: 768px) {
  .fn-toplinks > li.dropdown:hover > .dropdown-menu { display: block; }
}

/* contact phones: primary shown inline, the rest drop down on hover (mirrors the account menu) */
.fn-phones { position: relative; }
.fn-phones__main { white-space: nowrap; }
.fn-phones__main .fa, .fn-phones__menu > li > a .fa { color: var(--fn-primary-700); }
.fn-phones__menu { min-width: 0; padding: 6px 0; }
.fn-phones__menu > li > a { padding: 5px 16px; white-space: nowrap; color: var(--fn-text); }
.fn-phones__menu > li > a .fa { margin-right: 7px; }
.fn-phones__menu > li > a:hover { color: var(--fn-primary-700); background: var(--fn-primary-50); }

/* viber + telegram — plain brand-colour glyphs (no outline), kept on one line */
.fn-msg { display: inline-flex; align-items: center; gap: 11px; }
.fn-msg__btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fn-primary); background: none;
  transition: color .15s ease, transform .1s ease;
}
.fn-msg__btn:hover { color: var(--fn-primary-700); }
.fn-msg__btn:active { transform: translateY(1px); }
.fn-msg__btn svg { display: block; width: 22px; height: 22px; }

/* desktop-only: the icon cluster becomes round buttons matching the cart pill
   (wishlist/phone/viber/telegram/account). Scoped to min-width:768 so the
   mobile drawer — which reuses these exact elements via JS relocation —
   keeps its original flat-icon look untouched. */
@media (min-width: 768px) {
  .fn-toplinks { gap: 8px; }
  .fn-toplinks > li { padding: 0; }
  .fn-toplinks > li + li, [data-theme="dark"] .fn-toplinks > li + li { border-left: none; }
  .fn-msg { gap: 8px; }

  .fn-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 50%;
    /* solid, not the gradient — a gradient can't transition smoothly to a
       solid hover colour (the image layer just snaps), which reads as a
       flicker instead of a fade. Flat colour matches the search button too. */
    background: var(--fn-primary);
    box-shadow: 0 4px 10px rgba(121, 190, 177, .28);
    transition: background-color .15s ease, transform .1s ease;
  }
  /* higher specificity than ".fn-toplinks a" / ".fn-msg__btn:hover" so the
     glyph stays white at rest AND on hover — only the background darkens */
  .fn-toplinks a.fn-iconbtn,
  .fn-toplinks a.fn-iconbtn:hover,
  .fn-toplinks a.fn-iconbtn:focus {
    color: #fff;
  }
  .fn-iconbtn:hover, .fn-iconbtn:focus { background: var(--fn-primary-700); }
  .fn-iconbtn:active { transform: translateY(1px); }
  .fn-iconbtn .fa { font-size: 16px; }
  .fn-iconbtn svg { width: 18px; height: 18px; }
  .fn-wishlist-item .fn-iconbtn__badge { top: -4px; right: -4px; }
  /* the phone icon has its own colour rule (.fn-phones__main .fa, further up)
     for its old flat design — beat it so the glyph is white on the circle too */
  .fn-phones__main.fn-iconbtn .fa { color: #fff; }

  /* centered under the round trigger instead of left/right-anchored — with
     icons this close together, Bootstrap's left/right dropdown alignment
     could overshoot past neighbouring buttons */
  .fn-toplinks .dropdown-menu {
    left: 50%; right: auto; transform: translateX(-50%);
  }
}

/* "Наші магазини" button in the dark-green top bar — styled like the active language pill;
   extra right margin keeps it visually separate from the UA/RU switch */
.fn-stores-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; margin-right: 16px;
  border-radius: var(--fn-radius-pill);
  background: rgba(255, 255, 255, .2);
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; transition: background-color .15s ease;
}
.fn-stores-btn:hover { background: rgba(255, 255, 255, .32); color: #fff; }
.fn-stores-btn .fa { font-size: 14px; }
@media (max-width: 480px) { .fn-stores-btn__txt { display: none; } }

/* Stores: the street is the destination; contacts and hours share the width. */
[data-fn-stores] {
  --fn-store-ink: #286657;
  --fn-store-tint: var(--fn-primary-50);
  --fn-store-hover-shadow: 0 12px 28px rgba(32, 70, 59, .10);
}
[data-theme="dark"] [data-fn-stores] {
  --fn-store-ink: #a0dccc;
  --fn-store-tint: #203b35;
  --fn-store-hover-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}
[data-fn-stores] #content { min-height: 0; }
[data-fn-stores] ~ footer.fn-foot { margin-top: 0; }
.fn-stores-page {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin: 24px 0 32px;
}
.fn-store-card {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: 24px; border: 1px solid var(--fn-border); border-radius: 16px;
  background: var(--fn-bg);
  transition: transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .2s ease-out, border-color .2s ease-out;
}
[data-fn-stores] .fn-store-card__name {
  margin: 0; color: var(--fn-heading); font-family: var(--fn-font-head);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; text-wrap: balance;
}
.fn-store-card__city { margin: 8px 0 0; color: var(--fn-muted); font-size: 14px; line-height: 20px; }
.fn-store-card__details {
  display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--fn-border);
}
.fn-store-card__contacts { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.fn-store-card__phone {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--fn-heading); font-size: 18px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.fn-store-card__email {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%;
  color: var(--fn-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
.fn-store-card__phone:hover, .fn-store-card__email:hover { color: var(--fn-store-ink); text-decoration: underline; text-underline-offset: 4px; }
.fn-store-card__icon { flex: none; color: var(--fn-store-ink); }
.fn-store-card__email span { min-width: 0; overflow-wrap: anywhere; }
.fn-store-card__hours { align-self: start; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.5; }
.fn-store-card__hours caption { caption-side: top; padding: 0 6px 8px; color: var(--fn-text); font-size: 13px; font-weight: 600; text-align: left; }
.fn-store-card__hours caption .fn-store-card__icon { margin-right: 6px; vertical-align: -4px; }
.fn-store-card__hours th, .fn-store-card__hours td { padding: 6px; transition: background-color .14s ease-out, color .14s ease-out; }
.fn-store-card__hours th { border-radius: 6px 0 0 6px; color: var(--fn-muted); font-weight: 400; text-align: left; white-space: nowrap; }
.fn-store-card__hours td { border-radius: 0 6px 6px 0; color: var(--fn-text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fn-store-card__hours tr + tr > * { border-top: 1px solid var(--fn-border); }
.fn-store-card__map {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  margin-top: auto; padding: 10px 14px; border-radius: 10px;
  background: var(--fn-store-tint); color: var(--fn-store-ink); font-size: 14px; font-weight: 600; line-height: 1.5;
  transition: background-color .16s ease-out, color .16s ease-out;
}
.fn-store-card__map svg { flex: none; }
.fn-store-card__arrow { margin-left: auto; }
.fn-store-card__map:hover { background: var(--fn-store-ink); color: var(--fn-bg); text-decoration: none; }
.fn-store-card a:focus-visible { outline: 2px solid var(--fn-store-ink); outline-offset: 4px; border-radius: 4px; }
.fn-store-card:focus-within { border-color: var(--fn-primary); }
@media (hover: hover) and (pointer: fine) {
  .fn-store-card__hours tr:hover > * { background: var(--fn-store-tint); color: var(--fn-store-ink); }
  .fn-store-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--fn-store-hover-shadow); }
  .fn-store-card:hover .fn-store-card__map { background: var(--fn-store-ink); color: var(--fn-bg); }
}
@container (max-width: 339px) {
  .fn-store-card__details { grid-template-columns: 1fr; gap: 8px; }
  .fn-store-card__hours { width: 100%; }
  .fn-store-card__phone { font-size: 18px; }
  .fn-store-card__email { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-store-card, .fn-store-card__map, .fn-store-card__hours th, .fn-store-card__hours td { transition: none; }
  .fn-store-card:hover { transform: none; }
}

/* The map sits outside .container so it spans the viewport without overflow. */
.fn-stores-map {
  position: relative; isolation: isolate; z-index: 0;
  width: 100%; height: 800px; margin-top: 28px;
  background: var(--fn-surface-2); scroll-margin-top: 140px;
}
.fn-store-pin svg { display: block; width: 44px; height: 56px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.fn-store-pin:focus-visible { outline: 3px solid #2f7466; outline-offset: 4px; border-radius: 8px; }
.fn-stores-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; color: #222; }
.fn-stores-map .leaflet-popup-close-button { width: 36px; height: 36px; line-height: 36px; color: #444; }
.fn-stores-map .leaflet-popup-content { margin: 20px 28px 20px 20px; }
/* Keep Leaflet's positioning transform; translate only flips this popup below its pin. */
.fn-stores-map .fn-store-popup--below { translate: 0 calc(100% + 26px); }
.fn-store-popup--below .leaflet-popup-tip-container { top: -12px; bottom: auto; height: 13px; margin-top: 0; overflow: visible; }
/* The triangle overlaps the white panel by 1px, avoiding a fractional-pixel seam. */
.fn-store-popup--below .leaflet-popup-tip {
  width: 24px; height: 13px; margin: 0 auto; padding: 0;
  transform: none; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #fff; box-shadow: none;
}
.fn-store-popup { font-family: inherit; font-size: 14px; line-height: 1.5; color: #222; }
.fn-store-popup strong { font-size: 16px; }
.fn-store-popup .fn-store-card__icon { color: inherit; }
.fn-store-popup p { margin: 8px 0; }
.fn-store-popup a { display: inline-flex; align-items: center; min-height: 44px; color: #286657; font-weight: 700; }
.fn-stores-map__fallback {
  position: absolute; z-index: 800; left: 64px; top: 12px; right: 12px;
  width: fit-content; max-width: calc(100% - 76px); margin: 0; padding: 12px 16px;
  background: #fff; color: #222; border-radius: 8px; font-size: 14px;
}
@media (max-width: 767px) {
  [data-fn-stores] .fn-stores-page { grid-template-columns: 1fr; gap: 16px; }
  .fn-store-card { padding: 20px; gap: 16px; }
  .fn-stores-map { height: 75svh; min-height: 480px; max-height: 800px; scroll-margin-top: 100px; }
}

/* dark-green strip above the header — additional info menu. It sits BEFORE the
   header (not inside it), so it simply scrolls away; the header alone sticks.
   Full-width because the bar is outside the inner .container; links stay centered. */
.fn-topbar--green {
  background: linear-gradient(135deg, #3a8b7b 0%, #2f7466 55%, #276052 100%); /* dark green, deepens to the right */
}
.fn-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fn-toppages { display: flex; align-items: center; flex-wrap: wrap; min-height: 40px; }
.fn-toppages a {
  color: rgba(255, 255, 255, .92); font-size: 14px; font-weight: 600;
  padding: 9px 16px; line-height: 1.2; white-space: nowrap;
}
.fn-toppages a:first-child { padding-left: 0; }
.fn-toppages a + a { border-left: 1px solid rgba(255, 255, 255, .18); }
.fn-toppages a:hover { color: #fff; }

/* language switcher + theme toggle, pinned to the right of the green top bar */
.fn-topbar__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.fn-topbar__lang { display: inline-flex; }

/* inline UA / RU language switch — active item highlighted as a pill (no dropdown) */
.fn-lang { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.fn-lang__btn {
  background: transparent; border: none; cursor: pointer;
  padding: 3px 8px; border-radius: var(--fn-radius-pill);
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .03em;
  color: rgba(255, 255, 255, .72);
  transition: color .15s ease, background-color .15s ease;
}
.fn-lang__btn:hover { color: #fff; }
.fn-lang__btn.is-active { color: #fff; background: rgba(255, 255, 255, .2); cursor: default; }
.fn-topbar__tools .fn-theme-toggle {
  width: 28px; height: 28px; margin-left: 4px;
  border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .92);
}
.fn-topbar__tools .fn-theme-toggle:hover { color: #fff; border-color: #fff; }

@media (max-width: 767px) {
  /* the whole green info bar moves into the burger drawer (JS relocates the
     language switcher + theme toggle into .fn-drawer-topbar there) — nothing
     of it stays on the page itself */
  .fn-topbar--green { display: none; }
}

@media (max-width: 767px) {
  /* one very compact row: ☰ catalog · icon logo · search (grows) · icon cart.
     The top-link icons and the green info bar both move into the burger
     drawer (JS relocates the real elements there), so nothing else renders
     on the page header itself. */
  .fn-head {
    display: grid; /* base .fn-head is flex now — this breakpoint still wants a grid */
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: 8px;
    padding: 8px 0;
  }
  #logo.fn-head__logo {
    grid-column: auto; grid-row: auto; order: 2;
    justify-content: flex-start; padding: 0;
  }
  #logo .fn-logo-icon { display: none; }
  #logo .fn-logo-full { display: block; height: 42px; width: auto; max-width: none; }
  .fn-head__topbar { display: none; }
  /* unwrap so ☰ / search / cart become siblings of the logo in the same row
     instead of a nested flex row */
  .fn-head__main { display: contents; }
  .fn-head__cat {
    order: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
    border: none; border-radius: var(--fn-radius-sm);
    background: var(--fn-gradient-green); color: #fff; font-size: 18px;
  }
  .fn-head__cat:active { transform: translateY(1px); }
  .fn-head__search { order: 3; flex: 1 1 auto; max-width: none; width: auto; }
  .fn-head__cart { order: 4; flex: 0 0 auto; max-width: none; width: auto; }
  /* cart compaction lives in the bottom responsive block so it wins over the
     later base `#cart > .btn` rule */
}
#logo h1 { margin: 0; font-size: 26px; }
#logo h1 a { color: var(--fn-heading); }

/* search (header live area, id=search) */
#search { margin: 0; }
#search .input-lg {
  height: 42px;
  border-radius: var(--fn-radius-pill) 0 0 var(--fn-radius-pill);
  border: 2px solid var(--fn-surface-2);
  border-right: none;
}
#search .input-lg:focus { border-color: var(--fn-primary); box-shadow: none; }
#search .btn-lg {
  height: 42px;
  border-radius: 0 var(--fn-radius-pill) var(--fn-radius-pill) 0;
  background: var(--fn-primary);
  border-color: var(--fn-primary);
  color: #fff;
  text-shadow: none;
  padding: 0 24px;
}
#search .btn-lg:hover { background: var(--fn-primary-700); }

/* search autocomplete dropdown */
#search { position: relative; }
.fn-ac {
  position: absolute;
  top: calc(100% + 8px);
  left: -54px;
  right: -54px;
  z-index: 1200;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--fn-surface);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  box-shadow: var(--fn-shadow);
  overscroll-behavior: contain;
}
.fn-ac__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  color: var(--fn-text);
}
.fn-ac__item:hover,
.fn-ac__item.is-active { background: var(--fn-primary-50, rgba(121, 190, 177, .12)); color: var(--fn-text); }
.fn-ac__thumb {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--fn-border);
}
.fn-ac__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fn-ac__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fn-heading, var(--fn-text));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fn-ac__price { font-size: 12px; font-weight: 700; color: var(--fn-primary-700); }
.fn-ac__price-new { color: var(--fn-primary-700); }
.fn-ac__price-old { margin-left: 7px; font-weight: 500; color: var(--fn-muted); text-decoration: line-through; }
.fn-ac__all {
  display: block;
  margin-top: 4px;
  padding: 10px 8px;
  border-top: 1px solid var(--fn-border);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--fn-primary-700);
  border-radius: 0 0 8px 8px;
}
.fn-ac__all:hover { background: var(--fn-primary-50, rgba(121, 190, 177, .12)); color: var(--fn-primary-700); }
.fn-ac__all.is-active { background: var(--fn-primary-50, rgba(121, 190, 177, .12)); }
.fn-ac__empty { padding: 18px 8px; text-align: center; color: var(--fn-muted); font-size: 13px; }

/* cart button */
#cart { margin: 0; }
#cart > .btn {
  border-radius: var(--fn-radius-pill);
  /* solid, not the gradient — lets the hover colour transition smoothly
     instead of the background-image just snapping (reads as a flicker) */
  background: var(--fn-primary);
  transition: background-color .15s ease;
  border: none;
  color: #fff;
  min-height: 42px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(121, 190, 177, .28);
}
#cart > .btn:hover { background: var(--fn-primary-700); color: #fff; }
#cart.open > .btn { background: var(--fn-bg); color: var(--fn-text); border: 1px solid var(--fn-border); filter: none; }
#cart .dropdown-menu {
  background: var(--fn-bg);
  border: none;
  border-radius: var(--fn-radius);
  box-shadow: var(--fn-shadow);
  padding: 10px;
  margin-top: 10px;
}
#cart .dropdown-menu table { margin-bottom: 8px; }
#cart .dropdown-menu img { border-radius: 10px; }

/* 6. MAIN MENU (#menu) =================================================== */
#menu {
  background: var(--fn-bg);
  background-image: none;
  border: none;
  border-bottom: 1px solid var(--fn-border);
  border-radius: 0;
  min-height: 50px;
  margin-bottom: 0;
  position: relative;
}
#menu .nav > li > a {
  color: var(--fn-heading);
  text-shadow: none;
  font-weight: 700;
  font-size: 14px;
  padding: 15px 13px;
  border-radius: 0;
}
#menu .nav > li:hover > a, #menu .nav > li.open > a {
  background: var(--fn-primary-50);
  color: var(--fn-primary-700);
}

/* full-width mega menu */
#menu .dropdown-menu, #menu .fn-mega {
  border: none;
  border-radius: 0 0 var(--fn-radius) var(--fn-radius);
  box-shadow: var(--fn-shadow);
  padding: 28px 30px;
  margin-top: 0;
}
.fn-menu-wrap { position: relative; margin-bottom: 24px; }
/* soft green strip atop the dropdown (also bridges the hover gap to the menu item) */
#menu .fn-mega::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 6px;
  background: rgba(121, 190, 177, .4);
}
@media (min-width: 768px) {
  /* full-width mega-menu anchored to the menu .container.
     Pin the RIGHT edge + explicit width:100% (left-anchoring proved unreliable
     across items; right + width positions every dropdown identically). */
  #menu, #menu .navbar-nav, #menu .navbar-nav > li.dropdown { position: static; }
  .fn-menu-wrap .fn-mega { left: auto; right: 0; width: 100%; top: 100%; margin: 0; }
  /* open the mega menu on hover/keyboard-focus so the parent link stays clickable */
  #menu .navbar-nav > li.dropdown:hover > .fn-mega,
  #menu .navbar-nav > li.dropdown:focus-within > .fn-mega { display: block; }
}
.fn-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 36px;
  margin: 0;
}
.fn-mega__grid > li > a {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 12px; border-radius: 12px;
  color: var(--fn-text); font-size: 14px; line-height: 1.35;
}
.fn-mega__grid > li > a:hover { color: var(--fn-primary-700); background: var(--fn-primary-50); }
.fn-mega__img {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--fn-border); background: #fff;
}
.fn-mega__parent { display: none; } /* shown only in the mobile two-pane drawer */
@media (max-width: 767px) {
  .fn-mega { box-shadow: none; padding: 4px 0 10px; }
  .fn-mega__grid { grid-template-columns: 1fr; gap: 0; }
}
#menu .btn-navbar {
  background: var(--fn-gradient-green);
  background-image: var(--fn-gradient-green);
  border: none;
  border-radius: var(--fn-radius-sm);
}
#menu #category { color: var(--fn-heading); text-shadow: none; }

/* 7. BREADCRUMB ========================================================== */
.breadcrumb {
  background: transparent;
  border: none;
  padding: 6px 0 14px;
  margin-bottom: 18px;
  font-size: 13px;
}
.breadcrumb > li { text-shadow: none; padding: 0; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li + li:before {
  content: '\203A';
  color: var(--fn-muted);
  padding: 0 10px;
}
.breadcrumb > li > a { color: var(--fn-muted); }
.breadcrumb > li > a:hover { color: var(--fn-primary-700); }
.breadcrumb > .active, .breadcrumb > li:last-child { color: var(--fn-heading); }

/* 8. PRODUCT CARDS (.product-thumb) ===================================== */
/* equal-height cards: turn each product row into a flex row so every column
   stretches to the tallest one; the card fills its column and pins the
   price + buttons to the bottom (shorter cards just get a little whitespace) */
.row:has(> .product-layout) { display: flex; flex-wrap: wrap; margin-left: -6px; margin-right: -6px; }
/* compact, EQUAL gutters: a uniform 6px padding on every column yields an even
   12px gap both horizontally AND vertically. The default stylesheet's 20px card
   margin-bottom is removed so it can't add extra vertical space. */
.product-layout { display: flex; padding: 6px; margin: 0; }
.product-layout > .product-thumb { width: 100%; margin-bottom: 0; }
/* category listing wraps caption + buttons in an extra unclassed <div>;
   make it grow as a column so the button bar can drop to the card bottom */
.product-thumb > div:not(.image):not(.caption):not(.button-group) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
/* button bar always sticks to the bottom of the product item */
.product-thumb .button-group { margin-top: auto; }

.product-thumb {
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  overflow: hidden;
  background: var(--fn-bg);
  box-shadow: var(--fn-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: flex;
  flex-direction: column;
}
.product-thumb:hover {
  transform: translateY(-3px);
  box-shadow: var(--fn-shadow);
  border-color: var(--fn-primary);
}
.product-thumb .image { position: relative; padding: 14px; background: var(--fn-bg); }
.product-thumb .image img { border-radius: 10px; }
.product-thumb .image a:hover { opacity: 1; }
.product-thumb .caption {
  padding: 4px 18px 14px;
  min-height: 0;
  text-align: left;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.product-thumb .caption h4 {
  font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 8px;
  min-height: 40px; /* reserve 2 lines so every card lines up */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-thumb .caption h4 a { color: var(--fn-heading); }
.product-thumb .caption h4 a:hover { color: var(--fn-primary-700); }
.product-thumb .caption p:not(.price) {
  color: var(--fn-muted); font-size: 13px; line-height: 1.5;
  min-height: 39px; /* reserve 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-thumb .rating { padding-bottom: 8px; }
.product-thumb .price { color: var(--fn-heading); font-weight: 800; font-size: 18px; margin: auto 0 0; padding-top: 8px; }
.product-thumb .price-new { color: var(--fn-pink-700); }
.product-thumb .price-old { color: var(--fn-muted); margin-left: 8px; font-weight: 500; }
.product-thumb .price-tax { color: var(--fn-muted); font-size: 12px; font-weight: 400; }
.product-thumb .button-group {
  border-top: 1px solid var(--fn-border);
  background: var(--fn-bg);
  display: flex;
}
.product-thumb .button-group button {
  background: var(--fn-bg);
  color: var(--fn-muted);
  line-height: 44px;
  font-weight: 700;
  font-size: 12px;
  text-transform: none;
  transition: background-color .15s ease, color .15s ease;
}
.product-thumb .button-group button:first-child { color: var(--fn-primary-700); }
.product-thumb .button-group button:hover { background: var(--fn-primary-50); color: var(--fn-primary-700); }
.product-thumb .button-group button + button { border-left: 1px solid var(--fn-border); }
.product-thumb .button-group button.fn-card-buy--disabled,
.product-thumb .button-group button.fn-card-buy--disabled:hover {
  background: var(--fn-surface-2);
  color: var(--fn-muted);
  cursor: not-allowed;
}

/* sale / new stickers (works if markup adds .product-thumb .label-* ) */
.product-thumb .image .fn-label,
.fn-label {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--fn-pink); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 10px;
  border-radius: var(--fn-radius-pill);
}

.rating .fa-star { color: var(--fn-star); }
.rating .fa-star-o { color: #d3d8de; }

/* 9. PRODUCT PAGE ======================================================= */
/* product gallery: main image, then a horizontally-scrolling row of small
   thumbs below it (left-aligned, same gap everywhere — main-to-row and
   thumb-to-thumb both use the same 12px). A flat run of <a> elements (no
   <li> wrapper) so a few other features that scrape `.thumbnails`/
   `.image-additional` (JSON-LD, recently-viewed, quick view) keep working
   unmodified. The row only scrolls (rather than wrapping to more lines)
   once there are more thumbs than fit — prev/next buttons appear then. */
.fn-gallery__thumbs {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.fn-gallery__thumb { margin: 0; display: block; flex: 0 0 auto; }
.fn-gallery__thumb--main {
  align-self: stretch; width: 100%;
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius);
  overflow: hidden; background: #fff; cursor: zoom-in;
}
.fn-gallery__thumb--main img {
  display: block; width: 100%; height: auto; transition: transform .4s ease;
}
.fn-gallery__thumb--main:hover img { transform: scale(1.06); }
/* thumb row: gap to the main image above and gap between thumbs are both
   the same 12px (the container's own `gap` in .fn-gallery__thumbs handles
   the vertical one, .fn-gallery__thumbs-track's `gap` the horizontal one) —
   the scroll arrows sit in that same 12px rhythm via the row's own gap,
   not extra margins, so nothing throws the spacing off. No native
   scrollbar: the track still scrolls (wheel/touch/arrow buttons), it just
   doesn't draw one. */
.fn-gallery__thumbs-row { position: relative; display: flex; align-items: center; gap: 12px; }
.fn-gallery__thumbs-track {
  display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
}
.fn-gallery__thumbs-track::-webkit-scrollbar { display: none; }
.fn-gallery__thumb.image-additional,
.fn-gallery__thumb--video {
  position: relative;
  width: 76px; height: 76px; padding: 5px;
  border: 1px solid var(--fn-border); border-radius: 12px; overflow: hidden;
  background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.fn-gallery__thumb.image-additional img,
.fn-gallery__thumb--video img {
  width: 100%; height: 100%; object-fit: contain; margin: 0;
}
.fn-gallery__thumb.image-additional.is-active,
.fn-gallery__thumb.image-additional:hover,
.fn-gallery__thumb--video:hover {
  border-color: var(--fn-primary); box-shadow: 0 0 0 2px var(--fn-primary-50);
}
.fn-gallery__thumb--video .fn-gallery__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 22, 28, .35); color: #fff; font-size: 20px;
}
/* plain chevrons, no button chrome (circle/border/shadow) — only shown by
   JS when the track actually overflows */
.fn-gallery__scroll {
  flex: 0 0 auto; border: none; background: none; box-shadow: none;
  padding: 0; width: 16px; color: var(--fn-muted); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fn-gallery__scroll:hover { color: var(--fn-primary-700); }
.fn-gallery__scroll[hidden] { display: none; }
[data-theme="dark"] .fn-gallery__thumb { background: var(--fn-surface); }
/* magnific lightbox — rounded image, no dark top strip, dark close on image */
.mfp-img { border-radius: var(--fn-radius); padding-top: 0 !important; }
img.mfp-img { box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.mfp-figure:after { display: none; }
/* dark, clearly visible close button sitting on the image (override magnific) */
.mfp-image-holder .mfp-close {
  width: 44px !important; height: 44px !important; line-height: 44px !important;
  padding: 0 !important; top: 14px !important; right: 14px !important;
  text-align: center !important; color: #20242b !important; /* кнопка завжди біла, токен у темній темі світлий */
  opacity: 1 !important; font-size: 28px !important; font-weight: 700;
  background: rgba(255, 255, 255, .95) !important; border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.mfp-image-holder .mfp-close:hover { background: #fff !important; color: var(--fn-pink-700) !important; }
/* caption: side padding + vertical centering in the bottom strip */
.mfp-bottom-bar { margin-top: -40px !important; min-height: 40px; display: flex; align-items: center; }
.mfp-title { padding: 0 20px !important; color: #fff; }
.mfp-counter { right: 20px !important; top: 50% !important; transform: translateY(-50%); color: rgba(255, 255, 255, .85); }
#product h2.price { color: var(--fn-pink-700); font-weight: 800; }
.product-info .price-new { color: var(--fn-pink-700); }
.nav-tabs { border-bottom: 2px solid var(--fn-border); }
.nav-tabs > li > a { border: none; color: var(--fn-muted); font-weight: 700; border-radius: var(--fn-radius-sm) var(--fn-radius-sm) 0 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  border: none;
  color: var(--fn-primary-700);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--fn-primary);
}
.nav-tabs > li > a:hover { background: var(--fn-surface); border: none; }

/* product description sometimes arrives pasted from another editor wrapped
   in <pre>, which forces monospace + no-wrap + a horizontal scrollbar;
   normalize it so it reads like the rest of the page */
#tab-description pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
#tab-description span[style] { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

/* quantity stepper: pill row, icon buttons each end, centered input, no
   native spinner arrows */
.fn-qty {
  display: inline-flex; align-items: stretch; width: 132px;
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius-pill);
  overflow: hidden; background: #fff;
}
.fn-qty__btn {
  flex: 0 0 auto; width: 36px; border: none; background: transparent;
  color: var(--fn-primary-700); font-size: 18px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.fn-qty__btn:hover { background: var(--fn-primary-50); }
.fn-qty__btn:active { transform: scale(.95); }
.fn-qty__input {
  flex: 1 1 auto; width: auto; min-width: 0; text-align: center;
  border: none; border-left: 1px solid var(--fn-border); border-right: 1px solid var(--fn-border);
  border-radius: 0; box-shadow: none;
}
.fn-qty__input:focus { box-shadow: none; }
.fn-qty__input::-webkit-inner-spin-button,
.fn-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fn-qty__input { -moz-appearance: textfield; appearance: textfield; }
[data-theme="dark"] .fn-qty { background: var(--fn-surface); }

/* buy box meta/price card: SKU front and center, secondary meta small and
   muted, price visually split off below a divider, wishlist tucked into
   the corner instead of floating above the title on its own. */
.fn-buybox__meta-price {
  position: relative; margin: 14px 0 18px; padding: 14px 44px 14px 16px;
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm);
  background: var(--fn-surface);
}
.fn-buybox__wishlist {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fn-border);
  background: #fff; color: var(--fn-muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.fn-buybox__wishlist:hover { color: var(--fn-pink-700); border-color: var(--fn-pink-700); }
[data-theme="dark"] .fn-buybox__wishlist { background: var(--fn-surface); }
.fn-buybox__sku { font-size: 15px; font-weight: 700; color: var(--fn-heading); }
.fn-buybox__sku b { color: var(--fn-primary-700); }
.fn-buybox__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px;
  color: var(--fn-muted); font-size: 12px;
}
.fn-buybox__meta a { color: var(--fn-primary-700); }
.fn-buybox__price-row {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--fn-border);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px;
}
.fn-buybox__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fn-buybox__price-current {
  font-family: var(--fn-font-head); font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--fn-pink-700);
}
.fn-buybox__price-old { font-size: 15px; color: var(--fn-muted); text-decoration: line-through; }
.fn-buybox__price-tax, .fn-buybox__price-points { font-size: 12px; color: var(--fn-muted); }
.fn-buybox__discounts { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-buybox__discount {
  font-size: 11px; padding: 3px 9px; border-radius: var(--fn-radius-pill);
  background: var(--fn-primary-50); color: var(--fn-primary-700);
}
[data-theme="dark"] .fn-buybox__meta-price { background: var(--fn-surface); }

/* quantity: label + stepper in one compact row instead of a stacked
   block-level label on its own line */
/* the stepper leaves the right half of this row empty, so the availability
   badge lives there instead of on a line of its own under the buttons */
.fn-buybox__qty { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.fn-buybox__qty .fn-stock { margin-left: auto; margin-bottom: 0; }
@media (max-width: 767px) {
  /* left-aligned instead, so it reads the same whether it fits on the row or
     wraps under the stepper */
  .fn-buybox__qty .fn-stock { margin-left: 0; }
}
.fn-buybox__qty-label {
  margin: 0; font-size: 12px; font-weight: 700; color: var(--fn-heading);
  text-transform: uppercase; letter-spacing: .04em;
}

/* buy buttons side by side (room for it now the buy box is 50% wide) */
.fn-buybox__actions { display: flex; gap: 12px; margin: 16px 0; }
.fn-buybox__actions .btn { flex: 1 1 0; margin: 0; }
.fn-buybox__actions .btn[disabled] {
  opacity: 1;
  background: var(--fn-surface-2);
  border-color: var(--fn-border);
  color: var(--fn-muted);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

.fn-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid rgba(224, 88, 107, .26);
  border-radius: var(--fn-radius-sm);
  background: rgba(224, 88, 107, .10);
  color: #8f2f3f;
}
.fn-unavailable__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(224, 88, 107, .16);
  color: #c23a4e;
  font-size: 16px;
}
.fn-unavailable__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.4;
}
.fn-unavailable__content strong {
  color: #9d3042;
  font-size: 15px;
}
.fn-unavailable__content > span {
  font-size: 13px;
}
[data-theme="dark"] .fn-unavailable {
  color: #f2b5be;
  background: rgba(224, 88, 107, .12);
  border-color: rgba(224, 88, 107, .30);
}
[data-theme="dark"] .fn-unavailable__content strong,
[data-theme="dark"] .fn-unavailable__icon {
  color: #f28a99;
}

/* stock/availability line, moved below the buy buttons */
/* availability badge: as a grey line of text under the buttons it was lost,
   and "in stock" read exactly like "out of stock". Colour + icon carry the
   meaning; --unknown is the fallback when the stock_state module is off. */
.fn-stock {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 7px 14px;
  border: 1px solid transparent; border-radius: var(--fn-radius-pill);
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.fn-stock .fa { font-size: 15px; }
.fn-stock--in {
  color: #1d8d5f; background: rgba(47, 174, 122, .12); border-color: rgba(47, 174, 122, .28);
}
.fn-stock--out {
  color: #c23a4e; background: rgba(224, 88, 107, .10); border-color: rgba(224, 88, 107, .26);
}
.fn-stock--unknown { color: var(--fn-muted); background: var(--fn-surface-2); }
[data-theme="dark"] .fn-stock--in { color: #6fd3a5; }
[data-theme="dark"] .fn-stock--out { color: #f28a99; }

/* reassurance block: delivery/payment/warranty rows under the buy box,
   mirrors the old site's block but restyled with the fn-* design tokens.
   Grid (not flex-wrap) so each row is at most 2 tight lines — icon+text on
   line 1, the small meta note on line 2, price vertically centered beside
   both — instead of forcing text/meta/price onto three separate full-width
   lines with generous padding. */
.fn-reassurance {
  margin: 0 0 20px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm);
  box-shadow: var(--fn-shadow-sm); overflow: hidden; background: #fff;
}
.fn-reassurance__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 8px; padding: 6px 12px;
  border-bottom: 1px solid var(--fn-border);
  font-size: 12px; line-height: 1.35;
}
.fn-reassurance__row:last-child { border-bottom: none; }
.fn-reassurance__icon {
  grid-column: 1; grid-row: 1 / span 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fn-primary-50); color: var(--fn-primary-700);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.fn-reassurance__text { grid-column: 2; grid-row: 1; color: var(--fn-text); }
.fn-reassurance__meta { grid-column: 2; grid-row: 2; color: var(--fn-muted); }
.fn-reassurance__price {
  grid-column: 3; grid-row: 1 / span 2; text-align: right;
  font-weight: 700; color: var(--fn-heading); white-space: nowrap;
}
.fn-reassurance__price--free { color: var(--fn-success); }
.fn-reassurance__row--plain { grid-template-columns: auto 1fr; }
.fn-reassurance__row--plain .fn-reassurance__text { grid-row: 1 / span 2; }
[data-theme="dark"] .fn-reassurance,
[data-theme="dark"] .fn-qty { background: var(--fn-surface); }

/* product video tile: 16:9 embed inside its modal */
.fn-gallery__video-frame { position: relative; padding-top: 56.25%; }
.fn-gallery__video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  border-radius: var(--fn-radius-sm);
}

/* Link from the product pickup row to the active store map. */
.fn-maplink {
  display: inline-block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--fn-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fn-maplink:hover, .fn-maplink:focus { color: var(--fn-primary-700); }
/* Bootstrap's own modal layer (1040/1050) sits below everything this theme
   puts on top — the mobile action bar (1150), the drawers and their backdrop
   (1190/1200) — so any dialog got overlapped at the bottom. Lift both the
   backdrop and the modal above that stack; the action bar then dims under the
   backdrop like the rest of the page instead of floating over the map. */
.modal-backdrop { z-index: 1210; }
.modal { z-index: 1220; }
/* dialog pinned next to its trigger — JS writes left/top (see anchorDialog) */
.modal.fn-anchored .modal-dialog { position: absolute; margin: 0; }

/* "buy in 1 click" modal */
/* phones don't get the anchored dialog (see anchorDialog), so centre it there
   instead of leaving it hanging off the top edge */
@media (max-width: 767px) {
  #fn-buy1click.in { display: flex !important; align-items: center; }
  #fn-buy1click .modal-dialog { width: calc(100% - 20px); margin: 10px auto; }
}
.fn-b1c__hint { color: var(--fn-muted); margin-bottom: 16px; }
.fn-b1c__error { margin: 10px 0; }
.fn-b1c__success { font-size: 16px; color: var(--fn-success); text-align: center; padding: 20px 0; }
.fn-b1c__success .fa { margin-right: 8px; }

/* 9b. HOME PROMO GRID (hero banner + tiles) ============================= */
/* extension/module/promo_grid — replaces the old plain slideshow: a big
   banner card (left, can rotate several category slides) plus up to 4
   smaller tiles (right) linking to categories or arbitrary pages. */
/* Grid maths: with columns 1.6fr / 1fr and a 16:10 main banner, the tile
   column works out to exactly two square tiles — so every gutter in the
   block (between columns, between tiles, horizontal and vertical) is the
   same --fn-promo-gap and nothing has to be nudged by hand. */
.fn-promo {
  --fn-promo-gap: 18px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--fn-promo-gap);
  align-items: stretch;
  margin: 22px 0;
}
.fn-promo__main { min-width: 0; }
.fn-promo__slider {
  height: 100%;
  border-radius: var(--fn-radius); overflow: hidden; box-shadow: var(--fn-shadow-sm);
}
.fn-promo__slide {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fn-surface-2);
}
.fn-promo__slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-promo__slide-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 28px 24px;
  background: linear-gradient(0deg, rgba(20, 24, 30, .72) 0%, rgba(20, 24, 30, .32) 55%, rgba(20, 24, 30, 0) 100%);
}
.fn-promo__slide-title {
  margin: 0 0 6px; color: #fff; font-size: 26px; line-height: 1.2;
  font-family: var(--fn-font-head); font-weight: 800;
}
.fn-promo__slide-subtitle { margin: 0 0 16px; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.4; max-width: 32em; }
/* sits on top of a photo, so its colours are fixed rather than themed —
   --fn-heading goes near-white in dark mode and would vanish on the white pill */
.fn-promo__slide-btn {
  display: inline-flex; align-items: center;
  padding: 10px 22px; border-radius: var(--fn-radius-pill);
  background: #fff; color: #20242b; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.fn-promo__slide-btn:hover, .fn-promo__slide-btn:focus { background: #f1f3f6; color: #20242b; }
.fn-promo__slide-cover { position: absolute; inset: 0; z-index: 1; }

.fn-promo__tiles {
  min-width: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: var(--fn-promo-gap);
}
.fn-promo__tile {
  position: relative;
  display: block;
  min-height: 0;
  border-radius: var(--fn-radius);
  overflow: hidden;
  box-shadow: var(--fn-shadow-sm);
  background: var(--fn-surface-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fn-promo__tile:hover { transform: translateY(-3px); box-shadow: var(--fn-shadow); }
.fn-promo__tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* same treatment as the big banner's copy — scrim + heading type, so the two
   halves of the block read as one system instead of captions in floating chips */
.fn-promo__tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 15px;
  background: linear-gradient(0deg, rgba(20, 24, 30, .78) 0%, rgba(20, 24, 30, .34) 58%, rgba(20, 24, 30, 0) 100%);
  color: #fff; font-family: var(--fn-font-head); font-weight: 800; font-size: 15px; line-height: 1.25;
}
.fn-promo__tile-label::before {
  content: ''; display: block;
  width: 26px; height: 3px; margin-bottom: 8px; border-radius: 2px;
  background: var(--fn-primary);
}
.fn-promo__tile--mint .fn-promo__tile-label::before   { background: var(--fn-primary); }
.fn-promo__tile--pink .fn-promo__tile-label::before   { background: var(--fn-pink); }
.fn-promo__tile--purple .fn-promo__tile-label::before { background: var(--fn-accent); }
.fn-promo__tile--peach .fn-promo__tile-label::before  { background: var(--fn-peach); }

@media (max-width: 991px) {
  .fn-promo__slide-title { font-size: 22px; }
  .fn-promo__slide-subtitle { font-size: 13px; }
  .fn-promo__tile-label { font-size: 13px; padding: 28px 13px 12px; }
}

/* phones: one column, so the tiles no longer stretch to the banner and need
   their own square ratio back */
@media (max-width: 767px) {
  .fn-promo { --fn-promo-gap: 12px; grid-template-columns: 1fr; margin: 14px 0; }
  .fn-promo__tiles { grid-template-rows: auto auto; }
  .fn-promo__tile { aspect-ratio: 1 / 1; }
  .fn-promo__slide-copy { padding: 18px 18px 16px; }
  .fn-promo__slide-title { font-size: 20px; }
  .fn-promo__slide-subtitle { margin-bottom: 12px; }
}

/* 9c. HOME BENEFITS STRIP ============================================== */
/* extension/module/benefits — six fixed selling points right under the promo
   grid. Copy comes from the language files, so this file only owns the shape:
   a light card, a tinted icon chip and two lines of type. */
.fn-benefits { margin: 30px 0 4px; }
.fn-benefits__heading { margin: 0 0 16px; font-size: 22px; }
.fn-benefits__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
}
/* filled cards rather than outlined ones: the product grid right below is
   white-on-white with a border, so the strip needs to read as a different
   kind of thing at a glance */
.fn-benefits__card {
  display: flex; flex-direction: column;
  padding: 20px 18px 22px;
  border: 1px solid transparent;
  border-radius: var(--fn-radius);
  background: var(--fn-surface);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fn-benefits__card:hover { transform: translateY(-3px); background: var(--fn-bg); box-shadow: var(--fn-shadow); }
/* the chip carries the colour, so the icon itself stays a thin line drawing
   and the six cards read as one row rather than six loud badges */
.fn-benefits__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 14px;
  background: var(--fn-benefit-tint);
  color: var(--fn-benefit-tone);
}
.fn-benefits__icon svg { width: 26px; height: 26px; display: block; }
.fn-benefits__title {
  margin: 0 0 6px;
  font-family: var(--fn-font-head); font-weight: 800; font-size: 15px; line-height: 1.25;
  color: var(--fn-heading);
}
.fn-benefits__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fn-muted); }

/* the accent rotates card to card so the strip picks up the whole brand
   palette instead of six identical mint chips */
.fn-benefits__card--mint   { --fn-benefit-tint: var(--fn-primary-50); --fn-benefit-tone: var(--fn-primary-700); }
.fn-benefits__card--purple { --fn-benefit-tint: var(--fn-accent-50);  --fn-benefit-tone: var(--fn-accent-700); }
.fn-benefits__card--pink   { --fn-benefit-tint: var(--fn-pink-50);    --fn-benefit-tone: var(--fn-pink-700); }
.fn-benefits__card--peach  { --fn-benefit-tint: var(--fn-peach-50);   --fn-benefit-tone: var(--fn-peach-700); }

@media (max-width: 1199px) {
  .fn-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .fn-benefits__heading { font-size: 20px; }
  .fn-benefits__card { padding: 18px 16px 20px; }
}

/* phones: six stacked cards would push the catalogue far down the page, so the
   strip turns into a swipeable rail that bleeds to the screen edges */
@media (max-width: 767px) {
  .fn-benefits { margin: 18px 0 2px; }
  .fn-benefits__heading { font-size: 18px; margin-bottom: 12px; }
  .fn-benefits__grid {
    display: flex; gap: 10px;
    margin: 0 -15px; padding: 2px 15px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .fn-benefits__grid::-webkit-scrollbar { display: none; }
  .fn-benefits__card {
    flex: 0 0 72%; max-width: 265px;
    scroll-snap-align: start;
    padding: 16px 15px 18px;
  }
  .fn-benefits__card:hover { transform: none; box-shadow: none; background: var(--fn-surface); }
  .fn-benefits__icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 11px; }
  .fn-benefits__icon svg { width: 23px; height: 23px; }
}

/* 9d. HOME SEO TEXT (collapsible) ====================================== */
/* Theme override of extension/module/html: long shop copy that sits above the
   footer. Everything is rendered — JS only clamps the height and shows the
   "read more" toggle, so the text stays crawlable and readable without JS. */
/* deliberately set apart from the product blocks above: its own filled card,
   a wide gap, and a brand rule under the opening heading */
.fn-seo {
  margin: 46px 0 10px;
  padding: 34px 36px 26px;
  border-radius: var(--fn-radius);
  background: var(--fn-surface);
}
.fn-seo__heading { margin: 0 0 14px; font-size: 24px; }
/* full card width — a narrow measure looked lost inside the block; the extra
   line-height below is what keeps long lines readable instead */
.fn-seo__body { position: relative; font-size: 14.5px; line-height: 1.75; }
.fn-seo__body > h1:first-child::after,
.fn-seo__heading::after {
  content: '';
  display: block; width: 58px; height: 4px; margin-top: 14px;
  border-radius: 2px; background: var(--fn-gradient);
}
.fn-seo__body.is-collapsed { overflow: hidden; }
/* the fade sits on the card colour, not on the page, so it works in both themes */
.fn-seo__body.is-collapsed::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(246, 248, 249, 0) 0%, var(--fn-surface) 88%);
  pointer-events: none;
}
[data-theme="dark"] .fn-seo__body.is-collapsed::after {
  background: linear-gradient(180deg, rgba(28, 31, 38, 0) 0%, var(--fn-surface) 88%);
}

/* the copy comes from the admin WYSIWYG, so styling is by element, not class */
.fn-seo__body h1 { font-size: 24px; margin: 0 0 12px; }
.fn-seo__body h2 { font-size: 20px; margin: 22px 0 10px; }
.fn-seo__body h3 { font-size: 16px; margin: 18px 0 8px; color: var(--fn-primary-700); }
.fn-seo__body h1:first-child,
.fn-seo__body h2:first-child { margin-top: 0; }
.fn-seo__body p { margin: 0 0 12px; color: var(--fn-text); }
.fn-seo__body ul { margin: 0 0 14px; padding: 0; list-style: none; }
.fn-seo__body ul li {
  position: relative;
  margin-bottom: 7px; padding-left: 20px;
  color: var(--fn-text);
}
.fn-seo__body ul li::before {
  content: '';
  position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fn-primary);
}
.fn-seo__body ol { margin: 0 0 14px; padding-left: 20px; }
.fn-seo__body a { color: var(--fn-accent); text-decoration: underline; }
.fn-seo__body img { max-width: 100%; height: auto; border-radius: var(--fn-radius-sm); }

.fn-seo__actions { display: flex; justify-content: center; margin-top: 10px; }
.fn-seo__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px;
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius-pill);
  background: var(--fn-bg); color: var(--fn-primary-700);
  font-family: var(--fn-font-head); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.fn-seo__toggle:hover, .fn-seo__toggle:focus {
  background: var(--fn-primary); border-color: var(--fn-primary); color: #fff;
}
.fn-seo__toggle .fa { transition: transform .2s ease; }
.fn-seo__toggle[aria-expanded="true"] .fa { transform: rotate(180deg); }

@media (max-width: 767px) {
  .fn-seo { margin: 22px 0 6px; padding: 20px 18px 18px; }
  .fn-seo__heading, .fn-seo__body h1 { font-size: 20px; }
  .fn-seo__body h2 { font-size: 17px; }
  .fn-seo__body h3 { font-size: 15px; }
  .fn-seo__body { font-size: 13.5px; }
}

/* 10. CATALOG / PANELS / FILTER / PAGINATION ============================ */
.panel {
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  box-shadow: none;
  background: var(--fn-bg);
}
.panel-default > .panel-heading {
  background: var(--fn-surface);
  border-color: var(--fn-border);
  color: var(--fn-heading);
  font-weight: 700;
  border-radius: var(--fn-radius) var(--fn-radius) 0 0;
}
.well {
  background: var(--fn-surface);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  box-shadow: none;
}
.list-group a, .list-group-item {
  border-color: var(--fn-border);
  color: var(--fn-text);
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
  background: var(--fn-primary-50);
  border-color: var(--fn-border);
  color: var(--fn-primary-700);
  text-shadow: none;
}
.pagination > li > a, .pagination > li > span {
  color: var(--fn-text);
  border-color: var(--fn-border);
  margin: 0 3px;
  border-radius: 10px !important;
}
.pagination > li > a:hover { background: var(--fn-primary-50); color: var(--fn-primary-700); border-color: var(--fn-primary); }
.pagination > .active > span, .pagination > .active > a,
.pagination > .active > span:hover, .pagination > .active > a:hover {
  background: var(--fn-primary);
  border-color: var(--fn-primary);
  color: #fff;
}
.alert { border-radius: var(--fn-radius-sm); border: none; }
.alert-success { background: var(--fn-primary-50); color: var(--fn-primary-700); }
.alert-danger { background: var(--fn-pink-50); color: var(--fn-pink-700); }

/* category refine + thumbnail tiles */
.thumbnail { border-radius: var(--fn-radius); border-color: var(--fn-border); }
#column-left .product-layout, #column-right .product-layout { width: 100%; }

/* Refine search — subcategory cards with images, mirroring the mega menu */
.fn-refine { margin: 0 0 28px; }
.fn-refine__title {
  font-size: 18px; font-weight: 800; color: var(--fn-heading);
  margin: 0 0 14px;
}
.fn-refine__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.fn-refine__grid > li { margin: 0; }
.fn-refine__grid > li > a {
  display: flex; align-items: center; gap: 13px;
  height: 100%;
  padding: 10px 14px; border-radius: 14px;
  background: var(--fn-bg);
  border: 1px solid var(--fn-border);
  color: var(--fn-text); font-size: 14px; line-height: 1.3;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
}
.fn-refine__grid > li > a:hover {
  color: var(--fn-primary-700);
  background: var(--fn-primary-50);
  border-color: var(--fn-primary);
  box-shadow: var(--fn-shadow-sm);
}
.fn-refine__img {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--fn-border); background: #fff;
}
.fn-refine__img--ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--fn-primary); font-size: 20px; background: var(--fn-surface);
}
.fn-refine__name { font-weight: 600; }
@media (max-width: 991px) {
  .fn-refine__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* two per row, matching the product grid on the same page */
  .fn-refine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fn-refine__grid > li > a { padding: 8px 10px; gap: 10px; }
  .fn-refine__img { width: 44px; height: 44px; flex-basis: 44px; }
}

/* Infinite-scroll sentinel / loading indicator */
.fn-infinite { min-height: 1px; padding: 8px 0 20px; text-align: center; }
.fn-infinite__spinner { color: var(--fn-muted); font-size: 14px; }
.fn-infinite__spinner .fa { margin-right: 6px; color: var(--fn-primary); }

/* Phase 2 — drop the square category thumbnail (it's the menu's navigation
   image, not page content) and let the description take the full row. Scoped to
   .img-thumbnail so product images (.img-responsive) are never affected; the big
   description banner lives inside the sibling .col-sm-10 and stays. All breakpoints. */
#content .row > .col-sm-2:has(> img.img-thumbnail) { display: none; }
#content .row > .col-sm-2:has(> img.img-thumbnail) + .col-sm-10 { width: 100%; }

/* products per row (desktop): 5 when a side panel is present, 6 when full width */
@media (min-width: 992px) {
  #content.col-sm-9  .product-layout { flex: 0 0 20%; max-width: 20%; width: 20%; }
  #content.col-sm-12 .product-layout { flex: 0 0 16.6667%; max-width: 16.6667%; width: 16.6667%; }
}
/* phones: always 2 per row (default Bootstrap col-xs-12 would give only 1),
   with an even tighter ~8px gutter so the two cards get as wide as possible */
@media (max-width: 767px) {
  .row:has(> .product-layout) { margin-left: -4px; margin-right: -4px; }
  #content .product-layout {
    flex: 0 0 50%; max-width: 50%; width: 50%;
    padding: 4px; /* uniform → equal 8px gap both axes */
  }
}

/* remove the grid/list view switcher — listings are always grid */
.btn-group:has(> #grid-view), .btn-group:has(> #list-view) { display: none; }

/* remove product compare — not offered on this store
   (!important: default stylesheet sets these buttons to display:block at equal specificity) */
button[onclick*="compare.add"], a[onclick*="compare.add"],
a[href*="route=product/compare"], #compare-total { display: none !important; }

/* with compare gone, let the cart button fill and keep the wishlist icon compact */
.product-thumb .button-group button { width: auto; }
.product-thumb .button-group button:first-child { flex: 1 1 auto; }
.product-thumb .button-group button:not(:first-child) { flex: 0 0 56px; }

/* 404 / empty state */
.fn-404 { text-align: center; padding: 40px 16px 60px; }
.fn-404__code { font-family: var(--fn-font-head); font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.fn-404__title { margin: 8px 0 12px; }
.fn-404__text { color: var(--fn-muted); font-size: 16px; max-width: 520px; margin: 0 auto 26px; }
.fn-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 767px) { .fn-404__code { font-size: 86px; } }

/* 10c. AUTH CARD (login / register) ====================================== */
.fn-auth {
  display: flex;
  justify-content: center;
  padding: 44px 16px 80px;
}
.fn-auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--fn-bg);
  border: 1px solid var(--fn-border);
  border-radius: 20px;
  box-shadow: var(--fn-shadow);
  padding: 36px 32px;
}
.fn-auth__head { margin-bottom: 20px; text-align: center; }
.fn-auth__head h1 { margin: 0 0 6px; }
.fn-auth__sub { color: var(--fn-muted); font-size: 14px; margin: 0; }
.fn-auth__sub a { font-weight: 600; }
.fn-auth__sub--footer { text-align: center; margin-top: 22px; }

/* Google Sign-In: reserve space up front so the button can't cause a jump
   while the GIS script loads, and pin it to a fixed, centered width so it
   never renders wider than its box and gets clipped. */
.fn-auth [data-google-signin] {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 40px;
  margin-bottom: 22px;
}
.google-login-button { width: 260px; max-width: 100%; display: flex; justify-content: center; }
.google-login-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 260px;
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--fn-muted);
}
.google-login-divider::before,
.google-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fn-border);
}
.google-login-divider span { padding: 0 12px; }
.google-login-error { width: 100%; margin-bottom: 14px; }

.fn-auth__form .form-group { margin-bottom: 16px; }
.fn-auth__form label:not(.fn-toggle) {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--fn-heading);
  margin-bottom: 6px;
}
.fn-auth__form .form-control { padding: 10px 14px; height: auto; }
.fn-auth__form .text-danger { font-size: 12px; margin-top: 5px; }

.fn-auth__forgot { display: inline-block; font-size: 13px; margin-top: 8px; }

.fn-auth__actions { margin-top: 22px; text-align: center; }
.fn-auth__submit { width: 100%; max-width: 260px; }
.fn-auth__agree {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--fn-muted);
  font-weight: 400;
  margin-bottom: 16px;
  cursor: pointer;
}
.fn-auth__agree input { margin-top: 3px; }
.fn-auth__agree a { color: var(--fn-accent); }

/* password field with reveal toggle */
.fn-pwd { position: relative; }
.fn-pwd .form-control { padding-right: 44px; }
.fn-pwd__toggle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--fn-muted);
  cursor: pointer;
}
.fn-pwd__toggle:hover { color: var(--fn-primary-700); }
.fn-pwd__toggle:focus-visible { outline: 2px solid var(--fn-primary); outline-offset: -2px; border-radius: var(--fn-radius-sm); }

/* yes/no + custom-field radio pills, shared by register form */
.fn-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fn-toggle {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--fn-text);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.fn-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fn-toggle:has(input:checked) { background: var(--fn-primary); border-color: var(--fn-primary); color: #fff; }
.fn-toggle:has(input:focus-visible) { outline: 2px solid var(--fn-primary); outline-offset: 2px; }

@media (max-width: 480px) {
  .fn-auth { padding: 24px 12px 56px; }
  .fn-auth__card { padding: 26px 20px; border-radius: 16px; }
}

/* 11. FOOTER ============================================================ */
footer {
  margin-top: 48px;
  padding-top: 44px;
  background: #1c2128;
  border-top: none;
  color: #c4cad3;
}
footer .container { position: relative; }
footer h5 {
  font-family: var(--fn-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
footer a { color: #c4cad3; transition: color .15s ease, padding-left .15s ease; }
footer a:hover { color: var(--fn-primary); }
footer ul.list-unstyled li { padding: 5px 0; }
footer ul.list-unstyled li a:hover { padding-left: 5px; }
footer hr { border-top: 1px solid rgba(255,255,255,.08); border-bottom: none; margin: 30px 0 16px; }
footer p { color: #8c93a0; }
/* top accent line */
footer:before {
  content: ''; display: block; height: 4px; width: 100%;
  background: var(--fn-gradient-green);
  position: absolute; top: 0; left: 0;
}
footer { position: relative; }
.fn-foot-brand h5 { font-size: 18px; }
.fn-foot-brand p { margin-bottom: 8px; max-width: 280px; }
.fn-foot-contact { margin-bottom: 6px; }
.fn-foot-contact a { color: #c4cad3; }
.fn-foot-contact i { color: var(--fn-primary); width: 16px; margin-right: 4px; }
/* contact phones */
.fn-foot-phones { margin: 12px 0 10px; }
.fn-foot-phone { display: block; color: #d8dce2; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.fn-foot-phone i { color: var(--fn-primary); margin-right: 7px; }
.fn-foot-phone:hover { color: var(--fn-primary); }
/* address */
.fn-foot-address { display: flex; align-items: flex-start; }
.fn-foot-address i { margin-top: 3px; }
.fn-foot-address span { color: #c4cad3; }
.fn-social { display: flex; gap: 8px; margin-top: 12px; }
.fn-social a {
  width: 36px; height: 36px; border-radius: var(--fn-radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: #c4cad3;
}
.fn-social a:hover { background: var(--fn-gradient); color: #fff; }
.fn-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; }
.fn-foot-bottom p { margin: 0; }
.fn-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.fn-foot-legal a { color: #8c93a0; font-size: 13px; }
.fn-foot-legal a:hover { color: var(--fn-primary); }

/* mobile footer — brand full width, then Info | Account in two columns,
   contacts full width at the bottom (instead of one long stacked column) */
@media (max-width: 767px) {
  footer { margin-top: 32px; padding-top: 32px; }
  footer .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px; row-gap: 22px;
    margin: 0;
  }
  footer .row > [class*="col-sm-"] { width: auto; float: none; padding-left: 0; padding-right: 0; }
  .fn-foot-brand,
  .fn-foot-contacts-col { grid-column: 1 / -1; }
  footer h5 { margin-bottom: 10px; }
  .fn-foot-brand p { max-width: none; }
  .fn-foot-contacts-col h5 { margin-top: 4px; }
  .fn-foot-bottom { justify-content: center; text-align: center; gap: 10px 16px; }
  .fn-foot-legal { justify-content: center; }
}
.fn-pay-icons { font-size: 26px; color: #6b7280; display: flex; gap: 10px; }

/* cookie notice */
.fn-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200;
  max-width: 720px; margin: 0 auto;
  background: var(--fn-bg); color: var(--fn-text);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  box-shadow: var(--fn-shadow);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fn-cookie[hidden] { display: none; }

/* 12. DARK THEME ======================================================== */
[data-theme="dark"] {
  --fn-bg:        #14161a;
  --fn-surface:   #1c1f26;
  --fn-surface-2: #232730;
  --fn-text:      #d9dde3;
  --fn-heading:   #f1f3f6;
  --fn-muted:     #9aa1ab;
  --fn-border:    #2b303a;
  --fn-shadow:    0 16px 40px rgba(0, 0, 0, .45);
  --fn-shadow-sm: 0 4px 18px rgba(0, 0, 0, .35);
  --fn-primary-50: #1d2a27;
  --fn-accent-50:  #221f2c;
  --fn-pink-50:    #2a1d26;
  --fn-peach-50:   #2b2118;
  --fn-glass-bg:     rgba(24, 27, 33, .8);
  --fn-glass-border: rgba(255, 255, 255, .10);
  --fn-glass-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body { background: var(--fn-bg); color: var(--fn-text); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 { color: var(--fn-heading); }
[data-theme="dark"] header,
[data-theme="dark"] #menu,
[data-theme="dark"] #cart .dropdown-menu,
[data-theme="dark"] .panel,
[data-theme="dark"] .product-thumb { background: var(--fn-surface); }
[data-theme="dark"] #logo h1 a { color: var(--fn-heading); }
[data-theme="dark"] .form-control { background: var(--fn-surface-2); color: var(--fn-text); }
[data-theme="dark"] #search .input-lg { border-color: var(--fn-surface-2); background: var(--fn-surface-2); }
[data-theme="dark"] .btn-default { background: var(--fn-surface-2); color: var(--fn-text); border-color: var(--fn-border); }
[data-theme="dark"] .well { background: var(--fn-surface); }
[data-theme="dark"] .dropdown-menu { background: var(--fn-surface); }
[data-theme="dark"] .dropdown-menu > li > a { color: var(--fn-text); }
[data-theme="dark"] .product-thumb .image,
[data-theme="dark"] .product-thumb .button-group,
[data-theme="dark"] .product-thumb .button-group button { background: var(--fn-surface); }
[data-theme="dark"] .nav-tabs > li > a:hover { background: var(--fn-surface-2); }
[data-theme="dark"] .breadcrumb > .active,
[data-theme="dark"] .breadcrumb > li:last-child { color: var(--fn-heading); }
/* benefit icons take the base brand colours — the -700 shades go muddy on a
   dark chip */
[data-theme="dark"] .fn-benefits__card--mint   { --fn-benefit-tone: var(--fn-primary); }
[data-theme="dark"] .fn-benefits__card--purple { --fn-benefit-tone: #a08fc7; }
[data-theme="dark"] .fn-benefits__card--pink   { --fn-benefit-tone: var(--fn-pink); }
[data-theme="dark"] .fn-benefits__card--peach  { --fn-benefit-tone: var(--fn-peach); }

/* 13b. PHASE 2 — off-canvas menu, popup cart, stickers ================= */

/* shared backdrop — kept a touch lighter so the glass panels above it blur a
   colourful, legible scene rather than a flat dark wash */
.fn-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(20, 24, 30, .4);
  opacity: 0; transition: opacity .2s ease;
}
.fn-backdrop.is-open { opacity: 1; }

/* drawer header (logo + close) — injected by JS, only shown inside the mobile drawer */
.fn-drawer-head { display: none; }
/* drawer top bar (top-link icons + language/theme) — JS-relocated, mobile only */
.fn-drawer-topbar { display: none; }
/* "Каталог" accordion toggle + "Меню" info-page list — mobile drawer only.
   The drawer opens on the Меню view; Каталог is revealed on tap (.fn-cat-open). */
.fn-cat-toggle { display: none; }
.fn-drawer-menu { display: none; }
/* account CTA + phone line — mobile drawer only */
.fn-drawer-account, .fn-drawer-phone { display: none; }
/* "Ми в соціальних мережах" — brand-coloured social row, mobile drawer only */
.fn-drawer-social { display: none; }

/* off-canvas mobile menu — Rozetka-style two-pane catalog, gated behind a
   "Каталог" button (top: logo + close · top-link icons · lang/theme bar ·
   Каталог toggle · then either the left rail + right subcategory pane, or
   the Меню list) */
@media (max-width: 767px) {
  #menu .navbar-collapse.navbar-ex1-collapse.in,
  #menu .navbar-collapse.navbar-ex1-collapse.collapsing {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(87vw, 400px); max-height: 100%;
    z-index: 1200;
    background: var(--fn-glass-bg);
    -webkit-backdrop-filter: var(--fn-glass-blur);
    backdrop-filter: var(--fn-glass-blur);
    box-shadow: var(--fn-glass-shadow);
    padding: 0; margin: 0;
    border: none; border-right: 1px solid var(--fn-glass-border);
    display: flex; flex-direction: column; overflow: hidden;
    animation: fnDrawerIn .25s ease;
  }

  /* header row — brand logo on the left; language switcher + close grouped
     tight together on the right (was just a big empty gap before) */
  #menu .navbar-collapse.in .fn-drawer-head {
    flex: 0 0 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 56px; padding: 8px 12px;
    background: transparent; border-bottom: 1px solid var(--fn-glass-border);
  }
  .fn-drawer-logo { display: inline-flex; align-items: center; }
  .fn-drawer-logo img, .fn-drawer-logo svg { height: 36px; width: auto; max-width: 150px; }
  #menu .navbar-collapse.in .fn-drawer-head__right {
    display: flex; align-items: center; gap: 14px;
  }
  /* language pills sit on the header's light background here (not the green
     strip), so they need dark-on-light colours instead of the light-on-dark
     ones .fn-lang__btn normally has on the page's green bar */
  #menu .navbar-collapse.in .fn-drawer-head__right .fn-lang__btn { color: var(--fn-muted); }
  #menu .navbar-collapse.in .fn-drawer-head__right .fn-lang__btn:hover { color: var(--fn-primary-700); }
  #menu .navbar-collapse.in .fn-drawer-head__right .fn-lang__btn.is-active {
    color: var(--fn-primary-700); background: var(--fn-primary-50);
  }
  /* moon + ✕ — a matching pair of round mint buttons on the glass header */
  #menu .navbar-collapse.in .fn-drawer-head__right .fn-theme-toggle {
    flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--fn-primary); border-radius: 50%;
    background: var(--fn-primary-50); color: var(--fn-primary-700); font-size: 16px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  #menu .navbar-collapse.in .fn-drawer-head__right .fn-theme-toggle:hover {
    background: var(--fn-primary); color: #fff; border-color: var(--fn-primary);
  }
  .fn-drawer-close {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--fn-primary); border-radius: 50%;
    background: var(--fn-primary-50);
    color: var(--fn-primary-700); font-size: 19px; line-height: 1;
    transition: background-color .15s ease, color .15s ease;
  }
  .fn-drawer-close:hover, .fn-drawer-close:active { background: var(--fn-primary); color: #fff; }

  /* the dark-green strip, now living at the top of the drawer instead of the
     page: wishlist/phone/viber-telegram/account icons (left) + theme toggle
     (right), relocated here from the header — one row */
  #menu .navbar-collapse.in .fn-drawer-topbar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 14px;
    /* translucent green so the frosted glass tints through instead of a hard bar */
    background: linear-gradient(135deg, rgba(58, 139, 123, .82) 0%, rgba(47, 116, 102, .82) 55%, rgba(39, 96, 82, .82) 100%);
  }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-toplinks { gap: 0; }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-toplinks > li + li {
    border-left-color: rgba(255, 255, 255, .18);
  }
  /* NOTE: scoped to "> li > a" (the toggle links themselves) so the
     dropdown-menu popovers they open (phone numbers, account links) keep
     their normal dark-on-white styling instead of turning white-on-white */
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-toplinks > li > a,
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-msg__btn {
    color: rgba(255, 255, 255, .92);
  }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-toplinks > li > a > .fa {
    color: rgba(255, 255, 255, .92);
  }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-toplinks > li > a:hover { color: #fff; }
  /* the phone/account dropdowns are "right-aligned" for their old spot at the
     far right of the page header; here the icons hug the drawer's left edge,
     so a right-aligned menu would open mostly off-screen — force it to open
     from the left instead. Content-sized (no min-width) so it stays a small
     card next to the icon instead of stretching into empty side padding.
     These dropdowns now live inside #menu (they moved into the drawer), so
     they also match `#menu .dropdown-menu` — the catalog mega-menu's rule,
     with its big 28px/30px padding and no border. Reset that bleed-through
     back to the compact card look (same as .fn-toplinks .dropdown-menu). */
  #menu .navbar-collapse.in .fn-drawer-topbar .dropdown-menu {
    left: 0; right: auto; min-width: 0;
    padding: 6px 0;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    box-shadow: var(--fn-shadow-sm);
  }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-theme-toggle {
    border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .92);
  }
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-theme-toggle:hover { color: #fff; border-color: #fff; }

  /* "Каталог" — collapsed by default; tapping it reveals the category rail below */
  /* the headline "Каталог товарів" pill */
  #menu .navbar-collapse.in .fn-cat-toggle {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: auto; margin: 14px 16px 10px; padding: 15px 18px;
    border: none; border-radius: var(--fn-radius-pill);
    background: var(--fn-gradient-green); color: #fff;
    font-family: var(--fn-font-head); font-weight: 800; font-size: 16px;
    text-align: center; cursor: pointer;
    box-shadow: 0 10px 22px rgba(95, 169, 155, .38);
    transition: transform .1s ease, box-shadow .15s ease;
  }
  #menu .navbar-collapse.in .fn-cat-toggle:active { transform: translateY(1px); }
  /* opened → a soft mint "← Каталог" back pill */
  #menu .navbar-collapse.in.fn-cat-open .fn-cat-toggle {
    background: var(--fn-primary-50); color: var(--fn-primary-700); box-shadow: none;
  }
  #menu .navbar-collapse.in .fn-cat-toggle__view {
    display: inline-flex; align-items: center; gap: 10px;
  }
  #menu .navbar-collapse.in .fn-cat-toggle__view .fa { font-size: 17px; }
  #menu .navbar-collapse.in.fn-cat-open .fn-cat-toggle__view .fa { color: var(--fn-primary); }
  #menu .navbar-collapse.in .fn-cat-toggle__view--open { display: none; }
  #menu .navbar-collapse.in.fn-cat-open .fn-cat-toggle__view--closed { display: none; }
  #menu .navbar-collapse.in.fn-cat-open .fn-cat-toggle__view--open { display: inline-flex; }
  #menu .navbar-collapse.in .fn-cat-toggle__chev { display: none; }

  /* account CTA + phone line, right under the Каталог pill — a tidy,
     centred card so it reads as one clear block instead of hugging the edge */
  #menu .navbar-collapse.in .fn-drawer-account { display: block; flex: 0 0 auto; padding: 2px 16px 6px; }
  #menu .navbar-collapse.in.fn-cat-open .fn-drawer-account,
  #menu .navbar-collapse.in.fn-cat-open .fn-drawer-phone { display: none; }
  #menu .navbar-collapse.in .fn-drawer-account__link {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 14px 12px;
    border-radius: var(--fn-radius-sm);
    background: rgba(121, 190, 177, .12);
  }
  /* solid gradient fill (not a translucent ring) so the icon stays crisp
     against the glass in both themes — echoes the Каталог pill above it */
  #menu .navbar-collapse.in .fn-drawer-account__ico {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fn-gradient-green);
    color: #fff; font-size: 27px;
    box-shadow: 0 4px 12px rgba(95, 169, 155, .35);
  }
  #menu .navbar-collapse.in .fn-drawer-account__txt {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
  }
  #menu .navbar-collapse.in .fn-drawer-account__title {
    font-family: var(--fn-font-head); font-weight: 800; font-size: 18px;
    color: var(--fn-heading); line-height: 1.2;
  }
  #menu .navbar-collapse.in .fn-drawer-account__title a { color: var(--fn-heading); }
  #menu .navbar-collapse.in .fn-drawer-account__title a:hover { color: var(--fn-primary-700); }
  #menu .navbar-collapse.in .fn-drawer-account__div { color: var(--fn-border); font-weight: 400; margin: 0 8px; }
  #menu .navbar-collapse.in .fn-drawer-account__sub {
    font-size: 13.5px; line-height: 1.4; color: var(--fn-muted);
  }
  #menu .navbar-collapse.in .fn-drawer-phone {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px 14px; margin: 0;
    border-bottom: 1px solid var(--fn-glass-border);
    font-family: var(--fn-font-head); font-weight: 800; font-size: 20px;
    color: var(--fn-heading);
  }
  #menu .navbar-collapse.in .fn-drawer-phone .fa { color: var(--fn-primary); font-size: 18px; }
  #menu .navbar-collapse.in .fn-drawer-phone:hover { color: var(--fn-primary-700); }

  /* the two-pane catalog body — hidden until "Каталог" is tapped. Positioned
     (not a fixed pixel offset) so the rail + right pane always fill exactly
     what's left below the header/topbar/toggle stack, however tall it is. */
  #menu .navbar-collapse.in .fn-cat-body {
    display: none;
    position: relative; flex: 1 1 auto; overflow: hidden;
  }
  #menu .navbar-collapse.in.fn-cat-open .fn-cat-body { display: block; }

  /* left rail — main categories */
  #menu .navbar-collapse.in .fn-cat-body .nav.navbar-nav {
    width: 45%; max-width: 45%; height: 100%; margin: 0;
    overflow-y: auto;
    background: var(--fn-surface); border-right: 1px solid var(--fn-border);
  }
  /* static so the absolute right pane anchors to .fn-cat-body, not the <li>
     (Bootstrap makes .nav > li position:relative) */
  #menu .navbar-collapse.in .fn-cat-body .nav > li { float: none; position: static; }
  #menu .navbar-collapse.in .fn-cat-body .nav > li > a {
    padding: 13px 12px; border-bottom: 1px solid var(--fn-border);
    font-size: 13px; line-height: 1.3; white-space: normal; color: var(--fn-text);
  }
  #menu .navbar-collapse.in .fn-cat-body .nav > li.fn-open > a {
    background: var(--fn-bg); color: var(--fn-primary-700); font-weight: 800;
    box-shadow: inset 3px 0 0 var(--fn-primary);
  }

  /* right pane — active category's subcategories */
  #menu .navbar-collapse.in .fn-cat-body .fn-mega {
    position: absolute; top: 0; right: 0; bottom: 0; left: 45%;
    display: none; height: auto; overflow-y: auto;
    padding: 0 12px calc(16px + env(safe-area-inset-bottom));
    margin: 0; background: var(--fn-bg); box-shadow: none; border-radius: 0;
  }
  #menu .navbar-collapse.in .fn-cat-body .fn-mega::before { display: none; }
  #menu .navbar-collapse.in .fn-cat-body .nav > li.fn-open > .fn-mega { display: block; }
  #menu .navbar-collapse.in .fn-cat-body .fn-mega__grid { grid-template-columns: 1fr; gap: 0; }
  #menu .navbar-collapse.in .fn-cat-body .fn-mega__grid > li > a { padding: 9px 6px; }

  /* parent-category header inside the right pane (links to the category) */
  #menu .navbar-collapse.in .fn-cat-body .fn-mega__parent {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 1;
    padding: 11px 8px 12px; margin: 0 0 4px;
    background: var(--fn-bg); border-bottom: 1px solid var(--fn-border);
    font-weight: 800; font-size: 14px; color: var(--fn-heading);
  }
  #menu .navbar-collapse.in .fn-cat-body .fn-mega__parent .fa { font-size: 12px; color: var(--fn-primary); }

  /* "Меню" — info pages; shown by default, hidden once Каталог is open.
     Deliberately plain (no photos/pills) so it reads as secondary to the catalog. */
  #menu .navbar-collapse.in .fn-drawer-menu {
    display: block;
    flex: 1 1 auto; overflow-y: auto;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  }
  #menu .navbar-collapse.in.fn-cat-open .fn-drawer-menu { display: none; }
  #menu .navbar-collapse.in .fn-drawer-menu__title {
    padding: 14px 16px 8px;
    font-family: var(--fn-font-head); font-weight: 700; font-size: 12px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--fn-muted);
  }
  #menu .navbar-collapse.in .fn-drawer-menu__list { margin: 0; }
  #menu .navbar-collapse.in .fn-drawer-menu__list > li > a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--fn-heading);
  }
  #menu .navbar-collapse.in .fn-drawer-menu__list > li > a .fa {
    font-size: 13px; color: var(--fn-primary);
  }
  #menu .navbar-collapse.in .fn-drawer-menu__list > li > a:hover {
    background: var(--fn-surface); color: var(--fn-primary-700);
  }

  /* viber/telegram already appear as brand chips in the social row below, so
     drop them from the green icon bar to avoid showing the same pair twice */
  #menu .navbar-collapse.in .fn-drawer-topbar .fn-msg { display: none; }

  /* "Ми в соціальних мережах" — original brand-coloured icon chips, pinned to
     the bottom of the drawer under the info-page list */
  #menu .navbar-collapse.in .fn-drawer-social {
    display: block; flex: 0 0 auto;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fn-border);
  }
  #menu .navbar-collapse.in.fn-cat-open .fn-drawer-social { display: none; }
  #menu .navbar-collapse.in .fn-drawer-social__title {
    font-family: var(--fn-font-head); font-weight: 700; font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--fn-muted);
    margin: 0 0 12px;
  }
  #menu .navbar-collapse.in .fn-drawer-social__row { display: flex; gap: 12px; }
  #menu .navbar-collapse.in .fn-soc {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    box-shadow: 0 3px 10px rgba(40, 44, 60, .16);
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
  }
  #menu .navbar-collapse.in .fn-soc svg { display: block; width: 22px; height: 22px; }
  #menu .navbar-collapse.in .fn-soc:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(40, 44, 60, .24); }
  #menu .navbar-collapse.in .fn-soc:active { transform: translateY(1px); }
  #menu .navbar-collapse.in .fn-soc--fb { background: #1877f2; }
  #menu .navbar-collapse.in .fn-soc--ig {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  }
  #menu .navbar-collapse.in .fn-soc--vb { background: #7360f2; }
  #menu .navbar-collapse.in .fn-soc--tg { background: #229ed9; }
}
@keyframes fnDrawerIn { from { transform: translateX(-100%); } to { transform: none; } }

/* slide-in popup cart */
.fn-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw, 400px);
  z-index: 1200;
  background: var(--fn-glass-bg);
  -webkit-backdrop-filter: var(--fn-glass-blur);
  backdrop-filter: var(--fn-glass-blur);
  box-shadow: var(--fn-glass-shadow);
  border-left: 1px solid var(--fn-glass-border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.fn-cart-drawer.is-open { transform: none; }
.fn-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--fn-border);
}
.fn-cart-drawer__head strong { font-family: var(--fn-font-head); font-size: 16px; color: var(--fn-heading); }
.fn-cart-drawer__head .fa { color: var(--fn-primary); }
.fn-cart-drawer__close {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--fn-muted); cursor: pointer;
}
.fn-cart-drawer__close:hover { color: var(--fn-pink-700); }
.fn-cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* a fixed-width panel never wants a sideways scrollbar — anything that
     doesn't fit has to wrap or shrink, not push the row wider */
  overflow-x: hidden;
  /* extra room at the end so the last recommendation card doesn't sit flush
     against the drawer edge (and clears the iOS home indicator) */
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
  /* slim themed scrollbar instead of the OS one */
  scrollbar-width: thin;
  scrollbar-color: var(--fn-primary) transparent;
}
.fn-cart-drawer__body::-webkit-scrollbar { width: 6px; }
.fn-cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.fn-cart-drawer__body::-webkit-scrollbar-thumb {
  background: var(--fn-primary);
  border-radius: var(--fn-radius-pill);
}
.fn-cart-drawer__body::-webkit-scrollbar-thumb:hover { background: var(--fn-primary-700); }
.fn-cart-drawer__body ul, .fn-cart-drawer__body li { list-style: none; margin: 0; padding: 0; }
.fn-cart-drawer__body table { width: 100%; margin-bottom: 10px; }
.fn-cart-drawer__body table img { max-width: 56px; border-radius: 10px; }
.fn-cart-drawer__body td { padding: 8px 6px; vertical-align: middle; font-size: 13px; border-bottom: 1px solid var(--fn-border); }
.fn-cart-drawer__body .table-bordered { border: none; }
/* Core cart.twig sets .table-striped — its odd/even zebra colouring reads as
   an unexplained "why do some rows have a white backing?" here, so flatten
   it and reserve background changes for our own just-added highlight. */
.fn-cart-drawer__body .table-striped > tbody > tr { background-color: transparent !important; transition: background-color 1s ease; }
/* the qty <td> (3rd column: image, name, qty, price, remove) is folded into
   the price column below by JS — hide the now-empty cell. */
.fn-cart-drawer__body .table-striped td:nth-child(3) { display: none; }
.fn-cart-drawer__body .table-striped td:nth-child(4) { text-align: center; }
.fn-cart-drawer__body .fn-cart-qty {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fn-muted);
  line-height: 1.3;
}
.fn-cart-drawer__body .fn-cart-total {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--fn-heading);
  /* thousands are grouped with a space ("1 260.00₴") — without this the
     number breaks across two lines mid-price */
  white-space: nowrap;
}
.fn-cart-old-total, .fn-cart-old-unit {
  display: block;
  color: var(--fn-muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.fn-cart-old-total[hidden], .fn-cart-old-unit[hidden] { display: none; }
/* just-added row: brief highlight, faded out by JS ~5s after the drawer opens */
.fn-cart-drawer__body .table-striped > tbody > tr.fn-cart-row--added { background-color: var(--fn-primary-50) !important; }
/* bigger, centered remove button — was a cramped .btn-xs that looked
   off-centre once the price column grew to two lines above. */
.fn-cart-drawer__body .table-striped td:last-child { vertical-align: middle; }
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: var(--fn-radius-pill);
}
/* "Переглянути кошик" / "Оформити замовлення" as a tidy one-row button pair.
   font-size:0 on the row collapses the &nbsp;&nbsp;&nbsp; spacer text node
   the core template puts between the two <a> (anonymous flex items inherit
   the container's font-size, so the spacer shrinks to nothing). */
.fn-cart-drawer__body p.text-right {
  display: flex;
  gap: 8px;
  font-size: 0;
  margin: 14px 0 0;
}
/* «Продовжити покупки» — <button>, «Оформити замовлення» — <a>: обидва мають
   виглядати однаковою парою кнопок (див. fun_theme/template/common/cart.twig) */
.fn-cart-drawer__body p.text-right a,
.fn-cart-drawer__body p.text-right .fn-cart-continue {
  flex: 1 1 0;
  /* nowrap labels keep a min-content width of their own; without this the
     pair refuses to shrink below ~375px and the drawer body gets a
     horizontal scrollbar on phones */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  border-radius: var(--fn-radius-pill);
  border: 1px solid var(--fn-border);
  background: var(--fn-bg);
  color: var(--fn-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.fn-cart-drawer__body p.text-right a:hover,
.fn-cart-drawer__body p.text-right .fn-cart-continue:hover {
  border-color: var(--fn-primary);
  color: var(--fn-primary-700);
}
.fn-cart-drawer__body p.text-right a:last-child {
  background: var(--fn-primary);
  border-color: var(--fn-primary);
  color: #fff;
}
.fn-cart-drawer__body p.text-right a:last-child:hover {
  background: var(--fn-primary-700);
  border-color: var(--fn-primary-700);
  color: #fff;
}
.fn-cart-drawer__empty { text-align: center; color: var(--fn-muted); padding: 40px 0; }

/* −/+ stepper: sits under the product name, since the drawer has no room for
   a column of its own (see fun_theme.js: formatCartRows). Same pill as the
   product page's .fn-qty in miniature — but its own class, because .fn-qty is
   fixed at 132px and already carries the product page's click handler. */
.fn-cart-step {
  /* block-level (not inline-flex) so it always starts its own line under the
     product name instead of trailing after a short last word */
  display: flex; align-items: stretch;
  width: 92px; height: 28px;
  margin-top: 8px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-pill);
  overflow: hidden;
  background: var(--fn-bg);
}
.fn-cart-step__btn {
  flex: 0 0 28px;
  padding: 0; border: none; background: transparent;
  color: var(--fn-primary-700);
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.fn-cart-step__btn:hover { background: var(--fn-primary-50); }
.fn-cart-step__btn:active { transform: scale(.95); }
.fn-cart-step__val {
  flex: 1 1 auto; width: auto; min-width: 0; padding: 0;
  border: none;
  border-left: 1px solid var(--fn-border);
  border-right: 1px solid var(--fn-border);
  border-radius: 0; box-shadow: none; background: none;
  text-align: center; font-size: 13px; font-weight: 700;
  color: var(--fn-heading);
}
.fn-cart-step__val:focus { outline: none; box-shadow: none; }
/* request in flight — keep the number readable but refuse further clicks */
.fn-cart-step.is-busy { opacity: .55; pointer-events: none; }
[data-theme="dark"] .fn-cart-step { background: var(--fn-surface); }

/* ---- Власна сторінка оформлення (модуль fun_checkout) ------------------
   Дві колонки: чотири розділи форми ліворуч, липкий підсумок праворуч.
   Свій grid, а не ядрові bootstrap-колонки — сторінка не залежить від
   макета і на телефоні просто складається в одну колонку. */
.fn-order__heading {
  font-family: var(--fn-font-head);
  font-size: 30px; font-weight: 800;
  color: var(--fn-heading);
  margin: 0 0 20px;
}
.fn-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
.fn-order__main { min-width: 0; }
.fn-order__side { min-width: 0; height: 100%; }
.fn-order__section {
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  background: var(--fn-bg);
  box-shadow: var(--fn-shadow-sm);
}
.fn-order__title {
  margin: 0 0 14px;
  font-family: var(--fn-font-head);
  font-size: 17px; font-weight: 800;
  color: var(--fn-heading);
}
.fn-order__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fn-order__field { display: block; margin: 0; font-weight: 400; }
.fn-order__label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--fn-text); }
.fn-order__label small { color: var(--fn-muted); font-weight: 400; }
.fn-order .form-control {
  height: 42px;
  border-radius: var(--fn-radius-sm);
  border: 1px solid var(--fn-border);
  background: var(--fn-bg);
  box-shadow: none;
  font-size: 14px;
}
.fn-order textarea.form-control { height: auto; padding: 10px 12px; }
.fn-order .form-control:focus {
  border-color: var(--fn-primary);
  box-shadow: 0 0 0 3px var(--fn-primary-50);
}
.fn-order__error { display: none; margin-top: 4px; font-size: 12px; color: var(--fn-danger); }
.fn-order__error.is-visible { display: block; }
.fn-order__address { margin-top: 14px; max-width: 420px; }

/* вхід постійного клієнта */
.fn-order__login-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.fn-order__login-toggle {
  padding: 6px 14px;
  border: 1px solid var(--fn-primary);
  border-radius: var(--fn-radius-pill);
  background: var(--fn-bg);
  color: var(--fn-primary-700);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.fn-order__login-toggle:hover { background: var(--fn-primary-50); }
.fn-order__login-note { font-size: 13px; color: var(--fn-muted); }
.fn-order__login {
  padding: 14px;
  margin-bottom: 16px;
  border-radius: var(--fn-radius-sm);
  background: var(--fn-surface);
}
.fn-order__login-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.fn-order__login-fields .form-control { flex: 1 1 180px; }
.fn-order__login-fields .btn { border-radius: var(--fn-radius-pill); padding: 0 20px; height: 42px; font-weight: 700; }
.fn-order__forgotten { display: inline-block; margin-top: 8px; font-size: 12px; }
.fn-order__login-error { margin-top: 6px; font-size: 12px; color: var(--fn-danger); }
.fn-order__logged { margin: 0 0 14px; font-size: 14px; color: var(--fn-text); }
.fn-order__logged .fa { color: var(--fn-primary); }

/* радіо-списки доставки та оплати: обраний пункт розкривається і показує свої
   власні поля (відділення НП, вибір магазину, адреса) — спільного поля під
   списком немає, бо незрозуміло, до якого пункту воно належить */
.fn-order__options { display: grid; gap: 8px; }
.fn-order__option {
  margin: 0;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  font-weight: 400;
  transition: border-color .15s ease, background .15s ease;
}
.fn-order__option:hover { border-color: var(--fn-primary); }
.fn-order__option.is-open { border-color: var(--fn-primary); background: var(--fn-primary-50); }
.fn-order__option-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 12px 14px;
  cursor: pointer;
}
.fn-order__option-extra {
  padding: 0 14px 14px;
  display: grid; gap: 12px;
}
/* власні display перебивають браузерний [hidden] — повертаємо приховування
   (поля пункту, «готівкою при самовивозі», форма входу) */
.fn-order__option[hidden],
.fn-order__option-extra[hidden],
.fn-order__field[hidden],
.fn-order__login[hidden],
.fn-order__combo-list[hidden],
.fn-sum__ship[hidden] { display: none; }
.fn-order__option input[type="radio"] { margin: 0; flex: 0 0 auto; accent-color: var(--fn-primary); width: 17px; height: 17px; }
.fn-order__option input:checked ~ .fn-order__option-body .fn-order__option-title { color: var(--fn-primary-700); }

/* комбобокс: поле + випадний список (міста й відділення Нової Пошти) */
.fn-order__combo { position: relative; }
.fn-order__combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  max-height: 260px; overflow-y: auto;
  margin: 4px 0 0; padding: 4px;
  list-style: none;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg);
  box-shadow: var(--fn-shadow);
  scrollbar-width: thin;
}
.fn-order__combo-item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px; line-height: 1.35;
  cursor: pointer;
}
.fn-order__combo-item:hover { background: var(--fn-primary-50); color: var(--fn-primary-700); }
.fn-order__combo-input:disabled { background: var(--fn-surface); cursor: not-allowed; }

/* Точки самовивозу — дві компактні колонки: адрес чотири, у кожної свій
   телефон і графік, і одним стовпчиком вони з'їдають пів екрана. */
.fn-order__pickup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fn-order__pickup-item {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0; padding: 10px 12px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg);
  font-weight: 400; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fn-order__pickup-item:hover { border-color: var(--fn-primary); }
.fn-order__pickup-item:has(input:checked) {
  border-color: var(--fn-primary);
  box-shadow: 0 0 0 2px var(--fn-primary-50);
}
.fn-order__pickup-body { display: block; min-width: 0; }
.fn-order__pickup-title {
  display: block;
  font-size: 13px; font-weight: 800; color: var(--fn-heading);
  margin-bottom: 2px;
}
.fn-order__pickup-address { display: block; font-size: 13px; line-height: 1.35; color: var(--fn-text); }
.fn-order__pickup-meta {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.35; color: var(--fn-muted);
}
/* іконки в одну колонку, щоб рядки не «стрибали» */
.fn-order__pickup-address .fa,
.fn-order__pickup-meta .fa { width: 13px; text-align: center; color: var(--fn-primary); margin-right: 2px; }
@media (max-width: 640px) {
  .fn-order__pickup { grid-template-columns: minmax(0, 1fr); }
}
.fn-order__option-body { flex: 1 1 auto; min-width: 0; }
.fn-order__option-title { display: block; font-size: 14px; font-weight: 700; color: var(--fn-heading); }
.fn-order__option-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--fn-muted); }
.fn-order__option-deposit {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--fn-border);
  font-size: 12px; line-height: 1.45; color: var(--fn-text);
}
.fn-order__option-note { flex: 0 0 auto; font-size: 12px; color: var(--fn-muted); text-align: right; }
/* дубль кнопки під формою — потрібен лише там, де підсумок поїхав угору.
   Клас пишеться разом із .fn-sum__confirm: та має свій display:block нижче
   за файлом і за однакової специфічності перемогла б */
.fn-sum__confirm.fn-order__confirm-bottom { display: none; }
@media (max-width: 991px) {
  .fn-order { grid-template-columns: minmax(0, 1fr); }
  .fn-sum__confirm.fn-order__confirm-bottom { display: block; }
  /* підсумок над формою: клієнт має бачити, що замовляє, ще до заповнення */
  .fn-order__side { order: -1; }
  .fn-order__fields { grid-template-columns: minmax(0, 1fr); }
}
[data-theme="dark"] .fn-order__section { background: var(--fn-surface); }

/* ---- Правий блок оформлення (модуль fun_checkout) ----------------------
   Ядрове оформлення не показує, що саме замовляють, аж до кроку
   «Підтвердження», а підсумок ховає там же. Цей блок стоїть у column_right
   макета Checkout і липне до верху, поки клієнт заповнює довгу форму. */
/* height:100% — щоб липкий блок мав куди їхати: його межі задає найближчий
   блок-предок, а не колонка */
.fn-sum { font-size: 14px; height: 100%; }
.fn-sum__inner { position: sticky; top: 90px; }
/* Bootstrap 3 тримає колонки на float, тож #column-right заввишки рівно як
   його вміст — липкому блоку немає куди їхати. Розтягуємо колонки в один
   flex-рядок (тільки на десктопі, де колонки взагалі стоять поруч). */
@media (min-width: 992px) {
  #checkout-checkout > .row { display: flex; flex-wrap: wrap; }
}
.fn-sum__card {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  background: var(--fn-bg);
  box-shadow: var(--fn-shadow-sm);
}
.fn-sum__title {
  margin: 0 0 12px;
  font-family: var(--fn-font-head);
  font-size: 16px; font-weight: 800;
  color: var(--fn-heading);
}
.fn-sum__items { list-style: none; margin: 0; padding: 0; }
.fn-sum__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--fn-border);
}
.fn-sum__item:first-child { border-top: none; padding-top: 0; }
.fn-sum__img { flex: 0 0 52px; }
.fn-sum__img img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: var(--fn-surface); }
.fn-sum__body { flex: 1 1 auto; min-width: 0; }
.fn-sum__name {
  display: block;
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--fn-text);
}
.fn-sum__name:hover { color: var(--fn-primary-700); }
.fn-sum__oos { color: var(--fn-danger); font-weight: 700; }
.fn-sum__option { display: block; color: var(--fn-muted); font-size: 11px; }
.fn-sum__line {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px;
}
/* степер тут той самий, що в кошику, лише трохи компактніший */
.fn-sum .fn-cart-step { margin-top: 0; width: 88px; height: 28px; }
.fn-sum__price { font-size: 14px; font-weight: 800; color: var(--fn-heading); white-space: nowrap; }
.fn-sum__rm {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--fn-radius-pill);
  background: transparent; color: var(--fn-muted);
  font-size: 12px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.fn-sum__rm:hover { background: var(--fn-surface); color: var(--fn-danger); }
.fn-sum__totals {
  width: 100%;
  margin: 12px 0 0;
  border-top: 1px solid var(--fn-border);
}
.fn-sum__totals td { padding: 7px 0; font-size: 13px; color: var(--fn-text); border: none; }
.fn-sum__totals td:first-child { text-align: left; }
.fn-sum__totals td strong { font-weight: 600; color: var(--fn-muted); }
/* останній рядок — «Всього до сплати»: головне число блока */
.fn-sum__totals tr:last-child td { padding-top: 10px; font-size: 17px; font-weight: 800; color: var(--fn-heading); }
.fn-sum__totals tr:last-child td strong { font-size: 14px; color: var(--fn-heading); }
/* рядок доставки над підсумками — його заповнює вибраний спосіб */
.fn-sum__ship {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--fn-border);
  font-size: 13px; color: var(--fn-muted);
}
.fn-sum__ship-note { text-align: right; color: var(--fn-text); }
.fn-sum__ship + .fn-sum__totals { border-top: none; }
.fn-sum__confirm {
  display: block; width: 100%;
  margin-top: 14px; padding: 13px 16px;
  border: none; border-radius: var(--fn-radius-pill);
  background: var(--fn-gradient-green);
  color: #fff;
  font-family: var(--fn-font-head);
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  box-shadow: var(--fn-shadow-sm);
  transition: filter .15s ease, transform .1s ease;
}
.fn-sum__confirm:hover { filter: brightness(1.05); }
.fn-sum__confirm:active { transform: scale(.99); }
.fn-sum__confirm[disabled] { opacity: .6; cursor: default; }
.fn-sum__minimum { margin: 10px 0 0; font-size: 12px; color: var(--fn-danger); }
.fn-sum__terms { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: var(--fn-muted); }
.fn-sum__error { display: none; margin-top: 10px; font-size: 13px; color: var(--fn-danger); }
.fn-sum__error.is-visible { display: block; }
@media (max-width: 991px) {
  /* на планшетах колонка вужча за вміст форми — липкість тільки заважає */
  .fn-sum__inner { position: static; }
}
@media (max-width: 767px) {
  /* Bootstrap ховає #column-right на телефонах (hidden-xs) — але саме там
     склад замовлення потрібен найбільше. Показуємо його над формою, а
     промокод лишаємо під переліком товарів. */
  #checkout-checkout > .row { display: flex; flex-direction: column; }
  #checkout-checkout #column-right {
    display: block !important;
    order: -1;
    width: 100%;
    float: none;
    margin-bottom: 6px;
  }
  .fn-sum__inner { display: flex; flex-direction: column; }
  .fn-sum__inner .fn-promocode { order: 2; margin: 0 0 14px; }
}
[data-theme="dark"] .fn-sum__card { background: var(--fn-surface); }

/* Промокод — окрема картка над підсумком: згорнутий рядок-посилання, поки код
   не введено, щоб не перетягувати увагу з форми замовлення. */
.fn-promocode {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  background: var(--fn-surface);
}
.fn-promocode.is-busy { opacity: .55; pointer-events: none; }
.fn-promocode__toggle {
  padding: 0; border: none; background: none;
  color: var(--fn-primary-700);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.fn-promocode__toggle:hover { color: var(--fn-accent-700); }
.fn-promocode__toggle .fa { margin-right: 6px; }
.fn-promocode__form { display: flex; gap: 8px; margin-top: 12px; }
/* власний display: flex переважає [hidden] браузера — повертаємо згортання */
.fn-promocode__form[hidden] { display: none; }
.fn-promocode__input.form-control {
  flex: 1 1 auto; min-width: 0; height: 40px;
  border-radius: var(--fn-radius-pill);
  border: 1px solid var(--fn-border);
  background: var(--fn-bg);
  box-shadow: none;
  padding: 0 16px;
  font-size: 14px;
}
.fn-promocode__input.form-control:focus {
  border-color: var(--fn-primary);
  box-shadow: 0 0 0 3px var(--fn-primary-50);
}
.fn-promocode__apply.btn {
  flex: 0 0 auto; height: 40px;
  padding: 0 20px;
  border-radius: var(--fn-radius-pill);
  font-weight: 700; white-space: nowrap;
}
.fn-promocode__msg { margin-top: 8px; font-size: 13px; color: var(--fn-muted); }
.fn-promocode__msg--error { color: var(--fn-danger); }
.fn-promocode__msg:empty { display: none; }
/* застосований код: та сама рамка, але з м'ятним тлом і хрестиком праворуч */
.fn-promocode--applied {
  border-color: var(--fn-primary);
  background: var(--fn-primary-50);
}
.fn-promocode__applied { display: flex; align-items: center; gap: 10px; }
.fn-promocode__tick { color: var(--fn-primary-700); font-size: 16px; }
.fn-promocode__text { flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--fn-heading); }
.fn-promocode__remove {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--fn-radius-pill);
  background: transparent; color: var(--fn-muted);
  font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.fn-promocode__remove:hover { background: var(--fn-bg); color: var(--fn-danger); }
@media (max-width: 480px) {
  .fn-promocode__form { flex-wrap: wrap; }
  .fn-promocode__apply.btn { width: 100%; }
}

/* ---- Cart page line controls ------------------------------------------
   The full cart page (theme override of checkout/cart.twig) uses the same
   −/+ stepper and round remove button as the drawer, just at a comfortable
   desktop size — core's "refresh to apply" field plus a square red button
   looked like a different shop next to the drawer. */
#checkout-cart .fn-cart-line {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
#checkout-cart .fn-cart-step {
  margin-top: 0;
  width: 116px; height: 36px;
}
#checkout-cart .fn-cart-step__btn { flex-basis: 34px; font-size: 18px; }
#checkout-cart .fn-cart-step__val { font-size: 14px; }
/* voucher rows have no quantity to change — the pill is just a read-out */
#checkout-cart .fn-cart-step--static { width: 56px; }
#checkout-cart .fn-cart-step--static .fn-cart-step__val {
  border: none; color: var(--fn-muted); background: none;
}
.fn-cart-rm {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--fn-radius-pill);
  background: var(--fn-danger); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.fn-cart-rm:hover, .fn-cart-rm:focus { background: #cf4457; color: #fff; }
.fn-cart-rm:active { transform: scale(.94); }
@media (max-width: 767px) {
  #checkout-cart .fn-cart-line { gap: 6px; }
  #checkout-cart .fn-cart-step { width: 100px; height: 32px; }
  #checkout-cart .fn-cart-step__btn { flex-basis: 30px; }
  .fn-cart-rm { width: 30px; height: 30px; font-size: 13px; }
}

/* "Також рекомендуємо" — rendered by the cart_extras module, appended under
   the checkout buttons. auto-fill so the same block also works full-width
   when placed on a page from Design > Layouts. */
.fn-cart-rec {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fn-border);
}
.fn-cart-rec__title {
  font-family: var(--fn-font-head);
  font-size: 15px; font-weight: 800;
  color: var(--fn-heading);
  margin: 0 0 12px;
}
.fn-cart-rec__grid {
  display: grid;
  /* 120px keeps two columns even in a 260px-wide drawer on a small phone —
     at 150px it dropped to a single column of huge cards. Auto-fill still
     gives more columns when the block is placed on a full-width page. */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.fn-cart-rec__item {
  display: flex; flex-direction: column;
  padding: 8px;
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fn-cart-rec__item:hover { border-color: var(--fn-primary); box-shadow: var(--fn-shadow-sm); }
.fn-cart-rec__link { display: block; color: var(--fn-text); }
.fn-cart-rec__img { display: block; height: 74px; margin: 0 auto 6px; object-fit: contain; }
.fn-cart-rec__name {
  font-size: 12px; line-height: 1.35;
  /* two lines max, so the cards in a row stay the same height */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.fn-cart-rec__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto; padding-top: 8px;
}
.fn-cart-rec__price { font-size: 13px; font-weight: 800; color: var(--fn-heading); }
.fn-cart-rec__old { font-weight: 600; font-size: 11px; color: var(--fn-muted); }
.fn-cart-rec__add {
  flex: none;
  width: 30px; height: 30px;
  padding: 0; border: none;
  border-radius: var(--fn-radius-pill);
  background: var(--fn-primary); color: #fff;
  font-size: 12px; cursor: pointer;
}
.fn-cart-rec__add:hover { background: var(--fn-primary-700); }
.fn-cart-rec__add--disabled,
.fn-cart-rec__add--disabled:hover {
  background: var(--fn-surface-2);
  color: var(--fn-muted);
  cursor: not-allowed;
}
[data-theme="dark"] .fn-cart-rec__item { background: var(--fn-surface); }

/* Narrow phones. Kept at the end of the cart section on purpose: these rules
   share the specificity of the ones above and only win by source order. */

/* below ~435px the drawer is narrower than 400px and the two checkout labels
   stop fitting side by side — stack them instead of squeezing the text */
@media (max-width: 440px) {
  .fn-cart-drawer__body p.text-right { display: block; }
  .fn-cart-drawer__body p.text-right a { width: 100%; }
  .fn-cart-drawer__body p.text-right a + a { margin-top: 8px; }
}
/* the five columns of the core cart table (thumb · name+stepper · price ·
   remove) need ~308px of min-content width — more than the drawer has at
   320–360px. Trim each of them a little instead of clipping the row. */
@media (max-width: 400px) {
  .fn-cart-drawer__body { padding: 12px 10px calc(20px + env(safe-area-inset-bottom)); }
  /* beats Bootstrap's own .table > tbody > tr > td { padding: 8px } */
  .fn-cart-drawer__body .table > tbody > tr > td { padding: 8px 3px; }
  .fn-cart-drawer__body table img { max-width: 40px; }
  .fn-cart-drawer__body .fn-cart-qty { font-size: 10px; }
  .fn-cart-drawer__body .fn-cart-total { font-size: 13px; }
  .fn-cart-drawer__body .table-striped .btn-danger.btn-xs { width: 26px; height: 26px; }
  .fn-cart-step { width: 76px; }
  .fn-cart-step__btn { flex-basis: 24px; font-size: 15px; }
}

/* product stickers */
.fn-label--new { background: var(--fn-primary); }
.fn-label--sale { background: var(--fn-pink); }
.product-thumb .image { overflow: hidden; }

/* mobile filters / category off-canvas panel (#column-left) ============== */
.fn-filters-toggle { display: none; } /* injected & shown on mobile only */
.fn-filters-head { display: none; }
@media (max-width: 767px) {
  /* trigger button above the product grid */
  .fn-filters-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0 0 14px; padding: 11px 16px;
    border: 1px solid var(--fn-glass-border); border-radius: var(--fn-radius-pill);
    background: var(--fn-glass-bg); color: var(--fn-heading);
    -webkit-backdrop-filter: var(--fn-glass-blur);
    backdrop-filter: var(--fn-glass-blur);
    font-family: var(--fn-font-head); font-weight: 700; font-size: 14px;
    box-shadow: var(--fn-shadow-sm);
  }
  .fn-filters-toggle .fa { color: var(--fn-primary); font-size: 15px; }
  .fn-filters-toggle:active { transform: translateY(1px); }

  /* the panel itself — slides in from the left (overrides .hidden-xs) */
  #column-left {
    display: block !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(88vw, 360px); z-index: 1200;
    margin: 0; padding: 0 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--fn-glass-bg);
    -webkit-backdrop-filter: var(--fn-glass-blur);
    backdrop-filter: var(--fn-glass-blur);
    box-shadow: var(--fn-glass-shadow);
    border-right: 1px solid var(--fn-glass-border);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  }
  #column-left.fn-open { transform: none; }
  /* sticky close header inside the panel — same glass so it hides scrolling
     content beneath it while staying part of the material */
  .fn-filters-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 1;
    margin: 0 -14px 10px; padding: 14px;
    background: var(--fn-glass-bg);
    -webkit-backdrop-filter: var(--fn-glass-blur);
    backdrop-filter: var(--fn-glass-blur);
    border-bottom: 1px solid var(--fn-glass-border);
  }
  .fn-filters-head strong { font-family: var(--fn-font-head); font-size: 16px; color: var(--fn-heading); }
  .fn-filters-close {
    background: none; border: none; font-size: 24px; line-height: 1;
    color: var(--fn-muted); cursor: pointer; padding: 0 4px;
  }
  .fn-filters-close:hover { color: var(--fn-pink-700); }
  /* tidy the panel modules so they fit the narrower drawer */
  #column-left .panel, #column-left .list-group { margin-bottom: 14px; }
}

/* No backdrop-filter (older Firefox/Safari) → fall back to solid surfaces so
   the glass panels stay opaque and legible instead of see-through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fn-cart-drawer { background: var(--fn-bg); }
  [data-theme="dark"] .fn-cart-drawer { background: var(--fn-surface); }
  @media (max-width: 767px) {
    #menu .navbar-collapse.navbar-ex1-collapse.in,
    #menu .navbar-collapse.navbar-ex1-collapse.collapsing,
    #column-left, .fn-filters-head, .fn-filters-toggle { background: var(--fn-bg); }
    [data-theme="dark"] #menu .navbar-collapse.navbar-ex1-collapse.in,
    [data-theme="dark"] #menu .navbar-collapse.navbar-ex1-collapse.collapsing,
    [data-theme="dark"] #column-left,
    [data-theme="dark"] .fn-filters-head,
    [data-theme="dark"] .fn-filters-toggle { background: var(--fn-surface); }
  }
}

/* mobile: sticky list toolbar — filters (left) + compact sort (right) ===== */
@media (max-width: 767px) {
  #fn-listbar {
    display: flex; align-items: center; gap: 6px;
    position: sticky; top: var(--fn-header-h, 100px); z-index: 900;
    margin: 0 -4px 14px; padding: 8px 4px;
    background: var(--fn-bg); border-bottom: 1px solid var(--fn-border);
  }
  [data-theme="dark"] #fn-listbar { background: var(--fn-surface); }

  /* filters toggle + sort: forced to identical widths (half the row each,
     minus half the gap) — flex-grow alone left them uneven because the
     native <select>'s intrinsic content size fought the equal-share split */
  #fn-listbar .fn-filters-toggle {
    width: calc(50% - 3px); max-width: calc(50% - 3px); height: 40px;
    margin: 0; flex: 0 0 auto; min-width: 0;
    padding: 9px 12px; gap: 6px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }

  /* sort: right side, identical pill size, with a leading icon instead of a label */
  #fn-listbar .fn-listbar__sort {
    flex: 0 0 auto; width: calc(50% - 3px); max-width: calc(50% - 3px); min-width: 0; margin: 0; padding: 0;
    display: flex; justify-content: center;
  }
  #fn-listbar .fn-listbar__sort .form-group { margin: 0; min-width: 0; width: 100%; }
  #fn-listbar .fn-listbar__sort .input-group { display: block; width: 100%; min-width: 0; }
  /* Bootstrap's table-layout addon fights a compact pill — drop it and render
     the whole control as one native select styled as a pill, with a sort glyph
     (left) and chevron (right) as background layers so nothing can wrap. */
  #fn-listbar .fn-listbar__sort .input-group-addon { display: none; }
  #fn-listbar .fn-listbar__sort select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: 40px; width: 100%; min-width: 0;
    border: 1px solid var(--fn-border); border-radius: var(--fn-radius-pill);
    box-shadow: var(--fn-shadow-sm);
    background-color: var(--fn-bg);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379beb1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h13M4 12h9M4 17h5'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 12px center, right 12px center;
    background-size: 17px, 12px;
    padding: 0 32px 0 36px;
    font-family: var(--fn-font-head); font-weight: 700; font-size: 13px;
    color: var(--fn-heading); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  [data-theme="dark"] #fn-listbar .fn-listbar__sort select { background-color: var(--fn-surface); }
  #fn-listbar .fn-listbar__sort select:focus {
    border-color: var(--fn-primary); box-shadow: var(--fn-shadow-sm); outline: none;
  }
  [data-theme="dark"] #fn-listbar .fn-listbar__sort .input-group-addon,
  [data-theme="dark"] #fn-listbar .fn-listbar__sort select { background: var(--fn-surface); }
}

/* 13c. PHASE 3 — quick view, gallery zoom, recently viewed ============= */

/* quick-view button overlay on cards */
.fn-qv-btn {
  position: absolute; left: 50%; bottom: 12px;
  transform: translate(-50%, 10px);
  opacity: 0; pointer-events: none;
  background: var(--fn-bg); color: var(--fn-heading);
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius-pill);
  padding: 7px 16px; font-weight: 700; font-size: 12px; white-space: nowrap;
  box-shadow: var(--fn-shadow-sm);
  transition: opacity .18s ease, transform .18s ease, color .15s ease, border-color .15s ease;
  z-index: 3;
}
.product-thumb .image:hover .fn-qv-btn { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fn-qv-btn:hover { color: var(--fn-primary-700); border-color: var(--fn-primary); }
@media (hover: none) { .fn-qv-btn { display: none; } }

/* quick-view modal (Bootstrap modal restyle) */
.modal-content { border: none; border-radius: var(--fn-radius); box-shadow: var(--fn-shadow); }
.modal-header { border-bottom: 1px solid var(--fn-border); }
.modal-header .close { opacity: .6; }
[data-theme="dark"] .modal-content { background: var(--fn-surface); color: var(--fn-text); }
[data-theme="dark"] .modal-header { border-color: var(--fn-border); }
/* quick-view modal: vertically centered, capped height, scrollable body */
#fn-quickview.in { display: flex !important; align-items: center; }
#fn-quickview .modal-dialog { margin: 16px auto; width: calc(100% - 32px); max-width: 880px; }
#fn-quickview .modal-content { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
#fn-quickview .modal-header { flex: 0 0 auto; }
#fn-quickview .modal-body { flex: 1 1 auto; overflow-y: auto; }
.fn-qv__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 26px; align-items: start; }
.fn-qv__mainimg { display: block; width: 100%; border-radius: var(--fn-radius); border: 1px solid var(--fn-border); background: #fff; }
.fn-qv__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fn-qv__thumb {
  width: 54px; height: 54px; padding: 3px; background: #fff; cursor: pointer;
  border: 1px solid var(--fn-border); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fn-qv__thumb img { width: 100%; height: 100%; object-fit: contain; }
.fn-qv__thumb.is-active, .fn-qv__thumb:hover { border-color: var(--fn-primary); box-shadow: 0 0 0 2px var(--fn-primary-50); }
.fn-qv__title { margin: 0 0 12px; font-size: 23px; line-height: 1.25; }
.fn-qv__meta { margin: 0 0 14px; font-size: 13px; color: var(--fn-muted); }
.fn-qv__meta li { padding: 2px 0; }
.fn-qv__meta a { color: var(--fn-accent); }
.fn-qv__price { margin: 0 0 16px; }
.fn-qv__price li { padding: 0; }
.fn-qv__price h2 { margin: 0; font-size: 32px; font-weight: 800; color: var(--fn-pink-700); }
.fn-qv__price span[style*="line-through"], .fn-qv__price .price-old {
  color: var(--fn-muted); font-size: 18px; font-weight: 500;
}
.fn-qv__desc {
  margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--fn-border);
  color: var(--fn-text); font-size: 14px; line-height: 1.6;
}
.fn-qv__form .form-group { margin-bottom: 0; }
.fn-qv__form .control-label { font-weight: 700; margin-bottom: 6px; }
.fn-qv__form input[name="quantity"] { max-width: 96px; display: inline-block; text-align: center; }
.fn-qv__form .fn-qv-add, .fn-qv__form #button-cart { margin-top: 14px; }
.fn-qv__more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--fn-accent); }
.fn-qv__more:hover { color: var(--fn-pink-700); }
.fn-qv__loading { text-align: center; padding: 60px 0; color: var(--fn-muted); }
@media (max-width: 600px) { .fn-qv__grid { grid-template-columns: 1fr; } }

/* recently viewed */
.fn-recent { margin: 36px 0 8px; }
.fn-recent__title { font-family: var(--fn-font-head); font-weight: 800; font-size: 22px; margin: 0 0 16px; }
.fn-recent__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.fn-recent__item {
  display: block; background: var(--fn-bg); border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-sm); padding: 12px; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fn-recent__item:hover { transform: translateY(-2px); box-shadow: var(--fn-shadow-sm); border-color: var(--fn-primary); }
.fn-recent__item img { height: 90px; object-fit: contain; margin: 0 auto 8px; }
.fn-recent__name { font-size: 12px; color: var(--fn-text); line-height: 1.35; display: block; min-height: 32px; }
.fn-recent__price { font-weight: 800; color: var(--fn-heading); font-size: 13px; margin-top: 6px; display: block; }
[data-theme="dark"] .fn-recent__item { background: var(--fn-surface); }
@media (max-width: 991px) { .fn-recent__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .fn-recent__grid { grid-template-columns: repeat(3, 1fr); } .fn-recent__item img { height: 70px; } }

/* 13. RESPONSIVE ======================================================== */
@media (max-width: 991px) {
  #search { margin-bottom: 12px; }
  #cart { margin-bottom: 4px; }
  header { padding: 10px 0; }
}
@media (max-width: 767px) {
  h1 { font-size: 24px; }
  #search, #cart { margin-bottom: 0; } /* neutralise the ≤991 margins inside the compact header row */
  /* fold away the standalone "Категорії" + hamburger bar — the ☰ button in the
     header row 2 now opens the same drawer (which still works as a fixed overlay) */
  #menu { min-height: 0; margin: 0; border: none; }
  #menu .navbar-header { display: none; }
  .fn-menu-wrap { margin-bottom: 0; }
  #menu .nav > li > a { padding: 12px 14px; }
  .product-thumb .caption { padding: 4px 14px 12px; }
  #top-links { padding-top: 4px; }
  #search .input-lg, #search .btn-lg { height: 44px; }
  /* compact cart → icon-only square (placed here so it beats the base
     `#cart > .btn` rule that appears earlier; search then takes the width) */
  #cart { width: auto; }
  #cart > .btn {
    width: 48px; min-width: 48px; height: 44px; min-height: 44px; padding: 0;
    border-radius: var(--fn-radius-sm); /* rounded square, matches the ☰ catalog button */
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0;
    /* the desktop pill shadow gets clipped hard by `header { overflow-x: clip }`
       at this edge, and reads as heavier than the flat ☰/search controls next
       to it in this compact row — drop it so the row sits level. */
    box-shadow: none;
  }
  #cart > .btn .fa { font-size: 18px; }
  /* the cart dropdown must not inherit the 48px button width — the default
     stylesheet sets width/min-width:100% which now collapses it. Give it a
     real width anchored to the button's right edge. */
  #cart .dropdown-menu { width: min(92vw, 340px); min-width: 0; right: 0; left: auto; }
  #cart .dropdown-menu li > div { min-width: 0; }
  /* reveal the «До кошику» label on the primary card button — the core list
     template hides it with Bootstrap .hidden-xs/.hidden-sm on the label span */
  .product-thumb .button-group button:first-child .hidden-xs,
  .product-thumb .button-group button:first-child .hidden-sm {
    display: inline !important;
  }
  .product-thumb .button-group button:first-child { white-space: nowrap; }
}
@media (max-width: 480px) {
  /* keep the «До кошику» label on the primary button (cards are now wider);
     only the secondary icon button (wishlist) collapses to its icon */
  .product-thumb .button-group button:not(:first-child) { font-size: 0; }
  .product-thumb .button-group button i { font-size: 15px; }
}

/* 14. MOBILE ACTION BAR ==================================================
   Tab bar flush with the bottom edge on phones only (canvas «FunFan —
   мобільна нижня панель», variant A, a little more compact): four equal
   buttons, each an icon over a caption, catalog tinted mint.
   On product pages .fn-quickbuy (§15) is moved into .fn-mbar__card by
   fun_theme.js and becomes the card's top row. Desktop must be untouched:
   the element is display:none outside the ≤767 breakpoint, and every rule
   below lives inside that query. */
.fn-mbar { display: none; }

@media (max-width: 767px) {
  .fn-mbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    /* below the sticky header (1010, fun_theme.js) on purpose: once docked
       above a tall footer this scrolls past the header like ordinary page
       content, and must duck behind it rather than render on top of it */
    z-index: 1005;
    /* sits below the off-canvas drawer (1200) and its backdrop (1190) */
    opacity: 0; visibility: hidden;
    transform: translateY(140%);
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
  }
  .fn-mbar.is-visible { opacity: 1; visibility: visible; transform: none; }
  /* the off-canvas menu owns the screen while it is open */
  .fn-mbar.fn-mbar--away { opacity: 0; visibility: hidden; transform: translateY(140%); }

  /* the card: near-opaque white so busy product photos underneath don't
     muddy the icons; a light blur only softens what still shows through */
  .fn-mbar__card {
    position: relative;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--fn-border);
    box-shadow: 0 -6px 20px rgba(30, 34, 48, .07);
    transition: border-radius .3s ease, box-shadow .3s ease;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .fn-mbar__pill {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px));
  }
  /* product page, buy row unfolded: the bar turns into a bottom sheet */
  .fn-quickbuy-shown .fn-mbar__card {
    border-radius: 20px 20px 0 0; border-top-color: transparent;
    box-shadow: 0 -10px 28px rgba(30, 34, 48, .10);
  }
  /* hairline between the buy row and the buttons */
  .fn-quickbuy-shown .fn-mbar__pill { box-shadow: inset 0 1px 0 #eef0f3; }

  .fn-mbar__btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    height: 48px; padding: 0 2px;
    border: 0; border-radius: 14px;
    background: transparent;
    color: #4b5563;
    font: 600 11px/1.1 var(--fn-font);
    letter-spacing: .01em;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fn-mbar__btn:active { transform: scale(.94); }
  .fn-mbar__btn:focus-visible { outline: 2px solid var(--fn-primary); outline-offset: 2px; }
  .fn-mbar__btn, .fn-mbar__btn:hover, .fn-mbar__btn:focus { text-decoration: none; color: #4b5563; }
  .fn-mbar__ico { width: 22px; height: 22px; flex: 0 0 auto; }
  .fn-mbar__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* catalog is the main action — until the buy row shows up, then «До кошика»
     is the only mint button and catalog drops back to a plain one */
  .fn-mbar__btn--cat,
  .fn-mbar__btn--cat:hover,
  .fn-mbar__btn--cat:focus { color: var(--fn-link-deep, #236557); }
  .fn-quickbuy-shown .fn-mbar__btn--cat,
  .fn-quickbuy-shown .fn-mbar__btn--cat:hover,
  .fn-quickbuy-shown .fn-mbar__btn--cat:focus { background: transparent; color: var(--fn-link-deep, #236557); }

  /* tap feedback: the button springs, a glow fills it and a ring flies off.
     Both layers follow the button's own rounded shape. */
  .fn-mbar__btn::before,
  .fn-mbar__btn::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
  }
  .fn-mbar__btn::after {
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    transform: scale(0);
  }
  .fn-mbar__btn::before { border: 2px solid currentColor; transform: scale(.92); }

  .fn-mbar__btn.is-tapped { animation: fnMbarPop .42s cubic-bezier(.34, 1.56, .64, 1); }
  .fn-mbar__btn.is-tapped::after { animation: fnMbarGlow .5s ease-out; }
  .fn-mbar__btn.is-tapped::before { animation: fnMbarRing .55s cubic-bezier(.22, 1, .36, 1); }

  @keyframes fnMbarPop {
    0%   { transform: scale(1); }
    28%  { transform: scale(.9); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  @keyframes fnMbarGlow {
    0%   { opacity: .3;  transform: scale(0); }
    70%  { opacity: .12; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1); }
  }
  @keyframes fnMbarRing {
    0%   { opacity: .45; transform: scale(.92); }
    100% { opacity: 0;   transform: scale(1.14); }
  }

  /* the arrow itself takes off when you send the page home */
  .fn-mbar__btn--top.is-tapped .fn-mbar__ico { animation: fnMbarLift .5s ease-out; }
  @keyframes fnMbarLift {
    0%   { transform: translateY(0); opacity: 1; }
    45%  { transform: translateY(-12px); opacity: 0; }
    46%  { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* wishlist count over the heart; hidden while the list is empty */
  .fn-mbar__badge {
    position: absolute; top: 3px; left: 50%; margin-left: 5px;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: var(--fn-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fn-accent); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    border: 2px solid #fff;
  }
  .fn-mbar__badge[hidden] { display: none; }

  /* online-help sheet — floats above the card */
  .fn-mbar__sheet {
    /* centred over the support button — the 3rd of four equal columns sits at
       ~62.5% of the card's width */
    position: absolute; left: 62.5%; bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: max-content; max-width: 72vw;
    padding: 6px;
    border-radius: var(--fn-radius);
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e9ecef;
    box-shadow: 0 14px 34px rgba(30, 34, 48, .18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: fnMbarSheetIn .24s cubic-bezier(.34, 1.4, .64, 1);
    transform-origin: 50% 100%;
  }
  .fn-mbar__sheet[hidden] { display: none; }
  .fn-mbar__sheet-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px;
    border-radius: var(--fn-radius-sm);
    color: var(--fn-heading); font-weight: 600; font-size: 14.5px;
  }
  .fn-mbar__sheet-item .fa { width: 20px; text-align: center; color: var(--fn-primary); font-size: 18px; }
  /* social channels keep their brand colour so they're recognisable at a glance */
  .fn-mbar__sheet-item--viber .fa { color: #7360F2; }
  .fn-mbar__sheet-item--tg .fa    { color: #26A5E4; }
  .fn-mbar__sheet-item:active { background: rgba(121, 190, 177, .16); }
  .fn-mbar__sheet-item, .fn-mbar__sheet-item:hover, .fn-mbar__sheet-item:focus {
    text-decoration: none; color: var(--fn-heading);
  }
  @keyframes fnMbarSheetIn {
    /* keep the -50% X shift through the whole tween, otherwise the sheet jumps
       off-centre while animating and snaps back at the end */
    from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
    to   { opacity: 1; transform: translateX(-50%); }
  }

  /* the dock docks onto the footer's top edge (fun_theme.js); this keeps an
     empty strip of its own height there, so once docked it covers nothing.
     --fn-mbar-h is the card's live height, buy row included (fun_theme.js). */
  .fn-mbar-shown footer,
  .fn-mbar-shown footer.fn-foot { margin-top: calc(var(--fn-mbar-h, 56px) + 24px); }
  .fn-mbar-shown .fn-cookie { bottom: calc(var(--fn-mbar-h, 56px) + 10px); }

  /* dark theme */
  [data-theme="dark"] .fn-mbar__card,
  [data-theme="dark"] .fn-mbar__sheet {
    background: rgba(28, 31, 38, .95);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
  }
  [data-theme="dark"] .fn-mbar__btn,
  [data-theme="dark"] .fn-mbar__btn:hover,
  [data-theme="dark"] .fn-mbar__btn:focus { color: #c9ced6; }
  [data-theme="dark"] .fn-mbar__btn--cat,
  [data-theme="dark"] .fn-mbar__btn--cat:hover,
  [data-theme="dark"] .fn-mbar__btn--cat:focus { color: var(--fn-primary); }
  [data-theme="dark"] .fn-quickbuy-shown .fn-mbar__btn--cat,
  [data-theme="dark"] .fn-quickbuy-shown .fn-mbar__btn--cat:hover,
  [data-theme="dark"] .fn-quickbuy-shown .fn-mbar__btn--cat:focus { color: var(--fn-primary); }
  [data-theme="dark"] .fn-quickbuy-shown .fn-mbar__pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  [data-theme="dark"] .fn-mbar__badge { border-color: #1c1f26; }
  [data-theme="dark"] .fn-mbar__sheet-item,
  [data-theme="dark"] .fn-mbar__sheet-item:hover { color: var(--fn-heading); }

  /* Safari/Firefox without backdrop-filter → fall back to solid surfaces */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fn-mbar__card, .fn-mbar__sheet { background: #fff; }
    [data-theme="dark"] .fn-mbar__card,
    [data-theme="dark"] .fn-mbar__sheet { background: #1c1f26; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fn-mbar { transition: opacity .01s; transform: none; }
    .fn-mbar__sheet { animation: none; }
    .fn-mbar__btn.is-tapped,
    .fn-mbar__btn.is-tapped::before,
    .fn-mbar__btn.is-tapped::after,
    .fn-mbar__btn--top.is-tapped .fn-mbar__ico { animation: none; }
  }
}

/* 15. MOBILE STICKY QUICK-BUY BAR =========================================
   Product page only. Mirrors the real qty stepper + «До кошика» button once
   it scrolls out of view on the way down (fun_theme.js), so the buy action
   stays reachable without a trip back up. fun_theme.js moves it into the
   mobile dock (.fn-mbar__card, §14) as the card's top row: it unfolds above
   the buttons, and the whole card docks above the footer as one piece. */
.fn-quickbuy { display: none; }

@media (max-width: 767px) {
  /* 0fr → 1fr unfolds the row to its natural height without measuring it */
  .fn-quickbuy {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.22, 1, .36, 1);
  }
  .fn-quickbuy.is-visible { grid-template-rows: 1fr; }

  .fn-quickbuy__row {
    min-height: 0; overflow: hidden;
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, padding .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  }
  .fn-quickbuy.is-visible .fn-quickbuy__row {
    padding: 8px 12px 6px;
    opacity: 1; visibility: visible;
    transition: opacity .25s ease .05s, padding .3s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }

  .fn-quickbuy__price {
    flex: 0 0 auto;
    font-family: var(--fn-font-head); font-size: 17px; font-weight: 800;
    color: var(--fn-price-deep, #a63872); white-space: nowrap;
  }
  .fn-quickbuy .fn-qty {
    flex: 0 0 auto; width: 104px; height: 42px;
    background: var(--fn-surface); border-color: transparent;
  }
  .fn-quickbuy .fn-qty__input { height: 100%; padding: 0; line-height: 42px; background: transparent; border-color: transparent; }
  .fn-quickbuy__buy {
    flex: 1 1 auto; min-width: 0; margin: 0; height: 44px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--fn-radius-pill);
    font-weight: 700;
  }
  .fn-quickbuy__buy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fn-quickbuy__ico { width: 20px; height: 20px; flex: 0 0 auto; }
  .fn-quickbuy__buy.is-loading { opacity: .7; pointer-events: none; }

  [data-theme="dark"] .fn-quickbuy .fn-qty { background: var(--fn-surface-2); }

  @media (prefers-reduced-motion: reduce) {
    .fn-quickbuy, .fn-quickbuy__row,
    .fn-quickbuy.is-visible .fn-quickbuy__row { transition: none; }
  }
}
/* narrow phones: the cart glyph gives its room to the caption */
@media (max-width: 374px) {
  .fn-quickbuy__ico { display: none; }
}

/* 17. DESIGN POLISH (31.10.2026) =========================================
   Шапка: кнопки згруповані, зафарбований лише кошик. Текст на м'ятному темний,
   бо білий дає контраст 2.2:1. Блок останній, тому перекриває правила вище. */
/* Токени для тексту: на білому ≥4.5:1 (було 4.28 і 4.20), на темному фоні світліші (було 3.1-3.7) */
:root { --fn-on-mint: #12332d; --fn-price-deep: #a63872; --fn-link-deep: #236557; }
:root[data-theme="dark"] { --fn-price-deep: #f08fba; --fn-link-deep: #79beb1; }

.btn-primary,.btn-primary:focus, .btn-primary:hover, .btn-primary:active,
#button-cart, #cart > .btn, .fn-cart-checkout, .fn-cart-checkout:hover { color: var(--fn-on-mint) !important; }
#cart > .btn { box-shadow: none; border-radius: var(--fn-radius-sm); }

/* Шапка за макетом (канвас FunFan): лінійні іконки масками, бо fun_theme.js і
   common.js переписують кнопку кошика з <i class="fa ...">. Лише в .fn-head:
   у мобільній шухляді меню ті самі елементи лишаються зі своїми гліфами. */
:root {
  --fn-field-line: #d5dade;
  --fn-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --fn-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20s-7.5-4.6-9-9.3C2 7.4 4.3 5 7 5c2 0 3.8 1.1 5 3 1.2-1.9 3-3 5-3 2.7 0 5 2.4 4 5.7-1.5 4.7-9 9.3-9 9.3z'/%3E%3C/svg%3E");
  --fn-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.5 4-6 8-6s7 1.5 8 6'/%3E%3C/svg%3E");
  --fn-i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 4h2l2.5 12h11L21 8H6.5'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3C/svg%3E");
  --fn-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --fn-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --fn-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --fn-field-line: rgba(255, 255, 255, .18); }
.fn-phones__main .fa-phone, .fn-head__call .fa-phone { --fn-i: var(--fn-i-phone); }
.fn-head .fa-heart { --fn-i: var(--fn-i-heart); }
.fn-head .fa-user { --fn-i: var(--fn-i-user); }
.fn-head .fa-shopping-cart { --fn-i: var(--fn-i-cart); }
.fn-head .fa-search { --fn-i: var(--fn-i-search); }
.fn-head .fa-bars { --fn-i: var(--fn-i-menu); }
.fn-phones__main .fa-phone::before, .fn-head__call .fa-phone::before,
.fn-head .fa-heart::before, .fn-head .fa-user::before, .fn-head .fa-shopping-cart::before,
.fn-head .fa-search::before, .fn-head .fa-bars::before {
  content: ""; display: block; width: var(--fn-i-size, 22px); height: var(--fn-i-size, 22px);
  background: currentColor;
  -webkit-mask: var(--fn-i) center / contain no-repeat; mask: var(--fn-i) center / contain no-repeat;
}
.fn-head .fa-search, .fn-head .fa-shopping-cart, .fn-phones__main .fa-phone { --fn-i-size: 20px; }

/* Пошук: одна рамка без м'ятної кнопки */
#search .input-lg, #search .btn-lg { height: 46px; border: 1px solid var(--fn-field-line); }
#search .input-lg { border-right: 0; border-radius: var(--fn-radius-sm) 0 0 var(--fn-radius-sm); padding: 0 16px; font-size: 14px; }
#search .btn-lg {
  width: 52px; padding: 0; border-left: 0; border-radius: 0 var(--fn-radius-sm) var(--fn-radius-sm) 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fn-bg); color: var(--fn-text);
}
#search .btn-lg:hover { background: var(--fn-primary-50); color: var(--fn-heading); }
#search:focus-within .input-lg, #search:focus-within .btn-lg { border-color: var(--fn-primary); }

/* Кошик у шапці: підпис і лічильник (cart.twig, fun_theme.js) */
#cart-total { display: inline-flex; align-items: center; gap: 10px; }
.fn-cart-cnt {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: var(--fn-on-mint); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.fn-cart-cnt[data-count="0"] { display: none; }
.fn-head__cat, header.fn-stuck .fn-head__cat { background: none; color: var(--fn-heading); }
.fn-head__call {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--fn-link-deep);
}

@media (min-width: 768px) {
  .fn-toplinks > li.fn-msg { display: none !important; }
  #search, #cart { margin-bottom: 0; }
  .fn-toplinks { gap: 4px; }
  .fn-toplinks > li.fn-phones { order: -1; }
  #logo.fn-head__logo { margin-right: 0; }
  .fn-head__search { flex: 1 1 320px; min-width: 0; }
  .fn-head__cart { flex: 0 0 auto; max-width: none; }
  #cart { width: auto; }
  #cart > .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: 46px; min-height: 46px; padding: 0 18px;
  }
  .fn-iconbtn { box-shadow: none; background: transparent; border-radius: var(--fn-radius-sm); width: 46px; height: 46px; }
  .fn-toplinks a.fn-iconbtn, .fn-toplinks a.fn-iconbtn:hover, .fn-toplinks a.fn-iconbtn:focus { color: var(--fn-heading); }
  .fn-iconbtn:hover, .fn-iconbtn:focus { background: var(--fn-primary-50); }
  .fn-iconbtn .fa { color: var(--fn-link-deep); font-size: 19px; }
  .fn-phones__main.fn-iconbtn .fa { color: var(--fn-link-deep); }
  .fn-wishlist-item .fn-iconbtn__badge { top: 2px; right: 2px; }
}
/* Номер текстом лише там, де вміщається поруч із пошуком */
@media (min-width: 992px) {
  .fn-head { gap: 28px; }
  .fn-phones__main.fn-iconbtn { width: auto; padding: 0 8px; gap: 8px; }
  .fn-phones__main .fn-iconbtn__label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    font-family: var(--fn-font-head); font-weight: 700; font-size: 15px;
  }
  .fn-phones__main.fn-iconbtn::after {
    content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: var(--fn-i-chevron) center / contain no-repeat; mask: var(--fn-i-chevron) center / contain no-repeat;
  }
}
@media (max-width: 767px) {
  /* Перший рядок: меню, логотип, дзвінок, кошик; пошук другим рядком */
  .fn-head { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 4px; row-gap: 8px; padding: 8px 0 12px; }
  .fn-head__cat { margin-left: -10px; --fn-i-size: 24px; }
  .fn-head__call { display: inline-flex; order: 3; }
  .fn-head__cart { order: 4; }
  .fn-head__search { order: 5; grid-column: 1 / -1; }
  #search .input-lg, #search .btn-lg { height: 44px; }
  #logo .fn-logo-full { height: 42px; }
  #cart > .btn { position: relative; width: 44px; min-width: 44px; }
  .fn-cart-lbl { display: none; }
  .fn-cart-cnt { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; font-weight: 700; }
}
.fn-phones__menu > li + li > a[rel] { font-weight: 600; }

/* Сторінка товару */
.fn-buybox__price-current { color: var(--fn-price-deep); }
.fn-buybox__actions #button-buy1click {
  background: var(--fn-bg); color: var(--fn-link-deep) !important;
  border: 1px solid var(--fn-link-deep); box-shadow: none;
}
@media (max-width: 767px) {
  /* Назва й ціна вище за опис: вкладки опускаємо під блок покупки */
  #content > .row:has(> [class*="col-sm-"] > .nav-tabs) { display: flex; flex-direction: column; }
  #content > .row:has(> [class*="col-sm-"] > .nav-tabs) > [class*="col-sm-"]:first-child { display: contents; }
  #content > .row:has(> [class*="col-sm-"] > .nav-tabs) > [class*="col-sm-"]:last-child { order: 2; }
  #content > .row:has(> [class*="col-sm-"] > .nav-tabs) > [class*="col-sm-"] > .nav-tabs { order: 3; }
  #content > .row:has(> [class*="col-sm-"] > .nav-tabs) > [class*="col-sm-"] > .tab-content { order: 4; }
}

/* Сторінка товару за макетами Main.dc і Mobile.dc.
   Колонка покупки стає flex-контейнером: мета-блок, #product і рядок кількості
   розкриті через display:contents, а порядок задає order. .fn-buybox__actions
   лишається справжнім боксом, бо fun_theme.js міряє його rect для липкої панелі.
   Кількість, «До кошика», серце й «Купити в 1 клік» лежать у ньому (product.twig),
   сітка рядка дій у блоці 17.p product. */
:root { --fn-line-strong: #d5dade; --fn-stock-ok: #1f7a57; }
:root[data-theme="dark"] { --fn-line-strong: #3a404c; --fn-stock-ok: #6fd3a5; }

/* на телефоні fun_theme.js переносить цю колонку всередину колонки з фото, тож без `> .row >` */
#content [class*="col-sm-"]:has(> .fn-buybox__meta-price) {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 12px 16px;
}
h1:has(+ .fn-buybox__meta-price) {
  order: 10; flex: 0 0 100%; margin: 0; font-family: var(--fn-font-head);
  font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--fn-heading);
}
.fn-buybox__meta-price, #product, .fn-buybox__qty { display: contents; }
.fn-buybox__sku, .fn-buybox__meta, .fn-reassurance + .rating { font-size: 13px; line-height: 1.4; color: var(--fn-muted); }
.fn-buybox__sku { order: 20; font-weight: 400; margin: 0; }
.fn-buybox__sku b { color: inherit; font-weight: 400; }
.fn-buybox__meta { order: 21; margin: 0; }
.fn-buybox__meta a { color: var(--fn-link-deep); }
.fn-reassurance + .rating { order: 22; margin: 0; }
.fn-reassurance + .rating p { margin: 0; }
.fn-reassurance + .rating a { color: var(--fn-link-deep); }
.rating:not(:has(.fa-star)) .fa-stack { display: none; }
#product::before, #product::after { content: ""; flex: 0 0 100%; height: 0; }
#product::before { order: 25; }
#product::after { order: 36; }
.fn-buybox__price-row { order: 30; flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.fn-buybox__price-current { font-size: 34px; font-weight: 800; line-height: 1.1; }
.fn-buybox__qty .fn-stock {
  order: 31; margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 13px; font-weight: 600;
}
.fn-stock--in { color: var(--fn-stock-ok); }
#product > :not(.fn-buybox__qty):not(.fn-buybox__actions):not(input) { order: 35; flex: 0 0 100%; }

/* кількість 52, «До кошика» 52, серце 52, «Купити в 1 клік» 46 */
.fn-buybox__qty-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* рядок дій: див. 17.p product */

/* доставка рядками з роздільниками, без рамки й іконок */
.fn-reassurance {
  order: 60; flex: 0 0 100%; margin: 0; overflow: visible; background: none;
  border: 0; border-top: 1px solid var(--fn-border); border-radius: 0; box-shadow: none;
  font-size: 13px; line-height: 1.45;
}
[data-theme="dark"] .fn-reassurance { background: none; }
.fn-reassurance__row {
  grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 16px;
  padding: 10px 0; font-size: 13px; line-height: 1.45;
}
.fn-reassurance__icon { display: none; }
.fn-reassurance__text, .fn-reassurance__meta { grid-column: 1; }
.fn-reassurance__text { grid-row: 1; color: var(--fn-heading); font-weight: 700; }
.fn-reassurance__meta { grid-row: 2; color: var(--fn-text); }
.fn-reassurance__meta b { font-weight: 400; margin-right: 4px; }
.fn-reassurance__meta br { display: none; }
.fn-reassurance__price { grid-column: 2; grid-row: 1 / span 2; }
.fn-maplink { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--fn-link-deep); text-decoration: none; }
.fn-reassurance__row--plain { grid-template-columns: minmax(0, 1fr); padding: 4px 0; border-bottom: 0; }
.fn-reassurance__row--plain:first-of-type, .fn-reassurance__row:not(.fn-reassurance__row--plain) + .fn-reassurance__row--plain { padding-top: 10px; }
.fn-reassurance__row--plain .fn-reassurance__text { grid-row: 1; font-weight: 400; color: var(--fn-muted); }
.fn-reassurance__row--plain .fn-reassurance__text b { font-weight: 600; color: var(--fn-heading); }

/* фото в картці 16, відступ 32 */
.fn-gallery__thumb--main { padding: 32px; border-radius: 16px; }
.fn-gallery__thumb--main:hover, .fn-gallery__thumb--main:focus { border-color: var(--fn-border); }
.fn-gallery__thumb--main img { width: 100%; max-width: 470px; margin: 0 auto; }
[data-theme="dark"] .fn-gallery__thumb--main { background: var(--fn-surface); }

/* опис: список без маркерів */
#tab-description ul { list-style: none; padding-left: 0; font-size: 14px; }

/* схожі товари: фото, назва, ціна й кнопка в одному рядку */
.fn-related-item > .product-thumb {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 10px;
  padding: 14px; border-radius: 16px; box-shadow: none;
}
.fn-related-item > .product-thumb:hover { transform: none; box-shadow: none; }
.fn-related-item .product-thumb .image { grid-column: 1 / -1; padding: 0; }
.fn-related-item .product-thumb .image img { width: 100%; height: 170px; object-fit: contain; border-radius: 0; }
.fn-related-item .product-thumb .caption { display: contents; }
.fn-related-item .product-thumb .caption h4 {
  grid-column: 1 / -1; margin: 0; min-height: 40px; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.fn-related-item .product-thumb .caption p:not(.price), .fn-related-item .fn-rating-slot { display: none; }
.fn-related-item .product-thumb .price {
  grid-column: 1; align-self: center; margin: 0; padding: 0;
  font-family: var(--fn-font-head); font-size: 18px; font-weight: 800; line-height: 1.2;
}
.fn-related-item .product-thumb .button-group { grid-column: 2; margin: 0; border: 0; background: none; }
.fn-related-item .product-thumb .button-group button + button { display: none; }
.fn-related-item .product-thumb .button-group button:first-child {
  height: 40px; padding: 0 14px; line-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: var(--fn-primary); color: var(--fn-on-mint); text-align: center;
}
.fn-related-item .product-thumb .button-group button:first-child:hover { background: var(--fn-primary-700); color: var(--fn-on-mint); }
.fn-related-item .product-thumb .button-group button:first-child .fa { display: none; }
.fn-related-item .product-thumb .button-group button:first-child span { display: inline !important; }
.fn-related-item .product-thumb .button-group button.fn-card-buy--disabled { background: var(--fn-surface-2); color: var(--fn-muted); }

@media (max-width: 767px) {
  h1:has(+ .fn-buybox__meta-price) { font-size: 26px; }
  /* на телефоні ціна й наявність над рядком артикула */
  .fn-buybox__price-row { order: 20; flex: 1 1 auto; }
  .fn-buybox__price-current { font-size: 30px; }
  .fn-buybox__qty .fn-stock { order: 21; margin-left: auto; }
  #product::before { order: 22; }
  .fn-buybox__sku { order: 30; }
  .fn-buybox__meta { order: 31; }
  .fn-reassurance + .rating { order: 32; }
  /* колонка з фото на телефоні розкрита (display:contents) і втрачає свої 15px */
  .fn-gallery, #content .nav-tabs, #content .tab-content { margin-left: 15px; margin-right: 15px; }
  .fn-gallery__thumb--main { padding: 16px; }
  .fn-gallery__thumb--main img { height: 270px; object-fit: contain; }
  .fn-related-item > .product-thumb { padding: 10px; gap: 8px; }
  .fn-related-item .product-thumb .image img { height: 120px; }
  .fn-related-item .product-thumb .caption h4 { min-height: 36px; font-size: 13px; }
  .fn-related-item .product-thumb .price { font-size: 16px; grid-column: 1 / -1; }
  .fn-related-item .product-thumb .button-group { grid-column: 1 / -1; }
  .fn-related-item .product-thumb .button-group button:first-child { width: 100%; height: 44px; line-height: 44px; }
}

/* Кошик за макетом Cart.dc (440px, суцільний фон, липкий підсумок).
   Шухляда живе поза #cart (fun_theme.js вантажить common/cart/info у
   .fn-cart-drawer__body), тож усі селектори від .fn-cart-drawer. Блок стоїть
   після базових і мобільних правил шухляди, тому перекриває їх за порядком. */
.fn-cart-drawer { --fn-cart-line: #d5dade; }
[data-theme="dark"] .fn-cart-drawer { --fn-cart-line: #3a404c; }
.fn-cart-drawer {
  width: min(92vw, 440px);
  background: var(--fn-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fn-cart-drawer__head { padding: 14px 20px; }
.fn-cart-drawer__head strong { font-size: 20px; font-weight: 700; }
.fn-cart-drawer__head .fa { display: none; }
.fn-cart-drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -12px; padding: 0;
  font-size: 28px; color: var(--fn-heading);
}
.fn-cart-drawer__close:hover { color: var(--fn-link-deep); }

/* тіло: список товарів, пропозиції, підсумок (липкий унизу) */
.fn-cart-drawer__body { display: flex; flex-direction: column; padding: 4px 0 0; }
.fn-cart-drawer__body > * { flex-shrink: 0; }
.fn-cart-drawer__body > li { padding: 0 20px; }
.fn-cart-drawer__body > li:first-child { order: 1; }
.fn-cart-drawer__body .fn-cart-rec { order: 2; margin: 20px 0 16px; padding: 0 20px; border-top: 0; }
.fn-cart-drawer__body > li:has(.table-bordered) {
  order: 3; position: sticky; bottom: 0; z-index: 1; margin-top: auto;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fn-border); background: var(--fn-bg);
}
.fn-cart-drawer__body > li:has(.table-bordered) > div { display: flex; flex-direction: column; gap: 10px; }

/* рядок товару: фото 72 | назва, степер | хрестик угорі, сума внизу */
.fn-cart-drawer__body .table-striped,
.fn-cart-drawer__body .table-striped > tbody { display: block; margin: 0; }
.fn-cart-drawer__body .table-striped > tbody > tr {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 12px;
  padding: 14px 0; border-bottom: 1px solid var(--fn-border);
}
.fn-cart-drawer__body .table-striped > tbody > tr > td { padding: 0; border: 0; }
.fn-cart-drawer__body .table-striped td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.fn-cart-drawer__body .table-striped td:nth-child(2) {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: 14px; line-height: 1.35; text-align: left;
}
.fn-cart-drawer__body .table-striped td:nth-child(2) > a:first-child { margin-bottom: 8px; font-weight: 600; color: var(--fn-heading); }
.fn-cart-drawer__body .table-striped td:nth-child(2) small { color: var(--fn-muted); }
.fn-cart-drawer__body .table-striped td:nth-child(4) { grid-column: 3; grid-row: 2; align-self: end; text-align: right; }
.fn-cart-drawer__body .table-striped td:nth-child(5) { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
.fn-cart-drawer__body .table-striped td img {
  display: block; width: 72px; height: 72px; max-width: none; padding: 0;
  border: 0; border-radius: 0; background: none; object-fit: contain;
}
.fn-cart-drawer__body .fn-cart-qty { font-size: 11px; }
.fn-cart-drawer__body .fn-cart-total { margin-top: 0; font-family: var(--fn-font-head); font-size: 16px; font-weight: 700; }

/* степер 36px, radius 10 */
.fn-cart-drawer__body .fn-cart-step {
  width: 98px; height: 36px; margin-top: auto;
  border-color: var(--fn-cart-line); border-radius: 10px; background: transparent;
}
.fn-cart-drawer__body .fn-cart-step__btn { flex: 0 0 36px; font-size: 18px; color: var(--fn-heading); }
.fn-cart-drawer__body .fn-cart-step__val { border: 0; font-size: 14px; font-weight: 600; }

/* видалення тихе: зона 44x44 у верхньому правому куті, видима 16px */
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px -12px 0 0; padding: 0; font-size: 16px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--fn-muted);
}
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs:hover,
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs:focus,
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs:active {
  background: transparent; border: 0; box-shadow: none; color: var(--fn-danger);
}
.fn-cart-drawer__body .table-striped .btn-danger.btn-xs:focus-visible { outline: 2px solid var(--fn-danger); outline-offset: -4px; }

/* підсумок: «Сума» дублює «Всього», ховаємо лише перший рядок і лише коли за
   ним є ще рядки (знижка, купон, доставка лишаються) */
.fn-cart-ship { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fn-muted); }
.fn-cart-drawer__body .table-bordered,
.fn-cart-drawer__body .table-bordered > tbody { display: block; width: auto; margin: 0; }
.fn-cart-drawer__body .table-bordered,
.fn-cart-drawer__body .table-bordered > tbody > tr > td { border: 0; background: none; }
.fn-cart-drawer__body .table-bordered tr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--fn-font-head); font-weight: 800; color: var(--fn-heading);
}
.fn-cart-drawer__body .table-bordered > tbody > tr > td { padding: 0; width: auto; font-size: 13px; }
.fn-cart-drawer__body .table-bordered tr:not(:last-child) { font-weight: 500; color: var(--fn-muted); }
.fn-cart-drawer__body .table-bordered tr:last-child > td:first-child { font-size: 16px; }
.fn-cart-drawer__body .table-bordered tr:last-child > td:last-child { font-size: 24px; }
.fn-cart-drawer__body .table-bordered tr:first-child:not(:last-child) { display: none; }

/* кнопки: «Оформити» зверху на всю ширину, «Продовжити» тихо під нею.
   display:flex повторно: на мобільному база ставить block */
.fn-cart-drawer__body p.text-right { display: flex; flex-direction: column-reverse; gap: 10px; margin: 0; }
.fn-cart-drawer__body p.text-right a.fn-cart-checkout {
  flex: 0 0 auto; min-height: 52px; font-size: 16px;
  background: var(--fn-primary); border-color: var(--fn-primary);
  border-radius: var(--fn-radius-sm);
}
.fn-cart-drawer__body p.text-right a.fn-cart-checkout:hover {
  background: var(--fn-primary-700); border-color: var(--fn-primary-700);
}
.fn-cart-drawer__body p.text-right .fn-cart-continue,
.fn-cart-drawer__body p.text-right .fn-cart-continue:hover {
  flex: 0 0 auto; min-height: 44px; font-size: 14px; font-weight: 600;
  background: none; border: 0; box-shadow: none; color: var(--fn-link-deep);
}
.fn-cart-drawer__body p.text-right .fn-cart-continue strong { font-weight: inherit; }
.fn-cart-drawer__body p.text-right .fa { display: none; }
.fn-cart-drawer__body p.text-right .fn-cart-continue:hover { text-decoration: underline; }

/* «Також рекомендуємо»: рядки 48px + кнопка 44px, а не картки */
.fn-cart-drawer__body .fn-cart-rec__title { margin: 0 0 8px; font-weight: 700; }
.fn-cart-drawer__body .fn-cart-rec__grid { display: block; }
.fn-cart-drawer__body .fn-cart-rec__item,
.fn-cart-drawer__body .fn-cart-rec__item:hover {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; column-gap: 12px; align-items: center;
  padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.fn-cart-drawer__body .fn-cart-rec__link,
.fn-cart-drawer__body .fn-cart-rec__foot { display: contents; }
.fn-cart-drawer__body .fn-cart-rec__img { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
.fn-cart-drawer__body .fn-cart-rec__name { grid-column: 2; grid-row: 1; align-self: end; min-height: 0; font-size: 14px; line-height: 1.3; color: var(--fn-heading); }
.fn-cart-drawer__body .fn-cart-rec__price { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; font-weight: 700; }
.fn-cart-drawer__body .fn-cart-rec__add {
  grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 44px;
  border: 1px solid var(--fn-cart-line); border-radius: 10px; background: var(--fn-bg); color: var(--fn-heading); font-size: 16px;
}
.fn-cart-drawer__body .fn-cart-rec__add:hover { background: var(--fn-primary-50); border-color: var(--fn-primary); color: var(--fn-heading); }
.fn-cart-drawer__body .fn-cart-rec__add--disabled,
.fn-cart-drawer__body .fn-cart-rec__add--disabled:hover { background: var(--fn-surface-2); border-color: var(--fn-border); color: var(--fn-muted); }

/* Cookie не перекриває контент */
.fn-cookie { left: 16px; right: auto; transform: none; max-width: 420px; }
@media (max-width: 767px) {
  .fn-cookie { left: 12px; right: 12px; max-width: none; }
  /* Панель покупки тепер рядок усередині мобільної панелі, а --fn-mbar-h уже рахує її висоту (§14) */
  .fn-mbar-shown .fn-cookie { bottom: calc(var(--fn-mbar-h, 68px) + 22px + env(safe-area-inset-bottom, 0px)); }
}

/* 17.f ФУТЕР, варіант G з канвасу ---------------------------------------
   Графітовий верх і чорний низ в обох темах. М'ятний лише в наведенні й
   шевронах, без зеленого тла. Правила розділу 11 для старої розмітки
   перекриваються тут класом .fn-foot. */
footer.fn-foot {
  --fn-foot-top: #1c1f26; --fn-foot-base: #000; --fn-foot-text: #f1f3f6;
  --fn-foot-link: #d9dde3; --fn-foot-muted: #a7aeb8; --fn-foot-line: rgba(255, 255, 255, .12);
  padding: 0; background: var(--fn-foot-top); color: var(--fn-foot-text);
  font-size: 14px; line-height: 20px;
}
footer.fn-foot:before { display: none; }
.fn-foot a { color: var(--fn-foot-link); text-decoration: none; }
.fn-foot a:hover, .fn-foot a:focus-visible { color: #79beb1; }
.fn-foot p { margin: 0; color: var(--fn-foot-muted); }

.fn-foot__grid {
  display: grid; grid-template-columns: minmax(0, 330px) repeat(3, minmax(0, 1fr));
  column-gap: 32px; padding-top: 40px; padding-bottom: 40px;
}
.fn-foot__grid:before, .fn-foot__grid:after { display: none; } /* clearfix .container ламає grid */
.fn-foot__brand { display: flex; flex-direction: column; gap: 12px; }
.fn-foot__logo { display: block; width: 150px; height: 60px; }
.fn-foot__about { line-height: 22px; max-width: 280px; }
.fn-foot__reach { display: flex; flex-direction: column; gap: 4px; }
.fn-foot__col { display: flex; flex-direction: column; gap: 10px; }
.fn-foot__title {
  margin: 0 0 6px; font-family: var(--fn-font-head); font-size: 15px; font-weight: 700;
  line-height: 20px; color: var(--fn-foot-text); text-transform: none; letter-spacing: 0;
}
.fn-foot__folds { display: none; }

.fn-foot__base { background: var(--fn-foot-base); }
.fn-foot__call {
  min-height: 102px; padding: 16px 0; box-sizing: border-box; border-bottom: 1px solid var(--fn-foot-line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
}
/* усі номери рівноправні: сітка тримає їх на одній лінії, цифри табличні */
.fn-foot__phones {
  display: grid; grid-template-columns: repeat(4, auto); gap: 10px 28px;
  font-size: 14px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums;
}
.fn-foot__phones a { display: flex; align-items: center; gap: 8px; color: var(--fn-foot-text); white-space: nowrap; }
.fn-foot__phones svg { flex: none; color: #79beb1; }
@media (max-width: 1199px) {
  .fn-foot__phones { grid-template-columns: repeat(2, auto); }
}
.fn-foot__chat, .fn-foot__social { display: flex; gap: 8px; }
.fn-foot a.fn-foot__btn {
  height: 46px; padding: 0 16px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: var(--fn-foot-text); font-weight: 600; white-space: nowrap;
}
.fn-foot a.fn-foot__btn:hover { border-color: #79beb1; color: #79beb1; }
.fn-foot a.fn-foot__btn--solid { border-color: var(--fn-foot-text); background: var(--fn-foot-text); color: #14161a; font-weight: 700; }
.fn-foot a.fn-foot__btn--solid:hover { border-color: #79beb1; background: #79beb1; color: #14161a; }
.fn-foot__social a {
  width: 44px; height: 44px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--fn-foot-text);
}
.fn-foot__social a:hover { border-color: #79beb1; }
.fn-foot__legal {
  min-height: 60px; padding: 12px 0; box-sizing: border-box; font-size: 13px; color: var(--fn-foot-muted);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px;
}
.fn-foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fn-foot__links a { color: var(--fn-foot-muted); }
.fn-foot__pay { font-family: var(--fn-font-head); font-size: 12px; font-weight: 700; color: var(--fn-foot-text); }

/* Планшет: бренд на всю ширину, під ним три колонки */
@media (min-width: 768px) and (max-width: 991px) {
  .fn-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .fn-foot__brand { grid-column: 1 / -1; }
  .fn-foot__about { max-width: 480px; }
}

/* Телефон: акордеон і сітка кнопок 2×3, як на макеті */
@media (max-width: 767px) {
  footer.fn-foot { margin-top: 32px; padding: 0; }
  .fn-foot__grid { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; padding-bottom: 24px; }
  .fn-foot__logo { width: 125px; height: 50px; }
  .fn-foot__about { max-width: none; }
  .fn-foot__col { display: none; }
  .fn-foot__folds { display: block; margin-top: 4px; border-top: 1px solid var(--fn-foot-line); }
  .fn-foot__fold { border-bottom: 1px solid var(--fn-foot-line); }
  .fn-foot__fold > summary {
    height: 48px; margin: 0; display: flex; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer;
  }
  .fn-foot__fold > summary::-webkit-details-marker { display: none; }
  .fn-foot__fold > summary svg { color: #79beb1; transition: transform .2s ease; }
  .fn-foot__fold[open] > summary svg { transform: rotate(180deg); }
  .fn-foot__fold nav { display: flex; flex-direction: column; padding-bottom: 8px; }
  .fn-foot__fold nav a { padding: 10px 0; }

  /* відступ знизу під плаваючу мобільну панель */
  .fn-foot__base .container { padding-top: 24px; padding-bottom: 96px; }
  .fn-foot__call {
    min-height: 0; padding: 0; border: 0; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .fn-foot__phones, .fn-foot__chat { display: contents; }
  .fn-foot__phones a, .fn-foot a.fn-foot__btn {
    height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
  }
  .fn-foot__phones a { order: 1; background: var(--fn-foot-top); color: var(--fn-foot-text); }
  .fn-foot a.fn-foot__btn { order: 3; }
  .fn-foot a.fn-foot__btn--solid { order: 2; grid-column: 1 / -1; font-weight: 700; }
  .fn-foot__social { order: 4; grid-column: 1 / -1; margin-top: 6px; }
  .fn-foot__legal { min-height: 0; padding: 14px 0 0; justify-content: flex-start; gap: 4px 16px; }
  .fn-foot__links { gap: 4px 16px; }
  .fn-foot__pay { display: none; }
}

/* 17.d drawer (agent): фокус із клавіатури на степері кошика.
   Рамка степера має overflow:hidden, тож звичайний outline зовні обрізався, а на полі кількості
   його вимикало правило :focus. Кільце малюємо всередині, глибоким зеленим (контраст 3:1 і в темній темі). */
.fn-cart-step__btn:focus-visible,
.fn-cart-step__val:focus-visible {
  outline: 2px solid var(--fn-link-deep); outline-offset: -2px; border-radius: 8px;
}
.fn-cart-step__val:focus-visible { background: var(--fn-primary-50); }

/* 17.p product (agent): сторінка товару за Main.dc і Mobile.dc.
   Рядок дій сіткою «кількість | До кошика | серце», під ним «Купити в 1 клік» на всю ширину.
   Усі чотири елементи лежать у .fn-buybox__actions (product.twig), без від'ємних margin. */
.fn-buybox__actions {
  order: 42; flex: 0 0 100%; display: grid; grid-template-columns: 118px minmax(0, 1fr) 52px;
  gap: 10px; margin: 0; padding: 0;
}
.fn-buybox__actions .fn-qty {
  width: 118px; height: 52px;
  border: 1px solid var(--fn-line-strong); border-radius: 12px;
}
.fn-buybox__actions .fn-qty__btn { width: 44px; font-size: 20px; font-weight: 400; color: var(--fn-heading); }
.fn-buybox__actions .fn-qty__input {
  flex: 0 0 28px; width: 28px; height: 50px; padding: 0; border: 0; background: none;
  font-weight: 600; color: var(--fn-heading);
}
.fn-buybox__actions #button-cart {
  height: 52px; margin: 0; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 700;
}
.fn-buybox__actions #button-buy1click {
  grid-column: 1 / -1; height: 46px; margin: 0; padding: 0 16px;
  border-radius: 12px; font-size: 15px; font-weight: 600;
}
/* серце 52x52 з контуром, як у макеті; фон як у степера кількості (світла й темна тема) */
.fn-buybox__wishlist {
  position: static; width: 52px; height: 52px; margin: 0; padding: 0;
  border: 1px solid var(--fn-line-strong); border-radius: 12px;
  color: var(--fn-heading); font-size: 22px;
}
.fn-buybox__wishlist .fa { font-size: 21px; }
.fn-buybox__wishlist .fa-heart::before { content: "\f08a"; }
.fn-buybox__wishlist:hover, .fn-buybox__wishlist:focus-visible { color: var(--fn-price-deep); border-color: var(--fn-price-deep); }

/* немає в наявності: повідомлення й серце поруч */
.fn-buybox__oos { display: flex; align-items: flex-start; gap: 10px; }
.fn-buybox__oos .fn-unavailable { flex: 1 1 auto; min-width: 0; margin: 0; }
.fn-buybox__oos .fn-buybox__wishlist { flex: 0 0 52px; }

/* характеристики списком під доставкою (замість вкладки «Специфікація») */
.fn-specs { order: 62; flex: 0 0 100%; min-width: 0; padding-top: 8px; }
.fn-specs__list {
  /* назви 170px як у макеті, у вузькій колонці (768, телефон) до 110px */
  display: grid; grid-template-columns: clamp(110px, 32%, 170px) minmax(0, 1fr); gap: 6px 12px;
  margin: 0; font-size: 14px; line-height: 1.45;
}
.fn-specs__list dt { font-weight: 400; color: var(--fn-muted); }
.fn-specs__list dd { margin: 0; color: var(--fn-text); overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .fn-specs { padding-top: 0; }
  /* хлібні крихти на телефоні: лише «‹ батьківська категорія» */
  #product-product > .breadcrumb { padding: 0; margin-bottom: 14px; }
  #product-product > .breadcrumb > li { display: none; }
  #product-product > .breadcrumb > li:nth-last-child(2) { display: inline-flex; align-items: center; min-height: 24px; }
  #product-product > .breadcrumb > li:nth-last-child(2)::before { content: "\2039"; padding: 0 6px 0 0; color: var(--fn-muted); }
}

/* 17.x fixes (agent): швидкий перегляд і банер в описі категорії.
   Швидкий перегляд: наявність окремим рядком, нижче ряд «кількість | До кошика | серце»
   (усе по 52px), «Купити в 1 клік» на всю ширину. Усе під #fn-qv-product, щоб не залежати
   від сітки .fn-buybox__actions на сторінці товару. */
#fn-qv-product { display: block; }
#fn-qv-product .fn-buybox__qty { display: block; margin: 0 0 12px; }
#fn-qv-product .fn-buybox__qty .fn-stock {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 600;
}
#fn-qv-product .fn-buybox__actions {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; padding: 0;
}
#fn-qv-product .fn-buybox__actions .fn-qty {
  flex: 0 0 118px; width: 118px; height: 52px;
  border: 1px solid var(--fn-line-strong); border-radius: 12px;
}
#fn-qv-product .fn-buybox__actions .fn-qty__btn { width: 44px; font-size: 20px; font-weight: 400; color: var(--fn-heading); }
#fn-qv-product .fn-buybox__actions .fn-qty__input {
  flex: 0 0 28px; width: 28px; height: 50px; padding: 0; border: 0; background: none;
  font-weight: 600; color: var(--fn-heading);
}
#fn-qv-product .fn-buybox__actions .fn-qv-add {
  flex: 1 1 0; min-width: 0; height: 52px; margin: 0; padding: 0 16px;
  border-radius: 12px; font-size: 16px; font-weight: 700; box-shadow: none;
}
#fn-qv-product .fn-buybox__wishlist {
  position: static; flex: 0 0 52px; width: 52px; height: 52px; margin: 0; padding: 0;
  border: 1px solid var(--fn-line-strong); border-radius: 12px;
  color: var(--fn-heading); font-size: 22px;
}
#fn-qv-product .fn-buybox__actions #button-buy1click {
  flex: 0 0 100%; height: 46px; margin: 0; padding: 0 16px;
  border-radius: 12px; font-size: 15px; font-weight: 600;
}

/* Опис категорії: банер із HTML опису на всю ширину контенту, текст нижче звичайним абзацом.
   Картинки приходять із БД (img всередині p/h2 разом із текстом), тож правимо лише тут.
   Малі зображення (ширина в атрибуті 2xx-4xx, напр. «Кульки-Цифри») не розтягуємо. */
#product-category #content > .row > .col-sm-10 { width: 100%; }
#product-category #content > .row > .col-sm-10 img {
  display: block; float: none; width: 100%; max-width: 100%; height: auto; max-height: 420px;
  margin: 0 0 12px; border-radius: var(--fn-radius); object-fit: cover; object-position: center;
}
#product-category #content > .row > .col-sm-10 img[width^="2"],
#product-category #content > .row > .col-sm-10 img[width^="3"],
#product-category #content > .row > .col-sm-10 img[width^="4"] {
  width: auto; max-height: none; object-fit: initial;
}
@media (max-width: 767px) {
  #product-category #content > .row > .col-sm-10 img { max-height: 260px; }
}

/* 17.q QA 31.10: дрібні правки зі звіту перевірки станів ------------------ */
/* кільце фокусу на логотипі й пунктах меню: #logo a:focus і правила меню його гасили */
#logo .fn-logo-link:focus-visible,
#menu .nav > li > a:focus-visible {
  outline: 2px solid var(--fn-link-deep); outline-offset: 2px; border-radius: 4px;
}
/* роздільники: bootstrap-овий #eee світився в темній темі */
hr { border-top-color: var(--fn-border); }
/* «Доступні опції» підписом групи, а не великим заголовком */
#product > h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
/* чіп знижки за кількість: #5fa99b на м'ятному давав ~2.5:1 */
.fn-buybox__discount { color: var(--fn-link-deep); }

/* 17.r фільтри в темній темі: тло .list-group-item і .panel-footer лишалось білим із bootstrap */
[data-theme="dark"] .list-group-item { background: var(--fn-surface); color: var(--fn-text); }
[data-theme="dark"] #column-left .list-group > a.list-group-item:not([href]) { color: var(--fn-heading); font-weight: 600; }
[data-theme="dark"] .panel-footer { background: var(--fn-surface-2); border-top-color: var(--fn-border); }
[data-theme="dark"] #column-left .checkbox input { color-scheme: dark; accent-color: var(--fn-primary); }
[data-theme="dark"] .input-group-addon { color: var(--fn-muted); }

/* 17.s галерея: фон темним склом замість суцільного затемнення magnific */
body .mfp-bg {
  background: rgba(10, 12, 16, .76); opacity: 1;
  -webkit-backdrop-filter: var(--fn-glass-blur);
  backdrop-filter: var(--fn-glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .mfp-bg { background: rgba(10, 12, 16, .9); }
}