/* Your custom style */

@font-face {
    font-family: 'icons-blank-theme';
    src: url('themelayout/fonts/Blank-Theme-Icons.woff2') format('woff2'),
        url('themelayout/fonts/Blank-Theme-Icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*.product-options-wrapper .swatch-option.image {
    height: 75px !important;
}*/

.product-options-wrapper .swatch-option.image {
    border: 1px solid grey;
    border-radius: 100%;
}

.product-options-wrapper .swatch-option.image:hover {
    border: 1px solid grey;
    border-radius: 100%;
}


.cdz-opc-wrapper #checkoutSteps .checkout-payment-method .checkout-billing-address {
    padding: 0px !important;
    border: none  !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px){
   .list.products-list .item.product-item .product-item-details {
        width: 100% !important;
    }
}

img.main-logo.hidden-xs {
    width: 170px !important;
}

.page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
    padding: 24px 0 !important;
}

.page-header .sticky-menu:not(.active) .header.panel .header-panel-right{
    padding: 22px 0 !important;
}

/*.cdz-newsletter-modal.modal-popup .modal-inner-wrap {
    width: 490px !important;
}*/

.cdz-newsletter-modal.modal-popup .block.newsletter .actions .subscribe {
    width: 40% !important;
}

h4.text-uppercase {
    font-size: 1.25em !important;
    line-height: 1.4 !important;
    color: #0188cc !important;
}

.cdz-newsletter-modal.modal-popup .popup-content {
    padding: 30px 40px !important;
}

.cdz-newsletter-modal.modal-popup .popup-content-desc {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/*@media only screen and (min-width: 768px) {
.page-header .sticky-menu:not(.active) .header-panel-left::after {
    right: -30px;
    width: 120px;
}
}

@media only screen and (max-width: 767px) {
.header-panel-left {
  background-color: transparent !important;
}
.page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
    display: none;
}
body header.page-header .sticky-menu:not(.active) .header.panel a.logo {
    margin-left: 0 !important;
}
}*/


.fotorama__stage {
    width: 100% !important;
}

.modal-popup .fotorama__stage {
    height: 487px !important;
}

.modals-overlay {
    z-index: 0 !important;
}


@media only screen and (min-width: 690px) and (max-width: 1360px){
   .cdz-newsletter-modal.modal-popup .modal-inner-wrap {
    width: 420px !important;
} 

.cdz-newsletter-modal.modal-popup .modal-inner-wrap {
    min-width: 420px !important;
}
}

.col-sm-12.col-md-6.header-panel-left {
    z-index: 000000000000;
}


/*.product-list-style-33 .swatch-option.image {
    width: 50px !important;
    height: 15px !important;
    min-width: 50px !important;
}*/


/*@media only screen and (min-width: 690px) and (max-width: 728px){
   .cdz-newsletter-modal.modal-popup .modal-inner-wrap {
    width: 50% !important;
} 

.cdz-newsletter-modal.modal-popup .modal-inner-wrap {
    min-width: 50% !important;
}
}*/


@media (max-width: 1299px) {
.page-header .sticky-menu:not(.active) .header.panel .header-panel-right,.page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
padding: 27px 0 !important;
}
}
@media (max-width: 1199px) {
.page-header .sticky-menu:not(.active) .header.panel .header-panel-right,.page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
padding: 22px 0 !important;
}
}
@media (max-width: 1024px) {
.page-header .sticky-menu:not(.active) .header.panel .header-panel-right,.page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
padding: 18px 0 !important;
}
}
@media (max-width: 767px) {
.header-panel-middle{display:none}
.header-search-wrap {top:24px;}
.page-header .nav-toggle{top: 40px;}
}


strong.product.name.product-item-name {
    height: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 980px) {
strong.product.name.product-item-name {
    height: 50px;
}
}

@media (max-width: 768px) {
strong.product.name.product-item-name {
    height: 45px;
}
}

@media (max-width: 350px) {
strong.product.name.product-item-name {
    height: 40px;
}
}


fieldset#customer-email-fieldset .field:nth-child(2) {
    border: 1px solid #e1e1e1;
    padding: 10px;
    width: 70%;
}

