/* * Reseller Hat — Desktop/Laptop Mobile-Parity Layer * * The approved mobile UI is the production visual reference. * On laptop/desktop, keep the same header, spacing, hero, cards, navigation * and overall visual language instead of applying a separate desktop design. * Functional markup and WooCommerce behaviour are untouched. */ @media (min-width:768px){ /* ---------- Global ---------- */ body{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;background:#fff!important;color:#15243a!important;overflow-x:hidden!important} #main{background:#fff!important} .container{max-width:1240px!important} /* ---------- Header: same geometry as the approved mobile header ---------- */ #header .rhat-production-header, #header .rhat-production-header .rhat-header-inner{ height:58px!important;min-height:58px!important; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 58%,#fffaf2 100%)!important; } #header .rhat-production-header{ border-bottom:1px solid rgba(239,114,0,.22)!important; box-shadow:0 3px 18px rgba(0,47,91,.09),inset 0 1px 0 rgba(255,255,255,.95)!important; } #header .rhat-production-header .rhat-header-inner{ display:grid!important;grid-template-columns:42px minmax(0,1fr) 90px!important; gap:0!important;padding:0 7px!important;max-width:1240px!important;margin:0 auto!important; } #header .rhat-production-header .rhat-header-menu{display:flex!important;align-items:center!important;min-width:0!important;order:1!important} #header .rhat-production-header .rhat-desktop-primary-nav, #header .rhat-production-header .rhat-desktop-primary-nav>li, #header .rhat-production-header .rhat-desktop-primary-nav .nav-dropdown{display:none!important} #header .rhat-production-header .rhat-mobile-menu-trigger{ display:grid!important;visibility:visible!important;opacity:1!important; width:42px!important;height:42px!important;min-width:42px!important; border-radius:10px!important;margin:0!important;padding:0!important; } #header .rhat-production-header .rhat-header-logo{ order:2!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important; } #header .rhat-production-header .rhat-header-logo-image{ display:block!important;visibility:visible!important;opacity:1!important; width:145px!important;max-width:calc(100vw - 135px)!important;height:auto!important;max-height:none!important; object-fit:contain!important;margin:0!important;padding:0!important; } #header .rhat-production-header .rhat-header-actions{ order:3!important;display:flex!important;align-items:center!important;justify-content:flex-end!important; gap:3px!important;min-width:0!important; } #header .rhat-production-header .rhat-header-search-trigger{ display:flex!important;align-items:center!important;justify-content:center!important; width:42px!important;height:42px!important;min-width:42px!important;border-radius:10px!important; } #header .rhat-production-header .rhat-header-cart, #header .rhat-production-header .rhat-header-cart .cart-item, #header .rhat-production-header .rhat-header-cart .header-button, #header .rhat-production-header .rhat-header-cart .header-cart-link{ width:42px!important;min-width:42px!important;height:42px!important;margin:0!important;padding:0!important; display:flex!important;align-items:center!important;justify-content:center!important; } #header .rhat-production-header .rhat-header-cart .header-cart-title{display:none!important} #header .rhat-production-header .rhat-mobile-account-tools{display:none!important} #header .rhat-production-header + .header-bottom{display:none!important} #header .rhat-production-header>.container:not(.rhat-header-inner){display:none!important} /* ---------- Homepage: same proportions and hierarchy as mobile ---------- */ #rhat-home.rhat-home{overflow:hidden!important;background:#fff!important} #rhat-home.rhat-home .rhat-hero{ padding:27px 0 58px!important;min-height:0!important;height:auto!important; display:block!important;align-items:initial!important;border-bottom:0!important;border-radius:0!important; background:linear-gradient(145deg,#f8fbff 0%,#eef6fd 54%,#fffaf4 100%)!important;overflow:visible!important; } #rhat-home.rhat-home .rhat-hero-inner{ display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important; width:100%!important;max-width:760px!important;min-height:0!important;margin:0 auto!important;padding:0 20px!important;box-sizing:border-box!important; } #rhat-home.rhat-home .rhat-hero-copy{ width:100%!important;max-width:760px!important;min-height:0!important;padding:0!important; display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important; } #rhat-home.rhat-home .rhat-eyebrow{font-size:12px!important;margin-bottom:4px!important} #rhat-home.rhat-home .rhat-hero h1{ font-size:31px!important;line-height:1.08!important;letter-spacing:-.35px!important;margin:8px 0 13px!important;max-width:720px!important; } #rhat-home.rhat-home .rhat-hero-business-word{display:block!important} #rhat-home.rhat-home .rhat-hero-description{max-width:680px!important;margin:0 auto 14px!important} #rhat-home.rhat-home .rhat-hero-description p{font-size:13px!important;line-height:1.62!important;margin-bottom:10px!important} #rhat-home.rhat-home .rhat-hero-description p:last-child{font-size:12.2px!important;line-height:1.45!important;min-height:44px!important;padding:7px 12px!important;margin-top:2px!important} #rhat-home.rhat-home .rhat-actions{display:flex!important;justify-content:center!important;align-items:stretch!important;gap:9px!important;width:100%!important;max-width:620px!important;margin:0 auto!important} #rhat-home.rhat-home .rhat-hero .rhat-btn{ flex:1 1 0!important;width:calc(50% - 4.5px)!important;max-width:none!important;min-height:52px!important;height:52px!important; border-radius:18px!important;grid-template-columns:21px minmax(0,1fr) 18px!important;column-gap:4px!important;padding:7px 14px!important; } #rhat-home.rhat-home .rhat-hero .rhat-btn .rhat-btn-icon{width:21px!important;height:21px!important} #rhat-home.rhat-home .rhat-hero .rhat-btn .rhat-btn-icon svg{width:19px!important;height:19px!important} #rhat-home.rhat-home .rhat-hero .rhat-btn .rhat-btn-text{font-size:10.8px!important;font-weight:900!important;white-space:nowrap!important} #rhat-home.rhat-home .rhat-hero .rhat-btn .rhat-btn-arrow{width:18px!important;font-size:20px!important} #rhat-home.rhat-home .rhat-reference-hero-art{ display:block!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important; width:210px!important;height:185px!important;margin:2px auto -5px!important;pointer-events:none!important;overflow:visible!important; } #rhat-home.rhat-home .rhat-ref-phone{left:61px!important;top:4px!important;width:98px!important;height:178px!important;border-width:5px!important;border-radius:22px!important} #rhat-home.rhat-home .rhat-ref-phone-notch{width:35px!important;height:8px!important} #rhat-home.rhat-home .rhat-ref-phone-screen .rhat-ref-homepage-preview{width:100%!important;height:100%!important;object-fit:cover!important;object-position:top center!important;transform:none!important} #rhat-home.rhat-home .rhat-ref-art-glow{inset:0!important} /* ---------- Quick cards: same three-column mobile pattern ---------- */ #rhat-home.rhat-home .rhat-quick{ grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important; width:100%!important;max-width:760px!important;margin:-30px auto 0!important;padding:0 20px!important;box-sizing:border-box!important; } #rhat-home.rhat-home .rhat-quick-card{ min-width:0!important;min-height:82px!important;padding:8px 5px!important; display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;text-align:center!important; border-radius:16px!important;box-shadow:0 13px 28px rgba(15,23,42,.085)!important; } #rhat-home.rhat-home .rhat-quick-card>span{width:35px!important;height:35px!important;border-radius:12px!important} #rhat-home.rhat-home .rhat-quick-card>span svg{width:20px!important;height:20px!important} #rhat-home.rhat-home .rhat-quick-card b{font-size:9.8px!important;line-height:1.2!important} #rhat-home.rhat-home .rhat-quick-card small{font-size:7.4px!important;line-height:1.25!important;margin-top:1px!important} #rhat-home.rhat-home .rhat-quick-card em{position:absolute!important;right:5px!important;bottom:5px!important;width:18px!important;height:18px!important;font-size:12px!important} #rhat-home.rhat-home .rhat-quick + .rhat-section{padding-top:48px!important} /* ---------- Main content: mobile visual density, expanded safely ---------- */ #rhat-home.rhat-home .rhat-section{padding-top:48px!important;padding-bottom:0!important} #rhat-home.rhat-home .rhat-section-head{margin-bottom:18px!important} #rhat-home.rhat-home .rhat-section-head h2, #rhat-home.rhat-home .rhat-category-heading h2{font-size:24px!important;line-height:1.2!important;letter-spacing:-.2px!important} #rhat-home.rhat-home .rhat-section-head p, #rhat-home.rhat-home .rhat-category-heading p{font-size:12px!important;line-height:1.6!important;max-width:760px!important} /* ---------- Product cards ---------- */ #rhat-home.rhat-home .products.row, #rhat-home.rhat-home ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-left:0!important;margin-right:0!important} #rhat-home.rhat-home ul.products li.product,.products.row>.product{width:auto!important;max-width:none!important;flex:none!important;margin:0!important;padding:0!important} #rhat-home.rhat-home ul.products li.product .box-image,.products.row .box-image{margin-bottom:5px!important} #rhat-home.rhat-home ul.products li.product .box-image img,.products.row .box-image img{width:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:9px!important} #rhat-home.rhat-home ul.products li.product .box-text,.products.row .box-text{padding:4px 2px 8px!important} #rhat-home.rhat-home ul.products li.product .woocommerce-loop-product__title{font-size:10px!important;line-height:1.25!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;margin:0 0 3px!important} #rhat-home.rhat-home ul.products li.product .price{font-size:10px!important;line-height:1.2!important;margin:0!important} #rhat-home.rhat-home ul.products li.product .button{font-size:9px!important;min-height:28px!important;padding:4px 5px!important;border-radius:7px!important;margin-top:4px!important} /* ---------- Categories: keep the approved 3-column mobile layout ---------- */ #rhat-home.rhat-home .rhat-main-category-section{padding-top:42px!important;padding-bottom:18px!important} #rhat-home.rhat-home .rhat-main-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} #rhat-home.rhat-home .rhat-main-category-image{border-radius:14px!important;box-shadow:0 8px 20px rgba(16,42,67,.08)!important} #rhat-home.rhat-home .rhat-main-category-bar{min-height:42px!important;margin:-10px auto 0!important;border-radius:12px!important;box-shadow:0 7px 16px rgba(16,42,67,.10)!important} #rhat-home.rhat-home .rhat-main-category-name{font-size:11px!important} /* ---------- Business / Why / Blog ---------- */ #rhat-home.rhat-home .rhat-business-section, #rhat-home.rhat-home .rhat-why, #rhat-home.rhat-home .rhat-blog{max-width:100%!important;margin-left:auto!important;margin-right:auto!important} #rhat-home.rhat-home .rhat-business-section{border-radius:18px!important;padding:28px 18px!important} #rhat-home.rhat-home .rhat-business-steps{gap:9px!important} #rhat-home.rhat-home .rhat-business-steps article{min-height:0!important;padding:14px!important;border-radius:14px!important} #rhat-home.rhat-home .rhat-why-grid{gap:9px!important} #rhat-home.rhat-home .rhat-why-grid>div{border-radius:14px!important;min-height:110px!important} #rhat-home.rhat-home .rhat-blog{padding-bottom:48px!important} #rhat-home.rhat-home .rhat-blog .post-item, #rhat-home.rhat-home .rhat-blog .box-blog-post, #rhat-home.rhat-home .rhat-blog .post{border-radius:14px!important;overflow:hidden!important} /* ---------- WooCommerce pages ---------- */ .single-product .product-gallery,.single-product .product-info{padding-left:10px!important;padding-right:10px!important} .woocommerce-cart-form,.cart_totals,.woocommerce-checkout-review-order,.woocommerce-checkout-payment,.woocommerce-checkout form.checkout{border-radius:12px!important} .woocommerce-cart .shop_table,.woocommerce-checkout .shop_table{font-size:12px!important} .woocommerce-cart .cart-collaterals,.woocommerce-checkout .col2-set,.woocommerce-checkout #order_review{padding:10px!important} .woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{padding:14px!important;border-radius:14px!important;margin:10px 0!important} .rhat-notifications{margin:0!important} .rhat-notifications article{border-radius:14px!important;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.06);border-color:rgba(0,47,91,.08)!important} .rhat-native-content{overflow-x:hidden!important} /* ---------- Mobile bottom navigation becomes the laptop navigation too ---------- */ .rhat-mobile-bottom-nav, body.home .rhat-mobile-bottom-nav, body.front-page .rhat-mobile-bottom-nav{ position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;margin:0!important; display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:end!important; min-height:68px!important;height:calc(68px + env(safe-area-inset-bottom))!important; padding:5px 6px max(5px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important; border:1px solid rgba(0,47,91,.10)!important;border-bottom:0!important;border-radius:22px 22px 0 0!important; background:rgba(255,255,255,.985)!important;box-shadow:0 -10px 30px rgba(7,27,51,.18),0 -1px 0 rgba(254,143,18,.32)!important; backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;z-index:2147483000!important; } .rhat-mobile-bottom-nav__item{display:flex!important;min-width:0!important;height:58px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;border-radius:17px!important;color:#5d6878!important;text-decoration:none!important;font-size:10px!important;font-weight:800!important;line-height:1.1!important;position:relative!important} .rhat-mobile-bottom-nav__item.is-active{background:rgba(0,47,91,.07)!important;color:#002f5b!important} .rhat-mobile-bottom-nav__icon-wrap{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important} .rhat-mobile-bottom-nav__icon{display:grid!important;place-items:center!important;width:24px!important;height:24px!important} .rhat-mobile-bottom-nav__icon svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important} .rhat-mobile-bottom-nav__label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;padding:0 2px!important} .rhat-mobile-bottom-nav__item--featured .rhat-mobile-bottom-nav__label{display:none!important} .rhat-mobile-bottom-nav__badge{position:absolute!important;top:-7px!important;right:-9px!important;min-width:17px!important;height:17px!important;padding:0 4px!important;border-radius:999px!important;background:#ef2b24!important;color:#fff!important;font-size:8px!important;line-height:17px!important;text-align:center!important;font-weight:900!important;border:2px solid #fff!important} .rhat-mobile-bottom-nav__item--featured{height:72px!important;margin-top:-25px!important;transform:translateY(-1px)!important;z-index:2!important;color:#fff!important;border-radius:50%!important;overflow:visible!important} .rhat-mobile-bottom-nav__item--featured .rhat-mobile-bottom-nav__icon-wrap{width:58px!important;height:58px!important;border-radius:50%!important;background:linear-gradient(145deg,#fe8f12,#f26b00)!important;border:5px solid #fff!important;box-shadow:0 10px 26px rgba(242,107,0,.38),0 0 0 1px rgba(0,47,91,.10)!important} .rhat-mobile-bottom-nav__item--featured .rhat-mobile-bottom-nav__icon{width:36px!important;height:36px!important} .rhat-mobile-bottom-nav__item--featured .rhat-mobile-bottom-nav__icon svg{width:31px!important;height:31px!important;stroke-width:1.9!important} /* ---------- Footer stays clean and matches the mobile brand palette ---------- */ #footer.footer-wrapper,#footer.footer-wrapper .footer-1,#footer.footer-wrapper .footer-2,#footer .footer-1,#footer .footer-2{background:#071b33!important;background-image:none!important;color:rgba(255,255,255,.82)!important} #footer.footer-wrapper{border-top:4px solid #fe8f12!important} #footer .widget-title,#footer .widget-title a,#footer h1,#footer h2,#footer h3,#footer h4,#footer h5,#footer h6{color:#fff!important} #footer a{color:#ffd08b!important;text-decoration:none!important} #footer .absolute-footer{background:#041426!important;color:rgba(255,255,255,.68)!important;border-top:1px solid rgba(255,255,255,.10)!important} } /* Phase 65: remove browser tap/focus/active background from ALL mobile header icons. */ @media (max-width: 767px) { .site-header a, .site-header button, .site-header a:hover, .site-header a:focus, .site-header a:active, .site-header button:hover, .site-header button:focus, .site-header button:active, #masthead a, #masthead button, #masthead a:hover, #masthead a:focus, #masthead a:active, #masthead button:hover, #masthead button:focus, #masthead button:active { background: transparent !important; background-color: transparent !important; -webkit-tap-highlight-color: transparent !important; } }