body {
    --lar-mainb: #27282A;
    --lar-mainy: #FAB93D;
    --lar-mainw: #FFFFFF;
    --lar-maindg: #55595A;
    --lar-secg: #F7F7F7;
    --lar-maincl: #f9ba47;
    /*--lar-maxwidth: 1572px;*/
    --lar-maxwidth: 1572px;
    --lar-shadow:  1px 6px 12.5px 3px rgba(0, 0, 0, 0.13);
    --lar-radius:  10px;
    --lar-padding-main:  0 100px;
    /* Type scale. Use these instead of raw px in new font-size rules so the whole
       site stays on one set of sizes.
         xs  12  notes, badges, legal          sm  13  secondary text, nav links, small buttons
         md  14  compact body text             lg  16  form fields (16px stops iOS zoom), card titles
         h2  section / card headings           h1  page titles, hero
         title  catalog page titles (category / search / product)
       Only h1 / h2 / title change with the viewport (see the min-width: 768px override below). */
    --lar-fs-xs: 12px;
    --lar-fs-sm: 13px;
    --lar-fs-md: 14px;
    --lar-fs-lg: 16px;
    --lar-fs-h2: 18px;
    --lar-fs-title: 20px;
    --lar-fs-h1: 22px;
    /* older names, kept for existing rules */
    --lar-title-mob-s: var(--lar-fs-h2);
    --lar-title-dek-s: 24px;
}
@media (min-width: 768px) {
    body {
        --lar-fs-h2: 20px;
        --lar-fs-h1: 24px;
    }
}
/*body#html-body{
        margin: 0 auto;
    max-width: 1728px;
}*/
.action-primary{
    background: var(--lar-mainb) !important;
    border: 1px solid var(--lar-mainb) !important;
    color: #FFF;
}
button.amform-show-popup.amcform-button.btn-call-us.-default{background: var(--lar-mainb);}
.action-primary:hover{
    background: var(--lar-maincl) !important;
    border: 1px solid var(--lar-maincl) !important;
    color: #FFF;
}
.modal-custom .action-close:before, .modal-popup .action-close:before, .modal-slide .action-close:before{color: var(--lar-mainb);}
select,input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"]{border: 1px solid #27282A;    border-radius: 0;}
#maincontent .sw-megamenu.navigation.side-megamenu li.level0 > a > span:first-child{
    max-width: none;
}
header.page-header.type2.header-newskin{
    background: #FFF;
    max-width: 100%;
}
@media (min-width: 1200px){
    .block.category.event, .footer.content, .header.content, .navigation, .page-header .header.panel, .page-main, .page-wrapper>.breadcrumbs, .page-wrapper>.page-bottom, .page-wrapper>.widget, .top-container{max-width: var(--lar-maxwidth) !important;}
    footer.page-footer .footer-bottom .container{
        max-width: var(--lar-maxwidth);
        padding: var(--lar-padding-main);
    }

}

.carousel_home_ads a.carousel_home_ads_buttom{
    border-radius: 10px;
}
.owl-carousel .owl-nav .disabled {opacity: 0.5;cursor: default;}
.owl-carousel .owl-nav.disabled+.owl-dots {margin-top: 10px;}
.owl-carousel .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent;}
.owl-carousel .owl-dots .owl-dot {display: inline-block;zoom:1;*display: inline;height: auto;vertical-align: top;}
.owl-carousel .owl-dots .owl-dot span {width: 12px;height: 12px;margin: 5px 4px;border: 2px solid #f9bb48;background: #FFF;display: block;-webkit-backface-visibility: visible;transition: opacity .2s;border-radius: 30px;}
.owl-carousel .owl-dots .owl-dot.active span,.owl-carousel .owl-dots .owl-dot:hover span {background: #f9bb48;}
.owl-carousel.dots-style-1 .owl-dots span {width: 14px;height: 14px;border: 2px solid #f9bb48;background: none!important;margin: 5px 2px;position: relative;}

.block.block-search.left_search_box {
    margin-left: 0;width: 100%;    background: #f9bb48;margin-bottom: 10px;z-index: 1;
}

.block.block-search.left_search_box button.action.search{
    color: #f9bb48;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot,
.sw-megamenu.navigation.side-megamenu li ul.level0 ul.level1 li a span{
    color: #f9bb48;
}



.product-info-main .qty.field .qty-changer > a{
    color:#f9bb48;
}
.catalog-product-view #tab-label-additional{
    display: none;
}
.lar-top-menu ul.sub_cat_bg.level2{
    background: #f9bb48;
}
.top-facility-planning {
    background: #f9bb48;
}

.head-concept-design > h3{
    background: #f9bb48;
  
}
.concept-design .concept-block{
    background: #f9bb48;
}

.realization-block .concept-sub-title h3{
    background: #f9bb48;
}
.realization-content {
    background: #f9bb48;
}
.turnkey-solutions-block,.turnkey-block {
    background: #dfdfdf;
    color: #f9bb48;
}
.facility-contact,.turnkey-expert{
    background: #dfdfdf;
    color: #f9bb48;
    padding: 30px
}

p.request_quote_or_info {
    color: #f9bb48;
}
.cms-about span.about-banner-bold-bg {
    border-bottom: 5px solid #f9bb48;
}

.cms-apropos span.about-banner-bold-bg {
    border-bottom: 5px solid #f9bb48;
}

.carousel_home_ads a.carousel_home_ads_buttom{
    background: #f9bb48;
}
.featured-single-image{
    border-radius: 40px;
}
.single-images{
    width: 100%;
}
.single-images .row .col-md-4 {
    color: #f9bb48;
}
.featured-single-title{
    padding: 0 10px;
}
.featured-single-title .sub-title{
    font-size: 18px;
    text-transform: capitalize;
    padding: 0 12px;
}
p.image-link-ft-img img {
    max-height: 140px;
    width: auto;
}
p.learn-more-link{
        padding: 0 0px 10px 0;
}
p.learn-more-link a{
    background: #f9bb48;
    border-radius: 10px;
    padding: 5px 40px;
    text-transform: capitalize;
    font-size: 20px;
}

.honda_featured_1 p.sub-title-left{
    position: absolute;
    top: 90px;
    width: 50px;
    font-size: 20px;
    left: 30px;
}

.featured-single-title .sub-title{    text-transform: capitalize;}
strong.product.sku.product-item-sku.product-item-sku-search {
    background: #f9bb48;
}
strong.product.sku.product-item-sku a.product-item-link {
    color: var(--lar-mainb);
}
.minicart-items .product-item-details strong.product-item-sku{font-weight: bold;color: var(--lar-mainb);}
.minicart-items .product-item-details strong.product-item-sku a{font-weight: bold;color: var(--lar-mainb);}
.amgdpr-modal-container .action.action-primary,.amgdpr-modal-container .action.action-primary:hover{
    line-height: initial;background: #f9bb48;border-color: #f9bb48;
}
.top-help{
    z-index: 6;bottom: 0;right: 10px;display: none;
}
.top-help a{font-size: 0;}
.page-header.type2.header-newskin .minicart-wrapper{
    right: 10px !important;
}
.columns .column.main{
    padding-bottom: 0;
}


button.action.primary {
    background-color: #f9bb48 !important;
    border-color: #f9bb48 !important;
    color: #FFFFFF !important;
}
.header-main-top {
    display: inline-block;
    width: 100%;
}
.contact-top-call, .contact-top-call a, .contact-top-call a:hover {
    color: #000;
}
.contact-top-call {
    margin-top: 5px;
}
.contact-top-call > a:first-child {
    text-decoration: underline;
}
.contact-top-call a:nth-child(2) {

}
button.action.primary {
    background-color: #f9bb48 !important;
    border-color: #f9bb48 !important;
    color: #FFFFFF !important;
}
.minicart-wrapper .product .actions > .secondary,.minicart-wrapper .block-minicart .total-count,.minicart-items .product-item-name{
    color: #000 !important;
}
div#switcher-language a{
    letter-spacing: 0.025em;
    font-weight: 600;font-size: 12px;color: #000000;
}
span.parent_arrow.parent_arrow_1{
        position: absolute !important;
}
#shipping button.action.action-show-popup {
    display: none;
}
.welcome-top *, .welcome-top p a, .welcome-top.logged{
    color: #000;
    font-size: 13px;
}
.welcome-top {
        text-align: left;
}
.top-cart-btn-checkout{
    background-color: #f9bb48;
}
.banner_big_image span{
    background: #000;
    color: #FFF;
    padding: 16px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.page-header.type2.header-newskin .logo {
    margin: 27px 0;
}
body .page-header.type2.header-newskin .block-search{
    margin: 0;
        float: none;position: relative;z-index: 1;
}
body .page-header.type2.header-newskin .block-search input {
    color: #000;
    border: 2px solid #000;padding-right: 0;
}
body .page-header.type2.header-newskin .block-search .action.search{
    height: 36px !important;
    line-height: 36px !important;
    top: 2px !important;
    right: 5px !important;
}
body .page-header.type2.header-newskin .block-search input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

body .page-header.type2.header-newskin .block-search input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
}

body .page-header.type2.header-newskin .block-search input::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
}
.catalog-category-view .category-description{
    display: none;
}
@media screen and (min-width: 1024px){
    .dealer-menu-item{
        text-align: center;
        display: inline-block;
        width: 100%;
        position: absolute;
        left: 0;
        line-height: 46px;
        /* absolutely positioned + full width = it paints over the Quick Access / All Products
           links beside it and swallows their clicks; it's text only, nothing in it to click */
        pointer-events: none;
    }
    .page-header .header-right-bot-nav{display: block;}
}
@media (min-width: 768px){
    body .form-create-account-container .actions-toolbar{text-align: right;}
    .welcome-top.logged p{margin-left: auto;}
   .page-header.type2.header-newskin.sticky-header .nav-sections{
            background-color: #f9bb48 !important;
    }
    .page-header.type2.header-newskin .navigation .level0 > .level-top{
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    .page-header .panel.wrapper, .main-panel-top {
        background-color: #f9bb48;
    }
    
    .page-header.type2.header-newskin .block-search .action.search:before{
        color: #FFF !important;
    }
    .page-header.type2.header-newskin .block-search input {
        
    }
    header.page-header.type2.header-newskin.HondaFrench.sticky-header .navigation li.level0{
        
        
    }

    header.page-header.type2.header-newskin.HondaFrench.sticky-header .navigation li.level0 > .level-top{
        min-width: auto !important;
        padding: 0 20px 0 0 !important;
    }
    .page-header.type2.header-newskin.HondaFrench.sticky-header .minicart-wrapper{
        bottom: 5px !important;
    }
    .page-header.type2.header-newskin.HondaFrench .navigation .level0 > .level-top{
            min-width: 85px;
    }
    body .page-header.type2.header-newskin .larnet-account-actions .minicart-wrapper{
        margin: 0px 15px 0px 30px;
        position: relative;
        top: unset !important;
        bottom: unset;
        width: 24px !important;
        right: auto !important;
        height: 24px !important;
    }
    body header.page-header.type2.header-newskin, body .page-main{
                /*padding-left: 10px !important;
        padding-right: 10px !important;*/
    }

    
}
@media (min-width: 768px){
    .page-header.type2.header-newskin .panel.header .header.links > li > a{
        padding: 5px 15px;
    }
    
    .header-left{
        width: 30%;
        float: left;
        /*height: 100px;*/
    }
    .page-header.type2.header-newskin .logo{
        max-width: 100%;
        margin-top: 10px;margin-bottom: 10px;
    }
    .logo img {
        width: auto;
    }
    .header-right{
            width: 75%;float: right;
    }
    .page-header .panel.wrapper, .main-panel-top {
        background-color: #f9bb48;
    }
    .page-header.type2.header-newskin .block-search{
        float: right;
        margin: 20px 5px 0px 0;
    }
    
    body .page-header.type2.header-newskin .block-search .action.search{
        background: #FAB93D !important;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-bottomright: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        height: 38px;
        line-height: 38px;
        top: 1px;
        right: 11px;
    }
    .page-header.type2.header-newskin .block-search .action.search:before{
        color: #FFF !important;
    }
    .page-header.type2.header-newskin .block-search input {
        height: 40px;border-radius: 10px !important;
    }
    .page-header.type2.header-newskin .block-search input::placeholder { 
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff;
        opacity: 1; /* Firefox */
    }
    .page-header.type2.header-newskin .block-search input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: #fff;
    }
    .page-header.type2.header-newskin .block-search input::-ms-input-placeholder { /* Microsoft Edge */
      color: #fff;
    }
    .page-header.type2.header-newskin .custom-block {
        /*position: relative !important;*/
        top: auto !important;
        right: 0 !important;
        margin: 2px 5px 0 0 !important;
        text-align: right;
        line-height: normal;
        height: auto;
    }
    .page-header.type2.header-newskin .custom-block > * {
        
    }
    .search-area.show-icon-tablet {
        display: inline-block;
        width: 100%;
    }
    
    .page-header.type2.header-newskin .minicart-wrapper .action.showcart .counter.qty{
            margin-top: 0 !important;
    }
    .page-header.type2.header-newskin .minicart-wrapper{
        box-shadow: none !important;bottom: 8px;
    }
    .page-header.type2.header-newskin.sticky-header .minicart-wrapper{
        bottom: 0;
    }
    
    .page-wrapper .page-header.type2.header-newskin .nav-sections,
    .page-wrapper .page-header .navigation > ul{
        background-color: #ffffff;
    }
    .page-wrapper .sw-megamenu.navigation li.level0.fullwidth > .submenu, .page-wrapper .sw-megamenu.navigation li.level0.staticwidth > .submenu {
        background-color: #ffffff;
        color: #000 !important;
    }
    
    .page-wrapper .page-header.type2.header-newskin .navigation .level0 > .level-top,
    .page-wrapper .page-header.header-newskin .navigation li.level0.fullwidth .submenu li.level1 > a,
    .page-wrapper header .header .nav-sections .navigation .level0 .submenu a,
    .page-wrapper .menu-top-block {
        color: #000 !important;
    }
}

