@media screen and (max-width:749px){body:has(#MainContent):not(:has(#MainContent[data-template*=about])){--devui-mobile-gutter: 14px;overflow-x:hidden}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent{width:100%;min-width:0;overflow-x:clip}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(img,video,iframe,canvas,svg){max-width:100%}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.rte,.text-block,.group-block,.group-block-content){min-width:0}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .rte table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h1,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h1,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .text-block.h1>*{font-size:clamp(24px,7vw,28px)!important;line-height:1.08!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h2,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h2,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .text-block.h2>*{font-size:clamp(21px,6vw,24px)!important;line-height:1.12!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h3,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h3{font-size:25px!important;line-height:1.18!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h4,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h4{font-size:17px!important;line-height:1.22!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h5,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h5{font-size:14px!important;line-height:1.25!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) h6,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) .h6{font-size:12px!important;line-height:1.3!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent:not([data-template=index]) :is(.rte,.paragraph,.text-block p,.text-block li){font-size:14px!important;line-height:1.45!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(input:not([type=checkbox],[type=radio]),textarea,select){min-height:44px;font-size:16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.button,.button-secondary):not(.button-unstyled):not(.close-button):not(.slideshow-control){min-height:40px;padding-block:0!important;padding-inline:14px!important;font-size:12px!important;line-height:1!important;align-content:center}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent button.shopify-payment-button__button--unbranded{min-height:42px!important;font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .custom-header-container{position:relative!important;display:flex!important;align-items:center!important;width:100%!important;max-width:100%!important;min-height:58px!important;padding:8px 14px!important;margin:0 auto!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) :is(.header-left,.header-right){position:relative!important;z-index:2!important;flex:0 0 auto!important;width:auto!important;min-width:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-left{justify-content:flex-start!important;gap:8px!important;margin-right:auto!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-right{justify-content:flex-end!important;gap:8px!important;margin-left:auto!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-center{position:absolute!important;top:50%!important;left:50%!important;z-index:1!important;flex:0 1 auto!important;width:auto!important;max-width:calc(100% - 156px)!important;transform:translate(-50%,-50%)!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .custom-logo{display:flex!important;align-items:center!important;justify-content:center!important;max-width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .custom-logo img{display:block!important;width:clamp(102px,34vw,132px)!important;max-width:100%!important;max-height:34px!important;height:auto!important;object-fit:contain!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .mobile-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;min-width:28px!important;height:28px!important;padding:0!important;margin:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .mobile-menu-btn>svg{width:20px!important;height:20px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-left .svg-wrapper{width:28px!important;height:28px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-left .svg-wrapper img{width:18px!important;height:18px!important;object-fit:contain!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-right img{width:28px!important;max-width:28px!important;height:auto!important;object-fit:contain!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .mobile-drawer{width:min(86vw,300px)!important;max-width:100%!important;padding:20px 16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-nav{gap:10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-item{padding-bottom:0!important;margin-bottom:-10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-link-main{font-size:15px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-section-header{font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-sub-link-row{font-size:13px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .drawer-grandchild-link{font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer{overflow:hidden}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .section-content-wrapper{min-height:0!important;height:auto!important;padding-block:26px 14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .group-block-content{left:auto!important;right:auto!important;min-width:0!important;padding-inline:16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons){margin:0!important;padding:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) :is(p,a,span){font-size:14px!important;line-height:1.42!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) p{margin:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) p+p{margin-top:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) rte-formatter strong{display:block!important;margin:0 0 14px!important;font-size:20px!important;line-height:1.08!important;font-weight:500!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) rte-formatter strong br,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .text-block:has(.footer-social-icons) rte-formatter strong+br{display:none!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .footer-social-icons{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:14px!important;min-height:30px!important;margin:14px 0 8px!important;padding:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .footer-social-icons a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;margin:0!important;padding:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .footer-social-icons :is(svg,img){width:24px!important;height:24px!important;object-fit:contain!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu{width:100%!important;margin:0!important;padding:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__heading,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__heading *{margin:0!important;font-size:15px!important;line-height:1.1!important;font-weight:500!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__heading__accordion{min-height:42px!important;padding:10px 0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__details{margin:0!important;padding:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__list{gap:7px!important;margin:0!important;padding-block:2px 10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__item,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .menu__link{margin:0!important;font-size:13px!important;line-height:1.3!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .logo-block{width:min(76vw,310px)!important;max-width:310px!important;margin:20px auto 6px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .logo{width:100%!important;max-width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .logo__image-element{width:100%!important;max-width:100%!important;max-height:92px!important;height:auto!important;object-fit:contain!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .product-information__grid{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;gap:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .product-information__media{width:100%!important;min-width:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .product-details{width:100%!important;min-width:0!important;padding:18px 14px 0!important;margin-bottom:-1rem!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .product-details h1{font-size:22px!important;line-height:1.08!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] :is(.price,.compare-at-price,product-price){font-size:15px!important;line-height:1.25!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .variant-option+.variant-option{margin-top:14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .variant-option__button-label{min-height:40px!important;padding:8px 12px!important;font-size:13px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .quantity-selector{min-height:40px!important;--quantity-selector-width: 112px}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .product-form-buttons :is(.button,button.shopify-payment-button__button--unbranded){min-height:42px!important;font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .custom-product-accordion{margin-block:8px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .custom-accordion-title{min-height:42px!important;padding-block:10px!important;font-size:14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .custom-accordion-content,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .custom-accordion-content *{font-size:13px!important;line-height:1.45!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=product] .por-button{min-height:40px!important;padding:0 14px!important;font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .por-modal-dialog{width:calc(100% - 24px)!important;max-width:430px!important;padding:20px 16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .por-modal-dialog h2{font-size:20px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.product-grid,.resource-list--grid){column-gap:10px!important;row-gap:16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.product-card,.product-grid__card) :is(h3,h4,.h3,.h4){font-size:13px!important;line-height:1.28!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.product-card,.product-grid__card) :is(.price,.compare-at-price){font-size:13px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .main-collection-grid__title{margin-inline:14px!important;font-size:24px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=search] form{width:100%!important;max-width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-section{padding:28px 14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-heading{margin-bottom:18px!important;font-size:24px!important;line-height:1.1!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-tab-buttons{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:8px!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:6px!important;scrollbar-width:none}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-tab-buttons::-webkit-scrollbar{display:none}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-tab-button{flex:0 0 auto!important;min-height:38px!important;padding:0 14px!important;font-size:12px!important;white-space:nowrap!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .marph-product-card :is(h3,h4,p,span){font-size:13px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ec-section{padding:28px 14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ec-content{width:100%!important;max-width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ec-heading{font-size:24px!important;line-height:1.1!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ec-description{font-size:14px!important;line-height:1.45!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ec-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent :is(.ec-solid-btn,.ec-outline-btn){min-height:40px!important;padding:0 14px!important;font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-wrap{padding:28px 14px 44px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-grid{grid-template-columns:1fr!important;gap:22px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-title{margin-bottom:14px!important;font-size:24px!important;line-height:1.1!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-content,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-content :is(p,a,span){font-size:14px!important;line-height:1.45!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-form{width:100%!important;padding:20px 16px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-form .field{margin-bottom:14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-form .field-label{font-size:13px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .contact-form .submit-btn{width:100%!important;min-height:42px!important;padding:0 14px!important;font-size:12px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-section{padding:28px 0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-container{width:100%!important;max-width:100%!important;padding-inline:14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-main-heading{margin-bottom:10px!important;font-size:25px!important;line-height:1.08!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-subtitle{margin-bottom:18px!important;font-size:14px!important;line-height:1.4!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-buttons{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:8px!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:6px!important;scrollbar-width:none}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-buttons::-webkit-scrollbar{display:none}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-button{flex:0 0 auto!important;min-height:38px!important;padding:0 13px!important;font-size:12px!important;white-space:nowrap!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-content{grid-template-columns:1fr!important;gap:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-image-wrap{width:100%!important;height:clamp(240px,72vw,300px)!important;min-height:0!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-text-content{padding:18px 14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-title{margin-bottom:10px!important;font-size:22px!important;line-height:1.12!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-description,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-description *{font-size:14px!important;line-height:1.48!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent .ct-btn{min-height:35px!important;padding:0 14px!important;font-size:18px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=cart] :is(.cart-page,.cart-page__main,.cart-page__summary){min-width:0!important;max-width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=cart] .cart-page{gap:18px!important;padding-inline:14px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=cart] .cart-items-component{width:100%!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=cart] .quantity-selector{--quantity-selector-width: 108px;min-height:38px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=blog] :is(.blog-post-card,.featured-blog-posts-card) :is(h2,h3,h4){font-size:16px!important;line-height:1.25!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=article] .rte{font-size:14px!important;line-height:1.55!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) #MainContent[data-template^=article] .rte :is(img,video,iframe){height:auto!important;max-width:100%!important}}@media screen and (max-width:300px){body:has(#MainContent):not(:has(#MainContent[data-template*=about])){--devui-mobile-gutter: 10px}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .custom-header-container{padding-inline:10px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-left{gap:6px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .mobile-menu-btn,body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-left .svg-wrapper{flex-basis:26px!important;width:26px!important;min-width:26px!important;height:26px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .header-center{max-width:calc(100% - 136px)!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) .custom-logo img{width:92px!important;max-height:30px!important}body:has(#MainContent):not(:has(#MainContent[data-template*=about])) footer .group-block-content{padding-inline:12px!important}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/devui-mobile-site.css.map */