/* Phone tab bar in the iOS 26 manner: a glass capsule with the sections and a separate call button.
   Scrolling down folds the capsule into a small pill with the current section; the call button stays. */
.tabbar{display:none}
@media(max-width:650px){
 :root{--bar-inset:12px;--bar-ease:cubic-bezier(.2,.8,.2,1)}
 .tabbar{position:fixed;z-index:40;left:var(--bar-inset);right:var(--bar-inset);bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:10px;pointer-events:none;transition:transform .28s var(--bar-ease),opacity .2s}
 .tabbar>*{pointer-events:auto}
 .tabbar-tabs,.tabbar-mini{background:rgba(250,252,255,.6);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 34px rgba(6,22,56,.2),0 2px 8px rgba(6,22,56,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4)}
 .tabbar-tabs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:5px;border-radius:32px;transform-origin:left bottom;transition:opacity .2s,transform .32s var(--bar-ease),visibility 0s}
 .tabbar-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:6px 2px 5px;border-radius:26px;color:#3c4f6b;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:-.01em;text-decoration:none;transition:background .2s,color .2s,transform .15s}
 .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tabbar svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .tabbar-tabs a[aria-current]{color:var(--blue);background:rgba(6,70,206,.1)}
 .tabbar-tabs a:active,.tabbar-mini:active{transform:scale(.93)}
 .tabbar a:focus-visible,.tabbar-mini:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
 /* The call is the main action: solid brand colour, readable over any photo; the light rim keeps it apart from the blue hero. */
 .tabbar-call{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(6,22,56,.3),0 2px 6px rgba(6,22,56,.16),inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.3);transform-origin:right bottom;transition:transform .32s var(--bar-ease)}
 .tabbar-call svg{width:27px;height:27px}
 .tabbar-call:active{transform:scale(.93)}
 .tabbar .tabbar-call:focus-visible{outline-offset:3px}
 .tabbar-mini{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;max-width:calc(100% - 64px);height:48px;margin:0;padding:0 18px 0 14px;border-radius:24px;color:var(--blue);font:inherit;font-size:13px;font-weight:650;letter-spacing:-.01em;cursor:pointer;-webkit-appearance:none;appearance:none;opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transform-origin:left bottom;transition:opacity .16s,transform .32s var(--bar-ease),visibility 0s linear .32s}
 .tabbar-mini svg{width:21px;height:21px}
 /* Folded while the page scrolls down. */
 .tabbar-compact .tabbar-tabs{opacity:0;visibility:hidden;transform:translateY(8px) scale(.94);transition:opacity .18s,transform .32s var(--bar-ease),visibility 0s linear .32s}
 .tabbar-compact .tabbar-mini{opacity:1;visibility:visible;transform:none;transition:opacity .22s .06s,transform .32s var(--bar-ease),visibility 0s}
 .tabbar-compact .tabbar-call{transform:scale(.75)}
 .tabbar-compact .tabbar-call:active{transform:scale(.7)}
 /* The keyboard needs the room while a field is being filled in. */
 .tabbar-hidden .tabbar{transform:translateY(calc(100% + 24px));opacity:0}
 .tabbar-hidden .tabbar>*{pointer-events:none}
 body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
 /* Price and request button float above the bar, like a mini-player above an iOS tab bar. */
 .product-page .mobile-product-actions{left:var(--bar-inset);right:var(--bar-inset);bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:9px 9px 9px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 10px 28px rgba(6,22,56,.16),inset 0 1px 0 rgba(255,255,255,.95);z-index:39;transition:transform .32s var(--bar-ease),right .32s var(--bar-ease),padding .32s var(--bar-ease)}
 .product-page .mobile-product-actions strong{transition:font-size .32s var(--bar-ease)}
 .mobile-product-actions .cta-short{display:none}
 body.product-page,body:has(.mobile-product-actions){padding-bottom:calc(166px + env(safe-area-inset-bottom,0px))}
 /* While comparing, the comparison bar takes that place instead. */
 .product-page.has-comparison .mobile-product-actions{display:none}
 .compare-bar,.product-page.has-comparison .compare-bar{left:var(--bar-inset);right:var(--bar-inset);width:auto;transform:none;bottom:calc(84px + env(safe-area-inset-bottom,0px));transition:transform .32s var(--bar-ease),right .32s var(--bar-ease)}
 body.has-comparison,body.has-comparison:has(.mobile-product-actions){padding-bottom:calc(220px + env(safe-area-inset-bottom,0px))}
 /* Folded: the card or the comparison drops into the bar's row, next to the call button. */
 .tabbar-compact.product-page .tabbar-mini,.tabbar-compact.has-comparison .tabbar-mini{opacity:0;visibility:hidden;transition:opacity .16s,transform .32s var(--bar-ease),visibility 0s linear .32s}
 .product-page.tabbar-compact .mobile-product-actions{transform:translateY(74px);right:calc(var(--bar-inset) + 56px);padding-left:14px}
 .product-page.tabbar-compact .mobile-product-actions strong{font-size:22px}
 body.tabbar-compact.has-comparison .compare-bar{transform:translateY(74px);right:calc(var(--bar-inset) + 56px)}
 /* Beside a taller card the call button lines up with its middle (and with the comparison's buttons). */
 .tabbar-compact.product-page .tabbar-call,.tabbar-compact.has-comparison .tabbar-call{transform:translateY(-10px) scale(.75)}
 .tabbar-compact.product-page .tabbar-call:active,.tabbar-compact.has-comparison .tabbar-call:active{transform:translateY(-10px) scale(.7)}
}
/* Narrow phones keep the full labels by giving the bar a little more width. */
@media(max-width:360px){:root{--bar-inset:8px}.tabbar-tabs a{font-size:10.5px}}
@media(max-width:374px){
 .product-page.tabbar-compact .mobile-product-actions .cta-full{display:none}
 .product-page.tabbar-compact .mobile-product-actions .cta-short{display:inline}
 .product-page.tabbar-compact .mobile-product-actions .button{min-width:0;padding-left:12px;padding-right:12px}
 .product-page.tabbar-compact .mobile-product-actions strong{font-size:20px}
}
@media(max-width:650px) and (prefers-reduced-motion:reduce){
 .tabbar,.tabbar *,.product-page .mobile-product-actions,.product-page .mobile-product-actions strong,.compare-bar{transition:none!important}
}
@media(max-width:650px) and (prefers-reduced-transparency:reduce){
 .tabbar-tabs,.tabbar-mini,.product-page .mobile-product-actions{background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 @media(max-width:650px){.tabbar-tabs,.tabbar-mini,.product-page .mobile-product-actions{background:rgba(255,255,255,.96)}}
}