@media only screen and (max-width: 639px){
    .page-header.type2.header-newskin .minicart-wrapper{
        right: 15px !important;
    }
    .welcome-top *, .welcome-top p a, .welcome-top.logged{
        color: #fff;
    }
    .main-panel-top > .container{
            background: #f9bb48;
    }
    
    .custom-navigation-title{
        background: #f9bb48;
    }
    
    header.page-header.type2.header-newskin{
        background: #f9bb48;
    }
    .block.block-search.left_search_box button.action.search{
     
        background: #f9bb48;
        color: #FFF;
        border: 1px solid #f9bb48;
    }
   
    .block.block-search.show #search_mini_form button.action.search {
        display: block;
        position: absolute;
        right: 16px;
        top: 1px;
        line-height: 36px;
        height: 36px;
        padding: 0 20px;
        background: #f9bb48;
        color: #FFF;
        border: 1px solid #f9bb48;
    }
    #dealershipss-data-table td.dealershipss-img{
        display: none;
    }
    #dealershipss-data-table tr{
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
    }
    #dealershipss-data-table td.dealershipss-description{
        
    }
    #dealershipss-data-table td.dealershipss-description p.request_quote_or_info{
            float: none;
            display: inline-block;
            width: 100%;
            text-align: center;
    }
    footer.page-footer .footer-bottom .bg-dark > .container > div:first-child{display: none;}
}
@media only screen and (max-width: 320px){
    .login-container .block.block-pitbulk-saml2-login-container a.action.login.primary{
            font-size: var(--lar-fs-xs);
    }
    .page-header.type2.header-newskin .logo{
            margin-left: 10px;
    }
}
.action.primary {
    background-color: #f9bb48 !important;
    border-color: #f9bb48 !important;
    color: #FFFFFF !important;
}



.larnet-auth-page .column.main {
    padding-top: 0;
}

/* Hero banner (login + register) */

.container.larnet-auth-heading{text-align: left;}
.larnet-auth-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(39, 40, 42, 0.35) 0%, rgba(39, 40, 42, 0.88) 100%);
}
.larnet-auth-hero__inner {
    position: relative;
    z-index: 1;
    padding: 32px 20px 28px;
    color: var(--lar-mainw);
}
.larnet-auth-hero__back {
    display: inline-block;
    color: var(--lar-mainw) !important;
    text-decoration: underline;
    font-size: 13px;
    margin-bottom: 14px;
}
.larnet-auth-hero__back-arrow {
    margin-right: 4px;
}
.larnet-auth-hero__headline {
    margin: 0;
    color: #FFF;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
/* Block bao ngoài cùng */
.larnet-auth-hero {
    position: relative; /* Để làm chuẩn tọa độ cho overlay */
    min-height: 200px; /* Cần thiết lập chiều cao (hoặc min-height) để có không gian căn giữa dọc */
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    background-size: cover;
    background-position: center;background-repeat: no-repeat;
}

/* Lớp phủ tối màu (nếu cần) để chữ trắng nổi bật hơn */
.larnet-auth-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Chỉnh độ mờ tùy ý */
    z-index: 0;
}

/* Container chứa nội dung */
.larnet-auth-hero__inner {
    position: relative; 
    z-index: 1; /* Nâng container lên trên lớp overlay */
    text-align: center; /* Căn giữa nội dung chữ bên trong */
    width: 100%;
}

/* Căn chỉnh lại thẻ h2 */
.larnet-auth-hero__headline {
    color: #ffffff; /* Chữ màu trắng theo thiết kế[cite: 1] */
    margin: 0; 
    /* Thêm font-size, font-weight tùy theo thiết kế của bạn */
}
@media (max-width: 639px) {
    .larnet-auth-hero__headline {
        font-size: var(--lar-fs-h1);
    }
}

/* Page heading between hero and the native form */
.larnet-auth-heading {
    padding: 28px 20px 6px;
    text-align: center;
}
.larnet-auth-heading h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lar-mainb);
}

/* Register page: heading is left-aligned (not centered like the login page's
   "Hello, Single Sign In") and has its own subtext paragraph + a
   "Back to Homepage" link ABOVE it, in the white section, per Figma - the
   hero banner's own back link (white text, inside the dark overlay, shared
   with the login page) is hidden here so there's only one. */
.larnet-register-page .larnet-auth-hero__back {
    display: none;
}
.larnet-register-page .larnet-auth-heading {
    text-align: left;
    max-width: 1200px;
    padding: 12px 20px 6px;
}
.larnet-auth-heading__back-wrap {
    max-width: 1200px;
    padding: 20px 20px 0;
}
.larnet-auth-heading__back {
    display: inline-block;
    color: var(--lar-mainb) !important;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
}
.larnet-auth-heading__subtext {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--lar-maindg);
    font-size: 15px;
}

/* Hides a <label> visually while keeping it in the DOM (still tied to its
   input via `for`, so screen readers/validation still work) - used by
   register-field-enhance.phtml to turn "label above box" into the Figma
   "field name inside the box" placeholder look. */
.larnet-visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.larnet-login-page .login-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 32px;
    margin: 0 auto;
    padding: 20px 0;
    border:  0 none;
    border-radius: 0;
    box-shadow: none;
}
.larnet-login-page div#login_our_solutions_logged{display: none;}
.larnet-login-page .login-container .larnet-login-left-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 380px;box-shadow: none;border: 0 none;border-radius: 0;
}
.larnet-login-page .login-container .block.block-new-customer {
    flex: 1 1 320px;
}
.larnet-login-page .login-container .block.block-pitbulk-saml2-login-container{
        margin-bottom: 0;
}
.larnet-login-page .login-container .block.block-pitbulk-saml2-login-container .block-title{
display: none;
}
.larnet-login-page .login-container .block.block-pitbulk-saml2-login-container .block-title strong,
.larnet-login-page .login-container .block.block-new-customer .block-title strong {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--lar-mainb);
}
.larnet-login-page .login-container .block.block-new-customer .primary a.larnet-signup-btn{
    border: 2px solid #27282A !important;
    border-radius: 6px;
    background: #FFF !important;
    color: #27282A !important;
}
.larnet-login-page .login-container .block.block-pitbulk-saml2-login-container a.action.login.primary {
    display: inline-block;
    background: var(--lar-mainy);
    border: 1px solid var(--lar-mainy);
    color: var(--lar-mainb) !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.larnet-login-page .login-container .block.block-customer-login {
    background: var(--lar-mainb);
    color: var(--lar-mainw);
    padding: 10px 30px 40px 30px;
}
.larnet-login-page .login-container .block.block-customer-login .block-content{
    background-color: #FFF;    padding: 20px;
    border-radius: 10px;
}
.larnet-login-page .login-container .block.block-customer-login .block-content .field{}
.larnet-login-page .login-container .block.block-customer-login .block-content .field.email{}
.larnet-login-page .login-container .block.block-customer-login .block-content .field .control{position: relative;}
.larnet-login-page .login-container .block.block-customer-login .block-content .field.password{}

.larnet-login-page .block-customer-login .block-title strong {
    color: var(--lar-mainw);
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.5px;
}
.larnet-login-page .block-customer-login .field.note {
    color: #cfd1d2;
    font-size: 13px;display: none;
}
.larnet-login-page .block-customer-login .label span {
    color: var(--lar-mainw);
    font-size: 13px;
}
.larnet-login-page .block-customer-login .field {
    margin-bottom: 18px;
}
.larnet-login-page .block-customer-login .input-text {
    width: 100%;
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--lar-mainb);
    border-radius: 4px;
    color: var(--lar-mainb);
    font-size: 15px;
}
.larnet-login-page .block-customer-login .input-text::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.larnet-login-page .block-customer-login .secondary a.action.remind {
    color: var(--lar-mainb) !important;
    text-decoration: underline;
    font-size: 13px;
}
/* Sign In submit button already inherits the sitewide
   `button.action.primary { background:#f9bb48 }` rule above in this file. */

/* "Sign Up" button (block-new-customer, larnet override of newcustomer.phtml)
   - white box on the login page, so the button reads as a dark bordered
   outline instead of the yellow fill used for the SSO/register-page CTAs. */
.larnet-signup-btn {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--lar-mainb);
    color: var(--lar-mainb) !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 11px 28px;
    border-radius: 4px;
    margin-top: 8px;
}
.larnet-signup-btn:hover {
    background: var(--lar-mainb);
    color: var(--lar-mainw) !important;
}

/* "Our Solutions" strip */
.larnet-auth-section-title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--lar-mainb);
    margin: 40px 0 24px;
}
.larnet-solutions-row,
.larnet-features-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 30px;
}
.larnet-solutions-col,
.larnet-features-col {
    padding: 0 10px;
    margin-bottom: 16px;
}
.larnet-solutions-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--lar-mainw);
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 24px 12px;
    height: 100%;
}
.larnet-solutions-icon,
.larnet-features-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    color: var(--lar-mainy);
    margin-bottom: 12px;
}
.larnet-solutions-icon svg,
.larnet-features-icon svg {
    width: 100%;
    height: 100%;
}
.larnet-solutions-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--lar-mainb);
}


.login-our-solutions {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
.login-our-solutions__title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 0.5px;
    color: var(--lar-mainb);
    margin: 40px 0 80px;
}

/* Slider: each slide is a .login-our-solutions__card (label on top, image,
   yellow bar) - shared with the trust-badge grid's yellow bar below. */
.login-our-solutions__slider {
    margin-bottom: 40px;
    position: relative;
}
.login-our-solutions__slider .owl-stage-outer {
    padding: 0 2px;
}
.login-our-solutions__card {
    display: flex;
    flex-direction: column;
    background: #FFF;
    
    /*box-shadow: 2px 12px 24.5px 5px rgba(0, 0, 0, 0.13);*/
    box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.13);
    overflow: hidden;
}
.login-our-solutions__card-label {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
    color: var(--lar-mainb);
    padding: 16px 8px;
}

.login-our-solutions__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.login-our-solutions__card-bar,
.login-our-solutions__trust-card-bar {
    height: 8px;
    background: var(--lar-mainy);width: 100%;
}
.login-our-solutions__card-bar{background-color: #FAB93D;}
/* .owl-nav is the positioned full-cover overlay (flex space-between), the
   buttons themselves stay position:static - see the cart Suggestions slider
   CSS ("Cart page" section) for why individually-positioned nav buttons
   were dropped (one side computed a wildly wrong offset and disappeared on
   a real mobile viewport, root cause never pinned down). */
.login-our-solutions__slider .owl-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.login-our-solutions__slider .owl-nav .owl-prev,
.login-our-solutions__slider .owl-nav .owl-next {
    position: static;
    flex: 0 0 auto;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    background: var(--lar-mainw);
    border: 1px solid var(--lar-mainb);
    border-radius: 50%;
    color: var(--lar-mainb);
    font-size: 18px;
}
.login-our-solutions__slider .owl-dots {
    text-align: center;
    margin-top: 14px;
}
.login-our-solutions__slider .owl-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    background: #d9d9d9;
}
.login-our-solutions__slider .owl-dot.active span {
    background: var(--lar-mainy);
}

/* Trust-badge grid: circle icon + label + yellow bar, matching Figma's
   Trusted Automotive Solutions / Extensive Product Selection /
   Fast & Expert Support / Fast & Reliable Service. */
.login-our-solutions__trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.login-our-solutions__trust-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--lar-mainw);
    border-radius: 6px;
    box-shadow: 1px 6px 12.5px 3px rgba(0, 0, 0, 0.13);
    text-align: center;
}
.login-our-solutions__trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 28px 0 16px;
    
    border-radius: 50%;
    color: var(--lar-mainb);
        margin-top: -30px;
}
.login-our-solutions__trust-icon svg,
.login-our-solutions__trust-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.login-our-solutions__trust-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    color: var(--lar-mainb);
    padding: 0 16px 20px;
}
@media (max-width: 991px) {
    .login-our-solutions__trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .navigation_title{display: none;}
}
@media (max-width: 639px) {
    .login-our-solutions__title {
        font-size: var(--lar-fs-h2);
    }
    .login-our-solutions__trust-card{margin-bottom: 30px;}
    .login-our-solutions__trust-grid {
        grid-template-columns: 1fr;
    }
}

/* Feature / trust strip */
.larnet-features-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
}
.larnet-features-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--lar-maindg);
    max-width: 180px;
}

/* Promo strip - sitewide (see Magento_Theme/layout/default.xml), not scoped to
   .larnet-auth-page since it now renders on every page, just above the footer. */
