/* Steel & Stud Pro - WordPress/WooCommerce integration styles.
Design tokens come from theme.css (:root vars). */
/* ---------- generic entry content (Elementor pages untouched) ---------- */
.ss-page-title{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 18px}
.ss-entry .entry-content{max-width:860px}
.ss-entry .entry-content p{margin:0 0 1em}
.ss-post-thumb img{width:100%;border-radius:14px;margin:14px 0 22px}
/* ---------- pagination ---------- */
.ss-pagination{margin-top:30px}
.ss-pagination ul.page-numbers{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.ss-pagination .page-numbers li a,.ss-pagination .page-numbers li span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line,#dbe4ee);background:#fff;color:var(--navy,#001D3D);font-weight:700;text-decoration:none;font-size:.9rem}
.ss-pagination .page-numbers li span.current{background:var(--navy,#001D3D);border-color:var(--navy,#001D3D);color:#fff}
.ss-pagination .page-numbers li a:hover{border-color:var(--orange,#F07300);color:var(--orange,#F07300)}
/* ---------- PLP filter form ---------- */
.ss-filter-form .fchips button{cursor:pointer}
.ss-filter-form input[type="search"]{padding:10px 12px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit}
.ss-filter-form input[type="search"]:focus{outline:2px solid var(--orange,#F07300)}
/* ---------- standard woo loop (non-building categories) ---------- */
.ss-std-shop ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;list-style:none;padding:0;margin:26px 0 0}
.ss-std-shop ul.products li.product{background:#fff;border:1px solid var(--line,#e5ecf4);border-radius:14px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 10px rgba(0,29,61,.05)}
.ss-std-shop ul.products li.product img{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover}
.ss-std-shop ul.products li.product .woocommerce-loop-product__title{font-size:.95rem;line-height:1.35;font-weight:800;color:var(--navy,#001D3D)}
.ss-std-shop ul.products li.product .price{color:var(--orange,#E05F00);font-weight:800}
.ss-std-shop ul.products li.product .button{margin-top:auto;background:var(--navy,#001D3D);color:#fff;border-radius:10px;padding:10px 14px;text-align:center;font-weight:700;text-decoration:none;border:0;cursor:pointer}
.ss-std-shop ul.products li.product .button:hover{background:var(--orange,#F07300)}
.ss-std-shop .woocommerce-result-count{color:var(--muted,#5c6f84);font-size:.86rem}
.ss-std-shop .woocommerce-ordering select{padding:9px 12px;border-radius:10px;border:1.5px solid var(--line,#dbe4ee);font:inherit}
.ss-std-shop nav.woocommerce-pagination ul{display:flex;gap:8px;list-style:none;border:0;margin:26px 0 0;padding:0}
.ss-std-shop nav.woocommerce-pagination ul li{border:0}
.ss-std-shop nav.woocommerce-pagination ul li a,.ss-std-shop nav.woocommerce-pagination ul li span{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid var(--line,#dbe4ee);background:#fff;color:var(--navy,#001D3D);font-weight:700}
.ss-std-shop nav.woocommerce-pagination ul li span.current{background:var(--navy,#001D3D);color:#fff;border-color:var(--navy,#001D3D)}
/* ---------- PDP: native variation form, styled to match the buy box ---------- */
.ss-buy-form{margin-top:14px}
.ss-buy-form form.cart{display:block}
.ss-buy-form table.variations{width:100%;border-collapse:collapse;margin:0 0 8px}
.ss-buy-form table.variations th.label{width:34%;text-align:left;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5c6f84);padding:8px 8px 8px 0;vertical-align:middle}
.ss-buy-form table.variations td.value{padding:6px 0}
.ss-buy-form table.variations select{width:100%;padding:12px 14px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit;font-weight:600;background:#fff}
.ss-buy-form table.variations select:focus{outline:2px solid var(--orange,#F07300)}
.ss-buy-form .reset_variations{font-size:.75rem;color:var(--muted,#5c6f84)}
.ss-buy-form .single_variation_wrap .woocommerce-variation-price{font-size:1.3rem;font-weight:800;color:var(--navy,#001D3D);margin:10px 0 4px}
.ss-buy-form .woocommerce-variation-availability{font-size:.82rem;color:var(--success,#0f8a4b)}
.ss-buy-form .quantity{display:none} /* buildings are qty-1 configured orders */
.ss-buy-form .single_add_to_cart_button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#FF8A1F,#E05F00);color:#fff;border:0;border-radius:12px;padding:16px 20px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 6px 14px -4px rgba(240,115,0,.35)}
.ss-buy-form .single_add_to_cart_button:hover{filter:brightness(1.05)}
.ss-buy-form .single_add_to_cart_button.disabled{opacity:.55;cursor:not-allowed}
.ss-buy-form .ss-buy-now{margin-top:10px;background:var(--navy,#001D3D)!important;color:#fff}
.ss-buy-form .ss-buy-now:hover{background:#00335F!important}
.ss-buy-form .added_to_cart{display:inline-block;margin-top:10px;font-weight:700;color:var(--success,#0f8a4b)}
.ss-buy-form p.stock{font-size:.82rem}
/* state banner */
.ss-state-banner{display:flex;gap:12px;align-items:center;background:linear-gradient(160deg,#001D3D,#00335F);color:#fff;border-radius:12px;padding:12px 16px;margin-top:14px}
.ss-state-banner .ic{font-size:1.2rem}
.ss-state-banner small{display:block;font-size:.62rem;letter-spacing:.12em;opacity:.7}
.ss-state-banner b{font-size:1rem}
.ss-state-banner [data-ss-state-note]{display:block;font-size:.72rem;opacity:.78;margin-top:2px;max-width:40ch}
.ss-state-banner .btn{margin-left:auto;white-space:nowrap}
/* share row + zip check */
.ss-share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ss-share-row .chip{cursor:pointer;border:1.5px solid var(--line,#dbe4ee);background:#fff}
.ss-zip-check{border:1.5px solid var(--line,#dbe4ee);border-radius:12px;padding:14px 16px;margin-top:14px;background:#fff}
.ss-zip-check form{display:flex;gap:8px;margin-top:8px}
.ss-zip-check input{flex:1;padding:11px 12px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit}
.ss-zip-check small{display:block;color:var(--muted,#5c6f84);margin-top:6px}
.ss-zip-msg{font-size:.84rem;margin:8px 0 0}
.ss-shortdesc{font-size:.9rem;color:var(--muted,#33475c);margin-top:10px}
/* pdp main image zoom */
.pdp-main{overflow:hidden;cursor:zoom-in}
.pdp-main.zoomed{cursor:zoom-out}
.pdp-main img{transition:transform .2s ease}
/* specs table */
.ss-specs-table{width:100%;border-collapse:collapse;margin-top:26px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,29,61,.06)}
.ss-specs-table th{width:220px;text-align:left;background:#f4f8fc;padding:13px 18px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy,#001D3D);border-bottom:1px solid var(--line,#e5ecf4);vertical-align:top}
.ss-specs-table td{padding:13px 18px;border-bottom:1px solid var(--line,#e5ecf4);font-size:.9rem;color:#33475c}
.ss-specs-table tr:nth-child(4) th,.ss-specs-table tr:nth-child(4) td{background:#fff8ef}
/* footprint stats */
.ss-foot-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:26px}
.ss-foot-stats>div{background:#fff;border:1px solid var(--line,#e5ecf4);border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,29,61,.05)}
.ss-foot-stats b{display:block;font-size:1.5rem;color:var(--orange,#E05F00)}
.ss-foot-stats span{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#5c6f84)}
.ss-foot-copy{max-width:760px;margin-top:20px;font-size:.95rem;color:#33475c}
/* FAQ details */
.ss-faq details{background:#fff;border:1px solid var(--line,#e5ecf4);border-radius:12px;margin-bottom:10px;overflow:hidden}
.ss-faq summary{cursor:pointer;padding:16px 18px;font-weight:800;color:var(--navy,#001D3D);list-style:none;position:relative;padding-right:44px}
.ss-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--orange,#F07300)}
.ss-faq details[open] summary::after{content:"–"}
.ss-faq .faq-body{padding:0 18px 16px;color:#33475c;font-size:.92rem}
/* reviews */
.ss-reviews #reviews{max-width:860px}
.ss-reviews .commentlist{list-style:none;padding:0}
.ss-reviews .comment_container{display:flex;gap:14px;background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;border:1px solid var(--line,#e5ecf4)}
.ss-reviews .comment_container img.avatar{width:44px;height:44px;border-radius:50%}
.ss-reviews .star-rating{color:var(--orange,#F07300)}
.ss-reviews #review_form .comment-form{display:grid;gap:12px}
.ss-reviews #review_form input,.ss-reviews #review_form textarea{padding:11px 12px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit;width:100%}
.ss-reviews #review_form .submit{background:var(--navy,#001D3D);color:#fff;border:0;border-radius:10px;padding:12px 22px;font-weight:800;cursor:pointer}
/* ---------- standard single product (non-building) ---------- */
.ss-std-product div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-top:20px}
.ss-std-product div.product .woocommerce-product-gallery{position:relative}
.ss-std-product div.product .woocommerce-product-gallery img{border-radius:14px}
.ss-std-product div.product .summary .price{font-size:1.4rem;font-weight:800;color:var(--orange,#E05F00)}
.ss-std-product div.product .summary form.cart .button,.ss-std-product .single_add_to_cart_button{background:linear-gradient(135deg,#FF8A1F,#E05F00);color:#fff;border:0;border-radius:12px;padding:14px 22px;font-weight:800;cursor:pointer}
.ss-std-product div.product .summary form.cart .quantity input{padding:11px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;width:76px}
.ss-std-product .woocommerce-tabs{grid-column:1/-1}
.ss-std-product .woocommerce-tabs ul.tabs{display:flex;gap:8px;list-style:none;padding:0;border-bottom:2px solid var(--line,#e5ecf4)}
.ss-std-product .woocommerce-tabs ul.tabs li a{display:inline-block;padding:11px 18px;font-weight:700;color:var(--muted,#5c6f84);text-decoration:none}
.ss-std-product .woocommerce-tabs ul.tabs li.active a{color:var(--navy,#001D3D);box-shadow:inset 0 -2px 0 var(--orange,#F07300)}
@media (max-width:860px){.ss-std-product div.product{grid-template-columns:1fr}}
/* ---------- cart & checkout (WooCommerce core pages, point 17) ---------- */
.woocommerce-cart main .wrap,.woocommerce-checkout main .wrap{max-width:1100px}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line,#e5ecf4)}
.woocommerce table.shop_table th{background:#f4f8fc;text-align:left;padding:13px 16px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--navy,#001D3D)}
.woocommerce table.shop_table td{padding:13px 16px;border-top:1px solid var(--line,#e5ecf4);font-size:.92rem}
.woocommerce table.shop_table img{width:64px;border-radius:8px}
.woocommerce .button,.woocommerce button.button{background:var(--navy,#001D3D);color:#fff;border:0;border-radius:10px;padding:12px 20px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.woocommerce .button:hover{background:var(--orange,#F07300);color:#fff}
.woocommerce .checkout-button,.woocommerce #place_order{background:linear-gradient(135deg,#FF8A1F,#E05F00)!important;font-size:1.02rem;width:100%;text-align:center}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{padding:12px 13px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit;width:100%}
.woocommerce form .form-row label{font-size:.8rem;font-weight:700;color:var(--navy,#001D3D)}
.woocommerce .cart_totals,.woocommerce #order_review{background:#fff;border:1px solid var(--line,#e5ecf4);border-radius:14px;padding:20px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:12px;padding:14px 18px;background:#eef6ff;border-left:4px solid var(--navy,#001D3D);margin:14px 0;list-style:none}
.woocommerce-error{background:#fdf0ef;border-left-color:#c0392b}
.woocommerce-message{background:#effaf3;border-left-color:var(--success,#0f8a4b)}
/* my account */
.woocommerce-MyAccount-navigation ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0}
.woocommerce-MyAccount-navigation li a{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line,#dbe4ee);text-decoration:none;font-weight:700;color:var(--navy,#001D3D)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--navy,#001D3D);color:#fff;border-color:var(--navy,#001D3D)}
/* search form */
.ss-searchform{display:flex;gap:8px}
.ss-searchform input[type=search]{flex:1;padding:12px 14px;border:1.5px solid var(--line,#dbe4ee);border-radius:10px;font:inherit}
/* misc */
.ss-longdesc{max-width:860px;padding-block:34px}
.crumbs{font-size:.8rem;color:var(--muted,#5c6f84);padding:14px 0}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--orange,#F07300)}
/* ============================================================
v17 additions, saved viewer, 3D showcase, SEO redesign,
popup kill (social proof). Added per client change list.
============================================================ */
.sprf{display:none!important}
/* Saved (favourites) floating button */
.ss-saved-fab{position:fixed;left:18px;bottom:18px;z-index:1150;display:none;align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:999px;background:var(--primary,#12223c);color:#fff;font:600 14px/1 system-ui,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.22);cursor:pointer}
.ss-saved-fab svg{color:#ff6b6b}
.ss-saved-fab b{background:var(--accent,#e06a1b);color:#fff;border-radius:999px;padding:2px 8px;font-size:12px}
.ss-saved-fab:hover{background:var(--accent,#e06a1b)}
@media(max-width:700px){.ss-saved-fab{left:10px;bottom:80px}}
/* Saved modal grid */
.ss-saved-wrap{padding:28px}
.ss-saved-wrap h2{margin:0 0 18px}
.ss-saved-wrap h2 span{color:var(--muted,#64748b);font-weight:600;font-size:.7em}
.ss-saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.ss-saved-card{border:1px solid var(--rule,#e2e8f0);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.ss-saved-card .im{display:block;aspect-ratio:4/3;background:#eef2f7}
.ss-saved-card .im img{width:100%;height:100%;object-fit:cover;display:block}
.ss-saved-card .bd{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.ss-saved-card .nm{font-weight:700;color:var(--ink,#12223c);text-decoration:none;line-height:1.25;font-size:.92rem}
.ss-saved-card .pr b{font-size:1.15rem;color:var(--primary,#12223c)}
.ss-saved-card .pr em{color:var(--muted,#64748b);font-style:normal;font-size:.75rem}
.ss-saved-card .ax{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto}
/* 3D showcase (replaces the broken live canvas) */
.s3d-showcase{position:relative;display:block;overflow:hidden;text-decoration:none;min-height:340px;height:100%;border-radius:var(--r-xl,18px);background:radial-gradient(130% 120% at 50% 0,#20406e 0,#0f2038 60%,#0b1830 100%);cursor:pointer}
@keyframes s3dspin{0%,100%{transform:rotateY(-16deg) rotateX(4deg)}50%{transform:rotateY(16deg) rotateX(4deg)}}
/* SEO section redesign */
.ss-seo2 .ss-seo2-head{max-width:820px;margin:0 auto 34px;text-align:center}
.ss-seo2 .ss-seo2-head .eyebrow{justify-content:center}
.ss-seo2 .ss-seo2-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:12px 0}
.ss-seo2 .ss-seo2-head .lede{color:var(--muted,#64748b)}
.ss-seo2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ss-seo2-card{background:#fff;border:1px solid var(--rule,#e2e8f0);border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(15,34,60,.04);transition:transform .18s,box-shadow .18s}
.ss-seo2-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,34,60,.1)}
.ss-seo2-card .ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#12223c,#20406e);color:#fff;margin-bottom:14px}
.ss-seo2-card h3{font-size:1.02rem;margin:0 0 8px;color:var(--ink,#12223c)}
.ss-seo2-card p{font-size:.86rem;line-height:1.55;color:var(--muted,#64748b);margin:0}
.ss-seo2-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
@media(max-width:980px){.ss-seo2-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ss-seo2-grid{grid-template-columns:1fr}}
/* ============================================================
v18 additions, cart drawer already handled in JS. Below:
SEO align, sticky filter sidebar, sticky PDP gallery + 3D hide,
search close button, category LIST view.
============================================================ */
/* #1 SEO intro paragraph centered */
.ss-seo2 .ss-seo2-head .lede{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
/* #6 category filter sidebar sticky; results column scrolls independently */
@media(min-width:961px){
.plp-cols{align-items:start}
.plp-cols .side-f{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.plp-cols .side-f::-webkit-scrollbar{width:8px}
}
/* #12 PDP: left gallery sticky, right buy column scrolls */
@media(min-width:981px){
.pdp{align-items:start}
.pdp .pdp-gal{position:sticky;top:90px;align-self:start}
}
/* #12 remove any residual 3D UI on product pages */
/* #3 search overlay close button + robust result thumbnails */
.search-ov .si{position:relative;display:flex;align-items:center}
.search-ov .search-close{margin-left:8px;display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:#eef2f7;color:#334155;cursor:pointer;flex:0 0 auto}
.search-ov .search-close:hover{background:var(--accent,#e06a1b);color:#fff}
.search-res a img{width:58px;height:44px;object-fit:cover;border-radius:8px;background:#eef2f7;flex:0 0 auto}
/* #5 category LIST view, clean two-column rows (was overlapping) */
.plp-grid.list{display:block!important}
.plp-grid.list .pcard{display:grid;grid-template-columns:280px 1fr;gap:0;margin-bottom:16px;align-items:stretch;overflow:hidden}
/* v26 fix: base theme sets .pcard .media{aspect-ratio:4/3 !important}. In list
view height:100% stretches the media to the row height, and aspect-ratio then
INFLATES its width past the 280px column, so the image overlapped & clipped
the title/price text. Force aspect-ratio:auto here so media stays exactly in
its 280px column. (Verified live: mediaW 316→280, text overlap 36px→0.) */
.plp-grid.list .pcard .media{aspect-ratio:auto !important;width:100%;max-width:100%;height:100%;min-height:200px;align-self:stretch;overflow:hidden;border-radius:16px 0 0 16px}
.plp-grid.list .pcard .media img{width:100%;height:100%;object-fit:cover}
.plp-grid.list .pcard .body{padding:20px 24px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.plp-grid.list .pcard .body .acts{margin-top:16px;max-width:420px}
@media(max-width:640px){
.plp-grid.list .pcard{grid-template-columns:1fr}
/* single column: media becomes a normal top banner, restore a fixed ratio
so the absolutely-positioned ![]()
has a height to fill. */
.plp-grid.list .pcard .media{aspect-ratio:16/10 !important;height:auto;min-height:0;border-radius:16px 16px 0 0}
}
/* ============================================================
v19 - My Account redesign, 3D carousel, filter redesign,
PDP buy-box beautify.
============================================================ */
/* ---------- #2 MY ACCOUNT ---------- */
.woocommerce-account .ss-page-title{display:none}
.woocommerce-account .ss-entry{max-width:1180px}
.ss-account{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:start}
.ss-acc-nav{background:#fff;border:1px solid var(--rule,#e2e8f0);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(15,34,60,.04);position:sticky;top:96px}
.ss-acc-me{display:flex;align-items:center;gap:12px;padding:6px 6px 16px;border-bottom:1px solid var(--rule,#eef2f7);margin-bottom:12px}
.ss-acc-me .av{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#12223c,#20406e);flex:0 0 auto}
.ss-acc-me .who{display:flex;flex-direction:column;overflow:hidden}
.ss-acc-me .who b{font-size:.95rem;line-height:1.2}
.ss-acc-me .who small{color:var(--muted,#64748b);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-acc-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ss-acc-nav li a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#1f2a44;text-decoration:none;font-weight:600;font-size:.9rem;transition:background .15s,color .15s}
.ss-acc-nav li a .ic{color:var(--muted,#64748b);display:inline-grid;place-items:center}
.ss-acc-nav li a:hover{background:#f1f5fb}
.ss-acc-nav li.is-active a,.ss-acc-nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{background:var(--primary,#12223c);color:#fff}
.ss-acc-nav li.is-active a .ic{color:#fff}
.ss-acc-support{margin-top:16px;padding:14px;border-radius:12px;background:#f1f5fb;display:flex;flex-direction:column;gap:2px}
.ss-acc-support b{font-size:.85rem}
.ss-acc-support a{color:var(--accent,#e06a1b);font-weight:800;text-decoration:none}
.ss-acc-support small{color:var(--muted,#64748b);font-size:.74rem}
.ss-acc-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--grad-navy,linear-gradient(135deg,#12223c,#20406e));color:#fff;border-radius:18px;padding:26px 28px;margin-bottom:22px}
.ss-acc-hero .eyebrow{color:#ffb066}
.ss-acc-hero h2{margin:8px 0 6px;color:#fff;font-size:1.7rem}
.ss-acc-hero .lede{color:#cddaf0;max-width:46ch;font-size:.92rem}
.ss-acc-stats{display:flex;gap:22px}
.ss-acc-stats div{text-align:center}
.ss-acc-stats b{display:block;font-size:1.6rem;font-weight:800}
.ss-acc-stats small{color:#aec4e2;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.ss-acc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ss-acc-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--rule,#e2e8f0);border-radius:14px;background:#fff;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s}
.ss-acc-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,34,60,.1);border-color:#cdd7e5}
.ss-acc-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#12223c,#20406e);flex:0 0 auto}
.ss-acc-card.is-accent .ic{background:linear-gradient(135deg,#e06a1b,#ffb066)}
.ss-acc-card .tx{display:flex;flex-direction:column}
.ss-acc-card .tx b{font-size:.98rem;color:#12223c}
.ss-acc-card .tx small{color:var(--muted,#64748b);font-size:.8rem}
.ss-acc-card .go{margin-left:auto;color:var(--muted,#94a3b8);font-size:1.2rem}
.ss-acc-help{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:#f1f5fb;border-radius:16px;padding:22px 24px}
.ss-acc-help b{display:block;font-size:1.05rem;color:#12223c}
.ss-acc-help span{color:var(--muted,#64748b);font-size:.88rem}
.ss-acc-help-cta{display:flex;gap:10px;flex-wrap:wrap}
/* Woo tables inside content (orders, addresses) */
.ss-acc-content .woocommerce-MyAccount-content{max-width:none}
.ss-acc-content table.shop_table{border-radius:12px;overflow:hidden;border:1px solid var(--rule,#e2e8f0)}
@media(max-width:860px){.ss-account{grid-template-columns:1fr}.ss-acc-nav{position:static}.ss-acc-cards{grid-template-columns:1fr}}
/* ---------- #4 3D SHOWCASE CAROUSEL (overrides the single-image rules) ---------- */
@keyframes s3dspin{0%,100%{transform:translate(-50%,-50%) rotateY(-15deg) rotateX(3deg)}50%{transform:translate(-50%,-50%) rotateY(15deg) rotateX(3deg)}}
@keyframes s3dglow{0%,100%{opacity:.5}50%{opacity:.9}}
.s3d-badge3d{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(6,14,28,.55);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;backdrop-filter:blur(5px)}
.s3d-badge3d i{width:8px;height:8px;border-radius:999px;background:#37d67a;box-shadow:0 0 0 0 rgba(55,214,122,.7);animation:s3dpulse 1.8s infinite}
@keyframes s3dpulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.6)}70%{box-shadow:0 0 0 8px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
/* ---------- #7 + #13 CATEGORY FILTER redesign ---------- */
.side-f{background:#fff;border:1px solid var(--rule,#e2e8f0);border-radius:18px;padding:20px;box-shadow:0 1px 2px rgba(15,34,60,.04)}
.side-f h3{font-size:1.05rem;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.side-f h3::before{content:"";width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#e06a1b,#ffb066);-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat;mask:url("data:image/svg+xml;utf8,") center/70% no-repeat}
.side-f .fg{padding:16px 0;border-top:1px solid var(--rule,#eef2f7)}
.side-f .fg:first-of-type{border-top:0}
.side-f .fg>span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#64748b);margin-bottom:10px}
.side-f .fchips{display:flex;flex-wrap:wrap;gap:7px}
.side-f .fchips button{appearance:none;cursor:pointer;border:1.5px solid #dde3ea;background:#fff;color:#334155;border-radius:999px;padding:7px 13px;font-size:.82rem;font-weight:600;line-height:1;transition:all .15s}
.side-f .fchips button:hover{border-color:var(--accent,#e06a1b);color:var(--accent,#e06a1b)}
.side-f .fchips button[aria-pressed="true"]{background:var(--primary,#12223c);border-color:var(--primary,#12223c);color:#fff}
.side-f input[type="search"]{width:100%;border:1.5px solid #dde3ea;border-radius:11px;padding:11px 13px;font-size:.9rem;transition:border-color .15s}
.side-f input[type="search"]:focus{border-color:var(--accent,#e06a1b);outline:none}
.side-f .range-wrap{display:grid;gap:8px}
.side-f .range-wrap output{font-weight:800;color:var(--primary,#12223c);font-size:.9rem}
.side-f input[type="range"]{accent-color:var(--accent,#e06a1b)}
.side-f .btn-primary{box-shadow:0 8px 20px rgba(224,106,27,.28)}
/* ---------- #8 PDP BUY-BOX beautify ---------- */
.ss-pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:14px 0 6px;padding:16px 18px;border:1px solid var(--rule,#e6ebf2);border-radius:14px;background:linear-gradient(180deg,#f8fbff,#fff)}
.ss-pdp-price .ss-price-lead{width:100%;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#64748b)}
.ss-pdp-price .ss-price-lead-set{color:var(--success,#0f8a4b)}
.ss-pdp-price .price,.ss-pdp-price ins,.ss-pdp-price .amount{font-family:var(--display,inherit);font-size:1.9rem;font-weight:800;color:var(--primary,#12223c)}
.ss-pdp-price del .amount{font-size:1.1rem;color:var(--muted,#94a3b8)}
.ss-pdp-price .save-badge{width:100%;font-size:.78rem;font-weight:600;color:var(--accent,#e06a1b)}
.ss-state-banner{display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--grad-navy,linear-gradient(135deg,#12223c,#20406e));color:#fff}
.ss-state-banner .ic{font-size:1.3rem}
.ss-state-banner small{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#9fb6d6}
.ss-state-banner b{font-size:1.02rem}
.ss-state-banner [data-ss-state-note]{display:block;font-size:.74rem;color:#c7d6ec;margin-top:2px}
.ss-state-banner .btn{margin-left:auto;background:#fff;color:var(--primary,#12223c);border-color:#fff;white-space:nowrap}
.ss-state-banner .btn:hover{background:var(--accent,#e06a1b);color:#fff;border-color:var(--accent,#e06a1b)}
.single-product .ss-buy-form .single_add_to_cart_button,.single-product .ss-buy-form button.single_add_to_cart_button{width:100%;padding:15px 22px !important;font-size:1.02rem !important;border-radius:12px !important;font-weight:800 !important;box-shadow:0 10px 24px rgba(224,106,27,.3)}
.single-product .ss-buy-form .quantity input{border-radius:10px;border:1.5px solid #dde3ea;height:46px}
.single-product .ss-buy-form .variations select{border-radius:11px;border:1.5px solid #dde3ea;padding:11px 12px;font-size:.92rem}
/* ============================================================
v21, inner-page heading visibility, account polish, sticky
bulletproofing, use-case list compact, compare-similar visible.
============================================================ */
/* #2 + #3, inner-page navy hero heading must be WHITE (was dark/invisible) */
.sec-navy,.sec-navy .display,.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy .ss-page-title{color:#fff}
.sec-navy .lede,.sec-navy p{color:#cddaf0}
.sec-navy .eyebrow{color:#ffb066}
.pg-main.sec-navy h1,.grid-tex h1,.grid-tex h2{color:#fff !important}
/* #5 + #9, bulletproof sticky (filter sidebar + PDP gallery).
NOTE: if Elementor Pro is still active it wraps the page and can break these;
the mu-plugin removes Elementor and lets these work. */
@media(min-width:981px){
.plp-cols{align-items:start !important}
.plp-cols .side-f{position:sticky !important;top:96px;align-self:start !important;max-height:calc(100vh - 116px);overflow-y:auto}
.pdp{align-items:start !important}
.pdp .pdp-gal{position:sticky !important;top:96px;align-self:start !important}
}
/* #10, cap the use-case switcher so long lists don't dominate the buy box */
.ss-fam-block .ss-fam-btns{max-height:196px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.ss-fam-block .ss-fam-btns::-webkit-scrollbar{width:7px}
.ss-fam-block .ss-fam-btns::-webkit-scrollbar-thumb{background:#c7d2e0;border-radius:6px}
/* #8, related "Compare similar buildings" cards must be visible (reveal fallback) */
.sec-alt[aria-label="Related buildings"] .pcard{opacity:1 !important;transform:none !important}
/* #4 - My Account polish: wider nav, roomier cards, cleaner content */
.woocommerce-account main{background:var(--bg,#f4f7fb)}
.ss-account{grid-template-columns:300px 1fr;gap:28px;max-width:1160px;margin:0 auto;padding:8px 0 20px}
.ss-acc-hero{padding:30px 32px}
.ss-acc-hero h2{font-size:1.85rem}
.ss-acc-cards{gap:16px}
.ss-acc-card{padding:20px}
.ss-acc-nav li a{font-size:.92rem;white-space:normal}
.ss-acc-content .woocommerce-message,.ss-acc-content .woocommerce-error,.ss-acc-content .woocommerce-info{border-radius:12px}
@media(max-width:860px){.ss-account{grid-template-columns:1fr}}
/* ============================================================
v22, collapsible use-case switcher + add-to-cart toast
============================================================ */
/* #10, use-case switcher collapses by default when long */
.ss-fam-details{margin:16px 0;border:1px solid var(--rule,#e2e8f0);border-radius:14px;padding:0;overflow:hidden}
.ss-fam-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary,#12223c);background:#f6f9fd}
.ss-fam-details>summary::-webkit-details-marker{display:none}
.ss-fam-details>summary::after{content:"▾";margin-left:auto;transition:transform .2s;font-size:14px;color:var(--muted,#64748b)}
.ss-fam-details[open]>summary::after{transform:rotate(180deg)}
.ss-fam-details .ss-fam-count{color:var(--accent,#e06a1b)}
.ss-fam-details .ss-fam-btns{max-height:230px;overflow-y:auto;padding:14px 16px;gap:8px}
/* #7/#8 - "Added to cart" confirmation toast */
.ss-woo-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:2000;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:var(--primary,#12223c);color:#fff;font-weight:700;font-size:.92rem;box-shadow:0 14px 34px rgba(0,0,0,.28);opacity:0;transition:opacity .28s,transform .28s;pointer-events:none}
.ss-woo-toast svg{color:#37d67a}
.ss-woo-toast.on{opacity:1;transform:translate(-50%,0)}
/* ============================================================
v23, hide duplicate Woo variation price, theme PDP buttons,
theme the Cart / Checkout / Shop so no "default Woo" look.
============================================================ */
/* #7 - WooCommerce shows the selected variation's price again below the form.
The top price block already shows it, so hide this duplicate. */
.single-product .woocommerce-variation-price,
.single-product .single_variation .price,
.single-product .ss-buy-form .price{display:none !important}
.single-product .woocommerce-variation-availability{display:none !important}
/* #4 - ONE add-to-cart + ONE buy-now, both in theme colours */
.single-product .ss-buy-form .single_add_to_cart_button,
.single-product .ss-buy-form button.single_add_to_cart_button{
display:block;width:100%;margin-top:10px;padding:15px 22px !important;font-size:1.02rem !important;
border-radius:12px !important;font-weight:800 !important;background:var(--accent,#e06a1b) !important;color:#fff !important;
border:0 !important;box-shadow:0 10px 24px rgba(224,106,27,.3);text-align:center}
.single-product .ss-buy-form .single_add_to_cart_button:hover{background:var(--accent-dark,#c45f00) !important}
.single-product .ss-buy-now,.single-product .btn-buynow{
display:block;width:100%;margin-top:10px;padding:15px 22px;font-size:1.02rem;border-radius:12px;font-weight:800;
background:var(--primary,#12223c);color:#fff;border:0;text-align:center;cursor:pointer}
.single-product .ss-buy-now:hover{background:#1b3355}
.single-product .ss-buy-form .quantity{margin-bottom:6px}
/* ---------- CART page themed ---------- */
.woocommerce-cart .ss-entry,.woocommerce-checkout .ss-entry{max-width:1160px}
.woocommerce-cart table.cart{border:1px solid var(--rule,#e2e8f0);border-radius:14px;overflow:hidden;background:#fff}
.woocommerce-cart table.cart th{background:#f6f9fd;font-family:var(--display,inherit);color:var(--ink,#12223c);padding:14px}
.woocommerce-cart table.cart td{padding:16px;vertical-align:middle;border-top:1px solid var(--rule,#eef2f7)}
.woocommerce-cart table.cart img{width:84px;border-radius:10px}
.woocommerce-cart .cart_totals{background:#fff;border:1px solid var(--rule,#e2e8f0);border-radius:14px;padding:22px}
.woocommerce-cart .cart_totals h2{margin-top:0}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
background:var(--accent,#e06a1b) !important;color:#fff !important;border-radius:11px !important;
font-weight:800 !important;padding:13px 22px !important;border:0 !important;box-shadow:0 8px 20px rgba(224,106,27,.25)}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--accent-dark,#c45f00) !important}
.woocommerce .button.wc-backward,.woocommerce button[name="update_cart"]{background:#eef2f7 !important;color:#12223c !important;box-shadow:none !important}
/* ---------- CHECKOUT page themed ---------- */
.woocommerce-checkout .col2-set,.woocommerce-checkout #customer_details{gap:24px}
.woocommerce-checkout h3{font-family:var(--display,inherit);color:var(--ink,#12223c)}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection,
.woocommerce-checkout select{border:1.5px solid #dde3ea !important;border-radius:11px !important;padding:11px 12px !important;min-height:46px}
.woocommerce-checkout #order_review,.woocommerce-checkout .woocommerce-checkout-review-order{
background:#fff;border:1px solid var(--rule,#e2e8f0);border-radius:16px;padding:22px}
.woocommerce-checkout #place_order{background:var(--accent,#e06a1b) !important;width:100%;padding:16px !important;font-size:1.05rem !important;border-radius:12px !important;font-weight:800 !important}
.woocommerce-checkout table.shop_table{border:0}
.woocommerce .woocommerce-info,.woocommerce-message{border-top-color:var(--accent,#e06a1b);border-radius:10px}
/* ---------- SHOP page (archive already themed by archive-product.php) ---------- */
.woocommerce-shop .ss-page-title{display:none}
/* ============================================================
v25 - THE STICKY ROOT-CAUSE FIX (verified live).
A plugin (Elementor/Woo) overrides body/html to overflow-x:hidden, which
turns into a scroll container and BREAKS position:sticky everywhere
(category filter sidebar + PDP image gallery). overflow-x:clip stops
horizontal scroll WITHOUT creating a scroll container, so native sticky works.
============================================================ */
html,body{overflow-x:clip !important}
/* ============================================================
v28 - MY ACCOUNT layout fix (verified live: ACC 860→1124,
NAV 90→300, CONTENT 362→796).
Two things were breaking it:
1) WooCommerce's DEFAULT stylesheet floats the account columns
(.woocommerce-MyAccount-navigation{float:left;width:35%} and
.woocommerce-MyAccount-content{float:right;width:65%}) which fought
our CSS grid, the nav collapsed to ~90px (so "Need a hand?" + phone
wrapped character-by-character) and the content shrank to ~360px,
leaving the big empty gap on the right.
2) The theme's .entry-content prose max-width clamped the whole account
area to ~860px so it never used the full page width.
Fix: neutralise the Woo floats/percent-widths and let the account fill. */
.woocommerce-account .entry-content,
.woocommerce-account .entry-content .woocommerce,
.woocommerce-account .woocommerce,
.ss-account{max-width:1160px !important;width:100% !important}
.ss-account .woocommerce-MyAccount-navigation,
.ss-account .woocommerce-MyAccount-content,
.ss-account .ss-acc-nav,
.ss-account .ss-acc-content{float:none !important;width:auto !important;max-width:none !important}
/* ============================================================
v32 - PDP buy buttons unified with the theme button system,
plus WPClever variable-product button ("VIEW IN 3D …") restyle.
============================================================ */
/* Theme simple-product "Add to cart" + "Buy Now" (in .ss-buy-form) */
.ss-buy-form .single_add_to_cart_button,
.ss-buy-form [data-ss-buynow],
.ss-buy-form .ss-buy-now,
.ss-buy-form .btn-buynow{
font-family:var(--display,'Plus Jakarta Sans',sans-serif) !important;
font-weight:800 !important;font-size:1.02rem !important;letter-spacing:-.01em !important;
width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
border:0 !important;border-radius:var(--r,12px) !important;padding:16px 22px !important;
line-height:1.2 !important;text-transform:none !important;cursor:pointer;
transition:transform .2s var(--ease,ease),box-shadow .25s,filter .2s !important;
}
.ss-buy-form .single_add_to_cart_button{
background:var(--grad-molten,linear-gradient(135deg,#FF8A1F,#E05F00)) !important;color:#fff !important;
box-shadow:0 8px 22px -6px rgba(240,115,0,.45) !important;
}
.ss-buy-form .single_add_to_cart_button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ss-buy-form [data-ss-buynow],
.ss-buy-form .ss-buy-now,
.ss-buy-form .btn-buynow{
margin-top:10px;
background:var(--grad-navy,linear-gradient(135deg,#12223c,#20406e)) !important;color:#fff !important;
box-shadow:0 6px 18px -6px rgba(0,29,61,.4) !important;
}
.ss-buy-form [data-ss-buynow]:hover,
.ss-buy-form .ss-buy-now:hover,
.ss-buy-form .btn-buynow:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* WPClever variable-product add-to-cart button ("VIEW IN 3D (Customize your
Build - Size - Color)"), force it onto the theme's molten button look. */
.wpcev-variation-add-to-cart .single_add_to_cart_button,
.single_add_to_cart_button.wpcev-btn,
button.wpcev-btn,
.wpcev-btn.button{
font-family:var(--display,'Plus Jakarta Sans',sans-serif) !important;
font-weight:800 !important;font-size:1.02rem !important;letter-spacing:-.01em !important;
text-transform:none !important;line-height:1.25 !important;
background:var(--grad-molten,linear-gradient(135deg,#FF8A1F,#E05F00)) !important;color:#fff !important;
border:0 !important;border-radius:var(--r,12px) !important;padding:16px 22px !important;
box-shadow:0 8px 22px -6px rgba(240,115,0,.45) !important;
transition:transform .2s,filter .2s !important;
}
.wpcev-variation-add-to-cart .single_add_to_cart_button:hover,
.single_add_to_cart_button.wpcev-btn:hover,
button.wpcev-btn:hover{transform:translateY(-2px) !important;filter:brightness(1.05) !important}
/* v34, cart drawer image slot: neutral tile while loading / if a product has
no image, so the row never shows a broken-image icon. */
.cline img{background:var(--soft,#e4e8ed)}
.cline .cline-ph{display:block;width:86px;height:62px;border-radius:8px;background:linear-gradient(135deg,var(--soft,#dbe4f1),#fff)}
/* v45, the theme has a global lazy-load fade rule:
img[loading=lazy]:not(.ld){opacity:.001;filter:blur(6px)}
which keeps an image invisible until a lazy-load script adds the .ld class.
Cart-drawer thumbnails must NEVER be hidden by it (the .ld class may never be
added inside the dynamically-rendered drawer), regardless of code path or a
stale cached script. Force every cart image fully visible + un-blurred. */
#cartdw img,
#cartdw .cline img,
#cartdw .items img,
.cart-drawer .cline img,
.cline img{opacity:1 !important;filter:none !important}
/* v145, and the same rule was hiding the product gallery too.
`img[loading=lazy]:not(.ld){opacity:.001;filter:blur(6px)}` makes every lazy
image invisible until a script adds `.ld`. When that reveal does not complete
, script error, a throttled tab, a slow file, the visitor is left looking at
an empty grey box with a perfectly good photograph loaded behind it. That is
what the product gallery thumbnails were showing.
Exempting one more region each time it bites is not a fix. An image must not
depend on JavaScript to be seen at all, so the gate goes: pictures paint as
they arrive, which is what native lazy-loading already does well. The `.ld`
class still lands and still removes the blur; it is simply no longer the
difference between visible and invisible. */
img[loading="lazy"]:not(.ld){opacity:1;filter:none}
/* ============================================================
v41 - 3-dimension (W×L×H) state-priced products: theme-native buy area.
WooCommerce's add-to-cart form is not rendered for these (so the WPClever
plugin has nothing to hook / tear apart). The customer picks their state in
the "Change" popup → exact price + 3D-builder link update instantly, and the
sole CTA is a theme "View in 3D" button. No dropdown / add-to-cart / buy-now.
============================================================ */
.ss-3d-buy{margin-top:16px}
.ss-3d-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--display,'Plus Jakarta Sans',sans-serif);font-weight:800;font-size:1.05rem;
padding:17px 22px;border-radius:var(--r,12px)}
.ss-3d-cta svg{flex:0 0 auto}
.ss-3d-hint{font-size:.82rem;color:var(--muted,#5c6f84);margin:10px 2px 0;line-height:1.5}
.ss-pdp-price .ss-price-now{display:block;font-family:var(--display,'Plus Jakarta Sans',sans-serif);
font-weight:800;font-size:1.9rem;color:var(--primary,#12223c);line-height:1.1;margin-top:2px}
.ss-pdp-price .ss-price-state{display:block;font-size:.8rem;color:var(--success,#0f8a4b);font-weight:700;margin-top:2px}
/* v49, home "Live 3D" preview: single static render that fills the viewer box
(same height/width as the old rotating carousel) and links to the 3D builder. */
.s3d-home .viewer .s3d-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.s3d-home .viewer{cursor:pointer}
@media(max-width:900px){.s3d-home .viewer{aspect-ratio:3/2}}
/* v51 hid qty +/- in the HTTP Basic Auth (staging) no-AJAX mode. v271: qty now
works there too (?ss_cart_qty endpoint via a hidden frame), so it stays visible. */
/* ---- Size-only variable products (25x50 type): hide the qty selector, a
building is reserved as a single unit; qty stays 1 for add-to-cart (v66+). ---- */
.ss-var-simple .quantity{display:none!important}
/* ---- Category filter: dual-handle min–max range slider (width/length/leg) ---- */
.side-f .ss-range{position:relative;height:30px;margin-top:10px}
.ss-range-rail{position:absolute;left:2px;right:2px;top:12px;height:5px;border-radius:99px;background:var(--rule,#e6ebf2)}
.ss-range-fill{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent,#e06a1b),#ff9838)}
.ss-range input[type=range]{position:absolute;left:0;top:6px;width:100%;height:18px;margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}
.ss-range input[type=range]::-webkit-slider-runnable-track{background:transparent;border:none}
.ss-range input[type=range]::-moz-range-track{background:transparent;border:none}
.ss-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--accent,#e06a1b);box-shadow:0 2px 6px rgba(16,34,60,.22);cursor:grab;margin-top:-8px}
.ss-range input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.ss-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--accent,#e06a1b);box-shadow:0 2px 6px rgba(16,34,60,.22);cursor:grab}
.ss-range-out{display:inline-block;margin-top:8px;font-family:var(--display,inherit);font-weight:800;font-size:.84rem;color:var(--primary,#12223c);background:var(--soft,#eef3fa);border-radius:99px;padding:3px 12px}
/* ---- Home "Interactive Design Tools" navy section: fix washed-out card text ----
The .sec-navy section sets a light text colour (#dbe4f1) for the navy background;
the WHITE .tool3 / .feat4 cards inside were inheriting it on any element without an
explicit colour (e.g. the card title), making the text look faded on white. Force
dark, legible colours on those cards (colour only, layout unchanged). ---- */
.sec-navy .tool3 h3{color:var(--ink,#1a1a1a)!important}
.sec-navy .tool3 p{color:#2f3a46!important}
.sec-navy .tool3 .kick{color:var(--accent,#f07300)!important}
.sec-navy .tool3 .cta{color:var(--primary,#004280)!important}
.sec-navy .feat4>div b{color:var(--ink,#1a1a1a)!important}
.sec-navy .feat4>div small{color:#2f3a46!important}
/* ============================================================
Product-page popup QUOTE FORM (ss-quote.js / inc/pdp-quote.php)
============================================================ */
.ssq-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(0,29,61,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
opacity:0;transition:opacity .3s ease}
.ssq-overlay[hidden]{display:none}
.ssq-overlay.open{opacity:1}
.ssq-modal{position:relative;width:100%;max-width:468px;max-height:calc(100vh - 40px);overflow:auto;
background:var(--surface,#fff);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,29,61,.6);
transform:translateY(48px) scale(.98);opacity:.4;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .38s ease}
.ssq-overlay.open .ssq-modal{transform:translateY(0) scale(1);opacity:1}
.ssq-close{position:absolute;top:12px;right:14px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;
background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.ssq-close:hover{background:rgba(255,255,255,.32)}
.ssq-head{background:linear-gradient(135deg,#001D3D,#004280);color:#fff;padding:24px 26px 20px;border-radius:20px 20px 0 0}
.ssq-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FF9838;
background:rgba(240,115,0,.14);border:1px solid rgba(255,152,56,.35);border-radius:99px;padding:4px 12px}
.ssq-head h3{margin:12px 0 6px;font-size:1.5rem;font-weight:800;color:#fff;line-height:1.15}
.ssq-sub{margin:0;font-size:.92rem;color:#c7d6ea;line-height:1.5}
.ssq-sub b{color:#fff}
.ssq-form{padding:20px 26px 24px}
.ssq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ssq-field{display:flex;flex-direction:column;gap:5px}
.ssq-field.ssq-full{grid-column:1 / -1}
.ssq-field label{font-size:.78rem;font-weight:700;color:var(--ink,#1a1a1a)}
.ssq-field label span{color:var(--accent,#f07300)}
.ssq-field label .ssq-opt{color:var(--muted,#64748b);font-weight:600}
.ssq-field input,.ssq-field select,.ssq-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;
padding:11px 13px;border:1.5px solid var(--rule,#e6ebf2);border-radius:10px;background:#fff;color:var(--ink,#1a1a1a);transition:border-color .15s,box-shadow .15s}
.ssq-field input:focus,.ssq-field select:focus,.ssq-field textarea:focus{outline:none;border-color:var(--accent,#f07300);box-shadow:0 0 0 3px rgba(240,115,0,.14)}
.ssq-field textarea{resize:vertical;min-height:52px}
.ssq-submit{width:100%;margin-top:16px;border:0;cursor:pointer;font-family:var(--display,inherit);font-weight:800;font-size:1.02rem;color:#fff;
padding:14px 18px;border-radius:12px;background:linear-gradient(120deg,#F07300,#FF8F1F);box-shadow:0 12px 26px -8px rgba(240,115,0,.55);transition:transform .12s,box-shadow .2s,opacity .2s}
.ssq-submit:hover{transform:translateY(-1px);box-shadow:0 16px 32px -8px rgba(240,115,0,.6)}
.ssq-submit:disabled{opacity:.65;cursor:default;transform:none}
.ssq-fine{margin:12px 2px 0;font-size:.75rem;color:var(--muted,#64748b);line-height:1.5;text-align:center}
.ssq-msg{margin:10px 0 0;font-size:.85rem;font-weight:600;color:#b3261e;background:#fff2f2;border:1px solid #f5c2c2;border-radius:10px;padding:10px 12px}
.ssq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* success state */
.ssq-done{padding:40px 30px 34px;text-align:center}
.ssq-check{width:70px;height:70px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 12px 30px -8px rgba(22,163,74,.55)}
.ssq-done h3{margin:0 0 8px;font-size:1.5rem;font-weight:800;color:var(--ink,#12223c)}
.ssq-done p{margin:0 0 20px;color:var(--muted,#52606d);line-height:1.55}
@media(max-width:520px){
.ssq-overlay{align-items:flex-end;padding:0}
.ssq-modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;transform:translateY(100%)}
.ssq-head{border-radius:20px 20px 0 0}
.ssq-grid{grid-template-columns:1fr}
}
/* ============================================================
v82 - Client spec: product-page conversion overhaul.
Primary CTAs (Quote + 3D) · secondary buy group · use-case cards ·
designer grid · product reviews · contact block · customer stories ·
sticky CTA. Built on the theme's own tokens so it reads as one system.
============================================================ */
/* ---- §2/§6 Primary conversion CTAs (dominant, above the fold) ---- */
.ss-primary-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ss-primary-cta .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;padding:11px 14px}
.ss-primary-cta .btn svg{width:17px;height:17px}
.ss-cta-quote{box-shadow:0 12px 28px -10px rgba(240,115,0,.5)}
.ss-primary-cta-sub{margin:9px 2px 0;font-size:.82rem;color:var(--muted,#52606d);text-align:center}
@media(max-width:520px){.ss-primary-cta{grid-template-columns:1fr}}
/* ---- §10 Secondary "buy online" group (functional, deliberately lower) ---- */
.ss-buy-secondary{margin-top:20px;padding:16px;border:1px dashed var(--rule,#dbe4f1);border-radius:14px;background:var(--bg,#f4f7fb)}
.ss-buy-sec-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.ss-buy-sec-head span{font-family:var(--display,inherit);font-weight:800;font-size:.9rem;color:var(--ink,#1a1a1a)}
.ss-buy-sec-head small{font-size:.76rem;color:var(--muted,#52606d)}
.ss-buy-secondary .ss-3d-cta,.ss-buy-secondary .single_add_to_cart_button{font-size:.98rem}
/* ---- §3 Use-case card grid ---- */
.ss-uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:22px}
.ss-uc-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
background:var(--surface,#fff);border:2px solid var(--rule,#dbe4f1);border-radius:16px;padding:18px 16px;
font:inherit;color:var(--ink,#1a1a1a);transition:border-color .16s,box-shadow .18s,transform .12s}
.ss-uc-card:hover{border-color:var(--rule-dark,#a9bcd6);box-shadow:var(--shadow-sm,0 2px 4px rgba(0,66,128,.08));transform:translateY(-1px)}
.ss-uc-card:focus-visible{outline:3px solid rgba(240,115,0,.4);outline-offset:2px}
.ss-uc-ic{display:inline-flex;color:var(--primary,#004280);line-height:1}
.ss-uc-ic svg{width:26px;height:26px}
.ss-uc-card.is-selected .ss-uc-ic{color:var(--accent,#f07300)}
.ss-uc-name{font-family:var(--display,inherit);font-weight:800;font-size:1rem}
.ss-uc-desc{font-size:.82rem;color:var(--muted,#52606d);line-height:1.4}
.ss-uc-check{position:absolute;top:12px;right:12px;font-family:var(--display,inherit);font-size:.72rem;font-weight:800;color:#fff;background:var(--accent,#f07300);border-radius:99px;padding:3px 9px;opacity:0;transform:scale(.85);transition:.16s}
.ss-uc-card.is-selected{border-color:var(--accent,#f07300);background:var(--accent-soft,#fff1e0);box-shadow:0 10px 26px -12px rgba(240,115,0,.5)}
.ss-uc-card.is-selected .ss-uc-check{opacity:1;transform:scale(1)}
.ss-uc-extra{display:none}
.ss-uc-grid.show-all .ss-uc-extra{display:flex}
.ss-uc-more{margin-top:14px}
.ss-uc-selected{margin-top:14px;font-size:.9rem;color:var(--primary,#004280);background:var(--soft,#dbe4f1);border-radius:10px;padding:10px 14px;display:inline-block}
/* ---- §5 Designer / builder grid ---- */
.ss-designers{padding-block:44px}
.ss-dz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}
.ss-dz-card{position:relative;display:flex;flex-direction:column;gap:8px;
background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:18px;padding:22px 20px;
box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06));transition:transform .14s,box-shadow .2s,border-color .16s}
.ss-dz-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 8px 16px rgba(0,66,128,.1));border-color:var(--rule-dark,#a9bcd6)}
.ss-dz-card:focus-visible{outline:3px solid rgba(0,66,128,.35);outline-offset:2px}
.ss-dz-card.is-featured{border:2px solid var(--primary,#004280);background:linear-gradient(180deg,#fff, #f4f8ff)}
.ss-dz-tag{align-self:flex-start;font-family:var(--display,inherit);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--primary,#004280);background:var(--soft,#dbe4f1);border-radius:99px;padding:3px 10px}
.ss-dz-card.is-featured .ss-dz-tag{color:#fff;background:var(--accent,#f07300)}
.ss-dz-ic{display:inline-flex;color:var(--primary,#004280);line-height:1}
.ss-dz-ic svg{width:30px;height:30px}
.ss-dz-card.is-featured .ss-dz-ic{color:var(--accent,#f07300)}
.ss-dz-name{font-family:var(--display,inherit);font-size:1.12rem;color:var(--ink,#1a1a1a)}
.ss-dz-desc{font-size:.86rem;color:var(--muted,#52606d);line-height:1.5;flex:1}
.ss-dz-go{font-family:var(--display,inherit);font-weight:800;font-size:.9rem;color:var(--accent-dark,#c45f00)}
/* ---- §7 Product reviews, attractive TEASER (full reviews live lower on page) ---- */
.ss-proof .stars{color:var(--accent,#f07300);letter-spacing:2px}
.ss-state-pick{display:flex;align-items:center;gap:10px;margin:12px 0 12px;padding:9px 12px;border:1px solid var(--rule,#dbe4f1);border-radius:12px;background:var(--bg,#f7fafd)}
.ss-state-pick .ic{display:inline-flex;color:var(--primary,#004280)}
.ss-state-pick-tx{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.ss-state-pick-tx small{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#52606d);font-weight:700}
.ss-state-pick-tx b{font-family:var(--display,inherit);font-size:.92rem;color:var(--ink,#1a1a1a)}
.ss-height-pick{margin:12px 0 0;padding:12px 14px;border:1px solid var(--rule,#dbe4f1);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ss-hp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ss-hp-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--bg,#f4f7fb);color:var(--primary,#004280);flex:none}
.ss-hp-lab{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.ss-hp-lab small{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#52606d);font-weight:700}
.ss-hp-lab b{font-family:var(--display,inherit);font-size:.92rem;color:var(--ink,#1a1a1a)}
.ss-hp-sel{position:relative;flex:0 1 230px;min-width:190px}
.ss-hp-sel::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--primary,#004280);border-bottom:2px solid var(--primary,#004280);transform:rotate(45deg);pointer-events:none}
.ss-hp-sel select{width:100%;-webkit-appearance:none;appearance:none;margin:0;padding:10px 36px 10px 12px;border:1.5px solid var(--rule,#dbe4f1);border-radius:10px;background:#fff;font:inherit;font-size:.88rem;font-weight:700;color:var(--ink,#1a1a1a);cursor:pointer;line-height:1.2}
.ss-hp-sel select:hover{border-color:var(--primary,#004280)}
.ss-hp-sel select:focus{outline:none;border-color:var(--primary,#004280);box-shadow:0 0 0 3px rgba(0,66,128,.14)}
.ss-hp-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:8px 12px;border-radius:10px;background:#fff4e8;color:var(--accent-dark,#c45f00);font-size:.84rem;font-weight:600}
.ss-hp-line[hidden]{display:none}
.ss-hp-line b{font-weight:800}
.ss-hp-note{margin:8px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted,#52606d)}
.ss-hp-note b{color:var(--ink,#1a1a1a)}
.ss-hp-basis{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 12px;border:1px solid var(--rule,#dbe4f1);border-radius:10px;background:var(--bg,#f7fafd);font-size:.8rem;line-height:1.45;color:var(--muted,#52606d)}
.ss-hp-basis svg{flex:none;margin-top:2px;color:var(--primary,#004280)}
.ss-hp-basis b{color:var(--ink,#1a1a1a)}
@media (max-width:520px){.ss-hp-sel{flex:1 1 100%}.ss-hp-lab{margin-right:0}}
.ss-rate-line{display:inline-flex;align-items:center;gap:8px;margin:8px 0 2px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.ss-rate-line .stars{color:var(--accent,#f07300);letter-spacing:1px;font-size:1rem}
.ss-rate-line .stars.is-empty{color:var(--rule-dark,#a9bcd6)}
.ss-rate-line .ss-rate-meta{font-size:.8rem;color:var(--muted,#52606d);font-weight:600}
.ss-rate-line .ss-rate-meta b{color:var(--ink,#1a1a1a)}
.ss-rate-line:hover .ss-rate-meta{color:var(--primary,#004280);text-decoration:underline}
.ss-rev-head{max-width:720px}
.ss-rev-head h2{margin:0 0 10px}
.ss-rev-score{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.ss-rev-score .stars{color:var(--accent,#f07300);letter-spacing:2px;font-size:1.35rem}
.ss-rev-score .stars.is-empty{color:var(--rule-dark,#a9bcd6)}
.ss-rev-score-tx{font-size:.95rem;color:var(--muted,#52606d)}
.ss-rev-score-tx b{color:var(--ink,#1a1a1a);font-family:var(--display,inherit);font-weight:800}
.ss-rev-score:hover .ss-rev-score-tx{color:var(--primary,#004280);text-decoration:underline}
.ss-rev-sub{margin:12px 0 16px;font-size:.92rem;line-height:1.6;color:var(--body,#3f4a55)}
.ss-rev-cta .btn{min-width:170px}
.ss-rev-top{display:grid;gap:28px}
.ss-rev-score:not(button){cursor:default}
.ss-rev-score:not(button):hover .ss-rev-score-tx{color:var(--muted,#52606d);text-decoration:none}
.ss-rev-note{margin:4px 0 0;padding:10px 14px;border-radius:10px;background:#fff4e5;border:1px solid #f6c88f;color:#7a4300;font-size:.9rem;line-height:1.5}
.ssr-preview{margin:0 0 14px;padding:9px 12px;border-radius:10px;background:#fff4e5;border:1px solid #f6c88f;color:#7a4300;font-size:.85rem}
.ss-rev-order{margin:28px 0;padding:18px 20px;border:1px solid var(--rule,#dbe4f1);border-radius:14px;background:var(--surface,#fff)}
.ss-rev-order h2{margin:0 0 6px;font-size:1.15rem}
.ss-rev-order p{margin:0 0 12px;color:var(--body,#3f4a55);font-size:.92rem}
.ss-rev-order ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ss-rev-order li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--soft,#f3f7fc)}
.ss-rev-order-done{color:#0a7a3d;font-size:.88rem}
.ss-rev-top.has-reviews{grid-template-columns:minmax(0,1fr) minmax(240px,330px);align-items:center}
@media(max-width:820px){.ss-rev-top.has-reviews{grid-template-columns:1fr;gap:18px}}
.ss-rev-bars{display:grid;gap:8px;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-rev-bar{display:grid;grid-template-columns:34px 1fr 26px;align-items:center;gap:10px;font-size:.8rem;font-weight:600;color:var(--muted,#52606d)}
.ss-rev-bar i{display:block;height:8px;border-radius:99px;background:var(--rule,#dbe4f1);overflow:hidden}
.ss-rev-bar i b{display:block;height:100%;border-radius:inherit;background:var(--accent,#f07300)}
.ss-rev-bar span:last-child{text-align:right;color:var(--ink,#1a1a1a)}
.ss-rev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px;align-items:start}
@media(max-width:820px){.ss-rev-list{grid-template-columns:1fr}}
.ss-rev-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-rev-card.is-more{display:none}
.ss-rev-list.show-all .ss-rev-card.is-more{display:flex}
.ss-rev-card.is-new{animation:ssRevNew 2.6s ease-out 2}
@keyframes ssRevNew{0%{box-shadow:0 0 0 0 rgba(240,115,0,.5);border-color:var(--accent,#f07300)}70%{box-shadow:0 0 0 14px rgba(240,115,0,0);border-color:var(--accent,#f07300)}100%{box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}}
.ss-rev-c-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ss-rev-c-top .stars{color:var(--accent,#f07300);letter-spacing:2px;font-size:1.05rem}
.ss-rev-c-top time{font-size:.78rem;color:var(--muted,#52606d)}
.ss-rev-card h3{margin:0;font-size:1.02rem;line-height:1.35;color:var(--ink,#1a1a1a)}
.ss-rev-card p{margin:0;font-size:.93rem;line-height:1.65;color:var(--body,#3f4a55);overflow-wrap:anywhere}
.ss-rev-ph{display:flex;flex-wrap:wrap;gap:8px}
.ss-rev-ph a{display:block;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--rule,#dbe4f1);cursor:zoom-in}
.ss-rev-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.ss-rev-ph a:hover img{transform:scale(1.06)}
.ss-rev-who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px;min-width:0}
.ss-rev-who b{font-size:.9rem;color:var(--ink,#1a1a1a);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-rev-ava{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary,#004280);color:#fff;font-size:.78rem;font-weight:800}
.ss-rev-vp{flex:none;margin-left:auto;padding:3px 9px;border-radius:99px;background:#e7f6ee;color:#0a7a3d;font-size:.74rem;font-weight:700}
.ss-rev-reply{padding:10px 12px;border-left:3px solid var(--primary,#004280);border-radius:10px;background:var(--soft,#f3f7fc);font-size:.88rem;line-height:1.55;color:var(--body,#3f4a55)}
.ss-rev-reply b{display:block;margin-bottom:3px;font-size:.78rem;color:var(--primary,#004280)}
.ss-rev-more{margin:18px 0 0}
.ss-rev-zoom{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(8,18,32,.86);cursor:zoom-out}
.ss-rev-zoom img{max-width:min(1100px,100%);max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ss-proof-teaser{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center}
@media(max-width:820px){.ss-proof-teaser{grid-template-columns:1fr;gap:22px}}
.ss-proof-rating{display:flex;align-items:center;gap:14px;margin:14px 0 6px}
.ss-proof-num{font-family:var(--display,inherit);font-weight:800;font-size:3rem;line-height:1;color:var(--ink,#1a1a1a)}
.ss-proof-num span{font-size:1.2rem;color:var(--muted,#52606d)}
.ss-proof-rmeta{display:flex;flex-direction:column}
.ss-proof-rmeta .stars{font-size:1.1rem}
.ss-proof-rmeta small{font-size:.82rem;color:var(--muted,#52606d);font-weight:600}
.ss-proof-sub{margin:0 0 18px;font-size:.94rem;line-height:1.6;color:var(--body,#3f4a55);max-width:46ch}
.ss-proof-t-right{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ss-proof-stat{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-proof-stat b{display:block;font-family:var(--display,inherit);font-weight:800;font-size:1.5rem;color:var(--primary,#004280);line-height:1.1}
.ss-proof-stat small{display:block;margin-top:4px;font-size:.76rem;color:var(--muted,#52606d)}
.ss-verified{display:inline-block;margin-left:6px;font-family:var(--display,inherit);font-size:.72rem;font-weight:800;color:var(--success,#16a34a)}
/* ---- §8 Contact-options block ---- */
.ss-contact-help{padding-block:44px}
.ss-ch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.ss-ch-card{display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;cursor:pointer;
background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:18px;padding:22px 20px;color:var(--ink,#1a1a1a);
box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06));transition:transform .14s,box-shadow .2s,border-color .16s}
.ss-ch-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 8px 16px rgba(0,66,128,.1));border-color:var(--rule-dark,#a9bcd6)}
.ss-ch-card:focus-visible{outline:3px solid rgba(0,66,128,.35);outline-offset:2px}
.ss-ch-card.is-primary{border:2px solid var(--accent,#f07300);background:var(--accent-soft,#fff1e0)}
.ss-ch-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--primary,#004280);background:var(--soft,#dbe4f1)}
.ss-ch-card.is-primary .ss-ch-ic{color:#fff;background:var(--accent,#f07300)}
.ss-ch-card b{font-family:var(--display,inherit);font-size:1.05rem}
.ss-ch-line{font-weight:700;color:var(--primary,#004280);font-size:.92rem}
.ss-ch-card small{font-size:.78rem;color:var(--muted,#52606d);line-height:1.45}
/* ---- §9 Customer stories (with images) ---- */
.ss-stories{padding-block:44px}
.ss-st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.ss-st-card{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06));display:flex;flex-direction:column;height:100%}
.ss-st-gallery{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ss-st-gallery::-webkit-scrollbar{display:none}
.ss-st-gallery img{flex:0 0 100%;width:100%;height:200px;object-fit:cover;scroll-snap-align:start}
.ss-st-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ss-st-body .stars{color:var(--accent,#f07300);letter-spacing:2px}
.ss-st-body p{margin:0;font-size:.9rem;line-height:1.55;color:var(--body,#3f4a55)}
.ss-st-body footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--muted,#52606d)}
.ss-st-loc::before{content:"📍 "}
.ss-st-prod{font-family:var(--display,inherit);font-weight:700;color:var(--primary,#004280)}
.ss-st-illus-tag{align-self:flex-start;font-family:var(--display,inherit);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#52606d);background:var(--soft-2,#e4e8ed);border-radius:99px;padding:3px 10px}
.ss-st-card footer{background:none;background-color:transparent;padding:0;margin:0;min-height:0;border:0}
.ss-st-illus-badge{position:absolute;top:10px;left:10px;font-family:var(--display,inherit);font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(16,32,56,.72);border-radius:99px;padding:3px 10px;z-index:1}
.ss-st-gallery{position:relative}
/* Two kinds of review, told apart at a glance, but on the same footprint, so
a mixed row still lines up: every card ends with its footer on one baseline.
· .is-photo, the customer's picture leads, words underneath.
· .is-text, no picture, so the words lead on a tinted quote card. */
.ss-st-grid{align-items:stretch}
.ss-st-body footer{margin-top:auto;padding-top:10px}
.ss-st-type{align-self:flex-start;font-family:var(--display,inherit);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 10px;color:var(--primary,#004280);background:var(--soft,#eef4fb)}
.ss-st-type.is-onmedia{position:absolute;top:10px;left:10px;z-index:1;color:#fff;background:rgba(16,32,56,.72)}
/* Photo review, picture first, caption clamped so captions never push a row out. */
.ss-st-card.is-photo .ss-st-body>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Written review, the quote IS the card. */
.ss-st-card.is-text{position:relative;background:linear-gradient(165deg,#f7fafd,#e8f0f9);border-color:#cfe0f2}
.ss-st-card.is-text::before{content:"\201C";position:absolute;top:-18px;right:14px;font-family:Georgia,'Times New Roman',serif;font-size:7rem;line-height:1;color:var(--primary,#004280);opacity:.13;pointer-events:none}
.ss-st-card.is-text .ss-st-body{padding:20px 20px 18px;gap:10px;position:relative;z-index:1}
.ss-st-card.is-text .ss-st-body>p{font-size:1.02rem;line-height:1.6;color:var(--ink,#16202c);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.ss-st-card.is-text .ss-st-body footer{border-top:1px solid rgba(0,66,128,.14);margin-top:auto}
.ss-st-photoonly{color:var(--muted,#52606d);font-style:italic}
/* Photo review = a photograph, the way the Customer Installations gallery
shows one: image fills the tile, caption only on hover, whole tile opens
the gallery. No caption band underneath. */
/* Use-case swatch: the page is being replaced in place, dim it just enough to
read as busy without the layout moving. */
.ss-uc-swapping{opacity:.55;transition:opacity .12s ease;pointer-events:none}
.ss-uc-swapping .ss-uc2{opacity:1;pointer-events:auto}
.ss-uc2-card{transition:border-color .15s,box-shadow .15s,transform .15s}
.ss-uc2-card:active{transform:scale(.985)}
.ss-st-card.is-shot{border:0;background:var(--soft-2,#e4e8ed);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1)}
.ss-st-card.is-shot:hover{transform:translateY(-3px);box-shadow:0 20px 40px -8px rgba(15,23,42,.25)}
.ss-st-shot{position:relative;display:block;height:100%;min-height:200px;overflow:hidden;border-radius:inherit;color:#fff;text-decoration:none}
.ss-st-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ss-st-card.is-shot:hover .ss-st-shot img{transform:scale(1.05)}
.ss-st-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;opacity:0;transition:opacity .35s ease;background:linear-gradient(180deg,transparent 0,transparent 40%,rgba(0,15,30,.4) 70%,rgba(0,15,30,.92) 100%)}
.ss-st-card.is-shot:hover .ss-st-ov,.ss-st-shot:focus-visible .ss-st-ov{opacity:1}
.ss-st-ov b{font-family:var(--display,inherit);font-weight:700;font-size:.86rem;line-height:1.35;letter-spacing:-.01em;color:#fff}
.ss-st-ov>span{margin-top:5px;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ss-st-badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(240,115,0,.95);color:#fff;padding:4px 10px;border-radius:999px;font-family:var(--display,inherit);font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 12px rgba(240,115,0,.4)}
.ss-st-zoom{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink,#16202c);display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;transition:transform .25s}
.ss-st-card.is-shot:hover .ss-st-zoom{transform:scale(1.1)}
.ss-st-all{margin:6px 0 0;font-size:.88rem}
.ss-st-all a{font-family:var(--display,inherit);font-weight:700;color:var(--primary,#004280);text-decoration:none;border-bottom:1.5px solid rgba(0,66,128,.28)}
.ss-st-all a:hover{border-bottom-color:var(--primary,#004280)}
.ss-st-card.ss-st-share{border:0;background:linear-gradient(160deg,var(--primary,#004280),#0a2f57);color:#fff;align-items:center;justify-content:center;text-align:center;padding:26px 22px;gap:10px}
.ss-st-card.ss-st-share .ss-st-ic{display:inline-flex;color:#fff;background:rgba(255,255,255,.14);width:52px;height:52px;border-radius:14px;align-items:center;justify-content:center}
.ss-st-card.ss-st-share .ss-st-ic svg{width:28px;height:28px}
.ss-st-card.ss-st-share b{font-family:var(--display,inherit);font-size:1.08rem;color:#fff}
.ss-st-card.ss-st-share p{margin:0;font-size:.85rem;color:rgba(255,255,255,.82);line-height:1.5}
.ss-st-card.ss-st-share .btn{margin-top:4px}
.ss-st-share-in{padding:26px 20px;display:flex;flex-direction:column;gap:10px;align-items:center}
.ss-st-ic{display:inline-flex;color:var(--primary,#004280)}
.ss-st-ic svg{width:34px;height:34px}
.ss-st-share-in b{font-family:var(--display,inherit);font-size:1.05rem}
.ss-st-share-in p{margin:0;font-size:.84rem;color:var(--muted,#52606d);line-height:1.5}
/* ---- §6 Sticky conversion CTA ---- */
.ss-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:940;background:var(--surface,#fff);
border-top:1px solid var(--rule,#dbe4f1);box-shadow:0 -8px 24px rgba(0,29,61,.12);
transform:translateY(120%);transition:transform .3s var(--ease,cubic-bezier(.22,.61,.36,1));padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.ss-sticky-cta.show{transform:translateY(0)}
.ss-sticky-in{max-width:var(--wrap,1240px);margin:0 auto;display:flex;align-items:center;gap:12px}
.ss-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ss-sticky-name{font-family:var(--display,inherit);font-weight:800;font-size:.9rem;color:var(--ink,#1a1a1a);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-sticky-price{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.ss-sticky-price[hidden]{display:none}
.ss-sticky-price small{font-size:.72rem;font-weight:700;color:var(--muted,#52606d);overflow:hidden;text-overflow:ellipsis}
.ss-sticky-price b{font-family:var(--display,inherit);font-weight:800;font-size:1.12rem;line-height:1.15;color:var(--primary,#004280)}
.ss-sticky-btns{display:flex;gap:8px;flex:0 0 auto}
.ss-sticky-sec,.ss-sticky-buy{display:flex;gap:8px}
.ss-sticky-buy[hidden],.ss-sticky-btns .btn[hidden]{display:none}
.ss-sticky-btns .btn{white-space:nowrap}
.ss-sticky-btns .ss-ss{display:none}
.ss-sticky-bn{background:linear-gradient(135deg,#0E9F6E,#057A55);color:#fff;border:0;font-weight:800}
.ss-sticky-bn:hover,.ss-sticky-bn:focus-visible{background:linear-gradient(135deg,#057A55,#046C4E);color:#fff}
.ss-sticky-atc[disabled],.ss-sticky-bn[disabled]{opacity:.6;pointer-events:none}
@media(max-width:1100px) and (min-width:641px){
.ss-sticky-in{gap:10px}
.ss-sticky-btns,.ss-sticky-sec,.ss-sticky-buy{gap:6px}
.ss-sticky-btns .btn{padding-left:12px;padding-right:12px}
}
@media(max-width:900px) and (min-width:641px){
.ss-sticky-name{display:none}
.ss-sticky-btns .ss-sl{display:none}
.ss-sticky-btns .ss-ss{display:inline}
}
@media(max-width:640px){
.ss-sticky-cta{padding-top:8px;padding-left:12px;padding-right:12px}
.ss-sticky-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center}
.ss-sticky-name{display:none}
.ss-sticky-price{flex-direction:column;align-items:flex-start;gap:0}
.ss-sticky-price small{font-size:.68rem;max-width:100%}
.ss-sticky-price b{font-size:1.05rem}
.ss-sticky-btns{display:contents}
.ss-sticky-sec{grid-column:2;grid-row:1;gap:6px}
.ss-sticky-buy{grid-column:1 / -1;grid-row:2;gap:8px}
.ss-sticky-buy .btn{flex:1 1 0;justify-content:center;min-height:42px;font-size:.86rem}
.ss-sticky-sec .btn{min-height:36px;padding:6px 12px;font-size:.78rem;justify-content:center}
.ss-sticky-btns .ss-sl{display:none}
.ss-sticky-btns .ss-ss{display:inline}
/* no price + no buy row: the two quick actions share the full width */
.ss-sticky-in:not(:has(.ss-sticky-price:not([hidden]))) .ss-sticky-sec{grid-column:1 / -1}
.ss-sticky-in:not(:has(.ss-sticky-price:not([hidden]))) .ss-sticky-sec .btn{flex:1}
}
/* On product pages the sticky bar carries the quote CTA, avoid doubling with the FAB. */
body:has(.ss-sticky-cta) .ssq-fab{display:none}
/* ---- §15 Category SEO content block ---- */
.ss-cat-seo{padding-block:44px}
.ss-cat-seo .wrap{max-width:960px}
.ss-cat-seo h2{margin-top:26px}
.ss-cat-seo h3{margin-top:20px;font-size:1.1rem}
.ss-cat-seo p{color:var(--body,#3f4a55);line-height:1.7}
.ss-cat-seo ul{margin:10px 0 0;padding-left:20px;color:var(--body,#3f4a55);line-height:1.7}
.ss-cat-seo .ss-cat-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;padding:20px;border-radius:16px;background:linear-gradient(120deg,var(--primary-dark,#001d3d),var(--primary,#004280))}
.ss-cat-seo .ss-cat-cta .btn{flex:1;min-width:180px;justify-content:center}
.ss-cat-seo .ss-cat-links{margin-top:20px;font-size:.9rem}
.ss-cat-seo .ss-cat-links a{font-weight:700;margin-right:14px;white-space:nowrap}
/* richer guide sub-blocks */
.ss-cat-seo .ss-seo-lead{font-size:1.08rem;color:var(--body,#3f4a55);font-weight:500}
.ss-seo-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.ss-seo-size{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:12px;padding:14px 16px}
.ss-seo-size b{display:block;font-family:var(--display,inherit);font-weight:800;font-size:1.05rem;color:var(--primary,#004280)}
.ss-seo-size span{display:block;margin-top:4px;font-size:.85rem;color:var(--muted,#52606d);line-height:1.5}
.ss-seo-note{font-size:.85rem;color:var(--muted,#52606d)}
.ss-seo-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.ss-seo-use{display:flex;flex-direction:column;gap:4px;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-left:3px solid var(--accent,#f07300);border-radius:0 12px 12px 0;padding:14px 16px}
.ss-seo-use b{font-family:var(--display,inherit);font-weight:800;font-size:.95rem;color:var(--ink,#1a1a1a)}
.ss-seo-use span{font-size:.85rem;color:var(--muted,#52606d);line-height:1.5}
.ss-seo-faq{margin-top:12px;display:grid;gap:10px}
.ss-seo-faq-item{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:12px;padding:0 16px}
.ss-seo-faq-item>summary{cursor:pointer;list-style:none;padding:14px 0;font-family:var(--display,inherit);font-weight:800;font-size:.98rem;color:var(--ink,#1a1a1a);display:flex;align-items:center;gap:10px}
.ss-seo-faq-item>summary::-webkit-details-marker{display:none}
.ss-seo-faq-item>summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--accent,#f07300);font-weight:700;transition:transform .2s}
.ss-seo-faq-item[open]>summary::after{transform:rotate(45deg)}
.ss-seo-faq-item>p{margin:0 0 14px;font-size:.92rem;line-height:1.65;color:var(--body,#3f4a55)}
/* ---- §15 v2 - PREMIUM category guide design ---- */
.ss-guide{padding-block:52px}
.ss-guide .wrap{max-width:1080px}
.ss-guide-head{max-width:820px}
.ss-guide-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px}
.ss-guide-lead{font-size:1.12rem;line-height:1.7;color:var(--body,#3f4a55)}
.ss-guide-head p{color:var(--body,#3f4a55);line-height:1.75}
/* stat band */
.ss-guide-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 40px}
@media(max-width:760px){.ss-guide-facts{grid-template-columns:1fr 1fr}}
.ss-guide-fact{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-gf-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary,#004280),var(--primary-mid,#002f5c));margin-bottom:8px}
.ss-gf-ic svg{width:20px;height:20px}
.ss-guide-fact b{font-family:var(--display,inherit);font-weight:800;font-size:1rem;color:var(--ink,#1a1a1a);line-height:1.2}
.ss-guide-fact small{font-size:.78rem;color:var(--muted,#52606d)}
/* icon-accented headings */
.ss-guide-block{margin:34px 0}
.ss-guide-h3{display:flex;align-items:center;gap:12px;font-size:1.35rem;margin:0 0 14px}
.ss-guide-hic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent,#f07300);background:var(--accent-soft,#fff1e0)}
.ss-guide-hic svg{width:22px;height:22px}
/* guide article sections (icon + body cards) */
.ss-guide-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}
@media(max-width:820px){.ss-guide-sections{grid-template-columns:1fr}}
.ss-guide-sec{display:flex;gap:14px;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-guide-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--primary,#004280);background:var(--soft,#dbe4f1)}
.ss-guide-ic svg{width:24px;height:24px}
.ss-guide-sec-body h3{font-size:1.08rem;margin:2px 0 8px}
.ss-guide-sec-body p{margin:0;font-size:.92rem;line-height:1.65;color:var(--body,#3f4a55)}
.ss-guide-sec-body b{color:var(--ink,#1a1a1a)}
/* premium CTA band */
.ss-guide-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin:34px 0;padding:26px 28px;border-radius:20px;background:linear-gradient(120deg,var(--primary-dark,#001d3d),var(--primary,#004280) 70%,#0a5ca8);box-shadow:var(--shadow-md,0 8px 16px rgba(0,66,128,.1))}
.ss-guide-cta-tx{display:flex;flex-direction:column;gap:4px;min-width:220px}
.ss-guide-cta-tx b{font-family:var(--display,inherit);font-weight:800;font-size:1.35rem;color:#fff}
.ss-guide-cta-tx span{font-size:.92rem;color:#c7d6ea}
.ss-guide-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.ss-guide .ss-cat-links{margin-top:26px;font-size:.9rem}
.ss-guide .ss-cat-links a{font-weight:700;margin-right:14px;white-space:nowrap;color:var(--primary,#004280)}
.ss-guide .ss-seo-note{font-size:.85rem;color:var(--muted,#52606d)}
/* ---- Mandatory estimate disclaimer (client spec §4.3), subtle expandable note. ---- */
.ss-estimate-note{margin:10px 0 0;border:1px solid var(--rule,#e2e8f0);border-radius:10px;background:var(--bg,#f4f7fb);padding:0 12px}
.ss-estimate-note>summary{cursor:pointer;list-style:none;padding:9px 0;font-size:.8rem;font-weight:700;color:var(--primary,#004280);display:flex;align-items:center;gap:6px}
.ss-estimate-note>summary::-webkit-details-marker{display:none}
.ss-estimate-note>summary::before{content:"ⓘ";font-weight:800}
.ss-estimate-note>summary::after{content:"▾";margin-left:auto;transition:transform .2s}
.ss-estimate-note[open]>summary::after{transform:rotate(180deg)}
.ss-estimate-note>p{margin:0 0 12px;font-size:.8rem;line-height:1.55;color:var(--muted,#52606d)}
/* Sticky "Free quote" FAB on product pages, reopens the popup any time after load. */
.ssq-fab{position:fixed;left:18px;bottom:18px;z-index:9998;display:inline-flex;align-items:center;gap:8px;
border:0;cursor:pointer;font-family:var(--display,inherit);font-weight:800;font-size:.95rem;color:#fff;
padding:13px 20px;border-radius:99px;background:linear-gradient(120deg,#F07300,#FF8F1F);
box-shadow:0 12px 28px -8px rgba(240,115,0,.6);transition:transform .15s,box-shadow .2s;
animation:ssqFabIn .5s .8s both}
.ssq-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(240,115,0,.72)}
.ssq-fab:active{transform:translateY(0)}
.ssq-fab svg{flex:0 0 auto}
@keyframes ssqFabIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* On phones a fixed bottom nav bar (.mnav, bottom:0) can sit under the FAB, lift
the quote FAB above it so the two never stack/overlap. */
@media(max-width:520px){.ssq-fab{left:12px;bottom:calc(74px + env(safe-area-inset-bottom));padding:11px 16px;font-size:.88rem}}
/* ============================================================
v75 - MOBILE category filter = hidden bottom-sheet by default.
The catalog engine (app-v3.js) already injects the "Filters & sort"
button + a scrim and toggles `.side-f.open`, but the sheet styling
used to live on a `.side-f-v3` class that is no longer applied, and
the desktop rules above pin `.side-f` sticky with !important, so on
phones the whole filter panel showed expanded by default. These rules
(last stylesheet loaded, so they win) turn `.side-f` into a proper
slide-up sheet that stays HIDDEN until the button is tapped, and fix
the horizontal-overflow / cut-off-on-the-right issues on the grid.
NOTE: 920px matches the breakpoint at which the engine shows the
"Filters & sort" button (theme-v3.css hides it at min-width:921px), so
the drawer and its trigger button always appear/disappear together.
============================================================ */
@media (max-width:920px){
/* Hidden slide-up sheet, overrides the sticky !important desktop rules. */
.side-f{
position:fixed !important; left:0; right:0; bottom:0; top:auto !important;
z-index:1150; width:auto; margin:0; align-self:auto !important;
max-height:82vh !important; height:auto; overflow-y:auto; overscroll-behavior:contain;
border:0; border-radius:22px 22px 0 0;
padding:20px 16px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -24px 70px rgba(0,29,61,.42);
transform:translateY(106%); visibility:hidden;
transition:transform .34s cubic-bezier(.22,1,.36,1), visibility .34s;
}
.side-f.open{ transform:none; visibility:visible; }
/* Grab-handle so it reads as a draggable sheet. */
.side-f::before{
content:""; display:block; width:44px; height:5px; margin:2px auto 14px;
border-radius:99px; background:var(--rule,#d9e2ee);
}
/* The engine-injected button + scrim (already styled in theme-v3.css) stay visible. */
.fsheet-btn{ display:inline-flex !important; }
.fsheet-scrim{ display:block !important; }
/* ---- horizontal overflow fixes (content cut off on the right) ---- */
/* CSS-grid children default to min-width:auto and push past the viewport when
any inner element is wide; clamp them so the grid can actually shrink. */
[data-plp]{ overflow-x:clip; }
.plp-cols{ grid-template-columns:1fr !important; }
.plp-cols > *{ min-width:0; }
.plp-grid{ min-width:0; }
.plp-top{ flex-wrap:wrap; }
.plp-top form{ min-width:0; }
.plp-top .spacer{ display:none; }
}
/* ============================================================
v77 - SITE-WIDE mobile fixes: kill horizontal overflow (content
was wider than the phone viewport → cut off on the right), fix the
header wrapping (location/user icons dropping to a second line),
stack the financing calculator, and space the floating Cart / Chat
buttons so they no longer overlap each other or the bottom nav.
============================================================ */
/* ---- 1) Global horizontal-overflow guard ----
A 420px cart drawer, full-bleed search overlay and a few 2-col grids
were forcing the page wider than a phone screen. Clip stray horizontal
bleed at the root and make every layout box shrink to fit. */
@media (max-width:900px){
html{ overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100vw; }
main,.wrap,section,.widget,.panel{ max-width:100%; box-sizing:border-box; }
/* flex/grid children default to min-width:auto and refuse to shrink */
.grid,.grid>*,.g2,.g2>*,.g3,.g3>*,.duo-ban,.pgrid,.pgrid>*{ min-width:0; }
img{ max-width:100%; height:auto; }
}
/* ---- 2) Off-canvas drawers must never exceed the viewport width ----
(they slide in via translateX(±100%), so capping width keeps them fully
off-screen when closed and fully visible when open on small phones). */
@media (max-width:900px){
.cartdw{ width:min(420px,92vw) !important; max-width:100vw; }
.drawer{ width:min(340px,88vw) !important; max-width:100vw; }
/* Search overlay: the panel is a hard-coded 720px wide, so on a phone it
shot ~360px past the right edge (close button + results getting cut off).
Make the panel fill the viewport; its children are auto-width so they
follow. Results scroll inside the panel. */
.search-ov{ padding:56px 10px 10px !important; overflow-x:hidden; }
.search-panel{ width:100% !important; max-width:100vw !important; border-radius:16px !important; max-height:calc(100dvh - 70px); overflow:hidden auto; box-sizing:border-box; }
.search-ov .si,.search-ov .search-pop,.search-ov .search-res{ width:auto !important; max-width:100%; box-sizing:border-box; }
.search-ov .si{ overflow:hidden; }
.search-ov .si input{ min-width:0; }
/* The desktop "Press Enter to search…" hint is a non-wrapping flex sibling in
the input row; on a phone it shot past the panel's right edge AND inflated
the row height (white gap above the input). Hide it on mobile. */
.search-ov .si p{ display:none !important; }
.search-ov .search-pop{ flex-wrap:wrap; }
.search-ov .search-res a{ width:auto !important; max-width:100%; }
.search-ov .search-res a>div{ min-width:0; overflow:hidden; } /* product name truncates instead of forcing width */
}
/* ---- 3) Financing calculator: stack to one column, keep rows inside ---- */
@media (max-width:900px){
.grid.g2{ grid-template-columns:1fr !important; }
.widget{ overflow:hidden; }
.widget .opt{ min-width:0; }
.widget .opt>span{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.widget input[type=range]{ width:100% !important; max-width:100%; box-sizing:border-box; }
}
/* ---- 4) Live-3D hero: image/viewer fit the column ---- */
@media (max-width:900px){
.s3d-home,.s3d-home .viewer,.s3d-home .panel{ max-width:100%; }
.s3d-home .viewer img,.s3d-home .viewer .s3d-still{ max-width:100%; }
}
/* ---- 5) Header: keep the top row intact (logo · location · user · cart)
and drop the search onto its own full-width line. Applying the theme's
intended mobile header up to 900px removes the broken 761–900px zone
where location/user were wrapping below. ---- */
@media (max-width:900px){
.h7-main{ flex-wrap:wrap; gap:8px 10px; }
.h7-search{ order:9; flex:1 1 100%; margin:0; min-height:42px; }
.h7-acts{ margin-left:auto; gap:2px; flex-wrap:nowrap; } /* icons stay on one row */
.h7-act.hide-m{ display:none !important; } /* hide desktop-only text links */
.h7-main .logo img{ width:116px; height:auto; }
.h7-acts .state-pick .tx b{ max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ---- 6) Floating buttons: clear gap between Cart & Chat, and lift both
above the mobile bottom nav so nothing stacks on top of anything. ---- */
@media (max-width:900px){
.chatw{ right:14px !important; bottom:calc(76px + env(safe-area-inset-bottom)) !important; }
.fab-cart{ right:15px !important; bottom:calc(146px + env(safe-area-inset-bottom)) !important; }
}
/* v214: on phones the PDP sticky bar is two rows (price + quick actions,
then Add to cart | Buy now), lift Chat & Cart above it while it shows. */
@media (max-width:640px){
.chatw,.fab-cart{ transition:bottom .3s ease; }
body:has(.ss-sticky-cta.show) .chatw{ bottom:calc(124px + env(safe-area-inset-bottom)) !important; }
body:has(.ss-sticky-cta.show) .fab-cart{ bottom:calc(192px + env(safe-area-inset-bottom)) !important; }
}
/* ============================================================
Review submission modal (ss-review.js / inc/reviews-submit.php)
============================================================ */
.ss-proof-actions{display:flex;flex-wrap:wrap;gap:12px}
.ssr-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(0,29,61,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.ssr-overlay[hidden]{display:none}
.ssr-overlay.open{opacity:1}
.ssr-modal{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;background:var(--surface,#fff);border-radius:20px;
box-shadow:0 30px 80px -20px rgba(0,29,61,.6);transform:translateY(48px) scale(.98);opacity:.4;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .38s ease}
.ssr-overlay.open .ssr-modal{transform:translateY(0) scale(1);opacity:1}
.ssr-close{position:absolute;top:12px;right:14px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.ssr-close:hover{background:rgba(255,255,255,.32)}
.ssr-head{background:linear-gradient(135deg,#001D3D,#004280);color:#fff;padding:22px 26px 18px;border-radius:20px 20px 0 0}
.ssr-head h3{margin:10px 0 6px;font-size:1.5rem;font-weight:800;color:#fff}
.ssr-sub{margin:0;font-size:.92rem;color:#c7d6ea;line-height:1.5}
.ssr-sub b{color:#fff}
.ssr-form{padding:20px 26px 24px}
.ssr-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ssr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ssr-field.ssr-full{grid-column:1 / -1}
.ssr-field label{font-size:.8rem;font-weight:700;color:var(--ink,#1a1a1a);font-family:var(--display,inherit)}
.ssr-field label span{color:var(--accent,#f07300)}
.ssr-field label .ssr-opt{color:var(--muted,#64748b);font-weight:600}
.ssr-field input,.ssr-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;padding:11px 13px;border:1.5px solid var(--rule,#e6ebf2);border-radius:10px;background:#fff;color:var(--ink,#1a1a1a);transition:border-color .15s,box-shadow .15s}
.ssr-field input:focus,.ssr-field textarea:focus{outline:none;border-color:var(--accent,#f07300);box-shadow:0 0 0 3px rgba(240,115,0,.14)}
.ssr-field textarea{resize:vertical;min-height:70px}
/* stars */
.ssr-stars{display:inline-flex;gap:4px}
.ssr-star{border:0;background:0 0;cursor:pointer;font-size:1.9rem;line-height:1;color:var(--rule-dark,#c9d4e2);padding:0;transition:color .12s,transform .1s}
.ssr-star:hover{transform:scale(1.12)}
.ssr-star.on{color:var(--accent,#f07300)}
/* photo drop + thumbs */
.ssr-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px;border:2px dashed var(--rule-dark,#a9bcd6);border-radius:12px;background:var(--bg,#f4f7fb);color:var(--muted,#52606d);cursor:pointer;font-size:.86rem;font-weight:600;transition:border-color .15s,background .15s}
.ssr-drop:hover{border-color:var(--accent,#f07300);background:#fff;color:var(--accent-dark,#c45f00)}
.ssr-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ssr-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--rule,#dbe4f1)}
.ssr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ssr-thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;background:rgba(0,29,61,.75);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ssr-submit{width:100%;margin-top:14px;border:0;cursor:pointer;font-family:var(--display,inherit);font-weight:800;font-size:1.02rem;color:#fff;padding:14px 18px;border-radius:12px;background:linear-gradient(120deg,#F07300,#FF8F1F);box-shadow:0 12px 26px -8px rgba(240,115,0,.55);transition:transform .12s,box-shadow .2s,opacity .2s}
.ssr-submit:hover{transform:translateY(-1px)}
.ssr-submit:disabled{opacity:.65;cursor:default;transform:none}
.ssr-fine{margin:12px 2px 0;font-size:.75rem;color:var(--muted,#64748b);text-align:center}
.ssr-msg{margin:10px 0 0;font-size:.85rem;font-weight:600;color:#b3261e;background:#fff2f2;border:1px solid #f5c2c2;border-radius:10px;padding:10px 12px}
.ssr-done{padding:40px 30px 34px;text-align:center}
.ssr-done h3{margin:0 0 8px;font-size:1.5rem;font-weight:800;color:var(--ink,#12223c)}
.ssr-done p{margin:0 0 20px;color:var(--muted,#52606d);line-height:1.55}
@media(max-width:520px){
.ssr-overlay{align-items:flex-end;padding:0}
.ssr-modal{max-width:none;border-radius:20px 20px 0 0;max-height:94vh}
.ssr-head{border-radius:20px 20px 0 0}
.ssr-grid{grid-template-columns:1fr}
}
/* ============================================================================
Customer Installations gallery (templates/page-gallery.php)
Real install photography, filterable by building type.
============================================================================ */
.ss-cig-fb .cig-hero{padding-block:64px 56px}
.ss-cig-fb .cig-hero h1{margin-top:14px;font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06}
.ss-cig-fb .cig-hero h1 em{font-style:normal;color:var(--accent,#f07300)}
.ss-cig-fb .cig-hero .lede{margin-top:14px;max-width:60ch}
.ss-cig-fb .cig-hero-stat{margin-top:16px;font-size:.9rem;color:rgba(255,255,255,.78)}
.ss-cig-fb .cig-hero-stat b{font-family:var(--display,inherit);font-size:1.25rem;color:#fff}
.ss-cig-fb .cig-sec{padding-block:52px}
.ss-cig-fb .cig-sec.alt{background:var(--bg,#f4f7fb)}
.ss-cig-fb .cig-sec h2{margin-top:6px}
.ss-cig-fb .cig-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.ss-cig-fb .cig-points>div{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:14px;padding:18px}
.ss-cig-fb .cig-points b{font-family:var(--display,inherit);font-size:1.02rem;color:var(--primary,#004280)}
.ss-cig-fb .cig-points p{margin:6px 0 0;font-size:.88rem;line-height:1.55;color:var(--body,#3f4a55)}
.ss-cig-fb .cig-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
.ss-cig-fb .cig-chip{font-family:var(--display,inherit);font-size:.82rem;font-weight:700;border:1.5px solid var(--rule,#dbe4f1);background:var(--surface,#fff);color:var(--body,#3f4a55);border-radius:99px;padding:8px 14px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.ss-cig-fb .cig-chip span{font-weight:800;color:var(--muted,#52606d);margin-left:4px}
.ss-cig-fb .cig-chip:hover{border-color:var(--primary,#004280);color:var(--primary,#004280)}
.ss-cig-fb .cig-chip.is-on{background:var(--primary,#004280);border-color:var(--primary,#004280);color:#fff}
.ss-cig-fb .cig-chip.is-on span{color:rgba(255,255,255,.75)}
.ss-cig-fb .cig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ss-cig-fb .cig-card{margin:0;background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-xs,0 1px 2px rgba(0,66,128,.06))}
.ss-cig-fb .cig-card[hidden]{display:none}
.ss-cig-fb .cig-card-img{aspect-ratio:4/3;background:var(--soft-2,#e4e8ed)}
.ss-cig-fb .cig-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.ss-cig-fb .cig-card figcaption{padding:10px 12px;font-size:.78rem;line-height:1.45;color:var(--muted,#52606d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-cig-fb .cig-empty{margin-top:18px;font-size:.9rem;color:var(--muted,#52606d)}
.ss-cig-fb .cig-none{background:var(--surface,#fff);border:1px dashed var(--rule,#dbe4f1);border-radius:16px;padding:26px;margin-top:18px;max-width:70ch}
.ss-cig-fb .cig-none p{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:var(--body,#3f4a55)}
.ss-cig-fb .cig-none code{background:var(--soft,#eef4fb);border-radius:5px;padding:2px 6px;font-size:.85em}
.ss-cig-fb .cig-trust{padding-block:52px;background:var(--bg,#f4f7fb)}
.ss-cig-fb .cig-trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.ss-cig-fb .cig-trust-row>div{background:var(--surface,#fff);border:1px solid var(--rule,#dbe4f1);border-radius:14px;padding:18px;text-align:center}
.ss-cig-fb .cig-trust-row b{display:block;font-family:var(--display,inherit);font-size:1.4rem;color:var(--primary,#004280)}
.ss-cig-fb .cig-trust-row span{display:block;margin-top:5px;font-size:.82rem;line-height:1.5;color:var(--muted,#52606d)}
.ss-cig-fb .cig-cta{padding-block:52px;text-align:center}
.ss-cig-fb .cig-cta p{margin:8px auto 0;max-width:58ch;color:var(--body,#3f4a55)}
.ss-cig-fb .cig-cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
@media(max-width:640px){
.ss-cig-fb .cig-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ss-cig-fb .cig-card figcaption{display:none}
}
/* ==========================================================================
v204 - "Customize" tag on no-height product cards (W×L, W×L-use-case)
========================================================================== */
.pcard .cz-tag{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;background:linear-gradient(135deg,#FF8A1F,#F07300 60%,#E05F00);color:#fff;font-family:var(--display,'Plus Jakarta Sans',sans-serif);font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1;box-shadow:0 6px 14px -6px rgba(240,115,0,.75),inset 0 1px 0 rgba(255,255,255,.25);pointer-events:none}
.pcard .cz-tag svg{flex:none}
.pcard .flag~.cz-tag{top:46px}
/* ==========================================================================
v204, category pages: plain-text search block above the footer
========================================================================== */
.ss-seotext{padding-block:26px 30px!important;background:#fff;border-top:1px solid #EEF2F7;color:#7b8794;font-size:12px;line-height:1.7}
.ss-seotext h2,.ss-seotext h3{margin:14px 0 4px;font-family:var(--sans,'Open Sans',sans-serif);font-size:13px;font-weight:700;letter-spacing:0;line-height:1.4;color:#56616d}
.ss-seotext h2:first-child{margin-top:0}
.ss-seotext h3{font-size:12px;margin-top:10px}
.ss-seotext p{margin:0 0 6px;max-width:none}
.ss-seotext a,.ss-seotext p a:not(.btn){color:#4f74a3;text-decoration:none}
.ss-seotext a:hover,.ss-seotext p a:not(.btn):hover{text-decoration:underline}
.ss-seotext .ss-seotext-tail{margin-top:10px}
.ss-seotext .ss-seotext-tail b{color:#56616d}
/* v207, search block: price list table + plain-text FAQ */
.ss-seotext .ss-seotext-prices{width:100%;max-width:900px;margin:6px 0 6px;border-collapse:collapse;font-size:12px;line-height:1.5;color:#6b7785;background:#fff}
.ss-seotext .ss-seotext-prices th,.ss-seotext .ss-seotext-prices td{padding:6px 10px;border:1px solid #E8EDF3;text-align:left;vertical-align:top}
.ss-seotext .ss-seotext-prices th{background:#F7F9FC;color:#56616d;font-weight:700}
.ss-seotext .ss-seotext-prices td:last-child,.ss-seotext .ss-seotext-prices th:last-child{white-space:nowrap}
.ss-seotext .ss-seotext-note{font-size:11px;color:#8b96a2}
.ss-seotext .ss-seotext-faq{margin:4px 0 8px}
.ss-seotext .ss-seotext-faq dt{margin:8px 0 2px;font-weight:700;color:#56616d}
.ss-seotext .ss-seotext-faq dd{margin:0}
@media (max-width:640px){.ss-seotext .ss-seotext-prices{display:block;overflow-x:auto;white-space:nowrap}}
/* v208, department bar: 12 items incl. "Shop by Use Cases" fit on one line on desktop */
@media (min-width:1100px){.h7-dept a.dept{padding-left:8px;padding-right:8px}}
/* v209, photo disclaimer (client content standard) */
.ss-photo-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;font-size:.76rem;line-height:1.5;color:var(--muted,#5c6f84);background:#F6F8FB;border:1px solid var(--rule,#e5ecf4);border-left:3px solid var(--accent,#F07300);border-radius:10px;max-width:980px}
.ss-photo-note svg{flex:none;margin-top:2px;color:var(--accent-dark,#C25E00)}
.ss-photo-note.pdp-photo-note{margin-top:10px;font-size:.72rem;padding:8px 10px}
.sec-navy .ss-photo-note,.gal2 .ss-photo-note,.cig-hero .ss-photo-note{background:rgba(255,255,255,.06);border-color:rgba(219,228,241,.2);border-left-color:var(--accent,#F07300);color:#C9D6E8}
.sec-navy .ss-photo-note svg,.gal2 .ss-photo-note svg,.cig-hero .ss-photo-note svg{color:#FFB066}
.gal2 .ss-photo-note{position:relative;z-index:1;margin-top:20px}
.plp-photo-note{margin-top:18px}
.ss-st-note{margin-top:18px}
.cig-page .ss-photo-note,.cig-head .ss-photo-note{margin:16px auto 0;text-align:left;font-size:.8rem}
/* ---- v216 Catalog Studio: starting-price basis note + "Popular sizes" row ---- */
.ss-price-basis{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:9px 12px;font-size:.76rem;line-height:1.5;color:var(--primary-dark,#001D3D);background:#EEF5FD;border:1px solid #CFE0F3;border-left:3px solid var(--primary,#004280);border-radius:10px;max-width:980px}
.ss-price-basis svg{flex:none;margin-top:2px;color:var(--primary,#004280)}
.ss-price-basis.pdp-price-basis{margin:10px 0 6px;font-size:.72rem;padding:8px 10px}
.ss-price-basis.plp-price-basis{margin:14px 0 0}
.ss-pop-row{margin:18px 0 6px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#FFF6EC,#FFFFFF 60%);border:1px solid #F6D9B8}
.ss-pop-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
.ss-pop-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--accent,#F07300);color:#fff}
.ss-pop-head h3{margin:0;font-size:1.05rem}
.ss-pop-sub{font-size:.78rem;color:var(--muted,#52606d)}
.ss-pop-grid{gap:14px}
@media(max-width:1100px){.ss-pop-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ss-pop-row{padding:12px}.ss-pop-grid.g4{grid-template-columns:1fr}}
/* v258: "Popular sizes" = slider (3 in view) placed after the first two rows of the grid */
.plp-grid.ssf-grid>.ss-pop-row,.plp-grid>.ss-pop-row{grid-column:1/-1;margin:4px 0;min-width:0}
.ss-pop-nav{display:inline-flex;gap:8px;margin-left:auto}
.ss-pop-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1.5px solid #F2C9A0;border-radius:50%;background:#fff;color:var(--primary-dark,#001D3D);cursor:pointer;box-shadow:0 2px 6px rgba(240,115,0,.12);transition:background .15s,border-color .15s,color .15s,opacity .15s}
.ss-pop-btn:hover{background:var(--accent,#F07300);border-color:var(--accent,#F07300);color:#fff}
.ss-pop-btn:focus-visible{outline:3px solid rgba(240,115,0,.35);outline-offset:2px}
.ss-pop-btn[disabled]{opacity:.35;pointer-events:none;box-shadow:none}
.ss-pop-row.no-scroll .ss-pop-nav{display:none}
.ss-pop-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px) / 3);gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:6px 4px 12px;scrollbar-width:thin;scrollbar-color:#F2C9A0 transparent}
.ss-pop-track>*{min-width:0;scroll-snap-align:start}
.ss-pop-track::-webkit-scrollbar{height:6px}
.ss-pop-track::-webkit-scrollbar-thumb{background:#F2C9A0;border-radius:3px}
.ss-pop-track::-webkit-scrollbar-track{background:transparent}
@media(max-width:1100px){.ss-pop-track{grid-auto-columns:calc((100% - 14px) / 2)}}
@media(max-width:560px){.ss-pop-track{grid-auto-columns:84%;gap:12px}.ss-pop-btn{width:34px;height:34px}.ss-pop-sub{display:none}}
@media(prefers-reduced-motion:reduce){.ss-pop-track{scroll-behavior:auto}}
/* v217, demand badges (Best Seller / Popular / Trending), PDP chip, Shop collections */
.pcard .ss-flag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;font-family:var(--display,'Plus Jakarta Sans',sans-serif);font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1;pointer-events:none;box-shadow:0 6px 14px -8px rgba(0,29,61,.55)}
.ss-flag-best{background:var(--primary-dark,#001D3D);color:#fff}
.ss-flag-best svg{color:#FFB547}
.ss-flag-trend{background:#fff;color:var(--accent-dark,#C45F00);box-shadow:inset 0 0 0 1.5px #F6C08A}
.ss-flag-pop{background:#fff;color:var(--primary,#004280);box-shadow:inset 0 0 0 1.5px var(--soft,#DBE4F1)}
.ss-flag-pop svg{color:#E11D48}
.ss-flag-sale{background:var(--danger,#DC2626);color:#fff}
.pcard .ss-flag.ss-flag-trend{box-shadow:inset 0 0 0 1.5px #F6C08A,0 6px 14px -8px rgba(0,29,61,.45)}
.pcard .ss-flag.ss-flag-pop{box-shadow:inset 0 0 0 1.5px var(--soft,#DBE4F1),0 6px 14px -8px rgba(0,29,61,.45)}
.chip.ss-dm-chip{gap:5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.chip.ss-dm-chip.ss-flag-best{background:var(--primary-dark,#001D3D);color:#fff}
.chip.ss-dm-chip.ss-flag-trend{background:var(--accent-soft,#FFF1E0);color:var(--accent-dark,#C45F00);box-shadow:none}
.chip.ss-dm-chip.ss-flag-pop{background:var(--soft,#DBE4F1);color:var(--primary,#004280);box-shadow:none}
.ss-tier-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ss-tier-chips .ss-tier{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-family:var(--display,'Plus Jakarta Sans',sans-serif);font-size:.8rem;font-weight:700;text-decoration:none;background:#fff;color:var(--primary-dark,#001D3D);box-shadow:inset 0 0 0 1.5px var(--rule,#DBE4F1);transition:background .15s,box-shadow .15s,color .15s}
.ss-tier-chips .ss-tier:hover{box-shadow:inset 0 0 0 1.5px var(--rule-dark,#A9BCD6)}
.ss-tier-chips .ss-tier.ss-flag-best svg{color:#F59E0B}
.ss-tier-chips .ss-tier.ss-flag-trend svg{color:var(--accent,#F07300)}
.ss-tier-chips .ss-tier.on{background:var(--primary-dark,#001D3D);color:#fff;box-shadow:none}
.ss-tier-chips .ss-tier.on svg{color:#FFB547}
@media(max-width:560px){.ss-tier-chips{gap:6px}.ss-tier-chips .ss-tier{padding:7px 12px;font-size:.76rem}}
.ss-zip-msg.ok{color:var(--ink,#1a1a1a)}
.ss-zip-msg.ok b{color:var(--success,#16a34a)}
.ss-zip-msg.bad{color:#b3261e}
.ss-zip-msg a{color:var(--primary,#004280);font-weight:700}
/* v241 - Shop by Use Cases dropdown + use-case links row */
.dept-dd{display:inline-flex;align-items:stretch}
.dept-dd>.dept .car{margin-left:2px;width:7px;height:7px}
.h7-dept .mega.mega-uc{left:auto;right:12px;min-width:0;width:min(1080px,calc(100vw - 40px));columns:4;column-gap:22px;padding:20px 22px 16px;z-index:60}
.dept-dd:hover>.mega-uc,.dept-dd:focus-within>.mega-uc{display:block;animation:pop .22s var(--ease,ease)}
.mega-uc::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega-uc .uc-col{display:flex;flex-direction:column;gap:1px;min-width:0;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:12px}
.mega-uc .uc-g{font-family:var(--display,inherit);font-weight:800;font-size:.92rem;color:var(--primary-dark,#002b55);padding:6px 8px;border-radius:8px;line-height:1.25}
.mega-uc .uc-g:hover{background:var(--bg,#f4f7fb);color:var(--primary,#004280)}
.mega-uc .uc-s{position:relative;font-size:.84rem;font-weight:600;color:var(--muted,#52606d);padding:4px 8px 4px 18px;border-radius:8px;line-height:1.3}
.mega-uc .uc-s::before{content:"";position:absolute;left:8px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--accent,#f07300);opacity:.75}
.mega-uc .uc-s:hover{color:var(--primary,#004280);background:var(--bg,#f4f7fb)}
.mega-uc .uc-all{column-span:all;-webkit-column-span:all;display:flex;justify-content:flex-end;border-top:1px solid var(--rule,#e2e8f0);padding-top:12px;margin-top:2px}
.drawer nav .sub2{padding-left:42px;font-size:.86rem;font-weight:600;color:var(--muted,#52606d)}
.ss-uc-chips{background:#fff;border-bottom:1px solid var(--rule,#e2e8f0)}
.ss-uc-chips .wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:14px;padding-bottom:14px}
.ss-uc-chips-t{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted,#52606d);margin-right:4px}
.ss-uc-chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;border:1px solid var(--rule,#dbe4f1);background:var(--bg,#f7fafd);font-size:.84rem;font-weight:700;color:var(--ink,#1a1a1a);line-height:1.2;transition:border-color .15s,color .15s,background .15s}
.ss-uc-chip:hover{border-color:var(--primary,#004280);color:var(--primary,#004280)}
.ss-uc-chip.on{background:var(--primary,#004280);border-color:var(--primary,#004280);color:#fff}
@media (max-width:1180px){.h7-dept .mega.mega-uc{columns:3}}
/* v243 - ZIP result stays readable inside the dark "Check your ZIP" band */
section.sec-navy.grid-tex .widget p.zip-msg.ok{color:#14532d!important}
section.sec-navy.grid-tex .widget p.zip-msg.bad{color:#991b1b!important}
section.sec-navy.grid-tex .widget p.zip-msg a{color:inherit;text-decoration:underline}
/* ---------- v258 Shop by Use Cases mega menu: group rail + live pane ---------- */
.h7-dept .mega.mega-uc.ucm{columns:auto;left:auto;right:12px;min-width:0;width:min(1040px,calc(100vw - 32px));max-height:min(580px,calc(100vh - 150px));padding:0;overflow:hidden;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0;border-radius:22px;border:1px solid rgba(0,66,128,.1);box-shadow:0 34px 70px -24px rgba(0,29,61,.4),0 2px 6px rgba(0,29,61,.06);z-index:60}
.dept-dd:hover>.mega-uc.ucm,.dept-dd:focus-within>.mega-uc.ucm{display:grid;animation:pop .22s var(--ease,ease)}
.ucm-rail{grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:2px;min-height:0;padding:18px 12px;overflow-y:auto;background:linear-gradient(180deg,#F5F8FC,#EDF2F8);border-right:1px solid #E3EAF3;scrollbar-width:thin}
.ucm-k{margin:0 10px 8px;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#52606d)}
.ucm .ucm-g{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:13px;color:var(--ink,#1a1a1a);text-decoration:none;transition:background .15s,box-shadow .15s}
.ucm-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff;color:var(--primary,#004280);box-shadow:0 1px 2px rgba(0,29,61,.08);transition:background .15s,color .15s}
.ucm-gt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ucm-gt b{font-family:var(--display,inherit);font-size:.86rem;line-height:1.25;color:var(--primary-dark,#001d3d)}
.ucm-gt small{font-size:.7rem;color:var(--muted,#52606d)}
.ucm-car{flex:none;color:var(--accent,#f07300);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.ucm .ucm-g:hover,.ucm .ucm-g.is-on{background:#fff;box-shadow:0 8px 20px -12px rgba(0,66,128,.4)}
.ucm .ucm-g.is-on .ucm-ic{background:var(--grad-molten,#f07300);color:#fff;box-shadow:0 6px 14px -6px rgba(240,115,0,.6)}
.ucm .ucm-g.is-on .ucm-car,.ucm .ucm-g:hover .ucm-car{opacity:1;transform:none}
.ucm .ucm-g:focus-visible{outline:3px solid rgba(240,115,0,.35);outline-offset:1px}
.ucm-panes{grid-row:1;grid-column:2;position:relative;min-height:0;overflow-y:auto;padding:22px 24px 24px;scrollbar-width:thin}
.ucm-pane{display:none}
.ucm-pane.is-on{display:block;animation:ucmIn .22s cubic-bezier(.22,.61,.36,1)}
@keyframes ucmIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.ucm-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #EDF2F8}
.ucm-pk{margin:0 0 4px;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark,#c45f00)}
.ucm .ucm-ph h4{margin:0;font-family:var(--display,inherit);font-size:1.22rem;font-weight:800;letter-spacing:-.015em;text-transform:none;color:var(--primary-dark,#001d3d)}
.ucm .ucm-shop{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#FFF3E6;color:var(--accent-dark,#c45f00);font-size:.8rem;font-weight:800;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.ucm .ucm-shop:hover{background:var(--accent,#f07300);color:#fff}
.ucm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ucm .ucm-t{display:flex;align-items:center;gap:12px;min-width:0;padding:9px;border:1px solid #E6EDF5;border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .2s,transform .2s}
.ucm .ucm-t:hover{border-color:#A9BCD6;box-shadow:0 14px 26px -18px rgba(0,66,128,.5);transform:translateY(-2px)}
.ucm .ucm-t:focus-visible{outline:3px solid rgba(240,115,0,.35);outline-offset:1px}
.ucm-ti{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:11px;overflow:hidden;background:#EEF3F9;color:var(--primary,#004280)}
.ucm-ti img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ucm .ucm-t:hover .ucm-ti img{transform:scale(1.07)}
.ucm-tt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ucm-tt b{font-family:var(--display,inherit);font-size:.84rem;line-height:1.25;color:var(--ink,#1a1a1a)}
.ucm-tt small{font-size:.7rem;color:var(--muted,#52606d)}
.ucm .ucm-t:hover .ucm-tt b{color:var(--primary,#004280)}
.ucm .ucm-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid #E6EDF5;border-radius:16px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:box-shadow .2s}
.ucm .ucm-hero:hover{box-shadow:0 20px 36px -24px rgba(0,66,128,.55)}
.ucm-hi{display:block;min-height:220px;background:#EEF3F9}
.ucm-hi img{display:block;width:100%;height:100%;object-fit:cover}
.ucm-ht{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px}
.ucm-ht b{font-family:var(--display,inherit);font-size:1.1rem;line-height:1.25;color:var(--primary-dark,#001d3d)}
.ucm-ht small{font-size:.84rem;line-height:1.5;color:var(--muted,#52606d)}
.ucm-ht em{margin-top:4px;font-style:normal;font-size:.86rem;font-weight:800;color:var(--accent-dark,#c45f00)}
.ucm-foot{grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:#fff;border-top:1px solid #E6EDF5}
.ucm-help{font-size:.82rem;color:var(--muted,#52606d)}
.ucm .ucm-help a{color:var(--primary,#004280);font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1180px){
.h7-dept .mega.mega-uc.ucm{right:8px;width:calc(100vw - 24px);grid-template-columns:250px minmax(0,1fr)}
.ucm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.ucm-gt small{display:none}
.ucm .ucm-hero{grid-template-columns:1fr}
.ucm-hi{min-height:160px}
}
@media (max-width:960px){.ucm-help{display:none}.ucm-foot{justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.ucm-pane.is-on{animation:none}}
/* v258 mobile drawer: use cases as an accordion */
.drawer nav details{margin:0}
.drawer nav summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.drawer nav summary::-webkit-details-marker{display:none}
.drawer nav .dr-uc>summary,.drawer nav .dr-uc-g>summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drawer nav .dr-uc>summary::after,.drawer nav .dr-uc-g>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 6px 3px 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.55;transform:rotate(45deg);transition:transform .2s}
.drawer nav details[open]>summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.drawer nav summary.sub{padding:13px 14px 13px 26px;border-radius:10px;font-family:var(--display,inherit);font-size:.92rem;font-weight:600;color:var(--muted,#52606d)}
.drawer nav summary.sub:hover{background:var(--bg,#f4f7fb)}
.drawer nav .dr-uc[open]>summary.sub{color:var(--primary-dark,#001d3d);font-weight:800}
.dr-uc-b{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 22px;padding-left:10px;border-left:2px solid #E6EDF5}
.drawer nav .dr-uc-all{padding:8px 10px;font-size:.84rem;font-weight:800;color:var(--accent-dark,#c45f00)}
.drawer nav .dr-uc-g>summary,.drawer nav .dr-uc-solo{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-family:var(--display,inherit);font-size:.88rem;font-weight:700;color:var(--ink,#1a1a1a)}
.drawer nav .dr-uc-g>summary:hover,.drawer nav .dr-uc-solo:hover{background:var(--bg,#f4f7fb)}
.dr-uc-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#EEF3F9;color:var(--primary,#004280)}
.dr-uc-ic svg{width:17px;height:17px}
.dr-uc-n{flex:1;min-width:0;line-height:1.25}
.drawer nav .dr-uc-g[open]>summary .dr-uc-ic{background:var(--accent,#f07300);color:#fff}
.dr-uc-l{display:flex;flex-direction:column;padding:2px 0 8px 42px}
.drawer nav .dr-uc-l a{padding:8px 10px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--muted,#52606d)}
.drawer nav .dr-uc-l a:first-child{color:var(--primary,#004280);font-weight:800}
.dr-uc-l a small{margin-left:4px;font-size:.72rem;font-weight:600;color:#9AAABD}
/* ---------- v263: top promo bar on one line, scrolling (marquee) ----------
The three offers run in a loop (4 identical sets, the track moves one set
per cycle), pause on hover, and stand still for reduced-motion users. */
.promo .promo-mq{position:relative;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.promo .promo-track{display:flex;width:max-content;animation:ss-promo-mq 32s linear infinite;will-change:transform}
.promo:hover .promo-track{animation-play-state:paused}
.promo .promo-set{display:flex;align-items:center;flex:none}
.promo .promo-set>span{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 30px;white-space:nowrap;line-height:1.4}
.promo .promo-set>span::before{content:"";position:absolute;left:-2.5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:rgba(255,176,102,.75)}
.promo .promo-set svg{flex:none;width:15px;height:15px;color:#ffb066}
@keyframes ss-promo-mq{to{transform:translateX(-25%)}}
@media (max-width:640px){.promo .promo-set>span{padding-inline:22px;font-size:.8rem}.promo .promo-track{animation-duration:26s}}
@media (prefers-reduced-motion:reduce){
.promo .promo-track{animation:none!important;width:auto}
.promo .promo-set[aria-hidden="true"]{display:none}
.promo .promo-mq{-webkit-mask-image:none;mask-image:none;overflow-x:auto;scrollbar-width:none}
.promo .promo-set{margin-inline:auto}
}
/* v264: header search box, live results from every building */
.search-res.is-busy{opacity:.55;transition:opacity .15s}
.search-res .search-note{padding:6px 12px 8px;font-size:.8rem;font-weight:700;color:var(--accent-dark,#c45f00)}
.search-res a.search-all{display:flex;justify-content:center;margin-top:6px;padding:12px;border-radius:12px;background:var(--bg,#f4f7fb);color:var(--primary,#004280);font-size:.88rem;font-weight:800;text-decoration:none}
.search-res a.search-all:hover,.search-res a.search-all.sel{background:var(--soft,#dbe4f1)}
.search-res .search-empty small{display:inline-block;margin:4px 0 6px;color:var(--muted,#52606d)}
/* v265: while the quick view / compare / saved box is open, the compare bar
and the Saved button step out of the way at once. */
.ss-modal-open .cmpbar,.ss-modal-open .ss-saved-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
/* v271: cart lines (drawer + cart page share one markup). Install state,
leg height and build notes are small secondary text under the name. */
.cline .ss-cline-meta{margin-top:3px;font-family:var(--sans,inherit);font-size:.72rem;font-weight:500;line-height:1.4;color:var(--muted,#5b6675)}
.cline .qty{margin-top:7px}
.cline .cline-r{text-align:right;white-space:nowrap}
.cline .cp{font-size:.95rem}
#cartdw .cline b{font-size:.84rem}
.cline.ss-optim{animation:ss-cline-in .25s ease-out}
@keyframes ss-cline-in{from{opacity:0;transform:translateY(-4px)}to{opacity:.9;transform:none}}
/* cart page size */
.cline.cline-big{grid-template-columns:110px 1fr auto;padding:16px;background:#fff}
.cline.cline-big img{width:110px;height:76px}
.cline.cline-big b{font-size:1rem}
.cline.cline-big .ss-cline-meta{font-size:.8rem}
.cline.cline-big .qty{margin-top:9px}
.cline.cline-big .cp{font-size:1.15rem}
@media (prefers-reduced-motion:reduce){.cline.ss-optim{animation:none}}
/* v271: the floating cart button sat on top of the open drawer's checkout button. */
body:has(#cartdw.open) .fab-cart{opacity:0;visibility:hidden;pointer-events:none}
/* v286: phone header on ONE line (menu · logo · state · account · cart) whatever
state is picked. The logo gives up width first (it never pushes the icons to a
second line); a long state name wraps to two small lines instead of being cut. */
@media (max-width:760px){
.h7-main{ column-gap:6px; }
.h7-main .logo{ flex:1 1 0; min-width:0; max-width:116px; }
.h7-main .logo img{ width:100%; max-width:116px; height:auto; }
.h7-main .h7-acts{ flex:0 0 auto; }
.h7-main .h7-acts .h7-act{ padding:6px 3px; }
.h7-main .h7-acts .state-pick .tx b{ max-width:70px; font-size:.6rem; line-height:1.1; white-space:normal; text-overflow:clip; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
}
@media (max-width:380px){
.h7-main .icon-btn.burger{ width:40px; height:40px; }
}
/* v286: the logo in the menu drawer keeps its shape (it was stretched to the full width). */
.drawer .dh img{ width:auto !important; height:38px !important; max-width:calc(100% - 56px); object-fit:contain; flex:0 1 auto; min-width:0; }
/* v291: product page FAQs are native . The theme's rule for its JS
accordion (.faq-body{max-height:0;overflow:hidden}) also hit these, so an open
answer was cut to a sliver. A closed hides its answer by itself. */
details > .faq-body{ max-height:none; overflow:visible; transition:none; }
.ss-faq .faq-body p{ margin:0; padding:0; line-height:1.6; }
/* v297: Shop by Use Cases menu.
1. While it is open the header sits above the sticky buy bar (z 940), the
cart button (z 920) and the chat bubble (z 1300). They covered the bottom
of the menu, and moving the mouse onto them closed it.
2. A tighter group list, so all nine groups fit without scrolling the rail
on a normal laptop screen. */
.hdr:has(.dept-dd:hover),.hdr:has(.dept-dd:focus-within),body.ss-mega-on .hdr{z-index:1400}
body.ss-mega-on .fab-cart,body.ss-mega-on .chatw{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
.h7-dept .mega.mega-uc.ucm{grid-template-columns:330px minmax(0,1fr)}
.ucm-rail{padding:12px 10px;gap:1px}
.ucm-k{margin:0 8px 6px}
.ucm .ucm-g{gap:10px;padding:6px 8px;border-radius:11px}
.ucm-ic{width:30px;height:30px;border-radius:9px}
.ucm-ic svg{width:17px;height:17px}
.ucm-gt b{font-size:.82rem;line-height:1.22}
.ucm-gt small{font-size:.68rem;line-height:1.2}
/* v298: /blog/ page, the homepage learning-center cards in a 3-column grid. */
.ss-blog .lc2-topics{margin:0 0 6px;padding-top:0;border-top:0}
.ss-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:24px}
.ss-blog-grid .lc2-feat a{border-radius:22px}
.ss-blog-grid .lc2-body{padding:18px 20px 20px;gap:8px}
.ss-blog-grid .ss-blog-h{margin:0;font-size:1.12rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ss-blog-grid .lc2-feat p{font-size:.88rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ss-blog .ss-pagination ul.page-numbers{justify-content:center}
@media (max-width:1024px){.ss-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ss-blog-grid{grid-template-columns:1fr;gap:16px}}
/* v299: quote card shown where an old Elementor Pro form used to be. */
.ss-ef-cta{max-width:640px;margin:0 auto;padding:26px 28px;border:1px solid var(--rule,#E3EAF3);border-radius:22px;background:#fff;box-shadow:0 26px 50px -32px rgba(0,66,128,.38);text-align:left}
.ss-ef-cta .ss-ef-k{margin:0 0 6px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark,#c45f00)}
.ss-ef-cta h3{margin:0 0 8px;font-size:1.4rem;line-height:1.2;color:var(--primary-dark,#001d3d)}
.ss-ef-cta p{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--body,#3c4a5a)}
.ss-ef-btns{display:flex;flex-wrap:wrap;gap:10px}
.ss-ef-title{margin:0}