/* =====================================================================
   pdp-detail.css — New "Item Large Layout" (product detail) template.
   Loaded by HEADER.ASP only when Item_L_Layout uses OBJ_ITEM_TABS_OBJ.
   Scoped under .ss-pdp so it cannot leak into other layouts/themes.
   Mobile-first, responsive, and ADA-friendly (visible focus states,
   reduced-motion support). Colors chosen for WCAG AA contrast on white;
   a merchant theme can override the --pdp-* variables.
   ===================================================================== */

/* The colours and the corner radius are custom properties, and a store may set its own from
   its own style sheet, for example   .ss-pdp{--pdp-accent:#e8590c;}
   They are declared inside :where(), which carries no weight in the cascade, so the store's
   rule wins wherever it sits in the page. (A store's own styles come BEFORE this file in the
   page head; while these defaults were declared plainly on .ss-pdp, a rule of the same weight
   in the store's styles lost to them.) Browsers that do not know :where() get them plainly. */
:where(.ss-pdp){
  --pdp-accent:#1f5fbf; --pdp-accent-ink:#ffffff;
  --pdp-line:#e3e8ef; --pdp-ink:#1f2733; --pdp-muted:#5b6675;
  --pdp-radius:14px; --pdp-focus:#0a58ca;
}
@supports not selector(:where(*)){
  .ss-pdp{
    --pdp-accent:#1f5fbf; --pdp-accent-ink:#ffffff;
    --pdp-line:#e3e8ef; --pdp-ink:#1f2733; --pdp-muted:#5b6675;
    --pdp-radius:14px; --pdp-focus:#0a58ca;
  }
}
.ss-pdp{
  max-width:1120px; margin:22px auto; padding:0 18px; box-sizing:border-box;
  color:var(--pdp-ink);
}
.ss-pdp *{box-sizing:border-box;}

/* visible keyboard focus everywhere in the layout */
.ss-pdp a:focus-visible,
.ss-pdp button:focus-visible,
.ss-pdp select:focus-visible,
.ss-pdp input:focus-visible,
.ss-pdp [tabindex]:focus-visible{
  outline:3px solid var(--pdp-focus); outline-offset:2px; border-radius:6px;
}

/* ---------------- top: media + buy box ---------------- */
.ss-pdp-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:34px; align-items:start;}
/* Safety net: the OBJ_STOCK_OBJ itemprop="offers" <div> is now closed in scart_misc
   (the divEnd bug), so the markup nests correctly and these are normal block children.
   Keeping the full-width span is a harmless no-op that also protects against any other
   stray unclosed tag pushing the tabs/accessory into this grid. */
.ss-pdp-tabs, .ss-pdp-accessory{grid-column:1 / -1;}
.ss-pdp-media{background:transparent; border:0; border-radius:var(--pdp-radius); padding:0; text-align:center;}
.ss-pdp-media img{max-width:100%; height:auto; border-radius:8px;}

/* ---------------- picture gallery (OBJ_IMAGE_OBJ) ----------------
   scart_misc.asp writes the main picture into a box that has the store's picture size as fixed
   pixels in its style attribute (for example height:550px; width:550px). A picture that is
   wider than it is high left an empty band under it, and the box could be wider than its
   column. Here the box is as wide as the column and as high as the picture in it.
   When the main picture has loaded, pdp-detail.js keeps the box in the shape it has then
   (.is-held and --pdp-media-ratio): pointing at a thumbnail of another shape shows that picture
   centred in the same box, so the thumbnails under it do not jump away from the pointer.
   The thumbnails are centred in their squares (item_image_zoom.js gives each a top margin that
   does not suit these squares), and the square of the picture on show is outlined (.on, also
   from pdp-detail.js). Nothing here needs a change in scart_misc.asp. */
.ss-pdp-media #divContainer > br{display:none;}
.ss-pdp-media #gallery{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important;
  margin:0; padding:10px; overflow:hidden;
  border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); background:#fff;
}
/* min-width:0 on both: a flex item may otherwise not get narrower than the picture's own width,
   which made the whole page wider than a phone screen */
.ss-pdp-media #gallery #lnkMainImage{display:flex; align-items:center; justify-content:center; min-width:0; max-width:100%;}
.ss-pdp-media #gallery #imgMainImage{display:block; width:auto; height:auto; min-width:0; max-width:100%; margin:0;}
.ss-pdp-media #gallery.is-held{aspect-ratio:var(--pdp-media-ratio,auto);}
.ss-pdp-media #gallery.is-held #lnkMainImage{position:absolute; top:10px; right:10px; bottom:10px; left:10px; max-width:none;}
.ss-pdp-media #gallery.is-held #imgMainImage{max-height:100%;}

