/* Commerce compatibility is scoped to storefronts; Nexora is unchanged. */
.musify-themed{overflow-x:hidden}.musify-store-wordmark{font:700 clamp(19px,2vw,29px)/1.2 inherit;display:inline-block;max-width:220px;color:inherit;white-space:normal}
.musify-page{min-height:45vh}.musify-page .product-card form,.musify-page [data-product-card] form{margin:0}.musify-page .product-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding-block:25px}.musify-page .gallery-main img{width:100%;max-height:650px;object-fit:contain}.musify-page .gallery-thumbs img{width:70px;height:70px;object-fit:contain}.musify-page .product-info h1{font-size:clamp(24px,2.5vw,38px)}.musify-page .qty-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.musify-page .qty-control{display:inline-flex;align-items:center;border:1px solid #ddd}.musify-page .qty-control input{width:55px;min-height:42px;text-align:center;border:0}.musify-page .qty-control button{width:36px;min-height:42px}.musify-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:10px 18px;border:1px solid #222;border-radius:5px;color:#111;background:#fff;font-size:14px;line-height:1.3;text-decoration:none}.musify-page .btn-primary{background:#111;color:#fff}.musify-page .btn-sm{min-height:34px;padding:7px 11px;font-size:12px}.musify-page .btn:disabled{opacity:.5;cursor:not-allowed}.musify-page .form-control,.musify-page .form-group input:not([type=checkbox]):not([type=radio]),.musify-page .form-group select,.musify-page .form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px}.musify-page .form-group{margin-bottom:16px}.musify-page .form-group label{display:block;margin-bottom:6px}.musify-page .card,.musify-page .panel{border:1px solid #e5e5e5;border-radius:8px;background:#fff}.musify-page .table{width:100%;border-collapse:collapse}.musify-page .table td,.musify-page .table th{padding:12px;border-bottom:1px solid #eee}.musify-page .table img{max-width:90px;max-height:90px;object-fit:contain}.musify-page .tabs-nav{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0;border-bottom:1px solid #ddd}.musify-page .tabs-nav button{padding:12px 0;color:#777;border:0;border-bottom:2px solid transparent;background:transparent}.musify-page .tabs-nav button.active{border-color:#111;color:#111}.musify-page .tab-panel{display:none}.musify-page .tab-panel.active{display:block}.musify-page .checkout-layout,.musify-page .cart-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:25px}.musify-page .alert{padding:12px 18px;border:1px solid #ddd;border-radius:6px;margin:15px auto;max-width:1400px}.musify-page .alert-error{background:#fff2f2}.musify-page .alert-success{background:#f0fff6}.musify-page .crumbs{padding-block:20px;color:#777;font-size:13px}.musify-page .rich{font-size:15px;line-height:1.8}.musify-page .section{margin-block:35px}.musify-page .empty-state{text-align:center;padding:55px 20px}.musify-store-tools{display:none;padding:10px 16px;gap:16px;align-items:center;border-block:1px solid #eee;font-size:13px;overflow:auto}.musify-store-tools>*{flex-shrink:0}.musify-menu-toggle{background:none;border:0}.musify-mobile-navigation{padding:15px 22px;border-bottom:1px solid #eee;gap:14px;background:#fff}.musify-mobile-navigation:not([hidden]){display:flex;flex-direction:column}.musify-header-search{padding:18px;display:flex;align-items:end;justify-content:center;gap:10px;background:#f7f7f7}.musify-header-search[hidden],.musify-mobile-navigation[hidden]{display:none!important}.musify-header-search input{border:1px solid #ccc;padding:10px;margin-left:10px}.musify-header-search button{background:#111;color:#fff;padding:11px 20px}.musify-preview-bar{position:sticky;top:0;z-index:99999;display:flex;gap:18px;align-items:center;justify-content:center;padding:12px 20px;background:#23133e;color:#fff;font:14px/1.4 system-ui}.musify-preview-bar a{color:#fff;text-decoration:underline}.musify-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:991px){.musify-store-tools{display:flex}.musify-page .product-page{gap:20px}.musify-page .checkout-layout,.musify-page .cart-layout{grid-template-columns:1fr}.musify-preview-bar{font-size:12px;flex-wrap:wrap;gap:8px}.musify-page .table{display:block;overflow:auto}}
@media(max-width:640px){.musify-page .product-page{grid-template-columns:1fr}.musify-store-wordmark{font-size:20px}.musify-page .gallery-main img{max-height:420px}.musify-page .btn{padding:10px 12px}.musify-page .container{padding-inline:16px}.musify-header-search label{width:100%}.musify-header-search input{width:100%;margin:5px 0 0}}
.musify-filter-toggle{display:none}.musify-menu-toggle{color:inherit}@media(max-width:767px){.musify-filter-toggle{display:block;padding:12px 20px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:4px;margin-bottom:16px}.musify-filter-panel:not(.musify-filters-open){display:none!important}}
/* Keep the native Onsus product gallery at full width even when its optional slider library is unavailable. */
.theme-onsus .tf-product-media-main{width:100%;overflow:hidden}
.theme-onsus .tf-product-media-main .swiper-wrapper{display:flex;width:100%;transition:transform .35s ease}
.theme-onsus .tf-product-media-main .swiper-slide{flex:0 0 100%;width:100%!important}
.theme-onsus .tf-product-media-main .item{display:flex;width:100%;aspect-ratio:1/1;max-height:687px}
.theme-onsus .tf-product-media-main .item img{display:block;width:100%;height:100%;object-fit:contain}
.theme-onsus .tf-product-media-thumbs{width:100%;overflow:auto}
.theme-onsus .tf-product-media-thumbs .swiper-wrapper{display:flex;gap:10px}
.theme-onsus .tf-product-media-thumbs .swiper-slide{flex:0 0 80px}
/* Keep the selected homepage's shell while giving transactional CMS screens a
   complete, responsive layout that inherits the active template typography. */
.musify-page.musify-native-content>.container.section{width:min(1440px,calc(100% - 48px));max-width:1440px;margin:0 auto;padding:64px 0 88px}
.musify-page.musify-native-content .page-title{margin:0 0 32px;font-size:clamp(30px,3vw,46px);line-height:1.12;font-weight:600;letter-spacing:-.025em}
.musify-page.musify-native-content .checkout-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.8fr);gap:28px;align-items:start}
.musify-page.musify-native-content .card{background:#fff;border:1px solid rgba(20,20,20,.12);border-radius:8px;box-shadow:0 4px 18px rgba(20,20,20,.035);color:#222}
.musify-page.musify-native-content .checkout-grid>.card,.musify-page.musify-native-content .checkout-grid>div>.card,.musify-page.musify-native-content .checkout-grid>aside{padding:24px!important}
.musify-page.musify-native-content .order-summary{position:sticky;top:24px}
.musify-page.musify-native-content .summary-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(20,20,20,.09)}
.musify-page.musify-native-content .summary-row.total{margin-top:8px;padding-top:18px;border-top:1px solid rgba(20,20,20,.22);border-bottom:0;font-size:1.12em}
.musify-page.musify-native-content .cart-table{width:100%;border-collapse:collapse}
.musify-page.musify-native-content .cart-table th,.musify-page.musify-native-content .cart-table td{padding:16px 12px;border-bottom:1px solid rgba(20,20,20,.1);text-align:left;vertical-align:middle}
.musify-page.musify-native-content .cart-item{display:flex;gap:16px;align-items:center;min-width:210px}
.musify-page.musify-native-content .cart-item img{width:76px!important;height:76px!important;border-radius:5px;background:#f7f7f7}
.musify-page.musify-native-content .cart-item a{color:inherit;text-decoration:none;font-weight:500}
.musify-page.musify-native-content .form-control,.musify-page.musify-native-content input[type=text],.musify-page.musify-native-content input[type=email],.musify-page.musify-native-content input[type=number],.musify-page.musify-native-content select,.musify-page.musify-native-content textarea{width:100%;min-height:46px;padding:11px 13px;border:1px solid rgba(20,20,20,.2);border-radius:4px;background:#fff;color:inherit;font:inherit}
.musify-page.musify-native-content .form-group{margin:0 0 18px}
.musify-page.musify-native-content .form-group label{display:block;margin:0 0 7px;font-size:.92em;font-weight:500}
.musify-page.musify-native-content .checkout-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(20,20,20,.1)}
.musify-page.musify-native-content .checkout-item img{width:58px;height:58px;object-fit:cover;border-radius:4px;background:#f7f7f7}
.musify-page.musify-native-content .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border:1px solid #171717;border-radius:3px;background:#171717;color:#fff;text-decoration:none;font:inherit;font-weight:600;cursor:pointer}
.musify-page.musify-native-content .btn-light{background:#fff;color:#171717}
.musify-page.musify-native-content .btn-sm{min-height:36px;padding:7px 12px;font-size:.9em}
.musify-page.musify-native-content .order-summary>.btn,.musify-page.musify-native-content .order-summary>a.btn{width:100%;margin-top:18px}
.musify-page.musify-native-content .radio-line{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(20,20,20,.08)}
.musify-page.musify-native-content .checkout-grid .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.musify-page.musify-native-content .alert{margin:0 0 22px;padding:14px 18px;border:1px solid rgba(20,20,20,.12);border-radius:4px}
@media(max-width:900px){.musify-page.musify-native-content>.container.section{width:calc(100% - 32px);padding:40px 0 56px}.musify-page.musify-native-content .checkout-grid{grid-template-columns:1fr}.musify-page.musify-native-content .order-summary{position:static}}
@media(max-width:620px){.musify-page.musify-native-content .cart-table th:nth-child(2),.musify-page.musify-native-content .cart-table td:nth-child(2),.musify-page.musify-native-content .cart-table th:nth-child(4),.musify-page.musify-native-content .cart-table td:nth-child(4){display:none}.musify-page.musify-native-content .checkout-grid .form-row{grid-template-columns:1fr}.musify-page.musify-native-content .checkout-grid>.card,.musify-page.musify-native-content .checkout-grid>div>.card,.musify-page.musify-native-content .checkout-grid>aside{padding:18px!important}}

/* --- Onsus product page repairs (2026-10-22) --------------------------------
   The generic CMS form styling earlier in this file stretches the vendor
   quantity input to full width, which tore the minus button out of the
   stepper. Restore the vendor stepper inside the product buy panel. */
.musify-page.musify-native-content .tf-main-product .wg-quantity{display:flex;align-items:center;gap:2px;width:max-content}
.musify-page.musify-native-content .tf-main-product .wg-quantity input.quantity-product{width:30px;min-height:30px;padding:0;border:0;text-align:center;font-weight:700;pointer-events:none;background:transparent}
.musify-page.musify-native-content .tf-main-product .wg-quantity .btn-quantity{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%}
.musify-page.musify-native-content .tf-product-info-choose-option select.select-color{min-height:44px}
/* Wishlist / compare quick actions under the buy buttons */
.theme-onsus .musify-product-actions{display:flex;gap:18px;flex-wrap:wrap}
.theme-onsus .musify-action-btn{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:inherit;font:inherit}
.theme-onsus .musify-action-btn:hover,.theme-onsus .musify-product-actions a:hover{color:var(--primary)}
/* Label/value rows in the buy panel */
.theme-onsus .musify-detail-rows p{display:flex;justify-content:space-between;gap:14px;margin:0}
.theme-onsus .musify-detail-rows p>span{color:var(--gray)}
.theme-onsus .musify-detail-rows p>strong{font-weight:500;text-align:right}
.theme-onsus .musify-option-values{display:grid;gap:8px}
.theme-onsus .musify-option-values label{display:flex;align-items:center;gap:8px;cursor:pointer}
.theme-onsus .musify-option-values input{width:auto;min-height:0}
/* Usually Bought Together */
.theme-onsus .musify-ubt-items{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.theme-onsus .musify-ubt-item{width:180px;display:grid;gap:8px}
.theme-onsus .musify-ubt-item img{width:180px;height:180px;object-fit:contain;background:#f7f7f7;border-radius:6px}
.theme-onsus .musify-ubt-plus{font-size:26px;font-weight:600;align-self:center}
.theme-onsus .musify-ubt-add{padding:8px 14px;min-height:38px;font-size:13px}
/* Specification table */
.theme-onsus .musify-spec-table th{width:260px;background:#fafafa}
/* Reviews summary + list */
.theme-onsus .musify-rating-big{font-size:44px;font-weight:700;line-height:1;color:var(--primary)}
.theme-onsus .musify-rating-big span{font-size:18px;color:var(--gray)}
.theme-onsus .musify-rating-summary .list-star{display:flex;gap:2px;margin:10px 0;padding:0;list-style:none}
.theme-onsus .musify-rating-bars{display:grid;gap:6px;margin-top:14px;max-width:280px}
.theme-onsus .musify-rating-bar{display:flex;align-items:center;gap:10px;font-size:13px}
.theme-onsus .musify-rating-bar .track{flex:1;height:8px;background:#eee;border-radius:99px;overflow:hidden}
.theme-onsus .musify-rating-bar .fill{height:100%;background:var(--primary)}
.theme-onsus .musify-review{padding:18px 0;border-bottom:1px solid #eee}
.theme-onsus .musify-review .list-star{display:flex;gap:2px;margin:6px 0;padding:0;list-style:none}
.theme-onsus .musify-review-form{display:grid;gap:12px;margin-top:22px;max-width:560px}
.theme-onsus .musify-review-form label{display:grid;gap:6px}
.theme-onsus .musify-no-image{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#f7f7f7;border-radius:6px;width:100%}
/* Product page on tablets/phones: no sticky panels fighting the scroll */
@media(max-width:991px){
 .theme-onsus .tf-product-media-wrap.sticky-top,.theme-onsus .tf-product-info-choose-option.sticky-top{position:static}
 .theme-onsus .tf-product-info-choose-option{max-width:100%}
 .theme-onsus .musify-ubt-item{width:140px}
 .theme-onsus .musify-ubt-item img{width:140px;height:140px}
 .theme-onsus .musify-spec-table th{width:150px}
}

/* Onsus shell repairs: brand strip can never stack vertically; newsletter row rebuilt by renderer */
.theme-onsus .tf-brand{display:flex;align-items:center;gap:30px;overflow:hidden}
.theme-onsus .tf-brand .brand-item{flex:0 0 auto;display:flex;align-items:center}
.theme-onsus .tf-brand .brand-item img{max-height:44px;width:auto;max-width:160px;object-fit:contain}
.theme-onsus .musify-newsletter-row{display:flex;gap:10px;width:100%}
.theme-onsus .musify-newsletter-row input{flex:1 1 auto;min-width:0;border-radius:1000px;padding:10px 22px;border:0;font-size:13px;line-height:25px;background:#fff;color:#1c1e26}
.theme-onsus .musify-newsletter-row .tf-btn{border-radius:1000px;white-space:nowrap}
@media(max-width:575px){.theme-onsus .musify-newsletter-row{flex-direction:column}.theme-onsus .musify-newsletter-row .tf-btn{justify-content:center}}
.theme-onsus .banner-image-product-2 .box-sale-wrap .main-title-2{font-size:19px !important;letter-spacing:-.3px;white-space:nowrap}

/* ============ DESIGN REFRESH 2026-10-22 (ChatGPT plan) ============
   Skynergy palette: navy #102B50, blue #0866A8, cyan #21A5D5,
   CTA yellow-orange #FFBD19, text #192C43, muted #62748A,
   border #DCE4EC. Overrides only — Onsus layout/structure untouched. */
body.musify-themed{color:#192C43}
.theme-onsus h1,.theme-onsus h2,.theme-onsus h3,.theme-onsus h4,.theme-onsus h5,.theme-onsus h6{color:#102B50}
.theme-onsus .text-main-2{color:#62748A}
.theme-onsus .text-secondary{color:#0866A8 !important}
.theme-onsus .text-primary{color:#0866A8 !important}
.theme-onsus a:hover{color:#21A5D5}
.theme-onsus .link:hover{color:#21A5D5 !important}
.theme-onsus .musify-action-btn:hover{color:#0866A8}
/* Primary CTA: yellow-orange bg, navy text (template .tf-btn base) */
.theme-onsus .tf-btn:not(.btn-line):not(.btn-gray):not(.style-3){background-color:#FFBD19;color:#102B50;border-radius:8px;font-weight:700}
.theme-onsus .tf-btn:not(.btn-line):not(.btn-gray):not(.style-3):hover{background-color:#F0AD00;color:#102B50}
.theme-onsus .tf-btn.text-white:not(.btn-line):not(.btn-gray):not(.style-3){color:#102B50 !important}
.theme-onsus .tf-btn:not(.btn-line):not(.btn-gray):not(.style-3) .text-white{color:#102B50 !important}
/* Secondary buttons and variants */
.theme-onsus .tf-btn.btn-gray{background-color:#0866A8;color:#fff}
.theme-onsus .tf-btn.btn-gray:hover{background-color:#102B50;color:#fff}
.theme-onsus .tf-btn.btn-line{background-color:transparent;border:1px solid #0866A8;color:#0866A8}
.theme-onsus .tf-btn.btn-line:hover{background-color:#0866A8;color:#fff}
.theme-onsus .tf-btn.style-3{background-color:#0866A8 !important;color:#fff}
.theme-onsus .tf-btn.style-3:hover{background-color:#102B50 !important;color:#fff}
/* Generic platform buttons (CMS / account pages) */
.musify-page .btn-primary{background:#FFBD19;border-color:#FFBD19;color:#102B50}
.musify-page.musify-native-content .order-summary .btn{background:#FFBD19;border-color:#FFBD19;color:#102B50}
/* Product cards */
.theme-onsus .card-product{border:1px solid #DCE4EC;border-radius:8px;box-shadow:0 4px 16px rgba(16,43,80,.08);background-color:#fff}
.theme-onsus .card-product:hover{box-shadow:0 8px 24px rgba(16,43,80,.14)}
.theme-onsus .card-product .product-img{overflow:hidden}
.theme-onsus .card-product .product-img img{transition:transform .45s ease}
.theme-onsus .card-product:hover .product-img img{transform:scale(1.05)}
.theme-onsus .card-product .name-product{color:#102B50 !important}
.theme-onsus .card-product .name-product:hover{color:#0866A8 !important}
.theme-onsus .card-product .box-icon.add-to-cart:hover{background-color:#FFBD19 !important;color:#102B50;border-color:#FFBD19}
.theme-onsus .card-product .box-icon:not(.add-to-cart):hover{background-color:#0866A8 !important;color:#fff;border-color:#0866A8}
/* Prices: navy, bold */
.theme-onsus .new-price{color:#102B50 !important;font-weight:700}
.theme-onsus .tf-main-product .price-text{color:#102B50 !important;font-weight:700}
/* Product tabs: blue active + yellow-orange underline accent */
.theme-onsus .tab-link.active{color:#0866A8;box-shadow:inset 0 -3px 0 #FFBD19}
/* Quantity steppers: blue controls */
.theme-onsus .wg-quantity .btn-quantity{background-color:#0866A8;color:#fff}
/* Form focus (transactional pages) */
.musify-page input:not([type=checkbox]):not([type=radio]):focus,.musify-page select:focus,.musify-page textarea:focus{border-color:#0866A8;box-shadow:0 0 0 3px rgba(33,165,213,.18);outline:none}
/* 404 */
.theme-onsus .wg-404 h1{color:#102B50 !important}
.theme-onsus .wg-404 .text-primary{color:#102B50 !important}
/* Footer: deep navy, light text, cyan hovers */
.theme-onsus .tf-footer{background-color:#102B50;color:#C9D6E4}
.theme-onsus .tf-footer .ft-body-inner{background-color:#102B50}
.theme-onsus .tf-footer h1,.theme-onsus .tf-footer h2,.theme-onsus .tf-footer h3,.theme-onsus .tf-footer h4,.theme-onsus .tf-footer h5,.theme-onsus .tf-footer h6,.theme-onsus .tf-footer .ft-heading{color:#fff}
.theme-onsus .tf-footer .musify-store-wordmark{color:#fff}
.theme-onsus .tf-footer a{color:#C9D6E4}
.theme-onsus .tf-footer a:hover{color:#21A5D5 !important}
.theme-onsus .tf-footer .text-primary{color:#21A5D5 !important}
.theme-onsus .tf-footer .text-main-2{color:#C9D6E4}
/* Newsletter band: navy + (subscribe button inherits primary CTA rules) */
.theme-onsus .ft-body-center.bg-gray{background-color:#102B50 !important}
/* ============ /DESIGN REFRESH 2026-10-22 ============ */

/* ============ VISUAL FIX ROUND 2026-10-22 ============
   Post-refresh visual check fixes. Overrides only — layout untouched. */
/* Search submit button: CTA yellow, navy icon (vendor uses red --primary) */
.theme-onsus .form-search-product .btn-submit-form{background-color:#FFBD19;color:#102B50}
.theme-onsus .form-search-product .btn-submit-form:hover{background-color:#F0AD00;color:#102B50}
/* Wishlist/cart count badges: brand blue (vendor uses red --primary) */
.theme-onsus .tf-header .nav-icon .count-box{background-color:#0866A8;color:#fff}
/* Homepage product tabs: blue active + yellow underline (vendor default-tab rule is red and outranks the design block) */
.theme-onsus .flat-animate-tab .flat-title-tab-default .menu-tab-line .tab-link.active{color:#0866A8;box-shadow:inset 0 -3px 0 #FFBD19}
.theme-onsus .flat-title-tab-nav-mobile .menu-tab-line .nav-tab-item a.active{color:#0866A8}
/* Carousel pagination: active dot brand blue (vendor uses red --primary) */
.theme-onsus .sw-dot-default .swiper-pagination-bullet-active{background-color:#0866A8}
/* "All Categories" nav title: white on the charcoal header bar */
.theme-onsus .nav-category-wrap .nav-title{color:#fff}
.theme-onsus .nav-category-wrap .nav-title .title{color:#fff}
/* Wide promo slides: full-bleed cover photos, navy gradient behind text for
   contrast, sub-copy unclamped, both slides equal height */
.theme-onsus .tf-sw-categories .swiper-slide{height:auto}
.theme-onsus .tf-sw-categories a.banner-image-product-2{display:block;height:100%;padding-top:0;padding-bottom:0}
.theme-onsus .tf-sw-categories .item-banner{position:relative;height:100%;min-height:240px;padding:38px 34px;background-size:cover;background-position:center}
.theme-onsus .tf-sw-categories .banner-image-product-2.style-2 .item-banner{padding:38px 34px}
.theme-onsus .tf-sw-categories .item-banner::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(16,43,80,.80) 0%,rgba(16,43,80,.48) 48%,rgba(16,43,80,0) 78%)}
.theme-onsus .tf-sw-categories .item-banner:has(>.inner.justify-content-xl-end){background-position:68% 22%}
.theme-onsus .tf-sw-categories .item-banner:has(>.inner.justify-content-xl-end)::before{background:linear-gradient(270deg,rgba(16,43,80,.80) 0%,rgba(16,43,80,.48) 48%,rgba(16,43,80,0) 78%)}
.theme-onsus .tf-sw-categories .item-banner .inner{position:relative;z-index:1}
.theme-onsus .tf-sw-categories .item-banner .name{display:block;-webkit-line-clamp:unset;overflow:visible}
/* Side promo box: headline wraps inside the box, kicker readable over the photo */
.theme-onsus .banner-product-2 .content{padding-left:16px;padding-right:16px;background:linear-gradient(180deg,rgba(16,43,80,.52) 0%,rgba(16,43,80,0) 34%,rgba(16,43,80,0) 62%,rgba(16,43,80,.45) 100%)}
.theme-onsus .banner-product-2 .box-top p{text-shadow:0 1px 10px rgba(16,43,80,.9)}
.theme-onsus .banner-product-2 .box-bottom .h3{font-size:clamp(25px,1.75vw,34px);line-height:1.18;white-space:normal;overflow-wrap:break-word;text-shadow:0 1px 10px rgba(16,43,80,.55)}
.theme-onsus .banner-product-2 .box-price .h2{font-size:clamp(27px,1.9vw,38px);white-space:nowrap;text-shadow:0 1px 10px rgba(16,43,80,.55)}
/* Product cards: internal padding from the design plan + full slide height,
   so the price stays inside the card border on two-line product names */
.theme-onsus .card-product{height:100%;padding:16px}
.theme-onsus .tf-sw-products .swiper-slide{height:auto}
.theme-onsus .card-product .card-product-info{min-width:0}
/* Brand strip: real brand names as styled text (no fabricated logo images) */
.theme-onsus .tf-brand .brand-item .skn-brand-name{font-size:21px;font-weight:700;letter-spacing:.5px;color:#102B50;white-space:nowrap;line-height:44px}
/* ============ /VISUAL FIX ROUND 2026-10-22 ============ */
/* ============ FEATURED PRODUCT FIT 2026-10-22 ============ */
/* Top featured-product section: the renderer sets the featured product's
   square (1:1) catalog photo as the section background, and the vendor
   .has-bg-img rule forces background-size:cover. Cover scales the square
   image to the full section width (~1920px) while the section is only
   ~400px tall, so just a thin middle slice of the photo shows - an extreme
   close-up with the unit's display cut off. Scope this section only to
   contain on the plan's light grey #F4F7FA: the whole unit (display and
   cable included) fits the frame like a clean product hero, and the
   photo's own #F3F3F3 backdrop blends seamlessly into #F4F7FA. Position
   stays the renderer's inline "left"; hero and wide banners (no tf-sp-2)
   keep cover and are unaffected. */
.theme-onsus section.has-bg-img.tf-sp-2{background-size:contain;background-color:#F4F7FA}
/* ============ /FEATURED PRODUCT FIT 2026-10-22 ============ */

/* LOGO 2026-10-22: owner's original full logo (square stacked artwork) fitted by height in the existing logo slots (header, footer, mobile menu) */
.theme-onsus .logo-site img{height:60px;width:auto;max-width:none}

/* ============ FEATURED HERO OVERLAP FIX 2026-10-28 ============ */
/* Supersedes the 2026-10-22 "contain" fix: that fix kept the product photo
   as a left-aligned section background, so the Price / title text (which
   also sits on the left) painted directly on top of the inverter photo.
   The photo is now a real in-flow <a><img> (skn-hero-product) inserted by
   ThemeRenderer, and this section has NO background image at all, so text
   can never overlap the photo at any viewport width. If the row does not
   fit, flex-wrap stacks the blocks instead of overlapping them. */
.theme-onsus section.has-bg-img.tf-sp-2{background-image:none !important;background-color:#F4F7FA}
.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3{align-items:center;flex-wrap:wrap}
.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .skn-hero-product{flex:0 0 340px;max-width:100%;display:block}
.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .skn-hero-product-img{width:100%;height:auto;display:block;object-fit:contain}
.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .product-wrap{flex:1 1 260px;width:auto !important}
.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .other-item{flex:1 1 300px;width:auto !important}
@media (max-width:1199px){
  .theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .skn-hero-product{flex-basis:300px}
  .theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 > *{width:auto !important}
}
@media (max-width:767px){
  .theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .skn-hero-product{flex-basis:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .product-wrap,.theme-onsus section.has-bg-img.tf-sp-2 .banner-product.style-3 .other-item{flex-basis:100%}
}
/* ============ /FEATURED HERO OVERLAP FIX 2026-10-28 ============ */

/* ============ LOGO + FOOTER PROFESSIONAL FIX 2026-10-28 ============ */
/* Header: the supplied full logo is a stacked square, so at 60px tall it
   read as a tiny 60px square. Header now uses the untouched symbol mark
   (skn-symbol.png, owner-supplied) + HTML wordmark, which reads at any size.
   Footer keeps the original full logo, at a readable width, plus a short
   brand line so the logo column is not just a lone tiny image. */
/* Lockup (header, and any other logo-site slot that is not the footer) */
.theme-onsus .logo-site.skn-logo-lockup{display:flex;align-items:center;gap:11px;max-width:none;width:auto;text-decoration:none}
.theme-onsus .logo-site img.skn-logo-symbol{height:52px;width:52px;min-width:52px;object-fit:contain}
.theme-onsus .skn-logo-word{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.theme-onsus .skn-logo-name{font-size:30px;font-weight:800;letter-spacing:-.5px;color:#0d4f9b}
.theme-onsus .skn-logo-solutions{font-size:11px;font-weight:700;letter-spacing:6.5px;color:#f59e0b;margin-top:2px}
.theme-onsus .skn-logo-tag{font-size:7.5px;font-weight:600;letter-spacing:1.4px;color:#102b50;margin-top:4px}
/* Footer logo: original full artwork, readable, not the 60px rule */
.theme-onsus .tf-footer .ft-logo{max-width:290px;gap:18px}
.theme-onsus .tf-footer .ft-logo .logo-site{max-width:none}
.theme-onsus .tf-footer .ft-logo .logo-site img{height:auto;width:170px;max-width:100%}
.theme-onsus .skn-footer-about{font-size:14px;line-height:1.65;color:#4a5568;margin:0}
.theme-onsus .skn-footer-tag{display:block;font-size:10px;font-weight:700;letter-spacing:1.6px;color:#102b50;margin-top:10px}
/* Footer polish: calm light top, navy newsletter band, tight bottom bar */
.theme-onsus .tf-footer .ft-body-inner{background-color:#f4f7fa}
.theme-onsus .tf-footer .ft-heading{color:#102b50}
.theme-onsus .tf-footer .ft-menu-list a{color:#4a5568}
.theme-onsus .tf-footer .ft-menu-list a:hover{color:#0d4f9b}
.theme-onsus .tf-footer .ft-body-center{background-color:#102b50 !important}
.theme-onsus .tf-footer .ft-bottom{padding:28px 0 24px;border-top:1px solid #e2e8f0}
.theme-onsus .tf-footer .ft-bottom .social-list a{color:#102b50}
@media (max-width:767px){
  .theme-onsus .logo-site img.skn-logo-symbol{height:44px;width:44px;min-width:44px}
  .theme-onsus .skn-logo-name{font-size:25px}
  .theme-onsus .tf-footer .ft-logo .logo-site img{width:150px}
}
/* ============ /LOGO + FOOTER PROFESSIONAL FIX 2026-10-28 ============ */

/* PATCH 2026-10-28: the header logo anchor itself carries skn-logo-lockup
   (its parent div carries logo-site), so the lockup must be flex on the
   anchor, and the header logo slot must not cap it at 185px. */
.theme-onsus a.skn-logo-lockup{display:flex;align-items:center;gap:11px;max-width:none;width:auto;text-decoration:none}
.theme-onsus .tf-header .logo-site{max-width:280px}

/* ============ APPROVED LOGO ONLY 2026-10-28 ============ */
/* The text lockup is REMOVED. Only the owner-supplied full logo artwork
   (skn-logo-full.png) is used for main identity, header and footer.
   The stacked square artwork needs height to read, so the header slot
   is sized by height, not squeezed to 60px. */
.theme-onsus .tf-header .logo-site img{height:105px;width:auto;max-width:none}
@media (max-width:767px){
  .theme-onsus .tf-header .logo-site img{height:72px}
}
/* PATCH 2026-10-28: social glyphs must read on their white circles even
   where the footer band is dark; keep them navy, white on hover. */
.theme-onsus .tf-footer .ft-bottom .social-list a{color:#102b50;background-color:#ffffff;border-color:#dbe3ec}
.theme-onsus .tf-footer .ft-bottom .social-list a:hover{color:#ffffff;background-color:#0d4f9b;border-color:#0d4f9b}
/* ============ /APPROVED LOGO ONLY 2026-10-28 ============ */

/* ============ MOBILE LAYOUT POLISH 2026-10-28 ============ */
/* Mobile nav bar (shown below 1199px, where the desktop nav bar is hidden):
   a proper navy bar instead of a plain text strip. */
.theme-onsus .musify-store-tools{background:#102b50;border:0;padding:0 16px;min-height:48px;scrollbar-width:none}
.theme-onsus .musify-store-tools::-webkit-scrollbar{display:none}
.theme-onsus .musify-store-tools a{color:#fff;text-decoration:none;padding:14px 2px}
.theme-onsus .musify-menu-toggle{color:#fff;font-weight:700}
.theme-onsus .musify-mobile-navigation a{color:#102b50;text-decoration:none;padding:13px 0;border-bottom:1px solid #eef2f6;font-size:15px;font-weight:600}
.theme-onsus .musify-mobile-navigation a:last-child{border-bottom:0}
@media(max-width:1199px){.theme-onsus .musify-store-tools{display:flex}}
@media(max-width:767px){
  /* Search on phones: the desktop search bar was hidden below 768px and
     no search icon existed on mobile, so phones could not search at all.
     Show the template's own search form as a full-width row under the
     header (category dropdown is decorative, so it stays hidden). */
  .theme-onsus .tf-header.style-3 .inner-header{padding:16px 0 14px}
  .theme-onsus .tf-header .inner-header .row>div.d-none.d-md-block{display:block !important;margin-top:14px}
  .theme-onsus .tf-header .form-search-product .select-category,.theme-onsus .tf-header .form-search-product .br-line{display:none}
  .theme-onsus .tf-header .form-search-product{padding:0 46px 0 18px}
  .theme-onsus .tf-header .form-search-product fieldset{flex:1 1 auto;min-width:0;max-width:none}
  .theme-onsus .tf-header .form-search-product fieldset input{width:100%;font-size:16px;padding:10px 0}
  /* Tighter, cleaner phone sections (desktop spacing untouched). */
  .theme-onsus .tf-sp-2{padding-top:36px;padding-bottom:36px}
  .theme-onsus section.has-bg-img.tf-sp-2{padding-top:32px;padding-bottom:32px}
  .theme-onsus .banner-product.style-3 .product-wrap h1{font-size:clamp(28px,8vw,40px);line-height:1.15}
  .theme-onsus .banner-product.style-3 .box-title .text-xl{font-size:clamp(22px,6.5vw,32px);line-height:1.25}
  .theme-onsus .s-banner .content-banner{padding:36px 0}
  .theme-onsus .s-banner .content-banner .title{font-size:clamp(28px,8vw,44px);line-height:1.15}
  .theme-onsus .card-product{padding:14px}
  /* Footer accordions were dead on phones: links hidden, headings with
     a + icon that did nothing (no toggle JS, no open rule in the template).
     The JS below makes them open; this CSS shows the opened column. */
  .theme-onsus .tf-footer .footer-heading-mobile{cursor:pointer;padding-block:12px}
  .theme-onsus .tf-footer .footer-col-block.open .tf-collapse-content{display:block}
  .theme-onsus .tf-footer .footer-col-block .tf-collapse-content{padding-bottom:4px}
  .theme-onsus .tf-footer .ft-body-inner{padding:32px 0}
  .theme-onsus .tf-footer .ft-body-center .ft-center{padding:28px 0}
  /* 16px inputs on phones so iOS does not zoom the page on focus. */
  .theme-onsus .musify-newsletter-row input{font-size:16px}
}
@media(max-width:575px){
  .theme-onsus .card-product{padding:12px}
}
/* ============ /MOBILE LAYOUT POLISH 2026-10-28 ============ */