/* /cloud-cgi/_restored/mobile-responsive.css */
/* The site was scraped from Prom.ua's desktop template - it never had a
   real mobile layout captured (the live site likely served a separate
   mobile build). Adding a viewport meta tag alone just exposed the raw
   desktop layout at phone width: a float+negative-margin sidebar
   (.container/.sidebar/.container-left) and a floated fixed-width
   product photo (.b-product__image-panel, 288px, with the info column
   pushed over by a fixed 322px margin) both overflow and overlap badly
   under ~400px. This file targets the 645/lightred ("modern") template,
   used by most real pages and by the RU-language synthetic recovered
   product pages. Loaded globally (via the root layout, not per-page) -
   its selectors are scoped to lightred-only classes, so it's a no-op on
   pages using the other templates.

   Every rule below is !important: this stylesheet is linked in <head>,
   so it loads BEFORE each page's own template CSS (linked further down,
   inside <article>) - without !important, a later same-specificity
   unconditional desktop rule would win over an earlier media-query one
   even while the media query is active. */

@media (max-width: 767px) {
  /* THE actual root cause of "everything looks tiny" on mobile even
     after every overflow/overlap fix below: both real template
     stylesheets pin the page's outermost box to a hard 980px minimum
     (body{min-width:980px} in lightred.css, .b-layout{min-width:980px}
     in newlime.css) - a leftover from whatever separate mobile build
     Prom.ua served instead of ever shrinking this desktop one. With
     that in place, the viewport meta tag doesn't help: the browser
     still has to fit a 980px-wide box into a ~390px screen, so it
     zooms the ENTIRE page out to compensate - every fix above was
     correctly removing overflow *within* that shrunk 980px box, but
     the box itself never got smaller. This single override is what
     actually lets the page render at real mobile width instead of a
     shrunk-down desktop one.
     Same idea for two smaller leftover min-widths that would each
     cause a few px of horizontal overflow on the narrowest phones. */
  body,
  .b-layout {
    min-width: 0 !important;
  }
  .cs-product-list__img-wrapper,
  .cs-footer__company-info-item {
    min-width: 0 !important;
  }

  /* Safety net for the homepage's "scrolls right into empty space" bug:
     found one real cause (a map popup meant to be JS-triggered -
     .js-map_container has a hard-coded .h-width-600 utility class,
     600px, sitting inside a wrapper with inline style="display:none"
     that should already remove it from layout - but rather than chase
     down every such hidden-until-JS widget one at a time, just refuse
     to let the page scroll horizontally at all on mobile. Nothing
     legitimate on these pages needs horizontal scroll. */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .h-width-600,
  .h-width-650,
  .h-width-700 {
    width: auto !important;
    max-width: 100% !important;
  }

  /* .header-top (phone numbers bar + the "search" box) - the phones
     are already repeated in the footer, and the search box doesn't
     actually search anything (no backend; /site_search just redirects
     to the full catalog regardless of what's typed), so on mobile it's
     pure wasted space above the fold pushing real content down. Same
     reasoning as .b-header__top below (the other template's
     equivalent), already hidden for that one. */
  .header-top {
    display: none !important;
  }

  .header__table,
  .header__cell {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 0 !important;
  }
  .b-header-company-name {
    margin-left: 0 !important;
  }

  .top-menu {
    text-align: center !important;
  }
  .top-menu__item {
    display: inline-block !important;
    border-left: 0 !important;
  }

  /* ===== Mobile header v2: pinned compact bar + slide-out drawer =====
     Per user feedback with screenshots. The logo and burger button are
     pinned with position:fixed independent of each template's own
     header layout (which differs enough between the three - see the
     header/nav DOM notes in add-mobile-burger-menu.mjs - that
     reproducing one true flex bar across all of them isn't worth the
     risk of breaking something). The language switcher (LangSwitcher.tsx,
     only ever present on the ~15 pages with a live RU/UK toggle) shifts
     itself left on mobile to sit beside the burger instead of on top of
     it - see that component's own stylesheet. */

  /* Tagline under the logo: real content, but no room for it in a
     pinned single-row header, and it was the thing actually overlapping
     the language switcher in the reported screenshot. */
  .b-header-company-name__title {
    display: none !important;
  }

  /* One solid header bar (the template's own outer <header> element,
     already present on every page - see add-mobile-burger-menu.mjs's
     comment for why these three selectors reliably match it) instead
     of a separate background per element. Logo/burger/switcher just
     sit on top of it, all sharing the same top offset and box height
     (8px / 40px) so their centers line up regardless of what's
     rendered inside each one. */
  header.header,
  .b-header,
  header.cs-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 9989 !important;
  }

  .b-header-company-name__logo,
  .b-header-company-name__logo-wrapper,
  .cs-header-company-info {
    position: fixed !important;
    top: 8px !important;
    left: 12px !important;
    height: 40px !important;
    z-index: 9990 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    background: none !important;
  }
  .b-header-company-name__logo img,
  .b-header-company-name__logo-wrapper img,
  .cs-header-company-info img {
    max-width: 130px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
  }
  /* Room at the top of the page for the now-fixed header bar, so it
     doesn't sit on top of the first real content. */
  body {
    padding-top: 56px !important;
  }
  .b-promo-banner,
  .header-top,
  .b-header__top {
    margin-top: 0 !important;
  }

  .nb-burger-checkbox {
    display: none !important;
  }
  .nb-burger-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    height: 40px !important;
    width: 40px !important;
    z-index: 9991 !important;
    box-sizing: border-box !important;
    background: none !important;
    cursor: pointer;
  }
  .nb-burger-label span,
  .nb-burger-label::before,
  .nb-burger-label::after {
    content: "";
    position: static;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #ef5b5b;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nb-burger-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 9995 !important;
  }
  .nb-burger-checkbox:checked ~ .nb-burger-backdrop {
    display: block !important;
  }

  /* The drawer itself: turn whichever nav element this template uses
     into a fixed, full-height right-side panel. Collapsed (off-screen)
     by default, slides in on :checked. The ~ combinator needs the
     checkbox and a real sibling - each template's nav sits a few
     levels inside its own header, so the selectors below step through
     the one wrapper that actually contains it (see the script's own
     comment for the exact DOM path on each template). */
  nav.top-menu,
  nav.b-menu,
  .cs-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 82% !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #2c2c2c !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(105%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9996 !important;
    overflow-y: auto !important;
    text-align: left !important;
  }
  .nb-burger-checkbox:checked ~ .page-wrapper nav.top-menu,
  .nb-burger-checkbox:checked ~ .b-header__nav-part nav.b-menu,
  .nb-burger-checkbox:checked ~ .cs-header__wrapper .cs-menu {
    transform: translateX(0) !important;
  }

  .nb-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  .nb-drawer-header__logo {
    color: #fff !important;
    font: bold 16px/1.2 Arial, Helvetica, sans-serif !important;
  }
  .nb-drawer-header__close {
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 4px 8px !important;
  }

  /* Nav items inside the drawer: bigger, spaced, light text on the
     dark panel, one per row instead of the desktop's inline pills. */
  .top-menu-wrapper,
  .b-menu__holder,
  .cs-menu__holder {
    padding: 8px 16px 24px !important;
  }
  .top-menu__item,
  li.b-menu__item,
  li.cs-menu__item {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .top-menu__link,
  .b-menu__link,
  .cs-menu__link {
    display: block !important;
    padding: 14px 4px !important;
    color: #fff !important;
    font-size: 16px !important;
  }
  .top-menu__item:hover .top-menu__link {
    background: none !important;
    color: #fff !important;
  }

  /* the "приглашаем к выгодному партнерству" B2B banner: not relevant
     to a shopper browsing on their phone, and it was the very first
     thing visible above the fold on every single page. */
  .b-promo-banner {
    display: none !important;
  }

  /* sidebar layout: the float+negative-margin "holy grail" 2-column
     trick only works at desktop widths - stack main content above the
     sidebar instead of letting it push content off-screen */
  .container,
  .sidebar {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .container-left {
    margin-left: 0 !important;
  }
  .container-search .b-content__body {
    width: 100% !important;
    margin: 0 !important;
  }

  /* product listing grid: one column instead of 3 cramped ones */
  .b-product-line_type_gallery,
  .content-line_product-line .b-layout__clear {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* product detail page: the classic culprit - a floated fixed-width
     photo with the info column pushed over by a fixed margin. Stack
     them instead. */
  .b-product__image-panel {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
  .b-product__info-holder {
    margin-left: 0 !important;
  }
  .b-product__zoom-box,
  .b-product__image {
    width: 100% !important;
  }
  .b-centered-image__img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* homepage hero photo: it's portrait-oriented, so at full mobile
     width (scaled to preserve aspect ratio) it renders very tall -
     users had to scroll past most of a screen's height of photo before
     reaching any real content (category tiles etc). Cap it to a fixed
     height and crop instead of scaling the whole thing down. */
  .b-slider-wrapper {
    max-height: 320px !important;
    overflow: hidden !important;
  }
  .b-slider__image {
    width: 100% !important;
    height: 320px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top !important;
  }

  /* generic safety net: nothing should be wider than the viewport */
  img,
  table {
    max-width: 100% !important;
    height: auto !important;
  }
  .page-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* the third restored template (design_template 1000 / "newlime",
     cs-* classes, currently just one page) has the exact same
     float+negative-margin sidebar trick as the others, and its own
     ~30 media queries never go below 1024px either. */
  .cs-sidebar {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
  }
  .cs-page__main-content-wrapper {
    padding-left: 0 !important;
  }
  .cs-page__content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* footer: both link columns (.b-sitewide-links, "ДЛЯ ЖЕНЩИН" etc.) and
     the schedule/address/contacts row (.footer-table) use a CSS-table
     layout with each cell pinned to 25% width - 4 (or 3) columns
     crammed into phone width wraps every word onto its own line and
     clips the last column off the right edge entirely. Stack them. */
  .b-sitewide-links,
  .footer-table {
    display: block !important;
  }
  .b-sitewide-links__item,
  .footer-cell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* sidebar category submenu: on desktop this is a :hover-triggered
     flyout positioned to the right of its parent item
     (.sidebar-menu__dropdown { position:absolute; left:100% }) - on a
     phone there's no room to its right, so it rendered as a tiny box
     cut off past the edge of the screen. There's also no real way to
     "hover" on touch (the first tap just triggers the CSS :hover state
     instead of following the link, so it LOOKS like tapping the
     category does nothing). Simplest reliable fix: make it a normal
     always-expanded inline sub-list instead of a hover flyout - no
     JS/touch-detection needed, and each category only has a handful of
     subcategories so the sidebar doesn't get unreasonably long. */
  .sidebar-menu__dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 0 8px 20px !important;
    box-sizing: border-box !important;
  }
  .sidebar-menu__dropdown-wrapper {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .sidebar-menu__dropdown-wrapper:before {
    display: none !important;
  }

  /* "b" template header (legacy-theme.css): the phone numbers up top
     are redundant on mobile (they're repeated in the footer contacts),
     and .b-header__cart is the template's own header cart button -
     redundant with the site's own floating cart button (bottom-right,
     added in Cart.tsx) which already covers every page. Both just eat
     up vertical space above the fold on a phone; keep them on desktop,
     where the space isn't scarce and .b-header__cart is the only
     visible cart entry point in the header. */
  .b-header__top,
  .b-header__cart {
    display: none !important;
  }

  /* Text safety net: found and fixed one real cause of text rendering
     cut off past the edge of the screen (a flex item - the thumbnail
     strip on product pages - missing min-width:0, forcing the whole
     page wider than the viewport upstream), but force-wrap text
     everywhere as a defense against any other such layout bug forcing
     a text container wider than the screen elsewhere on the site. */
  h1,
  h2,
  h3,
  p,
  .b-title,
  .b-user-content {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Touch audit round 2: making these two dropdowns permanently
     expanded (first attempt) turned out to look exactly like it
     sounds - a wall of ten unrelated links dumped under the header on
     every single page. A real tap-to-open/close disclosure is the
     correct fix, not "always open". Since there's no JS on this site,
     it's built with the checkbox-hack: add-mobile-nav-toggle.mjs
     inserts a hidden <input type="checkbox"> + a small "▾" <label
     for="..."> as the first children of the dropdown's parent item (a
     DOM sibling of the dropdown itself, required for the ~ selector
     below to work) on every page that has one of these three menus.
     Collapsed by default; :checked reveals it. Desktop is completely
     unaffected - both the checkbox and label stay display:none outside
     this media query (set inline in the HTML), and the dropdown's own
     :hover behavior is untouched there. */
  .nb-toggle-checkbox {
    display: none !important;
  }
  .nb-toggle-label {
    display: inline-block !important;
    padding: 8px 10px !important;
    cursor: pointer;
    color: #fff !important;
  }

  .top-menu__dropdown {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  .nb-toggle-checkbox:checked ~ .top-menu__dropdown {
    display: block !important;
  }
  .top-menu__dropdown-wrapper {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-left: 0 !important;
  }
  .top-menu__dropdown-wrapper:before {
    display: none !important;
  }
  .top-menu__dropdown-item {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .b-menu__sub-nav {
    display: none !important;
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }
  .nb-toggle-checkbox:checked ~ .b-menu__sub-nav {
    display: block !important;
  }

  /* Dropdown/submenu link text: both templates' own themes colored
     these dark (readable on the desktop dropdown's white background),
     which is now the dark drawer panel instead - force light text so
     they don't disappear. */
  .top-menu__dropdown-link,
  .b-sub-menu__link {
    color: #eee !important;
  }
  .top-menu__dropdown-item:hover .top-menu__dropdown-link,
  .b-sub-menu__link:hover {
    color: #ef5b5b !important;
    background: none !important;
  }
}

/* /cloud-cgi/_restored/site-ornament.css */
/* Small sitewide brand touch: a thin Ukrainian-style diamond-pattern
   band (pure CSS gradients, no images) above the footer on every page,
   same motif already used on the blog pages. Loaded globally via
   layout.tsx <head>, like mobile-responsive.css, so it needs no
   per-page HTML changes - just a ::before on whichever element is that
   template's real, visible footer:
     - .footer        the RU/lightred template's real footer (div)
     - .cs-footer     the one-off cs-/newlime template's footer
     - footer.b-footer the UA/b-template's only footer - also present
                       (unstyled, minor) on RU pages as a secondary
                       block below the real .footer, so RU pages may
                       show this twice; low-risk, purely decorative.
*/
.footer::before,
.cs-footer::before,
footer.b-footer::before {
  content: "";
  display: block;
  height: 10px;
  background-image: linear-gradient(45deg, #ef5b5b 25%, transparent 25%),
    linear-gradient(-45deg, #ef5b5b 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #313131 75%),
    linear-gradient(-45deg, transparent 75%, #313131 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

/* Trust badges next to the buy button on product pages - short, real
   claims already stated on delivery_info.json (own production,
   nationwide delivery, flexible payment), not marketing fluff. */
.nb-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #696969;
}
.nb-trust-badges__item {
  white-space: nowrap;
}
.nb-trust-badges__item::before {
  content: "\2713";
  display: inline-block;
  margin-right: 4px;
  color: #ef5b5b;
  font-weight: bold;
}