.ss-pdp-media #ThumbsTable{display:block; float:none; width:100%; margin:10px 0 0; overflow:visible;}
.ss-pdp-media #ThumbsContainer{position:static; display:flex; flex-wrap:wrap; align-items:center; gap:8px; float:none; padding:0;}
.ss-pdp-media #ThumbsContainer > br{display:none;}
/* the "Click to see larger preview" line */
.ss-pdp-media #ThumbsContainer > .div_clickToZoom{flex:0 0 100%; display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 2px; font-family:inherit; font-size:.8rem; color:var(--pdp-muted);}
.ss-pdp-media .div_clickToZoom a{font-family:inherit; font-size:inherit; color:inherit;}
.ss-pdp-media .div_clickToZoom img{width:auto; height:14px; border-radius:0;}
.ss-pdp-media .divThumbs{display:flex !important; align-items:center; justify-content:center; float:none; margin:0; padding:4px; overflow:hidden; border:1px solid var(--pdp-line) !important; border-radius:10px; background:#fff; cursor:pointer;}
.ss-pdp-media .divThumbs:hover,
.ss-pdp-media .divThumbs.on{border-color:var(--pdp-accent) !important;}
.ss-pdp-media .divThumbs.on{box-shadow:0 0 0 1px var(--pdp-accent);}
.ss-pdp-media .divThumbs a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.ss-pdp-media .divThumbs img.Thumb{position:static !important; display:block; width:auto; height:auto; max-width:100%; max-height:100%; margin:0 !important; border-radius:6px;}

.ss-pdp-info{min-width:0;}
.ss-pdp-name{font-size:1.9rem; line-height:1.2; font-weight:800; letter-spacing:-.01em; margin:2px 0 8px;}
.ss-pdp-rating{margin:0 0 14px; color:#8a5a00; font-size:.95rem;}

.ss-pdp-pricebar{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 4px;}
.ss-pdp-price{font-size:2rem; font-weight:800;}
.ss-pdp-price-was{font-size:1.15rem; color:var(--pdp-muted); text-decoration:line-through;}
.ss-pdp-stock{margin:6px 0 18px; font-size:.9rem; color:#0f7b43; font-weight:600;}

/* Merchant extended fields (OBJ_EXT_FIELD*) - extra product info under the price. */
/* font-weight:400 keeps these from rendering bold: the stock block is bold, and if the
   markup ever nests them under it they would otherwise inherit that weight. */
.ss-pdp-ext{margin:0 0 16px; font-size:.92rem; line-height:1.55; color:var(--pdp-ink); font-weight:400;}
.ss-pdp-ext:empty{display:none;}

.ss-pdp-attrs{margin:0 0 18px; font-weight:400;}
.ss-pdp-attrs select, .ss-pdp-attrs input[type=text]{max-width:340px; padding:11px 12px; border:1px solid var(--pdp-line); border-radius:10px; font:inherit; background:#fff;}

/* User-defined / personalization fields. OBJ_UD_OBJ emits its OWN complete <table>, so
   this must be a plain <div> wrapper - wrapping it in a <table> makes a table-inside-table,
   which the browser foster-parents out and shoves the buy row into the outer item table. */
.ss-pdp-udf{margin:14px 0 18px; font-weight:400;}
.ss-pdp-udf:empty{display:none;}
.ss-pdp-udf table{width:100%; border-collapse:collapse;}
.ss-pdp-udf td{padding:6px 0; vertical-align:top; font-size:.92rem; font-weight:400;}
.ss-pdp-udf input[type=text], .ss-pdp-udf textarea, .ss-pdp-udf select{max-width:340px; padding:9px 11px; border:1px solid var(--pdp-line); border-radius:10px; font:inherit; background:#fff;}

.ss-pdp-buy{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); background:#fbfcfe; margin:0 0 16px;}
.ss-pdp-qty{display:inline-flex; align-items:stretch;}
/* Wishlist heart. sWishlistIcon is hardcoded position:absolute, so it needs a
   positioned box of its own; placed AFTER Add to Cart it no longer overlaps qty.
   Pushed to the right end of the buy row with margin-left:auto.
   Its size, its place in the row and how the link sits in it come from four --pdp-wish-*
   properties, so that the "nothing to buy with" state below can change them in one rule. */
.ss-pdp-wish{position:relative; display:inline-flex; align-items:center; justify-content:center; width:var(--pdp-wish-box,44px); height:var(--pdp-wish-box,44px); margin-left:var(--pdp-wish-push,auto);}
.ss-pdp-wish a[style*="absolute"]{position:var(--pdp-wish-pos,absolute) !important; top:50%; left:50%; transform:var(--pdp-wish-shift,translate(-50%,-50%));}
.ss-pdp-wish .wishlist-container{display:flex; align-items:center; justify-content:center;}
/* no wishlist on this store: the heart's place takes no room */
.ss-pdp-wish:empty{display:none;}

/* Nothing to buy with. When the item is out of stock, or its price is hidden, scart_misc.asp
   writes neither the quantity box nor the Add To Cart button, and the buy box used to stay as a
   wide empty frame around the wishlist heart. Without them it is no box at all: the heart sits
   at the left, in line with the text above it, and when there is no heart either the box is
   not shown at all.
   "Something to buy with" is: anything in the quantity holder other than a hidden field, or
   anything directly in the box other than the two holders, a hidden field or a line break.
   Browsers that do not know :has() get the same two states as classes from pdp-detail.js. */
.ss-pdp-buy:not(:has(> .ss-pdp-qty > :not(input[type="hidden"]), > :not(.ss-pdp-qty):not(.ss-pdp-wish):not(input[type="hidden"]):not(br):not(script))){padding:0; border:0; border-radius:0; background:none; gap:0; --pdp-wish-box:auto; --pdp-wish-push:0; --pdp-wish-pos:static; --pdp-wish-shift:none;}
.ss-pdp-buy:not(:has(> .ss-pdp-qty > :not(input[type="hidden"]), > :not(.ss-pdp-qty):not(.ss-pdp-wish):not(input[type="hidden"]):not(br):not(script))):not(:has(> .ss-pdp-wish > *)){display:none;}
.ss-pdp-buy.is-bare{padding:0; border:0; border-radius:0; background:none; gap:0; --pdp-wish-box:auto; --pdp-wish-push:0; --pdp-wish-pos:static; --pdp-wish-shift:none;}
.ss-pdp-buy.is-void{display:none;}

.ss-pdp-social{display:flex; gap:14px; align-items:center; color:var(--pdp-muted); font-size:.85rem;}

/* ---------------- tabs (ARIA tablist) ---------------- */
.ss-pdp-tabs{margin:34px 0 0; background:#fff; border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); overflow:hidden;}
/* overflow-x:auto lets many tabs scroll sideways on narrow screens; overflow-y:hidden
   stops the browser from adding a vertical scrollbar for the buttons' 1px margin-bottom.
   width:0 with min-width:100%: the bar is as wide as its box, but it does not ask for the
   width of all its tabs. Most themes hold the page content in a table cell, and a cell grows
   to what its content asks for, so five tabs made the whole page wider than a phone screen. */
.ss-pdp-tabbar{display:flex; gap:2px; width:0; min-width:100%; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--pdp-line); background:#f7f9fc; -webkit-overflow-scrolling:touch;}
.ss-pdp-tabbar button{flex:0 0 auto; appearance:none; border:0; background:none; cursor:pointer; white-space:nowrap; padding:15px 20px; font:inherit; font-weight:600; color:var(--pdp-muted); border-bottom:3px solid transparent; margin-bottom:-1px;}
.ss-pdp-tabbar button:hover{color:var(--pdp-ink);}
.ss-pdp-tabbar button.on{color:var(--pdp-accent); border-bottom-color:var(--pdp-accent);}

.ss-pdp-panel{padding:26px; color:#1a1a1a;}
.ss-pdp-panel[hidden]{display:none;}
.ss-pdp-panel.on{animation:sspdpfade .18s ease;}
@keyframes sspdpfade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.ss-pdp-panel h3{margin:0 0 12px; font-size:1.25rem;}
.ss-pdp-panel p{margin:0 0 12px; color:#1a1a1a;}
.ss-pdp-panel :first-child{margin-top:0;}

/* Tables pasted into a tab that carry NO class and NO border attribute (the editor's Insert
   Table, or older content saved before paste kept its formatting) get a readable default grid
   here, since the storefront does not load the editor's CSS. Tables that bring their own class
   (like the store's "typeOne") or a border="" attribute are deliberately left alone so they
   keep their original styling from the store theme. */
.ss-pdp-panel table:not([class]):not([border]){border-collapse:collapse; margin:0 0 14px; max-width:100%;}
.ss-pdp-panel table:not([class]):not([border]) td,
.ss-pdp-panel table:not([class]):not([border]) th{border:1px solid var(--pdp-line); padding:8px 11px; vertical-align:top; text-align:left;}
.ss-pdp-panel table:not([class]):not([border]) th{background:#f1f5f9; font-weight:700;}

.ss-pdp-panel table.ss-pdp-spec, .ss-pdp-panel table.spec{width:100%; border-collapse:collapse; font-size:.95rem;}
.ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.ss-pdp-spec td,
.ss-pdp-panel table.spec th, .ss-pdp-panel table.spec td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--pdp-line); vertical-align:top;}
.ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.spec th{width:42%; color:var(--pdp-muted); font-weight:600; background:#f8fafc;}

/* A {{spec:Label}} that the chosen variant does not have comes out empty. A tab written for
   several variants (one table row or one paragraph per spec, for example a thermostat range
   where only some models have a screen) leaves out the row, paragraph, heading or list item that
   holds only such an empty spec, so each variant shows just its own lines, also after a choice
   changes without a reload. With "update without reloading" an empty spec is an empty live
   region; without it, nothing at all (an empty cell or paragraph). Browsers that do not know
   :has() skip the first rule and still drop empty paragraphs, headings and list items. */
.ss-pdp-panel table.ss-pdp-spec tr:has(> td [data-ss-live="vspec"]:empty):not(:has(> td [data-ss-live="vspec"]:not(:empty))),
.ss-pdp-panel table.ss-pdp-spec tr:has(> td:last-child:empty),
.ss-pdp-panel :is(p, li, h2, h3, h4, h5):has(> [data-ss-live="vspec"]:empty):not(:has(> [data-ss-live="vspec"]:not(:empty))){display:none;}
.ss-pdp-panel p:empty, .ss-pdp-panel li:empty, .ss-pdp-panel h3:empty, .ss-pdp-panel h4:empty{display:none;}

.ss-pdp-panel .ss-pdp-docs, .ss-pdp-panel .docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.ss-pdp-panel .ss-pdp-doc, .ss-pdp-panel .doc{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--pdp-line); border-radius:10px; padding:12px 14px;}
.ss-pdp-panel .doc a, .ss-pdp-panel .ss-pdp-doc a{flex:0 0 auto; font-weight:700; color:var(--pdp-accent); text-decoration:none; border:1px solid var(--pdp-accent); border-radius:8px; padding:7px 12px; font-size:.85rem;}

/* Documents list: a tab of downloads, one full width card per file with its title and a short
   note, and a Download button on the right that moves under the text on a narrow screen.
     <div class="ss-pdp-doclist">
       <div class="ss-pdp-docitem">
         <div class="ss-pdp-docinfo"><strong class="ss-pdp-doctitle">Title</strong><span class="ss-pdp-docnote">Note</span></div>
         <a class="ss-pdp-docbtn" href="images/.../file.pdf" download>Download</a>
       </div>
     </div>
   Not scoped to .ss-pdp, so it also works in another layout; every colour has a fallback. */
.ss-pdp-doclist{display:flex; flex-direction:column; gap:10px; margin:0 0 14px;}
.ss-pdp-docitem{display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--pdp-line,#e3e8ef); border-radius:12px; background:#fff;}
.ss-pdp-docinfo{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 240px;}
.ss-pdp-doctitle{font-size:1rem; font-weight:600; line-height:1.35; color:var(--pdp-ink,#1f2733); overflow-wrap:anywhere;}
.ss-pdp-docnote{font-size:.875rem; line-height:1.4; color:var(--pdp-muted,#5b6675);}
a.ss-pdp-docbtn{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:7px 16px; border:1px solid var(--pdp-line,#e3e8ef); border-radius:999px; background:#fff; color:var(--pdp-ink,#1f2733); font-size:.875rem; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; transition:border-color .15s, color .15s;}
a.ss-pdp-docbtn:hover, a.ss-pdp-docbtn:focus-visible{border-color:var(--pdp-accent,#1f5fbf); color:var(--pdp-accent,#1f5fbf); text-decoration:none;}
/* .ss-pdp a:focus-visible rounds every link to 6px: the button keeps its own shape */
.ss-pdp a.ss-pdp-docbtn:focus-visible{border-radius:999px;}

.ss-pdp-accessory{margin:34px 0 10px;}

/* ---------------- per-variant tokens ----------------
   OBJ_VARIANT_SKU_OBJ / OBJ_VARIANT_CHIPS_OBJ / OBJ_VARIANT_SPECS_OBJ and the
   {{variant_...}} content-tab placeholders (scart_misc.asp fn_variant_data).
   Not scoped to .ss-pdp so they also work when a custom layout uses the tokens;
   every colour has a fallback for that case. */
.ss-pdp-chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:10px 0 14px; padding:0;}
.ss-pdp-chips:empty{display:none;}
.ss-pdp-chip{margin:0; padding:5px 12px; border:1px solid var(--pdp-line,#e3e8ef); border-radius:999px; background:#fff; color:var(--pdp-ink,#1f2733); font-size:.85rem; line-height:1.3; white-space:nowrap;}

table.ss-pdp-spec{width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 14px;}
table.ss-pdp-spec th, table.ss-pdp-spec td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--pdp-line,#e3e8ef); vertical-align:top;}
table.ss-pdp-spec th{width:42%; color:var(--pdp-muted,#5b6675); font-weight:600; background:#f8fafc;}

.ss-pdp-variant-sku{color:var(--pdp-muted,#5b6675); font-size:.9rem; margin:0 0 10px;}

/* ---------------- product family bar ----------------
   OBJ_PRODUCT_FAMILY_OBJ (scart_misc.asp fn_render_product_family): a row of cards linking the
   related products or departments of the product's family; the card for the current product
   is highlighted. Like the per-variant block it is not scoped to .ss-pdp, so it also works in a
   custom layout; every colour has a fallback. A store can set --pfam-accent (inside a product
   layout the bar follows --pdp-accent by itself).

   The look (v=9): the family name is a small heading with a hairline running to the right;
   the cards are compact (a small picture, a title and one line of text) and as many as fit
   share one line, so a family of five or six takes a single row on a desktop page. The card
   of the product on screen is outlined in the accent colour, lightly tinted and carries a tick
   on its corner. All of this is drawn from the markup as it is (nothing here needs a change in
   scart_misc.asp):
     - the tick is the card's ::after
     - a card without a picture, in a bar where other cards have one, gets a neutral
       placeholder (::before) so the titles line up
     - a picture that cannot be loaded is marked .is-empty by pdp-detail.js and shows the
       same placeholder instead of an empty box
     - a picture at least twice as wide as high (or the reverse) is marked .is-whole and shown whole */
:where(.ss-pfam){
  --pfam-accent:var(--pdp-accent,#1f5fbf);
  --pfam-line:var(--pdp-line,#e3e8ef);
  --pfam-ink:var(--pdp-ink,#1f2733);
  --pfam-muted:var(--pdp-muted,#5b6675);
  --pfam-tint:#f3f7fd;
  --pfam-ring:#c9daf4;
}
/* the tint and the ring follow the accent colour where the browser can mix colours */
@supports (background:color-mix(in srgb, red 10%, white)){
  :where(.ss-pfam){--pfam-tint:color-mix(in srgb, var(--pfam-accent) 5%, #fff); --pfam-ring:color-mix(in srgb, var(--pfam-accent) 22%, #fff);}
}
@supports not selector(:where(*)){
  .ss-pfam{
    --pfam-accent:var(--pdp-accent,#1f5fbf);
    --pfam-line:var(--pdp-line,#e3e8ef);
    --pfam-ink:var(--pdp-ink,#1f2733);
    --pfam-muted:var(--pdp-muted,#5b6675);
    --pfam-tint:#f3f7fd;
    --pfam-ring:#c9daf4;
  }
}
.ss-pfam{
  --pfam-ph:#eef2f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l8.5 4.5-8.5 4.5L3.5 8z'/%3E%3Cpath d='M3.5 12.5l8.5 4.5 8.5-4.5'/%3E%3Cpath d='M3.5 16.5l8.5 4.5 8.5-4.5'/%3E%3C/svg%3E") center / 20px no-repeat;
  margin:0 0 40px;
}
.ss-pfam *{box-sizing:border-box;}
.ss-pfam-label{display:flex; align-items:center; gap:14px; margin:0 0 10px; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pfam-muted);}
.ss-pfam-label::after{content:""; flex:1 1 auto; height:1px; background:var(--pfam-line);}
/* as many cards on a line as fit, all the same width */
.ss-pfam-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px;}
.ss-pfam-list li{margin:0; padding:0; min-width:0; list-style:none;}
.ss-pfam-card{
  position:relative; display:flex; align-items:center; gap:10px; height:100%; min-height:58px;
  padding:9px 12px;
  border:1px solid var(--pfam-line); border-radius:12px; background:#fff; color:var(--pfam-ink);
  text-decoration:none; box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .16s, box-shadow .16s, transform .16s, background-color .16s;
}
.ss-pfam-card:hover,
.ss-pfam-card:focus{color:var(--pfam-ink); text-decoration:none;}
.ss-pfam-card:hover{border-color:var(--pfam-accent); box-shadow:0 10px 20px -16px rgba(16,24,40,.45); transform:translateY(-1px);}
.ss-pfam-card.on{border-color:var(--pfam-accent); background:var(--pfam-tint); box-shadow:0 0 0 2px var(--pfam-ring);}
.ss-pfam-card.on:hover{transform:none; box-shadow:0 0 0 2px var(--pfam-ring);}
.ss-pfam-card:focus-visible{outline:3px solid var(--pdp-focus,#0a58ca); outline-offset:2px;}
/* .ss-pdp a:focus-visible rounds every link to 6px: the card keeps its own shape */
.ss-pfam a.ss-pfam-card:focus-visible{border-radius:12px;}

/* the card of the product on screen carries a tick on its corner, so it is not told apart by colour alone */
.ss-pfam-card.on::after{
  content:""; position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--pfam-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow:0 0 0 2px #fff;
}

.ss-pfam-img{flex:0 0 40px; width:40px; height:40px; border-radius:9px; overflow:hidden; background:#f1f4f9; border:1px solid rgba(16,24,40,.07);}
.ss-pfam-img img{display:block; width:100%; height:100%; object-fit:cover;}
/* a picture at least twice as wide as high, or as high as wide (marked by pdp-detail.js), is shown whole,
   on white, instead of being cut to its middle */
.ss-pfam-img.is-whole{background:#fff;}
.ss-pfam-img.is-whole img{object-fit:contain;}
/* a picture that could not be loaded (marked by pdp-detail.js) */
.ss-pfam-img.is-empty{background:var(--pfam-ph);}
.ss-pfam-img.is-empty img{display:none;}
.ss-pfam-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.ss-pfam-title{font-weight:700; font-size:.875rem; line-height:1.25; color:var(--pfam-ink); overflow-wrap:anywhere;}
/* a title or a text never takes more than two lines, so one long text cannot make the whole row tall */
.ss-pfam-title, .ss-pfam-sub{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.ss-pfam-sub{font-size:.75rem; line-height:1.3; color:var(--pfam-muted); overflow-wrap:anywhere;}
.ss-pfam-card.on .ss-pfam-img{border-color:transparent; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--pfam-accent);}
/* A card without a picture among cards that have one: a placeholder keeps the titles in line.
   A bar in which no card has a picture stays text only. (A browser that does not know :has()
   just shows the card without the placeholder.) */
.ss-pfam-list:has(.ss-pfam-img) .ss-pfam-card:not(:has(.ss-pfam-img))::before{
  content:""; flex:0 0 40px; width:40px; height:40px; border-radius:9px; border:1px solid rgba(16,24,40,.07); background:var(--pfam-ph);
}
/* a bar without pictures needs less room per card */
.ss-pfam-list:not(:has(.ss-pfam-img)){grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
/* a family with one card only: do not stretch it over the whole row */
.ss-pfam-list li:only-child{max-width:440px;}
/* A card too narrow for a picture AND its text (two cards side by side in a theme with a narrow
   column on a phone) shows the text only, so that a title is not broken in the middle of a word.
   Each card is measured by itself (a container query); a browser that does not know those keeps the picture. */
.ss-pfam-list li{container-type:inline-size;}
@container (max-width:150px){
  .ss-pfam-img,
  .ss-pfam-list:has(.ss-pfam-img) .ss-pfam-card:not(:has(.ss-pfam-img))::before{display:none;}
}

/* ---------------- Product Configurator layout ----------------
   The item layout "Product Configurator" (Item Layout, Detail Layout tab). Its body is the Modern
   layout's with the root class "ss-pdp ss-cfg", so everything above applies, and it adds:
     .ss-cfg-eyebrow     OBJ_EXT_FIELD1_OBJ   a short line above the product name
     .ss-cfg-sku         OBJ_VARIANT_SKU_OBJ  SKU of the chosen attribute value, else of the item
     .ss-cfg-pricenote   OBJ_EXT_FIELD2_OBJ   a note beside the price
     .ss-cfg-chips       OBJ_VARIANT_CHIPS_OBJ
     .ss-cfg-box         OBJ_EXT_FIELD3_OBJ   a framed box: a heading and a list become a tick list
     .ss-cfg-facts       OBJ_EXT_FIELD4_OBJ   a heading and a table become "name ... value" rows
     .ss-cfg-perks       OBJ_EXT_FIELD5_OBJ   right under Add To Cart: a list becomes a box of assurances
   From 901px wide the tabs sit in the left column under the gallery (see the end of this section).
   Every one of them takes no room when its field is empty, so the layout also suits products
   that use none of this. The names and choices of attributes and configurations (written by
   item_attr_disp.asp as a three column table) are stacked: name above, choice below, full width.
   A store can rename the SKU line, recolour the layout and choose its font in its own style sheet:
     .ss-cfg{--cfg-sku-label:"Catalog"; --pdp-accent:#e8590c; --cfg-font:"Inter",Arial,sans-serif;} */
.ss-cfg{--ss-pill-accent:var(--pdp-ink,#1f2733); max-width:1200px; font-family:var(--cfg-font,inherit);}
/* One font for the whole layout: that of the content around it, or --cfg-font when the store
   sets it. A theme's style sheet names a font for table cells, links and its own text classes
   one by one, which would otherwise keep those parts of the layout in the theme's font. */
.ss-cfg td, .ss-cfg th, .ss-cfg .normal, .ss-cfg .big, .ss-cfg .small, .ss-cfg a, .ss-cfg p, .ss-cfg li, .ss-cfg label,
.ss-cfg h1, .ss-cfg h2, .ss-cfg h3, .ss-cfg h4, .ss-cfg input, .ss-cfg select, .ss-cfg button, .ss-cfg textarea{font-family:inherit;}
.ss-cfg .ss-pdp-top{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:44px;}

.ss-cfg-eyebrow{margin:0 0 8px; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pdp-accent);}
.ss-cfg-eyebrow:empty{display:none;}
.ss-cfg-eyebrow p{margin:0;}
.ss-cfg .ss-pdp-name{margin:0 0 8px; font-size:1.875rem; line-height:1.15; font-weight:600; letter-spacing:-.025em;}
.ss-cfg-sku{margin:0 0 12px; font-size:.82rem; color:var(--pdp-muted);}
.ss-cfg-sku::before{content:var(--cfg-sku-label,"SKU") " ";}
.ss-cfg-sku:empty,
.ss-cfg-sku:has(> [data-ss-live]:empty){display:none;}
.ss-cfg .ss-pdp-rating:empty{display:none;}
.ss-cfg .ss-pdp-pricebar{align-items:baseline; margin:0 0 14px;}
.ss-cfg .ss-pdp-price{font-size:2rem; line-height:1.2; font-weight:700; font-variant-numeric:tabular-nums;}
/* The tabs as on the reference page: no frame, a line under the tab names (which wrap to a second
   line instead of scrolling when the column is narrow), the chosen tab underlined in the accent
   colour, the text of a tab in the muted colour. */
.ss-cfg .ss-pdp-tabs{background:none; border:0; border-radius:0; overflow:visible;}
.ss-cfg .ss-pdp-tabbar{flex-wrap:wrap; gap:4px; overflow:visible; background:none;}
.ss-cfg .ss-pdp-tabbar button{padding:12px 16px; font-size:.875rem; line-height:1.25rem; color:var(--pdp-muted); border-bottom-width:2px;}
.ss-cfg .ss-pdp-tabbar button:hover{color:var(--pdp-ink);}
.ss-cfg .ss-pdp-tabbar button.on{color:var(--pdp-ink); border-bottom-color:var(--pdp-accent);}
.ss-cfg .ss-pdp-panel{padding:24px 0;}
.ss-cfg .ss-pdp-panel p{font-size:1rem; line-height:1.625; color:var(--pdp-muted);}
/* headings inside the tabs (Overview title, "Documents"): the size and weight of the reference page */
.ss-cfg .ss-pdp-panel :is(h2, h3){margin:0 0 10px; font-size:1.375rem; line-height:1.5; font-weight:600; letter-spacing:normal; color:var(--pdp-ink);}
.ss-cfg-pricenote{font-size:.9rem; color:var(--pdp-muted);}
.ss-cfg-pricenote:empty{display:none;}
.ss-cfg-pricenote p{display:inline; margin:0;}
.ss-cfg-chips .ss-pdp-chips{gap:6px; margin:0 0 20px;}
.ss-cfg-chips .ss-pdp-chip{padding:4px 10px; font-size:.75rem; color:var(--pdp-muted);}

/* attributes and configurations: name above, choice below */
.ss-cfg .ss-pdp-attrs{margin:0 0 6px;}
.ss-cfg .ss-pdp-attrs table{display:block; width:100%; border:0; border-spacing:0;}
.ss-cfg .ss-pdp-attrs tbody{display:block;}
.ss-cfg .ss-pdp-attrs tr{display:flex; flex-wrap:wrap; align-items:center;}
.ss-cfg .ss-pdp-attrs td{display:block; min-width:0; padding:0;}
.ss-cfg .ss-pdp-attrs td:only-child{flex:1 1 100%;}
/* a row of three cells is: name, spacer, choice */
.ss-cfg .ss-pdp-attrs td:first-child:nth-last-child(3){flex:0 0 100%; margin:0 0 8px; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pdp-ink);}
.ss-cfg .ss-pdp-attrs td:nth-child(2):nth-last-child(2){display:none;}
.ss-cfg .ss-pdp-attrs td:nth-child(3):last-child{flex:1 1 100%;}
/* A row of one cell is either the gap item_attr_disp.asp puts between groups (a space), or the
   Description of a configuration (Edit Item, Configurations), shown as a small note above its choice. */
.ss-cfg .ss-pdp-attrs td[colspan]:only-child{font-size:.82rem; line-height:1.4; color:var(--pdp-muted);}
.ss-cfg .ss-pdp-attrs td[colspan]:only-child br{display:none;}
.ss-cfg .ss-pdp-attrs select{width:100%; max-width:none; height:48px !important; padding:0 14px; border:1px solid var(--pdp-line); border-radius:10px; font:inherit; font-size:1rem; background-color:#fff; color:var(--pdp-ink);}
.ss-cfg .ss-pills{gap:8px; margin:0;}
.ss-cfg .ss-pills-label{margin:0;}
.ss-cfg .ss-pill-text{min-height:44px; padding:8px 18px; border-radius:10px; font-weight:600;}

/* quantity and Add To Cart on one line, without the frame of the Modern layout */
.ss-cfg .ss-pdp-buy{padding:0; border:0; border-radius:0; background:none; gap:12px; margin:0 0 10px;}
.ss-cfg .ss-pdp-qty{align-items:center; min-height:48px; padding:0 4px; border:1px solid var(--pdp-line); border-radius:10px; background:#fff;}
.ss-cfg .ss-pdp-qty:empty,
.ss-cfg .ss-pdp-qty:not(:has(> :not(input[type="hidden"]))){display:none;}
.ss-cfg .ss-pdp-qty .btnMinusQty,
.ss-cfg .ss-pdp-qty .btnPlusQty{display:inline-flex; align-items:center; justify-content:center; width:36px; height:44px; margin:0; padding:0; border:0; background:none; font-size:1.25rem; line-height:1; cursor:pointer; color:var(--pdp-ink);}
.ss-cfg .ss-pdp-qty input.item_qty{width:44px; height:44px; margin:0; padding:0; border:0; background:transparent; text-align:center; font:inherit; font-weight:600; color:var(--pdp-ink);}
.ss-cfg .ss-pdp-buy input[type="submit"]{flex:1 1 160px; min-height:48px; margin:0; padding:0 22px; border-radius:10px; font-size:1.02rem; font-weight:700; cursor:pointer;}
.ss-cfg .ss-pdp-stock{margin:0 0 20px;}

/* OBJ_EXT_FIELD3_OBJ: a framed box. A heading and a list in it become a small heading and a tick list. */
.ss-cfg-box{margin:0 0 18px; padding:16px 18px 8px; border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); background:#fff; font-size:.95rem; font-weight:400;}
.ss-cfg-box:empty{display:none;}
.ss-cfg-box h2, .ss-cfg-box h3, .ss-cfg-box h4, .ss-cfg-box h5{margin:0 0 6px; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pdp-ink);}
.ss-cfg-box p{margin:0 0 8px;}
.ss-cfg-box ul{list-style:none; margin:0; padding:0;}
.ss-cfg-box li{position:relative; margin:0; padding:9px 0 9px 28px; border-top:1px solid var(--pdp-line); list-style:none;}
.ss-cfg-box li:first-child{border-top:0;}
.ss-cfg-box li::before{content:""; position:absolute; left:2px; top:50%; width:16px; height:16px; margin-top:-8px; background-color:var(--pdp-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;}

/* OBJ_EXT_FIELD4_OBJ: a heading and a table in it become "name ... value" rows */
.ss-cfg-facts{margin:0 0 18px; font-size:.9rem; font-weight:400;}
.ss-cfg-facts:empty{display:none;}
.ss-cfg-facts h2, .ss-cfg-facts h3, .ss-cfg-facts h4, .ss-cfg-facts h5{margin:0 0 4px; font-size:.92rem; font-weight:700; color:var(--pdp-ink);}
.ss-cfg-facts p{margin:0 0 8px;}
.ss-cfg-facts table{width:100%; border-collapse:collapse; border:0;}
.ss-cfg-facts th, .ss-cfg-facts td{padding:7px 0; border:0; border-bottom:1px solid var(--pdp-line); text-align:left; vertical-align:top; font-weight:400; color:var(--pdp-muted);}
.ss-cfg-facts td:last-child{text-align:right; color:var(--pdp-ink);}
.ss-cfg .ss-pdp-ext:empty{display:none;}

/* OBJ_EXT_FIELD5_OBJ, right under Add To Cart (.ss-cfg-perks): a list there becomes a box of
   assurances with a tick before each line, as on the reference page. A line can be a link and can
   carry a small note under it:
     <ul><li><a href="warranty.asp"><strong>15-year limited warranty</strong></a></li>
         <li><a href="shipping.asp"><strong>Flat-rate ground shipping</strong><small>Contiguous United States only.</small></a></li></ul>
   The colours can be changed in the store's own style sheet:
     .ss-cfg{--cfg-perks-bg:#faf8f5; --cfg-perks-line:#ece7e0; --cfg-perks-tick:#2f7d4f; --cfg-perks-note:#6b6661;}  */
.ss-cfg-perks{margin:-2px 0 14px; font-size:.875rem; line-height:1.35;}
.ss-cfg-perks p{margin:0 0 8px;}
.ss-cfg-perks ul{display:grid; gap:7px; margin:0; padding:10px 14px; list-style:none; border:1px solid var(--cfg-perks-line,#ece7e0); border-radius:14px; background:var(--cfg-perks-bg,#faf8f5);}
.ss-cfg-perks li{position:relative; margin:0; padding:0 0 0 25px; list-style:none; color:var(--pdp-ink);}
.ss-cfg-perks li::before{content:""; position:absolute; left:0; top:2px; width:16px; height:16px; background-color:var(--cfg-perks-tick,#2f7d4f);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;}
.ss-cfg-perks a{color:inherit; text-decoration:none;}
.ss-cfg-perks a:hover strong{text-decoration:underline;}
.ss-cfg-perks strong{font-weight:600; color:var(--pdp-ink);}
.ss-cfg-perks small{display:block; margin-top:1px; font-size:.78125rem; line-height:1.35; color:var(--cfg-perks-note,#6b6661);}

/* The tabs under the gallery, as on the reference page. From 901px wide the layout is one grid of
   two columns: each family bar takes a row across both, the gallery and then the tabs fill the left
   column, and the product details run down the right column beside both. .ss-pdp-top gives up its
   own box for this (display:contents), so the layout itself needs no change. The tabs row is 1fr:
   a long details column makes that row taller, never the gallery's. Narrower screens keep one
   column: gallery, details, tabs. */
@media (min-width:901px){
  .ss-pdp.ss-cfg{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); column-gap:44px; grid-template-rows:repeat(6,auto) [main] auto [tabs] 1fr [after] auto;}
  .ss-pdp.ss-cfg > *, .ss-pdp.ss-cfg > .ss-pdp-top > *{grid-column:1 / -1; min-width:0;}
  .ss-pdp.ss-cfg > .ss-pdp-top{display:contents;}
  .ss-pdp.ss-cfg > .ss-pdp-top > .ss-pdp-media{grid-column:1; grid-row:main;}
  .ss-pdp.ss-cfg > .ss-pdp-top > .ss-pdp-info{grid-column:2; grid-row:main / after;}
  .ss-pdp.ss-cfg > .ss-pdp-tabs{grid-column:1; grid-row:tabs; align-self:start;}
  .ss-pdp.ss-cfg > .ss-pdp-accessory{grid-row:after;}
}

/* ---------------- end of Product Configurator layout ---------------- */

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .ss-pdp-top{grid-template-columns:1fr; gap:22px;}
  .ss-pdp-media{position:static;}
  .ss-pdp-name{font-size:1.55rem;}
  .ss-pdp-price{font-size:1.7rem;}
  .ss-pdp-panel{padding:20px 16px;}
  .ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.spec th{width:50%;}
  table.ss-pdp-spec th{width:50%;}
  .ss-pdp-chip{white-space:normal;}
  .ss-pfam{margin-bottom:30px;}
  /* Product Configurator layout, small screens */
  .ss-cfg .ss-pdp-top{grid-template-columns:minmax(0,1fr); gap:22px;}
  .ss-cfg .ss-pdp-name{font-size:1.55rem;}
  .ss-cfg .ss-pdp-price{font-size:1.7rem;}
  /* end of Product Configurator layout, small screens */
}

/* phones: two cards side by side, with or without pictures, however narrow the column of the theme is */
@media (max-width:560px){
  .ss-pfam{margin-bottom:26px;}
  .ss-pfam-list,
  .ss-pfam-list:not(:has(.ss-pfam-img)){grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .ss-pfam-card{min-height:0; gap:8px; padding:9px 10px;}
  .ss-pfam-img,
  .ss-pfam-list:has(.ss-pfam-img) .ss-pfam-card:not(:has(.ss-pfam-img))::before{flex-basis:34px; width:34px; height:34px; border-radius:8px; background-size:17px;}
  .ss-pfam-title{font-size:.84rem;}
  .ss-pfam-sub{font-size:.72rem;}
  .ss-pfam-list li:only-child{max-width:none; grid-column:1 / -1;}
}

@media (prefers-reduced-motion: reduce){
  .ss-pdp-panel.on{animation:none;}
  .ss-pfam-card, .ss-pfam-card::after{transition:none;}
  .ss-pfam-card:hover, .ss-pfam-card:hover::after{transform:none;}
}

/* Picture lightbox: the storefront's jquery.lightbox, opened by a click on the big picture or on
   "Click to see larger preview". Its script sizes the picture box from the picture's own pixels,
   the storefront style caps the box at 950 x 713, and the theme shrinks a big picture to the width
   of the box. So the box came out taller than the picture (an empty band above the caption) or
   shorter (the caption ran into the picture). Here the picture is fitted to the screen and the box
   and the caption bar under it follow the picture. The lightbox itself takes each picture once and
   counts "Image n of N" by that (include/js/jquery.lightbox-0.5.js, bundled in script-018). */
#jquery-lightbox{display:grid !important; grid-template-columns:auto; justify-content:center; align-content:start;}
#lightbox-container-image-box{width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; overflow:visible !important; margin:0 !important;}
#lightbox-container-image-box:has(#lightbox-image:not([src])){min-width:250px; min-height:250px;}
#lightbox-container-image{padding:10px !important;}
#lightbox-image{display:block !important; margin:0 auto; width:auto !important; height:auto !important; max-width:min(930px, calc(100vw - 40px)) !important; max-height:calc(90vh - 110px) !important;}
/* while the next picture loads, the script hides the picture: the box keeps its size meanwhile */
#lightbox-image[style*="display: none"]{visibility:hidden;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext{height:100% !important;}
/* the caption bar: as wide as the picture box (it does not widen the box itself), a little air
   between the picture and the caption */
#lightbox-container-image-data-box{width:auto !important; max-width:none !important; height:auto !important; margin:0 !important; padding:4px 10px 6px !important; contain:inline-size;}
#lightbox-container-image-data{display:flow-root;}
/* a picture that is in the gallery twice keeps one thumbnail (pdp-detail.js marks the second) */
.ss-pdp-media .divThumbs.is-copy{display:none !important;}

/* ---------------- Sale price, availability, stacked family bars ----------------
   Sale price. With a Special Price (Discount) on the product (Edit Item, Specials) the storefront
   writes the regular price crossed out into .ss-pdp-price (a <strike> with its own red 11pt style)
   and the price to pay into .ss-pdp-price-was, which the rule further up would cross out as well.
   Here the price to pay is the big one and comes first, the regular price follows small and grey,
   and pdp-detail.js puts the amount saved between them (.ss-pdp-save). pdp-detail.js also marks
   the bar .is-sale, for browsers that do not know :has(). The words can be changed in the store's
   own style sheet:  .ss-pdp{--pdp-save-label:"You save";}  */
:is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price-was{order:1; font-size:2rem; font-weight:800; color:var(--pdp-ink); text-decoration:none;}
:is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-save{order:2;}
:is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price{order:3; font-size:1.05rem; font-weight:500; color:var(--pdp-muted);}
:is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price strike{font-size:inherit !important; color:inherit !important;}
:is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-cfg-pricenote{order:4;}
.ss-pdp-save{display:inline-flex; align-items:center; align-self:center; padding:4px 10px; border-radius:999px; background:var(--pdp-accent); color:var(--pdp-accent-ink,#fff); font-size:.78rem; font-weight:700; line-height:1.3; white-space:nowrap; font-variant-numeric:tabular-nums;}
.ss-pdp-save::before{content:var(--pdp-save-label,"Save") "\00a0";}
.ss-pdp-save:empty{display:none;}

/* Product Configurator: a framed price card, as on the reference page. "Our Price" above the
   price, the regular price under it as "List Price $...", then the availability block. Only when
   the product is on sale or shows its availability: other products keep the plain price line.
     .ss-cfg{--cfg-price-label:"Our Price"; --cfg-list-label:"List Price";}  */
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale, .ss-pdp-pricebar:has(.ss-cfg-avail)){align-items:center; gap:8px 12px; margin:0 0 18px; padding:18px 20px; border:1px solid var(--pdp-line); border-radius:14px; background:#fff;}
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale, .ss-pdp-pricebar:has(.ss-cfg-avail))::before{content:var(--cfg-price-label,"Our Price"); order:0; flex:0 0 100%; margin:0 0 -2px; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pdp-accent);}
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price-was{font-size:2.5rem; line-height:1.05; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price{flex:0 0 100%; font-size:.875rem; font-weight:400;}
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price::before{content:var(--cfg-list-label,"List Price") "\00a0";}
.ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price strike{font-weight:500; font-variant-numeric:tabular-nums;}

/* Availability, written into Extended Field 2:
     <div class="ss-cfg-avail is-wait"><strong class="ss-cfg-avail-status">Made to Order</strong><p>...</p></div>
   The status with a dot (is-wait: the accent colour, is-stock: green) and its text under it,
   across the price card below a line. */
.ss-cfg-pricenote:has(.ss-cfg-avail){order:4; flex:0 0 100%; margin:4px 0 0; padding:12px 0 0; border-top:1px solid var(--pdp-line); font-size:1rem; color:var(--pdp-ink);}
.ss-cfg-avail{display:block;}
.ss-cfg-avail-status{display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:700; color:var(--pdp-accent);}
.ss-cfg-avail-status::before{content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:currentColor;}
.ss-cfg-avail.is-stock .ss-cfg-avail-status{color:var(--cfg-stock,#15803d);}
.ss-cfg-pricenote .ss-cfg-avail p{display:block; margin:6px 0 0; font-size:.82rem; line-height:1.6; color:var(--pdp-ink);}

/* Two or more family bars on one product (for example "Department" above "Product family"):
   less room between them than under the last one, and a bar of one or two cards keeps its cards
   at about the width of the cards of a fuller bar instead of stretching them across the line.
   The families of the other departments of a "Department" bar are on the page too, hidden, until
   a department card shows them (pdp-detail.js); they do not count as a bar below. */
.ss-pfam[hidden]{display:none !important;}
/* while pdp-detail.js brings in the product of a family card, the current one is dimmed */
.ss-pdp.is-loading{opacity:.55; pointer-events:none; transition:opacity .15s;}
.ss-pfam:has(~ .ss-pfam:not([hidden])){margin-bottom:20px;}
.ss-pfam:has(~ .ss-pfam:not([hidden])) .ss-pfam-list:not(:has(> li:nth-child(3))){grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
@media (max-width:900px){
  .ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale) > .ss-pdp-price-was{font-size:2.1rem;}
}
@media (max-width:560px){
  .ss-pfam:has(~ .ss-pfam:not([hidden])){margin-bottom:14px;}
  .ss-pfam:has(~ .ss-pfam:not([hidden])) .ss-pfam-list:not(:has(> li:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-cfg :is(.ss-pdp-pricebar:has(> .ss-pdp-price strike), .ss-pdp-pricebar.is-sale, .ss-pdp-pricebar:has(.ss-cfg-avail)){padding:16px;}
}