/* SkloFar light theme — hand-written part (loaded after generated stylesheet/light/*.css). */

/* ---------- theme switch (both themes) ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 40px;
  background: #262626;
  flex: 0 0 auto;
}
.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: #98989A;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.theme-switch__btn svg { width: 16px; height: 16px; display: block; }
.theme-switch__btn.is-active { background: #141414; color: #FFD11A; box-shadow: 0 6px 6px rgba(0, 0, 0, .25); }
.theme-switch__btn:focus-visible { outline: 2px solid #FFD11A; outline-offset: 1px; }
.header-theme { display: flex; align-items: center; margin-left: 24px; position: relative; z-index: 2; }
.theme-row { display: none; }
@media (max-width: 999px) {
  .header-theme { display: none; }
  .theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    margin: 12px 0 4px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #B3B3B3;
  }
  .theme-row__value { color: #FCFCFD; }
}

html[data-theme="light"] .theme-switch { background: #E4E4E7; }
html[data-theme="light"] .theme-switch__btn { color: #666666; }
html[data-theme="light"] .theme-switch__btn.is-active { background: #262626; color: #FFD11A; }
html[data-theme="light"] .theme-row { color: #333333; }
html[data-theme="light"] .theme-row__value { color: #141414; }

/* ---------- light theme ---------- */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* logo: dark lettering (JS swaps src too, for browsers without content:url on img) */
html[data-theme="light"] .header-logo img,
html[data-theme="light"] .drawer-logo-down img {
  content: url("../image/sklofar_logo_cut_light.png");
}

/* white monochrome icons/logos detected by theme.js */
html[data-theme="light"] img.sf-mono-light { filter: invert(1) brightness(.35); }

/* dark buttons stay dark in the light design */
html[data-theme="light"] .btn.btn-dark,
html[data-theme="light"] .btn-download {
  background: #262626;
  border-color: #262626;
  color: #FCFCFD;
}
html[data-theme="light"] .btn.btn-dark:hover,
html[data-theme="light"] .btn-download:hover {
  background: #333333;
  border-color: #333333;
  color: #FCFCFD;
}

