/* Components for inner pages. Same intent uses the same component on every page. */
.jb [hidden]{display:none!important}
/* Card photo areas: white so the card reads as one piece on grey sections */
.jb .shop .card .ph,.jb .pcol .ph{background:#fff}
.jb .card.w .ph{background:#fff}

/* Segmented picker + result panel (climate zone, finish, function...) */
.jb .pick{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:22px;box-shadow:0 1px 2px rgba(30,32,34,.05)}
.jb .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--primer);border-radius:999px;padding:4px;gap:4px}
.jb .seg button{appearance:none;border:0;background:transparent;border-radius:999px;min-height:44px;padding:0 8px;white-space:nowrap;font:600 14.5px/1.2 'Onest',sans-serif;color:var(--ink2);cursor:pointer}
.jb .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,24,27,.12)}
.jb .seg button:hover{color:var(--ink)}
.jb .pick-out{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jb .pick-out>div{background:var(--primer);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.jb .pick-out b{font-family:'Familjen Grotesk',sans-serif;font-size:20px}
.jb .pick-out .ok{color:var(--blue);font-weight:600;font-size:15px}
.jb .pick-out .no{color:var(--bronze);font-weight:600;font-size:15px}
.jb .pick-out p{font-size:15px;color:var(--ink2)}
.jb .pick-out .best{background:var(--bluesoft);box-shadow:inset 0 0 0 2px var(--blue)}
.jb .pick-say{font-size:16px}
.jb .pick-say b{font-family:'Familjen Grotesk',sans-serif}

/* Two-product spec sheet */
.jb .spec2{background:#fff;border-radius:16px;overflow:hidden}
.jb .spec2 .r{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:24px;padding:15px 28px;font-size:15.5px;align-items:baseline}
.jb .spec2 .r:nth-child(even){background:#F7F9FB}
.jb .spec2 .r.th{background:var(--ink)!important;color:#fff;padding:18px 28px}
.jb .spec2 .r.th b{font-family:'Familjen Grotesk',sans-serif;font-size:20px}
.jb .spec2 .r.th span{display:block;font-size:13.5px;color:#B9BCBD;font-weight:500;margin-top:2px}
.jb .spec2 .k{color:var(--ink2);font-size:14.5px}
.jb .spec2 .diff{font-weight:600}
.jb .spec2 .diff.up{color:var(--blue)}

/* U-factor style gauge: lower is better */
.jb .gauge{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.jb .gauge .g{display:grid;grid-template-columns:120px 1fr 64px;gap:16px;align-items:center;font-size:15px}
.jb .gauge .g b{font-family:'Familjen Grotesk',sans-serif}
.jb .gauge .bar{height:12px;border-radius:6px;background:var(--nickel);position:relative;overflow:hidden}
.jb .gauge .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--pine2)}
.jb .gauge .bar i.b{background:var(--blue)}
.jb .gauge .v{font-weight:600;text-align:right}
.jb .gauge-note{font-size:13.5px;color:var(--ink2)}

/* Measuring calculator */
.jb .calc{background:#fff;border-radius:18px;padding:28px;display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;box-shadow:0 1px 2px rgba(30,32,34,.05)}
.jb .calc svg{display:block;width:100%;height:auto}
.jb .calc-in{display:flex;flex-direction:column;gap:18px}
.jb .calc-grp{display:flex;flex-direction:column;gap:8px}
.jb .calc-grp>span{font-weight:600;font-size:15px}
.jb .calc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jb .calc label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}
.jb .calc input{width:100%;min-height:46px;border:0;border-radius:10px;background:var(--primer);padding:0 12px;font:600 16px 'Onest',sans-serif;color:var(--ink)}
.jb .calc input:focus{outline:2px solid var(--blue);outline-offset:0}
.jb .calc-out{background:var(--blue);color:#fff;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.jb .calc-out span{font-size:13.5px;color:#C9DBF2}
.jb .calc-out b{font-family:'Familjen Grotesk',sans-serif;font-size:30px;line-height:1.1;white-space:nowrap}
.jb .calc-out p{font-size:14.5px;color:#E3ECF7}
.jb .calc-out p.warn{color:#FFD58A}

/* Photo split: two options side by side, each with a real photo */
.jb .psplit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.jb .pcol{background:#fff;border-radius:18px;overflow:hidden;display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
.jb .pcol .ph{height:260px}
.jb .pcol h3{padding:24px 28px 0}
.jb .pcol .d{padding:10px 28px 0;color:var(--ink2);font-size:15.5px}
.jb .pcol ul{list-style:none;margin:0;padding:18px 28px 28px;display:flex;flex-direction:column;gap:10px}
.jb .pcol li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.jb .pcol li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--pine2)}
.jb .pcol li.n::before{content:"\2013";color:var(--ink2)}

/* Coverage: covered vs not covered */
.jb .cov{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jb .cov>div{background:#fff;border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.jb .cov h3{font-size:19px}
.jb .cov ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.jb .cov li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.jb .cov .yes li::before{content:"\2713";position:absolute;left:0;font-weight:700;color:var(--blue)}
.jb .cov .no li::before{content:"\2715";position:absolute;left:0;font-weight:700;color:var(--bronze)}
.jb .war-side{display:flex;flex-direction:column;gap:16px}
.jb .war-lede{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;max-width:860px;font-size:18px}

/* Section photo band beside text */
.jb .ptext{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.jb .ptext figure{margin:0}
.jb .ptext img{display:block;width:100%;height:420px;object-fit:cover;border-radius:18px}

.jb .gap-top{margin-top:64px}
.jb .sub-h{margin-bottom:24px}

@media (max-width:1100px){
.jb .calc{grid-template-columns:1fr}
.jb .calc svg{max-width:260px}
}
@media (max-width:900px){
.jb .pick-out,.jb .psplit,.jb .cov,.jb .ptext{grid-template-columns:1fr}
.jb .ptext{gap:28px}
.jb .ptext img{height:300px}
.jb .spec2 .r{grid-template-columns:1fr 1fr;row-gap:4px}
.jb .spec2 .r .k{grid-column:1/-1}
.jb .spec2 .r.th>span:first-child{display:none}
}
@media (max-width:600px){
.jb .pick,.jb .calc{padding:20px}
.jb .seg{grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:18px}
.jb .seg button{border-radius:14px}
.jb .spec2 .r{padding:14px 18px}
.jb .gauge .g{grid-template-columns:90px 1fr 52px;gap:10px}
.jb .pcol .ph{height:220px}
.jb .pcol h3{padding:22px 22px 0}.jb .pcol .d{padding:10px 22px 0}.jb .pcol ul{padding:16px 22px 24px}
.jb .calc-out b{font-size:26px}
}