.larnet-promo-strip {
    background: #FAB93D;
}
.larnet-promo-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    padding: 14px 20px;
    text-align: center;
}
.larnet-promo-strip__item {
    color: #27282A;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}
.larnet-promo-strip__sep {
    color: #27282A;
    opacity: 0.55;
}
@media (max-width: 639px) {
    .larnet-promo-strip__inner {
        padding: 12px 16px;
    }
    .larnet-promo-strip__item {
        font-size: var(--lar-fs-xs);
    }
}

.larnet-register-page .form-create-account {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 40px;
    background: var(--lar-mainw);
    border-radius: 15px;
    box-shadow: 2px 12px 24.5px 5px rgba(0, 0, 0, 0.13);
}
.larnet-register-page .form-create-account .fieldset.create.info,
.larnet-register-page .form-create-account .fieldset.create.account,
.larnet-register-page .form-create-account #group-fields-customer-attributes,
.larnet-register-page .form-create-account .actions-toolbar {
    flex: 1 1 calc(50% - 24px);
    min-width: 280px;
    margin: 0;
}
.larnet-register-page .form-create-account .fieldset.create.info {
    order: 1;
}
.larnet-register-page .form-create-account .fieldset.create.account {
    order: 2;
}
.larnet-register-page .form-create-account #group-fields-customer-attributes {
    order: 3;
    /* Amasty's own template hard-codes `style="display:none"` and only
       clears it once its JS finishes moving/binding the fieldset - !important
       makes sure our layout wins once that happens, it doesn't force it
       visible before Amasty is ready. */
    display: block !important;
}
.larnet-register-page .form-create-account .actions-toolbar {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 8px;
}
.larnet-register-page .form-create-account .legend,
.larnet-register-page .form-create-account .legend span {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 22px;
    color: var(--lar-mainb);
}
.larnet-register-page .form-create-account .fieldset {
    display: block;
}
.larnet-register-page .form-create-account .field,
.larnet-register-page .form-create-account .admin__field {
    margin-bottom: 20px;
}
.larnet-register-page .form-create-account .field .control,
.larnet-register-page .form-create-account .admin__field-control {
    margin: 0;
}
.larnet-register-page .form-create-account .input-text,
.larnet-register-page .form-create-account select.admin__control-select {
    width: 100%;
    height: 56px;
    border: 2px solid var(--lar-mainb);
    border-radius: 4px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--lar-mainb);
    background-color: var(--lar-mainw);
}

/* Native "Back" link duplicates the new "< Back to Homepage" link above the
   heading - hide it here to avoid two different "back" actions on the page. */

/* Create Account submit button already inherits the sitewide
   `button.action.primary { background:#f9bb48 }` rule above in this file. */
.larnet-register-page .form-create-account .actions-toolbar .primary {
    width: auto;
}

