/* matrix7km header refresh (2026-09-23). Loaded from common/header.twig after the theme CSS.
   Layout only: markup and JS of the oct_deals header are untouched, except the rate chip and hours line. */
:root { --m7-tint:#F8FBFD; --m7-line:#E3EDF3; --m7-navy:#003459; --m7-muted:#5F7A8A; --m7-blue:#00A8E8; --m7-blue-d:#0092CC; --m7-blue-soft:#E6F6FD; }

.ds-footer-logo { width:150px; height:auto; }

/* ---------- top strip ---------- */
.top-information-list { display:flex !important; align-items:center; gap:26px; height:38px; margin:0; padding:0 !important; }
.top-information-list > li { padding:0 !important; }
.top-information-list .blue-link { font-size:13px !important; color:var(--m7-navy) !important; text-decoration:none !important; }
.top-information-list .blue-link:hover { color:var(--m7-blue) !important; }
.top-information-list:last-child { gap:10px; }
.top-information-list .ds-switcher { padding:2px !important; gap:0; background:#fff; border:1px solid var(--m7-line); border-radius:8px; }
.top-information-list .ds-switcher button { text-decoration:none !important; width:auto !important; height:auto !important; min-width:30px; padding:3px 9px !important; margin:0 !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:var(--m7-muted) !important; font-size:12px !important; font-weight:500; text-transform:uppercase; line-height:1.4; }
.top-information-list .ds-switcher button.active { background:var(--m7-blue-soft) !important; color:var(--m7-blue-d) !important; }
#additional-currency > .dark-text { font-size:12px !important; color:var(--m7-navy) !important; }

/* ---------- desktop ---------- */
@media (min-width:1024px) {
  .ds-header { padding-top:0 !important; background:linear-gradient(var(--m7-tint) 0 38px, var(--m7-line) 38px 39px, #fff 39px) !important; }
}
@media (min-width:1200px) {
  .ds-header { padding-bottom:0 !important; box-shadow:0 1px 0 var(--m7-line); }
  .ds-header > .container-xl + .container-xl > .d-flex { height:84px; margin-bottom:0 !important; }
  #additional-currency > .dark-text { display:none !important; } /* shown as the chip in the main row */

  .ds-header-left { align-self:stretch; }
  #logo { max-width:none; width:120px; height:auto; }

  .ds-header-catalog-button { height:46px; padding:0 20px !important; margin-left:20px !important; border-radius:12px !important; border-color:var(--m7-blue) !important; background:var(--m7-blue) !important; color:#fff !important; gap:10px; }
  .ds-header-catalog-button .button-text { font-size:15px !important; font-weight:500; color:#fff !important; }
  .ds-header-catalog-button svg path { fill:#fff !important; }
  .ds-header-catalog-button:hover { background:var(--m7-blue-d) !important; border-color:var(--m7-blue-d) !important; }

  .ds-menu-catalog.ds-menu-main-catalog { width:280px; top:calc(100% + 8px); }
  .ds-menu-catalog.ds-menu-main-catalog.with-slideshow { top:calc(100% + 1rem); }
  .ds-slideshow.menu-active { padding-left:calc(280px + 1.5rem); }

  .ds-header-right { gap:4px; padding-right:0 !important; }
  .ds-header-right > * { margin-left:0 !important; margin-right:0 !important; }
  #search { order:1; flex:1; padding-left:20px !important; margin-right:16px !important; }
  #searchInput { height:46px; padding:0 52px 0 16px !important; border:1.5px solid var(--m7-line) !important; border-radius:12px !important; background:var(--m7-tint) !important; font-size:14px !important; }
  #searchInput:focus { border-color:var(--m7-blue) !important; background:#fff !important; }
  #ds-search-button { width:36px !important; height:36px !important; top:5px !important; right:5px !important; transform:none !important; border-radius:9px !important; background:var(--m7-blue) !important; display:flex; align-items:center; justify-content:center; }
  #ds-search-button svg path { fill:#fff !important; }

  .m7-rate { order:2; display:grid !important; gap:1px; padding:6px 12px; margin-right:16px !important; border-radius:10px; background:var(--m7-blue-soft); line-height:1.15; white-space:nowrap; }
  .m7-rate small { font-size:11px; color:var(--m7-muted); }
  .m7-rate b { font-size:15px; font-weight:700; color:var(--m7-navy); font-variant-numeric:tabular-nums; }

  .ds-header-phone-button { order:3; margin-right:16px !important; }
  .ds-header-phone-button > .ds-dropdown-toggle { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:6px; row-gap:3px; line-height:1.1; }
  .ds-header-phone-button > .ds-dropdown-toggle > svg:first-child { display:none; }
  .ds-header-phone-button > .ds-dropdown-toggle > span { font-size:17px !important; font-weight:700; white-space:nowrap; text-decoration:none !important; font-variant-numeric:tabular-nums; }
  .ds-header-phone-button .m7-hours { display:block !important; grid-column:1 / -1; font-size:12px; color:var(--m7-muted); }

  .ds-header-user-button { order:4; display:flex !important; height:auto !important; }
  .ds-header-viewed-button { order:5; }
  .ds-header-compare-button { order:6; }
  .ds-header-wishlist-button { order:7; }
  #cart { order:8; }

  .ds-header-user-button > .ds-dropdown-toggle,
  .ds-header-viewed-button, .ds-header-compare-button, .ds-header-wishlist-button, #cart {
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    min-width:62px; height:auto !important; padding:6px 4px !important; border-radius:10px; color:var(--m7-navy); font-size:11.5px; font-weight:400 !important; line-height:1;
  }
  .ds-header-user-button > .ds-dropdown-toggle:hover, .ds-header-viewed-button:hover, .ds-header-compare-button:hover, .ds-header-wishlist-button:hover, #cart:hover { background:var(--m7-tint); }
  .ds-header-user-button > .ds-dropdown-toggle { margin:0 !important; cursor:pointer; }
  .ds-header-user-button > .ds-dropdown-toggle > span, .ds-header-user-button > .ds-dropdown-toggle > svg:last-child { display:none; }
  .ds-header-user-button > .ds-dropdown-toggle svg, .ds-header-compare-button svg, .ds-header-wishlist-button svg, #cart svg { width:22px; height:22px; margin:0 !important; }
  .ds-header-user-button > .ds-dropdown-toggle::after { content:"Кабинет"; }
  .ds-header-compare-button::after { content:"Сравнение"; }
  .ds-header-wishlist-button::after { content:"Избранное"; }
  #cart::after { content:"Корзина"; }
  html[lang^="uk"] .ds-header-user-button > .ds-dropdown-toggle::after { content:"Кабінет"; }
  html[lang^="uk"] .ds-header-compare-button::after { content:"Порівняння"; }
  html[lang^="uk"] .ds-header-wishlist-button::after { content:"Обране"; }
  html[lang^="uk"] #cart::after { content:"Кошик"; }
  .ds-header-right .badge { top:0 !important; right:12px !important; left:auto !important; min-width:18px; height:18px; padding:0 5px !important; border:2px solid #fff; background:var(--m7-blue) !important; color:#fff !important; font-size:10px !important; line-height:14px !important; }
}
@media (min-width:1200px) and (max-width:1399.98px) {
  .ds-header-catalog-button { padding:0 14px !important; margin-left:14px !important; }
  #search { padding-left:14px !important; margin-right:10px !important; }
  .m7-rate, .ds-header-phone-button { margin-right:10px !important; }
  .ds-header-phone-button > .ds-dropdown-toggle > span { font-size:15px !important; }
  .ds-header-user-button > .ds-dropdown-toggle, .ds-header-viewed-button, .ds-header-compare-button, .ds-header-wishlist-button, #cart { min-width:54px; }
}

/* ---------- mobile / tablet ---------- */
@media (max-width:1023.98px) {
  .ds-header { padding-top:0 !important; background:linear-gradient(var(--m7-tint) 0 34px, var(--m7-line) 34px 35px, #fff 35px) !important; }
  .ds-header > .container-xl:first-child { justify-content:flex-end !important; margin-bottom:8px; }
  .top-information-list:first-child { display:none !important; }
  .top-information-list { height:34px; }
  .top-information-list:last-child { gap:8px; }
}
@media (max-width:767.98px) {
  .ds-header-user-button > .ds-dropdown-toggle > span, .ds-header-user-button > .ds-dropdown-toggle > svg:last-child { display:none; }
}
@media (max-width:1199.98px) {
  #logo { max-width:none; width:84px; height:auto; }
  .m7-rate { display:none !important; }
}

/* ---------- language / currency switch: instant feedback, no "reload" feel ---------- */
@view-transition { navigation: auto; }
.ds-header { view-transition-name: m7-header; }
::view-transition-group(root) { animation-duration: .25s; }
@keyframes m7-load { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html.m7-switching .ds-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--m7-blue), transparent); animation: m7-load 1s linear infinite; pointer-events: none; }
html.m7-switching body > *:not(.ds-header) { opacity: .55; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  html.m7-switching .ds-header::after { animation: none; background: var(--m7-blue); }
  ::view-transition-group(root) { animation-duration: 0s; }
}