/* House of Norm — Product single-page portfolio */
.product-page{background:#fff;color:#222}
#nav2 a.active,#nav2 a.active:visited{color:#f00!important}
.product-main{width:min(1180px,calc(100% - 48px));margin:38px auto 90px}
.product-hero{border-top:1px solid #d7d7d7;padding-top:34px;margin-bottom:62px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:700;color:#c41230;margin:0 0 12px}
.product-hero h1{font:700 clamp(32px,4vw,58px)/1.03 Arial,sans-serif;letter-spacing:-.035em;margin:0 0 18px;max-width:900px}
.hero-copy{max-width:770px;font:16px/1.6 Arial,sans-serif;color:#555;margin:0}
.story{padding:42px 0 54px;border-top:1px solid #ddd}
.story-head{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;margin-bottom:24px}
.story-head>span{font:700 12px/1 Arial,sans-serif;color:#c41230;padding-top:5px}
.story h2{font:700 19px/1.2 Arial,sans-serif;letter-spacing:.055em;margin:0 0 6px}
.story-head p{font:14px/1.45 Arial,sans-serif;color:#666;margin:0}
.slider-wrap{width:100%;max-width:900px;margin:0 auto}
.slider-wrap .twentytwenty-container{width:100%!important;max-width:900px!important;margin:0 auto}
.slider-wrap .twentytwenty-container img{display:block;width:100%!important;max-width:100%!important;height:auto!important}
.skills{text-align:center;font:12px/1.5 Arial,sans-serif;letter-spacing:.03em;color:#777;margin:18px 0 0}
.skills b{color:#c41230;padding:0 5px}
.system-grid{display:grid;gap:16px}
.system-grid.three{grid-template-columns:repeat(3,1fr)}
.system-grid.two{grid-template-columns:repeat(2,1fr)}
.system-grid img{display:block;width:100%;height:auto;background:#f7f7f7}
.final-story{padding-bottom:20px}
@media(max-width:760px){.product-main{width:calc(100% - 28px);margin-top:26px}.story{padding:34px 0 42px}.story-head{grid-template-columns:36px 1fr;gap:10px}.system-grid.three,.system-grid.two{grid-template-columns:1fr}.product-hero h1{font-size:34px}}

/* Conair Trimmer only — smaller display size to match the other portfolio pieces */
.conair-slider {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.conair-slider .twentytwenty-container {
  max-width: 680px !important;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .conair-slider,
  .conair-slider .twentytwenty-container {
    max-width: 100% !important;
  }
}


/* Product page TwentyTwenty compatibility
   Keep the AFTER image in normal flow so the slider has intrinsic height in
   Dreamweaver, while the BEFORE image remains the clipped overlay in browsers. */
.slider-wrap .twentytwenty-container > img:nth-of-type(2),
.slider-wrap .twentytwenty-container > img.twentytwenty-after {
  position: relative !important;
  top: auto !important;
}
.slider-wrap .twentytwenty-container > img:nth-of-type(1),
.slider-wrap .twentytwenty-container > img.twentytwenty-before {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}