/* Compmaster responsive layout, 2026-09-25. Shared by the three storefronts. */
:root { --cm-purchase-clearance: 0px; }
.cm-layout-search { width:min(500px,calc(100vw - 32px)); padding:20px; border:0; border-radius:12px; color:#20252d; background:#fff; }
.cm-layout-search::backdrop { background:rgba(0,0,0,.55); }
.cm-layout-search .cm-search-close { display:block; margin-inline-start:auto; width:44px; height:44px; border:0; background:#f0f2f4; color:#20252d; font-size:26px; }
.cm-layout-search label { display:block; margin:8px 0; font-weight:600; }
.cm-layout-search form { display:flex; flex-wrap:wrap; gap:8px; }
.cm-layout-search input { flex:1; min-width:150px; height:44px; padding:8px; border:1px solid #777; border-radius:4px; }
.cm-layout-search button[type=submit] { min-height:44px; padding:8px 18px; border:0; border-radius:4px; background:#0861a8; color:white; }
/* Keep the callback outside the chat launcher's hit area on desktop too. */
@media (min-width:1025px) {
  #vplugin #vplugin-toggler { margin-top:40vh !important; }
  header.header-classic .header { height:auto !important; }
  header.header-classic .top-bar { height:auto !important; min-height:36px; flex-shrink:0; align-items:center; gap:12px !important; }
  header.header-classic .top-bar .top-menu, header.header-classic .top-bar .top-menu > .j-menu { height:auto !important; min-height:36px; }
  header.header-classic .top-bar .top-menu > .j-menu { align-items:center; }
  header.header-classic .top-bar .top-menu > .j-menu > li > a { min-height:36px; padding:6px !important; font-size:12px !important; line-height:1.3 !important; }
  header.header-classic .top-bar .top-menu > .j-menu > li.cm-menu-parent > a { padding-inline-end:28px !important; }
  header.header-classic .top-bar .language-currency button { min-height:36px; font-size:12px !important; }
  body #zcwMiniButton { right:100px !important; left:auto !important; margin:0 !important; transform:none !important; max-width:calc(100vw - 140px); }
}
@media (min-width:768px) {
  html.route-product-product .site-wrapper > h1.page-title { font-size:22px !important; line-height:1.3 !important; padding:12px 24px !important; margin:0 !important; }
  html.route-product-product .page-title .page-title-text { padding:0 !important; }
  html.route-product-product .page-title .page-title-text::after { margin-top:8px !important; }
  html.route-product-product #product-product { margin-top:24px !important; }
  html.route-product-product .product-details { padding:20px !important; }
  html.route-product-product .product-details > * { margin-bottom:16px !important; }
  html.route-product-product .product-stats li { margin-bottom:5px !important; }
  html.route-product-product .product-stats .brand-image img { width:64px !important; height:64px !important; object-fit:contain; }
  html.route-product-product .button-group-page { margin-top:16px !important; }
}
@media (max-width:1024px) {
  html .mobile-header .mobile-top-bar { background:#20252d !important; color:#fff !important; }
  html .mobile-top-bar a, html .mobile-top-bar .links-text, html .mobile-top-bar button { color:#fff !important; }
  html .mobile-top-bar .dropdown-menu, html .mobile-top-bar .dropdown-menu a, html .mobile-top-bar .dropdown-menu .links-text { background:#fff; color:#20252d !important; }
  html .mobile-header .mobile-top-bar { height:auto !important; min-height:0; padding:4px 10px !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(60px,.65fr); align-items:center; gap:0 4px; }
  .mobile-top-bar .mobile-top-menu-wrapper, .mobile-top-menu-wrapper > .top-menu, .mobile-top-menu-wrapper > .top-menu > .j-menu { display:contents !important; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li { padding:0 !important; min-width:0; margin:0 !important; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li > a { min-height:36px; height:auto !important; font-size:12px !important; line-height:1.25 !important; white-space:normal !important; padding-top:5px !important; padding-bottom:5px !important; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li > a .links-text { white-space:normal !important; overflow-wrap:anywhere; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(1) { grid-column:1; grid-row:1; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(2) { grid-column:2; grid-row:1; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(3) { grid-column:1 / 3; grid-row:2; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li.cm-order-status { grid-column:2 / 4; grid-row:2; justify-self:end; }
  .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(3):has(+ .cm-order-status) { grid-column:1; }
  html .mobile-top-bar .language-currency { grid-column:3; grid-row:1; position:relative !important; transform:none !important; justify-self:end; }
  .mobile-top-bar .language-currency button { min-height:36px; padding:4px !important; font-size:12px !important; }
  html .mobile-header .mobile-bar { height:56px !important; padding-inline:12px !important; justify-content:space-between; }
  html .mobile-header .mobile-bar { background:#10151e !important; color:#fff !important; }
  html .mobile-bar .menu-trigger, html .mobile-bar .menu-icon, html .mobile-bar .search-trigger, html .mobile-bar .cart-heading { color:#fff !important; }
  html .mobile-bar .mobile-logo-wrapper, html .mobile-bar .mobile-bar-group, html .mobile-bar .mobile-bar-group > * { height:56px !important; }
  html .mobile-bar .mobile-logo-wrapper { flex:0 1 118px; min-width:0; }
  html .mobile-bar .header-logo, html .mobile-bar .header-logo-alternate { max-height:46px !important; max-width:118px !important; width:auto !important; object-fit:contain; }
  html .mobile-bar a.menu-trigger, html .mobile-bar .search-trigger, html .mobile-bar .cart-heading { min-width:44px; min-height:44px; }
  .module-header_notice > .module-body { gap:6px; padding:4px 8px !important; }
  .module-header_notice .hn-body { min-width:0; flex:1; }
  .module-header_notice .hn-content > div { padding:4px 6px !important; }
  .module-header_notice .hn-content span { font-size:12px !important; line-height:1.35 !important; }
  .module-header_notice .header-notice-close-button { flex:0 0 36px; }
  .module-header_notice .hn-close { width:36px !important; height:36px !important; min-width:36px !important; padding:0 !important; }

  /* Compact controls, with safe-area and the actual purchase panel height. */
  html.cm-responsive-ready body #zcwMiniButton { position:fixed !important; right:12px !important; left:auto !important; top:auto !important; bottom:calc(var(--cm-purchase-clearance) + 68px + env(safe-area-inset-bottom,0px)) !important; width:48px !important; height:48px !important; min-width:0 !important; max-width:48px !important; margin:0 !important; padding:0 !important; transform:none !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  html.cm-responsive-ready body #zcwMiniButton .zsb__text { display:none !important; }
  html.cm-responsive-ready body #zcwMiniButton .zsb__icon { width:48px !important; height:48px !important; margin:0 !important; }
  html.cm-responsive-ready body .woot-widget-bubble { right:12px !important; left:auto !important; bottom:calc(var(--cm-purchase-clearance) + 12px + env(safe-area-inset-bottom,0px)) !important; width:48px !important; height:48px !important; }
  html.cm-responsive-ready body .woot-widget-bubble { display:flex !important; align-items:center !important; justify-content:center !important; }
  html.cm-responsive-ready body .woot-widget-bubble svg { margin:0 !important; width:24px !important; height:24px !important; }
  html.cm-responsive-ready body .woot-widget-bubble.woot--close { bottom:12px !important; }
  html.cm-responsive-ready.mobile-header-active.route-product-product body .woot-widget-bubble:not(.woot--close) { bottom:calc(var(--cm-purchase-clearance) + 12px + env(safe-area-inset-bottom,0px)) !important; }
  html.cm-responsive-ready.mobile-header-active.route-product-product body #zcwMiniButton { bottom:calc(var(--cm-purchase-clearance) + 68px + env(safe-area-inset-bottom,0px)) !important; }
  html.cm-responsive-ready body #cmadv-btn { left:12px !important; right:auto !important; bottom:calc(var(--cm-purchase-clearance) + 12px + env(safe-area-inset-bottom,0px)) !important; width:48px !important; height:48px !important; min-width:48px !important; padding:0 !important; justify-content:center; }
  html.cm-responsive-ready body #cmadv-btn span:last-child { display:none; }
  html.cm-responsive-ready body .scroll-top { left:12px !important; right:auto !important; bottom:calc(var(--cm-purchase-clearance) + 68px + env(safe-area-inset-bottom,0px)) !important; width:44px !important; height:44px !important; }
  html.cm-responsive-ready body #cmrs-fab { left:12px !important; right:auto !important; bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important; min-height:44px; max-width:calc(100vw - 88px); }
  /* Staff Bridge controls stay separate from the storefront cart and advisor. */
  html.cm-responsive-ready body #cm-as-fab { left:68px !important; right:auto !important; bottom:calc(var(--cm-purchase-clearance) + 12px + env(safe-area-inset-bottom,0px)) !important; width:44px !important; height:44px !important; }
  html.cm-responsive-ready body .cmfx-float:not(.cmfx-prod) { left:68px !important; right:auto !important; bottom:calc(var(--cm-purchase-clearance) + 68px + env(safe-area-inset-bottom,0px)) !important; }
  html.cm-responsive-ready body .cmfx-float.cmfx-prod { left:12px !important; right:auto !important; bottom:calc(var(--cm-purchase-clearance) + 116px + env(safe-area-inset-bottom,0px)) !important; }
  /* The accessibility launcher sits in the right button column above the phone button: clear of header links and of the centred price. */
  #vplugin #vplugin-toggler { margin-top:calc(100dvh - var(--cm-purchase-clearance) - 148px - env(safe-area-inset-bottom,0px)) !important; margin-bottom:0 !important; transform:translate(calc(50% - 36px),-50%); }
  html.mobile-overlay body :is(#zcwMiniButton,.woot-widget-bubble,#cmadv-btn,#cm-as-fab,.cmfx-float,.scroll-top),
  html.panel-opened body :is(#zcwMiniButton,.woot-widget-bubble,#cmrs-fab),
  html.cm-layout-dialog body :is(#zcwMiniButton,.woot-widget-bubble:not(.woot--close),#cmadv-btn,#cm-as-fab,.cmfx-float,.scroll-top,#cmrs-fab) { visibility:hidden !important; pointer-events:none !important; }
  html.mobile-overlay #vplugin-toggler, html.panel-opened #vplugin-toggler, html.cm-layout-dialog #vplugin-toggler { visibility:hidden !important; pointer-events:none !important; }
  .zcwPopup .zcwPopup-close { width:44px !important; height:44px !important; top:4px !important; right:4px !important; background-size:15px 15px !important; background-position:center !important; background-repeat:no-repeat !important; }
  footer .links-text { white-space:normal !important; overflow-wrap:anywhere; }
}
@media (max-width:991px) {
  #header.header-builder > .porto-block > .container-fluid { padding-inline:12px !important; }
  #header .custom-header-top .porto-wrap-container { padding-inline:0 !important; width:100% !important; }
  #header .custom-header-top .col-2-5 { width:100% !important; }
  #header .custom-header-top .col-2-5 > .wpb_wrapper { flex-direction:row !important; flex-wrap:wrap !important; justify-content:center !important; gap:0 12px !important; }
  #header .custom-header-top .cm-contact { min-height:36px; margin:0 !important; font-size:12px !important; line-height:1.3; white-space:normal; }
  #header .custom-header-top .cm-status { flex-basis:100%; justify-content:center; }
  #header .header-main .porto-wrap-container { padding-inline:8px !important; }
  #header .cm-search-btn, #header .mobile-toggle { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:8px !important; }
}
@media (max-width:767px) {
  html.route-product-product .site-wrapper > h1.page-title { font-size:19px !important; line-height:1.3 !important; padding:10px 16px !important; margin-top:0 !important; margin-bottom:0 !important; }
  html.route-product-product .page-title .page-title-text { padding:0 !important; }
  html.route-product-product .page-title .page-title-text::after { margin-top:8px !important; }
  html.route-product-product .breadcrumb { margin:0 0 8px !important; min-height:30px; }
  html.route-product-product #product-product { margin-top:12px !important; padding-inline:12px !important; }
  html.route-product-product #content { padding-inline:0 !important; }
  html.route-product-product .product-info { margin-top:0 !important; gap:12px !important; }
  html.route-product-product .product-left, html.route-product-product .product-right { margin:0 !important; padding:0 !important; }
  .product-info .product-left-wrapper, .product-info .product-right-wrapper { position:static !important; }
  .product-info .main-image, .product-info .main-image .swiper-container, .product-info .main-image .swiper-slide { height:200px !important; }
  .product-info .main-image img { width:100% !important; height:200px !important; object-fit:contain !important; }
  /* Gallery arrows sit near the bottom of the 200px image, below stacked product labels. */
  .product-info .main-image .swiper-buttons { top:calc(100% - 22px) !important; }
  .product-info .additional-images { margin-top:6px !important; padding-top:0 !important; }
  .product-info .additional-images img { height:44px !important; width:100% !important; object-fit:contain !important; }
  .product-info .blocks-image { margin-top:8px !important; gap:8px !important; }
  .product-info .blocks-image .module { margin:0 !important; }
  .product-info .blocks-image > .product-blocks-image { margin-top:0 !important; }
  .product-info .blocks-image .block-body { padding:0 !important; }
  .product-info .blocks-image .block-wrapper { padding:0 !important; }
  .product-info .blocks-image .product_extra, .product-info .blocks-image .product-extra-html { margin:0 !important; padding:0 !important; }
  .product-info .block-description { font-size:13px !important; line-height:1.45 !important; }
  .cm-compact-summary > summary { min-height:36px; padding:8px 0; text-align:center; cursor:pointer; font-weight:600; color:#0861a8; }
  .cm-compact-summary > summary:focus-visible { outline:2px solid #0861a8; outline-offset:2px; }
  .product-info .product-details { padding:12px !important; }
  .product-info .product-details > * { margin-bottom:12px !important; }
  .product-info .product-price-group { order:-10 !important; justify-content:center; padding-inline:48px; }
  .product-info .product-price-group .product-price-new, .product-info .product-price-group .product-price { font-size:25px !important; line-height:1.2 !important; }
  .product-info .product-stats { gap:8px; align-items:flex-start; }
  .product-info .product-stats ul { flex:1; min-width:0; }
  .product-info .product-stats li { font-size:13px !important; line-height:1.4 !important; margin-bottom:5px !important; }
  .product-info .product-stats .brand-image { flex:0 0 48px; width:48px !important; }
  .product-info .product-stats .brand-image img { width:48px !important; height:48px !important; object-fit:contain; }
  .product-info .product-stats .brand-image a { padding:0 !important; }
  .product-info .blocks-top, .product-info .blocks-bottom { margin-bottom:12px !important; gap:8px !important; }
  .product-info .cspw { padding:10px !important; margin:0 0 10px !important; font-size:13px; }
  .product-info .cspw h3 { font-size:15px !important; margin:0 0 6px !important; }
  html.route-product-product .button-group-page { margin:0 !important; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important; }
  .product-info .button-group-page .btn, .product-info .button-group-page .stepper { min-height:44px; }
  .product-info .button-group-page .btn-extra { min-width:44px; }
  .product-info .button-group-page .wishlist-compare { margin-top:4px !important; }
  .product-info .button-group-page .wishlist-compare a { min-height:32px; }
  html.route-product-product body { padding-bottom:calc(var(--cm-purchase-clearance) + 12px) !important; }
  html.route-product-product { scroll-padding-bottom:calc(var(--cm-purchase-clearance) + 20px); }
}

/* cm-layout d+e (25.09.2026, Claude-3427761d): phone top bar in one line for every language.
   Outer columns take their content width, labels do not wrap; the phone number column gets the rest. */
@media (max-width:1024px) {
  html.phone .mobile-header .mobile-top-bar { grid-template-columns:auto 1fr auto; }
  html.phone .mobile-top-menu-wrapper > .top-menu > .j-menu > li > a .links-text { white-space:nowrap !important; overflow-wrap:normal !important; }
  /* e: the phone number never shrinks (it was cut to '073-2241…' at 320-366px); the account label gives way first */
  html.phone .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(2) { min-width:max-content; }
  /* e: language dropdown opens towards the screen, not past its edge (comp-parts had it inverted: he off the left, ru/en off the right) */
  .mobile-top-bar .language-currency .dropdown-menu { inset-inline-start:auto !important; inset-inline-end:0 !important; max-width:calc(100vw - 20px); }
}
@media (max-width:374px) {
  html.phone .mobile-top-menu-wrapper > .top-menu > .j-menu > li > a .links-text { font-size:13px !important; }
  html.phone .mobile-top-bar .language-currency button { padding:4px 2px !important; }
}
@media (max-width:340px) {
  /* e: ru/en «Мой Аккаунт»/«My Account» do not fit next to the full phone number at 320-340px: icon + arrow only,
     the text stays for screen readers (Hebrew «חשבון שלי» fits and stays) */
  html.phone:is([lang^="ru"], [lang^="en"]) .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(1) > a .links-text {
    position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
}
/* cm-layout f (25.09.2026, Claude-3427761d) */
@media (max-width:1024px) {
  /* f: phone/tablet menu - long titles wrap instead of '…' (ru/en «Computer Service Center», «Компьютерный Магазин»
     next to the domain badge, «Комплектующие для Брендовых…»); the badge itself stays on one line */
  .mobile-main-menu-container .j-menu > li > a .links-text { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word; }
  .mobile-main-menu-container .j-menu > li > a .menu-label { white-space:nowrap !important; flex:0 0 auto; }
  /* f: account dropdown of the top bar never wider than the screen (was fixed 300px -> off-screen below ~310px) */
  .mobile-top-bar .top-menu > .j-menu > li > .dropdown-menu { max-width:calc(100vw - 20px) !important; }
}
@media (max-width:300px) {
  /* f: very narrow screens (Galaxy Fold cover 280px): account = icon + arrow in every language */
  html.phone .mobile-top-menu-wrapper > .top-menu > .j-menu > li:nth-child(1) > a .links-text {
    position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
}
/* cm-layout g (25.09.2026, Claude-3427761d): phones - anchor jumps, floating buttons vs the first screen of a product,
   gallery arrows and dots. Floating buttons stay where f put them: two 48px columns 12px from the screen edges
   (right: Vee / phone / chat, left: advisor / scroll-top); the content that must stay readable keeps out of them. */
@media (max-width:1024px) {
  /* g-F: in-page jumps (#tab-specification, Vee "skip to content" -> #content) stop 8px below the sticky 56px bar
     instead of under it. Top edge only - f's scroll-padding-bottom for the purchase panel stays as is. */
  html.mobile-header-active.mobile-sticky-default { scroll-padding-top:64px; }
}
@media (max-width:767px) {
  /* g-H: photo labels (ru/en draw them on the right) end 64px before the right screen edge = clear of the right column */
  html.cm-responsive-ready .product-info .main-image .product-labels { padding-right:52px !important; }
  /* g-H: availability and the other stat lines start 40px in on their text side (he: right column, ru/en: advisor);
     the brand logo on the other side stays where it is */
  html.cm-responsive-ready .product-info .product-stats > ul { padding-inline-start:40px !important; }
  /* g-H: short notices under the photo ("* the image is for illustration only", comp-parts "check compatibility")
     are centred between the columns */
  html.cm-responsive-ready .product-info .blocks-image :is(.block-html, .product-extra-html) { text-align:center !important; padding-inline:44px !important; }
  /* g-I: gallery arrows (f: bottom corners of the photo = right under both columns) 64px from the screen edges */
  .product-info .main-image .swiper-buttons { width:min(calc(100% - 20px), calc(100vw - 128px)) !important; }
  /* g-J: gallery dots. Journal3 anchors them at right/left:50% (box = half the photo, 24px per dot -> 8+ dots wrap into a
     second row) and 20px below the photo, while f leaves only 8px before the next block -> dots sat on its text/border.
     Now: one centred row across the photo in its own 22px band. */
  .product-info .main-image .swiper-pagination { left:0 !important; right:0 !important; width:auto !important; transform:none !important;
    top:calc(100% + 8px) !important; bottom:auto !important; flex-wrap:nowrap !important; justify-content:center !important; gap:8px; }
  .product-info .main-image .swiper-pagination > span + span { margin:0 !important; }
  .product-info .product-image:has(.main-image .swiper-pagination-bullet + .swiper-pagination-bullet) ~ .blocks-image { margin-top:22px !important; }
}
/* cm-topbar (g): desktop top bar (menus 336/337 + language) - full labels next to count badges; one row at 1025-1365px */
@media (min-width:1025px) {
  header.header-classic .top-bar .top-menu > .j-menu > li > a > .links-text { flex:0 0 auto !important; }
  header.header-classic .top-bar .top-menu > .j-menu > li > a > .count-badge { margin-inline-start:6px !important; }
}
@media (min-width:1025px) and (max-width:1365px) {
  header.header-classic .top-bar { gap:8px !important; }
  header.header-classic .top-bar .top-menu > .j-menu > li { padding-left:2px !important; padding-right:2px !important; }
  header.header-classic .top-bar .top-menu > .j-menu > li > a { padding-left:4px !important; padding-right:4px !important; }
  header.header-classic .top-bar .top-menu > .j-menu > li > a > .links-text { font-size:14px !important; }
}
/* cm-mainmenu-ru (g): compshop /ru/ desktop main menu (module 3). Icons appear from 1421px (custom.css cm-menufit hides them
   up to 1420px) and the ru labels then need 1214px: at 1421-1454px 'Запрос сборки' dropped to a 2nd row (menu 74 -> 144px).
   In that band only the empty part of the 210px 'Категории' button is trimmed (text 81px); he/en and comp-parts (no icons) unchanged. */
@media (min-width:1421px) and (max-width:1459px) {
  html[lang="ru"].desktop-header-active .header .main-menu > .j-menu:has(> li.has-image) > li:first-child > a { min-width:170px !important; }
}