/* "Наша команда": white rays over light grey */
html[data-theme="light"] .team-block {
  background-color: #E4E4E7;
  background-blend-mode: screen;
  border-color: #E4E4E7;
}
html[data-theme="light"] .avatars-list { background-color: #CCCCCC; border-color: #B3B3B3; }
html[data-theme="light"] .avatars-list img { border-color: #FCFCFD; }

/* inline SVG icons painted white in markup (footer and dark buttons excluded) */
html[data-theme="light"] svg[fill="#F1F1F3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#F1F1F3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#FCFCFD" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#FCFCFD" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#F6F7F9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#F6F7F9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *) { fill: #141414; }
html[data-theme="light"] svg [stroke="#F1F1F3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#FCFCFD" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#F6F7F9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *) { stroke: #141414; }

/* header: light bar with hairline, no heavy dark shadow */
html[data-theme="light"] .top-header {
  background: #F7F7F8;
  box-shadow: none;
  border-bottom: 1px solid #E4E4E7;
}

/* white text set inline in content (CMS/modules) */
html[data-theme="light"] [style^="color:#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:#fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:#f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:#fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color:#f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style^="color: #f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color:#f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=";color: #f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color:#f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*="; color: #f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #fff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #ffffff" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: white" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #fcfcfd" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #f1f1f3" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #fffefa" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color:#f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download),
html[data-theme="light"] [style*=" color: #f6f7f9" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *, .btn-dark, .btn-download) { color: #262626 !important; }

/* drawer: white sheet, cards #F1F1F3 on it (Figma 1.2 Menu) */
html[data-theme="light"] .drawer-menu { background: #FCFCFD; color: #141414; }

/* product page purchase block (Figma 4.2 / 4.6 light): dark qty buttons, dark payment badges, dark pre-order */
html[data-theme="light"] .payment-method-item { background: #262626 !important; border-color: #262626 !important; }
html[data-theme="light"] .qty-control .qty-btn { background: #262626 !important; border-color: #262626 !important; color: #FCFCFD !important; }
html[data-theme="light"] .qty-control .qty-btn:hover { background: #333333 !important; border-color: #333333 !important; }
html[data-theme="light"] .qty-control .qty-input { background: #FCFCFD !important; border-color: #262626 !important; color: #141414 !important; }
html[data-theme="light"] .actions__submit .btn-preorder { background: #262626 !important; border-color: #262626 !important; color: #FFD11A !important; }
html[data-theme="light"] .actions__submit .btn-preorder:hover { background: #333333 !important; border-color: #333333 !important; }

/* active chips/tabs = dark pill with light text (Figma 3.x, 13.1 light) */
html[data-theme="light"] .cat-ui__tab.is-active,
html[data-theme="light"] .blog-categories__category.active {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FCFCFD;
}
html[data-theme="light"] .blog-categories__category.active *,
html[data-theme="light"] a.category__link:has(.blog-categories__category.active) { color: #FCFCFD; }
html[data-theme="light"] .cat-ui__tab:not(.is-active),
html[data-theme="light"] .blog-categories__category:not(.active) { background: #F7F7F8; }

/* yellow text set inline in content is unreadable on white: dark + semibold, as in Figma 13.1 */
html[data-theme="light"] [style*="color:#FFD11A" i]:not(.site-footer *, footer *),
html[data-theme="light"] [style*="color: #FFD11A" i]:not(.site-footer *, footer *) { color: #141414 !important; font-weight: 600; }

/* sidebar: yellow text is unreadable on white — active item = dark semibold text on Yellow 90 (#FFF5CC), chevrons stay yellow */
html[data-theme="light"] .oc-accordion .menu-link:hover,
html[data-theme="light"] .oc-accordion .menu-link.active,
html[data-theme="light"] .oc-accordion .menu-link.active .menu-title,
html[data-theme="light"] .module.category-brands .brand-item.active .brand-title,
html[data-theme="light"] .cb-brand.active > .cb-brand__head .cb-brand__name,
html[data-theme="light"] .cb-model.active > .cb-model__head .cb-model__name,
html[data-theme="light"] .cb-model__head.cb-model--leaf.active .cb-model__name,
html[data-theme="light"] .cb-gen.active,
html[data-theme="light"] .cb-gen.active:link,
html[data-theme="light"] .cb-gen.active:visited { color: #141414; }
html[data-theme="light"] .cb-brand.active > .cb-brand__head,
html[data-theme="light"] .cb-model.active > .cb-model__head,
html[data-theme="light"] .cb-model__head.cb-model--leaf.active,
html[data-theme="light"] .cb-gen.active { background: #FFF5CC; }
/* 06.11.2026: active sidebar item on Default Button Yellow (#FFD11A, Figma Buttons Light), arrows dark so they stay visible */
html[data-theme="light"] .cb-brand.active > .cb-brand__head,
html[data-theme="light"] .cb-model.active > .cb-model__head,
html[data-theme="light"] .cb-model__head.cb-model--leaf.active,
html[data-theme="light"] .cb-gen.active { background: #FFD11A; }
html[data-theme="light"] .cb-brand.active > .cb-brand__head svg [stroke]:not([stroke="none"]),
html[data-theme="light"] .cb-model.active > .cb-model__head svg [stroke]:not([stroke="none"]) { stroke: #141414 !important; }
html[data-theme="light"] .cb-brand.active > .cb-brand__head svg [fill]:not([fill="none"]),
html[data-theme="light"] .cb-model.active > .cb-model__head svg [fill]:not([fill="none"]) { fill: #141414 !important; }
html[data-theme="light"] .blog-categories__category.active span,
html[data-theme="light"] .blog-categories__category.active span:last-child { color: #FCFCFD !important; }

/* inline SVG icons with near-white yellow tints (drawer contacts etc.) */
html[data-theme="light"] svg[fill="#FFF5CC" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#FFF5CC" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#FFFAE5" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#FFFAE5" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#FFFEFA" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#FFFEFA" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#F7F7F8" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#F7F7F8" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg[fill="#E4E4E7" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [fill="#E4E4E7" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *) { fill: #141414; }
html[data-theme="light"] svg [stroke="#FFF5CC" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#FFFAE5" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#FFFEFA" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#F7F7F8" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *),
html[data-theme="light"] svg [stroke="#E4E4E7" i]:not(.site-footer *, footer *, .btn-dark *, .btn-download *) { stroke: #141414; }

/* layout (both themes): home content kept inside the 1296 grid, side gutters on 1201–1328 */
#content { min-width: 0; }
.hero__categories--desktop .cat { flex: 1 1 0; min-width: 0; }
@media (min-width: 769px) { .cat-ui__products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1201px) and (max-width: 1328px) { .flex-container { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 1000px) {
  .info-block__section > *, .info-block__section .section__main > * { min-width: 0; max-width: 100%; }
  .desc__articles { overflow-x: auto; scrollbar-width: none; }
  .desc__article { flex-shrink: 0; }
}

/* 06.11.2026 (Руслан): посилання в текстах у світлій темі — колір тексту з підкресленням, жовте не читається */
html[data-theme="light"] :is(p, li, td, dd) a:not([class*="btn"]):not(:is(header, footer, nav, .drawer, .oc-accordion, .breadcrumbs, .breadcrumb, .menu, .site-footer) *) { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-theme="light"] :is(p, li, td, dd) a:not([class*="btn"]):not(:is(header, footer, nav, .drawer, .oc-accordion, .breadcrumbs, .breadcrumb, .menu, .site-footer) *):hover { opacity: .7; }