@media (min-width: 768px) {
    .quickaccess-tabs{
        padding: var(--lar-padding-main);
        max-width: var(--lar-maxwidth);
        margin: 0 auto;
        margin: 0 auto;
        display: block;
    }
    .page-header .header-main-top {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding: var(--lar-padding-main);
        max-width: var(--lar-maxwidth);
        margin: 0 auto;
    }
    body header.page-header.type2.header-newskin{
            padding: 0 !important;
    }
    .larnet-cart-delivery,div#larnet_cart_rep{margin-top: 40px;}
    .login-our-solutions.page-main,.columns{padding: var(--lar-padding-main) !important;}
    .larnet-login-page .login-container{}
    .page-header .header-left {
        flex: 0 0 auto;
    }
    .page-header .header-right {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }
    /* .header-right-top (guest) and .header-right-bot (logged in) are the two
       alternate branches rendered inside .header-right - only one exists per
       request, both get the same row treatment. */
    .page-header .header-right-top,
    .page-header .header-right-bot {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .page-header .block-search .block-content{        width: 100%;}
    .page-header .header-right .header-right-bot .main-panel-inner{    flex-direction: column;}
    .page-header .header-right .main-panel-top,
    .page-header .header-right .main-panel-top .container,
    .page-header .header-right .main-panel-inner,
    .page-header .header-right .panel.wrapper,
    .page-header .header-right .panel.header {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .page-header .header-right .main-panel-top {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
    .page-header .header-right .main-panel-top .main-panel-inner{align-items: flex-end;}
    .page-header .header-right .main-panel-inner {
        display: flex;
        align-items: center;
    }
    .page-header .header-right .panel.header {
        display: flex;
        align-items: center;
    }
    /* .header-right-bot-nav (logged in only: dealer info + Shop All) is a
       third child of .header-right-bot - force it onto its own full-width
       row below the contact/search/lang/account/cart/logout row above. */
    .page-header .header-right-bot-nav {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
    }
}
div#larnet_cart_rep{
        box-shadow: var(--lar-shadow);
    padding: 10px;border-radius: 10px;
}
div#larnet_cart_rep h2.navigation_title {
    margin-bottom: 20px;
    display: block !important;
}
.larnet_top_contact {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 0;
    color: #000000;
    /*white-space: nowrap;*/
}
.larnet_top_contact p{text-align: center;}
.header-right-top .larnet_top_contact p{margin: 0;}
.header-right-bot .larnet_top_contact{
    display: block;
}
/* Top bar: Figma is white with yellow used only as an accent, not a fill. */
.page-header .panel.wrapper,
.main-panel-top,
.main-panel-top > .container {
    background-color: #FFFFFF !important;
}
.welcome-top *,
.welcome-top p a,
.welcome-top.logged {
    color: #27282A !important;
}

/* "Login" (guest) as a bordered yellow pill button, matching the Figma LOGIN
   button. */
.page-header .panel.header ul.header.links {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
}
.page-header .panel.header ul.header.links li a {
    color: #27282A;
    font-weight: 600;
    font-size: 13px;
}

/* Login / Logout pill button - shared look, Login outlined, Logout solid
   black, matching the Figma header states. */
.catalog-product-view:not(.weltpixel-quickview-catalog-product-view):not(.weltpixel_quickview-catalog_product-view) .box-tocart .action.tocart,
body .amcform-button:not(.primary){border-radius: 0;}   
.larnet-login-btn,
.larnet-logout-btn {
    display: inline-block;
    padding: 8px 22px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.larnet-login-btn {
    border: 2px solid #FAB93D;
    color: #27282A;
}
.larnet-login-btn:hover {
    background: #FAB93D;
}
.larnet-logout-btn {
    margin-left: 18px;
    background: #27282A;
    color: #FFFFFF !important;
    border: 2px solid #27282A;
}
.larnet-logout-btn:hover {
    background: #000000;
    border-color: #000000;
}

/* Wraps account icon + minicart + Logout (logged in only) - sibling of the
   language switcher's .panel.header inside .main-panel-inner, on the same
   row per the desktop/mobile .main-panel-inner flex rules above. */
.larnet-account-actions {
    display: flex;
    align-items: center;
    position: relative;
}

/* Header search (logged in only, wraps the native top.search block next to
   larnet_top_contact). Reset Porto's toggle/absolute search styling so it
   sits inline as a normal-sized search box, matching the Figma "Main
   Search" field. */
.larnet-header-search {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
}
.larnet-header-search .block.block-search {
    position: static;
    margin: 0;
}
.larnet-header-search .block.block-search .field.search {
    margin: 0;
}
.larnet-header-search .block-search input {
    height: 38px;
    border: 2px solid #27282A;
    border-radius: 30px 0 0 30px;
    color: #27282A;
}
.larnet-header-search .block-search .action.search {
    height: 38px;
    line-height: 38px;
    border-radius: 0 30px 30px 0;
    background: #FAB93D;
}
.larnet-header-search .block-search .action.search:before {
    color: #27282A;
}

/* Account icon (logged-in only), sits between the language switcher and the
   minicart, matching the Figma person icon. Uses the custom PNG dropped in
   web/images (account_icon.png) instead of the porto-icon-user-1 glyph. */
.larnet-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-left: 18px;
    background-image: url('../images/account_icon.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
}
.larnet-account-icon i.porto-icon-user-1 {
    display: none;
}
.larnet-account-icon:hover {
    opacity: 0.65;
}

/* Cart icon (native Magento minicart, "cart-design-1" variant): swaps the
   porto-icon-shopping-cart glyph for the custom PNG (web/images/cart_icon.png)
   and hides the "Cart" text label, matching the Figma icon-only cart. The
   qty badge keeps using .action.showcart's positioning context but is
   restyled/repositioned to sit neatly on the smaller icon. */
.page-header .header-right .minicart-wrapper {
    flex-shrink: 0;
    margin-left: 18px;
}
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    opacity: 1;
    background-color: transparent;
    background-image: url('../images/cart_icon.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
}
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart:before,
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart:after {
    display: none;
}
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart .minicart-icon,
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart .text {
    display: none;
}
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart .counter.qty {
    top: -6px;
    right: -10px;
    left: auto;
    margin: 0;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    background-color: #FAB93D;
    color: #27282A;
}
.page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart span.counter.qty.empty{
    display: none;
}

/* Language switcher (store_language block) as an inline "globe FR | ENG"
   control, matching the Figma design - no dropdown, both languages always
   visible, current language shown as plain bold text. */
.switcher-language-larnet {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 6px;
    margin-left: 18px;
    font-size: 13px;
    font-weight: 600;
}
.switcher-language-larnet .larnet-lang-globe {
    width: 16px;
    height: 16px;
}
.switcher-language-larnet .larnet-lang-link,
.switcher-language-larnet .larnet-lang-current {
    color: #27282A;font-size: 12px;
}
.switcher-language-larnet .larnet-lang-current {
    font-weight: 700;
}
.switcher-language-larnet .larnet-lang-link {
    font-weight: 400;
}
.switcher-language-larnet .larnet-lang-link:hover {
    color: #FAB93D;
}
.switcher-language-larnet .larnet-lang-sep {
    color: #d9d9d9;
}

.quickaccess-tabs-contain,.header-right-bot-nav-contain{
    background: var(--lar-mainb);
            
        margin: 0 auto;        
}
.quickaccess-tabs-contain{    background: #EDEDED;}
.header-right-bot-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #27282A;
    margin-top: 10px;
    padding: var(--lar-padding-main);
    max-width: var(--lar-maxwidth);    margin: 0 auto;
    position: relative;
        text-align: right;
    display: flex;
    width: 100%;
}
.header-right-bot-nav .dealer-menu-item span {
    color: #FFFFFF;
    font-size: 14px;
}
.header-right-bot-nav .shopall-menu-item {
    /* positioned + z-index so the links stay above .dealer-menu-item (position:absolute) */
    position: relative;
    z-index: 1;
}
.header-right-bot-nav .shopall-menu-item a {
    display: inline-block;
    background: #FAB93D;
    color: #27282A;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 14px 20px;
    white-space: nowrap;
}
.header-right-bot-nav .shopall-menu-item a:hover {
    background: #e5a827;
}

/* navigation.sections (Home/About/Find a Sales Rep/My Lists/Reorder) is now
   only meant for the mobile off-canvas menu - the "Shop All" bar above
   replaces it on desktop. */
@media (min-width: 768px) {
    .page-header .nav-sections {
        display: none !important;
    }
}

/* Main navigation / mega-menu: keep the white background already set at
   >=768px, just add a yellow hover/active accent so it reads as the same
   brand as the rest of the page. */
.page-wrapper .sw-megamenu.navigation .level0 > .level-top:hover,
.page-wrapper .sw-megamenu.navigation .level0.active > .level-top {
    color: #27282A !important;
    border-bottom: 3px solid #FAB93D;
}

@media (max-width: 767px) {
    body .page-header.type2.header-newskin .block-search .label:before,body .page-header.type2.header-newskin .nav-toggle:before{color: #27282A;        font-size: 26px;}
    .page-header.type2.header-newskin.page-header-log .nav-toggle{display: none;}
    .page-header.page-header-log .header-main-top{padding: 0 20px;}
    header.page-header.type2.header-newskin {
        background: #FFFFFF !important;
    }
    .page-header .header-main-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;padding: 0 15px;
    }
    .product-item-info .product-item-details .class_stock_show_so .product-item-actions{
            white-space: normal;
    }
    /* Dissolve .header-left too so the toggle and the logo become
       independent flex items - the logo gets flex:1 + centered text so it
       reads as centered between the toggle and the icon cluster, matching
       the design, instead of hugging the toggle on the left. */
    .page-header .header-left {
        display: contents;
    }
    .page-header .nav-toggle {
        order: 1;
        flex: 0 0 auto;
    }
    .page-header .header-left .logo {
        order: 2;
        flex: 1 1 auto;
        text-align: center;
    }
    /* Dissolve the wrapper divs so account/cart (row 1) and
       contact/search/dealer-bar (their own full-width rows) can each be
       positioned independently against .header-main-top. */
    .page-header .header-right,
    .page-header .header-right-top,
    .page-header .header-right-bot {
        display: contents;
    }
    .page-header .main-panel-top,
    .page-header .main-panel-top .container,
    .page-header .main-panel-inner,
    .page-header .panel.wrapper,
    .page-header .panel.header {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent !important;
    }
    /* Row 1 (right side): icon cluster - Login (guest) or account+cart
       (logged in). Sits at the far right of row 1, the centered .logo
       (flex:1 above) fills the space between it and the toggle. */
    .page-header .main-panel-top {
        order: 3;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .page-header .main-panel-inner,
    .page-header .panel.header {
        display: flex;
        align-items: center;
    }
    .page-header ul.header.links li .larnet-login-btn {
        padding: 6px 14px;
        font-size: var(--lar-fs-xs);
    }
    
    .page-header .larnet-account-actions .larnet-logout-btn {
        display: none;
    }
    .page-header .larnet-account-icon {
        margin-left: 14px;
        width: 34px;
        height: 34px;
        background-size: 30px 30px;
    }
    .page-header.type2.header-newskin .minicart-wrapper {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 0 0 0 14px !important;
        padding: 0 !important;
    }
    .page-header.type2.header-newskin .minicart-wrapper.cart-design-1 .action.showcart {
        width: 34px;
        height: 34px;
        background-size: 30px 30px;
    }
    /* Row 2: contact info, full width, own line below row 1. The search box
       (nested inside larnet_top_contact) stacks below the contact text. */
    .page-header .larnet_top_contact {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 12px;
        white-space: normal;
        font-size: var(--lar-fs-xs);
    }
    .page-header .larnet-header-search {
        width: 100%;display: block;
    }
    .page-header .larnet-header-search .block-search input {
        width: 100%;left: auto;position: relative;        border-radius: 10px;display: inline-block;
    }
    .larnet-header-search .block-search .action.search{
        display: block;border-radius: 0 10px 10px 0;
    }
    body .page-header.type2.header-newskin .block-search .action.search{
        position: absolute;
        top: 17px !important;
        right: 17px !important;
        border: 0 none;
        padding: 0 20px;
        height: 34px !important;
        line-height: 34px !important;
    }
    body .page-header.type2.header-newskin .block-search .action.search:before{
                    -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 14px;
            line-height: inherit;
            color: #08c;
            content: '\f818';
            font-family: 'porto-icons';
            margin: 0;
            vertical-align: top;
            display: inline-block;
            font-weight: normal;
            overflow: hidden;
            speak: none;
            text-align: center;
                content: '\e884';
        color: #FFF;
        font-size: 16px;
        padding-left: 1px;
    }
    body .page-header.type2.header-newskin .block-search .action.search span{
        border: 0;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
    }
    /* Row 3 (.header-right-bot-nav, logged in only): dealer info stacked
       above the Shop All button, full-width black bar. */
    .header-right-bot-nav {
        order: 5;
        flex: 0 0 100%;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 8px;
        margin-top: 12px;
        padding: 10px 15px;
    }
    .header-right-bot-nav .dealer-menu-item span {
        font-size: var(--lar-fs-xs);
    }
    .product_view_detail{display: none;}
}

.footer-middle .footer-ribbon {
    background: #FAB93D;
    text-align: center;
    padding: 14px 20px;
    margin: 0 -15px 24px;
}
.footer-middle .footer-ribbon span {
    color: #27282A;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}
footer.page-footer a.reset_a:hover {
    color: #FAB93D !important;
}
footer.page-footer .footer-bottom .logo img {
    max-height: 70px;
    width: auto;
}
a.larnet-login-btn{    border: 1px solid #f9ba47 !important;padding: 10px 20px !important;}

.footer.is-guest .footer-loggedin-view,
.footer.is-logged-in .footer-guest-view {
    display: none !important;
}

/* Guest view: contact info (left) + logo (right), single row, matching the
   Figma login-page footer. */
.footer-guest-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-guest-view .footer-contact__heading {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.footer-guest-view .footer-contact__details {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}
.footer-guest-view .footer-contact__details a {
    color: #FFFFFF;
    text-decoration: underline;
}
.footer-guest-view .footer-social {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
}
.footer-guest-view .footer-social a {
    color: #FFFFFF;
}
.footer-guest-view .footer-logo img {
    max-height: 70px;
    width: auto;
}

/* Logged-in view: Quick Access + Shop All buttons above the logo (col 1),
   then Departments / Brands / Contact columns, matching the Figma
   logged-in footer. */
.footer-loggedin-view {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1.4fr;
    gap: 32px;
    align-items: start;
}
.footer-loggedin-view .footer-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.footer-loggedin-view .footer-quicklinks a {
    display: inline-block;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 8px 20px;
    border-radius: 2px;
    width: 200px;
}
.footer-loggedin-view .footer-quicklinks a:hover {
    background: #FFFFFF;
    color: #27282A;
}
.footer-loggedin-view .footer-logo img {
    max-height: 70px;
    width: auto;
}
.footer-loggedin-view .footer-col__heading {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.footer-loggedin-view .footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-loggedin-view .footer-col__list li {
    margin-bottom: 10px;
}
.footer-loggedin-view .footer-col__list a {
    color: #FFFFFF;
    font-size: 14px;
}
.footer-loggedin-view .footer-col__list a:hover {
    color: #FAB93D;
    text-decoration: underline;
}
.footer-loggedin-view .footer-contact__details {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}
.footer-loggedin-view .footer-contact__details a {
    color: #FFFFFF;
    text-decoration: underline;
}
.footer-loggedin-view .footer-social {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
}
.footer-loggedin-view .footer-social a {
    color: #FFFFFF;
}
@media (max-width: 767px) {
    .footer-loggedin-view {
        grid-template-columns: 1fr 1fr;
    }
    .footer-guest-view {
        flex-direction: column;
        align-items: flex-start;
    }
}
button.clean-search{display: none;}

.catalogsearch-result-index .category-title-container{
        width: 100%;
    text-align: right;
    display: inline-block;
}
body .form.create.account{border: 0 none;border-radius: 0;box-shadow: 2px 12px 24.5px 5px #00000021;}
.customer-account-create .page-title-wrapper{display: none !important;}
.form-create-account-container{background-color: #F7F7F7;padding: 40px;}
.fieldset > .legend{color: #27282A;text-transform: uppercase;font-weight: bold;}
.form-create-account-container button.action.primary{color: #27282A !important;}
.customer-account-login .owl-carousel .owl-item{padding: 20px 10px;}
.larnet-login-page .login-container .block{width: 100%;}
/* Bao bọc toàn bộ khối Login (nền tối) */
.block-customer-login {
    background-color: #2b2b2b; /* Màu nền xám đậm */
    padding: 30px;
    max-width: 500px; /* Bạn có thể điều chỉnh độ rộng tuỳ ý */
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    position: relative;
}


.block-customer-login .block-title {
    margin-bottom: 20px;
}

.block-customer-login .block-title strong {
    color: #ffffff;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Ẩn dòng note thừa và label ẩn đi */
.block-customer-login .field.note,
.block-customer-login .larnet-visually-hidden-label {
    display: none;
}

/* Khối Form trắng bên trong */
.block-customer-login .form-login {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px 20px 20px; /* padding bottom lớn hơn để chừa chỗ cho nút Log in */
    position: relative; /* Tạo điểm neo để absolute nút Submit */
}

/* Bỏ viền mặc định của fieldset */
.block-customer-login .fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* Container của mỗi input (chứa icon và ô text) */
.block-customer-login .field {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Ô nhập liệu */
.block-customer-login .field .control {
    flex-grow: 1;
}

.block-customer-login .input-text {
    width: 100%;
    height: 40px;
    border: 1px solid #444; /* Viền tối màu */
    padding: 0 15px;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
    outline: none;
}

.block-customer-login .input-text::placeholder {
    color: #777;
}

/* Chèn Icon vào đằng trước các thẻ input thông qua ::before */
.block-customer-login .field.email::before,
.block-customer-login .field.password::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Đường dẫn ảnh Icon */
.block-customer-login .field.email::before {
    background-image: url('../images/Username_login.png');
}

.block-customer-login .field.password::before {
    background-image: url('../images/carbon_password.png');
}

/* Toolbar chứa nút quên mật khẩu và login */
.block-customer-login .actions-toolbar {
    margin: 0;
    padding: 0;
}

/* Căn chỉnh Link Forgot Password */
.block-customer-login .actions-toolbar .secondary {
    margin-left: 45px; /* Chiều rộng icon(30) + khoảng cách(15) để thẳng hàng với ô input */
    margin-top: -10px;
}

.block-customer-login .actions-toolbar .secondary a {
    color: #666;
    font-size: 14px;
    text-decoration: underline;
}

.block-customer-login .actions-toolbar .secondary a:hover {
    color: #000;
}

/* Định vị khối chứa nút Login để đè lên góc bo */
.block-customer-login .actions-toolbar .primary {
    position: absolute;
    bottom: -20px; /* Đẩy tràn xuống dưới mép khối trắng */
    right: 25px;   /* Căn cách mép phải */
}

/* Style cho nút Nút Đăng nhập vàng */
.block-customer-login .action.login.primary {
    background-color: #eab444; /* Màu vàng cam từ thiết kế */
    color: #1a1a1a;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;    width: 200px;
}

.block-customer-login .action.login.primary:hover {
    background-color: #d6a137;
}
.larnet-login-page .login-container .fieldset:after{display: none;}

@media (min-width: 768px) {
    .page-layout-3columns .columns {
        display: block;
    }
    .page-layout-3columns .columns:after {
        content: "";
        display: table;
        clear: both;
    }
    .page-layout-3columns .sidebar-main,
    .page-layout-3columns .sidebar-additional {
        float: left;
        width: 20%;
    }
    .page-layout-3columns .column.main {
        float: left;
        width: 60%;
    }
    .sidebar.sidebar-additional img{width: 100%;}
    .sidebar.sidebar-additional{
            text-align: right;padding-left: 22px;
    }
    .products-grid .products .product-item .product-item-info .product-item-details{padding-bottom: 10px;}
    body .products-grid .products .product-item .product-item-info .product-item-details .product-item-inner{position: inherit;}
    body .product-item-info .product-item-details .product-item-actions form{display: flex}

    body .products.wrapper .product-item .qty-box{width: 90px !important;}
    body .products-grid .product-item-details .product-item-actions .tocart{
        margin: 0 0 0 5px;
    }
    .product_view_detail{
        display: block;
    }
}
/* Below 768px the columns stack (flex-wrap, full width each). DOM order is
   sidebar-main, main, sidebar-additional - mobile order is sidebar-additional,
   then main, then sidebar-main (Magento gives sidebar-main and main the same
   order:1, so DOM order would win otherwise). */
/* cart_delivery_instructions is rendered twice (Magento_Theme/layout/default.xml): in
   sidebar-additional for the desktop column, and in sidebar-main (above the sales rep
   card) for the stacked mobile layout. Only one is visible at a time. */
.sidebar.sidebar-main .larnet-cart-delivery {
    display: none;
}
@media (max-width: 767px) {
    .sidebar.sidebar-additional .larnet-cart-delivery {
        display: none;
    }
    .sidebar.sidebar-main .larnet-cart-delivery {
        display: block;
    }
    .page-layout-3columns .sidebar-additional {
        order: 1;
    }
    .page-layout-3columns .column.main {
        order: 2;
    }
    .page-layout-3columns .sidebar-main {
        order: 3;
    }
    /* Product page (2columns-left): the left sidebar has order: 0 (Porto's generated
       media/porto/web/css/custom.css, same specificity and loaded later - hence the
       `body` prefix) so it renders ahead of .column.main (order: 1). Product first,
       sidebar after. */
    body.catalog-product-view.page-layout-2columns-left .column.main {
        order: 1;
    }
    body.catalog-product-view.page-layout-2columns-left .sidebar-main {
        order: 2;
    }
}

body .product-item .action.towishlist:before{
    content: '';
}
.products-grid .product-item-details .product-item-actions a.action.towishlist.actions-secondary{
    background-image: url('../images/towishlist_icon.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: 0 none;
    z-index: 2;position: absolute;top: 0;width: 30px;
    right: 20px;
}
.quicklists-button.-view span,.add_shipping_list_icon span,.product_view_detail span,body .product-item-actions .action.towishlist > span{
            border: 0;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
}
body .products.wrapper .product-item .qty-box{margin: 0;}
body .products-grid .product-item-details .product-item-actions .tocart{
    border-radius: 0;    background: var(--lar-mainb) !important;text-transform: uppercase;    font-size: 12px;
}
.product_view_detail{
    background-image: url('../images/view_pro_detail_icon.png');
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: center;
        width: 40px;
    height: 36px;
}
body .products.wrapper .product-item .qty-box input{    height: 36px;    padding: 0 20px;    width: 90px !important;}
body .qtyminus,body .qtyplus{
    height: 36px;
    line-height: 36px;
    color: var(--lar-mainb);
}

body .products.wrapper .product-item .qty-box .qtyminus,body .products.wrapper .product-item .qty-box .qtyplus{
        height: 36px;
    line-height: 36px;
}
body .products-grid .products .product-item .product-item-info{
    box-shadow: 1px 6px 12.5px 3px rgba(0, 0, 0, 0.13);padding: 10px;position: relative;
}
.products-grid .products .product-item{        margin-bottom: 40px;}
body .products-grid .product-item .product-item-inner.class_stock_show_so{
    margin: 0;
}
.amwishlist-inner .stock.unavailable,.quicklists-card-actions .stock.unavailable,.products-grid .product-item .product-item-inner .stock.unavailable{display: block;}
.ias-noneleft {
    width: 100%;
    display: inline-block;
}
body .products-grid .product-item-info:hover .product-item-details .product-item-actions .tocart{
    background-color: var(--lar-maincl) !important;
}
body .product-item-details{position: initial;}
.navigation_title{
        font-size: 16px;
    font-weight: bold;
    color: var(--lar-mainb);
    text-transform: uppercase;
}

body .sw-megamenu.navigation.side-megamenu.custom-navigation li.level1{    padding-left: 15px;}
body.catalog-category-view .toolbar,body.catalogsearch-result-index .toolbar{margin-bottom: 0;}
body.catalog-category-view .toolbar{display: none;}
body .sw-megamenu.navigation.side-megamenu.custom-navigation li.level0 > a{
    font-weight: 600;padding: 0 !important;
            margin: 0 !important;
}

body .amwishlist-newlist-block .amwishlist-button.-plus.add_shipping_list_icon{
 background-image: url('../images/add_shipping_list_icon.png');
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 36px;   
}
.sw-megamenu.navigation.side-megamenu.custom-navigation li.level0 a{
    color: rgba(39, 40, 42, 1);
}
body .sw-megamenu.navigation.side-megamenu.custom-navigation li.level0:hover > a,
body .sw-megamenu.navigation.side-megamenu li.level0.active > a{
    color: rgba(39, 40, 42, 1) !important;
    font-weight: 800;
}
body .amwishlist-newlist-block .amwishlist-button.-plus.add_shipping_list_icon:before{display: none;}
div#quicklists-create-list-modal form.amwishlist-form{
    display: flex;
}
div#quicklists-create-list-modal form.amwishlist-form .amwishlist-button{border-radius: 0;background-color: var(--lar-mainb);    border: 0 none;}
div#quicklists-create-list-modal form.amwishlist-form .amwishlist-input{height: 40px;}
div#quicklists-create-list-modal  .modal-title{}
.quicklists-button.-view{
    background-image: url('../images/view_pro_detail_icon.png');
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: center;
        width: 40px;
    height: 36px;border: 0 none;
}
.quicklists-card{
    box-shadow: var(--lar-shadow);   
}
.amwishlist-field.-qty{    float: left;}
.amwishlist-product-grid .amwishlist-input.-qty{    height: 40px;}
.amwishlist-product-grid .amwishlist-button.-tocart{
        width: 180px;
    margin-left: 10px;
    display: inline-block;
    border-radius: 0;
}
.amwishlist-button.-fill.-primary:not(.-disabled){
    background-color: var(--lar-mainb);
    border-color: var(--lar-mainb);
}
body .amwishlist-product-grid .amwishlist-label{display: none;}
/* Vùng chứa toàn bộ Header */
.amwishlist-page-title {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #e5e7eb;
    font-family: Arial, sans-serif;
}

/* Nút "< Back" */
.amwishlist-page-title > .amwishlist-button.-prev {
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    padding: 0;
    margin-top: 8px; /* Căn chỉnh cho ngang hàng với tiêu đề */
}

/* Khối chứa Tiêu đề (Bên trái) và Toolbar (Bên phải) */
.amwishlist-page-title .amwishlist-title-block {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title toolbar"
        "counter toolbar";
    column-gap: 20px;
    align-items: center;
}

/* Nhóm Tiêu đề (Peter-List) và nút Edit */
.amwishlist-page-title .amwishlist-field-block.-title {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: 12px;flex-basis: auto;
}

.amwishlist-field-block .amwishlist-input {
    font-size: 28px;
    font-weight: bold;
    border: none;
    background: transparent;
    padding: 0;
    color: #111827;
    outline: none;
}

.amwishlist-field-block .amwishlist-input:focus {
    border-bottom: 1px dashed #ccc; /* Hiệu ứng khi bấm vào sửa tên */
}

/* Nút Edit (Hình bút chì) */
.amwishlist-button.-edit {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    opacity: 0.6;
}
.amwishlist-button.-edit:hover {
    opacity: 1;
}

/* Bộ đếm "3 items" */
.amwishlist-counter {
    grid-area: counter;
    color: #6b7280; /* Màu xám */
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

/* Toolbar bên phải (Update, Share, Delete) */
.amwishlist-page-title .amwishlist-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 12px;flex-basis: auto;
}

/* Định dạng chung cho các nút bấm trong Toolbar */
.amwishlist-page-title .amwishlist-toolbar .amwishlist-button {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.amwishlist-button.-fill.-primary:not(.-disabled):hover{
    background-color: #f9ba47;color: #FFF;
    border-color: #f9ba47;
}
a.action.towishlist.quicklists-quick-add{
    background-image: url('../images/towishlist_icon.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: 0 none;
    z-index: 2;position: absolute;top: 0;width: 30px;
    right: 0;
}
h2.category-title{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.ias-trigger.ias-trigger-next {
    margin: 0 auto;
}

.larnet-cart-page .column.main {
    margin: 0 auto;
    padding: 20px 20px 60px;
}
.larnet-cart-page .larnet-auth-heading {
    text-align: left;
    padding: 0 0 20px;
}

/* Direct children of .cart-container, final visual order pinned here
   instead of via layout XML before/after chains - two of those silently
   failed to resolve (see checkout_cart_index.xml) because their target
   wasn't an actual direct sibling at that scope, so order is made explicit
   and robust here regardless of DOM/merge order. */
.larnet-cart-page .cart-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
/* min-width:0 on every direct flex child: flex items default to
   min-width:auto, meaning a child never shrinks below its CONTENT's
   intrinsic width - the owl-carousel slider's .owl-stage is thousands of px
   wide before overflow:hidden clips it visually, and without min-width:0
   that intrinsic size still forced .block.crosssell (and the whole flex
   row/page) wider than the viewport despite flex-basis:100%, which is why
   .owl-next (positioned against that oversized ancestor chain) computed a
   huge offset and rendered off-screen on real mobile viewports. This is the
   actual root cause - the .owl-nav flex-overlay rewrite was a reasonable
   hardening but not the fix. */
.larnet-cart-page .cart-container > form.form-cart,
.larnet-cart-page .cart-container > .larnet-cart-right-col,
.larnet-cart-page .cart-container > .larnet-auth-heading,
.larnet-cart-page .cart-container > .block.crosssell,
.larnet-cart-page .cart-container > .cart-discount {
    min-width: 0;
}
.larnet-cart-page .cart-container > form.form-cart {
    order: 1;
    flex: 1 1 620px;
}

.larnet-cart-page .cart-container > .larnet-cart-right-col {
    order: 2;
    flex: 1 1 340px;
    max-width: 420px;
    gap: 24px;
}
.larnet-cart-page .cart-container > .larnet-auth-heading {
    order: 3;
    flex-basis: 100%;
}
.larnet-cart-page .cart-container > .block.crosssell {
    order: 4;
    flex-basis: 100%;
}
.larnet-cart-page .cart-container > .cart-discount {
    order: 5;
    flex-basis: 100%;
}

/* --- Item list: table -> card, no markup changes --------------------- */
.larnet-cart-page .cart.table-wrapper .table-caption,
.larnet-cart-page #shopping-cart-table thead {
    display: none;
}
.larnet-cart-page #shopping-cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 20px;
}
.larnet-cart-page #shopping-cart-table tbody.cart.item {
    display: block;
    position: relative;
    background: var(--lar-mainw, #FFFFFF);
    border-radius: 5px;
    box-shadow: 2px 12px 24.5px 5px rgba(0, 0, 0, 0.13);
    margin-bottom: 20px;
}
.larnet-cart-page #shopping-cart-table tr.item-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.larnet-cart-page #shopping-cart-table tr.item-info td {
    display: block;
    padding: 0;
    border: 0;
}
/* SKU: small "SKU  1117AMPA" tag on its own line above the product row. The label comes
   from the cell's data-th attribute (already translated by Magento). */
.larnet-cart-page #shopping-cart-table td.col.sku {
    order: 0;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    margin-bottom: -6px;
    padding-right: 40px;
}

.larnet-cart-page #shopping-cart-table td.col.item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 100%;
    order: 1;
}
.larnet-cart-page #shopping-cart-table .product-item-photo {
    flex: 0 0 auto;
    width: 90px;
}
.larnet-cart-page #shopping-cart-table .product-item-photo img {
    width: 100%;
    height: auto;
}
.larnet-cart-page #shopping-cart-table .product-item-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
    margin-bottom: 10px;
}
.larnet-cart-page #shopping-cart-table td.col.qty {
    order: 2;
}
.larnet-cart-page #shopping-cart-table td.col.price {
    order: 3;
    margin-left: auto;
    text-align: right;
    font-size: 18px;
    font-weight: 600;
    color: var(--lar-maindg, #55595A);
}
.larnet-cart-page #shopping-cart-table .price-including-tax,
.larnet-cart-page #shopping-cart-table .price-excluding-tax {
    display: block;
    font-size: inherit;
}
.larnet-cart-page #shopping-cart-table td.col.subtotal {
    display: none;
}

/* Qty pill: "− [input] +". Magento_Checkout::cart/qty-pill-enhance.phtml
   physically moves qty-dec/qty-inc to be direct siblings of .control.qty
   (before/after it) and removes the now-empty .qty-changer wrapper, so the
   DOM order IS the visual order here - no flex `order`/`display:contents`
   needed. Before that script runs (or if JS is disabled), .qty-changer
   still renders as a plain block below the input; visible but not matching
   Figma - acceptable no-JS fallback rather than a broken layout. */
.larnet-cart-page #shopping-cart-table .field.qty {
    display: flex;
    align-items: center;
    background: #EBEBEB;
    border-radius: 22px;
    padding: 4px 6px;
    width: fit-content;
    gap: 4px;
}
.larnet-cart-page #shopping-cart-table .field.qty > .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.larnet-cart-page #shopping-cart-table .field.qty .control.qty {
    margin: 0;
}
.larnet-cart-page #shopping-cart-table .field.qty .input-text.qty {
    width: 34px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
    padding: 0;
}
.larnet-cart-page #shopping-cart-table .field.qty > .qty-dec,
.larnet-cart-page #shopping-cart-table .field.qty > .qty-inc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: 18px;
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
}
.larnet-cart-page #shopping-cart-table .field.qty > .qty-dec i,
.larnet-cart-page #shopping-cart-table .field.qty > .qty-inc i {
    display: none;
}
.larnet-cart-page #shopping-cart-table .field.qty > .qty-dec:before {
    content: "\2212";
}
.larnet-cart-page #shopping-cart-table .field.qty > .qty-inc:before {
    content: "+";
}

