/* Shared tablet header. Extracted from the approved 768 px homepage implementation. */
@media (min-width: 576px) and (max-width: 1024px) {
  :root {
    --v2-tablet-gutter: clamp(12px, 2.6042vw, 20px);
    --v2-tablet-content: calc(100vw - 40px);
  }

  html,
  body {
    overflow-x: hidden;
  }

  header > .container,
  .menu-row > .container {
    width: 100vw;
    max-width: none;
    padding-left: var(--v2-tablet-gutter);
    padding-right: var(--v2-tablet-gutter);
  }
  /* Header: exact 48/120/40 px rows from the 768 px source. */
  #top {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: #353e48 !important;
    box-shadow: none !important;
  }

  #top > .container {
    width: 100vw !important;
    height: 48px !important;
    padding: 0 var(--v2-tablet-gutter) !important;
  }

  #top .row,
  #top-links {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  #top > .container > .us-mobile-top-btn,
  #top > .container > #us_menu_mobile_button,
  #top > .container > #dropdown_menu_info,
  #top > .container > #us_cart_mobile {
    display: none !important;
  }

  #top #top-links {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  #top .v2-top-contacts {
    display: flex !important;
    height: 48px !important;
    margin: 0 !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #top .v2-top-contacts a,
  #top .v2-top-phone {
    color: #fff !important;
  }

  #top .v2-top-phone {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #top .v2-top-messenger {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #top .btn-group,
  #top #language,
  #top #currency,
  #top #us-account-dropdown {
    display: none !important;
  }

  header {
    height: 120px !important;
    min-height: 120px !important;
    padding: 0 !important;
  }

  header > .container,
  header > .container > .row {
    height: 120px !important;
    min-height: 120px !important;
  }

  header > .container > .row {
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  header #logo {
    display: flex !important;
    flex: 0 0 clamp(76px, 14.3229vw, 110px) !important;
    max-width: clamp(76px, 14.3229vw, 110px) !important;
    height: 120px !important;
    padding: 12px 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  header .us-logo-img {
    width: clamp(62px, 11.7188vw, 90px) !important;
    max-width: clamp(62px, 11.7188vw, 90px) !important;
    max-height: clamp(76px, 12.5vw, 96px) !important;
    object-fit: contain !important;
  }

  header .us-search-box,
  header .us-search-box_hidden {
    display: block !important;
    flex: 1 1 296px !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 296px !important;
    margin: 0 clamp(8px, 2.3438vw, 18px) 0 0 !important;
    padding: 0 !important;
  }

  header .header-input-group {
    height: 40px !important;
    border: 1px solid #71be00 !important;
    background: #fff !important;
  }

  header .header-input-group input,
  header .header-input-group button {
    height: 38px !important;
  }

  header > .container > .row > .us-phone-box,
  header > .container > .row > .wight991 {
    display: none !important;
  }

  header .v2-header-actions {
    display: flex !important;
    flex: 1 1 236px !important;
    min-width: 135px !important;
    max-width: none !important;
    height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  header .v2-header-action {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 74px !important;
    padding: 0 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #7f8993 !important;
    font-size: clamp(9px, 1.4323vw, 11px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  header .v2-header-action-icon,
  header .v2-header-action i {
    display: block !important;
    width: clamp(22px, 3.6458vw, 28px) !important;
    height: clamp(22px, 3.6458vw, 28px) !important;
    flex: 0 0 clamp(22px, 3.6458vw, 28px) !important;
    object-fit: contain !important;
  }

  header #cart {
    display: flex !important;
    flex: 0 0 clamp(55px, 8.8542vw, 68px) !important;
    max-width: clamp(55px, 8.8542vw, 68px) !important;
    height: 120px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header #cart .us-cart-img,
  header #cart .us-cart-img img {
    display: block !important;
    width: 29px !important;
    height: 29px !important;
  }

  header #cart .us-cart-img {
    position: relative !important;
    margin: 0 0 7px !important;
  }

  header #cart .us-cart-img img {
    content: url('/image/catalog/figma-home/header-cart.svg') !important;
  }

  header #cart .header-cart-index {
    top: -7px !important;
    right: -8px !important;
    left: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
    border-radius: 9px !important;
    background: #71be00 !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 16px !important;
  }

  header #cart .us-cart-content > span {
    display: block !important;
    color: #7f8993 !important;
    font-size: 11px !important;
    line-height: 13px !important;
    white-space: nowrap !important;
  }

  header #cart .us-cart-text,
  header #cart .us-cart-link {
    display: none !important;
  }

  .menu-row {
    display: block !important;
    height: 40px !important;
    min-height: 40px !important;
    background: #353e48 !important;
  }

  .menu-row > .container,
  .menu-row > .container > .row {
    height: 40px !important;
    min-height: 40px !important;
  }

  .menu-row > .container > .row {
    margin: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .menu-row #oct-menu-box {
    display: block !important;
    flex: 0 0 210px !important;
    max-width: 210px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  .menu-row #oct-ultra-menu,
  .menu-row .oct-ultra-menu {
    height: 40px !important;
    min-height: 40px !important;
    background: #71be00 !important;
    font-size: 13px !important;
  }

  .menu-row #oct-ultra-menu i,
  .menu-row .oct-ultra-menu i {
    top: 12px !important;
    left: 14px !important;
    font-size: 17px !important;
  }

  .menu-row #oct-menu-dropdown-menu {
    top: 40px !important;
  }

  .menu-row #oct-megamenu-box,
  .menu-row #oct-megamenu {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    height: 40px !important;
    overflow: hidden !important;
  }

  .menu-row .oct-mm-link,
  .menu-row .oct-mm-simple-link,
  .menu-row .oct-mm-link > a,
  .menu-row .oct-mm-simple-link > a {
    height: 40px !important;
  }

  .menu-row .oct-mm-link > a,
  .menu-row .oct-mm-simple-link > a {
    padding: 0 7px !important;
    font-size: 11px !important;
    line-height: 42px !important;
    white-space: nowrap !important;
  }

}

