
    /**
    * THIS FILE IS GENERATED AUTOMATICALLY WHEN SAVING CONFIGURE. YOUR DATA WILL BE LOST WHEN YOU EDIT THIS FILE
    */

    /**
    * GENERAL
    */

body{
background-color: #FFFFFF;
color: #777777;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;font-size: 13px;
}

/**
* Link, link hover
*/

a,
.link-color{
color: #2D3054;
}

a:hover,
.link-color:hover{
color: #F94073;
}

.back2top{
background-color: #2D3054;
color: #FFFFFF;
}

.back2top:hover{
background-color: #21233d;
}

.cms-index-index{
background-color: #FFFFFF;
}
.swatch-option.image:not(.disabled):hover,
.swatch-option.color:not(.disabled):hover,
.swatch-option.selected{
outline: 1px solid #F94073;
}

/**
* Elements google font
*/

    .google-element-font,
                        .list-tabs .tabs-drop-mobile,
                        .header-1-style .header-bottom .megamenu-nav.horizontal-type .megamenu-items > li > a,
                        .header-1-style .megamenu-nav .megamenu-items > li > .dropdowm-megamenu.type-megamenu >
                        .middle-level-0 > .megamenu-content-cate > .submenu > li > a,
                        .footer-1-style .ft-block .ft-title,
                        .footer-1-style .call-order .call-phone a,
                        .page-title,
                        .sidebar .block .block-title strong,
                        .sidebar .block.filter #narrow-by-list .filter-options-title,
                        .products-list .product-item-info .product-item-name a,
                        .block-cate-home .category-item .parent-name strong a,
                        .block-tab-home .list-product-tabs .item-tab,
                        .block-post-home .post-title a,
                        .default-style .resp-tabs-list li,
                        .product.attribute.description strong,
                        .contact-block .title-contact strong,
                        .contact-content .contact-col-info .contact-detail li .info-title,
                        .post-list.modern .post-info .post-title-wrap h3 a,
                        .page-layout-1column #narrow-by-list .filter-options-title,
                        .post-nextprev-hld .link-post a,
                        .block.comments .c-count strong
                    {
    font-weight: 400;
    font-family: 'Bubblegum Sans', cursive;    }

/**
* Show add to cart, compare, wishlist product
*/




    /**
    * THEME LAYOUT
    */
/**
* Set max-width layout
*/

@media (min-width: 1024px) {
body .container,
body .page-main{
max-width: 1290px;
}
}

/**
* Listing Layout
*/

@media (min-width: 1921px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 25%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}