/* Trash icon: absolute top-right of the card - the delete action already
   renders in its own row (tr.item-actions) below tr.item-info; positioning
   it absolutely over the card (position:relative on tbody above) matches
   Figma without moving it out of that row. */
.larnet-cart-page #shopping-cart-table tr.item-actions td {
    border: 0;
    padding: 0;
}
.larnet-cart-page #shopping-cart-table tr.item-actions .actions-toolbar {
    position: absolute;
    top: 18px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
/* Edit / Move to Wishlist (native, not in Figma) - kept functional but small
   and out of the way instead of wrapping under the absolute-positioned box
   with no width constraint. */
.larnet-cart-page #shopping-cart-table .action-edit,
.larnet-cart-page #shopping-cart-table .action.towishlist {
    font-size: 12px;
    color: var(--lar-maindg, #55595A);
}
.larnet-cart-page #shopping-cart-table .action-edit{display: none;}
.cart.table-wrapper .actions-toolbar > .action-delete:before,.larnet-cart-page #shopping-cart-table .action.towishlist{display: none;}
.larnet-cart-page #shopping-cart-table .action-delete {
    display: inline-flex;
    width: 22px;
    height: 24px;
    /*background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327282A' stroke-width='1.6'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 11v6M14 11v6' stroke-linecap='round'/%3E%3C/svg%3E");*/
    
    background-image: url('../images/at-icons_trash-can.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.larnet-cart-page #shopping-cart-table .action-delete span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Update/Clear Shopping Cart row - kept functional (qty +/- only updates
   the number client-side; this submits it), just de-emphasized since
   Figma doesn't give it visual weight. */
