.ss-pdp.ss-cfg{--cfg-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --cfg-sku-label:"Catalog"; --pdp-accent:#e85d04; --pdp-ink:#161616; --pdp-muted:#5c5c5c; --pdp-line:#e6e6e6;}


/* product cards in product lists (Inventory, Item Layout, Small Layout, Custom) */
.ss-item-card{position:relative; display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden; border:1px solid #e6e6e6; border-radius:14px; background:#fff; color:#161616; text-align:left; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; transition:border-color .15s, box-shadow .15s, transform .15s;}
.ss-item-card *{font-family:inherit;}
.ss-item-card:hover{border-color:#e85d04; box-shadow:0 14px 28px -20px rgba(0,0,0,.45); transform:translateY(-2px);}
.ss-item-card:focus-within{outline:3px solid #e85d04; outline-offset:2px;}
.ss-item-img{display:flex; align-items:center; justify-content:center; height:180px; padding:10px; box-sizing:border-box; background:#fff;}
.ss-item-img:not(:has(img)){background:#f4f2ee;}
.ss-item-img a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.ss-item-img img{display:block; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; object-fit:contain; border:0; clip-path:inset(1px);}
.ss-item-hidden{display:none !important;}
.ss-item-body{display:flex; flex-direction:column; flex:1 1 auto; padding:16px;}
.ss-item-name{margin:0 0 6px; font-size:16px; line-height:1.3; font-weight:600;}
.ss-item-name br{display:none;}
.ss-item-name a, .ss-item-name a:hover, .ss-item-name a:visited{color:#161616 !important; font-size:inherit !important; font-weight:600 !important; text-decoration:none !important;}
.ss-item-name a:focus{outline:none;}
.ss-item-name a::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;}
.ss-item-desc{font-size:14px; line-height:1.45; color:#5c5c5c; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.ss-item-desc *{margin:0; font-size:inherit !important; font-weight:400; color:inherit !important; line-height:inherit;}
.ss-item-desc:empty, .ss-item-desc:not(:has(span:not(:empty))){display:none;}
.ss-item-price{margin-top:auto; padding-top:10px; font-size:16px; font-weight:700; color:#161616;}
.ss-item-price:empty{display:none;}
/* the list: a grid of cards, 3 across on a wide screen, 2 on a tablet, 1 on a phone */
#tblInner:has(> tbody > tr > td > form > .ss-item-card){display:block; width:100%; border-spacing:0 !important;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody > tr{display:contents;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody > tr > td{display:flex; flex-direction:column; width:auto !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody > tr > td:not(:has(.ss-item-card)){display:none;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody > tr > td > form{display:flex; flex-direction:column; flex:1 1 auto; margin:0;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody > tr > td > form > .ss-item-card{flex:1 1 auto;}
#tblInner:has(> tbody > tr > td > form > .ss-item-card) .action-button-container{display:none;}
@media (max-width:1023px){#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:639px){#tblInner:has(> tbody > tr > td > form > .ss-item-card) > tbody{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion: reduce){.ss-item-card{transition:none;} .ss-item-card:hover{transform:none;}}


/* Department cards (Inventory, Department Layout, Custom) */
.ss-dept-card{position:relative; display:flex; flex-direction:column; height:100%; box-sizing:border-box; overflow:hidden; border:1px solid #e6e6e6; border-radius:14px; background:#fff; color:#161616; text-align:left; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; transition:border-color .15s, box-shadow .15s, transform .15s;}
.ss-dept-card *{font-family:inherit;}
.ss-dept-card:hover{border-color:#e85d04; box-shadow:0 14px 28px -20px rgba(0,0,0,.45); transform:translateY(-2px);}
.ss-dept-card:focus-within{outline:3px solid #e85d04; outline-offset:2px;}
.ss-dept-img{display:flex; align-items:center; justify-content:center; height:180px; padding:10px; box-sizing:border-box; background:#fff;}
.ss-dept-img a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.ss-dept-img img{display:block; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; object-fit:contain; border:0;}
.ss-dept-img img[src*="no-image/default-image"]{max-width:96px !important; opacity:.45;}
.ss-dept-body{padding:16px;}
.ss-dept-name{margin:0 0 6px; font-size:16px; line-height:1.3; font-weight:600;}
.ss-dept-name a, .ss-dept-name a:hover, .ss-dept-name a:visited{color:#161616 !important; text-decoration:none !important; font-weight:600;}
.ss-dept-name a:focus{outline:none;}
.ss-dept-name a::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;}
.ss-dept-desc{font-size:14px; line-height:1.45; color:#5c5c5c; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.ss-dept-desc *{margin:0; font-size:inherit; color:inherit;}
.ss-dept-desc:empty{display:none;}
/* the list of departments: a grid of cards, 3 across on a wide screen, 2 on a tablet, 1 on a phone */
#tblInner:has(.ss-dept-card){display:block; width:100%; border-spacing:0 !important;}
#tblInner:has(.ss-dept-card) > tbody{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
#tblInner:has(.ss-dept-card) > tbody > tr{display:contents;}
#tblInner:has(.ss-dept-card) > tbody > tr > td{display:block; width:auto !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;}
#tblInner:has(.ss-dept-card) > tbody > tr > td:not(:has(.ss-dept-card)){display:none;}
#tblInner:has(.ss-dept-card) .action-button-container{display:none;}
@media (max-width:1023px){#tblInner:has(.ss-dept-card) > tbody{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:639px){#tblInner:has(.ss-dept-card) > tbody{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion: reduce){.ss-dept-card{transition:none;} .ss-dept-card:hover{transform:none;}}

/* ---------------- product lists as "Pick a system" rows (Inventory, Item Layout, Small Layout, Custom: 28_system_list.html) ----------------
   One row per product: picture, name, the Short Description (a paragraph and a list: the list becomes the
   chips, a second paragraph a bold note), and a "View products" button; the whole row opens the product.
   The heading above the list can be changed:  #tblInner{--sys-heading:"Choose a system";}  */
.ss-sys{position:relative; display:flex; align-items:stretch; box-sizing:border-box; overflow:hidden; border:1px solid #e6e6e6; border-radius:14px; background:#fff; color:#161616; text-align:left; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; transition:border-color .15s, box-shadow .15s;}
.ss-sys *{font-family:inherit; box-sizing:border-box;}
.ss-sys:hover{border-color:#e85d04; box-shadow:0 14px 28px -22px rgba(0,0,0,.45);}
.ss-sys:focus-within{outline:3px solid #e85d04; outline-offset:2px;}
.ss-sys-img{flex:0 0 260px; width:260px; display:flex; align-items:center; justify-content:center; padding:16px; background:#fff;}
.ss-sys-img a{display:flex; align-items:center; justify-content:center; width:100%;}
.ss-sys-img img{display:block; width:auto !important; height:auto !important; max-width:100% !important; max-height:168px !important; object-fit:contain; border:0; clip-path:inset(1px);}
.ss-sys-img:not(:has(img)){min-height:120px; background:#f4f2ee;}
.ss-sys-hidden{display:none !important;}
.ss-sys-body{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:24px; padding:14px 16px 14px 20px;}
.ss-sys-text{flex:1 1 auto; min-width:0;}
.ss-sys-name{margin:0; font-size:18px; line-height:28px; font-weight:600; letter-spacing:-.025em;}
.ss-sys-name br{display:none;}
.ss-sys-name a, .ss-sys-name a:hover, .ss-sys-name a:visited, .ss-sys-name a *{color:#161616 !important; font-family:inherit !important; font-size:inherit !important; font-weight:600 !important; letter-spacing:inherit !important; text-decoration:none !important;}
.ss-sys-name a:focus{outline:none;}
.ss-sys-name a::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;}
.ss-sys-desc{font-size:14px; line-height:1.35; color:#5c5c5c;}
.ss-sys-desc p{margin:4px 0 0; font-size:14px; line-height:1.35; color:#5c5c5c;}
.ss-sys-desc p ~ p{margin-top:6px; font-size:13px; font-weight:600; line-height:1.4; color:#161616;}
.ss-sys-desc ul{display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 0; padding:0; list-style:none;}
.ss-sys-desc li{margin:0; padding:3px 10px; border:1px solid #e7e2db; border-radius:999px; background:#faf8f5; color:#4a4642; font-size:12.5px; line-height:1.35; list-style:none;}
.ss-sys-desc li::before, .ss-sys-desc li::marker{content:none;}
.ss-sys-btn{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; background:#e85d04; color:#fff; font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap;}
.ss-sys:hover .ss-sys-btn{background:#c94f02;}
/* the list: one row under the other, a heading above */
#tblInner:has(> tbody > tr > td > form > .ss-sys){display:block; width:100%; border-spacing:0 !important;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody{display:grid; grid-template-columns:minmax(0,1fr); gap:12px;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody::before{content:var(--sys-heading,"Pick a system"); display:block; margin:0 0 4px; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5c5c5c;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody > tr{display:contents;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody > tr > td{display:flex; flex-direction:column; width:auto !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody > tr > td:not(:has(.ss-sys)){display:none;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody > tr > td > form{display:flex; flex-direction:column; flex:1 1 auto; margin:0;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) > tbody > tr > td > form > .ss-sys{flex:1 1 auto;}
#tblInner:has(> tbody > tr > td > form > .ss-sys) .action-button-container{display:none;}
/* phones: the picture on top, the button under the text, on the right */
@media (max-width:639px){
  .ss-sys{flex-direction:column;}
  .ss-sys-img{flex:0 0 auto; width:100%; padding:12px 16px;}
  .ss-sys-img img{max-height:240px !important;}
  .ss-sys-body{flex-direction:column; align-items:stretch; gap:12px; padding:16px;}
  .ss-sys-btn{align-self:flex-end;}
}
@media (prefers-reduced-motion: reduce){.ss-sys{transition:none;}}

/* ---------------- department banner and Department bar (department Listings Top HTML: 29_department_banner.html) ----------------
   Photo, eyebrow, title, line, text and the departments as cards, like the reference shop pages. A click on
   another department card brings its list in without reloading the page (include/js/pdp-detail.js v=10).
   The fade of the photo blends into the page colour:  .ss-dhero{--dhero-page:#f4f2ee;}  */
.ss-dhero{--dhero-page:#f4f2ee; position:relative; margin:0 0 12px; color:#161616; text-align:left; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
.ss-dhero *{box-sizing:border-box; font-family:inherit;}
.ss-dhero-art{position:relative; display:block; height:110px; margin:0 calc(50% - 50vw) 14px; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(#0000 0,#000 24%,#000 62%,#0000 100%); mask-image:linear-gradient(#0000 0,#000 24%,#000 62%,#0000 100%);}
.ss-dhero-art img{position:absolute; top:0; right:0; display:block; width:225% !important; max-width:none !important; height:auto !important; margin:0; border:0; transform:translateY(-58%);}
.ss-dhero-eyebrow{margin:0; font-size:12px; line-height:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#1b2430;}
.ss-dhero-title{margin:8px 0 0; font-size:clamp(28px,3.2vw,34px); line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#161616;}
.ss-dhero-sub{margin:8px 0 0; font-size:22px; line-height:1.5; font-weight:600; letter-spacing:-.025em; color:#1b2430;}
.ss-dhero-text{max-width:68ch; margin-top:12px; font-size:16px;}
.ss-dhero-text p{margin:0; font-size:16px; line-height:26px; color:#5c5c5c;}
.ss-dhero-text p + p{margin-top:12px;}
.ss-dhero-text a, .ss-dhero-text a:visited{color:#161616 !important; font:inherit !important; font-weight:600 !important; text-decoration:underline !important; text-decoration-color:#e85d04 !important; text-underline-offset:2px;}
.ss-dhero-text a:hover{color:#e85d04 !important;}
.ss-dhero-bar{margin-top:20px;}
.ss-dhero-label{margin:0 0 8px; font-size:13px; line-height:20px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:#5c5c5c;}
.ss-dhero-depts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:560px;}
.ss-dhero-dept, .ss-dhero-dept:visited{display:block; padding:9px 12px; border:1px solid #e6e6e6; border-radius:12px; background:#fff; color:#161616 !important; font:inherit !important; text-decoration:none !important; transition:border-color .15s, box-shadow .15s;}
.ss-dhero-dept:hover{border-color:#e85d04;}
.ss-dhero-dept.is-on, .ss-dhero-dept[aria-current="page"]{border-color:#e85d04; box-shadow:0 0 0 2px #fde4d0;}
.ss-dhero-dept:focus-visible{outline:2px solid #e85d04; outline-offset:2px;}
.ss-dhero-dept b{display:block; font-size:13.5px; line-height:1.5; font-weight:700; color:#161616;}
.ss-dhero-dept span{display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:#5c5c5c;}
/* the breadcrumb above it small and grey, "/" between the steps */
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero){margin:28px 0 10px;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) td{padding:0; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:13px; line-height:20px; color:#5c5c5c;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) br, table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) hr{display:none;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) b{font-weight:400;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) a, table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) a:visited{color:#5c5c5c !important; font:inherit !important; text-decoration:none !important;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) a:hover{color:#e85d04 !important;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) div[style*="inline-block"]{height:auto !important; margin:0 4px !important; vertical-align:baseline !important;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) div[style*="inline-block"] svg{display:none;}
table:has([itemtype*="BreadcrumbList"]):has(~ table .ss-dhero) div[style*="inline-block"]::before{content:"/";}
/* the Sort By list in the same style */
table:has(.ss-dhero) ~ table:has(#ddlSortByOptions) td{padding:0;}
table:has(.ss-dhero) ~ table:has(#ddlSortByOptions) #ddlSortByOptions{height:32px; margin:0 0 10px !important; padding:0 8px 0 12px; border:1px solid #e6e6e6; border-radius:8px; background-color:#fff; color:#161616; font:400 13px/1.2 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; box-shadow:none;}
/* while the other department comes in */
[aria-busy="true"] > #tblOuter, [aria-busy="true"] .ss-dhero{opacity:.55; transition:opacity .15s;}
/* phones: the departments as one row of pills */
@media (max-width:639px){
  .ss-dhero-label{margin-bottom:6px; font-size:11px; letter-spacing:.12em;}
  .ss-dhero-depts{display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,#0000); mask-image:linear-gradient(90deg,#000 88%,#0000);}
  .ss-dhero-depts::-webkit-scrollbar{display:none;}
  .ss-dhero-dept{flex:0 0 auto; padding:8px 14px; border-radius:999px; white-space:nowrap;}
  .ss-dhero-dept span{display:none;}
}
/* tablets: the photo on the right above the title */
@media (min-width:640px){
  .ss-dhero-art{width:min(62%,520px); height:150px; margin:0 0 16px auto; border-radius:16px; -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 30%),linear-gradient(#0000 0,#000 18%,#000 72%,#0000 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#0000 0,#000 30%),linear-gradient(#0000 0,#000 18%,#000 72%,#0000 100%); mask-composite:intersect;}
  /* the Sort By list on the line of "Pick a system" */
  table:has(.ss-dhero) ~ table:has(#ddlSortByOptions){position:relative; top:-6px; z-index:2; margin-bottom:-32px;}
  table:has(.ss-dhero) ~ table:has(#ddlSortByOptions) #ddlSortByOptions{margin-bottom:0 !important;}
}
/* wide screens: the photo beside the text, the height of the banner */
@media (min-width:1024px){
  .ss-dhero-art{position:absolute; top:-48px; bottom:0; right:0; width:40%; height:auto; margin:0; border-radius:18px; -webkit-mask-image:linear-gradient(90deg,#0000 0,#0000008c 20%,#000 45%); -webkit-mask-composite:source-over; mask-image:linear-gradient(90deg,#0000 0,#0000008c 20%,#000 45%); mask-composite:add;}
  .ss-dhero-art img{top:auto; bottom:0; transform:none;}
  .ss-dhero-art::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(var(--dhero-page) 0,transparent 14%,transparent 84%,var(--dhero-page) 100%);}
  .ss-dhero-text{max-width:min(68ch,58%);}
}
@media (prefers-reduced-motion: reduce){.ss-dhero-dept{transition:none;}}

/* ---------------- express ordering as "Order by catalog number" (Express Ordering layout, Custom: 30_express_order.html) ----------------
   Per product a card: name, availability, "Open product" link, the column heads, one row per catalog
   number. The page above it (department Listings Top HTML, 29_department_banner.html) shows its order
   parts instead of the photo and the text. Rows, catalog links, find box, Add and the Add to cart bar: pdp-detail.js v=12.
   The link text can be changed:  .ss-eo-head{--eo-open:"Open";}  */
.ss-eo-head, .ss-eo-cols, .ss-eo-row{--eo-cols:minmax(130px,210fr) minmax(64px,133fr) minmax(140px,303fr) minmax(84px,145fr) minmax(84px,150fr) 96px 96px; box-sizing:border-box; border:1px solid #e6e6e6; border-width:0 1px 1px; background:#fff; color:#161616; text-align:left; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
.ss-eo-head *, .ss-eo-cols *, .ss-eo-row *{box-sizing:border-box; font-family:inherit;}
.ss-eo-head{position:relative; margin:24px 0 0; padding:12px 16px; border-top-width:1px; border-radius:14px 14px 0 0;}
.ss-eo-name{margin:0; padding-right:160px; font-size:14px; line-height:20px; font-weight:600;}
.ss-eo-name br{display:none;}
.ss-eo-name a, .ss-eo-name a:visited{color:#161616 !important; font:inherit !important; text-decoration:none !important;}
.ss-eo-name a::after{content:var(--eo-open,"Open product") " \2192"; position:absolute; top:12px; right:16px; font-size:13px; line-height:20px; font-weight:600; color:#e85d04; white-space:nowrap;}
.ss-eo-name a:hover::after{text-decoration:underline;}
.ss-eo-name a:focus-visible{outline:2px solid #e85d04; outline-offset:2px;}
.ss-eo-avail:empty, .ss-eo-avail:not(:has(.ss-cfg-avail)){display:none;}   /* only an availability block (Extended Field 2 of the snow products), not another note */
.ss-eo-avail .ss-cfg-avail{display:block; margin:4px 0 0; font-size:12px; line-height:19.5px; color:#5c5c5c;}
.ss-eo-avail .ss-cfg-avail .ss-cfg-avail-status{display:inline; font-size:12px; line-height:inherit; font-weight:700; color:#e85d04;}
.ss-eo-avail .ss-cfg-avail .ss-cfg-avail-status::before{content:none; display:none;}
.ss-eo-avail .ss-cfg-avail .ss-cfg-avail-status::after{content:". ";}
.ss-eo-avail .ss-cfg-avail.is-stock .ss-cfg-avail-status{color:#1f7a4d;}
.ss-eo-avail .ss-cfg-avail p + p{display:block; margin-top:2px;}
.ss-eo-avail .ss-cfg-avail p{display:inline; margin:0; font-size:12px; line-height:inherit; color:#5c5c5c;}
.ss-eo-cols, .ss-eo-row{display:grid; grid-template-columns:var(--eo-cols); align-items:center;}
.ss-eo-cols span{padding:8px 12px; font-size:13.5px; line-height:20px; font-weight:700; letter-spacing:.065em; text-transform:uppercase; color:#5c5c5c;}
.ss-eo-cols span:first-child, .ss-eo-row > .ss-eo-cat{padding-left:16px;}
.ss-eo-cols span:nth-child(4), .ss-eo-cols span:nth-child(5){text-align:right;}
.ss-eo-cols span:nth-child(6){text-align:center;}
.ss-eo-row{min-height:64px;}
.ss-eo-row > div{min-width:0; padding:10px 12px; font-size:16px; line-height:1.4;}
.ss-eo-row:has(~ .ss-eo-foot), .ss-eo-row:last-child, .ss-eo-row.is-last{border-radius:0 0 14px 14px;}
.ss-eo-foot, .ss-eo-full, .ss-eo-note{display:none !important;}
.ss-eo-cat b{display:block; font-weight:600; color:#161616; overflow-wrap:anywhere;}
.ss-eo-cat b a, .ss-eo-cat b a:visited{color:#161616 !important; font:inherit !important; text-decoration:none !important;}
.ss-eo-cat b a:hover{color:#e85d04 !important;}
.ss-eo-cat b a:focus-visible{outline:2px solid #e85d04; outline-offset:2px; border-radius:2px;}
.ss-eo-status{display:block; font-size:13px; line-height:1.4; font-weight:700; color:#e85d04;}
.ss-eo-status:empty{display:none;}
.ss-eo-status.is-stock{color:#1f7a4d;}
.ss-eo-status.is-off{color:#9b2c2c;}
/* a catalog number with its own status and note (its Status / Status note specs) adds the note to the card head */
.ss-eo-notes{margin:2px 0 0; font-size:12px; line-height:19.5px; color:#5c5c5c;}
.ss-eo-notes p{margin:0;}
.ss-eo-notes strong{font-weight:700; color:#e85d04;}
.ss-eo-notes strong::after{content:". ";}
.ss-eo-notes .is-off strong{color:#9b2c2c;}
.ss-eo-notes .is-stock strong{color:#1f7a4d;}
.ss-eo-volt{font-weight:600;}
.ss-eo-det{color:#5c5c5c; overflow-wrap:anywhere;}
.ss-eo-retail{text-align:right; color:#5c5c5c;}
.ss-eo-retail strike, .ss-eo-retail s{color:#5c5c5c !important; font-size:16px !important; font-weight:400; text-decoration:line-through;}
.ss-eo-retail:not(:has(strike, s)){visibility:hidden;}
.ss-eo-price{text-align:right; font-weight:600; white-space:nowrap;}
.ss-eo-row > .ss-eo-qty{padding:8px 12px; text-align:center; white-space:nowrap;}
.ss-eo-qty .btnMinusQty, .ss-eo-qty .btnPlusQty{display:none !important;}
.ss-eo-row .ss-eo-qty input{width:72px !important; min-width:0 !important; height:37px !important; margin:0 !important; padding:6px 8px !important; border:1px solid #e6e6e6 !important; border-radius:8px !important; background:#fff !important; box-shadow:none !important; color:#161616 !important; font:400 16px/1.4 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important; text-align:center !important;}
.ss-eo-row .ss-eo-qty input::placeholder{color:#8a8a8a; opacity:1;}
.ss-eo-row .ss-eo-qty input:focus{outline:2px solid #e85d04; outline-offset:1px;}
.ss-eo-row > .ss-eo-add{padding:8px 16px; text-align:right;}
.ss-eo-addrow{display:inline-block; margin:0; padding:6px 12px; border:0; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px #f3b48a; color:#e85d04; font:600 13px/1.4 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer;}
.ss-eo-addrow:hover{background:#fff4ec;}
.ss-eo-addrow:focus-visible{outline:2px solid #e85d04; outline-offset:2px;}
.ss-eo-row[hidden], .ss-eo-head[hidden], .ss-eo-cols[hidden]{display:none !important;}
/* the list: the engine's table around the rows out of the way, its own Add To Cart button replaced by the bar */
#tblOuter:has(.ss-eo-row){border-spacing:0; padding-top:0 !important;}
#tblOuter:has(.ss-eo-row) > tbody > tr > td{padding:0;}
#tblOuter:has(.ss-eo-row) #tblInner{display:none;}
#tblOuter > tbody > tr > td > .ss-eo-head{margin-top:0;}   /* the first product's head (the others are inside a row's schema.org div) */
.ss-eo-ready div:has(> input[name^="Insert_To_Cart"]){display:none;}
/* the page above the list: the order parts instead of the photo and the text */
.ss-eo-only{display:none !important;}
:has(> #tblOuter .ss-eo-row) .ss-dhero .ss-eo-only:not(.ss-eo-intro){display:block !important;}   /* the intro needs pdp-detail.js (.ss-eo-ready) */
:has(> #tblOuter .ss-eo-row) .ss-dhero-art, :has(> #tblOuter .ss-eo-row) .ss-dhero-eyebrow, :has(> #tblOuter .ss-eo-row) .ss-dhero-title:not(.ss-eo-only), :has(> #tblOuter .ss-eo-row) .ss-dhero-sub, :has(> #tblOuter .ss-eo-row) .ss-dhero-text{display:none !important;}
:has(> #tblOuter .ss-eo-row) .ss-dhero-title.ss-eo-only{margin-top:0;}
:has(> #tblOuter .ss-eo-row) table:has([itemtype*="BreadcrumbList"]) b:last-of-type::after{content:" / Order by catalog number"; font-weight:400;}
.ss-eo-intro{display:none;}
.ss-eo-ready :has(> #tblOuter .ss-eo-row) .ss-dhero .ss-eo-intro{display:grid !important; grid-template-columns:minmax(0,1fr) 256px; align-items:end; gap:16px 24px; margin:24px 0 0;}
.ss-eo-introtext{min-width:0;}
.ss-eo-title{margin:0; font-size:22px; line-height:33px; font-weight:400; letter-spacing:-.025em; color:#161616;}
.ss-eo-lead{max-width:495px; margin:4px 0 0; font-size:14px; line-height:20px; color:#5c5c5c;}
.ss-eo-find{width:100%; height:42px; margin:0; padding:10px 12px; border:1px solid #e6e6e6; border-radius:10px; background:#fff; color:#161616; font:400 14px/1.4 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; box-shadow:none; -webkit-appearance:none; appearance:none;}
.ss-eo-find::placeholder{color:#8a8a8a; opacity:1;}
.ss-eo-find:focus{outline:2px solid #e85d04; outline-offset:1px; border-color:#e85d04;}
.ss-eo-bar{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid #e6e6e6; border-radius:12px; background:#fff;}
.ss-eo-bartext{margin:0; font-size:14px; line-height:20px; color:#5c5c5c;}
.ss-eo-addall{flex:0 0 auto; margin:0; padding:10px 16px; border:0; border-radius:10px; background:#161616; color:#fff; font:600 14px/20px "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer;}
.ss-eo-addall:hover{background:#000;}
.ss-eo-addall:disabled{opacity:.4; cursor:not-allowed;}
.ss-eo-addall:focus-visible{outline:2px solid #e85d04; outline-offset:2px;}
.ss-eo-none{grid-column:1 / -1; margin:0; font-size:14px; color:#5c5c5c;}
/* tablets: the details column narrower */
@media (max-width:1023px){
  .ss-eo-head, .ss-eo-cols, .ss-eo-row{--eo-cols:minmax(120px,1.3fr) minmax(56px,.7fr) minmax(110px,1.6fr) minmax(76px,.9fr) minmax(76px,.9fr) 88px 80px;}
  .ss-eo-row > div{padding:10px 8px;}
  .ss-eo-cols span{padding:8px 8px;}
}
/* phones: one row is a stack, the column heads go */
@media (max-width:639px){
  .ss-eo-cols{display:none;}
  .ss-eo-name{padding-right:120px;}
  .ss-eo-row{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"cat cat cat" "volt volt volt" "det det det" "retail price qty" "add add add"; align-items:center; gap:4px 10px; padding:12px 14px; border-bottom-color:#eee;}
  .ss-eo-row > div, .ss-eo-row > .ss-eo-cat, .ss-eo-row > .ss-eo-qty, .ss-eo-row > .ss-eo-add{padding:0;}
  .ss-eo-cat{grid-area:cat;} .ss-eo-volt{grid-area:volt;} .ss-eo-det{grid-area:det;}
  .ss-eo-retail{grid-area:retail; text-align:left;} .ss-eo-price{grid-area:price;} .ss-eo-qty{grid-area:qty;}
  .ss-eo-row > .ss-eo-add{grid-area:add; text-align:left; margin-top:4px;}
  .ss-eo-row .ss-eo-qty input{width:64px !important;}
  .ss-eo-ready :has(> #tblOuter .ss-eo-row) .ss-dhero .ss-eo-intro{grid-template-columns:minmax(0,1fr);}
}