/* Product sample revision: layered product presentation, scoped to Rail Clip. */
.clip-page-v6{--clip-shadow:0 24px 52px #173b4b12;--clip-border:#d3dcd6;background:#fff}
.clip-hero{isolation:isolate;position:relative;overflow:hidden;background:radial-gradient(ellipse at 78% 30%,#fff 0%,#edf1ea 50%,#dfe7e3 100%);padding:62px 0 48px}
.clip-hero::before{content:"";position:absolute;inset:0 0 0 56%;z-index:-1;background:linear-gradient(138deg,#cfddd9aa,#f5f5ef 58%);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
.clip-hero-lines{position:absolute;inset:0;z-index:-1;background:linear-gradient(119deg,transparent 60%,#9bacaa30 60% calc(60% + 1px),transparent calc(60% + 1px)),linear-gradient(119deg,transparent 76%,#a9b7b329 76% calc(76% + 1px),transparent calc(76% + 1px));pointer-events:none}
.clip-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:72px;align-items:center}
.clip-hero-copy{min-width:0;position:relative;z-index:1}
.clip-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;color:#526b70;margin-bottom:18px;display:flex;gap:13px;align-items:center}
.clip-kicker::before{content:"";display:block;width:33px;height:2px;background:#b09a5b}
.clip-page-v6 .clip-hero h1{color:var(--teal);font-size:84px;line-height:1;letter-spacing:-.025em;text-transform:capitalize}
.clip-hero-lead{color:#53696e;font-size:21px;line-height:1.5;margin-top:20px}
.clip-hero-specs{margin:30px 0 0;display:grid;gap:15px}
.clip-hero-spec{display:flex;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:1px solid #bccac55c}
.clip-hero-spec>.icon{width:20px;height:20px;color:#8e7a3d;margin-top:2px}
.clip-hero-spec>div{display:grid;grid-template-columns:125px minmax(0,1fr);gap:16px;flex:1}
.clip-hero-spec dt{font-weight:600;color:#2f4c56;font-size:14px}.clip-hero-spec dd{font-size:14px;line-height:1.5;color:#52676d;margin:0}
.clip-hero-actions{margin-top:29px;display:flex;gap:27px;align-items:center;flex-wrap:wrap}
.clip-hero-actions .button{box-shadow:0 6px 16px #87713320;min-height:54px;padding-inline:24px}
.clip-hero-actions>.text-link{font-size:15px;color:var(--teal)}
.clip-gallery{min-width:0;position:relative}
.clip-image-stage{min-height:390px;aspect-ratio:1.32;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center}
.clip-image-stage::before{content:"";position:absolute;inset:11% 4% 12% 6%;z-index:-2;background:linear-gradient(145deg,#cadbd4,#f5f6f0);border:1px solid #fff9;box-shadow:18px 22px 45px #1b454523;transform:rotate(-5deg);border-radius:4px}
.clip-image-stage::after{content:"";position:absolute;left:12%;right:8%;bottom:15%;height:20%;z-index:-1;background:#1a414525;filter:blur(25px);border-radius:50%}
.clip-stage-ring{position:absolute;inset:2% 3% 0 5%;border:1px solid #789a982e;border-radius:50%;transform:rotate(-15deg);z-index:-1}
.clip-image-stage>img{width:100%;height:100%;max-height:460px;object-fit:contain;filter:drop-shadow(0 18px 14px #18353b21);position:relative;z-index:1;transition:opacity .2s}

.clip-image-stage:has(img[src$="rail-clips.jpg"])>img{mix-blend-mode:multiply;padding:20px}
.clip-gallery-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:25px}
.clip-gallery-tab{border:1px solid #c4d2ce;background:#ffffff80;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 7px 10px;color:#52696e;font-size:12px;line-height:1.3;transition:border-color .2s,background .2s,box-shadow .2s}
.clip-gallery-tab[aria-pressed="true"]{border-color:#917a3b;background:#fff;box-shadow:0 7px 16px #14384310;color:var(--teal)}
.clip-gallery-tab:hover{background:#fff;border-color:#617d81}
.clip-thumb{height:54px;display:flex;align-items:center;justify-content:center;width:100%}.clip-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.clip-breadcrumb{border-top:1px solid #d6dfd9;border-bottom:1px solid #e0e5e0;background:#f7f8f5;color:#607276;font-size:13px}
.clip-breadcrumb nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-block:17px}.clip-breadcrumb a{text-decoration:none}.clip-breadcrumb a:hover{text-decoration:underline;color:var(--teal)}.clip-breadcrumb [aria-current]{font-weight:600;color:var(--teal)}
.clip-hero-copy,.clip-gallery{animation:clip-hero-enter .55s ease-out both}.clip-gallery{animation-delay:.08s}@keyframes clip-hero-enter{from{opacity:.6;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(min-width:1550px){.clip-hero-grid{gap:95px}.clip-image-stage{min-height:440px}.clip-hero{padding-top:68px;padding-bottom:56px}}
@media(max-width:1100px){.clip-hero-grid{gap:35px;grid-template-columns:1fr 1fr}.clip-page-v6 .clip-hero h1{font-size:70px}.clip-hero-spec>div{grid-template-columns:104px minmax(0,1fr);gap:10px}.clip-image-stage{min-height:340px}.clip-hero-actions{gap:19px}.clip-hero-actions .button{font-size:14px;padding-inline:18px}.clip-hero-actions>.text-link{font-size:14px}}
@media(max-width:767px){.clip-hero{padding:34px 0 32px}.clip-hero::before{inset:15% 0 28% 20%}.clip-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}.clip-hero-copy{display:contents}.clip-kicker{grid-row:1;margin:0;font-size:10px}.clip-page-v6 .clip-hero h1{grid-row:2;font-size:58px;margin-top:-13px}.clip-gallery{grid-row:3}.clip-hero-lead{grid-row:4;font-size:19px;margin:3px 0 0}.clip-hero-specs{grid-row:6;margin:0;gap:12px}.clip-hero-actions{grid-row:5;margin:0}.clip-image-stage{min-height:0;aspect-ratio:1.35;max-height:350px}.clip-image-stage>img{max-height:310px}.clip-gallery-tabs{margin-top:24px;gap:8px}.clip-thumb{height:42px}.clip-gallery-tab{font-size:11px;padding:5px 4px 8px}.clip-hero-spec>div{grid-template-columns:107px minmax(0,1fr);gap:12px}.clip-hero-spec dt,.clip-hero-spec dd{font-size:13px}.clip-hero-spec>.icon{width:18px;height:18px}.clip-hero-spec{gap:10px;padding-bottom:12px}.clip-hero-actions{gap:21px}.clip-breadcrumb{font-size:11px}.clip-breadcrumb nav{gap:7px;padding-block:13px}}
@media(prefers-reduced-motion:reduce){.clip-hero-copy,.clip-gallery{animation:none}.clip-gallery-tab,.clip-image-stage>img{transition:none}}
.clip-page-v6 .clip-unit-enter{animation:clip-unit-enter .42s ease-out both}.clip-page-v6 .clip-media-enter{animation:clip-media-enter .5s ease-out both}
@keyframes clip-unit-enter{from{opacity:.7;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes clip-media-enter{from{opacity:.7;transform:scale(.988)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.clip-page-v6 .clip-unit-enter,.clip-page-v6 .clip-media-enter{animation:none}}