.larnet-cart-page .cart.main.actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 50px;
}
.larnet-cart-page .cart.main.actions .action {
    font-size: 13px;
    color: var(--lar-maindg, #55595A);
    display: block;
}

/* Clear / Update Shopping Cart sit at the very top of the list, above the top pager (cart/form.phtml). */
.larnet-cart-page .cart-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.larnet-cart-page .cart-top-actions .action {
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--lar-maindg, #55595A);
}
@media (max-width: 639px) {
    .larnet-cart-page .cart-top-actions .action {
        flex: 1 1 calc(50% - 6px);
        padding: 10px 6px;
        line-height: 1.3;
        text-align: center;
    }
}

/* --- Totals / checkout sidebar ---------------------------------------- */
.larnet-cart-page .cart-summary {
    background: var(--lar-mainw, #FFFFFF);
    border-radius: 5px;
    box-shadow: 2px 12px 24.5px 5px rgba(0, 0, 0, 0.13);
    padding: 24px;
    width: 100%;
}
.larnet-cart-page .cart-summary > .title {
    display: none;
}
.larnet-cart-page .cart-summary .block.shipping .title {
    display: block;
}
.larnet-cart-page .cart-summary .summary.title,
.larnet-cart-page .cart-totals .table-caption {
    display: none;
}
.larnet-cart-page .cart-totals .grand.totals .mark,
.larnet-cart-page .cart-totals .grand.totals .amount {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--lar-mainb, #27282A);
}
.larnet-cart-page .cart-totals table {
    width: 100%;
    margin-bottom: 16px;
}
.larnet-cart-page #checkout-cart-methods {
    text-align: center;
}
.larnet-cart-page .checkout-methods-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.larnet-cart-page .checkout-methods-items .action.primary.checkout {
    display: block;
    width: 100%;
    background: var(--lar-mainy, #FAB93D) !important;
    border-color: var(--lar-mainy, #FAB93D) !important;
    color: var(--lar-mainb, #27282A) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    padding: 16px;
    border-radius: 8px;
    height: auto;
}
.larnet-cart-page .cart.main.actions .action.continue {
    display: none;
    text-align: center;
    text-decoration: underline;
    color: var(--lar-mainb, #27282A);
    font-size: 15px;
    margin-top: 4px;
}
.larnet-cart-page .cart-summary .action.continue {
    display: block;
    text-align: center;
    text-decoration: underline;
    color: var(--lar-mainb, #27282A);
    font-size: 15px;
    margin-top: 10px;
}
.larnet-cart-page div#cart-totals tr.grand.totals,.larnet-cart-page div#block-shipping{display: none;}
.larnet-cart-page div#cart-totals{
    border: 0 none;
}
/* --- Delivery instructions + sales rep CMS block ----------------------- */
.larnet-cart-delivery {
    padding: 0;text-align: left;
    box-shadow: var(--lar-shadow);
    padding: 10px;
    border-radius: 10px;
    margin-top: 40px;
}
.larnet-cart-delivery .navigation_title{
    display: block !important;
}
.sidebar.sidebar-additional .contain-block{
    padding: 0;text-align: left;
    box-shadow: var(--lar-shadow);
    padding: 10px;
    border-radius: 10px;
            margin-top: 40px;
}
.larnet-cart-delivery h3 {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 12px;
    color: var(--lar-mainb, #27282A);
}
.larnet-cart-delivery p {
    color: var(--lar-maindg, #55595A);
    font-size: 15px;
    line-height: 1.5;
}
.larnet-cart-rep {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 20px;
}
.larnet-cart-rep img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}
.larnet-cart-rep .larnet-cart-rep__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--lar-mainb, #27282A);
    margin: 0 0 4px;
}
.larnet-cart-rep .larnet-cart-rep__contact {
    font-size: 14px;
    color: var(--lar-maindg, #55595A);
    margin: 0 0 10px;
}
.larnet-cart-rep .larnet-cart-rep__contact a {
    color: inherit;
}
.larnet-cart-rep__btn {
    display: inline-block;
    border: 2px solid var(--lar-mainb, #27282A);
    color: var(--lar-mainb, #27282A) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 4px;
}

/* --- Suggestions (native crosssell, Magento_Catalog::product/list/items.phtml) --- */
.larnet-cart-page .block.crosssell {
    margin-top: 40px;
}
.larnet-cart-page .block.crosssell .block-title {
    display: none;
}
/* Slider (owl-carousel) instead of a static grid - same plugin/init pattern
   as the login page's "Our Solutions" slider. */
.larnet-cart-page .block.crosssell .products-grid {
    position: relative;
}
.larnet-cart-page .block.crosssell .product-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.larnet-cart-page .block.crosssell .product-items .owl-stage-outer {
    padding: 0 2px;
}
.larnet-cart-page .block.crosssell .product-item {
    background: var(--lar-mainw, #FFFFFF);
    border-radius: 5px;
    box-shadow: var(--lar-shadow);
    padding: 16px;
    text-align: left;
    width: 100%;    margin: 20px;
}
/* .owl-nav itself is the ONE absolutely-positioned element (a full-cover
   overlay spanning the whole slider), laid out with flex space-between -
   the two buttons are normal, non-positioned flex children. Previously each
   button had its OWN `position:absolute` + a negative left/right offset;
   DevTools on a real mobile viewport showed .owl-next computing to a wildly
   wrong offset (thousands of px, pushed off-screen) even though .owl-prev
   (identical rule, mirrored) rendered fine - never pinned down which other
   rule/JS was clobbering just that one side, so avoiding the whole class of
   "absolutely position each button individually" bug is more robust than
   chasing the exact conflict. `pointer-events` lets clicks pass through the
   transparent middle of the overlay to the slides underneath, only the
   button hitboxes at each end are clickable. */
.larnet-cart-page .block.crosssell .owl-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.larnet-cart-page .block.crosssell .owl-nav .owl-prev,
.larnet-cart-page .block.crosssell .owl-nav .owl-next {
    position: static;
    flex: 0 0 auto;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    background: var(--lar-mainw, #FFFFFF);
    border: 1px solid var(--lar-mainb, #27282A);
    border-radius: 50%;
    color: var(--lar-mainb, #27282A);
    font-size: 18px;
}
.larnet-cart-page .block.crosssell .product-item-photo {
    display: block;
}
.larnet-cart-page .block.crosssell .product-item-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.larnet-cart-page .block.crosssell .product-item-name {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--lar-mainb, #27282A);
    margin-top: 10px;
}
.larnet-cart-page .block.crosssell .product-item-name a {
    color: inherit;
}
.larnet-cart-page .block.crosssell .product-item-price {
    color: var(--lar-maindg, #55595A);
    font-size: 14px;
    margin-top: 4px;
}
@media (max-width: 991px) {
    .larnet-cart-page .cart-container > .larnet-cart-right-col {
        max-width: none;
    }
}
.sidebar.sidebar-main .larnet-cart-delivery{    margin-top: 20px;}
@media (min-width: 768px){
    .larnet-cart-page .cart-container > .larnet-cart-right-col{
        /* column (not column-reverse): visual order should just follow DOM
           order (Order Summary, then cart_delivery_instructions, then
           larnet.cart.cart_rep - see checkout_cart_index.xml). column-reverse
           was fine with exactly 2 children but flips ALL children, so it
           silently put cart_rep ahead of delivery_instructions once a third
           child was added instead of after it like the XML's own
           after="larnet.cart.delivery_instructions" says. */
        flex-direction: column;display: flex;
    }
    .larnet-cart-page .cart-summary{
                    order: 0;
    }
    .catalogsearch-result-index .page-title-wrapper{
        padding: var(--lar-padding-main);
    }
    .larnet-account-icon{margin-bottom: -10px;}
}


/* Checkout page - Suggestions (larnet.cart.suggestions reused inside the
   "larnet.promo.logged" container, see Magento_Checkout/layout/
   checkout_index_index.xml). Core LESS (Magento_Checkout/web/css/source/
   module/_cart.less, "Cross sell" desktop rule) applies `.block.crosssell{
   width:66.66%; float:left; padding:0 4% 0 0}` GLOBALLY, not scoped to
   .checkout-cart-index - on the cart page it's harmless because
   .larnet-cart-page's own .block.crosssell rules above reset it, but on the
   checkout page nothing resets it, so it floats at 2/3 width with nothing
   to clear it and the following page.wrapper content (footer) rides up
   beside/over it. Reset back to a plain full-width block here. */
.checkout-index-index .block.crosssell {
    width: 100%;
    float: none;
    padding: 0;
    margin-top: 40px;
    margin-bottom: 40px;
    order: inherit;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}
.checkout-index-index .block.crosssell .block-title {
    display: none;
}
.checkout-index-index .block.crosssell .products-grid {
    position: relative;
    padding: 0 48px;
}
.checkout-index-index .block.crosssell .product-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.checkout-index-index .block.crosssell .product-items .owl-stage-outer {
    padding: 4px 2px;
}
.checkout-index-index .block.crosssell .product-item {
    background: var(--lar-mainw, #FFFFFF);
    border-radius: 5px;
    box-shadow: var(--lar-shadow);
    padding: 16px;
    text-align: left;
    width: 100%;
}
.checkout-index-index .block.crosssell .owl-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.checkout-index-index .block.crosssell .owl-nav .owl-prev,
.checkout-index-index .block.crosssell .owl-nav .owl-next {
    position: static;
    flex: 0 0 auto;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    background: var(--lar-mainw, #FFFFFF);
    border: 1px solid var(--lar-mainb, #27282A);
    border-radius: 50%;
    color: var(--lar-mainb, #27282A);
    font-size: 18px;
}
.checkout-index-index .block.crosssell .product-item-photo {
    display: block;
}
.checkout-index-index .block.crosssell .product-item-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.checkout-index-index .block.crosssell .product-item-name {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--lar-mainb, #27282A);
    margin-top: 10px;
}
.checkout-index-index .block.crosssell .product-item-name a {
    color: inherit;
}
.checkout-index-index .block.crosssell .product-item-price {
    color: var(--lar-maindg, #55595A);
    font-size: 14px;
    margin-top: 4px;
}
@media (max-width: 639px) {
    .checkout-index-index .block.crosssell .products-grid {
        padding: 0 40px;
    }
}


.checkout-index-index .opc-wrapper,
.checkout-index-index .opc-sidebar {
    margin-top: 40px;
}

/* Progress bar */
.checkout-index-index .opc-progress-bar-item {
    font-size: 0;margin-right: 20px;
}
.checkout-index-index .opc-progress-bar-item > span {
    color: var(--lar-maindg, #55595A);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.checkout-index-index .opc-progress-bar-item:before {
    background: #E7E7E7;
    height: 3px;
}
.checkout-index-index .opc-progress-bar-item > span:before {
    background: #E7E7E7;
    box-shadow: none;
}
.checkout-index-index .opc-progress-bar-item > span:after {
    color: var(--lar-maindg, #55595A);
    font-weight: 700;
}
.checkout-index-index .opc-progress-bar-item._active:before,
.checkout-index-index .opc-progress-bar-item._complete:before {
    background: var(--lar-mainy, #FAB93D);
}
.checkout-index-index .opc-progress-bar-item._active > span,
.checkout-index-index .opc-progress-bar-item._complete > span {
    color: var(--lar-mainb, #27282A);
}
.checkout-index-index .opc-progress-bar-item._active > span:before,
.checkout-index-index .opc-progress-bar-item._complete > span:before {
    background: var(--lar-mainy, #FAB93D);
}
.checkout-index-index .opc-progress-bar-item._active > span:after,
.checkout-index-index .opc-progress-bar-item._complete > span:after {
    color: var(--lar-mainb, #27282A);
}
.checkout-index-index .opc-progress-bar-item:first-child span:after{
    content: "1" !important;font-size: 16px;
}
.checkout-index-index .opc-progress-bar-item:last-child span:after{
    content: "2" !important;font-size: 16px;
}
/* Section headings ("Shipping Address", "Shipping Methods") */
.checkout-index-index .step-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 20px;
    color: var(--lar-mainb, #27282A);
    border-bottom: 2px solid var(--lar-mainb, #27282A);
    padding-bottom: 12px;
        margin-bottom: 20px;
}

/* Shipping address cards */
.checkout-index-index .shipping-address-item {
    background: var(--lar-mainw, #FFFFFF);
    border: 1px solid #E7E7E7;
    border-radius: 8px;
    box-shadow: var(--lar-shadow);
    padding: 20px 24px 60px;
    transition: box-shadow .2s ease, border-color .2s ease;
        margin: 0 0 0 20px;
}
.checkout-index-index .shipping-address-item:before {
    display: none;
}
.checkout-index-index .shipping-address-item.selected-item {
    border-color: var(--lar-mainy, #FAB93D);
    border-width: 2px;
}
.checkout-index-index .shipping-address-item.selected-item:after {
    background: var(--lar-mainy, #FAB93D);
    color: var(--lar-mainb, #27282A);
    border-radius: 50%;
}
.checkout-index-index .shipping-address-item:not(.selected-item):hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: #d0d0d0;
}
.checkout-index-index .action-select-shipping-item {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    width: auto;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.checkout-index-index .edit-address-link {
    color: var(--lar-maindg, #55595A);
    text-decoration: underline;
}
.checkout-index-index .action-show-popup {
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid var(--lar-mainb, #27282A);
    background: var(--lar-mainw, #FFFFFF);
    color: var(--lar-mainb, #27282A);
    padding: 10px 24px;
}

/* Shipping methods table -> flat, card-like rows */
.checkout-index-index .table-checkout-shipping-method {
    border-collapse: separate;
    border-spacing: 0 10px;
                width: 100%;
}
.checkout-index-index .table-checkout-shipping-method thead {
    display: none;
}
.checkout-index-index .table-checkout-shipping-method tbody tr.row {
    background: var(--lar-secg, #F7F7F7);
    cursor: pointer;
}
.checkout-index-index .table-checkout-shipping-method tbody tr.row td {
    border: none;
    padding: 16px 14px;
    vertical-align: middle;
}
.checkout-index-index .table-checkout-shipping-method tbody tr.row td:first-child {
    border-radius: 6px 0 0 6px;
}
.checkout-index-index .table-checkout-shipping-method tbody tr.row td:last-child {
    border-radius: 0 6px 6px 0;
}
.checkout-index-index .table-checkout-shipping-method .col-price .price {
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
}

/* Next / Place Order buttons */
.checkout-index-index #shipping-method-buttons-container .action.primary,
.checkout-index-index .opc-payment .actions-toolbar .action.primary {
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 40px;
}

/* Order Summary sidebar */
.checkout-index-index .opc-block-summary {
    background: var(--lar-mainw, #FFFFFF);
    border: none;
    border-radius: 8px;
    box-shadow: var(--lar-shadow);
    padding: 24px;
}
.checkout-index-index .opc-block-summary > .title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
    border-bottom: 2px solid var(--lar-mainb, #27282A);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.checkout-index-index .opc-block-summary .items-in-cart > .title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.checkout-index-index .opc-block-summary .product-item-name {
    color: var(--lar-mainb, #27282A);
    font-weight: 600;
}

/* Mobile sticky "Estimated Total" bar */
.checkout-index-index .opc-estimated-wrapper {
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.checkout-index-index .opc-estimated-wrapper .estimated-price {
    color: var(--lar-mainb, #27282A);
    font-weight: 700;
}
form#co-shipping-method-form button.button.action.continue.primary{    margin-top: 20px;}
body.category-shop-all a.shop-all-link,.category-shop-all .category-title-container .shopall-menu-item{display: none !important;}
@media (min-width: 768px) {
    .checkout-index-index .opc-sidebar {
        position: sticky;
        top: 20px;
    }
}
/* CSS chung cho Desktop (Mặc định) */
.category-title-container {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: space-between; /* Đẩy Title sang trái, Shop All sang phải. Nếu bạn muốn chúng nằm sát nhau, hãy đổi thành flex-start và thêm thuộc tính gap */
}

/* Xoá khoảng lề mặc định của thẻ h2 để không bị lệch bố cục */
.category-title {
    margin: 0; 
}


.category-title-container h2.category-title {
    margin: 0;
}
.category-title-container {
    margin: 20px 0;
}

.category-title-container .shopall-menu-item a {
    border: 2px solid var(--lar-mainb);
    color: var(--lar-mainb);
    padding: 10px 40px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}
.payment-method-title.field {
    font-size: 18px;
    
}
.payment-method-title.field.choice{font-weight: bold;}
.payment-method-content div#review-buttons-container {
    margin-top: 20px;
}

/* Wishlist item row (Amasty_MWishlist::wishlist/item/column/cart.phtml) -
   qty stepper + Add to Cart + View, styled to match the product list's
   qty-box/tocart/product_view_detail row. Amasty's own .amwishlist-button
   is display:flex, which makes it a block-level element (flex is
   block-outside by default) - without a flex parent here it drops to its
   own line below the qty input, and .product_view_detail becomes
   display:block on desktop (see the product-list media query above), so
   it drops to a third line below that. Making .amwishlist-action itself
   the flex row is the actual fix; everything below it is just matching
   the product list's visual sizing. The .qty-box wrapper around
   qtyminus/input/qtyplus (added directly in the template) reuses the
   exact same overlay technique the product list's own .qty-box uses
   (position:relative box, qtyminus/qtyplus absolutely pinned to each
   edge, input padded to clear them) instead of a flex row, since that's
   what "work like product list" means here - same markup shape, same CSS
   shape. */
.amwishlist-field.amwishlist-action {
    display: flex;
    align-items: center;
    gap: 10px;
}
.amwishlist-field.amwishlist-action .qty-box {
    position: relative;
    width: 90px;
    flex: 0 0 auto;
}
.amwishlist-field.amwishlist-action .qty-box .amwishlist-input.-qty {
    height: 36px;
    width: 90px !important;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    border: 1px solid #ddd;
    max-width: 90px;
}
.amwishlist-field.amwishlist-action .qty-box .qtyminus,
.amwishlist-field.amwishlist-action .qty-box .qtyplus {
    position: absolute;
    top: 0;
    height: 36px;
    line-height: 36px;
    width: 28px;
    text-align: center;
    background-color: #ddd;
    color: var(--lar-mainb, #27282A);
}
.amwishlist-field.amwishlist-action .qty-box .qtyminus {
    left: 0;
}
.amwishlist-field.amwishlist-action .qty-box .qtyplus {
    right: 0;
}
.amwishlist-field.amwishlist-action .amwishlist-button.-tocart {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border-radius: 0;
    background: var(--lar-mainb, #27282A) !important;
    border-color: var(--lar-mainb, #27282A) !important;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: 0;
}
.amwishlist-field.amwishlist-action .product_view_detail {
    flex: 0 0 auto;
    display: block;
    width: 40px;
    height: 36px;
}
body .checkout-payment-method .payment-method-title{    border: 0 none;}
.block.block-collapsible-nav li.nav.item:has(span.delimiter) {
    display: none;
}
/* Checkout page: cart_delivery_instructions under the steps, inside .opc-wrapper
   (placeholder in the theme's Magento_Checkout/web/template/onepage.html). */
.checkout-index-index .opc-wrapper .larnet-delivery-instructions {
    margin-top: 30px;
}

/* Cart page subtotal: single centered "Subtotal (N Items): 1,023.78 CAD" line
   (js/view/cart/totals/subtotal.js, Magento_Checkout/cart/totals/larnet-subtotal). */
.larnet-cart-page .cart-totals .totals.sub.larnet-subtotal th {
    display: none;
}
.larnet-cart-page .cart-totals .totals.sub.larnet-subtotal td {
    display: block;
    padding: 0 0 12px;
    text-align: center;
    border: 0;
}
.larnet-cart-page .cart-totals .totals.sub.larnet-subtotal .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--lar-mainb, #27282A);
}

/* Sales rep card now lists several reps (cart-rep.js clones one .larnet-cart-rep per rep). */
.larnet-cart-rep .larnet-cart-rep__title {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--lar-maindg, #55595A);
}
.larnet-cart-rep-list > .larnet-cart-rep:first-child {
    margin-top: 0;
}

body footer.page-footer,
body footer.page-footer .footer-bottom,
body .page-wrapper footer.page-footer .footer-bottom .container {
    background-color: #FFFFFF;
}
footer.page-footer .footer:has(.siteFooter__grid) {
    margin: 0;
}
footer.page-footer .footer-bottom {
    padding-bottom: 0;
}
footer.page-footer .footer-bottom > .container:before {
    display: none;
}
footer.page-footer .footer-bottom address:empty {
    display: none;
}
body footer.page-footer .footer-bottom .custom-block.f-right {
    margin-bottom: 0;
    padding-bottom: 0;
    color: #27282A;
}
body .page-wrapper footer.page-footer .footer-bottom .custom-block .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
footer.page-footer .footer-bottom .custom-block > .bg-dark a{color: #FFF !important;}
/* --- grid: [brand] [info] [info] [info] --- */
footer.page-footer .footer-bottom .siteFooter__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 0;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #27282A !important;
}
footer.page-footer .footer-bottom .siteFooter__item {
    padding-inline: 0;
    font-size: 14px;
    line-height: 1.5;
}
footer.page-footer .footer-bottom .siteFooter__img {
    display: block;
    width: 100%;
    max-width: 227px;
    height: auto;
    max-height: none;
    object-fit: contain;
}
footer.page-footer .footer-bottom .siteFooter__social {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
footer.page-footer .footer-bottom .siteFooter__social a {
    display: inline-flex;
}
footer.page-footer .footer-bottom .siteFooter__social a:hover {
    opacity: .7;
}

/* --- info columns --- */
footer.page-footer .footer-bottom .siteFooter__title {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #27282A;
}
footer.page-footer .footer-bottom .siteFooter__row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 5px;
}
footer.page-footer .footer-bottom .siteFooter__row:last-child {
    margin-bottom: 0;
}
footer.page-footer .footer-bottom .siteFooter__row address {
    display: block;
    float: none;
    margin: 0;
    line-height: inherit;
    font-style: normal;
    padding-top: 0;
}
footer.page-footer .footer-bottom .siteFooter__row a,
footer.page-footer .footer-bottom .siteFooter__row .reset_a {
    color: #27282A !important;
    text-decoration: none;
}
footer.page-footer .footer-bottom .siteFooter__row a:hover {
    text-decoration: underline;
}
footer.page-footer .footer-bottom .siteFooter__note {
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    text-decoration: underline;
}

/* --- dark bar --- */
footer.page-footer .footer-bottom .custom-block > .bg-dark {
    position: relative;
    margin-top: 0;
    padding: 24px 0;
    background: #1F2328 !important;
    color: #FFFFFF;
    /* full-bleed: the bar sits inside a max-width container but the colour runs edge to edge */
    box-shadow: 0 0 0 100vmax #1F2328;
    clip-path: inset(0 -100vmax);
}
footer.page-footer .footer-bottom .bg-dark > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}
footer.page-footer .footer-bottom .bg-dark > .container > div:first-child {
    flex: 0 1 50%;
    min-width: 260px;
    font-size: 15px;
    line-height: 1.6;
}
footer.page-footer .footer-bottom .bg-dark > .container > .ms-auto {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    white-space: nowrap;
}

/* icons (stand-ins for Font Awesome glyphs) */
footer.page-footer .footer-bottom .siteFooter__row .fa,
footer.page-footer .footer-bottom .siteFooter__social .fa {
    flex: 0 0 auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
footer.page-footer .footer-bottom .siteFooter__row .fa {
    width: 18px;
    height: 24px;
    margin-top: 1px;
}
footer.page-footer .footer-bottom .fa-map-marker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%2327282A' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E");
}
footer.page-footer .footer-bottom .fa-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2327282A' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");
    /* Font Awesome's phone handset is mirrored vs. the Figma icon (earpiece top-left) */
    transform: scaleX(-1);
}
footer.page-footer .footer-bottom .siteFooter__social .fa {
    width: 32px;
    height: 32px;
}
footer.page-footer .footer-bottom .fa-facebook-square {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 32 448 448'%3E%3Cpath fill='%2327282A' d='M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z'/%3E%3C/svg%3E");
}
footer.page-footer .footer-bottom .fa-linkedin-square {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 32 448 448'%3E%3Cpath fill='%2327282A' d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    footer.page-footer .footer-bottom .siteFooter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }
}
@media (min-width: 1200px) {
    footer.page-footer .footer-bottom .siteFooter__grid {
        grid-template-columns: minmax(220px, .95fr) repeat(3, minmax(0, 1.1fr));
        grid-template-rows: auto auto auto;
        gap: 0;
        align-items: start;
    }
    /* each item spans the 3 grid rows (title / address / phone); the info items adopt those rows as a
       subgrid, so titles, addresses and phone lines line up across columns even when one title wraps */
    footer.page-footer .footer-bottom .siteFooter__item {
        grid-row: span 3;
        height: 100%;
    }
    footer.page-footer .footer-bottom .siteFooter__item:nth-child(n+2) {
        display: grid;
        /*grid-template-rows: subgrid;*/
        row-gap: 0;
        align-content: start;
        padding-left: 24px;
        padding-right: 24px;
    }
    /* first info column: no rule, but keep clear of the logo */
    footer.page-footer .footer-bottom .siteFooter__item:nth-child(2) {
        padding-left: 40px;
    }
    /* thin rule between the info columns (not between the logo and the first one) */
    footer.page-footer .footer-bottom .siteFooter__item:nth-child(n+3) {
        border-left: 1px solid #27282A;
    }
}

/* Guest (.header-right-top) and logged-in (.header-right-bot) header: contact text (+ the search box
   under it, when logged in) and the right-hand cluster (Login / language / account / cart / Logout)
   stay on ONE row at every desktop/tablet width. .header-right-top is flex-wrap:wrap with a content-sized contact
   <p>, so once the window narrows the contact text claims the whole row and .main-panel-top wraps
   under it. Here the contact block is the flexible part (shrinks, wraps its own text) and the
   Login/language cluster keeps its size. Mobile (<768px) has its own stacked layout above. */
@media (min-width: 768px) {
    .page-header .header-right-top,
    .page-header .header-right-bot {
        flex-wrap: nowrap;
        gap: 24px;
    }
    .page-header .header-right-top .larnet_top_contact,
    .page-header .header-right-bot .larnet_top_contact {
        flex: 1 1 0;
        min-width: 0;
    }
    .page-header .header-right-top .main-panel-top,
    .page-header .header-right-bot .main-panel-top {
        flex: 0 0 auto;
    }
    /* The search box is a fixed 450px (Porto); inside the now-flexible contact column it must be
       allowed to shrink with it, otherwise it overflows both sides and covers the logo / icons. */
    .page-header .header-right-bot .larnet-header-search {
        width: 100%;
    }
    .page-header .header-right-bot .larnet-header-search .block.block-search {
        width: 100%;
        max-width: 450px;
        min-width: 0;
    }
    /* Magento's styles-m.css hides .panel.header .switcher below 992px (display:none, then
       inline-block from 992px up), so the FR | ENG toggle vanished at 768-991px. Same selector
       weight + later in the cascade keeps it visible all the way down to the mobile layout,
       which hides it itself in the (max-width: 767px) block. */
    .page-header .panel.header .switcher-language-larnet {
        display: inline-flex;
        margin-left: 0;
    }
}

/* Mini cart: while an item is being removed (web/js/minicart-remove-guard.js) the list is
   locked, the clicked item is dimmed and a spinner is shown, so Remove can't be clicked twice. */
.minicart-items.is-busy {
    position: relative;
    pointer-events: none;
}
.minicart-items.is-busy > li {
    opacity: .55;
}
.minicart-items.is-busy > li.is-removing {
    opacity: .25;
}
.minicart-items.is-busy:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: var(--lar-mainy, #FAB93D);
    border-radius: 50%;
    animation: larnet-minicart-spin .7s linear infinite;
}
@keyframes larnet-minicart-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Mini cart "Clear Cart" link, next to "View Cart" (web/js/minicart-clear-cart.js). */
.minicart-wrapper .block-minicart .total-count .actions .action.clearcart {
    margin-right: 10px;
    color: #e02b27;
}
.minicart-wrapper .block-minicart .total-count .actions .action.clearcart:hover {
    color: #b3201d;
}
.page-header .larnet_top_contact{z-index: 1;}

.mst-searchautocomplete__autocomplete{border-color: var(--lar-mainy);}
/* CSS cho màn hình Mobile (Kích thước dưới 768px) */
@media (max-width: 767px) {
    .category-title-container .shopall-menu-item {
        display: none; /* Ẩn phần tử trên mobile */
    }
    /* Wishlist page header (Back / list name / Update-Share-Delete / item count):
       stacked and full width instead of the desktop two-column grid. */
    .amwishlist-page-title {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }
    .amwishlist-page-title > .amwishlist-button.-prev {
        align-self: flex-start;
        margin-top: 0;
    }
    .amwishlist-page-title .amwishlist-title-block {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "counter"
            "toolbar";
        row-gap: 8px;
    }
    .amwishlist-page-title .amwishlist-field-block.-title {
        min-width: 0;
        gap: 8px;
    }
    .amwishlist-page-title .amwishlist-field-block .amwishlist-input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        font-size: var(--lar-fs-h1);
    }
    .amwishlist-page-title .amwishlist-counter {
        margin-top: 0;
        min-height: 0;
        line-height: 1.3;
        align-self: start;
    }
    .amwishlist-page-title .amwishlist-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
    }
    .amwishlist-page-title .amwishlist-toolbar .amwishlist-button {
        flex: 1 1 auto;
        justify-content: center;
        margin-bottom: 0 !important;
        padding: 8px 10px;
        font-size: var(--lar-fs-sm);
        white-space: nowrap;
    }
}
@media (max-width: 639px) {
    h2.category-title{font-size: var(--lar-fs-title);}
    .larnet-cart-page #shopping-cart-table td.col.item {
        flex-basis: 100%;
    }
    .larnet-cart-page #shopping-cart-table td.col.price {
        flex-basis: 100%;
        text-align: left;
    }
    .header-right-bot-nav .shopall-menu-item{
        display: none;
    }
    a.quickaccess-tab{
        padding: 10px 5px;
        font-size: var(--lar-fs-sm);
    }
    .page-header.type2.header-newskin .logo{text-align: center;}
    .page-header.type2.header-newskin .logo img{display: inline;}
    #product_top_nav nav.navigation.sw-megamenu.side-megamenu.custom-navigation{padding: 0 10px;}
    .larnet_top_contact p a{color: var(--lar-maindg);}

    /* 3 columns layout (category / search): stacked, full-width blocks */
    .page-layout-3columns .sidebar-main:has(> *),
    .page-layout-3columns .sidebar-additional {
        margin-top: 20px;
    }
    .page-layout-3columns .sidebar-main,
    .page-layout-3columns .sidebar-additional {
        float: none;
        width: 100%;
        padding-left: 0;
        text-align: left;
    }
    .page-layout-3columns .column.main {
        margin-top: 20px;
    }
    .sidebar.sidebar-additional img {
        display: block;
        width: 100%;
        height: auto;
    }
    .sidebar.sidebar-additional .contain-block,
    .sidebar.sidebar-additional .larnet-cart-delivery {
        margin-top: 0;
    }
    .sidebar.sidebar-additional .larnet-cart-delivery {
        margin-top: 20px;
    }

    /* Wishlist "Bulk Add Products" dropdown (Ptg_CustomWishlist bulk_add.phtml): its inline
       style anchors the panel to the button (right:auto; left:0; width:90vw), which pushes
       it off-screen on a phone. Anchor it to the toolbar instead so it spans its full width. */
    .ptg-wishlist-toolbar {
        position: relative;
    }
    .ptg-wishlist-toolbar .ptg-bulkadd-block {
        position: static;
    }
    .ptg-wishlist-toolbar .ptg-bulkadd-panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
    footer.page-footer .footer-bottom .bg-dark > .container > .ms-auto{
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .quicklists-section-head h2, .quicklists-section > h2{font-size: var(--lar-fs-md);padding: 10px;}
    .login-our-solutions__trust-label{    font-size: var(--lar-fs-sm);}
    footer.page-footer .footer-bottom .siteFooter__title{font-size: var(--lar-fs-lg);}
    div#larnet_cart_rep{margin-top: 20px;}
    footer.page-footer .footer-bottom .bg-dark > .container{gap: 0;}
    .amwishlist-list-block.-recently-viewed .amwishlist-item{max-width: 160px;}
    .amwishlist-list-block .amwishlist-list .amwishlist-item:before{
            width: 150px;
            height: 150px;
    }
    .amwishlist-wishlist-index .pager .limiter{    margin: 0;}
    .amwishlist-wishlist-index .pager{padding: 10px 0 10px;}
    .block-collapsible-nav{top: auto;
        position: relative;}
    .checkout-index-index .shipping-address-item{margin: 0;}  
    .checkout-index-index .step-title{
        padding: 10px 0;
    margin: 10px;
    }      
    .nav-sections .switcher{width: 100%;}
    .larnet-auth-heading{
        padding: 28px 0 6px;text-align: left;
    }
    header.page-header.type2.header-newskin.LarnetEnglish.page-header-log .logo{    text-align: left;}
    .form-create-account-container{padding: 0;}
}


@media (max-width: 767px) {
    /* Form fields at 16px: anything smaller makes iOS Safari zoom the page on focus.
       Quantity steppers keep their own compact size. */
    body input[type="text"]:not(.qty),
    body input[type="email"],
    body input[type="password"],
    body input[type="search"],
    body input[type="tel"],
    body select,
    body textarea,
    body.larnet-login-page .block-customer-login .input-text,
    body .toolbar select {
        font-size: var(--lar-fs-lg);
    }
    /* One size for catalog page titles (search results, product name) and one for
       the auth / cart page headings, instead of 19.5 / 20 / 24 / 18 per page. */
    body .page-title-wrapper .page-title .base {
        font-size: var(--lar-fs-title);
    }
    body .larnet-auth-heading h2 {
        font-size: var(--lar-fs-h1);
    }
    /* The account links (My Account / My Orders / My Lists) live in the menu's Account tab on
       mobile (header.phtml), so the account page's own link list is hidden. */
    .sidebar.sidebar-main .block-collapsible-nav {
        display: none;
    }
    .nav-sections .sw-megamenu li.level0:has(> a[href*="find-a-sales-rep"]),
    .nav-sections .sw-megamenu li.level0:has(> a[href*="quick-order"]) {
        display: none;
    }
    .amasty_quickorder-index-index main#maincontent .amqorder-search-block,.quick-order-reorder{padding: 0 15px;}
}

/* Hidden source list for the mobile menu's Account tab (header.phtml) - only its clone in
   #store.links (inside .nav-sections) is shown. */
.page-header .panel.header ul.header.links.larnet-nav-account-links {
    display: none !important;
}
.minicart-wrapper .block-minicart .total-count .actions .secondary{display: flex;}
.minicart-wrapper .block-minicart .total-count .actions .secondary a {    text-align: right;}
body .minicart-wrapper .block-minicart .total-count{padding: 12px 5px;}
body .block-minicart .items-total{margin-top: 0}

 
/* Promotions slider (CMS block promotions_right, web/js/promo-slider.js): one slide at a time. Until the
   carousel is initialised only the first slide shows, so the page doesn't flash a stack of images. */
.promo-slider:not(.owl-loaded) > *:not(:first-child) {
    display: none;
}
.promo-slider img {
    display: block;
    width: 100%;
    height: auto;
}
.promo-slider a {
    display: block;
}
.promo-slider.owl-carousel .owl-dots {
    margin-top: 8px;
}

/* Quick Order (Amasty_QuickOrder) and Reorder Product (Bss_ReorderProduct) pages: the modules ship
   blue buttons - use the theme's dark / yellow buttons instead. */
body .amqorder-button.-fill {
    border-radius: 0;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body .amqorder-button.-fill.-primary:not(.-disabled) {
    border-color: var(--lar-mainb, #27282A);
    background: var(--lar-mainb, #27282A);
    color: #fff;
}
body .amqorder-button.-fill.-primary:not(.-disabled):hover,
body .amqorder-button.-fill.-primary:not(.-disabled):focus {
    border-color: var(--lar-mainy, #FAB93D);
    background: var(--lar-mainy, #FAB93D);
    color: var(--lar-mainb, #27282A);
}
body .amqorder-button.-fill.-secondary:not(.-disabled) {
    border-color: var(--lar-mainy, #FAB93D);
    background: var(--lar-mainy, #FAB93D);
    color: var(--lar-mainb, #27282A);
}
body .amqorder-button.-fill.-secondary:not(.-disabled):hover,
body .amqorder-button.-fill.-secondary:not(.-disabled):focus {
    border-color: #e5a827;
    background: #e5a827;
    color: var(--lar-mainb, #27282A);
}
body .amqorder-button.-fill.-disabled {
    border-color: #e3e3e3;
    background: #f1f1f1;
    color: #a3a6a8;
}
body .amqorder-button.-link,
body .amqorder-button.-link:hover {
    color: var(--lar-mainb, #27282A);
}
body .amqorder-button.-link:hover {
    text-decoration: underline;
}
body .amqorder-button.-reverse:not(.-disabled),
body .amqorder-button.-reverse:not(.-disabled):focus {
    background: var(--lar-mainb, #27282A);
}
body .amqorder-button.-reverse:not(.-disabled):hover {
    background: var(--lar-mainy, #FAB93D);
}
body button.bt-reoderproduct {
    padding: 8px 14px;
    border: 1px solid var(--lar-mainb, #27282A);
    border-radius: 0;
    background: var(--lar-mainb, #27282A);
    color: #fff;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body button.bt-reoderproduct:hover {
    border-color: var(--lar-mainy, #FAB93D);
    background: var(--lar-mainy, #FAB93D);
    color: var(--lar-mainb, #27282A);
}
body .bt-reoderproduct.loading-preorder-product {
    border: 1px solid #55595A !important;
    background-color: #55595A;
    background-image: none;
    color: #fff;
    animation: none;
}
body .action-reorder button.bt-reoderproduct {
    width: auto;
    min-width: 80px;
}
body .amqorder-search-block .amqorder-search{max-width: initial;}
body.amasty_quickorder-index-index main#maincontent .page-title-wrapper{max-width: initial;        padding: 20px 100px;text-align: center;}
body.amasty_quickorder-index-index main#maincontent .page-title-wrapper h1{
        font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--lar-mainb);
}

/* Quick Access tab bar on phones: 2 rows x 2 tabs, every tab the same width. */
@media (max-width: 639px) {
    .quickaccess-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
    }
    .quickaccess-tabs a.quickaccess-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 8px;
        line-height: 1.25;
        text-align: center;
    }
}


/* Confirmation dialogs (Add All to Cart in Ptg_PurchaseList, Clear Cart in the mini cart):
   title + centred message + two equal buttons, in the site's button style. */
.modal-popup.larnet-confirm .modal-inner-wrap {
    max-width: 480px;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.modal-popup.larnet-confirm .modal-header {
    padding: 28px 56px 0 28px;
    border: 0;
}
.modal-popup.larnet-confirm .modal-title {
    min-height: 0;
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    font-size: var(--lar-fs-h2);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lar-mainb, #27282A);
}
.modal-popup.larnet-confirm .modal-header .action-close {
    top: 14px;
    right: 14px;
}
.modal-popup.larnet-confirm .modal-content {
    padding: 0 28px 24px;
    border: 0;
    font-size: var(--lar-fs-lg);
    line-height: 1.5;
    color: var(--lar-maindg, #55595A);
}
.modal-popup.larnet-confirm .modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 28px 28px;
    border: 0;
}
.modal-popup.larnet-confirm .modal-footer .action-secondary,
.modal-popup.larnet-confirm .modal-footer .action-primary {
    flex: 1 1 0;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--lar-mainb, #27282A);
    border-radius: 0;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.modal-popup.larnet-confirm .modal-footer .action-secondary {
    background: #fff;
    color: var(--lar-mainb, #27282A);
}
.modal-popup.larnet-confirm .modal-footer .action-primary {
    background: var(--lar-mainb, #27282A);
    color: #fff;
}
.modal-popup.larnet-confirm .modal-footer .action-secondary:hover {
    background: var(--lar-secg, #F7F7F7);
}
.modal-popup.larnet-confirm .modal-footer .action-primary:hover {
    background: var(--lar-mainy, #FAB93D);
    border-color: var(--lar-mainy, #FAB93D);
    color: var(--lar-mainb, #27282A);
}
body .modal-footer{border: 0 none;}
@media (max-width: 767px) {
    .modal-popup.larnet-confirm {
        left: 0;
        margin-left: 0;
    }
    .modal-popup.larnet-confirm .modal-inner-wrap {
        width: calc(100% - 32px);
        max-width: 480px;
        margin: 80px auto 0;
    }
}
@media (max-width: 639px) {
    .modal-popup.larnet-confirm .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .modal-popup.larnet-confirm .modal-footer .action-secondary,
    .modal-popup.larnet-confirm .modal-footer .action-primary {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Loading feedback (web/js/loading-indicator.js): thin progress bar at the top of the page for
   every request / navigation, and a blocking "please wait" overlay for POSTs and long operations. */
#larnet-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#larnet-progress.is-active {
    opacity: 1;
}
#larnet-progress > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--lar-mainy, #FAB93D);
    animation: larnet-progress-slide 1.1s ease-in-out infinite;
}
@keyframes larnet-progress-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(250%);
    }
}
.larnet-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    cursor: progress;
}
.larnet-loading.is-active {
    display: flex;
}
.larnet-loading__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    max-width: 260px;
    padding: 18px 26px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    text-align: center;
}
.larnet-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--lar-mainy, #FAB93D);
    border-radius: 50%;
    animation: larnet-minicart-spin .8s linear infinite;
}
.larnet-loading__text {
    margin: 0;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lar-mainb, #27282A);
}
body.larnet-is-loading {
    overflow: hidden;
}

/* Reorder Product page: the module's own spinning-gif mask is replaced by the theme loader (web/js/reorder-loader.js). */
#reorder-loader.loading-mask {
    display: none !important;
}

/* Magento's default loader (mage/loader: showLoader: true ajax, processStart events, checkout, widgets) looks like
   the theme loader ("Please wait..." box with the yellow spinner) instead of the small grey gif. */
.loading-mask {
    /* always cover the whole page: Magento's block loaders (cart totals, checkout steps ...) are sized to their
       block, so the rest of the page stayed fully visible and clickable */
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    /* Porto's generated media/porto/web/css/custom.css (loaded after this file) sets .loading-mask{background:0 0} */
    background: rgba(255, 255, 255, .6) !important;
}
.loading-mask .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    max-width: 260px;
    padding: 18px 26px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    text-align: center;
    transform: translate(-50%, -50%);
}
.loading-mask .loader img,
.loading-mask .loader > img {
    display: none !important;
}
.loading-mask.larnet-mask-dup {
    display: none !important;
}
/* The mini cart's own block loader (its counter, shown while a product is being added) is a .loading-mask too, and
   Porto styles it with a more specific rule (.minicart-wrapper .action.showcart .counter.qty .loader:before:
   font-icon glyph, absolute, 16px) that bled into the spinner: a grey dotted icon inside the yellow ring. */
.loading-mask .loader:before,
.minicart-wrapper .action.showcart .counter.qty .loading-mask .loader:before {
    content: "";
    position: static !important;
    /* Porto hides it on the checkout (.onepage-index-index .loading-mask .loader:before{display:none}) */
    display: block !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--lar-mainy, #FAB93D);
    border-radius: 50%;
    animation: larnet-minicart-spin .8s linear infinite;
}
.loading-mask .loader > p {
    display: block;
    margin: 0;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lar-mainb, #27282A);
}
/*disable quickorder tab*/
a#amasty_quickorder_index_index{display: none !important;}
@media (max-width: 639px){
    .quickaccess-tabs{grid-template-columns: repeat(3, minmax(0, 1fr));}
    .quickaccess-tabs a.quickaccess-tab{padding: 10px 0;}
}
/* Loaders without the "Please wait..." line in their markup (block loader, Login as Customer in other themes ...) */
.loading-mask .loader:not(:has(> p)):after {
    content: var(--larnet-wait-text, "Please wait...");
    margin: 0;
    font-size: var(--lar-fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lar-mainb, #27282A);
}

/* Infinite scroll (Bss_InfiniteScroll) "loading the next page" indicator at the end of the product list: same
   spinner and text as the other loaders instead of the admin-configured gif. */
.ias-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    clear: both;
}
.ias-spinner > img {
    display: none;
}
.ias-spinner:before {
    content: "";
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--lar-mainy, #FAB93D);
    border-radius: 50%;
    animation: larnet-minicart-spin .8s linear infinite;
}
.ias-spinner:not(:has(> span)):after {
    content: var(--larnet-wait-text, "Please wait...");
}
.ias-spinner:after,
.ias-spinner > span {
    font-size: var(--lar-fs-sm) !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lar-mainb, #27282A);
}