@media only screen and (min-width: 768px) {
  .cdz-horizontal-menu .groupmenu li.level0 > a.menu-link {font: 600 16px/1.20 Roboto, Helvetica Neue, Verdana, Arial, sans-serif;}
}
@media only screen and (min-width: 1024px) {
.header-panel-left-main {padding-left: 28px; position: relative; width: 100%;}
.header-panel-left-main:after{ content: "";}
.header-panel-left-main:before{ content:"";background-color: #fff;position: absolute;top: 0;left: 45px;width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 1;}
.header-panel-left-bg{position: relative;overflow: hidden;}
.header-panel-left-bg:after{ content: "";background-color: #fff;position: absolute;top: 0;left: 42px;content: '';width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 0.8;}
.header-panel-left-bg:before{ content:"";background-color: #ffffff;position: absolute;top: 0;left: 30px;content: '';width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 0.3;}
.page-header .container.sticky-menu .panel.header.mf-initial .row.cdz-fix-left.mf-initial{ display:flex; flex-wrap:wrap; align-items: center;}
body#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {padding: 0px 0 !important;}
body#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-right {padding: 0px 0 !important;}
body#html-body header.page-header .sticky-menu:not(.active) .header.panel a.logo {padding: 15px 50px;}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::after {background-color: #0188cc; position: absolute; top: 0; right: -50px; content: ''; width: 90px; height: 120%; transform: skew(-30deg, 0deg);display: block;}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::before {background-color: #0188cc; position: absolute; top: 0; left: -50px; content: ''; width: 80px; height: 120%; transform: skew(-30deg);}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::before, .page-header .sticky-menu:not(.active) .header-panel-left::after {display: block;}    
}
@media only screen and (min-width: 1199px) {
.header-panel-left-main {padding-left: 28px; position: relative; width: 100%; }
.header-panel-left-main:after{ content: "";}
.header-panel-left-main:before{ content:"";background-color: #fff;position: absolute;top: 0;left: 45px;width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 1;}
.header-panel-left-bg{position: relative;overflow: hidden;}
.header-panel-left-bg:after{ content: "";background-color: #fff;position: absolute;top: 0;left: 42px;content: '';width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 0.8;}
.header-panel-left-bg:before{ content:"";background-color: #ffffff;position: absolute;top: 0;left: 30px;content: '';width: 7px;height: 120%;transform: skew(-30deg);z-index: 1;opacity: 0.3;}
.page-header .container.sticky-menu .panel.header.mf-initial .row.cdz-fix-left.mf-initial{ display:flex; flex-wrap:wrap; align-items: center;}
body#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {padding: 0px 0 !important;}
body#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-right {padding: 0px 0 !important;}
body#html-body header.page-header .sticky-menu:not(.active) .header.panel a.logo {padding: 15px 60px;}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::after {background-color: #0188cc; position: absolute; top: 0; right: -50px; content: ''; width: 90px; height: 120%; transform: skew(-30deg, 0deg);display: block;}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::before {background-color: #0188cc; position: absolute; top: 0; left: -50px; content: ''; width: 80px; height: 120%; transform: skew(-30deg);}
body#html-body .page-header .sticky-menu:not(.active) .header-panel-left::before, .page-header .sticky-menu:not(.active) .header-panel-left::after {display: block;}    
}

@media only screen and (min-width: 320px) and (max-width: 1023px){
.sections.nav-sections {margin: 0; display: flex;}
.nav-sections-items { width: 100%; height: 100%;}
.nav-sections-item-content {padding-top: 71px !important; height: 100%; margin-top:0px; }
.nav-sections-item-content[id="store.menu"]{  }
.nav-sections-item-content[id="store.links"]{ background:#ffffff; }
.nav-sections-item-title {z-index: 1; position: relative;}
.nav-sections .header.links li.greet.welcome, .nav-sections .header.links li .cdz-dropdown > a, .nav-sections .header.links li > a { color: #353535; border-color: #f2f2f2; }
.nav-sections .header.links{border-color: #f2f2f2; display: block !important;}
.sections.nav-sections .section-items .section-item-title{background: #353535; border-color:#353535; }
.sections.nav-sections .section-items .section-item-title a{ color:#ffffff }
.sections.nav-sections .section-items .section-item-content + .section-item-title{background:#ffffff; border-color: #ffffff;}
.sections.nav-sections .section-items .section-item-content + .section-item-title a{ color:#353535 }
.nav-open .nav-sections {background: #353535;}
.nav-sections-item-content[id="store.menu"] .visible-xs.pos_static{ display:block !important; }
.cdz-menu .item.level-top > .menu-link, .cdz-menu .item.level-top > .dropdown-toggle { color: #fff;}
.header-panel-left .nav-toggle {display: block;}

.cc-window.cc-floating.cc-type-info.cc-theme-block {align-items: center; padding-right: 10px !important; padding-left: 10px !important; padding-top: 10px !important; padding-bottom: 8px !important; }
.cc-floating .cc-message {margin: 0; font-size: 13px; margin-bottom: 10px; line-height: normal; }
.cc-window.cc-floating .cc-compliance {flex: unset; margin: 0 0 0 10px !important; }
.cc-floating .cc-compliance>.cc-btn {flex: unset; width: 60px !important; font-size: 10px; height: 25px; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0; }
.ads-banner .type2 {display: flex; flex-wrap: wrap; padding-left: 0; margin: 0; margin-right: 0px !important; }
.page-header .logo {float: none; display: inline-block; max-width: 250px; margin: 5px auto 0 auto; }
.page-header .nav-toggle {top: 25px; }
.header-search-wrap {top: 10px; }


}

@media only screen and (min-width: 768px) and (max-width: 1023px){


    .nav-open .nav-sections {background: #353535;}
    .nav-sections-item-title {display: block;}
    .cdz-menu .row { margin: 0 -10px }
    .cdz-menu .groupdrop-banner { margin-bottom: 20px }
    .cdz-menu li.item { margin-bottom: 0px }
    .cdz-menu li.item.open>.dropdown-toggle:before, .cdz-menu li.item .cdz-tab-link.active+.dropdown-toggle:before { content: "\e9b3" }
    .cdz-menu .menu-tabs { margin: 0 }
    .cdz-menu .menu-tabs .tab-item { margin: 0 }
    .cdz-menu .menu-tabs .cdz-tab-pane { margin-top: 10px; min-height: 1px !important }
    .cdz-menu .menu-tabs .cdz-link-wrap { position: relative; padding: 4px 0 }
    .cdz-menu .groupmenu-drop { display: none }
    .cdz-menu .groupmenu-drop li.item { padding: 5px 0 }
    .cdz-menu .groupmenu-drop li.item.parent .groupmenu-drop { padding-left: 20px; padding-top: 5px }
    .cdz-menu .menu-link, .cdz-menu a.groupdrop-title { width: 100%; display: inline-block }
    .cdz-menu .item.level-top { display: block; position: relative; margin-bottom: 5px }
    .cdz-menu .item.level-top>.menu-link { padding: 10px; background: transparent; color: #444; font-weight: 500; text-transform: uppercase; font-size: 14px }
    .cdz-menu .item.level-top>.menu-link .menu-icon.fa { margin: 0 10px 0 0 }
    .cdz-menu .item.level-top>.dropdown-toggle { width: 40px; height: 40px; line-height: 40px; background: rgba(0, 0, 0, 0); color: #444 }
    .cdz-menu .item.level-top>.dropdown-toggle:before { margin-top: 7px }
    .cdz-menu .item.level-top>.groupmenu-drop { margin: 0px; padding: 10px; box-shadow: none }
    .cdz-menu .item.level-top>.groupmenu-drop .groupmenu-drop-content { padding-left: 15px }
    .cdz-menu .item.level-top .groupdrop-link .item { padding: 0 }
    .cdz-menu .item.level-top .groupdrop-link .item a { border-bottom: 0 !important; color: #fff; font-size: 14px; font-weight: 500 }
    .cdz-menu .parent { position: relative }
    .cdz-menu .dropdown-toggle { display: block; position: absolute; top: 0px; right: 0; cursor: pointer }
    .cdz-menu .dropdown-toggle:before { display: inline-block; font-family: 'CodazonFont'; font-style: normal; font-weight: normal; font-size: 13px; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\e9b4"; vertical-align: middle; text-align: center; width: 100%; transition: all 500ms ease }


    .header-search-wrap { position: absolute; right: 0; top: 0; padding: 8px 10px 0px 0px; z-index: 801; white-space: nowrap; }
    .header-search-wrap { position: absolute; right: 0; top: 0; padding: 8px 10px 0px 0px; z-index: 801; white-space: nowrap }
    .header-search-wrap .mobi-cart-wrapper { display: inline-block !important; position: relative; top: auto; right: auto; left: auto; vertical-align: middle }
    .header-search-wrap .minisearch input.input-text { background: #fff !important; color: #000 !important }
    .header-search-wrap .minisearch input.input-text::placeholder { color: inherit }
    .header-search-wrap .nested { display: none }
    .header-search { display: inline-block !important; white-space: nowrap; vertical-align: middle; position: static; top: auto; right: auto; left: auto; }
    .header-search .search-form { right: 0 }
    .header-search .header-search-inner { position: relative }
    .header-search .nested { display: none }
    .header-search .search-toggle { font-size: 0; text-decoration: none; width: 35px; height: 35px; line-height: 33px; text-align: center; border: none; background: transparent; transition: 0.5s; display: block !important;}
    .header-search .search-toggle:before { font-family: CodazonFont; content: "\e99d"; font-size: 17px; color: #fff }
    .header-search .search-form { visibility: hidden; position: fixed !important; width: 100% !important; background: #fff !important; left: 0px; top: 40px; z-index: 10; opacity: 0; transition: 0.5s; box-shadow: 0px 4px 4px rgba(211, 211, 211, 0.5); }
    .header-search.input-opened .search-toggle:before { content: "\E976"; transform: rotateZ(90deg) }
    .header-search.input-opened .search-form { visibility: visible; opacity: 1; top: 47px }
    .header-search .block-search { margin: 0 }
    .header-search .block-search .control { border: none; position: relative; padding: 10px 10px; width: 100%; margin: 0 }
    .header-search .block-search .label { display: none }
    .header-search .minisearch .actions { position: absolute; right: 0 !important; top: 0; right: 10px !important; top: 10px }
    .header-search .minisearch .action.search { display: block; background: transparent }
    .header-search .minisearch .action.search:before { color: #282828 }
    .header-search input.input-text { left: auto; position: relative; margin: 0; border: 1px solid #ccc; box-shadow: inset 0px 2px 3px #ccc; height: 35px; line-height: 33px; color: #282828 }
    .header-search input.input-text::placeholder { color: #282828 }
    .header-search.has-cat-search .cdz-cat-search { display: block; position: absolute; left: 10px; z-index: 20; padding: 0 0px; display: flex; height: 100%; align-items: center }
    .header-search.has-cat-search .cdz-cat-search a.current-cat { padding: 0px 10px; white-space: nowrap;  display: inline-block; color: #000; border-right: 1px solid #ccc; width: auto; height: auto;font: 400 13px/1.35 Roboto, Helvetica Neue, Verdana, Arial, sans-serif;}
    .header-search.has-cat-search .cdz-cat-search a.current-cat::after { font-family: 'CodazonFont'; display: inline-block; content: "\e97b"; font-size: 10px; vertical-align: middle; margin-left: 10px; right: 19px; position: static; }
    .header-search.has-cat-search .cdz-cat-search a.current-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 80px; vertical-align: middle; text-transform: none;}
    .header-search.has-cat-search .cdz-cat-search.open a.current-cat:after { content: '\E96B' }
    .header-search.has-cat-search .cdz-cat-search .inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center }
    .header-search.has-cat-search .cdz-cat-search .dropdown { width: 250px; max-width: calc(100vw - 20px); left: 0px; background: #fff; box-shadow: 0px 3px 4px #ccc; z-index: 200; text-align: left }
    .header-search.has-cat-search .cdz-cat-search .dropdown .category-list a { color: #282828 }
    .header-search.has-cat-search input.input-text { padding-left: 130px; padding-right: 35px }
    .actions .search { width: 35px; height: 35px; font-size: 0; padding: 0; opacity: 1; border: 0; background: #0188cc }
    .actions .search:before { display: inline-block; font-family: 'CodazonFont'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e99d"; font-size: 17px; speak: none; color: #fff }

    .nav-open .nav-sections { background: #fff }
    .cdz-menu .row { margin: 0 -10px }
    .cdz-menu .groupdrop-banner { margin-bottom: 20px }
    .cdz-menu li.item { margin-bottom: 0px }
    .cdz-menu li.item.open>.dropdown-toggle:before, .cdz-menu li.item .cdz-tab-link.active+.dropdown-toggle:before { content: "\e9b3" }
    .cdz-menu .menu-tabs { margin: 0 }
    .cdz-menu .menu-tabs .tab-item { margin: 0 }
    .cdz-menu .menu-tabs .cdz-tab-pane { margin-top: 10px; min-height: 1px !important }
    .cdz-menu .menu-tabs .cdz-link-wrap { position: relative; padding: 4px 0 }
    .cdz-menu .groupmenu-drop { display: none }
    .cdz-menu .groupmenu-drop li.item { padding: 5px 0 }
    .cdz-menu .groupmenu-drop li.item.parent .groupmenu-drop { padding-left: 20px; padding-top: 5px }
    .cdz-menu .menu-link, .cdz-menu a.groupdrop-title { width: 100%; display: inline-block }
    .cdz-menu .item.level-top { display: block; position: relative; margin-bottom: 5px }
    .cdz-menu .mobile_only_menu {display: block !important;}
    .cdz-menu .item.level-top>.menu-link { padding: 10px; background: transparent; color: #444; font-weight: 500; text-transform: uppercase; font-size: 14px }
    .cdz-menu .item.level-top>.menu-link .menu-icon.fa { margin: 0 10px 0 0 }
    .cdz-menu .item.level-top>.dropdown-toggle { width: 40px; height: 40px; line-height: 40px; background: rgba(0, 0, 0, 0); color: #444 }
    .cdz-menu .item.level-top>.dropdown-toggle:before { margin-top: 7px }
    .cdz-menu .item.level-top>.groupmenu-drop { margin: 0px; padding: 10px; box-shadow: none }
    .cdz-menu .item.level-top>.groupmenu-drop .groupmenu-drop-content { padding-left: 15px }
    .cdz-menu .item.level-top .groupdrop-link .item { padding: 0 }
    .cdz-menu .item.level-top .groupdrop-link .item a { border-bottom: 0 !important; color: #fff; font-size: 14px; font-weight: 500 }
    .cdz-menu .parent { position: relative }
    .cdz-menu .dropdown-toggle { display: block; position: absolute; top: 0px; right: 0; cursor: pointer }
    .cdz-menu .dropdown-toggle:before { display: inline-block; font-family: 'CodazonFont'; font-style: normal; font-weight: normal; font-size: 13px; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\e9b4"; vertical-align: middle; text-align: center; width: 100%; transition: all 500ms ease }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
.sections.nav-sections {margin: 0; display: flex;display: none;}
.nav-sections-items { width: 100%; height: 100%;}
.nav-sections-item-content[id="store.links"]{ background:#ffffff; }
.nav-sections-item-title {z-index: 1; position: relative;}
.nav-sections .header.links li.greet.welcome, .nav-sections .header.links li .cdz-dropdown > a, .nav-sections .header.links li > a { color: #353535; border-color: #f2f2f2; }
.nav-sections .header.links{border-color: #f2f2f2; display: block !important;}
.sections.nav-sections .section-items .section-item-title{background: #353535; border-color:#353535; }
.sections.nav-sections .section-items .section-item-title a{ color:#ffffff }
.sections.nav-sections .section-items .section-item-content + .section-item-title{background:#ffffff; border-color: #ffffff;}
.sections.nav-sections .section-items .section-item-content + .section-item-title a{ color:#353535 }
.nav-open .nav-sections {background: #353535;display: block!important;}
.nav-sections-item-content[id="store.menu"] .visible-xs.pos_static{ display:block !important; }
.cdz-menu .item.level-top > .menu-link, .cdz-menu .item.level-top > .dropdown-toggle { color: #fff;}
.header-panel-left .nav-toggle {display: block;}

.page-header { position: relative; min-height: 50px; border-bottom: 1px solid #e1e1e1; margin-bottom: 10px; color: #fff; background: #0188cc }
.page-header .header.links.visible-xs { display: none !important }
.page-header .logo { float: none; display: inline-block; max-width: 150px; margin: 13px auto 0 auto }
.page-header .nav-toggle { width: 35px; height: 20px; display: inline-block; float: left; cursor: pointer; font-size: 0; left: 0; position: absolute; top: 16px; z-index: 14 }
.page-header .nav-toggle>span { display: inline-block; position: relative; height: 100%; width: 100% }
.page-header .nav-toggle>span:before, .page-header .nav-toggle>span:after { position: absolute; left: 0; width: 26px; height: 2px; content: ""; background: #fff; z-index: 3; transition: transform .35s ease; backface-visibility: hidden }
.page-header .nav-toggle>span:after { bottom: 0 }
.page-header .nav-toggle:before { position: absolute; left: 0; top: 8px; width: 16px; height: 2px; content: ""; background: #fff }
.page-header .nav-toggle span { position: relative; display: inline-block; height: 20px }
.page-header .mobi-cart-wrapper { position: absolute; right: 0; top: 0 }
.page-header .mobi-cart-wrapper .action.showcart { width: 35px; height: 35px; line-height: 35px; display: block; text-align: center }
.page-header .mobi-cart-wrapper .action.showcart:before { display: inline-block; font-family: 'CodazonFont'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e992'; font-size: 22px; speak: none; color: #fff; line-height: 35px }
.page-header .mobi-cart-wrapper .action.showcart .text, .page-header .mobi-cart-wrapper .action.showcart .counter-label, .page-header .mobi-cart-wrapper .action.showcart .cart-subtotal { display: none }
.page-header .mobi-cart-wrapper .action.showcart .counter.qty { display: block; position: absolute; top: 0px; min-width: 15px; height: 15px; line-height: 16px; font-size: 11px; font-weight: 600; right: 0px; text-align: center; border-radius: 100%; color: #fff; background: #282828 }
.page-header .mobi-cart-wrapper .action.showcart .counter-number { display: block; font-size: 11px }
.page-header .mobi-cart-wrapper .action.showcart .counter-number.price { display: none }
.nav-before-open.nav-open .nav-toggle { height: 35px; top: 10px; left: 0 }
.nav-before-open.nav-open .nav-toggle:before { opacity: 0 }
.nav-before-open.nav-open .nav-toggle span { height: 30px }
.nav-before-open.nav-open .nav-toggle span:before, .nav-before-open.nav-open .nav-toggle span:after { top: 15px; left: 5px; outline: 1px solid transparent }
.nav-before-open.nav-open .nav-toggle span:before { transform: rotate(-45deg) }
.nav-before-open.nav-open .nav-toggle span:after { transform: rotate(45deg) }
.nav-open .nav-toggle>span:before, .nav-open .nav-toggle>span:after { background: #ffffff }
.small-logo.visible-xs {display: inline-block !important; width: 100%;}
.main-logo.hidden-xs{ display:none !important; }
body header.page-header .sticky-menu:not(.active) .header.panel .header-panel-left { background: none; width: 100%; text-align: center;}
.header-panel-middle { display: none; }
.header-panel-right { display: none; }
.header-search-wrap {display: block;}
.page-header .header.panel{padding-left: 10px; padding-right: 10px;}
.sticky-menu:not(.active) .header-search-wrap { width: auto; margin: 0px;}
.header-search-wrap .mobi-cart-wrapper { display: inline-block !important; position: relative; top: auto; right: auto; left: auto; vertical-align: middle; }
.header-search-wrap {top: 24px; width: auto; margin: 0px;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
}
.page-header .nav-toggle {top: 40px;
    top: 54%;
    /* left: 35px; */
    left: 15px;
    transform: translate(-50%, -50%);
}
.page-header .sticky-menu.active .nav-toggle{
    left:25px;
}
.header-search.input-opened .search-form { visibility: visible; opacity: 1; top: 100px;}
.header-search.has-cat-search .cdz-cat-search { display: block; position: absolute; left: 10px; z-index: 20; padding: 0 0px; display: flex; height: 100%; align-items: center; }
#search_mini_form { width: auto; float: none; padding: 0; }
.header-search.has-cat-search input.input-text {padding-left: 130px; padding-right: 35px;}
.sticky-menu:not(.active) .header-search .minisearch input.input-text{padding-left: 130px; padding-right: 35px;}
.page-header .logo { float: none; display: inline-block; max-width: 150px; margin: 13px auto 0 auto; }
.header-search .cdz-cat-search span::after { display:none; }
.nav-open .page-header .sticky-menu.active{left: calc(100% - 54px);}
.nav-before-open .page-header .sticky-menu.active{left: calc(100% - 54px);-webkit-transition: left 0.3s; -moz-transition: left 0.3s; -ms-transition: left 0.3s; transition: left 0.3s;}
.cdz-menu.is-tablet .visible-tablet {display: none;}
.nav-open .nav-sections {
    background: #353535;
}
.sections.nav-sections {
    margin: 0;
    display: flex;
}
.nav-open .nav-sections {
    -webkit-box-shadow: 0 0 5px 0 rgba(50,50,50,.75);
    -moz-box-shadow: 0 0 5px 0 rgba(50,50,50,.75);
    -ms-box-shadow: 0 0 5px 0 rgba(50,50,50,.75);
    box-shadow: 0 0 5px 0 rgba(50,50,50,.75);
    left: 0;
    z-index: 99;
}
.nav-sections {
    -webkit-overflow-scrolling: touch;
    -webkit-transition: left .3s;
    -moz-transition: left .3s;
    -ms-transition: left .3s;
    transition: left .3s;
    height: 100%;
    left: calc(-1*(100% - 54px));
    overflow: auto;
    position: fixed;
    top: 0;
    width: calc(100% - 54px);
}

/* 11-03-24 */
.cdz-horizontal-menu .groupmenu li.level0:hover>a.menu-link {
    color: #fff;
}

} 

/* --31-03-23-- */
.ads-banner .type3{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
}
.ads-banner .type3 .ads-image{
    width: calc(33.33% - 20px);
    padding: 0;
    margin: 0 20px 20px 0;
    float: left;
}

.ads-banner .type2{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    margin-right: -20px;
}
.ads-banner .type2 .ads-image{
    width: calc(50% - 20px);
    padding: 0;
    margin: 0 20px 20px 0;
    float: left;
}

.ads-banner .type1{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
}
.ads-banner .type1 .ads-image{
    width: calc(100%);
    padding: 0;
    margin: 0 20px 20px 0;
    float: left;
}
.mobile_only_menu{ display:none !important; }

@media screen and (min-width:320px) and (max-width:767px) {
    .page-header .search-trigger:before {
    display: inline-block;
    font-family: 'CodazonFont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e98f';
    font-size: 19px;
    speak: none;
    }
    .ads-banner .type3 .ads-image{
        width: 100%;
        margin: 0 0px 10px 0;
    }
    .ads-banner .type2 .ads-image{
        width: 100%;
        margin: 0 0px 10px 0;
    }
    .ads-banner .type1 .ads-image {
        margin: 0 10px 10px 0;
    }
    .mobile_only_menu{ display:block !important;}
}
@media screen and (min-width:768px) and (max-width:992px) {
    .ads-banner .type3 .ads-image{
        width: calc(50% - 20px);
        margin: 0 20px 20px 0;
    }
    .ads-banner .type1 .ads-image {
        margin: 0 20px 20px 0;
    }
}
@media screen and (min-width:768px) and (max-width:1024px) {
    .skill-value .space-md{ margin-bottom:0px; }
    .store-event .space-md{ margin-bottom:0px; }
    .store-event ul.list_style{margin-bottom:0px;}
    .space-lg { margin-bottom: 30px; }
    .page-footer .newsletter-title .title{font-size: 150%;}
    .page-footer .newsletter-icon{transform: skew(25deg);}
    .nav-toggle{ display:none;}
    body header.page-header .sticky-menu:not(.active) .header.panel a.logo {padding: 15px 0px; margin: 0;}
    .page-header .sticky-menu:not(.active) .header.panel .header-panel-middle { padding: 34px 0 !important; margin-top: 0px;}
    .page-header .sticky-menu:not(.active) .header.panel .header-panel-right{ padding: 34px 0 !important;}
    .product-list-style-34 .owl-carousel .owl-nav{display:none;}
    .product-list-style-34.box-line .cdz-block-title .b-title.h2 {font-size: 16px;}

    /* .nav-sections-item-content[id="store.menu"] {
        display: none;
    } */
}

.modals-wrapper{position: relative; z-index: 999;}
.qs-modal{position: relative; z-index: 999;}
.block.filter .filter-options .filter-options-content .price-slider-container .input-wrap input { width: 100%; text-align: center;}
.block.filter .filter-options .filter-options-content .price-slider-container .input-wrap { float: left; margin-top: 10px; width: calc(100% - 60px);}
.price-slider-container .input-wrap .control { width: 40%;}
.columns .post-content .post-description a{ text-decoration:underline; color: #0188cc;}
.columns .post-content .post-description a:hover{ text-decoration:none; color: #000000;}
@media only screen and (min-width: 768px){
.product-list-style-34 .wrapper.products-list .product-item-actions { top: 50%; transform: translate(0, -50%) !important; bottom: auto; }
}

/* 16-05-23 */

@media only screen and (min-width: 768px){
    .product-list-style-34 .wrapper.products-list .product-item-actions { top: 50%; transform: translate(0, -50%) !important; bottom: auto; }
    .cdz-newsletter-modal.modal-popup .modal-inner-wrap {
      
        width: 60%;
        max-width: 580px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/* 17-03-23 */
.item.product.product-item.clearfix{
    min-height: 266px;
}
.product-info-main .price-box .special-price {
    margin: 0 20px 0 0;
}

.minicart-items .action.edit {
    top: -15px;
    left: 22px;
}
.minicart-items .action {
    top: -15px;
}

.ads-image img{
    width: 100%;
}

.cc-window.cc-floating {
    flex-direction: row!important;
    align-items: center;
}
.cc-floating .cc-compliance>.cc-btn {
    flex: unset;
    width: 120px;
}
.cc-window.cc-floating .cc-compliance {
    flex: unset;
    margin: 0 0 0 20px;
}
.cc-floating .cc-message {
  
    margin: 0;
}

.product-item .product-item-description {
    color: #777;
}
body .product-item .price-box .old-price .price,
body .product-item .price-box .old-price  {
    color: #777;
}

.page-header .logo {
    z-index: 1;
}

/* popup overlay issue */
.page-header .sticky-menu.active {
    z-index: 2;
}
.minicart-items .action {
    top: 0;
}
.minicart-items .action.edit {
    top: 0;
}
.cart-informed-modal {
    position: relative;
    z-index: 999;
}


/* 28-06-23 */
@media only screen and (min-width: 768px){
    .product-list-style-34 .wrapper.products-list .product-item-actions {
        top: auto!important;
        transform: none!important;
        bottom: -10px;
    }

    div#fme-ask-question-form-wraper {
        max-width: 500px;
        margin: auto;
        background: #fff;
        padding: 10px;
        position: relative;
    }
}
.amsearch-input-wrapper.-typed .amsearch-input {
    background: #fff;
}
section.amsearch-overlay-block{
    display: none !important;
}
section.amsearch-input-wrapper.-dynamic-width{
     background: #fff;
}
.amsearch-wrapper-block{ width:auto !important;}
.amsearch-highlight {
    color: #f2910D;
}

/* 02-08-23 */
@media screen and (min-width:320px) and (max-width:768px) {
    .page-header .amsearch-result-section {
        right: 0;
        width: 100%;
        position: fixed;
        top: 76px;
    }
    .page-header .product-item .product-item-link{
        white-space: normal;
    }
    .nav-sections .header.links li.greet.welcome{
        display: none;
    }
}
@media screen and (min-width:769px) and (max-width:1023px) {
    .page-header .product-item .product-item-link{
        white-space: normal;
    }
}


@media only screen and (min-width: 1400px){
    .breadcrumbs .items, .page-main:not(.page-main-full) > div, .container {
        width: 100%;
        max-width: 1520px;
      }
}

/* QA issues 04-08-23 */
.cdz-dd-content {
    min-width: 340px;
}
.page-footer .block.newsletter .content .control input {
    border-radius: 20px;
}
.checkout-index-index .opc-block-summary {
    margin: 0;
}
.sidebar .block:not(.account-nav) .block-title strong, .sidebar .block:not(.account-nav) .title strong {
    color: #fff;
}


@media screen and (min-width:1024px) and (max-width:1199px) {
    .page-header .search-trigger {
        width: 30px;
        height: 30px;
    }
    .page-header .utilies-toggle-btn, .page-header .account-trigger, .page-header .action.showcart {
        width: 30px;
        height: 30px;
    }
}

@media only screen and (min-width: 1024px){
    .header-search-wrap.search-opened .header-search * {
        background-color: unset !important;
    }    
}

@media only screen and (min-width: 1023px){
    .page-header .amsearch-input-wrapper {
        min-width: 404px;
    }
}



@media screen and (min-width:1201px){
    .page-header .features-links>li.linkslist-link{
    display:none;
    }
}
p.amsearch-message-block {
    background-color: #0188cc;
}
.block-shipping-estimation .shipping-title {
    color: #000;
}
.block-shipping-estimation .shipping-cost-result .rs-title {
    color: #000;
}
.checkout-onepage-success #registration {
    margin: auto;
    margin-top: 40px;
    border:0;
    width:auto;
}


#header-search-wrap .amsearch-button.-primary {
    display: none;
}


/* Style CSS */
.divtiger-row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.divtiger-col{
    position: relative;
    min-height: 1px;
    padding: 5px 15px 5px 15px;
    word-wrap: break-word;
}

.divtiger-col-5{
    width: 50%;
}


.divtiger-font-color {
    color: #303030;
}


.divtiger-border {
    border-bottom : 1px solid;
}

.divtiger-font-weight {
    font-weight: bold;
}

@media (max-width: 992px) {
    .divtiger-row{
        padding-bottom: 10px !important;
    }
    .divtiger-col-1,
    .divtiger-col-2,
    .divtiger-col-3{
        padding-top: 5px;
        width: 100%
    }
}


.product.info.detailed .additional-attributes {
    width: 100%;
}


/* 22-08-23 */
#back-top {
    right: 25px;
    bottom: 85px;
}



@media only screen and (min-width: 768px) and (max-width: 1023px){
.nav-before-open {height: 100%; overflow-x: hidden; width: 100%;}
.nav-sections-item-title { background: #e8e8e8; border: solid #dbdbdb; border-width: 0 0 1px 1px; box-sizing: border-box; float: left; height: 71px; padding-top: 24px; text-align: center; width: 33.33%; }
.nav-sections-item-title { text-transform: uppercase; }
.nav-sections-item-title { z-index: 1; position: relative; }
.nav-sections-item-title.active { background: 0 0; border-bottom: 0; }
.nav-sections-item-content { box-sizing: border-box; float: right; margin-left: -100%; margin-top: 0px; width: 100%; padding: 25px 0; }
.nav-sections-item-content {padding: 0;}
.sections.nav-sections .section-items .section-item-title { background: #353535; border-color: #353535; }
.nav-sections-item-title:first-child { border-left: 0; }
.nav-before-open body { height: 100%; overflow: hidden; position: relative; width: 100%; }
.nav-before-open .page-wrapper { -webkit-transition: left .3s; -moz-transition: left .3s; -ms-transition: left .3s; transition: left .3s; height: 100%; left: 0; overflow: hidden; position: relative; }
.nav-open .page-wrapper { left: calc(100% - 54px); }
.nav-before-open.nav-open .nav-toggle { height: 35px; top: 10px; left: 0; transform: none;}
.nav-open .nav-toggle::after { background: rgba(0, 0, 0, .5); content: ''; display: block; height: 100%; position: fixed; right: 0; top: 0; width: 100%; z-index: 1; }
.cdz-navigation .cdz-horizontal-menu .groupmenu {margin: 0; background: none;}
.cdz-horizontal-menu .groupmenu li.item.level0{float: none; background: none; display: block;}
.cdz-horizontal-menu .groupmenu li.level0 > a.menu-link{ background:none; border:none;}
.cdz-horizontal-menu.cdz-translate li.level0 > .groupmenu-drop { top: 100%; position: static; visibility: visible; opacity: 1; transform: none; background: #282828; border: none; }
.cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop { background: #282828; }
.cdz-menu .menu-link, .cdz-menu a.groupdrop-title { width: 100%; display: inline-block; }
.cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop .groupdrop-title a, .cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop a { color: #fff; }
.visible-tablet {display: none;}
.nav-sections-item-content[id="store.links"] { background: #ffffff; margin-top: 0;}
.nav-sections .header.links { margin: 0; padding: 0; list-style: none none;}
.nav-sections .header.links li { font-size: 1.6rem; margin: 0; }
.nav-sections .header.links li.greet.welcome, .nav-sections .header.links li .cdz-dropdown > a, .nav-sections .header.links li > a { font-size: 14px; font-weight: 500; border-top: 0; border-bottom: 1px solid #1f1f1f; }
.compare, .product-addto-links .action.tocompare, .product-item-actions .actions-secondary > .action.tocompare { display: none;}
.nav-sections .header.links li.greet.welcome { display: none;}
.cms-index-index .columns { box-sizing: border-box; padding-top: 0;}
.nav-sections .header.links a, .nav-sections .header.links a:hover { color: #575757; text-decoration: none; display: block; font-weight: 700; padding: .8rem 15px;}
.nav-sections .header.links li.greet.welcome, .nav-sections .header.links li .cdz-dropdown > a, .nav-sections .header.links li > a {color: #353535; border-color: #f2f2f2;}
.page-header .header-top {display: none;}
body header.page-header .sticky-menu:not(.active) .header.panel a.logo { padding: 15px 0!important; margin: 5px auto 0 auto;}
.page-header .logo { float: none; display: inline-block; max-width: 250px; margin: 5px auto 0 auto;}
.header-search-wrap .mobi-cart-wrapper { display: inline-block !important; position: relative; top: auto; right: auto; left: auto; vertical-align: middle; }
.page-header .amsearch-wrapper-block { box-sizing: border-box; display: inline-block; margin: 0; order: 1; padding: 0; position: relative; width: 100%; border: none;  float: none;}
.header-search-wrap { transform: none; top: 10px;}
.page-header .sticky-menu.active .logo { display: block;}
.page-header .sticky-menu.active .header-panel-left{display: block; width: 100%;}
.page-header .sticky-menu.active .header-search-wrap { width: auto; margin: 0 auto; float: none;}
.header-search .search-form { visibility: hidden; position: fixed; width: 100%; background: #fff; left: 0px; top: 40px; z-index: 10; opacity: 0; transition: 0.5s; box-shadow: 0px 4px 4px rgba(211,211,211,0.5);}
.header-search.input-opened .search-form { visibility: visible; opacity: 1; top: 47px;}
}
.amsearch-block-header .amsearch-title {
    color: #1979c2;
}


/* 04-09-23 */

.products.list .amlabel-position-wrapper{
    width: 45px!important;
    height: auto!important;
}

@media screen and (min-width:320px) and (max-width:767px) {
    .cdz-menu .dropdown-toggle:before {
        color: #fff;
    }
   
}




@media screen and (min-width:320px) and (max-width:767px) {
.product.info.detailed table td, .product.info.detailed th {
    border: 1px solid #e9eaec !important;
    float: left;
    width: 100%;
}
.product.info.detailed table td h1, .product.info.detailed th h1{
    font-size: 28px;
}
table#product-attribute-specs-table td {
    padding: 10px 10px 5px;
    vertical-align: top;
    line-height: 1;
    float: left;
    width: 100% !important;
}}
@media screen and (max-width:1023px){
    .cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop a:visited {
        color: #fff;
    }
}
.block-static-block.widget, .block-cms-link.widget {
    margin-bottom: 0;
}

/* 28-09-23 */
@media screen and (min-width:1199px) and (max-width:1399px) {
    .page-header .sticky-menu:not(.active) .header.panel .logo {
        position: relative;
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media screen and (min-width:1400px) and (max-width:2000px) {
    .page-header .sticky-menu:not(.active) .header.panel .logo {
        position: relative;
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .page-header .sticky-menu:not(.active) .header-panel-left:after {
        right: -50px;
        content: '';
        width: 100px;
    }
    .page-header .sticky-menu:not(.active) .header-panel-left:before {
        left: -50px;
        width: 100px;
    }
}

/* sticky 28-09-23 */
header.page-header.header-style-33 {
    margin-top: 0px;
}
.notification-bar .header-notification{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1111;
}
.page-header .sticky-menu.active {
    /* top: 51px!important; */
}
@media screen and (min-width:320px) and (max-width:767px) {
    .page-header .sticky-menu.active {
        top: 0px!important;
    }
    .notification-bar .header-notification span{
       font-size: 13px!important;
    }
}
.amsearch-product-list .product-item .swatch-option.color, .amsearch-product-list .product-item .swatch-option.image {
    height: 20px !important;
    width: 20px !important;
    padding: 0;
    min-width: inherit;
    border-radius: 50%;
}

#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-middle {
    padding: 20px 0 !important;
}

#html-body .page-header .sticky-menu:not(.active) .header.panel .header-panel-right {
    padding: 20px 0 !important;
}

.page-header .row.cdz-fix-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Style CSS */
.divtiger-row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.divtiger-col{
    position: relative;
    min-height: 1px;
    padding: 5px 15px 5px 15px;
    word-wrap: break-word;
}

.divtiger-col-3{
    width: 33.333333333333336%;
}






@media (max-width: 992px) {
    .divtiger-row{
        padding-bottom: 10px !important;
    }
    .divtiger-col-1,
    .divtiger-col-2,
    .divtiger-col-3{
        padding-top: 5px;
        width: 100%
    }
}
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
@media (min-width: 768px) {
  body header.page-header .sticky-menu:not(.active) .header.panel a.logo {
    padding: 15px 60px;
    /* width: 81.9%; */
  }

  .cdz-menu:not(.cdz-toggle-menu) .groupmenu-drop>li.item {
    max-width: 1500px;
  }
}

.store-info-top.container .col-sm-12.col-left {
    width: 100% !important;
}


@media only screen and (min-width: 1024px){
    .panel.header .row.cdz-fix-left {
        display: flex;
        align-items: center;
    }
    /* body header.page-header .sticky-menu:not(.active) .header.panel a.logo {
        width: 100%;
    } */
}

.table-wrapper.comparison .table-comparison .cell.product.info .product-item-actions .tocart.primary {
    padding: 7px 0;
}
.table-wrapper.comparison .table-comparison .cell.product.info .product-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.table-wrapper.comparison .table-comparison .cell.product.info .product-item-actions .actions-secondary {
    display: flex;
    align-items: center;
    height: fit-content;
}
.table-wrapper.comparison .table-comparison .cell.product.info .product-item-actions .actions-secondary a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 0;
}
.table-wrapper.comparison .table-comparison .price-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.table-wrapper.comparison .table-comparison .cell.product.info .price-box .old-price {
    margin: 0;
}
.table-wrapper.comparison .table-comparison .product-item-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 36px;
}
.products-grid.wishlist .product-item-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 38px;
}
.search.results strong.product.name.product-item-name {
    height: 45px;
}
.checkout-payment-method .payment-method-content .paypal-buttons iframe.visible {
    z-index: 1;
}
.block-products-list .products-grid .product-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 155px;
}
.block-products-list .products-grid .product-item-details .product-item-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.footer-mobile-content {
    display: none;
}

@media screen and (max-width: 767px) {
    #header-search-wrap {
        display: flex;
        align-items: center;
    }
    #header-search-wrap .mobile_link {
        display: flex;
        height: 30px;
        width: 30px;
        justify-content: center;
        align-items: center;
    }
    /* Phone icon: match CodazonFont search icon (FA phone often invisible / wrong colour on blue header) */
    #header-search-wrap .mobile_link a {
        align-items: center;
        color: transparent;
        display: inline-flex;
        font-size: 0;
        height: 30px;
        justify-content: center;
        line-height: 1;
        width: 30px;
        text-decoration: none;
    }
    #header-search-wrap .mobile_link a:before {
        color: #ffffff;
        content: "\e995";
        display: inline-block;
        font-family: 'CodazonFont';
        font-size: 19px;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    #header-search-wrap .mobile_link .fa-phone {
        display: none;
    }
    #mobi_cart-wrapper {
        order: 2;
    }
    .page-header .mobi-cart-wrapper .action.showcart {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
    .page-header .mobi-cart-wrapper .action.showcart:before {
        font-size: 19px;
    }
    .product.info.detailed .product.items>.item.content table tr td {
        width: 100% !important;
    }
    .sorter-options {
        width: auto;
    }
    .checkout-index-index .modal-footer .action-save-address {
        margin-bottom: 8px;
    }
    .cms-page-view .block-products-list .products-grid li.product-item {
        max-width: calc((100% / 2) - 20px) !important;
    }
    .footer-mobile-content {
        display: block;
    }
    .footer-third-clm {
        display: none;
    }
}
.table-comparison {
    table-layout: fixed;
    min-width: 1000px;
}

.amlabel-position-wrapper{
        z-index: 1;
}

/*DIV TABLE*/

.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}

/* slider arrow */

.products.products-related .products.list.items {
    position: relative;
}

.products.products-related .products.list.items button.owl-prev {
    position: absolute;
    background: transparent;
    border: 0;
    color: #7e7e7e;
    font-size: 0;
    line-height: normal;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.products.products-related .products.list.items button.owl-next {
    position: absolute;
    background: transparent;
    border: 0;
    color: #7e7e7e;
    font-size: 0;
    line-height: normal;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.products.products-related .products.list.items button.owl-next:after {
    /* background: url('https://stage.apollohifi.com.au/media/wysiwyg/back_2.png') no-repeat center; */
    background: url('/media/wysiwyg/back_2.png') no-repeat center;
    display: inline-block;
    height: 90px;
    width: 50px;
    content: '';
    background-size: 100%;
}
.block.related .products-grid .product-item .product-item-info .product-item-photo{
          width: 100%;
          text-align: center;
          display: block;
}
.products.products-related .products.list.items button.owl-prev:after {
    /* background: url('https://stage.apollohifi.com.au/media/wysiwyg/back_1.png') no-repeat center; */
    background: url('/media/wysiwyg/back_1.png') no-repeat center;
    display: inline-block;
    /* height: 190px;
    width: 100px; */
    height: 90px;
    width: 50px;
    content: '';
    background-size: 100%;
}
.products-related .product-item-info {width: 100%; padding: 20px;}
.products-related .product-item-info strong.product.name.product-item-name {height: auto;}
.products-related .owl-nav.disabled{ display:block; }
.products-related .owl-carousel .owl-nav [class*="owl-"]::before { display:none; }
.block.related .field.choice.related input { margin: 0; position: absolute; right: 20px; top: 15px;}
.products-related .owl-carousel {
    /* padding: 0 137px; */
    padding: 0 95px;

}

.products-upsell ol.product-items { display: flex; gap: 10px; flex-wrap: wrap; row-gap: 10px; }
.products-upsell ol.product-items .product-item { width: calc(25% - 10px); }



@media screen and (min-width:320px) and (max-width:767px) {
    .products.products-related .products.list.items button.owl-next:after,
    .products.products-related .products.list.items button.owl-prev:after {
        height: 50px;
        width: 50px;
    }
    .products.products-related .products.list.items {
    position: relative;
    padding: 0 50px;
    }
.products.products-related .products.list.items button.owl-prev{ padding:0px; }
.products.products-related .products.list.items button.owl-next{ padding:0px; }
    .products-upsell ol.product-items .product-item { width: calc(50% - 10px); }
}
@media screen and (min-width:768px) and (max-width:991px) {
    .products.products-related .products.list.items button.owl-next:after,
    .products.products-related .products.list.items button.owl-prev:after {
        height: 60px;
        width: 60px;
    }
    .products.products-related .products.list.items {
        position: relative;
        padding: 0 50px;
    }
    .products.products-related .products.list.items button.owl-prev{ padding:0px; }
    .products.products-related .products.list.items button.owl-next{ padding:0px; }
    .products-upsell ol.product-items .product-item { width: calc(33.33% - 10px); }
}

.product-info-main .price-box .price-from .old-price,
.product-info-main .price-box .price-to .old-price {
    vertical-align: bottom;
}
@media screen and (min-width: 992px){
    .brand-container .cover-section .brand-cover {
        background: #fff;
    }
    .brand-container .cover-section .brand-cover {
        height: 300px;
        object-fit: contain;
    }
}
.product-brand-info .brand-link {
    width: 100%;
    border: 0;
}
.block.related .products-grid .product-item .product-item-info .product-item-photo { width: 100%; max-width: 150px; max-height: 150px; margin: 0 auto; margin-bottom: 10px; }


body .page-header .header-top a:hover { color: #0188cc; }

.product-brand-info .brand-link img {
   height: 150px;
   width: 150px;
   object-fit: contain;
}

/* 28-04-2025 z-index issue of minicart */
header.page-header.header-style-33 {
    z-index: 111;
}


/* Product Details Page Specification tab tabler */
.product.info.detailed table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.product.info.detailed table td, .product.info.detailed table th { width: 50%; box-sizing: border-box; }
table#product-attribute-specs-table td h1, table#product-attribute-specs-table td h2, table#product-attribute-specs-table td h3, table#product-attribute-specs-table td h4, table#product-attribute-specs-table td h5, table#product-attribute-specs-table td h6, table#product-attribute-specs-table td p, table#product-attribute-specs-table td ul, table#product-attribute-specs-table td ul li:last-child { margin-bottom: 0; }
body table#product-attribute-specs-table td { padding: 10px; }
#product-attribute-specs-table, #product-attribute-specs-table * { font-family: Roboto, "Helvetica Neue", Verdana, Arial, sans-serif !important; height: auto !important; }
body table#product-attribute-specs-table td.col.data { padding: 0 !important; }
body table#product-attribute-specs-table td { padding: 10px !important; }
table#product-attribute-specs-table td h1, table#product-attribute-specs-table td h2, table#product-attribute-specs-table td h3, table#product-attribute-specs-table td h4, table#product-attribute-specs-table td h5, table#product-attribute-specs-table td h6, table#product-attribute-specs-table td p strong, body table#product-attribute-specs-table td strong { font-size: 16px; line-height: 22px; font-weight: 600; color: #666666 }
table#product-attribute-specs-table td ul li, table#product-attribute-specs-table td ul li p, table#product-attribute-specs-table td ul li p span { font-size: 13px; line-height: 18px; font-weight: 400; color: #666666; }
table#product-attribute-specs-table td ul li, table#product-attribute-specs-table td ul li p, table#product-attribute-specs-table td ul li p span { font-size: 13px !important; line-height: 18px !important; font-weight: 400 !important; color: #666666 !important; }
@media screen and (max-width:768px) {
    .product.info.detailed table, .product.info.detailed table tbody, .product.info.detailed table tr, .product.info.detailed table td, .product.info.detailed table th { display: block; width: 100%; }
    .product.info.detailed table td, .product.info.detailed table th { width: 100%; display: block; text-align: left; }
    table#product-attribute-specs-table td { padding: 10px !important; }
}
.banner-style05.space-lg{
 margin-bottom: 14px   
}
.banner_6 {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}
div#banner_4 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.banner_2 {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
.banner_5 {
    margin-bottom: 10px;
}
.row.banner_last {
    padding-left: 10px;
    padding-right: 10px;
}
/* Mobile header icon row — unified size, white, vertical align, even spacing (Apollo 2026) */
@media screen and (max-width: 767px) {
    #header-search-wrap.header-search-wrap,
    .page-header .header-search-wrap {
        align-items: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 6px 8px !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        white-space: nowrap !important;
        width: auto !important;
        float: none !important;
        z-index: 802 !important;
    }

    #header-search-wrap.header-search-wrap > *,
    .page-header .header-search-wrap > * {
        align-self: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    /* Phone — CodazonFont glyph, same optical size as search */
    #header-search-wrap .mobile_link,
    .page-header .header-search-wrap .mobile_link {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 30px !important;
        height: 30px !important;
        justify-content: center !important;
        width: 30px !important;
    }

    #header-search-wrap .mobile_link a,
    .page-header .header-search-wrap .mobile_link a {
        align-items: center !important;
        box-sizing: border-box !important;
        color: transparent !important;
        display: inline-flex !important;
        font-size: 0 !important;
        height: 30px !important;
        justify-content: center !important;
        line-height: 1 !important;
        width: 30px !important;
        text-decoration: none !important;
    }

    #header-search-wrap .mobile_link a:before,
    .page-header .header-search-wrap .mobile_link a:before {
        color: #ffffff !important;
        content: "\e995" !important;
        display: block !important;
        font-family: 'CodazonFont' !important;
        font-size: 19px !important;
        font-style: normal !important;
        font-weight: normal !important;
        line-height: 1 !important;
        margin: 0 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    #header-search-wrap .mobile_link .fa-phone,
    .page-header .header-search-wrap .mobile_link .fa-phone {
        display: none !important;
    }

    /* Amasty Xsearch — loupe matches row height */
    #header-search-wrap .amsearch-wrapper-block,
    .page-header .header-search-wrap .amsearch-wrapper-block {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    #header-search-wrap .amsearch-input-wrapper,
    .page-header .header-search-wrap .amsearch-input-wrapper {
        align-items: center !important;
        display: flex !important;
        min-height: 30px !important;
    }

    #header-search-wrap .amsearch-button.-loupe,
    .page-header .header-search-wrap .amsearch-button.-loupe {
        height: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        background-size: 19px 19px !important;
        background-position: center !important;
        margin: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 6px !important;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
    }

    /* Minicart trigger — match search / phone */
    #header-search-wrap .mobi-cart-wrapper,
    .page-header .header-search-wrap .mobi-cart-wrapper {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 30px !important;
        height: 30px !important;
        justify-content: center !important;
        width: 30px !important;
        line-height: 1 !important;
    }

    #header-search-wrap .mobi-cart-wrapper .action.showcart,
    .page-header .header-search-wrap .mobi-cart-wrapper .action.showcart {
        align-items: center !important;
        display: flex !important;
        height: 30px !important;
        justify-content: center !important;
        width: 30px !important;
        line-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header-search-wrap .mobi-cart-wrapper .action.showcart:before,
    .page-header .header-search-wrap .mobi-cart-wrapper .action.showcart:before {
        color: #ffffff !important;
        font-size: 19px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    /* Codazon search-trigger if present in same strip */
    #header-search-wrap .search-trigger,
    .page-header .header-search-wrap .search-trigger {
        align-items: center !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        height: 30px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 30px !important;
        min-width: 30px !important;
        color: transparent !important;
        font-size: 0 !important;
        border: none !important;
        background: transparent !important;
        line-height: 1 !important;
    }

    #header-search-wrap .search-trigger:before,
    .page-header .header-search-wrap .search-trigger:before {
        color: #ffffff !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    #mobi_cart-wrapper {
        order: unset !important;
    }
}

/* Mobile header: unify phone + search-toggle + cart — size, colour, alignment, spacing (2026-04) */
@media screen and (max-width: 767px) {
    .page-header .header.panel #header-search-wrap,
    #header-search-wrap.header-search-wrap {
        align-items: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: clamp(10px, 4vw, 18px) !important;
        justify-content: space-evenly !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Prevent tablet/desktop absolute cart from breaking the row */
    .page-header #header-search-wrap .mobi-cart-wrapper,
    #header-search-wrap .mobi-cart-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Fixed-width slots for default Codazon markup (avoid clipping Amasty wrapper) */
    #header-search-wrap > .mobile_link,
    #header-search-wrap > .header-search,
    #header-search-wrap > #mobi_cart-wrapper {
        align-self: center !important;
        flex: 0 0 30px !important;
        margin: 0 !important;
    }

    #header-search-wrap > .amsearch-wrapper-block {
        align-self: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        max-width: 40px !important;
        min-width: 30px !important;
    }

    /* Phone — hide any Font Awesome variant; CodazonFont glyph only */
    #header-search-wrap .mobile_link a [class*="fa"] {
        display: none !important;
    }

    #header-search-wrap .mobile_link a:before {
        color: #ffffff !important;
        content: "\e995" !important;
        font-family: 'CodazonFont' !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    /* Search — mobile uses a.search-toggle (not .search-trigger) in form.mini.phtml */
    #header-search-wrap .header-search {
        align-items: center !important;
        display: flex !important;
        height: 30px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }

    #header-search-wrap .header-search .search-toggle {
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        color: transparent !important;
        display: inline-flex !important;
        font-size: 0 !important;
        height: 30px !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 30px !important;
        min-width: 30px !important;
        text-decoration: none !important;
    }

    #header-search-wrap .header-search .search-toggle:before {
        color: #ffffff !important;
        content: "\e98f" !important;
        display: inline-block !important;
        font-family: 'CodazonFont' !important;
        font-size: 19px !important;
        font-style: normal !important;
        font-weight: normal !important;
        line-height: 1 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* Cart — same optical size as other glyphs */
    #header-search-wrap .mobi-cart-wrapper .action.showcart {
        align-items: center !important;
        display: flex !important;
        height: 30px !important;
        justify-content: center !important;
        width: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header-search-wrap .mobi-cart-wrapper .action.showcart:before {
        color: #ffffff !important;
        font-size: 19px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
}

/* Phone icon — utilities/phone-link now uses cdzfont-theme-phone-call span (see apollohifi Magento_Theme template) */
@media screen and (max-width: 767px) {
    #header-search-wrap .mobile_link .mobile-phone-link {
        align-items: center !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        height: 30px !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 30px !important;
        text-decoration: none !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    #header-search-wrap .mobile_link .cdzfont-theme-phone-call {
        display: inline-block !important;
        font-size: 19px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    #header-search-wrap .mobile_link .cdzfont-theme-phone-call:before {
        color: #ffffff !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }
}

/* ===== APOLLO-PDP START ===== */
/* ==========================================================================
   APOLLO HI FI — PDP / HEADER / MEGA MENU RESTYLE
   Target: design_handoff_product_page/design/Apollo Product Page v1.dc.html
   Author: build 2026-09-20. Stage only.

   Delivery: this file is the SOURCE OF TRUTH (tracked in git). It is deployed
   by appending between the APOLLO markers in pub/media/codazon/custom-styles.css,
   which Codazon ThemeLayoutPro emits last as <link id="cdz-custom-css">, so it
   wins the cascade without a static-content deploy.

   Design tokens (from the design file, not the README — the README's v1 table
   carries v3's values for the gallery/buy box):
     brand #0188cc / hover #0176b0   ink #16181c / deep #0f1114
     page  #f4f5f7  surface #fff     border #e3e6ea / #eceef1 / #f0f2f4
     alert #d92b2b  alert-bg #fdf1f1 alert-text #8f2020
     green #0a7a45  green-bg #e6f4ec action-green #0a8f4d
     yellow #ffc233 muted #6b7076    disabled #9aa0a7
   border-radius is 0 EVERYWHERE by design. The theme ships 140 radius
   declarations in product-view-styles.css which loads before this file.
   ========================================================================== */

/* ---------- 1. Self-hosted type ------------------------------------------
   Served from /media/apollo/fonts/ so it satisfies font-src 'self' and does
   not depend on Google Fonts, which the stage CSP intersection blocks.      */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('/media/apollo/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('/media/apollo/fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('/media/apollo/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('/media/apollo/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('/media/apollo/fonts/barlow-cond-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/media/apollo/fonts/barlow-cond-700.woff2') format('woff2')}

:root{
  --ap-brand:#0188cc; --ap-brand-hover:#0176b0;
  --ap-ink:#16181c;   --ap-ink-deep:#0f1114;
  --ap-page:#f4f5f7;  --ap-surface:#fff;
  --ap-border:#e3e6ea; --ap-border-lt:#eceef1; --ap-border-xlt:#f0f2f4; --ap-border-in:#d6dade;
  --ap-text2:#3a3f46; --ap-text3:#4a4f57; --ap-muted:#6b7076; --ap-disabled:#9aa0a7;
  --ap-red:#d92b2b; --ap-red-bg:#fdf1f1; --ap-red-tx:#8f2020;
  --ap-green:#0a7a45; --ap-green-bg:#e6f4ec; --ap-action:#0a8f4d;
  --ap-yellow:#ffc233;
  --ap-c:'Barlow Condensed',Barlow,Helvetica,Arial,sans-serif;
  --ap-b:'Barlow',Helvetica,Arial,sans-serif;
}

/* ---------- 2. Page ground + square corners ------------------------------ */

body.catalog-product-view{background:var(--ap-page);font-family:var(--ap-b)}

/* The design is entirely square. Scope the reset to the PDP + header so we do
   not disturb checkout/account, which are out of scope for this change. */
body.catalog-product-view .column.main :where(a,button,input,select,img,div,span,table,td,th),
body.catalog-product-view .product.info.detailed :where(a,button,div,span,table,td,th),
.page-header :where(a,button,input,div,span){border-radius:0 !important}
body.catalog-product-view .apollo-pulse-dot,
body.catalog-product-view .apollo-dot{border-radius:50% !important}
/* the cart badge is the other thing the square-corners reset above was
   flattening - at (0,1,0) it caught .counter.qty in BOTH headers */
.page-header .action.showcart .counter.qty{border-radius:9px !important}

/* ---------- 3. Two-column split ------------------------------------------
   Theme ships gallery col-sm-10 (41.7%) / main col-sm-14 (58.3%).
   Design is gallery ~1.05fr / buy box 1fr. Only above the theme's 768 flip. */

@media (min-width:992px){
  body.catalog-product-view .column.main > .row.main-inner{
    display:flex;align-items:flex-start;gap:28px;margin-left:0;margin-right:0}
  body.catalog-product-view .product-media-wrapper.col-sm-10{
    flex:0 0 51.2%;max-width:51.2%;width:51.2%;padding-left:0}
  body.catalog-product-view .product-main-wrapper.col-sm-14{
    flex:1 1 auto;max-width:48.8%;width:48.8%;padding-right:0}
}

/* ---------- 4. Gallery card ---------------------------------------------- */

body.catalog-product-view .product.media.full-width{
  background:var(--ap-surface);border:1px solid var(--ap-border);padding:0;position:relative}
body.catalog-product-view .gallery-container{position:relative;padding:18px}
body.catalog-product-view .gallery-placeholder__image,
body.catalog-product-view .fotorama__img{object-fit:contain !important}

/* Scarcity bar + SAVE badge. Rendered by apollo_pdp_banner.phtml; the CSS is
   here so the two travel together. */
.apollo-scarcity-bar{
  display:flex;align-items:center;gap:10px;background:var(--ap-red);color:#fff;
  font-family:var(--ap-c);font-size:21px;font-weight:700;letter-spacing:.1em;
  padding:9px 18px;text-transform:uppercase;line-height:1.1}
.apollo-scarcity-bar .apollo-dot{
  width:8px;height:8px;background:#fff;display:inline-block;flex:0 0 8px;
  animation:apollo-pulse 1.4s infinite}
@keyframes apollo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .apollo-scarcity-bar .apollo-dot,.apollo-note .apollo-dot{animation:none}
}
.apollo-save-badge{
  position:absolute;top:0;right:0;z-index:3;background:var(--ap-ink);color:#fff;
  font-family:var(--ap-c);font-weight:700;line-height:1;padding:12px 16px;text-align:center}
.apollo-save-badge b{display:block;font-size:13px;letter-spacing:.14em;font-weight:700}
.apollo-save-badge s{display:block;font-size:26px;text-decoration:none;margin-top:3px}

/* ---------- 5. Buy box ---------------------------------------------------- */

body.catalog-product-view .product-main-wrapper .product-info-main{
  background:var(--ap-surface);border:1px solid var(--ap-border);
  padding:30px 32px 34px;margin:0}
body.catalog-product-view .product-main-wrapper .product-left.col-sm-24{
  width:100%;max-width:100%;flex:0 0 100%;padding:0}

/* Brand: the theme renders an <img> logo; the design uses a wordmark. Keep the
   real brand image (it is catalog data) but hold it to the design's scale. */
body.catalog-product-view .product-brand-info{margin:0 0 12px;padding:0;border:0}
body.catalog-product-view .product-brand-info .brand-img{max-height:34px;width:auto}

body.catalog-product-view .page-title-wrapper.product .page-title,
body.catalog-product-view h1.page-title span.base{
  font-family:var(--ap-c);font-size:46px;font-weight:700;line-height:1.02;
  letter-spacing:.01em;color:var(--ap-ink);text-wrap:pretty;margin:0 0 10px;display:block}

body.catalog-product-view .product.attribute.overview,
body.catalog-product-view .product-info-main .product.overview{
  font-size:15px;line-height:1.55;color:var(--ap-text2);margin:0 0 18px;max-width:52ch}

/* Price */
body.catalog-product-view .product-info-main .price-box{margin:0 0 6px;display:flex;
  align-items:baseline;flex-wrap:wrap;gap:14px}
body.catalog-product-view .product-info-main .price-box .special-price .price,
body.catalog-product-view .product-info-main .price-box .price-final_price .price{
  font-family:var(--ap-c);font-size:64px;font-weight:700;line-height:.86;color:var(--ap-ink)}
body.catalog-product-view .product-info-main .price-box .old-price .price{
  font-size:22px;font-weight:400;color:var(--ap-disabled);text-decoration:line-through;
  font-family:var(--ap-b)}
body.catalog-product-view .product-info-main .price-box .price-label{display:none}

/* SAVE bar — rendered by the banner template when a special price exists. */
.apollo-save-bar{display:flex;align-items:stretch;margin:14px 0 16px}
.apollo-save-bar .ap-amt{
  background:var(--ap-yellow);color:var(--ap-ink);font-family:var(--ap-c);
  font-size:26px;font-weight:700;letter-spacing:.02em;padding:8px 16px;
  display:flex;align-items:center;line-height:1}
.apollo-save-bar .ap-pct{
  background:var(--ap-ink);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.08em;padding:8px 16px;display:flex;align-items:center;line-height:1.25}

/* Scarcity note */
.apollo-note{
  display:flex;align-items:center;gap:10px;background:var(--ap-red-bg);
  border-left:4px solid var(--ap-red);padding:12px 16px;margin:0 0 18px;
  font-size:14px;font-weight:600;color:var(--ap-red-tx)}
.apollo-note .apollo-dot{width:9px;height:9px;background:var(--ap-red);
  display:inline-block;flex:0 0 9px;animation:apollo-pulse 1.4s infinite}

/* Dealer badge */
.apollo-dealer{
  display:inline-block;background:var(--ap-green-bg);color:var(--ap-green);
  font-size:12px;font-weight:700;letter-spacing:.08em;padding:6px 12px;
  text-transform:uppercase;margin:0 0 14px}

/* Benefit ticks — driven by real attributes (warranty / shipping / stock). */
.apollo-ticks{list-style:none;margin:0 0 20px;padding:0}
.apollo-ticks li{
  position:relative;padding-left:26px;font-size:15px;color:var(--ap-text2);
  line-height:1.5;margin:0 0 7px}
.apollo-ticks li:before{
  content:"\2713";position:absolute;left:0;top:0;color:var(--ap-green);font-weight:700}

/* Qty stepper */
/* .qty-ctl is the wrapper around each stepper button, not a second box - it
   must NOT get the border/overflow treatment. See section 35, which undoes the
   damage this grouping caused. */
body.catalog-product-view .box-tocart .cart-qty{
  border:1px solid var(--ap-border-in);display:inline-flex;align-items:stretch;overflow:hidden}
body.catalog-product-view .box-tocart .qty-ctl button,
body.catalog-product-view .box-tocart button[data-role="change_cart_qty"]{
  width:40px;height:44px;background:transparent;border:0;color:var(--ap-ink);
  font-size:18px;line-height:1;cursor:pointer;transition:background .15s}
body.catalog-product-view .box-tocart .qty-ctl button:hover{background:var(--ap-border-xlt)}
body.catalog-product-view .box-tocart input.qty,
body.catalog-product-view .box-tocart .input-text.qty{
  width:52px;height:44px;text-align:center;font-size:16px;font-weight:600;
  border:0;border-left:1px solid var(--ap-border-in);border-right:1px solid var(--ap-border-in);
  box-shadow:none;padding:0;color:var(--ap-ink)}
body.catalog-product-view .box-tocart .field.qty>.label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ap-muted);margin:0 12px 0 0;align-self:center}

/* CTAs. The theme paints both Add to Cart and Buy Now black; the design makes
   Buy Now the blue primary and Add to Cart the outlined secondary. */
body.catalog-product-view .box-tocart .action.primary.tocart,
body.catalog-product-view .box-tocart button.action.tocart{
  height:52px;background:transparent;border:2px solid var(--ap-ink);color:var(--ap-ink);
  font-family:var(--ap-c);font-size:20px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;transition:background .15s,color .15s;padding:0 22px}
body.catalog-product-view .box-tocart .action.primary.tocart:hover{
  background:var(--ap-ink);color:#fff}
body.catalog-product-view .box-tocart .action.instant-purchase,
body.catalog-product-view .box-tocart .action.buy-now,
body.catalog-product-view .box-tocart .apollo-buynow{
  height:64px;width:100%;background:var(--ap-brand);border:0;color:#fff;
  font-family:var(--ap-c);font-size:26px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;transition:background .15s;margin-bottom:10px}
body.catalog-product-view .box-tocart .action.buy-now:hover,
body.catalog-product-view .box-tocart .apollo-buynow:hover{background:var(--ap-brand-hover)}

/* Utility links row */
.apollo-utils{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--ap-border-lt)}
.apollo-utils a{font-size:13px;color:var(--ap-muted);text-decoration:none}
.apollo-utils a:hover{color:var(--ap-brand);text-decoration:underline}

/* ---------- 6. Trust strip ----------------------------------------------- */

.apollo-trust{background:var(--ap-ink);padding:26px 24px;margin:34px 0 0}
.apollo-trust .ap-in{
  max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.apollo-trust h3{
  font-family:var(--ap-c);font-size:20px;font-weight:700;letter-spacing:.04em;
  color:var(--ap-yellow);margin:0 0 5px;text-transform:uppercase}
.apollo-trust p{font-size:13px;color:#b6bcc4;margin:0;line-height:1.5}
@media (max-width:991px){
  .apollo-trust .ap-in{grid-template-columns:repeat(2,1fr);gap:16px 14px}
  .apollo-trust h3{font-size:16px}
  .apollo-trust p{font-size:12px}
}

/* ---------- 7. Tabs ------------------------------------------------------- */

body.catalog-product-view .product.info.detailed{
  background:var(--ap-surface);border:1px solid var(--ap-border);margin:34px 0 0;padding:0}
body.catalog-product-view .product.data.items{margin:0;border:0}
body.catalog-product-view .product.data.items > .item.title{
  margin:0;float:none;display:inline-block}
body.catalog-product-view .product.data.items > .item.title > .switch{
  font-family:var(--ap-c);font-size:19px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ap-muted);background:transparent;border:0;
  border-bottom:3px solid transparent;padding:16px 20px;height:auto;line-height:1.2;
  transition:color .15s,border-color .15s}
body.catalog-product-view .product.data.items > .item.title > .switch:hover{color:var(--ap-ink)}
body.catalog-product-view .product.data.items > .item.title.active > .switch{
  color:var(--ap-ink);border-bottom-color:var(--ap-brand);background:transparent}
body.catalog-product-view .product.data.items > .item.content{
  background:var(--ap-surface);border:0;border-top:1px solid var(--ap-border);
  padding:30px 34px 38px;margin:0}

/* Description */
body.catalog-product-view #description{font-size:16px;line-height:1.6;color:var(--ap-text2)}
body.catalog-product-view #description p{max-width:1000px;margin:0 0 16px;font-size:16px;
  line-height:1.6;color:var(--ap-text2)}

/* ---------- 8. Render adapter: restyle the LEGACY spec/feature tables ------
   The existing data is a user-authored <table> nested inside td.col.data, with
   inline styles. Group headings are a colspan=2 cell (#ecf0f1 background) that
   contains a <strong>. We override the inline styling to the design's
   group-heading / key / value treatment WITHOUT touching the data, so the new
   look ships against today's catalogue with no migration.
   Inline styles require !important here — that is deliberate, not laziness.   */

body.catalog-product-view #specification .additional-attributes-wrapper,
body.catalog-product-view #additional .additional-attributes-wrapper{
  overflow-x:auto;border:0;margin:0}
body.catalog-product-view #specification .table-caption,
body.catalog-product-view #additional .table-caption{display:none}
body.catalog-product-view table.additional-attributes,
body.catalog-product-view table.additional-attributes > tbody > tr > td.col.data{
  border:0 !important;padding:0 !important;background:transparent !important;width:100% !important}

/* the user-authored inner table */
body.catalog-product-view td.col.data table{
  width:100% !important;height:auto !important;border-collapse:collapse !important;
  margin:0 !important;table-layout:fixed}
body.catalog-product-view td.col.data table td{
  height:auto !important;font-family:var(--ap-b) !important;vertical-align:top !important;
  padding:10px 14px !important;border:0 !important;
  border-bottom:1px solid var(--ap-border-xlt) !important;
  font-size:14px !important;line-height:1.45 !important;color:var(--ap-ink) !important;
  word-break:break-word}
body.catalog-product-view td.col.data table tr > td:first-child{
  width:42% !important;font-size:13px !important;font-weight:400 !important;
  color:var(--ap-muted) !important}
body.catalog-product-view td.col.data table tr > td:last-child{
  font-weight:600 !important}

/* group heading rows: the colspan=2 cell */
body.catalog-product-view td.col.data table td[colspan]{
  width:100% !important;background:var(--ap-surface) !important;
  border-bottom:2px solid var(--ap-ink) !important;
  padding:26px 0 7px !important;color:var(--ap-ink) !important}
body.catalog-product-view td.col.data table td[colspan] strong,
body.catalog-product-view td.col.data table td[colspan] span,
body.catalog-product-view td.col.data table td[colspan] strong span{
  font-family:var(--ap-c) !important;font-size:21px !important;font-weight:700 !important;
  letter-spacing:.04em !important;text-transform:uppercase !important;
  color:var(--ap-ink) !important;background:transparent !important}
body.catalog-product-view td.col.data table tr:first-child td[colspan]{padding-top:0 !important}

/* two-column spec sheet on desktop, exactly as the design */
@media (min-width:992px){
  body.catalog-product-view #specification td.col.data > table > tbody{
    column-count:2;column-gap:44px;display:block}
  body.catalog-product-view #specification td.col.data > table > tbody > tr{
    display:block;break-inside:avoid}
  body.catalog-product-view #specification td.col.data > table > tbody > tr > td{
    display:block}
  body.catalog-product-view #specification td.col.data > table > tbody > tr:not(:has(td[colspan])){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;
    align-items:start}
}
/* mobile: stack key above value */
@media (max-width:991px){
  body.catalog-product-view td.col.data table,
  body.catalog-product-view td.col.data table tbody,
  body.catalog-product-view td.col.data table tr,
  body.catalog-product-view td.col.data table td{display:block !important;width:100% !important}
  body.catalog-product-view td.col.data table tr > td:first-child{
    padding-bottom:2px !important;border-bottom:0 !important;font-size:12px !important}
  body.catalog-product-view td.col.data table tr > td:last-child{padding-top:0 !important}
}

/* Features panel: the design numbers each feature. The legacy data is a 2-col
   table of bullet text, so we present it as a clean two-column feature grid
   rather than faking numbers we do not have. */
@media (min-width:992px){
  body.catalog-product-view #additional td.col.data > table > tbody{
    column-count:2;column-gap:44px;display:block}
  body.catalog-product-view #additional td.col.data > table > tbody > tr{
    display:block;break-inside:avoid;margin-bottom:4px}
}
body.catalog-product-view #additional td.col.data table td{
  font-size:15px !important;line-height:1.55 !important;color:var(--ap-text3) !important}
body.catalog-product-view #additional td.col.data table tr > td:first-child{
  width:auto !important;font-weight:600 !important;color:var(--ap-ink) !important;
  font-size:15px !important}

/* ---------- 9. Closing CTA band ------------------------------------------ */

.apollo-cta{background:var(--ap-brand);padding:40px 24px;margin-top:34px}
.apollo-cta .ap-in{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.apollo-cta h2{
  font-family:var(--ap-c);font-size:38px;font-weight:700;line-height:1.05;
  color:#fff;margin:0 0 6px;text-wrap:pretty}
.apollo-cta p{font-size:16px;color:#e6f4fc;margin:0}
.apollo-cta .ap-btns{display:flex;gap:14px;flex-wrap:wrap}
.apollo-cta .ap-btns a{
  height:60px;display:inline-flex;align-items:center;padding:0 30px;
  font-family:var(--ap-c);font-size:24px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;transition:background .15s,color .15s}
.apollo-cta .ap-btns .ap-primary{background:var(--ap-ink);color:#fff}
.apollo-cta .ap-btns .ap-primary:hover{background:var(--ap-action)}
.apollo-cta .ap-btns .ap-ghost{border:2px solid #fff;color:#fff}
.apollo-cta .ap-btns .ap-ghost:hover{background:#fff;color:var(--ap-brand)}

/* ==========================================================================
   HEADER + MEGA MENU
   Restyle only. Every dynamic affordance keeps its existing wiring: menu items
   come from codazon_megamenu row 54, search from Amasty_Xsearch, cart from the
   Knockout minicart, account from customer private content.
   ========================================================================== */

/* Utility bar */
.page-header .header-top-panel,
.page-header .top-panel-wrap,
.page-header .panel.header{
  background:#000 !important;color:#fff;font-family:var(--ap-b)}
.page-header .header-top-panel a,
.page-header .panel.header a{color:#fff}
.page-header .header-top-panel,
.page-header .panel.header{
  font-size:13px;font-weight:700;letter-spacing:.02em;padding:9px 24px}

/* Primary nav bar */
.page-header .header-panel-main,
.page-header .nav-sections,
.page-header .header-primary{background:var(--ap-brand) !important}

.page-header .navigation .level0 > .level-top,
.cdz-megamenu .nav-item > a.level-top,
.cdz-horizontal-menu .nav-item > a{
  font-family:var(--ap-b) !important;font-size:12.5px !important;font-weight:600 !important;
  letter-spacing:.02em;text-transform:uppercase !important;color:#fff !important;
  padding:0 10px !important;transition:background .15s}
.page-header .navigation .level0 > .level-top:hover,
.page-header .navigation .level0.active > .level-top,
.cdz-megamenu .nav-item:hover > a.level-top{
  background:var(--ap-brand-hover) !important;color:#fff !important}
.page-header .navigation .level0 > .level-top .ui-menu-icon,
.cdz-megamenu .nav-item > a .caret{font-size:9px !important;opacity:.75}

/* Mega-menu panel */
.cdz-megamenu .groupdrop,
.cdz-megamenu .cdz-dropdown,
.page-header .navigation .level0 .submenu{
  background:#fff !important;border:0 !important;
  border-top:3px solid var(--ap-ink) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;padding:26px 28px !important}
.cdz-megamenu .groupdrop-title,
.page-header .navigation .submenu .cdz-group-title{
  font-family:var(--ap-c) !important;font-size:18px !important;font-weight:700 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:var(--ap-ink) !important;border-bottom:2px solid var(--ap-brand) !important;
  padding-bottom:7px !important;margin-bottom:12px !important;display:block}
.cdz-megamenu .groupdrop-link,
.cdz-megamenu .groupdrop a,
.page-header .navigation .submenu a{
  font-family:var(--ap-b) !important;font-size:14px !important;color:#3a3f46 !important;
  padding:5px 0 !important;display:block;transition:color .12s}
.cdz-megamenu .groupdrop-link:hover,
.cdz-megamenu .groupdrop a:hover,
.page-header .navigation .submenu a:hover{color:var(--ap-brand) !important;background:transparent !important}

/* Promo card inside the mega menu */
.cdz-megamenu .groupdrop .cdz-promo,
.cdz-megamenu .groupdrop .promo-card{
  background:var(--ap-page) !important;border:1px solid var(--ap-border) !important;padding:18px}
.cdz-megamenu .groupdrop .cdz-promo .kicker{
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ap-brand);text-transform:uppercase}
.cdz-megamenu .groupdrop .cdz-promo .title{
  font-family:var(--ap-c);font-size:24px;font-weight:700;line-height:1.1;margin:6px 0 8px}
.cdz-megamenu .groupdrop .cdz-promo p{font-size:13px;line-height:1.5;color:var(--ap-muted);margin:0}

/* Cart count pill - design keeps this one rounded.
   The outer .counter.qty is the badge; .counter-number is only its text.
   Painting BOTH is what produced a green pill inside a 15x15 dark square with
   a 1px overhang on the empty-cart state. Paint the outer box, neutralise the
   inner, and pin both to 16px so they cannot disagree. */
.page-header .minicart-wrapper .counter.qty,
.page-header .action.showcart .counter.qty{
  /* --ap-green (#0a7a45), not --ap-action (#0a8f4d): white 11px/700 on the
     lighter green is 4.16:1 and fails 1.4.3 AA. This is not about the empty
     state - "1" fails identically once the cart fills. 5.41:1 here. */
  background:var(--ap-green) !important;color:#fff !important;border-radius:9px !important;
  height:16px !important;min-width:16px !important;line-height:16px !important;
  font-size:11px;font-weight:700}
.page-header .action.showcart .counter-number{
  background:transparent !important;border-radius:0 !important;
  height:auto !important;line-height:16px !important;color:#fff !important;
  font-size:11px;font-weight:700}

/* Mobile: 16px inputs stop iOS zooming on focus; 44px minimum tap targets. */
@media (max-width:767px){
  body.catalog-product-view input[type=text],
  body.catalog-product-view input[type=search],
  .page-header input[type=text],
  .page-header input[type=search],
  #header-search-wrap input{font-size:16px !important;height:44px !important}
  .page-header .nav-toggle,
  .page-header .minicart-wrapper .action.showcart,
  #header-search-wrap .mobile_link{min-width:44px;min-height:44px}
  body.catalog-product-view .page-title-wrapper.product .page-title,
  body.catalog-product-view h1.page-title span.base{font-size:34px}
  body.catalog-product-view .product-info-main .price-box .special-price .price,
  body.catalog-product-view .product-info-main .price-box .price-final_price .price{font-size:52px}
  body.catalog-product-view .product-main-wrapper .product-info-main{padding:20px 16px 24px}
  body.catalog-product-view .product.data.items > .item.content{padding:20px 16px 26px}
  .apollo-cta h2{font-size:28px}
  .apollo-cta .ap-btns a{height:52px;font-size:20px;padding:0 22px}
}

/* Focus visibility — the design file defines none. */
body.catalog-product-view a:focus-visible,
body.catalog-product-view button:focus-visible,
body.catalog-product-view input:focus-visible,
.page-header a:focus-visible,
.page-header button:focus-visible,
.sections.nav-sections a:focus-visible,
.sections.nav-sections button:focus-visible{
  /* the bar and the drawer are both painted brand blue, so a brand-blue ring
     was 1:1 against its own ground. White ring + dark outer keeps 3:1 on
     either. */
  outline:3px solid #fff !important;outline-offset:2px !important;
  box-shadow:0 0 0 6px rgba(15,17,20,.55) !important}

/* ---------- 10. Buy-box ordering + measured corrections -------------------
   Measured on stage 2026-09-20 against entity 8005:
     .product-info-main-inner children are
       [0] .product-info-price (brand)  [1] .product-add-form (title, price,
       qty, CTAs)  [3..6] the Apollo blocks, which land AFTER the form.
   The design wants the dealer badge above the title and the value messaging
   directly under the price. Title and price live INSIDE .product-add-form, so
   CSS can lift the badge to the top but cannot interleave into the form — the
   save bar / note / ticks therefore sit below the CTA rather than above it.
   Known gap; closing it properly needs the blocks split and positioned via
   layout XML against the inner form blocks, not a CSS fix.                   */

body.catalog-product-view .product-info-main-inner{display:flex;flex-direction:column}
body.catalog-product-view .product-info-main-inner > .apollo-dealer{order:-3;align-self:flex-start}
body.catalog-product-view .product-info-main-inner > .product-info-price{order:-2}
body.catalog-product-view .product-info-main-inner > .product-add-form{order:-1}
body.catalog-product-view .product-info-main-inner > .apollo-save-bar{order:1}
body.catalog-product-view .product-info-main-inner > .apollo-note{order:2}
body.catalog-product-view .product-info-main-inner > .apollo-ticks{order:3}

/* Gallery: theme renders fotorama at 623x467. Design stage is 520px tall.
   Raise the stage and let fotorama keep its own inline width handling — we set
   min-height only, so its resize handler is not fighting a hard height. */
@media (min-width:992px){
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{min-height:520px !important}
  body.catalog-product-view .fotorama__stage .fotorama__img{object-fit:contain !important}
  body.catalog-product-view .fotorama__nav-wrap{margin-top:14px}
  body.catalog-product-view .fotorama__nav__frame--thumb{padding:6px !important}
  body.catalog-product-view .fotorama__thumb{border:1px solid #2c3037}
  body.catalog-product-view .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb{
    border:2px solid #0188cc}
}

/* The scarcity bar and SAVE badge sit in .product.media.full-width, which is
   position:relative — anchor the badge to the card, not the page. */
body.catalog-product-view .product.media.full-width{position:relative}
body.catalog-product-view .product.media.full-width > .apollo-scarcity-bar{
  position:relative;z-index:2}

/* Collapse the empty related-products region. 8005 has zero related products
   and only 358 of 1,562 live products have any, so this gap is the common case,
   not the exception — it was leaving ~307px of dead space above the trust strip. */
body.catalog-product-view .block.related:not(:has(.item.product)){display:none !important}
body.catalog-product-view .block.related:empty{display:none !important}

/* ---------- 11. Defeat the incumbent ID rule ------------------------------
   custom-styles.css already contains, ABOVE this block:
     #product-attribute-specs-table, #product-attribute-specs-table *
       { font-family: Roboto,"Helvetica Neue",Verdana,Arial !important }
   An ID selector (1,0,1) outranks our (0,4,5) regardless of !important, so the
   group headings kept Roboto while our size/weight/transform applied. Re-state
   the typography at ID specificity. Do NOT delete their rule — it is the
   client's and may be load-bearing on other templates.                        */

body.catalog-product-view #product-attribute-specs-table td[colspan],
body.catalog-product-view #product-attribute-specs-table td[colspan] strong,
body.catalog-product-view #product-attribute-specs-table td[colspan] span,
body.catalog-product-view #product-attribute-specs-table td[colspan] strong span{
  font-family:'Barlow Condensed',Barlow,Helvetica,Arial,sans-serif !important;
  font-size:21px !important;font-weight:700 !important;letter-spacing:.04em !important;
  text-transform:uppercase !important;color:#16181c !important;background:transparent !important}

body.catalog-product-view #product-attribute-specs-table tr > td:first-child,
body.catalog-product-view #product-attribute-specs-table tr > td:first-child *{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:400 !important;color:#6b7076 !important}

body.catalog-product-view #product-attribute-specs-table tr > td:last-child,
body.catalog-product-view #product-attribute-specs-table tr > td:last-child *{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:14px !important;font-weight:600 !important;color:#16181c !important}

/* the group row is a single colspan cell, so the :first-child rule above would
   otherwise shrink it back to 13px — restate after it */
body.catalog-product-view #product-attribute-specs-table tr > td[colspan]:first-child,
body.catalog-product-view #product-attribute-specs-table tr > td[colspan]:first-child strong,
body.catalog-product-view #product-attribute-specs-table tr > td[colspan]:first-child span{
  font-family:'Barlow Condensed',Barlow,Helvetica,Arial,sans-serif !important;
  font-size:21px !important;font-weight:700 !important;color:#16181c !important}

/* ---------- 12. Header corrections (measured on stage, not assumed) --------
   Correcting section 11 above. Measured DOM:
     .header-top    32px  — the utility bar. ALREADY #000 from the theme.
     .panel.header  89px  — the MAIN NAV ROW, not a utility bar.
     .cdz-navigation      — nav; links are a.menu-link inside li.item.level0.level-top
   Section 11 targeted `.panel.header` as the utility bar and painted the nav
   black. This restores it to brand blue and styles the real link elements.   */

.page-header .panel.header{background:#0188cc !important}
.page-header .header-top{background:#000 !important}
.page-header .container.sticky-menu .panel.wrapper{background:#0188cc !important}

/* Nav items — design says 12.5px/600 uppercase, padding 0 10px, hover #0176b0.
   Raised to 14.5px on request 2026-09-22; everything else kept. */
.page-header .cdz-navigation .menu-link{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:12.5px !important;font-weight:600 !important;letter-spacing:.02em !important;
  text-transform:uppercase !important;color:#fff !important;padding:0 10px !important;
  transition:background .15s}
.page-header .cdz-navigation li.item.level0.level-top:hover > .menu-link,
.page-header .cdz-navigation li.item.level0.level-top.active > .menu-link{
  background:#0176b0 !important;color:#fff !important}

/* Mega-menu panel — Codazon renders the dropdown under .cdz-navigation */
.page-header .cdz-navigation .cdz-dropdown,
.page-header .cdz-navigation .level0 > .submenu,
.page-header .cdz-navigation .cdz-menu-dropdown{
  background:#fff !important;border:0 !important;border-top:3px solid #16181c !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important}
.page-header .cdz-navigation .cdz-dropdown a,
.page-header .cdz-navigation .level0 > .submenu a{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:14px !important;
  color:#3a3f46 !important;text-transform:none !important}
.page-header .cdz-navigation .cdz-dropdown a:hover,
.page-header .cdz-navigation .level0 > .submenu a:hover{color:#0188cc !important}

/* Benefit ticks lost their font to a theme list rule — restate at higher
   specificity, matching the design's 15px body. */
body.catalog-product-view ul.apollo-ticks,
body.catalog-product-view ul.apollo-ticks li{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:15px !important;color:#3a3f46 !important;list-style:none !important}

/* ==========================================================================
   13. EXACT-SPEC CORRECTIONS — read off design/Apollo Product Page v1.dc.html
   Sections 4/5/7 above were built from the README. The README is wrong for v1
   (it carries v3's values). These are the literal inline styles from the
   design file, lines 260-272 (gallery) and 357-361 + tabStyle() (tabs).
   ========================================================================== */

/* ---- 13a. Gallery stage: height 520px, padding 20px, image fills it -------
   design: <div style="height:520px; background:#fff; display:flex;
            align-items:center; justify-content:center; padding:20px">
            <img style="max-width:100%; max-height:100%; object-fit:contain">  */

body.catalog-product-view .gallery-container{padding:0 !important}
body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{
  height:520px !important;min-height:520px !important;background:#fff !important}
body.catalog-product-view .fotorama__stage__frame{
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:20px !important}
/* fotorama absolutely-positions and transforms the img; neutralise that so the
   picture actually fills the 480px of usable stage height instead of sitting
   small in the middle. */
body.catalog-product-view .fotorama__stage__frame .fotorama__img{
  position:static !important;transform:none !important;
  width:auto !important;height:auto !important;
  max-width:100% !important;max-height:480px !important;
  object-fit:contain !important;margin:0 !important;left:auto !important;top:auto !important}

/* thumbnails: 3-up grid, 92px tall, active red */
body.catalog-product-view .fotorama__nav-wrap{margin-top:14px !important}
body.catalog-product-view .fotorama__nav--thumbs .fotorama__nav__frame{
  height:92px !important;padding:6px !important;background:#fff !important;
  border:1px solid #e3e6ea !important}
body.catalog-product-view .fotorama__nav--thumbs .fotorama__nav__frame.fotorama__active{
  border:2px solid #0188cc !important}
body.catalog-product-view .fotorama__thumb{background:#fff !important;border:0 !important}

/* ---- 13b. Scarcity bar is an OVERLAY, not a full-width bar ----------------
   design: position:absolute; top:0; left:0; z-index:2; background:#d92b2b;
           Barlow Condensed 22px/700; letter-spacing:.08em; padding:8px 16px   */

body.catalog-product-view .apollo-scarcity-bar{
  position:absolute !important;top:0 !important;left:0 !important;z-index:4 !important;
  background:#d92b2b !important;color:#fff !important;
  font-family:'Barlow Condensed',Barlow,sans-serif !important;
  font-size:22px !important;font-weight:700 !important;letter-spacing:.08em !important;
  padding:8px 16px !important;line-height:1.15 !important;width:auto !important;
  display:flex !important;align-items:center !important;gap:9px !important}

/* ---- 13c. SAVE badge: 34px, "SAVE" in #ffc233, amount white -------------- */

body.catalog-product-view .apollo-save-badge{
  position:absolute !important;top:0 !important;right:0 !important;z-index:4 !important;
  background:#16181c !important;padding:12px 16px !important;text-align:center !important}
body.catalog-product-view .apollo-save-badge b{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;font-size:34px !important;
  line-height:.95 !important;font-weight:700 !important;color:#ffc233 !important;
  letter-spacing:0 !important;display:block}
body.catalog-product-view .apollo-save-badge s{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;font-size:34px !important;
  line-height:1 !important;font-weight:700 !important;color:#fff !important;
  text-decoration:none !important;display:block;margin:0 !important}

/* ---- 13d. Tabs: Barlow 14px/700, inset shadow (NOT border-bottom) ---------
   design tabStyle(): padding:18px 22px; border:0; background:transparent;
     font-family:Barlow; font-size:14px; font-weight:700; letter-spacing:.08em;
     active  -> color:#16181c; box-shadow: inset 0 -3px 0 #0188cc;
     inactive-> color:#8a9099
   strip:  display:flex; gap:6px; border-bottom:1px solid #e3e6ea; padding:0 26px */

body.catalog-product-view .product.data.items{
  display:flex !important;flex-wrap:wrap !important;gap:6px !important;
  border-bottom:1px solid #e3e6ea !important;padding:0 26px !important;margin:0 !important}
body.catalog-product-view .product.data.items > .item.title{
  margin:0 !important;float:none !important;border:0 !important;background:transparent !important}
body.catalog-product-view .product.data.items > .item.title > .switch{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:14px !important;font-weight:700 !important;letter-spacing:.08em !important;
  text-transform:uppercase !important;color:#8a9099 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:18px 22px !important;height:auto !important;line-height:1.2 !important}
body.catalog-product-view .product.data.items > .item.title.active > .switch,
body.catalog-product-view .product.data.items > .item.title > .switch:hover{
  color:#16181c !important;background:transparent !important;
  box-shadow:inset 0 -3px 0 #0188cc !important;border:0 !important}

/* panel: the content divs are siblings of the titles inside the same flex
   container, so force them full-width onto their own row. */
body.catalog-product-view .product.data.items > .item.content{
  flex:0 0 100% !important;width:100% !important;order:99;
  background:#fff !important;border:0 !important;margin:0 !important;
  padding:30px 34px 38px !important}

/* description panel typography */
body.catalog-product-view #description h2{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;font-size:30px !important;
  font-weight:700 !important;letter-spacing:.01em !important;margin:0 0 14px !important;
  color:#16181c !important;text-wrap:pretty}
body.catalog-product-view #description,
body.catalog-product-view #description p{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:16px !important;
  line-height:1.6 !important;color:#3a3f46 !important;max-width:1000px}

/* ==========================================================================
   14. SPEC + FEATURE PANELS — exact v1 markup, emitted by apollo-pdp-adapter.js
   Literal values from design/Apollo Product Page v1.dc.html (specs block and
   features block). The legacy tables are hidden (kept in DOM for SEO) and the
   adapter emits this structure from the same data.
   ========================================================================== */

/* ---- 14a. 5-up summary band ---------------------------------------------
   design: grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:32px
           cell 1 -> background:#16181c; color:#fff; label #8fd3f2
           cells 2-5 -> background:#f4f5f7; label #6b7076
           label 11px/700 ls .1em ; value Barlow Condensed 24px/700 lh 1.1     */

body.catalog-product-view .apollo-spec-summary{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0 0 32px}
body.catalog-product-view .apollo-sum-cell{background:#f4f5f7;padding:16px 18px}
body.catalog-product-view .apollo-sum-cell.is-dark{background:#16181c;color:#fff}
body.catalog-product-view .apollo-sum-label{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:#6b7076;text-transform:uppercase;line-height:1.2}
body.catalog-product-view .apollo-sum-cell.is-dark .apollo-sum-label{color:#8fd3f2}
body.catalog-product-view .apollo-sum-value{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:24px;font-weight:700;
  line-height:1.1;margin-top:4px;color:#16181c}
body.catalog-product-view .apollo-sum-cell.is-dark .apollo-sum-value{color:#fff}
@media (max-width:991px){
  body.catalog-product-view .apollo-spec-summary{grid-template-columns:repeat(3,1fr);gap:10px}
  body.catalog-product-view .apollo-sum-label{font-size:10px}
  body.catalog-product-view .apollo-sum-value{font-size:17px}
}
@media (max-width:575px){
  body.catalog-product-view .apollo-spec-summary{grid-template-columns:repeat(2,1fr)}
  /* five cells in two columns left a 148x79.8px dead half-row, and squeezed the
     Warranty value onto two lines. Let a lone final cell span the row. Must stay
     inside max-width:575px - at 576-991 the band is repeat(3,1fr), where this
     would strand cell 4 alone in column 1. */
  body.catalog-product-view .apollo-sum-cell:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---- 14b. Spec sheet -----------------------------------------------------
   design: columns:2; column-gap:44px
           group -> break-inside:avoid; margin-bottom:30px
           title -> BC 21/700 ls .04em uppercase; pb 8px; bb 2px #16181c; mb 4px
           row   -> grid minmax(0,1fr) minmax(0,1.15fr); gap 18px; p 10px 0;
                    bb 1px #f0f2f4; align-items:baseline
           k -> 13px #6b7076 lh 1.4   v -> 14px/600 #16181c lh 1.45            */

body.catalog-product-view .apollo-spec-sheet{columns:2;column-gap:44px}
body.catalog-product-view .apollo-spec-group{break-inside:avoid;margin-bottom:30px}
body.catalog-product-view .apollo-spec-title{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:21px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#16181c;
  padding-bottom:8px;border-bottom:2px solid #16181c;margin-bottom:4px;text-wrap:pretty}
body.catalog-product-view .apollo-spec-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;
  padding:10px 0;border-bottom:1px solid #f0f2f4;align-items:baseline}
body.catalog-product-view .apollo-spec-k{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:13px;font-weight:400;
  color:#6b7076;line-height:1.4}
body.catalog-product-view .apollo-spec-v{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;
  color:#16181c;line-height:1.45;text-wrap:pretty;min-width:0;word-break:break-word}
body.catalog-product-view .apollo-spec-v ul{margin:0;padding-left:18px}
body.catalog-product-view .apollo-spec-v li{margin:0 0 2px}
body.catalog-product-view .apollo-spec-v *{
  font-size:inherit !important;color:inherit !important;
  font-family:inherit !important;background:transparent !important}

/* mobile: single column, key stacked above value */
@media (max-width:767px){
  body.catalog-product-view .apollo-spec-sheet{columns:1}
  body.catalog-product-view .apollo-spec-row{grid-template-columns:1fr;gap:2px}
  /* the 12px key shrink used to live here. Once .apollo-spec-row went to a
     single column the key owns the full 321px line - 77 of 77 keys fit on one
     line at 13px (longest 238.8px) - so the shrink bought nothing and only
     split the value across three places. It now inherits the unconditional
     13px set with the rest of the spec sheet. */
}

/* ---- 14c. Feature grid ---------------------------------------------------
   design: grid 1fr 1fr; gap:2px 0; border-top:1px solid #eceef1
           item -> flex; gap:18px; padding:22px 28px 22px 0;
                   border-bottom:1px solid #eceef1; align-items:flex-start
           n     -> BC 26/700 lh 1 #0188cc; width:34px; flex:none; pt 2px
           title -> BC 23/700 lh 1.15 ls .01em; mb 6px
           body  -> 15px/1.55 #4a4f57                                          */

body.catalog-product-view .apollo-feature-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 0;border-top:1px solid #eceef1}
body.catalog-product-view .apollo-feature{
  display:flex;gap:18px;padding:22px 28px 22px 0;
  border-bottom:1px solid #eceef1;align-items:flex-start}
body.catalog-product-view .apollo-feature-n{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:26px;font-weight:700;
  line-height:1;color:#0188cc;width:34px;flex:none;padding-top:2px}
body.catalog-product-view .apollo-feature-body{min-width:0}
body.catalog-product-view .apollo-feature-title{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:23px;font-weight:700;
  line-height:1.15;letter-spacing:.01em;margin-bottom:6px;color:#16181c;text-wrap:pretty}
body.catalog-product-view .apollo-feature-text{
  margin:0;font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:15px;
  line-height:1.55;color:#4a4f57;text-wrap:pretty}
@media (max-width:767px){
  body.catalog-product-view .apollo-feature-grid{grid-template-columns:1fr}
  body.catalog-product-view .apollo-feature{padding:18px 0}
  body.catalog-product-view .apollo-feature-n{font-size:21px;width:26px}
  body.catalog-product-view .apollo-feature-title{font-size:20px}
  body.catalog-product-view .apollo-feature-text{font-size:14px}
}

/* ==========================================================================
   15. MOBILE (<=767px) — measured at 390x844 on stage, not assumed.
   Faults found and fixed here:
     a) the 520px desktop gallery stage leaked to mobile (design wants 330px)
     b) 12 tap targets under 44px, including the CART and the phone link -
        section 12 used Magento class names; this theme uses Codazon ones
     c) the tab strip needs to stack, not sit in a flex row at 368px
   ========================================================================== */

@media (max-width:767px){

  /* ---- 15a. Gallery: design slide is height:330px, full-bleed -------------
     Our section 13a set the 520px stage with no media query, so it leaked. */
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{
    height:330px !important;min-height:330px !important}
  body.catalog-product-view .fotorama__stage__frame{padding:12px !important}
  body.catalog-product-view .fotorama__stage__frame .fotorama__img{
    max-height:306px !important}
  body.catalog-product-view .fotorama__nav-wrap{margin-top:4px !important}
  body.catalog-product-view .fotorama__nav--thumbs .fotorama__nav__frame{
    height:64px !important}

  /* scarcity tag shortens and sits on the image, per the mobile design */
  body.catalog-product-view .apollo-scarcity-bar{
    font-size:16px !important;padding:7px 13px !important}
  body.catalog-product-view .apollo-scarcity-bar .apollo-dot{
    width:7px !important;height:7px !important;flex-basis:7px !important}
  /* was 65px tall against the 44px of headroom section 18e reserves, so it
     bit a corner out of the photo -- worse on square product shots. */
  body.catalog-product-view .apollo-save-badge{
    padding:4px 10px !important;line-height:1 !important}
  body.catalog-product-view .apollo-save-badge b{font-size:13px !important}
  body.catalog-product-view .apollo-save-badge s{font-size:18px !important}

  /* ---- 15b. Tap targets -------------------------------------------------
     Real selectors, read off the rendered page. Every one of these measured
     30-34px before this rule. The skip links stay small on purpose - they are
     visually hidden until focused. */
  body .page-header a.mobile-phone-link,
  body .page-header a.search-toggle,
  body .page-header a.action.showcart,
  body .page-header .amsearch-button.-loupe,
  body .page-header .nav-toggle,
  body.catalog-product-view a.btn-slide.popup-with-form,
  body.catalog-product-view .product-brand-info a.brand-link{
    min-height:44px !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important}
  body .page-header a.mobile-phone-link,
  body .page-header a.search-toggle,
  body .page-header a.action.showcart,
  body .page-header .amsearch-button.-loupe,
  body .page-header .nav-toggle{min-width:44px !important}
  /* the brand logo is a link but should not become a 44px block mid-text */
  body.catalog-product-view .product-brand-info a.brand-link{
    min-width:44px !important;justify-content:flex-start !important}

  /* ---- 15c. Tabs stack at mobile ---------------------------------------- */
  body.catalog-product-view .product.data.items{
    display:block !important;padding:0 !important;border-bottom:0 !important}
  /* :not(.hidden-xs) is load-bearing. The theme renders BOTH a desktop tab
     strip (.hidden-xs .tab-clone-title) and a mobile accordion (.visible-xs).
     Without the guard this rule's (0,6,1) beats .hidden-xs{display:none
     !important} at (0,1,0) and every heading renders twice on a phone. */
  body.catalog-product-view .product.data.items > .item.title:not(.hidden-xs){
    display:block !important;width:100% !important;
    border-bottom:1px solid #e3e6ea !important}
  body.catalog-product-view .product.data.items > .item.title > .switch{
    display:block !important;width:100% !important;
    padding:16px 16px !important;font-size:14px !important;
    box-shadow:none !important;text-align:left !important;
    /* #8a9099 on #fff is 3.22:1 and these closed rows are the ONLY route into
       Features and Specifications. #6b7076 clears 4.5:1. */
    color:#6b7076 !important}
  body.catalog-product-view .product.data.items > .item.title.active > .switch{
    color:#16181c !important;box-shadow:inset 3px 0 0 #0188cc !important}

  /* 15c-i. The theme's 35x35 chevron box carries no `top`, so it lands on its
     static position - i.e. on our own padding-top. The theme sizes it to a 35px
     line box while .switch is line-height:1.2 (16.8px), so the glyph ink landed
     at y29-37 against a label centred at y24.4: 8.6px low in a 48.8px row, with
     the box overrunning the row by 2.2px onto the active bar. Anchor it to the
     row centre with a margin, NOT a transform, so the theme's
     `.active > .switch::before{transform:rotate(180deg)}` and its 500ms
     transition keep working and need no restatement. -17px, not -17.5px: the
     half-leading inside the 35px line box already carries the odd half-pixel. */
  body.catalog-product-view .product.data.items > .item.title > .switch::before{
    top:50% !important;margin-top:-17px !important}
  body.catalog-product-view .product.data.items > .item.content{
    padding:20px 16px 26px !important;border-bottom:1px solid #e3e6ea !important}

  /* ---- 15d. Bands ------------------------------------------------------- */
  body.catalog-product-view .apollo-cta .ap-in{
    flex-direction:column;align-items:flex-start;gap:18px}
  body.catalog-product-view .apollo-cta .ap-btns{width:100%}
  body.catalog-product-view .apollo-cta .ap-btns a{flex:1 1 auto;justify-content:center}
  body.catalog-product-view .apollo-save-bar{flex-wrap:wrap}
  /* the design keeps the buy box padding tight at 390 */
  body.catalog-product-view .product-main-wrapper .product-info-main{
    padding:20px 16px 24px !important}
}

/* ---- 15e. The 768-1023 band ----------------------------------------------
   styles-l.min.css (media min-width:768px) flips this theme to the full desktop
   PDP at 768, giving the buy box ~290px against the 358px the mobile design was
   drawn for. Our own two-column split starts at 992. Between 768 and 991 the
   theme is desktop but we are not, which is the incoherent band.
   Per the client's "keep production config" rule we do NOT move the theme's
   breakpoint; instead we hold our own desktop treatments back to 992 and let
   the mobile patterns run to 991 so the band is at least internally consistent. */
@media (min-width:768px) and (max-width:991px){
  body.catalog-product-view .apollo-spec-summary{grid-template-columns:repeat(3,1fr)}
  body.catalog-product-view .apollo-feature-grid{grid-template-columns:1fr}
  body.catalog-product-view .apollo-spec-sheet{columns:1}
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{height:420px !important;min-height:420px !important}
  body.catalog-product-view .fotorama__stage__frame .fotorama__img{max-height:396px !important}
}

/* ---- 15f. Remaining tap targets, identified by measurement ---------------
   After 15b, four were still under 44px at 390x844:
     button.action.towishlist / a.action.tocompare  40x40 (product-addto-links)
     a.content-toggle "Calculate Shipping Cost"     18px  (block-title)
     a "Sony" brand value link                      17px  (.value)
   The design's own rule is "every interactive element >=44px on its shortest
   axis", so these are in scope. The brand link is inline text inside a sentence,
   so give it vertical padding rather than turning it into a block.            */

@media (max-width:767px){
  body.catalog-product-view .product-addto-links .action.towishlist,
  body.catalog-product-view .product-addto-links .action.tocompare{
    min-width:44px !important;min-height:44px !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important}

  body.catalog-product-view .block-title .content-toggle,
  body.catalog-product-view a.content-toggle{
    min-height:44px !important;display:inline-flex !important;align-items:center !important}

  body.catalog-product-view .value > a{
    display:inline-block;padding:13px 0;line-height:1.2}
}

/* ==========================================================================
   16. MEGA MENU — verified selectors, read off the opened dropdown.
   Sections 11/12 guessed .cdz-megamenu/.cdz-dropdown/.groupdrop, none of which
   exist on this install, so none of that CSS ever applied. The real DOM is:

     nav.cdz-navigation
       li.item.level0.level-top.parent
         a.menu-link > span                      <- top-level label
         ul.groupmenu-drop.slidedown             <- the panel (menu.js sets
                                                    inline width + left)
           li.item.level1.tab-item
             div.cdz-tab-pane
               div.groupmenu-drop-content
                 div.row
                   div.col-sm-8                  <- one per column (3 here)
                     p.groupdrop-title           <- column heading
                     ul.groupdrop-link > li > a  <- links (some cols use a
                                                    bare <ul>, so target both)
   Design: white panel, border-top 3px #16181c, shadow 0 18px 40px rgba(0,0,0,.18),
   headings Barlow Condensed 18/700 ls .06em underlined 2px #0188cc,
   links 14px #3a3f46 hover #0188cc.
   ========================================================================== */

.page-header .cdz-navigation .groupmenu-drop{
  background:#fff !important;
  border:0 !important;border-top:3px solid #16181c !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  padding:26px 28px !important}

.page-header .cdz-navigation .groupmenu-drop-content .row{
  display:flex;flex-wrap:wrap;gap:0 28px}
.page-header .cdz-navigation .groupmenu-drop-content .col-sm-8{
  flex:1 1 0;min-width:0}

.page-header .cdz-navigation .groupdrop-title{
  font-family:'Barlow Condensed',Barlow,Helvetica,Arial,sans-serif !important;
  font-size:18px !important;font-weight:700 !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;color:#16181c !important;
  border-bottom:2px solid #0188cc !important;
  padding:0 0 7px !important;margin:0 0 12px !important;line-height:1.2 !important}

/* Columns 1-2 use ul.groupdrop-link; column 3 uses a bare <ul>. Target both. */
.page-header .cdz-navigation .groupmenu-drop-content ul{
  list-style:none !important;margin:0 !important;padding:0 !important}
.page-header .cdz-navigation .groupmenu-drop-content ul > li{
  margin:0 !important;padding:0 !important;list-style:none !important}
.page-header .cdz-navigation .groupmenu-drop-content ul > li > a{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:14px !important;font-weight:400 !important;
  color:#3a3f46 !important;background:transparent !important;
  text-transform:none !important;letter-spacing:0 !important;
  display:block !important;padding:0 !important;line-height:1.35 !important;
  transition:color .12s}
.page-header .cdz-navigation .groupmenu-drop-content ul > li > a:hover{
  color:#0188cc !important;background:transparent !important;text-decoration:none !important}

/* The tablet-only "Go to ..." row is not in the design; it is a Codazon
   affordance for touch. Keep it (it is real functionality) but make it read as
   a quiet footer link rather than competing with the column headings. */
.page-header .cdz-navigation .groupmenu-drop .menu-go-link{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:13px !important;
  color:#6b7076 !important;padding:6px 0 !important}

/* Codazon's own promo/banner cell inside a dropdown, where one is configured. */
.page-header .cdz-navigation .groupmenu-drop-content .cdz-banner,
.page-header .cdz-navigation .groupmenu-drop-content .menu-banner{
  background:#f4f5f7 !important;border:1px solid #e3e6ea !important;padding:18px !important}

/* ==========================================================================
   17. MOBILE STICKY BUY BAR + COLLAPSIBLE DESCRIPTION
   Both are mobile-design features that had no implementation.
   ========================================================================== */

/* ---- 17a. Sticky buy bar (design: appears at scrollY > 620) -------------- */
.apollo-sticky-bar{display:none}
@media (max-width:767px){
  body.catalog-product-view .apollo-sticky-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#16181c;border-top:3px solid #0188cc;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .18s ease-out}
  body.catalog-product-view .apollo-sticky-bar[hidden]{display:flex !important}
  body.catalog-product-view .apollo-sticky-bar.is-visible{transform:translateY(0)}
  body.catalog-product-view .ap-sb-price{display:flex;flex-direction:column;min-width:0}
  body.catalog-product-view .ap-sb-amt{
    font-family:'Barlow Condensed',Barlow,sans-serif;font-size:26px;font-weight:700;
    line-height:1;color:#fff}
  body.catalog-product-view .ap-sb-note{font-size:11px;color:#ff8a8a;margin-top:2px}
  body.catalog-product-view .ap-sb-cta{
    /* 14px, not 26: the bar is 343px with zero slack (meta 127.5 + price 62.4
       + cta 129.2 + 2x12 gap = 343.1), so the CTA's padding was being paid for
       by the product name, which rendered 17 of 49 characters and severed the
       FWD6A8G model code mid-token. The label is only 77.2px, so 14px a side
       still clears 44x44. */
    height:50px;flex:0 0 auto;padding:0 14px;border:0;background:#0188cc;color:#fff;
    font-family:'Barlow Condensed',Barlow,sans-serif;font-size:20px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  body.catalog-product-view .ap-sb-cta:hover{background:#006ea6}
  /* footer clearance for the sticky bar is set once, at the 150px rule in
     section 18. A 96px declaration lived here and was silently overridden. */
  @media (prefers-reduced-motion:reduce){
    body.catalog-product-view .apollo-sticky-bar{transition:none}
  }
}

/* ---- 17b. Collapsible description ---------------------------------------
   design: max-height 150px with mask-image: linear-gradient(#000 60%, transparent)
   and a READ FULL DESCRIPTION / SHOW LESS toggle at min-height 48px.
   The FULL description stays in the DOM and is collapsed with CSS only, so
   nothing is hidden from crawlers. */
@media (max-width:767px){
  body.catalog-product-view #description .apollo-desc-clip,
  body.catalog-product-view .product.attribute.overview .apollo-desc-clip{
    max-height:150px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 60%,transparent);
    mask-image:linear-gradient(#000 60%,transparent)}
  body.catalog-product-view #description .apollo-desc-clip.is-open,
  body.catalog-product-view .product.attribute.overview .apollo-desc-clip.is-open{
    max-height:none;-webkit-mask-image:none;mask-image:none}
  body.catalog-product-view .apollo-desc-toggle{
    display:block;width:100%;min-height:48px;margin-top:8px;
    background:transparent;border:0;border-top:1px solid #eceef1;
    font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:#0176b0;cursor:pointer}
}
@media (min-width:768px){
  body.catalog-product-view .apollo-desc-toggle{display:none}
}

/* ==========================================================================
   18. MOBILE BLOCKERS — found by audit, each re-measured at 390x844 before fixing.
   ========================================================================== */

@media (max-width:767px){

  /* 18a. The was-price rendered at 52px, identical to the selling price.
     Magento nests .price-final_price INSIDE .old-price, so our 52px mobile rule
     (same specificity, later in the file) was beating the 22px desktop rule.
     Restate after it, scoped to .old-price. Measured 226x62 at 52px. */
  body.catalog-product-view .product-info-main .price-box .old-price .price,
  body.catalog-product-view .product-info-main .price-box .old-price .price-final_price .price{
    font-size:18px !important;font-weight:400 !important;line-height:1.3 !important;
    color:#6b7076 !important;text-decoration:line-through !important;
    font-family:'Barlow',Helvetica,Arial,sans-serif !important}

  /* 18b. BUY NOW measured 144x64 sitting beside ADD TO CART, because the theme
     makes .actions a flex row so width:100% shrank. The design gives BUY NOW its
     own full-width row above ADD TO CART. */
  body.catalog-product-view .box-tocart .fieldset > .actions{
    display:grid !important;grid-template-columns:1fr !important;gap:8px !important;
    width:100% !important}
  body.catalog-product-view .box-tocart .action.buy-now,
  body.catalog-product-view .box-tocart .apollo-buynow{
    order:-1;width:100% !important;height:58px !important;
    font-size:24px !important;letter-spacing:.08em !important;padding:0 16px !important}
  body.catalog-product-view .box-tocart .action.primary.tocart,
  body.catalog-product-view .box-tocart button.action.tocart{
    width:100% !important;height:52px !important}

  /* 18c. The theme ships its own fixed bottom bar (#mb-bottom-toolbar, 390x44,
     z-index 800) which covered our sticky CTA (z-index 60). Rather than hide the
     theme's site-wide navigation, sit above it and raise our stacking order.
     Footer clearance grows to cover both bars. */
  body.catalog-product-view .apollo-sticky-bar{
    z-index:900 !important;bottom:44px !important}
  /* 48px toolbar + 73px sticky bar + 13px breath, matching the desktop
     convention below. margin-bottom:0 cancels footer-styles.css's own
     `@media (max-width:767px){.page-footer{margin-bottom:50px}}` - the theme's
     site-wide clearance for its 48px toolbar, which we must not edit there
     (client file, every page) and which was stacking on top of this. */
  body.catalog-product-view .page-footer{padding-bottom:134px;margin-bottom:0}

  /* 18d. Our tap-target rule for the search toggle was specificity (0,2,2) and
     lost to the client's #header-search-wrap ... {width:30px !important} at
     (1,2,1). Restate at ID specificity. Measured 30x44 before. */
  #header-search-wrap .header-search,
  #header-search-wrap .header-search .search-toggle,
  #header-search-wrap .search-toggle{
    width:44px !important;min-width:44px !important;height:44px !important}
  #header-search-wrap > .header-search{flex:0 0 44px !important}

  /* 18e. The scarcity tag is absolutely positioned at top:0 of a stage frame
     padded only 12px, so it landed on the product. The design pads the slide
     44px 24px 24px precisely to keep the overlay clear of the image. */
  body.catalog-product-view .fotorama__stage__frame{
    padding:44px 24px 24px !important}
  body.catalog-product-view .fotorama__stage__frame .fotorama__img{
    max-height:262px !important}
}

/* 18f. The theme sets order:1 on both .action.primary buttons and beat our
   unflagged order:-1, so ADD TO CART rendered above BUY NOW. The design makes
   BUY NOW the primary and puts it first. Measured: tocart y=1376, buynow y=1446. */
@media (max-width:767px){
  body.catalog-product-view .box-tocart .fieldset > .actions .action.buy-now,
  body.catalog-product-view .box-tocart .fieldset > .actions .apollo-buynow{
    order:-1 !important}
  body.catalog-product-view .box-tocart .fieldset > .actions .action.tocart{
    order:0 !important}
  body.catalog-product-view .box-tocart .fieldset > .actions .product-addto-links{
    order:1 !important}
}

/* ==========================================================================
   19. BUY-BOX ORDER — corrected. Section 10 said CSS could not do this; that
   was based on a wrong reading of the DOM.
   Measured .product-left (display:block) children in order:
       .product-brand-info -> .page-title-wrapper (H1) -> .price-box
       -> .product-info-main-inner (flex) -> .product-social-links
   The price is a SIBLING ABOVE .product-info-main-inner, not inside
   .product-add-form. So ordering inside that flex container puts the SAVE bar,
   scarcity note and ticks directly under the price and above QTY/CTA, exactly
   as the design has it. Only the dealer badge needed a real layout move, since
   it belongs above the H1 - it is now its own block (part=badge).
   ========================================================================== */

body.catalog-product-view .product-info-main-inner > .apollo-save-bar{order:-4 !important}
body.catalog-product-view .product-info-main-inner > .apollo-note{order:-3 !important}
body.catalog-product-view .product-info-main-inner > .apollo-ticks{order:-2 !important}
body.catalog-product-view .product-info-main-inner > .product-info-price{order:-1 !important}
body.catalog-product-view .product-info-main-inner > .product-add-form{order:0 !important}

/* the badge now renders above the H1; keep it tight to the brand mark */
body.catalog-product-view .product-left > .apollo-dealer{
  display:inline-block;margin:0 0 10px}

/* ==========================================================================
   20. MEGA-MENU PROMO CARD + COLUMN GRID
   Design: the dropdown inner is max-width 1400px, padding 28px 32px 32px, a
   link-column grid at gap 28px 36px, then a ~280px promo card on the right
   (background #f4f5f7, border 1px solid #e3e6ea).
   The link columns come from the client's menu record and vary per dropdown
   (2-3 today), so the grid sizes them with 1fr and pins the promo card to a
   fixed 280px track rather than assuming exactly four.
   ========================================================================== */

.page-header .cdz-navigation .groupmenu-drop-content{
  max-width:1400px !important;margin:0 auto !important}

.page-header .cdz-navigation .groupmenu-drop-content > .row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:28px 36px !important;align-items:start !important;
  margin:0 !important;width:100% !important}

/* All cells share the row evenly, promo card included. An explicit 280px track
   was tried first but grid auto-placement kept assigning it to the last LINK
   column rather than the card (HIFI measured 295/295/280/295), and the visual
   difference is 15px on one column. An even grid is predictable, matches the
   mockup's balanced look, and survives Codazon re-rendering the menu. */
/* The menu record contains the odd empty column; collapse it rather than
   leaving a dead track in the grid. */
.page-header .cdz-navigation .groupmenu-drop-content > .row > div.apollo-col-empty{
  display:none !important}

/* reset the theme's column padding, but NOT on the promo card - this selector
   is more specific than the card's own rule and was zeroing its 18px. */
.page-header .cdz-navigation .groupmenu-drop-content > .row > div:not(.apollo-menu-promo){
  width:auto !important;max-width:none !important;
  float:none !important;padding:0 !important;min-width:0}
.page-header .cdz-navigation .groupmenu-drop-content > .row > div.apollo-menu-promo{
  width:auto !important;max-width:none !important;float:none !important;
  padding:18px !important;min-width:0}

/* the card itself */
.page-header .cdz-navigation .apollo-menu-promo{
  background:#f4f5f7 !important;border:1px solid #e3e6ea !important;
  padding:18px !important;align-self:stretch}
.page-header .cdz-navigation .apollo-menu-promo .kicker{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#0188cc;line-height:1.2}
.page-header .cdz-navigation .apollo-menu-promo .title{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:24px;font-weight:700;
  line-height:1.1;margin:6px 0 8px;color:#16181c}
.page-header .cdz-navigation .apollo-menu-promo p{
  margin:0 0 14px !important;font-family:'Barlow',Helvetica,Arial,sans-serif;
  font-size:13px !important;line-height:1.5 !important;color:#6b7076 !important}
.page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta{
  display:inline-block !important;font-family:'Barlow',Helvetica,Arial,sans-serif;
  font-size:13px !important;font-weight:700 !important;color:#0188cc !important;
  padding:0 !important;text-transform:none !important;letter-spacing:0 !important}
.page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta:hover{
  color:#0176b0 !important;text-decoration:underline !important}

/* the promo card is desktop chrome; the mobile drawer is a flat list */
@media (max-width:767px){
  .page-header .cdz-navigation .apollo-menu-promo{display:none !important}
  .page-header .cdz-navigation .groupmenu-drop-content > .row{
    display:block !important}
}

/* 20b. Force the promo card into the LAST grid track.
   Measured: with the card appended, auto-placement still put the final link
   column in the 280px track and the card in a 1fr one (HIFI came out
   295/295/280/295 with the card at 295). `order` is honoured by grid
   auto-placement, so pin it explicitly rather than relying on DOM position -
   Codazon re-renders the menu over AJAX and can reorder children. */
.page-header .cdz-navigation .groupmenu-drop-content > .row > div{order:0}
.page-header .cdz-navigation .groupmenu-drop-content > .row > div.apollo-menu-promo{
  order:99 !important;grid-column:auto !important}

/* ==========================================================================
   21. BUY-BOX BUTTON BALANCE — match the demo's secondary row.
   Design: BUY NOW is a full-width 64px primary; beneath it a
   `1fr 52px 52px` row holds ADD TO CART (52px, 2px ink outline, inverts on
   hover) plus the wishlist and compare icon buttons (52px squares, 1px
   #d6dade, hover border #16181c). We were stacking all three full width.
   ========================================================================== */

@media (min-width:992px){
  body.catalog-product-view .box-tocart .fieldset > .actions{
    display:grid !important;
    grid-template-columns:1fr 52px 52px !important;
    gap:10px !important;align-items:stretch !important;width:100% !important}

  body.catalog-product-view .box-tocart .fieldset > .actions .action.buy-now,
  body.catalog-product-view .box-tocart .fieldset > .actions .apollo-buynow{
    grid-column:1 / -1 !important;order:-1 !important;
    width:100% !important;height:64px !important;font-size:26px !important;
    letter-spacing:.1em !important}

  body.catalog-product-view .box-tocart .fieldset > .actions .action.tocart{
    grid-column:1 !important;order:0 !important;
    width:100% !important;height:52px !important;margin:0 !important}

  /* wishlist + compare sit in the two 52px tracks */
  body.catalog-product-view .box-tocart .fieldset > .actions .product-addto-links{
    grid-column:2 / -1 !important;order:0 !important;
    display:grid !important;grid-template-columns:52px 52px !important;
    gap:10px !important;margin:0 !important;padding:0 !important}

  body.catalog-product-view .product-addto-links .action.towishlist,
  body.catalog-product-view .product-addto-links .action.tocompare{
    width:52px !important;height:52px !important;min-width:52px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    border:1px solid #d6dade !important;background:#fff !important;color:#16181c !important;
    margin:0 !important;padding:0 !important;font-size:0 !important;
    transition:border-color .15s}
  body.catalog-product-view .product-addto-links .action.towishlist:hover,
  body.catalog-product-view .product-addto-links .action.tocompare:hover{
    border-color:#16181c !important;background:#fff !important}
  /* the theme labels these with text; show only the glyph, as the design does */
  body.catalog-product-view .product-addto-links .action.towishlist span,
  body.catalog-product-view .product-addto-links .action.tocompare span{
    font-size:0 !important;line-height:0 !important}
  body.catalog-product-view .product-addto-links .action.towishlist:before,
  body.catalog-product-view .product-addto-links .action.tocompare:before{
    font-size:19px !important;line-height:1 !important;color:#16181c !important}

  /* anything else the theme drops in this fieldset spans the full width so it
     cannot squeeze into the 52px tracks (warranty line, "Sold as", scripts) */
  body.catalog-product-view .box-tocart .fieldset > .actions > *:not(.action):not(.product-addto-links){
    grid-column:1 / -1 !important;order:1 !important}
}

/* ==========================================================================
   22. THUMBNAIL SELECTED STATE — no size jump.
   The design marks the selected thumb with a 2px #d92b2b border against 1px
   #e3e6ea on the rest. Implemented literally, that changes the border box from
   94x106 to 96x108, so the active thumb grows 2px and nudges its neighbours -
   which reads as a stray red box sitting proud of the strip rather than as a
   selection.
   Keep the border at a constant 1px and draw the selection with an inset
   shadow instead: same 2px red indicator, zero layout shift.
   ========================================================================== */

body.catalog-product-view .fotorama__nav--thumbs .fotorama__nav__frame,
body.catalog-product-view .fotorama__nav__frame--thumb{
  border:1px solid #e3e6ea !important;
  box-shadow:none !important;
  background:#fff !important;
  box-sizing:border-box !important}

body.catalog-product-view .fotorama__nav--thumbs .fotorama__nav__frame.fotorama__active,
body.catalog-product-view .fotorama__nav__frame--thumb.fotorama__active{
  border:1px solid #0188cc !important;
  box-shadow:inset 0 0 0 2px #0188cc !important}

/* the inner thumb must not draw a second frame of its own */
body.catalog-product-view .fotorama__thumb,
body.catalog-product-view .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb{
  border:0 !important;box-shadow:none !important;background:#fff !important}

/* fotorama's own selection artefacts */
body.catalog-product-view .fotorama__thumb-border{
  display:none !important;border:0 !important}
body.catalog-product-view .fotorama__nav__frame:focus .fotorama__thumb,
body.catalog-product-view .fotorama__nav__frame:focus{outline:none !important}
body.catalog-product-view .fotorama__nav__frame:focus-visible{
  outline:3px solid #0188cc !important;outline-offset:2px}

/* ==========================================================================
   23. EXACT MATCH TO THE APPROVED MOCKUP
   Measured on apollo.aussie.works/product-page_1.html at a 1425px viewport and
   diffed against stage. Earlier sections were built from the design FILE's
   inline values; several differ from what the approved page actually renders.
   The mockup wins.
   ========================================================================== */

@media (min-width:992px){
  /* stage is 560px in the mockup, not the 520px the design file declares */
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{
    height:560px !important;min-height:560px !important}
  body.catalog-product-view .fotorama__stage__frame .fotorama__img{
    max-height:520px !important}

  /* H1 40px / price 58px - the file says 46/64, the mockup renders 40/58 */
  body.catalog-product-view .page-title-wrapper.product .page-title,
  body.catalog-product-view h1.page-title span.base{
    font-size:40px !important;letter-spacing:.01em !important}
  body.catalog-product-view .product-info-main .price-box .special-price .price,
  body.catalog-product-view .product-info-main .price-box .price-final_price .price{
    font-size:58px !important}

  /* ADD TO CART is Barlow 14/700 ls .08em in the mockup, not Barlow Condensed */
  body.catalog-product-view .box-tocart .action.primary.tocart,
  body.catalog-product-view .box-tocart button.action.tocart{
    font-family:'Barlow',Helvetica,Arial,sans-serif !important;
    font-size:14px !important;font-weight:700 !important;letter-spacing:.08em !important}
}

/* was-price: Barlow 22px with 6px of baseline padding. The mockup's #9aa0a7
   is 2.64:1 on white and fails WCAG 1.4.3 AA, so we ship #6b7076 (4.99:1). */
body.catalog-product-view .product-info-main .price-box .old-price .price{
  padding-bottom:6px !important}

/* utility links are brand blue in the mockup, not muted grey */
body.catalog-product-view .apollo-utils a,
body.catalog-product-view .product-social-links a{
  color:#0188cc !important;font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:13px !important}

/* brand wordmark: the mockup sets the brand as type, not the catalogue logo */
body.catalog-product-view .apollo-brand-wordmark{
  display:block;font-family:'Barlow Condensed',Barlow,sans-serif;
  font-size:30px;font-weight:700;letter-spacing:.24em;line-height:1.1;
  color:#16181c;text-transform:uppercase;margin:0 0 8px}

/* 6px brand rule immediately above the footer */
body.catalog-product-view .apollo-footer-rule{
  height:6px;background:#0188cc;width:100%;margin:0}

/* ---- Complete the Setup: style the theme's related-products block ---------
   Mockup: section padding 0 24px, heading Barlow Condensed 32px ls .02em,
   sub-copy Barlow 15px #6b7076, a SHOP ALL link at Barlow 14/700 ls .04em
   #0188cc, then a repeat(4,1fr) grid with gap 22px of white cards bordered
   #e3e6ea.                                                                   */
body.catalog-product-view .block.related{
  max-width:1400px;margin:44px auto 0;padding:0 24px;width:100%}
body.catalog-product-view .block.related .block-title{
  border:0 !important;margin:0 0 6px !important;padding:0 !important;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px}
body.catalog-product-view .block.related .block-title strong,
body.catalog-product-view .block.related .block-title h2,
body.catalog-product-view .block.related .block-title span{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;
  font-size:32px !important;font-weight:700 !important;letter-spacing:.02em !important;
  color:#16181c !important;text-transform:uppercase}
body.catalog-product-view .block.related .products-grid .product-items,
body.catalog-product-view .block.related ol.product-items{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:22px !important;margin:18px 0 0 !important;padding:0 !important;list-style:none !important}
body.catalog-product-view .block.related .product-item{
  width:auto !important;margin:0 !important;padding:0 !important;
  background:#fff !important;border:1px solid #e3e6ea !important;
  display:flex !important;flex-direction:column !important}
body.catalog-product-view .block.related .product-item-info{
  width:auto !important;display:flex;flex-direction:column;height:100%}
body.catalog-product-view .block.related .product-item-photo{
  height:180px !important;display:flex !important;align-items:center !important;
  justify-content:center !important;padding:12px !important;
  border-bottom:1px solid #f0f2f4 !important}
body.catalog-product-view .block.related .product-item-photo img{
  max-width:100% !important;max-height:100% !important;width:auto !important;
  height:auto !important;object-fit:contain !important}
body.catalog-product-view .block.related .product-item-details{padding:18px 20px 20px !important}
body.catalog-product-view .block.related .product-item-name,
body.catalog-product-view .block.related .product-item-link{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:16px !important;
  font-weight:600 !important;line-height:1.35 !important;color:#16181c !important}
body.catalog-product-view .block.related .price-box .price{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;font-size:28px !important;
  font-weight:700 !important;color:#16181c !important}
body.catalog-product-view .block.related .old-price .price{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:14px !important;
  font-weight:400 !important;color:#6b7076 !important}
body.catalog-product-view .block.related .action.tocart{
  width:100% !important;height:44px !important;background:#fff !important;
  border:2px solid #16181c !important;color:#16181c !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:13px !important;
  font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase !important;
  margin-top:14px !important;transition:background .15s,color .15s}
body.catalog-product-view .block.related .action.tocart:hover{
  background:#16181c !important;color:#fff !important}
@media (max-width:991px){
  body.catalog-product-view .block.related .products-grid .product-items,
  body.catalog-product-view .block.related ol.product-items{
    grid-template-columns:repeat(2,1fr) !important}
  body.catalog-product-view .block.related .block-title strong{font-size:26px !important}
}
@media (max-width:575px){
  body.catalog-product-view .block.related .products-grid .product-items,
  body.catalog-product-view .block.related ol.product-items{
    grid-template-columns:1fr !important}
}

/* 23b. Was-price on DESKTOP. Same trap as the mobile fix in 18a: Magento nests
   .price-final_price inside .old-price, so the 58px selling-price rule in 23
   also caught the struck-through price (measured 252x76 at 58px). Restate
   scoped to .old-price, after it. Mockup: Barlow 22px, 6px baseline - but its
   #9aa0a7 is 2.64:1 on white, so the colour is #6b7076 (4.99:1) instead. */
body.catalog-product-view .product-info-main .price-box .old-price .price,
body.catalog-product-view .product-info-main .price-box .old-price .price-final_price .price,
body.catalog-product-view .product-info-main .price-box .old-price span{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:22px !important;font-weight:400 !important;line-height:1.3 !important;
  color:#6b7076 !important;text-decoration:line-through !important}
@media (max-width:767px){
  body.catalog-product-view .product-info-main .price-box .old-price .price,
  body.catalog-product-view .product-info-main .price-box .old-price .price-final_price .price,
  body.catalog-product-view .product-info-main .price-box .old-price span{
    font-size:18px !important}
}

/* 23c. Related-products block, measured corrections.
   - the heading is strong#block-related-heading, an ID, so the class selector
     in 23 lost (it rendered Barlow 13px instead of Barlow Condensed 32px)
   - .product-item / .product-item-info carry their own widths, so cards came
     out 251px inside a 318px track
   - the photo is an <a> wrapping .product-image-wrapper with
     padding-bottom:100%, forcing a square; the mockup uses a 180px well      */

body.catalog-product-view .block.related .block-title,
body.catalog-product-view .block.related .block-title.title{
  display:flex !important;align-items:baseline !important;
  border:0 !important;margin:0 0 4px !important;padding:0 !important}
body.catalog-product-view .block.related #block-related-heading,
body.catalog-product-view .block.related .block-title strong{
  font-family:'Barlow Condensed',Barlow,sans-serif !important;
  font-size:32px !important;font-weight:700 !important;letter-spacing:.02em !important;
  color:#16181c !important;text-transform:uppercase !important;line-height:1.1 !important}

body.catalog-product-view .block.related .product-item,
body.catalog-product-view .block.related .item.product.product-item{
  width:100% !important;max-width:none !important;min-width:0 !important}
body.catalog-product-view .block.related .product-item-info{
  width:100% !important;max-width:none !important;
  flex-direction:column !important;height:100% !important}
body.catalog-product-view .block.related .product-item-top{width:100% !important}

/* 180px image well, not a 1:1 square */
body.catalog-product-view .block.related .product-item-photo{
  display:flex !important;align-items:center !important;justify-content:center !important;
  height:180px !important;width:100% !important;padding:12px !important;
  border-bottom:1px solid #f0f2f4 !important}
body.catalog-product-view .block.related .product-image-container{
  width:auto !important;max-width:100% !important;height:100% !important;display:flex !important;
  align-items:center !important;justify-content:center !important}
body.catalog-product-view .block.related .product-image-wrapper{
  padding-bottom:0 !important;height:100% !important;width:auto !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  position:static !important}
body.catalog-product-view .block.related .product-image-photo{
  position:static !important;width:auto !important;height:auto !important;
  max-width:100% !important;max-height:156px !important;object-fit:contain !important;
  margin:0 !important}

/* 23d. The related block is an Owl Carousel, not a list.
   Measured DOM: .product-items.owl-carousel > .owl-stage-outer > .owl-stage
   (transform, width 2986px) > .owl-item (inline width 251.4px) > .product-item.
   Putting a grid on .product-items therefore made .owl-stage-outer a single
   grid item, squeezing every card into one 318px track.
   `display:contents` dissolves the two carousel wrappers so the .owl-item
   elements become direct grid children. Owl's inline widths are overridden;
   its transform is moot once .owl-stage is display:contents.
   The mockup shows a single row of four, so later items are hidden rather than
   wrapping to extra rows - the carousel arrows go with them. */

body.catalog-product-view .block.related .product-items.owl-carousel{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:22px !important;width:100% !important}
body.catalog-product-view .block.related .owl-stage-outer,
body.catalog-product-view .block.related .owl-stage{
  display:contents !important}
body.catalog-product-view .block.related .owl-item{
  width:auto !important;min-width:0 !important;margin:0 !important;
  float:none !important;display:flex !important}
body.catalog-product-view .block.related .owl-item > .product-item{width:100% !important}
/* mockup is one row of four */
body.catalog-product-view .block.related .owl-item:nth-child(n+5){display:none !important}
body.catalog-product-view .block.related .owl-nav,
body.catalog-product-view .block.related .owl-dots{display:none !important}

@media (max-width:991px){
  body.catalog-product-view .block.related .product-items.owl-carousel{
    grid-template-columns:repeat(2,1fr) !important}
  body.catalog-product-view .block.related .owl-item:nth-child(n+5){display:flex !important}
}
@media (max-width:575px){
  body.catalog-product-view .block.related .product-items.owl-carousel{
    grid-template-columns:1fr !important}
}

/* 23e. The 180px photo well was matching with !important but still computing
   150px, because .product-item-top (its flex parent) was clamping it. Size the
   parent too, and pin the well with min/max as well as height. */
body.catalog-product-view .block.related .product-item-top{
  height:180px !important;min-height:180px !important;max-height:180px !important;
  width:100% !important;display:block !important;flex:0 0 180px !important}
body.catalog-product-view .block.related .product-item-top > .product-item-photo,
body.catalog-product-view .block.related a.product-item-photo{
  height:180px !important;min-height:180px !important;max-height:180px !important;
  width:100% !important;display:flex !important;
  align-items:center !important;justify-content:center !important;
  padding:12px !important;box-sizing:border-box !important}
body.catalog-product-view .block.related .product-item-top .product-image-container,
body.catalog-product-view .block.related .product-item-top .product-image-wrapper{
  height:100% !important;max-height:156px !important;width:auto !important;
  padding-bottom:0 !important;display:flex !important;
  align-items:center !important;justify-content:center !important}
body.catalog-product-view .block.related .product-item-top .product-image-photo{
  max-height:156px !important;max-width:100% !important;
  width:auto !important;height:auto !important;object-fit:contain !important}

/* 23f. The well took the 180px height but stayed 150px wide - a max-width on
   the photo anchor and its image container. Release it so the well spans the
   card and the image centres in it. */
body.catalog-product-view .block.related .product-item-top,
body.catalog-product-view .block.related .product-item-top > .product-item-photo,
body.catalog-product-view .block.related a.product-item-photo,
body.catalog-product-view .block.related .product-item-top .product-image-container{
  max-width:none !important;width:100% !important}
body.catalog-product-view .block.related .product-item-top .product-image-wrapper{
  max-width:100% !important}

/* 24. Short description under the H1.
   The mockup sets it at Barlow 15px/1.55 #3a3f46. Our rule targeted the
   .product.attribute.overview wrapper, but the inner <p> kept the theme's
   Roboto 13px - measured on the Velodyne MiniVee X. Target the descendants. */
body.catalog-product-view .product.attribute.overview,
body.catalog-product-view .product.attribute.overview .value,
body.catalog-product-view .product.attribute.overview p,
body.catalog-product-view .product.attribute.overview span,
body.catalog-product-view .product.attribute.overview li{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:15px !important;line-height:1.55 !important;color:#3a3f46 !important}
body.catalog-product-view .product.attribute.overview .type{display:none !important}
body.catalog-product-view .product.attribute.overview p{margin:0 0 10px !important}

/* ==========================================================================
   25. COMPLETE THE SETUP — fallback grid (apollo-accessories.phtml)
   Same visual spec as the native related block in 23: heading Barlow Condensed
   32px, sub-copy Barlow 15px #6b7076, repeat(4,1fr) gap 22px, white cards on
   #e3e6ea, 180px image well, outlined CTA that inverts on hover.
   ========================================================================== */

body.catalog-product-view .apollo-accessories{
  max-width:1400px;margin:44px auto 0;padding:0 24px;width:100%}
body.catalog-product-view .apollo-acc-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 18px}
body.catalog-product-view .apollo-acc-head h2{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:32px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:#16181c;margin:0 0 4px;line-height:1.1}
body.catalog-product-view .apollo-acc-head p{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:15px;color:#6b7076;margin:0}
body.catalog-product-view .apollo-acc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
body.catalog-product-view .apollo-acc-card{
  background:#fff;border:1px solid #e3e6ea;display:flex;flex-direction:column;min-width:0}
body.catalog-product-view .apollo-acc-photo{
  height:180px;display:flex;align-items:center;justify-content:center;padding:12px;
  border-bottom:1px solid #f0f2f4}
body.catalog-product-view .apollo-acc-photo img{
  max-width:100%;max-height:156px;width:auto;height:auto;object-fit:contain}
body.catalog-product-view .apollo-acc-body{
  padding:18px 20px 20px;display:flex;flex-direction:column;flex:1 1 auto}
body.catalog-product-view .apollo-acc-name{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;
  line-height:1.35;color:#16181c;text-decoration:none}
body.catalog-product-view .apollo-acc-name:hover{color:#0188cc}
body.catalog-product-view .apollo-acc-price{
  font-family:'Barlow Condensed',Barlow,sans-serif;font-size:28px;font-weight:700;
  color:#16181c;margin:10px 0 0;line-height:1.1}
body.catalog-product-view .apollo-acc-cta{
  margin-top:auto;height:44px;display:flex;align-items:center;justify-content:center;
  border:2px solid #16181c;color:#16181c;background:#fff;text-decoration:none;
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s}
body.catalog-product-view .apollo-acc-cta:hover{background:#16181c;color:#fff;text-decoration:none}
@media (max-width:991px){
  body.catalog-product-view .apollo-acc-grid{grid-template-columns:repeat(2,1fr)}
  body.catalog-product-view .apollo-acc-head h2{font-size:26px}
}
@media (max-width:575px){
  body.catalog-product-view .apollo-acc-grid{grid-template-columns:1fr}
}

/* 25b. Tap targets inside the accessory cards. The new name link measured
   under 44px on mobile, taking the page from 1 failure back to 5. The photo is
   already a 180px target; give the name link and CTA their own height. */
@media (max-width:767px){
  body.catalog-product-view .apollo-acc-name{
    display:flex;align-items:center;min-height:44px}
  body.catalog-product-view .apollo-acc-cta{min-height:48px}
  body.catalog-product-view .block.related .product-item-name,
  body.catalog-product-view .block.related .product-item-link{
    display:flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   26. HEADER + MENU STRUCTURE — matched to the approved mockup.
   Measured both at 1425px.

              mockup                     stage before
   utility    1425x34, flex centred,     1425x32, padding 7px 0,
              gap 44px, pad 9px 24px,    Barlow 13 w400, left aligned
              Barlow 13 w700 ls .26px
   nav row    1425x82                    1405x89
   logo       295x82  (fills the bar)    119x59
   nav item   55x82   (full height)      48x18
   nav link   Barlow 12.5 w600 ls .125px same but ls .25px
   caret      8x12 chevron at 9px        absent
   ========================================================================== */

/* ---- utility bar ---- */
.page-header .header-top{
  background:#000 !important;padding:9px 24px !important;min-height:34px !important}
.page-header .header-top .store-info-top,
.page-header .header-top .row,
.page-header .header-top .col-sm-12{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:44px !important;width:100% !important;max-width:none !important;
  float:none !important;padding:0 !important;margin:0 !important;flex-wrap:wrap}
.page-header .header-top,
.page-header .header-top a,
.page-header .header-top span,
.page-header .header-top p{
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.02em !important;
  color:#fff !important;line-height:1.2 !important;margin:0 !important}

/* ---- nav bar: 82px tall, logo fills it ---- */
@media (min-width:992px){
  .page-header .panel.header{
    height:82px !important;min-height:82px !important;padding:0 28px 0 0 !important;
    display:flex !important;align-items:stretch !important}
  .page-header .panel.header > .row.cdz-fix-left{
    display:flex !important;align-items:stretch !important;width:100% !important;
    margin:0 !important;height:82px !important}
  .page-header .panel.header .logo{
    display:flex !important;align-items:center !important;height:82px !important;
    margin:0 !important;padding:0 !important;flex:0 0 auto !important}
  .page-header .panel.header .logo img{
    height:82px !important;width:auto !important;max-height:82px !important;
    max-width:none !important;object-fit:contain !important;margin:0 !important}

  /* nav fills the bar so the hover state covers its full height */
  .page-header .cdz-navigation,
  .page-header .cdz-navigation .static-wrap,
  .page-header .cdz-navigation .cdz-menu,
  .page-header .cdz-navigation ul.groupmenu{
    height:82px !important;display:flex !important;align-items:stretch !important}
  .page-header .cdz-navigation li.item.level0.level-top{
    height:82px !important;display:flex !important;align-items:stretch !important}
  .page-header .cdz-navigation li.item.level0.level-top > a.menu-link{
    height:82px !important;display:flex !important;align-items:center !important;
    gap:6px !important;padding:0 10px !important;
    letter-spacing:.01em !important;line-height:1 !important}

  /* the ▾ caret the mockup puts after every item that has a dropdown */
  .page-header .cdz-navigation li.item.level0.level-top.parent > a.menu-link:after{
    content:'\25BE';font-size:9px;line-height:1;opacity:.75;
    display:inline-block;margin-left:2px;font-weight:600}

  /* right-hand cluster sits on the same 82px baseline */
  .page-header .panel.header #header-search-wrap,
  .page-header .panel.header .header-search,
  .page-header .panel.header .minicart-wrapper,
  .page-header .panel.header .header-account{
    display:flex !important;align-items:center !important;height:82px !important}
}

/* 26b. Utility bar height. After 26 the bar measured 124px: .store-info-top
   and its .row were 106px tall around 18px of content, from theme min-heights
   my padding reset did not clear. Pin the whole chain to the content height so
   the bar is the mockup's 34px. */
.page-header .header-top{
  height:34px !important;min-height:34px !important;max-height:34px !important;
  padding:0 24px !important;display:flex !important;align-items:center !important;
  overflow:hidden !important}
.page-header .header-top .store-info-top,
.page-header .header-top .row,
.page-header .header-top .col-sm-12,
.page-header .header-top .col-left,
.page-header .header-top .col-right{
  height:auto !important;min-height:0 !important;line-height:1.2 !important}
.page-header .header-top .store-contact{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:44px !important;flex-wrap:nowrap !important;width:100% !important;
  margin:0 !important;padding:0 !important}
.page-header .header-top .store-contact > *{margin:0 !important;white-space:nowrap}

/* 26c. RETIRED - superseded by section 29. It tried to slim the bar on mobile
   by hiding .store-contact children, but the street address is a bare TEXT NODE
   and `> *:not(:first-child)` cannot match one, so the bar stayed clipped with
   the address half-showing. Section 29 hides the bar below 992px instead, which
   is what the theme itself does. */

/* ==========================================================================
   27. REMAINING MOCKUP ELEMENTS — call-us strip, wallet row, utility links.
   Values read off design/Apollo Product Page v1.dc.html lines 276-340.
   ========================================================================== */

/* call-us strip inside the gallery card */
body.catalog-product-view .apollo-callus{
  display:flex;align-items:center;gap:14px;
  border-top:1px solid #e3e6ea;padding:16px 18px;background:#fff}
body.catalog-product-view .apollo-callus .ap-ico{
  width:38px;height:38px;flex:none;border-radius:50%;background:#0188cc;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
body.catalog-product-view .apollo-callus .ap-cu-title{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;color:#16181c}
body.catalog-product-view .apollo-callus .ap-cu-sub{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:13px;color:#6b7076;margin-top:2px}
body.catalog-product-view .apollo-callus .ap-cu-cta{
  margin-left:auto;font-family:'Barlow Condensed',Barlow,sans-serif;font-size:22px;
  font-weight:700;color:#0188cc;text-decoration:none;white-space:nowrap}
body.catalog-product-view .apollo-callus .ap-cu-cta:hover{color:#0176b0}

/* wallet row — VISUAL PLACEHOLDERS, see the template comment */
body.catalog-product-view .apollo-wallets{margin:18px 0 0}
body.catalog-product-view .apollo-wallets .ap-w-label{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#6b7076;margin-bottom:10px}
body.catalog-product-view .apollo-wallets .ap-w-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.catalog-product-view .apollo-wallets .ap-w{
  height:46px;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:14px;
  user-select:none;cursor:default}
body.catalog-product-view .apollo-wallets .ap-w-gpay{background:#000;color:#fff;font-weight:600}
body.catalog-product-view .apollo-wallets .ap-w-link{background:#00d66f;color:#0b3d22;font-weight:600}
body.catalog-product-view .apollo-wallets .ap-w-pp,
body.catalog-product-view .apollo-wallets .ap-w-pp4{background:#ffc439;color:#16181c;font-weight:700}
body.catalog-product-view .apollo-instalment{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:13px;color:#6b7076;margin:10px 0 0}
body.catalog-product-view .apollo-instalment strong{color:#16181c}

/* utility links row */
body.catalog-product-view .apollo-utils{
  display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0;padding:0;border:0}
body.catalog-product-view .apollo-utils a{
  font-family:'Barlow',Helvetica,Arial,sans-serif;font-size:13px;color:#0188cc;text-decoration:none}
body.catalog-product-view .apollo-utils a:hover{text-decoration:underline}

@media (max-width:767px){
  body.catalog-product-view .apollo-callus{padding:14px 16px;gap:10px}
  body.catalog-product-view .apollo-callus .ap-cu-cta{font-size:19px}
  body.catalog-product-view .apollo-wallets .ap-w{height:48px}
  /* mockup turns the utility links into full-width tappable rows on mobile */
  body.catalog-product-view .apollo-utils{display:block;margin-top:14px}
  body.catalog-product-view .apollo-utils a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:48px;border-bottom:1px solid #eceef1;
    /* !important required: an ungated rule elsewhere was winning and these
       rendered 13px, a point below what this block declares. */
    font-size:15px !important;line-height:1.3 !important}
  body.catalog-product-view .apollo-utils a:after{content:'\203A';color:#9aa0a7;font-size:18px}
}

/* 27b. Brand: the mockup uses a 30px Barlow Condensed wordmark at .24em, not a
   logo image. The catalogue's brand images are small squares - Sony's renders
   34x34 - so the wordmark is the approved look and the logo is hidden where a
   brand value exists. Delete this rule to restore brand logos. */
body.catalog-product-view .product-brand-info.apollo-brand-hide{display:none !important}
body.catalog-product-view .apollo-brand-wordmark{margin:0 0 10px}

/* 27c. The theme puts a full-width blue ASK A QUESTION button under the
   gallery. The mockup has no such button - "Ask a question" is one of the three
   utility links under the buy box, which we now render. Hide the duplicate so
   the gallery column ends on the call-us strip as the mockup does.
   The inquiry form itself is untouched and still reachable from the utility
   link and from anywhere else the theme exposes it. */
@media (min-width:992px){
  body.catalog-product-view .product-media-wrapper .btn-slide.popup-with-form,
  body.catalog-product-view .product-media-wrapper .product-inquiry-button,
  body.catalog-product-view .product.media.full-width > .btn-slide{display:none !important}
}

/* 27d. Horizontal-scroll regression from section 16.
   menu.js sets an inline width on .groupmenu-drop (1425px here). The panel is
   content-box, so the 26px/28px padding added in 16 was applied OUTSIDE that
   width, making the panel 1481px against a 1425px viewport and giving the whole
   page a horizontal scrollbar whenever the menu markup was present.
   border-box keeps the padding inside the width menu.js computed. */
.page-header .cdz-navigation .groupmenu-drop,
.page-header .cdz-navigation .groupmenu-drop *,
.page-header .cdz-navigation .groupmenu-drop-content,
.page-header .cdz-navigation .cdz-tab-pane{
  box-sizing:border-box !important}
.page-header .cdz-navigation .groupmenu-drop{max-width:100vw !important}

/* ==========================================================================
   28. REGRESSIONS FROM SECTION 26 — site-wide, all page types. Caused by me.
   A regression sweep A/B-tested stage against the same pages with this CSS
   block stripped. Three faults, two of them blockers:

   a) Section 26 force-showed #header-search-wrap on desktop. The theme hides it
      above 992px - it is a mobile affordance. Forced visible it became a
      1092x82 TRANSPARENT band at y=136, floating over the page content and
      swallowing every click in that strip on EVERY non-PDP page. On the
      homepage the hero banner link was unclickable.
      Confirmed: document.elementFromPoint at the band centre returned
      DIV.header-search-wrap, not the banner underneath.

   b) Section 26 put display:flex !important on every li.level0.level-top and on
      ul.groupmenu. That overrode the theme's own display:none on its
      .mobile_only_menu items (About Us, Contact Us, Shipping & Return, Terms &
      Conditions) and on the hidden overflow bucket
      ul.groupmenu.overflow-items-container.hide-page, defeating Codazon's "..."
      collapse. Result: horizontal scroll on every page from 1024 to 1366 - the
      entire common-laptop range. Measured 1396 against a 1265 viewport.

   c) The logo was forced to height:82px with max-width:none, overflowing the
      white angled brand plate it sits on and cropping at 992px.
   ========================================================================== */

/* (a) the search wrap stays a mobile affordance */
@media (min-width:992px){
  .page-header .panel.header #header-search-wrap,
  .page-header #header-search-wrap{display:none !important}
}

/* (b) never un-hide what the theme hides */
.page-header .cdz-navigation li.item.level0.mobile_only_menu{display:none !important}
.page-header .cdz-navigation ul.groupmenu.overflow-items-container.hide-page,
.page-header .cdz-navigation .hide-page{display:none !important}
.page-header .cdz-navigation .switchpage-control{display:none !important}
@media (min-width:992px){
  /* re-state 26's height rule WITHOUT forcing display on hidden items */
  .page-header .cdz-navigation ul.groupmenu{height:82px !important;display:flex !important}
  .page-header .cdz-navigation ul.groupmenu.overflow-items-container{display:none !important}
  .page-header .cdz-navigation li.item.level0.level-top:not(.mobile_only_menu){
    height:82px !important;display:flex !important;align-items:stretch !important}
}

/* (c) logo fits its plate rather than filling the bar */
@media (min-width:992px){
  .page-header .panel.header .logo img{
    height:auto !important;max-height:64px !important;max-width:100% !important;
    width:auto !important}
}

/* ==========================================================================
   29. UTILITY BAR — the mobile cleanup in 26c never worked, and the bar was
   being forced onto breakpoints where the theme hides it.
   The street address is a bare TEXT NODE inside .store-contact, not an element,
   so `> *:not(:first-child)` could never match it. The bar stayed clipped by
   overflow:hidden with the address half-visible.
   Fix: only show the bar where the theme shows it, and use font-size:0 on the
   container with the child span restored, which DOES suppress a text node.
   ========================================================================== */

/* the theme hides this bar below 992px - respect that rather than forcing it */
@media (max-width:991px){
  .page-header .header-top{display:none !important}
}

@media (min-width:992px){
  .page-header .header-top{
    height:34px !important;min-height:34px !important;max-height:34px !important;
    padding:0 24px !important;display:flex !important;align-items:center !important;
    overflow:visible !important}
  .page-header .header-top .store-info-top,
  .page-header .header-top .row,
  .page-header .header-top .col-sm-12,
  .page-header .header-top .col-left{
    height:auto !important;min-height:0 !important;line-height:1.2 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:100% !important;padding:0 !important;margin:0 !important}
  .page-header .header-top .store-contact{
    display:flex !important;align-items:center !important;justify-content:center !important;
    gap:44px !important;flex-wrap:nowrap !important;white-space:nowrap;
    width:100% !important;margin:0 !important;padding:0 !important}
}

/* ==========================================================================
   30. MEGA-MENU GRID — fix for the columns crushing to the left.
   Section 20 fell back to `repeat(auto-fit, minmax(150px,1fr))` after the
   fixed 280px promo track was removed. auto-fit fills the row with as many
   tracks as fit, so a 1385px dropdown holding three cells got NINE 150px
   tracks: the columns rendered narrow and jammed against the left edge with a
   large dead gap on the right. That is what made it look wrong.
   The adapter stamps data-apollo-cols with the real link-column count, so give
   each case an exact, evenly-divided grid including the promo card.
   ========================================================================== */

.page-header .cdz-navigation .groupmenu-drop-content > .row{
  display:grid !important;gap:28px 36px !important;align-items:start !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important}

/* The mockup's promo card is NARROWER than the link columns - roughly 260px
   against ~300px columns. Now that the adapter guarantees the card is the last
   child, an explicit trailing track lands on it correctly (auto-placement used
   to give it to the last LINK column, which is why the fixed track was dropped
   earlier). */
.page-header .cdz-navigation .groupmenu-drop-content > .row[data-apollo-cols="1"]{
  grid-template-columns:minmax(0,1fr) 260px !important}
.page-header .cdz-navigation .groupmenu-drop-content > .row[data-apollo-cols="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) 260px !important}
.page-header .cdz-navigation .groupmenu-drop-content > .row[data-apollo-cols="3"]{
  grid-template-columns:repeat(3,minmax(0,1fr)) 260px !important}
.page-header .cdz-navigation .groupmenu-drop-content > .row[data-apollo-cols="4"]{
  grid-template-columns:repeat(4,minmax(0,1fr)) 260px !important}
.page-header .cdz-navigation .groupmenu-drop-content > .row[data-apollo-cols="5"]{
  grid-template-columns:repeat(5,minmax(0,1fr)) 260px !important}

/* a dropdown the adapter has not stamped yet (first paint, before the promo is
   injected) still lays out evenly rather than collapsing to 150px tracks */
.page-header .cdz-navigation .groupmenu-drop-content > .row:not([data-apollo-cols]){
  grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important}

/* The design spaces link rows with the column grid's 8px gap, not with padding
   on the anchors - 5px top and bottom here added 10px to every row. */
.page-header .cdz-navigation .groupmenu-drop-content ul > li > a{
  padding:0 !important;line-height:1.35 !important;
  overflow-wrap:break-word;hyphens:none}
.page-header .cdz-navigation .groupmenu-drop-content .col-sm-8{
  min-width:0 !important;max-width:none !important}

/* 30b. Promo CTA is a solid blue button in the mockup ("SHOP NOW"), not a text
   link, and the card fills its column height. */
.page-header .cdz-navigation .apollo-menu-promo{
  display:flex !important;flex-direction:column !important;align-self:stretch !important}
.page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-inner{
  display:flex;flex-direction:column;height:100%}
.page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta{
  margin-top:auto !important;align-self:flex-start;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:40px !important;padding:0 20px !important;
  background:#0188cc !important;color:#fff !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:12px !important;
  font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase !important;
  text-decoration:none !important;transition:background .15s}
.page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta:hover{
  background:#0176b0 !important;color:#fff !important;text-decoration:none !important}

/* 30c. THE DROPDOWN WAS RENDERING TRANSPARENT.
   The product image, H1 and price showed straight through the open mega menu -
   the promo card's grey painted, but the panel's white did not. .groupmenu-drop
   carries a transform (Codazon's slidedown animation), which makes it its own
   stacking context, and at z-index 104 it was losing to page content beneath.
   Paint the background on the inner wrappers too, not just the outer panel, so
   the panel is opaque regardless of which element ends up compositing, and lift
   the whole thing clear of anything on the page. */
.page-header .cdz-navigation .groupmenu-drop{
  background:#fff !important;z-index:200 !important;
  /* the animation's transform is what creates the stacking context; keeping it
     is fine now that the z-index is above page content */
  isolation:isolate}
.page-header .cdz-navigation .groupmenu-drop .cdz-tab-pane,
.page-header .cdz-navigation .groupmenu-drop .groupmenu-drop-content,
.page-header .cdz-navigation .groupmenu-drop > li.item.level1.tab-item{
  background:#fff !important}
/* the nav row itself must sit above page content so the panel is not clipped */
.page-header .container.sticky-menu,
.page-header .panel.wrapper{position:relative;z-index:150}

/* ==========================================================================
   31. HEADER LAYOUT + FULL-WIDTH MEGA MENU
   Measured at 1440: the three header columns were 92px inside an 82px bar, so
   they overflowed it; the nav row started at x=10 rather than the edge; and the
   logo sat at x=125, 129x64, indented by a white angled "plate" drawn with
   ::before/::after on .header-panel-left-bg plus 28px of inner padding.
   The approved header has no plate - the logo sits directly on the blue at the
   left edge and fills the 82px bar.
   ========================================================================== */

@media (min-width:992px){
  /* bar is full-bleed and exactly 82px */
  .page-header .panel.header{
    width:100% !important;max-width:none !important;margin:0 !important;
    padding:0 28px 0 0 !important}
  .page-header .panel.header > .row.cdz-fix-left{
    width:100% !important;max-width:none !important;margin:0 !important}

  /* every header column matches the bar height and centres its contents */
  .page-header .panel.header > .row > div{
    height:82px !important;min-height:82px !important;
    display:flex !important;align-items:center !important;padding-top:0 !important;
    padding-bottom:0 !important}

  /* kill the white angled plate - the approved header does not have one */
  .page-header .header-panel-left-bg{padding-left:0 !important}
  .page-header .header-panel-left-bg:before,
  .page-header .header-panel-left-bg:after{display:none !important;content:none !important}
  .page-header .header-panel-left-main{
    padding-left:0 !important;display:flex !important;align-items:center !important;
    height:82px !important;background:transparent !important}

  /* logo hard left, filling the bar */
  .page-header .panel.header .logo{
    margin:0 !important;padding:0 !important;justify-content:flex-start !important}
  .page-header .panel.header .logo img{
    height:auto !important;max-height:70px !important;max-width:none !important;
    width:auto !important;margin:0 !important}

  /* ---- mega menu uses the FULL bar width ---------------------------------
     The inner was capped at 1400px and centred, so on wider screens the columns
     stopped short of the panel edge. Let it fill whatever width menu.js sets,
     inside the panel's own 28px padding. */
  .page-header .cdz-navigation .groupmenu-drop-content{
    max-width:none !important;width:100% !important;margin:0 !important}
  .page-header .cdz-navigation .groupmenu-drop > li.item.level1.tab-item,
  .page-header .cdz-navigation .groupmenu-drop .cdz-tab-pane{
    width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important}
  .page-header .cdz-navigation .groupmenu-drop{
    padding:0 !important}   /* content padding lives on .groupmenu-drop-content, section 38 */
}

/* ==========================================================================
   32. RETIRED. The flex row and the pinned 260px promo here were superseded by
   section 38, which builds the design's own shape: a four-column grid wrapped
   in .apollo-menu-cols with the promo as its sibling at 280px. These selectors
   carried an [data-apollo-cols] attribute, so they outranked section 38 and
   kept the old 36px gap, 260px promo and flex columns in force.
   Only the mobile stacking below is kept.
   ========================================================================== */

@media (max-width:991px){
  .page-header .cdz-navigation .groupmenu-drop-content > .row{
    display:block !important}
}

/* 33. The white angled brand plate is drawn by .header-panel-left-main::before,
   not by .header-panel-left-bg - section 31 suppressed the wrong element, so
   the plate was still showing behind the logo and clipping it. Kill both, and
   let the logo fill the 82px bar as the approved header does. */
@media (min-width:992px){
  .page-header .header-panel-left-bg:before,
  .page-header .header-panel-left-bg:after,
  .page-header .header-panel-left-main:before,
  .page-header .header-panel-left-main:after,
  .page-header .header-panel-left:before,
  .page-header .header-panel-left:after{
    display:none !important;content:none !important;background:none !important}
  .page-header .header-panel-left-bg,
  .page-header .header-panel-left-main,
  .page-header .header-panel-left{
    background:transparent !important;overflow:visible !important}
  .page-header .panel.header .logo img{
    max-height:82px !important;height:82px !important;width:auto !important}
}

/* 34. STICKY HEADER / NAV BAND FULL-BLEED.
   The blue nav band is painted by .panel.wrapper, which sits inside
   div.container.sticky-menu. The theme's .container is a fixed 1200/1300/1400px
   track, and the client's own override only widens it above 1400px - so at every
   width from 992 to 1399 the blue band rendered as an inset block with page
   background showing either side. On scroll Codazon adds .active, which makes the
   OUTER wrapper fixed and full width but leaves .panel.wrapper pinned to
   1200px/margin:0 auto, so the blue detached into a floating slab over the page
   content. Section 31 only widened .panel.header, one level too deep to fix it.
   Paint the band on both wrappers and let the inner row own the gutters. */
@media (min-width:992px){
  .page-header .container.sticky-menu,
  .page-header .sticky-menu.active,
  .page-header .sticky-menu.active .panel.wrapper,
  .page-header .panel.wrapper{
    width:100% !important;max-width:none !important;
    margin-left:0 !important;margin-right:0 !important;
    padding-left:0 !important;padding-right:0 !important}
  .page-header .panel.wrapper,
  .page-header .sticky-menu.active .panel.wrapper{
    background-color:#0188cc !important}

  /* Stuck state: flush to the top edge, above the page, same 82px band and the
     same 24px gutters as the resting header so nothing shifts as it engages. */
  .page-header .sticky-menu.active{
    position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
    z-index:880 !important;background-color:#0188cc !important;
    box-shadow:0 2px 10px rgba(0,0,0,.18) !important}
  .page-header .sticky-menu.active .panel.header{
    width:100% !important;max-width:none !important;
    padding:0 28px 0 0 !important;margin:0 !important}
  .page-header .sticky-menu.active .panel.header > .row > div{
    height:82px !important;min-height:82px !important}
  /* Dropdowns opened from the stuck bar must clear it, not sit under it. */
  .page-header .sticky-menu.active .cdz-navigation .groupmenu-drop{z-index:881 !important}
}

/* 35. QTY STEPPER REPAIR.
   Section 12 grouped .qty-ctl with .cart-qty, so each stepper wrapper became an
   inline-flex box with a border and overflow:hidden. The theme positions the
   button inside it out of flow, so the wrapper collapsed to its 2px borders and
   clipped the button - the qty control rendered as a single squashed cell.
   Give the box back its three tracks: [-] [input] [+].

   And the theme prints "Warranty Period" / "Sold as" twice in the add-to-cart
   fieldset (once by the qty, once under the buttons). The approved design shows
   that information once, as a ticked line under the price, so the adapter tags
   both copies and folds their values into .apollo-ticks. */
body.catalog-product-view .box-tocart .cart-qty{
  width:auto !important;max-width:none !important;overflow:visible !important}
body.catalog-product-view .box-tocart .qty-ctl{
  border:0 !important;background:none !important;overflow:visible !important;
  display:flex !important;align-items:stretch !important;position:static !important;
  flex:0 0 40px !important;width:40px !important;min-width:40px !important;
  height:auto !important;padding:0 !important;margin:0 !important}
body.catalog-product-view .box-tocart .qty-ctl > *{
  position:static !important;flex:1 1 auto !important;
  width:40px !important;height:44px !important;margin:0 !important}
body.catalog-product-view .box-tocart .field.qty{display:flex !important;align-items:center !important}

body.catalog-product-view .apollo-qty-meta{display:none !important}

/* 36. RETIRED. This capped every link column at 300px so short menus would not
   stretch. Section 38 replaced the flex row with the design's four-column
   grid, which sizes its own tracks - and this rule outranked it, quietly
   squeezing that grid. Nothing replaces it; the grid is the answer. */

/* 37. STUCK HEADER: KEEP THE THREE COLUMNS ON ONE LINE.
   On .active the theme widens .header-panel-middle to 100% - it expects the
   logo and account columns to be hidden in its own sticky bar. We keep all
   three (the approved header is the same bar, just pinned), so a 100% middle
   column wrapped the whole nav onto a second line: an empty blue band with the
   menu hanging below it over the page. Hold the row to one line and let the
   middle column take what is left. */
@media (min-width:992px){
  .page-header .panel.header > .row,
  .page-header .sticky-menu.active .panel.header > .row{
    display:flex !important;flex-wrap:nowrap !important;align-items:center !important}
  .page-header .sticky-menu.active .header-panel-middle{
    flex:1 1 auto !important;width:auto !important;max-width:none !important;
    float:none !important}
  .page-header .sticky-menu.active .header-panel-left-bg,
  .page-header .sticky-menu.active .header-panel-right{
    flex:0 0 auto !important;float:none !important}
}

/* ===========================================================================
   38. HEADER AND MEGA MENU, TO THE APPROVED SOURCE.
   Values below are copied from the approved design file
   resources/Product page design files/design_handoff_product_page/design/
   Apollo Product Page v1.dc.html (lines 187-245), not eyeballed from a
   screenshot. Earlier sections approximated this; this one supersedes them.

     utility bar   background #000; padding 9px 24px; justify-content center;
                   gap 44px; Barlow 13px/700; letter-spacing .02em -> 33px tall
     nav band      background #0188cc; height 82px; padding-right 28px; flex
     logo          height 82px; width auto; flex none; FLUSH LEFT at x=0
     nav           flex 1; min-width 0; overflow hidden; padding-left 8px
     nav item      Barlow 14.5px/600 (design said 12.5px; raised on request
                   2026-09-22); letter-spacing .01em; #fff; padding 0 10px
     icon cluster  flex; align-items center; gap 14px; flex none; padding-left 10px
     search        white box 160px + padding 0 2px 0 10px, height 36px;
                   input Barlow 13px #16181c; button 32x30 #0188cc
     account       gap 7px; icon 20px; label 13px/700 #fff
     cart          icon 22px; badge #0a8f4d, 17px, radius 9px, 11px/700
     panel         top 82px; background #fff; border-top 3px #16181c;
                   box-shadow 0 18px 40px rgba(0,0,0,.18)
     panel inner   padding 28px 32px 32px; display flex; gap 44px
     columns       grid repeat(4,1fr); gap 28px 36px
     heading       Barlow Condensed 18px/700; ls .06em; border-bottom 2px #0188cc
     link          Barlow 14px #3a3f46, hover #0188cc
     promo         width 280px; flex none; #f4f5f7; border 1px #e3e6ea;
                   padding 18px 20px

   The white angled plate behind the logo is NOT css - it is baked into the
   approved logo PNG (335x93). The theme's own plate (.header-panel-left-main
   ::before) is a different shape and stays suppressed from section 33; the
   real one now ships as pub/media/logo/stores/1/apollo-header-logo.png.

   The panel is capped at the page content width and centred rather than
   running the full viewport, so its edges line up with the content below.
   =========================================================================== */
@media (min-width:992px){

  /* --- utility bar --------------------------------------------------- */
  .page-header .header-top{
    padding:9px 24px !important;display:block !important;
    height:auto !important;min-height:34px !important;max-height:none !important;
    overflow:visible !important}
  .page-header .header-top .store-info-top,
  .page-header .header-top .store-info-top > .row,
  .page-header .header-top .store-info-top > .row > div{
    width:100% !important;max-width:none !important;margin:0 !important;
    padding:0 !important;display:block !important;float:none !important}
  .page-header .header-top .store-contact{
    display:flex !important;justify-content:center !important;align-items:center !important;
    gap:44px !important;font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:13px !important;font-weight:700 !important;letter-spacing:.02em !important;
    line-height:15px !important;color:#fff !important}
  .page-header .header-top .store-contact > *{margin:0 !important;padding:0 !important;
    color:#fff !important;white-space:nowrap !important}

  /* --- nav band ------------------------------------------------------ */
  .page-header .panel.header{padding:0 28px 0 0 !important}
  .page-header .panel.header > .row{
    display:flex !important;flex-wrap:nowrap !important;align-items:stretch !important;
    height:82px !important;margin:0 !important}
  .page-header .panel.header > .row > div{height:82px !important;min-height:82px !important}

  /* logo: flush left, full bar height, intrinsic width */
  .page-header .header-panel-left-bg{
    flex:0 0 auto !important;width:auto !important;max-width:none !important;
    padding:0 !important;margin:0 !important;display:flex !important;align-items:stretch !important}
  .page-header .header-panel-left-main,
  .page-header .panel.header .logo{
    padding:0 !important;margin:0 !important;display:flex !important;align-items:stretch !important;
    width:auto !important;max-width:none !important;float:none !important}
  /* .main-logo only - the theme also ships a .small-logo.visible-xs in the
     same .logo anchor, and a blanket `display:block` on the img printed both
     side by side. */
  .page-header .panel.header .logo img.main-logo{
    height:82px !important;max-height:82px !important;width:auto !important;
    max-width:none !important;display:block !important;margin:0 !important}
  .page-header .panel.header .logo img.small-logo,
  .page-header .panel.header .logo img.visible-xs{display:none !important}

  /* The design's icon row is search, account, cart - nothing else. The theme
     adds a "utilities" hamburger after the cart; it has no counterpart in the
     approved header. */
  .page-header .header-panel-right li.linkslist-link,
  .page-header .header-panel-right .utilies-toggle-wrap{display:none !important}

  /* nav takes the space between logo and icons */
  /* The design's <nav> carries overflow:hidden to clip nav items that do not
     fit - safe there, because the dropdown panel is a SIBLING of the bar. On
     this theme the panel is a DESCENDANT of the nav column, so that same
     overflow:hidden clipped the whole 438px dropdown down to the 82px bar: the
     panel measured and painted, but nothing was visible. Codazon handles item
     overflow with its own bucket, so the clip is not needed here. */
  .page-header .header-panel-middle{
    flex:1 1 0 !important;min-width:0 !important;width:auto !important;max-width:none !important;
    overflow:visible !important;padding:0 0 0 8px !important;margin:0 !important;
    display:flex !important;align-items:stretch !important;float:none !important}
  .page-header .header-panel-middle > *{width:100% !important}
  .page-header .cdz-navigation > li.level0.level-top > a.menu-link{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;font-size:12.5px !important;
    font-weight:600 !important;letter-spacing:.01em !important;color:#fff !important;
    padding:0 10px !important;height:82px !important;display:flex !important;
    align-items:center !important}

  /* --- icon cluster: search, account, cart --------------------------- */
  .page-header .header-panel-right{
    flex:0 0 auto !important;width:auto !important;max-width:none !important;
    padding:0 0 0 10px !important;margin:0 !important;float:none !important;
    display:flex !important;align-items:center !important}
  .page-header .header-panel-right > ul.header.features-links{
    display:flex !important;align-items:center !important;gap:14px !important;
    margin:0 !important;padding:0 !important;list-style:none !important;height:82px !important}
  .page-header .header-panel-right > ul.header.features-links > li{
    margin:0 !important;padding:0 !important;display:flex !important;align-items:center !important;
    float:none !important;border:0 !important}

  /* search, open inline - the design has no toggle */
  .page-header .header-panel-right .apollo-search-trigger-off{display:none !important}
  .page-header .header-panel-right li.search-link .amsearch-wrapper-block,
  .page-header .header-panel-right li.search-link .amsearch-form-block,
  .page-header .header-panel-right li.search-link .header-search,
  .page-header .header-panel-right li.search-link .search-form{
    display:block !important;position:static !important;width:auto !important;
    max-width:none !important;min-width:0 !important;background:none !important;
    border:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;
    float:none !important;visibility:visible !important;opacity:1 !important;height:auto !important}
  .page-header .header-panel-right li.search-link .amsearch-input-wrapper{
    display:flex !important;align-items:center !important;background:#fff !important;
    height:36px !important;width:172px !important;padding:0 2px 0 10px !important;
    position:static !important;margin:0 !important;border:0 !important;
    max-width:none !important;min-width:0 !important;visibility:visible !important;opacity:1 !important}
  .page-header .header-panel-right li.search-link input.amsearch-input{
    flex:1 1 auto !important;min-width:0 !important;width:auto !important;height:34px !important;
    border:0 !important;outline:none !important;box-shadow:none !important;background:transparent !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;font-size:13px !important;
    color:#16181c !important;padding:0 !important;margin:0 !important}
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe{
    width:32px !important;height:30px !important;flex:none !important;border:0 !important;
    background:transparent !important;color:#0188cc !important;padding:0 !important;margin:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    opacity:1 !important;cursor:pointer !important;position:static !important}
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe:before{
    color:#0188cc !important;font-size:16px !important}
  .page-header .header-panel-right li.search-link .amsearch-button.-close,
  .page-header .header-panel-right li.search-link .amsearch-button.-primary,
  .page-header .header-panel-right li.search-link .search-toggle,
  .page-header .header-panel-right li.search-link .amsearch-related-terms{display:none !important}

  /* account + cart */
  .page-header .header-panel-right .cdz-top-link{
    display:flex !important;align-items:center !important;gap:7px !important;
    color:#fff !important;white-space:nowrap !important;padding:0 !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;font-size:13px !important;
    font-weight:700 !important;line-height:1 !important}
  .page-header .header-panel-right .cdz-top-link .text-underlink{display:none !important}
  .page-header .header-panel-right .cart-subtotal,
  .page-header .header-panel-right .showcart .text{display:none !important}
  .page-header .header-panel-right .showcart{position:relative !important}
  .page-header .header-panel-right .counter.qty{
    position:absolute !important;top:-6px !important;right:-8px !important;
    min-width:17px !important;height:17px !important;padding:0 4px !important;
    border-radius:9px !important;background:#0a8f4d !important;color:#fff !important;
    font-size:11px !important;font-weight:700 !important;line-height:17px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    margin:0 !important}

  /* --- mega menu panel ----------------------------------------------- */
  /* The panel's offset parent is the trigger <li>, and Codazon's menu.js
     writes the full-bar width and left onto it inline. An earlier attempt here
     set width:100%/left:50% on the panel, which resolved against that <li> -
     the dropdown collapsed to the width of the word "Speakers".

     So leave the panel's geometry to the theme and make it invisible instead:
     the white, the top rule and the shadow move onto the content container,
     which is what carries the content-body width cap. The visible dropdown is
     then exactly as wide as the page content and centred on it, while the
     positioned element underneath stays full width and harmless. */
  .page-header .cdz-navigation .groupmenu-drop{
    top:82px !important;background:transparent !important;border-top:0 !important;
    box-shadow:none !important;padding:0 !important;transform:none !important}
  .page-header .cdz-navigation .groupmenu-drop > li.item.level1,
  .page-header .cdz-navigation .groupmenu-drop .cdz-tab-pane{
    background:transparent !important;width:100% !important;max-width:none !important;
    padding:0 !important;margin:0 !important;border:0 !important;box-shadow:none !important}
  .page-header .cdz-navigation .groupmenu-drop-content{
    width:100% !important;max-width:1520px !important;margin:0 auto !important;
    padding:28px 32px 32px !important;background:#fff !important;
    border-top:3px solid #16181c !important;
    box-shadow:0 18px 40px rgba(0,0,0,.18) !important}
  .page-header .cdz-navigation .groupmenu-drop-content > .row{
    display:flex !important;flex-wrap:nowrap !important;align-items:flex-start !important;
    gap:0 44px !important;width:100% !important;margin:0 !important}
  /* Bootstrap's clearfix pseudo-elements on .row become FLEX ITEMS once the row
     is display:flex - two zero-width children, each earning a 44px gap. That
     pushed the column grid 44px right and stole 88px of its width, so the
     tracks came out at 214px instead of 236px. */
  .page-header .cdz-navigation .groupmenu-drop-content > .row:before,
  .page-header .cdz-navigation .groupmenu-drop-content > .row:after{
    display:none !important;content:none !important}
  /* an empty cell must not earn a gap either */
  .page-header .cdz-navigation .groupmenu-drop-content > .row > .apollo-col-empty{
    display:none !important}
  .page-header .cdz-navigation .apollo-menu-cols{
    flex:1 1 auto !important;min-width:0 !important;display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;gap:28px 36px !important;
    max-width:none !important;padding:0 !important;margin:0 !important}
  .page-header .cdz-navigation .apollo-menu-cols > div{
    width:auto !important;max-width:none !important;min-width:0 !important;
    padding:0 !important;margin:0 !important;float:none !important}
  /* The design's 280px is a CONTENT width - its card measures 322px outer once
     its 20px padding and 1px border are added. Ours is border-box, so the
     flex basis carries the outer figure to land on the same rendered card. */
  .page-header .cdz-navigation .groupmenu-drop-content > .row > .apollo-menu-promo{
    flex:0 0 322px !important;width:322px !important;max-width:322px !important;
    background:#f4f5f7 !important;border:1px solid #e3e6ea !important;
    padding:18px 20px !important;margin:0 !important;align-self:flex-start !important}
  .page-header .cdz-navigation .groupdrop-title{
    font-family:Barlow Condensed,Helvetica,Arial,sans-serif !important;font-size:18px !important;
    font-weight:700 !important;letter-spacing:.06em !important;color:#16181c !important;
    padding:0 0 8px !important;border-bottom:2px solid #0188cc !important;
    margin:0 0 10px !important;text-transform:uppercase !important}
  .page-header .cdz-navigation .groupdrop-link{display:grid !important;gap:8px !important;
    margin:0 !important;padding:0 !important;list-style:none !important}
  .page-header .cdz-navigation .groupdrop-link > li{margin:0 !important;padding:0 !important}
  .page-header .cdz-navigation .groupdrop-link a{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;font-size:14px !important;
    color:#3a3f46 !important;padding:0 !important;line-height:1.3 !important;display:block !important}
  .page-header .cdz-navigation .groupdrop-link a:hover{color:#0188cc !important}
}

/* --- brand wordmark + dealer badge on one line, badge right ---------- */
body.catalog-product-view .apollo-brandrow{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:16px !important}
body.catalog-product-view .apollo-brandrow .apollo-brand-wordmark{
  font-family:Barlow Condensed,Helvetica,Arial,sans-serif !important;font-size:30px !important;
  font-weight:700 !important;letter-spacing:.24em !important;text-transform:uppercase !important;
  margin:0 !important;flex:0 1 auto !important;min-width:0 !important}
body.catalog-product-view .apollo-brandrow .apollo-dealer{
  font-size:12px !important;font-weight:700 !important;letter-spacing:.08em !important;
  color:#0a7a45 !important;background:#e6f4ec !important;padding:6px 12px !important;
  margin:0 !important;flex:0 0 auto !important;text-transform:uppercase !important;
  white-space:nowrap !important}

/* ===========================================================================
   39. BUY BOX BLOCK, TO THE APPROVED SOURCE (design file lines 285-300).

     block      background #fff; border 1px #e3e6ea; padding 30px 32px 34px
     brand row  flex; align-items center; justify-content space-between; gap 16
     h1         Barlow Condensed 40px/1.05/700; ls .01em; margin 18px 0 10px
     paragraph  margin 0 0 20px; 15px; #4a4f57; line-height 1.55; NO width cap
     price row  flex; align-items flex-end; gap 16px; flex-wrap wrap;
                padding-bottom 18px; border-bottom 1px solid #eceef1
       price    Barlow Condensed 58px; line-height .9; 700; #16181c
       was      22px; #9aa0a7; line-through; padding-bottom 6px
       chip     #ffc233 on #16181c; 700; 13px; ls .06em; padding 7px 12px;
                margin-bottom 8px  -- ON THE SAME LINE as the prices

   Two of my own earlier rules are corrected here: the paragraph carried a
   max-width:52ch that the approved design does not have (it wrapped at ~440px
   inside a 571px block, leaving a dead gutter down the right), and the percent
   chip sat in a second row under the price with a large SAVE amount beside it.
   The approved shows one price line; the saving is carried by the badge over
   the image and the Buy Now label, so the chip moves up and the amount folds
   into the button.
   =========================================================================== */
body.catalog-product-view .page-title-wrapper.product .page-title,
body.catalog-product-view h1.page-title span.base{
  font-size:40px !important;line-height:1.05 !important;margin:18px 0 10px !important}
body.catalog-product-view .apollo-brandrow + .page-title-wrapper .page-title{margin-top:18px !important}

body.catalog-product-view .product.attribute.overview,
body.catalog-product-view .product-info-main .product.overview{
  max-width:none !important;width:auto !important;margin:0 0 20px !important;
  color:#4a4f57 !important}
body.catalog-product-view .product.attribute.overview .value,
body.catalog-product-view .product.attribute.overview p{
  max-width:none !important;width:auto !important;color:#4a4f57 !important}
body.catalog-product-view .product.attribute.overview p:last-child{margin-bottom:0 !important}

body.catalog-product-view .product-info-main .price-box{
  display:flex !important;align-items:flex-end !important;flex-wrap:wrap !important;
  gap:16px !important;margin:0 0 18px !important;padding:0 0 18px !important;
  border-bottom:1px solid #eceef1 !important}
body.catalog-product-view .product-info-main .price-box .special-price .price,
body.catalog-product-view .product-info-main .price-box .price-final_price .price{
  font-size:58px !important;line-height:.9 !important}
body.catalog-product-view .product-info-main .price-box .old-price .price{
  font-size:22px !important;color:#6b7076 !important;padding-bottom:6px !important;
  display:inline-block !important}

/* percent chip, folded into the price line by the adapter */
body.catalog-product-view .product-info-main .price-box .ap-pct{
  background:#ffc233 !important;color:#16181c !important;font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.06em !important;
  padding:7px 12px !important;margin:0 0 8px !important;line-height:1 !important;
  display:inline-flex !important;align-items:center !important;align-self:flex-end !important;
  text-transform:uppercase !important}
body.catalog-product-view .apollo-save-bar-folded{display:none !important}

@media (max-width:767px){
  body.catalog-product-view .page-title-wrapper.product .page-title,
  body.catalog-product-view h1.page-title span.base{font-size:32px !important}
  body.catalog-product-view .product-info-main .price-box .special-price .price,
  body.catalog-product-view .product-info-main .price-box .price-final_price .price{
    font-size:46px !important}
}

/* ===========================================================================
   40. THE REST OF THE APPROVED SOURCE: page typography, the icon cluster's
   visible affordances, and the promo CTA.

   Page (design line 180-183, inherited by everything):
     body   font-family Barlow, Helvetica, Arial, sans-serif; color #16181c;
            background #f4f5f7; -webkit-font-smoothing antialiased
     a      #0188cc, no underline
     a:hover #016899, underlined

   Only the font-family half of that body rule had been carried over, so the
   page kept the theme's ink and the theme's link colours. The page ground is
   also declared twice in the design (body AND the page wrapper) because the
   wrapper paints over the body; the theme's .page-wrapper background was
   winning here for the same reason.
   =========================================================================== */
body{
  color:#16181c;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
body .page-wrapper{background:#f4f5f7}
body.catalog-product-view a{color:#0188cc;text-decoration:none}
body.catalog-product-view a:hover{color:#016899;text-decoration:underline}
/* controls and chrome are not body copy links - they keep their own treatment */
body.catalog-product-view .page-header a:hover,
body.catalog-product-view .apollo-trust a:hover,
body.catalog-product-view .action:hover,
body.catalog-product-view button:hover,
body.catalog-product-view .apollo-acc-cta:hover{text-decoration:none}

@media (min-width:992px){

  /* --- search: the magnifier must actually be visible -------------------
     Amasty draws its loupe as a background-image on .amsearch-button.-loupe.
     Section 38 set background:transparent to clear the theme's grey pill and
     took the icon with it, leaving a 32x30 dead zone where the design shows a
     blue magnifier. Draw the design's own glyph instead: same 16x16 circle and
     handle, same 2.4 stroke, as a CSS mask so it inherits currentColor. */
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe{
    background-image:none !important;font-size:0 !important;position:relative !important}
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe:before,
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe:after{
    content:'' !important;position:absolute !important;background:#0188cc !important;
    display:block !important}
  /* ring */
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe:before{
    width:13px !important;height:13px !important;left:9px !important;top:7px !important;
    border-radius:50% !important;background:transparent !important;
    border:2px solid #0188cc !important;box-sizing:border-box !important}
  /* handle */
  .page-header .header-panel-right li.search-link .amsearch-button.-loupe:after{
    width:7px !important;height:2px !important;left:19px !important;top:20px !important;
    border-radius:1px !important;transform:rotate(45deg) !important;
    transform-origin:left center !important}
  .page-header .header-panel-right li.search-link .amsearch-input-wrapper{
    width:160px !important}

  /* --- account: the design shows a label, not a bare icon ---------------
     The theme hides both label spans above 768px. The design has "Sign in"
     beside the person icon at 13px/700, 7px clear. Bring one back. */
  .page-header .header-panel-right .account-trigger span.text-uppercase{
    display:inline !important;font-size:13px !important;font-weight:700 !important;
    color:#fff !important;letter-spacing:0 !important;text-transform:none !important;
    line-height:1 !important;margin:0 !important;padding:0 !important}
  .page-header .header-panel-right .account-trigger span.text-underlink{display:none !important}
  /* The theme sizes the account item as a bare 32px icon box, so the restored
     label overflowed it and printed on top of the cart. Let the item and its
     link size to their content, as the design's flex:none cluster does. */
  .page-header .header-panel-right li.authorization-link,
  .page-header .header-panel-right li.authorization-link .account-wrapper,
  .page-header .header-panel-right li.authorization-link .account-trigger{
    width:auto !important;min-width:0 !important;max-width:none !important;
    flex:0 0 auto !important;overflow:visible !important;white-space:nowrap !important}
  .page-header .header-panel-right li.authorization-link .account-trigger:before{
    flex:0 0 auto !important;margin:0 !important}

  /* hover keeps the icons white - the design's hover state changes nothing */
  .page-header .header-panel-right .cdz-top-link:hover,
  .page-header .header-panel-right .cdz-top-link:hover:before,
  .page-header .header-panel-right .cdz-top-link:hover span,
  .page-header .header-panel-right .account-trigger:hover,
  .page-header .header-panel-right .account-trigger:hover:before,
  .page-header .header-panel-right .action.showcart:hover,
  .page-header .header-panel-right .action.showcart:hover:before{
    color:#fff !important;text-decoration:none !important}

  /* nav label to caret: 5px */
  .page-header .cdz-navigation > li.level0.level-top > a.menu-link{gap:5px !important}
  .page-header .cdz-navigation > li.level0.level-top.parent > a.menu-link:after{
    margin-left:0 !important}

  /* --- promo CTA: ink at rest, blue on hover (design line 242) ---------- */
  .page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta,
  .page-header .cdz-navigation .apollo-menu-promo a.action,
  .page-header .cdz-navigation .apollo-menu-promo .ap-promo-cta{
    background:#16181c !important;color:#fff !important;
    display:inline-block !important;height:auto !important;
    padding:10px 16px !important;font-size:12px !important;font-weight:700 !important;
    letter-spacing:.08em !important;line-height:1 !important;text-decoration:none !important}
  .page-header .cdz-navigation .apollo-menu-promo .apollo-menu-promo-cta:hover,
  .page-header .cdz-navigation .apollo-menu-promo a.action:hover,
  .page-header .cdz-navigation .apollo-menu-promo .ap-promo-cta:hover{
    background:#0188cc !important;color:#fff !important;text-decoration:none !important}
}

/* ===========================================================================
   41. BREADCRUMBS: TYPOGRAPHY SITE-WIDE, SPACING ON THE PDP.

   Measured on stage at 1920 before the change: the run from the bottom of the
   breadcrumb text to the top of .column.main was 72.6px, and it was NOT one
   rule. Three stack up:
       .breadcrumbs   margin-bottom  20px
       #maincontent   padding-top    20px
       .columns       padding-top    30px
   (+2.6px of line-box slack). Halving one of them would have moved the number
   by a fraction of what the brief asked, so all three are halved together:
   8 + 8 + 18 = 34px, landing at ~36.6px - half of 72.6.

   The spacing half is scoped to the PDP, matching how every earlier section
   here was scoped. Category and CMS pages keep the 72.6px run until that is
   asked for. The typography half is deliberately site-wide: breadcrumbs are
   one component and should not read in two different faces across the store.
   The theme served them in Roboto 13/400 #666 - no rule in this file had ever
   touched them.
   =========================================================================== */
/* NB: .item:after is deliberately NOT in this list. The separator between
   crumbs is not copy - the theme draws it with content:'105' in FontAwesome
   (Magento core uses '\e608' in icons-blank-theme underneath). Both are
   Private Use Area codepoints that exist in NO text face, so forcing Barlow
   onto that pseudo-element turned every chevron into a missing-glyph box on
   every page that has breadcrumbs. It gets its colour below and nothing else. */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs strong,
.breadcrumbs .item{
  font-family:Barlow,Helvetica,Arial,sans-serif !important}
.breadcrumbs .item,
.breadcrumbs .item a{
  font-size:13px !important;font-weight:400 !important;color:#6b7076 !important}
.breadcrumbs .item a:hover{color:#0188cc !important;text-decoration:none !important}
.breadcrumbs .item strong{
  font-size:13px !important;font-weight:600 !important;color:#16181c !important}
/* 3.19:1 on the real rgb(244,245,247) page backdrop, clearing the 3:1 that
   applies to a decorative glyph while staying visibly lighter than the 4.58:1
   links, so the trail keeps its link / glue / link rhythm. #6b7076 would reach
   text-grade 4.58:1 but is the exact ink of the links, flattening the trail. */
.breadcrumbs .item:not(:last-child):after{color:#848a92 !important}

/* the spacing half - PDP only */
body.catalog-product-view .breadcrumbs{
  padding-top:8px !important;margin-bottom:8px !important}
body.catalog-product-view #maincontent{padding-top:8px !important}
body.catalog-product-view #maincontent .columns{padding-top:18px !important}

/* ===========================================================================
   42. HEADER SEARCH: THE FIELD, AND THE LIVE RESULT PANEL.

   Two root causes, both measured rather than guessed.

   (a) The panel is 296.8px wide. .amsearch-result-section is positioned
       left:0;right:0 against .amsearch-form-block, which is the 160px header
       field - so the panel can never be wider than the input that opens it.
       Amasty then writes an inline width:320px onto every thumbnail, which is
       wider than the whole panel, and the row collapses into the centred
       jumble in the brief. Unpinning left and giving the panel its own width
       is the fix; everything below it only becomes visible once it has room.

   (b) The product title rendered WHITE ON WHITE. The winner was the client's
       own .page-header .panel.header a{color:#fff} at (0,3,1), which outranks
       Amasty's .amsearch-products-section .amsearch-link at (0,2,0). The
       result panel is a descendant of .panel.header, so it inherited header
       chrome colour. Overrides below therefore lead with .page-header to clear
       (0,3,1) on specificity rather than relying on source order alone.

   text-align:right is NOT set on any amsearch element - it is inherited from
   .header-panel-right. It is reset once, on the panel.
   =========================================================================== */
@media only screen and (min-width:768px){

  /* --- the field ------------------------------------------------------- */
  .page-header .header-panel-right li.search-link input.amsearch-input{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:13px !important;color:#16181c !important;
    background:transparent !important;text-align:left !important}
  .page-header .header-panel-right li.search-link input.amsearch-input::placeholder{
    color:#9aa0a7 !important;opacity:1 !important}
  .page-header .header-panel-right li.search-link .amsearch-input-wrapper{
    background:#fff !important;border:0 !important;border-radius:0 !important}

  /* --- the panel: surface treatment at every desktop width ------------- */
  .page-header .amsearch-result-section,
  .page-header .amsearch-result-section.-small{
    text-align:left !important;
    border:1px solid #e3e6ea !important;border-radius:0 !important;
    box-shadow:0 6px 24px rgba(22,24,28,.14) !important;
    padding:4px 0 8px !important}

  /* "Products". The padding belongs to the wrapper <p> ONLY. Amasty makes
     .amsearch-block-header a flex container, so its <span class="amsearch-title">
     child is blockified and any padding on it applies in full rather than
     collapsing the way inline padding would - listing both in one block
     indented the word to 33px against rows at 17px and left the strip 60px
     tall instead of 40px. */
  .page-header .amsearch-result-section .amsearch-block-header{
    margin:0 !important;padding:12px 16px 8px !important;background:none !important;
    text-align:left !important}
  .page-header .amsearch-result-section .amsearch-block-header .amsearch-title{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:15px !important;font-weight:700 !important;
    color:#0188cc !important;text-align:left !important;
    margin:0 !important;padding:0 !important;background:none !important}

  .page-header .amsearch-result-section .amsearch-product-list{
    margin:0 !important;padding:0 !important;list-style:none !important}

  /* --- the row: thumbnail left, copy right ----------------------------- */
  .page-header .amsearch-result-section .amsearch-item.product-item{
    display:flex !important;align-items:flex-start !important;
    gap:14px !important;padding:12px 16px !important;margin:0 !important;
    text-align:left !important;border:0 !important;
    border-top:1px solid #f0f2f4 !important}
  .page-header .amsearch-result-section .amsearch-product-list > li:first-child{
    border-top:0 !important}
  .page-header .amsearch-result-section .amsearch-item.product-item:hover{
    background:#f7f9fb !important}

  .page-header .amsearch-result-section .amsearch-item .amsearch-image{
    flex:0 0 96px !important;width:96px !important;margin:0 !important;padding:0 !important;
    display:block !important}
  /* beats Amasty's inline width:320px - an !important declaration in a
     stylesheet outranks a non-important inline style. */
  .page-header .amsearch-result-section .amsearch-item .amsearch-product-image-container{
    width:96px !important;max-width:96px !important;display:block !important}
  .page-header .amsearch-result-section .amsearch-item .product-image-photo{
    width:96px !important;height:auto !important;max-width:100% !important}

  .page-header .amsearch-result-section .amsearch-item .amsearch-description{
    flex:1 1 auto !important;min-width:0 !important;
    text-align:left !important;padding:0 !important;margin:0 !important}

  /* title - (0,4,x) clears the client's .page-header .panel.header a (0,3,1) */
  .page-header .amsearch-result-section .amsearch-item .amsearch-link.product-item-link,
  .page-header .amsearch-result-section .amsearch-item a.amsearch-link{
    display:block !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:14px !important;font-weight:600 !important;line-height:1.35 !important;
    color:#16181c !important;text-align:left !important;text-decoration:none !important;
    margin:0 0 4px !important}
  .page-header .amsearch-result-section .amsearch-item a.amsearch-link:hover{
    color:#0188cc !important;text-decoration:none !important}

  /* the matched term keeps Amasty's amber, but must not inherit white */
  .page-header .amsearch-result-section .amsearch-item .amsearch-highlight{
    color:#f2910d !important;font-weight:700 !important;background:none !important}

  /* description - two lines, then ellipsis */
  .page-header .amsearch-result-section .amsearch-item .product-item-description{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:13px !important;line-height:1.45 !important;color:#6b7076 !important;
    text-align:left !important;margin:0 0 6px !important;
    display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden !important}

  /* price: current in brand blue, RRP struck under it. Amasty ships visible
     "Special Price" / "Regular Price" labels; the design has neither. */
  .page-header .amsearch-result-section .amsearch-item .amsearch-wrapper-inner{
    margin:0 !important;padding:0 !important}
  .page-header .amsearch-result-section .amsearch-item .price-box{
    display:flex !important;flex-direction:column !important;
    align-items:flex-start !important;gap:1px !important;margin:0 !important}
  .page-header .amsearch-result-section .amsearch-item .price-box .price-label{
    display:none !important}
  .page-header .amsearch-result-section .amsearch-item .special-price,
  .page-header .amsearch-result-section .amsearch-item .special-price .price{
    color:#0188cc !important;font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:16px !important;font-weight:700 !important;line-height:1.3 !important}
  .page-header .amsearch-result-section .amsearch-item .old-price,
  .page-header .amsearch-result-section .amsearch-item .old-price .price{
    color:#9aa0a7 !important;font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:13px !important;font-weight:400 !important;line-height:1.3 !important;
    text-decoration:line-through !important}
  .page-header .amsearch-result-section .amsearch-item .price-final_price > .price-container .price{
    color:#0188cc !important;font-size:16px !important;font-weight:700 !important}
}

/* ---- 42b. Panel geometry, 992px and up only -------------------------------
   Unpinning the panel is what buys the room for everything in 42 above, but
   the WIDTH belongs at 992+, not 768+.

   Measured at 768: the header there uses the expanding search bar, so the
   input itself runs the full 753px, and Amasty's shipped left:0;right:0 makes
   the panel 753px to match it. Forcing 540px in that band therefore made the
   panel NARROWER than the field that opened it and floated it off to the
   right - a regression. Below 992 the shipped full-width behaviour is correct
   and is left alone; only the typography and row layout above apply there.

   At 992+ the field is the compact 160px one, and 540px is measured to clear
   a 96px thumbnail plus a readable two-line description.
   =========================================================================== */
@media only screen and (min-width:992px){
  .page-header .amsearch-result-section,
  .page-header .amsearch-result-section.-small{
    width:540px !important;left:auto !important;right:0 !important;
    max-width:calc(100vw - 32px) !important}
}

/* ===========================================================================
   43. MEGA MENU: BALANCE THE DROPDOWN COLUMNS.

   Section 38 pinned the grid to repeat(4,1fr). Every dropdown therefore got
   exactly four equal tracks regardless of how much sat in each, and the panel
   grew as tall as its longest single column. Measured across all five
   dropdowns (link counts per column):

       HiFi         3 / 5 / 7 / 3
       Theatre      2 / 2 / 2 / 2
       Speakers    13 / 2 / 2 / 3     <- 437px panel, ~10 dead rows
       Headphones   7 / 2
       Accessories  5 / 12 / 3 / 2    <- same shape

   Only Speakers(13) and Cables(12) are actually long. Those two get a second
   track and their links balance across it, which is what halves the panel.

   Detecting "long" needs care: the client's menu HTML does not hold one list
   per column. Speakers is TWO sibling <ul>s of 8 and 5, so li:nth-child(9)
   alone never matches it. But a bare "has two <ul>s" test is no good either -
   Headphones is 4+3 and Accessories' last column is 1+1, and neither should
   split. Hence the pair of selectors: one list of 9+, OR an author-split
   column whose first list alone already runs to 5+. On today's content that
   fires on exactly Speakers and Cables and on nothing else.

   column-span:all keeps ONE heading above the balanced pair, and because
   multicol balances by height the 13 links land 7/6 and the 12 land 6/6 -
   a new column after six items, as asked.

   Track count is switched per dropdown, NOT by auto-fit. repeat(auto-fit,
   minmax(190px,260px)) was tried first and is wrong here: when the max of a
   minmax() is definite, the repetition count is computed from that max, so
   1090px of room yielded floor(1118/288) = 3 tracks, not 5 - which wrapped
   HiFi and Theatre onto a second row and made both panels taller than before.

   So four tracks remain the default and a fifth is added only to the
   dropdowns that actually contain a splittable column. Measured after the
   change: Theatre and HiFi keep four 251.5px tracks on one row (Theatre's
   longest label, "Home Theatre Amplifiers and Receivers", measures 239px and
   must not wrap), while Speakers and Accessories get five 195.6px tracks, so
   a split column spans 419.2px and its two sub-columns land at 199.6px -
   4.6px clear of the widest Speakers label at 195px.

   The container test uses two sibling :has() rather than one nested one,
   because :has() may not contain :has(). In principle its two halves could be
   satisfied by two different columns; on this content they are not, and the
   only cost if they ever were is one spare track.
   =========================================================================== */
@media only screen and (min-width:992px){
  /* Four tracks stay the default. A dropdown only earns a fifth when it
     actually holds a column long enough to split - see the note above on why
     auto-fit could not be used to decide this. */
  .page-header .cdz-navigation .apollo-menu-cols{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:24px 28px !important;
    justify-content:start !important;
    align-items:start !important;
    align-content:start !important}

  .page-header .cdz-navigation .apollo-menu-cols:has(> div > ul > li:nth-child(9)),
  .page-header .cdz-navigation .apollo-menu-cols:has(> div > ul:nth-of-type(2)):has(> div > ul:nth-of-type(1) > li:nth-child(5)){
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    /* five tracks share the same room four had, so the gutter tightens to buy
       each track ~9px back. Measured at 1440: 177px -> 186px per track, which
       is the difference between "Subwoofer Wireless Adapters" (178px) fitting
       on one line and not. Four-track dropdowns keep the roomier 28px. */
    column-gap:20px !important}

  .page-header .cdz-navigation .apollo-menu-col:has(> ul > li:nth-child(9)),
  .page-header .cdz-navigation .apollo-menu-col:has(> ul:nth-of-type(2)):has(> ul > li:nth-child(5)){
    grid-column:span 2 !important;
    column-count:2 !important;
    column-gap:16px !important}

  .page-header .cdz-navigation .apollo-menu-col:has(> ul > li:nth-child(9)) > .groupdrop-title,
  .page-header .cdz-navigation .apollo-menu-col:has(> ul:nth-of-type(2)):has(> ul > li:nth-child(5)) > .groupdrop-title{
    column-span:all !important}

  /* the two <ul>s in a split column are one continuous run of links, so the
     seam between them must not read as a gap mid-column */
  .page-header .cdz-navigation .apollo-menu-col:has(> ul > li:nth-child(9)) > ul,
  .page-header .cdz-navigation .apollo-menu-col:has(> ul:nth-of-type(2)):has(> ul > li:nth-child(5)) > ul{
    margin:0 !important;padding:0 !important}

  .page-header .cdz-navigation .apollo-menu-col li{
    break-inside:avoid;page-break-inside:avoid}
}

/* ===========================================================================
   44. THUMBNAIL STRIP HEIGHT, AND THE CALL-US STRIP TO THE MOCKUP.

   44a. The selected thumbnail's bottom edge was cut off.
   Not a border bug - a clipping bug. Measured on stage at 1600:

       .fotorama__nav        height 70px, overflow:hidden   <- fotorama sets this
       .fotorama__nav__shaft height 92px
       .fotorama__nav__frame height 92px                    <- section 13a sets this

   Fotorama sizes .fotorama__nav from ITS OWN thumb-height option, not from the
   92px section 13a asks for, so the last 22px of every frame sat outside an
   overflow:hidden box. The 1px border and the inset 2px indicator are drawn on
   the frame's edges, so the bottom run of both was the part that disappeared.
   Letting the nav take its content height fixes it for all three thumbs at
   once; nothing else about the strip changes.

   The indicator colour also moves from #d92b2b to the header blue #0188cc,
   here and in sections 13a and 22 so the file does not contradict itself.
   =========================================================================== */
body.catalog-product-view .fotorama__nav-wrap,
body.catalog-product-view .fotorama__nav{
  height:auto !important}
body.catalog-product-view .fotorama__nav__shaft{height:auto !important}

/* ---- 44b. Call-us strip, matched to the mockup ---------------------------
   Mockup (design source, the .apollo-callus block):
     container  border:1px solid #e3e6ea; padding:18px 20px; gap:16px;
                background:#fafbfc; display:flex; align-items:center
     icon       44x44; border-radius:50%; background:#0188cc; #fff; 20px
     title      Barlow 15px/700            sub  Barlow 13px #6b7076
     CTA        background:#16181c; #fff; 13px/700; padding:11px 18px;
                letter-spacing:.06em; hover background:#0188cc

   Four things were off: the strip had only a border-top and a white ground,
   the icon rendered as a SQUARE, and the phone number was plain blue text
   rather than the mockup's dark button.

   The square icon is worth recording. .ap-ico already carried
   border-radius:50%, but section 2's square-corners rule
   `body.catalog-product-view .column.main :where(a,button,input,...,span,...)
   {border-radius:0 !important}` beat it - :where() contributes zero
   specificity, but !important does not care about specificity. Hence the
   !important here.

   The strip's parent .product.media.full-width computes border:0, so the full
   border the mockup asks for does not double up against a card edge.
   ------------------------------------------------------------------------- */
body.catalog-product-view .apollo-callus{
  border:1px solid #e3e6ea !important;
  padding:18px 20px !important;
  gap:16px !important;
  background:#fafbfc !important}

body.catalog-product-view .apollo-callus .ap-ico{
  width:44px !important;height:44px !important;flex:0 0 44px !important;
  border-radius:50% !important;
  background:#0188cc !important;color:#fff !important;
  font-size:20px !important;line-height:1 !important}

body.catalog-product-view .apollo-callus .ap-cu-cta{
  margin-left:auto !important;
  background:#16181c !important;color:#fff !important;
  font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;
  letter-spacing:.06em !important;line-height:1 !important;
  padding:11px 18px !important;
  text-decoration:none !important;white-space:nowrap !important}
body.catalog-product-view .apollo-callus .ap-cu-cta:hover{
  background:#0188cc !important;color:#fff !important;text-decoration:none !important}

/* keep the tighter mobile padding the strip already had - the rule it lived in
   is non-important and would otherwise lose to the block above */
@media (max-width:767px){
  /* the desktop three-across flex squeezed a 68-character sentence four lines
     deep into a 143px column beside the icon, and left the phone number - the
     action the strip exists for - a 114x33 target. Two rows at phone width:
     icon + copy, then the number full width at 48px. */
  body.catalog-product-view .apollo-callus{
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    column-gap:12px !important;row-gap:12px !important;
    align-items:center !important;
    padding:14px 16px !important}
  /* must stay: base 44b sets 44px, which would overflow the 38px track */
  body.catalog-product-view .apollo-callus .ap-ico{
    width:38px !important;height:38px !important;font-size:17px !important}
  body.catalog-product-view .apollo-callus > div{
    grid-column:2 !important;min-width:0 !important}
  body.catalog-product-view .apollo-callus .ap-cu-title{
    font-size:15px !important;line-height:1.25 !important}
  body.catalog-product-view .apollo-callus .ap-cu-sub{
    font-size:13px !important;line-height:1.3 !important;margin-top:3px !important}
  body.catalog-product-view .apollo-callus .ap-cu-cta{
    grid-column:1 / -1 !important;margin-left:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    min-height:48px !important;padding:0 16px !important;
    font-size:16px !important;letter-spacing:.06em !important}
}

/* ===========================================================================
   45. MAIN MENU LABELS AT 14.5px, WHERE THERE IS ROOM FOR THEM.

   Asked for 14.5px on the top-level nav (the dropdown links were already 14px,
   so 14.5px only reads as a real change on the bar itself). It does not fit at
   every width, so it is gated rather than applied flat.

   Measured on stage, modelling each label at 600 weight in Barlow plus the
   20px per-item padding, against the gap between the logo and the search /
   account / cart cluster:

       viewport 1600 - 965px available, 14.5px needs 817px   -> fits, 148 spare
       viewport 1280 - 645px available, 14.5px needs 717px   -> overflows by 72px

   1280 was ALREADY at its limit before this change: 12.5px needs 646px against
   645px available, and the bar has already dropped "Brands" by that width. So
   the flat 14.5px did not create the overflow, but it turned a hairline into a
   72px collision with the search cluster.

   Available width tracks the viewport almost 1:1 (viewport - ~635px), and the
   full eight-item bar needs ~793px at 14.5px, so the size is switched on at
   1500px where there is ~72px of slack. Below that the bar keeps 12.5px, which
   is exactly what it rendered before.
   =========================================================================== */
@media only screen and (min-width:1500px){
  .page-header .navigation .level0 > .level-top,
  .cdz-megamenu .nav-item > a.level-top,
  .cdz-horizontal-menu .nav-item > a,
  .page-header .cdz-navigation .menu-link,
  .page-header .cdz-navigation > li.level0.level-top > a.menu-link{
    font-size:14.5px !important}
}

/* ===========================================================================
   46. MOBILE REMEDIATION PASS (audit 2026-09-22).

   Everything here is gated to phone widths and sits at the end of the file on
   purpose: several rules below have to beat an earlier !important declaration
   of identical specificity, which only source order can decide.

   Measured before: average 66/100 across seven sections, 30 issues, 21 of them
   WCAG tap-target or contrast failures. The recurring cause was desktop rules
   that were never gated and leaked onto mobile.
   =========================================================================== */

/* ---- 46a. Off-canvas drawer: tap targets --------------------------------
   The drawer is `.sections.nav-sections`, a SIBLING of <header class="page-
   header">, not a descendant - anything scoped `.page-header .nav-sections`
   matches nothing. Rows measured 321x39; 39 < 44. Raise the row box, not the
   type: the client paints the open drawer #353535 with #fff links inside its
   own 320-1023 block, and recolouring here would regress contrast that was
   never measured.
   ------------------------------------------------------------------------- */
@media only screen and (max-width:1023px){
  .sections.nav-sections .cdz-menu .item.level-top > .menu-link,
  #mobi_menu-container .cdz-menu .item.level-top > .menu-link{
    display:flex !important;align-items:center !important;
    box-sizing:border-box !important;
    min-height:48px !important;
    padding:8px 52px 8px 16px !important;
    line-height:1.25 !important}

  /* the expander needs its own target and must not sit under the label */
  .sections.nav-sections .cdz-menu .item.level-top > .dropdown-toggle,
  #mobi_menu-container .cdz-menu .item.level-top > .dropdown-toggle{
    position:absolute !important;top:0 !important;right:0 !important;
    width:48px !important;height:48px !important;line-height:48px !important;
    text-align:center !important}

  /* sub-menu links computed to a 19px box - the same treatment, one step in */
  .sections.nav-sections .cdz-menu .groupmenu-drop a,
  .sections.nav-sections .cdz-menu ul.groupmenu-drop li > a{
    display:flex !important;align-items:center !important;
    min-height:44px !important;padding:6px 16px 6px 28px !important;
    line-height:1.3 !important}

  /* Menu / Account were 34x16 and 56x16 text links under a 71px reservation
     that nothing filled. Make them a real two-up tab strip. */
  body .sections.nav-sections .nav-sections-item-title{
    float:left !important;width:50% !important;height:48px !important;
    box-sizing:border-box !important;margin:0 !important;padding:0 !important;
    border:0 !important;background:#1d2126 !important;
    text-align:center !important;position:relative !important;z-index:1 !important}
  body .sections.nav-sections .nav-sections-item-title.active{
    background:#353535 !important}
  body .sections.nav-sections .nav-sections-item-title > a.nav-sections-item-switch{
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:100% !important;height:48px !important;margin:0 !important;padding:0 !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:14px !important;font-weight:700 !important;line-height:1 !important;
    letter-spacing:.06em !important;text-transform:uppercase !important;
    color:rgba(255,255,255,.72) !important;text-decoration:none !important}
  body .sections.nav-sections .nav-sections-item-title.active > a.nav-sections-item-switch{
    color:#fff !important}
  /* the panel clears the strip with padding, so this must match the 48px above
     (the client reserved 71px for a 16px-tall switch) */
  body .sections.nav-sections .nav-sections-item-content{
    padding-top:48px !important;height:auto !important;margin-top:0 !important}
}

/* ---- 46b. Breadcrumbs: hit area without changing layout ------------------
   The crumbs are inline boxes, so the hit area was the 13px text box (~34x16)
   - under even the 24x24 of WCAG 2.5.8 AA. line-height cannot fix it: the
   strip already wraps to two rows at 375, and a 44px line-height would turn a
   44px block into 96px and shove the gallery down. An out-of-flow overlay on
   the anchor raises the target and adds no height. `strong` is deliberately
   untouched - the last crumb is the product name, not a target, and it is the
   element that wraps.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .breadcrumbs .items > li.item > a{
    position:relative !important;display:inline-block !important;
    padding:0 12px 0 0 !important;margin:0 -12px 0 0 !important}
  .breadcrumbs .items > li.item > a:before{
    content:'' !important;position:absolute !important;
    top:50% !important;margin-top:-22px !important;
    left:0 !important;right:0 !important;height:44px !important}
  /* 46b-fix: that 44px band is centred on a 17.55px anchor, so it spans
     y109.77-153.77 while the strip's row pitch is only 18.7px. When the product
     name wraps - which it does for most names at 375 - the band lands on 12.05px
     of its second line, and 67.5% of that visible text hit-tests to Home / Video
     Products / Televisions, throwing the user off the PDP. Give the last crumb
     its own row so nothing shares the band's rows. 13px is the minimum that
     clears; ship 14px. */
  body.catalog-product-view .breadcrumbs .items > li.item:last-child{
    display:block !important;margin-top:14px !important}

  /* the 35.5px run to content was derived at a 1920 viewport in section 41 and
     carried here unchanged; header + crumb + gap were burning 230px before the
     gallery started. */
  body.catalog-product-view .breadcrumbs{
    padding-top:4px !important;margin-bottom:4px !important}
  body.catalog-product-view #maincontent{padding-top:4px !important}
  body.catalog-product-view #maincontent .columns{padding-top:10px !important}
}

/* ---- 46c. Gallery dots: the only image switcher below 768 ----------------
   view.xml sets nav:dots under 767, so there are no thumbnails to fall back
   on. Stock fotorama gives an 18x30 frame around a 6x6 dot, and section 2's
   square-corners rule flattens the dot because it is a <div> in .column.main.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .fotorama__nav--dots{
    width:auto !important;max-width:100% !important}
  body.catalog-product-view .fotorama__nav--dots .fotorama__nav__shaft{
    width:100% !important;display:flex !important;
    align-items:center !important;justify-content:center !important}
  body.catalog-product-view .fotorama__nav--dots .fotorama__nav__frame--dot{
    width:44px !important;height:44px !important;
    padding:0 !important;margin:0 !important;
    position:relative !important;box-sizing:border-box !important}
  body.catalog-product-view .fotorama__nav--dots .fotorama__dot{
    position:absolute !important;top:50% !important;left:50% !important;
    right:auto !important;bottom:auto !important;margin:0 !important;
    transform:translate(-50%,-50%) !important;
    width:9px !important;height:9px !important;
    border:1px solid #6b7076 !important;background:#fff !important;
    border-radius:50% !important}
  body.catalog-product-view .fotorama__nav--dots .fotorama__active .fotorama__dot{
    width:11px !important;height:11px !important;
    background:#0188cc !important;border-color:#0188cc !important}
}

/* ---- 46d. Fullscreen gallery must not inherit the inline stage -----------
   allowfullscreen is true in view.xml, and fullscreen is the only way to
   inspect a $3,299 display on a 375px screen. Our fixed stage heights carry
   !important, so they were pinning the fullscreen viewer to 330px. Prefixing
   with .fotorama--fullscreen lifts specificity above every one of them and
   hands sizing back to fotorama, which is stock behaviour at any width.
   ------------------------------------------------------------------------- */
body.catalog-product-view .fotorama--fullscreen .fotorama__stage,
body.catalog-product-view .fotorama--fullscreen .fotorama__nav-wrap,
body.catalog-product-view .fotorama--fullscreen .fotorama__nav{
  min-height:0 !important;max-height:none !important}
body.catalog-product-view .fotorama--fullscreen .fotorama__stage__frame{
  padding:0 !important;display:block !important}
/* fotorama paints a SEPARATE element in fullscreen - .fotorama__img--full, not
   .fotorama__img - so every override above missed it and the overlay showed
   nothing but the dots row and the close icon. */
body.catalog-product-view .fotorama--fullscreen .fotorama__img--full{
  display:block !important;position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:100% !important;height:100% !important;
  max-width:100% !important;max-height:100% !important;
  object-fit:contain !important}
body.catalog-product-view .fotorama--fullscreen .fotorama__stage__frame .fotorama__img{
  max-height:none !important;max-width:none !important;
  width:auto !important;height:auto !important;object-fit:contain !important}

/* ---- 46e. Buy-box controls to 44px --------------------------------------- */
@media (max-width:767px){
  /* stepper was 40x44. Section 35 pins 40px with !important at (0,3,1), so
     this has to be later in the file, not more specific. */
  body.catalog-product-view .box-tocart .qty-ctl{
    flex:0 0 44px !important;width:44px !important;min-width:44px !important}
  body.catalog-product-view .box-tocart .qty-ctl > *,
  body.catalog-product-view .box-tocart .qty-ctl button,
  body.catalog-product-view .box-tocart button[data-role="change_cart_qty"]{
    width:44px !important;min-width:44px !important;
    height:44px !important;min-height:44px !important;padding:0 !important}

  /* 1.4.11: the theme's `.product-view-style-04 .product-info-main .field.qty
     .cart-qty` (0,4,0) outranks our earlier (0,3,1) and paints the box #e9eaec
     = 1.20:1 on the white card, and --ap-border-in #d6dade only reaches 1.41:1.
     The input itself has no top/bottom border and a transparent background, so
     this box is its ONLY identifying edge - a user cannot see where to type.
     #8a9099 = 3.27:1, clearing the 3:1 that applies to a control boundary. */
  body.catalog-product-view .box-tocart .field.qty .control,
  body.catalog-product-view .box-tocart .field.qty .cart-qty{
    border-color:#8a9099 !important}

  /* brand / attribute value links measured 30x43 - short on both axes */
  body.catalog-product-view .product-info-main .product.attribute:not(.overview) .value > a,
  body.catalog-product-view .product-info-price .value > a,
  body.catalog-product-view .apollo-brandrow .value > a{
    display:inline-flex !important;align-items:center !important;
    justify-content:flex-start !important;
    min-height:44px !important;min-width:44px !important;
    padding:0 8px !important;margin-left:-8px !important;line-height:1.2 !important}
  /* guard: short-description links stay inline text, never 44px boxes */
  body.catalog-product-view .product.attribute.overview .value > a{
    display:inline !important;min-width:0 !important;min-height:0 !important;
    padding:0 !important;margin-left:0 !important}

  /* the brand row that used to sit between price and Add to Cart is now hidden
     outright in 46t, along with its empty .product-info-price wrapper, so the
     two order rules that used to live here are gone - they were relocating a
     box that no longer renders. `.box-tocart` never matched as a child of
     .product-info-main-inner either (it is nested inside .product-add-form). */
}

/* ---- 46f. Touch devices: neutralise sticky :hover ------------------------
   iOS keeps :hover until the next tap elsewhere, so after adding to cart the
   button stayed inverted - visually identical to a committed/disabled state
   while the page was still working.
   ------------------------------------------------------------------------- */
@media (hover:none){
  body.catalog-product-view .box-tocart .action.primary.tocart:hover,
  body.catalog-product-view .box-tocart button.action.tocart:hover{
    background:#0a8f4d !important;color:#fff !important}
  body.catalog-product-view .box-tocart .qty-ctl:hover,
  body.catalog-product-view .box-tocart .qty-ctl > *:hover{
    background:transparent !important;color:inherit !important}
  body.catalog-product-view .apollo-callus .ap-cu-cta:hover{
    background:#16181c !important;color:#fff !important}
}

/* ---- 46g. "Complete the Setup": phone cards ------------------------------
   1,546px - a quarter of the whole page - for four cards whose photo wells
   were 306x180 holding a 156px image (51% of the width used). A horizontal
   row card keeps every tap target legal and roughly halves the block.
   ------------------------------------------------------------------------- */
@media (max-width:575px){
  body.catalog-product-view .apollo-acc-card{
    flex-direction:row !important;align-items:center !important;
    gap:12px !important;padding:12px !important}
  body.catalog-product-view .apollo-acc-photo{
    flex:0 0 96px !important;width:96px !important;height:96px !important;
    min-height:0 !important;padding:0 !important;
    /* the base rule's border-bottom divides a 180px image well from the body of
       the STACKED desktop card; in the 96px horizontal row it is a stray 96px
       hairline hanging under the photo. Base rule left alone - still correct
       above 575. */
    border-bottom:0 !important}
  body.catalog-product-view .apollo-acc-photo img{
    max-width:96px !important;max-height:96px !important;
    width:auto !important;height:auto !important;object-fit:contain !important}
  body.catalog-product-view .apollo-acc-body{
    flex:1 1 auto !important;min-width:0 !important;
    padding:0 !important;gap:6px !important}
  body.catalog-product-view .apollo-acc-name{
    font-size:14px !important;line-height:1.3 !important;min-height:0 !important}
  body.catalog-product-view .apollo-acc-cta{
    min-height:44px !important;width:100% !important}
}

/* ---- 46h. Spec summary band: 10px was the smallest type on the page ------ */
@media (max-width:767px){
  body.catalog-product-view .apollo-sum-cell{padding:12px !important}
  body.catalog-product-view .apollo-sum-label{
    font-size:12px !important;letter-spacing:.05em !important}
  body.catalog-product-view .apollo-sum-value{
    overflow-wrap:anywhere !important;min-width:0 !important}
}

/* ---- 46i. Two honesty fixes ----------------------------------------------
   (1) The wallets row renders four full-width tiles reading G Pay / Pay
       securely with Link / PayPal Buy Now / Pay in 4, directly under Add to
       Cart. They are visual placeholders wired to no gateway, and on a touch
       screen nothing distinguishes them from real express-checkout buttons -
       "Pay in 4" in particular advertises a BNPL facility. Hidden at every
       width until they are either wired up or withdrawn. Reverse by deleting
       this one rule.
   (2) "Ask a question" rendered twice below 992px: the gallery button opens
       the working inquiry popup, the buy-box copy is an inert #product-question
       anchor. Section 27c already de-duplicates at >=992; this completes it.
   ------------------------------------------------------------------------- */
/* RESTORED 2026-09-22 at the client's request. The four marks are <span>s
   inside aria-hidden="true" (apollo-pdp-part.phtml:159-174), tagged
   data-apollo-placeholder="payment-marks" - they are not clickable and
   never were. Stage has NO payment method enabled, so there is nothing to
   wire them to here. To hide again, restore:
   body.catalog-product-view .apollo-wallets{display:none !important}   */

@media (max-width:991px){
  body.catalog-product-view .apollo-utils a[href="#product-question"]{
    display:none !important}
}

/* ---- 46j. Gallery stage: stop paying 101px for a letterboxed image -------
   Measured at 375: stage 330px, image 305x229 - 69% fill, 101px of white.
   The image was WIDTH-constrained (353 - 24px of side padding each side), so
   the dead space was horizontal padding showing up as vertical letterboxing.
   Narrowing the gutters makes the product photo BIGGER and the stage SHORTER
   at the same time. The top gutter still clears the overlays, which need less
   room now that the SAVE badge is 38px rather than 65px (46 / section 15a).

   Side 24->12px  =>  image width 305 -> 329, height 229 -> ~247
   Stage 330->301px, top pad 44->40 (badge bottom sits at 38px)
   Net: image +18px taller, block 29px shorter, fill 69% -> ~82%.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage{
    height:301px !important;min-height:301px !important}
  body.catalog-product-view .fotorama__stage__frame{
    padding:40px 12px 14px !important}
  body.catalog-product-view .fotorama__stage__frame .fotorama__img{
    max-height:247px !important}
}

/* ---- 46k. The gallery card needs a floor under the call-us strip ---------
   `.product.media.full-width` computes `padding:0 20px` - no bottom padding at
   all - and the call-us strip is its last child, so the strip's bottom edge
   sat exactly on the card's. That was invisible while the strip was white with
   only a border-top; once 44b gave it a #fafbfc fill and a full border it read
   as a card cut off mid-way. Measured at 1600: 50px of clearance above the
   strip, 0 below.

   Match the card's own 20px side padding (12px at phone width, where the sides
   are 10px), so the strip is inset on three sides and the 50px above stays as
   separation from the gallery.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product.media.full-width{
  padding-bottom:20px !important}
@media (max-width:767px){
  body.catalog-product-view .product.media.full-width{
    padding-bottom:12px !important}
}

/* ---- 46l. Buy-box tail, after the wallet row and utility links were cut ---
   Both blocks that used to sit under Add to Cart were removed from
   apollo-pdp-part.phtml on 2026-09-22 (the wallet row was a placeholder wired
   to nothing; the three utility links were dead anchors). The 63px dead run
   they created is therefore gone with them, and .box-tocart no longer needs
   its margins zeroed - it is the last thing in the buy box again.

   The divider treatment the design puts on the first block after the cart
   (margin-top 18 / rule / padding-top 18) is kept here, unused but correct, so
   that anything reinstated in that slot - most likely the REAL
   #paypal-smart-button - picks it up rather than butting against the button.
   ------------------------------------------------------------------------- */
body.catalog-product-view .apollo-wallets,
body.catalog-product-view .apollo-utils,
body.catalog-product-view #paypal-smart-button,
body.catalog-product-view #payment-method-messaging-element:not(:empty){
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid #eceef1 !important}

/* ---- 46n. Description panel: use the width it is given -------------------
   The tabs block is 1500px at a 1600 viewport, but #description was capped at
   max-width:1000px (sections 7 and 13d), leaving ~500px of the panel empty.
   That cap is a prose reading-measure, and it is the right instinct for pure
   copy - but these descriptions carry images, feature tables and spec blocks
   that want the room. Released to the panel's own width.

   If long paragraphs read too wide at 1600+, the fix is a measure on the text
   only (e.g. max-width:78ch on #description p), not a cap on the panel.
   ------------------------------------------------------------------------- */
body.catalog-product-view #description,
body.catalog-product-view #description p{
  max-width:none !important}

/* ---- 46o. Tick list in two columns ---------------------------------------
   Warranty / Sold as / Free delivery / demo room are short, single-line facts
   in a 572px column - one per row wasted the width. Two columns, and back to
   one at phone width where 286px per column would wrap every line.
   ------------------------------------------------------------------------- */
body.catalog-product-view ul.apollo-ticks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:4px 24px !important;
  align-items:start !important}
body.catalog-product-view ul.apollo-ticks li{
  margin:0 !important;min-width:0 !important}
@media (max-width:767px){
  body.catalog-product-view ul.apollo-ticks{
    grid-template-columns:minmax(0,1fr) !important;gap:7px 0 !important}
}

/* ---- 46p. Shipping estimator, moved under the call-us strip --------------
   The node is relocated by apollo-pdp-adapter.js (moveShippingEstimator) -
   it starts inside .product-social-links in the right-hand column, which CSS
   cannot move it out of. These rules dress it once it lands in the gallery
   card, so it reads as part of that card rather than a stray Magento block.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product.media .block-shipping-estimation,
body.catalog-product-view .apollo-callus + .block-shipping-estimation{
  margin:12px 0 0 !important;padding:0 !important;
  border:1px solid #e3e6ea !important;background:#fff !important}
body.catalog-product-view .product.media .block-shipping-estimation .block-title{
  margin:0 !important;padding:14px 16px !important}

/* ---- 46p-3. Estimator header: a flex row, not an uncleared float ---------
   Two defects, one cause. The theme floats the toggle
   (`.block-shipping-estimation .block-heading a.content-toggle{float:right}`,
   non-!important, nothing overrode it), and once section 15f gave that anchor
   min-height:44px + inline-flex the float blockified into a 44px out-of-flow
   box. Consequences measured at 375:
     - the anchor sits 187.2 -> 347.6 in a 352px row, so the LEFT 175.6px (half
       the header) hit-tests to DIV.block-title, which has no handler and no
       cursor - the control looks like a full-width row and is not;
     - being out of flow it overflows .block-title by 12.5px and eats the
       header's own bottom padding.
   Making the header a flex row fixes both: the float is neutralised, the row
   regains its padding, and the label and chevron sit at opposite ends of one
   control. The template's <strong> is empty, so the theme's truck ::before is
   the only in-flow content on the left - align-items keeps it centred on the
   toggle rather than stranded against the card edge.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product.media .block-shipping-estimation .block-title{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:10px !important}
body.catalog-product-view .product.media .block-shipping-estimation .block-title .content-toggle{
  float:none !important;margin:0 !important;
  flex:1 1 auto !important;width:auto !important;
  display:flex !important;align-items:center !important;
  justify-content:space-between !important}
/* 46p (cont). Body of the estimator on the same 16px inset as its header. The
   line above puts .block-title on 14px 16px to match .apollo-callus above it
   (both run 28 -> 347 at 375), but the theme's
   `.block-shipping-estimation .fieldset{padding:0 10px}` left the fields at
   22 -> 353, 6px proud of that rhythm on both sides. Not media-scoped, because
   neither side of the mismatch is. */
body.catalog-product-view .product.media .block-shipping-estimation fieldset.fieldset,
body.catalog-product-view .product.media .block-shipping-estimation .bottom-section{
  padding-left:16px !important;padding-right:16px !important}
body.catalog-product-view .product.media .block-shipping-estimation .content-toggle{
  font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:14px !important;font-weight:600 !important;color:#0176b0 !important;
  text-decoration:none !important}

/* ---- 46p-i. The estimator's state SELECT missed the mobile form-control lift.
   The rule near line 432 lists input[type=text]/[search] only, so #zip and
   #city get 44px/16px while #region_id falls through to the theme's
   `.block-shipping-estimation select{height:30px}` and `body select
   {font-size:13px}` - 30px tall beside two 44px inputs, and 13px also trips the
   iOS zoom-on-focus that the 16px rule exists to prevent. Scoped to the
   estimator so it cannot touch Codazon's .cdz-select-wrap skin elsewhere.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .block-shipping-estimation select{
    height:44px !important;min-height:44px !important;
    font-size:16px !important;padding:0 10px !important}
}

/* ---- 46p-ii. Estimator control text was #8c8c8c = 3.36:1 ----------------
   The client's product-view-styles.css sets `body input[type="text"]` and
   `body select` to #8c8c8c, non-!important and with NO media query, so every
   value the customer types renders at 3.36:1 on the white estimator card that
   46p paints. The labels are already #16181c (17.77:1); only the values fail.
   Unscoped on purpose - the source rule is unconditional, so a max-width:767px
   patch would leave desktop and tablet failing. Same reasoning as the struck-RRP
   correction: fix the value, at source, for every breakpoint.
   ------------------------------------------------------------------------- */
body.catalog-product-view .block-shipping-estimation input[type="text"],
body.catalog-product-view .block-shipping-estimation input[type="search"],
body.catalog-product-view .block-shipping-estimation select{
  color:#16181c !important}

/* ---- 46p-iii. The State select was an underline between two boxes --------
   #zip and #city carry a full 1px #e1e1e1 border; the select had border
   0/0/1/0, so the three fields in one row read as two different kinds of
   control. Unscoped for the same reason as 46p-ii: the source rule has no media
   query, and the mismatch measures the same at 1440.
   #e1e1e1 deliberately matches what the two inputs actually compute - #d6dade
   is the Apollo BUTTON hairline and would swap an underline-vs-box mismatch for
   a box-vs-box colour one. No background-color either: all three compute
   transparent over the white card 46p paints. */
body.catalog-product-view .block-shipping-estimation select{
  border:1px solid #e1e1e1 !important}

/* ---- 46p-2. Estimator submit was 81x26.9 in a panel of 44px and 48px controls
   The theme's `.block-shipping-estimation .actions .btn-submit{padding:3px 10px}`
   leaves it 26.5px tall while #zip and #city beside it are 44px and the call-us
   CTA above is 48px. The panel body shrink-wraps to 175.6px inside a 355px card,
   so width:100% on the button alone only buys 155.6px - the wrappers have to be
   released first or the control stays stranded in the left half.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  /* [data-role="block-content"] deliberately NOT in this list: it is the very
     element the theme's toggle shows and hides with an inline display:none, and
     a `display:block !important` here outranks that inline style - which left
     the estimator stuck open at 283px while the chevron still rotated, i.e. a
     control that lied about its state. The wrappers below are enough to release
     the width; the panel measures 352px either way. */
  body.catalog-product-view .block-shipping-estimation .fieldset,
  body.catalog-product-view .block-shipping-estimation .bottom-section,
  body.catalog-product-view .block-shipping-estimation .bottom-section .actions{
    display:block !important;width:100% !important;max-width:100% !important;
    box-sizing:border-box !important}
  body.catalog-product-view .block-shipping-estimation .actions .btn-submit{
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:100% !important;min-height:48px !important;height:auto !important;
    font-size:16px !important;line-height:1.2 !important;
    padding:0 16px !important;margin:0 !important;box-sizing:border-box !important}
}

/* ---- 46q. Brand logo in place of the wordmark ----------------------------
   Inserted by apollo-pdp-adapter.js (brandLogo), reusing the image Codazon's
   brand module already resolves. The wordmark is only hidden when a logo was
   actually found, so brands without artwork keep their text.

   Sizing is by ARTWORK, not by image box. Every brand file is a 150x150
   square, but the mark inside fills 15%-82% of that height depending on the
   brand - measured across the library. Rendering the square at a fixed height
   therefore gave Denon a 27px wordmark floating in ~54px of blank above and
   below, which is the "gap at the top of the right block". The adapter
   measures each image's ink box and crops the wrapper to it, so
   --ap-brand-logo-h is the height of the MARK itself and reads the same for
   every brand. Tune that one value; nothing else needs touching.
   ------------------------------------------------------------------------- */
body.catalog-product-view .apollo-brandrow{
  align-items:center !important;flex-wrap:wrap !important;row-gap:8px !important}
/* The crop width is written inline by the adapter from the measured ink box -
   Sony needs 233px. A max-width here clipped the wordmark mid-letter. Bound the
   LINK (a flex item of the 321px brand row) instead and let the crop be exactly
   as wide as the artwork requires. */
body.catalog-product-view .apollo-brandrow .apollo-brand-logo-crop{
  --ap-brand-logo-h:60px;
  display:block !important;overflow:hidden !important;
  height:60px !important;max-width:100% !important;flex:0 0 auto !important}
body.catalog-product-view .apollo-brandrow .apollo-brand-logo{
  display:block !important;max-width:none !important;border-radius:0 !important}
body.catalog-product-view .apollo-brandrow .apollo-brand-logo-link{
  display:inline-flex !important;align-items:center !important;
  line-height:0 !important;text-decoration:none !important;flex:0 0 auto !important}
body.catalog-product-view .apollo-brandrow .apollo-brand-wordmark[hidden]{display:none !important}
@media (max-width:767px){
  body.catalog-product-view .apollo-brandrow .apollo-brand-logo-crop{
    --ap-brand-logo-h:42px;height:42px !important;max-width:100% !important}
}

/* ---- 46w. Trust strip: four even, centred cells --------------------------
   The strip was a left-aligned flex row, so the cells bunched left and the
   sub-line sat off-centre under its heading. Auto-flow columns share the bar
   evenly whether the warranty cell renders or not - it is conditional on the
   product having a warranty attribute, so the count is 3 or 4.
   ------------------------------------------------------------------------- */
body.catalog-product-view .apollo-trust .ap-in{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0,1fr) !important;
  gap:24px !important;
  align-items:start !important;
  text-align:center !important}
body.catalog-product-view .apollo-trust .ap-in > div{min-width:0 !important}
body.catalog-product-view .apollo-trust .ap-in h3,
body.catalog-product-view .apollo-trust .ap-in p{
  text-align:center !important;margin-left:auto !important;margin-right:auto !important}
@media (max-width:767px){
  body.catalog-product-view .apollo-trust .ap-in{
    grid-auto-flow:row !important;grid-auto-columns:auto !important;gap:18px !important}
}

/* ---- 46r. Buy-box tail: close the gap the removed blocks left behind ------
   With the wallet row and utility links gone, Add to Cart is the last thing in
   the card - and the space those blocks used to occupy was still being paid
   for twice: .product-left margin-bottom 50px + .product-info-main
   padding-bottom 34px = 84px of naked white under the button.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .product-left{
  margin-bottom:0 !important}
/* Match the image card exactly. Measured at 1600, button -> card edge was
   10px (actions box) + 20px (fieldset margin) + 24px (card padding) = 55px,
   against the gallery card's 20px. Zero the fieldset margin and trim the card
   padding so both cards close on the same 20px. */
body.catalog-product-view .box-tocart > .fieldset{margin-bottom:0 !important}
body.catalog-product-view .box-tocart{margin-bottom:0 !important}
/* button -> card edge now: 10px (the .actions wrapper sits 10px below the
   button, structural) + 0 + 9px padding + 1px border = 20px, the same close
   the gallery card makes under the shipping estimator. */
body.catalog-product-view .product-info-main{
  padding-bottom:9px !important}

/* ---- 46s. Sticky buy bar on desktop --------------------------------------
   The bar exists and apollo-pdp-adapter.js already toggles .is-visible past
   scrollY 620 - verified live. It never showed on desktop for two reasons:

     1. the only rules giving it position:fixed / display:flex sit inside
        @media (max-width:767px), so desktop kept the bare display:none;
     2. there was no `.is-visible` rule anywhere, so the class the JS toggles
        had nothing to switch.

   Both fixed here. Treatment follows the design: ink ground, 3px Apollo blue top
   rule, pinned full width. Mobile keeps its own always-on bar from section 17a.
   ------------------------------------------------------------------------- */
@media (min-width:768px){
  body.catalog-product-view .apollo-sticky-bar{
    display:none !important;
    position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;
    z-index:50 !important;
    align-items:center !important;justify-content:flex-end !important;gap:20px !important;
    background:#16181c !important;border-top:3px solid #0188cc !important;
    padding:12px 24px !important;
    box-shadow:0 -4px 18px rgba(15,17,20,.18) !important}
  body.catalog-product-view .apollo-sticky-bar.is-visible{
    display:flex !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-price{
    display:flex !important;align-items:baseline !important;gap:10px !important;margin:0 !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-amt{
    font-family:'Barlow Condensed',Barlow,Helvetica,Arial,sans-serif !important;
    font-size:30px !important;font-weight:700 !important;line-height:1 !important;
    color:#fff !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-cta{
    flex:0 0 auto !important;
    background:#0188cc !important;color:#fff !important;border:0 !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:14px !important;font-weight:700 !important;letter-spacing:.08em !important;
    text-transform:uppercase !important;
    padding:0 28px !important;min-height:46px !important;cursor:pointer !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-cta:hover{
    background:#006ea6 !important}
  /* the bar floats over the footer - keep the last footer row clear of it */
  body.catalog-product-view .page-footer{padding-bottom:86px}
}

/* ---- 46t. Drop the "Brand <name>" row above QTY --------------------------
   The brand is now shown as a logo at the top of the buy box (46q), so the
   text row directly above the quantity field was saying it twice. Scoped to
   .product-info-main so the brand still appears in the specification tab.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .product.attribute.brand,
/* ...and with the brand row gone its wrapper is empty, but .product-info-price
   still holds 31.5px open at the tail of the buy box. Hidden at BOTH
   breakpoints, next to the cause, rather than re-ordering a box that no longer
   renders anything. */
body.catalog-product-view .product-info-main-inner > .product-info-price{
  display:none !important}

/* ---- 46u. Product title keeps its own casing -----------------------------
   The uppercase is the theme's, not ours - product-view-styles.css has
   `.product-view-style-04 .product-media-wrapper .page-title-wrapper
   .page-title{text-transform:uppercase}` at (0,4,0). The stored product name
   is already correctly cased ("DENON AVC-X 4800H Home Theatre Amplifier"), so
   the transform was throwing away real information: model numbers and mixed-
   case brand names read worse shouted, and screen readers can spell out
   all-caps strings letter by letter.
   ------------------------------------------------------------------------- */
body.catalog-product-view .page-title-wrapper .page-title,
body.catalog-product-view .page-title-wrapper h1,
body.catalog-product-view .page-title-wrapper h1 span,
body.catalog-product-view .product-info-main h1,
body.catalog-product-view .product-info-main h1 span{
  text-transform:none !important}

/* ---- 46v. Sticky bar contents, to the design -----------------------------
   Was price + CTA only. The design carries a 56x48 thumbnail, the product name
   with the stock note beneath it, then price + struck RRP, then the CTA, all
   inside a 1400px centred rail. Structure now matches; this dresses it.
   The name is the element that must never wrap the bar - it ellipsises.
   ------------------------------------------------------------------------- */
body.catalog-product-view .apollo-sticky-bar .ap-sb-inner{
  width:100% !important;max-width:1400px !important;margin:0 auto !important;
  display:flex !important;align-items:center !important;gap:20px !important;
  padding:0 !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-thumb{
  width:56px !important;height:48px !important;flex:0 0 56px !important;
  object-fit:contain !important;background:#fff !important;padding:2px !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-meta{
  flex:1 1 auto !important;min-width:0 !important;
  display:flex !important;flex-direction:column !important;gap:2px !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-name{
  display:block !important;
  font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:14px !important;font-weight:600 !important;line-height:1.25 !important;
  color:#fff !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-note{
  display:block !important;
  font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:12px !important;line-height:1.3 !important;color:#ff8a8a !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-price{
  display:flex !important;align-items:baseline !important;gap:10px !important;
  flex:0 0 auto !important;margin:0 !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-was{
  font-family:Barlow,Helvetica,Arial,sans-serif !important;
  font-size:14px !important;color:#6b7076 !important;
  text-decoration:line-through !important}

/* phones: the thumbnail is the first thing to go, then the name shrinks */
@media (max-width:767px){
  body.catalog-product-view .apollo-sticky-bar .ap-sb-inner{gap:12px !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-thumb{display:none !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-name{font-size:13px !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-was{display:none !important}
}

/* 46q-2. At 136px the logo and the dealer badge no longer share a line
   comfortably on narrower desktops, so the row is allowed to wrap and the
   badge keeps its own baseline. */
body.catalog-product-view .apollo-brandrow{flex-wrap:wrap !important;row-gap:8px !important}

/* ===========================================================================
   47. MOBILE REMEDIATION, SECOND PASS (2026-09-24).
   Closes the items the 2026-09-22 audit left open, now that the wallet row and
   utility links have been removed from the template outright.
   =========================================================================== */

/* ---- 47a. Header: 142px -> 109px of an 812px viewport --------------------
   Was 18% of the screen before the gallery started. The bar is two stacked
   bands - logo, then the icon row - and the logo is 250px wide, so the icons
   cannot share its line at 375px without shrinking the logo below a usable
   size. Tightening the bands instead, measured one value at a time:

     .panel.header    padding-top 9px -> 0      (9px)
     logo panel       71px -> 48px              (23px, logo link stays 44px)
     #header-search-wrap padding 4px -> 2px     (4px)
     .container.sticky-menu padding 9px -> 4px  (varies)

   A tighter variant (logo 40px) reached 121px but dropped the logo link under
   the 44px tap minimum, so it was rejected. Every header control still
   measures >=44px on both axes after this.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .page-header .container.sticky-menu{
    padding-top:4px !important;padding-bottom:4px !important}
  .page-header .panel.wrapper > .panel.header{
    padding-top:0 !important;padding-bottom:0 !important}
  .page-header .header-panel-left-bg,
  .page-header .header-panel-left,
  .page-header .header-panel-left-main{height:48px !important}
  .page-header .logo{
    height:44px !important;margin:2px 0 0 !important;
    line-height:0 !important;display:block !important}
  /* :not(.hidden-xs) is load-bearing - the SAME specificity trap that produced
     the duplicate tab headers. A blanket `.page-header .logo img{display:block
     !important}` at (0,2,1) outranks the theme's `.hidden-xs{display:none
     !important}` at (0,1,0), so BOTH the desktop lockup and the mobile mark
     rendered, stacked, with the icon row painting over the lower one. */
  .page-header .logo img:not(.hidden-xs){
    max-height:44px !important;width:auto !important;height:auto !important;
    display:block !important}
  .page-header #header-search-wrap{
    padding-top:2px !important;padding-bottom:2px !important}

  /* the loupe inside the expanded search field was 30px wide - the only
     header control still short of 44 on its minor axis */
  .page-header .amsearch-button.-loupe{
    min-width:44px !important;width:44px !important}
}

/* ---- 47b. Remaining sub-44px targets ------------------------------------
   The brand logo link measured 200x42 at phone width (the crop box is 42px
   there) and the accessory card product names 173x36. Both are primary
   navigation on a phone.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .apollo-brandrow .apollo-brand-logo-link{
    min-height:44px !important;align-items:center !important}
  body.catalog-product-view .apollo-acc-name{
    min-height:44px !important;display:flex !important;align-items:center !important}
}

/* ---- 47c. Cancel the client's float on table cells -----------------------
   client-custom-styles.css floats every td/th inside .product.info.detailed
   left, inside its own 320-767 block and without !important. It does not fire
   on the audited SKU, but it does on any product whose description is
   merchant-authored HTML containing a table - the cells escape the table box
   and stack. Cancelling it costs nothing where no table exists.
   ------------------------------------------------------------------------- */
@media (max-width:991px){
  body.catalog-product-view .product.info.detailed table td,
  body.catalog-product-view .product.info.detailed table th{
    float:none !important}
}

/* ---- 47d. Two fixed bottom bars were fighting on mobile ------------------
   The theme ships .mb-bottom-toolbar - a 44px fixed bar carrying nine nav
   buttons (home, search, cart, account, contact, wishlist, compare, menu and
   the store switcher) at z-index 800. Our sticky buy bar is fixed at bottom:0
   with z-index 900, so once it revealed it sat exactly on top of the toolbar
   and buried every one of those buttons. It was not in the first audit's
   section list, which is why this survived that pass.

   Stack rather than choose: the buy bar rides 44px up, directly above the
   toolbar, and the hidden transform has to clear both or the bar peeks over
   the toolbar while "hidden". Together they take 117px of an 812px screen,
   and the footer already reserves 150px.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  /* 48px, not 44: giving the toolbar's buttons a 44px height grows the bar
     itself to 48. Both numbers are pinned here so they cannot drift apart. */
  .mb-bottom-toolbar{height:48px !important}
  body.catalog-product-view .apollo-sticky-bar{
    bottom:48px !important;
    transform:translateY(calc(100% + 48px)) !important}
  body.catalog-product-view .apollo-sticky-bar.is-visible{
    transform:translateY(0) !important}

  /* the toolbar's own buttons were 40x40 in a 44px bar - let them fill it.
     Nine across 375px caps the width at ~41.7px, which clears WCAG 2.5.8 AA
     (24x24); the height is what was free to fix. */
  .mb-bottom-toolbar .menu-items .action,
  .mb-bottom-toolbar .group-switch .switcher{
    min-height:44px !important;height:44px !important;
    display:flex !important;align-items:center !important;justify-content:center !important}
}

/* ===========================================================================
   48. RE-AUDIT FIXES (2026-09-24). Eight defects the post-remediation re-score
   confirmed. Two of them (48a, 48b) are regressions section 47a introduced.
   =========================================================================== */
@media (max-width:767px){

  /* ---- 48a. Hamburger was 21px occluded and overlapped the logo link -------
     .nav-toggle is 44x44 at y29-73 but z-index 14, while #header-search-wrap
     is z-index 802 and starts at y52 - so the lower 21px of the toggle was
     covered, leaving a 44x23 effective target that misses even the AA 24x24
     floor, and the usable part sat on top of the home link. Lift the box wholly
     into the logo band and reserve its column so it stops overlapping. */
  .page-header .header-panel-left-bg{padding-left:44px !important}
  .page-header .nav-toggle{
    top:2px !important;left:0 !important;
    width:44px !important;min-width:44px !important;
    height:44px !important;min-height:44px !important;
    z-index:810 !important}

  /* ---- 48a-bis. The hamburger's short middle bar was left behind ----------
     header-styles.css draws the glyph as three bars inside what the theme
     assumes is a 20px-tall toggle: `.nav-toggle > span::before{top:0}` and
     `::after{bottom:0}` at 26x2, plus `.nav-toggle::before{top:8px}` at 16x2.
     The first two are anchored to the <span>; the short middle one is anchored
     to the TOGGLE. Section 15b made the toggle a 44px flex container that
     vertically centres the 20px span, so the span's bars moved down while this
     one stayed at +8 - landing 4px ABOVE the top bar instead of 9px below it.
     Centre it in the same 44px box the span centres in.
     48a is NOT the cause: deleting it leaves the identical inversion, so do not
     "fix" this by reverting 48a. */
  .page-header .nav-toggle::before{
    top:50% !important;left:0 !important;margin-top:-1px !important}

  /* ---- 48b. Accordion: the theme's 3px underline painted on EVERY row ------
     product-view-styles.css draws `.item.title > .switch::after{position:
     absolute;bottom:-3px;height:3px;background:#0188cc}` and relies on .switch
     being the containing block. styles-l only supplies position:relative at
     >=768, so below that the bar escaped and every accordion row read as the
     open one. Give .switch its containing block back rather than deleting the
     underline - the open row should still have one.
     Clipping it with `overflow:hidden` was the first attempt and overshot: the
     theme's bottom:-3px sits wholly outside the padding box, so the clip
     swallowed the ACTIVE row's bar too and nothing looked selected. State the
     bar explicitly instead - off on every row, flush under the open one. */
  body.catalog-product-view .product.data.items > .item.title > .switch{
    position:relative !important;overflow:visible !important}
  body.catalog-product-view .product.data.items > .item.title > .switch::after{
    display:none !important}
  /* NOTE: the `.active` row deliberately gets NO ::after underline. Section 47's
     `box-shadow:inset 3px 0 0 #0188cc` already marks the open row with a left
     rail, and restoring the underline here painted TWO competing 3px blue
     indicators on the same row. The two rules above stay - they are what stop
     the theme's bottom:-3px bar escaping onto every closed row, and
     `position:relative` is also what section 15c-i's chevron centring resolves
     `top:50%` against. Removing either re-breaks something else. */

  /* 48c was here: a mobile-only override of the struck RRP colour. It lost to
     section 23b, whose `.old-price .price-final_price .price` is (0,6,1) to
     this rule's (0,5,1), and it would only ever have fixed phones - the 2.64:1
     failure is unmediated. Corrected at source instead: every struck-RRP
     declaration (lines ~1056/1393/1423/2435/3519) now uses --ap-muted #6b7076
     (4.99:1) rather than --ap-disabled #9aa0a7. The RRP is content, not a
     disabled control, so it was the wrong token to begin with. */
}

/* ---- 48d. Drawer Account panel: 36px rows in a 48px drawer ---------------
   The Menu half meets 48px; the Account half's five links (My Account, Wish
   List, Sign In, Create an Account) were 306x35.7 on a 35.7px pitch. Sign In
   and Create an Account are the account entry points.
   ------------------------------------------------------------------------- */
@media only screen and (max-width:1023px){
  .sections.nav-sections .header.links li > a,
  .sections.nav-sections .header.links li .cdz-dropdown > a,
  #mobi_menu-container .header.links li > a{
    display:flex !important;align-items:center !important;
    box-sizing:border-box !important;
    min-height:44px !important;padding:6px 16px !important;
    line-height:1.3 !important}
}

/* ---- 48e. "Ask a question": contrast, 90px of dead space, and the type ----
   The only control between the gallery and the call-us strip, and it was the
   least readable text in the block: white on #26a9e0 = 2.68:1. #0176b0 takes it
   to 4.98:1.
   It also floated in 91.6px of white: 41px above from `.add_question
   {margin-top:40px}` plus a 1px border, and 50px below from `.faq_block
   {margin-bottom:50px}` - both non-important, and on a 375px screen that is 11%
   of the viewport spent on one 44px button. The hr inside .faq_block is
   clear:both with margin:20px 0, and its bottom margin COLLAPSES through the
   empty FAQ-list div and out of .faq_block, so it floors the gap at 20px and
   makes any smaller margin-bottom inert - hence the hr rule below.
   Finally the button was the one control here off the design system: Roboto
   rather than Barlow, and a stale #26a9e0 hairline left around the new fill.
   ------------------------------------------------------------------------- */
@media (max-width:991px){
  body.catalog-product-view .product-media-wrapper .btn-slide.popup-with-form,
  body.catalog-product-view .product-media-wrapper .product-inquiry-button,
  body.catalog-product-view .product.media.full-width a.btn-slide.add_question{
    background:#0176b0 !important;color:#fff !important;
    border-color:#0176b0 !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-weight:600 !important}
  body.catalog-product-view .product.media.full-width a.btn-slide.add_question{
    margin-top:16px !important}
  body.catalog-product-view .product.media.full-width .productFaq .faq_block{
    margin-bottom:18px !important}
  body.catalog-product-view .product.media.full-width .productFaq .faq_block hr{
    margin-bottom:0 !important}
}

/* ===========================================================================
   49. BELOW-768 PLATFORM FIXES (2026-09-24). Two theme-level defects the
   re-score traced across several sections at once.
   =========================================================================== */

/* ---- 49a. FontAwesome is never declared below 768px ----------------------
   The theme's only @font-face{font-family:FontAwesome} lives in
   styles-l.min.css, whose <link> carries media="screen and (min-width:768px)",
   so the face is never registered on phones - while font-awesome's CLASS rules
   (.fa{font-family:FontAwesome} and .fa-*::before{content:'\fxxx'}) ship in a
   media=all sheet and DO apply. The PUA codepoints therefore fall back to the
   text face and paint .notdef boxes: 3 of the 4 visible bottom-toolbar icons,
   its 3 pager dots, the 3 breadcrumb chevrons, .action.towishlist::before and
   the 4 footer accordion chevrons - 14 visible tofu boxes.
   This is the same gate noted against the breadcrumb separator in section 41;
   the re-score found its real blast radius.
   Scoped to max-width:767px on purpose, so desktop keeps the theme's own face
   and this can neither shadow it nor trigger a duplicate 77KB download.
   Unversioned /static paths so the rule survives a static-content deploy (both
   verified 200: woff2 77160 B, woff 98024 B). font-display:block, not swap -
   an icon font must never flash a fallback glyph.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  @font-face{
    font-family:'FontAwesome';
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url('/static/frontend/Codazon/fastestpro_sneakers/en_AU/fonts/fontawesome-webfont.woff2') format('woff2'),
        url('/static/frontend/Codazon/fastestpro_sneakers/en_AU/fonts/fontawesome-webfont.woff') format('woff')}
}

/* ---- 49b. Sticky header had no effective spacer: a 108px jump -----------
   $.codazon.stickyMenu already reserves the gap - it writes an inline
   min-height on the parent. That spacer is dead on this store, because the
   generated header-styles.css ships
   `header.page-header.header-style-33{min-height:auto !important}`, and an
   author !important beats a non-important inline style. So one pixel past the
   threshold .js-sticky-menu goes position:fixed, .page-header collapses
   109px -> 1px, and the whole document lurches up 108px - on every scroll, in
   both directions.
   The override must OUT-SPECIFY (0,2,1), not merely come later: `body
   .page-header` at (0,1,1) loses even with !important. body.catalog-product-view
   + header + .page-header is (0,2,2), and does not depend on the
   header-style-33 id, which changes if the header layout row is swapped.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view header.page-header{min-height:109px !important}
}

/* ===========================================================================
   50. MOBILE SEARCH BAR (2026-09-24). The opened search bar buried the header
   icon row and its own dismiss control.
   =========================================================================== */

/* ---- 50a. The bar covered the icons and left a 44x9 dismiss target -------
   header-styles.css sets `.header-search .search-form{position:fixed;top:40px}`
   and `.input-opened .search-form{top:47px}`. That is tuned for a ~40px header;
   Apollo's is 109px with the icon row at y56-100, so the 375x44 bar lands at
   y47-91, covers the phone, cart and search icons (elementFromPoint at each of
   their centres returns the search INPUT), clips the logo's bottom 3px and
   leaves an 18px dead band above the header edge.
   The ONLY thing that removes .input-opened is a click on .search-toggle, and
   the bar left just 44x9 of it - under even the 24x24 AA floor. Worse, the bar
   is position:fixed while the toggle is static, so after any scroll the toggle
   leaves the viewport and the bar cannot be dismissed at all.
   Align the bar to the icon row, reserve its right 44px, and pin the toggle
   there for as long as the bar is open.
   Do NOT instead un-hide .amsearch-button.-close: that is Knockout's "Clear
   Field" button and it does not remove .input-opened.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body .header-search.input-opened .search-form{
    top:56px !important;height:44px !important;
    left:0 !important;right:44px !important;
    width:calc(100% - 44px) !important}
  body .header-search.input-opened .search-toggle{
    position:fixed !important;top:56px !important;right:0 !important;left:auto !important;
    width:44px !important;min-width:44px !important;
    height:44px !important;min-height:44px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    background:#fff !important;z-index:11 !important}

  /* ---- 50c. The live result panel overlapped the bar 50a had just pinned.
     50a pins the opened bar at top:56px/height:44px, so its bottom edge is y100.
     Amasty leaves the panel at top:76px + margin-top:5px = y81, at z-index 99
     against the form's 10, so the panel's first 19px sat on top of the field:
     the bottom 19px of the clear button was dead and the caret could not be
     placed on the field's bottom row.
     NOTE the DOM shape: .amsearch-result-section is a SIBLING of .header-search,
     not a descendant - both are children of .amsearch-form-block - so any
     `.header-search ... .amsearch-result-section` selector matches nothing.
     margin-top must be zeroed too, or top:100px still renders at 105px. */
  body .amsearch-form-block > .amsearch-result-section{
    top:100px !important;margin-top:0 !important}
}

/* ---- 50b. The loupe was white on white (1:1) ----------------------------
   The client block in custom-styles.css forces
   `filter:brightness(0) invert(1) !important` on the header loupe below 768px.
   At that width the button only ever paints inside the opened search bar, whose
   background and input wrapper are both #fff - so the 19x19 glyph renders pure
   white on white. It is decorative while `-disabled`, but the moment a keystroke
   lands the class drops, pointer-events goes to auto, and that invisible glyph
   becomes the live CLEAR control.
   `filter:none` is NOT enough: the Amasty SVG carries a baked-in fill="#a9a9a9",
   which is 2.35:1 on white and still under the 3:1 that 1.4.11 wants for a
   graphical object. brightness(0) alone composites it to #000 (21:1); the
   opacity() step softens it to ~#595959 (7:1) so it reads as chrome rather than
   body copy. Mirrors the >=992px loupe fix in section 25.
   `.-clear` is included because the wrapper is `-dynamic-width`: once text is
   typed the button reflows and would otherwise stay the same invisible glyph.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  #header-search-wrap .header-search.input-opened .amsearch-button.-loupe,
  #header-search-wrap .header-search.input-opened .amsearch-button.-clear{
    filter:brightness(0) opacity(.65) !important}
}

/* ---- 50d. The field's own text and placeholder were never re-coloured ----
   Section 42 styles this input inside `@media (min-width:768px)` AND scopes it
   to `.page-header .header-panel-right li.search-link`. Below 768 the theme
   MOVES the whole .amsearch-wrapper-block out of li.search-link into
   #header-search-wrap, so that selector cannot match at 375 even with the media
   gate removed. header-styles.css's own
   `@media (max-width:767px){.header-search input.input-text{color:#282828}}`
   misses for a second reason: Amasty's input carries .amsearch-input, not
   .input-text.
   So the survivors are `body input[type=text]{color:#8c8c8c}` = 3.36:1 and
   Amasty's `::placeholder{color:#999}` = 2.85:1, both 16px/400 Roboto on the
   white bar. 16px regular is not large text, so 1.4.3 AA wants 4.5:1 - and the
   placeholder is the field's ONLY name (no label, no aria-label).
   Third instance of the same min-width:768px gate as 49a and 54.
   font-size deliberately NOT set: the 16px !important earlier in this file is
   what stops iOS zooming on focus and must survive.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  #header-search-wrap .header-search input.amsearch-input{
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    color:#16181c !important}
  #header-search-wrap .header-search input.amsearch-input::placeholder{
    color:#6b7076 !important;opacity:1 !important}
}

/* ---- 51. Price row: client margins stacking on the flex gap --------------
   custom-styles.css (client block, above the APOLLO markers) sets
   `.product-info-main .price-box .special-price{margin:0 20px 0 0}` and
   `.old-price{margin-right:10px}` at (0,3,0) with no !important. Section 39's
   `gap:16px !important` is on the PARENT, so it cannot cancel a flex item's own
   margin - the two stack. Measured at 375: special-price ends x187.31 and
   old-price starts x223.31, i.e. 36px where the design specifies 16. At 1440 the
   same 10px leaves 26px between the RRP and the 27% OFF chip. Zero both so the
   flex gap is the only thing spacing the row. No media query: the 16px gap is
   the approved spec at every width and the stray margins show on desktop too.
   ------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .price-box .special-price,
body.catalog-product-view .product-info-main .price-box .old-price{
  margin-right:0 !important}

/* ---- 52. Wishlist / Compare colour below 992px --------------------------
   Section 21's white treatment is gated at min-width:992px, so below that the
   theme's `.product-view-style-04 ... .product-addto-links .action{background:
   #000;border:1px solid #000}` survives and both icon buttons render as solid
   black 44x44 squares directly under an OUTLINED Add to Cart - reading as the
   primary actions on the page. The approved mobile mockup specifies a white
   fill with a #d6dade hairline. Gated at 991, not 767, per the band policy in
   section 15: 768-991 would otherwise stay black.
   !important is required: the theme rule is non-important but (0,5,0), and
   these selectors are only (0,4,0).
   ------------------------------------------------------------------------- */
@media (max-width:991px){
  body.catalog-product-view .product-addto-links .action.towishlist,
  body.catalog-product-view .product-addto-links .action.tocompare{
    background:#fff !important;
    border:1px solid #d6dade !important;
    color:#16181c !important}
  body.catalog-product-view .product-addto-links .action.towishlist:hover,
  body.catalog-product-view .product-addto-links .action.tocompare:hover{
    background:#fff !important;
    border-color:#16181c !important}
  /* the theme paints the glyph white, which would vanish on the new fill */
  body.catalog-product-view .product-addto-links .action.towishlist:before,
  body.catalog-product-view .product-addto-links .action.tocompare:before{
    color:#16181c !important}
}

/* ---- 53. Drawer Account pane: an orphaned white ground ------------------
   custom-styles.css (client block, above the markers) still carries
   `.nav-sections-item-content[id="store.links"]{background:#fff}` from the
   superseded white-Account design. The rest of the drawer has since gone dark,
   so with Account active the pane paints 321x269 of white at the top and the
   drawer's own #353535 shows for the remaining 543px - a hard edge at y269 and
   a full theme flip from the Menu half.
   Let the drawer's ground show through rather than stretching the pane: no
   min-height, so nothing depends on .section-items' stretched flex height. The
   0.8px #f2f2f2 row rules were drawn for the white ground and have to come with
   it. Scoped to [id="store.links"] so the Menu pane is untouched, and to
   max-width:1023px to match 48d.
   ------------------------------------------------------------------------- */
@media only screen and (max-width:1023px){
  .sections.nav-sections .nav-sections-item-content[id="store.links"]{
    background:transparent !important}
  .sections.nav-sections #store\.links .header.links li,
  .sections.nav-sections #store\.links .header.links li > a,
  .sections.nav-sections #store\.links .header.links li > a span{
    color:#fff !important}
  .sections.nav-sections #store\.links .header.links li,
  .sections.nav-sections #store\.links .header.links li > a,
  .sections.nav-sections #store\.links .header.links{
    border-color:rgba(255,255,255,.14) !important}
}

/* ---- 54. Search autocomplete: product titles were white on white ---------
   Section 42's colour/typography suite for the live result panel sits inside
   `@media only screen and (min-width:768px)`, so none of it reaches 375. Below
   that gate the winning declaration on the title link is the client's own
   unscoped `.page-header .panel.header a{color:#fff}` at (0,3,1) - a DIRECT
   declaration, so it beats inheritance from header-styles.css's
   `@media (max-width:767px){.page-header{color:#fff}}` and out-specifies
   product-view-styles.css's `.page-header .product-item .product-item-link
   {color:#000}` at (0,3,0) by one class.
   Measured with "sony" typed into the opened header search: the panel is
   position:fixed [0,81,375.2,575.1] on rgb(255,255,255) and all three title
   links compute rgb(255,255,255) - 1.00:1. The only legible text in each row
   was the orange matched substring and the prices.
   This is the same failure mode as the FontAwesome gate in 49a: a whole block
   of styling shipped behind min-width:768px while the markup it styles renders
   at every width. Worth grepping for others.
   Mirrors section 42's title block on the same two selectors it uses, (0,5,0)
   and (0,4,1), plus !important - clears (0,3,1) twice over. Deliberately NOT
   hung on the bare .amsearch-item: that inherits into .price-box and
   re-typefaces the prices at mobile only.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  .page-header .amsearch-result-section .amsearch-item .amsearch-link.product-item-link,
  .page-header .amsearch-result-section .amsearch-item a.amsearch-link{
    display:block !important;
    font-family:Barlow,Helvetica,Arial,sans-serif !important;
    font-size:14px !important;font-weight:600 !important;line-height:1.35 !important;
    color:#16181c !important;text-align:left !important;text-decoration:none !important;
    margin:0 0 4px !important}
  .page-header .amsearch-result-section .amsearch-item a.amsearch-link:hover{
    color:#0188cc !important;text-decoration:none !important}
}

/* ---- 55. The theme ships its OWN sticky buy bar, and it was never audited
   From scrollY ~2400 Codazon adds .active to `.box-tocart.att-scr-qty.scr-top`,
   which becomes position:fixed at top:0, z-index 881 (over our own header at
   111), 375x66.4, carrying a thumbnail, a SECOND qty stepper and a SECOND Add
   to Cart - the latter only 110x40, under this file's own 44px floor, and
   rendered as a bare bag glyph because the theme sets font-size:0 on it.
   Running at the same time as our .apollo-sticky-bar (72.4) and the theme's
   bottom toolbar (48), that is 186.8px of an 812px viewport - 23% - in fixed
   chrome, with two competing add-to-cart affordances pointing at the same
   product. The bar budgets in sections 18c and 47d count two bars, not three;
   apollo-pdp.css had never named these selectors at all.
   Ours is the designed one (thumbnail, name, price, struck RRP, 105x50 BUY
   NOW), so retire the theme's below 768.
   display:none, NOT position:static: `.active` stays on the element either way,
   and every theme descendant rule keyed on it keeps firing on the real in-flow
   buy box - hiding BUY NOW, wishlist and compare, collapsing ADD TO CART to a
   glyph and revealing .scr-qty-thumb. Neutralising only the positioning leaves
   a mangled buy box that flashes during the scroll-up handoff.
   Layout-safe: the widget computes its threshold once at DOM ready from
   $qtyBox.offset().top + outerHeight() + 20, before .active can exist, and
   #qtybox-anchor carries an inline min-height that holds the space - so hiding
   the active state changes no geometry and cannot feed back into the toggle.
   Desktop untouched; there the theme bar is the only sticky buy affordance.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .box-tocart.att-scr-qty.scr-top.active{
    display:none !important}
}

/* ===========================================================================
   56. GALLERY AFFORDANCES (2026-09-24). The stage opens fullscreen on tap and
   the overlay works, but neither the way in nor the way out was visible.
   =========================================================================== */

/* ---- 56a. No affordance that the stage opens fullscreen -----------------
   `.fotorama__fullscreen-icon` is display:none from the theme's compiled
   gallery CSS at every width, and stock fotorama only reveals it on
   :hover/:focus - neither of which exists on touch. So on the one view where
   zooming a 65" television actually matters, the feature is undiscoverable.
   Guarded with `.fotorama:not(.fotorama--fullscreen)` because the SAME element
   becomes the "exit fullscreen" control once the overlay opens (56b styles that
   state separately); an unguarded rule hijacks it.
   The stock sprite is drawn from gallery.png at a 80x80 window, which does not
   scale cleanly to 44px, so both states use an inline SVG instead - no extra
   request, and it stays crisp at any DPR.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage .fotorama__fullscreen-icon{
    display:block !important;
    width:44px !important;height:44px !important;
    /* BOTTOM-right, not top-right: .apollo-save-badge is absolute at top:0/
       right:0 of the same card and covered 68.9% of this chip, leaving 2.7px of
       the 22px glyph visible - a bare white arc on the product photo.
       Raising z-index does not help and makes it worse: .fotorama__wrap is
       position:relative;z-index:0, so it is a stacking context and this chip's
       z-index is scoped INSIDE it while the badge competes outside - and the
       chip box fully contains the badge's struck price, so lifting it would
       simply bury the saving instead. A fixed offset (right:77px / top:46px)
       would track the badge's content box, whose width varies with the saving
       amount. Bottom-right is clear of the badge, the scarcity bar (top-left)
       and the dots, and is the conventional place for an expand control. */
    top:auto !important;bottom:8px !important;right:8px !important;left:auto !important;
    background-color:rgba(255,255,255,.92) !important;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M15 3h6v6M9 21H3v-6M15 21h6v-6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:22px 22px !important;
    border-radius:50% !important;
    box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
    opacity:1 !important;
    z-index:1000 !important}
}

/* ---- 56b. Fullscreen had no visible way out ------------------------------
   Inside the overlay the same element is the close control, and its 80x80
   sprite window at background-position -80px 0 is entirely TRANSPARENT in
   gallery.png - verified pixel by pixel. So the user landed on a full-screen
   white overlay with an invisible chip in the corner and, on a touch device
   with no Escape key, no way off it. Draw a real X.
   Not media-scoped: the sprite window is empty at every width.
   ------------------------------------------------------------------------- */
body.catalog-product-view .fotorama--fullscreen .fotorama__fullscreen-icon{
  display:block !important;
  width:44px !important;height:44px !important;
  top:8px !important;right:8px !important;bottom:auto !important;left:auto !important;
  background-color:rgba(255,255,255,.92) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:22px 22px !important;
  border-radius:50% !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
  opacity:1 !important;
  z-index:1001 !important}

/* ---- 56c. Fullscreen dots row was clipped by 4px ------------------------ */
@media (max-width:767px){
  /* margin-top:0 is the load-bearing half: stage 768 + a 4px nav-wrap margin
     + 44px of dots = 816 against an 812px overflow:hidden overlay, so every dot
     was clipped to 40px. Do NOT instead re-scope the general nav-wrap margin to
     `:not(.fotorama--fullscreen)` - an earlier unmediated `margin-top:14px
     !important` would then win inside the overlay and push the row 14px past
     the clip, making it worse. */
  body.catalog-product-view .fotorama--fullscreen .fotorama__nav-wrap,
  body.catalog-product-view .fotorama--fullscreen .fotorama__nav{
    overflow:visible !important;margin-top:0 !important}
}

/* ===========================================================================
   57. SPECIFICATIONS TAB: USE THE WHOLE PANEL, AND DROP "VIEW MORE".
   Client: "the 'view more' is still there. Wasn't that going to be removed?
   why is only half the page being utilised?"

   Two separate causes, both measured on the Bowers & Wilkins PI6.

   (a) HALF WIDTH, part one - the summary band.
       The design's band is five tiles across (design line 392,
       grid-template-columns:repeat(5,1fr)). We build three or four tiles for
       most products, and a fixed five-track grid put them in the first three
       tracks with two empty tracks - roughly 40% of the panel - beside them.
       The adapter now stamps data-cells, so the track count follows the
       content.

   (b) HALF WIDTH, part two - the spec sheet.
       The design's sheet is columns:2 with break-inside:avoid on each group,
       and its mockup carries TWELVE groups, so they distribute across both
       columns. Real products frequently have ONE group. An unbreakable single
       group cannot span two columns, so it all stacked into column one and
       left column two empty - the "half the page" the client is looking at.
       A lone group is allowed to flow; rows stay whole so a long value like
       "Battery Life and Charging" never splits mid-row across the gutter.

   (c) "VIEW MORE" is the THEME's, not ours: details.phtml line 122 runs its own
       collapseText() over #description when the theme setting
       pages/product_view/desc_tab_max_height is non-zero, wrapping the
       description in .panel-toggle-wrap and appending a .content-toggle. The
       approved design shows the description in full with no toggle. Unclamp it
       and hide the control. Scoped to #description so the shipping-estimator
       accordion, which uses the same .content-toggle class, is untouched.
   =========================================================================== */

/* (a) summary band follows its tile count.
   DESKTOP ONLY. An attribute selector outranks the plain-class rules that
   sections 14a and 46 use inside their max-width media queries, so left
   unscoped these would have forced four tiles across a phone. Below 992px the
   existing 3-up and 2-up bands still govern. */
@media (min-width:992px){
  body.catalog-product-view .apollo-spec-summary[data-cells="1"]{grid-template-columns:1fr}
  body.catalog-product-view .apollo-spec-summary[data-cells="2"]{grid-template-columns:repeat(2,1fr)}
  body.catalog-product-view .apollo-spec-summary[data-cells="3"]{grid-template-columns:repeat(3,1fr)}
  body.catalog-product-view .apollo-spec-summary[data-cells="4"]{grid-template-columns:repeat(4,1fr)}
}

/* (b) a lone spec group may span both columns; rows stay whole */
body.catalog-product-view .apollo-spec-sheet > .apollo-spec-group:only-child{
  break-inside:auto;-webkit-column-break-inside:auto;page-break-inside:auto}
body.catalog-product-view .apollo-spec-row{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}

/* (c) no "View more" on the description tab */
body.catalog-product-view #description .panel-toggle-wrap .content-outer{
  max-height:none !important;overflow:visible !important}
body.catalog-product-view #description .panel-toggle-wrap .content-toolbar,
body.catalog-product-view #description .panel-toggle-wrap .content-toggle{
  display:none !important}
/* our own mobile clip and its toggle go too - the client wants the copy shown */
body.catalog-product-view #description .apollo-desc-clip{
  max-height:none !important;overflow:visible !important}
body.catalog-product-view #description .apollo-desc-toggle{display:none !important}

/* ===========================================================================
   58. RELATED-CARD CONTROLS, AND "ASK A QUESTION".
   Client: "you roll over the related products the icons look very bad" and
   "where is 'ask a question' button?"

   (a) THE HOVER ICONS. Measured on the B&W PX8 related row at 1440px, the
       three controls that appear over the photo are:
         button.action.tocart      28 x 44   white, 2px #16181c border
         a.action.towishlist       37 x 37   white, 1px #0188cc border
         a.action.tocompare        37 x 37   solid #0188cc
       Three sizes, three treatments, three baselines (358/355/355), butted
       together over the product image, plus a loose 13x13 checkbox at the card
       corner feeding the "Check items to add to the cart or SELECT ALL" bulk
       toolbar above the row.

       Section 22 already styles these cards to the design - white card,
       #e3e6ea border, 180px photo, and a full-width 44px ADD TO CART. That
       button never got its width because it does not live in the card body at
       all: the theme keeps it inside .button-hover-wrap, the overlay that
       floats over the photo, wrapped in a form that shrink-wraps to 28px, so
       `width:100%` resolved against 28px.

       The adapter moves the real form into .product-item-details. Everything
       else in the overlay goes: the design's card has one control, it is not a
       hover state, and it is not a row of icons.

   (b) ASK A QUESTION. The adapter adds a working link under the buy box and
       stamps html.apollo-has-ask when it does. Only then is the theme's own
       inquiry button retired at every width - if the FAQ block is absent there
       is no popup to open, no link is added, and section 27c's desktop-only
       hide continues to apply exactly as before.
   =========================================================================== */

/* (a) the bulk-select UI has no counterpart in the design */
body.catalog-product-view .block.related .block-actions,
body.catalog-product-view .block.related .field.choice.related{display:none !important}

/* the whole hover overlay goes - the adapter has taken the button out of it */
body.catalog-product-view .block.related .button-hover-wrap{display:none !important}

/* the moved form must not re-shrink the button */
body.catalog-product-view .block.related .product-item-details .apollo-card-cart{
  display:block !important;width:100% !important;max-width:none !important;
  margin:0 !important;padding:0 !important;position:static !important;float:none !important}
body.catalog-product-view .block.related .product-item-details .action.tocart{
  width:100% !important;min-width:0 !important;height:44px !important;
  margin:14px 0 0 !important;padding:0 10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:#fff !important;border:2px solid #16181c !important;color:#16181c !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:13px !important;
  font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase !important;
  white-space:nowrap !important;overflow:hidden !important}
body.catalog-product-view .block.related .product-item-details .action.tocart:hover{
  background:#16181c !important;color:#fff !important}
/* the card body is a column so the button can sit on the bottom edge */
body.catalog-product-view .block.related .product-item-details{
  display:flex !important;flex-direction:column !important;flex:1 1 auto !important}
body.catalog-product-view .block.related .product-item-details .apollo-card-cart{margin-top:auto !important}

/* (b) one inquiry control, ours, at every width - and only once it exists */
html.apollo-has-ask body.catalog-product-view .product-media-wrapper .btn-slide.popup-with-form,
html.apollo-has-ask body.catalog-product-view #fme-faq-btn-popup-open,
html.apollo-has-ask body.catalog-product-view .productFaq .faqsaddslide{display:none !important}
body.catalog-product-view .apollo-utils .apollo-ask{cursor:pointer}

/* ===========================================================================
   59. ACCESSORY CARD BODY: THE DESIGN'S RHYTHM, NOT AUTO MARGINS.
   Client: "fix the spacing of the view product button and price, it looks like
   it's missing some margins or padding."

   Measured on the approved mockup's own card at 1440px, rather than guessed:
     body            display:flex; flex-direction:column; padding:18px 20px 20px
                     gap:8px
     name            flex:1 1 0%
     every gap       8px, uniformly - brand->name, name->price, price->button
     button          height:44px; margin-top:0
     button bottom to card edge: 20px (the body's own bottom padding)

   Ours had NO gap at all. The rhythm was improvised instead with
   `.apollo-acc-price{margin:10px 0 0}` and `.apollo-acc-cta{margin-top:auto}`,
   which gives two different spacings that both move with the content: 10px
   above the price always, and whatever is left above the button - which
   collapses to nothing as soon as the name runs to two lines and the card
   fills up. That is the crowding in the screenshot, and why it looks like a
   missing margin rather than a wrong one.

   Restoring gap:8px and flex on the name fixes the spacing AND aligns the
   buttons across the row, because the name absorbs the slack instead of the
   button being shoved down by an auto margin.
   =========================================================================== */
body.catalog-product-view .apollo-acc-body{
  gap:8px}
body.catalog-product-view .apollo-acc-name{
  flex:1 1 auto}
body.catalog-product-view .apollo-acc-price{
  margin:0}
body.catalog-product-view .apollo-acc-cta{
  margin-top:0;flex:0 0 44px}

/* The same body is narrower below 992px, where section 46 re-pads it; the gap
   is inherited from above and needs no per-breakpoint value, but the button
   keeps the 48px tap target that section 15 gives it there. */
@media (max-width:991px){
  body.catalog-product-view .apollo-acc-cta{flex:0 0 auto}
}

/* ===========================================================================
   60. BRAND LOGO WIDTH, AND THE BREADCRUMB'S ALIGNMENT.

   (a) BRAND LOGO, max 160px wide (client request).
       Section 46v sizes the logo on the height of its INK box so every brand
       reads at the same optical weight. That is right, but it bounds only the
       height: Wharfedale's artwork came out 568x60, wider than the product
       title under it. The cap is applied in the adapter by reducing the scale,
       not here by clipping - a max-width on the crop cuts the mark mid-letter,
       which is what the note in 46v was warning about. This just declares the
       bound the adapter reads, so the number lives with the other design
       tokens and can be tuned in one place.

   (b) BREADCRUMBS.
       Measured at 1440: the first crumb sits at x=20 while the content card
       below it starts at x=48 - 28px out. That 28px is the offset of the first
       column inside .row.main-inner and is constant at 1024, 1280, 1440 and
       1920, so it can be matched directly.
       Vertically the bar sat 8px under the header and 34px above the content.
       Both gaps are now equal.
   =========================================================================== */

/* (a) the bound the adapter reads when it scales the mark */
body.catalog-product-view .apollo-brandrow .apollo-brand-logo-crop{
  --ap-brand-logo-max-w:160px;
  height:auto;
  max-width:160px !important}
/* if the canvas read fails and the adapter cannot measure, the image still
   has to stay inside the same bounds */
body.catalog-product-view .apollo-brandrow .apollo-brand-logo{
  max-width:160px !important;object-fit:contain}
@media (max-width:767px){
  body.catalog-product-view .apollo-brandrow .apollo-brand-logo-crop{
    --ap-brand-logo-max-w:130px;max-width:130px !important}
  body.catalog-product-view .apollo-brandrow .apollo-brand-logo{
    max-width:130px !important}
}

/* (b) breadcrumbs: on the content's left edge, evenly spaced above and below.
   The space under the bar was not one value but three - the bar's own
   margin-bottom, .page-main's 8px top padding, and 18px from the empty
   .page.messages block that sits between them. Tuning the margin alone could
   never balance it. All three are zeroed and the bar owns both gaps, so the
   two numbers below are the only ones in play. */
body.catalog-product-view .breadcrumbs{
  padding:20px 10px 20px 0 !important;margin:0 !important}
body.catalog-product-view .breadcrumbs .items{
  padding-left:48px !important}      /* content card's left edge, measured */
/* The 26px under the bar was two rules, and the first is the ID trap this
   project has hit before: `body.catalog-product-view #maincontent{padding-top:
   8px !important}` is an ID selector, so a class selector cannot reach it
   however many classes it carries or how !important it is. Match the ID.
   The other 18px is .columns' own top padding. */
body.catalog-product-view #maincontent{padding-top:0 !important}
/* and the 18px is #maincontent .columns, an ID again - a class selector loses
   to it no matter how specific, so match the ID here too. The breadcrumb bar
   now owns all the space between the header and the content. */
body.catalog-product-view #maincontent .columns{padding-top:0 !important}
body.catalog-product-view .page.messages{margin-top:0 !important;margin-bottom:0 !important}

@media (max-width:991px){
  body.catalog-product-view .breadcrumbs{
    padding:14px 10px 14px 0 !important}
  body.catalog-product-view .breadcrumbs .items{padding-left:20px !important}
}

/* ===========================================================================
   61. "ASK A QUESTION" AS A CONTROL, NOT A LOOSE LINK.
   Client: "make it look more like other features on the page."

   It went back in as a bare 82x18 blue text link, which is what the design's
   utility ROW called for - three links side by side, separated by 18px, reading
   as a quiet footer to the buy box. With the other two removed (both were dead
   anchors, pulled at the client's request on 2026-09-22) the row holds one
   item, and a single small link adrift under a 64px BUY NOW and a 52px ADD TO
   CART reads as something left unfinished rather than a deliberate tertiary
   action.

   The buy box already has a vocabulary for this, and the page uses it twice:
     BUY NOW        523x64  solid #0188cc, Barlow Condensed 26px
     ADD TO CART    399x52  2px solid #16181c, Barlow 14px, uppercase, ls .08em
     wishlist/compare  52x52  1px bordered icon squares
     shipping calc  667x49  white row, 1px solid #e3e6ea, 13px   (gallery card)

   So: the same bordered-row form as the shipping calculator, at the buy box's
   full column width, with the card CTAs' uppercase letterspaced label and a
   drawn question mark to carry the meaning. Deliberately the LIGHTEST of the
   three - a 1px hairline rather than ADD TO CART's 2px - so it reads as
   tertiary and does not compete with the two real buy actions above it.

   The divider above it stays: the card already rules off above QTY and above
   the button block, so a rule here matches the rhythm rather than adding noise.
   =========================================================================== */
body.catalog-product-view .apollo-utils{
  flex-wrap:wrap !important}
body.catalog-product-view .apollo-utils a.apollo-ask{
  flex:1 1 auto !important;width:100% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:10px !important;
  min-height:48px !important;padding:0 16px !important;
  background:#fff !important;border:1px solid #e3e6ea !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.08em !important;
  text-transform:uppercase !important;color:#16181c !important;text-decoration:none !important;
  transition:border-color .15s,background .15s,color .15s !important}

/* the mark: a drawn "?" rather than an icon font, so it inherits currentColor
   and cannot arrive late or missing the way the theme's glyph fonts can */
body.catalog-product-view .apollo-utils a.apollo-ask:before{
  content:'?';
  width:19px;height:19px;flex:0 0 19px;
  border:1.5px solid currentColor;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow',Helvetica,Arial,sans-serif;
  font-size:12px;font-weight:700;line-height:1;letter-spacing:0;
  color:#0188cc}

body.catalog-product-view .apollo-utils a.apollo-ask:hover{
  border-color:#16181c !important;background:#f4f5f7 !important;
  color:#16181c !important;text-decoration:none !important}
body.catalog-product-view .apollo-utils a.apollo-ask:hover:before{color:#16181c}
body.catalog-product-view .apollo-utils a.apollo-ask:focus-visible{
  outline:2px solid #0188cc !important;outline-offset:2px !important}

/* Below 767 an earlier pass turns utility links into full-width tappable rows
   with a bottom hairline and a trailing chevron. That was right for a list of
   three text links; this is a bordered control, so the chevron and the
   half-border are suppressed for THIS link only - the treatment stays in place
   for any other utility link that returns. */
@media (max-width:767px){
  body.catalog-product-view .apollo-utils a.apollo-ask{
    justify-content:center !important;font-size:13px !important}
  body.catalog-product-view .apollo-utils a.apollo-ask:after{
    content:none !important;display:none !important}
}

/* ===========================================================================
   62. THE TWO STICKY BARS: ONE, AT THE BOTTOM, WITH A QUANTITY.
   Client: "Remove the top add to cart that hovers over the menu, and move that
   into the black box at bottom so people [can] add qty to cart, not buy now."

   Measured at 1440 while scrolled: THREE fixed bars were on screen at once.
     .container.sticky-menu.active          0,0   1440x82   z 880   (the nav)
     .box-tocart.large-box-tocart.scr-top   0,0   1440x63   z 881   <- over it
     .apollo-sticky-bar.is-visible          0,825 1440x75   z 50    (the black)

   The middle one is the theme pinning the REAL .box-tocart to the top once you
   scroll past it, at a z-index one above the nav, so it covered the menu. It is
   the same element as the in-page add-to-cart, so it cannot be hidden - that
   would take add-to-cart off the page. Returning it to the flow is what removes
   the overlay and leaves the buy box intact.

   The black bar keeps the job, and gains a quantity: the adapter mirrors it into
   the real qty field and the button submits Add to cart rather than Buy now.
   =========================================================================== */
/* ONLY the properties that make it an overlay. An earlier version of this rule
   also reset width/max-width/padding, which shrank the in-page ADD TO CART from
   399px to 144px - .scr-top is present on the element even before you scroll,
   so anything declared here applies to the resting buy box too. Touch nothing
   but the positioning. */
body.catalog-product-view .box-tocart.scr-top,
body.catalog-product-view .box-tocart.att-scr-qty.scr-top{
  position:static !important;top:auto !important;left:auto !important;right:auto !important;
  z-index:auto !important;box-shadow:none !important;transform:none !important}

/* --- the bottom bar's quantity, dark-on-dark ---------------------------- */
body.catalog-product-view .apollo-sticky-bar .ap-sb-actions{
  display:flex !important;align-items:center !important;gap:10px !important;
  flex:0 0 auto !important;margin-left:auto !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-qty{
  display:flex !important;align-items:stretch !important;
  border:1px solid rgba(255,255,255,.34) !important;background:transparent !important;
  height:44px !important;flex:0 0 auto !important;overflow:hidden !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-step{
  width:36px !important;min-width:36px !important;height:100% !important;
  background:transparent !important;border:0 !important;color:#fff !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:18px !important;
  font-weight:600 !important;line-height:1 !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:0 !important;transition:background .15s}
body.catalog-product-view .apollo-sticky-bar .ap-sb-step:hover{
  background:rgba(255,255,255,.12) !important}
body.catalog-product-view .apollo-sticky-bar .ap-sb-qty-input{
  width:46px !important;min-width:46px !important;height:100% !important;
  background:transparent !important;color:#fff !important;text-align:center !important;
  border:0 !important;border-left:1px solid rgba(255,255,255,.34) !important;
  border-right:1px solid rgba(255,255,255,.34) !important;
  font-family:'Barlow',Helvetica,Arial,sans-serif !important;font-size:15px !important;
  font-weight:700 !important;box-shadow:none !important;padding:0 !important;
  -moz-appearance:textfield}
body.catalog-product-view .apollo-sticky-bar .ap-sb-qty-input::-webkit-outer-spin-button,
body.catalog-product-view .apollo-sticky-bar .ap-sb-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
body.catalog-product-view .apollo-sticky-bar .ap-sb-cta{
  height:44px !important;white-space:nowrap !important}

@media (max-width:767px){
  /* a phone has no room for the price AND a stepper AND the button; the
     stepper is the point of the change, so the struck-through was goes. */
  body.catalog-product-view .apollo-sticky-bar .ap-sb-was{display:none !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-qty{height:44px !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-step{
    width:34px !important;min-width:34px !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-qty-input{
    width:38px !important;min-width:38px !important}
  body.catalog-product-view .apollo-sticky-bar .ap-sb-actions{gap:8px !important}
}
@media (max-width:420px){
  /* below this the thumbnail is the first thing that can go */
  body.catalog-product-view .apollo-sticky-bar .ap-sb-thumb{display:none !important}
}

/* ===========================================================================
   63. CENTRED HEADER SEARCH: APOLLO BLUE MAIN ROW AND MENU BAR.
   Preserve the native logo, account, cart, menu and responsive destination IDs.
   Search uses the original Amasty component and stays visible at every width.
   =========================================================================== */
.page-header.apollo-centred-header{background:#0188cc !important;min-height:0 !important}
.page-header.apollo-centred-header .container.sticky-menu,
.page-header.apollo-centred-header .sticky-menu.active,
.page-header.apollo-centred-header .sticky-menu.active .panel.wrapper,
.page-header.apollo-centred-header .panel.wrapper{
  width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;
  background:#0188cc !important;overflow:visible !important}
.page-header.apollo-centred-header .panel.wrapper,
.page-header.apollo-centred-header .container.sticky-menu .panel.wrapper,
.page-header.apollo-centred-header .sticky-menu.active .panel.wrapper{
  background:#0188cc !important}
.page-header.apollo-centred-header .panel.header,
.page-header.apollo-centred-header .sticky-menu.active .panel.header{
  display:block !important;width:100% !important;max-width:none !important;
  height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;
  background:transparent !important;position:relative !important}
.page-header.apollo-centred-header .panel.header > .header.links{display:none !important}
.page-header.apollo-centred-header .panel.header > .row.cdz-fix-left,
.page-header.apollo-centred-header .sticky-menu.active .panel.header > .row.cdz-fix-left{
  display:grid !important;grid-template-columns:minmax(180px,1fr) minmax(260px,560px) minmax(280px,1fr) !important;
  grid-template-rows:88px 48px !important;gap:0 24px !important;align-items:center !important;
  width:100% !important;max-width:1400px !important;height:auto !important;min-height:0 !important;
  padding:0 24px !important;margin:0 auto !important;box-sizing:border-box !important;position:relative !important}
.page-header.apollo-centred-header .panel.header > .row.cdz-fix-left::before,
.page-header.apollo-centred-header .panel.header > .row.cdz-fix-left::after{display:none !important;content:none !important}
.page-header.apollo-centred-header .panel.header > .row > div,
.page-header.apollo-centred-header .sticky-menu.active .panel.header > .row > div{
  height:auto !important;min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important}
.page-header.apollo-centred-header .header-panel-left-bg,
.page-header.apollo-centred-header .sticky-menu.active .header-panel-left-bg{
  grid-column:1 !important;grid-row:1 !important;display:flex !important;align-items:center !important;
  width:auto !important;max-width:100% !important;min-width:0 !important;padding:0 !important;margin:0 !important;
  background:transparent !important;float:none !important}
.page-header.apollo-centred-header .header-panel-left-main,
.page-header.apollo-centred-header .header-panel-left{
  display:flex !important;align-items:center !important;width:100% !important;max-width:100% !important;
  height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;background:transparent !important}
.page-header.apollo-centred-header .header-panel-left-bg::before,
.page-header.apollo-centred-header .header-panel-left-bg::after,
.page-header.apollo-centred-header .header-panel-left-main::before,
.page-header.apollo-centred-header .header-panel-left-main::after{display:none !important;content:none !important}
.page-header.apollo-centred-header .panel.header .logo{
  display:flex !important;align-items:center !important;max-width:100% !important;min-width:0 !important;
  width:auto !important;height:auto !important;min-height:44px !important;padding:0 !important;margin:0 !important}
.page-header.apollo-centred-header .panel.header .logo img.main-logo{
  display:block !important;width:auto !important;height:68px !important;
  max-width:100% !important;max-height:68px !important;margin:0 !important;object-fit:contain}
.page-header.apollo-centred-header .panel.header .logo img.small-logo,
.page-header.apollo-centred-header .panel.header .logo img.visible-xs{display:none !important}
.page-header.apollo-centred-header .header-panel-right,
.page-header.apollo-centred-header .sticky-menu.active .header-panel-right{
  grid-column:3 !important;grid-row:1 !important;display:flex !important;align-items:center !important;
  justify-content:flex-end !important;width:auto !important;max-width:none !important;
  min-width:0 !important;padding:0 !important;margin:0 !important;float:none !important}
.page-header.apollo-centred-header .header-panel-right > ul.header.features-links{
  display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:16px !important;
  height:auto !important;width:auto !important;margin:0 !important;padding:0 !important;list-style:none !important}
.page-header.apollo-centred-header .panel.header .row.cdz-fix-left > .header-panel-right{
  position:static !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  height:44px !important;min-height:0 !important;padding:0 !important;align-self:center !important}
.page-header.apollo-centred-header .header-panel-right > ul.header.features-links > li{
  display:flex !important;align-items:center !important;float:none !important;
  margin:0 !important;padding:0 !important;border:0 !important}
.page-header.apollo-centred-header .header-panel-right > ul.header.features-links > li.search-link,
.page-header.apollo-centred-header .header-panel-right > ul.header.features-links > li.linkslist-link,
.page-header.apollo-centred-header #header-search-wrap{display:none !important}
.page-header.apollo-centred-header .header-panel-right .cdz-top-link,
.page-header.apollo-centred-header .header-panel-right .account-trigger,
.page-header.apollo-centred-header .header-panel-right .account-trigger span.text-uppercase,
.page-header.apollo-centred-header .header-panel-right .account-trigger::before,
.page-header.apollo-centred-header .header-panel-right .action.showcart,
.page-header.apollo-centred-header .header-panel-right .action.showcart::before,
.page-header.apollo-centred-header .header-panel-right .cdz-top-link:hover,
.page-header.apollo-centred-header .header-panel-right .cdz-top-link:hover::before,
.page-header.apollo-centred-header .header-panel-right .account-trigger:hover span{
  color:#fff !important;background-color:transparent !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger,
.page-header.apollo-centred-header .header-panel-right .action.showcart{
  display:flex !important;align-items:center !important;justify-content:center !important;min-width:44px !important;
  min-height:44px !important;padding:0 !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger span.text-uppercase{
  display:inline !important;font:700 13px Barlow,Helvetica,Arial,sans-serif !important;text-transform:none !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger{
  width:auto !important;white-space:nowrap !important}
.page-header.apollo-centred-header .header-panel-right .text-underlink,
.page-header.apollo-centred-header .cart-subtotal,
.page-header.apollo-centred-header .showcart .text{display:none !important}
.page-header.apollo-centred-header .header-panel-right .counter.qty{color:#fff !important;background:#0a8f4d !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger:focus-visible,
.page-header.apollo-centred-header .header-panel-right .action.showcart:focus-visible,
.page-header.apollo-centred-header .nav-toggle:focus-visible,
.page-header.apollo-centred-header #header-search-wrap .mobile-phone-link:focus-visible,
.page-header.apollo-centred-header #header-search-wrap .action.showcart:focus-visible{
  outline:2px solid #fff !important;outline-offset:3px !important}
.page-header.apollo-centred-header .header-panel-middle,
.page-header.apollo-centred-header .sticky-menu.active .header-panel-middle{
  grid-column:1 / -1 !important;grid-row:2 !important;display:block !important;
  width:100% !important;max-width:none !important;min-width:0 !important;height:48px !important;
  padding:0 !important;margin:0 !important;background:#0188cc !important;overflow:visible !important;float:none !important}
.page-header.apollo-centred-header .header-panel-middle #desk_menu-container,
.page-header.apollo-centred-header .header-panel-middle .cdz-navigation,
.page-header.apollo-centred-header .header-panel-middle .static-wrap,
.page-header.apollo-centred-header .header-panel-middle .cdz-menu,
.page-header.apollo-centred-header .header-panel-middle .cdz-menu > ul.groupmenu:not(.overflow-items-container){
  height:48px !important;min-height:0 !important;width:100% !important;max-width:none !important;margin:0 !important}
.page-header.apollo-centred-header .header-panel-middle .cdz-menu > ul.groupmenu:not(.overflow-items-container){
  display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important}
.page-header.apollo-centred-header .header-panel-middle .cdz-navigation li.item.level0.level-top:not(.mobile_only_menu){
  height:48px !important;min-height:0 !important;line-height:48px !important;float:none !important}
.page-header.apollo-centred-header .header-panel-middle li.level0.level-top > a.menu-link{
  display:flex !important;align-items:center !important;justify-content:center !important;
  height:48px !important;line-height:1.2 !important;padding:0 18px !important;
  color:#fff !important;font:600 14px Barlow,Helvetica,Arial,sans-serif !important;white-space:nowrap !important}
.page-header.apollo-centred-header .header-panel-middle .cdz-navigation .groupmenu-drop,
.page-header.apollo-centred-header .sticky-menu.active .cdz-navigation .groupmenu-drop{top:48px !important}
.page-header.apollo-centred-header .apollo-header-search{
  grid-column:2 !important;grid-row:1 !important;display:block !important;width:100% !important;
  max-width:560px !important;min-width:0 !important;margin:0 auto !important;padding:0 !important;
  position:relative !important;z-index:900 !important;box-sizing:border-box !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-wrapper-block,
.page-header.apollo-centred-header .apollo-header-search .amsearch-form-block,
.page-header.apollo-centred-header .apollo-header-search .header-search,
.page-header.apollo-centred-header .apollo-header-search .search-form{
  display:block !important;position:relative !important;top:auto !important;left:auto !important;right:auto !important;
  bottom:auto !important;width:100% !important;max-width:none !important;min-width:0 !important;height:auto !important;
  padding:0 !important;margin:0 !important;float:none !important;background:transparent !important;
  box-shadow:none !important;visibility:visible !important;opacity:1 !important;box-sizing:border-box !important}
.page-header.apollo-centred-header .apollo-header-search .search-toggle,
.page-header.apollo-centred-header .apollo-header-search .amsearch-button.-primary,
.page-header.apollo-centred-header .apollo-header-search .amsearch-button.-full-close{display:none !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-input-wrapper{
  display:flex !important;align-items:center !important;width:100% !important;min-width:0 !important;
  height:46px !important;padding:0 4px 0 14px !important;margin:0 !important;
  border:1px solid #d6dade !important;background:#fff !important;box-sizing:border-box !important;box-shadow:none !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-input-wrapper:focus-within{
  border-color:#0188cc !important;box-shadow:inset 0 0 0 1px #0188cc !important}
.page-header.apollo-centred-header .apollo-header-search input.amsearch-input{
  flex:1 1 auto !important;width:100% !important;min-width:0 !important;height:44px !important;
  padding:0 !important;margin:0 !important;border:0 !important;background:#fff !important;
  box-shadow:none !important;outline:none !important;color:#16181c !important;
  font:16px Barlow,Helvetica,Arial,sans-serif !important;text-align:left !important}
.page-header.apollo-centred-header .apollo-header-search input.amsearch-input::placeholder{color:#6b7076 !important;opacity:1 !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-input-wrapper > .amsearch-button{
  position:relative !important;top:auto !important;right:auto !important;flex:0 0 44px !important;
  width:44px !important;min-width:44px !important;height:44px !important;margin:0 !important;
  filter:brightness(0) opacity(.65) !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section,
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section.-small{
  position:absolute !important;top:calc(100% + 4px) !important;left:0 !important;right:0 !important;
  width:100% !important;max-width:none !important;max-height:min(65vh,560px) !important;overflow:auto !important;
  margin:0 !important;padding:4px 0 !important;background:#fff !important;
  border:1px solid #e3e6ea !important;box-shadow:0 6px 20px rgba(22,24,28,.14) !important;box-sizing:border-box !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-result-block,
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-products-section,
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-product-list{
  display:block !important;width:100% !important;min-width:0 !important;padding:0 !important;margin:0 !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-product-list > .amsearch-item.product-item{
  display:flex !important;align-items:flex-start !important;gap:12px !important;
  width:100% !important;min-width:0 !important;padding:10px 12px !important;margin:0 !important;box-sizing:border-box !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .amsearch-image{
  flex:0 0 64px !important;width:64px !important;margin:0 !important;padding:0 !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .amsearch-product-image-container,
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .product-image-photo{
  width:64px !important;max-width:64px !important;height:auto !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .amsearch-description{
  flex:1 1 auto !important;min-width:0 !important;margin:0 !important;padding:0 !important;overflow-wrap:anywhere}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item a.amsearch-link{
  color:#16181c !important;font-size:14px !important;line-height:1.35 !important;white-space:normal !important}
.page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .product-item-description{display:none !important}
.page-header.apollo-centred-header.apollo-search-active .cdz-navigation .groupmenu-drop{
  visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
@media (min-width:992px) and (max-width:1199px){
  .page-header.apollo-centred-header .header-panel-middle li.level0.level-top > a.menu-link{
    padding:0 12px !important;font-size:13px !important}
}
@media (max-width:991px){
  .page-header.apollo-centred-header .panel.wrapper,
  .page-header.apollo-centred-header .container.sticky-menu .panel.wrapper,
  .page-header.apollo-centred-header .sticky-menu.active .panel.wrapper{background:#0188cc !important}
  .page-header.apollo-centred-header .panel.header > .row.cdz-fix-left,
  .page-header.apollo-centred-header .sticky-menu.active .panel.header > .row.cdz-fix-left{
    grid-template-columns:minmax(0,1fr) auto !important;grid-template-rows:72px 60px !important;
    gap:0 12px !important;padding:0 16px !important}
  .page-header.apollo-centred-header .header-panel-right,
  .page-header.apollo-centred-header .sticky-menu.active .header-panel-right{grid-column:2 !important}
  .page-header.apollo-centred-header .header-panel-middle,
  .page-header.apollo-centred-header .sticky-menu.active .header-panel-middle{display:none !important}
  .page-header.apollo-centred-header .apollo-header-search{
    grid-column:1 / -1 !important;grid-row:2 !important;max-width:none !important;align-self:start !important}
  .page-header.apollo-centred-header .header-panel-left{position:relative !important;padding-left:44px !important;box-sizing:border-box}
  .page-header.apollo-centred-header .nav-toggle{
    display:flex !important;position:absolute !important;top:50% !important;left:0 !important;
    transform:translateY(-50%) !important;width:44px !important;height:44px !important;min-height:44px !important;
    min-width:44px !important;align-items:center !important;justify-content:center !important;z-index:2 !important}
  .page-header.apollo-centred-header .nav-toggle::before,
  .page-header.apollo-centred-header .nav-toggle > span::before,
  .page-header.apollo-centred-header .nav-toggle > span::after{background:#fff !important}
  .page-header.apollo-centred-header .nav-toggle > span{color:#fff !important}
}
@media (max-width:767px){
  .page-header.apollo-centred-header .panel.header > .row.cdz-fix-left{padding:0 12px !important}
  .page-header.apollo-centred-header .header-panel-right,
  .page-header.apollo-centred-header .sticky-menu.active .header-panel-right{display:none !important}
  .page-header.apollo-centred-header .panel.header .logo img.main-logo{
    max-width:160px !important;max-height:48px !important;width:100% !important}
  .page-header.apollo-centred-header #header-search-wrap{
    grid-column:2 !important;grid-row:1 !important;display:flex !important;align-items:center !important;
    justify-content:flex-end !important;gap:8px !important;width:auto !important;min-width:0 !important;
    max-width:none !important;padding:0 !important;margin:0 !important;position:relative !important;
    top:auto !important;left:auto !important;right:auto !important;z-index:901 !important;float:none !important}
  .page-header.apollo-centred-header #header-search-wrap > .mobile_link,
  .page-header.apollo-centred-header #mobi_cart-wrapper{display:block !important;width:auto !important;min-width:44px !important}
  .page-header.apollo-centred-header #header-search-wrap .mobile-phone-link,
  .page-header.apollo-centred-header #header-search-wrap .action.showcart{
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:44px !important;min-width:44px !important;height:44px !important;min-height:44px !important;
    padding:0 !important;margin:0 !important;color:#fff !important;background:transparent !important}
  .page-header.apollo-centred-header #header-search-wrap .mobile-phone-link > span,
  .page-header.apollo-centred-header #header-search-wrap .mobile-phone-link::before,
  .page-header.apollo-centred-header #header-search-wrap .action.showcart::before{color:#fff !important;filter:none !important}
  .page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .amsearch-image{
    flex-basis:44px !important;width:44px !important}
  .page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .amsearch-product-image-container,
  .page-header.apollo-centred-header .apollo-header-search .amsearch-result-section .amsearch-item .product-image-photo{
    width:44px !important;max-width:44px !important}
}

/* Native purchase/quantity/price availability overrides presentation rules. */
body.catalog-product-view .apollo-sticky-bar[hidden],
body.catalog-product-view .apollo-sticky-bar .ap-sb-qty[hidden],
body.catalog-product-view .apollo-sticky-bar .ap-sb-price[hidden]{
  display:none !important}

/* Payment providers can leave zero-height hosts in the native actions grid.
   Keep their lifecycle and intrinsic iframe sizes; avoid a gap for every empty
   row, and use one small margin on each actual payment-control host instead. */
body.catalog-product-view #product_addtocart_form .box-tocart .fieldset > .actions{
  row-gap:0 !important}
body.catalog-product-view #product_addtocart_form .actions > #paypal-smart-button,
body.catalog-product-view #product_addtocart_form .actions > #payment-request-button{
  margin:10px 0 0 !important;padding:0 !important;border:0 !important}
body.catalog-product-view #product_addtocart_form .actions > #instant-purchase,
body.catalog-product-view #product_addtocart_form .actions > #payment-method-messaging-element{
  margin:0 !important;padding:0 !important;border:0 !important}
body.catalog-product-view #paypal-smart-button > .paypal-buttons{display:block !important}
body.catalog-product-view .product-info-main .apollo-utils{
  margin-top:12px !important;padding-top:0 !important;border-top:0 !important}

/* Footer payment marks: keep the native column and mobile accordion. */
.page-footer .apollo-pay-methods{text-align:left;gap:0}
.page-footer .apollo-pay-methods img{
  display:block;width:300px;max-width:100%;height:auto;margin:0}
.page-footer .apollo-pay-note{
  max-width:300px;margin:18px 0 0;font-family:Barlow,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.7;color:#c9ced4}

/* Larger account/cart controls; grey utility and navigation bands. */
.page-header.apollo-centred-header .header-top,
.page-header.apollo-centred-header .header-panel-middle,
.page-header.apollo-centred-header .sticky-menu.active .header-panel-middle{
  background:#323232 !important}
.page-header.apollo-centred-header #desk_menu-container > .cdz-navigation > .static-wrap > .cdz-menu > ul.groupmenu:not(.overflow-items-container),
.page-header.apollo-centred-header #desk_menu-container > .cdz-navigation > .static-wrap > .cdz-menu > ul.groupmenu:not(.overflow-items-container) > li.level0.level-top > a.menu-link{
  background:#323232 !important}
@media (min-width:992px){
  .page-header.apollo-centred-header .panel.wrapper,
  .page-header.apollo-centred-header .container.sticky-menu .panel.wrapper,
  .page-header.apollo-centred-header .sticky-menu.active .panel.wrapper{
    background:linear-gradient(to bottom,#0188cc 0,#0188cc 88px,#323232 88px,#323232 100%) !important}
}
.page-header.apollo-centred-header .header-panel-right > ul.header.features-links{gap:24px !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger,
.page-header.apollo-centred-header .header-panel-right .action.showcart{
  min-width:66px !important;min-height:66px !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger{gap:10.5px !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger span.text-uppercase{
  font-size:19.5px !important}
.page-header.apollo-centred-header .header-panel-right .account-trigger::before{
  font-size:30px !important;line-height:30px !important}
.page-header.apollo-centred-header .action.showcart::before{
  font-size:33px !important;line-height:33px !important}
.page-header.apollo-centred-header .action.showcart .counter.qty{
  top:2px !important;right:4px !important;bottom:auto !important;left:auto !important;
  min-width:24px !important;height:24px !important;padding:0 5px !important;
  border-radius:999px !important;box-sizing:border-box !important;
  background:#323232 !important;color:#fff !important;font-size:16.5px !important;line-height:24px !important}
.page-header.apollo-centred-header .action.showcart .counter-number{
  color:#fff !important;font-size:16.5px !important;line-height:24px !important}
@media (max-width:767px){
  .page-header.apollo-centred-header .panel.header #header-search-wrap{padding:0 !important}
  .page-header.apollo-centred-header #header-search-wrap #mobi_cart-wrapper{
    width:66px !important;min-width:66px !important;height:66px !important;min-height:66px !important}
  .page-header.apollo-centred-header #header-search-wrap .action.showcart{
    width:66px !important;min-width:66px !important;height:66px !important;min-height:66px !important}
  .page-header.apollo-centred-header #header-search-wrap .action.showcart::before{
    font-size:28.5px !important;line-height:28.5px !important}
}
/* ===== APOLLO-PDP END ===== */