/* The 360 sticky component belongs exclusively to the mobile regime.  Without
   this guard it falls back into normal document flow at 576–1024 and renders
   its inline SVG icons below the tablet footer. */
@media (min-width: 576px) and (max-width: 1024px) {
  .v2-mobile-sticky-header {
    display: none !important;
  }
}

/* One fluid tablet sticky composition for the full 576–1024 regime. */
@media (min-width: 576px) and (max-width: 1024px) {
  .menu-row.v2-sticky-active > .container,
  .menu-row.v2-sticky-active > .container > .row {
    width: min(100%, 768px) !important;
    max-width: 768px !important;
  }

  .menu-row.v2-sticky-active > .container > .row::before {
    left: 2.6042% !important;
    width: clamp(64px, 11.7188vw, 90px) !important;
  }

  .menu-row.v2-sticky-active #oct-menu-box {
    left: clamp(92px, 16.9271vw, 130px) !important;
  }

  .menu-row.v2-sticky-active #oct-menu-dropdown-menu {
    left: clamp(-130px, -16.9271vw, -92px) !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed {
    left: 24.7396% !important;
    width: 75.2604% !important;
    max-width: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-search-box {
    width: 54.6713% !important;
    max-width: none !important;
  }

  .menu-row.v2-sticky-active #search2,
  .menu-row.v2-sticky-active #us_livesearch2 {
    width: 100% !important;
  }

  .menu-row.v2-sticky-active #search2 input {
    width: calc(100% - 40px) !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix { left: 58.3045% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email { left: 72.3183% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix { left: 79.2388% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart { left: 89.1003% !important; }
}

/* Narrow tablet retains the 768 information architecture within 576 px. */
@media (min-width: 576px) and (max-width:575px) {
  header #logo {
    flex: 0 0 76px !important;
    max-width: 76px !important;
  }

  header .us-logo-img {
    width: 62px !important;
    max-width: 62px !important;
    max-height: 76px !important;
  }

  header .us-search-box,
  header .us-search-box_hidden {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 8px !important;
  }

  header .v2-header-actions {
    flex: 0 0 135px !important;
  }

  header .v2-header-action {
    min-width: 45px !important;
    height: 64px !important;
    padding: 0 2px !important;
    gap: 4px !important;
    font-size: 9px !important;
  }

  header .v2-header-action-icon,
  header .v2-header-action i {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  header #cart {
    flex: 0 0 55px !important;
    max-width: 55px !important;
  }

  .menu-row #oct-menu-box,
  .menu-row #oct-ultra-menu-header {
    flex-basis: 62px !important;
    width: 62px !important;
    max-width: 62px !important;
  }

  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(1) { width: 108px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(2) { width: 58px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(3) { width: 62px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(4) { width: 72px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(5) { width: 60px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more { width: 70px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li > a {
    padding: 0 4px !important;
    font-size: 10px !important;
  }
}

/* Must follow the full tablet sheet so the narrow values win its cascade. */
@media (min-width:576px) and (max-width:575px){
  header #logo{flex:0 0 76px!important;max-width:76px!important}
  header .us-logo-img{width:62px!important;max-width:62px!important;max-height:76px!important}
  header .us-search-box,header .us-search-box_hidden{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;margin-right:8px!important}
  header .v2-header-actions{flex:0 0 135px!important}
  header .v2-header-action{min-width:45px!important;height:64px!important;padding:0 2px!important;gap:4px!important;font-size:9px!important}
  header .v2-header-action-icon,header .v2-header-action i{width:22px!important;height:22px!important;flex-basis:22px!important}
  header #cart{flex:0 0 55px!important;max-width:55px!important}
  .menu-row #oct-menu-box,.menu-row #oct-ultra-menu-header{flex-basis:62px!important;width:62px!important;max-width:62px!important}
  .menu-row #oct-megamenu>ul.v2-tablet-ready>li:nth-child(1){width:108px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li:nth-child(2){width:58px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li:nth-child(3){width:62px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li:nth-child(4){width:72px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li:nth-child(5){width:60px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li.v2-tablet-more{width:70px!important}.menu-row #oct-megamenu>ul.v2-tablet-ready>li>a{padding:0 4px!important;font-size:10px!important}
}
/* The narrow tablet keeps the same left-to-right order as the 768 header. */
@media (min-width:576px) and (max-width:575px){
  header .us-search-box, header .us-search-box_hidden { order:0!important; }
  header .v2-header-actions { flex:0 0 162px!important; }
}

/* Figma tablet sticky header: 768 x 112 (+ shadow). Ordinary tablet header remains unchanged. */
@media (min-width: 576px) and (max-width: 1024px) {
  .menu-row.v2-sticky-active {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(41, 53, 63, .16) !important;
  }

  .menu-row.v2-sticky-active > .container,
  .menu-row.v2-sticky-active > .container > .row {
    position: relative !important;
    display: block !important;
    width: 768px !important;
    max-width: 768px !important;
    height: 112px !important;
    min-height: 112px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .menu-row.v2-sticky-active > .container > .row::before {
    position: absolute !important;
    top: 8px !important;
    left: 20px !important;
    z-index: 2 !important;
    width: 90px !important;
    height: 96px !important;
    background: url('/image/catalog/logo_1.png') center / contain no-repeat !important;
    content: '' !important;
    pointer-events: none !important;
  }

  .menu-row.v2-sticky-active #oct-menu-box {
    position: absolute !important;
    top: 36px !important;
    left: 130px !important;
    z-index: 5 !important;
    display: block !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header,
  .menu-row.v2-sticky-active #oct-ultra-menu {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #71be00 !important;
    color: #fff !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header:hover,
  .menu-row.v2-sticky-active #oct-ultra-menu:hover {
    background: #8bd400 !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header > span,
  .menu-row.v2-sticky-active #oct-ultra-menu-header > span.v2-compact-catalog,
  .menu-row.v2-sticky-active #oct-ultra-menu > span {
    position: relative !important;
    display: block !important;
    width: 18px !important;
    height: 14px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header > span::before,
  .menu-row.v2-sticky-active #oct-ultra-menu > span::before {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: linear-gradient(to bottom, #fff 0 2px, transparent 2px 6px, #fff 6px 8px, transparent 8px 12px, #fff 12px 14px) !important;
    content: '' !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header > span::after,
  .menu-row.v2-sticky-active #oct-ultra-menu > span::after {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: #fff !important;
    content: '' !important;
    opacity: 0 !important;
    transform: rotate(-45deg) !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .menu-row.v2-sticky-active #oct-menu-box.v2-tablet-open #oct-ultra-menu-header > span::before,
  .menu-row.v2-sticky-active #oct-menu-box.v2-tablet-open #oct-ultra-menu > span::before {
    inset: auto !important;
    top: 6px !important;
    left: 0 !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: #fff !important;
    transform: rotate(45deg) !important;
  }

  .menu-row.v2-sticky-active #oct-menu-box.v2-tablet-open #oct-ultra-menu-header > span::after,
  .menu-row.v2-sticky-active #oct-menu-box.v2-tablet-open #oct-ultra-menu > span::after {
    opacity: 1 !important;
  }

  .menu-row.v2-sticky-active #oct-ultra-menu-header i,
  .menu-row.v2-sticky-active #oct-ultra-menu i,
  .menu-row.v2-sticky-active .v2-sticky-catalog-label {
    display: none !important;
  }

  .menu-row.v2-sticky-active #oct-menu-dropdown-menu {
    top: 76px !important;
    left: -130px !important;
    right: auto !important;
    width: 768px !important;
    max-width: 100vw !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box {
    display: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed {
    position: absolute !important;
    top: 0 !important;
    left: 190px !important;
    display: block !important;
    width: 578px !important;
    max-width: 578px !important;
    height: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-search-box {
    position: absolute !important;
    top: 36px !important;
    left: 0 !important;
    display: block !important;
    width: 316px !important;
    max-width: 316px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-row.v2-sticky-active #search2 {
    position: relative !important;
    display: flex !important;
    width: 316px !important;
    height: 40px !important;
    overflow: visible !important;
    border: 1px solid #71be00 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .menu-row.v2-sticky-active #search2::after {
    display: none !important;
    content: none !important;
  }

  .menu-row.v2-sticky-active #search2 input {
    width: 274px !important;
    height: 38px !important;
    padding: 0 16px !important;
    border: 0 !important;
    background: #fff !important;
    color: #66707b !important;
    font-size: 12px !important;
    line-height: 38px !important;
    box-shadow: none !important;
  }

  .menu-row.v2-sticky-active #oct-search-button2 {
    width: 40px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #797f86 !important;
    font-size: 18px !important;
    line-height: 38px !important;
    box-shadow: none !important;
  }

  .menu-row.v2-sticky-active #us_livesearch2 {
    top: 40px !important;
    left: 0 !important;
    width: 316px !important;
  }

  .menu-row.v2-sticky-active #us_livesearch_close2 {
    display: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix {
    position: absolute !important;
    top: 44px !important;
    left: 337px !important;
    display: block !important;
    width: 64px !important;
    height: 24px !important;
    background: url('/image/catalog/figma-home/sticky-messengers.svg') center / 64px 24px no-repeat !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix .us-footer-contact-list {
    display: flex !important;
    width: 64px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix .us-footer-contact-item,
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix .us-footer-contact-link {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix img {
    opacity: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email {
    position: absolute !important;
    top: 44px !important;
    left: 418px !important;
    display: block !important;
    width: 24px !important;
    height: 25px !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email .us-phone-img,
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix .us-phone-img {
    display: block !important;
    width: 24px !important;
    height: 25px !important;
    margin: 0 !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email img,
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix img {
    display: block !important;
    width: 24px !important;
    height: 25px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(52%) sepia(9%) saturate(450%) hue-rotate(172deg) brightness(92%) contrast(86%) !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email .us-phone-content,
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix .us-phone-content {
    display: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix {
    position: absolute !important;
    top: 43px !important;
    left: 458px !important;
    display: block !important;
    width: 24px !important;
    height: 26px !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart {
    position: absolute !important;
    top: 24px !important;
    left: 515px !important;
    display: block !important;
    width: 43px !important;
    max-width: 43px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-img {
    position: absolute !important;
    top: 7px !important;
    left: 0 !important;
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-img::before {
    content: none !important;
    display: none !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-img img {
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    content: url('/image/catalog/figma-home/header-cart.svg') !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .header-cart-index {
    position: absolute !important;
    top: -6px !important;
    right: auto !important;
    left: 14px !important;
    display: block !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: #71be00 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-content {
    position: absolute !important;
    top: 45px !important;
    left: -14px !important;
    display: block !important;
    width: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-content > span {
    display: block !important;
    color: #797f86 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    white-space: nowrap !important;
  }

  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-text,
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart .us-cart-link {
    display: none !important;
  }
}
/* Exact interactive tablet header from the supplied 768 x 208 source. */
@media (min-width: 576px) and (max-width: 1024px) {
  #top > .container { position: relative !important; }
  #top .v2-top-contacts { gap: 0 !important; }
  #top .v2-top-messenger {
    width: 30px !important; height: 28px !important; flex: 0 0 30px !important;
    background-repeat: no-repeat !important; background-position: center !important;
    background-size: contain !important;
  }
  #top .v2-top-messenger:first-child {
    margin-right: 20px !important;
    background-image: url('/image/catalog/figma-home/tablet-top-telegram.svg') !important;
  }
  #top .v2-top-messenger:nth-child(2) {
    margin-right: 12px !important;
    background-image: url('/image/catalog/figma-home/tablet-top-max.svg') !important;
  }
  #top .v2-top-messenger i { display: none !important; }
  #top .v2-top-email { font-size: 12px !important; line-height: 18px !important; }
  #top .v2-top-phone {
    margin-left: 18px !important; font-size: 16px !important; line-height: 20px !important;
  }
  #top .v2-tablet-menu-toggle {
    display: none !important;
  }
  #top .v2-tablet-menu-toggle span {
    display: block !important; width: 24px !important; height: 2px !important;
    border-radius: 1px !important; background: #fff !important;
  }
  .menu-row #oct-menu-box { flex: 0 0 78px !important; max-width: 78px !important; }
  .menu-row #oct-ultra-menu-header {
    display: flex !important; width: 78px !important; height: 40px !important;
    padding: 0 !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
  }
  .menu-row #oct-ultra-menu-header > span {
    display: flex !important; width: 100% !important; height: 40px !important; padding: 0 !important;
    align-items: center !important; justify-content: center !important; color: #fff !important;
    text-align: center !important;
    font-size: 13px !important; font-weight: 400 !important; line-height: 40px !important;
    white-space: nowrap !important;
  }
  .menu-row #oct-ultra-menu-header i { display: none !important; }
  .menu-row #oct-menu-dropdown-menu {
    display: none !important; top: 40px !important; left: 0 !important; width: 290px !important;
  }
  .menu-row #oct-menu-box.v2-tablet-open #oct-menu-dropdown-menu {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important;
  }
  .menu-row #oct-megamenu-box {
    padding-right: 0 !important; padding-left: 0 !important;
  }
  .menu-row #oct-megamenu-box, .menu-row #oct-megamenu { overflow: visible !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready {
    display: flex !important; width: 100% !important; height: 40px !important;
    margin: 0 !important; padding: 0 !important;
    align-items: stretch !important; overflow: visible !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li {
    position: relative !important; flex: 0 0 auto !important; height: 40px !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(1) { width: 150px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(2) { width: 90px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(3) { width: 87px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(4) { width: 88px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li:nth-child(5) { width: 74px !important; }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more {
    width: 92px !important; margin-left: auto !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li > a {
    display: flex !important; width: 100% !important; height: 40px !important; padding: 0 8px !important;
    align-items: center !important; justify-content: center !important; color: #fff !important;
    font-size: 12px !important; font-weight: 400 !important; line-height: 40px !important;
    white-space: nowrap !important; cursor: pointer !important; pointer-events: auto !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li > a i {
    margin-left: 7px !important; font-size: 8px !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li > .oct-mm-dropdown {
    top: 40px !important; z-index: 10020 !important; display: none !important;
    min-width: 230px !important; opacity: 0 !important; visibility: hidden !important;
    pointer-events: none !important; transform: none !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-open > .oct-mm-dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production:focus-within > .oct-mm-dropdown,
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about:focus-within > .oct-mm-dropdown,
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more:focus-within > .oct-mm-dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }
  .menu-row #oct-megamenu > ul.v2-tablet-ready > li[data-v2-tablet-open="1"] > .oct-mm-dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }
  .menu-row .v2-tablet-more-dropdown {
    right: 0 !important; left: auto !important; width: 270px !important;
  }
  .menu-row .v2-tablet-more-list {
    margin: 0 !important; padding: 8px 0 !important; background: #fff !important;
  }
  .menu-row .v2-tablet-more-list > li {
    position: relative !important; display: block !important; width: 100% !important; height: auto !important;
  }
  .menu-row .v2-tablet-more-list > li > a {
    display: flex !important; min-height: 38px !important; padding: 9px 16px !important;
    align-items: center !important; justify-content: space-between !important;
    color: #353e48 !important; font-size: 13px !important; line-height: 20px !important;
    white-space: normal !important; pointer-events: auto !important;
  }
  .menu-row .v2-tablet-more-list > li > a:hover,
  .menu-row .v2-tablet-more-list > li.v2-tablet-open > a { color: #71be00 !important; }
  .menu-row .v2-tablet-more-list > li > .oct-mm-dropdown {
    position: static !important; display: none !important; width: 100% !important;
    min-width: 0 !important; margin: 0 !important; box-shadow: none !important;
  }
  .menu-row .v2-tablet-more-list > li.v2-tablet-open > .oct-mm-dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }
  .menu-row .v2-tablet-more-list > li:focus-within > .oct-mm-dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 768 px Figma catalogue dropdown: the live OpenCart item set stays intact;
     only the root list presentation is aligned to the supplied component. */
  @media (max-width:1024px) {
    .menu-row #oct-menu-dropdown-menu {
      left: -20px !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: 636px !important;
      padding: 0 !important;
      border: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul {
      display: flex !important;
      width: 100% !important;
      height: 636px !important;
      margin: 0 !important;
      padding: 0 !important;
      flex-direction: column !important;
      overflow: visible !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li {
      display: block !important;
      flex: 1 1 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: #fff !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li:hover {
      background: #f7f7f7 !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between {
      display: flex !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      padding: 0 !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between > a {
      display: flex !important;
      width: calc(100% - 58px) !important;
      height: 100% !important;
      min-height: 0 !important;
      padding: 0 0 0 20px !important;
      align-items: center !important;
      color: #1a1a1a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 1.25 !important;
      text-decoration: none !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between > a .oct-menu-item-name {
      display: block !important;
      width: auto !important;
      max-width: 100% !important;
      color: inherit !important;
      font-size: inherit !important;
      line-height: inherit !important;
    }

    /* Production and About use the same full-width list pattern as Catalogue.
       Their existing OpenCart links and item counts remain untouched. */
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 100vw !important;
      padding: 0 !important;
      border: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown {
      left: -98px !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown {
      left: -248px !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown {
      right: -20px !important;
      left: auto !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .dropdown-inner,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .dropdown-inner,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .oct-menu-information-ul,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .oct-menu-information-ul {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #fff !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .oct-menu-li,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .oct-menu-li {
      display: block !important;
      width: 100% !important;
      height: 49px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: #fff !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .oct-menu-li:hover,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .oct-menu-li:hover {
      background: #f7f7f7 !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .oct-menu-a,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .oct-menu-a {
      position: relative !important;
      display: flex !important;
      width: 100% !important;
      height: 49px !important;
      padding: 0 58px 0 20px !important;
      align-items: center !important;
      color: #1a1a1a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 1.25 !important;
      text-decoration: none !important;
      white-space: normal !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-production > .oct-mm-dropdown .oct-menu-a::after,
    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-menu-about > .oct-mm-dropdown .oct-menu-a::after {
      position: absolute !important;
      top: 50% !important;
      right: 23px !important;
      width: 7px !important;
      height: 7px !important;
      border-right: 1px solid #797f86 !important;
      border-bottom: 1px solid #797f86 !important;
      content: '' !important;
      transform: translateY(-50%) rotate(-45deg) !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #fff !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list > li {
      display: block !important;
      width: 100% !important;
      min-height: 49px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: #fff !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list > li:hover {
      background: #f7f7f7 !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list > li > a {
      position: relative !important;
      display: flex !important;
      width: 100% !important;
      min-height: 49px !important;
      padding: 0 58px 0 20px !important;
      align-items: center !important;
      color: #1a1a1a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 1.25 !important;
      text-decoration: none !important;
      white-space: normal !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list > li.oct-mm-link > a::after {
      position: absolute !important;
      top: 50% !important;
      right: 23px !important;
      width: 7px !important;
      height: 7px !important;
      border-right: 1px solid #797f86 !important;
      border-bottom: 1px solid #797f86 !important;
      content: '' !important;
      transform: translateY(-50%) rotate(-45deg) !important;
    }

    .menu-row #oct-megamenu > ul.v2-tablet-ready > li.v2-tablet-more > .oct-mm-dropdown .v2-tablet-more-list > li.oct-mm-link > a > i {
      display: none !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between > .oct-menu-toggle {
      position: relative !important;
      display: flex !important;
      width: 58px !important;
      height: 100% !important;
      padding: 0 30px 0 20px !important;
      align-items: center !important;
      justify-content: flex-end !important;
      color: #c0c0c8 !important;
      cursor: pointer !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between > .oct-menu-toggle i {
      display: none !important;
    }

    .menu-row #oct-menu-dropdown-menu > #oct-menu-ul > .oct-menu-li > .justify-content-between > .oct-menu-toggle::before {
      content: '' !important;
      display: block !important;
      width: 5px !important;
      height: 5px !important;
      border-right: 1px solid #c0c0c8 !important;
      border-bottom: 1px solid #c0c0c8 !important;
      transform: rotate(-45deg) !important;
    }
  }
}


/* Final tablet sticky guard: must stay after the fixed 768 source rules. */
@media (min-width: 576px) and (max-width: 1024px) {
  .menu-row.v2-sticky-active > .container,
  .menu-row.v2-sticky-active > .container > .row {
    width: min(100%, 768px) !important;
    max-width: 768px !important;
  }
  .menu-row.v2-sticky-active > .container > .row::before {
    left: 2.6042% !important;
    width: clamp(64px, 11.7188vw, 90px) !important;
  }
  .menu-row.v2-sticky-active #oct-menu-box { left: clamp(92px, 16.9271vw, 130px) !important; }
  .menu-row.v2-sticky-active #oct-menu-dropdown-menu { left: clamp(-130px, -16.9271vw, -92px) !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed {
    left: 24.7396% !important;
    width: 75.2604% !important;
    max-width: none !important;
  }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-search-box {
    width: 54.6713% !important;
    max-width: none !important;
  }
  .menu-row.v2-sticky-active #search2,
  .menu-row.v2-sticky-active #us_livesearch2 { width: 100% !important; }
  .menu-row.v2-sticky-active #search2 input { width: calc(100% - 40px) !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_fix { left: 58.3045% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box_email { left: 72.3183% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed .us-phone-box-tel_fix { left: 79.2388% !important; }
  .menu-row.v2-sticky-active #oct-megamenu-box_fixed #cart { left: 89.1003% !important; }
}