/* Handy Store Fixtures, content layout kit.
   Supplied by Cornerstone SEO, 2026-10-27.
   Styles the rewritten page content. Every class is namespaced hsf- so it cannot collide
   with anything already on the site. Add once, site wide. Nothing else needs to change. */
.hsf{font-family:inherit;}
.hsf h2{font-family:gilroyextrabold,Arial,sans-serif;color:#ec2227;font-size:30px;line-height:1.12;margin:0 0 4px;}
.hsf h3{font-family:gilroyextrabold,Arial,sans-serif;color:#2f2d2c;font-size:19px;line-height:1.2;margin:0 0 6px;}
.hsf p{font-size:16px;line-height:1.6;color:#45423f;margin:0 0 14px;}
.hsf .eyebrow{display:block;font-family:futuramedium,Arial,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#95b3c1;margin:0 0 4px;}
.hsf-sec{margin:0 0 34px;}
.hsf-lead{font-size:19px!important;line-height:1.55!important;color:#2f2d2c!important;}

/* key numbers strip */
.hsf-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:#e4e1df;border:1px solid #e4e1df;margin:22px 0 30px;}
.hsf-specs div{background:#fff;padding:16px 18px;}
.hsf-specs .n{display:block;font-family:gilroyextrabold,Arial,sans-serif;font-size:25px;line-height:1.05;color:#ec2227;margin:0 0 3px;}
.hsf-specs .t{display:block;font-family:futuramedium,Arial,sans-serif;font-size:13.5px;line-height:1.4;color:#5d5a58;}

/* problem to product chooser, same component as the gondola accessories page */
.hsf-pick{border:1px solid #e4e1df;border-top:5px solid #ec2227;background:#fbfaf9;margin:24px 0 30px;}
.hsf-pick-hd{padding:18px 26px 2px;}
.hsf-pick-hd .eyebrow{margin:0 0 5px;}
.hsf-pick-hd h2{font-size:24px;margin:0 0 2px;}
.hsf-pick-hd p{font-size:16px;color:#5d5a58;margin:0;}
.hsf-pick ul{list-style:none;margin:12px 0 0;padding:0 12px 12px;}
.hsf-pick li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #eceae8;margin:0 0 6px;padding:8px 16px;transition:border-color .15s,box-shadow .15s;}
.hsf-pick li:hover{border-color:#d7d3d0;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.hsf-pick li:last-child{margin-bottom:0;}
.hsf-pick .ic{flex:none;width:32px;height:32px;border-radius:50%;background:#f1f6f8;display:flex;align-items:center;justify-content:center;}
.hsf-pick .ic svg{width:18px;height:18px;fill:none;stroke:#5b8ca3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.hsf-pick .pb{flex:1 1 42%;min-width:190px;font-family:futuramedium,Arial,sans-serif;font-size:15.5px;line-height:1.35;color:#2f2d2c;}
.hsf-pick .sol{flex:1 1 52%;display:flex;flex-wrap:wrap;gap:6px;}
.hsf-pick .sol a{display:inline-block;font-family:futuramedium,Arial,sans-serif;font-size:13px;line-height:1;padding:6px 12px;border:1px solid #d9b5b8;border-radius:40px;color:#931a24;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.hsf-pick .sol a:hover{background:#ec2227;border-color:#ec2227;color:#fff;}

/* numbered walkthrough */
.hsf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin:18px 0 22px;counter-reset:s;}
.hsf-steps li{list-style:none;background:#fff;border:1px solid #e4e1df;border-left:3px solid #ec2227;padding:16px 18px 17px;margin:0;}
.hsf-steps li:before{counter-increment:s;content:counter(s);display:inline-block;font-family:gilroyextrabold,Arial,sans-serif;font-size:12px;line-height:21px;width:21px;height:21px;text-align:center;border-radius:50%;background:#ec2227;color:#fff;margin:0 0 9px;}
.hsf-steps strong{display:block;font-family:gilroyextrabold,Arial,sans-serif;font-size:16.5px;color:#2f2d2c;margin:0 0 5px;}
.hsf-steps span{display:block;font-size:14.5px;line-height:1.5;color:#5d5a58;}

/* two spec cards side by side */
.hsf-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin:16px 0 22px;}
.hsf-pair div{background:#fbfaf9;border:1px solid #e4e1df;padding:16px 18px;}
.hsf-pair .h{display:block;font-family:gilroyextrabold,Arial,sans-serif;font-size:17px;color:#ec2227;margin:0 0 6px;}
.hsf-pair span{font-size:14.5px;line-height:1.5;color:#45423f;}

/* spec table */
.hsf-table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:15px;}
.hsf-table th{text-align:left;font-family:futuramedium,Arial,sans-serif;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#5d5a58;padding:0 12px 9px;border-bottom:2px solid #ec2227;}
.hsf-table td{padding:13px 12px;border-bottom:1px solid #eceae8;vertical-align:top;line-height:1.5;color:#45423f;}
.hsf-table tr:last-child td{border-bottom:1px solid #e4e1df;}
.hsf-table .nm{font-family:gilroyextrabold,Arial,sans-serif;font-size:16px;white-space:nowrap;}
.hsf-table .dim{font-family:futuramedium,Arial,sans-serif;white-space:nowrap;color:#2f2d2c;}

/* faq */
.hsf-faq{border-top:1px solid #e4e1df;margin:26px 0 0;}
.hsf-faq .q{border-bottom:1px solid #e4e1df;padding:16px 0 15px;}
.hsf-faq .q strong{display:block;font-family:gilroyextrabold,Arial,sans-serif;font-size:17px;line-height:1.3;color:#2f2d2c;margin:0 0 6px;}
.hsf-faq .q span{display:block;font-size:15.5px;line-height:1.6;color:#45423f;}

/* closing band */
.hsf-cta{background:#2f2d2c;padding:26px 30px;margin:32px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.hsf-cta .tx{flex:1 1 300px;}
.hsf-cta .tx b{display:block;font-family:gilroyextrabold,Arial,sans-serif;font-size:21px;color:#fff;margin:0 0 5px;}
.hsf-cta .tx span{display:block;font-size:15px;line-height:1.5;color:#c9c4c0;}
.hsf-cta .ax{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:9px;}
.hsf-cta .ax a{display:inline-block;font-family:futuramedium,Arial,sans-serif;font-size:14.5px;padding:11px 20px;background:#ec2227;color:#fff;text-decoration:none;transition:background .15s;}
.hsf-cta .ax a.alt{background:transparent;border:1px solid #6d6764;color:#fff;}
.hsf-cta .ax a:hover{background:#c71a1f;}
.hsf-cta .ax a.alt:hover{background:#3d3a38;}

@media (max-width:700px){
.hsf h2{font-size:25px;}
.hsf-lead{font-size:17px!important;}
.hsf-pick li{flex-wrap:wrap;gap:12px;}
.hsf-pick .pb,.hsf-pick .sol{flex:1 1 100%;}
.hsf-table .dim{white-space:normal;}
.hsf-cta{padding:22px;}
}

/* images. Added 2026-10-14. Every photo is one the client already publishes on that same
   page, so nothing here needs new photography. width and height are set on every img so the
   page does not jump while they load, and object-fit crops to a common shape. */
.hsf-fig{margin:18px 0 24px;}
.hsf-fig img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border:1px solid #e4e1df;background:#fbfaf9;}
.hsf-fig figcaption{font-family:futuramedium,Arial,sans-serif;font-size:13px;line-height:1.45;
 color:#5d5a58;margin:8px 0 0;}
.hsf-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
 margin:18px 0 26px;}
.hsf-figs figure{margin:0;}
.hsf-figs img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
 border:1px solid #e4e1df;background:#fbfaf9;}
.hsf-figs figcaption{font-family:futuramedium,Arial,sans-serif;font-size:12.5px;line-height:1.4;
 color:#5d5a58;margin:7px 0 0;}
/* plans are drawings, not photos: show them whole rather than cropping */
.hsf-figs.plans img{aspect-ratio:auto;object-fit:contain;background:#fff;}
/* image beside copy */
.hsf-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
 align-items:start;margin:16px 0 26px;}
.hsf-split img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
 border:1px solid #e4e1df;background:#fbfaf9;}
.hsf-split .tx>*:first-child{margin-top:0;}
.hsf-split figcaption{font-family:futuramedium,Arial,sans-serif;font-size:12.5px;
 color:#5d5a58;margin:7px 0 0;}
@media (max-width:700px){
.hsf-split{grid-template-columns:1fr;gap:14px;}
}