@media (min-width: 1681px) and (max-width: 1920px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 25%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (min-width: 1441px) and (max-width: 1680px) {

.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 25%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (min-width: 1200px) and (max-width: 1440px) {

.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 25%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (min-width: 992px) and (max-width: 1199px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 25%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (min-width: 768px) and (max-width: 991px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 33.333333333333%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (min-width: 481px) and (max-width: 767px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

@media (max-width: 480px) {
.page-layout-1column .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

.page-layout-2columns-left .products.wrapper.products-grid .product-items .product-item,
.page-layout-2columns-right .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

.page-layout-3columns .products.wrapper.products-grid .product-items .product-item{
width: 50%;
}

}

    /**
    * THEME HEADER COLOR
    */
/**
* Header General
*/
.bzo-popup-modal .actions-toolbar .primary button{
background-color: #2D3054;
color: #FFFFFF;
}

.megamenu-nav a:hover:hover{
color: #F94073;
}

.column-featured .featured-items li a:hover{
color: #F94073;
}

.header-middle .header-links .customer-welcome+.link.authorization-link a{
background-color: #F94073;
color: #FFFFFF;
}

.header-middle .header-links .customer-welcome+.link.authorization-link a:hover{
background-color: #e83c6b;
}

/**
* Header 1
*/
.header-1-style .header-desktop .hd-top-support ul li a:hover,
.header-1-style .header-services > ul > li > a:hover{
color: #F94073;
}

.header-1-style .header-services .dropdown-block:hover > a{
color: #F94073;
}

.header-1-style .header-bottom .megamenu-nav.horizontal-type .megamenu-items > li:hover > a,
.header-1-style .header-bottom .megamenu-nav.horizontal-type .megamenu-items > li.active > a,
.header-1-style .header-bottom .megamenu-nav.horizontal-type .megamenu-items > li.has-active > a{
color: #F94073;
}

.header-1-style .header-bottom .megamenu-nav.horizontal-type .megamenu-items > li > a:before{
background-color: #F94073;
}

.header-1-style .hd-cart .minicart-wrapper .action.showcart .counter,
.header-1-style .header-wishlist .count{
background-color: #F94073;
color: #FFFFFF;
}

.header-1-style .header-services .hd-top-services > li > a:hover{
color: #F94073;
}

.header-1-style .megamenu-nav .megamenu-items > li > .dropdowm-megamenu.type-megamenu > .middle-level-0 > .megamenu-content-cate > .submenu > li > a{
color: #2D3054;
}

/* Megashop custom - header 1 */
.header-1-style .header-desktop .hd-top-support ul li.tracking a, 
.header-1-style .header-desktop .top-links .action-switcher span {
    color: #F94073;
}
.header-1-style .header-desktop .header-bottom,
.header-1-style .header-desktop .header-center-wrapper .search-header .block-search .action.search,
.header-1-style .header-desktop .header-center-wrapper .right-content .hd-cart .minicart-wrapper:before {
    background-color: #F94073;
}
.header-1-style .header-desktop .header-bottom .secondary-megamenu .megamenu-items li.level0 a .cat-name,
.header-1-style .header-desktop .header-center-wrapper .search-header .block-search .action.search span
.header-1-style .header-desktop .header-bottom .megamenu-vertical .megamenu-title {
    color: #FFFFFF;
}
.header-1-style .header-desktop .hd-top-support ul li.tracking a, 
.header-1-style .header-desktop .top-links .action-switcher span,
.header-1-style .header-desktop .header-center-wrapper .right-content .contact-title, 
.header-1-style .header-desktop .header-center-wrapper .right-content .minicart-wrapper .text,
.header-1-style .header-desktop .header-bottom .megamenu-vertical .megamenu-items .level0>a,
.header-1-style .megamenu-vertical .megamenu-nav .megamenu-items>li>.dropdowm-megamenu.type-megamenu>.middle-level-0>.megamenu-content-cate>.submenu>li.level1>a,
.header-1-style .header-desktop .header-bottom .secondary-megamenu .dropdowm-megamenu .column-featured h3 {
    color: #FFFFFF;
}
    /**
    * THEME HOME
    */
.block-tab-home .block-title a,
.block-product-list .block-title a,
.block-home-services .block-title a,
.block-home-choose .block-title a,
.block-home-partner .block-title a{
border: 1px solid #F94073;
color: #F94073;
}

.block-tab-home .block-title a:hover,
.block-product-list .block-title a:hover,
.block-home-services .block-title a:hover,
.block-home-choose .block-title a:hover,
.block-home-partner .block-title a:hover{
background-color: #F94073;
color: #FFFFFF;
}

.block-home-partner ul li a:hover{
border-color: #F94073;
}

.block-home-services .item .read-more a{
color: #F94073;
}

.block-home-services .item:hover{
border-color: #F94073;
}

.block-cate-home .category-item .parent-name a{
color: #2D3054;
}

.block-cate-home .category-item .parent-name a:hover{
color: #F94073;
}

.nav-1 .owl-theme .owl-nav [class*=owl-]:hover{
background-color: #F94073;
color: #FFFFFF;
}

.block-product-list .product-item-actions .actions-primary .tocart:hover{
background-color: #21233d;
}

.block-product-list .bzotech-slider-list .product-item-info .product-item-name a{
color: #2D3054;
}

.block-product-list .bzotech-slider-list .product-item-info .product-item-name a:hover{
color: #F94073;
}

.block-post-home .categories a, .block-post-home .read-more a{
color: #F94073;
}

.block-product-list .product-item-info:hover{
border-color: #F94073;
}

.block-title-more .block-title a:before{
background-color: #F94073;
}

.about-home .about-home-quote{
border-left: 2px solid #F94073;
}

.client-slider-home{
border: 2px dashed #F94073;
}

.nav-2 .owl-theme .owl-nav [class*=owl-]:hover{
background-color: #F94073;
color: #FFFFFF;
}

.grid-cats .category-item .parent-image a:before{
background-color: #F94073;
color: #FFFFFF;
}

.bottom-shopnow a:hover{
background-color: #F94073;
color: #FFFFFF;
}

.instagram-full li a:after{
background-color: #F94073;
}

.instagram-full li a:before{
color: #FFFFFF;
}

.nav-3 .owl-theme .owl-nav [class*=owl-]:hover{
background-color: #F94073;
color: #FFFFFF;
}

.full-cat-pets .item-inner .parent-name strong a:hover{
color: #F94073;
}

.full-cat-pets .item-inner .cat-btn:hover{
background-color: #F94073;
color: #FFFFFF;
}

.full-cat-pets .owl-theme .owl-dots .owl-dot.active span,
.full-cat-pets .owl-theme .owl-dots .owl-dot:hover span{
background-color: #F94073;
}

.slider-video .slider-image-info .slider-button a{
background-color: #F94073;
color: #FFFFFF;
}

.slider-video .slider-image-info .slider-button a:hover{
background-color: #e83c6b;
}

.slider-info-anim .slider-button a{
background-color: #F94073;
color: #FFFFFF;
}

.slider-info-anim .slider-button a:hover{
background-color: #e83c6b;
}

.slideshow-home.slider-video .owl-theme .owl-dots .owl-dot:hover span,
.slideshow-home.slider-video .owl-theme .owl-dots .owl-dot.active span{
background-color: #F94073;
}

.header-4-style .block-minicart .amount .price-wrapper:first-child .price
{
    color: #F94073;
}
.header-4-style .block-minicart .block-content > .actions > .primary .action.primary {
    background: #F94073;
}

.header-4-style .action.primary, .header-4-style .action-primary{
    background: #F94073;
}
.block-product-home .product-item-name .product-item-link,
ul.services li .main-title,
.block-tab-home .list-product-tabs .item-tab:hover, 
.block-tab-home .list-product-tabs .item-tab.active
 {
    color: #F94073;
}
.block-tab-home .list-product-tabs .item-tab.active.loaded
 {
    color: #FFFFFF;
}
.products-grid .product-item-actions .actions-primary .tocart ,
.block-product-home .bzotech-slider-grid.custom-deals .product-item-actions .actions-primary button{
    background: #2D3054;
    color: #FFFFFF;
}
.products-grid .product-item-actions .actions-primary .tocart:hover,
.block-product-home .bzotech-slider-grid.custom-deals .product-item-actions .actions-primary button:hover{
    background: #21233d;
    color: #FFFFFF;
}
.block-tab-home .list-product-tabs .item-tab:first-child,
.block-last-news .item-inner .categories:hover,
.banners .shopnow:hover{
    background: #F94073;
}
.block.bzo-categories .categories-listing.grid-categories .category-item .category-info .parent-name a,
.block-product-home .block-title strong.google-element-font,
.product-1-style .products-grid .product-item-name a:hover,
.block-product-home .product-item-name .product-item-link:hover,
.products-grid .price-box .old-price .price,
.block-product-home .bzotech-slider-grid.custom-deals .countdown-item .num-time,
.services .main-title:hover {
    color: #FFFFFF;
}
    /**
    * THEME FOOTER
    */
/**
* Footer 1
*/

.footer-style-1 .text-email a{
color: #F94073;
}

.footer-style-1 .call-order .call-phone a{
color: #F94073;
}

.footer-style-1 .block-subscribe-footer .action-button button{
background-color: #F94073;
}

.footer-style-1 .block-subscribe-footer .action-button button:hover{
background-color: #e83c6b;
}

/**
* Footer 2
*/

.footer-style-2 .ft-block .call-order .call-phone a{
color: #F94073;
}

.footer-style-2 .ft-block .social-list li a:hover{
background-color: #F94073;
color: #FFFFFF;
}

.footer-style-2 .ft-block .links-footer li a:hover{
color: #F94073;
}

.footer-style-2 .footer-bottom address a{
color: #F94073;
}

.footer-style-2 .newsletter-footer .action-button button{
background-color: #F94073;
color: #FFFFFF;
}

/**
* Footer 3
*/

.footer-style-3 .block-subscribe-footer .action-button button{
background-color: #F94073;
color: #FFFFFF;
}

.footer-style-3 .block-subscribe-footer .action-button button:hover{
background-color: #e83c6b;
}

.footer-style-3 .footer-bottom address a{
color: #F94073;
}

.footer-style-3 .ft-block .social-list li a:hover{
background-color: #F94073;
color: #FFFFFF;
}
    /**
    * THEME PRODUCT
    */
/**
* Product 1
*/

.product-1-style .products-grid .product-item-actions .actions-secondary .action:hover{
background-color: #F94073;
}

.product-1-style .products-grid .product-item-name a:hover{
color: #F94073;
}

.product-1-style .products-grid .product-item-info:hover .product-item-actions .actions-primary .tocart{
background-color: #2D3054;
color: #FFFFFF;
}

.product-1-style .products-grid .product-item-info .product-item-actions .actions-primary .tocart:hover{
background-color: #21233d;
color: #FFFFFF;
}

.product-1-style .products-list .product-item-info .actions-primary .tocart:hover{
background-color: #21233d;
color: #FFFFFF;
}

.product-1-style .products-list .product-item-info .product-item-name a:hover{
color: #F94073;
}

.product-1-style .products-list .product-item-info .actions-secondary .action:hover,
.product-1-style .products-list .product-item-info .product-reviews-summary .reviews-actions a:hover{
color: #F94073;
}

/**
* Product 2
*/

.product-2-style .products-grid .product-item-actions .action:hover{
background-color: #F94073;
}

.product-2-style .products-grid .price-box .price,
.product-2-style .products-grid .price-box .special-price .price{
color: #F94073;
}

.product-2-style .products-grid .product-item-name a:hover{
color: #F94073;
}

.product-2-style .products-grid .product-reviews-summary .reviews-actions a:hover{
color: #F94073;
}

/**
* Product 3
*/

.product-3-style .products-grid .price-box .old-price .price{
color: #F94073;
}

.product-3-style .products-grid .product-item-name a:hover{
color: #F94073;
}

.product-3-style .products-grid .product-item-actions .action:hover{
background-color: #F94073;
}

/**
* Product 4
*/
.product-4-style .product-item .special-price .price, .product-4-style .product-item .minimal-price .price {
    color: #F94073;
}
    /**
    * CATEGORY PAGE
    */
.breadcrumbs-title .breadcrumbs strong{
color: #F94073;
}

.breadcrumbs-title .breadcrumbs a:hover{
color: #F94073;
}

.page-layout-1column .filter-options .filter-options-content .item a:hover{
color: #F94073;
}

.page-layout-1column .filter-options .filter-options-content .item a:hover:before,
.sidebar .block.filter .items .my.item a:hover:before{
border-color: #F94073;
}

.page-layout-2columns-left #narrow-by-list .filter-options-title.filter-options-title:before,
.page-layout-2columns-right #narrow-by-list .filter-options-title.filter-options-title:before{
background-color: #F94073;
}

.page-layout-2columns-left #narrow-by-list .filter-options-content .item a:hover,
.page-layout-2columns-right #narrow-by-list .filter-options-content .item a:hover{
color: #F94073;
}

#price-slider .ui-slider-range{
background-color: #F94073;
}

#price-slider .ui-slider-handle:before{
border: 4px solid #F94073;
}

.filter-actions a{
background-color: #F94073;
color: #FFFFFF;
}

.page-layout-2columns-left .filter-actions a:hover,
.page-layout-2columns-right .filter-actions a:hover{
background-color: #e83c6b;
}

.pages .pages-items li strong{
background-color: #2D3054;
border-color: #2D3054;
color: #FFFFFF;
}

.pages .pages-items li a:hover{
background-color: #21233d;
border-color: #21233d;
color: #FFFFFF;
}

.autoparts-theme .breadcrumbs strong{
color: #F94073;
}
.products-grid .product-item-name a {
    color: #2D3054;
}
.motobike-theme .breadcrumbs a:hover{
color: #F94073;
}
.sidebar .block.filter #narrow-by-list .filter-options-title,
.breadcrumbs strong,
.page-layout-1column #narrow-by-list .filter-options-title {
    color: #FFFFFF;
}
    /**
    * DETAIL PAGE
    */
.product.media .product-addto-links .action:hover{
background-color: #F94073;
border-color: #F94073;
}

.sidebar-livechat .live-chat-link a{
color: #F94073;
}

.sidebar .bzotech-slider-product.bzotech-slider-list .owl-theme .owl-dots .owl-dot:hover span,
.sidebar .bzotech-slider-product.bzotech-slider-list .owl-theme .owl-dots .owl-dot.active span{
background-color: #F94073;
}

.detail-info-container .product-info-main .product-reviews-summary .reviews-actions a:hover{
color: #F94073;
}

.bundle-options-container .block-bundle-summary .box-tocart .actions .tocart{
background-color: #2D3054;
color: #FFFFFF;
}

.bundle-options-container .block-bundle-summary .box-tocart .actions .tocart:hover,
.product-info-main .box-tocart .actions button.tocart:hover{
background-color: #21233d;
}

.page-product-downloadable .product-add-form .product-options-bottom .box-tocart .actions .tocart{
background-color: #2D3054;
color: #FFFFFF;
}

.page-product-downloadable .product-add-form .product-options-bottom .box-tocart .actions .tocart:hover{
background-color: #21233d;
}

.page-product-downloadable .product-add-form .product-options-bottom .box-tocart .actions .buynow,
.detail-info-container .product-info-main .box-tocart .actions button.buynow,
.bundle-options-container .block-bundle-summary .box-tocart .actions .buynow {
background-color: #2D3054;
color: #FFFFFF;
}

.page-product-downloadable .product-add-form .product-options-bottom .box-tocart .actions .buynow:hover,
.detail-info-container .product-info-main .box-tocart .actions button.buynow:hover,
.bundle-options-container .block-bundle-summary .box-tocart .actions .buynow:hover {
background-color: #21233d;
}

.default-style .resp-tabs-list li:hover,
.default-style .resp-tabs-list li.active{
color: #F94073;
}
.detail-info-container .product-info-main .product-add-form .box-tocart .actions button.tocart:hover ,
.sticky-product-action .sticky-button button:hover 
{
    background-color: #21233d;
    color: #FFFFFF;
}
.detail-info-container .product-info-main .page-title-wrapper .page-title,
.detail-info-container .product-info-main .old-price .price,
.additional-attributes-wrapper table.additional-attributes tr td,
.detail-info-container .product-info-main .stock.available,
.product-info-main .product.attribute.sku strong,
.product-cats-list .cats-title,
.sticky-product-action .product-title,
.block-upsell.upsell .block-title strong, 
.block-related.related .block-title strong {
    color: #FFFFFF;
}
    /**
    * OTHER PAGE
    */
/**
* 404 Not Found
*/

.notfound-container .notfound-action a.go-back{
background-color: #F94073;
color: #FFFFFF;
}

.notfound-container .notfound-action a.go-home:hover{
background-color: #F94073;
color: #FFFFFF;
}

/*
* Blog
*/

.widget.block-archive ul li .archive-item-link:hover,
.widget.block-categories ul li a:hover{
color: #F94073;
}

.widget.blog-tags ul li a:hover{
background-color: #F94073;
color: #FFFFFF;
}

.post-list.modern .post-read-more a.post-read:hover{
background-color: #F94073;
border-color: #F94073;
color: #FFFFFF;
}

.post-list.modern .post-image .post-category a{
background-color: #F94073;
color: #FFFFFF;
}

.post-list.modern .post-image .post-category a:hover{
background-color: #e83c6b;
}

.c-replyform button{
background-color: #F94073;
color: #FFFFFF;
}

/**
* Contact
*/

.contact-block .primary button{
background-color: #F94073;
color: #FFFFFF;
}

.contact-block .primary button:hover{
background-color: #e83c6b;
}

.contact-content .contact-col-info .contact-detail li.time span{
color: #F94073;
}

/**
* Partner
*/

.brand-partner ul li a:hover{
border-color: #F94073;
}

.partner-brand .item-inner:hover{
border-color: #F94073;
}

/**
* Popup Newsletter
*/

.newsletter-popup-container .block.newsletter .actions button{
background-color: #F94073;
color: #FFFFFF;
}

.newsletter-popup-container .block.newsletter .actions button:hover{
background-color: #e83c6b;
}

/**
* Shopping cart
*/

.cart-container .checkout-methods-items .action.primary{
background-color: #F94073;
color: #FFFFFF;
}

.cart-container .checkout-methods-items .action.primary:hover{
background-color: #e83c6b;
}

/**
* Tabs page
*/

.page-tab-product .loadmore-container .loadmore-button{
background-color: #F94073;
color: #FFFFFF;
}

@media (min-width: 768px) {
.page-tab-product .list-product-tabs .item-tab:hover,
.page-tab-product .list-product-tabs .item-tab.active{
background-color: #F94073;
border-color: #F94073;
color: #FFFFFF;
}
}

    /**
    * THEME PRODUCT
    */
/**
* Custom CSS
*/

/* openclaw-ux-20260925-ux: layout stability (CLS) */

/* openclaw-ux-20260925: layout stability (CLS)
   Root cause measured 2026-09-25: Google-Fonts swap (Poppins/Bubblegum, late arrival)
   resized the header rows, pushing main content down ~15px; the product gallery had no
   reserved height (7px -> square on load). These rules pin the settled geometry so the
   swap/load cannot move the layout. Desktop only; mobile CLS was already fine. */
@media (min-width: 1024px) {
    .page-header .panel.wrapper { min-height: 47px; }
    .page-header .header.content { min-height: 151px; }
    .nav-sections .level0 > a,
    .nav-sections .level-top { line-height: 53px; }
}
.product.media .fotorama-item,
.product.media .gallery-placeholder { aspect-ratio: 1 / 1; }
.product.media .gallery-placeholder__image { width: 100%; height: auto; }

/* openclaw-ux-20260925-b: pin the nav row box (font swap grew .level-top 46px -> 51px
   and pushed #maincontent down ~15px at ~1.2s). Height on the row container, not the inline anchor. */
@media (min-width: 1024px) {
    .nav-sections .level0 { min-height: 51px; }
    .nav-sections li.level0.inline-block,
    .nav-sections .level0 { display: inline-block; vertical-align: top; }
    .nav-sections .level-top { height: 51px; line-height: 51px; display: inline-block; }
}

/* openclaw-ux-20260927: /f52-purple.html CLS outlier. The breadcrumb row renders at 0px and
   then appears at 20px, pushing .page-title-wrapper/.product.media/.columns down 20px.
   Reserve the settled height so the late render cannot move the page. Desktop only. */
@media (min-width: 1024px) {
    .breadcrumbs { min-height: 20px; }
}

/* openclaw-ux-20260930: mobile gallery CLS. Magento's gallery JS appends the fotorama markup
   inside .gallery-placeholder while the placeholder image is still in flow, so the fotorama is
   pushed a full 360px down (to ~622) and snaps back when the image is removed — a stable
   shift 0.2715 at ~2.5-3.0s on 45/61 mobile pages. Taking the placeholder image out of flow
   stops the reserved aspect-ratio box being consumed twice, so the swap moves nothing. */
.product.media .gallery-placeholder { position: relative; }
.product.media .gallery-placeholder .gallery-placeholder__image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/**
* === Edge-gutter & spacing alignment (2026-10-05) ===
* Keep top bar / header / footer content off the viewport edges and aligned
* with the 1290px main container. Standard CSS (Chrome, Edge, Firefox,
* iOS Safari, Android Chrome). Media files are served directly (no deploy).
*/
@media (min-width: 1024px){
  .page-header .panel.header,
  .page-header .header.content,
  .page-footer .footer.content{
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}
@media (max-width: 1023px){
  .page-header .panel.header,
  .page-footer .footer.content{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/**
* === nav menu aligned with logo/content (2026-10-05) ===
* Each li.level0 carries margin-left:20px, pushing the first menu item to
* ~85px while the logo/content sit at ~62px. Zero the first item's margin so
* the menu starts flush with the logo. All stores (standard CSS).
*/
@media (min-width: 1024px){
  .nav-sections .nav-desktop > li.level0:first-child,
  .nav-sections .level0:first-child{
    margin-left: 0 !important;
  }
}

/**
* === breadcrumbs gutter / container (2026-10-05) ===
* .breadcrumbs is a full-width child of .page-wrapper, so its text hugged the
* viewport edge on desktop. Constrain it to the 1290px content container and
* add a mobile gutter. Standard CSS (all stores).
*/
@media (min-width: 1024px){
  .breadcrumbs{
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}
@media (max-width: 1023px){
  .breadcrumbs{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* 2026-10-06 fix: More Information spec values were white-on-white (BzoTech megashop detail/_styles.less sets .additional-attributes tr td color:#FFF) */
.additional-attributes-wrapper table.additional-attributes tr td{color:#333;}
.additional-attributes-wrapper table.additional-attributes tr td *{color:inherit;}

/**
* === Popular Search Terms — tag cloud (2026-10-06) ===
* The bare <ul class="search-terms"> rendered as a long vertical bullet list.
* Present it as a responsive tag cloud. Standard CSS.
*/
.search-terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search-terms li.item{list-style:none;margin:0}
.search-terms li.item a{display:inline-block;padding:7px 15px;border:1px solid #e3e3e3;border-radius:999px;background:#fafafa;color:#2D3054;text-decoration:none;line-height:1.2;transition:all .15s ease}
.search-terms li.item a:hover{background:#2D3054;color:#fff;border-color:#2D3054}
.search-terms li.size-1 a{font-size:12px}
.search-terms li.size-2 a{font-size:13px}
.search-terms li.size-3 a{font-size:14px}
.search-terms li.size-4 a{font-size:16px;font-weight:600}
.search-terms li.size-5 a{font-size:18px;font-weight:700}

/**
* === Hide label under brand logos on the Computer category page (2026-10-06) ===
* On /computer.html the brand tiles now show brand logos which already carry
* the brand name, so the caption below is redundant. Scoped to that page only.
*/
.category-computer .sub-categories .category-item-name{display:none}

/**
* === Brand tiles: logo only, no caption (2026-10-06) ===
* Category tiles whose image is a brand logo (brand-*.png) show the logo only,
* since the logo already carries the brand name. Series tiles (product photos)
* keep their caption. Uses :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+).
*/
.sub-categories .category-item:has(img[src*="/brand-"]) .category-item-name{display:none}

/**
* === Language switcher → top-right (2026-10-06) ===
* The store-view switcher sat at the far left of the top panel; move it to the
* top-right corner of the header container. Desktop only (mobile uses the nav panel).
*/
@media (min-width:768px){
  .page-header .panel.header{position:relative}
  .page-header .panel.header > .switcher-language{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
}

/* Make room for the top-right language switcher so it doesn't overlap the account links (2026-10-06) */
@media (min-width:768px){
  .page-header .panel.header > ul.header.links{padding-right:96px}
}

/**
* === Header fixes (2026-10-07) ===
* 1) Language switcher dropdown: right-align inside the panel (was overflowing the viewport right edge).
* 2) Hide the stray welcome message in the header top links.
* 3) Keep the search box clear of the top-right switcher + stack panel above header content.
*/
.page-header .panel.header{z-index:30}
.page-header .panel.header > .switcher-language{max-width:230px;z-index:31}
.page-header .panel.header > .switcher-language .switcher-dropdown{right:0;left:auto;min-width:150px;z-index:32;text-align:right}
.page-header .panel.header .greet.welcome{display:none}
.page-header .header.content .block-search{max-width:380px;z-index:1}

/* 3b) Move the search box left so the (right-aligned) language dropdown never covers it. */
.page-header .header.content .block-search{max-width:340px;margin-right:180px}

/**
* === Language-switcher dropdown polish (2026-10-07) ===
* Before: the theme pins min-width:160px and the earlier right-align rule left the
* short labels ("简体中文" / "English") hugging the right of an oversized box, so the
* dropdown read as a mostly-empty panel. Now: size to content, left-aligned rows,
* soft rounded panel. Specificity (7 classes + ul) is kept above the theme's
* `.page-header .panel.wrapper .switcher .options ul.dropdown` (6 classes + ul).
*/
.page-header .panel.header > .switcher-language .switcher-options ul.dropdown.switcher-dropdown{
  right:0;left:auto;min-width:0;width:auto;margin-top:8px;padding:4px 0;
  text-align:left;border:1px solid #e5e5e5;border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);overflow:hidden;z-index:32;
}
.page-header .panel.header > .switcher-language .switcher-options ul.dropdown.switcher-dropdown > li{margin:0;padding:0}
.page-header .panel.header > .switcher-language .switcher-options ul.dropdown.switcher-dropdown > li > a{
  display:block;padding:9px 18px;text-align:left;white-space:nowrap;line-height:1.25;font-size:13px;
}
.page-header .panel.header > .switcher-language .switcher-options ul.dropdown.switcher-dropdown > li > a:hover,
.page-header .panel.header > .switcher-language .switcher-options ul.dropdown.switcher-dropdown > li > a:focus{
  background:#f4f5f7;color:#2d3054;text-decoration:none;
}
