/* Key-Point: scoped shelf surfaces; no changes to product/quote pages. */
.kp-shelf-page .hero h1{font-size:clamp(25px,4vw,36px)}
.kp-shelf-page #grid{gap:24px;padding-top:12px}
.kp-shelf-page .shelf-card{min-width:0;padding:7px 7px 0;border:1px solid #d8dde4;border-radius:12px;overflow:visible;background:#fff;box-shadow:1px 1px #bdc5cf,2px 2px #bdc5cf,3px 3px #bdc5cf,4px 4px #bdc5cf,5px 5px #bdc5cf,6px 6px #bdc5cf,9px 15px 19px #13203417;transition:transform .3s,opacity .3s,filter .3s}
.kp-shelf-page .shelf-card-media{position:relative;isolation:isolate;border:1px solid #c8cfd8;border-radius:6px;aspect-ratio:1/1;overflow:hidden;background:#edf0f3}
.kp-shelf-page .shelf-wall{position:absolute;inset:0;display:block;pointer-events:none}
.kp-shelf-page .shelf-back{inset:17px 17px 21px;background:linear-gradient(135deg,#e6eaee,#fafbfc);box-shadow:inset 5px 6px 11px #233d5a22}
.kp-shelf-page .shelf-top{clip-path:polygon(0 0,100% 0,calc(100% - 17px) 17px,17px 17px);background:linear-gradient(#b3bdca,#d1d8e1)}
.kp-shelf-page .shelf-left{clip-path:polygon(0 0,17px 17px,17px calc(100% - 21px),0 100%);background:linear-gradient(90deg,#bfc8d3,#e3e8ee)}
.kp-shelf-page .shelf-right{clip-path:polygon(100% 0,calc(100% - 17px) 17px,calc(100% - 17px) calc(100% - 21px),100% 100%);background:linear-gradient(90deg,#d7dde5,#fafbfd)}
.kp-shelf-page .shelf-floor{clip-path:polygon(17px calc(100% - 21px),calc(100% - 17px) calc(100% - 21px),100% 100%,0 100%);background:linear-gradient(#cbd2dc,#fafbfd)}
.kp-shelf-page .shelf-card-media:after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(#fff,#b9c3d0);z-index:3;pointer-events:none}
.kp-shelf-page .shelf-pick{display:block;position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:20px 19px 25px;cursor:pointer;z-index:2}
.kp-shelf-page .shelf-pick img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent;mix-blend-mode:multiply}
.kp-shelf-page .shelf-title-button{border:0;background:none;text-align:inherit;font:inherit;font-weight:700;color:inherit;cursor:pointer;padding:0;line-height:1.7}
.kp-shelf-page .shelf-card .card-body{padding:14px 7px 12px;gap:9px}
.kp-shelf-page .shelf-card .code{color:#646e7c;direction:ltr;text-align:start}
.kp-shelf-page .shelf-card .sub{color:#636e7c}
.kp-shelf-page .shelf-card-colors,.shelf-colors{display:flex;gap:5px;flex-wrap:wrap}
.kp-shelf-page .shelf-card-colors:empty{display:none}
.kp-shelf-page .swatch{width:44px;height:44px;border:12px solid #fff;box-shadow:inset 0 0 0 1px #bcc3cc;border-radius:50%;flex-shrink:0}
.kp-shelf-page .swatch.active{outline:1px solid #6c7581;outline-offset:-5px}
.kp-shelf-page .shelf-no-results{grid-column:1/-1;padding:28px 0;color:#636e7c}
.kp-shelf-page :is(.shelf-pick,.shelf-title-button,.shelf-close,.swatch,.btn,.chip):focus-visible{outline:3px solid #b82030;outline-offset:3px}
@media(hover:hover){.kp-shelf-page .shelf-card:hover{transform:translateY(-4px)}}
.kp-shelf-page.shelf-is-open .shelf-card{opacity:.35;filter:blur(2px);transform:scale(.97)}
.kp-shelf-page.shelf-is-open .shelf-card.shelf-source{opacity:.6;filter:none;transform:none}
.kp-shelf-page .shelf-source .shelf-pick img{visibility:hidden}
.shelf-dialog{box-sizing:border-box;border:0;padding:12px;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;overflow:hidden;background:transparent;color:#252d38;overscroll-behavior:contain}
.shelf-dialog[open]{display:grid;place-items:center}
.shelf-dialog::backdrop{background:#e7ebf0bb;backdrop-filter:blur(2px)}
.shelf-dialog-content{box-sizing:border-box;position:relative;width:min(530px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:0 12px 20px}
.shelf-close{display:block;margin-inline-start:auto;position:sticky;top:0;z-index:4;min-height:44px;padding:9px 13px;background:#fff;border:1px solid #d8dee6;color:#394553;border-radius:6px;cursor:pointer;font-size:12px;box-shadow:0 4px 12px #1d304819}
.shelf-close span{font-size:20px;margin-inline-start:10px;vertical-align:middle}
.shelf-focus-media{height:clamp(160px,32vh,290px);height:clamp(160px,32dvh,290px);position:relative;margin:18px 10px 16px;isolation:isolate}
.shelf-focus-media .shelf-wall{inset:25px 14px 10px}
.shelf-focus-media .shelf-back{inset:42px 31px 31px}
.shelf-focus-image{display:block;position:relative;z-index:2;width:100%;height:100%;padding:0;object-fit:contain;mix-blend-mode:multiply}
.shelf-information{position:relative;padding:22px;background:#fff;border:1px solid #d8dee6;border-radius:8px;box-shadow:3px 4px #bdc5cf,8px 14px 25px #2439541c;transition:opacity .2s,transform .2s}
.shelf-entering .shelf-information{opacity:.15;transform:translateY(10px)}
.shelf-information h2{font-size:20px;line-height:1.6;margin:0 0 7px}
.shelf-code{direction:ltr;font-size:12px;color:#626e7d}
.shelf-subtitle,.shelf-description,.shelf-missing{font-size:13px;line-height:1.9;color:#636e7c}
.shelf-information h3{font-size:13px;color:#b82030;margin:18px 0 7px}
.shelf-specs{margin:0;font-size:13px}
.shelf-specs>div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #e4e7ec;padding:11px 0}
.shelf-specs dt{font-weight:400;overflow-wrap:anywhere}
.shelf-specs dd{margin:0;font-weight:700;text-align:end;overflow-wrap:anywhere}
.shelf-actions{display:flex;gap:8px;margin-top:18px}
.shelf-actions>*{flex:1;min-width:0;font-size:12px;line-height:1.7}
.shelf-flying{position:fixed!important;z-index:10;display:block;object-fit:contain;background:transparent;mix-blend-mode:multiply;pointer-events:none;max-width:none!important;padding:0;border:0}
@media(max-width:600px){.kp-shelf-page #grid{gap:20px 15px;padding-inline:14px 20px}.kp-shelf-page .shelf-card{padding:5px 5px 0}.kp-shelf-page .shelf-card .card-body{padding:11px 4px}.kp-shelf-page .shelf-card h3{font-size:13px}.kp-shelf-page .shelf-pick{padding:18px 16px 23px}.kp-shelf-page .card-actions{flex-direction:column}.kp-shelf-page .card-actions .btn{min-height:44px}.shelf-information{padding:18px}.shelf-information h2{font-size:18px}.shelf-actions{flex-direction:column}.shelf-actions .btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){.kp-shelf-page *{scroll-behavior:auto!important}.kp-shelf-page .shelf-card,.shelf-information{transition:none!important}}

/* 0712 mobile correction: one compact product view, no second shelf around the extracted image. */
.shelf-dialog{padding:8px}
.shelf-dialog-content{width:min(500px,100%);padding:10px;max-height:100%;background:#edf0f3;border-radius:14px;box-shadow:0 16px 48px #182a4229}
.shelf-close{min-height:40px;padding:6px 10px;font-size:12px;box-shadow:none}
.shelf-focus-media{isolation:auto;height:clamp(80px,22vh,210px);height:clamp(80px,22dvh,210px);margin:8px 0;background:#edf0f3}
.shelf-focus-image{background:#edf0f3;mix-blend-mode:multiply;object-fit:contain;padding:0}
.shelf-information{padding:12px 14px;box-shadow:2px 3px #bdc5cf}
.shelf-information h2{font-size:17px;line-height:1.45;margin:0 0 5px}
.shelf-code:empty{display:none}
.shelf-subtitle,.shelf-description{display:none}
.shelf-information h3{font-size:12px;margin:8px 0 3px}
.shelf-specs{font-size:12px}
.shelf-specs>div{padding:7px 0;gap:10px;line-height:1.4}
.shelf-missing{margin:6px 0;font-size:12px;line-height:1.6}
.shelf-colors{gap:4px}
.shelf-actions{flex-direction:row;margin-top:10px;gap:6px}
.shelf-actions .btn{min-height:44px;font-size:11px;padding:8px 5px;display:flex;align-items:center;justify-content:center}
@media(max-height:620px){.shelf-focus-media{height:16vh;height:16dvh;margin:4px 0}.shelf-information{padding:8px 10px}.shelf-information h2{font-size:15px}.shelf-specs>div{padding:5px 0}.shelf-information h3{margin-top:4px}.shelf-actions{margin-top:6px}}

/* Unified inset shelf and viewport-safe product focus. */
.kp-shelf-page .shell{overflow:clip}
.kp-shelf-page #grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 26px 32px;gap:26px}
.kp-shelf-page .shelf-card{background:linear-gradient(145deg,#fafbfc,#e7ebef);border:1px solid #bcc5ce;padding:9px 9px 0;box-shadow:1px 1px #a9b3bf,2px 2px #a9b3bf,3px 3px #a9b3bf,4px 4px #a9b3bf,5px 5px #a9b3bf,6px 6px #a9b3bf,9px 14px 18px #13203420}
.kp-shelf-page .shelf-card-media{border-radius:3px;background:#e6ebf0;box-shadow:inset 0 2px 5px #24364c40}
.kp-shelf-page .shelf-pick{mix-blend-mode:multiply}
.kp-shelf-page .shelf-card .card-body{background:transparent}
.kp-shelf-page .swatch{border-color:#edf0f3}
.shelf-dialog{font-family:inherit;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.shelf-dialog-content{width:min(480px,100%);min-width:0;overflow:auto}
.shelf-focus-image{background:transparent}
.shelf-focus-media{height:clamp(70px,19dvh,180px)}
.shelf-information{background:#edf0f3;border-color:#bdc7d2;box-shadow:2px 3px #aab6c4}
.shelf-information h2{overflow-wrap:anywhere}
.shelf-specs>div{padding:5px 0}
.shelf-colors .swatch{width:36px;height:36px;border-width:9px}
@media(max-width:760px){.kp-shelf-page #grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 16px 26px;gap:20px 16px}.kp-shelf-page .shelf-card{padding:5px 5px 0}.kp-shelf-page .topbar{gap:8px}.kp-shelf-page .brand{font-size:18px}.kp-shelf-page .top-actions{gap:6px}.kp-shelf-page .hero{padding:24px 16px}.kp-shelf-page .card-actions{flex-direction:column}.kp-shelf-page .shelf-card .card-body{padding:10px 3px}.kp-shelf-page .shelf-card .sub{overflow-wrap:anywhere}}
@media(max-height:500px){.shelf-dialog-content{display:grid;grid-template-columns:minmax(75px,.65fr) minmax(0,1.35fr);gap:8px}.shelf-close{grid-column:1/-1}.shelf-focus-media{height:100%;max-height:200px;margin:0}.shelf-information{padding:8px}.shelf-actions .btn{font-size:10px}}

/* 2026-10-06 product-sheet integration: approved Key-Point images only. */
.kp-shelf-page .shelf-pick img,
.shelf-focus-image,
.shelf-flying{mix-blend-mode:normal!important;background:transparent!important}
.kp-shelf-page .shelf-pick{padding:18px 16px 22px}
.kp-shelf-page .shelf-card-media{background:linear-gradient(145deg,#e7edf2,#f8fafb)}
.kp-shelf-page .shelf-card-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.kp-shelf-page .shelf-card-topline .code{font-weight:800;color:#0b7898;letter-spacing:.02em;white-space:nowrap}
.kp-shelf-page .shelf-card-specs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.kp-shelf-page .shelf-card-specs span{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border:1px solid #d4dce4;border-radius:999px;background:#fff;color:#5b6570;font-size:9px;line-height:1.2;direction:ltr}
.kp-shelf-page .shelf-card .sub{min-height:36px}
.kp-shelf-page .shelf-card-colors{min-height:0}
.kp-shelf-page .shelf-card-colors:empty{display:none}

.shelf-dialog-content{width:min(760px,100%);display:grid;grid-template-columns:minmax(185px,.78fr) minmax(0,1.35fr);grid-template-rows:auto 1fr;gap:12px 14px;padding:12px;background:#edf1f4}
.shelf-close{grid-column:1/-1;grid-row:1;margin:0 0 2px auto;position:sticky;top:0}
.shelf-focus-media{grid-column:1;grid-row:2;height:auto;min-height:250px;max-height:none;margin:0;padding:14px;border:1px solid #c8d2dc;border-radius:10px;background:linear-gradient(145deg,#dfe7ed,#f8fafb);box-shadow:inset 0 2px 7px #24364c1f}
.shelf-focus-image{width:100%;height:100%;max-height:440px;object-fit:contain}
.shelf-information{grid-column:2;grid-row:2;min-width:0;padding:18px 18px 16px;background:#fff;border-color:#c8d2dc;border-radius:10px;box-shadow:2px 3px #aab6c4}
.shelf-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#0b7898;font-weight:800;margin-bottom:3px}
.shelf-information h2{font-size:20px;margin-bottom:2px}
.shelf-code{font-size:13px;font-weight:800;color:#0b7898;margin-bottom:5px}
.shelf-subtitle{display:block!important;margin:0 0 7px;font-size:12px;line-height:1.6;color:#687482}
.shelf-description{display:block!important;margin:9px 0 0;font-size:11px;line-height:1.75;color:#6a7480}
.shelf-information h3{margin:11px 0 3px;color:#b82030}
.shelf-specs>div{padding:6px 0;line-height:1.35}
.shelf-specs dt{font-size:11px;color:#606b77}
.shelf-specs dd{font-size:12px}
.shelf-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
.shelf-actions .btn{min-height:42px;padding:8px 7px;font-size:10px;line-height:1.4;display:flex;align-items:center;justify-content:center}

@media(max-width:760px){
  .kp-shelf-page .shelf-card-specs{display:none}
  .kp-shelf-page .shelf-card .sub{min-height:32px}
  .shelf-dialog-content{width:100%;height:100%;max-height:100%;grid-template-columns:minmax(108px,.72fr) minmax(0,1.4fr);grid-template-rows:auto 1fr;gap:8px;padding:8px;border-radius:12px}
  .shelf-close{min-height:38px}
  .shelf-focus-media{min-height:0;height:100%;max-height:none;padding:8px;border-radius:8px}
  .shelf-focus-image{max-height:none}
  .shelf-information{height:100%;overflow:auto;padding:11px 12px;border-radius:8px}
  .shelf-information h2{font-size:16px;line-height:1.35}
  .shelf-code{font-size:11px}
  .shelf-subtitle{font-size:10px;margin-bottom:4px}
  .shelf-description{font-size:10px;line-height:1.55}
  .shelf-information h3{font-size:11px;margin-top:7px}
  .shelf-specs{font-size:10px}
  .shelf-specs>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:5px 0}
  .shelf-specs dt{font-size:10px}.shelf-specs dd{font-size:10px}
  .shelf-actions{grid-template-columns:1fr;margin-top:8px}
  .shelf-actions .btn{min-height:38px;font-size:10px}
  .shelf-colors .swatch{width:32px;height:32px;border-width:8px}
}
@media(max-width:430px){
  .shelf-dialog{padding:4px}
  .shelf-dialog-content{grid-template-columns:96px minmax(0,1fr);gap:6px;padding:6px}
  .shelf-focus-media{padding:5px}
  .shelf-information{padding:9px 10px}
  .shelf-description{display:none!important}
}


/* 2026-10-06 mobile detail modal fix: enlarge product image and stack layout vertically on phones. */
@media (max-width: 760px){
  .shelf-dialog{align-items:flex-start}
  .shelf-dialog-content{
    width:100%;
    height:auto;
    max-height:calc(100dvh - 12px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    gap:8px;
    padding:8px;
    overflow:auto;
  }
  .shelf-close{
    grid-column:1;
    grid-row:1;
    margin:0 0 2px auto;
  }
  .shelf-focus-media{
    grid-column:1;
    grid-row:2;
    min-height:220px;
    height:clamp(220px,34dvh,320px);
    max-height:320px;
    padding:10px;
    border-radius:10px;
  }
  .shelf-focus-image{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .shelf-information{
    grid-column:1;
    grid-row:3;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:12px 12px 14px;
  }
  .shelf-actions{grid-template-columns:1fr;margin-top:10px}
}
@media (max-width: 430px){
  .shelf-dialog{padding:4px}
  .shelf-dialog-content{padding:7px;gap:7px}
  .shelf-focus-media{
    min-height:190px;
    height:clamp(190px,31dvh,260px);
    padding:8px;
  }
  .shelf-information{padding:10px}
}


/* 2026-10-06 final mobile card refinement: tighter cards, larger product visual, cleaner actions. */
@media (max-width: 760px){
  .kp-shelf-page #grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px 10px 26px;
    gap:14px 10px;
  }
  .kp-shelf-page .shelf-card{
    padding:4px 4px 0;
    border-radius:11px;
    box-shadow:1px 1px #a9b3bf,2px 2px #a9b3bf,3px 3px #a9b3bf,5px 8px 13px #13203418;
  }
  .kp-shelf-page .shelf-card-media{border-radius:4px}
  .kp-shelf-page .shelf-pick{padding:10px 9px 14px}
  .kp-shelf-page .shelf-card .card-body{
    padding:8px 4px 9px;
    gap:5px;
  }
  .kp-shelf-page .shelf-card-topline{gap:5px}
  .kp-shelf-page .shelf-card-topline .code{font-size:10px}
  .kp-shelf-page .shelf-card h3{font-size:12px;line-height:1.45;margin:0}
  .kp-shelf-page .shelf-title-button{
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .kp-shelf-page .shelf-card .sub{
    min-height:26px;
    font-size:9.5px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .kp-shelf-page .shelf-card-colors{gap:3px}
  .kp-shelf-page .shelf-card-colors .swatch{
    width:30px;
    height:30px;
    border-width:8px;
  }
  .kp-shelf-page .card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:2px;
  }
  .kp-shelf-page .card-actions .btn{
    min-height:36px;
    padding:6px 4px;
    font-size:9px;
    line-height:1.3;
    border-radius:9px;
  }
}
@media (max-width: 380px){
  .kp-shelf-page #grid{padding-inline:8px;gap:12px 8px}
  .kp-shelf-page .shelf-pick{padding:8px 7px 12px}
  .kp-shelf-page .shelf-card h3{font-size:11.5px}
  .kp-shelf-page .card-actions .btn{font-size:8.5px}
}

/* 2026-10-07 products page uses the main Key-Point site header/logo/navigation */
.kp-shelf-page .site-header{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.96)}
.kp-shelf-page .site-header .header-inner{max-width:1380px}
.kp-shelf-page .site-header .brand{margin-inline-end:auto;color:inherit;letter-spacing:normal}
.kp-shelf-page .site-header .brand img{width:218px;max-height:56px;height:auto;object-fit:contain}
.kp-shelf-page .site-header .nav-link{font-size:14px}
.kp-shelf-page .shell{max-width:1180px;margin:auto;min-height:auto}
.kp-shelf-page .hero{background:#fff}
.kp-shelf-page .products-utility{padding:0 18px 18px}
@media(max-width:1050px){.kp-shelf-page .site-header .brand img{width:175px;max-height:48px}}
@media(max-width:640px){.kp-shelf-page .site-header .brand img{width:150px}.kp-shelf-page{padding-bottom:66px}}